@font-face {
    font-family: 'OPTIFrench';
    src: url('OPTIFrench-Script.woff2') format('woff2'),
         url('OPTIFrench-Script.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Style général pour le body */
body {
    font-family: 'OPTIFrench', cursive; /* Applique la police 'OPTIFrench' */
    color: #634724; /* Définir la couleur du texte */
	 
    font-size: 1.2cm ; /* Taille du texte */
    margin: 0;
    padding: 0;
}

/* Style pour le header et footer */
header, footer {
   background-color: #f8f8f8;
	    padding: 20px;
    text-align: center;
}

/* Style pour le conteneur de recherche avec image de fond */
#searchContainer {
    background-image: url('LesSyfonneDuWeb.png'); /* Image de fond */
    background-repeat: repeat; /* Répète l'image pour remplir tout l'espace */
    background-size: auto; /* Garde la taille originale de l'image */
    background-position: top left; /* Commence la répétition en haut à gauche */
    padding: 20px;
    text-align: center;
    color: #fff;
}

/* Style pour le titre */
#searchTitle {
    font-size: 5vw;  /* Utiliser 'vw' pour une taille dynamique en fonction de la largeur de l'écran */
    margin-bottom: 20px;
    font-weight: bold;
}

/* Style des éléments dans le conteneur de recherche */
#searchInput {
    padding: 10px;
    margin: 10px 0;
    width: 60%;
    font-size: 2vw;  /* Utilisation de 'vw' pour un texte responsive */
}

#printButton {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#printButton:hover {
    background-color: #45a049;
}

/* Style pour la pagination */
.page-button {
    margin: 5px;
    padding: 5px 10px;
    cursor: pointer;
    border: none;
    background-color: #ddd;
    color: #333;
}

.page-button.active {
    background-color: #333;
    color: #fff;
}

.page-button:hover {
    background-color: #bbb;
}

/* Style pour l'iframe des résultats de recherche */
.resultFrame {
    width: 100%;
    height: 40vw; /* Utilisation de 'vw' pour la hauteur dynamique en fonction de la largeur */
    border: 1px solid #ddd;
    background-image: url('images.jpg');
    background-position: center;
}

/* Media Queries pour les appareils mobiles et tablettes */

/* Tablette et petits écrans */
@media screen and (max-width: 1024px) {
    #searchInput {
        width: 80%; /* Augmenter la largeur de l'input sur les petits écrans */
    }
    #searchTitle {
        font-size: 6vw; /* Ajuster la taille du titre pour les tablettes */
    }
    .resultFrame {
        height: 30vw; /* Ajuster la hauteur de l'iframe */
    }
    footer {
        height: 30vw; /* Ajuster la hauteur du footer */
    }
}

/* Smartphones */
@media screen and (max-width: 768px) {
    #searchInput {
        width: 90%; /* Largeur presque complète de l'input pour les smartphones */
        font-size: 5vw; /* Réduire la taille de la police de l'input */
    }
    #searchTitle {
        font-size: 8vw; /* Taille de titre encore plus petite sur les smartphones */
    }
    .resultFrame {
        height: 50vw; /* Ajuster la hauteur de l'iframe sur les smartphones */
    }
    footer {
        height: 50vw; /* Ajuster la hauteur du footer sur les smartphones */
    }
}