/* ============================================================
   MAISON EMPREINTE — Feuille de personnalisation
   Polices auto-hébergées (RGPD, aucun appel Google).
   À charger APRÈS le CSS du thème Jubilee.
   ------------------------------------------------------------
   PRINCIPE : cette feuille définit des valeurs PAR DÉFAUT.
   Elle ne verrouille pas les couleurs de texte, pour que les
   réglages faits dans Avanam Builder restent prioritaires.
   N'ajoute un !important sur une couleur que si tu es sûr de
   vouloir interdire toute exception.
   ------------------------------------------------------------
   Révision : 18/09/2026
   ============================================================ */


/* ============================================================
   1. POLICES AUTO-HÉBERGÉES
   ============================================================ */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('https://maisonempreinte.fr/themes/PRS220532_Jubilee/assets/fonts/cormorant-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url('https://maisonempreinte.fr/themes/PRS220532_Jubilee/assets/fonts/cormorant-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url('https://maisonempreinte.fr/themes/PRS220532_Jubilee/assets/fonts/cormorant-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('https://maisonempreinte.fr/themes/PRS220532_Jubilee/assets/fonts/jost-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('https://maisonempreinte.fr/themes/PRS220532_Jubilee/assets/fonts/jost-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url('https://maisonempreinte.fr/themes/PRS220532_Jubilee/assets/fonts/jost-600.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('https://maisonempreinte.fr/themes/PRS220532_Jubilee/assets/fonts/dmmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('https://maisonempreinte.fr/themes/PRS220532_Jubilee/assets/fonts/dmmono-500.woff2') format('woff2');
}


/* ============================================================
   2. VARIABLES DE MARQUE
   ============================================================ */
:root {
  --me-grege:        #C4967A; /* accent */
  --me-sable:        #F2EDE4; /* fond clair */
  --me-brun-profond: #2C2218; /* texte / titres */
  --me-or-mat:       #C8A96E; /* accent doré */
  --me-brun-chaud:   #8B5E3C; /* accent secondaire */

  --me-titre: 'Cormorant Garamond', Georgia, serif;
  --me-corps: 'Jost', -apple-system, Helvetica, sans-serif;
  --me-mono:  'DM Mono', 'Courier New', monospace;
}


/* ============================================================
   3. TYPOGRAPHIE GLOBALE
   La couleur n'est plus imposée ici : elle est posée une seule
   fois sur <body> (section 4) et se transmet par héritage.
   C'est ce qui permet à Avanam de reprendre la main localement.
   ============================================================ */
body, .page-content, p, li, td,
input, textarea, select, button, label {
  font-family: var(--me-corps) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .product-title,
.featured-products .h2, .title_block, .title-block {
  font-family: var(--me-titre) !important;
  font-weight: 600;
}

/* Titres produit sur les aperçus (miniatures) — taille maîtrisée */
.product-miniature .product-title,
.product-miniature .product-title a,
.js-product-miniature .product-title,
.featured-products .product-title,
.products .product-title {
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

/* Prix, références, labels : DM Mono */
.product-price, .price, .current-price, .product-prices,
.regular-price, .discount, .product-reference,
.tax-shipping-delivery-label {
  font-family: var(--me-mono) !important;
  color: var(--me-brun-chaud);
}


/* ============================================================
   4. FONDS & STRUCTURE
   ============================================================ */
body {
  background-color: #ffffff;
  color: var(--me-brun-profond);
}

#header, .header-top, .header-nav { background-color: #ffffff; }

#footer, .footer-container {
  background-color: var(--me-brun-profond);
  color: var(--me-sable);
}

/* Les liens ont leur propre couleur (section 5) : il faut donc
   la redéfinir dans le footer, l'héritage ne suffit pas. */
#footer a, .footer-container a { color: var(--me-sable); }
#footer a:hover, .footer-container a:hover { color: var(--me-grege); }


/* ============================================================
   5. LIENS & ACCENTS
   ============================================================ */
a { color: var(--me-brun-chaud); }
a:hover, a:focus { color: var(--me-grege); }

::selection { background: var(--me-or-mat); color: #fff; }


/* ============================================================
   6. BOUTONS
   ============================================================ */
.btn-primary, .btn-primary:visited,
.add-to-cart, .btn.button-buy {
  background-color: var(--me-grege) !important;
  border-color: var(--me-grege) !important;
  color: #fff !important;
  font-family: var(--me-corps) !important;
  letter-spacing: 0.03em;
}
.btn-primary:hover, .add-to-cart:hover {
  background-color: var(--me-brun-chaud) !important;
  border-color: var(--me-brun-chaud) !important;
}
.btn-secondary, .btn-outline-primary {
  border-color: var(--me-or-mat) !important;
  color: var(--me-brun-profond) !important;
}


/* ============================================================
   7. DÉTAILS DE MARQUE
   ============================================================ */
.product-flag, .product-flag.new, .product-flag.on-sale {
  background-color: var(--me-or-mat);
  font-family: var(--me-mono) !important;
}

/* Filet doré discret sous les titres de section */
.featured-products .h2::after,
.title_block::after {
  content: "";
  display: block;
  width: 48px; height: 2px;
  margin: 8px auto 0;
  background: var(--me-or-mat);
}


/* ============================================================
   8. ICÔNES DU HEADER (panier, compte, recherche…)
   Le header Jubilee est construit avec le builder : on force
   les icônes en brun foncé dans toutes les zones d'en-tête.
   ============================================================ */
#header i, .main-header i, .sticky-header i, .elementor-top-section i,
#header .material-icons, .main-header .material-icons, .sticky-header .material-icons,
.blockcart, .blockcart *, #_desktop_cart, #_desktop_cart *,
.header-cart, .header-cart *, .cart-preview *,
.main-header .user-info *, .sticky-header .user-info *,
.main-header a i, .sticky-header a i {
  color: var(--me-brun-profond) !important;
}
#header svg path, .main-header svg path, .sticky-header svg path,
.blockcart svg path, #_desktop_cart svg path {
  fill: var(--me-brun-profond) !important;
}

/* Force l'affichage de l'icône panier */
.blockcart .icon-ava,
.blockcart [class^="icon-"],
#_desktop_cart .icon-ava,
#_desktop_cart [class^="icon-"],
.header-cart [class^="icon-"] {
  color: var(--me-brun-profond) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 22px !important;
}

/* Garde le chiffre du panier lisible sur sa pastille */
.cart-products-count, #header .cart-products-count { color: #fff !important; }


/* ============================================================
   9. BLOC NEWSLETTER
   Il se trouve dans le footer mais sur un fond clair : son texte
   doit repasser en foncé. Pas de !important, pour qu'un réglage
   Avanam puisse encore l'emporter.
   ============================================================ */
#footer .block_newsletter,
.footer-container .block_newsletter {
  color: var(--me-brun-profond);
}
#footer .block_newsletter p,
#footer .block_newsletter label,
.footer-container .block_newsletter p,
.footer-container .block_newsletter label {
  color: var(--me-brun-chaud);
}
#footer .block_newsletter a,
.footer-container .block_newsletter a {
  color: var(--me-brun-chaud);
  text-decoration: underline;
}


/* ============================================================
   10. FICHE PRODUIT — AFFICHAGE
   ============================================================ */

/* Masque le prix en double dans le bloc d'ajout au panier */
#add-to-cart-or-refresh .product-prices,
.product-actions .product-prices,
.product-add-to-cart .product-prices {
  display: none;
}

/* Désactive le zoom au survol */
.product-zoom-container,
.product-zoom-img {
  display: none !important;
}
.product-cover img,
.swiper-slide.lightbox-wrap img {
  cursor: default !important;
}

/* Masque la description courte dans les aperçus produit */
.product-desc { display: none !important; }


/* ============================================================
   11. GALERIE PRODUIT — CORRECTIFS SWIPER
   Les slides s'empilaient faute du CSS de base du carrousel,
   et la bande de miniatures affichait des flèches en double.
   ============================================================ */
.swiper,
.swiper-container {
  overflow: hidden !important;
  position: relative;
}
.swiper-wrapper {
  display: flex !important;
  flex-direction: row !important;
  box-sizing: content-box;
  position: relative;
}
.swiper-slide {
  flex-shrink: 0 !important;
  height: auto !important;
}

.images-container .swiper-wrapper { flex-wrap: nowrap !important; }
.images-container .product-cover  { overflow: hidden !important; }

/* Bande de miniatures : taille maîtrisée, en ligne */
.images-container .thumb-images { max-width: 100%; margin-top: 12px; }
.images-container .swiper_thumb .product-images {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px;
}
.images-container .swiper_thumb { height: auto !important; }
.images-container .thumb-container {
  width: 90px !important;
  flex: 0 0 90px !important;
  margin-right: 0 !important;
}
.images-container .thumb-container img {
  width: 100% !important;
  height: auto !important;
  border: 1px solid #e3dbce;
  border-radius: 4px;
}

/* Supprime les flèches de la BANDE de miniatures
   (on garde celles de l'image principale) */
.images-container .thumb-images .swiper-button-next,
.images-container .thumb-images .swiper-button-prev {
  display: none !important;
}


/* ============================================================
   12. CHAMPS DE PERSONNALISATION — GRAVURE
   Fonctionne avec le module maisonempreintegravure.
   ============================================================ */

/* Compteur de caractères */
[data-me-counter]::after {
  content: attr(data-me-counter);
  display: block;
  font-family: var(--me-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--me-brun-chaud);
  margin-top: 6px;
  text-align: right;
}
[data-me-full]::after {
  color: var(--me-grege);
  font-weight: 500;
}

/* Masque la mention native "1024 char. max" là où notre limite s'applique */
[data-me-counter] small,
[data-me-counter] .customization-message,
[data-me-counter] .text-muted,
[data-me-counter] span:not([class]) {
  display: none !important;
}

/* Message sous le champ fichier */
[data-me-file]::after {
  content: attr(data-me-file);
  display: block;
  font-family: var(--me-corps);
  font-size: 12px;
  color: var(--me-brun-chaud);
  margin-top: 6px;
}
[data-me-file-error]::after {
  color: #A63D2F;
  font-weight: 500;
}

/* Exemple grisé dans les champs de gravure */
.product-customization input::placeholder,
.product-customization textarea::placeholder {
  color: #B5A99C;
  font-style: italic;
  opacity: 1;
}

/* Confirmation « gravure enregistrée »
   Accompagne la surcharge de product-customization.tpl */
.me-gravure-ok {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  padding: 9px 12px;
  background: var(--me-sable);
  border-left: 2px solid var(--me-or-mat);
  border-radius: 2px;
  font-family: var(--me-corps);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.45;
  color: var(--me-brun-chaud);
}
.me-gravure-ok__coche {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--me-or-mat);
  color: var(--me-brun-profond);
  font-size: 10px;
  line-height: 1;
}
.me-gravure-ok strong {
  font-weight: 500;
  color: var(--me-brun-profond);
}

/* Le champ rempli se distingue légèrement du champ vide */
.product-customization-item.me-champ-rempli .product-message {
  border-color: rgba(200, 169, 110, .7);
  background: #FEFCF9;
}


/* ============================================================
   13. BANDE DE TITRE (fil d'Ariane)
   Réduite à la seule ligne de navigation : l'image de fond et
   la hauteur décorative ont été retirées.
   ============================================================ */
#hero_section {
  background: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 0 !important;
  margin: 0 !important;
}
#hero_section .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* les marges gauche et droite du thème sont conservées */
}
#hero_section .page-title-wrapper {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
#hero_section .breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   14. BLOCS CUSTOM DE LA PAGE D'ACCUEIL
   Confine leurs niveaux d'empilement pour qu'ils n'entrent pas
   en conflit avec les panneaux du thème (menu, panier mobile).
   ============================================================ */
.me-annonce,
.me-banniere,
.me-reassurance,
.me-univers,
.me-titre-produits,
.me-ecrin,
.me-etapes,
.me-atelier {
  isolation: isolate;
}