html,
body{height: 100%;margin: 0;}
body {  display: flex;
    flex-direction: column; /* L'élément enfant sera empilé verticalement */
    min-height: 100vh; /* Assure-toi que la hauteur minimale de la page soit 100% de la fenêtre */
    margin: 0; }
#page, #page_article{position:relative; display:inline; padding:0px; float:left; flex: 1; background:#7fa39c;}
#page_article{background:#7fa39c;}
footer {position:relative; width: 100%; height:auto; padding-bottom:15px; margin-top:20px; display:block; float:left; }

@-moz-keyframes anim { 0%  {opacity:0;}100% {opacity:1;}}
@-webkit-keyframes anim {0%  {opacity:0;}100% {opacity:1;}}
@-o-keyframes anim {0%  {opacity:0;}100% {opacity:1;}}
@-ms-keyframes anim {0%  {opacity:0;}100% {opacity:1;}}
@keyframes anim {   0%  {opacity:0;}100% {opacity:1;}}

/** header ////////////////////////////////////////// */

header { float:left; display:inline;width:100%; height:auto; z-index: 900;  position: absolute;
top:0; right:0; left:0;z-index:1000;
opacity:0; -moz-animation: anim 0.25s linear forwards 0.25s; -webkit-animation: anim 0.25s linear forwards 0.25s;-o-animation: anim 0.25s linear forwards 0.25s;-ms-animation: anim 0.25s linear forwards 0.25s;animation: anim 0.25s linear forwards 0.25s;}

header.bandeau{height: auto;background:#7fa39c ;  z-index: 900;position: fixed; }
#contenu_header,#contenu_header2 {width:990px; height: auto; display:inline; float:left; position:relative;}
#contenu_header2 {width:100%; display:inline; }

.display_inline {display:inline;padding:10px 10px 3px 10px;  font-size: 2em; line-height: 1.2; float:left; font-family: 'nanami_roundedthin_oblique'; width:auto; text-transform:uppercase;letter-spacing: .1rem;}
.display_inline_2 {display:inline;padding:9px 10px 3px 10px;  font-size: 1em; line-height: 1.2; float:left; font-family: 'nanami_roundedbook'; width:auto; }
.titre_site {display: inline;font-family: 'nanami_roundedthin'; font-size: 2em;padding: 10px 10px 3px 10px;line-height: 1.2;float: left; letter-spacing: 0.2rem;}
.bandeau_hamburger{ float:left; display:block;width:100%; height:auto; z-index: 100;  position: relative;top: 0; left: 0; right: 0; padding-left:5px;  }

/** 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 {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 25%;
  padding-top: 90px;
  background: #dabbd5;
  border-left: solid 1px #000;
  transition: opacity 0.5s ease-in-out; /* Transition uniquement sur l'opacité */
  z-index: 1000;
  overflow-y: auto;
  opacity: 0; /* Initialement, le menu est invisible */
  pointer-events: none; /* Empêche l'interaction avec les éléments du menu quand il est caché */
}


.sliding-navbar--open {opacity: 1; pointer-events: auto; /* Permet l'interaction avec les éléments du menu */}

.mask{position:absolute; top: 0px;left:0px;height: 100vh;width:60%;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;}


/* Style général pour la liste */
.navbar--items {
  list-style-type: none;   /* Supprime les puces de la liste */
  height: auto;
  width: 100%;             /* Largeur de 100% pour le conteneur */
  display: flex;
  flex-direction: column;  /* Disposition verticale des éléments */
  padding: 0 0 0 10px;     /* Pas de padding autour de la liste */
  margin: 0;               /* Pas de marge autour de la liste */
}

/* Style pour chaque élément de la liste */
.navbar--items li {
  text-align: left;        /* Alignement du texte à gauche */
  padding: 5px 0;          /* Un peu de padding pour espacer les éléments */
  font-size: 2em;          /* Taille de la police */
  font-family: 'nanami_roundedthin';  /* Police de l'élément */
  text-transform: uppercase; /* Mettre en majuscule */
  color: #000;            /* Couleur du texte */
  width: 100%;             /* Chaque item prend toute la largeur du conteneur */
}

/* Effet au survol des éléments */
.navbar--items li:hover, .navbar--items li a.on {
  font-family: 'nanami_roundedbook'; /* Changement de police au survol */
}

/* Style pour les liens dans la liste */
.navbar--items li a {
  text-decoration: none;    /* Supprime le soulignement des liens */
  color: inherit;           /* Le lien héritera de la couleur de son parent */
  display: block;           /* Lien prenant toute la largeur de l'élément */
  padding: 10px 0;          /* Padding pour agrandir la zone cliquable */
  font-size: inherit;       /* Hérite de la taille de police de son parent */
}

/* Changer l'apparence du lien au survol */
.navbar--items li a:hover {
  color: #000;  /* Couleur du texte au survol */
  text-decoration: none; /* Enlever le soulignement au survol */
}



.hamburger-menu {
    z-index: 1510;
    position: fixed;
    top: 0;
   right: 15px;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: none;
    border-radius:50%;
    
}

.hamburger {margin-top: 24px;
    margin-left: 7px;
    position: relative;
    width: 35px;
    height: 3px;
    background: #000;
    transition: background 0.3s ease-in-out;
}

.hamburger::before,
.hamburger::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 3px;
    background: #000;
    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, #contenu_galerie {width:100%; height: auto;background:none; Z-index:1;padding:102px 0px 0px 0px;position:relative; float:left; opacity:0; -moz-animation: anim 1s linear forwards 1s; -webkit-animation: anim 1s linear forwards 0.5s;-o-animation: anim 1s linear forwards 0.5s;-ms-animation: anim 1s linear forwards 0.5s;animation: anim 1s linear forwards 0.5s;}

#contenu_galerie {width:100%; height: auto;background:none; Z-index:1;padding:32px 0px 0px 0px;position:relative; float:left;}
#contenu_sommaire {padding:50px 0px 25px 0px;}
#conteneur{height:auto;width:100%;display:table;padding: 0px 0px 70px 0px;behavior: url("../../plugins/display-table.htc");}


/* ------------------------------------------ */
/* sommaire
/* ------------------------------------------ */


.swiper-container {
    width: 100vw; /* 100% de la largeur de la fenêtre */
    height: 100vh; /* 100% de la hauteur de la fenêtre */
    position: fixed;
    top: 0;
    left: 0;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajuster l'image sans déformation */
}



#image_sommaire {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;  /* Cache les parties de l'image qui débordent */
    opacity:0; -moz-animation: anim 1s linear forwards 1s; -webkit-animation: anim 1s linear forwards 0.5s;-o-animation: anim 1s linear forwards 0.5s;-ms-animation: anim 1s linear forwards 0.5s;animation: anim 1s linear forwards 0.5s; 
}

#image_sommaire img {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Permet de recadrer l'image tout en couvrant l'élément */
  transform: translate(-50%, -50%);  /* Centre l'image */
}

/* Le texte qui se positionne sous l'image */
#texte_sommaire {
  width: 100%;
  height: auto; /* Ajustez selon vos besoins */
  background-color: #908cbf;
  position: absolute;
    top: 100%;
  z-index:700; /* Le texte doit être au-dessus de l'image */
  padding: 20px;
}

.titre_site_2 {
    display:block
    font-family: 'nanami_roundedbook';
    font-size: 3em;
    padding: 10px 10px 3px 10px;
    line-height: 1.2;
    float: left;
    letter-spacing: 0.2rem;
color: #fff;
    text-shadow: 
        0 0 2px #fff,
        0 0 5px #fff,   /* Lueur encore plus forte */
        0 0 10px rgba(255, 255, 255, 0.8),  /* Lueur intense avec un peu de transparence */
        0 0 13px rgba(255, 255, 255, 0.6);  /* Lueur très intense */
}

.titre_slogan_blanc {display:block;padding:10px 10px 3px 10px;  font-size: 3em; line-height: 1.2; float:left; 
    font-family: 'nanami_roundedthin_oblique'; width:auto; text-transform:uppercase;letter-spacing: .1rem;color: #fff;}

.legende {
    position: fixed;
    bottom: 30px;
    left: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 12px;
    border-radius: 3px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    font-family: 'wotfardlight'; 
}





/* ------------------------------------------ */
/* rubrique 
/* ------------------------------------------ */

#menu_thematique{ width:100%; padding-top : 70px; dysplay: inline; position:relative;  }
#nav3 { list-style-type: none; padding: 0; margin: 0; display: flex;}
#nav3 li { margin-right: 20px;}
#nav3 a { text-decoration: none;color: #000;padding:10px;font-family: 'wotfardlight'; text-transform: uppercase;}
#nav3 a:hover, #nav3 a.on  { text-decoration: underline;}


/* Conteneur principal */
article.edition {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
    animation: fadein 4.5s;
    -moz-animation: fadein 4.5s;
    -webkit-animation: fadein 4.5s;
    -o-animation: fadein 4.5s;
    padding-bottom:22px;
}


/* Conteneur avec Flexbox : 2 colonnes sur grands écrans et responsive */
.conteneur {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de se décomposer sur plusieurs lignes */
    justify-content: space-between; /* Distribution uniforme entre les colonnes */
    gap:0; /* Espacement entre les éléments */
    width: 100%;
    margin: 0 auto;
    padding: 0 0 30px 0;
    
    opacity:0; -moz-animation: anim 1s linear forwards 1s; -webkit-animation: anim 1s linear forwards 0.5s;-o-animation: anim 1s linear forwards 0.5s;-ms-animation: anim 1s linear forwards 0.5s;animation: anim 1s linear forwards 0.5s;

}

/* Chaque rectangle avec une largeur de 45% */
.rectangle {
    width: 50%; /* Chaque image prend 45% de la largeur, ce qui permet d'en avoir deux par ligne */
    margin-bottom: 5px;
    display: block;
    position: relative;
    box-sizing: border-box; /* Pour éviter les débordements des marges */
}

/* Rectangles contenant l'image */
.rectangle_texte {
    width: 100%;
    position: relative;
    height: 105px;
    float: left;
    display: block;
    margin-bottom: 0px;
 padding-left:10px;
}

/* Style des images : pleine largeur et recadrage automatique en 16:9 */
.rectangle img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Recadrage automatique de l'image en 16:9 */
    aspect-ratio: 16 / 9; /* Maintien du ratio 16:9 */
}

/* Wrapper pour l'image et la légende */
.image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
}




/* Article
/* ------------------------------------------ */

.colonne_photo_oeuvre, .colonne_photo, .colonne_texte{ width:67%; padding-right:3%; float:left; height:auto; position:relative; 
opacity:0; -moz-animation: anim 0.5s linear forwards 0.5s; -webkit-animation: anim 0.5s linear forwards 0.5s;-o-animation: anim 1s linear forwards 0.5s;-ms-animation: anim 1s linear forwards 0.5s;animation: anim 1s linear forwards 0.5s;}

.colonne_texte{ width:33%; padding-right:5%; padding-top:10px;}


/* Aligner les éléments de texte horizontalement */
.article-text {
  display: flex;                /* Utiliser flexbox pour l'alignement horizontal */
  gap: 20px;                    /* Espacement entre les éléments */
  align-items: center;          /* Aligner verticalement les éléments au centre */
}

/* Empêcher les éléments <li> de se comporter comme des blocs */
.article-text li {
  list-style: none;             /* Supprimer les puces de la liste */
  margin: 0;
  font-size: 16px;              /* Taille de police pour le texte */
  line-height: 1.5;
  display: inline-block;        /* Assurer qu'ils soient en ligne */
  padding: 0;                   /* Supprimer les espacements par défaut */
}

/* Styles pour chaque menu */
li.menu_article {
  font-size: 2em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0;
  font-family: 'nanami_roundedthin';
  color: #000;
    border-right : 1px solid #000;
    padding-right:20px;
}


li.menu_article_artiste {
  font-size: 1em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0;
   font-family: 'wotfardbold_italic';
  color: #000;
}


li.menu_article_thematique{   
  font-size: 1em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0;
  font-family: 'wotfardlight';
  color: #000;
  border-left : 1px solid #000;
    padding-left:20px;
}

li.menu_article:hover, li.menu_article_artiste:hover, li.menu_article_thematique:hover  { text-decoration: underline; }
/* Reste de tes styles */

.article-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.article-image {
  flex-shrink: 0;
  max-width: 10%;
  margin-right: 15px;
}

.article-image img {
  width: 100%;
  height: auto;
}

hr.second {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0;
}

hr.second2 {
  border: 0;
  border-top: 1px solid #000;
  margin: 20px 0;
}

.diaporama_article{ display:none; }

/* Chaque rectangle avec une largeur de 45% */
.rectangle_artiste_article {
    width: 20%; /* Chaque image prend 45% de la largeur, ce qui permet d'en avoir deux par ligne */
    margin-bottom: 5px;
    display: block;
    position: relative;
    box-sizing: border-box; /* Pour éviter les débordements des marges */
}

/* ------------------------------------------ */
/* Evenement
/* ------------------------------------------ */

/* Conteneur principal de l'événement */
.evenement-container {display: flex;flex-wrap: wrap;margin-bottom: 20px; width: 75%;}
/* Colonne de l'image - prend 40% de la largeur */
.evenement-image { width: 40%;padding-right: 20px;}
/* Colonne du texte - prend 60% de la largeur */
.evenement-text {width: 60%;}
/* S'assurer que les images ne débordent pas */
.evenement-image img {max-width: 100%;height: auto;}



li.thematique_actu{ 
    text-transform: uppercase;
    line-height: 1;
    font-size: 0.7em;
    margin-bottom: 0;
    font-family: 'wotfardlight';
    color: #000;
    border-left: 1px solid #000;
    padding-left: 5px; 
list-style: none;
display: inline;}


/* ------------------------------------------ */
/* Contacts
/* ------------------------------------------ */




#image_sommaire2 {
  position: fixed;   /* Position fixe pour rester en place même lors du scroll */
  top: 0;            /* Aligné en haut de l'écran */
  right: 0;          /* Aligné à droite de l'écran */
  width: 50vw;       /* 50% de la largeur de la fenêtre */
  height: 100vh;     /* 100% de la hauteur de la fenêtre */
  overflow: hidden;  /* Cache le contenu excédentaire de l'image */
  opacity: 1;
  animation: anim 1s linear forwards 0.5s;  /* Animation simplifiée */
}


#image_sommaire2 img {
  position: absolute;  /* Positionnement absolu par rapport au conteneur */
  top: 50%;            /* Centrage vertical */
  left: 50%;           /* Centrage horizontal */
  width: auto;         /* Largeur automatique pour conserver les proportions */
  height: 100%;        /* L'image doit occuper toute la hauteur du conteneur */
  object-fit: cover;   /* Recadrage de l'image en mode cover (couvre l'élément) */
  transform: translate(-50%, -50%);  /* Décale l'image de moitié de sa largeur et hauteur pour la centrer */
}


#contact {
    display: inline;
    height: 100vh;           /* Utilise toute la hauteur de la fenêtre */
    text-align: left;      /* Centre le texte à l'intérieur */
    background-color:white;  /* Exemple de couleur de fond */
    padding: 120px 20px 0 20px ;    
    color: white;
    position:relative;
     width:50%;
    z-index:800;float:left;
}

#contact p {font-size: 12px;color:#000;}

.contact_colone_gauche,.contact_colone_droite {position:relative; display:block; float:left;width:50%; padding:0 20px 100px 0;}
.contact_colone_droite { padding:50px 20px 100px 0;}

.contact_colone_gauche img {
 width:250px !important;
    height:auto;
    Position:relative;
    display:block;
}


div.spip, ul.spip, ol.spip, .spip_poesie, .spip_cadre, div.spip_code, .spip_documents.spip_documents_center {
    margin-bottom: 0em !important;
}


figure {
    margin: 0;
    margin-bottom: 0em;
    text-align: center;
}





#contenu_legale{padding:100px 0px 50px 50px;width:75%; position:relative; float:left;}




@media (max-width: 750px) {
  .evenement-container {
  flex-direction: column;
      
  }
  .evenement-image, .evenement-text {
  width: 100%;
  padding-right: 0;
  }

  .article-item {
   display: flex;
   align-items: center;
   margin-bottom: 15px;
}

}





@media (max-width: 600px) { 
    
    header.bandeau {
    height: auto;
    background: #7fa39c;
    z-index: 900;
    position: fixed;
        padding-right: 60px;
}
    

   /* Ciblage du container Swiper */
    .swiper-container {
        width: 100%;  /* Utiliser 100% de la largeur de l'écran */
        height: 75vw;  /* Hauteur égale à 75% de la largeur (4/3 ratio) */
        top: 100px;  /* Ajouter un espacement de 100px du haut de l'écran */
        left: 0;
    }

    /* Ciblage de l'image dans le swiper-slide */
    .swiper-slide img {
        width: 100%;  /* Toujours remplir la largeur du container */
        height: 100%;  /* Toujours remplir la hauteur */
        object-fit: cover;  /* Recadrage sans déformation, centrage de l'image */
        top: 100px;  /* Même positionnement que pour swiper-container */
        left: 0;
    }
    
    #image_sommaire {
        height: 75vw; /* Hauteur de 75% de la largeur de l'écran pour maintenir le ratio 4/3 */
    }

    #image_sommaire img {
        width: 100%;  /* L'image occupe toute la largeur */
        height: 100%;  /* L'image occupe toute la hauteur */
        object-fit: cover;  /* Recadrage automatique pour garder le centre de l'image visible */
        transform: translate(-50%, -50%); /* Centrer l'image */
    }
    

#texte_sommaire {
  width: 100%;
  background-color: #908cbf;
  position: absolute;
  top: calc(75vw + 100px);  /* Positionner le texte juste après l'image */
  left: 0;
  z-index: 700; /* Le texte doit être au-dessus de l'image */
  padding: 20px;
  box-sizing: border-box; /* Pour que le padding ne dépasse pas les dimensions */
  color: #fff; /* Pour rendre le texte visible sur fond sombre */
}
    
.rectangle {width: 100%;}
#menu_thematique { padding-top: 110px;}
li.menu_article {font-size: 1em;padding-right: 5px;}
.article-text {gap: 5px; display:block}
    li.menu_article_thematique {
    font-size: 0.5em;
    padding-left:5px;
}
.article-image {max-width: 15%;}
    
    
    .contact_colone_gauche, .contact_colone_droite {
    width: 100%;
    padding: 10px 0px 20px 0;
}
    
    
}