/* --------- FOCUS ----------- */
header nav {
    margin-bottom: 0;
}
header .op-link a {
    background-color: #FF0052; /* pink */
}
/* ne pas supprimer valable pour toute les OP */
#focus .container-fluid {
    padding: 0;
}
#focus .container-fluid .banner {
    width: 100%;
    height: 500px;
    overflow-x: hidden;
}
#focus .ui-group {
    margin: 20px 0;
}
#focus .ui-group .button-group {
    text-align: center; /* centrage group btn*/
}
#focus .ui-group .button-group button {
    border: none;
}
#focus .merchants__item {
    width: 17.5%; /* permet de definir la taille des vignettes */
    margin: 1.25%; /* permet de definir la taille des goutieres */
}
#focus button {
    position: relative;
    border-radius: 8px;
    padding: 10px 15px;
    margin: 4px;
    font-family: 'Myriad Pro', arial, sans-serif;
    font-size: 16px;
    cursor: pointer;
}
#focus button:first-child {
    padding: 13px 15px;
    border-radius: 100%;
}

#focus .is-checked::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -7px;
    border-style: solid;
    border-width: 7px 7px 0 7px;
}
/*------- Cashback + increase ----------*/
#focus .tagcash {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 1.50rem;
    font-weight: 700;
}
/*------- MEDIAQUERIES ----------*/
@media screen and (max-width: 1920px) {
    #focus .container-fluid .banner {
        height: 350px;
    }
}
@media screen and (max-width: 1366px) {
    #focus .container-fluid .banner {
        height: 300px;
    }
}
@media screen and (max-width: 1199px) {
    #focus .container-fluid .banner {
        height: 250px;
    }
    #focus .merchants__item {
        width: 21.25%; /* permet de definir la taille des vignettes */
        margin: 1.25%; /* permet de definir la taille des goutieres */
    }
}
@media screen and (max-width: 992px) {
    #focus .container-fluid .banner {
        height: 200px;
    }
    #focus .merchants__item {
        width: 27.75%; /* permet de definir la taille des vignettes */
        margin: 1.65%; /* permet de definir la taille des goutieres */
    }
}
@media screen and (max-width: 767px) {
    #focus h1 {
        text-align: center;
        color: #D90656; /* rose */
    }
    #focus h2 {
        text-align: center;
        padding-bottom: 8px;
        color: #D90656; /* rose */
    }
    #focus .container-fluid .banner {
        background-image: none;
        height: 0;
    }
    #focus .ui-group {
        margin: 0 0 20px 0;
        display: flex;
        justify-content: center;
    }
    #focus button:first-child {
        display: block;
        margin: 0 auto 2%;
    }
    #focus button + button {
        width: 48%;
        margin: 0.7%;
        padding: 7px 5px;
    }
    #focus .merchants__item {
        width: 48%; /* permet de definir la taille des vignettes */
        margin: 1%; /* permet de definir la taille des goutieres */
    }
}
@media screen and (max-width: 600px) {
    #focus .merchants__item {
        width: 98%; /* permet de definir la taille des vignettes */
        margin: 1%; /* permet de definir la taille des goutieres */
    }
    #focus .bt__mobile{
        width: 100%;
    }
}
/* --------- NOEL ----------- */
.noel {
    background-color: #000;
    margin-bottom: -91px;
}
.noel .container-fluid .banner {
    background: url(../images/op/noel21.png) no-repeat center bottom;
    background-size: cover;
}
.noel button {
    color: #FF0694;
    background-color: #ffffff;
}
.noel button:first-child,
.noel button.is-checked,
.noel button:hover {
    color: #fff;
    background-color: #FF0694;
}
.noel .is-checked::after {
    border-color: #FF0694 transparent transparent transparent;
}
#focus.noel .merchants-list .cashback .tagcash {
    background-color: #ffffff;
    color: #ff0694;
}
.noel .merchants-list .cashback {
    background-color: #00CFCF;
}
.noel .merchants-list .cashback.up {
    background-color: #FF0694;
    
}
/* --------- SOLDES ETE ----------- */
.soldes {
    background-color: #FCB941; /* jaune */
}
.soldes .container-fluid .banner {
    background: url(../images/op/soldes-ete24.png) no-repeat center top #FCB941; /*jaune*/
    background-size: 100%;
}
.soldes button {
    color: #fff;
    background-color: #4DB8BA; /* bleu */
}
.soldes button:first-child,
.soldes button.is-checked,
.soldes button:hover {
    color: #fff;
    background-color: #D90656; /* rose */
}
.soldes .is-checked::after {
    border-color: #D90656 transparent transparent transparent; /* rose */
}
/*#focus.soldes .merchants-list .cashback .tagcash {
    background-color: #ffffff;
}*/
#focus.soldes .merchants-list .cashback .tagcash .glyphicons {
    color: #D90656; /* arrow up blanc */
}
.soldes .merchants-list .cashback {
    background-color: #00A8AD; /* bleu*/
}
.soldes .merchants-list .cashback.up {
    background-color: #D90656; /* rose */
}
.merchants-list .merchants__item .cashback{
    text-align: center;
}
.cashbackborder{
    border: #00A8AD solid 2px; /*bordure bleu*/
}
.cashbackupborder{
    border: #D90656 solid 2px; /*bordure rose*/
}
/* --------- SOLDES Hiver ----------- */
.soldes-hiver .container-fluid .banner {
    background: url(../images/op/soldes-hiver24.png) no-repeat center center,
                linear-gradient(to bottom, #64c8ff 0%, #1e6ee6 100%);
    background-size: auto 100%;
}
.soldes-hiver button {
    color: #fff;
    background-color: #ffc864; /* or */
}
.soldes-hiver button:first-child,
.soldes-hiver button.is-checked,
.soldes-hiver button:hover {
    background-color: #64c8ff; /* bleu clair */
}
.soldes-hiver .is-checked::after {
    border-color: #64c8ff transparent transparent transparent; /* bleu clair */
}
#focus.soldes-hiver .merchants-list .cashback .tagcash .glyphicons {
    color: #1e6ee6; /* bleu */
}
.soldes-hiver .merchants-list .cashback {
    background-color: #64c8ff; /* bleu clair */
}
.soldes-hiver .merchants-list .cashback.up {
    background-color: #1e6ee6; /* bleu */
}