/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux

-------------------------------------------------------------- */

body {line-height: 1.5em; background: #FFFFFF;}

.page { position: relative; width: 46em; margin: 1em auto; text-align: center; }

.header {padding: 1.5em; text-align: center; margin-top: 2.5em;}

.main { text-align: left;}

.footer {font-size: 0.8em; clear: both; padding: 1.5em; text-align: center; }

.wrapper { clear: both; float: center; width: auto; overflow: hidden; }

.content { float: center; width: auto; min-height: auto; text-align: justify;
padding-top: 1.5em; padding-bottom: 3em; padding-left: 3em; padding-right: 3em;
border: 0px solid grey;
border-radius: 0.313em; -moz-border-radius: 0.313em; -webkit-border-radius: 0.313em;
margin-top: 1.5em;}

.content_sommaire { float: center; width: auto; min-height: auto; text-align: center; padding: 1.5em;}

.content_liste { float: center; width: auto; min-height: auto; text-align: justify;
padding-left: 3em; padding-right: 3em;}

.aside { display: block ; float: center; width: auto; overflow: hidden; 
padding-left: 3em; padding-right: 3em; padding-bottom:1.5em;
margin-bottom: 1.5em;}


/* Entete et barre de navigation
------------------------------------------ */

.header {}
.header #logo { float: center; display: block; color: black /*#414042*/; vertical-align: middle;}
.header #logo,
.header #logo a,
.header #logo a:hover { text-decoration: none; }
.header #slogan { margin: 0; font-size: 1em; }



.formulaire_menu_lang { position: relative; right: 0; top: .9em; display: block; width: 30%; font-family: 'Source Sans Pro', sans-serif;}

.nav {background: #FFFFF9;
margin-bottom: 0.65em;
border: 0px solid grey;
border-radius: 0.313em; -moz-border-radius: 0.313em; -webkit-border-radius: 0.313em;
padding-top: 1.5em; padding-bottom: 1.5em; padding-left: 3em; padding-right: 3em;
}
.nav ul {}
.nav ul li {}
.nav ul li a { float: center; display: block; }
.nav ul li.on a { color: #003448; }
.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { color: #003448; }

#formulaire_recherche {position: relative; font-family: 'Source Sans Pro', sans-serif; font-size: .9em;
text-align: center; margin-bottom: 1.5em;
margin-top: 3em;}

.footer .colophon { float: center; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; right: 1.563em;}

/* Gabarit d'impression
------------------------------------------ */
@media print {
.page,
.wrapper,
.content { width: auto; }
.nav,
.arbo,
.aside,
.footer { display: none; }
}

/* Affichage sur petits ecrans
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */

@media (max-width: 640px) {
* {
box-sizing: border-box;
}

/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

.body,
.page,
.header,
.arbo,
.formulaire_recherche,
.main,
.aside,
.footer,
.wrapper {
width: auto;
margin: 0;
padding: 0;
}

/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed,
video {
max-width: 100%;
}

/* conserver le ratio des images */

img {
height: auto;
}



/* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
.header {clear: both; float: none !important; font-size: 75%;}
.content,
.content_sommaire,
.aside { clear: both; float: none !important; padding: 3%; font-size: 75%; }
.nav {padding: 3%; }
.nav ul li a { clear: both; float: none; width: auto !important; margin: 3%;}
#formulaire_recherche { display: block; clear: both; float: none !important; width: auto !important; font-size: 75%;}
.arbo { display: block; clear: both; float: none !important; }
p.arbo {padding: 3%;font-size: 75%; }
.footer {font-size: 75%; }

.colonneannee,
.colonnetitre,
.colonneauteurséditeurslieux,
.colonnelangues {}

.spip-admin-bloc, 
.spip-admin-float {font-size: 75%;}


/* gestion des mots longs */

textarea,
table,
td,
th,
code,
pre,
samp {
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word; /* passage à la ligne forcé */
}

code,
pre,
samp {
white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}

/* masquer les éléments superflus */

.hide_mobile {
display: none !important;
}

/* Un message personnalisé */

body:before {
content: "Version mobile du site";
display: block;
text-align: center;
font-style: italic;
color: #777;
padding-top: 1.5em;
}
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}

/* end */