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

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//contentorshop.com/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//contentorshop.com/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//contentorshop.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//contentorshop.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("//contentorshop.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//contentorshop.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//contentorshop.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//contentorshop.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 15px;
	--wd-title-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Manrope", 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: "Manrope", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 14px;
	--wd-brd-radius: 10px;
	--wd-primary-color: rgb(0,0,0);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(15,76,92);
	--btn-accented-bgcolor-hover: rgb(15,76,92);
	--btn-transform: capitalize;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: rgb(221,4,4);
	--notices-warning-color: #fff;
	--wd-sticky-btn-height: 95px;
}
.wd-popup.wd-age-verify {
	--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;
}
:is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(255,255,255);
	--wd-bordered-bg:rgb(255,255,255);
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: rgb(255,255,255);
	background-image: url(http://contentorshop.com/wp-content/uploads/2025/05/FE15EQ.jpg.webp);
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: rgb(10,49,58);
	background-image: none;
}
html .wd-nav-mobile > li > a {
	text-transform: capitalize;
}
html .wd-checkout-steps li, html table th {
	text-transform: capitalize;
}
html .page-title > .container > .title, html .page-title > .container > .wd-title-wrapp > .title {
	font-size: 32px;
}
.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(248,248,248);
	background-image: none;
}
.single-product .wd-page-content {
	background-color: rgb(248,248,248);
	background-image: none;
}
.woodmart-archive-blog .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
.single-post .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
.woodmart-archive-portfolio .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
.single-portfolio .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
html .widget_price_filter [class*="price_slider_amount"] .button {
	color: rgb(255,255,255);
	background: rgb(15,76,92);
}
html .widget_price_filter [class*="price_slider_amount"] .button:hover {
	color: rgb(255,255,255);
	background: rgb(15,76,92);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(255,255,255);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-size: 40px;
	--wd-arrow-icon-size: 16px;
	--wd-arrow-offset-h: 20px;
	--wd-arrow-color: rgb(51,51,51);
	--wd-arrow-color-hover: rgb(255,255,255);
	--wd-arrow-color-dis: rgba(51,51,51,0.8);
	--wd-arrow-bg: rgb(255,255,255);
	--wd-arrow-bg-hover: rgb(140,188,103);
	--wd-arrow-bg-dis: rgb(255,255,255);
	--wd-arrow-radius: 10px;
	--wd-arrow-shadow: 0px 0px 0px 0px rgba(255,255,255,0);
}
.wd-nav-scroll {
	--wd-nscroll-height: 3px;
	--wd-nscroll-drag-bg: rgb(140,188,103);
	--wd-nscroll-drag-bg-hover: rgb(128,171,94);
}
.product-labels .product-label.new {
	background-color: rgb(140,188,103);
	color: rgb(255,255,255);
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-sticky-btn-height: 95px;
	}
	html .page-title > .container > .title, html .page-title > .container > .wd-title-wrapp > .title {
		font-size: 28px;
	}
	[class*="thumbs-grid-bottom"] .woocommerce-product-gallery__wrapper.wd-grid {
		--wd-col: 1;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-sticky-btn-height: 42px;
	}
	[class*="thumbs-grid-bottom"] .woocommerce-product-gallery__wrapper.wd-grid {
		--wd-col: 1;
	}

}
:root{
--wd-container-w: 1480px;
--wd-form-brd-radius: 5px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}

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


.tabs-wd-68229c4649048.tabs-design-default .products-tabs-title .tab-label:after {
    background-color: #FF4500 !important;
}
/* --- Style pour les éléments de Caractéristique/Avantage --- */

.feature-item {
    display: flex; /* Aligne l'icône et le texte */
    align-items: center; /* Centre verticalement */
    margin-bottom: 15px; /* Espace entre les éléments */
    font-size: 1.1em; /* Taille de police */
    color: #444; /* Couleur du texte */
}

/* Style pour les icônes dans les feature-item */
.feature-item i {
    font-size: 1.5em; /* Taille de l'icône (plus grande que le texte) */
    margin-right: 15px; /* Espace entre l'icône et le texte */
    color: #0F4C5C; /* Couleur de l'icône (Bleu Canard) */
    /* Si vous voulez que les icônes s'alignent parfaitement même si elles ont des largeurs différentes: */
    /* width: 30px; */
    /* text-align: center; */
}

/* Style pour le texte dans les feature-item */
.feature-item .feature-text {
    flex-grow: 1; /* Permet au texte de prendre l'espace restant */
    line-height: 1.4;
}

/* Optionnel: Mettre le montant en gras ou en couleur */
.feature-text strong {
    color: #FF4500; /* Par exemple, en Orange Écarlate */
}

/* Exemple d'utilisation du strong dans le HTML: */
/* <span class="feature-text">Livraison Gratuite dès <strong>5000€</strong> d'achat</span> */
/* <span class="feature-text">Entrega Gratuita a partir de <strong>5000€</strong></span> */
/* Styles Généraux Section Avis Clients */
.aef-customer-reviews-section {
    background-color: #f8f8f8; /* Fond léger (neutre) pour la section */
    padding: 60px 20px;
    font-family: Arial, sans-serif; /* Assurez-vous que cette police ou une police de votre thème est utilisée */
    box-sizing: border-box;
}

.aef-reviews-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.aef-reviews-main-column {
    flex: 1.3;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.aef-reviews-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
    max-width: 700px;
}

/* Styles de base pour une carte d'avis (utilisée comme source et clonée) */
/* La source cachée n'a généralement pas besoin de styles de fond/ombre,
   ces styles sont appliqués aux slots ou aux cartes clonées. */
.aef-review-card {
    padding: 25px;
    /* border-radius, box-shadow, etc. sont sur le slot parent */
    display: flex;
    flex-direction: column;
    min-height: 270px;
    box-sizing: border-box;
     /* Les couleurs de fond/texte sont appliquées par JS via les classes light/dark */
    background-color: transparent; /* La carte source n'a pas de fond visible */
    color: inherit; /* Hérite de la couleur du parent (la div cachée) */
}

/* Couleurs des cartes CLONEES (appliquées par JS aux cartes DANS les slots) */
/* Ces styles ciblent la carte *à l'intérieur* du slot */
.aef-reviews-carousel-slot > .aef-review-card-light {
    background-color: #FFFFFF; /* Blanc */
    color: #333333; /* Texte sombre classique */
}
.aef-reviews-carousel-slot > .aef-review-card-light .aef-review-author-name { color: #222; }
.aef-reviews-carousel-slot > .aef-review-card-light .aef-review-date { color: #777; }
.aef-reviews-carousel-slot > .aef-review-card-light .aef-review-text { color: #555; }
.aef-reviews-carousel-slot > .aef-review-card-light .aef-review-rating i { color: #FFC107; } /* Jaune standard pour les étoiles */


.aef-reviews-carousel-slot > .aef-review-card-dark {
    background-color: #0F4C5C; /* Couleur du header (Bleu Canard Profond) */
    color: #FFFFFF; /* Texte blanc pour contraste */
}
.aef-reviews-carousel-slot > .aef-review-card-dark .aef-review-author-name { color: #f0f0f0; }
.aef-reviews-carousel-slot > .aef-review-card-dark .aef-review-date { color: #d0d0d0; }
.aef-reviews-carousel-slot > .aef-review-card-dark .aef-review-text { color: #e0e0e0; }
/* Ajustement couleur étoiles et logo sur fond sombre */
.aef-reviews-carousel-slot > .aef-review-card-dark .aef-review-rating i { color: #FFD700; } /* Or/Jaune Vif pour bien ressortir */
.aef-reviews-carousel-slot > .aef-review-card-dark .aef-review-source-logo { filter: brightness(150%); } /* Rendre le logo plus clair */


/* Styles des éléments à l'intérieur de la carte (communs aux cartes light et dark) */
.aef-review-header { display: flex; align-items: center; margin-bottom: 15px; }
/* Les couleurs de fond d'avatar sont définies en inline dans le HTML et ne sont pas modifiées ici */
.aef-review-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2em; margin-right: 12px; flex-shrink: 0; }
.aef-review-author-info { flex-grow: 1; }
.aef-review-author-name { font-weight: bold; display: block; font-size: 0.95em; }
.aef-review-date { font-size: 0.8em; }
.aef-review-source-logo { width: 20px; height: auto; margin-left: auto; flex-shrink: 0; }
/* La couleur des étoiles est définie dans les règles .aef-review-card-light/dark */
.aef-review-rating { margin-bottom: 15px; }
.aef-review-rating .fas.fa-star { margin-right: 2px; }
/* La couleur du texte de l'avis est définie dans les règles .aef-review-card-light/dark */
.aef-review-text { font-size: 0.9em; line-height: 1.6; flex-grow: 1; margin-bottom: 10px; }


/* Les slots du carrousel - CONTENEURS pour les cartes et les boutons */
.aef-reviews-carousel-slot {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    border-radius: 15px; /* Coins arrondis appliqués ici */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Ombre appliquée ici */
}

/* La carte clonée INSIDE the slot doit couvrir tout l'espace */
.aef-reviews-carousel-slot > .aef-review-card {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* Couvre entièrement le parent */
    width: 100%; /* S'assure que la largeur est 100% */
    height: 100%; /* S'assure que la hauteur est 100% */
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
     /* S'assurer que le contenu de la carte clonée ne déborde pas si le texte est long */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


/* Boutons de navigation DANS les slots du carrousel */
.aef-reviews-carousel-slot .aef-carousel-manual-prev,
.aef-reviews-carousel-slot .aef-carousel-manual-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4); /* Fond semi-transparent sombre */
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Cacher par défaut */
    visibility: hidden; /* Rendre non-interactif quand caché */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-size: 1.2em;
}

.aef-reviews-carousel-slot .aef-carousel-manual-prev { left: 15px; }
.aef-reviews-carousel-slot .aef-carousel-manual-next { right: 15px; }

/* Afficher les boutons au survol du SLOT parent */
.aef-reviews-carousel-slot:hover .aef-carousel-manual-prev,
.aef-reviews-carousel-slot:hover .aef-carousel-manual-next {
    opacity: 1;
    visibility: visible;
}


/* Colonne de Droite - Texte et Barres */
.aef-reviews-text-column {
    flex: 1; /* La colonne de texte prend l'espace restant */
    color: #333333;
}

/* Styles des éléments Elementor (basés sur les classes fournies) */
.aef-reviews-text-column .elementor-icon-list-icon i { color: #0F4C5C; } /* Couleur du header */
.aef-reviews-text-column .elementor-icon-list-text { color: #444; font-weight: 500; } /* Texte sombre */
.aef-reviews-text-column .elementor-heading-title { color: #0F4C5C; } /* Couleur du header pour les titres */
.aef-reviews-text-column h2.elementor-heading-title { font-size: 2.2em; font-weight: bold; margin-bottom: 15px; }
.aef-reviews-text-column p.elementor-heading-title { font-size: 0.95em; line-height: 1.7; color: #444; margin-bottom: 20px; }

/* Wrapper blanc individuel pour chaque groupe de barres de progression */
.aef-progress-item-wrapper {
    background-color: #FFFFFF;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
.ekit-wid-con { margin-bottom: 0; }
.skillbar-group { margin-bottom: 0; }

.skill-title { font-size: 0.9em; color: #444444; font-weight: 500; }

/* Barre de progression - Epaississeur et Track */
.skill-bar {
    background-color: #E0E0E0; /* Fond de la barre grise (vide) */
    border-radius: 5px;
    height: 25px;
    overflow: hidden;
    position: relative;
}
.skill-track {
    height: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* La couleur est appliquée inline par JS, ex: background-color: #0F4C5C; */
    background-color: #0F4C5C; /* Défini ici aussi au cas où JS ne le fait pas ou pour un état par défaut */
    transition: width 2s ease-in-out; /* Animation de la largeur */
}
.number-percentage-wraper {
    padding-right: 10px;
    display: flex;
    align-items: center;
    height: 100%;
}
.number-percentage {
    color: #FFFFFF; /* Texte blanc sur la barre foncée */
    font-size: 0.9em;
    font-weight: bold;
    /* Ajouter une ombre légère pour améliorer la lisibilité sur la couleur de la barre */
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

/* Styles d'un bouton qui serait dans la colonne texte (pas présent dans votre HTML final) */
.aef-reviews-text-column .elementor-button {
    background-color: #FF4500; /* Votre couleur CTA Orange Écarlate */
    color: #FFFFFF;
    border-radius: 5px;
    padding: 10px 20px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.aef-reviews-text-column .elementor-button:hover {
    background-color: #CC3700; /* Orange Écarlate plus foncé au survol */
}


/* Responsive */
@media (max-width: 991px) {
    .aef-reviews-container {
        flex-direction: column-reverse; /* Inverser l'ordre des colonnes sur tablette/mobile */
        gap: 30px;
    }
    .aef-reviews-main-column { flex: none; width: 100%; }
    .aef-reviews-grid-2x2 {
        max-width: none;
        grid-template-columns: 1fr; /* Une seule colonne sur tablette/mobile */
        grid-template-rows: auto auto;
        gap: 20px;
    }

    /* Afficher seulement les 2 premiers slots de la grille et cacher les autres (conforme au CSS original) */
     .aef-reviews-grid-2x2 .aef-reviews-carousel-slot:nth-child(1),
     .aef-reviews-grid-2x2 .aef-reviews-carousel-slot:nth-child(2) {
         display: block;
         grid-column: 1 / -1;
     }
     .aef-reviews-grid-2x2 .aef-reviews-carousel-slot:nth-child(n+3) {
         display: none; /* Cacher les slots 3 et 4 sur mobile */
     }

     /* Sur mobile, les boutons de carrousel sont toujours visibles */
     .aef-reviews-carousel-slot .aef-carousel-manual-prev,
     .aef-reviews-carousel-slot .aef-carousel-manual-next {
          opacity: 1 !important;
          visibility: visible !important;
     }

    /* Ajuster le padding des slots sur mobile */
    .aef-reviews-carousel-slot { padding: 20px; }
    .aef-reviews-carousel-slot > .aef-review-card { padding: 20px; }


     .aef-reviews-text-column { margin-top: 0; }
     /* Centrer les éléments de la colonne texte sur mobile */
     .aef-reviews-text-column .elementor-icon-list--layout-inline,
    .aef-reviews-text-column .elementor-widget-heading,
    .aef-reviews-text-column .elementor-widget-button .elementor-button-wrapper {
        text-align: center;
    }
    .aef-reviews-text-column .elementor-icon-list-items.elementor-inline-items {
        justify-content: center;
    }
    /* Ajuster la marge des wrappers blancs individuels sur mobile */
    .aef-progress-item-wrapper {
        padding: 15px;
        margin-bottom: 15px;
    }
    .aef-progress-item-wrapper:last-of-type {
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
     /* Ajustements supplémentaires pour très petits écrans */
    .aef-customer-reviews-section {
        padding: 30px 10px;
    }
    .aef-reviews-grid-2x2 {
        gap: 15px;
    }
     .aef-reviews-container { gap: 20px; }

    .aef-reviews-carousel-slot,
    .aef-reviews-carousel-slot > .aef-review-card { padding: 15px; }


     .aef-reviews-text-column h2.elementor-heading-title { font-size: 1.8em; margin-bottom: 10px; }
     .aef-reviews-text-column p.elementor-heading-title { font-size: 0.9em; margin-bottom: 15px;}
     .aef-reviews-carousel-slot .aef-carousel-manual-prev,
     .aef-reviews-carousel-slot .aef-carousel-manual-next {
         width: 30px;
         height: 30px;
         font-size: 1em;
         left: 10px;
         right: 10px;
     }
      .aef-progress-item-wrapper { padding: 10px; margin-bottom: 10px; }
      .aef-progress-item-wrapper:last-of-type { margin-bottom: 10px; }
      .skill-bar { height: 20px; }
      .number-percentage-wraper { padding-right: 5px; }
      .number-percentage { font-size: 0.7em; }
}


/* --- Styles pour la section Conteneurs Maritimes --- */
.container-sales-section {
    padding: 60px 0; /* Espacement vertical de la section */
    background-color: #FCFCFC; /* Fond blanc (peut être ajusté) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Police moderne */
}

.container-sales-wrapper {
    max-width: 1200px; /* Largeur maximale du contenu (ajuster si besoin) */
    margin: 0 auto; /* Centrer le conteneur */
    padding: 0 20px; /* Padding sur les côtés */
    display: flex; /* Active Flexbox pour la mise en page en colonnes */
    align-items: center; /* Aligne les deux colonnes verticalement au centre */
    gap: 40px; /* Espace entre les colonnes */
}

/* Colonne Gauche (Texte, Tailles, CTA) */
.content-column {
    flex: 1; /* Permet à la colonne de prendre l'espace disponible */
    min-width: 0; /* Important pour la flexibilité sur les contenus longs */
}

/* Colonne Droite (Image/Médias - Contient le carrousel) */
.media-column {
    flex: 1; /* Permet à la colonne de prendre l'espace disponible */
    min-width: 0; /* Important pour la flexibilité */
    display: flex; /* Assure que le contenu s'aligne bien */
    justify-content: center; /* Centre le contenu horizontalement dans sa colonne */
    align-items: center; /* Centre le contenu verticalement */
}

/* Styles pour le titre principal (réutilisation de classe) */
.section-main-title {
    color: #0F4C5C; /* Couleur de votre header/marque */
    font-size: 2.2em;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: bold;
    line-height: 1.2;
}

/* Styles pour les paragraphes (réutilisation de classe) */
.section-paragraph {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #444;
}
.section-paragraph:last-of-type {
    margin-bottom: 25px; /* Plus d'espace après le dernier paragraphe introductif */
}


/* Styles pour le titre de la liste des tailles */
.sizes-title {
    color: #333; /* Couleur plus foncée */
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Styles pour la liste des tailles */
.size-list {
    list-style: none; /* Retire les puces par défaut */
    padding: 0;
    margin: 0 0 25px 0; /* Espacement après la liste */
    display: flex; /* Active Flexbox pour aligner les éléments horizontalement */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    gap: 15px; /* Espacement entre les éléments de la liste */
}

.size-list li {
     margin: 0; /* Retire les marges par défaut */
     display: flex; /* Alignement icône + texte */
     align-items: center; /* Centrage vertical */
}

.size-list li a {
     text-decoration: none; /* Retire le soulignement */
     color: #555; /* Couleur du lien */
     transition: color 0.2s ease;
     display: flex; /* Alignement icône + texte */
     align-items: center; /* Centrage vertical */
}

.size-list li a:hover {
    color: #0F4C5C; /* Changement de couleur au survol */
}

.size-list li .size-icon {
    margin-right: 5px; /* Espace entre l'icône et le texte */
    font-size: 0.8em; /* Taille de l'icône (plus petite que le texte) */
    /* La couleur de l'icône est héritée du lien parent (a) */
}

.size-list li .size-text {
    /* Pas de style spécifique nécessaire, hérite du parent a */
}


/* Styles pour le bouton "VOIR TOUT" */
.view-all-button-container {
    margin-bottom: 30px; /* Espace sous le bouton */
}

/* Réutilisation des styles du bouton */
.sales-cta-button.button-primary {
    display: inline-block; /* S'assure que c'est un bouton inline-block */
    background-color: #FF4500; /* Couleur de votre bouton d'accent */
    color: #FFFFFF; /* Texte blanc */
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.sales-cta-button.button-primary:hover {
    background-color: #CC3700; /* Couleur plus foncée au survol */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}


/* Styles pour la section de contact rapide */
.quick-contact-section {
    border-top: 1px solid #eee; /* Ligne de séparation */
    padding-top: 20px;
    margin-top: 20px;
}

.call-us-text {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
}

.call-us-number {
    font-size: 1.4em;
    font-weight: bold;
    margin: 0;
}

.call-us-number a {
    color: #0F4C5C; /* Couleur du numéro de téléphone (comme votre header) */
    text-decoration: none;
    transition: color 0.2s ease;
}
.call-us-number a:hover {
    color: #FF4500; /* Couleur d'accent au survol */
}

/* --- Styles pour la structure de carrousel de base --- */
/* Ces styles sont pour que les images s'affichent correctement avant le JS du carrousel */

.image-carousel-container {
    width: 100%; /* Le conteneur prend toute la largeur de la colonne */
    overflow: hidden; /* Cache les parties des images qui dépassent */
    position: relative; /* Nécessaire si vous avez des flèches ou pagination positionnées absolument */
    border-radius: 5px; /* Coins arrondis pour le conteneur d'images */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

.image-carousel-slides {
    display: flex; /* Active Flexbox */
    /* flex-wrap: nowrap; est le comportement par défaut, empêche le retour à la ligne */
    /* Ces styles sont pour que les images soient côte à côte avant le JS */
    /* Le JS du carrousel prendra généralement le contrôle du display, transform, transition, etc. */
}

.image-carousel-slide {
    flex: 0 0 100%; /* Chaque slide prend 100% de la largeur du conteneur image-carousel-slides (avant JS) */
    width: 100%; /* Assure que chaque slide a bien 100% de largeur (avant JS) */
    /* Positionner les slides en absolu si le JS du carrousel le fait (style Swiper, etc.) */
    /* position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease; */
}

.image-carousel-slide img {
    display: block; /* Retire l'espace sous l'image */
    width: 100%; /* L'image prend 100% de la largeur du slide */
    height: auto; /* Maintient le ratio hauteur/largeur */
    /* L'aspect ratio peut être géré ici ou par le JS du carrousel */
    /* Si vous voulez un aspect ratio fixe, utilisez un padding-bottom sur .image-carousel-slide ou un conteneur interne */
    /* Exemple pour un ratio 3:2 comme l'image d'origine: */
    /* .image-carousel-slide { position: relative; width: 100%; padding-bottom: 66.66%; height: 0; } */
    /* .image-carousel-slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } */
    /* Pour l'instant, height: auto est suffisant pour la structure de base. */
}

/* --- Styles pour les flèches de navigation ou la pagination (si utilisé et si votre librairie le gère ainsi) --- */
/* Ces styles dépendent fortement de la librairie de carrousel que vous utiliserez */
/* .carousel-pagination { ... } */
/* .carousel-navigation { position: absolute; top: 50%; transform: translateY(-50%); ... } */


/* --- Responsivité --- */
@media (max-width: 768px) {
    .container-sales-wrapper {
        flex-direction: column; /* Empile les colonnes verticalement sur mobile */
        gap: 30px; /* Ajuster l'espace entre les colonnes empilées */
        padding: 0 15px; /* Ajuster le padding sur mobile */
    }

    .content-column,
    .media-column {
        flex: none; /* Retire la flexibilité pour qu'elles prennent toute la largeur */
        width: 100%; /* Chaque colonne prend toute la largeur disponible */
    }

    .section-main-title {
        font-size: 1.8em; /* Réduire la taille du titre principal sur mobile */
        margin-bottom: 15px;
    }
    .section-paragraph {
        font-size: 1em; /* Ajuster la taille du texte sur mobile */
    }
    .section-paragraph:last-of-type {
        margin-bottom: 20px;
    }

    .sizes-title {
        font-size: 1.1em;
        margin-bottom: 10px;
    }
     .size-list {
         gap: 10px; /* Réduire l'espace entre les éléments de liste sur mobile */
         justify-content: flex-start; /* Aligner à gauche sur mobile */
     }
     .size-list li a {
        font-size: 0.95em; /* Ajuster la taille du texte des tailles */
    }

    .view-all-button-container {
        margin-bottom: 20px;
    }
     .sales-cta-button.button-primary {
         padding: 10px 20px; /* Ajuster le padding du bouton */
         font-size: 0.9em;
     }

    .quick-contact-section {
         padding-top: 15px;
         margin-top: 15px;
    }
    .call-us-text {
        font-size: 1em;
    }
     .call-us-number {
         font-size: 1.2em;
     }

    .image-carousel-container {
        /* Les styles de base devraient être bons, l'image prendra 100% de la largeur de la colonne */
    }

}




/* --- Styles pour la section "Pourquoi Nous Choisir" / "Porque Escolher-nos" --- */
.choose-us-section {
    padding: 60px 0; /* Plus d'espace au-dessus et en dessous */
    background-color: #ffffff; /* Fond léger pour la section (peut être ajusté) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Police système moderne */
}

.choose-us-container {
    max-width: 1200px; /* Largeur maximale du contenu */
    margin: 0 auto; /* Centrer le conteneur */
}

/* Styles pour le titre de section (réutilisable) */
.section-header-container {
    text-align: center; /* Centre le texte */
    margin-bottom: 40px; /* Plus d'espace sous le titre */
    padding: 0 15px; /* Petit padding sur les côtés */
}

.section-main-title {
    color: #0F4C5C; /* Couleur de votre header/marque */
    font-size: 2.2em; /* Taille de police */
    margin-top: 0;
    margin-bottom: 10px; /* Espace sous le titre */
    font-weight: bold;
}

.section-intro-text {
    color: #555; /* Couleur de texte un peu plus claire */
    font-size: 1.1em;
    line-height: 1.5;
    max-width: 800px; /* Limite la largeur du texte */
    margin: 0 auto; /* Centre le texte */
}


/* Texte "Sélectionnez une option..." au-dessus des onglets */
.choose-us-intro {
    text-align: center;
    margin-bottom: 20px; /* Espace sous ce texte */
    font-size: 1em; /* Taille légèrement réduite */
    color: #333; /* Couleur un peu plus foncée */
    font-weight: bold;
}


/* --- Styles pour les Onglets (Navigation) --- */

.choose-us-tabs .tabs-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0; /* Espace sous la navigation des onglets */
    display: flex; /* Active Flexbox pour aligner les onglets horizontalement */
    flex-wrap: wrap; /* Permet aux onglets de passer à la ligne sur les petits écrans */
    justify-content: center; /* Centre les onglets horizontalement */
    /* Ajouter une bordure ou une ligne si souhaité, comme sur l'image */
    border-bottom: 1px solid #eee; /* Ligne fine sous les onglets */
}

.choose-us-tabs .tabs-nav li.tab-item {
    background-color: transparent; /* Fond transparent pour les onglets par défaut */
    color: #555; /* Couleur du texte/icône inactifs */
    padding: 15px 10px; /* Ajuster le padding */
    margin: 0 10px; /* Espacement entre les onglets - pas de marge verticale ici */
    border-radius: 0; /* Pas de coins arrondis pour ce style */
    cursor: pointer;
    transition: color 0.3s ease; /* Animation douce sur la couleur */
    display: flex; /* Activer Flexbox pour aligner icône et texte */
    flex-direction: column; /* IMPORANT: Empiler icône et texte verticalement */
    align-items: center; /* Centrer horizontalement le contenu (icône et texte) */
    justify-content: flex-start; /* Aligner le contenu vers le haut (pour un meilleur alignement si les titres sont courts) */
    font-size: 0.9em; /* Taille de police des titres des onglets */
    font-weight: bold;
    text-transform: uppercase;
    flex-basis: auto; /* Permet aux onglets de s'adapter à la largeur */
    text-align: center; /* Centrer le texte du titre si il y a plusieurs lignes */

    /* Ajustement de la hauteur ou flex-basis pour aider à l'alignement vertical */
    /* Option 1: Hauteur fixe (rigide, peut couper le texte si il y a trop de lignes) */
    /* height: 80px; /* Hauteur fixe, ajuster selon la taille des icônes et le besoin de titre sur 2 lignes */

    /* Option 2: Padding ajusté (plus flexible) - Le flex-direction: column et align-items:center aident beaucoup */
    /* Ajouter un padding-bottom pour s'assurer qu'ils ont une hauteur minimale cohérente si les titres sont courts */
    padding-bottom: 20px;
}


/* Style au survol des onglets inactifs */
.choose-us-tabs .tabs-nav li.tab-item:not(.active):hover {
    color: #0F4C5C; /* Couleur du header au survol */
}

/* Style de l'onglet actif */
.choose-us-tabs .tabs-nav li.tab-item.active {
    color: #0F4C5C; /* Couleur du header pour l'onglet actif */
    border-bottom: 2px solid #FF4500; /* Ligne épaisse orange sous l'onglet actif */
    margin-bottom: -1px; /* Ajuster la marge pour que la bordure active soit juste sur la ligne fine */
    /* Pas de background-color ou box-shadow sur l'onglet lui-même comme sur l'image */
}

/* Styles pour les icônes dans les onglets */
.choose-us-tabs .tabs-nav li.tab-item .tab-icon {
    margin-right: 0; /* Retirer la marge droite */
    margin-bottom: 8px; /* Marge en bas pour séparer icône et texte */
    font-size: 2em; /* Taille plus grande pour les icônes comme sur l'image */
    /* La couleur de l'icône est gérée par la couleur du texte parent (li.tab-item) */
}

/* Style du texte du titre dans les onglets */
.choose-us-tabs .tabs-nav li.tab-item .tab-title {
    line-height: 1.2; /* Espacement entre les lignes si le texte s'enroule */
     /* Les styles d'alignement sont dans .tab-item (flex-direction: column, align-items: center) */
}


/* --- Styles pour le Contenu des Onglets --- */

.choose-us-tabs .tabs-content {
    background-color: #f8f8f8; /* Fond blanc pour la zone de contenu */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Par défaut, tous les panneaux de contenu sont cachés */
.choose-us-tabs .tabs-content .tab-panel {
    display: none;
    line-height: 1.6;
    color: #444;
}

/* Le panneau actif est affiché */
.choose-us-tabs .tabs-content .tab-panel.active {
    display: block;
}

.choose-us-tabs .tabs-content .tab-panel p {
    margin-bottom: 15px; /* Espacement entre les paragraphes dans le contenu */
}
.choose-us-tabs .tabs-content .tab-panel p:last-child {
     margin-bottom: 0;
}

/* Styles pour les liens dans le contenu des onglets */
.choose-us-tabs .tabs-content .tab-panel a {
     color: #0F4C5C; /* Couleur des liens (comme votre header) */
     text-decoration: underline;
}
.choose-us-tabs .tabs-content .tab-panel a:hover {
     color: #FF4500; /* Couleur d'accent au survol */
}


/* --- Responsivité --- */
@media (max-width: 768px) {
    .choose-us-container {
        padding: 0 10px; /* Réduire le padding sur mobile */
    }
    /* Les onglets s'empilent verticalement sur mobile (Flexbox par défaut le permettrait) */
    .choose-us-tabs .tabs-nav ul {
         flex-direction: column; /* Forcer l'empilement vertical */
         align-items: stretch; /* Les onglets prennent toute la largeur */
         border-bottom: none; /* Retirer la bordure du bas sur mobile */
    }

    .choose-us-tabs .tabs-nav li.tab-item {
        margin: 3px 0; /* Espace entre les onglets empilés */
        border-bottom: 1px solid #eee; /* Ajouter une bordure entre les onglets empilés */
        padding: 12px 15px; /* Ajuster le padding */
        flex-direction: row; /* Repasser en mode horizontal sur mobile */
        justify-content: flex-start; /* Aligner à gauche */
        align-items: center; /* Centrer verticalement icône et texte */
    }

     .choose-us-tabs .tabs-nav li.tab-item .tab-icon {
         margin-right: 10px; /* Remettre un espace à droite de l'icône */
         margin-bottom: 0; /* Retirer la marge du bas */
         font-size: 1.5em; /* Taille de l'icône plus petite sur mobile */
     }

     .choose-us-tabs .tabs-nav li.tab-item.active {
         border-bottom: 1px solid #eee; /* Retirer la bordure orange en bas sur mobile */
         /* Ajouter un style différent pour l'onglet actif sur mobile si souhaité, ex: */
         /* background-color: #0F4C5C; color: #FFFFFF; */
     }
     /* Si vous voulez une bordure sur le côté pour l'onglet actif sur mobile: */
     .choose-us-tabs .tabs-nav li.tab-item.active {
         border-left: 4px solid #FF4500; /* Bordure orange à gauche */
         padding-left: 11px; /* Ajuster le padding pour compenser la bordure */
         margin-left: 0; /* S'assurer que la marge est nulle à gauche */
     }
     .choose-us-tabs .tabs-nav li.tab-item:not(.active):hover {
         padding-left: 15px; /* S'assurer que le padding est le même qu'inactif */
     }


     .choose-us-tabs .tabs-content {
        padding: 15px; /* Réduit le padding du contenu sur mobile */
     }
     .choose-us-tabs .tabs-content .tab-panel p {
         font-size: 0.95em; /* Légèrement plus petit sur mobile */
     }
}


.our-wood-species-section {
    position: relative;
    background-color: #ffffff; /* Fond beige clair similaire à l'exemple de référence */
    padding-top: 50px; /* Espace pour le titre au-dessus des grilles */
    padding-bottom: 30px; /* Espace après le footer CTA et avant le shape divider effectif */
    overflow: hidden; /* Important pour que le shape divider ne cause pas de scrollbars */

}

.wood-species-shape-divider-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    bottom: 0; /* Le shape divider est en bas de la section */
    z-index: 1; /* Sous le contenu, mais au-dessus du fond de la section suivante si elle est différente */
    /* Si votre SVG est orienté pour être en haut, vous pourriez avoir besoin de le retourner : */
    /* transform: rotate(180deg); */
}

.wood-species-shape-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px); /* Ajustement typique d'Elementor pour couvrir les bords */
    height: 40px; /* Hauteur de votre shape divider, ajustez au besoin */
}

.wood-species-shape-fill {
    fill: #FFFFFF; /* Couleur de FOND de la section qui SUIT celle-ci. Si c'est blanc, mettez #FFFFFF. */
                   /* Si c'est une autre couleur, mettez cette couleur. */
}

.wood-species-header-container {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
    padding: 0 15px;
    position: relative;
    z-index: 2; /* Au-dessus du fond et du shape divider */
}

.wood-species-pre-title {
    font-size: 0.9em;
    font-weight: 500;
    color: #00000; /* Gris pour le pré-titre */
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wood-species-pre-title .fas { /* Si vous utilisez Font Awesome pour l'icône */
    color: #c0392b; /* Couleur rouge/brun pour l'icône d'arbre */
}

.wood-species-main-title {
    font-size: 2.5em;
    font-weight: bold;
    color: #000000; /* Couleur foncée pour le titre principal */
    margin-bottom: 15px;
}

.wood-species-intro-text {
    font-size: 1em;
    color: #000000; /* Gris plus foncé pour le texte d'introduction */
    line-height: 1.6;
}

/* Conteneur pour la première rangée (1 verticale + 2 horizontales empilées) */
.custom-layout-grid {
    display: flex;
    gap: 15px;
    max-width: 1200px; /* Largeur maximale du contenu principal */
    margin: 0 auto 15px auto; /* Espace avant la rangée du bas */
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

.custom-layout-left-column {
    flex: 1.5; /* La colonne de gauche est un peu plus large (ratio ~60%) */
    display: flex; /* Pour que la carte verticale remplisse la hauteur */
}

.custom-layout-right-column {
    flex: 1; /* La colonne de droite prend le reste (ratio ~40%) */
    display: flex;
    flex-direction: column; /* Empiler les deux cartes */
    gap: 15px; /* Espace entre les deux cartes empilées */
}

/* Carte verticale (première essence) */
.wood-species-card-vertical {
    width: 100%;
}
.wood-species-card-vertical .wood-species-cta {
    min-height: 500px; /* Hauteur significative pour la carte verticale */
}
.wood-species-card-vertical .wood-species-cta-title {
    font-size: 2em;
}

/* Cartes horizontales petites (dans la colonne de droite) */
.wood-species-card-horizontal-small {
    width: 100%;
    flex: 1; /* Pour qu'elles se partagent la hauteur dans la colonne flex */
}
.wood-species-card-horizontal-small .wood-species-cta {
    min-height: 242.5px; /* (500px - 15px gap) / 2 */
}
.wood-species-card-horizontal-small .wood-species-cta-title {
    font-size: 1.5em;
}


/* Conteneur pour la rangée inférieure (3 cartes horizontales) */
.custom-layout-bottom-row {
    display: flex;
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto 40px auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

/* Cartes horizontales du tiers (rangée du bas) */
.wood-species-card-horizontal-third {
    flex: 1; /* Chaque carte prend un tiers de l'espace */
}
.wood-species-card-horizontal-third .wood-species-cta {
    min-height: 220px; /* Hauteur pour ces cartes */
}
.wood-species-card-horizontal-third .wood-species-cta-title {
    font-size: 1.4em;
}


/* Styles communs des cartes .wood-species-cta */
.wood-species-cta {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff; /* TITRES EN BLANC */
    border-radius: 5px;
    transition: transform 0.3s ease;
    height: 100%; /* Important pour les conteneurs flex qui contrôlent la hauteur */
}

.wood-species-cta:hover {
    transform: translateY(-5px); /* Léger soulèvement au survol */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.wood-species-cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Effet de zoom Elementor */
}

.wood-species-cta:hover .wood-species-cta-bg {
    transform: scale(1.08); /* Zoom sur l'image de fond au survol */
}

.wood-species-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.0) 100%); /* Overlay plus prononcé en bas pour lisibilité */
    opacity: 0.9; /* Ajustez pour la lisibilité souhaitée */
    transition: opacity 0.3s ease;
}
.wood-species-cta:hover .wood-species-cta-overlay {
    opacity: 1; /* Overlay légèrement plus sombre au survol */
}

.wood-species-cta-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 20px; /* Espace intérieur pour le contenu */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrage vertical du titre et du bouton */
    align-items: center; /* Centrage horizontal du titre et du bouton */
    text-align: center; /* Assurer le centrage du texte si le titre est long */
}

.wood-species-cta-title {
    /* La couleur est héritée de .wood-species-cta (#ffffff) */
    font-weight: bold;
    margin: 0 0 15px 0; /* Espace sous le titre, avant le bouton */
    text-transform: uppercase; /* Majuscules comme sur l'exemple */
    letter-spacing: 1px; /* Léger espacement des lettres */
	color: #ffffff;
}

.wood-species-cta-button {
    display: inline-block;
    background-color: transparent; /* Pas de fond par défaut */
    padding: 8px 25px; /* Taille du bouton */
    border-radius: 3px; /* Coins du bouton */
    font-size: 0.95em;
    font-weight: 500;
    border: 2px solid #ffffff; /* Bordure blanche */
    color: #ffffff; /* Texte du bouton en blanc */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.wood-species-cta:hover .wood-species-cta-button {
    background-color: #ffffff; /* Fond blanc au survol */
    color: #333333; /* Texte foncé au survol */
}


/* Footer CTA (identique à la version précédente, pour la cohérence) */
.wood-species-footer-cta {
    text-align: center;
    padding: 30px 15px 0 15px; /* Espace au-dessus du footer CTA */
    position: relative;
    z-index: 2;
}

.wood-species-footer-title {
    font-size: 1.8em; /* Un peu plus grand que l'intro text */
    color: #333;
    margin-bottom: 20px;
    font-weight: bold;
}

.wood-species-footer-button {
    display: inline-block;
    background-color: #2E2E2E; /* Bouton noir/gris foncé */
    color: #ffffff;
    padding: 12px 35px;
    text-decoration: none;
    border-radius: 3px;
    font-weight: 500;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
.wood-species-footer-button:hover {
    background-color: #1a1a1a; /* Un peu plus foncé au survol */
    opacity: 0.9;
	color:#ffffff;
}

/* Responsive */
@media (max-width: 991px) { /* Tablettes */
    .custom-layout-grid {
        flex-direction: column; /* Empiler la colonne gauche et droite */
    }
    .custom-layout-left-column,
    .custom-layout-right-column {
        flex: none; /* Réinitialiser flex */
        width: 100%;
    }
    .wood-species-card-vertical .wood-species-cta {
        min-height: 350px; /* Ajuster la hauteur pour tablette */
    }
     .wood-species-card-horizontal-small .wood-species-cta {
        min-height: 200px; /* Hauteur unifiée pour les deux cartes empilées */
    }

    .custom-layout-bottom-row {
        /* Reste en flex-direction: row; mais les cartes peuvent s'enrouler si pas assez de place
           ou on peut les empiler aussi si désiré */
        flex-wrap: wrap; /* Permettre aux cartes de passer à la ligne suivante */
    }
    .wood-species-card-horizontal-third {
       flex-basis: calc(50% - 7.5px); /* 2 cartes par ligne sur tablette */
       min-height: 250px;
    }
    .wood-species-card-horizontal-third:last-child { /* Si nombre impair, la dernière prend toute la largeur */
        flex-basis: 100%;
    }
}

@media (max-width: 767px) { /* Mobiles */
    .our-wood-species-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }
     .wood-species-header-container { margin-bottom: 30px;}
     .custom-layout-grid, .custom-layout-bottom-row {
        padding: 0 10px;
        gap: 10px; /* Réduire l'espace entre les cartes */
        flex-direction: column; /* Empiler tout en mobile */
     }
      .custom-layout-right-column { gap: 10px; }

    .wood-species-card-vertical .wood-species-cta {
        min-height: 300px;
    }
    .wood-species-card-vertical .wood-species-cta-title { font-size: 1.8em; }

    .wood-species-card-horizontal-small .wood-species-cta {
        min-height: 180px;
    }
    .wood-species-card-horizontal-small .wood-species-cta-title { font-size: 1.3em; }

    .wood-species-card-horizontal-third {
       flex-basis: 100%; /* Une carte par ligne en mobile */
       min-height: 220px;
    }
    .wood-species-card-horizontal-third .wood-species-cta-title { font-size: 1.2em;}

     .wood-species-cta-title { margin-bottom: 12px; }
     .wood-species-cta-button { padding: 7px 20px; font-size: 0.9em; }

     .wood-species-footer-title { font-size: 1.5em; }
     .wood-species-footer-button { font-size: 0.95em; }

     .wood-species-shape-divider-bottom svg {
        height: 30px; /* Réduire la hauteur du shape divider en mobile */
    }
}


/* contact-form */
.aef-contact-section {
    background-color: #ffffff; /* Beige très clair comme fond global */
    padding: 70px 20px;
    position: relative; /* Utile si vous ajoutez des shape dividers plus tard */
    box-sizing: border-box;
	    margin-right: -15px;
    margin-left: -15px;
}

.aef-contact-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    gap: 35px;
    align-items: stretch; /* Force les enfants (colonnes) à avoir la même hauteur */
    flex-wrap: wrap; /* Permettre le retour à la ligne sur mobile/tablette */
}

/* --- Styles Colonnes Principales --- */
.aef-contact-info-column,
.aef-contact-form-column {
    box-sizing: border-box; /* S'assurer que padding/border est inclus dans la taille */
}

.aef-contact-info-column {
    flex: 0 0 40%; /* Prend 40% de la largeur sur écran large */
    max-width: 40%; /* Précaution pour certains navigateurs */
    display: flex; /* Pour que l'info-box puisse avoir height: 100% */
}

.aef-contact-form-column {
    flex: 1; /* Prend l'espace restant */
    min-width: 0; /* Nécessaire pour flexbox dans certains cas */
}

/* --- Colonne Gauche: Infos Contact --- */
.aef-contact-info-box {
    background-color: #0F4C5C; /* Marron moyen */
    padding: 35px 30px;
    border-radius: 16px;
    color: #ffffff;
    width: 100%; /* Prend toute la largeur de sa colonne */
    height: 100%; /* **Important pour l'alignement en hauteur** */
    display: flex; /* Organiser le contenu de la boîte info */
    flex-direction: column;
}

.aef-contact-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 28px;
}
.aef-contact-info-item:last-of-type {
     margin-bottom: auto; /* Pousse la newsletter (si présente) vers le bas */
}

.aef-contact-icon-wrapper {
     width: 25px;
     margin-right: 18px;
     text-align: center;
}
.aef-contact-icon-wrapper i {
    font-size: 1.3em;
    color: #ffffff;
    line-height: 1.4;
    display: inline-block; /* Assure un bon rendu de line-height */
}

.aef-contact-text {
    flex: 1; /* Prend l'espace restant dans l'item */
}

.aef-contact-text h5 {
    margin: 0 0 6px 0;
    font-size: 1.15em;
    font-weight: 700;
    color: #ffffff;
}

.aef-contact-text p,
.aef-contact-text a {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.55;
    color: #f0f0f0;
    text-decoration: none;
}
.aef-contact-text a:hover {
    text-decoration: underline;
}

/* Newsletter (Optionnel) */
.aef-newsletter-signup { margin-top: 35px; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.aef-newsletter-signup h6 { font-size: 1.1em; font-weight: 700; margin: 0 0 15px 0; color: #ffffff; }
.aef-newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.aef-newsletter-form input[type="email"] { padding: 12px 15px; border-radius: 10px; border: none; background-color: rgba(255,255,255, 0.9); color: #333; font-size: 0.9em; }
.aef-newsletter-form input[type="email"]::placeholder { color: #888; opacity: 1; }
.aef-button-dark { background-color: #343a40; color: #ffffff; border: none; padding: 12px 15px; border-radius: 10px; cursor: pointer; font-size: 0.95em; font-weight: 500; text-align: center; transition: background-color 0.3s ease; }
.aef-button-dark:hover { background-color: #23272b; }


/* --- Colonne Droite: Formulaire --- */
.aef-form-wrapper {
    height: 100%; /* S'assurer que le wrapper essaie de prendre la hauteur */
    box-sizing: border-box;
    /* Pas de padding ou de fond ici pour laisser le fond de section visible */
}

.aef-form-wrapper h2 {
    font-size: 1.8em;
    color: #333;
    margin: 0 0 10px 0; /* Enlever marge sup si déjà aligné */
    padding: 0;
}
.aef-form-wrapper .aef-form-subtitle {
    font-size: 1em;
    color: #666;
    margin: 0 0 25px 0; /* Espace avant le premier champ */
}


/* Cacher les labels texte (garder les placeholders) */
.aef-form-wrapper .wpcf7-form label:not(.wpcf7-list-item-label) {
    display: none;
}
/* Note champ obligatoire */
.aef-form-wrapper .aef-required-notice { font-size: 0.8em; color: #777; margin-top: 15px; margin-bottom: 0; text-align: left; }
.aef-form-wrapper .aef-required-notice .req { color: #E74C3C; font-weight: bold; }

/* Disposition côte à côte Nom/Email */
.aef-form-wrapper .aef-form-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 0; }
.aef-form-wrapper .aef-form-col { flex: 1; min-width: calc(50% - 8px); }
.aef-form-wrapper .aef-form-col .aef-form-input { margin-bottom: 0; }


/* Style champs input/textarea */
.aef-form-wrapper .aef-form-input,
.aef-form-wrapper .aef-textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #EAE6E1;
    background-color: #FFFFFF;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 0.9em;
    font-family: inherit;
    color: #333;
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.aef-form-wrapper .aef-textarea { min-height: 130px; resize: vertical; }

.aef-form-wrapper .aef-form-input:focus,
.aef-form-wrapper .aef-textarea:focus {
    outline: none;
    border-color: #b8a994;
    box-shadow: 0 0 0 3px rgba(169, 154, 132, 0.15);
}

/* Style Placeholders */
.aef-form-wrapper .aef-form-input::placeholder,
.aef-form-wrapper .aef-textarea::placeholder { color: #AAAAAA; opacity: 1; }
.aef-form-wrapper .aef-form-input::-moz-placeholder,
.aef-form-wrapper .aef-textarea::-moz-placeholder { color: #AAAAAA; opacity: 1; }
.aef-form-wrapper .aef-form-input::-webkit-input-placeholder,
.aef-form-wrapper .aef-textarea::-webkit-input-placeholder { color: #AAAAAA; opacity: 1; }
.aef-form-wrapper .aef-form-input:-ms-input-placeholder,
.aef-form-wrapper .aef-textarea:-ms-input-placeholder { color: #AAAAAA; opacity: 1; }

/* Bouton Submit CF7 (cible maintenant la classe aef- ajoutée dans le form) */
.aef-form-wrapper .aef-form-submit-group { text-align: left; margin-top: 5px; }
.aef-form-wrapper .aef-submit-button {
    background-color: #2E2E2E;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 500;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.aef-form-wrapper .aef-submit-button::after { content: '→'; font-weight: bold; }
.aef-form-wrapper .aef-submit-button:hover { background-color: #1a1a1a; }

/* Messages CF7 (Validation/Erreur) */
.aef-form-wrapper div.wpcf7-response-output {
    margin: 20px 0 0 0;
    padding: 12px 15px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    font-size: 0.9em;
}

/* --- Responsive --- */
@media (max-width: 991px) { /* Tablettes */
    .aef-contact-container {
        flex-direction: column; /* Empiler les colonnes */
        gap: 30px;
    }
    .aef-contact-info-column,
    .aef-contact-form-column {
        max-width: 100%; /* Chaque colonne prend toute la largeur */
        flex-basis: auto;
    }
    .aef-contact-info-column {
        margin-bottom: 0; /* Le gap s'en occupe */
        order: 1; /* Mettre les infos en premier si empilé */
    }
     .aef-contact-form-column {
        order: 2; /* Mettre le formulaire en second */
     }
     .aef-contact-info-box {
         height: auto; /* Hauteur s'adapte au contenu quand empilé */
     }
      .aef-form-wrapper h2, .aef-form-wrapper .aef-form-subtitle {
         text-align:center; /* Centrer titre/sous-titre du form sur tablette/mobile */
      }
}

@media (max-width: 767px) { /* Mobiles */
    .aef-contact-section { padding: 50px 15px; }
    .aef-contact-info-box { padding: 25px 20px; }
    .aef-form-wrapper .aef-form-row { flex-direction: column; gap: 0; }
    .aef-form-wrapper .aef-form-col { min-width: 100%; }
    .aef-form-wrapper .aef-form-col .aef-form-input { margin-bottom: 18px; }
    .aef-form-wrapper .aef-form-submit-group { text-align: center; }
    .aef-form-wrapper .aef-submit-button { width: 100%; justify-content: center; }
    .aef-required-notice { text-align: center;}
}


/* --- Styles pour la Page de Politique de Confidentialité --- */
.cookie-table-container {
    width: 100%;
    overflow-x: auto; /* Ajoute une barre de défilement horizontale si le tableau dépasse */
    margin: 20px 0; /* Espacement au-dessus et en dessous du tableau */
}


.cookie-table {
    width: 100%;
    border-collapse: collapse; /* Fusionne les bordures des cellules */
    margin-bottom: 20px;
    min-width: 600px; /* Largeur minimale du tableau pour la lisibilité avant le défilement */
    background-color: #fff; /* Fond blanc pour le tableau lui-même */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Légère ombre pour le tableau */
}

.cookie-table th,
.cookie-table td {
    border: 1px solid #ddd; /* Bordures des cellules */
    padding: 12px; /* Espacement intérieur des cellules */
    text-align: left; /* Texte aligné à gauche */
    vertical-align: top; /* Aligner le contenu en haut des cellules */
}

.cookie-table th {
    background-color: #f2f2f2; /* Fond gris clair pour l'en-tête */
    color: #333; /* Couleur du texte de l'en-tête */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Style pour les lignes paires pour une meilleure lisibilité (optionnel) */
.cookie-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
/* Style pour les liens dans le tableau */
.cookie-table td a {
     color: #0F4C5C; /* Couleur des liens */
     text-decoration: underline;
}

.cookie-table td a:hover {
     color: #FF4500; /* Couleur orange au survol */
}


/* --- Responsivité du tableau --- */

@media (max-width: 768px) {
    /* Le conteneur .cookie-table-container et la min-width gèrent le défilement horizontal */
    /* Ajustement du padding et taille de police pour les petites vues */
    .cookie-table th,
    .cookie-table td {
        padding: 8px;
        font-size: 0.85em;
    }
     .cookie-table th {
         font-size: 0.8em;
     }
}

/* Conteneur principal pour la mise en page latérale */
.privacy-page-container {
    display: flex; /* Active Flexbox pour aligner le menu et le contenu */
    flex-direction: row; /* Menu à gauche, contenu à droite (par défaut) */
    max-width: 1200px; /* Largeur maximale de la page */
    margin: 20px auto; /* Centrer la page */
    padding: 0 20px; /* Padding sur les côtés pour ne pas coller aux bords */
}

/* Barre latérale (Menu) */
.privacy-sidebar {
    flex: 0 0 250px; /* Largeur fixe de la barre latérale (250px) */
    margin-right: 30px; /* Espace entre la barre latérale et le contenu */
    padding-right: 20px; /* Padding interne à droite */
    border-right: 1px solid #eee; /* Séparateur visuel */
    position: sticky; /* Le menu reste visible lors du défilement */
    top: 20px; /* Distance du haut de la fenêtre */
    height: calc(100vh - 40px); /* Hauteur du menu, s'ajuste à la fenêtre (ajuster le 40px si votre header est plus haut) */
    overflow-y: auto; /* Ajoute une barre de défilement si le menu est trop long */
    -webkit-overflow-scrolling: touch; /* Améliore le défilement sur les appareils tactiles */
}

/* Style de la liste du menu */
.privacy-sidebar ul {
    list-style: none; /* Retire les puces */
    padding: 0;
    margin: 0;
}

/* Style des éléments de liste du menu */
.privacy-sidebar li {
    margin-bottom: 8px; /* Espacement entre les éléments du menu */
}

/* Style des liens du menu */
.privacy-sidebar a {
    text-decoration: none; /* Retire le soulignement */
    color: #555; /* Couleur par défaut des liens */
    display: block; /* Le lien prend toute la largeur de l'élément de liste */
    padding: 5px 0; /* Padding autour du texte du lien */
    transition: color 0.2s ease, padding-left 0.2s ease; /* Animation douce au survol */
    font-size: 0.95em;
}

/* Style des liens du menu au survol */
.privacy-sidebar a:hover {
    color: #0F4C5C; /* Couleur du header au survol */
    padding-left: 5px; /* Léger décalage pour indiquer l'interaction */
}

/* Style du lien de menu actif (peut être ajouté par JS ou manuellement si besoin) */
.privacy-sidebar a.active {
    color: #FF4500; /* Couleur du bouton orange pour le lien actif */
    font-weight: bold;
    border-left: 3px solid #FF4500; /* Barre de couleur à gauche */
    padding-left: 5px; /* Ajuster le padding si une bordure est ajoutée */
}


/* Zone de contenu principal */
.privacy-content {
    flex-grow: 1; /* Le contenu prend l'espace restant */
    padding: 0 20px; /* Padding interne */
}

/* Style des titres de section */
.privacy-content h1,
.privacy-content h2 {
    color: #0F4C5C; /* Couleur des titres (comme le header) */
    margin-top: 30px; /* Espacement au-dessus des titres de section */
    padding-top: 20px; /* Padding en haut pour laisser de l'espace si le menu est fixe et défile */
    /* Ajuster le padding-top si votre header (non inclus ici) est très haut */
}

.privacy-content h1 {
    font-size: 2.2em;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee; /* Séparateur sous le titre principal */
    padding-bottom: 15px;
}

.privacy-content h2 {
     font-size: 1.6em;
     margin-bottom: 15px;
     border-bottom: 1px dotted #eee; /* Séparateur léger sous les sous-titres */
     padding-bottom: 8px;
}


/* Style des paragraphes */
.privacy-content p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #444; /* Couleur du texte du paragraphe */
}

/* Style des listes (ul) dans le contenu */
.privacy-content ul {
    margin-bottom: 15px;
    padding-left: 20px; /* Indentation des puces */
    color: #444;
}

.privacy-content ul li {
    margin-bottom: 8px; /* Espacement entre les éléments de liste */
    line-height: 1.5;
}

/* Style des liens dans le contenu */
.privacy-content a {
    color: #0F4C5C; /* Couleur des liens */
    text-decoration: underline;
}

.privacy-content a:hover {
    color: #FF4500; /* Couleur orange au survol */
}

/* --- Responsivité --- */

@media (max-width: 768px) { /* Pour les écrans plus petits (tablettes et mobiles) */
    .privacy-page-container {
        flex-direction: column; /* Empile le menu et le contenu */
			margin-left: -15px;
        margin-right: -15px;
    }

    .privacy-sidebar {
        position: static; /* Le menu ne reste plus fixe, défile normalement */
        height: auto; /* Hauteur automatique */
        flex: none; /* Retire la largeur fixe */
        width: 100%; /* Le menu prend toute la largeur */
        margin-right: 0;
        padding-right: 0;
        border-right: none; /* Retire la bordure latérale */
        border-bottom: 1px solid #eee; /* Ajoute un séparateur en bas */
        padding-bottom: 15px;
        margin-bottom: 20px;
        overflow-y: visible; /* Retire la barre de défilement du menu */
    }

     /* Afficher le menu latéral horizontalement sur les petits écrans */
    .privacy-sidebar ul {
        display: flex;
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
        justify-content: center; /* Centre les éléments horizontalement */
    }

    .privacy-sidebar li {
        margin-right: 15px; /* Espacement entre les éléments de menu horizontaux */
        margin-bottom: 8px; /* Garde un peu de marge en bas si ça passe à la ligne */
    }

     .privacy-sidebar li:last-child {
        margin-right: 0; /* Pas d'espace à droite sur le dernier élément */
    }


    .privacy-sidebar a {
        padding: 5px 10px; /* Augmenter un peu le padding des liens */
        border: 1px solid #ccc; /* Ajouter une bordure pour les rendre plus comme des boutons/tags */
        border-radius: 4px;
        margin: 2px; /* Petite marge entre les "tags" */
        text-align: center;
    }

     .privacy-sidebar a:hover {
         padding-left: 10px; /* Supprime le décalage de survol */
     }
     .privacy-sidebar a.active {
         border-left: none; /* Retire la bordure de gauche de l'état actif */
         border-color: #FF4500; /* Change la couleur de la bordure */
         background-color: #FF4500; /* Fond orange pour l'actif */
         color: #FFFFFF; /* Texte blanc pour l'actif */
         padding-left: 10px; /* S'assure que le padding est le même */
     }


    .privacy-content {
        padding: 0; /* Retire le padding interne du contenu */
        width: 100%; /* Assure que le contenu prend toute la largeur */
    }

    .privacy-content h1,
    .privacy-content h2 {
        padding-top: 0; /* Retire le padding-top sur mobile car le menu n'est pas fixe */
font-size: 24px;    }
}



/* Styles pour le conteneur principal du formulaire */
/* Nous utilisons le sélecteur .wpcf7 combiné à notre classe personnalisée
   pour cibler précisément CE formulaire et lui appliquer le fond sombre. */
.wpcf7 .container-quote-form {
    max-width: 850px; /* Largeur maximale du formulaire */
    margin: 20px auto; /* Centrer le formulaire sur la page */
    padding: 30px; /* Espacement intérieur */
    background-color: #0F4C5C; /* <-- Couleur de fond du formulaire (Bleu Canard Profond) */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre pour le relief */
    color: #FFFFFF; /* <-- Couleur du texte par défaut dans le formulaire (Blanc) */
}

/* Style pour le titre du formulaire */
.wpcf7 .container-quote-form h3 {
    color: #FFFFFF; /* Couleur du titre en blanc */
    text-align: center;
    margin-bottom: 30px; /* Espacement après le titre */
    font-size: 1.8em; /* Taille de la police du titre */
    font-weight: bold;
}

/* Styles pour chaque groupe de champ */
.wpcf7 .container-quote-form .form-group {
    margin-bottom: 20px; /* Espacement entre les groupes de champs */
}

/* Styles pour les labels */
.wpcf7 .container-quote-form .form-label {
    display: block; /* Chaque label sur sa propre ligne */
    margin-bottom: 8px; /* Espacement sous le label */
    font-weight: bold; /* Texte du label en gras */
    color: #FFFFFF; /* Assurer que le label est blanc */
    font-size: 1em;
}

/* Style pour l'astérisque obligatoire */
.wpcf7 .container-quote-form .required {
    color: #FF4500; /* Mettre l'astérisque en orange pour le distinguer */
    margin-left: 3px;
    font-weight: bold;
}

/* Styles pour le texte d'aide */
.wpcf7 .container-quote-form .form-helper-text {
    display: block; /* Texte d'aide sur sa propre ligne */
    margin-top: 4px; /* Espacement au-dessus */
    color: #CCCCCC; /* Couleur du texte d'aide (gris clair) */
    font-size: 0.9em;
    font-style: italic; /* Optionnel : mettre en italique */
}

/* Styles pour les champs de saisie (texte, email, tel, number, textarea, et MAINTENANT SELECT) */
.wpcf7 .container-quote-form .form-field {
    width: 100%; /* Les champs prennent toute la largeur disponible */
    padding: 12px; /* Espacement intérieur */
    border: 1px solid #555; /* Bordure visible sur fond sombre */
    border-radius: 4px;
    box-sizing: border-box; /* Inclut padding et bordure dans la largeur */
    font-size: 1rem;
    line-height: 1.5;
    color: #333; /* <-- Couleur du texte tapé (Gris foncé) */
    background-color: #FFFFFF; /* <-- Fond blanc pour les champs */
    /* Propriétés spécifiques pour les select pour une meilleure apparence */
    -webkit-appearance: none; /* Supprime l'apparence par défaut sur Webkit (Chrome, Safari) */
    -moz-appearance: none;    /* Supprime l'apparence par défaut sur Firefox */
    appearance: none;         /* Supprime l'apparence par défaut */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23333%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.92%20109.162c-4.06%20-4.093%20-10.68%20-4.093%20-14.74%200l-114.5%20114.5l-114.5%20-114.5c-4.06%20-4.093%20-10.669%20-4.093%20-14.73%200c-4.062%204.091%20-4.062%2010.718%200%2014.81l121.86%20121.899c4.06%204.092%2010.669%204.092%2014.73%200l121.87%20-121.9c4.06%20-4.092%204.06%20-10.72%200%20-14.811z%22%2F%3E%3C%2Fsvg%3E'); /* Ajoute une flèche SVG personnalisée en base64 */
    background-repeat: no-repeat;
    background-position: right 12px top 50%; /* Positionne la flèche à droite */
    background-size: 12px auto; /* Taille de la flèche */
    padding-right: 30px; /* Ajoute de l'espace à droite pour que le texte ne passe pas sous la flèche */
}

.wpcf7 .container-quote-form .form-field::placeholder {
    color: #999; /* Couleur du texte d'exemple */
    opacity: 1;
}

.wpcf7 .container-quote-form textarea.form-field {
    min-height: 120px; /* Hauteur minimale pour les zones de texte */
    resize: vertical; /* Permet le redimensionnement vertical */
}

/* Styles spécifiques pour les checkboxes et leurs labels */
/* Les radios ayant été remplacées, ces règles ne s'appliquent plus qu'aux checkboxes */
.wpcf7 .container-quote-form .form-option {
    display: inline-block; /* Aligner horizontalement si possible */
    margin-right: 20px; /* Espacement entre les options */
    margin-bottom: 8px; /* Espacement sous chaque option/label */
    vertical-align: top;
}

.wpcf7 .container-quote-form input[type="checkbox"] {
    margin-right: 8px; /* Espacement entre la case et son texte */
    vertical-align: middle; /* Aligne verticalement avec le texte */
}

/* Style pour le texte des options (label des checkboxes) */
.wpcf7 .container-quote-form span.wpcf7-list-item-label {
    vertical-align: middle; /* Aligne verticalement avec la case */
    font-weight: normal;
    color: #FFFFFF; /* <-- Assurer que le texte des options est blanc */
    cursor: pointer;
    display: inline-block;
}


/* Styles pour le bouton d'envoi */
.wpcf7 .container-quote-form input[type="submit"].submit-button {
    background-color: #FF4500; /* Couleur du bouton (Orange Écarlate) */
    color: #FFFFFF; /* Texte blanc sur le bouton */
    padding: 15px 40px; /* Taille du padding */
    border: none;
    border-radius: 5px; /* Arrondir les coins */
    cursor: pointer; /* Curseur main */
    font-size: 1.2rem; /* Taille de police */
    font-weight: bold;
    text-transform: uppercase; /* Texte en majuscules */
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease; /* Animation fluide */
    display: block; /* Bouton sur sa propre ligne */
    width: auto; /* Largeur automatique */
    margin: 30px auto 0; /* Centrer le bouton */
    -webkit-appearance: none; /* Réinitialise l'apparence par défaut du navigateur */
    -moz-appearance: none;
    appearance: none;
    line-height: normal;
}

/* Effet Hover (survol) pour le bouton */
.wpcf7 .container-quote-form input[type="submit"].submit-button:hover {
    background-color: #CC3700; /* Couleur plus foncée au survol */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Ombre plus visible */
}

/* Effet Active (clic) pour le bouton */
.wpcf7 .container-quote-form input[type="submit"].submit-button:active {
    background-color: #A32D00; /* Couleur encore plus foncée au clic */
    transform: translateY(2px); /* Léger décalage */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Styles pour les messages de validation et de succès/échec (CF7 par défaut) */
/* Adaptés pour être lisibles sur le fond sombre */
.wpcf7 .container-quote-form .wpcf7-not-valid-tip {
    color: #FFD700; /* Jaune vif pour les messages d'erreur de champ */
    font-size: 0.9em;
    display: block;
    margin-top: 5px;
    font-weight: normal;
}

.wpcf7 .container-quote-form .wpcf7-response-output {
   margin: 20px 0;
   padding: 15px;
   border-radius: 4px;
   font-weight: bold;
   text-align: center;
}
.wpcf7 .container-quote-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    border: 2px solid #4CAF50;
    color: #E8F5E9;
    background-color: rgba(76, 175, 80, 0.2);
}
 .wpcf7 .container-quote-form .wpcf7-response-output.wpcf7-mail-sent-ng,
 .wpcf7 .container-quote-form .wpcf7-response-output.wpcf7-validation-errors {
    border: 2px solid #f44336;
    color: #FFEBEE;
    background-color: rgba(244, 67, 54, 0.2);
}

/* --- MEDIA QUERIES pour Mobile --- */
@media (max-width: 767px) {
    /* Ajustements pour le conteneur principal sur mobile */
    .wpcf7 .container-quote-form {
        /* Conserve margin-top/bottom, ajoute margin-left/right */
        margin: 20px 15px; /* 15px de marge à gauche et à droite */
        padding: 20px; /* Optionnel: réduire le padding intérieur aussi */
    }

    /* Ajustements pour le bouton d'envoi sur mobile */
    .wpcf7 .container-quote-form input[type="submit"].submit-button {
        /* Réduire la taille du padding pour rendre le bouton plus petit */
        padding: 10px 20px; /* Padding réduit */
        font-size: 1em; /* Optionnel: réduire la taille de la police */
        /* Le bouton est déjà display: block et centré avec margin: auto */
        /* Pas besoin de modifier display ou margin: auto */
        /* Si width: auto; n'est pas suffisant, on pourrait fixer une largeur max: */
        /* max-width: 80%; */
    }
}
.whb-col-mobile {
    flex: 1 1 auto;
    justify-content: space-between!important;
    margin-inline: -10px;
}