/* styles.css */

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 800

.wix-madefor-display-<uniquifier> {
    font-family: "Wix Madefor Display", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}


@font-face {
  font-family: "Avenir Light";
  src: url("fonts/Avenir-Light.ttf") format("truetype");
  font-weight: 300; /* Light */
  font-style: normal;
}


body {
    font-family: "Avenir Light", sans-serif; /* Arial, sans-serif;*/
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.15rem);/* entre 16.8px et 18.4px */
    line-height: 1.6; /* haque ligne de texte aura une hauteur égale à 1.6 × la taille de police. */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;/* Empile header, main, footer */
    min-height: 100vh; /* Permet au body de prendre toute la hauteur de la fenêtre */
    height: 100%;            /* Le body occupe toute la hauteur */


}


/* ------------------- BANNIERE SUPERIEURE ------------------- */
header {
    top: 0;
    width: 100%; /* assure que le header occupe toute la largeur */
}


.top-banner {
  background-color: #C5CDD0;
  padding: clamp(10px, 3.5vw, 2%) clamp(10px, 4vw, 3%);
  box-sizing: border-box; /* évite que padding crée du débordement */
    font-size: clamp(6px, 2.5vw, 40px);
      letter-spacing: 0.9rem;
  font-style: normal;
    text-align: right;

}

.top-banner h1 {
  margin: 0;
  color: #757575;

}

/* Sur écrans petits (ex: < 600px) */
@media (max-width: 600px) {
  .top-banner h1 {
    width: 70%;           /* texte occupe un peu moins de largeur */
    margin-left: 30%;     /* espace suffisant pour le burger */
    letter-spacing: 0.4rem; /* réduit l’espacement entre lettres */
    font-family: "Avenir Light";
    src: url("fonts/Avenir-Light.ttf") format("truetype");
    font-weight: 300; /* Light */
    font-style: normal;
  }
}


/*.top-banner {
    background-color: #C5CDD0;
    text-align: right;
    padding-right: clamp(10px, 4vw, 3%);
    padding-left: 100px;
    padding-top: clamp(10px, 3.5vw, 2%);
    padding-bottom: clamp(10px, 3.5vw, 2%);
    letter-spacing: 0.9rem;
    font-size: clamp(7px, 2.5vw, 40px);
    font-style:normal;

}

.top-banner h1 {
    margin: 0;
    color: #757575;
}*/



/* -------------------------- MENU SOUS LA BANNIERE SUPERIEURE -------------------------- */

.menu-list {
display: flex;
	list-style: none;
	margin: 0;
	padding-right:3%;
    padding-left: 3%;
	padding-top: 1%;
	padding-bottom: 1%;
	background-color: #C5CDD0; /* background de la bannière du menu */
	justify-content: space-between;
}


/* Texte du menu */
.menu-list a {
    color: #757575;
    text-decoration: none;
    font-weight: normal;
    font-size: 1.7em;
    text-align: center;
}

/* Boutons burger invisible */
.menu-toggle {
    display: none; /* Caché par défaut */
}
.menu-close {
    display: none;  /* Caché par défaut */
}
.menu-list li a:hover {
    color: #004236;
}


/* Media query pour les petits écrans */
@media (max-width: 999px) {

    /* Cacher le menu par défaut */
    .menu-list {
        display: none;
    }

    /* Pour que le header soit une référence de position */
    .site-header {
      position: relative;
    }

    /* Bouton burger visible */
    .menu-toggle {
        position: absolute;
        left: clamp(10px, 2vw, 20px); /* marge à gauche adaptative */
        top: 50%;                     /* milieu vertical du header */
        transform: translateY(-50%);  /* ajustement parfait */
        cursor: pointer;
    }


    /* Bouton toggle pour le menu */
    #menu-toggle {
        background-color: #C5CDD0; /* Couleur de fond du bouton */
        color: #757575; /* Couleur de l'icône */
        border: none; /* Retire les bordures */
        border-radius: 5px; /* Coins arrondis */
        padding: 10px 15px; /* Espacement interne pour agrandir le bouton */
        font-size: 24px; /* Taille de l'icône */
        cursor: pointer; /* Curseur pointeur pour indiquer que c'est cliquable */
        display: flex; /* Pour centrer le contenu */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  /* Légère ombre pour effet 3D */
        transition: background-color 0.3s, transform 0.2s; /* Animations fluides */
    }

    /* Effet au survol */
    #menu-toggle:hover {
        background-color: #C5CDD0; /* Change légèrement la couleur */
        transform:  translateY(-50%) scale(1.1); /* Légère mise en valeur au survol */
    }

    /* Style actif */
    #menu-toggle:active {
        transform: translateY(-50%) scale(0.95); /* Petit effet d'appui */
    }

    /* Icône Material Symbols */
    #menu-icon {
        font-size: clamp(25px, 3vw, 30px); /* Taille de l'icône (ajustable) */
        display: block;
        pointer-events: none; /* Empêche de cliquer sur l'icône elle-même */
    }

    /* Animation de slide-in pour le menu déroulant */
    @keyframes slideDown {
        from {
            transform: translateY(-50%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Affiche le menu lorsque la classe "open" est ajoutée */
    .menu.open .menu-list {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw; /* Occupe toute la largeur de l'écran */
        height: 100vh; /* Occupe toute la hauteur de l'écran */
        display: flex; /* Affiche le menu en mode vertical */
        list-style: none;
        flex-direction: column; /* Menu vertical */
        background-color: white; /* background de la bannière du menu */
        position: absolute;
        margin-top:0;
    	justify-content: center; /* Centre verticalement */
    	align-items: center; /* Centre horizontalement */
	    gap: 15px;
        overflow-y: auto; /* Permet de scroller si nécessaire */
    	animation: slideDown 0.3s ease-out; /* Ajoute l’animation */	
        z-index: 1000;        /* bien au-dessus de la galerie */
    }

    /* Texte du menu déroulant */
    .menu-list a {
    	color: #757575;
    	text-decoration: none;
    	font-weight: normal;
    	font-size: clamp(20px, 3vw, 40px);
    	text-align: center; /* Centre le texte dans chaque lien */
    	width: 100%; /* Chaque lien prend toute la largeur */
   }
    .menu-list li a:hover {
    	 color: #004236;
    }


    /* Bouton burger visible */
    .menu-close {
        display: none;  /* Caché par défaut */
        cursor: pointer;
        position: fixed;
        top: 15px;
        left: 15px;
    }

    /* Bouton supplémentaire (caché par défaut) */
    #menu-close {
        background-color: #C5CDD0; /* Couleur de fond du bouton */
        color: #757575; /* Couleur de l'icône */
        border: none; /* Retire les bordures */
        border-radius: 5px; /* Coins arrondis */
        padding: 10px 15px; /* Espacement interne pour agrandir le bouton */
        font-size: 24px; /* Taille de l'icône */
        cursor: pointer; /* Curseur pointeur pour indiquer que c'est cliquable */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  /* Légère ombre pour effet 3D */
        transition: background-color 0.3s, transform 0.2s; /* Animations fluides */
        z-index: 1000; /* Par-dessus le contenu principal */
    }


    /* Effet au survol */
    #menu-close:hover {
        background-color: #C5CDD0; /* Change légèrement la couleur */
        transform: scale(1.1); /* Légère mise en valeur au survol */
    }

    /* Style actif */
    #menu-close:active {
        transform: scale(0.95); /* Petit effet d'appui */
    }
}






/* ----------------- GENERAL - SECTIONS ----------------- */



main {
    flex: 1; /* Permet à main de prendre tout l'espace disponible */
    padding: 4%;
    font-size: 1em;
}

section {
    display: none; /* Cache toutes les sections par défaut */
}

section.active {
    display: block; /* Affiche uniquement la section active */
}



/* -------------- SPECIFICITE PAGE ACTUALITES -------------------- */
/* Page Actualités */

/* Centrer l'image dans la section Actualités */
.actualites-image {
    display: flex;
    justify-content: center; /* Centrer l'image horizontalement */
    align-items: center; /* Centrer l'image verticalement si nécessaire */
    margin-top: 2%; /* Espacement au-dessus de l'image */
}

.actualites-image img {
    max-width: 70%; /* Assure que l'image ne dépasse pas la largeur du conteneur */
    height: auto; /* Maintient les proportions de l'image */
    border-radius: 1px; /* Facultatif : ajout d'un léger arrondi aux coins de l'image */
}



/* ---------------- BANNIERE INFERIEURE : FOOTER --------------------- */



/* Footer reste en bas */
footer {
    background-color: #C5CDD0;
    color: #555;
    /*text-align:center;*/
    padding: 1%;
    margin-top: auto;  /* Pousse le footer vers le bas */

}




.contact a:hover i.fa-instagram {
  color: #E1306C; /* rose Instagram */
}

.contact a:hover i.fa-linkedin {
  color: #0077b5; /* bleu LinkedIn */
}

.contact a:hover i.fa-envelope {
  color: #ff5733; /* jaune pour l’email */
}





.footer-top {
  text-align: left;
  color: #555;
}
.footer-top a {
  color: #555;
  text-decoration: none;
}



.footer-bottom {
  text-align: left;
  margin-top: 0.6em; /* espace entre le bas de linkedin et la barre horizontale */
  color: #555;
  border-top: 0.5px solid #757575; /* barre horizontale */
  padding-top: 0.7em; /* espace entre le bas de la barre horizontale et le texte */
}
.footer-bottom a {
  color: #555;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #004236; 
}

.contact {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5em 0; /* marge en dessous de la liste */
}

.contact li {
  margin-bottom: 0.3em; /* interligne entre mail/linkedin/insta */
}

.contact a {
  color: #555;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5em; /* espace entre icône et texte */
}




.contact a i {
  width: 1.3em;    /* largeur fixe */
  color: #555;
  transition: color 0.3s;
  text-align: center;
  display: inline-block;
}

.footer-text {
  margin: 0; /* pas de marge par défaut */
}





/* Responsive */
/*@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }*/
/*  .footer-section  {
    justify-content: center;
  }*/
}






/* ------------------------------------------------------- */

/* Galerie */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em; /* 10 px ?*/
    justify-content: center;
}


.thumbnail {
    width: 150px;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid white;
    will-change: transform;      /* prépare le GPU pour l’animation */
    transition: transform 0.3s ease ; /* transition fluide pour le hover */
}


/* Responsive : 2 images par ligne sur petits écrans */
@media (max-width: 480px) {
    .thumbnail {
        width: calc(50% - 0.5em); /* moitié de l'écran moins la moitié du gap */
        height: auto;
        aspect-ratio: 1 / 1; /* force un carré */
    }
}



/* Image à l’intérieur du picture */
.thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* conserve les proportions et remplit le conteneur */
}


.thumbnail:hover {
    transform: scale(1.1);
}



/* Galerie Section Expositions */
.gallery-expo {
    display: flex;
    flex-wrap: wrap;
    gap: 1em; /* 10 px ?*/
    justify-content: center;
    z-index: 1;          /* bas niveau */
}
.thumbnail-expo {
    width: 280px;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid white;
    will-change: transform;      /* prépare le GPU pour l’animation */
    transition: transform 0.3s ease ; /* transition fluide pour le hover */
}


.gallery-expo-item {
    display: flex;
    flex-direction: column; /* titre au-dessus, image en dessous */
    align-items: center;    /* tout centré */
    max-width: 250px;       /* limite la largeur de chaque bloc */
    cursor: pointer;

}

.gallery-expo-title {
  font-size: 1.2em;
  margin-bottom: 8px;   /* espace entre le titre et l’image */
  font-family: 'Avenir Light', sans-serif;
}

.gallery-expo-title:hover {
         color: #C5CDD0;
    }

.thumbnail-expo:hover {
    transform: scale(1.03);
}



.gallery-expo a {
  text-decoration: none;
  color: inherit;
}

.gallery-expo a:visited {
  color: inherit;
}





/* ---------------- Lightbox --------------------- */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.lightbox-content {
    display: flex;
    flex-direction: column; /* Permet d'empiler l'image et la légende */
    align-items: center;
    justify-content: center;
    max-width: 80%;
    max-height: 80%;
}
.lightbox img {
    width: 50%;
    height: 50%;
    object-fit: contain; /* Maintient les proportions */
}


/* Légende sous l'image */
.lightbox-caption {
    color: black;
    text-align: center;
    margin-top: 2%;
    font-size: 1.2em;
}

/* ---------------- Boutons de Navigation de la Lightbox --------------------- */


.nav-btn {
    position: absolute;
    top: 50%;
    background: none;
    border: none;
    color: #C5CDD0;
    font-size: 2.5rem; /* Taille des icônes */
    cursor: pointer;
    z-index: 10;
    transform: translateY(-50%);
}

#prev-btn {
    left: 5%; /* Place le bouton à gauche */
}

#next-btn {
    right: 5%; /* Place le bouton à droite */
}

/* Croix pour fermer */
.close-btn {
    position: absolute;
    top: 5%;
    right: 5%;
    background: none;
    border: none;
    font-size: 2.5rem; /* Taille de l'icône */
    color: #C5CDD0;
    cursor: pointer;
}


/* Icônes Material Symbols */
.material-symbols-outlined {
    font-size: inherit; /* Hérite de la taille définie par le parent */
    line-height: 1; /* Ajuste l'alignement vertical */
}



/* Bouton d'agrandissement */
.expand-lightbox {
    position: absolute;
    top: 5%;
    left: 5%;
    background: white;
    color: #C5CDD0;
    border: none;
    font-size: 2.5rem;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 10;
}

/* Si on veut que les boutons changent d'aspect quand le curseur passe dessus
.close-btn:hover {
    color: #ff6666;
}
.nav-btn:hover {
    color: #ff6666; /* Changement de couleur au survol */
}
.expand-lightbox:hover {
    color: #ff6666;
}
*/








/* Image agrandie en mode plein écran */
#lightbox-image {
    transition: all 0.3s ease; /* Transition fluide pour le changement de taille */
}



/* Fullscreen responsive sur mobile */
@media (max-width: 768px) {
    #lightbox.fullscreen {
        width: 100%;
        height: 100%;
    }

    #lightbox.fullscreen img {
        width: 95vw;          /* largeur automatique pour conserver les proportions */
        height: 95vw;        /* hauteur maximale = hauteur de l'écran */
        object-fit: contain;   /* image entière visible, pas de déformation */
    }

    .lightbox-caption {
        font-size: 1em;
        margin-top: 2%;
        padding: 0 10px;
    }

    .nav-btn, .close-btn, .expand-lightbox {
        font-size: 1rem;       /* boutons plus petits pour mobile */
        padding: 4px 8px;
 
    }
    .nav-btn, .expand-lightbox {
        font-size: 1rem;       /* boutons plus petits pour mobile */
        padding: 4px 8px;
        /*display:none;*/
    }
    .expand-lightbox {
        font-size: 1rem;       /* boutons plus petits pour mobile */
        padding: 4px 8px;
        display:none;
    }
    #prev-btn { left: 2%; }
    #next-btn { right: 2%; }
    .close-btn { top: 2%; right: 2%; }
    .expand-lightbox { top: 2%; left: 2%; }
}

/* ----------------------- GENERALITES : TEXTE --------------------- */



/* Titres */


h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);  /* 32px → 56px max */
  font-weight: 700; /* bien marqué */
}

h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem); /* 28px → 40px max */
  font-weight: 600;
  text-align: center;
}

h3 {
  font-size: clamp(1.5rem, 3.5vw, 2rem); /* 24px → 32px max */
  font-weight: 500;
}

h4 {
  font-size: clamp(1.25rem, 3vw, 1.5rem); /* 20px → 24px max */
  font-weight: 500;
}

h5 {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem); /* 17px → 20px max */
  font-weight: 400;
}

h6 {
  font-size: clamp(1rem, 2vw, 1.1rem); /* proche du texte normal */
  font-weight: 400;
}

/* Petits textes (ex. légendes, notes) */
.small-text {
  font-size: clamp(0.8rem, 1.5vw, 0.9rem);
  color: #555;
}




/*h4 {
  text-align: center;
  font-size: clamp(7px, 2vw, 15px)
}
h3 {
  text-align: center;
  font-size: clamp(7px, 3vw, 18px)
}
h2 {
  text-align: center;
  font-size: clamp(7px, 3vw, 22px)
}
h1.center {
    text-align: center;
    font-size: clamp(7px, 4vw, 28px)

}
*/




p {
    text-align: justify;
    width: 90%;        /* occupe 90% de la largeur du conteneur */
    max-width: 700px;  /* mais ne dépasse jamais 700px */
    margin: 0 auto;    /* centré */
    font-family: "Avenir Light";
  src: url("fonts/Avenir-Light.ttf") format("truetype");
  font-weight: 300; /* Light */
  font-style: normal;
}
span {
    text-align: justify;
    width: 90%;        /* occupe 90% de la largeur du conteneur */
    max-width: 700px;  /* mais ne dépasse jamais 700px */
    margin: 0 auto;    /* centré */
}
.center {
    text-align: center;
}

.foot {
    text-align: left;
    max-width: 10000px;  /* mais ne dépasse jamais 700px */

}

strong {
  font-weight: bold;  /* Gras */
}

em {
  font-style: italic; /* Italique */
}

/* ------------------------------------------------------------------ */

/* Personnaliser le style des liens */
a.url {font-style: normal;
    color: #333; /* inherit : Hérite de la couleur du texte environnant */
    text-decoration: none; /* Enlève le soulignement */
}
/* Style au survol du lien */
a.url:hover {
    color: #004236; /* Par exemple, rouge */
    text-decoration: none; /* underline : Ajoute un soulignement au survol */
}