@charset "UTF-8";
/* CSS Document
   ================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: "Lucida Grande", myriad, Verdana, helvetica;
    vertical-align: baseline;
    color: inherit;
    float: inherit;
    font-size: inherit;
    text-decoration: none;
    text-align: inherit;
    text-rendering: optimizeLegibility; }
/* HTML5 display-role reset for older browsers
   ================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
ol, ul { list-style: none }
table {
    border-collapse: collapse;
    border-spacing: 0; }
a { outline: none }
a:focus { -moz-outline-style: none }
#spip-admin {
    font-size: 10px;
    right: 1%;
    background: transparent; }
.spip-admin-boutons { background: transparent }
a.spip-admin-boutons { background: transparent }
/* ----- FIN DU RESET -------- */
   
   
   
/* 1.R�GLES DE BASE ------------- */
html, body {
    width: 100%;
    text-align: center; }
body { background-color: white }
#masque2 {
    z-index: -10;
    height: 330px;
    width: 100%;
    margin-top: -1px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: repeat;
    background-image: url(img/masque-big2.png); }
/* 2.TITRES ---------------------- */
h1 { }
h2 { }
h3 { }
h4 { }
/* 3.TYPOGRAPHIE ----------------- */
#header .menu { font-size: 20px }
#une h2 {
    font-size: 32px;
    font-weight: normal; }
.saison-precedente h2, .saison-precedente p {
    font-size: 28px;
    font-weight: normal; }

/*  ANNONCE -------------------------------------- */

#annonce { color: #ff6c6b; background:#1f233e;
    padding: 20px;
    margin-bottom: 30px;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
     }
  
#annonce:hover {background-color: #ff6c6b; color: #1f233e;}  
#annonce:active {background-color: #1f233e; color: white;}  

    #annonce h1 {font-size: 52px; padding-top: 160px;}
#annonce p {padding-bottom: 160px;}


/* 9.HEADER ---------------------------------------------------------
   ================================================== */
#fond-header {
    width: 100%;
    overflow: hidden;
    background-color: white; }
#header {
    margin: 0 auto;
    width: 900px;
    float: none; } /* � modifier au changement de taille  */
#header .menu {
    margin: 28px 0 110px;
    float: left; }
#header .menu li {
    height: 64px;
    border: 2px solid black;
    margin: -1px; }
#header .menu li:first-child {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 10px 0 0 10px;
    border-radius: 7px 0 0 7px; }
#header .menu li:last-child {
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 10px 10px 0;
    border-radius: 0 7px 7px 0; }
#header .bouton {
    width: 178px;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease; }
#header .bouton:hover, #header .nonpush:hover {
    color: white;
    background-color: black; }
#header .bouton:active, #header .nonpush:active { color: black }
#header .actif {
    width: 358px;
    color: white;
    background-color: black;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease; }
#header .nonpush {
    width: 358px;
    color: black;
    background-color: white; }
#header .menu a {
    width: 100%;
    height: 100%;
    text-align: center;
    display: table;
    float: none;
    vertical-align: middle; }
#header .menu a p {
    width: 100%;
    height: 100%;
    text-align: center;
    display: table-cell;
    float: none;
    vertical-align: middle; }
#header .menu a h1 {
    float: none;
    display: table-cell;
    vertical-align: middle; }
.infos {
    clear: left;
    float: left;
    text-align: left;
    z-index: 30; }
.infos .bord {
    border-bottom: 2px solid white;
    border-top: 2px solid white;
    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: 0px; }
#question, #edito { }
.question-style, .edito-style {
    height: 48px; /* � modifier au changement de taille */
    padding: 14px 21px;
    background-color: black;
    color: white;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
#question:hover, #edito:hover {
    color: #444;
    cursor: pointer; }
#question { width: 52px } /* � modifier au changement de taille  */
.question-style {
    border-left: 2px solid black;
    border-right: 2px solid white; }
#edito { width: 850px } /* � modifier au changement de taille  */
.edito-style { border-right: 2px solid black }
#infos-texte, #infos-edito {
    display: none;
    border: none; }
#panel1 {
    height: 300px;
    margin-left: -1px;
    background-color: #ff545f;
    color: black;
    float: left;
    display: none;
    margin-bottom: 3px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box; }
#panel2 {
    height: 240px;
    margin-left: -1px;
    background-color: #ff545f;
    color: black;
    float: left;
    display: none;
    margin-bottom: 3px;
    padding-left: 5px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box; }
#panel1 p, #panel2 p {
    padding: 10px 50px 10px 10px;
    font-size: 22px;
    text-align: left;
    line-height: 1.3em; }
#panel1 p a, #panel2 p a {
    border: 2px solid black;
    padding: 8px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 10px; }
#panel1 p a:hover, #panel2 p a:hover {
    background-color: black;
    color: white; }
#panel1 p a:active, #panel2 p a:active { color: black }
#shut1, #shut2 {
    cursor: pointer;
    float: right;
    font-size: 42px;
    margin-right: 30px;
    text-align: right; }
    
    
    
/* 10.CONTENU PRINCIPAL----------- */
#une {
    z-index: 30;
    height: 330px;
    width: 902px;
    margin: -1px auto;
    margin-top: -330px;
    float: none;
    border: 2px solid black;
    background-color: transparent;
    text-align: left;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box; }
#une:active { background-color: black }
#une:hover .bloc-couleur {
    background-color: black;
    color: white;
    opacity: 0.7;*/ }
#une:active .bloc-couleur { opacity: 1 }
.bloc-couleur {
    font-size: 32px;
    text-align: left;
    width: 100%;
    background-color: black;
    color: white;
    border-bottom: solid 2px black;
    padding: 12px 12px 18px 12px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box; }
#une a {
    height: 330px;
    display: block; }
#fond-mur {
    width: 100%;
    background-color: white;
    float: left;
    margin-top: 1px; }
#mur {
    margin: -1px auto 0;
    width: 900px;
    float: none;
    overflow: visible; }
    
    
    
/* BRIQUES ------------------------ */
.brique {
    text-align: center;
    margin: -1px;
    border: 2px solid black;
    float: left;
    /*     display: table; */ }
.brique a {
    height: 100%;
    width: 100%;
    display: table;
    float: none;
    background-color: white;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease; }
.brique a:hover { background-color: transparent }
.brique a:active { background-color: black }
.brique a h2 {
    float: none;
    display: table-cell;
    vertical-align: middle; }
.b1 {
    width: 178px;
    height: 178px; }
.b2 {
    width: 358px;
    height: 178px; }
.b3 {
    width: 538px;
    height: 178px; }
.b4 {
    width: 718px;
    height: 178px; }
.b5 {
    width: 898px;
    height: 178px; }
.b6 {
    width: 178px;
    height: 358px; }
.b7 {
    width: 358px;
    height: 358px; }
    
    
    
/* 11.AUTRES CONTENUS ----------- */
#sous-mur {
    width: 900px;
    clear: left;
    margin: 0 auto;
    float: none; }
#sous-mur .facebook {
    text-align: left;
    height: 24px;
    margin-bottom: 80px;
    padding: 7px;
    padding-top: 10px;
    margin-left: -1px;
    margin-right: -1px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px; }
#sous-mur .facebook iframe { float: left }
#sous-mur p {
    text-align: left;
    padding-bottom: 8px; }
.saison-precedente { height: 178px }
#sous-mur .saison-precedente { margin-bottom: 30px }
.saison-precedente .b1 { }
.saison-precedente .b4 {
    color: white;
    background-color: black;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease; }
#sous-mur .saison-precedente:hover .b4 {
    background-color: white;
    color: black; }
.saison-precedente div div {
    display: table;
    height: 100%;
    width: 100%; }
.saison-precedente a h2, .saison-precedente a p, #sous-mur .saison-precedente a p, .saison-precedente div div h2, .saison-precedente div div p {
    height: 100%;
    width: 100%;
    display: table-cell;
    float: none;
    vertical-align: middle;
    text-align: center;
    padding-bottom: 0; }
    
    
    
    
/* PAGE ARTICLE---------------------------------------*/

/* header ------------------------------------------- */
#page {
    margin: 0 auto;
    width: 900px; }
#bouton-tete {
    margin: 28px 0 160px;
    width: 100%;
    height: 68px;
    display: table;
    border: 2px solid black;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
#bouton-tete:hover {
    background-color: black;
    color: white; }
#bouton-tete:active { color: black }
#bouton-tete h2 {
    display: table-cell;
    float: none;
    vertical-align: middle;
    text-align: center;
    font-size: 32px;
    font-weight: normal; }
.titre-article, .intro {
    width: 100%;
    padding: 14px 12px 20px;
    background-color: black;
    color: white;
    text-align: left;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box; }
.titre-article h1 {
    font-size: 32px;
    font-weight: normal; }
.intro {
    background-color: gray;
    color: black;
    margin-bottom: 30px;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px; }
.intro h2 {
    font-size: 24px;
    font-weight: normal;
    line-height: 1.35em; }
.contenu {
    width: 100%;
    text-align: left;
    font-size: 18px;
    padding: 0 12px;
    line-height: 1.45em;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box; }
.contenu p {
    padding-right: 100px;
    margin-bottom: 20px; }
.contenu blockquote {
    font-size: 32px;
    quotes: "\00AB\00A0" "\00A0\00BB";
    padding-bottom: : 20px;
    line-height: 1.25em;
    color: gray; }
.contenu q {
    font-size: 32px;
    quotes: "\00AB\00A0" "\00A0\00BB";
    display: block;
    line-height: 1.25em;
    color: gray;
    margin-bottom: 20px; }
.contenu q:before {
    content: open-quote;
    margin-right: 0px;
    margin-left: -25px; }
.contenu q:after {
    content: close-quote;
    margin-left: 0px; }
.contenu blockquote p {
    display: inline;
    padding-right: 0px; }
.contenu blockquote:before {
    content: open-quote;
    margin-right: -12px;
    margin-left: -25px; }
.contenu blockquote:after {
    content: close-quote;
    margin-left: -12px; }
.contenu h3 {
    font-size: 32px;
    padding-bottom: 20px;
    line-height: 1.2em; }
.contenu a {
    border-bottom: 1px solid black;
    margin-bottom: -1px;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease; }
.contenu a:hover {
    background-color: gray;
    border-bottom-color: gray; }
.contenu a:active { background-color: black }
/* style des notes ------------------ */
.contenu .spip_note {
    border-radius: 10px 10px 10px 10px;
    color: black;
    font-size: 9px;
    font-weight: bold;
    line-height: 0;
    margin-left: -7px;
    padding: 2px 5px;
    vertical-align: 7px;
    border: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
.contenu .spip_note:hover {
    background-color: black;
    color: white; }
.contenu img {
    max-width: 100%;
    height: auto; }
.contenu iframe, .contenu video { max-width: 100% }
.contenu .spip_documents {
    padding-right: 15px;
    padding-top: 6px; }
.contenu .blocimage {
    float: left;
    margin-left: -12px;
    margin-bottom: 20px;
    width: 900px; }
.contenu .blocimage img {
    width: 100%;
    height: auto; }
sup, sup.typo_exposants {
    font-size: 60%;
    font-variant: inherit;
    font-weight: bold;
    line-height: 0;
    vertical-align: 7px; }
.contenu #auteurs { margin: 60px 0 }
.contenu #auteurs h2 {
    font-size: 18px;
    font-weight: normal;
    color: gray; }
.contenu #auteurs h2 p a { border-bottom-style: dotted }
/* bas de page --------------------- */
#basdepage {
    background-color: gray;
    color: white;
    font-size: 12px;
    line-height: 1.4em;
    margin: 30px 0 0 -12px;
    padding: 12px;
    text-align: center;
    width: 900px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box; }
#basdepage h3 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 10px;
    padding: 0; }
#basdepage .licenses { padding-top: 10px }
#basdepage p {
    padding: 0;
    margin: 0; }
.contenu #basdepage .spip_note {
    background-color: white;
    color: black;
    border-radius: 10px;
    font-size: 9px;
    font-weight: bold;
    line-height: 0;
    margin-left: -7px;
    padding: 2px 5px;
    vertical-align: baseline;
    border: none; }
.contenu #basdepage .spip_note:hover {
    background-color: black;
    color: white;
    border: none; }
.contenu #basdepage a {
    border-bottom: 1px solid white;
    margin-bottom: -1px; }
.social .titresocial {
    background-color: black;
    color: white;
    font-size: 32px;
    padding: 30px 10px; }
.social .liste-social {
    padding: 40px 10px 10px;
    border: solid 2px black;
    font-size: 18px;
    min-height: 50px;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    text-align: center; }
.boutons-share {
    float: none;
    height: 30px;
    margin: auto;
    padding-top: 5px;
    width: 470px; }
.boutonfacebook {
    display: block;
    float: left;
    margin-left: 20px;
    margin-top: -2px; }
.boutontwitter {
    display: block;
    float: left; }
.social { margin-bottom: 60px }
#naviguer {
    margin-bottom: 50px;
    overflow: auto; }
#naviguer .precedent, #naviguer .suivant, #naviguer .noir1, #naviguer .noir2 {
    background-color: black;
    color: white;
    font-size: 32px;
    display: table;
    height: 110px;
    width: 448px;
    float: left;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box;
    -webkit-transition: color 0.2s ease;
    -moz-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    transition: color 0.2s ease;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease; }
#naviguer .precedent:hover, #naviguer .suivant:hover { background-color: gray }
#naviguer .precedent:active, #naviguer .suivant:active {
    background-color: black;
    color: black; }
#naviguer .precedent, #naviguer .noir1 { border-right: 2px solid white }
#naviguer .precedent h2, #naviguer .suivant h2, #naviguer p {
    display: table-cell;
    vertical-align: middle;
    float: none; }
#naviguer .precedent h2, #naviguer .suivant h2 {
    font-size: 18px;
    font-weight: normal; }
#naviguer .precedent h2 {
    text-align: left;
    padding-right: 12px; }
#naviguer .suivant h2 {
    text-align: right;
    padding-left: 12px; }
#naviguer .suivant .fleche, #naviguer .precedent .fleche {
    padding: 0 26px;
    width: 10px; }
#naviguer .sommaire {
    height: 110px;
    width: 896px;
    font-size: 32px;
    float: left;
    display: table;
    border: 2px solid black;
    border-top: none;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box;
    -webkit-transition: color 0.2s ease;
    -moz-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    transition: color 0.2s ease;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease; }
#naviguer .sommaire:hover { background-color: gray }
#naviguer .sommaire:active {
    background-color: black;
    color: black; }
    
    
    
/* COMMENTAIRES: -------------- */
#commentaires {
    text-align: left;
    font-size: 18px;
    color: #333; }
#commentaires .titresocial {
    text-align: center;
    background-color: black;
    color: white;
    font-size: 32px;
    padding: 30px 10px;
    margin-bottom: 2px; }
.commentaire {
    margin-bottom: 2px;
    padding: 15px 50px 20px 15px;
    background-color: #DDD; }
#commentaires div:last-child {
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px; }
.commentaire .nom, .previsu .nom {
    font-size: 12px;
    color: #888;
    padding-bottom: 20px; }
.commentaire p, .previsu p { padding-bottom: 20px }
.commentaire .site, .previsu .site {
    font-size: 12px;
    padding: 5px;
    background-color: #333;
    color: #DDD;
    margin-top: 15px;
    display: inline-block;
    clear: left;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
.commentaire .site:hover, .previsu .site:hover {
    background-color: #FFFF9F;
    color: #333; }
.commentaire h2, .previsu h2 { padding-bottom: 15px }
.participer {
    text-align: center;
    background-color: #FF445B;
    color: #FFF;
    font-size: 32px;
    padding: 40px 20px;
    margin-top: 20px;
    margin-bottom: 2px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
.participer:hover {
    background-color: #7CFF9F;
    color: #333; }
.participer:active {
    background-color: #333;
    color: #7CFF9F; }
.ajaxbloc .active {
    background-color: #333;
    color: #FFF;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0; }
#formulaire-f {
    background-color: #DDD;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box;
    margin-bottom: 100px;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    overflow: auto; }
#blocformulaire { }
.slow { display: none }
#formulaire-f .gris {
    color: #888;
    float: none; }
#formulaire-f .presentation {
    font-size: 16px;
    text-align: left;
    background-color: #FFFF9F;
    padding: 20px 10px;
    margin: 0 20px 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; }
#formulaire-f .presentation a {
    font-size: 12px;
    padding: 8px;
    border: 2px solid #333;
    color: #333;
    margin-right: 5px;
    margin-top: -8px;
    float: right;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
#formulaire-f .presentation a:hover {
    background-color: #333;
    color: #FFFFAA; }
.formulaire_spip fieldset li {
    float: left;
    padding-left: 20px; }
.formulaire_spip fieldset li input {
    clear: left;
    float: left;
    width: 274px;
    height: 40px;
    font-size: 16px; }
.formulaire_spip label {
    font-size: 10px;
    color: #333;
    padding-bottom: 3px;
    clear: left; }
.form1 { background-color: yellow }
.boutons .submit {
    background-color: #AFA;
    border-color: green; }
.boutons .submit:hover {
    background-color: #FFA;
    border-color: yellow; }
.boutons .submit:active { border-color: green }
.formulaire_spip legend { }
.formulaire_spip .explication {
    font-size: 10px;
    color: gray; }
.erreur_message {
    color: #FF4960;
    padding: 10px;
    height: auto;
    display: block;
    background-color: #FFC2B6;
    margin: 15px 0;
    width: 860px;
    text-align: left;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box; }
.erreur_message b { padding-right: 6px }
.formulaire_spip .saisie_titre { }
.formulaire_spip #titre {
    width: 860px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box; }
::-webkit-input-placeholder, ::-webkit-textarea-placeholder {
    color: #CCC;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease; }
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #CCC;
    -moz-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease; }
input, textarea {
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box;
    padding : 10px;
    margin-bottom: 10px;
    background-color: white;
    border: none;
    font-family: "Lucida Grande",myriad,Verdana,helvetica;
    font-size: 16px;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease; }
textarea {
    width: 860px;
    clear: left;
    float: left;
    line-height: 1.4em; }
input:focus, textarea:focus {
    background-color: #FFFFAA;
    outline: none; }
.noajax fieldset .wrap {
    background-color: #D9FFD1;
    float: left;
    margin: -20px 0 20px;
    padding: 20px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box; }
.noajax fieldset legend {
    font-size: 10px;
    margin-right: 20px;
    float: left; }
.noajax fieldset li { padding: 0 }
.noajax fieldset .boutons { margin-bottom: 0px }
.boutons .submit {
    color: #333;
    background-color: #FFFFAA;
    border-radius: 10px 10px 10px 10px;
    font-size: 32px;
    margin: 20px 20px 25px;
    padding: 40px 20px;
    width: 860px;
    float: left;
    cursor: pointer;
    border: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
.boutons .submit:hover {
    color: #333;
    background-color: #7CFF9F; }
.boutons .submit:active {
    color: #7CFF9F;
    background-color: #333; }
.noajax fieldset .boutons {
    border-radius: 10px 10px 10px 10px;
    background-color: #7CFF9F;
    color: #333;
    margin: 40px 0 0 0; }
.noajax fieldset .boutons:hover {
    background-color: #333;
    color: #7CFF9F; }
.noajax fieldset .boutons:active { color: #333 }
.previsu .boutons .soustitre {
    font-size: 10px;
    position: relative;
    text-align: center;
    width: 100px;
    margin: 0 auto;
    float: none;
    margin-top: -40px;
    cursor: pointer;
    color: inherit; }
.noajax fieldset .boutons .submit {
    background-color: #7CFF9F;
    color: inherit;
    padding: 35px 20px 40px;
    margin: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
.noajax fieldset .boutons .submit:hover {
    background-color: #333;
    color: #7CFF9F; }
.noajax fieldset .boutons .submit:active { color: #333 }
.moderation_info {
    padding: 0 20px 20px;
    text-align: left;
    color: #333; }
    
    
    
/* styler les tableaux: ----------------------------------------------- */
table {
    border-collapse: separate;
    margin-top: 20px;
    margin-bottom: 20px; }
table caption { font-size: 14px }
thead { font-size: 24px }
/* thead tr th:first-child{-webkit-border-radius:5px 0 0 0 ;
            -moz-border-radius: 5px 0 0 0;
            border-radius: 5px 0 0 0; }
thead tr th:last-child{-webkit-border-radius:0 5px 0 0 ;
            -moz-border-radius:0 5px 0 0;
            border-radius: 0 5px 0 0; }
 */
thead th {
    padding: 8px 22px 8px 10px;
    color: #fff;
    background-color: gray;
    font-weight: normal; }
tbody { }
tbody .row_odd { background-color: #DEDEDE }
tbody tr { }
tbody td { padding: 8px 22px 8px 10px }
tbody tr td:first-child { border-left: 2px solid gray }
tbody tr td:last-child { border-right: 2px solid gray }
tbody tr:last-child td { border-bottom: 2px solid gray }
tbody tr:last-child td:first-child {
    -webkit-border-radius: 0 0 0 8px;
    -moz-border-radius: 0 0 0 8px;
    border-radius: 0 0 0 8px; }
tbody tr:last-child td:last-child {
    -webkit-border-radius: 0 0 8px 0;
    -moz-border-radius: 0 0 8px 0;
    border-radius: 0 0 8px 0; }
tbody .row_odd:last-child { background-color: transparent }
tbody tr:last-child td { background-color: #DFDFDF }
th { }
td { }
tfooter { }



/* STYLE DES ACTUS ---------------- */
.date-actu {
    width: 178px;
    padding: 14px 10px; }
.infos-actu {
    width: 722px;
    padding: 14px 10px; }
.infos-actu h2 { font-weight: normal }
.article-actu .titre-article {
    float: left;
    margin-left: -1px;
    margin-bottom: 30px; }
.article-actu { margin-bottom: 60px }
.article-actu .contenu { padding: 0 }
.article-actu .contenu p {
    margin-bottom: 20px;
    padding-right: 0px; }
    
    
    
/* STYLE DE A PROPOS ---------------- */
#apropos #page div {
    border: 2px solid black;
    float: left;
    width: 100%;
    padding: 12px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box;
    margin-bottom: -2px; }
#apropos #page .grostitre {
    height: 120px;
    background-color: black;
    color: white;
    padding: 40px 12px; }
#apropos #page .grostitre h1 {
    font-size: 32px;
    font-weight: normal; }
#apropos #page .citation {
    text-align: left;
    font-size: 32px;
    border: none; }
#apropos #page .contenu-apropos {
    font-size: 20px;
    line-height: 1.45em;
    text-align: left;
    padding-right: 60px;
    border: none; }
#apropos #page .contenu-apropos p {
    margin-bottom: 10px;
    float: none; }
#apropos #page .imageroute {
    padding: 0;
    overflow: hidden;
    border: none; }
#apropos #page .imageroute img {
    width: 100%;
    height: auto;
    margin-bottom: -2px; }
#apropos #page .titre-redaction {
    font-size: 32px;
    padding: 30px;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease; }
#apropos #page .redaction, #apropos #page #touslesauteurs {
    border: none;
    padding: 0;
    margin-bottom: 0; }
#apropos #page .redaction a { width: 431px }
#apropos #page a:hover .titre-redaction { background-color: #FF4053 }
#apropos #page a:active .titre-redaction { background-color: #000 }
#apropos #page a .mail {
    background-color: #000;
    color: white; }
#apropos #page a:active .mail { color: white }
.liens-articles-auteurs { margin-bottom: 200px }
#touslesauteurs { }
#touslesauteurs a, .redaction a {
    border: 2px solid black;
    float: left;
    font-weight: normal;
    font-size: 20px;
    margin: 0 -2px -2px 0;
    padding: 36px 8px;
    text-align: center;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease; }
#touslesauteurs a { width: 281px }
#touslesauteurs h2:nth-of-type(3n) a { width: 282px }
#touslesauteurs a:hover, .redaction a:hover { background-color: #FF4053 }
#touslesauteurs a:active, .redaction a:active { background-color: #000 }



/* FOOTER ------------------------- */
.footer {
    width: 100%;
    height: 900px;
    float: left; }
#footer-actu, #footer-sommaire, #footer-article, #footer-apropos {
    background-position: center top;
    background-repeat: repeat-x;
    width: 100%;
    background-image: url(img/footers/triangle-footer-noir.png);
    margin-top: -70px;
    border-bottom: solid 100px black; }
#footer-article { background-image: url(img/footers/footer-mer1-noir.png) }
#footer-apropos { background-image: url(img/footers/footer-plat.png) }
#footer-sommaire, #footer-article { margin-top: -30px }
#footer-apropos { margin-top: 120px }
.arrow-up {
    margin-top: 500px;
    width: 80px;
    height: 80px;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(img/boutons/b-up-blanc.png);
    float: none;
    margin: 500px auto 20px auto;
    display: block;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
.arrow-up:hover { background-image: url(img/boutons/b-up-gris.png) }
.arrow-up:active { background-image: url(img/boutons/b-over-up-blanc.png) }



/* COULEURS ------------------- */
/* #vert-blanc ---------------- */
/* couleur  par d�faut du texte dans la page remplacer body par l'id de la couleur !!! */
#vert-blanc {
    color: #2B2B2B;
    background-color: #F2F2F2; }
#vert-blanc #masque2 { background-image: url(img/masque-big2-gris.png) }
/* couleur  du fond de la page:  */
#vert-blanc #fond-header, #vert-blanc #fond-mur { background: #F2F2F2 }
/* couleur de fond et typo DU TITRE du menu  */
#vert-blanc #header .actif {
    background: #51E380;
    color: #2B2B2B; }
#vert-blanc #header .nonpush {
    background: #F2F2F2;
    color: #2B2B2B; }
/* couleur de fond et typo DES BOUTONS du menu  */
#vert-blanc #header .bouton {
    background: #F2F2F2;
    color: #51E380; }
#vert-blanc #header .bouton:hover, #vert-blanc #header .nonpush:hover {
    background: #51E380;
    color: #2B2B2B; }
#vert-blanc #header .bouton:active, #vert-blanc #header .nonpush:active { color: #51E380 }
#vert-blanc #header .menu li { border-color: #51E380 }


/* BARRE D'INFOS ------------- */

/* SI BLOC PLEIN: */
#vert-blanc #header .infos .bord {
    border-bottom-color: #F2F2F2;
    border-top-color: #F2F2F2; } /* couleurs du fond de la page  */
#vert-blanc .question-style {
    border-left-color: #51E380; /* couleur du bloc */ border-right-color: #F2F2F2; /* couleur du fond de page */; }
#vert-blanc .edito-style {
    border-right-color: #51E380; /* couleur du bloc */ }
#vert-blanc .question-style, #vert-blanc .edito-style {
    color: #2B2B2B;
    nowhitespace: afterproperty;
    background: #51E380;
    /* couleur du bloc */ }
    
/* AU SURVOL ET AU CLIC  */
#vert-blanc #question:hover, #vert-blanc #edito:hover { color: #F2F2F2 }
#vert-blanc .question-style:active { border-left-color: #2B2B2B }
#vert-blanc .edito-style:active { border-right-color: #2B2B2B }
#vert-blanc #question:active, #vert-blanc #edito:active { background: #2B2B2B }

/* COULEUR DE FOND ET TYPO DE LA UNE ----------- */
#vert-blanc #une { border-color: #51E380 }
#vert-blanc #une .bloc-couleur {
    color: #2B2B2B;
    background: #51E380;
    border-bottom-color: #51E380; }
#vert-blanc #une:hover .bloc-couleur { /* opacity: 0.8; */ color: #2B2B2B; background: #51E380; }
#vert-blanc #une:active .bloc-couleur {
    background: #51E380;
    opacity: 1;
    color: #2B2B2B; }
#vert-blanc #une:active { background: #51E380 }

/* COMPORTEMENT DES BRIQUES -------------------- */
#vert-blanc .brique { border-color: #51E380 }
#vert-blanc .brique a { background: #F2F2F2 }
#vert-blanc .brique a:hover { background: transparent }
#vert-blanc .brique a:active { background: #51E380 }

/* SOUS MUR  */
#vert-blanc .saison-precedente .b4 {
    background: #51E380;
    color: #2B2B2B; }
#vert-blanc #sous-mur.saison-precedente:hover .b4 { background: #F2F2F2 }
#vert-blanc #sous-mur.saison-precedente:active .b4 {
    background: #51E380;
    color: #51E380; }
    x
/* PAGE ARTICLE: --- */
#vert-blanc #bouton-tete {
    border-color: #51E380;
    color: #51E380; }
#vert-blanc #bouton-tete:hover {
    background-color: #51E380;
    color: #F2F2F2; }
#vert-blanc #bouton-tete:active { color: #51E380 }
#vert-blanc #page { color: #2B2B2B }
#vert-blanc .contenu a { border-bottom-color: #51E380 }
#vert-blanc .contenu a:hover { background-color: #51E380 }
#vert-blanc .contenu a:active { background-color: #2B2B2B }
#vert-blanc .titre-article {
    background-color: #51E380;
    color: #2B2B2B; }
#vert-blanc .intro {
    background-color: #2B2B2B;
    color: #51E380; }
#vert-blanc blockquote, #vert-blanc q { color: #51E380 }
#vert-blanc thead th {
    color: #fff;
    background-color: #2B2B2B; }
#vert-blanc tbody .row_odd { background-color: #51E380 }
#vert-blanc tbody tr td:first-child { border-color: #2B2B2B }
#vert-blanc tbody tr td:last-child { border-color: #2B2B2B }
#vert-blanc tbody tr:last-child td { border-color: #2B2B2B }
#vert-blanc tbody .row_odd:last-child { background-color: transparent }
#vert-blanc tbody tr:last-child td { background-color: #51E380 }
#vert-blanc .contenu #auteurs h2 { color: #51E380 }
#vert-blanc .contenu #auteurs h2 p a { border-bottom-color: #51E380 }
#vert-blanc .contenu #auteurs h2 p a:hover { background-color: #2B2B2B }
#vert-blanc .contenu #basdepage { background-color: #2B2B2B }
#vert-blanc .contenu #basdepage .spip_note {
    background-color: white;
    border: none; }
#vert-blanc .contenu #basdepage .spip_note:hover {
    background-color: #51E380;
    color: black; }
#vert-blanc .social .titresocial { background-color: #51E380 }
#vert-blanc .social .liste-social { border-color: #51E380 }
#vert-blanc #naviguer .precedent:hover, #vert-blanc #naviguer .suivant:hover, #vert-blanc .sommaire:hover {
    background-color: #51E380;
    color: #2B2B2B; }
#vert-blanc #footer-sommaire {
    background-image: url(img/footers/triangle-footer.png);
    border-bottom: solid 100px #333; }
#vert-blanc #footer-article { background-image: url(img/footers/footer-mer1-noir.png) }
#vert-blanc .arrow-up { background-image: url(img/boutons/b-up-vert.png) }
#vert-blanc .arrow-up:hover { background-image: url(img/boutons/b-up-blanc.png) }
#vert-blanc .arrow-up:active { background-image: url(img/boutons/b-over-up-vert.png) }
/* SUMMERCAMP les couleurs !---------------------------------------------------------------------
   ================================================== */
/* couleur  par d�faut du texte dans la page remplacer body par l'id de la couleur !!! */
#summercamp {
    color: #191E3D;
    background-color: #FFFFED; }
#summercamp #masque2 { background-image: url(img/masque-big-summer.png) }
/* couleur  du fond de la page:  */
#summercamp #fond-header, #summercamp #fond-mur { background: #FFFFED }
/* couleur de fond et typo DU TITRE du menu  */
#summercamp #header .actif {
    background: #F85560;
    color: #FFFFED; }
#summercamp #header .nonpush {
    background: #FFFFED;
    color: #191E3D; }
/* couleur de fond et typo DES BOUTONS du menu  */
#summercamp #header .bouton {
    background: #FFFFED;
    color: #F85560; }
#summercamp #header .bouton:hover, #summercamp #header .nonpush:hover {
    background: #F85560;
    color: #191E3D; }
#summercamp #header .bouton:active, #summercamp #header .nonpush:active { background: #191E3D }
#summercamp #header .menu li { border-color: #F85560 }
/* BARRE D'INFOS ---------------------------------------------------------
   ================================================== */
/* SI BLOC PLEIN:
   ================================================== */
#summercamp #header .infos .bord {
    border-bottom-color: #FFFFED;
    border-top-color: #FFFFED; } /* couleurs du fond de la page  */
#summercamp .question-style {
    border-left-color: #F85560; /* couleur du bloc */ border-right-color: #FFFFED; /* couleur du fond de page */; }
#summercamp .edito-style {
    border-right-color: #F85560; /* couleur du bloc */ }
#summercamp .question-style, #summercamp .edito-style {
    color: #191E3D;
    nowhitespace: afterproperty;
    background: #F85560;
    /* couleur du bloc */ }
#summercamp #panel1, #summercamp #panel2 {
    background-color: #6ACDF2;
    color: #FFFFED;
    border-left: 2px solid #6ACDF2; }
#summercamp #panel1 p a, #summercamp #panel2 p a {
    border: 2px solid #191E3D;
    background: #191E3D; }
#summercamp #panel1 p a:hover, #summercamp #panel2 p a:hover {
    background-color: white;
    border-color: white;
    color: #191E3D; }
#summercamp #panel1 p a:active, #summercamp #panel2 p a:active { color: white }
/* AU SURVOL ET AU CLIC
   ================================================== */
#summercamp #question:hover, #summercamp #edito:hover {
    background: #191E3D;
    color: #F85560; }
#summercamp .question-style:hover { border-left-color: #191E3D }
#summercamp .edito-style:hover { border-right-color: #191E3D }
#summercamp #question:active, #summercamp #edito:active { color: #191E3D }
/* COULEUR DE FOND ET TYPO DE LA UNE ------------------
   ================================================== */
#summercamp #une { border-color: #F85560 }
#summercamp #une .bloc-couleur {
    color: #191E3D;
    background: #F85560;
    border-bottom-color: #F85560; }
#summercamp #une:hover .bloc-couleur {
    opacity: 1;
    background: #191E3D;
    color: #F85560;
    border-bottom-color: #191E3D; }
#summercamp #une:active .bloc-couleur {
    background: #191E3D;
    opacity: 1;
    color: #191E3D; }
#summercamp #une:active { background: #191E3D }
/* COMPORTEMENT DES BRIQUES ---------------------------
   ================================================== */
#summercamp .brique {
    border-color: #F85560;
    color: #F85560; }
#summercamp .brique a { background: #FFFFED }
#summercamp .brique a:hover {
    background: transparent;
    color: #F85560; }
#summercamp .brique a:active {
    background: #F85560;
    color: #191E3D; }
/* SOUS MUR
   ================================================== */
#summercamp .saison-precedente .b4 {
    background: #F85560;
    color: #191E3D; }
#summercamp #sous-mur .saison-precedente:hover .b4 {
    background: #191E3D;
    color: #FFFFED; }
#summercamp #sous-mur .saison-precedente:active .b4 {
    background: #191E3D;
    color: #191E3D; }
/* PAGE ARTICLE: XXXXXXXXXX
   ================================================== */
#summercamp #bouton-tete {
    border-color: #F85560;
    color: #F85560; }
#summercamp #bouton-tete:hover {
    background-color: #F85560;
    color: #191E3D; }
#summercamp #bouton-tete:active {
    background: #191E3D;
    border-color: #191E3D; }
#summercamp #page { color: #191E3D }
#summercamp .contenu a { border-bottom-color: #F85560 }
#summercamp .contenu a:hover { background-color: #F85560 }
#summercamp .contenu a:active { background-color: #191E3D }
#summercamp .titre-article {
    background-color: #F85560;
    color: #191E3D; }
#summercamp .intro {
    background-color: #191E3D;
    color: #FFFFED; }
#summercamp blockquote, #summercamp q { color: #F85560 }
#summercamp thead th {
    color: #FFFFED;
    background-color: #191E3D; }
#summercamp tbody .row_odd { background-color: #F85560 }
#summercamp tbody tr td:first-child { border-color: #191E3D }
#summercamp tbody tr td:last-child { border-color: #191E3D }
#summercamp tbody tr:last-child td { border-color: #191E3D }
#summercamp tbody .row_odd:last-child { background-color: transparent }
#summercamp tbody tr:last-child td { background-color: #F85560 }
#summercamp .contenu #auteurs h2 { color: #F85560 }
#summercamp .contenu #auteurs h2 p a { border-bottom-color: #F85560 }
#summercamp .contenu #auteurs h2 p a:hover { background-color: #191E3D }
#summercamp .contenu #basdepage { background-color: #191E3D }
#summercamp .contenu #basdepage .spip_note {
    background-color: #FFFFED;
    border: none; }
#summercamp .contenu #basdepage .spip_note:hover {
    background-color: #F85560;
    color: #191E3D; }
#summercamp .social .titresocial { background-color: #F85560 }
#summercamp .social .liste-social { border-color: #F85560 }
#summercamp #naviguer .precedent, #summercamp #naviguer .suivant, #summercamp #naviguer .noir1, #summercamp #naviguer .noir2 { background: #191E3D }
#summercamp #naviguer .sommaire {
    border-color: #191E3D;
    color: #191E3D; }
#summercamp #naviguer .precedent:hover, #summercamp #naviguer .suivant:hover, #summercamp .sommaire:hover {
    background-color: #F85560;
    color: #191E3D; }
#summercamp #naviguer .precedent:active, #summercamp #naviguer .suivant:active, #summercamp #naviguer .sommaire:active { color: #F85560 }
#summercamp #footer-sommaire {
    background-image: url(img/footers/triangle-footer.png);
    border-bottom: solid 100px #333; }
#summercamp #footer-article {
    background-image: url(img/footers/footer-mer2-noir.png);
    margin-top: -45px; }
#summercamp .participer {
    background-color: #F85560;
    color: #FFFFED; }
#summercamp .participer:hover {
    background-color: #191E3D;
    color: #FFFFED; }
#summercamp .participer:active { color: #191E3D }
#summercamp .active {
    background-color: #F85560;
    color: #FFFFED; }
#summercamp .boutons .submit {
    background-color: #F85560;
    color: #191E3D; }
#summercamp .boutons .submit:hover {
    background-color: #191E3D;
    color: #F85560; }
#summercamp .boutons .submit:active {
    background-color: #F85560;
    color: #F85560; }
#summercamp #formulaire-f { background-color: #DDDDDD }
#summercamp .noajax fieldset .boutons .submit {
    background-color: #6ACDF2;
    color: #191E3D; }
#summercamp .noajax fieldset .boutons .submit:hover {
    background-color: #F85560;
    color: #191E3D; }
#summercamp .noajax fieldset .boutons .submit:active { color: #F85560 }
.noajax fieldset .wrap { background-color: #CCEDFB }
#summercamp .arrow-up { background-image: url(img/boutons/b-up-rose.png) }
#summercamp .arrow-up:hover { background-image: url(img/boutons/b-over-up-rose.png) }
#summercamp .arrow-up:active { background-image: url(img/boutons/b-over-up-blanc.png) }
/* SUMMERCAMP2 les couleurs !---------------------------------------------------------------------
   ================================================== */
/* couleur  par d�faut du texte dans la page remplacer body par l'id de la couleur !!! */
#summercamp2 {
    color: #191E3D;
    background-color: #FFFFED; }
#summercamp2 #masque2 { background-image: url(img/masque-big-summer.png) }
/* couleur  du fond de la page:  */
#summercamp2 #fond-header, #summercamp2 #fond-mur { background: #FFFFED }
/* couleur de fond et typo DU TITRE du menu  */
#summercamp2 #header .actif {
    background: #FFFF90;
    color: #191E3D; }
#summercamp2 #header .nonpush { }
/* couleur de fond et typo DES BOUTONS du menu  */
#summercamp2 #header .bouton {
    background: #FFFFED;
    color: #191E3D; }
#summercamp2 #header .bouton:hover, #summercamp2 #header .nonpush:hover {
    background: #191E3D;
    color: #FFFF90; }
#summercamp2 #header .bouton:active, #summercamp2 #header .nonpush:active { background: #191E3D }
#summercamp2 #header .menu li { border-color: #FFFF90 }
/* BARRE D'INFOS ---------------------------------------------------------
   ================================================== */
/* SI BLOC PLEIN:
   ================================================== */
#summercamp2 #header .infos .bord {
    border-bottom-color: #FFFFED;
    border-top-color: #FFFFED; } /* couleurs du fond de la page  */
#summercamp2 .question-style {
    border-left-color: #FFFF90; /* couleur du bloc */ border-right-color: #FFFFED; /* couleur du fond de page */; }
#summercamp2 .edito-style {
    border-right-color: #FFFF90; /* couleur du bloc */ }
#summercamp2 .question-style, #summercamp2 .edito-style {
    color: #191E3D;
    nowhitespace: afterproperty;
    background: #FFFF90;
    /* couleur du bloc */ }
#summercamp2 #panel1, #summercamp2 #panel2 {
    background-color: #6ACDF2;
    color: #FFFFED; }
#summercamp2 #panel1 p a, #summercamp2 #panel2 p a {
    border: 2px solid #191E3D;
    background: #191E3D; }
#summercamp2 #panel1 p a:hover, #summercamp2 #panel2 p a:hover {
    background-color: white;
    border-color: white;
    color: #191E3D; }
#summercamp2 #panel1 p a:active, #summercamp #panel2 p a:active { color: white }
/* AU SURVOL ET AU CLIC
   ================================================== */
#summercamp2 #question:hover, #summercamp2 #edito:hover {
    background: #191E3D;
    color: #FFFF90; }
#summercamp2 .question-style:hover { border-left-color: #191E3D }
#summercamp2 .edito-style:hover { border-right-color: #191E3D }
#summercamp2 #question:active, #summercamp2 #edito:active { color: #191E3D }
/* COULEUR DE FOND ET TYPO DE LA UNE ------------------
   ================================================== */
#summercamp2 #une { border-color: #FFFF90 }
#summercamp2 #une .bloc-couleur {
    color: #191E3D;
    background: #FFFF90;
    border-bottom-color: #FFFF90; }
#summercamp2 #une:hover .bloc-couleur {
    opacity: 1;
    background: #191E3D;
    color: #FFFF90;
    border-bottom-color: #191E3D; }
#summercamp2 #une:active .bloc-couleur {
    background: #191E3D;
    opacity: 1;
    color: #191E3D; }
#summercamp2 #une:active { background: #191E3D }
/* COMPORTEMENT DES BRIQUES ---------------------------
   ================================================== */
#summercamp2 .brique {
    border-color: #FFFF90;
    color: #191E3D; }
#summercamp2 .brique a { background: #FFFFED }
#summercamp2 .brique a:hover {
    background: transparent;
    color: #FFFF90; }
#summercamp2 .brique a:active {
    background: #FFFF90;
    color: #191E3D; }
/* SOUS MUR
   ================================================== */
#summercamp2 .saison-precedente .b4 {
    background: #FFFF90;
    color: #191E3D; }
#summercamp2 #sous-mur .saison-precedente:hover .b4 {
    background: #191E3D;
    color: #FFFF90; }
#summercamp2 #sous-mur .saison-precedente:active .b4 {
    background: #191E3D;
    color: #191E3D; }
/* PAGE ARTICLE: XXXXXXXXXX
   ================================================== */
#summercamp2 #bouton-tete {
    color: #191E3D;
    border-color: #191E3D; }
#summercamp2 #bouton-tete:hover {
    background-color: #191E3D;
    color: #FFFF90; }
#summercamp2 #bouton-tete:active {
    background: #FFFF90;
    color: #FFFF90;
    border-color: #FFFF90; }
#summercamp2 #page { color: #191E3D }
#summercamp2 .contenu a { border-bottom: #191E3D dotted 1px }
#summercamp2 .contenu a:hover {
    background-color: #FFFF90;
    border-bottom-color: #FFFF90; }
#summercamp2 .contenu a:active { background-color: #191E3D }
#summercamp2 .titre-article {
    background-color: #FFFF90;
    color: #191E3D; }
#summercamp2 .intro {
    background-color: #191E3D;
    color: #FFFFED; }
#summercamp2 blockquote, #summercamp2 q { color: #191E3D }
#summercamp2 thead th {
    color: #FFFFED;
    background-color: #191E3D; }
#summercamp2 tbody .row_odd { background-color: #FFFF90 }
#summercamp2 tbody tr td:first-child { border-color: #191E3D }
#summercamp2 tbody tr td:last-child { border-color: #191E3D }
#summercamp2 tbody tr:last-child td { border-color: #191E3D }
#summercamp2 tbody .row_odd:last-child { background-color: transparent }
#summercamp2 tbody tr:last-child td { background-color: #FFFF90 }
#summercamp2 .contenu #auteurs h2 { color: #191E3D }
#summercamp2 .contenu #auteurs h2 p a { border-bottom: #191E3D dotted 1px }
#summercamp2 .contenu #auteurs h2 p a:hover { background-color: #FFFF90 }
#summercamp2 .contenu #basdepage { background-color: #191E3D }
#summercamp2 .contenu #basdepage .spip_note {
    background-color: #FFFFED;
    border: none; }
#summercamp2 .contenu #basdepage .spip_note:hover {
    background-color: #FFFF90;
    color: #191E3D; }
#summercamp2 .social .titresocial {
    background-color: #FFFF90;
    color: #191E3D; }
#summercamp2 .social .liste-social { border-color: #FFFF90 }
#summercamp2 #naviguer .precedent, #summercamp2 #naviguer .suivant, #summercamp2 #naviguer .noir1, #summercamp2 #naviguer .noir2 { background: #191E3D }
#summercamp2 #naviguer .sommaire {
    border-color: #191E3D;
    color: #191E3D; }
#summercamp2 #naviguer .precedent:hover, #summercamp2 #naviguer .suivant:hover, #summercamp2 .sommaire:hover {
    background-color: #FFFF90;
    color: #191E3D; }
#summercamp2 #naviguer .precedent:active, #summercamp2 #naviguer .suivant:active, #summercamp2 #naviguer .sommaire:active { color: #FFFF90 }
#summercamp2 #footer-sommaire {
    background-image: url(img/footers/triangle-footer.png);
    border-bottom: solid 100px #333; }
#summercamp2 #footer-article {
    background-image: url(img/footers/footer-mer2-noir.png);
    margin-top: -45px; }
#summercamp2 .participer {
    background-color: #FFFF90;
    color: #191E3D; }
#summercamp2 .participer:hover {
    background-color: #191E3D;
    color: #FFFFED; }
#summercamp2 .participer:active { color: #191E3D }
#summercamp2 .active {
    background-color: #191E3D;
    color: #FFFF90; }
#summercamp2 .boutons .submit {
    background-color: #FFFF90;
    color: #191E3D; }
#summercamp2 .boutons .submit:hover {
    background-color: #191E3D;
    color: #FFFF90; }
#summercamp2 .boutons .submit:active {
    background-color: #FFFF90;
    color: #FFFF90; }
#summercamp2 #formulaire-f { background-color: #DDDDDD }
#summercamp2 .noajax fieldset .boutons .submit {
    background-color: #6ACDF2;
    color: #191E3D; }
#summercamp2 .noajax fieldset .boutons .submit:hover {
    background-color: #FFFF90;
    color: #191E3D; }
#summercamp2 .noajax fieldset .boutons .submit:active { color: #FFFF90 }
.noajax fieldset .wrap { background-color: #CCEDFB }
#summercamp2 .arrow-up { background-image: url(img/boutons/b-up-rose.png) }
#summercamp2 .arrow-up:hover { background-image: url(img/boutons/b-over-up-rose.png) }
#summercamp2 .arrow-up:active { background-image: url(img/boutons/b-over-up-blanc.png) }
/* noir et blanc avec fond transparent pour une ---------------------------------------------- */
#noiretblanc #masque2 { background-image: none }
#noiretblanc #fond-header, #noiretblanc #fond-mur { background-color: transparent }
#noiretblanc #une .bloc-couleur {
    background-color: white;
    color: black;
    border-color: white; }
#noiretblanc #une:hover .bloc-couleur {
    background-color: white;
    opacity: 1;
    color: black;
    border-top: none; }
#noiretblanc #une:active {
    background-color: black;
    opacity: 1;
    color: black;
    border-color: black;
    border-top: none; }
#noiretblanc #une:active .bloc-couleur {
    background-color: black;
    color: black;
    border-color: black;
    border-top: none; }
#noiretblanc #une:hover { background-color: white }
#noiretblanc #une {
    border-color: white;
    border-top: none; }
/* couleur de fond et typo DU TITRE du menu  */
#noiretblanc #header .actif {
    background: white;
    color: black; }
/* couleur de fond et typo DES BOUTONS du menu  */
#noiretblanc #header .bouton {
    background: black;
    color: white; }
#noiretblanc #header .bouton:hover, #summercamp2 #header .nonpush:hover {
    background: white;
    color: black; }
#noiretblanc #header .bouton:active, #summercamp2 #header .nonpush:active { color: white }
#noiretblanc .infos .bord {
    border-bottom: none;
    border-top: none;
    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: 3px; }
#noiretblanc #mur .brique { border: 2px solid white }
#noiretblanc #mur .brique a {
    background-color: black;
    color: white; }
#noiretblanc #mur .brique a:hover {
    background: transparent;
    color: black; }
#noiretblanc #mur .brique a:active {
    background: white;
    color: black; }
#noiretblanc #header .menu li { border-color: white }
#noiretblanc .saison-precedente .b1 {
    background: white;
    border-color: white; }
#noiretblanc .saison-precedente .b4 { border-color: white }
#noiretblanc .contenu a { border-bottom: 1px dotted #FF445B }
#noiretblanc .contenu a:hover {
    background-color: #FF445B;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease; }
#noiretblanc .contenu a:hover { color: #FF445B }
#noiretblanc #sous-mur .facebook { background-color: white }


/* #la-guerre ------------------------------------- */
/* couleur  par d�faut du texte dans la page remplacer body par l'id de la couleur !!! */
#la-guerre {
    color: #494938;
    background-color: #F2F2EB; }
#la-guerre #masque2 { background-image: url(img/masque-big2-gris.png) }
/* couleur  du fond de la page:  */
#la-guerre #fond-header, #la-guerre #fond-mur { background: #F2F2EB; }
/* couleur de fond et typo DU TITRE du menu  */
#la-guerre #header .actif {
    background: #98997E;
    color: #494938; }
#la-guerre #header .nonpush {
    background: #F2F2EB;
    color: #494938; }
/* couleur de fond et typo DES BOUTONS du menu  */
#la-guerre #header .bouton {
    background: #494938;
    color: #F2F2EB; }
#la-guerre #header .bouton:hover, #la-guerre #header .nonpush:hover {
    background: #98997E;
    color: #494938; }
#la-guerre #header .bouton:active, #la-guerre #header .nonpush:active { color: #494938; background-color: red;}
#la-guerre #header .menu li {border-color: transparent;  }


/* BARRE D'INFOS ------------- */

/* SI BLOC PLEIN: */
#la-guerre #header .infos .bord {
    border-bottom-color: #F2F2EB;
    border-top-color: #F2F2EB; } /* couleurs du fond de la page  */
#la-guerre .question-style {
    border-left-color: #98997E; /* couleur du bloc */ border-right-color: #F2F2EB; /* couleur du fond de page */; }
#la-guerre .edito-style {
    border-right-color: #98997E; /* couleur du bloc */ }
#la-guerre .question-style, #la-guerre .edito-style {
    color: #494938;
    nowhitespace: afterproperty;
    background: #98997E;
    /* couleur du bloc */ }
#la-guerre #panel1, #la-guerre #panel2 { background-color: red; color:#F2F2EB; }
#panel1 p a, #panel2 p a {border-color:#F2F2EB ;}
#panel1 p a:hover, #panel2 p a:hover {background-color: #32321F; border-color: #32321F; color: red;}
#panel1 p a:active, #panel2 p a:active {background-color: #F2F2EB; border-color: #F2F2EB;  color: red;}
    
/* AU SURVOL ET AU CLIC  */
#la-guerre #question:hover, #la-guerre #edito:hover { color: #F2F2EB; }
#la-guerre .question-style:active { border-left-color: red; }
#la-guerre .edito-style:active { border-right-color: red; }
#la-guerre #question:active, #la-guerre #edito:active { background: red; }

/* COULEUR DE FOND ET TYPO DE LA UNE ----------- */
#la-guerre #une { border-color: #98997E; }
#la-guerre #une .bloc-couleur {
    color: #494938;
    background: #98997E;
    border-bottom-color: #98997E; }
#la-guerre #une:hover .bloc-couleur { /* opacity: 0.8; */ color: #494938; background: #98997E; }
#la-guerre #une:active .bloc-couleur {
    background: red;
    opacity: 1;
    color: red; border-bottom-color: red; }
#la-guerre #une:active { background: red ;}

/* COMPORTEMENT DES BRIQUES -------------------- */
#la-guerre .brique { border-color: #98997E; }
#la-guerre .brique a { background: #F2F2EB; }
#la-guerre .brique a:hover { background: transparent; }
#la-guerre .brique a:active { background: red; }

/* SOUS MUR  */
#la-guerre .saison-precedente .b4 {
    background: #98997E;
    color: #494938; }
#la-guerre #sous-mur.saison-precedente:hover .b4 { background: #F2F2EB; }
#la-guerre #sous-mur.saison-precedente:active .b4 {
    background: red;
    color: #98997E; }
    
/* PAGE ARTICLE: --- */
#la-guerre #bouton-tete {
    border-color: #494938;
    color: #494938; }
#la-guerre #bouton-tete:hover {
    background-color: #494938;
    color: #F2F2EB; }
#la-guerre #bouton-tete:active { color: #F2F2EB; background-color: red; border-color:red;  }
#la-guerre #page { color: #32321F; }
#la-guerre .contenu a { border-bottom-color: #98997E; }
#la-guerre .contenu a:hover { background-color: red; border-bottom-color: red;}
#la-guerre .contenu a:active { background-color: #494938 ;}
#la-guerre .titre-article {
background-color: red;
    color: #F2F2EB; }
#la-guerre .intro {
    background-color: #32321F;
    color: #F2F2EB; }
#la-guerre blockquote, #la-guerre q { color: #98997E }
#la-guerre thead th {
    color: #fff;
    background-color: #494938; }
#la-guerre tbody .row_odd { background-color: #98997E; }
#la-guerre tbody tr td:first-child { border-color: #494938; }
#la-guerre tbody tr td:last-child { border-color: #494938; }
#la-guerre tbody tr:last-child td { border-color: #494938; }
#la-guerre tbody .row_odd:last-child { background-color: transparent }
#la-guerre tbody tr:last-child td { background-color: #98997E; }
#la-guerre .contenu #auteurs h2 { color: #98997E ;}
#la-guerre .contenu #auteurs h2 p a { border-bottom-color: #98997E; }
#la-guerre .contenu #auteurs h2 p a:hover { background-color: #494938; }
#la-guerre .contenu #basdepage { background-color: #494938; }
#la-guerre .contenu #basdepage .spip_note {
    background-color: #F2F2EB;
    border: none; }
#la-guerre .contenu #basdepage .spip_note:hover {
    background-color: #98997E;
    color: #32321F; }
#la-guerre .social .titresocial { background-color: #98997E; }
#la-guerre .social .liste-social { border-color: #98997E; }
#la-guerre #naviguer .precedent:hover, #la-guerre #naviguer .suivant:hover, #la-guerre .sommaire:hover {
    background-color: #98997E;
    color: #494938; }
#la-guerre #footer-sommaire {
    background-image: url(img/footers/triangle-footer.png);
    border-bottom: solid 100px #333; }
#la-guerre #footer-article { background-image: url(img/footers/footer-mer1-noir.png) ;}
#la-guerre .arrow-up { background-image: url(img/boutons/b-up-vert.png); }
#la-guerre .arrow-up:hover { background-image: url(img/boutons/b-up-blanc.png); }
#la-guerre .arrow-up:active { background-image: url(img/boutons/b-over-up-vert.png); }


/* 15.VENDOR-SPECIFIC --------------------------------------------------
   ================================================== */
body {
    -webkit-text-size-adjust : 100%;
    -ms-text-size-adjust : 100%; }
a:link { -webkit-tap-highlight-color : #000 }
::-webkit-selection {
    background : rgb(153,255,204);
    color : rgb(250,250,250);
    text-shadow : none; }
::-moz-selection {
    background : rgb(153,255,204);
    color : rgb(250,250,250);
    text-shadow : none; }
::selection {
    background : rgb(153,255,204);
    color : rgb(250,250,250);
    text-shadow : none; }
/* input[type=search] {
-webkit-appearance : none; }

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
display : none; }  */
.ie7 img, .iem7 img { -ms-interpolation-mode : bicubic }
/* div,
input,
textarea { 
-webkit-box-sizing : border-box;
-moz-box-sizing: border-box;
-o-box-sizing : border-box;
box-sizing : border-box; }
 */
/* STYLE SUPERSIZED----------------------------------------------------
   ================================================== */
#supersized-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    text-indent: -999em;
    background-color: #000;
    background: no-repeat center center; }
#supersized {
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -999;
    height: 100%;
    width: 100%; }
#supersized img {
    height: auto;
    width: auto;
    position: relative;
    outline: none;
    border: none;
    -ms-interpolation-mode: bicubic; }
/* 14.GLOBAL OBJECTS ----------------------------------------------------
   ================================================== */
.clearfix { zoom : 1 }
.clearfix:before, .clearfix:after {
    content : "\0020";
    display : block;
    height : 0;
    overflow : hidden; }
.clearfix:after { clear : both }
/* ===[ Hide but maintain layout ]=== */
.invisible { visibility : hidden }
/* media queries  */
/* styles pour �cran de 960px et moins ---------------------------------------------------------------------------- */
@media only screen and (max-width: 960px) { 
    #masque2 { background-image: url(img/masque-small.png) }
    #vert-blanc #masque2 { background-image: url(img/masque-small-gris.png) }
    #summercamp #masque2 { background-image: url(img/masque-small-summer.png) }
    #summercamp2 #masque2 { background-image: url(img/masque-small-summer.png) }
    #header, #page { width: 700px }
    #header .menu li { height: 55px }
    #header .bouton { width: 138px }
    #header .actif { width: 278px }
    #edito { width: 650px }
    #question { }
    #panel1 { height: 260px }
    #panel2 { height: 240px }
    #panel1 p, #panel2 p { font-size: 18px }
    #mur, #sous-mur {
        width: 700px;
        overflow: visible; }
    #une {
        height: 330px;
        width: 702px; }
    .contenu p { padding-right: 30px }
    .contenu iframe, #contenu video {
        max-height: 390px;
        max-width: 680px; }
    .contenu img { max-width: 100% }
    .contenu .blocimage { width: 700px }
    #basdepage { width: 700px }
    #naviguer .precedent, #naviguer .suivant, #naviguer .noir1, #naviguer .noir2 {
        font-size: 24px;
        height: 90px;
        width: 348px; }
    #naviguer .sommaire {
        height: 90px;
        width: 696px; }
    .date-actu {
        width: 140px;
        padding: 14px 10px;
        font-size: 14px; }
    .infos-actu {
        width: 560px;
        padding: 14px 10px;
        font-size: 14px; }
    #touslesauteurs a, .redaction a, #touslesauteurs h2:nth-of-type(3n) a, #apropos #page .redaction a { width: 331px }
    textarea, .erreur_message, .formulaire_spip #titre, .ajax .boutons .submit { width: 658px }
    /* BOITES ----------------------------------
       ================================================== */
    .b1 {
        width: 138px;
        height: 138px; }
    .b2 {
        width: 278px;
        height: 138px; }
    .b3 {
        width: 418px;
        height: 138px; }
    .b4 {
        width: 558px;
        height: 138px; }
    .b5 {
        width: 698px;
        height: 138px; }
    .b6 {
        width: 138px;
        height: 278px; }
    .b7 {
        width: 278px;
        height: 278px; }
    .saison-precedente { height: 142px }
}

/* styles pour �cran de 740px et moins ---------------------------------------------------------------------------- */
@media only screen and (max-width: 740px) { 
    body { background-image: none }
    #margedroite, #margegauche { display: none }
}

/* styles pour �cran de 480px et moins ---------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) { 
    
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {  /* 1.R�GLES DE BASE 
@media print { 
    * {
        background : transparent !important;
        color : black !important;
        text-shadow : none !important;
        filter : none !important;
        -ms-filter : none !important; }
    a, a:visited {
        color : #444 !important;
        text-decoration : underline; }
    a[href]:after { content : " (" attr(href) ")" }
    abbr[title]:after { content : " (" attr(title) ")" }
    a[href^="javascript:"]:after, a[href^="#"]:after { content : "" }
    pre, blockquote {
        border : 1px solid #999;
        page-break-inside : avoid; }
    thead { display : table-header-group }
    tr, img { page-break-inside : avoid }
}