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

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

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

/* Elements principaux
------------------------------------------ */

body { text-align: center; 
    background:#EEE;
}

.page { position: absolute; 
    width: 100%;
    height:100%;
    text-align: left; }

.main {position: relative;
    width:100%; 
    max-width: 1200px;
    height:100%;
   margin: 0 auto 0 auto;}

#nav {width:80%;
    height: 10ex;
    margin:0 0 0 20%;}

.footer {
    font-family:"IBM Plex Serif", serif;
    line-height: 1.2em;
    background-image: linear-gradient(white, blue);
    float:left;
    width:100%;
    height: auto;
    margin:0 0 0 0;
    padding: 1ex;}

.boite {display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    width: 100%;
    height : 510px;
    overflow: hidden;
    margin: 20px 0;}

.acceuil {
   }
.acceuil ul {float:left;
    width: 50%;
    margin: 0;
    padding: 0;
    background: White;
   }

/* largeur calculee du wrapper: 960*70%  = 672px */
.wrapper { clear: both; 
    float: left;
    width: 60%;
    margin-left:20%;
    overflow: hidden;
    padding: 0 2ex 5ex 2ex;
}
.content { height: 100%;
    width: 100%;
    margin-top: 20px; }
  
/* Entete et barre de navigation
------------------------------------------ */
#header {position: absolute;
    left: 0px; 
    width : 20%;
    height: auto;
    margin-top:1em;}

#header img{
    margin-bottom:5em;}

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

.archive_annee {width: 100%;
            border-top: solid 0px;
            padding: 4ex 0 0.5ex 0;
  font-family:'Duplicate Sans Web';
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  font-size:1.2em;}
.archive {width: 100%;
            border-top: solid 1px;
            padding: 1ex 0;}
a:hover .archive {background-color: #000;
                color:#FFF;}


.case {display:inline-block;
            width: 33%;
            vertical-align: top;}
 
.footer .colophon { 
    float: left; 
    width: 66%; 
    margin: 20px 0 100px 0;
    column-count: 2;}
.footer .infolettre { float: left; 
    width: 33%; 
    margin: 20px 0 100px 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }

/* menu*/
.menu ul{
    width : 100%;
    padding-top: 1ex;
}
.menu ul li{
    margin-top: 1ex;
    padding-top : 1ex;
    border-top: solid 1px;
}

.documents_joints {
    margin-top: 1em; }
.documents_joints a {
    color:blue; }

/* 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: 0 0;}
    
    .page {width: 100%;
        max-width: none;}
    
    #header {position: relative;  
    width : 102%;
    height: 5em;
    margin:0 -0.5ex;
    padding-left: 0.5ex;}
    
    #header img { float : left;
    width: 33%;
    height: 5em;
    padding: 2ex;
    margin-bottom: 0;
    border-bottom: solid 3px;}

    #nav {width:100%;
    height: 10ex;
    margin:0 !important;
    font-size:1em;}
}
 
/* largeur maximum 640px */
@media (max-width: 640px) {
     /* layout */
    .wrapper,
    .content { width: 100%; margin-left: 0; margin-top:0; }
    .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; }
    .arbo { display: none; }
    .footer .colophon { width: auto; 
        float: none; 
        margin-bottom:0em; 
        margin-left:-2ex; padding: 0 3ex; 
        border-bottom:solid 1px;
        column-count: 1;}
    .footer .infolettre { width: auto; float: none; }
    .footer .generator { display: none; }
    
    .case { display:block;
        width: 100%;
        line-height: 1.3em;
        vertical-align: top;}
    .case a {font-weight: 700;}

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

    .acceuil {float:left;
    width: 100%;
   }

}

/* fin */