:root {
	--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(16,97,99);
	--wd-text-font-size: 16px;
	--wd-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-transform: none;
	--wd-title-color: rgb(16,97,99);
	--wd-entities-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-transform: none;
	--wd-entities-title-color: rgb(16,97,99);
	--wd-entities-title-color-hover: rgb(255, 102, 0);
	--wd-alternative-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 500;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: rgb(16,97,99);
	--wd-widget-title-font-size: 18px;
	--wd-header-el-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 16px;
	--wd-otl-style: none;
	--wd-primary-color: rgb(16,97,99);
	--wd-alternative-color: rgb(255,102,0);
	--btn-default-bgcolor: rgb(31,113,108);
	--btn-default-bgcolor-hover: rgb(255,102,0);
	--btn-accented-bgcolor: rgb(31,113,108);
	--btn-accented-bgcolor-hover: rgb(255,102,0);
	--wd-form-brd-width: 2px;
	--notices-success-bg: rgb(16,97,99);
	--notices-success-color: #fff;
	--notices-warning-bg: rgb(16,97,99);
	--notices-warning-color: rgb(255,255,255);
	--wd-link-color: rgb(31,111,106);
	--wd-link-color-hover: rgb(255,102,0);
	--wd-link-decor-style: solid;
	--wd-link-decor-style-hover: solid;
	--wd-link-decor-color: rgb(31,111,106);
	--wd-link-decor-color-hover: rgb(255,102,0);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: rgb(5,57,67);
	background-image: none;
	background-repeat: inherit;
	background-size: contain;
	background-attachment: fixed;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 520px;
	--wd-popup-padding: 0px;
}
: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);
}
.wd-page-title .wd-page-title-bg img {
	object-position: center center;
}
.wd-footer {
	background-color: rgba(0,0,0,0.77);
	background-image: url(https://fenuaclick.com/wp-content/uploads/2026/05/Footer_News-6.webp);
	background-size: cover;
	background-position: right bottom;
}
html .wd-nav.wd-nav-main > li > a {
	font-family: "Lato", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	text-transform: inherit;
	color: rgb(15,97,99);
}
html .wd-nav.wd-nav-main > li:hover > a, html .wd-nav.wd-nav-main > li.current-menu-item > a {
	color: rgb(255,102,0);
}
html .wd-dropdown-menu.wd-design-default .wd-sub-menu li a {
	font-family: "Lato", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: rgb(15,97,99);
}
html .wd-dropdown-menu.wd-design-default .wd-sub-menu li a:hover {
	color: rgb(255,102,0);
}
html .wd-nav.wd-nav-secondary > li > a {
	font-family: "'Arial Black', Gadget, sans-serif", Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: rgb(255,255,255);
}
html .wd-nav.wd-nav-secondary > li:hover > a, html .wd-nav.wd-nav-secondary > li.current-menu-item > a {
	color: rgb(255,255,255);
}
html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
	font-family: "Lato", Arial, Helvetica, sans-serif;
	font-weight: 900;
	font-size: 16px;
	text-transform: uppercase;
	color: rgb(255,255,255);
}
html .page-title > .container > .title:hover, html .page-title .wd-title-wrapp > .title:hover {
	color: rgb(255,102,0);
}
html .wd-page-title .wd-breadcrumbs :is(a,span), html .wd-page-title .breadcrumb li::after {
	font-family: "Lato", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: rgb(255,255,255);
}
html .wd-page-title .wd-breadcrumbs a:hover {
	color: rgb(255,102,0);
}
html .post.wd-post:not(.blog-design-small) .wd-entities-title {
	font-family: "Lato", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	color: rgb(15,97,99);
}
html .post.wd-post:not(.blog-design-small) .wd-entities-title a:hover {
	color: rgb(255,102,0);
}
html .wd-checkout-steps {
	font-family: "Lato", Arial, Helvetica, sans-serif;
	font-weight: 900;
	font-size: 16px;
	color: rgb(255,255,255);
}
html .wd-checkout-steps li a:hover {
	color: rgb(255,102,0);
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(249,247,242);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(249,247,242);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(249,247,242);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(249,247,242);
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: rgb(249,247,242);
	background-image: none;
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-size: 40px;
	--wd-arrow-icon-size: 40px;
	--wd-arrow-offset-h: 0px;
	--wd-arrow-offset-v: 0px;
	--wd-arrow-color: rgb(255,102,0);
	--wd-arrow-color-hover: rgb(255,255,255);
	--wd-arrow-bg-hover: rgb(255,255,255);
	--wd-arrow-radius: 10px;
	--wd-arrow-brd-color: rgb(221,153,51);
	--wd-arrow-brd: 10px groove;
}
.wd-nav-arrows.wd-pos-together:not(:where(.wd-custom-style)) {
	--wd-arrow-gap: 10px;
	--wd-arrow-size: 10px;
}
.wd-nav-pagin-wrap:not(.wd-custom-style) {
	--wd-pagin-size: 20px;
	--wd-pagin-bg: rgb(31,111,106);
	--wd-pagin-bg-hover: rgb(255,255,255);
	--wd-pagin-bg-act: rgb(255,102,0);
}
.wd-nav-scroll {
	--wd-nscroll-bg: rgb(255,255,255);
}
.wd .product-label.onsale {
	background-color: rgb(255,102,0);
	color: rgb(255,255,255);
}
.wd .product-label.new {
	background-color: rgb(17,95,97);
}
.wd .product-label.featured {
	background-color: rgb(17,95,97);
	color: rgb(255,255,255);
}
.wd .product-label.out-of-stock {
	background-color: rgb(221,51,51);
	color: rgb(255,255,255);
}
.wd .product-label.attribute-label:not(.label-with-img) {
	background-color: rgb(17,95,97);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 800px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 50px;
}
.wd-builder-off .wd-fbt.wd-design-side {
	--wd-form-width: 250px;
}

@media (max-width: 1024px) {
	.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
		--wd-arrow-icon-size: 30px;
	--wd-arrow-offset-h: -20px;
	}
	.wd-nav-pagin-wrap:not(.wd-custom-style) {
		--wd-pagin-size: 20px;
	}

}

@media (max-width: 768.98px) {
	.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
		--wd-arrow-size: 30px;
	--wd-arrow-icon-size: 30px;
	--wd-arrow-offset-h: 0px;
	--wd-arrow-offset-v: 90px;
	}
	.wd-nav-pagin-wrap:not(.wd-custom-style) {
		--wd-pagin-size: 10px;
	}
	.wd-nav-scroll {
		--wd-nscroll-height: 10px;
	--wd-nscroll-width: 10%;
	}

}
:root{
--wd-container-w: 1600px;
--wd-form-brd-radius: 0px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--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;
--wd-brd-radius: 12px;
}

@media (min-width: 1600px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(255,255,255);
}

/* Police des titres (section 120). Cette ligne doit rester tout en haut du fichier. */
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500&display=swap');

/* ============================================================
   FENUA CLICK, CSS ADDITIONNEL
   Version consolidee v99 (153 : accueil sur un seul fond creme continu, plus de bandes entre les sections ; 151 : vague du pied de page remise en creme, la newsletter n est plus une bande teal ; sections 14, 26, 36, 67 et 103 retirees : anciens avis CusRev supprimes ; 152 : pastilles de categories visibles sur telephone ; section 137 retiree : l accueil a ete refait ; 142 : onglets des produits en pastilles, etoiles vides masquees ; 143 : cartes de l accueil sans ombre grise, nombre d avis ; 144 : sans grosses vagues dans Commander c est simple ; 145 : menu du haut harmonise ; panier du haut sans pastille sable ; 146 : bouton Menu en pastille ; 147 : cartes produits propres sur telephone ; 148 : barre du haut adaptee au telephone ; recherche visible sur toutes les pages ; produits sans avis : 0 avis ; 149 : menu du haut sur petit ordinateur et tablette, icones centrees dans leur rond ; 150 : compte et panier toujours visibles ; 151 : accueil sans marge au dessus du pied de page, vague du pied de page qui part de la newsletter ; en tete verifie de 1025 a 1920 px) (109 : descriptions courtes, 110 : newsletter, 111 : bande newsletter pleine largeur, 112 : supprimee, 113 : description courte en carte, 114 : moins de vide sous les onglets, 115 : miniatures de galerie lisibles, 116 : bloc Notre selection, 117 : newsletter sur fond clair, 118 : galerie qui suit le defilement, 119 : plus sobre, orange reserve a l achat, 120 : police des titres Familjen Grotesk, 121 : fleches en teal, 122 : accueil plus sobre, 123 : onglets sans gros liseré, 124 : photos des descriptifs, 125 : blocs des descriptifs avec trait et ombre, 126 : gras en teal, 127 : blocs en cartes sable, 128 : page commande qui suit le defilement, 129 : prix en fourchette sur une ligne, 130 : vague du pied de page plus visible sur telephone, 131 : cartes produits blanches avec ombre, 132 : separation image et texte dans les cartes, 133 : stock faible en orange, 134 : icones du menu animees, 135 : promotions plus douces, 136 : bouton Une question en teal, 137 : derniers arrivages en bande blanche pleine largeur, contenu elargi a 1480 px, grande photo sur toute la hauteur de la grille, bouton Filtrer de la boutique en teal dans la section des filtres, cartes produits avec fin contour sable et titre teal au survol, newsletter sans orange, 139 : photos produits encadrees de blanc et terminees par une vague, 140 : newsletter de la colonne boutique en carte teal, filtres de la boutique sans orange, 141 : avis clients en petites cartes).

   CE QUI CHANGE PAR RAPPORT A LA v32
   Section 108 bis : variantes fcb-carre, fcb-conseils et fcb-note
   pour les descriptions produits.

   CE QUI CHANGE PAR RAPPORT A LA v31
   Nouvelle section 108 : description produit en mise en page
   editoriale (classe fcb). Les fiches sans ce balisage ne
   changent pas.

   CE QUI CHANGE PAR RAPPORT A LA v30
   Section 15 : options en couleur (survol orange, choix en
   vert pale) et quantite sur fond sable. Nouvelle section 106 :
   bouton Ajouter au panier en orange sur les fiches produits.


   AVANT DE COLLER : selectionne tout le contenu du champ et
   supprime le, puis colle ce fichier. Ne colle pas a la suite.

   CE QUI CHANGE PAR RAPPORT A LA v29

   1. LA VAGUE DU PIED DE PAGE est regroupee en section 4.
      L'ancienne vague fixe avec lisere orange, sa variante
      mobile, et le bloc anime colle a la fin du champ sont
      remplaces par une seule version : la vague animee sans
      lisere. Il n'y a plus qu'une definition de fc-houle.

   2. L'EN TETE EST CORRIGE. Celui de la v29 annoncait des
      sections 102, 102 bis, 102 ter et 107 qui ne sont pas dans
      le fichier. Le fichier s'arrete bien a la section 101.

   3. LE CARROUSEL PRODUITS DE L'ACCUEIL est remplace par le
      bloc HTML Nos dernieres arrivees, qui porte ses propres
      styles. Aucune regle de ce champ ne lui etait propre.
      La section 101, fleches des carrousels, est CONSERVEE :
      elle habille aussi les fleches des fiches produit
      (galerie et produits similaires).

   Les sections 0 a 101 sont identiques a la v29, ligne pour
   ligne, en dehors de la vague de la section 4.

   APRES AVOIR ENREGISTRE
   Vide le cache de WP Rocket, puis recharge avec Ctrl Maj R
   sur la vraie page, pas dans l'editeur Elementor.

   UNE REGLE A RETENIR
   Ne colle jamais une ouverture de commentaire juste apres
   une accolade fermante sans fermer le commentaire precedent.
   Un commentaire mal ferme efface la suite en silence.
============================================================ */


/* ============================================================
   0. VARIABLES DE COULEUR
   ============================================================ */
:root {
    --fc-orange:      #E17731;   /* orange principal */
    --fc-orange-dark: #c45d1f;   /* survol */
    --fc-orange-line: #f2d6bd;   /* bordures orange claires */
    --fc-teal:        #215d60;   /* teal principal : titres, bordures */
    --fc-teal-light:  #1d6d6f;   /* fonds teal */
    --fc-teal-deep:   #1a5c4b;   /* accents forts */
    --fc-ink:         #1a3a3a;   /* texte foncé */
    --fc-red:         #e2231a;   /* prix barré */
}


/* ============================================================
   0 bis. UTILITAIRES
   ============================================================ */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ============================================================
   1. WOOCOMMERCE — MESSAGES D'ERREUR & PRIX
   ============================================================ */
.woocommerce-error {
    position: relative;
    border-radius: 8px;
    padding: 20px 20px 20px 55px;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    max-width: 600px;
    margin: 25px auto;
    font-size: 15px !important;
}
.woocommerce-error::before {
    content: "⚠";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    opacity: 0.8;
}

.price {
    color: var(--fc-orange) !important;
    font-size: 19px;
    font-weight: 700 !important;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.price del {
    color: var(--fc-red) !important;
    text-decoration: line-through !important;
    opacity: 1 !important;
}


/* ============================================================
   2. BOUTONS TÉLÉCHARGEMENT
   ============================================================ */
.wcpoa_attachmentbtn {
    display: inline-block !important;
    padding: 14px 28px;
    background-color: var(--fc-teal-deep) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    transition: 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-size: 15px !important;
}


/* ============================================================
   3. FOOTER — ALIGNEMENT PUCES & TITRES
   ============================================================ */
.footer-column-1 h5, .footer-column-2 h5, .footer-column-3 h5,
.wd-footer .widget-title, .wd-footer .footer-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    margin-bottom: 15px !important;
    font-size: 15px !important;
}
.footer-column-1 li, .footer-column-2 li, .footer-column-3 li {
    display: flex !important;
    align-items: flex-start !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
    list-style: none !important;
    padding-left: 0 !important;
    font-size: 14px !important;
}
.footer-column-2 li a, .footer-column-3 li a {
    color: #ffffff !important;
    transition: 0.3s;
    display: inline-block;
    font-size: 14px !important;
}
.footer-column-2 li a:hover, .footer-column-3 li a:hover {
    color: #f0f0f0 !important;
    transform: translateX(5px);
    text-decoration: none !important;
}
#menu-nos-engagements a {
    pointer-events: none !important;
    cursor: default !important;
    color: #ffffff !important;
}
.footer-column-1 li:before {
    content: "✓";
    color: var(--fc-orange) !important;
    font-weight: 900;
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 0px;
}
.footer-column-2 li:before, .footer-column-3 li:before {
    content: "—";
    color: var(--fc-orange) !important;
    font-weight: 900;
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 0px;
    font-size: 14px;
}
.fc-highlight {
    color: var(--fc-orange) !important;
    font-weight: 800;
    font-size: 14px !important;
}
.fc-copy-text, .fc-pay-label {
    font-size: 13px !important;
    color: #ffffff !important;
    line-height: 1.6 !important;
}
.fc-pay-label strong { font-size: 13px !important; }
.fc-pay-img {
    max-width: 220px !important;
    height: auto !important;
    margin-top: 10px;
}


/* ============================================================
   4. VAGUE FOOTER & BANDEAU DE TITRE
   ============================================================ */
/* Vague du pied de page, animee.
   Deux vagues d'eau translucides remontent sur le creme, comme
   l'eau sur le sable, et s'estompent vers le bas pour se fondre
   dans le footer. Plus de lisere orange.
   La bande unie et l'ombre creme evitent un fin trait vert en
   haut du footer. Aucune animation si le visiteur a coupe les
   animations sur son appareil. */
footer.wd-footer::before {
    content: "";
    display: block;
    width: 100%;
    margin-bottom: -5px;
    transform: scaleX(-1);
}
@keyframes fc-houle{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:100vw 0,-200vw 0,-100vw 0,0 0}
}
footer.wd-footer::before{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232c7f80' stop-opacity='0.24'/%3E%3Cstop offset='.55' stop-color='%232c7f80' stop-opacity='0.120'/%3E%3Cstop offset='1' stop-color='%232c7f80' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,150 L0,50 C120,32 360,68 480,50 C600,32 840,68 960,50 C1080,32 1320,68 1440,50 L1440,150 Z' fill='url(%23g)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232c7f80' stop-opacity='0.15'/%3E%3Cstop offset='.55' stop-color='%232c7f80' stop-opacity='0.075'/%3E%3Cstop offset='1' stop-color='%232c7f80' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,150 L0,38 C300,18 480,58 720,38 C960,18 1140,58 1440,38 L1440,150 Z' fill='url(%23g)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1140,120 960,0 720,60 C480,120 300,0 0,60 Z' fill='%23F9F7F2'/%3E%3C/svg%3E"),linear-gradient(#F9F7F2,#F9F7F2) !important;
  background-size:100vw 100%,100vw 100%,100vw 100%,100% 18% !important;
  background-repeat:repeat-x,repeat-x,repeat-x,no-repeat !important;
  height:clamp(70px,10vw,150px) !important;
  box-shadow:0 -4px 0 #F9F7F2;
  animation:fc-houle 30s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  footer.wd-footer::before{animation:none}
}
footer.wd-footer {
    padding-top: 0 !important;
    /* position et isolation sont posees en section 49 */
}

.wd-page-title-bg.wd-fill {
    background-image: url('https://fenuaclick.com/wp-content/uploads/2026/05/Footer_News-6.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    display: block !important;
}
.wd-page-title-bg.wd-fill img { display: none !important; }
.wd-page-title.page-title-default h1,
.wd-page-title.page-title-default .breadcrumbs,
.wd-page-title.page-title-default .breadcrumbs a {
    color: #ffffff !important;
}



/* ============================================================
   4 bis. VAGUE DU HERO (ACCUEIL)
   Meme trace que le footer, retourne verticalement.
   Necessite la classe vague-hero sur la section Elementor.
   ============================================================ */
.vague-hero { position: relative; }
.vague-hero::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: clamp(40px, 7vw, 100px);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 130' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,65 C1140,125 960,5 720,65 C480,125 300,5 0,65 Z' fill='%23DE7735'/%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1140,120 960,0 720,60 C480,120 300,0 0,60 Z' fill='%23FAF8F5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: scaleY(-1);
    z-index: 10;
    pointer-events: none;
}
@media (max-width: 767px) {
    .vague-hero::after {
        height: 50px;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 140' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,75 C1140,135 960,15 720,75 C480,135 300,15 0,75 Z' fill='%23DE7735'/%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1140,120 960,0 720,60 C480,120 300,0 0,60 Z' fill='%23FAF8F5'/%3E%3C/svg%3E");
    }
}


/* ============================================================
   5. CHECKOUT — MOYENS DE PAIEMENT
   ============================================================ */
body .woocommerce-checkout #payment {
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 25px !important;
    border: 1px solid #e2e8f0 !important;
}
body .woocommerce-checkout #payment ul.payment_methods li {
    background: white !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    list-style: none !important;
}
body .woocommerce-checkout #payment ul.payment_methods li:hover {
    border-color: var(--fc-teal) !important;
    background-color: #fcfdfd !important;
}
body .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    position: absolute !important;
    left: 20px !important;
    top: 22px !important;
    margin: 0 !important;
    transform: scale(1.4);
    z-index: 10;
}
body .woocommerce-checkout #payment ul.payment_methods li label {
    display: flex !important;
    align-items: center;
    padding: 20px 20px 20px 60px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--fc-ink) !important;
    cursor: pointer !important;
    margin: 0 !important;
    width: 100%;
}
body .woocommerce-checkout #payment ul.payment_methods li label img {
    display: block !important;
    margin-left: auto !important;
    max-height: 24px !important;
    width: auto !important;
    object-fit: contain;
}
.custom-osb-logo {
    display: block !important;
    margin-left: auto !important;
    max-height: 24px !important;
    object-fit: contain;
}
body .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
    border-color: var(--fc-orange) !important;
    background-color: #fff9f5 !important;
    box-shadow: 0 4px 12px rgba(225, 119, 49, 0.12) !important;
}
body .woocommerce-checkout #payment ul.payment_methods li:has(input[value="bacs"]:checked) {
    border-color: var(--fc-teal) !important;
    background-color: #f0f7f7 !important;
}
body .woocommerce-checkout #payment ul.payment_methods li:has(input[value="bacs"]:checked) label {
    color: var(--fc-teal) !important;
}
body .woocommerce-checkout #payment div.payment_box {
    background: transparent !important;
    border-top: none !important;
    padding: 0px 20px 20px 60px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 !important;
}
body .woocommerce-checkout #payment div.payment_box::before { display: none !important; }

#place_order {
    background-color: var(--fc-orange) !important;
    width: 100% !important;
    padding: 22px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(225, 119, 49, 0.25) !important;
    transition: 0.3s ease;
    margin-top: 15px;
}
#place_order:hover {
    background-color: var(--fc-orange-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(225, 119, 49, 0.35) !important;
}

.woocommerce-order tr:has(a.button) { display: none !important; }


/* ============================================================
   5 bis. PAIEMENT — CODE PROMO ET CONNEXION
   ============================================================ */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    max-width: 460px;
    margin: 0 0 18px !important;
    padding: 14px 18px !important;
    background-color: #f2f8f8;
    background-image: none !important;
    border: 1px solid #e4eded;
    border-left: 4px solid var(--fc-teal);
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fc-teal);
    line-height: 1.45;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23215d60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a2 2 0 0 1 0-4V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v2a2 2 0 0 1 0 4v2a2 2 0 0 1 0 4v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2a2 2 0 0 1 0-4z'/%3E%3Cpath d='M13 8l-2 8'/%3E%3C/svg%3E");
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23215d60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon,
.woocommerce-checkout .woocommerce-form-login-toggle a.showlogin {
    color: var(--fc-orange);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    transition: color .2s ease;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon:hover,
.woocommerce-checkout .woocommerce-form-login-toggle a.showlogin:hover {
    color: var(--fc-orange-dark);
}
.woocommerce-checkout form.checkout_coupon {
    max-width: 460px;
    margin: 0 0 22px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e4eded;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(33, 93, 96, .05);
}
.woocommerce-checkout form.checkout_coupon .form-row-first,
.woocommerce-checkout form.checkout_coupon .form-row-last {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
.woocommerce-checkout form.checkout_coupon .form-row-first {
    margin-bottom: 10px;
}
.woocommerce-checkout form.checkout_coupon .clear {
    display: none;
}
.woocommerce-checkout form.checkout_coupon input#coupon_code {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #e4eded;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    color: var(--fc-teal);
    box-sizing: border-box;
    transition: border-color .2s ease;
}
.woocommerce-checkout form.checkout_coupon input#coupon_code:focus {
    outline: none;
    border-color: var(--fc-teal);
}
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
    width: 100%;
    min-height: 48px;
    padding: 5px 22px;
    background-color: var(--fc-teal) !important;
    color: #fff !important;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .2s ease, transform .15s ease;
}
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover {
    background-color: var(--fc-teal-light) !important;
    transform: translateY(-1px);
}
.woocommerce-checkout form.woocommerce-form-login {
    max-width: 460px;
    margin: 0 0 22px;
    padding: 22px;
    background: #fff;
    border: 1px solid #e4eded;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(33, 93, 96, .05);
}


/* ============================================================
   5 ter. PANIER — MASQUER LE CODE PROMO
   ============================================================ */
.woocommerce-cart form.woocommerce-cart-form .coupon,
.woocommerce-cart td.actions .coupon {
    display: none !important;
}
.woocommerce-cart tr.wd-cart-action-row td.actions {
    padding: 0 !important;
    border: 0 !important;
}


/* ============================================================
   5 quater. CHECKOUT — TITRE ENCADRÉ CGV
   ============================================================ */
.woocommerce-terms-and-conditions h1 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--fc-teal) !important;
    text-transform: none !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
}


/* ============================================================
   6. COMPTE CLIENT & ENREGISTREMENT
   ============================================================ */
.woocommerce-account .u-columns.col2-set {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    align-items: stretch !important;
    max-width: 1000px !important;
    margin: 40px auto !important;
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
}
.woocommerce-account .u-columns.col2-set .col-1,
.woocommerce-account .u-columns.col2-set .col-2 {
    flex: 1 1 320px !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.woocommerce-account .col-2 {
    background-color: #f7fefc !important;
    padding: 30px !important;
    border-radius: 8px !important;
    border: 1px solid #e1f5f0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.woocommerce-account h2 {
    color: var(--fc-teal-deep) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    border-bottom: 2px solid #a3dfce !important;
    padding-bottom: 10px !important;
    display: inline-block !important;
}
.woocommerce-account .form-row { width: 100% !important; margin-bottom: 18px !important; }
.woocommerce-Input.input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"] {
    width: 100% !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 6px !important;
    padding: 14px 15px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}
.woocommerce-account button.button,
.woocommerce-account .register .button {
    background-color: var(--fc-orange) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 35px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
    transition: 0.3s ease !important;
    cursor: pointer !important;
    width: 100% !important;
}
.woocommerce-account .register .button { background-color: var(--fc-teal-deep) !important; }
.woocommerce-form-login .form-row.inline {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 20px 0 !important;
    float: none !important;
}
.fc-signup {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}
.fc-signup__title {
    color: var(--fc-teal) !important;
    font-size: 26px !important;
    margin: 0 0 8px !important;
}
.fc-signup__lead {
    color: #555;
    font-size: 15px;
    margin: 0 0 18px;
}
.fc-signup__box {
    background: #ffffff;
    border-left: 4px solid var(--fc-teal-light);
    border-radius: 8px;
    padding: 18px 20px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(33, 93, 96, 0.08);
}

.fc-signup__note {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
.fc-signup__btn {
    display: inline-block;
    margin-top: 20px;
    background-color: var(--fc-teal-deep) !important;
    color: #ffffff !important;
    padding: 14px 34px;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    text-decoration: none !important;
    transition: 0.3s ease;
}
.fc-signup__btn:hover {
    background-color: var(--fc-teal) !important;
    color: #ffffff !important;
}


/* ============================================================
   7. NEWSLETTER MINI
   Aligné sur la charte globale : plus de variables locales.
   ============================================================ */
.fc-newsletter-mini {
    background: #fff;
    color: var(--fc-teal);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    padding: 22px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.fc-newsletter-mini .fc-newsletter-title {
    font-size: 20px !important;
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--fc-teal);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.fc-newsletter-mini .fc-newsletter-baseline {
    font-size: 13px !important;
    line-height: 1.45;
    font-weight: 400;
    color: var(--fc-teal);
    opacity: .8;
    margin: 0 0 14px;
}

.fc-newsletter-mini input[type="email"] {
    width: 100%;
    background: rgba(33, 93, 96, .05);
    color: var(--fc-teal);
    border: 1px solid rgba(33, 93, 96, .25);
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 14px;
    transition: background .2s ease, border-color .2s ease;
}

.fc-newsletter-mini input[type="email"]:focus {
    background: #fff;
    border-color: var(--fc-orange);
    outline: none;
}

.fc-newsletter-mini input[type="email"]::placeholder {
    color: var(--fc-teal);
    opacity: .5;
}

.fc-newsletter-mini .fc-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 16px;
    cursor: pointer;
}

.fc-newsletter-mini .fc-privacy input[type="checkbox"] {
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--fc-teal);
}

.fc-newsletter-mini .fc-privacy span {
    font-size: 12px;
    line-height: 1.4;
    color: var(--fc-teal);
    opacity: .85;
}

.fc-newsletter-mini .fc-privacy a {
    color: var(--fc-teal);
    text-decoration: underline;
}

.fc-newsletter-mini input[type="submit"] {
    width: 100%;
    background: var(--fc-orange);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .2s ease;
}

.fc-newsletter-mini input[type="submit"]:hover {
    background: var(--fc-orange-dark);
}


/* ============================================================
   8. ACCORDÉONS FOOTER & ORDRE DES PAIEMENTS
   ============================================================ */
.wd-footer .widget-title:after,
.footer-column-1 h5:after, .footer-column-2 h5:after, .footer-column-3 h5:after {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    transition: all 0.3s ease;
}
.wd-footer .wd-active .widget-title:after,
.wd-footer .wd-active h5:after { color: var(--fc-orange) !important; }

.wc_payment_methods.payment_methods { display: flex; flex-direction: column; }
.wc_payment_method.payment_method_osbstd { order: 1; }
.wc_payment_method.payment_method_bacs  { order: 2; }
.wc_payment_method.payment_method_cod   { order: 3; }


/* ============================================================
   9. BARRE MOBILE & PANIER
   ============================================================ */
body .wd-toolbar, body .wd-sticky-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.08) !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}
.wd-toolbar .wd-tool-icon, .wd-toolbar .wd-toolbar-label, .wd-toolbar a, .wd-toolbar span {
    color: var(--fc-teal-light) !important;
    fill: var(--fc-teal-light) !important;
    font-weight: 600 !important;
}
.wd-header-cart .wd-cart-number, .wd-header-cart .wd-tools-count,
.wd-toolbar .wd-cart-number, .wd-toolbar .wd-tools-count {
    display: flex !important;
    background-color: var(--fc-orange) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 15px !important;
    height: 15px !important;
    font-size: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -5px !important;
    right: -2px !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999 !important;
}
.wd-toolbar .wd-tool { transition: all 0.2s ease !important; }
.wd-toolbar .wd-tool:active, .wd-toolbar a:active {
    transform: scale(0.85) !important;
    opacity: 0.6 !important;
    background-color: rgba(29, 109, 111, 0.1) !important;
    border-radius: 10px !important;
}


/* ============================================================
   10. HEADER — BARRE DE RECHERCHE
   ============================================================ */
/* (ancien masquage de la recherche hors accueil, boutique et produits : retire,
   la recherche et la ligne du bas de l'en tete s'affichent sur toutes les pages) */
.home .whb-header-bottom,
.woocommerce-shop .whb-header-bottom,
.single-product .whb-header-bottom {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.home .whb-header-bottom .whb-flex-row,
.woocommerce-shop .whb-header-bottom .whb-flex-row,
.single-product .whb-header-bottom .whb-flex-row {
    min-height: 0 !important;
}


/* ============================================================
   11. WISHLIST
   ============================================================ */
.wd-wishlist-icon .wd-action-icon::before,
.wd-wishlist-btn a {
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.6) !important;
}


/* ============================================================
   12. ARTICLES FENUA CLICK
   ============================================================ */
.fenuaclick-article .collapsible-content strong,
.fenuaclick-article .collapsible-inner strong {
    color: var(--fc-orange);
}
.fenuaclick-article .collapsible-inner > p > strong:first-child {
    display: block;
    margin-bottom: 4px;
}


/* ============================================================
   13. CONTACT FORM 7
   ============================================================ */
.wpcf7-form label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--fc-teal);
    margin-bottom: 14px;
    font-size: 14px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    padding: 12px 14px;
    margin-top: 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fbfbfb;
    transition: border-color .2s ease;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--fc-orange);
    background: #fff;
}
.wpcf7-form textarea { min-height: 120px; resize: vertical; }
.wpcf7-form .wpcf7-acceptance { font-weight: 400; color: #555; font-size: 13px; }
.wpcf7-form input[type="submit"] {
    background: var(--fc-orange);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    padding: 13px 28px;
    cursor: pointer;
    transition: background .2s ease;
}
.wpcf7-form input[type="submit"]:hover { background: var(--fc-orange-dark); }



/* ============================================================
   15. FICHE PRODUIT
   --fcp-teal et --fcp-orange pointent vers la charte globale,
   les autres sont propres à la fiche produit.
   Les règles du bouton d'ajout au panier ont été retirées en v9.
   Les règles p.stock ont été retirées en v11 : elles entraient
   en conflit avec la section 51, qui traite la disponibilité
   de la meme facon sur tout le site.
   ============================================================ */
.single-product {
    --fcp-teal:        var(--fc-teal);
    --fcp-teal-soft:   #f2f8f8;
    --fcp-orange:      var(--fc-orange);
    --fcp-orange-soft: #fff6ef;
    --fcp-orange-line: var(--fc-orange-line);
    --fcp-line:        #e4eded;
    --fcp-muted:       #6b8385;
    --fcp-gold:        #f2b01e;
}
.single-product .wd-single-title h1.product_title {
    font-size: 30px;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--fcp-teal);
    margin: 0 0 6px;
}
.single-product .wd-single-rating .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px !important;
}
.single-product .wd-single-rating .star-rating {
    color: var(--fcp-gold);
}
.single-product .wd-single-rating .woocommerce-review-link {
    color: var(--fcp-muted);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.single-product .wd-single-rating .woocommerce-review-link:hover {
    color: var(--fcp-teal);
}
body.single-product .elementor-widget-countdown .elementor-countdown-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
    padding: 12px 14px 11px;
    background: var(--fcp-orange-soft);
    border: 1px solid var(--fcp-orange-line);
    border-radius: 12px;
}
body.single-product .elementor-widget-countdown .elementor-countdown-wrapper::before {
    content: "Fin de la précommande dans :";
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: var(--fcp-teal);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
body.single-product .elementor-widget-countdown .elementor-countdown-item {
    margin: 0 !important;
    flex-basis: auto !important;
    min-width: 0;
    padding: 8px 4px 7px;
    background: #fff;
    border: 1px solid var(--fcp-orange-line);
    border-radius: 9px;
    text-align: center;
}
body.single-product .elementor-widget-countdown .elementor-countdown-digits {
    display: block;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--fcp-orange);
    font-variant-numeric: tabular-nums;
}
body.single-product .elementor-widget-countdown .elementor-countdown-label {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fcp-muted);
}
.single-product .e-con:has(> .wd-single-price) {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--fcp-line);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(33, 93, 96, .05);
}
.single-product .e-con:has(> .wd-single-price) {
    --gap: 12px !important;
    gap: 12px !important;
}
.single-product .e-con:has(> .wd-single-price) > .elementor-widget-spacer {
    display: none !important;
}
.single-product .e-con:has(> .wd-single-title) > .elementor-widget-spacer {
    --spacer-size: 4px !important;
}
.single-product .e-con:has(> .wd-single-title) > .elementor-widget-spacer .elementor-spacer {
    height: 4px !important;
}
.single-product .wd-single-price .price {
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.05;
    letter-spacing: -.02em;
    gap: 4px 12px;
    margin-bottom: 0 !important;
}
.single-product .wd-single-price .price .woocommerce-Price-currencySymbol {
    font-size: .45em;
    font-weight: 600;
    letter-spacing: 0;
    opacity: .8;
    margin-left: 2px;
}
.single-product .wd-single-price .price del {
    font-size: .45em;
    font-weight: 600 !important;
    opacity: .85;
}
.single-product .wd-single-price .price ins {
    text-decoration: none;
}
.single-product .wd-single-price .price > span[aria-hidden="true"]:not([class]) {
    font-size: 0 !important;
    margin: 0 2px;
}
.single-product .wd-single-price .price > span[aria-hidden="true"]:not([class])::after {
    content: "à";
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--fcp-muted);
}
.single-product .wd-single-add-cart table.variations {
    margin: 0 0 12px !important;
}
.single-product .wd-single-add-cart table.variations .label label {
    color: var(--fcp-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.single-product .wd-swatches-single .wd-swatch {
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--fcp-line);
    transition: box-shadow .18s ease, transform .15s ease, background-color .18s ease;
}
.single-product .wd-swatches-single .wd-swatch:hover {
    transform: translateY(-1px);
    background: var(--fcp-orange-soft);
    box-shadow: inset 0 0 0 1.5px var(--fcp-orange);
}
.single-product .wd-swatches-single .wd-swatch[aria-checked="true"],
.single-product .wd-swatches-single .wd-swatch.wd-active,
.single-product .wd-swatches-single .wd-swatch.selected {
    background: #e6f1f0;
    color: var(--fcp-teal);
    box-shadow: inset 0 0 0 2px var(--fcp-teal),
                0 4px 12px rgba(33, 93, 96, .12);
}
.single-product .wd-single-add-cart .variations select {
    height: 48px !important;
    border-width: 1px !important;
    border-radius: 11px !important;
    padding: 0 34px 0 14px !important;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--fcp-teal) !important;
}
.single-product .wd-single-add-cart .variations select:focus {
    border-color: var(--fcp-teal) !important;
}
.single-product .wd-single-add-cart form.cart {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0;
}
.single-product .wd-single-add-cart form.cart .quantity {
    display: inline-flex;
    align-items: stretch;
    width: auto;
    height: 52px;
    background: #f6efe4;
    border: 1px solid #eadfcb;
    border-radius: 11px;
    overflow: hidden;
    transition: border-color .2s ease;
}
.single-product .wd-single-add-cart form.cart .quantity:focus-within {
    border-color: var(--fcp-teal);
}
.single-product .wd-single-add-cart form.cart .quantity button.minus,
.single-product .wd-single-add-cart form.cart .quantity button.plus {
    width: 38px;
    min-width: 38px;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--fcp-muted);
    font-size: 17px;
    line-height: 1;
    transition: background-color .18s ease, color .18s ease;
}
.single-product .wd-single-add-cart form.cart .quantity button.minus:hover,
.single-product .wd-single-add-cart form.cart .quantity button.plus:hover {
    background: var(--fcp-teal-soft);
    color: var(--fcp-teal);
}
.single-product .wd-single-add-cart form.cart .quantity input.qty {
    width: 42px;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--fcp-teal);
}
.single-product .wd-image img[src*="carte_paiement"],
.single-product .wd-image img[data-lazy-src*="carte_paiement"] {
    max-width: 250px;
    height: auto;
}
.single-product .wd-single-short-desc {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
}
.single-product .wd-single-short-desc .simple-desc {
    margin-top: 0;
}
.single-product .wd-single-short-desc .simple-desc .item {
    align-items: center;
    margin-bottom: 14px;
}
.single-product .wd-single-short-desc .simple-desc .item > svg {
    width: 34px;
    height: 34px;
    padding: 8px;
    margin-top: 0;
    margin-right: 12px;
    box-sizing: border-box;
    background: var(--fcp-teal-soft);
    border-radius: 10px;
    overflow: visible;
}
.single-product .wd-single-short-desc .simple-desc .item::before {
    width: 34px;
    height: 34px;
    margin-top: 0;
    margin-right: 12px;
    box-sizing: border-box;
    background-color: var(--fcp-teal-soft);
    background-size: 18px 18px;
    background-position: center;
    border-radius: 10px;
}
.single-product .wd-single-short-desc .simple-desc .item-livraison > svg,
.single-product .wd-single-short-desc .simple-desc .item-livraison::before {
    background-color: var(--fcp-orange-soft);
}
.single-product .wd-single-short-desc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.single-product .wd-single-short-desc ul li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
}
.single-product .wd-single-short-desc ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fcp-orange);
}
.single-product .wd-single-meta .product_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.single-product .wd-single-meta .meta-label {
    color: var(--fcp-muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.single-product .wd-single-meta .posted_in a,
.single-product .wd-single-meta .tagged_as a {
    display: inline-block;
    margin-left: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--fcp-teal-soft);
    color: var(--fcp-teal);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.single-product .wd-single-meta .posted_in a:hover,
.single-product .wd-single-meta .tagged_as a:hover {
    background: var(--fcp-teal);
    color: #fff;
}
.single-product .wd-single-gallery .wd-gallery-images .wd-carousel-item img {
    border-radius: 14px;
    border: 1px solid var(--fcp-line);
    background: #fff;
}
.single-product .wd-single-gallery .wd-gallery-thumb .wd-carousel-item img {
    border-radius: 9px;
    border: 1px solid var(--fcp-line);
    cursor: pointer;
    transition: border-color .2s ease, transform .15s ease;
}
.single-product .wd-single-gallery .wd-gallery-thumb .wd-carousel-item img:hover {
    border-color: var(--fcp-teal);
    transform: translateY(-2px);
}
.single-product .wd-single-tabs .wd-nav-tabs {
    gap: 5px 28px;
    border-bottom: 1px solid var(--fcp-line);
}
.single-product .wd-single-tabs .wd-nav-tabs > li > a.wd-nav-link {
    padding: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fcp-muted);
    transition: color .2s ease;
}
.single-product .wd-single-tabs .wd-nav-tabs > li > a.wd-nav-link:hover,
.single-product .wd-single-tabs .wd-nav-tabs > li.active > a.wd-nav-link {
    color: var(--fcp-teal);
}
.single-product .wd-single-tabs .wd-nav-tabs .nav-link-text::after {
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: var(--fcp-orange);
}
.single-product .wd-single-tabs .woocommerce-Tabs-panel {
    padding-top: 24px;
    font-size: 15px;
    line-height: 1.65;
}
.single-product .wd-social-icons.social-follow .wd-label {
    color: var(--fcp-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.single-product .wd-social-icons.social-follow a {
    opacity: .55;
    transition: opacity .2s ease, transform .15s ease;
}
.single-product .wd-social-icons.social-follow a:hover {
    opacity: 1;
    transform: translateY(-2px);
}
.single-product .fc-delivery {
    margin: 16px 0;
    border-left: 4px solid var(--fc-teal);
}


/* ============================================================
   15 ter. FICHE PRODUIT — FLÈCHES DE GALERIE
   ============================================================ */
.woocommerce-product-gallery .wd-nav-arrows .wd-arrow-inner {
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    color: var(--fc-orange) !important;
    transition: background-color .2s ease, color .2s ease;
}
.woocommerce-product-gallery .wd-nav-arrows .wd-arrow-inner:hover {
    background: var(--fc-orange) !important;
    color: #ffffff !important;
}

/* MOBILE : WoodMart 8 dimensionne ses fleches par variables CSS,
   on redefinit la variable plutot que de forcer les tailles. */
@media (max-width: 767px) {
    /* Vignettes : plus de fleches, elles masquaient la premiere
       et la derniere miniature, devenues intouchables */
    .wd-gallery-thumb .wd-nav-arrows { display: none !important; }

    .woocommerce-product-gallery .wd-nav-arrows {
        --wd-arrow-size: 32px;
        --wd-arrow-width: 32px;
        --wd-arrow-height: 32px;
    }
    .woocommerce-product-gallery .wd-nav-arrows .wd-arrow-inner {
        opacity: .7;
        box-shadow: 0 1px 6px rgba(0,0,0,.12) !important;
    }
    .woocommerce-product-gallery .wd-btn-arrow.wd-prev { left: 4px; }
    .woocommerce-product-gallery .wd-btn-arrow.wd-next { right: 4px; }

    /* Fleche desactivee sur la premiere image : on la retire */
    .woocommerce-product-gallery .wd-btn-arrow[aria-disabled="true"] {
        opacity: 0;
        pointer-events: none;
    }
}


/* ============================================================
   16. FILTRES BOUTIQUE
   ============================================================ */
form.wd-product-filters {
    --wd-form-brd-color: #ebe4d8 !important;
    --wd-form-brd-radius: 10px !important;
    --wd-form-height: 46px !important;
    --wd-form-bg: #ffffff !important;
    --wd-gap-lg: 12px !important;
    row-gap: 12px !important;
}
form.wd-product-filters .wd-pf-title {
    height: 46px !important;
    padding-inline: 16px 40px !important;
    border: 1px solid #ebe4d8 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(33, 93, 96, 0.05);
    transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
form.wd-product-filters .wd-pf-title .title-text {
    color: var(--fc-teal) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
}
form.wd-product-filters .wd-pf-results {
    color: var(--fc-teal) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
form.wd-product-filters .wd-pf-title::after {
    color: var(--fc-teal) !important;
    font-size: 13px !important;
    inset-inline-end: 15px !important;
    transition: transform .25s ease;
}
form.wd-product-filters .wd-pf-title:hover {
    border-color: var(--fc-teal) !important;
    background-color: #f7fbfa !important;
    box-shadow: 0 2px 8px rgba(33, 93, 96, 0.10);
}
form.wd-product-filters .wd-opened .wd-pf-title,
form.wd-product-filters .wd-pf-title[aria-expanded="true"] {
    border-color: var(--fc-teal) !important;
    background-color: #f0f7f6 !important;
}
form.wd-product-filters .wd-opened .wd-pf-title::after { transform: rotate(180deg); }
form.wd-product-filters .wd-pf-checkboxes:has(input:checked) .wd-pf-title {
    border-color: var(--fc-teal) !important;
    background-color: #f0f7f6 !important;
}
form.wd-product-filters .wd-pf-dropdown {
    border: 1px solid #ebe4d8 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(33, 93, 96, 0.12) !important;
    padding: 8px !important;
    margin-top: 6px !important;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
form.wd-product-filters .wd-pf-dropdown::-webkit-scrollbar { width: 6px; }
form.wd-product-filters .wd-pf-dropdown::-webkit-scrollbar-thumb {
    background: #cddedb;
    border-radius: 3px;
}
form.wd-product-filters .wd-pf-dropdown li a,
form.wd-product-filters .wd-pf-dropdown li label {
    display: block;
    padding: 9px 12px !important;
    border-radius: 7px;
    color: #3d4a4a !important;
    font-size: 14px !important;
    transition: background-color .2s ease, color .2s ease;
}
form.wd-product-filters .wd-pf-dropdown li a:hover,
form.wd-product-filters .wd-pf-dropdown li label:hover {
    background-color: #f0f7f6 !important;
    color: var(--fc-teal) !important;
}
form.wd-product-filters .wd-pf-dropdown li a.wd-active,
form.wd-product-filters .wd-pf-dropdown li.chosen > a,
form.wd-product-filters .wd-pf-dropdown li:has(input:checked) label {
    background-color: #e6f1ef !important;
    color: var(--fc-teal) !important;
    font-weight: 600 !important;
}
form.wd-product-filters input[type="checkbox"],
form.wd-product-filters input[type="radio"] {
    accent-color: var(--fc-teal) !important;
    width: 16px;
    height: 16px;
}
form.wd-product-filters .ui-slider .ui-slider-range,
form.wd-product-filters .price_slider .ui-slider-range {
    background-color: var(--fc-teal) !important;
}
form.wd-product-filters .ui-slider .ui-slider-handle,
form.wd-product-filters .price_slider .ui-slider-handle {
    background-color: var(--fc-teal) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25) !important;
}
form.wd-product-filters .price_label,
form.wd-product-filters .price_slider_amount .price_label {
    color: var(--fc-teal) !important;
    font-weight: 600 !important;
}
form.wd-product-filters a.wp-block-wd-button,
form.wd-product-filters .wp-block-wd-button.btn,
form.wd-product-filters button[type="submit"],
form.wd-product-filters .wd-pf-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 14px !important;
    background-color: #215d60 /* teal : l orange reste reserve a l achat */ !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 13px 26px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(33, 93, 96, 0.28);
    transition: background-color .25s ease, transform .15s ease, box-shadow .25s ease;
}
form.wd-product-filters a.wp-block-wd-button:hover,
form.wd-product-filters .wp-block-wd-button.btn:hover,
form.wd-product-filters button[type="submit"]:hover,
form.wd-product-filters .wd-pf-btn:hover {
    background-color: #184a4c !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(33, 93, 96, 0.38);
}
form.wd-product-filters .wd-pf-reset,
form.wd-product-filters a.reset_variations {
    color: var(--fc-teal) !important;
    font-size: 13px !important;
    text-decoration: underline;
}
.wd-sidebar .widget_block > .wp-block-heading {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    color: var(--fc-teal);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.wd-sidebar .widget_block:has(> .wp-block-heading) {
    padding-bottom: 12px;
    margin-bottom: 14px;
}


/* ============================================================
   16 bis. BOUTIQUE — GRILLE PRODUITS
   Les règles du bouton panier et de son affichage permanent
   ont été retirées en v9 : le thème reprend la main.
   Les règles .wd-product-stock ont été retirées en v11 : elles
   affichaient un texte vert et un point vert qui entraient en
   conflit avec la pastille de la section 51.
   ============================================================ */
.wd-products .wd-product {
    border: 1px solid rgba(33, 93, 96, .10) !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(26, 58, 58, .06) !important;
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
}
.wd-products .wd-product:hover {
    transform: translateY(-4px);
    border-color: rgba(225, 119, 49, .35) !important;
    box-shadow: 0 12px 28px rgba(26, 58, 58, .12) !important;
}
.wd-products .wd-product:focus-within {
    border-color: var(--fc-orange) !important;
    box-shadow: 0 0 0 3px rgba(225, 119, 49, .18) !important;
}
.wd-products.wd-grid-g {
    gap: 20px !important;
}
.wd-products .wd-product-thumb {
    border-radius: 12px !important;
    overflow: clip !important;
    background-color: #fbfbfa;
}
.wd-products .wd-product-thumb img,
.wd-products .wd-product-grid-slide {
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.wd-products .wd-product:hover .wd-product-thumb img,
.wd-products .wd-product:hover .wd-product-grid-slide {
    transform: scale(1.045);
}
.wd-products .wd-product .wd-product-cats {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a9a99 !important;
}
.wd-products .wd-product .wd-entities-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}
.wd-products .wd-product .wd-entities-title a {
    transition: color .2s ease;
}
.wd-products .wd-product:hover .wd-entities-title a {
    color: var(--fc-orange) !important;
}
.wd-products .wd-product .product-labels .product-label {
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(26, 58, 58, .14);
}
.wd-products .price > span[aria-hidden="true"]:not([class]) {
    font-size: 0;
    margin: 0 2px;
}
.wd-products .price > span[aria-hidden="true"]:not([class])::after {
    content: "à";
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: #6b8385;
}


/* ============================================================
   17. MOBILE — SURCHARGES GÉNÉRALES
   ============================================================ */
@media (max-width: 767px) {
    .price {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        font-size: 16px;
        line-height: 1.3;
        white-space: normal !important;
        overflow: visible !important;
    }
    .products li.product .price,
    .wd-products .product .price {
        font-size: 14px !important;
        width: 100%;
    }
    .price del,
    .price ins {
        display: block !important;
        width: 100%;
    }
    .price del .amount,
    .price del bdi {
        text-decoration: line-through;
        font-weight: 500 !important;
    }
    .woocommerce-account .u-columns.col2-set {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 25px !important;
        margin: 20px auto !important;
    }
    .woocommerce-account h2 { font-size: 20px !important; }
    .fc-signup__lead  { display: none; }
    .fc-signup__title { font-size: 21px !important; }
    .fc-signup__box   { padding: 14px 16px; }
    .fc-signup__note  { font-size: 13px; }
    .fc-signup__btn {
        display: block;
        width: 100%;
        padding: 15px 0;
        margin-top: 16px;
    }
    body .woocommerce-checkout #payment {
        padding: 20px 15px !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        width: calc(100% + 40px) !important;
    }
    body .woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 12px !important; }
    body .woocommerce-checkout #payment ul.payment_methods li label {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 18px 15px 18px 50px !important;
        font-size: 15px !important;
    }
    body .woocommerce-checkout #payment ul.payment_methods li label img,
    .custom-osb-logo {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        margin-top: 8px !important;
        max-height: 20px !important;
    }
    body .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
        left: 15px !important;
        top: 20px !important;
    }
    body .woocommerce-checkout #payment div.payment_box {
        padding: 0px 15px 15px 50px !important;
        font-size: 13px !important;
    }
    body .woocommerce-checkout #payment ul.payment_methods li:hover {
        border-color: #e2e8f0 !important;
        background-color: white !important;
    }
    body .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
        border-color: var(--fc-orange) !important;
        background-color: #fff9f5 !important;
    }
    #place_order {
        padding: 16px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }
    .woocommerce-cart .cart_totals tr.shipping,
    .woocommerce-checkout #order_review tr.shipping {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px 0 !important;
        width: 100% !important;
    }
    .woocommerce-cart .cart_totals tr.shipping th,
    .woocommerce-checkout #order_review tr.shipping th {
        width: 100% !important;
        font-weight: bold !important;
        margin-bottom: 6px !important;
        border: none !important;
        padding: 0 !important;
    }
    .woocommerce-cart .cart_totals tr.shipping td,
    .woocommerce-checkout #order_review tr.shipping td {
        width: 100% !important;
        text-align: left !important;
        border: none !important;
        padding: 0 !important;
    }
    .woocommerce-cart .cart_totals tr.shipping li,
    .woocommerce-checkout #order_review tr.shipping li {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 4px !important;
    }
    .woocommerce-cart .cart_totals tr.shipping .amount,
    .woocommerce-checkout #order_review tr.shipping .amount {
        white-space: nowrap !important;
        display: inline-block !important;
        font-weight: bold !important;
    }
    .woocommerce-cart .product-subtotal del,
    .woocommerce-checkout .product-total del {
        margin-right: 8px !important;
        opacity: 0.5;
    }
    form.wd-product-filters .wd-pf-title {
        height: 44px !important;
        padding-inline: 14px 34px !important;
    }
    form.wd-product-filters .wd-pf-title .title-text { font-size: 12px !important; }
    form.wd-product-filters a.wp-block-wd-button,
    form.wd-product-filters button[type="submit"],
    form.wd-product-filters .wd-pf-btn {
        width: 100% !important;
    }
}


/* ============================================================
   17 bis. TAP DES ICÔNES DU MENU MOBILE
   ============================================================ */
@media (max-width: 767px) {
    .wd-toolbar .wd-toolbar-item,
    .wd-tools-element,
    .wd-burger-icon,
    .wd-nav-mobile a {
        -webkit-tap-highlight-color: rgba(255,126,41,.25);
        transition: color .12s ease, background-color .12s ease;
    }
    .wd-toolbar .wd-toolbar-item:active .wd-tools-icon::before,
    .wd-toolbar .wd-toolbar-item.wd-tap-active .wd-tools-icon::before,
    .wd-tools-element:active .wd-tools-icon::before,
    .wd-tools-element.wd-tap-active .wd-tools-icon::before,
    .wd-burger-icon:active,
    .wd-burger-icon.wd-tap-active {
        color: #ff7e29 !important;
    }
    .wd-nav-mobile a:active,
    .wd-nav-mobile a.wd-tap-active {
        color: #ff7e29 !important;
        background-color: rgba(29,109,111,.10) !important;
    }
}


/* ============================================================
   18. DARK MODE NEUTRALISÉ SUR LES ARTICLES
   ============================================================ */
@media (prefers-color-scheme: dark) {
    .fenuaclick-article { color: #333 !important; }
    .fenuaclick-article .norm-badge {
        background: #f9f9f9 !important;
        border-color: #e0e0e0 !important;
        color: #666 !important;
    }
    .fenuaclick-article .norm-badge svg { color: var(--fc-teal) !important; }
    .fenuaclick-article .norm-badge-alert {
        background: #fdf2f2 !important;
        border-color: #fbd5d5 !important;
        color: #d32f2f !important;
    }
    .fenuaclick-article .section-title { color: var(--fc-teal) !important; }
    .fenuaclick-article .section-subtitle { color: #666 !important; }
    .fenuaclick-article .card {
        background: #fff !important;
        border-color: #eee !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    }
    .fenuaclick-article .card h4,
    .fenuaclick-article .card h4 svg { color: var(--fc-teal) !important; }
    .fenuaclick-article .collapsible-section {
        background: #fff !important;
        border-color: #eee !important;
    }
    .fenuaclick-article .accordion-btn {
        background: #fafafa !important;
        color: var(--fc-teal) !important;
    }
    .fenuaclick-article .accordion-btn:hover { background: #f0f0f0 !important; }
    .fenuaclick-article .collapsible-inner {
        border-color: #f9f9f9 !important;
        color: #333 !important;
    }
    .fenuaclick-article .expertise-box { background: #fff !important; }
    .fenuaclick-article .footer-text,
    .fenuaclick-article .footer-note {
        color: var(--fc-teal) !important;
        border-color: #eee !important;
    }
    .fenuaclick-article td { border-color: #f5f5f5 !important; color: #333 !important; }
    .fenuaclick-article td:first-child { color: var(--fc-orange) !important; }
    .fenuaclick-article .faq-question,
    .fenuaclick-article .faq-q { color: var(--fc-orange) !important; }
    .fenuaclick-article .faq-answer,
    .fenuaclick-article .faq-a { color: #555 !important; }
}


/* ============================================================
   19. PAGE DE COMMANDE REÇUE (WooCommerce)
   ============================================================ */
p.woocommerce-thankyou-order-received {
    position: relative;
    max-width: 620px;
    margin: 0 auto 34px !important;
    padding: 26px 24px 24px !important;
    background: #f2f9f7 !important;
    border: 1px solid #cfe6df !important;
    border-radius: 14px !important;
    text-align: center;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--fc-teal) !important;
    line-height: 1.4 !important;
}
p.woocommerce-thankyou-order-received::before {
    content: "";
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fa87b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 12.5 11 15.5 16 9'/%3E%3C/svg%3E");
}
ul.woocommerce-order-overview {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
    margin: 0 0 34px !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}
ul.woocommerce-order-overview li {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin: 0 !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(33, 93, 96, .10) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(26, 58, 58, .05);
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a9a99 !important;
    text-align: left !important;
    float: none !important;
    width: auto !important;
    border-right: 1px solid rgba(33, 93, 96, .10) !important;
}
ul.woocommerce-order-overview li strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fc-teal) !important;
}
ul.woocommerce-order-overview li.woocommerce-order-overview__total strong,
ul.woocommerce-order-overview li.woocommerce-order-overview__total strong .amount {
    color: var(--fc-orange) !important;
}
h2.woocommerce-order-details__title,
h2.woocommerce-column__title,
h2.wc-bacs-bank-details-heading {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--fc-teal) !important;
    margin: 0 0 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e7efee !important;
}
.wd-el-tp-order-details .elementor-widget-container,
.wd-el-tp-customer-details .elementor-widget-container,
.wd-el-tp-payment-instructions .elementor-widget-container {
    background: #ffffff;
    border: 1px solid rgba(33, 93, 96, .10);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(26, 58, 58, .05);
}
table.woocommerce-table--order-details {
    width: 100%;
    border: none !important;
    margin: 0 !important;
}
table.woocommerce-table--order-details th,
table.woocommerce-table--order-details td {
    border: none !important;
    border-bottom: 1px solid #f0f3f2 !important;
    padding: 13px 0 !important;
    vertical-align: top;
}
table.woocommerce-table--order-details thead th {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a9a99 !important;
    border-bottom: 1px solid #e7efee !important;
    padding-bottom: 10px !important;
}
table.woocommerce-table--order-details td {
    text-align: right;
    font-weight: 600;
    color: var(--fc-ink) !important;
}
table.woocommerce-table--order-details td.product-name,
table.woocommerce-table--order-details tfoot th {
    text-align: left;
    font-weight: 600 !important;
    color: var(--fc-teal) !important;
}
table.woocommerce-table--order-details .wc-item-meta,
table.woocommerce-table--order-details .wc-item-meta li,
table.woocommerce-table--order-details .wc-item-meta p {
    display: inline;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #7c8a89 !important;
    margin: 0 !important;
    list-style: none;
}
table.woocommerce-table--order-details .wc-item-meta {
    display: block;
    margin-top: 5px !important;
}
table.woocommerce-table--order-details .wc-item-meta-label {
    font-weight: 600 !important;
    color: #7c8a89 !important;
}
table.woocommerce-table--order-details tr:has(th.order-actions--heading) {
    display: none !important;
}
table.woocommerce-table--order-details tfoot tr:not(:has(.woocommerce-Price-amount)) + tr th,
table.woocommerce-table--order-details tfoot tr:not(:has(.woocommerce-Price-amount)) + tr td {
    border-bottom: none !important;
    border-top: 2px solid #e7efee !important;
    padding-top: 16px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
}
table.woocommerce-table--order-details tfoot tr:not(:has(.woocommerce-Price-amount)) + tr td,
table.woocommerce-table--order-details tfoot tr:not(:has(.woocommerce-Price-amount)) + tr td .amount {
    color: var(--fc-orange) !important;
}
.woocommerce-customer-details address {
    border: none !important;
    padding: 0 !important;
    font-style: normal;
    line-height: 1.7;
    color: var(--fc-ink) !important;
}
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
    margin: 6px 0 0 !important;
    color: #7c8a89 !important;
}
ul.wc-bacs-bank-details.order_details {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}
ul.wc-bacs-bank-details.order_details li {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    border: none !important;
    border-bottom: 1px solid #f0f3f2 !important;
    font-size: 14px !important;
    text-align: left !important;
    color: #7c8a89 !important;
    list-style: none !important;
}
ul.wc-bacs-bank-details.order_details li:last-child {
    border-bottom: none !important;
}
ul.wc-bacs-bank-details.order_details li strong {
    display: inline !important;
    margin: 0 !important;
    color: var(--fc-teal) !important;
    text-align: right;
    word-break: break-word;
}
h3.wc-bacs-bank-details-account-name {
    font-size: 15px !important;
    color: var(--fc-orange) !important;
    margin: 0 0 8px !important;
}


/* ============================================================
   19 bis. MOBILE — PAGE DE COMMANDE REÇUE
   ============================================================ */
@media (max-width: 767px) {
    p.woocommerce-thankyou-order-received {
        font-size: 17px !important;
        padding: 22px 18px 20px !important;
    }
    ul.woocommerce-order-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }
    ul.woocommerce-order-overview li { padding: 13px 14px !important; }
    ul.woocommerce-order-overview li strong { font-size: 15px !important; }
    .wd-el-tp-order-details .elementor-widget-container,
    .wd-el-tp-customer-details .elementor-widget-container,
    .wd-el-tp-payment-instructions .elementor-widget-container {
        padding: 18px 16px;
        border-radius: 12px;
    }
    table.woocommerce-table--order-details th,
    table.woocommerce-table--order-details td {
        padding: 11px 0 !important;
        font-size: 14px !important;
    }
    table.woocommerce-table--order-details tfoot tr:not(:has(.woocommerce-Price-amount)) + tr th,
    table.woocommerce-table--order-details tfoot tr:not(:has(.woocommerce-Price-amount)) + tr td {
        font-size: 17px !important;
    }
    ul.wc-bacs-bank-details.order_details li {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 3px;
    }
    ul.wc-bacs-bank-details.order_details li strong { text-align: left; }
}


/* ============================================================
   20. MOBILE — FICHE PRODUIT
   Les surcharges du bouton panier ont été retirées en v9.
   ============================================================ */
@media (max-width: 767px) {
    .single-product .wd-single-title h1.product_title {
        font-size: 22px;
        line-height: 1.25;
    }
    .single-product .wd-single-price .price {
        font-size: 28px !important;
    }
    .single-product .e-con:has(> .wd-single-price) {
        padding: 15px;
        border-radius: 14px;
    }
    body.single-product .elementor-widget-countdown .elementor-countdown-wrapper {
        gap: 6px !important;
        padding: 11px 12px 10px;
    }
    body.single-product .elementor-widget-countdown .elementor-countdown-item {
        padding: 7px 2px 6px;
    }
    body.single-product .elementor-widget-countdown .elementor-countdown-digits {
        font-size: 20px;
    }
    body.single-product .elementor-widget-countdown .elementor-countdown-label {
        font-size: 9px;
        letter-spacing: .04em;
    }
    .single-product .wd-single-add-cart form.cart {
        gap: 10px;
    }
    .single-product .wd-single-short-desc .simple-desc .item > svg,
    .single-product .wd-single-short-desc .simple-desc .item::before {
        width: 30px;
        height: 30px;
        padding: 7px;
        margin-right: 10px;
    }
    .single-product .wd-single-short-desc .simple-desc .item::before {
        background-size: 16px 16px;
    }
    .single-product .wd-single-tabs .wd-nav-tabs {
        gap: 5px 18px;
    }
    .single-product .wd-single-tabs .wd-nav-tabs > li > a.wd-nav-link {
        font-size: 12px;
        letter-spacing: .05em;
        padding-bottom: 12px;
    }
    .single-product .wd-single-gallery .wd-gallery-images .wd-carousel-item img {
        border-radius: 10px;
    }
}

@media (max-width: 379px) {
    .single-product .wd-single-add-cart form.cart .quantity {
        width: 100%;
        flex: 1 1 100%;
    }
}


/* ============================================================
   22. FICHE PRODUIT — DESCRIPTIF LONG
   ============================================================ */
.single-product .fenuaclick-article .collapsible-inner > p,
.single-product .fenuaclick-article .collapsible-inner > ul,
.single-product .fenuaclick-article .collapsible-inner > ol,
.single-product .fenuaclick-article > p,
.single-product .fenuaclick-article .section-subtitle {
    max-width: 70ch;
}
.single-product .fenuaclick-article .section-subtitle,
.single-product .fenuaclick-article .footer-text {
    margin-inline: auto;
}
.single-product .fenuaclick-article .footer-text {
    max-width: 70ch;
}
.single-product .fenuaclick-article .accordion-btn {
    border-radius: 10px;
    transition: background-color .2s ease, border-radius .2s ease;
}
.single-product .fenuaclick-article .accordion-btn[aria-expanded="true"] {
    border-radius: 10px 10px 0 0;
}
.single-product .fenuaclick-article .card {
    transition: box-shadow .25s ease, border-left-color .25s ease;
}
.single-product .fenuaclick-article .card:hover {
    box-shadow: 0 8px 24px rgba(33, 93, 96, .12);
}


/* ============================================================
   22 bis. MOBILE — DESCRIPTIF LONG
   ============================================================ */
@media (max-width: 767px) {
    .single-product .fenuaclick-article .collapsible-inner > p,
    .single-product .fenuaclick-article .collapsible-inner > ul,
    .single-product .fenuaclick-article .collapsible-inner > ol,
    .single-product .fenuaclick-article > p,
    .single-product .fenuaclick-article .section-subtitle,
    .single-product .fenuaclick-article .footer-text {
        max-width: none;
    }
}


/* ============================================================
   23. MOBILE — GRILLE BOUTIQUE
   Les surcharges du bouton panier ont été retirées en v9.
   ============================================================ */
@media (max-width: 767px) {
    .wd-products.wd-grid-g { gap: 12px !important; }
    .wd-products .wd-product {
        border-radius: 12px !important;
    }
    .wd-products .wd-product:hover {
        transform: none;
        box-shadow: 0 1px 3px rgba(26, 58, 58, .06) !important;
        border-color: rgba(33, 93, 96, .10) !important;
    }
    .wd-products .wd-product:hover .wd-product-thumb img,
    .wd-products .wd-product:hover .wd-product-grid-slide {
        transform: none;
    }
    .wd-products .wd-product:active {
        transform: scale(.985);
        transition: transform .1s ease;
    }
    .wd-products .wd-product .wd-entities-title { font-size: 13.5px !important; }
    .wd-products .wd-product .wd-product-cats   { font-size: 10px !important; }
}



/* ============================================================
   25. MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .wd-products .wd-product,
    .wd-products .wd-product-thumb img,
    .wd-products .wd-product-grid-slide {
        transition: none !important;
    }
    .wd-products .wd-product:hover { transform: none; }
    .wd-products .wd-product:hover .wd-product-thumb img,
    .wd-products .wd-product:hover .wd-product-grid-slide { transform: none; }
}



/* ============================================================
   28. FILET DE SÉCURITÉ — BOUTONS WOODMART
   ============================================================ */
.btn.btn-style-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: var(--btn-default-bgcolor);
    color: var(--btn-default-color);
}
.btn.btn-style-default:hover {
    background-color: var(--btn-default-bgcolor-hover, var(--btn-default-bgcolor));
    color: var(--btn-default-color-hover, var(--btn-default-color));
}


/* ============================================================
   29. CARROUSEL D'ARTICLES — TITRES DU DESIGN « MASK »
   ============================================================ */
html .wd-posts .post.wd-post.blog-design-mask .wd-entities-title,
html .wd-posts .post.wd-post.blog-design-mask .wd-entities-title a {
    color: #fff;
}
html .wd-posts .post.wd-post.blog-design-mask:hover .wd-entities-title,
html .wd-posts .post.wd-post.blog-design-mask .wd-entities-title a:hover {
    color: var(--fc-orange);
}


/* ============================================================
   31. TABLETTE — BLOC DE RÉASSURANCE
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
    .home .e-con:has(> .e-con-inner > .elementor-widget .wd-info-box) > .e-con-inner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    .home .e-con:has(> .e-con-inner > .elementor-widget .wd-info-box) > .e-con-inner > .elementor-widget-spacer {
        display: none !important;
    }
    .home .e-con:has(> .e-con-inner > .elementor-widget .wd-info-box) > .e-con-inner > .elementor-widget:has(.wd-info-box) {
        flex: 1 1 calc(33.333% - 11px) !important;
        width: auto !important;
        max-width: none !important;
    }
}


/* ============================================================
   34. ACCUEIL — TITRES DE SECTION, TAILLE DES h4
   Depuis le passage du hero en h1, le titre du hero porte lui
   aussi wd-fontsize-l. La règle de taille nomme donc h4
   explicitement, sinon elle rapetisse le hero avec les titres
   de section.
   ============================================================ */
.home .elementor-widget-wd_title:has(.woodmart-title-container.wd-fontsize-l) .title-wrapper .title-subtitle {
    font-size: 13px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    line-height: 1.4;
    margin-bottom: 16px !important;
}
.home .elementor-widget-wd_title:has(.woodmart-title-container.wd-fontsize-l) .woodmart-title-container.title.wd-fontsize-l {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.home .elementor-widget-wd_title h4.woodmart-title-container.wd-fontsize-l {
    font-size: clamp(22px, 3.4vw, 34px) !important;
}



/* ============================================================
   36 bis. FICHE PRODUIT — PANNEAU RÉCAPITULATIF FBT
   Woodmart « Frequently bought together », colonne de droite.
   ============================================================ */

/* 1. Carte conteneur principale */
.wd-fbt-form {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 16px rgba(33, 93, 96, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* 2. Chaque bloc produit sélectionnable */
.wd-fbt-form .wd-fbt-item {
    background: #ffffff !important;
    border: 1.5px solid #eef2f6 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

/* Effet quand le produit est actif / coché */
.wd-fbt-form .wd-fbt-item:has(input:checked) {
    border-color: var(--fc-orange-line) !important;
    background: #fffcf9 !important;
}

/* 3. Ligne de titre + checkbox */
.wd-fbt-form .wd-fbt-item > label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--fc-teal) !important;
    cursor: pointer !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
}

.wd-fbt-form .wd-fbt-item input[type="checkbox"] {
    accent-color: var(--fc-orange) !important;
    width: 17px !important;
    height: 17px !important;
    margin-top: 1px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

/* 4. Affichage du prix unitaire par ligne */
.wd-fbt-form .wd-fbt-item .price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--fc-orange) !important;
    padding-left: 27px !important; /* aligne avec le texte après la case */
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}

.wd-fbt-form .wd-fbt-item .price del {
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* 5. Sélecteur de déclinaisons / variations */
.wd-fbt-form .wd-fbt-item select {
    width: calc(100% - 27px) !important;
    margin-left: 27px !important;
    margin-top: 8px !important;
    height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    padding: 0 10px !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.wd-fbt-form .wd-fbt-item select:focus {
    border-color: var(--fc-teal) !important;
    box-shadow: 0 0 0 2px rgba(33, 93, 96, 0.12) !important;
}

/* 6. Section total et compteur */
.wd-fbt-form .wd-fbt-total {
    margin-top: 8px !important;
    padding-top: 14px !important;
    border-top: 2px dashed #e2e8f0 !important;
    text-align: center !important;
}

.wd-fbt-form .wd-fbt-total .price {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--fc-orange) !important;
    justify-content: center !important;
    margin-bottom: 2px !important;
}

.wd-fbt-form .wd-fbt-total .wd-fbt-count {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-bottom: 12px !important;
}

/* 7. Bouton CTA « Ajouter au panier » du panneau FBT
   Conservé : il s'agit du bouton du module Frequently Bought
   Together, distinct du bouton panier standard. */
.wd-fbt-form .wd-fbt-purchase-btn,
.wd-fbt-form button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    background-color: var(--fc-orange) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(225, 119, 49, 0.28) !important;
    transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease !important;
}

.wd-fbt-form .wd-fbt-purchase-btn:hover,
.wd-fbt-form button[type="submit"]:hover {
    background-color: var(--fc-orange-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(225, 119, 49, 0.38) !important;
}


/* ============================================================
   37. ACCUEIL — BOUTON DU HERO « DÉCOUVRIR LA BOUTIQUE »
   Orange par défaut : c'est le seul appel à l'action de la
   section, et l'orange est la seule couleur d'accent sur le
   fond teal. Pas de filter: brightness au survol, il fait
   virer l'orange au jaune.
   ============================================================ */
.elementor-element-4cef3c1 a.elementor-button {
    border-radius: 10px !important;
    background-color: var(--fc-orange) !important;
    border-color: var(--fc-orange) !important;
    box-shadow: 0 6px 16px rgba(26, 58, 58, 0.22) !important;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.elementor-element-4cef3c1 a.elementor-button:hover {
    transform: translateY(-2px);
    background-color: var(--fc-orange-dark) !important;
    border-color: var(--fc-orange-dark) !important;
    box-shadow: 0 10px 22px rgba(26, 58, 58, 0.28) !important;
}


/* ============================================================
   38. ACCUEIL — FOND DU HERO ET CADRE DE LA GRILLE
   Le hero passait par linear-gradient(82deg, teal 30%, orange
   74%) : entre 30 % et 74 % les deux couleurs se neutralisaient
   en un brun terne. Remplacé par un aplat teal ; la vague du
   hero est conservée. La grille produits perd son cadre blanc.
   ============================================================ */
.home .elementor-element-6292bc83:not(.elementor-motion-effects-element-type-background) {
    background-image: none !important;
    background-color: var(--fc-teal) !important;
}
.home .elementor-element-3999abcb > .elementor-widget-container {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}


/* ============================================================
   39. CONNEXION — « SE SOUVENIR DE MOI » ET MOT DE PASSE OUBLIÉ
   ============================================================ */
.login-form-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px;
}
.login-form-footer br {
    display: none !important;
}


/* ============================================================
   41. BADGE reCAPTCHA MASQUÉ
   Le masquage impose d'afficher la mention légale de Google à
   proximité des formulaires protégés, via .fc-recaptcha-notice.
   ============================================================ */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.fc-recaptcha-notice {
    font-size: 11px;
    line-height: 1.45;
    color: #7c8a89;
    margin: 10px 0 0;
}
.fc-recaptcha-notice a {
    color: inherit;
    text-decoration: underline;
}


/* ============================================================
   42. PANIER LATÉRAL — BOUTONS DU BAS
   Les deux boutons se touchaient et collaient au bord bas de
   l'ecran sur iPhone.
   ============================================================ */
.widget_shopping_cart_content .buttons {
    display: flex;
    gap: 10px;
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
.widget_shopping_cart_content .buttons > a {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    min-height: 50px;
    padding: 12px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.15;
    letter-spacing: .02em;
}
@media (max-width: 400px) {
    .widget_shopping_cart_content .buttons > a {
        font-size: 12px;
        padding: 12px 6px;
    }
}


/* ============================================================
   43. TEXTE DE PRÉSENTATION DES CATÉGORIES
   Utilise par le bloc .fc-catintro colle dans le champ
   Description de chaque categorie produit.
   ============================================================ */
.fc-catintro {
    max-width: 900px;
    margin: 0 auto 34px;
    color: #5d7375;
    font-size: 15px;
    line-height: 1.7;
}
.fc-catintro p { margin: 0 0 14px; }
.fc-catintro__lead {
    font-size: 16.5px;
    line-height: 1.65;
    color: #3f5658;
}
.fc-catintro h2 {
    margin: 26px 0 12px;
    color: var(--fc-teal);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
}
.fc-catintro h3 {
    margin: 0 0 6px;
    color: var(--fc-teal);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.fc-catintro__uses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px 26px;
    margin: 0 0 6px;
    padding: 18px 0;
    border-top: 1px solid #e6eeed;
    border-bottom: 1px solid #e6eeed;
}
.fc-catintro__uses p { margin: 0; font-size: 14.5px; }
.fc-catintro__help {
    margin-top: 22px;
    padding: 14px 18px;
    background: #fdf3ec;
    border: 1px solid #f6e0cd;
    border-radius: 12px;
    font-size: 14.5px;
    color: #6a4a32;
}
.fc-catintro__help a {
    color: var(--fc-teal);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 767px) {
    .fc-catintro { font-size: 14.5px; }
    .fc-catintro__lead { font-size: 15.5px; }
    .fc-catintro h2 { font-size: 17px; margin-top: 22px; }
    .fc-catintro__uses { gap: 16px; }
}


/* ============================================================
   44. DESCRIPTION PRODUIT REPLIABLE SUR TÉLÉPHONE
   Le script pose .fc-fold autour du contenu de #tab-description
   et n'ajoute le bouton que si le texte depasse le seuil.
   Le degrade est cale sur le fond creme du site.
   ============================================================ */
@media (max-width: 767px) {
    .fc-fold {
        position: relative;
        overflow: hidden;
        transition: max-height .35s ease;
    }
    .fc-fold.is-folded { max-height: 320px; }
    .fc-fold.is-folded::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 90px;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(250,248,245,0) 0%, #FAF8F5 92%);
    }

    .fc-fold-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 46px;
        margin: 12px 0 4px;
        padding: 12px 18px;
        background: #ffffff;
        border: 1px solid var(--fc-teal);
        border-radius: 10px;
        color: var(--fc-teal);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .02em;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease;
    }
    .fc-fold-btn:hover,
    .fc-fold-btn:focus-visible {
        background: var(--fc-teal);
        color: #ffffff;
    }
    .fc-fold-btn svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .3s ease;
    }
    .fc-fold-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
    .fc-fold, .fc-fold-btn svg { transition: none; }
}


/* ============================================================
   45. PASTILLES DE CARACTÉRISTIQUES — GRILLE SUR TÉLÉPHONE
   Cible .norm-container dans .fenuaclick-article.
   Le prefixe html sert a passer devant le <style> du widget,
   qui est charge apres ce fichier.
   ============================================================ */
@media (max-width: 767px) {
    html .fenuaclick-article .norm-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
        justify-content: stretch;
        margin: 0 0 16px;
    }
    html .fenuaclick-article .norm-badge,
    html .fenuaclick-article .norm-badge-pro {
        width: 100%;
        margin: 0 !important;
        padding: 10px 12px !important;
        gap: 7px;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        font-size: 10.5px !important;
        line-height: 1.25;
        letter-spacing: .02em;
        border-radius: 12px;
    }
    html .fenuaclick-article .norm-badge svg,
    html .fenuaclick-article .norm-badge-pro svg {
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
    }
}
@media (max-width: 360px) {
    html .fenuaclick-article .norm-container {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   46. FIL D'ARIANE YOAST
   Structure : .wd-breadcrumbs > .yoast-breadcrumb
   Le dernier element porte la classe breadcrumb_last.
   ============================================================ */
.wd-breadcrumbs .yoast-breadcrumb {
    font-size: 13px;
    line-height: 1.6;
    color: #7c8a89;
}

/* Les niveaux cliquables */
.wd-breadcrumbs .yoast-breadcrumb a {
    color: #7c8a89;
    text-decoration: none;
    transition: color .2s ease;
}
.wd-breadcrumbs .yoast-breadcrumb a:hover {
    color: var(--fc-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* La page en cours */
.wd-breadcrumbs .breadcrumb_last {
    color: var(--fc-teal);
    font-weight: 700;
}

/* MOBILE : une seule ligne, coupee par des points de suspension.
   Le display:block sur .wd-breadcrumbs est indispensable :
   en inline-flex, text-overflow ne s'applique pas. */
@media (max-width: 767px) {
    .wd-breadcrumbs {
        display: block !important;
        max-width: 100%;
    }
    .wd-breadcrumbs .yoast-breadcrumb,
    .wd-breadcrumbs .yoast-breadcrumb > span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px !important;
        line-height: 1.6;
    }
    .wd-breadcrumbs .breadcrumb_last { font-weight: 600; }
}


/* ============================================================
   49. MOTIF KORU DANS LE FOOTER
   ::before est deja pris par la vague, section 4.
   On utilise donc ::after.
   ============================================================ */
footer.wd-footer {
    position: relative;
    isolation: isolate;
}
footer.wd-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .07;
    background-image: url('https://fenuaclick.com/wp-content/uploads/2026/09/fenuaclick-motif-koru.svg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
footer.wd-footer > * {
    position: relative;
    z-index: 1;
}


/* ============================================================
   50. MOTIF KORU DANS LE BANDEAU DE TITRE
   S'applique a toutes les pages qui affichent .wd-page-title.
   ============================================================ */
.wd-page-title {
    position: relative;
    isolation: isolate;
}
.wd-page-title::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .07;
    background-image: url('https://fenuaclick.com/wp-content/uploads/2026/09/fenuaclick-motif-koru.svg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.wd-page-title > .container {
    position: relative;
    z-index: 2;
}


/* ============================================================
   51. DISPONIBILITE
   Une seule pastille pour tout le site : fiche produit, boutique,
   accueil, resultats de recherche.
   Trois familles de selecteurs, parce que le balisage differe :
     .woocommerce p.stock.in-stock  fiche produit
     .wd-product-stock.in-stock     elements WoodMart
     p.fc-loop-stock                notre mention de boucle,
       posee par fc_stock_faible_boucle dans functions.php. Hors
       boutique, par exemple dans un carrousel de l'accueil, il
       n'y a pas de conteneur .woocommerce : sans cette famille,
       la pastille s'affiche en texte brut.
   Etat normal  : teal, aucun mouvement.
   Etat faible  : classe fc-low, orange et pastille clignotante.

   La classe fc-low vient du PHP, section 18 de functions.php.
   Aucun script, donc rien a declarer dans les exceptions WP Rocket.

   Prerequis : les trois regles .wd-product-stock de la section
   16 bis doivent avoir ete supprimees.
   ============================================================ */
.woocommerce p.stock.in-stock,
.wd-product-stock.in-stock,
p.fc-loop-stock {
    --c: #215d60;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 16px !important;
    padding: 7px 14px 7px 12px !important;
    border: 1px solid rgba(33, 93, 96, .3) !important;
    border-radius: 999px !important;
    background: rgba(33, 93, 96, .07) !important;
    color: var(--c) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    white-space: nowrap;
}

/* Sur la fiche produit, tout est aligne a gauche */
.single-product .woocommerce p.stock.in-stock,
.single-product .wd-product-stock.in-stock,
.single-product p.fc-loop-stock {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Notre pastille */
.woocommerce p.stock.in-stock::before,
.wd-product-stock.in-stock::before,
p.fc-loop-stock::before {
    content: "" !important;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c) !important;
}

/* WoodMart enveloppe parfois le texte dans un <span> qu'il habille
   lui meme, avec sa propre pastille. On le remet a plat. */
.woocommerce p.stock.in-stock > *,
.wd-product-stock.in-stock > *,
p.fc-loop-stock > * {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}
.woocommerce p.stock.in-stock > *::before,
.woocommerce p.stock.in-stock > *::after,
.wd-product-stock.in-stock > *::before,
.wd-product-stock.in-stock > *::after,
p.fc-loop-stock > *::before,
p.fc-loop-stock > *::after {
    content: none !important;
    display: none !important;
}

/* ---- Stock faible ---- */
.woocommerce p.stock.in-stock.fc-low,
.wd-product-stock.in-stock.fc-low,
p.fc-loop-stock.fc-low {
    --c: #E17731;
    border-color: rgba(225, 119, 49, .35) !important;
    background: rgba(225, 119, 49, .08) !important;
    color: #b4551a !important;
    animation: fcStockBand 1.6s ease-in-out infinite;
}
.woocommerce p.stock.in-stock.fc-low::before,
.wd-product-stock.in-stock.fc-low::before,
p.fc-loop-stock.fc-low::before {
    animation: fcStockDot 1.6s ease-in-out infinite;
}

@keyframes fcStockDot {
    0%, 100% { transform: scale(1);   opacity: 1;  box-shadow: 0 0 0 0 rgba(225, 119, 49, .6); }
    50%      { transform: scale(1.5); opacity: .3; box-shadow: 0 0 0 7px rgba(225, 119, 49, 0); }
}
@keyframes fcStockBand {
    0%, 100% { border-color: rgba(225, 119, 49, .35) !important; }
    50%      { border-color: rgba(225, 119, 49, .9)  !important; }
}

/* La barre d'achat collante est trop etroite : le texte s'y empile
   sur plusieurs lignes. */
.wd-sticky-btn-cart p.stock { display: none !important; }

/* La mention de stock des vignettes vient de fc_stock_faible_boucle.
   On masque celle du theme pour eviter le doublon. Le p et le .stock
   sont indispensables : sans eux, la regle de WoodMart gagne. */
.wd-products .wd-product p.wd-product-stock.stock { display: none !important; }

@media (max-width: 767px) {
    .woocommerce p.stock.in-stock,
    .wd-product-stock.in-stock,
    p.fc-loop-stock {
        padding: 6px 11px !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        /* Sur une vignette etroite, le nowrap fait deborder la
           pastille hors de la carte. On autorise le retour a la
           ligne, le texte reste centre dans la pastille. */
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce p.stock.in-stock.fc-low,
    .woocommerce p.stock.in-stock.fc-low::before,
    .wd-product-stock.in-stock.fc-low,
    .wd-product-stock.in-stock.fc-low::before,
    p.fc-loop-stock.fc-low,
    p.fc-loop-stock.fc-low::before { animation: none; }
}

/* ============================================================
   52. ICONES DES CATEGORIES DANS LE MENU

   Six icones au trait, 20 px, posees devant le nom de chaque
   categorie dans le menu principal et le menu mobile.

   Technique : masque CSS plutot qu'image de fond. L'icone est
   peinte avec background-color: currentColor, donc elle prend
   exactement la couleur du lien et suit ses etats, survol et
   page courante comprises. Aucun fichier a televerser, donc
   pas besoin de l'extension Safe SVG.

   Le ciblage se fait sur l'adresse du lien. Si tu renommes le
   permalien d'une categorie, pense a mettre a jour la ligne
   correspondante ici.

   Pour ajouter une categorie : duplique un bloc, change
   l'adresse dans le selecteur et le trace dans le masque.
   ============================================================ */

/* ---------- Socle commun ---------- */
.wd-nav a[href*="/categorie-produit/"],
.wd-nav-mobile a[href*="/categorie-produit/"] {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
}

.wd-nav a[href*="/categorie-produit/"]::before,
.wd-nav-mobile a[href*="/categorie-produit/"]::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    transition: opacity .2s ease;
    opacity: .85;
}
.wd-nav a[href*="/categorie-produit/"]:hover::before,
.wd-nav-mobile a[href*="/categorie-produit/"]:hover::before {
    opacity: 1;
}

/* ---------- GPS : balise de localisation ---------- */
.wd-nav a[href*="/categorie-produit/gps/"]::before,
.wd-nav-mobile a[href*="/categorie-produit/gps/"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5c4.2-4.4 6.5-7.8 6.5-11a6.5 6.5 0 0 0-13 0c0 3.2 2.3 6.6 6.5 11z'/%3E%3Ccircle cx='12' cy='10.3' r='2.4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5c4.2-4.4 6.5-7.8 6.5-11a6.5 6.5 0 0 0-13 0c0 3.2 2.3 6.6 6.5 11z'/%3E%3Ccircle cx='12' cy='10.3' r='2.4'/%3E%3C/svg%3E");
}

/* ---------- Dashcam : camera de pare brise ---------- */
.wd-nav a[href*="/categorie-produit/dashcam/"]::before,
.wd-nav-mobile a[href*="/categorie-produit/dashcam/"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 3.2h6.8'/%3E%3Cpath d='M12 3.2v2.4'/%3E%3Crect x='3.2' y='5.6' width='17.6' height='12' rx='2.4'/%3E%3Ccircle cx='9.2' cy='11.6' r='3.1'/%3E%3Ccircle cx='9.2' cy='11.6' r='1.1'/%3E%3Crect x='14.8' y='9.2' width='4.4' height='4.8' rx='.8'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 3.2h6.8'/%3E%3Cpath d='M12 3.2v2.4'/%3E%3Crect x='3.2' y='5.6' width='17.6' height='12' rx='2.4'/%3E%3Ccircle cx='9.2' cy='11.6' r='3.1'/%3E%3Ccircle cx='9.2' cy='11.6' r='1.1'/%3E%3Crect x='14.8' y='9.2' width='4.4' height='4.8' rx='.8'/%3E%3C/svg%3E");
}

/* ---------- High-tech et multimedia : smartphone ---------- */
.wd-nav a[href*="/categorie-produit/high-tech-et-multimedia/"]::before,
.wd-nav-mobile a[href*="/categorie-produit/high-tech-et-multimedia/"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.4' y='3.2' width='9.2' height='17.6' rx='2.4'/%3E%3Cpath d='M10.4 6h3.2'/%3E%3Cpath d='M10.4 18.4h3.2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.4' y='3.2' width='9.2' height='17.6' rx='2.4'/%3E%3Cpath d='M10.4 6h3.2'/%3E%3Cpath d='M10.4 18.4h3.2'/%3E%3C/svg%3E");
}

/* ---------- Auto et moto : vehicule ---------- */
.wd-nav a[href*="/categorie-produit/auto-et-moto/"]::before,
.wd-nav-mobile a[href*="/categorie-produit/auto-et-moto/"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17v-3.1c0-.6.4-1.2 1-1.4l2.6-.9 2-2.9c.4-.5 1-.8 1.6-.8h5.1c.6 0 1.2.3 1.6.8l2.4 3.4 1.8.5c.6.2 1 .8 1 1.4V17'/%3E%3Cpath d='M9.4 17h5.2'/%3E%3Ccircle cx='6.8' cy='17.1' r='1.9'/%3E%3Ccircle cx='17.2' cy='17.1' r='1.9'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17v-3.1c0-.6.4-1.2 1-1.4l2.6-.9 2-2.9c.4-.5 1-.8 1.6-.8h5.1c.6 0 1.2.3 1.6.8l2.4 3.4 1.8.5c.6.2 1 .8 1 1.4V17'/%3E%3Cpath d='M9.4 17h5.2'/%3E%3Ccircle cx='6.8' cy='17.1' r='1.9'/%3E%3Ccircle cx='17.2' cy='17.1' r='1.9'/%3E%3C/svg%3E");
}

/* ---------- Animaux : empreinte ---------- */
.wd-nav a[href*="/categorie-produit/animaux/"]::before,
.wd-nav-mobile a[href*="/categorie-produit/animaux/"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='7' cy='8.4' rx='1.9' ry='2.4'/%3E%3Cellipse cx='12' cy='6.6' rx='1.9' ry='2.5'/%3E%3Cellipse cx='17' cy='8.4' rx='1.9' ry='2.4'/%3E%3Cpath d='M12 12.2c2.6 0 4.6 1.9 4.6 4.1 0 2-1.5 3.2-3.2 3.2-.6 0-1-.2-1.4-.2s-.8.2-1.4.2c-1.7 0-3.2-1.2-3.2-3.2 0-2.2 2-4.1 4.6-4.1z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='7' cy='8.4' rx='1.9' ry='2.4'/%3E%3Cellipse cx='12' cy='6.6' rx='1.9' ry='2.5'/%3E%3Cellipse cx='17' cy='8.4' rx='1.9' ry='2.4'/%3E%3Cpath d='M12 12.2c2.6 0 4.6 1.9 4.6 4.1 0 2-1.5 3.2-3.2 3.2-.6 0-1-.2-1.4-.2s-.8.2-1.4.2c-1.7 0-3.2-1.2-3.2-3.2 0-2.2 2-4.1 4.6-4.1z'/%3E%3C/svg%3E");
}

/* ---------- Divers : grille ---------- */
.wd-nav a[href*="/categorie-produit/divers/"]::before,
.wd-nav-mobile a[href*="/categorie-produit/divers/"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.8'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.8'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.8'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.8'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.8'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.8'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.8'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.8'/%3E%3C/svg%3E");
}

/* ---------- Mobile : icone un peu plus grande, le doigt vise moins bien ---------- */
@media (max-width: 767px) {
    .wd-nav-mobile a[href*="/categorie-produit/"]::before {
        width: 22px;
        height: 22px;
    }
}


/* ============================================================
   53. ICONES DES GUIDES DANS LE MENU

   Meme principe que la section 52 : masque CSS, donc l'icone
   prend la couleur du lien et suit le survol et l'etat actif.
   Rien a televerser, rien a declarer dans WP Rocket.

   Le ciblage se fait sur un fragment d'adresse. Les fragments
   choisis sont assez longs pour ne pas se chevaucher : par
   exemple dashcam-pourquoi et non dashcam, qui attraperait
   aussi la categorie Dashcam de la section 52.

   L'entree parente CONSEILS ET GUIDES n'a volontairement pas
   d'icone : les trois entrees de premier niveau du menu sont
   en capitales et sans icone, en ajouter une seule casserait
   l'alignement de la barre.
   ============================================================ */

/* ---------- Socle commun ---------- */
.wd-nav a[href*="dashcam-pourquoi"],
.wd-nav a[href*="proteger-ses-proches"],
.wd-nav a[href*="quel-forfait-ou-carte-sim"],
.wd-nav a[href*="intercom-moto-rouler"],
.wd-nav a[href*="certifications-indices-ip"],
.wd-nav a[href*="quel-traceur-gps-choisir"],
.wd-nav a[href*="comment-passer-une-commande"],
.wd-nav-mobile a[href*="dashcam-pourquoi"],
.wd-nav-mobile a[href*="proteger-ses-proches"],
.wd-nav-mobile a[href*="quel-forfait-ou-carte-sim"],
.wd-nav-mobile a[href*="intercom-moto-rouler"],
.wd-nav-mobile a[href*="certifications-indices-ip"],
.wd-nav-mobile a[href*="quel-traceur-gps-choisir"],
.wd-nav-mobile a[href*="comment-passer-une-commande"] {
    display: inline-flex !important;
    align-items: flex-start;
    gap: 9px;
}

.wd-nav a[href*="dashcam-pourquoi"]::before,
.wd-nav a[href*="proteger-ses-proches"]::before,
.wd-nav a[href*="quel-forfait-ou-carte-sim"]::before,
.wd-nav a[href*="intercom-moto-rouler"]::before,
.wd-nav a[href*="certifications-indices-ip"]::before,
.wd-nav a[href*="quel-traceur-gps-choisir"]::before,
.wd-nav a[href*="comment-passer-une-commande"]::before,
.wd-nav-mobile a[href*="dashcam-pourquoi"]::before,
.wd-nav-mobile a[href*="proteger-ses-proches"]::before,
.wd-nav-mobile a[href*="quel-forfait-ou-carte-sim"]::before,
.wd-nav-mobile a[href*="intercom-moto-rouler"]::before,
.wd-nav-mobile a[href*="certifications-indices-ip"]::before,
.wd-nav-mobile a[href*="quel-traceur-gps-choisir"]::before,
.wd-nav-mobile a[href*="comment-passer-une-commande"]::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    /* Les titres d'articles passent souvent sur deux lignes :
       on cale l'icone sur la premiere ligne, pas au milieu. */
    margin-top: 1px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    opacity: .85;
    transition: opacity .2s ease;
}
.wd-nav a[href*="dashcam-pourquoi"]:hover::before,
.wd-nav a[href*="proteger-ses-proches"]:hover::before,
.wd-nav a[href*="quel-forfait-ou-carte-sim"]:hover::before,
.wd-nav a[href*="intercom-moto-rouler"]:hover::before,
.wd-nav a[href*="certifications-indices-ip"]:hover::before,
.wd-nav a[href*="quel-traceur-gps-choisir"]:hover::before,
.wd-nav a[href*="comment-passer-une-commande"]:hover::before,
.wd-nav-mobile a[href*="dashcam-pourquoi"]:hover::before,
.wd-nav-mobile a[href*="proteger-ses-proches"]:hover::before,
.wd-nav-mobile a[href*="quel-forfait-ou-carte-sim"]:hover::before,
.wd-nav-mobile a[href*="intercom-moto-rouler"]:hover::before,
.wd-nav-mobile a[href*="certifications-indices-ip"]:hover::before,
.wd-nav-mobile a[href*="quel-traceur-gps-choisir"]:hover::before,
.wd-nav-mobile a[href*="comment-passer-une-commande"]:hover::before {
    opacity: 1;
}

/* ---------- Dashcam : pourquoi s'equiper. Camera et pare-brise ---------- */
.wd-nav a[href*="dashcam-pourquoi"]::before,
.wd-nav-mobile a[href*="dashcam-pourquoi"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7.5' width='13' height='9' rx='2.2'/%3E%3Ccircle cx='9' cy='12' r='2.5'/%3E%3Cpath d='M15.5 11l5-2.5v7l-5-2.5z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7.5' width='13' height='9' rx='2.2'/%3E%3Ccircle cx='9' cy='12' r='2.5'/%3E%3Cpath d='M15.5 11l5-2.5v7l-5-2.5z'/%3E%3C/svg%3E");
}

/* ---------- Proteger ses proches. Bouclier et personne ---------- */
.wd-nav a[href*="proteger-ses-proches"]::before,
.wd-nav-mobile a[href*="proteger-ses-proches"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7 2.6v5.4c0 4.3-2.9 8.1-7 10.4-4.1-2.3-7-6.1-7-10.4V5.4z'/%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3Cpath d='M8.6 16.4a3.8 3.8 0 0 1 6.8 0'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7 2.6v5.4c0 4.3-2.9 8.1-7 10.4-4.1-2.3-7-6.1-7-10.4V5.4z'/%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3Cpath d='M8.6 16.4a3.8 3.8 0 0 1 6.8 0'/%3E%3C/svg%3E");
}

/* ---------- Forfait et carte SIM ---------- */
.wd-nav a[href*="quel-forfait-ou-carte-sim"]::before,
.wd-nav-mobile a[href*="quel-forfait-ou-carte-sim"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h8.3L18.5 8v12.5h-13z'/%3E%3Crect x='8.5' y='11' width='7' height='6' rx='1.4'/%3E%3Cpath d='M12 11v6M8.5 14h7'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h8.3L18.5 8v12.5h-13z'/%3E%3Crect x='8.5' y='11' width='7' height='6' rx='1.4'/%3E%3Cpath d='M12 11v6M8.5 14h7'/%3E%3C/svg%3E");
}

/* ---------- Intercom moto. Casque et ondes ---------- */
.wd-nav a[href*="intercom-moto-rouler"]::before,
.wd-nav-mobile a[href*="intercom-moto-rouler"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13a7.5 7.5 0 0 1 15 0v3.5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4.3 13.8h9.4'/%3E%3Cpath d='M20.6 8.4a4.4 4.4 0 0 1 0 5.2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13a7.5 7.5 0 0 1 15 0v3.5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4.3 13.8h9.4'/%3E%3Cpath d='M20.6 8.4a4.4 4.4 0 0 1 0 5.2'/%3E%3C/svg%3E");
}

/* ---------- Certifications et indices IP. Goutte et bouclier ---------- */
.wd-nav a[href*="certifications-indices-ip"]::before,
.wd-nav-mobile a[href*="certifications-indices-ip"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7 2.6v5.4c0 4.3-2.9 8.1-7 10.4-4.1-2.3-7-6.1-7-10.4V5.4z'/%3E%3Cpath d='M12 8.2c1.6 1.9 2.6 3.3 2.6 4.6a2.6 2.6 0 0 1-5.2 0c0-1.3 1-2.7 2.6-4.6z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7 2.6v5.4c0 4.3-2.9 8.1-7 10.4-4.1-2.3-7-6.1-7-10.4V5.4z'/%3E%3Cpath d='M12 8.2c1.6 1.9 2.6 3.3 2.6 4.6a2.6 2.6 0 0 1-5.2 0c0-1.3 1-2.7 2.6-4.6z'/%3E%3C/svg%3E");
}

/* ---------- Quel traceur GPS pour son vehicule. Vehicule et signal ---------- */
.wd-nav a[href*="quel-traceur-gps-choisir"]::before,
.wd-nav-mobile a[href*="quel-traceur-gps-choisir"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18.5v-2.8l1.8-3.6A1.8 1.8 0 0 1 6.4 11h7.9a1.8 1.8 0 0 1 1.6 1.1l1.8 3.6v2.8'/%3E%3Cpath d='M3 15.7h14.7'/%3E%3Ccircle cx='6.8' cy='18.7' r='1.5'/%3E%3Ccircle cx='13.9' cy='18.7' r='1.5'/%3E%3Cpath d='M17.6 7.6a4 4 0 0 1 0-4.2M20.4 9a7 7 0 0 1 0-7'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18.5v-2.8l1.8-3.6A1.8 1.8 0 0 1 6.4 11h7.9a1.8 1.8 0 0 1 1.6 1.1l1.8 3.6v2.8'/%3E%3Cpath d='M3 15.7h14.7'/%3E%3Ccircle cx='6.8' cy='18.7' r='1.5'/%3E%3Ccircle cx='13.9' cy='18.7' r='1.5'/%3E%3Cpath d='M17.6 7.6a4 4 0 0 1 0-4.2M20.4 9a7 7 0 0 1 0-7'/%3E%3C/svg%3E");
}

/* ---------- Comment passer une commande. Panier et validation ---------- */
.wd-nav a[href*="comment-passer-une-commande"]::before,
.wd-nav-mobile a[href*="comment-passer-une-commande"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 3.5h2.6l2.3 10.4a1.7 1.7 0 0 0 1.7 1.3h7.5a1.7 1.7 0 0 0 1.7-1.3l1.3-5.8H6.1'/%3E%3Ccircle cx='9.4' cy='19.4' r='1.4'/%3E%3Ccircle cx='16.6' cy='19.4' r='1.4'/%3E%3Cpath d='M10.6 10.6l1.7 1.7 3.4-3.6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 3.5h2.6l2.3 10.4a1.7 1.7 0 0 0 1.7 1.3h7.5a1.7 1.7 0 0 0 1.7-1.3l1.3-5.8H6.1'/%3E%3Ccircle cx='9.4' cy='19.4' r='1.4'/%3E%3Ccircle cx='16.6' cy='19.4' r='1.4'/%3E%3Cpath d='M10.6 10.6l1.7 1.7 3.4-3.6'/%3E%3C/svg%3E");
}


/* ============================================================
   54. PANNEAU DEROULANT DES GUIDES
   Le panneau etait trop etroit : les titres passaient sur trois
   lignes et les icones se perdaient. On elargit, on pose les
   icones dans une pastille et on survole la ligne entiere.
   ============================================================ */
.wd-nav .wd-dropdown-menu {
    min-width: 340px;
    padding: 10px !important;
}

.wd-nav .wd-dropdown-menu li > a {
    padding: 9px 12px !important;
    border-radius: 10px;
    line-height: 1.35;
    transition: background-color .2s ease, color .2s ease;
}
.wd-nav .wd-dropdown-menu li > a:hover {
    background-color: rgba(33, 93, 96, .07);
    color: var(--fc-orange) !important;
}

/* Pastille autour de l'icone */
.wd-nav .wd-dropdown-menu a[href*="dashcam-pourquoi"]::before,
.wd-nav .wd-dropdown-menu a[href*="proteger-ses-proches"]::before,
.wd-nav .wd-dropdown-menu a[href*="quel-forfait-ou-carte-sim"]::before,
.wd-nav .wd-dropdown-menu a[href*="intercom-moto-rouler"]::before,
.wd-nav .wd-dropdown-menu a[href*="certifications-indices-ip"]::before,
.wd-nav .wd-dropdown-menu a[href*="quel-traceur-gps-choisir"]::before,
.wd-nav .wd-dropdown-menu a[href*="comment-passer-une-commande"]::before,
.wd-nav .wd-dropdown-menu a[href*="/categorie-produit/"]::before {
    width: 32px;
    height: 32px;
    margin-top: 0;
    padding: 7px;
    box-sizing: border-box;
    background-color: var(--fc-teal);
    border-radius: 9px;
    box-shadow: inset 0 0 0 32px rgba(33, 93, 96, .08);
    opacity: 1;
}


/* ============================================================
   55. PAGE DE TRANSITION AVANT LE PAIEMENT
   Point de terminaison order-pay de WooCommerce. Le client n'y
   reste qu'une seconde en temps normal, mais elle devient tres
   visible sur une connexion lente ou si le JavaScript tarde.
   Objectif : rassurer, pas decorer.
   ============================================================ */
.woocommerce-order-pay .woocommerce {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    border: 1px solid #e4eded;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(33, 93, 96, .06);
}

/* Recapitulatif : plus de puces, une ligne par information */
.woocommerce-order-pay ul.order_details {
    list-style: none !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
}
.woocommerce-order-pay ul.order_details li {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f3f2 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #7c8a89 !important;
    list-style: none !important;
}
.woocommerce-order-pay ul.order_details li:last-child {
    border-bottom: 0 !important;
}
.woocommerce-order-pay ul.order_details li strong {
    display: inline !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--fc-teal) !important;
    text-align: right;
}
.woocommerce-order-pay ul.order_details li.total strong {
    color: var(--fc-orange) !important;
    font-size: 18px !important;
}

/* Boutons : l'orange est l'action, le reste est secondaire */
.woocommerce-order-pay form .button,
.woocommerce-order-pay input[type="submit"] {
    display: block !important;
    width: 100% !important;
    min-height: 52px;
    margin: 18px 0 10px !important;
    padding: 14px 22px !important;
    background-color: var(--fc-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(225, 119, 49, .28);
    transition: background-color .2s ease, transform .15s ease;
}
.woocommerce-order-pay form .button:hover,
.woocommerce-order-pay input[type="submit"]:hover {
    background-color: var(--fc-orange-dark) !important;
    transform: translateY(-1px);
}

/* Le lien d'annulation redevient un lien */
.woocommerce-order-pay a.button.cancel,
.woocommerce-order-pay a[href*="panier"].button {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #7c8a89 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: 0 !important;
}
.woocommerce-order-pay a.button.cancel:hover {
    color: var(--fc-teal) !important;
    transform: none;
}

@media (max-width: 767px) {
    .woocommerce-order-pay .woocommerce {
        padding: 18px;
        border-radius: 14px;
    }
    .woocommerce-order-pay ul.order_details li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .woocommerce-order-pay ul.order_details li strong { text-align: left; }
}


/* ============================================================
   56. TUNNEL DE COMMANDE — FORMULAIRE
   WoodMart dimensionne ses champs par variables CSS. On les
   redefinit sur la page de commande plutot que de forcer les
   proprietes une par une : tout reste coherent si le theme
   evolue, et aucune surcharge n'est necessaire.
   ============================================================ */
.woocommerce-checkout form.checkout,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
    --wd-form-height: 50px;
    --wd-form-brd-width: 1px;
    --wd-form-brd-radius: 10px;
    --wd-form-brd-color: #e4eded;
    --wd-form-bg: #ffffff;
}

/* Libelles : plus discrets que les valeurs saisies */
.woocommerce-checkout .form-row > label {
    display: block;
    margin-bottom: 7px;
    color: #5d7375;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.3;
}
.woocommerce-checkout .form-row .required,
.woocommerce-checkout .form-row abbr.required {
    color: var(--fc-orange);
    text-decoration: none;
    border: 0;
    margin-left: 2px;
}

/* Champs : respiration reguliere entre les lignes */
.woocommerce-checkout .form-row {
    margin-bottom: 16px;
    padding: 0;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    font-size: 15px;
    color: var(--fc-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--fc-teal) !important;
    box-shadow: 0 0 0 3px rgba(33, 93, 96, .10);
    outline: none;
}
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
    color: #9aabaa;
}

/* Champ en erreur : rouge franc, pas un simple contour gris */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: #d4442a !important;
    background-color: #fdf7f6;
}

/* Titres de section */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e7efee;
    color: var(--fc-teal);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: none;
}

/* Case de creation de compte */
.woocommerce-checkout .woocommerce-account-fields label,
.woocommerce-checkout .create-account label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--fc-ink);
    line-height: 1.45;
}
.woocommerce-checkout .woocommerce-account-fields input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--fc-teal);
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .woocommerce-checkout form.checkout,
    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review {
        --wd-form-height: 48px;
    }
    .woocommerce-checkout .form-row { margin-bottom: 14px; }
    .woocommerce-checkout #customer_details h3,
    .woocommerce-checkout #order_review_heading { font-size: 16px; }
}


/* ============================================================
   57. TUNNEL DE COMMANDE — REASSURANCE ET INCITATIONS
   Balisage pose par la section 19 de functions.php.
   ============================================================ */

/* ---- Rappel de la livraison offerte ---- */
tr.fc-ligne-port td {
    padding: 12px 0 14px !important;
    border: 0 !important;
    border-top: 1px solid #f0f3f2 !important;
}
.fc-port-texte {
    display: block;
    margin-bottom: 8px;
    color: var(--fc-orange);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
tr.fc-port-offert .fc-port-texte {
    color: var(--fc-teal);
}
tr.fc-port-offert .fc-port-texte::before {
    content: "✓ ";
    font-weight: 900;
}
.fc-port-jauge {
    display: block;
    height: 6px;
    background: rgba(33, 93, 96, .10);
    border-radius: 999px;
    overflow: hidden;
}
.fc-port-jauge > span {
    display: block;
    height: 100%;
    background: var(--fc-orange);
    border-radius: 999px;
    transition: width .4s ease;
}

/* ---- Date de la prochaine tournee ---- */
tr.fc-ligne-tournee td {
    padding: 10px 0 !important;
    border: 0 !important;
}
.fc-tournee-texte {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5d7375;
    font-size: 13px;
    line-height: 1.4;
}
.fc-tournee-texte::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: var(--fc-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='11' height='9' rx='1.5'/%3E%3Cpath d='M13.5 9h3.4l2.6 2.8V15h-6z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.6'/%3E%3Ccircle cx='16' cy='17.5' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='11' height='9' rx='1.5'/%3E%3Cpath d='M13.5 9h3.4l2.6 2.8V15h-6z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.6'/%3E%3Ccircle cx='16' cy='17.5' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fc-tournee-texte strong {
    color: var(--fc-teal);
    font-weight: 700;
    text-transform: capitalize;
}

/* ---- Reassurance sous le bouton ---- */
.fc-reassure {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f3f2;
}
.fc-reassure__list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.fc-reassure__list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 8px;
    padding: 0;
    color: #5d7375;
    font-size: 13px;
    line-height: 1.45;
}
.fc-reassure__list li::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background-color: var(--fc-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpolyline points='7.5 12.4 10.6 15.5 16.5 8.8'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpolyline points='7.5 12.4 10.6 15.5 16.5 8.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fc-reassure__contact {
    margin: 0;
    padding: 11px 14px;
    background: #f2f8f8;
    border-radius: 10px;
    color: #5d7375;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}
.fc-reassure__contact a {
    color: var(--fc-teal);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .fc-reassure__list li,
    .fc-reassure__contact,
    .fc-tournee-texte { font-size: 12.5px; }
    .fc-port-texte { font-size: 13px; }
}

/* ============================================================
   58. FONDS DE SECTION ET RACCORDS EN COURBE

   Trois classes a poser toi meme sur un conteneur Elementor,
   onglet Avance, champ Classes CSS :

     fc-fond-teal    fond teal plein, motif koru en filigrane,
                     textes en clair
     fc-fond-creme   fond creme discret
     fc-vague        raccord en courbe en bas de la section

   La courbe se decline en deux versions selon la couleur de la
   section qui suit :
     fc-vague          la section suivante est blanche
     fc-vague-creme    la section suivante est en creme

   Rien ne bouge tant que tu n'ajoutes pas la classe. Aucune
   classe WoodMart n'est ciblee, donc les mises a jour du theme
   ne peuvent pas casser cette section.

   Le motif est integre au CSS, il n'y a aucun fichier a
   televerser ni aucune adresse de mediatheque a maintenir.

   Trois tailles d'ecran sont prevues : ordinateur au dessus de
   1025 px, tablette de 768 a 1024 px, telephone en dessous de
   768 px.
   ============================================================ */

:root {
    --fc-teal: #215d60;
    --fc-teal-fonce: #215d60;   /* meme teal que le header et le footer (avant : #113c3e) */
    --fc-teal-clair: #8ed0cd;
    --fc-teal-texte: #bcdbd9;
    --fc-creme: #FAF8F5;
    --fc-koru: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20600%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cg%20stroke-width%3D%2226%22%3E%20%20%3Cpath%20d%3D%22M-80%20470%20C%20120%20470%20200%20330%20330%20330%20C%20470%20330%20520%20470%20430%20520%20C%20370%20552%20300%20500%20330%20450%22%2F%3E%20%20%3Cpath%20d%3D%22M1280%20130%20C%201080%20130%201000%20270%20870%20270%20C%20730%20270%20680%20130%20770%2080%20C%20830%2048%20900%20100%20870%20150%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20stroke-width%3D%2216%22%3E%20%20%3Cpath%20d%3D%22M-60%20300%20C%20160%20300%20240%20150%20420%20150%20C%20560%20150%20640%20250%20600%20320%22%2F%3E%20%20%3Cpath%20d%3D%22M1260%20420%20C%201040%20420%20960%20560%20780%20560%20C%20640%20560%20560%20470%20600%20400%22%2F%3E%20%20%3Cpath%20d%3D%22M120%20600%20C%20180%20470%20320%20430%20470%20470%20C%20590%20502%20640%20600%20600%20640%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20stroke-width%3D%229%22%20opacity%3D%22.9%22%3E%20%20%3Cpath%20d%3D%22M-40%20380%20C%20200%20380%20260%20230%20430%20235%22%2F%3E%20%20%3Cpath%20d%3D%22M1240%20220%20C%201000%20220%20940%20370%20770%20365%22%2F%3E%20%20%3Cpath%20d%3D%22M660%20-40%20C%20700%2090%20830%20130%20940%20100%22%2F%3E%20%20%3Cpath%20d%3D%22M540%20640%20C%20500%20510%20370%20470%20260%20500%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20stroke-width%3D%225%22%20opacity%3D%22.75%22%3E%20%20%3Cpath%20d%3D%22M-20%20520%20C%20150%20520%20210%20400%20360%20405%22%2F%3E%20%20%3Cpath%20d%3D%22M1220%2080%20C%201050%2080%20990%20200%20840%20195%22%2F%3E%20%20%3Cpath%20d%3D%22M980%20470%20C%201050%20400%201160%20400%201230%20470%22%2F%3E%20%20%3Cpath%20d%3D%22M-30%20180%20C%2040%20110%20150%20110%20220%20180%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    --fc-vague-blanc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2060%20L0%2032%20C%20220%20-2%20430%20-2%20640%2022%20C%20850%2046%201010%2046%201200%2018%20L1200%2060%20Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
    --fc-vague-creme: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2060%20L0%2032%20C%20220%20-2%20430%20-2%20640%2022%20C%20850%2046%201010%2046%201200%2018%20L1200%2060%20Z%22%20fill%3D%22%23FAF8F5%22%2F%3E%3C%2Fsvg%3E");
}

/* ---------- 58.1 Fond teal plein ---------- */

.fc-fond-teal {
    position: relative !important;
    background-color: var(--fc-teal-fonce) !important;
    background-image: none !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* le motif koru, pose derriere le contenu */
.fc-fond-teal::before {
    content: "";
    position: absolute;
    inset: -12% -6%;
    background-image: var(--fc-koru);
    background-size: cover;
    background-position: center;
    opacity: .10;
    pointer-events: none;
    z-index: 0;
}

/* tout le contenu repasse au dessus du motif */
.fc-fond-teal > * {
    position: relative;
    z-index: 1;
}

/* couleurs de texte a l'interieur */
.fc-fond-teal,
.fc-fond-teal p,
.fc-fond-teal li,
.fc-fond-teal .elementor-widget-text-editor,
.fc-fond-teal .elementor-icon-list-text {
    color: var(--fc-teal-texte) !important;
}

.fc-fond-teal h1,
.fc-fond-teal h2,
.fc-fond-teal h3,
.fc-fond-teal h4,
.fc-fond-teal h5,
.fc-fond-teal h6,
.fc-fond-teal strong,
.fc-fond-teal b {
    color: #ffffff !important;
}

/* le surtitre, si tu en poses un au dessus du titre */
.fc-fond-teal .fc-surtitre,
.fc-fond-teal .elementor-widget-heading .elementor-heading-title.fc-surtitre {
    color: var(--fc-teal-clair) !important;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
}

/* les icones Elementor suivent la couleur claire */
.fc-fond-teal .elementor-icon svg,
.fc-fond-teal .elementor-icon-list-icon svg {
    stroke: var(--fc-teal-clair) !important;
    fill: none !important;
}
.fc-fond-teal .elementor-icon i,
.fc-fond-teal .elementor-icon-list-icon i {
    color: var(--fc-teal-clair) !important;
}

/* les liens et boutons restent lisibles */
.fc-fond-teal a:not(.btn):not(.elementor-button) {
    color: #ffffff !important;
    text-decoration-color: rgba(255,255,255,.45);
}

/* ---------- 58.2 Cartes translucides dans le bloc teal ---------- */

.fc-fond-teal .fc-carte {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 14px !important;
    height: 100%;
}

/* ---------- 58.3 Fond creme ---------- */

.fc-fond-creme {
    background-color: var(--fc-creme) !important;
    background-image: none !important;
}

/* ---------- 58.4 Raccord en courbe ---------- */

.fc-vague {
    position: relative !important;
    overflow: hidden !important;
}

.fc-vague::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 62px;
    background-image: var(--fc-vague-blanc);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}

.fc-vague-creme::after {
    background-image: var(--fc-vague-creme);
}

/* la courbe mange le bas de la section, on rend la marge */
.fc-fond-teal.fc-vague {
    padding-bottom: calc(var(--fc-padding-v) + 26px) !important;
}

/* ---------- 58.5 Espacements, les trois tailles d'ecran ---------- */

/* ordinateur */
:root { --fc-padding-v: 72px; }

.fc-fond-teal,
.fc-fond-creme {
    padding-top: var(--fc-padding-v) !important;
    padding-bottom: var(--fc-padding-v) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* tablette */
@media (min-width: 768px) and (max-width: 1024px) {
    :root { --fc-padding-v: 54px; }

    .fc-vague::after { height: 46px; }

    .fc-fond-teal::before { inset: -16% -8%; opacity: .11; }

    .fc-fond-teal,
    .fc-fond-creme {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* telephone */
@media (max-width: 767px) {
    :root { --fc-padding-v: 38px; }

    .fc-vague::after { height: 30px; }

    /* le motif est plus dense sur un ecran etroit, on l'attenue */
    .fc-fond-teal::before { inset: -20% -14%; opacity: .085; }

    .fc-fond-teal,
    .fc-fond-creme {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .fc-fond-teal .fc-carte {
        border-radius: 12px !important;
    }

    /* sur mobile le bloc teal est haut, on resserre les titres */
    .fc-fond-teal h2 { line-height: 1.16 !important; }
}

/* tres petit ecran, on evite que la courbe grignote le texte */
@media (max-width: 400px) {
    .fc-vague::after { height: 24px; }
    .fc-fond-teal.fc-vague { padding-bottom: calc(var(--fc-padding-v) + 16px) !important; }
}

/* ---------- 58.6 Confort et accessibilite ---------- */

/* pas d'effet de parallaxe ni de mouvement ici, mais on protege
   les reglages systeme du visiteur pour la suite */
@media (prefers-reduced-motion: reduce) {
    .fc-fond-teal::before { transition: none !important; }
}

/* impression : le fond teal coute cher en encre, on le neutralise */
@media print {
    .fc-fond-teal { background: #ffffff !important; }
    .fc-fond-teal::before,
    .fc-vague::after { display: none !important; }
    .fc-fond-teal,
    .fc-fond-teal p,
    .fc-fond-teal h2,
    .fc-fond-teal h3 { color: #16302f !important; }
}

/* ============================================================
   59. BANDEAU DE LIVRAISON OFFERTE

   Habille le balisage produit par la section 20 du functions.php.

   Deux etats :
     .fc-jauge             il manque un montant, barre partielle
     .fc-jauge-atteinte    seuil franchi, barre pleine et fond teal

   Deux emplacements, avec des tailles differentes :
     page Panier           bandeau large, au dessus du tableau
     panier lateral        version compacte, dans le tiroir

   Trois tailles d'ecran : ordinateur au dessus de 1025 px,
   tablette de 768 a 1024 px, telephone en dessous de 768 px.
   ============================================================ */

.fc-jauge {
    --fc-j-teal: #215d60;
    --fc-j-pale: #f3f8f7;
    --fc-j-clair: #e7f0ef;
    --fc-j-rail: #dce9e8;
    --fc-j-encre: #16302f;
    --fc-j-douce: #55716f;

    display: block;
    background: var(--fc-j-pale);
    border: 1px solid rgba(33, 93, 96, .13);
    border-radius: 13px;
    padding: 14px 16px;
    margin: 0 0 22px;
    box-sizing: border-box;
}

.fc-jauge-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.4;
    color: var(--fc-j-encre);
}

.fc-jauge-ligne strong {
    font-weight: 700;
    color: var(--fc-j-teal);
    white-space: nowrap;
}

.fc-jauge-icone {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    stroke: var(--fc-j-teal);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- La barre ---------- */

.fc-jauge-rail {
    display: block;
    height: 7px;
    margin-top: 11px;
    border-radius: 99px;
    background: var(--fc-j-rail);
    overflow: hidden;
}

.fc-jauge-remplie {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--fc-j-teal), #3d8b8e);
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Seuil atteint ---------- */

.fc-jauge-atteinte {
    background: var(--fc-j-clair);
    border-color: rgba(33, 93, 96, .26);
}

.fc-jauge-atteinte .fc-jauge-ligne span {
    font-weight: 600;
    color: var(--fc-j-teal);
}

.fc-jauge-atteinte .fc-jauge-remplie {
    background: var(--fc-j-teal);
}

/* ---------- Version compacte dans le panier lateral ---------- */

.widget_shopping_cart .fc-jauge,
.wd-side-hidden .fc-jauge,
.wd-dropdown-cart .fc-jauge,
.cart_dropdown .fc-jauge {
    padding: 11px 12px;
    margin: 0 0 13px;
    border-radius: 11px;
}

.widget_shopping_cart .fc-jauge-ligne,
.wd-side-hidden .fc-jauge-ligne,
.wd-dropdown-cart .fc-jauge-ligne,
.cart_dropdown .fc-jauge-ligne {
    font-size: 12.5px;
    gap: 8px;
}

.widget_shopping_cart .fc-jauge-icone,
.wd-side-hidden .fc-jauge-icone,
.wd-dropdown-cart .fc-jauge-icone,
.cart_dropdown .fc-jauge-icone {
    width: 16px;
    height: 16px;
}

.widget_shopping_cart .fc-jauge-rail,
.wd-side-hidden .fc-jauge-rail,
.wd-dropdown-cart .fc-jauge-rail,
.cart_dropdown .fc-jauge-rail {
    height: 6px;
    margin-top: 9px;
}

/* ---------- Tablette ---------- */

@media (min-width: 768px) and (max-width: 1024px) {

    .fc-jauge {
        padding: 13px 14px;
        margin-bottom: 18px;
    }

    .fc-jauge-ligne {
        font-size: 13.5px;
    }
}

/* ---------- Telephone ---------- */

@media (max-width: 767px) {

    .fc-jauge {
        padding: 12px 13px;
        margin-bottom: 16px;
        border-radius: 12px;
    }

    .fc-jauge-ligne {
        font-size: 13px;
        gap: 9px;
        align-items: flex-start;
    }

    /* l'icone se cale sur la premiere ligne de texte */
    .fc-jauge-icone {
        width: 17px;
        height: 17px;
        margin-top: 2px;
    }

    .fc-jauge-rail {
        height: 6px;
        margin-top: 10px;
    }
}

/* Tres petit ecran : le montant ne doit pas pousser la ligne
   hors de la carte */
@media (max-width: 380px) {

    .fc-jauge {
        padding: 11px 12px;
    }

    .fc-jauge-ligne {
        font-size: 12.5px;
    }
}

/* ---------- Confort ---------- */

@media (prefers-reduced-motion: reduce) {

    .fc-jauge-remplie {
        transition: none;
    }
}

@media print {

    .fc-jauge {
        display: none !important;
    }
}



/* ============================================================
   61. BOUTIQUE, PASTILLES DE CATEGORIES ET CARTES PRODUIT

   Les pastilles viennent de la section 22 du functions.php.

   La grille n'est pas touchee : elle est deja en quatre colonnes
   sur ordinateur et tablette, deux sur telephone, avec un ecart de
   20 px. Ces valeurs sont posees en style direct sur la grille par
   WoodMart, les changer ici demanderait de se battre contre du
   style en ligne. Si tu veux un autre nombre de colonnes, ca se
   regle dans WoodMart, Reglages du theme, Produits.
   ============================================================ */

/* ---------- Les pastilles ---------- */

.fc-pastilles {
    --fc-c-teal: #215d60;
    --fc-c-pale: #f3f8f7;
    --fc-c-ligne: rgba(33, 93, 96, .16);
    --fc-c-douce: #55716f;

    display: block;
    margin: 0 0 22px;
    box-sizing: border-box;
}

.fc-pastilles-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fc-pastilles-liste li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fc-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1.5px solid var(--fc-c-ligne);
    background: #ffffff;
    color: var(--fc-c-teal) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease;
}

.fc-cat:hover,
.fc-cat:focus-visible {
    background: var(--fc-c-pale);
    border-color: var(--fc-c-teal);
}

.fc-cat-nb {
    font-size: 11px;
    font-weight: 700;
    color: var(--fc-c-douce);
    background: var(--fc-c-pale);
    border-radius: 999px;
    padding: 1px 7px;
    min-width: 21px;
    text-align: center;
}

.fc-cat-active {
    background: var(--fc-c-teal);
    border-color: var(--fc-c-teal);
    color: #ffffff !important;
}

.fc-cat-active .fc-cat-nb {
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
}

.fc-cat-active:hover,
.fc-cat-active:focus-visible {
    background: #1a4c4e;
    border-color: #1a4c4e;
}

/* ---------- La categorie sur la carte produit ---------- */

/* WoodMart l'affiche deja, on la rend juste plus lisible et on la
   place franchement au dessus du titre */
.wd-products .wd-product .wd-product-cats {
    font-size: 9.5px !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #215d60 !important;
    opacity: .78;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
}

.wd-products .wd-product .wd-product-cats a {
    color: inherit !important;
    text-decoration: none !important;
}

/* le titre au dessus du prix, un cran plus serre */
.wd-products .wd-product .wd-entities-title {
    line-height: 1.3 !important;
}

/* ---------- Tablette ---------- */

@media (min-width: 768px) and (max-width: 1024px) {

    .fc-pastilles {
        margin-bottom: 18px;
    }

    .fc-cat {
        font-size: 12.5px;
        padding: 7px 13px;
    }
}

/* ---------- Telephone ---------- */

@media (max-width: 767px) {

    .fc-pastilles {
        margin-bottom: 16px;
        /* la liste deborde volontairement, on la fait defiler
           lateralement plutot que de la replier sur six lignes */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .fc-pastilles::-webkit-scrollbar {
        display: none;
    }

    .fc-pastilles-liste {
        flex-wrap: nowrap;
        width: max-content;
        gap: 7px;
    }

    .fc-cat {
        font-size: 12.5px;
        padding: 7px 13px;
        white-space: nowrap;
    }

    .wd-products .wd-product .wd-product-cats {
        font-size: 9px !important;
        letter-spacing: .1em !important;
    }
}

@media print {

    .fc-pastilles {
        display: none !important;
    }
}

/* ============================================================
   62. FICHE PRODUIT

   Ta fiche est un gabarit Elementor compose de widgets WoodMart.
   On s'accroche donc aux classes de widget, qui sont stables d'une
   version a l'autre, plutot qu'a du balisage interne.

   Trois choses ici :
     - l'encadre de date de livraison, qui existe deja
     - les points cles de la description courte
     - les pastilles d'argument, a poser toi meme
   ============================================================ */

/* ---------- L'encadre de date de livraison ---------- */

/* Attention : ton widget HTML produit deja .fc-delivery, qui porte
   .fc-delivery-text a l'interieur. Une regle existante ailleurs
   dans ton CSS pose deja une marge et un filet teal a gauche sur
   .fc-delivery. On complete cette regle plutot que d'en ajouter
   une deuxieme, sinon tu te retrouves avec deux filets. */

.single-product .fc-delivery {
    --fc-d-teal: #215d60;
    --fc-d-pale: #f3f8f7;

    background: var(--fc-d-pale);
    border: 1px solid rgba(33, 93, 96, .13);
    border-left: 3px solid var(--fc-d-teal);
    border-radius: 11px;
    padding: 13px 15px 13px 44px;
    box-sizing: border-box;
    position: relative;
}

/* le petit calendrier, en masque CSS donc aucun fichier a poser */
.single-product .fc-delivery::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 15px;
    width: 19px;
    height: 19px;
    background-color: var(--fc-d-teal);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.4'/%3E%3Cpath d='M3 9.5h18'/%3E%3Cpath d='M8 2.5v4M16 2.5v4'/%3E%3Cpath d='M9.2 14.3l1.9 1.9 3.7-3.9'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.4'/%3E%3Cpath d='M3 9.5h18'/%3E%3Cpath d='M8 2.5v4M16 2.5v4'/%3E%3Cpath d='M9.2 14.3l1.9 1.9 3.7-3.9'/%3E%3C/svg%3E");
}

.fc-delivery-line {
    font-size: 14px;
    font-weight: 600;
    color: #16302f;
    line-height: 1.35;
}

.fc-delivery-line b {
    color: #215d60;
    font-weight: 700;
}

.fc-delivery-note {
    font-size: 12px;
    color: #55716f;
    line-height: 1.4;
    margin-top: 3px;
}

/* ---------- Les points cles de la description courte ---------- */

.elementor-widget-wd_single_product_short_description
.woocommerce-product-details__short-description ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    gap: 10px;
}

.elementor-widget-wd_single_product_short_description
.woocommerce-product-details__short-description ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 0 26px !important;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
}

.elementor-widget-wd_single_product_short_description
.woocommerce-product-details__short-description ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background-color: #215d60;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* la premiere expression de chaque point, celle que tu mets en gras,
   passe en couleur de marque */
.elementor-widget-wd_single_product_short_description
.woocommerce-product-details__short-description ul li strong,
.elementor-widget-wd_single_product_short_description
.woocommerce-product-details__short-description ul li b {
    color: #16302f;
    font-weight: 700;
}

/* ---------- Les pastilles d'argument ---------- */

/* A poser toi meme : un widget Texte dans Elementor, avec la classe
   fc-chips sur le widget, et a l'interieur une suite de balises
   span portant la classe fc-chip. Exemple :

     <span class="fc-chip">Pose pro par PMD</span>
     <span class="fc-chip fc-chip-clair">Garantie 3 mois</span>
     <span class="fc-chip fc-chip-clair">Carte 128 Go incluse</span>

   Pose le au dessus du prix, la ou l'oeil passe en premier. */

.fc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.fc-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: #215d60;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.3;
}

.fc-chip-clair {
    background: #ffffff;
    color: #215d60;
    border: 1px solid rgba(33, 93, 96, .22);
}

.fc-chip-orange {
    background: #e17731;
    color: #ffffff;
}

/* ---------- Le bloc rassurance sous l'achat ---------- */

/* Se pose sur un conteneur Elementor portant la classe
   fc-fond-teal de la section 58. Ici on ne fait qu'habiller la
   liste qui vit a l'interieur. */

.fc-rassurance {
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fc-rassurance li {
    list-style: none;
    margin: 0;
    padding: 0 0 0 30px;
    position: relative;
    font-size: 13px;
    line-height: 1.5;
}

.fc-rassurance li strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 2px;
}

.fc-rassurance li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 19px;
    height: 19px;
    background-color: #8ed0cd;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l7 2.6v5.2c0 4.2-2.9 7.3-7 8.7-4.1-1.4-7-4.5-7-8.7V6.1z'/%3E%3Cpath d='M9.3 12.2l1.9 1.9 3.6-3.8'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l7 2.6v5.2c0 4.2-2.9 7.3-7 8.7-4.1-1.4-7-4.5-7-8.7V6.1z'/%3E%3Cpath d='M9.3 12.2l1.9 1.9 3.6-3.8'/%3E%3C/svg%3E");
}

/* ---------- Tablette ---------- */

@media (min-width: 768px) and (max-width: 1024px) {

    .single-product .fc-delivery {
        padding: 12px 14px 12px 40px;
    }

    .single-product .fc-delivery::before {
        left: 13px;
        top: 14px;
        width: 18px;
        height: 18px;
    }
}

/* ---------- Telephone ---------- */

@media (max-width: 767px) {

    .single-product .fc-delivery {
        padding: 12px 13px 12px 38px;
        border-radius: 10px;
    }

    .single-product .fc-delivery::before {
        left: 12px;
        top: 14px;
        width: 17px;
        height: 17px;
    }

    .fc-delivery-line {
        font-size: 13.5px;
    }

    .fc-delivery-note {
        font-size: 11.5px;
    }

    .elementor-widget-wd_single_product_short_description
    .woocommerce-product-details__short-description ul {
        gap: 9px;
    }

    .elementor-widget-wd_single_product_short_description
    .woocommerce-product-details__short-description ul li {
        font-size: 13.5px;
        padding-left: 24px !important;
    }

    .fc-chip {
        font-size: 10px;
        padding: 5px 10px;
    }
}

/* ============================================================
   65. TYPOGRAPHIE, VARIANTE DE SECOURS

   A n'utiliser que si tu ne veux pas passer par WoodMart,
   Reglages du theme, Typographie.

   Le reglage du theme reste la bonne methode : il survit aux mises
   a jour par construction, il te laisse regler les tailles ecran
   par ecran dans l'interface, et il evite un appel exterieur a
   Google Fonts en plus de celui que le theme fait deja.

   Ce bloc est la pour le cas ou l'interface ne proposerait pas
   Bricolage Grotesque. Il est commente en entier : retire les
   marqueurs de debut et de fin pour l'activer.

   Bricolage Grotesque pour les titres, Karla pour le texte.
   ============================================================ */

/*
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Karla:wght@400;500;600;700&display=swap');

body,
.wd-nav a,
input, select, textarea, button {
    font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.product_title,
.wd-entities-title,
.woocommerce-Price-amount,
.elementor-heading-title {
    font-family: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif !important;
    letter-spacing: -.015em;
    text-wrap: balance;
}
*/


/* ============================================================
   FIN DES SECTIONS 60 A 65
   ============================================================ */



/* ============================================================
   68. SYSTEME DE CARTES DES BLOCS D'ACCUEIL
   Bloc Services (.fc-service) et bloc Reassurance (.fc-quick).

   CETTE SECTION REMPLACE LES SECTIONS 68 ET 81.
   Supprime les deux avant de coller celle ci.

   POURQUOI LA FUSION
   Les deux blocs partageaient le meme systeme, ecrit deux fois :
   meme sur titre encadre de filets, meme grille auto-fit a
   240 px, meme carte blanche a 16 px d'arrondi avec son filet
   orange revele au survol, meme cercle peche de 52 px, meme
   liste depliable par case a cocher masquee, meme comportement
   sur les trois tailles d'ecran. Seuls les prefixes de classe
   changeaient.

   Deux jeux de regles identiques, c'est deux endroits a
   modifier a chaque retouche, et la certitude qu'ils finiront
   par diverger sans que personne ne s'en apercoive.

   Ici chaque selecteur nomme les deux familles. Ce qui est
   commun est ecrit une fois. Ce qui est propre a un bloc reste
   dans son propre sous bloc, clairement etiquete.

   LES DIFFERENCES CONSERVEES, PAS GOMMEES
     • le titre de section s'appelle __title chez Services et
       __maintitle chez Reassurance
     • le titre de carte s'appelle __k chez Services et __title
       chez Reassurance. Attention, __title designe donc deux
       choses selon le bloc : c'est un piege du balisage
       existant, pas une erreur de ma part
     • Services a un chapeau __lead sous le titre, une pastille
       de numero __num, un pied de bloc avec boutons, et des
       lignes en 13,5 px
     • Reassurance a des pastilles __badge, une image de cartes
       de paiement, un lien, et des lignes en 14 px
     • l'icone de ligne est teal chez Services, orange chez
       Reassurance

   RIEN NE CHANGE VISUELLEMENT. Chaque valeur a ete reportee a
   l'identique. Si tu vois une difference apres avoir colle
   cette section, c'est un defaut de ma part : signale le moi
   avec une capture.

   LA SECTION 69, VERSION TEAL, N'EST PAS AFFECTEE : elle cible
   .fc-fond-teal .fc-service, dont les noms de classe sont
   inchanges.

   APRES AVOIR COLLE CETTE SECTION
   Ouvre les deux widgets dans Elementor et supprime le bloc
   <style> que chacun contient, du <style> jusqu'au </style>.
   Garde tout le HTML. Releve fait en direct : les deux widgets
   portent encore leur style embarque, donc les regles
   s'appliquent aujourd'hui en double.

   CORRIGE AU PASSAGE, HERITE DES DEUX SECTIONS
     • Services : __eyebrow declare deux fois sur telephone,
       __title deux fois avec une premiere ligne morte, __lead
       deux fois, un commentaire recopie trois fois
     • Reassurance : line-height pose deux fois dans __eyebrow,
       commentaire recopie deux fois, et surtout la regle qui
       masque les filets du sur titre sur telephone, annoncee
       par le commentaire mais absente du widget
   ============================================================ */

/* ---------- 68.0 Variables et socle ---------- */

.fc-service,
.fc-quick {
    --o: var(--fc-orange, #E17731);
    --o-dark: var(--fc-orange-dark, #c45d1f);
    --t: var(--fc-teal, #215d60);
    --line: #e6eeed;
    --muted: #5d7375;

    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* propre a Services : il respire un peu plus en bas */
.fc-service {
    padding-bottom: 8px;
}

.fc-service *,
.fc-service *::before,
.fc-service *::after,
.fc-quick *,
.fc-quick *::before,
.fc-quick *::after {
    box-sizing: inherit;
}

/* ---------- 68.1 Titre de section ---------- */

.fc-service__head,
.fc-quick__head {
    text-align: center;
    margin: 0 0 30px;
}

.fc-service__eyebrow,
.fc-quick__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    color: var(--o);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase !important;
}

/* les deux filets de part et d'autre du sur titre */
.fc-service__eyebrow span,
.fc-quick__eyebrow span {
    flex: 0 0 auto;
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: .45;
}

/* Le grand titre. Deux noms pour la meme chose, heritage du
   balisage : __title chez Services, __maintitle chez
   Reassurance. */
.fc-service__title,
.fc-quick__maintitle {
    margin: 0;
    color: var(--t);
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.015em;
    text-transform: none !important;
}

/* Services seul : un chapeau suit le titre, donc le titre a
   besoin d'une marge basse */
.fc-service__title {
    margin-bottom: 12px;
}

.fc-service__lead {
    margin: 0 auto;
    max-width: 58ch;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.65;
}

/* ---------- 68.2 Grille ---------- */

.fc-service__grid,
.fc-quick__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

/* ---------- 68.3 Carte ---------- */

.fc-service__card,
.fc-quick__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 24px 24px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(18, 48, 46, .04);
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
}

/* Services change aussi de fond en version teal, section 69 */
.fc-service__card {
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease,
                background-color .25s ease;
}

/* filet orange en haut, revele au survol */
.fc-service__card::before,
.fc-quick__card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--o), #f0a068);
    opacity: 0;
    transition: opacity .25s ease;
}

.fc-service__card:hover,
.fc-quick__card:hover {
    transform: translateY(-3px);
    border-color: #d9e6e5;
    box-shadow: 0 18px 34px -20px rgba(18, 48, 46, .45);
}

.fc-service__card:hover::before,
.fc-quick__card:hover::before {
    opacity: 1;
}

/* ---------- 68.4 Cercle d'icone ---------- */

.fc-service__ico,
.fc-quick__ico {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(145deg, #fdf1e8, #fbe5d5);
    transition: transform .25s ease;
}

/* Reassurance n'a pas de rangee __top : son cercle se centre
   lui meme */
.fc-quick__ico {
    margin: 0 auto 16px;
}

.fc-service__card:hover .fc-service__ico,
.fc-quick__card:hover .fc-quick__ico {
    transform: scale(1.06);
}

.fc-service__ico svg,
.fc-quick__ico svg {
    width: 26px;
    height: 26px;
    display: block;
    stroke: var(--o-dark);
    fill: none;
}

/* Services seul : la rangee numero plus icone */

.fc-service__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.fc-service__num {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #93aeae;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    transition: color .25s ease, border-color .25s ease;
}

.fc-service__card:hover .fc-service__num {
    color: var(--t);
    border-color: #cfe0df;
}

/* ---------- 68.5 Titre de carte ---------- */

/* Encore deux noms pour la meme chose : __k chez Services,
   __title chez Reassurance. */
.fc-service__k,
.fc-quick__title {
    margin: 0 0 18px;
    color: var(--t);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------- 68.6 Liste depliable ---------- */

.fc-service__list,
.fc-quick__list {
    text-align: left;
}

/* Services : la liste pousse le pied de carte vers le bas pour
   que les trois cartes s'alignent */
.fc-service__list {
    flex: 1 1 auto;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

/* Une ligne. Services utilise des li, Reassurance des div. */
.fc-service__list li,
.fc-quick__item {
    padding: 12px 0;
}

.fc-service__list li:first-child,
.fc-quick__item:first-child {
    padding-top: 0;
}

.fc-service__list li + li,
.fc-quick__item:not(:first-child) {
    border-top: 1px solid var(--line);
}

/* La question, cliquable sur telephone */
.fc-service__q,
.fc-quick__q {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0;
    color: var(--t);
    font-weight: 800;
    line-height: 1.35;
    cursor: pointer;
    position: relative;
}

.fc-service__q { font-size: 13.5px; }
.fc-quick__q   { font-size: 14px; }

/* L'icone de ligne, teal chez Services et orange chez
   Reassurance. Difference voulue a l'origine, conservee. */
.fc-service__qico,
.fc-quick__qico {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    align-self: flex-start;
    margin-top: 1px;
    fill: none;
}

.fc-service__qico {
    stroke: var(--t);
    opacity: .85;
}

.fc-quick__qico {
    stroke: var(--o);
}

.fc-service__q::after,
.fc-quick__q::after {
    content: "+";
    margin-left: auto;
    color: var(--o);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.fc-service__check:checked ~ .fc-service__q::after,
.fc-quick__check:checked ~ .fc-quick__q::after {
    content: "−";
}

/* La reponse */
.fc-service__a,
.fc-quick__a {
    display: none;
    margin: 5px 0 0 26px;
}

.fc-service__a {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.55;
}

.fc-service__check:checked ~ .fc-service__a,
.fc-quick__check:checked ~ .fc-quick__a {
    display: block;
}

.fc-quick__a p {
    margin: 0;
}

.fc-quick__sub {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}

/* ---------- 68.7 Propre a Services : prix, pastille, pied ---------- */

.fc-service__price {
    color: var(--o-dark);
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fc-service__pill {
    align-self: center;
    display: inline-block;
    padding: 7px 16px;
    background: #fdf3ec;
    border: 1px solid #f6e0cd;
    border-radius: 999px;
    color: var(--o-dark);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
}

.fc-service__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.fc-service__delay {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    max-width: 68ch;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
    text-align: left;
}

.fc-service__clock {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    stroke: var(--o);
    fill: none;
}

.fc-service__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.fc-service__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 14px 30px;
    background: var(--o);
    border: 2px solid var(--o);
    border-radius: 10px;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none !important;
    box-shadow: 0 6px 16px -6px rgba(225, 119, 49, .55);
    transition: background-color .2s ease,
                border-color .2s ease,
                color .2s ease,
                transform .15s ease,
                box-shadow .2s ease;
}

.fc-service__btn:hover {
    background: var(--o-dark);
    border-color: var(--o-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(196, 93, 31, .6);
}

.fc-service__btn--ghost {
    background: transparent;
    border-color: #cfe0df;
    color: var(--t) !important;
    box-shadow: none;
}

.fc-service__btn--ghost:hover {
    background: var(--t);
    border-color: var(--t);
    color: #ffffff !important;
    box-shadow: 0 10px 22px -10px rgba(33, 93, 96, .7);
}

/* ---------- 68.8 Propre a Reassurance : image, pastilles, lien ---------- */

.fc-quick__img {
    width: 190px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2px 0 0;
}

.fc-quick__badge {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 13px;
    background: #fdf3ec;
    border: 1px solid #f6e0cd;
    border-radius: 999px;
    color: var(--o-dark);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.fc-quick__badge--link {
    transition: background-color .2s ease, border-color .2s ease;
}

.fc-quick__badge--link:hover {
    background: var(--o);
    border-color: var(--o);
    color: #ffffff !important;
}

.fc-quick__link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--t);
    text-decoration: underline;
    text-decoration-color: rgba(33, 93, 96, .35);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease, color .2s ease;
}

.fc-quick__link:hover {
    color: var(--o-dark);
    text-decoration-color: currentColor;
}

/* ---------- 68.9 Accessibilite ---------- */

.fc-service__q:focus-visible,
.fc-service__btn:focus-visible,
.fc-quick__q:focus-visible,
.fc-quick__link:focus-visible,
.fc-quick__badge--link:focus-visible {
    outline: 2px solid var(--o);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .fc-service__card,
    .fc-service__ico,
    .fc-service__btn,
    .fc-quick__card,
    .fc-quick__ico {
        transition: none;
    }

    .fc-service__card:hover,
    .fc-service__btn:hover,
    .fc-quick__card:hover {
        transform: none;
    }
}

/* ---------- 68.10 Tablette ---------- */

@media (min-width: 768px) and (max-width: 1024px) {

    .fc-service__grid,
    .fc-quick__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    /* la troisieme carte occupe toute la largeur au lieu de
       laisser un vide a droite */
    .fc-service__card:last-child,
    .fc-quick__card:last-child {
        grid-column: 1 / -1;
    }

    .fc-service__card,
    .fc-quick__card {
        padding: 24px 20px 20px;
    }

    .fc-service__title,
    .fc-quick__maintitle {
        font-size: 26px;
    }

    .fc-service__eyebrow,
    .fc-quick__eyebrow {
        font-size: 10.5px;
        letter-spacing: .14em;
    }
}

/* ---------- 68.11 Ordinateur et tablette : tout est ouvert ---------- */

/* Le depliage ne sert que sur telephone. Au dessus de 768 px,
   les reponses restent visibles et la ligne cesse d'etre
   cliquable. */
@media (min-width: 768px) {

    .fc-service__a,
    .fc-quick__a {
        display: block !important;
    }

    .fc-service__q,
    .fc-quick__q {
        pointer-events: none;
        cursor: default;
    }

    .fc-service__q::after,
    .fc-quick__q::after {
        display: none;
    }
}

/* ---------- 68.12 Telephone ---------- */

@media (max-width: 767px) {

    .fc-service__head,
    .fc-quick__head {
        margin-bottom: 22px;
    }

    /* En flex, les deux filets restent colles a la premiere
       ligne des que le sur titre passe sur deux lignes. On
       repasse en bloc et on masque les filets. */
    .fc-service__eyebrow,
    .fc-quick__eyebrow {
        display: block;
        line-height: 1.5;
        font-size: 10.5px;
        letter-spacing: .12em;
    }

    .fc-service__eyebrow span,
    .fc-quick__eyebrow span {
        display: none;
    }

    .fc-service__title,
    .fc-quick__maintitle {
        font-size: 20px;
    }

    .fc-service__lead {
        font-size: 15px;
    }

    .fc-service__grid,
    .fc-quick__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .fc-service__card,
    .fc-quick__card {
        padding: 22px 18px 20px;
    }

    /* pas de survol sur un ecran tactile : l'effet restait
       colle a la carte apres le passage du doigt */
    .fc-service__card:hover,
    .fc-quick__card:hover {
        transform: none;
        box-shadow: 0 1px 2px rgba(18, 48, 46, .04);
        border-color: var(--line);
    }

    .fc-service__card:hover {
        background: #ffffff;
    }

    .fc-service__card:hover::before,
    .fc-quick__card:hover::before {
        opacity: 0;
    }

    .fc-service__top {
        margin-bottom: 12px;
    }

    .fc-service__ico,
    .fc-quick__ico {
        width: 46px;
        height: 46px;
    }

    .fc-quick__ico {
        margin-bottom: 12px;
    }

    .fc-service__ico svg,
    .fc-quick__ico svg {
        width: 23px;
        height: 23px;
    }

    .fc-service__k,
    .fc-quick__title {
        margin-bottom: 14px;
    }

    .fc-service__list {
        margin-bottom: 16px;
    }

    .fc-service__q,
    .fc-quick__q {
        padding: 2px 0;
    }

    .fc-service__foot {
        margin-top: 22px;
        padding-top: 20px;
    }

    .fc-service__actions {
        width: 100%;
        flex-direction: column;
    }

    .fc-service__btn {
        width: 100%;
    }
}

/* ============================================================
   69. BLOC SERVICES EN VERSION TEAL

   Adapte le bloc de la section 68 quand il est pose dans un
   conteneur portant la classe fc-fond-teal de la section 58.

   COMMENT L'ACTIVER
   Dans Elementor, selectionne le conteneur qui entoure le bloc
   Services, onglet Avance, champ Classes CSS :

       fc-fond-teal fc-vague-page

   Rien a toucher dans le HTML du widget. Si le rendu ne te
   plait pas, tu retires les deux classes et tout revient comme
   avant.

   LA COURBE, VALEUR CORRIGEE
   La section 58 propose fc-vague, rempli en blanc, et
   fc-vague-creme, rempli en #FAF8F5. Or le fond reel de tes
   pages est #f9f7f2, pose par WoodMart sur
   .wd-page-content.main-page-wrapper. L'ecart est faible mais
   il se verrait comme un liseré le long de la courbe. La classe
   fc-vague-page ci dessous porte la bonne valeur. Utilise la
   plutot que les deux autres sur tes pages courantes.

   LES CONTRASTES, MESURES
   Sur le fond teal profond #113c3e :
       blanc            12,07 : 1
       #bcdbd9 texte     8,20 : 1
       #8ed0cd accent    6,93 : 1
       #93aeae numero    5,12 : 1
       #f0a068 orange    5,71 : 1
       #E17731 orange    3,96 : 1   insuffisant
   Ton orange de marque tombe sous le seuil de 4,5 exige pour du
   texte courant. Il est donc conserve pour les aplats, boutons
   et cercles d'icone, ou il ne porte pas de texte, et remplace
   par #f0a068 partout ou il ecrit quelque chose : les prix, le
   signe plus du depliage, la petite horloge.

   Trois tailles d'ecran, heritees de la section 68 : seules les
   couleurs changent ici, pas les espacements.
   ============================================================ */

.fc-fond-teal .fc-service {
    /* on redefinit les variables du bloc, tout le reste suit */
    --o: #f0a068;
    --o-dark: #f0a068;
    --t: #ffffff;
    --line: rgba(255, 255, 255, .16);
    --muted: #bcdbd9;
}

/* ---------- 69.1 Titre ---------- */

.fc-fond-teal .fc-service__eyebrow {
    color: #8ed0cd;
}

.fc-fond-teal .fc-service__title {
    color: #ffffff;
}

.fc-fond-teal .fc-service__lead {
    color: #bcdbd9;
}

/* ---------- 69.2 Cartes translucides ---------- */

.fc-fond-teal .fc-service__card {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}

.fc-fond-teal .fc-service__card:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .26);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .55);
}

/* le filet du haut garde l'orange de marque : c'est un aplat,
   il ne porte aucun texte */
.fc-fond-teal .fc-service__card::before {
    background: linear-gradient(90deg, #E17731, #f0a068);
}

/* ---------- 69.3 Numero et icone ---------- */

.fc-fond-teal .fc-service__num {
    color: #93aeae;
    border-color: rgba(255, 255, 255, .22);
}

.fc-fond-teal .fc-service__card:hover .fc-service__num {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .45);
}

/* Le cercle peche est le seul rappel chaud du bloc. Il tient
   tres bien sur le teal et c'est ce qui evite l'effet
   monochrome. On le garde tel quel, juste un peu assombri pour
   ne pas eblouir sur un fond sombre. */
.fc-fond-teal .fc-service__ico {
    background: linear-gradient(145deg, #f6dcc8, #eec7a9);
}

.fc-fond-teal .fc-service__ico svg {
    stroke: #a8501a;
}

.fc-fond-teal .fc-service__k {
    color: #ffffff;
}

/* ---------- 69.4 Lignes depliables ---------- */

.fc-fond-teal .fc-service__list li + li {
    border-top-color: rgba(255, 255, 255, .13);
}

.fc-fond-teal .fc-service__q {
    color: #ffffff;
}

.fc-fond-teal .fc-service__qico {
    stroke: #8ed0cd;
    opacity: 1;
}

.fc-fond-teal .fc-service__q::after {
    color: #f0a068;
}

.fc-fond-teal .fc-service__a {
    color: #bcdbd9;
}

.fc-fond-teal .fc-service__price {
    color: #f0a068;
}

/* ---------- 69.5 Pastille de bas de carte ---------- */

.fc-fond-teal .fc-service__pill {
    background: rgba(240, 160, 104, .14);
    border-color: rgba(240, 160, 104, .38);
    color: #f6c9a6;
}

/* ---------- 69.6 Pied de bloc ---------- */

.fc-fond-teal .fc-service__foot {
    border-top-color: rgba(255, 255, 255, .16);
}

.fc-fond-teal .fc-service__delay {
    color: #bcdbd9;
}

.fc-fond-teal .fc-service__clock {
    stroke: #f0a068;
}

/* Le bouton plein garde l'orange de marque : le texte qu'il
   porte est blanc sur orange, pas orange sur teal, donc le
   contraste est celui d'origine et il reste bon. */
.fc-fond-teal .fc-service__btn {
    background: #E17731;
    border-color: #E17731;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
}

.fc-fond-teal .fc-service__btn:hover {
    background: #c45d1f;
    border-color: #c45d1f;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .7);
}

.fc-fond-teal .fc-service__btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .4);
    color: #ffffff !important;
    box-shadow: none;
}

.fc-fond-teal .fc-service__btn--ghost:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #113c3e !important;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}

/* ---------- 69.7 Le focus reste visible sur fond sombre ---------- */

.fc-fond-teal .fc-service__q:focus-visible,
.fc-fond-teal .fc-service__btn:focus-visible {
    outline-color: #f0a068;
}

/* ---------- 69.8 Courbe de raccord a la bonne couleur ---------- */

/* A utiliser a la place de fc-vague et fc-vague-creme sur toutes
   tes pages courantes : #f9f7f2 est la couleur reellement posee
   par WoodMart sur .wd-page-content.main-page-wrapper. */

.fc-vague-page {
    position: relative !important;
    overflow: hidden !important;
}

.fc-vague-page::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 62px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2060%20L0%2032%20C%20220%20-2%20430%20-2%20640%2022%20C%20850%2046%201010%2046%201200%2018%20L1200%2060%20Z%22%20fill%3D%22%23f9f7f2%22%2F%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .fc-vague-page::after { height: 46px; }
}

@media (max-width: 767px) {
    .fc-vague-page::after { height: 30px; }
}

@media (max-width: 400px) {
    .fc-vague-page::after { height: 24px; }
}

/* ---------- 69.9 Telephone ---------- */

@media (max-width: 767px) {

    /* pas de survol au doigt : la carte restait eclaircie apres
       le passage */
    .fc-fond-teal .fc-service__card:hover {
        background: rgba(255, 255, 255, .07);
        border-color: rgba(255, 255, 255, .14);
        box-shadow: none;
    }
}

@media print {

    /* le fond teal coute une cartouche, on le neutralise */
    .fc-fond-teal .fc-service__card {
        background: #ffffff;
        border-color: #e6eeed;
    }

    .fc-fond-teal .fc-service {
        --t: #215d60;
        --muted: #5d7375;
        --line: #e6eeed;
        --o: #E17731;
        --o-dark: #c45d1f;
    }

    .fc-fond-teal .fc-service__title,
    .fc-fond-teal .fc-service__k,
    .fc-fond-teal .fc-service__q {
        color: #215d60;
    }
}

/* ============================================================
   70. LARGEUR DU CONTENU DANS UNE SECTION ETIREE

   A poser en meme temps que l'etirement du bloc Services.

   POURQUOI
   Ton bloc Services vit dans un conteneur Elementor boxe de
   763 px de large, avec des marges blanches de part et d'autre.
   Un fond teal pose la dessus donnerait une bande flottante au
   milieu de la page, et la courbe de raccord n'aurait aucun
   sens puisqu'elle ne toucherait pas les bords.

   Pour que le fond aille d'un bord a l'autre, on utilise le
   mecanisme natif de WoodMart, celui qui sert deja a ton hero :
   l'etirement de section. Voir le mode d'emploi plus bas.

   Une fois la section etiree, le conteneur fait toute la
   largeur de l'ecran, et son contenu aussi. Sur un grand ecran
   les trois cartes se retrouveraient a plus de deux metres l'une
   de l'autre. Cette section les ramene a la largeur de contenu
   de ton site, mesuree a 1600 px sur .container.

   MODE D'EMPLOI, DANS CET ORDRE

   1. Dans Elementor, selectionne le conteneur qui entoure le
      bloc Services. C'est celui qui ne contient que ce widget,
      identifiant cccb327.

   2. Onglet des reglages WoodMart du conteneur, active
      l'etirement de section. Choisis la variante qui etire la
      section sans etirer le contenu. C'est exactement le
      reglage deja en place sur ton hero.

   3. Onglet Avance, champ Classes CSS :

          fc-fond-teal fc-vague-page

   4. Enregistre, puis vide le cache WP Rocket.

   Si l'etirement n'est pas disponible sur ce conteneur, dis le
   moi : il existe une solution en CSS pur, un peu moins propre
   parce qu'elle doit composer avec la largeur de la barre de
   defilement.
   ============================================================ */

.fc-fond-teal > .e-con-inner,
.fc-fond-teal > .elementor-widget,
.fc-fond-teal > .fc-service {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
}

/* La section 58 pose deja le retrait lateral sur .fc-fond-teal :
   24 px sur ordinateur, 20 sur tablette, 16 sur telephone. Le
   contenu ne touchera donc jamais le bord de l'ecran, meme
   etire. Rien a ajouter ici. */

/* ============================================================
   72. CONNEXION ET CODE PROMO RATTACHES AU BLOC FACTURATION
   Version corrigee.

   CE QUI N'ALLAIT PAS DANS LA PREMIERE VERSION
   J'avais pose max-width: none sur les deux encarts pour qu'ils
   suivent la colonne de gauche. Mais ces encarts ne sont pas
   dans la colonne : ils vivent au dessus des deux colonnes, donc
   ils ont pris toute la largeur de la page. Sur grand ecran, la
   question se retrouvait a gauche et le lien mille deux cents
   pixels plus loin, et le formulaire de code promo deployait un
   bouton pleine largeur.

   Une largeur maximale fixe est la bonne reponse : ces elements
   ne peuvent pas s'aligner tout seuls sur une colonne dont ils
   ne font pas partie.

   CE QUE FAIT CETTE VERSION
     • les deux encarts sont limites a 560 px, donc le lien reste
       a cote de la question
     • le formulaire de code promo passe en une seule ligne :
       le champ, puis le bouton a sa largeur naturelle
     • sur telephone, tout repasse en colonne et le bouton
       reprend la pleine largeur, la ou c'est justifie

   Elle vient apres la 5 bis et la 24 bis, qui habillent deja ces
   elements. A priorite egale, la derniere ecrite gagne.

   SI TU NE POSES PAS LA SECTION 23 DU PHP
   Retire la regle qui masque .woocommerce-billing-fields > h3,
   sinon tu n'auras plus de titre du tout.
   ============================================================ */

/* ---------- 72.1 Le titre remonte ---------- */

.woocommerce-checkout .fc-titre-commande {
    max-width: 560px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e7efee;
    color: var(--fc-teal);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: none;
    line-height: 1.3;
}

/* Le titre d'origine fait doublon. A ne masquer que si la
   section 23 du functions.php est en place. */
.woocommerce-checkout .woocommerce-billing-fields > h3 {
    display: none;
}

/* ---------- 72.2 Les deux encarts, en barres fines ---------- */

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
    max-width: 560px;
    margin: 0 0 8px;
    padding: 11px 15px;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    border-radius: 10px;
    border-left-width: 3px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

/* l'icone etait calibree pour un pave */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-top: 0;
    background-size: 17px 17px;
}

/* le lien reste sur la meme ligne que la question */
.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon,
.woocommerce-checkout .woocommerce-form-login-toggle a.showlogin {
    margin-left: auto;
    font-size: 13px;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    white-space: nowrap;
}

/* le second encart se detache du formulaire qui suit */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin-bottom: 20px;
}

/* ---------- 72.3 Le formulaire de code promo, sur une ligne ---------- */

.woocommerce-checkout form.checkout_coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    margin: 0 0 20px;
    padding: 14px;
}

.woocommerce-checkout form.checkout_coupon .form-row-first {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0 !important;
}

.woocommerce-checkout form.checkout_coupon .form-row-last {
    flex: 0 0 auto;
    margin: 0 !important;
}

.woocommerce-checkout form.checkout_coupon input#coupon_code {
    height: 46px;
}

/* le bouton reprend une largeur naturelle : il applique un code,
   ce n'est pas l'action principale de la page */
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
    width: auto;
    min-height: 46px;
    padding: 0 24px;
    font-size: 13px;
    letter-spacing: .03em;
    text-transform: none;
    white-space: nowrap;
}

/* ---------- 72.4 Le formulaire de connexion ---------- */

.woocommerce-checkout form.woocommerce-form-login {
    max-width: 560px;
    margin: 0 0 20px;
}

/* ---------- 72.5 Tablette ---------- */

@media (min-width: 768px) and (max-width: 1024px) {

    .woocommerce-checkout .fc-titre-commande {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
    .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* ---------- 72.6 Telephone ---------- */

@media (max-width: 767px) {

    /* plus de largeur maximale : la colonne fait deja la largeur
       de l'ecran */
    .woocommerce-checkout .fc-titre-commande,
    .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
    .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
    .woocommerce-checkout form.checkout_coupon,
    .woocommerce-checkout form.woocommerce-form-login {
        max-width: none;
    }

    .woocommerce-checkout .fc-titre-commande {
        font-size: 16px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
    .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
        padding: 10px 13px;
        font-size: 12.8px;
        gap: 3px 8px;
    }

    /* Le lien reste a droite tant qu'il tient, sans redevenir le
       bouton pleine largeur de la section 24 bis qui rendait la
       barre aussi haute qu'avant. */
    .woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon,
    .woocommerce-checkout .woocommerce-form-login-toggle a.showlogin {
        display: inline;
        width: auto;
        min-height: 0;
        margin: 0 0 0 auto;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        font-size: 12.8px;
        text-decoration: underline;
    }

    /* Le champ et le bouton repassent en colonne : cote a cote,
       le champ deviendrait trop etroit pour lire un code. */
    .woocommerce-checkout form.checkout_coupon {
        display: block;
        padding: 13px;
    }

    .woocommerce-checkout form.checkout_coupon .form-row-first {
        margin-bottom: 8px !important;
    }

    .woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
        width: 100%;
        padding: 0 18px;
    }
}

@media print {

    .woocommerce-checkout .woocommerce-form-coupon-toggle,
    .woocommerce-checkout .woocommerce-form-login-toggle {
        display: none;
    }
}


/* ============================================================
   74. VAGUE ORANGE SOUS LE BANDEAU DE TITRE

   CE QUI MANQUAIT
   Releve fait sur le site : la vague avec son lisere orange
   existe a deux endroits seulement.
     • sous le hero de la page d'accueil, par la classe
       vague-hero posee sur la section Elementor, section 4 bis
     • au dessus du pied de page, sur toutes les pages,
       section 4
   Les pages interieures, boutique et contact par exemple,
   affichent le bandeau de titre teal mais il se termine par un
   trait droit. D'ou l'impression que le lisere orange a disparu
   dans les pages : il n'y a jamais ete.

   CE QUE FAIT CETTE SECTION
   Elle pose la meme vague sous le bandeau de titre, retournee
   comme celle du hero. Les pages interieures se terminent donc
   comme l'accueil.

   LE CHOIX DE ::before
   La section 50 occupe deja .wd-page-title::after pour le motif
   koru, et la section 4 travaille sur .wd-page-title-bg. J'ai
   verifie que .wd-page-title::before n'est utilise nulle part,
   ni dans ton fichier ni dans le base.css de WoodMart. Il est
   donc libre.

   LA COULEUR
   Le creme reste #FAF8F5, identique aux sections 4 et 4 bis.
   Le fond reel de tes pages est #f9f7f2, soit trois points
   d'ecart sur le bleu : invisible a l'oeil, et la coherence
   avec les deux vagues existantes vaut mieux qu'un gain
   theorique.

   SI TU NE VEUX LA VAGUE QUE SUR CERTAINES PAGES
   Remplace le selecteur par une classe de body, par exemple
   .woocommerce-shop .wd-page-title::before pour la boutique
   seule.
   ============================================================ */

.wd-page-title::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    /* meme mesure que la vague du hero */
    height: clamp(40px, 7vw, 100px);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 130' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,65 C1140,125 960,5 720,65 C480,125 300,5 0,65 Z' fill='%23DE7735'/%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1140,120 960,0 720,60 C480,120 300,0 0,60 Z' fill='%23FAF8F5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: scaleY(-1);
    /* au dessus du motif koru de la section 50, qui est en z-index 1,
       et sous le contenu du bandeau, qui est en z-index 2 */
    z-index: 3;
    pointer-events: none;
}

/* Le contenu du bandeau doit rester lisible au dessus de la vague.
   La section 50 place deja .wd-page-title > .container en z-index 2,
   on le remonte au dessus de la vague. */
.wd-page-title > .container {
    z-index: 4;
}

/* ---------- Telephone ---------- */

/* Meme correction que la section 4 : sur un ecran etroit, la vague
   ecrasee rend le lisere orange trop fin pour se voir. On prend le
   trace a 75 plutot qu'a 65, qui l'epaissit. */
@media (max-width: 767px) {

    .wd-page-title::before {
        height: 50px;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 140' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,75 C1140,135 960,15 720,75 C480,135 300,15 0,75 Z' fill='%23DE7735'/%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1140,120 960,0 720,60 C480,120 300,0 0,60 Z' fill='%23FAF8F5'/%3E%3C/svg%3E");
    }
}

/* ---------- Le bandeau doit laisser la place a la vague ---------- */

/* Sans ce retrait, le fil d'Ariane se retrouve a cheval sur la
   vague, ecrit en blanc sur le creme : illisible.

   POURQUOI !important ICI
   WoodMart pose le retrait du bandeau sur la classe de taille,
   .wd-page-title.title-size-small, releve a 15 px. C'est deux
   classes, donc une priorite superieure a un simple
   .wd-page-title. Monter au meme niveau demanderait de nommer
   les trois classes de taille du theme, small, default et large,
   et de les tenir a jour si le theme en ajoute une. Le
   !important est ici plus court et plus sur.

   La valeur suit la hauteur de la vague : elle vaut la vague
   plus seize pixels de respiration, quelle que soit la largeur
   de l'ecran. Si tu changes la hauteur de la vague plus haut,
   change la ici aussi. */
.wd-page-title {
    padding-bottom: calc(clamp(40px, 7vw, 100px) + 16px) !important;
}

@media (max-width: 767px) {
    .wd-page-title {
        /* la vague fait 50 px sur telephone */
        padding-bottom: 64px !important;
    }
}

@media print {
    .wd-page-title::before {
        display: none;
    }
}

/* ============================================================
   76. FIL D'ETAPES DANS LE BANDEAU
   Version 2. Elle remplace la section 76 ET la section 76 bis.

   Supprime les deux anciennes avant de coller celle ci.

   CE QUI N'ALLAIT PAS DANS LA VERSION 1
   La liste prenait toute la largeur du bandeau, soit 1600 px sur
   grand ecran, et repartissait les trois etapes aux extremites.
   Resultat : des pastilles de 28 px separees par 500 px de vide,
   reliees par un trait de 2 px. Le fil ne se lisait plus comme
   un parcours, mais comme une ligne vide avec trois ronds
   dessus.

   CE QUE FAIT LA VERSION 2
     • la liste est bornee a 620 px et centree, donc les traits
       de liaison font environ 200 px au lieu de 500
     • les pastilles passent de 28 a 32 px et les libelles de
       12 a 12,5 px, pour que l'ensemble tienne sa place
     • le trait est un peu plus visible, 3 px au lieu de 2, car
       sur une longueur courte un trait fin disparait
     • les residus du fil natif sont neutralises ici meme :
       l'opacite de 0,7 que WoodMart pose sur les libelles, et
       la fleche qu'il insere entre les etapes

   LE BALISAGE, RELEVE EN DIRECT
     ul.wd-checkout-steps
       li.step-cart.step-active       > a > span
       li.step-checkout.step-inactive > a > span
       li.step-complete.step-inactive > span

   POURQUOI DES !important
   Les regles de WoodMart pour ce fil sont injectees en ligne
   dans la page, donc apres le fichier de reglages, et elles ont
   exactement la meme priorite que les notres. A egalite, c'est
   l'ordre qui tranche, et il ne joue pas en notre faveur.
   ============================================================ */

/* ---------- 76.1 La liste, compacte et centree ---------- */

.wd-page-title .wd-checkout-steps {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    counter-reset: fcetape;
    list-style: none !important;
    /* la borne qui change tout */
    width: 100%;
    max-width: 620px;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ---------- 76.2 Une etape ---------- */

.wd-page-title .wd-checkout-steps > li {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 0 4px !important;
    list-style: none !important;
    text-align: center;
    /* le libelle arrive en minuscules ou en capitales selon
       l'etape, on harmonise */
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.25;
    text-transform: lowercase;
}

.wd-page-title .wd-checkout-steps > li::first-letter {
    text-transform: uppercase;
}

/* ---------- 76.3 La pastille numerotee ---------- */

.wd-page-title .wd-checkout-steps > li::before {
    counter-increment: fcetape;
    content: counter(fcetape);
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    background: #1a5254;
    color: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    opacity: 1 !important;
}

/* ---------- 76.4 Le trait de liaison ---------- */

/* Il part du centre de l'etape precedente et s'arrete au centre
   de celle ci. La pastille, en z-index 2 et avec un fond plein,
   le recouvre proprement a chaque extremite. */
.wd-page-title .wd-checkout-steps > li::after {
    content: "" !important;
    position: absolute;
    z-index: 1;
    top: 15px;
    right: 50%;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25);
    /* neutralise la fleche et le voile du fil natif */
    font-size: 0 !important;
    opacity: 1 !important;
}

.wd-page-title .wd-checkout-steps > li:first-child::after {
    display: none !important;
}

/* ---------- 76.5 Les etats ---------- */

/* etape en cours */
.wd-page-title .wd-checkout-steps > li.step-active {
    color: #ffffff;
    font-weight: 700;
}

.wd-page-title .wd-checkout-steps > li.step-active::before {
    background: #ffffff;
    border-color: #ffffff;
    color: #113c3e;
}

/* Les etapes deja franchies sont celles qui precedent l'active.
   WoodMart ne leur donne pas de classe distincte, on se sert de
   la position : tant qu'on n'a pas croise l'active, l'etape est
   derriere nous. */
.wd-page-title .wd-checkout-steps > li:has(~ li.step-active) {
    color: rgba(255, 255, 255, .9);
}

.wd-page-title .wd-checkout-steps > li:has(~ li.step-active)::before {
    border-color: #ffffff;
    color: #ffffff;
}

.wd-page-title .wd-checkout-steps > li.step-active::after,
.wd-page-title .wd-checkout-steps > li:has(~ li.step-active)::after {
    background: rgba(255, 255, 255, .8);
}

/* etapes a venir : rien a changer, c'est l'etat par defaut */

/* ---------- 76.6 Les liens ---------- */

.wd-page-title .wd-checkout-steps > li > a,
.wd-page-title .wd-checkout-steps > li > span {
    color: inherit !important;
    text-decoration: none !important;
    /* WoodMart pose 0,7 au dela de 769 px, ce qui ternit meme
       l'etape en cours */
    opacity: 1 !important;
    transition: opacity .2s ease;
}

.wd-page-title .wd-checkout-steps > li > a:hover {
    opacity: .75 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* ---------- 76.7 Le bandeau, hauteur juste ---------- */

.woocommerce-cart .wd-page-title,
.woocommerce-checkout .wd-page-title,
.woocommerce-order-received .wd-page-title,
.woocommerce-order-pay .wd-page-title {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 34px !important;
    /* la vague de la section 74, plus la place du fil */
    padding-bottom: calc(clamp(40px, 7vw, 100px) + 20px) !important;
}

/* ---------- 76.8 Tablette ---------- */

@media (min-width: 768px) and (max-width: 1024px) {

    .wd-page-title .wd-checkout-steps {
        max-width: 520px;
    }
}

/* ---------- 76.9 Telephone ---------- */

@media (max-width: 767px) {

    .woocommerce-cart .wd-page-title,
    .woocommerce-checkout .wd-page-title,
    .woocommerce-order-received .wd-page-title,
    .woocommerce-order-pay .wd-page-title {
        padding-top: 24px !important;
        padding-bottom: 64px !important;
    }

    .wd-page-title .wd-checkout-steps {
        max-width: 400px;
    }

    .wd-page-title .wd-checkout-steps > li {
        font-size: 11px;
        letter-spacing: .02em;
        gap: 7px;
        padding: 0 2px !important;
    }

    .wd-page-title .wd-checkout-steps > li::before {
        width: 27px;
        height: 27px;
        font-size: 12px;
    }

    .wd-page-title .wd-checkout-steps > li::after {
        top: 12px;
        height: 2px;
    }
}

/* Tres petit ecran : seul le libelle de l'etape en cours reste
   ecrit, sinon les mots se chevauchent. Les trois pastilles
   restent visibles. */
@media (max-width: 400px) {

    .wd-page-title .wd-checkout-steps > li:not(.step-active) > a,
    .wd-page-title .wd-checkout-steps > li:not(.step-active) > span {
        display: none;
    }

    .wd-page-title .wd-checkout-steps > li {
        gap: 0;
    }

    .wd-page-title .wd-checkout-steps > li.step-active {
        gap: 7px;
    }
}

@media print {
    .wd-page-title .wd-checkout-steps {
        display: none !important;
    }
}

/* ============================================================
   77. TITRE DE PAGE DANS LE BANDEAU DU TUNNEL

   A coller apres la section 76 version 2.

   LE CONSTAT, RELEVE EN DIRECT
   Sur /panier/ et /commande/, le bandeau contient exactement un
   element : ul.wd-checkout-steps. Pas de titre, pas de fil
   d'Ariane. WoodMart remplace le titre par les etapes sur ces
   pages. D'ou le vide a gauche une fois le fil ramene a une
   largeur raisonnable.

   CE QUE FAIT CETTE SECTION
   Elle repasse le conteneur en ligne, pose le titre de la page a
   gauche et laisse le fil a droite. Le bandeau est rempli, et la
   page retrouve un nom.

   LA LIMITE, A SAVOIR
   Le titre est ecrit en CSS, par du contenu genere. C'est
   decoratif : il ne compte pas comme un titre de page pour les
   moteurs de recherche, et il n'est pas traduisible. Pour un
   vrai titre, il faut passer par le functions.php. Vu qu'on a
   deja la version 3 du fichier en attente, on pourra le faire
   proprement a ce moment la. En attendant, ceci se pose en dix
   secondes et se retire aussi vite.

   L'ORDRE DES REGLES COMPTE
   Sur la page de remerciement, le corps porte a la fois
   woocommerce-checkout et woocommerce-order-received. Les deux
   selecteurs ont la meme priorite, donc c'est le dernier ecrit
   qui gagne. Ne reordonne pas le bloc 77.2.
   ============================================================ */

/* ---------- 77.1 Le conteneur repasse en ligne ---------- */

.woocommerce-cart .wd-page-title > .container,
.woocommerce-checkout .wd-page-title > .container,
.woocommerce-order-received .wd-page-title > .container,
.woocommerce-order-pay .wd-page-title > .container {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px;
}

/* Le fil abandonne son centrage : il est maintenant tenu a
   droite par le conteneur. */
.woocommerce-cart .wd-page-title .wd-checkout-steps,
.woocommerce-checkout .wd-page-title .wd-checkout-steps,
.woocommerce-order-received .wd-page-title .wd-checkout-steps,
.woocommerce-order-pay .wd-page-title .wd-checkout-steps {
    flex: 0 1 560px;
    margin: 0 !important;
}

/* ---------- 77.2 Le titre, un par page ---------- */

.woocommerce-cart .wd-page-title > .container::before {
    content: "Votre panier";
}

.woocommerce-checkout .wd-page-title > .container::before {
    content: "Finaliser ma commande";
}

/* ces deux la doivent rester apres la commande, voir l'en tete */
.woocommerce-order-pay .wd-page-title > .container::before {
    content: "Paiement";
}

.woocommerce-order-received .wd-page-title > .container::before {
    content: "Commande confirmee";
}

/* ---------- 77.3 L'habillage du titre ---------- */

.woocommerce-cart .wd-page-title > .container::before,
.woocommerce-checkout .wd-page-title > .container::before,
.woocommerce-order-received .wd-page-title > .container::before,
.woocommerce-order-pay .wd-page-title > .container::before {
    flex: 0 1 auto;
    min-width: 0;
    color: #ffffff;
    font-size: clamp(21px, 2.1vw, 30px);
    font-weight: 800;
    letter-spacing: .005em;
    line-height: 1.15;
    text-transform: none;
}

/* ---------- 77.4 Tablette ---------- */

@media (min-width: 768px) and (max-width: 1024px) {

    .woocommerce-cart .wd-page-title > .container,
    .woocommerce-checkout .wd-page-title > .container,
    .woocommerce-order-received .wd-page-title > .container,
    .woocommerce-order-pay .wd-page-title > .container {
        gap: 20px;
    }

    .woocommerce-cart .wd-page-title .wd-checkout-steps,
    .woocommerce-checkout .wd-page-title .wd-checkout-steps,
    .woocommerce-order-received .wd-page-title .wd-checkout-steps,
    .woocommerce-order-pay .wd-page-title .wd-checkout-steps {
        flex: 0 1 430px;
    }
}

/* ---------- 77.5 Telephone ---------- */

/* Cote a cote, le titre et le fil seraient tous les deux
   illisibles. On repasse en colonne, titre au dessus, fil en
   dessous, le tout centre. */
@media (max-width: 767px) {

    .woocommerce-cart .wd-page-title > .container,
    .woocommerce-checkout .wd-page-title > .container,
    .woocommerce-order-received .wd-page-title > .container,
    .woocommerce-order-pay .wd-page-title > .container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px;
        text-align: center;
    }

    .woocommerce-cart .wd-page-title .wd-checkout-steps,
    .woocommerce-checkout .wd-page-title .wd-checkout-steps,
    .woocommerce-order-received .wd-page-title .wd-checkout-steps,
    .woocommerce-order-pay .wd-page-title .wd-checkout-steps {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto !important;
    }
}

@media print {

    .woocommerce-cart .wd-page-title > .container::before,
    .woocommerce-checkout .wd-page-title > .container::before,
    .woocommerce-order-received .wd-page-title > .container::before,
    .woocommerce-order-pay .wd-page-title > .container::before {
        color: #000000;
    }
}

/* ============================================================
   78. MASQUER LE TRI DE LA BOUTIQUE
   Le champ Trier par de WooCommerce. Le formulaire porte aussi
   un champ cache paged, sans role ici : la pagination passe par
   l'adresse, elle n'est pas affectee.
   Le meme selecteur couvre la version telephone, ou WoodMart
   affiche le tri sous forme d'icone.
   ============================================================ */

.wd-shop-tools .woocommerce-ordering {
    display: none;
}

/* ============================================================
   79. PASTILLES DE CATEGORIES ALIGNEES A GAUCHE
   Version 2. Elle remplace toutes les versions precedentes de
   la section 79. Supprime l'ancienne avant de coller celle ci.

   POURQUOI LA PREMIERE VERSION NE CHANGEAIT RIEN SUR ORDINATEUR
   Je m'etais trompe de coupable. Ce n'est pas la liste de
   pastilles qui est decalee, c'est la barre entiere.

   RELEVE FAIT EN DIRECT A 1600 PX
     .shop-loop-head            gauche 15    largeur 1291
       .wd-shop-tools  premier  gauche 15    largeur 0
       .wd-shop-tools  second   gauche 241   largeur 1065
     grille produits            gauche 15

   WoodMart pose deux barres d'outils, pas une. La premiere ne
   contient que le compteur de resultats, qui est masque chez
   toi : elle mesure zero pixel de large. La seconde porte tes
   pastilles et le selecteur de densite.

   Le conteneur est en justify-content: space-between. Avec deux
   elements, le premier va a gauche, le second a droite. Comme le
   premier est vide, la barre visible se retrouve entierement
   plaquee a droite : 15 + 1291 moins 1065 egale 241. Les 226
   pixels de vide a gauche viennent de la.

   Aligner la liste a l'interieur de son bloc, ce que faisait ma
   premiere version, ne pouvait donc rien donner : le bloc
   lui meme etait au mauvais endroit.

   CE QUE FAIT CETTE VERSION
   Elle donne au second bloc une base de 100 pour cent. Le
   conteneur etant deja en flex-wrap: wrap, ce bloc passe sur sa
   propre ligne et repart du bord gauche. Le premier bloc, qui
   ne mesure rien, occupe une ligne de hauteur nulle au dessus.

   MESURE APRES CORRECTION, A 1600 PX
     premiere pastille   gauche 15    exactement la grille
     selecteur densite   droite 1306  exactement la grille

   Si tu reaffiches un jour le compteur de resultats dans les
   reglages du theme, il reprendra sa ligne au dessus des
   pastilles. Rien a changer ici.

   POURQUOI LA BORNE A 768 PX
   Sur telephone, la section 61 pose des marges negatives de
   16 px des deux cotes pour que la bande de pastilles defile
   d'un bord de l'ecran a l'autre. Une regle a deux classes
   comme la mienne bat la sienne qui n'en a qu'une, et la
   priorite passe avant la requete d'ecran : sans cette borne,
   la marge droite negative etait remplacee par zero et la bande
   devenait asymetrique, bord gauche a -1 px et bord droit a
   360 px au lieu de 376. Mesure a 375 px.
   ============================================================ */

@media (min-width: 768px) {

    /* La barre visible passe sur sa propre ligne et repart du
       bord gauche du contenu */
    .shop-loop-head > .wd-shop-tools:last-child {
        flex: 1 1 100%;
    }

    /* Ceinture et bretelles : si le theme changeait un jour sa
       repartition, les pastilles resteraient a gauche */
    .wd-shop-tools .fc-pastilles {
        flex: 1 1 auto;
        margin-right: auto;
    }

    .fc-pastilles-liste {
        justify-content: flex-start;
    }
}

/* ============================================================
   82. FLECHE DE RETOUR DU BANDEAU DE TITRE

   LE CONSTAT, MESURE EN DIRECT
   Sur les pages qui affichent le bouton de retour de WoodMart,
   releve a 1400 px sur la categorie GPS :

     .wd-back-btn          50 x 40 px, a 15 px du bord gauche
     couleur de l'icone    rgb(51, 51, 51)

   Soit un gris presque noir pose sur le bandeau teal sombre.
   La section 4 force deja le blanc sur le titre et le fil
   d'Ariane du bandeau, mais elle ne nomme pas ce bouton, qui
   est donc reste a la couleur par defaut du theme.

   OU IL APPARAIT
   Uniquement au dessus de 1024 px. WoodMart le masque en
   dessous par sa propre regle :
     @media (max-width: 1024px) { .wd-back-btn { display: none } }
   Rien a prevoir pour telephone et tablette.

   COMMENT L'ICONE EST DESSINEE
   Ce n'est pas une image mais un caractere de la police
   woodmart-font, pose en ::before avec --wd-btn-icon: "\f121".
   La couleur se change donc comme celle d'un texte, sur le
   ::before lui meme. Cibler le lien ne suffit pas toujours :
   le theme repose la couleur sur l'icone.

   LE CHOIX DU BLANC
   Le bandeau est teal fonce. Le blanc y donne 12,07 : 1, le
   meme rapport que le titre juste a cote. L'orange de marque
   n'y monte qu'a 3,96 : 1, ce qui passe pour une icone mais
   pas pour du texte, et il jurerait a cote d'un titre blanc.
   Le blanc est garde par defaut, l'orange sert au survol, la
   ou un ecart de couleur est justement le signal attendu.
   ============================================================ */

/* ---------- 82.1 La fleche, blanche comme le titre ---------- */

.wd-page-title .wd-back-btn > a,
.wd-page-title .wd-back-btn .wd-action-icon,
.wd-page-title .wd-back-btn .wd-action-icon::before,
.wd-page-title .wd-back-btn .wd-action-icon::after {
    color: #ffffff;
}

/* ---------- 82.2 Une cible cliquable qui se voit ---------- */

/* Sans fond, la fleche flotte au dessus du motif koru et se
   confond avec lui par endroits. Un disque tres discret la
   detache sans alourdir le bandeau. */
.wd-page-title .wd-back-btn > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    transition: background-color .2s ease, transform .15s ease;
}

/* ---------- 82.3 Survol et focus ---------- */

.wd-page-title .wd-back-btn > a:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateX(-2px);
}

.wd-page-title .wd-back-btn > a:hover .wd-action-icon,
.wd-page-title .wd-back-btn > a:hover .wd-action-icon::before {
    color: #f0a068;
}

/* Le focus doit rester visible au clavier, sur fond sombre */
.wd-page-title .wd-back-btn > a:focus-visible {
    outline: 2px solid #f0a068;
    outline-offset: 3px;
}

/* ---------- 82.4 Confort ---------- */

@media (prefers-reduced-motion: reduce) {

    .wd-page-title .wd-back-btn > a {
        transition: none;
    }

    .wd-page-title .wd-back-btn > a:hover {
        transform: none;
    }
}

/* Un bouton de navigation n'a aucun sens sur une page imprimee */
@media print {

    .wd-page-title .wd-back-btn {
        display: none !important;
    }
}

/* ============================================================
   SI TU PREFERES LE SUPPRIMER PLUTOT QUE LE COLORER

   Ce bouton renvoie a l'historique du navigateur, que le
   visiteur a deja sous la main avec la fleche de son
   navigateur et le geste de retour de son pavé tactile. Il
   fait donc doublon, et il occupe le coin haut gauche du
   bandeau, la ou l'oeil se pose en premier.

   Pour le retirer, remplace toute cette section par :

       .wd-page-title .wd-back-btn { display: none; }

   Ou mieux, cherche le reglage dans WoodMart, Reglages du
   theme, Page title : ce qui vient du theme survit aux mises
   a jour par construction.
   ============================================================ */
/* ============================================================
   83. PASTILLE DE RUPTURE DE STOCK

   LE CONSTAT, RELEVE EN DIRECT SUR LA CATEGORIE GPS
   La vignette d'un produit en rupture contient bien le texte,
   mais il ne s'affiche pas :

     <p class="wd-product-stock stock wd-style-default out-of-stock">
       Rupture de stock
     </p>
     display calcule : none

   La section 51 le masque, avec cette regle :
     .wd-products .wd-product p.wd-product-stock.stock
       { display: none !important; }

   Elle ne distingue pas les deux cas. Sur un produit en stock
   c'est voulu, la pastille vient du PHP. Sur un produit en
   rupture, le PHP n'ecrit rien, puisque fc_stock_faible_boucle
   ne s'execute que si is_in_stock() est vrai. La vignette
   n'affiche donc aucune disponibilite.

   CE QUE FAIT CETTE SECTION
   Elle reaffiche la mention du theme dans le seul cas de la
   rupture, et lui donne la meme forme de pastille que les deux
   autres etats. Aucun PHP a toucher : le texte existe deja et
   il est deja traduit.

   POURQUOI UN GRIS ET PAS UN ROUGE
   Le theme l'ecrit en rouge vif, rgb(181, 8, 8). Sur une grille
   de vingt sept produits, un rouge franc attire l'oeil sur ce
   que le client ne peut pas acheter, au detriment du reste. Le
   gris dit la meme chose sans crier, et garde le rouge
   disponible pour ce qui compte vraiment, les erreurs de
   formulaire.

   LA PRIORITE
   La regle de la section 51 porte un !important. Le selecteur
   ci dessous nomme une classe de plus, out-of-stock, donc il
   passe devant a !important egal. C'est la raison de ce
   !important la, pas une facilite.

   TROIS TAILLES D'ECRAN, alignees sur la section 51.
   ============================================================ */

/* ---------- 83.1 On reaffiche la mention du theme ---------- */

.wd-products .wd-product p.wd-product-stock.stock.out-of-stock {
    display: inline-flex !important;
}

/* ---------- 83.2 La pastille, meme forme que les deux autres ---------- */

/* Deux familles, comme en section 51 : la vignette de boutique
   et la fiche produit. */
.wd-products .wd-product p.wd-product-stock.stock.out-of-stock,
.woocommerce p.stock.out-of-stock,
p.fc-loop-stock.out-of-stock {
    --c: #6b8385;
    box-sizing: border-box;
    align-items: center;
    gap: 9px;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 16px !important;
    padding: 7px 14px 7px 12px !important;
    border: 1px solid rgba(26, 58, 58, .16) !important;
    border-radius: 999px !important;
    background: rgba(26, 58, 58, .05) !important;
    color: var(--c) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    white-space: nowrap;
}

/* la fiche produit aligne tout a gauche, comme en section 51 */
.single-product .woocommerce p.stock.out-of-stock,
.single-product p.fc-loop-stock.out-of-stock {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ---------- 83.3 La pastille ronde ---------- */

/* Creuse plutot que pleine : le produit n'est pas disponible,
   le point ne doit pas ressembler a un feu vert. */
.wd-products .wd-product p.wd-product-stock.stock.out-of-stock::before,
.woocommerce p.stock.out-of-stock::before,
p.fc-loop-stock.out-of-stock::before {
    content: "" !important;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: inset 0 0 0 2px var(--c);
}

/* ---------- 83.4 Le theme enveloppe parfois le texte ---------- */

/* Meme precaution qu'en section 51 : WoodMart glisse parfois un
   span avec son propre habillage, on le remet a plat. */
.wd-products .wd-product p.wd-product-stock.stock.out-of-stock > *,
.woocommerce p.stock.out-of-stock > * {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
}

.wd-products .wd-product p.wd-product-stock.stock.out-of-stock > *::before,
.wd-products .wd-product p.wd-product-stock.stock.out-of-stock > *::after,
.woocommerce p.stock.out-of-stock > *::before,
.woocommerce p.stock.out-of-stock > *::after {
    content: none !important;
    display: none !important;
}

/* ---------- 83.5 Telephone ---------- */

@media (max-width: 767px) {

    .wd-products .wd-product p.wd-product-stock.stock.out-of-stock,
    .woocommerce p.stock.out-of-stock,
    p.fc-loop-stock.out-of-stock {
        padding: 6px 11px !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        white-space: normal;
        text-align: center;
    }
}

/* ============================================================
   SI TU PREFERES UN AUTRE TON

   Rouge sobre, plus alarmant mais encore lisible :
     --c: #b4551a  remplace par  #a3342a
     border-color  rgba(163, 52, 42, .28)
     background    rgba(163, 52, 42, .06)

   Et si tu ouvres les precommandes sur un produit en rupture,
   WooCommerce ecrit alors "Disponible sur commande" au lieu de
   "Rupture de stock", avec la classe available-on-backorder et
   non out-of-stock. Cette section ne l'attrapera pas. Dis le
   moi si tu actives cette option, je te donne la variante.
   ============================================================ */

/* ============================================================
   84. DEPLIAGE ACCESSIBLE AU CLAVIER SUR TELEPHONE
   Concerne les blocs Services et Reassurance de l'accueil.

   A coller apres la section 68 fusionnee.

   LE DEFAUT
   Le depliage des lignes repose sur une case a cocher portant
   l'attribut hidden :

       <input type="checkbox" id="..." class="fc-service__check" hidden>
       <label for="..." class="fc-service__q">Autonomie</label>
       <div class="fc-service__a">La reponse</div>

   L'attribut hidden vaut display: none. Un element en
   display: none n'est ni affiche, ni focalisable, ni annonce.
   La case sort donc de l'ordre de tabulation.

   Consequence sur telephone, la ou le depliage est le seul
   moyen d'atteindre les reponses : une personne qui navigue au
   clavier ou au lecteur d'ecran ne peut pas les ouvrir. Le
   contenu lui est simplement inaccessible.

   Sur ordinateur et tablette le probleme n'existe pas : la
   section 68 force display: block sur les reponses au dessus
   de 768 px, tout est deja lisible.

   CE QUE FAIT CETTE SECTION
   Sous 768 px uniquement, elle rend la case focalisable tout
   en la gardant invisible, par la technique du masquage
   accessible : un pixel, hors flux, decoupe. Elle reste
   invisible a l'oeil mais existe pour le clavier et pour les
   lecteurs d'ecran, qui l'annoncent comme une case a cocher
   avec le libelle de la ligne.

   Au dessus de 768 px, la case garde son display: none. C'est
   voulu : y laisser huit cases focalisables ajouterait huit
   arrets de tabulation qui ne feraient rien, puisque les
   reponses sont deja ouvertes.

   LE FOCUS DOIT SE VOIR
   Une case invisible qui recoit le focus ne montre rien. On
   reporte donc l'anneau de focus sur le libelle, le seul
   element visible de la paire.

   POURQUOI PAS details ET summary
   C'est la solution native, accessible sans aucune astuce. Mais
   elle demanderait de changer le balisage des deux widgets et
   de gerer l'ouverture forcee sur ordinateur, que le CSS seul
   ne sait pas imposer proprement. A garder en tete pour une
   refonte, pas pour aujourd'hui.
   ============================================================ */

@media (max-width: 767px) {

    /* La case redevient un element du document, donc focalisable,
       mais reste invisible. Le selecteur nomme l'attribut hidden
       pour passer devant la feuille du navigateur. */
    .fc-service__check[hidden],
    .fc-quick__check[hidden] {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* La case ne se voit pas : l'anneau de focus se pose sur le
       libelle, qui lui est visible. */
    .fc-service__check:focus-visible ~ .fc-service__q,
    .fc-quick__check:focus-visible ~ .fc-quick__q {
        outline: 2px solid var(--o);
        outline-offset: 3px;
        border-radius: 4px;
    }
}

/* ============================================================
   85. BLOC REASSURANCE EN VERSION TEAL
   Cartes blanches sur fond teal.

   A coller apres la section 84.

   QUAND ELLE SERT
   Uniquement si le conteneur Elementor du bloc Reassurance
   porte la classe fc-fond-teal. Sans elle, cette section ne
   s'applique nulle part et ne coute rien.

   LE PARTI PRIS, DIFFERENT DE LA SECTION 69
   La section 69 rend les cartes du bloc Services translucides
   sur le teal. Ici on garde les cartes blanches, franches, qui
   se detachent du fond. Les deux traitements sont valables ; il
   faut simplement qu'un seul des deux blocs de l'accueil soit
   en teal, sinon la repetition qu'on cherchait a casser revient.

   CE QU'ELLE CORRIGE
   La section 58 repeint tout ce qui vit dans .fc-fond-teal avec
   des couleurs prevues pour un fond sombre, et avec !important :

     .fc-fond-teal p  { color: var(--fc-teal-texte) !important }
     .fc-fond-teal a:not(.btn):not(.elementor-button)
                      { color: #ffffff !important }

   Sur des cartes restees blanches, ca donne :
     • les sous titres en teal tres pale sur blanc, illisibles
     • le lien Formulaire de contact en blanc sur blanc
     • le numero de telephone en blanc sur la pastille peche

   Cette section redonne a l'interieur des cartes les couleurs
   qu'il avait sur fond creme. L'en tete de section, lui, reste
   en clair puisqu'il est bien sur le teal.

   POURQUOI DES !important
   Les regles de la section 58 en portent. A priorite egale, il
   en faut pour repasser devant. Les selecteurs ci dessous
   nomment une classe de plus, donc ils gagnent aussi sur la
   specificite ; le !important ne sert qu'a neutraliser le sien.
   ============================================================ */

/* ---------- 85.1 L'en tete, sur le teal ---------- */

.fc-fond-teal .fc-quick__eyebrow {
    color: #8ed0cd !important;
}

.fc-fond-teal .fc-quick__maintitle {
    color: #ffffff !important;
}

/* ---------- 85.2 Les cartes restent blanches ---------- */

/* La section 58 ne touche pas au fond des cartes, mais on le
   reaffirme : si tu passes un jour en cartes translucides,
   c'est cette regle que tu changeras. */
.fc-fond-teal .fc-quick__card {
    background: #ffffff;
    border-color: #e6eeed;
    box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .45);
}

.fc-fond-teal .fc-quick__card:hover {
    border-color: #d9e6e5;
    box-shadow: 0 20px 38px -20px rgba(0, 0, 0, .55);
}

/* ---------- 85.3 Les textes dans les cartes ---------- */

/* Le titre de carte et les questions reprennent le teal */
.fc-fond-teal .fc-quick__title,
.fc-fond-teal .fc-quick__q {
    color: var(--fc-teal) !important;
}

/* Les sous titres et les reponses reprennent le gris doux.
   C'est la regle qui corrige « Tournee du mardi » et
   « Du lundi au vendredi ». */
.fc-fond-teal .fc-quick__sub,
.fc-fond-teal .fc-quick__a,
.fc-fond-teal .fc-quick__a p {
    color: #5d7375 !important;
}

/* ---------- 85.4 Les liens dans les cartes ---------- */

/* Sans ceci, la section 58 les passe en blanc : le lien
   disparait sur la carte blanche et le numero de telephone
   disparait sur sa pastille peche. */
.fc-fond-teal .fc-quick__link {
    color: var(--fc-teal) !important;
    text-decoration-color: rgba(33, 93, 96, .35);
}

.fc-fond-teal .fc-quick__link:hover {
    color: #c45d1f !important;
    text-decoration-color: currentColor;
}

.fc-fond-teal .fc-quick__badge,
.fc-fond-teal .fc-quick__badge--link {
    color: #c45d1f !important;
}

.fc-fond-teal .fc-quick__badge--link:hover {
    background: #E17731;
    border-color: #E17731;
    color: #ffffff !important;
}

/* ---------- 85.5 Les icones ---------- */

/* Le cercle peche et les icones de ligne gardent leurs couleurs
   d'origine : ils sont sur la carte blanche, pas sur le teal. */
.fc-fond-teal .fc-quick__ico svg {
    stroke: #c45d1f;
}

.fc-fond-teal .fc-quick__qico {
    stroke: #E17731;
}

/* ---------- 85.6 Les filets de separation ---------- */

.fc-fond-teal .fc-quick__item:not(:first-child) {
    border-top-color: #e6eeed;
}

/* ---------- 85.7 Impression ---------- */

@media print {

    .fc-fond-teal .fc-quick__card {
        box-shadow: none;
    }

    .fc-fond-teal .fc-quick__eyebrow,
    .fc-fond-teal .fc-quick__maintitle {
        color: #215d60 !important;
    }
}

/* ============================================================
   SI TU PREFERES DES CARTES TRANSLUCIDES, COMME LES SERVICES

   Remplace le bloc 85.2 par :

     .fc-fond-teal .fc-quick__card {
         background: rgba(255, 255, 255, .07);
         border-color: rgba(255, 255, 255, .14);
         box-shadow: none;
     }

   et inverse les couleurs de texte du bloc 85.3 : #ffffff pour
   les titres et les questions, #bcdbd9 pour les sous titres.
   Les liens passent alors en #f0a068, le seul orange qui tienne
   le contraste sur ce fond.
   ============================================================ */

/* ============================================================
   85 bis. CORRECTION DU BLOC 85.4
   Remplace le bloc 85.4 de la section 85. Colle ceci a la place,
   ou colle le juste apres la section 85 : il gagne de toute
   facon, il est plus loin dans le fichier et plus specifique.

   MON ERREUR
   Mes selecteurs du bloc 85.4 ne passaient pas devant la section
   58. J'avais sous estime le poids des :not().

     section 58 :
       .fc-fond-teal a:not(.btn):not(.elementor-button)
     section 85.4 :
       .fc-fond-teal .fc-quick__badge--link

   Chaque :not() compte pour autant que ce qu'il contient. Le
   selecteur de la section 58 pese donc trois classes plus un
   element, le mien deux classes seulement. Les deux portent
   !important, donc c'est la specificite qui tranche, et elle
   tranchait en faveur du blanc.

   MESURE AVANT, relevee sur le bloc Reassurance en teal :
     numero de telephone  rgb(255, 255, 255)  blanc sur peche
   MESURE APRES, avec les regles ci dessous :
     numero de telephone  rgb(196, 93, 31)
     fond de la pastille  rgb(253, 243, 236)
     lien Formulaire      rgb(33, 93, 96)
     sous titres          rgb(93, 115, 117)

   CE QUI CHANGE DANS LES SELECTEURS
   J'ajoute la classe du conteneur et le nom de l'element a
   l'ancre. On passe de deux classes a quatre classes plus un
   element. Ca suffit largement, et sans avoir besoin de
   recopier ses :not().
   ============================================================ */

/* ---------- 85.4 Les liens dans les cartes, corrige ---------- */

.fc-fond-teal .fc-quick .fc-quick__a a.fc-quick__link {
    color: var(--fc-teal) !important;
    text-decoration-color: rgba(33, 93, 96, .35);
}

.fc-fond-teal .fc-quick .fc-quick__a a.fc-quick__link:hover,
.fc-fond-teal .fc-quick .fc-quick__a a.fc-quick__link:focus-visible {
    color: #c45d1f !important;
    text-decoration-color: currentColor;
}

/* Le numero de telephone. La pastille peche exige l'orange
   fonce, un blanc dessus est illisible. */
.fc-fond-teal .fc-quick .fc-quick__a a.fc-quick__badge--link {
    color: #c45d1f !important;
}

.fc-fond-teal .fc-quick .fc-quick__a a.fc-quick__badge--link:hover,
.fc-fond-teal .fc-quick .fc-quick__a a.fc-quick__badge--link:focus-visible {
    background: #E17731;
    border-color: #E17731;
    color: #ffffff !important;
}

/* Les pastilles qui ne sont pas des liens ne subissaient pas le
   probleme, la section 58 ne repeint que les a. On garde la
   regle par coherence, sans surenchere. */
.fc-fond-teal .fc-quick__badge {
    color: #c45d1f !important;
}

/* ============================================================
   SI TU VEUX SUPPRIMER LA CAUSE PLUTOT QUE L'EFFET

   Le vrai coupable est la regle de la section 58 qui repeint en
   blanc tous les liens vivant dans .fc-fond-teal, sans se
   demander s'ils sont sur le fond teal ou sur une carte blanche
   posee dessus. On pourrait la borner :

     .fc-fond-teal a:not(.btn):not(.elementor-button):not(.fc-quick__link):not(.fc-quick__badge--link)

   Je ne le recommande pas. La liste s'allongerait a chaque
   nouveau bloc pose sur du teal, et une exception oubliee
   donnerait un texte blanc sur blanc, invisible, donc non
   detecte. Mieux vaut que chaque bloc reprenne ses couleurs,
   comme ici.
   ============================================================ */

/* ============================================================
   86. LE BOUTON FANTOME SUR TEAL, SANS LA SURBRILLANCE BLANCHE
   Concerne « Voir les dashcams » dans le bloc Services.

   A coller a la fin du fichier, apres la section 85 bis.

   D'OU VIENT LE BLANC
   Section 69, bloc 69.6 :

     .fc-fond-teal .fc-service__btn--ghost:hover {
         background: #ffffff;
         border-color: #ffffff;
         color: #113c3e !important;
         box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
     }

   Au survol, le bouton se remplit de blanc plein. Sur un fond
   teal sombre c'est un eclair : la tache la plus lumineuse de
   toute la page apparait d'un coup sous le curseur. Le bouton
   plein orange juste a cote, lui, ne bouge presque pas. Les deux
   boutons ne se comportent pas de la meme facon, et c'est le
   secondaire qui crie le plus fort.

   CE QUE FAIT CETTE SECTION
   Le survol reste lisible mais discret : un voile blanc tres
   leger, le contour qui se renforce, le texte qui reste blanc.
   Le bouton se signale sans changer de nature.

   POURQUOI PAS SIMPLEMENT SUPPRIMER LE SURVOL
   Parce qu'un bouton doit repondre quand on le survole. Sans
   aucun retour visuel on ne sait plus si c'est cliquable. Ici on
   garde la reponse, on baisse le volume.
   ============================================================ */

/* ---------- 86.1 Le survol, en voile au lieu du blanc plein ---------- */

.fc-fond-teal .fc-service__btn--ghost:hover,
.fc-fond-teal .fc-service__btn--ghost:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .75);
    color: #ffffff !important;
    box-shadow: none;
}

/* ---------- 86.2 L'etat au repos, un cran plus sobre ---------- */

/* Le contour de la section 69 est a 40 % de blanc. Si le bouton
   te parait encore trop clair au repos, cette regle le descend
   a 28 %. Supprime le bloc si tu trouves que ca l'efface trop. */
.fc-fond-teal .fc-service__btn--ghost {
    border-color: rgba(255, 255, 255, .28);
}

/* ---------- 86.3 Le clic ---------- */

/* Un enfoncement franc au moment du clic, pour compenser la
   discretion du survol. */
.fc-fond-teal .fc-service__btn--ghost:active {
    background: rgba(255, 255, 255, .2);
    transform: translateY(1px);
}

/* ============================================================
   DEUX VARIANTES, SI CELLE CI NE TE VA PAS

   Aucun remplissage du tout, seul le contour repond :

     .fc-fond-teal .fc-service__btn--ghost:hover {
         background: transparent;
         border-color: #ffffff;
         color: #ffffff !important;
         box-shadow: none;
     }

   Le survol en peche, pour rappeler l'orange de la marque
   plutot que le blanc :

     .fc-fond-teal .fc-service__btn--ghost:hover {
         background: rgba(224, 119, 49, .18);
         border-color: #f0a068;
         color: #ffffff !important;
         box-shadow: none;
     }

   Note que le focus clavier reste borde d'orange, la section
   69.7 s'en charge. Il doit rester bien visible, lui : c'est le
   seul repere d'une personne qui navigue au clavier.
   ============================================================ */

/* ============================================================
   87. LE CHAPEAU DU BLOC REASSURANCE
   Une seule nouveaute : la classe fc-quick__lead, qui n'existait
   que du cote Services sous le nom fc-service__lead.

   A coller apres la section 86.

   POURQUOI UNE REGLE ET PAS UNE REUTILISATION
   J'aurais pu poser fc-service__lead dans le bloc Reassurance,
   ca aurait marche tout de suite. Mais dans six mois, en lisant
   le HTML, tu te demanderais pourquoi un bloc porte le nom de
   l'autre. Trois lignes de CSS coutent moins cher qu'une
   hesitation.
   ============================================================ */

/* Le titre avait sa marge basse a zero puisque rien ne le
   suivait. Maintenant si. */
.fc-quick__head:has(.fc-quick__lead) .fc-quick__maintitle {
    margin-bottom: 12px;
}

.fc-quick__lead {
    margin: 0 auto;
    max-width: 58ch;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.65;
}

/* Sur fond teal, le chapeau suit les autres textes clairs */
.fc-fond-teal .fc-quick__lead {
    color: #bcdbd9 !important;
}

@media (max-width: 767px) {

    .fc-quick__lead {
        font-size: 14.5px;
    }
}

/* ============================================================
   SI TU N'AJOUTES PAS LE CHAPEAU

   Cette section ne s'applique alors nulle part et ne coute
   rien. Le :has() la rend inoffensive : sans paragraphe, la
   marge du titre ne bouge pas.
   ============================================================ */

/* ============================================================
   89. LA COUTURE ENTRE LES DEUX BLOCS TEAL
   Concerne les widgets Services (e632da6) et Reassurance
   (2649b00), tous deux porteurs de fc-fond-teal.

   A coller apres la section 88.

   LE DIAGNOSTIC, MESURE SUR LA PAGE PUBLIEE
   Le motif tatouage est un ::before pose sur chaque widget :

     background-size: cover
     background-position: 50% 50%
     opacity: .11

   Chaque bloc met donc le meme dessin a l'echelle de SA hauteur
   et le centre chez lui. Bloc Services : 1346 px de haut. Bloc
   Reassurance : 1331 px. Deux recadrages differents du meme
   dessin, colles bord a bord.

   Le fond, lui, est identique des deux cotes : rgb(17, 60, 62)
   partout. Ce n'est donc pas un probleme de couleur. C'est le
   motif qui trahit la jonction.

   CE QUE FAIT CETTE SECTION
   Elle efface progressivement le motif de part et d'autre de la
   jonction. Sur les 180 derniers pixels du bloc du haut et les
   180 premiers du bloc du bas, le dessin s'estompe jusqu'a
   disparaitre. Les deux blocs se rejoignent alors sur du teal
   nu, sans raccord visible.

   180 px, parce qu'en dessous de 120 le degrade lui meme se
   voit, et au dela de 250 on perd trop de motif.
   ============================================================ */

/* ---------- 89.1 L'espaceur de 30 px qui reste ---------- */

/* Mieux vaut le supprimer dans Elementor. Cette regle est un
   depannage si tu preferes ne pas y toucher tout de suite. */
.elementor-element-3b15842 {
    display: none;
}

/* ---------- 89.2 Le motif s'efface avant la jonction ---------- */

/* Le bloc du haut : le motif s'eteint sur ses 180 derniers px */
.elementor-element-e632da6.fc-fond-teal::before {
    -webkit-mask-image: linear-gradient(to bottom,
                        #000 0,
                        #000 calc(100% - 180px),
                        transparent 100%);
            mask-image: linear-gradient(to bottom,
                        #000 0,
                        #000 calc(100% - 180px),
                        transparent 100%);
}

/* Le bloc du bas : le motif s'allume sur ses 180 premiers px */
.elementor-element-2649b00.fc-fond-teal::before {
    -webkit-mask-image: linear-gradient(to bottom,
                        transparent 0,
                        #000 180px,
                        #000 100%);
            mask-image: linear-gradient(to bottom,
                        transparent 0,
                        #000 180px,
                        #000 100%);
}

/* ---------- 89.3 Telephone ---------- */

/* Les blocs sont bien plus hauts sur telephone, 180 px de
   degrade y passent inapercus. On les allonge un peu pour que
   la transition reste douce a l'echelle du bloc. */
@media (max-width: 767px) {

    .elementor-element-e632da6.fc-fond-teal::before {
        -webkit-mask-image: linear-gradient(to bottom,
                            #000 0,
                            #000 calc(100% - 240px),
                            transparent 100%);
                mask-image: linear-gradient(to bottom,
                            #000 0,
                            #000 calc(100% - 240px),
                            transparent 100%);
    }

    .elementor-element-2649b00.fc-fond-teal::before {
        -webkit-mask-image: linear-gradient(to bottom,
                            transparent 0,
                            #000 240px,
                            #000 100%);
                mask-image: linear-gradient(to bottom,
                            transparent 0,
                            #000 240px,
                            #000 100%);
    }
}

/* ============================================================
   DEUX AUTRES PISTES, ET POURQUOI JE NE LES PRENDS PAS

   1. background-attachment: fixed sur les deux ::before

      Le motif se calerait alors sur la fenetre et non sur le
      bloc. Les deux blocs montreraient donc le meme dessin,
      continu, sans aucune couture. C'est la solution elegante
      sur le papier.

      Je ne la prends pas : Safari sur iPhone ignore
      background-attachment: fixed depuis toujours, et la
      couture reviendrait exactement la ou tu ne la verrais
      pas en testant sur ordinateur. Elle cree aussi un effet
      de parallaxe au defilement que tu n'as pas demande.

   2. Enlever le motif du deuxieme bloc

      Une ligne, et la couture disparait puisqu'il n'y a plus
      qu'un motif. Mais le bloc Reassurance fait 1331 px de
      teal nu, et ca se voit : la page devient plus plate juste
      la ou elle doit rassurer.

      Si tu veux essayer quand meme :
        .elementor-element-2649b00.fc-fond-teal::before
          { display: none; }
      et remplace alors le bloc 89.2 du haut par un degrade qui
      descend jusqu'a zero, sinon le motif du bloc Services
      s'arretera net.
   ============================================================ */

/* ============================================================
   90. LE RUBAN CREME ENTRE LES DEUX BLOCS TEAL
   Ajoute la courbe qui manque en haut du bloc Reassurance.

   A coller apres la section 89.

   LE CONSTAT, MESURE SUR LA PAGE PUBLIEE
   Bloc Services  : finit a 3005, vague de 46 px a son pied
   Conteneur d8b92ea : 50 px de creme
   Bloc Reassurance : commence a 3055, bord franc et horizontal

   La vague occupe 46 des 50 px disponibles. Elle descend vers
   le creme, et quatre pixels plus bas le teal revient d'un
   coup, a plat. La courbe n'a pas la place d'aboutir.

   L'IDEE
   Plutot que d'agrandir la bande, on donne au bloc du bas la
   MEME courbe, a l'identique, non retournee. Les deux bords
   deviennent alors parallEles et la bande creme garde une
   epaisseur constante sur toute la largeur : un ruban qui
   ondule, pas une encoche.

   POURQUOI LA MEME COURBE ET PAS SON MIROIR
   Le miroir donnerait une bande en forme d'oeil, large au
   milieu et fine aux extremites, qui varierait ici de 50 a
   142 px. C'est un effet fort, tres graphique, mais qui
   attire l'oeil sur le raccord au lieu de le faire passer.
   La courbe repetee donne une epaisseur constante de 96 px.

   LE CALCUL, SI TU VEUX REGLER L'EPAISSEUR
     epaisseur du ruban = hauteur du conteneur d8b92ea + 46

   50 px donnent 96. Si tu veux un ruban plus fin, descends le
   conteneur a 30 px, ca donnera 76. En dessous de 60 px au
   total le ruban devient un liseré et l'effet se perd.
   ============================================================ */

/* ---------- 90.1 La courbe en haut du bloc Reassurance ---------- */

.elementor-element-2649b00.fc-fond-teal {
    position: relative;
}

/* Le meme dessin que la vague du bloc Services, mais avec le
   creme au dessus de la courbe au lieu d'en dessous. Le trace
   est identique au point pres. */
.elementor-element-2649b00.fc-fond-teal::after {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    z-index: 2;
    height: 46px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20L0%2032%20C%20220%20-2%20430%20-2%20640%2022%20C%20850%2046%201010%2046%201200%2018%20L1200%200%20Z%22%20fill%3D%22%23f9f7f2%22%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}

/* ---------- 90.2 Le sur titre ne doit pas passer dessous ---------- */

/* La courbe monte jusqu'a 46 px du haut du bloc, le rembourrage
   du bloc est de 54 px. Huit pixels de marge, c'est juste. On
   pousse un peu le contenu. */
.elementor-element-2649b00.fc-fond-teal .fc-quick__head {
    padding-top: 14px;
}

/* ---------- 90.3 Le motif ne doit pas traverser la courbe ---------- */

/* La section 89.2 eteignait deja le motif sur les 180 premiers
   pixels du bloc. C'est plus que suffisant, la courbe n'en fait
   que 46. Rien a changer, mais si tu supprimes un jour la
   section 89, remets au moins ceci. */
.elementor-element-2649b00.fc-fond-teal::before {
    top: 46px;
}

/* ---------- 90.4 Telephone ---------- */

/* Une vague de 46 px sur 390 px de large devient une pente
   raide et non plus une ondulation. On l'aplatit. */
@media (max-width: 767px) {

    .elementor-element-2649b00.fc-fond-teal::after {
        height: 28px;
    }

    .elementor-element-2649b00.fc-fond-teal::before {
        top: 28px;
    }

    .elementor-element-2649b00.fc-fond-teal .fc-quick__head {
        padding-top: 8px;
    }
}

/* ============================================================
   A VERIFIER APRES PUBLICATION

   La vague du bloc Services fait aussi 46 px sur telephone. Si
   tu aplatis celle du bas a 28, elles ne se repondent plus. Dis
   le moi et je te donne la regle qui met les deux a 28 sous
   768 px, il faut la poser sur .fc-vague-page et pas ici.
   ============================================================ */


/* ============================================================
   93. LE BLOC PRODUIT CENTRE ET ELARGI SUR ORDINATEUR

   REMPLACE LA SECTION 92. Supprime la 92 avant de coller
   celle ci, les deux se marcheraient dessus.

   J'AI TROUVE MIEUX QU'UN PROBLEME DE CENTRAGE
   En cherchant pourquoi le bloc etait decale, je suis tombe
   sur un vrai defaut du modele Elementor. Le conteneur qui
   porte les deux colonnes, 58074913, a une largeur de
   50,238 % alors que ses deux enfants en occupent 1 562 px. Les
   colonnes debordent donc de leur parent vers la droite, et le
   parent etant centre, le bloc entier part en biais.

   Le body du theme porte overflow-x: clip. Le debordement ne
   cree donc pas de barre de defilement : il est coupe, en
   silence.

   CE QUE J'AI MESURE, MODELE ACTUEL, FICHE DASHCAM

     fenetre 1280 px, largeur utile du document 1265
       bloc de 37 a 635, marge gauche 37, marge droite 630
       le bord droit du bloc prix tombe a 1566
       soit 301 px de prix et de bouton hors de l'ecran

     fenetre 1440 px, document 1425
       colonne resume de 731 a 1696
       271 px coupes

     fenetre 1920 px, document 1905
       bloc de 357 a 1936, marge gauche 357, marge droite -31
       31 px coupes

   Autrement dit, sur un portable 1280, ce qui est coupe n'est
   pas de la decoration : c'est le prix et le bouton Ajouter au
   panier. Je ne l'avais pas vu avant parce que je mesurais a
   808 px, ou les colonnes s'empilent.

   CE QUE FAIT CETTE SECTION
   Elle remet le conteneur a 100 %, lui donne une largeur reelle
   de 1 500 px maximum, le centre honnetement, et repartit les
   deux colonnes a 46 et 52,3 %, les 1,7 % restants etant
   l'ecart de 20 px entre elles.

   RESULTAT MESURE APRES

     fenetre 1280 : bloc 30 → 1235, marges 30 et 30
                    image 544 px, plus rien de coupe
     fenetre 1440 : bloc 30 → 1395, marges 30 et 30
                    image 618 px
     fenetre 1920 : bloc 203 → 1703, marges 203 et 203
                    image 680 px, contre 587 avant

   Sur grand ecran l'image gagne 93 px, 16 %, et le bloc est
   parfaitement centre. Sur 1280 l'image perd 43 px, mais la
   page cesse d'amputer son propre bouton d'achat. Ce n'est pas
   un compromis, c'est une reparation.

   POURQUOI min() ET calc() PLUTOT QU'UNE VALEUR FIXE
   Le bloc doit pouvoir depasser la largeur du conteneur
   WoodMart, qui est plafonne a 1 222 px, sans jamais depasser
   la fenetre. min(1500px, 100vw - 60px) fait exactement ca :
   1 500 quand il y a la place, la fenetre moins 60 sinon. La
   marge gauche negative symetrique le recentre.

   CE QUE JE N'AI PAS FAIT, ET POURQUOI
   J'aurais pu elargir le conteneur WoodMart lui meme, en
   passant main.container de 1 222 a 1 600 px sur les fiches
   produit. Ca marche, je l'ai teste. Mais ca elargit aussi la
   description, les avis et les produits lies, qui sont du
   texte : des lignes de 1 600 px sont illisibles. Mieux vaut
   n'elargir que le bloc qui contient une image.
   ============================================================ */

@media (min-width: 1025px) {

    /* Le conteneur des deux colonnes : pleine largeur, plafonne,
       centre. Le calc de la marge gauche vaut la moitie de la
       largeur du parent moins la moitie de la largeur voulue. */
    .elementor-34419 .elementor-element.elementor-element-58074913 {
        --width: 100% !important;
        max-width: none !important;
        width: min(1500px, calc(100vw - 60px)) !important;
        margin-left: calc(50% - min(750px, calc(50vw - 30px))) !important;
    }

    /* La colonne de la galerie */
    .elementor-34419 .elementor-element.elementor-element-3f9ac250 {
        --width: 46% !important;
    }

    /* La colonne du resume, prix et boutons */
    .elementor-34419 .elementor-element.elementor-element-2e4c7468 {
        --width: 52.3% !important;
    }
}

/* ============================================================
   REGLAGES

   LA LARGEUR MAXIMALE  1500px, aux deux endroits : min(1500px…)
                        et min(750px…), qui en est la moitie.
                        Si tu changes l'un, change l'autre, sinon
                        le centrage part de travers.
                        1400 est plus sage si tu trouves le bloc
                        trop etale sur un ecran 27 pouces.

   LE PARTAGE           46 et 52,3. Leur somme doit rester a
                        98,3 : les 1,7 % manquants sont l'ecart
                        de 20 px entre les colonnes.
                        50 et 48,3 pour une image encore plus
                        grande. Je ne depasserais pas : a 50 %
                        la colonne de droite passe sous 720 px a
                        1500 et tes trois arguments a picto
                        commencent a tenir sur trois lignes.

   LES MARGES LATERALES 60px dans le calc, soit 30 de chaque
                        cote quand la fenetre est le facteur
                        limitant. C'est ce qui evite que le bloc
                        touche les bords sur un portable.

   A VERIFIER APRES AVOIR COLLE
   Regarde la fiche produit a trois largeurs : plein ecran, une
   fenetre reduite a la moitie de l'ecran, et le telephone. Sous
   1025 px rien ne doit changer, les colonnes s'empilent deja.
   Si une fiche a un resume beaucoup plus court que celle de la
   dashcam, la colonne de droite aura du blanc en bas : c'est
   normal, la galerie est plus haute qu'elle.
   ============================================================ */


/* ============================================================
   95. EQUILIBRER LES DEUX COLONNES DU TUNNEL

   A coller a la fin du fichier, apres la section 94.

   Cette section va avec un changement d'une ligne dans le
   functions.php, decrit dans fenuaclick-php-reassure-gauche.txt.
   Le CSS seul apporte la moitie du gain ; les deux ensemble
   apportent tout.

   LE CONSTAT, MESURE SUR UN PANIER DE TEST A 1600 px

     colonne gauche, le formulaire     814 px
     colonne droite, le recapitulatif  1404 px
     ecart                             590 px

     fin du formulaire de gauche       y = 1388
     haut du bouton COMMANDER          y = 1681
     le bouton est donc 293 px plus bas que l'endroit ou le
     regard du client arrive

   C'est ce dernier chiffre qui compte. Le client remplit son
   adresse, il termine, et le bouton n'est pas en face : il est
   un ecran plus bas, de l'autre cote. La difference de hauteur
   n'est que le symptome.

   LE DETAIL DE LA COLONNE DE DROITE
     tableau de commande                326
     moyens de paiement                 415
     bloc du bas                        439
       dont texte RGPD et case CGV      183
       dont bouton                       67
       dont reassurance sous le bouton  142

   CE QUE FAIT CETTE SECTION
   Elle resserre la typographie du pavé RGPD, qui se trouve
   juste au dessus du bouton. Chaque pixel gagne la fait
   remonter d'autant.

   Elle prepare aussi le bloc de reassurance a vivre en bas de
   la colonne de gauche, une fois le hook PHP change. Les regles
   sont ecrites pour tenir aux deux endroits : si tu ne fais pas
   le changement PHP, rien ne casse.

   MESURE APRES LES DEUX CHANGEMENTS, SIMULES EN DIRECT

     colonne gauche    814  →  956
     colonne droite   1404  → 1193
     ecart             590  →  237
     decalage du bouton 293 →   98

   Le bouton passe de 293 a 98 px sous la fin du formulaire. Il
   redevient visible au moment ou le client a fini de taper.
   ============================================================ */

/* ---------- 95.1 Le pave RGPD, resserre ---------- */

/* Il est juste au dessus du bouton. Le resserrer le fait
   remonter. On ne supprime rien du texte, c'est une mention
   legale : on reduit le corps et l'interligne, comme pour une
   note de bas de page, ce qu'elle est. */
.woocommerce-checkout .woocommerce-privacy-policy-text p {
    margin-bottom: 8px;
    font-size: 12.5px;
    line-height: 1.45;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 14px;
}

/* ---------- 95.2 La reassurance, valable des deux cotes ---------- */

/* Aujourd'hui le bloc vit sous le bouton, a droite. Apres le
   changement PHP il vivra en bas du formulaire, a gauche. Ces
   regles ne nomment pas la colonne, donc elles tiennent dans
   les deux cas. */
.woocommerce-checkout .fc-reassure {
    margin-top: 18px;
}

/* Dans la colonne de gauche il a plus de place : on le laisse
   respirer un peu plus, et on le separe du champ de notes par
   un filet. */
.woocommerce-checkout .customer-details .fc-reassure {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(26, 58, 58, .12);
}

/* ---------- 95.3 Les colonnes ---------- */

/* Elles restent alignees par le haut. Les centrer
   verticalement mettrait le tableau de commande plus bas que
   le premier champ du formulaire, ce qui est pire : le client
   doit pouvoir verifier ce qu'il achete avant de taper. */
.woocommerce-checkout form.checkout {
    align-items: flex-start;
}

/* ============================================================
   CE QUE JE N'AI PAS FAIT, ET POURQUOI

   RENDRE LE RECAPITULATIF COLLANT
   L'idee est tentante : le bouton suivrait le defilement. Mais
   la colonne de droite fait 1193 px apres corrections, pour une
   fenetre de 900. Un element plus haut que la fenetre ne peut
   pas coller proprement en CSS seul : il se fige par le haut et
   son bas devient inatteignable. Il faudrait du JavaScript.

   EGALISER LES DEUX COLONNES
   On pourrait etirer la colonne de gauche a la hauteur de
   l'autre. Ca ne ferait que deplacer le vide, sans rapprocher
   le bouton du regard.

   LE TEXTE RGPD LUI MEME
   Il vient d'un reglage WooCommerce, pas du theme, donc aucun
   CSS ne peut le raccourcir. Si tu veux gagner encore 40 px,
   va dans WooCommerce, Reglages, Avance, Confidentialite, et
   remplace le texte par quelque chose comme :

     Vos donnees servent a traiter votre commande et a vous
     accompagner sur le site. Le detail est dans notre
     [privacy_policy].

   Le jeton [privacy_policy] pose le lien tout seul.
   ============================================================ */


/* ============================================================
   96. STYLES RAPATRIES DEPUIS LE functions.php

   A coller a la fin du fichier, apres la section 95.

   COLLE CETTE SECTION AVANT DE COLLER LE functions.php v4.
   Dans l'autre sens, tu perdrais la mise en forme de l'encadre
   des cables, de la note d'acompte et du libelle orange des
   consignes de livraison entre les deux operations.

   D'OU CA VIENT
   Le functions.php posait cinq blocs <style> dans wp_head, dans
   ses sections 2, 7, 14, 16 et 17. Chacun etait conditionne a
   une page : panier, commande, fiche produit.

   POURQUOI LES DEPLACER
   Un <style> dans wp_head est reecrit dans le HTML a chaque
   chargement de page, donc jamais mis en cache par le
   navigateur. Ici ca representait environ 3 ko de HTML sur
   chaque page du tunnel, rechargés a chaque etape. Dans la
   feuille de style, ils sont telecharges une fois et gardes.

   Et surtout : tant qu'une regle vit dans le PHP, tu ne peux
   pas la corriger depuis le CSS, et le CSS ne peut pas la
   surcharger sans !important. Tout au meme endroit, c'est un
   seul endroit ou chercher.

   CE QUI A CHANGE DANS LE TRANSFERT
   Rien dans les valeurs, tout a ete recopie a l'identique. Deux
   selecteurs ont ete precises, parce que le PHP faisait le tri
   par page et que le CSS ne le fait pas : voir 96.1 et 96.2.
   ============================================================ */

/* ---------- 96.1 Panier : message de livraison ---------- */

/* Venait de la section 2 du PHP, conditionnee a is_cart().
   Le prefixe .woocommerce-cart remplace cette condition. */
.woocommerce-cart .shipping-msg-custom {
    color: #e67e22 !important;
    font-weight: 600;
    font-style: italic;
}

.woocommerce-cart .woocommerce-shipping-calculator,
.woocommerce-cart .shipping-calculator-button {
    display: none !important;
}

/* ---------- 96.2 Consignes de livraison, libelle orange ---------- */

/* Venait de la section 7 du PHP, conditionnee a is_checkout().
   Le prefixe .woocommerce-checkout remplace cette condition. */
.woocommerce-checkout #order_comments_field label {
    color: #e67e22 !important;
    font-weight: bold !important;
}

/* ---------- 96.3 Encadre des deux cables ---------- */

/* Venait de la section 14 du PHP. Aucun prefixe ajoute : la
   classe fc-encadre-cables n'est posee que sur les pages
   concernees, le tri se fait tout seul. */
.fc-encadre-cables {
    border: 1px solid #e67e22;
    border-left: 4px solid #e67e22;
    border-radius: 4px;
    background: #fff;
    padding: 14px 16px;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
}

.fc-encadre-cables strong {
    display: block;
    margin-bottom: 6px;
    color: #e67e22;
}

.fc-encadre-cables .fc-communes {
    color: #555;
    font-size: 13px;
}

tr.fc-ligne-cables td {
    padding: 10px 12px !important;
    color: #e67e22 !important;
    font-weight: 600;
    font-size: 13px;
    text-align: center !important;
}

tr.fc-ligne-cables td .fc-texte-cables {
    display: block;
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.45;
    text-align: center !important;
}

@media (max-width: 767px) {

    tr.fc-ligne-cables td {
        padding: 10px 6px !important;
        font-size: 12px;
    }

    tr.fc-ligne-cables td .fc-texte-cables {
        max-width: 100%;
    }
}

/* ---------- 96.4 Note du solde a regler a la livraison ---------- */

/* Venait de la section 16 du PHP. */
tr.fc-ligne-solde td {
    border-top: 1px solid #eee;
    padding: 10px 12px !important;
    text-align: center !important;
}

tr.fc-ligne-solde .fc-note-solde {
    display: block;
    max-width: 420px;
    margin: 0 auto;
    color: #e67e22;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.45;
    text-align: center !important;
}

@media (max-width: 767px) {

    tr.fc-ligne-solde td {
        padding: 10px 6px !important;
    }

    tr.fc-ligne-solde .fc-note-solde {
        max-width: 100%;
        font-size: 12px;
    }
}

/* ---------- 96.5 Note sur le paiement a la livraison ---------- */

/* Venait de la section 17 du PHP. */
.fc-note-paiement {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-left: 4px solid #e67e22;
    background: #fff;
    color: #e67e22;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.45;
}

/* ---------- 96.6 Logo OSB des moyens de paiement ---------- */

/* Ces cinq declarations etaient ecrites dans l'attribut style
   de la balise img, en dur dans le PHP. Un style en ligne bat
   toute regle CSS sans !important, et celles ci en portaient
   en plus : la mise en forme du logo etait donc intouchable
   depuis cette feuille. Ici elle redevient modifiable. */
.custom-osb-logo {
    display: inline-block;
    max-height: 35px;
    width: auto;
    margin-left: 10px;
    vertical-align: middle;
}

/* ============================================================
   CE QUI RESTE DANS LE PHP, ET POURQUOI

   La section 8 du functions.php contient une longue feuille de
   style pour les e-mails, passee par le filtre
   woocommerce_email_styles. Elle doit rester la : un e-mail ne
   charge pas la feuille de style du site, ses regles doivent
   etre embarquees dans le message lui meme. Ce n'est pas un
   oubli.
   ============================================================ */


/* ============================================================
   97. PRODUITS MIS EN AVANT, SANS CADRE
   Le bloc wd-highlighted-products de WoodMart s'entoure d'un
   filet qui double celui des cartes produit a l'interieur.
   ============================================================ */

.wd-highlighted-products {
    border: none !important;
}


/* ============================================================
   98. FICHE PRODUIT : DESCRIPTION ET AVIS

   Elle est deja integree a la fin de ce fichier.

   CE QUE J'AI VU DE TA DESCRIPTION
   J'ai releve la structure de la fiche dashcam. Elle contient,
   dans l'ordre : un titre, un paragraphe d'introduction, sept
   sous titres de caracteristiques, une section Contenu et
   options du pack avec deux options, un tableau de huit
   specifications, trois conseils, cinq questions reponses et
   deux liens de telechargement.

   C'est beaucoup de matiere, et c'est une bonne chose. Le
   probleme n'est donc pas le contenu, c'est qu'il arrive tout
   d'un bloc : des titres de la meme taille que le texte, aucune
   separation visible, et le lecteur ne sait pas ou il en est.

   CE QUE FAIT CETTE SECTION
   Elle donne une identite visuelle a chaque niveau de titre, de
   l'air entre les sections, un vrai tableau pour les
   specifications, une mise en forme lisible des listes et des
   liens de telechargement, et elle remet en forme le bloc des
   avis que tu avais supprime.

   IMPORTANT, LE CIBLAGE
   Je n'ai pas pu inspecter le site en direct, le navigateur
   n'etait pas joignable. J'ai donc cible le conteneur standard
   WooCommerce de l'onglet description, et j'ai ajoute en
   secours la classe fc-desc.

   Si apres avoir colle tu ne vois aucun changement, c'est que ta
   description n'est pas dans cet onglet mais dans un bloc
   Elementor. Dans ce cas, ajoute la classe fc-desc au bloc qui
   contient la description, onglet Avance, champ Classes CSS, et
   tout se declenche. Dis le moi et je verifie.

   LE GARDE FOU ELEMENTOR
   Tu m'as montre la fiche du traqueur pour animaux : sa
   description est construite avec des blocs Elementor, pas avec
   des titres classiques, et elle a deja ses propres cartes et
   ses propres barres orange. Si j'appliquais la mise en forme
   ci dessous par dessus, tu aurais deux barres et un filet au
   milieu de chaque carte.

   Toutes les regles de la description sont donc conditionnees a
   :not(:has(.elementor-element)). Traduction : elles ne se
   declenchent que si la description NE contient PAS de bloc
   Elementor. Les fiches construites dans Elementor ne bougent
   pas d'un pixel, les fiches redigees dans l'editeur classique
   sont mises en forme.

   Le bloc des avis, lui, n'est jamais construit dans Elementor :
   la partie 98.14 s'applique dans tous les cas.

   Les styles ne s'appliquent qu'a l'interieur de la description
   et du bloc des avis. Rien ailleurs sur le site ne peut bouger.
   ============================================================ */

/* ---------- 98.1 Les variables de la section ---------- */

/* Elles reprennent tes couleurs. Si tu veux changer la teinte
   des titres de section, c'est ici et nulle part ailleurs. */
.woocommerce-Tabs-panel--description,
.fc-desc,
#reviews {
    --fcd-teal: var(--fc-teal, #23726d);
    --fcd-orange: #e67e22;
    --fcd-orange-fonce: #c45d1f;
    --fcd-trait: #e8eceb;
    --fcd-fond: #f7f9f9;
    --fcd-texte: #4a5553;
}

/* ---------- 98.2 La base de la description ---------- */

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)),
.fc-desc {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--fcd-texte);
    max-width: 920px;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) p,
.fc-desc p {
    margin: 0 0 16px;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) > *:first-child,
.fc-desc > *:first-child {
    margin-top: 0;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) > *:last-child,
.fc-desc > *:last-child {
    margin-bottom: 0;
}

/* Le paragraphe d'introduction, celui qui suit le titre
   principal, prend un corps legerement plus grand. C'est lui qui
   donne le ton, autant qu'il se distingue. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) > h2:first-child + p,
.fc-desc > h2:first-child + p {
    font-size: 17px;
    line-height: 1.7;
    color: #3d4746;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--fcd-trait);
    margin-bottom: 28px;
}

/* ---------- 98.3 Le titre principal ---------- */

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h2,
.fc-desc h2 {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--fcd-teal);
    margin: 48px 0 18px;
    letter-spacing: -0.01em;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h2:first-child,
.fc-desc h2:first-child {
    margin-top: 0;
}

/* ---------- 98.4 Les titres de section, le coeur du sujet ---------- */

/* C'est ce niveau qui portait tes sept caracteristiques, le
   contenu du pack, les specifications, les conseils et la foire
   aux questions. C'est donc lui qui doit faire voir les
   sections.

   Trois choses le rendent visible : un filet qui separe de la
   section precedente, une grande respiration au dessus, et une
   barre teal collee a gauche du titre. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h3,
.fc-desc h3 {
    position: relative;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--fcd-teal);
    margin: 44px 0 16px;
    padding: 24px 0 0 16px;
    border-top: 1px solid var(--fcd-trait);
}

/* La barre verticale. Elle demarre sous le filet, pas dessus. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h3::before,
.fc-desc h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    bottom: 2px;
    width: 4px;
    border-radius: 2px;
    background: var(--fcd-orange);
}

/* Le premier titre de section n'a pas de section avant lui,
   donc pas de filet. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h3:first-child,
.fc-desc h3:first-child,
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h2 + h3,
.fc-desc h2 + h3 {
    border-top: 0;
    padding-top: 0;
    margin-top: 28px;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h2 + h3::before,
.fc-desc h2 + h3::before,
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h3:first-child::before,
.fc-desc h3:first-child::before {
    top: 2px;
}

/* ---------- 98.5 Le niveau en dessous ---------- */

/* Utile pour les questions de la foire aux questions et pour
   les deux options du pack. Plus discret, sans filet, mais
   clairement au dessus du texte courant. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h4,
.fc-desc h4 {
    font-size: 16.5px;
    line-height: 1.4;
    font-weight: 600;
    color: #2f3a39;
    margin: 26px 0 8px;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h5,
.fc-desc h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--fcd-orange-fonce);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 22px 0 8px;
}

/* ---------- 98.6 Les listes ---------- */

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) ul,
.fc-desc ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 18px;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) ul li,
.fc-desc ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 9px;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) ul li::before,
.fc-desc ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fcd-orange);
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) ol,
.fc-desc ol {
    padding-left: 22px;
    margin: 0 0 18px;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) ol li,
.fc-desc ol li {
    margin-bottom: 9px;
    padding-left: 4px;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) li::marker,
.fc-desc li::marker {
    color: var(--fcd-orange);
    font-weight: 600;
}

/* Les listes imbriquees passent au carre, pour qu'on voie le
   changement de niveau. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) ul ul li::before,
.fc-desc ul ul li::before {
    border-radius: 1px;
    background: #b9c4c2;
    width: 6px;
    height: 6px;
}

/* ---------- 98.7 Le tableau des specifications ---------- */

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table,
.fc-desc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 15px;
    border: 1px solid var(--fcd-trait);
    border-radius: 8px;
    overflow: hidden;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table th,
.fc-desc table th {
    background: var(--fcd-teal);
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 12px 16px;
    border: 0;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table td,
.fc-desc table td {
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--fcd-trait);
    vertical-align: top;
}

/* La premiere colonne porte le nom de la caracteristique.
   Resolution, Angle de vue, Reseau. Elle devient le libelle. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table td:first-child,
.fc-desc table td:first-child {
    width: 38%;
    font-weight: 600;
    color: var(--fcd-teal);
    background: var(--fcd-fond);
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table tr:first-child td,
.fc-desc table tr:first-child td {
    border-top: 0;
}

/* Une ligne sur deux, tres legerement teintee. Sur un tableau de
   huit lignes, ca evite de sauter une ligne en lisant. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table tbody tr:nth-child(even) td:not(:first-child),
.fc-desc table tbody tr:nth-child(even) td:not(:first-child) {
    background: #fcfdfd;
}

/* WoodMart met parfois ses propres bordures sur les tableaux de
   description. On les neutralise ici, dans ce contexte seulement. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table.shop_attributes td,
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table.shop_attributes th,
.fc-desc table.shop_attributes td,
.fc-desc table.shop_attributes th {
    font-style: normal;
}

/* ---------- 98.8 Les liens de telechargement ---------- */

/* Tes deux fichiers, la notice et le flyer, meritent mieux
   qu'un lien souligne au milieu du texte. Ajoute la classe
   fc-dl au lien et il devient un bouton de fichier. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) a.fc-dl,
.fc-desc a.fc-dl {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 14px;
    margin: 0 10px 10px 0;
    border: 1px solid var(--fcd-teal);
    border-radius: 6px;
    background: #fff;
    color: var(--fcd-teal);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) a.fc-dl::before,
.fc-desc a.fc-dl::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) a.fc-dl:hover,
.fc-desc a.fc-dl:hover {
    background: var(--fcd-teal);
    color: #fff;
}

/* ---------- 98.9 L'encadre de conseil ---------- */

/* Pour tes trois conseils Fenua Click. Ajoute la classe fc-tip
   a l'element qui les contient. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-tip,
.fc-desc .fc-tip {
    position: relative;
    margin: 0 0 24px;
    padding: 20px 22px 20px 24px;
    background: #fffaf4;
    border: 1px solid #f3dcc3;
    border-left: 4px solid var(--fcd-orange);
    border-radius: 6px;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-tip > *:last-child,
.fc-desc .fc-tip > *:last-child {
    margin-bottom: 0;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-tip li::before,
.fc-desc .fc-tip li::before {
    background: var(--fcd-orange-fonce);
}

/* ---------- 98.10 Les deux options du pack ---------- */

/* Ta section Contenu et options du pack compare deux offres,
   avec pose et sans pose. Comparer deux choses dans deux
   paragraphes qui se suivent est le plus mauvais format : on
   lit la premiere, on oublie, on lit la seconde.

   Mets les deux options cote a cote. Le fichier HTML joint te
   donne le balisage a coller. Sous 860 px elles s'empilent. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-packs,
.fc-desc .fc-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 4px 0 28px;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-pack,
.fc-desc .fc-pack {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 24px;
    background: #fff;
    border: 1px solid var(--fcd-trait);
    border-top: 3px solid var(--fcd-teal);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

/* La variante mise en avant, pour l'option avec pose. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-pack--phare,
.fc-desc .fc-pack--phare {
    border-top-color: var(--fcd-orange);
    background: #fffdfb;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-pack__etiquette,
.fc-desc .fc-pack__etiquette {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--fcd-fond);
    color: var(--fcd-teal);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-pack--phare .fc-pack__etiquette,
.fc-desc .fc-pack--phare .fc-pack__etiquette {
    background: var(--fcd-orange);
    color: #fff;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-pack__titre,
.fc-desc .fc-pack__titre {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #2f3a39;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-pack__sous,
.fc-desc .fc-pack__sous {
    margin: 0 0 16px;
    font-size: 14px;
    color: #7b8584;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-pack ul,
.fc-desc .fc-pack ul {
    margin: 0;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-pack ul li,
.fc-desc .fc-pack ul li {
    font-size: 14.5px;
    margin-bottom: 8px;
}

/* ---------- 98.11 La foire aux questions ---------- */

/* Tes cinq questions prennent beaucoup de hauteur alors que le
   lecteur n'en cherche qu'une. En depliant, la section tient en
   cinq lignes et chacun ouvre la sienne.

   Le balisage est dans le fichier HTML joint. Si tu preferes
   garder tes questions en titres simples, la section 98.5 les
   met deja en forme : cette partie ne sert alors a rien. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq,
.fc-desc .fc-faq {
    margin: 0 0 26px;
    border: 1px solid var(--fcd-trait);
    border-radius: 8px;
    overflow: hidden;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq details,
.fc-desc .fc-faq details {
    border-bottom: 1px solid var(--fcd-trait);
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq details:last-child,
.fc-desc .fc-faq details:last-child {
    border-bottom: 0;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq summary,
.fc-desc .fc-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    background: #fff;
    color: #2f3a39;
    font-size: 15.5px;
    font-weight: 600;
    transition: background .18s ease;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq summary::-webkit-details-marker,
.fc-desc .fc-faq summary::-webkit-details-marker {
    display: none;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq summary:hover,
.fc-desc .fc-faq summary:hover {
    background: var(--fcd-fond);
}

/* Le chevron, dessine en CSS pour ne rien charger. */
.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq summary::after,
.fc-desc .fc-faq summary::after {
    content: "";
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--fcd-orange);
    border-bottom: 2px solid var(--fcd-orange);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .22s ease;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq details[open] summary,
.fc-desc .fc-faq details[open] summary {
    background: var(--fcd-fond);
    color: var(--fcd-teal);
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq details[open] summary::after,
.fc-desc .fc-faq details[open] summary::after {
    transform: rotate(225deg) translateY(-2px);
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq__rep,
.fc-desc .fc-faq__rep {
    padding: 4px 18px 20px;
    font-size: 15px;
    color: var(--fcd-texte);
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq__rep > *:last-child,
.fc-desc .fc-faq__rep > *:last-child {
    margin-bottom: 0;
}

/* ---------- 98.12 Les images dans la description ---------- */

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) img,
.fc-desc img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 6px 0 18px;
}

/* ---------- 98.13 Le texte en gras et les liens ---------- */

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) strong,
.fc-desc strong {
    color: #2f3a39;
    font-weight: 600;
}

.woocommerce-Tabs-panel--description:not(:has(.elementor-element)) a:not(.fc-dl):not(.button),
.fc-desc a:not(.fc-dl):not(.button) {
    color: var(--fcd-orange-fonce);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ============================================================
   98.14 LE BLOC DES AVIS

   Tu avais supprime le CSS des avis parce qu'il cassait quelque
   chose. Je repars donc de zero, en restant sur le balisage
   standard WooCommerce et en ne touchant qu'a l'interieur de
   #reviews. Rien ici ne peut atteindre le reste du site.

   Deux avis seulement pour l'instant, donc l'enjeu n'est pas la
   densite mais la credibilite : un avis doit ressembler a un
   avis, avec un auteur, une date et une note lisibles.
   ============================================================ */

#reviews {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--fcd-texte);
}

#reviews .woocommerce-Reviews-title,
#reviews h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--fcd-teal);
    margin: 0 0 22px;
}

/* La liste. On enleve la puce et les marges par defaut. */
#reviews ol.commentlist {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    gap: 16px;
}

#reviews ol.commentlist li {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

#reviews ol.commentlist li::before {
    content: none;
}

/* Chaque avis devient une carte. */
#reviews .comment_container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--fcd-trait);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}

#reviews .comment_container img.avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--fcd-fond);
    position: static;
}

#reviews .comment-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* L'auteur et la date sur une ligne, la note au dessus. */
#reviews .comment-text .star-rating {
    float: none;
    margin: 0 0 8px;
    font-size: 15px;
}

#reviews .comment-text .star-rating span::before,
#reviews .star-rating span::before {
    color: var(--fcd-orange);
}

#reviews .comment-text .meta {
    margin: 0 0 10px;
    font-size: 14px;
    color: #8a9392;
}

#reviews .comment-text .meta strong {
    display: inline;
    font-size: 15.5px;
    font-weight: 600;
    color: #2f3a39;
}

#reviews .comment-text .meta time {
    color: #8a9392;
}

/* La pastille Achat verifie, si ton module la pose. */
#reviews .comment-text .woocommerce-review__verified,
#reviews .comment-text .meta .verified {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 20px;
    background: #eef6f5;
    color: var(--fcd-teal);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-style: normal;
}

#reviews .comment-text .description p:last-child {
    margin-bottom: 0;
}

/* Le message quand il n'y a pas encore d'avis. */
#reviews .woocommerce-noreviews {
    margin: 0 0 26px;
    padding: 18px 20px;
    background: var(--fcd-fond);
    border: 1px dashed #cfdbd9;
    border-radius: 8px;
    color: #6b7574;
}

/* ---------- 98.15 Le formulaire d'avis ---------- */

#reviews #review_form_wrapper {
    margin-top: 8px;
    padding: 24px 24px 26px;
    background: var(--fcd-fond);
    border: 1px solid var(--fcd-trait);
    border-radius: 8px;
}

#reviews #reply-title {
    display: block;
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--fcd-teal);
}

#reviews .comment-notes {
    margin: 0 0 18px;
    font-size: 14px;
    color: #7b8584;
}

#reviews .comment-form-rating label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14.5px;
    color: #2f3a39;
}

#reviews .comment-form p {
    margin: 0 0 16px;
}

#reviews .comment-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: #2f3a39;
}

#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #d8e0df;
    border-radius: 6px;
    background: #fff;
    font-size: 15px;
    font-family: inherit;
    color: #2f3a39;
    transition: border-color .18s ease, box-shadow .18s ease;
}

#reviews .comment-form input[type="text"]:focus,
#reviews .comment-form input[type="email"]:focus,
#reviews .comment-form textarea:focus {
    outline: none;
    border-color: var(--fcd-teal);
    box-shadow: 0 0 0 3px rgba(35, 114, 109, .12);
}

#reviews .comment-form textarea {
    min-height: 130px;
    resize: vertical;
}

/* Les deux champs nom et e mail cote a cote, il y a la place. */
@media (min-width: 600px) {

    #reviews .comment-form .comment-form-author,
    #reviews .comment-form .comment-form-email {
        display: inline-block;
        width: calc(50% - 8px);
        vertical-align: top;
    }

    #reviews .comment-form .comment-form-author {
        margin-right: 14px;
    }
}

#reviews .comment-form .form-submit {
    margin-bottom: 0;
}

/* ============================================================
   98.16 LE TELEPHONE ET LA TABLETTE

   Les reglages ci dessous ne descendent pas simplement les
   tailles : ils reduisent les respirations, qui sur mobile
   coutent un defilement entier, et ils transforment le tableau
   des specifications en liste libelle valeur.
   ============================================================ */

@media (max-width: 1024px) {

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)),
    .fc-desc {
        max-width: none;
    }
}

@media (max-width: 767px) {

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)),
    .fc-desc {
        font-size: 15px;
        line-height: 1.7;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h2,
    .fc-desc h2 {
        font-size: 21px;
        margin: 34px 0 14px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) > h2:first-child + p,
    .fc-desc > h2:first-child + p {
        font-size: 15.5px;
        padding-bottom: 16px;
        margin-bottom: 22px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h3,
    .fc-desc h3 {
        font-size: 18px;
        margin: 30px 0 12px;
        padding: 18px 0 0 13px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h3::before,
    .fc-desc h3::before {
        top: 20px;
        width: 3px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) h4,
    .fc-desc h4 {
        font-size: 15.5px;
        margin: 20px 0 6px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) ul li,
    .fc-desc ul li {
        padding-left: 20px;
        margin-bottom: 8px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) ul li::before,
    .fc-desc ul li::before {
        left: 2px;
        width: 6px;
        height: 6px;
        top: 9px;
    }

    /* Le tableau devient une suite de paires. L'en tete disparait,
       la premiere colonne devient le libelle au dessus de la
       valeur. Aucun defilement lateral, et rien de coupe. */
    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table,
    .fc-desc table {
        display: block;
        border: 0;
        font-size: 14.5px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table thead,
    .fc-desc table thead {
        display: none;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table tbody,
    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table tr,
    .fc-desc table tbody,
    .fc-desc table tr {
        display: block;
        width: 100%;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table tr,
    .fc-desc table tr {
        margin-bottom: 10px;
        border: 1px solid var(--fcd-trait);
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table tr:last-child,
    .fc-desc table tr:last-child {
        margin-bottom: 0;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table td,
    .fc-desc table td {
        display: block;
        width: auto;
        border: 0;
        padding: 10px 14px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table td:first-child,
    .fc-desc table td:first-child {
        width: auto;
        padding-bottom: 4px;
        background: var(--fcd-fond);
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding-top: 9px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) table td:not(:first-child),
    .fc-desc table td:not(:first-child) {
        padding-top: 9px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-packs,
    .fc-desc .fc-packs {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-pack,
    .fc-desc .fc-pack {
        padding: 18px 18px 20px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-tip,
    .fc-desc .fc-tip {
        padding: 16px 16px 16px 18px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq summary,
    .fc-desc .fc-faq summary {
        padding: 14px 15px;
        font-size: 14.8px;
        line-height: 1.45;
        align-items: flex-start;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq summary::after,
    .fc-desc .fc-faq summary::after {
        margin-top: 6px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) .fc-faq__rep,
    .fc-desc .fc-faq__rep {
        padding: 2px 15px 17px;
        font-size: 14.5px;
    }

    .woocommerce-Tabs-panel--description:not(:has(.elementor-element)) a.fc-dl,
    .fc-desc a.fc-dl {
        width: 100%;
        margin-right: 0;
        justify-content: flex-start;
    }

    /* Les avis */
    #reviews .comment_container {
        flex-direction: column;
        gap: 12px;
        padding: 16px 16px 18px;
    }

    #reviews .comment_container img.avatar {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    #reviews #review_form_wrapper {
        padding: 18px 16px 20px;
    }

    #reviews .woocommerce-Reviews-title,
    #reviews h2 {
        font-size: 19px;
        margin-bottom: 18px;
    }
}

/* ============================================================
   REGLAGES

   LA COULEUR DES TITRES    section 98.1, variable fcd-teal.
   DE SECTION               Elle suit ta variable fc-teal si elle
                            existe, sinon elle vaut 23726d.

   LA BARRE A GAUCHE        section 98.4. Elle est orange pour
   DES TITRES               trancher avec le titre teal. Mets
                            var(--fcd-teal) si tu la veux de la
                            meme couleur que le texte, c'est plus
                            sobre et un peu moins lisible.

   LA LARGEUR DU TEXTE      section 98.2, max-width 920px. Au
                            dela, une ligne de texte devient
                            penible a suivre. Ne monte pas a
                            1200 meme si la place existe.

   LA PREMIERE COLONNE      section 98.7, 38%. Monte a 45% si
   DU TABLEAU               certains de tes libelles passent sur
                            deux lignes.

   LE SEUIL D'EMPILEMENT    section 98.10, minmax(280px, 1fr).
   DES DEUX OPTIONS         Les cartes s'empilent d'elles memes
                            quand elles ne tiennent plus a 280px
                            de large. Monte a 340px pour qu'elles
                            s'empilent plus tot.


   A VERIFIER APRES AVOIR COLLE

   1. Ouvre la fiche dashcam sur ordinateur. Les sept
      caracteristiques doivent maintenant etre separees par un
      filet, avec une barre orange a gauche de chaque titre.

   2. Si rien ne change, ta description n'est pas dans l'onglet
      WooCommerce. Ajoute la classe fc-desc au bloc Elementor qui
      la contient et recharge.

   3. Regarde le tableau des specifications sur telephone. Il ne
      doit plus y avoir de defilement lateral : huit petites
      cartes libelle valeur a la place.

   4. Verifie une fiche produit a description courte, un cable
      par exemple. Les grandes respirations entre sections ne
      doivent pas y laisser de trou : s'il n'y a qu'un seul titre
      de section, il n'a pas de filet au dessus.

   5. Le bloc des avis : la note en etoiles doit etre orange,
      l'auteur en gras, et les champs nom et e mail cote a cote
      au dessus de 600px.
   ============================================================ */


/* ============================================================
   99. BANDEAU REASSURANCE, FICHE PRODUIT
   Fond vert tres pale, deux colonnes, plus la variante
   colonne pour le poser a droite du prix.

   CE QUE TON BALISAGE DOIT PORTER
      class="fcr"                 deux colonnes, sous le bouton
      class="fcr fcr--colonne"    une colonne, a droite du prix

   TOUT EST PREFIXE .fcr
   Aucune collision possible avec les sections precedentes ni
   avec WoodMart.
============================================================ */

/* 99.1  Le conteneur et ses variables
   ----------------------------------------------------------
   Les cinq variables sont les seules valeurs a changer si tu
   veux une autre teinte. Le reste s'en deduit. */

.fcr{
  /* Pour revenir au vert plein, remplace ces valeurs par :
        --fcr-fond:   #2d5a55;
        --fcr-texte:  #ffffff;
        --fcr-icone:  #ffffff;
        --fcr-filet:  rgba(255,255,255,.16);
        --fcr-bord:   transparent;
        --fcr-survol: rgba(255,255,255,.055);
     Rien d'autre n'est a toucher. */
  --fcr-fond:   #f1f6f3;
  --fcr-texte:  #1f3b38;
  --fcr-icone:  #2d5a55;
  --fcr-accent: #f0803c;
  --fcr-filet:  rgba(45,90,85,.14);
  --fcr-bord:   rgba(45,90,85,.14);
  --fcr-survol: rgba(45,90,85,.05);

  margin: 18px 0 6px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fcr-fond);
  color: var(--fcr-texte);
  /* Meme rayon et meme filet que la carte d'achat de ton
     gabarit, pour que les deux blocs se lisent comme une
     paire et non comme deux elements etrangers. */
  border: 1px solid var(--fcr-bord);
  /* Pas d'ombre sur fond clair : elle salirait le creme sans
     rien apporter. La frontiere est donnee par le filet. */
}

/* Deux colonnes, jamais quatre. Dans la colonne de droite
   d'une fiche produit, quatre colonnes donneraient 90 px
   chacune et le texte se briserait mot par mot. */
.fcr-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* 99.2  Un bloc
   ---------------------------------------------------------- */

.fcr-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: background-color .18s ease;
}

.fcr-item:hover,
.fcr-item:focus-visible{
  color: inherit;
  text-decoration: none;
  background: var(--fcr-survol);
}

/* Le theme colore les liens en orange au survol. On reprend la
   main : un titre qui change de couleur au passage de la
   souris fait sapin de Noel. */
.fcr-item:hover .fcr-t,
.fcr-item:focus-visible .fcr-t{
  color: var(--fcr-texte);
}

.fcr-item:focus-visible{
  outline: 2px solid var(--fcr-accent);
  outline-offset: -3px;
}

/* LE SOULIGNEMENT.
   WoodMart souligne les liens avec une regle plus forte que la
   notre. On la bat explicitement, sur le lien comme sur le
   titre, dans les trois etats. Sans ca, les quatre promesses
   ressemblent a un menu de navigation. */
.fcr-item,
.fcr-item:hover,
.fcr-item:focus,
.fcr-item:visited,
.fcr-item .fcr-t,
.fcr-item:hover .fcr-t{
  text-decoration: none !important;
  box-shadow: none !important;
}

/* 99.3  Les filets
   ----------------------------------------------------------
   Un vertical sur la colonne de droite, pose en pseudo element
   plutot qu'en bordure : il ne s'ajoute pas a la largeur. Un
   horizontal sous la premiere rangee. */

.fcr-item:nth-child(even)::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--fcr-filet);
}

.fcr-item:nth-child(n+3){
  border-top: 1px solid var(--fcr-filet);
}

/* 99.4  L'icone
   ---------------------------------------------------------- */

.fcr-ico{
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  /* Le vert franc plutot que la couleur du texte : a 26 px
     avec un trait de 1,7 px, une icone trop pale devient
     illisible en plein jour. */
  color: var(--fcr-icone);
}

.fcr-ico svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* 99.5  Le texte
   ---------------------------------------------------------- */

.fcr-txt{
  display: block;
  min-width: 0;
}

.fcr-t{
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fcr-texte);
}

/* LA LIGNE QUI FAIT LA VERSION LIGHT.
   Les details restent dans le balisage, lus par les moteurs de
   recherche et les lecteurs d'ecran, simplement masques a
   l'ecran. Retire cette ligne pour les revoir sous les titres,
   sans toucher au widget. */
.fcr-s{ display: none; }

/* 99.6  Telephone
   ----------------------------------------------------------
   On garde deux colonnes. Quatre lignes pleine largeur
   feraient un bloc plus haut que sur ordinateur, ce qui est
   l'inverse du but recherche. */

@media (max-width: 600px){

  .fcr{ margin: 16px 0 4px; }

  .fcr-item{ padding: 13px 12px; gap: 9px; }

  .fcr-ico{ width: 24px; height: 24px; }

  .fcr-t{ font-size: 12.5px; }
}

/* 99.7  Respect du reglage systeme
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .fcr-item{ transition: none; }
}


/* ============================================================
   99 bis. BANDEAU REASSURANCE, COLONNE A DROITE DU PRIX

   N'affecte que les bandeaux portant .fcr--colonne. Le
   bandeau en deux colonnes de la section 99 reste disponible
   ailleurs, il suffit de ne pas mettre cette classe.

   La place disponible ici est d'environ 370 px : une colonne,
   et des tailles resserrees pour que les quatre promesses ne
   depassent pas trop la hauteur du prix.
============================================================ */

.fcr--colonne{
  margin: 0;
  /* Le bloc s'etire a la hauteur de la carte d'achat. Demande
     que le conteneur Elementor parent soit en alignement
     Etirer, sinon cette ligne ne sert a rien. */
  height: 100%;
}

/* Une seule colonne. A 370 px, deux colonnes donneraient
   180 px chacune et les titres se briseraient en deux
   lignes. */
.fcr--colonne .fcr-grid{
  grid-template-columns: 1fr;
  /* Les quatre promesses se repartissent la hauteur au lieu de
     s'entasser en haut et de laisser un vide dessous. */
  height: 100%;
  grid-auto-rows: 1fr;
}

.fcr--colonne .fcr-item{
  padding: 14px 16px;
  gap: 12px;
}

.fcr--colonne .fcr-ico{
  width: 24px;
  height: 24px;
}

.fcr--colonne .fcr-t{
  font-size: 13.5px;
}

/* Les filets de la section 99 sont prevus pour deux colonnes :
   un vertical au milieu, un horizontal sous la premiere
   rangee. En colonne, on les remplace par un filet entre
   chaque promesse. */
.fcr--colonne .fcr-item:nth-child(even)::before{ display: none; }
.fcr--colonne .fcr-item:nth-child(n+3){ border-top: 0; }

.fcr--colonne .fcr-item + .fcr-item{
  border-top: 1px solid var(--fcr-filet);
}

/* ------------------------------------------------------------
   Sous 1024 px, le conteneur Elementor repasse en vertical et
   le bandeau se retrouve pleine largeur. On revient alors a
   deux colonnes : quatre lignes pleine largeur feraient un
   bloc inutilement haut sur un telephone.
------------------------------------------------------------- */

@media (max-width: 1024px){

  .fcr--colonne{ margin: 14px 0 0; height: auto; }

  .fcr--colonne .fcr-grid{
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    grid-auto-rows: auto;
  }

  .fcr--colonne .fcr-item{ padding: 13px 12px; }

  .fcr--colonne .fcr-item + .fcr-item{ border-top: 0; }

  .fcr--colonne .fcr-item:nth-child(even)::before{ display: block; }

  .fcr--colonne .fcr-item:nth-child(n+3){
    border-top: 1px solid var(--fcr-filet);
  }
}

/* ============================================================
   101. FLECHES DES CARROUSELS

   A coller A LA FIN du champ CSS additionnel WoodMart.

   AVANT DE COLLER : regarde la derniere ligne deja presente.
   Elle doit etre une accolade fermante ou une fin de
   commentaire. Un commentaire mal ferme avale en silence tout
   ce qui suit.

   Verifie aussi qu'aucune regle existante ne contient deja
   wd-btn-arrow ou wd-nav-arrows. Si c'est le cas, il faut
   fusionner, pas empiler : sur un meme selecteur c'est la
   derniere regle qui gagne. Ce bloc ne touche pas aux fiches
   produits, il ne cible que les fleches de navigation.

   Classes relevees dans l'inspecteur sur fenuaclick.com :
     .wd-nav-arrows    le conteneur des deux fleches
     .wd-btn-arrow     le bouton, wd-prev ou wd-next
     .wd-arrow-inner   le rond, son ::after dessine le chevron

   Rond blanc, fin contour orange, chevron orange.
   Au survol le rond se remplit d'orange et le chevron
   passe en blanc.
============================================================ */

.wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner{
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #DE7735;
  border: 1px solid rgba(222,119,53,.45);
  box-shadow: 0 6px 18px -10px rgba(16,40,38,.4);
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .2s ease;
}

.wd-nav-arrows .wd-btn-arrow:hover > .wd-arrow-inner,
.wd-nav-arrows .wd-btn-arrow:focus-visible > .wd-arrow-inner{
  background: #DE7735;
  color: #fff;
  border-color: #DE7735;
  box-shadow: 0 10px 22px -10px rgba(222,119,53,.55);
}

/* Epaisseur du chevron. WoodMart le dessine en police
   d'icones, un trait un peu plus gras tient mieux dans un
   rond de 44 px. */
.wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner::after{
  font-weight: 700;
}

/* Bout de carrousel atteint. Par defaut WoodMart garde la
   fleche pleinement visible, ce qui laisse croire qu'elle
   marche encore. */
.wd-nav-arrows .wd-btn-arrow.wd-disabled > .wd-arrow-inner{
  opacity: .3;
  box-shadow: none;
  cursor: default;
}

.wd-nav-arrows .wd-btn-arrow.wd-disabled:hover > .wd-arrow-inner{
  background: #fff;
  color: #DE7735;
  border-color: rgba(222,119,53,.45);
  box-shadow: none;
}

/* Sous 768 px les ronds de 44 px mangent la photo. */
@media (max-width: 768px){
  .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner{
    width: 38px;
    height: 38px;
    line-height: 38px;
  }
}

/* ------------------------------------------------------------
   SI RIEN NE CHANGE APRES AVOIR VIDE LE CACHE

   La feuille du theme gagne alors en specificite. Ajoute
   !important sur les trois proprietes qui comptent, pas sur
   tout le bloc :
     background: #fff !important;
     color: #DE7735 !important;
     border-color: rgba(222,119,53,.45) !important;
   et les equivalentes dans la regle de survol.
------------------------------------------------------------- */


/* ============================================================
   102. VAGUES EN HAUT ET EN BAS DES DEUX SECTIONS TEAL DE L'ACCUEIL
   Nouvel ordre : photos, Installation, Nos dernieres arrivees,
   Commander, Avis. Chaque section teal est donc entouree de creme
   et a besoin d'une vague en haut ET en bas.

   e632da6 = section Installation : avait deja sa vague en bas,
             on ajoute la vague du haut.
   2649b00 = section Commander, Livraison, Support, Paiement :
             avait deja sa vague en haut, on ajoute celle du bas.

   Les vagues ajoutees sont dessinees en image de fond de la section,
   les deux pseudo elements etant deja pris (motif koru et vague
   existante). Le motif koru s'estompe maintenant aux deux bords.

   Si un jour tu supprimes et recrees l'un de ces widgets, son numero
   change : il faudra remplacer e632da6 ou 2649b00 par le nouveau.
   ============================================================ */

/* Installation : vague en haut */
.elementor-element-e632da6.fc-fond-teal{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 32 C 220 -2 430 -2 640 22 C 850 46 1010 46 1200 18 L1200 0 Z' fill='%23f9f7f2'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center top -1px !important;
  background-size:100% 46px !important;
  padding-top:calc(var(--fc-padding-v) + 26px) !important;
}
.elementor-element-e632da6.fc-fond-teal::before{
  mask-image:linear-gradient(transparent 0,#000 180px,#000 calc(100% - 180px),transparent 100%);
  -webkit-mask-image:linear-gradient(transparent 0,#000 180px,#000 calc(100% - 180px),transparent 100%);
}

/* Commander, Livraison, Support, Paiement : vague en bas */
.elementor-element-2649b00.fc-fond-teal{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 32 C 220 -2 430 -2 640 22 C 850 46 1010 46 1200 18 L1200 60 Z' fill='%23f9f7f2'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center bottom -1px !important;
  background-size:100% 62px !important;
  padding-bottom:calc(var(--fc-padding-v) + 26px) !important;
}
.elementor-element-2649b00.fc-fond-teal::before{
  mask-image:linear-gradient(transparent 0,#000 180px,#000 calc(100% - 180px),transparent 100%);
  -webkit-mask-image:linear-gradient(transparent 0,#000 180px,#000 calc(100% - 180px),transparent 100%);
}

@media (min-width:768px) and (max-width:1024px){
  .elementor-element-2649b00.fc-fond-teal{background-size:100% 46px !important}
}
@media (max-width:767px){
  .elementor-element-e632da6.fc-fond-teal{background-size:100% 28px !important;padding-top:calc(var(--fc-padding-v) + 14px) !important}
  .elementor-element-2649b00.fc-fond-teal{background-size:100% 30px !important;padding-bottom:calc(var(--fc-padding-v) + 14px) !important}
  .elementor-element-e632da6.fc-fond-teal::before,
  .elementor-element-2649b00.fc-fond-teal::before{
    mask-image:linear-gradient(transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%);
    -webkit-mask-image:linear-gradient(transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%);
  }
}



/* ============================================================
   104. MENU DU HEADER, VERSION EPUREE
   Liens plus fins, sans barres de separation, petites icones
   discretes, soulignement orange au survol, panier en pastille.
   A coller A LA FIN de WoodMart > Theme Settings > Custom CSS.
   ============================================================ */

/* Barre du header : fine ligne et ombre legere au lieu d'un bord dur */
.whb-header .whb-general-header{
  border-bottom:1px solid #e3e9e7 !important;
  box-shadow:0 6px 24px -18px rgba(17,60,62,.35) !important;
}

/* Liens du menu */
.whb-header .wd-nav-main > li > a,
.whb-header .wd-header-nav .wd-nav > li > a{
  position:relative;
  gap:8px;
  padding-left:14px !important;
  padding-right:14px !important;
  font-family:Inter,Arial,sans-serif !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:-.005em;
  text-transform:none !important;
  color:#2b3d3c !important;
  transition:color .2s ease;
}

/* Plus de barres verticales entre les liens */
.whb-header .wd-nav-main > li::after,
.whb-header .wd-nav-main > li::before,
.whb-header .wd-header-nav .wd-nav > li::after,
.whb-header .wd-header-nav .wd-nav > li::before{
  content:none !important;
  display:none !important;
}
.whb-header .wd-nav-main > li,
.whb-header .wd-header-nav .wd-nav > li{
  border:0 !important;
}

/* Icones des liens : plus petites et plus discretes */
.whb-header .wd-nav-main > li > a .wd-nav-img,
.whb-header .wd-header-nav .wd-nav > li > a .wd-nav-img,
.whb-header .wd-nav-main > li > a > i,
.whb-header .wd-header-nav .wd-nav > li > a > i{
  width:18px !important;
  height:18px !important;
  max-height:18px !important;
  margin-right:0 !important;
  opacity:.55;
  transition:opacity .2s ease;
}

/* Soulignement orange au survol et sur la page en cours */
.whb-header .wd-nav-main > li > a .nav-link-text,
.whb-header .wd-header-nav .wd-nav > li > a .nav-link-text{
  position:relative;
}
.whb-header .wd-nav-main > li > a .nav-link-text::after,
.whb-header .wd-header-nav .wd-nav > li > a .nav-link-text::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:2px;
  border-radius:2px;
  background:#DE7735;
  transform:scaleX(0);
  transition:transform .25s ease;
}
.whb-header .wd-nav-main > li > a:hover,
.whb-header .wd-header-nav .wd-nav > li > a:hover,
.whb-header .wd-nav-main > li.current-menu-item > a,
.whb-header .wd-nav-main > li.current-menu-ancestor > a,
.whb-header .wd-header-nav .wd-nav > li.current-menu-item > a{
  color:#215d60 !important;
}
.whb-header .wd-nav-main > li > a:hover .wd-nav-img,
.whb-header .wd-header-nav .wd-nav > li > a:hover .wd-nav-img,
.whb-header .wd-nav-main > li > a:hover > i,
.whb-header .wd-nav-main > li.current-menu-item > a .wd-nav-img{
  opacity:1;
}
.whb-header .wd-nav-main > li > a:hover .nav-link-text::after,
.whb-header .wd-header-nav .wd-nav > li > a:hover .nav-link-text::after,
.whb-header .wd-nav-main > li.current-menu-item > a .nav-link-text::after,
.whb-header .wd-nav-main > li.current-menu-ancestor > a .nav-link-text::after,
.whb-header .wd-header-nav .wd-nav > li.current-menu-item > a .nav-link-text::after{
  transform:scaleX(1);
}

/* Compte : icone teal */
.whb-header .wd-header-my-account .wd-tools-icon,
.whb-header .wd-header-my-account .wd-tools-icon::before{
  color:#215d60 !important;
}

/* Panier : sans fond ni contour (la pastille creme a ete retiree) */
.whb-header .wd-header-cart .wd-tools-icon,
.whb-header .wd-header-cart .wd-tools-icon::before{
  color:#215d60 !important;
}
.whb-header .wd-header-cart .wd-cart-subtotal,
.whb-header .wd-header-cart .wd-cart-subtotal .amount{
  font-family:Poppins,Arial,sans-serif !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  color:#215d60 !important;
  letter-spacing:-.01em;
}
.whb-header .wd-header-cart .wd-cart-number,
.whb-header .wd-header-cart .wd-tools-count{
  background:#DE7735 !important;
  color:#fff !important;
  box-shadow:0 0 0 2px #F9F7F2;
}

@media (prefers-reduced-motion:reduce){
  .whb-header .wd-nav-main > li > a .nav-link-text::after{transition:none}
}

/* ============================================================
   105. BOUTIQUE ET CATEGORIES EN PLEINE LARGEUR
   ============================================================ */
.woocommerce-shop .main-page-wrapper .container,
.tax-product_cat .main-page-wrapper .container,
.tax-product_tag .main-page-wrapper .container{
  max-width:100% !important;
  padding-left:40px !important;
  padding-right:40px !important;
}
@media (max-width:1024px){
  .woocommerce-shop .main-page-wrapper .container,
  .tax-product_cat .main-page-wrapper .container,
  .tax-product_tag .main-page-wrapper .container{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


/* ============================================================
   106. FICHE PRODUIT, BOUTON AJOUTER AU PANIER EN ORANGE
   Meme orange que le bouton Visiter la boutique de l'accueil.
   ============================================================ */
.single-product .wd-single-add-cart .single_add_to_cart_button {
    background-color: var(--fc-orange) !important;
    color: #fff !important;
    border-radius: 11px !important;
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: 0 6px 16px rgba(225, 119, 49, .28);
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.single-product .wd-single-add-cart .single_add_to_cart_button:hover,
.single-product .wd-single-add-cart .single_add_to_cart_button:focus-visible {
    background-color: var(--fc-orange-dark) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(225, 119, 49, .34);
}
.single-product .wd-single-add-cart .single_add_to_cart_button.disabled,
.single-product .wd-single-add-cart .single_add_to_cart_button:disabled {
    background-color: #eab48f !important;
    box-shadow: none;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .single-product .wd-single-add-cart .single_add_to_cart_button { transition: none; }
    .single-product .wd-single-add-cart .single_add_to_cart_button:hover { transform: none; }
}


/* ============================================================
   108. DESCRIPTION PRODUIT, MISE EN PAGE EDITORIALE
   Grands titres, phrases courtes, beaucoup d'air, images et
   textes qui alternent, tableau de caracteristiques sobre et
   FAQ depliable. Inspire des fiches produits de Bose.

   TOUT EST PREFIXE .fcb
   Le balisage a coller dans la description du produit porte
   class="fcb" sur son bloc principal. Les fiches qui n'utilisent
   pas ce balisage gardent leur mise en page actuelle.
   ============================================================ */

.fcb {
    --fcb-teal: var(--fc-teal, #215d60);
    --fcb-teal-d: #174749;
    --fcb-or: var(--fc-orange, #E17731);
    --fcb-ink: #1e2e2d;
    --fcb-mute: #6b7d7b;
    --fcb-line: #e4ebea;
    --fcb-sable: #f6efe4;
    max-width: 1100px;
    margin: 0 auto;
    font-family: Inter, Arial, sans-serif;
    color: var(--fcb-ink);
    -webkit-font-smoothing: antialiased;
}
.fcb *, .fcb *::before, .fcb *::after { box-sizing: border-box; }
.fcb p { margin: 0; }
.fcb img { display: block; max-width: 100%; height: auto; }

/* Titres : on neutralise les styles generaux de la description */
.fcb h2, .fcb h3 {
    font-family: 'Familjen Grotesk', Poppins, Arial, sans-serif !important;
    text-transform: none !important;
    letter-spacing: -.01em !important;
    color: var(--fcb-teal) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
.fcb h2::before, .fcb h2::after, .fcb h3::before, .fcb h3::after { content: none !important; }

/* Petit libelle orange au dessus des titres */
.fcb .fcb-kicker {
    display: block;
    margin-bottom: 14px;
    font: 600 11.5px/1 Inter, Arial, sans-serif;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--fcb-or);
}

/* 1. L'accroche */
.fcb .fcb-hero { text-align: center; padding: 64px 16px 72px; }
.fcb .fcb-hero h2 {
    font-size: clamp(30px, 4.2vw, 48px) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    max-width: 760px;
    margin: 0 auto !important;
}
.fcb .fcb-hero p {
    max-width: 600px;
    margin: 18px auto 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--fcb-mute);
}

/* 2. Les blocs avantage : image et texte en alternance */
.fcb .fcb-bloc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
    padding: 40px 0;
}
.fcb .fcb-bloc + .fcb-bloc { margin-top: 24px; }
.fcb .fcb-bloc.fcb-inverse .fcb-media { order: 2; }
.fcb .fcb-media {
    border-radius: 28px;
    overflow: hidden;
    background: var(--fcb-sable);
    aspect-ratio: 3 / 2;
}
/* Les photos de galerie ont souvent un cadre flou : on zoome un peu pour le couper */
.fcb .fcb-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }
.fcb .fcb-bloc h3 {
    font-size: clamp(24px, 2.8vw, 34px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}
.fcb .fcb-bloc p {
    margin-top: 16px;
    max-width: 440px;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--fcb-mute);
}
.fcb .fcb-bloc p strong { color: var(--fcb-ink); font-weight: 600; }

/* 3. Le bandeau vert, pour l'argument fort */
.fcb .fcb-bande {
    margin: 72px 0;
    padding: clamp(40px, 6vw, 72px);
    border-radius: 32px;
    text-align: center;
    color: #fff;
    background: linear-gradient(155deg, #2a6e71 0%, var(--fcb-teal) 45%, var(--fcb-teal-d) 100%);
}
.fcb .fcb-bande .fcb-kicker { color: #f3a066; }
.fcb .fcb-bande h3 {
    color: #fff !important;
    font-size: clamp(24px, 3vw, 36px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    max-width: 680px;
    margin: 0 auto !important;
}
.fcb .fcb-bande p {
    max-width: 560px;
    margin: 16px auto 0;
    font-size: 16.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}

/* 4. Les points cles en grille */
.fcb .fcb-points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 72px;
    padding: 0;
    list-style: none;
}
.fcb .fcb-points li {
    margin: 0 !important;
    padding: 26px 22px;
    border-radius: 20px;
    background: var(--fcb-sable);
}
.fcb .fcb-points li::before { content: none !important; }
.fcb .fcb-points b {
    display: block;
    font: 700 26px/1.1 'Familjen Grotesk', Poppins, Arial, sans-serif;
    color: var(--fcb-teal);
    letter-spacing: -.02em;
}
.fcb .fcb-points span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fcb-mute);
}

/* 5. Caracteristiques techniques : deux colonnes, filets fins */
.fcb .fcb-titre { text-align: center; margin: 0 0 32px; }
.fcb .fcb-titre h2 { font-size: clamp(26px, 3vw, 36px) !important; font-weight: 700 !important; }
.fcb table.fcb-specs {
    width: 100%;
    max-width: 820px;
    margin: 0 auto 80px;
    border-collapse: collapse;
    border: 0;
    background: none;
}
.fcb table.fcb-specs tr { border: 0; background: none !important; }
.fcb table.fcb-specs th,
.fcb table.fcb-specs td {
    padding: 18px 4px;
    border: 0;
    border-bottom: 1px solid var(--fcb-line);
    background: none !important;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
    line-height: 1.5;
}
.fcb table.fcb-specs th { width: 38%; font-weight: 500; color: var(--fcb-mute); }
.fcb table.fcb-specs td { font-weight: 600; color: var(--fcb-ink); }

/* 6. FAQ depliable */
.fcb .fcb-faq { max-width: 820px; margin: 0 auto 40px; }
.fcb .fcb-faq details { border-bottom: 1px solid var(--fcb-line); }
.fcb .fcb-faq summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 22px 44px 22px 4px;
    font: 600 16.5px/1.4 'Familjen Grotesk', Poppins, Arial, sans-serif;
    color: var(--fcb-teal);
}
.fcb .fcb-faq summary::-webkit-details-marker { display: none; }
.fcb .fcb-faq summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fcb-sable);
    color: var(--fcb-or);
    font: 400 22px/30px Inter, Arial, sans-serif;
    text-align: center;
    transition: transform .2s ease;
}
.fcb .fcb-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fcb .fcb-faq details p {
    padding: 0 44px 22px 4px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--fcb-mute);
}

/* Tablette */
@media (max-width: 1024px) {
    .fcb .fcb-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telephone : tout s'empile, l'image passe au dessus du texte */
@media (max-width: 767px) {
    .fcb .fcb-hero { padding: 40px 4px 44px; }
    .fcb .fcb-hero p { font-size: 16px; }
    .fcb .fcb-bloc { grid-template-columns: 1fr; gap: 22px; padding: 20px 0; }
    .fcb .fcb-bloc.fcb-inverse .fcb-media { order: 0; }
    .fcb .fcb-media { border-radius: 20px; }
    .fcb .fcb-bloc p { max-width: none; font-size: 15.5px; }
    .fcb .fcb-bande { margin: 44px 0; border-radius: 22px; padding: 36px 22px; }
    .fcb .fcb-points { gap: 10px; margin-bottom: 48px; }
    .fcb .fcb-points li { padding: 18px 16px; border-radius: 16px; }
    .fcb .fcb-points b { font-size: 21px; }
    .fcb table.fcb-specs { margin-bottom: 52px; }
    .fcb table.fcb-specs th, .fcb table.fcb-specs td { display: block; width: 100%; padding: 0 2px; border: 0; }
    .fcb table.fcb-specs th { padding-top: 14px; font-size: 13px; }
    .fcb table.fcb-specs td { padding-bottom: 14px; border-bottom: 1px solid var(--fcb-line); }
    .fcb .fcb-faq summary { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .fcb .fcb-faq summary::after { transition: none; }
}

/* 108 bis. Variantes ajoutees en v33
   fcb-carre    sur .fcb-media : image carree entiere, sans zoom.
                Pour les visuels fournisseur avec un titre en haut.
   fcb-conseils sur .fcb-points : cartes de conseils, titres plus petits.
   fcb-note     encadre sable pour les informations a lire avant l'achat. */
.fcb .fcb-media.fcb-carre { aspect-ratio: 1 / 1; background: #0f1a22; }
.fcb .fcb-media.fcb-carre img { transform: none; object-fit: contain; }
.fcb .fcb-points.fcb-conseils { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fcb .fcb-points.fcb-conseils b { font-size: 17px; line-height: 1.3; }
.fcb .fcb-points.fcb-conseils span { font-size: 14.5px; line-height: 1.6; }
.fcb .fcb-note {
    max-width: 820px;
    margin: 0 auto 72px;
    padding: 26px 30px;
    border-radius: 20px;
    background: #fff6ef;
    border: 1px solid #f2d6bd;
}
.fcb .fcb-note b {
    display: block;
    margin-bottom: 10px;
    font: 700 13px/1 Inter, Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fcb-or);
}
.fcb .fcb-note ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fcb .fcb-note li { margin: 0 !important; padding-left: 22px; position: relative; font-size: 15.5px; line-height: 1.55; color: var(--fcb-ink); }
.fcb .fcb-note li::before { content: "" !important; position: absolute; left: 4px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--fcb-or); }
@media (max-width: 1024px) {
    .fcb .fcb-points.fcb-conseils { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .fcb .fcb-note { padding: 20px 18px; margin-bottom: 48px; }
    .fcb .fcb-points.fcb-conseils b { font-size: 16px; }
}

/* =====================================================================
   109. DESCRIPTION COURTE PRODUIT (classe .fcs)
   Meme mise en page pour toutes les fiches, a cote du bouton d'achat.
   fcs-pts    liste des points forts, pastille orange avec coche.
   fcs-note   encadre orange : ce qu'il faut savoir avant l'achat.
   fcs-offre  encadre teal : offre speciale ou association.
   ===================================================================== */
.fcs { margin: 14px 0 6px; font-size: 15px; line-height: 1.5; color: #3a3a3a; }
.fcs .fcs-pts { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.fcs .fcs-pts li {
    position: relative;
    margin: 0 !important;
    padding: 0 0 0 32px !important;
    list-style: none !important;
}
.fcs .fcs-pts li::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 1px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fbe6d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E17731' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.fcs .fcs-pts b { color: var(--fc-teal, #215d60); font-weight: 700; }
.fcs .fcs-note,
.fcs .fcs-offre {
    margin: 14px 0 0 !important;
    padding: 11px 14px !important;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.fcs .fcs-note { background: #fff6ef; border: 1px solid #f2d6bd; color: #8a4417; }
.fcs .fcs-offre { background: #eaf3f2; border: 1px solid #c7dedb; color: var(--fc-teal, #215d60); }
.fcs .fcs-note b,
.fcs .fcs-offre b { font-weight: 700; }
.fcs .fcs-note b { color: var(--fc-orange, #E17731); }
@media (max-width: 767px) {
    .fcs { font-size: 14.5px; }
}

/* =====================================================================
   110. FORMULAIRE NEWSLETTER (Mailchimp for WP, classe .fcn)
   Bloc centre sur fond teal : etiquette, titre, champ e mail et bouton
   sur une ligne (empiles sur mobile), case d'accord, reassurances.
   ===================================================================== */
.fcn{max-width:620px;margin:0 auto;padding:8px 0;text-align:center!important;font-family:inherit;box-sizing:border-box}
.fcn *{box-sizing:border-box}
.fcn .fcn-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.1);color:#fff!important;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.fcn .fcn-kicker svg{width:15px;height:15px;stroke:#F4A36B;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcn h3{margin:0 0 10px!important;color:#fff!important;font-size:clamp(22px,3vw,30px)!important;font-weight:800!important;line-height:1.2!important;text-wrap:balance}
.fcn h3 span{color:#F4A36B}
.fcn p.fcn-sous{margin:0 auto 26px!important;max-width:460px;color:rgba(255,255,255,.82)!important;font-size:15px!important;line-height:1.6!important}
.fcn .fcn-ligne{display:flex;gap:10px;padding:6px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.fcn .fcn-champ{position:relative;flex:1 1 auto;min-width:0}
.fcn .fcn-champ svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:#8a9a98;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.fcn input[type=email]{width:100%!important;height:50px!important;margin:0!important;padding:0 14px 0 44px!important;border:0!important;border-radius:11px!important;background:transparent!important;color:#22302f!important;font-size:15px!important;box-shadow:none!important;outline:none}
.fcn input[type=email]::placeholder{color:#8a9a98}
.fcn input[type=submit]{flex:0 0 auto;height:50px!important;margin:0!important;padding:0 26px!important;border:0!important;border-radius:11px!important;background:#215d60!important;color:#fff!important;font-size:14px!important;font-weight:800!important;letter-spacing:.04em;text-transform:none!important;cursor:pointer;transition:background .2s}
.fcn input[type=submit]:hover{background:#184a4c!important}
.fcn .fcn-ligne:focus-within{box-shadow:0 0 0 3px rgba(244,163,107,.55),0 10px 30px rgba(0,0,0,.18)}
.fcn label.fcn-accord{display:flex!important;align-items:flex-start;justify-content:flex-start;gap:10px;margin:16px 0 0!important;padding:0 4px;text-align:left!important;color:rgba(255,255,255,.78)!important;font-size:12.5px!important;line-height:1.55!important;font-weight:400!important;cursor:pointer}
.fcn label.fcn-accord input{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0!important;accent-color:#E17731;cursor:pointer}
.fcn label.fcn-accord a{color:#fff!important;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.fcn .fcn-rassure{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none}
.fcn .fcn-rassure li{display:inline-flex;align-items:center;gap:6px;margin:0!important;color:rgba(255,255,255,.7)!important;font-size:12px!important;list-style:none}
.fcn .fcn-rassure li::before{content:"";width:6px;height:6px;border-radius:50%;background:#F4A36B}
.fcn + .mc4wp-response, .mc4wp-form-594 .mc4wp-response{max-width:620px;margin:14px auto 0;color:#fff;text-align:center}
@media (max-width:600px){
  .fcn .fcn-ligne{flex-direction:column;padding:8px}
  .fcn input[type=submit]{width:100%!important}
  .fcn .fcn-champ{border-bottom:1px solid #e6ecea}
}

/* =====================================================================
   111. BANDE NEWSLETTER PLEINE LARGEUR AVEC VAGUES
   S'applique tout seul au widget Mailchimp qui porte la classe
   fc-fond-teal : il sort de la colonne du site, prend toute la largeur
   de l'ecran, et recoit une vague creme en haut et en bas.
   Rien a changer dans Elementor.
   ===================================================================== */
:root {
    --fc-nl-creme: #F9F7F2;
    --fc-nl-vague-haut: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20L0%2028%20C%20220%2062%20430%2062%20640%2038%20C%20850%2014%201010%2014%201200%2042%20L1200%200%20Z%22%20fill%3D%22%23F9F7F2%22%2F%3E%3C%2Fsvg%3E");
    --fc-nl-vague-bas: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2060%20L0%2032%20C%20220%20-2%20430%20-2%20640%2022%20C%20850%2046%201010%2046%201200%2018%20L1200%2060%20Z%22%20fill%3D%22%23F9F7F2%22%2F%3E%3C%2Fsvg%3E");
}
.elementor-widget-wd_mailchimp.fc-fond-teal {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 110px 20px 120px !important;
}
/* vague du haut : posee sur un calque au dessus du motif koru */
.elementor-widget-wd_mailchimp.fc-fond-teal > .elementor-widget-container {
    position: static !important;
}
.elementor-widget-wd_mailchimp.fc-fond-teal > .elementor-widget-container::before,
.elementor-widget-wd_mailchimp.fc-fond-teal::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 70px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}
.elementor-widget-wd_mailchimp.fc-fond-teal > .elementor-widget-container::before {
    top: -1px;
    background-image: var(--fc-nl-vague-haut);
}
.elementor-widget-wd_mailchimp.fc-fond-teal::after {
    bottom: -1px;
    background-image: var(--fc-nl-vague-bas);
}
.elementor-widget-wd_mailchimp.fc-fond-teal .fcn {
    position: relative;
    z-index: 3;
}
/* le conteneur parent ne doit plus couper ni arrondir la bande */
.e-con:has(> .e-con-inner > .elementor-widget-wd_mailchimp.fc-fond-teal),
.e-con-inner:has(> .elementor-widget-wd_mailchimp.fc-fond-teal) {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
}
@media (max-width: 1024px) {
    .elementor-widget-wd_mailchimp.fc-fond-teal { padding: 90px 20px 100px !important; }
    .elementor-widget-wd_mailchimp.fc-fond-teal > .elementor-widget-container::before,
    .elementor-widget-wd_mailchimp.fc-fond-teal::after { height: 48px; }
}
@media (max-width: 767px) {
    .elementor-widget-wd_mailchimp.fc-fond-teal { padding: 70px 16px 80px !important; }
    .elementor-widget-wd_mailchimp.fc-fond-teal > .elementor-widget-container::before,
    .elementor-widget-wd_mailchimp.fc-fond-teal::after { height: 32px; }
}

/* 112. Supprimee en v39 : la newsletter n'est plus le dernier bloc avant le pied de page,
   le pied de page reprend sa vague creme habituelle (section 4). */

/* =====================================================================
   113. DESCRIPTION COURTE EN CARTE (complete la section 109)
   Les points forts passent dans une carte blanche, une ligne par point,
   pastille orange avec coche blanche, debut du point en gras teal.
   Le selecteur long est voulu : il passe devant l'ancienne regle des
   points cles (coche teal en masque) qui ecrasait la pastille.
   ===================================================================== */
.woocommerce-product-details__short-description .fcs,
.fcs {
    margin: 18px 0 8px !important;
}
.elementor-widget-wd_single_product_short_description .woocommerce-product-details__short-description .fcs .fcs-pts,
.fcs .fcs-pts {
    display: block !important;
    margin: 0 !important;
    padding: 6px 18px !important;
    list-style: none !important;
    background: #ffffff;
    border: 1px solid rgba(33, 93, 96, .12);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(22, 72, 74, .07);
}
.elementor-widget-wd_single_product_short_description .woocommerce-product-details__short-description .fcs .fcs-pts li,
.fcs .fcs-pts li {
    position: relative;
    margin: 0 !important;
    padding: 12px 0 12px 40px !important;
    list-style: none !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #4d5f5d;
    border-bottom: 1px dashed rgba(33, 93, 96, .16);
}
.elementor-widget-wd_single_product_short_description .woocommerce-product-details__short-description .fcs .fcs-pts li:last-child,
.fcs .fcs-pts li:last-child {
    border-bottom: 0;
}
.elementor-widget-wd_single_product_short_description .woocommerce-product-details__short-description .fcs .fcs-pts li::before,
.fcs .fcs-pts li::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-radius: 50%;
    -webkit-mask: none !important;
            mask: none !important;
    background: #E17731 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat !important;
    box-shadow: 0 0 0 4px rgba(225, 119, 49, .14);
}
.elementor-widget-wd_single_product_short_description .woocommerce-product-details__short-description .fcs .fcs-pts b,
.fcs .fcs-pts b {
    color: #215d60 !important;
    font-weight: 800 !important;
}
.fcs .fcs-note,
.fcs .fcs-offre {
    position: relative;
    border-radius: 14px !important;
    padding: 12px 15px 12px 42px !important;
}
.fcs .fcs-note::before,
.fcs .fcs-offre::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 13px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
}
.fcs .fcs-note::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E17731' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23E17731'/%3E%3C/svg%3E");
}
.fcs .fcs-offre::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23215d60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
    .elementor-widget-wd_single_product_short_description .woocommerce-product-details__short-description .fcs .fcs-pts,
    .fcs .fcs-pts { padding: 4px 14px !important; }
    .elementor-widget-wd_single_product_short_description .woocommerce-product-details__short-description .fcs .fcs-pts li,
    .fcs .fcs-pts li { padding: 11px 0 11px 38px !important; font-size: 14.5px !important; }
}

/* =====================================================================
   114. MOINS DE VIDE SOUS LES ONGLETS DE LA FICHE PRODUIT
   La description commence plus pres des onglets Description,
   Documentation, Avis. Seul le haut du premier bloc change.
   ===================================================================== */
#tab-description:has(> .fcb),
.woocommerce-Tabs-panel--description:has(.fcb) {
    padding-top: 0 !important;
}
#tab-description .fcb > .fcb-hero:first-child {
    padding-top: 22px !important;
}
@media (max-width: 767px) {
    #tab-description .fcb > .fcb-hero:first-child {
        padding-top: 14px !important;
    }
}

/* =====================================================================
   115. MINIATURES DE LA GALERIE PRODUIT PLUS LISIBLES
   WoodMart passait la miniature active a 50 % d'opacite sous un voile
   blanc, et le liseré des miniatures disparaissait sur le fond sable.
   Ici : toutes les miniatures nettes, un vrai cadre, et la miniature
   affichee entouree d'orange.
   ===================================================================== */
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item {
    opacity: 1 !important;
}
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item::before,
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item::after {
    display: none !important;
}
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item img {
    border: 1px solid rgba(33, 93, 96, .22) !important;
    border-radius: 10px !important;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(22, 72, 74, .08);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    cursor: pointer;
}
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item:hover img {
    border-color: rgba(225, 119, 49, .6) !important;
    transform: translateY(-2px);
}
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item.wd-thumb-active img,
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item.wd-active img {
    border: 2px solid #E17731 !important;
    box-shadow: 0 0 0 3px rgba(225, 119, 49, .18);
}
@media (prefers-reduced-motion: reduce) {
    .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item img { transition: none; }
    .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item:hover img { transform: none; }
}

/* =====================================================================
   116. BLOC « NOTRE SELECTION » (onglets produits des fiches)
   Plus de cadre gris autour, des cartes separees et arrondies,
   prix et bouton toujours alignes en bas, onglets en pastilles,
   selecteur de quantite retire des cartes (il reste sur la fiche).
   ===================================================================== */
.wd-products-tabs .wd-carousel-inner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
}
.wd-products-tabs .wd-carousel-item {
    padding: 8px !important;
    height: auto !important;
    border: 0 !important;
}
.wd-products-tabs .wd-product {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    padding: 0 0 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(33, 93, 96, .12) !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 18px rgba(22, 72, 74, .07);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.wd-products-tabs .wd-product:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(22, 72, 74, .14);
}
.wd-products-tabs .wd-product .wd-product-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.wd-products-tabs .wd-product .wd-product-thumb {
    border-radius: 0 !important;
    margin: 0 0 12px !important;
    background: #F6EFE4;
}
.wd-products-tabs .wd-product .product-element-bottom {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 12px !important;
}
.wd-products-tabs .wd-product .wd-entities-title {
    font-size: 14.5px !important;
    line-height: 1.3 !important;
    min-height: 2.6em;
    margin-bottom: 4px !important;
}
.wd-products-tabs .wd-product .price {
    margin-top: auto !important;
    padding-top: 10px;
}
.wd-products-tabs .wd-product .wd-add-btn .quantity,
.wd-products-tabs .wd-product .quantity {
    display: none !important;
}
.wd-products-tabs .wd-product .wd-add-btn {
    margin-top: 10px !important;
}
.wd-products-tabs .wd-product .wd-add-btn .button {
    width: 100%;
    border-radius: 99px !important;
}
.wd-products-tabs .wd-product .wd-product-stock {
    margin: 6px auto 0 !important;
}
/* onglets : voir la section 166 */
@media (prefers-reduced-motion: reduce) {
    .wd-products-tabs .wd-product, .wd-products-tabs .wd-product:hover { transition: none; transform: none; }
}

/* =====================================================================
   117. FORMULAIRE NEWSLETTER SUR FOND CLAIR ET EN COLONNE ETROITE
   Le meme formulaire (code court [mc4wp_form id=594]) sert aussi
   dans la colonne laterale, sur fond creme. Par defaut il passe
   en textes teal et gris ; il reste en blanc uniquement dans la
   bande teal (classe fc-fond-teal). Quand la place manque, le champ
   e mail et le bouton s'empilent.
   ===================================================================== */
.fcn { container-type: inline-size; }

/* fond clair : couleurs par defaut */
body .fcn .fcn-kicker { background: rgba(33, 93, 96, .08) !important; color: #215d60 !important; }
body .fcn .fcn-kicker svg { stroke: #215d60 !important; }
body .fcn h3 { color: #215d60 !important; }
body .fcn h3 span { color: #2f7d80 !important; }
body .fcn p.fcn-sous { color: #5d6b69 !important; }
body .fcn .fcn-ligne { border: 1px solid rgba(33, 93, 96, .16); box-shadow: 0 6px 18px rgba(22, 72, 74, .08); }
body .fcn label.fcn-accord { color: #4d5f5d !important; }
body .fcn label.fcn-accord a { color: #215d60 !important; }
body .fcn .fcn-rassure li { color: #5d6b69 !important; }
body .fcn .fcn-rassure li::before { background: #215d60 !important; }

/* bande teal : on garde les textes clairs */
body .fc-fond-teal .fcn .fcn-kicker { background: rgba(255, 255, 255, .1) !important; color: #ffffff !important; }
body .fc-fond-teal .fcn .fcn-kicker svg { stroke: #8ed0cd !important; }
/* sur fond teal, le bouton passe en blanc pour rester visible */
body .fc-fond-teal .fcn input[type=submit] { background: #ffffff !important; color: #215d60 !important; }
body .fc-fond-teal .fcn input[type=submit]:hover { background: #e6f0ef !important; }
body .fc-fond-teal .fcn h3 { color: #ffffff !important; }
body .fc-fond-teal .fcn h3 span { color: #F4A36B !important; }
body .fc-fond-teal .fcn p.fcn-sous { color: rgba(255, 255, 255, .82) !important; }
body .fc-fond-teal .fcn .fcn-ligne { border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
body .fc-fond-teal .fcn label.fcn-accord { color: rgba(255, 255, 255, .78) !important; }
body .fc-fond-teal .fcn label.fcn-accord a { color: #ffffff !important; }
body .fc-fond-teal .fcn .fcn-rassure li { color: rgba(255, 255, 255, .7) !important; }
body .fc-fond-teal .fcn .fcn-rassure li::before { background: #F4A36B !important; }

/* colonne etroite : champ et bouton l'un sous l'autre */
@container (max-width: 460px) {
    .fcn .fcn-ligne { flex-direction: column; padding: 8px; }
    .fcn .fcn-champ { border-bottom: 1px solid #e6ecea; }
    .fcn input[type=submit] { width: 100% !important; }
    .fcn h3 { font-size: 22px !important; }
}

/* =====================================================================
   118. GALERIE PRODUIT QUI SUIT LE DEFILEMENT
   La colonne de droite (points forts, achat, livraison, paiement) est
   plus haute que la galerie. Au lieu de laisser un grand vide sous les
   photos, la galerie reste visible pendant que le client fait defiler
   la colonne de droite. Ordinateur et tablette seulement : sur
   telephone, tout est deja empile.
   ===================================================================== */
@media (min-width: 768px) {
    .single-product .e-con:has(> .elementor-widget-wd_single_product_gallery) {
        position: sticky !important;
        top: 100px;
        align-self: flex-start !important;
    }
}

/* =====================================================================
   119. PLUS SOBRE : MOINS DE SURTITRES, ORANGE RESERVE A L'ACHAT
   L'orange ne reste que sur ce qui fait acheter : prix, boutons,
   compte a rebours de livraison quand il presse. Tout le reste passe
   en teal ou en gris. Les petits surtitres en majuscules ne restent
   qu'en haut de chaque description.
   Pour revenir en arriere : supprimer cette section.
   ===================================================================== */

/* --- Descriptions longues (.fcb) --- */
.fcb { --fcb-or: var(--fcb-teal, #215d60); }
.fcb .fcb-bloc .fcb-kicker,
.fcb .fcb-bande .fcb-kicker,
.fcb .fcb-titre .fcb-kicker { display: none !important; }
.fcb .fcb-hero .fcb-kicker { color: #6b7d7b !important; letter-spacing: .18em; }

/* --- Descriptions courtes (.fcs) --- */
.elementor-widget-wd_single_product_short_description .woocommerce-product-details__short-description .fcs .fcs-pts li::before,
.fcs .fcs-pts li::before {
    background-color: #215d60 !important;
    box-shadow: 0 0 0 4px rgba(33, 93, 96, .10) !important;
}
.fcs .fcs-note {
    background: #f4f6f5 !important;
    border-color: rgba(33, 93, 96, .14) !important;
    color: #3c4b4a !important;
}
.fcs .fcs-note b { color: #215d60 !important; }
.fcs .fcs-note::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23215d60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23215d60'/%3E%3C/svg%3E") !important;
}

/* --- Bloc livraison (.fcl) : l'orange ne reste que pour l'urgence --- */
.fcl .fcl-kicker { color: #215d60 !important; }
.fcl .fcl-etapes li.fait::before { background: #215d60 !important; box-shadow: 0 0 0 3px rgba(33, 93, 96, .16) !important; }
.fcl .fcl-barre i { background: linear-gradient(90deg, #215d60, #3d8a8c) !important; }
.fcl.fcl-urgent .fcl-barre i { background: linear-gradient(90deg, #215d60, #E17731) !important; }

/* --- Miniatures de la galerie : cadre actif en teal --- */
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item.wd-thumb-active img,
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item.wd-active img {
    border-color: #215d60 !important;
    box-shadow: 0 0 0 3px rgba(33, 93, 96, .16) !important;
}

/* --- Titre « Notre Selection » : un seul ton, capsule discrete --- */
.fc-sel-tag,
.fenuaclick-elite-tag {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #6b7d7b !important;
    padding: 0 !important;
}
.fc-sel-title span,
.fenuaclick-elite-title .highlight { color: #215d60 !important; }
.fc-sel-line,
.fenuaclick-elite-divider { background: #215d60 !important; opacity: .35; }

/* =====================================================================
   120. POLICE DES TITRES : FAMILJEN GROTESK
   Remplace Poppins sur tous les titres du site, y compris les titres
   des produits dans la boutique et les blocs Fenua Click. Le texte
   courant ne change pas. La police est chargee par la ligne @import
   tout en haut du fichier.
   ===================================================================== */
h1, h2, h3, h4, h5, h6,
.title, .wd-entities-title, .product_title,
.elementor-heading-title,
.fcl .fcl-titre, .fcn h3, .fc-sel-title, .fenuaclick-elite-title {
    font-family: 'Familjen Grotesk', Poppins, Arial, sans-serif !important;
    letter-spacing: -.01em;
}

/* =====================================================================
   121. FLECHES DES CARROUSELS ET DE LA GALERIE EN TEAL
   Suite de la section 119 : l'orange reste reserve aux prix et aux
   boutons d'achat. Les fleches passent en teal, pleines au survol.
   ===================================================================== */
.wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner,
body .woocommerce-product-gallery .wd-nav-arrows .wd-arrow-inner {
    color: #215d60 !important;
    border-color: rgba(33, 93, 96, .35) !important;
}
.wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner::after,
.wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner::before {
    color: inherit !important;
}
.wd-nav-arrows .wd-btn-arrow:hover > .wd-arrow-inner,
.wd-nav-arrows .wd-btn-arrow:focus-visible > .wd-arrow-inner,
body .woocommerce-product-gallery .wd-nav-arrows .wd-arrow-inner:hover {
    background: #215d60 !important;
    color: #ffffff !important;
    border-color: #215d60 !important;
    box-shadow: 0 10px 22px -10px rgba(33, 93, 96, .55) !important;
}
.wd-nav-arrows .wd-btn-arrow.wd-disabled:hover > .wd-arrow-inner {
    background: #ffffff !important;
    color: #215d60 !important;
    border-color: rgba(33, 93, 96, .35) !important;
    box-shadow: none !important;
}

/* =====================================================================
   122. PAGE D'ACCUEIL PLUS SOBRE
   Meme principe que la section 119, applique a l'accueil seulement :
   l'orange reste sur le grand bandeau du haut (phrase qui tourne et
   bouton Visiter la boutique). Ailleurs, les numeros, pastilles,
   icones et liens passent en blanc sur la bande teal, en teal sur
   fond clair. Les petits surtitres en majuscules disparaissent.
   Pour revenir en arriere : supprimer cette section.
   ===================================================================== */

/* surtitres au dessus des titres : retires */
body.home .fc-kicker,
body.home .fc-sec3-tag { display: none !important; }

/* --- Bande teal « On installe et on parametre pour vous » --- */
/* numeros 01, 02, 03 et pastilles 1, 2, 3 : blanc, chiffre teal */
body.home .fc-num,
body.home .fc-steps .fc-step > b {
    background: #ffffff !important;
    color: #215d60 !important;
}
/* icones */
body.home .fc-ico { background: rgba(255, 255, 255, .14) !important; color: #ffffff !important; }
body.home .fc-ico svg { stroke: #ffffff !important; color: #ffffff !important; }
/* etiquettes (gratuite des 15 000 F, 2 500 F, Tahiti uniquement) */
body.home .fc-tag {
    background: rgba(255, 255, 255, .14) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
/* notes sous les cartes : phrase normale, lisible */
body.home .fc-foot {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, .75) !important;
}
/* cartes : bordure discrete */
body.home .fc-card { border-color: rgba(255, 255, 255, .16) !important; }
/* bouton « Une question sur la pose » : regle dans le widget lui meme */

/* --- Sections sur fond clair --- */
/* mot en couleur dans les titres : un seul ton */
body.home .marque { color: inherit !important; }
/* liens et bouton « Ecrivez nous » : teal */
body.home .fc-lien { color: #215d60 !important; text-decoration-color: rgba(33, 93, 96, .4) !important; }
body.home a.p {
    background: #215d60 !important;
    border-color: #215d60 !important;
    color: #ffffff !important;
}
body.home a.p:hover { background: #174749 !important; border-color: #174749 !important; }

/* =====================================================================
   123. ONGLETS DESCRIPTION / AVIS : PLUS DE GROS LISERE
   Le bloc des onglets avait une bordure haute de 6 px (reglee dans
   Elementor, widget Onglets 7b9ba506). On la remplace par un filet fin,
   et le soulignement de l'onglet actif passe en teal (orange reserve
   a l'achat).
   Pour revenir en arriere : supprimer cette section.
   ===================================================================== */
body.single-product .elementor .elementor-element.wd-single-tabs > .elementor-widget-container {
    border-width: 1px 0 0 0 !important;
    border-style: solid !important;
    border-color: rgba(33, 93, 96, .14) !important;
    border-radius: 0 !important;
}
.single-product .wd-single-tabs .wd-nav-tabs .nav-link-text::after {
    background-color: #215d60 !important;
}

/* =====================================================================
   124. NOUVELLES PHOTOS DES DESCRIPTIFS : PAS DE ZOOM
   Les anciennes images fournisseur avaient un cadre flou, d'ou le zoom
   de 14 %. Les nouvelles photos (classe fcb-photo) s'affichent entieres.
   ===================================================================== */
.fcb .fcb-media.fcb-photo img { transform: scale(1.012) !important; } /* coupe un fin bord sombre sur les cotes */

/* =====================================================================
   125. BLOCS DES DESCRIPTIFS : UN PEU PLUS DE CARACTERE
   Petit trait teal au dessus de chaque titre de bloc, ombre douce sous
   les nouvelles photos, blocs un peu plus resserres.
   Pour revenir en arriere : supprimer cette section.
   ===================================================================== */
body .fcb .fcb-bloc h3::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    width: 36px !important;
    height: 3px !important;
    margin: 0 0 18px !important;
    border-radius: 2px;
    background: #215d60 !important;
}
.fcb .fcb-bloc h3 { letter-spacing: -.01em; }
.fcb .fcb-media.fcb-photo { box-shadow: 0 22px 44px -22px rgba(22, 48, 47, .45); }
.fcb .fcb-bloc { padding-top: 28px !important; padding-bottom: 28px !important; }

/* =====================================================================
   126. MOTS EN GRAS DES DESCRIPTIFS : TEAL AU LIEU DE NOIR
   L'orange reste reserve a l'achat (prix, boutons).
   ===================================================================== */
.fcb p strong, .fcb p b { color: #215d60 !important; font-weight: 600; }
.fcb .fcb-bande p strong, .fcb .fcb-bande p b { color: #ffffff !important; }

/* =====================================================================
   127. BLOCS DES DESCRIPTIFS EN CARTES SABLE
   Chaque bloc image + texte est pose sur une carte sable aux coins
   arrondis : la page parait plus pleine et mieux rythmee. La photo
   prend un peu plus de place que le texte, le texte est plus lisible.
   Pour revenir en arriere : supprimer cette section.
   ===================================================================== */
.fcb .fcb-bloc {
    background: #f3eee5;
    border-radius: 32px;
    padding: 22px !important;
    margin: 0 0 22px !important;
    align-items: center;
}
.fcb .fcb-media.fcb-photo { box-shadow: none !important; border-radius: 22px !important; }
.fcb .fcb-bloc p { font-size: 17px !important; line-height: 1.7 !important; max-width: 470px !important; color: #4a5856 !important; }
@media (min-width: 768px) {
    .fcb .fcb-bloc { grid-template-columns: 1.15fr 1fr !important; gap: 56px !important; }
    .fcb .fcb-bloc.fcb-inverse { grid-template-columns: 1fr 1.15fr !important; }
    .fcb .fcb-bloc > div:not(.fcb-media) { padding: 12px 24px 12px 0; }
    .fcb .fcb-bloc.fcb-inverse > div:not(.fcb-media) { padding: 12px 0 12px 28px; }
}
@media (max-width: 767px) {
    .fcb .fcb-bloc { padding: 14px 14px 22px !important; border-radius: 24px; }
    .fcb .fcb-bloc > div:not(.fcb-media) { padding: 4px 8px 0; }
    .fcb .fcb-bloc p { font-size: 16px !important; }
}

/* =====================================================================
   128. PAGE COMMANDE : LE FORMULAIRE SUIT LE DEFILEMENT
   Comme la galerie sur les fiches produit : sur ordinateur, la colonne
   de gauche (coordonnees) reste visible pendant qu'on descend vers le
   paiement et le bouton Commander.
   ===================================================================== */
@media (min-width: 1025px) {
    .woocommerce-checkout form.checkout #customer_details {
        position: sticky;
        top: 100px;
        align-self: flex-start;
    }
}

/* =====================================================================
   129. PRIX EN FOURCHETTE (30 000 XPF a 35 500 XPF) SUR UNE LIGNE
   Dans les grilles de produits, quand le prix est une fourchette
   (produit avec options), il passe un peu plus petit pour tenir sur
   une seule ligne et rester aligne avec les autres cartes.
   ===================================================================== */
.wd-product .price:has(.woocommerce-Price-amount ~ .woocommerce-Price-amount),
.product-grid-item .price:has(.woocommerce-Price-amount ~ .woocommerce-Price-amount) {
    font-size: 15px !important;
    white-space: nowrap;
    letter-spacing: -.01em;
}

/* =====================================================================
   130. VAGUE DU PIED DE PAGE UN PEU PLUS VISIBLE SUR TELEPHONE
   Meme vague et meme animation que sur ordinateur (section 4),
   simplement un peu plus haute et des voiles d'eau un peu plus
   marques sur telephone. Ordinateur inchange.
   ===================================================================== */
@media (max-width: 767px) {
  footer.wd-footer::before {
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232c7f80' stop-opacity='0.42'/%3E%3Cstop offset='.55' stop-color='%232c7f80' stop-opacity='0.21'/%3E%3Cstop offset='1' stop-color='%232c7f80' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,150 L0,50 C120,32 360,68 480,50 C600,32 840,68 960,50 C1080,32 1320,68 1440,50 L1440,150 Z' fill='url(%23g)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232c7f80' stop-opacity='0.28'/%3E%3Cstop offset='.55' stop-color='%232c7f80' stop-opacity='0.14'/%3E%3Cstop offset='1' stop-color='%232c7f80' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,150 L0,38 C300,18 480,58 720,38 C960,18 1140,58 1440,38 L1440,150 Z' fill='url(%23g)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1140,120 960,0 720,60 C480,120 300,0 0,60 Z' fill='%23F9F7F2'/%3E%3C/svg%3E"),linear-gradient(#F9F7F2,#F9F7F2) !important;
    height: 95px !important;
  }
}

/* =====================================================================
   131. CARTES PRODUITS PLUS VIVANTES
   Les cartes etaient grises, avec un cadre gris, sur un fond creme :
   tout se fondait. Elles passent en blanc, sans cadre, avec une ombre
   douce et un leger soulevement au survol. Le badge En stock devient
   un simple texte vert avec son point, plus leger.
   S'applique a toutes les grilles de produits du site.
   Pour revenir en arriere : supprimer cette section.
   ===================================================================== */
body .wd-products .wd-product.product-grid-item {
    border-color: transparent !important;
    background: transparent !important;
}
body .wd-products .wd-product .product-wrapper {
    background: #ffffff !important;
    border: 1px solid #ebe4d8 !important;   /* fin contour sable */
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(22, 48, 47, .06), 0 10px 28px -14px rgba(22, 48, 47, .22) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
body .wd-products .wd-product .product-wrapper:hover {
    border-color: #ddd2bf !important;
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(22, 48, 47, .06), 0 18px 36px -16px rgba(22, 48, 47, .30) !important;
}
body .wd-products .wd-product .product-element-top { border-radius: 14px !important; }
body .wd-products .wd-product .wd-entities-title,
body .wd-products .wd-product .wd-entities-title a { color: #16302f !important; font-weight: 600 !important; }
/* au survol, le titre passe en teal (l'orange reste reserve au prix et aux boutons d'achat) */
body .wd-products .wd-product:hover .wd-entities-title a,
body .wd-products .wd-product .wd-entities-title a:hover { color: #215d60 !important; }
body .wd-products .wd-product p.fc-loop-stock,
body .wd-products .wd-product .wd-product-stock.in-stock {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #2f7d5b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
@media (prefers-reduced-motion: reduce) {
    body .wd-products .wd-product .product-wrapper:hover { transform: none; }
}

/* =====================================================================
   132. CARTES PRODUITS : VRAIE SEPARATION ENTRE IMAGE ET TEXTE
   L'image occupe tout le haut de la carte, bord a bord, et se termine
   par un filet net. Le texte (titre, categorie, stock, prix) est en
   dessous, sur fond blanc, avec ses propres marges.
   Pour revenir en arriere : supprimer cette section.
   ===================================================================== */
body .wd-products .wd-product .product-wrapper {
    padding: 0 0 18px !important;
    overflow: hidden;
}
body .wd-products .wd-product .product-element-top {
    margin: 0 0 16px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #e7dfd0;
}
body .wd-products .wd-product .product-element-top img { border-radius: 0 !important; }
body .wd-products .wd-product .product-element-bottom {
    padding: 0 16px !important;
}

/* =====================================================================
   133. STOCK FAIBLE (« Plus que 3 en stock ») PLUS VISIBLE
   Dans les grilles de produits, le texte et son point passent en
   orange doux : il attire l'oeil sans crier.
   ===================================================================== */
body .wd-products .wd-product p.fc-loop-stock.fc-low { color: #c8621f !important; }
body .wd-products .wd-product p.fc-loop-stock.fc-low::before {
    background: #E17731 !important;
    box-shadow: 0 0 0 3px rgba(225, 119, 49, .18) !important;
}

/* =====================================================================
   134. ICONES DU MENU : PASTILLE ET ANIMATION AU SURVOL
   Dans le menu du haut, chaque icone de categorie est posee dans une
   petite pastille teal clair, qui fonce au survol. Au survol, l'icone
   s'anime une fois : la voiture avance, la dashcam flashe, l'epingle
   GPS rebondit, le telephone vibre, la patte fait un pas.
   Pour garder les icones sans pastille : supprimer le bloc « pastille ».
   ===================================================================== */
@keyframes fc-rouler { 0%{transform:translateX(0)} 35%{transform:translateX(4px)} 55%{transform:translateX(2px) translateY(-1px)} 100%{transform:translateX(0)} }
@keyframes fc-flash  { 0%{transform:scale(1)} 20%{transform:scale(.82)} 40%{transform:scale(1.15);opacity:1} 100%{transform:scale(1)} }
@keyframes fc-rebond { 0%{transform:translateY(0)} 30%{transform:translateY(-5px)} 55%{transform:translateY(0)} 72%{transform:translateY(-2px)} 100%{transform:translateY(0)} }
@keyframes fc-vibre  { 0%,100%{transform:rotate(0)} 15%{transform:rotate(-12deg)} 30%{transform:rotate(10deg)} 45%{transform:rotate(-8deg)} 60%{transform:rotate(5deg)} 75%{transform:rotate(-2deg)} }
@keyframes fc-patte  { 0%,100%{transform:rotate(0) translateY(0)} 40%{transform:rotate(-14deg) translateY(-2px)} 70%{transform:rotate(6deg)} }

.wd-nav a[href*="/categorie-produit/auto-et-moto/"]:hover::before { animation: fc-rouler .7s ease; }
.wd-nav a[href*="/categorie-produit/dashcam/"]:hover::before { animation: fc-flash .7s ease; }
.wd-nav a[href*="/categorie-produit/gps/"]:hover::before { animation: fc-rebond .7s ease; }
.wd-nav a[href*="/categorie-produit/high-tech-et-multimedia/"]:hover::before { animation: fc-vibre .7s ease; }
.wd-nav a[href*="/categorie-produit/animaux/"]:hover::before { animation: fc-patte .7s ease; }

/* pastille, menu du haut uniquement */
.whb-header .wd-nav-header a[href*="/categorie-produit/"] { position: relative; gap: 14px !important; }
.whb-header .wd-nav-header a[href*="/categorie-produit/"]::before { position: relative; z-index: 1; }
.whb-header .wd-nav-header a[href*="/categorie-produit/"]::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 10px;
    background: rgba(33, 93, 96, .1);
    transition: background-color .25s ease, transform .25s ease;
    pointer-events: none;
}
.whb-header .wd-nav-header a[href*="/categorie-produit/"]:hover::after {
    background: rgba(33, 93, 96, .18);
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .wd-nav a[href*="/categorie-produit/"]:hover::before { animation: none !important; }
}

/* =====================================================================
   135. PROMOTIONS PLUS DOUCES
   Badge de reduction (-29 %) dans l'orange de la boutique au lieu du
   rouge vif, et ancien prix barre en gris discret. Le nouveau prix
   reste en orange, la promo se voit sans crier.
   ===================================================================== */
body .product-labels .product-label.onsale {
    background: #E17731 !important;
    color: #ffffff !important;
    font-weight: 700;
}
body .wd-product .price del,
body .wd-product .price del .amount,
body .single-product .price del,
body .single-product .price del .amount {
    color: #9aa7a5 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
    text-decoration-color: #9aa7a5 !important;
}
body .wd-product .price del { font-size: .82em; margin-right: 6px; }
body .wd-product .price ins { text-decoration: none !important; }

/* =====================================================================
   136. BOUTON FLOTTANT "UNE QUESTION ?" EN TEAL
   L'orange reste reserve a l'achat. Le bouton Messenger passe en teal,
   un peu plus fonce au survol. Le point blanc garde son contour teal.
   ===================================================================== */
body #fc-chat { background: #215d60 !important; }
body #fc-chat:hover { background: #184a4c !important; box-shadow: 0 14px 30px -12px rgba(33, 93, 96, .6) !important; }
body #fc-chat .fc-chat-dot { border-color: #215d60 !important; }
body #fc-chat:hover .fc-chat-dot { border-color: #184a4c !important; }

/* =====================================================================
   139. CARTES PRODUITS : LA PHOTO SE TERMINE PAR UNE VAGUE
   Au lieu d'un trait droit, la photo de chaque carte se termine par
   une petite vague blanche, la meme courbe que les bandes de l'accueil
   et du bandeau de la boutique. Valable partout ou il y a une grille
   de produits (boutique, categories, accueil).
   Pour revenir au trait droit : supprimer cette section.
   ===================================================================== */
body .wd-products .wd-product .product-element-top {
    position: relative;
    border-bottom: 0 !important;
    margin-bottom: 8px !important;
}
body .wd-products .wd-product .product-element-top::after {
    content: "";
    position: absolute;
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: -1px;
    width: auto !important;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 12 C 70 0 140 0 210 10 C 280 20 340 20 400 8 L400 24 Z' fill='%23ffffff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    border: 0 !important;          /* le theme y mettait un trait noir a gauche */
    box-shadow: none !important;
    animation: none !important;
    border-radius: 0 !important;
    pointer-events: none;
    z-index: 5;
}
/* la photo est encadree de blanc : marge autour, coins arrondis en haut */
body .wd-products .wd-product .product-wrapper { padding: 8px 8px 18px !important; }
body .wd-products .wd-product .product-element-top { border-radius: 14px 14px 0 0 !important; overflow: hidden; }
@media (max-width: 767px) {
    body .wd-products .wd-product .product-element-top::after { height: 14px; }
    body .wd-products .wd-product .product-wrapper { padding: 6px 6px 14px !important; }
    body .wd-products .wd-product .product-element-top { border-radius: 12px 12px 0 0 !important; }
}

/* =====================================================================
   140. NEWSLETTER DANS LA COLONNE DE LA BOUTIQUE : CARTE TEAL
   Dans la colonne de gauche (boutique, categories), le bloc newsletter
   devient une carte teal aux coins arrondis, avec le motif de vagues
   en filigrane : il se detache des filtres et des avis au dessus.
   Textes en blanc, champ e mail et bouton blancs.
   Le bloc newsletter ailleurs sur le site ne change pas.
   ===================================================================== */
body .sidebar-container .fcn {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #215d60 !important;
    border-radius: 20px !important;
    padding: 26px 18px 20px !important;
    box-shadow: 0 16px 34px -20px rgba(16, 40, 38, .45) !important;
}
body .sidebar-container .fcn::before {
    content: "";
    position: absolute;
    inset: -20% -40%;
    background-image: var(--fc-koru);
    background-size: cover;
    background-position: center;
    opacity: .1;
    pointer-events: none;
    z-index: -1;
}
body .sidebar-container .fcn .fcn-kicker { background: rgba(255, 255, 255, .12) !important; color: #ffffff !important; }
body .sidebar-container .fcn .fcn-kicker svg { stroke: #8ed0cd !important; }
body .sidebar-container .fcn h3 { color: #ffffff !important; }
body .sidebar-container .fcn h3 span { color: #8ed0cd !important; }
body .sidebar-container .fcn p.fcn-sous { color: rgba(255, 255, 255, .8) !important; }
body .sidebar-container .fcn .fcn-ligne {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
body .sidebar-container .fcn .fcn-champ {
    background: #ffffff !important;
    border-radius: 11px !important;
    border: 0 !important;
}
body .sidebar-container .fcn input[type=submit] {
    width: 100% !important;
    background: #8ed0cd !important;
    color: #123b3d !important;
}
body .sidebar-container .fcn input[type=submit]:hover { background: #ffffff !important; }
body .sidebar-container .fcn label.fcn-accord { color: rgba(255, 255, 255, .82) !important; }
body .sidebar-container .fcn label.fcn-accord a { color: #ffffff !important; }
body .sidebar-container .fcn label.fcn-accord input { accent-color: #8ed0cd; }
body .sidebar-container .fcn .fcn-rassure li { color: rgba(255, 255, 255, .72) !important; }
body .sidebar-container .fcn .fcn-rassure li::before { background: #8ed0cd !important; }

/* =====================================================================
   141. "LES AVIS CLIENTS" DANS LA COLONNE : PETITES CARTES
   Chaque avis devient une petite carte blanche au fin contour sable,
   avec une miniature arrondie et un guillemet teal devant le nom du
   client. Au survol, la carte se souleve et le titre passe en teal
   (plus d'orange, reserve a l'achat).
   ===================================================================== */
body .sidebar-container .widget_recent_reviews .product_list_widget {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}
body .sidebar-container .widget_recent_reviews .product_list_widget li {
    position: relative;
    margin: 0 !important;
    padding: 12px 12px 12px 12px !important;
    background: #ffffff !important;
    border: 1px solid #ebe4d8 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px -16px rgba(16, 40, 38, .35);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body .sidebar-container .widget_recent_reviews .product_list_widget li::after { display: none !important; }
body .sidebar-container .widget_recent_reviews .product_list_widget li:hover {
    transform: translateY(-2px);
    border-color: #ddd2bf !important;
    box-shadow: 0 12px 24px -16px rgba(16, 40, 38, .45);
}
body .sidebar-container .widget_recent_reviews .product_list_widget img {
    border-radius: 10px !important;
    background: #f5efe6;
}
body .sidebar-container .widget_recent_reviews .product-title {
    color: #16302f !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    transition: color .2s ease;
}
body .sidebar-container .widget_recent_reviews li:hover .product-title,
body .sidebar-container .widget_recent_reviews a:hover .product-title { color: #215d60 !important; }
body .sidebar-container .widget_recent_reviews .reviewer {
    display: block;
    margin-top: 4px;
    color: #7a8786 !important;
    font-size: 12.5px !important;
    font-style: italic;
}
body .sidebar-container .widget_recent_reviews .reviewer::before {
    content: "\201C";
    margin-right: 4px;
    color: #215d60;
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 0;
}
@media (prefers-reduced-motion: reduce) {
    body .sidebar-container .widget_recent_reviews .product_list_widget li:hover { transform: none; }
}

/* =====================================================================
   142. ONGLETS DE PRODUITS (Nouveaux, Promotions, GPS, Dashcam)
   Les onglets sont centres sous le titre, dans une pastille blanche
   au contour sable. L'onglet actif est rempli en teal, les autres
   en texte teal, avec un fond teal tres clair au survol.
   Les etoiles vides (produit sans avis) sont masquees dans les cartes.
   ===================================================================== */
/* menu des onglets : voir la section 166 */

/* produit sans avis : etoiles vides couleur sable et "(0 avis)" (ajoute par le Custom JS) */
body .wd-product .fc-note-vide .star-rating::before { color: #d8cfbf !important; }
/* telephone : titres sur 2 lignes maximum, pour des cartes plus regulieres et moins de vide */
@media (max-width: 767px) {
    body .wd-products .wd-product .wd-entities-title {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* =====================================================================
   143. CARTES DE L'ACCUEIL : SANS BANDE GRISE, AVEC LE NOMBRE D'AVIS
   Dans les onglets de l'accueil (style de survol "tiled"), le theme
   posait une ombre grise sous chaque carte, d'ou une bande grise en
   bas. Elle est retiree : seule l'ombre de la carte blanche reste.
   Le nombre d'avis "(2 avis)" est ajoute a cote des etoiles par le
   script "nombre d'avis" du Custom JS ; ici, sa mise en forme.
   ===================================================================== */
body .wd-products .wd-product.wd-hover-tiled { box-shadow: none !important; background: transparent !important; }
body .wd-products .wd-product.wd-hover-tiled::before,
body .wd-products .wd-product.wd-hover-tiled::after { display: none !important; }
body .wd-product .fc-note { display: flex; align-items: center; gap: 6px; }
body .wd-product .fc-note .star-rating { margin: 0 !important; }
body .wd-product .fc-note-nb { font-size: 12.5px; color: #7a8786; font-weight: 500; line-height: 1; }

/* =====================================================================
   144. "COMMANDER, C'EST SIMPLE" : SANS LES GROSSES VAGUES DE FOND
   Le motif koru (les grosses courbes claires) est retire de ce bloc
   (widget 2649b00). Les fines lignes du widget restent.
   Pour remettre le motif : supprimer cette section.
   ===================================================================== */
html body .elementor-element-2649b00.fc-fond-teal::before { display: none !important; }

/* =====================================================================
   145. MENU DU HAUT HARMONISE
   Chaque entree devient une pastille arrondie : fond teal tres clair
   au survol, et la categorie de la page en cours est surlignee, avec
   son icone en blanc sur rond teal. Les ronds des icones remplacent
   les carres. Le petit trait orange sous l'entree active est retire.
   "Aide & contact" devient un bouton au contour teal avec une icone
   de bulle, ecrit en minuscules ; il se remplit de teal au survol.
   ===================================================================== */
.whb-header .wd-nav-main > li > a {
    border-radius: 999px !important;
    padding: 6px 16px 6px 14px !important;  /* 14 px a gauche : l'icone tombe au centre de son rond */
    color: #16302f !important;
    font-weight: 500 !important;
    transition: background-color .2s ease, color .2s ease;
}
.whb-header .wd-nav-main.wd-style-separated > li::after,
.whb-header .wd-nav-main.wd-style-separated > li + li::before { display: none !important; }
.whb-header .wd-nav-main > li > a .nav-link-text::after { display: none !important; }
.whb-header .wd-nav-main > li > a[href*="/categorie-produit/"]::after {
    left: 8px !important;
    border-radius: 50% !important;
    background: rgba(33, 93, 96, .1) !important;
}
.whb-header .wd-nav-main > li > a:hover { background: rgba(33, 93, 96, .07) !important; color: #215d60 !important; }
.whb-header .wd-nav-main > li > a[href*="/categorie-produit/"]:hover::after { background: rgba(33, 93, 96, .16) !important; }
.whb-header .wd-nav-main > li.current-menu-item > a,
.whb-header .wd-nav-main > li.current-menu-ancestor > a {
    background: rgba(33, 93, 96, .1) !important;
    color: #215d60 !important;
    font-weight: 600 !important;
}
.whb-header .wd-nav-main > li.current-menu-item > a[href*="/categorie-produit/"]::after,
.whb-header .wd-nav-main > li.current-menu-ancestor > a[href*="/categorie-produit/"]::after { background: #215d60 !important; }
.whb-header .wd-nav-main > li.current-menu-item > a[href*="/categorie-produit/"]::before,
.whb-header .wd-nav-main > li.current-menu-ancestor > a[href*="/categorie-produit/"]::before { background-color: #ffffff !important; }

/* Aide & contact : bouton au contour teal */
.whb-header .wd-nav-main > li > a[href*="aide-contact"] {
    margin-left: 18px !important;
    padding: 7px 18px 7px 14px !important;
    gap: 8px !important;
    border: 1.5px solid #215d60 !important;
    color: #215d60 !important;
    font-weight: 600 !important;
}
.whb-header .wd-nav-main > li > a[href*="aide-contact"]::before {
    content: "" !important;
    display: inline-block !important;
    width: 17px !important;
    height: 17px !important;
    background-color: #215d60 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1 -11.6 7.1L4 20l1 -4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1 -11.6 7.1L4 20l1 -4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.whb-header .wd-nav-main > li > a[href*="aide-contact"] .nav-link-text { display: inline-block; text-transform: lowercase !important; }
.whb-header .wd-nav-main > li > a[href*="aide-contact"] .nav-link-text::first-letter { text-transform: uppercase; }
.whb-header .wd-nav-main > li > a[href*="aide-contact"]:hover { background: #215d60 !important; color: #ffffff !important; }
.whb-header .wd-nav-main > li > a[href*="aide-contact"]:hover::before { background-color: #ffffff !important; }

/* =====================================================================
   146. BOUTON "MENU" DE L'EN TETE EN PASTILLE
   Le bouton des categories ne descend plus jusqu'en bas de l'en tete
   comme un onglet : il devient une pastille teal de la meme hauteur
   que la recherche, centree verticalement, juste assez large pour son
   texte. Le menu deroulant s'ouvre en dessous avec des coins arrondis.
   ===================================================================== */
.whb-header .wd-header-cats {
    align-self: center !important;
    height: auto !important;
    margin-block: 0 !important;
}
.whb-header .wd-header-cats .menu-opener {
    height: 46px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 18px 0 16px !important;
    gap: 10px !important;
    border-radius: 999px !important;
    background-color: #215d60 !important;
    color: #ffffff !important;
    transition: background-color .2s ease;
}
.whb-header .wd-header-cats .menu-opener:hover,
.whb-header .wd-header-cats.wd-opened .menu-opener { background-color: #184a4c !important; }
.whb-header .wd-header-cats .menu-opener .menu-open-label { font-size: 15px !important; font-weight: 600 !important; }
.whb-header .wd-header-cats .wd-dropdown-cats {
    margin-top: 8px !important;
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid #ebe4d8 !important;
    box-shadow: 0 18px 40px -20px rgba(16, 40, 38, .35) !important;
}

/* =====================================================================
   147. CARTES PRODUITS SUR TELEPHONE (onglets de l'accueil)
   Sur telephone, les boutons d'action poses sur la photo (panier,
   loupe) etaient ecrases et coupes au bord de la carte : ils sont
   masques, le tactile n'a pas de survol. Le nombre d'avis reste sur
   une ligne, quitte a passer sous les etoiles si la carte est etroite.
   ===================================================================== */
@media (max-width: 767px) {
    body .wd-products .wd-product.wd-hover-tiled .wd-buttons { display: none !important; }
    body .wd-product .fc-note { flex-wrap: wrap; gap: 2px 6px; }
    body .wd-product .fc-note-nb { font-size: 11.5px; white-space: nowrap; }
}

/* =====================================================================
   148. BARRE DU HAUT (texte livraison) ADAPTEE AU TELEPHONE
   Va avec le texte de l'element Texte de la barre du haut :
   <div class="fc-topbar">...</div>
   Ordinateur : les deux messages. Tablette : sans la mention des iles.
   Telephone : un seul message centre.
   ===================================================================== */
.fc-topbar { display: flex; align-items: center; gap: 15px; font-size: 12px; color: #ffffff; white-space: nowrap; }
.fc-topbar p { margin: 0 !important; display: contents; }
.fc-topbar br { display: none; }
.fc-topbar .fc-tb-item { display: inline-flex; align-items: center; gap: 5px; }
.fc-topbar b { color: #ff7e29; font-weight: 700; }
.fc-topbar .fc-tb-iles { opacity: .7; }
.fc-topbar .fc-tb-sep { opacity: .3; }
@media (max-width: 1024px) {
    .fc-topbar .fc-tb-iles { display: none; }
}
@media (max-width: 767px) {
    .fc-topbar { justify-content: center; width: 100%; font-size: 11.5px; gap: 8px; }
    .fc-topbar .fc-tb-sep,
    .fc-topbar .fc-tb-mardi { display: none; }
    /* les reseaux sociaux de la barre du haut sont masques sur telephone */
    .whb-top-bar .wd-social-icons { display: none !important; }
    .whb-top-bar .whb-column { justify-content: center !important; }
}

/* =====================================================================
   149. MENU DU HAUT SUR PETIT ORDINATEUR ET TABLETTE PAYSAGE
   Entre 1025 et 1279 px, les entrees du menu passaient sur deux lignes
   et chevauchaient la barre du haut. Elles restent sur une ligne, et
   entre 1025 et 1199 px seules les icones des categories s'affichent
   (le texte revient au dessus de 1200 px). La recherche se resserre.
   ===================================================================== */
@media (min-width: 1025px) and (max-width: 1279px) {
    .whb-header .wd-nav-main { flex-wrap: nowrap !important; gap: 2px !important; }
    .whb-header .wd-nav-main > li > a { white-space: nowrap !important; padding: 6px 12px 6px 14px !important; }
    .whb-header .wd-header-main-nav { flex: 0 0 auto !important; }
    .whb-header .wd-search-form { min-width: 0 !important; flex: 1 1 auto !important; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
    .whb-header .wd-nav-main > li > a[href*="/categorie-produit/"] .nav-link-text { display: none !important; }
    .whb-header .wd-nav-main > li > a[href*="/categorie-produit/"] { padding: 6px 14px !important; gap: 0 !important; }
}

/* =====================================================================
   150. COMPTE ET PANIER TOUJOURS VISIBLES DANS L'EN TETE
   Entre 1025 et 1599 px, "Connexion / Inscription" et le panier
   sortaient de l'ecran a droite. La recherche peut maintenant se
   resserrer, le texte du compte laisse place a sa seule icone, et
   entre 1025 et 1199 px le total du panier est masque (l'icone et
   la pastille du nombre d'articles restent).
   ===================================================================== */
@media (min-width: 1025px) {
    .whb-header .whb-general-header .whb-col-center { min-width: 0 !important; }
    .whb-header .whb-general-header .wd-search-form { width: 100% !important; min-width: 0 !important; }
}
@media (min-width: 1025px) and (max-width: 1599px) {
    .whb-header .whb-general-header .wd-header-my-account .wd-tools-text { display: none !important; }
    .whb-header .whb-general-header .wd-header-my-account > a { padding: 0 6px !important; }
    .whb-header .whb-general-header .wd-header-divider { display: none !important; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
    /* un peu d'air sur les bords pour le logo et le panier */
    .whb-header .whb-general-header .container,
    .whb-header .whb-top-bar .container { padding-inline: 20px !important; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
    .whb-header .whb-general-header .wd-header-cart .wd-cart-subtotal,
    .whb-header .whb-general-header .wd-header-cart .subtotal-divider { display: none !important; }
}

/* =====================================================================
   151. ACCUEIL : PAS DE BANDE VIDE AU DESSUS DU PIED DE PAGE
   Le theme ajoute 40 px de marge en bas du contenu principal
   (main.wd-content-layout). Sur l'accueil et les pages faites avec
   Elementor, la derniere section touche maintenant le pied de page.
   ===================================================================== */
body.home main.wd-content-layout,
body.elementor-page main.wd-content-layout { padding-bottom: 0 !important; }


/* =====================================================================
   152. PASTILLES DE CATEGORIES : TOUJOURS VISIBLES SUR TELEPHONE
   Les pastilles de la boutique (section 22 du functions.php, mises en
   forme en sections 61 et 79) restent affichees sous 768 px, dans la
   barre d'outils de la boutique, sur leur propre ligne.
   ===================================================================== */
@media (max-width: 767px) {
    .shop-loop-head { display: flex !important; flex-wrap: wrap; }
    .shop-loop-head > .wd-shop-tools:last-child { display: flex !important; flex: 1 1 100%; min-width: 0; }
    .wd-shop-tools .fc-pastilles { display: block !important; }
}


/* =====================================================================
   153. ACCUEIL : UN SEUL FOND CREME CONTINU, TRANSITIONS FLUIDES
   WoodMart pose un fond blanc sur la zone de contenu, et certaines
   sections Elementor gardent leur propre fond creme ou blanc : d'ou les
   bandes droites entre les blocs.
   Les regles visent la page qui contient le bloc Commander (l'accueil),
   sans dependre de la classe home : elles marchent aussi dans Elementor.
   1. Toute la zone de contenu de l'accueil passe au meme creme #f9f7f2.
   2. Tout element Elementor (section, colonne, conteneur, widget) qui
      contient l'un des blocs Avis, Commander, Newsletter ou Qui sommes
      nous perd son fond et son voile : seules restent les vagues des blocs.
   ===================================================================== */
body:has(.fc-serv-wrapper),
body:has(.fc-serv-wrapper) .website-wrapper,
body:has(.fc-serv-wrapper) .main-page-wrapper,
body:has(.fc-serv-wrapper) .wd-page-content,
body:has(.fc-serv-wrapper) .wd-content-layout,
body:has(.fc-serv-wrapper) .site-content {
    background-color: #f9f7f2 !important;
}
body:has(.fc-serv-wrapper) .elementor-element:has(.fc-avis, .fc-serv-wrapper, .fc-newsletter-normal, .fc-equipe),
body:has(.fc-serv-wrapper) .elementor-element:has(.fc-avis, .fc-serv-wrapper, .fc-newsletter-normal, .fc-equipe) > .elementor-widget-container,
body:has(.fc-serv-wrapper) .elementor-element:has(.fc-avis, .fc-serv-wrapper, .fc-newsletter-normal, .fc-equipe) > .elementor-widget-wrap {
    background: transparent !important;
    background-image: none !important;
}
body:has(.fc-serv-wrapper) .elementor-element:has(.fc-avis, .fc-serv-wrapper, .fc-newsletter-normal, .fc-equipe) > .elementor-background-overlay,
body:has(.fc-serv-wrapper) .elementor-element:has(.fc-avis, .fc-serv-wrapper, .fc-newsletter-normal, .fc-equipe) > .elementor-shape {
    display: none !important;
}

/* 153 bis. CHAQUE BLOC PEINT LUI MEME SON FOND CREME, SUR TOUTE LA LARGEUR
   Plus besoin que les conteneurs autour soient transparents : chaque bloc
   pose le creme #f9f7f2 sous ses vagues. Les sections alternent :
     Avis : bande teal tres claire fondue      Commander : creme + vagues fines
     Newsletter : bande teal tres claire fondue  Qui sommes nous : creme + vagues fines
   Les bandes s'effacent en degrade en haut et en bas, sans trait droit. */
body .fc-avis{padding-top:90px !important;padding-bottom:70px !important}
body .fc-avis::before{top:0 !important;bottom:0 !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23215d60' stop-opacity='0'/%3E%3Cstop offset='.14' stop-color='%23215d60' stop-opacity='.07'/%3E%3Cstop offset='.86' stop-color='%23215d60' stop-opacity='.07'/%3E%3Cstop offset='1' stop-color='%23215d60' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 50 C 300 10 520 90 760 45 C 1000 0 1220 70 1440 35 L1440 560 C 1180 600 960 520 720 565 C 480 610 260 530 0 570 Z' fill='url%28%23g%29'/%3E%3Cg fill='none' stroke='%23215d60' stroke-width='1.5' opacity='.12'%3E%3Cpath d='M0 80 C 300 40 520 120 760 75 C 1000 30 1220 100 1440 65'/%3E%3Cpath d='M0 540 C 260 500 480 580 720 535 C 960 490 1180 570 1440 530'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, #f9f7f2 !important}
body .fc-serv-wrapper{background-color:#f9f7f2 !important}
body .fc-newsletter-normal::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23215d60' stop-opacity='0'/%3E%3Cstop offset='.14' stop-color='%23215d60' stop-opacity='.07'/%3E%3Cstop offset='.86' stop-color='%23215d60' stop-opacity='.07'/%3E%3Cstop offset='1' stop-color='%23215d60' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 50 C 300 10 520 90 760 45 C 1000 0 1220 70 1440 35 L1440 560 C 1180 600 960 520 720 565 C 480 610 260 530 0 570 Z' fill='url%28%23g%29'/%3E%3Cg fill='none' stroke='%23215d60' stroke-width='1.5' opacity='.12'%3E%3Cpath d='M0 80 C 300 40 520 120 760 75 C 1000 30 1220 100 1440 65'/%3E%3Cpath d='M0 540 C 260 500 480 580 720 535 C 960 490 1180 570 1440 530'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, #f9f7f2 !important}
body .fc-equipe::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 700' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23215d60' stroke-linecap='round'%3E%3Cpath d='M0 38 C 240 12 480 64 720 38 C 960 12 1200 64 1440 38' stroke-width='2' opacity='.18'/%3E%3Cpath d='M0 60 C 240 34 480 86 720 60 C 960 34 1200 86 1440 60' stroke-width='1.5' opacity='.11'/%3E%3Cpath d='M0 560 C 260 500 500 640 760 575 C 1000 515 1220 620 1440 565' stroke-width='2' opacity='.18'/%3E%3Cpath d='M0 600 C 260 540 500 680 760 615 C 1000 555 1220 660 1440 605' stroke-width='1.5' opacity='.11'/%3E%3Cpath d='M0 640 C 260 580 500 720 760 655 C 1000 595 1220 700 1440 645' stroke-width='1' opacity='.07'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, #f9f7f2 !important}

/* 153 ter. PLUS DE FENTE D UN PIXEL ENTRE LES SECTIONS : chaque fond deborde de 2px */
body .fc-avis::before,
body .fc-newsletter-normal::before,
body .fc-equipe::before{top:-2px !important;bottom:-2px !important}
body .fc-serv-wrapper{box-shadow:0 -2px 0 #f9f7f2,0 2px 0 #f9f7f2}
body .elementor-element:has(.fc-avis, .fc-serv-wrapper, .fc-newsletter-normal, .fc-equipe){overflow:visible !important}

/* ============================================================
   155. ESPACEMENTS IDENTIQUES ENTRE TOUTES LES SECTIONS
   (ordinateur, tablette, telephone). Pour tout changer,
   modifie seulement les valeurs --fc-sec et --fc-titre.
   ============================================================ */
:root{--fc-sec:80px;--fc-titre:40px;--fc-env:35px}
@media (max-width:1024px){:root{--fc-sec:64px;--fc-titre:32px}}
@media (max-width:767px){:root{--fc-sec:48px;--fc-titre:24px;--fc-env:25px}}

/* espace en haut et en bas de chaque section */
body .fc-avis,
body .fc-serv-wrapper,
body .fc-newsletter-normal,
body .fc-equipe{
  padding-top:var(--fc-sec) !important;
  padding-bottom:var(--fc-sec) !important;
}
body .fc-new{padding-top:var(--fc-sec) !important}

/* newsletter avec enveloppe : la vague du bas fait 20px partout */
body .fc-news-wrapper{
  padding-top:var(--fc-sec) !important;
  padding-bottom:calc(var(--fc-sec) + 20px) !important;
}
body .fc-news-wrapper::after{height:20px !important}

/* espace entre le titre et le contenu */
body .fc-avis-titre,
body .fc-serv-header,
body .fc-nl-header,
body .fc-eq-header,
body .fc-equipe-header{margin:0 0 var(--fc-titre) !important}

/* "Nos derniers arrivages" : titre, sous titre, puis produits */
body .fc-new h2{margin:0 !important}
body .fc-new .fc-sub{margin:12px auto var(--fc-titre) !important}

/* newsletter avec enveloppe : on ajoute la hauteur de l'enveloppe */
body .fc-news-header{margin:0 auto !important}
body .fc-news-grid{padding-top:calc(var(--fc-titre) + var(--fc-env)) !important}

/* les conteneurs Elementor n'ajoutent plus d'espace en plus */
body .e-con:has(> .elementor-widget-html .fc-avis),
body .e-con:has(> .elementor-widget-html .fc-serv-wrapper),
body .e-con:has(> .elementor-widget-html .fc-news-wrapper),
body .e-con:has(> .elementor-widget-html .fc-newsletter-normal),
body .e-con:has(> .elementor-widget-html .fc-equipe),
body .e-con:has(> .elementor-widget-html .fc-new){
  --padding-top:0px !important;
  --padding-bottom:0px !important;
}

/* ============================================================
   156. ACCUEIL : FLECHES DES CARROUSELS PRODUITS TOUJOURS VISIBLES SUR PC
   ============================================================ */
@media (min-width:1025px){
  body.home .wd-carousel-container .wd-nav-arrows,
  body.home .wd-products-element .wd-nav-arrows{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  body.home .wd-carousel-container .wd-btn-arrow,
  body.home .wd-carousel-container .wd-nav-arrows > div,
  body.home .wd-products-element .wd-nav-arrows > div{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }
}

/* ============================================================
   158. ACCUEIL : MEME LARGEUR DE CONTENU QUE LE HERO
   1280 px au maximum, avec la meme marge sur les cotes.
   Pour tout elargir ou retrecir, modifie seulement --fc-large.
   ============================================================ */
:root{--fc-large:1280px;--fc-cote:40px}
@media (max-width:1024px){:root{--fc-cote:24px}}
@media (max-width:767px){:root{--fc-cote:18px}}

body .fc-new,
body #fc-avis,
body .fc-serv-content,
body .fc-equipe .fc-wrapper{
  box-sizing:border-box !important;
  max-width:var(--fc-large) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--fc-cote) !important;
  padding-right:var(--fc-cote) !important;
}
body .fc-news-wrapper{
  padding-left:var(--fc-cote) !important;
  padding-right:var(--fc-cote) !important;
}
body .fc-news-header,
body .fc-news-grid{
  max-width:calc(var(--fc-large) - 2 * var(--fc-cote)) !important;
}

/* 159. COMMANDER ET NEWSLETTER BIEN CENTRES SUR TOUTE LA LARGEUR */
body .fc-serv-wrapper,
body .fc-news-wrapper{
  width:auto !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

/* ============================================================
   160. BARRE DU BAS SUR TELEPHONE : PLUS CLAIRE ET PLUS FACILE
   (la page en cours est marquee par le script du Global Custom JS)
   ============================================================ */
@media (max-width:1024px){
  body .wd-toolbar{
    left:0 !important;right:0 !important;bottom:0 !important;
    margin:0 !important;width:100% !important;max-width:none !important;
    border-radius:18px 18px 0 0 !important;
    background:#fff !important;
    border-top:1px solid #e6ebe8 !important;
    box-shadow:0 -8px 24px -12px rgba(16,40,38,.25) !important;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
    height:auto !important;min-height:64px !important;
  }
  body .wd-toolbar .wd-toolbar-item{flex:1 1 0 !important}
  body .wd-toolbar .wd-toolbar-item > a{
    display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
    gap:4px !important;min-height:52px !important;padding:4px 2px !important;border-radius:14px !important;
    color:#174749 !important;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,background .2s ease;
  }
  body .wd-toolbar .wd-toolbar-item > a:active{transform:scale(.94)}
  body .wd-toolbar .wd-tools-icon{font-size:22px !important;color:#215d60 !important;height:auto !important}
  body .wd-toolbar .wd-tools-icon:before{font-size:22px !important}
  body .wd-toolbar .wd-toolbar-label{
    font:600 11.5px/1.2 Inter,Arial,sans-serif !important;color:#174749 !important;
    text-transform:none !important;letter-spacing:0 !important;margin:0 !important;
  }
  body .wd-toolbar .wd-toolbar-item.fc-actif > a{background:rgba(33,93,96,.10) !important}
  body .wd-toolbar .wd-toolbar-item.fc-actif .wd-toolbar-label{color:#215d60 !important;font-weight:700 !important}
  body .wd-toolbar .wd-cart-number,
  body .wd-toolbar .wd-tools-count{
    display:flex !important;align-items:center;justify-content:center;
    min-width:18px !important;height:18px !important;padding:0 5px !important;border-radius:999px !important;
    background:#de7735 !important;color:#fff !important;font:700 10.5px/1 Inter,Arial,sans-serif !important;
    top:-6px !important;right:-10px !important;border:2px solid #fff !important;
  }
  body .scrollToTop,
  body .wd-scroll-top{bottom:calc(80px + env(safe-area-inset-bottom)) !important;right:14px !important}
}

/* =====================================================================
   165. ONGLETS PRODUITS DE L'ACCUEIL : PAS D'ETOILES VIDES
   ===================================================================== */
body .wd-products-tabs .wd-product .star-rating:has(> span[style*="width:0%"]),
body .wd-products-tabs .wd-product .star-rating:has(> span[style*="width: 0%"]),
body .wd-products-tabs .wd-product .wd-star-rating:has(span[style*="width:0%"]),
body .wd-products-tabs .wd-product .wd-star-rating:has(span[style*="width: 0%"]),
body .wd-products-tabs .wd-product .fc-note-vide{
  display:none !important;
}

/* =====================================================================
   166. MENU DES ONGLETS PRODUITS DE L'ACCUEIL (Nouveaux, Promotions, GPS, Dashcam)
   Un vrai menu : une barre blanche arrondie, centree sous le titre.
   Onglet actif rempli en teal, les autres en texte teal.
   Pas d'orange (reserve a l'achat), pas de majuscules, pas de soulignement.
   Telephone : la barre defile au doigt si elle depasse.
   ===================================================================== */
body .wd-products-tabs .wd-tabs-header{
  display:flex !important;flex-direction:column !important;align-items:center !important;
  justify-content:center !important;margin-bottom:28px !important;
}
body .wd-products-tabs .wd-tabs-header .wd-nav-wrapper,
body .wd-products-tabs .wd-tabs-header .wd-nav-tabs-wrapper{
  display:flex !important;justify-content:center !important;width:auto !important;
  max-width:100% !important;margin:0 auto !important;padding:0 !important;
}
body .wd-products-tabs ul.wd-nav-tabs{
  display:inline-flex !important;flex-wrap:nowrap !important;align-items:center !important;
  gap:4px !important;max-width:100% !important;margin:0 !important;padding:5px !important;
  background:#fff !important;border:1px solid #e6ebe8 !important;border-radius:999px !important;
  box-shadow:0 10px 26px -18px rgba(16,40,38,.45) !important;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
body .wd-products-tabs ul.wd-nav-tabs::-webkit-scrollbar{display:none}
body .wd-products-tabs ul.wd-nav-tabs > li{margin:0 !important;padding:0 !important;flex:0 0 auto !important}
body .wd-products-tabs ul.wd-nav-tabs > li > a{
  display:flex !important;align-items:center !important;gap:8px;
  padding:10px 22px !important;border-radius:999px !important;
  background:transparent !important;color:#215d60 !important;
  font:600 15px/1.2 Inter,Arial,sans-serif !important;
  text-transform:none !important;letter-spacing:0 !important;white-space:nowrap !important;
  text-decoration:none !important;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
body .wd-products-tabs ul.wd-nav-tabs > li > a .nav-link-text,
body .wd-products-tabs ul.wd-nav-tabs > li > a .tab-label{
  font:inherit !important;color:inherit !important;text-transform:none !important;
  letter-spacing:0 !important;padding:0 !important;
}
body .wd-products-tabs ul.wd-nav-tabs > li:not(.wd-active) > a:hover{
  background:rgba(33,93,96,.08) !important;color:#174749 !important;
}
body .wd-products-tabs ul.wd-nav-tabs > li.wd-active > a{
  background:#215d60 !important;color:#fff !important;
  box-shadow:0 6px 14px -8px rgba(23,71,73,.7) !important;
}
body .wd-products-tabs ul.wd-nav-tabs > li > a:focus-visible{outline:2px solid #215d60 !important;outline-offset:2px}
/* plus de trait orange sous l'onglet */
body .wd-products-tabs ul.wd-nav-tabs > li > a::before,
body .wd-products-tabs ul.wd-nav-tabs > li > a::after,
body .wd-products-tabs ul.wd-nav-tabs .nav-link-text::before,
body .wd-products-tabs ul.wd-nav-tabs .nav-link-text::after{display:none !important}
@media (max-width:767px){
  body .wd-products-tabs .wd-tabs-header{margin-bottom:20px !important}
  body .wd-products-tabs ul.wd-nav-tabs{gap:2px !important;padding:4px !important}
  body .wd-products-tabs ul.wd-nav-tabs > li > a{padding:9px 13px !important;font-size:13.5px !important}
}

/* =====================================================================
   167. FLECHES DES CARROUSELS : PLUS PETITES PARTOUT
   Rond de 36 px sur PC, 32 px sur tablette, 28 px sur telephone,
   chevron fin et proportionne. Couleurs inchangees (section 121).
   ===================================================================== */
body .wd-nav-arrows{
  --wd-arrow-size:36px;
  --wd-arrow-width:36px;
  --wd-arrow-height:36px;
  --wd-arrow-icon-size:13px;
}
body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner{
  width:36px !important;
  height:36px !important;
  min-width:0 !important;
  line-height:36px !important;
  font-size:13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner::after,
body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner::before{
  font-size:13px !important;
  line-height:1 !important;
  font-weight:700 !important;
  width:auto !important;
  height:auto !important;
}
body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner svg{
  width:13px !important;
  height:13px !important;
}
@media (max-width:1024px){
  body .wd-nav-arrows{--wd-arrow-size:32px;--wd-arrow-width:32px;--wd-arrow-height:32px;--wd-arrow-icon-size:12px}
  body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner{
    width:32px !important;height:32px !important;line-height:32px !important;font-size:12px !important;
  }
  body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner::after,
  body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner::before{font-size:12px !important}
  body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner svg{width:12px !important;height:12px !important}
}
@media (max-width:767px){
  body .wd-nav-arrows{--wd-arrow-size:28px;--wd-arrow-width:28px;--wd-arrow-height:28px;--wd-arrow-icon-size:11px}
  body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner{
    width:28px !important;height:28px !important;line-height:28px !important;font-size:11px !important;
  }
  body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner::after,
  body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner::before{font-size:11px !important}
  body .wd-nav-arrows .wd-btn-arrow > .wd-arrow-inner svg{width:11px !important;height:11px !important}
}

/* =====================================================================
   168. MENU LATERAL SUR TELEPHONE ET TABLETTE (bouton Menu / burger)
   Panneau creme aux coins arrondis, fond assombri et flou derriere.
   Recherche en pastille, onglets Menu / Categories en barre teal,
   lignes hautes de 52 px faciles a toucher, page en cours marquee,
   sous menus en retrait avec un rond pour deplier.
   Bloc "Besoin d'aide" en bas : ajoute par le Global Custom JS.
   Aucun orange : il reste reserve a l'achat.
   ===================================================================== */
@media (max-width:1024px){
  /* le panneau */
  body .mobile-nav.wd-side-hidden{
    width:min(88vw,380px) !important;max-width:none !important;
    background:#f9f7f2 !important;border-radius:0 22px 22px 0 !important;
    box-shadow:20px 0 50px -20px rgba(16,40,38,.45) !important;
    padding:0 0 calc(16px + env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;overscroll-behavior:contain;
    display:flex !important;flex-direction:column !important;
  }
  body .mobile-nav.wd-side-hidden.wd-right{border-radius:22px 0 0 22px !important}
  /* fond derriere le panneau */
  body .wd-close-side.wd-close-side-opened{
    background:rgba(16,40,38,.45) !important;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  }

  /* en tete du panneau (titre et croix si WoodMart les affiche) */
  body .mobile-nav .wd-heading{
    border:0 !important;padding:18px 18px 6px !important;background:transparent !important;
  }
  body .mobile-nav .wd-heading .title{
    font:700 18px/1.2 'Familjen Grotesk',Inter,Arial,sans-serif !important;color:#174749 !important;
    text-transform:none !important;letter-spacing:0 !important;
  }
  body .mobile-nav .close-side-widget a,
  body .mobile-nav .wd-action-btn.wd-cross-icon > a{
    width:38px !important;height:38px !important;border-radius:50% !important;background:#fff !important;
    border:1px solid #e6ebe8 !important;color:#215d60 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
  }

  /* recherche */
  body .mobile-nav .wd-search-form,
  body .mobile-nav .searchform{margin:0 !important}
  body .mobile-nav .wd-search-form{padding:16px 16px 8px !important;border:0 !important}
  body .mobile-nav .searchform input[type="text"],
  body .mobile-nav .searchform input[type="search"]{
    height:48px !important;border-radius:999px !important;background:#fff !important;
    border:1px solid #e6ebe8 !important;padding:0 52px 0 18px !important;
    font:500 15px/1 Inter,Arial,sans-serif !important;color:#174749 !important;
    box-shadow:0 6px 18px -14px rgba(16,40,38,.4) !important;
  }
  body .mobile-nav .searchform input:focus{border-color:#215d60 !important;outline:none !important}
  body .mobile-nav .searchform .searchsubmit{
    width:40px !important;height:40px !important;top:4px !important;right:4px !important;
    border-radius:50% !important;background:#215d60 !important;color:#fff !important;
  }
  body .mobile-nav .searchform .searchsubmit::before,
  body .mobile-nav .searchform .searchsubmit::after{color:#fff !important}

  /* onglets Menu / Categories */
  body .mobile-nav .wd-nav-mob-tab{
    display:flex !important;gap:4px !important;margin:10px 16px 6px !important;padding:4px !important;
    background:#fff !important;border:1px solid #e6ebe8 !important;border-radius:999px !important;
  }
  body .mobile-nav .wd-nav-mob-tab > li{flex:1 1 0 !important;margin:0 !important;border:0 !important}
  body .mobile-nav .wd-nav-mob-tab > li > a{
    display:flex !important;justify-content:center !important;align-items:center !important;
    height:40px !important;padding:0 10px !important;border-radius:999px !important;
    font:600 14px/1 Inter,Arial,sans-serif !important;color:#215d60 !important;
    text-transform:none !important;letter-spacing:0 !important;background:transparent !important;
  }
  body .mobile-nav .wd-nav-mob-tab > li.wd-active > a{background:#215d60 !important;color:#fff !important}
  body .mobile-nav .wd-nav-mob-tab .nav-link-text{color:inherit !important;font:inherit !important;text-transform:none !important}
  body .mobile-nav .wd-nav-mob-tab .nav-link-text::after,
  body .mobile-nav .wd-nav-mob-tab > li > a::after,
  body .mobile-nav .wd-nav-mob-tab > li > a::before{display:none !important}

  /* la liste : une carte blanche */
  body .mobile-nav ul.wd-nav-mobile{
    margin:10px 16px 0 !important;padding:6px !important;background:#fff !important;
    border:1px solid #e6ebe8 !important;border-radius:18px !important;
  }
  body .mobile-nav ul.wd-nav-mobile:not(.wd-active){display:none !important}
  body .mobile-nav ul.wd-nav-mobile li{border:0 !important;position:relative !important;margin:0 !important}
  body .mobile-nav ul.wd-nav-mobile > li + li{border-top:1px solid #f0f2f1 !important}
  body .mobile-nav ul.wd-nav-mobile li > a{
    display:flex !important;align-items:center !important;gap:12px !important;
    min-height:52px !important;padding:6px 52px 6px 12px !important;border-radius:12px !important;
    font:600 15.5px/1.3 Inter,Arial,sans-serif !important;color:#174749 !important;
    text-transform:none !important;letter-spacing:0 !important;background:transparent !important;
    -webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease;
  }
  body .mobile-nav ul.wd-nav-mobile li > a .nav-link-text{color:inherit !important;font:inherit !important}
  body .mobile-nav ul.wd-nav-mobile li > a:active,
  body .mobile-nav ul.wd-nav-mobile li > a.wd-tap-active{background:rgba(33,93,96,.08) !important;color:#215d60 !important}
  /* page en cours */
  body .mobile-nav ul.wd-nav-mobile li.current-menu-item > a,
  body .mobile-nav ul.wd-nav-mobile li.current-product_cat-ancestor > a,
  body .mobile-nav ul.wd-nav-mobile li.current-menu-ancestor > a{
    background:rgba(33,93,96,.09) !important;color:#215d60 !important;font-weight:700 !important;
  }
  body .mobile-nav ul.wd-nav-mobile li.current-menu-item > a::after{
    content:"" !important;position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:#215d60;
  }

  /* rond pour deplier un sous menu */
  body .mobile-nav ul.wd-nav-mobile .wd-nav-opener{
    position:absolute !important;top:8px !important;right:8px !important;
    width:36px !important;height:36px !important;border-radius:50% !important;
    background:#f4f8f7 !important;border:0 !important;color:#215d60 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    transition:transform .25s ease,background-color .2s ease;
  }
  body .mobile-nav ul.wd-nav-mobile .wd-nav-opener::after{font-size:12px !important;color:inherit !important}
  body .mobile-nav ul.wd-nav-mobile .wd-nav-opener.wd-active{background:#215d60 !important;color:#fff !important;transform:rotate(90deg)}

  /* sous menus */
  body .mobile-nav ul.wd-nav-mobile .wd-sub-menu,
  body .mobile-nav ul.wd-nav-mobile .sub-menu{
    margin:2px 0 8px 14px !important;padding:2px 0 2px 10px !important;
    border-left:2px solid #e6ebe8 !important;background:transparent !important;
  }
  body .mobile-nav ul.wd-nav-mobile .wd-sub-menu li > a,
  body .mobile-nav ul.wd-nav-mobile .sub-menu li > a{
    min-height:42px !important;font-weight:500 !important;font-size:14.5px !important;color:#3c4a4a !important;
  }
  body .mobile-nav ul.wd-nav-mobile .wd-sub-menu li + li,
  body .mobile-nav ul.wd-nav-mobile .sub-menu li + li{border-top:0 !important}

  /* icones des categories et des guides (sections 52 et 53) en teal */
  body .mobile-nav ul.wd-nav-mobile a::before{background-color:#215d60}

  /* bloc "Besoin d'aide" ajoute par le script */
  body .mobile-nav .fc-menu-aide{margin:16px 16px 0;padding:16px;background:#215d60;border-radius:18px;color:#fff}
  body .mobile-nav .fc-menu-aide p{margin:0 0 12px;font:700 16px/1.3 'Familjen Grotesk',Inter,Arial,sans-serif;color:#fff}
  body .mobile-nav .fc-menu-aide p span{display:block;font:400 13px/1.4 Inter,Arial,sans-serif;color:rgba(255,255,255,.8);margin-top:3px}
  body .mobile-nav .fc-menu-aide-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  body .mobile-nav .fc-menu-aide a{
    display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:999px;
    background:#fff;color:#174749 !important;font:600 14px/1 Inter,Arial,sans-serif !important;text-decoration:none !important;text-transform:none !important;letter-spacing:0 !important;
  }
  body .mobile-nav .fc-menu-aide a svg{width:18px;height:18px;flex:0 0 auto}
  body .mobile-nav .fc-menu-aide a:active{transform:scale(.97)}
}
/* tablette : le panneau ne prend jamais tout l'ecran */
@media (min-width:768px) and (max-width:1024px){
  body .mobile-nav.wd-side-hidden{width:380px !important}
}
@media (prefers-reduced-motion:reduce){
  body .mobile-nav ul.wd-nav-mobile .wd-nav-opener{transition:none}
}

/* =====================================================================
   169. BARRE DU BAS : PAGE EN COURS MARQUEE D'UN TRAIT, ICONES EGALES
   ===================================================================== */
@media (max-width:1024px){
  body .wd-toolbar .wd-toolbar-item > a{position:relative !important}
  body .wd-toolbar .wd-toolbar-item.fc-actif > a::before{
    content:"";position:absolute;top:-6px;left:50%;width:24px;height:3px;
    border-radius:0 0 3px 3px;background:#215d60;transform:translateX(-50%);
  }
  body .wd-toolbar .wd-tools-custom-icon img,
  body .wd-toolbar .wd-tools-icon img{
    width:24px !important;height:24px !important;object-fit:contain !important;
  }
}

/* =====================================================================
   170. BARRE DU BAS : 4 BOUTONS (Accueil, Boutique, Panier, Compte)
   Boutons au repos en gris teal, page en cours en teal (section 169).
   La barre se cache quand on descend et revient quand on remonte :
   la classe fc-cache est ajoutee par le Global Custom JS.
   ===================================================================== */
@media (max-width:1024px){
  body .wd-toolbar{
    transition:transform .28s ease !important;will-change:transform;
  }
  body .wd-toolbar.fc-cache{transform:translateY(calc(100% + 10px)) !important}
  body .wd-toolbar .wd-toolbar-item > a,
  body .wd-toolbar .wd-toolbar-item .wd-tools-icon,
  body .wd-toolbar .wd-toolbar-item .wd-tools-icon:before,
  body .wd-toolbar .wd-toolbar-item .wd-toolbar-label{color:#5d6e6c !important}
  body .wd-toolbar .wd-toolbar-item.fc-actif > a,
  body .wd-toolbar .wd-toolbar-item.fc-actif .wd-tools-icon,
  body .wd-toolbar .wd-toolbar-item.fc-actif .wd-tools-icon:before,
  body .wd-toolbar .wd-toolbar-item.fc-actif .wd-toolbar-label{color:#215d60 !important}
  /* la pastille du panier ne prend pas la couleur grise */
  body .wd-toolbar .wd-cart-number,
  body .wd-toolbar .wd-tools-count{color:#fff !important}
  /* le bouton Remonter suit la barre */
  body .wd-toolbar.fc-cache ~ .scrollToTop,
  body.fc-barre-cachee .scrollToTop{bottom:calc(20px + env(safe-area-inset-bottom)) !important}
}
@media (prefers-reduced-motion:reduce){
  body .wd-toolbar{transition:none !important}
}

/* =====================================================================
   171. BARRE DU BAS : 4 BOUTONS DE LA MEME LARGEUR, LIBELLES ENTIERS
   Les boutons natifs (Panier, Mon compte) et les liens personnalises
   n'ont pas les memes classes : on vise tous les enfants de la barre.
   ===================================================================== */
@media (max-width:1024px){
  body .wd-toolbar{display:flex !important;align-items:stretch !important;justify-content:space-between !important;gap:2px !important}
  body .wd-toolbar > div,
  body .wd-toolbar > a{
    flex:1 1 0 !important;min-width:0 !important;max-width:none !important;width:auto !important;margin:0 !important;
  }
  body .wd-toolbar > div > a{
    display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
    gap:4px !important;width:100% !important;min-height:52px !important;padding:4px 2px !important;
    border-radius:14px !important;position:relative !important;color:#5d6e6c !important;
  }
  body .wd-toolbar .wd-toolbar-label{
    max-width:none !important;width:auto !important;overflow:visible !important;text-overflow:clip !important;
    white-space:nowrap !important;font:600 11.5px/1.2 Inter,Arial,sans-serif !important;
    color:#5d6e6c !important;text-transform:none !important;letter-spacing:0 !important;margin:0 !important;
  }
  body .wd-toolbar > div .wd-tools-icon,
  body .wd-toolbar > div .wd-tools-icon:before{color:#5d6e6c !important;font-size:22px !important}
  body .wd-toolbar > div .wd-tools-icon img,
  body .wd-toolbar > div .wd-tools-icon svg{width:24px !important;height:24px !important;object-fit:contain !important}
  /* page en cours */
  body .wd-toolbar > div.fc-actif > a{background:rgba(33,93,96,.10) !important}
  body .wd-toolbar > div.fc-actif .wd-toolbar-label,
  body .wd-toolbar > div.fc-actif .wd-tools-icon,
  body .wd-toolbar > div.fc-actif .wd-tools-icon:before{color:#215d60 !important;font-weight:700 !important}
  body .wd-toolbar > div.fc-actif > a::before{
    content:"";position:absolute;top:-6px;left:50%;width:24px;height:3px;
    border-radius:0 0 3px 3px;background:#215d60;transform:translateX(-50%);
  }
  /* pastille du panier : orange, chiffre blanc */
  body .wd-toolbar .wd-cart-number,
  body .wd-toolbar .wd-tools-count{background:#de7735 !important;color:#fff !important;font-weight:700 !important}
}
@media (max-width:360px){
  body .wd-toolbar .wd-toolbar-label{font-size:10.5px !important}
}

/* =====================================================================
   172. BANDEAU DE TITRE DES PAGES, CHARTE "POLYNESIE HIGH TECH"
   Boutique, categories, pages legales, contact, compte...
   Fond teal profond vers abysse, courbes de niveau de Tahiti a droite,
   repere GPS au dessus du titre, titre en grand, fil d'Ariane technique.
   Remplace : l'image de fond de la section 4, le motif koru de la
   section 50, et le lisere orange de la vague (orange reserve a l'achat).
   ===================================================================== */
body .wd-page-title-bg.wd-fill{
  background:
    radial-gradient(55% 90% at 88% 20%,rgba(47,165,154,.30),transparent 70%),
    radial-gradient(40% 70% at 0% 100%,rgba(127,224,211,.10),transparent 70%),
    linear-gradient(160deg,#1b5a5c 0%,#123f41 55%,#0b2627 100%) !important;
}
/* courbes de niveau de Tahiti, a la place du motif koru */
body .wd-page-title::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMaxYMid slice'%3E%3Cg fill='none' stroke='%237fe0d3' stroke-width='1'%3E%3Cpath d='M1082 194L1091 203L1097 214L1100 224L1101 235L1099 245L1096 255L1092 264L1087 273L1080 282L1072 288L1062 293L1051 295L1038 295L1025 292L1011 287L999 279L987 271L979 264L972 261L967 260L962 258L958 258L954 258L950 258L945 259L941 260L936 261L931 262L926 263L921 263L916 263L910 262L904 262L898 262L891 261L883 261L876 259L869 256L862 252L856 248L850 243L843 238L837 233L830 226L824 219L819 211L816 203L814 194L813 185L813 176L813 167L812 157L813 148L815 139L819 130L824 122L831 115L838 108L845 102L852 97L859 91L867 86L875 83L884 81L893 80L903 81L911 82L920 84L928 85L935 87L943 89L950 93L956 97L962 102L967 107L971 112L976 117L980 121L984 125L987 129L990 134L992 138L994 143L996 147L999 151L1001 155L1004 158L1007 161L1011 164L1015 167L1022 170L1031 172L1044 175L1058 180L1071 186L1082 194Z' opacity='1.00'/%3E%3Cpath d='M1086 194L1094 204L1099 214L1101 224L1101 235L1100 245L1098 256L1095 266L1090 275L1083 283L1074 290L1063 294L1051 296L1039 296L1026 294L1014 291L1002 285L991 278L982 272L974 267L968 265L963 263L958 262L954 262L950 262L945 263L940 264L935 265L930 266L925 266L920 265L914 265L908 265L902 265L895 265L888 265L881 263L874 261L867 257L861 254L854 249L847 245L840 240L832 234L826 227L821 220L817 212L815 203L813 194L811 185L810 176L808 166L808 156L810 147L813 138L818 129L823 121L830 114L836 107L842 100L849 94L856 88L865 84L874 81L883 79L893 79L902 79L911 79L919 80L927 81L935 83L942 86L950 90L956 95L962 100L967 104L972 109L977 113L982 117L985 121L989 126L992 131L994 136L997 140L999 145L1002 148L1005 152L1008 155L1012 158L1016 161L1021 165L1027 168L1037 171L1050 174L1063 179L1076 186L1086 194Z' opacity='0.94'/%3E%3Cpath d='M1089 194L1096 204L1100 214L1102 224L1103 235L1103 246L1101 257L1098 267L1092 277L1085 284L1075 290L1064 294L1052 297L1041 298L1029 298L1017 295L1005 291L994 285L984 278L976 273L970 270L964 268L959 267L954 267L950 268L945 268L940 269L935 269L930 269L924 269L919 269L913 269L906 269L899 269L892 269L885 268L878 265L872 262L865 259L858 255L850 251L843 247L835 242L829 235L823 228L819 220L816 212L813 203L810 194L807 185L805 175L804 165L805 155L808 146L812 137L817 129L822 120L827 112L833 104L839 97L846 91L854 85L863 82L873 80L882 78L892 77L900 76L909 75L918 75L926 76L934 79L942 83L950 87L956 92L962 96L968 100L974 104L979 108L983 113L987 118L990 123L993 128L996 133L999 137L1003 141L1006 145L1009 148L1013 152L1016 156L1020 159L1026 163L1033 166L1044 169L1056 173L1069 178L1080 186L1089 194Z' opacity='0.88'/%3E%3Cpath d='M1091 194L1097 204L1101 214L1104 225L1106 236L1107 247L1105 259L1101 269L1094 278L1085 285L1075 291L1065 295L1054 299L1043 301L1032 302L1020 300L1008 296L997 290L987 284L978 278L971 275L965 274L960 273L955 273L950 273L944 273L939 273L934 273L929 272L923 273L917 273L910 274L904 274L897 273L890 272L883 270L876 267L869 264L862 261L854 258L846 254L838 249L832 243L826 236L821 229L817 221L813 212L809 203L805 194L802 185L801 175L801 165L803 155L806 146L810 136L814 127L818 118L823 110L829 101L835 94L844 88L853 84L862 80L872 78L881 75L890 73L899 71L907 70L917 71L925 73L934 77L942 80L950 84L956 88L963 91L969 95L975 99L980 104L985 109L989 115L992 120L996 125L999 129L1003 133L1007 137L1010 141L1014 145L1017 149L1021 153L1025 157L1032 160L1040 163L1051 167L1063 172L1074 178L1084 185L1091 194Z' opacity='0.81'/%3E%3Cpath d='M1093 194L1099 204L1104 215L1108 226L1110 237L1110 249L1107 260L1102 269L1094 278L1086 285L1077 292L1068 298L1058 302L1047 305L1035 306L1023 304L1010 300L999 294L989 289L980 285L973 282L967 281L961 280L955 279L950 278L944 278L939 277L933 277L927 277L921 278L915 278L908 279L901 278L894 277L888 275L881 272L874 270L866 267L858 265L850 261L842 256L835 251L829 244L824 237L819 229L814 221L809 213L804 204L800 194L798 184L797 174L799 164L801 154L804 145L807 135L810 125L814 116L819 107L825 99L833 92L842 87L851 82L861 78L869 74L878 71L887 68L897 66L906 66L916 68L925 71L934 74L942 77L950 80L957 83L964 86L970 90L976 95L981 101L986 106L990 112L994 116L999 121L1003 125L1007 129L1011 133L1014 138L1017 142L1021 146L1025 150L1031 154L1038 157L1048 161L1058 165L1069 170L1078 177L1087 185L1093 194Z' opacity='0.75'/%3E%3Cpath d='M1097 194L1104 204L1109 215L1113 227L1114 238L1113 250L1108 260L1103 270L1096 279L1088 287L1080 295L1072 301L1061 306L1050 308L1037 309L1025 307L1012 303L1001 299L991 295L983 292L975 290L968 288L962 286L955 285L950 283L944 282L938 282L932 282L926 283L919 284L912 284L906 283L899 282L892 280L885 278L878 276L870 274L861 271L853 268L845 264L838 259L832 252L826 245L820 238L814 230L808 222L803 214L798 204L795 194L794 184L795 174L796 164L798 154L800 143L802 133L805 123L809 113L815 105L823 97L832 91L840 85L849 80L858 74L866 70L875 66L885 63L895 63L905 63L915 65L924 67L933 69L941 71L950 74L957 77L964 81L971 86L977 91L983 97L988 102L993 107L997 111L1002 115L1007 120L1011 125L1014 129L1018 134L1021 139L1026 143L1031 147L1038 151L1046 154L1055 158L1064 163L1073 170L1082 177L1090 185L1097 194Z' opacity='0.69'/%3E%3Cpath d='M1103 194L1109 205L1114 216L1117 227L1117 239L1114 250L1110 261L1105 271L1099 281L1093 290L1085 298L1075 304L1064 309L1052 311L1039 311L1027 310L1015 308L1004 305L995 303L985 300L977 297L970 295L962 292L956 290L950 289L943 289L937 289L931 289L924 290L917 290L910 289L904 287L897 286L890 284L882 282L874 281L865 279L857 276L849 272L841 266L835 260L829 254L822 247L815 240L808 232L802 224L797 214L794 204L792 194L792 184L792 173L792 163L793 152L794 141L796 131L800 120L806 111L813 103L821 95L829 89L837 82L845 75L854 69L863 64L873 61L883 60L894 60L904 60L914 61L923 62L932 63L941 65L950 67L958 71L965 76L972 82L978 87L984 92L990 96L996 101L1001 105L1006 110L1010 115L1014 120L1018 126L1022 131L1026 135L1032 139L1038 143L1045 147L1053 151L1061 156L1069 162L1078 169L1086 176L1094 185L1103 194Z' opacity='0.62'/%3E%3Cpath d='M1109 194L1115 205L1119 216L1119 228L1118 239L1116 251L1113 262L1109 273L1104 283L1097 293L1089 301L1078 307L1066 311L1054 313L1042 314L1030 314L1019 314L1008 313L998 311L988 308L979 304L971 301L963 299L956 297L950 296L943 296L936 297L929 297L922 296L915 295L908 294L901 292L894 291L886 289L877 288L869 286L860 283L852 279L845 274L838 269L831 263L824 256L816 250L808 242L802 234L796 225L792 215L790 205L789 194L788 184L787 173L786 162L786 150L787 139L791 128L796 119L803 109L810 101L817 93L825 85L832 77L841 70L850 64L860 60L871 58L882 56L892 56L902 55L912 55L922 55L931 56L941 58L950 62L958 66L966 71L973 76L980 81L986 85L993 89L999 94L1004 99L1009 105L1014 111L1018 116L1022 121L1027 126L1033 130L1039 134L1046 139L1052 143L1059 149L1067 154L1075 161L1083 168L1092 175L1101 184L1109 194Z' opacity='0.56'/%3E%3Cpath d='M1115 194L1120 205L1122 217L1122 229L1122 240L1120 252L1118 264L1115 276L1109 286L1101 296L1092 303L1080 309L1069 313L1057 317L1045 319L1034 321L1023 321L1012 320L1001 318L990 315L981 311L972 308L964 307L957 306L950 306L942 306L935 305L928 304L920 303L913 301L906 300L898 298L890 298L881 296L872 295L864 292L856 288L848 283L841 278L833 272L825 266L817 260L808 253L801 245L795 236L791 226L788 215L785 205L783 194L781 183L779 172L778 160L779 148L782 137L787 127L793 117L799 107L805 98L812 89L819 80L827 72L836 65L846 60L857 56L868 54L879 52L890 50L900 48L910 47L920 47L930 49L940 52L950 56L958 61L966 65L974 69L982 73L989 77L996 82L1002 87L1008 93L1013 100L1018 105L1023 111L1028 115L1034 120L1040 124L1047 129L1053 135L1059 140L1066 146L1073 152L1082 159L1091 166L1100 174L1109 184L1115 194Z' opacity='0.50'/%3E%3Cpath d='M1121 194L1124 206L1126 217L1127 229L1128 242L1127 255L1125 267L1121 279L1114 289L1105 298L1094 305L1083 312L1072 317L1062 322L1051 326L1039 328L1027 329L1015 327L1004 325L993 322L983 319L974 318L966 317L958 316L950 316L942 315L934 313L926 312L919 310L911 308L903 308L894 307L885 306L876 304L867 301L859 297L851 292L843 287L835 282L826 277L817 271L808 264L801 256L794 247L789 237L786 227L782 216L779 205L775 194L772 183L770 171L770 159L773 147L777 136L782 125L787 114L793 104L798 93L805 83L812 74L822 66L832 60L843 56L854 52L865 48L876 45L886 42L897 40L908 39L919 40L930 42L940 46L950 50L959 53L968 57L976 60L984 64L992 69L999 74L1005 81L1011 87L1017 93L1023 99L1029 103L1035 108L1042 113L1048 119L1054 124L1060 131L1066 137L1073 143L1082 149L1091 156L1100 164L1109 173L1116 183L1121 194Z' opacity='0.44'/%3E%3Cpath d='M1126 194L1129 206L1132 218L1135 231L1136 244L1135 257L1132 270L1126 281L1118 291L1108 300L1099 309L1089 316L1079 323L1068 329L1056 333L1044 335L1031 336L1019 334L1007 332L996 331L986 330L976 329L967 329L958 328L950 326L941 324L933 322L924 320L916 319L907 319L898 318L889 317L880 315L871 312L862 308L854 303L845 298L836 293L827 288L817 283L808 276L800 268L793 259L788 249L783 239L778 228L773 217L768 206L764 194L762 182L762 169L764 157L767 145L771 134L775 122L779 110L784 99L790 87L797 77L806 69L817 61L828 55L839 50L850 45L860 40L871 35L882 32L894 30L906 31L917 33L929 35L939 38L950 41L959 43L969 46L978 49L987 54L995 60L1002 67L1009 73L1016 79L1023 85L1030 90L1037 95L1044 100L1050 106L1056 113L1062 119L1068 126L1075 132L1083 139L1093 146L1102 153L1110 162L1117 172L1122 183L1126 194Z' opacity='0.38'/%3E%3Cpath d='M1134 194L1139 207L1142 220L1145 233L1145 247L1143 260L1138 272L1131 284L1123 294L1114 304L1106 314L1097 323L1086 331L1075 337L1062 341L1049 343L1035 343L1023 343L1011 343L1000 343L989 343L979 343L969 342L959 340L950 338L940 335L931 333L922 332L913 332L903 331L893 330L884 328L874 325L865 320L856 316L847 311L837 307L827 302L816 296L807 290L798 281L791 272L785 262L779 252L773 241L767 230L761 219L756 207L753 194L752 181L753 168L756 156L759 143L762 130L765 118L768 105L774 93L781 81L790 72L800 63L811 56L822 49L833 42L843 35L854 29L866 24L878 22L891 21L903 22L916 24L927 25L939 26L950 28L960 30L971 33L981 38L990 44L998 51L1006 57L1014 63L1022 68L1030 73L1038 79L1045 85L1052 92L1058 99L1064 106L1071 113L1079 120L1087 126L1096 134L1105 141L1113 150L1120 160L1125 171L1130 182L1134 194Z' opacity='0.31'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size:auto 130% !important;
  background-position:right -60px center !important;
  background-repeat:no-repeat !important;
  opacity:.32 !important;
}
/* la vague du bas : creme seul, avec un fin trait lagon a la place de l'orange */
body .wd-page-title::before{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 130' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1140,120 960,0 720,60 C480,120 300,0 0,60 Z' fill='%23F9F7F2'/%3E%3Cpath d='M0,63 C300,3 480,123 720,63 C960,3 1140,123 1440,63' stroke='%237FE0D3' stroke-opacity='.55' stroke-width='2'/%3E%3C/svg%3E") !important;
}
@media (max-width:767px){
  body .wd-page-title::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 140' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1140,120 960,0 720,60 C480,120 300,0 0,60 Z' fill='%23F9F7F2'/%3E%3Cpath d='M0,64 C300,4 480,124 720,64 C960,4 1140,124 1440,64' stroke='%237FE0D3' stroke-opacity='.6' stroke-width='3'/%3E%3C/svg%3E") !important;
  }
}
body .wd-page-title{padding-top:clamp(34px,4vw,56px) !important}

/* le titre : grand, en Familjen Grotesk, sans majuscules forcees */
body .wd-page-title .entry-title,
body .wd-page-title h1.title,
body .wd-page-title h1{
  font:700 clamp(28px,3.6vw,46px)/1.08 'Familjen Grotesk',Inter,Arial,sans-serif !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
  color:#fff !important;
  margin:0 !important;
}
/* le repere GPS au dessus du titre */
body .wd-page-title .entry-title::before,
body .wd-page-title h1.title::before{
  content:"17\00B0 38\2032 S 149\00B0 36\2032 W \00B7  FENUA CLICK";
  display:block;
  margin:0 0 12px;
  padding-left:18px;
  font:500 11.5px/1.4 'JetBrains Mono',ui-monospace,Menlo,monospace;
  letter-spacing:.06em;
  color:#bff1ea;
  white-space:pre;
  background:radial-gradient(circle at 4px 50%,#7fe0d3 0 3.5px,rgba(127,224,211,.28) 4px 7px,transparent 7.5px) no-repeat;
}
/* bouton retour : rond en verre */
body .wd-page-title .wd-back-btn > a{
  width:42px !important;height:42px !important;border-radius:50% !important;
  background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;display:flex !important;align-items:center !important;justify-content:center !important;
  transition:background-color .2s ease;
}
body .wd-page-title .wd-back-btn > a:hover{background:rgba(255,255,255,.16) !important}
body .wd-page-title .wd-back-btn{align-self:flex-end !important;margin-bottom:4px !important}
/* fil d'Ariane technique */
body .wd-page-title .wd-breadcrumbs,
body .wd-page-title .breadcrumbs,
body .wd-page-title .woocommerce-breadcrumb{
  font:500 11px/1.5 'JetBrains Mono',ui-monospace,Menlo,monospace !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;
  color:rgba(191,241,234,.75) !important;margin-top:12px !important;
}
body .wd-page-title .wd-breadcrumbs a,
body .wd-page-title .breadcrumbs a,
body .wd-page-title .woocommerce-breadcrumb a{color:#bff1ea !important;text-decoration:none !important}
body .wd-page-title .wd-breadcrumbs a:hover,
body .wd-page-title .breadcrumbs a:hover{color:#fff !important}
@media (max-width:767px){
  body .wd-page-title .entry-title::before,
  body .wd-page-title h1.title::before{font-size:10px;margin-bottom:8px}
  body .wd-page-title::after{background-position:right -140px center !important;opacity:.22 !important}
}
/* panier et commande : pas de repere GPS, le fil d'etapes prend la place */
body.woocommerce-cart .wd-page-title .entry-title::before,
body.woocommerce-checkout .wd-page-title .entry-title::before,
body.woocommerce-cart .wd-page-title h1.title::before,
body.woocommerce-checkout .wd-page-title h1.title::before{content:none}

/* =====================================================================
   173. MENU LATERAL SUR TELEPHONE, CHARTE "POLYNESIE HIGH TECH"
   Complete la section 168. Panneau teal profond avec les courbes de
   niveau de Tahiti, repere GPS en tete, recherche en pastille blanche,
   onglets en verre, liste en carte claire, bloc d'aide en verre.
   ===================================================================== */
@media (max-width:1024px){
  body .mobile-nav.wd-side-hidden{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMaxYMid slice'%3E%3Cg fill='none' stroke='%237fe0d3' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M1082 194L1091 203L1097 214L1100 224L1101 235L1099 245L1096 255L1092 264L1087 273L1080 282L1072 288L1062 293L1051 295L1038 295L1025 292L1011 287L999 279L987 271L979 264L972 261L967 260L962 258L958 258L954 258L950 258L945 259L941 260L936 261L931 262L926 263L921 263L916 263L910 262L904 262L898 262L891 261L883 261L876 259L869 256L862 252L856 248L850 243L843 238L837 233L830 226L824 219L819 211L816 203L814 194L813 185L813 176L813 167L812 157L813 148L815 139L819 130L824 122L831 115L838 108L845 102L852 97L859 91L867 86L875 83L884 81L893 80L903 81L911 82L920 84L928 85L935 87L943 89L950 93L956 97L962 102L967 107L971 112L976 117L980 121L984 125L987 129L990 134L992 138L994 143L996 147L999 151L1001 155L1004 158L1007 161L1011 164L1015 167L1022 170L1031 172L1044 175L1058 180L1071 186L1082 194Z' opacity='1.00'/%3E%3Cpath d='M1086 194L1094 204L1099 214L1101 224L1101 235L1100 245L1098 256L1095 266L1090 275L1083 283L1074 290L1063 294L1051 296L1039 296L1026 294L1014 291L1002 285L991 278L982 272L974 267L968 265L963 263L958 262L954 262L950 262L945 263L940 264L935 265L930 266L925 266L920 265L914 265L908 265L902 265L895 265L888 265L881 263L874 261L867 257L861 254L854 249L847 245L840 240L832 234L826 227L821 220L817 212L815 203L813 194L811 185L810 176L808 166L808 156L810 147L813 138L818 129L823 121L830 114L836 107L842 100L849 94L856 88L865 84L874 81L883 79L893 79L902 79L911 79L919 80L927 81L935 83L942 86L950 90L956 95L962 100L967 104L972 109L977 113L982 117L985 121L989 126L992 131L994 136L997 140L999 145L1002 148L1005 152L1008 155L1012 158L1016 161L1021 165L1027 168L1037 171L1050 174L1063 179L1076 186L1086 194Z' opacity='0.94'/%3E%3Cpath d='M1089 194L1096 204L1100 214L1102 224L1103 235L1103 246L1101 257L1098 267L1092 277L1085 284L1075 290L1064 294L1052 297L1041 298L1029 298L1017 295L1005 291L994 285L984 278L976 273L970 270L964 268L959 267L954 267L950 268L945 268L940 269L935 269L930 269L924 269L919 269L913 269L906 269L899 269L892 269L885 268L878 265L872 262L865 259L858 255L850 251L843 247L835 242L829 235L823 228L819 220L816 212L813 203L810 194L807 185L805 175L804 165L805 155L808 146L812 137L817 129L822 120L827 112L833 104L839 97L846 91L854 85L863 82L873 80L882 78L892 77L900 76L909 75L918 75L926 76L934 79L942 83L950 87L956 92L962 96L968 100L974 104L979 108L983 113L987 118L990 123L993 128L996 133L999 137L1003 141L1006 145L1009 148L1013 152L1016 156L1020 159L1026 163L1033 166L1044 169L1056 173L1069 178L1080 186L1089 194Z' opacity='0.88'/%3E%3Cpath d='M1091 194L1097 204L1101 214L1104 225L1106 236L1107 247L1105 259L1101 269L1094 278L1085 285L1075 291L1065 295L1054 299L1043 301L1032 302L1020 300L1008 296L997 290L987 284L978 278L971 275L965 274L960 273L955 273L950 273L944 273L939 273L934 273L929 272L923 273L917 273L910 274L904 274L897 273L890 272L883 270L876 267L869 264L862 261L854 258L846 254L838 249L832 243L826 236L821 229L817 221L813 212L809 203L805 194L802 185L801 175L801 165L803 155L806 146L810 136L814 127L818 118L823 110L829 101L835 94L844 88L853 84L862 80L872 78L881 75L890 73L899 71L907 70L917 71L925 73L934 77L942 80L950 84L956 88L963 91L969 95L975 99L980 104L985 109L989 115L992 120L996 125L999 129L1003 133L1007 137L1010 141L1014 145L1017 149L1021 153L1025 157L1032 160L1040 163L1051 167L1063 172L1074 178L1084 185L1091 194Z' opacity='0.81'/%3E%3Cpath d='M1093 194L1099 204L1104 215L1108 226L1110 237L1110 249L1107 260L1102 269L1094 278L1086 285L1077 292L1068 298L1058 302L1047 305L1035 306L1023 304L1010 300L999 294L989 289L980 285L973 282L967 281L961 280L955 279L950 278L944 278L939 277L933 277L927 277L921 278L915 278L908 279L901 278L894 277L888 275L881 272L874 270L866 267L858 265L850 261L842 256L835 251L829 244L824 237L819 229L814 221L809 213L804 204L800 194L798 184L797 174L799 164L801 154L804 145L807 135L810 125L814 116L819 107L825 99L833 92L842 87L851 82L861 78L869 74L878 71L887 68L897 66L906 66L916 68L925 71L934 74L942 77L950 80L957 83L964 86L970 90L976 95L981 101L986 106L990 112L994 116L999 121L1003 125L1007 129L1011 133L1014 138L1017 142L1021 146L1025 150L1031 154L1038 157L1048 161L1058 165L1069 170L1078 177L1087 185L1093 194Z' opacity='0.75'/%3E%3Cpath d='M1097 194L1104 204L1109 215L1113 227L1114 238L1113 250L1108 260L1103 270L1096 279L1088 287L1080 295L1072 301L1061 306L1050 308L1037 309L1025 307L1012 303L1001 299L991 295L983 292L975 290L968 288L962 286L955 285L950 283L944 282L938 282L932 282L926 283L919 284L912 284L906 283L899 282L892 280L885 278L878 276L870 274L861 271L853 268L845 264L838 259L832 252L826 245L820 238L814 230L808 222L803 214L798 204L795 194L794 184L795 174L796 164L798 154L800 143L802 133L805 123L809 113L815 105L823 97L832 91L840 85L849 80L858 74L866 70L875 66L885 63L895 63L905 63L915 65L924 67L933 69L941 71L950 74L957 77L964 81L971 86L977 91L983 97L988 102L993 107L997 111L1002 115L1007 120L1011 125L1014 129L1018 134L1021 139L1026 143L1031 147L1038 151L1046 154L1055 158L1064 163L1073 170L1082 177L1090 185L1097 194Z' opacity='0.69'/%3E%3Cpath d='M1103 194L1109 205L1114 216L1117 227L1117 239L1114 250L1110 261L1105 271L1099 281L1093 290L1085 298L1075 304L1064 309L1052 311L1039 311L1027 310L1015 308L1004 305L995 303L985 300L977 297L970 295L962 292L956 290L950 289L943 289L937 289L931 289L924 290L917 290L910 289L904 287L897 286L890 284L882 282L874 281L865 279L857 276L849 272L841 266L835 260L829 254L822 247L815 240L808 232L802 224L797 214L794 204L792 194L792 184L792 173L792 163L793 152L794 141L796 131L800 120L806 111L813 103L821 95L829 89L837 82L845 75L854 69L863 64L873 61L883 60L894 60L904 60L914 61L923 62L932 63L941 65L950 67L958 71L965 76L972 82L978 87L984 92L990 96L996 101L1001 105L1006 110L1010 115L1014 120L1018 126L1022 131L1026 135L1032 139L1038 143L1045 147L1053 151L1061 156L1069 162L1078 169L1086 176L1094 185L1103 194Z' opacity='0.62'/%3E%3Cpath d='M1109 194L1115 205L1119 216L1119 228L1118 239L1116 251L1113 262L1109 273L1104 283L1097 293L1089 301L1078 307L1066 311L1054 313L1042 314L1030 314L1019 314L1008 313L998 311L988 308L979 304L971 301L963 299L956 297L950 296L943 296L936 297L929 297L922 296L915 295L908 294L901 292L894 291L886 289L877 288L869 286L860 283L852 279L845 274L838 269L831 263L824 256L816 250L808 242L802 234L796 225L792 215L790 205L789 194L788 184L787 173L786 162L786 150L787 139L791 128L796 119L803 109L810 101L817 93L825 85L832 77L841 70L850 64L860 60L871 58L882 56L892 56L902 55L912 55L922 55L931 56L941 58L950 62L958 66L966 71L973 76L980 81L986 85L993 89L999 94L1004 99L1009 105L1014 111L1018 116L1022 121L1027 126L1033 130L1039 134L1046 139L1052 143L1059 149L1067 154L1075 161L1083 168L1092 175L1101 184L1109 194Z' opacity='0.56'/%3E%3Cpath d='M1115 194L1120 205L1122 217L1122 229L1122 240L1120 252L1118 264L1115 276L1109 286L1101 296L1092 303L1080 309L1069 313L1057 317L1045 319L1034 321L1023 321L1012 320L1001 318L990 315L981 311L972 308L964 307L957 306L950 306L942 306L935 305L928 304L920 303L913 301L906 300L898 298L890 298L881 296L872 295L864 292L856 288L848 283L841 278L833 272L825 266L817 260L808 253L801 245L795 236L791 226L788 215L785 205L783 194L781 183L779 172L778 160L779 148L782 137L787 127L793 117L799 107L805 98L812 89L819 80L827 72L836 65L846 60L857 56L868 54L879 52L890 50L900 48L910 47L920 47L930 49L940 52L950 56L958 61L966 65L974 69L982 73L989 77L996 82L1002 87L1008 93L1013 100L1018 105L1023 111L1028 115L1034 120L1040 124L1047 129L1053 135L1059 140L1066 146L1073 152L1082 159L1091 166L1100 174L1109 184L1115 194Z' opacity='0.50'/%3E%3Cpath d='M1121 194L1124 206L1126 217L1127 229L1128 242L1127 255L1125 267L1121 279L1114 289L1105 298L1094 305L1083 312L1072 317L1062 322L1051 326L1039 328L1027 329L1015 327L1004 325L993 322L983 319L974 318L966 317L958 316L950 316L942 315L934 313L926 312L919 310L911 308L903 308L894 307L885 306L876 304L867 301L859 297L851 292L843 287L835 282L826 277L817 271L808 264L801 256L794 247L789 237L786 227L782 216L779 205L775 194L772 183L770 171L770 159L773 147L777 136L782 125L787 114L793 104L798 93L805 83L812 74L822 66L832 60L843 56L854 52L865 48L876 45L886 42L897 40L908 39L919 40L930 42L940 46L950 50L959 53L968 57L976 60L984 64L992 69L999 74L1005 81L1011 87L1017 93L1023 99L1029 103L1035 108L1042 113L1048 119L1054 124L1060 131L1066 137L1073 143L1082 149L1091 156L1100 164L1109 173L1116 183L1121 194Z' opacity='0.44'/%3E%3Cpath d='M1126 194L1129 206L1132 218L1135 231L1136 244L1135 257L1132 270L1126 281L1118 291L1108 300L1099 309L1089 316L1079 323L1068 329L1056 333L1044 335L1031 336L1019 334L1007 332L996 331L986 330L976 329L967 329L958 328L950 326L941 324L933 322L924 320L916 319L907 319L898 318L889 317L880 315L871 312L862 308L854 303L845 298L836 293L827 288L817 283L808 276L800 268L793 259L788 249L783 239L778 228L773 217L768 206L764 194L762 182L762 169L764 157L767 145L771 134L775 122L779 110L784 99L790 87L797 77L806 69L817 61L828 55L839 50L850 45L860 40L871 35L882 32L894 30L906 31L917 33L929 35L939 38L950 41L959 43L969 46L978 49L987 54L995 60L1002 67L1009 73L1016 79L1023 85L1030 90L1037 95L1044 100L1050 106L1056 113L1062 119L1068 126L1075 132L1083 139L1093 146L1102 153L1110 162L1117 172L1122 183L1126 194Z' opacity='0.38'/%3E%3Cpath d='M1134 194L1139 207L1142 220L1145 233L1145 247L1143 260L1138 272L1131 284L1123 294L1114 304L1106 314L1097 323L1086 331L1075 337L1062 341L1049 343L1035 343L1023 343L1011 343L1000 343L989 343L979 343L969 342L959 340L950 338L940 335L931 333L922 332L913 332L903 331L893 330L884 328L874 325L865 320L856 316L847 311L837 307L827 302L816 296L807 290L798 281L791 272L785 262L779 252L773 241L767 230L761 219L756 207L753 194L752 181L753 168L756 156L759 143L762 130L765 118L768 105L774 93L781 81L790 72L800 63L811 56L822 49L833 42L843 35L854 29L866 24L878 22L891 21L903 22L916 24L927 25L939 26L950 28L960 30L971 33L981 38L990 44L998 51L1006 57L1014 63L1022 68L1030 73L1038 79L1045 85L1052 92L1058 99L1064 106L1071 113L1079 120L1087 126L1096 134L1105 141L1113 150L1120 160L1125 171L1130 182L1134 194Z' opacity='0.31'/%3E%3C/g%3E%3C/svg%3E") right -230px top 70px / auto 300px no-repeat,
      radial-gradient(70% 40% at 90% 0%,rgba(47,165,154,.30),transparent 70%),
      linear-gradient(180deg,#1b5a5c 0%,#123f41 45%,#0b2627 100%) !important;
    color:#fff !important;
  }
  /* repere GPS en tete du panneau */
  body .mobile-nav.wd-side-hidden::before{
    content:"17\00B0 38\2032 S 149\00B0 36\2032 W \00B7  MENU";
    display:block;
    order:-1;
    margin:20px 18px 0;
    padding-left:18px;
    font:500 11px/1.4 'JetBrains Mono',ui-monospace,Menlo,monospace;
    letter-spacing:.06em;
    color:#bff1ea;
    white-space:pre;
    background:radial-gradient(circle at 4px 50%,#7fe0d3 0 3.5px,rgba(127,224,211,.28) 4px 7px,transparent 7.5px) no-repeat;
  }
  body .mobile-nav .wd-heading{padding:8px 18px 0 !important}
  body .mobile-nav .wd-heading .title{color:#fff !important;font-size:20px !important}
  body .mobile-nav .close-side-widget a,
  body .mobile-nav .wd-action-btn.wd-cross-icon > a{
    background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.2) !important;color:#fff !important;
  }
  /* recherche */
  body .mobile-nav .searchform input[type="text"],
  body .mobile-nav .searchform input[type="search"]{
    border-color:transparent !important;box-shadow:0 10px 24px -14px rgba(0,0,0,.6) !important;
  }
  body .mobile-nav .searchform .searchsubmit{background:#0b2627 !important}
  /* onglets en verre */
  body .mobile-nav .wd-nav-mob-tab{
    background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.16) !important;
  }
  body .mobile-nav .wd-nav-mob-tab > li > a{color:rgba(255,255,255,.78) !important}
  body .mobile-nav .wd-nav-mob-tab > li.wd-active > a{background:#fff !important;color:#174749 !important}
  /* la liste reste une carte claire, posee sur le fond sombre */
  body .mobile-nav ul.wd-nav-mobile{
    background:#fff !important;border:0 !important;
    box-shadow:0 18px 40px -24px rgba(0,0,0,.7) !important;
  }
  /* bloc d'aide en verre, boutons blanc et contour */
  body .mobile-nav .fc-menu-aide{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
  body .mobile-nav .fc-menu-aide p span{color:rgba(191,241,234,.8)}
  body .mobile-nav .fc-menu-aide a + a{
    background:transparent;color:#fff !important;border:1px solid rgba(255,255,255,.45);
  }
  /* fond derriere le panneau, un peu plus profond */
  body .wd-close-side.wd-close-side-opened{background:rgba(7,28,29,.55) !important}
}

/* =====================================================================
   175. PIED DE PAGE, CHARTE "POLYNESIE HIGH TECH"
   Fond teal profond vers abysse, courbes de niveau de Tahiti a la
   place du motif koru, repere GPS au dessus des colonnes, titres de
   colonnes en style technique, puces lagon (plus d'orange ni de tirets),
   barre du bas en verre sombre.
   ===================================================================== */
body footer.wd-footer{
  background-color:#0f3537 !important;
  background-image:
    radial-gradient(50% 60% at 85% 30%,rgba(47,165,154,.28),transparent 70%),
    radial-gradient(40% 50% at 0% 100%,rgba(127,224,211,.08),transparent 70%),
    linear-gradient(180deg,#174749 0%,#0f3537 45%,#0b2627 100%) !important;
}
/* courbes de niveau de Tahiti a la place du koru */
body footer.wd-footer::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMaxYMid slice'%3E%3Cg fill='none' stroke='%237fe0d3' stroke-width='1'%3E%3Cpath d='M1082 194L1091 203L1097 214L1100 224L1101 235L1099 245L1096 255L1092 264L1087 273L1080 282L1072 288L1062 293L1051 295L1038 295L1025 292L1011 287L999 279L987 271L979 264L972 261L967 260L962 258L958 258L954 258L950 258L945 259L941 260L936 261L931 262L926 263L921 263L916 263L910 262L904 262L898 262L891 261L883 261L876 259L869 256L862 252L856 248L850 243L843 238L837 233L830 226L824 219L819 211L816 203L814 194L813 185L813 176L813 167L812 157L813 148L815 139L819 130L824 122L831 115L838 108L845 102L852 97L859 91L867 86L875 83L884 81L893 80L903 81L911 82L920 84L928 85L935 87L943 89L950 93L956 97L962 102L967 107L971 112L976 117L980 121L984 125L987 129L990 134L992 138L994 143L996 147L999 151L1001 155L1004 158L1007 161L1011 164L1015 167L1022 170L1031 172L1044 175L1058 180L1071 186L1082 194Z' opacity='1.00'/%3E%3Cpath d='M1086 194L1094 204L1099 214L1101 224L1101 235L1100 245L1098 256L1095 266L1090 275L1083 283L1074 290L1063 294L1051 296L1039 296L1026 294L1014 291L1002 285L991 278L982 272L974 267L968 265L963 263L958 262L954 262L950 262L945 263L940 264L935 265L930 266L925 266L920 265L914 265L908 265L902 265L895 265L888 265L881 263L874 261L867 257L861 254L854 249L847 245L840 240L832 234L826 227L821 220L817 212L815 203L813 194L811 185L810 176L808 166L808 156L810 147L813 138L818 129L823 121L830 114L836 107L842 100L849 94L856 88L865 84L874 81L883 79L893 79L902 79L911 79L919 80L927 81L935 83L942 86L950 90L956 95L962 100L967 104L972 109L977 113L982 117L985 121L989 126L992 131L994 136L997 140L999 145L1002 148L1005 152L1008 155L1012 158L1016 161L1021 165L1027 168L1037 171L1050 174L1063 179L1076 186L1086 194Z' opacity='0.94'/%3E%3Cpath d='M1089 194L1096 204L1100 214L1102 224L1103 235L1103 246L1101 257L1098 267L1092 277L1085 284L1075 290L1064 294L1052 297L1041 298L1029 298L1017 295L1005 291L994 285L984 278L976 273L970 270L964 268L959 267L954 267L950 268L945 268L940 269L935 269L930 269L924 269L919 269L913 269L906 269L899 269L892 269L885 268L878 265L872 262L865 259L858 255L850 251L843 247L835 242L829 235L823 228L819 220L816 212L813 203L810 194L807 185L805 175L804 165L805 155L808 146L812 137L817 129L822 120L827 112L833 104L839 97L846 91L854 85L863 82L873 80L882 78L892 77L900 76L909 75L918 75L926 76L934 79L942 83L950 87L956 92L962 96L968 100L974 104L979 108L983 113L987 118L990 123L993 128L996 133L999 137L1003 141L1006 145L1009 148L1013 152L1016 156L1020 159L1026 163L1033 166L1044 169L1056 173L1069 178L1080 186L1089 194Z' opacity='0.88'/%3E%3Cpath d='M1091 194L1097 204L1101 214L1104 225L1106 236L1107 247L1105 259L1101 269L1094 278L1085 285L1075 291L1065 295L1054 299L1043 301L1032 302L1020 300L1008 296L997 290L987 284L978 278L971 275L965 274L960 273L955 273L950 273L944 273L939 273L934 273L929 272L923 273L917 273L910 274L904 274L897 273L890 272L883 270L876 267L869 264L862 261L854 258L846 254L838 249L832 243L826 236L821 229L817 221L813 212L809 203L805 194L802 185L801 175L801 165L803 155L806 146L810 136L814 127L818 118L823 110L829 101L835 94L844 88L853 84L862 80L872 78L881 75L890 73L899 71L907 70L917 71L925 73L934 77L942 80L950 84L956 88L963 91L969 95L975 99L980 104L985 109L989 115L992 120L996 125L999 129L1003 133L1007 137L1010 141L1014 145L1017 149L1021 153L1025 157L1032 160L1040 163L1051 167L1063 172L1074 178L1084 185L1091 194Z' opacity='0.81'/%3E%3Cpath d='M1093 194L1099 204L1104 215L1108 226L1110 237L1110 249L1107 260L1102 269L1094 278L1086 285L1077 292L1068 298L1058 302L1047 305L1035 306L1023 304L1010 300L999 294L989 289L980 285L973 282L967 281L961 280L955 279L950 278L944 278L939 277L933 277L927 277L921 278L915 278L908 279L901 278L894 277L888 275L881 272L874 270L866 267L858 265L850 261L842 256L835 251L829 244L824 237L819 229L814 221L809 213L804 204L800 194L798 184L797 174L799 164L801 154L804 145L807 135L810 125L814 116L819 107L825 99L833 92L842 87L851 82L861 78L869 74L878 71L887 68L897 66L906 66L916 68L925 71L934 74L942 77L950 80L957 83L964 86L970 90L976 95L981 101L986 106L990 112L994 116L999 121L1003 125L1007 129L1011 133L1014 138L1017 142L1021 146L1025 150L1031 154L1038 157L1048 161L1058 165L1069 170L1078 177L1087 185L1093 194Z' opacity='0.75'/%3E%3Cpath d='M1097 194L1104 204L1109 215L1113 227L1114 238L1113 250L1108 260L1103 270L1096 279L1088 287L1080 295L1072 301L1061 306L1050 308L1037 309L1025 307L1012 303L1001 299L991 295L983 292L975 290L968 288L962 286L955 285L950 283L944 282L938 282L932 282L926 283L919 284L912 284L906 283L899 282L892 280L885 278L878 276L870 274L861 271L853 268L845 264L838 259L832 252L826 245L820 238L814 230L808 222L803 214L798 204L795 194L794 184L795 174L796 164L798 154L800 143L802 133L805 123L809 113L815 105L823 97L832 91L840 85L849 80L858 74L866 70L875 66L885 63L895 63L905 63L915 65L924 67L933 69L941 71L950 74L957 77L964 81L971 86L977 91L983 97L988 102L993 107L997 111L1002 115L1007 120L1011 125L1014 129L1018 134L1021 139L1026 143L1031 147L1038 151L1046 154L1055 158L1064 163L1073 170L1082 177L1090 185L1097 194Z' opacity='0.69'/%3E%3Cpath d='M1103 194L1109 205L1114 216L1117 227L1117 239L1114 250L1110 261L1105 271L1099 281L1093 290L1085 298L1075 304L1064 309L1052 311L1039 311L1027 310L1015 308L1004 305L995 303L985 300L977 297L970 295L962 292L956 290L950 289L943 289L937 289L931 289L924 290L917 290L910 289L904 287L897 286L890 284L882 282L874 281L865 279L857 276L849 272L841 266L835 260L829 254L822 247L815 240L808 232L802 224L797 214L794 204L792 194L792 184L792 173L792 163L793 152L794 141L796 131L800 120L806 111L813 103L821 95L829 89L837 82L845 75L854 69L863 64L873 61L883 60L894 60L904 60L914 61L923 62L932 63L941 65L950 67L958 71L965 76L972 82L978 87L984 92L990 96L996 101L1001 105L1006 110L1010 115L1014 120L1018 126L1022 131L1026 135L1032 139L1038 143L1045 147L1053 151L1061 156L1069 162L1078 169L1086 176L1094 185L1103 194Z' opacity='0.62'/%3E%3Cpath d='M1109 194L1115 205L1119 216L1119 228L1118 239L1116 251L1113 262L1109 273L1104 283L1097 293L1089 301L1078 307L1066 311L1054 313L1042 314L1030 314L1019 314L1008 313L998 311L988 308L979 304L971 301L963 299L956 297L950 296L943 296L936 297L929 297L922 296L915 295L908 294L901 292L894 291L886 289L877 288L869 286L860 283L852 279L845 274L838 269L831 263L824 256L816 250L808 242L802 234L796 225L792 215L790 205L789 194L788 184L787 173L786 162L786 150L787 139L791 128L796 119L803 109L810 101L817 93L825 85L832 77L841 70L850 64L860 60L871 58L882 56L892 56L902 55L912 55L922 55L931 56L941 58L950 62L958 66L966 71L973 76L980 81L986 85L993 89L999 94L1004 99L1009 105L1014 111L1018 116L1022 121L1027 126L1033 130L1039 134L1046 139L1052 143L1059 149L1067 154L1075 161L1083 168L1092 175L1101 184L1109 194Z' opacity='0.56'/%3E%3Cpath d='M1115 194L1120 205L1122 217L1122 229L1122 240L1120 252L1118 264L1115 276L1109 286L1101 296L1092 303L1080 309L1069 313L1057 317L1045 319L1034 321L1023 321L1012 320L1001 318L990 315L981 311L972 308L964 307L957 306L950 306L942 306L935 305L928 304L920 303L913 301L906 300L898 298L890 298L881 296L872 295L864 292L856 288L848 283L841 278L833 272L825 266L817 260L808 253L801 245L795 236L791 226L788 215L785 205L783 194L781 183L779 172L778 160L779 148L782 137L787 127L793 117L799 107L805 98L812 89L819 80L827 72L836 65L846 60L857 56L868 54L879 52L890 50L900 48L910 47L920 47L930 49L940 52L950 56L958 61L966 65L974 69L982 73L989 77L996 82L1002 87L1008 93L1013 100L1018 105L1023 111L1028 115L1034 120L1040 124L1047 129L1053 135L1059 140L1066 146L1073 152L1082 159L1091 166L1100 174L1109 184L1115 194Z' opacity='0.50'/%3E%3Cpath d='M1121 194L1124 206L1126 217L1127 229L1128 242L1127 255L1125 267L1121 279L1114 289L1105 298L1094 305L1083 312L1072 317L1062 322L1051 326L1039 328L1027 329L1015 327L1004 325L993 322L983 319L974 318L966 317L958 316L950 316L942 315L934 313L926 312L919 310L911 308L903 308L894 307L885 306L876 304L867 301L859 297L851 292L843 287L835 282L826 277L817 271L808 264L801 256L794 247L789 237L786 227L782 216L779 205L775 194L772 183L770 171L770 159L773 147L777 136L782 125L787 114L793 104L798 93L805 83L812 74L822 66L832 60L843 56L854 52L865 48L876 45L886 42L897 40L908 39L919 40L930 42L940 46L950 50L959 53L968 57L976 60L984 64L992 69L999 74L1005 81L1011 87L1017 93L1023 99L1029 103L1035 108L1042 113L1048 119L1054 124L1060 131L1066 137L1073 143L1082 149L1091 156L1100 164L1109 173L1116 183L1121 194Z' opacity='0.44'/%3E%3Cpath d='M1126 194L1129 206L1132 218L1135 231L1136 244L1135 257L1132 270L1126 281L1118 291L1108 300L1099 309L1089 316L1079 323L1068 329L1056 333L1044 335L1031 336L1019 334L1007 332L996 331L986 330L976 329L967 329L958 328L950 326L941 324L933 322L924 320L916 319L907 319L898 318L889 317L880 315L871 312L862 308L854 303L845 298L836 293L827 288L817 283L808 276L800 268L793 259L788 249L783 239L778 228L773 217L768 206L764 194L762 182L762 169L764 157L767 145L771 134L775 122L779 110L784 99L790 87L797 77L806 69L817 61L828 55L839 50L850 45L860 40L871 35L882 32L894 30L906 31L917 33L929 35L939 38L950 41L959 43L969 46L978 49L987 54L995 60L1002 67L1009 73L1016 79L1023 85L1030 90L1037 95L1044 100L1050 106L1056 113L1062 119L1068 126L1075 132L1083 139L1093 146L1102 153L1110 162L1117 172L1122 183L1126 194Z' opacity='0.38'/%3E%3Cpath d='M1134 194L1139 207L1142 220L1145 233L1145 247L1143 260L1138 272L1131 284L1123 294L1114 304L1106 314L1097 323L1086 331L1075 337L1062 341L1049 343L1035 343L1023 343L1011 343L1000 343L989 343L979 343L969 342L959 340L950 338L940 335L931 333L922 332L913 332L903 331L893 330L884 328L874 325L865 320L856 316L847 311L837 307L827 302L816 296L807 290L798 281L791 272L785 262L779 252L773 241L767 230L761 219L756 207L753 194L752 181L753 168L756 156L759 143L762 130L765 118L768 105L774 93L781 81L790 72L800 63L811 56L822 49L833 42L843 35L854 29L866 24L878 22L891 21L903 22L916 24L927 25L939 26L950 28L960 30L971 33L981 38L990 44L998 51L1006 57L1014 63L1022 68L1030 73L1038 79L1045 85L1052 92L1058 99L1064 106L1071 113L1079 120L1087 126L1096 134L1105 141L1113 150L1120 160L1125 171L1130 182L1134 194Z' opacity='0.31'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size:auto 90% !important;
  background-position:right -80px bottom 40px !important;
  background-repeat:no-repeat !important;
  opacity:.28 !important;
}
/* repere GPS au dessus des colonnes */
body footer.wd-footer .main-footer::before{
  content:"17\00B0 38\2032 S 149\00B0 36\2032 W \00B7  FENUA CLICK \00B7  PUNAAUIA, TAHITI";
  display:block;
  margin:0 0 28px;
  padding:0 0 18px 18px;
  border-bottom:1px solid rgba(127,224,211,.14);
  font:500 11.5px/1.4 'JetBrains Mono',ui-monospace,Menlo,monospace;
  letter-spacing:.06em;
  color:#bff1ea;
  white-space:pre;
  background:radial-gradient(circle at 4px 8px,#7fe0d3 0 3.5px,rgba(127,224,211,.28) 4px 7px,transparent 7.5px) no-repeat;
}
/* titres des colonnes en style technique */
body .footer-column-1 h5,body .footer-column-2 h5,body .footer-column-3 h5,body .footer-column-4 h5,
body .wd-footer .widget-title,body .wd-footer .footer-title{
  font:500 12px/1.4 'JetBrains Mono',ui-monospace,Menlo,monospace !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:#bff1ea !important;
  margin-bottom:18px !important;
}
/* textes et liens */
body .footer-column-1 li,body .footer-column-2 li,body .footer-column-3 li{color:rgba(226,239,237,.88) !important;font-family:Inter,Arial,sans-serif !important}
body .footer-column-2 li a,body .footer-column-3 li a{color:rgba(226,239,237,.88) !important;font-family:Inter,Arial,sans-serif !important}
body .footer-column-2 li a:hover,body .footer-column-3 li a:hover{color:#7fe0d3 !important}
/* puces : coche lagon pour les engagements, point lagon pour les liens */
body .footer-column-1 li:before{color:#7fe0d3 !important}
body .footer-column-2 li:before,body .footer-column-3 li:before{
  content:"" !important;
  width:6px;height:6px;border-radius:50%;
  background:#7fe0d3;opacity:.75;
  margin:8px 12px 0 0 !important;
}
/* fleche des accordeons : lagon (le nom Fenua Click garde l'orange du logo) */
body .wd-footer .wd-active .widget-title:after,
body .wd-footer .wd-active h5:after{color:#7fe0d3 !important}
/* carte "Suivez nous" : titre au meme style que les autres colonnes */
body .fc-social-card > div > span:first-child{
  font:500 12px/1.4 'JetBrains Mono',ui-monospace,Menlo,monospace !important;
  letter-spacing:.1em !important;
  color:#bff1ea !important;
}
body .fc-social-card{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(127,224,211,.2) !important;
}
body .fc-social-card a.fc-social-lien:hover{color:#7fe0d3 !important}
/* barre du bas */
body .wd-footer .wd-copyrights,
body .wd-footer .copyrights-wrapper{
  background:rgba(0,0,0,.18) !important;
  border-top:1px solid rgba(127,224,211,.14) !important;
}
body .wd-footer .wd-copyrights,
body .wd-footer .wd-copyrights a{color:rgba(226,239,237,.75) !important}
body .wd-footer .wd-copyrights a:hover{color:#7fe0d3 !important}
@media (max-width:767px){
  body footer.wd-footer .main-footer::before{
    content:"17\00B0 38\2032 S 149\00B0 36\2032 W \00B7  FENUA CLICK";
    font-size:10.5px;margin-bottom:20px;
  }
  body footer.wd-footer::after{background-size:auto 60% !important;background-position:right -160px bottom 60px !important;opacity:.18 !important}
}
/* vague du haut du pied de page : on garde la vague creme animee, sans le voile teal
   (il formait une marche sur le nouveau fond), et sans fin trait qui decollerait pendant l'animation.
   Les 2 px transparents du bas evitent une fine ligne claire sur certains ecrans. */
body footer.wd-footer::before{
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1140,120 960,0 720,60 C480,120 300,0 0,60 Z' fill='%23F9F7F2'/%3E%3C/svg%3E"),
    linear-gradient(#F9F7F2,#F9F7F2) !important;
  background-size:100vw 100%,100% 18% !important;
  background-repeat:repeat-x,no-repeat !important;
  background-clip:content-box !important;
  padding-bottom:2px !important;
}

/* =====================================================================
   176. BARRE DU BAS SUR TELEPHONE, CHARTE "POLYNESIE HIGH TECH"
   Complete les sections 160, 169, 170 et 171.
   Barre flottante en abysse, aux coins arrondis, decollee du bord.
   Boutons au repos en lagon clair attenue, page en cours en lagon
   avec son trait au dessus. Pastille du panier toujours orange.
   La barre se cache toujours en descendant (section 170).
   ===================================================================== */
@media (max-width:1024px){
  html body .wd-toolbar{
    left:10px !important;right:10px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    border-radius:22px !important;
    padding:6px !important;
    min-height:62px !important;
    background:
      radial-gradient(60% 120% at 50% 0%,rgba(47,165,154,.28),transparent 70%),
      linear-gradient(160deg,#174749 0%,#0b2627 100%) !important;
    border:1px solid rgba(127,224,211,.22) !important;
    box-shadow:0 18px 40px -16px rgba(11,38,39,.65),0 2px 6px rgba(0,0,0,.15) !important;
  }
  html body .wd-toolbar.wd-toolbar.fc-cache{transform:translateY(calc(100% + 30px)) !important}

  /* boutons au repos */
  html body .wd-toolbar.wd-toolbar > div > a,
  html body .wd-toolbar.wd-toolbar > div .wd-tools-icon,
  html body .wd-toolbar.wd-toolbar > div .wd-tools-icon:before,
  html body .wd-toolbar.wd-toolbar .wd-toolbar-label{color:rgba(191,241,234,.72) !important}
  html body .wd-toolbar.wd-toolbar > div > a{border-radius:16px !important;text-decoration:none !important}
  html body .wd-toolbar.wd-toolbar > div > a:active{background:rgba(127,224,211,.12) !important}
  html body .wd-toolbar.wd-toolbar > div .wd-tools-icon img{filter:brightness(0) invert(1);opacity:.75}

  /* page en cours : lagon, fond en verre, trait au dessus */
  html body .wd-toolbar.wd-toolbar > div.fc-actif > a{background:rgba(127,224,211,.14) !important}
  html body .wd-toolbar.wd-toolbar > div.fc-actif > a,
  html body .wd-toolbar.wd-toolbar > div.fc-actif .wd-tools-icon,
  html body .wd-toolbar.wd-toolbar > div.fc-actif .wd-tools-icon:before,
  html body .wd-toolbar.wd-toolbar > div.fc-actif .wd-toolbar-label{color:#7fe0d3 !important}
  html body .wd-toolbar.wd-toolbar > div.fc-actif .wd-tools-icon img{opacity:1;filter:brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(120deg)}
  html body .wd-toolbar.wd-toolbar > div.fc-actif > a::before{
    top:-6px !important;background:#7fe0d3 !important;
    box-shadow:0 0 10px 2px rgba(127,224,211,.6);
  }

  /* pastille du panier : orange, liseré de la couleur de la barre */
  html body .wd-toolbar.wd-toolbar .wd-cart-number,
  html body .wd-toolbar.wd-toolbar .wd-tools-count{
    background:#de7735 !important;color:#fff !important;border-color:#123f41 !important;
  }

  /* le bouton Remonter passe au dessus de la barre flottante */
  html body .scrollToTop,
  html body .wd-scroll-top{bottom:calc(88px + env(safe-area-inset-bottom)) !important}
  html body.fc-barre-cachee .scrollToTop{bottom:calc(20px + env(safe-area-inset-bottom)) !important}
}

/* =====================================================================
   177. ACCUEIL : LES NOUVEAUX WIDGETS PASSENT DEVANT LES ANCIENNES REGLES
   (sections 122, 155 et 158 ecrites pour les versions precedentes)
   ===================================================================== */
/* newsletter : le petit titre "Offre de bienvenue" reste visible */
body.home .fc-news-right .fc-kicker{display:block !important}
/* newsletter : la place pour Moorea et le lagon en bas */
body .fc-news-wrapper.fc-news-wrapper{padding-bottom:calc(var(--fc-sec,80px) + 170px) !important}
body .fc-news-wrapper.fc-news-wrapper::after{height:26px !important}
@media (max-width:900px){
  body .fc-news-wrapper.fc-news-wrapper{padding-bottom:calc(var(--fc-sec,60px) + 110px) !important}
}
/* commander : la place pour la vague du haut et celle du bas */
body .fc-serv-wrapper.fc-serv-wrapper{
  padding-top:calc(var(--fc-sec,80px) + 40px) !important;
  padding-bottom:calc(var(--fc-sec,80px) + 60px) !important;
}
/* commander : numeros 01, 02, 03 en teal (la section 122 les mettait en blanc) */
body.home .fc-serv-wrapper .fc-num{background:#215d60 !important;color:#fff !important}
body.home .fc-serv-wrapper .fc-spec .fc-num{background:#0b2627 !important;color:#7fe0d3 !important}
/* qui sommes nous : courbes de niveau de Tahiti a la place des anciennes lignes */
body .fc-equipe.fc-equipe::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMaxYMid slice'%3E%3Cg fill='none' stroke='%23215d60' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M1082 194L1091 203L1097 214L1100 224L1101 235L1099 245L1096 255L1092 264L1087 273L1080 282L1072 288L1062 293L1051 295L1038 295L1025 292L1011 287L999 279L987 271L979 264L972 261L967 260L962 258L958 258L954 258L950 258L945 259L941 260L936 261L931 262L926 263L921 263L916 263L910 262L904 262L898 262L891 261L883 261L876 259L869 256L862 252L856 248L850 243L843 238L837 233L830 226L824 219L819 211L816 203L814 194L813 185L813 176L813 167L812 157L813 148L815 139L819 130L824 122L831 115L838 108L845 102L852 97L859 91L867 86L875 83L884 81L893 80L903 81L911 82L920 84L928 85L935 87L943 89L950 93L956 97L962 102L967 107L971 112L976 117L980 121L984 125L987 129L990 134L992 138L994 143L996 147L999 151L1001 155L1004 158L1007 161L1011 164L1015 167L1022 170L1031 172L1044 175L1058 180L1071 186L1082 194Z' opacity='1.00'/%3E%3Cpath d='M1086 194L1094 204L1099 214L1101 224L1101 235L1100 245L1098 256L1095 266L1090 275L1083 283L1074 290L1063 294L1051 296L1039 296L1026 294L1014 291L1002 285L991 278L982 272L974 267L968 265L963 263L958 262L954 262L950 262L945 263L940 264L935 265L930 266L925 266L920 265L914 265L908 265L902 265L895 265L888 265L881 263L874 261L867 257L861 254L854 249L847 245L840 240L832 234L826 227L821 220L817 212L815 203L813 194L811 185L810 176L808 166L808 156L810 147L813 138L818 129L823 121L830 114L836 107L842 100L849 94L856 88L865 84L874 81L883 79L893 79L902 79L911 79L919 80L927 81L935 83L942 86L950 90L956 95L962 100L967 104L972 109L977 113L982 117L985 121L989 126L992 131L994 136L997 140L999 145L1002 148L1005 152L1008 155L1012 158L1016 161L1021 165L1027 168L1037 171L1050 174L1063 179L1076 186L1086 194Z' opacity='0.94'/%3E%3Cpath d='M1089 194L1096 204L1100 214L1102 224L1103 235L1103 246L1101 257L1098 267L1092 277L1085 284L1075 290L1064 294L1052 297L1041 298L1029 298L1017 295L1005 291L994 285L984 278L976 273L970 270L964 268L959 267L954 267L950 268L945 268L940 269L935 269L930 269L924 269L919 269L913 269L906 269L899 269L892 269L885 268L878 265L872 262L865 259L858 255L850 251L843 247L835 242L829 235L823 228L819 220L816 212L813 203L810 194L807 185L805 175L804 165L805 155L808 146L812 137L817 129L822 120L827 112L833 104L839 97L846 91L854 85L863 82L873 80L882 78L892 77L900 76L909 75L918 75L926 76L934 79L942 83L950 87L956 92L962 96L968 100L974 104L979 108L983 113L987 118L990 123L993 128L996 133L999 137L1003 141L1006 145L1009 148L1013 152L1016 156L1020 159L1026 163L1033 166L1044 169L1056 173L1069 178L1080 186L1089 194Z' opacity='0.88'/%3E%3Cpath d='M1091 194L1097 204L1101 214L1104 225L1106 236L1107 247L1105 259L1101 269L1094 278L1085 285L1075 291L1065 295L1054 299L1043 301L1032 302L1020 300L1008 296L997 290L987 284L978 278L971 275L965 274L960 273L955 273L950 273L944 273L939 273L934 273L929 272L923 273L917 273L910 274L904 274L897 273L890 272L883 270L876 267L869 264L862 261L854 258L846 254L838 249L832 243L826 236L821 229L817 221L813 212L809 203L805 194L802 185L801 175L801 165L803 155L806 146L810 136L814 127L818 118L823 110L829 101L835 94L844 88L853 84L862 80L872 78L881 75L890 73L899 71L907 70L917 71L925 73L934 77L942 80L950 84L956 88L963 91L969 95L975 99L980 104L985 109L989 115L992 120L996 125L999 129L1003 133L1007 137L1010 141L1014 145L1017 149L1021 153L1025 157L1032 160L1040 163L1051 167L1063 172L1074 178L1084 185L1091 194Z' opacity='0.81'/%3E%3Cpath d='M1093 194L1099 204L1104 215L1108 226L1110 237L1110 249L1107 260L1102 269L1094 278L1086 285L1077 292L1068 298L1058 302L1047 305L1035 306L1023 304L1010 300L999 294L989 289L980 285L973 282L967 281L961 280L955 279L950 278L944 278L939 277L933 277L927 277L921 278L915 278L908 279L901 278L894 277L888 275L881 272L874 270L866 267L858 265L850 261L842 256L835 251L829 244L824 237L819 229L814 221L809 213L804 204L800 194L798 184L797 174L799 164L801 154L804 145L807 135L810 125L814 116L819 107L825 99L833 92L842 87L851 82L861 78L869 74L878 71L887 68L897 66L906 66L916 68L925 71L934 74L942 77L950 80L957 83L964 86L970 90L976 95L981 101L986 106L990 112L994 116L999 121L1003 125L1007 129L1011 133L1014 138L1017 142L1021 146L1025 150L1031 154L1038 157L1048 161L1058 165L1069 170L1078 177L1087 185L1093 194Z' opacity='0.75'/%3E%3Cpath d='M1097 194L1104 204L1109 215L1113 227L1114 238L1113 250L1108 260L1103 270L1096 279L1088 287L1080 295L1072 301L1061 306L1050 308L1037 309L1025 307L1012 303L1001 299L991 295L983 292L975 290L968 288L962 286L955 285L950 283L944 282L938 282L932 282L926 283L919 284L912 284L906 283L899 282L892 280L885 278L878 276L870 274L861 271L853 268L845 264L838 259L832 252L826 245L820 238L814 230L808 222L803 214L798 204L795 194L794 184L795 174L796 164L798 154L800 143L802 133L805 123L809 113L815 105L823 97L832 91L840 85L849 80L858 74L866 70L875 66L885 63L895 63L905 63L915 65L924 67L933 69L941 71L950 74L957 77L964 81L971 86L977 91L983 97L988 102L993 107L997 111L1002 115L1007 120L1011 125L1014 129L1018 134L1021 139L1026 143L1031 147L1038 151L1046 154L1055 158L1064 163L1073 170L1082 177L1090 185L1097 194Z' opacity='0.69'/%3E%3Cpath d='M1103 194L1109 205L1114 216L1117 227L1117 239L1114 250L1110 261L1105 271L1099 281L1093 290L1085 298L1075 304L1064 309L1052 311L1039 311L1027 310L1015 308L1004 305L995 303L985 300L977 297L970 295L962 292L956 290L950 289L943 289L937 289L931 289L924 290L917 290L910 289L904 287L897 286L890 284L882 282L874 281L865 279L857 276L849 272L841 266L835 260L829 254L822 247L815 240L808 232L802 224L797 214L794 204L792 194L792 184L792 173L792 163L793 152L794 141L796 131L800 120L806 111L813 103L821 95L829 89L837 82L845 75L854 69L863 64L873 61L883 60L894 60L904 60L914 61L923 62L932 63L941 65L950 67L958 71L965 76L972 82L978 87L984 92L990 96L996 101L1001 105L1006 110L1010 115L1014 120L1018 126L1022 131L1026 135L1032 139L1038 143L1045 147L1053 151L1061 156L1069 162L1078 169L1086 176L1094 185L1103 194Z' opacity='0.62'/%3E%3Cpath d='M1109 194L1115 205L1119 216L1119 228L1118 239L1116 251L1113 262L1109 273L1104 283L1097 293L1089 301L1078 307L1066 311L1054 313L1042 314L1030 314L1019 314L1008 313L998 311L988 308L979 304L971 301L963 299L956 297L950 296L943 296L936 297L929 297L922 296L915 295L908 294L901 292L894 291L886 289L877 288L869 286L860 283L852 279L845 274L838 269L831 263L824 256L816 250L808 242L802 234L796 225L792 215L790 205L789 194L788 184L787 173L786 162L786 150L787 139L791 128L796 119L803 109L810 101L817 93L825 85L832 77L841 70L850 64L860 60L871 58L882 56L892 56L902 55L912 55L922 55L931 56L941 58L950 62L958 66L966 71L973 76L980 81L986 85L993 89L999 94L1004 99L1009 105L1014 111L1018 116L1022 121L1027 126L1033 130L1039 134L1046 139L1052 143L1059 149L1067 154L1075 161L1083 168L1092 175L1101 184L1109 194Z' opacity='0.56'/%3E%3Cpath d='M1115 194L1120 205L1122 217L1122 229L1122 240L1120 252L1118 264L1115 276L1109 286L1101 296L1092 303L1080 309L1069 313L1057 317L1045 319L1034 321L1023 321L1012 320L1001 318L990 315L981 311L972 308L964 307L957 306L950 306L942 306L935 305L928 304L920 303L913 301L906 300L898 298L890 298L881 296L872 295L864 292L856 288L848 283L841 278L833 272L825 266L817 260L808 253L801 245L795 236L791 226L788 215L785 205L783 194L781 183L779 172L778 160L779 148L782 137L787 127L793 117L799 107L805 98L812 89L819 80L827 72L836 65L846 60L857 56L868 54L879 52L890 50L900 48L910 47L920 47L930 49L940 52L950 56L958 61L966 65L974 69L982 73L989 77L996 82L1002 87L1008 93L1013 100L1018 105L1023 111L1028 115L1034 120L1040 124L1047 129L1053 135L1059 140L1066 146L1073 152L1082 159L1091 166L1100 174L1109 184L1115 194Z' opacity='0.50'/%3E%3Cpath d='M1121 194L1124 206L1126 217L1127 229L1128 242L1127 255L1125 267L1121 279L1114 289L1105 298L1094 305L1083 312L1072 317L1062 322L1051 326L1039 328L1027 329L1015 327L1004 325L993 322L983 319L974 318L966 317L958 316L950 316L942 315L934 313L926 312L919 310L911 308L903 308L894 307L885 306L876 304L867 301L859 297L851 292L843 287L835 282L826 277L817 271L808 264L801 256L794 247L789 237L786 227L782 216L779 205L775 194L772 183L770 171L770 159L773 147L777 136L782 125L787 114L793 104L798 93L805 83L812 74L822 66L832 60L843 56L854 52L865 48L876 45L886 42L897 40L908 39L919 40L930 42L940 46L950 50L959 53L968 57L976 60L984 64L992 69L999 74L1005 81L1011 87L1017 93L1023 99L1029 103L1035 108L1042 113L1048 119L1054 124L1060 131L1066 137L1073 143L1082 149L1091 156L1100 164L1109 173L1116 183L1121 194Z' opacity='0.44'/%3E%3Cpath d='M1126 194L1129 206L1132 218L1135 231L1136 244L1135 257L1132 270L1126 281L1118 291L1108 300L1099 309L1089 316L1079 323L1068 329L1056 333L1044 335L1031 336L1019 334L1007 332L996 331L986 330L976 329L967 329L958 328L950 326L941 324L933 322L924 320L916 319L907 319L898 318L889 317L880 315L871 312L862 308L854 303L845 298L836 293L827 288L817 283L808 276L800 268L793 259L788 249L783 239L778 228L773 217L768 206L764 194L762 182L762 169L764 157L767 145L771 134L775 122L779 110L784 99L790 87L797 77L806 69L817 61L828 55L839 50L850 45L860 40L871 35L882 32L894 30L906 31L917 33L929 35L939 38L950 41L959 43L969 46L978 49L987 54L995 60L1002 67L1009 73L1016 79L1023 85L1030 90L1037 95L1044 100L1050 106L1056 113L1062 119L1068 126L1075 132L1083 139L1093 146L1102 153L1110 162L1117 172L1122 183L1126 194Z' opacity='0.38'/%3E%3Cpath d='M1134 194L1139 207L1142 220L1145 233L1145 247L1143 260L1138 272L1131 284L1123 294L1114 304L1106 314L1097 323L1086 331L1075 337L1062 341L1049 343L1035 343L1023 343L1011 343L1000 343L989 343L979 343L969 342L959 340L950 338L940 335L931 333L922 332L913 332L903 331L893 330L884 328L874 325L865 320L856 316L847 311L837 307L827 302L816 296L807 290L798 281L791 272L785 262L779 252L773 241L767 230L761 219L756 207L753 194L752 181L753 168L756 156L759 143L762 130L765 118L768 105L774 93L781 81L790 72L800 63L811 56L822 49L833 42L843 35L854 29L866 24L878 22L891 21L903 22L916 24L927 25L939 26L950 28L960 30L971 33L981 38L990 44L998 51L1006 57L1014 63L1022 68L1030 73L1038 79L1045 85L1052 92L1058 99L1064 106L1071 113L1079 120L1087 126L1096 134L1105 141L1113 150L1120 160L1125 171L1130 182L1134 194Z' opacity='0.31'/%3E%3C/g%3E%3C/svg%3E") left -120px center / auto 120% no-repeat, #f9f7f2 !important}
@media (max-width:560px){
  body .fc-equipe.fc-equipe::before{background-position:left -260px top 40px !important;background-size:auto 60%,auto !important}
}

/* =====================================================================
   178. NOS DERNIERS ARRIVAGES : REPERE GPS AU DESSUS DU TITRE
   Meme repere que le hero, les avis, Commander et la newsletter.
   ===================================================================== */
body .fc-new h2::before{
  content:"17\00B0 38\2032 S 149\00B0 36\2032 W \00B7  ARRIVAGES";
  display:block;
  width:max-content;
  margin:0 auto 14px;
  padding-left:18px;
  font:500 11.5px/1.4 'JetBrains Mono',ui-monospace,Menlo,monospace !important;
  letter-spacing:.06em !important;
  text-transform:uppercase;
  color:#215d60 !important;
  -webkit-text-fill-color:#215d60;
  white-space:pre;
  background:radial-gradient(circle at 4px 50%,#2fa59a 0 3.5px,rgba(47,165,154,.2) 4px 7px,transparent 7.5px) no-repeat;
}
@media (max-width:767px){
  body .fc-new h2::before{font-size:9.5px !important;letter-spacing:.03em !important;margin-bottom:10px}
}

/* =====================================================================
   179. TRANSITIONS CREME ENTRE LES SECTIONS (quelle que soit la version du widget)
   ===================================================================== */
body .fc-serv-wrapper::after{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C240,78 480,4 720,36 C960,68 1200,8 1440,40 L1440,80 L0,80 Z' fill='%23f9f7f2'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}
body .fc-news-wrapper{
  background:linear-gradient(180deg,#f9f7f2 0%,#f3eadf 38%,#f8dcc3 72%,#f3c9a6 100%) !important;
}

/* =====================================================================
   180. ACCUEIL : LE LAGON DE LA NEWSLETTER COULE DANS LE PIED DE PAGE
   ===================================================================== */
body.home .fc-news-wrapper::after{display:none !important}
body.home .fc-news-eau{
  height:90px !important;
  background:linear-gradient(180deg,#2f8f86 0%,#1d6a66 45%,#174749 100%) !important;
}
body.home .fc-news-wrapper.fc-news-wrapper{padding-bottom:calc(var(--fc-sec,80px) + 200px) !important}
body.home .fc-news-moorea{bottom:88px !important}
body.home footer.wd-footer::before{display:none !important}
body.home footer.wd-footer{margin-top:-1px !important}
@media (max-width:900px){
  body.home .fc-news-eau{height:64px !important}
  body.home .fc-news-moorea{bottom:62px !important}
  body.home .fc-news-wrapper.fc-news-wrapper{padding-bottom:calc(var(--fc-sec,60px) + 130px) !important}
}

/* =====================================================================
   181. BARRE DU BAS SUR TELEPHONE : PLUS LISIBLE
   ===================================================================== */
@media (max-width:1024px){
  html body .wd-toolbar.wd-toolbar > div > a,
  html body .wd-toolbar.wd-toolbar > div .wd-tools-icon,
  html body .wd-toolbar.wd-toolbar > div .wd-tools-icon:before,
  html body .wd-toolbar.wd-toolbar .wd-toolbar-label{color:rgba(255,255,255,.92) !important}
  html body .wd-toolbar.wd-toolbar .wd-toolbar-label{font-weight:600 !important}
  html body .wd-toolbar.wd-toolbar > div .wd-tools-icon img{filter:brightness(0) invert(1);opacity:.95}
  html body .wd-toolbar.wd-toolbar{border-color:rgba(255,255,255,.22) !important}
  html body .wd-toolbar.wd-toolbar > div.fc-actif > a{background:rgba(127,224,211,.18) !important}
  html body .wd-toolbar.wd-toolbar > div.fc-actif > a,
  html body .wd-toolbar.wd-toolbar > div.fc-actif .wd-tools-icon,
  html body .wd-toolbar.wd-toolbar > div.fc-actif .wd-tools-icon:before,
  html body .wd-toolbar.wd-toolbar > div.fc-actif .wd-toolbar-label{color:#7fe0d3 !important}
}

/* =====================================================================
   182. BARRE DU BAS : "Boutique" au lieu de "Notre boutique"
   ===================================================================== */
@media (max-width:1024px){
  html body .wd-toolbar.wd-toolbar a[href*="notre-boutique"] .wd-toolbar-label{font-size:0 !important}
  html body .wd-toolbar.wd-toolbar a[href*="notre-boutique"] .wd-toolbar-label::after{content:"Boutique";font-size:11.5px}
}

/* =====================================================================
   183. HEADER PC : COMPTE ET PANIER EN PASTILLES
   ===================================================================== */
@media (min-width:1025px){
  body .whb-general-header .wd-header-my-account > a{
    height:44px !important;padding:0 18px 0 14px !important;gap:8px !important;
    border:1.5px solid #215d60 !important;border-radius:999px !important;color:#215d60 !important;
    transition:background-color .2s ease,color .2s ease;
  }
  body .whb-general-header .wd-header-my-account > a .wd-tools-text{
    font:600 14px/1 Inter,Arial,sans-serif !important;text-transform:none !important;letter-spacing:0 !important;color:inherit !important;
  }
  body .whb-general-header .wd-header-my-account > a .wd-tools-icon,
  body .whb-general-header .wd-header-my-account > a .wd-tools-icon:before{color:inherit !important}
  body .whb-general-header .wd-header-my-account > a:hover{background:#215d60 !important;color:#fff !important}
  body .whb-general-header .wd-header-cart > a{
    height:44px !important;padding:0 18px !important;margin-left:8px !important;border-radius:999px !important;
    background:#215d60 !important;color:#fff !important;box-shadow:0 8px 18px -10px rgba(33,93,96,.7);
    transition:background-color .2s ease,transform .2s ease;
  }
  body .whb-general-header .wd-header-cart > a:hover{background:#174749 !important;transform:translateY(-1px)}
  body .whb-general-header .wd-header-cart .wd-tools-text-cart,
  body .whb-general-header .wd-header-cart .wd-tools-text-cart > span:first-child{
    font:600 14px/1 Inter,Arial,sans-serif !important;text-transform:none !important;letter-spacing:0 !important;
    color:#fff !important;display:inline-flex !important;align-items:center !important;gap:8px !important;
  }
  body .whb-general-header .wd-header-cart .wd-cart-number,
  body .whb-general-header .wd-header-cart .wd-tools-count{
    position:static !important;display:inline-flex !important;align-items:center;justify-content:center;
    min-width:22px !important;height:22px !important;padding:0 6px !important;border-radius:999px !important;
    background:#de7735 !important;color:#fff !important;font:700 11.5px/1 Inter,Arial,sans-serif !important;border:0 !important;
  }
}

/* =====================================================================
   184. HEADER PC : CONTENU DES PASTILLES COMPTE ET PANIER LISIBLE
   ===================================================================== */
@media (min-width:1025px){
  body .whb-general-header .wd-header-cart > a,
  body .whb-general-header .wd-header-cart > a *:not(.wd-cart-number):not(.wd-tools-count),
  body .whb-general-header .wd-header-cart > a .wd-tools-icon:before,
  body .whb-general-header .wd-header-cart > a .woocommerce-Price-amount{color:#fff !important}
  body .whb-general-header .wd-header-cart > a .wd-tools-icon:before{font-size:20px !important}
  body .whb-general-header .wd-header-my-account > a *,
  body .whb-general-header .wd-header-my-account > a .wd-tools-icon:before{color:inherit !important}
  body .whb-general-header .wd-header-my-account:hover > a,
  body .whb-general-header .wd-header-my-account.wd-opened > a,
  body .whb-general-header .wd-header-my-account:focus-within > a{background:#215d60 !important;color:#fff !important}
  body .whb-general-header .wd-header-my-account:hover > a *,
  body .whb-general-header .wd-header-my-account.wd-opened > a *,
  body .whb-general-header .wd-header-my-account:focus-within > a *,
  body .whb-general-header .wd-header-my-account:hover > a .wd-tools-icon:before,
  body .whb-general-header .wd-header-my-account.wd-opened > a .wd-tools-icon:before{color:#fff !important}
  body .whb-general-header .wd-header-my-account .wd-dropdown{
    margin-top:10px !important;padding:8px !important;border-radius:16px !important;
    border:1px solid #e3e9e7 !important;box-shadow:0 20px 40px -20px rgba(11,38,39,.45) !important;
  }
  body .whb-general-header .wd-header-my-account .wd-dropdown a{
    display:block !important;padding:10px 14px !important;border-radius:10px !important;
    font:500 14.5px/1.3 Inter,Arial,sans-serif !important;color:#174749 !important;
    transition:background-color .15s ease,color .15s ease;
  }
  body .whb-general-header .wd-header-my-account .wd-dropdown a:hover{background:rgba(33,93,96,.08) !important;color:#215d60 !important}
  body .whb-general-header .wd-header-my-account .wd-dropdown li:last-child{margin-top:4px;padding-top:4px;border-top:1px solid #eef1ef}
  body .whb-general-header .wd-header-my-account .wd-dropdown li:last-child a{color:#5d6e6c !important}
}

/* =====================================================================
   185. HEADER PC : RECHERCHE ET RECHERCHES POPULAIRES
   ===================================================================== */
@media (min-width:1025px){
  body .whb-general-header .wd-search-form .searchform input.s{
    height:46px !important;border-radius:999px !important;background:#f4f7f6 !important;border:1px solid #e3e9e7 !important;
    padding-inline:20px 56px !important;font:500 14.5px/1 Inter,Arial,sans-serif !important;color:#174749 !important;
    transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
  }
  body .whb-general-header .wd-search-form .searchform input.s::placeholder{color:#7d8b89 !important}
  body .whb-general-header .wd-search-form .searchform input.s:focus{
    background:#fff !important;border-color:#215d60 !important;box-shadow:0 0 0 4px rgba(127,224,211,.35) !important;outline:none !important;
  }
  body .whb-general-header .wd-search-form .searchform .searchsubmit{
    width:38px !important;height:38px !important;top:4px !important;right:4px !important;inset-inline-end:4px !important;
    border-radius:50% !important;background:#215d60 !important;color:#fff !important;transition:background-color .2s ease;
  }
  body .whb-general-header .wd-search-form .searchform .searchsubmit:hover{background:#174749 !important}
  body .whb-general-header .wd-search-form .searchform .searchsubmit:before,
  body .whb-general-header .wd-search-form .searchform .searchsubmit:after{color:#fff !important;font-size:16px !important}
  body .whb-general-header .wd-search-results.wd-dropdown{
    margin-top:10px !important;padding:16px !important;border-radius:18px !important;
    border:1px solid #e3e9e7 !important;box-shadow:0 24px 50px -24px rgba(11,38,39,.45) !important;
  }
  body .whb-general-header .wd-search-requests .wd-search-title,
  body .whb-general-header .wd-search-history .wd-search-title{
    display:block;margin:0 0 10px !important;font:500 11px/1.4 'JetBrains Mono',ui-monospace,Menlo,monospace !important;
    letter-spacing:.08em !important;text-transform:uppercase !important;color:#2f8f86 !important;
  }
  body .whb-general-header .wd-search-requests ul{gap:8px !important}
  body .whb-general-header .wd-search-requests ul li a{
    display:inline-flex !important;align-items:center;padding:7px 14px !important;border-radius:999px !important;
    background:#f4f7f6 !important;border:1px solid #e3e9e7 !important;font:500 13.5px/1.2 Inter,Arial,sans-serif !important;
    color:#174749 !important;text-decoration:none !important;transition:background-color .15s ease,border-color .15s ease,color .15s ease;
  }
  body .whb-general-header .wd-search-requests ul li a:hover{background:#215d60 !important;border-color:#215d60 !important;color:#fff !important}
}

/* =====================================================================
   186. PANNEAU DE CONNEXION DU HEADER (S'identifier)
   Lien "Creer un compte" en pastille (le texte court vient du functions.php v4.3),
   champs propres, bouton teal sans majuscules.
   ===================================================================== */
body .wd-dropdown-register{
  margin-top:10px !important;padding:22px !important;border-radius:18px !important;
  border:1px solid #e3e9e7 !important;box-shadow:0 24px 50px -24px rgba(11,38,39,.45) !important;min-width:340px !important;
}
body .wd-dropdown-register .wd-heading{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:12px !important;margin:0 0 16px !important;padding:0 0 14px !important;border-bottom:1px solid #eef1ef !important;
}
body .wd-dropdown-register .wd-heading .title{font:700 20px/1.2 'Familjen Grotesk',Inter,Arial,sans-serif !important;color:#174749 !important}
body .wd-dropdown-register .create-account-link{
  display:inline-block;padding:7px 14px;border-radius:999px;
  border:1.5px solid #215d60;color:#215d60 !important;text-decoration:none !important;
  font:600 13px/1 Inter,Arial,sans-serif;white-space:nowrap;transition:background-color .2s ease,color .2s ease;
}
body .wd-dropdown-register .create-account-link:hover{background:#215d60;color:#fff !important}
body .wd-dropdown-register label{font:600 13.5px/1.4 Inter,Arial,sans-serif !important;color:#174749 !important;margin-bottom:6px !important}
body .wd-dropdown-register .required{color:#215d60 !important}
body .wd-dropdown-register input[type="text"],
body .wd-dropdown-register input[type="email"],
body .wd-dropdown-register input[type="password"]{
  height:46px !important;border-radius:12px !important;background:#f4f7f6 !important;border:1px solid #e3e9e7 !important;
  font:500 14.5px/1 Inter,Arial,sans-serif !important;color:#174749 !important;box-shadow:none !important;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
body .wd-dropdown-register input:focus{background:#fff !important;border-color:#215d60 !important;box-shadow:0 0 0 4px rgba(127,224,211,.35) !important;outline:none !important}
body .wd-dropdown-register input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #f4f7f6 inset !important;-webkit-text-fill-color:#174749 !important}
body .wd-dropdown-register button[type="submit"],
body .wd-dropdown-register .button{
  width:100% !important;height:48px !important;border-radius:999px !important;background:#215d60 !important;color:#fff !important;border:0 !important;
  font:700 14.5px/1 Inter,Arial,sans-serif !important;text-transform:none !important;letter-spacing:0 !important;text-shadow:none !important;
  transition:background-color .2s ease,transform .2s ease;
}
body .wd-dropdown-register button[type="submit"]:hover,
body .wd-dropdown-register .button:hover{background:#174749 !important;transform:translateY(-1px)}
body .wd-dropdown-register .login-form-footer{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;margin-top:14px !important}
body .wd-dropdown-register .woocommerce-form-login__rememberme,
body .wd-dropdown-register .login-form-footer label{font:500 13.5px/1.3 Inter,Arial,sans-serif !important;color:#5d6e6c !important;margin:0 !important}
body .wd-dropdown-register input[type="checkbox"]{accent-color:#215d60}
body .wd-dropdown-register .lost_password a,
body .wd-dropdown-register .login-form-footer a{font:600 13.5px/1.3 Inter,Arial,sans-serif !important;color:#215d60 !important;text-decoration:none !important}
body .wd-dropdown-register .lost_password a:hover,
body .wd-dropdown-register .login-form-footer a:hover{text-decoration:underline !important}

/* =====================================================================
   187. PANNEAU DE CONNEXION : HABILLAGE CHARTE
   En tete abysse avec repere technique et courbes, mention securite.
   ===================================================================== */
body .wd-dropdown-register{padding:0 !important;overflow:hidden !important}
body .wd-dropdown-register .login-dropdown-inner{padding:0 !important}
/* en tete sombre */
body .wd-dropdown-register .wd-heading{
  position:relative;
  flex-wrap:wrap !important;
  margin:0 !important;
  padding:34px 22px 18px !important;
  border-bottom:0 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%237fe0d3' stroke-opacity='.22'%3E%3Cellipse cx='170' cy='30' rx='30' ry='24'/%3E%3Cellipse cx='170' cy='30' rx='48' ry='38'/%3E%3Cellipse cx='170' cy='30' rx='66' ry='52'/%3E%3Cellipse cx='170' cy='30' rx='86' ry='68'/%3E%3C/g%3E%3C/svg%3E") right -40px top -40px / 220px no-repeat,
    radial-gradient(80% 90% at 100% 0%,rgba(47,165,154,.35),transparent 70%),
    linear-gradient(160deg,#1b5a5c 0%,#0b2627 100%) !important;
}
/* repere technique au dessus du titre */
body .wd-dropdown-register .wd-heading::before{
  content:"ESPACE CLIENT \00B7  FENUA CLICK";
  position:absolute;left:22px;top:14px;
  padding-left:16px;
  font:500 10.5px/1.4 'JetBrains Mono',ui-monospace,Menlo,monospace;
  letter-spacing:.08em;color:#bff1ea;white-space:pre;
  background:radial-gradient(circle at 4px 50%,#7fe0d3 0 3px,rgba(127,224,211,.28) 3.5px 6px,transparent 6.5px) no-repeat;
}
body .wd-dropdown-register .wd-heading .title{color:#fff !important}
/* creer un compte : pastille de verre sur le fond sombre */
body .wd-dropdown-register .wd-heading .create-account-link{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(127,224,211,.5) !important;
  color:#fff !important;
}
body .wd-dropdown-register .wd-heading .create-account-link:hover{background:#fff !important;color:#174749 !important}
/* le formulaire */
body .wd-dropdown-register form.login{padding:20px 22px 16px !important;margin:0 !important;border:0 !important}
/* se souvenir de moi et mot de passe oublie sur une ligne */
body .wd-dropdown-register form.login .form-row:has(.woocommerce-form-login__rememberme),
body .wd-dropdown-register form.login .login-form-footer{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  flex-wrap:wrap;gap:8px 12px !important;margin:14px 0 0 !important;
}
body .wd-dropdown-register .lost_password{margin:-26px 0 0 auto !important;text-align:right !important;width:max-content}
/* mention securite en bas */
body .wd-dropdown-register form.login::after{
  content:"Connexion sécurisée, vos données restent chez nous";
  display:block;
  margin:16px -22px -16px;
  padding:11px 22px 11px 42px;
  border-top:1px solid #eef1ef;
  background:#f6f8f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") 20px center / 14px no-repeat;
  font:500 12px/1.4 Inter,Arial,sans-serif;color:#5d6e6c;
}

/* 187 bis. "Creer un compte" lisible sur l'en tete sombre */
body .wd-dropdown-register .wd-heading .create-account-link,
body .wd-dropdown-register .wd-heading .create-account-link *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  --wd-link-color:#fff;
  --wd-link-color-hover:#174749;
}
body .wd-dropdown-register .wd-heading .create-account-link:hover,
body .wd-dropdown-register .wd-heading .create-account-link:hover *{
  color:#174749 !important;
  -webkit-text-fill-color:#174749 !important;
}