/* --------------------------------------------------------------
  Elements modifiés pour JazzStation-archives
----------------------------------------------------------------- */
@keyframes apparaitre {
  0% {
    transform: translate3d(0, 0px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}

body {
     margin:0px;
     padding:0px;
     background-color:#ffffff;
     /* font-family: 'Nunito', sans-serif; */
     font-family: 'Round_WEB-Light', sans-serif;
     /* background:url("./images/JS-header.jpg"); */
     background-repeat: no-repeat;
     background-size:contain;
}

.page { 
     float: center; 
     width: 90%;                 /* largeur de la page au centre , passe à 100% à 769px*/
     max-width:95%; 
     margin:1em auto; 
     text-align: left; 
     padding:2px;
     background-color:#ffffff;
     border-radius: 1em;
     /* transition: opacity 0.4s ease;   transition douce entre pages 
     opacity: 1; */ 
}
/*
.page.cache {
  opacity: 0;         transition douce entre pages 
}
*/
.main { 
     float: center; 
     padding: 1.5em 0; 
     min-height: 500px; 
}

h1,.h1 { 
     margin: 2px; 
     padding: 2px; 
     line-height: 1.2; 
     margin-top:2px; 
     background-color: #e9e9e9;
     font-size: 30px;
     font-weight: 700;
}
h2,.h2 { 
     margin: 2px; 
     padding: 2px; 
     line-height: 1.2; 
     margin-top:2px; 
     background-color: #e9e9e9;
}
h3,.h3 { 
     margin: 0px; 
     padding: 0px; 
     font-size: 1.0em; 
     font-weight: normal; 
     font-style: normal; 
}
h4,.h4 { 
     margin: 2px; 
     padding: 2px; 
     font-size: 0.8em; 
}

/* Hyperliens
---------------------------------------------- */
a, a:visited { color: #000000; text-decoration:none; }   /* Couleur de l'ensemble des liens */
 
a:focus,
a:hover,
a:active { background-color:#00a1a3; color:#fff; text-decoration:none; }    /* au survol du lien */

/* Habillage des elements du contenu
/* ------------------------------------------ */

/* fil d'ariane : arborescence */
.arbo { margin: 2px; padding: 2px; clear: both; font-size: .9em; color: #00a1a3; }
.arbo * { font-weight: normal; }
.arbo a,
.arbo a:visited { color: #666; }
.arbo a:hover,
.arbo a:focus { background: #00a1a3; color: white; text-decoration:none; }

.chapo { margin: 2px; padding: 0px; font-weight: bold; }
.texte { margin: 2px; padding: 0px; }

/* Listes et tables */
dl.spip dt { background: url(img/def.png) no-repeat 15px .5em; }
dl.spip dd {}

table.spip {margin:1em 0; }
table.spip caption {  background: none; border-bottom: 1px solid; text-align: left; font-weight: bold; }
table.spip thead th { background: none; border: 1px solid; border-width: 1px 0; }
table.spip tbody tr th,
table.spip tr td { background: none; }
table.spip tbody tr.odd th,
table.spip tr.odd td { background: #DDD; }
table.spip tr:hover td {background: #AAD;}
table.spip tfoot { border-top: 1px solid; }
table.spip td { padding: 0.1em; font-size: 0.9em; }

.tablecenter {  margin: 1em 0; } 
.tablecenter caption { background: none; border: 1px solid; text-align: center; font-weight: bold; font-size: 1.0em; }
.tablecenter thead th { background: none;   border: 1px solid;   border-width: 1px 0; text-align: center; } /* Seulement si encadré de {{}} */
.tablecenter tbody tr th,
.tablecenter tr td { background: none; text-align: center; width:50%; }
.tablecenter tbody tr.odd th,
.tablecenter tr.odd td { background: #DDD; }
.tablecenter tr:hover td {background: #AAD; }
.tablecenter tfoot { border-top: 1px solid; }
.tablecenter td { padding: 0.1em; font-size: 0.9em; text-align: center; }


/* Formulaires : variantes et cas particuliers
----------------------------------------------- */
.formulaire_spip { margin-bottom: 1.5em; }

fieldset {
  width: 100%; margin: 0;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

label { display: block; font-weight: bold; }
.formulaire_recherche label { display: block; font-weight: bold;  }
.erreur_message { display: block; }
input.text,textarea {
  width: 100%;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.content input.text { width: 50%; }
textarea { width: 100%; }

/* Formulaires de recherche (site / petitions) */
.formulaire_recherche {
	margin: 0px; padding: 0px;
	background:#a1c8c9;
	border:solid 2px #00a1a3;
}
.formulaire_recherche input.text { 
	width: 83%;
	height: 32px;
	padding-left: 10px;
	vertical-align: middle;
	border:solid 1px #aaa;
	background:#fff url(img/recherche.png) no-repeat left center;
	-webkit-border-radius: 0.25em 0 0 0.25em;
	border-radius: 0.25em 0 0 0.25em;
}
.formulaire_recherche input.submit { 
	width: 17%;
	padding:0; 
	height: 32px;
	vertical-align: middle;
	border:solid 1px #aaa;
	background:#ddd;
	border-left: none;
	-webkit-border-radius: 0 0.25em 0.25em 0;
	border-radius: 0 0.25em 0.25em 0;
	text-align: center;
}

/* Choix des mots-clefs */
ul.choix_mots { display: block; margin: 0; padding: 0; list-style: none; }
ul.choix_mots li { clear: none; float: left; display: block; width: 30%; padding: 1%; }
ul.choix_mots li label { display: inline; font-weight: normal; }

/* Habillage general des menus de nav */
.menu { clear: both; margin-bottom: 0.5em; text-align: left; }
.menu p {}
.menu ul { margin-bottom: 0.5em; color:#00a1a3; }
.menu ul li { color:DarkBlue; }   /* CHAPO d'article dans rubrique */
.menu ul li ul { margin-left: 1.5em; list-style: circle; }
.menu_rubrique { color:red; }

/* Pagination */
.pagination {margin-top: 30px;}
.pagination .pagination-items {list-style: none;display: flex;flex-wrap: wrap; flex-direction: row; justify-content: center;}
.pagination .pagination-item { margin: 0em; flex-basis: 3.0%; display: flex;align-items: center;} /* Modifie */
.pagination .pagination_precedent_suivant .pagination-item { flex-basis: auto;}
.pagination .pagination-item + .pagination-item {  margin-left: 0.5em }
.pagination .pagination-item-label { display:block; flex-basis: 100%; background: #f0f0f0; text-decoration: none; padding:.5em; border-radius:.25em; text-align: center;}
.pagination .on .pagination-item-label,
.pagination a.pagination-item-label:hover,
.pagination a.pagination-item-label:focus,
.pagination a.pagination-item-label:active { 
     font-weight: bold; 
     background: #00a1a3; 
     color: #fff; 
     box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19);  
}  /* Modifie */
.pagination .on .pagination-item-label {font-weight: bold;}
.pagination .pagination_precedent_suivant .disabled {visibility: hidden}
.pagination .pagination-item.disabled {}
.pagination .pagination-item.disabled .pagination-item-label {color:#888; font-weight: normal;}
.menu_articles .pagination strong {font-size:1em;}


/* Listes d'articles et extraits introductifs */
.menu_articles li { clear: both; margin-bottom: 0.5em; }
.menu_articles li h3,
.menu_articles li h2 { margin: 0 0 0.2em 0; }
.menu_articles li p { margin: 0; }
.menu_articles li small {  }
.menu_articles li .enclosures { float: right; text-align: right; max-width: 60%; margin: 0; }
.menu_articles li div {margin-top:0.12em;margin-bottom:0.5em;}
.menu_articles a {text-decoration:none;}
.menu_articles strong {font-size:1.2em;}
 
/* Listes de rubriques et extraits introductifs */
.menu_rubriques li { clear: both; margin-bottom: 0.5em; margin-left: 20px; }
.menu_rubriques li h3,
.menu_rubriques li h2 { margin: 0 0 0.2em 0; }
.menu_rubriques li p { margin: 0; }
.menu_rubriques li small {  }
.menu_rubriques li .enclosures { float: right; text-align: right; max-width: 60%; margin: 0; }
.menu_rubriques li div {margin-top:0.2em;margin-bottom:0.5em;}
.menu_rubriques a {text-decoration:none;}
.menu_rubriques strong {font-size:1.2em;}

 .nav {
    z-index: 5;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px; /* Adaptez selon la hauteur voulue de votre menu */
    display: flex;
    align-items: flex-end; /* Les éléments restent en bas de .nav */
    /* Optionnel, si effet de transformation visuelle souhaité : */
    transform: translateY(calc(-50%)) rotate(-5deg);
    -webkit-transform: translateY(calc(-50%)) rotate(-5deg);
    transform-origin: left bottom;
    -webkit-transform-origin: left bottom; 
}

.nav li {
     display:flex; 
}
.nav li a {
     flex-wrap: wrap;
     align-items: flex-end;
	padding: 0.05em 0.3em;
	margin: 0 0.25em 0.25em 0;
	border-radius: 0;
     border-color: #00a1a3;
     border-style:solid;
     border-width: 2px;
     font-weight:Bold;
	font-size: 1.2rem;
	/* text-decoration: none; */
	background: #ffffff;
	color: #141313;
}
.nav li.on a { 
     background:#00a1a3; 
     color:#fff; 
     box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 12px 0 rgba(0, 0, 0, 0.19);  
}
.nav li a:focus,
.nav li a:hover,
.nav li a:active { 
     background: #00a1a3; 
     color:#fff;      
}     /* Boutons Bibliotheque et Discotheque */

.navaz {}                                                  /* Boutons Bibliotheque et Discotheque (Rubrique)*/
.navaz li {display:inline; }
.navaz li a {
	display: inline-block;
	padding: 0 0.5em 0 0.5em;
	margin: 0 0.25em 0.25em 0;
	border-radius: 0.25em;
    font-weight:bold;
	font-size: 1rem;
	/* text-decoration: none; */
	background: lightgray;
	color: #222222;
}
.navaz li.on a { background:#00a1a3; color:#fff; }
.navaz li a:focus,
.navaz li a:hover,
.navaz li a:active { background: #00a1a3; color:#fff; }     /* Boutons Bibliotheque et Discotheque */

.navtri {}                                                  /* Boutons Bibliotheque et Discotheque (Rubrique)*/
.navtri li {
	display:inline;
}
.navtri li a {
	display: inline-block;
	padding: 0 0.5em 0 0.5em;
	margin: 0 0.25em 0.25em 0;
	border-radius: 0.0em;
     border-color: #00a1a3;
     border-style:solid;
     border-width: 2px;
	font-weight:bold;
	font-size: 1rem;
	/* text-decoration: none; */
	background: ffffff;
	color: #141313;
}
.navtri li.on a { background:#00a1a3; color:#fff; }
.navtri li a:focus,
.navtri li a:hover,
.navtri li a:active { background: #00a1a3; color:#fff; }     /* Boutons Bibliotheque et Discotheque */

.zoom img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.zoom :hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

.tableaz {
     padding-left: 1px;
     padding-right: 1px;
     background-color: #00a1a3;
     font-weight: Bold;
}
.tablePrograms td {
	border-bottom:1px solid;
}

.chapoarticle {
     float:none;
     margin: 2px; padding: 0px; 
     margin-top: 1em; 
     font-weight:Bold;
     color: darkblue;
}
.chaporubrique {
     float:none;
     margin: 2px; padding: 0px; 
     margin-top: 1em; 
     text-align: center;
     font-weight:Bold;
     color: darkblue;
}

.linkarticle {
     margin: 2px; padding: 0px; 
     margin-top: 1em; 
     font-weight:Bold;
     color: darkblue;
     background: rgb(220, 220, 248);
}
/
/* */
.prix {
     margin-top: 1em;
     text-align:center;
     font-weight:Bold;
     color: darkblue;
     font-size:1.2em;
     background-color:#bcc496;
}
.nav_rubrique {
     margin-top: 1em;
     text-align:left;
     font-weight:Bold;
     color: darkblue;
     font-size:1.2em;
     background-color:#bcc496;
}

/* Noir sur fond bleu clair pour le nom sous l'article */
.soustitrearticle {
     margin: 2px; padding: 2px; 
	font-weight:Bold;
	background-color:#bed7e7;
	color:black;
	font-size:1.2em;
}
/* Blanc sur fond vert JS pour le nom de l'article */
.titrearticle {
     margin: 2px; padding: 0px;  /* padding: 2px; */
     font-weight: Bold;
	background-color: #00a1a3;
	color: rgb(255, 255, 255);
	font-size: 1.3em;
}
.titrerubrique {
     margin: 2px; padding: 0px;  /* padding: 2px; */
     font-weight: Bold;
     text-align: center;
	background-color: #00a1a3;
	color: white;
	font-size: 1.2em;
     box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);       
}
/* Noir sur fond bleu clair pour le nom sous l'article */
.resultatrecherche {
     margin: 10px; padding: 2px; 
     font-style: italic;
     font-weight:Normal;
	background-color:#bed7e7;
	color:blue;
	font-size:1.0em;
}
/* Devrait normalement surligner le résultat des recherche mais ne fonctionne pas */
.spip_surligne {
	background-color: #daf35a;
}
/* Menu langue */
.menu_langues {
	background-color: transparent;   
     border-style: none;
}
.boutons_langues {
	background-color: transparent;
     border-style: none;
	font-weight: Bold;
     color: white;           /* Couleur du texte dans le menu */
     text-transform: uppercase;
}
.boutons_langues option {
     text-transform: uppercase;
     background-color: #333; /* Choisissez votre couleur de fond ici */
     color: white;           /* Couleur du texte dans le menu */

}
.intro_fond_ecran {
     width: 100%;
     background-image: url("../../IMG/Biblio-CD02.jpg");
     background-size: contain;
     box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);       
}
.intro_titre {
     font-size: 1.3em;
     height: 100px;
     vertical-align: middle;
     font-weight: bold;
     text-align: center;   
}

.intro {
     font-weight: normal;
     text-align: justify;
}

.article_body {
     background-color: #ffffff;
     padding: 5px;
}
   
.article_row {
     margin: 8px -16px;
 }
   
   /* Add padding BETWEEN each column */
 .article_row,
 .article_row > .article_column {
     padding: 8px;
 }
   
   /* Create four equal columns that floats next to each other */
 .article_column {
     float: left;
     width: 25%;
 }
   
   /* Clear floats after rows */ 
 .article_row:after {
     content: "";
     display: table;
     clear: both;
 }
   
   /* Content */
 .article_content {
     background-color: #ffffff;
     height: 370px;
     padding: 10px;
 }
 .image_logo_nav_rubrique {
     float: right; 
     margin-bottom: 0.5em;
     box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);   
}
 .image_logo_article {
     position: relative;
     float: right; 
     margin-bottom: 0.5em;
     box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
}
img.spip_logo {
     float: none;
     position: relative;
     display: block;
     margin-left: auto;
     margin-right: auto;
     max-height: 250px;
     width: auto;
     object-fit:fill;
     box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);    
     animation: apparaitre 1s ease-in forwards;
}
img.spip_logo:hover {
 	scale: 1.2;
}
/* Affichage sur petits ecrans  
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */
@media screen and (max-width: 1300px) {
    .article_column {
       width: 33%;
     }
    
}
@media screen and (max-width: 950px) {
     .nav {
          height: 75px; /* Adaptez selon la hauteur voulue de votre menu */
     }
   .article_column {
       width: 50%;
     }
    
}
/* largeur maximum 767px */
@media screen and (max-width: 769px) {
	body {
          width: 100%;
          padding: 0 0px;	
     }
	.page {
          width: 95%;  	
          max-width: none; 
          margin:0.5em auto; 
          background-color:FFFFFF;
     }
     .nav {
          transform: translateY(calc(-40%)) rotate(-5deg);
          -webkit-transform: translateY(calc(-40%)) rotate(-5deg);
          transform-origin: left bottom;
          -webkit-transform-origin: left bottom;
     }
     .nav li a {
          border-color: #00a1a3;
          border-width: 2px;
     }

    .pagination {line-height:3;}
    table.spip { display: table; }
    table.spip tr { display: table-row; }
    table.spip tr.odd td { background: #DDD; }
    table.spip td { font-size: 0.9em; padding: 2px; margin: auto; display: table-cell; }

     .article_column {
       width: 100%;
     }

}
 
/* largeur maximum 640px */
@media screen and (max-width: 640px) {
    .aside { clear: both; float: none; width: 100%; }
    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .arbo { display: none; }
     .nav {
          height: 65px; /* Adaptez selon la hauteur voulue de votre menu */
          text-align: center;
     }
    .nav ul li a {
          border-radius: 0;
          border-color: #00a1a3;
          border-style:solid;
          border-width: 2px;
          font-size: 1.00rem;
     }
}

@media screen and (max-width: 450px) {
     .intro_titre {
          height: 50px;
          vertical-align: middle;
          font-weight: bold;
          text-align: center;   
     }
     .nav {
          height: 65px; /* Adaptez selon la hauteur voulue de votre menu */
     }
     .nav li a {
          border-radius: 0;
          border-color: #00a1a3;
          border-style:solid;
          border-width: 2px;
          font-size: 0.90rem;
     }

     .article_column {
       width: 50%;
     }
    
}

/* pour modifier le bouton de menu "petit ecran", voir responsive-nav.js dans le plugin ResponsivNav

/* fin */