/** Shopify CDN: Minification failed
Line 3205:72 Expected identifier but found whitespace
Line 8121:18 Unexpected "{"
Line 8121:27 Expected ":"
Line 8126:18 Unexpected "{"
Line 8126:27 Expected ":"
**/
/* ========================================================================
INFORMATIONS GÉNÉRALES SUR LE SITE
Propriété de © 2019/2024 Shopiweb.fr
Pour plus d'informations, visitez : https://www.shopiweb.fr
======================================================================== */
/* =====================
Polices de caractères
===================== */
@font-face {
font-family: "Aleo";
src: url("//koalaplay.fr/cdn/shop/files/aleo?1041");
font-display: swap;
font-style: normal;
font-weight: 400;
}
/* =====================
Variable CSS
===================== */
:root {
--bs-primary: #faf9f6;
--bs-primary-rgb: 250, 249, 246;
--bs-primary-lighten-5: #ffffff;
--bs-primary-lighten-10: #ffffff;
--bs-primary-darken-5: #f1eee6;
--bs-primary-darken-10: #e8e3d5;
--bs-secondary: #4a5d6a;
--bs-secondary-rgb: 74, 93, 106;
--bs-secondary-lighten-5: #546a79;
--bs-secondary-lighten-10: #5f7788;
--bs-secondary-darken-5: #40505b;
--bs-secondary-darken-10: #35434c;
--bs-tertiary: #3bc597;
--bs-tertiary-rgb: 59, 197, 151;
--bs-tertiary-lighten-5: #4fcba1;
--bs-tertiary-lighten-10: #62d1ac;
--bs-tertiary-darken-5: #35b288;
--bs-tertiary-darken-10: #2f9e79;
--bs-dark: #807171;
--bs-dark-rgb: 128, 113, 113;
--bs-dark-lighten-5: #8d7e7e;
--bs-dark-lighten-10: #998b8b;
--bs-dark-darken-5: #726565;
--bs-dark-darken-10: #655959;
--bs-light: #f5f2eb;
--bs-light-rgb: 245, 242, 235;
--bs-light-lighten-5: #fefdfc;
--bs-light-lighten-10: #ffffff;
--bs-light-darken-5: #ede7da;
--bs-light-darken-10: #e4dcc9;
--bs-body-bg: #ffffff;
--bs-body-bg-rgb: 255, 255, 255;
--bs-body-color: #1d3530;
--bs-body-color-rgb: 29, 53, 48;
--bs-border-radius: 2rem;
--bs-link-color: var(--bs-primary);
--bs-link-color-rgb: 250, 249, 246;
--bs-link-hover-color: var(--bs-primary-darken-10);
--bs-link-hover-color-rgb: 232, 227, 213;
--bs-success: #198754;
--bs-success-darken: #115c39;
--bs-success-rgb: 25, 135, 84;
--bs-danger: #dc3545;
--bs-danger-darken: #bd2130;
--bs-danger-rgb: 220, 53, 69;
--bs-warning: #ffc107;
--bs-warning-darken: #a07800;
--bs-warning-rgb: 255, 193, 7;
--bs-info: #0dcaf0;
--bs-info-darken: #08798f;
--bs-info-rgb: 13, 202, 240;
--bs-headings-font-family: "aleo", sans-serif;
--bs-body-font-family: "New York", Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
/* Variables souvent attendues par Bootstrap / Shopiweb */
--bs-white: #ffffff;
--bs-white-rgb: 255, 255, 255;
--bs-border-color: rgba(0, 0, 0, 0.15);
--bs-border-width: 1px;
--bs-border-radius-pill: 50rem;
/* Évite "background-image: var(--bs-gradient)" invalide si non défini */
--bs-gradient: none;
}
/* =====================
Boutons
===================== */
body .btn {
letter-spacing: 0rem;
text-transform: none;
font-weight: 500;
}
body .btn-md {
--bs-btn-padding-x: 0.8rem;
--bs-btn-padding-y: 0.4rem;
}
body .btn-lg {
--bs-btn-padding-x: 1.2rem;
--bs-btn-padding-y: 0.6rem;
}
.btn {
background-image: var(--bs-gradient);
}
.btn-link {
box-shadow: none !important;
background-image: none !important;
}
.btn-shadow-1 {
border-radius: var(--bs-border-radius)!important;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.btn-shadow-2 {
border-radius: var(--bs-border-radius)!important;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.btn-shadow-3 {
border-radius: var(--bs-border-radius)!important;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.btn-shadow-4 {
border-radius: var(--bs-border-radius)!important;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
/* =====================
Formulaires
===================== */
.form-control-md,
.form-select-md {
padding-left: 0.8rem;
padding-right: 0.8rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231d3530' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
}
[dir="ltr"] .form-select-md {
padding-right: 2.5rem;
}
[dir="rtl"] .form-select-md {
padding-left: 2.5rem;
}
/* =====================
Offcanvas / Modal
===================== */
body .offcanvas-backdrop,
body .modal-backdrop {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
/* =====================
Accordéon
===================== */
.accordion {
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d3530'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d3530'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* =====================
Autres styles
===================== */
#offcanvas-menu-nav .nav-link[aria-expanded]:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231d3530' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")
}
#offcanvas-menu-nav .nav-link[aria-expanded="true"]::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231d3530' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
.btn-close {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d3530'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
}
/* =====================
Personnalisation des prix
===================== */
.product-item-price-final,
.product-price-final {
color: #198754!important;
}
/* ========================================================================
INFORMATIONS GÉNÉRALES SUR LE SITE
Propriété de © 2019/2024 Shopiweb.fr
Pour plus d'informations, visitez : https://www.shopiweb.fr
======================================================================== */
/* =====================
Tailles de police variées
===================== */
/* Styles de texte transformé par le vendor */
.fs-6 { font-size: 0.825rem !important; }
.fs-5 { font-size: 1rem !important; }
.fs-4 { font-size: 1.125rem !important; }
.fs-3 { font-size: 1.25rem !important; }
.fs-2 { font-size: 1.5rem !important; }
.fs-1 { font-size: 1.75rem !important; }
.fs-7 { font-size: 2rem !important; }
.fs-8 { font-size: 2.5rem !important; }
.fs-9 { font-size: 3rem !important; }
.fs-10 { font-size: 4rem !important; }
.fs-11 { font-size: 5rem !important; }
.fs-12 { font-size: 7rem !important; }
/* Tailles spécifiques pour les points d'arrêt */
@media (min-width: 576px) {
.fs-sm-6 { font-size: 0.825rem !important; }
.fs-sm-5 { font-size: 1rem !important; }
.fs-sm-4 { font-size: 1.125rem !important; }
.fs-sm-3 { font-size: 1.25rem !important; }
.fs-sm-2 { font-size: 1.5rem !important; }
.fs-sm-1 { font-size: 1.75rem !important; }
.fs-sm-7 { font-size: 2rem !important; }
.fs-sm-8 { font-size: 2.5rem !important; }
.fs-sm-9 { font-size: 3rem !important; }
.fs-sm-10 { font-size: 4rem !important; }
.fs-sm-11 { font-size: 5rem !important; }
.fs-sm-12 { font-size: 7rem !important; }
}
@media (min-width: 768px) {
.fs-md-6 { font-size: 0.825rem !important; }
.fs-md-5 { font-size: 1rem !important; }
.fs-md-4 { font-size: 1.125rem !important; }
.fs-md-3 { font-size: 1.25rem !important; }
.fs-md-2 { font-size: 1.5rem !important; }
.fs-md-1 { font-size: 1.75rem !important; }
.fs-md-7 { font-size: 2rem !important; }
.fs-md-8 { font-size: 2.5rem !important; }
.fs-md-9 { font-size: 3rem !important; }
.fs-md-10 { font-size: 4rem !important; }
.fs-md-11 { font-size: 5rem !important; }
.fs-md-12 { font-size: 7rem !important; }
}
@media (min-width: 992px) {
.fs-lg-6 { font-size: 0.825rem !important; }
.fs-lg-5 { font-size: 1rem !important; }
.fs-lg-4 { font-size: 1.125rem !important; }
.fs-lg-3 { font-size: 1.25rem !important; }
.fs-lg-2 { font-size: 1.5rem !important; }
.fs-lg-1 { font-size: 1.75rem !important; }
.fs-lg-7 { font-size: 2rem !important; }
.fs-lg-8 { font-size: 2.5rem !important; }
.fs-lg-9 { font-size: 3rem !important; }
.fs-lg-10 { font-size: 4rem !important; }
.fs-lg-11 { font-size: 5rem !important; }
.fs-lg-12 { font-size: 7rem !important; }
}
@media (min-width: 1200px) {
.fs-xl-6 { font-size: 0.825rem !important; }
.fs-xl-5 { font-size: 1rem !important; }
.fs-xl-4 { font-size: 1.125rem !important; }
.fs-xl-3 { font-size: 1.25rem !important; }
.fs-xl-2 { font-size: 1.5rem !important; }
.fs-xl-1 { font-size: 1.75rem !important; }
.fs-xl-7 { font-size: 2rem !important; }
.fs-xl-8 { font-size: 2.5rem !important; }
.fs-xl-9 { font-size: 3rem !important; }
.fs-xl-10 { font-size: 4rem !important; }
.fs-xl-11 { font-size: 5rem !important; }
.fs-xl-12 { font-size: 7rem !important; }
}
@media (min-width: 1400px) {
.fs-xxl-6 { font-size: 0.825rem !important; }
.fs-xxl-5 { font-size: 1rem !important; }
.fs-xxl-4 { font-size: 1.125rem !important; }
.fs-xxl-3 { font-size: 1.25rem !important; }
.fs-xxl-2 { font-size: 1.5rem !important; }
.fs-xxl-1 { font-size: 1.75rem !important; }
.fs-xxl-7 { font-size: 2rem !important; }
.fs-xxl-8 { font-size: 2.5rem !important; }
.fs-xxl-9 { font-size: 3rem !important; }
.fs-xxl-10 { font-size: 4rem !important; }
.fs-xxl-11 { font-size: 5rem !important; }
.fs-xxl-12 { font-size: 7rem !important; }
}
/* Styles de titre transformé par le vendor */
.h1, h1 {
font-size: calc(1.425rem + 2.1vw);
}
@media (min-width: 1200px) {
.h1, h1 {
font-size: 3rem;
}
}
.h2, h2 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
.h2, h2 {
font-size: 2.5rem;
}
}
.h3, h3 {
font-size: calc(1.325rem + .9vw);
}
@media (min-width: 1200px) {
.h3, h3 {
font-size: 2rem;
}
}
.h4, h4 {
font-size: calc(1.275rem + .3vw);
}
@media (min-width: 1200px) {
.h4, h4 {
font-size: 1.5rem;
}
}
.h5, h5 {
font-size: 1.25rem;
}
.h6, h6 {
font-size: 1rem;
}
/* Styles de titre display transformé par le vendor */
.display-1 {
font-size: calc(1.625rem + 4.5vw);
}
@media (min-width: 1200px) {
.display-1 {
font-size: 5rem;
}
}
.display-2 {
font-size: calc(1.575rem + 3.9vw);
}
@media (min-width: 1200px) {
.display-2 {
font-size: 4.5rem;
}
}
.display-3 {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.display-3 {
font-size: 4rem;
}
}
.display-4 {
font-size: calc(1.475rem + 2.7vw);
}
@media (min-width: 1200px) {
.display-4 {
font-size: 3.5rem;
}
}
.display-5 {
font-size: calc(1.425rem + 2.1vw);
}
@media (min-width: 1200px) {
.display-5 {
font-size: 3rem;
}
}
.display-6 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
.display-6 {
font-size: 2.5rem;
}
}
/* Appliquer font-weight 800 à tous les titres display */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
font-weight: 800;
}
/* =====================
Tailles des bordures variées
===================== */
/* Styles de bordure transformé par le vendor */
.border-0 {
--bs-border-shopiweb-width: 0px;
border-width: var(--bs-border-shopiweb-width) !important;
--bs-card-inner-border-radius: var(--bs-border-radius);
}
.border-1 {
--bs-border-shopiweb-width: 1px;
border-width: var(--bs-border-shopiweb-width) !important;
}
.border-2 {
--bs-border-shopiweb-width: 3px;
border-width: var(--bs-border-shopiweb-width) !important;
}
.border-3 {
--bs-border-shopiweb-width: 5px;
border-width: var(--bs-border-shopiweb-width) !important;
}
.border-4 {
--bs-border-shopiweb-width: 8px;
border-width: var(--bs-border-shopiweb-width) !important;
}
.border-5 {
--bs-border-shopiweb-width: 10px;
border-width: var(--bs-border-shopiweb-width) !important;
}
.border-6 {
--bs-border-shopiweb-width: 12px;
border-width: var(--bs-border-shopiweb-width) !important;
}
.border-7 {
--bs-border-shopiweb-width: 15px;
border-width: var(--bs-border-shopiweb-width) !important;
}
.border-8 {
--bs-border-shopiweb-width: 18px;
border-width: var(--bs-border-shopiweb-width) !important;
}
.border-9 {
--bs-border-shopiweb-width: 21px;
border-width: var(--bs-border-shopiweb-width) !important;
}
.border-10 {
--bs-border-shopiweb-width: 24px;
border-width: var(--bs-border-shopiweb-width) !important;
}
/* =====================
Boutons (normaux)
===================== */
.btn {
--bs-btn-border-radius: var(--bs-border-radius);
}
.btn-primary {
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-primary-darken-5);
--bs-btn-hover-border-color: var(--bs-primary-darken-5);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
--bs-btn-active-bg: var(--bs-primary-darken-5);
--bs-btn-active-border-color: var(--bs-primary-darken-5);
--bs-btn-disabled-bg: var(--bs-primary);
--bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-secondary {
--bs-btn-bg: var(--bs-secondary);
--bs-btn-border-color: var(--bs-secondary);
--bs-btn-hover-bg: var(--bs-secondary-darken-5);
--bs-btn-hover-border-color: var(--bs-secondary-darken-5);
--bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
--bs-btn-active-bg: var(--bs-secondary-darken-10);
--bs-btn-active-border-color: var(--bs-secondary-darken-10);
--bs-btn-disabled-bg: var(--bs-secondary);
--bs-btn-disabled-border-color: var(--bs-secondary);
}
.btn-tertiary {
--bs-btn-color: rgba(255, 255, 255, 1);
--bs-btn-hover-color: rgba(255, 255, 255, 1);
--bs-btn-active-color: rgba(255, 255, 255, 1);
--bs-btn-disabled-color: rgba(255, 255, 255, 1);
--bs-btn-bg: var(--bs-tertiary);
--bs-btn-border-color: var(--bs-tertiary);
--bs-btn-hover-bg: var(--bs-tertiary-darken-5);
--bs-btn-hover-border-color: var(--bs-tertiary-darken-5);
--bs-btn-focus-shadow-rgb: var(--bs-tertiary-rgb);
--bs-btn-active-bg: var(--bs-tertiary-darken-10);
--bs-btn-active-border-color: var(--bs-tertiary-darken-10);
--bs-btn-disabled-bg: var(--bs-tertiary);
--bs-btn-disabled-border-color: var(--bs-tertiary);
}
.btn-white {
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: rgba(255, 255, 255, 1);
--bs-btn-border-color: rgba(255, 255, 255, 1);
--bs-btn-hover-color: var(--bs-body-color);
--bs-btn-hover-bg: rgba(255, 255, 255, .9);
--bs-btn-hover-border-color: rgba(255, 255, 255, .9);
--bs-btn-focus-shadow-rgb: 255, 255, 255;
--bs-btn-active-color: var(--bs-body-color);
--bs-btn-active-bg: rgba(255, 255, 255, .8);
--bs-btn-active-border-color: rgba(255, 255, 255, .8);
--bs-btn-disabled-bg: rgba(255, 255, 255, 1);
--bs-btn-disabled-border-color: rgba(255, 255, 255, 1);
}
.btn-light {
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: var(--bs-light);
--bs-btn-border-color: var(--bs-light);
--bs-btn-hover-color: var(--bs-body-color);
--bs-btn-hover-bg: var(--bs-light-darken-5);
--bs-btn-hover-border-color: var(--bs-light-darken-5);
--bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
--bs-btn-active-bg: var(--bs-light-darken-10);
--bs-btn-active-border-color: var(--bs-light-darken-10);
--bs-btn-disabled-bg: var(--bs-light);
--bs-btn-disabled-border-color: var(--bs-light);
}
.btn-dark {
--bs-btn-bg: var(--bs-dark);
--bs-btn-border-color: var(--bs-dark);
--bs-btn-hover-bg: var(--bs-dark-darken-5);
--bs-btn-hover-border-color: var(--bs-dark-darken-5);
--bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
--bs-btn-active-bg: var(--bs-dark-darken-10);
--bs-btn-active-border-color: var(--bs-dark-darken-10);
--bs-btn-disabled-bg: var(--bs-dark);
--bs-btn-disabled-border-color: var(--bs-dark);
}
/* =====================
Boutons (contour)
===================== */
.btn-outline-primary {
--bs-btn-color: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-primary);
--bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
--bs-btn-active-bg: var(--bs-primary);
--bs-btn-active-border-color: var(--bs-primary);
--bs-btn-disabled-color: var(--bs-primary);
--bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-secondary {
--bs-btn-color: var(--bs-secondary);
--bs-btn-border-color: var(--bs-secondary);
--bs-btn-hover-bg: var(--bs-secondary);
--bs-btn-hover-border-color: var(--bs-secondary);
--bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
--bs-btn-active-bg: var(--bs-secondary);
--bs-btn-active-border-color: var(--bs-secondary);
--bs-btn-disabled-color: var(--bs-secondary);
--bs-btn-disabled-border-color: var(--bs-secondary);
}
.btn-outline-tertiary {
--bs-btn-hover-color: rgba(255, 255, 255, 1);
--bs-btn-active-color: rgba(255, 255, 255, 1);
--bs-btn-color: var(--bs-tertiary);
--bs-btn-border-color: var(--bs-tertiary);
--bs-btn-hover-bg: var(--bs-tertiary);
--bs-btn-hover-border-color: var(--bs-tertiary);
--bs-btn-focus-shadow-rgb: var(--bs-tertiary-rgb);
--bs-btn-active-bg: var(--bs-tertiary);
--bs-btn-active-border-color: var(--bs-tertiary);
--bs-btn-disabled-color: var(--bs-tertiary);
--bs-btn-disabled-border-color: var(--bs-tertiary);
}
.btn-outline-dark {
--bs-btn-color: var(--bs-dark);
--bs-btn-border-color: var(--bs-dark);
--bs-btn-hover-bg: var(--bs-dark);
--bs-btn-hover-border-color: var(--bs-dark);
--bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
--bs-btn-active-bg: var(--bs-dark);
--bs-btn-active-border-color: var(--bs-dark);
--bs-btn-disabled-color: var(--bs-dark);
--bs-btn-disabled-border-color: var(--bs-dark);
}
.btn-outline-white {
--bs-btn-color: var(--bs-white);
--bs-btn-border-color: var(--bs-white);
--bs-btn-hover-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-white);
--bs-btn-hover-border-color: var(--bs-white);
--bs-btn-focus-shadow-rgb: var(--bs-white-rgb);
--bs-btn-active-color: var(--bs-primary);
--bs-btn-active-bg: var(--bs-white);
--bs-btn-active-border-color: var(--bs-white);
--bs-btn-disabled-color: var(--bs-white);
--bs-btn-disabled-border-color: var(--bs-white);
}
/* =====================
Glass bg type
===================== */
.glass-bg{
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: rgba(var(--bs-dark-rgb), .30);
border-radius: var(--bs-border-radius);
}
/* =====================
Badges
===================== */
.badge {
--bs-badge-border-radius: var(--bs-border-radius);
}
/* =====================
Progression
===================== */
.progress {
background-color: var(--bs-light-darken-5);
}
.progress-bar {
background-color: var(--bs-primary);
}
/* =====================
Classes utilitaires diverses
===================== */
.z-index-1 { z-index: 1;}
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.lead { font-weight: normal; }
.extra-small { font-size: .7rem; }
.text-current-color { color: currentColor !important; }
.headings-font-family {
font-family: var(--bs-headings-font-family);
}
.object-cover {
object-fit: cover;
}
.text-truncate-2 {
display: -webkit-box !important;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
/* =====================
Liens
===================== */
.link-dark {
transition: all .2s ease-out;
color: var(--bs-body-color) !important;
}
.link-dark:hover,
.link-dark:focus {
color: var(--bs-primary) !important;
}
.link-light {
transition: all .2s ease-out;
color: white !important;
}
.link-light:hover,
.link-light:focus {
color: var(--bs-primary) !important;
}
/* =====================
Texte
===================== */
.bg-primary .text-muted,
.bg-secondary .text-muted,
.bg-tertiary .text-muted,
.bg-dark .text-muted {
color: white !important;
}
/* New color text gradient */
.content-bg-gradient.text-white .text-muted {
color: white !important;
}
.content-bg-gradient.text-body .text-muted {
color: inherit !important;
}
.text-white .text-muted {
color: white !important;
}
.text-body .text-muted {
color: inherit !important;
}
.text-muted {
color: var(--bs-body-color) !important;
opacity: .75;
}
.text-muted-forced {
color: #86868B !important;
}
.bg-tertiary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-tertiary-rgb),var(--bs-bg-opacity))!important
}
.border-tertiary {
--bs-border-opacity: 1;
border-color: rgba(var(--bs-tertiary-rgb),var(--bs-border-opacity))!important;
}
.text-tertiary {
--bs-text-opacity: 1;
color: rgba(var(--bs-tertiary-rgb),var(--bs-text-opacity))!important;
}
.text-bg-tertiary {
color: #fff!important;
background-color: rgba(var(--bs-tertiary-rgb),var(--bs-bg-opacity,1))!important
}
/* =====================
Conteneur
===================== */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
--bs-gutter-x: 2rem;
}
.container-full {
--bs-gutter-x: 0rem;
}
/* =====================
Formulaires
===================== */
.form-control,
.form-select {
color: var(--bs-body-color);
border-color: var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
.form-control:focus,
.form-select:focus {
color: var(--bs-body-color);
border-color: rgba(var(--bs-body-color-rgb), .25);
box-shadow: 0 0 0 .25rem rgba(var(--bs-body-color-rgb), .125)
}
.text-white .form-control:focus,
.text-white .form-select:focus {
box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .1)
}
.input-group-text {
background-color: var(--bs-light-darken-5);
border-radius: var(--bs-border-radius);
}
.input-group-sm .form-control,
.input-group-lg .form-control,
.input-group-sm .form-select,
.input-group-lg .form-select,
.input-group-sm .input-group-text,
.input-group-lg .input-group-text {
border-radius: var(--bs-border-radius);
}
.form-check-input {
background-color: var(--bs-body-bg);
}
.form-check-input:checked {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.form-check-input:focus {
border-color: rgba(var(--bs-primary-rgb), .5);
box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.form-switch .form-check-input:focus {
--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ccc'/%3e%3c/svg%3e")
}
.form-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25)
}
.form-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25)
}
.form-range::-webkit-slider-thumb {
background-color: var(--bs-primary);
}
.form-range::-webkit-slider-thumb:active {
background-color: rgba(var(--bs-primary-rgb), .75)
}
.form-range::-moz-range-thumb {
background-color: var(--bs-primary);
}
.form-range::-moz-slider-thumb:active {
background-color: rgba(var(--bs-primary-rgb), .75)
}
.form-range::-webkit-slider-runnable-track {
background-color: var(--bs-light-darken-5);
}
/* =====================
Menu déroulant
===================== */
.dropdown-menu {
--bs-dropdown-border-color: var(--bs-border-color);
--bs-dropdown-border-radius: var(--bs-border-radius);
--bs-dropdown-link-color: var(--bs-body-color);
--bs-dropdown-link-hover-color:var(--bs-body-color);
--bs-dropdown-link-hover-bg: var(--bs-light-darken-5);
--bs-dropdown-link-active-color: #fff;
--bs-dropdown-link-active-bg: var(--bs-primary);
}
.dropdown-menu.show:not([data-popper-placement]) {
animation: animation_menu_deroulant_fade .2s ease-out;
}
@keyframes animation_menu_deroulant_fade {
from { transform: translateY(-.375rem); }
to { transform: translateY(0); }
}
.dropdown-item {
transition: background .2s ease-out;
font-size: .925rem;
}
/* =====================
Vignette d'image
===================== */
.img-thumbnail {
background-color: var(--bs-body-bg);
/*padding: 0 !important;*/
border-radius: unset; /*modif 3.0*/
}
/* =====================
Alertes
===================== */
.alert-primary {
--bs-alert-color: var(--bs-primary);
--bs-alert-bg: rgba(var(--bs-primary-rgb), .125);
--bs-alert-border-color: rgba(var(--bs-primary-rgb), .25);
}
.alert-secondary {
--bs-alert-color: var(--bs-secondary);
--bs-alert-bg: rgba(var(--bs-secondary-rgb), .125);
--bs-alert-border-color: rgba(var(--bs-secondary-rgb), .25);
}
.alert-tertiary {
--bs-alert-color: var(--bs-tertiary);
--bs-alert-bg: rgba(var(--bs-tertiary-rgb), .125);
--bs-alert-border-color: rgba(var(--bs-tertiary-rgb), .25);
}
.alert-dark {
--bs-alert-color: var(--bs-dark);
--bs-alert-bg: rgba(var(--bs-dark-rgb), .125);
--bs-alert-border-color: rgba(var(--bs-dark-rgb), .25);
}
.alert-success {
--bs-alert-color: var(--bs-success-darken);
--bs-alert-bg: rgba(var(--bs-success-rgb), .125);
--bs-alert-border-color: rgba(var(--bs-success-rgb), .25);
}
.alert-danger {
--bs-alert-color: var(--bs-danger-darken);
--bs-alert-bg: rgba(var(--bs-danger-rgb), .125);
--bs-alert-border-color: rgba(var(--bs-danger-rgb), .25);
}
.alert-warning {
--bs-alert-color: var(--bs-warning-darken);
--bs-alert-bg: rgba(var(--bs-warning-rgb), .125);
--bs-alert-border-color: rgba(var(--bs-warning-rgb), .25);
}
.alert-info {
--bs-alert-color: var(--bs-info-darken);
--bs-alert-bg: rgba(var(--bs-info-rgb), .125);
--bs-alert-border-color: rgba(var(--bs-info-rgb), .25);
}
/* =====================
Onglets navigation
===================== */
.nav-tabs {
border-bottom-color: var(--bs-border-color);
--bs-nav-tabs-link-active-color: var(--bs-primary);
}
.nav-pills {
--bs-nav-pills-link-active-bg: var(--bs-primary);
}
.nav {
--bs-nav-link-color: var(--bs-body-color);
--bs-nav-link-disabled-color: var(--bs-body-color);
}
/* =====================
Bouton de fermeture
===================== */
.btn-close:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
/* =====================
Offcanvas
===================== */
.offcanvas {
--bs-offcanvas-bg: var(--bs-body-bg);
}
.offcanvas {
border: none !important;
box-shadow: 0 0 1.5rem rgba(0, 0, 0, .25);
}
.offcanvas-backdrop.show {
opacity: 1;
}
.offcanvas.offcanvas-from-top {
transform: translateY(-100%);
}
.offcanvas.offcanvas-from-bottom {
transform: translateY(100%);
}
.offcanvas.show:not(.hiding),
.offcanvas.showing {
transform: none;
}
@media (max-width: 575px) {
.offcanvas.offcanvas-mobile-full {
width: 100%;
}
}
/* =====================
Modal
===================== */
.modal {
--bs-modal-bg: var(--bs-body-bg);
}
.modal-backdrop.show {
opacity: 1;
}
.modal-content {
border-radius: var(--bs-border-radius);
}
/* =====================
Info-bulles (popovers)
===================== */
.popover {
--bs-popover-bg: var(--bs-body-bg);
--bs-popover-border-color: var(--bs-border-color);
--bs-popover-header-bg: var(--bs-light);
--bs-popover-body-color: var(--bs-body-color);
--bs-popover-arrow-border: var(--bs-border-color);
/* --bs-popover-border-radius: var(--bs-border-radius);
--bs-popover-inner-border-radius: var(--bs-border-radius); */
}
.popover-body p {
margin-bottom: 0;
}
/* =====================
Accordéon
===================== */
.accordion {
--bs-accordion-bg: var(--bs-body-bg);
--bs-accordion-color: var(--bs-body-color);
--bs-accordion-btn-color: var(--bs-body-color);
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-body-color%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-body-color%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--bs-accordion-btn-focus-border-color: rgba(var(--bs-primary-rgb), 0.5);
--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
--bs-accordion-active-color: var(--bs-primary);
--bs-accordion-active-bg: var(--bs-light);
--bs-accordion-border-radius: var(--bs-border-radius);
--bs-accordion-inner-border-radius: var(--bs-border-radius);
}
.accordion-button:focus {
border: none;
box-shadow: none;
}
.accordion-button:focus-visible {
box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .1);
}
/* =====================
Tables
===================== */
.table {
--bs-table-striped-bg: rgba(0, 0, 0, 0.025);
--bs-table-striped-color: currentColor;
}
.table-light {
--bs-table-bg: var(--bs-light);
--bs-table-color: var(--bs-body-color);
--bs-table-border-color: var(--bs-border-color);
}
/* =====================
Pagination
===================== */
.pagination {
--bs-pagination-active-bg: var(--bs-primary);
--bs-pagination-active-border-color: var(--bs-primary);
}
/* =====================
Spinners
===================== */
.spinner-border-sm {
--bs-spinner-border-width: .15em;
}
/* =====================
Carte
===================== */
.card {
--bs-card-border-radius: var(--bs-border-radius);
/* --bs-border-width, devient --bs-border-shopiweb-width */
--bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-shopiweb-width)));
--bs-card-bg: var(--bs-body-bg);
--bs-card-border-color: var(--bs-border-color);
color: var(--bs-body-color);
/*--bs-card-color: var(--bs-body-color);*/
}
/* Si border-0, inner-border-radius prend la valeur de border-radius */
.card .border-0 {
--bs-card-inner-border-radius: var(--bs-border-radius) !important;
}
.card-header {
background-color: var(--bs-light);
border-bottom-color: var(--bs-border-color);
}
/* =====================
hr (séparateurs)
===================== */
hr, .hr {
opacity: .1;
}
/* =====================
Ellipse de texte
===================== */
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =====================
Fil d'Ariane
===================== */
.breadcrumb {
--bs-breadcrumb-margin-bottom: 0;
--bs-breadcrumb-font-size: .875rem;
--bs-breadcrumb-item-active-color: rgba(var(--bs-body-color-rgb), .5);
}
/* =====================
Ratio
===================== */
.ratio-3x4 {
--bs-aspect-ratio: calc(4 / 3 * 100%);
}
.ratio-9x16 {
--bs-aspect-ratio: calc(16 / 9 * 100%);
}
.ratio-9x21 {
--bs-aspect-ratio: calc(21 / 9 * 100%);
}
/* =====================
Page reCAPTCHA
===================== */
.shopify-challenge__container {
padding: 2rem;
}
/* =====================
Pages de politique
===================== */
.shopify-policy__container {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
max-width: 720px !important;
}
/* =====================
Erreurs système de Shopify
===================== */
.errors ul {
margin-bottom: 0;
}
/* =====================
Éditeur de texte riche (rte)
===================== */
.rte img {
max-width: 100%;
height: auto;
}
.rte p:last-child {
margin-bottom: 0;
}
.text-white .rte a:not(.btn) {
color: white;
}
/* =====================
Tables pliables
===================== */
@media (max-width: 991px) {
.table-collapsible table {
border: 0;
}
.table-collapsible table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.table-collapsible table tr {
display: block;
padding: .5rem 0;
border: none;
border-bottom: 1px solid var(--bs-dark);
}
.table-collapsible table tr:first-child {
border-top: 1px solid var(--bs-dark);
}
.table-collapsible table td {
display: flex;
align-items: center;
justify-content: space-between;
font-size: .95rem;
padding: .5rem 0;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.table-collapsible table td::before {
content: attr(data-label);
font-weight: bold;
padding-right: 1rem;
}
.table-collapsible table td:last-child {
border-bottom: 0;
}
}
/* =====================
SVG h2 sous-titre
===================== */
.h2_svg {
margin-top: 0.25rem;
margin-bottom: 1.5rem;
display: block;
line-height: 0;
}
.h2_svg span {
display: inline-block;
}
.h2_svg svg {
display: inline-block;
}
/* =====================
Ombre générale
===================== */
.shadow-1 {
/*border-radius: var(--bs-border-radius)!important;*/
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px!important;
}
.shadow-2 {
/*border-radius: var(--bs-border-radius)!important;*/
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px!important;
}
.shadow-3 {
/*border-radius: var(--bs-border-radius)!important;*/
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px!important;
}
.shadow-4 {
/*border-radius: var(--bs-border-radius)!important;*/
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px!important;
}
/* =====================
Ombre pilule
===================== */
.shadow-pill-1 {
border-radius: var(--bs-border-radius-pill)!important;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px!important;
}
.shadow-pill-2 {
border-radius: var(--bs-border-radius-pill)!important;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px!important;
}
.shadow-pill-3 {
border-radius: var(--bs-border-radius-pill)!important;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px!important;
}
.shadow-pill-4 {
border-radius: var(--bs-border-radius-pill)!important;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px!important;
}
/* =====================
Badge solde
===================== */
.badge-ribbon {
position: absolute;
top: -5px;
right: -5px;
width: 75px;
height: 75px;
text-align: right;
z-index: 1;
overflow: hidden;
}
.badge-ribbon-sale {
position: absolute;
top: 19px;
right: -21px;
display: block;
width: 100px;
font-size: 0.75em;
font-weight: 700;
text-align: center;
line-height: 20px;
white-space: nowrap;
transform: rotate(45deg);
box-shadow: rgb(0, 0, 0) 0px 3px 10px -5px;
}
.badge-ribbon span:before {
content: "";
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid #888888;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #888888;
}
.badge-ribbon span:after {
content: "";
position: absolute;
right: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #888888;
border-bottom: 3px solid transparent;
border-top: 3px solid #888888;
}
.badge-ribbon svg {
transform: rotate(45deg);
}
/* =====================
Bouton de retour en haut général
Flèche simple
===================== */
#btn-scroll-top {
position: fixed;
bottom: 1rem;
z-index: 1020;
opacity: 0;
display: flex;
padding: 0.5rem 0.5rem;
transform: translateY(100%);
transition: all .2s ease-out;
}
#btn-scroll-top.btn-show {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 575px) {
#btn-scroll-top {
padding: .25rem .5rem;
}
#btn-scroll-top svg {
width: 20px;
height: 20px;
}
#btn-scroll-top[data-mobile-position="left"] { left: 1rem; }
#btn-scroll-top[data-mobile-position="center"] { left: 50%; transform: translateX(-50%); }
#btn-scroll-top[data-mobile-position="right"] { right: 1rem; }
}
@media (min-width: 576px) {
#btn-scroll-top[data-desktop-position="left"] { left: 1rem; }
#btn-scroll-top[data-desktop-position="center"] { left: 50%; transform: translateX(-50%); }
#btn-scroll-top[data-desktop-position="right"] { right: 1rem; }
}
/* =====================
Bouton de retour en haut général
Bouton cartoon
===================== */
.shopiweb-back-top-template {
position: fixed;
bottom: 6.5rem;
right: 1rem;
width: 100px;
height: 100px;
padding: 5px;
background: #fffffff2;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
cursor: pointer;
transition: all 0.35s ease;
overflow: hidden;
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
pointer-events: none;
}
.shopiweb-back-top-template:hover {
transform: scale(1.1) rotate(5deg) translateY(0);
box-shadow: 0 6px 25px rgba(0,0,0,0.15);
}
.shopiweb-back-top-template.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: all;
}
.shopiweb-back-top-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.shopiweb-back-top-image {
position: absolute;
z-index: 2;
width: 60%;
height: 60%;
display: flex;
align-items: center;
justify-content: center;
}
.shopiweb-back-top-image svg {
width: 100%;
height: 100%;
}
.shopiweb-back-top-text {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.shopiweb-back-top-text-svg {
width: 120%;
height: 120%;
animation: shopiweb-rotateTextSvg 12s linear infinite;
}
@keyframes shopiweb-rotateTextSvg {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.shopiweb-back-top-template {
width: 80px;
height: 80px;
bottom: 110px;
right: 15px;
}
}
/* Mobile positions */
@media (max-width: 575px) {
.shopiweb-back-top-template {
left: auto !important;
right: 15px !important;
}
.shopiweb-back-top-template[data-mobile-position="left"] {
right: auto !important;
left: 15px !important;
}
.shopiweb-back-top-template[data-mobile-position="center"] {
left: 50% !important;
right: auto !important;
transform: translate(-50%, 20px);
}
.shopiweb-back-top-template[data-mobile-position="right"] {
left: auto !important;
right: 15px !important;
}
.shopiweb-back-top-template.active[data-mobile-position="center"] {
transform: translate(-50%, 0);
}
}
/* Desktop positions */
@media (min-width: 576px) {
.shopiweb-back-top-template {
left: auto !important;
right: 20px !important;
}
.shopiweb-back-top-template[data-desktop-position="left"] {
right: auto !important;
left: 20px !important;
}
.shopiweb-back-top-template[data-desktop-position="center"] {
left: 50% !important;
right: auto !important;
transform: translate(-50%, 20px);
}
.shopiweb-back-top-template[data-desktop-position="right"] {
left: auto !important;
right: 20px !important;
}
.shopiweb-back-top-template.active[data-desktop-position="center"] {
transform: translate(-50%, 0);
}
}
/* =====================
Image de fond overlay
===================== */
.background-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 0;
}
.background-overlay-blur {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
backdrop-filter: blur(0px);
z-index: 0;
}
/* Enlever le trait au-dessus du logo (1er bloc du footer uniquement) */
footer .footer-block:first-child .title::before {
display: none !important;
}
/* Optionnel : enlever aussi l'espace du titre invisible dans ce bloc */
footer .footer-block:first-child .title {
margin-bottom: 0 !important;
}
/* Texte lisible sur fond couleur primaire (beige) */
.bg-primary,
.bg-primary * {
color:rgb(84, 93, 105) !important; /* remplace par ta couleur de texte sombre si besoin */
}
/* ========================================================================
INFORMATIONS GÉNÉRALES SUR LE SITE
Propriété de © 2019/2024 Shopiweb.fr
Pour plus d'informations, visitez : https://www.shopiweb.fr
======================================================================== */
/* =====================
Présentation générale
===================== */
#main {
transition: all 0.2s ease-out;
}
#main::after {
z-index: 1019;
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.25);
visibility: hidden;
opacity: 0;
transition: all 0.3s linear;
}
#main.main-hidden {
position: relative;
}
#main.main-hidden::after {
opacity: 1;
visibility: visible;
}
/* =====================
Blog/Article
===================== */
.article-item img {
transition: all 0.2s ease-out;
}
.article-item a:hover img {
opacity: 0.75;
}
/* =====================
Article précédent/suivant
===================== */
#article-prev-next-prev,
#article-prev-next-next {
position: fixed;
top: 50%;
transition: all 0.2s ease-out;
z-index: 9;
}
#article-prev-next-prev {
left: 0;
transform: translate(-100%, -50%);
}
.show #article-prev-next-prev {
transform: translate(-50%, -50%);
}
.show #article-prev-next-prev:hover,
.show #article-prev-next-prev:focus {
transform: translate(0, -50%);
}
#article-prev-next-next {
right: 0;
transform: translate(100%, -50%);
}
.show #article-prev-next-next {
transform: translate(50%, -50%);
}
.show #article-prev-next-next:hover,
.show #article-prev-next-next:focus {
transform: translate(0, -50%);
}
#article-prev-next-prev img {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
#article-prev-next-next img {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@media (max-width: 1599px) {
#article-prev-next img {
max-width: 60px;
}
}
/* =====================
Page de recherche
===================== */
@media (max-width: 991px) {
#search-header .btn {
width: 100%;
}
}
@media (min-width: 992px) {
#search-header .form-select {
width: auto;
min-width: 160px;
}
}
/* =====================
Quantité d'emballage (plus/moins)
===================== */
.quantity-wrapper {
position: relative;
max-width: 120px;
flex-shrink: 0;
}
.quantity-wrapper .btn {
position: absolute;
top: 0;
padding: 0;
width: 36px;
height: 100%;
box-shadow: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.quantity-wrapper .btn:focus-visible {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.quantity-wrapper .btn[data-mode="minus"] {
left: 0;
}
.quantity-wrapper .btn[data-mode="plus"] {
right: 0;
}
.quantity-wrapper .form-control {
text-align: center;
padding-left: 2rem;
padding-right: 2rem;
}
/* =====================
Remplacements SplideJS
===================== */
.splide__arrow {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E");
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(var(--bs-dark-rgb), 0.75);
width: 2rem;
height: 2rem;
transition: all 0.2s ease-out;
opacity: 1;
}
@media (min-width: 576px) {
.splide__arrow {
width: 2.25rem;
height: 2.25rem;
}
}
.splide__arrow:not([disabled]):hover {
background-color: var(--bs-primary);
opacity: 1;
background-position: 40% 50%;
}
.splide.is-focus-in .splide__arrow:focus,
.splide__arrow:focus-visible {
outline: none;
box-shadow: 0 0 0 0.125rem rgba(var(--bs-primary-rgb), 0.5);
}
.splide__arrow--next {
transform: rotate(180deg) translateY(50%);
}
.splide__arrow:disabled {
opacity: 0 !important;
}
.splide__arrow svg {
display: none;
}
.splide__track--nav > .splide__list > .splide__slide {
border: 1px solid transparent;
}
.splide__track--nav > .splide__list > .splide__slide.is-active {
border: 1px solid var(--bs-primary);
}
body .splide__video,
body .splide__video iframe,
body .splide__video__wrapper {
border-radius: var(--bs-border-radius);
overflow: hidden;
}
body .splide__video__play {
background-color: var(--bs-body-color);
}
body .splide__video__play:after {
border-left-color: var(--bs-body-bg);
}
/* =====================
Galerie Glightbox
===================== */
@media (max-width: 768px) {
body .glightbox-clean .gprev,
body .glightbox-clean .gnext {
top: 45%;
width: 32px;
height: 38px;
border-radius: 0.125rem;
}
body .glightbox-clean .gprev {
left: 1rem;
}
body .glightbox-clean .gnext {
right: 1rem;
}
body .glightbox-clean .gprev svg,
body .glightbox-clean .gnext svg {
width: 20px;
}
}
/* =====================
Comptes à rebours
===================== */
ul.timer-countdown {
display: flex;
margin: 0;
}
ul.timer-countdown li {
border-radius: .25rem;
padding: .075rem .35rem;
margin: 0 0.125rem;
font-size: .7rem;
font-weight: bold;
min-width: 20px;
min-height: 18px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bs-light-lighten-5);
color: var(--bs-dark);
border: 1px solid var(--bs-dark);
border-radius: var(--bs-border-radius);
}
.text-white ul.timer-countdown li {
background: white;
color: var(--bs-dark);
border-color: transparent;
}
/* =====================
Liste de souhaits - divers
===================== */
.wishlist-icon {
position: relative;
}
.wishlist-icon .badge {
position: absolute;
top: 2px;
right: 0;
width: 18px;
height: 18px;
border-radius: 50% !important;
display: flex;
align-items: center;
justify-content: center;
}
/* =====================
Offcanvas liste de souhaits
===================== */
#offcanvas-wishlist .product-item {
position: relative;
}
#offcanvas-wishlist .product-item .product-item-title {
margin-right: 2.25rem;
}
#offcanvas-wishlist .product-item .spr-badge {
margin: 0 0 0.25rem;
}
#offcanvas-wishlist .product-item .btn-remove {
position: absolute;
top: 0.5rem;
right: -0.25rem;
display: flex;
color: var(--bs-dark);
opacity: 0.75;
border: none;
}
#offcanvas-wishlist .product-item .btn-remove:hover,
#offcanvas-wishlist .product-item .btn-remove:focus {
opacity: 1;
}
#offcanvas-wishlist-empty {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100%;
}
#offcanvas-wishlist-empty svg {
animation: offcanvas-animation-liste-de-souhaits-vide 1s linear infinite alternate;
}
@keyframes offcanvas-animation-liste-de-souhaits-vide {
from {
transform: translateX(-0.5rem);
}
to {
transform: translateX(0.5rem);
}
}
/* =====================
Offcanvas menu
===================== */
#offcanvas-menu {
max-width: 300px;
}
#offcanvas-menu .offcanvas-header a {
color: currentColor;
}
#offcanvas-menu-nav .nav-link {
color: var(--bs-body-color);
border-bottom: 1px solid var(--bs-border-color);
padding: 0.75rem 2.5rem 0.75rem 1rem;
font-weight: 500;
position: relative;
}
#offcanvas-menu-nav .nav-link[aria-expanded]::after {
content: "";
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
background-size: cover;
transition: all 0.2s ease-out;
}
#offcanvas-menu-nav .nav-link[aria-expanded="true"]::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
#offcanvas-menu-nav .nav-link.active {
color: var(--bs-primary);
}
#offcanvas-menu-nav .nav {
padding: 0.5rem 0;
background-color: var(--bs-light);
}
#offcanvas-menu-nav .dropdown-item {
padding: 0.5rem 1rem;
}
#offcanvas-menu-nav .dropdown-item.active {
color: var(--bs-primary);
}
#offcanvas-menu-nav .megamenu-block a {
display: block;
text-align: center;
color: currentColor;
text-decoration: none;
font-size: 0.875rem;
padding: 1rem;
}
#offcanvas-menu-nav .megamenu-block + .megamenu-block a {
padding-top: 0.25rem;
}
#offcanvas-menu-utilities-nav .nav-link {
color: var(--bs-body-color);
font-size: 0.875rem;
display: flex;
align-items: center;
}
#offcanvas-menu-utilities-nav .nav-link.active {
color: var(--bs-primary);
}
#offcanvas-menu-utilities-nav .wishlist-count-badge {
background-color: var(--bs-primary);
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.25rem;
}
#offcanvas-menu .offcanvas-footer-lang-currency {
border-top: 1px solid var(--bs-border-color);
}
#offcanvas-menu .offcanvas-footer {
padding: 0.25rem 0.5rem 0.5rem;
background-color: var(--bs-light);
border-top: 1px solid var(--bs-border-color);
}
#offcanvas-menu .social-icons .nav-link {
color: var(--bs-dark);
}
/* =====================
Offcanvas recherche
===================== */
#offcanvas-search .form-control-wrapper {
position: relative;
}
#offcanvas-search .form-control-wrapper svg.icon-search {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
opacity: 0.75;
}
#offcanvas-search .form-control-wrapper .form-control {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
#offcanvas-search .form-control-wrapper .btn-search-by-voice {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0.75;
display: flex;
align-items: center;
transition: all 0.2s ease-out;
}
#offcanvas-search .form-control-wrapper .btn-search-by-voice.speech-started {
animation: animation-recherche-vocale 1s linear infinite alternate;
}
@keyframes animation-recherche-vocale {
to {
opacity: 0.25;
}
}
#offcanvas-search .form-control-wrapper .btn-search-by-voice:hover,
#offcanvas-search .form-control-wrapper .btn-search-by-voice:focus {
opacity: 1;
}
#offcanvas-search .form-control-wrapper .btn-search-by-voice:focus-visible {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.search-predictive-results-title {
border-bottom: 1px solid var(--bs-border-color);
padding-bottom: 0.5rem;
}
#search-predictive .product-item .spr-badge {
margin-bottom: 0.25rem;
}
/* =====================
Sélecteur de langue/devise
===================== */
.language-selector .dropdown-menu,
.currency-selector .dropdown-menu {
max-height: 360px;
overflow: auto;
}
/* =====================
Loox
https://apps.shopify.com/product-reviews
===================== */
.loox-rating svg.loox-icon {
width: 0.9em;
height: 0.9em;
}
.loox-rating .loox-rating-label {
font-size: 0.9em;
}
/* =====================
JudgeMe
https://apps.shopify.com/judgeme
===================== */
body .jdgm-prev-badge {
font-size: 0.9em;
}
.product-item .jdgm-prev-badge {
margin-bottom: 0.25rem;
}
body .jdgm-rev-widg {
max-width: 1320px;
padding-left: 1rem;
padding-right: 1rem;
margin-left: auto;
margin-right: auto;
}
.page-type-product .jdgm-widget {
width: 100%;
/*padding-right: var(--bs-gutter-x, .75rem);*/
/*padding-left: var(--bs-gutter-x, .75rem);*/
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.page-type-product .jdgm-widget {
max-width: 540px;
}
}
@media (min-width: 768px) {
.page-type-product .jdgm-widget {
max-width: 720px;
}
}
@media (min-width: 992px) {
.page-type-product .jdgm-widget {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.page-type-product .jdgm-widget {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.page-type-product .jdgm-widget {
max-width: 1320px;
}
}
.jdgm-rev__pic-img {
border-radius: var(--bs-border-radius) !important;
padding: 0.25rem;
background-color: var(--bs-body-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
max-width: 100%;
height: auto;
}
.jdgm-gallery__thumbnail {
border-radius: var(--bs-border-radius) !important;
padding: 0.25rem;
background-color: var(--bs-body-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
max-width: 100%;
height: auto;
}
.jdgm-prev-badge__text {
opacity: 0.75;
margin-left: 0.25rem !important;
}
/* =====================
ShopiTrust
Product Reviews App Shopiweb
===================== */
.page-type-product .stp-star a {
color: var(--bs-body-color);
}
body .spt-badge-caption {
font-size: 0.875rem;
opacity: 0.75;
vertical-align: bottom;
}
/* =====================
noUiSlider
https://refreshless.com/nouislider/
===================== */
body .noUi-horizontal {
height: 8px;
}
body .noUi-horizontal .noUi-handle {
width: 22px;
height: 22px;
right: -11px;
top: -8px;
border-radius: 50%;
box-shadow: none;
background-color: var(--bs-body-bg);
border: 1.5px solid var(--bs-body-color);
}
body .noUi-handle::before,
body .noUi-handle::after {
background-color: var(--bs-body-color);
height: 8px;
width: 1.5px;
left: 7px;
top: 5px;
}
body .noUi-handle::after {
left: 11px;
}
body .noUi-target {
box-shadow: none;
background-color: var(--bs-light);
border: 1px solid var(--bs-border-color);
padding: 0 11px;
}
body .noUi-connect {
background-color: var(--bs-body-color);
}
/* =====================
Shopify Abonnements App
===================== */
body .shopify_subscriptions_app__title {
font-family: var(--bs-headings-font-family);
font-size: 1.25rem;
margin: 0 0 0.5rem;
}
body .shopify_subscriptions_app_block_label ul {
padding: 0.25rem 0 0;
}
body .shopify_subscriptions_fieldset label {
display: flex;
align-items: center;
}
body .shopify_subscriptions_fieldset input[type="radio"] {
margin: 0 0.75rem 0 0;
}
body .shopify_subscriptions_app_policy {
margin: 0.25rem 0 2rem;
opacity: 0.75;
text-align: center;
font-size: 0.925rem;
}
/* =====================
Placeholder SVG
===================== */
.placeholder-svg {
height: auto;
width: 100%;
}
/* =====================
Bouton Whatsapp
===================== */
/* Loading spinner */
.eg-loading-spinner {
width: 24px;
height: 24px;
border-radius: 50%;
}
.eg-loading-spinner {
display: block !important;
position: relative;
margin: 0 auto;
border-top: 3px solid rgba(255, 255, 255, 0.2);
border-bottom: 3px solid rgba(255, 255, 255, 0.2);
border-right: 3px solid rgba(255, 255, 255, 0.2);
border-left: 3px solid #ffffff;
transform: translateZ(0);
animation: animation-eg-chargement-spinner 1s infinite linear;
}
@keyframes animation-eg-chargement-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Typing spinner */
.eg-typing-spinner {
width: 6px;
height: 6px;
border-radius: 50%;
animation: animation-eg-typage-spinner 1s linear infinite alternate;
}
@keyframes animation-eg-typage-spinner {
0% {
background-color: rgba(0, 0, 0, 1);
box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2),
24px 0px 0px 0px rgba(0, 0, 0, 0.2);
}
25% {
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2),
24px 0px 0px 0px rgba(0, 0, 0, 0.2);
}
75% {
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2),
24px 0px 0px 0px rgba(0, 0, 0, 2);
}
}
/* Wrapper */
.eg-whatsapp-wrapper {
position: fixed;
bottom: 2.2rem;
left: 1rem;
z-index: 9;
transition: all 0.4s ease-out;
}
@media (max-width: 480px) {
.eg-whatsapp-wrapper {
z-index: 1023 !important;
}
}
/* Button styling */
#eg-whatsapp-button {
border: transparent;
border-radius: 50%;
width: 48px;
height: 48px;
transition: all 0.2s ease-out;
border: 1px solid white;
cursor: pointer;
}
#eg-whatsapp-button:hover,
#eg-whatsapp-button:focus {
opacity: 0.9;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}
#eg-whatsapp-button::after {
content: "";
position: absolute;
top: 1px;
right: 1px;
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
opacity: 0;
transform: scale(0);
animation: showEgWhatsAppDot 2s ease-out both;
}
@keyframes showEgWhatsAppDot {
90% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#eg-whatsapp-button-text {
border-radius: 50rem;
padding: 8px 16px;
font-size: 14px;
font-weight: bold;
color: black !important;
position: absolute;
top: 50%;
left: 54px;
white-space: nowrap;
transform: translateY(-50%);
background: white;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.125);
}
/* Dialog styling */
#eg-whatsapp-dialog {
visibility: hidden;
position: absolute;
bottom: 56px;
background: white;
border-radius: 1.25rem;
width: 360px;
height: 480px;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.125);
display: flex;
flex-direction: column;
max-width: calc(100vw - 28px);
max-height: 60vh;
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease-out;
}
.eg-whatsapp-button-left #eg-whatsapp-dialog {
left: 0;
}
.eg-whatsapp-button-right #eg-whatsapp-dialog {
right: 0;
}
.eg-whatsapp-dialog-visible #eg-whatsapp-dialog {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
#eg-whatsapp-dialog-header {
padding: 1rem 1rem;
border-radius: 1rem 1rem 0 0;
color: white;
line-height: normal;
display: flex;
align-items: center;
}
#eg-whatsapp-dialog-close {
background: transparent;
border: none;
box-shadow: none;
color: white;
position: absolute;
top: 0;
right: 0;
opacity: 0.6;
transition: all 0.2s ease-out;
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#eg-whatsapp-dialog-close:hover,
#eg-whatsapp-dialog-close:focus {
opacity: 1;
}
#eg-whatsapp-dialog-header-img-wrapper {
margin-right: 1rem;
position: relative;
}
#eg-whatsapp-dialog-header-img-wrapper::after {
content: "";
position: absolute;
bottom: 4px;
right: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
}
#eg-whatsapp-dialog-header-img {
border-radius: 50%;
}
#eg-whatsapp-dialog-label {
margin: 0;
color: white;
font-size: 18px;
}
#eg-whatsapp-dialog-subtitle {
font-size: 0.85em;
margin: 0;
opacity: 0.8;
}
#eg-whatsapp-dialog-body {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
overflow: auto;
flex: 1;
padding: 16px;
}
#eg-whatsapp-dialog-msg {
display: inline-block;
background-color: white;
border-radius: 0 1rem 1rem 1rem;
padding: 8px 12px;
margin: 0 64px 12px 4px;
line-height: normal;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
position: relative;
color: #121212;
min-width: 60px;
}
#eg-whatsapp-dialog-msg::after {
content: "";
border-top: 0px solid transparent;
border-bottom: 12px solid transparent;
border-right: 8px solid white;
position: absolute;
top: 0;
left: -8px;
}
#eg-whatsapp-dialog-msg-typing {
margin: 2px;
}
#eg-whatsapp-dialog-msg-text p {
margin: 0;
}
#eg-whatsapp-dialog-footer {
display: flex;
padding: 12px 6px 12px 16px;
background: linear-gradient(#fff, #f0f2f5);
}
#eg-whatsapp-dialog-user-input {
width: 100%;
border-radius: 6px;
border: 1px solid #d1d7e0;
background-color: white;
box-shadow: none;
padding: 8px 12px;
outline: none;
font-size: 15px;
transition: all 0.2s ease-out;
}
#eg-whatsapp-dialog-user-input:focus {
border-color: #94a2b8;
}
#eg-whatsapp-dialog-btn {
margin-left: 6px;
background: transparent;
color: #121212;
border-color: transparent;
display: flex;
align-items: center;
opacity: 0.5;
transition: all 0.2s ease-out;
cursor: pointer;
}
#eg-whatsapp-dialog-btn:hover,
#eg-whatsapp-dialog-btn:focus {
opacity: 1;
}
#eg-whatsapp-dialog-btn .eg-loading-spinner {
border-top-color: rgba(0, 0, 0, 0.2);
border-bottom-color: rgba(0, 0, 0, 0.2);
border-right-color: rgba(0, 0, 0, 0.2);
border-left-color: rgba(0, 0, 0, 1);
}
/* =====================
Cookie Shopiweb
===================== */
.cookie-popup {
position: fixed;
left: 0px;
bottom: 0px;
width: auto;
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
min-height: 3em;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 24px, rgb(0 0 0 / 5%) 0px 2px 6px;
}
@media (min-width: 450px) {
.cookie-popup {
left: 1rem;
bottom: 6rem;
width: 400px;
}
}
.container-cook {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: left;
border: none;
padding: 1rem;
}
.hidepops {
display: none;
}
.illus-cookies {
position: relative;
float: right;
}
.title-cookies {
margin: 0px 0px 10px !important;
font-size: 32px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
text-align: left !important;
clear: none !important;
}
.title-cookies small {
font-size: 70% !important;
font-weight: 500 !important;
display: block !important;
}
.title-cookies span {
display: block !important;
}
.copyright-cookies-shopiweb {
position: relative;
display: inline-flex;
-webkit-box-pack: center;
justify-content: center;
width: 100%;
overflow: hidden;
}
.buttons-cook {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 2rem;
}
/* Responsive */
@media only screen and (max-width: 749px) {
.buttons-cook {
padding-left: 0;
}
.title-cookies small {
font-size: 60% !important;
}
.title-cookies span {
font-size: 28px;
}
}
/* =====================
Pop-up Premium modal
===================== */
@keyframes shopibtns {
0% {
box-shadow: 0 0 5px #198754;
}
50% {
box-shadow: 0 0 15px #198754;
}
100% {
box-shadow: 0 0 5px #198754;
}
}
/* =====================
Barre de progression
===================== */
.scroll-progress-bar-footer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 2075;
}
.scroll-progress-bar-container {
background-color: rgba(150, 150, 150, 0.6);
height: 5px;
width: 100%;
}
.scroll-progress-bar {
background-color: var(--bs-primary);
height: 5px;
width: 0%;
}
/* =====================
Styles personnalisés
===================== */
/* =====================
Cookie popup (CLS safe)
- La popup est toujours en position fixed (donc pas de layout shift)
- L’état caché est géré UNIQUEMENT via .cookie-popup--hidden
===================== */
.cookie-popup{
position: fixed;
left: 16px;
bottom: 16px;
z-index: 9999;
/* évite qu'elle dépasse sur mobile */
max-width: min(520px, calc(100vw - 32px));
/* état visible par défaut (sera caché par la classe au chargement) */
transform: translate3d(0, 0, 0);
opacity: 1;
/* animation GPU (pas de layout shift) */
will-change: transform, opacity;
transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
}
/* État caché (classe ajoutée dans le HTML au départ + gérée par JS) */
.cookie-popup.cookie-popup--hidden{
transform: translate3d(-120%, 0, 0);
opacity: 0;
pointer-events: none; /* empêche les clics quand caché */
}
/* Optionnel: accessibilité / focus */
.cookie-popup.cookie-popup--hidden *{
pointer-events: none;
}
/* Optionnel: respecte les utilisateurs qui préfèrent moins d'animations */
@media (prefers-reduced-motion: reduce){
.cookie-popup{
transition: none;
}
}
/* ========================================================================
INFORMATIONS GÉNÉRALES SUR LE SITE
Propriété de © 2019/2024 Shopiweb.fr
Pour plus d'informations, visitez : https://www.shopiweb.fr
======================================================================== */
/* =====================
Barre d'annonce
===================== */
.announcement-bar {
position: relative;
transition: all .2s ease-out;
}
.announcement-bar p {
margin: 0;
}
.announcement-bar a {
text-decoration: none;
transition: all 0.2s ease-out;
}
.announcement-bar.text-white a {
color: white;
}
.announcement-bar.text-dark a {
color: var(--bs-dark);
}
.announcement-bar a:hover,
.announcement-bar a:focus {
opacity: 0.75;
}
.announcement-bar a .rte,
.announcement-bar .rte {
display: flex;
align-items: center;
justify-content: center;
}
.announcement-bar svg {
transition: all 0.2s ease-out;
}
.announcement-bar a:hover svg {
transform: translateX(2px);
}
.announcement-bar .carousel-control {
width: auto;
height: auto;
}
.announcement-bar .carousel-control-icon {
width: 1.75rem;
height: 1.75rem;
background-size: 70%;
}
.announcement-bar ul.timer-countdown {
margin: 0 0 0 1rem;
}
/* =====================
Navigation
===================== */
.navbar .navbar-brand {
color: currentColor;
}
.navbar .nav-link {
padding: 0.25rem 0.75rem;
font-weight: 500;
display: flex;
align-items: center;
}
.navbar.text-body .nav-link {
color: var(--bs-body-color);
}
.navbar.text-body .nav-link:hover {
color: var(--bs-dark-lighten-10);
}
.navbar.text-body .nav-link.active {
color: var(--bs-primary);
}
.navbar.text-white .nav-link {
color: white;
}
.navbar.text-white .nav-link:hover {
color: rgba(255, 255, 255, 0.9);
}
.navbar.text-white .nav-link.active {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
.navbar .nav-link.dropdown-toggle::after {
transform: translateY(1px);
}
#navbar-desktop .dropdown-menu {
border: none;
overflow: hidden;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
margin-top: 5px;
padding: 1rem;
transition: margin-top 700ms;
}
#navbar-desktop.bg-body .dropdown-menu,
#navbar-desktop.bg-white .dropdown-menu {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
/* bg_color menu */
#navbar-desktop.bg-dark .dropdown-menu .dropdown-item,
#navbar-desktop.bg-primary .dropdown-menu .dropdown-item,
#navbar-desktop.bg-secondary .dropdown-menu .dropdown-item,
#navbar-desktop.bg-tertiary .dropdown-menu .dropdown-item {
color: white;
}
#navbar-desktop.bg-dark .dropdown-menu .dropdown-item:hover,
#navbar-desktop.bg-primary .dropdown-menu .dropdown-item:hover,
#navbar-desktop.bg-secondary .dropdown-menu .dropdown-item:hover,
#navbar-desktop.bg-tertiary .dropdown-menu .dropdown-item:hover {
color: var(--bs-dark-lighten-10);
}
/* bg_color mega-menu */
#navbar-desktop.bg-dark .dropdown-megamenu .dropdown-item,
#navbar-desktop.bg-primary .dropdown-megamenu .dropdown-item,
#navbar-desktop.bg-secondary .dropdown-megamenu .dropdown-item,
#navbar-desktop.bg-tertiary .dropdown-megamenu .dropdown-item {
color: white;
}
#navbar-desktop.bg-dark .dropdown-megamenu .dropdown-item:hover,
#navbar-desktop.bg-primary .dropdown-megamenu .dropdown-item:hover,
#navbar-desktop.bg-secondary .dropdown-megamenu .dropdown-item:hover,
#navbar-desktop.bg-tertiary .dropdown-megamenu .dropdown-item:hover {
color: var(--bs-dark-lighten-10);
}
/* test */
.dropdown-menu[data-bs-popper] {
top: 90%;
}
.dropdown-megamenu {
width: 100%;
padding: 1.5rem;
}
.dropdown-megamenu.show {
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.dropdown-megamenu .col {
max-width: 280px;
}
.dropdown-megamenu .dropdown-item-level-2 {
font-family: var(--bs-headings-font-family);
font-size: 1rem;
margin-bottom: 0.25rem;
}
.dropdown-megamenu .dropdown-item-level-3 {
font-size: 0.875rem;
}
.dropdown-megamenu .dropdown-item {
font-size: 0.875rem;
}
.dropdown-megamenu .megamenu-col a {
display: block;
text-align: center;
color: currentColor;
text-decoration: none;
font-size: 0.875rem;
}
.dropdown-megamenu .megamenu-col img {
transition: all 0.2s ease-out;
}
.dropdown-megamenu .megamenu-col a:hover img {
opacity: 0.85;
}
.navbar .nav-icons .nav-link {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* backdrop */
.navbar-backdrop {
--bs-bg-opacity: 0.75;
backdrop-filter: saturate(180%) blur(20px);
transition: all 0.2s ease-out;
}
html:not(.has-scrolled) .navbar-backdrop {
--bs-bg-opacity: 1;
backdrop-filter: unset;
}
/* transparent */
.navbar-transparent {
position: absolute;
width: 100%;
transition: all 0.2s ease-out;
}
html:not(.has-scrolled) .navbar-transparent {
background: transparent !important;
box-shadow: none !important;
}
/* hover navbar start */
html:not(.has-scrolled) .navbar-hover.navbar-transparent:not(:hover) {
background: transparent !important;
box-shadow: none !important;
}
html:not(.has-scrolled) .navbar-hover.navbar-transparent:hover {
--bs-bg-opacity: 1;
background-color: rgba(
var(--bs-body-bg-rgb),
var(--bs-bg-opacity)
) !important;
color: var(--bs-body-color) !important;
}
html:not(.has-scrolled) .bg-dark.navbar-hover.navbar-transparent:hover {
--bs-text-opacity: 1;
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
html:not(.has-scrolled) .bg-primary.navbar-hover.navbar-transparent:hover {
--bs-text-opacity: 1;
--bs-bg-opacity: 1;
background-color: rgba(
var(--bs-primary-rgb),
var(--bs-bg-opacity)
) !important;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
html:not(.has-scrolled) .bg-secondary.navbar-hover.navbar-transparent:hover {
--bs-text-opacity: 1;
--bs-bg-opacity: 1;
background-color: rgba(
var(--bs-secondary-rgb),
var(--bs-bg-opacity)
) !important;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
html:not(.has-scrolled) .bg-tertiary.navbar-hover.navbar-transparent:hover {
--bs-text-opacity: 1;
--bs-bg-opacity: 1;
background-color: rgba(
var(--bs-tertiary-rgb),
var(--bs-bg-opacity)
) !important;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
html:not(.has-scrolled) .bg-light.navbar-hover.navbar-transparent:hover {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}
html:not(.has-scrolled)
.bg-primary.navbar-hover.navbar-transparent:hover
.nav-link,
html:not(.has-scrolled)
.bg-secondary.navbar-hover.navbar-transparent:hover
.nav-link,
html:not(.has-scrolled)
.bg-tertiary.navbar-hover.navbar-transparent:hover
.nav-link,
html:not(.has-scrolled)
.bg-dark.navbar-hover.navbar-transparent:hover
.nav-link {
color: white !important;
}
html:not(.has-scrolled)
.bg-primary.navbar-hover.navbar-transparent:hover
.nav-link.active,
html:not(.has-scrolled)
.bg-secondary.navbar-hover.navbar-transparent:hover
.nav-link.active,
html:not(.has-scrolled)
.bg-tertiary.navbar-hover.navbar-transparent:hover
.nav-link.active,
html:not(.has-scrolled)
.bg-dark.navbar-hover.navbar-transparent:hover
.nav-link.active {
color: white !important;
}
html:not(.has-scrolled) .navbar-hover.navbar-transparent:hover .nav-link {
color: var(--bs-body-color) !important;
}
html:not(.has-scrolled)
.navbar-hover.navbar-transparent:hover
.nav-link.active {
color: var(--bs-primary) !important;
}
html:not(.has-scrolled)
.navbar-hover.navbar-transparent:hover
.dropdown-megamenu.dropdown-menu.show {
margin: 1rem !important;
transition: margin-top 700ms;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
width: calc(100% - 2rem);
}
/* hover navbar end */
html:not(.has-scrolled) #navbar-desktop.navbar-transparent .dropdown-menu {
border-radius: var(--bs-border-radius) !important;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 2rem !important;
transition: margin-top 700ms;
}
html:not(.has-scrolled) #navbar-desktop.navbar-transparent .dropdown-megamenu {
border-radius: var(--bs-border-radius) !important;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 1rem !important;
transition: margin-top 700ms;
}
/* =====================
Diaporama
===================== */
.carousel-controls-arrows .carousel-control-prev-icon {
transition: all 0.2s ease-out;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffff' class='bi bi-arrow-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'/%3E%3C/svg%3E");
}
.carousel-controls-arrows button:hover .carousel-control-prev-icon {
transform: translateX(-2px);
}
.carousel-controls-arrows .carousel-control-next-icon {
transition: all 0.2s ease-out;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffff' class='bi bi-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
}
.carousel-controls-arrows button:hover .carousel-control-next-icon {
transform: translateX(2px);
}
.carousel-indicators-circles .carousel-indicators [data-bs-target] {
width: 8px;
height: 8px;
border-radius: 50%;
transition: all 0.2s ease-out;
}
.carousel-indicators-circles .carousel-indicators [data-bs-target].active {
transform: scale(1.4);
}
.carousel-ken-burns .carousel-item {
overflow: hidden;
}
./* Ken Burns uniquement desktop (évite de pénaliser le LCP mobile) */
@media (min-width: 992px){
.carousel-ken-burns .carousel-item.active img,
.carousel-ken-burns .carousel-item.active video{
animation: carousel_agrandissement 1s ease-out both;
}
}
@keyframes carousel_agrandissement {
to {
transform: scale(1.2);
}
}
.carousel .carousel-item-link {
display: block;
color: inherit;
text-decoration: none;
position: relative;
z-index: 1;
}
.carousel-item-blur {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.carousel-item-img,
.carousel-item-video {
width: 100%;
object-fit: cover;
display: flex;
}
.carousel-caption .subtitle {
text-transform: uppercase;
letter-spacing: 0.1rem;
}
.carousel-caption .btn {
flex-shrink: 0;
}
@media (max-width: 991px) {
.carousel-caption-mobile-top {
top: 1rem;
bottom: auto;
}
.carousel-caption-mobile-center {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.carousel-caption-mobile-bottom {
bottom: 2rem;
}
}
@media (min-width: 992px) {
.carousel-caption-desktop-left {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
}
.carousel-caption-desktop-center {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.carousel-caption-desktop-right {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
text-align: right;
}
.carousel-caption-desktop-bottom {
bottom: 2.25rem;
display: flex;
justify-content: center;
}
}
/* =====================
Carte avec image
===================== */
@media (max-width: 575px) {
.cards-with-image div.row.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 2rem;
margin: 0 -1rem -0.5rem !important;
}
.cards-with-image div.row.xs-scroll .col {
width: 75vw;
flex: none;
}
}
/* =====================
Carte avec vidéo
===================== */
@media (max-width: 575px) {
.cards-with-video div.row.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 2rem;
margin: 0 -1rem -0.5rem !important;
}
.cards-with-video div.row.xs-scroll .col {
width: 75vw;
flex: none;
}
}
/* =====================
Texte/Logo défilant (marquee)
===================== */
.marquee ul {
margin: 0;
display: inline-flex;
align-items: center;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.marquee ul:hover {
animation-play-state: paused;
}
.marquee ul li {
position: relative;
flex-shrink: 0;
padding: 0 1rem;
}
.marquee.separator-dot ul li::after {
content: "";
background-color: currentColor;
background-size: cover;
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
}
.marquee ul li a {
color: currentColor;
padding: 0.5rem 0;
text-decoration: none;
transition: all 0.2s ease-out;
}
.marquee ul li a:hover,
.marquee ul li a:focus {
opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
.marquee ul {
animation: none;
}
}
/* =====================
Collections en vedette
===================== */
.collection-item a {
display: flex;
position: relative;
color: white;
text-decoration: none;
}
.collection-item-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(var(--bs-dark-rgb), 0.25);
padding: 0.5rem 1rem;
border-bottom-left-radius: calc(var(--bs-border-radius) - 3px);
border-bottom-right-radius: calc(var(--bs-border-radius) - 3px);
transition: all 0.2s ease-out;
}
.img-thumbnail + .collection-item-title {
left: calc(0.25rem + 1px);
right: calc(0.25rem + 1px);
bottom: calc(0.25rem + 1px);
}
a:hover .collection-item-title {
background-color: rgba(var(--bs-dark-rgb), 0.5);
}
@media (max-width: 575px) {
.featured-collections ul.collection-list.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 2rem;
margin: 0 -1rem -0.5rem !important;
}
.featured-collections ul.collection-list.xs-scroll .collection-item {
width: 75vw;
flex: none;
}
}
/* =====================
Produits en vedette
===================== */
.featured-products .splide__arrow--prev {
left: 0;
transform: none;
}
.featured-products .splide__arrow--next {
right: 0;
transform: rotate(180deg);
}
.featured-products .container-fluid .splide__arrow--prev {
left: 0.5rem;
}
.featured-products .container-fluid .splide__arrow--next {
right: 0.5rem;
}
.featured-products .splide__pagination {
position: relative;
margin-top: 0.5rem;
}
.featured-products .splide__pagination__page {
background-color: rgba(var(--bs-body-color-rgb), 0.25);
opacity: 1;
transition: all 0.2s ease-out;
}
.featured-products .splide__pagination__page:hover,
.featured-products .splide__pagination__page:focus {
background-color: rgba(var(--bs-body-color-rgb), 0.5);
}
.featured-products .splide__pagination__page.is-active {
background-color: var(--bs-body-color);
}
/* Test Shopiweb pagination white */
.featured-products.text-white .splide__pagination__page {
background-color: white;
opacity: 0.5;
transition: all 0.2s ease-out;
}
.featured-products.text-white .splide__pagination__page:hover,
.featured-products.text-white .splide__pagination__page:focus {
background-color: white;
opacity: 0.75;
}
.featured-products.text-white .splide__pagination__page.is-active {
background-color: white;
opacity: 1;
}
@media (max-width: 575px) {
.featured-products .splide__pagination--mobile {
display: none;
}
}
@media (min-width: 576px) {
.featured-products .splide__pagination--mobile {
display: none;
}
.featured-products .splide__arrow--prev {
left: -0.25rem;
}
.featured-products .splide__arrow--next {
right: -0.25rem;
}
}
/* =====================
Récemment consultés
===================== */
/* =====================
Témoignages
===================== */
.testimonials {
overflow: hidden;
}
.testimonials .splide__track {
overflow: visible;
}
.testimonials .splide__slide {
opacity: 0.25;
transition: all 0.2s ease-out;
}
.testimonials .splide__slide.is-visible {
opacity: 1;
}
.testimonials .splide__arrow--prev {
left: 0;
transform: none;
}
.testimonials .splide__arrow--next {
right: 0;
transform: rotate(180deg);
}
.testimonials .splide__pagination {
position: relative;
margin-top: 1.25rem;
}
.testimonials .splide__pagination__page {
background-color: rgba(var(--bs-body-color-rgb), 0.25);
opacity: 1;
transition: all 0.2s ease-out;
}
.testimonials .splide__pagination__page:hover,
.testimonials .splide__pagination__page:focus {
background-color: rgba(var(--bs-body-color-rgb), 0.5);
}
.testimonials .splide__pagination__page.is-active {
background-color: var(--bs-body-color);
}
.testimonials.text-white .splide__pagination__page {
filter: invert();
}
.testimonials .splide__pagination--mobile {
margin-top: 1rem;
}
@media (max-width: 575px) {
/*.testimonials .splide__pagination {
display: none;
}*/
.testimonials .splide__arrow {
display: none;
}
}
@media (max-width: 575px) {
.testimonials .splide__pagination--mobile {
display: none;
}
}
@media (min-width: 576px) {
.testimonials .splide__pagination--mobile {
display: none;
}
}
.testimonials .verified {
border-radius: 5px;
padding: 3px 6px;
white-space: nowrap;
color: rgb(255, 255, 255);
font-weight: 700;
background-color: #00b67a;
}
.testimonials .description-content.show-fade {
max-height: 100px; /* Initial collapsed state */
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease;
opacity: 0.8; /* Slight transparency when collapsed */
position: relative;
}
.testimonials .description-content.show-fade.collapsed::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.description-content.expanded::after {
display: none;
}
.description-content.expanded {
opacity: 1;
}
/* =====================
Instagram galerie
===================== */
.instagram-gallery .title-branded span {
display: inline-block;
background: -webkit-linear-gradient(0deg, #8a3ab9, #e95950, #bc2a8d, #fbad50);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.instagram-gallery .splide__slide a {
display: block;
position: relative;
overflow: hidden;
}
.instagram-gallery .splide__slide a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.2s ease-out;
}
.instagram-gallery .splide__slide a:hover::before {
opacity: 1;
}
.instagram-gallery .splide__slide a::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 32px;
background-position: center;
opacity: 0;
transform: scale(0);
transition: all 0.2s ease-out;
}
.instagram-gallery .splide__slide a:hover::after {
opacity: 1;
transform: scale(1);
}
.instagram-gallery a.img-thumbnail img {
border-radius: 1.75rem;
}
.instagram-gallery-meta {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
color: white;
opacity: 0;
transform: translateY(2rem);
transition: all 0.2s ease-out;
}
a:hover .instagram-gallery-meta {
opacity: 1;
transform: translate(0);
}
.instagram-gallery-meta-likes {
display: inline-block;
position: relative;
padding-left: 26px;
margin: 0.75rem;
}
.instagram-gallery-meta-likes::before {
content: "";
background: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: center;
width: 24px;
height: 24px;
display: block;
background-size: 18px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.instagram-gallery-meta-comments {
display: inline-block;
position: relative;
padding-left: 26px;
margin: 0.75rem;
}
.instagram-gallery-meta-comments::before {
content: "";
background: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: center;
width: 24px;
height: 24px;
display: block;
background-size: 18px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* =====================
TikTok Galerie
===================== */
.tiktok-slider .container .splide__arrow--prev {
left: -1rem;
}
.tiktok-slider .container .splide__arrow--next {
right: -1rem;
}
.tiktok-slider .video-wrapper {
cursor: pointer;
color: white;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.tiktok-slider .video-wrapper::after {
content: "";
width: 36px;
height: 36px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
background-color: rgba(var(--bs-dark-rgb), 0.2);
transform: translate(-50%, -50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' class='bi bi-play-fill' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 24px;
background-position: center;
transition: all 0.2s ease-out;
pointer-events: none;
}
.tiktok-slider .video-wrapper:hover::after {
background-color: rgba(var(--bs-dark-rgb), 0.4);
}
.tiktok-slider .video-wrapper.is-playing::after {
opacity: 0;
transform: scale(0);
}
.tiktok-slider .video-wrapper .btn-toggle-sound {
display: flex;
color: white;
position: absolute;
top: 0.25rem;
right: 0.375rem;
opacity: 0;
border: none;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper .btn-toggle-sound:focus {
border: none;
box-shadow: none;
}
.tiktok-slider .video-wrapper .btn-toggle-sound:focus-visible {
box-shadow: 0 0 0 0.125rem rgba(var(--bs-dark-rgb), 0.5);
}
.tiktok-slider .video-wrapper.is-playing .btn-toggle-sound {
opacity: 1;
}
.tiktok-slider .video-wrapper.has-title::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(
rgba(var(--bs-dark-rgb), 0),
rgba(var(--bs-dark-rgb), 0.5)
);
transition: all 0.2s ease-out;
pointer-events: none;
}
.tiktok-slider .video-wrapper.has-title.is-playing::before {
opacity: 0;
}
.tiktok-slider .video-wrapper .title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
visibility: visible;
pointer-events: none;
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper.is-playing .title {
opacity: 0;
bottom: -2rem;
visibility: hidden;
}
.tiktok-slider .video-wrapper a.video-wrapper-product {
display: block;
position: absolute;
bottom: -2rem;
left: 0;
width: calc(100% - 2rem);
margin: 1rem;
opacity: 0;
background-color: rgba(var(--bs-dark-rgb), 0.75);
text-align: left;
text-decoration: none;
color: white;
visibility: hidden;
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper a.video-wrapper-product img {
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper a.video-wrapper-product:hover img,
.tiktok-slider .video-wrapper a.video-wrapper-product:focus img {
opacity: 0.85;
}
.tiktok-slider .video-wrapper.is-playing a.video-wrapper-product {
opacity: 1;
bottom: 0;
visibility: visible;
}
@media (max-width: 575px) {
.tiktok-slider .splide__arrow {
display: none;
}
}
/* =====================
Image parallaxe
===================== */
.parallax-image {
position: relative;
overflow: hidden;
background-color: var(--bs-dark);
color: white;
}
.parallax-image .img-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.parallax-image .img-mobile,
.parallax-image .img-desktop {
width: 100%;
height: 100%;
}
.parallax-image-blur {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.parallax-image-inner {
position: relative;
}
/* =====================
Stories animées
===================== */
.animated-stories img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.animated-stories .story-is-read .cercle {
display: none;
}
.animated-stories .cercle {
position: absolute;
fill: none;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 0;
animation: stories_anime_trait_bordure 6s ease-out 2 alternate;
}
.animated-stories video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
object-fit: cover;
}
.animated-stories .img-wrapper:hover .play-button {
opacity: 0.8;
}
.animated-stories .img-wrapper .play-button {
position: absolute;
top: calc(50% - 1px);
left: calc(50% + 2px);
transform: translate(-50%, -50%);
}
/* =====================
Quiz générateur
===================== */
.quiz-items .btn-quiz-value {
width: 100%;
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-body-color);
cursor: pointer;
text-align: center;
font-weight: 500;
border-radius: 0.5rem;
transition: all 0.1s ease-out;
}
.quiz-items .btn-quiz-value img {
border-radius: 0.25rem;
transition: all 0.2s ease-out;
}
.quiz-items .btn-quiz-value:hover {
color: var(--bs-primary);
}
.quiz-items .btn-quiz-value:hover img {
opacity: 0.85;
}
.quiz-items .btn-quiz-value:focus-visible {
box-shadow: 0 0 0 0.125rem rgba(var(--bs-body-color-rgb), 0.5);
}
.quiz-items .btn-quiz-value.active {
background-color: var(--bs-body-color);
color: var(--bs-body-bg);
}
.quiz .progress {
height: 0.5rem;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
/* =====================
F.A.Q (Accordéon)
===================== */
.accordion-custom .accordion-item {
border-radius: 0;
border: none;
margin-bottom: 0.5rem;
background-color: transparent;
color: currentColor;
}
.accordion-custom .accordion-button {
border-radius: var(--bs-border-radius);
/*background-color: var(--bs-light);*/
box-shadow: none;
border: var(--bs-accordion-border-width) solid
var(--bs-accordion-border-color);
}
.accordion-custom .accordion-button:hover,
.accordion-custom .accordion-button:focus {
background-color: var(--bs-light-darken-5);
}
.accordion-custom .accordion-button:not(.collapsed) {
/*background-color: var(--bs-primary);*/
/*color: white;*/
border: var(--bs-accordion-border-width) solid
var(--bs-accordion-border-color);
}
.accordion-custom .accordion-button::after {
font-family: sans-serif;
content: "+";
background-image: none;
/*background-color: var(--bs-primary);*/
/*color: white;*/
border-radius: 50rem;
padding: 0.25rem;
padding-top: 0;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 1.125rem;
}
.accordion-custom .accordion-button:not(.collapsed)::after {
content: "-";
/*background-color: white;*/
/*color: var(--bs-primary);*/
}
/* =====================
Compteur Elite
===================== */
.countdown-banner-content {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
text-align: center;
}
@media screen and (min-width: 750px) {
.countdown-banner-content {
flex-wrap: nowrap;
}
}
/* =====================
Tableau Comparatif
===================== */
.comparison-table table.rounded tfoot tr:last-child th,
.comparison-table table.rounded tfoot tr:last-child td {
border-bottom: none;
}
@media (max-width: 575px) {
.comparison-table .table-responsive {
padding-right: 1rem;
margin-right: -1rem;
}
.comparison-table table th {
font-size: 0.85rem;
}
.comparison-table table tbody th {
min-width: 33vw;
}
.comparison-table table svg {
width: 20px;
height: 20px;
}
}
/* =====================
Galerie de Styles (lookbook)
===================== */
.look-book-list-item {
position: absolute;
}
.look-book-point {
display: block;
padding: 0.25rem;
border-radius: 50%;
border: 1px solid var(--bs-primary);
background-color: transparent;
transition: all 0.2s ease-out;
animation: animation_pulse_look_book 2s infinite;
}
.look-book-point:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.look-book-point span {
background: var(--bs-primary);
display: block;
width: 1rem;
height: 1rem;
border-radius: 50%;
}
.look-book-point[aria-describedby] {
background-color: rgba(255, 255, 255, 0.5);
animation-play-state: paused;
}
@keyframes animation_pulse_look_book {
0% {
box-shadow: 0 0 0 0px rgba(var(--bs-primary-rgb), 0.25);
}
100% {
box-shadow: 0 0 0 20px rgba(var(--bs-primary-rgb), 0);
}
}
/* =====================
Compteurs animés
===================== */
.animated-counters .animated-counter-circle {
border-radius: 50%;
width: 220px;
height: 220px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
}
.animated-counters .animated-counter-circle::before {
content: "";
position: absolute;
inset: 5px;
width: 210px;
height: 210px;
border-radius: 50%;
background-color: #222;
opacity: 0.8;
}
.animated-counters .animated-counter-circle::after {
content: "";
position: absolute;
width: 175px;
height: 175px;
border: 15px solid #4d4c51;
border-radius: 50%;
background-color: #333;
box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.75), 0 -2px 2px rgba(255, 255, 255, 0.5),
inset 0 4px 2px rgba(0, 0, 0, 0.25);
}
.animated-counters .animated-counter-inner {
position: relative;
z-index: 1;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}
@media (max-width: 575px) {
.animated-counters .row-cols-2 .animated-counter-circle {
width: 140px;
height: 140px;
}
.animated-counters .row-cols-2 .animated-counter-circle::before {
width: 130px;
height: 130px;
}
.animated-counters .row-cols-2 .animated-counter-circle::after {
width: 108px;
height: 108px;
border: 8px solid #4d4c51;
}
}
/* =====================
Texte défilant
===================== */
.scrolling ul {
margin: 0;
display: inline-flex;
align-items: center;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.scrolling ul:hover {
animation-play-state: paused;
}
.scrolling ul li {
position: relative;
flex-shrink: 0;
padding: 0 1rem;
}
@media (prefers-reduced-motion: reduce) {
.scrolling ul {
animation: none;
}
}
/* =====================
Chronologie (timeline)
===================== */
.timeline-list {
position: relative;
list-style: none;
padding: 0;
margin: 1.75rem 0;
}
.timeline-list::before {
content: "";
background: rgba(var(--bs-dark-rgb), 0.5);
width: 0.25rem;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50rem;
}
.timeline-list-item {
position: relative;
width: calc(50% - 1.75rem);
}
.timeline-list-item:nth-child(odd) {
margin-left: auto;
}
.timeline-list-item::before {
content: "";
width: 1.5rem;
height: 1.5rem;
background: rgba(var(--bs-dark-rgb), 1);
border-radius: 50%;
position: absolute;
right: -1.75rem;
margin-top: 1.125rem;
transform: translateX(0.75rem);
}
.timeline-list-item:nth-child(odd)::before {
left: -1.75rem;
right: auto;
transform: translateX(-0.75rem);
}
.timeline-list-item img + .card-body .badge {
position: absolute;
top: 1rem;
right: 1rem;
}
.timeline-list-item:nth-child(odd) img + .card-body .badge {
left: 1rem;
right: auto;
}
@media (max-width: 575px) {
.timeline-list:before {
left: 1rem;
}
.timeline-list-item {
width: calc(108% - 4.5rem);
margin-left: auto;
}
.timeline-list-item:before {
left: -1.75rem;
right: auto;
}
.timeline-list-item img + .card-body .badge {
left: 1rem;
right: auto;
}
}
/* =====================
Readmore Image avec texte & Richtext
Comparaison d'images et vidéo avec texte
===================== */
.holder-readmore {
width: 100%;
}
.limited-readmore {
max-height: 400px;
transition: max-height 0.5s ease-in-out;
overflow: hidden;
position: relative;
}
.limited-readmore.l-100 {
max-height: 100px;
}
.limited-readmore.l-200 {
max-height: 200px;
}
.limited-readmore.l-300 {
max-height: 300px;
}
.limited-readmore.l-400 {
max-height: 400px;
}
.limited-readmore .bottom-readmore {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
opacity: 1;
transition: 0.5s;
}
.read-more-checker {
opacity: 0;
position: absolute;
}
.read-more-checker:checked ~ .limited-readmore {
max-height: none;
}
.read-more-checker:checked ~ .limited-readmore .bottom-readmore {
opacity: 0;
transition: 0.5s;
}
.read-more-button {
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.3rem;
color: var(--bs-link-color);
}
/* =====================
Collage Dynamique
===================== */
.collage-dynamique .img-badge-custom {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 1;
}
.collage-dynamique .collage-image-link {
display: block;
color: inherit;
text-decoration: none;
position: relative;
z-index: 1;
}
/* =====================
Tracking
===================== */
.tracking-container iframe {
border-radius: var(--bs-border-radius);
}
/* =====================
Multi-image avec texte
===================== */
.multi-image-with-text-img {
display: block;
position: relative;
margin: 40px auto 60px;
width: 50%;
transition: all 1s ease-out;
}
.multi-image-with-text-img-1 {
z-index: 1;
}
.multi-image-with-text-img:not(.multi-image-with-text-img-1) {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease-out;
}
.multi-image-with-text-img-2 {
width: 34%;
}
.entered .multi-image-with-text-img-2 {
transform: translate(-137%, -114%);
transition: all 1s ease-out;
}
.multi-image-with-text-img-3 {
width: 20%;
}
.entered .multi-image-with-text-img-3 {
transform: translate(94%, -132%);
transition: all 1.2s ease-out;
}
.multi-image-with-text-img-4 {
width: 24%;
}
.entered .multi-image-with-text-img-4 {
transform: translate(94%, -9%);
transition: all 1.6s ease-out;
}
.multi-image-with-text-img-5 {
width: 30%;
}
.entered .multi-image-with-text-img-5 {
transform: translate(-134%, -9%);
transition: all 1.4s ease-out;
}
/* =====================
Texte déroulant
===================== */
.scrolling-with-text__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.scrolling-with-text__image {
width: 100%;
display: block;
height: 100%;
line-height: 0;
}
.scrolling-text-item-rounded-img-left {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
}
.scrolling-text-image-rounded-img-left {
border-top-left-radius: var(--bs-border-radius) !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
}
.scrolling-text-item-rounded-img-right {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-top-left-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
}
.scrolling-text-image-rounded-img-right {
border-top-left-radius: 0px !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: 0px !important;
}
@media screen and (min-width: 749px) {
.scrolling-text-image-rounded-img-left {
border-right: 0px !important;
}
.scrolling-text-item-rounded-img-left {
border-left: 0px !important;
}
.scrolling-text-item-rounded-img-right {
border-right: 0px !important;
}
.scrolling-text-image-rounded-img-right {
border-left: 0px !important;
}
}
@media screen and (max-width: 749px) {
.scrolling-with-text__image {
height: auto;
padding-top: 100%;
}
.scrolling-with-text__image.scrolling-with-text__image-small {
padding-top: 75%;
}
.scrolling-with-text__image.scrolling-with-text__image-large {
padding-top: 125%;
}
.scrolling-text-item-rounded-img-left {
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
border-top: 0px !important;
}
.scrolling-text-image-rounded-img-left {
border-top-left-radius: var(--bs-border-radius) !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom: 0px !important;
}
.scrolling-text-item-rounded-img-right {
border-top-right-radius: 0px !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
border-top-left-radius: 0px !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
border-top: 0px !important;
}
.scrolling-text-image-rounded-img-right {
border-top-left-radius: var(--bs-border-radius) !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom: 0px !important;
}
}
.scrolling-text-section .grid {
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none;
column-gap: 0;
row-gap: 0;
}
.scrolling-text-section .grid__item {
padding: 0 30px;
}
.scrolling-text-section .scrolling-text-item {
padding-top: 50px;
padding-bottom: 50px;
}
.scrolling-with-text__text-item .button::before,
.scrolling-with-text__text-item .button::after {
display: none;
}
.scrolling-with-text__text.rte {
margin-bottom: 30px;
}
.scrolling-with-text__content {
align-items: center;
display: flex;
height: 100%;
}
.scrolling-with-text__text-item {
position: relative;
}
.scrolling-text-inner {
max-height: 640px;
overflow: hidden;
-webkit-mask-image: linear-gradient(
0deg,
transparent 0,
#000 20%,
#000 70%,
transparent
);
mask-image: linear-gradient(
180deg,
transparent 0,
#000 20%,
#000 70%,
transparent
);
}
.scrolling-with-text__heading {
margin: 0 0 20px;
}
.scrolling-text-vetical {
animation: verticalScroll var(--scrolling-text-speed, 20s) linear infinite forwards;
}
@keyframes verticalScroll {
to {
transform: translateY(-50%);
}
}
/* =====================
Accordéon Visuel
===================== */
section[id^="accordion-visual-"] .accordion-item,
section[id^="accordion-visual-"] .accordion-button,
section[id^="accordion-visual-"] .accordion-button:not(.collapsed),
section[id^="accordion-visual-"] .accordion-header,
section[id^="accordion-visual-"] .img-fluid,
section[id^="accordion-visual-"] .accordion-collapse.collapse.show,
section[id^="accordion-visual-"] .accordion-body {
border-radius: var(--bs-border-radius) !important;
}
.accordion-visual .accordion,
.accordion-visual .accordion-item,
.accordion-visual .accordion-button,
.accordion-visual .accordion-collapse,
.accordion-visual .accordion-body {
border: none !important;
transition: none;
}
@media (max-width: 1199px) {
.accordion-visual .accordion {
border: none !important;
}
.accordion-visual .accordion-item {
border: none !important;
margin: 0;
}
.accordion-visual .accordion-item:not(:last-child) {
border-bottom: none !important;
}
.accordion-visual .accordion-button {
font-size: 2.5rem;
text-align: center;
border-radius: 0 !important;
padding: 2rem 1.5rem 4.5rem;
}
.accordion-visual .accordion-button:not(.collapsed) {
border-bottom: none !important;
border-radius: var(--bs-border-radius) !important;
height: 280px;
}
.accordion-visual .accordion-button::after {
background-image: none;
background-color: transparent !important;
}
.accordion-visual .accordion-button:not(.collapsed)::after {
opacity: 0;
}
.accordion-visual .accordion-button:not(.collapsed) span {
opacity: 0;
}
.accordion-visual .accordion-button span {
width: 100%;
display: block;
text-align: center;
text-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
z-index: 1;
}
.accordion-visual .accordion-header img {
position: absolute;
top: 0;
left: 0;
height: 100%;
object-fit: cover;
/*opacity: .25;*/
transition: all .2s ease-out;
filter: blur(var(--accordion-visual-image-blur, 0px));
}
.accordion-visual .accordion-button:not(.collapsed) img {
opacity: 1;
filter: none;
}
.accordion-visual .accordion-collapse {
opacity: 0;
}
.accordion-visual .accordion-collapse.show {
animation: expandableImageTextCollapseAnimation 1s ease-out both;
}
@keyframes expandableImageTextCollapseAnimation {
to {
opacity: 1;
}
}
.accordion-visual .accordion-body {
padding-top: 3rem;
padding-bottom: 3rem;
}
}
@media (min-width: 1200px) {
.accordion-visual .accordion {
display: flex;
border: none !important;
}
.accordion-visual .accordion-item {
border: none !important;
border-right: none !important;
width: 100%;
display: flex;
margin: 0;
}
.accordion-visual .accordion-item:not(:last-child) {
border-right: none !important;
}
.accordion-visual .accordion-header {
width: 100%;
height: 100%;
}
.accordion-visual .accordion-button {
height: 100%;
font-size: 3rem;
justify-content: center;
border-radius: 0;
}
.accordion-visual .accordion-button::after {
background-image: none;
background-color: none !important;
}
.accordion-visual .accordion-button:not(.collapsed) {
background: none;
width: 360px;
border-right: none !important;
}
.accordion-visual .accordion-button:not(.collapsed) span {
opacity: 0;
}
.accordion-visual .accordion-button:not(.collapsed)::after {
opacity: 0;
}
.accordion-visual .accordion-header img {
position: absolute;
top: 0;
left: 0;
height: 100%;
object-fit: cover;
/*opacity: .25;*/
transition: all .2s ease-out;
filter: blur(var(--accordion-visual-image-blur));
}
.accordion-visual .accordion-header button:hover img {
opacity: 0.5;
}
.accordion-visual .accordion-button:not(.collapsed) img {
filter: none;
opacity: 1 !important;
}
.accordion-visual .accordion-header span {
display: block;
position: absolute;
transform: rotate(-90deg);
text-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
z-index: 1;
}
.accordion-visual .accordion-collapse:not(.show) {
opacity: 0;
}
.accordion-visual .accordion-collapse.collapsing {
height: auto;
width: 360px;
transition: none;
}
.accordion-visual .accordion-collapse.show {
width: 360px;
opacity: 0;
flex-shrink: 0;
animation: expandableImageTextCollapseAnimation 1s ease-out .2s both;
}
@keyframes expandableImageTextCollapseAnimation {
to {
opacity: 1;
}
}
.accordion-visual .accordion-body {
text-align: center;
display: flex;
align-items: center;
height: 100%;
}
.accordion-visual .accordion-item {
border: none;
transition: border 0.3s ease;
}
.accordion-visual .accordion-item.with-border {
border: none;
}
.accordion-visual .accordion-item {
transition: none;
border: none !important;
}
}
/* =====================
Image Texte (Image advanced)
===================== */
.advanced-image-in {
position: relative;
width: 100%;
height: auto;
}
.svg-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* SVG en arrière-plan */
}
/* =====================
Image Texte Explorer
===================== */
.image-text-explorer .nav-underline {
gap: 0;
}
.image-text-explorer .nav .nav-item {
flex-grow: 1;
}
.image-text-explorer .nav button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
line-height: normal;
font-size: .9rem;
padding: .5rem;
}
.image-text-explorer .nav button.active {
font-weight: normal;
color: var(--bs-primary);
border-bottom-color: currentcolor;
}
.image-text-explorer .nav button img {
transform: scale(.8);
transition: all .2s ease-out;
}
.image-text-explorer .nav button.active img {
transform: scale(1) translateY(-.25rem);
}
@media (max-width: 575px) {
.image-text-explorer .nav button {
font-size: .7rem;
}
}
/* =====================
Image Texte Compteurs
===================== */
.progress-circle-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
}
.progress-circle {
width: var(--progress-circle-size, 120px);
height: var(--progress-circle-size, 120px);
border-radius: 50%;
position: relative;
background: conic-gradient(
from 0deg at 50% 50%,
var(--progress-border-color, currentColor) 0%,
var(--progress-border-color, currentColor) var(--percentage, 0%),
#fff var(--percentage, 0%),
#fff 100%
);
display: flex;
align-items: center;
justify-content: center;
margin-right: 2rem;
flex: none;
}
.progress-circle::after {
content: "";
position: absolute;
top: var(--progress-circle-border-thickness);
bottom: var(--progress-circle-border-thickness);
left: var(--progress-circle-border-thickness);
right: var(--progress-circle-border-thickness);
background: #fff;
border-radius: 50%;
z-index: 1;
}
.progress-circle .progress-value {
position: relative;
z-index: 2;
font-size: calc(var(--progress-circle-size) * 0.25);
color: var(--progress-border-color);
}
@media only screen and (max-width: 768px) {
.progress-circle-wrapper {
flex-direction: row;
flex-wrap: wrap;
}
.progress-circle-text {
flex: 1;
margin-top: 0;
text-align: left;
}
.progress-circle {
flex: none;
margin-right: 1rem;
margin-bottom: 0;
}
}
/* =====================
Parallaxe Défilante
===================== */
.parallax-scroll {
display: block;
position: relative;
color: var(--text-color, inherit);
}
.parallax-scroll .media-wrapper {
--opacity: 0;
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.parallax-scroll .media-wrapper::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, var(--overlay-opacity, 0));
backdrop-filter: blur(var(--overlay-blur, 0px));
-webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
}
.parallax-scroll-media {
display: flex;
width: 100vw;
height: 100vh;
object-fit: cover;
}
.parallax-scroll-caption-wrapper {
position: relative;
margin-block-start: -100vh;
}
.parallax-scroll-caption-inner {
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 1rem;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.media-mobile {
display: none;
}
.media-desktop {
display: none;
}
@media (max-width: 767px) {
.media-mobile {
display: block;
}
}
@media (min-width: 768px) {
.media-desktop {
display: block;
}
}
/* =====================
Image Texte Slider
===================== */
.image-with-text-slider .carousel-indicators {
top: 30px;
right: 0;
bottom: auto;
left: auto;
flex-direction: column;
margin: 0;
}
@media (min-width: 992px) {
.image-with-text-slider .carousel-indicators {
top: 50%;
right: 60px;
transform: translate(50%, -50%);
}
}
.image-with-text-slider .carousel-indicators.align-indicators-left {
right: auto;
left: 0;
}
@media (min-width: 992px) {
.image-with-text-slider .carousel-indicators.align-indicators-left {
right: auto;
left: 60px;
transform: translate(-50%, -50%);
}
}
.image-with-text-slider .carousel-indicators [data-bs-target] {
box-sizing: content-box;
text-indent: inherit;
width: 50px;
height: 50px;
border: 1px solid transparent;
margin: .30rem;
background-color: transparent;
border-radius: 50%;
overflow: hidden;
opacity: 1;
transition: all .2s ease-out;
}
@media (min-width: 992px) {
.image-with-text-slider .carousel-indicators [data-bs-target] {
width: 70px;
height: 70px;
margin: .45rem;
}
}
.image-with-text-slider .carousel-indicators [data-bs-target].active {
border-color: white;
transform: scale(1.1);
}
.image-with-text-slider .carousel-indicators [data-bs-target]:hover {
transform: scale(1.1);
}
.image-with-text-slider .carousel-indicators [data-bs-target].active:hover {
transform: scale(1.1);
}
/* =====================
Plans Tarifaires
===================== */
.pricing-plans .card-body .description ul {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-plans .card-body .description ul li {
padding-top: .125rem;
padding-bottom: .125rem;
}
@media (max-width: 575px) {
.pricing-plans .row {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 0.5rem;
margin: 0 -1rem -0.5rem !important;
}
.pricing-plans .row .col {
width: 75vw;
flex: none;
}
}
/* =====================
Media grid
===================== */
.media-grid {}
@media (max-width: 991px) {
.media-grid-mobile-blocks {
display: flex;
flex-wrap: nowrap;
overflow: auto;
padding-bottom: 1rem;
}
.media-grid-mobile-block {
flex-shrink: 0;
width: 70vw;
max-width: 360px;
margin-right: 1rem;
}
}
@media (min-width: 992px) {
.media-grid-desktop {
display: grid;
grid-template-areas:
"b a c"
"d a e"
"f a g";
grid-gap: 1.5rem;
}
.media-grid-desktop .col:nth-child(1) {
grid-area: a;
display: flex;
align-items: center;
}
.media-grid-desktop .col:nth-child(2) {
grid-area: b;
}
.media-grid-desktop .col:nth-child(3) {
grid-area: c;
}
.media-grid-desktop .col:nth-child(4) {
grid-area: d;
}
.media-grid-desktop .col:nth-child(5) {
grid-area: e;
}
.media-grid-desktop .col:nth-child(6) {
grid-area: f;
}
.media-grid-desktop .col:nth-child(7) {
grid-area: g;
}
}
/* =====================
Section Header
===================== */
.background-text-overlay {
position: absolute;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
z-index: 0;
max-width: 100%;
box-sizing: border-box;
}
/* Section Header — version compatible theme.css (sans Liquid) */
[id^="background-text-"] .background-text-overlay.center {
top: 50%;
transform: translateY(-50%);
}
[id^="background-text-"] .background-text-overlay.top {
top: 0;
transform: translateY(0);
}
@media (max-width: 767px) {
.text-start .background-text-overlay {
left: 0;
transform: translateY(-50%);
}
.text-center .background-text-overlay {
left: 50%;
transform: translate(-50%, -50%);
}
.text-end .background-text-overlay {
right: 0;
transform: translateY(-50%);
}
}
@media (min-width: 1024px) {
.text-lg-start .background-text-overlay {
left: 0;
transform: translateY(-50%);
}
.text-lg-center .background-text-overlay {
left: 50%;
transform: translate(-50%, -50%);
}
.text-lg-end .background-text-overlay {
right: 0;
transform: translateY(-50%);
}
}
/* Par défaut, pour les grands écrans (bureau) */
.background-text-overlay.title-overlay-size-2 {
font-size: calc(2em * 2);
}
.background-text-overlay.title-overlay-size-3 {
font-size: calc(2em * 3);
}
.background-text-overlay.title-overlay-size-4 {
font-size: calc(2em * 4);
}
/* Pour les tablettes (écran entre 768px et 1024px) */
@media (max-width: 1024px) {
.background-text-overlay.title-overlay-size-2 {
font-size: calc(1.5em * 2);
}
.background-text-overlay.title-overlay-size-3 {
font-size: calc(1.5em * 3);
}
.background-text-overlay.title-overlay-size-4 {
font-size: calc(1.5em * 4);
}
}
/* Pour les mobiles (écran inférieur à 768px) */
@media (max-width: 767px) {
.background-text-overlay.title-overlay-size-2 {
font-size: calc(1em * 2);
}
.background-text-overlay.title-overlay-size-3 {
font-size: calc(1em * 3);
}
.background-text-overlay.title-overlay-size-4 {
font-size: calc(1em * 4);
}
}
/* animation des svg soulignement */
.path-animation path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 2s ease-in-out;
transition-delay: 1s;
}
.animate__animated.animate__faster.animate .path-animation path {
stroke-dashoffset: 0;
}
/* style dégradé au texte en italique */
.background-animate {
background-size: 0% 80%;
transition: background-size 2s ease-in-out;
transition-delay: 1s;
}
.animate .background-animate {
background-size: 100% 90%;
}
/* =====================
Derniers articles (Latest articles)
===================== */
@media (max-width: 575px) {
.latest-articles ul.blog-list.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 2rem;
margin: 0 -1rem -0.5rem !important;
}
.latest-articles ul.blog-list.xs-scroll .article-item {
width: 75vw;
flex: none;
}
}
/* =====================
Multicolonne (Icon Blocks)
===================== */
@media (max-width: 575px) {
.icon-blocks div.row.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 2rem;
margin: 0 -1rem -0.5rem !important;
}
.icon-blocks div.row.xs-scroll .col {
width: 75vw;
flex: none;
}
}
/* =====================
Newsletter
===================== */
.newsletter.text-white {
position: relative;
}
.newsletter.text-white .newsletter-inner {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.newsletter.text-white .description {
opacity: 0.75;
}
.newsletter.text-white .notice {
opacity: 0.5;
}
/* =====================
Vidéo sticky
===================== */
.sticky-video {
position: relative;
position: fixed;
bottom: 3rem;
left: 0;
padding: 1rem;
z-index: 9;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
transition: all 0.4s ease-out;
}
.sticky-video.show {
visibility: visible;
opacity: 1;
}
.sticky-video:not(.show) {
z-index: -1 !important;
}
.sticky-video video {
display: block;
max-width: 100%;
}
.sticky-video .btn-close-custom {
background: var(--bs-body-bg);
color: var(--bs-body-color);
position: absolute;
top: 1.25rem;
right: 1.25rem;
opacity: 1;
display: flex;
padding: 0;
border: none;
border-radius: 50%;
transition: all 0.2s ease-out;
}
.sticky-video .video-wrapper-product {
display: block;
margin: 0.5rem 0 0;
background-color: rgba(0, 0, 0, 0.75);
text-align: left;
text-decoration: none;
color: white;
visibility: visible;
opacity: 1;
transition: all 0.2s ease-out;
}
.sticky-video .video-wrapper-product:hover,
.sticky-video .video-wrapper-product:focus {
background-color: rgba(0, 0, 0, 0.9);
}
.sticky-video .video-wrapper-product .product-price {
visibility: hidden;
opacity: 0;
height: 0;
transition: all 0.2s ease-out;
}
/* =====================
Sticky ATC (Ajouter au panier)
===================== */
#sticky-atc {
padding: 0.75rem 0;
transform: translateY(100%);
transition: all 0.2s ease-out;
box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
#sticky-atc.show {
z-index: 1019;
transform: translateY(0);
}
#sticky-atc.text-dark {
box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
#sticky-atc .product-img {
max-width: 90px;
flex-shrink: 0;
}
#sticky-atc .spr-badge {
margin: 0 0 0.25rem;
}
#sticky-atc.product-price .price-badge-sale {
background-color: var(--bs-success);
font-size: 0.75rem;
margin-left: 0.75rem;
}
#sticky-atc .dropdown-menu {
max-height: 300px;
min-width: 260px;
overflow: auto;
}
#sticky-atc .dropdown-item:active small {
color: white !important;
}
#sticky-atc form.loading .btn-atc:after {
display: none;
}
#sticky-atc .btn-atc {
min-width: 120px;
}
@media (max-width: 575px) {
#sticky-atc .product-img {
max-width: 50px;
}
#sticky-atc .spr-badge {
display: none;
}
#sticky-atc .btn-atc {
font-size: 0.875rem;
}
#sticky-atc .dropdown-menu {
left: -0.5rem !important;
}
}
/* =====================
Pied de page (footer)
===================== */
#footer .nav-link {
font-size: 0.875rem;
}
#footer a {
transition: all 0.2s ease-out;
}
#footer.text-white #footer-blocks a:not(.btn) {
color: white;
opacity: 0.75;
}
#footer.text-white #footer-blocks a:not(.btn):hover {
opacity: 1;
}
#footer.text-dark #footer-blocks a:not(.btn) {
color: var(--bs-body-color);
opacity: 0.75;
}
#footer.text-dark #footer-blocks a:not(.btn):hover {
opacity: 1;
}
#footer.text-dark #footer-blocks a:not(.btn):hover {
opacity: 0.75;
}
.footer-block .title {
position: relative;
margin-bottom: 1.25rem;
text-transform: uppercase;
}
.footer-block .title::before {
content: "";
position: absolute;
bottom: -0.75rem;
left: 0;
width: 1.5rem;
height: 0.125rem;
}
.text-white .footer-block .title::before {
background-color: var(--bs-primary);
}
.text-dark .footer-block .title::before {
background-color: rgba(0, 0, 0, 0.5);
}
.bg-dark .footer-block .title::before,
.bg-white .footer-block .title::before,
.bg-light .footer-block .title::before {
background-color: var(--bs-primary);
}
/*#footer.text-white .rte {
color: rgba(255, 255, 255, 0.75);
}*/
#footer-about {
padding: 1.25rem;
}
.text-white #footer-about {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, .1);
}
.text-dark #footer-about {
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
}
#footer-about.text-white a:not(.btn) {
color: white;
opacity: 0.75;
}
#footer-about.text-dark a:not(.btn) {
color: var(--bs-dark) !important;
opacity: 0.75;
}
#footer-about .navbar-brand {
opacity: 1 !important;
display: inline-block;
}
#footer-about a {
text-decoration: none;
}
.text-white #footer-copyright a:not(.btn) {
color: white;
}
.text-dark #footer-copyright a:not(.btn) {
color: var(--bs-dark);
}
#footer-copyright .payment-icons svg {
height: 20px;
width: auto;
}
#footer .social-icons-wrapper {
display: inline-flex;
flex-direction: column;
}
#footer .nav-link[aria-expanded] {
padding: 1rem 2.25rem 1rem 0;
font-weight: 500;
font-size: 1rem;
margin: 0;
position: relative;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#footer .nav-link[aria-expanded]::after {
content: "";
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-size: cover;
transition: all 0.2s ease-out;
}
#footer .nav-link[aria-expanded="true"]::after {
transform: rotate(-180deg) translateY(50%);
}
#footer.text-white .nav-link[aria-expanded] {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
#footer.text-white .nav-link[aria-expanded]::after {
filter: invert();
}
#footer-about.bg-transparent {
background: none;
border: none;
padding: 0 !important;
}
#footer-about.bg-transparent {
background-image: none !important;
box-shadow: none !important;
}
.text-white #footer-about {
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}
.text-dark #footer-about {
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}
/* ========================================================================
INFORMATIONS GÉNÉRALES SUR LE SITE
Propriété de © 2019/2024 Shopiweb.fr
Pour plus d'informations, visitez : https://www.shopiweb.fr
======================================================================== */
/* =====================
Barre d'annonce
===================== */
.announcement-bar {
position: relative;
transition: all .2s ease-out;
}
.announcement-bar p {
margin: 0;
}
.announcement-bar a {
text-decoration: none;
transition: all 0.2s ease-out;
}
.announcement-bar.text-white a {
color: white;
}
.announcement-bar.text-dark a {
color: var(--bs-dark);
}
.announcement-bar a:hover,
.announcement-bar a:focus {
opacity: 0.75;
}
.announcement-bar a .rte,
.announcement-bar .rte {
display: flex;
align-items: center;
justify-content: center;
}
.announcement-bar svg {
transition: all 0.2s ease-out;
}
.announcement-bar a:hover svg {
transform: translateX(2px);
}
.announcement-bar .carousel-control {
width: auto;
height: auto;
}
.announcement-bar .carousel-control-icon {
width: 1.75rem;
height: 1.75rem;
background-size: 70%;
}
.announcement-bar ul.timer-countdown {
margin: 0 0 0 1rem;
}
/* =====================
Navigation
===================== */
.navbar .navbar-brand {
color: currentColor;
}
.navbar .nav-link {
padding: 0.25rem 0.75rem;
font-weight: 500;
display: flex;
align-items: center;
}
.navbar.text-body .nav-link {
color: var(--bs-body);
}
.navbar.text-body .nav-link:hover {
color: var(--bs-dark-lighten-10);
}
.navbar.text-body .nav-link.active {
color: var(--bs-primary);
}
.navbar.text-white .nav-link {
color: white;
}
.navbar.text-white .nav-link:hover {
color: rgba(255, 255, 255, 0.9);
}
.navbar.text-white .nav-link.active {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
.navbar .nav-link.dropdown-toggle::after {
transform: translateY(1px);
}
#navbar-desktop .dropdown-menu {
border: none;
overflow: hidden;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
margin-top: 5px;
padding: 1rem;
transition: margin-top 700ms;
}
#navbar-desktop.bg-body .dropdown-menu,
#navbar-desktop.bg-white .dropdown-menu {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
/* bg_color menu */
#navbar-desktop.bg-dark .dropdown-menu .dropdown-item,
#navbar-desktop.bg-primary .dropdown-menu .dropdown-item,
#navbar-desktop.bg-secondary .dropdown-menu .dropdown-item,
#navbar-desktop.bg-tertiary .dropdown-menu .dropdown-item {
color: white;
}
#navbar-desktop.bg-dark .dropdown-menu .dropdown-item:hover,
#navbar-desktop.bg-primary .dropdown-menu .dropdown-item:hover,
#navbar-desktop.bg-secondary .dropdown-menu .dropdown-item:hover,
#navbar-desktop.bg-tertiary .dropdown-menu .dropdown-item:hover {
color: var(--bs-dark-lighten-10);
}
/* bg_color mega-menu */
#navbar-desktop.bg-dark .dropdown-megamenu .dropdown-item,
#navbar-desktop.bg-primary .dropdown-megamenu .dropdown-item,
#navbar-desktop.bg-secondary .dropdown-megamenu .dropdown-item,
#navbar-desktop.bg-tertiary .dropdown-megamenu .dropdown-item {
color: white;
}
#navbar-desktop.bg-dark .dropdown-megamenu .dropdown-item:hover,
#navbar-desktop.bg-primary .dropdown-megamenu .dropdown-item:hover,
#navbar-desktop.bg-secondary .dropdown-megamenu .dropdown-item:hover,
#navbar-desktop.bg-tertiary .dropdown-megamenu .dropdown-item:hover {
color: var(--bs-dark-lighten-10);
}
/* test */
.dropdown-menu[data-bs-popper] {
top: 90%;
}
.dropdown-megamenu {
width: 100%;
padding: 1.5rem;
}
.dropdown-megamenu.show {
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.dropdown-megamenu .col {
max-width: 280px;
}
.dropdown-megamenu .dropdown-item-level-2 {
font-family: var(--bs-headings-font-family);
font-size: 1rem;
margin-bottom: 0.25rem;
}
.dropdown-megamenu .dropdown-item-level-3 {
font-size: 0.875rem;
}
.dropdown-megamenu .dropdown-item {
font-size: 0.875rem;
}
.dropdown-megamenu .megamenu-col a {
display: block;
text-align: center;
color: currentColor;
text-decoration: none;
font-size: 0.875rem;
}
.dropdown-megamenu .megamenu-col img {
transition: all 0.2s ease-out;
}
.dropdown-megamenu .megamenu-col a:hover img {
opacity: 0.85;
}
.navbar .nav-icons .nav-link {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* backdrop */
.navbar-backdrop {
--bs-bg-opacity: 0.75;
backdrop-filter: saturate(180%) blur(20px);
transition: all 0.2s ease-out;
}
html:not(.has-scrolled) .navbar-backdrop {
--bs-bg-opacity: 1;
backdrop-filter: unset;
}
/* transparent */
.navbar-transparent {
position: absolute;
width: 100%;
transition: all 0.2s ease-out;
}
html:not(.has-scrolled) .navbar-transparent {
background: transparent !important;
box-shadow: none !important;
}
/* hover navbar start */
html:not(.has-scrolled) .navbar-hover.navbar-transparent:not(:hover) {
background: transparent !important;
box-shadow: none !important;
}
html:not(.has-scrolled) .navbar-hover.navbar-transparent:hover {
--bs-bg-opacity: 1;
background-color: rgba(
var(--bs-body-bg-rgb),
var(--bs-bg-opacity)
) !important;
color: var(--bs-body-color) !important;
}
html:not(.has-scrolled) .bg-dark.navbar-hover.navbar-transparent:hover {
--bs-text-opacity: 1;
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
html:not(.has-scrolled) .bg-primary.navbar-hover.navbar-transparent:hover {
--bs-text-opacity: 1;
--bs-bg-opacity: 1;
background-color: rgba(
var(--bs-primary-rgb),
var(--bs-bg-opacity)
) !important;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
html:not(.has-scrolled) .bg-secondary.navbar-hover.navbar-transparent:hover {
--bs-text-opacity: 1;
--bs-bg-opacity: 1;
background-color: rgba(
var(--bs-secondary-rgb),
var(--bs-bg-opacity)
) !important;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
html:not(.has-scrolled) .bg-tertiary.navbar-hover.navbar-transparent:hover {
--bs-text-opacity: 1;
--bs-bg-opacity: 1;
background-color: rgba(
var(--bs-tertiary-rgb),
var(--bs-bg-opacity)
) !important;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
html:not(.has-scrolled) .bg-light.navbar-hover.navbar-transparent:hover {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}
html:not(.has-scrolled)
.bg-primary.navbar-hover.navbar-transparent:hover
.nav-link,
html:not(.has-scrolled)
.bg-secondary.navbar-hover.navbar-transparent:hover
.nav-link,
html:not(.has-scrolled)
.bg-tertiary.navbar-hover.navbar-transparent:hover
.nav-link,
html:not(.has-scrolled)
.bg-dark.navbar-hover.navbar-transparent:hover
.nav-link {
color: white !important;
}
html:not(.has-scrolled)
.bg-primary.navbar-hover.navbar-transparent:hover
.nav-link.active,
html:not(.has-scrolled)
.bg-secondary.navbar-hover.navbar-transparent:hover
.nav-link.active,
html:not(.has-scrolled)
.bg-tertiary.navbar-hover.navbar-transparent:hover
.nav-link.active,
html:not(.has-scrolled)
.bg-dark.navbar-hover.navbar-transparent:hover
.nav-link.active {
color: white !important;
}
html:not(.has-scrolled) .navbar-hover.navbar-transparent:hover .nav-link {
color: var(--bs-body-color) !important;
}
html:not(.has-scrolled)
.navbar-hover.navbar-transparent:hover
.nav-link.active {
color: var(--bs-primary) !important;
}
html:not(.has-scrolled)
.navbar-hover.navbar-transparent:hover
.dropdown-megamenu.dropdown-menu.show {
margin: 1rem !important;
transition: margin-top 700ms;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
width: calc(100% - 2rem);
}
/* hover navbar end */
html:not(.has-scrolled) #navbar-desktop.navbar-transparent .dropdown-menu {
border-radius: var(--bs-border-radius) !important;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 2rem !important;
transition: margin-top 700ms;
}
html:not(.has-scrolled) #navbar-desktop.navbar-transparent .dropdown-megamenu {
border-radius: var(--bs-border-radius) !important;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 1rem !important;
transition: margin-top 700ms;
}
/* =====================
Diaporama
===================== */
.carousel-controls-arrows .carousel-control-prev-icon {
transition: all 0.2s ease-out;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffff' class='bi bi-arrow-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'/%3E%3C/svg%3E");
}
.carousel-controls-arrows button:hover .carousel-control-prev-icon {
transform: translateX(-2px);
}
.carousel-controls-arrows .carousel-control-next-icon {
transition: all 0.2s ease-out;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffff' class='bi bi-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
}
.carousel-controls-arrows button:hover .carousel-control-next-icon {
transform: translateX(2px);
}
.carousel-indicators-circles .carousel-indicators [data-bs-target] {
width: 8px;
height: 8px;
border-radius: 50%;
transition: all 0.2s ease-out;
}
.carousel-indicators-circles .carousel-indicators [data-bs-target].active {
transform: scale(1.4);
}
.carousel-ken-burns .carousel-item {
overflow: hidden;
}
.carousel-ken-burns .carousel-item.active img,
.carousel-ken-burns .carousel-item.active video {
animation: carousel_agrandissement 1s ease-out both;
}
@keyframes carousel_agrandissement {
to {
transform: scale(1.2);
}
}
.carousel .carousel-item-link {
display: block;
color: inherit;
text-decoration: none;
position: relative;
z-index: 1;
}
.carousel-item-blur {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.carousel-item-img,
.carousel-item-video {
width: 100%;
object-fit: cover;
display: flex;
}
.carousel-caption .subtitle {
text-transform: uppercase;
letter-spacing: 0.1rem;
}
.carousel-caption .btn {
flex-shrink: 0;
}
@media (max-width: 991px) {
.carousel-caption-mobile-top {
top: 1rem;
bottom: auto;
}
.carousel-caption-mobile-center {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.carousel-caption-mobile-bottom {
bottom: 2rem;
}
}
@media (min-width: 992px) {
.carousel-caption-desktop-left {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
}
.carousel-caption-desktop-center {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.carousel-caption-desktop-right {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
text-align: right;
}
.carousel-caption-desktop-bottom {
bottom: 2.25rem;
display: flex;
justify-content: center;
}
}
/* =====================
Carte avec image
===================== */
@media (max-width: 575px) {
.cards-with-image div.row.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 2rem;
margin: 0 -1rem -0.5rem !important;
}
.cards-with-image div.row.xs-scroll .col {
width: 75vw;
flex: none;
}
}
/* =====================
Carte avec vidéo
===================== */
@media (max-width: 575px) {
.cards-with-video div.row.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 2rem;
margin: 0 -1rem -0.5rem !important;
}
.cards-with-video div.row.xs-scroll .col {
width: 75vw;
flex: none;
}
}
/* =====================
Texte/Logo défilant (marquee)
===================== */
.marquee ul {
margin: 0;
display: inline-flex;
align-items: center;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.marquee ul:hover {
animation-play-state: paused;
}
.marquee ul li {
position: relative;
flex-shrink: 0;
padding: 0 1rem;
}
.marquee.separator-dot ul li::after {
content: "";
background-color: currentColor;
background-size: cover;
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
}
.marquee ul li a {
color: currentColor;
padding: 0.5rem 0;
text-decoration: none;
transition: all 0.2s ease-out;
}
.marquee ul li a:hover,
.marquee ul li a:focus {
opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
.marquee ul {
animation: none;
}
}
/* =====================
Collections en vedette
===================== */
.collection-item a {
display: flex;
position: relative;
color: white;
text-decoration: none;
}
.collection-item-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(var(--bs-dark-rgb), 0.25);
padding: 0.5rem 1rem;
border-bottom-left-radius: calc(var(--bs-border-radius) - 3px);
border-bottom-right-radius: calc(var(--bs-border-radius) - 3px);
transition: all 0.2s ease-out;
}
.img-thumbnail + .collection-item-title {
left: calc(0.25rem + 1px);
right: calc(0.25rem + 1px);
bottom: calc(0.25rem + 1px);
}
a:hover .collection-item-title {
background-color: rgba(var(--bs-dark-rgb), 0.5);
}
@media (max-width: 575px) {
.featured-collections ul.collection-list.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 2rem;
margin: 0 -1rem -0.5rem !important;
}
.featured-collections ul.collection-list.xs-scroll .collection-item {
width: 75vw;
flex: none;
}
}
/* =====================
Produits en vedette
===================== */
.featured-products .splide__arrow--prev {
left: 0;
transform: none;
}
.featured-products .splide__arrow--next {
right: 0;
transform: rotate(180deg);
}
.featured-products .container-fluid .splide__arrow--prev {
left: 0.5rem;
}
.featured-products .container-fluid .splide__arrow--next {
right: 0.5rem;
}
.featured-products .splide__pagination {
position: relative;
margin-top: 0.5rem;
}
.featured-products .splide__pagination__page {
background-color: rgba(var(--bs-body-color-rgb), 0.25);
opacity: 1;
transition: all 0.2s ease-out;
}
.featured-products .splide__pagination__page:hover,
.featured-products .splide__pagination__page:focus {
background-color: rgba(var(--bs-body-color-rgb), 0.5);
}
.featured-products .splide__pagination__page.is-active {
background-color: var(--bs-body-color);
}
/* Test Shopiweb pagination white */
.featured-products.text-white .splide__pagination__page {
background-color: white;
opacity: 0.5;
transition: all 0.2s ease-out;
}
.featured-products.text-white .splide__pagination__page:hover,
.featured-products.text-white .splide__pagination__page:focus {
background-color: white;
opacity: 0.75;
}
.featured-products.text-white .splide__pagination__page.is-active {
background-color: white;
opacity: 1;
}
@media (max-width: 575px) {
.featured-products .splide__pagination--mobile {
display: none;
}
}
@media (min-width: 576px) {
.featured-products .splide__pagination--mobile {
display: none;
}
.featured-products .splide__arrow--prev {
left: -0.25rem;
}
.featured-products .splide__arrow--next {
right: -0.25rem;
}
}
/* =====================
Récemment consultés
===================== */
/* =====================
Témoignages
===================== */
.testimonials {
overflow: hidden;
}
.testimonials .splide__track {
overflow: visible;
}
.testimonials .splide__slide {
opacity: 0.25;
transition: all 0.2s ease-out;
}
.testimonials .splide__slide.is-visible {
opacity: 1;
}
.testimonials .splide__arrow--prev {
left: 0;
transform: none;
}
.testimonials .splide__arrow--next {
right: 0;
transform: rotate(180deg);
}
.testimonials .splide__pagination {
position: relative;
margin-top: 1.25rem;
}
.testimonials .splide__pagination__page {
background-color: rgba(var(--bs-body-color-rgb), 0.25);
opacity: 1;
transition: all 0.2s ease-out;
}
.testimonials .splide__pagination__page:hover,
.testimonials .splide__pagination__page:focus {
background-color: rgba(var(--bs-body-color-rgb), 0.5);
}
.testimonials .splide__pagination__page.is-active {
background-color: var(--bs-body-color);
}
.testimonials.text-white .splide__pagination__page {
filter: invert();
}
.testimonials .splide__pagination--mobile {
margin-top: 1rem;
}
@media (max-width: 575px) {
/*.testimonials .splide__pagination {
display: none;
}*/
.testimonials .splide__arrow {
display: none;
}
}
@media (max-width: 575px) {
.testimonials .splide__pagination--mobile {
display: none;
}
}
@media (min-width: 576px) {
.testimonials .splide__pagination--mobile {
display: none;
}
}
.testimonials .verified {
border-radius: 5px;
padding: 3px 6px;
white-space: nowrap;
color: rgb(255, 255, 255);
font-weight: 700;
background-color: #00b67a;
}
.testimonials .description-content.show-fade {
max-height: 100px; /* Initial collapsed state */
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease;
opacity: 0.8; /* Slight transparency when collapsed */
position: relative;
}
.testimonials .description-content.show-fade.collapsed::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.description-content.expanded::after {
display: none;
}
.description-content.expanded {
opacity: 1;
}
/* =====================
Instagram galerie
===================== */
.instagram-gallery .title-branded span {
display: inline-block;
background: -webkit-linear-gradient(0deg, #8a3ab9, #e95950, #bc2a8d, #fbad50);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.instagram-gallery .splide__slide a {
display: block;
position: relative;
overflow: hidden;
}
.instagram-gallery .splide__slide a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.2s ease-out;
}
.instagram-gallery .splide__slide a:hover::before {
opacity: 1;
}
.instagram-gallery .splide__slide a::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 32px;
background-position: center;
opacity: 0;
transform: scale(0);
transition: all 0.2s ease-out;
}
.instagram-gallery .splide__slide a:hover::after {
opacity: 1;
transform: scale(1);
}
.instagram-gallery a.img-thumbnail img {
border-radius: 1.75rem;
}
.instagram-gallery-meta {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
color: white;
opacity: 0;
transform: translateY(2rem);
transition: all 0.2s ease-out;
}
a:hover .instagram-gallery-meta {
opacity: 1;
transform: translate(0);
}
.instagram-gallery-meta-likes {
display: inline-block;
position: relative;
padding-left: 26px;
margin: 0.75rem;
}
.instagram-gallery-meta-likes::before {
content: "";
background: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: center;
width: 24px;
height: 24px;
display: block;
background-size: 18px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.instagram-gallery-meta-comments {
display: inline-block;
position: relative;
padding-left: 26px;
margin: 0.75rem;
}
.instagram-gallery-meta-comments::before {
content: "";
background: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: center;
width: 24px;
height: 24px;
display: block;
background-size: 18px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* =====================
TikTok Galerie
===================== */
.tiktok-slider .container .splide__arrow--prev {
left: -1rem;
}
.tiktok-slider .container .splide__arrow--next {
right: -1rem;
}
.tiktok-slider .video-wrapper {
cursor: pointer;
color: white;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.tiktok-slider .video-wrapper::after {
content: "";
width: 36px;
height: 36px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
background-color: rgba(var(--bs-dark-rgb), 0.2);
transform: translate(-50%, -50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' class='bi bi-play-fill' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 24px;
background-position: center;
transition: all 0.2s ease-out;
pointer-events: none;
}
.tiktok-slider .video-wrapper:hover::after {
background-color: rgba(var(--bs-dark-rgb), 0.4);
}
.tiktok-slider .video-wrapper.is-playing::after {
opacity: 0;
transform: scale(0);
}
.tiktok-slider .video-wrapper .btn-toggle-sound {
display: flex;
color: white;
position: absolute;
top: 0.25rem;
right: 0.375rem;
opacity: 0;
border: none;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper .btn-toggle-sound:focus {
border: none;
box-shadow: none;
}
.tiktok-slider .video-wrapper .btn-toggle-sound:focus-visible {
box-shadow: 0 0 0 0.125rem rgba(var(--bs-dark-rgb), 0.5);
}
.tiktok-slider .video-wrapper.is-playing .btn-toggle-sound {
opacity: 1;
}
.tiktok-slider .video-wrapper.has-title::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(
rgba(var(--bs-dark-rgb), 0),
rgba(var(--bs-dark-rgb), 0.5)
);
transition: all 0.2s ease-out;
pointer-events: none;
}
.tiktok-slider .video-wrapper.has-title.is-playing::before {
opacity: 0;
}
.tiktok-slider .video-wrapper .title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
visibility: visible;
pointer-events: none;
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper.is-playing .title {
opacity: 0;
bottom: -2rem;
visibility: hidden;
}
.tiktok-slider .video-wrapper a.video-wrapper-product {
display: block;
position: absolute;
bottom: -2rem;
left: 0;
width: calc(100% - 2rem);
margin: 1rem;
opacity: 0;
background-color: rgba(var(--bs-dark-rgb), 0.75);
text-align: left;
text-decoration: none;
color: white;
visibility: hidden;
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper a.video-wrapper-product img {
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper a.video-wrapper-product:hover img,
.tiktok-slider .video-wrapper a.video-wrapper-product:focus img {
opacity: 0.85;
}
.tiktok-slider .video-wrapper.is-playing a.video-wrapper-product {
opacity: 1;
bottom: 0;
visibility: visible;
}
@media (max-width: 575px) {
.tiktok-slider .splide__arrow {
display: none;
}
}
/* =====================
Image parallaxe
===================== */
.parallax-image {
position: relative;
overflow: hidden;
background-color: var(--bs-dark);
color: white;
}
.parallax-image .img-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.parallax-image .img-mobile,
.parallax-image .img-desktop {
width: 100%;
height: 100%;
}
.parallax-image-blur {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.parallax-image-inner {
position: relative;
}
/* =====================
Stories animées
===================== */
.animated-stories img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.animated-stories .story-is-read .cercle {
display: none;
}
.animated-stories .cercle {
position: absolute;
fill: none;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 0;
animation: stories_anime_trait_bordure 6s ease-out 2 alternate;
}
.animated-stories video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
object-fit: cover;
}
.animated-stories .img-wrapper:hover .play-button {
opacity: 0.8;
}
.animated-stories .img-wrapper .play-button {
position: absolute;
top: calc(50% - 1px);
left: calc(50% + 2px);
transform: translate(-50%, -50%);
}
/* =====================
Quiz générateur
===================== */
.quiz-items .btn-quiz-value {
width: 100%;
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-body-color);
cursor: pointer;
text-align: center;
font-weight: 500;
border-radius: 0.5rem;
transition: all 0.1s ease-out;
}
.quiz-items .btn-quiz-value img {
border-radius: 0.25rem;
transition: all 0.2s ease-out;
}
.quiz-items .btn-quiz-value:hover {
color: var(--bs-primary);
}
.quiz-items .btn-quiz-value:hover img {
opacity: 0.85;
}
.quiz-items .btn-quiz-value:focus-visible {
box-shadow: 0 0 0 0.125rem rgba(var(--bs-body-color-rgb), 0.5);
}
.quiz-items .btn-quiz-value.active {
background-color: var(--bs-body-color);
color: var(--bs-body-bg);
}
.quiz .progress {
height: 0.5rem;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
/* =====================
F.A.Q (Accordéon)
===================== */
.accordion-custom .accordion-item {
border-radius: 0;
border: none;
margin-bottom: 0.5rem;
background-color: transparent;
color: currentColor;
}
.accordion-custom .accordion-button {
border-radius: var(--bs-border-radius);
/*background-color: var(--bs-light);*/
box-shadow: none;
border: var(--bs-accordion-border-width) solid
var(--bs-accordion-border-color);
}
.accordion-custom .accordion-button:hover,
.accordion-custom .accordion-button:focus {
background-color: var(--bs-light-darken-5);
}
.accordion-custom .accordion-button:not(.collapsed) {
/*background-color: var(--bs-primary);*/
/*color: white;*/
border: var(--bs-accordion-border-width) solid
var(--bs-accordion-border-color);
}
.accordion-custom .accordion-button::after {
font-family: sans-serif;
content: "+";
background-image: none;
/*background-color: var(--bs-primary);*/
/*color: white;*/
border-radius: 50rem;
padding: 0.25rem;
padding-top: 0;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 1.125rem;
}
.accordion-custom .accordion-button:not(.collapsed)::after {
content: "-";
/*background-color: white;*/
/*color: var(--bs-primary);*/
}
/* =====================
Compteur Elite
===================== */
.countdown-banner-content {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
text-align: center;
}
@media screen and (min-width: 750px) {
.countdown-banner-content {
flex-wrap: nowrap;
}
}
/* =====================
Tableau Comparatif
===================== */
.comparison-table table.rounded tfoot tr:last-child th,
.comparison-table table.rounded tfoot tr:last-child td {
border-bottom: none;
}
@media (max-width: 575px) {
.comparison-table .table-responsive {
padding-right: 1rem;
margin-right: -1rem;
}
.comparison-table table th {
font-size: 0.85rem;
}
.comparison-table table tbody th {
min-width: 33vw;
}
.comparison-table table svg {
width: 20px;
height: 20px;
}
}
/* =====================
Galerie de Styles (lookbook)
===================== */
.look-book-list-item {
position: absolute;
}
.look-book-point {
display: block;
padding: 0.25rem;
border-radius: 50%;
border: 1px solid var(--bs-primary);
background-color: transparent;
transition: all 0.2s ease-out;
animation: animation_pulse_look_book 2s infinite;
}
.look-book-point:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.look-book-point span {
background: var(--bs-primary);
display: block;
width: 1rem;
height: 1rem;
border-radius: 50%;
}
.look-book-point[aria-describedby] {
background-color: rgba(255, 255, 255, 0.5);
animation-play-state: paused;
}
@keyframes animation_pulse_look_book {
0% {
box-shadow: 0 0 0 0px rgba(var(--bs-primary-rgb), 0.25);
}
100% {
box-shadow: 0 0 0 20px rgba(var(--bs-primary-rgb), 0);
}
}
/* =====================
Compteurs animés
===================== */
.animated-counters .animated-counter-circle {
border-radius: 50%;
width: 220px;
height: 220px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
}
.animated-counters .animated-counter-circle::before {
content: "";
position: absolute;
inset: 5px;
width: 210px;
height: 210px;
border-radius: 50%;
background-color: #222;
opacity: 0.8;
}
.animated-counters .animated-counter-circle::after {
content: "";
position: absolute;
width: 175px;
height: 175px;
border: 15px solid #4d4c51;
border-radius: 50%;
background-color: #333;
box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.75), 0 -2px 2px rgba(255, 255, 255, 0.5),
inset 0 4px 2px rgba(0, 0, 0, 0.25);
}
.animated-counters .animated-counter-inner {
position: relative;
z-index: 1;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}
@media (max-width: 575px) {
.animated-counters .row-cols-2 .animated-counter-circle {
width: 140px;
height: 140px;
}
.animated-counters .row-cols-2 .animated-counter-circle::before {
width: 130px;
height: 130px;
}
.animated-counters .row-cols-2 .animated-counter-circle::after {
width: 108px;
height: 108px;
border: 8px solid #4d4c51;
}
}
/* =====================
Texte défilant
===================== */
.scrolling ul {
margin: 0;
display: inline-flex;
align-items: center;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.scrolling ul:hover {
animation-play-state: paused;
}
.scrolling ul li {
position: relative;
flex-shrink: 0;
padding: 0 1rem;
}
@media (prefers-reduced-motion: reduce) {
.scrolling ul {
animation: none;
}
}
/* =====================
Chronologie (timeline)
===================== */
.timeline-list {
position: relative;
list-style: none;
padding: 0;
margin: 1.75rem 0;
}
.timeline-list::before {
content: "";
background: rgba(var(--bs-dark-rgb), 0.5);
width: 0.25rem;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50rem;
}
.timeline-list-item {
position: relative;
width: calc(50% - 1.75rem);
}
.timeline-list-item:nth-child(odd) {
margin-left: auto;
}
.timeline-list-item::before {
content: "";
width: 1.5rem;
height: 1.5rem;
background: rgba(var(--bs-dark-rgb), 1);
border-radius: 50%;
position: absolute;
right: -1.75rem;
margin-top: 1.125rem;
transform: translateX(0.75rem);
}
.timeline-list-item:nth-child(odd)::before {
left: -1.75rem;
right: auto;
transform: translateX(-0.75rem);
}
.timeline-list-item img + .card-body .badge {
position: absolute;
top: 1rem;
right: 1rem;
}
.timeline-list-item:nth-child(odd) img + .card-body .badge {
left: 1rem;
right: auto;
}
@media (max-width: 575px) {
.timeline-list:before {
left: 1rem;
}
.timeline-list-item {
width: calc(108% - 4.5rem);
margin-left: auto;
}
.timeline-list-item:before {
left: -1.75rem;
right: auto;
}
.timeline-list-item img + .card-body .badge {
left: 1rem;
right: auto;
}
}
/* =====================
Readmore Image avec texte & Richtext
Comparaison d'images et vidéo avec texte
===================== */
.holder-readmore {
width: 100%;
}
.limited-readmore {
max-height: 400px;
transition: max-height 0.5s ease-in-out;
overflow: hidden;
position: relative;
}
.limited-readmore.l-100 {
max-height: 100px;
}
.limited-readmore.l-200 {
max-height: 200px;
}
.limited-readmore.l-300 {
max-height: 300px;
}
.limited-readmore.l-400 {
max-height: 400px;
}
.limited-readmore .bottom-readmore {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
opacity: 1;
transition: 0.5s;
}
.read-more-checker {
opacity: 0;
position: absolute;
}
.read-more-checker:checked ~ .limited-readmore {
max-height: none;
}
.read-more-checker:checked ~ .limited-readmore .bottom-readmore {
opacity: 0;
transition: 0.5s;
}
.read-more-button {
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.3rem;
color: var(--bs-link-color);
}
/* =====================
Collage Dynamique
===================== */
.collage-dynamique .img-badge-custom {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 1;
}
.collage-dynamique .collage-image-link {
display: block;
color: inherit;
text-decoration: none;
position: relative;
z-index: 1;
}
/* =====================
Tracking
===================== */
.tracking-container iframe {
border-radius: var(--bs-border-radius);
}
/* =====================
Multi-image avec texte
===================== */
.multi-image-with-text-img {
display: block;
position: relative;
margin: 40px auto 60px;
width: 50%;
transition: all 1s ease-out;
}
.multi-image-with-text-img-1 {
z-index: 1;
}
.multi-image-with-text-img:not(.multi-image-with-text-img-1) {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease-out;
}
.multi-image-with-text-img-2 {
width: 34%;
}
.entered .multi-image-with-text-img-2 {
transform: translate(-137%, -114%);
transition: all 1s ease-out;
}
.multi-image-with-text-img-3 {
width: 20%;
}
.entered .multi-image-with-text-img-3 {
transform: translate(94%, -132%);
transition: all 1.2s ease-out;
}
.multi-image-with-text-img-4 {
width: 24%;
}
.entered .multi-image-with-text-img-4 {
transform: translate(94%, -9%);
transition: all 1.6s ease-out;
}
.multi-image-with-text-img-5 {
width: 30%;
}
.entered .multi-image-with-text-img-5 {
transform: translate(-134%, -9%);
transition: all 1.4s ease-out;
}
/* =====================
Texte déroulant
===================== */
.scrolling-with-text__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.scrolling-with-text__image {
width: 100%;
display: block;
height: 100%;
line-height: 0;
}
.scrolling-text-item-rounded-img-left {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
}
.scrolling-text-image-rounded-img-left {
border-top-left-radius: var(--bs-border-radius) !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
}
.scrolling-text-item-rounded-img-right {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-top-left-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
}
.scrolling-text-image-rounded-img-right {
border-top-left-radius: 0px !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: 0px !important;
}
@media screen and (min-width: 749px) {
.scrolling-text-image-rounded-img-left {
border-right: 0px !important;
}
.scrolling-text-item-rounded-img-left {
border-left: 0px !important;
}
.scrolling-text-item-rounded-img-right {
border-right: 0px !important;
}
.scrolling-text-image-rounded-img-right {
border-left: 0px !important;
}
}
@media screen and (max-width: 749px) {
.scrolling-with-text__image {
height: auto;
padding-top: 100%;
}
.scrolling-with-text__image.scrolling-with-text__image-small {
padding-top: 75%;
}
.scrolling-with-text__image.scrolling-with-text__image-large {
padding-top: 125%;
}
.scrolling-text-item-rounded-img-left {
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
border-top: 0px !important;
}
.scrolling-text-image-rounded-img-left {
border-top-left-radius: var(--bs-border-radius) !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom: 0px !important;
}
.scrolling-text-item-rounded-img-right {
border-top-right-radius: 0px !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
border-top-left-radius: 0px !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
border-top: 0px !important;
}
.scrolling-text-image-rounded-img-right {
border-top-left-radius: var(--bs-border-radius) !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom: 0px !important;
}
}
.scrolling-text-section .grid {
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none;
column-gap: 0;
row-gap: 0;
}
.scrolling-text-section .grid__item {
padding: 0 30px;
}
.scrolling-text-section .scrolling-text-item {
padding-top: 50px;
padding-bottom: 50px;
}
.scrolling-with-text__text-item .button::before,
.scrolling-with-text__text-item .button::after {
display: none;
}
.scrolling-with-text__text.rte {
margin-bottom: 30px;
}
.scrolling-with-text__content {
align-items: center;
display: flex;
height: 100%;
}
.scrolling-with-text__text-item {
position: relative;
}
.scrolling-text-inner {
max-height: 640px;
overflow: hidden;
-webkit-mask-image: linear-gradient(
0deg,
transparent 0,
#000 20%,
#000 70%,
transparent
);
mask-image: linear-gradient(
180deg,
transparent 0,
#000 20%,
#000 70%,
transparent
);
}
.scrolling-with-text__heading {
margin: 0 0 20px;
}
.scrolling-text-vetical {
animation: verticalScroll var(--scrolling-text-speed) linear infinite forwards;
}
@keyframes verticalScroll {
to {
transform: translateY(-50%);
}
}
/* =====================
Accordéon Visuel
===================== */
section[id^="accordion-visual-"] .accordion-item,
section[id^="accordion-visual-"] .accordion-button,
section[id^="accordion-visual-"] .accordion-button:not(.collapsed),
section[id^="accordion-visual-"] .accordion-header,
section[id^="accordion-visual-"] .img-fluid,
section[id^="accordion-visual-"] .accordion-collapse.collapse.show,
section[id^="accordion-visual-"] .accordion-body {
border-radius: var(--bs-border-radius) !important;
}
.accordion-visual .accordion,
.accordion-visual .accordion-item,
.accordion-visual .accordion-button,
.accordion-visual .accordion-collapse,
.accordion-visual .accordion-body {
border: none !important;
transition: none;
}
@media (max-width: 1199px) {
.accordion-visual .accordion {
border: none !important;
}
.accordion-visual .accordion-item {
border: none !important;
margin: 0;
}
.accordion-visual .accordion-item:not(:last-child) {
border-bottom: none !important;
}
.accordion-visual .accordion-button {
font-size: 2.5rem;
text-align: center;
border-radius: 0 !important;
padding: 2rem 1.5rem 4.5rem;
}
.accordion-visual .accordion-button:not(.collapsed) {
border-bottom: none !important;
border-radius: var(--bs-border-radius) !important;
height: 280px;
}
.accordion-visual .accordion-button::after {
background-image: none;
background-color: none !important;
}
.accordion-visual .accordion-button:not(.collapsed)::after {
opacity: 0;
}
.accordion-visual .accordion-button:not(.collapsed) span {
opacity: 0;
}
.accordion-visual .accordion-button span {
width: 100%;
display: block;
text-align: center;
text-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
z-index: 1;
}
.accordion-visual .accordion-header img {
position: absolute;
top: 0;
left: 0;
height: 100%;
object-fit: cover;
/*opacity: .25;*/
transition: all .2s ease-out;
filter: blur(var(--accordion-visual-image-blur));
}
.accordion-visual .accordion-button:not(.collapsed) img {
opacity: 1;
filter: none;
}
.accordion-visual .accordion-collapse {
opacity: 0;
}
.accordion-visual .accordion-collapse.show {
animation: expandableImageTextCollapseAnimation 1s ease-out both;
}
@keyframes expandableImageTextCollapseAnimation {
to {
opacity: 1;
}
}
.accordion-visual .accordion-body {
padding-top: 3rem;
padding-bottom: 3rem;
}
}
@media (min-width: 1200px) {
.accordion-visual .accordion {
display: flex;
border: none !important;
}
.accordion-visual .accordion-item {
border: none !important;
border-right: none !important;
width: 100%;
display: flex;
margin: 0;
}
.accordion-visual .accordion-item:not(:last-child) {
border-right: none !important;
}
.accordion-visual .accordion-header {
width: 100%;
height: 100%;
}
.accordion-visual .accordion-button {
height: 100%;
font-size: 3rem;
justify-content: center;
border-radius: 0;
}
.accordion-visual .accordion-button::after {
background-image: none;
background-color: none !important;
}
.accordion-visual .accordion-button:not(.collapsed) {
background: none;
width: 360px;
border-right: none !important;
}
.accordion-visual .accordion-button:not(.collapsed) span {
opacity: 0;
}
.accordion-visual .accordion-button:not(.collapsed)::after {
opacity: 0;
}
.accordion-visual .accordion-header img {
position: absolute;
top: 0;
left: 0;
height: 100%;
object-fit: cover;
/*opacity: .25;*/
transition: all .2s ease-out;
filter: blur(var(--accordion-visual-image-blur));
}
.accordion-visual .accordion-header button:hover img {
opacity: 0.5;
}
.accordion-visual .accordion-button:not(.collapsed) img {
filter: none;
opacity: 1 !important;
}
.accordion-visual .accordion-header span {
display: block;
position: absolute;
transform: rotate(-90deg);
text-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
z-index: 1;
}
.accordion-visual .accordion-collapse:not(.show) {
opacity: 0;
}
.accordion-visual .accordion-collapse.collapsing {
height: auto;
width: 360px;
transition: none;
}
.accordion-visual .accordion-collapse.show {
width: 360px;
opacity: 0;
flex-shrink: 0;
animation: expandableImageTextCollapseAnimation 1s ease-out .2s both;
}
@keyframes expandableImageTextCollapseAnimation {
to {
opacity: 1;
}
}
.accordion-visual .accordion-body {
text-align: center;
display: flex;
align-items: center;
height: 100%;
}
.accordion-visual .accordion-item {
border: none;
transition: border 0.3s ease;
}
.accordion-visual .accordion-item.with-border {
border: none;
}
.accordion-visual .accordion-item {
transition: none;
border: none !important;
}
}
/* =====================
Image Texte (Image advanced)
===================== */
.advanced-image-in {
position: relative;
width: 100%;
height: auto;
}
.svg-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* SVG en arrière-plan */
}
/* =====================
Image Texte Explorer
===================== */
.image-text-explorer .nav-underline {
gap: 0;
}
.image-text-explorer .nav .nav-item {
flex-grow: 1;
}
.image-text-explorer .nav button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
line-height: normal;
font-size: .9rem;
padding: .5rem;
}
.image-text-explorer .nav button.active {
font-weight: normal;
color: var(--bs-primary);
border-bottom-color: currentcolor;
}
.image-text-explorer .nav button img {
transform: scale(.8);
transition: all .2s ease-out;
}
.image-text-explorer .nav button.active img {
transform: scale(1) translateY(-.25rem);
}
@media (max-width: 575px) {
.image-text-explorer .nav button {
font-size: .7rem;
}
}
/* =====================
Image Texte Compteurs
===================== */
.progress-circle-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
}
.progress-circle {
width: var(--progress-circle-size);
height: var(--progress-circle-size);
border-radius: 50%;
position: relative;
background: conic-gradient(from 0deg at 50% 50%, var(--progress-border-color) 0%, var(--progress-border-color) var(--percentage), #fff var(--percentage), #fff 100%);
display: flex;
align-items: center;
justify-content: center;
margin-right: 2rem;
flex: none;
}
.progress-circle::after {
content: "";
position: absolute;
top: var(--progress-circle-border-thickness);
bottom: var(--progress-circle-border-thickness);
left: var(--progress-circle-border-thickness);
right: var(--progress-circle-border-thickness);
background: #fff;
border-radius: 50%;
z-index: 1;
}
.progress-circle .progress-value {
position: relative;
z-index: 2;
font-size: calc(var(--progress-circle-size) * 0.25);
color: var(--progress-border-color);
}
@media only screen and (max-width: 768px) {
.progress-circle-wrapper {
flex-direction: row;
flex-wrap: wrap;
}
.progress-circle-text {
flex: 1;
margin-top: 0;
text-align: left;
}
.progress-circle {
flex: none;
margin-right: 1rem;
margin-bottom: 0;
}
}
/* =====================
Parallaxe Défilante
===================== */
.parallax-scroll {
display: block;
position: relative;
color: var(--text-color);
}
.parallax-scroll .media-wrapper {
--opacity: 0;
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.parallax-scroll .media-wrapper::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, var(--overlay-opacity));
backdrop-filter: blur(var(--overlay-blur));
-webkit-backdrop-filter: blur(var(--overlay-blur));
}
.parallax-scroll-media {
display: flex;
width: 100vw;
height: 100vh;
object-fit: cover;
}
.parallax-scroll-caption-wrapper {
position: relative;
margin-block-start: -100vh;
}
.parallax-scroll-caption-inner {
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 1rem;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.media-mobile {
display: none;
}
.media-desktop {
display: none;
}
@media (max-width: 767px) {
.media-mobile {
display: block;
}
}
@media (min-width: 768px) {
.media-desktop {
display: block;
}
}
/* =====================
Image Texte Slider
===================== */
.image-with-text-slider .carousel-indicators {
top: 30px;
right: 0;
bottom: auto;
left: auto;
flex-direction: column;
margin: 0;
}
@media (min-width: 992px) {
.image-with-text-slider .carousel-indicators {
top: 50%;
right: 60px;
transform: translate(50%, -50%);
}
}
.image-with-text-slider .carousel-indicators.align-indicators-left {
right: auto;
left: 0;
}
@media (min-width: 992px) {
.image-with-text-slider .carousel-indicators.align-indicators-left {
right: auto;
left: 60px;
transform: translate(-50%, -50%);
}
}
.image-with-text-slider .carousel-indicators [data-bs-target] {
box-sizing: content-box;
text-indent: inherit;
width: 50px;
height: 50px;
border: 1px solid transparent;
margin: .30rem;
background-color: transparent;
border-radius: 50%;
overflow: hidden;
opacity: 1;
transition: all .2s ease-out;
}
@media (min-width: 992px) {
.image-with-text-slider .carousel-indicators [data-bs-target] {
width: 70px;
height: 70px;
margin: .45rem;
}
}
.image-with-text-slider .carousel-indicators [data-bs-target].active {
border-color: white;
transform: scale(1.1);
}
.image-with-text-slider .carousel-indicators [data-bs-target]:hover {
transform: scale(1.1);
}
.image-with-text-slider .carousel-indicators [data-bs-target].active:hover {
transform: scale(1.1);
}
/* =====================
Plans Tarifaires
===================== */
.pricing-plans .card-body .description ul {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-plans .card-body .description ul li {
padding-top: .125rem;
padding-bottom: .125rem;
}
@media (max-width: 575px) {
.pricing-plans .row {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 0.5rem;
margin: 0 -1rem -0.5rem !important;
}
.pricing-plans .row .col {
width: 75vw;
flex: none;
}
}
/* =====================
Media grid
===================== */
.media-grid {}
@media (max-width: 991px) {
.media-grid-mobile-blocks {
display: flex;
flex-wrap: nowrap;
overflow: auto;
padding-bottom: 1rem;
}
.media-grid-mobile-block {
flex-shrink: 0;
width: 70vw;
max-width: 360px;
margin-right: 1rem;
}
}
@media (min-width: 992px) {
.media-grid-desktop {
display: grid;
grid-template-areas:
"b a c"
"d a e"
"f a g";
grid-gap: 1.5rem;
}
.media-grid-desktop .col:nth-child(1) {
grid-area: a;
display: flex;
align-items: center;
}
.media-grid-desktop .col:nth-child(2) {
grid-area: b;
}
.media-grid-desktop .col:nth-child(3) {
grid-area: c;
}
.media-grid-desktop .col:nth-child(4) {
grid-area: d;
}
.media-grid-desktop .col:nth-child(5) {
grid-area: e;
}
.media-grid-desktop .col:nth-child(6) {
grid-area: f;
}
.media-grid-desktop .col:nth-child(7) {
grid-area: g;
}
}
/* =====================
Section Header
===================== */
.background-text-overlay {
position: absolute;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
z-index: 0;
max-width: 100%;
box-sizing: border-box;
}
#background-text-{{ section.id }} .background-text-overlay.center {
top: 50%;
transform: translateY(-50%);
}
#background-text-{{ section.id }} .background-text-overlay.top {
top: 0;
transform: translateY(0);
}
@media (max-width: 767px) {
.text-start .background-text-overlay {
left: 0;
transform: translateY(-50%);
}
.text-center .background-text-overlay {
left: 50%;
transform: translate(-50%, -50%);
}
.text-end .background-text-overlay {
right: 0;
transform: translateY(-50%);
}
}
@media (min-width: 1024px) {
.text-lg-start .background-text-overlay {
left: 0;
transform: translateY(-50%);
}
.text-lg-center .background-text-overlay {
left: 50%;
transform: translate(-50%, -50%);
}
.text-lg-end .background-text-overlay {
right: 0;
transform: translateY(-50%);
}
}
/* Par défaut, pour les grands écrans (bureau) */
.background-text-overlay.title-overlay-size-2 {
font-size: calc(2em * 2);
}
.background-text-overlay.title-overlay-size-3 {
font-size: calc(2em * 3);
}
.background-text-overlay.title-overlay-size-4 {
font-size: calc(2em * 4);
}
/* Pour les tablettes (écran entre 768px et 1024px) */
@media (max-width: 1024px) {
.background-text-overlay.title-overlay-size-2 {
font-size: calc(1.5em * 2);
}
.background-text-overlay.title-overlay-size-3 {
font-size: calc(1.5em * 3);
}
.background-text-overlay.title-overlay-size-4 {
font-size: calc(1.5em * 4);
}
}
/* Pour les mobiles (écran inférieur à 768px) */
@media (max-width: 767px) {
.background-text-overlay.title-overlay-size-2 {
font-size: calc(1em * 2);
}
.background-text-overlay.title-overlay-size-3 {
font-size: calc(1em * 3);
}
.background-text-overlay.title-overlay-size-4 {
font-size: calc(1em * 4);
}
}
/* animation des svg soulignement */
.path-animation path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 2s ease-in-out;
transition-delay: 1s;
}
.animate__animated.animate__faster.animate .path-animation path {
stroke-dashoffset: 0;
}
/* style dégradé au texte en italique */
.background-animate {
background-size: 0% 80%;
transition: background-size 2s ease-in-out;
transition-delay: 1s;
}
.animate .background-animate {
background-size: 100% 90%;
}
/* =====================
Derniers articles (Latest articles)
===================== */
@media (max-width: 575px) {
.latest-articles ul.blog-list.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 2rem;
margin: 0 -1rem -0.5rem !important;
}
.latest-articles ul.blog-list.xs-scroll .article-item {
width: 75vw;
flex: none;
}
}
/* =====================
Multicolonne (Icon Blocks)
===================== */
@media (max-width: 575px) {
.icon-blocks div.row.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 2rem;
margin: 0 -1rem -0.5rem !important;
}
.icon-blocks div.row.xs-scroll .col {
width: 75vw;
flex: none;
}
}
/* =====================
Newsletter
===================== */
.newsletter.text-white {
position: relative;
}
.newsletter.text-white .newsletter-inner {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.newsletter.text-white .description {
opacity: 0.75;
}
.newsletter.text-white .notice {
opacity: 0.5;
}
/* =====================
Vidéo sticky
===================== */
.sticky-video {
position: relative;
position: fixed;
bottom: 3rem;
left: 0;
padding: 1rem;
z-index: 9;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
transition: all 0.4s ease-out;
}
.sticky-video.show {
visibility: visible;
opacity: 1;
}
.sticky-video:not(.show) {
z-index: -1 !important;
}
.sticky-video video {
display: block;
max-width: 100%;
}
.sticky-video .btn-close-custom {
background: var(--bs-body-bg);
color: var(--bs-body-color);
position: absolute;
top: 1.25rem;
right: 1.25rem;
opacity: 1;
display: flex;
padding: 0;
border: none;
border-radius: 50%;
transition: all 0.2s ease-out;
}
.sticky-video .video-wrapper-product {
display: block;
margin: 0.5rem 0 0;
background-color: rgba(0, 0, 0, 0.75);
text-align: left;
text-decoration: none;
color: white;
visibility: visible;
opacity: 1;
transition: all 0.2s ease-out;
}
.sticky-video .video-wrapper-product:hover,
.sticky-video .video-wrapper-product:focus {
background-color: rgba(0, 0, 0, 0.9);
}
.sticky-video .video-wrapper-product .product-price {
visibility: hidden;
opacity: 0;
height: 0;
transition: all 0.2s ease-out;
}
/* =====================
Sticky ATC (Ajouter au panier)
===================== */
#sticky-atc {
padding: 0.75rem 0;
transform: translateY(100%);
transition: all 0.2s ease-out;
box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
#sticky-atc.show {
z-index: 1019;
transform: translateY(0);
}
#sticky-atc.text-dark {
box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
#sticky-atc .product-img {
max-width: 90px;
flex-shrink: 0;
}
#sticky-atc .spr-badge {
margin: 0 0 0.25rem;
}
#sticky-atc.product-price .price-badge-sale {
background-color: var(--bs-success);
font-size: 0.75rem;
margin-left: 0.75rem;
}
#sticky-atc .dropdown-menu {
max-height: 300px;
min-width: 260px;
overflow: auto;
}
#sticky-atc .dropdown-item:active small {
color: white !important;
}
#sticky-atc form.loading .btn-atc:after {
display: none;
}
#sticky-atc .btn-atc {
min-width: 120px;
}
@media (max-width: 575px) {
#sticky-atc .product-img {
max-width: 50px;
}
#sticky-atc .spr-badge {
display: none;
}
#sticky-atc .btn-atc {
font-size: 0.875rem;
}
#sticky-atc .dropdown-menu {
left: -0.5rem !important;
}
}
/* =====================
Pied de page (footer)
===================== */
#footer .nav-link {
font-size: 0.875rem;
}
#footer a {
transition: all 0.2s ease-out;
}
#footer.text-white #footer-blocks a:not(.btn) {
color: white;
opacity: 0.75;
}
#footer.text-white #footer-blocks a:not(.btn):hover {
opacity: 1;
}
#footer.text-dark #footer-blocks a:not(.btn) {
color: var(--bs-dark);
}
#footer.text-dark #footer-blocks a:not(.btn):hover {
opacity: 0.75;
}
.footer-block .title {
position: relative;
margin-bottom: 1.25rem;
text-transform: uppercase;
}
.footer-block .title::before {
content: "";
position: absolute;
bottom: -0.75rem;
left: 0;
width: 1.5rem;
height: 0.125rem;
}
.text-white .footer-block .title::before {
background-color: var(--bs-primary);
}
.text-dark .footer-block .title::before {
background-color: rgba(0, 0, 0, 0.5);
}
.bg-dark .footer-block .title::before,
.bg-white .footer-block .title::before,
.bg-light .footer-block .title::before {
background-color: var(--bs-primary);
}
/*#footer.text-white .rte {
color: rgba(255, 255, 255, 0.75);
}*/
#footer-about {
padding: 1.25rem;
}
.text-white #footer-about {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, .1);
}
.text-dark #footer-about {
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
}
#footer-about.text-white a:not(.btn) {
color: white;
opacity: 0.75;
}
#footer-about.text-dark a:not(.btn) {
color: var(--bs-dark) !important;
opacity: 0.75;
}
#footer-about .navbar-brand {
opacity: 1 !important;
display: inline-block;
}
#footer-about a {
text-decoration: none;
}
.text-white #footer-copyright a:not(.btn) {
color: white;
}
.text-dark #footer-copyright a:not(.btn) {
color: var(--bs-dark);
}
#footer-copyright .payment-icons svg {
height: 20px;
width: auto;
}
#footer .social-icons-wrapper {
display: inline-flex;
flex-direction: column;
}
#footer .nav-link[aria-expanded] {
padding: 1rem 2.25rem 1rem 0;
font-weight: 500;
font-size: 1rem;
margin: 0;
position: relative;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#footer .nav-link[aria-expanded]::after {
content: "";
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-size: cover;
transition: all 0.2s ease-out;
}
#footer .nav-link[aria-expanded="true"]::after {
transform: rotate(-180deg) translateY(50%);
}
#footer.text-white .nav-link[aria-expanded] {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
#footer.text-white .nav-link[aria-expanded]::after {
filter: invert();
}
#footer-about.bg-transparent {
background: none;
border: none;
padding: 0 !important;
}
#footer-about.bg-transparent {
background-image: none !important;
box-shadow: none !important;
}
.text-white #footer-about {
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}
.text-dark #footer-about {
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}