.body{
    margin: 0;
    padding: 0;
    bottom: 0;
    counter-reset: footnote 0;
 --paged-layout : booklet;
    
}

.couverture { 
    page: macouverture;
    font-family: 'Courier New', Courier, monospace;
    font-size: 24pt;
    color: rgb(255, 0, 0);
  }

  .couverture p {
    font-family:'Courier New', Courier, monospace ;
    color: #000000;
    font-size: 10pt;
    line-height: 10pt;
    justify-content: left;
}

@page{
    size: 200mm 200mm;
}

  @page :left{ 
    font-family: 'Courier New', Courier, monospace;

    margin: 15mm 12mm 32mm 22mm;  
    @bottom-left {
        content: counter(page)  ;
    }

  }
  @page :right{ 
    font-family: 'Courier New', Courier, monospace;

    margin: 15mm 22mm 32mm 12mm; 
    @bottom-right {
        content: counter(page);
    }
  }


.chapichapo {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16pt;
    top: 10mm;
    left: 10mm;
    width: 100%;
    color: rgb(255, 0, 0);
    text-align:left;

}


/* style.css */
.introduction {

    border-radius: 8px;
    width: 100%; /* Ajuste la largeur ici */
    max-width: 1250px; /* Limite la largeur maximale */
    margin: 0;
    text-align: left;
    z-index: 99
}
.introduction h1 {
    font-family:'Courier New', Courier, monospace ;
    font-weight: bold;
    font-size: 14pt;
    line-height: 14pt;
    color: #000000;
}
.introduction p {
    font-family:'Courier New', Courier, monospace ;
    color: #000000;
    font-size: 10pt;
    line-height: 10pt;
    justify-content: left;
}
.introduction h2 {
    font-family:'Courier New', Courier, monospace ;
    font-weight: bold;
    font-size: 14pt;
    line-height: 14pt;
    color: #000000;
}





/* style.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.pastille {
    position: relative;
    width: 3vw;
    height: 3vw;
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    touch-action: manipulation; /* Améliore le support tactile */
    z-index: 100

}
.pastille:hover {
    background-color: #ffffff;
}
.content {
    font-family:'Courier New', Courier, monospace ;
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    background-color: rgb(0, 0, 0);

    font-size: 14px;
    width: 200px;
    top: 110%; /* Positionné en dessous de la pastille */
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
    overflow-wrap: break-word; /* Empêche le débordement du texte */
    z-index: 100


}
.pastille:hover .content {
    opacity: 1;
    visibility: visible;
}




.gallery {
    display: flex;
    gap: 10px; /* Espace de 10px entre les images */
    margin-top: 20px; /* Espace entre le texte et les images */
}
.gallery img {
    width: 100%; /* Chaque image prendra 100% de la largeur allouée dans le flex container */
    height: auto;
    border-radius: 8px; /* Optionnel : coins arrondis pour les images */
}
/* Style pour l'image contenant un lien cliquable */
.image-container {
    position: fixed; /* Position fixe pour rester visible lors du défilement */
    top: 20%; /* Positionner l'image au centre verticalement */
    left: 10%; /* Positionner l'image au centre horizontalement */
    transform: translatex(-10%); /* Décalage vertical */
    z-index: 1; /* L'image sera au-dessus du contenu */
    display: flex; /* Flexbox pour l'alignement */
    justify-content: center;
    align-items: center;
}
/* Style pour la deuxième image contenant un lien cliquable */
.image-container2 {
    position: fixed; /* Position fixe pour rester visible lors du défilement */
    top: 40%; /* Positionner cette image plus bas que la première */
    right: 10%; /* Positionner cette image à droite de la fenêtre */
    transform: translateX(10%); /* Décalage horizontal */
    z-index: 1; /* L'image sera au-dessus du contenu */
    display: flex; /* Flexbox pour l'alignement */
    justify-content: right;
    align-items: center;
}
/* Style pour la deuxième image contenant un lien cliquable */
.image-container3 {
    position: fixed; /* Position fixe pour rester visible lors du défilement */
    top: 70%; /* Positionner cette image plus bas que la première */
    right: 70%; /* Positionner cette image à droite de la fenêtre */
    transform: translateX(40%); /* Décalage horizontal */
    z-index: 1; /* L'image sera au-dessus du contenu */
    display: flex; /* Flexbox pour l'alignement */
    justify-content: center;
    align-items: center;
}
/* Style pour l'image contenant un lien cliquable */
.image-container4 {
    position: fixed; /* Position fixe pour rester visible lors du défilement */
    top: 20%; /* Positionner l'image au centre verticalement */
    left: 10%; /* Positionner l'image au centre horizontalement */
    transform: translatex(-10%); /* Décalage vertical */
    z-index: 1; /* L'image sera au-dessus du contenu */
    display: flex; /* Flexbox pour l'alignement */
    justify-content: center;
    align-items: center;
}
/* Style de l'image cliquable */
.clickable-image {
    width: 200px; /* Largeur de l'image */
    height: auto; /* Conserver le ratio de l'image */
    border-radius: 8px;
    cursor: pointer; /* Ajouter un curseur pointer pour indiquer qu'il s'agit d'un lien cliquable */
    transition: background-color 0.3s, box-shadow 0.3s; /* Transition pour le changement de couleur et d'ombre */
}
/* Changement lors du survol de l'image */
.clickable-image:hover {
    background-color: rgb(255, 0, 0); /* Fond jaune au survol */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Légère ombre au survol pour accentuer l'effet */
}




/* Conteneur principal */
.gallery-container {
    display: flex; /* Active le mode Flexbox */
    justify-content: space-between; /* Espace uniforme entre les images */
    align-items: center; /* Aligne les images verticalement */
    width: 100%; /* Occupe toute la largeur de la colonne */
    gap: 10px; /* Espacement entre les images */
}
/* Images */
.gallery img {
    flex: 1; /* Permet aux images de s'adapter automatiquement */
    max-width: 100%; /* Empêche les images de dépasser leur conteneur */
    height: auto; /* Garde les proportions */
    border: 2px solid #ddd; /* Bordure autour des images */
    border-radius: 5px; /* Coins arrondis */
}




.image1 {
    position: fixed; /* Image fixe par rapport à l'écran */
    top: 40%; /* Centrée verticalement */
    left: 60%; /* Centrée horizontalement */
    transform: translate(-50%, -50%); /* Ajuste le centre exact */
    width: 10em; /* Largeur de l'image */
    height: auto; /* Maintient le ratio de l'image */
    opacity: 1; /* Opacité par défaut */
    transition: opacity 0.5s ease; /* Transition fluide pour la disparition */
    z-index: 50; /* Place l'image au-dessus de tout le contenu */
    border-radius: 5px; /* Arrondi les coins */
}
.image1:hover {
    opacity: 0; /* L'image disparaît au survol */
}
.image2 {
    position: fixed; /* Image fixe par rapport à l'écran */
    top: 10%; /* Centrée verticalement */
    left: 40%; /* Centrée horizontalement */
    transform: translate(-50%, -50%); /* Ajuste le centre exact */
    width: 7em; /* Largeur de l'image */
    height: auto; /* Maintient le ratio de l'image */
    opacity: 1; /* Opacité par défaut */
    transition: opacity 0.5s ease; /* Transition fluide pour la disparition */
    z-index: 50; /* Place l'image au-dessus de tout le contenu */
    border-radius: 5px; /* Arrondi les coins */
}
.image2:hover {
    opacity: 0; /* L'image disparaît au survol */
}
.image3 {
    position: fixed; /* Image fixe par rapport à l'écran */
    top: 70%; /* Centrée verticalement */
    left: 20%; /* Centrée horizontalement */
    transform: translate(-50%, -50%); /* Ajuste le centre exact */
    width: 10em; /* Largeur de l'image */
    height: auto; /* Maintient le ratio de l'image */
    opacity: 1; /* Opacité par défaut */
    transition: opacity 0.5s ease; /* Transition fluide pour la disparition */
    z-index: 50; /* Place l'image au-dessus de tout le contenu */
    border-radius: 5px; /* Arrondi les coins */
}
.image3:hover {
    opacity: 0; /* L'image disparaît au survol */
}




a {
    text-decoration: none; /* Supprime le soulignement */
    color: rgb(255, 0, 0);
    font-weight: bold; /* Texte en gras */
    transition: color 0.3s ease; /* Animation pour le changement de couleur */
}