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

   TYPO /texte
  
 ----------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'Phaser-Bold';
    src: url("../../squelettes/webfont/Phaser-Bold.woff2") format('woff2'),
         url("../../squelettes/webfont/Phaser-Bold.woff") format('woff');
    font-weight: 700;
    font-style: bold;
}

@font-face {
  font-family: 'Phaser-Medium';
    src: url("../../squelettes/webfont/Phaser-Medium.woff2") format('woff2'),
         url("../../squelettes/webfont/Phaser-Medium.woff") format('woff');
    font-weight: 400;
    font-style: normal;
}


/* Hyperliens
---------------------------------------------- */
::selection{
  background: #f398b5 !important;
  color: #00605c !important;
}

::-moz-selection{
  background: #f398b5 !important;
  color: #00605c !important;
}

body { z-index:1; text-align:left; }
a, a:visited {color:#000000; text-decoration:none;
-webkit-transition-duration: 0.8s; /* Safari */transition-duration: 0.8s; } 
a:focus, 
a:hover, 
a:active { color:#00605c !important;}
a.footer { color:#000000; font-size:12px; float:right; }  
a.footer:hover {color:#f398b5;}  
a.bouton-lieu { padding:12px 25px 10px 25px; text-decoration: none; text-align:center; float:right;
border:1px dashed #F00B21;font-family: 'roboto'; width:100%; margin-bottom:20px; font-weight:300; font-style: normal;}
a.pdf { padding:10px 10px 10px 10px;color:#000000; text-align:center; text-decoration: none;border:1px solid #000000; 
font-family: 'Phaser-Bold'; text-transform:uppercase;}

mark {color:#f398b5; background:none;}
p,.p  {margin-bottom: 1.1em; color:#000000; font-size:15px; }  
p.slogan{ text-transform:uppercase; font-size:2.20em;  float:left; display:block; line-height: 1em; margin-bottom: 0em;   font-family: 'Phaser-Medium';}

footer{margin-right:10px;}
p.colophon {font-size:11px; text-align: right;}

.underline-on-hover:hover {text-decoration: underline;}
.texte_photo p{ font-size:10px;color:#153637;text-align:left;margin-bottom:0px; 
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: 300; }
.colophon p{ text-align : left; font-size:15px; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; color:#00605c;}
.portrait_texte p, .portrait_texte_small p{ font-size:15px;text-align : left;}

b {   font-family: 'Phaser-Bold'; color: #000; }
strong{font-weight: bold;  color: #000; }   
small, .small {font-size: 75%;  color: #000;}   
em, i, .i {
    font-style: italic;
    color: #000;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 
{display: block; margin: 0;padding: 0;font-size: 100%;text-transform:uppercase; color:#00000;  font-family: 'Phaser-Bold';}

h1,.h1 {font-size:8em;line-height: 1.1;margin-bottom: 0;}
h1.titre {font-size:4em;line-height:1;}
h2.surtitre  {display:inline;font-size:1.5em;line-height: 1.3;font-family: 'Phaser-Bold';
text-transform: uppercase;color:#000000; }
.chapo p {font-family: 'Phaser-Bold'; text-transform: uppercase; margin-bottom:0.5em; font-size:2em;color:#000000;line-height: 1.1;} 

h3.display_inline, h3.display_block {display:inline; text-transform:uppercase;  font-size: 1.3em; line-height: 1.2; float:left;font-family: 'Phaser-Bold'; }
h3.display_block {display:block; width:100%;}

.mot-descriptif p {   }
.display_inline {display: inline;font-size: 1.3em;line-height: 1.2; float: left; text-transform:uppercase;  font-family: 'Phaser-Bold';}

ul {margin-bottom: 0em; width:100%; display:block; float:left;}

li.thematique{padding-right: 10px;}
li.thematique:nth-child(2){ padding-left: 10px; border-left:1px #00605c solid; } 

h4, .h4 { font-size: 28px;line-height: 1.2;margin-bottom: 0.5em;text-transform:uppercase;font-family: 'Phaser-Bold';font-weight:700; font-style: bold; color:#00605c;}
h5, .h5 {font-size: 1em;font-weight: bold;margin-bottom: 1.5em;}
h6, .h6 {font-size: 1em;font-weight: bold;}



/* ------------------------------------------ */
/* bouton traduction
/* ------------------------------------------ */
.formulaire_menu_lang { position: relative; display: block; width: auto; z-index:1000; padding-bottom:1.5em; text-align:right; }

.button_left, .button_right, .button_lang { 
color: #000; width:150px; height:25px; padding: 0.5em; vertical-align: middle;font-size: 12px; text-transform:uppercase;}    

.button_right{color:#cda08c;}      
.bouton2, .bouton{position:relative; float:right; height:auto; margin-right:0px; margin-top:17px; }
.bouton2{float:left; margin-left:20px; }
.bouton2 a{position:relative; float:right; height:auto; margin-right:20px; font-family:'helvetica'; font-weight:100; font-size:15px; }
.bouton2 .on{ color:#cda08c  !important; }
  

/*Formulaire */
input,textarea,select,button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color:#00605c;
padding: 3px;background:none; border: 1px solid #00605c; font-size: 18px;border-radius:2px;width:100%;  text-transform:uppercase; font-family: 'Phaser-Bold'; font-weight: 300;}

#mc_embed_signup input .button {border: 1px solid #000;-webkit-appearance: none;color:#cda08c;}
button{background: #cda08c; border: 1px solid #00605c;}
button:hover { background:#f398b5;}

span {color:#000000; text-transform: lowercase; }
span.titre_artiste, span.titre_artiste p, span.titre_adresse  {
    font-size: 1em;
    line-height: 1.2;
    font-style: normal;
    float:left;
    font-family: 'Phaser-Bold'; font-weight: 700;
    margin-bottom:0.4em !important; 
    margin-top:0em !important;
    width:100%;}

.pdf{width:100%; height:auto; display: inline; float:left;}

span.titre_adresse p {font-family: 'Phaser-Bold'; font-size: 14px; float:left;   margin-bottom:0.4em !important;}
br.expo {content: "";display: block;margin-bottom: 0.9em;}
.vignette_expo_texte p {font-size: 1em;line-height: 1.2;margin-bottom: 0.7em;font-style: normal;font-family:'Phaser-Bold'; font-weight: 700;}
.info_vignette_expo p {font-family:'roboto'; font-weight: 300;font-size: 14px;}

/* Logos, documents et images */
img .spip_logos { float: left; margin:0; padding: 0;background-color:white; border: none; }
.spip_documents { margin-bottom:0em; padding: 0; background: none; float:left;display:inline; }
.spip_documents,
.spip_documents_center,
.spip_doc_titre,
.spip_doc_descriptif { margin-right: auto; margin-left: auto; text-align: center;background: none; }
.spip_documents_center { clear: both; display: block; width: 100%; background: none;}
.spip_documents_left { float:left;text-align:left; margin-right:5px;background: none;margin-bottom:5px;padding:0;display:inline;width:100%;}
.spip_documents_right { float: right; margin-left: 1.5em;background: none; }
.spip_doc_titre {}
.spip_doc_descriptif {clear: both;}


html, body {height:100%;    width: 100%; }
body{ margin:0;font-family:arial, sans-serif;   background: #fdc324;}
#page{position:relative; display:inline; height:10px; padding:0px; float:left; width:100%; height:auto }

header { float:left; display:inline;width:100%; height:50px;  position: absolute;
padding-top:10px; top:0; right:0; left:0;  z-index:100; border-bottom:1px solid #000000; }

header.theme{height: auto; z-index: 100;position: relative;padding-top:50px; border-bottom:none;}

.bandeau_hamburger{ float:left; display:block;width:100%; height:auto; z-index: 100;  position: relative;
 top: 0; left: 0; right: 0; border-bottom:1px solid #000000; padding-left:5px;  }

#contenu_header,#contenu_header2 {width:990px; height: auto; display:inline; float:left; position:relative; padding-top:5px; padding-left:10px;}
#contenu_header2 {width:100%; padding-top:2px; padding-left:5px; display:inline; height:40px;}

#contenu_header {width:100%; height: auto; display:block; float:left; position:relative; padding-top:0px;}

.logo_site, .logo_site_2{ display:block; float: left; position : relative; width:250px; 
    padding: 0 20px 20px 20px; height : auto;  }
.logo_site_2{width:50px !important; height : auto; }
.logo_site img {width:100%; height:auto;}
.logo_site2 img {width:auto; height:50px;}

.nom_slogan{width:auto; height: auto; display:inline; float:left; position:relative; margin-bottom:10px; }
.nom_slogan_2{width:100%; height: 30px; display:block; float:left; position:relative; }


nav {display:inline; float:right;  z-index: 2000; position: fixed;
  top: 50px; right: 80px; margin: auto; width: auto; height: 30px;cursor: pointer; }


/* *******************  MENU ******************** */
#nav li {display:inline; float:left; position:relative; padding-right:20px;
font-size:1.3em; font-family:'Phaser-Bold'; text-transform:uppercase;color:#00605c;}
#nav ul { display:inline;float:left; }
#nav a {color:#00605c;  display: block; text-decoration: none;text-transform: uppercase; border-radius:1px;}
#nav .current a, #nav a:hover, #nav a.on{text-decoration:underline;}
.current {background: none;}



/* *******************  MENU programme ******************** */

#nav2{ display:inline;float:left; min-width:100% ; }

#nav2 li {display: table-cell; float:left; position:relative; padding: 3px 5px 0px 5px; border:3px solid #00605c; text-align:center; 
font-size:1.5em; font-family:'Phaser-Bold'; text-transform:uppercase;color:#00605c; width:11.4%;border-right:none;}

#nav2 a {color:#00605c;  display: block; text-decoration: none;text-transform: uppercase; border-radius:1px;}
#nav2 .current a, #nav2 a:hover, #nav2 a.on{text-decoration:underline;}

#nav2 li:nth-child(1) {width:20%;border-left:none;}

#nav4 li {
    display: table-cell;
    float: left;
    position: relative;
    width: auto;
    height:25px;
    padding: 0px 5px 0px 5px;
    text-align: center;
    font-size: 1.3em;
    line-height: 1em;
    font-family: 'Phaser-Bold';
    text-transform: uppercase;
    color: #000000;
    border-right: 1px solid #000000;
}


#nav4 li:nth-last-child(1) {
    border-right: none;
}

#nav4 li:nth-child(1) {
    padding: 0px 5px 0px 0px;
}




/** MENU Hamburger //////////////////////////////////////////*/

.titre_logo{
position:relative;
width:100%;
height:auto;
float:left;
padding-top:85px;
padding-left:250px;
margin-left:-250px;
transition-property: transform;
transition-duration: 1s;
transition-timing-function: ease;
cursor: pointer;
}

.titre_logo:hover{
color:#D75014;
position:relative;
width:280px;
height:auto;
float:left;
padding-top:85px;
 transform: translateX(20px); /* On déplace l'objet */}

.sliding-navbar{
    padding-top:10px;
    position: fixed;
    top:0;
    left:-100%;
    height: 100vh;
    width: 100%;
  background: #fdc324;
    border-right:solid 1px #000;
    transition: left 0.5s ease-in-out;
    z-index: 1500; overflow-y:auto;}
    
.sliding-navbar--open{left: 0px;}
.mask{position:absolute; top: 0px;right:0px;height: 100vh;width:5%;z-index: -100;}
.show{z-index: 200;}
.brand{
    text-decoration: none;
    color: #66121A;
    display: block;
    width: 140px;
    margin: 20px auto 0 auto;
    font-family:sans-serif;
    transition: color 0.2s ease-in-out;}
    
.brand:hover{color: #ccc;}
.navbar--items{list-style-type: none;
height: auto;
    width: 100%;
    display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	padding:0 15px 15px 15px;
}

.navbar--items li{text-align:center;padding-bottom:5px;padding-top:5px; font-size : 1.3em;
  font-family: 'gothic_proBd';
  text-transform: uppercase;
  color: #00605c;}
.navbar--items li:hover{text-decoration:underline;}
.navbar--items li .on{text-decoration:underline;}

.navbar--items li:nth-child(8) {border-bottom:1px solid #00605c; },.navbar--items li:nth-child(8) {border-bottom:1px solid #00605c; }


.bloc_1{ width: 100%; padding: 30px 0 0 0;}



.hamburger-menu {
    z-index: 1510;
    position: fixed;
    top: 48px;
   right: 30px;
    margin: auto;
    width: 70px;
    height: 50px;
    cursor: pointer;
   
    
}

.hamburger {
    position: relative;
    width: 80px;
    height: 5px;
    background: #000000;
    transition: background 0.3s ease-in-out;
}

.hamburger::before,
.hamburger::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 5px;
    background: #000000;
    transition: all 0.3s ease-in-out;
}

.hamburger::before {top: -10px;}
.hamburger::after {top: 10px;}
.menu-opened {background: transparent;}
.menu-opened::before {top: 0;transform: rotate(45deg);}
.menu-opened::after {top: 0;transform: rotate(-45deg);}


/*  les sections  ———————————————————————————————————————————————————  */
section {}
#contenu:focus,#section-0:focus,input,textarea,select,button {outline: none;}
#contenu,#contenu_sommaire {width:100%; height: auto;background:none; Z-index:1;padding:150px 25px 25px 25px;position:relative; float:left;}
#conteneur,#conteneur_portrait, #conteneur_portrait_small    
{ height:auto;width:100%;display:table;padding: 0px 0px 70px 0px;behavior: url("../../plugins/display-table.htc");}
#conteneur_portrait_small{width:100%;padding: 0px;float:left;}
.contenu_portrait_small, .contenu_portrait_small_2 {width:50%;padding: 0px;float:left;position:relative;}
.contenu_portrait_small_2{width:100%;padding: 0px;height:auto;transition: transform 0.3s ease;}
.contenu_portrait_small_2:hover {transform: translateX(10px); }

/* ———————————————————————————————————————————————————
SOMMAIRE
———————————————————————————————————————————————————  */
.texte_en_deux_collones {
    column-count: 2;      /* Crée deux colonnes */
    column-gap: 2em;      /* Espace entre les colonnes */
    padding: 15px 10px 15px 10px;
    text-align: justify; 
}

.texte_en_deux_collones p {
    text-align: left;
    font-size: 1.5em;
    color: #000;
     font-family: 'Phaser-Medium';
    text-align: justify; 
}

#contenu_sommaire {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding:80px 0px 25px 0px;
}

.archive_affiche {
    width: 33%;
    height: 44vw;
    padding: 1% 1% 1% 1%;
    display: block;
    float: left;
    transition: transform 0.3s ease;
}
.archive_affiche img {width:100%;}
.archive_affiche:hover { transform: rotate(-5deg); }


.arrow{float:left;   }


h3.accordion{text-transform:uppercase;font-family: 'Phaser-Bold';width:auto;display:inline;
font-size:1.5em;line-height: 1.1; padding-bottom:0px; text-align: left; color:#000;}
h3.accordion:hover .arrow { transform: rotate(45deg);  transition: transform 0.3s ease;}


/* ———————————————————————————————————————————————————
Rubrique
———————————————————————————————————————————————————  */
/* Première colonne : Logo de l'article */
.colonne.logo {width: 35%;padding: 0 10px 0 0px;}




/* Deuxième colonne : Surtitre, Titre, Chapo, Texte */
.colonne.texte {width: 45%;}

/* Troisième colonne : Documents */
.colonne.documents {width: 20%;padding: 10px;}


/* _____________________

qui sommes nous
__________________________*/
.texte_en_deux_collones_article {
    column-count: 2;      /* Crée deux colonnes */
    column-gap: 2em;      /* Espace entre les colonnes */
    padding: 15px 10px 15px 10px;
    text-align: justify; 
}

.texte_en_deux_collones_article p {
    text-align: left;
    font-size: 15px;
    color: #000;
    font-family: 'Phaser-medium';
    text-align: left; 
}



/* _____________________

les invités du festival 

__________________________*/

#accordion, .conteneur_accordion, .accordion-content, .article {
    overflow: visible; /* Permet le débordement visible */
}

#accordion {
    border-bottom: 1px solid #000;
    display: flex;
    flex-direction: column;
    z-index: 1; /* Assurez-vous que l'accordéon est en dessous de l'image */

}

.conteneur_accordion {
    margin-left: 0;
    width: 100%;
    height: auto;
    float: left;

}

.accordion-content {
    display: flex;
    flex-wrap: wrap;
    z-index: 1000;
}

.article {
    width: auto;
    padding: 10px;
    border: 1px dashed #000;
    position: relative; /* Assurez-vous que l'image-preview est positionnée par rapport à l'article */
}

.article h3, .article h4 {
    margin: 0;
    padding: 0;     z-index:10000;
    color:#000;
}

.article img {
    max-width: 100%;
    height: auto;
    z-index:1000;
}

.image-preview {
    position: absolute; /* Position absolue par rapport à .article */
    z-index: 1000; /* Assurez-vous que l'image est au-dessus des autres éléments */
    width: auto;
    height: auto;
    transition: top 0.3s ease-in-out; /* Ajoute une transition pour l'effet de tremblement */
   width:200px;height:200px;  left:0;
    display: none; 
}

.image-preview img {
    width: auto;
    height: auto;
    max-width: auto;
    max-height: 100%;
    object-fit: contain;
        border: 1px solid #000;
     filter: grayscale(100%); 
    position: absolute;
   bottom:0%;

}



/* _____________________

les images

__________________________*/


/* Conteneur de la grille */
.image-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 4 colonnes */
    gap: 10px; /* Espacement entre les colonnes */
    margin-top: 10px;
}

/* Chaque élément de l'image */
.logo-item {text-align: left;}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Ajustez selon vos besoins */
    justify-content: center; /* Centre horizontalement */
    align-content: center; /* Centre verticalement */
    background: #FFF;
    gap: 10px; /* Espacement entre les éléments */
    margin-top: 10px;
    padding: 20px;
    height: 100%; /* Assurez-vous que le conteneur a une hauteur définie */
}

.logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.logo-item a {
    display: flex;
    justify-content: center;
    align-items: center;
}


.logo-item img {
    filter: grayscale(100%); /* Applique un filtre gris */
    transition: filter 0.3s ease; /* Ajoute une transition pour un effet de survol */
}

.logo-item img:hover {
    filter: grayscale(0%); /* Retire le filtre gris au survol */
}




/* Appliquer différentes tailles aux images */
.image {
    width: 100%; /* L'image prend toute la largeur de sa cellule */
    height: auto; /* Respecte les proportions de l'image */
    max-height: 200px; /* Limite la hauteur à 200px pour que les images restent cohérentes */
    object-fit: cover; /* Maintient l'image sans déformation */
}

/* Pour des tailles spécifiques d'images différentes, tu peux utiliser des classes supplémentaires si nécessaire */
.image-small { max-height: 150px;}

.image-large {max-height: 250px;}

#texte{ width:100%; display:block; float:left; position:relative; border-top: 1px solid #00000; padding-top:20px;  }


/* LES INVITES  portrait */

.portrait {width: 35%;padding: 0 10px 0 0px;float:left;position:relative;}
.portrait p {color:#176361;}
.portrait img { width:100%;height:auto; -webkit-filter: grayscale(100%); padding: 0px 0px 0px 0px; 
filter: grayscale(100%); margin-top:-10px; opacity: 0.9;}
.portrait img:hover{filter: none; opacity: 1;}
.portrait_texte,.portrait_texte_small{ padding: 40px 0px 40px 0px;width: 40%;float:left;margin-left:1%; display:table-cell;position:relative; }
.portrait_texte_small{ width: 50%; }


.mentions-legales {
      max-width: 50%;
      margin: 50px auto;
      padding: 20px;
      background-color: #fff;
      line-height: 1.6;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }



@media (max-width: 1250px) { 
    
h1, .h1 { font-size: 8em; line-height: 1;margin-bottom: 0;}
    
#contenu_header {
    width: 90%;
    height: auto;
}  
    
    
}


@media (max-width: 500px) { 
body {width: 100%;padding: 0 5px;}
h1, .h1 { font-size: 6em; line-height: 1;margin-bottom: 0;}
h2.surtitre{ width:100%; padding-top:25px;}
    
h1.titre { font-size: 2em;line-height: 1;} 
h3.display_inline, h3.display_block {
    font-size: 1.1em;
    line-height: 1.1;
}
.display_inline {font-size: 1.1em;line-height: 1.1;}

.archive_affiche {
    width: 33%;
    height: 44vw;
    padding: 5px 5px 5px 5px;
}
    
    
header {
    height: 100px;
    position: absolute;
    padding-top: 10px; 
}
    
#contenu_header {
    width: 90%;
    height: auto;
    padding-left:0;
}  
    
#contenu_header2 {
    width: 80%;
    padding-top: 2px;
    padding-left: 5px;
    height: 90px;
}
    

p.slogan {
    text-transform: uppercase;
    font-size: 1.8em;
    line-height: 1em;
}
    

.texte_en_deux_collones {
    column-count: 1;
    column-gap: 0;
    padding: 0;
    text-align: justify;
    font-size: 0.8em;
}


#nav4 li {font-size: 1em; height: auto;}    
#contenu_sommaire { padding: 80px 0px 25px 0px;}   
.navbar--items {
    list-style-type: none;
    height: auto;
    width: 100%;
    padding: 0 0px 15px 0px;}
    
.colonne.logo { width: 100%;padding: 50px 0 50px 0  ; margin-bottom:30px;border-bottom: 1px solid #000;   } 
.colonne.texte {width: 100%;}
    
    .colonne.documents {
    width: 100%;
    padding: 10px;
}
    

.article { min-width: 100%;}
    
    .image-grid {
    display: grid
;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}
    
.portrait {width: 100%;padding: 0 0 0 0;}
    
    .texte_en_deux_collones_article {
    column-count: 1;

}
    
}