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



   layout.css

   Disposition des blocs principaux

   cf.: http://romy.tetue.net/structure-html-de-base



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



body {
    background: url(img/bg_noir_vert.png) repeat-x;
    text-align: center;
    background: #FFF; }



.page {

    position: inherit;

    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;

    text-align: left; }



.header { }



.main {
max-width: 1024px;
padding: 1.2em 0 }



.footer {

    clear: both;

    margin-bottom: 50px; }



.wrapper_sommaire {

    clear: both;

    float: left;

    width: 68.5%;

    overflow: hidden;

    background: #FFF; }



.content_sommaire { min-height: 350px }



.wrapper {

    clear: both;

    float: left;

    width: 68.5%;

    overflow: hidden; }



.content { min-height: 350px }



.aside {

    float: right;

    width: 27.0%;

    overflow: hidden;

    padding: 1.5%;

    background: #FFF;

    margin-bottom: 3%;

    -moz-box-shadow: inset 0 0 5px 5px #EFEFEF;

    -webkit-box-shadow: inset 0 0 5px 7px#EFEFEF;

    box-shadow: inset 0 0 5px 5px #EFEFEF;

    border: solid 1px #FFF;

    border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px; }



/* Entete et barre de navigation

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



.header { padding-top: 1.5em }



.header #logo {

    display: block;

    margin: auto;

    line-height: 1;

    font-weight: bold; }



.header #logo,

.header #logo a,

.header #logo a:hover {

    background: transparent;

    text-decoration: none;

    color: #FFF; }



.header #slogan { margin: 0 }



.formulaire_menu_lang {

    position: absolute;

    right: 0;

    top: .9em;

    display: block;

    width: 30%; }



.nav {

    border: solid #222;

    border-width: 1px 0; }



.nav ul { }



.nav ul li { }



.nav ul li a {

    float: left;

    display: block;

    padding: .5em 1em;

    border-right: 1px solid #222;

    text-decoration: none; }



.nav ul li.on2 a {

    background: #EED;

    color: #222;

    font-weight: normal; }



.nav ul li a:focus,

.nav ul li a:hover,

.nav ul li a:active {

    background: #222;

    color: #FFF; }



.footer .colophon {

    float: left;

    height: 40px;

    width: 68%;

    margin: 0; }



.footer .generator { float: right }



.footer .generator a {

    padding: 0;

    background: none; }



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

    /* passer tous les elements de largeur fixe en largeur automatique */



    body,

    .page,

    .header,

    .main,

    .footer,

    .wrapper,

    .content,

    .aside {

        width: auto !important;

        margin: auto !important;

        padding: auto !important; }



    .page {

        margin: 0;

        padding: 0; }



    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */



    .content,

    .aside {

        clear: both;

        float: none !important;

        width: auto !important; }



    .nav ul li a {

        float: none;

        border: 0; }



    #formulaire_recherche {

        display: none;

        position: static;

        text-align: center; }



    .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; }

}



.entete_noire1 {

   background: #000;

    width: 100%;

    padding: 1.25em 0 0 0;

    margin-left: auto;
    margin-right: auto;

    margin-bottom: 0;

    overflow: hidden; }



.entete_noire2 {

    min-width: 20px;

    max-width: 1260px;

    width: 98%;

    margin: 0 auto;

    margin-bottom: 0; }



.corps1 {


    background: url(img/back_vert.png) repeat-x;         /* old  img/back_vert.png */

    width: 100%;

    overflow: hidden; }



.corps2 {

    min-width: 20px;

    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding: 25px;

    width: 96%;

    margin: 0 auto; }



.pied {

    min-width: 20px;

    max-width: 1260px;

    width: 98%;

    clear: both;

    margin: 0 auto 50px auto;

    overflow: hidden; }



.pied2 {

    padding: 2.4%;

    background: #FFF;

    text-align: left;

    -moz-box-shadow: inset 0 0 5px 5px #EFEFEF;

    -webkit-box-shadow: inset 0 0 5px 5px#EFEFEF;

    box-shadow: inset 0 0 5px 5px #EFEFEF;

    border: solid 1px #FFF;

    border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px; }



.bloc_contenu {

    padding: 2.2%;

    margin-bottom: 3%;

    background: #FFF;

    overflow: hidden;

    -moz-box-shadow: inset 0 0 5px 5px #EFEFEF;

    -webkit-box-shadow: inset 0 0 5px 5px#EFEFEF;

    box-shadow: inset 0 0 5px 5px #EFEFEF;

    border: solid 1px #FFF;

    border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px; }



.bloc_contenu2 {

    padding: 2% 2% 0 2%;

    margin-bottom: 3%;

    background: #FFF;

    overflow: hidden;

    -moz-box-shadow: inset 0 0 5px 5px #EFEFEF;

    -webkit-box-shadow: inset 0 0 5px 5px#EFEFEF;

    box-shadow: inset 0 0 5px 5px #EFEFEF;

    border: solid 1px #FFF;

    border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px; }



.item_menu {

    padding: 10px 10px 20px 10px;

    border-radius: 5px 5px 0 0;

    background: #333;

    color: #FFF;

    border: solid 1px #444; }



.item_menu_accueil {

    padding: 10px 10px 20px 10px;

    border-radius: 5px 5px 0 0;

    background: #8CA429;

    color: #FFF;

    border: solid 1px #8CA429; }



.slogan_site {

    color: #FF4500;

    display: inline;

    font-style: italic;
    font-size: 1.3em;

    }



.footer .pied_gauche {

    width: 31.35%;

    float: left; }



.footer .pied_centre {

    width: 31.35%;

    float: left;

    margin-left: 3%; }



.footer .pied_droite {

    width: 31.35%;

    float: right; }



.classement {

    list-style-type: decimal;

    margin-left: 1.7em;

    line-height: 1.25em; }



.sans_serif_moyen { font-family: Arial }



.la_suite {

    margin: 0 0 5% 0;

    padding: 1.4%;

    border: solid 1px #677821;

    border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    background: #8CA429;

    text-shadow: 1px 1px 0px rgba(150, 150, 150, 1); }



.la_suite:hover {

    margin: 0 0 5% 0;

    padding: 1.4%;

    border: solid 1px #769548;

    border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    background: #ABC837;

    text-shadow: 1px 1px 0px rgba(150, 150, 150, 1); }



.introduction {

    margin-bottom: 5%;

    line-height: 1.6; }



.introduction2 {

    margin-bottom: 3%;

    line-height: 1.6; }



.bloc_logo_article {

    position: relative;

    float: right;

    margin: 0 0 2% 3%;

    padding: 0;

    width: 35%;

    height: auto;

    border: solid 4px #FFF;

    -moz-box-shadow: 0px 0px 5px 1px #cfcfcf;

    -webkit-box-shadow: 0px 0px 5px 1px #cfcfcf;

    box-shadow: 0px 0px 5px 1px #cfcfcf;

    filter: progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=NaN, Strength=5); }



.bloc_agrandir {

    position: absolute;

    left: 40%;

    top: 43%;

    margin: 0 auto; }



.icone_agrandir {

    width: 84%;

    height: auto;

    opacity: 0.5;

    -moz-opacity: 0.5;

    -khtml-opacity: 0.5;

    filter: alpha(opacity=50); }



.icone_agrandir:hover {

    width: 84%;

    height: auto;

    opacity: 0.8;

    -moz-opacity: 0.8;

    -moz-opacity: 0.8;

    -khtml-opacity: 0.8;

    filter: alpha(opacity=80); }

	

.num_com { 

    float: right;

	font-size: 1.6em !important;

	color: #DCDCDC; 

	font-family: Georgia !important;

	font-style: italic !important;

	}

	

.nbre_coms {

    color: #FFF;

    padding: 0.2em 0.4em;

    background: #8CA429;

    border-radius: 4px; }



.bloc_portfolio {

    display: block;

    background: #EFEFEF;

    padding: 2% 0% 2% 2%; }



.bloc_portfolio:hover {

    display: block;

    background: url(img/back_docs.png);

    padding: 2% 0% 2% 2%; }



.bloc_logo_site { float: left }



.logo_site {

    margin: 0;

    padding: 0;

    border: 0;

    vertical-align: middle; }



.menu_select {

    display: none;

    padding: 1% 1% 0 1%;

    background: #8CA429;

    color: #FFF;

    border: 0;

    border-radius: 4px 4px 0 0;

    text-align: center;

    font-size: 1.4em;

    text-transform: uppercase; }



.select_rub {

    text-align: left !important;

    font-size: 0.8em !important;

    text-transform: none !important; }



.spip-icons {

    font-family: 'spip-icons' !important;

    font-size: 1.2em;

    color: #808080;

    vertical-align: middle; }



.spip-icons:hover { color: #CCC }



#remonter {

    position: fixed;

    bottom: 5%;

    right: 3%;

    cursor: pointer;

    display: none;

    opacity: 0.3;

    -moz-opacity: 0.3;

    -khtml-opacity: 0.3;

    filter: alpha(opacity=30); }



#remonter:hover {

    position: fixed;

    bottom: 5%;

    right: 3%;

    cursor: pointer;

    display: none;

    opacity: 0.7;

    -moz-opacity: 0.7;

    -moz-opacity: 0.7;

    -khtml-opacity: 0.7;

    filter: alpha(opacity=70); }



.image_opacity {

    opacity: 0.7;

    -moz-opacity: 0.7;

    -moz-opacity: 0.7;

    -khtml-opacity: 0.7;

    filter: alpha(opacity=70); }



.image_opacity:hover {

    opacity: 1;

    -moz-opacity: 1;

    -moz-opacity: 1;

    -khtml-opacity: 1;

    filter: alpha(opacity=100); }



@media (max-width: 3000px) {
    body {

    font-size: 70%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto; }

    .corps1  {
     }


    .main  {
     max-width : 1024px;
     margin-left: auto;
     margin-right: auto;
     }

 .ajustable {

        width: auto !importantold500px important;

        height: auto;

        border: 0; }

}

@media (max-width: 1260px) {
    body {
    font-size: 1.em;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto; }

 .ajustable {

        width: auto !importantold500px important;

        height: auto;

        border: 0; }

}


@media (max-width: 960px) { 

    .ajustable {

        width: auto !importantold500px important;

        height: auto;

        border: 0; }

}



@media (max-width: 800px) { 

    body { font: 0.9em/1.5em Arial }



    .classement {

        list-style-type: decimal;

        margin-left: 0.4em;

        padding-left: 0;

        line-height: 1.25em; }



    .logo_site {

        margin: 0;

        float: left;

        width: 160px;

        height: auto; }



    .bloc_logo_site {

        float: none;

        margin: 0 auto; }



    .ajustable {

        width: auto !importantold500px important;

        height: auto;

        border: 0; }

}



@media (max-width: 640px) { 

    body { font: 0.85em/1.5em Segoe, Arial }



    h1,

    h1.spip,

    h2,

    h3,

    h4,

    h5,

    h6,

    .h1,

    .h3,

    .h3_2,

    .h4,

    .h4_2,

    .h5,

    .h6,

    .une { font-family: Segoe, Arial }



    .menu_select {

        display: inline;

        float: right;

        width: 36%; }



    #nav-container { display: none }



    #remonter,

    #remonter:hover { display: none }



    .ajustable {

        width: auto !importantold500px important;

        height: auto;

        border: 0; }



    .footer .generator { float: right }

}



@media (max-width: 480px) { 

    body { font: 0.8em/1.5em Segoe, Arial }



    .footer .pied_gauche {

        width: 100%;

        float: none; }



    .footer .pied_centre {

        width: 100%;

        float: none;

        margin-left: 0; }



    .footer .pied_droite {

        width: 100%;

        float: none; }



    .slogan_site { display: none }



    .logo_site {

        margin: 0 auto;

        display: block;

        text-align: center !important;

        float: none; }



    .bloc_contenu2 { padding: 3.4% 3.4% 0 3.4% }



    .ajustable {

        width: auto !importantold500px important;

        height: auto;

        border: 0; }



    .menu_select {

        display: block;

        width: 46%;

        margin: 1em auto 0 auto;

        float: none; }

}



@media (max-width: 320px) { 

    body { font: 0.7em/1.5em Segoe, Arial }



    .icone_agrandir { display: none }



    .spip_logos_right {

        float: right;

        margin: 0 0px 10px 24px;

        padding: 0;

        border: 0;

        width: 24%;

        height: auto;

        -moz-box-shadow: 0;

        -webkit-box-shadow: 0;

        -o-box-shadow: 0;

        box-shadow: 0; }



    .ajustable {

        width: auto !importantold500px important;

        height: auto;

        border: 0; }

}



/* end */