@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,500);

@font-face {
    font-family: 'microsoft_yi_baitiregular';
    src: url('../polices/msyi.ttf') format('truetype');
}

@font-face {
    font-family: 'microsoft_tai_leregular';
    src: url('../polices/taile.ttf') format('truetype');
}

@font-face {
    font-family: 'microsoft_tai_lebold';
    src: url('../polices/taileb.ttf') format('truetype');
}

html {
	display: flex; 
	flex-direction: column;
	} /* IE fix */

body {
	display: -webkit-flex;
	display: -ms-flexbox;
  	display: flex; /* crée un contexte flex pour ses enfants */
  	min-height: 100vh; /* toute la hauteur du viewport (compatible IE9+) */
    background-color: #fff;
    color: #000;
    font-family: 'Roboto', Helvetica, sans-serif;
}

a {
  color: #8c8c8c;
  text-decoration: underline;
}

a:hover{
  color: #000;
  text-decoration: none;
}

h1{
	font-family: 'microsoft_yi_baitiregular', Helvetica, sans-serif;
}

h1.titre_site{
	margin:20px auto 10px auto;
	font-weight: 300;
  letter-spacing:3px;
	font-size: 5rem;
  text-transform: uppercase;
}

h1.titre_site a{
  text-decoration: none;
}

.titre_article {
  font-family: 'Roboto', Helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.5em;
}

b, strong {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-weight: bolder;
}

#wrapper{
	width: 850px;
  margin: 0 auto 50px auto;
}

img {
  max-width:100%;
  height:auto;
}

#main{
    font-family: 'Roboto', Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.1;
}

/*******   menu d'origine *************/

.menu {
    width: 100%;
    height: 50px;
    position: relative;
    margin: auto;
    background: #fff;
    z-index: 100;
    text-transform: uppercase;
    font-family: 'microsoft_yi_baitiregular', sans-serif;
}


.menu li, .menu ol {
    display: inline-block;
    padding:0;
}

.menu ul {
  font-size: 2.3rem;
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
    display: flex;
    justify-content:space-between;
}

.menu ul li a, .menu ul ol a {
    text-decoration: none;
    padding: 0;
    height: 30px;
    line-height: 30px;
    color: #aaa;
}
.menu ul li ul {
  font-size: 2rem;
    display: none;
    justify-content:space-between;
    position: absolute;
    left: 0;
}

.menu ul li a.on{
  color:#000; 
}

.menu ul li:hover ,
.menu ul li a:hover {
  color:#000;
}


.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
  color:#000;
}



.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {
  color:#aaa;
}

.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {
  color:#aaa;
}

ul li:first-child a{
color: rgb(210, 8, 8);
}


.photo-accueil{
  width: 850px;
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
  padding-top: 0;
}

/** Adaptation Galleria **/

.galleria-container {
    
    background: #000;
}

.galleria-thumbnails .galleria-image {
  border:none;
}

.galleria-info-link{
  display: none !important;
}




/******Alternative Galleria **********/

.clearfix{
  display: block;
}

.clearfix:after{
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}

#documents_portfolio {
  display: block;
  
}

#documents_portfolio ul{
  list-style: none outside;
  padding-left: 0;
}

#documents_portfolio .spip_logos {
  float: left;
  margin: 10px 10px 0 0;
  padding: 0;
  border: none;

}



/********Formulaire de contact ***********/

form {
  background: #ededed;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 20px;
  width: 650px;
  margin: 0 auto;
}

.formulaire_spip ul, .formulaire_spip li{
  list-style-type: none;
}

.formulaire_spip label, input, textarea{
  width: 100%;
}

.formulaire_spip input[type="submit"]{
  width: 40%;
  margin:10px auto;
}

.formulaire_spip input[type="submit"] {
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
  background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
  background-color:#f9f9f9;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #dcdcdc;
  display:inline-block;
  cursor:pointer;
  color:#666666;
  font-family:Arial;
  font-size:15px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:0px 1px 0px #ffffff;
}
formulaire_spip input[type="submit"]:hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
  background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
  background-color:#e9e9e9;
}
formulaire_spip input[type="submit"]:active {
  position:relative;
  top:1px;
}

.previsu {
background: darkseagreen;
padding: 20px;
margin: 20px;
line-height: 1.5;
}




/***** DESCRIPTION ARTICLE - *****/


.chapo {
  -webkit-columns: 2 300px;
  -moz-columns: 2 300px;
  columns: 2 300px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  font-size: 1em;
  color: #8C8C8C;
  margin: 15px 0 40px 0;
}

.chapo ul {
  list-style-type: none;
}

.chapo b {
  color: #000;
}


h5, .h5-like, h6, h6-like{
  margin:1.5em 0 0.8em;
}

.texte{
  font-size: 1em;
}

.noir{
  color: #000;
}



/****** tableau article 28 et 87 L'équipe fr et en ********/

.article-texte-28  td, .article-texte-87  td, .article-texte-28 table, .article-texte-87 table {
     border: 0; 
}

/****** tableau article  169 et 170 Café Charbon fr et en  ********/

.article-texte-169  td, .article-texte-170  td, .article-texte-169 table, .article-texte-170 table {
    padding: 0em 0.8em;
    border: 0; 
}
.article-texte-169 table, .article-texte-170 table {
  width:auto;

}


/******* rubrique 2 *****/

.rub2{
  margin-top:20px;
}

.rub2 dl{
  margin-bottom: 0.75em;
  text-transform: uppercase;
}

.titre_categorie:before{
  content: "\203A \00a0";
}

.titre_categorie{
  color:#8C8C8C;
  text-transform: uppercase;
  font-size: 1.2em;
  text-indent: 10px;
}




dl.secteur{
  margin-bottom: 0.75em;
  text-transform: uppercase;
}

.secteur a{
  text-decoration: none;
  color: #000;
}

.secteur a:hover{
  color:#8C8C8C;
}
dt.grid-5 {
  line-height: 1.2;
  padding-top: 0.8em;
}

.rub2 td, .rub2 table{
  border:none;
}

.rub2 td{
  padding: 0.4em 0;
  vertical-align: middle;;
}


/******grille des rubriques et articles ********/

.hover{
  position: absolute;
  top: 0;
  width: 98%;
  font-size: 1.1em;
  color: #FFF;
  background-color: rgba(0,0,0,0.60);
  text-align: center;
  height: 98%;
  text-transform: uppercase;
  padding: 25% 10% 10%;;
}

.hover span {
  text-transform: none;
}

/*** pour que le titre de l'article/rubrique soit visible sans hover pour les tablettes et mobiles **/


@media (any-hover: hover) {

a.liens_accueil  .hover {
  visibility: hidden;
}

a:hover.liens_accueil  .hover {
  visibility: visible;
}
}

.autogrid {
  flex-direction: row; /* affichage horizontal (défaut) */
  width: 65%;
}
.autogrid > * {
	width: 20%;
}
.autogrid > * + * {
	margin-left: 1em; /* taille de la gouttière entre les enfants */
}

.content-four {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    /*padding-top: 10px;*/
    background: #fff;
    text-align: center;
    display: flex;
    justify-content:center;
}

.content-four img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 0 0.2em 0.2em 0;
}

@media (max-width: 445px) {
  img.gris {
    display: none !important;
  }
}



@media (max-width: 850px) {

#wrapper{
  width: 95%;

}
  
.menu ul {
  font-size: 2rem;
}

.menu ul li {
  padding:0 8px;
}

.menu ul li ul {
  font-size: 2rem;
  justify-content:flex-start;
  top: 30px;
}

/*formulaire de recherche */

[type="search"] {
   -webkit-appearance: textfield;
   -webkit-box-sizing: content-box;
}

}



@media (max-width: 420px) { 

#wrapper {
    width: 95%;
    margin-top: 0;
}

h1.titre_site {
    margin: 5px auto;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 1rem;
    
}
 

  .photo-accueil{ 
  width: 100%;
  margin: 0 auto;
  }

 
}
.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* Style du menu desktop */
#nav {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mode mobile */
@media (max-width: 640px) {

  h1.titre_site {
    margin: 5px auto;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 3rem;
    
}
  .menu-toggle {
    display: block; /* bouton visible */
  }

#nav {
    display: none; /* caché par défaut */
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #ddd;
    padding: 1rem;
  }

#nav.open {
    display: flex; /* affiché au clic */
  }
}

/** spip_documents **/

.spip_documents { margin-bottom: 1.5em; padding: 0; background: none; max-width: 100%;}
.spip_documents,
.spip_documents_center,
.spip_doc_titre,
.spip_doc_descriptif { margin-right: auto; margin-left: auto; text-align: center; }
.spip_documents_center { clear: both; display: block; width: 100%; }
.spip_documents_left { float: left; margin-right: 1.5em; }
.spip_documents_right { float: right; margin-left: 1.5em; }
.spip_doc_titre {}
.spip_doc_descriptif { clear: both; }
.spip_doc_credits { font-size:x-small; clear: both; }