body {background: #efefe7;}
body.rubrique3 {background-color: #647de7;}
body.sommaire{background: #cbf896;}

button:hover {background:white;color:#cbf896;}
::selection {background-color: #cbf896 !important;color: #000 !important;}


#conteneur_rubrique, aside, article {opacity:0;-moz-animation: anim 0.3s linear forwards 0.3s ;-webkit-animation: anim 0.3s  linear forwards 0.3s ;
    -o-animation: anim 0.3s  linear forwards 0.3s ;-ms-animation: anim 0.3s  linear forwards 0.3s ;animation: anim 0.3s  linear forwards 0.3s ;}

@-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;}}


@font-face {
    font-family: 'GroteskRemix-medium';
    src:url('../../squelettes/webfonts/GroteskRemix-medium.eot');
    src:url('../../squelettes/webfonts/GroteskRemix-medium.woff2') format('woff2'),
        url('../../squelettes/webfonts/GroteskRemix-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*  les sections  ———————————————————————————————————————————————————  */
header{position:absolute;position:fixed;float:left;width:270px;left:2%;top:35px;z-index:1000;}
section{position:relative; z-index:100;width:1000px;  margin: 0 auto; }
#contenu:focus,#section-0:focus,input,textarea,select,button {outline: none;}
#conteneur_rubrique{width:90%; min-height: 100vh;Z-index:1;margin:85px 0px 0px 10px;position:relative; float:left; z-index:100;}
#contenu_sommaire {padding:50px 0px 25px 0px;}

.footer {
    clear: both;
    padding: 1em 0 0;
    margin: 1em 0 0 0;
    text-align:left;
    border-top:none;
    background: #cbf896;
}

.footer a{ font-size:11px;}

h2, .h2 , h2.article {
    font-size: 0.8em;
    font-family: 'GroteskRemix-medium';
    line-height: 1;
    margin-bottom: 1em;
}

h2.article {font-size: 1.8em;}

h1, .h1 {
    font-size:3em;
    font-family: 'GroteskRemix-medium';
    line-height: 1.2;
    margin-bottom: 0.1em;
}

p, .p, ul, ol, dl, dd, blockquote, address, pre, .table, fieldset {margin-bottom: 1.5em;font-family: 'GroteskRemix-medium';}
ul {margin-bottom:0;}
a, a:visited {color:#000;}
a {background: transparent;color: inherit; text-decoration:none !important; font-family: 'GroteskRemix-medium';}

a:visited {
  color: #000!important;  
  background-color: white !important;
  border-color: white !important;   
  text-decoration:none;
}  

a:focus {
  outline: thin dotted;
  background-color: white !important;
  border-color: white !important;
  color: black !important;
  text-shadow: none;
}

a:hover {
  outline: 0;
  cursor: pointer; transform: translateX(-20px); 
  transition: transform 0.3s ease;
  background:transparent !important;
  color:#633A0A !important;
}

a:active {outline: 0;} 
big{font-family: 'GroteskRemix-medium'; font-size:1.9em; line-height: 1.5em;}
li.sousrubrique{display:block; float:right;}
a.sousrubrique {font-size:30px;}
li.sousrubrique{display:block; float:right;}
figure {margin-bottom: 0;}

.spip_logo { float: right; margin: 5px 5px 5px 0px; padding: 0; border: none;}



/* ------------------------------------------ */
/* menu(s)
/* ------------------------------------------ */
nav {right:8px; text-align:right;position:fixed; z-index:10;top:5px; }
nav:hover { z-index:1000;  background:none !important;}
nav li {display:block;line-height:2.3em;text-align:right;}
nav li a { font-size: 2.3em; display: inline-block;  text-decoration: none; font-family: 'GroteskRemix-medium';}
nav li a:hover, nav li a:active  { z-index:1000; background:none !important;  transform: translateX(-20px); }
a.on {color:#633A0A !important; font-weight:normal;}

nav li a.mot-cle {font-size: 1.5em;}
nav li a.mot-cle.on {color: #633A0A !important; font-weight: normal;}

/** MENU Hamburger //////////////////////////////////////////
 */
#nav {display:none; text-align:center;}

.sliding-navbar{
    padding-top:150px;
    position: fixed;
    text-align:center;
    top:0;
    left:-100%;
    height: 100vh;
    width: 100%;
    background: #ee7ca8 ;
    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: 185px; width:100px; z-index: -100;}
.show{z-index: 200;}

.navbar--items{
list-style-type: none;
height: auto;
width: 100%;
display: -ms-flex;
display: -webkit-flex;
display: flex;
padding:0;
text-align:center;
}

a.rubrique{font-size: 2em;text-align:center !important;}
.navbar--items ul {text-align:center !important;}
li.navbar--items{text-align:center !important; float:right; font-size : 2.3em;
text-transform: uppercase; color: #000; background: #36A72D;  width:auto; }
.navbar--items li:hover{text-decoration:underline;}
.navbar--items li .on{text-decoration:underline;}
#nav li a.mot-cle {font-size: 1.5em;}

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

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

.hamburger::before,
.hamburger::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 5px;
    background: darkgreen;
    transition: all 0.3s ease-in-out;
        right: 0px;
}

.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);}


/* ------------------------------------------ */
/* image mots clés
/* ------------------------------------------ */
sous_rubrique a {
  position: relative;
  display: inline-block;
}

#logo_affiche {
  position: relative;
  width: 100%;
  height: auto;
}

.logo_container {
  position: fixed;
  top: 0;
  left: 0;
  padding:85px 0px 0px 15px;
  width: 90.5%;
  height:100vh;
  margin: 0px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  text-align: center;
  z-index:100;
  background:#efefe7;
}

.logo_container img {width: 100%;height: auto;}

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

/* diaporama
/* ------------------------------------------ */
#image_sommaire {
  position: fixed;
  top: 85px;         /* Décalage haut selon ton besoin */
  left: 0;
  width: 90%;
  height: calc(100vh - 85px); /* Remplit le reste de l’écran */
  z-index: 20;
  overflow: hidden;
}

.slideshow-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recadre par le centre automatiquement */
  object-position: center;
  display: block;
}

#fleche_gauch, #fleche_droit {
  position: fixed;
  bottom: 32.5%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #000;
  color: white;
  font-size: 13px;
  text-align: center;
  line-height: 48px;
  z-index: 100;
  transition: all 0.4s ease;
  overflow: hidden;
}

#fleche_gauch{cursor: w-resize;}
#fleche_droit {cursor: e-resize;}

#fleche_gauch span, #fleche_droit span {
  position: relative;z-index: 2;}

#fleche_gauch::before, #fleche_droit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid #cbf896;
  transform: scale(0);
  transition: transform 0.3s ease;
  z-index: 1;
}

#fleche_gauch:hover::before, #fleche_droit:hover::before {transform: scale(1);}
#fleche_gauch {left: 0%;}
#fleche_droit {right: 10%;}

.counter {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #000;
  background: #cbf896;;
  padding: 5px 10px;
  font-size: 14px;
  z-index: 10;
  border-radius: 20px;
}


.legende-container {
  position: fixed;
  bottom: 30px;
  left: 10px;
  display: flex;
  gap: 1px;
}

.legende {
  padding: 10px;
   background-color: #cbf896;
  color: #000;
  font-size: 12px;
  border-radius: 3px;
  font-family: 'GroteskRemix-medium';
}

.legende-croix {
    border-radius:50%;
  background-color: #cbf896;
  color: #000;
  font-family: 'GroteskRemix-medium';
}

.legende-croix:hover {
background-color: white;
color: black;
}

.legende-croix:hover{
transform: translateX(20px); 
}

/* Le texte qui se positionne sous l'image
/* ------------------------------------------ */

#texte_sommaire {
  width: 100%;
  height: auto; 
  background-color:#647de7;
  position: absolute;
  top: 100%;
  z-index:50; 
  padding: 20px;
  text-align: left;
  padding-right: 33%;
}

#texte_sommaire p { 
 font-family: 'GroteskRemix-medium';
 font-size: 1.5em;
 line-height: 1.2;
 color:darkgreen;
}

/* ------------------------------------------
/* page articles
--------------------------------------------------------- */
article{   position: relative; float:left; text-align:center;padding:0;
    margin: 0 auto;width:1000px;height:auto; }
article img{ width:100%; height:auto; border-bottom: 10px !important; margin: 0px 0px 5px 0px;    position: relative;}
aside{width:60%;margin-right:40%; height:auto; float:left; text-align:left; margin-top: 150px;}

.lity-close{display:none;}
.verte{position: relative;width:100%;height:auto;}
.jaune{position: absolute;top:1px;width:100%;height:100%;}

#fleche_gauche, #fleche_droite {
  position: fixed;
  bottom: 32.5%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #cbf896;color: #000;
  font-size: 13px;
  text-align: center;
  line-height: 45px;
  z-index: 1000;
  transition: all 0.4s ease;
  border: 2px solid transparent;
  overflow: hidden;
}

#fleche_gauche{cursor: w-resize;}
#fleche_droite {cursor: e-resize;}

#fleche_gauche span, #fleche_droite span {
  position: relative;z-index: 1000;}

#fleche_gauche::before, #fleche_droite::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid black;
  transform: scale(0);
  transition: transform 0.3s ease;
  z-index: 1000;
}

#fleche_gauche:hover::before, #fleche_droite:hover::before {transform: scale(1);}
#fleche_gauche {left: 0%;}
#fleche_droite {right: 0%;}



/* titres au survol
--------------------------------------------------------- */

.grid { width:20%; height: auto; position:relative; display:block; float:left; }
.grid_50 {
  width: 50%;
    height:34.5vw;
  padding: 0 5px 5px 0 ;
  box-sizing: border-box;
  float: left;
  position: relative;
}

.img-container {
  position: relative;
  display: block;
  overflow: hidden;
}

.img-container img {
  width: 100%;
  display: block;
  height: auto;
}

.hover-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background:white; 
  color: #000;
  padding: 10px;
  text-align: left;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.img-container:hover .hover-title {transform: translateY(0); }

.grid_50 .img-container:hover,
.grid_50 .img-container:active {transform: none !important;}
.grid .img-container:hover,
.grid .img-container:active {transform: none !important;}


/* jm_france
--------------------------------------------------------- */

#document_affiche{   position: relative;display:block; float:left; width:20%; padding-right:5px; height:19vw;}
.icones_affiche img{display:block; float:left;width:100%; height:auto;   position: relative; }
#document_affiche:hover{ ransform: rotate(-5deg);  transition: transform 0.3s ease; }


/* couverture
--------------------------------------------------------- */

#document_couve{   position: relative;display:block; float:left; width:50%; padding:0 0px 0px 5px; height:auto;}
.icones_couve img{display:block; float:left;width:100%; height:auto;    position: relative; }
#document_couve:hover{ ransform: rotate(-5deg);  transition: transform 0.3s ease; }


/* galmeister
--------------------------------------------------------- */

li.document_serie_2 {
  width: 50% !important;
  display: block;
  float: left;
  position: relative;
  padding: 3px;
  margin: 0;
  z-index: 1;
  box-sizing: border-box;
}

li.document_serie_2 img {
  width: 100%; /* pour que l'image remplisse le conteneur */
  height: auto;
  margin: 0;
  cursor: zoom-in !important;
    position: relative;
}

/* La 3e, 6e, 9e, etc. image : pleine largeur */
li.document_serie_2:nth-child(3n) {
  width: 100% !important;
  float: none;
  clear: both;
}






/* ---------------------------------------------------*/
#conteneur_contact {
width: 100%;
min-height: 100vh;
padding:150px 0px 0px 10px;
height:auto; 
position: relative;
text-align: left;
padding-right: 33%;
z-index:1;
}

#conteneur_contact p { 
font-family: 'GroteskRemix-medium';  font-size: 1.5em;
line-height: 1.2; color:darkgreen;
}





@media (max-width: 1520px) { 
.grid { width:25%; height: auto; 
        position:relative; display:block; float:left;}
}

@media (max-width: 1200px) {
section {width: 800px; margin: 0 auto;}
article{text-align:center;padding:0;margin:0 auto;
width:800px;height:auto;}
aside{width:60%;margin-right:40%; height:auto; float:left; text-align:left;    margin-top: 150px;} 
    
    #document_affiche{ width:25%;  height:28vw;}



    
}


@media (max-width: 900px) {
body { width: 100%;padding: 0px;}
nav {display:none;}
#nav {display:block;}
#fleche_droit { right:0%;}
#image_sommaire {height: calc(100vh - 85px - 100px); width:100%;}
.legende-container {position:relative; bottom: 50px;}

#texte_sommaire {top: calc(100vh - 100px); padding-right: 20px;} 
#texte_sommaire p { font-size: 1.2em;line-height: 1;}
#conteneur_rubrique{width:100%;margin: 85px 0px 0px 0px;}
.grid {width: 50%;}
.logo_container { padding: 85px 0px 0px 0px; width:100%; }
.grid_50 {width: 100%;height: auto; padding: 0 5px 5px 0;}
    
#conteneur_contact {padding-right: 0%; padding:150px 10px 0px 10px}
article{padding:0;margin:0; width:100%; height:auto; }
aside{width:80%;margin-right:20%; padding: 0 10px 0 10px; }
section {width: 100%; margin: 0 ;}
    
       #document_affiche{ width:33.33%;  height:48vw;}
}
    
    



@media (max-width: 767px) {
body { width: 100%; padding: 0 0px;}
#texte_sommaire p { font-size: 1.2em;line-height: 1.2;}
aside {width: 100%;margin-right:0;}
#fleche_droite, #fleche_gauche { bottom:10%; }
header{width:190px;left:2%;top:28px;z-index:1000;}
#conteneur_rubrique{margin: 60px 0px 0px 0px;}
#image_sommaire {top: 65px;height: calc(100vh - 65px);}


}
