.message-box h2{
  color: #111111 !important;
  font-weight: bold;
}
.message-box .lead {
    padding-top: 10px;
    font-size: 1.15rem;
    font-style: normal;
    color: #053d69;
    padding-bottom: 0;
    font-weight: 500;
    font-family: var(--default-font);
    line-height: 1.7;
}
/* .btn11{
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border: none;
} */

.footer-about .logo img{
    max-height: 60px;
      width: auto;
}
/* Styles pour le bouton "En savoir plus sur notre expertise" avec les couleurs Evolis */

.btn11 {
    display: inline-block;
    padding: 12px 25px;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #053d69;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: color 0.4s ease-in-out;
    cursor: pointer;
    font-family: var(--heading-font);
    letter-spacing: 0.02em;
}

/* Effet de transition (le "remplissage") */

/* Styles au survol du bouton */
.btn11:hover {
    color: #ffffff; /* Le texte reste blanc au survol */
    background-color: #ee3333; /* Change la couleur de la bordure au survol */
}

.btn11:hover .transition {
    transform: translateX(0); /* Fait glisser l'élément de transition */
}

/* Styles au clic/focus (pour l'accessibilité) */

/* Ajustements pour le texte à l'intérieur du span si nécessaire */
.btn11 span {
    position: relative;
    z-index: 2; /* S'assure que le texte est au-dessus de la transition */
}

/* --- Section "À propos - Identification sécurisée" (about-2) --- */

.about-2 {
    padding: 60px 0; /* Espacement vertical de la section */
    background-color: #f8f9fa; /* Une couleur de fond très légère pour la section */
}

/* --- Styles généraux des cartes de contenu (content-card) --- */

.content-card:hover {
    transform: translateY(-5px); /* Légère élévation au survol */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Ombre plus prononcée au survol */
}


.content-card .card-image img {
    width: 100%; /* L'image s'adapte à la largeur du conteneur */
    height: 100%; /* L'image s'adapte à la hauteur du conteneur */
    object-fit: cover; /* Recadre l'image pour couvrir la zone sans la déformer */
    display: block; /* Supprime l'espace sous l'image */
}

/* --- Contenu textuel de la carte (card-content) --- */

.content-card .card-content {
    padding: 25px; /* Rembourrage interne pour le texte et les titres */
    flex-grow: 1; /* Permet au contenu de prendre l'espace restant dans la colonne */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Aide à pousser le bouton vers le bas si le texte est court */
}

.content-card .card-content h3 {
    font-size: 22px; /* Taille de la police pour les titres */
    margin-bottom: 12px; /* Espacement après le titre */
    color: #333333; /* Couleur du texte sombre (à adapter à tes polices) */
}

.content-card .card-content p {
    font-size: 15px; /* Taille de la police pour le paragraphe */
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
    color: #666666; /* Couleur du texte plus claire */
    margin-bottom: 20px; /* Espacement avant le bouton */
}

/* --- Bouton "Découvrir" (read-more) --- */

.content-card .read-more {
    display: inline-block; /* Permet le padding et les marges */
    font-size: 15px;
    font-weight: 500;
    color: #ee3333; /* Couleur du texte du lien (Rouge Evolis) */
    text-decoration: none; /* Pas de soulignement par défaut */
    transition: color 0.3s ease; /* Transition douce pour la couleur du texte */
    margin-top: auto; /* Pousse le bouton vers le bas dans un flex container */
}

.content-card .read-more i {
    margin-left: 5px; /* Espacement entre le texte et l'icône */
    transition: transform 0.3s ease; /* Transition pour l'icône */
}

.content-card .read-more:hover {
    color: #ee3333; /* Couleur au survol (rouge plus foncé) */
}

.content-card .read-more:hover i {
    transform: translateX(3px); /* Légère translation de l'icône au survol */
}

/* --- Bouton "Voir la gamme complète" au pied de la section --- */

/* Utilise le style '.btn11' que nous avons défini précédemment.
   Assure-toi que ce bouton est stylisé par le code CSS du bouton Evolis.
   Si ce n'est pas le cas, tu devras inclure ce CSS ici ou t'assurer qu'il est chargé avant. */
.about-2 .text-center .btn11 {
    margin-top: 40px; /* Plus d'espace au-dessus du bouton final */
}

/* --- Responsive design (ajustements pour petits écrans) --- */

@media (max-width: 767.98px) { /* Pour les téléphones */
    .about-2 {
        padding: 40px 0;
    }
    .content-card {
        margin-bottom: 25px; /* Espacement entre les cartes sur mobile */
    }
    .content-card .card-image {
        height: 180px; /* Hauteur légèrement réduite pour les images sur mobile */
    }
    .content-card .card-content {
        padding: 20px;
    }
    .content-card .card-content h3 {
        font-size: 20px;
    }
    .content-card .card-content p {
        font-size: 14px;
    }
    .about-2 .text-center .btn11 {
        margin-top: 30px;
    }

    .thumbnails-vertical{
    display:none;
   }
}

/* --- Ajustements pour l'espacement des sections --- */

/* Réduire l'espacement après la première section "À Propos" */
#about.section {
    margin-bottom: 0; /* Supprime la marge par défaut en bas si présente */
    padding-bottom: 30px; /* Réduit le padding du bas pour rapprocher la section suivante */
}

/* Espacement du titre de la section Services */
#services.section {
    padding-top: 40px; /* Réduit l'espacement en haut du titre */
    padding-bottom: 40px; /* Réduit l'espacement en bas du titre pour le rapprocher des cartes */
    /* Si 'parallax' utilise une image de fond, ajuste padding-bottom seulement */
}

#services .section-title {
    margin-bottom: 20px; /* Réduit la marge sous le titre pour le rapprocher du contenu */
}
#services.section{
        padding-bottom: 0px !important;
}

/* Espacement de la section des cartes de services */
#services-cards.section { /* Nouvelle ID pour cette section */
    padding-top: 0; /* Supprime le padding en haut pour coller au titre des services */
    padding-bottom: 60px; /* Maintient un padding en bas de la section */
    background-color: #f8f9fa; /* S'assure que le fond correspond à celui des cartes */
}

/* --- Styles déjà définis pour les cartes (rappel pour cohérence) --- */
/* Assure-toi que ces styles sont bien présents dans ton main.css */

.content-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.content-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Important pour que l'image couvre l'espace */
    display: block;
}

.content-card .card-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content-card .card-content h3 {
    font-size: 22px;
    margin-bottom: 12px;
    color: #333333;
}

.content-card .card-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 20px;
}

.content-card .read-more {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    color: #ee3333;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-top: auto;
}

.content-card .read-more i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.content-card .read-more:hover {
    color: #ee3333;
}

.content-card .read-more:hover i {
    transform: translateX(3px);
}

.about-2 .text-center .btn11,
#services-cards .text-center .btn11 { /* Assure que le bouton en bas de la section est bien stylisé */
    margin-top: 40px;
}


/* Responsive design (ajustements pour petits écrans) */
@media (max-width: 767.98px) {
    #about.section,
    #services.section,
    #services-cards.section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .content-card {
        margin-bottom: 25px;
    }
    .content-card .card-image {
        height: 180px;
    }
    .content-card .card-content {
        padding: 20px;
    }
    .content-card .card-content h3 {
        font-size: 20px;
    }
    .content-card .card-content p {
        font-size: 14px;
    }
    .about-2 .text-center .btn11,
    #services-cards .text-center .btn11 {
        margin-top: 30px;
    }
}

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

section, .client-section{
    padding: 35px 0px 20px 0px !important;
}
.client-section-title{
    padding-bottom: 0px !important;
}

/* Custom CSS pour la section Réalisations */

/* Styles pour les cartes de réalisations */
.icavi-card-figure {
    position: relative;
    cursor: pointer;
    background-color: #333; /* Couleur de fond par défaut pour la figcaption */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Ajout d'une transition pour le hover */
}

.icavi-card-figure:hover {
    transform: translateY(-5px); /* Léger déplacement vers le haut au survol */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée au survol */
}

.icavi-card-img {
    width: 100%;
    height: 250px; /* Hauteur fixe pour les images */
    object-fit: cover; /* S'assure que l'image couvre l'espace sans se déformer */
    display: block; /* Supprime l'espace sous l'image */
    transition: transform 0.3s ease-in-out; /* Transition pour le zoom au survol */
}

.icavi-card-figure:hover .icavi-card-img {
    transform: scale(1.05); /* Zoom léger de l'image au survol */
}

.icavi-card-figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); /* Dégradé sombre en bas */
    padding: 1rem;
    color: #ffffff;
    opacity: 0; /* Masqué par défaut */
    transform: translateY(100%); /* Commence en dehors de la vue */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.icavi-card-figure:hover figcaption {
    opacity: 1; /* Apparaît au survol */
    transform: translateY(0); /* Remonte à sa position */
}

.icavi-card-figure figcaption h4 {
    margin-bottom: 0.25rem;
    font-size: 1.4rem; /* Taille de titre ajustée */
    font-weight: 600;
    color: #ffffff;
}

.icavi-card-figure figcaption div {
    font-size: 0.9rem; /* Taille du texte descriptif */
}

/* Styles pour les couleurs (à adapter si tu as une palette Bootstrap personnalisée) */

.hero .slide-content .slide-cta .btn.btn-shop:hover {
  background-color: color-mix(in srgb, #ee3333 , #000 10%) !important;
}
.footer{
    background-color: #002e5b !important;
}
.footer .footer-main .footer-widget h4{
    color: #F8E801 !important;
}
.footer .footer-main .footer-widget h4:after{
    background-color:#F8E801;
}
.footer .footer-main .footer-links a:hover{
    color:#F8E801 !important;
}
.footer .footer-main .footer-links a{
 color: #ffffff !important;
}
.footer .footer-main .footer-widget p,
.footer .footer-main .footer-contact
.contact-item span,
.footer .footer-main .footer-widget h5,
.footer .footer-main .social-links .social-icons a{
  color: color-mix(in srgb, #ffffff, transparent 20%);
}
.best-sellers .product-price{
    color: #ee3333 !important;
}
.best-sellers .product-badge.new
{
  background: #ee3333;
  color: var(--contrast-color);
}
.product-badge.polyvalent,
.product-badge.classique,
.product-badge.economique
{
  background: #053d69;
  color: var(--contrast-color);
}
.product-meta {
  margin-top: 10px;
}
.product-meta .read-more,
.product-card a{
    color: #ee3333;
}
.product-price {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 8px;
}

    /* Le reste de votre CSS de portfolio va ici */
    .portfolio-one {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .portfolio-menu{
     display: flex;
     justify-content: center;
    }
    .portfolio-one .portfolio-menu button {
        border: none;
        background: none;
        font-size: 16px;
        font-weight: 700;
        color: var(--dark-3);
        line-height: 48px;
        padding: 0 30px;
        position: relative;
        border-radius: 50px;
        overflow: hidden;
        display: inline-block;
        z-index: 5;
        -webkit-transition: all 0.3s ease-out 0s;
        -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s;
        cursor: pointer;
        margin-right: 4px;
        text-transform: uppercase;
    }
    .portfolio-one .portfolio-menu button:last-child {
        margin-right: 0;
    }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .portfolio-one .portfolio-menu button {
            font-size: 14px;
            padding: 0 26px;
        }
    }
    @media (max-width: 767px) {
        .portfolio-one .portfolio-menu button {
            font-size: 14px;
            padding: 0 22px;
            line-height: 42px;
        }
    }
    .portfolio-one .portfolio-menu button::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #053d69;
        z-index: -1;
        opacity: 0;
        -webkit-transition: all 0.3s ease-out 0s;
        -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s;
    }
    .portfolio-one .portfolio-menu button:hover, .portfolio-one .portfolio-menu button.active {
        color: #ffffff;
    }
    .portfolio-one .portfolio-menu button:hover::before, .portfolio-one .portfolio-menu button.active::before {
        opacity: 1;
    }
    .portfolio-one .hide {
        display: none;
    }
    .portfolio-one .show {
        display: block;
    }

    .portfolio-style-one {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        margin-top: 30px;
    }
    .portfolio-style-one .portfolio-image img {
        width: 100%;
        -webkit-transition: all 0.3s ease-out 0s;
        -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s;
    }
    .portfolio-style-one .portfolio-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.5s ease-out 0s;
        -moz-transition: all 0.5s ease-out 0s;
        -ms-transition: all 0.5s ease-out 0s;
        -o-transition: all 0.5s ease-out 0s;
        transition: all 0.5s ease-out 0s;
    }
    .portfolio-style-one .portfolio-content {
        padding: 16px;
    }
    .portfolio-style-one .portfolio-icon {
        position: relative;
        display: inline-block;
    }
    .portfolio-style-one .portfolio-icon a {
        font-size: 30px;
        color: #053d69;
        position: relative;
        z-index: 5;
        line-height: 90px;
        height: 60px;
        width: 60px;
        line-height: 60px;
        text-align: center;
        border: 2px solid #ffffff;
        border-radius: 50%;
        -webkit-transition: all 0.3s ease-out 0s;
        -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s;
        padding: 15px;
    }
    .portfolio-style-one .portfolio-icon a:hover {
        background-color: #ffffff;
        color: #053d69;
        border-color: transparent;
    }
    .portfolio-style-one .portfolio-text {
        padding-top: 24px;
    }
    @media (max-width: 767px) {
        .portfolio-style-one .portfolio-text {
            padding-top: 10px;
        }
    }
    .portfolio-style-one .portfolio-title a {
        color: #ffffff;
        font-size: 24px;
        line-height: 30px;
    }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .portfolio-style-one .portfolio-title a {
            font-size: 20px;
        }
    }
    @media (max-width: 767px) {
        .portfolio-style-one .portfolio-title a {
            font-size: 20px;
        }
    }
    .portfolio-style-one .text {
        color: #ffffff;
        margin-top: 8px;
        opacity: 0.7;
    }
    .portfolio-style-one:hover .portfolio-image img {
        -webkit-filter: blur(50px);
        -moz-filter: blur(50px);
        filter: blur(50px);
    }
    .portfolio-style-one:hover .portfolio-overlay {
        opacity: 1;
        visibility: visible;
    }

    @media (min-width: 1200px) {
    .navmenu .products-megamenu-2 .megamenu-content .featured-section .featured-image .featured-content h3
    {
        color: #111111 !important;
    }
         .navmenu .products-megamenu-2 .megamenu-content .categories-section .category-headers {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
    }
     .navmenu .products-megamenu-2 .megamenu-content .categories-section .category-links .link-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
    }
}

/* --- Styles personnalisés pour la carte produit ICAVI --- */
/* Styles déplacés vers product-components.css pour centralisation */

.product-details .product-info-wrapper .delivery-options .delivery-option .delivery-option-evolis-partner {
  width: 100px !important;
}

.product-details .product-info-wrapper .product-meta .product-title {
  margin: 0.75rem 0;
  color: #053d69;
}
.product-details .product-info-wrapper .product-price-container .price-wrapper .current-price{
  color: #ee3333;
}
.product-details .product-info-wrapper .delivery-options .delivery-option .delivery-option-repair-center {
  width: 90px !important;
}
.category-product-list .product-title {
    height: auto !important;
    text-align: center !important;
}
.footer .footer-main .footer-contact .contact-item i {
    margin-right: 0px !important;
}

/* Réduit la padding et la taille des images dans la carte produit */
.product-list .product-card,
.best-sellers .product-card,
.category-product-list .product-box {
    padding: 0.5rem !important;
    min-height: unset;
    height: auto;
    border: 1.5px solid #053d69;
}

.category-product-list .product-thumb {
    padding-bottom: 70%; /* au lieu de 100% pour réduire la hauteur de l'image */
}
.category-product-list .product-content {
    padding: 1rem;
}

.category-product-list .product-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    height: auto;
    line-height: 1.2;
}

.category-product-list .product-short-description {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.category-product-list .product-price {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.category-product-list .product-title {
    height: 2.2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.category-product-list .product-short-description {
    height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.category-product-list .product-content
{
    padding: 0 !important;
}

.category-product-list .add-to-cart-btn {
    padding: 2px 0px !important;
    width: 100px !important;
}
.product-footer-info{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.custom-thumbnails-vertical .thumbnails-container {
   /*  max-height: 420px; augmente la hauteur */
    overflow-y: auto;
    gap: 10px;
}
.custom-thumbnails-vertical .thumbnail-item img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1.5px solid #eee;
    transition: border-color 0.2s;
}
.custom-thumbnails-vertical .thumbnail-item img:hover {
    border-color: #ee3333;
}
/* @media (max-width: 991px) {
    .custom-thumbnails-vertical .thumbnails-container {
        max-height: 220px;
    }
    .custom-thumbnails-vertical .thumbnail-item img {
        width: 55px;
        height: 55px;
    }
} */

.product-details .product-gallery .thumbnails-vertical .thumbnail-item{
    opacity: 1 !important;
}
 @media (min-width: 768px) {
    .product-details .product-gallery .thumbnails-vertical
 {
        width: 120px !important;
    }
}
.icavi-reassurance .col {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px 10px;
    min-height: 90px;
    align-items: center;
}
.icavi-reassurance img,
.icavi-reassurance i {
    min-width: 40px;
    max-width: 48px;
}
.icavi-reassurance h6 {
    font-size: 1rem;
    margin-bottom: 2px;
}
.icavi-reassurance p {
    font-size: 0.97rem;
    margin-bottom: 0;
}
#product-details .row.g-5, #product-details .row.g-4 {
    row-gap: 1.5rem !important;
    align-items: flex-start;
}
@media (min-width: 992px) {
    #product-details .col-lg-6 {
        margin-bottom: 0 !important;
    }
}
.category-product-list{
    padding: 0 !important;
}
.category-header .filter-container .active-filters
 {
    gap: 0rem !important;
    margin-top: 0rem !important;
     padding-top: 0rem !important;
}
.footer .footer-main .footer-contact .hour-icon span{
   margin-right: 5px;
}
.footer .footer-main .footer-contact .hour-icon i {
    color:white !important;
    font-size: 18px;
}

.best-sellers .product-details{
    padding: 0px !important;
}
.best-sellers .product-title{
    text-align: center !important;
    overflow: hidden  !important;
    display: -webkit-box;
    -webkit-line-clamp : 2 !important;
    -webkit-box-orient: vertical !important;
      height: auto;
}
.best-sellers .product-meta{
    justify-content: center !important;
}
.best-sellers .product-category{
    text-align: center !important;
}

.best-sellers .product-image{
    padding-top: 90% !important;
}
.product-details .product-info-wrapper .product-meta .product-title{
    font-size: 2rem !important;
 }
.page-title h1{
    color: #053d69;
}

/* Style pour la catégorie courante (le lien exact sur lequel l'utilisateur se trouve) */
.category-link.active.current-category {
    color: #ee3333;
    font-weight: bold;
}

/* Style pour le lien de catégorie actif */
.category-link.active {
    color: #ee3333; /* Ou la couleur principale de votre charte graphique */
    font-weight: bold;
    border-bottom: 2px solid #ee3333;
    padding-bottom: 2px;
}

/* Cache l'icône de flèche vers le haut par défaut */
.category-toggle .bi-chevron-up {
    display: none;
}

.btn-contact-error-page {
    display: inline-flex;            /* au lieu de inline-block */
    align-items: center;             /* centre verticalement */
    justify-content: center;         /* centre horizontalement */
    font-weight: 600;
    line-height: 1.2;                /* réduit la hauteur de ligne */
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    background-color: #ee3333;
    border: 1px solid #fff;
    padding: 12px 25px;
    margin-top: 20px;
    font-size: 16px;
    overflow: hidden;
    color: #ffffff;
}

/* Désactive les clics sur les slides qui ne sont pas actifs */
.hero .hero-slider .swiper-slide {
  pointer-events: none;
}

.hero .hero-slider .swiper-slide.swiper-slide-active {
  pointer-events: auto;
}

/* Forcer les boutons et liens du slider à rester cliquables */
.hero .hero-slider a,
.hero .hero-slider button,
.hero .hero-slider .btn {
  position: relative;
  z-index: 10;
  pointer-events: auto !important;
}
@media (max-width: 767px) {
.row .sidebar, 
.active-filters{
    display: none !important;
  }
}

/* ========================================
   MODERN STYLES & EFFECTS - ICAVI SECURE
   ======================================== */

/* ========================================
   OPTIMISATION DES POLICES PROFESSIONNELLES
   ======================================== */

/* Corps de texte - Inter pour une lisibilité optimale */
body,
p,
.lead,
.product-short-description,
.product-details {
    font-family: var(--default-font);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: -0.01em;
}

/* Titres - Poppins pour un impact visuel fort */
h1, h2, h3, h4, h5, h6,
.section-title h2,
.message-box h2,
.product-title {
    font-family: var(--heading-font);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* Titres principaux - Extra Bold */
h1,
.hero h1,
.page-title h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Sous-titres - Semi-Bold */
h2 {
    font-weight: 700;
}

h3, h4 {
    font-weight: 600;
}

h5, h6 {
    font-weight: 500;
}

/* Navigation - Poppins Medium pour la clarté */
.navmenu a,
.nav-link,
.navbar-nav .nav-link {
    font-family: var(--nav-font);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Prix et chiffres - DM Sans pour une excellente lisibilité */
.product-price,
.price,
.current-price,
.product-meta,
.badge,
.counter {
    font-family: var(--number-font);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Boutons - Poppins Semi-Bold */
.btn,
.btn11,
.btn-shop,
.add-to-cart-btn,
button {
    font-family: var(--heading-font);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Catégories et labels - Poppins Medium */
.product-category,
.product-badge,
.product-label,
.category-name {
    font-family: var(--heading-font);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.8em;
}

/* Lead text - Inter Medium pour l'importance */
.lead,
.section-title .lead {
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Footer - Inter Regular */
.footer,
.footer p,
.footer-links a {
    font-family: var(--default-font);
    font-weight: 400;
    line-height: 1.8;
}

/* Optimisation de la lisibilité */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Tailles de police optimisées */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.1rem; }

/* Responsive - Ajustement des tailles sur mobile */
@media (max-width: 767px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    body { font-size: 15px; }
    .lead { font-size: 1.05rem; }
}

/* --- Smooth Scroll Behavior --- */
html {
    scroll-behavior: smooth;
}

/* --- Modern Gradient Backgrounds --- */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(5, 61, 105, 0.03) 0%, rgba(238, 51, 51, 0.03) 100%);
    pointer-events: none;
    z-index: 0;
}

/* --- Section Services - Fond professionnel --- */
#services.parallax {
    position: relative;
    background: linear-gradient(135deg, #053d69 0%, #002e5b 100%);
    padding: 60px 0 !important;
}

#services.parallax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(238, 51, 51, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(248, 232, 1, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

#services .section-title h2,
#services .section-title .lead {
    color: #ffffff !important;
    position: relative;
    z-index: 2;
}

#services .section-title h2 {
    background: linear-gradient(135deg, #ffffff 0%, #F8E801 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* --- Floating Animation for Hero Elements --- */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.product-showcase .product-item {
    animation: float 6s ease-in-out infinite;
}

.product-showcase .product-item:nth-child(2) {
    animation-delay: 1.5s;
}

.product-showcase .product-item:nth-child(3) {
    animation-delay: 3s;
}

.product-showcase .product-item:nth-child(4) {
    animation-delay: 4.5s;
}

/* --- Modern Card Hover Effects with Shadow --- */
.product-card,
.content-card,
.product-box {
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(5, 61, 105, 0.1);
}

.product-card::before,
.content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(5, 61, 105, 0.03), rgba(238, 51, 51, 0.03));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.product-card:hover::before,
.content-card:hover::before {
    opacity: 1;
}

.product-card:hover,
.content-card:hover,
.product-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(5, 61, 105, 0.15), 
                0 8px 20px rgba(238, 51, 51, 0.1);
    border-color: rgba(238, 51, 51, 0.3);
}

/* --- Best Sellers Section - Fond amélioré --- */
#best-sellers {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

#best-sellers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #053d69 0%, #ee3333 50%, #F8E801 100%);
}

#best-sellers .section-title h2 {
    position: relative;
    display: inline-block;
}

#best-sellers .section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #053d69, #ee3333);
    border-radius: 2px;
}

/* --- Glassmorphism Effect for Service Cards --- */
.content-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(5, 61, 105, 0.1);
    box-shadow: 0 8px 32px rgba(5, 61, 105, 0.08);
}

/* --- Section À Propos - Amélioration --- */
#about.section {
    position: relative;
    overflow: hidden;
}

#about.section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(238, 51, 51, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

#about.section::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(5, 61, 105, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

#about .message-box {
    position: relative;
    z-index: 1;
}

#about .post-media img {
    border-radius: 1.9%;
    box-shadow: 0 10px 40px rgba(5, 61, 105, 0.15);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

#about .post-media img:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 50px rgba(5, 61, 105, 0.2);
}

/* --- Shimmer Loading Effect --- */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.product-image img {
    position: relative;
    overflow: hidden;
}

.product-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.product-card:hover .product-image::after {
    opacity: 1;
}

/* --- Modern Button Styles with Ripple Effect --- */
.btn11,
.btn-shop,
.add-to-cart-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(5, 61, 105, 0.2);
    transition: all 0.3s ease;
}

.btn11:hover,
.btn-shop:hover,
.add-to-cart-btn:hover {
    box-shadow: 0 6px 25px rgba(238, 51, 51, 0.3);
    transform: translateY(-2px);
}

.btn11::before,
.btn-shop::before,
.add-to-cart-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: -1;
}

.btn11:hover::before,
.btn-shop:hover::before,
.add-to-cart-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* --- Section Clients - Amélioration --- */
.client-section {
    position: relative;
}

.client-section-title h2 {
    color: #053d69 !important;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.client-section-title h2::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ee3333);
}

.client-section-title h2::after {
    content: '';
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 3px;
    background: linear-gradient(90deg, #ee3333, transparent);
}

/* Logos clients - Effet hover amélioré */
.carousel-item img {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: grayscale(0%);
    opacity: 0.9;
}

.carousel-item:hover img {
    transform: scale(1.1);
    filter: grayscale(0%);
    opacity: 1;
    box-shadow: 0 8px 25px rgba(5, 61, 105, 0.15);
}

/* --- Gradient Text Effect --- */
.message-box h2,
.page-title h1 {
    background: linear-gradient(135deg, #053d69 0%, #ee3333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
}

/* Pas de gradient pour le titre de section qui a déjà son style */
.section-title h2:not(#services .section-title h2) {
    color: #053d69 !important;
    font-weight: 700;
}

/* --- Animated Underline Effect --- */
.read-more,
.product-title a {
    position: relative;
    display: inline-block;
}

.read-more::after,
.product-title a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ee3333, #053d69);
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.read-more:hover::after,
.product-title a:hover::after {
    width: 100%;
}

/* --- Parallax Background Effect --- */
.parallax {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* --- Image Zoom on Hover --- */
.product-image,
.card-image {
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.product-image img,
.card-image img {
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

.product-card:hover .product-image img,
.content-card:hover .card-image img {
    transform: scale(1.1);
}

/* --- Image Hover Overlay Effect --- */
.product-image::before,
.card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(5, 61, 105, 0.1), rgba(238, 51, 51, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    border-radius: 8px;
}

.product-card:hover .product-image::before,
.content-card:hover .card-image::before {
    opacity: 1;
}

/* --- Badge Pulse Animation --- */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(238, 51, 51, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(238, 51, 51, 0);
    }
}

.product-badge,
.product-label {
    animation: pulse 3s infinite;
}

/* Badges avec couleurs de marque */
.product-badge.new,
.product-label {
    background: linear-gradient(135deg, #ee3333, #ff4444);
    box-shadow: 0 4px 15px rgba(238, 51, 51, 0.3);
}

.product-badge.economique,
.product-badge.classique,
.product-badge.polyvalent {
    background: linear-gradient(135deg, #053d69, #0a4d8f);
    box-shadow: 0 4px 15px rgba(5, 61, 105, 0.3);
}

/* --- Smooth Scroll Reveal Animation --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card,
.content-card {
    animation: fadeInUp 0.8s ease-out;
    animation-fill-mode: both;
}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }

/* --- Modern Gradient Border --- */
.product-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(135deg, #053d69, #ee3333);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.product-box:hover::before {
    opacity: 1;
}

/* --- Text Shadow on Hover --- */
.product-title:hover a,
.content-card h3:hover {
    text-shadow: 2px 2px 8px rgba(238, 51, 51, 0.3);
    transition: text-shadow 0.3s ease;
}

/* --- Loading Skeleton Animation --- */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* --- Icon Bounce on Hover --- */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.read-more:hover i,
.btn-shop:hover i {
    animation: bounce 1s;
}

/* --- Card Flip Effect for Logo Carousel --- */
.carousel-item img {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.carousel-item:hover img {
    transform: rotateY(10deg) scale(1.1);
}

/* --- Modern Scrollbar --- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #053d69, #ee3333);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #ee3333, #053d69);
}

/* --- Glow Effect on Focus --- */
.btn11:focus,
.add-to-cart-btn:focus,
input:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(238, 51, 51, 0.3),
                0 0 20px rgba(5, 61, 105, 0.2);
    transition: box-shadow 0.3s ease;
}

/* --- Particle Background Effect (Subtle) --- */
.hero::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(238, 51, 51, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(5, 61, 105, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* --- Image Hover Overlay Effect --- */
.product-image::before,
.card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(238, 51, 51, 0.3), rgba(5, 61, 105, 0.3));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.product-card:hover .product-image::before,
.content-card:hover .card-image::before {
    opacity: 1;
}

/* --- 3D Tilt Effect on Cards --- */
@media (min-width: 768px) {
    .product-card,
    .content-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        transform-style: preserve-3d;
    }
}

/* --- Counter Animation --- */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Typewriter Effect for Titles (Optional) --- */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* --- Neon Glow Effect --- */
.product-badge.new:hover,
.product-label:hover {
    box-shadow: 0 0 10px #ee3333,
                0 0 20px #ee3333,
                0 0 30px #ee3333;
    transition: box-shadow 0.3s ease;
}

/* --- Smooth Page Transitions --- */
.main {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* --- Interactive Border Animation --- */
@keyframes borderRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* --- Social Links Hover Effect --- */
.social-links .social-icons a {
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.social-links .social-icons a:hover {
    transform: translateY(-5px) rotate(10deg) scale(1.2);
    box-shadow: 0 10px 20px rgba(238, 51, 51, 0.3);
}

/* --- Staggered Animation for Lists --- */
.footer-links li {
    animation: slideInLeft 0.5s ease-out;
    animation-fill-mode: both;
}

.footer-links li:nth-child(1) { animation-delay: 0.1s; }
.footer-links li:nth-child(2) { animation-delay: 0.2s; }
.footer-links li:nth-child(3) { animation-delay: 0.3s; }
.footer-links li:nth-child(4) { animation-delay: 0.4s; }
.footer-links li:nth-child(5) { animation-delay: 0.5s; }

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Responsive Enhancements --- */
@media (max-width: 767px) {
    /* Reduce animation complexity on mobile for better performance */
    .product-showcase .product-item {
        animation: none;
    }
    
    .product-card:hover,
    .content-card:hover {
        transform: translateY(-5px) scale(1.01);
    }
}

/* ========================================
   ADDITIONAL ANIMATIONS & UTILITIES
   ======================================== */

/* --- Ripple Effect --- */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* --- Particle Fade Animation --- */
@keyframes particle-fade {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0);
    }
}

/* --- Animate In Class --- */
.animate-in {
    animation: fadeInUp 0.8s ease-out;
}

/* --- Image Fade In --- */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* --- Navbar Scroll Effects --- */
.header.scroll-down {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.header.scroll-up {
    transform: translateY(0);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

/* --- Gradient Animation --- */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.btn11,
.btn-shop {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* --- Hover Scale Effect --- */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* --- Text Reveal Animation --- */
@keyframes text-reveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

.text-reveal {
    animation: text-reveal 1s ease-out;
}

/* --- Loading Spinner --- */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(238, 51, 51, 0.3);
    border-top-color: #ee3333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* --- Skeleton Loading --- */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* --- Progress Bar --- */
.progress-bar {
    height: 4px;
    background: linear-gradient(90deg, #053d69, #ee3333);
    animation: progress 2s ease-in-out;
}

@keyframes progress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* --- Tooltip Modern Style --- */
.tooltip {
    position: relative;
}

.tooltip::before,
.tooltip::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tooltip::before {
    content: attr(data-tooltip);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    padding: 8px 12px;
    background: #053d69;
    color: white;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
}

.tooltip::after {
    content: '';
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #053d69;
}

.tooltip:hover::before,
.tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- Card Shine Effect --- */
@keyframes card-shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.product-card::after,
.content-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    pointer-events: none;
}

.product-card:hover::after,
.content-card:hover::after {
    animation: card-shine 1s;
}

/* --- Modern Checkbox & Radio --- */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #053d69;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: linear-gradient(135deg, #053d69, #ee3333);
    border-color: #ee3333;
}

input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- Focus Ring Modern Style --- */
*:focus-visible {
    outline: 2px solid #ee3333;
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Utility Classes --- */
.blur-effect {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gradient-text {
    background: linear-gradient(135deg, #053d69, #ee3333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(238, 51, 51, 0.4);
}

.transform-3d {
    transform-style: preserve-3d;
}

/* --- Print Styles --- */
@media print {
    .header,
    .footer,
    .back-to-top,
    .social-links {
        display: none !important;
    }
    
    .product-card,
    .content-card {
        break-inside: avoid;
    }
}

/* ========================================
   SÉPARATEURS DE SECTIONS PROFESSIONNELS
   ======================================== */

/* Séparateur entre sections */
.section {
    position: relative;
}

.section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ee3333, transparent);
    opacity: 0.3;
}

/* Ne pas afficher le séparateur pour certaines sections */
#services::after,
.hero::after {
    display: none;
}

/* ========================================
   ANIMATIONS D'ENTRÉE POUR LES SECTIONS
   ======================================== */

/* Animation fade-in pour les sections au scroll */
@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section.animate-in {
    animation: sectionFadeIn 0.8s ease-out;
}

/* ========================================
   EFFETS DE TEXTE AMÉLIORÉS
   ======================================== */

/* Effet de surbrillance au survol des liens (exclut navigation et boutons) */
.footer a:not(.btn),
.content-card .card-content a:not(.read-more) {
    position: relative;
    transition: color 0.3s ease;
}

.footer a:not(.btn)::after,
.content-card .card-content a:not(.read-more)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}

.footer a:not(.btn):hover::after,
.content-card .card-content a:not(.read-more):hover::after {
    width: 100%;
}

/* ========================================
   LOADER / SPINNER PERSONNALISÉ
   ======================================== */

.icavi-loader {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(5, 61, 105, 0.2);
    border-left-color: #053d69;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ========================================
   PRICE TAG MODERNE
   ======================================== */

.product-price {
    position: relative;
    font-weight: 700;
    color: #ee3333;
}

.product-price::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ee3333, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-price::before {
    opacity: 1;
}

/* ========================================
   DROPDOWN NAVIGATION ENHANCEMENTS
   ======================================== */

/* Enhanced hover effect for product dropdown */
.navmenu .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Smooth transition for dropdown menus */
.navmenu .dropdown ul {
    transition: opacity 0.3s ease, top 0.3s ease, visibility 0.3s ease;
}

/* Sub-dropdown positioning */
.navmenu .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
}

/* Dropdown link hover effects */
.navmenu .dropdown ul a {
    transition: all 0.3s ease;
}

.navmenu .dropdown ul a:hover {
    padding-left: 25px;
    background-color: rgba(238, 51, 51, 0.05);
}

/* Active category highlighting in dropdown */
.navmenu .dropdown ul li.active > a {
    color: #ee3333;
    font-weight: 600;
    background-color: rgba(238, 51, 51, 0.08);
}

/* Ensure dropdown stays open when hovering over submenu */
.navmenu .dropdown ul,
.navmenu .dropdown:hover ul {
    pointer-events: auto;
}

/* Enhanced chevron animation */
.navmenu .dropdown > a .toggle-dropdown {
    transition: transform 0.3s ease;
}

.navmenu .dropdown:hover > a .toggle-dropdown {
    transform: rotate(180deg);
}