.banniere {
  width: 100%; /* L'image prendra 100% de la largeur de l'écran */
  height: 300px; /* Vous fixez la hauteur que vous souhaitez */
  object-fit: cover; /* MAGIQUE : l'image remplit la boîte sans se déformer, quitte à rogner les bords */
  object-position: center; /* (Optionnel) Centre l'image pour que le rognage se fasse sur les côtés */
  display: block;
}

.menu-principal {
  display: flex;               
  gap: 40px;                   
  list-style-type: none;    
  padding: 0;                  
  margin: 0;                   
  background-color: rgba(35, 40, 65, 0.7); 
  backdrop-filter: blur(8px);
  padding: 20px;          
}


.menu-principal a {
  text-decoration: none;       
  color: #fcfcfc;              
  font-weight: bold;           
  font-size: 18px;             
  font-family:'Courier New', Courier, monospace;
}


.menu-principal a:hover {
  color: #007bff;              
}

.presentation {
  line-height: 1.7;
  max-width: 700px;
  font-family:Arial, Helvetica, sans-serif;
  justify-self: center;
  text-align: center;
  margin-bottom: 100px;
}

.presentationTitre {
  line-height: 1.7;
  max-width: 700px;
  font-family:Arial, Helvetica, sans-serif;
  justify-self: center;
  text-align: center;
}

/* 1. Le Cadre (La Grille) */
.ma-galerie {
  display: grid;               /* Active le mode Grille */
  grid-template-columns: repeat(3, 1fr); /* Crée 3 colonnes de taille égale (1 fraction chacune) */
  grid-auto-rows: 200px;
  gap: 15px;                   /* L'espace entre chaque image (très pratique !) */
  max-width: 700px;
  justify-self: center;
  
  
  /* Un peu de style pour le cadre lui-même (optionnel) */
  background-color: rgba(35, 40, 65, 0.3);
  backdrop-filter: blur(8px);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 100px;
}

/* 2. Le style de TOUTES les images */
.ma-galerie img {
  width: 100%;           /* L'image prend toute la largeur de sa case */
  height: 100%;         /* On fixe une hauteur */
  object-fit: cover;     /* MAGIE (vue précédemment) : l'image ne se déforme pas ! */
  border-radius: 5px;    /* Arrondit un peu les coins des images */
}

/* 3. La disposition "Différente" : s'étaler sur la grille */
.image-grande {
  grid-column: span 2;   /* Demande à cette image de prendre la place de 2 colonnes ! */
  grid-row: span 2;      /* Et de prendre la place de 2 lignes en hauteur ! */
  height: 100%;          /* Pour qu'elle remplisse bien son grand espace */
  object-position: top;
}

/* On cible l'image à l'intérieur du lien */
.lien-image img {
  transition: transform 0.3s ease; /* Crée une animation douce de 0.3 secondes */
}


.lien-image:hover img {
  transform: scale(1.05); /* Agrandit l'image de 5% */
  opacity: 0.9;           /* La rend un tout petit peu transparente */
}

body {
  /* On enlève les petites marges blanches par défaut du navigateur */
  margin: 0; 
  
  /* L'astuce : On superpose un dégradé semi-transparent ET l'image */
  background-image: 
    linear-gradient(rgba(10, 15, 30, 0.3), rgba(10, 15, 30, 0.3)), /* Un filtre bleu nuit foncé à 70% d'opacité */
    url('images/ernest-brillo-Qi8CvonsYnM-unsplash.jpg'); /* Le chemin vers votre image téléchargée */
    
  background-size: cover;       /* L'image couvre tout l'écran */
  background-position: center;  /* On centre l'image */
  min-height: 100vh;
  
  /* L'effet "Parallaxe" ! */
  background-attachment: fixed; /* MAGIQUE : L'image reste fixe pendant que le texte défile au scroll */
  
  color: white; /* On passe tout le texte du site en blanc pour qu'il ressorte */
}

h1 {
  line-height: 1.7;
  max-width: 700px;
  font-family:Arial, Helvetica, sans-serif;
  margin-left: 20px;
}

/* --- Structure globale --- */
.catalogue-projets {
  display: grid;
  grid-template-columns: repeat(3, 320px); /* 3 colonnes par défaut */
  gap: 20px;
  list-style-type: none;
  padding: 0;
  margin: 15px;
  justify-self: center;
}

/* --- Style de la carte --- */
.catalogue-projets li {
  position: relative; /* Indispensable pour l'overlay absolu ! */
  overflow: hidden; /* Empêche l'image de déborder sur les coins arrondis */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.3s ease; /* Effet de zoom global au survol */
  background-color: rgba(35, 40, 65, 0.3);
  backdrop-filter: blur(8px);
}

/* --- Style du lien et de l'image --- */
.catalogue-projets a {
  display: block; /* Prend tout l'espace de la carte */
  text-decoration: none;
  color: #ffffff;
}

.catalogue-projets img {
  width: 100%;
  height: 250px;
  object-fit: cover; /* L'image s'adapte sans se déformer */
  object-position: top;
}

/* --- Style du titre --- */
.catalogue-projets h3 {
  margin: 15px;
  font-size: 1.2rem;
  font-weight: bold;
}

/* --- Style du bloc d'infos au survol --- */
.catalogue-projets .infos-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Calque noir semi-transparent */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  box-sizing: border-box; /* Inclut le padding dans la hauteur/largeur */
  
  /* C'est ici que l'interactivité se joue ! */
  opacity: 0; /* Caché par défaut */
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Transition douce */
}

/* --- Effet au survol de la carte --- */
.catalogue-projets li:hover {
  transform: translateY(-5px); /* La carte monte un peu */
}

.catalogue-projets li:hover .infos-hover {
  opacity: 1; /* Apparaît au survol ! */
  visibility: visible;
}

/* --- Style du bouton d'action --- */
.btn-action {
  background-color: #007bff; /* Couleur d'action (ex: bleu) */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 15px;
  font-weight: bold;
}

.btn-action-nondisponible {
  background-color: #ff0000; /* Couleur d'action (ex: bleu) */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 15px;
  font-weight: bold;
}
/* --- 1. La disposition en 2 colonnes --- */
.disposition-accueil {
  display: grid;
  grid-template-columns: 2fr 1fr; /* La gauche prend 2 parts, la droite prend 1 part */
  gap: 40px; /* Espace entre le texte et la barre latérale */
  
  max-width: 1100px; /* On limite la largeur pour que ce soit joli sur grand écran */
  margin: 40px auto; /* On centre le tout sur la page */
  padding: 0 20px;
}

/* --- 2. Le style de la petite carte de réception --- */
.carte-reception-rapide {
  background-color: rgba(35, 40, 65, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4); /* Petite bordure brillante */
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  color: white;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* Une belle ombre portée */
}

/* --- 3. L'image à l'intérieur de la carte --- */
.carte-reception-rapide .img-satellite {
  width: 100%; /* L'image prend toute la largeur de sa petite boîte */
  height: auto;
  border-radius: 6px;
  margin-bottom: 15px;
}

/* Style pour le titre et le texte de la carte */
.carte-reception-rapide h3 {
  margin-top: 0;
  color: #ffaa00; /* Un petit titre orangé pour attirer l'œil */
}

.carte-reception-rapide .date-capture {
  font-size: 0.9rem;
  color: #cccccc; /* Texte un peu gris clair */
}

.accueil {
  line-height: 1.7;
  max-width: 700px;
  font-family:Arial, Helvetica, sans-serif;
  justify-self: left;
  text-align: left;
  margin-bottom: 100px;
}

.contenu-principal {
  background-color: rgba(35, 40, 65, 0.4);
  backdrop-filter: blur(8px);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.4); /* Petite bordure brillante */
}

/* Si l'écran fait moins de 768px de large (tablettes et téléphones) */
@media (max-width: 768px) {
  .disposition-accueil {
    /* On passe d'une grille à 2 colonnes, à une grille d'1 seule colonne ! */
    grid-template-columns: 1fr; 
  }
}

/* --- 1. Le conteneur de la Lightbox (Caché par défaut) --- */
.lightbox {
  display: none;             /* CACHÉ par défaut ! */
  position: fixed;           /* Fixé par-dessus tout le reste du site */
  top: 0;
  left: 0;
  width: 100vw;              /* Prend 100% de la largeur de l'écran */
  height: 100vh;             /* Prend 100% de la hauteur de l'écran */
  z-index: 999;              /* S'assure d'être au tout premier plan */
  
  /* L'effet Verre Dépoli / Flou ! */
  background-color: rgba(10, 15, 30, 0.3); /* Un fond sombre un peu transparent */
  backdrop-filter: blur(15px);             /* FLOUTE tout le site en arrière-plan */
  
  /* Flexbox pour centrer l'image parfaitement au milieu */
  justify-content: center;
  align-items: center;
}

/* --- 2. L'apparition magique avec :target --- */
/* Quand l'URL du navigateur se termine par #zoom-satellite, ce bloc s'affiche */
.lightbox:target {
  display: flex; 
}

/* --- 3. L'image en grand dans la Lightbox --- */
.lightbox img {
  max-width: 90%;       /* L'image ne débordera pas sur les côtés */
  max-height: 90vh;     /* L'image ne débordera pas en haut et en bas */
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Jolie ombre portée */
  border-radius: 8px;   /* Petits bords arrondis */
}

/* --- 4. La zone cliquable pour fermer --- */
/* On transforme le lien "fermer" en une immense zone invisible qui prend tout l'écran */
/* Ainsi, cliquer n'importe où autour de l'image fermera la Lightbox */
.fermer-lightbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: zoom-out; /* Change la souris en loupe avec un "moins" */
}

.classe-markdown {
  font-family:sans-serif;
  line-height: 1.5;
}

/* 2. On stylise spécifiquement les titres générés par le Markdown */
.classe-markdown h1, 
.classe-markdown h2, 
.classe-markdown h3 {
  font-family:sans-serif;
  color: #ffaa00; /* Par exemple, mettre les titres en orange */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Petite ligne de séparation sous les titres */
  padding-bottom: 10px;
  margin-top: 30px;
}

/* 3. On stylise les liens éventuels dans vos actus */
.classe-markdown a {
  color: #007bff;
  text-decoration: none;
}

.classe-markdown a:hover {
  text-decoration: underline;
}

/* On cible les images des actus */
.classe-markdown img {
  /* 1. Contrôle de la taille */
  max-width: 60%;       /* L'image ne débordera jamais de la colonne */
  height: auto;          /* Garde les bonnes proportions */
  
  /* 2. Le centrage (Optionnel) */
  display: block;        /* Permet d'utiliser les marges automatiques */
  margin: 25px left;     /* Espace en haut/bas, et centré au milieu */
  
  /* 3. Le fameux cadre flou et arrondi */
  border-radius: 12px;   /* Arrondit les coins du cadre */
  padding: 10px;         /* L'épaisseur du cadre ! */
  
  /* Un bleu nuit très sombre à 50% d'opacité */
  background-color: rgba(15, 20, 35, 0.5); 
  backdrop-filter: blur(8px); /* Floute ce qui passe sous le cadre */
  
  /* 4. La petite touche premium */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); /* Ombre douce sous le cadre */
}

/* Style spécifique pour la mise en page de la page projet */
.contenu-principal-projet {
  max-width: 850px;       /* On limite la largeur pour que la lecture soit confortable */
  margin: 50px auto;      /* On centre la boîte sur la page et on met de l'espace en haut/bas */
  padding: 0 20px;
}

#zone-projet {
  background-color: rgba(35, 40, 65, 0.85); /* Fond bleu nuit semi-transparent */
  backdrop-filter: blur(12px);             /* Floute le fond d'espace derrière la boîte */
  border: 1px solid rgba(255, 255, 255, 0.1);/* Fine bordure brillante style cockpit */
  padding: 40px;                           /* Grand espace intérieur pour que le projet respire */
  border-radius: 16px;                     /* Beaux angles arrondis pour la grande boîte */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);/* Ombre portée pour donner du relief */
}

/* On réutilise votre Lightbox, on rajoute juste cette règle pour l'afficher */
.lightbox.active {
  display: flex; /* La rend visible */
}

/* On s'assure que le fond clique bien pour fermer */
#lightbox-projets {
  cursor: zoom-out;
}

/* --- PAGE CONTACT --- */

/* 1. On centre la carte au milieu de l'écran avec Flexbox */
.contenu-contact {
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center;     /* Centre verticalement */
  min-height: 50vh;        /* Prend au moins la moitié de l'écran en hauteur */
  padding: 40px 20px;
}

/* 2. L'effet "Verre Dépoli" de votre carte */
.carte-contact {
  background-color: rgba(35, 40, 65, 0.3); /* Bleu nuit transparent */
  backdrop-filter: blur(12px);              /* Le flou magique ! */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  color: white;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  max-width: 450px; /* La carte ne sera jamais trop large sur un grand écran */
  width: 100%;
}

.carte-contact h2 {
  color: #ffaa00; /* Le titre en orangé pour rappeler vos actus */
  margin-top: 0;
  font-size: 1.8rem;
  font-family:'Courier New', Courier, monospace;

}

.carte-contact p {
  font-size: 1.3rem;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 3. La mise en valeur du pseudo Discord */
.boite-discord {
  margin-top: 30px;
  background-color: rgba(0, 0, 0, 0.4); /* Un fond un peu plus noir pour faire contraste */
  padding: 20px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.3); /* Petite bordure pointillée sympa */
}

.pseudo-discord {
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px; /* Espace un peu les lettres pour un effet plus technique */
  color: #ffffff;
}