/*
 Theme Name:   Ride and co
 Theme URI:    https://rideandco.com/
 Description:  Thème enfant pour le thème Storefront
 Author:       Osmova
 Author URI:   https://osmova.com
 Template:     storefront
 Version:      1.0.0
*/

/* ========================================================================== Couleurs du thème ========================================================================== */
.grecaptcha-badge {
    display : none !important;
}

:root {
    --color-primary: #120A8F;
}

/* Liens */
a, a:visited {
    color: #120A8F;
   /* Remplacez #yourAccentColor par la couleur d'accent souhaitée */
}
a:hover, a:focus, a:active {
    color: #120A8F;
   /* Remplacez #yourAccentHoverColor par la couleur de survol souhaitée */
}
/* Override de la couleur grise sur les titres */
h1, h2, h3, h4, h5, h6, .wc-block-grid__product-title {
    color: black;
}
/* Helpers */
.bg-primary {
    background-color: #120A8F;
}
.text-primary {
    color: var(--color-primary);
}
.uppercase {
    text-transform: uppercase;
}
.right {
    float: right;
}
.text-warning {
    color: #cf8d29;
}
.hidden {
    display: none;
}
@media screen and (min-width: 769px) {
    .hidden-desktop {
        display: none !important;
    }
}
@media screen and (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }
}
/* Boutons */
button, button[disabled]:hover, input[type="button"], input[type="reset"], input[type="submit"], .button, .button[disabled]:hover, .button:focus, .button:hover, .button:visited {
    background-color: #120A8F;
   /* Couleur de fond des boutons */
    border-color: #120A8F;
   /* Couleur de la bordure des boutons */
    color: #ffffff;
   /* Couleur du texte des boutons */
   font-weight: normal;
}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .button:focus, .button:visited:hover {
    background-color: #120A8F;
   /* Couleur de fond des boutons au survol */
    border-color: #120A8F;
   /* Couleur de la bordure des boutons au survol */
    color: #ffffff;
   /* Couleur du texte des boutons au survol */
}
/* Liens dans les widgets */
.widget a, .widget a:visited {
    color: #120A8F;
}
.widget a:hover, .widget a:focus {
    color: #120A8F;
}
/* .woocommerce-error {
    display: none !important;
} */
h2 {
    font-size: 2.5rem;
}
h3 {
    font-size: 2rem;
}
.fixed {
    position: fixed;
}
.sticky-element.fixed {
    position: fixed !important;
}
/* Désactiver l'outline pour les éléments à focus */
a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
    outline: none !important;
    outline-color: transparent !important;
}
/* Spécifiquement pour les éléments mentionnés dans la deuxième règle */
a:focus, input:focus, textarea:focus, button:focus {
    outline: none !important;
}
/* Styles globaux pour les listes */
#main.site-main ol, #main.site-main ul {
    list-style: none;
   /* Supprime les marqueurs de liste par défaut */
    padding-left: 0;
   /* Supprime le retrait par défaut */
}
#main.site-main ol li, #main.site-main ul li {
    position: relative;
    padding-left: 50px;
   /* Ajouter un espace pour les marqueurs personnalisés */
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: black;
}
/* Personnalisation des éléments de liste non ordonnée */
#main.site-main ul {
    list-style: none;
    padding-left: 0;
}
  
#main.site-main ul li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
}
  
#main.site-main ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: no-repeat url("./src/img/icons/check-vert.svg") 50%;
    background-color: rgba(25, 14, 139, 0.1); /* Fond bleu avec 10% d'opacité */
    background-size: .875rem .625rem;
    border-radius: 90px;
  }
/* Initialisation du compteur pour les listes ordonnées */
#main.site-main ol {
    counter-reset: count;
   /* Initialise le compteur à 0 */
}
#main.site-main ol li {
    counter-increment: count;
   /* Incrémente le compteur pour chaque li */
}
/* Personnalisation des éléments de liste ordonnée */
#main.site-main ol li::before {
    content: counter(count);
   /* Utilise le compteur pour le contenu */
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background-color: rgba(25, 14, 139, 0.1); /* Fond bleu avec 10% d'opacité */
    border-radius: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #120A8F;
    font-size: 0.9rem;
}
/* Neutraliser les styles utilisateur agent pour ::marker */
#main.site-main ol li::marker, #main.site-main ul li::marker {
    unicode-bidi: normal !important;
    font-variant-numeric: normal !important;
    text-transform: inherit !important;
    text-indent: inherit !important;
    text-align: inherit !important;
    text-align-last: inherit !important;
    display: none !important;
   /* Cache le marker si c'est ce que vous souhaitez */
}
/*
 * Neutraliser le style ::before pour les éléments avec la classe .no-before
 * Neutralise également le sélecteur de pays du checkout, et la liste des attributs des produits
 * dans le résumé de la commande
 */
 #main.site-main ul li.no-before::before,
 #main.site-main ol li.no-before::before,
 #main.site-main ul.no-before li::before,
 #main.site-main ol.no-before li::before,
 #main.site-main .components-form-token-field__suggestions-list li:before,
 #main.site-main .wc-block-components-product-details li::before,
 #main.site-main .woocommerce-order-overview.woocommerce-thankyou-order-details li::before,
 #main.site-main ul.wc-item-meta li::before,
 #main.site-main .wc-block-components-express-payment__event-buttons li::before,  /* Ajout ici */
 #main.site-main ul.wc-block-components-express-payment__event-buttons li::before /* Et ici */ {
     content: none !important;
 }
#main.site-main ul.no-margin,
#main.site-main ol.no-margin,
#main.site-main .components-form-token-field__suggestions-list li,
#main.site-main .wc-block-components-product-details li,
#main.site-main ul.wc-item-meta li {
    margin-left: 0;
}
#main.site-main ul.no-padding li,
#main.site-main ol.no-padding li {
    padding-left: 0 !important;
}
#main.site-main .components-form-token-field__suggestions-list li,
#main.site-main .wc-block-components-product-details li {
    padding-left: 16px !important;
}
/* Supprimer la barre de séparation sous les titres */
h2+h3 {
    border-top: none !important;
}
/* Style général pour tous les tableaux Gutenberg */
/* Assurez-vous que ces règles sont chargées après les autres styles */
/* Plus de spécificité en ajoutant .wp-block-table */
body .wp-block-table {
    clear: both !important;
    margin-bottom: 40px !important;
   /* Ajoute une marge inférieure pour séparer les tableaux */
}
body .wp-block-table table {
    border: 1px solid #F2F4F8 !important;
    border-bottom: 5px solid #120A8F !important;
    border-collapse: collapse !important;
}
body .wp-block-table table th, body .wp-block-table table td {
    text-align: left !important;
    padding: 0.9rem 1.5rem !important;
}
body .wp-block-table table th:not(:last-child), body .wp-block-table table td:not(:last-child) {
    border-right: 1px dashed #120A8F !important;
}
body .wp-block-table table thead th:first-child {
    color: #120A8F !important;
}

body .wp-block-table table thead th {
    color: #120A8F !important;
}
body .wp-block-table table tbody tr:nth-child(2n + 1) {
    background-color: #F2F4F8 !important;
}
body .wp-block-table table thead, body .wp-block-table table tbody tr:nth-child(2n) {
    background-color: transparent !important;
}
.wp-block-video video {
    border-radius: 10px;
}

/* Styles améliorés pour les tableaux généraux */
.entry-content table:not(.has-background) {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
}

.entry-content table:not(.has-background) th,
.entry-content table:not(.has-background) td {
    border: 1px solid #e0e0e0;
    padding: 0.9rem 1.5rem !important;
    text-align: left;
}

.entry-content table:not(.has-background) th {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #333;
}

/* Alternance de couleurs pour les lignes */
.entry-content table:not(.has-background) tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}

.entry-content table:not(.has-background) tbody tr:nth-child(even) {
    background-color: #f9f9f9 !important;
}

/* Effet de survol */
.entry-content table:not(.has-background) tbody tr:hover {
    background-color: #f0f0f0 !important;
}

/* Surcharge des styles de Storefront */
.entry-content table:not(.has-background) tbody td,
.entry-content table:not(.has-background) tbody tr:nth-child(2n) td {
    background-color: transparent !important;
}


/* ========================================================================== Top Bar Styles ========================================================================== */
.top-bar {
    width: 100%;
    background-color: #120A8F;
    padding: 10px 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top-bar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 0 15px;
    box-sizing: border-box;
}
.top-bar-text {
    flex: 1;
    text-align: center;
    font-size: 16px;
    color: #fff;
}

.top-bar-text a {
    color: #fff;
}
.top-bar-icons {
    display: flex;
    align-items: center;
}
.top-bar-icon {
    margin-left: 15px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
}
.top-bar-icon i,
.cart-icon-img {
    font-size: 18px;
    color: white;
}

.top-bar-icon i:hover,
.cart-icon-img:hover {
    color: #fff;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.top-bar-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.top-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
}

.cart-icon {
    width: 32px;  /* Taille de l'icône */
    height: 32px;
    background-image: url('./src/img/icons/panier-blanc.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    transition: background-image 0.3s ease;
}

.cart-icon:hover {
    opacity: 0.7;
}

.comparator-icon {
    width: 32px;  /* Taille de l'icône */
    height: 32px;
    background-image: url('./src/img/icons/comparateur-velo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    transition: opacity 0.3s ease;
}

.comparator-icon:hover {
    opacity: 0.7;
}


.on-sale {
    background-color: #120A8F;
    border-radius: 5px;
    color: white;
    padding: 2px 5px 2px 5px;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: center;
    margin-right: auto;
    position: absolute;
    z-index: 1;
}
.on-sale::after {
    content: url('./src/img/icons/etoile-blanche.svg');
   /* Remplacez URL_DE_L_ICONE_DE_FLECHE par l'URL de votre icône de flèche */
    margin-left: 5px;
   /* Ajustez l'espacement si nécessaire */
    width: 20px;
    height: 20px;
}

/* ========================================================================== General Header Styles ========================================================================== */
.site-header {
    padding-top: 0;
    border-bottom: none;
    position: relative;
    z-index: 100;
    background-color: #ffffff00;
}
/* ========================================================================== Header Content Styles ========================================================================== */
.header-content {
    display: flex;
    align-items: center;
    background-color: transparent;
   /* Transparent background for the whole header */
    width: 100%;
    box-sizing: border-box;
    z-index: 101;
    position: relative;
}
.cart-icon,
.comparator-icon {
    position: relative;
    transition: opacity 0.3s ease;
}

/* Styles pour le compteur du panier */
.cart-count, 
.comparator-count  {
    position: absolute;
    top: -8px; /* Ajusté pour un meilleur positionnement */
    right: -8px;
    background-color: #000;
    color: white;
    border-radius: 50%;
    width: 16px; /* Largeur fixe */
    height: 16px; /* Hauteur identique pour faire un cercle parfait */
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cart-count:empty {
    display: none;
}

/* ========================================================================== Logo and Triangle Styles ========================================================================== */
.logo-and-triangle {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding-left: 15%;
    align-self: flex-start;
}
.logo-container {
    display: flex;
    align-items: center;
    background-color: #fff;
   /* Black background for the logo */
    position: relative;
    padding-right: 0;
   /* No padding on the right to avoid space before the triangle */
    height: 100px;
}
.logo-container a {
    display: block;
}
.logo-container img {
    height: 50px;
   /* Adjust based on your logo's dimensions */
}
.triangle-container {
    height: 100px;
   /* Match the height of .logo-container img */
    display: flex;
    align-items: center;
    flex: 0 0 100px;
    background: linear-gradient(45deg, #fff 0%, #fff 50%, #fff0 50%, #fff0 100%);
    align-self: flex-start;
}
/* ========================================================================== Navigation Menu Styles ========================================================================== */
.main-navigation {
    flex: 1;
    display: flex;
    align-items: center;
    background: transparent;
   /* Transparent background for the menu */
    padding: 0 20px;
    box-sizing: border-box;
    justify-content: flex-start;
}
.header-menu {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}
.header-menu li {
    padding: 0 15px;
    color: white;
    font-weight: bold;
}
.header-menu li a {
    color: white;
    text-decoration: none;
    display: block;
}
.header-menu li.active a {
    border-bottom: 3px solid #120A8F;
   /* Active item highlight */
}
.main-navigation ul li.mobile-menu-links {
    display: none;
}
/* Menu sur tablette */
@media (max-width: 1200px) {
    .woocommerce-active header.site-header .main-navigation {
        margin-right: 0;
    }
    #mega-menu-wrap-primary #mega-menu-primary {
        padding: 0px 24px;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        font-size: 16px;
    }
    .logo-and-triangle {
        padding-left: 24px;
    }
}
/*
 * Menu sur mobile
 */
@media (max-width: 768px) {
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    .logo-container,
    .triangle-container {
        height: 75px;
    }
    .logo-container img {
        height: 35px;
    }
    .triangle-container {
        flex: 0 0 75px;
    }
    .header-content {
        background-color: white;
    }
    .header-content .logo-and-triangle {
        flex-grow: 1;
        padding-left: 1rem;
    }
    .main-navigation {
        flex: 0 0 60px;
        padding: 0;
        align-self: stretch;
        background-color: white;
    }
    .main-navigation #mega-menu-wrap-primary #mega-menu-primary {
        position: fixed;
        top: 109px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: black;
        padding-top: 60px;
        max-height: calc(100vh - 109px);
        overflow-y: scroll;
    }
    /* Fin du triangle qui dépasse dans le menu */
    .main-navigation #mega-menu-wrap-primary #mega-menu-primary::before {
        position: fixed;
        content: '';
        display: block;
        top: 109px;
        right: 0;
        background-color: white;
        width: 60px;
        height: 60px;
        background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    }
    .main-navigation #mega-menu-wrap-primary #mega-menu-primary a {
        color: white;
    }

    /* Décalage à cause de la barre d'admin de Wordpress (+46px) */
    body.admin-bar .main-navigation #mega-menu-wrap-primary #mega-menu-primary,
    body.admin-bar .main-navigation #mega-menu-wrap-primary #mega-menu-primary::before {
        top: 155px;
    }
    body.admin-bar .site-header {
        top: 46px;
    }
    body.admin-bar .main-navigation #mega-menu-wrap-primary #mega-menu-primary {
        max-height: calc(100vh - 155px);
    }

    /* Décalage du body pour ne pas qu'il soit masqué par le header */
    html body {
        margin-top: 109px;
    }

    /* Seulement le texte affiché sur la top-bar */
    header .top-bar .top-bar-icons {
        display: none;
    }
    header .top-bar .top-bar-text {
        font-size: 14px;
        line-height: 1;
    }
    /* Toggle */
    .header-content #main-navigation {
        justify-content: flex-end;
    }
    #mega-menu-wrap-primary .mega-menu-toggle {
        background: transparent;
    }
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block .mega-toggle-animated-inner,
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block .mega-toggle-animated-inner::before,
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block .mega-toggle-animated-inner::after {
        background-color: black;
    }
    #mega-menu-wrap-primary .mega-menu-toggle:not(.mega-menu-open) .mega-toggle-block .mega-toggle-animated-slider .mega-toggle-animated-inner::before {
        width: 75%;
        right: 0;
    }
    #mega-menu-wrap-primary .mega-menu-toggle:not(.mega-menu-open) .mega-toggle-block .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
        width: 50%;
        right: 0;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        font-weight: 600;
        font-size: 18px;
        line-height: 2;
        padding: 0.5rem 2rem;
        height: auto;
        color: white !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
        position: relative;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(:first-child)::before {
        content: '';
        display: block;
        position: absolute;
        height: 1px;
        background-color: #333;
        width: calc(100% - 3rem);
        top: 0;
        left: 1.5rem;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item {
        padding: 0.5rem 2rem;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        font-weight: 300;
        font-size: 18px;
        line-height: 1.5;
        color: white !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
        font-weight: 600;
        background: none;
    }
    .main-navigation ul li.mobile-menu-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 0.5rem 2rem;
    }
    .main-navigation ul li.mobile-menu-links a {
        font-weight: 600;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid white;
    }
    .main-navigation ul li.mobile-menu-links .cart-link {
        color: black !important;
        background-color: white;
    }
    .main-navigation ul li.mobile-menu-links a div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        line-height: 1;
    }
    .main-navigation ul li.mobile-menu-links a img {
        width: 24px;
        height: 24px;
    }
}
/* ========================================================================== Mega menu principal ========================================================================== */
.underline {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #120A8F;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}
.underline.active {
    transform: scaleX(1);
}
.underline.inactive {
    transform-origin: right;
    transform: scaleX(0);
}
.mega-menu-item-has-children > a.mega-menu-link {
    position: relative;
}
/* ========================================================================== Footer Styles ========================================================================== */
.site-footer {
    background-color: #120A8F;
    color: #fff;
    padding: 40px 0;
    margin-bottom: 0;
}
.footer-separator {
    border: none;
    border-top: 1px solid #333;
    margin: 0 0 20px 0;
   /* Add margin below the line */
    padding: 0;
}
.footer-widgets {
    display: flex;
    justify-content: space-between;
    padding-bottom: 40px;
    padding-top: 20px;
    flex-wrap: wrap;
   /* Allow items to wrap to the next line */
}
.footer-widget {
    flex: 1;
    margin-right: 20px;
    min-width: 200px;
   /* Ensure items have a minimum width */
    text-align: left;
   /* Center-align text */
}
.footer-widget h2 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #ffffff;
}
.footer-widget ul {
    list-style: none;
    padding: 0;
}
.footer-widget ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
    text-align: left;
}
.footer-widget ul li:before {
    content: '•';
   /* Add a bullet point */
    position: absolute;
    left: 0;
    color: #ffffff;
   /* Adjust color if needed */
}
.footer-widget ul li a,
.footer-widget p a,
.footer-contact-link {
    color: #fff;
    text-decoration: none;
}

.footer-widget ul li a:hover,
.footer-widget p a:hover,
.footer-contact-link:hover {
    text-decoration: underline;
}
.footer-widget p {
    text-align: left;
    font-size: 14px;
}
.footer-social {
    text-align: center;
    padding: 20px 0;
}
.footer-social h2 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #ffffff;
}
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-icons a {
    margin: 0 10px;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
}
.social-icons a:hover {
    color: #120A8F;
   /* Adjust this color to your accent color */
}
.footer-credit {
    text-align: center;
    padding: 20px 0;
    color: #ffffff;
}
.footer-credit p {
    margin: 5px 0;
    font-size: 10px;
}
.footer-credit a {
    color: #fff;
    text-decoration: none;
    font-size: 10px;
}
.footer-credit a:hover {
    text-decoration: underline;
    color: #120A8F;
}
.site-footer a:not(.button):not(.components-button) {
    color: #ffffff;
    font-size: 14px;
}
/* Adjustment for alignment */
.footer-widgets .footer-widget {
    margin-right: 0;
   /* Remove right margin */
}
.footer-widgets .footer-widget:not(:last-child) {
    margin-right: 20px;
   /* Add right margin to all but the last child */
}
.footer-widgets .footer-widget ul li {
    margin-bottom: 5px;
   /* Reduce bottom margin for list items */
    font-size: 14px;
}
.footer-widgets .footer-widget ul {
    margin-bottom: 20px;
   /* Add bottom margin to lists */
}
.footer-widgets .footer-widget:last-child {
    margin-right: 0;
   /* Ensure no extra margin for the last widget */
}
.data-rgpd {
    font-size: 12px !important;
    color: #ffffff;
}
/* Responsive Styles */
@media (max-width: 768px) {
    .footer-widgets {
        flex-direction: column;
        align-items: center;
        text-align: center;
   }
    .footer-widget {
        margin-right: 0;
        margin-bottom: 20px;
        min-width: 100%;
       /* Ensure full width */
        text-align: center;
       /* Center-align text */
   }
    .footer-widget ul, .footer-widget p {
        text-align: center;
       /* Center-align text in lists and paragraphs */
        margin: 0;
   }
    .footer-widget ul li {
        text-align: center;
       /* Center-align list items */
        padding-left: 0;
       /* Remove left padding */
        margin: 0;
   }
    .footer-widget ul li:before {
        display: none;
   }
}
@media (max-width: 480px) {
    .footer-widget {
        min-width: 100%;
   }
    .footer-separator {
        margin: 20px 0;
       /* Add margin above and below the line */
   }
}
/* ========================================================================== Newsletter Subscription Styles ========================================================================== */
.newsletter-subscription {
    width: 100%;
    background-color: #f5f5f5;
}
.newsletter-grid {
    display: grid;
    grid-template-columns: 2fr auto auto;
   /* Ajustez les fractions si nécessaire */
    align-items: center;
    width: 100%;
   /* Prend toute la largeur de l'écran */
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    gap: 0;
    background-color: #120A8F;
   /* Assurez-vous qu'il n'y a pas d'espace entre les colonnes */
    padding-right: 15%;
}
.newsletter-column {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
   /* Ajustez la hauteur si nécessaire */
}
.newsletter-left {
    background-color: #FAFAFA;
   /* Couleur de fond rouge pour visualisation */
}
.newsletter-triangle {
    background-color: transparent;
   /* Assurez-vous que l'arrière-plan est transparent */
    display: flex;
    align-items: center;
    justify-content: flex-end;
   /* Alignez à droite */
    height: 100%;
   /* Prenez toute la hauteur disponible */
    padding-right: 0;
   /* Éliminez les espacements */
}
.newsletter-right {
    background-color: #120A8F;
   /* Fond bleu pour la colonne contenant le logo */
    display: flex;
    align-items: center;
    justify-content: center;
}
.newsletter-text {
    font-size: 18px;
    margin-right: 20px;
}
.newsletter-text p {
    margin-bottom: 0px;
    color: black;
}
.newsletter-form {
    display: flex;
    align-items: center;
}
.newsletter-form input[type="email"] {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    outline: none;
}
.newsletter-form button {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #120A8F;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.newsletter-form button i {
    margin-left: 10px;
}
.newsletter-triangle-container {
    width: 101px;
    height: 101px;
    margin-left: -1px;
    margin-top: -1px;
}
.newsletter-triangle-container svg {
    width: 100%;
    height: 100%;
}
.logo-container-newsletter img {
    height: 50px;
}
@media (max-width: 768px) {
    .newsletter-grid {
        grid-template-columns: 1fr;
        text-align: center;
        padding-right: 0;
        padding-top: 1rem;
    }
    .newsletter-left {
        flex-direction: column;
        background-color: #120A8F;
    }
    .newsletter-column {
        height: auto;
    }
    .newsletter-form-column {
        justify-content: center;
    }
    .newsletter-form {
        width: calc(100% - 2rem);
    }
    .newsletter-triangle, .newsletter-right {
        display: none;
       /* Hide triangle and logo on smaller screens */
    }
    .newsletter-text {
        margin-right: 0;
    }
    .newsletter-text p {
        color: white;
    }
}
@media (max-width: 480px) {
    .newsletter-form {
        flex-direction: column;
   }
    .newsletter-form input[type="email"], .newsletter-form button {
        width: 100%;
        border-radius: 4px;
        margin-bottom: 10px;
   }
    .newsletter-form button {
        border-radius: 4px;
   }
}
.newsletter-form-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px; /* Ajustez selon vos besoins */
    margin: 0 auto;
}

.newsletter-input-row {
    width: 100%;
    margin-bottom: 10px;
}

.newsletter-input-row input[type="email"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.newsletter-consent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.consent-checkbox {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.consent-checkbox label {
    margin-right: 10px;
}

.newsletter-submit {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #120A8F;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Style pour la case à cocher */
.consent-checkbox .wpcf7-list-item {
    margin: 0;
}

.consent-checkbox input[type="checkbox"] {
    margin-right: 5px;
}

@media (max-width: 768px) {
    .newsletter-consent-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .consent-checkbox {
        margin-bottom: 10px;
    }

    .newsletter-submit {
        width: 100%;
    }
}
/* ========================================================================== Newsletter Modal ========================================================================== */
#newsletter-modal {
    display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#newsletter-modal.show {
    opacity: 1;
    visibility: visible;
}

#newsletter-modal .modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    width: 100%;
    transform: scale(0.7);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#newsletter-modal.show .modal-content {
    transform: scale(1);
    opacity: 1;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#newsletter-form {
    display: flex;
    flex-direction: column;
}

#newsletter-form input[type="email"],
#newsletter-form button {
    margin: 10px 0;
    padding: 10px;
}

#newsletter-form label {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

#newsletter-form input[type="checkbox"] {
    margin-right: 10px;
}

#newsletter-message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    display: none;
    font-weight: bold;
}

#newsletter-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#newsletter-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.modal-content {
    max-height: 80vh;
    overflow-y: auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    width: 100%;
}

.newsletter-purpose {
    margin-bottom: 15px;
    font-weight: bold;
    color: #120A8F; /* Utilisez la couleur principale de votre thème */
    text-align: center;
}

.modal-content h2 {
    text-align: center;
}

#newsletter-subscribe-grim {
    padding: 10px 20px;
    background-color: #120A8F; /* Couleur principale de votre thème */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#newsletter-subscribe-grim:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#newsletter-subscribe-grim:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#newsletter-form button[type="submit"] {
    padding: 10px 20px;
    background-color: #120A8F; /* Couleur principale de votre thème */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%; /* Pour que le bouton prenne toute la largeur du formulaire */
    margin-top: 10px;
}

#newsletter-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#newsletter-form button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ========================================================================== Fil d'arianne ========================================================================== */
/* custom-breadcrumb.css */
.storefront-breadcrumb {
    background-color: #ffffff;
    padding: 100px 20px 50px 20px;
    font-size: 16px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
   /* Aligne les éléments à gauche */
    margin: 0 auto;
   /* Centre l'élément horizontalement */
    max-width: 1350px;
   /* Ajuste la largeur maximale, changez la valeur selon vos besoins */
}
.storefront-breadcrumb a {
    color: rgba(0, 0, 0, 0.7);
   /* Noir à 70% d'opacité */
    text-decoration: none;
    margin-right: 5px;
}
.storefront-breadcrumb a:hover {
    color: rgba(0, 0, 0, 1);
   /* Noir à 100% d'opacité */
    text-decoration: underline;
}
.storefront-breadcrumb .breadcrumb-separator {
    margin: 0 5px;
    color: rgba(0, 0, 0, 0.2);
   /* Noir à 70% d'opacité */
}
.storefront-breadcrumb::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
   /* Noir à 70% d'opacité */
    margin-left: 10px;
}
.woocommerce-breadcrumb a:first-of-type::before {
    display: none;
}
.woocommerce-breadcrumb .breadcrumb-separator::after {
    opacity: 1;
}
.woocommerce-breadcrumb {
    max-width: 1200px;
    margin: 0 auto 0rem !important;
    padding: 1rem;
}
@media screen and (max-width: 768px) {
    .storefront-breadcrumb {
        padding: 2rem 1rem;
    }
    .storefront-breadcrumb .col-full {
        margin-left: 0;
    }
    .storefront-breadcrumb .woocommerce-breadcrumb {
        padding: 0;
    }
}
/* ========================================================================== Image en plein écran Homepage ========================================================================== */
.fullscreen-image {
    position: relative;
    width: 100%;
    height: 100vh;
   /* Fullscreen height */
    overflow: hidden;
}
.fullscreen-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.image-overlay {
    top: 35%;
    left: 60%;
    transform: translate(0, -50%);
    text-align: left;
    color: #ffffff;
    position: absolute;
    right: 0;
}
.image-overlay h1 {
    font-size: 6em;
    color: #ffffff;
    text-align: left;
    margin-bottom: 25%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/* Texte animé */
.animated-text-container {
    display: inline-block;
    min-width: 200px; /* Ajustez selon vos besoins */
    text-align: left;
}

.animated-text {
    border-right: 2px solid #000; /* Simule le curseur de la machine à écrire */
    padding-right: 5px;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #000; }
}
.page-template-template-homepage:not(.has-post-thumbnail) .site-main {
    padding-top: 0;
}
.page-template-template-homepage .type-page {
    padding-top: 0;
    padding-bottom: 24px;
    margin-bottom: 24px;
}
.content-area-home,
.content-area-blog-home {
    margin-top: -100px;
}
.page-template-template-homepage .entry-header {
    display: none;
}
.fullscreen-image .image-overlay h1 span {
    white-space: nowrap;
}
.hentry {
    margin-bottom: 4rem;
}

/* Texte sur la home responsive */
@media screen and (max-width: 1200px) {
    .hentry {
        margin-bottom: 2rem;
    }
    .fullscreen-image {
        height: calc(60vh - 109px);
    }
    body.admin-bar .fullscreen-image {
        height: calc(60vh - 155px);
    }
    .fullscreen-image .image-overlay {
        top: auto;
        left: auto;
        bottom: 4rem;
        right: 2rem;
        transform: none;
        width: 100%;
    }
    .fullscreen-image .image-overlay h1 {
        padding-left: 0;
        margin-bottom: 0;
        font-size: 4rem;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .fullscreen-image .image-overlay .animated-text-container {
        white-space: nowrap;
        min-width: auto;
    }
}
@media screen and (max-width: 640px) {
    .content-area-home,
    .content-area-blog-home {
        margin-top: 0;
    }
}
/* ========================================================================== Catégories de produits sur la page d'accueil ========================================================================== */
.product-categories-section {
    text-align: left;
   /* Aligner le texte à gauche */
    padding: 0;
   /* Ajuster les marges pour correspondre à celles du site */
    max-width: 1200px;
   /* Largeur maximale pour contenir la section */
    margin: 0 auto;
   /* Centrer la section avec des marges automatiques */
}
.product-categories-section h2,
.title-subtitle-block h2 {
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 0;
    font-family: 'Poppins';
}
.product-categories-section p,
.title-subtitle-block .title-subtitle__subtitle {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: black;
}
.product-categories-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
   /* Augmenter l'espacement entre les éléments */
    justify-content: flex-start;
}
.category-item {
    position: relative;
    width: calc(25% - 2rem);
   /* 25% de la largeur du conteneur parent, moins l'espacement */
    aspect-ratio: 1 / 1;
   /* Maintenir un ratio carré */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    background-size: cover;
    background-position: center;
}
.category-item:hover {
    transform: translateY(-5px);
}
.category-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.category-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.8rem;
    background: rgba(0, 0, 0, 0.3);
   /* Fond semi-transparent */
    color: #fff;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.category-name .arrow {
    margin-left: auto;
    font-size: 1.2rem;
    font-weight: normal;
}

@media screen and (max-width: 1200px) {
    .product-categories-section {
        padding: 0 24px;
    }
}

@media screen and (max-width: 640px) {
    .product-categories-grid {
        gap: 1rem;
    }
    .category-item {
        width: calc(50% - 0.5rem);
    }
    .product-categories-section {
        padding: 0 1rem;
    }
}
/* ========================================================================== sections contenu depuis editeur de pages ========================================================================== */
.page-template-template-homepage .entry-content, .page-template-template-homepage .entry-header {
    text-align: left;
   /* Aligner le texte à gauche */
    padding: 2rem 1rem;
   /* Ajuster les marges pour correspondre à celles du site */
    max-width: 1200px;
   /* Largeur maximale pour contenir la section */
    margin: 0 auto;
   /* Centrer la section avec des marges automatiques */
}
/* ========================================================================== Affichage des produits récent homepage ========================================================================== */
.custom-product-card {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    /* overflow: hidden; */
   /* Supprimez la transition pour l'effet de zoom */
}
.custom-product-card:hover {
   /* Supprimez la transformation pour désactiver l'effet de zoom */
    transform: none;
}
.custom-product-card-content {
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 15px;
    text-align: left;
    min-height: 250px;
}
.product-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0;
}
ul.products li.product img {
    margin-top: 1rem;
}
.product-info {
    text-align: left;
    padding: 10px 0;
}
.product-info .woocommerce-loop-product__title {
    font-size: 2rem;
    margin: 10px 0;
    font-family: 'Poppins';
    color: #000000 !important;
}
.product-info .woocommerce-loop-product__title a {
    color: #000000 !important;
    font-size: 18px;
    font-weight: 600;
}
.product-info .product-type-de-velo {
    font-size: 0.9rem;
    color: #000000a8;
    margin-bottom: 3px;
}
ul.products li.product .woocommerce-loop-product__title {
    margin-bottom: 0.5rem;
    min-height: 45px;
}

/* .woocommerce-loop-product__title {
    min-height: 42px;
} */
/* Styles spécifiques pour nos icônes de produit */
.product-icons img {
    width: 25px !important;
    height: 25px !important;
    margin: 0 5px 0 0 !important;
   /* Ajuste la marge : haut droit bas gauche */
    display: inline-block !important;
   /* Changez à inline-block pour permettre les marges horizontales */
}
/* Supprime la marge droite de la dernière icône */
.product-icons img:last-child {
    margin-right: 0 !important;
}
/* Style du conteneur des icônes */
.product-icons {
    display: flex;
    align-items: center;
    margin-top: 5px;
    width: fit-content;
   /* Ajuste la largeur au contenu */
}
/* Nouveau style pour les liens cliquables */
.clickable-link {
    cursor: pointer;
    text-decoration: none;
}
.clickable-link:hover {
    text-decoration: underline;
}
.icon-wrapper {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}
.icon-with-tooltip {
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.tooltip.custom-tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: black;
    color: white;
    text-align: center;
    padding: 2vh;
    border-radius: 4px;
    font-size: 12px;
    height: 20px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
/* Ajustement pour le premier élément */
.icon-wrapper.first-item .tooltip.custom-tooltip {
    left: 0;
    transform: translateX(0);
}
.icon-wrapper:hover .tooltip.custom-tooltip {
    visibility: visible;
    opacity: 1;
}
/* Flèche du tooltip */
.tooltip.custom-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
/* Ajustement de la flèche pour le premier élément */
.icon-wrapper.first-item .tooltip.custom-tooltip::after {
    left: 10px;
    margin-left: 0;
}
.product-price {
    font-size: 1.5rem;
   /* Adjust the size as needed */
    color: #000000;
   /* Adjust the color as needed */
    font-family: 'Poppins';
    border-bottom: 1px solid #e1e4e6;
    border-top: 1px solid #e1e4e6;
    margin-top: 0.5rem;
    padding: .75rem 0 .875rem;
}
.product-prix-tcc {
    font-size: 0.75rem;
    position: relative;
    top: -0.9rem;
}
.product-financing {
    font-size: 0.8rem;
    color: #000000a8;
   /* Adjust the color as needed */
    font-family: 'Poppins';
}
.product-financing .monthly-payment {
    font-size: 0.8rem;
    color: black;
}
.product-financing .monthly-paymentlist {
    font-size: 0.8rem;
    color: black;
}
.product-options {
    font-size: 0.8rem;
    color: #000000a8;
   /* Adjust the color as needed */
    font-family: 'Poppins';
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product-sku {
    color: gray;
    opacity: 0.5;
    font-size: 0.8rem;
}
.product-options .clickable-link {
    display: inline-flex;
    align-items: flex-start;
    font-size: 1rem;
}
.product-options .clickable-link::after {
    content: url('./src/img/icons/fleche-bas-verte.svg');
   /* Remplacez URL_DE_L_ICONE_DE_FLECHE par l'URL de votre icône de flèche */
    margin-left: 5px;
   /* Ajustez l'espacement si nécessaire */
}
.product-options .clickable-link .arrow-icon {
    margin-left: 5px;
    width: 20px;
    height: 20px;
    margin-top: 2%;
    margin-bottom: 0;
}
.carousel {
    position: relative;
    width: 100%;
}
.carousel-inner {
    display: flex;
    overflow: hidden;
    position: relative;
}
.carousel-item {
    min-width: 100%;
    transition: transform 0.5s ease;
    display: none;
}
.carousel-item.active {
    display: block;
}
.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 33%;
    transform: translateY(-50%);
    background-color: rgb(0 0 0 / 0%);
    border: none;
    color: white;
    padding: 10px;
   /* Ajustez la taille du padding si nécessaire */
    cursor: pointer;
    border-radius: 50%;
   /* Rendre les boutons arrondis */
    width: 50px;
   /* Ajustez la largeur si nécessaire */
    height: 50px;
   /* Ajustez la hauteur si nécessaire */
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-control-prev {
    left: 10px;
}
.carousel-control-next {
    right: 10px;
}
.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 0.5;
    background-color: rgb(0 0 0 / 0%);
}
.carousel-control-prev img, .carousel-control-next img {
    width: 60px;
   /* Ajustez la largeur de l'image si nécessaire */
    height: 60px;
   /* Ajustez la hauteur de l'image si nécessaire */
    object-fit: contain;
}
.carousel-control-prev:focus, .carousel-control-next:focus, .carousel-control-prev img:focus, .carousel-control-next img:focus {
    outline: none;
   /* Supprime l'effet de focus */
}
.carousel-indicators {
    text-align: right;
    margin-right: 1rem;
}
.carousel-indicators span,
.swiper-pagination .swiper-pagination-bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 1px;
    background-color: gray;
    border-radius: 50%;
    cursor: pointer;
    opacity: 1;
}
.carousel-indicators .active,
.swiper-pagination .swiper-pagination-bullet-active {
    background-color: black;
}
/* ========================================================================== Page produit seul single-product.php ========================================================================== */
/* Styles pour la page de produit unique */
.custom-product-container {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0px;
}
/* Assurez-vous que le contenu du produit utilise toute la largeur */
.custom-product-container .product {
    width: 100%;
}
.custom-product-container .product-info-custom {
    width: 50%;
}
.custom-product-container > .custom-product-layout {
    padding-right: 1.5rem;
}
.custom-product-container .variations_form {
    margin-bottom: 0;
}
/* Ajustez la largeur du contenu principal si nécessaire */
.single-product .content-area {
    width: 100%;
}
/* Supprimez les marges latérales par défaut si nécessaire */
.single-product .site-main {
    margin-left: 0;
    margin-right: 0;
}
/* Styles pour le fil d'Ariane */
.woocommerce-breadcrumb {
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 1rem;
}
.product-ride-and-co-red {
    background-color: #ffffff;
    min-height: 5rem;
}
.product-ride-and-co {
    background-color: #00000005;
}
.custom-product-layout {
    width: 50%;
    max-width: 1200px;
   /* Ajuster la largeur maximale */
    box-sizing: border-box;
}
.single-product .product-image {
    background-color: white;
    border-radius: 1rem;
    overflow: hidden;
}
.product-image img {
    width: 100%;
    height: auto;
    display: block;
}
.product-info-custom {
    flex: 0 0 50%;
   /* Ne rétrécit pas, ne grandit pas, occupe 40% de la largeur */
    max-width: 50%;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
    box-sizing: border-box;
    margin-top: -14vh;
}
.sticky-element {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding-left: 50px;
    font-size: 20px;
}
.share-product-infos {
    color: #120A8F;
    margin-bottom: 3vh;
    font-size: 1rem;
    opacity: 0.7;
    margin-top: 2rem;
}
.product-title {
    font-size: 4rem;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}
.product-type-de-velo-single {
    font-size: 1.2rem;
    color: #000000;
    margin-bottom: 10px;
}
.icon-single-product {
    display: flex;
    align-items: center;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
}
.assurance-info-single {
    display: flex;
    align-items: center;
    padding-right: 20px;
    border-right: 1px solid #e0e0e0;
}
.assurance-info-single img {
    margin-right: 0.5rem;
    max-height: 30px;
}
.assurance-text-single {
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
}
.assurance-text-single-title {
    color: #120A8F;
}
.separator {
    width: 1px;
    height: 100%;
    background-color: #e0e0e0;
    margin: 0 20px;
}
.product-icons-single {
    display: flex;
    align-items: center;
    margin-left: 20px;
}
.icon-wrapper-single {
    margin-right: 15px;
    position: relative;
}
.icon-with-tooltip-single {
    width: 45px;
    height: 45px;
}
.tooltip-single {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
}
.icon-wrapper-single:hover .tooltip-single {
    display: block;
}
.carousel-indicators-custom {
    display: flex;
    align-items: left;
    margin-top: -2rem;
    z-index: 2;
    position: absolute;
    margin-left: 85%;
}
.carousel-indicators-custom .gallery-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    color: #000000;
}
.carousel-counter {
    font-size: 14px;
}
.product-variations-single {
    margin-top: 20px;
}
.variation-single {
    margin-bottom: 10px;
}
.variation-single strong {
    display: block;
    font-weight: bold;
}
.color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.color-option-wrapper {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    padding: 2px;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
   /* Ajouté pour le positionnement de la croix */
}
.color-option {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: none;
}
.color-option-wrapper.selected {
    box-shadow: 0 0 0 2px #000;
}
.color-option.multi-color {
    overflow: hidden;
}
.color-option-wrapper.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
}
.color-option-wrapper.unavailable::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    color: red;
    z-index: 1;
   /* Assurez-vous que la croix est au-dessus du cercle de couleur */
}
/* Ajoutez ceci pour créer un fond blanc derrière la croix */
.color-option-wrapper.unavailable::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.61);
    border-radius: 50%;
    z-index: 0;
}
.attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.attribute-option {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.attribute-option:hover {
    border-color: #120A8F;
}
.attribute-option.selected {
    border-color: #120A8F;
    background-color: #f0f8f6;
}
.attribute-option.unavailable {
    opacity: 0.5;
    text-decoration: line-through;
    cursor: not-allowed;
}
.product-price-cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e1e4e6;
}
.single_add_to_cart_button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #120A8F;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.single_add_to_cart_button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
.product-message {
    color: red;
    font-size: 14px;
    margin-bottom: 10px;
}
.success-message {
    color: green;
    font-size: 14px;
    margin-top: 10px;
}
.product-price-single {
    font-size: 2rem;
   /* Adjust the size as needed */
    color: #000000;
   /* Adjust the color as needed */
    font-family: 'Poppins';
    margin-top: 0.5rem;
    padding: .75rem 0 .875rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    font-weight: bold;
}
.no-variations-message {
    padding: 20px;
    background-color: #080707;
    color: #ffffff;
    border: 1px solid #000000;
    border-radius: 5px;
    margin-top: 20px;
    font-size: 1rem;
    font-weight: 300;
}
.no-variations-message form {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
.no-variations-message label {
    margin-bottom: 5px;
}
.no-variations-message input[type="email"] {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 16px;
}
.no-variations-message button {
    padding: 10px 20px;
    background-color: #120A8F;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.no-variations-message button:hover {
    background-color: #0f6c5a;
}
.no-variations-message~.product-variations-single, .no-variations-message~.product-price-cart {
    display: none;
}
.error-message-container {
    margin-top: 2vh;
    text-align: center;
    color: #120A8F;
    font-style: italic;
}
.product-specs-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 20px;
    margin-top: 20px;
}
@media screen and (max-width: 768px) {
    .product-specs-block {
        flex-wrap: wrap;
    }
    .product-specs-block [sep-index="2"] {
        display: none;
    }
    .product-specs-block .spec-item:last-child {
        flex: 0 0 100%;
        padding-top: 1rem;
    }
    .product-specs-block .spec-item h4 {
        margin-bottom: 0;
    }
}
.spec-item {
    flex: 1;
    text-align: center;
}
.spec-item h4 {
    font-size: 14px;
    margin-bottom: 10px;
    text-align: left;
    opacity: 0.5;
}
.spec-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.spec-content img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
.spec-content span {
    font-size: 14px;
    font-weight: bold;
    color: black;
}
.spec-separator {
    width: 1px;
    height: 60px;
    background-color: #e0e0e0;
    margin: 0 15px;
}
.product-short-description-block {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
}
.short-description-title {
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: black;
}
.short-description-content {
    text-align: left;
    font-size: 1rem;
    line-height: 1.25;
    color: black;
}
/*
 * Nullification du style
 * @TODO - Voir si on conserve ça pour garder un style neutre ou si on le vire et qu'on modifie
 * juste les descriptions pour ne plus avoir de texte centré, d'italique etc. sauf là où on veut
 */
.short-description-content p {
    text-align: left !important;
}
.short-description-content em {
    font-style: normal;
}
.short-description-content strong {
    font-weight: normal;
}
.product-ride-and-co-infos {
    width: 100%;
    box-sizing: border-box;
    padding-top: 5vh;
    padding-bottom: 5vh;
    min-height: 5rem;
    background-color: #00000005;
}
.single-product .site-main,
.single-product .content-area {
    margin-bottom: 0;
}
.custom-product-container-infos {
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-characteristics-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.product-characteristics {
    flex: 0 0 50%;
    max-width: 50%;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 1rem;
    background-color: white;
}
.product-full-description {
    width: 100%;
    margin-top: 40px;
    padding: 20px;
    border-radius: 5px;
}
#main.site-main .product-characteristics ul li {
    font-size: 16px;
}
.product-add-to-cart .single_add_to_cart_button {
    background-color: #120A8F;
}
@media (max-width: 768px) {
    .product-characteristics {
        flex: 0 0 100%;
        max-width: 100%;
   }
}
.characteristic-group h3 {
    font-size: 1.4rem;
}
/* Style des caractéristiques d'après la maquette (je trouve ça moins bien)
.characteristic-group li strong {
    text-decoration: underline;
    display: block;
} */
.custom-product-container {
    display: flex;
}
.scrollable-content {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
}
/* Retirer la notification de woocommerce */

#custom-add-to-cart-notice {
    position: fixed;
    top: 32px;
    right: 20px;
    z-index: 9999;
    max-width: 300px;
}


.custom-notice {
    padding: 15px 45px 15px 15px; /* Augmentation du padding droit pour la croix */
    margin-bottom: 10px;
    border-radius: 4px;
    color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 35%;
}

.custom-notice-success {
    background-color: #0f6c5a;
}

.custom-notice-error {
    background-color: #f44336;
}

.notice-dismiss {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 5px;
}

.notice-message {
    margin-right: 20px; /* Espace pour éviter la superposition avec la croix */
    font-size: 1rem;
}

.custom-notice {
    /* ... styles existants ... */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.view-cart-link {
    color: #fff !important;
    text-decoration: underline;
    margin-top: 5px;
    font-size: 0.9em;
}

.view-cart-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.notice-message {
    font-size: 1rem;
}

.view-cart-link {
    font-size: 0.7rem;
}

/*
 * Responsive pour la page produit
 */
@media screen and (max-width: 768px) {
    .custom-product-container {
        flex-direction: column;
    }
    .custom-product-container .custom-product-layout {
        width: 100%;
    }
    .custom-product-container .product-info-custom {
        width: 100%;
        flex-basis: 100%;
        max-width: 100%;
        padding: 20px;
        position: static;
        margin-top: 0;
    }
    .custom-product-container .product-title {
        font-size: 1.5rem;
    }
}

/*========================================================================= Page boutique / categorie ========================================================================== */
.woocommerce-products-header {
    padding-bottom: 0px !important;
}
.product-categories-section-store p {
    margin-bottom: 0.5rem;
}
.shop-container {
    display: flex;
    gap: 30px;
}
.shop-sidebar {
    flex: 0 1 25%;
    max-width: 25%;
    display: flex;
    flex-direction: column;
}
.shop-products {
    flex: 0 0 75%;
    max-width: 100%;
}
.productlist-information-costumer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.woocommerce-sorting {
    margin-left: auto;
}
.custom-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 768px) {
    .shop-container {
        flex-direction: column;
   }
    .shop-sidebar, .shop-products {
        flex: 0 0 100%;
        max-width: 100%;
   }
    .custom-products-grid {
        grid-template-columns: repeat(2, 1fr);
   }
}
@media (max-width: 480px) {
    .custom-products-grid {
        grid-template-columns: 1fr;
   }
}
/* ========================================================================== Formulaire de filtres ========================================================================== */
.shop-sidebar form {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 8px;
}
.facetwp-facet {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0 !important;
}
.facetwp-display-value {
    color: #000000;
}
/* ========================================================================== Pagination ========================================================================== */
.facetwp-type-pager .facetwp-pager:not(:empty) {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: 3rem;
}
.facetwp-pager {
    display: flex;
    justify-content: center;
}
.facetwp-page {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #cfd2d4, 0 0 0 .25rem transparent;
    color: #1c1d21;
    flex: 0 0 auto;
    font-size: 1.0625rem;
    font-weight: 600;
    height: 3.25rem;
    line-height: 3.25rem;
    margin: .25rem .125rem;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: color .3s, box-shadow .3s;
    width: auto;
    width: 3.25rem;
}
.facetwp-page.active {
    font-weight: bold;
    cursor: default;
    color: #120A8F;
}
/* Styles pour le dropdown des facettes */
.facet-dropdown {
    position: relative;
    width: 100%;
    border-radius: 4px;
    border-bottom: 1px solid #cfd2d4;
}
.facet-dropdown-toggle {
    width: 100%;
    padding: 10px 15px;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}
.facet-dropdown-toggle:hover {
    background-color: #f5f5f5;
}
.dropdown-icon {
    border: solid #120A8F;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}
.facet-dropdown.active .dropdown-icon {
    transform: rotate(-135deg);
}
.facet-dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
    background-color: #ffffff;
    width: 100%;
    padding: 0 15px;
}
.facet-dropdown.active .facet-dropdown-content {
    max-height: 500px;
    transition-timing-function: ease-in;
    padding: 15px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.facetwp-facet .facetwp-checkbox {
    padding: 5px 0;
    margin-bottom: 0;
}
.facetwp-display-value {
    padding-right: 4px !important;
    padding-left: 24px !important;
    font-size: 14px !important;
}
.disable-hover-button:hover {
    color: inherit !important;
    background-color: inherit !important;
    border-color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.facetwp-depth {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.facetwp-checkbox.checked+.facetwp-depth {
    max-height: 1000px;
   /* Ajustez cette valeur selon vos besoins */
    transition: max-height 0.5s ease-in;
}
.facetwp-depth .facetwp-checkbox {
    display: flex;
    align-items: center;
}
.facetwp-depth .facetwp-checkbox .facetwp-display-value {
    flex-grow: 1;
}
.facetwp-depth .facetwp-checkbox .facetwp-counter {
    flex-shrink: 0;
}
.facetwp-checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
}
.facetwp-checkbox .facetwp-display-value {
    flex-grow: 1;
}
.facetwp-checkbox .facetwp-counter {
    margin-left: 5px;
}
.facetwp-depth {
    max-height: none;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 1;
}
.facetwp-depth.collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.facetwp-checkbox.expanded+.facetwp-depth {
    max-height: 1000px;
   /* Ajustez selon vos besoins */
}
.facetwp-facet .facetwp-slider-reset {
    box-shadow: none;
}
/* Hide counts in all facets with a checkboxes UI (Checkboxes facet, Range List facet in UI mode "Checkboxes" */
.facetwp-checkbox .facetwp-counter {
    display: none;
}
/* Hide counts in all Checkboxes facets */
[data-type="checkboxes"] .facetwp-counter {
    display: none;
}
/* Hide counts in a specific Checkboxes facet */
.facetwp-facet-yourfacetname .facetwp-counter {
    display: none;
}
.facettes {
    box-shadow: 0 .75rem .75rem rgba(28, 29, 33, .12);
    border-radius: .25rem;
}

@media screen and (min-width: 1200px) {
    .facetwp-display-value {
        padding-right: 8px !important;
        padding-left: 28px !important;
    }
}
/* ========================================================================== Pages du blog ========================================================================== */
.entry-header-blog {
    padding-bottom: 15vh;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.entry-title-blog {
    z-index: 1;
    position: absolute;
    margin-bottom: 1px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    font-size: 4rem;
    max-width: 1200px;
}
.custom-illustration-article img {
    margin-bottom: -50px;
    border-radius: 10px;
}
.custom-product-container-blog {
    display: flex;
    gap: 30px;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    align-items: center;
}
.custom-product-container-blog p {
    font-size: 1.2rem;
    text-align: center;
}
.product-ride-and-co-infos-blog {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    margin-top: 15vh;
}
.entry-content p {
    color: #000000;
}
// bouton de partage 
.share-product-infos {
    display: flex;
    align-items: center;
}
.return-link {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}
.return-link:hover {
    color: #120A8F;
}
.share-separator, .share-trigger {
    display: none;
   /* Caché par défaut */
}
.share-separator {
    margin: 0 10px;
}
.share-trigger {
    cursor: pointer;
    color: #333;
    transition: color 0.3s ease;
}
.share-trigger:hover {
    color: #120A8F;
}
.share-trigger i {
    margin-left: 5px;
}
/* Afficher le séparateur et le bouton de partage uniquement sur mobile */
@media (max-width: 768px) {
    .share-separator, .share-trigger {
        display: inline-block;
   }
}
// style des filtres affichés sur la page boutique 
#selected-filters {
    margin-bottom: 5vh;
}
.products__tags {
    display: inline-flex !important;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}
.products__tags span {
    margin: 0.5rem 0.5rem 0.5rem 0;
}
.label--tag {
    box-shadow: inset 0 0 0 1px #cfd2d4;
    cursor: pointer;
    font-size: 0.9375rem;
    letter-spacing: -0.001em;
    transition: box-shadow 0.3s;
    align-items: center;
    border-radius: 0.25rem;
    display: inline-flex;
    font-weight: 400;
    line-height: 1;
    padding: 0.625rem 0.875rem;
    text-transform: none;
    background: #fff;
    color: #1c1d21;
    white-space: nowrap;
}
.label--tag:after {
    background: no-repeat url("./src/img/icons/fermer-croix.svg") 50%;
    content: "";
    display: block;
    height: .625rem;
    margin-left: .5rem;
    width: .625rem;
    cursor: pointer;
   /* Assurez-vous que le curseur change pour indiquer qu'il est cliquable */
}
/* Style de base pour le label de réinitialisation */
#reset-all-filters {
    box-shadow: inset 0 0 0 1px #cfd2d4;
    cursor: pointer;
    font-size: 0.9375rem;
    letter-spacing: -0.001em;
    transition: box-shadow 0.3s;
    align-items: center;
    border-radius: 0.25rem;
    display: inline-flex;
    font-weight: 400;
    line-height: 1;
    padding: 0.625rem 0.875rem;
    text-transform: none;
    background: #fff;
    color: #1c1d21;
    white-space: nowrap;
}
/* Pseudo-élément :after pour le label de réinitialisation */
#reset-all-filters:after {
    background: none;
   /* Si vous voulez un fond particulier, spécifiez-le ici */
    content: none;
   /* Vous pouvez mettre du texte ici si nécessaire */
    display: none;
}
.label--tag#reset-all-filters {
    box-shadow: inset 0 0 0 1px #cfd2d400;
    cursor: pointer;
    font-size: 0.9375rem;
    letter-spacing: -0.001em;
    transition: box-shadow 0.3s;
    align-items: center;
    border-radius: 0.25rem;
    display: inline-flex;
    font-weight: 400;
    line-height: 1;
    padding: 0.625rem 0.875rem;
    text-transform: none;
    background: #fff;
    color: #1c1d21;
    white-space: nowrap;
    text-transform: uppercase;
    color: #120A8F;
}
.label--tag:hover {
    box-shadow: inset 0 0 0 2px #cfd2d4;
}
.remove-filter {
    margin-left: 0.5rem;
    color: #1c1d21;
    text-decoration: none;
}
.fa-trash {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.5rem;
}
.attribute-option.unavailable, .color-option-wrapper.unavailable {
    opacity: 0.5;
    pointer-events: none;
}
.variation-select.hidden {
    display: none !important;
}
.color-option-wrapper {
    display: inline-block;
}
.color-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
}
.color-option.selected {
    border-color: #000;
}
.attribute-option {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 10px;
    border: 1px solid #ddd;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.attribute-option.selected {
    background-color: #f0f0f0;
    border-color: #999;
}
.color-option.focus-visible, .attribute-option.focus-visible {
    outline: 2px solid #000;
   /* Ajustez selon vos besoins */
}
.single_variation .woocommerce-variation-price {
    display: none !important;
}
.product-price-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product-price-single {
    flex: 1;
}
.product-add-to-cart {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.product-price-wrapper {

    transition: opacity 0.3s ease;
}
.product-price-wrapper.initialized {
    opacity: 1;
}
.reset_variations {
    display: inline-block;
    padding: 5px 10px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
}
.reset_variations:hover {
    background-color: #e0e0e0;
    color: #000;
}
/* Suppression du pseudo-élément before sur le bouton de réinitialisation des variations */
a.reset_variations::before {
    content: none !important;
    display: none !important;
    margin-right: 0 !important;
}
a.reset_variations {
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 0.2rem !important;
    margin-top: 1rem !important;
}
.reset_variations {
    transition: opacity 0.3s ease;
}
.reset_variations.hidden-initially {
    opacity: 0;
    pointer-events: none;
}
.reset_variations_wrapper {
    min-height: 35px;
}
.woocommerce-variation-availability {
    display: none !important;
}
.user-help-product {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    min-height: 40px;
}
#custom-stock-info p.stock {
    margin-bottom: 0.2rem !important;
    font-size: 1rem !important;
    margin-top: 0.2rem !important;
}
/* modal commander  */
.preorder-message-compact {
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    padding: 15px;
    margin-top: 15px;
    border-radius: 4px;
    position: relative;
}
.preorder-message-compact p {
    margin-bottom: 10px;
    font-size: 14px;
}
.preorder-form-compact {
    display: flex;
    gap: 10px;
}
.preorder-email-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.preorder-submit-btn {
    background-color: #120A8F;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.preorder-submit-btn:hover {
    background-color: #0f6c5a;
}
.preorder-close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #888;
}
.preorder-close-btn:hover {
    color: #333;
}
.command-product-missing {
    overflow: hidden;
   /* Pour s'assurer que l'animation fonctionne correctement */
}
/* Conteneur principal des prix */
.product-price-container {
    display: flex;
    flex-direction: column;
    min-height: 100px; /* Hauteur minimale pour garantir l'alignement */
    justify-content: center;
}
.custom-product-card-content .product-price-container {
    min-height: auto;
}

.product-price-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px; /* Espacement entre prix barré et prix actuel */
    margin-bottom: 5px;
    flex-direction: column;
}

/* Style pour le prix barré */
.regular-price {
    font-size: 0.85rem; /* Taille réduite pour le prix barré */
    color: #666; /* Couleur grise pour moins d'emphase */
    text-decoration: none; /* Retire la décoration par défaut */
    display: flex;
}

.regular-price del {
    text-decoration: line-through; /* Ajoute la ligne de barrage */
    font-weight: normal;
}

.regular-price sup {
    font-size: 0.6rem; /* Taille encore plus petite pour le TTC */
}

/* Style pour le prix actuel */
.current-price {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.45;
    color: #000000;
}

.current-price sup {
    font-size: 0.75rem;
    vertical-align: top;
    position: relative;
    top: 0.5rem;
    left: 0.3rem;
}

/* Style pour le texte de financement */
.product-financing {
    font-size: 0.8rem;
    color: #666;
    margin-top: auto; /* Pousse le texte de financement vers le bas */
}

.monthly-paymentlist {
    font-weight: bold;
    color: #000;
}
sup {
    font-size: .75rem;
    vertical-align: top;
    top: .5rem;
    left: .3rem;
}
.product-financing {
    margin-top: 5px;
    font-size: 0.7rem;
}
.monthly-payment {
    font-weight: bold;
}
.product-categories-grid-blog {
    display: flex;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    gap: 40px;
    justify-content: space-between;
    margin-bottom: 2vh;
}
/* Responsive fiche produit */
@media screen and (max-width: 768px) {
    .product-ride-and-co-red {
        display: none;
    }
    /* Bouton ajouter au panier en pleine largeur et sous le prix */
    .product-price-wrapper {
        flex-direction: column;
    }
    .product-price-wrapper .product-add-to-cart {
        margin-left: 0;
    }
    .product-price-wrapper .product-add-to-cart,
    .product-price-wrapper .woocommerce-variation-add-to-cart,
    .product-price-wrapper button {
        width: 100%;
    }
}
@media screen and (max-width: 640px) {
    .product-price-single {
        flex-direction: column;
        align-items: flex-start;
    }
}

.category-list-blog h3 {
    font-size: 1.4rem;
    font-weight: normal;
    margin: 0;
    white-space: nowrap; /* Empêche le retour à la ligne pour chaque titre */
    text-transform: uppercase;
    font-weight: bold;
}
.category-list-blog a {
    position: relative;
    text-decoration: none;
}

.category-list-blog a .underline {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #120A8F; /* Couleur du soulignement */
    transition: width 0.3s ease;
}

.category-list-blog a .underline.active {
    width: 100%;
}

.category-list-blog a .underline.inactive {
    width: 0;
}
.filter-scroll-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none;  /* For Internet Explorer and Edge */
}

.filter-scroll-container::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

.filter-scroll-wrapper {
    display: flex;
    flex-wrap: nowrap;
}

.filter-button {
    display: inline-block;
    padding: 6px 10px;
    margin-right: 10px;
    background-color: #120A8F;
    color: white !important;
    text-decoration: none;
    border-radius: 20px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
    font-size: 1rem;
}

.filter-button:hover,
.filter-button:focus {
    background-color: #0F6C5A;
}

.product-categories-section-blog {
    text-align: left;
   /* Aligner le texte à gauche */
    padding: 2rem 1rem;
   /* Ajuster les marges pour correspondre à celles du site */
    max-width: 1200px;
   /* Largeur maximale pour contenir la section */
    margin: 0 auto;
   /* Centrer la section avec des marges automatiques */
}

.article-wrapper {
    display: flex;
    margin-bottom: 30px;
    align-items: flex-start; /* Aligne les éléments en haut */
    gap: 40px;
}

.article-image {
    flex: 3; /* Prend 1/4 de l'espace */
    margin-right: 20px;
}

.article-image img {
    border-radius: 10px; /* Ajoute des bords arrondis aux images */
    width: 100%; /* Assure que l'image prend toute la largeur de son conteneur */
    height: auto; /* Maintient le ratio d'aspect de l'image */
}

.article-content {
    flex: 3; /* Prend 3/4 de l'espace */
}

.article-content h2 {
    font-size: 2rem;
    margin-bottom: 4vh;
}

.article-content p {
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 5vh;
}

.read-more {
    color: #120A8F; /* Couleur verte spécifiée */
    font-weight: bold;
}

.subcategories-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 5vh;
}
.subcategories-scroll {
    position: relative;
    overflow: hidden;
}
.subcategories-scroll::before,
.subcategories-scroll::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1rem;
    transform-origin: center;
    z-index: 2;
    pointer-events: none;
}
.subcategories-scroll::before {
    left: 0;
    background: linear-gradient(-90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.subcategories-scroll::after {
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.filter-scroll-container {
    width: 100%;
    overflow: hidden;
    padding: 0 40px; /* Espace pour les flèches */
}
.filter-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    scroll-behavior: smooth; /* Ajoute un défilement fluide */
    transition: scroll-behavior 0.5s ease; /* Aide à la transition entre les modes de défilement */
}

.filter-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.left-arrow {
    left: 5px;
    background: url('./src/img/icons/fleche-gauche-verte.svg') no-repeat center center;
    background-size: contain;
}

.right-arrow {
    right: 5px;
    background: url('./src/img/icons/fleche-droite-verte.svg') no-repeat center center;
    background-size: contain;
}

.scroll-arrow:hover {
    opacity: 0.8;
}

.scroll-arrow:hover,
.scroll-arrow:focus,
.scroll-arrow:active {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.custom-arrow-button,
.custom-arrow-button:hover,
.custom-arrow-button:focus,
.custom-arrow-button:active {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media screen and (max-width: 640px) {
    .filter-scroll-container {
        padding: 1px; /* Espace de 1px avec le fondu si on met 0 */
    }
    .filter-scroll-wrapper {
        padding: 0 1rem;
    }
}

.cat-blog-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.cat-blog-header {
    text-align: center;
    margin-bottom: 40px;
}

.cat-blog-title {
    font-size: 2.5em;
    color: #120A8F;
}

.cat-blog-description {
    font-size: 1.1em;
    color: #666;
    margin-top: 15px;
}

.cat-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.cat-blog-article {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.cat-blog-article:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.cat-blog-article-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cat-blog-article-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}


.cat-blog-entry-summary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-blog-pagination {
    margin-top: 40px;
    text-align: center;
}

.cat-blog-pagination .page-numbers {
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #120A8F;
    border-radius: 4px;
    color: #120A8F;
    text-decoration: none;
}

.cat-blog-pagination .page-numbers.current {
    background-color: #120A8F;
    color: white;
}

.default-page-template .site-main {
    max-width: 1200px;
    margin: 0 auto;
}

/* Panier */
.woocommerce-cart-form {
    max-width: 1150px;
    margin: 0 auto;
    min-height: 300px;
}

.cart-total-heading {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.woocommerce-cart-form__cart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #e0e0e0;
    padding: 2rem;
    gap: 1rem;
}
.woocommerce-cart-form__cart-item:has(+ .cart-separator) {
    border-bottom-width: 0;
}

.product-thumbnail {
    flex: 0 0 240px;
    margin-right: 1rem;
}

.product-thumbnail img {
    max-width: 100%;
    height: auto;
}

.product-details {
    flex: 1 0 30%;
    text-align: right;
}

.product-quantity-fees {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product-quantity {
    flex: 0 0 20%;
    text-align: center;
}

.product-price-actions {
    flex: 0 0 70%;
    text-align: right;
}

.cart-footer {
    margin-top: 2rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 4rem;
}
.cart-footer .checkout-button {
    border-radius: 4px;
}
.cart-footer .checkout-button:hover {
    background-color: black;
    border-color: black;
}

.price-span {
    white-space: nowrap;
}

.custom-cart-wrapper button[name="update_cart"] {
    display: none;
}


/* Tablette */

@media screen and (max-width: 1200px) {
    .cart_item .product-thumbnail,
    .cart_item .product-details,
    .cart_item .product-quantity-fees {
        flex-shrink: 1;
    }
}
/* Seulement tablette */
@media screen and (max-width: 1200px) and (min-width: 769px) {
    .woocommerce-cart-form {
        padding: 24px;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    .woocommerce-cart-form__cart-item:has(+ .cart-separator) {
        border-bottom: 1px solid #e0e0e0;
    }
    .widget_shopping_cart_content {
        padding: 0;
        background-color: #f6f6f6;
    }
    .woocommerce-cart-form__cart-item.cart_item {
        background-color: white;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 1rem;
    }
    .woocommerce-cart-form__cart-item.cart_item,
    .featured-accessory {
        padding: 1rem;
    }
    .cart_item .product-thumbnail {
        flex: 1 1 calc(50% - 0.5rem);
        margin-right: 0;
    }

    .cart_item .product-details {
        flex: 1 1 calc(50% - 0.5rem);
        text-align: left;
    }
    .cart_item .product-fees {
        text-align: left;
    }
    .product-quantity-fees {
        flex-direction: row-reverse;
        flex: 0 0 100%;
        align-items: flex-end;
    }
    .cart_item .product-price-actions {
        align-items: flex-start;
    }
    .cart_item .product-price-custom-cart,
    .featured-accessory .product-price-custom-cart {
        font-size: 18px;
        font-weight: 600;
    }
    .featured-accessory .product-thumbnail {
        flex-basis: 120px;
    }
    .featured-accessory .product-thumbnail img {
        height: 120px;
        object-fit: contain;
        object-position: center;
    }
    .featured-accessory .product-title-cart {
        text-align: center;
    }
    .cart-footer {
        justify-content: center;
    }
}

/*
 * Équipements recommandés
 */
.cart-accessories {
    padding: 0;
    background-color: #f6f6f6;
}
.cart-accessories .featured-accessory {
    background-color: white;
    box-shadow: 0 0 4px 0 #0001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #e0e0e0;
    padding: 2rem;
}
.cart-accessories .product-financing,
.cart-accessories .product-prix-tcc {
    display: none;
}
.cart-accessories .featured-accessory .variations,
.cart-accessories .featured-accessory .variations_form {
    text-align: right;
}
.cart-accessories .featured-accessory .variations .user-help-product {
    display: none;
}
.cart-accessories .featured-accessory .product-price-wrapper,
.cart-accessories .featured-accessory .product-price-single {
    align-items: flex-end;
    padding: 0;
}
.cart-accessories .featured-accessory .color-options,
.cart-accessories .featured-accessory .attribute-options {
    justify-content: flex-end;
}
.cart-accessories .featured-accessory .current-price {
    font-size: 1.5rem;
    color: #000000;
    font-family: 'Poppins';
    margin-top: 0.5rem;
    font-weight: normal;
    line-height: 1;
}
.cart-accessories .accessories-modal .product-price-wrapper,
.cart-accessories .accessories-modal .product-price-single {
    align-items: center;
    padding: 0;
}
.cart-accessories .accessories-modal .color-options,
.cart-accessories .accessories-modal .attribute-options {
    justify-content: center;
}

.cart-accessories .product-details {
    text-align: left;
}

.cart-accessories .single_add_to_cart_button,
.cart-accessories .single_add_to_cart_button:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-primary);
    padding: 0;
}

.cart-accessories .product-fees .stock,
.cart-accessories .product-fees .quantity {
    display: none;
}

.cart-accessories .featured-accessories-price {
    text-align: right;
}

.cart-accessories .accessories-see-more {
    display: block;
    margin-top: 2rem;
}
.featured-accessory-price .product-price-custom-cart {
    text-align: right;
}

/* Élements du carousel dans la modale */
.carousel-accessories .carousel-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 4px;
    background-color: white;
}

.swiper-accessories {
    height: fit-content;
    width: 100%;
}
.swiper-accessories .swiper-wrapper {
    padding-bottom: 1rem;
}
.swiper-accessories .swiper-pagination {
    bottom: 0;
}
.swiper-accessories .swiper-slide {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
    height: auto;
    min-height: 600px;
    max-height: 600px;
    transition: all .5s;
    padding: 1rem;
}
.swiper-accessories .swiper-slide:has(.product-description.opened) {
    height: fit-content;
    max-height: fit-content;
}

.swiper-accessories .swiper-slide .product-title-cart {
    text-align: center;
}

.swiper-accessories .swiper-slide img {
    height: 200px;
    width: 200px;
    object-fit: contain;
    object-position: center;
}

.swiper-accessories .swiper-slide .accessories-price-actions {
    align-items: center;
    text-align: center;
}

.swiper-accessories .swiper-slide .button {
    text-align: center;
    width: 100%;
    background-color: #120A8F;
    border-color: #120A8F;
    color: #ffffff;
    padding: 10px;
}

.swiper-accessories .swiper-slide .product-description {
    height: fit-content;
    max-height: 7.5rem;
    overflow: hidden;
    transition: all .5s;
    position: relative;
    padding-bottom: 1.5rem;
}
.swiper-accessories .swiper-slide .product-description::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    transition: all .5s;
}

.swiper-accessories .swiper-slide .product-description.opened {
    max-height: 100vh;
}
.swiper-accessories .swiper-slide .product-description.opened::after {
    background: transparent;
}

.swiper-accessories .swiper-slide .desc-see-more {
    position: absolute;
    bottom: 2px;
    left: 0;
    font-size: 14px;
    z-index: 3;
    color: black;
    line-height: 1;
}
.swiper-accessories .swiper-slide .desc-see-more:hover {
    text-decoration: underline;
}

.swiper-accessories .carousel-control-prev,
.swiper-accessories .carousel-control-next {
    z-index: 5;
}

@media screen and (min-width: 768px) {
    .accessories-featured-price {
        color: var(--color-primary);
    }
    .cart-accessories {
        background-color: white;
    }
    .cart-accessories .featured-accessory {
        flex-direction: row;
        justify-content: space-between;
        box-shadow: none;
        padding: 20px 0;
    }
    .woocommerce-cart-form__cart-item {
        flex-direction: row;
        justify-content: space-between;
        padding: 20px 0;
    }
}

@media screen and (max-width: 640px) {
    .cart-accessories {
        padding: 1rem;
    }
    .featured-accessory {
        margin-top: 1rem;
    }
    .featured-accessory-price {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        margin-top: 1rem;
        padding-top: 1rem;
    }
    .featured-accessory-price form {
        margin-bottom: 0;
    }
    .featured-accessory-price .product-price-custom-cart {
        text-align: left;
    }
    .accessories-featured-description {
        font-weight: 300;
        color: black;
        margin-top: 1rem;
    }
    .cart-accessories .featured-accessory .single_add_to_cart_button {
        text-align: center;
        background-color: #120A8F;
        border-color: #120A8F;
        color: #ffffff;
        padding: 10px;
        border-radius: 4px;
    }
    .cart-accessories .accessories-see-more {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 14px;
    }
    .cart-accessories .accessories-see-more img {
        width: 32px;
        height: 32px;
    }
    .swiper-accessories .swiper-slide {
        min-height: 400px;
    }
    .cart-accessories .featured-accessory .variations .product-price-wrapper,
    .cart-accessories .featured-accessory .variations_form .product-price-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        flex: 1 1 100%;
    }
    .cart-accessories .featured-accessory .is-variable .product-fees,
    .cart-accessories .featured-accessory .is-variable .product-fees {
        flex: 1 1 100%;
    }
    .cart-accessories .featured-accessory .variations .variation-single ,
    .cart-accessories .featured-accessory .variations_form .variation-single  {
        text-align: center;
    }
    .cart-accessories .featured-accessory .variations .featured-accessory-price,
    .cart-accessories .featured-accessory .variations_form .featured-accessory-price {
        justify-content: center;
    }
    .cart-accessories .featured-accessory .variations .color-options,
    .cart-accessories .featured-accessory .variations_form .color-options {
        justify-content: center;
    }
    .cart-accessories .featured-accessory .variations .product-price-single,
    .cart-accessories .featured-accessory .variations_form .product-price-single {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .cart-accessories .featured-accessory .variations .price-display,
    .cart-accessories .featured-accessory .variations_form .price-display {
        text-align: left;
    }
    .cart-accessories .featured-accessory .current-price {
        font-size: 18px;
        font-weight: 600;
    }
}

.product-title-cart {
    font-size: 1.2rem !important;
    margin-bottom: 5px;
}

.product-type-de-velo-single {
    font-size: 0.9rem;
    color: #666;
}

.quantity-wrapper {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.quantity-toggle {
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.quantity-selector {
    margin-top: 10px;
}

.product-price {
    font-weight: bold;
    margin-bottom: 5px;
}

.marquage-obligatoire,
.eco-participation {
    font-size: 12px;
    color: black;
    margin: 2px 0;
    font-weight: 300;
}

.product-remove {
    margin-top: 10px;
}

.product-remove a {
    color: #120A8F;
    text-decoration: none;
}

.actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.cart_totals {
    display: none;
}
.product-fees {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

.product-fees p {
    margin: 2px 0;
}
.product-price-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.product-price {
    font-weight: bold;
    margin-bottom: 5px;
}

.product-fees {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 5px;
}

.product-fees p {
    margin: 2px 0;
}

.product-remove {
    margin-top: 5px;
}

.product-remove a.remove {
    color: #120A8F !important;
    font-weight: normal;
    text-decoration: none;
    font-size: 0.9em;
}

.product-remove a.remove:hover {
    text-decoration: underline;
}
.woocommerce-cart .product-remove a.remove,
.woocommerce-cart .product-remove a.remove:hover {
    position: static !important;
    float: none !important;
    display: inline-block !important;
    font-size: 0.9em !important;
    color: #120A8F !important;
    background: transparent !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
    font-weight: normal !important;
    text-decoration: none !important;
    vertical-align: bottom;
}

.woocommerce-cart .product-remove a.remove::before {
    content: none !important;
}

.woocommerce-cart .product-remove a.remove:hover {
    text-decoration: underline !important;
}

.woocommerce-cart .product-remove {
    text-align: right !important;
}
.product-price-custom-cart {
    font-size: 1.5rem;
    color: #000000;
    font-family: 'Poppins';
    margin-top: 0.5rem;
}
.additionals-taxs {
    font-size: 0.7rem;
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin-bottom: 0px;
}

.tax-view-custom {
    color: black;
    font-weight: bold;
    font-size: 0.8rem;
}
.color-price-cart-custom {
    color: #120A8F;
}

@media screen and (max-width: 640px) {
    .product-title-cart {
        font-size: 1rem !important;
    }
}

/*
 * Comparateur
 */
.product-options .product-compare {
    font-size: 0.8rem;
    margin-bottom: 0;
}
.product-compare {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-compare img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}
.product-compare .tooltip {
    position: absolute;
    background-color: #0008;
    color: white;
    border-radius: 4px;
    white-space: nowrap;
    padding: 0 6px;
    bottom: -1rem;
    opacity: 0;
    transition: all .2s;
    z-index: 3;
    font-size: 0.8rem;
    pointer-events: none;
}
.product-compare:has(a:hover) .tooltip {
    bottom: -2rem;
    opacity: 1;
}
ul.products li.product .product-compare img {
    margin: 0;
}
body:has(.comparator-container) .woocommerce {
    display: none;
}
/* Page comparateur */
.comparator-container {
    text-align: left;
   /* Aligner le texte à gauche */
    padding: 2rem 1rem;
   /* Ajuster les marges pour correspondre à celles du site */
    max-width: 1200px;
   /* Largeur maximale pour contenir la section */
    margin: 0 auto;
   /* Centrer la section avec des marges automatiques */
}
.comparator-container h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-family: 'Poppins';
}
.comparator-container p {
    font-size: 1.2rem;
    margin-bottom: 4rem;
}

.comparator-table-container {
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    max-height: 85vh;
    overflow-y: auto;
}

.comparator-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.comparator-table thead th {
    background: #fff;
}

.comparator-table {
    width: 100%;
    table-layout: fixed;
}
.comparator-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}
.comparator-table thead th {
    width: auto;
    color: black;
}
.comparator-table td {
    text-align: center;
}
.comparator-table thead th:first-child {
    width: min-content;
}
.comparator-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
}
.comparator-table tbody tr.group-header th {
    font-size: 1.5rem;
    color: #333333;
}
.comparator-container .comparator-table tbody th,
.comparator-container .comparator-table tbody td {
    background-color: white;
}
.comparator-container .comparator-table tbody tr:nth-child(2n) th,
.comparator-container .comparator-table tbody tr:nth-child(2n) td {
    background-color: #fbfbfb;
}
.comparator-table .no-value {
    color: #aaa;
}
.comparator-table .field-name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}
.comparator-table .field-icon {
    width: 32px;
    height: 32px;
}
.comparator-table .field-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Accordéon comparateur */
.comparator-table .accordion-header {
    cursor: pointer;
    user-select: none;
}
.comparator-table .accordion-header th {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: #f5f5f5;
    transition: background-color 0.2s ease;
}
.comparator-table .accordion-header:hover th {
    background-color: #ebebeb;
}
.comparator-table .accordion-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}
.comparator-table .accordion-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #120A8F;
    border-bottom: 2px solid #120A8F;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-right: 0.5rem;
}
.comparator-table .accordion-icon.rotated {
    transform: rotate(-135deg);
}
.comparator-table .accordion-content {
    transition: opacity 0.2s ease;
}
.comparator-table .accordion-section.collapsed .accordion-content {
    display: none;
}
.comparator-table .subgroup-header th {
    font-size: 1.1rem;
    font-weight: 600;
    color: #555;
    background-color: #f9f9f9 !important;
    padding: 0.75rem 1rem;
}

/* Responsive accordéon comparateur */
@media screen and (max-width: 768px) {
    .comparator-table .accordion-header th {
        padding: 0.75rem;
    }
    .comparator-table .accordion-title {
        font-size: 1rem;
    }
    .comparator-table .accordion-icon {
        width: 8px;
        height: 8px;
    }
    .comparator-table .subgroup-header th {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
}

/* Responsive comparateur */
@media screen and (max-width: 1024px) {
    .comparator-table tr {
        display: flex;
        flex-wrap: wrap;
    }
    .comparator-table th {
        width: 100%;
    }
    .comparator-table td {
        flex: 1 1;
        text-align: center;
    }
}
@media screen and (max-width: 768px) {
    .comparator-table tr {
        display: block;
    }
    .comparator-table th,
    .comparator-table td {
        display: block;
    }
}

/* Override du système de grille de Woocommerce */
.products.columns-3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}
.products.columns-3::before,
.products.columns-3::after {
    content: none;
}

@media screen and (min-width: 768px) {
    .products.columns-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1001px) {
    .products.columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}
.products.columns-3 li {
    width: 100% !important;
    margin-right: 0 !important;
}

/* Affichage des pubs */
.recommendation-card .product-image,
.recommendation-card .product-image .carousel,
.recommendation-card .product-image .carousel-inner,
.recommendation-card .product-image .carousel-inner * {
    height: 100%;
}
.recommendation-card .product-image img {
    width: 100%;
    object-fit: contain;
    object-position: center;
}
.recommendation-card .product-image img.cover {
    object-fit: cover;
}
.recommendation-card .product-image .carousel {
    position: relative;
}
.recommendation-card .carousel-indicators {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    gap: 0.5rem;
}
.recommendation-card .carousel-control-prev,
.recommendation-card .carousel-control-next {
    top: 50%;
}

/* Modales */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    overflow-y: scroll;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    z-index: 1000;
}
.modal-backdrop {
    z-index: 1001;
    position: fixed;
    inset: 0;
    background-color: #0006;
}
.modal-body {
    width: 100%;
    max-width: 1200px;
    z-index: 1002;
    background-color: #fff;
    box-shadow: #000a 0 0 8px;
    padding: 2rem;
    position: relative;
}
.accessories-modal .modal-body {
    background-color: #FAFAFA;
}
.modal-title {
    font-size: 1.5rem;
    color: black;
    margin-bottom: 2rem;
}
.modal-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2rem;
}
.modal:not(.opened) {
    display: none;
}
.modal-close img {
    width: 24px;
    height: auto;
}

@media screen and (max-width: 768px) {
    .modal {
        padding: 0;
    }
    .modal-body {
        height: 100vh;
        width: 100vw;
        overflow-y: scroll;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
    }
    body.admin-bar .modal {
        top: 46px;
    }
    body.admin-bar .modal-body {
        height: calc(100vh - 46px);
    }
    .modal-close {
        padding: 1rem;
    }
    .modal-title {
        padding-right: calc(1rem + 24px);
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    .modal-main-content {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Statut du stock sur la fiche produit */
.variation-stock .stock-detail {
    padding: 1rem;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 4px;
}
.variation-stock  .stock-detail.in-stock {
    background-color: #13896d28;
    color: #120A8F;
}
.variation-stock  .stock-detail.out-of-stock {
    background-color: #89131328;
    color: #891313;
}

/* Styles grille catégorie articles */

/* Styles pour la grille d'articles de catégorie */
.cat-blog-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.cat-blog-header {
    text-align: center;
    margin-bottom: 40px;
}

.cat-blog-title {
    font-size: 2.5em;
    color: #120A8F;
}

.cat-blog-description {
    font-size: 1.1em;
    color: #666;
    margin-top: 15px;
}

.cat-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.cat-blog-article {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.cat-blog-article:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.cat-blog-article-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cat-blog-article-image {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

.cat-blog-article-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cat-blog-article:hover .cat-blog-article-image img {
    transform: scale(1.05);
}

.cat-blog-article-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cat-blog-entry-title {
    font-size: 1.3em;
    line-height: 1.3;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.6em; /* 2 lines * 1.3 line-height */
}

.cat-blog-entry-title a {
    color: #333;
    text-decoration: none;
}

.cat-blog-entry-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
}

.cat-blog-excerpt {
    margin-bottom: 15px;
    flex-grow: 1;
    font-size: 0.95em;
    color: #555;
}

.cat-blog-read-more {
    display: inline-flex;
    align-items: center;
    background-color: #120A8F;
    color: white;
    padding: 8px 15px;
    border-radius: 25px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-weight: 500;
}

.cat-blog-read-more:hover {
    background-color: #0F6C5A;
}

.cat-blog-read-more span {
    margin-right: 8px;
}

.cat-blog-read-more svg {
    transition: transform 0.3s ease;
}

.cat-blog-read-more:hover svg {
    transform: translateX(3px);
}

.cat-blog-pagination {
    margin-top: 40px;
    text-align: center;
}

.cat-blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    border: 1px solid #120A8F;
    border-radius: 50%;
    color: #120A8F;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cat-blog-pagination .page-numbers.current,
.cat-blog-pagination .page-numbers:hover {
    background-color: #120A8F;
    color: white;
}

/* Responsive design */
@media (max-width: 768px) {
    .cat-blog-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 480px) {
    .cat-blog-grid {
        grid-template-columns: 1fr;
    }
}
/* Overrider la couleur par défaut des liens pour le bouton "Lire plus" */
.cat-blog-read-more,
.cat-blog-read-more:visited {
    color: white !important;
}

/* Styles pour la pagination */
.cat-blog-pagination {
    margin-top: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cat-blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin: 0 5px;
    padding: 0 10px;
    border: 1px solid #120A8F;
    border-radius: 20px;
    color: #120A8F;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9em;
}

.cat-blog-pagination .page-numbers.current,
.cat-blog-pagination .page-numbers:hover {
    background-color: #120A8F;
    color: white;
}

.cat-blog-pagination .prev,
.cat-blog-pagination .next {
    padding: 0 15px;
    white-space: nowrap;
}

/* Assurer que les liens de pagination restent de la bonne couleur */
.cat-blog-pagination a.page-numbers,
.cat-blog-pagination a.page-numbers:visited {
    color: #120A8F;
}

.cat-blog-pagination a.page-numbers:hover,
.cat-blog-pagination a.page-numbers:focus {
    color: white;
}

.cat-blog-pagination .prev,
.cat-blog-pagination .next {
    padding: 0 15px;
    white-space: nowrap;
    border-radius: 20px;
    min-width: auto;
    width: auto;
}
/* Page contact */
/* Style pour les cartes de contact */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.contact-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.card-icon {
    background-color: #120A8F;
    color: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
}

.card-icon i {
    font-size: 24px;
}

.contact-card h3 {
    margin-bottom: 10px;
    color: #333;
}

.contact-card p {
    margin-bottom: 20px;
    color: #666;
    flex-grow: 1;
}

.card-button-wrapper {
    margin-top: auto;
}

.card-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #120A8F;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card-link:hover {
    background-color: #ffffff;
    color: #120A8F;
}

.card-link.open {
    background-color: #28a745;
}

.card-link.closed {
    background-color: #dc3545;
}

/* Le reste du CSS reste inchangé */

/* Style pour la section principale */
.contact-main-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.map-container, .form-container {
    min-height: 400px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-container {
    background-color: #120A8F;
    padding: 30px;
    border-radius: 10px;
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-container h2 {
    margin-bottom: 20px;
    text-align: center;
    color: #ffffff;
}

/* Styles pour le formulaire Contact Form 7 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.9);
}

.wpcf7-form input[type="submit"] {
    width: 100%;
    background-color: #ffffff;
    color: #120A8F;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    font-weight: bold;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

/* Styles pour le formulaire de désabonnement */
.wpcf7-form .checkbox-container {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
}

/* Style pour la case à cocher */
.wpcf7-form .acceptance-terms input[type="checkbox"] {
    margin-right: 10px;
}

/* Style pour le champ select */
.wpcf7-form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
}

/* Style pour le champ textarea caché */
.wpcf7-form textarea.hidden {
    display: none;
}

/* Style pour le champ textarea visible */
.wpcf7-form textarea.visible {
    display: block;
    margin-top: 15px;
}
/* Style amélioré pour le select */
.wpcf7-form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    appearance: none; /* Supprime l'apparence native du select */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23120A8F' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    background-size: 12px;
    padding-right: 35px; /* Espace pour la flèche */
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Style au hover */
.wpcf7-form select:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Style au focus */
.wpcf7-form select:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 2px rgba(19, 137, 110, 0.2);
}

/* Style des options */
.wpcf7-form select option {
    padding: 12px;
    background-color: white;
    color: #333;
}

/* Style au hover des options (fonctionne sur certains navigateurs) */
.wpcf7-form select option:hover,
.wpcf7-form select option:focus,
.wpcf7-form select option:active,
.wpcf7-form select option:checked {
    background: linear-gradient(#120A8F, #120A8F);
    background-color: #120A8F !important;
    color: white !important;
}

/* Style spécifique pour la première option (placeholder) */
.wpcf7-form select option:first-child {
    color: #666;
    font-style: italic;
}

/* Style spécifique pour le formulaire de désabonnement */
#wpcf7-f116092-p116089-o1 .wpcf7-form {
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 5%;
    background-color: rgba(243, 243, 243, 0.28); /* Version plus lisible de #f3f3f347 */
    padding: 5%;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ajout d'une ombre subtile */
}


/* Support des navigateurs plus anciens */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .wpcf7-form select {
        padding-right: 12px;
        background-image: none;
    }

    #wpcf7-f116092-p116089-o1 .wpcf7-form {
        margin-left: 5%;
        margin-right: 5%;
        padding: 20px;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .contact-main-section {
        grid-template-columns: 1fr;
    }
}
.contact-page-background {
    position: relative;
    padding-bottom: 150px;
}

.contact-page-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(./src/img/courbe-ride-and-co-noir-2.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    opacity: 0.01; /* Ajustez cette valeur entre 0 et 1 pour contrôler l'opacité */
    z-index: -1;
}


.site-main {
    position: relative;
    z-index: 1;
}

/* Ajustez l'opacité si nécessaire */
.site-main {
    opacity: 1; /* Changez cette valeur si vous voulez garder une certaine transparence */
}

/* ========================================================================== Filtre de tri woocomerce ========================================================================== */

.custom-ordering {
    position: relative;
    margin-bottom: 20px;
}

.custom-ordering select,
.custom-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 30px 10px 10px;
    font-size: 14px;
    width: 100%;
    max-width: 300px;
    cursor: pointer;
}
.custom-select {
    position: relative;
}

.custom-ordering::after,
.custom-select::after {
    content: '\2B9F';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #120A8F; /* Utilisez la couleur principale de votre thème */
}

.custom-ordering select:focus,
.custom-select select:focus {
    outline: none;
    border-color: #120A8F;
}

/* ========================================================================== Formulaire location de vélos ========================================================================== */

/* Styles généraux du formulaire */
.rental-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rental-form h3 {
    text-align: center;
    margin-bottom: 2rem;
    color: #120A8F;
}

.rental-form h4 {
    color: #120A8F;
    margin: 2rem 0 1rem;
}

.rental-form h5 {
    color: #333;
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #120A8F;
}

/* Structure du formulaire */
.form-row {
    margin-bottom: 1.5rem;
}

.form-row.dates-row {
    display: flex;
    gap: 1rem;
}

.form-column {
    flex: 1;
}

/* Sélection des vélos */
.bike-selection {
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.bike-category {
    margin-bottom: 2rem;
}

.bike-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.bike-option {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.bike-option label {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.bike-option select {
    width: 100px;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
}

/* Labels */
.rental-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

/* Champs de formulaire */
.rental-form input[type="text"],
.rental-form input[type="email"],
.rental-form input[type="tel"],
.rental-form input[type="date"],
.rental-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.rental-form input[type="date"] {
    min-width: 200px;
}

/* Boutons radio */
.rental-form .wpcf7-radio {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.rental-form .wpcf7-radio .wpcf7-list-item {
    margin: 0;
    display: flex;
    align-items: center;
}

.rental-form .wpcf7-radio .wpcf7-list-item input[type="radio"] {
    margin-right: 0.5rem;
}

/* Bouton de soumission */
.rental-form input[type="submit"] {
    width: 100%;
    padding: 1rem;
    background-color: #120A8F;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.rental-form input[type="submit"]:hover {
    background-color: #0F6C5A;
}

/* Messages d'erreur */
.rental-form .wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.rental-form .wpcf7-response-output {
    margin: 2rem 0 0;
    padding: 1rem;
    border-radius: 4px;
}

/* Case de consentement */
.form-row.consent {
    font-size: 0.9rem;
    margin: 2rem 0;
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .rental-form {
        padding: 1rem;
    }

    .form-row.dates-row {
        flex-direction: column;
    }

    .bike-options {
        grid-template-columns: 1fr;
    }
}
/* Conteneur de l'alerte */
.rental-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    max-width: 400px;
    width: 100%;
}

/* Contenu de l'alerte */
.rental-alert-content {
    background-color: #fff;
    border-left: 4px solid #120A8F;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: slideIn 0.3s ease-out;
}

/* Icône de l'alerte */
.rental-alert-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #120A8F;
}

.rental-alert-icon svg {
    width: 100%;
    height: 100%;
}

/* Message de l'alerte */
.rental-alert-message {
    flex-grow: 1;
    font-size: 14px;
    color: #333;
    margin-right: 20px;
}

/* Bouton de fermeture */
.rental-alert-close {
    background: none;
    border: none;
    color: #666;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.rental-alert-close:hover {
    color: #333;
}

/* Animation d'entrée */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation de sortie */
.rental-alert.hiding {
    animation: slideOut 0.3s ease-out forwards;
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Style pour les dates désactivées dans le sélecteur */
.disabled-date {
    color: #ccc;
    text-decoration: line-through;
    pointer-events: none;
}

/* Style pour le survol des dates valides */
.rental-form input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

.rental-form input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 0.7;
}

/* ========================================================================== Preuve sociale ========================================================================== */

/* Social Proof Notification Styles */
.social-proof-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 1000;
    width: 90%;
    max-width: 400px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.social-proof-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.social-proof-notification.hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

.social-proof-content {
    background-color: #fff;
    border-left: 4px solid #120A8F;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
    position: relative;
}

.social-proof-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #120A8F;
}

.social-proof-icon svg {
    width: 100%;
    height: 100%;
}

.social-proof-message {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    flex-grow: 1;
    padding-right: 20px; /* Espace pour le bouton de fermeture */
}

/* Styles du bouton de fermeture */
.social-proof-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-size: 20px;
    line-height: 1;
    transition: color 0.2s ease;
}

.social-proof-close:hover {
    color: #333;
}

.social-proof-close:focus {
    outline: none;
    color: #120A8F;
}

/* Barre de progression */
.notification-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgba(19, 137, 110, 0.2);
    transform-origin: left;
}

.notification-progress-bar.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #120A8F;
    animation: progress linear forwards;
    transform-origin: left;
}

@keyframes progress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

@media screen and (max-width: 480px) {
    .social-proof-notification {
        width: calc(100% - 40px);
        bottom: 10px;
    }
    
    .social-proof-message {
        font-size: 13px;
    }
}

/* ========================================================================== Effet zoom survol image ========================================================================== */
.magnifier-container {
    position: relative;
    overflow: visible; /* Changé de hidden à visible */
    cursor: none;
    border-radius: 8px;
    height: 100%;
    width: 100%;
}

.magnifier-view {
    display: none;
    visibility: hidden;
    position: fixed; /* Changé de absolute à fixed pour un meilleur positionnement */
    width: 200px;
    height: 200px;
    border: 2px solid #120A8F;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 
                0 5px 15px rgba(0,0,0,0.2);
    z-index: 9999; /* Augmenté pour être au-dessus de tout */
    transform: translate(-50%, -50%);
}


.magnifier-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.magnifier-view::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

.magnifier-container:hover .magnifier-view {
    opacity: 1;
}

.magnifier-image {
    display: block;
    transition: filter 0.3s ease;
}

.magnifier-container:hover .magnifier-image {
    filter: brightness(0.95);
}

/* Styles pour le carousel */
.carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.carousel-item {
    height: 100%;
    display: none;
}

.carousel-item.active {
    display: block;
}

.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
    opacity: 1;
}

.gallery-icon {
    width: 20px;
    height: 20px;
}

/* ========================================================================== Page erreur 404 ========================================================================== */

.error-404 {
    margin: 0;
    padding: 0;
}

.error-404-container {
    min-height: calc(100vh - 300px); /* Ajusté pour le header/footer de Storefront */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 20px;
    margin: -2.617924em -2.617924em 0; /* Neutralise les marges de Storefront */
}

.error-404-content {
    text-align: center;
    max-width: 600px;
    padding: 40px;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff, #f5f5f5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

.error-code {
    font-size: 150px;
    font-weight: bold;
    color: #120A8F;
    line-height: 1;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.error-title {
    font-size: 36px;
    color: #333;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
}

.error-message {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.5;
}

.error-animation {
    margin: 30px 0;
}

.bike-wheel {
    animation: spin 8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.return-home-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 30px;
    font-size: 16px;
    color: #fff !important; /* Important pour écraser les styles de Storefront */
    background-color: #120A8F;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(19, 137, 110, 0.2);
}

.return-home-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(19, 137, 110, 0.3);
    color: #fff !important;
    text-decoration: none;
}

.arrow-icon {
    transition: transform 0.3s ease;
}

.return-home-button:hover .arrow-icon {
    transform: translateX(4px);
}

/* Suppression des styles par défaut de Storefront */
.error404 .site-content .widget_product_categories {
    display: none;
}

.error404 .site-content .widget_product_search {
    display: none;
}

@media (max-width: 768px) {
    .error-404-container {
        min-height: calc(100vh - 250px);
        margin: -1.617924em -1.617924em 0;
    }

    .error-code {
        font-size: 120px;
    }
    
    .error-title {
        font-size: 28px;
    }
    
    .error-message {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .error-code {
        font-size: 100px;
    }
    
    .error-title {
        font-size: 24px;
    }
    
    .error-404-content {
        padding: 20px;
    }

    .error-404-container {
        margin: -1.41575em -1.41575em 0;
    }
}

/* =============================================================== Scroll to top  =============================================================== */

.scroll-to-top {
    position: fixed;
    bottom: 185px;
    right: -2px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255);
    background-image: url('./src/img/icons/fleche-haut-verte.svg');
    background-size: 32px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.scroll-to-top:hover {
    background-color: rgba(255, 255, 255);
    transform: translateY(0);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 90px;
        right: 20px;
        width: 35px;
        height: 35px;
        background-size: 14px;
    }
}

/* ============================================================ Table of content   ==================================================*/

/* Structure de la mise en page */
.blog-content-wrapper {
    display: flex;
    gap: 4rem;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 5vh;
    flex-direction: row-reverse; /* Inverse l'ordre des éléments */
}

/* Table des matières */
.table-of-contents-container {
    display: none;
    width: 300px;
    flex-shrink: 0;
    position: relative;
    top: 0;
    margin-left: 2rem; /* Ajoute une marge à gauche pour l'espacement */
}
.entry-content.with-toc {
    width: 100%;
}

/* Affichage uniquement sur grand écran */
@media screen and (min-width: 1920px) {
    .table-of-contents-container.desktop-only {
        display: block;
    }
    
    .entry-content.with-toc {
        width: calc(100% - 340px);
        padding-top: 5vh;
        margin-right: 2rem; /* Ajoute une marge à droite pour l'espacement */
    }
}

.table-of-contents.sticky {
    position: fixed;
    top: 5vh;
    right: auto; /* Réinitialise la position droite */
    width: 300px;
    transition: top 0.3s ease;
}

.table-of-contents {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative; /* Pour le positionnement initial */
}

.table-of-contents.sticky {
    position: fixed;
    top: 5vh; /* Marge supérieure en mode sticky */
    width: 300px;
    transition: top 0.3s ease; /* Animation douce pour le passage en mode sticky */
}


.table-of-contents h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #120A8F;
}

.toc-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-content li {
    margin-bottom: 0.5rem;
    padding-left: 0;
}

.toc-content a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.9rem;
    display: block;
    padding: 0.3rem 0;
}

.toc-content a:hover {
    color: #120A8F;
}

.toc-content .active-section > a {
    color: #120A8F;
    font-weight: bold;
}

/* Niveaux d'indentation pour les sous-titres */
.toc-content .heading-2 { padding-left: 0; }
.toc-content .heading-3 { padding-left: 1rem; }
.toc-content .heading-4 { padding-left: 2rem; }

/* Styles des boutons de partage */
.share-buttons {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.share-buttons h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #333;
}

.share-buttons-container {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.share-button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    background-color: transparent;
}

.share-button i {
    font-size: 1rem;
}

.share-button:hover {
    transform: translateY(-2px);
    background-color: transparent;
    color: #000;
}


/* Toast notification pour le lien copié */
.copy-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 1rem 2rem;
    border-radius: 4px;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.copy-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Slider des offres */
.offers-slider__list {
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    height: auto;
    aspect-ratio: calc(16 / 9);
    border-radius: 8px;
}
.offers-slider__container {
    aspect-ratio: calc(16 / 9);
}
.swiper--offers-slider {
    width: 100%;
    height: 100%;
}
.swiper--offers-slider .swiper-wrapper {
    width: 100%;
    height: 100%;
}
.swiper--offers-slider .carousel-control-next,
.swiper--offers-slider .carousel-control-prev {
    z-index: 5;
}
.swiper--offers-slider .swiper-slide {
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    background-size: cover;
    background-position: center;
}
.swiper--offers-slider .swiper-slide .slide-banner {
    width: 100%;
    background-color: #0003;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}
.swiper--offers-slider .swiper-slide .slider-offer-title {
    font-size: 2rem;
}
.swiper--offers-slider .swiper-slide .button {
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}
.swiper--offers-slider .swiper-slide .button img {
    position: relative;
    right: -8px;
    width: 20px;
    height: 20px;
}

/* Navigation */
.offers-list-container {
    margin-top: 2rem;
    max-width: 1200px;
    margin: auto;
}
.offers-list-container h1 {
    margin-top: 3rem;
    margin-bottom: 1rem;
}
.swiper--offers-slider-nav {
    margin-top: 24px;
    margin-bottom: 4rem;
}
/* Pour pas que l'affichage saute en attendant que Swiper charge */
.swiper--offers-slider-nav:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}
.swiper--offers-slider-nav:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
    display: none;
}
.swiper--offers-slider-nav:not(.swiper-initialized) .swiper-wrapper .swiper-slide:first-child,
.swiper--offers-slider-nav:not(.swiper-initialized) .swiper-wrapper .swiper-slide:nth-child(2),
.swiper--offers-slider-nav:not(.swiper-initialized) .swiper-wrapper .swiper-slide:nth-child(3),
.swiper--offers-slider-nav:not(.swiper-initialized) .swiper-wrapper .swiper-slide:nth-child(4) {
    display: block;
}
.swiper--offers-slider-nav .offer-nav {
    display: block;
    height: auto;
    aspect-ratio: 1;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.swiper--offers-slider-nav .offer-content {
    width: 100%;
    height: 100%;
    padding: 1rem;
    position: relative;
    background-color: #0003;
    transition: background-color .2s;
}
.swiper--offers-slider-nav .offer-nav img {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    height: 32px;
    width: 32px;
    transition: right .2s;
}
.swiper--offers-slider-nav .offer-nav:hover {
    cursor: pointer;
}

@media screen and (max-width: 1200px) {
    .offers-list-container {
        padding: 0 1rem;
    }
    /* Pour pas que l'affichage saute en attendant que Swiper charge */
    .swiper--offers-slider-nav:not(.swiper-initialized) .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px
    }
    .swiper--offers-slider-nav:not(.swiper-initialized) .swiper-wrapper .swiper-slide:nth-child(4) {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    .swiper--offers-slider .swiper-slide .slider-offer-title {
        font-size: 1.25rem;
    }
    .swiper--offers-slider .swiper-slide .button {
        padding: 4px 12px;
        font-size: 14px;
    }
    .swiper--offers-slider-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .swiper--offers-slider-nav .offer-nav {
        font-size: 1rem;
    }
    /* Pour pas que l'affichage saute en attendant que Swiper charge */
    .swiper--offers-slider-nav:not(.swiper-initialized) .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }
    .swiper--offers-slider-nav:not(.swiper-initialized) .swiper-wrapper .swiper-slide:nth-child(3) {
        display: none;
    }
}
/* Comparateur de produits */
.product-compare .hidden {
    display: none !important;
}

/* Styles pour la notification toast du comparateur */
.comparator-toast {
    position: fixed;
    top: 32px;
    right: 20px;
    z-index: 9999;
    max-width: 300px;
    background-color: #120A8F;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateX(120%);
    transition: transform 0.3s ease-in-out;
    margin-top: 20px;
}

.comparator-toast.show {
    transform: translateX(0);
}

.comparator-toast a {
    color: white;
    text-decoration: underline;
    font-size: 0.9em;
}

.comparator-toast a:hover {
    color: #f0f0f0;
}

/* Animation pour l'icône du comparateur */
.comparator-icon.animate {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Styles pour le formulaire de pré-commande */
.preorder-form .form-row {
    margin-bottom: 15px;
}

.preorder-form label {
    display: block;
    margin-bottom: 5px;
}

.preorder-form .form-error {
    color: #dc3545;
    margin-bottom: 10px;
    display: none;
}

/* Styles pour le champ téléphone */
.iti {
    width: 100%;
}

.iti__flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/img/flags@2x.png");
    }
}
/* Personnalisation de la liste des drapeaux */
.iti__country-list {
    padding-left: 10px !important;
    max-width: 65vh;
}

/* Suppression des styles par défaut de la liste */
.iti__country-list,
.iti__country-list li {
    list-style: none !important;
    padding-left: 10px !important;
}

/* Ajout de la classe no-before aux éléments de la liste */
#main.site-main .iti__country-list li,
#main.site-main ul.iti__country-list li {
    padding-left: 10px !important;
}

#main.site-main .iti__country-list li::before,
#main.site-main ul.iti__country-list li::before {
    display: none !important;
}

/* S'assurer que les drapeaux restent bien alignés */
.iti__flag-container {
    padding-left: 0 !important;
}

.iti__selected-flag {
    padding-left: 10px !important;
}

/* Page checkout & résumé de la commande */
body.woocommerce-checkout {
    color: black;
}
#main.site-main .wc-block-components-product-details,
#main.site-main .woocommerce-table__product-name .wc-item-meta {
    list-style: disc;
    padding-left: 18px;
}
#main.site-main .wc-block-components-product-details li,
#main.site-main .woocommerce-table__product-name .wc-item-meta li {
    font-size: 1em;
    margin-bottom: 0;
}
#main.site-main .wc-block-checkout__shipping-method-option {
    outline-width: 2px !important;
}
#main.site-main .wc-block-checkout__shipping-method-option--selected {
    background-color: white;
    outline: 2px solid #120A8F !important;
}
#main.site-main .wp-block-woocommerce-checkout-order-summary-block {
    border-width: 2px;
}
#main.site-main .wc-block-components-totals-wrapper,
#main.site-main .wp-block-woocommerce-checkout-order-summary-totals-block {
    border-top-width: 2px;
}
#main.site-main .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
#main.site-main .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
    box-shadow: inset 0 0 0 2px #120A8F;
}
#main.site-main .woocommerce-table__product-name .wc-item-meta {
    padding-left: 16px;
}
#main.site-main .wc-block-components-product-details li,
#main.site-main .woocommerce-table__product-name .wc-item-meta li {
    padding-left: 0 !important;
}
#main.site-main .wc-block-components-checkout-place-order-button {
    background-color: #120A8F;
    border-radius: 4px;
}
#main.site-main .wc-block-components-checkout-place-order-button:hover {
    background-color: black;
    border-color: black;
}
#main.site-main .wc-block-components-product-name {
    font-size: 16px;
}
#main.site-main .wc-block-components-order-summary-item__individual-prices {
    padding-top: 0;
    font-weight: 300;
}
#main.site-main .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    background-color: #120A8F;
}
#main.site-main .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
    color: white;
}

/* Responsive checkout */
.wc-block-checkout.is-mobile {
    padding: 1rem;
    padding-top: 0;
}
@media screen and (max-width: 1000px) {
    .wc-block-components-order-summary .wc-block-components-order-summary-item {
        flex-wrap: wrap;
    }
    .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
        width: 100%;
    }
}
@media screen and (max-width: 640px) {
    .wp-block-woocommerce-checkout.wc-block-checkout {
        padding-top: 0;
    }
    #main.site-main .woocommerce-order-overview.woocommerce-thankyou-order-details li {
        padding-left: 1.618em;
    }
    #main.site-main ul.order_details li strong {
        font-size: 1.25rem;
    }
    body.woocommerce-checkout h1.entry-title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30px;
        text-transform: uppercase;
    }
}

/* Accueil du blog (Ride & Learn) */
.content-area-blog-home {
    
}

@media screen and (max-width: 640px) {
    .content-area-blog-home .fullscreen-image .image-overlay {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 2rem;
    }
    .content-area-blog-home .fullscreen-image .image-overlay h1 {
        font-size: 4rem;
        text-align: left;
        align-items: flex-start;
    }
    #articles-container .article-wrapper {
        flex-direction: column;
        gap: 1rem;
    }
    #articles-container .article-wrapper h2,
    #articles-container .article-wrapper p {
        color: black;
        margin-bottom: 1rem;
    }
    #articles-container .article-wrapper h2 {
        font-size: 1.5rem;
    }
    #articles-container .article-wrapper h2 a {
        color: black;
        font-weight: 600;
    }
}

/* Responsive divers */
@media screen and (max-width: 640px) {
    .entry-header {
        padding: 1rem;
    }
    .woocommerce-order {
        padding: 1rem;
    }
}

.product-price-wrapper:not(.initialized) {
    opacity: 0;
    visibility: hidden;
}

.product-price-wrapper.initialized {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* Structure des prix */
.product-price-single {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Style du prix barré */
.regular-price {
    font-size: 0.9rem;
    color: #666;
    text-decoration: line-through;
}

/* Style du financement */
.product-financing {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
}
/*
* Style guide des tailles
*/

/* ===== MODAL DE BASE ===== */
.size-guide-modal {
    border: none;
    border-radius: 12px;
    padding: 0;
    width: 900px;
    max-width: 95vw;
    max-height: 90vh;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    overflow: hidden;
}

.size-guide-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}
.size-guide-tables {
    overflow-y: scroll;
}

/* ===== CONTENEUR PRINCIPAL ===== */
.size-guide-content {
    display: flex;
    flex-direction: column;
    height: 90vh;
}

/* ===== HEADER DE LA MODAL ===== */
.size-guide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #eee;
    background: #f8f8f8;
    border-radius: 12px 12px 0 0;
}

.size-guide-header h2 {
    margin: 0;
    font-size: 1.75rem;
    color: #120A8F;
}

.close-modal {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
    color: #666;
    transition: color 0.3s ease;
}

.size-guide-modal .close-modal:hover {
    color: #120A8F;
    background-color: transparent;
    border-color: transparent;
}

/* ===== NAVIGATION DES MARQUES ===== */
.brand-selector {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
}

.brand-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: black;
}

.brand-tab:hover {
    border-color: #120A8F;
    background: #f8f8f8;
}
.brand-tab:not(.active):hover {
    color: black;
}

.brand-tab.active {
    background: #120A8F;
    border-color: #120A8F;
    color: white;
}

.brand-tab img {
    height: 20px;
    width: auto;
}

/* ===== CONTENEUR DES GUIDES ===== */
.size-guides-container {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    background: #fbfbfb;
}

/* ===== CONTENU PAR MARQUE ===== */
.brand-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.brand-content.active {
    display: block;
}

/* ===== GROUPES DE MODÈLES ===== */
.model-group {
    margin-bottom: 2.5rem;
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.model-group h3 {
    color: #120A8F;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #120A8F;
}

.size-table-wrapper {
    margin-bottom: 2rem;
}

.size-table-wrapper:last-child {
    margin-bottom: 0;
}

.size-table-wrapper h4 {
    color: #333;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* ===== TABLEAUX ===== */
.size-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background: #fff;
}

.size-table th {
    background: #f8f8f8;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #333;
    border: 1px solid #eee;
}

.size-table td {
    padding: 0.875rem 1rem;
    border: 1px solid #eee;
    color: #444;
}

.size-table tr:nth-child(even) {
    background: #fbfbfb;
}

.size-table tr:hover {
    background: #f5f5f5;
}

/* ===== LIEN DU GUIDE DES TAILLES ===== */
.size-guide-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: #120A8F;
    text-decoration: none;
    margin-left: 1rem;
    transition: color 0.3s ease;
}

.size-guide-link:hover {
    color: #0F6C5A;
    text-decoration: underline;
}

.size-guide-link::before {
    content: "📏";
    margin-right: 0.5rem;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .size-guide-modal {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .size-guide-header {
        padding: 1rem;
        border-radius: 0;
    }

    .size-guide-content {
        height: 100%;
    }

    .brand-selector {
        padding: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        flex: 0 0 80px;
    }

    .brand-tab {
        padding: 0.5rem 1rem;
        white-space: nowrap;
    }

    .size-guides-container {
        padding: 1rem;
    }

    .model-group {
        padding: 1rem;
    }

    .size-table th,
    .size-table td {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

.product-compare-single {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Base tooltip styles */
.product-compare-single .tooltip {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
}

/* Flèche du tooltip */
.product-compare-single .tooltip::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 5px 5px 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

/* Utilisation du sélecteur adjacent (+) pour les tooltips */
.product-compare-single a.link-add:hover ~ .tooltip-add:not(.hidden),
.product-compare-single a.link-remove:hover ~ .tooltip-remove:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* Reste de vos styles existants */
.share-product-infos {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.share-product-infos > * {
    display: flex;
    align-items: center;
}

.product-compare-single img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.share-trigger i {
    margin-left: 5px;
}

.share-separator {
    color: rgba(0, 0, 0, 0.3);
}

.product-sku {
    white-space: nowrap;
}

.hidden {
    display: none !important;
}
/* Animation de notification pour l'icône du panier */
@keyframes cartPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.cart-icon {
    transition: transform 0.3s ease;
}

.cart-icon.notify {
    animation: cartPulse 0.5s ease;
}

.cart-count {
    transition: all 0.3s ease;
}

.cart-count.updating {
    transform: scale(1.2);
    background-color: #e74c3c; /* Couleur différente pendant la mise à jour */
}
.woocommerce-info {
    display: none !important;
}
/* Style du conteneur du bouton */
.return-to-shop {
    width: 100%;
    text-align: center;
    padding: 2rem 0;
    margin-bottom: 4rem;
}

/* Style du bouton */
.return-to-shop .button.wc-backward {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background-color: #120A8F; /* Couleur principale du thème */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    width: auto;
    min-width: 200px;
    max-width: 300px;
    margin: 0 auto;
    border: 2px solid #120A8F;
}

/* Effet au survol */
.return-to-shop .button.wc-backward:hover {
    background-color: white;
    color: #120A8F;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(19, 137, 110, 0.1);
}

/* Responsive design */
@media screen and (max-width: 768px) {
    .return-to-shop {
        padding: 1rem;
        margin-bottom: 2rem;
    }

    .return-to-shop .button.wc-backward {
        width: 80%;
        max-width: none;
        padding: 0.75rem 1.5rem;
    }
}
.accessories-featured-description {
    margin-top: 1rem;
    padding: 1rem;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    background-color: #f9f9f9;
    border-radius: 4px;
}

@media screen and (max-width: 768px) {
    .accessories-featured-description {
        font-size: 0.8rem;
        padding: 0.8rem;
        margin-top: 0.8rem;
    }
}
.cart-separator {
    margin: 3rem 0;
    text-align: center;
    position: relative;
}

.cart-separator:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #e0e0e0;
    z-index: 1;
}

.cart-separator-title {
    position: relative;
    z-index: 2;
    background: #fff;
    display: inline-block;
    padding: 0 1.5rem;
    margin: 0;
    font-size: 1.5rem;
    color: #120A8F;
}
/* Style du contenu personnalisé des catégories */
.category-custom-content {
    width: 100%;
    margin-top: 4rem;
    padding: 2rem;
    background-color: #fff;
    border-radius: 8px;
}

.category-content-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (max-width: 768px) {
    .category-custom-content {
        padding: 1rem;
        margin-top: 2rem;
    }
}

.ecopart  {
    color :#6d6d6d !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: normal;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 1vh;
    margin-top: 5px;
}
/* Solution 1 - Sélecteur plus spécifique */
.storefront-align-wide.storefront-full-width-content .hentry .entry-content .wp-block-woocommerce-checkout.alignwide {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.woocommerce-message {
    margin-right: 35%;
    margin-left: 35%;
}

/*
 * Correction détails responsive
 */
@media screen and (max-width: 640px) {
    /*
     * Tailles de police
     */

    /* Panier / Checkout */
    .accessories-see-more-container .accessories-see-more {
        font-size: 14px;
    }
    .storefront-align-wide.storefront-full-width-content .hentry .entry-content .wp-block-woocommerce-checkout.alignwide {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/*
* Supprimer financement
*/
.product-financing {
    display: none;
}
.top-bar-text {
    display: inline-block;
    min-height: 1.2em;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.offer-content p
{
    color: white;
}

.slide-banner .slider-offer-title {
    font-weight: 600;
}