@charset "utf-8";
/* ------------------------------CUSTOM------------------------------ */
/* Background Page */
body {
    background-color: #fff;
}

/* Polices */
body {
    font-family: "Inter", sans-serif;
}

/* Liens dans les pages */
a {
    color: #4f428e;
}

/* Texte Primaire */
.text-primary {
    color: #4f428e !important;
}

/* Texte Success */
.text-success {
    color: #10c591 !important;
}

/* Background Header */
#header {
    background: #fff !important;
}

/* Liens Header */
.nav-link {
    color: #000;
}

/* Background Hero */
#hero {
    background: url('../images/bg.webp') left bottom -100px scroll no-repeat;
    background-size: cover;
}

/* Background Hero Mobile */
@media (max-width: 991px) {
    #hero {
        background: url('../images/bg-mobile.webp') center top scroll no-repeat;
        background-size: cover;
    }
}

/* H1 Hero */
#hero h1 {
    color: #fff;
}

/* Bouton Hero , Bouton CTA Mobile, Bouton Contact */
#hero .btn-primary, #cta-mobile .btn-primary, #contact .btn-primary, #cookies .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4f428e;
    --bs-btn-hover-border-color: #4f428e;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-bg: #000;
    --bs-btn-disabled-border-color: #000;
}

/* Boutons primaires pour les pages internes */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4f428e;
    --bs-btn-border-color: #4f428e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4f428e;
    --bs-btn-active-border-color: #4f428e;
    --bs-btn-disabled-bg: #4f428e;
    --bs-btn-disabled-border-color: #4f428e;
}

/* Boutons primaires à contour pour les pages internes */
.btn-outline-primary {
    --bs-btn-color: #4f428e;
    --bs-btn-border-color: #4f428e;
    --bs-btn-hover-bg: #4f428e;
    --bs-btn-hover-border-color: #4f428e;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-bg: #4f428e;
    --bs-btn-active-border-color: #4f428e;
    --bs-btn-disabled-color: #4f428e;
    --bs-btn-disabled-border-color: #4f428e;
}

/* Background Warning */
.bg-warning {
    background-color: #fffaec !important;
}

/* Barre Réassurance */
#reassurance {
    background: #4f428e;
    color: #fff;
}

/* Meilleure Offre */
#offres .bg-best-deal {
    border: 4px solid rgb(16, 197, 145);
}

/* Prix Barré */
#offres h4 span {
    background: #fff;
    color: #000;
    border: 2px solid #dbc7f3;
}

#offres h4 span::before {
    border-top: 2px solid #dbc7f3;
}

/* Réponse Commentaire */
.review-response {
    background-color: #f9f9f9;
    border-left: 3px solid #4f428e;
}

/* Form Check */
.form-check-input:checked {
    background-color: #10c591;
    border-color: #10c591;
}

#accordion-payment .accordion-button:not(.collapsed)::after {
    background-color: #10c591;
    border-color: #10c591;
}

/* Background Pages Internes */
.title {
    background: url("../images/bg-title.webp") center top scroll no-repeat;
    background-size: cover;
}

/* H1 Page Interne */
.title h1 {
    color: #fff;
}

/* Cross On */
.cross-on {
    background: #edfffa;
    border: 2px dashed #10c591;
}

/* Cross Off */
.cross-off {
    background: white;
    border: 2px dashed #bfbfbf;
}

/* Déco title */
#offres h3::before, #offres h3::after {
    background: #4f428e;
}

/* Footer */
#footer {
    background: #f8f9fa;
    color: #212529
}

/* Liens Footer */
#footer a {
    color: #212529
}


/* ------------------------------CSS------------------------------ */
html {
    scroll-behavior: smooth;
}

.navbar-brand {
    max-width: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.nav-link {
    font-size: 1.15rem;
    padding: 1rem !important;
}

#offres .nav-link {
    font-size: .9rem;
    padding: .5rem 1rem !important;
}

section {
    padding: 40px 0;
    position: relative;
    overflow-x: hidden;
}

#reassurance {
    padding: 30px 0;
}

#hero {
    padding: 20px 0 0;
}

.btn-lg {
    --bs-btn-padding-y: 0.75rem;
}

#hero .btn-lg {
    --bs-btn-font-size: 1.75rem;
}

.ico {
    max-width: 80px;
}

#footer .logo {
    max-width: 150px;
}

.img-flag {
    width: 20px;
    height: 15px;
    margin-right: 10px;
    margin-top: -1px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: inherit !important;
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select2-container--default .select2-selection--single {
    background-color: inherit !important;
    border: inherit !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.select2-container {
    width: 100% !important;
    height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered span {
    float: left;
}

.link-ok.active i {
    color: #10c591 !important;
}

.link-ko.active i {
    color: #f16262 !important;
}

.last-sale {
    position: absolute;
    right: 0;
    background: #eee;
    padding: 5px 10px;
    font-size: .9rem;
    height: 53px !important;
    z-index: 1;
    width: 144px;
}

#offres .card {
    border-radius: 0;
}

#offres .bestoffer {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    margin-left: 0;
    background: #fffaec;
    border: 0;
    padding: 0 144px 0 0;
    border-radius: 0;
    color: #000 !important;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

#offres .tab-content .card.shadow .card-body {
    padding-top: 50px;
}

#offres h3::before {
    content: "";
    width: 30px;
    height: 2px;
    transform: translateY(-400%);
    display: inline-block;
    margin-right: 15px;
}

#offres h3::after {
    content: "";
    width: 30px;
    height: 2px;
    transform: translateY(-400%);
    display: inline-block;
    margin-left: 15px;
}

.pourquoi {
    cursor: pointer;
}

.pourquoi .card {
    display: none !important;
    position: absolute;
    z-index: 10;
    background: #fff !important;
    left: 10px;
    width: calc(100% - 20px);
}

.pourquoi:hover .card {
    display: block !important;
}

#offres .card-body.d-block {
    padding-top: 1.25rem !important;
}

#offres h4 span {
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 60%;
    top: -5px;
    font-weight: 600;
}

#offres h4 span::before {
    content: "";
    width: 95%;
    position: absolute;
    border-radius: 15px;
    bottom: 0.75rem;
    left: 0;
    transform: rotate(-20deg);
}

#offres ul {
    font-size: .9rem;
}

#offres .nav-tabs .nav-link.active {
    font-weight: bold;
}

.testimonials-text {
    font-size: 0.8rem;
}

#note {
    font-size: 3rem;
    font-weight: bold;
    position: relative;
    bottom: -10px;
}

#stars {
    font-size: 2rem;
    font-weight: bold;
}

#stars p {
    font-size: 1rem;
}

.review-card {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    border-radius: 5px;
    margin: auto;
}

.review-card p {
    font-size: .95rem;
}

.profile-pic {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.review-response {
    padding: 10px;
    margin-top: 15px;
}

.form-control, .form-select {
    padding: .5rem .75rem;
}

#accordion-payment .card-header {
    min-height: 66px;
    display: flex;
    padding: .5rem 0 !important;
}

#accordion-payment .accordion-button {
    color: #212529;
    background-color: transparent !important;
    box-shadow: inherit !important;
    padding: 0 0 0 14px !important;
    display: block;
}

#accordion-payment img {
    height: 23px;
}

/*#accordion-payment .accordion-button::after {*/
/*    content: "";*/
/*    height: 16px;*/
/*    width: 16px;*/
/*    border: 1px solid #bfbfbf;*/
/*    background: #fff;*/
/*    border-radius: 50%;*/
/*    left: 0;*/
/*    position: absolute;*/
/*    top: 4px;*/
/*}*/

/*#accordion-payment .accordion-button:not(.collapsed)::after {*/
/*    height: 16px;*/
/*    width: 16px;*/
/*    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");*/
/*    content: "";*/
/*    border-radius: 50%;*/
/*}*/

#accordion-payment .accordion-item {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.secure-payments {
    max-width: 250px;
    height: inherit !important;
}

#infos {
    z-index: 9999 !important;
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: 10px;
    position: absolute;
    font-weight: normal;
    font-size: 14px;
    width: 220px;
    right: 0;
}

.img-cvv {
    max-width: 60px;
    margin-right: 10px;
}

.title {
    padding: 20px 0;
}

.accordion-button:not(.collapsed) {
    color: #000 !important;
    background-color: #fff;
    box-shadow: inherit !important;
}

.img-mode-emploi {
    max-width: 250px;
    margin: 0 auto;
}

@media (min-width: 1200px) {
    #hero h1 {
        font-size: 3.75rem;
    }
}

@media (max-width: 991px) {
    .navbar-brand {
        max-width: 20px;
    }

    .big-flacon {
        max-width: 220px !important;
    }

    .ico {
        max-width: 40px;
    }

    section {
        padding: 25px 0;
    }

    .h5, h5 {
        font-size: 1.15rem;
    }

    #onglets-promo .nav-item {
        width: 50%;
        min-width: inherit;
        line-height: 1.2;
    }

    #offres .nav-link, #select-treatment-offer, #offres .bestoffer, #give-feedback {
        font-size: .8rem;
    }

    #note {
        font-size: 2rem;
    }

    #stars {
        font-size: 1.25rem;
    }

    #stars .mx-1 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    #reassurance {
        padding: 20px 0;
    }

    .img-mode-emploi {
        max-width: 200px;
    }

    .flacon-ingredients {
        max-width: 200px;
    }
}

.dropdown-toggle {
    text-decoration: none !important;
}

.form-select .dropdown-toggle::after {
    display: none !important;
}

.dropdown-menu {
    left: -0.75rem !important;
    top: 6px !important;
    width: 100%;
}

.rate {
    float: left;
    height: 46px;
    margin-bottom: 0;
}

.rate:not(:checked) > input {
    display: none;
}

.rate:not(:checked) > label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.rate > input:checked ~ label {
    color: #ffc107;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #ffc107;
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #ffc107;
}

label:not(.form-check-label) {
    font-weight: bold;
}

.required:not(.form-check-label):after {
    content: " *";
    color: red;
}

.offer {
    cursor: pointer;
}

.card-body ul:last-of-type li:first-child:nth-last-child(n+2) {
    border-top: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}