/* Correction du décalage vertical de la page d'accueil */
body {
  margin: 0;
  padding: 0;
}

.Page {
  margin-top: -23px; /* Compensation du décalage restant (augmenté suite au retour utilisateur "pas assez") */
}

/* moteur de recherche Pagefind */
.search-container {
  position: absolute;
  top: 90px;
  left: 1460px; /* Ajusté (-200px) selon demande utilisateur */
  z-index: 1000;
  width: 330px; /* Champ élargi */
}

/* Configuration des variables Pagefind pour s'intégrer au design */
:root {
  --pagefind-ui-scale: 0.85;
  --pagefind-ui-primary: #660000;
  --pagefind-ui-text: #333333;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: #cacabe;
  --pagefind-ui-tag: #660000;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 4px;
  --pagefind-ui-image-border-radius: 4px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: inherit;
}

/* Personnalisation supplémentaire du widget */
.pagefind-ui__search-input {
  border: 2px solid #999;
  padding-top: 5px !important;
  padding-bottom: 6px !important;
  min-height: 0 !important; /* Pour surcharger d'éventuels presets */
  height: auto !important;
  line-height: normal !important;
}

.pagefind-ui__search-input::placeholder {
  color: #660000 !important;
  opacity: 0.7 !important;
  font-weight: 350 !important;
}
/* Corriger la position du bouton "Effacer" qui était trop bas */
.pagefind-ui__search-clear {
  position: absolute !important;
  top: 6px !important; /* Descend un peu pour centrer */
  right: 1px !important;
  height: auto !important;
  max-height: 30px !important; /* Limite la hauteur */
  padding: 5px 10px !important;
  color: #660000 !important; /* Force la couleur */
  background: transparent !important;
  z-index: 1000 !important;
  transform: none !important;
  line-height: 1.2 !important;
  display: inline-block !important; /* Force l'affichage standard */
  margin: 0 !important;
}

/* Cacher le bouton s'il a la classe suppressed (gestion native Pagefind) */
.pagefind-ui__suppressed .pagefind-ui__search-clear,
.pagefind-ui__search-clear.pagefind-ui__suppressed {
  display: none !important;
}

.pagefind-ui__drawer {
  background-color: #ffffff !important; /* Fond blanc opaque forcé */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
  max-height: 60vh !important; /* Force la hauteur max pour le scroll */
  overflow-y: auto !important; /* Force le scroll interne */
  border-radius: 0 0 4px 4px;
  border: 1px solid #cacabe; /* Bordure pour mieux délimiter */
  padding: 10px; /* Un peu d'espace interne */
}

/* S'assurer que chaque résultat a un fond lisible si nécessaire */
.pagefind-ui__result {
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
  padding: 5px 0 !important; /* Densifier verticalement */
  gap: 5px !important; /* Réduire l'espace entre image et texte */
}

/* Réduire la largeur de l'image (espace gauche) */
.pagefind-ui__result-thumb {
  max-width: 20px !important;
  min-width: 20px !important;
  width: 20px !important;
  font-size: 0; /* Cache le contenu alt si l'image ne charge pas pour garder propre */
}

/* Ajuster le texte */
.pagefind-ui__result-excerpt {
  margin-top: 4px !important;
  font-size: 0.9em !important;
}

/* --- Module Layout --- */
#module {
  width: 1000px; /* Largeur fixe basée sur contenu: 150 + 5 + 694 + 5 + 150 = 1004. Ajustez si nécessaire */
  margin-left: 38px; /* Conserve le décalage gauche original */
  margin-top: -6px;
  margin-bottom: 0px;
  box-sizing: border-box;
  position: relative; /* Contexte de positionnement pour l'anecdote */
  /* background-color: #eee; */ /* Décommentez pour visualiser la zone */
}

#module-content {
  display: flex;
  justify-content: flex-start; /* Alignement au début */
  gap: 4px; /* Espacement entre colonnes et diaporama */
  align-items: flex-start; /* Alignement en haut */
  margin-bottom: 5px; /* Espace avant la ligne du bas */
}

/* --- Diaporama Styling Adjustments --- */
#diaporama-container {
  /* float: left; */ /* REMOVED */
  background: rgb(54, 54, 54);
  flex-basis: 690px; /* Largeur préférée */
  flex-shrink: 0; /* Empêche le rétrécissement */
  height: 527px; /* Hauteur totale originale MOINS padding initial */
  /* padding-top: 10px; */ /* REMOVED */
  border: none;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.diaporama-slide {
  position: absolute;
  top: 0; /* Positionné en haut du conteneur */
  left: 0;
  width: 100%;
  height: 100%; /* Prend toute la hauteur du conteneur */
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  overflow: hidden;
  background-color: #cacabe;
}

.diaporama-slide.active {
  opacity: 1;
  z-index: 1;
}

.diaporama-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Affiche l'image entière */
  object-position: center center;
  transform-origin: center center;
}

/* === NEW CSS for Ken Burns Effects === */
@keyframes zoomInEffect {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes zoomOutEffect {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}
@keyframes panLeftEffect {
  from {
    transform: scale(1.1) translateX(5%);
  }
  to {
    transform: scale(1.1) translateX(-5%);
  }
}
@keyframes panRightEffect {
  from {
    transform: scale(1.1) translateX(-5%);
  }
  to {
    transform: scale(1.1) translateX(5%);
  }
}
.diaporama-slide img.effect-zoom-in {
  animation: zoomInEffect var(--diaporama-vitesse-ms) linear forwards;
}
.diaporama-slide img.effect-zoom-out {
  animation: zoomOutEffect var(--diaporama-vitesse-ms) linear forwards;
}
.diaporama-slide img.effect-pan-left {
  animation: panLeftEffect var(--diaporama-vitesse-ms) linear forwards;
}
.diaporama-slide img.effect-pan-right {
  animation: panRightEffect var(--diaporama-vitesse-ms) linear forwards;
}
.diaporama-slide img.effect-none {
  animation: none;
  transform: scale(1) translate(0, 0);
}

/* === Existing CSS for Caption === */
#Commentaire {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background-color: #cacabe;
  color: black;
  padding: 2px 4px;
  border-radius: 3px;
  z-index: 2; /* Above the slides */
  font-size: 0.8em;
  font-style: italic;
}

/* --- Imagette Styling Refinements --- */
.imagette {
  text-decoration: none;
  display: block; /* Important pour que width/height fonctionnent */
  /* position: relative; */ /* SUPPRIMÉ - Contexte est #module */
  line-height: 0; /* Empêche espace sous l'image */
  overflow: hidden; /* Cache le dépassement si nécessaire */
  font-size: 15px;
  font-style: italic;
  line-height: 1.2;
}
.imagette:hover {
  background: none;
}

/* Style de base pour les images dans les imagettes */
.imagette img {
  display: block;
  border: none;
  max-width: 100%; /* Empêche le dépassement de son conteneur */
  height: 100%; /* Hauteur par défaut */
}

.imagette-column {
  display: flex;
  flex-direction: column; /* Empilement vertical */
  width: 150px; /* Largeur fixe colonne */
  height: 527px;
  overflow: hidden;
  flex-shrink: 0; /* Empêche le rétrécissement */
  gap: 4px; /* Espacement entre imagettes dans la colonne */
}

/* Images dans les colonnes latérales */
.imagette-column .imagette img {
  width: 150px; /* Largeur fixe */
  height: auto; /* Hauteur automatique */
}

/* --- Bottom Row Layout --- */
.imagette-bottom-row {
  display: flex;
  flex-wrap: wrap; /* Permet le retour à la ligne si pas assez de place */
  gap: 4px; /* Espacement entre imagettes */
  align-items: flex-start; /* Aligner les hauts */
  width: 100%;
  overflow: hidden;
  /* border: 1px solid blue; */ /* Pour visualiser */
}
/* --- Style spécifique pour la ligne du bas --- */
.imagette-bottom-row .imagette-bottom {
  /* Cible les liens avec la classe ajoutée */
  height: 132px; /* Hauteur FIXE pour tous les conteneurs <a> */
  flex-shrink: 0; /* Empêche de rétrécir */
  background-color: #ddd; /* Arrière-plan si l'image ne couvre pas */
  /* border: 1px solid red; */ /* Pour visualiser */
}

.imagette-bottom-row .imagette-bottom img {
  height: 100%; /* L'image prend TOUTE la hauteur du conteneur <a> */
  width: auto; /* Largeur s'ajuste pour garder les proportions */
  /* min-width: 100%;  Assure que l'image couvre au moins la largeur si elle est très haute */
  object-fit: cover; /* Couvre la zone, rogne si nécessaire (largeur ou hauteur) */
  object-position: center center; /* Centre l'image dans la zone */
}

/* --- Anecdote Popup Styling (Overlay) --- */
.imagette .anecdote {
  /* Règle de base pour cacher */
  display: none;
}

.imagette:hover .anecdote {
  display: block; /* Afficher au survol */
  position: absolute; /* Position absolue par rapport à #module */
  top: 0;
  left: 154px;
  width: 690px; /* Couvre toute la largeur de #module */
  height: 527px; /* Couvre toute la hauteur de #module */
  box-sizing: border-box; /* Padding inclus dans width/height */
  background: rgba(202, 202, 190, 0.98); /* Fond semi-opaque */
  color: black;
  padding: 10px; /* Espace intérieur confortable */
  text-align: left; /* Alignement gauche standard */
  z-index: 100; /* Au-dessus de tout le reste */
  overflow-y: auto; /* Barre de défilement si contenu trop long */
  line-height: 1.1; /* Interligne pour lisibilité */
  border: 1px solid #555;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Styles pour le contenu de l'anecdote */
.anecdote {
  margin: auto;
  /* Pas de style de dimensionnement ici */
}

/* Conteneur pour la ligne d'en-tête de l'anecdote */
.anecdote-header {
  margin-bottom: 15px; /* Espace sous la ligne d'en-tête, avant l'image/texte */
  line-height: 1.2; /* Ajuster si nécessaire */
  font-size: 14px; /* Taille de police de base pour l'en-tête */
}

/* Style pour chaque élément de l'en-tête */
.anecdote-header span {
  margin-right: 15px; /* Espace entre les différents éléments (pays, date, lieu) */
  /* display: inline; par défaut pour span, pas besoin de le mettre */
}

.anecdote-texte {
  font-style: italic; /* Mettre en italique */
  font-size: 1em; /* Taille de base de l'en-tête (14px) */ /* Pas nécessaire si on veut la taille par défaut du header */
  margin-right: 0; /* Pas de marge après le dernier élément */
}

/* Assurez-vous que cette ancienne règle (si elle existe) est supprimée ou modifiée */
/* .anecdote b {
    display: block; /* SUPPRIMER ou commenter cette ligne */
/* margin-bottom: 8px; */
/* } */

/* Styles pour l'image et le texte principal (peut rester comme avant) */
.anecdote img {
  float: left;
  padding: 0 15px 5px 0;
  border: none;
  /*max-width: 60%;*/
  height: auto;
}

/* Help section */
#Help {
  /* width: 1000px; */ /* Pas besoin si #module a déjà la bonne largeur */
  width: 100%; /* Prend la largeur de #module */
  padding-left: 0px;
  padding-top: 20px; /* Espace au-dessus */
  text-align: center;
  clear: both; /* Assure qu'il passe sous les flottants (s'il y en avait) */
  box-sizing: border-box;
}
#Help h4 {
  color: #660000;
  margin-bottom: 10px;
}
#Help .curseur_italic {
  font-size: 14px;
  padding-top: 0px;
  line-height: 1.6;
}
#Help .curseur_italic b a {
  margin: 0 10px; /* Espace autour des liens Vidéos / Anthologie */
}
#Help .curseur_italic br + b {
  display: inline-block; /* Permet d'appliquer margin-top */
  margin-top: 15px; /* Espace avant les liens */
}
/* Styles pour les liens en bas de #Help */
#Help .curseur_italic a {
  color: #3aa88d;
  text-decoration: none;
}
#Help .curseur_italic a:hover {
  color: palevioletred;
  text-decoration: underline;
}

/* --- Style pour le Lecteur Vidéo Modal --- */
.video-modal-overlay {
  position: fixed; /* Se positionne par rapport à la fenêtre */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent par défaut */

  /* === C'EST ICI QUE VOUS METTEZ VOTRE FOND D'ÉCRAN === */
  /*background-image: url('images/fondpage.webp'); /* !! REMPLACEZ CECI !! */
  background-size: cover; /* Couvre toute la zone */
  background-position: center center;
  background-repeat: no-repeat;
  /* ====================================================== */

  display: flex; /* Utilise flexbox pour centrer */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  z-index: 1000; /* S'assure qu'il est au-dessus des autres éléments */
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer; /* Indique qu'on peut cliquer pour fermer (optionnel) */
}

.video-modal-content {
  position: relative; /* Contexte pour le bouton de fermeture */
  background-color: #000; /* Un fond noir juste derrière la vidéo peut être utile */
  padding: 10px; /* Petit espace autour de la vidéo */
  border-radius: 5px;
  max-width: 90%; /* Limite la largeur max */
  max-height: 90%; /* Limite la hauteur max */
  cursor: default; /* Le curseur normal sur la vidéo elle-même */
  display: flex; /* Pour que la vidéo s'adapte bien */
  justify-content: center;
  align-items: center;
}

#modal-video-player {
  display: block; /* Empêche les espaces étranges */
  max-width: 100%; /* S'assure que la vidéo ne dépasse pas son conteneur */
  max-height: calc(90vh - 40px); /* Limite la hauteur en fonction de la fenêtre */
  height: auto; /* Garde les proportions */
  width: auto; /* Garde les proportions */
}

.close-modal-btn {
  position: absolute;
  top: -15px; /* Ajustez pour positionner le bouton */
  right: -15px; /* Ajustez pour positionner le bouton */
  background-color: #fff;
  color: #000;
  border: 1px solid #555;
  border-radius: 50%; /* Bouton rond */
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 28px; /* Centrer la croix */
  text-align: center;
  cursor: pointer;
  z-index: 1001; /* Au-dessus du contenu modal */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.close-modal-btn:hover {
  background-color: #eee;
}

/* Pour que les liens vidéo soient cliquables */
.video-trigger {
  cursor: pointer;
}

#Commentaire {
  transition: opacity 0.5s ease;
  opacity: 0;
}
#Commentaire.visible {
  opacity: 1;
}
/* Ajoutez à la fin du fichier */
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.2em;
}

.video-modal-content {
  position: relative;
}

#modal-video-player {
  background-color: #000;
}