@media screen and (max-width: 767px) {
    header.middle-content {
        margin: 0;
        width: 100%; } }

.header-fixe {
    position: fixed; }

.header {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 767px) {
    .header {
        box-shadow: 0 0 0 0; } }

/*header general et menu dropdown*/
.header .pure-u-md-17-24 {
    width: 74.8333%;
    *width: 74.8023%;
}
.header, .header-fixe {
    font-size: .9em;
    z-index: 1000; }
@media screen and (max-width: 767px) {
    .header, .header-fixe {
        left: 0;
        background-color: initial; } }
.header .dropdown-reals, .header-fixe .dropdown-reals {
    position: relative;
    top: calc(var(--hauteur_header) - 1px);
    padding: 12px 0; }
@media screen and (max-width: 767px) {
    .header .dropdown-reals, .header-fixe .dropdown-reals {
        position: static;
        width: 100%;
        padding: 0 0 4px; } }
.header .dropdown-reals .item-dropdown, .header-fixe .dropdown-reals .item-dropdown {
    padding: 12px 20px;
    width: 100%;
    font-size: 100%;
    cursor: pointer; }
@media screen and (max-width: 900px) {
    .header .dropdown-reals .item-dropdown, .header-fixe .dropdown-reals .item-dropdown {
        padding: 12px 10px; } }
@media screen and (max-width: 767px) {
    .header .dropdown-reals .item-dropdown, .header-fixe .dropdown-reals .item-dropdown {
        padding: 14px 0 0;
        font-size: .8em;
        line-height: 1.4em; } }
.header .dropdown-reals .item-dropdown a, .header-fixe .dropdown-reals .item-dropdown a {
    width: 100%;
    height: 100%; }
.header .dropdown-reals .item-dropdown:hover, .header-fixe .dropdown-reals .item-dropdown:hover {
    background-color: var(--orange); }
@media screen and (max-width: 767px) {
    .header .dropdown-reals .item-dropdown:hover, .header-fixe .dropdown-reals .item-dropdown:hover {
        background-color: var(--noirPale);
        color: var(--orange); } }

/*hauteur des elements sur desktop et mobile*/
.header, .header-fixe, .logo-real, .deja-connecte, .right, .presentation {
    height: 66px; }

@media screen and (max-width: 767px) {
    .logo-real, img.icone-recherche {
        height: 56px; } }

@media screen and (max-width: 767px) {
    .header, .header-fixe, .right, .presentation {
        height: auto; } }

#hamburgerMenu {
    height: 100%;
    margin-left: 45px; }
@media screen and (max-width: 767px) {
    #hamburgerMenu {
        height: auto;
        margin-left: 0; } }
#hamburgerMenu .grande-categorie {
    height: 100%;
    padding: 0 20px; }

@media screen and (max-width: 1150px) {
    #hamburgerMenu .grande-categorie {
        padding: 0 10px; } }
@media screen and (max-width: 767px) {
    #hamburgerMenu .grande-categorie {
        background-color: var(--noirMedium);
        padding: 12px 0 12px var(--width_global_1); } }
#hamburgerMenu .onglet-actif {
    border-bottom: solid 2px var(--orange);
    color: var(--orange); }
#hamburgerMenu a.texte-cat {
    padding: 23px 0; }
@media screen and (max-width: 767px) {
    #hamburgerMenu a.texte-cat {
        padding: 0; } }
@media screen and (max-width: 1150px) {
    #hamburgerMenu li.petit {
        font-size: .75em;
    }  }
@media screen and (max-width: 968px) {
    #hamburgerMenu li.petit {
        font-size: .6em;
        } }
@media screen and (max-width: 767px) {
    #hamburgerMenu li.petit {
        font-size: 1.3em;
        letter-spacing: .1em; } }
@media screen and (max-width: 460px) {
    #hamburgerMenu li.petit {
        font-size: 1em;
        letter-spacing: .1em;
    } }
#hamburgerMenu li.li-lesreals img {
    display: none; }
@media screen and (max-width: 767px) {
    #hamburgerMenu li.li-lesreals {
        padding-top: 18px; }
    #hamburgerMenu li.li-lesreals img.blanc {
        display: inline; }
    #hamburgerMenu li.li-lesreals img.or {
        display: none; }
    #hamburgerMenu li.li-lesreals img {
        margin-left: 6px;
        vertical-align: 15%;
        height: 8px; } }
@media screen and (max-width: 767px) {
    #hamburgerMenu li.li-lesreals:hover {
        background-color: var(--noirPale); }
    #hamburgerMenu li.li-lesreals:hover img.or {
        display: inline; }
    #hamburgerMenu li.li-lesreals:hover img.blanc {
        display: none; } }
#hamburgerMenu .grande-categorie:hover {
    background-color: var(--noirPale); }
@media screen and (max-width: 767px) {
    #hamburgerMenu .grande-categorie:hover {
        background-color: var(--noirMedium); } }
#hamburgerMenu .grande-categorie:hover a.texte-cat {
    color: var(--orange); }
#hamburgerMenu .grande-categorie:hover .dropdown-reals {
    background-color: var(--noirPale); }

.header .logo-real, .header-fixe .logo-real {
    background-color: var(--noirMedium); }
@media screen and (max-width: 767px) {
    .header .logo-real, .header-fixe .logo-real {
        padding-left: var(--width_global_1);
        width: 100%; } }
.header .logo-real a, .header-fixe .logo-real a {
    line-height: 0; }
.header .logo-real .reals-img, .header-fixe .logo-real .reals-img {
    height: 30px;
    margin: 16px 0 20px 22px; }
@media screen and (max-width: 767px) {
    .header .logo-real .reals-img, .header-fixe .logo-real .reals-img {
        height: 26px;
        margin: 14px 0 0 0; } }

.header .menu_logged a, .header-fixe .menu_logged a {
    display: block; }
@media screen and (max-width: 767px) {
    .header .menu_logged a, .header-fixe .menu_logged a {
        padding: 12px 0;
        font-size: 1.2em; } }
.header .menu_logged a img, .header-fixe .menu_logged a img {
    height: 15px;
    vertical-align: middle; }
@media screen and (max-width: 767px) {
    .header .menu_logged a img, .header-fixe .menu_logged a img {
        height: 20px; } }
.header .menu_logged a img.icone-monespace, .header-fixe .menu_logged a img.icone-monespace {
    margin: 0 8px 0 18px; }
@media screen and (max-width: 767px) {
    .header .menu_logged a img.icone-monespace, .header-fixe .menu_logged a img.icone-monespace {
        margin: 0 12px 0 24px; } }
@media screen and (max-width: 567px) {
    .header .menu_logged a img.icone-monespace, .header-fixe .menu_logged a img.icone-monespace {
        margin: 0 12px 0 18px; } }
.header .menu_logged a img.icone-profil, .header .menu_logged a img.icone-parametres, .header .menu_logged a img.icone-favoris, .header-fixe .menu_logged a img.icone-profil, .header-fixe .menu_logged a img.icone-parametres, .header-fixe .menu_logged a img.icone-favoris {
    margin: 0 12px 0 20px; }
@media screen and (max-width: 767px) {
    .header .menu_logged a img.icone-profil, .header .menu_logged a img.icone-parametres, .header .menu_logged a img.icone-favoris, .header-fixe .menu_logged a img.icone-profil, .header-fixe .menu_logged a img.icone-parametres, .header-fixe .menu_logged a img.icone-favoris {
        margin: 0 16px 0 26px; } }
@media screen and (max-width: 567px) {
    .header .menu_logged a img.icone-profil, .header .menu_logged a img.icone-parametres, .header .menu_logged a img.icone-favoris, .header-fixe .menu_logged a img.icone-profil, .header-fixe .menu_logged a img.icone-parametres, .header-fixe .menu_logged a img.icone-favoris {
        margin: 0 16px 0 20px; } }
.header .menu_logged a img.icone-deconnexion, .header-fixe .menu_logged a img.icone-deconnexion {
    margin: 0 10px 0 22px; }
@media screen and (max-width: 767px) {
    .header .menu_logged a img.icone-deconnexion, .header-fixe .menu_logged a img.icone-deconnexion {
        margin: 0 14px 0 28px; } }
@media screen and (max-width: 567px) {
    .header .menu_logged a img.icone-deconnexion, .header-fixe .menu_logged a img.icone-deconnexion {
        margin: 0 14px 0 22px; } }

.header .session_state, .header-fixe .session_state {
    position: relative;
    z-index: 1000; }
@media screen and (max-width: 767px) {
    .header .session_state, .header-fixe .session_state {
        width: 100%;
        position: absolute;
        top: 0;
        right: 0; } }
.header .session_state img.icone-recherche, .header-fixe .session_state img.icone-recherche {
    display: none; }
@media screen and (max-width: 767px) {
    .header .session_state img.icone-recherche, .header-fixe .session_state img.icone-recherche {
        display: inline;
        width: 56px;
        opacity: 1;
        position: absolute;
        top: 0;
        right: 0; } }
.header .session_state .state-top:hover, .header-fixe .session_state .state-top:hover {
    color: var(--orangeFonce); }
.header .session_state .state-top:hover .nb, .header-fixe .session_state .state-top:hover .nb {
    filter: grayscale(0);
    -webkit-filter: grayscale(0); }
.header .session_state .state-top:hover button, .header-fixe .session_state .state-top:hover button {
    color: var(--orange); }
.header .session_state .state-top:hover img.user-actif, .header-fixe .session_state .state-top:hover img.user-actif {
    opacity: 1; }
.header .session_state .state-top, .header-fixe .session_state .state-top {
    height: 66px;
    color: var(--grisMedium);
    vertical-align: middle;
    background-color: var(--noirMedium);
    width: 120px;
    margin: auto;
    position: relative;
    letter-spacing: 0.05em; }
@media screen and (max-width: 767px) {
    .header .session_state .state-top .connexion-texte, .header-fixe .session_state .state-top .connexion-texte {
        display: none; } }
@media screen and (max-width: 767px) {
    .header .session_state .state-top, .header-fixe .session_state .state-top {
        height: 56px;
        float: none;
        background-color: var(--noirPale);
        width: var(--hauteur-header-mobile);
        padding: 0;
        top: 0;
        position: absolute;
        right: var(--hauteur-header-mobile); } }
.header .session_state .state-top .deja-connecte, .header-fixe .session_state .state-top .deja-connecte {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: url("/img/fleches/fleche-bas-trans.png") no-repeat 80% 50%;
    background-size: 11px 6px; }
@media screen and (max-width: 767px) {
    .header .session_state .state-top .deja-connecte, .header-fixe .session_state .state-top .deja-connecte {
        background-image: none; } }
.header .session_state .state-top .filtre-blanc, .header-fixe .session_state .state-top .filtre-blanc {
    top: 11px;
    left: 13px; }
.header .session_state .state-top img.user, .header-fixe .session_state .state-top img.user {
    padding: 0 15px 0 48px; }
.header .session_state .state-top img.user2, .header-fixe .session_state .state-top img.user2 {
    padding: 0 4px 0 16px; }
@media screen and (max-width: 767px) {
    .header .session_state .state-top img.user2, .header-fixe .session_state .state-top img.user2 {
        margin: 17px 16px; } }
.header .session_state .state-top img.user, .header .session_state .state-top img.user2, .header-fixe .session_state .state-top img.user, .header-fixe .session_state .state-top img.user2 {
    height: 17px; }
@media screen and (max-width: 767px) {
    .header .session_state .state-top img.user, .header .session_state .state-top img.user2, .header-fixe .session_state .state-top img.user, .header-fixe .session_state .state-top img.user2 {
        height: 22px;
        background-color: var(--noirPale);
        padding: 0; } }
.header .session_state .state-top img.user-actif, .header-fixe .session_state .state-top img.user-actif {
    height: 45px;
    padding-left: 10px;
    opacity: .5; }
@media screen and (max-width: 767px) {
    .header .session_state .state-top img.user-actif, .header-fixe .session_state .state-top img.user-actif {
        padding-left: 0;
        height: 37px;
        margin: 5px 5px;
        opacity: 1; } }
.header .session_state .state-top div.fleche-mobile, .header-fixe .session_state .state-top div.fleche-mobile {
    display: none; }
@media screen and (max-width: 767px) {
    .header .session_state .state-top div.fleche-mobile, .header-fixe .session_state .state-top div.fleche-mobile {
        display: block;
        width: 54px;
        height: 54px;
        position: absolute;
        top: 0;
        z-index: 500;
        background: url("/img/fleches/fleche-bas-blanc.png") no-repeat 50% 95%;
        background-size: 11px 6px; } }
.header .session_state .state-top img, .header-fixe .session_state .state-top img {
    vertical-align: middle; }
.header .session_state .state-top button, .header-fixe .session_state .state-top button {
    height: 100%;
    vertical-align: middle;
    font-size: 1em;
    letter-spacing: .05em;
    outline: none; }
@media screen and (max-width: 767px) {
    .header .session_state .state-top button, .header-fixe .session_state .state-top button {
        display: none; } }
.header .session_state > .actif, .header-fixe .session_state > .actif {
    color: var(--orange);
    background-color: var(--noirPale);
    box-shadow: 0.5px 0 0.5px 0 var(--noirMedium); }
.header .session_state > .actif .deja-connecte, .header-fixe .session_state > .actif .deja-connecte {
    background-image: url("/img/fleches/fleche-haut-trans.png"); }
@media screen and (max-width: 767px) {
    .header .session_state > .actif .deja-connecte, .header-fixe .session_state > .actif .deja-connecte {
        background-image: none; } }
.header .session_state > .actif img.user-actif, .header-fixe .session_state > .actif img.user-actif {
    opacity: 1; }
@media screen and (max-width: 767px) {
    .header .session_state > .actif div.fleche-mobile, .header-fixe .session_state > .actif div.fleche-mobile {
        background-image: url("/img/fleches/fleche-haut-blanc.png"); } }
.header .session_state .state, .header-fixe .session_state .state {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: var(--hauteur_header);
    background-color: var(--noirPale);
    padding: 30px; }
@media screen and (max-width: 767px) {
    .header .session_state .state, .header-fixe .session_state .state {
        margin-top: var(--hauteur-header-mobile);
        padding: 20px var(--width_global_1); } }
.header .session_state .state-bottom-logged, .header-fixe .session_state .state-bottom-logged {
    padding: 12px 0; }
@media screen and (max-width: 767px) {
    .header .session_state .state-bottom-logged, .header-fixe .session_state .state-bottom-logged {
        width: 54%; } }
.header .session_state .login-prod, .header-fixe .session_state .login-prod {
    background-color: var(--noirFonce);
    width: var(--width-state-bottom);
    position: absolute;
    top: 0;
    right: 0;
    margin-top: calc(var(--hauteur_header) + 234px);
    padding: 16px 30px; }
@media screen and (max-width: 767px) {
    .header .session_state .login-prod, .header-fixe .session_state .login-prod {
        width: 100%;
        padding: 20px var(--width_global_1);
        margin-top: 0;
        position: static; } }
.header .session_state .login-prod a, .header-fixe .session_state .login-prod a {
    font-size: .7em; }

.header .login-form, .header-fixe .login-form {
    font-size: .9em;
    width: var(--width-state-bottom); }
@media screen and (max-width: 767px) {
    .header .login-form, .header-fixe .login-form {
        width: 100%;
        position: static !important; } }
.header .login-form p, .header-fixe .login-form p {
    margin-bottom: 12px; }
@media screen and (max-width: 767px) {
    .header .login-form p, .header-fixe .login-form p {
        margin-bottom: 20px;
        font-size: 1em; } }
.header .login-form input, .header-fixe .login-form input {
    margin-bottom: 16px;
    height: var(--height-elem-state-bottom);
    width: 100%;
    border: 0;
    background-color: var(--beige);
    color: var(--grisMedium);
    font-weight: normal;
    font-size: 1em; }
@media screen and (max-width: 767px) {
    .header .login-form input, .header-fixe .login-form input {
        height: 48px;
        margin-bottom: 12px;
        font-size: 1em; } }

.header .oubli, .header-fixe .oubli {
    font-size: .8em;
    line-height: 1.4em;
    padding-right: 6px; }
@media screen and (max-width: 767px) {
    .header .oubli, .header-fixe .oubli {
        padding: 0 8px 0 0; } }

.header .login-prod:hover a, .header .oubli:hover, .header-fixe .login-prod:hover a, .header-fixe .oubli:hover {
    color: var(--orangeFonce); }

@media screen and (max-width: 767px) {
    .header .left, .header-fixe .left {
        margin-right: -1px; } }

.header .left .presentation, .header-fixe .left .presentation {
    width: 100%;
    line-height: var(--hauteur_header); }
@media screen and (max-width: 767px) {
    .header .left .presentation, .header-fixe .left .presentation {
        position: static;
        line-height: 1.2em; } }

@media screen and (max-width: 767px) {
    .header .right-mob, .header-fixe .right-mob {
        width: 100%;
        padding-right: 112px; } }

.header .right, .header-fixe .right {
    background-color: var(--noirPale); }
.header .right div, .header-fixe .right div {
    display: inline-block;
    opacity: .4; }
.header .right img, .header-fixe .right img {
    height: 13px;
    vertical-align: middle;
    margin: 26px 5px; }
@media screen and (max-width: 1100px) {
    .header .right img, .header-fixe .right img {
        margin: 27px 2px;
        height: 11px; } }
@media screen and (max-width: 767px) {
    .header .right img, .header-fixe .right img {
        height: 18px;
        margin: 18px 12px; } }
@media screen and (max-width: 400px) {
    .header .right img, .header-fixe .right img {
        height: 14px;
        margin: 20px 6px; } }
.header .right div:hover, .header-fixe .right div:hover {
    opacity: 1; }

.header button.connexion, .header-fixe button.connexion {
    height: 100%;
    width: 100%;
    background-color: inherit; }

.header .fermer, .header-fixe .fermer {
    display: none;
    background-color: var(--noirMedium);
    width: var(--hauteur-header-mobile);
    height: var(--hauteur-header-mobile);
    position: absolute;
    top: 0;
    right: 112px;
    z-index: 400; }
@media screen and (max-width: 767px) {
    .header .fermer, .header-fixe .fermer {
        display: block; } }

.fermer-menu img.icone-x {
    margin: 18px;
    height: 20px; }

.fermer-menu img.icone-o {
    display: none; }

@media screen and (max-width: 767px) {
    .fermer-menu .right, .fermer-menu .state-top, .fermer-menu .icone-recherche {
        -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3); } }

@media screen and (max-width: 767px) {
    .ouvrir-menu {
        max-height: 56px; }
    .ouvrir-menu .logo-real {
        -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3); }
    .ouvrir-menu img.icone-o {
        height: 10px;
        margin: 23px 16px; }
    .ouvrir-menu img.icone-x, .ouvrir-menu #hamburgerMenu, .ouvrir-menu .right-mob {
        display: none; } }