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

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

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

/* Elements principaux
------------------------------------------ */
body { background:#ddd; padding-top:210px; }
.page { position: relative; width: 960px; max-width:95%; margin:1em auto; text-align: left;  }
.header {}
.main { padding: 2em 0; }
.footer { clear: both; padding: 1em 0; margin:0.5em 0; border-top:1px solid #999; }

.inner { margin:auto; width:1200px; }
@media (max-width: 1023px) { .inner { width:900px; } }
@media (max-width: 900px) { .inner { width:100%; } }

/* largeur calculee du wrapper: 960*70%  = 672px */
.wrapper { clear: both; float: left; width: 70%; overflow: hidden; }
.content { min-height: 350px; }
/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
.aside { float: right; width: 23.333%; /*overflow: hidden;*/ }

.ta-center { text-align:center; }
.ta-right { text-align:right; }

/* Entete et barre de navigation
------------------------------------------ */
.fixed { position:fixed; top:0; border-bottom:1px solid rgba(255, 255, 255, 0.5); background:#fff; height:212px; width:100%; z-index:10; box-shadow:0 2px 2px transparent, 0 2px 3px rgba(0, 0, 0, 0.3); }

.shortcuts { background:var(--bleu); height:42px; }
.shortcuts .inner { height:100%; }
.shortcuts ul { display:table; width:100%; height:100%; margin:0; }
.shortcuts ul li { display:table-cell; height:100%; vertical-align:middle; }
.shortcuts ul li a { /*color:rgb(38, 38, 38);*/ color:#FFF; font-weight:600; /*letter-spacing:.15em;*/ }
.shortcuts ul li a img { height:30px; }
.shortcuts ul li.social { text-align:right; }
.shortcuts ul li.social a { margin-left:1.2em; }

.header { }
.header .spip_logo_site { display: block; margin: 0; line-height: 1; font-weight: bold;  }
.header .spip_logo_site img { display: inline-block; float:none; width:145px; margin:.25em 0; }
.header .spip_logo_site,
.header .spip_logo_site a,
.header .spip_logo_site a:hover { display:block; background: transparent; text-decoration:none; color:#222; }
.header .spip_logo_site a:hover  {color:var(--orange);}
.header .spip_logo_site a:hover img {opacity:0.7;}
.header .spip_logo {margin-bottom:0;}
.header #slogan { display:flex; align-items:center; flex-wrap:wrap; height:170px; }
.header #slogan p { position:relative; left:-15%; margin:0 auto; line-height:1.25em; }

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

.nav { position:fixed; width:100%; margin-top:-10px; z-index:2; }
.nav li {display:inline; vertical-align:top;}
.nav li a { display: inline-block; padding: 0.25em 0.5em; margin: 5px 0.25em 0.5em 0;border-radius:0 0 0.25em 0.25em;  text-decoration: none;  background: #f0f0f0; color: var(--orange); transition:all 0.2s; }
.nav li.on a { background:var(--orange); margin-top:10px; color:#fff; font-weight: normal; }
.nav li a:focus,
.nav li a:hover,
.nav li a:active { /*background: var(--orange); color:#fff;*/ margin-top:10px; text-decoration:none; }
 

.footer .colophon { height: 40px; margin: 0; }

/* 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
------------------------------------------ */

/* largeur maximum 767px */
@media (max-width: 767px) {
	body {   	width: 100%;		padding: 200px 20px 0 20px;	}
	.page {  	width: 100%;  	max-width: none; 	}
}
 
/* largeur maximum 640px */
@media (max-width: 640px) {
     /* layout */
    .wrapper,
    .content,
    .aside { width: 100%;}
    .content,
    .aside { clear: both; float: none; width: 100%; }

    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .nav ul li a { float: none; border: 0; margin-top:10px; margin-right:0; font-size:13px; }
    .arbo { display: none; }
    .footer .colophon { width: auto; float: none; }
    .footer .generator { display: none; }

    /* header du calendrier full-calendar */
    table.fc-header td { display: block; text-align: left; }

    .spip-admin-bloc, .spip-admin-float { top:auto !important; bottom:0; }
    .spip-admin-boutons { border-radius:.3em .3em 0 0 !important; }
}

/* fin */