/*------------------------------POLICE-------------------------------------------------------------------*/
@font-face {
    font-family: 'Gold_Lines';
    font-weight: 400;
    src: url('../Polices/gold_lines/Gold_Lines_Serif_Trial.woff') format('woff'),
         url('../Polices/gold_lines/Gold_Lines_Serif_Trial.otf') format('opentype');
}
@font-face {
    font-family: 'Minions';
    font-weight: 400;
    src: url('../Polices/Minion_Pro_Cond_Subhead/Minion_Pro_Cond_Subhead.otf') format('opentype');
}
#Titre {
    font-family: 'Gold_Lines';
    color: #000000;
    font-weight: bolder;
    font-size: 18px ;
    letter-spacing: 6px;
   
}
#TitreOeuvre {
    text-align: center;
    padding-top: 28px;
    padding-bottom: 2px;
    font-family: "Minions";
    font-weight: bolder;
    font-size: 28px;
    letter-spacing: 3px;
}
html {
    height: 100%; /* Définit une hauteur de 100% pour l'élément html */
}
 
body {
    display: flex;
    flex-direction: column;
    min-height: 100%; /* Assure que le corps prend au moins la hauteur de la fenêtre */
}
 
form {
    flex-grow: 1; /* Fait en sorte que le formulaire prenne l'espace disponible */
}
 
footer {
    margin-top: auto; /* Place le footer en bas de la page */
}
 
 
 
/* -----------------------------------MOSAIC----------------------------------------------------------*/
 
 
/* Reset des marges et des rembourrages pour assurer une apparence cohérente */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
    font-family: "Minions";
}
 
 
body {
    background-color: rgb(245, 245, 245) ;
}
 
 
img {
    width: 100%; /* Assure que l'image remplit complètement le conteneur */
    height: 100%; /* Permet de maintenir les proportions de l'image */
    /*display: block; /* Supprime l'espace réservé sous l'image causé par display: inline */
    border-radius: 7.8px;
    object-fit: fill;
}
 
ul {
    list-style-type: circle;
    padding-left: 5%;
}
 
 
 
 
 
/*-----------------------TRAITEMENT DU LOGO HEADER-----------------------------------------------------*/
#logo {
    width: 49px;
    height: auto;
    margin: 1px auto;
 
}
/*--------------------------------------------HEADER------------------------------------------------------*/
 
header {
    background-color: #ffffff;
    text-align: center;
    color: #ffffff;
    padding: 10px;
    position: sticky;
    top: 0;
    border: 0.3px solid #ffffff;
    z-index: 900; /* Assurez-vous que le header reste au-dessus du contenu de la page */
    transition: padding 0.7s ease, height 0.7s ease; /* Ajoutez une transition pour le padding et la hauteur */
}
 
/* Ajoutez cette règle pour centrer l'image dans le header */
header img {
    display: block;
    margin: 0 auto;
    max-width: 100%; /* Assurez-vous que l'image ne dépasse pas la largeur du header */
    transition: width 1s ease; /* Ajoutez une transition pour la largeur du logo */
}
 
/* Ajoutez cette règle pour le titre du header */
header h1 {
    transition: display 1s ease; /* Ajoutez une transition pour la propriété display du titre */
}
 
/* Ajoutez cette règle pour le header fixe (sticky) lorsque le titre est caché */
header.titre-cache {
    padding: 5px;  /* Ajuste la hauteur du header lorsque le titre est caché */
}
 
/* Ajoutez cette règle pour centrer l'image dans le header lorsque le titre est caché */
header.titre-cache img {
    width: 5%; /* Ajuste la taille du logo lorsque le titre est caché */
}
 
/* Ajoutez cette règle pour le titre du header lorsque le titre est caché */
header.titre-cache h1 {
    display: none; /* Cache le titre lorsque le titre est caché */
}
 
.divTitre {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 180px; /* Définissez la largeur maximale souhaitée */
    margin: 0 auto; /* Utilisez 'auto' pour centrer horizontalement */
}
a {
    text-decoration: none; /* Supprime le soulignement par défaut */
    color: #000; /* Définit la couleur du texte pour les liens non visités */
    /* Ajoutez d'autres styles selon vos besoins */
}
 
ul {
    list-style: none;
}
 
form {
    width: 40%; /* Ajuste la largeur selon tes besoins */
    margin: 0 auto; /* Centre le formulaire horizontalement */
    padding: 1em;
    border: 1px solid#C51028;
    border-radius: 1em;
    background-color: #d7d7d7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
}
 
fieldset {
    width: 100%; /* Ajuste la largeur selon tes besoins */
    box-sizing: border-box;
    border: 1px solid #C51028;
    margin-left: 0; /* Ajuste la marge selon tes besoins */
}
 
label span {
    display: inline-block;
    width: 120px;
    text-align: right;
}
 
input, textarea {
    font: 1em sans-serif;
    width: 200px;
    box-sizing: border-box;
    border: 1px solid #999;
}
 
input[type=checkbox], input[type=radio] {
    width: auto;
    border: none;
}
 
input[type=submit]{
    border-radius: 8px;
}
 
input:focus, textarea:focus {
    border-color: #000;
}
 
 
 
textarea {
    vertical-align: top;
    height: 5em;
    resize: vertical;
}
 
 
button {
    margin: 20px 0 0 124px;
}
 
label {
  position: relative;
}
 
section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 1em;
}
 
 
footer {
    font-family: 'Minions';
    margin-top: 20px;
    padding: 10px;
    background-color: #e4e3e3;
    display: flex;
    flex-direction: row;
}
 
#Copyright{
    width: 100%;
    display: flex;
    justify-content: left;
}
 
#Contact{
    width: 40%;
    display: flex;
    justify-content: right;
}
 
/* Ajoutez ceci à votre CSS existant */
 
#espaceClient {
    position: absolute;
    top: 10px;
    right: 10px;
}
 
#clientBtn {
    background-color:#645154c3;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Gold_Lines'; /* Utilisez la police Gold_Lines ou une autre de votre choix */
    border-radius: 5px;
}
 
#clientOptions {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    background-color: #ffffff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
 
#clientOptions a {
    display: block;
    color: #000000;
    padding: 10px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-family: 'Minions'; /* Utilisez la police Minions ou une autre de votre choix */
}
 
#clientOptions a:hover {
    background-color: #d7d7d7;
}
 
#clientOptions.show {
    display: block;
}