:root {
    --bg-body: #ffffff;
    --bg-body-elem-primary: #ffffff;
    --bg-body-elem-secondary: #f2f2f2;
    --bg-item-primary: #ffffff;
    --bg-item-secondary: #f3f3f3;
    --font-family-primary: Bai Jamjuree;
    --font-family-default: Bai Jamjuree;
    --font-size-base: 1.4rem;
    --color-body-text: #3f4045;
    --color-default: #0fb930;
    --color-primary: #0fb930;
    --color-border: #eaeaea;
    --color-border-rgb: 234, 234, 234;
    --color-heading: #222222;
    --color-heading-rgb: 34, 34, 34;
    --color-footer-link: #00db2a;
    --color-product-border: #eaeaea;
    --border-radius-product-image: 10px;
    --color-product-name: #222222;
    --color-product-name-rgb: 34, 34, 34;
    --color-price: #222222;
    --color-button: #e7e8eb;
    --color-button-hover: #0fb930;
    --color-button-text: #222222;
    --color-button-text-hover: #ffffff;
}

*, ::after, ::before {
    box-sizing: border-box;
}

html {
    padding-bottom: 0 !important;
    font-size: 62.5%;
    font-family: sans-serif;
    line-height: 1.15;
}

body {
    margin: 0;
    text-align: left;
    transition: none;
    left: 0;
    right: 0;
    position: relative;
    font-size: var(--font-size-base);
    font-family: var(--font-family-default);
    color: var(--color-body-text);
    line-height: 1.7;
}
.body-content {
    background-color: var(--bg-body);
}
.body-secondary {
    background-color: var(--bg-body-elem-secondary);
}

.sidebar-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(0,0,0,.5);
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s linear;
    cursor: url("../../theme/icon/icon-close.svg"),auto;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

.button-unstyle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    outline: none;
    box-shadow: none;
    cursor: default;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/*--------- Link ----------*/
a {
    color: var(--color-body-text);
    transition: all 0.2s;
    text-decoration: none;
    touch-action: manipulation;
}

a:hover {
    color: var(--color-primary);
}

/*--------- Overlay ----------*/

.sidebar-overlay.active {
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1;
    visibility: visible;
}

/*--------- BS Carousel Nav ----------*/

.carousel-indicators.bs-carousel-nav {
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
}

    .carousel-indicators.bs-carousel-nav button {
        width: 25px;
        height: 25px;
        border: 1px solid rgba(0, 0, 0, 0);
        padding: 7px;
        background-clip: content-box;
        position: relative;
        border-radius: 100%;
        margin: 0 5px 0 5px;
        box-sizing: inherit;
        background-color: #878787;
    }

        .carousel-indicators.bs-carousel-nav button.active {
            background-color: var(--color-default);
            border-color: var(--color-default);
        }

/*--------- BS Carousel Controls  ----------*/

.carousel-control-prev .bs-custom-controls,
.carousel-control-next .bs-custom-controls {
    visibility: hidden;
    opacity: 0;
}

    .carousel-control-prev .bs-custom-controls:hover,
    .carousel-control-next .bs-custom-controls:hover {
        background-color: #f2f2f2;
    }

.carousel.slide:hover .bs-custom-controls {
    visibility: visible;
    opacity: 1;
}

.bs-custom-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 50px;
    height: 50px;
    font-size: 20px;
    color: #919191;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .1);
}


@media (min-width: 1200px) {
    .container {
        max-width: 1500px;
        margin: 0 auto;
    }
}

@media(max-width: 1199px) {
    html {
        font-size: 59%;
    }
}

@media(max-width: 991px) {
    html {
        font-size: 57%;
    }
}

/* Obfuscated Link — SEO link graph hygiene (voir vault [[_Architecture-Obfuscated-Links]]).
   Handler JS : theme.ObfuscatedLink dans global.js.
   Cette classe est purement comportementale : elle herite du style du conteneur (ex: mob-slide-link). */
.obf-link {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}
.obf-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .animated.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .animated.hinge {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }

    .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
        -webkit-animation-duration: .75s;
        animation-duration: .75s;
    }

@-webkit-keyframes swing {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.swing {
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes wobble {
    0% {
        transform: none;
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate(-5deg);
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate(3deg);
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate(-3deg);
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate(2deg);
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate(-1deg);
    }

    to {
        transform: none;
    }
}

@keyframes wobble {
    0% {
        transform: none;
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate(-5deg);
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate(3deg);
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate(-3deg);
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate(2deg);
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate(-1deg);
    }

    to {
        transform: none;
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@-webkit-keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    to {
        transform: none;
    }
}

@keyframes bounceInDown {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    to {
        transform: none;
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    to {
        transform: none;
    }
}

@keyframes bounceInLeft {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    to {
        transform: none;
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    to {
        transform: none;
    }
}

@keyframes bounceInRight {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    to {
        transform: none;
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-200px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-200px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(200px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(200px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}

@-webkit-keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    0%,40% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotateX(-5deg);
    }

    to {
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    0%,40% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotateX(-5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes lightSpeedIn {
    0% {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(20deg);
    }

    60%,80% {
        opacity: 1;
    }

    80% {
        transform: skewX(-5deg);
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    0% {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(20deg);
    }

    60%,80% {
        opacity: 1;
    }

    80% {
        transform: skewX(-5deg);
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(-120deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(-120deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
}

@-webkit-keyframes slideInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

@keyframes slideInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
    0% {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

@keyframes slideInLeft {
    0% {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
    0% {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

@keyframes slideInRight {
    0% {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

@keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

@-webkit-keyframes policy {
    16.65% {
        transform: translateX(7px);
    }

    33.33% {
        transform: translateX(-5px);
    }

    49.95% {
        transform: translateX(3px);
    }

    66.6% {
        transform: translateX(-2px);
    }

    83.25% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes policy {
    16.65% {
        transform: translateX(7px);
    }

    33.33% {
        transform: translateX(-5px);
    }

    49.95% {
        transform: translateX(3px);
    }

    66.6% {
        transform: translateX(-2px);
    }

    83.25% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes Animationlookbook {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes Animationlookbook {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes ButtonPlay {
    0% {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: .8;
    }

    100% {
        width: 160%;
        height: 160%;
        left: -30%;
        top: -30%;
        opacity: .2;
    }
}

@keyframes ButtonPlay {
    0% {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: .8;
    }

    100% {
        width: 160%;
        height: 160%;
        left: -30%;
        top: -30%;
        opacity: .2;
    }
}

@-webkit-keyframes ImgAnimate {
    0% {
        transform: rotate(0) translate(-5px) rotate(0);
    }

    100% {
        transform: rotate(360deg) translate(-5px) rotate(-360deg);
    }
}

@keyframes ImgAnimate {
    0% {
        transform: rotate(0) translate(-5px) rotate(0);
    }

    100% {
        transform: rotate(360deg) translate(-5px) rotate(-360deg);
    }
}

@-webkit-keyframes scale {
    0% {
        opacity: .7;
        box-shadow: 0 0 0 0 var(--theme-color-default);
    }

    100% {
        opacity: 0;
        box-shadow: 0 0 0 13px var(--theme-color-default);
    }
}

@keyframes scale {
    0% {
        opacity: .7;
        box-shadow: 0 0 0 0 var(--theme-color-default);
    }

    100% {
        opacity: 0;
        box-shadow: 0 0 0 13px var(--theme-color-default);
    }
}

@-webkit-keyframes scaleIcon {
    0% {
        opacity: .7;
        box-shadow: 0 0 0 0 #34ad5e;
    }

    100% {
        opacity: 0;
        box-shadow: 0 0 0 7px #34ad5e;
    }
}

@keyframes scaleIcon {
    0% {
        opacity: .7;
        box-shadow: 0 0 0 0 #34ad5e;
    }

    100% {
        opacity: 0;
        box-shadow: 0 0 0 7px #34ad5e;
    }
}

@-webkit-keyframes phone {
    16.65% {
        transform: rotate(20deg);
    }

    33.33% {
        transform: rotate(-15deg);
    }

    49.95% {
        transform: rotate(10deg);
    }

    66.6% {
        transform: rotate(-5deg);
    }

    83.25% {
        transform: rotate(1deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes phone {
    16.65% {
        transform: rotate(20deg);
    }

    33.33% {
        transform: rotate(-15deg);
    }

    49.95% {
        transform: rotate(10deg);
    }

    66.6% {
        transform: rotate(-5deg);
    }

    83.25% {
        transform: rotate(1deg);
    }

    100% {
        transform: rotate(0);
    }
}

@-webkit-keyframes slider {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes slider {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes sliderRtl {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes sliderRtl {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes zoomInZoomOut {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes rotation {

    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

@keyframes l17 {
    100% {
        background-size: 120% 100%
    }
}
.owl-theme .owl-dots,
.owl-theme .owl-nav {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.owl-theme .owl-nav {
    margin-top: 10px;
}

    .owl-theme .owl-nav [class*="owl-"] {
        color: #fff;
        font-size: 14px;
        margin: 5px;
        padding: 4px 7px;
        background: #d6d6d6;
        display: inline-block;
        cursor: pointer;
        border-radius: 3px;
    }

        .owl-theme .owl-nav [class*="owl-"]:hover {
            background: #869791;
            color: #fff;
            text-decoration: none;
        }

    .owl-theme .owl-nav .disabled {
        opacity: 0.5;
        cursor: default;
    }

        .owl-theme .owl-nav.disabled + .owl-dots {
            margin-top: 20px;
        }

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
}

.owl-theme .owl-dots .owl-dot {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(0, 0, 0, 0);
    padding: 7px !important;
    background-clip: content-box;
    position: relative;
    border-radius: 50%;
    margin: 0 5px 0 5px;
    box-sizing: inherit;
    background-color: #878787;
}

    .owl-theme .owl-dots .owl-dot.active {
        background-color: var(--color-default);
        border-color: var(--color-default);
    }

    .owl-theme .owl-dots .owl-dot:hover {
        background-color: var(--color-default);
    }

:root {
    --header-background-color: #000954;
/*    --header-background-color: #00278b;*/
    --header-color-border-rgb: 234, 234, 234;
    --header-nav-color: #ffffff;
    --header-nav-color-sticky: #ffffff;
    --header-nav-color-sub: #666666;
    --header-nav-color-act: #0fb930;
}

.header-content-desktop {
    margin: 0px;
    background-color: var(--header-background-color);
    position: relative;
    z-index: 90;
}

.header-content-mobile {
    margin: 0px;
    background-color: var(--header-background-color);
    position: relative;
    height: 60px;
    max-height: 60px;
    z-index: 100;
}
.header-desktop {
    margin: 0;
}

    .header-desktop .head-deskt-top-left {
        width: 270px;
    }

.head-deskt-top-right > div:not(:last-child) {
    margin-right: 30px;
}

.head-deskt-top-left .head-deskt-nav-btn {
    font-size: 21px;
    cursor: pointer;
    margin-right: 40px;
    min-width: 18px;
    color: #fff;
}

    .head-deskt-top-left .head-deskt-nav-btn:hover {
        color: var(--header-nav-color-act);
    }

.head-deskt-top-right {
    padding-bottom: 45px;
    padding-top: 45px;
}

    .head-deskt-top-right .head-deskt-item-phone {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .head-deskt-top-right .head-deskt-item-phone a {
            color: #ffffff;
            display: flex;
            margin-right: 10px;
            transition: all 0.35s ease-in-out;
        }

            .head-deskt-top-right .head-deskt-item-phone a i {
                display: inline-block;
                font-size: 1.6rem;
                transition: all .35s ease-in-out;
            }

            .head-deskt-top-right .head-deskt-item-phone a:hover i {
                -webkit-animation: policy 1.2s linear;
                animation: policy 1.2s linear;
            }

        .head-deskt-top-right .head-deskt-item-phone p {
            color: #ffffff;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1rem;
            margin-top: 0;
        }

            .head-deskt-top-right .head-deskt-item-phone p span {
                color: #0fb930;
            }
.head-deskt-nav {
    padding: 0;
    height: 100%;
    /* Pas de position: relative ici — on veut que le mega absolute reference
       le container Bootstrap (positionne relative via un selecteur specifique
       plus bas dans le fichier). Le container est centre viewport → le mega
       peut ensuite prendre 100vw proprement via left:50% + margin-left:-50vw. */
}

/* Positioning ancestor du mega — pattern Tommart :
   .header-topbar-wrap est un wrapper full-viewport-width autour du container
   Bootstrap du topbar (voir Header.cshtml). Sa mise en position:relative permet
   au mega d'utiliser `width:100%` = viewport width, sans hack 100vw.
   Le top:100% du mega = fin du wrapper = bottom du topbar = pas de trou hover. */
.header-topbar-wrap {
    position: relative;
}
    .head-deskt-nav ul {
        list-style: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .head-deskt-nav .deskt-nav-item {
        display: inline-block;
        padding: 43px 12px 42px 12px;
        height: 100%;
        position: relative;
        align-items: stretch;
    }

        .head-deskt-nav .deskt-nav-item .deskt-nav-link.active {
            color: var(--header-nav-color-act) !important;
        }

        .head-deskt-nav .deskt-nav-item .deskt-nav-link {
            color: var(--header-nav-color);
            font-size: 1.3rem;
            font-weight: 700;
            font-family: var(--font-family-primary);
            transition: all 0.3s ease;
            display: block;
            position: relative;
            height: 100%;
        }

            .head-deskt-nav .deskt-nav-item .deskt-nav-link:hover {
                color: var(--header-nav-color-act);
            }

    .head-deskt-nav .deskt-nav-pannel-default {
        min-width: -webkit-max-content;
        min-width: -moz-max-content;
        min-width: max-content;
        width: 270px;
        z-index: 91;
    }

    .head-deskt-nav .deskt-nav-item .deskt-nav-pannel {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        margin: 0;
        background: #fff;
        text-align: left;
        top: 100%;
        left: 0;
        -ms-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
        -o-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
        border-top: 1px solid rgba(var(--header-color-border-rgb), 0.6);
    }

    .head-deskt-nav .deskt-nav-item:hover .deskt-nav-pannel {
        opacity: 1;
        visibility: visible;
        transition: all 0.3s;
        pointer-events: auto;
    }

        .head-deskt-nav .deskt-nav-item:hover .deskt-nav-pannel > ul {
            padding: 30px 40px;
        }

    .head-deskt-nav .deskt-nav-item .deskt-nav-pannel .deskt-nav-link-pannel {
        padding-bottom: 14px;
        font-size: 1.4rem;
        color: var(--header-nav-color-sub);
        display: block;
    }

        .head-deskt-nav .deskt-nav-item .deskt-nav-pannel .deskt-nav-link-pannel:hover {
            color: var(--header-nav-color-act);
        }

/* ===== Mega menu (Autres univers ▾) — pattern Tommart full-width =====
   Le mega prend toute la largeur du nav (aligne aux bords gauche/droite),
   pas juste sous le nav item parent. Bootstrap grid col-xl-4 pour les sections. */

/* Le nav item du mega devient non-relative pour que le mega absolute
   se refere a l'ancetre positionne suivant (parent flex/nav container). */
.head-deskt-nav .deskt-nav-item-mega {
    position: static;
}

/* Mega full-viewport-width — pattern Tommart.
   Positioning ancestor = .header-topbar-wrap (defini plus haut, position:relative,
   viewport-width block). Le mega prend width:100% = viewport width, clean, sans hack 100vw.
   top:100% herite de .deskt-nav-pannel = fin du wrapper = bottom du topbar = pas de trou hover. */
.head-deskt-nav .deskt-nav-pannel-mega {
    left: 0;
    right: auto;
    width: 100%;
    max-width: 100%;
    transform: none;
}

    /* Contenu interne cape a 1500px et centre — miroir Tommart .site-nav__mega--content.
       Le background mega prend le viewport, mais le contenu reste lisible.
       Alignement gauche a la Tommart : les colonnes commencent chacune a gauche de leur bbox. */
    .head-deskt-nav .deskt-nav-pannel-mega .deskt-nav-mega-content {
        max-width: 1500px;
        margin: 0 auto;
        padding: 30px 40px !important;
    }

    .head-deskt-nav .deskt-nav-pannel-mega .deskt-nav-mega-section {
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: left; /* aligne gauche a la Tommart */
    }

    /* Heading section mega — style Tommart : sobre, editorial.
       Pas de border-bottom, espace vertical genereux pour separer. */
    .head-deskt-nav .deskt-nav-pannel-mega .deskt-nav-mega-heading {
        padding-bottom: 0;
        margin-bottom: 25px;
        border-bottom: none;
    }

        .head-deskt-nav .deskt-nav-pannel-mega .deskt-nav-mega-heading a {
            display: block;
            font-size: 1.2rem;
            font-weight: 800;
            color: #222222;
            text-transform: uppercase;
            padding: 0;
        }

            .head-deskt-nav .deskt-nav-pannel-mega .deskt-nav-mega-heading a:hover {
                opacity: 0.85;
            }

.head-deskt-menu {
    padding: 0;
}

.head-deskt-menu ul {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

        .head-deskt-menu ul li {
            position: static;
        }

    .head-deskt-menu .deskt-menu-btn {
        line-height: 60px;
        height: 60px;
        background-color: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding-left: 18px;
        padding-right: 18px;
        position: relative;
        transition: all 0.35s ease-in-out;
        width: 270px;
        max-width: 270px;
        color: #222222;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

        .head-deskt-menu .deskt-menu-btn i {
            font-size: 1.6rem;
        }

        .head-deskt-menu .deskt-menu-btn span {
            font-size: 1.2rem;
            font-weight: 700;
            display: inline-block;
            margin-left: 30px;
        }

    .head-deskt-menu .deskt-menu-content {
        position: absolute;
        top: 100%;
        width: 270px;
        max-width: 270px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border: 1px solid #e2e2e2;
        margin: 0;
        background-color: #fff;
        padding: 18px 0 31px 0;
        box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, .08);
        transition: all 0.35s ease-in-out;
    }
        .head-deskt-menu .deskt-menu-content.active {
            display: block !important;
        }

        .head-deskt-menu .deskt-menu-content .deskt-menu-item-lv1:hover .deskt-menu-pannel-lv1,
        .head-deskt-menu .deskt-menu-content .deskt-menu-item-lv2:hover .deskt-menu-pannel-lv2 {
            opacity: 1;
            visibility: visible;
            top: 0;
            transition: all 0.3s;
            pointer-events: auto;
        }

        .head-deskt-menu .deskt-menu-content .deskt-menu-link-lv1,
        .head-deskt-menu .deskt-menu-content .deskt-menu-link-lv2,
        .head-deskt-menu .deskt-menu-content .deskt-menu-link-lv3 {
            align-items: center;
            font-family: var(--font-family-default);
            font-size: 1.2rem;
            font-weight: 500;
            text-transform: none;
            color: #222;
            line-height: 40px;
            border-radius: 40px;
            padding: 0 10px 0 10px;
            margin: 0 10px 0 10px;
            transition: all 0.35s ease-in-out;
            display: flex;
        }

            .head-deskt-menu .deskt-menu-content .deskt-menu-link-lv1:hover,
            .head-deskt-menu .deskt-menu-content .deskt-menu-link-lv2:hover,
            .head-deskt-menu .deskt-menu-content .deskt-menu-link-lv3:hover {
                color: var(--color-default);
                background-color: #f3f3f3;
            }

        .head-deskt-menu .deskt-menu-content .deskt-menu-sub-lv1 .deskt-menu-link-lv1:after,
        .head-deskt-menu .deskt-menu-content .deskt-menu-sub-lv2 .deskt-menu-link-lv2:after {
            content: "\f061";
            font-family: "Font Awesome 7 Free";
            display: inline-block;
            font-size: 0.7rem;
            line-height: 1;
            margin-left: auto;
            transition: transform .2s linear;
        }

        .head-deskt-menu .deskt-menu-content .deskt-menu-pannel-title {
            font-size: 1.4rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #cdcdcd;
            margin: 10px 20px 10px 20px;
            line-height: 1.5;
        }

        .head-deskt-menu .deskt-menu-content .deskt-menu-pannel-lv1,
        .head-deskt-menu .deskt-menu-content .deskt-menu-pannel-lv2 {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            margin: 0;
            padding: 18px 0 31px 0;
            top: 0;
            left: 100%;
            background-color: #fff;
            text-align: left;
            transition: all 0.3s;
            border: 1px solid rgba(var(--color-border-rgb), 0.6);
            border-radius: 10px;
            -ms-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
            -o-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
            min-width: 270px;
            width: 270px;
            min-height: 100%;
            height: auto;
        }


/*--------- Templates Switch ----------*/

body:not(.template-index) .head-deskt-menu .deskt-menu-content {
    display: none;
}

body:not(.template-index) .head-deskt-menu .deskt-menu-btn {
    cursor: pointer;
}
    body:not(.template-index) .head-deskt-menu .deskt-menu-btn:hover {
        color: #00db2a;
    }

/*--------- Media ----------*/

@media(max-width: 1199px) {

    body:is(.template-index) .head-deskt-menu .deskt-menu-content {
        display: none;
    }

    body:is(.template-index) .head-deskt-menu .deskt-menu-btn {
        cursor: pointer;
    }

        body:is(.template-index) .head-deskt-menu .deskt-menu-btn:hover {
            color: #00db2a;
        }
}

@media(max-width: 992px) {
    .head-deskt-menu .deskt-menu-btn {
        width: 50px;
    }

        .head-deskt-menu .deskt-menu-btn span {
            display: none;
        }
}
.header-search-content {
    flex: auto;
    margin: 0 0 0 15px;
    position: relative;
}

    .header-search-content .search-input {
        width: 100%;
        padding: 0;
        height: 50px;
        font-size: 1.2rem;
        color: var(--color-body-text);
        background-color: #fff;
        outline: 0;
        border-radius: 5px;
        margin-bottom: 10px;
        position: relative;
        border: 1px solid #e2e2e2;
        padding-left: 30px;
        padding-right: 50px;
        -ms-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.08);
        -o-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.08);
        box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.08);
        min-width: 330px;
    }

        .header-search-content .search-input::-webkit-input-placeholder {
            font-size: 1rem;
            text-transform: uppercase;
            font-weight: 400;
            color: #a1a1a1;
        }

        .header-search-content .search-input:-moz-placeholder {
            font-size: 1rem;
            text-transform: uppercase;
            font-weight: 400;
            color: #a1a1a1;
        }

        .header-search-content .search-input::-moz-placeholder {
            font-size: 1rem;
            text-transform: uppercase;
            font-weight: 400;
            color: #a1a1a1;
        }

        .header-search-content .search-input:-ms-input-placeholder {
            font-size: 1rem;
            text-transform: uppercase;
            font-weight: 400;
            color: #a1a1a1;
        }

    .header-search-content .search-input-submit {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        right: 0px;
        width: 50px;
        height: 50px;
        min-width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 50px;
        transition: all .35s ease-in-out;
        border: none;
        cursor: pointer;
        transition: all .2s;
        color: #000;
        padding: 0;
    }

        .header-search-content .search-input-submit:hover {
            color: var(--color-default);
        }

        .header-search-content .search-input-submit .search-input-submit-icon {
            font-size: 1.6rem;
        }

@media(max-width: 991px)and (min-width: 768px) {
    .header-search-content .search-input {
        min-width: 260px;
    }
}
.header-mobile {
    height: 60px;
    max-height: 60px;
    padding: 0 20px;
    position: relative;
}

    /* Logo mobile centre visuellement (ancre absolue) — ignore l'asymetrie
       du contenu lateral (2 icones a gauche vs 1 icone a droite). Le col-4
       de mobile_logo reste dans le flow Bootstrap (occupe 33-66% de la row),
       seul le <a><img> passe en position absolue centre sur .header-mobile. */
    .header-mobile .mobile_logo > a {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* Ecrans tres etroits (Galaxy Z Fold ferme 344px, etc.) : reduire le logo
       pour eviter la collision avec les icones laterales. */
    @media (max-width: 380px) {
        .header-mobile .mobile_logo > a img {
            height: 32px;
        }
    }

    .header-mobile .header-mobile-btn {
        position: relative;
        cursor: pointer;
        float: inherit;
        text-shadow: none;
        line-height: 14px;
    }

        .header-mobile .header-mobile-btn.space {
            margin-left: 20px;
        }

        .header-mobile .header-mobile-btn i {
            font-size: 16px;
            color: #fff;
        }


.header-mobile .header-mobile-search {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

        .header-mobile .header-mobile-search.active {
            visibility: visible;
            opacity: 1;
        }

        .header-mobile .header-mobile-search .search-input {
            background: #fff;
            border: none;
            border-top: 1px solid #c7d4e0;
            border-bottom: 1px solid #c7d4e0;
            border-radius: 0;
            padding: 0 15px;
            height: 60px;
            text-align: center;
            width: 100%;
            outline: none;
            box-shadow: none;
            border-color: none;
        }

            .header-mobile .header-mobile-search .search-input::placeholder {
                font-size: 10px;
                font-weight: 600;
                color: #a8a8a8;
                text-transform: uppercase;
                letter-spacing: 1px;
            }
/*--------- Nav ----------*/

.head-mob-slide-nav,
.head-mob-slide-menu {
    background: #fff;
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    display: flex;
    transition: all 0.4s;
    flex-direction: column;
    padding: 20px;
    border-right: 1px solid #e5e5e5;
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, .08);
    z-index: 100;
}

    .head-mob-slide-nav.active,
    .head-mob-slide-menu.active {
        left: 0;
    }

    .head-mob-slide-nav .mob-slide-nav-cont {
        overflow-x: hidden;
        position: relative;
        height: calc(100% - 350px);
        background: #fff;
    }
    .head-mob-slide-menu .mob-slide-nav-cont {
        overflow-x: hidden;
        position: relative;
        height: 100%;
        background: #fff;
    }

.mob-slide-nav-cont .mob-slide-panels,
.mob-slide-nav-cont .mob-slide-panels .mob-slide-panel {
    box-sizing: border-box;
    background:inherit;
    margin: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
}

.mob-slide-panels .mob-slide-panel {
    transform: translate(100%);
    transform: translate3d(100%, 0, 0);
    transition: transform .4s ease;
    transform-origin: top left;
}

    .mob-slide-panels .mob-slide-panel::-webkit-scrollbar-track {
        background-color: #efefef;
        border-radius: 10px;
        border: 1px solid #dfdfdf;
    }

    .mob-slide-panels .mob-slide-panel::-webkit-scrollbar {
        width: 10px;
    }

    .mob-slide-panels .mob-slide-panel::-webkit-scrollbar-thumb {
        background-color: #b4b4b4;
        border-radius: 10px;
        border: 3px solid rgba(0, 0, 0, 0);
        background-clip: content-box;
    }

        .mob-slide-panels .mob-slide-panel::-webkit-scrollbar-thumb:hover {
            background-color: #777;
        }

    .mob-slide-panels .mob-slide-panel.panel-open {
        transform: translate(0);
        transform: translateZ(0);
    }

    .mob-slide-panels .mob-slide-panel.panel-sub-open {
        transform: translate(-30%);
        transform: translate3d(-30%, 0, 0);
    }

    .mob-slide-panels .mob-slide-panel .mob-slide-link-list {
        list-style: none;
        list-style-type: none;
        display: block;
        padding: 0;
        margin: 0;
        border-color: rgba(0, 0, 0, .1);
    }

        .mob-slide-panels .mob-slide-panel .mob-slide-link-list li {
            line-height: 20px;
            padding: 20px;
            border-bottom: 1px solid #e5e5e5;
            position: relative;
        }

    .mob-slide-panels .mob-slide-panel .mob-slide-link {
        font-size: 13px;
        font-weight: 700;
        text-transform: capitalize;
        font-family: var(--font-family-primary);
        transition: all 0.3s ease;
        display: block;
        color: #222;
    }

        .mob-slide-panels .mob-slide-panel .mob-slide-link:hover {
            color: var(--color-primary);
        }

.mob-slide-panel .btn-panel-next,
.mob-slide-panel .btn-panel-prev {
    cursor: pointer;
}

.mob-slide-panel .ico-panel-next,
.mob-slide-panel .ico-panel-prev {
    width: 50px;
    height: 60px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

    .mob-slide-panel .ico-panel-next:after {
        content: "\f054";
        font-family: "Font Awesome 7 Free";
        display: inline-block;
        font-size: 1rem;
        margin: auto;
    }

    .mob-slide-panel .ico-panel-prev:after {
        content: "\f060";
        font-family: "Font Awesome 7 Free";
        display: inline-block;
        font-size: 1rem;
        margin: auto;
    }

.mob-slide-panels .mob-slide-panel-sub {
    border-top: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
}

    .mob-slide-panels .mob-slide-panel-sub .mob-slide-panel-navbar {
        display: block;
        text-align: left;
        position: static;
        height: initial;
        padding: 20px;
        line-height: 20px;
        border-bottom: 1px solid #e5e5e5;
    }

        .mob-slide-panels .mob-slide-panel-sub .mob-slide-panel-navbar .mob-slide-panel-navbar-title {
            color: var(--color-default);
            font-size: 13px;
            text-transform: uppercase;
            font-weight: 800;
            font-family: var(--font-family-primary);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }


/*--------- Search ----------*/

.head-mob-slide-search-form {
    padding: 30px 0;
}

.head-mob-slide-search {
    position: relative;
}

    .head-mob-slide-search .mob-slide-search-input {
        outline: 0;
        width: 100%;
        max-width: 100%;
        display: block;
        font-size: 1.2rem;
        position: relative;
        border: 1px solid #e3e0d3;
        background-color: #fff;
        padding: 13px 45px 13px 20px;
        height: 44px;
        border-radius: 50px;
        line-height: 1.2;
    }

        .head-mob-slide-search .mob-slide-search-input::placeholder {
            font-size: 10px;
            font-weight: 600;
            color: #a8a8a8;
            text-transform: uppercase;
        }

    .head-mob-slide-search .mob-slide-search-submit {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: #e9e9e9;
        width: 40px;
        height: 40px;
        border-radius: 50px;
        border: none;
        padding: 0;
        right: 0;
        color: #000;
        cursor: pointer;
        transition: background .25s linear;
    }

        .head-mob-slide-search .mob-slide-search-submit:hover {
            color: #000;
            background-color: var(--color-primary);
        }

        .head-mob-slide-search .mob-slide-search-submit i {
            display: inline-block;
            font-size: 1.6rem;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

/*--------- Contact ----------*/

.head-mob-slide-contact {
    padding-top: 20px;
}

    .head-mob-slide-contact .mob-slide-contact-row {
        font-size: 13px;
        color: var(--color-heading);
    }

        .head-mob-slide-contact .mob-slide-contact-row p {
            margin-bottom: 5px;
        }

        .head-mob-slide-contact .mob-slide-contact-row a {
            text-decoration: none;
        }

            .head-mob-slide-contact .mob-slide-contact-row a:hover {
                color: var(--color-primary);
            }

/*--------- Social ----------*/

.head-mob-slide-social {
    margin-top: 20px;
}

    .head-mob-slide-social .mob-nav-social-list {
        list-style: none;
        list-style-type: none;
        display: block;
        padding: 0;
        margin: 0;
    }

        .head-mob-slide-social .mob-nav-social-list .social-item {
            margin-right: 5px;
            display: inline-block;
        }

            .head-mob-slide-social .mob-nav-social-list .social-item a {
                width: 30px;
                height: 30px;
                line-height: 30px;
                background-color: #000;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
                text-decoration: none;
            }

                .head-mob-slide-social .mob-nav-social-list .social-item a:hover {
                    background-color: var(--color-primary);
                }

/*--------- Media ----------*/
@media(min-width: 1200px) {
    .head-mob-slide-nav,
    .head-mob-slide-menu {
        display: none;
    }
}

@media (max-width: 768px) {
    .head-mob-slide-nav,
    .head-mob-slide-menu {
        top: 60px;
    }
}

@media (min-width: 768px) {
    .head-mob-slide-nav,
    .head-mob-slide-menu {
        max-width: 500px;
        transition: all 0.4s;
    }
}

@media(max-width: 991px) and (min-width: 768px) {
    .head-mob-slide-nav .head-mob-slide-search .mob-slide-search-input {
        min-width: 260px;
    }
}
.footer-content {
    display: block;
    font-size: 1.4rem;
    color: #ffffff;
    padding: 90px 0 72px 0;
    background-color: #091017;
}

/*--------- Logo Content ----------*/

.footer-left-content {
    position: relative;
}

    .footer-left-content:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
        width: 1px;
        height: calc(100% - 10px);
        background-color: rgba(255, 255, 255, .1);
    }

    .footer-left-content .footer-left-pannel {
        position: relative;
        padding: 5px 0 0 0;
        height: 100%;
        max-width: 380px;
    }

        .footer-left-content .footer-left-pannel .footer-left-text {
            padding-top: 27px;
        }

            .footer-left-content .footer-left-pannel .footer-left-text a {
                color: #ffffff;
            }

                .footer-left-content .footer-left-pannel .footer-left-text a:hover {
                    color: var(--color-footer-link);
                }

        .footer-left-content .footer-left-pannel .footer-left-social {
            list-style: none;
            list-style-type: none;
            display: block;
            padding: 0;
            margin: 22px 0 0 0;
        }

            .footer-left-content .footer-left-pannel .footer-left-social li:not(:last-child) {
                margin-right: 5px;
            }

            .footer-left-content .footer-left-pannel .footer-left-social .footer-social-item {
                display: inline-block;
            }

                .footer-left-content .footer-left-pannel .footer-left-social .footer-social-item a {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.3rem;
                    border-radius: 100%;
                    width: 30px;
                    height: 30px;
                    border-radius: 100%;
                    background-color: #ffffff;
                    color: #222222;
                }

/*--------- Link Pannel ----------*/

.footer-links-pannel {
    position: relative;
    height: 100%;
}

    .footer-links-pannel .footer-links-title {
        font-size: 1.6rem;
        font-weight: 700;
        font-family: var(--font-family-primary);
        position: relative;
        text-transform: uppercase;
        margin-bottom: 25px;
    }

        .footer-links-pannel .footer-links-title .footer-links-btn {
            font-size: 16px;
            margin-left: auto;
            position: absolute;
            top: -7px;
            right: 0;
            cursor: pointer;
        }


    .footer-links-pannel .footer-links-content {
        margin-bottom: 30px;
    }

        .footer-links-pannel .footer-links-content .footer-links-list {
            list-style: none;
            list-style-type: none;
            display: block;
            padding: 0;
            margin: 0;
        }

            .footer-links-pannel .footer-links-content .footer-links-list li {
                margin: 0;
            }

                .footer-links-pannel .footer-links-content .footer-links-list li:not(:last-child) {
                    margin-bottom: 6px;
                }

                .footer-links-pannel .footer-links-content .footer-links-list li a,
                .footer-links-pannel .footer-links-content .footer-links-list li span {
                    color: #ffffff;
                    cursor: pointer;
                }

                    .footer-links-pannel .footer-links-content .footer-links-list li a:hover,
                    .footer-links-pannel .footer-links-content .footer-links-list li span:hover {
                        color: var(--color-footer-link);
                    }

/*--------- Contact ----------*/

.footer-contact {
    height: 100%;
    background-color: #060a0f;
    padding: 13px 0 13px 0;
}
    .footer-contact .footer-contact-pannel {
        font-size: 1.4rem;
        width: 33.333333%;
    }

        .footer-contact .footer-contact-pannel .footer-contact-icon {
            min-width: 30px;
            width: 30px;
            text-align: center;
            margin:8px 10px 0 0;
        }

            .footer-contact .footer-contact-pannel .footer-contact-icon i {
                font-size: 1.8rem;
            }

        .footer-contact .footer-contact-pannel .footer-contact-text {
            font-weight:700;
        }

        .footer-contact .footer-contact-pannel .footer-contact-text a {
            color: var(--color-footer-link);
            font-size: 1.8rem;
        }

/*--------- Cookie Consent ----------*/

.footer-cookie-consent-content {
    position: fixed;
    z-index:1000;
    bottom: 0;
    width: 100%;
    height: 150px;
    background: #fff;
    border-top: 3px solid #f3f3f3;
    padding: 40px 10px 0 10px;
    text-align: center;
}

@media (max-width: 1199px) {
    .footer-contact {
        flex-direction: column;
    }

        .footer-contact .footer-contact-pannel {
            width: 100%;
            padding: 15px 0 15px 0;
        }
}

@media(max-width: 992px) {
    .footer-left-content:after {
        display: none;
    }
}

@media (max-width: 575px) {
    .footer-left-content .footer-left-pannel {
        margin-bottom: 30px;
    }

    .footer-links-pannel .footer-links-content {
        display: none;
    }
}
:root {
    --spacing-page-heading-top: 100px;
    --spacing-page-heading-bottom: 90px;
    --spacing-page-breacrumb-df-top: 23px;
    --spacing-page-breacrumb-df-bottom: 23px;
    --color-heading-default: #0d2235;
    --color-breadcrumb-dot: #505157;
    --color-border: #eaeaea;
    --color-border-rgb: 234, 234, 234;
}
/******** Validation **********/

.field-validation-valid, .validation-summary-valid {
    display: none
}

.field-validation-error, .validation-summary-errors {
    color: #b94a48
}

input.input-validation-error {
    border: 1px solid #b94a48
}

input[type=checkbox].input-validation-error {
    border: 0
}

select.input-validation-error {
    border: 1px solid #b94a48
}

textarea.input-validation-error {
    border: 1px solid #b94a48
}

/*--------- Input ----------*/

input[type='radio'] {
    margin-top: 5px;
    height: 20px;
    width: 20px;
}

    input[type='radio']:before {
        border-radius: 50%;
        content: '';
        display: block;
        height: 60%;
        margin: 20% auto;
        width: 60%;
    }

    input[type='radio']:checked:before {
        background: var(--color-primary);
        color: var(--color-primary);
    }

.radio-label {
    display: inline-block;
    padding-left: 5px;
    top: -5px;
    position: relative;
}

.default-input,
.default-textarea,
.default-select {
    display: block;
    width: 100%;
    border: 1px solid #e3e0d3;
    background-color: #fff;
    max-width: 100%;
    line-height: 1.2;
    font-family: inherit;
    padding: 13px 15px;
    border-color: var(--color-border);
    border-radius: 5px;
    color: var(--color-body-text);
    font-size: 13px;
}

    .default-input:focus,
    .default-textarea:focus,
    .default-select:focus {
        outline: none;
        border-color:var(--color-border);
        box-shadow: none;
    }


    .default-input::placeholder,
    .default-textarea::placeholder {
        font-size: 1rem;
        text-transform: uppercase;
        font-weight: 500;
        color: #a1a1a1;
    }

/******** Checkbox **********/

.checkbox {
    padding-left: 5px;
}

    .checkbox label {
        display: inline-block;
        padding-left: 5px;
        position: relative;
    }

        .checkbox label:before {
            background-color: #fff;
            border: 1px solid #cccccc;
            border-radius: 3px;
            content: "";
            display: inline-block;
            height: 17px;
            left: 0;
            margin-left: -20px;
            position: absolute;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            width: 17px;
        }

        .checkbox label:after {
            color: #555555;
            display: inline-block;
            font-size: 10px;
            height: 16px;
            left: 0;
            margin-left: -20px;
            padding-left: 4px;
            position: absolute;
            top: 0;
            width: 16px;
        }

    .checkbox input[type="checkbox"] {
        opacity: 0;
    }

        .checkbox input[type="checkbox"]:focus + label:before {
            outline: thin dotted;
            outline-offset: -2px;
        }

        .checkbox input[type="checkbox"]:checked + label:after {
            content: "\f00c";
            font-family: "Font Awesome 7 Free";
        }

        .checkbox input[type="checkbox"]:disabled + label {
            opacity: 0.65;
        }

            .checkbox input[type="checkbox"]:disabled + label:before {
                background-color: #eeeeee;
                cursor: not-allowed;
            }

    .checkbox.checkbox-circle label:before {
        border-radius: 50%;
    }

    .checkbox.checkbox-inline {
        margin-top: 0;
    }

.checkbox-primary input[type="checkbox"]:checked + label:before {
    background-color: #126DBA;
    background-color: #1270BF;
}

.checkbox-primary input[type="checkbox"]:checked + label:after {
    color: #fff;
}

.checkbox-danger input[type="checkbox"]:checked + label:before {
    background-color: #D43F3A;
    background-color: #BC2E29;
}

.checkbox-danger input[type="checkbox"]:checked + label:after {
    color: #fff;
}

.checkbox-info input[type="checkbox"]:checked + label:before {
    background-color: #51BCDC;
    background-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:checked + label:after {
    color: #fff;
}

.checkbox-warning input[type="checkbox"]:checked + label:before {
    background-color: #EFA63E;
    background-color: #EFA234;
}

.checkbox-warning input[type="checkbox"]:checked + label:after {
    color: #fff;
}

.checkbox-success input[type="checkbox"]:checked + label:before {
    background-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:checked + label:after {
    color: #fff;
}

/******** Submit **********/

/*  CENTRAGE (2026-11-03) : la hauteur fixe (50px) ne centrait le texte que
    sur un <button> (centrage natif du navigateur) ; sur un <a>, texte colle
    en haut a gauche, sans marge — bug vu sur confirm / copy / fiche. Le
    bouton se centre lui-meme, quelle que soit la balise. */
.default-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 0 2rem;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    font-size: 1.2rem;
    font-weight: 700;
    white-space: normal;
    text-transform: uppercase;
    border-radius: 3px;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.35s ease;
    height: 50px;
    min-width: 50px;
}
    .default-btn:focus {
        outline: 0;
        box-shadow: none;
    }
.default-btn-group {
    width: auto;
    height: auto;
}

.default-link {
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    border: none;
/*    min-width: 250px;
    padding-top: 2px;*/
    height: 48px;
    font-size: 10px;
    font-weight: 700;
    margin: 5px;
    font-size: 1.4rem;
    font-weight: 700;
    white-space: normal;
    border-radius: 40px;
    padding: 0 30px;
}
    .default-link i {
        margin-right: 5px;
        font-size: 1.4rem;
    }
    .default-link:focus {
        outline: 0;
        box-shadow: none;
    }

    .default-btn.default-btn-black,
    .default-link.default-btn-black {
        color: #fff;
        background-color: #000;
    }

        .default-btn.default-btn-black:hover,
        .default-link.default-btn-black:hover {
            color: #fff;
            background-color: var(--color-default);
        }

    .default-btn.default-btn-grey,
    .default-link.default-btn-grey {
        background-color: var(--color-button);
        color: var(--color-button-text);
    }

        .default-btn.default-btn-grey:hover,
        .default-link.default-btn-grey:hover {
            color: var(--color-button-text-hover);
            background-color: var(--color-button-hover);
        }

    .default-btn.default-btn-red,
    .default-link.default-btn-red {
        color: #fff;
        background-color: #dc3545;
    }

        .default-btn.default-btn-red:hover,
        .default-link.default-btn-red:hover {
            color: #fff;
            background-color: var(--color-default);
        }

    .default-btn.default-btn-green,
    .default-link.default-btn-green {
        color: #fff;
        background-color: var(--color-default);
    }

        .default-btn.default-btn-green:hover,
        .default-link.default-btn-green:hover {
            color: #fff;
            background-color: #000;
        }

    .default-btn.default-btn-orange,
    .default-link.default-btn-orange {
        color: #fff;
        background-color: #ff9900;
    }

        .default-btn.default-btn-orange:hover,
        .default-link.default-btn-orange:hover {
            color: #fff;
            background-color: var(--color-default);
        }

.btn-theme-primary {
    color: #fff;
    background-color: var(--color-default);
}
    .btn-theme-primary:hover {
        color: #fff;
        background-color: #000;
    }

/*--------- Page Title ----------*/
.page-breadcrumb-df-section {
    padding-top: var(--spacing-page-breacrumb-df-top);
    padding-bottom: var(--spacing-page-breacrumb-df-bottom);
    border-top: 1px solid var(--color-border);
}

.page-title-section {
    padding-top: var(--spacing-page-heading-top);
    padding-bottom: var(--spacing-page-heading-bottom);
    position: relative;
    background-size: cover;
}

    .page-title-section .page-title {
        color: var(--color-heading-default);
        font-size: 3rem;
        font-weight: 800;
        text-transform: uppercase;
    }

/*--------- Breadcrumb ----------*/

.page-breadcrumb-box {
    position: relative;
    list-style: none;
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;
    padding:0;
}

    .page-breadcrumb-box .list-inline-item {
        display: inline-block;
        font-size: 13px;
    }

        .page-breadcrumb-box .list-inline-item:not(:last-child) {
            margin-right: 13px;
            padding-right: 11px;
            position: relative;
        }

            .page-breadcrumb-box .list-inline-item:not(:last-child):before {
                content: "";
                width: 4px;
                height: 4px;
                transform: rotate(45deg) translateY(-50%);
                position: absolute;
                right: -2px;
                top: 48%;
                border-radius: 1.5px;
                background-color: var(--color-breadcrumb-dot);
            }

        .page-breadcrumb-box .list-inline-item a {
            transition: all .2s;
            text-decoration: none;
            touch-action: manipulation;
        }

            .page-breadcrumb-box .list-inline-item a:hover {
                color: var(--color-primary);
            }

/*--------- Title Item ----------*/

.page-title-item-box1 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

    .page-title-item-box1 .title-txt {
        font-family: var(--font-family-primary);
        font-size: 2rem;
        font-weight: 700;
        position: relative;
        display: block;
        text-transform: uppercase;
        color: var(--color-heading);
    }

.page-title-item-box2 {
    padding-top: 3rem;
    margin-bottom: 3rem;
    border-top-left-radius: 10px;
    overflow: hidden;
    border-bottom: 2px solid var(--color-default);
}

    .page-title-item-box2 .title-box-transform {
        padding: 21px 26px 21px 30px;
        min-width: calc(20% - 80px);
        margin-bottom: 0;
        position: relative;
        display: inline-block;
        line-height: 1;
        background-color: var(--color-default);
        position: relative;
    }

        .page-title-item-box2 .title-box-transform:before {
            content: "";
            position: absolute;
            width: 8rem;
            height: 101%;
            top: 0;
            left: calc(100% - 47px);
            transform: skewX(38deg);
            background-color: var(--color-default);
        }

        .page-title-item-box2 .title-box-transform .title-txt {
            font-size: 2rem;
            color: #ffffff;
            font-family: var(--font-family-primary);
            font-weight: 700;
            position: relative;
            display: block;
            text-transform: uppercase;
        }

.page-title-item-small {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

    .page-title-item-small .title-txt {
        font-family: var(--font-family-primary);
        font-size: 1.6rem;
        font-weight: 500;
        position: relative;
        display: block;
        text-transform: uppercase;
        color: var(--color-heading);
    }

/*--------- Page Hero Hub ----------*/
/* Component reutilisable — Blog Category, Univers Theme/Page, Info Pantone etc.
   Layout responsive base sur Bootstrap grid (row + col-md-*) — pas de flexbox custom.
   Variants :
     .page-hero-hub-inline : image + (H1 + text) cote a cote (variant par defaut, layout Bootstrap col-lg-3 / col-lg-9)
     .page-hero-hub-poster : image full-width au-dessus (reserve hub visuel fort)
     .page-hero-hub-text-only : pas d'image, texte pleine largeur */

.page-hero-hub {
    /* base — pas de style par defaut, tout est via les elements enfants */
}

    /* Alignement vertical top au niveau row (Bootstrap row) */
    .page-hero-hub.row {
        align-items: flex-start;
    }

/* Variant POSTER : image full-width en top */
.page-hero-hub-poster .page-hero-hub-media {
    width: 100%;
    margin-bottom: 2rem;
}

/* Elements communs — content wrapper (H1 + short desc a droite de l'image)
   padding-left 20px pour aerer entre image et texte. Reset a 0 en mobile 767 (stack full width, indent inutile). */
.page-hero-hub-content {
    padding-left: 20px;
}

/* Elements communs — H1 wrapper */
.page-hero-hub-title {
    padding-bottom: 1.5rem;
}

    .page-hero-hub-title .title-txt {
        font-family: var(--font-family-primary);
        font-size: 2rem;
        font-weight: 700;
        display: block;
        text-transform: uppercase;
        color: var(--color-heading);
    }

/* Elements communs — Media wrapper (image cliquable lightbox) */
.page-hero-hub-media {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

    .page-hero-hub-media a {
        display: block;
        cursor: zoom-in;
    }

    .page-hero-hub-media img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    /* Variante Univers : image carree 1:1 (source Fal.AI square_hd, aligne format natif) */
    .page-hero-hub-square .page-hero-hub-media img {
        aspect-ratio: 1 / 1;
    }

    .page-hero-hub-media a:hover img {
        transform: scale(1.02);
    }

/* Stack (< lg 992px) — au stack le content passe sous l'image :
   - padding-top 20 sur le H1 pour separer visuellement de l'image au-dessus
   - reset padding-left content (indent inutile en full width stack) */
@media (max-width: 991px) {
    .page-hero-hub-title .title-txt {
        padding-top: 20px;
    }

    .page-hero-hub-content {
        padding-left: 0;
    }
}

/*--------- Page Image ----------*/

.page-banner-content {
    overflow: hidden;
    position: relative;
    height: 600px;
}

    .page-banner-content img {
        border-radius: 20px;
    }

    .page-banner-content iframe {
        border-radius: 20px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

.page-content-image img {
    object-fit: cover;
}

/*--------- Image ----------*/

.img-load {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #f5f5f5;
    background-image: url("../../theme/icon/pulse.svg");
    background-position: center;
    background-repeat: no-repeat;
    -o-object-fit: cover;
    object-fit: cover;
}

.img-style-default {
    border-radius: var(--border-radius-product-image);
    border: 1px solid var(--color-product-border);
}

.img-loader-default {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #f5f5f5;
    background-image: url("../../theme/icon/pulse.svg");
    background-position: center;
    background-repeat: no-repeat;
    -o-object-fit: cover;
    object-fit: cover;
}

.img-hover-effect-1 {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

    .img-hover-effect-1:after {
        content: "";
        display: inline-block;
        width: 150%;
        height: 80%;
        position: absolute;
        top: -75%;
        right: 32%;
        background: rgba(255,255,255,.15);
        transform: skewY(-50deg);
        transition: all 0.35s ease;
    }

    .img-hover-effect-1:hover:after {
        top: 120%;
        right: -75%;
        transition: all 0.35s ease;
    }

/*--------- Text Toggle ----------*/

.page-txt-toggle-box .txt-toggle-box {
    position: relative;
    font-size: 1.4rem;
    max-height: 130px;
    overflow: hidden;
}

    .page-txt-toggle-box .txt-toggle-box:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 110px;
        background: linear-gradient(to top, rgba(242, 242, 242, 90%), rgba(242, 242, 242, 10%));
    }

    .page-txt-toggle-box .txt-toggle-box.open {
        max-height: 100%;
    }

        .page-txt-toggle-box .txt-toggle-box.open:before {
            display: none;
        }

.page-txt-toggle-box .btn-txt-toggle-box {
    font-size: 10px;
    font-weight: 600;
    margin-top: 20px;
    text-transform: uppercase;
    text-align: center;
}

    .page-txt-toggle-box .btn-txt-toggle-box span {
        cursor: pointer;
    }

        .page-txt-toggle-box .btn-txt-toggle-box span:hover {
            color: var(--color-primary);
        }

/*--------- Text Defalt ----------*/

.page-txt-default h2,
.page-txt-default h3,
.page-txt-default h4,
.page-txt-default h5,
.page-txt-default h6 {
    padding-top: 2rem;
    margin-bottom: 2rem;
    font-family: var(--font-family-primary);
    font-size: 1.8rem;
    font-weight: 500;
    position: relative;
    display: block;
    color: #222222;
}

.page-txt-default ul {
    margin-top: 0;
    margin-bottom: 0;
}

    .page-txt-default ul li {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

.page-txt-default a:hover {
    color: var(--color-primary);
}

/*--------- Raiting Stars ----------*/

.raiting-star {
    font-size: 16px;
    display: inline-block;
    font-style: normal;
    padding-right: 5px;
}

    .raiting-star.star-full:before {
        content: "\f005";
        font-family: "Font Awesome 7 Free";
    }

    .raiting-star.star-half:before {
        content: "\f089";
        font-family: "Font Awesome 7 Free";
    }


/*--------- Paging ----------*/

.page-paging-summary {
    margin: 15px 0 0 0;
}

.page-paging-summary span {
    font-weight:700;
}

.page-paging-pages {
    position: relative;
    list-style: none;
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

    .page-paging-pages li {
        display: inline-block;
        padding: 5px;
    }

        .page-paging-pages li a,
        .page-paging-pages li span {
            height: 43px;
            border: 1px solid #c8c8c8;
            background: #fff;
            padding: 0 29px;
            display: -webkit-inline-box;
            display: -moz-inline-box;
            display: inline-box;
            display: -moz-inline-flex;
            display: inline-flex;
            -moz-align-items: center;
            -ms-align-items: center;
            align-items: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            justify-content: center;
            -ms-flex-pack: center;
            font-size: 1.2rem;
            font-weight: 500;
            border-radius: 5px;
            cursor:pointer;
        }

            .page-paging-pages li a:hover,
            .page-paging-pages li span:hover {
                background-color: var(--color-default);
                border-color: var(--color-default);
                color: #fff;
            }

            .page-paging-pages li a.active,
            .page-paging-pages li span.active {
                background-color: var(--color-default);
                border-color: var(--color-default);
                color: #fff;
            }


/******** Tab Nav **********/

.nav-tabs-custom {
    position: relative;
    margin-bottom: 50px;
    border-bottom: 1px solid var(--color-border);
}

    .nav-tabs-custom li:not(:last-child) {
        margin-right: 2rem;
    }

    .nav-tabs-custom li button {
        font-size: 1.6rem;
        font-weight: 800;
        line-height: 50px;
        color: #b7b7b7;
        display: block;
        text-transform: uppercase;
        white-space: nowrap;
        position: relative;
        font-family: var(--font-family-primary);
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 0 !important;
    }

        .nav-tabs-custom li button.active,
        .nav-tabs-custom li button:hover {
            color: var(--color-heading);
        }

        .nav-tabs-custom li button:after {
            content: "";
            display: block;
            width: 0%;
            height: 3px;
            background: var(--color-heading);
            position: absolute;
            bottom: -2px;
            right: 0;
            transition: all 0.3s linear;
        }

        .nav-tabs-custom li button.active:after,
        .nav-tabs-custom li button:hover:after {
            width: 100%;
            left: 0;
            right: initial;
        }

/******** Tab Nav — Links variant (v2) **********/
/* Version <a href> — full page nav (chaque tab = 1 URL indexable SEO)
   vs .nav-tabs-custom qui utilise <button> + JS toggle (SPA-like).
   Reutilisable : Blog Category, Univers Theme/Page, futures pages hub. */

.nav-tabs-links {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 30px;
}

.nav-tabs-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

    .nav-tabs-links-list li {
        margin: 0;
    }

.nav-tabs-link {
    display: inline-block;
    padding: 14px 24px;
    color: var(--color-heading);
    font-weight: 600;
    font-size: 1.4rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

    .nav-tabs-link:hover {
        color: var(--color-primary);
    }

    .nav-tabs-link.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

@media (max-width: 767.98px) {
    .nav-tabs-link {
        padding: 10px 16px;
        font-size: 1.3rem;
    }
}


/******** Loader **********/

.loader-spiner {
    align-items: center;
    display: none;
    display: flex;
    height: 120px;
    justify-content: center;
    margin: 10px auto;
    position: relative;
    text-align: center;
    width: 120px;
}

    /* Anneau AFFINE (2026-09-24) : la bordure passe de 16 px a 8 px et le gris
       de #ccc a #ececec. A 16 px sur 120 px de diametre, l'anneau etait plus
       epais que le vide qu'il entoure — il se lisait comme un disque barbouille
       plutot que comme une rotation. Plus fin, le mouvement se voit.
       Diametre, couleur verte et duree inchanges : c'est le meme loader, pas un
       nouveau. Le positionnement de .loader-spiner span reste cale sur 120 px. */
    .loader-spiner:before {
        animation: rotation 1s infinite linear;
        border-color: var(--color-primary) #ececec #ececec;
        border-radius: 100%;
        border-style: solid;
        border-width: 8px;
        content: "";
        height: 120px;
        left: 0;
        position: absolute;
        top: 0;
        width: 120px;
        will-change: transform;
    }

    .loader-spiner span {
        color: var(--color-primary);
        font-size: 14px;
        font-weight: 700;
        left: calc(50% - 57px);
        position: absolute;
        text-align: center;
        top: calc(50% - 10px);
        width: 120px;
    }


.loader-logo {
    height: 300px;
    background-image: url("../../../img/loader/logo.webp");
    /*background-size: cover;*/ /* Stretches image to cover the entire container */
    background-position: center; /* Centers the image within the container */
    background-repeat: no-repeat; /* Prevents image tiling */
    /* Use Bootstrap flexbox classes to center the content */
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    /* Optional: Add an overlay (mask) for better text readability */
    position: relative;
    color: white; /* Ensures text is visible */
}

.progress-bar-box {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

    .progress-bar-box .progress-bar-l17 {
        width: 160px;
        height: 30px;
        -webkit-mask: radial-gradient(circle closest-side,#000 94%,#0000) left/20% 100%;
        background: linear-gradient(#0fb930 0 0) left/0% 100% no-repeat #ddd;
        animation: l17 2s infinite steps(6);
    }

/*--------- Tooltip  ----------*/

.tooltip-icon {
    margin:5px;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1.6rem;
}

.tooltip-inner {
    font-size: 1.3rem;
    max-width: 260px;
    background-color: var(--bg-item-primary);
    color: var(--color-heading);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.08);
}


/*--------- Error  ----------*/

.err-title {
    color: #0d2235;
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
}

/******** Dropzone **********/

/*  Zone de depot — refonte 2026-09-26.

    Alignee sur celle de la maquette (.mk2-dz) : ce n'est pas un style invente
    pour l'occasion, c'est la reference moderne que le site possede deja.

    Ce qui a ete corrige, et pourquoi :

      box-shadow: 3px 3px 6px   ombre DECALEE vers le bas-droite, la signature
                                d'une autre epoque. Une zone de depot se
                                signale par sa bordure, pas par du relief.
      display: table-cell       sans tableau parent — ca marchait par accident
                                et empechait tout centrage moderne.
      font-size: 8pt            des POINTS, unite d'imprimerie. Environ 10,7 px,
                                sous le minimum lisible du site.
      vertical-align: central   VALEUR INVALIDE, ignoree en silence depuis
                                toujours. C'est « middle ».
      un <table> par fichier    pour une liste. Voir DropZoneMultifiles.

    Et ce qui MANQUAIT : aucun etat. Ni survol, ni retour pendant le
    glissement. Rien ne disait que la zone etait active, ni qu'un fichier
    etait au-dessus d'elle — le seul moment ou l'utilisateur a besoin d'etre
    rassure.

    La classe .dropzone-box est conservee : dropzone.js et les quatre ecrans
    consommateurs s'y accrochent. Seul le rendu change. */
/*  LA ZONE CLIQUABLE EST .dropzone-text, PAS .dropzone-box.

    Dropzone s'attache a l'element interieur (data-name=
    "ClientUploadDropZoneUpload"). Le cadre, lui, n'est qu'un habillage.

    Consequence a ne jamais perdre de vue : tout pixel du cadre qui n'est pas
    couvert par l'element interieur est MORT au clic. Une premiere version
    centrait le contenu dans la boite — l'element ne faisait alors que la
    taille de son texte, et 80 % du cadre ne repondait pas.

    D'ou la repartition : la boite ne porte QUE la bordure et le fond, sans
    padding ni hauteur. L'interieur porte la taille, le padding et le
    centrage, et s'etire pour remplir. */
.dropzone-box {
    display: flex;
    border: 2px dashed #cfe8d6;
    border-radius: 10px;
    background: #fbfdfc;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.dropzone-box:hover {
    border-color: var(--color-primary);
    background: #f4fbf6;
}

/* Pendant le glissement d'un fichier AU-DESSUS de la zone. Dropzone.js pose
   « dz-drag-hover » sur l'element. C'est l'etat le plus utile des trois : il
   confirme qu'on peut lacher. */
.dropzone-box.dz-drag-hover {
    border-color: var(--color-primary);
    border-style: solid;
    background: #eef9f1;
}

.dropzone-text {
    /* S'etire pour occuper TOUT le cadre : c'est lui qui recoit le clic.
       Le padding est ici et non sur la boite, sinon il creerait une bande
       morte tout autour. */
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 120px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: var(--color-text);
}

.dropzone-ico {
    font-size: 2.6rem;
    line-height: 1;
    color: var(--color-primary);
}

.dropzone-lead { font-weight: 600; }

/* Les contraintes, derivees de la configuration par dropzone.js. En gris et
   plus petit : on les lit APRES avoir compris ce qu'on fait ici. */
.dropzone-hint {
    color: #8a8c93;
    font-size: 1.2rem;
    line-height: 1.35;
}

/*  Fichiers deposes — une LIGNE par fichier, plus un tableau.
    Le nom prend la place restante et se tronque ; icone et corbeille gardent
    la leur. Un nom long ne pousse plus la corbeille hors du cadre. */
/*  FOND PLEIN ET BORDURE — pas le rail.

    Le rail (filets estompes + halo) tient sur du blanc et seulement sur du
    blanc : son halo est une ombre a 3 % d'opacite. Ce partial sert quatre
    ecrans, dont deux posent leur formulaire sur fond gris, ou il devenait
    invisible.

    L'alternative etait un attribut de fond a declarer par l'appelant
    (data-color-files="white|grey"). Ecartee : quatre appelants a tenir a
    jour, et un cinquieme qui oublie de le poser un jour. Une ligne opaque n'a
    pas de reglage — elle se detache de la meme facon partout.

    Le blanc n'est pas le fond de la page, c'est le fond de la LIGNE : c'est
    justement ce qui la fait exister sur gris. */
.dropzone-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-top: 6px;
    background-color: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
}

.dropzone-file-ico {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: contain;
}

/*  VIGNETTE REELLE — le fichier depose, pas le logo de son format.
    Recadree en « cover » et sur fond damier clair : une image a transparence
    (un logo PNG, le cas le plus frequent ici) doit se distinguer du blanc de
    la page, sinon elle parait vide. */
.dropzone-file.has-thumb .dropzone-file-ico {
    object-fit: cover;
    border: 1px solid #ededed;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #f4f4f4 25%, transparent 25%, transparent 75%, #f4f4f4 75%),
        linear-gradient(45deg, #f4f4f4 25%, transparent 25%, transparent 75%, #f4f4f4 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
}

/* Icone de TYPE (.ai, .pdf, .eps, .psd) : le navigateur ne sait pas les
   rendre, l'icone est alors la seule information disponible. */
.dropzone-file-ico.is-type-ico {
    object-fit: contain;
    border: 0;
    background: none;
}

.dropzone-file-meta {
    flex: 1 1 auto;
    min-width: 0;          /* sans lui, flex refuse de tronquer l'enfant */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropzone-file-name {
    color: #222222;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropzone-file-size { color: #8a8c93; font-size: 1.2rem; }

/*  Corbeille EN PREMIERE COLONNE et SANS CADRE.

    En fin de ligne, sa position suivait la longueur du nom de fichier : sur
    trois fichiers, aucune corbeille au meme endroit que la precedente, et il
    faut viser a chaque fois. En tete, tout ce qui la precede a une largeur
    fixe — elles forment une colonne.

    Meme bouton que dans l'editeur de maquette : filet et icone rouges au
    repos, aplat rouge et icone blanche au survol. Le rouge AU REPOS est
    volontaire — c'est la seule action irreversible de la ligne, elle doit se
    distinguer AVANT le clic, pas au moment ou on la survole.

    Une version precedente etait sans cadre, avec un simple fond dilue au
    survol : trop faible, la cible ne se lisait pas.

    NOTE — dans la maquette, le filet au repos est gris (.mk2-btn-ico) et
    seule l'icone est rouge. Ici il est rouge des le repos, parce que la ligne
    ne contient aucun autre bouton dont il faudrait se distinguer. */
.dropzone-file-del {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #c62828;
    border-radius: 8px;
    background: #fff;
    color: #c62828;
    cursor: pointer;
    line-height: 1;
    transition: background-color .12s ease, color .12s ease;
}

.dropzone-file-del:hover {
    background: #c62828;
    color: #fff;
}

.dropzone-file-del:focus-visible {
    outline: 2px solid #c62828;
    outline-offset: 2px;
}

@media (min-width: 768px) and (max-width: 1199px) {

    .page-title-section {
        padding-top: calc(var(--spacing-page-heading-top) * .7);
        padding-bottom: calc(var(--spacing-page-heading-bottom) * .7);
    }
}

@media (max-width: 767px) {
    
    .page-title-section {
        padding-top: min(var(--spacing-page-heading-top) * .4, 30px);
        padding-bottom: min(var(--spacing-page-heading-bottom) * .4, 30px);
    }

    .page-title-item-box1 .title-txt,
    .page-title-item-box1 .title-txt {
        font-size: 1.8rem;
    }

    .page-title-section .page-title {
        font-size: 2.2rem;
    }
}

/*--------- Container background image (utility) ----------*/
/* Extension du .container standard : image de fond cover, URL en inline style
   (ex: style="background-image:url('../../theme/css/')") pour eviter 1 classe par image. */

.container-img-bg {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    /* Custom props pour override par variant saisonnier (ecolo / summer / autumn / winter / spring).
       Defaut = texte blanc + shadow noire (compatible fonds sombres/mid). */
    --hero-title-color:   #ffffff;
    --hero-tagline-color: rgba(255, 255, 255, 0.9);
    --hero-text-shadow:   0 2px 6px rgba(0, 0, 0, 0.35);
    --hero-tagline-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

    /* Titre pose sur .container-img-bg — texte blanc par defaut, override via --hero-title-color.
       Doctrine 2026-08-03 : text-shadow droppe → titres flat partout sauf hero (qui garde son CSS dedie).
       Rationale : uniformite visuelle, evite l'oscillation flat/shadow au scroll. */
    .container-img-bg .bg-img-title {
        font-family: var(--font-family-primary);
        font-size: 2.4rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--hero-title-color);
        text-align: left;
        display: block;
        margin-bottom: 1.5rem;
    }

    /* Texte intro pose sur .container-img-bg — variabilise idem. */
    .container-img-bg .bg-img-txt {
        color: var(--hero-tagline-color);
        font-size: 1.4rem;
        line-height: 1.6;
        margin-bottom: 2.5rem;
    }

/*--------- Variants saisonniers du .container-img-bg (override custom props) ----------*/

/* Summer : texte blanc + shadow bleue profonde (contraste ciel/plage). */
.container-img-bg--summer {
    --hero-title-color:    #ffffff;
    --hero-tagline-color:  rgba(255, 255, 255, 0.95);
    --hero-text-shadow:    0 2px 8px rgba(15, 46, 80, 0.55);
    --hero-tagline-shadow: 0 1px 4px rgba(15, 46, 80, 0.45);
}

/* Autumn : texte crème warm shadow brune (feuilles/bois). */
.container-img-bg--autumn {
    --hero-title-color:    #fff8e7;
    --hero-tagline-color:  rgba(255, 248, 231, 0.9);
    --hero-text-shadow:    0 2px 6px rgba(78, 40, 15, 0.5);
    --hero-tagline-shadow: 0 1px 4px rgba(78, 40, 15, 0.4);
}

/* Winter : texte blanc glacier + shadow bleu-nuit (neige/fetes fin annee). */
.container-img-bg--winter {
    --hero-title-color:    #ffffff;
    --hero-tagline-color:  rgba(255, 255, 255, 0.92);
    --hero-text-shadow:    0 2px 8px rgba(15, 23, 60, 0.6);
    --hero-tagline-shadow: 0 1px 4px rgba(15, 23, 60, 0.5);
}

/* Spring : texte blanc + shadow verte (bourgeons/fleurs). */
.container-img-bg--spring {
    --hero-title-color:    #ffffff;
    --hero-tagline-color:  rgba(255, 255, 255, 0.95);
    --hero-text-shadow:    0 2px 6px rgba(20, 60, 30, 0.5);
    --hero-tagline-shadow: 0 1px 4px rgba(20, 60, 30, 0.4);
}

/* Dark-text : override pour fond clair (image majoritairement claire). */
.container-img-bg--dark-text {
    --hero-title-color:    #0f172a;
    --hero-tagline-color:  rgba(15, 23, 42, 0.85);
    --hero-text-shadow:    0 1px 3px rgba(255, 255, 255, 0.6);
    --hero-tagline-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/*--------- Image Header (Univers + reusable pattern) ----------*/

.image-header {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

    .image-header img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

@media (max-width: 767px) {
    .image-header {
        border-radius: 8px;
    }

        .image-header img {
            border-radius: 8px;
        }
}

/******** Rail — démarcateur de section **********/
/* Deux filets d'un pixel qui s'estompent aux extrémités, plus un halo central
   très dilué. C'est le motif de séparation du site : il groupe ce qu'il
   encadre sans dessiner de cadre, donc sans faire boîte dans une boîte.

   POSÉ ICI, EN GLOBAL, parce qu'il existait déjà en trois copies —
   .calc2-sec-head (calculateur), .mk2-row et .mk2-side-title (maquette) — avec
   la même construction recopiée à chaque fois et des noms de variables
   différents. Une quatrième copie pour le formulaire aurait figé l'habitude.

   Réglable par variables, sans réécrire le motif :
     --rail-line        teinte des filets (format « R G B », sans virgules)
     --rail-glow        teinte du halo
     --rail-glow-alpha  intensité du halo
     --rail-fade        longueur de l'estompe aux extrémités

   L'estompe se règle selon la LARGEUR du conteneur : dans une colonne étroite,
   un fondu court fait paraître les filets pleins et ils entrent en concurrence
   avec les bordures voisines. D'où .rail-sm.

   À FAIRE un jour : faire adopter cette définition aux trois copies
   existantes. Elles sont identiques au nom des variables près. */
.rail {
    /*  TEINTE NAVY, PAS APLAT NAVY — aligné sur le calculateur le 2026-10-03.

        Les valeurs étaient neutres (226 226 226, halo noir) : le motif
        fonctionnait mais ne disait rien du site, et il cohabitait mal avec les
        rails du calculateur, déjà désaturés vers le navy. Deux démarcateurs de
        teintes différentes sur le même écran se lisent comme deux systèmes.

        Reprises telles quelles de --c2-rail-* : le navy franc du site (#000954)
        avait été essayé puis abandonné là-bas, et le motif n'avait pas à
        refaire l'arbitrage. Le problème n'était pas la teinte mais la VALEUR —
        un aplat sombre dans une page claire devient le point le plus contrasté
        de l'écran, et l'effet croît avec le nombre d'occurrences.

        D'où des filets clairs simplement désaturés vers le navy, et un halo
        navy très dilué : l'identité sans la dominance. */
    --rail-line: 182 192 232;
    --rail-glow: 0 9 84;
    --rail-glow-alpha: 0.07;
    --rail-fade: 12%;

    padding-block: 14px;

    background-image:
        linear-gradient(to right,
            rgb(var(--rail-line) / 0) 0%,
            rgb(var(--rail-line) / 1) var(--rail-fade),
            rgb(var(--rail-line) / 1) calc(100% - var(--rail-fade)),
            rgb(var(--rail-line) / 0) 100%),
        linear-gradient(to right,
            rgb(var(--rail-line) / 0) 0%,
            rgb(var(--rail-line) / 1) var(--rail-fade),
            rgb(var(--rail-line) / 1) calc(100% - var(--rail-fade)),
            rgb(var(--rail-line) / 0) 100%),
        radial-gradient(60% 80% at 50% 50%,
            rgb(var(--rail-glow) / var(--rail-glow-alpha)) 0%,
            rgb(var(--rail-glow) / calc(var(--rail-glow-alpha) * .62)) 56%,
            rgb(var(--rail-glow) / 0) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 1px, 100% 100%;
    background-position: top, bottom, center;
}

/* Variante étroite : colonne latérale, carte, bloc interne. */
.rail-sm {
    --rail-fade: 18%;
    padding-block: 9px;
}

/* ---------- Variante SÉLECTIONNÉE : le même rail, en vert ----------
   Trois variables, rien d'autre — la GÉOMÉTRIE NE BOUGE PAS. C'est la règle du
   motif : seule la teinte dit l'état, jamais l'épaisseur ni l'espacement. Un
   rail qui changerait de hauteur à la sélection ferait sauter tout ce qui le
   suit, et l'œil lirait le déplacement avant la couleur.

   Le vert est celui des sélections du site (#0fb930), le même que le filet des
   vignettes et des paliers : une seule grammaire de sélection partout.

   Existait déjà en copie locale sous .mk2-row.is-on (maquette). Posée ici, la
   variante devient disponible partout sans réécrire les trois dégradés. */
.rail.is-on {
    --rail-line: 15 185 48;
    --rail-glow: 15 185 48;
    --rail-glow-alpha: 0.06;
}

/* ---------- Le TITRE porte le retrait, pas le rail ----------
   Un rail encadre une bande ; ce qu'elle contient décide de son propre
   alignement. Poser le padding latéral sur le rail l'aurait imposé à tous ses
   contenus — y compris à une grille ou à un tableau pleine largeur, qui n'en
   veulent pas.

   Entre deux usages, seule la TAILLE du titre change : la construction, le
   retrait et le filet restent identiques. C'est ce qui permet à un même rail de
   servir d'en-tête de section dans le calculateur et de démarcateur discret
   dans une fiche produit, sans deux définitions à tenir synchronisées.

   ⚠️ À FAIRE, suite du chantier d'alignement du 2026-10-03 : faire adopter
   cette définition aux trois copies restantes — .calc2-sec-head (calculateur),
   .mk2-row et .mk2-side-title (maquette). Elles sont désormais de la MÊME
   teinte, il ne reste que la déduplication. */
.rail-title {
    padding-inline: 14px;
    margin: 0;
    font-weight: 700;
    color: var(--color-heading);
}

.rail-title-sm { font-size: 1.2rem; letter-spacing: 0.04em; text-transform: uppercase; }
.rail-title-md { font-size: 1.6rem; }
.rail-title-lg { font-size: 2rem; }

/* ---------- intl-tel-input : l'enveloppe doit remplacer l'input ----------
   La bibliotheque entoure l'<input> d'un <div class="iti">. Ce wrapper prend
   donc sa place dans la mise en page, mais pas ses proprietes :

     - il est inline-block par defaut, le champ cesse de faire la largeur
     - les classes d'espacement (mt-3, etc.) restent sur l'input, DANS le
       wrapper : la marge s'applique a l'interieur et ne decolle plus le champ
       de celui du dessus

   On rend donc le wrapper transparent pour la mise en page, et on lui reporte
   l'espacement que portait l'input. */
.iti {
    display: block;
    width: 100%;
}

/* Popup QuickInfo : l'espacement y est pose champ par champ avec .mt-3.
   On le deplace sur l'enveloppe et on l'annule a l'interieur, sinon il
   compterait deux fois. */
.contact-form-box .form-group > .iti { margin-top: 1rem; }
.contact-form-box .form-group > .iti .default-input { margin-top: 0 !important; }

/* ====================== intl-tel-input — habillage maison ======================
   On SURCHARGE les classes de la bibliothèque depuis notre feuille, on ne
   touche pas à la sienne. Un fichier de lib modifié se perd à la montée de
   version suivante, en silence, et personne ne sait plus ce qui avait été
   changé ni pourquoi.

   La feuille de la lib est chargée AVANT le bundle de la page (balises
   séparées dans _Layout) : nos règles gagnent donc à spécificité égale, sans
   avoir à empiler des sélecteurs ni à sortir le !important.

   On ne réhabille que ce qui jure avec le formulaire — le champ de recherche
   et le survol. Les drapeaux, la liste et les indicatifs restent ceux de la
   bibliothèque : ils sont corrects, et les retoucher reviendrait à maintenir
   un thème complet pour rien. */

/* Le champ intérieur est à plat (border-width: 0), donc il flotte sans rien
   qui dise où cliquer. On lui rend la forme des autres champs du formulaire :
   même rayon, même bordure, même focus vert. */
.iti__search-input {
    padding: 8px 10px;
    border: 1px solid #d4d4d4 !important;   /* la lib force border-width: 0 */
    border-radius: 8px;
    color: #3f4045;
    line-height: 1.3;
}

.iti__search-input:focus {
    outline: none;
    border-color: #0fb930 !important;
    box-shadow: 0 0 0 3px rgb(15 185 48 / .12);
}

.iti__search-input::placeholder { color: #a8aab0; }

/* Un peu d'air autour, sinon le champ touche le bord de la liste. */
.iti__dropdown-content .iti__search-input { margin: 6px; width: calc(100% - 12px); }

/* Survol et pays mis en avant : le vert du site plutôt que le gris neutre de
   la bibliothèque — c'est la même mise en évidence que partout ailleurs. */
.iti__country.iti__highlight,
.iti__country:hover {
    background-color: rgb(15 185 48 / .10);
}

.iti__dial-code { color: #8a8c93; }

/******** Popups : en-tête navy **********/

/* TOUTES les popups du site portent le même en-tête navy (user, 2026-10-15) :
   une fenêtre se reconnaît d'un coup d'œil, quel que soit l'écran qui l'ouvre.
   Gabarit Bootstrap (.modal-header > .modal-title + .btn-close) : les arrondis
   du haut viennent déjà de Bootstrap, seule la couleur change ici ; la croix
   passe en blanc par le filtre de « btn-close-white » écrit EN CLAIR (la
   variable --bs-btn-close-white-filter n'est pas résolue ici : vérifié).
   Les deux autres familles suivent le même navy : .calc2-modal-head
   (calculator.css) et .calc-srch-head (selection.css). */
.modal-header {
    background: #000954;
    border-bottom: 0;
    color: #ffffff;
}

.modal-header .modal-title {
    color: #ffffff;
    font-weight: 700;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .85;
}

.modal-header .btn-close:hover { opacity: 1; }