.formhtml,
button,
input,
select,
textarea {
  color: #222;
}

html { overflow-y: scroll; color: #434649; }
a, a:visited, a:active {
  text-decoration: underline;
  cursor: pointer;
}
a:hover { text-decoration: none; }
a:focus { outline: none; }

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

::selection {
  color: #fff;
  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;
}


/* ==========================================================================
   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 v2
   ========================================================================== */

body  {
  background-color: #CFD2D5;
  font-family: Arial,sans-serif;
  font-size: 0.875em;
  line-height: 1.5em;
  position: relative;
}

@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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  text-decoration: none;
  transition-property: color, left;
  transition-duration: 0.5s;
  left: 0;
}

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

/* ---- BOUTONS --- */
.btn,
a.btn:visited {
    display: inline-block;
    padding: 0.7em 1em 0.5em;
    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;
}
/* button.btn {  line-height: 1.55em; } */

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

/* 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: 'Source Sans Pro', Arial, sans-serif;
    line-height: 1em;
  margin: 5px 0;
  padding: 25px 20px 15px;
  color: #fff;
}

#menu_n4 h3 {
  background-color: #EDF0F3;
  color: #ACAFB2;
}

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

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

.p_standard h5 {
  color : #434646;
  font-weight: 600;
  font-size: 1.25em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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: rgba(0,0,0,0.6);
}

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

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

.blc.concept div {
  margin: 1.25em 1.25em 0 1.25em;
  padding-bottom: 1.5em;
}

.blc.concept h2 {
  color: #434646;
  margin: 0.5em 0;
  font-weight: 600;
  font-size: 2.5em;
  line-height: 1.2em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.blc.concept p {
  margin: 1em 0;
}

.blc.concept .liens {
  display: inline-block;
  width: 100%;
}

.userInfo {
  color: #6642b5;
}

.userInfo span[class^="pict25_"] {
  vertical-align: middle;
  background-color: #503D98;
}

.blc.concept .liens a {
  margin-bottom: 0.5em;
  float: right;
  clear: right;
}

.blc.concept .liens a:last-child {
  margin-bottom: 0;
}
/* ---- page portail ---- */

[class*="p_"] > div h2 {
  margin: 1em 0 0.5em;
  padding: 0;
  color: #434646;
  font-weight: 600;
  font-size: 2em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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 {
  color: #6B6C71;
  /*padding-left: 30px;*/
  padding: 10px 20px 10px 50px;
  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-weight: 600;
  font-size: 2.2em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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-family: 'Source Sans Pro', Arial, sans-serif;
  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: italic;
  font-weight: 600;
  font-size: 2.3em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin: 0;
  padding: 1.5em 3% 0.5em;
  position: absolute;
  width: 94%;
}




.actu h3 {
  margin: 0.5em 1em;
  font-weight: normal;
  color: #434648;
  font-size: 1.87em;
}

.actu p {
  margin: 0.5em 1.5em 0.5em;
  font-size: 1.16em;
}
/*Réinit des paddings auto */
.p_standard > .service_connexion {
  padding: 0;
}
/* Actualités */

.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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: #EDF0F3;
  background-color: #434649;
  padding: 0.5em 0.75em;
  margin: 0 0 10px;
}

.blc.info h2 span[class^="pict25_"] {
  margin-right: 2.2%;
}

/*
==============================================================
==============================================================
   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 ?
==============================================================
==============================================================
*/
.blc.info.contact { overflow: hidden; }

.blc.info.contact h2 {
  padding: 8px 10px;
  cursor: pointer;
  margin: 0;
}
.blc.info.contact h2 span {
  opacity: 0.8;
}
.blc.info.contact h2 a {
  position:relative;
  float: right;
  top: 7px;
  right: 5px;
  display: none; /* flech bas/haut masquée */
}

.blc.contact {
    width: 100%;
}

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

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_participants .blc.contact ul, #liste_participants ul.liste_ctc {
  padding: 0 2em;
  clear: both;
}

/* 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;
  min-height: 120px;
  margin: 1em;
  padding: 0 1em;
  background-color: #434649;
  cursor: default;
}

#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 {
    background-color: #55595c;
}

/* 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;
  min-height: 120px;
  left: -1em;
}

.blc.contact > ul li a.img > img,
.liste_ctc li a.img > img  {
  height: 120px;
  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%;
}

/* le nom de la personne */

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

/* la description de la personne */
.blc.contact ul li p,
ul.liste_ctc li p {
  color: #acaeb2;
  margin: 3px 0;
  font-size: 0.9em;
  line-height: 1.25em;
}
.blc.contact ul li p em,
ul.liste_ctc li p em {
}

/* Bloc personne */

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

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

.blc.contact .ctc_comp, ul.liste_ctc .ctc_comp {
  background-color: #6B6E71;
  margin: 0 -1em;
  padding: 7px 10px 15px;
  z-index: 1;
  display: none;
}
.blc.contact .ctc_comp h4, ul.liste_ctc .ctc_comp h4 {
  color: #434646;
  margin: 0;
  padding: 10px 10px 5px;
  font-size: 1.16em;
}

.blc.contact .ctc_comp p, ul.liste_ctc .ctc_com p {
  color: #D8DCDF;
  padding: 3px 10px;
}

.blc.contact .ctc_comp ul.act_pers, ul.liste_ctc .ctc_comp ul.act_pers {
  list-style-type: none;
  margin: 0.25em;
  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;
}
.blc.contact .ctc_comp ul.act_pers li a, ul.liste_ctc .ctc_comp ul.act_pers li a {
  display: block;
  padding: 0.4em;
  background-color: #434649;
  color: #878C8D;
  text-decoration: none;
  font-size: 1.17em;
}

.blc.contact .ctc_comp ul.act_pers li a:hover, ul.liste_ctc .ctc_comp ul.act_pers li a:hover {
  background-color: #878C8D;
  color: #434649;
}

.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;
    background-color: #fff;
    font-size: 1em;
}

.span4 > .blc.info {
  margin: 5px 0;
}

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

.blc.pratique h3, .blc.pratique h5, .blc.pratique p {
  margin: 2px 20px;
  color: #868C8C;
}

.blc.pratique p.texte {
  margin-left: 20px;
}
.blc.pratique h3 {
  font-weight: 600;
  font-size: 1.43em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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: 1em 0;
  padding: 0;
}

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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

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: #EDF0F3;
}

.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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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: #e3e6e9;
}

.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: 303px;
  height: 256px;
  float: left;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: -12px;
  padding: 0;
}

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

.etape.inactive {  background: url("../interface/etape_recap_inactive.png") no-repeat 0 0; }

.etape.debut {
  width: 293px;
  margin-left: 20px;
  background: url("../interface/etape_recap_debut.png") no-repeat 0 0;
}

.etape h3 {
  text-align: center;
  color: #666666;
  background-color: transparent;
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1.1em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin: 0;
  padding: 8px 0 10px 5px;
  height: 80px
}

.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 : 0 0 0 40px;
}

.etape ul {
  list-style-type: none;
  overflow-x: visible;
  overflow-y: scroll;
  width: 240px;
  height: 105px;
  margin-top: 0;
  background-color: #edf0f3;
}

.etape ul li,
.recap_info li {
  padding : 3px 5px;
  height: 25px;
  border-bottom: 1px solid #f9f9f9;
}

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

.blc_form > div.recap_etapes > div {
  position: relative;
  float: left;
  color: #DDDDDD;
  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 {
  margin:0;
  display:inline-block;
  vertical-align: middle;
  font-weight: 600;
  font-size: 1.3em;
  line-height: 1.1em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

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

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

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

.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.1em;
  line-height: 1.1em;
  color: #434648;
}

.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 #CFD2D5;
  padding: 10px 1.5%;
  color: #6B6E71;
  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;
}
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[readonly!="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: 76px;
  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 {
  border: 1px solid #C20505 !important;
  /*color: #6B6E71;*/
  box-shadow: 0 0 1px #C20505;
}

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

@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,
.info::after {
  color: #EAE8FC;
  background-color: #4F3C97;
}

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 -0.5em;  /* OK sur la page des recrutement, mais pas dans les formulaires. */
  padding: 0.5em;
}

.info .nombre {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 2px;
  border-radius: 50%;
  background-color: #dfd9ff;
  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;
}

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

p.multiple {
  height: 42px;
}

p.numero_indicatif input {
  width: 5.5%;
}

p.numero_indicatif input:last-child {
  width: 43.5%;
}

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 10px 0 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 {
  font-weight: bold;
}

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

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: 21px;
  cursor: pointer;
}
.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 input[type="checkbox"] + label:before {
    top: 2px;
}

.choix_radio li 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: 6px;
}

.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-family: 'source sans pro', Arial, sans-serif;
    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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: #434648;
  margin: 0 0 20px;
}

.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: #aecb0b;
  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%;
}

.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: 7px 1.5%;
}

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

.valid_form {
  color: #EAE8FC;
  background-color: #4F3C97;
  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-style: italic;
  font-weight: 300;
  font-size: 1.3em;
  line-height: 1.7em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin-right: 10px;
  color: #EAE7FC;
}

.valid_form form p.confirm_validation {
  color: #EAE7FC;
  background-color: #4f3c97;
  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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin: 0;
  padding: 1em;
  background-color: #4F3C97;
  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;
}

.chp_obl {
  background: url("../interface/pictos/chp_obligatoire.png") no-repeat scroll right center transparent;
  padding-right: 10px;
}

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

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

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

.mess_erreur {
  font-weight: bold !important;
  color: #e7222d !important;
}

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

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

.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;
  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 : 120px;
  padding : 10px;
  font-size: 0.9em;
  overflow: auto;
  margin-bottom : 15px;
  background-color: #EDF0F3;
}

/*  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;
  background-color: #edf0f3;
  clear: both;
  overflow: hidden;
}

ul.liste_films li>img {
  width: 140px;
  margin-right: 10px;
  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-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.7em;
  padding: 10px 8% 15px 0;
}

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

ul.liste_films li h4, ul.liste_palmares li h4 {
  color: #434646;
  padding-right: 8%;
  font-size: 1.077em;
  font-weight: normal;
}

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

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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}
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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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;
}
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;
}

/* ---- 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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

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

.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: #4F3C97;
  color: #EAE7FC;
}

table tr.type h4 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.7em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin: 0.7em;
}

table tr.sous_type {
  background-color: #4F3C97;
  color: #EAE8FC;
}
table tr.type th, table tr.type td  {
  border: 1px solid #6B5BB0;
}

table tr.sous_type th, table tr.sous_type td  {
  border: 1px solid #897EC3;
}
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: #4E3B97;
}

/* 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: #6642B5;
    color: #fff;
    width: 100%;
    z-index: 100;
    bottom: 0;
}

#band_cookie p {
    margin: 1em;
}

#band_cookie a, #band_cookie a:visited { color: #30155c; }
#band_cookie a:active  { color: #dfd9ff; }

#band_cookie a#btAcceptCookie,
#band_cookie a#btAcceptCookie:visited {
    background-color: #401e78;
    color: #dfd9ff;
}

#band_cookie a#btAcceptCookie:hover,
#band_cookie a#btAcceptCookie:focus {
    background-color: #30155c;
}

#band_cookie a#btAcceptCookie:active {
    background-color: #dfd9ff;
    color: #401e78;
}

/* 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: #434649;
  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: #4f3c97;  }
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%; }

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

/*
===============================
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');
}

/* -- */

.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.bas     { background-position: -140px -280px; }

/* -- */

.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:     0    -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:     0   -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:     0   -320px; }
.icon20_croix-h 										{ background-position:     0   -340px; }
.icon20_son     										{ background-position:     0   -360px; }
.icon20_srt     										{ background-position:     0   -380px; }
.icon20_flyer   										{ background-position:     0   -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; }

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

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

/* des picto 20 gris de l'ancien programme ? */
/*  @deprecated @todo : supprimer si pas utile 2017

.pict_accred_fonce      { background-position: -100px  -220px; opacity: 0.5; }
.pict_resa_fonce        { background-position: -100px   -60px; opacity: 0.5; }
.pict_cv_fonce          { background-position: -100px -1140px; opacity: 0.5; }
.pict_invit_fonce       { background-position: -100px  -160px; opacity: 0.5; }
.pict_entLib_fonce      { background-position: -100px  -180px; opacity: 0.5; }
.pict_cpCoeur           { background-position: -100px   -80px; opacity: 0.5; }
*/
/* 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_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; }

/* Par default blanc */
.top-bar__menu-network__item.actif > .icon25_ntwk          { background-position:    0   -625px; }
.top-bar__menu-network__item.actif > .icon25_user          { background-position:    0   -650px; }
.top-bar__menu-network__item.actif > .icon25_malet         { background-position:    0   -675px; }
.top-bar__menu-network__item.actif > .icon25_cog           { background-position:    0   -700px; }
.top-bar__menu-network__item.actif > .icon25_ticket        { background-position:    0   -725px; }
.top-bar__menu-network__item.actif > .icon25_accred        { background-position:    0   -750px; }
.top-bar__menu-network__item.actif > .icon25_reseau        { background-position:    0   -775px; }
.top-bar__menu-network__item.actif > .icon25_videot        { background-position:    0   -800px; }
.top-bar__menu-network__item.actif > .icon25_recrut        { background-position:    0   -825px; }
.top-bar__menu-network__item.actif > .icon25_cv            { background-position:    0   -850px; }
.top-bar__menu-network__item.actif > .icon25_vote          { background-position:    0   -875px; }
.top-bar__menu-network__item.actif > .icon25_wifi          { background-position:    0   -900px; }
.top-bar__menu-network__item.actif > .icon25_blonot        { background-position:    0   -275px; }
.top-bar__menu-network__item.actif > .icon25_invit         { background-position:    0   -300px; }
.top-bar__menu-network__item.actif > .icon25_mail          { background-position:    0   -325px; }

/* 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; }

/* 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: -45px -270px; }
.action.badge_agenda  , .agenda.badge_agenda  , .couleur.badge_agenda   {  background-position: -45px -315px; }
.action.badge_new     , .agenda.badge_new     , .couleur.badge_new      {  background-position: -45px -360px; }
.action.badge_stat    , .agenda.badge_stat    , .couleur.badge_stat     {  background-position: -45px -405px; }
.action.badge_question, .agenda.badge_question, .couleur.badge_question {  background-position: -45px -450px; }
.action.badge_lien    , .agenda.badge_lien    , .couleur.badge_lien     {  background-position: -45px -495px; }
.action.badge_loca    , .agenda.badge_loca    , .couleur.badge_loca     {  background-position: -45px -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, .one_share.facebook  { background-position:    0      0  ; }
.bottom-bar .liste_reseaux > li > .facebook           { background-position:    0    -45px; }
.liste_reseaux > li > .twitter, .one_share.twitter    { background-position:  -45px    0  ; }
.bottom-bar .liste_reseaux > li > .twitter            { background-position:  -45px  -45px; }
.liste_reseaux > li > .youtube                        { background-position:  -90px    0  ; }
.bottom-bar .liste_reseaux > li > .youtube            { background-position:  -90px  -45px; }
.liste_reseaux > li > .linkedin, .one_share.linkedin  { background-position: -135px    0  ; }
.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    0  ; }
.bottom-bar .liste_reseaux > li > .rss                { background-position: -225px  -45px; }
.liste_reseaux > li > .flickr                         { background-position:    0   -135px; }
.bottom-bar .liste_reseaux > li > .flickr             { background-position:    0   -180px; }
.liste_reseaux > li > .instagram                      { background-position:  -45px -135px; }
.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, .one_share.facebook:hover,
.bottom-bar .liste_reseaux > li > .facebook:hover     { background-position:   0     -90px; }
.liste_reseaux > li > .twitter:hover, .one_share.twitter:hover,
.bottom-bar .liste_reseaux > li > .twitter:hover      { background-position:  -45px  -90px; }
.liste_reseaux > li > .youtube:hover,
.bottom-bar .liste_reseaux > li > .youtube:hover      { background-position:  -90px  -90px; }
.liste_reseaux > li > .linkedin:hover, .one_share.linkedin:hover,
.bottom-bar .liste_reseaux > li > .linkedin:hover     { background-position: -135px  -90px; }
.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  -90px; }
.liste_reseaux > li > .flickr:hover,
.bottom-bar .liste_reseaux > li > .flickr:hover       { background-position:    0   -225px; }
.liste_reseaux > li > .instagram:hover,
.bottom-bar .liste_reseaux > li > .instagram:hover    { background-position:  -45px -225px; }
.liste_reseaux > li >  .ggPhoto:hover,
.bottom-bar .liste_reseaux > li > .ggPhoto:hover    { background-position:  -90px -225px; }
/*
===============================
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");
  float: none;
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  bottom: 3px; /*fix jclerc*/
}

.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_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_wifi {
    background-position: -180px -900px;
}

.fa60_vr {
    background-position: -240px -900px;
}

@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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin-top: 0;
  margin-bottom: 0;
  color: #ffffff;
  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.2em 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: 5px;
    position: relative;
}

@media screen and (min-width: 880px) {
    .entete-full-width {
        height: 340px;
    }
}

@media screen and (max-width: 879px) and (min-width: 700px) {
    .entete-full-width {
        height: 240px;
    }
}

@media screen and (max-width: 699px) and (min-width: 500px) {
    .entete-full-width {
        height: 190px;
    }
}

/* en tete - container */

.image-full-width__container > a {
    display: block;
}

/* en tete - content */

.entete-full-width__content {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.entete-full-width__accroche {
    text-align: center;
    color: #FFFFFF;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

@media screen and (max-width: 980px) {
    .entete-full-width__accroche {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (min-width: 700px) {
    .entete-full-width__accroche {
        font-size: 1.5em;
    }
}

@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;
  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)
==============================================================
==============================================================
*/

/*
------------------------
   logo
------------------------
*/

/* interactivité */
.en-tete-site__logo:hover,
.en-tete-site__logo:focus {
    background-color: rgba(0,0,0,0.17);
}

.en-tete-site__logo:active {
    background-color: rgba(0,0,0,0.31);
}

/*
------------------------
   dates
------------------------
*/

.en-tete-site__dates {
    margin-bottom: 0;
}

/* style */

.en-tete-site__dates {
  font-style: italic;
  font-weight: 600;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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;
    margin-bottom: 2em;
}

.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 {
  position: relative;
  z-index: 10;
  font-weight: 600;
  font-size: 3.5em;
  line-height: 1.2em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin: 0;
  padding-top: 0.4em;
  padding-right: 3%;
  padding-bottom: 0.2em ;

  color: #434649;
  background-color: #FFFFFF;
}

@media (min-width: 980px) { h1 { padding-left: 85px; } }

@media (max-width: 979px) {
    h1 {
        padding-left: 25px;
        font-size: 2.7em;
    }
}
@media (max-width: 600px) { h1 { font-size: 2.1em; } }

h1 > span {
    display: inline-block;
    float: left;
}

@media (min-width: 980px) { h1 > span { margin-left: -65px; } }

@media (max-width: 600px) {
    h1 > span {
        margin-left: -10px;
        margin-top: -10px;
    }
}

h1 .pict {
    position: relative;
}

/* 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 {
    float: right;
    font-size: 0.35em;
    margin-top: 15px;
    margin-right: 10px;
}

h1 a.action {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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;
}


/*
==============================================================
==============================================================
   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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: #4b298f;
}

.lst-elmt-illu__texte > p {
  margin: 0 0 0.25em;
}

.lst-elmt-illu__texte > p > strong {
  color: #4b298f;
}

/*
==============================================================
==============================================================
   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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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: hidden;
  display: flex;
  flex-direction: column;
  margin: 5px;
  vertical-align: top;
  padding: 1em;
  box-sizing: border-box;
  letter-spacing: normal;
  text-align: center;
  background-color: #e3e6e9;
}

[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% - 40px) / 4); }
    .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%;
}

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

.liste_profil > li > a {
    margin-top: 1em;
    width: 100%;
    box-sizing: border-box;
}

.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-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 1.8em;
  line-height: 1em;
  text-align: left;
}

/*
==============================================================
==============================================================
    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.5em 0.75em;
  margin-top: 1px;
  background-color: #e9ebee;
}

.lst-param__item.is-not-checked {
  opacity: 0.6;
}

.citia > .lst-param__item.titre { background-color: #0e98d6; }
.acy > .lst-param__item.titre { background-color: #adcb0b; }
.fb > .lst-param__item.titre { background-color: #f49100; }

/* lignes titre */

.lst-param__item.titre {
  display: block;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 1.5em;
  color: #fff;
}

.lst-param__item.titre > img {
    height: 25px;
}

/* 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: 10px 0 0;
    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: 5px 10px;
    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;
}

/*
==============================================================
==============================================================
   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-family: 'Source Sans Pro', Arial, sans-serif;
  font-weight: 600;
  font-style: italic;
}

/*
==============================================================
==============================================================
    QUESTIONNAIRE RAPIDE

    initialement designée pour la page désabonnemnt aux campagnes mails
==============================================================
==============================================================
*/

.quest-rapide {
  background-color: rgba(0,0,0,0.1);
  padding: 1em;
  margin: 1em 0;
}

.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 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: 63%;
    }
}

@media screen and (min-width: 600px) {
    .form__connexion .champ__intitule {
        width: 30%;
        display: inline-block;
        text-align: right;
    }

    .form__connexion .champ__intitule.chp_obl {
        padding-right: 2%;
    }

    .form__connexion .form__ligne__2-3 {
        margin-left: 32%;
        padding-left: 4px;
    }
}

.form__connexion [class*="champ__"]{
    font-size: 1.17em;
}

.form__connexion label,
.form__connexion .mdp_perdu {
    color: rgba(0,0,0,0.42);
}

.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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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);
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

/* 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: #E9EBEE;
}

/*
==============================================================
   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 {
    width: 100%;
    top: 0;
}

@media screen and (min-width: 768px) {
    header {
        position: fixed;
        z-index: 50;
    }

    .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;
        z-index: 16;
    }
}

@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 {
    clear: both;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

  }

  .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 17px 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%;
    }
}

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:first-child {
    margin-right: 3px;
}

.choix-langue__item:last-child {
    margin-left: 3px;
}

.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: #90a905;
}
/* 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
------------------------
*/

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

/* style */
.acces-network__title,
.acces-network__user-connexion,
#pDeconnexion {
    color: rgba(0,0,0,0.31);
}

.acces-network__title {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.125em;
  font-weight: 600;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.acces-network__title:hover,
.acces-network__title:focus,
.acces-network__user-connexion:hover,
.acces-network__user-connexion:focus {
    color: rgba(0,0,0,0.42);
}

.acces-network__title:active,
.acces-network__user-connexion:active {
    color: rgba(0,0,0,0.59);
}

/*
==============================================================
==============================================================
   TOP-BAR MENU NETWORK
==============================================================
==============================================================
*/

.top-bar__menu-network {
  padding: 0;
}

@media (min-width: 768px) {

  .top-bar__menu-network {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 767px) {

  .top-bar__btn-deploy-menu_network {
    top: 47px;
    transition: right .15s ease-in .15s;
  }

  .top-bar__menu-network__wrap {
    position: fixed;
    z-index: 100;
    width: 80%;
    height: 100%;
    overflow-y: auto;
    top : 0;
    left: 110%;
    transition: left .15s ease-in .15s;
  }

    .top-bar__menu-network__wrap .top-bar__menu-network {
        height: 100%;
    }

  .top-bar__menu-network { padding: 1em; }
  body.actifMenuNtwk .top-bar__btn-deploy-menu_network,
  body.actifMenuNtwk { right: 80%; }
  body.actifMenuNtwk .top-bar__menu-network__wrap { left: 20%; }
  body.actifMenuNtwk > .container { opacity: 0.2; }
}

.top-bar__menu-network__item {
  position: relative;
  margin: 0;
}

@media (min-width: 768px) { .top-bar__menu-network__item { padding: 0.5em; } }
@media (max-width: 767px) { .top-bar__menu-network__item { padding: 0.25em; } }

@media (max-width: 767px) {
  .top-bar__menu-network__item {
    display: block;
      text-decoration: none;
  }
}

@media (min-width: 768px) {
  .top-bar__menu-network__item:not(.titre) {
    width: calc(25px + 1em);
    height: calc(25px + 1em);
    box-sizing: border-box;
  }
}

.top-bar__menu-network__item {
    text-decoration: none;
}
.top-bar__menu-network__item:hover, .top-bar__menu-network__item:focus { background-color: rgba(0,0,0,0.25); }
.top-bar__menu-network__item:active { background-color: rgba(0,0,0,0.5); }
.top-bar__menu-network__item.actif { background-color: rgba(0,0,0,0.6); }

.top-bar__menu-network__item.inactif, .top-bar__menu-network__item.inactif:hover {
    cursor: default;
    font-style: italic;
    background-color: inherit;
}

@media (max-width: 767px) {
    .top-bar__menu-network__item span.notif {
        left: -4px;
        top: 0px;
    }
}

@media (min-width: 768px) { .top-bar__menu-network__item > [class^=icon] { margin: 0; } }
@media (max-width: 767px) { .top-bar__menu-network__item > [class^=icon] { margin-right: 0.5em; } }

.top-bar__menu-network__item.titre {
  font-size: 1.25em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-weight: 600;

}

.top-bar__menu-network__item.titre.actif {
  color: #ffffff;
}

@media (min-width: 768px) { .top-bar__menu-network__item.titre { font-size: 1.25em; } }
@media (max-width: 767px) { .top-bar__menu-network__item.titre { font-size: 1.75em; } }

.top-bar__menu-network__item.titre > [class^=icon] { margin: 0 0.25em; }
@media (max-width: 767px) { .top-bar__menu-network__item.titre > [class^=icon] { margin-left: 0; } }

@media (min-width: 768px) {
  .top-bar__menu-network__item.titre {
    display: flex;
      /*flex-direction: row-reverse;*/
    align-items: center;
  }
  .top-bar__menu-network__item.separateur {
    border-left-width: 1px;
    border-left-style: solid;
    padding-left: 0.5em;
    margin-left: 0.5em;
  }
}

@media (max-width: 767px) {
  .top-bar__menu-network__item.separateur {
    border-top-width: 1px;
    border-top-style: solid;
    padding-top: 0.5em;
    margin-top: 0.5em;
  }
}

@media (min-width: 768px) {
    .top-bar__menu-network__item:not(.actif)[aria-label]:after {
    content: attr(aria-label);
    display: none;
    position: absolute;
        bottom: calc(34px + 0.5em);
    left: -1em;
    z-index: 5000;
    pointer-events: none;
    padding: 8px 10px;
    line-height: 15px;
    white-space: nowrap;
    text-decoration: none;
    text-indent: 0;
    overflow: visible;
    font-size: .9em;
    font-weight: normal;
  }

    .top-bar__menu-network__item:not(.actif)[aria-label]:before {
    content: " ";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid;
    display: none;
    position: absolute;
    bottom: calc(25px + 0.5em);
    left: calc(50% - 10px);
  }

    .top-bar__menu-network__item:not(.actif)[aria-label]:hover:after, .top-bar__menu-network__item:not(.inactif)[aria-label]:focus:after,
    .top-bar__menu-network__item:not(.actif)[aria-label]:hover:before, .top-bar__menu-network__item:not(.inactif)[aria-label]:focus:before {
    display: block;
  }
}

@media (max-width: 767px) {
    .top-bar__menu-network__item:not(.actif)[aria-label]:after {
    content: attr(aria-label);
  }
}

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

.suggestions .notif {
  position: absolute;
  left: 27%;
  top: 12%;
  border-radius: 100%;
  width: 20px;
  height: 20px;
}

.top-bar__menu-network__item.actif span.notif {
    left: 25px;
    top: 23px;
    display: a;
    position: absolute;
    z-index: 1000;
}

/*
==============================================================
==============================================================
   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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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 {
        font-size: 1.3em;
    }
}

.top-bar__menu__item.n2 > a {
    font-size: 1.3em;
}

/* spécificités n2b */
.top-bar__menu__item.n2b > a {
    padding-top: 3px;
    padding-bottom: 3px;
    opacity: 0.6;
}

@media screen and (max-width: 340px) {
    .top-bar__n2 {
        font-size: 0.9em;
    }
}

/* interactivité */
.top-bar__menu__item > a.courant { background-color: rgba(0, 0, 0, 0.57); }
.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: #ffffff;
}

/*
==============================================================
==============================================================
   TOP-BAR - EXTENSION
==============================================================
==============================================================
*/

@media screen and (max-width: 767px) {
    .top-bar__extension__header,
    .top-bar__extension__content{
        margin-right: 10px;
        margin-left: 10px;
    }

    .top-bar__extension__header {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/*
==============================================================
   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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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: 30%;
        float: left;
        margin-right: 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%;
        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;
    }
}

/*
==============================================================
==============================================================
   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: 2em 20px;
    margin-bottom: 5px;
}

.page-header_home-rubrique > .titre-page {
    padding-right: 0;
    padding-left: 0;
}

/* style */

.page-header_home-rubrique {
    background-color: #ffffff;
}

/*
==============================================================
==============================================================
   TITRE PAGE
==============================================================
==============================================================
*/

.titre-page {
    line-height: 1em;
}

.titre-page > .pict {
    margin-left: 0;
}

@media (max-width: 979px) {
    .titre-page span {
        display: none;
    }
}

.titre-page__baseline {
  margin-top: 0;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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{
    /* patch */
    float: none;
    height: 60px;
    top: -2px;
    position: relative;
}

.page-header_home-rubrique > .titre-page__baseline {
    text-align: center;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   FOOTER SITE
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

footer  {
    background-color: #ACAFB2;
    margin-top: 50px;
    position: relative;
}

@media (min-width: 980px) {
  footer  {
    margin-top: 50px;
  }
}

@media (max-width: 979px) {
    footer {
        margin-top: 20px;
    }
}

/*
==============================================================
==============================================================
   LOGOS PARTENAIRES
==============================================================
==============================================================
*/

.logos-partenaires {
    background-color: #efefef;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.logos-partenaires__list {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.logos-partenaires__item {
    float: left;
    margin: 5px 0.9em;
}

.logos-partenaires__item > a > img {
    height: 70px;
}

.logos-partenaires__titre {
  font-size: 1.7em;
  font-weight: normal;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: #898c8f;
}

@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: 20px 0;
}

.bottom-bar > .container > .row {
  display: flex;
  align-items: flex-start;
}

@media (max-width: 979px) {
  .bottom-bar > .container > .row {
    flex-wrap: wrap;
  }
}

.bottom-bar .span2 {
  float: none;
  border-left: 1px solid #D9DCDF;
  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: #6B6D71;
  font-weight: 600;
  font-size: 1.53em;
  line-height: 1.1em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin: 0;
}

.bottom-bar .menu  {
    list-style-type: none;
    padding-left: 0;
    margin: 0.2em 0 0.5em;
}

@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: #6B6C71;
    display: block;
    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; } }

.bottom-bar .menu > li > a:hover {
    background-color: #EDF0F3;
    color: #6C6F71;
}

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

    .bottom-bar .menu > li > a {
        background-color: #d9dcdf;
    }
}
/*
==============================================================
    RESEAUX
==============================================================
*/

.liste_reseaux {
    *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 {
    background-color: #d9dcdf;
    padding: 1em;
    margin: 7px;
}

@media (max-width: 979px) and (min-width: 400px) {
  .bottom-bar .reseaux {
    margin: 7px 0;
  }
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   ACTUS
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.blc.actu {
    background-color: #ffffff;
}

.actu h2 {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 4em;
  line-height: 0.8em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin-top: 0;
  margin-bottom: 0;
  color: #ffffff;
  background-color: #ACAFB2;
  padding: 25px 10px 15px;
}

.actu.zoom h2,
.actu.echo h2 {
    line-height: 0.84em;
}

.actu.zoom h2,
.actu.echo h2 {
    font-size: 2.1em;
}

@media screen and (min-width:980px) and (max-width:1199px) {
    .actu.zoom h2, .actu.echo h2 {
        font-size: 1.8em;
    }
}

.blc.actu .suite {
    text-decoration: none;
    display: block;
    margin-top: 0.5em;
}

.blc.actu .suite span {
    text-decoration: underline;
}

.blc.actu .suite:hover span {
    text-decoration: none;
}

.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: 350px;
    }
}

.p_actu .blc.actu > img {
    width: 100%;
}

.p_actu .une img {
  border-bottom: 10px solid #90A905;
  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: 10px;
}

.blc.concept {
    float: left;
}

/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   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;
}

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: #D9DCDF;  }
div.anythingControls ul li a.cur {  background-color: #898C8F;  }

/*
==============================================================
   SLIDER IMAGE
==============================================================
*/

.slider__image > img {
    width: 100%;
}

/*
==============================================================
   SLIDER TEXTE
==============================================================
*/

.slider__texte {
  padding-top: 1px;
  padding-bottom: 2em;
  box-sizing: border-box;
}

@media screen and (min-width: 600px) {
    .slider__texte {
        padding-left: 7%;
        padding-right: 7%;
    }
}

@media screen and (max-width: 600px) {
    .slider__texte {
        padding-left: 5%;
        padding-right: 5%;
    }
}

/* H3 */

.slider__texte > h3 {
    margin: 0.5em 0;
    font-weight: normal;
    color: #434648;
    font-size: 2em;
    line-height: 1.1em;
}

/* P */

.slider__texte > p {
    margin: 0.5em 0;
    color: #878C8D;
    /* line-height: 0.95em; */
}

.slider__texte .date  {
    font-weight: bold;
    color: #6b6e71;
}

.slider__texte .suite { text-decoration: none; }
.slider__texte .suite span { text-decoration: underline; }
.slider__texte .suite:hover span { text-decoration: none; }

/*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
==============================================================
*/
@media screen and (min-width: 1200px) {
    .grand-slider__item > .slider__texte {
        width: 30%;
    }
}

@media screen and (max-width: 1199px) and (min-width: 980px) {
    .grand-slider__item > .slider__texte {
        width: 45%;
    }
}

@media screen and (min-width: 980px) {
    .grand-slider__item > .slider__texte {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        padding: 0 2%;
        background-color: rgba(0,0,0,0.8);
    }

    .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: #e9ebee;
        margin-left: 0;
        margin-right: 0;
    }

    .grand-slider__item > .slider__texte > h3,
    .grand-slider__item .date {
        color: #ffffff;
    }
}


/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   TUILES
======================================================================================================================================================================================================
======================================================================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
==============================================================
==============================================================
   PROGRAMME
==============================================================
==============================================================
*/

.tuilesWrap {
    margin: 0 -5px;
}

.tuile {
    display: block;
    float: left;
    height: 150px;
    margin: 5px;
    position: relative;
    text-decoration: none;
}

.tuile:link, .tuile:visited, .tuile:hover, .tuile:focus, .tuile:active { color: #ffffff; }

.tuile p {
  bottom: 0;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 1.5em;
  line-height: 1.1em;
  margin-left: 5%;
  margin-right: 5%;
  position: absolute;
  text-align: center;
  width: 90%;
}

.tuile.deux_lignes p {
    margin-bottom: 0.6em;
}

.tuile.une_ligne p {
    margin-bottom: 1.1em;
}

.tuile span {
    bottom: 42%;
    height: 90px;
    left: 50%;
    margin-left: -45px;
    margin-top: 0;
    width: 90px;
}

.tuile.deux_lignes span {
    top: 0;
}

.tuile.une_ligne span {
    top: 10px;
}

/* -- 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: #6642b5; /* teinte 4 */
    transition: all 0.15s linear;
}

.tuile.violet:active,
.tuile.violet:hover,
.tuile.violet:active {
    background-color: #4b298f;  /* 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
==============================================================
==============================================================
*/

.suggestions {
  display: flex;
  justify-content: center;
    flex-wrap: wrap;
  margin: 0 -5px;
}

@media (min-width: 980px) { .suggestions { width: calc(100% + 10px); } }
@media (max-width: 979px) { .suggestions { width: calc(100% + 2%); } }

.span4 > .suggestions { flex-wrap: wrap; }
@media (max-width: 979px) { .suggestions { flex-wrap: wrap; } }
.suggestions.left { justify-content: flex-start; }

/*
======================================
  INTITULE DES SUGGESTIONS
======================================
*/

.suggestions > h4 {
  width: 100%;
  margin: 0 5px 5px;
  padding: 1em 0.75em 0.5em;
  text-align: right;
  font-weight: 600;
  font-size: 2em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: #fff;
}

@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: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
  margin : 5px;
  transition: background-color 0.15s ease-in-out;
}

@media (min-width: 1200px) {
  .blc.tl {
    min-height: 190px;
    width: 190px;
  }
}

@media (max-width: 1199px) and (min-width: 980px) {
  .blc.tl {
    min-height: 150px;
    width: 150px;
    font-size: 0.78em;
  }
}

@media (max-width: 979px) and (min-width: 500px) {
  .blc.tl { width: calc((100% / 3) - 10px); }
  .blc.tl.tulc { width: calc((100% / 2) - 10px); }
}

@media (max-width: 499px) {
  .blc.tl {
    width: calc((100% / 2) - 10px);
    font-size: 0.9em;
  }
}

/* tuile img */

@media (min-width: 1200px) { img.tl { width: 100px; } }
@media (max-width: 1199px) and (min-width: 980px) { img.tl { width: 78px; } }
@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-family: 'Source Sans Pro', Arial, sans-serif;
  font-weight: normal;
  margin: 0.15em 5% 0.75em;
  font-size: 1.5em;
  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;
}

.blc.tl.violet { background-color: #6642b5; }
.blc.tl.violet:hover, .blc.tl.violet:active {
    background-color: #5836a0;
    transition: background-color 500ms;
}

/*
======================================
  BV
======================================
*/
/*
header { display: none; }
*/
.blc.visu {
  position: relative;
  margin: 5px;
  cursor: pointer;
}

@media (min-width: 980px) { .blc.visu { width: calc(50% - 10px); } }
@media (max-width: 979px) and (min-width: 550px) { .blc.visu { width: calc(25% - 10px); } }
@media (max-width: 549px) { .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;
}
/* Ajout JCL suite au basecamp MN */
.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.69em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin: 0;
  padding: 10px;
}

@media (max-width: 979px) and (min-width: 480px) { .blc.visu > div > h3 { font-size: 1.3em; } }

@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: #6B6C71;
  margin: 0 0 0.5em;

  font-weight: 600;
  font-size: 1.4em;
  line-height: 1.1em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.reseaux p {
    margin-top: 5px;
    margin-bottom: 15px;
    color: #868C8C;
    font-size: 0.92em;
}

/*
==============================================================
   NEWSLETTER
==============================================================
*/

.pict-lettre {
    background-image: url(../interface/sprite50.png);
    background-repeat: no-repeat;
}

.reseaux__newsletter > .pict-lettre {
    float: left;
    margin-right: 1em;
    width: 50px;
    height: 50px;
}

.reseaux__newsletter > form {
    clear: both;
    margin-bottom: 10px;
}

.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%; padding-right: 10px; } }
@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: 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: #fff;
}

.flecheTemps__date > h6, .flecheTemps__precision  h6 {
  font-family: 'Source Sans Pro', Arial, sans-serif;  line-height: 1em;
}

.flecheTemps.gris > .flecheTemps__corps   { background-color: #bfc2c5; } /* teinte 9 */
.flecheTemps.violet > .flecheTemps__corps { background-color: #b7a5e6; } /* teinte 2 */

.flecheTemps.gris > .flecheTemps__pointe    { background-position: -400%  -0px; }
.flecheTemps.violet > .flecheTemps__pointe  { background-position: -200%  -0px; }

.flecheTemps.gris .flecheTemps__precision > h6   { border-color: #8b8b8b; }
.flecheTemps.violet .flecheTemps__precision > h6 { border-color: #8973c8; } /* teinte 3 */

.flecheTemps.gris .flecheTemps__precision > h6 { color: #8b8b8b; }
.flecheTemps.violet .flecheTemps__precision > h6 { color: #8973c8; } /* teinte 3 */

.flecheTemps.gris .flecheTemps__precision::before   { background-position: -27px -0px; }
.flecheTemps.violet .flecheTemps__precision::before { background-position:  -0px -0px; }

.flecheTemps.gris .flecheTemps__precision,
.flecheTemps.gris .flecheTemps__precision ul   { color: #55595c !important; }
.flecheTemps.violet .flecheTemps__precision,
.flecheTemps.violet .flecheTemps__precision ul { color: #4b298f !important; } /* teinte 6 */



/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
    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-family: 'Source Sans Pro', Arial, sans-serif;
  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;
}

/*
==============================================================
==============================================================
   SPECIAL COULEUR
   >>> à l'occas, amorcer la transition vers USER ou MARQUE plutôt que COULEUR
==============================================================
==============================================================
*/

.elmt_cle.date,
.elmt_cle.couleur {
    border-top-color: #6642b5;
    color: #6642b5;
}



/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================================================================
======================================================================================================================================================================================================
   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: 1em 6% 3em 6%;
}

.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
==============================================================
*/

[class*="p_"] > div:nth-child(even) {
    background-color: #ffffff;
}

[class*="p_"] > div:nth-child(odd),
.p_portail > div:nth-child(even)      { background-color: #e9ebee; }

/*
==============================================================
   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-top: 16px;
  padding-bottom: 16px;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 1.5em;
  line-height: 1.3em;
  font-style: italic;
  font-weight: normal;
}

.p_info > h3,
h3.chapeau {
    padding-left: 6%;
    padding-right: 6%;
}


/*
------------------------
   couleur
------------------------
*/

h3.chapeau,
.p_info > h3 {
    background-color: #EDF0F3;
    color: #434649;
}

[class*="p_"] div.chapeau_fct_ntwk {
    color: #fff;
    background-color: #434649;
}

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

#sommaire ol li a:hover {
    background-color: #acafb2;
    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: #878C8D;
    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: #e9ebee; }
.p_com > .col1 > div:nth-child(even) { background-color: #fff; }

.p_com > .col2 {
    background-color: #898C8F !important;
    color: #E3E5E9;
}

@media screen and (min-width: 1200px) {
    .p_com > .col1, .p_com > .col2 { width: 40%; }
    .p_com > .col1 { left: 5%; }
    .p_com > .col2 { right: 10%; }
}

@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
==============================================================
*/

.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 .col2 h2 {
  color: #ECF0F2;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 400;
  font-size: 1.8em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.p_com .col2 h5 {
  color: #ECF0F2;
  margin-top: 5px;
  margin-bottom: 10px;
  font-weight: 400;
  font-size: 1.6em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

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

.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 -1em;
    overflow: auto;
}

/*
------------------------
   sous-blocs
------------------------
*/
[class*="p_"].blc .liste_sous-blc p {
  margin: 0.7em 0;
}
[class*="p_"].blc .liste_sous-blc > li,
.sous_blc,
.transport {
  position: relative;
  float: left;
  margin: 1em;
  padding: 0;
  background-color: #EDF0F3;
}

/* 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: 767px) {
  [class*="p_"].blc .liste_sous-blc > li {
    width: calc(100% - 2em);
  }
}

/* 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 1em;
}

.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: #FFFFFF;
}

/*
==============================================================
   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.7em 4%;
  margin : 0;
  font-weight: 600;
  font-size: 1.385em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  background-color: #CFD2D5;
  color: #FFFFFF;
}

.liste_sous-blc > .suggestion h4 {
    padding-right: 30px;
}

[class*="p_"].blc .liste_sous-blc > .suggestion:hover h4 {
    background-color: #6b5bb0;
}

.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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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: 149px;
      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-family: 'Source Sans Pro', Arial, sans-serif;
  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 {
    width: 100%;
    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;
}

@media screen and (max-width: 1830px) {
    .mnctxl {
        display: none;
    }

}

@media screen and (min-width: 1831px) {
    .chapeau_fct_ntwk #btn_liste_particpants {
        display: none;
    }
}
/*
==============================================================
   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;
}
*/

#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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

#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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

#actu_flash a  {
    margin-top: 5px;
}

/* ---- SLIDER HOME ---- */

/* Newsletter */
.form.inscr_newsletter input {
    width: 58%;
}

.form.inscr_newsletter button {
    padding: 8px 5px 8px;
    width: 35%;
    margin: 0 0 0 2%;
}

.form.inscr_newsletter button span {
    margin: 0 0.2em 0 0;
    display: none;
}

/* ----- FORMULAIRE ---- */

.form input:not([readonly="readonly"]):focus, .form select:focus, .form textarea:focus {
    color: #444444;
}

.form ul.liste_radio li input[type="radio"]:checked + label:before,
.form ul.liste_radio li label:hover:before {
    border-color: transparent;
}

/* ---- Bandeau Multilangues ----*/
div#band_lang {
    display: none;
    position: relative;
    top: 100px;
    padding: 20px;
    margin: 0;
    color: #fff;
    text-align: center;
}

div#band_lang a#fermer_band_lang {
    display: inline-block;
    float: right;
    /*position: relative;*/
    top: 10px;
    right: 5px;
}

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

a#fermer_band_lang {
    position: absolute;
    top : 7px;
    right: 7px;
    width: 20px;
    height: 20px;
    text-decoration: none !important;
    text-indent: -999em;
    z-index: 10;
    background: 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;
}

@media (max-width: 767px) {
  table.tab_accred {
    margin-left: -5%;
    margin-right: -5%;
    width: 110%;
  }
}

@media (max-width: 359px) {
  table.tab_accred {
    margin-left: -7%;
    margin-right: -7%;
    width: 114%;
  }
}

/* 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: #e9ebee; }
[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 ? */

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-family: 'Source Sans Pro', Arial, sans-serif;
  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 { padding: 0.5em 2em; }

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

/* ---- Programmation ---- */
.programmation {
    background-color: transparent;
    overflow: visible;
    padding-bottom: 10px;
    margin: 0 auto;
    text-align: center;
}

.programmation h1 {
    text-align: left;
}

.titre_partie, .programmation h2 {
  font-style: italic;
  font-weight: 600;
  font-size: 4em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  margin: 0.25em 0 0.1em;
  padding: 0;
  text-align: center;
  color: #434649;
}

.titre_partie { width: 100%; }

.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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

/* 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;
}

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

.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: #e9ebee !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
==============================================================
==============================================================
*/


.programmation-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 1px;
  background-color: #fff;
}

@media (min-width: 768px) {
  .programmation-header { justify-content: space-between; }
  .programmation-header > h1 { flex-grow: 2; }
}
@media (max-width: 767px) { .programmation-header { justify-content: center; } }

/*
------------------------------------------------
------------------------------------------------
  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: #4b298f; }
.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 {
  padding: 0;
  margin: 0 0 1px;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

@media (max-width: 767px) {
  .agenda-sort__liste {
    justify-content: space-between;
    flex-direction: column;
    height: calc(100% - 40px);
    box-sizing: border-box;
    padding: 12%;
  }
}

.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: #5836a0; 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: #5836a0 }
.agenda-sort__item.checked:active { background-color: #4b298f }

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

/*
------------------------------------------------
------------------------------------------------
  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: #4b298f; }

.agenda-sort__btn-valid { background-color: #adcb0b; }
.agenda-sort__btn-valid:hover,
.agenda-sort__btn-valid:focus { background-color: #90a905; }
.agenda-sort__btn-valid:active { background-color: #778c01; }

@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-family: 'Source Sans Pro', Arial, sans-serif;
  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-family: 'Source Sans Pro', Arial, sans-serif;
  font-weight: 600;
  margin: 0.25em 0;
  line-height: 1em;
}

a.display-sorting:link, a.display-sorting:visited { color : #5836a0;}
a.display-sorting:hover, a.display-sorting:focus { color : #4b298f;}
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 > button.selected  { background-color: #6642b5; }
.sort-program__item > button.selected:hover,
.sort-program__item > button.selected:focus { background-color: #5836a0; }
.sort-program__item > button.selected:active  { background-color: #4b298f; }

.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-family: 'Source Sans Pro', Arial, sans-serif;
  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;
  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;
}
/* 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: 240px; }
  .infoProg { margin-left: 15%; flex-grow: 1; width: calc(100% - 15% - 230px); }
  .imgRecrut { width: auto; max-width: 190px; }
}

@media (max-width: 599px) {
  .infoProg,
  .actionProg,
  .imgProg { width: 100%; }
}

.actionProg, .infoProg { box-sizing: border-box; }
@media (min-width: 600px) { .actionProg, .infoProg { padding: 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;
}

/* 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.25em 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  color: #434649 !important;
  font : normal normal 600 2em/1em 'Source Sans Pro' !important;
}

.infoProg > 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.25em 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; }

/* -- sur les vues agenda, lieux 60px */
@media (min-width: 600px) { .actionProg .actionProg__item > .bouton { width: 60px; height: 60px; } }
@media (max-width: 599px) { .actionProg .actionProg__item > .bouton { width: 30px; height: 30px; } .actionProg__item > .bouton > .picto { background-size: 180px auto; } }

/* -- 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: 2px 5px !important;
  text-align: center;
}
/* -- */

.cf-info + .label {
  width: auto !important;
  padding: 6px 8px !important;
  font-size: 1.2em !important;
  background-color: #6642b5 !important;
  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: #4b298f !important; }

/*
------------------------------------------------
------------------------------------------------
  bouton par défaut
------------------------------------------------
------------------------------------------------
*/

@media (min-width: 600px) {
   .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: -122px -122px ; }
   .actionProg__item > .bouton > .pict_libre        { background-position: -182px -122px ; }
   .actionProg__item > .bouton > .pict_flechedroite { background-position: -242px -122px ; }
   .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.btn_available > .label  { color: #adcb0b; /* teinte ?? vert */ }



/*
------------------------------------------------
------------------------------------------------
  réservation / coup de coeur ajouté.e : violet


LEGENDE :
booked : la séance est réservée
coup_de_coeur_actif : le coup de coeur est ajouté
------------------------------------------------
------------------------------------------------
*/

.actionProg__item > .bouton.btn_booked > .picto,
.actionProg__item > .bouton.coup_de_coeur_actif > .picto,
.actionProg__item > .bouton.voteThisFilm.is-chosen > .picto      { border-color: #6642b5; background-color: #6642b5; /* teinte 4 */ }

.actionProg__item > .bouton.btn_booked:hover > .picto,
.actionProg__item > .bouton.coup_de_coeur_actif:hover > .picto,
.actionProg__item > .bouton.voteThisFilm.is-chosen:hover > .picto,
.actionProg__item > .bouton.btn_booked:focus > .picto,
.actionProg__item > .bouton.coup_de_coeur_actif:focus > .picto,
.actionProg__item > .bouton.voteThisFilm.is-chosen:focus > .picto { border-color: #4b298f; background-color: #4b298f; /* teinte 6 */ }

.actionProg__item > .bouton.btn_booked:active > .picto,
.actionProg__item > .bouton.coup_de_coeur_actif:active > .picto,
.actionProg__item > .bouton.voteThisFilm.is-chosen:active > .picto { border-color: #30155c; background-color: #30155c; /* teinte 8 */ }

.actionProg .actionProg__item > .bouton.btn_booked > .label,
.actionProg .actionProg__item > .bouton.coup_de_coeur_actif > .label,
.actionProg .actionProg__item > .bouton.voteThisFilm.is-chosen > .label { background-color: #6642b5; /* teinte 4 */ }

.actionProg .actionProg__item > .bouton.btn_booked.en_cours .picto  {
  background: #6642b5 url("../interface/pictos/loader_billetterie_violet.gif") no-repeat center center;
}

/* Pour liste PLNG */
.planif__item .actionProg__item > .bouton.btn_booked.en_cours .picto  {
  background: #6642b5 url("../interface/pictos/loader_billetterie_violet.gif") no-repeat center center;
}

@media (min-width: 600px) {
   .actionProg__item > .bouton.btn_booked > .pict_resa              { background-position:   -2px   -2px ; }
/* .actionProg__item > .bouton > .pict_invit                        { background-position:   -2px  -62px ; }  au cas où un jour on affiche les invitation perso dans l'appli prog */
   .actionProg__item > .bouton.coup_de_coeur_actif > .pict_cpCoeur  { background-position:   -2px -122px ; }
   .actionProg__item > .bouton.voteThisFilm.is-chosen > .pict_urne  { background-position: -182px -182px ; }
}

@media (max-width: 599px) {
   .actionProg__item > .bouton.btn_booked > .pict_resa              { background-position:  -2px   -2px ; }
/* .actionProg__item > .bouton > .pict_invit                        { background-position:  -2px  -32px ; }  au cas où un jour on affiche les invitation perso dans l'appli prog */
   .actionProg__item > .bouton.coup_de_coeur_actif > .pict_cpCoeur  { background-position:  -2px  -62px ; }
   .actionProg__item > .bouton.voteThisFilm.is-chosen > .pict_urne  { background-position: -92px  -92px ; }
}

/* -- sur les listes de planification (fiches) 30px */

.planif__item .actionProg__item > .bouton.btn_booked > .label,
.planif__item .actionProg__item > .bouton.coup_de_coeur_actif > .label { color: #6642b5; /* teinte 4 */ }

   .planif__item.actionProg__item > .bouton.btn_booked > .pict_resa               { background-position:  -2px   -2px   ; }
/* .actionProg__item > .bouton > .pict_invit                        { background-position: -2px  -32px ; }  au cas où un jour on affiche les invitation perso dans l'appli prog */
   .planif__item .actionProg__item > .bouton.coup_de_coeur_actif > .pict_cpCoeur  { background-position:  -2px  -62px ; }
   .planif__item .actionProg__item > .bouton.voteThisFilm.is-chosen > .pict_urne  { background-position: -92px  -92px ; }

/*
------------------------------------------------
------------------------------------------------
  réservation dernieres places : orange
------------------------------------------------
------------------------------------------------
*/

.actionProg__item > .bouton.btn_last > .picto { border-color: #f59000; /* teinte 4 */ }
.actionProg__item > .bouton.btn_last:hover > .picto,
.actionProg__item > .bouton.btn_last:focus > .picto { background-color: #ffeabb; /* teinte 1 */ }
.actionProg .actionProg__item > .bouton.btn_last > .label { background-color: #f59000; /* teinte 4 */ }

.actionProg .actionProg__item > .bouton.btn_last.en_cours .picto  {
  background: #F8FFC1 url("../interface/pictos/loader_billetterie_orange.gif") no-repeat center center;
}

/* Pour liste PLNG */
.planif__item .actionProg__item > .bouton.btn_last.en_cours .picto  {
  background: #F8FFC1 url("../interface/pictos/loader_billetterie_orange.gif") no-repeat center center;
}

@media (min-width: 600px) { .actionProg__item > .bouton.btn_last > .pict_resa { background-position: -182px    -2px   ; } }
@media (max-width: 599px) { .actionProg__item > .bouton.btn_last > .pict_resa { background-position:  -92px    -2px   ; } }

/* -- sur les liste de planification (fiches) 30px */

.planif__item .actionProg__item > .bouton.btn_last > .label { color: #f59000; /* teinte 4 */ }

.planif__item .actionProg__item > .bouton.btn_last > .pict_resa { background-position: -92px    -2px   ; }


/*
------------------------------------------------
------------------------------------------------
  réservation complet : rouge
------------------------------------------------
------------------------------------------------
*/

.actionProg__item > .bouton.btn_full > .picto { border-color: #e7222d; /* teinte 4 */ }
.actionProg__item > .bouton.btn_full:hover > .picto,
.actionProg__item > .bouton.btn_full:focus > .picto { background-color: #fbdcdc; /* teinte 1 */ }
.actionProg .actionProg__item > .bouton.btn_full > .label { background-color: #e7222d; /* teinte 4 */ }


@media (min-width: 600px) { .actionProg__item > .bouton.btn_full > .pict_resa { background-position: -242px    -2px   ; } }
@media (max-width: 599px) { .actionProg__item > .bouton.btn_full > .pict_resa { background-position: -122px    -2px   ; } }


/* -- sur les liste de planification (fiches) 30px */

.planif__item .actionProg__item > .bouton.btn_full > .label { color: #e7222d; /* teinte 4 */ }

   .planif__item .actionProg__item > .bouton.btn_full > .pict_resa { background-position: -122px    -2px   ; }

/*
------------------------------------------------
------------------------------------------------
  Réservation impossible : gris

LEGENDE :
btn_late : plus réservable, trop tard
btn_pass : réservé aux accrédité mais le niveau de la personne connecté ne donne pas accès à la résa de cet evenement
btn_noway : reservation impossible pour une raison... indéterminée
btn_apply : candidature envoyée, acceptée ou refusée
------------------------------------------------
------------------------------------------------
*/

.actionProg__item > .bouton.btn_late > .picto,
.actionProg__item > .bouton.btn_pass > .picto,
.actionProg__item > .bouton.btn_noway > .picto,
.actionProg__item > .bouton.btn_apply > .picto,
.actionProg__item > .bouton.voteThisFilm.is-closed > .picto
{ border-color: #acafb2; /* teinte 10 */ }

.actionProg__item > .bouton.btn_late:hover > .picto,
.actionProg__item > .bouton.btn_late:focus > .picto,
.actionProg__item > .bouton.btn_pass:hover > .picto,
.actionProg__item > .bouton.btn_pass:focus > .picto,
.actionProg__item > .bouton.btn_noway:hover > .picto,
.actionProg__item > .bouton.btn_noway:focus > .picto,
.actionProg__item > .bouton.btn_apply:hover > .picto,
.actionProg__item > .bouton.btn_apply:focus > .picto,
.actionProg__item > .bouton.voteThisFilm.is-closed:hover > .picto,
.actionProg__item > .bouton.voteThisFilm.is-closed:focus > .picto
{ background-color: #e9ebee; /* teinte 4 */ }

.actionProg .actionProg__item > .bouton.btn_late > .label,
.actionProg .actionProg__item > .bouton.btn_pass > .label,
.actionProg .actionProg__item > .bouton.btn_noway > .label,
.actionProg .actionProg__item > .bouton.btn_apply > .label,
.actionProg .actionProg__item > .bouton.voteThisFilm.is-closed > .label
{ background-color: #acafb2; /* teinte 10 */ }

@media (min-width: 600px) {
   .actionProg__item > .bouton.btn_late > .pict_resa,
   .actionProg__item > .bouton.btn_noway > .pict_resa                 { background-position:  -62px   -2px ; }
/* .actionProg__item > .bouton > .pict_invit                          { background-position:  -62px  -62px ; }  au cas où un jour on affiche les invitation perso dans l'appli prog */
   .actionProg__item > .bouton.btn_pass > .pict_accred                { background-position: -242px  -62px ; }
/* .actionProg__item > .bouton >                                      { background-position:  -62px -122px ; } coup de coeur */
  .actionProg__item > .bouton > .pict_applysent                       { background-position:   -2px -182px ; }
  .actionProg__item > .bouton > .pict_applyvali                       { background-position:  -62px -182px ; }
  .actionProg__item > .bouton > .pict_applyrefu                       { background-position: -122px -182px ; }
  .actionProg__item > .bouton.voteThisFilm.is-closed > .pict_urne     { background-position: -242px -182px ; }
}

@media (max-width: 599px) {
   .actionProg__item > .bouton.btn_late > .pict_resa,
   .actionProg__item > .bouton.btn_noway > .pict_resa               { background-position:  -32px   -2px ; }
/* .actionProg__item > .bouton > .pict_invit                        { background-position:  -32px  -32px ; }  au cas où un jour on affiche les invitation perso dans l'appli prog */
   .actionProg__item > .bouton.btn_pass > .pict_accred              { background-position: -122px  -32px ; }
/* .actionProg__item > .bouton >                                    { background-position:  -32px  -62px ; } coup de coeur */
   .actionProg__item > .bouton > .pict_applysent                     { background-position:   -2px -92px ; }
   .actionProg__item > .bouton > .pict_applyvali                     { background-position:  -32px -92px ; }
   .actionProg__item > .bouton > .pict_applyrefu                     { background-position:  -62px -92px ; }
   .actionProg__item > .bouton.voteThisFilm.is-closed > .pict_urne   { background-position:  -122px -92px ; }
}

/* -- sur les liste de planification (fiches) 30px */

.planif__item .actionProg__item > .bouton.btn_late > .label,
.planif__item .actionProg__item > .bouton.btn_pass > .label,
.planif__item .actionProg__item > .bouton.btn_noway > .label { color: #acafb2; /* teinte 10 */ }

   .planif__item .actionProg__item > .bouton.btn_late > .pict_resa,
   .planif__item .actionProg__item > .bouton.btn_noway > .pict_resa   { background-position:  -32px   -2px ; }
/* .planif__item .actionProg__item > .bouton > .pict_invit            { background-position:  -32px  -32px ; }  au cas où un jour on affiche les invitation perso dans l'appli prog */
   .planif__item .actionProg__item > .bouton.btn_pass > .pict_accred  { background-position: -122px  -32px ; }
/* .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% - 140px);
  bottom: 110%;
  background-color: #eff0f4;
  border: 2px solid #6642b5;
  text-align: center;
  z-index: 100;
  color: #6642b5;
}

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

@media (max-width: 979px) {
  .grd-cat__list { flex-wrap: wrap; }
}

@media (min-width: 980px) {
    .grd-cat__item {
        width: calc(25% - 10px);
    }

    .grd-cat__item:first-child {
        width: 50%;
    }

    /* page programme */
    .grd-cat__item:not(:last-child) {
        margin-right: 10px;
    }

    /* page programme */
    .span8 .grd-cat__item {
        width: 100% !important;
        padding: 0.3em 0;
    }

    /* 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: 10px 0 12px;
  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.5); }

.grd-cat__item > .tuilesWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*
==============================================================
==============================================================

  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(50% - 10px); }
  .grd-cat__item:first-child .tuile { width: calc(25% - 10px); }
  .span8 .grd-cat__item .tuile { width: auto !important; min-width: 150px; }  /* 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 .tuile { min-width: 150px; flex-grow: 1; }
}

.grd-cat__item .tuile > p {
  font-size: 1.2em;
}

/*
==============================================================
==============================================================

  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 {
  min-width: 150px;
  height: auto;
  float: none;
}

.tuilesWrap.lieux > .tuile > img { width: 100%; }
.tuilesWrap.lieux > .tuile > p {
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  margin: 0;
  font-size: 1.4em;
  background-color: #abc715;
  color: #ffffff;
}

/*
==============================================================
==============================================================

  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: #acafb2;
}

/*
==============================================================
==============================================================
  img_fiche_std
==============================================================
==============================================================
*/

@media (min-width: 1200px) {
  .p_fiche .img_fiche_std {
    max-width: none;
    min-width: 100%;
  }
}

@media (max-width: 1199px) {

  .p_fiche .img_fiche_std {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
  }
}



/*
==============================================================
==============================================================
  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 {
  color: #FFFFFF;
  font-size: 1.3em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  padding: 1em 3% 0.5em;
  text-align: center;
}

.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 8% 1.2em;
  background-color: #acafb2;
  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;
  background-color: #FFFFFF;
  color: rgba(0,0,0,0.75);
}

@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
==============================================================
==============================================================
*/

.titre_fiche {
  position: relative;
  box-sizing: border-box;
  height: inherit;
  min-height: 45px;
  margin: 0;
  padding: 0.5em 75px;
  text-align: center;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 2.7em;
  line-height: 0.9em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.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-family: 'Source Sans Pro', Arial, sans-serif !important;
  font-weight: normal !important;
  padding-top: 0 !important;
}

.blc.p_fiche > h2 {
  font-weight: 600;
  font-size: 2.465em;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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-family: 'Source Sans Pro', Arial, sans-serif;
  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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  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%;
}

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

@media (max-width: 767px) {

  .retour.btn {
    padding: 9px 9px 7px 7px;
    border-radius: 50%;
    left: 10px;
  }

  .retour.btn > label {
    display: none;
  }
}

/*
==============================================================
==============================================================
  Ajout au coup de coeur depuis les fiches
==============================================================
==============================================================
*/

.ajout-coeur_fiche {
  text-align: center;
  padding: 0 !important;
}

.ajout-coeur_fiche > a {
  display: block;
  padding: 1em !important;
  color: #5836a0;
  text-decoration: none;
}

.ajout-coeur_fiche > a:link, .ajout-coeur_fiche > a:visited { color: #5836a0; }
.ajout-coeur_fiche > a:hover, .ajout-coeur_fiche > a:focus { color: #4b298f; background-color: #e9ebee; }
.ajout-coeur_fiche > a:active { color: #30155c; background-color: #e1e3e5; }

.ajout-coeur_fiche > a.coup_de_coeur_actif:link, .ajout-coeur_fiche > a.coup_de_coeur_actif:visited { background-color: #6642b5; color: #ffffff; }
.ajout-coeur_fiche > a.coup_de_coeur_actif:hover, .ajout-coeur_fiche > a.coup_de_coeur_actif:focus { background-color: #5836a0; color: #ffffff; }
.ajout-coeur_fiche > a.coup_de_coeur_actif:active { background-color: #4b298f; color: #ffffff; }

.ajout-coeur_fiche > a > .pict20_coeur        { background-position: -20px -80px; }
.ajout-coeur_fiche > a.coup_de_coeur_actif > .pict20_coeur  { background-position:   0   -80px; }

/*
==============================================================
==============================================================
  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: #e9ebee !important; }
.planif__item:active  { background-color: #e1e3e5 !important; }


/*
==============================================================
==============================================================
  Footer
==============================================================
==============================================================
*/
.p_fiche .footerFiche {
  padding: 7px 55px;
  position: relative;
  text-align: center;
  min-height: 50px;
}

.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-top: 5px;
  margin-top: 0;
}

.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)
==============================================================
*/

.desabo-text {
  -webkit-columns: 300px 2;
  -moz-columns: 300px 2;
  columns: 300px 2;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
}

.desabo-text > .quest-rapide {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0;
}

/*
==============================================================
  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% - 320px); }
}

@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: #90a905; }
.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: #f0f0f0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    background: #39d;
}