/* V5 : 2021 commun : évolution des chartes  */
/* 2022-05 */
.formhtml,
button,
input,
select,
textarea {
    color: #222;
}

html {
    overflow-y: scroll;
    color: #434649;
    font-family: 'Roboto', 'Arial', 'sans-serif';
}

a, a:visited, a:active {
    cursor: pointer;
}
a:visited, a:active{
    color: black;
}
a:hover {
    text-decoration: none;
}

a:focus {
    outline: none;
}

::-moz-selection, ::selection {
    color: #fff;
    background-color: #000;
    text-shadow: none;
}

/* Pour un champ CKEDITOR, on rajoute un bg car blanc/blanc ne se voit pas */
.cke_editable ::selection {
    background-color: #328efe;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.cleaner {
    clear: both;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
}

.a_droite {
    text-align: right;
}

b, strong {
    font-weight: 500;
}

/* ==========================================================================
   Grille issue de Bootstrap v2.1.1
   ========================================================================== */

.container {
    margin-right: auto;
    margin-left: auto;
    *zoom: 1;
    position: relative;
}

.container:before,
.container:after {
    display: table;
    content: "";
    line-height: 0;
}

.container:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

[class*="span"]:before,
[class*="span"]:after,
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

[class*="span"]:after,
.clearfix:after {
    clear: both;
}

.row {
    *zoom: 1;
    background-color: transparent !important;
}

.row:before,
.row:after {
    display: table;
    content: "";
    line-height: 0;
}

.row:after {
    clear: both;
}

[class*="span"] {
    float: left;
    min-height: 1px;
}

[class*="span"].hide {
    display: none;
}

[class*="span"].pull-right {
    float: right;
}

/* ==========================================================================
   Commun V2  - Ajustements responsive  de la grille
   ========================================================================== */
@media (max-width: 320px) {
    /* rien pour l'instant
     Smartphone petite résolution
  */
}

@media (max-width: 480px) {
    /* rien pour l'instant
     Smartphone
  */
    .masque_mobile {
        display: none;
    }
}

@media (max-width: 600px) {
    /* rien pour l'instant
     Usage tablette 7 pouces....
  */
}

@media (max-width: 979px) {
    /*(max-width: 979px) {*/
    .container {
        width: 100%;
       /* overflow: hidden;*/
    }

    .row {
        margin-left: -1%;
        margin-right: -1%;
    }

    [class*="span"] {
        float: none;
        display: block;
        width: 98%;
        box-sizing: border-box;
        margin-right: 1%;
        margin-left: 1%;
    }
}

@media (max-width: 1199px) and (min-width: 980px) {
    /*(max-width: 1199px) {*/
    .container {
        width: 950px;
    }

    .span12 {
        width: 950px;
    }

    .span11 {
        width: 870px;
    }

    .span10 {
        width: 790px;
    }

    .span9 {
        width: 710px;
    }

    .span8 {
        width: 630px;
    }

    .span7 {
        width: 550px;
    }

    .span6 {
        width: 470px;
    }

    .span5 {
        width: 390px;
    }

    .span4 {
        width: 310px;
    }

    .span3 {
        width: 230px;
    }

    .span2 {
        width: 150px;
    }

    .span1 {
        width: 70px;
    }

    .offset12 {
        margin-left: 970px;
    }

    .offset11 {
        margin-left: 890px;
    }

    .offset10 {
        margin-left: 810px;
    }

    .offset9 {
        margin-left: 730px;
    }

    .offset8 {
        margin-left: 650px;
    }

    .offset7 {
        margin-left: 570px;
    }

    .offset6 {
        margin-left: 490px;
    }

    .offset5 {
        margin-left: 410px;
    }

    .offset4 {
        margin-left: 330px;
    }

    .offset3 {
        margin-left: 250px;
    }

    .offset2 {
        margin-left: 170px;
    }

    .offset1 {
        margin-left: 90px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    [class*="span"] {
        margin-left: 5px;
        margin-right: 5px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1190px;
    }

    .span12 {
        width: 1190px;
    }

    .span11 {
        width: 1090px;
    }

    .span10 {
        width: 990px;
    }

    .span9 {
        width: 890px;
    }

    .span8 {
        width: 790px;
    }

    .span7 {
        width: 690px;
    }

    .span6 {
        width: 590px;
    }

    .span5 {
        width: 490px;
    }

    .span4 {
        width: 390px;
    }

    .span3 {
        width: 290px;
    }

    .span2 {
        width: 190px;
    }

    .span1 {
        width: 90px;
    }

    .offset12 {
        margin-left: 1210px;
    }

    .offset11 {
        margin-left: 1110px;
    }

    .offset10 {
        margin-left: 1010px;
    }

    .offset9 {
        margin-left: 910px;
    }

    .offset8 {
        margin-left: 810px;
    }

    .offset7 {
        margin-left: 710px;
    }

    .offset6 {
        margin-left: 610px;
    }

    .offset5 {
        margin-left: 510px;
    }

    .offset4 {
        margin-left: 410px;
    }

    .offset3 {
        margin-left: 310px;
    }

    .offset2 {
        margin-left: 210px;
    }

    .offset1 {
        margin-left: 110px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    [class*="span"] {
        margin-left: 5px;
        margin-right: 5px;
    }

}

/* ==========================================================================
   Base CITIA v5
   ========================================================================== */

body {
    font-family: 'Roboto', 'Arial', 'sans-serif';
    font-size: 0.875em;
    line-height: 1.5em;
    position: relative;
}

#secondary-nav nav ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

#logo-home {
    max-width: 150px;
}

#logo-home img {
    background-color: grey;
    color: #000;
    width: 150px;
    display: block;
}

#primary-nav-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 0;
}

#primary-nav-one-right {
    display: flex;
    justify-content: right;
    align-items: center;
}

#primary-nav-one-right ul li {
    list-style-type: none;
}

#menu-btn {
    display: none;
}


.third-nav-child {
    width: 100%;
    display: flex;
}

.third-nav-left {
    background-color: red;
    width: 60%;
}
.third-nav-right {
    background-color: blue;
    width: 40%;
}



@media screen and (max-width: 979px) {
    body > .container, .main-content {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
}

@media screen and (max-width: 767px) {
    body {
        transition: right 0.15s ease-in 0.15s;
        right: 0;
    }
}

body > .container.lite {
    margin-top: 0;
}

.entete_acc {
    position: relative;
}

.entete_acc ul {
    list-style-type: none;
    position: absolute;
    right: -10px;
    bottom: 10px;
    margin-right: 0;
    text-align: right;
}

.entete_acc ul li {
    margin-top: 20px;
}

.entete_acc ul li a, .entete_acc ul li span {
    position: relative;
    padding: 0 10px;
    font-weight: 600;
    font-size: 2.32em;

    text-decoration: none;
    transition-property: color, left;
    transition-duration: 0.5s;
    left: 0;
}

.entete_acc ul li a:hover {
    left: -20px;
    color: #fff;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

/* ---- BOUTONS --- */
.btn,
a.btn:visited {
    display: inline-block;
    padding: 0.8em 5%;
    line-height: 1em;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    margin: 0;
    outline: none;
    border: 0;
    transition: background-color 0.15s linear 0s;
    text-decoration: none;
    font-size: 1em;
    color: #ffffff;
}

.btn[class*="span"] {
    padding-left: 0;
    padding-right: 0;
}

.btn > [class*="pict20"] {
    position: relative;
    bottom: 2px;
    opacity: 0.75;
}

.btn > [class*="pict"] {
    position: relative;
    vertical-align: middle;
    bottom: 1px;
    opacity: 0.8;
}

.btn:focus {
    outline: none;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.blc_form .btn {
    display: inline-block;
}

/* BTN3 - violet */
.btn.btn3 {
    background-color: #6642b5;
}

.btn.btn3:hover {
    background-color: #6B5BB0;
}

.btn.btn3:active {
    position: relative;
    top: 1px;
}

.btn.big {
    font-size: 1.5em;
}

/* Validation vert */
.btn.btnValid {
    background-color: #aecb0b;
}

.btn.btnValid:hover {
    background-color: #8DA805;
}

.btn.btnValid.en_cours {
    background-color: #c6d382;
}

.btn.btnValid.en_cours span[class^="pict_"] {
    color: #fff;
    background: url("../interface/loader_btnValid.gif");
}

.btn label {
    cursor: inherit;
}

/* Suppression rouge */
.btnDelete {
    background-color: #E7222D;
    color: #FBDCDC;
}

.btnDelete:hover, .btnDelete:active {
    background-color: #c7191d;
}

.btn.btn3.en_cours {
    background-color: #897ec3;
}

.btn.btn3.en_cours span[class^="pict_"] {
    background: url("../interface/loader_btn3.gif");
}

/* btn XL */

.btn_XL {
    font-size: 1.5em;
}

.btn_XL > [class*="pict"] {
    bottom: 2px;
}

.btn span[class^="pict_"] {
    margin: -1px 3px 0 0;
}

.btn.inactif span[class^="pict_"] {
    opacity: 0.25;
}

/* Positionnement des pictogrammes sur le sprite */

#tab_boite_reception .pict_en_cours_mess {
    background: url("/resources/interface/pictos/ajax-loader-mess.gif") no-repeat;
}

.rechercher_messagerie .pict_en_cours_rech_mess {
    background: url("/resources/interface/pictos/ajax-loader-rech-mess.gif") no-repeat;
}

.afficher_plus .pict_en_cours_plus_mess {
    background: url("/resources/interface/pictos/ajax-loader-plus-mess.gif") no-repeat;
}

.afficher_plus:hover .pict_en_cours_plus_mess {
    background: url("/resources/interface/pictos/ajax-loader-plus-mess-hover.gif") no-repeat;
}

/* Bouton dans le sprite */
.btn_pict {
    text-indent: -999em;
    outline: none;
    cursor: pointer;
    display: inline-block;
    border: 0;
    text-decoration: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.btn_pict.suiv,
.btn_pict.prec {
    opacity: 0.8;
}

.btn_pict.suiv:hover, .btn_pict.suiv:focus,
.btn_pict.prec:hover, .btn_pict.prec:focus {
    opacity: 0.9;
}

.btn_pict.suiv:active,
.btn_pict.prec:active {
    opacity: 1;
}

/* ---- PICTOGRAMMES --- */

/* Plugin jquery UI */
.ui-icon {
    width: 16px;
    height: 16px;
    display: block;
    overflow: hidden;
    text-indent: -999px;
}

/*
.ui-icon-triangle-1-e { background-position: -371px -216px; }
.ui-state-hover .ui-icon-triangle-1-e { background-position: -371px -231px; }

.ui-icon-triangle-1-s { background-position: -386px -216px; }
.ui-state-hover .ui-icon-triangle-1-s { background-position: -386px -231px; }
*/
.icone_fermer {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-indent: -9999em;
}

.centre {
    text-align: center;
}

a.chevron {
    text-decoration: none;
}

a.chevron span {
    text-decoration: underline;
}

a.chevron:hover span {
    text-decoration: none;
}

/* ---- BLOCS DE CONTENU --- */
.blc {
    position: relative;
    float: left;
    width: 100%;
}

/* -- cleafix automatique pour .blc */
.blc {
    *zoom: 1;
}

.blc:before, .blc:after {
    display: table;
    content: "";
    line-height: 0;
}

.blc:after {
    clear: both;
}

/* -- */

@media screen and (min-width: 980px) {
    .blc {
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 979px) {
    .blc {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
}

.blc:first-child {
    z-index: 10;
}

.groupe_programme ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.groupe_programme ul li {
    padding: 0;
    display: inline-block;
    width: 190px;
    margin-right: 10px;
}

.col_simple {
    width: 190px;
}

/* Mises en avant spéciales */
.blc.mea {
}

.blc.mea h2 {
    display: none;
}

.blc.mea > div {
    position: absolute;
    bottom: 0;
    box-shadow: 0 -2px 4px #565656;
}

.blc.mea div > img {
    float: left;
    margin-top: -25px;
    margin-left: 0;
}

.blc.mea p {
    display: block;
    margin: 0;
    padding: 15px 15px 20px;
    font-size: 1em;
    font-family: Arial, sans-serif;
}

.blc.mea p a {
    color: #FFFFFF;
}

.blc.mea a.plus {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

/* Suggestions */

#menu_n4 h3,
#menu_n4 h4 {
    font-weight: 600;
    font-size: 2.308em;
    font-family: "Poppins", Sans-Serif;
    line-height: 1em;
    margin: 5px 0;
    padding: 25px 20px 15px;
    color: #000;
}

#menu_n4 h3 a {
    text-decoration: none;
}

/* ---- TYPES DE PAGE --- */
/* ---- page standard --- */

.blc.p_standard > H1,
.blc.p_info H1{
    line-height: normal;
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 20px 0px 0px;
    padding: 0px;
}

.blc.p_standard #sommaire {
    background-color: #f0eff2;
}

.p_standard h4 {
    color: #434646;
    font-size: 1.17em;
    padding: 0.4em 1em;
    margin: 0.2em 0 0;
}

.p_standard h5 {
    color: #434646;
    font-weight: 600;
    font-size: 1.25em;
    padding: 0.7em 1em;
    margin: 0.7em 0 0;
}

.p_standard p {
    margin-top: 0.25em;
    margin-bottom: 0.75em;
}

ol, ul, dl {
    padding: 0 0 0 4%;
    margin-top: 1em;
    margin-bottom: 1em;

}

[class*="p_"] ul,
[class*="p_"] ol {
    color: #000;
}

[class*="p_"] ul {
    list-style-type: square;
}

.p_standard ul {
    padding: 0 0 5px 3%;
}

.p_standard .liste_elements {
    margin: 0;
    padding-left: 0;
}

.p_standard .liste_elements li {
    padding: 15px 0;
}

.p_standard > div.pair .liste_elements li {
    border-bottom: 1px solid #edf0f3;
}

.p_standard > div.impair .liste_elements li {
    border-bottom: 1px solid #acafb2;
}

.p_standard .liste_elements li > a {
    float: left;
    margin: 10px;
}

.p_standard .liste_elements li > p {
    margin-top: 0;
}

.p_standard .img_illu {
    float: left;
    margin: 0 2%;
}

/* ----- Bloc concept ---- */

.blc.concept {
    background-color: #fff;
}

@media (max-width: 979px) {
    .blc.concept img {
        width: 100%;
    }
}

@media (max-width: 979px) and (min-width: 600px) {
    .concept__container .span4:nth-child(1),
    .concept__container .span4:nth-child(2),
    .concept__container .span4:nth-child(3) {
        width: 48%;
        float: left;
        margin: 5px 1%;
    }

    .concept__container .span4:nth-child(3) {
        clear: both;
        width: 98%;
    }

    .concept__container .span4:nth-child(3) .blc.concept,
    .concept__container .span4:nth-child(3) .blc.actu {
        width: 49%;
        float: left;
        margin-right: 2%;
    }

    .concept__container .span4:nth-child(3) .blc.concept:nth-child(even) {
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    .blc {
        margin: 0.5em 0;
    }
}

.concept__container {
    margin-top: 50px;
}
.blc.concept {
    min-height: 500px;
}
.blc.concept div {
    min-height: 400px;
    position: relative;
}

.blc.concept.small {
    min-height: 450px;
}

.blc.concept.small div {
    min-height: 300px;

}

.blc.concept h2 {
    font-family: "Poppins", Sans-Serif;
    color: #434646;
    margin: 1em 0.5em 1em 1.2em;
    font-weight: 600;
    font-size: 1.785em;
    line-height: 1.2em;
}

.blc.concept p {
    margin: 15px 35px;
    line-height: 1.8em;
}

.blc.concept .liens,
.blc.concept p.userInfo,
.blc_enavant .liens {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 70%;
    padding: 1.8em 10% 1.8em 20%;
    border-top: 1px solid #cccccc;
}

.blc.concept .liens a,
.blc_enavant .liens a {
    margin-bottom: 0.5em;
    float: right;
    clear: right;
    color: #000;
    font-family: "Roboto Condensed";
    font-weight: 600;
    font-size: 22px;
    text-decoration: none;
}

.blc.concept .liens a:hover,
.blc_enavant .liens a:hover {
    text-decoration: underline;
}
.blc.concept .liens a:last-child {
    margin-bottom: 0;
}

.blc.concept .liens a.btn {
    color: #fff;
}

.blc.concept .liens a:before {
    content: "> ";
}

/* ---- page portail ---- */

[class*="p_"] > div h2 {
    margin: 0 0 1em 0;
    padding: 0;
    color: #434646;
    font-weight: 500;
    font-family: "Poppins", Sans-Serif;
    font-size: 1.8em;
    line-height: 1em;
}

[class*="p_"] h2 span {
    font-size: 0.6em;
}

[class*="p_"] h4 {
    margin: 1em 0 0.5em;
    padding: 0;
}

.p_portail > div h2 {
    padding: 0;
}

.blc.p_portail > div > p {
    padding: 0;
}

.blc.p_info > div > p {
    padding: 0;
}

.blc.p_portail p.en_avant,
.blc.p_info p.en_avant,
.blc.p_fiche p.en_avant {
    padding: 20px 25px;
    margin: 10px 60px;
    background-color: #cfd2d5;
    color: #ffffff;
}

.p_portail ul, .p_com ul {
    padding: 0px 0px 10px 15px;
    margin-top: 0.1em;
    list-style-type: disc;
}

.p_portail ul li, .p_com ul li {
    margin-bottom: 5px;
}

/* ---- Page informations ---- */

.p_info h2 {
    clear: right;
}

.p_info h2.titre2 {
    text-align: center;
    background-color: #fff;
    padding: 10px;
    font-style: normal;
}

.p_info h5 {
    margin: 1em 1em 0.25em;
    font-size: 1.2em;
    color: #434649;
}

.p_info p {
    margin: 0.5em 1.5em;
}

.p_info ul {
    padding: 0 3% 5px 3%;
    margin: 0.2em 3%;
    color: #6B6C71;
    list-style-type: disc;
}

.p_info .contenu {
    padding: 0;
}

.p_info .contenu > h2 {
    padding: 3%;
}

/* palmares */

#palmares {
    padding: 1em 0 3em;
    background-color: transparent;
}

#palmares h2 {
    position: relative;
    padding: 15px 55px;
    margin: 0;
    text-align: center;
    font-size: 2.2em;

    display: block;
    line-height: 1.1em;
}

.palm_categ {
    min-height: 10px;
    padding: 0;
}

.palm_categ h3 {
    position: relative;
    text-align: center;
    padding: 10px 0;
    margin-top: 3em;
    background-color: transparent;
}

.palm_categ h3 span {
    color: #434649;

    font-size: 2em;
    line-height: 1em;
    font-weight: 600;
    margin-left: 0.2em;
    margin-right: 0.2em;
}

.palm_categ h3 span.titre.fiche {
    color: #fff;
}

.palm_categ h3 span.obj1, .palm_categ h3 span.obj2 {
    position: relative;
    top: 18px;
    height: 15px;
    width: 40px;
    display: inline-block;
}

.palm_categ h3 span.obj1 {
    background-image: url("../interface/palm_categ_obj1a.png");
}

.palm_categ h3 span.obj2 {
    background-image: url("../interface/palm_categ_obj2a.png");
}

.palm_categ h3 a {
    visibility: hidden;
}

#palmares ul {
    list-style-type: none;
    padding: 0;
}

#palmares ul li {
    position: relative;
    margin-bottom: 1em;
    cursor: pointer;
}

#palmares ul li a {
    display: none;
}

#palmares h4 {
    background-image: url("../interface/fond_texte-sur-image2.png");
    background-repeat: repeat-x;
    background-size: auto 100%;
    bottom: 0;
    color: #ffffff;
    display: block;
    font-style: normal;
    font-weight: 300;
    font-size: 2.1em;
    margin: 0;
    padding: 1.5em 5% 5%;
    position: absolute;
    width: 90%;
}

#palmares h4 span {
    font-size: 16px;
    font-style: italic;
}

.actu h3 {
    margin: 1em;
    font-weight: normal;
    color: #434648;
    font-size: 1.35em;
    line-height: 1em;
}

.actu p,
.p_actu .actu p {
    margin: 1em 2em;
    font-size: 1em;
}

/*Réinit des paddings auto */
.p_standard > .service_connexion {
    padding: 0;
}

/* Actualités */
.blc.actu.echo {
    margin: 0;
}

.homeRubrique .blc.actu {
    margin-bottom: 10px;
}

/* ---- lien image ---- */
a.lien_img {
    float: right;
    margin: 15px 20px 10px 10px;
}

/* ---- info ---- */
.blc.info h2 {
    position: relative;
    z-index: 2;
    font-weight: 600;
    font-size: 1.64em;
    color: #000;
    padding: 0px;
    margin: 0px;
}

.blc.info h2 span[class^="pict25_"] {
    display: none;
}

/*
==============================================================
==============================================================
   BLOCS CONTACT

Ils servent à présenter l'équipe, ou des intervenants ou encore
les accrédités dans la rubriques Participants du network.

Ils sont composés d'une photo, d'un nom, d'une description courte
et éventuellement d'un lien (linkedin, site web...)

Une partie dpliable permet de rajouter une bio et d'autre lien
>>> vieille fonctionnalité : encore en service ?
==============================================================
==============================================================
*/

/** liste des participants */
.blc.contact .statut, ul.liste_ctc .statut {
    width: 10px;
    height: 10px;
    background-color: #b9b9b9;
    border-radius: 100%;
    margin-right: 15px;
    display: inline-block;
}
.blc.contact .statut.available, ul.liste_ctc .statut.available {
    width: 15px;
    height: 15px;
    background-color: #6fd146;
}
.blc.contact .statut.busy, ul.liste_ctc .statut.busy {
    background-color: #ff0000;
}
.blc.contact .statut.away, ul.liste_ctc .statut.away {
    background-color: #ffc400;
}
.blc.info.contact {
    overflow: hidden;
}
.span4 > .blc.info.contact {
    margin-top: 0;
}

.blc.info.contact h2 {
    font-family: "Poppins", Sans-Serif;
    color: #434646;
    font-weight: 600;
    font-size: 1.785em;
    line-height: 1.2em;
    padding: 8px 0 10px 0px;
    margin: 0 0 10px 0;
}

.blc.info.contact h2 span {
    display: none;
}

.blc.info.contact h2 a {
    position: relative;
    float: right;
    top: 7px;
    right: 5px;
    display: none; /* flech bas/haut masquée */
}
.span4 > .blc.info.contact > ul > li {
    padding : 0;
}

.blc.contact {
    width: 100%;
    background-color: transparent;
}

.p_standard.blc.contact {
    background: #ededed;
    text-align: center;
    margin-bottom: 15px;
}

.p_standard.blc.contact h2 {
    margin: 10px 0 20px 0;
    padding: 25px 0;
    color: #434649;
}

.blc.contact ul, ul.liste_ctc {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
    *zoom: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ficheSociete ul.liste_ctc {
    overflow: auto;
    max-height: 800px;
}

ul.liste_ctc:before,
ul.liste_ctc:after,
.blc.contact ul:before,
.blc.contact ul:after {
    display: table;
    content: "";
    line-height: 0;
}

ul.liste_ctc:after,
.blc.contact ul:after {
    clear: both;
}

liste_ctc.contact.pro {
    background-color: #ededed;
}

#liste_participants .blc.contact ul, #liste_participants ul.liste_ctc {
    padding: 0 2em;
    clear: both;
}

/* liste des participants */
.blc.contact .statut, ul.liste_ctc .statut {
    width: 10px;
    height: 10px;
    background-color: #b9b9b9;
    border-radius: 100%;
    margin-right: 10px;
    display: inline-block;
}

.blc.contact .statut.available, ul.liste_ctc .statut.available {
    width: 15px;
    height: 15px;
    background-color: #6fd146;
}

.blc.contact .statut.busy, ul.liste_ctc .statut.busy {
    background-color: #ff0000;
}

.blc.contact .statut.away, ul.liste_ctc .statut.away {
    background-color: #ffc400;
}

/* chaque bloc contact est un li */

.blc.contact > ul > li, ul.liste_ctc > li {
    position: relative;
    flex-grow: 1;
    box-sizing: border-box;
    width: calc(50% - 2em);
    min-width: 250px;
    margin: 0.2em 0;
    padding: 0 1em;
    cursor: default;
}

/* PL-3288 Report des margin du li sur le padding du div.clearfix à l'intérieur */
ul.liste_ctc > li {
    margin: 0;
    padding: 0;
}
ul.liste_ctc > li div.clearfix {
    padding: 2em 1em;

}
ul.liste_ctc > li:hover div.clearfix, ul.liste_ctc > li:hover div.ctc_comp {
    background-color: #f5f5f5;
}

#result_rech .blc.contact > ul > li div:first-child, #result_rech ul.liste_ctc > li div:first-child {
    cursor: pointer;
}

#result_rech .blc.contact > ul > li:hover, #result_rech ul.liste_ctc > li:hover, ul.liste_ctc.contact.pro {
    background-color: #fff;
}

/* quand il s'agit de l'organigramme citia, les blocs prennent moins de place */

ul.liste_ctc.organigramme > li {
    width: calc((100% / 3) - 3em);
    min-width: 200px;
}

/* le portrait de la personne  avec une ombre en bas */

.blc.contact > ul li .contact_no_img,
ul.liste_ctc li.contact_no_img {
    float: left;
    width: 10px;
    min-height: 120px;
}

.blc.contact > ul li a.img,
ul.liste_ctc li a.img {
    float: left;
    position: relative;
    display: block;
    margin-right: 10px;
}

.blc.contact > ul li a.img > img,
.liste_ctc li a.img > img {
    height: 100px;
    width: auto;
}

.blc.contact > ul li a.img .ombre,
ul.liste_ctc li a.img > .ombre {
    position: absolute;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
}

.blc.contact > ul li.no_link div.img {
    float: left;
    position: relative;
    display: block;
    margin-right: 10px;
}

.blc.contact > ul li.no_link div > img.img {
    height: 100px;
    width: auto;
}

.blc.contact > ul li.no_link div.img .ombre {
    position: absolute;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
}

.blc.contact ul li.no_link h5 {
    color: #434649 !important;
}

/* le nom de la personne */

.blc.contact > ul li h5,
ul.liste_ctc li h5 {
    font-size: 1.5em;
    font-weight: 300;
    margin: 0;
    padding: 6px 0 2px 0;
    color: #edf0f3;
}

.blc.contact ul li h5 a,
ul.liste_ctc li h5,
ul.liste_ctc li h5 a {
    color: #434649;
    text-decoration: none;
}

.blc.contact ul li h5 a:hover,
ul.liste_ctc li h5 a:hover {
    text-decoration: underline;
}

/* la description de la personne */
.blc.contact ul li p,
ul.liste_ctc li p {
    color: #434649;
    font-weight: 300;
    margin: 5px 0;
    font-size: 1em;
    line-height: 1.7em;
}

.blc.contact ul li p em,
ul.liste_ctc li p em {
    font-weight: 300;
}

/* Bloc personne */

.blc.contact .btn_pict, ul.liste_ctc .btn_pict {
    position: absolute;
    right: 15px;
    bottom: 10px;
}

#liste_participants .blc.contact .btn_pict, ul.liste_ctc .btn_pict {
    display: block;
}

.blc.contact ul li div.clearfix,
ul.liste_ctc div.clearfix {
    z-index: 10;
}

.blc.contact ul li:not(.no_link) div {
    cursor: pointer;
    border-bottom : 1px solid #ededed;
}

.ctc_comp ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
}

.blc.contact .ctc_comp, ul.liste_ctc .ctc_comp {
    margin: 0;
    padding: 10px 0;
    z-index: 1;
    display: none;
}

.blc.contact .ctc_comp h4, ul.liste_ctc .ctc_comp h4 {
    color: #434646;
    margin: 0;
    padding: 0;
    font-size: 1.16em;
}

.blc.contact .ctc_comp p, ul.liste_ctc .ctc_com p {
    color: #434646;
    padding: 0;
}

.blc.contact .ctc_comp ul.act_pers, ul.liste_ctc .ctc_comp ul.act_pers {
    list-style-type: none;
    margin: 0;
    padding: 0;

}

.blc.contact .ctc_comp ul.act_pers li, ul.liste_ctc .ctc_comp ul.act_pers li {
    margin: 0.25em 0;
    color: #D8DCDF;
    width: 100%;
}

.blc.contact .ctc_comp ul.act_pers li a, ul.liste_ctc .ctc_comp ul.act_pers li a {
    display: block;
    padding: 0.5em;
    font-size: 1.17em;
    background: #ddd;
    text-decoration: none;
}

.blc.contact .ctc_comp ul.act_pers li a, ul.liste_ctc .ctc_comp ul.act_pers li a span {
    margin-right: 5px;
}

.ctc_reseau_base {
    background-color: #35383b;
    min-height: 30px;
    float: left;
    clear: both;
    width: 100%;
}

.ctc_reseau_base > a {
    background-color: #7a7d80;
    color: #35383b;
    display: block;
    text-decoration: none;
}

.ctc_reseau_base > a:hover {
    background-color: #898c8f;
}

/* Pratique */

.blc.info {
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: 1em;
}

.span4 > .blc.info {
    margin: 30px 0 20px 10px;
}

.blc.pratique {
    padding-bottom: 20px;
    background-color: #fff;
}

.blc.pratique h3, .blc.pratique h5, .blc.pratique p {
    color: #868C8C;
}

.blc.pratique p.texte {
    margin-left: 20px;
}

.blc.pratique h3 {
    font-weight: 600;
    font-size: 1.43em;
    color: #6B6C71;
    margin-top: 15px;
    margin-bottom: 7px;
}

.blc.pratique h3 > span {
    display: inline-block;
    /* margin-left: -28px; */
    margin-right: 5px;
    margin-top: 3px;
}

.blc.pratique h5 {
    color: #868C8C;
    font-size: 1.02em;
    margin-bottom: 2px;
}

/* Bloc agenda */
.blc.agenda {
    padding-bottom: 20px;
    margin: 5px 0;
}

.blc.agenda h3 {
    margin: 17px 17px 2px 17px;
    font-weight: 300;
    font-size: 1.43em;
    font-family: Arial, sans-serif;
    color: #ACADB2;
}

.blc.agenda p {
    margin: 0 2% 0 4.5%;
    color: #434646;
    font-weight: 600;
    font-size: 0.93em;
    line-height: 1.16em;
    font-family: Arial, sans-serif;
}

.blc.pratique h3 {
    font-weight: 600;
    font-size: 1.49em;
    color: #6B6C71;
    margin-top: 15px;
    margin-bottom: 7px;
}

/* ---- Programme ---- */
.blc.programme {
    position: relative;
    min-height: 120px;
}

.blc.programme .entete {
    min-height: 125px;
}

.blc.programme h2 {
    position: relative;
    z-index: 2;
    font-weight: 600;
    font-size: 2.308em;
    color: #898C8F;
    background-color: #D9DCDF;
    padding: 9px 14px 6px 14px;
    margin: 0;
    box-shadow: 0 0 4px #565656;
}

.blc.programme h2.sans_img {
    margin-top: 0;
    margin-left: 200px;
}

.blc.programme p {
    color: #858C8C;
    margin: 0;
    padding: 10px;
}

.blc.programme a.btn {
    float: right;
    position: relative;
    z-index: 10;
    margin-right: 10px;
    margin-bottom: 10px;
}

.blc.programme a.btn3 {
    position: absolute;
    right: 0;
    top: 205px;
}

[class*="p_"] p,
[class*="p_"] li,
.blc.contact.unique {
    margin: 0.6em 0;
    padding: 0;
}

.blc.contact.unique {
    list-style-type: none;
}

h3 ul {
    margin-top: 0;
    margin-bottom: 0;
}

.p_standard .blc_evnt {
    padding: 0 0 20px;
}

.blc_evnt .entete h2 {
    font-weight: 600;
    font-size: 2.465em;
    margin: 0;
    padding: 15px 55px;
    position: relative;
    text-align: center;
    color: inherit;
}

.blc_evnt a.btn {
    margin: 10px 0 20px 20px;
}

/* liste séancess diffusion */
ul.seances_diff {
    width: 94%;
    padding: 10px 3%;
    list-style-type: none;
}

ul.seances_diff li {
    margin-bottom: 0.1%;
}

ul.seances_diff li a {
    display: inline-block;
    text-decoration: none;
    padding: 10px 2%;
    width: 87.5%;
}

ul.seances_diff li a:last-child {
    background-color: #4F3C97;
    padding: 8px 2% 9px 2%;
    position: relative;
    top: -2px;
    width: 4%;
    margin-left: 0.5%;
    text-align: center;
}

ul.seances_diff li a:last-child:hover {
    background-color: #897ec3;
}

/* ---- Elements complémentaires dans les blocs ---- */

/* Date heure */

h4.date_heure {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 20px;
    width: 158px;
    height: 100px;
    margin: 0;
    padding-top: 5px;
    text-align: center;
    font-weight: 600;
    font-size: 2.23em;
    line-height: 1.05em;
}

h4.date_heure span {
    color: #fff;
    display: block;
    font-size: 0.7em;
    margin-top: 5px;
}

h4.date_heure.haut {
    width: 128px;
    padding: 2px 15px;
    font-size: 1.7em;
    line-height: 0.9em;
}

/* Accordeons */
.accordeon {
    margin: 0 20px 20px 20px;
}

.accordeon div {
    color: #6B6C71;
    margin: 15px 0;
    padding: 0;
}

.p_portail > div:nth-child(even) .accordeon div, .p_info > div:nth-child(even) .accordeon div, .p_fiche > div:nth-child(even) .accordeon div {
    background-color: #ffffff;
}

.p_portail > div:nth-child(odd) .accordeon div, .p_info > div:nth-child(odd) .accordeon div, .p_fiche > div:nth-child(odd) .accordeon div {
    background-color: #ffffff;
}

.accordeon div h3 {
    font-weight: 600;
    font-size: 1.385em;
    margin: 0;
    padding: 10px;
}

.accordeon div h3 span.ui-icon {
    float: right;
}

.accordeon div ul {
    font-size: 1em;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #878C8D;
    margin: 0 0 0 30px;
    padding: 0 0 10px;
}

/* Liste d'arguments */
ol.arguments {
    color: #6B6D71;
    counter-reset: args;
}

.p_portail ol {
    margin-left: 8%;
    margin-right: 8%;
    padding: 0 0 0 7%;
}

.p_info ol {
    margin-left: 3%;
    margin-right: 3%;
}

ol.arguments li {
    margin-bottom: 0.5em;
    line-height: 1.1em;
    list-style-type: none;
    counter-increment: args;
}

ol.arguments li:before {
    content: counter(args) ".";
    font-weight: bold;
    font-size: 1.1em;
    margin-left: -20px;
    margin-right: 5px;
}

ol.arguments li ul {
    margin: 5px 0 0;
    padding-left: 25px;
}

ol.arguments li ul li {
    margin-bottom: 4px;
}

ol.arguments li ul li:before {
    content: "- ";
    font-size: 1.2em;
    margin-left: -15px;
    margin-right: 1px;
}

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

/* sens d'écriture */
.sens_dg {
    direction: rtl;
}

.sens_gd {
    direction: ltr;
}

/* Spécial code_promo */
.code_promo .col_form {
    background-color: inherit;
    margin-left: 25%;
    width: 50%;
    min-height: 100px;
    padding-bottom: 15px;
}

.code_promo .form input {
    width: 28%;
}

.code_promo .col_form .log_action {
    width: 41%;
    margin: 0;
    float: left;
}

.code_promo .form button[type="submit"] {
    float: left;
    margin: 0 0 10px;
}

.code_promo .form .p_message, .code_promo .form #message_retour {
    clear: both;
    text-align: center;
    padding: 15px;
}

.code_promo .form .p_message h3, .code_promo .form .p_message p {
    margin: 5px 0;
}

/* fin code */
.blc.blc_form {
    margin-top: 0;
    background-color: #fff;
}

.blc.blc_form .code_promo {
    background-color: #fff;
}

.blc.blc_form .code_promo .col_form .log_action p.choix {
    width: auto;
}

.col_form .log_action {
    text-align: right;
    margin: 10px 20px;
}

.col_form .log_action p {
    margin: 0;
}

.col_form .log_action p.choix {
    text-align: left;
    width: 56%;
    display: inline-block;
}

.col_form .log_action p.choix label {
    text-align: left;
    width: 56%;
    padding: 0;
}

.col_form .log_action p.choix input[type="checkbox"] + label:before {
    left: 5px;
}

.col_form .log_action p.choix input[type="checkbox"]:checked + label:after {
    left: 9px;
}

.col_form .log_action p.choix a {
    text-align: left;
    margin-top: 5px;
}

.col_form .log_action button {
    margin-right: 0;
}

.choix_type_film {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------------------- */
/* Rubriques (liens illustration) */
.blc.rub {
    padding: 0;
}

/* Publicité */
.pub {
    padding: 20px;
}

/* Video */
.span4 .iframe_video {
    width: 310px;
    height: 174px;
    margin-top: 12px;
}

.yt_video {
    float: left;
    width: 380px;
    height: 214px;
    margin-top: 10px;
    margin-left: 10px;
}

.gmap {
    margin: 20px;
}

.gmap img {
    max-width: 256px;
}

/* Plan du site */

#plan_du_site div {
    width: 33%;
    float: left;
}

#plan_du_site h4 {
    margin: 1em 0.3em 0 0.7em;
    font-size: 1.3em;
}

#plan_du_site ul {
    list-style-type: none;
    padding: 0.5em 1em;
    margin: 0.15em 0;
}

#plan_du_site ul li {
    margin-bottom: 0.35em;
}

#plan_du_site ul li.n2 {
    margin-left: 0.7em;
}

/* Photos */
.photos div {
    margin: 10px 0 10px 10px;
}

.photos div a {
    display: inline-block;
    width: 120px;
    height: 120px;
    margin: 0 5px 10px 0;
    padding: 0;
}

.photos div a img {
    width: 120px;
    height: 120px;
}

/* ---- Formulaire à étapes ---- */

.form_etape {
    background-color: transparent;
}

.etape {
    position: relative;
    width: 225px;
    min-height: 256px;
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    padding: 0;
    background-color: #edf0f3;
}

.etape.active {
    /*background: url("../interface/etape_recap_active2.png") no-repeat 0 0;*/
}

.etape.inactive {
    /*background: url("../interface/etape_recap_inactive2.png") no-repeat 0 0;*/
    background-color: #d9dcdf;
}

.etape.debut {
    /* width: 240px;*/
    margin-left: 10px;
    /*background: url("../interface/etape_recap_debut2.png") no-repeat 0 0;*/
}

.etape h3, .post21 .etape h3 {
    text-align: center;
    color: #fff;
    background-color: #000;
    font-weight: 400;
    font-size: 1.25em;
    line-height: 1.5em;
    margin: 0;
    padding: 20px 0;
    height: 40px;
    display: flex;
    flex-direction: column;
}

.etape h3 span, .post21 .etape h3 span {
    font-size: 1.82em;
}

.etape .blc_synt {
    vertical-align: middle;
    display: table-cell;
    height: 110px;
}

.etape p,
.etape ul,
.recap_info {
    padding: 0;
    color: #868686;
}

.etape p,
.etape ul {
    margin: 5px;
}

.etape ul {
    list-style-type: none;
    overflow-x: visible;
    overflow-y: scroll;
    max-height: 300px;
    margin-bottom: 70px;

}

.etape ul li,
.recap_info li {
    padding: 2px 2px 4px 0px;
    display: inline-block;
    min-height: 25px;
    border-bottom: 1px solid #fff;
}

.etape ul li:hover,
.recap_info li:hover {
    background-color: #f9f9f9;
}

.recap_info li:last-child {
    border-bottom-width: 0;
    cursor: pointer;
}

.recap_info li.actif {
    background-color: transparent;
}

.etape ul li a,
.ajouter_chp {
    float: right;
    padding: 2px;
    box-shadow: none;
}

.etape ul li a span[class^="pict_"],
.recap_info a span[class^="pict_"],
a.ajouter_chp span[class^="pict_"] {
    margin: 0;
}

.etape a.btn.action {
    position: absolute;
    width: 70%;
    left: 11%;
    bottom: 5%;
    padding: 5px 0;
}

.etape a.btn.action span[class^="pict_"] {
    position: relative;
    top: 0.1em;
    left: -0.3em;
}

.etape a.btn.action:active {
    top: auto;
    bottom: 4.8%;
}

.etape.inactive a.btn.action:active {
    bottom: 5%;
}

.etape.inactive h3,
.etape.inactive p,
.etape.inactive ul,
.etape.inactive a,
.etape.inactive a:hover {
    color: #ACAFB2;
}

.etape.inactive a.btn,
.etape.inactive a:hover {
    background-color: #D9DCDF;
    cursor: default;
}

.etape.inactive a.btn.action:active {
    bottom: 5%;
}

.etape ul li a.btn,
.recap_info a.btn {
    margin: 0 0 0 5px;
    width: auto;
}

/* recap etapes */
.blc_form > div.recap_etapes {
    background-color: #ACAFB2;
    overflow: hidden;
    padding: 0 !important;
    list-style: none;
}

.blc_form > div.recap_etapes > div {
    position: relative;
    float: left;
    color: #fff;
    background-color: #898C8F;
    padding: 0 5px 0 15px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-weight: bold;
}

.blc_form > div.recap_etapes > div h4 {
    display: inline-block;
    vertical-align: middle;
    font-weight: 600;
    font-size: 1.3em;
    line-height: 1.1em;
    color: #fff;
}

.blc_form > div.recap_etapes .active {
    color: #CCCCCC;
    background-color: #333333;
}

.blc_form > div.recap_etapes > img {
    float: left;
}

.col_form {
    background-color: #fff;
    min-height: 360px;
    padding-top: 20px;
}

.col_form.recrut_logo_orga {
    min-height: 230px;
}

.col_form.recrut_logo_orga > div#blc_img_soc > label {
    width: 100%;
    text-align: left;
    /*padding-right: 1%;*/
}

.blc.ntwk.p_info .param_alertes {
    background-color: transparent;
}

.col_form p, .col_form div {
    margin-bottom: 10px;
    margin-top: 17px;
}

.col_form p.vide {
    height: 42px;
}

.col_form p.intertitre-form {
    margin-bottom: 0;
}

.col_form p label, .col_form div label {
    position: relative;
    display: inline-block;
    width: 39%;
    padding-right: 1.55%;
    text-align: right;
    font-size: 1.0em;
    line-height: 1.1em;
    color: #434648;
}

.col_form div.option-checkbox label {
    text-align: left;
}

.col_form p.multiple label {
    vertical-align: super;
}

.col_form .questions label {
    width: 70%;
    text-align: left;
}

.col_form .questions label.chp_obl {
    background-position: left center;
    padding-right: 0;
    padding-left: 1.55%;
    margin-left: 2%;
    width: 67%;
}

.form .col_form .questions ul.liste_radio {
    width: 27%;
}

.col_form p label.xlignes, .col_form div label.xlignes {
    line-height: 0.85em;
}

.col_form div label.haut {
    vertical-align: top;
}

.col_form .blc_modif {
    /*display: none;*/
    background-color: #edf0f3;
    margin-top: 0;
}

.col_form .blc_modif h3 {
    padding: 0.5em;
    margin: 0;
}

.col_form .g-recaptcha {
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    margin-right: 15px;
}

.col_form .g-recaptcha div {
    margin-top: 0;
}

h3 a.fermer {
    width: auto !important;
    float: right !important;
    margin: 0 !important;
}

/* Colform 2 */
.col_form.large p label,
.col_form.large div label {
    width: 30%;
}

.form .col_form.large input {
    width: 64%;
}

.form .col_form.large textarea {
    font-size: 1em;
    min-height: 100px;
    width: 64%;
}

.form .col_form.large button[type="submit"] {
    margin-right: 3.5%;
}

/* ELEMENT COMPLEMENTAIRE DANS LE FORMULAIRE */
.elmt_comp {
    padding: 10px 0;
    background-color: #CFD2D5;
}

.col_form .elmt_comp p {
    margin: 0;
}

.col_form .elmt_comp .info {
    margin-top: 0;
}

.col_form .elmt_comp .info {
    margin-top: 0;
}

.col_form .elmt_comp p:last-child {
    margin-bottom: 0;
}

.elmt_comp p a.btn {
    float: none;
    width: auto;
    margin-left: 10px;
    padding: 5px 10px;
}

span.limit_car {
    font-size: 0.9em;
    display: block;
}

.col_form div a {
    display: inline-block;
    margin-right: 10%;
    text-align: right;
    width: 90%;
}

.form input, .form select, .form textarea {
    background-color: #FFFFFF;
    border: 1px solid #000;
    padding: 10px 1.5%;
    color: #7f7f7f;
    font-size: 1.17em;
    vertical-align: super;
    transition: border-color 0.5s;
}

input::-webkit-input-placeholder {
    color: #9fa0a1;
    font-style: italic;
}

input::-moz-placeholder {
    color: #9fa0a1;
    font-style: italic;
    font-weight: normal;
}

input:-moz-placeholder {
    color: #9fa0a1;
    font-style: italic;
}

input:-ms-input-placeholder {
    color: #9fa0a1;
    font-style: italic;
}

.form input:focus, .form select:focus, .form textarea:focus,
.form input:focus:not([readonly]) {
    box-shadow: inset 0.05em 0.05em 0.07em #505050, inset 0 0 1px #505050;
}

/*.form input {
    width: 53%;
}

.form select {
    width: 56%;
    padding: 9px 1.5%;
}*/

select .SelectPlacehoder {
    color: #787878;
    font-style: italic;
}

@media screen and (max-width: 600px) {
    .form input {
        width: 100%;
        box-sizing: border-box;
    }
}

.form select.dernier_enavant option:last-child {
    font-weight: bold;
}

.form .avec_ajout select {
    width: 51%;
}

/*.form textarea {
    width: 53%;
    min-height: 150px;
    font-size: 1em;
}*/

.form input.inactif,
.form select.inactif { /*[readonly="readonly"]*/
    color: #898c8f;
    cursor: not-allowed;
    background-color: #CFD2D5;
}

.form input.inactif::-webkit-input-placeholder {
    background-color: #CFD2D5 !important;
}

.form .bordure_erreur, div#blc_img_soc > img.bordure_erreur {
    border: 1px solid #C20505 !important;
    box-shadow: 0 0 1px #C20505;
}

.form button[type="submit"] {
    float: right;
    margin: 10px 16px 20px 0;
}

.formSociete_content {
    background-color: #cfd2d5 !important;
}

.formSociete_blc input, .formSociete_blc select, .formSociete_blc textarea {
    margin-top: 10px;
    margin-bottom: 10px;
}

.formSociete_blc label {
    font-weight: bold;
}

.formSociete_informations, .formSociete_reseaux, .formSociete_contact {
    margin-top: 20px;
    padding: 30px;
}

.formSociete_video {
    padding: 30px;
}

.formSociete_informations > h2,
.formSociete_reseaux > h2,
.formSociete_contact > h2 {
    padding-left: 3% !important;
    font-size: 2.15em !important;
    font-weight: bold !important;
}

.formSociete_images {
    position: relative;
    padding: 0;
    margin: 0;
    background: #ffffff;
}

.formSociete_images #couverture_soc {
    width: 100%;
    height: auto;
}

.formSociete_images #btn_modif_couverture {
    position: absolute;
    top: 30px;
    left: 30px;
}

.formSociete_avatar {
    position: relative;
    top: -40px;
    left: 30px;
}

@media  screen and (max-width: 600px) {
    .formSociete_avatar {
        top: 10px;
    }
}

.formSociete_avatar .btn, .formSociete_avatar a.btn:visited {
    padding: 0.8em 0.8em;
    margin-top: 10px;
    width: 100px;
}

.formSociete_fileupload {
    text-align: center;
}

.formSociete_col > .span5, .span10  {
    padding-left: 3%;
}

.formSociete_simple {
    padding-left: 3%;
    width: 90%;
}

@media screen and (max-width: 600px) {
    .form button[type="submit"].span2 {
        float: none;
        width: 100%;
    }
}

.form button.enligne[type="submit"] {
    float: none;
    margin: 0;
    vertical-align: super;
}

.form.moyen p {
    margin-left: 0;
    margin-right: 0;
}

.form.moyen input {
    width: 65%;
}

.form.moyen select {
    width: 70%;
}

.form.moyen textarea {
    width: 65%;
    min-height: 150px;
}

.form.moyen p label, .form.moyen div label {
    width: 25%;
}

.form.max textarea {
    width: 97%;
    min-height: 150px;
}

.form .label_2l {
    vertical-align: bottom;
}

/* Champs spéciaux */

p.choix.reduit {
    padding: 5px;
    margin: 5px;
}

.info, p.important {
    margin: 0;
    padding: 15px 20px;
    font-size: 1.15em;
    text-align: center;
}


.info.yellow {
    color: black;
    background-color: #FCD400;
}

p.important {
    background-color: #eb0000;
    color: #fff;
    font-weight: bold;
}

.info.complete {
    background-color: #69b901;
    color: #effae1;
    font-weight: bold;
}

.mandat {
    background-color: #d9dcdf;
    padding: 10px 0;
    min-height: 50px;
}

.col_form.mandat label {
    text-align: left;
    margin-left: 1.2%;
    width: auto;
}

.col_form.mandat input {
    margin-left: 1.2%;
    width: 94.5%;
}

/*
--------------------------
    .INFO

    met le contenu en blanc sur fond violet.
    .info peut être une <div> avec des <p>, des <ul>, des <img> etc. dedans.
    un <h6> est prévu pour être le titre du bloc si besoin.
--------------------------
*/

.info {
    font-size: 1.15em;
    margin: 1em 0;
    padding: 1px 1em;
}

.msg-solo {
    padding: 1em;
    display: flex;
    justify-content: center;
}

.msg-solo > [class*="pict50"] {
    margin-right: 1em;
}

.msg-solo__content {
    text-align: left;
}

.msg-solo__title {
    margin: 0 0 0.25em;
}

.msg-solo__content > p {
    margin: 0.25em 0;
}

p.info {
    margin: 0;
    padding: 0.5em;
}

.info .nombre {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: 50%;
    background-color: #eee;
    color: #6642b5;
}

.col_form .info {
    font-size: 1em;
    padding: 3px 70px;
    margin-top: 17px;
}

.info > h6 {
    font-size: 1.5em;
    margin: 1em 0 0.5em;
}

p.info a, p.info a:hover, p.info a:active, p.info a:visited {
    color: #fff;
}

.info.large {
    padding: 0.5em 0.5em 0.5em 40%;
    font-size: 1.2em;
}

.info input[type="checkbox"] {
    vertical-align: sub;
}

.info label {
    color: #EAE8FC;
    font-size: 1em;
    line-height: 1em;
    padding: 8px 0;
    text-align: left;
    vertical-align: text-top;
    width: 90%;
}

.info.sommet {
    margin-top: 0;
}

.info .limit_car {
    display: inline;
}

.info input {
    padding: 0;
    margin-right: 5px;
    vertical-align: bottom;
    width: 15px;
}

.info_form {
    padding: 0.5em !important;
    background-color: #4F3C97;
    color: #fff;
    clear: both;
    text-align: center;
}

.info_form a,
.info_form a:focus,
.info_form a:hover,
.info_form a:visited {
    color: #fff;
}

/* Bloc en avant */
.blc_enavant {
    padding: 25px;
    margin-bottom: 5px;
}

.blc_enavant.texte {
    position: relative;
    padding-bottom: 90px;
}

.blc_enavant.texte h3 {
    font-size: 1.6em;
}

.blc_enavant.texte .liens {
    margin-left: -25px;
}

@media (min-width: 600px) {
    .info_form {
        margin-left: 25% !important;
    }
}

@media (max-width: 599px) {
    .blc_enavant.texte {
        margin-top: 10px;
    }
}

p.multiple {
    height: 42px;
}

p.duree select {
    margin-left: 0.7%;
    width: 17.85%;
}

.col_form div ul.liste_radio label {
    width: auto;
    padding-right: 1em;
}

.form ul.liste_radio {
    width: 54%;
    display: inline-block;
    list-style-type: none;
    padding: 11px 0 9px 10px;
    border: 1px solid transparent;
    margin: 0;
}

.form.premiere-connexion__question ul.liste_radio {
    width: 100%;
}

.form ul.liste_radio li {
    display: inline;
    margin: 0;
}

.form ul.liste_radio.liste li {
    display: block;
}

.form ul.liste_radio li input, .form input.checkbox {
    background-color: transparent;
    box-shadow: 0 0 0 transparent;
    margin: 0 3px 0 0;
    padding: 0;
    vertical-align: middle;
    width: 15px;
    border: none;
}


/************* SKIN RADIO ***************/
.mandat ul.liste_radio {
    width: 100%;
}

.form ul.liste_radio li input[type="radio"] {
    left: -9999px;
    position: absolute;
}

.form ul.liste_radio li label {
    cursor: pointer;
    position: relative;
}

.form ul.liste_radio li label span {
    font-size: 0.7em;
}

.form ul.liste_radio li label:before {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    left: -5px;
    border-radius: 20px;
    content: "";
    vertical-align: text-top;
    top: 0;
    cursor: pointer;
    background-color: #FFFFFF;
    border: 1px solid #CFD2D5;
}

.form ul.liste_radio input[type="radio"]:checked + label:after {
    position: absolute;
    left: 4px;
    display: inline-block;
    width: 14px;
    height: 14px;
    content: "";
    vertical-align: text-top;
    cursor: pointer;
    background-color: #7a7d80;
    border-radius: 50%;
}

.form ul.liste_radio input[type="radio"]:checked + label:after {
    left: -1px;
    top: 4px;
}

/************* SKIN CHECKBOX ****************/

p.choix {
    margin: 0;
    padding: 10px 5px 9px 5px;
    font-size: 1em;
    position: relative;
}

.col_form p.choix {
    margin-left: 40% !important;
}

.col_form p.choix.desabo-descr {
    margin-left: 0 !important;
}

p.choix.p_l {
    padding: 0;
    padding-left: 32%;
}

.col_form p.choix label {
    width: inherit;
    padding-left: 10px;
    text-align: left;
    box-sizing: border-box;
}

form .col_form p.choix input.checkbox {
    margin: 0 7px 0 20px;
}

p.choix.rep-libre input {
    vertical-align: middle;
}

.choix_radio li {
    position: relative;
}

.form .choix input[type="checkbox"], .choix_radio li input[type="checkbox"] {
    left: -9999px;
    position: absolute;
}

.form .choix input[type="checkbox"] + label {
    padding-left: 28px;
    cursor: pointer;
    position: relative;
}

.form .choix.desabo-descr input[type="checkbox"] + label {
    width: auto;
}

.choix_radio li input[type="checkbox"] + label {
    padding-left: 22px;
    cursor: pointer;
    position: relative;
}

.form .choix input[type="checkbox"] + label:before, .choix_radio li input[type="checkbox"] + label:before {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    content: "";
    vertical-align: text-top;
    background-color: #FFFFFF;
    border: 1px solid #CFD2D5;
}

.form .choix.rep-libre input[type="checkbox"] + label:before {
    top: 15px;
}

.form .choix.rep-libre input[type="checkbox"]:checked + label::after {
    top: 19px;
}

.form .choix input[type="checkbox"] + label:before {
    /*top: 2px;*/
}

input[type="checkbox"] + label:before {
    top: 0;
    left: 0;
}

.form .choix input[type="checkbox"]:checked + label:after, .choix_radio li input[type="checkbox"]:checked + label:after {
    position: absolute;
    left: 4px;
    display: inline-block;
    width: 10px;
    height: 10px;
    content: "";
    vertical-align: text-top;
    cursor: pointer;
}

.form .choix input[type="checkbox"]:checked + label:after {
    top: 8px;
}

.choix_radio li input[type="checkbox"]:checked + label:after {
    left: 4px;
    top: 4px;
}

/**************/
/* Suppimer juin 2016 : JCL remplacé par : .info .msg-solo
.blcMessUser {
    position: relative;
    margin-bottom: 10px;
    padding: 1em 4% !important;
    background-color: rgb(102, 66, 181);
    color: #dfd9ff;
}

.blcMessUser h4  {
  margin-top: 0;
  font-size: 1.6em;
    font-weight: 600;
}
.blcMessUser h4 span {
    font-size: 0.7em;
}
.blcMessUser h4.important {
    color: #ffffff;
}

.blcMessUser p {
}

.blcMessUser a.fermer {
  position: absolute;
  top: 3px;
  right: 3px;
  text-decoration: none;
}
*/
.message.erreur {
    color: red;
}

.etape_proc_inscr_oeuvre {
    padding: 20px;
    width: 70%;
    margin: 0 auto;
    clear: both;
}

.etape_proc_inscr_oeuvre img {
    float: left;
    margin-bottom: 10px;
    margin-right: 20px;
    margin-top: 10px;
}

.etape_proc_inscr_oeuvre h6 {
    font-style: italic;
    font-weight: 300;
    font-size: 1.9em;
    color: #434648;
    margin: 0 0 20px;
}

.etape_proc_inscr_oeuvre h6.mess_erreur {
    padding: 10px;
}

.etape_proc_inscr_oeuvre h6.entete {
    font-size: 1.5em;
    line-height: 1.2em;
    margin-bottom: 0;
}

.etape_proc_inscr_oeuvre > div {
    width: auto;
}

.etape_proc_inscr_oeuvre h4 {
    padding: 0;
    margin-bottom: 10px;
}

.etape_proc_inscr_oeuvre p {
    margin: 10px 0 0;
}

.etape_proc_inscr_oeuvre ul {
    list-style-type: disc;
    margin: 0 0 10px 0;
    padding-left: 30px;
    color: #6a6c6d;
}

.etape_proc_inscr_oeuvre .upload_progression_pj {
    display: flex;
    background: #bbb;
}

.etape_proc_inscr_oeuvre .upload_progression_pj span:empty {
    display: none;
}

.etape_proc_inscr_oeuvre .upload_progression_pj span {
    padding: 2px 5px;
    box-sizing: border-box;
    display: flex;
    clear: both;
    color: white;
}

.etape_proc_inscr_oeuvre .upload_progression_pj span.animate {
    background: #000;
    transition: width 0.2s ease;
    width: 0;
}

.intertitre-form {
    background-color: #FFFFFF;
    font-size: 2em;
    height: 32px;
    padding: 5px 0 5px 3%;
}

.col_form p em {
    font-size: 0.8em;
}

p.nom_generique input {
    width: 19.7%;
}

input.filmographie_titre {
    width: 40%;
}

input.filmographie_date {
    width: 9%;
}

.ajouter_chp {
    display: block;
    margin: 7px 1% 5px 0;
    padding: 1%;
}

.ajouter_chp img {
    width: auto;
}

p.intertitre-form .ajouter_chp {
    margin: 0.5% 2.5%;
    padding: 0.5% 0.7%;
}

p.intertitre-form .ajouter_chp img {
    vertical-align: top;
}

.col_form .recap_info {
    padding: 0 3%;
    margin: 5px 0 0;
    list-style-type: decimal;
}

.col_form .recap_info > span {
    font-size: 1.1em;
    font-weight: bold;
}

.recap_info > li {
    list-style-position: inside;
}

.col_form p.valid_intermediaire {
    text-align: center;
}

.col_form p.valid_intermediaire a {
    display: inline;
    margin-right: 1%;
}

.col_form p.valid_intermediaire button {
    float: none;
    margin: 0;
    vertical-align: bottom;
}

.inscr_newsletter input {
    padding: 10px;
}

.recap_info li:nth-last-child {
    border-width: 0;
}

.valid_form {
    color: #EAE8FC;
    background-color: #0080c6;
    margin: 0;
    padding: 15px 20px;
    font-size: 1.15em;
    text-align: center;
}

.valid_form form p,
.valid_form form button[type="submit"] {
    text-align: inherit;
    float: inherit;
    margin: 0;
}

.valid_form form p {
    margin: 0.7em 0;
}

.valid_form form p label {
    font-weight: 500;
    font-size: 1.3em;
    line-height: 1.7em;
    margin-right: 10px;
    color: #fff;
}

.valid_form form p label a {
    color: #fff;
}

.valid_form form p.confirm_validation {
    color: #fff;
    border: 1px solid transparent;
}

.valid_form form button[type="submit"] {
    font: inherit;
}

h2.info {
    font-style: italic;
    font-weight: 300;
    font-size: 1.5em;
    line-height: 1.7em;
    margin: 0;
    padding: 1em;
    background-color: #0080c6;
    color: #EAE7FC;
    text-align: center;
}

#traitement_intermediaire {
    width: 20%;
    padding: 20px 20%;
    margin: 20px 20%;
    text-align: center;
}

#traitement_intermediaire h3 {
    color: #434649;
    background-color: transparent;
}

.label_chp_obl {
    background: url("../interface/pictos/chp_obligatoire.png") no-repeat left center;
    margin: 15px !important;
    padding-left: 15px !important;
    float: right;
}

.col_form p.p_message {
    background: none repeat scroll 0 0 #1a1a1a;
    color: #fff;
    clear: both;
    font-weight: bold;
    margin: 0;
    padding: 10px 0;
    text-align: center;
    display: none;
}

.col_form p.p_message a {
    color : #fff;
}

.mess_succes {
    font-weight: bold !important;
    color: #53cb0b !important;
}

.mess_erreur {
    font-weight: bold !important;
    background-color: #000;
    color: #fff !important;
}

.btn.en_cours {
    cursor: wait;
    color: #fff;
}

.btn.en_cours span[class^="pict_"] {
    width: 16px;
    height: 16px;
}

.masque, .code {
    display: none !important;
}

/* PAIEMENT et Reglement */
#etape_finale {
    margin: 20px 100px;
}

#blc_adr_facturation {
}

#blc_adr_facturation p {
    margin: 10px;
}

p.adr_facturation {
    margin-left: 20px;
    font-weight: bold;
}

#blc_adr_facturation strong {
    font-size: 1.2em;
}

#blc_adr_facturation .span4, #blc_adr_facturation .span5 {
    width: 480px;
    min-height: 285px;
}

label#accept_reglement {
    font-size: 1.4em;
    line-height: 1.4em;
    margin-left: 5px;
}

/* Accreditations */
ul.recap_personne {
    margin-left: 15px;
}

ul.recap_personne li {
    margin: 10px 0;
}

ul#choix_paiement {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    height: 50px;
}

ul#choix_paiement li {
    float: left;
    margin-right: 10px;
}

ul#choix_paiement li:last-child {
    margin-right: 0;
}

ul#choix_paiement li a {
    background-color: #ACAFB2;
    display: block;
    /*height: 35px;*/
    text-decoration: none;
    padding: 15px 15px 15px 20px;
    font-size: 1.2em;
    color: #434649;
}

ul#choix_paiement li a:hover {
    background-color: #D9DCDF;
}

ul#choix_paiement li a.selected {
    background: #D9DCDF url(../interface/pictos/fl3px_bas.gif) no-repeat 8px 24px;
}

table#tab_recap_accred {
    margin: 20px 0;
    width: 100%;
}

table#tab_recap_accred td, table#tab_recap_accred th {
    height: 15px;
    vertical-align: middle;
}

table#tab_recap_accred td {
    padding: 5px 10px;
}

table#tab_recap_accred .droite {
    text-align: right;
}

table#tab_recap_accred .gauche {
    text-align: left;
}

table#tab_recap_accred tr.head {
    border-bottom: 1px solid #000;
}

table#tab_recap_accred tr {
    border-bottom: 1px solid #737272;
}

table#tab_recap_accred tr.foot {
    font-size: 1.4em;
}

table#tab_recap_accred tr.foot td {
    padding: 3px 5px;
}

table#tab_recap_accred .saisie_reduction {
    width: 100%;
    text-align: left;
}

table.centerTab tr td:first-child {
    text-align: right;
}

table.centerTab tr td:last-child {
    text-align: left;
}

.saisie_reduction input {
    width: 55%;
    margin: 0;
}

.saisie_reduction button.btn {
    width: 40%;
    margin: 3px 0 0 4px;
}

p.txt_paiement {
    margin: 10px 30px;
}

p.coord_virement {
    text-align: center;
    margin: 10px 0;
}

.bloc_tab.blc_actif {
    border-bottom-color: #606060;
}

#types_paiement {
    position: relative;
}

#paiement {
    margin-top: 20px;
}

#types_paiement > div {
    background-color: #D9DCDF;
    border-top: 0;
    padding: 15px;
}

#types_paiement > div h4 {
    margin: 0.2em 0;
    padding: 0;
}

.accept_desactive {
    font-style: italic;
    color: #bdb8e3;
}

#reglement {
    height: 240px;
    padding: 0px;
    font-size: 0.9em;
    overflow: auto;
    margin-bottom: 15px;
    background-color: #EDF0F3;
    border: 3px solid #ffea00;
}

#reglement h1,
#reglement div {
    padding: 15px;
    background-color: #fffdea;
}

#reglement h1 {
    font-size: 24px;
}
#reglement div.p_standard {
    padding: 0;
}

/*  Navigation dans les pages   */
.navigation_resultats {
    float: right;
    text-align: right;
    vertical-align: middle;
    margin: 12px 0 12px 0;
    padding: 0;
    overflow: hidden;
}

.navigation_resultats li {
    float: left;
    list-style: none;
    text-align: center;
}

ul.navigation_resultats li a, ul.navigation_resultats li span {
    display: block;
    padding: 6px 14px;
    line-height: 1.7em;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.15em;
    border-left: 1px solid #EDF0F3;
}

@media screen and (max-width: 499px) {
    ul.navigation_resultats li a, ul.navigation_resultats li span {
        padding: 6px 9px;
    }
}

ul.navigation_resultats li:first-child a {
    border-left-width: 0;
}

ul.navigation_resultats li a:hover {
    background-color: #757575;
    color: #f0f0f0;
}

ul.navigation_resultats li a.page_select {
    color: #f0f0f0;
    border-right-width: 0;
}

ul.navigation_resultats li a.page_select:hover {
    cursor: pointer;
}

ul.navigation_resultats li span {
    font-weight: normal;
}

/* ---- Liste de films ----*/
ul.liste_films, .p_portail ul.liste_films, .p_com ul.liste_films {
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.liste_films li {
    position: relative;
    min-height: 120px;
    padding: 0;
    margin: 0.3em 0;
    background-color: #edf0f3;
    clear: both;
    overflow: hidden;
}

ul.liste_films li > img {
    width: 140px;
    margin-right: 30px;
    float: left;
}

ul.liste_palmares li {
    position: relative;
    min-height: 245px;
    padding: 0;
    margin-bottom: 2px;
    background-color: #BFC2C5;
}

ul.liste_palmares li img.prime {
    width: 120px;
}

ul.liste_films.cliquable li:hover, ul.liste_palmares.cliquable li:hover {
    background-color: #fff;
    cursor: pointer;
}

ul.liste_films.cliquable li.no-link:hover{
    cursor:default;
}


ul.liste_films.cliquable li.no-cliquable {
    pointer-events: none;
}

ul.liste_films li > div {
    float: left;
    margin-right: 10px;
}

ul.liste_films li h3, ul.liste_films li h4, ul.liste_films li h5, ul.liste_films li h6, ul.liste_palmares li h3, ul.liste_palmares li h4, ul.liste_palmares li h5 {
    margin: 0;
    padding: 0;
    color: #434646;
}

ul.liste_films li h3, ul.liste_palmares li h3 {
    background-color: transparent;
    font-size: 1.6em;
    font-weight: 500;
    padding: 0.5em 0;
}

ul.liste_films.palmares li h3, ul.liste_palmares.palmares li h3 {
    padding-top: 5px;
}


ul.liste_films li h3 span.sousType {
    font-size: 0.6em;
    background-color: #bbbbbb;
    padding: 1px 5px;
    position: relative;
    top: -2px;
    color: #fff;
}

ul.liste_films li h4,
ul.liste_palmares li h4,
.post21 ul.liste_films li h4 span,
.post21 ul.liste_palmares li h4 span {
    color: #434646;
    font-size: 1.077em;
    font-weight: normal;
}


ul.liste_films li h4 span, ul.liste_palmares li h4 span {
    font-weight: 500;
}

ul.liste_films li h4 a, ul.liste_palmares li h4 a {
    position: inherit;
    top: auto;
    right: auto;
    color: #434646;
}

ul.liste_films li h4:last-child, ul.liste_palmares li h4:last-child {
    padding-bottom: 10px;
}

ul.liste_films li a, ul.liste_palmares li a {
    position: absolute;
    right: 1.5%;
    top: 45%;
}

ul.liste_films li a.pict_plus, ul.liste_palmares li a.pict_plus {
    text-indent: -999em;
    position: absolute;
    top: 45%;
    right: 2%;
}

ul.liste_films.categories li {
    width: 48.5%;
    float: left;
    clear: right;
    text-align: center;
    margin-left: 1%;
    margin-bottom: 1%;
    background-color: #edf0f3;
}

ul.liste_films.categories li h3 {
    font-size: 1.5em;
    padding: 1.5em 2em 0 2em;
}

ul.liste_films.categories li h3 span {
    font-size: 0.8em;
}

/* Programme */
ul.liste_films.programme {
    margin: 20px 4%;
    width: 92%;
}

/* spéciaux */
ul.liste_films.speciaux {
    margin: 0;
    padding: 0;
}

ul.liste_films.speciaux li {
    background-color: #EDF0F3;
    overflow: hidden;
}

ul.liste_films.speciaux li:nth-child(odd) {
    background-color: #ffffff;
}

ul.liste_films.speciaux.cliquable li:hover {
    background-color: #E3E6E9;
}

ul.liste_films.speciaux li img {
    max-width: 120px;
}

ul.liste_films.speciaux h2 {
    font-weight: 600;
    font-size: 1.92em;
    color: #6B6D71;
    background-color: transparent;
    display: block;
    margin: 10px 0 0 20px;
}

ul.liste_films.speciaux h2 .etat_attente {
    font-size: 0.55em;
    background-color: #e7222d;
    color: #fbdcdc;
    padding: 0 5px;
    position: relative;
}

span.date_simple {
    position: relative;
    width: 120px;
    margin: 0 15px 0 0;
    display: block;
    padding: 5px 0 0 0;
    text-align: center;
    font-weight: 600;
    font-size: 1.7em;
    line-height: 1.7em;
}

span.date_simple span {
    width: 11px;
    height: 44px;
    display: block;
    position: absolute;
    right: -11px;
    top: 0;
}

ul.liste_films.speciaux p {
    margin: 10px 45px 10px 90px;
    color: #878C8D;
}

/* ------------Fiche générique----------- */

/* ---- gallerie_photo ---- */
div div .gallerie_photo ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

div div .gallerie_photo ul li {
    display: inline-block;
    margin: 0;
    width: 16.66%;
}

div div .gallerie_photo ul li a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

div div .gallerie_photo ul li a {
    position: relative;
}

div div .gallerie_photo ul li a span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
}

div div .gallerie_photo ul li a span {
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
}

div div .gallerie_photo ul li a:hover span {
    box-shadow: none;
}

/* ---- Photothèque ---- */
.phototheque h3 {
    background-color: #CFD2D5;
    color: #434646;
    display: inline-block;
    font-style: italic;
    font-weight: 600;
    font-size: 1.535em;

    margin: 15px 0 0;
    padding: 5px 20px;
}

.phototheque ul {
    padding: 10px 0 !important;
    margin: 15px;
    list-style-type: none !important;
}

.phototheque ul li {
    float: left;
    position: relative;
    width: 49.5%;
    min-height: 125px;
    margin-bottom: 10px;
    margin-right: 1%;
    padding-bottom: 10px;
    border-bottom: 1px solid #acafb2;
}

.phototheque ul li:nth-child(even) {
    margin-right: 0;
}

.phototheque ul li a.zoom {
    float: left;
    margin-right: 5px;
}

.phototheque ul li a.zoom img {
    width: 120px;
    height: 120px;
}

.phototheque a.zoom span {
    position: absolute;
    width: 45px;
    height: 15px;
    top: 10px;
    left: 10px;
    background: url(../interface/pictos/zoom_photo.png) bottom left no-repeat;
    z-index: 10;
    text-decoration: none;
}

.phototheque ul li a.btn {
    margin-top: 10px;
}

.phototheque ul li h5 {
    margin: 0 0.3em 0.3em 0;
    padding: 0.25em 0;
    color: #6b6e71;
    font-size: 1.1em;
}

.phototheque ul li p {
    margin: 0.3em 0;
}

p.copyright {
    font-size: 0.85em;
}

/* --- Modales --- */

/*#modale {
  display: none;
}*/
#obscur {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .80;
    z-index: 9999;
}

#modale, #charge_modale {
    background: #fff;
    padding: 20px;
    border: 10px solid #fff;
    font-size: 1.2em;
    position: fixed;
    z-index: 99990;
}

body > a.croix_modale {
    position: fixed;
    z-index: 99999;
    text-decoration: none;
    font-size: 1.6em;
    font-weight: bold;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
}

#modale{
    padding: 0;
    border: 0;
}
#modale .croix_modale{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    top: 0;
    left:initial;
    right: -45px;

    text-decoration: none;
    font-weight: 500;
    color: #fff;
    text-shadow: initial;
    opacity: 1;
    font-size: 20px;

    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

div#pied_modale_redirect {
    text-align: center;
}

/* ---- FAQ ---- */
.faq div {
    display: none;
}

.faq h4 {
    margin: 0;
}

.faq h4 a {
    padding: 20px;
    text-decoration: none;
    border-top: 1px solid #cfd2d5;
    color: #434649;
    font-weight: 400;
    font-size: 1.3em;
    line-height: 1.1em;

}

.faq .ui-state-active a {
    font-weight: bold;
}

.faq p {
    margin: 0 2em 1em 2.5em;
}

.faq .ui-state-active, .faq .ui-accordion-content-active {
    background-color: #edf0f3;
}

/* ---- Esapce publicité ---- */
.espace_pub {
    margin-top: 12px;
    margin-bottom: 12px;
    clear: both;
}

.espace_pub .anythingSlider {
    margin: 0 auto;
}

.espace_pub ul {
    margin: 0;
    padding: 0;
    text-align: center;
    list-style-type: none;

}

.espace_pub ul li {
    position: relative;
    padding: 0;
    margin: 0;
}

.espace_pub.horizontal ul li {
    width: 630px;
}

.espace_pub.vertical ul li {
    width: 160px;
    float: left;
}

.espace_pub ul li a.calque_flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.espace_pub.ban_ntwk ul {
    margin-left: 0;
}

.espace_pub.horizontal .anythingSlider {
    padding-bottom: 0;
}

.homeRubrique .espace_pub {
    text-align: center;
    margin: 5px 0;
}

/* Spécif pour les pub home rubrique */

/* ---- TABLEAU ---- */

table {
    margin: 1em 0;
    width: 100%;
}

table tr.type {
    background-color: #0759a6;
    color: #fff;
}

table tr.type h4 {
    font-style: italic;
    font-weight: 400;
    font-size: 1.7em;

    margin: 0.7em;
}

table tr.sous_type {
    background-color: #0759a6;
    color: #fff;
}

table tr.type a, table tr.sous_type a {
    color: #fff;
}


table td, table th {
    padding: 10px;
    text-align: center;
}

table th:first-child, table td:first-child {
    border-left-width: 0;
}

table th:last-child, table td:last-child {
    border-right-width: 0;
}

table td.intitule {
    text-align: left;
}

table.listeSimple td, table th.listeSimple {
    text-align: left;
}

table.listeSimple tr:nth-child(even):not(:first-child) {
    background: #fff;
}

table.listeSimple tr:nth-child(odd):not(:first-child) {
    background-color: #e3e6e9;
}

/* tab_recapitulatif */
table.tab_recapitulatif {
    margin-top: 0;
}

table.tab_recapitulatif td {
    width: 50%;
    padding: 8px;
}

table.tab_recapitulatif td p, table.tab_recapitulatif td h4 {
    margin: 0;
}

table.tab_recapitulatif .type th, table.tab_recapitulatif .type td {
    border-width: 0;
}

table.tab_recapitulatif tr.type {
    background-color: transparent;
}

table.tab_recapitulatif td.label {
    padding-right: 5px;
    text-align: right;
}

table.tab_recapitulatif td.valeur {
    text-align: left;
    padding-left: 5px;
}

table.tab_recapitulatif td h4 {
    padding-left: 0;
}

p.confirmation {
    color: #000;
}

/* Table res */
table.tab_res {
    width: 96%;
    margin: 2%;
}

table.tab_res td, table.tab_res th {
    border-width: 0;
    border-bottom: 1px solid #E3E6E9;
    text-align: left;
}

table.tab_res .entetes th {
    background-color: #898C8F;
    color: #ECF0F2;
    font-weight: bold;
    text-align: left;
    padding: 5px 0;
}

table.tab_res .entetes th h4 {
    color: #ECF0F2;
    font-size: 1.075em;
    padding: 5px 0;
    margin-top: 0;
}

table.tab_res tr:nth-child(odd) {
    background-color: #D3D6D9;
}

table.tab_res tr:nth-child(even) {
    background-color: #BFC2C5;
}

table.tab_res tr.important {
    background-color: #EDF0F3;
    font-weight: bold;
}

table.tab_res tr.important:nth-child(even) {
    background-color: #EDF0F3;
}

table.tab_res tr:hover, table.tab_res tr.important:hover {
    cursor: pointer;
}

table.tab_res td {
    font-size: 1.075em;
    padding: 5px;
}

table.tab_res td a {
    text-decoration: none;
    color: #6B6C71;
}

table.tab_res td b.edition_prec {
    background-color: #4f3c97;
    color: #eae8fc;
    font-size: 0.85em;
    font-weight: normal;
    padding: 1px 4px;
}

#entete {
    position: relative;
    padding: 0;
}

#entete a.btn, .blc_img_film a.btn {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* ---- Selecteur rendu ---- */
#selecteur_rendu {
    position: absolute;
    background-color: #6642b5;
    left: 60px;
    top: 0;
    padding: 10px;
    width: 30%;
}

#selecteur_rendu h3 {
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: #867EC3;
    font-style: italic;
}

#selecteur_rendu select {
    margin-top: 10px;
    padding: 3px;
    width: 100%;
}

ul#liste_numprog {
    position: absolute;
    bottom: 10px;
    right: 10px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul#liste_numprog li {
    display: inline-block;
    margin-right: 5px;
}

ul#liste_numprog li a {
    text-decoration: none;
    display: block;
    width: 36px;
    height: 36px;
    background-color: #4F3C97;
    color: #EAE8FC;
    text-align: center;
    font-weight: bold;
    font-size: 1.43em;
    line-height: 1.85em;
}

ul#liste_numprog li a:hover, ul#liste_numprog li a.actif {
    background-color: #EAE8FC;
    color: #4F3C97;
}

/* ---- Anciens navigateurs ----- */
#old_browser {
    padding: 20px;
    background-color: #cb380b;
    border-bottom: 2px solid #781c00;
    color: #fff;
    font-size: 1.3em;
    margin: 100px 0 0;
}

#old_browser a {
    color: #fff;
    font-weight: bold;
}

/* ----- Bandeau d'acceptation des cookies ----- */
#band_cookie {
    position: fixed;
    margin: 0;
    background-color: #EDF6FF;
    font-family: 'Roboto', sans-serif;
    color: #000;
    width: 100%;
    z-index: 100;
    bottom: 0;
}

#band_cookie p {
    margin: 2em;
}

#band_cookie a, #band_cookie a:visited {
    color: #000;
}

#band_cookie a:active {
    color: #000;
}

#band_cookie a#btAcceptCookie,
#band_cookie a#btAcceptCookie:visited {
    background-color: #161E4A;
    color: #EDF6FF;
}

#band_cookie a#btAcceptCookie:hover,
#band_cookie a#btAcceptCookie:focus {
    background-color: #161E4A;
}

#band_cookie a#btAcceptCookie:active {
    background-color: #161E4A;
    color: #EDF6FF;
}

/* En images */
div ul.cat_img {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

div ul.cat_img li {
    float: left;
    margin: 0 1% 1% 0;
    padding: 0;
    position: relative;
    width: 49.5%;
}

div ul.cat_img li:nth-child(even) {
    margin-right: 0;
}

ul.cat_img li a {
    width: 100%;
    position: relative;
    display: inline-block;
    margin: 0;
}

ul.cat_img li a img {
    width: 100%;
}

ul.cat_img li a span.txt_legende {
    background-color: black;
    bottom: 0;
    color: #FFFFFF;
    display: inline-block;
    font-size: 1.1em;
    left: 0;
    padding: 9px 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

ul.cat_img li a:hover span.txt_legende {
    background-color: #434649;
}

ul.cat_img li a:hover span.lien_video {
    opacity: 1;
}

ul.cat_img li a span.lien_video {
    left: 35%;
    top: 25%;
}

/* ---- IFRAME responsive ---- */

.blc_iframe {
    position: relative;
    margin-bottom: 5px;
}

@media screen and (min-width: 980px) {
    .blc_iframe {
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 979px) {
    .blc_iframe {
        margin-bottom: 1em;
    }
}

.blc_iframe .blc_iframe_img {
    display: block;
    width: 100%;
    height: auto;
}

.blc_iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---- VIDEO ----*/

html body div .blc_img_film {
    position: relative;
    padding: 0;
    min-height: initial;
}

.lien_video {
    display: block;
    width: 120px;
    height: 120px;
    line-height: 999;
    left: 42%;
    position: absolute;
    top: 70px;
    opacity: 0.9;
}

.lien_play_video {
    position: absolute;
    background-color: #FFFFFF;
    width: 60px;
    height: 70px;
    padding: 15px 20px;
    top: 80px;
    display: none;
    border-radius: 50px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    opacity: 0.92;
    text-decoration: none;
    text-align: center;
}

.lien_play_video:hover {
    opacity: 1;
}

.lien_play_video.ext {
    left: 34%;
}

.lien_play_video.comp {
    left: 52.5%;
}

.lien_video:hover {
    opacity: 1;
}

.video_iframe {
    display: none;
}

.bottom-bar [class*="span"]:last-child {
    border-right: 0;
}

/*
===============================
Partages et commentaires
===============================
*/

/* Commentaires Facebook */
.comment_fb {
    background-color: #ffffff;
}

.comment_fb > h3 {
    margin-top: 0;
    padding-left: 1em;
}

/* Partages sur les réseaux sociaux */
.partages {
    background-color: #ffffff;
    text-align: right;
    padding-right: 1em;
    height: 2em;
}

/* ==========================================================================
   Base CITIA v2  - Ajustements responsive
   ========================================================================== */

/* --------------------------------------------------------------- @media (min-width: 1200px) ---------------------------------------------------------*/
@media (min-width: 1200px) {

    .span4 .iframe_video {
        width: 390px;
        height: 219px;
        margin-top: 12px;
    }

    p.nom_generique input {
        width: 21.7%;
    }

    /*input.nom_generique { width: 21.7%; }*/
    /*input.nom_generique { width: 21.7%; }*/
    .espace_pub.horizontal ul li {
        width: 728px;
    }

    .espace_pub.horizontal {
        margin-left: 30px;
    }
}

/* --------------------------------------------------- @media (min-width: 768px) and (max-width: 1199px) -----------------------------------------------*/

@media (min-width: 768px) and (max-width: 1199px) {
}

/* --------------------------------------------------- @media (min-width: 980px) and (max-width: 1199px) -----------------------------------------------*/
@media (min-width: 980px) and (max-width: 1199px) {
}

/* --------------------------------------------------- @media (min-width: 768px) and (max-width: 979px) -----------------------------------------------*/
@media (min-width: 768px) and (max-width: 979px) {

    .span4 .iframe_video {
        width: 246px;
        height: 138px;
        margin-top: 12px;
    }

    ul.liste_films.speciaux li {
        height: auto;
    }

    ul.liste_films.speciaux li > img {
        max-width: 25%;
    }

    ul.liste_films.speciaux li > a {
        top: 60%;
    }

    ul.liste_films.speciaux h4.date_simple {
        float: none;
        margin: 0 0 0 -10px;
        padding: 0;
    }

    p.nom_generique input {
        width: 20.7%;
    }

    .espace_pub.horizontal ul li {
        width: 500px;
    }
}

/* --------------------------------------------------------------- @media (max-width: 979px) ---------------------------------------------------------*/
@media (max-width: 979px) {

    .entete_acc ul {
        right: 0;
    }

    .blc.contact.unique > ul > li {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
    }

    ul.cat_img li a, ul.cat_img li a img {
        width: 100%;
    }

    .col_form p.vide {
        display: none;
    }

    .col_form {
        padding-top: 0;
    }

    ul.liste_films.speciaux li {
        height: auto;
    }

    ul.liste_films.speciaux li > img {
        max-width: 30%;
    }

    .blc.info.contact {
        margin-top: 10px;
    }

    p.nom_generique input {
        width: 21.8%;
    }
}

/* --------------------------------------------------------------- @media (max-width: 600px) ---------------------------------------------------------*/
@media (max-width: 600px) {

    p.nom_generique input {
        width: 20.8%;
    }

    /* Forumaires */
    .col_form p label, .col_form div label {
        text-align: left;
        width: 98.45%;
        padding-right: 0;
        padding-left: 1.55%;
    }

    .col_form .log_action {
        text-align: left;
    }

    .col_form .log_action p.choix label {
        width: 80%;
    }

    .chp_obl {
        background-position: left center;
    }
}

/* **********************************Smartphone ********************************************/
@media (max-width: 480px) {

    .entete_acc {
        display: none;
    }

    .span2.mob_moitie {
        width: 100%;
        float: left;
        margin-left: 0;
    }

    .span4 .iframe_video {
        height: 180px;
        margin-top: 12px;
        width: 100%;
    }

    ul.liste_films.categories li {
        width: 100%;
        float: none;
    }

    ul.liste_films.categories li:nth-child(odd) {
        margin-right: 0;
    }

    ul.liste_films.speciaux li {
        height: auto;
    }

    ul.liste_films.speciaux li > img {
        display: none;
    }

    ul.liste_films.speciaux li > a {
        top: 60%;
    }

    ul.liste_films.speciaux h2 {
        height: auto;
    }

    ul.liste_films.speciaux h4.date_simple {
        float: none;
        margin: 0 0 0 -10px;
        padding: 0;
    }

    ul.liste_films.speciaux h2, ul.liste_films.speciaux li p {
        margin-left: 10px;
    }

    #selecteur_rendu {
        width: 50%;
        left: 5%;
    }

    div ul.cat_img li {
        width: 100%;
        margin-right: 0;
    }

}

@media (max-width: 340px) {
}

/* Debug mode CSS */
.debug {
    position: relative;

}

.debug > a {
    color: #0000ff !important;
    font-size: 0.9em;
}

.debug > div {
    color: red;
    display: none;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   SPRITES
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

[class^="pict"],
[class^="icon"] {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-repeat: no-repeat;
    vertical-align: middle;
    line-height: 1em;
    background-image: url("../interface/sprite20.png");
    margin-right: 2px;
}

/*
===============================
page charte
===============================
*/

.charte_pres-pictos {
    display: flex;
    list-style: none;
    padding-left: 0;
    flex-wrap: wrap;
}

.charte_pres-pictos > li {
    min-width: 30%;
    margin: 1px;
}

.charte_pres-pictos:not([class*="no-bg"]) > li > span:not([class*="-h"]):not(.no-bg) {
    background-color: rgba(0, 0, 0, 0.5);
}

/*
===============================
Sprite FLECHES
===============================
*/

.pict.fleche,
.btn_pict.gauche, .btn_pict.droite, .btn_pict.haut, .btn_pict.bas,
.btn_pict.suiv, .btn_pict.prec {
    background-image: url('../interface/sprite-fleches.png') !important;
}

/* -- */

.pict.fleche.fine.w20.h40 {
    width: 20px;
    height: 40px;
}

.pict.fleche.fine.w40.h20 {
    width: 40px;
    height: 20px;
}

.pict.fleche.fine.blanc.w20.h40.gauche {
    background-position: 0 -40px;
}

.pict.fleche.fine.blanc.w20.h40.droite {
    background-position: -20px -40px;
}

.pict.fleche.fine.blanc.w40.h20.haut {
    background-position: -40px -40px;
}

.pict.fleche.fine.blanc.w40.h20.bas {
    background-position: -40px -60px;
}

/* -- */

.btn_pict.gauche, .btn_pict.droite, .btn_pict.haut, .btn_pict.bas {
    height: 20px;
    width: 20px;
    opacity: 0.7;
}

a:hover > .btn_pict.gauche, a:hover > .btn_pict.droite, a:hover > .btn_pict.haut, a:hover > .btn_pict.bas,
a:focus > .btn_pict.gauche, a:focus > .btn_pict.droite, a:focus > .btn_pict.haut, a:focus > .btn_pict.bas {
    opacity: 0.85;
}

a:active > .btn_pict.gauche, a:active > .btn_pict.droite, a:active > .btn_pict.haut, a:active > .btn_pict.bas {
    opacity: 1;
}

.btn_pict.gauche {
    background-position: -80px -280px;
}

.btn_pict.droite {
    background-position: -100px -280px;
}

.btn_pict.haut {
    background-position: -120px -280px;
}

.btn_pict.haut.noir {
    background-position: -115px -355px;
}

.btn_pict.bas {
   /* background-position: -140px -280px; blanc */
    background-position: -135px -355px;
}

.btn_pict.bas.noir {
    background-position: -135px -355px;
}

/* -- */

.btn_pict.suiv, .btn_pict.prec {
    width: 40px;
    height: 40px;
}

.btn_pict.prec {
    background-position: 0 -240px;
}

.btn_pict.suiv {
    background-position: -40px -240px;
}

/*
===============================
Sprite PICTO 16px
===============================
*/

[class*="pict16_"],
[class*="pict16_logo"] {
    width: 16px;
    height: 16px;
    background-image: url("../interface/sprite16.png");
}

[class*="pict16_logo"] {
    left: 1px;
    margin-right: 5px;
}

.pict16_logo-cit {
    background-position: 0 0;
}

.pict16_logo-acy {
    background-position: -16px 0;
}

.pict16_logo-fb {
    background-position: -32px 0;
}

.pict16_logo-papet {
    background-position: -48px 0;
}

.btn_pict.mini_plus {
    background-position: -16px -16px;
}

.btn_pict.mini_plus:hover {
    background-position: 0 -16px;
}

/*
===============================
Sprite PICTO 20px
===============================
*/

span[class^="pict20"],
span[class*=" pict20"] {
    vertical-align: text-top;
    padding: 0;
    background-image: url("../interface/sprite20.png");
    width: 20px;
    height: 20px;
}

.btn_pict.plus, .btn_pict.moins,
[class^="icon20_"],
[class*="icon20_"] {
    width: 20px;
    height: 20px;
    background-image: url("../interface/sprite20.png");
}

.icon20_svg {
    background-image: none;
    width: 20px;
    height: 20px;
}

/* blanc */
.icon20_loupe {
    background-position: 0 0;
}

.icon20_retour {
    background-position: 0 -20px;
}

.icon20_caddie {
    background-position: 0 -40px;
}

.icon20_ticket {
    background-position: 0 -60px;
}

.icon20_coeur {    background-position: -100px -80px;    }
a:hover .icon20_coeur {    background-position: -60px -80px; }

.icon20_loca {
    background-position: 0 -100px;
}

.icon20_horr {
    background-position: 0 -120px;
}

.icon20_vote {
    background-position: 0 -140px;
}

.icon20_invit {
    background-position: 0 -160px;
}

.icon20_coche-h {
    background-position: 0 -180px;
}

.icon20_videot {
    background-position: 0 -200px;
}

.icon20_accred {
    background-position: 0 -220px;
}

.icon20_agenda {    background-position: -100px -240px; }
a:hover .icon20_agenda {    background-position: -60px -240px; }

.icon20_doc {
    background-position: 0 -260px;
}

.icon20_cible {
    background-position: 0 -280px;
}

.icon20_coche, .pict_valid {
    background-position: 0 -300px;
}

.icon20_croix, .pict_suppr, .icone_fermer {
    background-position: 0px -320px;
}

.icon20_croix.noir, .pict_suppr.noir, .icone_fermer.noir {
    background-position: -100px -320px;
}
.icon20_croix-h {
    background-position: 0 -340px;
}

.icon20_son {
    background-position: 0 -360px;
}

.icon20_srt {
    background-position: 0 -380px;
}

.icon20_flyer {    background-position: -100px -400px;   }
a:hover .icon20_flyer {    background-position: -60px -400px;   }

.icon20_filtre {
    background-position: 0 -420px;
}

.icon20_prev, .pict_prev {
    background-position: 0 -440px;
}

.icon20_plus {
    background-position: 0 -460px;
}

.icon20_playcit {
    background-position: 0 -480px;
}

.icon20_ntwk {
    background-position: 0 -500px;
}

.icon20_pdf, .pict_pdf {
    background-position: 0 -520px;
}

.icon20_zip, .pict_zip {
    background-position: 0 -540px;
}

.icon20_hd, .pict_hd {
    background-position: 0 -560px;
}

.icon20_xls, .pict_xls {
    background-position: 0 -580px;
}

.icon20_pen, .pict_edit {
    background-position: 0 -600px;
}

.icon20_form, .pict_modif {
    background-position: 0 -620px;
}

.icon20_apres, .pict_apres {
    background-position: 0 -640px;
}

.icon20_avant, .pict_avant {
    background-position: 0 -660px;
}

.icon20_impr, .pict_impr {
    background-position: 0 -680px;
}

.icon20_oeil, .pict_voir {
    background-position: 0 -700px;
}

.icon20_moins-h, .pict_moins {
    background-position: 0 -720px;
}

.icon20_plus-h, .pict_plus {
    background-position: 0 -740px;
}

.icon20_etoile, .pict_fav {
    background-position: 0 -760px;
}

.icon20_telfx, .pict_tel {
    background-position: 0 -780px;
}

.icon20_quest-h {
    background-position: 0 -800px;
}

.icon20_fwrd, .pict_prev2 {
    background-position: 0 -820px;
}

.icon20_malet, .pict_soc {
    background-position: 0 -840px;
}

.icon20_in, .pict_in {
    background-position: 0 -860px;
}

.icon20_fb {
    background-position: 0 -880px;
}

.icon20_url, .pict_url {
    background-position: 0 -900px;
}

.icon20_mail, .pict_mess {
    background-position: 0 -920px;
}

.icon20_3d, .pict_3d {
    background-position: 0 -940px;
}

.icon20_avpr, .pict_avpr {
    background-position: 0 -960px;
}

.icon20_telmob, .pict_mob {
    background-position: 0 -980px;
}

.icon20_twit, .pict_twit {
    background-position: 0 -1000px;
}

.icon20_pj, .pict_pj {
    background-position: 0 -1020px;
}

.icon20_dwnld, .pict_pj_telech {
    background-position: 0 -1040px;
}

.icon20_ptsusp, .pict_trois_points {
    background-position: 0 -1060px;
}

.icon20_tri, .pict_tri {
    background-position: 0 -1080px;
}

.icon20_user, .pict_user {
    background-position: 0 -1100px;
}

.icon20_part, .pict_part {
    background-position: 0 -1120px;
}

.icon20_cv {
    background-position: 0 -1140px;
}

.icon20_bulle {
    background-position: 0 -1160px;
}

.icon20_cristal {
    background-position: 0 -1180px;
}

.icon20_laurier {
    background-position: 0 -1200px;
}

.icon20_ptsusp-h {
    background-position: 0 -1220px;
}

.icon20_liste {
    background-position: 0 -1240px;
}

.icon20_portefeuil {
    background-position: 0 -1260px;
}

.icon20_journal {
    background-position: 0 -1280px;
}

.icon20_annlive {
    background-position: 0 -1300px;
}

.icon20_go, .pict_acces {
    background-position: 0 -1320px;
}

.icon20_ptsusp-h-2 {
    background-position: -100px -1340px;
    opacity: 0.5;
}

.icon20_croix-h-2 {
    background-position: 0 -1360px;
}

.icon20_coche-h-2 {
    background-position: -40px -1380px;
}

.icon20_chrn {
    background-position: 0 -1400px;
}

.icon20_quest, .pict_quest {
    background-position: 0 -1420px;
}

.icon20_proj {
    background-position: 0 -1440px;
}

.icon20_cog {
    background-position: 0 -1480px;
}

.icon20_blonot {
    background-position: 0 -1500px;
}

.icon20_reseau {
    background-position: 0 -1520px;
}

.icon20_recrut {
    background-position: 0 -1540px;
}

.icon20_wifi {
    background-position: 0 -1560px;
}

/* des picto 20 orientés actions (violet) */
.action.icon20_loupe {
    background-position: -20px 0;
}

.action.icon20_retour {
    background-position: -20px -20px;
}

.action.icon20_caddie {
    background-position: -20px -40px;
}

.action.icon20_ticket {
    background-position: -20px -60px;
}

.action.icon20_coeur {
    background-position: -20px -80px;
}

.action.icon20_loca {
    background-position: -20px -100px;
}

.action.icon20_horr {
    background-position: -20px -120px;
}

.action.icon20_vote {
    background-position: -20px -140px;
}

.action.icon20_invit {
    background-position: -20px -160px;
}

.action.icon20_coche-h {
    background-position: -20px -180px;
}

.action.icon20_videot {
    background-position: -20px -200px;
}

.action.icon20_accred {
    background-position: -20px -220px;
}

.action.icon20_agenda {
    background-position: -20px -240px;
}

.action.icon20_doc {
    background-position: -20px -260px;
}

.action.icon20_cible {
    background-position: -20px -280px;
}

.action.icon20_coche {
    background-position: -20px -300px;
}

.action.icon20_croix {
    background-position: -20px -320px;
}

.action.icon20_croix-h {
    background-position: -20px -340px;
}

.action.icon20_son {
    background-position: -20px -360px;
}

.action.icon20_srt {
    background-position: -20px -380px;
}

.action.icon20_flyer {
    background-position: -20px -400px;
}

.action.icon20_filtre {
    background-position: -20px -420px;
}

.action.icon20_prev {
    background-position: -20px -440px;
}

.action.icon20_plus {
    background-position: -20px -460px;
}

.action.icon20_playcit {
    background-position: -20px -480px;
}

.action.icon20_ntwk {
    background-position: -20px -500px;
}

.action.icon20_pdf {
    background-position: -20px -520px;
}

.action.icon20_zip {
    background-position: -20px -540px;
}

.action.icon20_hd {
    background-position: -20px -560px;
}

.action.icon20_xls {
    background-position: -20px -580px;
}

.action.icon20_pen {
    background-position: -20px -600px;
}

.action.icon20_form {
    background-position: -20px -620px;
}

.action.icon20_apres {
    background-position: -20px -640px;
}

.action.icon20_avant {
    background-position: -20px -660px;
}

.action.icon20_impr {
    background-position: -20px -680px;
}

.action.icon20_oeil {
    background-position: -20px -700px;
}

.action.icon20_moins-h {
    background-position: -20px -720px;
}

.action.icon20_plus-h {
    background-position: -20px -740px;
}

.action.icon20_etoile {
    background-position: -20px -760px;
}

.action.icon20_telfx {
    background-position: -20px -780px;
}

.action.icon20_quest-h {
    background-position: -20px -800px;
}

.action.icon20_fwrd {
    background-position: -20px -820px;
}

.action.icon20_malet {
    background-position: -20px -840px;
}

.action.icon20_in {
    background-position: -20px -860px;
}

.action.icon20_fb {
    background-position: -20px -880px;
}

.action.icon20_url {
    background-position: -20px -900px;
}

.action.icon20_mail {
    background-position: -20px -920px;
}

.action.icon20_3d {
    background-position: -20px -940px;
}

.action.icon20_avpr {
    background-position: -20px -960px;
}

.action.icon20_telmob {
    background-position: -20px -980px;
}

.action.icon20_twit {
    background-position: -20px -1000px;
}

.action.icon20_pj {
    background-position: -20px -1020px;
}

.action.icon20_dwnld {
    background-position: -20px -1040px;
}

.action.icon20_ptsusp {
    background-position: -20px -1060px;
}

.action.icon20_tri {
    background-position: -20px -1080px;
}

.action.icon20_user {
    background-position: -20px -1100px;
}

.action.icon20_part {
    background-position: -20px -1120px;
}

.action.icon20_cv {
    background-position: -20px -1140px;
}

.action.icon20_bulle {
    background-position: -20px -1160px;
}

.action.icon20_cristal {
    background-position: -20px -1180px;
}

.action.icon20_laurier {
    background-position: -20px -1200px;
}

.action.icon20_ptsusp-h {
    background-position: -20px -1220px;
}

.action.icon20_liste {
    background-position: -20px -1240px;
}

.action.icon20_portefeuil {
    background-position: -20px -1260px;
}

.action.icon20_journal {
    background-position: -20px -1280px;
}

.action.icon20_annlive {
    background-position: -20px -1300px;
}

.action.icon20_go {
    background-position: -20px -1320px;
}

.action.icon20_ptsusp-h-2 {
    background-position: -20px -1340px;
}

.action.icon20_croix-h-2 {
    background-position: -20px -1360px;
}

.action.icon20_coche-h-2 {
    background-position: -20px -1380px;
}

.action.icon20_chrn {
    background-position: -20px -1400px;
}

.action.icon20_quest {
    background-position: -20px -1420px;
}

.action.icon20_proj {
    background-position: -20px -1440px;
}

.action.icon20_cog {
    background-position: -20px -1480px;
}

.action.icon20_blonot {
    background-position: -20px -1500px;
}

.action.icon20_reseau {
    background-position: -20px -1520px;
}

.action.icon20_recrut {
    background-position: -20px -1540px;
}

.action.icon20_wifi {
    background-position: -20px -1560px;
}

/* annecy */
.acy.icon20_loupe {
    background-position: -40px 0;
}

.acy.icon20_retour {
    background-position: -40px -20px;
}

.acy.icon20_caddie {
    background-position: -40px -40px;
}

.acy.icon20_ticket {
    background-position: -40px -60px;
}

.acy.icon20_coeur {
    background-position: -40px -80px;
}

.acy.icon20_loca {
    background-position: -40px -100px;
}

.acy.icon20_horr {
    background-position: -40px -120px;
}

.acy.icon20_vote {
    background-position: -40px -140px;
}

.acy.icon20_invit {
    background-position: -40px -160px;
}

.acy.icon20_coche-h {
    background-position: -40px -180px;
}

.acy.icon20_videot {
    background-position: -40px -200px;
}

.acy.icon20_accred {
    background-position: -40px -220px;
}

.acy.icon20_agenda {
    background-position: -40px -240px;
}

.acy.icon20_doc {
    background-position: -40px -260px;
}

.acy.icon20_cible {
    background-position: -40px -280px;
}

.acy.icon20_coche {
    background-position: -40px -300px;
}

.acy.icon20_croix {
    background-position: -40px -320px;
}

.acy.icon20_croix-h {
    background-position: -40px -340px;
}

.acy.icon20_son {
    background-position: -40px -360px;
}

.acy.icon20_srt {
    background-position: -40px -380px;
}

.acy.icon20_flyer {
    background-position: -40px -400px;
}

.acy.icon20_filtre {
    background-position: -40px -420px;
}

.acy.icon20_prev {
    background-position: -40px -440px;
}

.acy.icon20_plus {
    background-position: -40px -460px;
}

.acy.icon20_playcit {
    background-position: -40px -480px;
}

.acy.icon20_ntwk {
    background-position: -40px -500px;
}

.acy.icon20_pdf {
    background-position: -40px -520px;
}

.acy.icon20_zip {
    background-position: -40px -540px;
}

.acy.icon20_hd {
    background-position: -40px -560px;
}

.acy.icon20_xls {
    background-position: -40px -580px;
}

.acy.icon20_pen {
    background-position: -40px -600px;
}

.acy.icon20_form {
    background-position: -40px -620px;
}

.acy.icon20_apres {
    background-position: -40px -640px;
}

.acy.icon20_avant {
    background-position: -40px -660px;
}

.acy.icon20_impr {
    background-position: -40px -680px;
}

.acy.icon20_oeil {
    background-position: -40px -700px;
}

.acy.icon20_moins-h {
    background-position: -40px -720px;
}

.acy.icon20_plus-h {
    background-position: -40px -740px;
}

.acy.icon20_etoile {
    background-position: -40px -760px;
}

.acy.icon20_telfx {
    background-position: -40px -780px;
}

.acy.icon20_quest-h {
    background-position: -40px -800px;
}

.acy.icon20_fwrd {
    background-position: -40px -820px;
}

.acy.icon20_malet {
    background-position: -40px -840px;
}

.acy.icon20_in {
    background-position: -40px -860px;
}

.acy.icon20_fb {
    background-position: -40px -880px;
}

.acy.icon20_url {
    background-position: -40px -900px;
}

.acy.icon20_mail {
    background-position: -40px -920px;
}

.acy.icon20_3d {
    background-position: -40px -940px;
}

.acy.icon20_avpr {
    background-position: -40px -960px;
}

.acy.icon20_telmob {
    background-position: -40px -980px;
}

.acy.icon20_twit {
    background-position: -40px -1000px;
}

.acy.icon20_pj {
    background-position: -40px -1020px;
}

.acy.icon20_dwnld {
    background-position: -40px -1040px;
}

.acy.icon20_ptsusp {
    background-position: -40px -1060px;
}

.acy.icon20_tri {
    background-position: -40px -1080px;
}

.acy.icon20_user {
    background-position: -40px -1100px;
}

.acy.icon20_part {
    background-position: -40px -1120px;
}

.acy.icon20_cv {
    background-position: -40px -1140px;
}

.acy.icon20_bulle {
    background-position: -40px -1160px;
}

.acy.icon20_cristal {
    background-position: -40px -1180px;
}

.acy.icon20_laurier {
    background-position: -40px -1200px;
}

.acy.icon20_ptsusp-h {
    background-position: -40px -1220px;
}

.acy.icon20_liste {
    background-position: -40px -1240px;
}

.acy.icon20_portefeuil {
    background-position: -40px -1260px;
}

.acy.icon20_journal {
    background-position: -40px -1280px;
}

.acy.icon20_annlive {
    background-position: -40px -1300px;
}

.acy.icon20_go {
    background-position: -40px -1320px;
}

.acy.icon20_ptsusp-h-2 {
    background-position: -40px -1340px;
}

.acy.icon20_croix-h-2 {
    background-position: -40px -1360px;
}

.acy.icon20_coche-h-2 {
    background-position: -40px -1380px;
}

.acy.icon20_chrn {
    background-position: -40px -1400px;
}

.acy.icon20_quest {
    background-position: -40px -1420px;
}

.acy.icon20_proj {
    background-position: -40px -1440px;
}

.acy.icon20_cog {
    background-position: -40px -1480px;
}

.acy.icon20_blonot {
    background-position: -40px -1500px;
}

.acy.icon20_reseau {
    background-position: -40px -1520px;
}

.acy.icon20_recrut {
    background-position: -40px -1540px;
}

.acy.icon20_wifi {
    background-position: -40px -1560px;
}

.acy.icon20_editions {
    background-position: -40px -1620px;
}

.btn_pict.plus {
    background-position: -40px -460px;
    opacity: 0.8;
}

.btn_pict.plus:hover {
    background-position: -40px -46px;
}

.btn_pict.moins {
    background-position: -40px -720px;
    opacity: 0.8;
}

.btn_pict.moins:hover {
    background-position: -40px -720px;
}

/* forum blanc */
.fb.icon20_loupe {
    background-position: -60px 0;
}

.fb.icon20_retour {
    background-position: -60px -20px;
}

.fb.icon20_caddie {
    background-position: -60px -40px;
}

.fb.icon20_ticket {
    background-position: -60px -60px;
}

.fb.icon20_coeur {
    background-position: -60px -80px;
}

.fb.icon20_loca {
    background-position: -60px -100px;
}

.fb.icon20_horr {
    background-position: -60px -120px;
}

.fb.icon20_vote {
    background-position: -60px -140px;
}

.fb.icon20_invit {
    background-position: -60px -160px;
}

.fb.icon20_coche-h {
    background-position: -60px -180px;
}

.fb.icon20_videot {
    background-position: -60px -200px;
}

.fb.icon20_accred {
    background-position: -60px -220px;
}

.fb.icon20_agenda {
    background-position: -60px -240px;
}

.fb.icon20_doc {
    background-position: -60px -260px;
}

.fb.icon20_cible {
    background-position: -60px -280px;
}

.fb.icon20_coche {
    background-position: -60px -300px;
}

.fb.icon20_croix {
    background-position: -60px -320px;
}

.fb.icon20_croix-h {
    background-position: -60px -340px;
}

.fb.icon20_son {
    background-position: -60px -360px;
}

.fb.icon20_srt {
    background-position: -60px -380px;
}

.fb.icon20_flyer {
    background-position: -60px -400px;
}

.fb.icon20_filtre {
    background-position: -60px -420px;
}

.fb.icon20_prev {
    background-position: -60px -440px;
}

.fb.icon20_plus {
    background-position: -60px -460px;
}

.fb.icon20_playcit {
    background-position: -60px -480px;
}

.fb.icon20_ntwk {
    background-position: -60px -500px;
}

.fb.icon20_pdf {
    background-position: -60px -520px;
}

.fb.icon20_zip {
    background-position: -60px -540px;
}

.fb.icon20_hd {
    background-position: -60px -560px;
}

.fb.icon20_xls {
    background-position: -60px -580px;
}

.fb.icon20_pen {
    background-position: -60px -600px;
}

.fb.icon20_form {
    background-position: -60px -620px;
}

.fb.icon20_apres {
    background-position: -60px -640px;
}

.fb.icon20_avant {
    background-position: -60px -660px;
}

.fb.icon20_impr {
    background-position: -60px -680px;
}

.fb.icon20_oeil {
    background-position: -60px -700px;
}

.fb.icon20_moins-h {
    background-position: -60px -720px;
}

.fb.icon20_plus-h {
    background-position: -60px -740px;
}

.fb.icon20_etoile {
    background-position: -60px -760px;
}

.fb.icon20_telfx {
    background-position: -60px -780px;
}

.fb.icon20_quest-h {
    background-position: -60px -800px;
}

.fb.icon20_fwrd {
    background-position: -60px -820px;
}

.fb.icon20_malet {
    background-position: -60px -840px;
}

.fb.icon20_in {
    background-position: -60px -860px;
}

.fb.icon20_fb {
    background-position: -60px -880px;
}

.fb.icon20_url {
    background-position: -60px -900px;
}

.fb.icon20_mail {
    background-position: -60px -920px;
}

.fb.icon20_3d {
    background-position: -60px -940px;
}

.fb.icon20_avpr {
    background-position: -60px -960px;
}

.fb.icon20_telmob {
    background-position: -60px -980px;
}

.fb.icon20_twit {
    background-position: -60px -1000px;
}

.fb.icon20_pj {
    background-position: -60px -1020px;
}

.fb.icon20_dwnld {
    background-position: -60px -1040px;
}

.fb.icon20_ptsusp {
    background-position: -60px -1060px;
}

.fb.icon20_tri {
    background-position: -60px -1080px;
}

.fb.icon20_user {
    background-position: -60px -1100px;
}

.fb.icon20_part {
    background-position: -60px -1120px;
}

.fb.icon20_cv {
    background-position: -60px -1140px;
}

.fb.icon20_bulle {
    background-position: -60px -1160px;
}

.fb.icon20_cristal {
    background-position: -60px -1180px;
}

.fb.icon20_laurier {
    background-position: -60px -1200px;
}

.fb.icon20_ptsusp-h {
    background-position: -60px -1220px;
}

.fb.icon20_liste {
    background-position: -60px -1240px;
}

.fb.icon20_portefeuil {
    background-position: -60px -1260px;
}

.fb.icon20_journal {
    background-position: -60px -1280px;
}

.fb.icon20_annlive {
    background-position: -60px -1300px;
}

.fb.icon20_go {
    background-position: -60px -1320px;
}

.fb.icon20_ptsusp-h-2 {
    background-position: -60px -1340px;
}

.fb.icon20_croix-h-2 {
    background-position: -60px -1360px;
}

.fb.icon20_coche-h-2 {
    background-position: -60px -1380px;
}

.fb.icon20_chrn {
    background-position: -60px -1400px;
}

.fb.icon20_quest {
    background-position: -60px -1420px;
}

.fb.icon20_proj {
    background-position: -60px -1440px;
}

.fb.icon20_cog {
    background-position: -60px -1480px;
}

.fb.icon20_blonot {
    background-position: -60px -1500px;
}

.fb.icon20_reseau {
    background-position: -60px -1520px;
}

.fb.icon20_recrut {
    background-position: -60px -1540px;
}

.fb.icon20_wifi {
    background-position: -60px -1560px;
}

.fb.icon20_actNeige {
    background-position: -60px -1600px;
}

.pict_localiFb {
    background-position: -60px -100px;
}

/* citia */
.citia.icon20_loupe {
    background-position: -80px 0;
}

.citia.icon20_retour {
    background-position: -80px -20px;
}

.citia.icon20_caddie {
    background-position: -80px -40px;
}

.citia.icon20_ticket {
    background-position: -80px -60px;
}

.citia.icon20_coeur {
    background-position: -80px -80px;
}

.citia.icon20_loca {
    background-position: -80px -100px;
}

.citia.icon20_horr {
    background-position: -80px -120px;
}

.citia.icon20_vote {
    background-position: -80px -140px;
}

.citia.icon20_invit {
    background-position: -80px -160px;
}

.citia.icon20_coche-h {
    background-position: -80px -180px;
}

.citia.icon20_videot {
    background-position: -80px -200px;
}

.citia.icon20_accred {
    background-position: -80px -220px;
}

.citia.icon20_agenda {
    background-position: -80px -240px;
}

.citia.icon20_doc {
    background-position: -80px -260px;
}

.citia.icon20_cible {
    background-position: -80px -280px;
}

.citia.icon20_coche {
    background-position: -80px -300px;
}

.citia.icon20_croix {
    background-position: -80px -320px;
}

.citia.icon20_croix {
    background-position: -80px -320px;
}

.citia.icon20_croix-h {
    background-position: -80px -340px;
}

.citia.icon20_son {
    background-position: -80px -360px;
}

.citia.icon20_srt {
    background-position: -80px -380px;
}

.citia.icon20_flyer {
    background-position: -80px -400px;
}

.citia.icon20_filtre {
    background-position: -80px -420px;
}

.citia.icon20_prev {
    background-position: -80px -440px;
}

.citia.icon20_plus {
    background-position: -80px -460px;
}

.citia.icon20_playcit {
    background-position: -80px -480px;
}

.citia.icon20_ntwk {
    background-position: -80px -500px;
}

.citia.icon20_pdf {
    background-position: -80px -520px;
}

.citia.icon20_zip {
    background-position: -80px -540px;
}

.citia.icon20_hd {
    background-position: -80px -560px;
}

.citia.icon20_xls {
    background-position: -80px -580px;
}

.citia.icon20_pen {
    background-position: -80px -600px;
}

.citia.icon20_form {
    background-position: -80px -620px;
}

.citia.icon20_apres {
    background-position: -80px -640px;
}

.citia.icon20_avant {
    background-position: -80px -660px;
}

.citia.icon20_impr {
    background-position: -80px -680px;
}

.citia.icon20_oeil {
    background-position: -80px -700px;
}

.citia.icon20_moins-h {
    background-position: -80px -720px;
}

.citia.icon20_plus-h {
    background-position: -80px -740px;
}

.citia.icon20_etoile {
    background-position: -80px -760px;
}

.citia.icon20_telfx {
    background-position: -80px -780px;
}

.citia.icon20_quest-h {
    background-position: -80px -800px;
}

.citia.icon20_fwrd {
    background-position: -80px -820px;
}

.citia.icon20_malet {
    background-position: -80px -840px;
}

.citia.icon20_in {
    background-position: -80px -860px;
}

.citia.icon20_fb {
    background-position: -80px -880px;
}

.citia.icon20_url {
    background-position: -80px -900px;
}

.citia.icon20_mail {
    background-position: -80px -920px;
}

.citia.icon20_3d {
    background-position: -80px -940px;
}

.citia.icon20_avpr {
    background-position: -80px -960px;
}

.citia.icon20_telmob {
    background-position: -80px -980px;
}

.citia.icon20_twit {
    background-position: -80px -1000px;
}

.citia.icon20_pj {
    background-position: -80px -1020px;
}

.citia.icon20_dwnld {
    background-position: -80px -1040px;
}

.citia.icon20_ptsusp {
    background-position: -80px -1060px;
}

.citia.icon20_tri {
    background-position: -80px -1080px;
}

.citia.icon20_user {
    background-position: -80px -1100px;
}

.citia.icon20_part {
    background-position: -80px -1120px;
}

.citia.icon20_cv {
    background-position: -80px -1140px;
}

.citia.icon20_bulle {
    background-position: -80px -1160px;
}

.citia.icon20_cristal {
    background-position: -80px -1180px;
}

.citia.icon20_laurier {
    background-position: -80px -1200px;
}

.citia.icon20_ptsusp-h {
    background-position: -80px -1220px;
}

.citia.icon20_liste {
    background-position: -80px -1240px;
}

.citia.icon20_portefeuil {
    background-position: -80px -1260px;
}

.citia.icon20_journal {
    background-position: -80px -1280px;
}

.citia.icon20_annlive {
    background-position: -80px -1300px;
}

.citia.icon20_go {
    background-position: -80px -1320px;
}

.citia.icon20_ptsusp-h-2 {
    background-position: -80px -1340px;
}

.citia.icon20_croix-h-2 {
    background-position: -80px -1360px;
}

.citia.icon20_coche-h-2 {
    background-position: -80px -1380px;
}

.citia.icon20_chrn {
    background-position: -80px -1400px;
}

.citia.icon20_quest {
    background-position: -80px -1420px;
}

.citia.icon20_proj {
    background-position: -80px -1440px;
}

.citia.icon20_cog {
    background-position: -80px -1480px;
}

.citia.icon20_blonot {
    background-position: -80px -1500px;
}

.citia.icon20_reseau {
    background-position: -80px -1520px;
}

.citia.icon20_recrut {
    background-position: -80px -1540px;
}

.citia.icon20_wifi {
    background-position: -80px -1560px;
}

/* des picto 20 gris */
.pict_list, .pict_loca, .pict_pre, .pict_horr,
[class*="icon20"].gris {
    opacity: 0.65;
}

.actif > span.pict_user, .pict_prsn {
    background-position: -100px -1100px;
    opacity: 0.65;
}

.actif > span.pict_soc {
    background-position: -100px -840px;
    opacity: 0.65;
}

.gris.icon20_loupe {
    background-position: -100px 0;
}

.gris.icon20_retour {
    background-position: -100px -20px;
}

.gris.icon20_caddie {
    background-position: -100px -40px;
}

.gris.icon20_ticket {
    background-position: -100px -60px;
}

.gris.icon20_coeur {
    background-position: -100px -80px;
}

.gris.icon20_loca, .pict_loca {
    background-position: -100px -100px;
}

.gris.icon20_horr, .pict_horr {
    background-position: -100px -120px;
}

.gris.icon20_vote {
    background-position: -100px -140px;
}

.gris.icon20_invit {
    background-position: -100px -160px;
}

.gris.icon20_coche-h {
    background-position: -100px -180px;
}

.gris.icon20_videot {
    background-position: -100px -200px;
}

.gris.icon20_accred {
    background-position: -100px -220px;
}

.gris.icon20_agenda {
    background-position: -100px -240px;
}

.gris.icon20_doc {
    background-position: -100px -260px;
}

.gris.icon20_cible {
    background-position: -100px -280px;
}

.gris.icon20_coche {
    background-position: -100px -300px;
}

.gris.icon20_croix {
    background-position: -100px -320px;
}

.gris.icon20_croix-h {
    background-position: -100px -340px;
}

.gris.icon20_son {
    background-position: -100px -360px;
}

.gris.icon20_srt {
    background-position: -100px -380px;
}

.gris.icon20_flyer {
    background-position: -100px -400px;
}

.gris.icon20_filtre {
    background-position: -100px -420px;
}

.gris.icon20_prev {
    background-position: -100px -440px;
}

.gris.icon20_plus {
    background-position: -100px -460px;
}

.gris.icon20_playcit {
    background-position: -100px -480px;
}

.gris.icon20_ntwk {
    background-position: -100px -500px;
}

.gris.icon20_pdf {
    background-position: -100px -520px;
}

.gris.icon20_zip {
    background-position: -100px -540px;
}

.gris.icon20_hd {
    background-position: -100px -560px;
}

.gris.icon20_xls {
    background-position: -100px -580px;
}

.gris.icon20_pen {
    background-position: -100px -600px;
}

.gris.icon20_form {
    background-position: -100px -620px;
}

.gris.icon20_apres {
    background-position: -100px -640px;
}

.gris.icon20_avant {
    background-position: -100px -660px;
}

.gris.icon20_impr {
    background-position: -100px -680px;
}

.gris.icon20_oeil {
    background-position: -100px -700px;
}

.gris.icon20_moins-h {
    background-position: -100px -720px;
}

.gris.icon20_plus-h {
    background-position: -100px -740px;
}

.gris.icon20_etoile {
    background-position: -100px -760px;
}

.gris.icon20_telfx {
    background-position: -100px -780px;
}

.gris.icon20_quest-h {
    background-position: -100px -800px;
}

.gris.icon20_fwrd {
    background-position: -100px -820px;
}

.gris.icon20_malet {
    background-position: -100px -840px;
}

.gris.icon20_in {
    background-position: -100px -860px;
}

.gris.icon20_fb {
    background-position: -100px -880px;
}

.gris.icon20_url {
    background-position: -100px -900px;
}

.gris.icon20_mail {
    background-position: -100px -920px;
}

.gris.icon20_3d {
    background-position: -100px -940px;
}

.gris.icon20_avpr {
    background-position: -100px -960px;
}

.gris.icon20_telmob {
    background-position: -100px -980px;
}

.gris.icon20_twit {
    background-position: -100px -1000px;
}

.gris.icon20_pj {
    background-position: -100px -1020px;
}

.gris.icon20_dwnld {
    background-position: -100px -1040px;
}

.gris.icon20_ptsusp {
    background-position: -100px -1060px;
}

.gris.icon20_tri {
    background-position: -100px -1080px;
}

.gris.icon20_user {
    background-position: -100px -1100px;
}

.gris.icon20_part {
    background-position: -100px -1120px;
}

.gris.icon20_cv {
    background-position: -100px -1140px;
}

.gris.icon20_bulle {
    background-position: -100px -1160px;
}

.gris.icon20_cristal {
    background-position: -100px -1180px;
}

.gris.icon20_laurier {
    background-position: -100px -1200px;
}

.gris.icon20_ptsusp-h {
    background-position: -100px -1220px;
}

.gris.icon20_liste {
    background-position: -100px -1240px;
}

.gris.icon20_portefeuil {
    background-position: -100px -1260px;
}

.gris.icon20_journal {
    background-position: -100px -1280px;
}

.gris.icon20_annlive {
    background-position: -100px -1300px;
}

.gris.icon20_go {
    background-position: -100px -1320px;
}

.gris.icon20_ptsusp-h-2 {
    background-position: -100px -1340px;
}

.gris.icon20_croix-h-2 {
    background-position: -100px -1360px;
}

.gris.icon20_coche-h-2 {
    background-position: -100px -1380px;
}

.gris.icon20_chrn {
    background-position: -100px -1400px;
}

.gris.icon20_quest {
    background-position: -100px -1420px;
}

.gris.icon20_proj {
    background-position: -100px -1440px;
}

.gris.icon20_cog {
    background-position: -100px -1480px;
}

.gris.icon20_blonot {
    background-position: -100px -1500px;
}

.gris.icon20_reseau {
    background-position: -100px -1520px;
}

.gris.icon20_recrut {
    background-position: -100px -1540px;
}

.gris.icon20_wifi {
    background-position: -100px -1560px;
}

/* autres picto 20 */
.pict_ok {
    background-position: -100px -1380px;
    opacity: 0.4;
}

.pict_ok.actif {
    background-position: -40px -1380px;
    opacity: 1;
}

.pict_ko {
    background-position: -100px -1360px;
    opacity: 0.4;
}

.icon20_fr {
    background-position: 0 -1460px;
}

.icon20_en {
    background-position: -20px -1460px;
}

.pict_sablier {
    background: transparent url("../interface/pictos/icon_sablier.png") 0 0 no-repeat !important;
}

.form ul.liste_radio li input[type="radio"]:checked + label:before {
    background-position: -40px -1380px;
}

.form ul.liste_radio li label:hover:before {
    background-position: -100px -1380px;
}

/*
/!\ /!\ PATCH /!\ /!\

Les premiers picto de 20px ont des nom génériques sans taille, je leur attribue le bon sprite ici
*/

.pict_rech, .pict_valid, .pict_suppr, .pict_prev, .pict_pdf,
.pict_zip, .pict_hd, .pict_xls, .pict_edit, .pict_modif,
.pict_avant, .pict_apres, .pict_impr, .pict_voir, .pict_plus,
.pict_moins, .pict_fav, .pict_tel, .pict_quest, .pict_prev2,
.pict_soc, .pict_in, .pict_url, .pict_mess, .pict_3d,
.pict_avpr, .pict_mob, .pict_twit, .pict_pj, .pict_pj_telech,
.pict_trois_points, .pict_tri, .pict_user, .pict_part, .pict_acces,
.pict_horr, .pict_loca, .pict_ok, .pict_ko {
    vertical-align: text-top;
    padding: 0;
    background-image: url("../interface/sprite20.png");
    width: 20px;
    height: 20px;
}

/*
===============================
Sprite PICTO 25px
===============================
*/

.pict25_lettre, .pict25_loca, .pict25_note,
[class^="pict23_"],
[class*=" pict23_"],
[class*="pict25_"],
[class*="icon25_"] {
    width: 25px;
    height: 25px;
    margin-right: 0.2em;
    background-image: url("../interface/sprite25.png");
}

/* Positionnement des pictogrammes sur le sprite */
.icon25_fr {    background-position: 0 0;}
.icon25_playcitia {    background-position: -25px 0;}
.icon25_playacy {    background-position: -50px 0;}
.icon25_playfb {    background-position: -75px 0;}
.icon25_papet {    background-position: -100px 0;}
.icon25_en {    background-position: 0 -25px;}
.icon25_exclm-h-red {    background-position: -25px -25px;  }

/* blanc */
.icon25_rech {    background-position: 0 -50px; }
.icon25_retour {    background-position: 0 -75px;   }
.icon25_blc_menu,
.icon25_menu {    background-position: 0 -100px;    }
.icon25_agenda, .pict25_agenda {    background-position: 0 -125px;  }
.icon25_loca, .pict25_loca {    background-position: 0 -150px;  }
.icon25_coche, .icon25_coche1 {    background-position: 0 -175px;   }
.icon25_croix, .icon25_croix1 {    background-position: 0 -200px;   }
.icon25_coche-h, .icon25_coche2 {    background-position: 0 -225px; }
.icon25_croix-h, .icon25_croix2 {    background-position: 0 -250px; }
.icon25_blonot, .pict25_note {    background-position: 0 -275px;}
.icon25_invit {    background-position: 0 -300px;}
.icon25_mail, .pict25_lettre,
a:hover .pict23_mess {    background-position: 0 -325px;}
.icon25_expo, .pict25_expo {    background-position: 0 -350px;}
.icon25_bulle {    background-position: 0 -375px;}
.icon25_new, .pict_new {    background-position: 0 -400px;}
.icon25_avpr {    background-position: 0 -425px;}
.icon25_chrn {    background-position: 0 -450px;}
.icon25_lm {    background-position: 0 -475px;}
.icon25_arob {    background-position: 0 -500px;}
.icon25_exclm-h {    background-position: 0 -525px;}
.icon25_ptsusp-h {    background-position: 0 -550px;}
.icon25_plus-h {    background-position: 0 -575px;}
.icon25_profil, a:hover .pict23_profil {    background-position: 0 -600px;}
.icon25_ntwk {    background-position: 0 -625px;}
.icon25_user {    background-position: 0 -650px;}
.icon25_malet {    background-position: 0 -675px;}
.icon25_monstand {    background-position: 0 -979px;}
.icon25_stands {    background-position: 0 -1005px;}
.icon25_events {    background-position: 0 -952px;}
.icon25_cog {    background-position: 0 -700px; }
.icon25_ticket {    background-position: 0 -725px;}
.icon25_accred {    background-position: 0 -750px;}
.icon25_reseau {    background-position: 0 -775px;}
.icon25_videot {    background-position: 0 -800px;}
.icon25_recrut {    background-position: 0 -825px;}
.icon25_cv {    background-position: 0 -850px;}
.icon25_vote {    background-position: 0 -875px;}
.icon25_wifi {    background-position: 0 -900px;}



/* violet */
.icon25_act_rech {
    background-position: -25px -50px;
}

.icon25_act_retour {
    background-position: -25px -75px;
}

.icon25_act_menu {
    background-position: -25px -100px;
}

.icon25_act_agenda {
    background-position: -25px -125px;
}

.icon25_act_loca {
    background-position: -25px -150px;
}

.icon25_coche1.violet {
    background-position: -25px -175px;
}

.icon25_croix1.violet {
    background-position: -25px -200px;
}

.icon25_coche2.violet {
    background-position: -25px -225px;
}

.icon25_croix2.violet {
    background-position: -25px -250px;
}

.icon25_blonot.violet {
    background-position: -25px -275px;
}

.icon25_invit.violet {
    background-position: -25px -300px;
}

.icon25_mail.violet {
    background-position: -25px -325px;
}

.action.icon25_rech {
    background-position: -25px -50px;
}

.action.icon25_retour {
    background-position: -25px -75px;
}

.action.icon25_menu {
    background-position: -25px -100px;
}

.action.icon25_agenda {
    background-position: -25px -125px;
}

.action.icon25_loca {
    background-position: -25px -150px;
}

.action.icon25_coche, .action.icon25_coche1 {
    background-position: -25px -175px;
}

.action.icon25_croix, .action.icon25_croix1 {
    background-position: -25px -200px;
}

.action.icon25_coche-h, .action.icon25_coche2 {
    background-position: -25px -225px;
}

.action.icon25_croix-h, .action.icon25_croix2 {
    background-position: -25px -250px;
}

.action.icon25_blonot {
    background-position: -25px -275px;
}

.action.icon25_invit {
    background-position: -25px -300px;
}

.action.icon25_mail {
    background-position: -25px -325px;
}

.action.icon25_expo {
    background-position: -25px -350px;
}

.action.icon25_bulle {
    background-position: -25px -375px;
}

.action.icon25_new {
    background-position: -25px -400px;
}

.action.icon25_avpr {
    background-position: -25px -425px;
}

.action.icon25_chrn {
    background-position: -25px -450px;
}

.action.icon25_lm {
    background-position: -25px -475px;
}

.action.icon25_arob {
    background-position: -25px -500px;
}

.action.icon25_exclm-h {
    background-position: -25px -525px;
}

.action.icon25_ptsusp-h {
    background-position: -25px -550px;
}

.action.icon25_plus-h {
    background-position: -25px -575px;
}

.action.icon25_profil {
    background-position: -25px -600px;
}

.action.icon25_ntwk {
    background-position: -25px -625px;
}

.action.icon25_user {
    background-position: -25px -650px;
}

.action.icon25_malet {
    background-position: -25px -675px;
}

.action.icon25_cog {
    background-position: -25px -700px;
}

.action.icon25_ticket {
    background-position: -25px -725px;
}

.action.icon25_accred {
    background-position: -25px -750px;
}

.action.icon25_reseau {
    background-position: -25px -775px;
}

.action.icon25_videot {
    background-position: -25px -800px;
}

.action.icon25_recrut {
    background-position: -25px -825px;
}

.action.icon25_cv {
    background-position: -25px -850px;
}

.action.icon25_vote {
    background-position: -25px -875px;
}

.action.icon25_wifi {
    background-position: -25px -900px;
}

/* annecy */
.acy.icon25_rech {
    background-position: -50px -50px;
}

.acy.icon25_retour {
    background-position: -50px -75px;
}

.acy.icon25_menu {
    background-position: -50px -100px;
}

.acy.icon25_agenda {
    background-position: -50px -125px;
}

.acy.icon25_loca {
    background-position: -50px -150px;
}

.acy.icon25_coche, .acy.icon25_coche1 {
    background-position: -50px -175px;
}

.acy.icon25_croix, .acy.icon25_croix1 {
    background-position: -50px -200px;
}

.acy.icon25_coche-h, .acy.icon25_coche2 {
    background-position: -50px -225px;
}

.acy.icon25_croix-h, .acy.icon25_croix2 {
    background-position: -50px -250px;
}

.acy.icon25_blonot {
    background-position: -50px -275px;
}
/*
.acy.icon25_invit {
    background-position: -50px -300px;
}

.acy.icon25_mail {
    background-position: -50px -325px;
}
*/
.acy.icon25_expo {
    background-position: -50px -350px;
}

.acy.icon25_bulle {
    background-position: -50px -375px;
}

.acy.icon25_new {
    background-position: -50px -400px;
}

.acy.icon25_avpr {
    background-position: -50px -425px;
}

.acy.icon25_chrn {
    background-position: -50px -450px;
}

.acy.icon25_lm {
    background-position: -50px -475px;
}

.acy.icon25_arob {
    background-position: -50px -500px;
}

.acy.icon25_exclm-h {
    background-position: -50px -525px;
}

.acy.icon25_ptsusp-h {
    background-position: -50px -550px;
}

.acy.icon25_plus-h {
    background-position: -50px -575px;
}
/*
.acy.icon25_profil {
    background-position: -50px -600px;
}

.acy.icon25_ntwk {
    background-position: -50px -625px;
}

.acy.icon25_user {
    background-position: -50px -650px;
}

.acy.icon25_malet {
    background-position: -50px -675px;
}

.acy.icon25_cog {
    background-position: -50px -700px;
}

.acy.icon25_ticket {
    background-position: -50px -725px;
}

.acy.icon25_accred {
    background-position: -50px -750px;
}

.acy.icon25_reseau {
    background-position: -50px -775px;
}

.acy.icon25_videot {
    background-position: -50px -800px;
}

.acy.icon25_recrut {
    background-position: -50px -825px;
}

.acy.icon25_cv {
    background-position: -50px -850px;
}

.acy.icon25_vote {
    background-position: -50px -875px;
}

.acy.icon25_wifi {
    background-position: -50px -900px;
}

.acy.icon25_editions {
    background-position: -50px -950px;
}
*/
/* forum blanc  */
.fb.icon25_rech {
    background-position: -75px -50px;
}

.fb.icon25_retour {
    background-position: -75px -75px;
}

.fb.icon25_menu {
    background-position: -75px -100px;
}

.fb.icon25_agenda {
    background-position: -75px -125px;
}

.fb.icon25_loca {
    background-position: -75px -150px;
}

.fb.icon25_coche, .fb.icon25_coche1 {
    background-position: -75px -175px;
}

.fb.icon25_croix, .fb.icon25_croix1 {
    background-position: -75px -200px;
}

.fb.icon25_coche-h, .fb.icon25_coche2 {
    background-position: -75px -225px;
}

.fb.icon25_croix-h, .fb.icon25_croix2 {
    background-position: -75px -250px;
}

.fb.icon25_blonot {
    background-position: -75px -275px;
}

.fb.icon25_invit {
    background-position: -75px -300px;
}

.fb.icon25_mail {
    background-position: -75px -325px;
}

.fb.icon25_expo {
    background-position: -75px -350px;
}

.fb.icon25_bulle {
    background-position: -75px -375px;
}

.fb.icon25_new {
    background-position: -75px -400px;
}

.fb.icon25_avpr {
    background-position: -75px -425px;
}

.fb.icon25_chrn {
    background-position: -75px -450px;
}

.fb.icon25_lm {
    background-position: -75px -475px;
}

.fb.icon25_arob {
    background-position: -75px -500px;
}

.fb.icon25_exclm-h {
    background-position: -75px -525px;
}

.fb.icon25_ptsusp-h {
    background-position: -75px -550px;
}

.fb.icon25_plus-h {
    background-position: -75px -575px;
}

.fb.icon25_profil {
    background-position: -75px -600px;
}

.fb.icon25_ntwk {
    background-position: -75px -625px;
}

.fb.icon25_user {
    background-position: -75px -650px;
}

.fb.icon25_malet {
    background-position: -75px -675px;
}

.fb.icon25_cog {
    background-position: -75px -700px;
}

.fb.icon25_ticket {
    background-position: -75px -725px;
}

.fb.icon25_accred {
    background-position: -75px -750px;
}

.fb.icon25_reseau {
    background-position: -75px -775px;
}

.fb.icon25_videot {
    background-position: -75px -800px;
}

.fb.icon25_recrut {
    background-position: -75px -825px;
}

.fb.icon25_cv {
    background-position: -75px -850px;
}

.fb.icon25_vote {
    background-position: -75px -875px;
}

.fb.icon25_wifi {
    background-position: -75px -900px;
}

.fb.icon25_actNeige {
    background-position: -75px -925px;
}

/* citia  */
.citia.icon25_rech {
    background-position: -100px -50px;
}

.citia.icon25_retour {
    background-position: -100px -75px;
}

.citia.icon25_menu {
    background-position: -100px -100px;
}

.citia.icon25_agenda {
    background-position: -100px -125px;
}

.citia.icon25_loca {
    background-position: -100px -150px;
}

.citia.icon25_coche, .citia.icon25_coche1 {
    background-position: -100px -175px;
}

.citia.icon25_croix, .citia.icon25_croix1 {
    background-position: -100px -200px;
}

.citia.icon25_coche-h, .citia.icon25_coche2 {
    background-position: -100px -225px;
}

.citia.icon25_croix-h, .citia.icon25_croix2 {
    background-position: -100px -250px;
}

.citia.icon25_blonot {
    background-position: -100px -275px;
}

.citia.icon25_invit {
    background-position: -100px -300px;
}

.citia.icon25_mail {
    background-position: -100px -325px;
}

.citia.icon25_expo {
    background-position: -100px -350px;
}

.citia.icon25_bulle {
    background-position: -100px -375px;
}

.citia.icon25_new {
    background-position: -100px -400px;
}

.citia.icon25_avpr {
    background-position: -100px -425px;
}

.citia.icon25_chrn {
    background-position: -100px -450px;
}

.citia.icon25_lm {
    background-position: -100px -475px;
}

.citia.icon25_arob {
    background-position: -100px -500px;
}

.citia.icon25_exclm-h {
    background-position: -100px -525px;
}

.citia.icon25_ptsusp-h {
    background-position: -100px -550px;
}

.citia.icon25_plus-h {
    background-position: -100px -575px;
}

.citia.icon25_profil {
    background-position: -100px -600px;
}

.citia.icon25_ntwk {
    background-position: -100px -625px;
}

.citia.icon25_user {
    background-position: -100px -650px;
}

.citia.icon25_malet {
    background-position: -100px -675px;
}

.citia.icon25_cog {
    background-position: -100px -700px;
}

.citia.icon25_ticket {
    background-position: -100px -725px;
}

.citia.icon25_accred {
    background-position: -100px -750px;
}

.citia.icon25_reseau {
    background-position: -100px -775px;
}

.citia.icon25_videot {
    background-position: -100px -800px;
}

.citia.icon25_recrut {
    background-position: -100px -825px;
}

.citia.icon25_cv {
    background-position: -100px -850px;
}

.citia.icon25_vote {
    background-position: -100px -875px;
}

.citia.icon25_wifi {
    background-position: -100px -900px;
}

/* gris  */

[class*="icon25"].gris {
    opacity: 0.65;
}

.gris.icon25_rech {
    background-position: -125px -50px;
}

.gris.icon25_retour {
    background-position: -125px -75px;
}

.gris.icon25_menu {
    background-position: -125px -100px;
}

.gris.icon25_agenda {
    background-position: -125px -125px;
}

.gris.icon25_loca {
    background-position: -125px -150px;
}

.gris.icon25_coche, .gris.icon25_coche1 {
    background-position: -125px -175px;
}

.gris.icon25_croix, .gris.icon25_croix1 {
    background-position: -125px -200px;
}

.gris.icon25_coche-h, .gris.icon25_coche2 {
    background-position: -125px -225px;
}

.gris.icon25_croix-h, .gris.icon25_croix2 {
    background-position: -125px -250px;
}

.gris.icon25_blonot {
    background-position: -125px -275px;
}

.gris.icon25_invit {
    background-position: -125px -300px;
}

.gris.icon25_mail {
    background-position: -125px -325px;
}

.gris.icon25_expo {
    background-position: -125px -350px;
}

.gris.icon25_bulle {
    background-position: -125px -375px;
}

.gris.icon25_new {
    background-position: -125px -400px;
}

.gris.icon25_avpr {
    background-position: -125px -425px;
}

.gris.icon25_chrn {
    background-position: -125px -450px;
}

.gris.icon25_lm {
    background-position: -125px -475px;
}

.gris.icon25_arob {
    background-position: -125px -500px;
}

.gris.icon25_exclm-h {
    background-position: -125px -525px;
}

.gris.icon25_ptsusp-h {
    background-position: -125px -550px;
}

.gris.icon25_plus-h {
    background-position: -125px -575px;
}

.gris.icon25_profil {
    background-position: -125px -600px;
}

.gris.icon25_ntwk {
    background-position: -125px -625px;
}

.gris.icon25_user {
    background-position: -125px -650px;
}

.gris.icon25_malet {
    background-position: -125px -675px;
}

.gris.icon25_cog {
    background-position: -125px -700px;
}

.gris.icon25_ticket {
    background-position: -125px -725px;
}

.gris.icon25_accred {
    background-position: -125px -750px;
}

.gris.icon25_reseau {
    background-position: -125px -775px;
}

.gris.icon25_videot {
    background-position: -125px -800px;
}

.gris.icon25_recrut {
    background-position: -125px -825px;
}

.gris.icon25_cv {
    background-position: -125px -850px;
}

.gris.icon25_vote {
    background-position: -125px -875px;
}

.gris.icon25_wifi {
    background-position: -125px -900px;
}

/* des picto 25 gris */
.pict23_mess {
    background-position: -125px -420px;
    opacity: 0.5;
}

.pict23_profil {
    background-position: -125px -600px;
    opacity: 0.5;
}

/*
/!\ /!\ PATCH /!\ /!\
Style et CSS des formulaires à revoir :
  Les pictos 25 (au moins) ont par défaut des propriétés de margin qui correspondent à une utilisation certes majoritaire, mais qui gènent d'autres utilisations
*/

.btn-deploy-menu span.pict25_menu {
    margin-right: 0;
    margin-top: 0;
}

/*
===============================
Sprite PICTO 30px
===============================
*/

[class*="pict30_"] {
    width: 30px;
    height: 30px;
    margin-right: 0.2em;
    vertical-align: text-top;
    margin-top: 1px;
    background-image: url("../interface/sprite30.png");
}

.pict30_fr {
    background-position: 0 -360px;
}

.pict30_en {
    background-position: -30px -360px;
}

.pict30_agenda {
    background-position: -60px -360px;
}

.pict30_recherche {
    background-position: -90px -360px;
}

.pict30_network {
    background-position: -120px -360px;
}

.pict30_menu {
    background-position: -150px -360px;
}

a:hover .pict30_fr {
    background-position: 0 -390px;
}

a:hover .pict30_en {
    background-position: -30px -390px;
}

a:hover .pict30_agenda {
    background-position: -60px -390px;
}

a:hover .pict30_recherche {
    background-position: -90px -390px;
}

a:hover .pict30_network {
    background-position: -120px -390px;
}

button:hover .pict30_menu {
    background-position: -150px -390px;
}

.pict30_bulle {
    background-position: -180px -360px;
}

.pict30_jury {
    background-position: -210px -360px;
}

.pict30_playplus {
    background-position: -240px -360px;
}

.pict30_acy {
    background-position: -180px -390px;
}

.pict30_fav {
    background-position: -210px -390px;
}

.pict30_play {
    background-position: -240px -390px;
}

.pict30_duree {
    background-position: -90px -420px;
}

.pict30_prog {
    background-position: -120px -420px;
}

.pict30_lieu {
    background-position: -150px -420px;
}

.pict30_avpr {
    background-position: -180px -420px;
}

.pict30_ext {
    background-position: -240px -360px;
}

.pict30_comp {
    background-position: -240px -360px;
}

.pict30_ext {
    background-position: -240px -390px;
}

/*
===============================
Sprite PICTO 40px
===============================
*/

.icon40_svg {
    background-image: none;
    width: 40px;
    height: 40px;
}

/*
===============================
Sprite PICTO 45px
===============================
*/

[class^="badge_"], [class*=" badge_"],
[class^="pict45_"], [class*=" pict45_"] {
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 1em;
    background-image: url("../interface/sprite45.png");
}

[class^="pict45_"], [class*=" pict45_"] {
    vertical-align: text-top;
}

[class^="badge_"], [class*=" badge_"] {
    vertical-align: text-bottom;
}

footer .liste_reseaux > li > a {
    width: 45px;
    height: 45px;
    background-image: url('../interface/sprite45.png');
    background-repeat: no-repeat;
}

/* Positionnement des badges sur le sprite */
.badge_note {
    background-position: -225px -270px;
}

.badge_agenda {
    background-position: -225px -315px;
}

.badge_new {
    background-position: -225px -360px;
}

.badge_stat {
    background-position: -225px -405px;
}

.badge_question {
    background-position: -225px -450px;
}

.badge_lien {
    background-position: -225px -495px;
}

.badge_loca {
    background-position: -225px -540px;
}

.action.badge_note, .agenda.badge_note, .couleur.badge_note {
    background-position: -225px -270px;
}

.action.badge_agenda, .agenda.badge_agenda, .couleur.badge_agenda {
    background-position: -225px -315px;
}

.action.badge_new, .agenda.badge_new, .couleur.badge_new {
    background-position: -225px -360px;
}

.action.badge_stat, .agenda.badge_stat, .couleur.badge_stat {
    background-position: -225px -405px;
}

.action.badge_question, .agenda.badge_question, .couleur.badge_question {
    background-position: -225px -450px;
}

.action.badge_lien, .agenda.badge_lien, .couleur.badge_lien {
    background-position: -225px -495px;
}

.action.badge_loca, .agenda.badge_loca, .couleur.badge_loca {
    background-position: -225px -540px;
}

.citia.badge_note {
    background-position: -180px -270px;
}

.citia.badge_agenda {
    background-position: -180px -315px;
}

.citia.badge_new {
    background-position: -180px -360px;
}

.citia.badge_stat {
    background-position: -180px -405px;
}

.citia.badge_question {
    background-position: -180px -450px;
}

.citia.badge_lien {
    background-position: -180px -495px;
}

.citia.badge_loca {
    background-position: -180px -540px;
}

.acy.badge_note {
    background-position: -90px -270px;
}

.acy.badge_agenda {
    background-position: -90px -315px;
}

.acy.badge_new {
    background-position: -90px -360px;
}

.acy.badge_stat {
    background-position: -90px -405px;
}

.acy.badge_question {
    background-position: -90px -450px;
}

.acy.badge_lien {
    background-position: -90px -495px;
}

.acy.badge_loca {
    background-position: -90px -540px;
}

.fb.badge_note {
    background-position: -135px -270px;
}

.fb.badge_agenda {
    background-position: -135px -315px;
}

.fb.badge_new {
    background-position: -135px -360px;
}

.fb.badge_stat {
    background-position: -135px -405px;
}

.fb.badge_question {
    background-position: -135px -450px;
}

.fb.badge_lien {
    background-position: -135px -495px;
}

.fb.badge_loca {
    background-position: -135px -540px;
}

/* Positionnement des logo RS sur le sprite */
.liste_reseaux > li > .facebook {
    background-position: 0 -585px;
}

.bottom-bar .liste_reseaux > li > .facebook {
    background-position: 0 -45px;
}

.liste_reseaux > li > .twitter {
    background-position: -45px -585px;
}

.bottom-bar .liste_reseaux > li > .twitter {
    background-position: -45px -45px;
}

.liste_reseaux > li > .youtube {
    background-position: -90px -585px;
}

.bottom-bar .liste_reseaux > li > .youtube {
    background-position: -90px -45px;
}

.liste_reseaux > li > .linkedin {
    background-position: -135px -585px;
}

.bottom-bar .liste_reseaux > li > .linkedin {
    background-position: -135px -45px;
}

.liste_reseaux > li > .dailymotion {
    background-position: -180px 0;
}

.bottom-bar .liste_reseaux > li > .dailymotion {
    background-position: -180px -45px;
}

.liste_reseaux > li > .rss {
    background-position: -225px -585px;
}

.bottom-bar .liste_reseaux > li > .rss {
    background-position: -225px -45px;
}

.liste_reseaux > li > .flickr {
    background-position: -180px -585px;
}

.bottom-bar .liste_reseaux > li > .flickr {
    background-position: 0 -180px;
}

.liste_reseaux > li > .instagram {
    background-position: 0px -628px;
}

.bottom-bar .liste_reseaux > li > .instagram {
    background-position: -45px -180px;
}

.liste_reseaux > li > .ggPhoto {
    background-position: -90px -135px;
}

.bottom-bar .liste_reseaux > li > .ggPhoto {
    background-position: -90px -180px;
}

.liste_reseaux > li > .facebook:hover,
.bottom-bar .liste_reseaux > li > .facebook:hover {
    background-position: 0 -585px;
}

.liste_reseaux > li > .twitter:hover,
.bottom-bar .liste_reseaux > li > .twitter:hover {
    background-position: -45px -585px;
}

.liste_reseaux > li > .youtube:hover,
.bottom-bar .liste_reseaux > li > .youtube:hover {
    background-position: -90px -585px;
}

.liste_reseaux > li > .linkedin:hover,
.bottom-bar .liste_reseaux > li > .linkedin:hover {
    background-position: -135px -585px;
}

.liste_reseaux > li > .dailymotion:hover,
.bottom-bar .liste_reseaux > li > .dailymotion:hover {
    background-position: -180px -90px;
}

.liste_reseaux > li > .rss:hover,
.bottom-bar .liste_reseaux > li > .rss:hover {
    background-position: -225px -585px;
}

.liste_reseaux > li > .flickr:hover,
.bottom-bar .liste_reseaux > li > .flickr:hover {
    background-position: -180px -585px;
}

.liste_reseaux > li > .instagram:hover,
.bottom-bar .liste_reseaux > li > .instagram:hover {
    background-position: 0px -628px;
}

.liste_reseaux > li > .ggPhoto:hover,
.bottom-bar .liste_reseaux > li > .ggPhoto:hover {
    background-position: -90px -225px;
}

.liste_reseaux > li > .one_share.facebook,
.liste_reseaux > li > .one_share.facebook:hover,
.liste_reseaux > li > .one_share.facebook:active {
    background-position: 0px 0px;
}

.liste_reseaux > li > .one_share.twitter,
.liste_reseaux > li > .one_share.twitter:hover,
.liste_reseaux > li > .one_share.twitter:active {
    background-position: -45px 0px;
}

.liste_reseaux > li > .one_share.linkedin,
.liste_reseaux > li > .one_share.linkedin:hover,
.liste_reseaux > li > .one_share.linkedin:active {
    background-position: -135px 0px;
}
/*
===============================
Sprite PICTO 50px
===============================
*/

[class^="pict50_"],
[class*="pict50_"],
[class^="icon50_"],
[class*="icon50_"] {
    width: 50px;
    height: 50px;
    background-image: url("../interface/sprite50.png");
}

.icon50_svg {
    background: none;
}

svg[class*="icon"].fb {
    fill: #f49100;
}

svg[class*="icon"].gris10 {
    fill: #acafb2;
}

svg[class*="icon"].gris12 {
    fill: #898c8f;
}

svg[class*="icon"].gris16 {
    fill: #434649;
}

.pict50_invit {
    background-position: 0 -200px;
}

.pict50_loupe {
    background-position: 0 -250px;
}

.pict50_agenda {
    background-position: 0 -300px;
}

.pict50_loca {
    background-position: 0 -350px;
}

.pict50_program {
    background-position: 0 -400px;
}

.pict50_billetterie {
    background-position: 0 -450px;
}

.pict50_3file {
    background-position: 0 -500px;
}

/*
===============================
Sprite PICTO pages
===============================
*/

.pict, [class*="fa60"] {
    background-image: url("../interface/sprite-pictos-pages_gris.png") !important;
    float: none;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    bottom: 10px;
}

.fa60_apropos, .apropos {
    background-position: 0 0;
}

.fa60_archive, .archive {
    background-position: -60px 0;
}

.fa60_enimages, .enimages {
    background-position: -120px 0;
}

.fa60_accred, .accred {
    background-position: -180px 0;
}

.fa60_fest, .fest {
    background-position: -240px 0;
}

.fa60_mifa, .mifa {
    background-position: 0 -60px;
}

.fa60_conf, .conf {
    background-position: -60px -60px;
}

.fa60_focus, .focus {
    background-position: -120px -60px;
}

.fa60_condacces, .condacces {
    background-position: -180px -60px;
}

.fa60_inscript, .inscript {
    background-position: -240px -60px;
}

.fa60_benevoles, .benevoles {
    background-position: 0 -120px;
}

.fa60_etudiants, .etudiants {
    background-position: -60px -120px;
}

.fa60_infoprat, .infoprat {
    background-position: -120px -120px;
}

.fa60_agenda, .agenda {
    background-position: -180px -120px;
}

.fa60_press, .press {
    background-position: -240px -420px;
}

.fa60_part, .part {
    background-position: 0 -180px;
}

.fa60_retd, .retd {
    background-position: -60px -180px;
}

.fa60_network, .network {
    background-position: -120px -180px;
}

.fa60_billeterie, .billeterie {
    background-position: -180px -180px;
}

.fa60_locali, .locali {
    background-position: -240px -180px;
}

.fa60_rezo, .rezo {
    background-position: 0 -240px;
}

.fa60_portefeu, .portefeu {
    background-position: -60px -240px;
}

.fa60_cible, .cible {
    background-position: -120px -240px;
}

.fa60_exposit, .exposit {
    background-position: -180px -240px;
}

.fa60_dessin, .dessin {
    background-position: -240px -240px;
}

.fa60_envelop, .envelop {
    background-position: 0 -300px;
}

.fa60_carrefour, .carrefour {
    background-position: -60px -300px;
}

.fa60_program, .program {
    background-position: -120px -300px;
}

.fa60_memploi, .memploi {
    background-position: -180px -300px;
}

.fa60_annonceur, .annonceur {
    background-position: -240px -300px;
}

.fa60_faq, .faq {
    background-position: 0 -360px;
}

.fa60_interv, .interv {
    background-position: -60px -360px;
}

.fa60_heberg, .heberg {
    background-position: -120px -360px;
}

.fa60_loupe, .loupe {
    background-position: -180px -360px;
}

.fa60_pgfavoris, .pgfavoris {
    background-position: -240px -360px;
}

.fa60_documen, .documen {
    background-position: 0 -420px;
}

.fa60_editorial, .editorial {
    background-position: -60px -420px;
}

.fa60_acces, .acces {
    background-position: -120px -420px;
}

.fa60_goute {
    background-position: -180px -420px;
}

.fa60_actus {
    background-position: -240px -120px;
}

.fa60_recrut {
    background-position: -0px -480px;
}

.fa60_videotheque {
    background-position: -60px -480px;
}

.fa60_sharewith {
    background-position: -120px -480px;
}

.fa60_cfb {
    background-position: -180px -480px;
}

.fa60_cfc {
    background-position: -240px -480px;
}

.fa60_vote {
    background-position: -0px -540px;
}

.fa60_camera {
    background-position: -60px -540px;
}

.fa60_connect {
    background-position: -120px -540px;
}

.fa60_deconnect {
    background-position: -180px -540px;
}

.fa60_keynote {
    background-position: -240px -540px;
}

.fa60_cm {
    background-position: -0px -600px;
}

.fa60_cmc {
    background-position: -0px -600px;
}

.fa60_lm {
    background-position: -60px -600px;
}

.fa60_progspe {
    background-position: -120px -600px;
}

.fa60_ecran {
    background-position: -180px -600px;
}

.fa60_cfop {
    background-position: -240px -600px;
}

.fa60_canape {
    background-position: -0px -660px;
}

.fa60_fauteuil {
    background-position: -60px -660px;
}

.fa60_cristal {
    background-position: -120px -660px;
}

.fa60_multisup {
    background-position: -180px -660px;
}

.fa60_mof {
    background-position: -240px -660px;
}

.fa60_user {
    background-position: -0px -720px;
}

.fa60_stand {
    background-position: -60px -720px;
}

.fa60_rechpart {
    background-position: -120px -720px;
}

.fa60_focstu {
    background-position: -180px -720px;
}

.fa60_lc {
    background-position: -240px -720px;
}

.fa60_cocktail {
    background-position: -0px -780px;
}

.fa60_repas {
    background-position: -60px -780px;
}

.fa60_cafe {
    background-position: -120px -780px;
}

.fa60_bus {
    background-position: -180px -780px;
}

.fa60_mc {
    background-position: -240px -780px;
}

.fa60_panier {
    background-position: -0px -840px;
}

.fa60_caddie {
    background-position: -60px -840px;
}

.fa60_maison {
    background-position: -120px -840px;
}

.fa60_coupe {
    background-position: -180px -840px;
}

.fa60_wip {
    background-position: -240px -840px;
}

.fa60_30ansmifa {
    background-position: -0px -900px;
}

.fa60_focterr {
    background-position: -60px -900px;
}

.fa60_lune {
    background-position: -120px -900px;
}

.fa60_demo_session {
    background-position: -0px -960px;
}

.fa60_proj_marche {
    background-position: -60px -960px;
}

.fa60_wifi {
    background-position: -180px -900px;
}

.fa60_vr {
    background-position: -240px -900px;
}

/* Responsive obsolète .... préférer les fa60_*
@media (max-width: 979px) {
  .apropos      {   background-position:    0     0;    }
  .archive      {   background-position:  -40px   0;    }
  .enimages     {   background-position:  -80px   0;    }
  .accred       {   background-position: -120px   0;    }
  .fest         {   background-position: -160px   0;    }

  .mifa         {   background-position:    0   -40px;  }
  .conf         {   background-position:  -40px -40px;  }
  .focus        {   background-position:  -80px -40px;  }
  .condacces    {   background-position: -120px -40px;  }
  .inscript     {   background-position: -160px -40px;  }

  .benevoles    {   background-position:    0    -80px; }
  .etudiants    {   background-position:  -40px  -80px; }
  .infoprat     {   background-position:  -80px  -80px; }
  .agenda       {   background-position: -120px  -80px; }
  .press        {   background-position: -160px  -80px; }

  .part         {   background-position:    0   -120px; }
  .retd         {   background-position:  -40px -120px; }
  .network      {   background-position:  -80px -120px; }
  .billeterie   {   background-position: -120px -120px; }
  .locali       {   background-position: -160px -120px; }

  .rezo         {   background-position:   0    -160px; }
  .portefeu     {   background-position: -40px  -160px; }
  .cible        {   background-position:  -80px -160px; }
  .exposit      {   background-position: -120px -160px; }
  .dessin       {   background-position: -160px -160px; }

  .envelop      {   background-position:   0    -200px; }
  .carrefour    {   background-position:  -40px -200px; }
  .program      {   background-position:  -80px -200px; }
  .memploi      {   background-position: -120px -200px; }
  .annonceur    {   background-position: -160px -200px; }

  .faq          {   background-position:    0   -240px; }
  .interv       {   background-position:  -40px -240px; }
  .heberg       {   background-position:  -80px -240px; }
  .loupe        {   background-position: -120px -240px; }
  .pgfavoris    {   background-position: -160px -240px; }

  .documen      {   background-position:    0   -280px; }
  .editorial    {   background-position:  -40px -280px; }
  .acces        {   background-position:  -80px -280px; }
}
*/
/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   ELEMENTS SOLO
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.precisions {
    font-style: italic;
}

.questionITW {
    font-weight: bold;
}

/*
==============================================================
==============================================================
   Overlay
==============================================================
==============================================================
*/

.overlay,
#blc_chargement_visuel_menu,
#blc_attente_visuel,
#blc_menu_actif {
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    z-index: 50;
    opacity: 0.75;
    background-color: #35383b;
}

.overlay .loader {
    display: none;
}

.overlay.active, .overlay.loader, .overlay.loader .loader {
    display: block;
}

.overlay {
    position: fixed;
}

#blc_chargement_visuel_menu, #blc_attente_visuel, #blc_menu_actif {
    position: absolute;
}

.overlay {
    cursor: pointer;
}

#blc_chargement_visuel_menu, #blc_menu_actif {
    cursor: wait;
}

#blc_attente_visuel, #blc_menu_actif {
    cursor: default;
}

.overlay .loader,
#blc_chargement_visuel .loader {
    position: absolute;
    top: 250px;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
}

#blc_attente_visuel h4 {
    width: 70%;
    display: block;
    text-align: center;
    margin-top: 100px;
    padding: 10px 15%;
    font-size: 1.5em;
    line-height: 1.3em;
    background-color: #4f3c97;
    color: #fff;
}

#blc_attente_visuel h4:hover {
    background-color: #6642b5;
}

/*
==============================================================
==============================================================
   LOGOS DANS LE TEXTE
==============================================================
==============================================================
*/

.logo-solo {
    width: 0;
    visibility: hidden;
}

.logo-solo::after {
    content: " ";
    display: inline-block;
    visibility: visible;
    margin: 2px;
}

.logo-solo::after {
    content: url("../interface/logo-solo_acy.png");
}

.logo-solo.fb::after {
    content: url("../interface/logo-solo_fb.png");
}

.logo-solo.citia::after {
    content: url("../interface/logo-solo_citia.png");
}

/*
==============================================================
==============================================================
   RESUM-AGENDA
==============================================================
==============================================================
*/

.resum-agenda h2 {
    position: relative;
    z-index: 1;
    font-weight: 600;
    font-size: 4em;
    line-height: 0.8em;
    margin-top: 0;
    margin-bottom: 0;
    color: #000;
    padding: 25px 10px 15px;
}

.resum-agenda__liste {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.resum-agenda__item {
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding: 5%;
}

.resum-agenda__date {
    font-size: 2em !important;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.resum-agenda__titre {
    color: rgba(0, 0, 0, 0.6);
    margin: 0.75em 0 0;
}

.resum-agenda__description {
    color: rgba(0, 0, 0, 0.6);
    margin: 0.25em 0;
}

a.resum-agenda__lien {
    color: rgba(255, 255, 255, 0.7);
}

/*
==============================================================
==============================================================
   EN-TETE FULL WIDTH
==============================================================
==============================================================
*/

/* en tete - container */

.entete-full-width {
    margin-bottom: 25px;
    position: relative;
}

@media screen and (min-width: 880px) {
    .entete-full-width {
        height: 550px;
    }
}

@media screen and (max-width: 879px) and (min-width: 700px) {
    .entete-full-width {
        height: 340px;
    }

    .baselineHome {
        font-size: 1.1em;
    }
}

@media screen and (max-width: 699px) {
    .entete-full-width {
        height: 190px;
    }

    .baselineHome {
        font-size: 1.1em;
    }

    div#logo_site {
        margin: 10px 50px;
    }
}

/* en tete - container */

.image-full-width__container > a {
    display: block;
    text-decoration: none;
}

/* en tete - content */

.entete-full-width__content {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.entete-full-width__accroche {
    text-align: center;
    color: #FFFFFF;

}

@media screen and (max-width: 980px) {
    .entete-full-width__accroche {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 499px) {
    .entete-full-width__accroche {
        padding-bottom: 10px;
    }
}

.entete-full-width__accroche > p {
    margin-bottom: 0;
}

/*
==============================================================
==============================================================
   SUGGESTIONS MOBILE
==============================================================
==============================================================
*/

@media screen and (min-width: 979px) {
    .suggestions_mobile {
        display: none;
    }
}

.suggestions_mobile ul {
    margin: 0;
    list-style: none;
    padding-left: 0;
}

.suggestions_mobile li {
    background-color: #e1e3e5;
}

.suggestions_mobile .btn {
    width: 90%;
    margin: 0;
    padding-right: 5%;
    padding-left: 5%;
}

@media screen and (max-width: 700px) {
    .slider li:not(:first-child) {
        display: none;
    }
}

/*
==============================================================
==============================================================
   SPAN DE DIVISION
==============================================================
==============================================================
*/

[class*="widthdiv"] {
    display: block;
    float: left;
}

.widthdiv_1s1 {
    width: 100%;
}

.widthdiv_1s2 {
    width: 50%;
}

.widthdiv_1s3 {
    width: calc(100% / 3);
}

.widthdiv_2s3 {
    width: calc(100% * 2 / 3);
}

/*
==============================================================
==============================================================
   NUMEROS D'ETAPE SOLO
==============================================================
==============================================================
*/

[class^="numero-etape_solo"] {
    display: block;
    font-size: 2em;
    line-height: 1em;
    width: 28px;
    padding: 11px;
    text-align: center;
}

.numero-etape_solo_50 {
    border-radius: 25px;
}

/*
==============================================================
==============================================================
   BTN TOGGLE
==============================================================
==============================================================
*/

.btn-toggle {
    display: block;
    float: right;
    background-color: #fff;
    border-radius: 15px;
}

.btn-toggle > button {
    border: none;
    background-color: transparent;
    border-radius: 50%;
    padding: 2px;
}

.btn-toggle > button > span {
    margin-right: 0;
    opacity: 0 !important;
    transition: opacity 0.15s ease-in-out;
}

.btn-toggle > button:hover > span,
.btn-toggle > button:focus > span {
    opacity: 0.1 !important;
}

.btn-toggle > button:active > span {
    opacity: 0.5 !important;
}

.btn-toggle > button.is-selected > span {
    opacity: 1 !important;
}

.btn-toggle > button.is-selected > .icon25_croix-h {
    background-position: -50px -25px;
}

.lst-param.citia .btn-toggle > button.is-selected > .icon25_coche-h {
    background-position: -100px -225px;
}

.lst-param.acy .btn-toggle > button.is-selected > .icon25_coche-h {
    background-position: -50px -225px;
}

.lst-param.fb .btn-toggle > button.is-selected > .icon25_coche-h {
    background-position: -75px -225px;
}

/*
==============================================================
==============================================================
   BTN DEPLOY MENU
==============================================================
==============================================================
*/

.btn-deploy-menu {
    display: block;
    position: fixed;
    z-index: 60;
    right: 0;
    margin: 10px;
    padding: 0;
    transition: right 0.15s ease-in 0.15s;
}

#mob_menu_network {
    display: none;
}

body.network #mob_menu_network {
    display: block;
}

@media screen and (min-width: 768px) {
    .btn-deploy-menu,
    body.network #mob_menu_network {
        display: none;
    }
}

.btn-deploy-menu__content {
    display: block;
    padding: 6px;
}

.btn-deploy-menu__content span {
    float: none;
    margin-right: 0;
}

/* style */

.btn-deploy-menu,
.btn-deploy-menu__content {
    border-radius: 20px;
}

.btn-deploy-menu__content {
    background-color: rgba(0, 0, 0, 0);
}

.btn-deploy-menu:hover .btn-deploy-menu__content,
.btn-deploy-menu:focus .btn-deploy-menu__content {
    background-color: rgba(0, 0, 0, 0.17);
}

.btn-deploy-menu:active .btn-deploy-menu__content {
    background-color: rgba(0, 0, 0, 0.31);
}

/*
==============================================================
==============================================================
   EN-TÊTE SITE (LOGO & DATES)
==============================================================
==============================================================
*/

/*
------------------------
   dates
------------------------
*/

.en-tete-site__dates {
    margin-bottom: 0;
}

/* style */

.en-tete-site__dates {
    font-style: italic;
    font-weight: 600;

    color: rgba(0, 0, 0, 0.31);
}

/*
==============================================================
==============================================================
   INFOGRAPHIE LIGNE
==============================================================
==============================================================
*/

.infographie-ligne {
    list-style: none;
    padding-left: 0;
    margin: 1em 0;
}

.infographie-ligne > li {
    float: left;
    margin-right: 5px;
    margin-left: 5px;
}

.infographie-ligne > li:first-child {
    margin-left: 0;
}

.infographie-ligne > li:last-child {
    margin-right: 0;
}

@media screen and (max-width: 1200px) {
    .infographie-ligne > li {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 1200px) and (min-width: 650px) {
    .infographie-ligne > li:nth-child(4n+1) {
        clear: left;
    }

    .infographie-ligne > li:nth-child(4n) {
        margin-left: 0;
    }

    .infographie-ligne > li:nth-child(4n+1) {
        margin-right: 0;
    }
}

@media screen and (max-width: 649px) {
    .infographie-ligne > li:nth-child(2n+1) {
        clear: left;
    }

    .infographie-ligne > li {
        margin-left: -2px;
        margin-right: -2px;
    }
}

/*
==============================================================
==============================================================
   LIEN IMAGE
==============================================================
==============================================================
*/

.lien-image {
    opacity: 1;
}

.lien-image:hover,
.lien-image:focus {
    opacity: 0.85;
}

.lien-image:active {
    opacity: 0.7;
}

/*
==============================================================
==============================================================
   LEGENDE
==============================================================
==============================================================
*/

/* par défaut : image et légende centrée */

.illustration {
    margin-top: 2em !important;
    margin-bottom: 2em !important;
}

.illustration:before,
.illustration:after {
    display: table;
    content: "";
    line-height: 0;
}

.illustration:after {
    clear: both;
}

.illustration > h5 {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    line-height: 1.17em;
}

/* style */

.illustration {
    font-style: italic;
    text-align: center;
}

.illustration p,
.illustration h5 {
    color: #9c9ea1;
}

/*
==============================================================
   image à gauche ou à droite
==============================================================
*/

.illustration.gauche > img,
.illustration.droite > img {
    max-width: 60%;
}

/*
----------------------------------------
   image à gauche
----------------------------------------
*/

.illustration.gauche {
    text-align: left;
}

.illustration.gauche > img {
    float: left;
    margin-right: 1em;
}

/*
----------------------------------------
   image à droite
----------------------------------------
*/

.illustration.droite {
    text-align: right;
}

.illustration.droite > img {
    float: right;
    margin-left: 1em;
}

/*
==============================================================
==============================================================
   FLOAT GAUCHE DROITE
==============================================================
==============================================================
*/

.pull-gauche {
    float: left;
    margin: 0 1em
}

.pull-droite {
    float: right;
    margin-right: 0;
}

.pull-gauche {
    float: left;
    margin-left: 0;
}

/*
==============================================================
==============================================================
   IMAGE FULL WIDTH
==============================================================
==============================================================
*/

/* container */

.image-full-width__container {
    overflow: hidden;
    position: relative;
}

@media screen and (max-width: 1199px) {
    .image-full-width__container {
        margin-right: -2%;
        margin-left: -2%;
    }
}

/* image */

@media screen and (min-width: 980px) {
    .image-full-width {
        max-width: none;
        position: relative;
        margin-left: -960px;
        left: 50%;

    }
}

@media screen and (max-width: 979px) {
    .image-full-width {
        width: 100%;
    }
}

@media screen and (min-width: 980px) {
    .image-full-width:nth-child(2),
    .image-full-width:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: 979px) and (min-width: 500px) {
    .image-full-width:nth-child(1),
    .image-full-width:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: 499px) {
    .image-full-width:nth-child(1),
    .image-full-width:nth-child(2) {
        display: none;
    }
}

@media screen and (min-width: 980px) {
    .slider__image img:nth-child(2) {
        display: none;
    }
}

@media screen and (max-width: 979px) {
    .slider__image img:nth-child(1) {
        display: none;
    }
}

/* dégradé */

.image-full-width__container > .legende-image__degrade {
    height: 200px;
}

/*
==============================================================
==============================================================
   LEGENDE IMAGE >> DEGRADE
==============================================================
==============================================================
*/
/*
.legende-image__degrade {
    position: absolute;
}

.legende-image__degrade.bas,
.legende-image__degrade.haut {
    width: 100%;
    left: 0;
    background-size: auto 100%;
}

.legende-image__degrade.haut {
    top: 0;
    background-image: url('../interface/legende-image__degrade_haut.png');
}

.legende-image__degrade.bas {
    bottom: 0;
    background-image: url('../interface/legende-image__degrade_bas.png');
}

.legende-image__degrade.droite,
.legende-image__degrade.gauche {
    height: 100%;
    top: 0;
    background-size: 100% auto;
}

.legende-image__degrade.gauche {
    left: 0;
    background-image: url('../interface/legende-image__degrade_gauche.png');
}

.legende-image__degrade.droite {
    right: 0;
    background-image: url('../interface/legende-image__degrade_droite.png');
}
*/
/*
==============================================================
==============================================================
   H par défaut
==============================================================
==============================================================
*/

/*
==============================================================
   H1
==============================================================
*/

h1 {
    font-family: "Poppins", Sans-Serif;
    font-weight: 500;
    font-size: 2em;
    line-height: 1.2em;
    margin: 0;
    padding: 55px 20px 30px 0px;
    color: #000;
    background-color: #FFFFFF;
}
/* Titres post 21 */
.post21 h1,
.post21 h2,
.post21 h3,
.post21 h4 {
    font-family: "Poppins", Sans-Serif;
    font-weight: 400;
}
.post21 h1 {
    padding : 1em 0em;
    background-color: transparent;
    color: #000;
    font-size: 2.15em;
}

.post21 h1 b {
    font-weight: 600;
}

.post21 h2 {
    text-align: center;
    font-size: 1.79em;
    line-height: 1.45em;
    font-weight: 500;
}

.post21 h2 b {
    font-weight: 600;
}

.post21 h3 {
    font-size: 1.79em;
    line-height: 1.2em;
}

.post21 h4 {
    font-size: 0.85em;
    line-height: 1.45em;
    font-weight: 600;
}

.post21 h4 b {
    font-size: 2.1em;
    font-weight: 600;
    margin-right: 5px;
}
.post21 h4 span {
    font-size: 1.85em;
    font-weight: 400;
}

@media (max-width: 979px) {
    h1 {
        font-size: 1.5em;
        padding-left: 25px;
    }
}


h1 > span {
    display: inline-block;
    float: left;
}

@media (min-width: 980px) {
    h1 > span {
        margin-left: 0px;
    }
}

@media (max-width: 600px) {
    h1 > span {
        margin-left: -10px;
        margin-top: -10px;
    }
}

h1 .pict {
    display: none;
}

/* diminuer la taille du picto sur des écrans + petits */
@media (max-width: 979px) {
    /*
  h1 .pict {
    background-size: 200px;
    width: 40px;
    height: 40px;
  }
  */
}

h1 span.pict.noir {
    background-color: transparent;
}

h1 a.btn,
h1 a.btn:visited {
    float: right;
    font-size: 0.5em;
    margin-top: 0px;
    margin-right: 10px;
    font-weight: 500;
}

h1 a.action {
    font-size: 0.33em;
    font-weight: normal;
    margin-left: 5px;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   MISE EN FORME DE LISTES (en ligne, centrées...)
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
==============================================================
==============================================================
   LISTE ACTIONS RAPIDES
==============================================================
==============================================================
*/

.liste-act-rapides {
    margin: 1em 0;
    padding: 0;
}

.liste-act-rapides > ul,
[class*="p_"] .liste-act-rapides > ul {
    list-style: none;
    padding-left: 0;
    text-align: center;
    margin: 0;
}

.liste-act-rapides > ul > li {
    display: inline-block;
    margin: 0 5px;
}

.liste-act-rapides input {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    text-indent: -99999px;
    background-repeat: no-repeat;
    background-position: center;
}

.liste-act-rapides input.btnValid {
    background-image: url('../interface/picto-solo_coche-25.png');
}

.liste-act-rapides input.btnDelete {
    background-image: url('../interface/picto-solo_croix-25.png');
}

/*
==============================================================
==============================================================
   LISTE MINI PICTOS
==============================================================
==============================================================
*/

.liste_mini-pictos,
[class*="p_"] ul.liste_mini-pictos {
    list-style: none;
    margin-left: 0;
}

.liste_mini-pictos > li > [class^="icon20_"].noir,
.liste_mini-pictos > li > [class*="icon20_"].noir {
    opacity: 0.5;
}

/*
==============================================================
   CONTAINER
==============================================================
*/

body .liste_enligne,
.liste_enligne-base {
    padding: 0;
    margin: 0;
    list-style-type: none;
    *zoom: 1;
}

body .liste_enligne {
    margin: 0.5em 0;
}

body .liste_enligne:before,
body .liste_enligne:after,
.liste_enligne-base:before,
.liste_enligne-base:after {
    display: table;
    content: "";
    line-height: 0;
}

body .liste_enligne:after,
.liste_enligne-base:after {
    clear: both;
}

/*
==============================================================
   ITEM
==============================================================
*/

.liste_enligne > li,
.liste_enligne-base > li {
    float: left;
}

.liste_enligne > li {
    margin: 0.25em 0.5em;
}

/*
==============================================================
   CONTENU ITEMS
==============================================================
*/

.liste_enligne > li > a {
    display: block;
    padding: 9px 15px;
    text-decoration: none;
    font-weight: bold;
}

.p_standard > div .liste_enligne a,
.p_portail > div .liste_enligne a,
.p_info > div .liste_enligne a,
.p_fiche > div .liste_enligne a {
    background-color: #EDF0F3;
}

.p_standard > div:nth-child(2n+1) .liste_enligne a,
.p_fiche > div:nth-child(2n+1) .liste_enligne a,
.p_fiche > div:nth-child(2n+1) .liste_enligne a,
.p_info > div:nth-child(2n+1) .liste_enligne a {
    background-color: #ffffff;
}

.liste_enligne li a:hover,
.liste_enligne li a:active,
.liste_enligne li a:focus {
    color: #fff;
}

.p_fiche {
    background-color: #fff;
    float: none;
}

.p_fiche  .listActions {
    justify-content: center;
    margin: 2em 0;
}
/*
==============================================================
==============================================================
   CENTER BLOCK LIST
==============================================================
==============================================================
*/

.center-block-list {
    text-align: center;
}

.center-block-list > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*
==============================================================
==============================================================
   LISTE ELEMENTS ILLUSTRés (une illu + un petit texte, créée pour le haut de la home rubrique network)
==============================================================
==============================================================
*/

.lst-elmt-illu {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: space-around;
}

@media (max-width: 767px) {
    .lst-elmt-illu {
        flex-wrap: wrap;
    }
}

.lst-elmt-illu__item {
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .lst-elmt-illu__item {
        margin: 1em;
    }
}

@media (max-width: 767px) {
    .lst-elmt-illu__item {
        margin: 0.5em 0;
    }
}

.lst-elmt-illu__vignette {
    width: 100px;
    margin-right: 0.5em;
}

.lst-elmt-illu__texte {
    color: #6642b5;
}

.lst-elmt-illu__texte > h6 {
    margin: 0 0 0.25em;
    font-size: 1.5em;
    font-weight: 600;
    color: #0759a6;
}

.lst-elmt-illu__texte > p {
    margin: 0 0 0.25em;
}



/*
==============================================================
==============================================================
   LISTE PICTO-PUCES (une liste toute simple avec des pictos custom à la place des puces standards)
==============================================================
==============================================================
*/

.lst-picto-puce {
    list-style: none;
}

.lst-picto-puce li {
    margin: 0.2em 0;
}

.lst-picto-puce li span.notif {
    left: -1px;
    top: 0px;
}

.lst-picto-puce li a.inactif {
    text-decoration: none;
    font-style: italic;
    cursor: default;
}

.lst-picto-puce__item > a > [class^="icon"] {
    margin-right: 0.5em;
    vertical-align: bottom;
}

/*
==============================================================
==============================================================
   LISTE PICTO-TEXTE (pour des listes d'étapes en général)
==============================================================
==============================================================
*/

ol.lst-pct-txt {
    width: inherit;
    list-style: none;
    margin: 1em 0;
    padding: 0;
    counter-reset: args;
}

@media (min-width: 768px) {
    .elmt_cle ~ .lst-pct-txt {
        width: 48%;
    }

    .elmt_cle.etroit ~ .lst-pct-txt {
        width: 68%;
    }

    .elmt_cle.large ~ .lst-pct-txt {
        width: 100%;
        clear: both;
    }
}

@media (max-width: 767px) {
    .elmt_cle ~ .lst-pct-txt {
        clear: both;
    }
}

.lst-pct-txt > li {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    margin: 10px 0;
    text-align: left;
    min-height: 130px;
    counter-increment: args;
}

.lst-pct-txt__txt-ctnt::before {
    content: counter(args, decimal) ".";
    position: relative;
    font-weight: 700;

    line-height: 0.5em;
    font-size: 3em;
    color: rgba(0, 0, 0, 0.15);
    top: 15px;

}

@media (min-width: 600px) {

    .lst-pct-txt__img {
        position: absolute;
        max-width: 90px;
    }

    .lst-pct-txt__txt-ctnt {
        margin-left: 100px;
    }
}

/* fond */

.lst-pct-txt > li {
    background-color: #EDF0F3;
}

[class*="p_"] > div:nth-child(2n+1) .lst-pct-txt > li {
    background-color: #fff;
}

/*
==============================================================
==============================================================
    LISTE PROFIL

    /!\ ATTENTION ce module s'appelle "liste profil" suite à sa première utilisation sur la page Accreditation Annecy. Il est maintenant générique et utilisé ailleurs /!\
==============================================================
==============================================================
*/

ul.liste_profil {
    display: flex;
    padding: 0;
    list-style-type: none;
    text-align: center;
    margin: 1em -1%;
    letter-spacing: -0.31em;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.liste_profil > li {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    margin: 5px;
    vertical-align: top;
    padding: 2.5em;
    box-sizing: border-box;
    letter-spacing: normal;
    text-align: center;
    background-color: #e3e6e9;
    min-height: 322px;
    margin-bottom: 50px;
}

[class*="p_"] > div:nth-child(2n) .liste_profil > li {
    background-color: #E3E6E9;
}

[class*="p_"] > div:nth-child(2n+1) .liste_profil > li {
    background-color: #ffffff;
}

@media screen and (min-width: 1200px) {
    .liste_profil > li {
        width: calc((100% - 30px) / 3);
    }

    .liste_profil > li.liste-profil__item_dbl {
        width: calc((100% - 20px) / 2);
    }

    .liste_profil > li.liste-profil__item_trpl {
        width: calc((100% - 20px) * 3 / 4);
    }

    .liste_profil.tiers > li {
        width: calc((100% - 30px) / 3);
    }
}

@media screen and (max-width: 1199px ) and (min-width: 768px ) {
    .liste_profil > li {
        width: calc((100% - 30px) / 3);
    }

    .liste_profil > li.liste-profil__item_dbl,
    .liste_profil > li.liste-profil__item_trpl {
        width: calc((100% - 20px) * 2 / 3);
    }
}

@media screen and (max-width: 767px ) and (min-width: 500px ) {
    .liste_profil > li {
        width: calc((100% - 20px) / 2);
    }

    .liste_profil > li.liste-profil__item_trpl {
        width: calc(100% - 10px);
    }
}

@media screen and (max-width: 499px) {
    .liste_profil > li {
        width: calc(100% - 10px);
    }
}

.liste_profil > li > img {
    max-width: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (min-width: 1200px) {
    .liste_profil > li.liste-profil__item_trpl > img {
        width: calc((100% - 40px) / 3);
    }
}

@media screen and (min-width: 768px ) {
    .liste_profil > li.liste-profil__item_dbl > img {
        width: calc((100% - 30px) / 2);
    }
}

@media screen and (max-width: 1199px ) and (min-width: 500px ) {
    .liste_profil > li.liste-profil__item_trpl > img {
        width: calc((100% - 30px) / 2);
    }
}

@media screen and (min-width: 500px) {
    .liste_profil > li.liste-profil__item_dbl > img,
    .liste_profil > li.liste-profil__item_trpl > img {
        float: right;
        margin-left: 20px;
    }
}

.liste_profil > li > :nth-child(3):not(.liste-act-rapides) {
    padding-top: 0.5em;
}

.liste_profil > li > p,
.liste_profil > li > ul > li {
    margin: 0.25em 0;
    text-align: left;
    z-index: 2;
}

.liste_profil > li > a {
    box-sizing: border-box;
    z-index: 2;
    position: absolute;
    bottom: -20px;
    width: 50%;
    right: 0;
}

/*
.liste_profil > li > a:last-child {
  position: relative;
  bottom: -1em;
  margin-left: -1em;
  margin-right: -1em;
  width: calc(100% + 2em);
}
*/
.liste_profil > li > ul {
    margin: 0 0 0 20px;
    padding: 0;
    line-height: 1.6em;
    width: 100%;
}

.liste_profil > li > ul:not(.liste_mini-pictos) {
    list-style-type: square;
}

.liste_profil > li > h4 {
    margin: 0;
    padding: 0 0 0.5em;

    font-size: 1.8em;
    line-height: 1em;
    text-align: left;
    z-index: 2;
    text-transform: uppercase;
    margin-top: 50px;
}

/*
==============================================================
==============================================================
    LISTE PARAMETRES

    initialement designée pour la page désabonnemnt aux campagnes mails
==============================================================
==============================================================
*/

.lst-param {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* lignes */

.lst-param__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.75em;
    margin-top: 1px;
    background-color: #ededed;
}

.lst-param__item.is-not-checked {
    opacity: 0.6;
}

.citia > .lst-param__item.titre {
    background-color: #0e98d6;
}

.acy > .lst-param__item.titre {
    background-color: #123479;
}

.fb > .lst-param__item.titre {
    background-color: #f49100;
}

/* lignes titre */

.lst-param__item.titre {
    display: block;

    font-size: 1.5em;
    color: #fff;
}

.lst-param__item.titre > img {
    height: 40px;
    margin-right: 10px;
}

/* contenu des lignes */

.lst-param__item > p {
    color: #7a7d80
}

.lst-param__item > p > strong {
    color: #434649;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   MENU ARCHIVE aka #menu_n4
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#menu_n4 {
    padding: 0;
    margin-top: 0;
    background-color: #fff;
}

#menu_n4 h4 {
    margin: 15px 10px;
    padding: 0.25em;
    color: #434649;
}

/*
==============================================================
   CONTAINER
==============================================================
*/

#menu_n4 ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

/*
==============================================================
   ITEM
==============================================================
*/

#menu_n4 ul li {
    margin: 1px 0;
}

/*
==============================================================
   CONTENU ITEMS
==============================================================
*/

#menu_n4 ul li a {
    display: block;
    padding: 7px 20px;
    text-decoration: none;
    font-weight: bold;
    background-color: transparent;
    transition: all 0.15s linear 0s;
}

#menu_n4 ul li a:hover, #menu_n4 ul li a.selected {
    color: #fff;
}

#menu_n4 ul li a:active,
#menu_n4 ul li a:focus {
    color: #fff;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   FORM
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.form {
    *zoom: 1;
}

[class*="span"]:before,
[class*="span"]:after,
.form:before,
.form:after {
    display: table;
    content: "";
    line-height: 0;
}

[class*="span"]:after,
.form:after {
    clear: both;
}

.coul_erreur {
    color: #C20505;
    font-weight: bold;
}

.coul_erreur label {
    color: #C20505;
    font-weight: bold;
}

/*
==============================================================
==============================================================
   MINI FORM >>> pour les petits formulaires intégrer à des pages standards
==============================================================
==============================================================
*/
div.mini-form, /* !!!! patch !!!!*/
.mini-form {
    clear: both;
    background-color: rgba(0, 0, 0, 0.06);
    padding: 2em 3%;
    margin: 2em 0;
}

.mini-form > p {

}

.col_form p label, /* !!!! patch !!!!*/
.mini-form label {
    font-size: 1em;
    line-height: inherit;
}

.mini-form > h4 {
    margin: 0 0 0.5em;
    padding: 0;
    font-size: 2em;
    color: #9c9ea1;

    font-weight: 600;
    font-style: italic;
}

/*
==============================================================
==============================================================
    QUESTIONNAIRE RAPIDE

    initialement designée pour la page désabonnemnt aux campagnes mails
==============================================================
==============================================================
*/
#raison_desabonnement button[type="submit"] {
    float: none;
}

.quest-rapide > h3, .quest-rapide > p {
    margin: 0 !important;
}

.quest-rapide p.choix {
    padding-top: 4px;
    padding-bottom: 4px;
}

.quest-rapide > p.choix input[type="checkbox"] + label:before {
    top: 5px;
}

.quest-rapide > p.choix input[type="checkbox"] + label:after {
    top: 9px;
}

.quest-rapide > p.choix.rep-libre input[type="checkbox"] + label:before {
    top: 15px;
}

.quest-rapide > p.choix.rep-libre input[type="checkbox"] + label:after {
    top: 19px;
}

.quest-rapide > .btnvalid {
    text-align: right;
}

/*
==============================================================
==============================================================
   CONNECTION
==============================================================
==============================================================
*/

/*
/!\ /!\ PATCH /!\ /!\

Style et CSS des formulaires à revoir :
  - prévoir deux couleurs de fond : gris et couleur marque
  - re-réfléchir la position des labels
  - cleaner les imbriquements et les marges des différentes parties du formulaire
*/

.form__connexion.form button[type="submit"] {
    margin-left: 0;
    margin-right: 0;
}

.form__connexion p,
.form__connexion .log_action {
    margin: 1em 0;
}

.form__connexion p.mess_info {
    background-color: #000;
    color: #ffe42d;
    padding : 10px;
    margin: 0 20% 0 0px;
}

.form__connexion p.mess_info a {
    color: #ffe42d;
}

.form__connexion label {
    margin: 0.2em 0;
}

@media screen and (max-width: 599px) {
    .form__connexion .chp_obl {
        padding-left: 10px;
    }

    .form__connexion.form input {
        width: 97%;
    }

    .form__connexion label {
        display: block;
    }
}

.form__connexion .log_action > p {
    margin-top: 0;
    margin-bottom: 0;
}

.form__connexion .p_message.form__ligne__2-3 {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1em;
    display: none;
}

.form__connexion .choix label {
    padding-left: 0;
}

.form__connexion .choix input[type="checkbox"] + label:before {
    left: 5px;
}

.form__connexion .choix input[type="checkbox"]:checked + label::after {
    left: 9px;
}

.form__connexion.form button[type="submit"] {
    margin: 0;
    float: none;
}

@media screen and (min-width: 600px) {
    .form__connexion .form__ligne__3-3 input {
        width: 50%;
    }
}

@media screen and (min-width: 600px) {
    .form__connexion .champ__intitule {
        width: 10%;
        display: inline-block;
        text-align: right;
    }

    .form__connexion .champ__intitule.chp_obl {
        padding-right: 2%;
    }

    .form__connexion .form__ligne__2-3 {
        margin-left: 5%;
        padding-left: 4px;
    }
}

.form__connexion [class*="champ__"] {
    font-size: 1.17em;
}

.form__connexion label,
.form__connexion .mdp_perdu {
    color: rgba(255, 255, 2550, 0.8);
}

/*
.form__connexion .btn.btn1:hover,
.form__connexion .btn.btn1:focus {
    background-color: rgba(0,0,0,0.17);
}

.form__connexion .btn.btn1:active {
    background-color: rgba(0,0,0,0.31);
}
*/
/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   MODALE
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.modale {
    /*position: relative;*/
    z-index: 60;
}

/*
==============================================================
==============================================================
   FOND
==============================================================
==============================================================
*/

.page-obligatoire .modale__fond {
    left: 0;
    z-index: 10;
}

.modale__fond {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10;
}

/* style */

.modale__fond {
    background-color: rgba(53, 56, 59, 0.75);
}

/*
==============================================================
==============================================================
   FENETRE
==============================================================
==============================================================
*/

.modale__fenetre__container {
    position: relative;
}

@media screen and (min-width: 1024px) {
    .page-obligatoire .modale__fenetre__container {
        top: 0;
    }

    .modale__fenetre__container {
        top: 90px;
    }
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
    .modale__fenetre__container {
        width: 90%;
        top: 40px;
    }
}

@media screen and (min-width: 600px) {
    .page-obligatoire .modale__fenetre__container {
        margin-left: 0;
    }

    .modale__fenetre__container {
        float: none;
        margin: auto;
    }
}

@media screen and (max-width: 599px) {
    .modale__fenetre__container {
        top: 50px;
    }
}

.page-obligatoire .modale__fenetre {
    position: relative;
}

.modale__fenetre {
    position: absolute;
    z-index: 11;
}

/* style */

.modale__fenetre {
    background-color: #ffffff;
}

/*
==============================================================
==============================================================
   PAGE CONTENT
==============================================================
==============================================================
*/

.modale__page-content > article {
    padding: 2.5em 4%;
}

/* style */

.modale__page-content > article {
    color: rgba(0, 0, 7, 0.58);
}

.modale__page-content h1 {
    line-height: 1em;
    height: inherit;
    background-color: transparent;
}

/*
==============================================================
   INVARIANTS
==============================================================
*/

.modale__invariants {
    padding: 2.5em 4%;
}

@media screen and (max-width: 767px) {
    .modale__invariants {
        padding: 1em;
    }
}

/* style */

.modale__invariants {
    background-color: rgba(0, 0, 30, 0.08);
}

/*
==============================================================
   CHAPEAU
==============================================================
*/

/* style */

.modale__chapeau {
    font-style: italic;

    color: rgba(0, 0, 0, 0.54);
}

@media screen and (min-width: 600px) {
    .modale__chapeau {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 599px) {
    .modale__chapeau {
        font-size: 1.3em;
    }
}

/*
==============================================================
   NEXT STEP
==============================================================
*/

.modale__next-step {
    text-align: right;
    line-height: 3em;
}

/*
==============================================================
==============================================================
   MODULE ETAPES
==============================================================
==============================================================
*/

.modale__etapes__container {
    text-align: center;
}

.modale__etapes {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: inline-block;
}

.modale__etape__item__content {
    display: block;
    padding-left: 1em;
    padding-right: 1em;
}

.modale__etape__item__content > p {
    margin: 0;
}

.modale__etape__item.actif {
    font-weight: bold;
}

/* style */

a.modale__etape__item__content {
    text-decoration: none;
}

.modale__etape__item .numero-etape_solo_50 {
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.77);
}

.modale__etape__item.actif > .numero-etape_solo_50 {
    background-color: rgba(0, 0, 0, 0.57);
    color: #ffffff;
}

/*
==============================================================
   DECLINAISON ETAPES DANS LES INVARIANTS
==============================================================
*/

@media screen and (min-width: 768px) and (max-width: 979px) {
    .modale__invariants .modale__etape__item {
        float: left;
        width: 30%;
        margin-left: 3%;
    }

    .modale__invariants .modale__etape {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .modale__invariants .modale__etape__item {
        display: inline-block;
        width: inherit;
    }

    .modale__invariants .modale__etape__item__content {
        display: none;
    }
}

.modale__invariants .numero-etape_solo_50 {
    float: left;
    margin-right: 0.25em;
}

/*
==============================================================
   DECLINAISON SUR L'ACCUEIL DE LA MODALE
==============================================================
*/

@media screen and (max-width: 979px) {
    .modale__etapes_accueil .modale__etape__item {
        margin-bottom: 10px;
    }
}

.modale__etapes_accueil .modale__etape__item__content > img {
    opacity: 0.19;
}

/* style */

.modale__etapes_accueil .modale__etape__item__content {
    padding-top: 1em;
    padding-bottom: 1em;
}

.modale__etapes_accueil .modale__etape__item__content {
    background-color: #FFFFFF;
}

.modale__etapes_accueil .modale__etape__item__content {
    font-size: 1.5em;
    color: rgba(0, 0, 0, 0.45);

}

/* interactivité */

.modale__etapes_accueil a.modale__etape__item__content:hover > img,
.modale__etapes_accueil a.modale__etape__item__content:focus > img {
    opacity: 0.30;
}

.modale__etapes_accueil a.modale__etape__item__content:active > img {
    opacity: 0.40;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   MODALE PREMIERE CONNEXION
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/*
==============================================================
==============================================================
   ACCUEIL
==============================================================
==============================================================
*/

.page-obligatoire {
    margin-left: 10px;
}

.premiere-connexion__accueil {
    text-align: center;
}

/* style */

.premiere-connexion__accueil {
    background-color: #ededed;
}

/*
==============================================================
   APERCU PHOTOS
==============================================================
*/

.premiere-connexion__photo__apercu {
    float: left;
}

@media screen and (min-width: 768px) {
    .premiere-connexion__photo__apercu {
        margin-right: 2.5em;
    }
}

@media screen and (max-width: 767px) {
    .premiere-connexion__photo__apercu {
        width: 30%;
        margin-right: 1.5em;
        margin-bottom: 0.5em;
    }
}

/*
==============================================================
   CROPPER
==============================================================
*/

.premiere-connexion__photo__cropper {
    display: block;
    margin: auto;
}

.premiere-connexion__photo02 .modale__next-step {
    text-align: center;
}

/*
==============================================================
   PUBLICATION EMAIL TELEPHONE
==============================================================
*/

.premiere-connexion__email .premiere-connexion__question ul.liste_radio,
.premiere-connexion__telephone .premiere-connexion__question ul.liste_radio {
    padding: 0 1em;
    border: none;
    width: 100%;
}

.premiere-connexion__email ul.liste_radio > li,
.premiere-connexion__telephone ul.liste_radio > li {
    display: block;
    margin: 0.5em 0;
}

.premiere-connexion__question {
    padding: 1em;
    background-color: rgba(0, 0, 30, 0.08);
}

.premiere-connexion__question .questionITW {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.premiere-connexion__ajout-num-telephone input {
    display: inline-block;
}

.premiere-connexion__ajout-num-telephone input:first-child {
    width: 40px;
}

.premiere-connexion__ajout-num-telephone input:last-child {
    width: 150px;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   HEADER & TOP-BAR
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
/*
header {
    position: relative;
    width: 100%;
    background: #fff;
    z-index: 10;
}

*/

header a {
    text-decoration : none;
}

header .container::before,
header .container::after {
    content: initial;
    display: initial;
}

@media screen and (min-width: 768px) {
    .page-content {
        margin-top: 115px;
    }
}

.page-content.lite {
    margin-top: 0;
}

#menu_principal {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/*
==============================================================
==============================================================
   TOP-BAR DESKTOP
==============================================================
==============================================================
*/

@media screen and (min-width: 768px) {
    .top-bar_desktop {
        position: relative;
    }
}

@media screen and (min-width: 980px) {
    .top-bar_desktop {
        padding-top: 10px;
    }

    ul.top-bar__n1 {
        margin-left: 10px;
        margin-right: 5px;
    }

    ul.top-bar__n1b {
        margin-left: 5px;
        margin-right: 17px;
    }
}

@media screen and (min-width: 768px) {
    .top-bar_desktop > .container {
        padding-bottom: 10px;
    }

    ul.top-bar__n1 {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .top-bar__menu__item.n1.right {
        flex-grow: 2;
        text-align: right;
    }

    ul.top-bar__n1b {
        clear: both;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    ul.top-bar__n1 {
        margin-left: 20px;
        margin-right: 10px;
    }

    ul.top-bar__n1b {
        margin-left: 10px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 767px) {
    .top-bar_desktop {
        padding-bottom: 5px;
    }
}

/*
==============================================================
==============================================================
   TOP-BAR EN-TÊTE SITE (LOGO & DATES)
==============================================================
==============================================================
*/

.top-bar__en-tete-site {
    float: left;
}

@media screen and (min-width: 1200px) {
    .top-bar__en-tete-site {
        margin: 0 10px;
    }

    .top-bar__en-tete-site > .en-tete-site__logo {
        float: left;
    }

    .top-bar__en-tete-site > .en-tete-site__dates {
        float: left;
    }
}

@media screen and (max-width: 979px) {
    .top-bar__en-tete-site {
        margin: 5px 5px 5px 15px;
    }
}

/*
------------------------
   dates
------------------------
*/

@media screen and (min-width: 1200px) {
    .en-tete-site__dates {
        font-size: 1.5em;
        margin-top: 18px;
    }
}

@media screen and (max-width: 1199px) {
    .en-tete-site__dates {
        font-size: 1.2em;
        padding-left: 10px;
        line-height: 1em;
        margin-top: 0;
    }
}

/*
==============================================================
==============================================================
   TOP-BAR - FONCTIONNALITES
==============================================================
==============================================================
*/

.top-bar__fonctionnalites {
    padding-left: 0;
    margin: 0;
}

@media screen and (min-width: 980px) {
    .top-bar__fonctionnalites {
        margin: 10px 0 0 0;
    }
}

@media screen and (max-width: 979px) {
    .top-bar__fonctionnalites {
        margin: 15px 22px 0 0;
    }
}

@media screen and (min-width: 768px) {
    .top-bar__fonctionnalites {
        float: right;
    }
}

@media screen and (max-width: 767px) {
    .top-bar__fonctionnalites {
        padding: 7px;
    }
}

.top-bar__fonctionnalites__item {
    display: block;
}

@media screen and (min-width: 768px) {
    .top-bar__fonctionnalites__item {
        float: right;
        margin-left: 10px;
    }

    .top-bar__fonctionnalites__item:last-child {
        line-height: 1.15em;
    }
}

@media screen and (max-width: 767px) {
    .top-bar__fonctionnalites__item {
        clear: both;
        margin-bottom: 10px;
        margin-top: 10px
    }

    .top-bar__fonctionnalites__item:first-child {
        margin-top: 0;
    }

    .top-bar__fonctionnalites__item:last-child {
        margin-bottom: 0;
    }
}

/*
------------------------
   form recherche spécial barre nav
------------------------
*/

input.form-recherche__champ, button[type="submit"].form-recherche__ok {
    float: left;
}

input.form-recherche__champ {
    border: none;
    display: block;
    padding: 4px 4px;
    width: inherit;
}

@media screen and (max-width: 767px) {
    input.form-recherche__champ {
        width: 70% !important;
    }
}

button[type="submit"].form-recherche__ok {
    margin: 0;
    padding: 4px;
}

/* style */

button[type="submit"].form-recherche__ok {
    background-color: rgba(0, 0, 0, 0.17);
}

button[type="submit"].form-recherche__ok:hover,
button[type="submit"].form-recherche__ok:focus {
    background-color: rgba(0, 0, 0, 0.31);
}

button[type="submit"].form-recherche__ok:active {
    background-color: rgba(0, 0, 0, 0.42);
}

/*
------------------------
   choix langue
------------------------
*/

.picto-lien {
    bottom: 0;
}

.choix-langue,
.choix-langue__item {
    margin: 0;
    padding-left: 0;
}

.choix-langue__item {
    float: left;
}

.choix-langue__item__drapeau {
    margin: 0;
}

.switchLangueMobile {
    text-align: center;
}

.switchLangueMobile a {
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    padding: 0.1em 0.5em;
}

.switchLangueMobile a:hover {
    background-color: #123479;
}

/* interactivité */

.choix-langue__item > a > .choix-langue__item__drapeau {
    opacity: 0.5;
}

.choix-langue__item > a > .choix-langue__item__drapeau:hover,
.choix-langue__item > a > .choix-langue__item__drapeau:focus {
    opacity: 0.78;
}

.choix-langue__item > a > .choix-langue__item__drapeau:active {
    opacity: 1;
}

/*
------------------------
   connection
------------------------
*/
#menu_network {
    padding: 11px 10px 13px 20px;
    position: absolute;
    bottom: -46px;
    right: -5px;
}

.network #menu_network {
    bottom: -67px;
}

#menu_network a {
    display: block;
    color: #fff;
    text-align: right;
}

@media screen and (max-width: 767px) {
    #menu_network {
        position: fixed;
        bottom: 10px;
        right: 20px;
    }


}

.acces-network__title,
.acces-network__user-connexion {
    display: block;
}

@media screen and (min-width: 768px) {
    .acces-network__title,
    .acces-network__user-connexion {
        float: right;
    }

    .acces-network__user-connexion {
        clear: both;
    }
}

.acces-network__title {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.125em;
    font-weight: 600;
}

.notif {
    background: red;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    padding: 0px;
    text-align: center;
    font-size: 0.84em;
    font-weight: bold;
    position: relative;
    top: -8px;
    left: 12px;
    z-index: 20;
}

.suggestions .notif {
    position: absolute;
    left: 27%;
    top: 12%;
    border-radius: 100%;
    width: 20px;
    height: 20px;
}

.top-bar__menu-network a span.notif {
    left: 58px;
    top: 12px;
    position: absolute;
    z-index: 1000;
    background-color: #FF0000;
    width: 17px;
    height: 17px;
    line-height: 1.5em;
}

/*
==============================================================
==============================================================
   TOP-BAR - MENU
==============================================================
==============================================================
*/

.top-bar__n1,
.top-bar__n1b,
.top-bar__n2 {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* généralités */
.top-bar__menu__item > a,
.top-bar__menu__item > a:focus,
.top-bar__menu__item > a:hover,
.top-bar__menu__item > a:active,
.top-bar__menu__item > a:visited {
    display: inline-block;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
    font-size: 1.125em;
    color: #FFFFFF;

    line-height: 1em;
}

/* spécificités n1, n1b  et n2 */
.top-bar__menu__item.n1 > a,
.top-bar__menu__item.n1b > a,
.top-bar__menu__item.n2 > a {
    text-transform: uppercase;
    font-weight: 600;
    padding-top: 5px;
    padding-bottom: 5px;
}

@media screen and (min-width: 980px) {
    .top-bar__menu__item.n1 > a {
        font-size: 1.3em;
    }
}

@media screen and (max-width: 767px) {
    .top-bar__menu__item.n1 > a {
        display: block;
        padding: 13px !important;
    }

    .top-bar__fonctionnalites__item ul {
        padding-left: 15px !important;
    }
}

.top-bar__menu__item.n2 > a {
    font-size: 1.3em;
}

/* spécificités n2b */
.top-bar__menu__item.n2b > a {
    padding: 10px 0;
    font-size: 1em;
}

@media screen and (max-width: 340px) {
    .top-bar__n2 {
        font-size: 0.9em;
    }
}

/* interactivité */
.top-bar__menu__item > a:hover,
.top-bar__menu__item > a:focus {
    background-color: rgba(0, 0, 0, 0.17);
}

.top-bar__menu__item > a:active {
    background-color: rgba(0, 0, 0, 0.31);
}

.top-bar__menu__item > a.actif,
.top-bar__menu__item > a.actif:hover,
.top-bar__menu__item > a.actif:focus,
.top-bar__menu__item > a.actif:active {
    background-color: #000;
    border-bottom: 1px solid #fff;
}

/*
==============================================================
==============================================================
   TOP-BAR - EXTENSION
==============================================================
==============================================================
*/

@media screen and (max-width: 767px) {
    .top-bar__extension__header,
    .top-bar__extension__content {
        margin-right: 10px;
        margin-left: 10px;
        justify-content: flex-start !important;
    }

    .top-bar__extension__header {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .top-bar__n2 {
        margin-top: 15px;
    }

    .top-bar__menu__item.n2b {
        margin-left: 10px;
    }

    .choix-langue__item {
        margin-left: 15px !important;
        margin-right: 0 !important;
    }
}

/*
==============================================================
   TOP-BAR - EXTENSION - HEADER
==============================================================
*/

@media screen and (min-width: 768px) {
    .top-bar__extension_desktop .top-bar__extension__header {
        display: none;
    }
}

.top-bar__extension__header > .btn-retour,
.top-bar__rappel_n-1 {
    float: left;
}

/* style */

.top-bar__extension__header > .btn-retour {
    padding: 7px;
    background-color: transparent;
    opacity: 0.70;
}

.top-bar__rappel_n-1 {
    margin: 0;
    padding: 7px;
    text-decoration: none;
    font-size: 1.125em;
    line-height: 20px;
    color: #FFFFFF;

    text-transform: uppercase;
    font-weight: 600;
}

@media screen and (max-width: 320px) {
    .top-bar__rappel_n-1 {
        font-size: 1.2em;
    }
}

/* interactivité */

.btn-retour:hover,
.btn-retour:focus {
    opacity: 0.85;
}

.btn-retour:active {
    opacity: 1;
}

/*
==============================================================
==============================================================
   TOP-BAR - EXTENSION - DESKTOP
==============================================================
==============================================================
*/

.top-bar__extension_desktop {
    min-height: 0;
}

/* style */

@media screen and (min-width: 768px) {

    body.actifMenu > .container {
        opacity: 0.2;
    }

    .top-bar__extension_mobile__p2 {
        display: none;
        margin: 10px 10px 20px;
    }

    .top-bar__extension_mobile__p2.actif {
        display: block;
    }

    .top-bar__n2 {
        width: 25%;
        float: left;
        margin-right: 10%;
        margin-bottom: 30px;
        margin-top: 10px;
    }
}

/*
==============================================================
==============================================================
   TOP-BAR - EXTENSION - MOBILE
==============================================================
==============================================================
*/

/*
==============================================================
   STRUCTURE
==============================================================
*/

/* propriétés générales des panneaux qui apparaissent par la droite */
@media screen and (max-width: 767px) {
    .top-bar__extension_mobile__p1,
    .top-bar__extension_mobile__p2 {
        position: fixed;
        z-index: 15;
        height: 100%;
        overflow: scroll;
        top: 0;
        transition: left 0.15s ease-in 0.15s;
    }

    /* propriétés du premier panneau (menu secondaire et principal) */
    .top-bar__extension_mobile__p1 {
        width: 80%;
        left: 110%;
    }

    /* propriétés du second panneau (principal n2 et n2b) */
    .top-bar__extension_mobile__p2 {
        display: block;
        left: 110%;
        width: 70%
    }

    /* propriétés des panneaux actifs */
    body.actifMenu {
        right: 80%;
    }

    body.actifMenu > .container {
        opacity: 0.2;
    }

    /* Menus déplacements */
    .actifMenu.mob_menu .top-bar__extension_mobile__p1,
    .actifMenu.mob_menu_network .top-bar__menu-network__wrap {
        left: 20%;
    }

    .actifMenu .btn-deploy-menu {
        right: 80%;
    }

    .top-bar__extension_mobile__p2.actif {
        left: 30%;
    }

    #menu_principal {
        display: block;
    }

    .top-bar__n1b li {
        margin: 5px 0;
    }

    /* Menu ntwk mobile */
    .top-bar__btn-deploy-menu_network {
        top: 47px;
        transition: right .15s ease-in .15s;
    }
    .top-bar__menu-network__wrap {
        position: fixed;
        z-index: 15;
        width: 80%;
        height: 100%;
        overflow-y: auto;
        transition: left .15s ease-in .15s;
        top: 0;
        left: 110%;
    }


    .top-bar__menu-network__wrap ul {
        flex-direction: column;
    }
    .top-bar__menu-network a {
        padding: 10px;
    }
    .top-bar__menu-network a span {
        display: inline-block;
        margin-right: 12px !important;
    }
    .top-bar__menu-network a span.notif {
        left: 30px;
    }

    .mob_menu .top-bar__extension_mobile__p1,
    .mob_menu .top-bar__extension_mobile__p2,
    .mob_menu_network .top-bar__menu-network__wrap {
        z-index: 16;
    }
}

/*
==============================================================
==============================================================
   TOP-BAR - CONNECTION
==============================================================
==============================================================
*/

@media screen and (max-width: 767px) {
    .top-bar__form__connexion {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   PAGE HEADER
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
==============================================================
   PAGE-HEADER_HOME-RUBRIQUE
==============================================================
*/

.page-header_home-rubrique {
    padding: 0;
    margin-bottom: 10px;
}

.page-header_home-rubrique > .titre-page {
    padding-right: 0;
    padding-left: 0;
}

/* style */

.page-header_home-rubrique {
    background-color: #ffffff;
}

.page-header_info {
    background-color: #fff;
}

.page-header_info .elmt_cle.large {
    margin-right: 0;
}

.page-header_info .elmt_cle.large h6 {
    position: initial;
    margin-top: 10px;
}

/*
==============================================================
==============================================================
   TITRE PAGE
==============================================================
==============================================================
*/

.titre-page {
    line-height: 1em;
    padding: 15px;
}

.titre-page > .pict {
    margin-left: 0;
}

@media (max-width: 979px) {
    .titre-page span {
        display: none;
    }
}

.titre-page__baseline {
    margin-top: 0;
    padding-bottom: 20px;
    font-size: 1.5em;
}

/*
@media screen and (min-width: 980px) {
    .titre-page__baseline {
        margin-left: -45px;
    }
}
*/
/*
==============================================================
   SPECIAL HOME RUBRIQUE
==============================================================
*/
/*
.page-header_home-rubrique > .titre-page {
    text-align: center;
    font-size: 4.5em;
}

.page-header_home-rubrique > .titre-page > span {
    float: none;
    height: 60px;
    top: -2px;
    position: relative;
}

.page-header_home-rubrique > .titre-page__baseline {
    text-align: center;
}*/
.page-header_home-rubrique {
    display: flex;
    width: 100%;
    height: 100%;
}

.page-header_home-rubrique div {
}

.title_home-rubrique {
    background-color: #fff;
    width: 40%;
}

.title_home-rubrique h1 {
    background-color: transparent;
    padding-bottom: 0;
    padding-right: 0;
}

.title_home-rubrique h1 span {
    top: -5px;
}

.title_home-rubrique p {
    margin: 0 0 0 80px;
}

.accr_home-rubrique {
    height: 226px;
    background: url("../interface/imageFlecheHomeRub.png") no-repeat;
    z-index: 20;
    width: 28%;
    display: flex;
    align-items: center;
    text-align: right;
}

.accr_home-rubrique p {
    font-weight: bold;
    font-size: 1.35em;
    margin-left: 0px;
    /* padding-right: 80px;*/
    color: #000;
}

.video_home-rubrique {
    margin-top: 20px;
}

/* Version simple */
.page-header_home-rubrique.simple {
    background: none;
    background-color: #fff;
    display: inherit;
}

.page-header_home-rubrique.simple > .titre-page {
    text-align: center;
    font-size: 4.5em;
}

.page-header_home-rubrique.simple > .titre-page > span {
    float: none;
    height: 60px;
    top: 4px;
    position: relative;
}

.page-header_home-rubrique.simple > .titre-page__baseline {
    text-align: center;
}

@media screen and (max-width: 1199px ) and (min-width: 980px ) {
    .title_home-rubrique {
        width: 40%;
    }

    .accr_home-rubrique {
        height: 226px;
        width: 324px;
    }

    .video_home-rubrique {
        right: 20px;
        top: 110px;
    }
}

@media screen and (max-width: 979px ) and (min-width: 768px ) {
    .title_home-rubrique {
        width: 30%;
    }

    .accr_home-rubrique {
        height: 226px;
        width: 324px;
        background-position: -40px 0;
    }

    .video_home-rubrique {
        right: 20px;
        top: 110px;
    }
}

@media (max-width: 767px) {

    .title_home-rubrique {
        width: 50%;
    }

    .title_home-rubrique p {
        margin-left: 40px;
    }

    .accr_home-rubrique {
        display: none;
    }

    .video_home-rubrique {
        right: 0px;
        top: 0px;
        width: 50%;
        padding: 20px;
        position: relative;
    }
}

@media (max-width: 600px) {
    .title_home-rubrique {
        width: 100%;
        float: none;
    }

    .title_home-rubrique h1 {
        padding: 10px 15px;
    }

    .title_home-rubrique h1 span {
        display: none;
    }

    .title_home-rubrique p {
        margin-left: 15px;
        padding-bottom: 10px;
    }

    .accr_home-rubrique {
        display: none;
    }

    .video_home-rubrique {
        right: 0px;
        top: 0px;
        width: 100%;
        padding: 20px;
        position: relative;
        float: none;
    }
}



/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   FOOTER SITE
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/



/*
==============================================================
==============================================================
   LOGOS PARTENAIRES
==============================================================
==============================================================
*/

.logos-partenaires {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.logos-partenaires__list {
    text-align: center;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.logos-partenaires__item {
    display: inline-block;
    position: relative;
    margin: 5px 0.6em;
}

.logos-partenaires__item .separateurVertical {
    width: 1px;
    height: 35px;
    display: block;
    position: absolute;
    top: -15px;
    background-color: #9b9b9b;
}

.logos-partenaires__item > a {
    color: #000;
    font-family: "Roboto";
    font-weight: 500;
}
.logos-partenaires__item > a > img {
    height: 70px;
}

.logos-partenaires__titre {
    font-size: 1.7em;
    font-weight: normal;

    color: #898c8f;
    display: none;
}

@media screen and (max-width: 600px) {
    .logos-partenaires__titre {
        float: none;
    }
}

@media screen and (max-width: 1200px) and (min-width: 600px) {
    .logos-partenaires__titre {
        height: 35px;
        padding-top: 35px;
        line-height: 0;
    }
}

/*
==============================================================
==============================================================
   BOTTOM BAR
==============================================================
==============================================================
*/

.bottom-bar {
    padding: 100px 0 50px 0;
}

.bottom-bar > .container > .row {
    display: flex;
    align-items: flex-start;
}

@media (max-width: 979px) {
    .bottom-bar > .container > .row {
        flex-wrap: wrap;
    }

    .bottom-bar {
        padding-top: 20px;
    }

}



.bottom-bar .span2 {
    float: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.2em 1em;
    margin-right: 0;
    box-sizing: border-box;
}

@media (max-width: 979px) {
    .bottom-bar .span2 {
        padding: 0.2em;
    }
}

.bottom-bar [class*="span"]:first-child {
    border-left: 0;
}

@media (min-width: 1200px) {
    .bottom-bar .span2 {
        width: 180px;
    }
}

@media (max-width: 1199px) and (min-width: 980px) {
}

@media (max-width: 979px) and (min-width: 400px) {

    .bottom-bar > .container > .row {
        padding: 0 2%;
    }

    .bottom-bar [class*="span"] {
        width: 48%;
        float: left;
        border: none;
        margin-left: 1%;
        margin-right: 1%;
    }
}

@media (max-width: 399px) {
    .bottom-bar [class*="span"],
    .bottom-bar [class*="span"]:first-child {
        width: 98%;
        float: none;
        border: none;
    }
}

/*
==============================================================
   STYLE GENERAUX
==============================================================
*/

.bottom-bar h5 {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    margin: 0 0 20px 0;
}

.bottom-bar .menu {
    list-style-type: none;
    padding-left: 0;
    margin: 0.2em 0 0.5em;
    z-index: 3;
    position: relative;
}

@media (max-width: 979px) {
    .bottom-bar .menu:before,
    .bottom-bar .menu:after {
        display: table;
        content: "";
        line-height: 0;
    }

    .bottom-bar .menu:after {
        clear: both;
    }
}

[class*="span"]:after {
    clear: both;
}

@media (max-width: 979px) {
    .bottom-bar .menu li {
        float: left;
        border-right: 1px solid #6b6c71;
    }

    .bottom-bar .menu li:last-child {
        border-right: none;
    }
}

.bottom-bar .menu > li > a {
    color: rgba(255, 255, 255, 0.8);
    display: block;
    font-size: 12px;
    text-decoration: none;
    margin: 4px 0;
    line-height: 1.2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}



@media screen and (min-width: 768px) {
    .bottom-bar .menu > li > a {
        padding-top: 3px;
        padding-bottom: 4px;
    }
}

@media screen and (max-width: 767px) {
    .bottom-bar .menu > li > a {
        padding-top: 9px;
        padding-bottom: 10px;
    }
}

@media (min-width: 980px) {
    .bottom-bar .menu.site > li > a {
        padding-top: 5px;
        padding-bottom: 4px;
        margin-top: 2px;
        margin-bottom: 2px;
    }
}

@media (max-width: 979px) {
    .bottom-bar .menu li {
        border-right-width: 0;
        float: none;
    }
}

/*
==============================================================
    RESEAUX
==============================================================
*/

.social-bar {
    padding: 5em 0;
}

.social-bar h3 {
    color: #000;
    font-weight: 300;
    font-size: 24px;
    width: 100%;
    text-align: center;
}

.liste_reseaux {
    display: flex;
    justify-content: center;
    *zoom: 1;
}

.liste_reseaux:before,
.liste_reseaux:after {
    display: table;
    content: "";
    line-height: 0;
}

.liste_reseaux:after {
    clear: both;
}

footer .liste_reseaux li, footer .liste_reseaux li:first-child {
    margin-left: 5px;
    margin-bottom: 5px;
}

.bottom-bar .reseaux {
}

@media (max-width: 979px) and (min-width: 400px) {
    .bottom-bar .reseaux {
        margin-bottom: 40px;
    }
}

.bottom-bar .reseaux__newsletter {
    width: 90%;
}

.filAriane {
    margin: 150px 0 10px 10px;
    font-size: 1em;
}

.filAriane a,
.filAriane a:visited {
    color: #000000;
    text-decoration: none;
}

.filAriane a:hover,
.filAriane a:focus {
    text-decoration: underline;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   ACTUS
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

div.actu.echo #slider_echo {
    background-color: #EDF0F3;
    min-height: 340px;
}

.slider__texte > h3 {
    font-size: 1.1em;
    line-height: 1.35em;
}

#slider_echo .slider__texte, #slider_echo .slider__item {
    background: none;
}

div.actu.echo h2, .resum-agenda h2 {
    color: #000;
    font-size: 2.5em;
}

#slider_echo h3, #slider_echo h4, #slider_echo p,
#slider_zoom h3, #slider_zoom h4, #slider_zoom p {
    color: #000;
    margin: 0 30px;
}

#slider_echo h3,
#slider_zoom h3 {
    font-size: 1.5em;
}

#slider_echo .slider__texte,
#slider_zoom .slider__texte {
    padding: 20px 0px 70px 0px;
    box-sizing: border-box;
}

#slider_echo .slider__texte .date,
#slider_zoom .slider__texte .date {
    margin-top: 0;
    margin-bottom: 15px;
}

#slider_echo p,
#slider_zoom p {
    margin: 10px 10px 10px 30px;
}

#slider_zoom .slider__texte {
    background: transparent;
}

.blc.actu .suite,
.blc.resum-agenda .suite {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%;
    padding: 65px 0 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.contenu_live {
    padding-top: 50px;
}

.date_heure_live {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 20px;
    text-align: center;
    font-weight: 600;
    line-height: 1.05em;
    background: #000;
    color: #fff;
    font-size: 1.539em;
    padding: 15px !important;
    margin-top: 0 !important;
    width: auto;
    height: auto;
}

.tag-type {
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: capitalize;
    box-sizing: border-box;
    border-radius: 3px;
    padding: 3px 6px;
    border: 2px solid black;
    color: black;
}
.blc.actu .suite_live {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%;
    padding: 25px 0 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.blc.actu .suite a,
.blc.resum-agenda .suite a {
    margin-bottom: 0.5em;
    float: right;
    clear: right;
    font-family: "Roboto Condensed";
    font-weight: 600;
    font-size: 22px;
    text-decoration: none;
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0;
    color: #000;
    position: absolute;
    bottom: 25px;
    right: 25px;
}

.blc.actu .suite a:hover span,
.blc.resum-agenda .suite a:hover span {
    text-decoration: underline;
}

.blc.actu .suite a span:before {
    content: "> ";
}

#slider_echo p.suite,
#slider_zoom p.suite {
    margin: 0;
}

#slider_une p.suite {
    left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#slider_une p.suite a {
    color: #fff;
    margin: 0;
    right: 30px;
}

/* Ajustmement agenda */
.blc.resum-agenda .suite {
    left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.blc.resum-agenda .suite a {
    color: #fff;
}

.blc.resum-agenda .suite a span:before {
    content: "... ";
}

.actu h2, h2.tt_home {
    position: relative;
    z-index: 1;
    font-weight: 500;
    font-size: 36px;
    line-height: 0.8em;
    font-family: "Poppins", Sans-Serif;
    margin-top: 0;
    margin-bottom: 0;
    color: #000;
    padding: 25px 10px 15px;
}

.actu.zoom h2,
.actu.echo h2,
h2.tt_home {
    line-height: 0.84em;
}



@media screen and (min-width: 980px) and (max-width: 1199px) {
    .actu.zoom h2, .actu.echo h2 {
        font-size: 1.8em;
    }
}


.replaceImgActu {
    background-color: #acafb2;
}

.replaceImgActu.imgB {
    width: auto;
    height: 80px;
}

/*
==============================================================
    ajout de logos (partenariats media) dans le slider
==============================================================
*/

.actu .animation-magazine {
    background-image: url("../interface/animation-magazine_nb_h40_op30.png");
}

.actu .focus-on-animation {
    background-image: url("../interface/focus-on-animation_nb_h40_op30.png");
}

/*
==============================================================
   PAGE ACTU
==============================================================
*/

.p_actu.blc {
    background-color: transparent;
}

.p_actu .blc.actu {
    background: #EDF0F3;
}

@media screen and (min-width: 600px) {
    .p_actu .blc.actu {
        min-height: 420px;
    }
    .p_actu .blc.actu.live {
        min-height: 250px;
    }
}

.p_actu .blc.actu > img {
    width: 100%;
}

.p_actu .une img {
    border-bottom: 10px solid #123479;
    box-shadow: 0 1px 2px #565656;
}

.p_actu .une h2 {
    margin-top: -63px;
}

.p_actu .une h3 {
    background-image: none;
    margin-top: 15px;
    box-shadow: 0 0 3px #848484;
}

/*
==============================================================
   HOME RUBRIQUE
==============================================================
*/

.homeRubrique .blc.actu {
    margin-bottom: 5px;
    margin-top: 52px;
}

.blc.concept {
    float: left;
}

.homeRubrique .blc.info.pratique {
    margin-top: 5px;
    margin-left: 0px;
}

.homeRubrique .blc.info.contact {
    margin-top: 10px;
    margin-left: 35px;
}
/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   SLIDER - (actus, ?)
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
==============================================================
==============================================================
   MODULE
==============================================================
==============================================================
*/

/*
==============================================================
   SLIDER
==============================================================
*/

.slider {
    position: relative;
    z-index: 2;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.slider__item {
    background-position: right 7% bottom 1em;
    background-color: #EDF0F3;
    background-repeat: no-repeat;
}

@media screen and (max-width: 979px) {
    .slider__item {
        display: none;
    }

    .slider__item:first-child {
        display: block;
    }
}

/* Anything Slider */

div.anythingSlider .anythingWindow {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

div.anythingSlider {
    position: relative;
    background-color: #fff;
}

ul.anythingBase {
    background: transparent;
    list-style: none;
    position: absolute;
}

ul.anythingBase li.panel {
    background-color: transparent;
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}

div.anythingSlider .arrow {
    display: none !important;
}

div.anythingControls {
    position: absolute;
    z-index: 10;
    top: -30px;
    right: 10px;
}

div.anythingControls > a {
    display: none;
}

div.anythingControls ul {
    padding: 0;
    margin: 0;
}

div.anythingControls ul li {
    display: inline-block;
    margin-left: 7px;
}

div.anythingControls ul li a {
    border-radius: 8px;
    width: 15px;
    height: 15px;
    display: block;
    text-indent: -999em;
}

div.anythingControls ul li a {
    background-color: #fff;
}

div.anythingControls ul li a.cur {
    background-color: #1a1a1a;
}

/*
==============================================================
   SLIDER IMAGE
==============================================================
*/
/*
#slider_zoom .slider__texte {
    background: #fff;
    padding: 2% 5%;
}

#slider_zoom .slider__texte h3,
#slider_zoom .slider__texte h4,
#slider_zoom .slider__texte p,
#slider_zoom .slider__texte .date {
    color: #000;
}

.slider__image > img {
    width: 100%;
}
*/
/*
==============================================================
   SLIDER TEXTE
==============================================================
*/

.slider__texte {
    position: relative;
    padding-top: 1px;
    padding-bottom: 2em;
    box-sizing: border-box;
    background-color: #161050;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}

/* H3 */

.slider__texte > h3 {
    margin: 0.5em 0;
    font-weight: normal;
    color: #fff;
    font-size: 1.45em;
    line-height: 1.1em;
}

/* P */

.slider__texte > p {
    margin: 0.5em 0;
    color: #fff;
}

.slider__texte .date {
    font-family: "Roboto";
    font-weight: 300;
    font-size: 20px;
    color: #fff;
    margin-top: 50px;
}

/*Réinit des paddings auto */
.p_standard > div.service_connexion {
    padding: 0;
}

/*
==============================================================
==============================================================
   GRAND SLIDER - min 980px ----- BEWARE !
==============================================================
==============================================================
*/

@media screen and (min-width: 980px) {

    .grand-slider__item {
        position: relative;
        overflow: hidden;
        margin: 0;
    }
}

/*
==============================================================
   GRAND SLIDER IMAGE
==============================================================
*/

@media screen and (min-width: 1200px) {
    .grand-slider__item > .slider__image > .legende-image__degrade {
        right: 30%;
    }
}

@media screen and (max-width: 1199px) and (min-width: 980px) {
    .grand-slider__item > .slider__image > .legende-image__degrade {
        right: 45%;
    }
}

@media screen and (min-width: 980px) {
    .grand-slider__item > .slider__image > .legende-image__degrade {
        width: 25%;
    }
}

@media screen and (max-width: 979px) {
    .grand-slider__item > .slider__image > .legende-image__degrade {
        display: none;
    }
}

/*
==============================================================
   GRAND SLIDER TEXTE
==============================================================
*/
.grand-slider__item > .slider__texte {
    width: 55%;
    padding-left: 10%;
    padding-right: 2%;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

@media screen and (min-width: 1200px) {
    .grand-slider__item > .slider__texte {

    }
}

@media screen and (max-width: 1199px) and (min-width: 980px) {
    .grand-slider__item > .slider__texte {
        width: 60%;
    }

    .blc.actu .suite a {
        bottom: 5px;
        right: 15px;
    }
}

@media screen and (max-width: 979px) {

    .grand-slider__item > .slider__texte {
        width: 100%;
        padding: 2%;
    }

    .slider__texte .date {
        margin: 5px;
    }

    .slider__texte > p {
        display: none;
    }

    .slider__texte > p.suite {
        display: block;
    }

    .blc.actu .suite a {
        bottom: 10px;
        right: 10px;
        margin-bottom: 0;
    }
}
/*
@media screen and (min-width: 980px) {
    .grand-slider__item > .slider__texte {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        padding: 0 2%;
    }

    .grand-slider__item > .slider__texte > h3,
    .grand-slider__item > .slider__texte > p {
        margin-left: 0;
        margin-right: 0;
    }

    .grand-slider__item > .slider__texte > p {
        color: #ededed;
        margin-left: 0;
        margin-right: 0;
    }

    .grand-slider__item > .slider__texte > h3,
    .grand-slider__item .date {
        color: #ffffff;
    }
}
*/

div#slider_echo {

}
/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   TUILES
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
==============================================================
==============================================================
   PROGRAMME
==============================================================
==============================================================
*/

.tuilesWrap {
    margin: 0 -5px;
}

.tuile {
    display: flex;
    flex-direction: column;
    height: 150px;
    margin: 10px;
    position: relative;
    text-decoration: none;
}

.grd-cat__item .tuile.empty {
    border: none;
    pointer-events: none;
}

.tuile.cat_efest:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #f7246b transparent transparent transparent;
    position: absolute;
    bottom: -13px;
    left: calc((100% - 20px) / 2);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.tuile.cat_efest.open:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #f7246b transparent transparent transparent;
    position: absolute;
    bottom: -13px;
    left: calc((100% - 20px) / 2);
    opacity: 1;
}

.tuile.cat_efest.open:hover:before {
    border-color: #d10055 transparent transparent transparent;
}

.tuile p {

    font-size: 1.5em;
    margin: 0 5% 1em;
    text-align: center;
    width: 90%;
}

.tuile p span {
    font-size: 0.8em;
    font-weight: normal;
}

.tuile .pictoProg {
    position: static;
    margin: auto;
}

.tuile > span {
    bottom: 42%;
    height: 90px;
    left: 50%;
    margin-left: -45px;
    margin-top: 0;
    width: 90px;
}

/* -- exceptions */
.tuile.cat_efest.cat_midlg {
    font-size: 0.75em;
}

.tuile.cat_erenc.cat_confp {
    font-size: 0.8em;
}

/* -- */

.tuile.violet p {
    color: #dfd9ff; /* teinte 1 */
}

.tuile.violet:link,
.tuile.violet:visited {
    background-color: #0759a6; /* teinte 4 */
    transition: all 0.15s linear;
}

.tuile.violet:active,
.tuile.violet:hover,
.tuile.violet:active {
    background-color: #0759a6; /* teinte 6 */
}

.tuile:link > span,
.tuile:visited > span,
.tuile:visited p {
    opacity: 0.85;
    transition: all 0.15s linear;
}

.tuile:hover > span,
.tuile:hover p,
.tuile:active > span,
.tuile:active p {
    opacity: 1;
}

/*
==============================================================
==============================================================
   TIMELINE ET SUGGESTIONS ET BLOC VISUELS
==============================================================
==============================================================
*/


@media (min-width: 980px) {
    .suggestions {
        width: calc(100% + 10px);
    }

    .suggestions.blc_iframe {
        width: 100%;
    }
}

@media (max-width: 979px) {
    .suggestions {
        width: calc(100% + 2%);
    }
}

.span4 > .suggestions {
    flex-wrap: wrap;
    margin-left: 10px;
}

.bas .span4 > .suggestions,
.home__col-sec .suggestions {
    margin-left: 0;
}

.bas .span4 > .suggestions .blc.tl:nth-child(even),
.home__col-sec .suggestions .blc.tl:nth-child(even) {
    margin-left: 0;
}

@media (max-width: 979px) {
    .suggestions {
        flex-wrap: wrap;
    }
}

.suggestions.left {
    justify-content: flex-start;
}

/*
======================================
  INTITULE DES SUGGESTIONS
======================================
*/

.suggestions h4{
    line-height: normal;
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
}

.suggestions > h4 {
    font-family: "Poppins", Sans-Serif;
    font-weight: 500;
    font-size: 2em;
    text-align: left;
    color: #000;
}

@media (max-width: 979px) {

    .suggestions > h4 {
        margin-top: 10px;
        text-align: left;
        padding: 0.5em;
        font-size: 1.75em;
    }
}

/*
======================================
  TUILES
======================================
*/

.blc.tl {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    color: #ffffff;
    margin: 5px;
    transition: background-color 0.15s ease-in-out;
}

.suggestions .blc.tl:first-child {
    margin-left: 0;
}

@media (min-width: 1200px) {
    .blc.tl {
        min-height: 190px;
        width: 190px;
    }

    .reduit .blc.tl {
        min-height: 165px;
        width: 165px;
    }
}

@media (max-width: 1199px) and (min-width: 980px) {
    .blc.tl {
        min-height: 150px;
        width: 150px;
    }

    .reduit .blc.tl {
        min-height: 170px;
        width: 130px;
    }
}

@media (max-width: 979px) {
    .suggestions .blc.tl:first-child {
        margin-left: 5px;
    }
}

@media (max-width: 979px) and (min-width: 500px) {

    .blc.tl {
        width: calc((100% / 3) - 10px);
        padding-bottom: 20px;
    }

    .blc.tl.tulc {
        width: calc((100% / 2) - 10px);
    }
}

@media (max-width: 499px) {
    .blc.tl {
        width: calc((100% / 2) - 10px);
        font-size: 0.9em;
        min-height: 150px;
    }
}

/* tuile img */

@media (min-width: 980px) {
    img.tl {
        width: 80px;
        margin-top: 15px;
    }
}

@media (max-width: 979px) and (min-width: 500px) {
    img.tl {
        width: 100px;
        margin-top: 1em;
    }
}

@media (max-width: 499px) {
    img.tl {
        width: 78px;
        margin-top: 1em;
    }
}

/* tuile h3 titre */

.blc.tl h3 {

    font-weight: bold;
    text-transform: uppercase;
    margin: 1em 5% 00em;
    font-size: 0.95em;
    line-height: 1.1em;
}

/* tuile p coming soon */

.blc.tl > p.inactive {
    background-color: #6741b4;
    padding: 5%;
    width: 90%;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
}

@media (min-width: 500px) {
    .blc.tl > p.inactive {
        width: 90%;
        padding: 5%;
    }
}

@media (max-width: 499px) {
    .blc.tl > p.inactive {
        width: 80%;
        padding: 5% 10%;
    }
}

/* tuile lien */

.blc.tl > p {
    margin: 0;
}

.blc.tl > p > a {
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* interactivité */

.blc.tl.inactive, .blc.tl.gris {
    background-color: #e1e3e5;
}

.blc.tl.gris:hover, .blc.tl.gris:active {
    background-color: #bfc2c5;
    transition: background-color 500ms;
}

/*
======================================
  BV
======================================
*/

.blc.visu {
    position: relative;
    margin: 0 0 10px 0;
    cursor: pointer;
}

.suggestions .blc.visu:nth-child(even) {
    margin-right: 10px;
}


@media (min-width: 980px) {
    .blc.visu {
        width: calc(50% - 10px);
    }
}

@media (max-width: 979px) and (min-width: 550px) {
    .blc.visu {
        width: calc(25% - 10px);
    }

    .span4 > .suggestions {
        margin-left: 0;
    }

    .suggestions .blc.visu {
        margin-right: 10px;
    }
}

@media (max-width: 549px) {
    .span4 > .suggestions {
        margin-left: 0;
    }
    .blc.visu {
        width: calc(50% - 10px);
    }
}

/*
-------------
  L'image
-------------
*/

.blc.visu > img {
    width: 100%;
}

.blc.visu img {
    opacity: 1;
    width: 100%;
    transition: all 200ms ease-in-out;
}

.blc.visu img:hover,
.blc.visu img:active {
    opacity: 0.8;
}

.span2 > .blc.visu {
    width: 100% !important;
    margin: 5px 0 !important;
}

/*
@media (max-height: 879px) {
    .span2.mob_moitie {
        width: 48% !important;
        float: left !important;
    }
}
*/
/*
-------------
  Le texte
-------------
*/

.blc.visu > div {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #EDF0F3;
}

.blc.visu h3 {
    position: relative;
    display: block;
    font-weight: 600;
    font-size: 1.05em;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    padding: 20px;
}

@media (max-width: 979px) and (min-width: 480px) {
    .blc.visu > div > h3 {}
}

@media (max-width: 479px) {
    .blc.visu h3 {
        font-size: 1.3em;
    }
}

.blc.visu h3 a {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: none;
}

.blc.visu p {
    display: none;
    padding: 10px;
    margin: 0;
    color: #3C3D38;
    font-size: 1.07em;
    line-height: 1.15em;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   BLOC RESEAU
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.reseaux > ul {
    margin: 0;
    padding: 0.5em 7% 2em;
    list-style: none;
    background-color: #EDF0F3;
}

.reseaux > ul > li {
    margin: 1em 0;
}

.reseaux h4 {
    color: #000;
    margin: 0 0 0.5em;
    font-weight: 600;
    font-size: 1.4em;
    line-height: 1.1em;
}

.reseaux p {
    margin-top: 5px;
    margin-bottom: 15px;
    color: #000;
    font-size: 0.92em;
}

.home__col-sec .reseaux > ul {
    margin: 0;
    padding: 2em;
}

footer .reseaux h4,
footer .reseaux p {
    color: #fff;
}


/*
==============================================================
   NEWSLETTER
==============================================================
*/

.reseaux__newsletter > form {
    clear: both;
    margin-bottom: 10px;
}
.reseaux__newsletter .btn.btn1{
    background: white;
    color:black;
}

.reseaux__newsletter > p:last-child {
    margin-bottom: 0 !important;
}

/*
==============================================================
   LISTE RESEAUX SOCIAUX
==============================================================
*/

.liste_reseaux {
    list-style-type: none;
    margin: 5px 0 0;
    padding-left: 0;
}

.liste_reseaux > li {
    display: inline-block;
    float: left;
    margin: 3px;
}

.reseaux__reseaux-sociaux .liste_reseaux > li {
    margin-left: 1px;
    margin-right: 1px;
}

@media screen and (min-width: 1200px) {
    .blc.reseaux .liste_reseaux li:first-child {
        margin-left: 0;
    }

    .blc.reseaux .liste_reseaux li:last-child {
        margin-right: 0;
    }
}

.liste_reseaux > li > a {
    display: inline-block;
    width: 45px;
    height: 45px;
    text-indent: -999em;
    background-image: url('../interface/sprite45.png');
}

.social_share ul {
    float: right;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   LAYOUT HOME
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen and (max-width: 980px) and (min-width: 600px) {

    .home__col-princ.span8,
    .home__col-sec.span4 {
        width: 48%;
        float: left;
    }
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   FLECHE TEMPS
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
==============================================================
==============================================================
   STRUCTURE GENERALE
==============================================================
==============================================================
*/

.flecheTemps {
    position: relative;
    margin: 2em 0;
}

@media (min-width: 980px) {
    .flecheTemps {
        margin: 2em 0;
    }
}

@media (min-width: 768px) {
    .flecheTemps__corps {
        width: 94%;
    }
}

.flecheTemps__corps > ul {
    position: relative;
    margin: 0px;
    padding: 0px;
    list-style: outside none none !important;
}

@media (min-width: 768px) {
    .flecheTemps__corps > ul {
        height: 100%;
    }
}

@media (max-width: 767px) and (min-width: 500px) {
    .flecheTemps__corps > ul {
        padding: 0 20px;
        box-sizing: border-box;
    }
}

@media (max-width: 499px) {
    .flecheTemps__corps > ul {
        padding: 0 5px;
        box-sizing: border-box;
    }
}

.flecheTemps__corps > ul > li {
    margin: 0 !important;
    text-align: center;
}

@media (min-width: 768px) {
    .flecheTemps__corps > ul > li {
        float: left;
    }
}

.flecheTemps__date,
.flecheTemps__precision {
    box-sizing: border-box;
    padding: 20px;
}

@media (max-width: 499px) {
    .flecheTemps__date,
    .flecheTemps__precision {
        padding: 10px;
    }
}

@media (max-width: 767px) {
    .flecheTemps__date, .flecheTemps__precision {
        float: left;
    }

    .flecheTemps__date {
        width: 40%;
    }

    .flecheTemps__precision {
        width: 60%;
    }
}

@media (min-width: 980px) {
    .flecheTemps__precision > h6, .flecheTemps__date > h6 {
        font-size: 1.5em;
    }
}

@media (max-width: 979px) and (min-width: 768px) {
    .flecheTemps__precision > h6, .flecheTemps__date > h6 {
        font-size: 1em;
    }
}

@media (max-width: 767px) {
    .flecheTemps__precision > h6, .flecheTemps__date > h6 {
        font-size: 1.25em;
    }
}

/*
==============================================================
   adaptation en fonction du nombre d'étape (de 2 à 6)
==============================================================
*/

@media (min-width: 768px) {
    .flecheTemps__2 > .flecheTemps__corps > ul > li, .flecheTemps__2 .flecheTemps__precision {
        width: 50%;
    }

    .flecheTemps__3 > .flecheTemps__corps > ul > li, .flecheTemps__3 .flecheTemps__precision {
        width: calc(100% / 3);
    }

    .flecheTemps__4 > .flecheTemps__corps > ul > li, .flecheTemps__4 .flecheTemps__precision {
        width: 25%;
    }

    .flecheTemps__5 > .flecheTemps__corps > ul > li, .flecheTemps__5 .flecheTemps__precision {
        width: 20%;
    }

    .flecheTemps__6 > .flecheTemps__corps > ul > li, .flecheTemps__6 .flecheTemps__precision {
        width: calc(100% / 6);
    }

    .flecheTemps__7 > .flecheTemps__corps > ul > li, .flecheTemps__7 .flecheTemps__precision {
        width: calc(100% / 7);
    }
}

@media (min-width: 1200px) {
    .flecheTemps__5 .flecheTemps__precision > h6,
    .flecheTemps__6 .flecheTemps__precision > h6,
    .flecheTemps__7 .flecheTemps__precision > h6 {
        font-size: 1.25em;
    }

    .flecheTemps__6 .flecheTemps__precision,
    .flecheTemps__7 .flecheTemps__precision {
        padding: 20px 5px;
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .flecheTemps__4 .flecheTemps__precision,
    .flecheTemps__5 .flecheTemps__precision,
    .flecheTemps__6 .flecheTemps__precision,
    .flecheTemps__5 .flecheTemps__date,
    .flecheTemps__6 .flecheTemps__date {
        padding: 20px 5px;
    }

    .flecheTemps__7 .flecheTemps__date,
    .flecheTemps__7 .flecheTemps__precision {
        padding: 20px 2px;
    }

    .flecheTemps__7 .flecheTemps__precision > h6 {
        padding-left: 2px;
        padding-right: 2px;
    }

    .flecheTemps__5 .flecheTemps__precision,
    .flecheTemps__6 .flecheTemps__precision,
    .flecheTemps__7 .flecheTemps__precision {
        font-size: 0.9em;
    }

    .flecheTemps__5 .flecheTemps__precision > h6,
    .flecheTemps__6 .flecheTemps__precision > h6,
    .flecheTemps__7 .flecheTemps__precision > h6 {
        font-size: 1.1em;
    }
}

/*
==============================================================
   adaptation à la largeur de la colonne
==============================================================
*/

@media (min-width: 980px) {
    .span8 .flecheTemps {
        margin: 2em 0;
    }

    .span8 .flecheTemps__precision,
    .span8 .flecheTemps__precision {
        padding: 20px 5px;
    }

    .span8 .flecheTemps__precision > h6,
    .span8 .flecheTemps__date > h6 {
        font-size: 1em;
    }
}

/*
==============================================================
==============================================================
   DATES
==============================================================
==============================================================
*/

/* flecheTemps__date */

@media (max-width: 767px) {
    .flecheTemps__date {
        clear: both;
    }
}

.flecheTemps__date > h6 {
    margin: 0;
}

.flecheTemps__date > p {
    margin: 0;
}

/*
==============================================================
==============================================================
   PRECISION
==============================================================
==============================================================
*/

@media (min-width: 768px) {
    .flecheTemps__precision {
        position: absolute;
        top: 100%;
        margin-top: -35px;
        line-height: 1.2em;
    }
}

@media (max-width: 767px) {
    .flecheTemps__precision {
        position: relative;
    }
}

@media (min-width: 768px) {
    .flecheTemps__precision::before {
        content: "";
        display: block;
        width: 9px;
        background-image: url("../interface/flecheTemps_precision-marque_sprite.png");
        position: relative;
        height: 41px;
        left: 50%;
        margin-left: -5px;
    }
}

.flecheTemps__precision > h6 {
    border: 1px solid;
    padding: 10px;
    font-weight: 600;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.5);
}

.flecheTemps__precision > h6:not(:first-child) {
    margin-top: 0.5em;
}

@media (max-width: 767px) {
    .flecheTemps__precision > h6 {
        padding: 5px;
    }
}

.flecheTemps.violet .flecheTemps__precision ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style-position: inside !important;
}

.flecheTemps__precision p {
    margin: 0.4em 0 !important;
}

.flecheTemps__precision li {
    margin: 5px 0 5px 0 !important;
}

/*
==============================================================
==============================================================
   POINTE
==============================================================
==============================================================
*/

@media (max-width: 767px) {
    .flecheTemps__pointe {
        display: none;
    }
}

@media (min-width: 768px) {
    .flecheTemps__pointe {
        display: block;
        background-image: url("../interface/flecheTemps_pointe_sprite.png");
        background-size: 500% 100%;
        position: absolute;
        width: 7%;
        height: 150%;
        top: -25%;
        right: 0;
        background-size: 500% 100%;
    }
}

/*
==============================================================
==============================================================
   STYLES (typo + sprites + couleurs)
==============================================================
==============================================================
*/

.flecheTemps__date {
    color: #000;
}

.flecheTemps__date > h6,
.flecheTemps__precision h6 {
    font-weight: normal;
    line-height: 1em;
}

.flecheTemps.gris > .flecheTemps__corps {
    background-color: #bfc2c5;
}

.flecheTemps.gris > .flecheTemps__pointe {
    background-position: -400% -0px;
}

.flecheTemps.violet > .flecheTemps__pointe {
    background-position: 70px -0px;
}

.flecheTemps.gris .flecheTemps__precision > h6 {
    border-color: #8b8b8b;
}

.flecheTemps.gris .flecheTemps__precision > h6 {
    color: #8b8b8b;
}

.flecheTemps.gris .flecheTemps__precision::before {
    background-position: -27px -0px;
}

.flecheTemps.violet .flecheTemps__precision::before {
    background-position: -27px -0px;
}

.flecheTemps.gris .flecheTemps__precision,
.flecheTemps.gris .flecheTemps__precision ul {
    color: #55595c !important;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   ELEMENTS CLEFS aka ELMT_CLE
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.elmt_cle {
    position: relative;
    float: right;
    margin: 3em -7% 1em 60px;
    border-top: 7px solid #ACAFB2;
    box-sizing: border-box;
    padding: 0.25em 4% 0 0.25em;
    color: #898c8f;
}

.elmt_cle ~ .elmt_cle {
    clear: right;
}

#conteneur_programme .elmt_cle {
    margin: 0;
}

@media (min-width: 768px) {
    .elmt_cle.etroit {
        width: 30%;
    }
}

@media (max-width: 767px) {

    .elmt_cle {
        width: 90%;
        margin-left: 20%;
    }
}

@media (min-width: 768px) and (max-width: 979px) {

    .elmt_cle {
        width: 40%;
    }

    .elmt_cle.large {
        width: 90%;
        margin-left: 20%;
    }

    .elmt_cle ul li {
        font-size: 1.1em;
    }
}

@media (min-width: 980px) {

    .elmt_cle {
        width: 50%;
    }

    .elmt_cle.large {
        width: 80%;
        margin-right: -1.8%;
    }

    .span12 > .blc > div > .elmt_cle.couleur {
        margin-right: -7%;
    }
}

/*
------------------------
   important
------------------------
*/

.elmt_cle.important {
    margin-top: 3em;
    margin-bottom: 0em;
}

@media screen and (max-width: 550px) {
    .elmt_cle.important a.btn {
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 450px) {
    .elmt_cle.important {
        margin-top: 5em;
    }

    .elmt_cle.important p {
        margin-bottom: 0;
    }
}

/*
------------------------
   ajustements selon type de page et formats
------------------------
*/

/*
.p_standard .elmt_cle,
.p_info .elmt_cle,
.p_fiche .elmt_cle {
    margin-right: -6%;
}

.p_portail .elmt_cle {
    margin-right: -4%;
}
*/

@media screen and (min-width: 980px) {
    .p_com .col1 .elmt_cle {
        width: 90%;
    }

    .p_com .elmt_cle > ul {
        font-size: 0.8em;
    }
}

/*
==============================================================
   PICTO aka BADGE
==============================================================
*/

.elmt_cle > [class^="badge_"],
.elmt_cle > [class*=" badge_"] {
    position: absolute;
    top: -27px;
    left: -45px;
    margin-right: 0.5em;
    margin-top: 1px;
    vertical-align: text-top;
    line-height: 14px;
}

[class^="badge_"]:not(.couleur):not(.agenda):not(.action):not(.citia):not(.fb):not(.acy),
[class*=" badge_"]:not(.couleur):not(.agenda):not(.action):not(.citia):not(.fb):not(.acy) {
    opacity: 0.3;
}

/*
==============================================================
   TITRE et sous titre
==============================================================
*/

.elmt_cle h6 {
    margin: 0 0 0.5em;
    font-style: italic;
    font-weight: 600;
    font-size: 1.2em;

    line-height: 1.1em;
    position: absolute;
    bottom: 100%;
    padding-bottom: 0.25em;
}

@media screen and (max-width: 500px) {
    .elmt_cle h6 {
        font-size: 1.2em;
    }
}

.elmt_cle h6 > span {

    font-size: 0.6em;
}

.elmt_cle.important > h6 {
    color: #e7222d;
    font-size: 1.6em;
}

/*
==============================================================
   CONTENU TEXTE
==============================================================
*/

.elmt_cle > ul:nth-child(2),
.elmt_cle > p:nth-child(2),
.elmt_cle > ul:nth-child(3),
.elmt_cle > p:nth-child(3) {
    margin-top: 0;
}

.elmt_cle ul.liens {
    margin-left: 20px;
    margin-top: 15px;
}

.elmt_cle ul.liens li {
    margin-bottom: 3px;
}

.elmt_cle.couleur ul.liens li a {
    color: #6642b5;
    font-style: normal;
    font-weight: normal;
}

.elmt_cle.couleur ul.liens li a span[class*="pict_"] {
    margin-right: 5px;
}



/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   MISE EN PAGE DES BLOCS D'INFO PRINCIPAUX aka les P_
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.blc[class*="p_"] {
    margin-top: 0;
    margin-bottom: 0;
}

[class*="p_"] > div,
.p_com > .col1 > div,
.p_com > .col2 > div {
    padding: 40px 0;
}

.p_com > div {
    padding: 0;
}

@media screen and (min-width: 980px) {
    .p_portail > div {
        padding-right: 4%;
        padding-left: 4%;
    }
}

[class*="p_"].blc > img {
    width: 100%;
}

/* Des row dans des p_ */

[class*="p_"].blc > .row {
    padding: 0;
}

@media screen and (min-width: 980px) {

    [class*="p_"].blc > .row {
        margin-top: 5px;
    }
}

@media screen and (max-width: 979px) and (min-width: 600px) {

    [class*="p_"].blc > .row {
        margin-top: 0.5em;
    }

    [class*="p_"].blc > .row > .span4 {
        width: 48%;
        float: left;
    }
}

/* clearfix automatiques sur les blocs principaux */

[class*="p_"] > div,
.p_com > div > [class="col"] {
    *zoom: 1;
}

[class*="p_"] > div:before, [class*="p_"] > div:after,
.p_com > div > [class="col"]:before, .p_com > div > [class="col"]:after {
    display: table;
    content: "";
    line-height: 0;
}

[class*="p_"] > div:after,
.p_com > div > [class="col"]:after {
    clear: both;
}

/*
==============================================================
   ALTERNANCE DE COULEUR
==============================================================
*/


.pg_recherche div {
    background-color: transparent !important;
}

#___gcse_0 {
    padding: 0;
}

.pg_recherche .gsc-control-cse {
    border-width: 0px;
}

.pg_recherche table.gsc-search-box td.gsc-input {
    padding-right: 0px;
}

.pg_recherche  .gsc-search-button-v2 {
    padding: 21px;
}

.gsc-search-button-v2 svg {
    width: 20px;
    height: 20px;
}
/*
==============================================================
   VIGNETTE (page info et standard)
==============================================================
*/

.p_standard > img:nth-child(2),
.p_info > img:nth-child(2) {
    width: 100%;
}

/*
==============================================================
   CHAPO, ACCROCHE et SOMMAIRE
==============================================================
*/

.p_info > h3,
h3.chapeau,
.chapeau,
#sommaire,
[class*="p_"] > .accroche,
[class*="p_"] div.chapeau_fct_ntwk {
    position: relative;
    margin: 0;
    padding: 25px 25px 25px 25px;
    font-size: 1.15em;
    line-height: 1.3em;
}



.p_fiche.actualite .accroche {
    background-color: #f0eff2;
    padding: 20px;
}

.p_fiche.actualite .titre_fiche {
    background-color: #f0eff2;
}

.p_fiche.actualite ul {
    margin-left: 45px;
}

.p_fiche .accroche,
.p_fiche .descriptif {
    padding: 50px 0 0 0 ;
}
.p_fiche .accroche p {
    max-width: 1200px;
    margin: 0 auto;
}
.p_info > h3,
h3.chapeau {
    padding-left: 6%;
    padding-right: 6%;
}
.blc_identite {
    padding: 40px 0;
}
.blc_identite>div {
    max-width: 1200px;
    margin: 0 auto;
}
h3.chapeau a {
    position: absolute;
    right: 15px;
    top: 15px;
    margin: 0;
}
/*
------------------------
   couleur
------------------------
*/

h3.chapeau,
.p_info > h3 {
    background-color: #f0eff2;
    color: #434649;
}

[class*="p_"] div.chapeau_fct_ntwk {
    color: #fff;
    background-color: #000;
}

.chapeau_fct_ntwk.special {
    background-color: #FFFFFF;
}

.p_info > h3 b, .p_info > h3 strong,
h3.chapeau b, h3.chapeau strong,
#sommaire b, #sommaire strong,
.accroche b, .accroche strong {
    color: #2b2b2b;
}

#sommaire ul {
    color: #2b2b2b;
}

#sommaire h4 {
    color: #6B6C71;
}

/*
------------------------
   SOMMAIRE
------------------------
*/
#sommaire p {
    font-style: italic;
    font-weight: 300;
    margin-right: 30px;
}

#sommaire ol {
    margin-top: 1em;
    margin-bottom: 2em;
    margin-right: 0;
    padding: 0;
    list-style-type: none;
    counter-reset: nbs;
    font-family: Arial, sans-serif;
    font-size: 0.7em;
    font-style: normal;
    box-sizing: border-box;
}

@media (min-width: 600px) {

    #sommaire ol {
        float: right;
        width: 40%;
        margin-left: 1em;
    }

}

@media (max-width: 599px) {

    #sommaire ol {
        float: none;
        margin-left: 0;
    }

}

#sommaire h4 {
    display: none;
}

#sommaire ol li {
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 2px;
}

#sommaire ol li a {
    display: block;
    background-color: #fff;
    color: #6B6C71;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 1.3em;
}

#sommaire ol li a:hover {
    background: black;
    color: #fff;
}

/* -- trash : sur quelles pages sert ce morceau ? */

#sommaire div {
    width: 48%;
    float: left;
    margin-right: 2%;
}

#sommaire p a.btn {
    margin-top: 8px;
    font-size: 0.8em;
}

#sommaire p.p_image {
    text-align: left;
    margin: 10px 0;
}

#sommaire p.p_image a {
    float: right;
    margin-left: 10px;
}

#sommaire ul {
    padding-left: 15px;
}

#sommaire ul li {
    margin-bottom: 0;
}

#sommaire div h2 {
    margin: 20px 0 10px 0;
}

#sommaire div p {
    font-style: normal;
    color: #edf0f3;
    font-size: 1.3em;
}

@media (max-width: 979px) {

    #accroche {
        left: 0;
        width: 35%;
    }
}

@media (max-width: 600px) {

    #accroche {
        width: 50%;
    }

}

/* -- */

/*
------------------------
   CHAPEAU_FCT_NETWORK
------------------------
*/

[class*="p_"] > .hide > div.chapeau_fct_ntwk {
    padding-bottom: 1em;
}

.chapeau_fct_ntwk {
    position: relative;
    z-index: 2;
}

.chapeau_fct_ntwk.reduit {
    padding: 5px;
    min-height: 0;
}

.chapeau_fct_ntwk p {
    color: #fff;
    padding: 20px 0;
}

.chapeau_fct_ntwk p b {
    color: #edf0f3;
}

.chapeau_fct_ntwk h3 {
    font-size: 2.3em;
    font-style: italic;
    padding: 0;
    margin: 0;
    text-align: center;
}

.chapeau_fct_ntwk h4 {
    color: #ECF0F2;
    padding: 0;
    text-align: center;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   PAGE COMMERCIALE
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.p_com {
    position: relative;
}

/* -- clearfix automatique pour p_com */
.p_com {
    *zoom: 1;
}

.p_com:before, .p_com:after {
    display: table;
    content: "";
    line-height: 0;
}

.p_com:after {
    clear: both;
}

/* -- */

/*
==============================================================
   COLONNES .COL1 et .COL2
==============================================================
*/

.p_com > .col1,
.p_com > .col2 {
    position: relative;
    float: left;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 2;
    background-color: #EDF0F3;
}

.p_com > .col1 > div:nth-child(odd) {
    background-color: #f0eff2
}

.p_com > .col1 > div:nth-child(even) {
    background-color: #F9F9F9;
}

.p_com > .col2 {
    background-color: #898C8F !important;
    color: #E3E5E9;
}

@media screen and (min-width: 1200px) {
    .p_com > .col1, .p_com > .col2 {
        width: 43%;
    }

    .p_com > .col1 {
        left: 5%;
    }

    .p_com > .col2 {
        right: 5%;
    }
}

@media screen and (max-width: 1199px) and (min-width: 980px) {
    .p_com > .col1, .p_com > .col2 {
        width: 45%;
    }

    .p_com > .col1 {
        left: 2.5%;
    }

    .p_com > .col2 {
        right: 5%;
    }
}

@media screen and (min-width: 980px) {
    .p_com > .col1, .p_com > .col2 {
        position: absolute;
    }

    .p_com > .col1 {
        min-height: 1000px;
    }

    .p_com > .col2 {
        bottom: 0;
    }
}

@media (max-width: 979px) {
    .p_com > .col1, .p_com .col2 {
        width: 100%;
    }
}

/*
==============================================================
   IMG.FOND
==============================================================
*/

.p_com img.fond {
    position: relative;
    left: 0;
    z-index: 1;
}

.p_com.deux_l img.fond {
    top: 140px;
}

@media (max-width: 979px) {

    .p_com img.fond {
        display: none;
    }
}

/*
==============================================================
   CONTENUS TEXTES
==============================================================
*/

.blc.p_com h1 {
    margin: 24px 0;
}
.p_com .col1 div {
    padding: 25px;
}
.p_com .col1 div:nth-child(2) > p {
    font-weight: 400;
    font-size: 1em;
    line-height: 1.25em;
    font-family: Arial, sans-serif;
}

.p_com .col1 div:nth-child(2) > p b ,
.p_com .col1 div:nth-child(2) > p strong {
    font-weight: 600;
}

.p_com .col2 h2 {
    color: #ECF0F2;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 1.7em;

}

.p_com .col2 h5 {
    color: #ECF0F2;
    margin-top: 5px;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 1.6em;

}

.p_com .col2 ul {
    margin: 0;
    padding: 0;
    list-style-type: square;
    color: #EBF0F2;
}

.p_com .col2 ul li {
    padding-left: 0;
    padding-bottom: 0;
    line-height: 1.35em;
}

.p_com .col2 ul.arguments {
    list-style-type: none;
}

.p_com .col2 ul.arguments li {
    background: url("../interface/picto_arguments.png") no-repeat 0 0;
    padding-left: 25px;
}

ul.arguments li a.btn {
    margin-top: 5px;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   SOUS-BLOC aka SOUS_BLC et TRANSPORT et SUGGESTION_NTWK
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
==============================================================
   STRUCTURE
==============================================================
*/

/*
------------------------
   liste des sous-blocs
------------------------
*/

[class*="p_"].blc .liste_sous-blc {
    list-style: outside none none;
    padding: 0;
    margin: 0;
    overflow: auto;
}

/*
------------------------
   sous-blocs
------------------------
*/
[class*="p_"].blc .liste_sous-blc p {
    margin: 0.4em 0;
}

[class*="p_"].blc .liste_sous-blc > li,
.sous_blc,
.transport {
    position: relative;
    float: left;
    margin: 0em;
    padding: 0;
    background-color: #ffffff;
}

/* sous-bloc cliquable */

[class*="p_"].blc .liste_sous-blc > .suggestion {
    cursor: pointer;
}

/* responsive */

@media screen and (min-width: 768px) {

    [class*="p_"].blc .liste_sous-blc > li {
        width: calc(50% - 2em);
    }
}

@media screen and (max-width: 1024px) {
    [class*="p_"].blc .liste_sous-blc > li {
        width: calc(100% - 2em);
    }

    .p_fiche .accroche, .p_fiche .blc_identite {
        padding-left : 25px;
        padding-right: 25px;
    }

}

/* PATCH à SUPPRIMER */

.span8 .sous_blc,
.span8 .transport {
    width: 44%;
    margin-left: 1em;
    margin-right: 1em;
}

.span4 .sous_blc,
.span4 .transport {
    width: 100%;
}

/*
------------------------
   sous-blocs content
------------------------
*/

.sous-blc_content {
    padding: 0.4em 0;
}

.liste_sous-blc > .suggestion > .sous-blc_content {
    margin-right: 70px;
}

/*
==============================================================
   ALTERNANCE DE COULEUR en fonction du fond
==============================================================
*/

.impair .sous_blc {
    background-color: #F1F2F3;
}

[class*="p_"] > div:nth-child(2n+1) ul.liste_sous-blc > li,
[class*="p_"] > div:nth-child(2n+1) .transport,
[class*="p_"] > div:nth-child(2n+1) .sous_blc {
    background-color: transparent;
}

/*
==============================================================
   IMAGES
==============================================================
*/

.liste_sous-blc > li > img:first-child,
.transport > img:first-child,
.sous_blc > img:first-child {
    float: right;
}

.liste_sous-blc > li > .picto_sous-bloc.bas {
    position: absolute;
    bottom: 10px;
    right: 10px;
    top: auto;
}

.liste_sous-blc > li img,
.sous_blc img,
.transport img {
    margin: 0.5em;
}

/*
==============================================================
   TITRES
==============================================================
*/

[class*="p_"].blc .liste_sous-blc > li h4,
.transport h4,
.sous_blc h4 {
    padding: 0.4em 0;
    margin: 0;
    font-weight: 600;
    font-size: 1.385em;
    color: #000000;
}

.liste_sous-blc > .suggestion h4 {
    padding-right: 30px;
}

[class*="p_"].blc .liste_sous-blc > .suggestion:hover h4 {
    background-color: #b58fc0;
}

.liste_sous-blc > .suggestion a.icone_fermer {
    position: absolute;
    top: 10px;
    right: 10px;
}

.liste_sous-blc > li h5,
.transport h5,
.sous_blc h5 {
    font-weight: 600;
    font-size: 1.358em;
    color: #6B6C71;
    margin: 0;
}

/*
==============================================================
   CONTENUS
==============================================================
*/

.liste_sous-blc > .suggestion a.acces {
    display: none;
}

.liste_sous-blc > li ul,
.liste_sous-blc > li ol,
.transport ul, .transport ol,
.sous_blc ul, .sous_blc ol {
    margin: 0;
    padding-left: 1em;
}

.liste_sous-blc .btn,
.transport .btn,
.sous_blc .btn {
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    clear: right;
}


/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   MENU CONTEXTUEL
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
==============================================================
   STRUCTURE
==============================================================
*/

.mnctxl {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    transition: left 200ms;
    z-index: 90;
}

@media screen and (min-width: 800px) {
    .mnctxl {
        /* z-index: 12;*/
        width: 320px;
        margin-top: 236px;
        height: calc(100% - 107px);
    }
}

@media screen and (max-width: 799px) {
    .mnctxl {
        z-index: 62;
        width: 100%;
        min-width: 320px;
    }
}

.mnctxl__onglets > li > a {
    display: block;
}

/*
.mnctxl__cntnt {
    overflow: auto;
}
*/
.mnctxl__sctn {
    position: relative;
    /* overflow: auto;*/
    width: 100%;
    box-sizing: border-box;
}

div.mnctxl__sctn__cntnt-tri {
    padding-right: 40px;
}

.form button.mnctxl__go-tri {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
}

/*
==============================================================
   STYLE
==============================================================
*/

.mnctxl {
    background-color: #e1e3e5;
}

/* onglets */

a.mnctxl__onglet {
    padding: 1.25em 0.5em 1em;
    text-align: center;
    text-decoration: none;

    font-weight: 600;
    text-transform: uppercase;
}

a.mnctxl__onglet,
a.mnctxl__onglet:visited {
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

a.mnctxl__onglet:hover {
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

a.mnctxl__onglet:focus,
a.mnctxl__onglet:active {
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
}

a.mnctxl__onglet.actif {
    background-color: transparent;
    color: #6b6e71;
    cursor: default;
}

.mnctxl__onglet > span[class^="pict_"] {
    bottom: 2px;
    position: relative;
    margin-right: 3px;
}

/* contenu du menu */

.mnctxl__cntnt {
    padding: 1em 6%;
}

.mnctxl__sctn {
    margin-top: 1em;
    background-color: #ffffff;
}

.mnctxl__sctn:first-child {
    margin-top: 0;
}

.mnctxl__sctn__cntnt {
    padding: 0.75em;
}

.mnctxl__sctn__cntnt-tri h2,
.mnctxl__sctn__cntnt-tri h3,
.mnctxl__sctn__cntnt-tri h4,
.mnctxl__sctn__cntnt-tri ul,
.mnctxl__sctn__cntnt-tri p {
    margin: 0.25em 0;
    padding-left: 0;
}

.mnctxl .ui-multiselect, .mnctxl select {
    width: 100%;
}

/*
==============================================================
   AJUSTEMENTS RECHERCHE PROFESSIONNELS
==============================================================
*/

.rech_pro > .mnctxl__onglets > li {
    width: 50%;
}

#pro_libre, #soc_libre {
    width: 100% !important;
    box-sizing: border-box;
}

.rech_pro .mnctxl__sctn__cntnt-tri > ul {
    margin: 0;
    padding-left: 0;
    padding-right: 1em;
}

.rech_pro .mnctxl__sctn__cntnt-tri > ul > li {
    margin-top: 0.75em;
}

.rech_pro .mnctxl__sctn__cntnt-tri > ul > li:first-child {
    margin-top: 0;
}

.mnctxl {
    display: none;
}

.chapeau_fct_ntwk #btn_liste_particpants {
    margin-right: 10px;
}

/*
==============================================================
   PATCHS
==============================================================
*/

.mnctxl form {
    margin: 0;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   LISTE PARTICIPANTS
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#liste_participants .chapeau_fct_ntwk .btn {
    margin: 4px 4px 4px 0;
}

#liste_participants .triProg {
    margin: 0;
    padding: 0.1em 3%;
}

/*

.blc.ntwk.p_standard > div .result_rech_entete h4 {
    color: #fff;
}

.liste_recherche .triProg > li{
    color: #6642b5;
    background-color: #ffffff;
}
.liste_recherche .triProg .pict_suppr {
    background-position: -300px -260px;
}
*/
.pict_suppr {
    background-position: -300px -260px;
}

#result_rech {
    position: relative;
    padding: 1.25em 0;
}

#liste_participants .choix_radio.liste_enligne {
    padding: 0 3%;
    margin-top: 0;
}

.p_standard .choix_radio.liste_enligne li {
    padding-top: 0;
    margin: 0 0.5em 0.5em;
    line-height: 1.2em;
}

@media screen and (max-width: 979px) {
    .ntwk.p_standard h1 {
        padding: 10px 0 0;
    }

    .ntwk.p_standard h1 .pict {
        display: none;
    }
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   PAGE CHARTE
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.liste_enligne.page_charte.pictos_pages > li {
    min-width: 45%;
}

li.intertitre.page-charte {
    width: 100%;
    clear: both;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   PAGE ACCES WIFI
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen and (min-width: 600px) {
    .container.accesWifi {
        margin-top: 2em;
    }
}

@media screen and (max-width: 599px) {
    .container.accesWifi {
        margin-top: 1em;
    }

    .accesWifi .p_standard > img {
        width: 50%;
    }

    .accesWifi .p_standard > div {
        padding-bottom: 0.5em;
        padding-top: 0.5em;
    }
}

@media screen and (max-height: 600px) {
    .container.accesWifi {
        margin-top: 0;
    }

    .accesWifi .p_standard > img {
        display: none;
    }
}

.accesWifi h1 {
    padding-left: 4%;
}

@media screen and (max-width: 599px) {
    .accesWifi .form__connexion .btn {
        width: 97%;
    }
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   VRAC RAPPATRIE DE V3 Annecy
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/* ----------- EN CHRIFFRES ----------- */

.enChiffres {
    list-style-type: none !important;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding: 0 !important;
}

.enChiffres > li {
    background-position: -45px -200px;
    color: #ACADB2;
    margin: 0.25em 0;
    font-style: italic;
    font-weight: 600;
    font-size: 1.3em;
    line-height: 1.2em;

    padding-left: 85px !important;
    text-indent: -85px;
}

.enChiffres > li > span:not([class*="pict_"]) {
    font-size: 1.42em;
    display: inline-block;
    text-align: right;
    margin-right: 5px;
    width: 80px;
}

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

/* HABILLAGE BILLETERIE */
#habillage_fond {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 0;
    overflow: hidden;

    /*display: none;  quand il n'y en a pas */
}

#habillage_fond a {
    display: block;
    width: 100%;
    height: 100%;
}

a:hover {
    text-decoration: none;
}

/* ----  Style de l'entete ---- */
.entete_acc ul li a {
    color: rgba(255, 255, 255, 0.8);
}

.btn.btn2:active {
    position: relative;
    top: 1px;
}

/* btn communs */
.btn.inactif, .btn.inactif:hover, .btn.inactif:active {
    background-color: #D9DCDF;
    cursor: default;
    color: #ACAFB2;
}

/*
------------------------
   logo
------------------------
*/

.en-tete-site__logo {
    display: block;
    padding: 7px;
    text-indent: -999em;
}

.en-tete-site__logo.pict {
    bottom: initial;
}

/* ---- Accueil ---- */

#compte_rebours, #actu_flash {
    position: absolute;
    width: 158px;
    left: 15px;
    text-align: center;
    font-weight: 400;
    font-size: 1em;

}

#compte_rebours {
    height: 78px;
    top: 0;
}

#actu_flash {
    height: 187px;
    top: 50px;
    background: url(../interface/bck_flash.png) no-repeat 0 0;
    position: absolute;
}

#actu_flash ul {
    padding: 0;
    margin: 0;
}

#actu_flash .anythingControls {
    display: none !important;
}

#actu_flash div.anythingSlider .anythingWindow {
    background-image: none;
}

#compte_rebours h5 {
    font-size: 1.385em;
    margin-top: 5px;
    margin-bottom: 0;
    line-height: 1.5em;
}

#compte_rebours h5 span {
    font-size: 1.387em;
}

#actu_flash h4 {
    color: #EAE6FC;
    font-size: 1.93em;
    margin-top: 35px;
    margin-bottom: 5px;
    line-height: 1.1em;
}

#actu_flash p {
    color: #877EC3;
    margin: 5px 8px;
    font-weight: 600;
    font-size: 1.07em;
    line-height: 1.32em;

}

#actu_flash a {
    margin-top: 5px;
}

/* ---- SLIDER HOME ---- */

/* Newsletter */
.form.inscr_newsletter input {
    width: 57%;
}

.form.inscr_newsletter button {
    padding: 14px 10px;
    width: 35%;
    margin: 0;
}

/* ----- FORMULAIRE ---- */

.form input:not([readonly="readonly"]):focus, .form select:focus, .form textarea:focus {
    color: #444444;
}

.form ul.liste_radio li label:hover:before {
    border-color: #000;
}

.form#profil_perso ul.liste_radio li input[type="radio"]:checked + label:before,
.form#profil_perso ul.liste_radio li label:hover:before {
    border-color: #CFD2D5;
}

/* ---- Bandeau Multilangues ----*/
div#band_lang {
    display: none;
    position: relative;
    top: 156px;
    padding: 20px;
    margin: 0;
    color: #fff;
    text-align: center;
}


div#band_lang ul {
    list-style-image: none;
    display: inline-block;
}

li.band_lang_li {
    width: 150px;
    height: 150px;
    margin: 5px;
    padding: 10px;
    vertical-align: top;
    display: -moz-inline-box;
    display: inline-block;
}

li.band_lang_li:hover {
    cursor: pointer;
}
div#band_lang ul li a {
    color: #fff;
}

div#band_lang a#fermer_band_lang {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 20px;
    height: 20px;
    text-decoration: none !important;
    text-indent: -999em;
    z-index: 10;
    background: #fff url(../interface/pictos/fermer.png) no-repeat 0 0;
}

a#fermer_band_lang:hover {
    background-position: 0 -20px;
}

.blc_acc_pro ul {
    margin-left: 250px;
    margin-top: 0;
    padding: 0;
}

.blc_acc_pro ul li {
    margin: 5px 0;
}

/*
-----------------------------------
  Tableau des accréditations
-----------------------------------
*/

/* général tableau */

.tab_accred {
    border-collapse: separate;
    border-spacing: 1px;
}

/* cellules */

@media (min-width: 768px) {
    table.tab_accred td {
        padding: 0.5em;
    }
}

@media (max-width: 767px) {
    .tab_accred td {
        padding: 0.75em 1%;
    }
}

@media (max-width: 359px) {
    .tab_accred td {
        padding-left: 0;
        padding-right: 0;
    }
}

/* alternance couleur des lignes en fonction de la couleur du bloc de fond */

[class*="p_"] > div:nth-child(even) .tab_accred tr:nth-child(even) > td {
    background-color: #ededed;
}

[class*="p_"] > div:nth-child(odd) .tab_accred tr:nth-child(even) > td {
    background-color: #e1e3e5;
}

[class*="p_"] > div:nth-child(even) .tab_accred tr:nth-child(odd) > td {
    background-color: #e1e3e5;
}

[class*="p_"] > div:nth-child(odd) .tab_accred tr:nth-child(odd) > td {
    background-color: #f5f7f8;
}

.tab_accred tr > td {
    padding: 8px 10px;
}

/* old ? */
.tab_accred_wrapper {
    width: 100%;
    overflow-x: auto;
}

table.tab_accred tr .coul1 {
    color: #fff;
    background-color: #434649;
}

table.tab_accred tr .coul2 {
    color: #fff;
    background-color: #55595C;
}

table.tab_accred tr .coul3 {
    color: #fff;
    background-color: #6B6E71;
}

table.tab_accred tr .coul4 {
    color: #fff;
    background-color: #7A7D80;
}

/* en-têtes */

table.tab_accred tr.entete td.fest,
table.tab_accred tr.entete .conf,
table.tab_accred tr.entete .mifa {
    font-size: 1.195em;
}

.tab_accred th:first-child {
    text-align: left;
    width: 40%;
}

table.tab_accred .tab-ligne-h1 td,
table.tab_accred th,
table.tab_accred .entete td,
table.tab_accred .entete td:first-child {
    text-align: center;
    padding: 1em 0.75em;
    background-color: #6b6e71 !important;
    color: #ffffff;
    font-weight: 600;

    font-size: 1.5em;
}

.tab-ligne-h1 > td > h2,
.tab-ligne-h1 > th > h2 {
    margin: 0;
    color: #ffffff !important;
}

.tab-ligne-h2 > td {
    text-align: center !important;
    background-color: #ffffff !important;
}

.tab-ligne-h2 h3 {
    display: inline-block;
    margin: 0 1em;
    text-align: center;
    font-size: 1.5em;
    color: #35383b;
}

@media (max-width: 767px) {

    .tab-ligne-h1 {
        font-size: 0.6em !important;
    }

    .tab-ligne-h1 td, table.tab_accred .entete td, table.tab_accred .entete td:first-child, table.tab_accred th {
        font-family: Arial, sans-serif;
        font-weight: normal;
        line-height: 1.2em;
        padding: 1em 1% !important;
    }

    .tab-ligne-h2 {
        font-size: 0.75em !important;
    }

    .tab-ligne-h2 .icon50_svg {
        width: 25px;
        height: 25px;
    }

}

@media (max-width: 359px) {

    .tab-ligne-h1 > th:first-child {
        font-size: 1em;
    }

    table.tab_accred tr td:first-child {
        font-size: 0.9em;
    }

    .tab-ligne-h2 .icon50_svg {
        display: none;
    }

}

/* 1ere cellule de chaque ligne */

table.tab_accred td:first-child {
    text-align: left;
    max-width: 23%;
    font-weight: bold;
}

/* gestion colonne tarif actif */
table.tab_accred tr td.actif, table.tab_accred tr.actif td {
    background-color: #E3E6E9;
}

table.tab_accred tr:nth-child(odd) td.actif, table.tab_accred tr.actif:nth-child(odd) td {
    background-color: #D9DCDF;
}

table.tab_accred tr.catevent, table.tab_accred span.tarif {
    color: #898C8F; /*#ACAFB2;*/
}

table.tab_accred tr.catevent td:first-child {
    color: #fff;
}

table.tab_accred tr.catevent.actif {
    color: #fff;
    font-weight: bold;
    background-color: #898C8F; /*#6B6E71; /*#ACAFB2;*/
}

table.tab_accred tr.catevent.actif td {
    background-color: inherit !important;
}

table.tab_accred tr.catevent.actif td.actif {
    background-color: #6B6E71; /*#898C8F;*/
}

table.tab_accred tr.tarif.actif {
    font-weight: bold;
    background-color: #f8ffc1; /*#6B6E71; /*#ACAFB2;*/
}

table.tab_accred tr.tarif.actif td {
    background-color: inherit !important;
}

table.tab_accred tr.tarif.actif td.actif {
    background-color: #f8ffc1; /*#898C8F;*/
}

table.tab_accred tr.actions td:not(:first-child) {
    padding: 0;
}

table.tab_accred tr.actions > td {
    background-color: transparent !important;
}

/* cellule btn action dans le tableau */

table.tab_accred tr.actions a.btn {
    display: block;
}

.tab_accred .actions [class*="icon20_"] {
    float: left;
}

table.tab_accred th {
    background-color: #6B6E71;
}

table.tab_accred a.neutre {
    color: #ffffff;
}

table.tab_accred a.neutre:hover {
    background-color: #898C8F;
}

table.tab_accred tr span.important {
    color: #e72222; /* rouge teinte 4 */
    font-size: 1.045em;
}

@media (max-width: 767px) {
    table.tab_accred tr.actions a.btn > label {
        display: none;
    }
}

/* ---- Bloc visuels ---- */

.lieux .blc.visu h3 {
    font-size: 1.5em;
    padding: 5px;
}




.titre_partie, .programmation h2 {
    font-style: italic;
    font-weight: 600;
    font-size: 4em;

    margin: 0.25em 0 0.1em;
    padding: 0;
    text-align: center;
    color: #434649;
}

.titre_partie {
    width: 100%;
    margin: 0.5em 0;
}

.programmation h2 {
    width: 100%;
    margin: 0.4em 0;
}

ul.tuile_programme {
    list-style-type: none;
    font-size: 0;
    /*text-align: center;*/
    padding-left: 0;
    margin: 0;
}

ul.tuile_programme li {
    width: 190px;
    display: inline-block;
    font-size: 13px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0;
}

ul.tuile_programme li .blc.visu {
    width: 100%;
}

ul.tuile_programme.special_compet li {
    width: 150px;
}

ul.tuile_programme li:last-child {
    margin-right: 0;
}

ul.tuile_programme li div.blc.visu {
    margin: 0;
}

ul.tuile_programme .blc.visu h3 {
    text-align: left;
}

ul.tuile_programme li {
    text-align: center;
}

ul.tuile_programme.selection .blc.visu h3 {
    text-align: center;
}

/* Liste Planifications */

ul.liste_enligne li a:hover {
    color: #fff;
}

/* ----- billetterie -----*/
#billetterie {
    min-height: 1080px;
}

div#compte_a_rebours {
    text-align: center;
    margin: 1em 25%;
    background-color: #4b368f;
}

div#compte_a_rebours h4 {
    color: #eae8fc;
}

div#compte_a_rebours p {
    font-weight: 400;
    font-size: 2.5em;

    color: #fff;
}

div#compte_a_rebours p span {
    position: relative;
    top: 0;
    font-size: 0.6em;
    color: #bdb8e3;
}

div#compte_a_rebours #recharger_page {
    color: #fff;
    background-color: #897ec3;
    text-decoration: none;
    padding: 5px 20px;
    margin: 15px;
    display: inline-block;
}

div#compte_a_rebours #recharger_page:hover {
    background-color: #6b5bb0;
}

/* Spec palmares */

ul.liste_films li h6 {
    padding: 0.3em;
    font-weight: 600;
    font-size: 1.3em;
    line-height: 1.1em;

}

/* Player video */

/* Stats vidéothèque */
div.blc_stats_video {
    background-color: #e3e6e9;
    padding-bottom: 20px;
    position: relative;
}

div.blc_stats_video div.stats_video {
    padding: 10px 20px 10px 6%;
}

div.blc_stats_video div.visites_par_jour {
    padding-left: 6%;
}

div.blc_img_video {
    width: 790px;
    overflow: hidden;
}

div.blc_img_video > img {
    width: 100%;
}

div.blc_stats_video h2 {
    position: absolute;
    top: 260px;
    padding: 8px 10px 8px 20px;
}

div.blc_stats_video h2, div.blc_stats_video h2 a {
    font-weight: bold;
}

div.blc_stats_video h3 {
    padding-left: 20px;
}

table.stats_video_detail tr {
    border-bottom: solid 1px;
    border-bottom-color: #eaeaef;
}

table.stats_video_detail tr > td, table.stats_video_detail tr > th {
    text-align: left;
}

table.stats_video_detail tr:last-child {
    border-bottom: none;
}

div.blc_stats_detail {
    margin-top: 20px;
    padding: 5px;
    background-color: #ffffff !important;
    color: #000;
}

div.sommaire_stats_video {
    padding-bottom: 40px !important;
}

div.sommaire_stats_video p {
    padding-bottom: 0;
}

div.sommaire_stats_video a {
    margin-top: 5px;
}

div.chartdiv {
    background-color: #eaeaef !important;
}

/* Commentaires Facebook */
.comment_fb {
    background-color: #ffffff;
    margin-top: 20px;
}

.comment_fb > h3 {
    margin-top: 0;
    padding-left: 1em;
}

/* Partages sur les réseaux sociaux */
div.partages {
    background-color: #ffffff;
    text-align: right;
    padding-right: 1em;
    height: 2em;
}

/* liste séances recrutement Mifa */

.lst_recrut_list {
    background-color: #ededed !important;
}

.cat_recrut .FanionPictoProg {
    display: none;
}

.cat_recrut .vignette_rdv_plng {
    max-width: initial;
    min-height: initial;
}

@media (max-width: 599px) {
    .cat_recrut .vignette_rdv_plng {
        width: auto;
        height: auto;
        position: relative;
        left: 50%;
        margin-left: -60px;
        margin-top: 1em;
        border-radius: 50%;
    }
}

.cat_recrut > .infoProg > h3 {
    font-size: 1.5em !important;
}

.cat_recrut > .infoProg > h4 {
    margin: 0 !important;
}

/* ==========================================================================
   Annecy V2  - Ajustements responsive
   ========================================================================== */
@media (min-width: 1200px) {

    .form.inscr_newsletter button span {
        display: inline-block;
    }

    ul.tuile_programme.inscr {
        padding: 20px 0;
        width: 100%;
    }
}

@media (max-width: 979px ) {
    /*767px) {*/
    #billetterie {
        min-height: 1300px;
    }

    div#ag_vide h5 span {
        display: none;
    }

}

@media (max-width: 599px) {

    .blc_acc_pro ul {
        margin-left: 20px;
    }

    .blc.contact.unique > ul > li {
        width: 98%;
    }
}

/*Smartphone*/
@media (max-width: 480px) {

    .switchAffichageProg .item {
        padding-bottom: 30px;
    }
}

@media (max-width: 320px) {
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   PROGRAMMATION (refonte 2016)
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/* adaptations 2016 skin canal + >>> à enlever ---- début */
/*
#conteneur_programme > .prog__list { margin: 0 1em; }
#conteneur_programme > .grd-cat__list { margin: 0 1em; }
.event-journee { padding: 0 1em; }
.heure-agenda > h2 { background-color: transparent !important; }
*/
/* adaptations 2016 skin canal + >>> à enlever ---- fin */

/*
==============================================================
==============================================================

  programmation-header

Regroupe le titre et le selecteur-vue
==============================================================
==============================================================
*/


/*
------------------------------------------------
------------------------------------------------
  sélecteur vue
------------------------------------------------
------------------------------------------------
*/

.selecteur-vue__liste {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 0;
    padding: 0;
    height: 100%;
}

@media (max-width: 768px) {
    .selecteur-vue__liste {
        margin-bottom: 1em;
    }
}

.selecteur-vue__item {
    flex-grow: 1;
}

@media (min-width: 768px) {
    .selecteur-vue__item {
        margin-left: 1px;
        width: 120px;
    }
}

@media (max-width: 767px) {
    .selecteur-vue__item {
        margin: 0.5em;
        width: 80px;
        height: 80px;
    }
}

.selecteur-vue__item > a {
    display: block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #FFFFFF !important;
    text-decoration: none;
    transition: background-color 0.1s linear 0s;
}

@media (min-width: 768px) {
    .selecteur-vue__item > a {
        padding: 1em;
    }
}

@media (max-width: 767px) {
    .selecteur-vue__item > a {
        border-radius: 50%;
        padding: 0.75em;
    }
}

.selecteur-vue__item > a {
    background-color: #6642b5;
}

.selecteur-vue__item > a:hover,
.selecteur-vue__item > a:focus {
    background-color: #0759a6;
}

.selecteur-vue__item > a:active {
    background-color: #401e78;
}

.selecteur-vue__item > a.actif {
    background-color: #35383b;
    cursor: context-menu;
    font-weight: bold;
}

.selecteur-vue__item > a.desactive {
    background-color: #b7a5e6;
    cursor: context-menu;
}

.selecteur-vue__item > a > .picto, .selecteur-vue__item > a > .texte {
    display: inline-block;
}

@media (max-width: 767px) {
    .selecteur-vue__item > a > .texte {
        font-size: 10px;
        bottom: 0;
        position: absolute;
        background-color: inherit;
        padding: 0 5px;
        box-sizing: border-box;
        width: 100%;
        left: 50%;
        margin-left: -50%;
        border-radius: 11px;
    }
}

.selecteur-vue__item > a > .picto {
    height: 50px;
    width: 50px;
    background-image: url('../interface/sprite50.png');
}

.selecteur-vue__item:nth-child(1) > a > .picto {
    background-position: 0 -400px;
}

.selecteur-vue__item:nth-child(2) > a > .picto {
    background-position: 0 -300px;
}

.selecteur-vue__item:nth-child(3) > a > .picto {
    background-position: 0 -350px;
}

.selecteur-vue__item:nth-child(4) > a > .picto {
    background-position: 0 -250px;
}

.selecteur-vue__item > a > .texte {
    text-align: center;
    width: 100%;
}

/*
------------------------------------------------
------------------------------------------------
  Coming soon
------------------------------------------------
------------------------------------------------
*/

.comingSoon {
    position: absolute;
    box-sizing: border-box;

    visibility: hidden;
    height: 0;
    padding: 0 0.5em;
    opacity: 0;
    transition: all 0.15s 0.15s;
    overflow: hidden;

    top: 95%;
    width: 150%;
    left: 50%;
    margin-left: -75%;

    color: #ffffff;
    text-align: center;
    background-color: #7A6CB8;
    z-index: 50;
}

a:hover .comingSoon,
a:focus .comingSoon {
    visibility: visible;
    height: auto;
    padding: 0.5em 0.5em;
    opacity: 1;
    transition: all 0.15s 0.15s;
}

.comingSoon:before {
    content: "";
    display: block;
    position: absolute;
    background-image: url("../interface/pictos/pointeBulleViolet.png");
    top: -6px;
    height: 6px;
    left: 50%;
    margin-left: -4px;
    width: 9px;
}

.comingSoon > a {
    display: inline-block;
    margin: 10px 5px 5px;
    padding: 5px 8px;
    opacity: 1;
}

.comingSoon > span {
    display: block;
    font-size: 1.3em;
}

/*
==============================================================
==============================================================

  agenda-sort

Cette barre permet de filtrer rapidement le contenu de la page.
==============================================================
==============================================================
*/

@media (max-width: 767px) {
    .agenda-sort {
        position: fixed;
        display: block;
        width: 80%;
        height: 100%;
        right: 0;
        top: 0;
        margin: 0;
        z-index: 70;
        background-color: #e1e3e5;
        transform: translateX(100%);
        transition: transform 0.5s ease;
    }

    .agenda-sort.active {
        box-shadow: 0 0 #35383b;
        transform: translateX(0%);
    }
}

.agenda-sort__liste, .filtres-programme__liste {
    padding: 0;
    margin: 0 0 1px;
    display: flex;
    justify-content: space-between;
    list-style: none;
}

@media (max-width: 767px) {
    .agenda-sort__liste, .filtres-programme__liste {
        justify-content: space-between;
        flex-direction: column;
        height: calc(100% - 40px);
        box-sizing: border-box;
        padding: 12%;
    }
}

.evenements-programme__liste {
    padding: 0;
}

.evenements-programme__liste li.prog__item {
    display: none;
}

.forceDisplay {
    display: flex !important;
}

.loader-programme__liste {
    position: relative;
    top: 150px;
    left: 50%;
    width: 50px;
    height: 400px;
    margin-left: -25px;
}

.hide-programme__element {
    display: none;
}

p.countdown_element {
    display: inline-block;
    font-size: 1.25em;
    margin-bottom: 10px;
}

#event_countdown {
    margin-bottom: 30px;
}

#event_countdown .countdown_element > span {
    padding: 18px 10px;
    font-size: 2em;
    color: #FFFFFF;
    border-radius: 5px;
    background: #434649;
    display: inline-block;
    margin-top: 10px;
}

#event_countdown .countdown_separator {
    padding: 10px;
    font-weight: lighter;
    font-size: 2.8em;
}

#event_countdown p:first-child {
    font-size: 1.5em;
    margin-bottom: 17px;
}

#webinar_content {
    background: #EDF0F3;
    padding: 46px 0;
    position: relative;
}

div#webinar_content {
    text-align: center;
}

#webinar_content h2 {
    font-weight: bold;
    font-style: italic;
    margin-bottom: 37px;
}

div.event_live_help {
    position: absolute;
    background-color: #CFD2D5;
    padding: 40px;
    text-align: initial;
    opacity: 0.95;
    color: #000000;
    height: 80%;
    top: 0px;
}

div.event_live_help div {
    vertical-align: middle;
    margin-top: 50px;
}

#webinar_content .event_live_btn_container {
    margin-bottom: 50px;
}

#btn_live_open_help {
    color: #0080C6;
    font-size: 1.6em;
    font-weight: bolder;
}

#btn_live_close_help {
    color: #535659;
    border-radius: 100%;
    background: #FFFFFF;
    padding: 5px 5px 5px 5px;
    text-decoration: none;
    font-size: 1.8em;
    position: absolute;
    top: 10px;
    right: 20px;
    height: 22px;
    width: 20px;
    text-align: center;
}

#btn_join {
    background: #FF0000;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFFFFF;
    padding: 12px 34px;
    border-radius: 4px;
}

.agenda-sort__item {
    padding: 0;
    text-align: center;
    transition: background-color 0.1s linear 0s;
    cursor: pointer;
}

@media (min-width: 768px) {
    .agenda-sort__item {
        flex-grow: 1;
    }
}

@media (max-width: 767px) {
    .agenda-sort__item {
        border-bottom: solid 2px #e1e3e5;
    }

    .agenda-sort__item:nth-child(4) {
        display: none;
    }
}

.agenda-sort__item:nth-child(n+5) {
    margin-left: 1px;
}

.agenda-sort__item {
    background-color: #edf0f3;
}

.agenda-sort__item:hover,
.agenda-sort__item:focus {
    background-color: #d3d6d9;
}

.agenda-sort__item:active {
    background-color: #bfc2c5;
}

.agenda-sort__item.actif {
    background-color: #d3d6d9;
}

.agenda-sort__item.desactive {
    opacity: 0.5;
    cursor: context-menu;
}

.agenda-sort__item > a,
.agenda-sort__item > span,
.agenda-sort__item > button {
    display: block;
    box-sizing: border-box;
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
    padding: 9px 15px;
    margin: 0;
    font-weight: inherit;
    color: inherit;
}

@media (max-width: 767px) and (min-height: 480px) {
    .agenda-sort__item > a,
    .agenda-sort__item > span,
    .agenda-sort__item > button {
        padding: 2em 1em;
    }
}

@media (max-width: 767px) and (max-height: 480px) {
    .agenda-sort__item > a,
    .agenda-sort__item > span,
    .agenda-sort__item > button {
        padding: 0.5em 1em;
    }
}

/*
------------------------------------------------
------------------------------------------------
  états des boutons
------------------------------------------------
------------------------------------------------
*/

.agenda-sort__item, .agenda-sort__item > a, .agenda-sort__item > a:visited, .agenda-sort__item > a:hover, .agenda-sort__item > a:focus, .agenda-sort__item > a:active {
    color: #123479;
    text-decoration: none;
}

.agenda-sort__item > a:hover, .agenda-sort__item > a:focus > .agenda-sort__item > a:active {
    text-decoration: none;
}

.agenda-sort__item.checked, .agenda-sort__item.checked > a {
    color: #ffffff;
    font-weight: bold;
}

.agenda-sort__item.checked {
    background-color: #6642b5
}

.agenda-sort__item.checked:hover,
.agenda-sort__item.checked:focus {
    background-color: #123479
}

.agenda-sort__item.checked:active {
    background-color: #0759a6
}

.agenda-sort__item:not(.checked) .pict20_resa {
    background-position: -20px -60px;
}

.agenda-sort__item:not(.checked) .pict20_coeur {
    background-position: -20px -80px;
}

.agenda-sort__item:not(.checked) .pict20_filtre {
    background-position: -20px -420px;
}

.pict20_filtre {
    background-position: -20px 0;
}

/*
------------------------------------------------
------------------------------------------------
  boutons sur mobile déploiment du menu et validation
------------------------------------------------
------------------------------------------------
*/

.agenda-sort__btn-deploy,
.agenda-sort__btn-valid {
    position: absolute;
    overflow: hidden;
    width: 42px;
    height: 42px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 1px #e1e3e5;
}

.agenda-sort__btn-deploy {
    left: -41px;
    top: 60%;
}

.agenda-sort__btn-valid {
    right: 19px;
    bottom: 19px;
}

.agenda-sort__btn-deploy {
    background-color: #30155c;
}

.agenda-sort__btn-deploy:hover,
.agenda-sort__btn-deploy:focus {
    background-color: #401e78;
}

.agenda-sort__btn-deploy:active {
    background-color: #0759a6;
}

.agenda-sort__btn-valid {
    background-color: #123479;
}

.agenda-sort__btn-valid:hover,
.agenda-sort__btn-valid:focus {
    background-color: #123479;
}

.agenda-sort__btn-valid:active {
    background-color: #123479;
}

@media (min-width: 768px) {
    .agenda-sort__btn-deploy, .agenda-sort__btn-valid {
        display: none;
    }
}

@media (max-width: 767px) {
    .agenda-sort__btn-deploy, .agenda-sort__btn-valid {
        display: block;
    }
}

/*
==============================================================
==============================================================

  onglets-jours

La liste des jours où il y a quelque chose à afficher en résultats.
==============================================================
==============================================================
*/

.onglets-jours__liste {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0 0 10px;
    list-style: none;
}

.onglets-jours__item {
    flex-grow: 1;
    text-align: center;
}

.onglets-jours__item:not(:first-child) {
    margin-left: 1px;
}

.onglets-jours__item > a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 5px 5%;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-weight: bold;
}

.onglets-jours__item > a, .onglets-jours__item > a:visited, .onglets-jours__item > a:hover, .onglets-jours__item > a:focus {
    color: #ffffff;
}

.onglets-jours__item > a.passe {
    opacity: 0.5;
}

.onglets-jours__item > a.actif {
    color: #FFF;
    cursor: context-menu;
    padding-top: 10px;
    padding-bottom: 10px;
}

.onglets-jours__item > a.actif, .onglets-jours__item > a.actif:hover, .onglets-jours__item > a.actif:focus, .onglets-jours__item > a.actif:active {
    background-color: #35383b;
}

@media (max-width: 599px) {
    .onglets-jours__item > a > span {
        display: none;
    }
}

/*
==============================================================
==============================================================

  menuCat

Le menuCat permet de cocher et décocher dans le détail les différentes catégories.
Par défaut, il est caché en étant décalé à droite hors de la fenêtre.
En activant le bouton "affiner le tri", le menu de redécale vers la gauche pour à paraitre sur le bord de la fenetre.
==============================================================
==============================================================
*/

.menuCat_container {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.5s ease;
    background-color: #d9dcdf;
    z-index: 70;
}

@media (max-width: 767px) {
    .menuCat_container {
        position: fixed;
        display: block;
        width: 80%;
        height: 100%;
        right: 0;
        top: 0;
        margin: 0;
        z-index: 70;
    }
}

@media (min-width: 768px) {
    .menuCat_container {
        width: 340px;
    }
}

.menuCat_container.active {
    transform: translateX(0%);
}

.menuCat {
    padding-left: 0;
    margin: 0;
}

.menuCat, .niveau1, .niveau2, .niveau3, .niveau4 {
    list-style: none;
    margin: 0;
    box-sizing: border-box;
}

.menuCat [class*="niveau"] > ul {
    margin: 0 0.5em;
    padding: 0.25em 0;
    border-top: 2px solid #55595c;
}

.menuCat .choix {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0.15em 0.5em;
    margin-bottom: 0.15em;

    font-size: 1.25em;
    font-weight: 600;
}

.menuCat .niveau2 .choix:hover,
.menuCat .niveau2 .choix:focus {
    background-color: rgba(255, 255, 255, 0.7);
}

.menuCat .niveau2 .choix:active {
    background-color: rgba(255, 255, 255, 1);
}

.menuCat .choix:only-child {
    font-family: Arial, sans-serif;
    font-size: 1em;
    font-weight: normal;
}

.menuCat .choix > input {
    margin-right: 0.5em;
}

/*
------------------------------------------------
------------------------------------------------
  Spécificités Niveau 1
------------------------------------------------
------------------------------------------------
*/

.menuCat .niveau1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1em;
}

.menuCat .niveau1 > ul {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 !important;
    background-color: rgba(255, 255, 255, 0.8);
    /* pour une belle transition vers l'état clicked : */
    opacity: 0;
    visibility: hidden;
    border-top-width: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 0;
    transition: opacity 0.3s,
    height 0.3s,
    visibility 0.15s 0.3s;
}

.menuCat .niveau1.clicked > ul {
    opacity: 1;
    height: auto;
    margin: 0 1em 1em;
    padding: 0.25em;
    visibility: visible;
    transition: opacity 0.3s,
    height 0.3s;
}

.menuCat .niveau1 > .choix {
    padding: 0 0 0.1em;
    width: calc(100% - 40px);
    order: -1;
    color: #FFFFFF;
    font-size: 1.5em;
}

.menuCat > .niveau1 > .dePlier {
    padding: 0 10px;
    width: 20px;
    display: block;
    height: 20px;
}

/*
==============================================================
==============================================================

  program name

La barre de tri pour changer l'ordre des programmes affichés
==============================================================
==============================================================
*/

.program-name > div {
    box-sizing: border-box;
    padding: 2.5em;
    background-color: #edf0f3;
    text-align: center;
    margin-bottom: 1px;
}

.program-name h2 {
    font-size: 2.5em;

    font-weight: 600;
    margin: 0.25em 0;
    line-height: 1em;
}

a.display-sorting:link, a.display-sorting:visited {
    color: #123479;
}

a.display-sorting:hover, a.display-sorting:focus {
    color: #0759a6;
}

a.display-sorting:active {
    color: #401e78;
}

.display-sorting > .icon20_filtre {
    background-position: -20px -420px;
}

/*
==============================================================
==============================================================

  Sort-programme

La barre de tri pour changer l'ordre des programmes affichés
==============================================================
==============================================================
*/

.sort-program {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sort-program__item {
    flex-grow: 2;
    margin-left: 1px;
}

.sort-program__item:first-child {
    flex-grow: 3;
    margin-left: 0;
}

.sort-program__item:last-child {
    flex-grow: 1;
}

.sort-program__item > button {
    position: relative;
    width: 100%;
    text-align: left;
    border: none;
    padding: 7px 30px 7px 7px;
    color: #fff;
    transition: background-color 0.15s;
    margin: 0 0 1px;
}



.sort-program__item .pict.fleche.ordre-vertcl {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 5px;
    right: 5px;
   /* background-image: url("../interface/sprite-fleches.png");*/
    background-position: -80px -320px;
}

/*
==============================================================
==============================================================

  event-journee

L'accordeon pour afficher les événements à la journée
==============================================================
==============================================================
*/

.event-journee {
    margin-top: 20px;
    box-sizing: border-box;
}

.event-journee > a {
    display: block;
    position: relative;
    padding: 10px;
    font-size: 1.75em;
    text-decoration: none;

    font-weight: 600;
}

.event-journee > a:link, .event-journee > a:visited, .event-journee > a:hover, .event-journee > a:focus, .event-journee > a:active {
    color: #fff;
}

.event-journee .btn_pict {
    position: absolute;
    top: 12px;
    right: 12px;
}

.event-journee .prog__list {
    padding: 0 1em 1em;
}

/*
==============================================================
==============================================================

  prog__list

La liste des élements de programmes - général
==============================================================
==============================================================
*/

.prog__list {
    margin: 0;
    padding: 0 !important;
    list-style: none !important;
}

/*
==============================================================
==============================================================

  heure-agenda

Affichage des heure de chaque tranche de programme
==============================================================
==============================================================
*/

.heure-agenda {
    margin: 20px 0 10px;
    text-align: center;
}

.heure-agenda > h2 {
    margin: 0;
    display: inline-block;
    padding: 2px 5px;
    color: rgba(53, 56, 59, 0.9);
    background-color: #CFD2D5;
}

/*
==============================================================
==============================================================

  prog__item

Affichage du détail d'un élément de prog : vignette, description, boutons
==============================================================
==============================================================
*/

.prog__item {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 0 1px !important;
    min-height: 100px;
}

/* Hack pour programme:agenda mode billetterie : lancé la place pour les boutons de résa sur 3 lignes */
#conteneur_programme .prog__item {
    min-height: 140px;
}

.prog__item.cliquable {
    cursor: pointer;
}

.prog__item {
    background-color: #ffffff;
}

.prog__item.cliquable:hover,
.prog__item.cliquable:focus {
    background-color: #edf0f3;
}

.prog__item.cliquable:active {
    background-color: #e1e3e5;
}

@media (max-width: 599px) {
    .prog__item {
        flex-wrap: wrap;
    }
}

@media (min-width: 600px) {
    .imgProg {
        width: 15%;
        max-width: 190px;
    }

    .actionProg {
        width: 160px;
    }

    .infoProg {
        margin-left: 15%;
        flex-grow: 1;
        width: calc(85% - 160px);
    }

    .imgRecrut {
        width: auto;
        max-width: 190px;
    }
}

@media (max-width: 599px) {
    .infoProg,
    .actionProg,
    .imgProg {
        width: 100%;
    }
}

.actionProg, .infoProg {
    box-sizing: border-box;
}

.actionProg, .infoPro a h3 {
    margin: 0;
}

.actionProg, .infoPro a h3 span {

}

.actionProg, .infoPro a h3 span.live {

}

@media (min-width: 600px) {
    .actionProg, .infoProg {
        padding: 0.5em 1em;
    }
}

@media (max-width: 599px) {
    .actionProg, .infoProg {
        padding: 1em 10%;
    }

    .actionProg {
        padding-top: 0.1em;
    }

    .infoProg {
        padding-bottom: 0.1em;
    }
}

.prog__item .info {
    flex-grow: 1;
}

/* utilisé sur la page des recrutements sur le network */

/*
------------------------------------------------
------------------------------------------------
  réglage du background dans les fiches
------------------------------------------------
------------------------------------------------
*/

.p_fiche .prog__item:not(:last-child) {
    border-bottom: 1px solid #d3d6d9;
    margin-bottom: 0 !important;
}

.p_fiche > div:nth-child(odd) .prog__item {
    background-color: #ffffff;
}

.p_fiche > div:nth-child(even) .prog__item {
    background-color: #EDF0F3;
}

.p_fiche > div .prog__item.cliquable:hover,
.p_fiche > div .prog__item.cliquable:focus {
    background-color: #e1e3e5;
}

.p_fiche > div .prog__item.cliquable:active {
    background-color: #d3d6d9;
}

/*
==============================================================
==============================================================

  imgProg

Cette div affiche la vignette du programme avec un fanion qui
donne la catégorie de l'évent (sauf pour les LMC / LMHC).
S'il n'y en a pas, elle affiche un fond uni de la couleur de
l'évènement et un picto.
==============================================================
==============================================================
*/

.imgProg {
    position: relative;
    display: block;
}

.imgProg {
    overflow: hidden;
    background-color: #FFFFFF;
}

@media (min-width: 600px) {
    .imgProg {
        height: 100%;
        position: absolute;
        top: 0;
        margin-right: 0;
        border-right: 1px solid #E3E6E9;
    }
}

.imgProg > a {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    padding: 0;
    margin: 0;
}

@media (min-width: 600px) {
    .imgProg > a {
        height: 100%;
    }
}

@media (max-width: 599px) {
    .imgProg > a {
        height: 70px;
    }

    .recrut .imgProg > a {
        height: auto;
    }
}

@media (min-width: 600px) {
    .vignette_rdv_plng {
        min-height: 100%;
        height: auto;
        min-width: 100%;
        max-width: none;
    }
}

@media (max-width: 599px) {
    .vignette_rdv_plng {
        min-height: 100%;
        height: auto;
        width: 100%;
    }
}

.prog__encours,
.prog__nouveau {
    display: block;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    z-index: 10;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    background-color: #35383b;
}

@media (min-width: 600px) {
    .prog__encours, .prog__nouveau {
        position: absolute;
    }
}

@media (max-width: 599px) {
    .prog__encours, .prog__nouveau {
        position: relative;
    }
}

/*
==============================================================
==============================================================

  pictoProg

Les pictos se positionnent sur la vignette ou sur un fond uni,
soit dans la vue par liste, soit dans la vue fiche.
Sur la vignette, ilss'affichent sur un triangle
de la couleur de la catégorie : fanionPictoProg
==============================================================
==============================================================
*/

.pictoProg {
    display: block;
    position: absolute;
    overflow: hidden;
}

.imgProg_fiche .pictoProg {
    height: 120px;
    width: 120px;
    max-width: inherit;
}

.pictoProg img {
    max-width: inherit;
}

/* quand le picto est sur un fond uni */

.imgProg > a > .pictoProg,
.imgProg > .pictoProg {
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
    top: 50%;
    height: 60px;
    width: 60px;
}

/* quand le picto est sur un fanion */

.FanionPictoProg > .pictoProg {
    height: 25px;
    width: 25px;
    right: 0;
    top: 0;
    margin-top: 2px;
    margin-right: 2px;
}

.programme-detaile .FanionPictoProg > .pictoProg {
    height: 22px;
}

/* quand le picto est sur une tuile */

.tuile .pictoProg {
    background-image: url("../interface/programmation_pictos_acy.png");
}

/*
------------------------------------------------
------------------------------------------------
  le fanionPictoProg
------------------------------------------------
------------------------------------------------
*/

.FanionPictoProg {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

.imgProg > .FanionPictoProg {
    height: 50px;
    width: 50px;
}

.imgProg_fiche > .FanionPictoProg {
    height: 100px;
    width: 100px;
}

.imgProg_fiche > .FanionPictoProg > .pictoProg {
    height: 60px;
    width: 60px;
    left: 70%;
    top: 30%;
    margin-top: -30px;
    margin-left: -30px;
}

/*
==============================================================
==============================================================

  infoProg

Cette div affiche les infos textuelles de l'évent : titre,
catégorie, lieu, description, intervenants, heures...
==============================================================
==============================================================
*/

@media (max-width: 599px) {
    .catProg, .infoProg h3, .infoProg h4 {
        text-align: center;
    }

    .infoProg .infoProg__det-prat {
        justify-content: center;
    }

    .planif__liste .infoProg__det-prat {
        display: block;
    }
}

.infoProg h3 {
    /* ces déclarations entrent en collision avec les h3 définis pour les fiches,
  d'où les !important le temps que le problème soit réglé */
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    color: #434649 !important;
    font-weight: 400;
    font-size: 1.3em;
    line-height: 1em;
}

.infoProg h3 a {
    line-height: 1.4em;
}

.infoProg h3 span,
.blc_enavant.home_enavant h3 span {
    position: relative;
    top: -2px;
    margin-left: 6px;
    background-color: #bbb;
    color: #fff;
    padding: 2px 5px;
    font-size: 0.75em;
    white-space: nowrap;
}

.blc_enavant.home_enavant h3 span {
    margin-left: 0;
}

.infoProg h3 span.live,
.blc_enavant.home_enavant h3 span.live {
    background-color: red;
}

.infoProg h3 span.sousType, .liste_films.cliquable > li > h3 span.sousType {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 0 0.2em;
    font-size: 0.5em;
}

.p_fiche .infoProg > h3 {
    /* ces déclarations entrent en collision avec les h3 définis pour les fiches,
  d'où les !important le temps que le problème soit réglé */
    font-size: 1.5em !important;
}

.infoProg > h4,
.infoProg > p {
    margin: 0;
    color: #898c8f;
}

[class*="infoProg__det-prat"] {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0.25em 0;
    list-style: none !important;
    color: #898c8f;
}

[class*="infoProg__det-prat"] > li {
    margin: 0 1em 0 0;
}

[class*="infoProg__det-prat"] > li:last-child {
    margin-right: 0;
}

[class*="infoProg__det-prat"] > li > [class*="pict20_"] {
    position: relative;
    bottom: 2px;
    opacity: 0.3;
}

[class*="infoProg__det-prat"] > li > .pict20_loca {
    background-position: -100px -100px;
}

[class*="infoProg__det-prat"] > li > .pict20_horr {
    background-position: -100px -120px;
}

[class*="infoProg__det-prat"] > li > .pict20_son {
    background-position: -100px -360px;
}

[class*="infoProg__det-prat"] > li > .pict20_srt {
    background-position: -100px -380px;
}

/* Jérémy aime pas :D
[class*="infoProg__det-prat"] > li:not(:last-child):after {
  content: "–";
  margin: 0 0.5em 0 0.75em;
}
*/


/*
==============================================================
==============================================================

  EVENEMENTS MULTIPLES

Comme les petits dej network du ForumBlanc
Les évenements de multiples sont des lignes dépliables pour afficher
des sous-événements.
==============================================================
==============================================================
*/

.evnt-multiple > .infoProg {
    width: 83%;
    padding: 1em;
    box-sizing: border-box;
}

.infoProg__sous-evnt {
    list-style: outside none none;
    padding: 0;
    margin: 0;
}

.infoProg__sous-evnt > li {
    position: relative;
    margin: 10px 0;
    background-color: #f1f4f6;
    transition: background-color 0.15s linear;
}

@media (max-width: 499px) {
    .infoProg__sous-evnt > li > .imgProg {
        display: none;
    }

    .infoProg__sous-evnt > li > .infoProg {
        width: calc(100% - 10px);
        left: inherit;
    }
}

.evnt-multiple:hover .infoProg__sous-evnt > li {
    background-color: #fff;
}

.evnt-multiple > .infoProg > *:not(.infoProg__sous-evnt) {
    padding-right: 20px;
}

.infoProg__sous-evnt > li:not(.seance_reserve) > .imgProg {
    border: 1px solid #E3E6E9;
}

.infoProg__sous-evnt .imgProg > .vignette_rdv_plng {
    width: 100%;
}

@media (min-width: 1200px) {
    .infoProg__sous-evnt .imgProg > .vignette_rdv_plng {
        margin-top: -40%;
    }
}

@media (max-width: 1199px) and (min-width: 980px) {
    .infoProg__sous-evnt .imgProg > .vignette_rdv_plng {
        margin-top: -25%;
    }
}

@media (max-width: 978px) and (min-width: 768px) {
    .infoProg__sous-evnt .imgProg > .vignette_rdv_plng {
        margin-top: -40%;
    }
}

.evnt-multiple.deplie > .voirFiche {
    height: 80px;
}

.evnt-multiple > .voirFiche > img {
    transform: rotate(90deg);
    transition: rotate linear 15ms;
}

.evnt-multiple.deplie > .voirFiche > img {
    transform: rotate(-90deg);
}

/*
==============================================================
==============================================================

  actionProg

Cette div propose des boutons d'action : réserver, ajouter aux
coups de coeur, consulter les conditions d'accès, voir la fiche
==============================================================
==============================================================
*/

.actionProg__liste {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none !important;
}

@media (min-width: 600px) {
    .actionProg__liste {
        justify-content: flex-end;
        height: 100%;
    }
}

@media (max-width: 599px) {

    .actionProg__liste {
        justify-content: center;
    }
}

@media (max-width: 1199px) {
    .planif__item .actionProg__liste {
        justify-content: flex-end;
        margin-bottom: 0;
    }
}

.actionProg__item {
    position: relative;
    margin: 0 0 0 0.5em !important;
}

/*
==============================================================
==============================================================

  bouton  dans .actionProg__item

ces boutons se composent d'un picto et eventuellement d'un label
==============================================================
==============================================================
*/

.actionProg__item > .bouton {
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 0;
    cursor: pointer;

}

.actionProg__item:not(:first-child) {
    margin-left: 10px;
}




.actionProg .actionProg__item > .bouton {
    width: 40px;
    height: 40px;
}


/* -- sur les listes de planification (fiches) 30px */
.planif__item .actionProg__item > .bouton {
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    align-items: center;
}

/* -- */

.actionProg__item .bouton > .picto {
    box-sizing: border-box;
    display: block;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 100%;
    border-style: solid;
    border-width: 2px;
}

/* -- sur les liste de planification (fiches) 30px */
.planif__item .actionProg__item > .bouton > .picto {
    background-size: 180px auto;
    width: 30px;
    height: 30px;
}

/* -- */

.actionProg .bouton > .label {
    display: block;
    position: absolute;
    top: 53px;
    left: -15px;
    width: 70px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    border-radius: 15px;
    color: #ffffff;
}

@media (max-width: 599px) {
    .actionProg .bouton > .label {
        display: none;
    }
}

.actionProg__item .bouton > .label:empty {
    display: none;
}

/* -- sur les liste de planification (fiches) 30px */
.planif__item .actionProg__item > .bouton > .label {
    font-weight: bold;
    line-height: 1em;
    font-size: 0.9em;
    margin-right: 0.1em;
    padding: 5px 10px !important;
    text-align: center;
}

/* -- */

.cf-info + .label {
    width: auto !important;
    padding: 6px 8px !important;
    font-size: 1.2em !important;
    background-color: #6642b5;
    left: 50% !important;
    margin-left: -12px !important;
    border-radius: 15px;
}

.cf-info + .label:hover, .cf-info + .label:focus, .cf-info + .label:active,
.actionProg__item:hover .cf-info + .label, .actionProg__item:focus .cf-info + .label, .actionProg__item:active .cf-info + .label {
    background-color: #0759a6 !important;
}

/*
------------------------------------------------
------------------------------------------------
  bouton par défaut
------------------------------------------------
------------------------------------------------
*/

.actionProg__item > .bouton > .pict_resa {
    background-position: -122px -2px;
}

.actionProg__item > .bouton > .pict_invit {
    background-position: -122px -62px;
}

.actionProg__item > .bouton > .pict_accred {
    background-position: -302px -62px;
}

.actionProg__item > .bouton > .pict_cpCoeur {        background-position: -132px -250px;    }
.actionProg__item > .bouton:hover > .pict_cpCoeur {        background-position: -12px -250px;    }

.actionProg__item > .bouton.actif > .pict_cpCoeur {        background-position: -12px -250px;    }


.actionProg__item > .bouton > .pict_libre {
    background-position: -182px -122px;
}

.actionProg__item > .bouton > .pict_flechedroite {        background-position: -252px -250px;    }

.actionProg__item > .bouton > .pict_en_ligne {
    background-position: -302px -122px;
}

.actionProg__item > .bouton > .pict_urne {
    background-position: -302px -182px;
}

/*
@media (max-width: 599px) {
    .actionProg__item > .bouton > .pict_resa {
        background-position: -62px -2px;
    }

    .actionProg__item > .bouton > .pict_invit {
        background-position: -62px -32px;
    }

    .actionProg__item > .bouton > .pict_accred {
        background-position: -152px -32px;
    }

    .actionProg__item > .bouton > .pict_cpCoeur {
        background-position: -62px -62px;
    }

    .actionProg__item > .bouton > .pict_libre {
        background-position: -92px -62px;
    }

    .actionProg__item > .bouton > .pict_flechedroite {
        background-position: -122px -62px;
    }

    .actionProg__item > .bouton > .pict_en_ligne {
        background-position: -152px -62px;
    }

    .actionProg__item > .bouton > .pict_urne {
        background-position: -152px -92px;
    }
}
*/
/* -- sur les listes de planification (fiches) 30px */

.planif__item .actionProg__item > .bouton > .label {
    color: #fff; /* teinte 4 */
}

.planif__item .actionProg__item > .bouton > .pict_resa {
    background-position: -62px -2px;
}

.planif__item .actionProg__item > .bouton > .pict_invit {
    background-position: -62px -32px;
}

.planif__item .actionProg__item > .bouton > .pict_accred {
    background-position: -152px -32px;
}

.planif__item .actionProg__item > .bouton > .pict_cpCoeur {
    background-position: -62px -62px;
}

.planif__item .actionProg__item > .bouton > .pict_libre {
    background-position: -92px -62px;
}

.planif__item .actionProg__item > .bouton > .pict_flechedroite {
    background-position: -122px -62px;
}

.planif__item .actionProg__item > .bouton > .pict_en_ligne {
    background-position: -152px -62px;
}

.planif__item .actionProg__item > .bouton > .pict_urne {
    background-position: -152px -92px;
}

/* -- */



/* .planif__item .actionProg__item > .bouton >                        { background-position:  -32px  -62px ; } coup de coeur */

/*
==============================================================
==============================================================

  infobulle

ces boutons se composent d'un picto et eventuellement d'un label
==============================================================
==============================================================
*/

.infobulle {
    position: absolute;
    display: none;
    width: 280px;
    box-sizing: border-box;
    left: calc(50% - 135px);
    bottom: 150%;
    background-color: #eff0f4;
    text-align: center;
    z-index: 100;
    color: #444;
    border-bottom: 1px solid #444;
}

div.infobulle {
    padding: 0.7em 0.4em;
    border: 1px solid #444;
}

.infobulle h3 {
    background-color: #6642b5;
    color: #fff;
    padding: 0.5em 0;
    margin: 0;
    text-align: center;
}

.infobulle p, .infobulle ul, .infobulle ol {
    color: #401e78;
    margin: 0;
}

.infobulle > div, .infobulle > p {
    margin: 0.75em 1em;
}

.infobulle .pict50_billetterie {
    background-position: -50px -450px
}

.infobulle .pict50_3file {
    background-position: -50px -500px
}

.infobulle__oubien {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    line-height: 1.1em;
}

.infobulle__oubien__item {
    width: 15%;
    padding: 0.25em;
    box-sizing: border-box;
}

.infobulle__oubien__item:first-child {
    width: 30%;
}

.infobulle__oubien__item:last-child {
    width: 55%;
}

.infobulle__oubien__item > p {
    margin: 0;
}

.infobulle:after {
    content: " ";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid;
    position: absolute;
    top: 100%;
    left: calc(50% - 5px);
}

/*
==============================================================
==============================================================

  grd-cat_list

l'organisation des tuile sur la page home programme
==============================================================
==============================================================
*/

.grd-cat__list {
    display: flex;
    background-color: transparent !important;
}

@media (max-width: 979px) {
    .grd-cat__list {
        flex-wrap: wrap;
    }
}

@media (min-width: 980px) {
    .grd-cat__item {
        width: calc(37.5% - 10px);
    }

    .grd-cat__item:first-child {
        width: 62.5%;
    }

    /* page programme */
    .grd-cat__item:not(:last-child) {
        margin-right: 10px;
    }

    /* page programme */
    .span8 .grd-cat__item {
        width: 100% !important;
        padding: 0.3em 0;
    }

    /* Spécifications Pleine page */
    .fullPage .grd-cat__item {
        width: 100%;
        box-sizing: border-box;
    }

    /* pages autres ex : pitchs Mifa . le span8 est insuffisant, idéalement mettre une classe supplémentaire sur le .grd-cat__item */
}

@media (max-width: 979px) {
    .grd-cat__item {
        width: 100%;
    }
}

.grd-cat__item > h2,
.grd-cat__item > h3 {
    padding: 14px 0 16px;
    margin: 10px 0;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1em;
    text-align: center;
}

.grd-cat__item > h2 {
    font-size: 3em;
    background-color: rgba(255, 255, 255, 0.7);
}

.grd-cat__item > h3 {
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 1.6em;
    margin-bottom: 0;
    margin-top: 0;
}

.grd-cat__item > h3:first-child {
    margin-top: 10px;
}

.grd-cat__item > .tuilesWrap, .grd-cat__item > .tuilesInnerWrapper .tuilesInner {
    display: flex;
    flex-wrap: wrap;
}

/*
==============================================================
==============================================================

  tuiles home Programme

elle contienne le picto et le titre de chaque programme
==============================================================
==============================================================
*/

.grd-cat__item .tuile {
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
}

@media (min-width: 980px) {
    .grd-cat__item .tuile {
        width: calc(33.3% - 10px);
    }

    .grd-cat__item:first-child .tuile {
        width: calc(19% - 10px);
    }

    .programmation .grd-cat__item:first-child .tuile {
        width: calc(31.5% - 10px);
    }

    .grd-cat__item > .tuilesInnerWrapper {
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.4s ease 0.5s;
        transition: height 0.4s ease 0.5s;
    }

    .grd-cat__item .tuilesWrap.tuilesInner {
        height: 0;
        pointer-events: none;
    }

    .grd-cat__item .tuilesWrap.tuilesInner .tuile {
        margin-top: 0;
    }

    .grd-cat__item .tuilesWrap.tuilesInner .tuile p span {
        display: none;
    }

    .grd-cat__item .tuilesWrap.tuilesInner.open {
        height: 140px;
        pointer-events: auto;
    }

    .grd-cat__item .tuilesWrap.tuilesInner .tuile {
        opacity: 0;
        transition: opacity 0.3s;
    }

    .grd-cat__item .tuilesWrap.tuilesInner.open .tuile.delay-1 {
        transition-delay: 0.4s
    }

    .grd-cat__item .tuilesWrap.tuilesInner.open .tuile.delay-2 {
        transition-delay: 0.45s
    }

    .grd-cat__item .tuilesWrap.tuilesInner.open .tuile.delay-3 {
        transition-delay: 0.50s
    }

    .grd-cat__item .tuilesWrap.tuilesInner.open .tuile.delay-4 {
        transition-delay: 0.55s
    }

    .grd-cat__item .tuilesWrap.tuilesInner.open .tuile.delay-5 {
        transition-delay: 0.60s
    }

    .grd-cat__item .tuilesWrap.tuilesInner .tuile.delay-1 {
        transition-delay: 0.2s
    }

    .grd-cat__item .tuilesWrap.tuilesInner .tuile.delay-2 {
        transition-delay: 0.15s
    }

    .grd-cat__item .tuilesWrap.tuilesInner .tuile.delay-3 {
        transition-delay: 0.10s
    }

    .grd-cat__item .tuilesWrap.tuilesInner .tuile.delay-4 {
        transition-delay: 0.05s
    }

    .grd-cat__item .tuilesWrap.tuilesInner .tuile.delay-5 {
        transition-delay: 0s
    }

    .grd-cat__item .tuilesInnerWrapper.open {
        height: 150px;
        -webkit-transition: height 0.4s ease;
        transition: height 0.4s ease;
    }

    .grd-cat__item .tuilesWrap.tuilesInner.open .tuile {
        opacity: 1;
    }
}

@media (max-width: 979px) {
    .grd-cat__item .tuile {
        min-width: 150px;
        flex-grow: 1;
    }

    .grd-cat__item .tuile.dropdown, .grd-cat__item .tuile.empty {
        display: none;
    }

    .grd-cat__item .tuilesWrap.tuilesInner .tuile p span {
        display: block;
    }
}

.grd-cat__item .tuile > p {
    font-size: 1em;
    line-height: 1.35em;
    margin: 0 20% 5% 20%;
    width: 60%;
}

/*
==============================================================
==============================================================

  tuiles home Lieux

elle contienne le picto et le titre de chaque programme
==============================================================
==============================================================
*/

.tuilesWrap.lieux {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1em;
}

.tuilesWrap.lieux > .tuile {
    width: 190px;
    height: auto;
    float: none;
}

.tuilesWrap.lieux > .tuile > img {
    width: 100%;
}

.tuilesWrap.lieux > .tuile > p {
    box-sizing: border-box;
    position: relative;
    top: -51px;
    width: 100%;
    padding: 15px;
    margin: 0;
    font-size: 1.4em;
    background-color: #097479;
    color: #ffffff;
    height: 80px;
}

.lieu-titre {
    font-size: 2em;
}

/*
==============================================================
==============================================================

  Div opaque lors du chargement

elle contienne le loader
==============================================================
==============================================================
*/

#blc_chargement_visuel {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .7);
    display: none;
    cursor: wait;
    padding: 0;
    z-index: 99;
}

#blc_chargement_visuel img {
    position: absolute;
    top: 250px;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
}

/*
==============================================================
==============================================================

  La div des expos
==============================================================
==============================================================
*/
.event-journee div {
    transition: max-height 0.5s ease;
    transform: translateZ(0);
}

.event-journee div.plie {
    max-height: 0;
    overflow: hidden;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   FICHE (refonte 2016)

une par événement / film
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/* ---- trash ?
#entete #retour_evnt,
#entete a.favori {
  position: absolute;
  right: 10px;
  width: 230px;
}

#entete #retour_evnt { top: 10px; }
#entete a.favori { top: 165px; }

---- */

.blc.p_fiche > div > p {
    padding: 0;
}

.blc.p_fiche .descriptif a.logo {
    float: right;
}

div.catProg_fiche,
div.imgProg_fiche,
.titre_fiche,
.sommaire_fiche,
.footerFiche {
    background-color: #ffffff;
    color: #000;
}

/*
==============================================================
==============================================================
  img_fiche_std
==============================================================
==============================================================
*/

.p_fiche .img_fiche_std {
    max-width: 100%;
    min-width: auto;
}

/*
==============================================================
==============================================================
  imgProg_fiche

Vignette et picto en haut de la fiche Programme
==============================================================
==============================================================
*/

.imgProg_fiche {
    width: 100%;
    position: relative;
    min-height: 70px;
    overflow: hidden;
    background-color: #FFFFFF;
    padding: 0 !important;
}

/*
==============================================================
==============================================================
  catProg_fiche

Affiche la catégorie à laquelle appartient l'événement de la fiche
==============================================================
==============================================================
*/

div.catProg_fiche {
    font-size: 1.3em;
    padding: 1em 0 0 0;
    text-align: center;
}

div.catProg_fiche p {
    margin: 0;
}

.catProg_fiche a, .catProg_fiche a:visited, .catProg_fiche a:active {
    color: #FFFFFF;
    text-decoration: underline;
}

.catProg_fiche a, .catProg_fiche a:visited {
    opacity: 0.6;
    transition: opacity 0.2s linear;
}

.catProg_fiche a:active, .catProg_fiche a:hover {
    opacity: 1 !important;
}

/*
==============================================================
==============================================================
  Sommaire fiche

interactif, permet de naviguer dans la fiche
==============================================================
==============================================================
*/

.sommaire_fiche {
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    text-align: center;
}

.sommaire_fiche > li {
    display: inline-block;
    margin: 0 0 0.3em;
}

.sommaire_fiche > li > a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

@media (max-width: 599px) {

    .sommaire_fiche > li > a {
        padding: 5px 10px;
    }
}

.sommaire_fiche a:link, .sommaire_fiche a:visited {
    opacity: 0.6;
    transition: opacity 0.2s linear;
}

.sommaire_fiche a.item_important:link, .sommaire_fiche a.item_important:visited {
    opacity: 0.9;
    transition: opacity 0.2s linear;
}

.sommaire_fiche a:hover, .sommaire_fiche a:active,
.sommaire_fiche a.item_important:hover, .sommaire_fiche a.item_important:active {
    opacity: 1 !important;
}

/*
==============================================================
==============================================================
  Gestion des niveaux de titres dans une fiche
==============================================================
==============================================================
*/
.catProg_fiche p {
    padding : 0.2em 0 !important;
}

.titre_fiche {
    position: relative;
    box-sizing: border-box;
    height: inherit;
    min-height: 45px;
    margin: 0;
    padding: 1.2em 50px;
    text-align: center;
    color: #000000;
    font-weight: 300;
    font-size: 2em;
    line-height: 1.2em;
    max-width: 1200px;
    margin: 0 auto;
}

.titre_fiche b {
    opacity: 0.75;
    font-size: 0.7em;
    font-weight: normal;
}

.titre_fiche span.etat_attente, .titre_fiche span.sousType {
    font-size: 0.45em;
    padding: 0 5px;
    margin-left: 0;
    float: none;
}

.titre_fiche span.etat_attente {
    background-color: #e7222d;
    color: #fbdcdc;
}

.titre_fiche span.sousType {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
}

@media (max-width: 599px) {

    .titre_fiche {
        font-size: 2.3em;
        padding-left: 70px;
        padding-right: 70px;
    }
}

/*
--------------------------------
  H2
--------------------------------
*/

.edition_prec {
    color: #ffffff !important;
    font-size: 1em !important;
    font-weight: normal !important;
    padding-top: 0 !important;
}

.blc.p_fiche > h2 {
    font-weight: 600;
    font-size: 2.465em;

    margin: 0;
    padding: 15px 55px;
    position: relative;
    text-align: center;
}

.blc.p_fiche > h2 span {
    font-size: 0.63em;
}

.blc.p_fiche > h2 span[class^="pict_"] {
    position: relative;
    top: 5px;
}

.blc.p_fiche > h2 a {
    position: absolute;
    top: 18%;
}

.blc.p_fiche > h2.date {
    background-color: #EDF0F3;
    color: #434649;
}

.blc.p_fiche > h2.date span {
    color: #6b6e71;
    font-size: 0.9em;
}

/* trash ?

.blc_titre_fiche h2 {

  font-weight: 600;
}

.blc_titre_fiche h2 {
  font-size: 2.465em;
  line-height: 1.1em;
}

*/

/*
--------------------------------
  H3
--------------------------------
*/

.blc.p_fiche h3 {
    font-style: italic;
    font-weight: 400;
    font-size: 1.539em;
    line-height: 1.2em;

    color: #ACACB2;
    background-color: #434649;
    padding: 15px 20px;
    margin: 0;
}

.blc.p_fiche h3 b,
.blc.p_fiche h3 strong {
    color: #6b6e71;
}

/* trash ?

.blc_titre_fiche h3 {
  font-size: 1.55em;
  line-height: 1em;
}

.blc_titre_fiche h3 span.pict30_duree {  margin: -4px 5px 0 2px;  }

.blc_titre_fiche h3 span.pict30_prog {  margin: -2px 2px 0 5px;  }

*/

/*
--------------------------------
  H4
--------------------------------
*/

.p_fiche > div > h4 {
    font-style: italic;
    font-weight: 600;
    font-size: 1.5em;

    color: #898c8f;
    margin-top: 1.5em
}

/*
==============================================================
==============================================================
  Picto signalant une avant première
==============================================================
==============================================================
*/

.titre_fiche .avantPremiere {
    background-color: rgba(0, 0, 0, 0);
    color: #FFFFFF;
    display: inline-block;
    float: none;
    font-size: 0.55em;
    font-weight: normal;
    letter-spacing: 0.015em;
}

.titre_fiche .avantPremiere .pict_avpr {
    margin-right: 7px;
    margin-top: 3px;
}

/*
==============================================================
==============================================================
  Bouton suivant / précédent
==============================================================
==============================================================
*/

.blc.p_fiche a.suiv,
.blc.p_fiche a.prec {
    position: absolute;
    margin-top: -20px;
    top: 50%;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.blc.p_fiche a.suiv {
    right: 20px;
}

.blc.p_fiche a.prec {
    left: 20px;
}

/*
==============================================================
==============================================================
  Details Pratiques
==============================================================
==============================================================
*/

.infoProg__det-prat_fiche {
    margin: 0;
    justify-content: center;
    padding-bottom: 1em;
    font-size: 1em;
}

/*
==============================================================
==============================================================
  Bouton retour
==============================================================
==============================================================
*/

.retour.btn {
    font-size: 1.2em;
    padding: 10px 25px 8px 10px;
    top: 10px;
    z-index: 10;
}

.blc.p_fiche .imgProg_fiche .retour.btn.btn1 {
    position: absolute;
    top: 20px;
    left: 20px;
    box-shadow: 0px 0px 8px #000;
}

.blc.p_fiche .imgProg_fiche .p_info p {
    color: #000;
}

.blc.p_fiche .imgProg_fiche .p_info h4 {
    font-size: 2em;
    color: #000;
}

.p_fiche .img_fiche_std.stats-video-library-image {
    min-width: 0;
    width: auto;
    float: left;
    margin-right: 20px;
}

.stats-video-library-detail {
    position: absolute;
    left: 0;
}

.stats-video-library-accredited {
    clear: both;
}

.stats-video-library-accredited, .blc_stats_detail {
    padding: 15px !important;
}

@media (max-width: 767px) {

    .retour.btn {
        padding: 10px
    }

    .retour.btn > label {
        display: none;
    }
}



/*
==============================================================
==============================================================
  Ou et quand ( planif__liste )
==============================================================
==============================================================
*/

.planif__liste {
    list-style-type: none !important;
    padding-left: 0;
    margin: 1em 0 !important;
}

.planif__item {
    display: flex;
    justify-content: space-between;
    margin: 0 !important;
    padding: 0.75em 1em 0.5em !important;
    align-items: center;
}

@media (max-width: 1199px) {
    .planif__item {
        flex-wrap: wrap;
    }
}

.planif__item:not(:last-child) {
    border-bottom: 1px solid #d3d6d9;
}

.planif__item.cliquable {
    cursor: pointer;
}

.p_fiche > div:nth-child(odd) .planif__item {
    background-color: #ffffff;
}

.p_fiche > div:nth-child(even) .planif__item {
    background-color: #EDF0F3;
}

.planif__item:hover,
.planif__item:focus {
    background-color: #ededed !important;
}

.planif__item:active {
    background-color: #e1e3e5 !important;
}

/*
==============================================================
==============================================================
  Footer
==============================================================
==============================================================
*/
.p_fiche .footerFiche {
    padding: 0;
    position: relative;
    text-align: center;
    min-height: 50px;
    max-width: 1200px;
    margin: 0 auto 80px auto;
}

.blc.p_fiche .footerFiche .retour {
    padding: 10px 15px 10px 10px;
}

.footerFiche .retour.btn.btn1:link,
.footerFiche .retour.btn.btn1:visited {
    transition: all 0.15s linear;
}

/*
==============================================================
==============================================================
  Spécificités Actualités
==============================================================
==============================================================
*/

.blc.p_fiche.actualite {
    padding-bottom: 30px;
}

.blc.p_fiche.actualite h4 {
    font-size: 1.539em;
    padding: 15px;
    margin-top: 0;
    width: auto;
    height: auto;
}

.blc.p_fiche.actualite p {
    margin: 1em;
}

.blc.p_fiche.actualite .blc_iframe {
    margin: 1em;
}

.blc.p_fiche.actualite .blc_iframe iframe {
    border-width: 0;
}

/*
==============================================================
==============================================================
  Spécificités Conférences
==============================================================
==============================================================
*/

.blc.p_fiche.conference #sommaire ol {
    width: 40%;
}

/*
==============================================================
==============================================================
  Spécificités Territory Focus
==============================================================
==============================================================
*/

.derouleTerrFocus {
    color: #898C8F;
    font-size: 1.2em;
    list-style: none outside none;
    padding: 0;
}

.derouleTerrFocus span {
    font-weight: bold;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   PAGE DESABONNEMENT DES CAMPAGNES MAIL
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.p_standard.desabo > div {
    background-color: #FFFFFF !important;
}

/*
==============================================================
  desabo warning
==============================================================
*/

.desabo-warning {
    text-align: center;
    color: #6642b5;
}

@media (min-width: 768px) {
    .desabo-warning {
        margin: 2em 0 3em;
    }
}

@media (max-width: 767px) {
    .desabo-warning {
        margin: 1em 0;
    }
}

.desabo-warning > p:first-child {
    font-size: 1.5em;
    font-weight: bold;
}

.desabo-warning > p {
    margin: 0 !important;
}

/*
==============================================================
  desabo text (avertissement +  RS + questionnaire)
==============================================================
*/

/*
==============================================================
  H2 introductif du module lst-param
==============================================================
*/

h2.desabo-vos-camp {
    margin-bottom: 0 !important;
    margin-top: 2em !important;
}

/*
==============================================================
  contenu du module lst-param
==============================================================
*/

.desabo-descr, .desabo-btn {
    margin: 0;
}

.desabo-freq, .desabo-exmpl {
    margin: 0 1em 0 0 !important;
}

.desabo-exmpl > a > span.icon20_oeil {
    margin-right: 5px;
}

@media (min-width: 768px) {
    .desabo-descr {
        width: calc(100% - 325px);
    }
}

@media (max-width: 767px) {
    .desabo-descr {
        width: 100%;
    }

    .desabo-btn {
        flex-grow: 1;
        text-align: right;
    }
}

.citia > .lst-param__item > p > a {
    color: #0d82bd;
}

.acy > .lst-param__item > p > a {
    color: #123479;
}

.fb > .lst-param__item > p > a {
    color: #CF7500;
}

.french-only {
    color: #423a8f;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   PAGE ERREUR
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
==============================================================
  page erreur et fond
==============================================================
*/

@media (min-width: 800px) {
    .page-erreur {
        min-height: 600px;
    }
}

@media (max-width: 799px) {
    .page-erreur {
        flex-direction: column;
    }
}

@media (min-width: 500px) {
    .page-erreur {
        background: url("../interface/fond_404.png") no-repeat center;
    }
}

@media (max-width: 499px) {
    .page-erreur {
        background: url("../interface/fond_404_mobile.png") no-repeat center;
    }
}

.page-erreur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
    background-size: cover;
}

/*
==============================================================
  structure
==============================================================
*/

.page-erreur > h1, .page-erreur > div {
    background-color: transparent !important;
}

@media (min-width: 800px) {
    .page-erreur__titre,
    .page-erreur__content {
        width: 50%;
        padding: 2em 5% !important;
    }

    .page-erreur__titre {
        margin-right: 15%;
    }

    .page-erreur__content {
        margin-left: 15%;
    }
}

@media (max-width: 799px) {
    .page-erreur__titre {
        padding: 0;
        margin-right: 0;
        margin-left: 0;
        margin-top: 0.5em;
    }
}

@media (max-width: 799px) and (min-width: 500px) {
    .page-erreur__titre {
        margin-bottom: 150px;
    }

    .page-erreur__content {
        margin-top: 200px;
    }
}

@media (max-width: 499px) {
    .page-erreur__titre {
        margin-bottom: 50px;
    }

    .page-erreur__content {
        margin-top: 200px;
    }
}

@media (max-width: 799px) and (min-width: 600px) {
    .page-erreur__titre {
        width: 40%;
    }
}

@media (max-width: 599px) and (min-width: 400px) {
    .page-erreur__titre {
        width: 55%;
    }
}

@media (max-width: 399px) {
    .page-erreur__titre {
        width: 70%;
    }
}

/*
==============================================================
  mise en page du contenu
==============================================================
*/

.page-erreur__content {
    text-align: center;
}

.page-erreur__titre2 {
    margin-bottom: 0 !important;
    font-size: 1.75em !important;
}

.page-erreur__url {
    margin-top: 0 !important;
    font-size: 1.5em;
    color: rgba(0, 0, 0, 0.4);
}

.page-erreur__recherche > .form-recherche > div {
    display: flex;
    justify-content: center;
}

.corner-ribbon {
    width: 100%;
    position: absolute;
    top: 38px;
    right: -75px;
    text-align: center;
    line-height: 2em;
    font-size: 1.2em;
    font-weight: bold;
    color: #f0eff2;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    background: #39d;
}

.mention_legales_form_rgpd {
    font-size: 0.8em;
    line-height: 1.5em;
    margin: 0 15px 15px 15px;
    display: inline-table;
}

.baselineHome {
    margin: 0;
    line-height: 1.5em;
    font-size: 1.4em;
    text-shadow: 0px 0px 5px #000, 0px 0px 10px #000;
}

.organisateurFooter {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}

body > #cometchat {
    padding-bottom: 0 !important;
}

#cometchat_synergy_iframe {
    width: 100% !important;
    min-width: 0% !important;
}

#cometchat_embed_synergy_container {
    height: 650px;
    padding: 0;
}

#cometchat_embed_synergy_container:empty {
    position: relative;
}

#cometchat_embed_synergy_container:empty:after {
    content: '';
    width: 64px;
    height: 64px;
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    border-radius: 50%;
    border: 6px solid #EDF0F3;
    border-color: #EDF0F3 transparent #EDF0F3 transparent;
    -webkit-animation: lds-dual-ring 1.2s linear infinite;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media (max-width: 599px) {
    .blc.concept h2 {
        margin: 0.7em 0.5em;
    }

    .blc.concept p {
        margin: 0.5em 1.1em;
    }

    .blc.concept .liens, .blc.concept p.userInfo, .blc_enavant .liens {
        padding: 1em 5%;
        width: 90%;
    }

    .blc.concept,
    .blc.concept.small {
        min-height: auto;
    }

    .blc.concept div,
    .blc.concept.small div {
        min-height: 100px;
        position: relative;
        padding-bottom: 120px;
    }
}

@media screen and (max-width: 768px) {

    .en-tete-site__dates {
        margin: 0;
        display: none;
    }
}
N
.pl-50 {
    padding-left: 50px;
}

.network .acces-network__title {
    text-transform: none;
}

#pDeconnexion {
    color: #fff;
}

#pDeconnexion {
    float: right;
    color: #fff;
}

table tr.type a.btn1, #poursuivre {
    border: 1px solid #000 !important;
    background-color: #000;
    color : #fff;
}

table tr.type a.btn1, #poursuivre {
    border: 1px solid #fff !important;
}

.danger, .danger a {
    color : #d00000;
}

/* Header message spécial */
.warning_header {
    background-color: #0080c6;
    color: #fff;
    position: relative;
    top: 156px;
}
.warning_header p {
    padding: 0px;
}
.warning_header p a {
    color: #fff;
    font-weight: bold;
}
@media (max-width:1199px) and (min-width:980px) {
    .warning_header {
        top: 150px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .warning_header {
        top: 189px;
    }
}

@media (max-width: 767px){
    .warning_header {
        top: 0px;
    }
}
/* Logo sommaire */
#sommaire .logoIllustration {
    float: left;
    width: 50%;
    margin-top: 20px;
}


@media (max-width: 767px){
    #sommaire .logoIllustration {
        float: none;
        width: 100%;
        margin-top: 0;
    }
}

/* classe ".full_width" pour rendre un form dispo sur toute la largeur sans toucher à sa structure HTML */
.full_width .chp_obl {
    background: url("../interface/pictos/chp_obligatoire.png") no-repeat scroll right transparent;
}

.form.full_width textarea {
    width: 97%;
}
.form.full_width input {
    width: 97%;
}
.form.full_width select {
    width: 100%;
    padding: 9px 1.5%;
}

.form.full_width p label, .form.full_width div label {
    text-align: left;
    font-size: 1.1em;
    line-height: 1.1em;
    color: #434648;
    clear: both;
    width: auto;
}

p.numero_indicatif input {
    width: 6% !important;
}

p.numero_indicatif input:last-child {
    width: 43% !important;
}

.sous-type {
    color: #fff;
    padding: 0.25em 0.5em;
    margin: 0.25em;
    font-size: 0.90em;
}

.type-film {
    background-color: #f8246b;
}
.type-projet, .type-aaprojet {
    background-color: #218bd1;
}
.type-prodencour, .type-prodacheve {
    background-color: #ff771d;
}

#ag_vide {
    float: none;
    text-align: center;
}

ul.listActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0.5em 0em;
}

ul.listActions li {
    margin: 0 10px 0 0;
}

@media (max-width: 767px) {
    ul.listActions {
        flex-wrap: nowrap;
    }

    ul.listActions li {
        display: inline-flex;
    }
}

.overlay--open::after {
    background: black;
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    opacity: 0.4;
}

.blc.ntwk.p_standard h2 {
    text-align: left;
}

.blc.fullPage {
    max-width: 1200px;
    margin: 0 auto;
    float: none;
}

.blc.fullPage .grd-cat__list {
    padding-top: 0;
    padding-bottom: 80px;
}

.hidden {
    display: none;
}