/* REGLES GLOBALES */

* {
    /*font-family: 'Roboto', sans-serif;*/
    font-weight: 100;
}

/* CVE 01/09/2016 - Supprimer le Halo Bleu des éléments sélectionnés en jquery */
*:focus {
    outline: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

body {
    /*background-color: #edefec;*/
    /* font-family: 'Roboto', sans-serif;*/
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}

h1 {
    color: #5b5b5b;
    font-size: 20pt;
}

a {
    cursor: pointer;
}

b {
    font-weight: 900;
    font-family: robotoregular;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url(../charte/base/pictoFlecheMessageGris.png);
        background-position: 97% center;
        background-repeat: no-repeat;
        background-color: white;
        padding-left: 7px;
    }
}

#pos-site {
    /*background-color: #edefec;*/
    background-color: #f2f2f2;
}

.clear {
    clear: both;
}

.noDecoration {
    text-decoration: none !important;
}

.centrerTexte {
    text-align: center;
}

.close {
    position: absolute;
    right: 0;
    top: 8px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.close:hover {
    opacity: 1;
}

.close:before, .close:after {
    position: absolute;
    left: 5px;
    content: ' ';
    height: 25px;
    width: 2px;
    background-color: white;
}

.close:before {
    transform: rotate(45deg);
}

.close:after {
    transform: rotate(-45deg);
}


.background_blanc {
    background-color: #ffffff;
    margin: 0 auto;
    color: #504f4f;
}

.background_beige {
    background-color: #edefec;
}

.background_bleu {
    background-color: #06b4c9;
}

.background_bleuCiel {
    background-color: #bfe3eb;
}


.background_vert {
    background-color: #d1c825;
}

.background_grisClair {
    background-color: #eae7dd;
}

.background_grisFonce {
    background-color: #5b5b5b;
}

.background_gris {
    background-color: #7e7d7d;
}

.background_rouge {
    background-color: #e83556;
}

.background_rouge a {
    color: white;
}

.background_grisBleu {
    background-color: #eaf6f4;
}


.texte_blanc, .texte_blanc a {
    color: #ffffff;
}

.texte_bleu, .texte_bleu a {
    color: #06b4c9;
}

.texte_bleuCiel, .texte_bleuCiel a {
    color: #bfe3eb;
}

.texte_vert, .texte_vert a {
    color: #d1c825;
}

.texte_vertPomme, .texte_vertPomme a {
    color: #eae7dd;
}

.texte_grisFonce, .texte_grisFonce a {
    color: #5b5b5b;
}

.texte_gris, .texte_gris a {
    color: #7e7d7d;
}

.texte_rouge, .texte_rouge a {
    color: #e83556;
}

.texte_gris, .texte_gris a {
    color: #60605d;
}

.texte2em {
    font-size: 2em;
}

.texte3em {
    font-size: 3em;
}

.uppercase {
    text-transform: uppercase;
}

.underline {
    text-decoration: underline;
}

.text_align_left {
    text-align: left;
}

.text_align_right {
    text-align: right;
}

.text_align_center {
    text-align: center;
}

.padding10 {
    padding: 10px;
}

.padding20 {
    padding: 20px;
}

.margin10 {
    margin: 10px;
}

.margin20 {
    margin: 20px;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.hidden {
    display: none;
}

input {
    height: 30px;
    border: 1px solid #e83556;
    padding: 0 10px;
    -webkit-appearance: none;
    border-radius: 0;
}

textarea {
    -webkit-appearance: none;
    border-radius: 0;
}

::-webkit-input-placeholder {
    font-family: robotolight, arial, helvetica, sans-serif;
    font-size: 11px;
    color: #7e7d7d;
}

:-moz-placeholder {
    font-family: robotolight, arial, helvetica, sans-serif;
    font-size: 11px;
    color: #7e7d7d;
}

::-moz-placeholder {
    font-family: robotolight, arial, helvetica, sans-serif;
    font-size: 11px;
    color: #7e7d7d;
}

:-ms-input-placeholder {
    font-family: robotolight, arial, helvetica, sans-serif;
    font-size: 11px;
    color: #7e7d7d;
}

.g-recaptcha {
    transform: scale(0.77);
    transform-origin: 0 0;
    margin-left: auto;
    margin-right: auto;
    width: 235px;
}

.button_rectangulaire {
    padding: 10px 40px;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

a.button_rectangulaire {
    color: white !important;
}

/* REGLES HomePage */

.HP_contourCarre {
    height: 180px;
    width: 180px;
    border: 3px solid;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 8px;
}

.HP_contourCarreVert {
    border-color: #d1c825;
}

.HP_contourCarreRouge {
    border-color: #e83556;
}

.HP_contourCarreBleu {
    border-color: #06b4c9;
}

.HP_contourCarreJaunePale {
    border-color: #e3de7c;
}


.titrePage {
    float: left;
    font-size: 45px;
    font-weight: 100;
    text-transform: uppercase;
    margin-top: 30px;
    text-align: left;
}

.titrePage span {
    font-weight: bold;
}

.messageBienvenue .grosSouligne {
    border-bottom: 10px solid #4F4F4F;
    color: #4F4F4F;
}

.gras {
    font-weight: bold;
    font-family: robotoregular;
}

.gros {
    font-size: 1.8em !important;
}

.maxWidth1024 {
    max-width: 1000px;
    /*margin-top: 4px;*/
}

.messageBienvenue {
    float: left;
    font-size: 14pt;
    text-transform: uppercase;
    margin-top: 20px;
    text-align: left;
    width: 100%;
    line-height: 2em;
    color: #4F4F4F;
}

.sousTitre1,
.sousTitre1 span {
    color: #7e7d7d;
    font-size: 24px;
    font-weight: lighter;
    font-size: 1.5em;
}

.sousTitre1 .sousTitre1Gras {
    font-weight: bold;
}

.sousTitre1 .sousTitre1Souligne {
    border-bottom: 5px solid #7e7d7d;
}

.titreListe {
    display: inline-block;
    text-transform: uppercase;
    font-size: 17px;
}

.titreListe span {
    font-weight: bold;
}

.souligneVert {
    border-bottom: 3px solid #d1c825;
    padding-bottom: 5px;
    width: 100%;
    text-align: left;
}

.souligneRouge {
    border-bottom: 3px solid #e83556;
    padding-bottom: 5px;
    width: 100%;
    text-align: left;
}

.souligneBleu {
    border-bottom: 3px solid #06b4c9;
    padding-bottom: 5px;
    width: 100%;
    text-align: left;
}

.souligneJaunePale {
    border-bottom: 5px solid #e3de7c;
    padding-bottom: 3px;
    width: 100%;
    text-align: left;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

#HP_espace {
    float: left;
    width: 600px;
}

#HP_contenu {
    max-width: 1000px;
    margin: 0 auto;
}

#HP_logoIEC {
    float: left;
    width: 400px;
    height: 300px;
    text-align: center;
}

#HP_logoIEC img {
    margin: 87px 0;
}

#HP_baseline {
    float: left;
    width: 400px;
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: center;
    text-align: center;
}

#HP_connexion {
    float: left;
    width: 200px;
    height: 100px;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

#HP_connexion img {
    width: 18px;
}

.lien_iec img {
    width: 55px !important;
}

#formLogin input {
    text-align: center;
}

/* REGLES VOLONTAIRES */

.boutons_haut_droite {
    float: right;
}

#HP_retour {
    width: 200px;
    height: 100px;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

#HP_retour a, #HP_message a {
    display: flex;
}

#HP_message {
    width: 200px;
    height: 200px;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    clear: right;
}

#enteteLogguee {
    /*height: 300px;*/
    /*background: -webkit-radial-gradient(50% 200px, ellipse cover, rgba(224,222,206,1) 10%, rgba(255,255,255,1) 73%);*/


    /*background: -moz-radial-gradient(50% 200px, ellipse cover, rgba(224,222,206,1) 10%, rgba(255,255,255,1) 73%);*/ /* ff3.6+ */
    /*background: -webkit-gradient(radial, 50% 200px, 0px, center center, 100%, color-stop(10%, rgba(224,222,206,1)), color-stop(73%, rgba(255,255,255,1)));*/ /* safari4+,chrome */
    /*background:-webkit-radial-gradient(50% 200px, ellipse cover, rgba(224,222,206,1) 10%, rgba(255,255,255,1) 73%);*/ /* safari5.1+,chrome10+ */
    /*background: -o-radial-gradient(50% 200px, ellipse cover, rgba(224,222,206,1) 10%, rgba(255,255,255,1) 73%);*/ /* opera 11.10+ */
    /*background: -ms-radial-gradient(50% 200px, ellipse cover, rgba(224,222,206,1) 10%, rgba(255,255,255,1) 73%);*/ /* ie10+ */
    /*background:radial-gradient(ellipse at 50% 200px, rgba(224,222,206,1) 10%, rgba(255,255,255,1) 73%);*/ /* w3c */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E0DECE', endColorstr='#FFFFFF',GradientType=1 );*/ /* ie6-9 */

}

#HP_bienvenue {

    float: left;
    width: 400px;
    display: flex;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    display: block;
    position: relative;
    /*height: 100%;*/
    margin-bottom: 20px;
}

#HP_bouton_parrainage {
    /*
      position: absolute;
      bottom: 0;
      left: 130px;
      text-transform: uppercase;
      width: 300px;
      padding: 10px;

      -webkit-box-shadow: 0 -10px 10px -10px gray;
      -moz-box-shadow: 0 -10px 10px -10px gray;
      box-shadow: inset 0 -10px 10px -10px gray;
      */

    position: absolute;
    /* top: 0; */
    margin-left: 540px;
    text-transform: uppercase;
    width: 300px;
    padding: 10px;
    -webkit-box-shadow: 0 -10px 10px -10px gray;
    -moz-box-shadow: 0 -10px 10px -10px gray;
    box-shadow: inset 0 -10px 10px -10px gray;
    /* height: 30px; */
    margin-top: -42px;
    /* left: auto; */
}

#HP_bouton_parrainage img {
    margin-left: 10px;
    margin-right: 10px;
}

#map {
    width: 90%;
    height: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#map2 {
    width: 90%;
    height: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.button_store {
    width: 250px;
    margin: 5px;
}

.HP_contenuCarreReseauxSociaux {
    display: flex;
    justify-content: center;
}

.HP_contenuCarreReseauxSociaux span {
    margin: 7px;
}

.rs_twitter {
    background-image: url('../charte/base/RS_tweeter_gris.png');
    width: 25px;
    height: 25px;
    display: block;
    background-size: 100%;
    float: left;
}

.rs_twitter:hover {
    background-image: url('../charte/base/RS_tweeter_couleur.png');
}

.rs_facebook {
    background-image: url('../charte/base/RS_facebook_gris.png');
    width: 25px;
    height: 25px;
    display: block;
    background-size: 100%;
    float: left;
}

.rs_facebook:hover {
    background-image: url('../charte/base/RS_facebook_couleur.png');
}

.rs_gplus {
    background-image: url('../charte/base/RS_google+_gris.png');
    width: 25px;
    height: 25px;
    display: block;
    background-size: 100%;
    float: left;
}

.rs_gplus:hover {
    background-image: url('../charte/base/RS_google+_couleur.png');
}

.rs_youtube {
    background-image: url('../charte/base/RS_youtube_gris.png');
    width: 25px;
    height: 25px;
    display: block;
    background-size: 100%;
    float: left;
}

.rs_youtube:hover {
    background-image: url('../charte/base/RS_youtube_couleur.png');
}

.reseaux_sociaux {
    margin-bottom: 30px;
    padding: 10px;
    display: block;
    text-align: left;
    padding-left: 20px;
}

.reseaux_sociaux .texte_gris {
    vertical-align: top;
    color: #7e7d7d;
    margin-right: 10px;
}

.reseaux_sociaux .rs_twitter, .reseaux_sociaux .rs_facebook, .reseaux_sociaux .rs_gplus .rs_youtube {
    display: inline-block;
    float: none;
    margin-right: 10px;
}

.separateurPourRS {
    margin: 0 auto;
    width: 96%;
    border-top: 1px solid #7e7d7d;
}

.contenuReseauxSociaux {
    /*padding-left: 25px;*/
    display: inline-block;
}

.zoneEtudesInteressantes {
    float: left;
    width: 420px; /*360*/
    padding: 20px;
    text-align: left;
    font-size: 0.8em;
}

.zonePrincipale {
    margin-left: 495px; /*431*/
    border-left-style: solid;
    border-left-width: 4px;
    border-left-color: #ecf2e6;
}

.zoneEtudeEnCours {
    width: 400px; /*420*/
    float: left;
    padding: 20px;
    text-align: left;
    font-size: 0.8em;
    box-sizing: border-box;
}

.bulleNotif {
    background: red;
    color: white;
    width: 16px;
    height: 16px;
    text-align: center;
    border-radius: 10px;
    font-size: 10px;
    padding: 0;
    position: absolute;
    top: -2px;
    right: 4px;
}

.zoneEspaceInformation {
    float: right;
    width: 0;
}

.md-modal {
    min-width: 300px !important;
}

.popup_zoneContenuCoordonnes {
    padding: 40px;
}

.popup_modif_coordonnees {
    text-align: left;
    clear: both;
    margin-top: 40px;
    margin-bottom: 30px;
}

.confirmerEmail {
    /*display: none;*/
}

.masqueIban {
    display: none;
}

.masqueMdp {
    display: none;
}

.popup_col_gauche {
    float: left;
    width: 40%;
    text-align: left;
    font-weight: bold;
    height: 30px;
}

.popup_col_gauche_longue {
    float: left;
    width: 100%;
    text-align: left;
    font-weight: bold;
    height: 30px;
}

.popup_col_droite {
    float: left;
    width: 60%;
    text-align: left;
}

.popup_col_droite input {
    width: 90%;
}

.popup_col_droite select {
    height: 30px;
    border: 1px solid #e83556;
    padding: 0 10px;
    -webkit-appearance: none;
    border-radius: 0;
    width: 100%;
}

.inscriptionVol input,
.inscriptionVol select {
    border: 1px solid #d1c825;
    height: 30px;
    width: 100%;
}

/* REGLES ETUDES */

.ui-icon.iconeAccordeon {
    background-image: url('../charte/base/pictoPlus.png') !important;
    float: right;
    width: 21px;
    height: 21px;
}

.ui-icon.iconeAccordeonActive {
    background-image: url('../charte/base/pictoMoins.png') !important;
    float: right;
    width: 21px;
    height: 21px;
}

#accordeon h3 {
    padding-left: 30px;
    border: none;
    background: none;
    color: black;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    margin-top: 10px;
    border-bottom: 3px solid #e9f5f5;
}

.etude_rdv_explication {
    line-height: 2em;
    font-size: 0.9em;
    margin: 20px;
    text-align: left;
}

.etude_rdv_heure {
    color: gray;
}

.etude_rdv_numero {
    float: left;
    font-size: 1.3em;
    line-height: 25px;
}

.etude_rdv_entete {
    color: black;
}

.etude_cadre_message {
    padding: 30px;
}

.etude_rdv_titre_msg {
    margin-bottom: 20px;
    margin-left: 41%;
}

.etude_texte_message {
    text-align: left;
    padding: 0 !important;
    font-size: 13px;
    margin-left: 41%;
}

.btn_etude {
    text-align: right;
    padding-top: 10px;
}

.bouton_rose {
    background: #d4314f !important;
    color: white;
    padding: 5px 10px;
}

.bouton_bleuCiel {
    background: #30acb8 !important;
    color: white;
    padding: 5px 10px;
}

.bouton_vert {
    background: #cece6e !important;
    color: white;
    padding: 5px 10px;
}

.ui-widget-content a {
    color: white !important;
}

.ui-datepicker td span, .ui-datepicker td a {
    color: #555555 !important;
}

.ui-accordion .ui-accordion-content {
    border: none;
    border-bottom: 3px solid #e9f5f5;
}

.tableau_rdv {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.tableau_rdv th, .tableau_rdv td {
    border: none;
    width: 50%;
    height: 30px;
}

.tableau_rdv_libre, .tableau_rdv_libre a {
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border: 0 solid #D1C825;
    background-color: #D1C825;
    color: white;
    width: 100px;
    font-weight: 900;
}

.HP_carre {
    float: left;
    width: 200px;
    height: 200px;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
}

.HP_carre_droite {
    float: right;
    width: 200px;
    height: 200px;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
}

.HP_contenuCarreNonHover,
.HP_contenuCarreHover {
    cursor: pointer;
}

.HP_contenuCarreHover {
    display: none;
}

.HP_carre:hover, .HP_carre_droite:hover {
    background-color: white;
    display: block;
    overflow: hidden;
}

.HP_carre:hover .HP_contenuCarreNonHover, .HP_carre_droite:hover .HP_contenuCarreNonHover {
    display: none;
}


.HP_carre:hover .HP_contenuCarreHover, .HP_carre_droite:hover .HP_contenuCarreHover {
    display: flex;
    justify-content: center;
    text-align: center;
}

.HP_contenuCarreHover .HP_contenuCarre {
    align-self: center;
    display: block;
}

.HP_carre:hover .HP_contenuCarreHover * {
    /*text-decoration: underline;*/
}

.HP_contenuCarre {
    align-self: center;
    overflow: hidden;
    text-overflow: clip;
}

.HP_contenuCarre a {
    text-decoration: none;
}

.HP_contenuCarre img {
    margin: 10px;
    width: 21px;
}

.HP_carreEncadre {
    border: 2px solid #eae7dd;
    padding-top: 42px;
    height: 150px;
    width: 150px;
    box-sizing: border-box;
}

.HP_carreEncadreHover {
    border: 2px solid #d1c825;
    padding-top: 42px;
    height: 150px;
    width: 150px;
    box-sizing: border-box;
    color: #d1c825;
    margin-top: 26px;
}

.HP_carre_coordonnees {
    float: right;
    width: 180px;
    height: 180px;
    color: white;
    display: flex;
    justify-content: center;
    text-align: left;
    line-height: 1.5em;
    padding: 10px;
}

.HP_carre_reseaux_sociaux {
    float: right;
    width: 180px;
    height: 180px;
    color: white;
    display: flex;
    justify-content: center;
    text-align: left;
    line-height: 1.5em;
    padding: 10px;
    text-align: center;
}

.HP_contenuCarreCoordonnees {
    font-size: 0.7em;
}

.HP_contenuCarreCoordonnees a {
    float: right;
    color: #60605d;
    font-weight: bold;
    text-decoration: underline;
}

.HP_rectangle {
    float: left;
    width: 400px;
    height: 200px;
}

.lien_qui_sommes {
    order: 1
}

.lien_reseaux {
    order: 2
}

.lien_iec {
    order: 3;
}

.lien_video {
    order: 4;
}

.lien_inscription {
    order: 5;
}

.lien_contacter {
    order: 6;
}

#HP_reseauxSociaux {
    order: 5;
}

.vignetteActu {
    background-color: white;
    order: 6;
}

.vignetteActuAccueil {
    padding: 10px;
    box-sizing: border-box;
    background: white;
}

.lien_gris {
    color: #626161;
    font-size: 0.8em;
}

.popup_IEC {
    padding: 0 !important;
}

.md-modal {
    top: 50% !important;
}


.popup_zoneTitre {
    height: 40px;
}

.popup_titre {
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.popup_titre span {
    font-weight: bold;
}

.popup_zoneContenu {
    color: #6a6a6a;
    font-size: 13px;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.popup_zoneContenu div {
    padding: 5px 0;
}

.popup_zoneContenu a {
    color: #6a6a6a;
    /*text-decoration: underline;*/
}

/* NEWS */

.page {
    padding: 10px;
    margin: 10px;
}

.colonne_gauche {
    box-sizing: border-box;
    padding: 20px;
}

.colonne_droite {
    width: 200px;
    /*float: right;*/
    min-height: 200px;
    /*display: flex;*/
    /* padding: 20px; */
    box-sizing: border-box;
    text-align: center;
    /* align-items: center; */
    justify-content: center;
    background-color: #f2f2f2;
}


.column-layout {
    display: flex;
    flex-wrap: wrap;
}

.column-layout > div {
    /*box-shadow: 0 0 3px rgba(0,0,0,0.05)*/
}

.flexbox-container {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.flexbox-container > div {
    width: 50%;
    padding: 10px;
    /*padding-right: 50px;*/
    box-sizing: border-box;
}

.flexbox-container > div:first-child {
    margin-right: 20px;
}

.liste_news {
    text-align: left;
}

.liste_videos {
    text-align: left;
    width: 100%;
}

.cadre_video {
    width: 44%;
    float: left;
    background: white;
    margin: 1%;
    padding: 2%;
}

.cadre_news {
    width: 200px;
    float: left;
    background: white;
    /* margin: 1%; */
    padding: 10px;
    min-height: 370px;
    box-sizing: border-box;
    margin-bottom: 5px;
}

.cadre_news_accueil {
    width: 100%;
    text-align: left;
}

.cadre_news_accueil div {
    padding: 0 3px 3px 3px;
    font-size: 0.85em;
}

.cadre_news_accueil .image_news {
    margin-top: 0;
}

.cadre_news:hover {
    -webkit-box-shadow: inset 0 0 0 3px #d1c825;
    -moz-box-shadow: inset 0 0 0 3px #d1c825;
    box-shadow: inset 0 0 0 3px #d1c825;
}

.cadre_video:hover {
    -webkit-box-shadow: inset 0 0 0 3px #d33853;
    -moz-box-shadow: inset 0 0 0 3px #d33853;
    box-shadow: inset 0 0 0 3px #d33853;
}

.cadre_news div, .cadre_video div {
    margin-bottom: 10px;
}

.cadre_news_accueil .info_news, .info_video {
    width: 55%;
    min-height: 100px;
}

.cadre_news .info_news {
    width: 100%;
}

.cadre_news .date_news {
    margin-bottom: 2px;
}

.date_news, .date_video {
    font-size: 0.8em;
    color: gray;
    margin-bottom: 2px !important;
}

.cadre_news_accueil .image_news {
    float: right;
    width: 40%;
    margin-right: 10px;
    height: 110px;
}

.cadre_news .image_news {
    margin-bottom: 25px;

    width: 180px;
}

.image_news {
    height: 130px;
}

.image_video {
    float: right;
    width: 40%;
    margin-right: 5px;
}

/*
    .cadre_video:after {
        content: "";
        position: absolute;
        top: 0;
        width: 150px;
        height: 120px;
        z-index: 100;
        background: transparent url('https://cambriashores.com/wp-content/themes/striking/images/image_icon_play.png') no-repeat center;
        pointer-events: none;
    }

    .cadre_video:hover:after {
        content: "";
        position: absolute;
        top: 0;
        width: 150px;
        height: 120px;
        z-index: 100;
        background: transparent url('https://cambriashores.com/wp-content/themes/striking/images/image_icon_play.png') no-repeat center;
        pointer-events: none;
    }
    */

.lien_video span {
    width: 176px;
    height: 132px;
    position: absolute;
    background: url("") no-repeat;
    /* background-position: 0 0; */
    background-size: 100%;
    margin-left: 259px;
}

.lien_video span:hover {
    width: 176px;
    height: 132px;
    position: absolute;
    background: url("../charte/base/pictoPlayButton.png") no-repeat;
    /* background-position: 0 0; */
    background-size: 100%;
    margin-left: 259px;
}

.zoom-gallery {
    position: relative;
    display: inline-block;
}

.thumbnail {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
    display: inline-flex;
    margin: 5px;
    border: 1px solid #d1c825;
}

.thumbnail img {
    height: 200px;
    object-fit: cover;
    width: 200px;
}

/*
    .zoom-gallery .after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        color: #FFF;
    }
    .zoom-gallery:hover .after {
        display: block;
        background: rgba(0, 0, 0, .3);
    }
    */

.zoom-gallery span {
    width: 200px;
    height: 200px;
    position: absolute;
    background: url("") no-repeat;
    background-size: 100%;
    margin-left: 0;
}

.zoom-gallery span:hover {
    width: 200px;
    height: 200px;
    position: absolute;
    background: url("../charte/base/pictoLoupeGalerie.png") no-repeat;
    background-size: 140%;
    background-position: 50% 50%;
    margin-left: 0;
}


.entete_news {
    /* font-size: 14pt; */
    color: #e83556;
    /* text-decoration: underline; */
    font-weight: bold;
}

.entete_video {
    color: #d33853;
    font-weight: bold;
}

.contenu_news {
    font-size: 0.8em;
    line-height: 1.2;
}

.contenu_video {
    font-size: 0.75em;
}

.bouton_news {
    padding: 5px;
    margin-top: 5px;
    display: inline-block;
    font-size: 0.8em;
}

/* PAGE FAQ */
.tiroirs .itemTiroir .poignee {
    line-height: 35px;
    border-bottom: #e8e8e4 1px solid;
    cursor: pointer;

}

.tiroirs .itemTiroir .pgrise {
    background: #7e7d7d;

}

.tiroirs .itemTiroir .pbleue {
    background: #d1c825;

}

.tiroirs .itemTiroir .b {
    max-width: 30px;
    min-width: 30px;
    text-align: center;
    width: 30px;
}

.tiroirs .itemTiroir .tiroir {
    display: none;
    padding: 10px 5px 17px 5px;;
    font-size: 12px;
    background: #fff;
    text-align: left;
    margin: 10px;
}

.background_blanc .titreFaq {
    padding-left: 20px;
    font-size: 12px;
    color: #e8e8e4;
    font-weight: bold;
    font-size: 15px;
    text-align: left;
}

.background_blanc .bloc_espace {
    height: 100px;
    width: 100%;
}

/* DETAIL NEWS */


.news_detail {
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
}


.news_detail_date {
    display: inline;
    padding: 10px;
    font-size: 12px;
}

.entete_news_detail {
    font-size: 18pt;
    color: #ddd65d;
    font-weight: bold;
    margin-bottom: 20px;
}

.contenu_news_detail {
    margin-top: 40px;
}

.cadre_headingIEC {
    padding: 30px 10px;
    background-color: #ffffff;
}

.cadre_headingIECNonConnecte {
    padding: 10px;
    background-color: #ffffff;
    padding-top: 30px;
    padding-bottom: 30px;
}

.headingIEC {
    margin: 0 auto;
}

.headingIEC img {
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 5px;
}

.headingIEC .picto {
    width: 25px;
}

.celluleEtudeInteressante {
    margin: 10px 0 10px 0;
    text-align: left;
}

.celluleEtudeInteressante_lien {
    text-decoration: underline;
}

.celluleEtudeInteressante_contenu {
    line-height: 1.8em;
    padding-top: 8px;
}

.celluleEtudeInteressante_image {
    float: left;
    margin-right: 20px;
    /*margin-bottom:40px;*/
    display: none; /* Image masqué à la demande de Yannick */
}

.celluleEtudeInteressante_image img {
    width: 86px;
}

.celluleEtudeInteressante_etude {
    font-weight: bold;
    font-size: 1.2em;
}

.celluleEtudeEnCours {
    margin: 20px 0 25px 0;
    text-align: left;
}

.celluleEtudeEnCours_etude {
    font-weight: bold;
    font-size: 1.2em;
}

.celluleEtudeEnCours_complement {
    float: right;
}

.celluleEtudeEnCours_questionnaire {
    font-weight: bold;
    text-decoration: underline;
    width: 180px;
}

.boutonEtudeAppli {
    float: right;
    position: relative;
}

.boutonEtudeAppli img {
    width: 23px;
    margin: 0 10px;
}

.horaireRDV_titre {
    font-weight: bold;
}

hr.separateurCelluleEtude {
    border: 0;
    height: 2px;
    background: #e9e6d8;
    margin-top: 2px;
    margin-bottom: 3px;
}

hr.separateurInscription {
    border: 0;
    height: 3px;
    background: #e9f5f5;
    margin-top: 10px;
    margin-bottom: 10px;
    clear: both;
}

/* CONTACTEZ NOUS */

.texte_contacter {
    font-size: 14px;
}

.formulaire_contact {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.formulaire_contact input {
    width: 90%;
    margin-bottom: 5px;
    border: 1px solid #6b706d;
}

.formulaire_contact textarea {

    width: 90%;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid #6b706d;
    padding: 10px;
    height: 100px;
}

.formulaire_contact a {
    display: block;
    width: 150px;
    margin-left: 0;
    margin-right: 0;
}

.petit {
    font-size: 0.8em;
}

.deplacement {
    margin: 20px;
    margin-bottom: 20px !important;
    margin-right: auto;
    margin-left: auto;
}

.deplacement_metro {
    width: 282px;
    padding: 20px;
    box-sizing: border-box;
}

.deplacement_bus {
    width: 440px;
    padding: 20px;
    box-sizing: border-box;
}

.deplacement_velov {
    width: 240px;
    padding: 20px;
    box-sizing: border-box;
}

.telephone {

}

.fancy {
    line-height: 0.1;
    text-align: center;
    overflow: hidden;
}

.fancy span {
    display: inline-block;
    position: relative;
}

.fancy span:before,
.fancy span:after {
    content: "";
    position: absolute;
    height: 0;
    border-bottom: 1px solid #4d4f4e;
    top: 0;
    width: 600px;
}

.fancy span:before {
    right: 100%;
    margin-right: 15px;
}

.fancy span:after {
    left: 100%;
    margin-left: 15px;
}

#formContact input {
    border: 1px solid #6b706d;
    width: 320px;
    color: #7e7d7d;

}

#formContact textarea {
    border: 1px solid #6b706d;
    width: 320px;
    padding: 10px;
    color: #7e7d7d;
}

#formContact select {
    -webkit-appearance: button;
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.0);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-image: url(../charte/base/pictoFlecheMessageGris.png);
    background-position: 97% center;
    background-repeat: no-repeat;
    background-color: white;
    font-size: inherit;
    overflow: hidden;
    padding: 8px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 30px;

    margin-top: 0;
    border: 1px solid #6b706d;
    width: 342px;
    color: #7e7d7d;
    margin: 0;
    font-size: 11px;
    -moz-appearance: none;
}

/* QUESTIONNAIRE */
.imageQuestionnaire {
    overflow: hidden;
    -webkit-border-radius: 50px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    width: 120px;
    height: 120px;
}

#formID td {
    padding: 10px;
}

.questionnaire, .questionnaireBas {
    font-size: 0.938em;
}

#titre_etudes {
    text-align: left;
}

#titre_etudes h1 {
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 100;
    border-bottom: 2px dashed #f1e8db;
    padding-bottom: 10px;
}

.etape_etude {
    text-align: center;
    border-bottom: 2px dashed #f1e8db;
    padding-bottom: 10px;
    padding-top: 10px;
}

.ligne_question_etude {
    text-align: left;
    width: 66%;
    border-bottom: 2px dashed #f1e8db;
    font-size: 12px;
    padding-bottom: 10px;
}

label {
    padding: 10px;
}

.popup_col_droite input[type=radio] {
    -moz-appearance: radio !important;
}

input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    visibility: hidden;
    width: 20px;
    border: none;
    height: 12px;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    vertical-align: top;
    margin-top: -1px;
}

input[type=radio]:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    background: red;
}

input[type=radio]:checked:before {
    background: green;
}

/* images */
input[type=radio]:before {
    visibility: visible;
    background: url('../charte/base/pictoCheckboxUnchecked.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
}

input[type=radio]:checked:before {
    visibility: visible;
    background: url('../charte/base/pictoCheckboxChecked.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
}

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*visibility: hidden;*/
    width: 20px;
    border: none;
    height: 12px;
    margin-right: 7px;
    cursor: pointer;
}

input[type=checkbox]:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    background: red;
}

input[type=checkbox]:checked:before {
    background: green;
}

/* images */
input[type=checkbox]:before {
    visibility: visible;
    background: url('../charte/base/pictoCheckboxUnchecked.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
}

input[type=checkbox]:checked:before {
    visibility: visible;
    background: url('../charte/base/pictoCheckboxChecked.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    input[type=radio] {
        visibility: visible;
    }

    input[type=checkbox] {
        visibility: visible;
    }
}

.resp_case {
    padding-left: 5px;
}

.resp_case input[type=radio]:before {
    /*position: absolute;*/
    margin-left: -10px;
    margin-top: -8px;

}

.resp_case input[type=radio]:checked:before {
    /*position: absolute;*/
    margin-left: -10px;
    margin-top: -8px;

}

/* SAISIE REACTIONS */
.selecteur_dates_reactions {
    font-size: 0.90em;
}

.text-select-dates {
    margin-bottom: -10px;
}

/* REGLES PARRAINAGE */

.entete_filleul {
    padding-top: 45px;
    padding-bottom: 10px;
    border-top: 2px dashed #f1e8db;
    margin-top: 20px;
}

#formFilleul input {
    text-align: center;
    width: 210px;
}

/* REGLES MESSAGERIE */

.separateurMessagerie {
    border-top: 2px solid #f1e8db;
    /*margin-top: 10px;*/
    /*margin-bottom: 10px;*/
}

.separateurMessagerieReponse {
    border-top: 2px dashed #f1e8db;
    margin-top: 10px;
    margin-bottom: 10px;
}

.boutonNouveauMessage span {
    vertical-align: bottom;
}

.boutonNouveauMessage img {
    width: 19px;
}

.messageNonLu {
    background-color: #f8f6f4;
}

.boutonNouveauMessage {
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
}

.messagerie_choix_objet {

    -webkit-appearance: button;
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-image: url('../charte/base/pictoFlecheMessage.png');
    background-position: 97% center;
    background-repeat: no-repeat;
    border: 1px solid #06b4c9;
    width: 220px;
    color: #555;
    font-size: inherit;
    margin: 20px;
    overflow: hidden;
    padding: 5px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 30px;
    -moz-appearance: none;

}

.connexion_choix_lieu {

    -webkit-appearance: button;
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-image: url('../charte/base/pictoFlecheStatistiques.png');
    background-position: 97% center;
    background-repeat: no-repeat;
    border: 1px solid #e83556;
    width: 230px;
    color: #555;
    font-size: 11px;
    margin-top: 5px;
    overflow: hidden;
    padding: 8px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 30px;
    -moz-appearance: none;
    text-align-last: center;

}

#formMessage .messagerie_choix_objet {
    margin-top: 0;
}

#formMessage input {
    border: 1px solid #06b4c9;
    width: 320px;
    color: #7e7d7d;

}


#formMessage textarea {
    border: 1px solid #06b4c9;
    width: 320px;
    padding: 10px;
    color: #7e7d7d;
    font-size: 14px;
}

.btn_mod_react {
    margin-left: 5px;
}

.btn_del_react {
    margin-right: 5px;
}

.messageObjet {
    padding-bottom: 20px;
}

.vignetteMessage {
    text-align: left;
    padding: 30px;
}


/* REGLES STATISTIQUES */
.statistique_choix_annee {

    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-image: url('../charte/base/pictoFlecheStatistiques.png');
    background-position: 97% center;
    background-repeat: no-repeat;
    /*border: 1px solid #e83556;*/
    border: none;
    margin: 20px 0 35px 0;
    overflow: hidden;
    padding: 5px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 90px;
    -moz-appearance: none;
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 3px;
    color: #e83556;
}

.statistique_annee {
    margin-bottom: 10px;
    font-size: 1.2em;
    padding-bottom: 4px;
    border-bottom: 3px solid #e83556;
    display: inline;
}

.separateurStatistiques {
    border-top: 2px dashed #f1e8db;
    margin-top: 10px;
    margin-bottom: 10px;
}

.statistique_gauche {
    float: left;
    width: 70%;
    text-align: left;
}

.statistique_droite {
    float: left;
    font-weight: bold;
}

.statistique_centrer {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 50px;
}

.buttonRounded {
    height: 32px;
}

.cercle {
    width: 150px;
    height: 150px;
    padding: 3px;
    border-radius: 150px;
    margin: auto auto;
    background: white;
}

.contour_bleu {
    border: #06B4C9 solid 1px;
}

.contour_rouge {

    border: #e83556 solid 1px;
}

.cercle_interieur {
    width: 100%;
    height: 100%;
    border-radius: 150px;
    margin: auto auto;
    display: table;
}

.cercle_txt {
    display: table-cell;
    vertical-align: middle;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
}

.text_jaune {
    color: #FFC107;
}

/* REGLES INSCRIPTION */

.contact {
    text-align: left;
    /* padding: 20px; */
    margin: 32px;
}

div.ensavoirplusPopupBg {
    border: 2px solid #06b4c9;
}

#text_article {
    padding: 0;
}

.logoRondIEC {
    width: 100px;
    margin-bottom: 20px;
}

.table_milieu {
    margin: 0 auto;
}

.table_colonne_gauche {
    text-align: right;
    width: 50%;
    padding-right: 10px;
}

.table_colonne_droite {
    width: 50%;
    text-align: left;
}

#connu, select.formInscription {
    border-radius: 0;
    height: 30px;
    border: 1px solid #d1c825;
    padding: 0 10px;
    min-width: 200px;
}

.table_colonne_droite input[type=text] {
    width: 150px;
}

.article {
    padding: 20px;
    box-sizing: border-box;
}

#page_article {
    margin-bottom: 30px;
}

.pageArticlePA {
    text-align: left;
    padding: 0 20px;
}

.pageArticlePA #colonne1 {
    overflow: auto;
    height: auto;
    min-height: auto;
    max-height: none;
}

.pageArticlePA #colonne2 {
    float: right;
    padding-right: 0;
}

.pageArticlePA * {
    font-family: robotolight !important;
    font-size: 14px !important;
}

/* REACTIONS */
#formReaction input {
    border: 1px solid #6b706d;
    width: 320px;
    color: #7e7d7d;

}

#formReaction textarea {
    border: 1px solid #6b706d;
    width: 320px;
    padding: 10px;
    color: #7e7d7d;
}

#formReaction select {
    -webkit-appearance: button;
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.0);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-image: url(../charte/base/pictoFlecheMessageGris.png);
    background-position: 97% center;
    background-repeat: no-repeat;
    background-color: white;
    font-size: inherit;
    overflow: hidden;
    padding: 8px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 30px;

    margin-top: 0;
    border: 1px solid #6b706d;
    width: 342px;
    color: #7e7d7d;
    margin: 0;
    font-size: 11px;
    -moz-appearance: none;
}

.dp_reactions {
    width: 150px !important;
}

.video-container-cadre {
    width: 70%;
    padding-left: 15%;
    padding-bottom: 30px;
}

.video-container {
    position: relative;
    padding-bottom: 52.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*#multiselect, #multiselect_to
	{
	  overflow: auto!important;
	  background-image: none!important;
	  padding: 8px 10px!important;
	  height:200px;
	  display:inline-block;
	}

	#multiselect_btns
	{
		display:inline-block;
		height:200px;
	}

	#multiselect_rightSelected, #multiselect_leftSelected
	{
		border:none;
		display:block;
		padding: 5px;
		margin:5px;
		font-size:20px;
	}*/

/* REGLES RESPONSIVES */

/* Regles pour les popup, en cas d'écrna peu haut */
@media screen and (max-height: 700px) {
    .popup_zoneContenu {
        max-height: 500px;
    }
}

@media screen and (max-height: 500px) {
    .popup_zoneContenu {
        max-height: 300px;
    }
}

/* TRES GRAND ECRAN */
@media screen and (min-width: 1100px) {
    .conteneurSite {
        width: 1099px;
        background-color: transparent;
    }

    #HP_bienvenue {
        width: 400px;
    }

    .colonne_gauche {
        width: 800px;
    }

    .zoneEtudeEnCours {
        min-height: 600px;
    }

}

/* ECRAN GRAND */
@media screen and (max-width: 1099px) {
    #HP_logoIEC img {
        margin: 118px 0;
    }

    .etude_rdv_titre_msg {
        margin-left: 0;
    }

    .etude_texte_message {
        margin-left: 0;
    }

    .btn_etude {
        text-align: center;
        padding-top: 10px;
    }

    .deplacement {
        margin: 0;
    }

    .deplacement_metro {
        width: 100%;
    }

    .deplacement_bus {
        width: 100%;
    }

    .deplacement_velov {
        width: 100%;
    }

    .conteneurSite {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    #HP_logoIEC {
        width: 200px;
        height: 300px;
    }

    .zonePrincipale {
        margin-left: 0;
        border-left: none;
        float: left;
        width: 100%;
    }

    .zoneEtudesInteressantes, .zoneEtudeEnCours {
        width: 100%;
        float: left;
        padding: 20px;
        text-align: left;
        box-sizing: border-box;
    }

    .messageBienvenue {
        float: left;
        font-size: 14pt;
        text-transform: uppercase;
        margin-top: 0;
        text-align: left;
        width: 100%;
        line-height: 1em;
        color: #4F4F4F;
    }

    #HP_bouton_parrainage {
        margin-left: 180px;
        width: 230px;
    }

    #HP_espace {
        float: none;
        width: inherit;;
        margin: 0;
    }


    .colonne_gauche {
        width: 600px;
    }


    .lien_video span {
        width: 141px;
        height: 106px;
        margin-left: 206px;
    }

    .lien_video span:hover {
        width: 141px;
        height: 106px;
        margin-left: 206px;
    }

    #text_article {
        /*width: 600px;*/
    }
}

/* ECRAN LARGE */
@media screen and (max-width: 799px) {
    #HP_logoIEC {
        width: 200px;
        height: auto;
    }

    .etude_rdv_titre_msg {
        margin-left: 0;
    }

    .etude_texte_message {
        margin-left: 0;
    }

    .btn_etude {
        text-align: center;
        padding-top: 10px;
    }


    .conteneurSite {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }


    #HP_connexion {
        height: 200px;
    }

    #HP_bouton_parrainage {
        right: 100px;
        width: 100px;
        margin-top: -75px;
    }

    #HP_espace #HP_baseline {
        display: none;
    }

    #HP_espace .vignetteActu {
        width: 100%;
        height: 80px;
    }

    #HP_espace .cadre_headingIECNonConnecte {
        padding: 0;
    }

    .cadre_video {
        width: 570px;
    }


    .news_detail {
    }

    .colonne_droite {
        width: 100%;
        float: none;
        min-height: 0;
    }

    .lien_video span {
        width: 227px;
        height: 170px;
        margin-left: 338px;
    }

    .lien_video span:hover {
        width: 227px;
        height: 170px;
        margin-left: 338px;
    }


    #HP_message {
        height: 100px;
        width: 100%;
        padding: 0;
    }

    #formContact input, #formContact textarea {
        width: 200px;
    }

    #formContact select {
        width: 222px;
    }

    .video-container-cadre {
        width: 100%;
        padding-left: 0;
        padding-bottom: 0;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

}

/* ECRAN MOYEN */
@media screen and (max-width: 615px) {
    #HP_logoIEC img {
        margin: 68px 0;
    }

    .etude_rdv_titre_msg {
        margin-left: 0;
    }

    .etude_texte_message {
        margin-left: 0;
    }

    .btn_etude {
        text-align: center;
        padding-top: 10px;
    }

    .btn_mod_react {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .btn_del_react {
        margin-left: 0;
    }

    .btn_accordeon {
        margin: 4px 0;
    }

    .conteneurSite {
        width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    #HP_bouton_parrainage {
        right: 0;
        width: 100px;
        margin-top: -75px;
    }

    .HP_illustration {
        display: none;
    }

    .cadre_video {
        width: 380px;
    }

    .liste_news, .liste_videos, .colonne_gauche {
        width: 400px;
    }

    .news_detail {
    }

    .lien_video span {
        width: 151px;
        height: 115px;
        margin-left: 224px;
    }

    .lien_video span:hover {
        width: 151px;
        height: 115px;
        margin-left: 224px;
    }


    #HP_bouton_parrainage {
        position: relative;
        top: 0;
        margin-left: 0;
        text-transform: uppercase;
        width: 100%;
        padding: 10px 0 10px 0;
        -webkit-box-shadow: 0 -10px 10px -10px gray;
        -moz-box-shadow: 0 -10px 10px -10px gray;
        box-shadow: inset 0 -10px 10px -10px gray;
        /* height: 30px; */
        margin-top: 0;
        right: 0;
        left: 0;
    }

    /* Inversion de l'ordre */
    .HP_contenu_accueil {
        display: flex;
        flex-flow: row wrap;
    }

    .lien_video {
        order: 4;
    }

    .lien_contacter {
        order: 2;
    }

    #HP_reseauxSociaux {
        order: 6;
    }

    .vignetteActu {
        background-color: white;
        order: 5;
        width: 100% !important;
    }


    #HP_baseline {
        display: none;
    }


    #formMessage input, #formMessage textarea {
        width: 100%;
        box-sizing: border-box;
    }

    .flexbox-container {
        display: block;
    }

    .flexbox-container > div {
        width: 100%;
        box-sizing: border-box;
    }

    #formContact input, #formContact textarea {
        width: 100%;
        box-sizing: border-box;
    }

    #formContact select {
        width: 100%;
    }


    .lien_qui_sommes {
        order: 1
    }

    .lien_reseaux {
        order: 2
    }

    .lien_inscription {
        order: 3;
    }

    .lien_video {
        order: 4;
    }

    .lien_contacter {
        order: 5;
    }

    .lien_iec {
        order: 6;
    }

    .lien_actu {
        order: 7;
    }


    .bouton_block {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        display: block;
    }

    .bouton_block .c {
        float: none;
    }


}

/* PETIT ECRAN */
@media screen and (max-width: 415px) {
    .etude_rdv_titre_msg {
        margin-left: 0;
    }

    .etude_texte_message {
        margin-left: 0;
    }

    .btn_etude {
        text-align: center;
        padding-top: 10px;
    }

    hr.separateurCelluleEtude {
        border: 0;
        height: 2px;
        background: #e9e6d8;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .statistique_gauche {
        width: 235px;
    }

    .statistique_droite {
        font-weight: bold;
    }

    .ui-icon.iconeAccordeon {
        margin-top: 5px;
    }

    .lien_vers_news {
        padding: 5px;
    }

    .etude_cadre_message {
        padding: 10px;
    }

    #accordeon h3 {
        padding-left: 10px;
    }

    .cadre_news div, .cadre_video div {
        margin-bottom: 0;
    }

    .fancy_multiligne {
        line-height: 1;
    }

    .fancy_multiligne span:before,
    .fancy_multiligne span:after {
        content: "";
        position: absolute;
        height: 0;
        border-bottom: none;
        top: 0;
        width: 600px;
    }

    .formulaire_contact a {
        margin-left: auto;
        margin-right: auto;
    }

    /* Inversion de l'ordre */
    .HP_contenu_accueil {
        display: flex;
        flex-flow: column;
    }

    .conteneurSite {
        width: 100%;
        margin: 0;
    }

    .vignetteActuAccueil {
        width: 100%;
    }

    #HP_logoIEC,
    #HP_logoIEC img {
        height: auto;
        width: 180px;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    #HP_espace {
        float: none;
        width: 100%;
        margin: 0;
    }

    #HP_connexion,
    #HP_retour,
    #HP_message,
    #HP_bienvenue,
    .HP_carre,
    .HP_carre_droite {
        height: 100px;
        width: 100%;
        padding: 0;
        font-size: 0.75em;
    }

    .HP_carreEncadre, .HP_carreEncadreHover {
        height: 80px;
        /* width: 100%; */
        padding: 12px;
        margin: 12px;
    }


    .HP_carre_coordonnees, .HP_carre_reseaux_sociaux {
        height: 100px;
        width: 100%;
        padding: 60px;
        box-sizing: border-box;
        font-size: 0.75em;
    }

    .cadre_headingIECNonConnecte {
        padding-top: 20px;
    }

    .HP_contenuCarre img {
        margin: 0;
    }

    #HP_bienvenue {
        display: none;
    }

    .HP_illustration {
        display: none;
    }

    #HP_reseauxSociaux img {
        height: inherit;
    }

    .zoneEtudesInteressantes, .zoneEtudeEnCours {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

    .HP_contourCarre {
        height: 80px;
    }


    .liste_news, .news_detail, .liste_videos, .colonne_gauche {
        width: 100%;
    }


    .cadre_news, .cadre_video {
        width: 100%;
        padding: 0;
        margin: 0;
        min-height: 0;
    }

    .cadre_news {
        border-bottom: 1px solid #d1c825;
    }

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

    .cadre_news div, .cadre_video div {
        padding: 5px;
    }


    .lien_video span {
        display: none;
    }

    .lien_video span:hover {
        display: none;
    }

    .boutons_haut_droite {
        float: none;
        display: block;
        order: 2;
    }

    #enteteLogguee {
        display: flex;
    }

    /* On rechange l'ordre */
    #HP_contenu {
        display: flex;
        flex-flow: column;
    }

    .lien_contacter {
        order: 4;
    }

    .statistique_centrer {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
        box-sizing: border-box;
    }


    .lien_reseaux {
        order: 1
    }

    .lien_qui_sommes {
        order: 2
    }

    .lien_inscription {
        order: 3;
    }

    .lien_video {
        order: 4;
    }

    .lien_contacter {
        order: 5;
    }

    .lien_iec {
        order: 6;
    }

    .lien_actu {
        order: 7;
    }
}

/* Spécifique Firefox */
@-moz-document url-prefix() {
    input[type=radio] {

        visibility: visible;
    }
}

@-moz-document url-prefix() {
    input[type=checkbox] {

        visibility: visible;
    }
}

/* FIN Spécifique Firefox */


/* MAGNIFIC POPUP */
/* Magnific Popup CSS */
.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
    display: none;
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}

.mfp-ajax-cur {
    cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
    cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.mfp-loading.mfp-figure {
    display: none;
}

.mfp-hide {
    display: none !important;
}

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}

.mfp-preloader a {
    color: #CCC;
}

.mfp-preloader a:hover {
    color: #FFF;
}

.mfp-s-ready .mfp-preloader {
    display: none;
}

.mfp-s-error .mfp-content {
    display: none;
}

button.mfp-close,
button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    padding: 0 0 18px 10px;
    color: #FFF;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
    opacity: 1;
}

.mfp-close:active {
    top: 1px;
}

.mfp-close-btn-in .mfp-close {
    color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
    margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
    opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent;
}

.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px;
}

.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7;
}

.mfp-arrow-left {
    left: 0;
}

.mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px;
}

.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
    right: 0;
}

.mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px;
}

.mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
    top: -40px;
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000;
}

/* Main image in popup */
img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
    line-height: 0;
}

.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444;
}

.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px;
}

.mfp-figure figure {
    margin: 0;
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #F3F3F3;
    word-wrap: break-word;
    padding-right: 36px;
}

.mfp-image-holder .mfp-content {
    max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
    /**
       * Remove all paddings around the image on small screen
       */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0;
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0;
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0;
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px;
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box;
    }

    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0;
    }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px;
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0;
    }
}

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }

    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }

    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%;
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px;
    }
}


/* Form Progress */
.progress {
    width: 100%;
    margin: 0 auto 20px auto;
    text-align: center;
}

.progress .circle,
.progress .bar {
    display: inline-block;
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid #d5d5da;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.progress .bar {
    position: relative;
    width: 5%;
    height: 6px;
    top: -33px;
    margin-left: -5px;
    margin-right: -5px;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.progress .circle .label {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    margin-top: 3px;
    color: #b5b5ba;
    font-size: 17px;
}

.progress .circle .title {
    color: #b5b5ba;
    font-size: 13px;
    line-height: 30px;
    margin-left: -5px;
}

/* Done / Active */
.progress .bar.done,
.progress .circle.done {
    background: #eee;
}

.progress .bar.active {
    background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}

.progress .circle.done .label {
    color: #FFF;
    background: #d1c825;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress .circle.done .title {
    color: #b5b5ba;
}

.progress .circle.active .label {
    color: #FFF;
    background: #06B4C9;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress .circle.active .title {
    color: #06B4C9;
}

@media all and (max-width: 620px) {
    .progress .circle, .progress .bar {
        display: none;
    }

    .progress .circle.active {
        display: inline-block;
    }
}

.legende {
    font-size: 11px;
}