/* Styles globaux */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	overflow-x: hidden;
	font-size: 16px; /* Standard Web */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; /* Rend les polices plus nettes */
}

/* Header et navigation */
header, nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

h1 {
  font-family: 'Dancing Script', cursive;
  font-weight: 400; /* Poids standard disponible pour cette police */
  color: #333;
  letter-spacing: 1px;
  line-height: 1.2; /* Sécurité pour les lettres cursives */
  font-size: clamp(2.5rem, 8vw, 4rem); 
}

/* Intégration de la police Poiret One depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

/* Application de la police à vos éléments */
h2 {
  font-family: 'Poiret One', cursive;
  /* Ajoutez ici d'autres styles si nécessaire, comme la taille, la couleur, etc. */
  font-weight: 400;
  color: #333;
  letter-spacing: 2px;
  line-height: 1.5;
  font-size: 1.75rem; /* ~28px */
}

h3 {
  font-family: "Genos", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

p, li {
    font-family: "Genos", serif;
    font-size: 1rem; /* Soit exactement 16px */
    line-height: 1.6; /* Important pour la lisibilité : aère les lignes */
}

html {
    font-size: 16px; /* Définit la base standard */
		overflow-x: hidden;
}

/* Le conteneur de votre bannière noel */
/* 1. Structure de la bannière */
#holiday-banner {
    position: fixed;
    top: 0;
    right: 0;
    width: 700px; 
    height: 55px;
    
    /* On cache le bord droit et on incline */
    transform: translate(220px, 45px) rotate(35deg);
    transform-origin: center;
    
    color: #ffffff;
    z-index: 10000;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    
    pointer-events: none; /* Pour cliquer sur le menu en dessous */
    overflow: visible;
}

/* 2. Style des étoiles (scintillement rapide) */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    filter: blur(0.3px);
    animation: twinkle var(--duration) infinite ease-in-out;
}

.star:nth-child(even) { width: 2px; height: 2px; box-shadow: 0 0 6px 1px white; --duration: 0.6s; }
.star:nth-child(odd) { width: 4px; height: 4px; box-shadow: 0 0 10px 2px #fffce0; --duration: 1s; }

/* Positions des étoiles (S1 à S16) */
.s1 { top: 10%; left: 5%; }   .s2 { bottom: 15%; left: 12%; }
.s3 { top: 20%; left: 20%; }  .s4 { bottom: 25%; left: 28%; }
.s5 { top: 15%; left: 35%; }  .s6 { bottom: 10%; left: 42%; }
.s7 { top: 30%; left: 50%; }  .s8 { bottom: 20%; left: 58%; }
.s9 { top: 10%; left: 65%; }  .s10 { bottom: 30%; left: 72%; }
.s11 { top: 25%; left: 80%; } .s12 { bottom: 15%; left: 88%; }
.s13 { top: 40%; left: 93%; } .s14 { bottom: 5%; left: 18%; }
.s15 { top: 5%; left: 45%; }  .s16 { bottom: 40%; left: 78%; }

/* 3. Style de la poussière (dérive lente) */
/* Style de base des grains */
.dust {
    position: absolute;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px white;
    opacity: 0;
    pointer-events: none;
}

/* On varie les tailles pour donner de la profondeur */
.d1, .d3, .d5, .d7 { width: 3px; height: 3px; }
.d2, .d4, .d6, .d8 { width: 1.5px; height: 1.5px; box-shadow: 0 0 4px white; }

/* Positions et vitesses variées pour casser le rythme */
.d1 { top: 20%; left: 0%;  animation: drift-random 12s infinite linear; animation-delay: 0s; }
.d2 { top: 70%; left: 10%; animation: drift-random 15s infinite linear; animation-delay: -2s; }
.d3 { top: 40%; left: 25%; animation: drift-random 10s infinite linear; animation-delay: -5s; }
.d4 { top: 80%; left: 40%; animation: drift-random 18s infinite linear; animation-delay: -1s; }
.d5 { top: 15%; left: 55%; animation: drift-random 14s infinite linear; animation-delay: -7s; }
.d6 { top: 50%; left: 70%; animation: drift-random 11s infinite linear; animation-delay: -3s; }
.d7 { top: 30%; left: 85%; animation: drift-random 16s infinite linear; animation-delay: -4s; }
.d8 { top: 65%; left: 15%; animation: drift-random 13s infinite linear; animation-delay: -8s; }

/* L'animation "Aléatoire" (mouvement en vague) */
@keyframes drift-random {
    0% { 
        transform: translate(-50px, 0px); 
        opacity: 0; 
    }
    20% { opacity: 0.8; }
    50% { 
        /* Le grain monte ou descend de 15px au milieu du trajet */
        transform: translate(250px, -15px); 
        opacity: 1; 
    }
    80% { opacity: 0.8; }
    100% { 
        transform: translate(600px, 10px); 
        opacity: 0; 
    }
}

/* 4. Définition des animations */
@keyframes twinkle {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.5); opacity: 1; }
}

@keyframes drift {
    0% { transform: translateX(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(150px); opacity: 0; }
}

/* Menu */
.desktop-nav {
    display: none;
    background: black;
    color: white;
    padding: 1rem;
    text-align: center;
}

.desktop-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.desktop-nav li {
    display: inline-block;
    margin: 0 1rem;
}

.desktop-nav a {
    font-family: 'Poiret One', cursive;
	color: white;
    text-decoration: none;
}

/* Pour les liens actifs (survolés ou cliqués) */
nav a:hover {
  color: #ffa500;
}

.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: black;
    color: white;
    padding: 1rem;
}

.logo {
  font-family: 'Dancing Script', cursive;
  font-weight: 200;
  color: #white;
  letter-spacing: 1px;
  line-height: 1.5;	
}

.mobile-header .logo {
    font-size: 1.5rem;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.burger {
    width: 25px;
    height: 3px;
    background: white;
}

.mobile-nav {
    display: none;
    background: black;
}

.mobile-nav.show {
    display: block;
}

.mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.mobile-nav li {
    border-bottom: 1px solid white;
}

.mobile-nav a {
    color: white;
    text-decoration: none;
    padding: 1rem;
    display: block;
}

/* Accueil ///////////////////////////////////////////////////////////////*/
#accueil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 100vh;
    padding: 0;
}

.intro {
    text-align: center;
    flex: 1;
}

.intro h1 {
    font-size: 4rem;
    margin: 0;
}

.intro h2 {
    font-size: 1.5rem;
    margin: 0;
}

/* Bande images */
.bande-photo1 {
    width: 100%;
    height: 200px; /* hauteur de l'image */
    background-image: url("../links/fond.jpg"); /* source image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bande-photo2 {
    width: 100%;
    height: 200px; /* hauteur de l'image  */
    background-image: url("../links/fond2.webp"); /* source image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bande-photo3 {
    width: 100%;
    height: 200px; /* hauteur de l'image  */
    background-image: url("../links/aerien01.webp"); /* source image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bande-photo4 {
    width: 100%;
    height: 200px; /* hauteur de l'image  */
    background-image: url("../links/panorama.webp"); /* source image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Quiz */
.modal {
  display: none; /* Cache la modale par défaut */
  position: fixed; /* Reste en place même en défilant */
  z-index: 100; /* Assure que la modale est au-dessus des autres éléments */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Active le défilement si le contenu est trop long */
  background-color: rgba(0,0,0,0.7); /* Fond semi-transparent */
  animation: fadeIn 0.5s;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% du haut et centré horizontalement */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Pourrait être ajusté pour les grands écrans */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation: slideIn 0.5s;
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes slideIn {
  from {transform: translateY(-50px);}
  to {transform: translateY(0);}
}

/* suite style quiz*/
/* Styles pour la modale du quiz */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
  animation: fadeIn 0.5s;
  padding: 20px; /* Ajout d'un peu de padding pour les petits écrans */
}

.modal-content {
  background-color: #fff;
  margin: 5% auto; /* Ajustement du margin pour un meilleur affichage */
  padding: 20px;
  border-radius: 10px;
  max-width: 600px;
  width: 90%; /* S'adapte mieux aux écrans */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: slideIn 0.5s;
  position: relative;
  text-align: center;
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
  color: #000;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-50px); }
  to { transform: translateY(0); }
}

/* Styles pour le contenu du quiz */
#quiz-container {
  font-family: 'Poiret One', sans-serif;
  color: #333;
}

h2, h3 {
  font-family: 'Genos', sans-serif;
  font-weight: 500;
}

h3 {
  margin: 20px 0;
  font-size: 1.5em;
}

/* Barre de progression */
#progress-bar-container {
  width: 100%;
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px 0 20px;
}

#progress-bar {
  height: 15px;
  background-color: #4CAF50;
  width: 0%;
  transition: width 0.5s ease-in-out;
}

/* Boutons de réponse */
.options-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.quiz-option {
  background-color: #000;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 12px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  width: 100%;
  text-align: left;
}

.quiz-option:hover {
  background-color: #e2e2e2;
  border-color: #999;
}

.quiz-option:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Message de feedback */
#feedback-message {
  height: 20px;
  font-weight: bold;
  margin: 10px 0;
  min-height: 1.5em; /* Pour éviter le décalage de la page */
}

/* Cadran de réussite (Gauge) */
#quiz-gauge {
    position: relative;
    width: 300px;
    height: 180px;
    margin: 20px auto; /* Marge pour détacher du reste du contenu, on enlève la marge du bas ici */
    box-sizing: border-box;
    overflow: visible;
}

#gauge-label {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
    text-align: center; /* Assure que le titre est bien centré */
}

#gauge-circle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    border: 10px solid #ddd;
    border-bottom: none;
    box-sizing: border-box;
    overflow: hidden;
}

#gauge-circle::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200%;
    border-radius: 100%;
    background: conic-gradient(
        #e74c3c 0deg 45deg,
        #e67e22 45deg 90deg,
        #f1c40f 90deg 135deg,
        #2ecc71 135deg 180deg
    );
    transform: translateY(50%) rotate(-90deg);
    z-index: 1;
}

#gauge-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 80px;
    background-color: #333;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(-90deg);
    transition: transform 1s ease-in-out;
    z-index: 5;
}

/* Positionnement des niveaux Apprenti et Expert */
#gauge-levels {
    position: absolute;
    bottom: -15px; /* Positionne les étiquettes légèrement en dessous du cadran */
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    display: flex;
    justify-content: space-between;
}

#gauge-levels .level {
    font-size: 0.9em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    position: absolute;
    transform: translateX(-50%); /* Centrage horizontal de chaque étiquette */
    white-space: nowrap;
}

/* Applique les couleurs et les positions individuelles */
#gauge-levels .level:nth-child(1) {
    left: 15%;
    color: #e74c3c; /* Révise ! */
}
#gauge-levels .level:nth-child(2) {
    left: 40%;
    color: #e67e22; /* Apprenti */
}
#gauge-levels .level:nth-child(3) {
    left: 60%;
    color: #f1c40f; /* Maître */
}
#gauge-levels .level:nth-child(4) {
    left: 90%;
    color: #2ecc71; /* Expert */
}

/* Résultat final */
.final-result {
  text-align: center;
  margin-top: 50px;
}

.final-result h2 {
  color: #4CAF50;
  font-size: 2em;
}

.final-result p {
  font-size: 1.2em;
  margin: 10px 0;
}

.final-result button {
  padding: 10px 20px;
  font-size: 1em;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.final-result button:hover {
  background-color: #45a049;
}

/* Styles pour les réponses correctes et incorrectes */
.quiz-option.correct {
  background-color: #c8e6c9; /* Vert clair */
  border-color: #4CAF50; /* Vert foncé */
  color: #333;
}

.quiz-option.incorrect {
  background-color: #ffcdd2; /* Rouge clair */
  border-color: #f44336; /* Rouge foncé */
  color: #333;
}

/* Conteneur du slideshow */
.slideshow {
    margin: 0;
    padding: 0;
    display: flex; /* Assure un comportement fluide pour le conteneur */
	position: relative;
    width: 50%;
    height: 100vh; /* Prend toute la hauteur visible */
    float: right;
    overflow: hidden;
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); /* Diagonal split */
}

.slideshow img {
    width: 100%; /* Occupe toute la largeur du conteneur */
    height: 100%; /* Occupe toute la hauteur */
    object-fit: cover; /* Ajuste l'image pour couvrir tout l'espace */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Couleurs pour les messages de fin */
.red-text {
    color: #e74c3c;
}

.orange-text {
    color: #e67e22;
}

.yellow-text {
    color: #f1c40f;
}

.green-text {
    color: #2ecc71;
}

/* Image active */
.slideshow img.active {
    opacity: 1;
}

/* Sections ///////////////////////////////////////////////////////////////////////////////*/
section {
  padding: 1rem;
  text-align: center;
}

section:nth-child(odd) {
  background-color: #f5f5f5; 
}

section:nth-child(even) {
  background-color: #ffffff; 
}

/* Section biographie //////////////////////////////////////////////////////////////////////*/
.biographie {
  display: flex;
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  max-width: 1200px; /* Largeur maximale du conteneur pour éviter qu'il soit trop large */
  margin: 0 auto; /* Marges automatiques pour centrer horizontalement */
  background-color: #f5f5f5;
}

.biographie .photo {
  flex: 0 0 30%; /* Largeur fixe de 30% pour la photo */
  text-align: center;
  margin-right: 2rem; /* marge à droite de la photo */
}

.biographie .texte {
  flex: 1; /* Le texte prend le reste de la place disponible */
  text-align: justify;
  margin-left: 2rem;
  font-size: 1.1em;
}

/* Section galerie ////////////////////////////////////////////////////////////////////////////*/
#galerie {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.galerie-container {
  width: 80%;
  margin: 0 auto;
}

.presentation-row {
  display: flex;
  flex-wrap: wrap; /* Pour s'adapter aux petits écrans */
  align-items: center;
  justify-content: space-between;
}

.texte-presentation {
  width: 48%; 
  text-align: justify; /* Justifie le texte */
  align-self: flex-start; /* Force le bloc à s'aligner en haut à gauche */
  margin-top: 2rem; /* Optionnel : pour l'aligner parfaitement avec le haut de la vidéo */
}

.image-presentation {
  width: 35%; /* Occupe 35% de la largeur */
  text-align: center;
}

.image-presentation img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px; /* Coins arrondis pour plus d'esthétique */
}

button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.video-presentation {
  width: 45%;            /* Ajusté pour équilibrer avec le texte */
  position: relative;    /* Nécessaire pour placer les bandes par-dessus */
  background-color: #000;
  border-radius: 10px;
  overflow: hidden;      /* Coupe tout ce qui dépasse, y compris les bandes */
  line-height: 0;        /* Supprime les espaces résiduels sous la vidéo */
}

/* La vidéo prend toute la place en fond */
.video-presentation video {
  width: 100%;
  height: auto;
  display: block;
}

/* Création des bannières noires (Haut et Bas) */
.video-presentation::before,
.video-presentation::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 15%;          /* Épaisseur de la bande (augmentez pour plus d'effet) */
  background: black;
  z-index: 10;          /* Passe par-dessus la vidéo */
}

/* Positionnement de la bande haute */
.video-presentation::before {
  top: 0;
}

/* Positionnement de la bande basse */
.video-presentation::after {
  bottom: 0;
}

/* Section Évènements //////////////////////////////////////////////////////////////////////*/

#evenements {
  padding: 20px 20px;
  text-align: center;
}

#evenements h2 {
  font-size: 1.5rem;
    margin-top: 40px; /* Augmente la marge au-dessus du titre */
  margin-bottom: 20px;
  color: #333;
}

/* Conteneur des cards */
.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* Augmenté pour aérer */
    margin-top: 20px;
    flex-wrap: wrap;
    max-width: 1200px; /* Empêche l'étalement excessif */
    margin-left: auto;
    margin-right: auto;
}

#newsletter {
  padding: 0px 20px;
  text-align: center;
}

/* Styles pour une card */
.card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 20px;
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition fluide */
    
    /* MODIFICATIONS ICI */
    flex: 1;            /* Les cartes grandissent pour remplir l'espace */
    min-width: 300px;   /* Elles ne deviennent pas plus petites que 300px */
    max-width: 450px;   /* Elles ne deviennent pas trop géantes non plus */
    
    display: flex;      /* Optionnel : permet d'aligner le bouton en bas */
    flex-direction: column;
    text-align: left;
}

.card:hover {
    transform: translateY(-10px); /* La carte monte légèrement */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* L'ombre devient plus profonde */
}

.card img {
  width: 100%; /* L'image occupe toute la largeur de la card */
  margin-bottom: 15px; /* Espace entre l'image et le texte */
  border-radius: 8px 8px 0 0; /* Arrondit uniquement les coins supérieurs */
  transition: transform 0.5s ease;
    height: 200px;    /* Force une hauteur identique pour toutes les images */
    object-fit: cover; /* Recadre l'image proprement sans la déformer */
    border-bottom: 1px solid #ddd;
}

.card:hover img {
    transform: scale(1.25); /* L'image zoome très légèrement */
}

.card h3 {
  font-family: 'Poiret One', cursive;
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #555;
}

.card p {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #666;
    flex-grow: 1; /* Pousse le bouton vers le bas pour que tous les boutons soient alignés */
}

.card a {
  text-decoration: none;
  color: #0073e6;
  font-weight: bold;
  transition: color 0.3s ease;
}

.card a:hover {
  color: #ffffff;
}

/* Bouton "Voir plus" */
.btn-card {
  display: inline-block;
  margin-top: 10px; /* Espacement entre le texte et le bouton */
  padding: 10px 20px;
  font-family: 'Poiret One', cursive;
  font-size: 1rem;
  color: white !important;
  background-color: #ff8000; /* Couleur principale */
  border: none;
  border-radius: 5px;
  text-decoration: none; /* Supprime le soulignement */
  transition: background-color 0.3s ease;
  text-align: center;
}

.btn-card:hover {
  background-color: #b86614; /* Couleur au survol */
  color: #ffffff;
}



/* Bouton retour //////////////////////////////////////////////////////////////////////////*/
#scroll-to-top {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 20px;
    background: #333;
    color: #fff;
    border: none;
    padding: 15px 25px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    font-size: 1.5rem; /* Augmente la taille de la flèche */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#scroll-to-top.show {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Footer ///////////////////////////////////////////////////////////////////////////////////*/
.footer {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #000; /* Couleur de fond du footer */
  color: #fff;
  display: flex;
  font-family: 'Poiret One', cursive;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* Ajustez cette valeur */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Optionnel: ajout d'une ombre pour le style */
  z-index: 1000; /* Assure que le footer reste au-dessus des autres éléments */
}

footer a {
    color: white; /* Couleur blanche par défaut */
    text-decoration: none; /* Supprime le soulignement */
    transition: color 0.3s ease; /* Ajoute une transition pour un effet fluide */
}

footer a:hover {
    color: orange; /* Couleur orange au survol */
    text-decoration: underline; /* Optionnel : ajoute un soulignement au survol */
}


/* Style des icônes de réseaux sociaux */
.footer .footer-left a {
  text-decoration: none;
  color: inherit;
  font-size: 24px;
}

.footer .footer-left a:not(:last-child) {
  margin-right: 15px; /* Espacement entre les icônes */
}

.footer .footer-left a:hover {
  color: #ff9900; /* Couleur des icônes au survol */
}

.footer small {
  font-size: 12px; /* Taille de la police pour le texte de copyright */
  padding-right: 30px; /* Ajoutez cette ligne pour augmenter l'espace à droite */

}

/* Modale formulaire */
/* Fond de la fenêtre (overlay) */
.modal {
  display: none; 
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Fond sombre transparent */
  backdrop-filter: blur(5px); /* Floute l'arrière-plan pour l'élégance */
}

/* Boîte du formulaire */
.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  border-radius: 15px;
  box-shadow: 0 5px 30px rgba(0,0,0,0.3);
}

/* Bouton fermer */
.close-button {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

/* Champs du formulaire */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* Évite que les champs dépassent */
}

.btn-send {
  width: 100%;
  padding: 12px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}


/* Responsive /////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1024px) {
    .mobile-header, .mobile-nav {
        display: none;
    }

    .desktop-nav {
        display: block;
    }

    #accueil {
        flex-direction: row;
    }
}

@media (max-width: 768px) {
	
body, html {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Évite tout débordement horizontal */
    }
	
/* Styles pour mobiles */
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 1.2rem;
  }
  
  p {
	  font-size: 1.2rem;
  }
  
 
/* Section accueil /////////////////////////////////////////////////////////////////////////*/

    #accueil .slideshow {
        margin: 0;
        width: 100%; /* S'assure que le conteneur couvre toute la largeur */
        height: 100vh; /* Occupe toute la hauteur de l'écran */
    }

	#accueil .intro {
        display: none; /* Cache le titre et le texte */
    }
	
	#accueil {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* La section occupe toute la hauteur de l'écran */
        margin: 0;
        padding: 0;
    }

    .slideshow {
        width: 100%;
        height: 100%; /* Le slideshow remplit toute la section */
        overflow: hidden;
		clip-path: none; /* Diagonal split */
    }

    .slideshow img {
        position: absolute;
        top: 0;
        left: 0;
		width: 100vw; /* Couvre toute la largeur de l'écran */
        height: 100vh; /* Couvre toute la hauteur */
        object-fit: cover; /* Remplit l'espace sans distorsion */
    }

/* Section biographie ///////////////////////////////////////////////////////////////////////////*/
  .biographie {
    display: flex;
    flex-direction: column; /* Les éléments s'alignent en colonne */
    justify-content: center; /* Centre verticalement */
    align-items: center; /* Centre horizontalement */
    margin: 0; /* Supprime les marges */
    padding: 0; /* Supprime les paddings */
    width: 100%; /* S'étend sur toute la largeur de l'écran */
  }

  .biographie .photo {
    width: 100%; /* La photo occupe toute la largeur */
    margin: 0; /* Supprime les marges */
  }

  .biographie .photo img {
    width: 100%; /* L'image s'étend sur toute la largeur du conteneur */
    height: auto; /* Conserve les proportions */
    display: block; /* Évite les espaces liés au comportement inline-block */
  }

  .biographie .texte {
    width: 100%; /* Le texte prend toute la largeur disponible */
    margin: 0; /* Supprime les marges */
    padding: 10px 45px; /* Ajoute un léger padding haut/bas (15px) et gauche/droite (20px) */
    text-align: justify; /* Texte justifié pour une meilleure lisibilité */
    font-size: 1.1rem; /* Taille de police pour mobile */
    box-sizing: border-box; /* Garantit que le padding est inclus dans la largeur */
  }
  
/* Section galerie /////////////////////////////////////////////////////////////////////////////////////*/

	.video-presentation {
	width: 100%;
	text-align: center;
	}
	
	.presentation-row {
    flex-direction: column; /* Empile les éléments sur petits écrans */
	}
	.texte-presentation, .image-presentation {
    width: 100%; /* Prend toute la largeur */
    text-align: justify;
	}


/*Section évènements ///////////////////////////////////////////////////////////////////////////////*/
  .cards-container {
    flex-direction: column; /* Les cards s'empilent en colonne */
    align-items: center; /* Centre chaque card individuellement */
  }
 

@media (max-width: 480px) { /* Un point de rupture commun pour les mobiles */
    .conteneur {
        width: 100%;
    }
    /* Styles spécifiques aux mobiles : police plus grande, éléments en colonne, etc. */
}