@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//contenedores-lolo.com/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.0.6") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//contenedores-lolo.com/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//contenedores-lolo.com/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//contenedores-lolo.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//contenedores-lolo.com/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//contenedores-lolo.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//contenedores-lolo.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//contenedores-lolo.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//contenedores-lolo.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Open Sans", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 15px;
	--wd-title-font: "Open Sans", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Open Sans", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Open Sans", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-primary-color: rgb(172,4,4);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--btn-default-bgcolor: rgb(137,154,235);
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(137,154,235);
	--btn-accented-bgcolor-hover: rgb(255,255,255);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.wd-popup.wd-age-verify {
	background-image: url(https://contenedores-lolo.com/wp-content/uploads/2021/09/medical-marijuana-popup-18.jpg);
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	--wd-popup-width: 800px;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: #0a0a0a;
	background-image: url(https://contenedores-lolo.com/wp-content/uploads/2025/06/buque-portacontenedores-nocturno.webp);
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: rgb(51,51,51);
	background-image: none;
}
.page .wd-page-content {
	background-color: rgb(255,255,255);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) .wd-page-content {
	background-color: rgb(255,255,255);
	background-image: none;
}
.single-product .wd-page-content {
	background-color: rgb(255,255,255);
	background-image: none;
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #333;
--btn-accented-color-hover: #333;
--btn-default-bottom-active: -1px;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-default-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}


.mobile-nav .create-nav-msg{
	display:none;
}

/* Section Bannière Utilité Modulables */
.modular-utility-banner {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Réduit la taille de la bannière */
    padding: 40px 20px; /* Padding intérieur ajusté */
    min-height: 280px; /* Hauteur minimale pour assurer un format bannière */
    position: relative;
    overflow: hidden; 
    color: #fff; /* Texte blanc par défaut pour contraster avec l'image de fond */
}

/* Overlay pour la lisibilité (similaire à la section avis si besoin) */
.modular-utility-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Ombre ou couleur semi-transparente sur l'image, ajustez */
    z-index: 1;
}


.modular-utility-banner .container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative; /* Pour que le contenu soit au-dessus de l'overlay */
    z-index: 2;
}

.utility-content-flex {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; /* Espace réduit entre les colonnes */
    align-items: center; 
}

/* Colonne Texte et Bouton à Gauche */
.utility-text-column {
    flex: 1 1 300px; /* Base ajustée */
    max-width: 400px; /* Limite ajustée */
    color: #ffffff; /* Texte blanc */
}

.utility-text-column h2 {
    font-size: 1.8em; /* Taille du titre ajustée pour une bannière */
    font-weight: bold; 
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
	color:#ffffff;
}

.utility-text-column p {
    font-size: 0.95em; /* Taille du texte ajustée */
    line-height: 1.6;
    color: #e0e0e0; /* Gris très clair pour la description */
    margin-bottom: 20px; /* Espace avant le bouton */
}

/* Style du bouton */
.utility-text-column .btn.btn-outline-light {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #ffffff; /* Bordure blanche */
    border-radius: 5px;
    color: #ffffff; /* Texte blanc */
    background-color: transparent;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s ease;
}
.utility-text-column .btn.btn-outline-light:hover {
    background-color: #ffffff; /* Fond blanc au survol */
    color: #1a3b5d; /* Texte bleu marine au survol */
}


/* Colonne Icônes et Usages à Droite (la grille) */
.utility-icons-grid {
    flex: 1 1 350px; /* Base ajustée */
    display: grid;
    /* Grille pour 8 items : sur desktop 4x2, sur tablette 3x?, sur mobile 2x4 */
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes par défaut */
    gap: 20px; /* Espace entre les items */
}

/* Style pour chaque item (icône + texte) */
.utility-item {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    color: #ffffff; /* Texte blanc */
}

.utility-icon-svg-wrapper {
    margin-bottom: 8px; /* Espace sous l'icône */
    /* Optionnel: pour une taille fixe ou un wrapper */
    width: 50px; /* Ajustez la taille si besoin */
    height: 50px; /* Ajustez la taille si besoin */
    display: flex; /* Centrer l'icône SVG */
    justify-content: center;
    align-items: center;
}

/* Styles pour l'icône (qu'elle soit Font Awesome ou votre SVG) */
.utility-item i,
.utility-item svg {
    font-size: 2.5em; /* Taille des icônes */
    color: rgba(255, 255, 255, 0.9); /* Blanc presque transparent */
    /* Si vous utilisez des SVGs personnalisés, vous devrez styliser le SVG lui-même ou son path */
}

.utility-item p {
    font-size: 0.85em; /* Taille du texte de l'usage ajustée */
    font-weight: 600; 
    margin: 0;
    line-height: 1.4;
    color: #ffffff; /* Texte blanc */
}

/* Responsive */
@media (max-width: 768px) {
     .modular-utility-banner {
        padding: 30px 15px; /* Moins de padding vertical et horizontal */
        min-height: auto; /* Hauteur auto sur mobile */
     }
    .utility-content-flex {
        flex-direction: column; /* Empile les colonnes */
        gap: 30px;
    }
    .utility-text-column {
        max-width: 100%; /* Le texte prend toute la largeur */
        text-align: center; /* Centre le texte sur mobile */
        margin-bottom: 0; /* L'espace est géré par le gap du flex parent */
    }
     .utility-text-column p {
         margin-bottom: 15px; /* Espace avant le bouton */
     }
    .utility-text-column h2 {
        font-size: 1.6em;
        margin-bottom: 10px;
    }

     .utility-icons-grid {
        flex-basis: auto; /* Annule la base flex spécifique */
        width: 100%; /* Prend toute la largeur */
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Ajuste le nombre de colonnes */
        gap: 15px; 
     }
     .utility-icon-svg-wrapper {
         width: 40px; height: 40px;
     }
     .utility-item i,
     .utility-item svg {
        font-size: 2em; /* Icônes plus petites sur mobile */
     }
     .utility-item p {
        font-size: 0.75em; /* Texte d'usage plus petit */
     }
}

/* Styles pour la Top Bar d'Annonce */
.top-bar-announcement {
    color: #ffffff; /* Texte blanc - Ajustez */
    text-align: center; /* Centre le texte */
    padding: 8px 15px; /* Padding vertical et horizontal */
    font-size: 1.9em; /* Taille de police sur desktop */
    line-height: 1.4;
    overflow: hidden; /* Important pour cacher les messages qui ne sont pas actifs */
    position: relative; /* Utile si les messages sont positionnés absolument */
}

.top-bar-messages-wrapper {
    position: relative; /* Conteneur pour les messages positionnés absolument */
    height: 1.4em; /* Fixe la hauteur pour éviter le saut quand les messages changent (ajustez si votre line-height est différent) */
    overflow: hidden; /* Assure que seul le message actif est visible verticalement */
    display: flex; /* Utiliser flex pour centrer le message si needed */
    align-items: center;
    justify-content: center;
}

.top-bar-message {
    position: absolute; /* Les messages sont positionnés un par dessus l'autre */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0; /* Cachés par défaut */
    transition: opacity 0.6s ease-in-out; /* Animation de fondu */
    /* transition: transform 0.6s ease-in-out; /* Pour un effet de glissement vertical, ajuster avec JS */
}

.top-bar-message p {
    margin: 0; /* Supprime les marges par défaut du paragraphe */
    padding: 0;
    white-space: nowrap; /* Empêche le texte de revenir à la ligne */
    text-overflow: ellipsis; /* Ajoute ... si le texte est trop long (sur une seule ligne) */
    overflow: hidden; /* Cache le texte qui dépasse de la ligne */
}

/* Le message actif sera rendu visible par le JavaScript */
.top-bar-message.active {
    opacity: 1; /* Rendre visible */
}


/* Responsive pour mobile (ajustement de la taille) */
@media (max-width: 768px) {
    .top-bar-announcement {
        font-size: 0.85em; 
        padding: 8px 10px; 
    }
    .top-bar-messages-wrapper {
         height: 1.5em; /* Ajustez si line-height est différent sur mobile */
    }
    .top-bar-message p {
         white-space: normal; /* Permet le retour à la ligne sur mobile */
         text-overflow: initial; /* Désactive ellipsis si retour à la ligne activé */
         overflow: visible; /* Permet au texte de prendre la hauteur nécessaire */
         line-height: 1.5; /* Interligne plus généreux sur mobile si plusieurs lignes */
    }
    .top-bar-messages-wrapper {
         height: auto; /* Permet au wrapper d'ajuster sa hauteur au message */
    }
}

/* Section Réassurance */
.reassurance-section {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-around; 
    gap: 20px; 
    padding: 40px 20px;
    background-color: #f8f9fa; /* Un fond très clair */
    text-align: center; 
    margin-top: 40px; 
    margin-bottom: 40px;
    /* Optionnel: bordures si vous le souhaitez */
    /* border-top: 1px solid #e0e0e0; */
    /* border-bottom: 1px solid #e0e0e0; */
}

.reassurance-item {
    flex: 1 1 220px; /* Chaque item essaie de prendre 220px, s'adapte */
    max-width: 280px; 
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff; /* Fond blanc pour chaque carte */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Ombre légère */
}

.reassurance-icon-wrapper {
    margin-bottom: 15px;
    /* Styles optionnels pour un cercle autour de l'icône (voir réponse précédente si vous voulez cet effet) */
}

.reassurance-icon {
    font-size: 3.5em; /* Icônes en grand caratère */
    color: #007bff; /* Couleur principale pour les icônes */
    margin-bottom: 10px; 
    line-height: 1; 
}

.reassurance-item h3 {
    font-size: 1.3em; /* Taille pour les petits titres */
    color: #343a40; 
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 600;
}

.reassurance-item p {
    font-size: 0.95em; /* Taille pour les descriptions */
    color: #555;
    line-height: 1.5;
    margin: 0;
}

/* Style pour le lien dans la description (pour la politique de retour) */
.reassurance-item p a {
    color: #007bff;
    text-decoration: none;
    font-weight: normal;
}
.reassurance-item p a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .reassurance-section {
        flex-direction: column; 
        align-items: center; 
    }
    .reassurance-item {
        max-width: 300px; /* Un peu plus large en mode colonne */
        margin-bottom: 20px; 
    }
    .reassurance-item:last-child {
        margin-bottom: 0;
    }
     .reassurance-icon {
        font-size: 3em; /* Icônes un peu plus petites sur mobile */
    }
}
/* Section Catégories avec Layout Spécifique */
.section-categories-custom {
    /* Pas d'image de fond pour cette section spécifique */
    background-color: #ffffff; /* Couleur de fond propre */
    padding: 40px 0; /* Padding vertical */
    position: relative;
}

/* Pas d'overlay pour cette section */
/*
.section-categories-custom::before {
    content: ''; // Supprimer ou commenter tout le bloc ::before
}
*/

.section-categories-custom .SaleBanners {
    /* Pas de position relative/z-index si pas d'overlay */
}

.section-categories-custom .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.section-categories-custom .bTitle {
    color: #333; /* Couleur du titre (ajustez) */
    font-size: 2.2em; 
    font-weight: bold; 
    margin-bottom: 30px;
    text-align: center;
    text-shadow: none; /* Pas d'ombre portée sur fond clair */
}

/* Gestion du layout des colonnes avec Flexbox */
.section-categories-custom .row.custom-categories-row {
    display: flex;
    flex-wrap: wrap; 
    margin-left: -15px; 
    margin-right: -15px;
    align-items: stretch; /* Les colonnes s'étirent pour avoir des hauteurs similaires */
}

.section-categories-custom .col-sm-12.custom-col-12 {
    width: 100%; 
    display: flex; 
    flex-wrap: wrap;
    margin-left: -15px; 
    margin-right: -15px;
}

.section-categories-custom .col-sm-4.custom-col-4 {
    width: 33.3333%; 
    padding: 0 15px; 
    box-sizing: border-box;
    margin-bottom: 30px; 
    display: flex; 
    flex-direction: column; /* Permet au salebanner de prendre la hauteur si nécessaire */
}

/* Style spécifique pour la colonne du milieu contenant les items empilés */
.section-categories-custom .col-sm-4.custom-col-4.stacked-col {
    display: flex;
    flex-direction: column; 
    gap: 20px; /* Espace entre les items empilés */
}

/* Style commun pour les blocs de vente (salebanner) */
.section-categories-custom .salebanner {
    position: relative;
    overflow: hidden; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column;
    height: 100%; /* S'assure qu'il prend toute la hauteur de sa colonne parente */
    background-color: #f8f8f8; /* Fond léger pour la carte */
}

.section-categories-custom .salebanner a {
    display: block;
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2; 
}

.section-categories-custom .salebanner img {
    display: block;
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease; 
}

/* Effet zoom au survol du salebanner */
.section-categories-custom .salebanner:hover img {
    transform: scale(1.08); 
}

/* Styles spécifiques pour les salebanners de petite taille dans la colonne empilée */
.section-categories-custom .salebanner.salebanner-small {
    height: auto; 
    min-height: 150px; /* Hauteur minimale pour les petites cartes, ajustez */
    /* La flexibilité du parent stacked-col gère la hauteur ici */
}
.section-categories-custom .salebanner.salebanner-small img {
     height: 100%; 
     object-position: center;
}


/* Styles pour le contenu textuel (overlay) */
.section-categories-custom .image-content {
    position: absolute;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0; 
    z-index: 3; 
    padding: 20px;
    color: white; /* Couleur du texte sur l'image (ajustez si image claire) */
    text-align: left; 
    display: flex; 
    flex-direction: column;
    justify-content: flex-end; 
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%); /* Dégradé sombre en bas */
}

/* Styles spécifiques pour le contenu textuel sur les grandes images (alignement en bas à gauche) */
.section-categories-custom .image-content-large {
    justify-content: flex-end; 
    padding-bottom: 25px; /* Ajustez le padding si besoin */
    padding-left: 25px; /* Ajustez le padding si besoin */
     background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%); /* Dégradé plus prononcé sur les grandes images */
}

.section-categories-custom .image-content h2 {
    color: white;
    font-size: 1.6em; /* Taille des titres d'overlay (plus petit que bTitle) */
    font-weight: bold; 
    margin: 0 0 8px 0; 
    line-height: 1.1;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.section-categories-custom .image-content p {
    margin: 0;
    font-size: 0.9em; 
    font-weight: bold; 
    text-transform: uppercase; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.section-categories-custom .image-content p a {
    color: white; 
    text-decoration: none;
    transition: color 0.2s ease;
}
.section-categories-custom .image-content p a:hover {
    color: #e0e0e0; 
}

.section-categories-custom .image-content p i {
    font-size: 0.9em; 
}


/* Responsive */
@media (max-width: 767px) { /* Point de rupture Bootstrap SM */
    .section-categories-custom .row.custom-categories-row {
        flex-direction: column; 
        align-items: center; 
        gap: 20px; /* Espacement réduit entre les grandes colonnes sur mobile */
        margin-bottom: 0;
    }
    .section-categories-custom .col-sm-12.custom-col-12 { 
         flex-direction: column;
         align-items: center;
         margin-left: auto; margin-right: auto;
         padding: 0;
    }
    .section-categories-custom .col-sm-4.custom-col-4 {
        width: 95%; /* Prend presque toute la largeur */
        max-width: 400px; /* Limite la largeur */
        padding: 0; 
        margin-left: auto; 
        margin-right: auto; 
        margin-bottom: 0; /* L'espace est géré par le gap du row parent */
    }
    .section-categories-custom .col-sm-4.custom-col-4.stacked-col {
        gap: 20px; 
        width: 95%; 
        max-width: 400px;
    }

    .section-categories-custom .salebanner,
    .section-categories-custom .salebanner.salebanner-small {
         height: auto; 
         min-height: 160px; /* Hauteur minimale sur mobile, ajustez */
    }

    .section-categories-custom .image-content h2 {
        font-size: 1.4em; /* Réduire la taille */
    }
     .section-categories-custom .image-content-large {
        padding-bottom: 15px; 
        padding-left: 15px; 
    }
}

/* Styles pour la section Avis Clients Personnalisée */
/* Styles pour la section Avis Clients Personnalisée */
.section-avis-clients-custom {
    /* Applique l'image de fond ici */
    background-image: url('https://contenedores-lolo.com/wp-content/uploads/2025/06/buque-portacontenedores-nocturno.webp'); /* ** Définissez l'URL de votre image de port de nuit ici ** */
    background-size: cover; /* Assure que l'image couvre toute la zone */
    background-position: center center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition */
    padding: 50px 20px; 
    position: relative;
    /* Retire la couleur de texte par défaut ici pour la mettre dans la colonne texte */
    color: #333; /* Couleur de texte par défaut pour le conteneur */
}

/* Overlay pour la lisibilité */
.section-avis-clients-custom::before { 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Utilise une couleur sombre semi-transparente pour le fond */
    background-color: rgba(10, 40, 70, 0.85); /* Augmente un peu l'opacité pour le texte blanc */
    z-index: 1;
}

/* Conteneur principal de la section pour le layout flex */
.avis-layout-flex.container {
    display: flex;
    flex-wrap: nowrap; 
    gap: 30px; 
    position: relative; 
    z-index: 2; /* Assure que ce contenu est au-dessus de l'overlay */
    max-width: 1200px; 
    margin: 0 auto;
    align-items: center; 
    /* Retire padding-right et padding-left si le row gère le gutter */
}

/* Colonne pour le texte (Titre, Description) à gauche */
.avis-texte-colonne.nrs-head {
    flex-basis: 380px; /* Largeur fixe souhaitée pour la colonne texte (ajustez) */
    max-width: 380px; 
    flex-shrink: 0; /* Empêche de rétrécir */
    text-align: left; 
    padding-right: 20px; /* Espace entre le texte et le carrousel */
    color: #ffffff; /* Texte blanc pour cette colonne */
    align-self: center; 
}

.avis-texte-colonne .icon img {
    max-height: 45px;
    margin-bottom: 15px;
}

.avis-texte-colonne .rich-head h1 {
    color: #ffffff; 
    font-size: 2.4em; 
    font-weight: bold; 
    margin-bottom: 10px;
    line-height: 1.25;
}
/* Enlève le style inline Font Vert de Shopify si présent */
.avis-texte-colonne .rich-head h1 font { 
    vertical-align: inherit !important;
    color: inherit !important; 
}

.avis-texte-colonne .rich-description p {
    color: #e0e8f0; /* Texte clair */
    font-size: 1.05em; 
    line-height: 1.65;
}
/* Enlève le style inline Font Vert de Shopify si présent */
.avis-texte-colonne .rich-description p font {
    vertical-align: inherit !important;
    color: inherit !important;
}


/* Colonne pour le Carrousel à Droite */
.avis-carrousel-colonne {
    flex-grow: 1; /* Prend l'espace restant */
    flex-shrink: 1; /* Peut rétrécir si nécessaire */
    min-width: 0; /* Permet le rétrécissement correct */
    position: relative; 
    overflow: hidden; /* CRUCIAL: Empêche le Swiper de déborder de cette colonne */
}

/* Styles Swiper */
.swiper.myReviews {
    /* Le padding est géré par le positionnement des flèches */
    position: relative; 
}

.swiper-wrapper {
     /* Swiper gère le style ici */
    padding-bottom: 35px; /* Espace pour la pagination en dessous */
    box-sizing: border-box; /* Inclure padding dans la taille */
}

.swiper-slide.nswiper-slide-content {
    height: auto; 
    display: flex; 
    padding: 0 5px; 
    box-sizing: border-box;
}
  
.nreview-card {
    text-align: left; 
    color: #333; 
    background-color: rgba(255, 255, 255, 0.97); 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 3px 10px rgba(0,0,0,0.07); 
    width: 100%; 
    display: flex;
    flex-direction: column;
    min-height: 270px; 
    box-sizing: border-box;
     /* Retire transition pour les modales */
}

.nreview-stars {
    display:flex;
    justify-content: flex-start; 
    color: #FFC107; 
    margin-bottom: 10px; 
}
.nreview-stars svg {
    width: 17px; 
    height: 17px;
    margin-right: 2px; 
}

.nreview-text {
    font-size: 0.95em; 
    margin: 0 0 15px 0;
    padding: 5px 0;
    flex-grow: 1; 
} 
.nreview-text p {
    font-size: 1em; /* Ajusté pour être plus lisible */
    font-style: italic;
    font-family: 'Georgia', 'Times New Roman', Times, serif; 
    line-height: 1.5; 
    color: #555; 
    margin: 0;
}
.nreview-text p::before {
    content: '“';
    font-size: 1.6em; 
    font-weight: bold;
    color: #0069d9; 
    margin-right: 3px;
    float: left; 
    line-height: 0.8; 
}
.nreview-text p::after {
    content: '”';
    font-size: 1.6em;
    font-weight: bold;
    color: #0069d9;
    line-height: 0.8;
}

.nreview-author {
    padding-top: 10px; 
    border-top: 1px solid #e0e0e0; 
    margin-top: auto; 
    text-align: right; 
}
.nrs-name {
    font-weight: 600;
    font-size: 0.95em; /* Ajusté */
    color: #1a3b5d; 
    margin-bottom: 3px;
}
.nrs-date {
    font-size: 0.75em;
    color: #6c757d; 
} 
  
/* Flèches Swiper positionnées APRES le swiper-wrapper dans le HTML */
/* Adapter les styles pour qu'elles ressemblent à celles de l'image */
.swiper-button-prev,
.swiper-button-next {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    z-index: 10;
    color: #ffffff; /* Flèches blanches */
    background-color: rgba(0,0,0,0.3); /* Fond semi-transparent (ajustez) */
    border-radius: 50%; /* Ronds */
    width: 40px !important; /* Ajuster la taille */
    height: 40px !important;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(0,0,0,0.5); /* Augmenter l'opacité au survol */
}
/* Styles des icônes de flèche (dépend de si c'est SVG ou texte) */
.swiper-button-prev::after,
.swiper-button-next::after {
    content: ''; /* Supprimer le contenu par défaut si vous utilisez des icônes */
    /* Si vous utilisez des SVG pour les flèches, ciblez les SVG directement */
}

/* Positionnement des flèches PAR RAPPORT AU CONTENEUR PRINCIPAL DE LA SECTION si elles ne sont pas DANS la colonne carrousel */
/* Si elles sont DANS la colonne carrousel, les styles de la réponse précédente étaient corrects */
/* Si elles sont positionnées comme dans votre HTML d'origine (après le swiper-wrapper mais DANS .swiper)
   elles sont absolues par rapport à .swiper */
.swiper-button-prev {
    left: 0; /* Positionnement à 0px du bord gauche du .swiper */
}
.swiper-button-next {
    right: 0; /* Positionnement à 0px du bord droit du .swiper */
}

/* Style de la flèche graphique à l'intérieur du bouton */

/* Si Swiper utilise un pseudo-élément (moins probable avec les dernières versions du bundle) */
.swiper-button-prev::after,
.swiper-button-next::after {
    content: ''; /* Si Swiper utilise des caractères, mettez le bon caractère ici, ex: '\u{2039}'; */
    font-family: swiper-icons; /* Si Swiper utilise sa propre police */
    font-size: 20px; /* Taille de l'icône de flèche */
    font-weight: bold;
    color: #ffffff; /* **Couleur des flèches (si via pseudo-élément)** */
    line-height: 1; /* Assure un bon alignement vertical */
}

/* Si Swiper utilise un SVG (très probable avec les dernières versions du bundle) */
.swiper-button-prev svg,
.swiper-button-next svg {
    width: 20px; /* Taille de l'icône SVG */
    height: 20px;
    /* Assurez-vous que le SVG lui-même ou son path hérite la couleur */
    fill: currentColor; /* Le SVG prendra la 'color' du parent (.swiper-button-prev/next) */
}
.swiper-pagination.nreview-dots {
    position: absolute; 
    bottom: 5px !important; /* Ajustez cette valeur */
    left: 0;
    width: 100%; 
    text-align: center;
    z-index: 10; /* Assurez-vous qu'ils sont cliquables */
}
.nreview-dots .swiper-pagination-bullet {
    background: rgba(255,255,255,0.5) !important; 
    opacity: 1 !important;
    width: 9px !important;
    height: 9px !important;
    margin: 0 4px !important; 
}
.nreview-dots .swiper-pagination-bullet-active {
    background: #ffffff !important; 
}
  
/* Responsive */
@media (max-width: 991px) { 
    .avis-layout-flex.container {
        flex-direction: column; 
        align-items: center; 
        gap: 20px; /* Réduire le gap sur mobile */
    }
    .avis-texte-colonne.nrs-head {
        flex-basis: auto; 
        width: 95%; /* Prend plus de largeur quand empilé */
        max-width: 500px; 
        text-align: center; 
        padding-right: 0;
        margin-bottom: 10px; /* Espace sous le texte */
    }
    .avis-texte-colonne .icon { margin-left: auto; margin-right: auto; }

    .avis-carrousel-colonne {
        flex-grow: 1; /* Prend l'espace restant */
        flex-basis: auto;
        width: 100%; 
        max-width: 100%; /* Prend toute la largeur */
        padding: 0 15px; /* Ajoute un padding pour éviter que le carrousel ne colle aux bords de l'écran */
        box-sizing: border-box;
    }
     .swiper.myReviews {
         /* Retirer le padding qui était là pour les flèches */
         padding: 0;
     }

    .nreview-card {
         /* Ajuster min-height si besoin sur mobile */
         min-height: 220px;
         padding: 15px;
     }
    .nreview-text p { font-size: 1em; }

    /* Ajuster position des flèches pour mobile */
     .swiper-button-prev, .swiper-button-next {
        width: 36px !important;
        height: 36px !important;
     }
     .swiper-button-prev::after, .swiper-button-next::after {
        font-size: 16px !important;
     }
     .swiper-button-prev { left: -5px; } /* Positionner au bord du conteneur padding */
     .swiper-button-next { right: -5px; }

    .swiper-pagination.nreview-dots {
        bottom: 0px !important; /* Remonter la pagination */
        margin-top: 15px;
     }
	 
     .swiper-button-prev svg, .swiper-button-next svg {
         width: 16px; height: 16px;
     }
}

@media (max-width: 576px) { 
    .section-avis-clients-custom {
        padding: 30px 10px; 
    }
    .avis-texte-colonne .rich-head h1 { font-size: 2em; }
    .avis-texte-colonne .rich-description p { font-size: 0.9em; }
    .nreview-card { min-height: 200px; }
    /* Optionnel: cacher les flèches sur les plus petits mobiles */
    /* .swiper-button-prev, .swiper-button-next { display: none !important; } */
}
/* Styles pour la page de contact au design épuré */
.contact-page-container.sleek-design {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police plus moderne */
    background-color: #f4f7f6; /* Fond très clair */
}

.contact-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-header h2 {
    font-size: 2.5em;
    color: #1a3b5d; /* Bleu marine profond */
    margin-bottom: 10px;
    font-weight: 600;
}

.contact-header p {
    font-size: 1.1em;
    color: #5a7184; /* Gris bleuté */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.contact-grid {
    display: flex;
    flex-wrap: wrap; /* S'adapte sur petits écrans */
    gap: 30px; /* Espace entre formulaire et carte */
    align-items: stretch; /* Étire les enfants à la même hauteur */
}

/* Colonne du Formulaire */
.contact-form-column {
    flex: 1 1 55%; /* Prend environ 55% de la largeur, s'adapte */
    min-width: 300px; /* Largeur minimale avant de passer en dessous */
    background-color: #ffffff;
    padding: 30px 35px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
}

.form-wrapper h3 {
    font-size: 1.8em;
    color: #1a3b5d;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 500;
}

/* Styles spécifiques pour les éléments Contact Form 7 */
.wpcf7-form p { /* Englobe chaque champ dans CF7 */
    margin-bottom: 20px;
}
.wpcf7-form label {
    display: block;
    margin-bottom: 8px;
    color: #4a5568; /* Gris foncé pour les labels */
    font-size: 0.95em;
    font-weight: 500;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 14px 18px; /* Padding plus généreux */
    border: 1px solid #cbd5e0; /* Bordure gris clair */
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1em;
    color: #2d3748; /* Couleur du texte dans les champs */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: #367cff; /* Bleu pour le focus */
    box-shadow: 0 0 0 3px rgba(54, 124, 255, 0.2);
}
.wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}
.wpcf7-form input[type="submit"] {
    background-color: #367cff; /* Bleu principal */
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block; /* Pour que le padding fonctionne bien */
}
.wpcf7-form input[type="submit"]:hover {
    background-color: #1a5fdc; /* Bleu plus foncé */
    transform: translateY(-2px);
}
.wpcf7-spinner { /* Le spinner de chargement de CF7 */
    margin-left: 10px;
}
/* Messages de CF7 */
div.wpcf7-response-output {
    margin: 20px 0 0 0 !important;
    padding: 15px !important;
    border-radius: 8px;
    font-size: 0.95em;
}
div.wpcf7-mail-sent-ok { /* Succès */
    background-color: #e6fffa;
    border: 1px solid #38c172 !important;
    color: #1f9d55;
}
div.wpcf7-validation-errors, /* Erreurs générales */
div.wpcf7-spam-blocked { /* Spam */
    background-color: #fff5f5;
    border: 1px solid #e53e3e !important;
    color: #c53030;
}
span.wpcf7-not-valid-tip { /* Message d'erreur par champ */
    color: #c53030;
    font-size: 0.85em;
    display: block;
    margin-top: 5px;
}


/* Colonne de la Carte d'Information */
.contact-info-column {
    flex: 1 1 35%; /* Prend environ 35% de la largeur, s'adapte */
    min-width: 300px;
    background: linear-gradient(135deg, #1a3b5d 0%, #305f87 100%); /* Dégradé bleu marine */
    color: #e0eaff; /* Texte bleuté très clair */
    padding: 30px 35px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
}

.info-card h3 {
    font-size: 1.8em;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
}

.info-item {
    display: flex;
    align-items: flex-start; /* Aligne l'icône en haut si le texte est long */
    margin-bottom: 25px;
}
.info-item:last-child {
    margin-bottom: 0;
}

.info-icon {
    font-size: 1.6em; /* Taille de l'icône */
    color: #6cb2eb; /* Bleu ciel pour les icônes */
    margin-right: 20px;
    margin-top: 3px; /* Petit ajustement vertical */
    width: 25px;
    text-align: center;
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
}

.info-text strong {
    display: block;
    font-size: 0.9em;
    color: #a3b6c7; /* Gris bleuté pour le label "Adresse:", etc. */
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.info-text p {
    margin: 0;
    font-size: 1em;
    line-height: 1.6;
}
.info-text p span.hours {
    display: block; /* Pour les horaires sur une nouvelle ligne si besoin */
    margin-left: 10px; /* Indentation pour l'espagnol */
}
.info-text p a {
    color: #e0eaff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.info-text p a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Section Carte Google Maps (si utilisée) */
.map-section-below {
    margin-top: 40px;
    border-radius: 12px;
    overflow: hidden; /* Pour que le border-radius s'applique à l'iframe */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
}
.map-section-below h3 {
    font-size: 1.8em;
    color: #1a3b5d;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
}
.map-section-below iframe {
    display: block; /* Enlève l'espace en dessous de l'iframe */
    border: none;
}


/* Responsive pour la grille principale */
@media (max-width: 900px) { /* Point de rupture où les colonnes passent l'une sous l'autre */
    .contact-grid {
        flex-direction: column;
    }
    .contact-form-column,
    .contact-info-column {
        flex-basis: auto; /* Réinitialise la base flex pour qu'elles prennent toute la largeur */
    }
}
@media (max-width: 600px) {
    .contact-header h2 {
        font-size: 2em;
    }
    .contact-form-column, .contact-info-column {
        padding: 20px 25px;
    }
    .form-wrapper h3, .info-card h3 {
        font-size: 1.5em;
    }
}

.faq-container {
    max-width: 800px;
    margin: 30px auto; /* Ajustez si nécessaire pour l'intégration */
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.faq-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50; /* Couleur titre principale */
}

.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.faq-question {
    background-color: transparent;
    color: #333; /* Couleur texte question */
    border: none;
    padding: 15px 0;
    width: 100%;
    text-align: left;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.faq-question:hover,
.faq-question.active {
    color: #007bff; /* Couleur texte question au survol/active */
}

.faq-question i {
    transition: transform 0.3s ease;
    font-size: 0.9em;
}

.faq-question.active i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    background-color: #f9f9f9;
    border-left: 3px solid #007bff; /* Bordure réponse */
    padding: 0 15px; /* Initialement pas de padding vertical */
}

.faq-answer p {
    margin: 0; 
    padding: 15px 0; 
    font-size: 0.95em;
}
.faq-answer p:first-child {
    padding-top: 15px;
}
.faq-answer p:last-child {
    padding-bottom: 15px;
}

/* Responsive */
@media (max-width: 600px) {
    .faq-question {
        font-size: 1em;
    }
    .faq-answer p {
        font-size: 0.9em;
    }
}