@charset "UTF-8";
/* Body */
body {
	font-family: "Myriad Web Pro", Arial, Helvetica, Verdana, sans-serif;
	background-color: #FFFFFF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 200;
}

a:link {
	font-size: 10pt;
	font-family: "Myriad Web Pro", Arial, Helvetica, Verdana, sans-serif;
	line-height: 16pt;
	text-decoration: none;
	color: #666666;
}
a:visited { font-size: 10pt; font-family: "Myriad Web Pro", Arial, Helvetica, Verdana, sans-serif; line-height: 16pt; text-decoration: none;color: #909090; }
a:hover { font-size: 10pt; font-family: "Myriad Web Pro", Arial, Helvetica, Verdana, sans-serif; line-height: 16pt; text-decoration: none; }
a:active { font-size: 10pt; font-family: "Myriad Web Pro", Arial, Helvetica, Verdana, sans-serif; }

/* Positionnement du parent */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Cache le sous-menu par défaut et le place sous le bouton */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff; /* À adapter selon votre thème */
  min-width: 150px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
  z-index: 1000;
  padding: 0;
  list-style: none;
}

/* Style des liens à l'intérieur du menu déroulant */
.dropdown-content li a {
  color: #333;
  padding: 10px 7px;
  text-decoration: none;
  display: block;
}

/* Effet au survol des liens du sous-menu */
.dropdown-content li a:hover {
  background-color: #f1f1f1;
}

/* Affiche le menu au survol du parent */
.dropdown:hover .dropdown-content {
  display: block;
}
.Tete_Langue { color: #303030;
	font-size: 11.4pt;
	font-family: "Myriad Web Pro Italic", Helvetica, Geneva, Arial, SunSans-Regular, sans-serif, "Myriad Web Pro";
	font-weight: 700;
	font-style: bold;
	text-decoration: none;
	margin-top :80px;
}
.Expo { color: #666; font-size: 12pt; font-family: Helvetica, "Myriad Web Pro", Arial, Geneva, SunSans-Regular, sans-serif; font-weight: 600; font-style: italic; line-height: 25pt; margin-top: 12px; margin-left: 18px; }
.ExpoDate { color: #999; font-size: 10pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 12pt; text-indent: 18px; margin-left: 18px; padding-left: 0; }
.ExpoDateSuite { color: #999; font-size: 10pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 12pt; }

.Info_Expos { color: #808080; font-size: 11pt; font-family: "Myriad Web Pro", Helvetica, Geneva, Arial, SunSans-Regular, sans-serif, "Myriad Web Pro"; }

.TITRE_EXPO { color: #808080;
	font-size: 10.2pt;
	font-family: "Myriad Web Pro Italic", Helvetica, Geneva, Arial, SunSans-Regular, sans-serif, "Myriad Web Pro";
	font-weight: 700;
	font-style: italic;
	text-decoration: none;
	margin-top :80px;
}
.TITRE_EXPO_List { color: #808080;
	font-size: 10pt;
	font-family: "Myriad Web Pro Italic", Helvetica, Geneva, Arial, SunSans-Regular, sans-serif, "Myriad Web Pro";
	font-weight: 700;
	font-style: italic;
	text-decoration: none;
	margin-top :0px;
}
.TypeExpo {	color: #bc8f8f;
	font-size: 8pt;
	font-family: "Myriad Web Pro", Helvetica, Geneva, Arial, SunSans-Regular, sans-serif, "Myriad Web Pro";
	text-decoration: none;
}
.titreArticl {
    color: #999;
    font-size: 11pt;
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    line-height: 16pt;
    top: 0px;
    margin-top: 0px;
    margin-left: 0px;
}
.titreArticlPlus {
	color: #999;
	font-size: 9pt;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	line-height: 18pt;
	top: 30px;
	margin-top: 20px;
}

/* Container */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	background-color: #FFFFFF;
}

/* Navigation */
header {
	width: 100%;
	height: 60px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #000000;
	
}
.logo {
	color: #fff;
	font-weight: bold;
	text-align: undefined;
	width: 10%;
	float: left;
	margin-top: 15px;
	margin-left: 50px;
	letter-spacing: 4px;
}
nav {
	float: right;
	width: 55%;
	text-align: right;
	margin-right: 25px;
}
header nav ul {
	list-style: none;
	float: right;
}
nav ul li {
	float: left;
	color: #000000;
	font-size: 7px; /* Font size boutons en haut */
	text-align: left;
	margin-right: 25px;
	letter-spacing: 2px;
	font-weight: bold;
	transition: all 0.3s linear;
}
ul li a {
	color: #000000;
	text-decoration: none;
}
ul li:hover a {
	color: #B80003;
}
.hero_header {
	color: #FFFFFF;
	text-align: center;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 20px;
	letter-spacing: 4px;
}
/* Hero Section */
.hero {
	background-color: #ffffff;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;     /* Centre l'iframe horizontalement */
    justify-content: center;    /* Centre l'iframe verticalement */
    
    /* On enlève l'aspect-ratio ici, car c'est l'iframe qui doit le gérer */
    width: 100%;
	height: auto;
    min-height: 100px;       /* Optionnel : évite que la section soit trop plate */
    max-height: none;       /* Un peu plus de marge pour le padding */
}

.light {
	font-weight: bold;
	color: #717070;
}
.tagline {
	text-align: center;
	color: #FFFFFF;
	margin-top: 4px;
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#IMG {
    display: flex;
	max-width: 1020;       /* Ajustez selon la taille souhaitée de votre diaporama */
    width: 100%;
}
iframe {
    width: 100%;
    aspect-ratio: 3/2;       /* Définit la forme */
    display: block;
    border: none;
}

/* About Section */
.text_column {
	flex: 1;              /* Les colonnes se partagent l'espace équitablement */
    min-width: 300px;     /* Empêche les colonnes de devenir trop étroites */
    text-align: justify;  /* Optionnel : pour un aspect "livre" propre */
    line-height: 1.6;     /* Améliore la lisibilité (espace entre les lignes) */
    color: #333;
    font-size: 16px;
}
.text_column2 {
flex: 1;              /* Les colonnes se partagent l'espace équitablement */
    min-width: 300px;     /* Empêche les colonnes de devenir trop étroites */
    text-align: justify;  /* Optionnel : pour un aspect "livre" propre */
    line-height: 1.6;     /* Améliore la lisibilité (espace entre les lignes) */
    color: #333;
    font-size: 16px;
	}
.text_column4 {
	width: 40%; 
    margin-left: 20px;
}
.text_column_annee {
    width: 100%;
    padding: 0 20px 0 0; /* Haut, Droite, Bas, Gauche (donc 0 à gauche) */
    margin: 0;
    color: #bc8f8f;
    font-size: 8pt;
    font-family: "Myriad Web Pro", Helvetica, Arial, sans-serif;
    font-weight: lighter;
}
.about {
	display: flex;
    flex-wrap: wrap;      /* Permet aux colonnes de passer l'une sous l'autre sur petit écran */
    justify-content: center;
    gap: 40px;            /* Espace entre les deux blocs de texte */
    padding: 60px 10%;    /* Marge interne pour que le texte ne touche pas les bords de l'écran */
    max-width: 1400px;    /* Empêche le texte de devenir trop large sur les écrans géants */
    margin: 0 auto;       /* Centre toute la section dans la page */
	}
.about2 {
	display: flex;
    flex-direction: column; /* Force l'empilement vertical */
    align-items: flex-start;           /* Espace entre les deux blocs de texte */
    padding: 60px 10%;    /* Marge interne pour que le texte ne touche pas les bords de l'écran */
    max-width: 1400px;    /* Empêche le texte de devenir trop large sur les écrans géants */
    margin: 0 auto;       /* Centre toute la section dans la page */
	}

/* Essai colonne */

.conteneur-biblio {
    column-count: 2;        /* Nombre de colonnes */
    column-gap: 40px;       /* Espace entre les deux colonnes */
    max-width: 1000px;      /* Optionnel : largeur max de votre bloc */
    margin: 0 auto;
}

.titreArticl {
    break-inside: avoid;    /* INDISPENSABLE : empêche un bloc de se couper en deux entre deux colonnes */
    margin-bottom: 20px;    /* Espace entre chaque entrée */
    display: block;         /* S'assure que le bloc se comporte bien */
}




/* Stats Gallery */
.stats {
	color: #717070;
	margin-bottom: 5px;
}
.gallery {
	clear: both;
	display: inline-block;
	width: 100%;
	background-color: #FFFFFF;
	/* [disabled]min-width: 400px;
*/
	padding-bottom: 35px;
	padding-top: 0px;
	margin-top: -5px;
	margin-bottom: 0px;
}
.thumbnail {
	width: 25%;
	text-align: center;
	float: left;
	margin-top: 35px;
}
.gallery .thumbnail h4 {
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 3px;
	margin-left: 5px;
	color: #ffffff;
}
.gallery .thumbnail p {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #A3A3A3;
}
/* Parallax Section */
.banner {
	background-color: #ACACAC;
	background-image: url(../Base_Img/2006_0900VA_AtIvry062.jpg);
	height: 400px;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}
.Biographie {
	color: #FFFFFF;
	text-align: right;
	padding-right: 3.5%;
	padding-top: 110px;
	letter-spacing: 2px;
	margin-top: 0px;
    font-family: "Arial", sans-serif;
    font-size: 40px; /* Taille du corps */
    font-weight: bold;
	line-height: 0.2;
	}
.parallax {
	color: #FFFFFF;
	text-align: right;
	padding-right: 100px;
	padding-top: 110px;
	letter-spacing: 2px;
	margin-top: 0px;
}
.parallax_description {
	color: #FFFFFF;
	text-align: right;
	padding-right: 3.5%;
	width: 50%;
	float: right;
	font-weight: lighter;
	line-height: 23px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.parallax_description a {
    color: #FF9696; 
    text-decoration: none;
}

.parallax_description a:hover {
    color: #DC0000; /* Gris clair au survol */
    text-decoration: underline;
}


/* More info */

footer {
    display: flex !important;       /* On force le Flexbox */
    flex-direction: row !important; /* On force la ligne */
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    gap: 70px;
    background-color: #ffffff;
    padding: 50px 0;
}

.footer_column {
display: inline-block; /* Sécurité si flex échoue */
    width: 450px !important;
    max-width: 45% !important;
    text-align: center;
}

footer .footer_column h3 {
	color: #ACACAC;
	text-align: center;
	padding-top: 70px;
}

footer .footer_column p {
	color: #717070;
	background-color: #FFFFFF;
}

.cards {
width: 100%;                /* L'image prend toute la largeur de sa colonne */
    height: auto;
    max-width: 420px;
    display: block;
    margin: 0 auto 15px;        /* Centre l'image dans la colonne */
}

footer .footer_column p {
    text-align: left;     /* Centre le texte sous l'image */
    line-height: 25px;
    font-weight: lighter;
    margin: 10px auto;      /* Supprime les marges gauches forcées */
}

footer .footer_column a {
	padding-left: 20px;
	padding-right: 20px;
	font-size: 18px ; 
	color: #8C8483; 
    text-decoration: none;
}

footer .footer_column a:hover {
	padding-left: 20px;
	padding-right: 20px;
	font-size: 18px ; 
    color: #980000; /* Gris clair au survol */
    text-decoration: underline;
}

.button {
	width: 250px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom:auto;
	margin-left: auto;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	border: 3px solid #FFFFFF;
	color: #FFFFFF;
	transition: all 0.3s linear;
}
.button:hover {
	background-color: #FEFEFE;
	color: #C4C4C4;
	cursor: pointer;
}

.button-container {
    display: flex;       /* Aligne les enfants sur une ligne */
    gap: 20px;          /* Espace entre les deux boutons */
    justify-content: center; /* Centre les boutons (optionnel) */
}

.link-button {
    text-decoration: none;
    color: inherit;
    flex: 1;            /* Optionnel : pour que les deux boutons aient la même largeur */
    max-width: 300px;   /* Optionnel : pour limiter la largeur */
}

.copyright {
	text-align: center;
	padding-top: 60px;
	padding-bottom: 30px;
	background-color: #FFFFFF;
	color: #ACACAC;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
	font-size: 8pt;
}
.footer_banner {
	background-color: #ACACAC;
	margin-top: 80px;
	padding-top: 45px;
	padding-bottom: 50PX;
	margin-bottom: 0px;
	background-image: url(../images/pattern.png);
	background-repeat: repeat;
}
footer {
	display: inline-block;
}
.hidden {
	display: none;
}

/* Mobile */
@media (max-width: 320px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	display: none;
}
header nav ul {
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
}
.text_column {
	width: 100%;
	text-align: justify;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 90%;
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 12px;
	float: none;
	text-align: center;
}
.banner {
	background-color: #ACACAC;
	background-image: none;
}
.tagline {
	margin-top: 20px;
	line-height: 22px;
}
.hero_header {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 22px;
	text-align: center;
}
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #043745;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	overflow: auto;
	display: inline-block;
	background: #ffffff;
}
header nav ul {
	padding: 0px;
	float: none;
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
}
.text_column {
	width: 100%;
	text-align: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
	
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 30%;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: none;
	width: 100%;
	text-align: center;
}
.thumbnail {
	width: 50%;
}
.parallax {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 20%;
}
.parallax_description {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	padding-top: 30px;
}
.banner {
	padding-left: 20px;
	padding-right: 20px;
}
.footer_column {
	width: 100%;
}
}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
.text_column {
	width: 100%;
}
.thumbnail {
	width: 50%;
}
.text_column {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.banner {
	margin-top: 0px;
	padding-top: 0px;
}
.conteneur-biblio {
        column-count: 1;
    }
}