/* Définition de la hauteur du corps de la page et du HTML à 100% pour occuper toute la hauteur disponible */
html, body {
  height: 100%;
}

/* Définition d'une police personnalisée 'Bebas Neue' pour être utilisée dans le site */
@font-face {
  font-family: 'Bebas Neue';
  src: url('./fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Déclaration des couleurs principales utilisées dans le design avec des variables CSS */
:root {
  --primary-dark: #000e31;    /* Couleur de fond sombre, un bleu-vert profond */
  --primary-medium: #000e31;  /* Couleur de fond moyenne, un bleu turquoise intense */
  --primary-light: #000e31;   /* Couleur de fond claire, un bleu-vert doux */
  --accent-gold: #ee9b00;     /* Couleur dorée pour les accents */
  --accent-red: #bb3e03;      /* Couleur terracotta pour les accents rouges */
  --neon-blue: #00f5d4;       /* Couleur néon turquoise pour un effet lumineux */
}

/* Application de la police 'Bebas Neue' aux éléments de texte de marque et de navigation */
.brand-text, .nav-text {
    font-family: 'Bebas Neue', sans-serif !important;  /* Force l'utilisation de la police Bebas Neue */
}

/* Style de base pour les arrière-plans dégradés */
.gradient-bg {
  background: linear-gradient(135deg, 
    var(--primary-dark) 0%,      /* Début du dégradé avec une couleur sombre */
    var(--primary-medium) 50%,   /* Milieu du dégradé avec un bleu turquoise intense */
    var(--primary-light) 100%) !important; /* Fin du dégradé avec une couleur plus claire */
}

/* Style pour les boutons avec un dégradé de couleurs */
.gradient-buttons {
  background: linear-gradient(135deg, 
    var(--primary-light) 0%,    /* Début du dégradé avec une couleur claire */
    var(--primary-medium) 100%) !important; /* Fin du dégradé avec un bleu turquoise intense */
}

/* Style de la barre de navigation avec un dégradé vertical */
.navbar-dark {
  background: linear-gradient(235deg, 
    var(--primary-dark) 0%,     /* Début du dégradé avec une couleur sombre */
    var(--primary-light) 100%) !important; /* Fin du dégradé avec une couleur plus claire */
}

/* Effet de verre, utilisé pour les arrière-plans semi-transparents avec flou */
.glass-effect {
  background: rgba(255, 255, 255, 0.95); /* Fond semi-transparent */
  backdrop-filter: blur(10px);            /* Application d'un flou d'arrière-plan */
  border: 1px solid var(--primary-light);  /* Bordure douce avec la couleur claire */
  border-radius: 20px;                    /* Bord arrondi */
}

/* Application d'une ombre douce à certains éléments */
.shadow-soft {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* Ombre douce avec un dégradé de couleurs bleues */
}

/* Adaptation du logo : rend le logo réactif */
.logo-responsive {
  max-width: 100%;                /* Le logo ne dépassera jamais la largeur de son conteneur */
  height: auto !important;        /* La hauteur est automatiquement ajustée pour préserver le ratio */
  display: block;                 /* Le logo est un élément de type bloc */
  object-fit: contain;            /* S'assure que l'image s'ajuste à l'intérieur du conteneur sans être déformée */
  width: 80px;                    /* Définie la largeur par défaut du logo */
  max-height: 70px;               /* Définie la hauteur maximale du logo */
  transition: all 0.3s ease;      /* Ajoute une transition fluide lors du changement de propriétés */
}

/* Adaptation du logo pour les écrans de bureau (min-width: 992px) */
@media (min-width: 992px) {
  .navbar-brand .logo-responsive {
    width: 80px;                  /* Largeur du logo pour les grands écrans */
    max-height: 70px;             /* Hauteur maximale du logo pour les grands écrans */
  }
}

/* Adaptation du logo pour les smartphones (max-width: 768px) */
@media (max-width: 768px) {
  .logo-responsive {
    width: 60px !important;       /* Réduit la largeur du logo sur les écrans plus petits */
    max-height: 55px !important;  /* Réduit la hauteur maximale du logo sur les petits écrans */
  }
  .navbar-brand span {
    font-size: 1.1rem !important; /* Ajuste la taille de la police du texte dans la barre de navigation */
  }
}

/* Styles du footer : rend le logo réactif dans le pied de page */
footer .logo-responsive {
  width: 85px;                   /* Largeur du logo dans le footer */
  max-height: 78px;              /* Hauteur maximale du logo dans le footer */
  flex-shrink: 0;                /* Empêche le logo de se réduire dans le footer */
}

/* Structure solide : assure un alignement cohérent entre le logo et le texte */
.navbar-brand, footer h4 {
  max-width: 100%;                /* Ne permet pas à l'élément de dépasser la largeur du conteneur */
  overflow: hidden;               /* Cache tout contenu débordant */
  display: flex !important;       /* Utilisation de flexbox pour un alignement facile */
  align-items: center;           /* Aligne verticalement les éléments */
  gap: 15px;                      /* Espacement entre le logo et le texte */
}

/* Effets au survol du logo : rotation et zoom */
.logo-responsive:hover {
  transform: rotate(1deg) scale(1.1);  /* Effectue une légère rotation et un zoom sur le logo au survol */
}

/* Slider : personnalisation de l'arrière-plan des légendes du carousel */
.carousel-caption {
  background-color: rgba(0, 65, 106, 0.85) !important; /* Applique un fond semi-transparent bleu foncé */
}

/* Styles des boutons */
.btn-light {
  background-color: var(--primary-light);  /* Applique la couleur de fond principale au bouton */
  border-color: var(--primary-light);      /* Applique la même couleur à la bordure */
  color: white !important;                 /* Texte blanc dans le bouton */
  transition: all 0.3s;                    /* Transition fluide pour les interactions avec le bouton */
}

.btn-light:hover {
  filter: brightness(110%);                /* Augmente la luminosité du bouton au survol */
  transform: translateY(-2px);             /* Déplace légèrement le bouton vers le haut au survol */
}

/* Textes et accents */
.text-primary {
  color: var(--primary-medium) !important; /* Applique la couleur principale moyenne définie dans la variable CSS */
}

.bg-primary {
  background-color: var(--primary-medium) !important; /* Applique la couleur principale moyenne en fond */
}

/* Animation des particules */
.particle {
  width: 8px;                           /* Taille de la particule */
  height: 8px;                          /* Taille de la particule */
  background: rgba(255, 255, 255, 0.6); /* Couleur de fond de la particule (blanc transparent) */
  border-radius: 50%;                   /* Donne à la particule une forme ronde */
  position: absolute;                   /* Position absolue pour le placement des particules */
  animation: particle-float 4s infinite ease-in-out; /* Animation de la particule qui flotte verticalement */
}

@keyframes particle-float {
  0%, 100% { transform: translateY(0); }  /* La particule commence et finit à sa position initiale */
  50% { transform: translateY(-20px); }   /* La particule monte de 20px au milieu de l'animation */
}

/* Effets pour les compteurs */
@media (max-width: 576px) {
  .counter-item h3 {
    font-size: 2rem !important; /* Ajuste la taille de la police du compteur sur les petits écrans */
  }
}

.counter-item h3 {
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Ajoute une ombre subtile au texte des compteurs */
}

/* Effet 3D au survol */
.hover-3d {
  transition: transform 0.3s ease; /* Transition fluide lors du changement de transformation */
}

.hover-3d:hover {
  transform: translateY(-30px) scale(1.02); /* Au survol, l'élément se déplace légèrement vers le haut et s'agrandit */
}

/* Fixation de la hauteur des sections */
main.container {
  position: relative;  /* Nécessaire pour positionner correctement les particules dans cette section */
  z-index: 3;          /* S'assure que les particules sont positionnées sous les éléments */
}

body {
  display: flex;                /* Utilisation de Flexbox pour la mise en page */
  flex-direction: column;       /* Les éléments sont organisés en colonne */
  min-height: 100vh;            /* S'assure que le corps occupe au moins la hauteur de l'écran */
  overflow-x: hidden;           /* Empêche le débordement horizontal */
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  /* 100px permet de passer sous la navbar fixed (80px) + laisser une marge de 20px */
  padding-top: 80px !important;
}

main {
  flex: 1 0 auto;               /* Permet à la section principale de prendre de l'espace disponible */
}

/* Animation de pulsation */
@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.7; } /* L'élément commence petit et légèrement transparent */
  100% { transform: scale(2); opacity: 0; }    /* L'élément devient plus grand et disparaît à la fin de l'animation */
}

.pulse-circle {
  width: 120px;                 /* Largeur du cercle pulsant */
  height: 120px;                /* Hauteur du cercle pulsant */
  border: 2px solid var(--neon-blue); /* Bordure avec la couleur bleu néon définie dans les variables */
  border-radius: 50%;           /* Forme circulaire pour le cercle */
  position: absolute;           /* Position absolue pour placer le cercle dans le conteneur */
  animation: pulse 3s infinite;  /* Animation de pulsation infinie sur 3 secondes */
}

.delay-1 { animation-delay: 1.5s; } /* Ajoute un délai de 1.5 secondes avant que l'animation ne commence */

/* Effet parallax */
.deco-shapes > div {
  transition: transform 0.3s ease-out; /* Effet de transition lors du déplacement des éléments déco */
}

/* Effets dynamiques de survol 3D */
.hover-3d {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transition fluide et dynamique */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Ombre subtile autour de l'élément */
}

.hover-3d:hover {
  transform: translateY(-2px);    /* Déplacement léger vers le haut lors du survol */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Ombre plus marquée lors du survol */
}

/* Effet de perspective pour les compteurs */
.counter-item {
  perspective: 1000px; /* Ajoute de la perspective pour l'effet 3D */
}

.counter-item h3 {
  transform: translateZ(5px); /* Déplace le texte en avant dans l'espace 3D */
  text-shadow: 0 4px 6px rgba(0,0,0,0.4); /* Ajoute une ombre plus marquée au texte */
}

/* Animation de flottement pour les compteurs */
@keyframes float {
  0%, 50% { transform: translateY(0); } /* L'élément flotte à sa position initiale */
  25% { transform: translateY(-10px); }  /* L'élément monte légèrement */
}

.counter-item:hover h3 {
  animation: float 4s ease-in-out infinite; /* Animation de flottement infinie lors du survol */
  color: white !important; /* Change la couleur du texte lors du survol */
}

/* Navbar */
.navbar {
  background: rgba(0, 54, 37, 0.98); /* Fond sombre avec une transparence */
  backdrop-filter: blur(10px); /* Application d'un flou sur l'arrière-plan */
  border-bottom: 1px solid rgba(94, 210, 189, 0.2); /* Bordure douce en bas */
  position: fixed; /* Position fixe, toujours en haut */
  width: 100%; /* Largeur complète */
  top: 0; /* Fixation en haut */
  z-index: 1050; /* Assure que la navbar est en haut de la pile */
}

/* Logo de la marque */
.nav-logo {
  width: 150px; /* Taille du logo */
  margin-top: -4px; /* Remonte le logo légèrement */
}

/* Texte de la marque avec un dégradé de couleur */
.brand-text {
  font-size: 3rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 5.5px; /* Espacement entre les lettres */
  background: linear-gradient(45deg, #ffffff, #ffffff); /* Dégradé linéaire en fond */
  -webkit-background-clip: text; /* Clip du fond au texte pour obtenir l'effet de dégradé */
  background-clip: text; /* Supporte l'effet de dégradé sur le texte */
  color: transparent; /* Texte transparent pour afficher seulement le dégradé */
}

/* Effet de sous-ligne et d'animation au survol des éléments de navigation */
.nav-text {
  font-size: 1.8rem !important; /* Taille du texte importante pour la navigation */
  position: relative; /* Permet de positionner l'élément ::after par rapport à ce parent */
  padding: 0.5rem 0; /* Espace au-dessus et en dessous du texte */
}

/* Création de la pseudo-ligne sous le texte pour l'animation */
.nav-text::after {
  content: ''; /* Nécessaire pour afficher la pseudo-élément */
  position: absolute; /* Positionnement absolu pour contrôler exactement la ligne */
  width: 0; /* Ligne initialement invisible */
  height: 2px; /* Épaisseur de la ligne */
  bottom: 0; /* Place la ligne au bas du texte */
  left: 50%; /* Centre la ligne horizontalement au départ */
  background: #00f5d4; /* Couleur de l'animation de la ligne */
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Animation fluide avec effet élastique */
}

/* Survol de l'élément de navigation : étend la ligne et ajoute un effet lumineux */
.nav-item:hover .nav-text::after {
  width: 100%; /* La ligne s'étend sur toute la largeur du texte */
  left: 0; /* Aligne la ligne au début du texte */
  box-shadow: 0 0 15px #00f5d4; /* Ajoute un halo lumineux autour de la ligne au survol */
}

/* Style des boutons avec dégradé et ombre */
.gradient-buttons {
  padding: 0.2rem 0.2rem; /* Espacement interne du bouton en haut/bas et gauche/droite */
  margin: 0.5rem; /* Espacement externe autour du bouton */
  border-radius: 20px; /* Arrondi des coins du bouton */
  background: linear-gradient(145deg, 
    rgba(0, 95, 115, 0.9) 0%, /* Début du dégradé avec couleur semi-transparente */
    rgba(0, 43, 54, 0.95) 100%); /* Fin du dégradé avec couleur légèrement plus foncée */
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.2), /* Ombre portée autour du bouton pour effet 3D */
    inset 0 4px 12px rgba(255, 255, 255, 0.1); /* Ombre interne pour donner du relief */
  transition: all 0.4s ease; /* Transition fluide pour toutes les propriétés lors du survol ou changement */
}

/* Styles des éléments du compteur */
.counter-item h3 {
  padding: 0.1rem 0; /* Espacement interne en haut et en bas du chiffre */
  margin: 0.1rem 0; /* Espacement externe en haut et en bas du chiffre */
  font-size: 2rem; /* Taille de la police pour le chiffre */
  letter-spacing: -1px; /* Espacement réduit entre les lettres/chiffres */
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* Ombre portée sur le texte pour effet de relief */
}

.counter-item p {
  font-size: 1rem; /* Taille de la police pour le texte descriptif */
  padding: 0 .1rem; /* Espacement interne horizontal léger */
  line-height: 1.6; /* Hauteur de ligne pour faciliter la lecture */
  letter-spacing: 0.8px; /* Espacement entre les lettres */
  opacity: 0.9; /* Légère transparence pour adoucir le texte */
}

/* Effet au survol pour les éléments avec la classe hover-3d */
.hover-3d:hover {
  transform: translateY(-8px) scale(1.03); /* Déplacement et mise à l'échelle */
  box-shadow: 
    0 12px 30px rgba(0, 245, 212, 0.15),
    inset 0 6px 15px rgba(255, 255, 255, 0.15); /* Ombre au survol */
}

/* Styles pour la mise en page et la structure */
section:last-of-type {
  margin-bottom: 0 !important; /* Supprime l'espace en bas */
  padding-bottom: 3rem !important; /* Ajoute de l'espace en bas */
}

main.container {
  min-height: calc(100vh - 320px); /* Calcule la hauteur minimum en fonction du header et footer */
  padding-bottom: 2rem !important;
}

footer {
  margin-top: auto; /* Positionne le footer en bas */
}

/* Suppression des marges pour le dernier enfant dans le main */
main > *:last-child {
  margin-bottom: 0 !important;
}

/* Header avec une hauteur minimale */
header {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  min-height: calc(100vh - 80px); /* Ajuste la hauteur en fonction de la navbar */
  padding-top: 80px; /* Espacement du haut */
}

/* Conteneur pour les particules avec un index z bas pour être en arrière-plan */
.particles-container {
  z-index: -2 !important;
  pointer-events: none; /* Désactive les interactions avec les particules */
}

/* Décoration avec les formes SVG en arrière-plan */
.deco-shapes svg {
  z-index: -1 !important;
  mix-blend-mode: overlay; /* Mode de mélange pour l'effet de superposition */
}

/* Conteneur de texte centré avec un effet de texte ombré */
.container.text-center {
  z-index: 10 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Ombre de texte */
  transform: translateZ(0); /* Active l'accélération matérielle */
}

/* Styles pour les icônes de contrôle du carousel (précédent et suivant) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none; /* Supprime l'image de fond par défaut des icônes de contrôle */
    width: 3rem; /* Définie la largeur de l'icône */
    height: 3rem; /* Définie la hauteur de l'icône */
    background-color: rgba(0, 0, 0, 0.5); /* Couleur de fond sombre avec une légère transparence */
    border-radius: 50%; /* Rendre les icônes circulaires */
    display: flex; /* Utilisation de Flexbox pour centrer le contenu */
    align-items: center; /* Aligne les éléments à l'intérieur de l'icône verticalement au centre */
    justify-content: center; /* Aligne les éléments à l'intérieur de l'icône horizontalement au centre */
}

/* Styles pour l'élément "avant" (précédent) du carousel */
.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
    content: ""; /* Aucun contenu textuel, seulement un style visuel */
    border: solid white; /* Crée une bordure blanche */
    border-width: 0 4px 4px 0; /* Définit une bordure fine seulement sur le côté droit et le bas pour créer une flèche */
    display: inline-block; /* Permet à l'élément d'être traité comme un bloc en ligne */
    padding: 8px; /* Espace autour de la flèche pour la rendre visible et correctement dimensionnée */
}

/* Rotation de la flèche de l'icône de contrôle précédent (flèche pointant vers la gauche) */
.carousel-control-prev-icon::before {
    transform: rotate(135deg); /* Rotation de 135° pour obtenir une flèche vers la gauche */
    -webkit-transform: rotate(135deg); /* Prise en charge pour les anciens navigateurs Webkit */
}

/* Rotation de la flèche de l'icône de contrôle suivant (flèche pointant vers la droite) */
.carousel-control-next-icon::before {
    transform: rotate(-45deg); /* Rotation de -45° pour obtenir une flèche vers la droite */
    -webkit-transform: rotate(-45deg); /* Prise en charge pour les anciens navigateurs Webkit */
}

/* Traduction du site */
.gtranslate_wrapper select {
  background-color: #000e31 !important; /* Couleur de fond du menu déroulant */
  color: black !important; /* Couleur du texte à l'intérieur du menu */
  border: none; /* Suppression de la bordure par défaut */
  padding: 5px 10px; /* Espacement interne : 5px en haut/bas, 10px à gauche/droite */
  border-radius: 6px; /* Arrondi des coins du menu déroulant */
}

/* Style pour le tableau */
.list-group-item table {
    border-collapse: collapse; /* Fusionne les bordures des cellules pour un look net */
    width: 100%; /* S'assure que le tableau occupe toute la largeur disponible */
    border: 1px solid #ccc; /* Bordure autour du tableau complet */
}

/* Style pour les en-têtes (<th>) et les cellules (<td>) */
.list-group-item th,
.list-group-item td {
    border: 1px solid #ddd; /* Bordure grise autour de chaque cellule */
    padding: 8px; /* Espacement interne pour le contenu */
}

/* (Optionnel) Ajoute un fond gris clair aux en-têtes */
.list-group-item thead th {
    background-color: #f2f2f2; /* Fond gris clair pour les en-têtes */
}

/* Cible tous les éléments de liste dans votre <ul> et supprime la bordure du bas */
.list-group-flush .list-group-item {
    border-bottom: none !important; /* Supprime la bordure inférieure */
    padding-bottom: 0.5rem; /* Ajuste l'espacement inférieur après suppression */
    padding-top: 0.5rem; /* Ajuste l'espacement supérieur */
}

/* 1. Configuration du conteneur d'images */
.image-slider {
    position: relative; /* Position relative pour permettre le positionnement absolu des images */
    overflow: hidden; /* Masque le contenu qui dépasse du conteneur */
}

/* 2. Positionnement des images. L'image de base définit la hauteur du conteneur. */
.image-slider img {
    width: 100%; /* L'image occupe toute la largeur du conteneur */
    height: auto; /* Ajuste la hauteur proportionnellement */
    display: block; /* Supprime les espaces indésirables sous l'image */
}

/* 3. Style pour les images qui doivent alterner (elles sont positionnées absolument) */
.image-slider img:not(:first-child) {
    position: absolute; /* Positionnement absolu pour superposer les images */
    top: 0; /* Aligne en haut du conteneur */
    left: 0; /* Aligne à gauche du conteneur */
    opacity: 0; /* Caché par défaut */
}

/* 4. Définition de l'animation pour l'alternance de la deuxième image */
.image-slider img:nth-child(2) { /* Cible spécifiquement la deuxième image */
    animation: simple-slide 6s infinite; /* Animation continue de 6s */
}

/* Animation de simple-slide pour alterner l'affichage */
@keyframes simple-slide {
    0%, 50% {
        opacity: 0; /* L'image 2 est cachée (Image 1 visible) */
    }
    51%, 100% {
        opacity: 1; /* L'image 2 est affichée, masquant l'image 1 */
    }
}

/* PDF */
.pdf-grid {
  display: grid; /* Active le système de mise en page CSS Grid */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Colonnes responsives avec largeur minimale de 220px */
  gap: 20px;  /* Définit l’espace entre les éléments de la grille */
}

.pdf-card {
  background: white; /* Définit un fond blanc pour la carte */
  border-radius: 12px;  /* Arrondit les coins de la carte */
  border: 1px solid #ccc; /* Bordure grise foncée de 1 pixel */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Ajoute une ombre douce autour de la carte */
  overflow: hidden; /* Cache le contenu qui dépasse des bords arrondis */
  transition: transform 0.2s, box-shadow 0.2s;  /* Anime les transformations et l’ombre */
  cursor: pointer; /* Change le curseur pour indiquer un élément cliquable */
}

.pdf-card:hover {
  transform: translateY(-5px); /* Déplace légèrement la carte vers le haut au survol */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* Renforce l’ombre pour l’effet de survol */
  border-color: #f70b0b; /* Changement de couleur de la bordure au survol pour un effet de focus */
}

.pdf-card img {
  width: 100%; /* L’image occupe toute la largeur de la carte */
  height: 140px; /* Définit une hauteur fixe pour l’image */
  object-fit: cover; /* Adapte l’image sans la déformer en la recadrant si nécessaire */
}

.pdf-content {
  padding: 15px; /* Ajoute un espace intérieur autour du contenu */
}

.pdf-title {
  font-weight: bold; /* Met le texte en gras */
  margin-bottom: 10px; /* Ajoute un espace sous le titre */
  font-size: 1.1em; /* Augmente légèrement la taille du texte */
}

.pdf-description {
  font-size: 0.9em; /* Définit une taille de texte légèrement plus petite */
  color: #555; /* Applique une couleur gris foncé pour le texte */
}

.pdf-grid {
  display: grid; /* Active la mise en page en grille */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Colonnes responsives avec largeur minimale de 220px */
  gap: 20px; /* Définit l’espace entre les éléments de la grille */
}

/* Modal PDF */
.modal {
  display: none; /* Masque la modal par défaut, affichée via JS */
  position: fixed; /* Positionne la modal par rapport à la fenêtre */
  top:0; /* Place la modal en haut de l’écran */
  left:0; /* Place la modal à gauche de l’écran */
  width:100%; /* La modal prend toute la largeur de l’écran */
  height:100%; /* La modal prend toute la hauteur de l’écran */
  background: rgba(0,0,0,0.7); /* Fond semi-transparent sombre */
  justify-content: center; /* Centre le contenu horizontalement */
  align-items: center; /* Centre le contenu verticalement */
  z-index: 1000; /* Assure que la modal est au-dessus des autres éléments */
}

.modal-content { /* Hauteur de la modal par rapport à l’écran */
  width: 80%; /* Largeur de la modal par rapport à l’écran */
  height: 80%; /* Hauteur de la modal par rapport à l’écran */
  background: white; /* Fond blanc pour le contenu de la modal */
  border-radius: 10px; /* Coins arrondis de la modal */
  overflow: hidden; /* Cache le contenu qui dépasse les bords */
  position: relative; /* Position relative pour permettre le positionnement d’éléments internes */
}

.modal-close {
  position: absolute; /* Positionne le bouton par rapport à la modal */
  top:10px; /* Décalage de 10px depuis le haut */
  right:15px; /* Décalage de 15px depuis la droite */
  font-size: 1.5em; /* Taille du texte du bouton */
  cursor: pointer; /* Change le curseur pour indiquer un clic possible */
  color: #333; /* Couleur gris foncé du bouton */
}

iframe {
  width: 100%; /* L’iframe prend toute la largeur du parent */
  height: 100%; /* L’iframe prend toute la hauteur du parent */
  border: none; /* Supprime la bordure par défaut de l’iframe */
}

.content-offset {
    padding-top: 150px !important;  /* Ajoute un espace en haut du contenu, priorité forcée avec !important */
}

/* Conteneur d'image avec une taille et un centrage fixes */
.pdf-image-container {
    width: 100px;         /* Définissez la largeur souhaitée pour l'espace image */
    height: 100px;        /* Définissez la hauteur souhaitée pour l'espace image */
    margin: 0 auto 0px;  /* Centre le conteneur et ajoute une marge en bas */
    display: flex;        /* Permet le centrage vertical et horizontal */
    align-items: center;  /* Centre l'image verticalement */
    justify-content: center; /* Centre l'image horizontalement */
    overflow: hidden;     /* Empêche tout débordement au cas où */
}

/* L'image elle-même à l'intérieur du conteneur */
.pdf-image-container img {
    max-width: 100%; /* L’image ne dépasse pas la largeur de son conteneur */
    max-height: 100%; /* L’image ne dépasse pas la hauteur de son conteneur */
    width: auto; width: auto; /* Conserve la largeur originale si possible */
    height: auto; height: auto; /* Conserve la hauteur originale si possible */
    object-fit: contain; /* L’image est entièrement visible sans être recadrée */
}