.elementor-kit-15{--e-global-color-primary:#B8903F;--e-global-color-secondary:#1C1712;--e-global-color-text:#3A3129;--e-global-color-accent:#D9B56A;--e-global-color-3ae76a2:#F5EDE0;--e-global-color-223b518:#FBF8F2;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Jost";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Jost";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Jost";--e-global-typography-accent-font-weight:500;}.elementor-kit-15 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   FRAGRANCE ORIENTAL — CSS personnalisé pour Elementor Pro
   ---------------------------------------------------------
   OÙ LE COLLER :
   Elementor → Réglages du site → CSS personnalisé
   (ou Apparence → Personnaliser → CSS additionnel)

   COMMENT L'UTILISER :
   Dans Elementor, sélectionnez un conteneur ou un widget →
   onglet « Avancé » → champ « Classes CSS » → tapez la classe
   indiquée (sans le point). Ex. : fo-carte
   ========================================================= */

:root{
  --fo-or:#b8903f;
  --fo-or-clair:#d9b56a;
  --fo-or-fonce:#8a6a2a;
  --fo-beige:#f5ede0;
  --fo-beige-2:#ebe0cc;
  --fo-creme:#fbf8f2;
  --fo-noir:#1c1712;
  --fo-gris:#7d7266;
  --fo-rouge:#a33a2c;
  --fo-rayon:14px;
  --fo-ombre:0 10px 30px rgba(60,40,10,.10);
}

/* ---------- 1. BARRE D'ANNONCE  → classe : fo-annonce ---------- */
.fo-annonce{background:var(--fo-noir);color:var(--fo-beige);font-size:.8rem;letter-spacing:.06em}
.fo-annonce b,.fo-annonce strong{color:var(--fo-or-clair);font-weight:500}

/* ---------- 2. EN-TÊTE  → classe : fo-header ---------- */
.fo-header{background:rgba(251,248,242,.96)!important;backdrop-filter:blur(8px);border-bottom:1px solid var(--fo-beige-2)}
.fo-header .elementor-nav-menu a{font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.fo-header .elementor-menu-cart__toggle .elementor-button{background:none;border:none;color:var(--fo-noir)}
.fo-header .elementor-menu-cart__toggle .elementor-button-icon[data-counter]:before{background:var(--fo-or)}

/* ---------- 3. SUR-TITRE de section  → classe : fo-surtitre ---------- */
.fo-surtitre .elementor-heading-title{font-size:.78rem!important;letter-spacing:.28em;text-transform:uppercase;color:var(--fo-or)!important;font-weight:500}

/* ---------- 4. HERO (texte du carrousel)  → classe : fo-hero ---------- */
.fo-hero .elementor-heading-title{color:#fff}
.fo-hero img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}

/* ---------- 5. BOUTONS ---------- */
/* Bouton or plein → classe : fo-btn */
.fo-btn .elementor-button{background:var(--fo-or);color:#fff;border-radius:40px;padding:14px 30px;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;transition:.25s}
.fo-btn .elementor-button:hover{background:var(--fo-or-fonce)}
/* Bouton contour → classe : fo-btn-contour */
.fo-btn-contour .elementor-button{background:transparent;border:1px solid var(--fo-or);color:var(--fo-or);border-radius:40px;padding:14px 30px;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
.fo-btn-contour .elementor-button:hover{background:var(--fo-or);color:#fff}

/* ---------- 6. CARTE PRODUIT (Loop Item)  → classe : fo-carte ----------
   À mettre sur le conteneur principal du modèle Loop.
   Image produit → classe : fo-carte-visuel
   Notes (description courte) → classe : fo-notes
   Bouton panier → classe : fo-ajouter
   Badge (attribut « Badge ») → classe : fo-badge                      */
.fo-carte{background:#fff;border-radius:var(--fo-rayon);overflow:hidden;box-shadow:0 1px 0 var(--fo-beige-2);transition:.3s;position:relative;height:100%}
.fo-carte:hover{box-shadow:var(--fo-ombre);transform:translateY(-4px)}
.fo-carte-visuel{background:linear-gradient(160deg,var(--fo-beige) 0%,var(--fo-beige-2) 100%);overflow:hidden}
.fo-carte-visuel img{transition:transform .5s;aspect-ratio:1/1.05;object-fit:contain;width:100%}
.fo-carte:hover .fo-carte-visuel img{transform:scale(1.06) rotate(-2deg)}
.fo-carte .elementor-heading-title,
.fo-carte .product_title{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.28rem;color:var(--fo-noir)}
.fo-notes,.fo-notes p{font-size:.8rem;color:var(--fo-or-fonce);margin:0}
.fo-carte .price{font-weight:600;color:var(--fo-noir)}
.fo-carte .price del{color:var(--fo-gris);font-weight:400;font-size:.88rem;opacity:1}
.fo-carte .price ins{text-decoration:none}
.fo-ajouter .button,.fo-ajouter .elementor-button,.fo-ajouter a.add_to_cart_button{width:100%;background:transparent!important;border:1px solid var(--fo-noir)!important;color:var(--fo-noir)!important;border-radius:30px!important;padding:11px!important;font-size:.76rem!important;letter-spacing:.1em;text-transform:uppercase;text-align:center;transition:.25s}
.fo-ajouter .button:hover,.fo-ajouter .elementor-button:hover,.fo-ajouter a.add_to_cart_button:hover{background:var(--fo-noir)!important;color:#fff!important}
.fo-ajouter .added_to_cart{display:block;text-align:center;font-size:.75rem;margin-top:6px;color:var(--fo-or-fonce)}

/* Badge : widget Titre avec balise dynamique « Termes du produit »
   (taxonomie : Badge). Masqué automatiquement s'il est vide. */
.fo-badge{position:absolute!important;top:12px;left:12px;z-index:3;width:auto!important}
.fo-badge .elementor-heading-title{display:inline-block;font-family:'Jost',sans-serif!important;font-size:.66rem!important;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:20px;font-weight:600;background:var(--fo-noir);color:var(--fo-or-clair)!important}
.fo-badge .elementor-heading-title a{color:inherit!important}
.fo-badge .elementor-heading-title:empty,.fo-badge:has(.elementor-heading-title:empty){display:none!important}
/* Badge promo automatique WooCommerce */
.fo-carte .onsale{background:var(--fo-rouge);color:#fff;border-radius:20px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;min-height:0;min-width:0;line-height:1.4;top:12px;left:12px;right:auto}

/* ---------- 7. RANGÉE « TENDANCES » (Loop Carousel)  → classe : fo-rail ---------- */
.fo-rail .swiper-button-prev,.fo-rail .swiper-button-next,
.fo-rail .elementor-swiper-button{width:44px;height:44px;border-radius:50%;border:1px solid var(--fo-beige-2);background:#fff;color:var(--fo-noir);display:flex;align-items:center;justify-content:center}
.fo-rail .swiper-pagination-bullet-active{background:var(--fo-or)}

/* ---------- 8. ONGLETS (Nested Tabs)  → classe : fo-onglets ---------- */
.fo-onglets .e-n-tabs-heading{justify-content:center;gap:10px}
.fo-onglets .e-n-tab-title{border:1px solid var(--fo-beige-2)!important;border-radius:30px!important;padding:11px 26px!important;background:transparent!important;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.fo-onglets .e-n-tab-title[aria-selected="true"]{background:var(--fo-noir)!important;color:var(--fo-or-clair)!important;border-color:var(--fo-noir)!important}

/* ---------- 9. FAMILLES OLFACTIVES  → classe : fo-famille ----------
   Conteneur avec image ou dégradé de fond + lien. */
.fo-famille{border-radius:var(--fo-rayon);overflow:hidden;min-height:250px;position:relative;transition:.3s;color:#fff}
.fo-famille:hover{transform:translateY(-5px)}
.fo-famille::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 65%);z-index:0;pointer-events:none}
.fo-famille > .e-con-inner,.fo-famille > .elementor-element{position:relative;z-index:1}
.fo-famille .elementor-heading-title{color:#fff!important}
/* Dégradés prêts à l'emploi (ajoutez en plus de fo-famille) */
.fo-oud{background:linear-gradient(150deg,#6b4423,#2c1a0c)}
.fo-ambre{background:linear-gradient(150deg,#c98a2e,#7a4a12)}
.fo-musc{background:linear-gradient(150deg,#b7a794,#6d5f50)}
.fo-rose{background:linear-gradient(150deg,#b8606a,#6a2a33)}
.fo-vanille{background:linear-gradient(150deg,#d8b98a,#8f6a3c)}

/* ---------- 10. COFFRETS  → classe : fo-coffret ---------- */
.fo-coffret{background:#fff;border-radius:var(--fo-rayon);overflow:hidden;border:1px solid var(--fo-beige-2);transition:.3s}
.fo-coffret:hover{box-shadow:var(--fo-ombre)}

/* ---------- 11. BANNIÈRE PARFUM DU MOIS  → classe : fo-editorial ---------- */
.fo-editorial{background:radial-gradient(circle at 25% 50%,#4a3219 0%,#1c1409 70%);border-radius:22px;overflow:hidden;color:rgba(255,255,255,.82)}
.fo-editorial .elementor-heading-title{color:#fff}
.fo-editorial img{filter:drop-shadow(0 25px 35px rgba(0,0,0,.4))}
/* Pyramide olfactive : 3 widgets Texte → classe : fo-pyramide */
.fo-pyramide{border-left:1px solid var(--fo-or);padding-left:12px}
.fo-pyramide strong{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fo-or-clair);font-weight:500}

/* ---------- 12. AVIS (Testimonial Carousel)  → classe : fo-avis ---------- */
.fo-avis .elementor-testimonial{background:#fff;border:1px solid var(--fo-beige-2);border-radius:var(--fo-rayon);padding:26px}
.fo-avis .elementor-testimonial__text{font-style:italic}
.fo-avis .elementor-testimonial__name{color:var(--fo-noir)}
.fo-avis .elementor-testimonial__title{color:#3d7a4a;font-size:.72rem}
.fo-avis .swiper-pagination-bullet-active{background:var(--fo-or)}

/* ---------- 13. GARANTIES (Icon Box)  → classe : fo-atout ---------- */
.fo-atout .elementor-icon{color:var(--fo-or);fill:var(--fo-or)}
.fo-atout .elementor-icon-box-title{font-size:.95rem;font-weight:600;color:var(--fo-noir)}
.fo-atout .elementor-icon-box-description{font-size:.82rem;color:var(--fo-gris)}

/* ---------- 14. FIDÉLITÉ & NEWSLETTER ---------- */
/* Bloc fidélité → classe : fo-bloc-fid */
.fo-bloc-fid{background:linear-gradient(135deg,var(--fo-or),var(--fo-or-fonce));border-radius:var(--fo-rayon);color:#fff}
.fo-bloc-fid .elementor-heading-title{color:#fff}
.fo-bloc-fid .elementor-icon-list-icon svg,.fo-bloc-fid .elementor-icon-list-icon i{fill:var(--fo-beige);color:var(--fo-beige)}
/* Bloc newsletter → classe : fo-bloc-news */
.fo-bloc-news{background:var(--fo-noir);border-radius:var(--fo-rayon);color:var(--fo-beige)}
.fo-bloc-news .elementor-heading-title{color:#fff}
.fo-bloc-news .elementor-field{background:#2a231c!important;border:1px solid #4a3f33!important;border-radius:30px!important;color:#fff!important;padding:12px 20px!important}
.fo-bloc-news .elementor-button{background:var(--fo-or)!important;border-radius:30px!important;text-transform:uppercase;letter-spacing:.06em}

/* ---------- 15. PIED DE PAGE  → classe : fo-footer ---------- */
.fo-footer{background:var(--fo-noir);color:#b9ad9e}
.fo-footer .elementor-heading-title{color:#fff}
.fo-footer a{color:#b9ad9e}
.fo-footer a:hover{color:var(--fo-or-clair)}
.fo-footer .elementor-social-icon{background:transparent!important;border:1px solid #4a3f33;border-radius:50%}
.fo-footer .elementor-social-icon:hover{background:var(--fo-or)!important;border-color:var(--fo-or)}

/* ---------- 16. WOOCOMMERCE : pages boutique & produit ---------- */
.woocommerce .price,.woocommerce-Price-amount{color:var(--fo-noir)}
.woocommerce span.onsale{background:var(--fo-rouge)}
.woocommerce a.button,.woocommerce button.button,.woocommerce .single_add_to_cart_button{background:var(--fo-or)!important;color:#fff!important;border-radius:40px!important;text-transform:uppercase;letter-spacing:.06em}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--fo-or-fonce)!important}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .fo-famille{min-height:190px}
  .fo-carte .elementor-heading-title{font-size:1.1rem}
  .fo-editorial{text-align:center}
}/* End custom CSS */