/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  /* Couleurs principales*/
  --color-white:                   #FFFFFF;
  --color-primary:                 #ffc107;
  --color-primary-hover:           #e6ac00;
  --color-primary-active:          #cc9a00;
  --color-background-light:        #f9f9f9;
  --color-background-dark:         #000000;
  --color-background-grey:         #fcfeff;
  --color-background-gray:         #e0e0e0;
  --color-background-gray-light:   #f5f5f5;
  --color-background-gray-dark:    #2c2c2c;
  --color-text-white-secondary:    rgba(255, 255, 255, 0.98);
  --color-dark-transparent:        rgba(0, 0, 0, 0.5);


  /* Couleurs spécifiques pour les sections */
  --color-accueil:                 #E63946;  /* Rouge corail moderne pour l'accueil */
  --color-presentation:            #457B9D;  /* Bleu océan profond pour la présentation */
  --color-activites:               #2A9D8F;  /* Vert menthe rafraîchissant pour les activités */
  --color-contact:                 #9B5DE5;  /* Violet éclatant pour la section contact */
  --color-liens:                   #F4A261;  /* Orange terre cuite pour la section Liens */
  --color-liens-regionaux:         #F4A261;  /* Orange terre cuite pour la section Liens */
  --color-texte-du-mois:           #D62828;  /* Rouge intense et élégant pour la section Texte du mois */
  --color-medias-videos:           #3D5A80;  /* Bleu acier pour la section Médias et vidéos */

/* Couleurs pour chaque section */
  --color-background-accueil:          #FAE3D9; /* Fond rosé doux pour l'accueil */
  --color-background-presentation:     #E0FBFC; /* Fond bleu glacier pour la présentation */
  --color-background-activite:         #F0E7DB; /* Fond beige moderne pour l'activité */
  --color-background-texte-du-mois:    #FFE8D6; /* Fond crème pour le texte du mois */
  --color-background-medias:           #E6F7F1; /* Fond vert d'eau pour médias et vidéos */
  --color-background-liens:            #EDF6F9; /* Fond bleu clair et apaisant pour liens */
  --color-background-liens-regionaux:  #F8F9FA; /* Fond neutre doux */
  --color-background-contact:          #FFDAC1; /* Fond pêche clair pour le contact */
  --color-menu-background:             #1D3557; /* Bleu profond moderne */
  --color-background-lien-organisme:   #F3F3F3; /* Fond gris clair élégant */
  --color-background-lien-initiation:  #C5E1A5; /* Fond vert pastel pour les liens vers les initiations */
  --color-background-activite-membre:  #FFB4A2; /* Fond corail doux pour les activités des membres */
  --color-background-convention:       #A8DADC; /* Fond bleu turquoise doux pour les conventions */
  --color-background-album :           #fdf6e3; /* exemple : beige doux inspiré du thème "solaire" */
  --color-background-omt:              #FBEAEA; /* Rouge rosé doux et spirituel */
  --color-background-visite-officiel:  #E5F9E0; /* Vert pastel lumineux */
  --color-background-informations:    #DFF5FF; /* Bleu pastel pour les informations pratiques */

  /* Couleurs pour chaque activité */
  --color-conference-amorc-bg:     #af7ac5; 
  --color-conference-urci-bg:      #5499c7; 
  --color-seminaire-amorc-bg:      #148f77; 
  --color-seminaire-urci-bg:       #641e16; 
  --color-journee-mystique-bg:     #6e2c00;
  --color-title-activity:          #060270;
  --color-convention-bg:           #47855b;
  --color-rencontre-bg:            #ff8c42; 

  /* Autres couleurs */
  --color-title:                   #565758;
  --color-paragraph:               #717275;
  --color-disabled:                #d3d3d3;
  --color-link:                    #0056b3;
  --color-link-hover:              #003d80;
  --color-button-background:       var(--color-primary);
  --color-button-text:             #ffffff;
  --color-purple-mystic:           #6B1F73;
  --color-golden-symbol:           #C6A961;
  --color-night-blue:              #1F3C73;
  --color-pure-white:              #FFFFFF;
  --color-red:                     #FF0000;
  --color-ivory:                   #f9f0e6;
  --color-dark:                    #000000;
  --p-color:                       #717275; 

  /* Typographie */
  --font-family-body:              'Noto Sans JP', sans-serif;
  --font-family-heading:           'Open Sans', sans-serif;
  
  --h1-font-size:                  4.5rem;
  --h2-font-size:                  2.625rem;
  --h3-font-size:                  2.25rem;
  --h4-font-size:                  2rem;
  --h5-font-size:                  1.5rem;
  --h6-font-size:                  1.375rem;
  --p-font-size:                   1.25rem;
  --copyright-text-font-size:      0.875rem;
  --custom-link-font-size:         0.75rem;

  /* Poids des polices */
  --font-weight-light:             300;
  --font-weight-normal:            400;
  --font-weight-bold:              700;
  --font-weight-black:             900;

  /* Espacements */
  --spacing-small:                 8px;
  --spacing-medium:                16px;
  --spacing-large:                 24px;
  --spacing-xlarge:                32px;
}

/* Box-sizing pour des dimensions cohérentes */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 100%; /* Taille de base 16px */
    line-height: 1.5; /* Pour un espacement des lignes amélioré */
}

body {
    background-color: var(--color-background-grey);
    font-family: var(--font-family-body) ;
    font-size: 1rem; /* Police responsive basée sur la taille de la fenêtre */
    position: relative;
    min-height: 100%; /* Assure que le body occupe toute la fenêtre */
    margin: 0;
    overflow-x: hidden;
}

/* Ajout de transitions sur les éléments interactifs */
a, button {
    transition: color 0.3s ease, background-color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.5px; /* Améliore la lisibilité des titres */
    margin: 0 0 1.5rem;
}

/*---------------------------------------
  TYPOGRAPHY
-----------------------------------------*/

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading), sans-serif; /* Ajout d'une police de secours */
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  line-height: 1.2; /* Conserve une bonne lisibilité */
  margin: 0; /* Ajout pour uniformiser les titres si nécessaire */
}


p, li, a, span {
  font-family: var(--font-family-body);
}

h1, h2 {
  font-weight: var(--font-weight-black);
}

h1 {
  font-size: var(--h1-font-size);
   color: var(--color-purple-mystic);
}

h2 {
  font-size: var(--h2-font-size);
  color: var(--color-night-blue);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5 {
  font-size: var(--h5-font-size);
}

h6 {
  font-size: var(--h6-font-size);
}

p {
  color: var(--color-paragraph);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
  margin: 0 0 1.5rem;
}

.paragraph-indent {
  padding-left: 2rem;  /* Retrait à droite adaptable */
  text-indent: 0;      /* Pas de retrait de première ligne */
  margin-bottom: 1rem; /* Espacement entre les paragraphes */
}

.text-secondary-white-color {
  color: var(--color-text-white-secondary);
}


a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
}

::selection {
  background: var(--color-night-blue);
  color: var(--color-white);
}

.text-purple {
  color: var(--color-purple-mystic);
  font-weight: var(--font-weight-bold);
}

.text-golden {
  color: var(--color-golden-symbol);
  font-weight: var(--font-weight-bold);
}

.text-night-blue {
  color: var(--color-night-blue);
  font-weight: var(--font-weight-bold);
}

.text-red {
  color: var(--color-red);
  font-weight: var(--font-weight-bold);
}

.text-dark {
  color: var(--color-dark);
  font-weight: var(--font-weight-bold);
}


/*---------------------------------------
  ACCUEIL SECTION
-----------------------------------------*/

.accueil {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-accueil);
  background-image: url('https://rose-croix-est.fr/images/accueil/accueil.webp');
  background-size: cover;
  background-position: center;
}

.accueil-reduite {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-accueil);
  background-image: url('https://rose-croix-est.fr/images/accueil/accueil-reduit.webp');
  background-size: cover;
  background-position: center;
}

.accueil-reduite-2 {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-accueil);
  background-image: url('https://rose-croix-est.fr/espace-membre/images/accueil/accueil-membre.webp');
  background-size: cover;
  background-position: center;
}

.accueil-initiation {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-accueil);
  background-image: url('https://rose-croix-est.fr/espace-membre/images/accueil/accueil-initiation.webp');
  background-size: cover;
  background-position: center;
}

.accueil-satie {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-accueil);
  background-image: url('https://rose-croix-est.fr/espace-membre/images/accueil/accueil-satie.webp');
  background-size: cover;
  background-position: center;
}

.accueil-bangert {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-accueil);
  background-image: url('https://rose-croix-est.fr/espace-membre/images/accueil/accueil-bangert.webp');
  background-size: cover;
  background-position: center;
}


.accueil-galilee {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-accueil);
  background-image: url('https://rose-croix-est.fr/espace-membre/images/accueil/accueil-galilee.webp');
  background-size: cover;
  background-position: center;
}

.accueil-frees {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-accueil);
  background-image: url('https://rose-croix-est.fr/espace-membre/images/accueil/accueil-frees.webp');
  background-size: cover;
  background-position: center;
}

.accueil-connaissance {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-accueil);
  background-image: url('https://rose-croix-est.fr/espace-membre/images/accueil/accueil-connaissance.webp');
  background-size: cover;
  background-position: center;
}




.accueilText {
  text-align: center;
  width: 85%;
  z-index: 9;
  color: var(--color-pure-white);
}

.accueilText h1 {
  color: var(--color-accueil);
  margin-bottom: var(--spacing-medium);
}

.contact-info {
  margin-top: var(--spacing-large);
}

.contact-info p {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: var(--color-white);
}

.contact-info i {
  font-size: 1.5rem; /* Taille des icônes */
  margin-right: 10px;
}

.contact-info a {
  color: var(--color-primary); /* Couleur dorée pour les liens */
  text-decoration: none;
}

.contact-info a:hover {
  color: var(--color-primary-hover); /* Lien doré plus foncé au survol */
}


/*---------------------------------------
  OVERLAY FOR SECTIONS
-----------------------------------------*/

.overlay {
  background: rgba(0, 0, 0, 0.5); /* Sombre avec transparence */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  z-index: 1;
}

/*---------------------------------------
  RESPONSIVE STYLES
-----------------------------------------*/

@media (max-width: 768px) {
  :root {
      --h1-font-size: 3rem;
      --h2-font-size: 2.25rem;
      --h3-font-size: 1.875rem;
      --h4-font-size: 1.625rem;
      --h5-font-size: 1.25rem;
      --h6-font-size: 1.125rem;
      --p-font-size: 1rem;
  }

  .accueilText {
    width: 90%;
  }
}


/*---------------------------------------
  CUSTOM LINK               
-----------------------------------------*/

.custom-links {
  max-width: 100%;
  width: 230px;
}

.custom-link {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-block;
  transition: transform .3s cubic-bezier(.645,.045,.355,1), color .3s cubic-bezier(.645,.045,.355,1);
}

.custom-link::after {
  content: "";
  width: 0;
  height: 2px;
  bottom: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  transition: width .4s cubic-bezier(.645,.045,.355,1);
  background: currentColor;
}

.custom-link:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}

.custom-link:hover,
.custom-link:hover::after {
  color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.custom-link:focus, 
.custom-link:active {
  outline: none;
  color: var(--color-primary);
}

.custom-link:focus::after, 
.custom-link:active::after {
  width: 100%;
  left: 0;
  right: auto;
}

.custom-separator {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.5); /* Ligne blanche semi-transparente */
    margin: 8px 0; /* Espacement au-dessus et en dessous */
    width: 100%;
}


b,
strong {
  font-weight: var(--font-weight-bold);
}

/*---------------------------------------
  NAVIGATION               
-----------------------------------------*/

#navbarNav {
  background-color: var(--color-menu-background);
}

.navbar {
  z-index: 9;
  right: 0;
  left: 0;
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
  background-color: var(--color-menu-background);
}

.navbar-brand {
  color: var(--color-golden-symbol);
  font-size: 12px;
  font-weight: var(--font-weight-light);
  text-transform: uppercase; /* Texte en majuscules */
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 10px 20px; /* Espacement interne pour les liens */
  display: block; /* Permet au lien de prendre toute la hauteur de l'élément */
  line-height: 1.5; /* Alignement vertical du texte */
  text-transform: uppercase; /* Texte en majuscules */
  color: var(--color-white);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
  background-color: var(--color-white); /* Fond blanc au survol */
  color: var(--color-dark); /* Texte noir au survol */
  height: 100%; /* Prend toute la hauteur disponible */
}

.navbar-nav .nav-link::after {
  content: "\f140";
  font-family: bootstrap-icons;
  display: inline-block;
  margin-left: 10px;
  color: var(--color-white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
  opacity: 1;
  transform: translateY(0);
  color: var(--color-dark); /* Icône noire au survol */
}

.navbar-nav .nav-item.active .nav-link {
  background-color: var(--color-white); /* Fond blanc pour l'élément actif */
  color: black; /* Texte noir pour l'élément actif */
}

.navbar-toggler {
  border: 0;
  padding: 0;
  cursor: pointer;
  margin: 0;
  width: 30px;
  height: 35px;
  outline: none;
}

.navbar-toggler .navbar-toggler-icon {
  background: var(--color-dark);
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
  transition: background 300ms ease;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  background: var(--color-dark);
  width: 30px;
  height: 2px;
  transition: top 300ms ease, transform 300ms ease;
}

.navbar-toggler .navbar-toggler-icon:before {
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon:after {
  top: 8px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  top: 0;
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  top: 0;
  transform: rotate(-45deg);
}


/*---------------------------------------
  SECTION PRESENTATION
-----------------------------------------*/

#presentation {
  padding: 60px 0;
  background-color: var(--color-background-presentation);
}

.presentation-image {
  max-height: 180px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


#presentation h2 {
  color: var(--color-presentation);
  font-weight: var(--font-weight-bold);
  text-align: center;
  font-size: 2.5rem; /* Taille du titre */
  margin-bottom: var(--spacing-large); /* Espace sous le titre */
}

#presentation p {
  color: var(--color-paragraph);; /* Couleur des paragraphes */
  font-size: 1.125rem; /* Taille légèrement agrandie pour meilleure lisibilité */
  line-height: 1.75; /* Espacement entre les lignes pour lisibilité */
}

#presentation a.text-primary {
  color: var(--color-purple-mystic); /* Couleur du lien */
  text-decoration: none; /* Pas de soulignement par défaut */
  font-weight: var(--font-weight-bold); /* Lien en gras */
  text-decoration: underline;
}

#presentation a.text-primary:hover {
  color: var(--color-golden-symbol); /* Lien survolé avec couleur dorée */
  text-decoration: underline;
}

#presentation .img-fluid {
  border-radius: 10px; /* Bords légèrement arrondis pour une touche élégante */
  transition: transform 0.3s ease-in-out; /* Effet de zoom au survol */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#presentation .img-fluid:hover {
  transform: scale(1.05); /* Zoom léger lors du survol */
  transition: transform 0.3s ease-in-out;
}

/* Texte à droite et gauche */
#presentation .col-lg-6 {
  margin-bottom: 30px; /* Espace entre les colonnes */
}

/* Image en fin de section */
#presentation .text-center img {
  max-width: 100%;
  height: auto; /* Image responsive */
  margin-top: 40px; /* Espace entre le texte et l'image */
  border-radius: 8px; /* Légère arrondie pour l'image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
}

@media (max-width: 768px) {
  #presentation h2 {
    font-size: 2rem; /* Taille réduite du titre sur petits écrans */
  }

  #presentation p {
    font-size: 1rem; /* Taille de texte réduite sur petits écrans */
  }

  #presentation .text-center img {
    margin-top: 20px;
  }

  .presentation-image {
      width: 100%; /* L'image prend toute la largeur sur les petits écrans */
      max-width: none; /* Supprime la largeur maximale */
      margin-top: 20px; /* Espace entre l'image et le contenu */
  }
}

/*---------------------------------------
  SECTION ACTIVITE
-----------------------------------------*/

#activites-publiques {
  padding: 60px 0;
  background-color: var(--color-background-activite);
}

#activites-publiques h2 {
  color: var(--color-activites);
  font-weight: var(--font-weight-bold);
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 20px;
}

.activity-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#carouselActivites {
    position: relative;
}

#carouselActivites .carousel-control-prev,
#carouselActivites .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(50, 150, 136, 0.6); /* Vert-bleu avec 60% d’opacité */
    border-radius: 50%;
    width: 48px;
    height: 48px;
    z-index: 10;
    opacity: 1;
    transition: background-color 0.3s;
}

#carouselActivites .carousel-control-prev:hover,
#carouselActivites .carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

#carouselActivites .carousel-control-prev {
    left: 10px;
}

#carouselActivites .carousel-control-next {
    right: 10px;
}

/* Cache les flèches sur petits écrans */
@media (max-width: 768px) {
    #carouselActivites .carousel-control-prev,
    #carouselActivites .carousel-control-next {
        display: none;
    }
}


.activity-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.fixed-image .activity-image {
  position: relative;
  height: 220px; /* Hauteur fixe de l'image */
  overflow: hidden;
}

.fixed-image .activity-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.activity-content {
  padding: 5px;
  background-color: var(--color-background-light);
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px; /* Définit une hauteur minimale pour uniformiser */
}

@media (max-width: 768px) {
  .activity-content {
    min-height: 250px; /* Ajuste la hauteur sur les écrans plus petits */
  }
}

.activity-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-title-activity);
}

.activity-rencontre {
  background-color: var(--color-rencontre-bg);
}

.activity-conference-amorc {
  background-color: var(--color-conference-amorc-bg);
}

.activity-conference-urci {
  background-color: var(--color-conference-urci-bg);
}

.activity-seminaire-urci {
  background-color: var(--color-seminaire-urci-bg);
}

.activity-seminaire-amorc {
  background-color: var(--color-seminaire-amorc-bg);
}

.activity-journee-mystique {
  background-color: var(--color-journee-mystique-bg);
}

.convention {
  background-color: var(--color-convention-bg);
}
.activite-membre {
  background-color: var(--color-background-activite-membre);
}

.activite-convention {
  background-color: var(--color-background-convention);
}

.activite-album {
  background-color: var(--color-background-album);
}


.news-category {
  margin-bottom: 5px;
  display: inline-block;
  text-transform: uppercase;
}

.activity-content p {
  margin-bottom: 2px;
}

.btn-primary {
  background-color: var(--color-purple-mystic);
  border: none;
  color: var(--color-pure-white);
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-golden-symbol);
}

/* Responsive Design */
@media (max-width: 768px) {
  .fixed-image .activity-image {
    height: 180px; /* Ajuste la hauteur de l'image sur petits écrans */
  }
}

/*---------------------------------------
  SECTION ACTIVITE DETAIL
-----------------------------------------*/

#activite-detail {
    padding: 60px 0;
    background-color: var(--color-background-activite);
}

#activite-detail h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--color-purple-mystic);
    margin-bottom: 10px;
    text-align: center;
}

.search-activity-field {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.activity-item.hidden {
    display: none !important;
}

/* Section d'informations générales de l'activité */
.activity-info {
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 8px;
    background-color: #f0f8ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.activity-info h3 {
    font-size: 1.5rem;
    color: var(--color-purple-mystic);
    margin-bottom: 10px;
}

.activity-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-details-list li {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: var(--color-paragraph);
}

.activity-details-list i {
    margin-right: 8px;
    color: var(--color-golden-symbol);
    font-size: 1.2rem;
}

/* Description de l'activité */
.activity-description {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-top: 10px;
    padding: 10px;
    background-color: #fff5e1;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    white-space: pre-wrap; /* Pour conserver les sauts de ligne */
    color: var(--color-paragraph);
}

/* Carte Google Maps */
.map-container {
    position: relative;
    margin-bottom: 30px;
}

.map-container iframe {
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 8px;
}

.map-address {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--color-dark);
}

.similar-activity {
  background-color: var(--color-background-light, #f9f9f9); /* Couleur de fond douce */
  border: 1px solid var(--color-border-light, #ddd); /* Bordure légère */
  border-radius: 8px; /* Coins arrondis */
  padding: 15px; /* Espacement intérieur */
  margin-bottom: 15px; /* Espacement entre les cartes */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Légère ombre pour donner de la profondeur */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Effet de survol */
}

.similar-activity:hover {
  transform: translateY(-5px); /* Légère élévation au survol */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre plus marquée au survol */
}

.similar-title {
  font-size: 1.25rem; /* Taille de police légèrement augmentée */
  font-weight: bold; /* Titre en gras */
  color: var(--color-primary, #333); /* Couleur principale */
  margin-bottom: 10px; /* Espacement sous le titre */
}

.similar-activity p {
  font-size: 0.95rem; /* Taille de texte adaptée */
  color: var(--color-secondary, #555); /* Couleur secondaire */
  margin-bottom: 10px; /* Espacement sous les paragraphes */
}

.similar-activity .btn {
  background-color: var(--color-button-bg, #007bff); /* Couleur de fond du bouton */
  color: var(--color-button-text, #fff); /* Couleur du texte du bouton */
  border: none; /* Pas de bordure pour le bouton */
  padding: 8px 12px; /* Taille du bouton */
  font-size: 0.9rem; /* Taille du texte dans le bouton */
  border-radius: 4px; /* Coins légèrement arrondis */
  transition: background-color 0.2s ease, transform 0.2s ease; /* Transition fluide */
}

.similar-activity .btn:hover {
  background-color: var(--color-button-hover, #0056b3); /* Couleur de fond au survol */
  transform: scale(1.05); /* Légère augmentation de taille au survol */
}

.similar-activity form {
  margin: 0; /* Éviter les marges par défaut */
}


.activity-contact {
    margin-top: 20px;
    padding: 20px;
    background-color: var(--color-background-contact);
    border: 1px solid var(--color-golden-symbol);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.activity-contact h3 {
    font-size: 1.5rem;
    color: var(--color-purple-mystic);
    margin-bottom: 15px;
}

.activity-contact p {
    font-size: 1.125rem;
    color: var(--color-paragraph);
}

.activity-contact a {
    color: var(--color-link);
    text-decoration: none;
    font-weight: bold;
}

.activity-contact a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* Bouton de retour */
.back-link {
    display: inline-block;
    color: var(--color-link);
    font-size: 1.125rem;
    text-decoration: none;
    margin-top: 20px;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.back-link:hover {
    color: var(--color-pure-white);
    background-color: var(--color-purple-mystic);
}

/* Responsive Design */
@media (max-width: 768px) {
    #activite-detail h1 {
        font-size: 2rem;
    }

    .activity-info,
    .activity-description,
    .activity-contact {
        padding: 15px;
        font-size: 1rem;
    }

    .activity-contact h3,
    .activity-info h3 {
        font-size: 1.3rem;
    }

    .activity-details-list li {
        font-size: 1rem;
    }

    .back-link {
        font-size: 1rem;
    }
}


/*---------------------------------------
  SECTION TEXTE DU MOIS
-----------------------------------------*/

#texte-du-mois {
  background-color: var(--color-background-texte-du-mois);
  padding: 60px 0;
}

#texte-du-mois h2 {
  color: var(--color-texte-du-mois);
  font-weight: var(--font-weight-bold);
  font-size: 2.5rem;
}

#texte-du-mois p {
  color: var(--p-color);
  font-size: 1.125rem; /* Taille de texte légèrement agrandie */
  line-height: 1.75; /* Espacement des lignes pour plus de lisibilité */
}

.blockquote {
  padding: 20px;
  background-color: var(--color-background-dark); /* Fond sombre pour la citation */
  border-left: 5px solid var(--color-golden-symbol); /* Bordure dorée à gauche */
  font-size: 1.25rem;
  color: var(--color-pure-white); /* Texte blanc pour la citation */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre */
}

.blockquote-footer {
  margin-top: 10px;
  color: var(--color-golden-symbol); /* Texte du footer en doré */
}

#texte-du-mois blockquote p {
  margin-bottom: 10px;
  font-style: italic; /* Italique pour la citation */
}

/* Style de l'image illustrative */
.img-texte-du-mois {
  max-height: 80vh; /* La hauteur max égale à 100% de la hauteur de la fenêtre */
  width: auto;
  border-radius: 10px; /* Bords arrondis pour l'image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre pour l'image */
}
#texte-du-mois img {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease-in-out;
}

#texte-du-mois img:hover {
    transform: scale(1.05);
}

.image-caption {
  font-size: 1rem;
  color: var(--p-color);
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
  #texte-du-mois h2 {
    font-size: 2rem;
  }

  #texte-du-mois p {
    font-size: 1rem;
  }

  .blockquote {
    font-size: 1.125rem;
  }

  .img-texte-du-mois {
    width: 100%;
  }
}

/*---------------------------------------
  SECTION MEDIAS ET VIDEOS
-----------------------------------------*/

#medias-videos {
  padding: 30px 0;
  background-color: var(--color-background-medias);
}

#medias-videos .row {
    display: flex;
    flex-wrap: wrap;
}

#medias-videos .col-lg-9 {
    padding-right: 1rem;
    border-right: 1px solid #ddd; /* Séparation visuelle entre les colonnes */
}

#medias-videos .col-lg-3 {
    padding-left: 1rem;
}

.media-category {
    font-size: 0.875rem;
    color: #6c757d;
}

#medias-videos h2 {
  color: var(--color-medias-videos);
  font-weight: var(--font-weight-bold);
  font-size: 2.5rem;
}

.media-item {
  text-align: center;
}

.media-item {
  display: block;
  transition: box-shadow 0.4s ease;
}

/* Masquer proprement */
.media-item.hidden {
  display: none !important;
}

.media-item.highlight {
  box-shadow: 0 0 15px var(--color-golden-symbol);
  border-radius: 8px;
}


.media-item img {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.media-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.media-title {
  color: var(--color-purple-mystic); /* Titre des vidéos et des revues */
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  margin-top: 15px;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16:9 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.swiper-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 2rem 0;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  flex-shrink: 0;
  width: auto;
  text-align: center;
}

.swiper-button-next,
.swiper-button-prev {
  color: #6B1F73;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  z-index: 10;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #C6A961;
}

.swiper-pagination-bullet {
  background-color: #ccc;
  opacity: 0.6;
}

.swiper-pagination-bullet-active {
  background-color: #6B1F73;
  opacity: 1;
}

.swiper-button-next::after {
  content: '➤'; /* flèche droite */
}

.swiper-button-prev::after {
  content: '⬅'; /* flèche gauche */
}


#searchInput {
  max-width: 500px;
  padding: 12px 20px;
  border: 2px solid var(--color-medias-videos);
  border-radius: 8px;
  font-size: 1.1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: border-color 0.3s ease;
}

#clearSearchBtn {
  padding: 0.25rem 0.6rem;
  font-size: 1.2rem;
  border-radius: 50%;
  color: var(--bs-dark);
  background-color: rgba(255,255,255,0.9);
  border: 1px solid #ccc;
}


#searchInput:focus {
  border-color: var(--color-purple-mystic);
  outline: none;
}
#search-count {
    font-size: 1rem;
    color: var(--color-paragraph);
}

.search-activity-field {
    max-width: 500px;
     width: auto; 
}


/* Responsive design */
@media (max-width: 768px) {
  #medias-videos h2 {
    font-size: 2rem;
  }

  .media-item {
    margin-bottom: 30px;
  }
}

@media (min-width: 768px) {
  .search-activity-field {
    min-width: 300px;
  }
}

form.position-relative a.btn-light {
  z-index: 2;
  padding: 0.25rem 0.6rem;
  font-size: 1.2rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
}


/*---------------------------------------
  SECTION LIENS
-----------------------------------------*/

#liens {
  padding: 30px 0;
  background-color: var(--color-background-liens);
}

#liens h2 {
  color: var(--color-liens);
  font-weight: var(--font-weight-bold);
  font-size: 2.5rem;
}

.link-item {
  text-align: center;
}

.link-item a {
  display: inline-block;
}

.link-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère autour des images */
  transition: transform 0.3s ease;
}

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

.link-title {
  color: var(--color-purple-mystic);
  font-size: 1.25rem;
  margin-top: 15px;
}

/* Responsive design */
@media (max-width: 768px) {
  #liens h2 {
    font-size: 2rem;
  }

  .link-item {
    margin-bottom: 30px;
  }
}

/*---------------------------------------
  SECTION CONTACT
-----------------------------------------*/

.contact {
  padding: 60px 0;
  background-color: var(--color-background-contact);
}

.contact h2 {
  color: var( --color-contact);
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
}

.contact p {
  font-size: 1.125rem;
  line-height: 1.75;
  margin-bottom: 20px;
  color: var(--p-color);
}

.contact-form .form-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-dark); /* Couleur du label */
}

.contact-form input,
.contact-form textarea {
  border: 1px solid var(--color-grey);
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 1rem;
  width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-purple-mystic);
  outline: none;
}

.contact-form button {
  background-color: var(--color-purple-mystic);
  border: none;
  color: var(--color-pure-white);
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: var(--color-golden-symbol);
}

.modal.modal-message {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background-color: rgba(255, 255, 255, 0.9);
}

#success-modal {
    background-color: #dff0d8; /* Couleur de fond pour le succès */
}

#commentaire {
    font-size: 1.2rem;
    text-align: center;
    color: #3c763d; /* Couleur du texte de succès */
    padding: 20px;
}

input#honeypot,
div[style="display: none;"] {
    display: none !important; /* Masque complètement */
    visibility: hidden !important; /* Rend invisible */
    height: 0; /* Empêche tout espace supplémentaire */
    width: 0; /* Empêche tout espace supplémentaire */
    position: absolute; /* Retire du flux normal */
}

/*---------------------------------------
  SECTION MEMBER ACCUEIL
-----------------------------------------*/
#member_accueil {
    padding: 20px;
    text-align: center;
    background-color: #fffaf0; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre pour un effet de relief */
    color: #555; /* Couleur de police gris doux */
    font-size: 16px; /* Taille de police adaptée pour la lisibilité */
    line-height: 1.6; /* Espacement pour améliorer la lisibilité */
}

/* Effet au survol pour plus d'interactivité */
#member_accueil:hover {
    background-color: #ececec; /* Fond légèrement plus sombre au survol */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée */
}

#member_accueil h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

#accueil_initiation {
    padding: 20px;
    text-align: center;
    background-color: #fff8e5; /* Fond doux beige clair */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre pour un effet de relief */
    color: #555; /* Texte gris doux pour un bon contraste */
    font-size: 16px; /* Taille de police adaptée pour une meilleure lisibilité */
    line-height: 1.6; /* Espacement des lignes amélioré pour un confort visuel */
}

/* Style pour les titres à l'intérieur */
#accueil_initiation h2 {
    color: #6b1f73; /* Violet doux pour les titres */
    margin-bottom: 15px; /* Espacement en dessous du titre */
    font-size: 24px;
    font-weight: 700; /* Titre en gras */
}

/* Effet au survol */
#accueil_initiation:hover {
    background-color: #fef3d8; /* Couleur de fond légèrement plus sombre */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Accentuation de l'ombre */
}

/* Boutons à l'intérieur */
#accueil_initiation .button-container button {
    background-color: #6b1f73; /* Violet doux pour les boutons */
    color: #fff; /* Texte blanc */
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#accueil_initiation .button-container button:hover {
    background-color: #591460; /* Violet légèrement plus foncé au survol */
}

#seminaire_accueil {
    background-color: var(--color-background-light);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    color: var(--color-paragraph);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

#seminaire_accueil strong {
    color: var(--color-purple-mystic); /* Met en valeur les éléments importants */
    font-weight: bold;
}

#seminaire_accueil p {
  margin: 0;
}

#seminaire_accueil:hover {
    background-color: var(--color-background-grey); /* Effet au survol */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Accentuation de l'ombre */
}


.button-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacement entre les boutons */
    align-items: center;
}

.button-organisme {
    width: 100%;
    padding: 10px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    background-color: indigo;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button-organisme:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    background-color: white;
    color: indigo;
    border: 2px solid indigo;
}

@media (max-width: 992px) {
    .col-lg-9, .col-lg-3 {
        margin-bottom: 20px;
    }
}

/* Couleurs douces pour chaque organisme */
.organisme1 {
    background-color: #87CEFA; /* Bleu clair */
}

.organisme2 {
    background-color: #FF7F7F; /* Rouge clair */
}

.organisme3 {
    background-color: #90EE90; /* Vert clair */
}

.organisme4 {
    background-color: #FFA07A; /* Orange clair */
}

.organisme5 {
    background-color: #DDA0DD; /* Violet clair */
}


.warning-message {
    color: #d9534f;
    font-weight: bold;
}

.warning-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px;
}

.warning-list li {
    margin-bottom: 10px;
}

.calendrier-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.month-container {
    border-radius: 8px;
    background-color: #f9f9f9;
    padding: 15px;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.month-container h3 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.5em;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .month-container {
        max-width: 90%;
    }
}

@media (max-width: 576px) {
    .month-container {
        max-width: 100%;
        padding: 10px;
    }
}


.date-header {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    text-transform: capitalize; /* Assure la majuscule pour la première lettre */
}


.events-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-item {
    background-color: #ffffff;
    padding: 10px;
    border-left: 3px solid #333;
    margin-bottom: 10px;
}

/* Degré */
.event-degree-initiation {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}
/* Heure */
.event-time-initiation {
    font-size: 1rem;
    font-weight: bold;
    color: #555;
}

/* Élément individuel */
.event-item-initiation {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.initiations-container {
    padding: 20px;
    border-radius: 10px;
}


.vacances-message {
    text-align: center;
    font-weight: bold;
    color: #FF4500;
}

.organisme_info {
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #f4f4f4;
    margin-bottom: 20px;
}

#organisme_info {
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    font-family: var(--font-family-body);
    line-height: 1.6;
}

#organisme_info h6 {
    font-size: 1.5rem;
    color: var(--color-purple-mystic);
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
}

#organisme_info p {
    font-size: 1.125rem;
    color: var(--color-paragraph);
    margin-bottom: 10px;
}

#organisme_info a {
    color: var(--color-link);
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.3s ease;
}

#organisme_info a:hover {
    color: var(--color-link-hover);
}

@media (max-width: 768px) {
    #organisme_info {
        padding: 15px;
    }

    #organisme_info h6 {
        font-size: 1.25rem;
    }

    #organisme_info p {
        font-size: 1rem;
    }
}

.organisme-details {
    padding: 20px;
    border: 2px solid var(--color-purple-mystic);
    border-radius: 8px;
    background-color: var(--color-background-light);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.organisme-title {
    font-size: var(--h2-font-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-purple-mystic);
    margin-bottom: 15px;
}




/* Responsive design */
@media (max-width: 768px) {
  .contact h2 {
    font-size: 2rem;
  }

  .contact p {
    font-size: 1rem;
  }
}


/*---------------------------------------
  SECTION               
-----------------------------------------*/
.section-padding {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

/*---------------------------------------
  FOOTER SECTION
-----------------------------------------*/

.site-footer {
  padding: 50px 0;
  background-color: var(--color-background-dark); /* Fond sombre */
  color: var(--color-pure-white);
  text-align: center;
  border-top: 3px solid var(--color-golden-symbol); /* Ligne dorée en haut du footer */
}
.site-footer .col-12 {
    text-align: center;
    margin-bottom: 15px;
}

.site-footer h5 {
  font-size: 1.75rem; /* Légère augmentation de la taille du titre */
  font-weight: bold;
  color: var(--color-pure-white);
  margin-bottom: 20px; /* Espacement sous le titre */
}

.site-footer .custom-link {
  color: var(--color-golden-symbol); /* Mentions légales en doré */
  text-decoration: none;
  font-size: 1.125rem; /* Taille de texte légèrement agrandie */
  font-weight: 500;
}

.site-footer .custom-link:hover {
  text-decoration: underline;
  color: var(--color-pure-white); /* Changement de couleur au survol */
}

/* Copyright */
.copyright-text {
  color: var(--color-grey); /* Couleur plus douce pour le copyright */
  font-size: 1rem;
  margin-top: 20px;
  margin-bottom: 0;
  font-style: italic; /* Style en italique pour différencier */
  text-align: center;
}


/* Responsive Design */
@media (max-width: 768px) {
  .site-footer {
    text-align: center;
    padding: 30px 0; /* Réduction du padding sur mobile */
  }

  .social-icon {
    margin-top: 20px;
  }
}


/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
.social-icon {
  padding: 0;
  list-style: none;
}

.social-icon li {
  display: inline-block;
  margin: 0 15px; /* Espacement augmenté pour plus d'air */
}

.social-icon a {
  font-size: 1.75rem; /* Icônes légèrement agrandies */
  color: var(--color-pure-white);
  transition: color 0.3s ease, transform 0.3s ease; /* Transition et effet de zoom */
}

.social-icon a:hover {
  color: var(--color-golden-symbol); /* Icônes en doré au survol */
  transform: scale(1.2); /* Léger zoom au survol */
}

/*---------------------------------------
  ADDITIONAL FOOTER STYLES
-----------------------------------------*/

.site-footer .container {
  max-width: 1140px; /* Limite la largeur du contenu */
}

.site-footer .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.site-footer p,
.site-footer h5 {
  margin-bottom: 0;
}

.site-footer .social-icon {
    display: flex;
    justify-content: center;
    padding: 0;
    list-style: none;
}

.site-footer .social-icon li {
    margin: 0 10px;
}

/*---------------------------------------
  RESPONSIVE STYLES
-----------------------------------------*/

/* Pour les écrans larges */
@media screen and (min-width: 1600px) {
  .news-two-column {
    min-height: 232.5px;
  }

  h1 {
    font-size: 80px;
  }

  h2 {
    font-size: 64px;
  }

  h3 {
    font-size: 48px;
  }

  h4 {
    font-size: 40px;
  }

  .container {
    max-width: 1400px; /* Ajuste la largeur du container pour les grands écrans */
  }
}

/* Pour les écrans de taille moyenne (tablettes et ordinateurs portables) */
@media screen and (max-width: 991px) {
  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .team-thumb {
    left: 0;
    width: auto;
  }

  .news-two-column {
    height: auto !important;
    min-height: inherit;
  }

  .news .col-12 .news-two-column:first-child {
    margin-bottom: 38px;
  }
}

/* Pour les écrans de taille plus petite (mobiles) */
@media screen and (max-width: 767px) {
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 26px;
  }

  h4 {
    font-size: 22px;
  }

  .news-detail-title {
    font-size: 28px;
  }

  .section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .navbar {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* Très petits écrans (360px et en dessous) */
@media screen and (max-width: 360px) {
  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 26px;
  }

  .heroText p {
    font-size: 14px;
  }

  .section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Pour les écrans extrêmement petits */
@media screen and (max-width: 359px) {
  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 24px;
  }

  .news-detail-title {
    font-size: 22px;
  }

  .heroText p {
    font-size: 12px;
  }
}

/*---------------------------------------
  SECTION COOKIE BANNIERE
-----------------------------------------*/

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    z-index: 1000;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
}

.cookie-banner p {
    margin: 0 0 15px;
    font-size: 14px;
    color: #ffffff;
}

.cookie-link {
    color: #f4b400;
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.cookie-btn {
    padding: 10px 15px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.cookie-btn:hover {
    opacity: 0.9;
}

.cookie-btn:focus {
    outline: none;
}

.cookie-btn:first-child {
    background-color: #6B1F73;
    color: #fff;
}

.cookie-btn-decline {
    background-color: #ccc;
    color: #333;
}

.cookie-btn-decline:hover {
    background-color: #bbb;
}

.cookie-btn-customize {
    background-color: #f4b400;
    color: #fff;
}

.cookie-btn-customize:hover {
    background-color: #d39b00;
}

.cookie-banner ul {
    list-style: none;
    padding-left: 0; /* supprime l’indentation par défaut */
    margin: 0;
}

.cookie-banner li {
    margin-bottom: 8px; /* optionnel : espace entre les éléments */
}

.cookie-banner li::before {
    content: "•";
    color: var(--color-primary-hover); /* ou une autre couleur adaptée */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.cookie-toggle {
    position: fixed;
    bottom: -25px; /* Pour ne montrer que la partie supérieure */
    right: 20px;
    width: auto;
    padding: 10px 20px;
    background-color: #eeeeee;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
    font-size: 14px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    z-index: 9999;
    transition: bottom 0.3s ease;
}

/* Affiche le bouton entier au survol */
.cookie-toggle:hover {
    bottom: 0;
}

/* Pour le texte "GÉRER LE CONSENTEMENT" */
.cookie-tooltip {
    white-space: nowrap;
}


/*---------------------------------------
  MODALE COOKIE
-----------------------------------------*/

.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(2px); /* Optionnel mais élégant */
}

.cookie-modal.show {
    opacity: 1;
    visibility: visible;
}

.cookie-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(30px);
    transition: transform 0.3s ease;
}

.cookie-modal.show .cookie-modal-content {
    transform: translateY(0);
}

.cookie-modal h3 {
    margin-bottom: 15px;
    color: #6B1F73;
}

.cookie-modal p {
    margin-bottom: 20px;
    font-size: 14px;
    color: #333;
}

.cookie-modal label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}

.cookie-modal button {
    margin-top: 15px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cookie-modal-save {
    background-color: #6B1F73;
    color: #fff;
}

.cookie-modal-save:hover {
    background-color: #5A175E;
}

.cookie-modal-cancel {
    background-color: #ccc;
    color: #333;
    margin-left: 10px;
}

.cookie-modal-cancel:hover {
    background-color: #bbb;
}


/*---------------------------------------
  SECTION CONNEXION
-----------------------------------------*/
.section-connexion {
    padding: 30px 0;
    background-color: #fffec2;
}

.section-connexion .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

.section-connexion .content {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}

.section-connexion .welcome-message {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff; /* Bleu pour un accueil chaleureux */
    margin-bottom: 15px;
}

.section-connexion .connection-status {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.connection-status {
    display: block; /* plus fiable ici */
    justify-content: center;
    align-items: flex-end; /* important pour alignement bas */
    height: auto;
}

.connection-status .status-box {
    width: 100%;
    padding: 20px;
    background-color: #fdfdfd;
    border: 2px solid #6B1F73;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px;
}

.connection-status .status-box p {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #555;
}

.connection-status .status-box strong {
    color: #000;
    font-weight: 700;
}

.connection-status .btn-logout {
    margin-top: 10px;
    display: inline-block;
    padding: 8px 14px;
    font-size: 0.9rem;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.connection-status .btn-logout:hover {
    background-color: #0056b3;
}



/* Style principal de l'en-tête */
.header {
    background-color: var(--color-background-light, #f9f9f9); /* Couleur de fond douce */
    padding: 20px 15px; /* Espacement interne */
    border-bottom: 2px solid var(--color-primary, #ffc107); /* Ligne décorative */
    text-align: center; /* Centrage du contenu */
    border-radius: 8px; /* Coins légèrement arrondis */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre */
}

/* Titre principal dans l'en-tête */
.header h2 {
    font-size: 1rem; /* Taille du texte */
    font-weight: bold; /* Texte en gras */
    color: var(--color-primary-hover, #e6ac00); /* Couleur du titre */
    margin: 0; /* Supprime les marges par défaut */
    text-transform: uppercase; /* Met le texte en majuscules */
    letter-spacing: 1.5px; /* Espacement des lettres */
}

/* Sous-titre optionnel */
.header p {
    font-size: 1rem; /* Taille du texte */
    color: var(--color-paragraph, #717275); /* Couleur douce pour le texte */
    margin-top: 8px; /* Espace entre le titre et le sous-titre */
}

/* Adaptabilité pour les petits écrans */
@media (max-width: 768px) {
    .header {
        padding: 15px 10px; /* Réduction des espacements */
    }

    .header h2 {
        font-size: 1.75rem; /* Taille réduite du titre */
    }

    .header p {
        font-size: 0.9rem; /* Taille réduite du sous-titre */
    }
}


.conventions-container {
    padding: 20px;
    background-color: var(--color-background-light);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.convention-item {
    border: 1px solid var(--color-border-light, #ddd);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-white);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.convention-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.convention-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-convention-bg);
    margin-bottom: 10px;
}

.card-header img {
    object-fit: cover;
    width: 100%;
    height: 200px;
    border-bottom: 2px solid var(--color-convention-bg);
}

.card-body {
    padding: 15px;
}

.card-text {
    font-size: 1rem;
    line-height: 1.6;
}

.text-muted {
    font-size: 1rem;
    font-style: italic;
    color: var(--color-disabled);
}

@media (max-width: 768px) {
    .conventions-container {
        padding: 10px; /* Réduction des marges internes */
    }

    .convention-item {
        margin-bottom: 20px; /* Espacement réduit entre les cartes */
        border-radius: 5px; /* Coins légèrement arrondis */
        box-shadow: none; /* Supprime l'ombre pour un affichage plus plat */
    }

    .card-header img {
        height: 150px; /* Taille d'image réduite */
    }

    .card-body {
        padding: 10px; /* Espacement interne réduit */
    }

    .convention-title {
        font-size: 1.2rem; /* Réduction de la taille des titres */
        text-align: center; /* Centrage pour un meilleur rendu */
    }

    .card-text {
        font-size: 0.9rem; /* Texte légèrement plus petit */
        line-height: 1.4; /* Réduction de l'espacement entre les lignes */
    }

    .text-muted {
        font-size: 0.85rem; /* Texte réduit pour plus de lisibilité */
        text-align: center; /* Centrage pour uniformité */
    }
}

/* Styles spécifiques pour les albums */
#albums {
    background-color: var(--color-background-medias); /* fond doux */
    padding-top: 60px;
    padding-bottom: 30px;
}

#albums h3 {
    color: var(--color-medias-videos); /* bleu acier */
    font-weight: var(--font-weight-bold);
    font-size: var(--h3-font-size);
    text-align: center;
    margin-bottom: var(--spacing-large);
}
.album-card {
    background-color: var(--color-background-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.album-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.album-card-img-top {
    height: 200px;
    object-fit: cover;
    width: 100%;
    border-bottom: 1px solid var(--color-disabled);
}

.album-card-body {
    padding: 20px;
    background-color: var(--color-white);
}

.album-card-title {
    color: var(--color-purple-mystic);
    font-size: var(--h5-font-size);
    font-weight: var(--font-weight-bold);
}

.album-card-text {
    color: var(--color-paragraph);
    font-size: 0.95rem;
}

#album-detail .carousel-inner img {
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
}

#album-detail .carousel-caption {
    background-color: rgba(255, 255, 255, 0.8); /* Fond clair */
    color: #000; /* Texte noir */
    padding: 15px;
    border-radius: 10px;
    font-size: 1rem;
    text-shadow: none;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
    border-radius: 50%; /* Icône arrondie */
    width: 50px;
    height: 50px;
    background-size: 20px 20px; /* Ajuste la taille de l'icône */
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Fond plus sombre au survol */
}

.carousel-control-prev,
.carousel-control-next {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

#album-detail h2 {
    font-size: 2rem;
    color: #222; /* Couleur plus foncée */
    margin-bottom: 20px;
}

#album-detail p {
    font-size: 1.1rem;
    color: #444; /* Couleur plus foncée */
}
.organisme-card {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.organisme-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
#section-pratique-organismes {
    background-color: var(--color-background-activite); /* Ou une couleur douce */
    padding: 60px 0;
    border-radius: 8px; /* Optionnel pour des bords arrondis */
}

#lien-organisme {
  padding: 20px;
  background-color: var(--color-background-lien-organisme);
}

.carte-espace-membre {
    background-color: #ffffff;
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 260px;
}

.carte-espace-membre:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.carte-espace-membre h4 {
    font-size: 1.5rem;
    color: var(--color-purple-mystic);
    margin-bottom: 10px;
}

.btn-espace {
    background-color: var(--color-purple-mystic);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    font-weight: bold;
}

.btn-espace:hover {
    background-color: var(--color-golden-symbol);
    color: #fff;
}


#lien-initiation {
  padding: 20px;
  background-color: var(--color-background-lien-initiation);
}

#activite-membre {
  padding: 20px;
  background-color: var(--color-background-activite-membre);
}

#convention {
  padding: 20px;
  background-color: var(--color-background-convention);
}

#album {
  padding: 20px;
  background-color: var(--color-background-album);
}

#omt {
  padding: 20px;
  background-color: var(--color-background-omt);     
}


#visite-officiel {
  padding: 20px;
  background-color: var(--color-background-visite-officiel);
}

#informations {
  padding: 20px;
  background-color: var(--color-background-informations);
}


.brochure-list {
    list-style-type: none; /* Supprime les puces */
    padding-left: 0; /* Supprime l'indentation */
}

.brochure-list {
    list-style-type: none; /* Supprime les puces */
    padding-left: 0; /* Supprime l'indentation */
}

.brochure-list li {
    padding: 10px 0; /* Ajoute un espacement vertical */
    border-bottom: 2px solid var(--color-golden-symbol); /* Ligne de séparation dorée */
}

.brochure-list li:last-child {
    border-bottom: none; /* Supprime la ligne sous le dernier élément */
}

#liens-regionaux {
    padding: 50px 0;
    background-color: var(--color-background-liens-regionaux);
    text-align: center;
}

#liens-regionaux h2 {
    color: var(--color-liens-regionaux);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.region-links {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0; /* Supprime l'espace entre les éléments pour que les bordures servent de séparation */
}

.region-links li {
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #f0f0f0; /* Fond gris */
    text-align: center;
    padding: 15px; /* Ajoute du padding pour uniformiser la hauteur */
    border-bottom: 1px solid #ccc; /* Ligne de séparation */
    width: 100%; /* Assure une même longueur */
}

.region-links li:last-child {
    border-bottom: none; /* Supprime la ligne sous le dernier élément */
}

.region-links a {
    text-decoration: none;
    color: var(--color-link);
    transition: color 0.3s ease, transform 0.3s ease;
    display: block; /* Permet de remplir toute la zone de fond gris */
    width: 100%; /* Assure la même largeur */
    height: 100%; /* Assure la même hauteur */
}

.region-links a:hover {
    color: var(--color-link-hover);
    transform: scale(1.05);
}


.scroll-to-top {
    position: fixed;
    bottom: 100px; /* Ajuste la position au-dessus du CAPTCHA */
    right: 20px; /* Position à droite */
    width: 50px;
    height: 50px;
    background-color: var(--color-night-blue, #1F3C73); /* Bleu nuit */
    color: var(--color-white, #FFFFFF); /* Icône en blanc */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; /* Taille de l'icône */
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
    border: 2px solid var(--color-white, #FFFFFF); /* Bordure blanche */
    z-index: 1000; /* Pour qu'elle soit au-dessus */
}

.scroll-to-top:hover {
    background-color: var(--color-link-hover, #003d80); /* Bleu plus foncé au survol */
}

.scroll-to-top.show {
    opacity: 1;
}

/* Styles pour le menu du footer */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.footer-menu li {
    margin-bottom: 8px;
}

.footer-menu a {
    color: var(--color-golden-symbol);
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.footer-menu a:hover {
    color: var(--color-pure-white);
    text-decoration: underline;
}

.footer-copyright {
    background-color: #1e1e1e; /* Fond sombre chic */
    color: #ccc; /* Texte gris clair */
    padding: 20px 0;
    font-size: 0.95rem;
    border-top: 1px solid #333;
    position: relative;
}

.footer-copyright .copyright-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
}

.footer-copyright .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-copyright img {
    filter: grayscale(100%) brightness(1.2); /* Style discret du logo */
    transition: transform 0.3s;
}

.footer-copyright img:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .footer-copyright .container {
        flex-direction: column;
        text-align: center;
    }

    .footer-copyright img {
        margin-bottom: 10px;
    }
}



#revues-rose-croix {
    padding: 30px 0;
    background-color: var(--color-background-medias);
    text-align: center;
    overflow: hidden;
}

.carousel {
    position: relative;
    max-width: 80%;
    margin: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 300%; /* Ajusté dynamiquement */
}

.carousel-slide {
    flex: 0 0 100%;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-item .card-body {
    min-height: 400px; /* Ajuste la valeur selon le plus grand contenu */
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.carousel-slide img {
    max-width: 60%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.date-publication {
    font-size: 1rem;
    color: var(--color-paragraph);
    font-style: italic;
}

/* Boutons de navigation */
.carousel-btn {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border-radius: 50%;
    transition: background 0.3s;
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Indicateurs */
.carousel-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 20px auto 0;
    position: relative;
    z-index: 10;
}

/* Pastilles individuelles */
.indicator {
    width: 12px;
    height: 12px;
    background-color: #bbb;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/* Pastille active */
.indicator.active {
    background-color: var(--color-golden-symbol); /* ou une couleur de ton thème */
}

.carousel-slide .btn {
    background-color: var(--color-purple-mystic);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.carousel-slide .btn:hover {
    background-color: var(--color-golden-symbol);
}



.newsletter-section {
    background-color: var(--color-background-gray-dark);
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: auto;
    max-width: 800px; /* Pour éviter que le formulaire soit trop large */
}

/* Texte */
.newsletter-section p {
    font-size: 1.125rem;
    color: var(--color-paragraph);
    margin-bottom: 15px;
}

/* Conteneur du formulaire avec flexbox */
.newsletter-section form {
    display: flex;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espacement entre les éléments */
}

/* Champ Nom */
.newsletter-section input[type="text"], 
.newsletter-section input[type="email"] {
    padding: 10px;
    border: 1px solid var(--color-disabled);
    border-radius: 5px;
    font-size: 1rem;
    flex: 1; /* Permet aux champs de s'adapter */
    min-width: 150px;
    max-width: 250px;
}

/* Bouton */
.newsletter-section button {
    padding: 10px 15px;
    background-color: var(--color-primary);
    color: var(--color-pure-white);
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    flex: 0.5; /* Réduit la taille du bouton pour garder l’équilibre */
    min-width: 120px;
    transition: background-color 0.3s;
}

/* Ajustements pour petits écrans */
@media (max-width: 600px) {
    .newsletter-section form {
        flex-wrap: wrap; /* Passe en colonne si l’espace est trop réduit */
    }

    .newsletter-section input[type="text"], 
    .newsletter-section input[type="email"], 
    .newsletter-section button {
        width: 100%; /* Chaque élément prend toute la largeur sur mobile */
        max-width: none;
    }
}


/* Effet au survol */
.newsletter-section button:hover {
    background-color: var(--color-primary-hover);
}



/* Style spécifique pour le modal de la newsletter */
.modal-newsletter {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  background-color: rgba(255, 255, 255, 0.9);
}

/* Contenu du modal */
.modal-newsletter-content {
    background-color: #dff0d8;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border: 3px solid #007bff;
}

/* message */
.modal-newsletter-message {
  font-size: 1.2rem;
  text-align: center;
  color: #3c763d; /* Couleur du texte de succès */
  padding: 20px;
}

/* Bouton de fermeture */
.close-newsletter {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-newsletter:hover {
    color: red;
}

/* Bouton Fermer */
#close-newsletter-modal-btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#close-newsletter-modal-btn:hover {
  background-color: #0056b3;
}

.error-403 {
  background-color: var(--color-background-light);
  color: var(--color-paragraph);
  text-align: center;
  padding: 100px 20px;
}

.error-404 {
  background-color: var(--color-background-texte-du-mois); /* Fond pêche */
  text-align: center;
  padding: 100px 20px;
}

.bg-dark-transparent {
  background-color: var(--color-dark-transparent); /* Noir transparent */
  padding: var(--spacing-large);       /* Utilise les variables d'espacement */
  border-radius: 10px;                 /* Rendu doux déjà bien */
  color: var(--color-white);
}

/* Cache pour la recherche */
.hidden { display: none !important; }

/* Badge ruban sur l'image */
.badge-annule{
  position:absolute; top:10px; left:-8px;
  background:#d9534f; color:#fff; font-weight:700; text-transform:uppercase;
  font-size:.85rem; padding:6px 12px; border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.15); z-index:2;
}

/* Pastille à côté du titre */
.pill-annule{
  display:inline-block; background:#d9534f; color:#fff; font-size:.75rem;
  font-weight:700; padding:3px 8px; border-radius:999px; vertical-align:middle;
}

/* Effet visuel d’une carte annulée */
.activity-item.activity-annule .activity-image img{
  filter:grayscale(100%) brightness(.95);
  opacity:.85;
}
.activity-item.activity-annule{
  outline:3px solid rgba(217,83,79,.25);
}