@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* COULEURS A CHANGER ICI */
:root {
  --primary: #55D1F9;
  --secondary: #354d68;
  --disabled: #D4D4D4;
  --grey: #808080;
  --ligthGrey: #F5F5F5;
  --lightRed: #FEF2F2;
  --red: #EF4444;
  --darkRed: #B91C1C;
  --lightest-Orange: #FFF7ED;
  --orange: #FF8000;
  --darkOrange: #C2410C;
  --lightGreen: #ECFDF5;
  --green: #10B981;
  --darkGreen: #15803D;
  --white: #ffffff;
}
    
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

* {
  box-sizing: border-box;
  margin: 0;
  font-family: "Poppins", sans-serif !important;
}
h1 {
  font-size: 50px;
  font-weight: 800;
  line-height: 1em;
  color: #354d68;
  text-transform: none !important;
}
body {
  width: 100%;
}
/* HEADING */
.heading {
  padding: 3rem 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;
}
.heading .breadcrumbs {
  display: flex;
  justify-content: center;
  font-size: 0.815rem;
  color: #c2c2c2;
  font-weight: 600;
}
.heading .breadcrumbs span {
  font-weight: inherit !important;
}
.heading .breadcrumbs a {
  color: #c2c2c2;
  text-decoration: none;
  font-weight: 400;
}
/* SECTION PERIODE + FILTRES */
body #planning {
  max-width: 1600px;
  box-sizing: content-box;
  margin: 0 auto 4rem auto;
  padding: 2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
body #planning .choix_periode {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}
body #planning .choix_periode .nom_semaine {
  flex: 1 1 500px;
  display: flex;
  align-items: center;
  justify-content: flex-start ;
  gap: 1rem;
}
body #planning .choix_periode .nom_semaine .span_nom_semaine {
  color: var(--secondary);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}
body #planning .choix_periode .nom_semaine .semaine_pre, .semaine_suivante {
  color: var(--secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  width: 2.5rem;
  min-width: 2.5rem;
  border: 1px var(--secondary) solid;
  border-radius: 60%;
  transition: all 300ms ease-in-out;
}
body #planning .choix_periode .nom_semaine > .disabled, #planning .nom_semaine > .disabled:hover {
  color: var(--disabled);
  border: 1px var(--disabled) solid;
  border-radius: 60%;
  cursor: default;
  pointer-events: none;  
}
body #planning .choix_periode .nom_semaine .semaine_pre:hover, .semaine_suivante:hover {
  color: var(--white);
  background-color: var(--secondary);
}
body #planning .choix_periode .nom_semaine .icon_chevron{
  height: 2rem;
  width: 2rem;
}
body #planning .choix_periode .nom_semaine .semaine_pre > .icon_chevron{
  transform: rotate(90deg);
}
body #planning .choix_periode .nom_semaine .semaine_suivante > .icon_chevron{
  transform: rotate(-90deg);
}
body #planning .choix_periode .filtres_activites {
  flex: 1 1 60%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.5rem;
}
body #planning .choix_periode .filtres_activites div{
  flex: 1 1 20%;
  min-width: 128px;
}
body #planning .choix_periode .filtres_activites > div:nth-child(3){
  flex: 2 0 54%;
  /* max-width: 35vw; */
  position: relative;
}
body #planning .choix_periode .filtres_activites > div:nth-child(3) #activites_precise {
  width: -webkit-fill-available;
}
body #planning .choix_periode .filtres_activites > div:nth-child(3) #activites_precise .list_activite {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 2;
  background-color: white;
  width: -webkit-fill-available;
  border-radius: 0.5rem;
  box-shadow: 0rem 1px 0.3125rem 0.125rem rgba(0, 0, 0, 0.10);
}
body #planning .choix_periode .filtres_activites > div:nth-child(3) #activites_precise .list_activite label {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-style: italic;
  font-weight: 400;
  color: var(--secondary);
  width: -webkit-fill-available;
  cursor: pointer;
}
body #planning .choix_periode .filtres_activites > div:nth-child(3) #activites_precise .list_activite label:hover {
  background-color: var(--secondary);
  color: var(--white);
}
body #planning .choix_periode .filtres_activites > div:nth-child(4){
  flex: 0 0 160px;
  width: fit-content;
}
body #planning .choix_periode .filtres_activites div > label {
  font-size: 0.875rem;
  font-weight: 500;
  padding-left: 0.5rem;
  text-align: left;
  color: var(--secondary);
}
body #planning .choix_periode .filtres_activites .input_filtre {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  position: relative;
  border-radius: 0.25rem;
  border: 1px solid var(--secondary);
  color: var(--secondary);
  padding: 0.25rem  2rem 0.25rem 0.5rem;
  font-style: italic;
  font-weight: 300;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: var(--white) url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23354d68'/></g></svg>") no-repeat;
  background-position: right 5px top 60%;
}
body #planning .choix_periode .filtres_activites details summary.input_filtre {
  list-style: none;
  z-index: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body #planning .choix_periode .filtres_activites details summary.input_filtre::-webkit-details-marker {
  display: none;
}
body #planning .choix_periode .filtres_activites .btn_mes_resa {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--white);
  background-color: var(--primary);
  font-weight: 400;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0.5rem;
  padding: 10px;
  cursor: pointer;
  transition: all 250ms ease-in-out;
}
body #planning .choix_periode .filtres_activites .btn_mes_resa:hover {
  background-color: var(--secondary);;
  color: var(--white);
}
body #planning .choix_periode .filters {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  color: var(--secondary);
}

/* SECTION AFFICHAGE PLANNING */
body #planning #week_planner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(176px, 100%/8), 1fr));
  grid-gap: 1rem 0.5rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: var(--ligthGrey);
}
body #planning #no_creneau_found {
  grid-row: 2;
  grid-column: 1 / -1;
  background-color: var(--ligthGrey);
  text-align: center;
  padding: 1rem 1rem 2rem 1rem;
}
body #planning #no_creneau_found a {
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}
body #planning #premium_legende {
  grid-column: 1 / -1;
  text-align: right;
  font-size: 0.75rem;
  color: var(--grey);
  padding-right: 1rem;
  height: 1.25rem;
}
body #planning #premium_legende p { 
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
}
body #planning #premium_legende p .icon_premium{
  height: 1.25rem;
  width: 1.25rem;
}
body #planning #premium_legende .icon_disponible {
  height: 0.75rem;
  width: 0.75rem;
  align-self: center;
  margin-right: 3px;
}
#popup_reserver_v2 .infos_creneaux .div_infos .tarif_abo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
#popup_reserver_v2 .infos_creneaux .div_infos .tarif_abo p {
  font-weight: 600;
}
.icon_coin {
  height: 1.25em;
  width: 1.25em;
  vertical-align: sub;
}
body #planning #week_planner .day {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body #planning #week_planner .day .title_header {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.25rem 0.75rem;
  border-radius: 0.3125rem;
  background-color: var(--white);
  box-shadow: 0rem 0rem 0.3125rem 0.125rem rgba(0, 0, 0, 0.05);
}
body #planning #week_planner .day .title_header > h2 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--secondary);
  margin-bottom: unset;
  line-height: normal;
  font-style: italic;
}
body #planning .date_seance {
  font-weight: 400;
}
/* Nombre de seances du jour, sous son nom (ecrit par maj_tranches_horaires()) :
   un jour dont la colonne est vide en haut du planning n'est pas un jour sans cours. */
body #planning #week_planner .day .title_header .nb_seances {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  line-height: 1.2;
}
body #planning #week_planner .day .column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem;
  gap: 0.5rem;
  transition: opacity 0.3s ease-out;
}
body #planning #week_planner .day .column .card_activity {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 5rem;
  border-radius: 0.3125rem;
  box-shadow: 0rem 0rem 0.3125rem 0.125rem rgba(0, 0, 0, 0.05);
  transition: all 250ms ease-in-out;
  text-align: left;
}
body #planning #week_planner .day .column .card_activity:not(.card_activity.no_activite):not(.disabled) {
  cursor: pointer;
}
body #planning #week_planner .day .column .card_activity::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0.3125rem;
  box-shadow: 0rem 0rem 0.6125rem 0.175rem rgba(0, 0, 0, 0.10);
  transition: opacity 0.3s ease-in-out;
}
body #planning #week_planner .day .column .card_activity:not(.card_activity.no_activite):not(.disabled):hover {
  transform: scale(1.05);
}
body #planning #week_planner .day .column .card_activity:not(.card_activity.no_activite):not(.disabled):hover::after {
  opacity: 1;
}
body #planning #week_planner .day .column .card_activity.card_activity_planning {
  height: auto;
}
body #planning #week_planner .day .column .disabled {
  cursor: default;
}
body #planning #week_planner .day .column .card_activity .thumbnail {
  flex: 1 1 52px;
  height: 100%;
  position: relative;
  border-radius: 0.3125rem 0 0 0.3125rem;
  overflow: hidden;
}
body #planning #week_planner .day .column .card_activity.card_activity_planning .thumbnail {
  flex: 1 1 40px;
}
body #planning #week_planner .day .column .card_activity .thumbnail .capacity {
  display: flex;
  justify-content: space-between;
  gap: 0.125rem;
  padding: 0.35rem 0.25rem 0.25rem 0.25rem;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  background-color: var(--white);
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  box-shadow: 0rem 0rem 0.3125rem 0.125rem rgba(0, 0, 0, 0.05);
}
body #planning #week_planner .day .column .card_activity .thumbnail .capacity .icon_person {
  color: var(--green);
  display: flex;
  align-items: center;
  height: 0.475rem;
  width: 0.475rem;
}
body #planning #week_planner .day .column .card_activity .duree {
  display: flex;
  align-items: center;
  font-size: 0.625rem;
  line-height: normal;
  font-weight: 400;
  color: var(--grey);
}
body #planning #week_planner .day .column .card_activity .duree .icon_horaire {
  color: var(--grey);
  height: 0.65rem;
  margin-right: 4px;
  width: 0.65rem;
  transform: translateY(-0.5px);
}
body #planning #week_planner .day .column .card_activity .thumbnail .capacity div {
  display: flex;
  align-items: center;
  font-size: 0.5625rem;
  line-height: 0.5625rem;
}
body #planning #week_planner .day .column .card_activity .thumbnail .icon_disponible {
  height: 0.75rem;
  width: 0.75rem;
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  color: var(--white);
  
}
/* Pictos de la vignette, en bas a gauche et cote a cote : etoile "disponible avec
   votre abonnement", couronne "activite premium", cadenas "code d'acces demande".
   Une ombre legere les garde lisibles sur une vignette claire ou sans image. */
body #planning #week_planner .day .column .card_activity .thumbnail .pictos {
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--white);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
body #planning #week_planner .day .column .card_activity .thumbnail .pictos .icon_disponible {
  position: static;
}
/* Le dessin de la couronne et celui du cadenas n'occupent que le centre de leur
   cadre : les marges negatives les ramenent a la taille de l'etoile. */
body #planning #week_planner .day .column .card_activity .thumbnail .pictos .icon_premium {
  height: 1.125rem;
  width: 1.125rem;
  margin: -0.25rem -0.1875rem;
  color: inherit;
}
body #planning #week_planner .day .column .card_activity .thumbnail .pictos .icon_cadenas {
  height: 1.125rem;
  width: 1.125rem;
  margin: -0.125rem -0.3125rem -0.25rem -0.1875rem;
}
body #planning #week_planner .day .column .card_activity .thumbnail .picture {
  height: 100%;
  width: 100%;
  padding: unset;
  overflow: unset;
  margin: unset;
  -o-object-fit: cover;
  object-fit: cover;
}
/* Vignette sans visuel (activite sans image, ou image supprimee de la
   bibliotheque) : faux visuel neutre, dessine en CSS (aucun fichier image). */
body #planning #week_planner .day .column .card_activity .thumbnail.sans_image {
  background: #E9EDF2 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='%23B6C0CC' stroke-width='1.6'/><circle cx='8.5' cy='10' r='1.6' fill='%23B6C0CC'/><path d='M5.2 17.2l4.3-5 3 3.3 2.4-2.6 3.9 4.3z' fill='%23B6C0CC'/></svg>") no-repeat center / 1.5rem;
}
body #planning #week_planner .day .column .card_activity .caption {
  flex: 2 1 108px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 0.625rem;
  background-color: var(--white);
  line-height: 1rem;
  border-radius: 0 0.3125rem 0.3125rem 0;
}
body #planning #week_planner .day .column .card_activity .caption.caption_planning {
  gap: 0.5rem;
}
body #planning #week_planner .day .column .card_activity .caption_planning.planning_color {
  color: var(--white);
}
body #planning #week_planner .day .column .card_activity .caption.caption_planning .planning_premium {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
body #planning #week_planner .day .column .card_activity .caption.caption_planning .planning_premium p {
  width: fit-content;
}
body #planning #week_planner .day .column .card_activity .caption.caption_planning .planning_premium .icon_premium {
  height: 1.25rem;
  width: 1.25rem;
  color: var(--primary);
}
body #planning #week_planner .day .column .card_activity .caption.caption_planning.planning_color .planning_premium .icon_premium {
  color: inherit;
}
body #planning #week_planner .day .column .card_activity .caption h3 {
  height: 2rem;
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 700;
  font-style: italic;
  padding-top: 0.125rem;
  text-transform: uppercase;
  color: var(--primary);

  /* Text-ellipsis pour 2 ligne comptatible avec les dernier browsers */
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: normal;
  overflow: hidden;
}
body #planning #week_planner .day .column .card_activity .caption.caption_planning h3 {
  height: 2rem;
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 700;
  font-style: italic;
  padding-top: 0.125rem;
}
body #planning #week_planner .day .column .card_activity .caption.caption_planning.planning_color h3 {
  color: inherit;
}
/* Card de reservation aux couleurs de l'activite, comme en mode planning : le fond
   de la legende prend la couleur de l'activite au centre (--couleur-activite, posee
   par le PHP) et les textes passent en blanc. Les cards non reservables gardent le
   fond blanc et leurs couleurs : grisees (expire, complet, liste d'attente) ou
   "Sur place". */
body #planning #week_planner .day .column .card_activity:not(.disabled):not(.no_tarif) .caption.couleur_activite {
  background-color: var(--couleur-activite);
  color: var(--white);
}
body #planning #week_planner .day .column .card_activity:not(.disabled):not(.no_tarif) .caption.couleur_activite h3,
body #planning #week_planner .day .column .card_activity:not(.disabled):not(.no_tarif) .caption.couleur_activite p {
  color: inherit;
}
body #planning #week_planner .day .column .card_activity .icon_cadenas{
  height: 1rem;
  width: 1rem;
}
body #planning #week_planner .day .column .card_activity .caption p {
  color: var( --grey);
  font-size: 0.75rem;
  font-weight: 400;
}
body #planning #week_planner .day .column .card_activity .caption.caption_planning p {
  color: inherit;
}
/* Etat de la card (Deja inscrit, Complet, Expire, Sur place) : badge a la place du
   compteur de places, en haut a gauche de la vignette et sous la meme forme. La
   card reservable n'en porte pas (cliquer dessus suffit) : l'element reste dans la
   page, le JS y ecrit l'etat, mais vide il est masque. Il vit dans la legende mais
   se place par rapport a la card : un libelle long peut deborder de la vignette. */
body #planning #week_planner .day .column .card_activity .caption .btn_reserver {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  z-index: 2;
  min-width: 2.5rem;
  padding: 0.35rem 0.3rem 0.25rem 0.3rem;
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 0.5625rem;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  color: var(--grey);
  background-color: var(--white);
  border-radius: 0.25rem;
  box-shadow: 0rem 0rem 0.3125rem 0.125rem rgba(0, 0, 0, 0.05);
}
body #planning #week_planner .day .column .card_activity .caption .btn_reserver:empty {
  display: none;
}
/* Le badge d'etat remplace le compteur de places. */
body #planning #week_planner .day .column .card_activity:has(.btn_reserver:not(:empty)) .thumbnail .capacity {
  visibility: hidden;
}
body #planning #week_planner .day .column .card_activity .caption .btn_reserver.deja_inscrit {
  color: var(--white);
  background-color: var(--green);
}
/* Complet (sans liste d'attente) : le rouge du compteur plein. */
body #planning #week_planner .day .column .disabled.full:not(.file_attente) .caption a.btn_reserver:not(.deja_inscrit) {
  color: var(--white);
  background-color: var(--red);
}
body #planning #week_planner .day .column .card_activity .caption .btn_hidden {
  visibility: hidden;
}
body #planning #week_planner .day .column .card_activity .icon_premium {
  height: 0.875rem;
  width: 0.875rem;
  color: var(--secondary);
}
body #planning #week_planner .day .column .no_tarif .caption > h3{
  color: var(--secondary);
}
body #planning #week_planner .day .column .no_tarif:hover {
  transform: none;
}
body #planning #week_planner .disabled .title_header{
  background-color: var(--disabled);
}
body #planning #week_planner .disabled .title_header > h2{
  color: var(--white);
}
body #planning #week_planner .day .column .disabled .thumbnail .picture, #planning #week_planner .day .column .full .thumbnail .picture {
  filter: saturate(0);
}
body #planning #week_planner .day .column .disabled .thumbnail .capacity, body #planning #week_planner .day .column .disabled .thumbnail .capacity .icon_person {
  color: var(--disabled);
  z-index: 1;
}
body #planning #week_planner .day .column .full .thumbnail .capacity {
  background-color: var(--red);
  color: var(--white);
  z-index: 1;
}
body #planning #week_planner .day .column .full .thumbnail .capacity .icon_person{
  color: var(--white);
}
body #planning #week_planner .day .column .disabled .caption .duree .icon_horaire {
  color: var(--disabled);
}
body #planning #week_planner .day .column .disabled figcaption.caption > * {
  color: var(--disabled);
}
body #planning #week_planner .day .column .disabled .caption a.btn_reserver {
  color: var(--grey);
  pointer-events: none;
}
body #planning #week_planner .day .column .disabled:hover {
  transform: none;
}
body #planning #week_planner .day .column .disabled .caption h3 .icon_cadenas {
  color: inherit;
}
body #planning #week_planner .day .column .disabled.file_attente{
  cursor: pointer;
}
/* Liste d'attente : pas de pastille. La card est pleine (compteur rouge) mais reste
   cliquable : elle reagit au survol comme une card reservable, ce qui la distingue
   d'une card "Complet". */
body #planning #week_planner .day .column .disabled.file_attente:hover {
  transform: scale(1.05);
}
body #planning #week_planner .day .column .disabled.file_attente:hover::after {
  opacity: 1;
}
body #planning #week_planner .next_week .title_header {
  background-color: var(--disabled);
}
body #planning #week_planner .next_week .column .card_activity {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10%;
  padding: 1rem;
  background-color: var(--white);
}
body #planning #week_planner .next_week .column .card_activity p {
  display: block;
  font-size: 0.625rem;
  color: var( --grey);
  text-align: center;
}
body #planning #week_planner .next_week .column .card_activity .btn_nextWeek {
  font-size: 0.625rem;
  display: flex;
  justify-content: center;
  text-decoration: none;
  gap: 0.25rem;
  color: var( --grey);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var( --grey);
  text-align: center;
  transition: gap 200ms ease-in-out;
}
body #planning #week_planner .next_week .column .card_activity .btn_nextWeek svg {
  width: 0.625rem;
  height: 0.75rem;
  margin: auto;
  stroke: var( --grey);
  stroke-width: 1.25;
  stroke-linecap: round;
  fill: none;
}
body #planning #week_planner .next_week .column .card_activity .btn_nextWeek:hover {
  border-color: none;
  font-weight: 600;
  color: var(--white);
  background-color: var( --grey);
  gap: 0.625rem;
}
body #planning #week_planner .next_week .column .card_activity .btn_nextWeek:hover svg {
  stroke: var(--white);
}
body #planning #week_planner .next_week .column .card_activity:hover {
  transform: none;
}
body #planning #week_planner .hidden {
  display: none;
}
/* TRANCHES HORAIRES DU PLANNING (matin / midi / apres-midi / soir)
   Chaque jour range ses cards dans 4 blocs .tranche (toujours presents, meme
   vides) et le planning porte 4 libelles .tranche_label. Le script
   maj_tranches_horaires() (emis par le kernel avec le planning) aligne entre eux
   les jours d'une meme rangee et pose la classe planner_horaires tant que cet
   alignement est actif.
   Par defaut (une seule colonne, navigateur sans subgrid) rien n'est aligne : les
   blocs sont transparents pour la mise en page et les libelles sont masques. */
body #planning #week_planner .day .column .tranche {
  display: contents;
}
/* Hors desktop, chaque jour affiche l'intitule de la tranche au-dessus de ses
   cours (pseudo-element : sans alignement, .tranche n'a pas de boite). Rien pour
   une tranche sans cours visible ce jour-la (classe vide posee par le script). */
body #planning #week_planner .day .column .tranche::before {
  content: attr(data-libelle);
  display: block;
  margin-top: 0.25rem;
  padding: 0 0.125rem 0.125rem;
  border-bottom: 1px solid var(--disabled);
  font-size: 0.75rem;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  text-align: left;
  color: var(--secondary);
}
body #planning #week_planner .day .column .tranche:empty::before,
body #planning #week_planner .day .column .tranche.vide::before {
  content: none;
}
/* Message d'une tranche ou le jour n'a pas de cours (ecrit par le script) : utile
   seulement quand les jours sont alignes, ou une case vide en haut d'une colonne
   laisse croire a un jour sans cours. */
body #planning #week_planner .day .column .tranche .tranche_message {
  display: none;
}
body #planning #week_planner .tranche_label {
  display: none;
}
/* DESKTOP : les 7 jours tiennent sur une rangee et partagent les memes lignes de
   grille (subgrid) : la ligne des en-tetes, puis les lignes de chaque tranche,
   dont le libelle est porte par la colonne de gauche. Le script donne a chaque
   tranche une ligne par heure de debut (--lignes = total) : les cours de meme
   horaire sont alignes d'un jour a l'autre. Sans le script, une ligne par tranche
   et les cours empiles. */
@media screen and (min-width: 1261px) {
  @supports (grid-template-rows: subgrid) {
    body #planning #week_planner.planner_tranches {
      grid-template-columns: 1.75rem repeat(7, minmax(0, 1fr));
      grid-template-rows: repeat(var(--lignes, 5), auto);
      grid-gap: 0;
    }
    body #planning #week_planner.planner_tranches .day {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
      align-items: stretch;
      min-width: 0;
    }
    /* La colonne 1 porte les libelles des tranches : les jours occupent les colonnes 2 a 8. */
    body #planning #week_planner.planner_tranches .day:nth-child(1) { grid-column: 2; }
    body #planning #week_planner.planner_tranches .day:nth-child(2) { grid-column: 3; }
    body #planning #week_planner.planner_tranches .day:nth-child(3) { grid-column: 4; }
    body #planning #week_planner.planner_tranches .day:nth-child(4) { grid-column: 5; }
    body #planning #week_planner.planner_tranches .day:nth-child(5) { grid-column: 6; }
    body #planning #week_planner.planner_tranches .day:nth-child(6) { grid-column: 7; }
    body #planning #week_planner.planner_tranches .day:nth-child(7) { grid-column: 8; }
    /* Plus de gouttiere entre les colonnes (le trait de separation des tranches doit
       etre continu) : l'espacement est reporte sur l'en-tete et sur les tranches. */
    body #planning #week_planner.planner_tranches .day .title_header {
      width: auto;
      margin: 0 0.25rem;
    }
    body #planning #week_planner.planner_tranches .day .column {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: 2 / -1;
      justify-content: normal;
      padding: 0;
      gap: 0;
    }
    body #planning #week_planner.planner_tranches .day .column .tranche {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      min-width: 0;
      padding: 0.75rem 0.25rem;
      border-top: 1px solid var(--disabled);
    }
    /* L'intitule de la tranche est remplace par le libelle de gauche. */
    body #planning #week_planner.planner_tranches .day .column .tranche::before {
      content: none;
    }
    body #planning #week_planner.planner_tranches .day .column .tranche_matin      { grid-row: 1; }
    body #planning #week_planner.planner_tranches .day .column .tranche_midi       { grid-row: 2; }
    body #planning #week_planner.planner_tranches .day .column .tranche_apres_midi { grid-row: 3; }
    body #planning #week_planner.planner_tranches .day .column .tranche_soir       { grid-row: 4; }
    /* Libelle de tranche : pastille verticale a gauche, sur toute la hauteur de sa ligne. */
    body #planning #week_planner.planner_tranches .tranche_label {
      display: flex;
      grid-column: 1;
      padding: 0.75rem 0;
      border-top: 1px solid var(--disabled);
    }
    body #planning #week_planner.planner_tranches .tranche_label.tranche_matin      { grid-row: 2; }
    body #planning #week_planner.planner_tranches .tranche_label.tranche_midi       { grid-row: 3; }
    body #planning #week_planner.planner_tranches .tranche_label.tranche_apres_midi { grid-row: 4; }
    body #planning #week_planner.planner_tranches .tranche_label.tranche_soir       { grid-row: 5; }
    body #planning #week_planner.planner_tranches .tranche_label span {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 0;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      white-space: nowrap;
      border-radius: 0.3125rem;
      background-color: var(--white);
      box-shadow: 0rem 0rem 0.3125rem 0.125rem rgba(0, 0, 0, 0.05);
      font-size: 0.75rem;
      font-weight: 700;
      font-style: italic;
      text-transform: uppercase;
      color: var(--secondary);
    }
    /* Pas de trait au-dessus de la premiere tranche affichee (juste sous les en-tetes). */
    body #planning #week_planner.planner_tranches .day .column .tranche.premiere,
    body #planning #week_planner.planner_tranches .tranche_label.premiere {
      border-top: 0;
    }
    /* Message "aucune activite" et legendes : sous la grille des tranches. */
    body #planning #week_planner.planner_tranches #no_creneau_found {
      grid-row: auto;
    }
    body #planning #week_planner.planner_tranches #premium_legende {
      margin-top: 1rem;
    }
  }
}
/* PLUSIEURS RANGEES (tablette, fenetre reduite) : le script place chaque jour dans
   sa rangee, et les jours d'une meme rangee partagent leurs lignes. L'intitule de
   la tranche reste dans chaque jour, sur la premiere ligne de la tranche : il est
   donc aligne d'un jour a l'autre, comme les cours de meme horaire. */
@media screen and (max-width: 1260px) {
  @supports (grid-template-rows: subgrid) {
    body #planning #week_planner.planner_tranches.planner_horaires {
      row-gap: 0;
    }
    body #planning #week_planner.planner_tranches.planner_horaires .day {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      align-items: stretch;
      min-width: 0;
      margin-bottom: 1rem;
    }
    body #planning #week_planner.planner_tranches.planner_horaires .day .column {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: 2 / -1;
      justify-content: normal;
      gap: 0;
    }
    body #planning #week_planner.planner_tranches.planner_horaires .day .column .tranche {
      row-gap: 0.5rem;
      padding-bottom: 0.5rem;
    }
    body #planning #week_planner.planner_tranches.planner_horaires .day .column .tranche::before {
      grid-row: 1;
      align-self: end;
      margin-top: 0;
    }
    body #planning #week_planner.planner_tranches.planner_horaires #no_creneau_found {
      grid-row: auto;
    }
  }
}
/* ALIGNEMENT ACTIF (classe planner_horaires, desktop comme plusieurs rangees) : la
   tranche reprend les lignes du planning et chaque card se place sur la ligne de
   son heure de debut (grid-row pose par le script). */
@supports (grid-template-rows: subgrid) {
  body #planning #week_planner.planner_tranches.planner_horaires .day .column .tranche {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    min-width: 0;
  }
  /* Tranche sans aucun cours visible dans la rangee : ses lignes et son libelle disparaissent. */
  body #planning #week_planner.planner_tranches.planner_horaires .day .column .tranche.repliee,
  body #planning #week_planner.planner_tranches.planner_horaires .tranche_label.repliee {
    display: none;
  }
  /* Case sans cours : renvoi discret vers le cours suivant du jour. */
  body #planning #week_planner.planner_tranches.planner_horaires .day .column .tranche .tranche_message {
    display: block;
    grid-row: 1 / -1;
    align-self: start;
    padding: 0.5rem 0.25rem;
    font-size: 0.6875rem;
    line-height: 1.35;
    text-align: center;
    color: var(--grey);
  }
  body #planning #week_planner.planner_tranches.planner_horaires .day .column .tranche .tranche_message a {
    display: block;
    font-weight: 500;
    color: var(--grey);
    cursor: pointer;
  }
  body #planning #week_planner.planner_tranches.planner_horaires .day .column .tranche .tranche_message a:hover {
    text-decoration: underline;
  }
  body #planning #week_planner.planner_tranches.planner_horaires .day .column .tranche .tranche_message sup {
    vertical-align: super;
    font-size: 0.75em;
    line-height: 0;
  }
}
body #planning .div_telecharger_planning {
  text-align: right; 
}
body #planning .div_telecharger_planning .btn_dl_planning{
  color: var(--grey);
  background-color: var(--white);
  border: 1px var(--grey) solid;
  border-radius: 0.5rem;
  font-weight: 400;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease-out;
}
body #planning .div_telecharger_planning .btn_dl_planning .icon_planning{
  height: 2rem;
  width: 2rem;
}
body #planning .div_telecharger_planning .btn_dl_planning:hover{
  color: var(--white);
  background-color: var(--grey);
  border-color: var(--grey);
}

.popup {
  z-index: 10;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  width: 600px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  border-radius: 1rem;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0);
  background-color: var(--white);
  transition: 
    box-shadow 300ms  ease-in-out,
    opacity 250ms  ease-in-out,
    transform 300ms  ease-in-out;
}
.overlay { 
  z-index: 9;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(56, 74, 105, 0.5);
  backdrop-filter: blur(3px) grayscale(1);
  transition: opacity 300ms ease-in-out;
}
#mask_popup_reserver_v2{
  display: flex;
  opacity: 1;
}
#popup_reserver_v2.hidden, #mask_popup_reserver_v2.hidden{
  display: none;
}
#popup_reserver_v2.visually_hidden, #mask_popup_reserver_v2.visually_hidden {
  opacity: 0;
}
#popup_reserver_v2 #inscription .buttons_form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.buttons_resa {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.valider_resa {
  width: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* max-width: 640px; */
}
#inscription.connexion_espace_perso .valider_resa {
  max-width: 640px;
}
.valider_resa > a, .valider_resa input[type='submit'], #inscription form > input[type='submit'], #renvoi_form > button[type='submit'], #popup_reserver_v2 input[type='submit'], input.btn_submit {
  display: flex;
  justify-content: center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  padding: 0.75rem;
  width: 100%;
  background-color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 0.25rem;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  color: var(--white);
  /* margin-top: 2rem; */
  transition: all 250ms ease-in-out;
}
.valider_resa > a:hover, .valider_resa input[type='submit']:hover, #inscription form > input[type='submit']:hover, #renvoi_form > button[type='submit']:hover, #popup_reserver_v2 input[type='submit']:hover, input.btn_submit:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
} 
.valider_resa > a.disabled, .valider_resa input[type='submit']:disabled, #inscription form > input[type='submit']:disabled, #popup_reserver_v2 input[type='submit']:disabled, input.btn_submit:disabled {
  background-color: var(--disabled);
  border-color: var(--disabled);
  color: var(--white);
  cursor: not-allowed;
  pointer-events: none;
}
.resa_buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.autre_resa a {
  display: flex;
  justify-content: center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  padding: 0.85rem;
  /* margin-top: 0.5rem; */
  width: 100%;
  background-color: var(--white);
  border: 2px solid var(--disabled);
  border-radius: 0.25rem;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
  color: var(--grey);
  /* margin-top: 2rem; */
  transition: all 250ms ease-in-out;
}
.autre_resa #btn_valider_resa_autrui, .autre_resa #btn_valider_resa_moi {
  padding: unset;
  border: none;
  font-size: 1rem;
}
.autre_resa a:hover {
  border-color: var(--secondary);
  color: var(--secondary);
}
#inscription #number_code {
  margin: 2rem 0;
  display: flex;
    justify-content: center;
    gap: 1rem;
}
#inscription #number_code .input_number{
  width: 2.75rem;
  height: 3.5rem;
  text-align: center;
  font-size: 1.5rem;
  padding: unset;
}
#inscription #number_code input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
#inscription #number_code input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
#inscription #formResidence .champs_split {
  display: flex;
  gap: 1rem;
}
#inscription #formResidence .champs_split div {
  flex: 2 0;
}
#inscription #formResidence .champs_split .cpo {
  flex: 1 0;
}
/* POPUP RESERVER */
#popup_reserver_v2 {
  display: block;
  opacity: 1;
  border-radius: 1rem;
  overflow: hidden;
  width: 800px;
  max-width: calc(100% - 64px);
  max-height: calc(100% - 64px);
}
#popup_reserver_v2 .container {
  background-color: var(--white);
  font-size: 1rem;
  border-radius: 1rem;
  overflow: hidden;
}
#popup_reserver_v2 .header_popup {
  display: flex;
  width: 100%; 
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
  flex-wrap: wrap;
}
#popup_reserver_v2 .header_popup .figure {
  position: relative;
  width: 100%;
  min-height: 216px;
  flex: 1 1 28%;
}
#popup_reserver_v2 .header_popup .figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#popup_reserver_v2 .header_popup .figure .badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: var(--white);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
}
#popup_reserver_v2 .header_popup .last_div_header {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  flex: 2 2 72%;
  gap: 0.5rem;
  align-self: stretch;
  background-color: var(--white);
}
#popup_reserver_v2 .header_popup .last_div_header .title_seance {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#popup_reserver_v2 .header_popup .last_div_header .title_seance .upper_title {
  text-transform: uppercase;
  color: var(--primary);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1
}
#popup_reserver_v2 .header_popup .last_div_header .title {
  text-transform: uppercase;
  color: var(--primary);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#popup_reserver_v2 .header_popup .last_div_header .caption {
  color: var(--grey);
  font-size: 1rem;
  display: -webkit-box;
  line-clamp: 5;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  font-size: 1rem;
  /* line-height: normal; */
}
#popup_reserver_v2 .header_popup .last_div_header .caption h3{
  font-weight: 500;
  line-height: inherit;
  font-size: inherit;
  margin-bottom: 0.5rem;
}
#popup_reserver_v2 .header_popup .last_div_header .caption p{
  line-height: 1.4;
  font-size: inherit;
}
#popup_reserver_v2 .header_popup .last_div_header .caption strong {
  display: none;
}
#popup_reserver_v2 .header_popup .last_div_header .activite_link {
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 500;
}
#popup_reserver_v2 .header_popup .last_div_header .activite_link:hover {
  color: var(--secondary);
}
#popup_reserver_v2 .infos_creneaux {
  display: flex;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
  flex-wrap: wrap;
  overflow: hidden;
}
#popup_reserver_v2 .infos_creneaux > .div_infos:nth-child(-n+3) {
  border-right: 2px var(--white) solid;
}
#popup_reserver_v2 .infos_creneaux .div_infos {
  flex: 1 1 0;
  text-align: center;
  padding: 1rem;
  color: var(--secondary);
  background-color: var(--ligthGrey);
  line-height: inherit;
  font-size: inherit;
}
#popup_reserver_v2 .infos_creneaux .div_infos h4 {
  /* color: var(--secondary); */
  font-size: 1.125rem;
  font-weight: 400;
  line-height: inherit;
}
#popup_reserver_v2 .infos_creneaux .div_infos p {
  color: var(--grey);
  line-height: inherit;
  font-size: inherit;
}
#popup_reserver_v2 .infos_creneaux .div_infos .premium {
  display: inline-flex;
  align-items: center;
}
#popup_reserver_v2 .infos_creneaux .div_infos .premium .icon_premium {
  height: 1.25rem;
  width: 1.25rem;
}
#inscription_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
#inscription, #formulaire_invite {
  display: flex;
  flex-direction: column;
  padding: 3rem 4rem;
  max-height: calc(100vh - 360px);
  overflow: auto;
  gap: 1.5rem;
  margin-top: 3px;
  margin-bottom: unset;
  /* text-align: center; */
}
#formulaire_invite .connexion_input {
  text-align: left;
}
#inscription #logo-site img {
  max-height: 5vh;
}
#inscription.inscription_espace_perso, #inscription.connexion_espace_perso {
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 1600px;
  width: -webkit-fill-available;
  max-height: unset;
  padding: 0;
  margin: 1vh 5vw;
  border-radius: 1rem;
  overflow: hidden;
  gap: unset;
  background-color: var(--white);
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.06);
}
#inscription .mdp_perdu {
  max-width: 740px;
}
#inscription #div_formulaire {
  flex: 2 0 540px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  
  align-items: center;
  gap: 1rem;
  padding: 3rem;
}
#inscription #div_formulaire .back_home {
  display: block;
  align-self: flex-start;
  width: fit-content;
  font-size: 0.875rem;
  padding: 0.5rem 1.875rem 0.5rem 0.875rem;
  border-radius: 10rem;
  text-decoration: none;
  font-weight: 400;
  border: 1px solid #1d327b;
  color: #1d327b;
}
#inscription #div_formulaire .back_home .icon_chevron {
  height: 1.5rem;
  width: 1.5rem;
  transform: rotate(90deg);
  vertical-align: middle;
  margin-right: 0.5rem;
}
#inscription #div_visuel {
  flex: 1 0 340px;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  
  padding: 3rem 1.5rem;
  color: var(--white);
}
#inscription.inscription_espace_perso #div_visuel {
  background: no-repeat url("https://moncentreaquatique.com/images/espace-perso/inscription.jpg") center;
  background-size: cover;
}
#inscription.connexion_espace_perso #div_visuel {
  background: no-repeat url("https://moncentreaquatique.com/images/espace-perso/connexion.jpg") center;
  background-size: cover;
}
#inscription #div_visuel h3 {
  color: var(--white);
}
#inscription #div_visuel .button {
  display: flex;
  justify-content: center;
  text-transform: none;
  padding: 0.75rem 1.5rem;
  margin: 2rem auto 0 auto;
  border-radius: 0.25rem;
  width: fit-content;
  font-size: 1.2rem;
  font-weight: 600;
  background-color: var(--white);
  color: var(--secondary);
  border-color: var(--white);
  text-align: center ;
}
#inscription #div_visuel .back_home {
  display: block;
  width: fit-content;
  font-size: 0.875rem;
  padding: 0.5rem 1.875rem 0.5rem 0.875rem;
  border-radius: 10rem;
  text-decoration: none;
  font-weight: 400;
  color: var(--white);
  background-color: none;
  border: 1px solid var(--white);
}
#inscription #div_visuel .back_home:hover {
  color: var(--secondary);
  background-color: var(--white);
}
#inscription #div_visuel .back_home .icon_chevron {
  height: 1.5rem;
  width: 1.5rem;
  transform: rotate(90deg);
  vertical-align: middle;
  margin-right: 0.5rem;
}

#inscription #div_formulaire .connexion_form {
  gap: 0.875rem;
  max-width: 640px;
}
#inscription #div_formulaire .connexion_form p {
  width: fit-content;
}
#inscription #div_formulaire #renvoi_details {
  width: 100%;
  max-width: 640px;
}
#inscription #div_formulaire #renvoi_details summary {
  font-size:13px;
  color:#1d327b;
  list-style:none;
  cursor:pointer;
  text-decoration:underline;
  text-align: center;
}
#inscription #div_formulaire #renvoi_details summary::-webkit-details-marker{
  display:none;
}
#inscription #div_formulaire #renvoi_form {
  margin-top:15px;
}
#inscription #div_formulaire .champs_split {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}
#inscription #div_formulaire .champs_split {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}
#inscription #div_formulaire .champs_split > div {
  flex: 2 0 250px;
  text-align: left;
}
#inscription #div_formulaire .champs_split .cpo {
  flex: 1 0 100px;
}
#inscription #div_formulaire .icon_open_new_tab {
  width: 0.875rem;
  height: 0.875rem;
}
#inscription .choix_abonnements {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#inscription .choix_abonnements  article {
  display: flex;
  justify-content: center;
  overflow: hidden;
  /* Ancre le radio masque (position absolute) dans la zone qui defile (#inscription) : sinon son
     focus au clic fait defiler toute la popup, en-tete sorti et grand vide blanc en bas. */
  position: relative;
}
#inscription .choix_abonnements .card_abo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  height: 80px;
  padding-right: 16px;
  border-radius: 8px;
  outline: 2px solid var(--disabled);
  outline-offset: -2px;
  background: var(--white);
  cursor: pointer;
  overflow: hidden;
  transition: all 250ms ease-out;
}
#inscription .choix_abonnements .card_abo:hover {
  outline-color: var(--secondary);
}
#inscription .choix_abonnements .card_abo:has(.cout_abo) {
  padding-right: 52px;
}
#inscription .choix_abonnements input {
  position: absolute;   
  opacity: 0;
  z-index: -1;
}
#inscription .choix_abonnements input:checked ~ .card_abo {
  outline-color: var(--primary);
  position: relative;
}
#inscription .choix_abonnements input:checked ~ .card_abo:has(.cout_abo) {
  padding-right: 52px;
}
#inscription .choix_abonnements input:checked ~ .card_abo .check_text_abo {
  color: var(--secondary);
  font-weight: 500;
  margin: 0;
}
#inscription .choix_abonnements input:checked ~ .card_abo .anim_checked {
  margin-left: 0;
}
#inscription .choix_abonnements input:checked ~ .card_abo .cout_abo .icon_chevron {
  transform: rotate(0);
}
#inscription .choix_abonnements input:disabled ~ .card_abo {
  background: var(--ligthGrey);
  color: var(--grey);
  outline-color: var(--ligthGrey);
  pointer-events: none;
}
#inscription .choix_abonnements input:disabled ~ .card_abo .text_abo{
  box-shadow: none;
}
#inscription .choix_abonnements input:disabled ~ .card_abo .icon_coin {
  filter: saturate(0);
}
#inscription #div_je_prefere_payer {
  flex-direction: column;
  gap: 1rem;
}
#inscription .choix_abonnements .card_abo .check_text_abo {
    width: 100%;
    display: flex;
}
#inscription .choix_abonnements .card_abo .anim_checked {
  flex: 1 1 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: -42px;
  background: var(--primary);
  max-width: 40px;
  height: 80px;
  border-radius: 8px 0 0 8px;
  box-shadow: 1px 0 0 0 var(--primary);
  transition: all 350ms ease-in-out;
}
#inscription .choix_abonnements .anim_checked .icon_check {
  width: 1em;
  height: 1em;
  color: var(--white);
}
#inscription .choix_abonnements .card_abo .text_abo {
  flex: 1 2 0;
  text-align: left;
  padding: 16px 24px;
  width: 100px;
  border-radius: 8px 0 0 8px;
  box-shadow: -16px 0px 0 8px var(--primary);
  overflow: hidden;
}
#inscription .choix_abonnements .card_abo .cout_abo {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  gap: 4px;
  padding: 0 1rem;
  height: 80px;
}
#inscription .choix_abonnements .card_abo .cout_abo p {
  font-size: 1rem;
  font-weight: 600;
}
#inscription .choix_abonnements .card_abo .text_abo h4 {
  font-size: 1rem;
  line-height: normal;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#inscription .choix_abonnements .card_abo .text_abo p {
  font-size: 0.875rem;
  font-weight: 300;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#inscription .choix_abonnements .card_abo .cout_abo .icon_coin {
  width: 1.5em;
  height: 1.5em;
}
#inscription .choix_abonnements .card_abo .cout_abo .icon_chevron {
  width: 2.5em;
  height: 2.5em;
  transform: rotate(-90deg);
  transition: all 250ms ease-in-out;
}
/* #inscription #btn_submit {
  margin-top: 1rem;
} */
body #container .message_erreur {
  /*display: flex;*/
  max-width: 640px;
  align-items: center;
  gap: 2rem;
  text-align: left;
  font-weight: 600;
  padding: 1rem;
  border-radius: 0.5rem;
}
footer .message_erreur {
  max-width: 640px;
  /*display: flex;*/
  align-items: center;
  gap: 2rem;
  text-align: left;
  font-weight: 600;
  padding: 1rem;
  border-radius: 0.5rem;
}
body #container #indications_mdp {
  flex-direction: column;
  gap: 0.35rem;
  /* font-size: 0.875rem; */
}
body #container #indications_mdp p {
  font-weight: 500;
  font-size: 0.8125rem;
}
body #container #indications_mdp li {
  list-style: inside;
}
body #container .blue {
  color: var(--secondary);
  background-color: var(--ligthGrey) ;
}
body #container .red {
  color: var(--red);
  background-color: var(--lightRed) ;
}
footer .red {
  color: var(--red);
  background-color: var(--lightRed) ;
}
body #container .orange {
  color: var(--orange);
  background-color: var(--lightest-Orange) ;
}
body #container .green {
  color: var(--green);
  background-color: var(--lightGreen) ;
}
footer .green {
  color: var(--green);
  background-color: var(--lightGreen) ;
}
.message_erreur svg {
  height: 1rem;
  width: 1rem;
}
#email_sent .icon_check {
  height: 1.5rem;
  width: 1.5rem;
}
#inscription.connexion_espace_perso .div_inscription_popup, #inscription.connexion_espace_perso .div_connexion_popup, #inscription.inscription_espace_perso .div_inscription_popup, #inscription.inscription_espace_perso .div_connexion_popup {
  display: none;
}
#inscription .div_inscription_popup , #inscription .div_connexion_popup {
  text-align: center;
}
#inscription .div_inscription_popup a, #inscription .div_connexion_popup a, #formulaire_invite .div_inscription_popup a {
  text-decoration: none;
  font-weight: 500;
  color: var(--secondary);
}
#inscription .connexion_form > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#inscription .connexion_form .checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#inscription .connexion_form .checkboxes .container_check {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  font-size: 0.875rem;
  margin-left: 0.5rem;
  text-align: left;
  position: unset;
  opacity: unset;
  margin: unset;
  padding: unset;
  gap: 0.25rem;
}
#inscription .connexion_form .checkboxes .container_check a {
  vertical-align: middle;
  padding: 0 0.25rem;
  color: var(--primary);
}
#inscription .connexion_form .checkboxes .container_check a:hover {
  color: var(--secondary);
}
#inscription .connexion_form .checkboxes .container_check input[type='checkbox'] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
  padding: unset;
  position: unset;
  opacity: unset;
  border-radius: 0.25rem;
}
#inscription .connexion_form .checkboxes .container_check:hover input[type='checkbox'] {
  border: 1px solid var(--secondary);
}
#inscription .connexion_form .checkboxes .container_check input[type='checkbox']::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 0.125rem;
  background-color: var(--primary);
  transform: scale(0);
  transition: 120ms transform ease-in-out;
}
#inscription .connexion_form .checkboxes .container_check input[type='checkbox']:checked::before {
  transform: scale(1);
}
#inscription .connexion_form .label.password {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#inscription .connexion_form .password_input {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
#inscription .connexion_form .password_input .preview_icon {
  position: absolute;
  right: 4px;
  display: flex;
  padding: 0.75rem;
  cursor: pointer;
  color: var(--grey);
  width: fit-content;
}
#inscription .connexion_form .password_input .preview_icon svg{
  height: 1rem;
  width: 1rem;
}
#inscription .connexion_form .password_input .preview_icon.icon_oeil {
  background: url("/css/images/icons/icons.svg#icon_oeil") center;
}
#inscription .connexion_form .password_input .preview_icon.icon_oeil_barre {
  background: url("/css/images/icons/icons.svg#icon_oeil_barre") center;
}
#inscription .connexion_form .mdp_oublie {
  text-decoration: none;
  color: var(--secondary);
  text-align: right;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--grey);
  width: fit-content;
  cursor: pointer;
}
#inscription .connexion_form .mdp_oublie:hover, #inscription .div_inscription_popup a:hover, #inscription .div_connexion_popup a:hover, #formulaire_invite .div_inscription_popup a:hover {
  text-decoration: underline;
}
#inscription .connexion_form #capslock_alert {
  display: none;
  text-align: left;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--secondary);
}
#inscription form, #popup_reserver_v2 form {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* gap: 0.5rem; */
  margin: unset;
}
#inscription form, #popup_reserver_v2 .connexion_form  {
  gap: 1rem;
}
#inscription h3, #popup_reserver_v2 h3 {
  font-size: 1.5rem;
  color: var(--secondary);
  text-align: center;
  font-weight: 600;
  /* margin-bottom: 0.5rem; */
}
/* #inscription form h3 {
  margin-top: 1.5rem;
} */
#inscription .container_checkbox {
  text-align: left;
  line-height: 120%;
  color: #ff0000;
}
#inscription .label, body label.label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary);
  padding-left: 0.5rem;
}
.inputs, body input.inputs, #inscription input:not(input[type='submit']), #inscription select, #popup_reserver_v2 input:not(input[type='submit']) {
  padding: 0.8rem;
  text-align: left;
  appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
  width: 100%;
  height: fit-content;
  margin: unset;
  border: 2px solid var(--disabled);
  border-radius: 0.5rem;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  font-size: 0.875rem;
  color: var(--grey);
  background-color: var(--white);
}
#inscription .inputs:focus, #inscription input:not(input[type='submit']):focus, #inscription select:focus, #popup_reserver_v2 input:not(input[type='submit']):focus {
  border: 1px solid var(--secondary);
  color: var(--secondary);
  padding: calc(0.8rem + 1px);
}
#inscription .inputs:focus::placeholder, #inscription input:not(input[type='submit']):focus::placeholder, #inscription select:focus::placeholder, #popup_reserver_v2 input:not(input[type='submit']):focus::placeholder {
  color: var(--secondary);
}
#inscription .input_date:before {
  content: none;
}
#inscription .choix_tarif_personne {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#inscription .choix_tarif_personne .mention {
  font-size: 0.8rem;
  color: var( --grey);
  font-weight: 300;
  text-align: left;
}
#inscription .choix_tarif_personne #liste_tarifs {
  background: var(--white) url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23354d68'/></g></svg>") no-repeat;
  background-position: right 1rem top 55%;
}
#inscription .infos_client {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* margin-bottom: 1.5rem; */
  text-align: left;
}
#inscription .residence {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
#inscription .residence div{
  width: 15%;
}
#mot_de_passe_oublie {
  flex-direction: column;
  gap: 1.5rem;
  padding: 3rem 4rem;
  text-align: center;
}
.btn_close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
  z-index: 11;
  height: 2.5rem;
  width: 2.5rem;
  background-color: var(--white);
  border-radius: 100%;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.15);
}
#btn_close_mobile {
  display: none;
}
/* les traits pour la croix du btn close */
  .btn_close::before,
  .btn_close::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: var(--secondary);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .btn_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .btn_close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

.infos_creneaux {
  display: flex;
  width: 100%;
}

/* PAGE RESERVATIONS / FINALISATION RESA */
body #reservations {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  color: var(--secondary);
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
  max-width: 1600px;
  padding: 0 4rem;
  margin: 0 auto;
}
body #reservations h3 {
  font-weight: 800;
  font-size: 1rem;
  line-height: normal;
}
body #reservations p {
  font-weight: 400;
  font-size: 1rem;
  line-height: normal;
}
body #reservations .icons {
  height: 1rem;
  width: 1rem;
}
body #reservations .icons.icon_trash, body #reservations .icons.icon_person-plus{
  height: 1.5rem;
  width: 1.5rem;
}
body #reservations .infos_resas  {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2rem;
  gap: 1rem;
  background-color: var(--ligthGrey);
  border-radius: 1.5rem;
}
body #reservations .infos_resas .card_resa {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  gap: 1rem;
}
body #reservations .infos_resas .card_resa_produit .recap_tarif {
  flex-direction: row;
}
body #reservations .infos_resas .card_resa_produit .recap_tarif span {
  cursor: pointer;
}
body #reservations .infos_resas .card_resa_produit .recap_tarif i {
  vertical-align: middle;
}
body #reservations .infos_resas .card_resa div {
  flex: 1 1 0;
  display: flex;
  color: var(--secondary);
  font-weight: 900;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}
body #reservations .infos_resas .card_resa .edit_resa {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}
body #reservations .infos_resas .card_resa .edit_resa a {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: fit-content;
  width: fit-content;
  font-size: 1rem;
  font-weight: 400;
  gap: 0.2rem;
  border: 2px solid;
  text-decoration: none;
  background-color: unset;
  padding: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 250ms ease-in-out;
}
body #reservations .infos_resas .card_resa .edit_resa a.btn_supprimer {
  color: var(--red);
  border-color: var(--red);
}
body #reservations .infos_resas .card_resa .edit_resa a.btn_supprimer:hover {
  background-color: var(--red);
  color: var(--white);
}
body #reservations .infos_resas .card_resa .edit_resa a.btn_ajouter_personne.disabled {
  color: var(--white);
  background-color: var(--disabled);
  border-color: var(--disabled);
  pointer-events: none;
}
body #reservations .infos_resas .card_resa .edit_resa a.btn_ajouter_personne {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}
body #reservations .infos_resas .card_resa .edit_resa a.btn_ajouter_personne.disabled:hover {
  background-color: var(--disabled);
  border-color: var(--disabled);
}
body #reservations .infos_resas .card_resa .edit_resa a.btn_ajouter_personne:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
body #reservations .infos_resas .card_resa .recap_info p{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
body #reservations .infos_resas .card_resa .recap_info .icons{
  height: 0.815rem;
  width: 0.815rem;
}
body #reservations .infos_resas .ajouter_resa {
  display: flex;
  justify-content: center;
}
body #reservations .infos_resas .ajouter_resa a {
  color: var(--secondary);
  border-radius: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease-out;
}
body #reservations .infos_resas .ajouter_resa a:hover{
  color: var(--white);
  background-color: var(--secondary);
}
body #reservations .total_resa {
  display: flex;
  justify-content: space-between;
  margin-right: 1rem;
}
body #reservations .total_resa .code_promo_resa .input_code_promo {
  display: flex;
  gap: 20px;
}
body #reservations .total_resa .code_promo_resa .input_code_promo input {
  margin-bottom: 0;
}
body #reservations .total_resa .code_promo_resa #confirmation_code_promo {
  text-align: left;
}
body #reservations .total_resa p {
  font-size: 1.125rem;
}
body #reservations .total_resa strong {
  font-weight: 600;
}
/* panier de reservation en mobile : le total passait sous le bloc code promo (meme ligne) */
@media screen and (max-width: 600px) {
  body #reservations .total_resa {
    flex-direction: column;
    gap: 12px;
    margin-right: 0;
  }
  body #reservations .total_resa .code_promo_resa {
    width: 100%;
  }
  body #reservations .total_resa .code_promo_resa .input_code_promo {
    gap: 10px;
  }
  body #reservations .total_resa .code_promo_resa .input_code_promo input[type=text] {
    flex: 1 1 auto;
    min-width: 0;
  }
  body #reservations .total_resa #detail_total_resa {
    width: 100%;
    text-align: right;
  }
}
body #reservations .fin_resa {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin-top: 1rem;
}
body #reservations .fin_resa .paiement_securiser {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-weight: 400;
  color: var(--secondary);
}
body #reservations .fin_resa .paiement_securiser .icon_shield {
  width: 1.75rem;
  height: 1.75rem;
}
body #reservations .fin_resa p {
  font-size: small;
  font-weight: 300;
  color: var(--grey);
}
body #reservations .fin_resa p > a {
  color: inherit;
}
body #regles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3rem 1.5rem;
  margin-top: 4rem;
  background-color: var(--ligthGrey);
}
body #regles .rules-container {
  width: 100%;
  max-width: 1640px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/7), 1fr));
  gap: 1rem;
}
body #regles .rules-container .rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  text-align: center;
}
body #regles .rules-container .rule h3 {
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 700;
  margin: 1rem 0 0.5rem 0;
  color: var(--secondary);
}
body #regles .rules-container .rule p {
  font-size: 0.85rem;
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1.25;
  font-weight: 300;
}
body #regles .rules-container .rule .rule-picto{
  width: 4rem;
  height: 4rem;
  background-color: var(--primary);
}

/* LOADER */
.loader {
  border: 4px solid var(--primary);
  border-left-color: transparent;
  border-radius: 50%;
}

.loader {
  border: 4px solid var(--primary);
  border-left-color: transparent;
  width: 3rem;
  height: 3rem;
}

.loader {
  border: 4px solid var(--primary);
  border-left-color: transparent;
  width: 3rem;
  height: 3rem;
  animation: spin89345 1s linear infinite;
}

@keyframes spin89345 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* multiselect */

#multiselect {
  border: 1px solid #767676;
  border-radius: 3px;
  display: inline-flex;
  flex-direction: column;
  padding: 3px 6px;
}

#multiselect summary::marker {
  display: none;
  font-size: 0;
}

#multiselect summary::-webkit-details-marker {
  display: none;
  font-size: 0;
}

#multiselect summary::after {
  content: "\25BC" / "";
  display: inline-block;
  font-size: 0.6rem;
  height: 1rem;
  line-height: 1rem;
  margin-left: 0.5rem;
  position: relative;
  transition: transform 0.25s;
}

#multiselect[open] summary {
  margin-bottom: 1rem;
}

#multiselect[open] summary::after {
  top: -0.15rem;
  transform: rotate(180deg);
}

#multiselect form {
  display: flex;
  margin: inherit;
}

#fieldset-multiselect {
  border: 0;
  padding: 0;
}

#fieldset-multiselect legend {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#fieldset-multiselect ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#fieldset-multiselect ul li {
  border-radius: 3px;
  margin: 0;
  padding: 4px 2px;
}

 #fieldset-multiselect ul li:hover {
  background: #eee;
}

#fieldset-multiselect ul li label {
  display: inline-block;
  width: 8rem;
}

/* fin multiselect */

/* TABLETTE */
@media screen and (max-width: 1260px) {
  body #inscription.connexion_espace_perso {
    flex-wrap: wrap-reverse;
  }
  body #planning {
    padding: 1rem;
  }
  body #planning .choix_periode .nom_semaine {
    justify-content: center;
  }
  body #planning #week_planner {
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    padding: 1rem;
  }
  body #planning #week_planner .day .title_header{
    justify-content: space-between;
    align-items: center;
  }
  body #planning #week_planner .day .title_header .chevron_header {
    background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='20' height='20' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23ffffff'/></g></svg>") no-repeat;
    background-position: center;
    width: 1.5rem;
    height: 1.5rem;
    transition: all 300ms ease-in-out;
  }
  body #planning #week_planner .day .title_header .chevron_header.up {
    transform: rotate(-90deg);
  }
  body #reservations {
    padding: 0 1rem;
  }
}

@media screen and (max-width: 1024px) {
  body #inscription .div_inscription_popup, #inscription .div_connexion_popup {
    display: block;
  }
}

/* MOBILE */
@media screen and (max-width: 767px), screen and (max-height: 567px) {
  body #inscription .div_inscription_popup, #inscription .div_connexion_popup {
    display: block;
  }
  body #planning #no_creneau_found {
    grid-row: 1;
  }
  body #planning .choix_periode .filtres_activites div:nth-child(4) {
    flex: 1 0 160px;
  }
  /* POPUP */
  #btn_close_mobile {
    position: fixed;
    top: 5rem;
  }
  #popup_reserver_v2.visually_hidden {
    transform: translateY(60%);
  }
  #popup_reserver_v2 {
    top: unset;
    max-width: unset;
    transform: translate(0, 0);
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 1rem 1rem 0 0;
    overflow-y: scroll;
  }
  #popup_reserver_v2 #inscription {
    padding: 3rem 1.5rem;
    max-height: fit-content;
  }
  #inscription.inscription_espace_perso, #inscription.connexion_espace_perso{
    margin: 5vh 0;
  }
  #inscription.inscription_espace_perso #div_visuel, #inscription.connexion_espace_perso #div_visuel, #inscription.inscription_espace_perso #div_formulaire,  #inscription.connexion_espace_perso #div_formulaire {
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: 2rem;
    padding: 2rem 1rem;
  }
  #popup_reserver_v2 .container {
    border-radius: 1rem 1rem 0 0;
  }
  #popup_reserver_v2 .header_popup .figure {
    max-height: 216px;
    height: calc(12vw + 16vh);
    min-width: 216px;
  }
  #popup_reserver_v2 .infos_creneaux .div_infos {
    flex: 1 1 50%;
  }
  #popup_reserver_v2 .infos_creneaux .div_infos:nth-child(-n+3) {
    border-right: none;
  }
  #popup_reserver_v2 .infos_creneaux .div_infos:nth-child(odd) {
    border-right: 2px var(--white) solid;
  }
  #popup_reserver_v2 .infos_creneaux .div_infos:nth-child(-n+2) {
    border-bottom: 2px var(--white) solid;
  }
  body #reservations .infos_resas .card_resa {
    flex-direction: column;
  }
  body #reservations .infos_resas .card_resa div:nth-child(n+2):nth-child(-n+4) {
    flex: 1 1 33%;
  }
  body #reservations .infos_resas .card_resa div:first-child:last-child {
    flex: 2 0 33%;
  }
}
/* ============================================================================ */
/* "Se souvenir de moi" (formulaire de connexion de la popup de reservation).    */
/* Meme design toggle que sur /espace-perso/connexion/ (cf. .ep-toggle dans      */
/* espace-perso.css), duplique ici car espace-perso.css n'est charge que sur les */
/* URL "espace-perso" (voir production.php).                                     */
/* ============================================================================ */
#inscription .connexion_form .connexion_remember_me {
  width: 100%;
}
#inscription .connexion_form .ep-toggle {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;
}
#inscription .connexion_form .ep-toggle input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  min-width: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
}
#inscription .connexion_form .ep-toggle__switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex: 0 0 40px;
  background-color: #d4dae3;
  border-radius: 999px;
  transition: background-color 200ms ease;
}
#inscription .connexion_form .ep-toggle__switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 200ms ease;
}
#inscription .connexion_form .ep-toggle input[type='checkbox']:checked + .ep-toggle__switch {
  background-color: var(--primary);
}
#inscription .connexion_form .ep-toggle input[type='checkbox']:checked + .ep-toggle__switch::after {
  transform: translateX(18px);
}
#inscription .connexion_form .ep-toggle__label {
  font-size: 0.875rem;
  color: var(--secondary);
  text-align: left;
}