/* Reset some basic elements */
html, body, div, span, applet, object, iframe,
h1, h2, h3, p, a, img, ol, ul, li, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Set default font and background */
body {
    font-family: 'Dosis', sans-serif;                                      
    line-height: 1.6;
    background: #f4f4f4;
}

/* Header and Navigation Styles */
/* Styles généraux du header et de la navigation */
header {
  background: #fdf3f3;
  color: #fff;
  padding: 10px 0;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.navbar .logo img {
  height: 50px; /* Ajustement pour un meilleur rendu sur les appareils mobiles */
  width: auto;
}

.navbar nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  transition: transform 0.3s ease; /* Animation pour l'affichage du menu */
}

.navbar nav ul li {
  margin-left: 20px;
}

.navbar nav ul li a {
  color: #dd4024;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background 0.3s ease;
  text-decoration: none;
}

.navbar nav ul li a:hover, .navbar nav ul li a.router-link-active {
  background: #e8491d;
  color: white;
}

.login-button {
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.login-button:hover {
  background: #f96332;
}

/* Styles pour les petits écrans */
@media (max-width: 768px) {
  .navbar nav ul {
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: absolute;
    left: 0;
    background: #fdf3f3;
  }

  .navbar nav ul li {
    margin: 10px 0;
  }
  .menu-hamburger {
    color:#dd4024;
    position: absolute;
    left: 0; /* Positionne le menu hamburger à l'extrême gauche */
    top: 4%; /* Centre verticalement le bouton par rapport à .navbar */
    transform: translateY(-50%); /* Ajuste précisément le centrage vertical */
    display: block;
    cursor: pointer;
    font-size: 30px; /* Ajustez la taille selon votre design */
    padding: 10px; /* Ajoutez du padding si nécessaire pour faciliter le clic/touch */
}

  .isMenuVisible .navbar nav ul {
    display: flex; /* Affiche le menu lorsqu'il est visible */
  }
}




/* Hero Section Styles */
.hero {
    background: url('../../images/1.png') no-repeat center 80%/cover;
    color: #fff;
    padding: 50px 20px;
    text-align: center;
}

.hero2 {
    background: url('../../images/2.png') no-repeat center 40%/cover;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}

.hero3 {
    background: url('../../images/5.png') no-repeat center 50%/cover;
    color: #fff;
    padding: 10% 20px;
    text-align: center;
}

.hero h1 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

/* Sessions Section Styles */
.upcoming-sessions {
    padding: 20px;
    text-align: center;
}

.upcoming-sessions h2 {
    font-family: 'Gagalin', sans-serif;
    font-size: 2rem;
    color: #dd4024;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
    margin-left: 5%;
}

.grayed-out {
  filter: grayscale(100%);
}

.activity-list li:hover {
  filter: none;
}


.session-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.session-card {
    position: relative;
    background: #fdf3f3;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.session-card-header {
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #fdf3f3;
    padding: 10px;
    border-radius: 10px;
}

.session-card-header h3 {
    margin: 0; 
    font-size: 1rem;
    color: #dd4024; 
    background: none; 
}

.session-card img {
    width: 100%;
    display: block; 
}

.session-card p {
    position: relative; 
    padding: 10px;
    background: #fdf3f3; 
    font-weight: bolder;
    color: #333; 
    margin-top: -10px; 
    font-size: 1.2rem;
}


.session-text-bold {
    position: absolute;
    bottom: 60px;
    left: 10PX;
    font-size: x-large;
    font-weight: bolder;
    color: #ffffff;
    padding: 5px;
    border-radius: 5px;
}

.more-sessions-button {
    display: inline-block;
    padding: 10px 20px;
    background: #e8491d;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    margin-top: 20px;
    transition: background 0.3s ease;
}

.more-sessions-button:hover {
    background: #f96332;
}

/* Footer Styles */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

/* Responsive Styles */
@media only screen and (max-width: 600px) {
    .navbar {
        flex-direction: column;
    }

    .navbar nav ul {
       z-index: 999;
        flex-direction: column;
        margin-top: 10px;
    }

    .navbar nav ul li {
        margin: 10px 0;
    }

    .hero h1 {
        font-size: 2em;
    }
}



/* Styles généraux de la section */
.descriptions {
    position: relative; /* Position relative pour les pseudo-éléments */
    background-color: #ea8d7c; /* Couleur de fond pour les sections */
    margin-top: 100px;
    margin-bottom: 100px;
    display: grid; /* Utilisation de grid pour le layout */
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes de largeur égale */
    grid-gap: 20px; /* Espace entre les grilles */
    padding: 50px; /* Padding pour le contenu interne */
}

/* Ajout des pseudo-éléments pour l'inclinaison en haut et en bas */
.descriptions::before,
.descriptions::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px; /* Hauteur de l'effet d'inclinaison */
    background: #ea8d7c; /* Couleur de fond identique à celle de la section */
    z-index: -1;
}

.descriptions::before {
    top: -50px; /* Décalage en haut pour le premier pseudo-élément */
    transform: skewY(2deg); /* Inclinaison vers le bas */
}

.descriptions::after {
    bottom: -50px; /* Décalage en bas pour le dernier pseudo-élément */
    transform: skewY(2deg); /* Inclinaison vers le haut */
}

/* Styles des titres h2 */
.descriptions h2 {
    font-family: 'Gagalin', sans-serif; /* Police de titre personnalisée */
    color: #fff; /* Couleur des titres */
    font-size: 2em; /* Taille des titres plus grande */
    margin: 30px 0; /* Espace avant et après le titre */
}

/* Styles des paragraphes */
.descriptions p {
    font-size: large;
    color: #fff; /* Couleur du texte */
    line-height: 1.6; /* Hauteur de ligne */
    margin-bottom: 30px; /* Espace après les paragraphes */
}

/* Styles pour les écrans moyens et petits (tablettes) */
@media only screen and (max-width: 768px) {
  .descriptions {
      grid-template-columns: 1fr; /* Une seule colonne pour les tablettes */
      padding: 50px 25px; /* Ajustement du padding pour les tablettes */
  }

  .descriptions::before,
  .descriptions::after {
      display: none; /* Optionnel : enlevez les inclinaisons pour simplifier sur les petits écrans */
  }
}

/* Styles pour les écrans très petits (mobiles) */
@media only screen and (max-width: 480px) {
  .descriptions {
      padding: 30px 15px; /* Padding encore plus réduit pour les mobiles */
  }

  .descriptions h2 {
      font-size: 1.5em; /* Réduisez la taille du titre pour les petits écrans */
  }

  .descriptions p {
      font-size: medium; /* Ajustez la taille du texte pour une meilleure lisibilité */
  }
}



/* Styles pour la section des activités */
.activities {
    background-color: #f4f4f4; /* Couleur de fond pour la section */
    padding: 50px; /* Espacement intérieur */
    text-align: center; /* Alignement du texte au centre */
}

.activities h2 {
    font-size: 2em;
    color: #dd4024;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Styles pour la liste des activités */
.activity-list {
  list-style: none;
  padding: 0;
  display: grid;
  /* Réglez la largeur des colonnes sur la largeur maximale du contenu jusqu'à un certain maximum */
  grid-template-columns: repeat(auto-fit, minmax(max-content, 200px)); 
  justify-content: center;
  gap: 20px;
}


.activity-list li {
    position: relative; /* Nécessaire pour positionner le texte par rapport à l'image */
    overflow: hidden; /* Pour conserver les bords arrondis lorsque le texte chevauche l'image */
    border-radius: 10px; /* Bords arrondis pour l'image */
}

.activity-list img {
    max-width: 100%; /* Largeur maximale pour les images */
    max-height: 100px; /* Hauteur maximale pour les images */
    height: auto; /* Hauteur automatique */
    display: block; /* Assure que l'image s'adapte correctement */
    border-radius: 10px; /* Bords arrondis pour l'image */
}

.activity-list span {
    position: absolute; /* Positionnement absolu par rapport à li */
    bottom: 10px; /* Positionné en bas de l'image */
    left: 10px; /* Positionné à gauche de l'image */
    color: #fff; /* Texte en blanc */
    font-weight: bold; /* Texte en gras */
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent pour améliorer la lisibilité */
    padding: 5px; /* Petit padding autour du texte */
    border-radius: 5px; /* Bords légèrement arrondis pour le fond du texte */
}

/* Media Queries pour la réactivité */
@media only screen and (max-width: 768px) {
    .activity-list {
        grid-template-columns: repeat(2, 1fr); /* Deux colonnes sur les tablettes */
    }
}



.about-section {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333; /* La couleur de texte semble être un gris foncé */
    max-width: 1000px; /* ou la largeur que vous préférez */
    margin: 0 auto; /* Centrer la section dans la page */
    padding: 20px;
}

.about-section .accreditation {
    margin-bottom: 20px; /* Espacement après le paragraphe d'accréditation */
}

.about-section p {
    margin-bottom: 20px; /* Espacement standard après les paragraphes */
}

.about-section h2 {
    color: #dd4024; /* Couleur du titre 'PROGRAMME SUR-MESURE' */
    margin-top: 40px; /* Espacement avant le titre h2 */
    margin-bottom: 20px; /* Espacement après le titre h2 */
    text-transform: uppercase; /* Le titre est en majuscules */
    font-size: 1.2em;    /* Taille du titre */
}

.about-section a {
    color: #dd4024; /* Assortir la couleur du lien au titre h2 */
    text-decoration: none; /* Pas de soulignement par défaut */
}

.about-section a:hover {
    text-decoration: underline; /* Souligner au survol pour une bonne accessibilité */
}

/* Media Queries pour la réactivité */
@media only screen and (max-width: 768px) {
    .about-section {
        max-width: 600px; /* Une largeur plus petite pour les tablettes */
    }
}

@media only screen and (max-width: 480px) {
    .about-section {
        max-width: 90%; /* Une largeur plus petite et dynamique pour les mobiles */
        padding: 10px;
    }

    .about-section h2 {
        font-size: 1.5em; /* Taille plus petite pour les titres sur les mobiles */
    }
}



.gallery {
    position: relative; /* Nécessaire pour positionner les pseudo-éléments */
    background-color: #fddedf; /* Couleur de fond pour la section de la galerie */
    margin-top: 100px; /* Espace avant la section de la galerie */
    padding: 40px;
}


.gallery::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px; /* Hauteur de l'effet d'inclinaison */
    background: #fddedf; /* Couleur de fond identique à celle de la section */
    z-index: -1;
    top: -50px; /* Décalage en haut pour le premier pseudo-élément */
    transform: skewY(-1deg); /* Inclinaison vers le haut */
}



.gallery h2 {
    color: #dd4024; /* Couleur du texte pour 'GALERIE', approximée de l'image */
    font-size: 2em; /* Taille du titre */
    margin-bottom: 30px; /* Espace après le titre */
}


.gallery-grid {
  column-count: 4; /* nombre de colonnes */
  column-gap: 20px; /* espace entre les colonnes */
  width: 100%; /* ou la largeur souhaitée */
}

.gallery-grid img {
  width: 100%; /* les images prennent toute la largeur de la colonne */
  margin-bottom: 20px; /* espace entre les images */
  display: inline-block; /* nécessaire pour le flow correct dans les colonnes */
  vertical-align: top; /* aligne les images en haut dans leur espace de colonne */
  border-radius: 10px; /* Bords arrondis pour les images */
}




/* Media Queries pour la réactivité */
@media (max-width: 1200px) {
  .gallery-grid {
      column-count: 3; /* 4 colonnes pour les écrans un peu plus petits */
  }
}


@media (max-width: 768px) {
  .gallery-grid {
      column-count: 2; /* 2 colonnes pour les petits appareils */
  }
}

@media (max-width: 576px) {
  .gallery-grid {
      column-count: 1; /* 1 colonne pour les très petits appareils */
  }
}



.site-footer {
    font-family: Arial, sans-serif;
    background-color: #333; /* Couleur de fond du footer */
    color: #fff; /* Couleur du texte dans le footer */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.footer-content {
    width: 100%;
    max-width: 1200px; /* Largeur maximale du contenu */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Quatre colonnes */
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.footer-brand img {
    max-width: 100px; /* Taille du logo */
    margin-bottom: 10px;
}

.footer-brand,
.footer-contact,
.footer-links,
.footer-social,
.footer-partners {
    padding: 10px;
}

.footer-links a,
.footer-contact a {
    color: #fff; /* Couleur des liens */
    text-decoration: none;
    margin: 5px 0; /* Espacement vertical des liens */
}

.footer-links a:hover,
.footer-contact a:hover {
    text-decoration: underline;
}

.footer-social a {
    color: #fff; /* Couleur des icônes des réseaux sociaux */
    font-size: 24px; /* Taille des icônes */
    margin: 0 10px; /* Espacement horizontal des icônes */
}

.footer-social p,
.footer-brand p,
.footer-contact p {
    margin: 5px 0;
}

.footer-partners img {
    max-height: 50px; /* Taille du logo des partenaires */
}
.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 
    justify-content: center; /* Centrage des liens dans le conteneur */
    align-items: center; /* Alignement vertical des liens */
    background-color: #000; /* Fond noir pour le conteneur des liens */
    text-align: center; /* Centrage du texte des liens */
    padding: 10px 0; /* Espacement en haut et en bas de chaque lien */
    width: 100%; /* Le conteneur des liens prend toute la largeur */
}

.footer-links a {
    color: #fff; /* Texte des liens en blanc */
    text-decoration: none; /* Aucun soulignement pour les liens */
    padding: 5px 10px; /* Espacement autour des liens */
    margin: 5px; /* Espacement entre les liens */
    transition: color 0.3s ease; /* Transition douce pour les changements de couleur */
}

.footer-links a:hover {
    color: #fddedf; /* Couleur au survol */
}


/* Media Queries pour la réactivité */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr; /* Une colonne pour les tablettes */
        text-align: center;
    }

    .footer-social a {
        font-size: 20px; /* Taille réduite pour les icônes sur tablettes */
    }
}

@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: 1fr; /* Une colonne pour les mobiles */
    }
}





.upcoming-activities {
    text-align: center;
    padding: 20px;
}

.upcoming-activities h2 {
    font-size: 2rem;
    color: #a17475; /* This should be the color of your heading */
    margin-bottom: 30px; /* Spacing below the heading */
}

.activities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Spacing between cards */
    padding: 20px;
}

.activity {
    position: relative; 
    background: #fff; /* Card background color */
    border-radius: 10px; /* Rounded corners for the cards */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    overflow: hidden; /* Ensure that content respects the border radius */
}

.activity img {
    width: 100%;
    height: auto;
    display: block; /* Ensures that the image takes up the full container width */
}

.activity-info {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    background-color: #fff; /* Couleur de fond de la zone d'information */
}

.activity-name {
    font-family: 'gagalin', sans-serif; /* Police de titre personnalisée */
    grid-area: name; /* Assignation à la zone 'name' */
    color: #DD4124; /* Couleur pour le titre de l'activité */
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: bold; /* Mettre en gras */
    margin-top: 3%;

}

.activity-session {
    grid-area: session; /* Assignation à la zone 'session' */
    color: #333; /* Couleur pour le texte */
    text-align: left;
    font-size: clamp(1rem, 2vw, 1.2rem);

}

.activity-place {
    grid-area: place; /* Assignation à la zone 'place' */
    color: #333; /* Couleur pour le texte */
    font-weight: bold;
    text-align: left;
    font-size: clamp(1rem, 2vw, 1.2rem);

}

.activity-price {
    grid-area: price; /* Assignation à la zone 'price' */
    color: #DD4124; /* Couleur pour le prix */
    font-weight: bold; /* Mettre en gras */
    font-size: 1.4em; /* Taille de police plus grande pour le prix */
    justify-self: end; /* Alignement du prix à droite */
}


.activity-date {
    padding: 10px 20px; /* Ajustez le padding selon vos besoins */
    border-radius: 15px; /* Bords arrondis */
    background-color: #fdf3f3; /* Couleur de fond, ajustez selon votre design */
    color: #e8491d; /* Couleur du texte */
    text-align: center; /* Centre le texte horizontalement */
    font-weight: bold; /* Optionnel: texte en gras */
    font-size: clamp(1rem, 2vw, 1.2rem);
}


.activity-orga {
    position: absolute; /* Position absolue par rapport à son parent */
    top: 10px; /* Ajustez la valeur pour déplacer vers le bas si nécessaire */
    right: 10px; /* Ajustez la valeur pour déplacer vers la gauche si nécessaire */
    padding: 5px 15px; /* Espacement intérieur */
    border-radius: 15px; /* Bords arrondis */
    background-color: rgba(255, 255, 255, 0.5); /* Arrière-plan blanc semi-transparent */
    color: #000; /* Texte en noir */
    text-align: center; /* Centrage du texte */
    font-size: 0.9em; /* Taille du texte */
    z-index: 10; /* S'assure que l'élément est au-dessus des autres contenus */
}

.activity-type {
    position: absolute; /* Position absolue par rapport à son parent */
    top: 10px; /* Distance du haut de l'élément parent */
    left: 10px; /* Distance du côté gauche de l'élément parent */
    color: #fff; /* Texte en blanc */
    font-weight: bold; /* Texte en gras */
    z-index: 10; /* S'assure que l'élément est au-dessus des autres contenus */
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .activities-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (max-width: 480px) {
    .activities-grid {
        grid-template-columns: 1fr;
    }
}


.activity-details {
    background-color: #ffffff; /* Couleur de fond */
    padding: 20px; /* Padding intérieur */
    border-radius: 10px; /* Bords arrondis */
    position: relative; /* Position relative pour le placement dans le flux du document */
    top: -200px; /* Ajustez cette valeur pour superposer sur l'image du dessus */
    margin: 0 auto; /* Centrer dans la page si nécessaire */
    max-width: 80%; /* Ajustez selon la largeur souhaitée */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre portée pour la profondeur */
    z-index: 10; /* S'assure que l'élément se superpose sur l'image au-dessus */
    margin-bottom: 20px;
}

/* Assurez-vous de gérer la réactivité pour les petits écrans */
@media (max-width: 768px) {
    .activity-details {
      top: -20%; /* Superposition moins importante sur les petits écrans */
    }
}


.activity-details-top {
    display: grid; /* Utilise grid pour la mise en page */
    grid-template-columns: 1fr 2fr 1fr;
    text-align: left; /* Alignement du texte à gauche */
    padding: 20px;
    background-color: #fdf3f3; /* Couleur de fond */
    border-radius: 10px; /* Bords arrondis */
    margin-top: -40px; /* Chevauchement sur l'image du dessus */
    position: relative;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre douce pour la profondeur */
    margin-left: auto;
    margin-right: auto;
    gap: 10px; /* Espacement entre les éléments de la grille */
}

.activity-details-top h2 {
    color: #333;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
}

.activity-details-top h3 {
    color: #e8491d;
    margin-top: 10px;
    font-family: gagalin;
    font-size: clamp(1.5rem, 2vw, 2rem);
    text-align: center;
}

.activity-details-top .activity-address {
    font-weight: bold;
}

.activity-details-description{
    padding: 50px;
}

@media (max-width: 768px) {
  .activity-details-description {
    padding: 25px;
  }
}


.activity-location {
    font-weight: bolder;
    padding-bottom: 20px;
    color: #333;
    font-size: clamp(1rem, 2vw, 1.3rem);
}

.activity-details-pdf {
    width: 100%; /* Fait en sorte que l'élément 'embed' prenne toute la largeur de son conteneur */
    height: 500px; /* Définit une hauteur fixe pour l'élément 'embed'. Ajustez selon vos besoins */
    display: block; /* Affiche l'élément 'embed' comme un bloc, ce qui le rend sujet à la largeur et la hauteur spécifiées */

    padding-bottom: 50px;
}


.container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divise l'écran en deux colonnes de taille égale */
    gap: 20px; /* Espace entre les colonnes */
}

.maps iframe {
    width: 100%; /* La carte prend toute la largeur de sa colonne */
    height: 100%; /* Ajustez la hauteur selon vos besoins */
    border-radius: 10px; /* Bords arrondis pour l'iframe */
    border: none; /* Supprimer la bordure par défaut de l'iframe */
}

.right-section {
    display: grid;
    grid-template-rows: 1fr 1fr; /* Divise la section droite en deux rangées de taille égale */
    gap: 20px; /* Espace entre les rangées */
}

.calendar {
    /* Appliquez ici vos styles de calendrier */
    border-radius: 10px; /* Bords arrondis pour le calendrier */
    border: 1px solid #ccc; /* Bordure pour le calendrier, ajustez selon vos besoins */
    /* Plus de styles personnalisés peuvent être ajoutés selon votre mise en page de calendrier */
}

.info-slider {
    /* Appliquez ici vos styles de slider */
    border-radius: 10px; /* Bords arrondis pour le slider */
    border: 1px solid #ccc; /* Bordure pour le slider, ajustez selon vos besoins */
    /* Assurez-vous que le slider est bien configuré pour être responsive et s'adapter aux différentes tailles d'écran */
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Empile les éléments en une seule colonne sur les petits écrans */
    }
    
    .right-section {
        grid-template-rows: auto auto; /* Hauteur automatique pour les rangées sur les petits écrans */
    }
}




.calendar {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    background-color: #ffffff;
}

.month {
    text-align: center;
    margin-bottom: 20px;
}

.month .month-name {
    font-size: 1.2em;
    font-weight: bold;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.weekdays .day {
    font-weight: bold;
    padding: 5px;
    background-color: #fdf3f3;
}

.dates-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 5px;
}

.date {
    padding: 10px;
    background-color: #f9f9f9;
    text-align: center;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.date:hover {
    background-color: #eaeaea; /* Effet au survol pour les dates */
}

.date .date-number {
    display: inline-block;
}



.info-slider {
    overflow: hidden; /* Cache les éléments débordant du slider */
    position: relative;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-item {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    margin: 10px 0; /* Espacement entre les slides si vous les empilez */
}

.info-slider select,
.info-slider input[type="date"] {
    padding: 5px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.additional-info {
    font-size: 0.9em;
    margin-bottom: 10px;
}

.reserve-button {
    background-color: #e8491d; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte */
    border: none; /* Aucune bordure */
    padding: 10px 20px; /* Espacement intérieur */
    border-radius: 5px; /* Bords arrondis */
    font-size: 1em; /* Taille de la police */
    cursor: pointer; /* Style du curseur en survol */
    margin-top: 20px; /* Espace au-dessus du bouton */
    transition: background-color 0.3s; /* Transition pour l'effet au survol */
}

.reserve-button:hover {
    background-color: #cc3d1a; /* Couleur de fond au survol */
}

.price-info {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 20px; /* Espace au-dessus de l'information de prix */
}

.price-info .price {
    color: #e8491d;
}


.exclusions ul {
  margin-left: 20px;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

.inclusions ul{
  margin-left: 20px;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

.tariff-information {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    grid-gap: 20px;
    margin: 20px auto;
  }

  
  .price-tag {
    grid-column: 1 / -1; /* Le prix s'étend sur toute la largeur */
  }
  
  .price-tag h2 {
    color: #d35400;
    font-size: clamp(1rem, 2.5vw, 3rem);
    font-family: 'Gagalin', sans-serif;
    margin: 0;
  }
  
  .inclusions, .exclusions {
    padding: 20px;
  }
  
  .inclusions h3, .exclusions h3 {
    font-size: clamp(1rem, 2vw, 3rem);
    color: #333;
    margin-bottom: 10px;
  }
  
  .reservation-button {
    grid-column: 1 / -1; /* Le bouton s'étend sur toute la largeur */
    text-align: center;
    display: flex;
    justify-content: center; 
  }
  
  .reservation-button button {
    padding: 20px 20px;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    border-radius: 100px;
    font-weight: bold;
  }
  
  /* Responsive Design */
  @media only screen and (max-width: 768px) {
    .tariff-information {
      grid-template-columns: 1fr; /* Empiler en une colonne sur les petits écrans */
    }
  
    .price-tag h2, .inclusions h3, .exclusions h3 {
      font-size: 1.2rem;
    }
  
    .reservation-button button {
      padding: 8px 16px;
      font-size: 0.9rem;
    }
  }
  
  @media only screen and (max-width: 480px) {
    .tariff-information {
      padding: 10px;
    }
  
    .price-tag h2, .inclusions h3, .exclusions h3 {
      font-size: 1.5rem;
    }
  
    .reservation-button button {
      font-size: 0.8rem;
    }
  }



  .image_activity img {
    width: 100%; /* Pour que l'image occupe toute la largeur disponible */
    max-height: 200px; /* Pour que la hauteur de l'image s'ajuste automatiquement en conservant les proportions */
    object-fit: cover; /* Pour que l'image soit redimensionnée pour remplir complètement son conteneur en conservant les proportions */
  }


  .image_activity_left img {
    width: 100%; /* Pour que l'image occupe toute la largeur disponible */
    max-height: 200px; /* Pour que la hauteur de l'image s'ajuste automatiquement en conservant les proportions */
    object-fit: cover; /* Pour que l'image soit redimensionnée pour remplir complètement son conteneur en conservant les proportions */
  }


  .activity-container {
    display: flex; /* Utilisez Flexbox */
    align-items: center; /* Centrez les éléments verticalement */
    justify-content: space-between; /* Espace entre les éléments textuels et l'image */
    padding: 20px; /* Espace autour du contenu */
  }
  

  

  .reservation-form {
    margin: 0 auto;
    background: #fdf3f3;
    padding: 5%;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  .form-section {
    margin-bottom: 15px;
  }
  
  .form-section label {
    display: block;
    margin-bottom: 5px;
    font-size: clamp(1rem, 2vw, 1.5rem);;
  }
  
  .btn {
    background-color: #e74c3c;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    width: 100%;
    max-width: 300px;
    font-size: clamp(1rem, 2vw, 1.3rem);;
  }
  
  .date-time, .age-quantity {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    align-items: center;
  }
  
  .age-quantity .level {
    grid-column: 1 / span 2;
  }
  
  .options .option {
    display: flex;
    grid-template-columns: auto 100px;
    grid-gap: 10px;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .options .option-name {
    text-align: left;
  }
  
  .total, .cgv, .reservation-button {
    text-align: left;
  }
  
  .cgv {
    display: flex;
    align-items: center;
  }
  
  .cgv input[type="checkbox"] {
    margin-right: 10px;
  }
  
  .reservation-button button {
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    display: block;
    width: 20%;
    box-sizing: border-box;
  }

  .reservation-button button:disabled {
    background-color: #b0b0b0; /* Gris clair pour indiquer l'état désactivé */
    color: #f0f0f0;            /* Texte un peu plus pâle */
    cursor: not-allowed;
    opacity: 0.7;              /* Légère transparence pour montrer l’inactivité */
    pointer-events: none;      /* Empêche les clics */
  }
  
  
  .reservation-button button:hover {
    background-color: #eb682b;
  }
  
  @media (max-width: 768px) {
    .date-time, .age-quantity, .options .option {
      grid-template-columns: 1fr;
    }
  
    .age-quantity .level {
      grid-column: auto;
    }
  }
  
  @media (max-width: 480px) {
    .reservation-form {
      padding: 10px;
    }
  }
  


.quantity-options {
    display: flex;
    align-items: center;
    gap: 10px; /* Ajuster selon l'espacement désiré */
    margin-bottom: 20px;
  }


  .quantity-decrease {
    background-color: white;
    color: #e74c3c;
    border: 2px solid #e74c3c; /* Ajoute une bordure pour le bouton "-" */
    border-radius: 20px;
    padding: 10px;
    margin-right: 40px;
    width: 10%;
  }
  
  .price {
    margin-left: auto; /* Pousse le prix à la droite */
    background: none;
    color: #333;
    font-weight: bold;
    font-size: clamp(1.3rem, 2vw, 4rem)
  }

  .level{
    margin-left: 40px;
    width: 30%;
  }

  .form-section.total {
    align-items: center;
    padding-top: 15px; /* Ajoute de l'espace au-dessus du contenu de la section */
  }

  .total-line {
    height: 1px;
    background-color: #ccc;
    margin-bottom: 10px; /* Ajoute de l'espace en dessous du trait */
    width: 100%; /* Assurez-vous que la ligne s'étend sur toute la largeur */
  }
  
  .total-amount {
    background: none;
    color: #95a6a6;
    font-weight: bold;
    text-align: center; 
  }
  


  .form-section.cgv {
    color: #000; /* Tout le texte en noir */
  }
  
  .form-section.cgv label,
  .form-section.cgv .cgv-link {
    font-weight: normal; /* Réinitialiser le gras au cas où il a été défini ailleurs */
  }
  
  .cgv-link {
    font-weight: bold; /* Lien en gras */
    color: #000; /* Couleur du lien en noir */
  }
  
  .cgv-link:hover {
    text-decoration: underline; /* Optionnel: ajoute un soulignement au survol du lien */
  }






  .payment-form {
    margin: 0 auto;
    background: #fdf3f3;
    padding: 5%;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-family: 'Arial', sans-serif;
    color: #333;
  }
  
  .form-section {
    margin-bottom: 20px;
  }
  
  .form-section h2, .form-section h3 {
    font-family: 'gagalin', sans-serif;
    color: #DD4124;
  }
  
  .details-row, .total, .promo-code, .card-payment, .installment, .payment-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  
  .quantity-input, .promo-input, .card-input, .expiry-input, .cvc-input {
    background-color: white;
    color: #e74c3c;
    border: 2px solid #e74c3c;
    border-radius: 20px;
    padding: 10px;
    margin-right: 40px;
    width: 10%;
  }

  .card-input {
    width: 30%;
  }
  
  .validate, .use-credits, .pay {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
  }
  
  .divider {
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
    width: 100%;
  }
  
  .total-amount, .option-price{
    margin: auto;
    color: #333;
    font-weight: bold;
    font-size: clamp(1.3rem, 2vw, 4rem)
  }
.remaining-amount {
    margin: auto;
    color: #333;
    font-weight: bold;
    font-size: clamp(1rem, 3vw, 1rem);
  }
  .klarna-logo {
    
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
  
    .quantity-input, .promo-input, .card-input, .expiry-input, .cvc-input {
      width: 20%; /* Full width on smaller screens */
      margin-right: 10px;
    }
  }



  
  .tariff-information-final {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    grid-gap: 20px;
    margin: 20px auto;
    padding: 50px;
  }

  /* Pour les écrans moyens comme les tablettes, passez à 2 colonnes */
  @media (max-width: 768px) {
    .tariff-information-final {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour les écrans moyens */
    }
  }


  .form-section.promo-code {
    position: relative; /* Définir le parent pour la position absolue des enfants */
    width: max-content; /* S'assurer que le conteneur s'adapte au contenu */
  }
  
  .promo-input {
    border: 2px solid #e74c3c;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    font-size: 0.8em;
    outline: none;
    border-right: none;
    width: 150px;
    text-align: left; 
}


  

  .validate {
    position: absolute; /* Position absolue par rapport au parent .promo-code */
    right: 0; /* Aligner à droite dans le parent */
    top: 0; /* Aligner au sommet du parent */
    height: 100%; /* Hauteur totale du parent */
    background-color: #e74c3c;
    color: white;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    left: 60%;
    width: 100px;
  }


  .form-section.credits {
    margin-top: 30px;
  }
  
  .form-section.credits h3 {
    color: #333; /* Texte du titre en noir */
    font-size: 1.2em; /* Ajustez la taille de la police selon vos besoins */
    margin-bottom: 5px; /* Espace entre le titre et le solde */
  }
  
  .form-section.credits .credits-info {
    color: #333; /* Texte du solde en noir */
    margin-bottom: 10px; /* Espace entre le solde et le bouton */
  }
  
  .btn.use-credits {
    background-color: #ccc; /* Gris pour le bouton désactivé */
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    cursor: not-allowed; 
    font-size: 1em;
    margin-top: 10px; /* Espace au-dessus du bouton */
  }
  
  /* Si le bouton est actif, rétablir les couleurs normales */
  .btn.use-credits:enabled {
    background-color: #e74c3c; /* Couleur normale pour le bouton actif */
    cursor: pointer;
  }
  







  
 
  
  .activity-address {
    font-weight: bold;
  }
  
  .activity-times p {
    margin: 5px 0;
  }
  
  .more-info {
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 15px;
    cursor: pointer;
  }
  
  .activity-image {
    background: url('path-to-your-image.jpg') no-repeat center center;
    background-size: cover;
    height: 200px; /* Or the height you want */
    margin-top: 15px;
    border-radius: 10px;
  }
  
  .confirmation {
    background-color: #f9f9f9;
    border: 1px solid #e7e7e7;
    margin-top: 20px;
    padding: 15px;
    text-align: center;
  }
  
  .confirmation h2 {
    color: #d35400;
    margin-bottom: 15px;
  }
  
  .confirmation-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .quantity-selector {
    display: inline-flex;
    align-items: center;
  }
  
  .quantity-decrease, .quantity-increase {
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 5px 10px;
    cursor: pointer;
  }
  
  .quantity-value {
    margin: 0 10px;
  }
  
  .level, .transport-option, .transport-price {
    background: none;
    color: #333;
    font-size: 1em;
  }
  
  .thanks-message {
    color: #333;
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: bold;
  }
  

.mes-reservations{
  max-width: 60%; 
  margin: auto;
  padding: 20px; 
  border-radius: 10px; 

}

.past-activities .activity img {
  filter: grayscale(100%); 
}

.marg-top{
  margin-top: 30px;
}


.contact-form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.contact-form-container h2 {
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
}

.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="password"],
.input-group textarea {
  width: 90%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.input-group textarea {
  height: 100px;
  resize: vertical; /* Permet à l'utilisateur de changer la taille verticalement */
}

.checkbox-group {
  margin-bottom: 15px;
  text-align: left; /* Alignement du texte à gauche pour la case à cocher */
}

.checkbox-group input[type="checkbox"] {
  margin-right: 5px;
}

.checkbox-group label {
  font-size: 0.9em; /* Ajuster la taille de la police selon vos besoins */
}

.captcha-group {
  margin-bottom: 15px;
}

.submit-button {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1em;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: #cc3c2c; /* Assombrir le bouton lors du survol */
}

@media (max-width: 768px) {
  .contact-form-container {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .contact-form-container {
    padding: 5px;
  }
}



/* Style pour les messages d'erreur */

.error-message {
  color: #e74c3c;
  font-size: 0.9em;
  margin-top: 5px;
}

/* Style pour les messages de succès */

.success-message {
  color: #2ecc71;
  font-size: 0.9em;
  margin-top: 5px;
}

/* Style pour les messages de validation */

.validation-message {
  color: #e67e22;
  font-size: 0.9em;
  margin-top: 5px;
}

/* Style pour les messages de captcha */

.captcha-message {
  color: #e67e22;
  font-size: 0.9em;
  margin-top: 5px;
}






.gallery-grid img {
  cursor: pointer; /* Indique que l'image peut être cliquée */
  transition: transform 0.3s ease; /* Animation optionnelle */
}

.gallery-grid img:hover {
  transform: scale(1.05); /* Zoom léger au survol */
}

/* Style pour la modale */
.modal {
  display: none; /* La modale est masquée par défaut */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  overflow: auto;
  align-items: center;
  justify-content: center;
}

/* Style pour l'image de la modale */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%; /* Largeur maximale en pourcentage pour une certaine réactivité */
  max-height: 80vh; /* Hauteur maximale pour une visibilité complète sur la plupart des écrans */
}


/* Style pour le bouton de fermeture */
.close {
  position: absolute;
  top: 10px;
  right: 25px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

/* Style pour la légende de l'image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.expiry-cvc {
  margin-top: 10px;
}





.login-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #ffffff;
  margin-top: 100px;
  margin-bottom: 100px;
}

.login-form .input-group {
  margin-bottom: 15px;
}

.login-form .input-group input {
  width: 80%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn.login-button {
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1em;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  display: block; /* Rend le bouton bloc pour occuper la largeur complète */
  margin: 0 auto;

}

.btn.login-button:hover {
  background-color: #cc3c2c;
}

.login-footer {
  font-size: 0.9em;
  margin-top: 20px;
}

.login-footer a {
  color: #333;
  text-decoration: none;
  margin: 0 10px;
}

.login-footer a:hover {
  text-decoration: underline;
}



.password-reset-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #ffffff;
  margin-top: 100px;
  margin-bottom: 100px;
}

.password-reset-form .input-group {
  margin-bottom: 15px;
}

.password-reset-form .input-group input {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn.password-reset-button {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1em;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  display: block; /* Rend le bouton bloc pour occuper la largeur complète */
  margin: 0 auto; /* Ajoute de l'espace autour du bouton */
}

.btn.password-reset-button:hover {
  background-color: #cc3c2c;
}







.signup-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #ffffff;
  margin-bottom: 100px;
  margin-top: 100px;
}

.signup-form .form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.signup-form .input-group {
  flex: 1; /* Les enfants prennent une part égale de l'espace */
  margin-right: 10px; /* Espace entre les champs de saisie */
}

.signup-form .input-group:last-child {
  margin-right: 0; /* Pas de marge à droite pour le dernier élément */
}

.signup-form .input-group input {
  width: 80%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn.signup-button {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1em;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  margin-top: 20px; /* Espace au-dessus du bouton */
}

.btn.signup-button:hover {
  background-color: #cc3c2c;
}

.privacy-policy {
  font-size: 0.9em;
  margin-top: 20px;
  color: #333;
}

.privacy-policy a {
  color: #e74c3c;
  text-decoration: none;
}

.privacy-policy a:hover {
  text-decoration: underline;
}










.user-profile-container {

  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.user-sections {
  display: flex;
  : space-between;
  margin-bottom: 20px;
}

.user-info h2, .user-reservations h2 {
  font-size: 1.5rem;
  color: #333;
  margin: 0;
}

.user-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border-radius: 10px;
  padding: 20px;
}

.user-image {
  margin-left: 10%;
  flex: 1 1 100px;
  align-self: center;
}

.user-image img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.user-details {
  flex: 3 1 200px;
  display: flex;
  flex-direction: column;
  : center;
}

.info-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-fields input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.modify-info-btn {
  padding: 10px 20px;
  background-color: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 5px;
  margin-top: 20px;
  cursor: pointer;
}

.modify-info-btn:hover {
  background-color: #cc3c2c;
}

@media (max-width: 768px) {
  .user-sections {
      flex-direction: column;
      align-items: center;
  }

  .user-content {
      flex-direction: column;
  }

  .user-image {
      margin-bottom: 20px;
  }

  .user-image img {
      width: 150px;
      height: 150px;
  }

  .modify-info-btn {
      align-self: center;
  }
}

.profile-header {
  display: flex;
  margin-bottom: 20px;
}

.user-info-title h2, .user-reservations-title h2 {
  font-size: 1.5rem;
  color: #333;
  margin: 0;

  padding: 10px 20px;
  border-radius: 25px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.profile-navv{
  background-color: #fdf3f3; 
}

@media (max-width: 768px) {
  .profile-header {
      align-items: center;
      justify-content: center;
  }
  .user-info-title h2, .user-reservations-title h2{
    font-size: 1rem;
    min-height: 50px;
    align-items: center;

  }
  
  .user-info-title, .user-reservations-title {
      width: 100%;
      text-align: center;
  }
}



.user-reservations-title{
  text-align: center;
  width: 50%;
}

.user-info-title{
  text-align: center;
  width: 50%;
}



.user-reservations-title h2.active,
.user-info-title h2.active {
  background-color: #fdf3f3 !important;
}

.user-reservations-title h2{
  background-color: #ffffff;
}

.user-info-title h2{
  background-color: #ffffff;
}

.user-info-title:hover, .user-reservations-title:hover {
  cursor: pointer; /* Change le curseur en pointeur */
}


.CardField-number{
  background-color: white;
  color: #e74c3c;
  border: 2px solid #e74c3c;
  border-radius: 20px;
  padding: 10px;
  margin-right: 40px;
  width: 30%;
}



CardField-expiry{
  transform: translateX(684px);
    background-color: white;
    color: #e74c3c;
    border: 2px solid #e74c3c;
    border-radius: 20px;
    padding: 10px;

}

CardField-cvc{
  transform: translateX(684px);
    background-color: white;
    color: #e74c3c;
    border: 2px solid #e74c3c;
    border-radius: 20px;
    padding: 10px;
}



.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #dd4124;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



.check-login{
  margin-bottom: 10px;
}

.aditional{
  margin: 20px;
}

.stripe-element {
  background-color: #fafafa;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-bottom: 20px;
  box-shadow: 0px 4px 5px rgba(200, 200, 200, 0.5);
  width: 90%;
}

.stripe-element input {
  border: none;
  outline: none;
  background-color: transparent;
  width: 100%;
}


.payment-form > *:not(:last-child) {
  margin-bottom: 20px; /* L'espacement que vous voulez entre les éléments */
}


button.klarna-button {
  background-color: #000; /* Fond noir */
  color: #fff; /* Texte blanc */
  border: none; /* Pas de bordure */
  padding: 12px 24px; /* Espacement intérieur */
  font-family: 'Helvetica Neue', Arial, sans-serif; /* Police similaire */
  font-size: 18px; /* Taille de la police */
  font-weight: bold; /* Texte en gras */
  text-align: center; /* Alignement du texte */
  border-radius: 22px; /* Bordures arrondies */
  cursor: pointer; /* Style du curseur */
  transition: background-color 0.3s ease; /* Transition pour l'effet de survol */
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25); /* Ombre portée pour la profondeur */
  outline: none; /* Retire l'outline par défaut pour le focus */
}

button.klarna-button:hover {
  background-color: #333; /* Changement de couleur au survol */
}

button.klarna-button:active {
  box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.45); /* Effet d'enfoncement lors du clic */
}

.KlarnaElement {
  display: flex; /* Utilisez Flexbox pour la disposition */
  align-items: center; /* Alignez les éléments verticalement */
  justify-content: flex-start; /* Placez l'espace entre le texte et le bouton */
}

.installment-info {
  order: 1; /* Le texte prend la deuxième place dans l'ordre de Flexbox */
  margin-left: auto; /* Pousse le texte vers la droite */
  margin-right: 16px;
}

.klarna-button {
  order: 2; /* Le bouton prend la première place */
  margin-right: 10px; /* Pousse le bouton vers la gauche */
}


button.stripe-button {
  background-color: grey; /* Couleur de fond bleue Stripe */
  color: #fff; /* Texte en blanc */
  border: none; /* Pas de bordure */
  padding: 12px 24px; /* Espacement intérieur */
  font-family: 'Helvetica Neue', Arial, sans-serif; /* Police similaire */
  font-size: 18px; /* Taille de la police */
  font-weight: bold; /* Texte en gras */
  text-align: center; /* Alignement du texte */
  border-radius: 22px; /* Bordures arrondies */
  cursor: pointer; /* Style du curseur */
  transition: background-color 0.3s ease; /* Transition pour l'effet de survol */
  box-shadow: 0 4px 6px 0 rgba(50, 50, 93, 0.11), 0 1px 3px 0 rgba(0, 0, 0, 0.08); /* Ombre portée pour la profondeur, ajustée pour Stripe */
  outline: none; /* Retire l'outline par défaut pour le focus */
}

button.stripe-button:hover {
  background-color: #5469d4; /* Changement de couleur au survol, bleu légèrement plus foncé */
}

button.stripe-button:active {
  box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.45); /* Effet d'enfoncement lors du clic */
}





.sport-banners .sports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Crée une grille responsive */
  gap: 20px; /* Espace entre les éléments de grille */
}

.sport-item {
  border: 1px solid #ccc; /* Bordure légère pour chaque élément */
  padding: 10px; /* Espacement intérieur */
  border-radius: 5px; /* Coins arrondis */
}

.banner-preview img {
  width: 100%; /* Assure que l'image s'adapte à la largeur de l'élément */
  height: auto; /* Maintient le ratio de l'image */
  margin-top: 10px; /* Espacement au-dessus de l'image */
}

.banner-missing {
  color: #666; /* Couleur du texte pour l'indicateur d'absence */
  text-align: center; /* Centre le texte */
  margin-top: 10px; /* Espacement au-dessus du texte */
}



.upload-btn {
  background-color: #007BFF; /* Bleu */
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.upload-btn:hover {
  background-color: #0056b3;
}

.delete-btn {
  background-color: #FF5733; /* Rouge */
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.delete-btn:hover {
  background-color: #c43f10;
}

.file-input {
  margin: 15px 0;
}



.image_activity_preview {
  width: 100%; /* Utilise toute la largeur disponible du conteneur parent */
  overflow: hidden; /* Masque les parties de l'image qui dépassent du conteneur */
  position: relative; /* Positionnement relatif pour les ajustements internes */
  padding-top: 56.25%; /* Ratio 16:9 pour la hauteur, changez ce ratio selon vos besoins */
  margin-top:30px;
}

.image_activity_preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Assure que l'image couvre entièrement le conteneur sans être déformée */
}


@media (max-width: 768px) {
  /* Styles pour les écrans de tablettes et mobiles */
  .image_activity_preview {
    padding-top: 75%; /* Ratio plus grand pour les écrans plus petits */
  }
}

@media (max-width: 480px) {
  /* Styles spécifiques pour les mobiles */
  .image_activity_preview {
    padding-top: 100%; /* Ratio 1:1 pour les très petits écrans */
  }
}

/* Style par défaut pour les grands écrans */
.p-description-wire {
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.5;
  padding: 10px 20px;
}

/* Ajustement pour les écrans de taille moyenne (tablettes) */
@media (max-width: 768px) {
  .p-description-wire {
    font-size: 1rem; /* Réduction de la taille de la police */
    padding: 10px 15px; /* Ajustement du padding */
  }
}

/* Ajustement pour les petits écrans (mobiles) */
@media (max-width: 480px) {
  .p-description-wire {
    font-size: 0.9rem; /* Réduction supplémentaire de la taille de la police */
    padding: 8px 10px; /* Ajustement du padding pour les petits écrans */
  }
}


.option p {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.5rem);
}





.voir-plus-container {
  grid-column: 1 / -1; /* Span across all columns of the grid */
  display: flex;
  justify-content: center; /* Center horizontally */
  margin-top: 20px; /* Optional: Adjust this as needed */
}

.voir-plus-button {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 0.9em; /* Slightly smaller font size for a small button */
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  text-decoration: none; /* Remove underline */
  text-align: center;
}

.voir-plus-button:hover {
  background-color: #c0392b; /* Darker shade on hover */
}




.shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.btn-selected {
  background-color: #e74c3c;
  color: white;
}

/* Image en gris */
.activity.canceled img {
  filter: grayscale(100%);
  opacity: 0.8;
}

/* Texte barré pour le prix */
.activity-price.canceled {
  text-decoration: line-through;
  color: #ff0000; /* Rouge pour signaler l'annulation */
}

/* Overlay "Annulé" en diagonal */
.canceled-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  transform: rotate(-20deg);
}

.activity-details-top.no-grid-template {
  grid-template-columns: none; /* Désactivation ou style alternatif */
}

/* Titre en rouge si annulé */
.canceled {
  color: #ff0000; /* Rouge */
}

/* Texte barré pour le prix */
.price-total.canceled {
  text-decoration: line-through;
  color: #ff0000; /* Rouge */
}

.modal-buttons {
  display: flex;
  flex-wrap: wrap; /* Permet aux boutons de passer sur une nouvelle ligne si nécessaire */
  gap: 10px; /* Espace entre les boutons */
  justify-content: center; /* Centre les boutons */
  margin-top: 20px; /* Ajoute de l'espace au-dessus des boutons */
}

.modal-buttons .btn {
  flex: 1 1 auto; /* Permet aux boutons de s'adapter à l'espace disponible */
  min-width: 150px; /* Taille minimale pour les boutons */
  max-width: 200px; /* Taille maximale pour éviter les boutons trop larges */
  text-align: center;
}



.page-main{
  height: 100%;
}

.klarna-message {
  background-color: #fdfdfd;
  border-left: 4px solid #005aab;  /* couleur marque Klarna ou ton thème */
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.4;
}




/* === Conteneur flex pour boutons + input === */
.flex-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  border: 1px solid #dd4124;           /* Bordure rouge foncé */
  border-radius: 10px;
  overflow: hidden;
  height: 3rem;
  background-color: white;
}

/* Input numérique centré, sans flèches */
.flex-input-container input {
  width: 50px;
  text-align: center;
  border: none;       /* Séparateur gris clair à gauche */
  outline: none;
  font-size: 14px;
  padding: 0.5rem;
  height: 100%;
  line-height: 1.5rem;
  margin: 0;
}

/* Supprimer flèches Chrome/Safari */
.no-arrows::-webkit-inner-spin-button,
.no-arrows::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Supprimer l’apparence native dans Firefox */
.no-arrows {
  -moz-appearance: textfield;
  color: #000;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 140%;
}

/* === Boutons “–” et “+” === */
.button-selector {
  /* Dégradé rouge : du clair (#e74c3c) vers le plus foncé (#dd4124) */
  background: linear-gradient(90deg, #e74c3c 0%, #dd4124 100%);
  color: white;
  padding: 0.5rem 1rem;
  font-size: 17px;
  height: 100%;            /* Occupent la même hauteur que le conteneur (3rem) */
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

/* État désactivé */
.button-selector:disabled {
  background: linear-gradient(90deg, #cccccc 0%, #999999 100%);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Hover (si pas désactivé) : éclaircissement du rouge */
.button-selector:not(:disabled):hover {
  background: linear-gradient(90deg, #ee5c4e 0%, #e03e2e 100%);
}

/* Focus accessible */
.button-selector:focus {
  outline: 2px solid rgba(221, 65, 36, 0.5);
  outline-offset: 2px;
}

/* Optionnel : adaptation pour les très petits écrans */
@media (max-width: 480px) {
  .flex-input-container {
    height: 2.5rem;
  }
  .button-selector {
    padding: 0.4rem 0.8rem;
    font-size: 15px;
  }
  .flex-input-container input {
    font-size: 13px;
    padding: 0.4rem;
    width: 40px;
  }
}

/* === Prix aligné à droite === */
.quantity-options {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.price {
  margin-left: auto;                          /* pousse le prix à l’extrémité droite */
  background: none;
  color: #333;
  font-weight: bold;
  font-size: clamp(1.3rem, 2vw, 4rem);
}