/*---------------------------------
 Import du css pour les formulaires
 ---------------------------------*/ 
@import url("formidable.css");


#main > .inner > section {
    padding: 2em 0 1em 0;
}

h1 {
    font-size: 3em ;
}

#banner{
    margin-bottom: -1em;
}


#sidebar #menu a {

    color: #3d4449;

}

ul a, #menu > ul > li > ul {
	color:red;
}

#main .texte { 
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        -moz-column-gap: 0;
        -webkit-column-gap: 0;
        column-gap: 0;
}


/* Pour centrer la gallerie sur l'espace libre */
.gallerie {
	margin-left: auto ;
	margin-right: auto ;
}

/* Pour indique le "i" d'infomation dans la gallerie
.i-circle {
    background: black;
    color: #fff;
    padding: 1px 2px;
    border-radius: 20%;
    font-style: italic;
    font-family: cursive ;
}*/


/* Legende des photos du trombinoscope et couleur des liens */
.trombi {
    font-style: italic;
    font-size: large ;	
    font-family: inherit ;
    text-align: center ;
}

/*.trombi a {
	color:red ;
}*/

/* Titre des categories*/
h2.categorie {
	font-size: 30px; /* taille de la police */
	color: #7f888f; /* Couleur de la police */
	font-family: 400 ;
	text-shadow: -1px -1px #eee, 1px 1px #888, -1px 0 2px #000; /* Ombre portée qui donne du volume : effet letterpress */
}


/* Cadre autour des photos */
#cadre {
	text-align: center ;
}

#cadre .cadre_icone {
	height: 10px;
}

#cadre img
{
	border: solid 4px black;
	max-height: 200px; /* Limite la taille des photos du trombinoscope*/
	height: 150px ;
}


/* Reduire la taille des images dans les actualités*/
#main img {
	max-width: 50% ;
}



/* Pour creer la galerie de photos responsive */  						
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Management of presentation and Gallerie according to media size 
 -  < 1280 px, menu hide
	--> < 1087 px, presentation and gallery on two lines
	--> between 1088 and 1280, on the same line

 - 1281 px < media size < 1539 px, menu visible, small size
	--> presentation and gallery on two lines

 - 1540 px < media size < 1680 px, menu visible, small size
	--> presentation and gallery  on the same line

 - 1681 px < media size < 1882 px, menu visible, big size  
	--> presentation and gallery on two lines
 - media size > 1882 px
	--> presentation and gallery  on the same line */ 


/* Responsive layout - makes a two lines for presentation and gallery */
@media only screen and (max-width: 1087px), only screen and (min-width: 1281px) and (max-width: 1539px), only screen and (min-width: 1681px) and (max-width: 1882px)  {
  .pres {
    margin-right: auto;
    max-width: 100%;
    padding-bottom: 1em ;    
  }
}

/* Responsive layout - makes a one lines for presentation and gallery */
@media only screen and (min-width: 1088px) and (max-width: 1280px), only screen and (min-width: 1540px) and (max-width: 1680px), only screen and (min-width: 1883px) {

        .pres {
                width: 60% ; /* Présentation occupe 60% du conteneur */
                margin-right: auto ;
        }
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}


/* Personalisation de la première ligne d'un tableau */
table.spip tr.row_first {
	background-color: lightgray;
}



/* Pour positionner la gallerie d'accueil en mode flexible */ 
#conteneur
{

    display: flex;
    flex-wrap: wrap;
}

/* Nombre d'actualites / lignes en accueil = 100% / nb article  
.posts article {
	width: calc(25% - 6em)
} */

/* Centrer verticalement le contenu de la cellule d'un tableau 
   1ere cellule (image) occupe 20 % de la ligne
*/
#tabart td {
	vertical-align: middle ;
}
#tabart td:first-child {
	width: 20% ;
}

#tabart td img {
	width: 250px ;
}

/* Pour aligner le texte dans les blocs de la partie "infos pratiques" */
.cimulti_colonnes * {
	text-align: center ;
}

/* Centrer le titre des tableau*/
table th {
	text-align: center ;
}

body, input, select, textarea {
  color: #656565;
}


/* Centrer dans les tableaux spip */
.texte-centre td,  .texte-centre th {
        text-align: center ;
}