:root {
    --white: #ffffff;
    --navy: #263961; /* AL  */
    --ciel: #ebf6fc; /* AL  */
    --blue: #09b4f7; /* AL */
    --greyLight: #fafafa; /* AL */
    --cielLight: #e6f1fa; /*#eaf7ff*/
    --txtNight: #a7a9bb;
    --yellow: #ffd800; /* AL */
    --item-non-hover: #92969a;
    --navyRGB: 22, 27, 67; /* navy #161b43 */
    --radius: 100px;
    --radius-med1: 5px;
    --radius-med: 25px;
    --radius-max: 50px;
    --shadow1: rgba(0, 0, 0, 0.05) 0px 0px 16px; /*rgba(0, 0, 0, 0.1) 0px 10px 60px; */
    --shadow2: 0px 4px 10px 0px rgb(38 57 97 / 10%);
    --greyBlue: #dae1e7;

    --preheaderHeight: 30px;
}

.row {
    --bs-gutter-x: 0;
}

body,
html {
    padding: 0;
    margin: 0;
}
body {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.01em;
    /* font-optical-sizing: auto;*/
    color: var(--navy);
}
.f-FG {
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
address,
dl,
ol,
p,
ul {
    margin-bottom: 0;
}
ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}
p {
    color: var(--navy);
}
.atc:hover {
    cursor: pointer;
}
.LazyLoad {
    opacity: 0;
}
.cssTransOpacity {
    -ms-transform: opacity 0.3s linear 0s;
    -webkit-transition: opacity 0.3s linear 0s;
    -moz-transition: opacity 0.3s linear 0s;
    transition: opacity 0.3s linear 0s;
}
.cssTrans {
    -ms-transform: all 0.1s linear 0s;
    -webkit-transition: all 0.1s linear 0s;
    -moz-transition: all 0.1s linear 0s;
    transition: all 0.1s linear 0s;
}
.cssTrans2 {
    -ms-transform: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
.cssTrans3 {
    -ms-transform: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.cssTrans15 {
    -ms-transform: all 0.15s linear 0s;
    -webkit-transition: all 0.15s linear 0s;
    -moz-transition: all 0.15s linear 0s;
    transition: all 0.15s linear 0s;
}
img {
    max-width: 100%;
    height: auto;
}
.no-responsive {
    max-width: inherit;
    height: auto;
}
.d-flex {
    display: flex;
}
.d-block {
    display: block;
}
.txt-center {
    text-align: center;
}
.txt-right {
    text-align: right;
}
.m-center {
    margin: 0 auto;
}
.j-center {
    justify-content: center;
}
.j-right {
    justify-content: flex-end;
}
.j-between {
    justify-content: space-between;
}
.ai-center {
    align-items: center;
    align-content: center;
}
.sline:after {
    background-color: var(--ciel);
    width: 100%;
    content: '';
    display: block;
    height: 1px;
    transform: rotateY(90deg);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.sline:hover:after {
    transform: rotateY(0);
}

.bgGreyLight {
    background-color: var(--greyLight);
}
.bgBlue {
    background-color: var(--blue);
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.25em + 1.25rem + 14px);
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--navy);
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid var(--ciel);
    border-radius: var(--radius-max);
    box-shadow: 0 0 0 0 transparent;
    transition:
        border-color 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-height: 54px;
}
textarea.form-control {
    border-radius: 12px;
}
#quotation_file {
    font-size: 14px;
    padding: 10px;
    border: 2px solid var(--ciel);
    border-radius: 6px;
    background: var(--ciel);
    color: var(--navy);
    cursor: pointer;
}
#quotation_file:hover {
    border: 2px solid var(--blue);
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px #fff inset; /* couleur de fond souhaitée */
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: inherit; /* garde ta couleur texte */
}
/* Cas Chrome autofill */
.form-control:-webkit-autofill:focus {
    color: var(--navy);
    border: 2px solid var(--blue);
    box-shadow: 0 0 0 0.26rem rgba(59, 179, 254, 0.2) !important;
    -webkit-text-fill-color: var(--navy) !important;

    /* supprime le fond bleu */
    box-shadow:
        0 0 0 1000px #fff inset,
        0 0 0 0.26rem rgba(59, 179, 254, 0.2);
    -webkit-box-shadow:
        0 0 0 1000px #fff inset,
        0 0 0 0.26rem rgba(59, 179, 254, 0.2);
}

select.form-control {
    background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' style='fill:black;stroke:black;stroke-width:3'/></g></svg>")
        no-repeat;
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 13px;
    background-color: #fff;
}

.form-control:hover {
    border: 2px solid var(--blue);
}
.form-control:focus {
    color: var(--navy);
    outline: 0;
    border: 2px solid var(--blue);
    /* border: 2px solid rgb(var(--blue));*/
    box-shadow: 0 0 0 0.26rem rgba(59, 179, 254, 0.2);
    /* box-shadow: 0 0 0 0.2rem rgba(0,123,255,.1);  */
}

.select-custom {
    position: relative;
    display: inline-block;
    width: 100%;
}
.select-custom select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/*
.select-custom::after {
    content: "";
    position: absolute;
    top: 22px;
    right: -5px;
    font-size: 60%;
    width: 40px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' style='fill:black;stroke:black;stroke-width:3'/></g></svg>") no-repeat;
    color: var(--navy);
}
*/

.radio-item {
    display: inline-block;
    position: relative;
    padding: 0 6px;
    margin: 10px 0 0;
}
.custom-radio {
    position: relative;
}
.custom-radio input[type='radio'] {
    display: none !important;
}

.custom-radio:before {
    content: ' ';
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    border: 2px solid var(--ciel);
    background-color: transparent;
}
.custom-radio > span {
    position: absolute;
    left: 4px;
    top: 4px;
}
.custom-radio input[type='radio']:checked + span:after {
    border-radius: 11px;
    width: 12px;
    height: 12px;
    position: absolute;
    content: ' ';
    display: block;
    background: var(--blue);
}

.radio-inline {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy);
}
.radio-inline:hover {
    cursor: pointer;
}

.btn {
    display: inline-block;
    padding: 0.7em 1.5em;
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    /*will-change: transform;*/
    font-weight: 600;
    background-color: var(--navy);
    border-radius: var(--radius) !important;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
.btn-primary {
}
.btn:hover {
    background: var(--ciel);
    border-color: var(--ciel);
    cursor: pointer;
    transform: translateY(-1px);
    box-shadow:
        0 0 0 0 transparent,
        0 0.375rem 0.625rem -0.3125rem rgb(22 27 67 / 10%);
}
.btn:focus {
    cursor: pointer;
    transform: translateY(-1px);
    outline: 0;
    box-shadow:
        0 0 0 0.2rem rgb(59 179 254 / 40%),
        0 0.375rem 0.625rem -0.3125rem rgb(22 27 67 / 10%);
}

.btn.btn-secondary {
    color: #fff;
    background-color: var(--blue);
}

.btn-primary:disabled {
    background: #d1d6ee;
    border-color: #d1d6ee;
    cursor: not-allowed;
}
.h1,
h1 {
    font-size: 1.375rem;
    padding: 0;
    margin: 1rem;
    color: var(--navy);
    font-weight: 600;
}
hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid var(--greyBlue);
}
.form-group {
    margin-bottom: 0.5rem;
    width: 100%;
    margin: 0 auto;
}

.alert {
    padding: 0.75rem;
    width: 50%;
    display: flex;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 3rem;
    justify-content: center;
}

.alert-success,
.bg-success {
    background-color: #4cbb6c !important;
    color: #fff;
    border-radius: 4px;
}
.bg-warning {
    background-color: #ff9a52 !important;
    color: #fff;
}
.bg-danger {
    background-color: #ff4c4c !important;
    color: #fff;
}
.alert.alert-danger {
    background-color: #ff4c4c !important;
    color: #fff;
}

div[role='tooltip'] {
    background: #fff;
    font-size: 13px;
    padding: 0.75rem;
    border: 1px solid var(--navy);
    box-shadow:
        0 0 0 0 transparent,
        0 0.375rem 0.625rem -0.3125rem rgb(22 27 67 / 10%);
}
.hidden-xl-down,
.hidden-xs-up,
.hide {
    display: none !important;
}
.mobile #btnTop {
    display: none !important;
}
.scrollUp #btnTop {
    opacity: 0 !important;
}
#btnTop {
    position: fixed;
    bottom: 0;
    height: 52px;
    background: var(--blue);
    z-index: 10000;
    border-radius: 10px 10px 0 0;
    transition: right 250ms ease 0s;
    cursor: pointer;
    display: block;
    width: 60px;
    text-align: center;
    right: 80px;
    opacity: 1;
}
#btnTop > div {
    color: rgb(255, 255, 255);
    margin-top: 15px;
}
#btnTop svg {
    fill: rgb(255, 255, 255);
    width: 22px;
}

.btn-primary-cta a.btn,
.btn-primary-cta button.btn,
#payment-confirmation button.btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-width: 260px;
    min-height: 54px;
    justify-content: center;
    background: var(--navy);
    border: 2px solid var(--navy);
}

.btn-primary-cta a.btn[disabled],
.btn-primary-cta a.btn.disabled,
.btn-primary-cta button.btn[disabled],
.btn-primary-cta button.btn.disabled,
#payment-confirmation button.btn.disabled {
    opacity: 0.5;
}

.btn-secondary-cta a.btn,
.btn-secondary-cta button.btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-width: 260px;
    min-height: 44px;
    justify-content: center;
    background: #fff;
    color: var(--blue);
    border: 2px solid var(--ciel);
}
.btn-secondary-cta a.btn:hover,
.btn-secondary-cta button.btn:hover {
    color: #fff;
    background: var(--blue);
    border: 2px solid var(--blue);
    transform: translateY(0px);
}

.btn-primary-cta a.btn img,
.btn-primary-cta button.btn img,
#payment-confirmation button.btn img,
.btn-secondary-cta a.btn img,
.btn-secondary-cta button.btn img {
    height: 24px;
    position: relative;
    display: inline;
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
    opacity: 0;
    width: 0;
}
.btn-primary-cta a.btn:hover,
.btn-primary-cta button.btn:hover,
#payment-confirmation button.btn:hover,
.btn-secondary-cta a.btn:hover,
.btn-secondary-cta button.btn:hover {
    background: var(--blue);
    border: 2px solid var(--blue);
    transform: translateY(0px);
}
.btn-primary-cta a.btn:hover img,
.btn-primary-cta button.btn:hover img,
#payment-confirmation button.btn:hover img,
.btn-secondary-cta a.btn:hover img,
.btn-secondary-cta button.btn:hover img {
    webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px);
    opacity: 1;
    width: 24px;
}

.breadcrumb {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #f6f6f6;
    border-radius: 0;
    text-align: left;
}
.breadcrumb ol {
    display: flex;
    width: auto;
    display: inline-flex;
    justify-content: flex-start;
    background: var(--ciel);
    border-radius: 30px;
    padding: 4px 1rem;
    line-height: 20px;
}
#content-wrapper {
    z-index: 0;
}
#wrapper .breadcrumb {
    display: none;
    padding: 0;
    background: 0 0;

    margin: 2rem auto 0;
    font-size: 14px;
}
#wrapper .breadcrumb li,
.product-images > li.thumb-container {
    display: inline;
}

#wrapper .breadcrumb li > a,
#wrapper .breadcrumb li > span {
    color: var(--navy);
    text-decoration: none;
    font-size: 13px;
}
#wrapper .breadcrumb li a:hover {
    text-decoration: underline;
    color: var(--blue);
}

#wrapper .breadcrumb li:not(:first-child)::before {
    margin: 0 0.5rem;
    color: var(--blue);
    margin-right: 0.15rem;
    font-size: 16px;
    content: '~';
}

#main .page-header {
    text-align: center;
    position: relative;
    max-width: 90%;
    height: 60px;
    display: flex;
    margin: 1rem auto 0;
    justify-content: center;
    align-items: center;
}

#main .page-header h1 {
    text-align: center;
    font-size: 1.25rem;
    display: inline-block;
    position: relative;
    background: #fff;
    padding: 0 1rem;
    letter-spacing: -0.02rem;
    z-index: 1;
}
#main .page-header h1:after {
    margin: 0 0.5rem;
    color: var(--blue);
    font-size: 24px;
    line-height: 23px;
    content: '~';
}

.desktop-only {
    display: none;
}
.only-mobile {
}

.tooltip3 .tooltiptext {
    font-size: 13px;
    line-height: 18px;
    visibility: hidden;
    font-weight: 400;
    width: 132px;
    background-color: var(--navy);
    color: #fff;
    text-align: center;
    border-radius: 26px;
    padding: 10px 1px;
    text-shadow: 0px 0px rgb(0 0 0 /0.2);
    position: absolute;
    z-index: 1200;
    bottom: 115%;
    left: 50%;
    margin-left: -66px;
    opacity: 0;
    /* will-change: transform; */
    transition: all 0.3s;
}
.tooltip3:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.3);
    bottom: 125%;
}
.tooltiptext em {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.02em;
    opacity: 0.7;
    padding: 5px;
    display: block;
}
.tooltip3 .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--navy);
}

#module-opartdevis-createquotation .breadcrumb,
#module-opartdevis-simplequotation .breadcrumb {
    display: none !important;
}
.container.opartdevis h1 {
    font-size: 36px;
    font-weight: 700;
    position: relative;
}
.container.opartdevis h1::after {
    margin: 0 0.5rem;
    color: var(--blue);
    margin-right: 0.15rem;
    font-size: 34px;
    content: '~';
}
.container.opartdevis {
    max-width: 790px;
    text-align: center;
    margin-top: 0rem;
    margin-bottom: 5rem;
}

.container.opartdevis.pleaselog p {
    margin-bottom: 0.25rem;
}
.container.opartdevis.pleaselog > div:first-of-type {
    margin-bottom: 2rem;
}
.box-s {
    padding: 1rem 1rem;
    background: #fff;
    font-size: 0.875rem;
    color: #7a7a7a;
    border-radius: 12px;
    box-shadow: var(--shadow1);
    margin-bottom: 3rem;
    margin-top: 1rem;
}
.company,
.vat_number {
    display: none !important;
}
.form.row > *
/* ,
.page-customer-account form .row > *  */ {
    max-width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.box-s .row .col-sm-6:nth-of-type(2) .form-group.row,
.box-s .row .col-sm-6:nth-of-type(8) .form-group.row {
    padding-right: 0rem;
}
.box-s .row .col-sm-6:nth-of-type(3) .form-group.row,
.box-s .row .col-sm-6:nth-of-type(9) .form-group.row {
    padding-left: 0rem;
}

.form-control-comment {
    color: var(--navy);
    font-size: 13px;
    text-align: right;
    padding-right: 1rem;

    font-style: italic;
    opacity: 0.7;
}
.form .control-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy);
    text-align: left;
    display: block;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    padding-left: 1.25rem;
}

#module-opartdevis-listquotation .opartdevis table,
#module-opartdevis-listquotation .opartdevis thead,
#module-opartdevis-listquotation .opartdevis tbody,
#module-opartdevis-listquotation .opartdevis th,
#module-opartdevis-listquotation .opartdevis td,
#module-opartdevis-listquotation .opartdevis tr,
#module-opartdevis-createquotation #cart_summary table,
#module-opartdevis-createquotation #cart_summary thead,
#module-opartdevis-createquotation #cart_summary tbody,
#module-opartdevis-createquotation #cart_summary th,
#module-opartdevis-createquotation #cart_summary td,
#module-opartdevis-createquotation #cart_summary tr {
    display: block;
}

#module-opartdevis-listquotation .opartdevis thead,
#module-opartdevis-createquotation #cart_summary thead {
    display: none;
}
#module-opartdevis-createquotation #cart_summary tr {
    margin-bottom: 1rem;
    border: 1px solid var(--blue);
    padding: 10px;
    background: #fff;
}
#module-opartdevis-createquotation #cart_summary td {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 6px 10px;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}
#module-opartdevis-createquotation #cart_summary td:last-child {
    border-bottom: none;
}
#module-opartdevis-createquotation #cart_summary td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #333;
}

/*  --------------------------------------------------------------------------------  */
/* Mobile First */
/* Custom Mobile */
@media (min-width: 576px) {
    /* xs */

    #module-opartdevis-listquotation .opartdevis table,
    #module-opartdevis-createquotation #cart_summary table {
        display: table !important;
        width: 100%;
        border-collapse: collapse;
    }

    #module-opartdevis-listquotation .opartdevis thead,
    #module-opartdevis-createquotation #cart_summary thead {
        display: table-header-group !important;
    }

    #module-opartdevis-listquotation .opartdevis tbody,
    #module-opartdevis-createquotation #cart_summary tbody {
        display: table-row-group !important;
    }

    #module-opartdevis-listquotation .opartdevis tr,
    #module-opartdevis-createquotation #cart_summary tr {
        display: table-row !important;
        margin: 0 !important;
        border: none !important;
        padding: 0 !important;
        background: none !important;
    }

    #module-opartdevis-listquotation .opartdevis th,
    #module-opartdevis-createquotation #cart_summary th {
        display: table-cell !important;
        padding: 10px 12px !important;
        border: 1px solid var(--ciel) !important;
        vertical-align: middle !important;
    }

    #module-opartdevis-listquotation .opartdevis td,
    #module-opartdevis-createquotation #cart_summary td {
        display: table-cell !important;
        border: 1px solid var(--ciel) !important;
        padding: 10px 12px !important;
        vertical-align: middle !important;
    }
    /* Supprime l'effet "data-label" */
    #module-opartdevis-createquotation #cart_summary td::before {
        content: none !important;
    }
}
@media (min-width: 768px) {
    /* sm */
    .hidden-sm-down {
        display: block !important;
    }
    .hidden-md-up {
        display: none;
    }
}
/* Start Desktop */
@media (min-width: 992px) {
    /* lg */
    #wrapper {
        margin-top: 0px;
    }
    .only-desktop {
        display: block !important;
    }
    .only-mobile {
        display: none !important;
    }

    #search .breadcrumb {
        text-align: center;
    }
    #search #content-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }
}
@media (min-width: 1200px) {
    /* xl */
}
@media (min-width: 1400px) {
    /* xxl */
}

.ui-autocomplete.searchbar-autocomplete {
    z-index: 5000;
    position: absolute !important;
}
.ui-autocomplete.searchbar-autocomplete li {
    background: #fff;
}
.ui-autocomplete.searchbar-autocomplete li a,
.ui-autocomplete.searchbar-autocomplete li a.ui-state-focus {
    padding: 8px 15px;
    overflow: auto;
    border: none;
    background: none;
    margin: auto;
    line-height: 50px;
    border-radius: 0;
}

.ui-autocomplete.searchbar-autocomplete li a .autocomplete-thumbnail {
    float: left;
    width: 50px;
    height: auto;
    margin-right: 8px;
}
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    line-height: 1.5;
}

/* rajout d'un padding sur le menu mobile pour forcer scrollbar */
.menuMobileIsOpen #target_mobile ul#top-menu {
    padding-bottom: 60px;
}


/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║                    MENU / NAVIGATION – Mobile First                        ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */

/* ── Header Nav : SMP (panier, fond bleu) ── */
.header-nav #smp {
    position: relative;
    z-index: 2;
}
.header-nav #smp::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 100vw;
    background: #e9f4fc;
    z-index: -1;
}
.header-nav #smp #panier {
    position: relative;
    background: #e9f4fc;
    height: 110px;
    display: flex;
}
.header-nav #smp #panier a {
    padding-top: var(--preheaderHeight);
}
.header-nav #smp #panier::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -33px;
    width: 34px;
    background: #e9f4fc;
    clip-path: polygon(100% 100%, 0% 100%, 100% 0);
    z-index: -1;
}

/* ── Pre-header (bandeau promo) ── */
.warper-displayBanner {
    background: var(--navy) !important;
    color: #ffffff;
    z-index: 10000 !important;
    height: 30px;
    display: flex;
    align-items: center;
    visibility: initial;
    opacity: 1;
}
.menuMobileIsOpen .warper-displayBanner {
    opacity: 0;
}
.menuMobileIsOpen #sag_b_cocarde {
    display: none;
}

/* ── Base mobile ── */
.header-nav .div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.mobile-only {
    display: block;
}
.desktop-only {
    display: none;
}
#miniMenuCont,
#search,
#monCompte {
    display: none;
}
.mobile #search,
.mobile #monCompte {
    display: block;
}
.menuMobileIsOpen {
    height: 100%;
    overflow: hidden;
    position: fixed;
}
.header-top {
    border-bottom: none;
    height: 0px;
}
.header-top .container {
    left: -85%;
    background: #fff;
    position: fixed;
    width: 85%;
    height: 100vh;
    top: 0;
    z-index: 9999;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    border: 0;
    padding: 0;
    box-shadow: -2px -1px 20px 0 rgb(0 0 0 / 15%);
}
.menuMobileIsOpen .header-top .container {
    left: 0;
}
.bgMenu {
    background: rgba(0, 0, 0, 0.65);
    visibility: hidden;
    opacity: 0;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    left: 0;
}
.menuMobileIsOpen .bgMenu {
    visibility: visible;
    opacity: 1;
}

/* ── Header nav row ── */
.header-nav .row {
    position: relative;
    -ms-transform: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
.mobile.scrollDown .header-nav .row {
}
.mobile .header-nav {
    border-bottom: 1px solid var(--ciel);
}
.mobile.scrollDown .header-nav {
    box-shadow: rgba(0, 0, 0, 0.08) 0px 3px 20px;
}
.mobile.scrollDown .header-nav #smp #panier {
    height: 100px;
}
.header-nav {
    background: #fff;
}
.mobile #logo {
    padding-top: var(--preheaderHeight);
    text-align: center;
}

/* ── Menu header mobile ── */
#menu_header {
    background: #fff;
    color: #fff;
    min-height: 114px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.shearch_mobile {
    display: block;
    width: 34px;
    height: 34px;
    margin: 1.25rem;
}
.mobile-only.devis {
    background: var(--blue);
}
.mobile-only.devis a {
    display: flex;
    align-items: center;
    text-align: center;
    color: #fff;
    text-decoration: none;
    height: 70px;
    font-size: 20px;
    margin: 0 0 0rem 2rem;
}
.mobile-only.devis a span {
    margin-right: 0.5rem;
    width: 30px;
    height: 30px;
}
.mobile-only.devis a strong {
    margin-left: 8px;
}
#miniMenuCont {
    position: absolute;
    left: 1.5%;
    top: 12px;
}
#miniMenuCont svg {
    fill: #fff;
    width: 40px;
    height: 40px;
    opacity: 0.8;
    border-radius: 50px;
}
#miniMenuCont:hover svg {
    opacity: 1;
    background: rgb(255 255 255 / 7%);
}

/* ── SMP, Logo, Burger ── */
#smp {
    justify-content: flex-end;
}
#logo {
    z-index: 4;
}
#logo a {
    display: flex;
    line-height: 13px;
    text-decoration: none;
    flex-direction: column-reverse;
    align-items: center;
    max-width: 330px;
}
#logo div {
    vertical-align: middle;
    display: inline-block;
}
#logo img {
    width: 190px;
}
#logo span {
    background: var(--ciel);
    padding: 0 0.5rem;
    border-radius: var(--radius-max);
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
}
#openMenu {
    width: 60px;
    height: 60px;
    display: flex;
    left: 20px;
    border-radius: 60px;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-top: var(--preheaderHeight);
}
.burger_ico {
    position: relative;
    display: inline-block;
    color: #fff;
}
.burger_ico span {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 0;
    transition: width 0.15s;
    border-top: 3px solid;
    background-color: #fff;
}
.burger_ico span.second {
    top: 8px;
    width: 80%;
    left: 0;
}
.burger_ico span.third {
    top: 16px;
    width: 100%;
}

/* ── Mon Compte, Search ── */
#monCompte a {
    text-decoration: none;
    border-radius: 70px;
    justify-content: center;
}
#smp #monCompte a:hover {
    background: rgb(255 255 255 / 12%);
}
#smp #search img {
    width: 24px;
}
#smp #search a {
    border-radius: 70px;
    height: 52px;
    width: 52px;
}
#smp #search a:hover {
    background: rgb(255 255 255 / 7%);
}
.mobile-only #monCompte {
    margin-left: 1.5rem;
}
.mobile-only #monCompte a {
    background: none;
    border: 3px solid var(--ciel);
    border-radius: 12px;
    padding: 0.5rem 1.5rem 0.5rem 0.25rem;
}
.mobile-only #monCompte div:last-child {
    margin-left: 0.75rem;
    line-height: 19px;
}
.mobile-only #monCompte a > div > div {
    flex-direction: column;
    display: flex;
    justify-content: center;
}
.mobile-only #monCompte div:last-child span:first-child {
    font-size: 14px;
    color: var(--navy);
}
.mobile-only #monCompte div:last-child span:last-child {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
}
.mobile-only #search {
    margin-top: 1.35rem;
    margin-right: 1rem;
}
.mobile-only #search a {
    padding: 1rem;
}
.mobile-only #search img {
    width: 28px;
}

/* ── Display Banner (bandeau) ── */
.displayBanner .ecomfr {
    display: none;
    align-items: center;
    gap: 4px;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 12px;
}
.displayBanner .ecomfr:hover {
    cursor: default;
}
.displayBanner .ecomfr span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.displayBanner .ecomfr span:nth-child(1) {
    background-color: #4bc8f9;
}
.displayBanner .ecomfr span:nth-child(2) {
    background-color: #ffffff;
    border: 1px solid #ddd;
}
.displayBanner .ecomfr span:nth-child(3) {
    background-color: #d10a12;
    margin-right: 0.25rem;
}
.displayBanner .ecomfr span.label {
    width: auto;
    height: auto;
    color: #ebf0fa;
    white-space: nowrap;
}
.displayBanner .shippingInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    font-size: 13px;
}
.displayBanner .shippingInfo > div > div {
    display: flex;
    align-items: center;
}
.displayBanner .shippingInfo strong {
    font-weight: 400;
}
.displayBanner .shippingInfo .ico_shipping {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path fill="%23fff" d="m31.788 16.026-1.881-2.422.003-.001-3.025-6.017c-.172-.34-.521-.555-.901-.555h-4.303V6.022c0-.557-.451-1.008-1.009-1.008H3.865c-.557 0-1.008.451-1.008 1.008S3.308 7.03 3.865 7.03h15.799v7.058c0 .558.451 1.01 1.008 1.01h7.843l1.469 1.891v5.202h-1.915c-.438-1.752-2.014-3.059-3.9-3.059s-3.462 1.307-3.9 3.059h-5.98c-.438-1.752-2.014-3.059-3.9-3.059s-3.462 1.307-3.9 3.059H3.865c-.557 0-1.008.451-1.008 1.008s.451 1.008 1.008 1.008h2.642c.462 1.718 2.018 2.992 3.88 2.992s3.417-1.273 3.879-2.99h6.023c.463 1.717 2.018 2.99 3.879 2.99 1.862 0 3.418-1.274 3.88-2.992h2.944c.557 0 1.008-.451 1.008-1.008v-6.556c0-.222-.074-.441-.212-.617M21.681 9.048h3.681l2.028 4.033h-5.709zM10.387 25.184c-1.112 0-2.018-.906-2.018-2.018s.905-2.018 2.018-2.018c1.111 0 2.017.906 2.017 2.018s-.905 2.018-2.017 2.018m13.781 0c-1.112 0-2.017-.906-2.017-2.018s.904-2.018 2.017-2.018 2.018.906 2.018 2.018-.906 2.018-2.018 2.018"/><path fill="%23fff" d="M8.303 18.09c0-.558-.451-1.009-1.009-1.009H2.655c-.557 0-1.009.451-1.009 1.009 0 .557.452 1.01 1.009 1.01h4.639c.558 0 1.009-.454 1.009-1.01M10.622 14.123c0-.557-.452-1.009-1.009-1.009H1.008c-.557 0-1.008.452-1.008 1.009 0 .558.451 1.009 1.008 1.009h8.605c.557 0 1.009-.451 1.009-1.009M2.655 11.165h8.605c.557 0 1.009-.451 1.009-1.008s-.452-1.009-1.009-1.009H2.655c-.557 0-1.009.452-1.009 1.009s.453 1.008 1.009 1.008"/></svg>');
}
.displayBanner .shippingInfo .franco {
    background: var(--ciel);
    color: var(--navy);
    padding: 1px 5px 0 6px;
    border-radius: 4px;
    margin: 0 6px;
    font-weight: 500;
}
.displayBanner .devis {
    display: none;
    justify-content: flex-end;
    font-weight: 300;
    font-size: 13px;
}
.displayBanner .devis a {
    text-decoration: none;
    display: flex;
    align-items: center;
    position: relative;
    background: var(--blue);
    white-space: nowrap;
    height: 30px;
    font-size: 11px;
    padding: 0 1.5rem 0 1.5rem;
    margin-right: -15px;
}
.displayBanner .devis strong {
    font-weight: 400;
    margin-left: 4px;
}
.ico_devis {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path fill="%23fff" d="M2.134 25.601c2.225-2.224 5.842-2.224 8.065 0h.001c3.205 3.205 8.394 3.206 11.601.001 0-.001 0-.001.001-.001 2.224-2.224 5.841-2.224 8.064 0 .488.488 1.28.488 1.769 0 .487-.488.487-1.279 0-1.768-2.558-2.558-6.396-3.069-9.468-1.538V6.665c0-.667.542-1.209 1.208-1.209.667 0 1.209.543 1.209 1.209 0 .69.56 1.25 1.25 1.25s1.25-.56 1.25-1.25c0-2.045-1.664-3.709-3.709-3.709-2.044 0-3.708 1.664-3.708 3.709v3.666h-7.333V6.665c0-.667.542-1.209 1.208-1.209s1.208.543 1.208 1.209c0 .69.561 1.25 1.25 1.25.69 0 1.25-.56 1.25-1.25 0-2.045-1.663-3.709-3.708-3.709S9.834 4.62 9.834 6.665v15.63c-3.071-1.531-6.91-1.02-9.468 1.538-.488.488-.488 1.279 0 1.768s1.28.488 1.768 0m10.2-1.434v-3.961h7.333v3.961c-2.083 1.755-5.187 1.809-7.333 0m7.333-11.336v4.875h-7.333v-4.875z"/></svg>');
}

/* ── Panier ── */
#smp #panier a {
    text-decoration: none;
    padding: 0;
}
#smp #panier div:first-child {
    background: #fff;
    text-align: center;
    border-radius: 210px;
    height: 60px;
    width: 60px;
    min-width: 60px;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    position: relative;
}
@property --p {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}
#smp #panier div:first-child::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    z-index: 1;
    background: conic-gradient(var(--blue) calc(var(--p) * 1%), transparent 0);
    transform: rotate(0deg);
    --p: 0;
    opacity: 0;
    transition:
        --p 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.15s linear;
}
#smp #panier div:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: white;
    z-index: 2;
}
#smp #panier a:hover div:first-child::before {
    --p: 100;
    opacity: 1;
}
#smp #panier img {
    width: 38px;
    z-index: 3;
}
#smp #panier div:first-child span {
    background: var(--blue);
    color: #fff;
    display: inline-block;
    position: absolute;
    border-radius: 30px;
    width: 15px;
    height: 15px;
    font-weight: 400;
    font-size: 10px;
    right: 8px;
    top: 17px;
    z-index: 3;
}
#smp #panier div:last-child {
    margin-left: 0.5rem;
    flex-direction: column;
    line-height: 18px;
}
#smp #panier div:last-child span:first-child {
    white-space: nowrap;
}
#smp #panier div:last-child div span:first-child {
    font-weight: 300;
}
#smp #panier div:last-child span:last-child {
    font-size: 13px;
}

/* ── Mini Menu ── */
#miniMenu {
    margin: 2rem;
    background: var(--cielLight);
    padding: 1.5rem 2rem 1rem;
    border-radius: 20px;
}
#miniMenu span {
    color: var(--navy);
    display: flex;
    font-size: 13px;
    height: 27px;
    align-items: center;
    flex-wrap: wrap;
}
#miniMenu span img {
    width: 14px;
    height: 14px;
    margin-right: 0.35rem;
    filter: invert(100%) brightness(0%);
}

/* ── Menu mobile : categories ── */
.mobile #target_mobile {
    background: #fff;
}
.mobile .header-top .menu_g {
    margin-top: 0;
}
.mobile .header-top .top-menu[data-depth='0'] .sline:after {
    display: none;
}
.mobile .header-top .top-menu[data-depth='0'] {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
}
.header-top .top-menu[data-depth='0'] a {
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}
.mobile .header-top .top-menu[data-depth='0'] a {
    text-decoration: none;
    color: var(--navy);
    width: 100%;
    line-height: 74px;
    height: 70px;
    padding-left: 2rem;
    position: relative;
    background: #fff;
    z-index: 1;
}
.mobile .header-top .top-menu[data-depth='0'] span svg {
    color: var(--blue);
}
.mobile .header-top .top-menu[data-depth='0'] a span.rw {
    position: absolute;
    right: 20px;
}
.mobile .header-top .top-menu[data-depth='0'] .category {
    color: var(--navy);
    font-size: 20px;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    position: relative;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--ciel);
}
.mobile .header-top .top-menu[data-depth='0'] .category img {
    margin: 0 0 0 0.25em;
}
.mobile .header-top .top-menu[data-depth='0'] .sub-menu {
    display: block;
    position: relative;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    max-height: 0;
    background: #fff;
    -webkit-transition: max-height 0.4s;
    -moz-transition: max-height 0.4s;
    transition: max-height 0.4s;
}
.mobile .header-top .top-menu[data-depth='0'] .sub-menu-open .sub-menu {
    max-height: 30rem;
}
.mobile .header-top .top-menu[data-depth='0'] .sub-menu-open span svg {
    transform: rotate(90deg);
}

/* ── Menu mobile : sous-menu niveau 1 ── */
.mobile .header-top .top-menu[data-depth='1'] {
    margin: 0rem 3rem 2rem;
}
.mobile .header-top .top-menu[data-depth='1'] .category {
    display: flex;
    width: auto;
    margin-bottom: 10px;
    border-bottom: 0;
}
.header-top .top-menu[data-depth='1'] .category a {
    color: var(--navy);
    font-size: 16px;
    font-weight: 400;
}
.mobile .header-top .top-menu[data-depth='1'] .category a {
    color: var(--navy);
    display: block;
    font-size: 15px;
    height: auto;
    line-height: normal;
    padding: 0.25rem 0.75rem;
}
.header-top .top-menu[data-depth='2'] {
    margin-left: 0.05rem;
    flex-direction: column;
    align-items: flex-start;
}
.mobile .header-top .top-menu[data-depth='1'] .category a.has_child,
.header-top .top-menu[data-depth='1'] #category-72,
.header-top .top-menu[data-depth='1'] #category-76,
.header-top .top-menu[data-depth='1'] #category-77 {
    margin-bottom: 0.75rem;
}

/* ── Menu mobile : mini menu ── */
.mobile #miniMenu {
    background: #fff;
    padding: 2rem;
    margin: 0;
    border-radius: 0;
    padding-bottom: 5rem;
}
.mobile #miniMenu > div {
    background: var(--cielLight);
    padding: 1.5rem 2rem 1rem;
    border-radius: 20px;
}
.mobile #miniMenu span {
    font-size: 14px;
    height: 34px;
}
.mobile #miniMenu span img {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
}

/* ── Bouton fermer menu mobile ── */
.bgMenu #m_close {
    position: fixed;
    right: 2%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 3001;
}
.bgMenu #m_close div {
    z-index: 3002;
    width: 100%;
    min-width: 40px;
    background: var(--blue);
    height: 100%;
    color: #fff;
    filter: brightness(100%);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    font-size: 20px;
}

/* ── Search widget ── */
#search_widget form {
    position: relative;
}
#search_widget input::placeholder {
    color: var(--navy);
    font-size: 14px;
    font-style: italic;
    opacity: 1;
}
#search_widget form button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ciel) !important;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
#search_widget form button img {
    width: 18px;
    height: 18px;
}
#search_widget .ui-helper-hidden-accessible {
    display: none;
}
#search .page-content.page-not-found {
    text-align: center;
}

/* ── #header (global) ── */
.header-top .top-menu[data-depth='1'] .category a.has_child,
.header-top .top-menu[data-depth='1'] #category-72 a,
.header-top .top-menu[data-depth='1'] #category-76 a,
.header-top .top-menu[data-depth='1'] #category-77 a {
    background: none;
    color: var(--navy);
    font-weight: bold;
}
.header-top .top-menu[data-depth='1'] .category a.has_child:hover,
.header-top .top-menu[data-depth='1'] #category-72 a:hover,
.header-top .top-menu[data-depth='1'] #category-76 a:hover,
.header-top .top-menu[data-depth='1'] #category-77 a:hover {
    background: none;
    box-shadow: none;
    color: var(--blue);
}
#header {
    height: 110px;
    top: 0px;
    position: relative;
}
#header > div {
    top: 0px;
    width: 100%;
    z-index: 2;
    position: fixed;
    margin-top: 0;
}
#header > div:last-child {
    background: #fff;
}
.mobile.scrollDown #header > div {
    margin-top: calc(-1 * var(--preheaderHeight));
}
.mobile.scrollUp #header > div {
    top: 0px;
}

/* ── Mini-list mobile ── */
.mobile .mini-list {
    background: #fff;
    padding-bottom: 4rem;
}
.mobile .mini-list span {
    padding: 2rem;
    width: 100%;
}
.mobile .mini-list img {
    width: 30px;
    margin-right: 0.75rem;
}

/* ── Dropdown menu (base) ── */
.dropdown-menu {
    display: none;
    opacity: 0;
    position: absolute;
    font-size: 0.9em;
    padding: 10px 20px;
    line-height: 1.1em;
    border: 4px solid #fff;
    background-color: #fff;
    border-radius: 13px;
    margin-top: 12px;
    -ms-transform: 0.1s linear 0s;
    -webkit-transition: 0.1s linear 0s;
    -moz-transition: 0.1s linear 0s;
    transition: 0.1s linear 0s;
    z-index: 1000;
}
.dropdownOn {
    opacity: 1;
    margin-top: -7px;
}

/* ── img-menu, popover, depth-1 (global) ── */
.header-top .top-menu .img-menu {
    display: none;
}
.mobile .header-top .top-menu[data-depth='0'] .sub-menu {
    border: 0;
}
.mobile .popover {
    max-width: inherit !important;
}
.mobile .header-top .top-menu[data-depth='1'] li a svg {
    display: none;
}
.mobile .header-top .top-menu[data-depth='1'] > .category {
    margin-bottom: 30px;
}
.header-top .top-menu[data-depth='1'] > .category > a {
    font-weight: bold !important;
    padding-right: 0 !important;
    margin: 0;
    padding: 0 !important;
    white-space: nowrap !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║              MENU / NAVIGATION – Desktop (>= 992px)                       ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */
@media (min-width: 992px) {

    .header-nav #smp #panier {
        height: 120px;
    }

    .displayBanner .ecomfr,
    .displayBanner .devis {
        display: flex;
    }
    #smp #panier div:first-child span {
        right: 10px;
    }

    #search_widget {
        padding-top: 29px;
        width: 90%;
        margin-left: 0%;
    }
    .scrollDown #search_widget {
        padding-top: 0;
    }

    #serviceClient,
    #monCompte {
        padding-top: 30px;
    }
    .scrollDown #serviceClient,
    .scrollDown #monCompte {
        padding-top: 0;
    }
    #serviceClient {
        margin: 0;
        margin-right: 1rem;
    }
    #monCompte {
        margin: 0 3rem 0 0.5rem;
    }
    #serviceClient a,
    #monCompte a {
        text-decoration: none;
    }
    #serviceClient a > div,
    #monCompte a > div {
        align-items: center;
    }
    #serviceClient a > div img,
    #monCompte a > div img {
        width: 38px;
        height: auto;
    }
    #serviceClient a > div > div,
    #monCompte a > div > div {
        flex-direction: column;
        margin-left: 8px;
        white-space: nowrap;
    }
    #serviceClient a > div > div > span:first-child,
    #monCompte a > div > div > span:first-child {
        font-size: 12px;
    }
    #serviceClient a > div > div > span:last-child,
    #monCompte a > div > div > span:last-child {
        font-size: 14px;
        font-weight: bold;
    }

    /* ── Effet hover liens ── */
    .effHov {
        position: relative;
    }
    .effHov::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--blue);
        border-radius: 50px;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.25s ease-out;
    }
    .effHov:hover::after {
        transform: scaleX(1);
    }
    .displayBanner .devis .effHov::after {
        content: '';
        position: absolute;
        bottom: 3px;
        width: 90%;
        height: 1px;
        background: #fff;
        border-radius: 50px;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        transition: transform 0.25s ease-out;
    }
    .displayBanner .devis .effHov:hover::after {
        transform: translateX(-50%) scaleX(1);
    }

    /* ── Logo desktop ── */
    #logo a {
        display: inline-block;
        flex-direction: row;
    }

    /* ── Header desktop ── */
    #header {
        top: 0px;
        width: 100%;
        background: #fff;
        height: 170px;
    }
    #header > div {
        position: fixed;
        width: 100%;
        background: #fff;
        z-index: 5000;
    }
    .header-nav {
        height: 120px;
        display: flex;
        align-items: center;
        -webkit-transition: all 0.1s linear 0s;
        transition: all 0.1s linear 0s;
        border-bottom: 1px solid var(--ciel);
    }
    #header > div.header-top {
        z-index: 4900;
        top: 120px;
        height: 50px;
        -webkit-transition: all 0.1s linear 0s;
        transition: all 0.1s linear 0s;
        border-bottom: 1px solid var(--ciel);
    }

    /* scrollDown */
    .scrollDown .header-nav {
        height: 70px;
    }
    .scrollDown .warper-displayBanner {
        top: -30px !important;
    }
    .scrollDown .header-nav #smp #panier {
        margin-top: -50px !important;
    }
    .scrollDown .header-nav #smp #panier a {
        padding-top: 50px !important;
    }
    .scrollDown #header > div.header-top {
        top: 70px;
        height: 44px;
        border-bottom: 1px solid #fff;
    }
    .littleHeader #header > div.header-top {
        box-shadow: rgba(0, 0, 0, 0.08) 0px 3px 20px;
    }

    #logo img {
        -webkit-transition: all 0.1s linear 0s;
        transition: all 0.1s linear 0s;
    }
    .scrollDown #logo img:first-child {
        width: 58px;
        height: 102px;
    }
    .scrollDown #logo img:last-child {
        width: 350px;
        height: 60px;
    }
    .scrollDown .header-nav .row {
        height: 70px;
    }

    .header-nav > .row {
        height: 140px;
        padding: 0;
    }
    .header-top {
        border-bottom: 1px solid rgb(22 27 67 / 9%);
        height: 80px;
    }
    #index .header-top {
        border-bottom: none;
    }
    #logo {
        position: initial;
    }
    #smp #panier a:hover {
        background: rgb(255 255 255 / 12%);
    }
    #smp #panier div:first-child {
        height: 62px;
        width: 62px;
    }
    #smp #panier a {
        border-radius: var(--radius-max);
    }
    #smp #search {
        order: 1;
    }
    #smp #monCompte {
        order: 2;
    }
    #smp #panier {
        order: 3;
    }
    #smp #panier div:last-child {
        display: flex;
    }

    .menuMobileIsOpen .bgMenu {
        visibility: hidden;
        opacity: 0;
    }
    .menuMobileIsOpen {
        height: initial;
        overflow: initial;
        position: initial;
    }

    .header-top .container {
        display: flex;
        align-items: center;
        justify-content: center;
        background: initial;
        position: initial;
        width: auto;
        height: 100%;
        top: 0;
        z-index: 9999;
        overflow: visible;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        border: 0;
        padding: 0;
        box-shadow: initial;
    }

    #miniMenuCont,
    #search,
    #monCompte {
        display: block;
    }
    #miniMenuCont {
        color: var(--navy);
    }
    .mobile-only {
        display: none !important;
    }
    .desktop-only {
        display: block;
    }

    .header-nav .dropdown-menu {
        right: -140px;
        top: 45px;
        width: 180px;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    }
    #miniMenu {
        margin: inherit;
        background: #fff;
        padding: 15px 18px 5px;
        border-radius: 8px;
    }
    .header-nav .dropdown-menu:before {
        left: 6px;
    }
    .dropdown-menu:before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        top: -12px;
        left: 15px;
        border-color: transparent transparent #fff transparent;
    }

    #logo div {
        margin-left: -10px;
        padding-top: 30px;
        display: flex;
    }
    .scrollDown #logo div {
        padding-top: 0px;
    }

    /* ── Mini-list desktop ── */
    .mini-list {
        color: #fff;
        font-weight: 300;
        font-size: 12px;
        margin-right: -3rem;
    }
    .mini-list span {
        flex-wrap: wrap;
        align-items: center;
        padding: 0 1rem;
        height: 48px;
        border-radius: 50px;
    }
    .mini-list span:hover {
        background: rgb(255 255 255 / 7%);
    }
    .mini-list img {
        width: 38px;
        height: 38px;
        margin-right: 0.5rem;
    }
    .mini-list img.billet {
        width: 16px;
        height: 16px;
    }
    .mini-list span:nth-child(3) img {
        opacity: 0.8;
    }
    .mini-list span:hover img {
        opacity: 1;
    }

    /* ── Barre de menu desktop (top-menu depth-0) ── */
    .header-top .top-menu[data-depth='0'] a {
        font-size: 13px;
    }
    .header-top .menu_g {
        display: flex;
        align-items: stretch;
        height: 100%;
    }
    .header-top .top-menu[data-depth='0'] {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header-top .top-menu[data-depth='0'] a {
        text-decoration: none;
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0 0rem;
        color: var(--navy);
    }
    .header-top .top-menu[data-depth='0'] .category {
        color: var(--navy);
        height: 100%;
        display: flex;
        align-items: flex-start;
        position: relative;
        flex-direction: column;
    }
    .header-top .top-menu[data-depth='0'] .category img {
        margin: 0 0 0 0.75em;
    }
    .header-top .top-menu[data-depth='0'] .category#lnk-carte-cadeau img {
        width: 28px;
    }
    .header-top .top-menu[data-depth='0'] a span {
        margin-left: 0.5rem;
        white-space: nowrap;
    }
    .header-top .top-menu[data-depth='0'] span svg {
        transform: rotate(90deg);
        stroke: var(--blue);
    }

    /* ── Sous-menu (popover full-width) ── */
    .top-menu .sub-menu {
        position: fixed !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        top: 100%;
        background: #fff;
        padding: 25px 0 !important;
        margin: 0;
        box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15) !important;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.2s ease;
        min-height: 260px;
    }
    .top-menu[data-depth='0'] > .category:hover > .sub-menu {
        visibility: visible;
        opacity: 1;
    }
    .header-top .top-menu .sline:after {
        background-color: var(--blue);
        height: 3px;
        position: absolute;
        bottom: -1px;
        transform-origin: center;
    }
    .header-top .top-menu[data-depth='0'] .sub-menu {
        border: 0;
        padding: 25px 0 !important;
        margin: 0 !important;
        transition: all 0.15s linear 0s;
        top: 170px;
    }
    .scrollDown .header-top .top-menu[data-depth='0'] .sub-menu {
        top: 114px;
    }
    .header-top .top-menu[data-depth='0'] > .category:hover > a {
        color: var(--blue);
    }
    .header-top .top-menu[data-depth='0'] > .category:hover .sub-menu {
        visibility: visible;
        opacity: 1;
    }

    /* ── Sous-menu niveau 1 (categories) ── */
    .header-top .top-menu[data-depth='1'] > .category {
        padding: 0.5rem 1rem 1rem 1rem;
    }
    .header-top .top-menu[data-depth='1'] > .category > a svg {
        margin-top: -3px;
        color: var(--blue) !important;
        position: absolute;
        top: 19px;
        right: 3px;
    }
    .header-top .top-menu[data-depth='1'] > .category > a:hover svg {
        transform: translateX(3px);
    }
    .header-top .top-menu[data-depth='1'] a span {
        margin-left: 0rem;
        white-space: normal;
    }
    .header-top .top-menu[data-depth='1'] .category a {
        display: block;
        font-size: 17px;
        text-transform: inherit;
        border-radius: var(--radius);
        margin-left: 0;
        padding: 0.2rem 0 0.25rem 0 !important;
        transition: all 0.15s linear 0s;
    }

    /* ── Grille des items (CSS Grid) ── */
    .top-menu .sub-menu > ul[data-depth='1'] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 300px));
        gap: 12px 15px;
        max-width: 1290px;
        margin: 0 auto;
        padding: 10px 20px;
        align-items: stretch;
    }
    .top-menu .sub-menu > ul[data-depth='1'] > li.category {
        border: 1px solid var(--ciel);
        border-radius: 10px;
        min-height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background: linear-gradient(160deg, #ffffff 0%, #f6fafe 100%);
    }
    .header-top .top-menu[data-depth='1'] .category {
        height: auto;
    }
    .header-top .top-menu[data-depth='1'] .category a:hover {
        box-shadow: none;
        color: var(--blue);
    }

    /* ── Sous-menu niveau 2 ── */
    .header-top .top-menu[data-depth='2'] {
        max-width: 200px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin-left: 0.35rem;
    }
    .header-top .top-menu[data-depth='2'] a {
        margin: 0;
        padding: 0;
    }
    .header-top .top-menu[data-depth='2'] a span {
        margin-left: 0rem;
    }
    .header-top .top-menu[data-depth='2'] .category a {
        padding: 0.2rem 0;
        font-size: 15px;
        padding-right: 8px;
        white-space: nowrap;
        max-width: 300px;
        display: block;
    }

    /* ── Image menu (panneau illustre) ── */
    .header-top .top-menu .img-menu {
        display: block;
        grid-row: span 3;
        height: 200px;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
    }
    .header-top .top-menu .img-menu > a {
        margin: 0;
        padding: 0;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        display: block;
        width: 100%;
        height: 100%;
        transition: all 0.15s linear;
    }
    .header-top .top-menu .img-menu div {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .header-top .top-menu .img-menu div a {
        padding: 0;
        margin: 0;
    }
    .header-top .top-menu .img-menu span {
        margin: 0;
        white-space: inherit !important;
        text-align: center;
        min-width: 150px;
        text-shadow: 1px 1px 14px #263961;
        padding: 0;
        z-index: 1;
        color: #fff;
        bottom: 10px;
        position: absolute;
        line-height: 20px;
        font-size: 14px;
        font-weight: 400;
        left: 50%;
        transform: translateX(-50%);
        text-transform: capitalize;
        transition: all 0.15s linear;
    }
    .header-top .top-menu .img-menu img {
        margin: 0 !important;
        padding: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
    }
    .header-top .top-menu .img-menu a:before {
        content: '';
        background: linear-gradient(180deg, rgb(41 40 35 / 0%) 60%, rgb(9 180 247) 110%);
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        transition: all 0.15s linear;
    }
    .header-top .top-menu .img-menu > a:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-2px);
    }

    /* Image de fond des sous-menus */
    .header-top .sub-menu {
        background-image: url('/themes/alarme_piscine/assets/img/bg-nav.jpg');
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: auto 100%;
    }

    /* Amenagement : pas d'image menu */
    .header-top .top-menu[data-depth='0'] .category#category-47 .top-menu .img-menu {
        display: none;
    }

    #miniMenuCont {
        z-index: 400;
        left: -7px;
        top: 12px;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║              MENU – Breakpoints                                            ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */
@media (min-width: 576px) {
    .header-nav #smp #panier::before {
        left: -63px;
        width: 64px;
    }
}

@media (min-width: 1020px) {
    #logo img:first-child {
        width: 98px;
        height: 102px;
    }
    #logo img:last-child {
        width: 350px;
        height: 90px;
    }
}

@media (min-width: 1190px) {
    #serviceClient {
        margin: 0 2.5rem 0 0.5rem;
    }
    #monCompte {
        margin: 0 4rem 0 0.5rem;
    }
}

@media (min-width: 1200px) {
    .displayBanner .devis a {
        font-size: 13px;
        padding: 0 1rem 0 1rem;
    }
}

@media (min-width: 1290px) {
    .header-top .top-menu[data-depth='0'] a {
        font-size: 15px;
        margin: 0 0.25rem;
    }
    #search_widget {
        margin-left: 10%;
    }
    #serviceClient {
        margin: 0 4.5rem 0 0.5rem;
    }
    #monCompte {
        margin: 0 6rem 0 0.5rem;
    }
}

@media (min-width: 1390px) {
    .header-top .top-menu[data-depth='0'] a {
        font-size: 16px;
    }
    .header-top .top-menu[data-depth='0'] > li > a {
        margin: 0 1rem;
    }
    .displayBanner .devis a {
        padding: 0 0.5rem 0 0.4rem;
        margin-right: 0;
    }
}

@media (min-width: 1400px) {
    #miniMenuCont {
        position: absolute;
        left: 1.5%;
        top: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FIN MENU / NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */


#myFly {
    text-align: center;
    /*border-bottom: 1px solid rgb(255 255 255 / 20%);*/
    margin-bottom: 2rem;
    font-size: 12px;
    padding: 0 0rem 0.25rem 0;
}
#myFly a {
    text-decoration: none;
    opacity: 0.57;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.09rem;
}
#myFly a:hover {
    opacity: 1;
}
#myFly svg {
    margin-left: 0.35rem;
    margin-top: -0.25rem;
}

.modal-body .cart-content-btn .btn.btn-secondary {
    border: 1px solid var(--ciel);
}
.modal-body .cart-content-btn .btn.btn-secondary:hover {
    border: 1px solid var(--blue);
}
.modal-body .cart-content-btn .btn.btn-secondary img.fleche {
    transform: rotate(180deg);
}
.modal-body img {
    border-radius: 6px;
}

#cms {
    line-height: 24px;
}

#cms #content-wrapper {
    margin-bottom: 3rem;
    padding: 0 15px;
}
#cms #content-wrapper p {
    margin-bottom: 0.5rem;
}
#cms #content-wrapper ul {
    margin-bottom: 2rem;
}
#cms #content-wrapper h2 {
    margin-top: 2rem;
}
#cms #content-wrapper p a.btn {
    text-decoration: none;
}
#cms #content-wrapper p a:hover {
    color: var(--blue);
}
#cms #content-wrapper p a.btn:hover {
    color: #fff;
    background: var(--blue);
}

#cms #content-wrapper li {
    list-style: circle;
    margin-left: 2rem;
    line-height: 23px;
    font-size: 15px;
}
#cms #content-wrapper li a:hover {
    color: var(--blue);
}

/* Doc Bache à barres */
#cms .page-cms-33 p {
    text-align: center;
}

#module-psgdpr-gdpr .breadcrumb,
#contact .breadcrumb {
    text-align: center;
}
#contact .breadcrumb ~ .row {
    max-width: 990px;
    margin: 0 auto;
}
#contact #content-wrapper {
    margin-bottom: 3rem;
}
#contact .block-contact {
    display: none;
}

#module-psgdpr-gdpr .psgdprinfo17 {
    margin-top: 15px;
    margin-bottom: 15px;
    background: #f1f1f1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
#module-psgdpr-gdpr .btn-primary-cta {
    margin-bottom: 1rem;
}
#module-psgdpr-gdpr .container {
    margin-bottom: 3rem;
}

#ybc_blog_page .breadcrumb {
    text-align: left;
}
#ybc_blog_page #wrapper > .row > #content-wrapper,
#ybc_blog_page .breadcrumb {
    width: 80%;
    margin: 0 auto;
}

.ybc_blog_layout_large_grid {
    display: flex;
    flex-direction: column;
}

#ybc_blog_page #wrapper > .row > #content-wrapper > .row > #content-wrapper {
    padding: 0 0rem;
}

.ybc_title_block,
.blog_description {
    color: var(--navy);
}

#ybc_blog_page .content_block.block_content li a {
    color: var(--navy) !important;
    text-decoration: none !important;
}
#ybc_blog_page .content_block.block_content li a:hover {
    color: var(--blue) !important;
    text-decoration: underline !important;
}
#left-column .ybc_block_categories li:not(:last-child) a,
#left_column .ybc_block_categories li:not(:last-child) a,
#right-column .ybc_block_categories li:not(:last-child) a,
#right_column .ybc_block_categories li:not(:last-child) a {
    border-bottom: 1px solid var(--ciel) !important;
}
.title_blog,
.title_blog a {
    color: var(--navy) !important;
}
.title_blog span {
    color: var(--blue) !important;
}
a.blog_view_all,
#ybc_blog_page .read_more,
#ybc_blog_page .blog_view_all_button a {
    font-size: 14px;
    font-style: normal;
    border: 2px solid var(--blue) !important;
    background: #fff !important;
    color: var(--blue) !important;
    position: relative;
    font-weight: 500;
    border-radius: 40px;
    text-decoration: none;
}
a.blog_view_all:hover,
#ybc_blog_page .read_more:hover,
#ybc_blog_page .blog_view_all_button a:hover {
    background: var(--blue) !important;
    color: #fff !important;
}
#ybc_blog_page .read_more {
    padding: 0.2rem 1rem;
}
#ybc_blog_page .ybc-navigation-blog-content .read_more {
    left: 50%;
    transform: translatex(-50%);
    margin-top: 1rem;
}
#ybc_blog_page .ybc_item_img,
#ybc_blog_page .ybc_image-single,
#ybc_blog_page .ybc_image-single img {
    border-radius: 8px;
}
#ybc_blog_page .blog_description p {
    color: var(--navy) !important;
}
#ybc_blog_page .ybc-blog-latest-toolbar {
    color: var(--navy) !important;
}
#ybc_blog_page h2,
#ybc_blog_page h3 {
    margin-top: 2rem;
}

#ybc_blog_page .be-categories,
#ybc_blog_page .be-categories > a,
#ybc_blog_page .ybc-blog-tags a,
#ybc_blog_page .be-categories {
    color: var(--navy) !important;
}

#ybc_blog_page .ybc-blog-related-posts-wrapper li {
    padding: 0 15px;
}

.ybc-blog-wrapper-detail {
    margin: 0;
    padding: 30px 0px;
}
.ybc-blog-wrapper-content h1 {
    margin: 0;
}

#cart .product-image img {
    border-radius: 10px;
}

/* < 576px Custom Mobile */
@media (min-width: 576px) {
    /* sm ≥ 576px */
}

@media (min-width: 768px) {
    /* md ≥ 768px */
    .ybc-blog-wrapper-detail {
        padding: 30px 15px;
    }
}
/* 
xl ≥ 1200px
xxl ≥ 1400px
*/

/* Start Desktop */
@media (min-width: 992px) {
    /* lg ≥ 992px  */

    #ybc_blog_page #wrapper > .row > #content-wrapper,
    #ybc_blog_page .breadcrumb {
        width: 90%;
    }

    .box-s .row .col-sm-6:nth-of-type(2) .form-group.row,
    .box-s .row .col-sm-6:nth-of-type(8) .form-group.row {
        padding-right: 1rem;
    }
    .box-s .row .col-sm-6:nth-of-type(3) .form-group.row,
    .box-s .row .col-sm-6:nth-of-type(9) .form-group.row {
        padding-left: 1rem;
    }

    #ybc_blog_page #wrapper > .row > #content-wrapper > .row > #content-wrapper {
        padding: 0 3rem;
    }


    .container {
        max-width: 100%;
    }
    body#checkout .container {
        max-width: 65%;
    }
    .configurator#product #wrapper .breadcrumb,
    .configurator#product .infosHeader {
        text-align: center;
    }
    .configurator#product .infos .product-information {
        margin: 2rem auto 5rem;
    }
    .configurator#product .infos h1 {
        margin-top: 1rem;
    }
}


@media (min-width: 1290px) {
    #ybc_blog_page #wrapper > .row > #content-wrapper,
    #ybc_blog_page .breadcrumb {
        width: 90%;
    }
}


@media (min-width: 1590px) {
    #ybc_blog_page #wrapper > .row > #content-wrapper,
    #ybc_blog_page .breadcrumb {
        width: 80%;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 90%;
    }

    body#checkout .container {
        max-width: 65%;
    }

}

@media (min-width: 1590px) {
    .container {
        max-width: 80%;
    }
}

/*  footer  --------------------------------------------------------------------------------  */
#reassurance {
    /*
    padding-top: 6rem;
    padding-bottom: 6rem;*/
}
.reassurance {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.reassurance div {
    text-align: center;
    margin: 1rem 0.5rem;
    margin-top: 0.75rem;
    position: relative;
}
.reassurance > div {
    min-width: 124px;
}

.reassurance > div:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--greyLight);
    top: 30px;
    transform: translate(-50%, -50%) translateX(-20px); /* ← X pixels vers la gauche */
    z-index: 0;
}
.reassurance div > img {
    z-index: 1;
    position: relative;
}
.reassurance div > div,
.reassurance div a > div {
    font-size: 13px;
    line-height: 19px;
    font-weight: 300;
}
.reassurance div a {
    text-decoration: none;
}
.reassurance div > div span,
.reassurance div a > div span {
    font-weight: 600;
    display: block;
    line-height: 20px;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 16px;
}
.reassurance div:last-child > div:last-child,
.reassurance div:last-child a > div:last-child {
    margin-top: -0.25rem;
}
.reassurance .rea-small-b {
    font-size: 13px;
    margin: 0 0 0.75rem;
    line-height: 17px;
    font-weight: 600;
    display: inline-block;
}
.reassurance .rea-pro .rea-small-b {
    display: block;
    margin-bottom: 0;
}
.reassurance img {
    width: 70px;
    height: 70px;
    /*  Color Navy Img SVG 
    filter: invert(10%) sepia(20%) saturate(5855%) hue-rotate(218deg) brightness(83%) contrast(96%);*/
}
.reassurance .rea-pro img {
    width: auto;
    height: auto;
}
.reassurance div .blb {
    display: inline;
    font-size: 12px;
    background: var(--blue);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-max);
    color: #fff;
}
.reassurance .rea-pro div {
    width: 210px;
    margin: 0 auto;
    /* margin-top: -1rem;*/
}

.reassurance .rea-pro {
    flex: 0 100%;
}

.footer-before {
    background: var(--ciel);
}
#footer .container {
    position: relative;
}

#footer .footer-wave {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
#footer .footer-wave svg {
    display: block;
    min-width: 1490px;
    max-width: none;
    margin: 0 auto;
}

#footer .block_newsletter {
    margin-bottom: -4rem;
}
#footer .block_newsletter form > div {
    margin-top: -2rem;
    margin-bottom: 1rem;
}
#footer .email-f {
    font-style: italic;
}
#footer .email-f input::placeholder {
    color: var(--navy);
    font-size: 14px;
    font-style: italic;
    opacity: 1;
}
#footer .valid-z .btn {
    padding: 0px 1.25rem !important;
    border: 0;
    height: calc(1.25em + 1.25rem - -1px);
    font-weight: 400;
}
#footer .valid-z .btn:hover {
    transform: none;
}

#footer .conditions-nls {
    font-size: 12px;
    font-style: italic;
    opacity: 0.8;
    font-weight: 400;
    margin-top: 0.75rem;
    margin-bottom: 0rem;
    text-align: left;
    padding-left: 0;
}
#footer #block-newsletter-label {
    margin-top: 1rem;
    font-size: 34px;
    line-height: 34px;
    font-style: italic;
    font-weight: 600;
    margin-bottom: 2.5rem;
}
#footer #block-newsletter-label img {
    display: block;
    margin: 0 auto;
}

#footer .f-content-fnls {
    position: relative;
    margin-top: 2rem;
}
#footer .f-content-fnls .valid-z {
    position: absolute;
    right: 7px;
    top: 6px;
}

#footer .footer-container.footerBgImg {
    background-image: url('/themes/alarme_piscine/assets/img/footer-bg.jpg');
    background-repeat: no-repeat;
    background-position: center bottom;
}
#footer .footer-container .footerBgImg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to bottom, var(--navy) 0%, rgba(0, 0, 0, 0) 100%);
    top: 165px;
}

/* Pos Icon 1 */
.icon1 {
    background-repeat: no-repeat;
    background-position: -220px 0px;
}
.footer-container {
    color: var(--white);
    background: var(--navy);
    min-height: 755px;
}
.footer-container .row {
    margin-top: 1rem;
}
.footer-container .f-info {
    margin-top: -1rem;
}

.footer-container .f-info,
.footer-container .f-ave,
.footer-container .f-sc,
.footer-container .f-res {
    margin-bottom: 3rem;
    color: #fff;
}

.footer-container h4 {
    text-align: left;
    display: block;
    font-weight: 600;
    font-size: 20px;
    line-height: 36px;
    margin-bottom: 2rem;
    margin: 0 2rem 1.5rem;
}

.footer-container a.effHov::after {
    bottom: -2px;
}
.footer-container .f-info a,
.footer-container .f-ave a {
    text-decoration: none;
    font-weight: 300;
    font-size: 13px;
    color: #fff;
}
.footer-container .f-ave > div a {
    font-weight: 500;
    font-size: 15px;
    margin: 0.5rem 0;
    padding: 0.65rem 1rem !important;
    line-height: 15px;
}

.footer-container .f-info a:hover,
.footer-container .f-ave a:hover {
    color: #fff;
}

.footer-container p {
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    font-weight: 300;
    padding: 1rem 2rem;
}
.footer-container .f-info > a {
    margin: 0 2rem;
    display: inline-block;
}
.footer-container .f-info > div {
    padding: 1rem 2rem;
}
.footer-container .f-info > div a {
    display: inline-block;
}

.footer-container #steavisgarantisFooterVerif {
    padding: 0 2rem;
}
.footer-container #steavisgarantisFooterText span.atc {
    font-weight: 600;
    text-decoration: underline;
}
.footer-container .f-res .list-res {
    margin-bottom: 0;
    text-align: left;
    padding: 0 2rem;
    margin-top: -1rem;
}
.footer-container .f-res .list-res a {
    padding-bottom: 1rem;
}

.footer-container .f-res > span {
    font-style: italic;
    font-size: 14px;
    margin-bottom: 1rem;
    display: block;
}
.footer-container .f-res .list-res svg {
    width: 30px;
    fill: var(--cielLight);
    color: var(--cielLight); /* fill="currentColor" */
    margin: 0 0.75rem 0.25rem;
}
.footer-container .f-res .list-res span {
    display: inline-block;
}
.footer-container .f-res .list-res span:hover svg {
    fill: #fff;
    color: #fff; /* fill="currentColor" */
}
.footer-container .f-res .list-res span:after {
    height: 2px;
}

.footer-container .f-res .sc-instagram svg {
    width: 26px;
}
.footer-container .f-res .sc-twitter svg {
    width: 23px;
}
.footer-container .f-res .sc-tictoc svg {
    width: 26px;
}

.footer-container .f-ave > p,
.footer-container .f-ave > div {
    padding: 0 2rem;
}
.footer-container .f-ave > p {
}
.footer-container .f-ave > p a {
    font-size: 14px;
}
.footer-container .f-ave p:first-of-type a {
    display: inline-block;
}

.footer-container .f-ave p:last-of-type,
.footer-container .f-sc p {
    display: table-caption;
    text-align: left;
    line-height: 24px;
}
.footer-container .f-ave p:last-of-type {
    padding-top: 1rem;
}
.footer-container .f-sc p {
    padding-top: 0rem;
    padding-bottom: 2rem;
}
.footer-container .f-ave p:last-of-type a,
.footer-container .f-sc a {
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}
.footer-container .f-ave > div > strong {
    display: block;
    font-weight: 600;
}

#footer .f-content-fnls {
    margin: 2rem auto 1rem auto;
}
#footer .cont-conditions-nls {
    margin: 0rem auto 3rem;
}

@media (min-width: 576px) {
    .reassurance {
        justify-content: space-around;
    }
}

@media (min-width: 768px) {
}

/* Start Desktop lg */
@media (min-width: 992px) {
    .container.opartdevis {
        margin-top: 4rem;
    }

    #footer .block_newsletter form > div {
        margin-bottom: -1rem;
    }
    #footer .conditions-nls {
        padding-left: 1rem;
    }
    .reassurance .rea-pro {
        margin: 5rem 0;
    }

    #footer #block-newsletter-label {
        font-size: 34px;
    }

    #footer #block-newsletter-label img {
        margin-bottom: -1rem;
        display: inline;
    }
    #footer .container .logo {
        max-width: 310px;
    }
    .footer-container .f-info,
    .footer-container .f-ave,
    .footer-container .f-sc,
    .footer-container .f-res {
        order: inherit;
        margin-bottom: 0rem;
    }
    .footer-container .f-info a,
    .footer-container .f-ave a {
        text-align: left;
    }
    .reassurance {
        flex-wrap: inherit;
    }
    .reassurance {
        justify-content: space-between;
        margin-top: 3rem;
    }
    .reassurance div {
        margin: 0 1rem;
    }
    .reassurance .rea-pro {
        flex: initial;
        margin: 0;
        margin-top: -3rem;
    }
    .reassurance > div {
        min-width: auto;
    }
    #wrapper .breadcrumb {
        display: block;
        margin: 1rem auto;
    }
    .page-cms .breadcrumb {
        text-align: center;
    }
    #main .page-header {
        text-align: center;
        position: relative;
        max-width: 40%;
        height: 80px;
        display: flex;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
    }

    #main .page-header h1 {
        text-align: center;
        font-size: 2rem;
        display: inline-block;
        position: relative;
        background: #fff;
        padding: 0 2rem;
        letter-spacing: -0.02rem;
        z-index: 1;
    }
    /*
        #main .page-header:after {
            content: "";
            height: 3px;
            display: block;
            width: 100%;
            bottom: 36px;
            position: absolute;
 
            background-color: var(--ciel);
        }
        */
}

@media (min-width: 1200px) {
    .reassurance > div {
        min-width: 174px;
    }

    #reassurance .container {
        max-width: 1300px;
        margin-bottom: -2rem;
    }
}

.grecaptcha-badge {
    transform: scale(0.8);
}

.categoryStarsStr {
    margin-left: 4px;
}