body {
color: #555;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
svg,
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed,
video {
max-width: 100%;
}
/* conserver le ratio des images et empecher les debordements de boites dus aux border ou padding */
svg,
img,
img.spip_logos {
height: auto;
width: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
.hidden {
display: none;
}
img#cboxPhoto {
height: inherit;
}
/* gestion des mots longs */
textarea,
table,
td,
th,
code,
pre,
samp {
word-wrap: break-word;
/* passage a la ligne force */
-webkit-hyphens: auto;
/* cesure propre */
-moz-hyphens: auto;
hyphens: auto;
}
code,
pre,
samp {
white-space: pre-wrap;
/* passage a la ligne specifique pour les elements a chasse fixe */
}
img,
table {
margin: 0;
padding: 0;
border: none;
}
tr,
td {
vertical-align: middle;
}
a {
word-break: break-word;
text-decoration: none;
color : #3259a7;
}
a:hover {
text-decoration: underline;
color : #3259a7;
}
h1,
h2,
h3,
h4,
h5,
form,
ul,
ol,
li,
fieldset {
margin: 0;
padding: 0;
}
h1 {
padding: 0 0 1em 0;
text-align: center;
}
.content h1.titre {
display: block;
text-align: left;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0;
color: #555;
}
.rtl .content h1.titre {
text-align: right;
}
.page_rubrique h1.titre {
padding: 0;
}
h2.titre_bloc {
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border: none;
margin: 0 0 .5em 0;
padding: 0 0 .5em 0;
color: #555;
}
.titre_ligne {
    height: 3px;
    width: 50px;
    display: block;
    margin: 1em 0 2em 0;
    background-color: #555;
}
.headerContent .titre_ligne,
.page_sommaire .titre_ligne {
margin: 1em auto;
}

span.titre_bloc {
width: 90%;
float: left;
margin: 0 0 0 0;
padding: 5px 5%;
}
a.lien_bouton {
color: #FFF;
padding: .6em 1.5em;
}
a.lien_bouton.grand {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.2em;
}
div.bouton a {
margin: 1em 0;
text-transform: uppercase;
display: inline-table;
overflow: hidden;
transition: .3s all ease;
}
.bouton i {
padding: 1em 1em;
color: white;
background-color: rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.6);
display: table-cell;
}
.bouton span {
padding: 1em 1.2em;
color: white;
font-size: .9em;
font-weight: 700;
letter-spacing: 1px;
display: table-cell;
}
div.bouton:hover span {
background-color: rgba(0, 0, 0, 0.2);
transition: .3s all ease;
text-decoration: none;
}
div.bouton:hover a {
text-decoration: none;
}
/*------- PERMET DE DESACTIVER LES BR et regle aussi le pb avec les tableaux*/
.texte br {
display: none;
}
.texte p br {
display: inline;
}
.notes {
padding: .1em 1em;
}
.titre_logo {
float: left;
width: 50px;
height: 50px;
margin-top: 3px;
}

.invisible {
visibility: hidden;
height: 1px;
overflow: hidden;
}
.spacer {
clear: both;
height: 1px;
}
.tableau {
display: table;
width: 100%;
}
.tableauenligne {
display: inline-table;
width: 100%;
}
.ligne-tableau {
display: table-row;
width: 100%;
}
.cellule-tableau {
display: table-cell;
vertical-align: top;
}
.formulaire_abonnement {
padding: 25px 0 0 0;
}
.logos_social {
padding: 0;
}
.logos_social li {
margin: 0 5px;
float: left;
}
.logos_social li a {
display: block;
color: #FFF;
padding: 8px 3px;
border-radius: 50%;
min-width: 30px;
text-align: center;
margin: 0;
}
.logos_social li a i {
display: block;
}
.logos_social li a:hover {
text-decoration: none;
}
a.lien_bouton {
width: auto;
clear: both;
text-align: center;
}
a.lien_bouton:hover {
cursor: pointer;
}
a.lien_bouton {
display: inline-block;
padding: .6em 1.5em .8em 1.5em;
}
a.lien_bouton.grand {
width: 95%;
display: block;
padding: .8em 2.5%;
margin: 1em 0;
text-transform: uppercase;
letter-spacing: 1px;
}

/* ---------------------- SPECIAL LISTE EVENEMENT -------------------- */
.liste_item {}
.liste_item .item_logo {
display: table-cell;
vertical-align: top;
}
.liste_item .item_info {
display: table-cell;
vertical-align: top;
text-transform: uppercase;
padding: 0 2.5%;
}
.liste_item .item_info .item_info_date {
margin: 0;
color: black;
}
.liste_item .item_info .item_info_titre {
display: table-cell;
vertical-align: middle;
padding: .5em 0 0 0;
}
.liste_item .item_info .item_info_soustitre h4 {
margin: 0 0 0 0;
}
.liste_item .item_info .item_info_chapo {
margin: 15px 0 0 0;
text-align: justify;
text-transform: none;
}
.liste_item .item_info .item_info_texte {
margin: 15px 0 0 0;
text-align: justify;
text-transform: none;
}
.liste_item .item_info .item_info_supp {
display: table-cell;
vertical-align: top;
}
.liste_item .item_info .item_info_lieu,
.liste_item .item_info .item_info_evenement {
margin: 4px 0 0 0;
text-align: justify;
text-transform: none;
}
.item_info .item_info_button {
clear: both;
text-align: left;
}
.item_info .item_info_button a {
margin: 1.5em 0 0 0;
padding: .6em 2em .8em 2em;
display: inline-block;
}
/* --------------------------------------*/
/* --------------BANDEAU ----------------*/
/* --------------------------------------*/
.bandeau {
width: 100%;
display: block;
}
.bandeau_titre {
text-align: center;
padding: 20px 0;
}
.bandeau_titre h1 {
display: block;
padding: .5em;
line-height: 1.5em;
}
.bandeau,
.bandeau .bandeau_titre {
position: relative
}
.bandeau_liens {
position: relative;
min-height: 48px;
border-top: 1px solid #D7D7D7;
border-bottom: 1px solid #D7D7D7;
background-color: #EAEAEA;
}
.filariane {
position: relative;
line-height: 30px;
position: relative;
padding: 10px 0;
display: inline-block
}
.bandeau_liens .bouton {
float: right
}
.bandeau_liens .bouton a {
float: right;
margin: 8px 0 0 5px
}
/* ------------------------------------------------------------------------*/
/* -------------------------PAGE D ACCUEIL---------------------------------*/
/* ------------------------------------------------------------------------*/
.page_sommaire h1.titre {
text-align: center;
}
#shortcuts {
/*text-align: left;*/
}
#shortcuts a.lien_bouton {
line-height: 120%;
text-align: left;
padding: .5em 45px .6em 1em;
margin: 0 0 15px 0;
display: block;
}
.rtl #shortcuts a.lien_bouton {
text-align: right;
padding: .5em 1em .6em 45px;
}
#shortcuts a.lien_bouton.contact {
margin: 30px 0;
}
/* ------------------------------------------------*/
/* ------------ BLOC AGENDA+ ACTUS  ---------------*/
/* ------------------------------------------------*/
.table .item a {
display: block;
z-index: 30;
}
.table .item:hover a,
.table .item a:hover,
.table .item_info:hover a,
.table .item_info a:hover {
text-decoration: none;
}
.table .item_info_supp span {
display: none;
}
.table .item_info_supp .item_info_date_courte,
.table .item_info_supp .item_info_date_complete {
padding: .2em 0;
}
.table .item_info_supp .item_info_chapo,
.table .item_info_supp .item_info_texte {
margin: .2em 0 0 0;
}
.table .item_info_supp .item_info_lieu,
.table .item_info_supp .item_info_evenement {
margin: .1em 0 0 0;
}
.table.TWLA .item_content,
.table.TWOE .item_content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.table.TWLA .item_info_supp .item_info_spectacle {
width: 100%;
padding: .2em 0;
}
/* ------------ Vignette TWLA Thumbnail With Legend Aside ---------------*/
.table.TWLA .item {
display: table;
}
.table.TWLA .aspect_ratio {
padding-bottom: 50%;
}
.table.TWLA .item_info,
.table.TWLA .item_info_supp .item_info_date_complete {
display: none;
}
.table.TWLA .item .item_logo,
.table.TWLA .item .item_info_supp {
position: relative;
width: 50%;
padding: 0;
display: table-cell;
vertical-align: top;
}
.table.TWLA .item .item_info_supp {
padding: 2.5%;
}
.table.TWLA .item .item_logo img {
width: 100%;
}
/* ------------ Vignette TWOE Thumbnail With Over Effect ---------------*/
/* .table.TWOE  .item_info_supp .item_info_titre , */
.table.TWOE .item_info_supp .item_info_date_complete {
display: none;
}
.table.TWOE .aspect_ratio {
padding-bottom: 130%;
}
.table.TWOE .item_content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.table.TWOE .item .item_info {
padding: 2% 5%;
width: 90%;
position: absolute;
/*top:77%;*/
min-height: 23%;
bottom: 0;
height: auto;
z-index: 20;
}
.table.TWOE .item .item_info .item_info_date {
padding: 0 .3em 0 0;
display: inline;
}
.table.TWOE .item .item_info h3.item_info_titre {
display: inline;
}
.table.TWOE .item .item_logo {
position: relative;
}
.table.TWOE .item .item_info_supp {
height: 0;
overflow: hidden;
width: 95%;
padding: 0 2.5%;
position: absolute;
top: 0;
-webkit-transition-property: height;
-moz-transition-property: height;
-o-transition-property: height;
-ms-transition-property: height;
transition-property: height;
z-index: 10;
}
.table.TWOE .item_info_adresse,
.table.TWOE .item_info_descriptif {
display: none;
}
.table.TWOE .item:hover {
cursor: pointer;
}
.table.TWOE .item:hover .item_logo img {
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
-o-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-o-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.table.TWOE .item:hover .item_info_supp {
height: 100%;
z-index: 10;
}
.lien_agenda_complet {
display: block;
padding: 0 0 1em 0;
/* float:right; */
clear: both;
width: 100%;
}
.table.TWOE .item .item_info_supp a {
position: absolute;
top: 0;
bottom: 0;
padding: 2.5%;
width: 95%;
height: 95%;
}
/* -----------------------------------------------*/
/* --------------  ARTICLE NORMAL ----------------*/
/* -----------------------------------------------*/
.img_logo {
margin: 20px 0;
text-align: center;
width: 100%;
}
#pied_article {
/*border-top: 1px solid #CCC;*/
margin: 1em 0 0 0;
/*padding: 1em 0;*/
clear: both;
width: 100%;
}
#pied_article .social-list {
display: table;
}
#pied_article .social-list > span {
display: inline-block;
float: left;
}
#pied_article .social-list > span a {
display: block;
padding: 0.6em 1em .6em 1em;
margin: .5em 1em .5em 0;
font-size: 1.1em;
border-radius: 5px;
border: none;
min-width: 90px;
text-align: left;
}
#pied_article .social-list.mini > span a {
min-width: auto;
}
#pied_article .social-list.mini .count {
display: none;
}
#pied_article .social-list .facebook a {
background-color: #3b5998;
}
#pied_article .social-list .twitter a {
background-color: #00aced;
}
#pied_article .social-list .linkedin a {
background-color: #0077B5;
}
#pied_article .social-list .tumblr a {
background-color: #32506d;
}
#pied_article .social-list .pinterest a {
background-color: #cb2027;
}
#pied_article .social-list .email a {
background-color: #cb2027;
}
#pied_article .social-list > span:hover a {
background-color: #D82E50;
border-color: #D82E50;
color: white;
}
#pied_article .social-list > span i {
font-size: 1.2em;
}
#pied_article .social-list .count {
float: right;
}
#pied_article .imprimer {
display: inline;
float: right;
text-align: right;
vertical-align: top;
}
#documents_portfolio {
margin-top: 20px;
}
#documents_portfolio h2 {
/*    padding: 0;
float: left;*/
}
#documents_portfolio a.lien_visualisation {
display: block;
float: right;
padding: 5px 10px;
}
/* Portfolio */
.documents_joints {
clear: both;
margin: 30px auto;
display: table;
}
.documents_portfolio .spip_logos {
margin: 6px 3px 0 3px;
padding: 4px;
border: 1px solid #DDD;
}
.documents_portfolio a:hover .spip_logos {
border-color: #F57900;
}
.documents_portfolio a.on .spip_logos {
border-color: #8B6F92;
}
#album_evenement,
#document_joint {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
text-align: center;
position: relative;
opacity: 1;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
text-align: center;
}
#album_evenement:hover,
#document_joint:hover {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#album_evenement .info_non_adherent,
#document_joint .info_non_adherent {
position: absolute;
top: 0;
left: 0;
padding: 20px 10px;
bottom: 0;
right: 0;
font-weight: 600;
background-color: rgba(255, 255, 255, 0.8);
opacity: 0;
}
#album_evenement:hover .info_non_adherent,
#document_joint:hover .info_non_adherent {
opacity: 1;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#album_evenement img {
padding: 0;
border: none;
margin: 0 0;
}
#album_evenement h3,
#document_joint h3 {
font-size: .9em;
padding: 10px 3px;
margin: 0;
text-align: center;
}
#album_evenement .titre,
#document_joint .descriptif {
font-size: .9em;
font-weight: 600;
padding: 5px;
border: 1px solid #F3F3F3;
background-color: #F9F9F9;
color: #3E3E3E;
}
#album_evenement .lieu,
#document_joint .type {
font-size: .9em;
padding: 5px;
border: 1px solid #F3F3F3;
background-color: #F9F9F9;
color: #3E3E3E;
padding: 5px;
/* height: 32px; */
}
/* -----------------------------------------------*/
/* ---------- ARTICLES AVEC EVENEMENTS -----------*/
/* ---------------------------------------------- */
.evenements_avenir_liste {}
.evenements_avenir_liste .evenements_avenir {
padding: 15px 30px 30px 30px;
}
.evenements_avenir_liste .evenements_avenir {
background-color: #E8E8E8;
}
.evenements_avenir_liste .evenements_avenir:nth-child(2n+1) {
background-color: #F5F5F5;
}
.evenements_avenir_liste .evenements_avenir h3.titre {
font-size: 1.6em;
}
.evenements_avenir_liste .evenements_avenir .programmation {
margin: 0 0 1.5em 0;
padding: 0;
/*clear: both;*/
}
.evenements_avenir_liste .evenements_avenir .programmation span {
display: table-cell;
padding: .5em .5em .5em 0;
}
.evenements_avenir_liste .evenements_avenir .programmation .date {
font-weight: 600;
}
.evenements_avenir_liste .evenements_avenir .logo_evenement_avenir {
float: right;
width: 40%;
margin: 0 0 5% 5%;
}
.evenements_avenir_liste .evenements_avenir .action_evenement {
clear: both;
text-align: right;
margin-top: 20px;
}
.conversations p {
max-width: 42em;
}
/* -----------------------------------------------*/
/* ------------ PAGE EVENEMENT -------------*/
/* ---------------------------------------------- */
.page_evenement .google_map h4 {
margin-top: 1em;
margin-bottom: .5em;
}
.page_evenement .google_map iframe {
width: 100%;
margin: 30px 0;
}
/* -----------------------------------------------*/
/* --------- ARTICLES ARCHIVE EVENEMENTS ---------*/
/* ---------------------------------------------- */
.archive .item_logo {
width: 100px;
}
.archive .item {
padding: 5px 0
}
.archive .item_info {
padding: 0 5%
}
/* ------------------------------------------------------------------------*/
/* -------------------------PAGE RUBRIQUE----------------------------------*/
/* ------------------------------------------------------------------------*/
#page_rubrique {
margin: 0 0 15px 0;
}
.liste.articles .liste-items > li {
margin: 0 0 30px 0;
}
/* ------------------------------------------------------------------------*/
/* ------------------------- PARTIE  --------------------------------------*/
/* ------------------------------------------------------------------------*/
.js-masonry {
margin: 2em 0;
position: relative;
width: 100%;
}
.js-masonry .item {
width: 50%;
margin: 0
}
.js-masonry .item img {
padding: .25% 1%;
}
.js-masonry a {}
.pc,
.tab {
display: none;
}
.mobile {
display: block;
}
/* ------------- Taille de police  -------------*/
.bandeau_titre h1 {
font-size: 2.2em;
}
h2.titre_bloc {
font-size: 1.5em;
}
.table_item .item .titre_item {
font-size: 1.3em;
}
#main_slideshow_hp {
margin-bottom: 0 !important
}
#main_slideshow_hp .camera_caption > div a {
font-size: 1em;
}
#main_slideshow_hp.camera_wrap .camera_pag {
display: none;
}
html {
height: 100%;
overflow-y: scroll;
overflow-x: auto;
}
body {
margin: 0;
padding: 0;
background-color: white;
/*font-size: 95%;*/
height: 100%;
}
#page {
width: 100%;
background: white;
min-height: 100%;
position: relative;
min-width: 360px;
}
.header_content,
.bandeau_liens_content,
.row,
.footer,
.ligne_footer_content {
margin-left: auto;
margin-right: auto;
padding-left: 1.5%;
padding-right: 1.5%;
width: 97%;
max-width: 1200px;
}
#container {
clear: both;
position: relative;
}
.row {
padding-top: 30px;
padding-bottom: 30px;
}
#bloc_cours .bloc_content {
max-width: 320px;
}
#bloc_droite {
display: none;
}
/* ------------------------------------------------*/
/* ------------- PAGE ARTICLE ---------------------*/
/* ------------------------------------------------*/
.texte iframe {
width: 100%
}
#bloc_actualites .table.TOC .item .item_info_supp .item_info_chapo_complet,
#bloc_actualites .table.TOC .item .item_info_supp .item_info_texte {
display: none;
}
.programme .item_logo {
width: 30%;
}
.programme .item_info_chapo,
.programme .item_info_texte {
display: none;
}
.programme .item_info_supp {
display: none;
}
.content_footer {
padding: 5px;
clear: both
}
div.cs_sommaire {
position: relative;
}
/*Correction bug affichage */
img.ui-datepicker-trigger{
width: 16px;
}
/******************************************************************
* Larger Mobile Devices
* This is for devices like the Galaxy Note or something that's 
* larger than an iPhone but smaller than a tablet. 
******************************************************************/
@media only screen and (min-width: 481px) {
/* ------------- Taille de police  -------------*/
.bandeau_titre h1 {
    font-size: 2.4em;
}
h2.titre_bloc {
    font-size: 1.7em;
}
.table_item .item .titre_item {
    font-size: 1.5em;
}
#nav_meme_rubrique {
    padding: 20px 0 0 0
}
.nav_meme_rub {
    width: 100%;
    max-width: 100%;
    display: table;
}
.nav_meme_rub li {
    display: table-cell;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}
.nav_meme_rub li a {
    padding: 1em .5em;
}

/* ------------------------------------------*/
#container {
    padding-bottom: 305px;
}
.img_logo {
    max-width: 350px;
    width: 40%;
    float: right;
    padding: 0 0 0 15px;
}
.content .programmation .info_supp,
.content .programmation .lieu,
.content .programmation .adress {
    display: table-cell;
}
.detail_evenement {
    clear: none;
    max-width: 350px;
    width: 40%;
    float: right;
    padding: 0 0 0 15px;
}
.detail_evenement .img_logo {
    margin: 0;
    text-align: right;
}
.programme .item_info_chapo {
    display: block;
}
.programme .item_info_texte {
    display: none;
}
.page_login .content .authentification,
.page_login .content .creation_compte {
    width: 47.5%;
    padding: 0 2.5%;
    display: table-cell;
}
.onebyone {
    padding-bottom: 40%;
}
.table_item .item {
    width: 48%;
    margin: 2px 1%;
}
.forum_connect {
    display: inline;
    float: right;
    text-align: right;
}
.pagination .prev,
.pagination .pages,
.pagination .next {
    /*display: table-cell;*/
    white-space: nowrap;
    display: none;
}
.pagination .pages {
    display: table-cell;
}
.pagination .prev strong,
.pagination .next strong {
    background-color: #ccc;
    color: #fff;
}
.pagination .prev a,
.pagination .next a {
    background-color: #EAEAEA;
    color: #fff;
}
.pagination .pages a {
    background-color: #e6e6e6;
}
.pagination .pages strong {
    background-color: #EAEAEA;
    color: #fff;
}
}
/******************************************************************
* Tablet & Smaller Laptops
* This will include tablets and some netbooks.
******************************************************************/
@media only screen and (min-width: 768px) {
    .pc,
    .mobile,
    .page_sommaire #navigation {
        display: none;
    }
    .tab {
        display: block;
    }
    .content {
        background-color: white;
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);

        filter: "progid: DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#26000000, Positive=true)";
    }
    #container {
        background-color: #EDEAE8;
        padding-bottom: 215px
    }
    .content section,
    .content article,
    .right_col,
    .content_footer {
        padding-left: 2.5%;
        padding-right: 2.5%
    }
    .right_col {
        margin: auto;
    }
    .right_col > div {
        margin: 20px auto;
        max-width: 450px;
    }
    .content_footer {
        padding-bottom: 25px;
    }
    .nav_meme_rub {
        list-style: none;
        text-align: left;
    }
    /* ------------------------------------------*/
    /* -------------STRUCTURE -------------------*/
    /* ------------------------------------------*/
    #page {
        width: 100%;
        margin: 0 auto;
    }
    #header {
        width: 100%;
    }
    #navigation.nav_left {
        float: left;
        width: 31.5%;
        text-align: left;
    }
    .rtl #navigation.nav_left {
        float: right;
        text-align: right;
    }
    .header_content,
    .bandeau_liens_content,
    .bloc_content,
    .footer,
    .ligne-footer {
        width: 95%;
        padding-left: 2.5%;
        padding-right: 2.5%;
    }
    #container {
        padding-bottom: 225px;
    }
    .content {
/*            float: right;
        width: 68.5%;*/
        clear: none;
    }
    .content section,
    .content article {
        padding-top: 20px;
    }
    .content section.section_paiement{
        float: left;
        width: 62.5%;
        clear: none;
    }


    .content #documents_portfolio {
        padding: 0;
    }
    .camera_fakehover {
        height: 100%;
    }
    .pagination .prev,
    .pagination .pages,
    .pagination .next {
        display: table-cell;
        white-space: nowrap;
    }
}
/******************************************************************
* DESKTOP 
* This is the average viewing window. So Desktops, Laptops, and 
* in general anyone not viewing on a mobile device. Here's where
* you can add resource intensive styles.
******************************************************************/
@media only screen and (min-width: 1025px) {
    /* ------------- Taille de police  -------------*/
    .bandeau_titre h1 {
        font-size: 3em;
    }
    h2.titre_bloc {
        font-size: 2em;
    }
    .table_item .item .titre_item {
        font-size: 1.5em;
    }

    /* ------------------------------------------*/
    .content section,
    .content article {
        float: left;
/*            padding: 15px .5% 15px 2.5%;
        width: 69%;
        width: calc(97% - 250px);*/
    }
    .rtl .content article {
        float: right;
        padding: 15px 2.5% 15px .5%;
    }
    .content .right_col {
        float: right;
        background-color: transparent;
        width: 29%;
        padding-right: 1.5%;
        padding-left: 1.5%;
    }
    .rtl .content .right_col {
        float: left;
        background-color: transparent;
        width: 24%;
        padding-right: 1.5%;
        padding-left: 2.5%;
    }
    .content_footer {
        padding-left: 2.5%;
        padding-right: 2.5%;
    }
    .tab,
    .mobile,
    #bloc_droite {
        display: none;
    }
    .pc {
        display: block;
    }
    .rubrique_agenda.two_third {
        width: 100%;
    }
    /*COMPO AVEC CALENDRIER ou FORMULAIRE INSCRIPTION*/
    .page_article.article_activites .content article,
    .page_article.article_evenements .content article,
    .page_evenement.evenement_activites .content article,
    .page_evenement.evenement_evenements .content article {
        width: 54.5%;
        width: calc(97% - 310px);
    }
    .page_article.article_activites .content .right_col,
    .page_article.article_evenements .content .right_col,
    .page_evenement.evenement_activites .content .right_col,
    .page_evenement.evenement_evenements .content .right_col {
        width: 37%;
        min-width: 280px;
        width: calc(280px);
    }
    .rubrique_activites .content section,
    .rubrique_evenements .content section {
        float: none;
        padding: 30px 2.5%;
        width: 95%;
    }
    .formulaire_spip form{
        max-width: 600px;
    }
    /* ---------------------------------------------*/
    /* -------------STRUCTURE ----------------------*/
    /* ---------------------------------------------*/
    #container {
        padding-top: 170px;
        padding-bottom: 200px;
    }
    .content {
        width: 76.5%;
    }
    #pied_article {
        width: 100%;
    }
    #navigation.nav_left {
        float: left;
        width: 23.5%;
        text-align: left;
    }
    .content .programmation .date {
        display: table-cell;
    }
}
/******************************************************************
* LARGE VIEWING SIZE 
* This is for the larger monitors and possibly full screen viewers.
******************************************************************/
@media only screen and (min-width: 1240px) {
    .bloc_content {
        padding: 50px 0;
    }
    /* ------------------------------------------------------------------------*/
    /* ------ COMPOSITION  SANS COLONNE DE DROITE------------------*/
    /* ------------------------------------------------------------------------*/
    .rubrique_activites .content section,
    .rubrique_evenements .content section {
        padding: 50px 5%;
        width: 90%;
    }
}
@media only screen and (min-width:1500px) {}
/******************************************************************
* RETINA (2x RESOLUTION DEVICES)
* This applies to the retina iPhone (4s) and iPad (2,3) along with 
* other displays with a 2x resolution. You can also create a media
* query for retina AND a certain size if you want. Go Nuts.
******************************************************************/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {}