/** Shopify CDN: Minification failed

Line 1781:0 All "@import" rules must come first
Line 4329:0 Unexpected "@media"
Line 4549:1 Expected "}" to go with "{"

**/
:root{
  --accent:#A2675A;
  --accent-hover:#8C5448;

  --bg:#FBFAF8;
  --surface:#FFFFFF;
  --surface-warm:#F6F2ED;

  --text:#1E1E1E;
  --muted:#5E5A57;
  --line: rgba(30, 30, 30, .10);

  --radius: 12px;
  --radius-lg: 18px;

  --shadow: 0 12px 30px rgba(0,0,0,.10);

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 36px;
  --space-6: 56px;
  --space-7: 80px;
}
/* ECLORA — Hero layout */
.eclora-hero__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-6);
  align-items: center;
}

.eclora-hero__media{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: var(--surface);
}

.eclora-hero__media img{
  display:block;
  width:100%;
  height:auto;
}

@media (max-width: 900px){
  .eclora-hero__grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   ECLORA — Hero
========================================================= */

.eclora-hero__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-6);
  align-items: center;
}

.eclora-hero__title{
  margin-top: var(--space-2);
}

.eclora-hero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.eclora-hero__media{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: var(--surface);
}

.eclora-hero__media img{
  display:block;
  width:100%;
  height:auto;
}

.eclora-hero__placeholder{
  padding: 48px;
  border: 1px dashed rgba(30,30,30,.18);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.eclora-hero__placeholder p{
  margin: 0;
  color: var(--muted);
}

@media (max-width: 900px){
  .eclora-hero__grid{
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
/* =========================================================
   HERO — Centrage vertical élégant
========================================================= */

.eclora-hero__grid{
  min-height: 75vh; /* donne de la présence */
}

.eclora-hero__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: var(--space-5);
}

.eclora-hero__title{
  margin-bottom: var(--space-3);
}

.eclora-hero__text{
  margin-bottom: var(--space-4);
}

.eclora-hero__actions{
  margin-top: var(--space-2);
}
/* =========================================================
   HERO — Image plus grande & immersive
========================================================= */

/* On donne plus de place à l'image */
.eclora-hero__grid{
  grid-template-columns: 1fr 1.2fr; /* image plus large */
  min-height: 85vh; /* plus de présence */
}

/* Image prend toute la hauteur */
.eclora-hero__media{
  height: 100%;
}

/* Image remplit le bloc */
.eclora-hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* remplissage élégant */
}

/* Mobile */
@media (max-width: 900px){
  .eclora-hero__grid{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .eclora-hero__media{
    height: auto;
  }

  .eclora-hero__media img{
    height: auto;
  }
}
/* HERO — Bouton spacing élégant */
.eclora-hero__actions{
  margin-top: 28px;
}

.eclora-btn{
  padding: 16px 26px;
  font-size: 15px;
}
/* =========================================================
   HERO — Bouton luxe signature
========================================================= */

.eclora-btn--primary{
  background: var(--accent);
  color: #fff;
  padding: 16px 28px;
  font-size: 15px;
  letter-spacing: 0.03em;
  border-radius: 999px; /* effet capsule premium */
  box-shadow: 0 8px 20px rgba(162, 103, 90, .25);
  transition: all .25s ease;
}

.eclora-btn--primary:hover{
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(162, 103, 90, .35);
}

/* =========================================================
   HERO — Fix bouton "blanchi" (override thème)
========================================================= */

.eclora-hero__actions .eclora-btn--primary{
  background: var(--accent) !important;
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  border-color: transparent !important;
  pointer-events: auto !important;
}

.eclora-hero__actions .eclora-btn--primary:hover{
  background: var(--accent-hover) !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(162, 103, 90, .35);
}
/* FORCE bouton hero (Balance override) */
.eclora-hero__actions a.eclora-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 28px !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  text-decoration: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.eclora-hero__actions a.eclora-btn--primary{
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 22px rgba(162, 103, 90, .28) !important;
}

.eclora-hero__actions a.eclora-btn--primary:hover{
  background: var(--accent-hover) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(162, 103, 90, .35) !important;
}
.eclora-hero__actions a.eclora-btn--primary{ background: red !important; }
/* HERO — bouton béton (pour battre Balance) */
.eclora-hero__actions a.eclora-btn--primary{
  background: #A2675A !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  opacity: 1 !important;
  filter: none !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(162, 103, 90, .28) !important;
  border-radius: 999px !important;
  padding: 16px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.eclora-hero__actions a.eclora-btn--primary:hover{
  background: #8C5448 !important;
  color: #ffffff !important;
}
.eclora-hero__actions{
  margin-top: 32px;
}
.eclora-hero__actions .eclora-btn--primary{
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(162, 103, 90, .28);
}
.eclora-hero__actions .eclora-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(162, 103, 90, .35);
}
.eclora-hero__grid{
  grid-template-columns: 1fr 1.2fr;
  min-height: 85vh;
}
.eclora-hero__media img{
  height: 100%;
  object-fit: cover;
}
/* HERO — overrides forts (Balance-proof) */
section.eclora-section .eclora-hero__actions{
  margin-top: 32px !important;
}

section.eclora-section .eclora-hero__actions .eclora-btn--primary{
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(162, 103, 90, .28) !important;
}

section.eclora-section .eclora-hero__actions .eclora-btn--primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(162, 103, 90, .35) !important;
}

/* Image plus grande */
section.eclora-section .eclora-hero__grid{
  grid-template-columns: 1fr 1.2fr !important;
  min-height: 85vh !important;
}

/* Important pour que l'image puisse prendre 100% de la hauteur */
section.eclora-section .eclora-hero__media{
  height: 100% !important;
}


/* =========================================================
   ECLORA HERO — image plus grande + moins de vide
   (overrides forts et structurants)
========================================================= */

/* 1) La grille donne plus de place à l'image */
.eclora-hero__grid{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) !important; /* image + large */
  align-items: center !important;
  gap: 48px !important;
}

/* 2) On impose une vraie hauteur à la zone image */
.eclora-hero__media{
  min-height: 520px !important;
  height: 100% !important;
}

/* 3) L'image remplit la zone (effet cover premium) */
.eclora-hero__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 4) Encore plus grand sur grands écrans */
@media (min-width: 1200px){
  .eclora-hero__media{ min-height: 620px !important; }
}

/* 5) Mobile : on revient en pile */
@media (max-width: 900px){
  .eclora-hero__grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .eclora-hero__media{
    min-height: 320px !important;
  }
}
/* =========================================================
   HERO — Image plus large, moins haute, plus immersive
========================================================= */

/* On ajuste la grille */
.eclora-hero__grid{
  grid-template-columns: 0.9fr 1.5fr !important; /* image plus large */
  align-items: center !important;
}

/* On réduit la hauteur */
.eclora-hero__media{
  min-height: 480px !important; /* moins haute qu'avant */
}

/* Image couvre proprement */
.eclora-hero__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* On permet à l'image de "déborder" légèrement vers la droite */
.eclora-hero__media{
  margin-right: -40px; /* effet plus large */
}
/* =========================================================
   HERO — Image full width côté gauche
========================================================= */

/* On enlève la limite du container pour la grille */
.eclora-hero__grid{
  grid-template-columns: 1fr 1.4fr !important;
}

/* On permet à l'image de sortir du container */
.eclora-hero__media{
  position: relative;
  left: -100px; /* déplace vers la gauche */
  width: calc(100% + 80px);
  min-height: 420px;
}

/* Image couvre bien */
.eclora-hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* HERO — version compacte et élégante */
.eclora-hero__media{
  min-height: clamp(340px, 40vh, 420px) !important;
}
.eclora-hero__media{
  background: transparent !important;
  border: none !important;
}
/* HERO — Compact & élégant (rééquilibrage) */
.eclora-hero__grid{
  grid-template-columns: 1.05fr 0.95fr !important; /* plus de place au texte */
  gap: 32px !important;
}

.eclora-hero__media{
  min-height: clamp(300px, 34vh, 380px) !important; /* moins haut */
}
/* HERO — image intégrée (pas de carte) */
.eclora-hero__media{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-lg) !important; /* tu peux garder l'arrondi */
}
/* =========================================================
   ECLORA — HERO COMPACT (moins haut, plus élégant)
   À coller tout en bas de custom.css
========================================================= */

/* 1) Section moins haute (padding vertical réduit) */
.eclora-section{
  padding: clamp(36px, 5vw, 56px) 0 !important;
}

/* 2) Grille plus équilibrée + moins d’espace */
.eclora-hero__grid{
  grid-template-columns: 1.05fr 0.95fr !important; /* texte légèrement prioritaire */
  gap: 28px !important;
  align-items: center !important;
}

/* 3) Titre plus compact (moins “affiche”) */
.eclora-hero__title{
  font-size: clamp(36px, 4.2vw, 56px) !important;
  line-height: 1.05 !important;
  margin-bottom: 14px !important;
}

/* 4) Texte secondaire plus serré */
.eclora-hero__text{
  margin-bottom: 0 !important;
  max-width: 42ch; /* effet éditorial, moins de lignes */
}

/* 5) Bouton placé correctement, sans descendre trop bas */
.eclora-hero__actions{
  margin-top: 22px !important;
}

/* 6) Image moins haute */
.eclora-hero__media{
  min-height: clamp(280px, 32vh, 360px) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

/* 7) L’image remplit bien sans grossir la hauteur */
.eclora-hero__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Mobile */
@media (max-width: 900px){
  .eclora-hero__grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .eclora-hero__media{
    min-height: 240px !important;
  }
}
/* =========================================================
   ECLORA HERO — COMPACT GARANTI (Balance-proof)
========================================================= */

/* Padding uniquement sur le hero, pas sur tout le site */
.eclora-hero{
  padding: clamp(28px, 4vw, 48px) 0 !important;
}

/* Grille plus compacte + moins d’espace */
.eclora-hero .eclora-hero__grid{
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 24px !important;
  align-items: center !important;
}

/* Titre plus petit = moins de hauteur globale */
.eclora-hero .eclora-hero__title{
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.02 !important;
  margin: 0 0 12px 0 !important;
}

/* Sous-texte plus compact */
.eclora-hero .eclora-hero__text{
  margin: 0 !important;
  max-width: 42ch !important;
}

/* Bouton rapproché */
.eclora-hero .eclora-hero__actions{
  margin-top: 18px !important;
}

/* Image moins haute */
.eclora-hero .eclora-hero__media{
  min-height: clamp(260px, 30vh, 340px) !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg) !important;
}

/* Image cover sans “gonfler” */
.eclora-hero .eclora-hero__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Mobile */
@media (max-width: 900px){
  .eclora-hero .eclora-hero__grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .eclora-hero .eclora-hero__media{
    min-height: 220px !important;
  }
}
/* =========================================================
   ECLORA HERO — Image moins dominante (compact premium)
========================================================= */

/* Image moins large : on favorise le texte */
.eclora-hero .eclora-hero__grid{
  grid-template-columns: 1.25fr 0.75fr !important; /* texte 62% / image 38% */
  gap: 22px !important;
}

/* Image moins haute */
.eclora-hero .eclora-hero__media{
  min-height: clamp(220px, 26vh, 300px) !important;
}

/* Option : limite la largeur visuelle de l’image sans casser la grille */
.eclora-hero .eclora-hero__media{
  max-width: 520px !important;
  justify-self: end !important; /* colle l’image à droite */
}

/* Mobile ok */
@media (max-width: 900px){
  .eclora-hero .eclora-hero__media{
    max-width: 100% !important;
    justify-self: stretch !important;
    min-height: 220px !important;
  }
}/* =========================================================
   ECLORA HERO — Image moins dominante (compact premium)
========================================================= */

/* Image moins large : on favorise le texte */
.eclora-hero .eclora-hero__grid{
  grid-template-columns: 1.25fr 0.75fr !important; /* texte 62% / image 38% */
  gap: 22px !important;
}

/* Image moins haute */
.eclora-hero .eclora-hero__media{
  min-height: clamp(220px, 26vh, 300px) !important;
}

/* Option : limite la largeur visuelle de l’image sans casser la grille */
.eclora-hero .eclora-hero__media{
  max-width: 520px !important;
  justify-self: end !important; /* colle l’image à droite */
}

/* Mobile ok */
@media (max-width: 900px){
  .eclora-hero .eclora-hero__media{
    max-width: 100% !important;
    justify-self: stretch !important;
    min-height: 220px !important;
  }
}
/* =========================================================
   ECLORA HERO — Version plus compacte
========================================================= */

/* 1️⃣ Réduit l'espace au-dessus et en-dessous */
.eclora-hero{
  padding: clamp(20px, 3vw, 36px) 0 !important;
}

/* 2️⃣ Réduit encore la hauteur de l'image */
.eclora-hero .eclora-hero__media{
  min-height: clamp(180px, 22vh, 240px) !important;
}

/* 3️⃣ Titre légèrement plus compact */
.eclora-hero .eclora-hero__title{
  font-size: clamp(30px, 3.6vw, 48px) !important;
  line-height: 1.05 !important;
}

/* 4️⃣ Espace bouton plus serré */
.eclora-hero .eclora-hero__actions{
  margin-top: 16px !important;
}
.eclora-hero__title{
  max-width: 18ch;
}
.eclora-hero{
  padding-top: 24px !important;
}
.eclora-hero__media{
  margin-top: 12px;
}
/* =========================================================
   HERO — équilibrage texte + bouton (pro, premium)
========================================================= */

/* Le contenu texte devient un bloc éditorial (moins "flottant") */
.eclora-hero .eclora-hero__content{
  max-width: 520px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* équilibre vertical */
  padding-top: 8px !important;
}

/* Titre : un peu moins large, mieux "cadré" */
.eclora-hero .eclora-hero__title{
  max-width: 20ch !important;
  margin-bottom: 14px !important;
}

/* Sous-texte : largeur contrôlée + respiration */
.eclora-hero .eclora-hero__text{
  max-width: 42ch !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Bouton : position stable sous le texte */
.eclora-hero .eclora-hero__actions{
  margin-top: 22px !important;
}

/* Bonus : le bouton ne doit jamais paraître "tout petit" face au titre */
.eclora-hero .eclora-hero__actions .eclora-btn--primary{
  min-width: 220px !important;
  justify-content: center !important;
}
.eclora-hero .eclora-hero__content{
  transform: translateY(-10px) !important;
}
/* =========================================================
   ECLORA HERO — Premium doux (équilibré + pro)
========================================================= */

/* Hero plus compact */
.eclora-hero{
  padding: clamp(18px, 3vw, 36px) 0 !important;
}

/* Grille : texte prioritaire, image plus discrète */
.eclora-hero .eclora-hero__grid{
  grid-template-columns: 1.25fr 0.75fr !important;
  gap: 24px !important;
  align-items: center !important;
}

/* Bloc gauche cadré (effet composition) */
.eclora-hero .eclora-hero__content{
  max-width: 540px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Kicker : luxe discret */
.eclora-hero .eclora-kicker{
  margin-bottom: 12px !important;
  letter-spacing: .14em !important;
  opacity: .9;
}

/* Titre : moins large, plus premium */
.eclora-hero .eclora-hero__title{
  max-width: 20ch !important;
  font-size: clamp(32px, 3.8vw, 52px) !important;
  line-height: 1.06 !important;
  margin: 0 0 12px 0 !important;
}

/* Texte : doux et lisible */
.eclora-hero .eclora-hero__text{
  max-width: 46ch !important;
  margin: 0 !important;
}

/* Bouton : ancré, pas "perdu" */
.eclora-hero .eclora-hero__actions{
  margin-top: 20px !important;
}
.eclora-hero .eclora-hero__actions .eclora-btn--primary{
  min-width: 220px !important;
  justify-content: center !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(162, 103, 90, .26) !important;
}
.eclora-hero .eclora-hero__actions .eclora-btn--primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(162, 103, 90, .34) !important;
}

/* Image : moins haute + cadrage intentionnel */
.eclora-hero .eclora-hero__media{
  max-width: 520px !important;
  justify-self: end !important;
  min-height: clamp(200px, 24vh, 280px) !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.eclora-hero .eclora-hero__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 60% 50% !important; /* recadrage doux */
  display: block !important;
}

/* Mobile */
@media (max-width: 900px){
  .eclora-hero .eclora-hero__grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .eclora-hero .eclora-hero__media{
    max-width: 100% !important;
    justify-self: stretch !important;
    min-height: 220px !important;
  }
  .eclora-hero .eclora-hero__actions .eclora-btn--primary{
    min-width: 200px !important;
  }
}
.eclora-hero .eclora-hero__content::before{
  content:"";
  width: 64px;
  height: 1px;
  background: var(--line);
  margin-top: 18px;
}
.eclora-hero .eclora-hero__actions{ margin-top: 18px !important; }
/* =========================================================
   HERO — Réduction espace entre texte et image
========================================================= */

/* Réduit l'espace entre les deux colonnes */
.eclora-hero .eclora-hero__grid{
  gap: 12px !important; /* avant 24px ou plus */
}

/* L'image ne doit plus être poussée trop à droite */
.eclora-hero .eclora-hero__media{
  justify-self: start !important;
  max-width: 480px !important; /* ajuste si nécessaire */
}

/* Option : si le texte est trop étroit */
.eclora-hero .eclora-hero__content{
  max-width: 520px !important;
}
/* =========================================================
   HERO — Décaler uniquement le texte vers l'image
========================================================= */

/* On remet l'image comme avant (au cas où) */
.eclora-hero .eclora-hero__media{
  justify-self: end !important;
}

/* On pousse le bloc texte vers la droite */
.eclora-hero .eclora-hero__content{
  transform: translateX(32px) !important;  /* ajuste: 16 / 24 / 32 */
}

.eclora-hero .eclora-hero__content{
  padding-left: 24px !important;
}
/* =========================================================
   ECLORA — Palette & Hero Premium Doux
========================================================= */

/* 🎨 Nouvelles couleurs globales */
:root{
  --bg: #F5F2EE;
  --text: #1A1A1A;
  --muted: #6B6764;
  --accent-hover: #7E473E;
}

/* Fond global */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Texte principal */
h1, h2, h3, h4{
  color: var(--text) !important;
}

/* Texte secondaire */
p, .eclora-hero__text{
  color: var(--muted) !important;
}

/* 🖋 HERO — Titre plus grand et plus éditorial */
.eclora-hero .eclora-hero__title{
  font-size: clamp(42px, 4.5vw, 74px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  max-width: 18ch !important; /* force visuellement 2-3 lignes élégantes */
}

/* Bouton hover */
.eclora-hero .eclora-btn--primary:hover{
  background: var(--accent-hover) !important;
  color: #ffffff !important;
}
/* =========================================
   ECLORA — RE-FONTE PREMIUM MODERNE (HOME)
   Theme: Balance
   Ciblage : section Eclora — Hero (notre section)
   À coller TOUT EN BAS de assets/custom.css
========================================= */

/* --- Palette / base (site) --- */
:root{
  --e-bg: #F5F2EE;         /* fond blanc chaud */
  --e-text: #1A1A1A;       /* noir doux */
  --e-muted: #6B6764;      /* gris taupe */
  --e-accent: #9F5F54;     /* terracotta profond */
  --e-accent-hover:#7E473E;
  --e-radius: 14px;
}

/* Base page (léger, sans casser Balance) */
body{
  background: var(--e-bg) !important;
  color: var(--e-text) !important;
}

/* Optionnel : si tu veux aussi que nos tokens "var(--text)" etc suivent */
:root{
  --bg: var(--e-bg);
  --text: var(--e-text);
  --muted: var(--e-muted);
  --accent: var(--e-accent);
  --accent-hover: var(--e-accent-hover);
  --radius: var(--e-radius);
}

/* =========================================
   HOME — HERO (Section Eclora — Hero)
   (pas la bannière native Balance)
========================================= */

/* Section : padding compact + centrage vertical */
.template-index .eclora-hero{
  padding-top: clamp(20px, 3.5vw, 44px) !important;
  padding-bottom: clamp(20px, 3.5vw, 44px) !important;
  display: flex !important;
  align-items: center !important;
}

/* Grille : texte prioritaire / image secondaire */
.template-index .eclora-hero .eclora-hero__grid{
  width: 100%;
  grid-template-columns: 1.25fr 0.75fr !important;
  gap: 24px !important;
  align-items: center !important;
}

/* Colonne texte : cadrage + respiration */
.template-index .eclora-hero .eclora-hero__content{
  max-width: 560px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* TITRE (plus grand, prévu pour 3 lignes) */
.template-index .eclora-hero .eclora-hero__title{
  color: var(--e-text) !important;
  font-size: clamp(42px, 4.2vw, 74px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.6px !important;
  margin: 0 0 18px 0 !important;
  max-width: 12ch !important; /* force 2-3 lignes selon ton texte */
}

/* Sous-texte */
.template-index .eclora-hero .eclora-hero__text{
  color: var(--e-muted) !important;
  font-size: clamp(16px, 1.35vw, 20px) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 32ch !important;
  opacity: 1 !important;
}

/* Boutons : on cible nos classes pour éviter de styliser tous les boutons du site */
.template-index .eclora-hero .eclora-hero__actions{
  margin-top: 22px !important;
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.template-index .eclora-hero .eclora-hero__actions a.eclora-btn--primary{
  background: var(--e-accent) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  color: #fff !important;
  border-radius: var(--e-radius) !important;
  padding: 14px 26px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.12) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
  text-decoration: none !important;
}

.template-index .eclora-hero .eclora-hero__actions a.eclora-btn--primary:hover{
  background: var(--e-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,0.16) !important;
}

/* (option) Bouton secondaire, si tu l’utilises */
.template-index .eclora-hero .eclora-hero__actions a.eclora-btn--secondary{
  background: transparent !important;
  color: var(--e-text) !important;
  border: 1px solid rgba(26,26,26,.14) !important;
  border-radius: var(--e-radius) !important;
  padding: 14px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
}

/* Image : premium doux (coins arrondis, sans “cadre” visible) */
.template-index .eclora-hero .eclora-hero__media{
  border-radius: 18px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: clamp(200px, 24vh, 280px) !important; /* compact */
  max-width: 520px !important;
  justify-self: end !important;
}

.template-index .eclora-hero .eclora-hero__media img{
  border-radius: 18px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.01) !important;
  display: block !important;
}

/* Responsive mobile */
@media (max-width: 749px){
  .template-index .eclora-hero{
    padding-top: 18px !important;
    padding-bottom: 28px !important;
  }

  .template-index .eclora-hero .eclora-hero__grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .template-index .eclora-hero .eclora-hero__title{
    max-width: 16ch !important;
    font-size: clamp(34px, 8vw, 44px) !important;
  }

  .template-index .eclora-hero .eclora-hero__text{
    max-width: 38ch !important;
    font-size: 16px !important;
  }

  .template-index .eclora-hero .eclora-hero__media{
    max-width: 100% !important;
    justify-self: stretch !important;
    min-height: 220px !important;
  }
}

/* =========================================
   Header (facultatif) — léger, sans casser
========================================= */
.header, .header *{
  letter-spacing: 0.2px;
}
.header a{
  color: var(--e-muted);
}
.header a:hover{
  color: var(--e-text);
}
/* =========================================
   ECLORA HERO — FIX MOBILE (lisible + centré)
========================================= */
@media (max-width: 749px){

  .template-index .eclora-hero{
    padding: 18px 0 26px !important;
    min-height: auto !important;
  }

  .template-index .eclora-hero .eclora-hero__grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .template-index .eclora-hero .eclora-hero__content{
    max-width: 100% !important;
    transform: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .template-index .eclora-hero .eclora-hero__title{
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.08 !important;
    max-width: 16ch !important;
    margin-bottom: 10px !important;
  }

  .template-index .eclora-hero .eclora-hero__text{
    font-size: 18px !important;
    max-width: 38ch !important;
  }

  .template-index .eclora-hero .eclora-hero__actions{
    margin-top: 16px !important;
  }

  .template-index .eclora-hero .eclora-hero__media{
    max-width: 100% !important;
    justify-self: stretch !important;
    min-height: 240px !important;
    margin: 0 16px !important; /* joli alignement avec le texte */
  }
}
/* =========================================================
   ECLORA — HERO (sections/eclora-hero.liquid)
   Style premium doux / artisanal / moderne
   ========================================================= */

/* 0) Variables (si déjà dans ton theme, tu peux enlever) */
:root{
  --e-bg: #F5F2EE;
  --e-text: #1A1A1A;
  --e-muted: #6B6764;
  --e-accent: #9F5F54;
  --e-accent-hover: #7E473E;

  --e-radius-soft: 18px;
  --e-radius-pill: 999px;

  --e-shadow-soft: 0 10px 40px rgba(0,0,0,.05);
  --e-shadow-soft-2: 0 14px 55px rgba(0,0,0,.07);

  --e-container: 1200px; /* ajustable */
}

/* 1) Section background */
.eclora-section.eclora-hero{
  color: var(--e-text);
  background: transparent;
}

/* Fond signature si warm_bg */
.eclora-section.eclora-hero.eclora-section--warm{
  background: var(--e-bg);
}

/* 2) Container (si ton thème a déjà .eclora-container, garde juste ce qui manque) */
.eclora-hero .eclora-container{
  max-width: var(--e-container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 78px) clamp(18px, 4vw, 56px);
}

/* 3) Grid desktop : image légèrement dominante */
.eclora-hero__grid{
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(18px, 3.2vw, 44px);
  align-items: center;
}

/* 4) Colonne texte */
.eclora-hero__content{
  max-width: 560px;
}

/* Kicker */
.eclora-kicker{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--e-accent);
  margin: 0 0 12px 0;
}

/* Titre (si tu utilises newline_to_br plus tard, ça marchera pareil) */
.eclora-hero__title{
  margin: 0 0 14px 0;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Texte */
.eclora-hero__text{
  margin: 0 0 22px 0;
  font-size: clamp(20px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--e-muted);
  max-width: 52ch;
}

/* 5) Actions */
.eclora-hero__actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 6) Boutons (sans casser ton style theme si déjà défini) */
.eclora-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: var(--e-radius-pill);
  padding: 13px 26px;
  font-size: 14px;
  letter-spacing: .02em;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}

/* Primary */
.eclora-btn--primary{
  background: var(--e-accent);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 10px 26px rgba(159,95,84,.22);
}
.eclora-btn--primary:hover{
  background: var(--e-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(126,71,62,.26);
}
.eclora-btn--primary:active{ transform: translateY(0); }

/* Secondary (premium discret) */
.eclora-btn--secondary{
  background: transparent;
  color: var(--e-text);
  border: 1px solid rgba(26,26,26,.18);
}
.eclora-btn--secondary:hover{
  border-color: rgba(26,26,26,.32);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.eclora-btn--secondary:active{ transform: translateY(0); }

/* Focus accessible */
.eclora-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(159,95,84,.18), 0 16px 34px rgba(0,0,0,.08);
}

/* 7) Media / Image */
.eclora-hero__media{
  position: relative;
}

/* Shopify image_tag rend souvent un <img> direct.
   On stylise img à l’intérieur de la zone media. */
.eclora-hero__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--e-radius-soft);
  box-shadow: var(--e-shadow-soft);
  object-fit: cover;

  /* effet éditorial premium */
  transform: translateY(18px);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* Hover image subtil (desktop) */
@media (hover:hover) and (pointer:fine){
  .eclora-hero__media img:hover{
    transform: translateY(14px);
    box-shadow: var(--e-shadow-soft-2);
  }
}

/* Placeholder si pas d’image */
.eclora-hero__placeholder{
  border-radius: var(--e-radius-soft);
  background: rgba(26,26,26,.03);
  border: 1px dashed rgba(26,26,26,.12);
  padding: 22px;
  color: var(--e-muted);
}

/* 8) Responsive mobile : image d’abord, lisibilité, spacing */
@media (max-width: 990px){
  .eclora-hero__grid{
    grid-template-columns: 1fr;
    align-items: start;
  }

  /* Met l’image au-dessus */
  .eclora-hero__media{ order: -1; }

  .eclora-hero__content{
    max-width: 100%;
  }

  .eclora-hero__title{
    margin-top: 14px;
  }

  .eclora-hero__media img{
    transform: none;
    border-radius: 16px;
  }

  .eclora-hero__actions{
    gap: 10px;
  }

  /* Boutons confortables sans full-width */
  .eclora-btn{
    padding: 14px 28px;
  }
}

/* 9) Très petit mobile */
@media (max-width: 420px){
  .eclora-hero .eclora-container{
    padding: 34px 16px;
  }
}

/* 10) Réduction de mouvement */
@media (prefers-reduced-motion: reduce){
  .eclora-hero *{
    transition: none !important;
    animation: none !important;
  }
}
.eclora-hero__title{
  max-width: 18ch;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
/* Réduction espace haut uniquement pour le hero */
.eclora-section.eclora-hero .eclora-container{
  padding-top: clamp(20px, 4vw, 48px); /* au lieu de 70-80px */
}
.eclora-section.eclora-hero .eclora-container{
  padding-top: 1px;
}
.eclora-section.eclora-hero{
  margin-top: 0;
}
.template-index .eclora-section.eclora-hero{
  margin-top: -20px;
}
/* Ajuste cette valeur si besoin (souvent 72–96px sur Balance) */
:root{
  --e-header-h: 84px;
}

/* Hero plus près du haut + compensation sticky header */
.eclora-section.eclora-hero .eclora-container{
  padding-top: calc(clamp(18px, 3vw, 34px) + var(--e-header-h));
}
.eclora-section.eclora-hero .eclora-container{
  padding-top: 24px;
}
/* =========================
   ECLORA — Kicker Premium
   ========================= */

.eclora-kicker{
  display: inline-block;

  font-size: 12px;                 /* très élégant */
  font-weight: 500;                /* pas trop fin pour éviter le fade */
  letter-spacing: 0.16em;          /* respiration couture */
  text-transform: uppercase;

  color: #9F5F54;                  /* terracotta signature */
  margin-bottom: 14px;

  position: relative;
}
/* ECLORA — réglage fin du hero sur mobile */
@media (max-width: 600px){

  /* Un peu plus d'espace utile + look éditorial */
  .eclora-hero__content{
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  /* Kicker plus “couture” (moins espacé sur petit écran) */
  .eclora-kicker{
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 12px;
  }

  /* Titre : moins “colonne”, plus lisible */
  .eclora-hero__title{
    font-size: clamp(34px, 9vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.015em;

    /* clé : on autorise un titre plus large */
    max-width: 12ch;        /* augmente/diminue: 11–14ch selon ton goût */
    margin-left: auto;
    margin-right: auto;

    /* évite les casses bizarres */
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;

    /* si supporté, équilibre les retours (super premium) */
    text-wrap: balance;
  }

  .eclora-hero__text{
    font-size: 18px;
    line-height: 1.65;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ECLORA — s'assurer que l'image du hero apparaît sur mobile */
@media (max-width: 990px){
  .eclora-hero__media{
    display: block !important;     /* si le thème la cache */
    order: -1;
    margin-bottom: 18px;
  }

  .eclora-hero__media img{
    display: block !important;     /* si une règle la remet en inline/none */
    width: 100%;
    height: auto;

    /* on évite une image trop petite ou écrasée */
    max-height: 52vh;
    object-fit: cover;

    border-radius: 16px;
  }
}
/* ECLORA — Mobile: image au-dessus + pas de débordement à gauche */
@media (max-width: 990px){

  /* Force la pile verticale même si le thème override le grid */
  .eclora-hero__grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  /* Image en premier */
  .eclora-hero__media{
    order: -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;

    /* évite tout “clip”/comportement bizarre */
    overflow: visible !important;
  }

  /* L'img doit suivre le conteneur, pas la fenêtre */
  .eclora-hero__media img{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    transform: none !important;      /* annule le translateY desktop */
    margin: 0 !important;
    object-fit: cover;
    border-radius: 16px;
  }
}
/* ECLORA — Mobile: image centrée + hauteur maîtrisée */
@media (max-width: 990px){
  .eclora-hero__media img{
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;   /* ajuste: 3/4 si tu veux encore moins haut */
    object-fit: cover;
    object-position: center;
  }
}
/* ECLORA — Mobile: réduire la hauteur de l'image (fiable) */
@media (max-width: 990px){
  .eclora-hero__media img{
    width: 100% !important;
    height: clamp(260px, 46vh, 420px) !important; /* ajuste si besoin */
    object-fit: cover !important;
    object-position: center !important;
  }
}
/* ECLORA — Mobile: kicker juste sous l'image + texte centré */
@media (max-width: 990px){

  /* Si ton grid a un gap trop grand, on le réduit */
  .eclora-hero__grid{
    gap: 12px !important;
  }

  /* On colle l'image au contenu */
  .eclora-hero__media{
    margin-bottom: 6px !important;
  }

  /* On centre le contenu et on évite l'effet "bloc bas" */
  .eclora-hero__content{
    margin-top: 0 !important;
    padding-top: 0 !important;
    text-align: center;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Kicker juste sous l'image */
  .eclora-kicker{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  /* Supprime le margin-top que tu avais peut-être mis sur le titre */
  .eclora-hero__title{
    margin-top: 0 !important;
  }
}
@media (max-width: 990px){
  .eclora-hero .eclora-container{
    padding-top: 26px !important; /* ajuste: 18–32px */
  }
}
/* ECLORA — Mobile : image puis kicker collé + contenu centré + hero remonté */
@media (max-width: 990px){

  /* Remonter la section (souvent le thème ajoute trop de padding top) */
  .eclora-section.eclora-hero .eclora-container{
    padding-top: 22px !important;   /* ajuste 16–30px */
    padding-bottom: 34px !important;
  }

  /* Forcer la pile verticale */
  .eclora-section.eclora-hero .eclora-hero__grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;           /* espace image -> kicker */
    align-items: center !important;
  }

  /* Image : pas de décalage, et marge mini sous l'image */
  .eclora-section.eclora-hero .eclora-hero__media{
    order: -1 !important;
    width: 100% !important;
    margin: 0 0 2px 0 !important;
  }

  .eclora-section.eclora-hero .eclora-hero__media img{
    transform: none !important;     /* important si tu as un translateY desktop */
    display: block !important;
    margin: 0 auto !important;
  }

  /* Texte : centré et pas "bas" */
  .eclora-section.eclora-hero .eclora-hero__content{
    width: 100% !important;
    max-width: 40ch !important;
    margin: 0 auto !important;
    padding: 20 !important;
    text-align: center !important;
  }

  /* Kicker collé juste sous l'image */
  .eclora-section.eclora-hero .eclora-kicker{
    margin: -25px 0 10px 0 !important;  /* <-- kicker juste en dessous */
  }

  /* Nettoyage des marges qui peuvent "descendre" le bloc */
  .eclora-section.eclora-hero .eclora-hero__title{
    margin-top: 0 !important;
  }
  .eclora-section.eclora-hero .eclora-hero__text{
    margin-top: 0 !important;
  }
}
@media (max-width: 990px){

  .eclora-section.eclora-hero .eclora-hero__content{
    transform: translateX(-6px); /* ajuste -6px à -16px selon rendu */
  }

}
body { outline: 6px solid hotpink !important; }
/* =========================
   ECLORA — HERO (final)
   Cible: section.eclora-hero
   ========================= */

section.eclora-hero{
  background: transparent;
  padding-top: clamp(28px, 6vw, 72px);
  padding-bottom: clamp(28px, 6vw, 72px);
}

section.eclora-hero .eclora-container{
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Grille: contenu + image */
section.eclora-hero .eclora-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(18px, 4vw, 56px);
  align-items: center;
}

/* Contenu */
section.eclora-hero .eclora-hero__content{
  width: 100% !important;
  max-width: 620px !important;   /* reprend la main sur ton 40ch */
  margin: 0 !important;
  padding: 0 !important;          /* reprend la main sur padding:20!important */
  text-align: left !important;    /* reprend la main sur center!important */
}

/* Titres et texte (si tu as ces éléments) */
section.eclora-hero .eclora-hero__content h1,
section.eclora-hero .eclora-hero__content .h1{
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

section.eclora-hero .eclora-hero__content p{
  margin: 0 0 18px 0;
  color: var(--eclora-gray, #6B6764);
  line-height: 1.55;
}

/* CTA capsule */
section.eclora-hero .eclora-hero__content .button,
section.eclora-hero .eclora-hero__content a.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  background: var(--eclora-terracotta, #9F5F54) !important;
  border: 1px solid rgba(159, 95, 84, 0.9) !important;
  color: #F5F2EE !important;
  box-shadow: none !important;
  text-decoration: none;
}

section.eclora-hero .eclora-hero__content .button:hover,
section.eclora-hero .eclora-hero__content a.button:hover{
  background: var(--eclora-black, #1A1A1A) !important;
  border-color: var(--eclora-black, #1A1A1A) !important;
}

/* Media (image) */
section.eclora-hero .eclora-hero__media{
  width: 100%;
}

section.eclora-hero .eclora-hero__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

/* Responsive */
@media (max-width: 990px){
  section.eclora-hero .eclora-hero__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  section.eclora-hero .eclora-hero__content{
    max-width: 42rem !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  section.eclora-hero .eclora-hero__content .button{
    margin: 0 auto;
  }
}
/* =========================
   ECLORA — HERO (final)
   Cible: section.eclora-hero
   ========================= */

section.eclora-hero{
  background: transparent;
  padding-top: clamp(28px, 6vw, 72px);
  padding-bottom: clamp(28px, 6vw, 72px);
}

section.eclora-hero .eclora-container{
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Grille: contenu + image */
section.eclora-hero .eclora-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(18px, 4vw, 56px);
  align-items: center;
}

/* Contenu */
section.eclora-hero .eclora-hero__content{
  width: 100% !important;
  max-width: 620px !important;   /* reprend la main sur ton 40ch */
  margin: 0 !important;
  padding: 0 !important;          /* reprend la main sur padding:20!important */
  text-align: left !important;    /* reprend la main sur center!important */
}

/* Titres et texte (si tu as ces éléments) */
section.eclora-hero .eclora-hero__content h1,
section.eclora-hero .eclora-hero__content .h1{
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

section.eclora-hero .eclora-hero__content p{
  margin: 0 0 18px 0;
  color: var(--eclora-gray, #6B6764);
  line-height: 1.55;
}

/* CTA capsule */
section.eclora-hero .eclora-hero__content .button,
section.eclora-hero .eclora-hero__content a.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  background: var(--eclora-terracotta, #9F5F54) !important;
  border: 1px solid rgba(159, 95, 84, 0.9) !important;
  color: #F5F2EE !important;
  box-shadow: none !important;
  text-decoration: none;
}

section.eclora-hero .eclora-hero__content .button:hover,
section.eclora-hero .eclora-hero__content a.button:hover{
  background: var(--eclora-black, #1A1A1A) !important;
  border-color: var(--eclora-black, #1A1A1A) !important;
}

/* Media (image) */
section.eclora-hero .eclora-hero__media{
  width: 100%;
}

section.eclora-hero .eclora-hero__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

/* Responsive */
@media (max-width: 990px){
  section.eclora-hero .eclora-hero__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  section.eclora-hero .eclora-hero__content{
    max-width: 42rem !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  section.eclora-hero .eclora-hero__content .button{
    margin: 0 auto;
  }
}
/* =========================================================
   ECLORA — Design System V2 (conversion + premium)
   Fond global : blanc cassé très clair
   Touches : beige chaud en sections / surfaces
   Boutons : B (légèrement arrondis)
========================================================= */

/* Fonts (Shopify-safe via Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600&display=swap');

/* 1) TOKENS */
:root{
  /* Backgrounds */
  --bg: #FBFAF8;          /* blanc cassé très clair (global) */
  --surface: #FFFFFF;     /* cartes/blocs */
  --surface-warm: #F6F2ED;/* beige chaud (sections signature) */
  --surface-2: #F8F6F2;   /* variante douce */

  /* Text */
  --text: #1E1E1E;
  --muted: #5E5A57;
  --line: rgba(30, 30, 30, .10);

  /* Accent */
  --accent: #A2675A;
  --accent-hover: #8C5448;

  /* Typography */
  --font-display: "Playfair Display", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --h1: clamp(40px, 5vw, 72px);
  --h2: clamp(28px, 3vw, 44px);
  --h3: clamp(20px, 2vw, 28px);
  --body: 16px;
  --small: 13px;

  /* Spacing */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 36px;
  --space-6: 56px;
  --space-7: 80px;

  /* Radius (B) */
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 18px;

  /* Shadows */
  --shadow-sm: 0 8px 22px rgba(0,0,0,.08);
  --shadow: 0 12px 30px rgba(0,0,0,.10);

  /* Layout */
  --container: 1180px;
}

/* 2) BASE */
html, body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body);
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
}
*{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--accent); }

p{
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 var(--space-3) 0;
}

small, .eclora-small{
  font-size: var(--small);
  color: var(--muted);
}

/* 3) TYPO */
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 var(--space-2) 0;
}
h1{ font-size: var(--h1); line-height: 1.05; }
h2{ font-size: var(--h2); line-height: 1.12; }
h3{ font-size: var(--h3); line-height: 1.2; }

.eclora-kicker{
  font-size: var(--small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 4) LAYOUT HELPERS */
.eclora-container{
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.eclora-section{
  padding: var(--space-7) 0;
}

/* Section signature beige */
.eclora-section--warm{
  background: var(--surface-warm);
}

/* Surfaces */
.eclora-surface{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.eclora-divider{
  height: 1px;
  background: var(--line);
  width: 100%;
}

/* 5) BUTTONS (signature) */
.eclora-btn,
.button,
.shopify-payment-button__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  cursor: pointer;
}

/* Primary */
.eclora-btn--primary,
.button:not(.button--secondary):not(.button--tertiary){
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.eclora-btn--primary:hover,
.button:not(.button--secondary):not(.button--tertiary):hover{
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* Secondary */
.eclora-btn--secondary,
.button--secondary{
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.eclora-btn--secondary:hover,
.button--secondary:hover{
  border-color: rgba(30,30,30,.18);
  transform: translateY(-1px);
}

/* 6) CARDS */
.eclora-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.eclora-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(30,30,30,.14);
}
.eclora-card__body{ padding: var(--space-4); }

/* 7) FORMS */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], textarea, select{
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(162, 103, 90, .55);
  box-shadow: 0 0 0 4px rgba(162, 103, 90, .12);
}

/* 8) SHOPIFY OVERRIDES (doux) */
.product__title, .collection-hero__title, .page-title{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.badge{
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

/* 9) RESPONSIVE */
@media (max-width: 900px){
  .eclora-section{ padding: var(--space-6) 0; }
}

/* 10) Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}
/* =========================================================
   ECLORA — Hero
========================================================= */

.eclora-hero__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-6);
  align-items: center;
}

.eclora-hero__title{
  margin-top: var(--space-2);
}

.eclora-hero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.eclora-hero__media{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: var(--surface);
}

.eclora-hero__media img{
  display:block;
  width:100%;
  height:auto;
}

.eclora-hero__placeholder{
  padding: 48px;
  border: 1px dashed rgba(30,30,30,.18);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.eclora-hero__placeholder p{
  margin: 0;
  color: var(--muted);
}

@media (max-width: 900px){
  .eclora-hero__grid{
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
/* =========================================================
   HERO — Centrage vertical élégant
========================================================= */

.eclora-hero__grid{
  min-height: 75vh; /* donne de la présence */
}

.eclora-hero__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: var(--space-5);
}

.eclora-hero__title{
  margin-bottom: var(--space-3);
}

.eclora-hero__text{
  margin-bottom: var(--space-4);
}

.eclora-hero__actions{
  margin-top: var(--space-2);
}
/* =========================================================
   HERO — Centrage vertical élégant
========================================================= */

.eclora-hero__grid{
  min-height: 75vh; /* donne de la présence */
}

.eclora-hero__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: var(--space-5);
}

.eclora-hero__title{
  margin-bottom: var(--space-3);
}

.eclora-hero__text{
  margin-bottom: var(--space-4);
}

.eclora-hero__actions{
  margin-top: var(--space-2);
}
/* HERO — Compact & élégant (rééquilibrage) */
.eclora-hero__grid{
  grid-template-columns: 1.05fr 0.95fr !important; /* plus de place au texte */
  gap: 32px !important;
}

.eclora-hero__media{
  min-height: clamp(300px, 34vh, 380px) !important; /* moins haut */
}
/* =========================================================
   ECLORA HERO — Image moins dominante (compact premium)
========================================================= */

/* Image moins large : on favorise le texte */
.eclora-hero .eclora-hero__grid{
  grid-template-columns: 1.25fr 0.75fr !important; /* texte 62% / image 38% */
  gap: 22px !important;
}

/* Image moins haute */
.eclora-hero .eclora-hero__media{
  min-height: clamp(220px, 26vh, 300px) !important;
}

/* Option : limite la largeur visuelle de l’image sans casser la grille */
.eclora-hero .eclora-hero__media{
  max-width: 520px !important;
  justify-self: end !important; /* colle l’image à droite */
}

/* Mobile ok */
@media (max-width: 900px){
  .eclora-hero .eclora-hero__media{
    max-width: 100% !important;
    justify-self: stretch !important;
    min-height: 220px !important;
  }
}
/* =========================================================
   ECLORA HERO — Version plus compacte
========================================================= */

/* 1️⃣ Réduit l'espace au-dessus et en-dessous */
.eclora-hero{
  padding: clamp(20px, 3vw, 36px) 0 !important;
}

/* 2️⃣ Réduit encore la hauteur de l'image */
.eclora-hero .eclora-hero__media{
  min-height: clamp(200px, 24vh, 260px) !important;
}

/* 3️⃣ Titre légèrement plus compact */
.eclora-hero .eclora-hero__title{
  font-size: clamp(30px, 3.6vw, 48px) !important;
  line-height: 1.05 !important;
}

/* 4️⃣ Espace bouton plus serré */
.eclora-hero .eclora-hero__actions{
  margin-top: 16px !important;
}
.eclora-hero__title{
  max-width: 18ch;
}
/* =========================================================
   HERO — équilibrage texte + bouton (pro, premium)
========================================================= */

/* Le contenu texte devient un bloc éditorial (moins "flottant") */
.eclora-hero .eclora-hero__content{
  max-width: 520px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* équilibre vertical */
  padding-top: 8px !important;
}

/* Titre : un peu moins large, mieux "cadré" */
.eclora-hero .eclora-hero__title{
  max-width: 20ch !important;
  margin-bottom: 14px !important;
}

/* Sous-texte : largeur contrôlée + respiration */
.eclora-hero .eclora-hero__text{
  max-width: 42ch !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Bouton : position stable sous le texte */
.eclora-hero .eclora-hero__actions{
  margin-top: 22px !important;
}

/* Bonus : le bouton ne doit jamais paraître "tout petit" face au titre */
.eclora-hero .eclora-hero__actions .eclora-btn--primary{
  min-width: 220px !important;
  justify-content: center !important;
}
/* =========================================================
   ECLORA HERO — Premium doux (équilibré + pro)
========================================================= */

/* Hero plus compact */
.eclora-hero{
  padding: clamp(18px, 3vw, 36px) 0 !important;
}

/* Grille : texte prioritaire, image plus discrète */
.eclora-hero .eclora-hero__grid{
  grid-template-columns: 1.25fr 0.75fr !important;
  gap: 24px !important;
  align-items: center !important;
}

/* Bloc gauche cadré (effet composition) */
.eclora-hero .eclora-hero__content{
  max-width: 540px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Kicker : luxe discret */
.eclora-hero .eclora-kicker{
  margin-bottom: 12px !important;
  letter-spacing: .14em !important;
  opacity: .9;
}

/* Titre : moins large, plus premium */
.eclora-hero .eclora-hero__title{
  max-width: 20ch !important;
  font-size: clamp(32px, 3.8vw, 52px) !important;
  line-height: 1.06 !important;
  margin: 0 0 12px 0 !important;
}

/* Texte : doux et lisible */
.eclora-hero .eclora-hero__text{
  max-width: 46ch !important;
  margin: 0 !important;
}

/* Bouton : ancré, pas "perdu" */
.eclora-hero .eclora-hero__actions{
  margin-top: 20px !important;
}
.eclora-hero .eclora-hero__actions .eclora-btn--primary{
  min-width: 220px !important;
  justify-content: center !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(162, 103, 90, .26) !important;
}
.eclora-hero .eclora-hero__actions .eclora-btn--primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(162, 103, 90, .34) !important;
}

/* Image : moins haute + cadrage intentionnel */
.eclora-hero .eclora-hero__media{
  max-width: 520px !important;
  justify-self: end !important;
  min-height: clamp(200px, 24vh, 280px) !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.eclora-hero .eclora-hero__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 60% 50% !important; /* recadrage doux */
  display: block !important;
}

/* Mobile */
@media (max-width: 900px){
  .eclora-hero .eclora-hero__grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .eclora-hero .eclora-hero__media{
    max-width: 100% !important;
    justify-self: stretch !important;
    min-height: 220px !important;
  }
  .eclora-hero .eclora-hero__actions .eclora-btn--primary{
    min-width: 200px !important;
  }
}
/* HERO — hauteur contrôlée */
.eclora-hero{
  min-height: clamp(380px, 55vh, 520px) !important;
  display: flex !important;
  align-items: center !important;
}
/* =========================================================
   ECLORA — Palette & Hero Premium Doux
========================================================= */

/* 🎨 Nouvelles couleurs globales */
:root{
  --bg: #F5F2EE;
  --text: #1A1A1A;
  --muted: #6B6764;
  --accent-hover: #7E473E;
}

/* Fond global */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Texte principal */
h1, h2, h3, h4{
  color: var(--text) !important;
}

/* Texte secondaire */
p, .eclora-hero__text{
  color: var(--muted) !important;
}

/* 🖋 HERO — Titre plus grand et plus éditorial */
.eclora-hero .eclora-hero__title{
  font-size: clamp(42px, 5vw, 68px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  max-width: 18ch !important; /* force visuellement 2-3 lignes élégantes */
}

/* Bouton hover */
.eclora-hero .eclora-btn--primary:hover{
  background: var(--accent-hover) !important;
  color: #ffffff !important;
}
/* =========================================
   ECLORA — RE-FONTE PREMIUM MODERNE (HOME)
   Theme: Balance
   Ciblage : section Eclora — Hero (notre section)
   À coller TOUT EN BAS de assets/custom.css
========================================= */

/* --- Palette / base (site) --- */
:root{
  --e-bg: #F5F2EE;         /* fond blanc chaud */
  --e-text: #1A1A1A;       /* noir doux */
  --e-muted: #6B6764;      /* gris taupe */
  --e-accent: #9F5F54;     /* terracotta profond */
  --e-accent-hover:#7E473E;
  --e-radius: 14px;
}

/* Base page (léger, sans casser Balance) */
body{
  background: var(--e-bg) !important;
  color: var(--e-text) !important;
}

/* Optionnel : si tu veux aussi que nos tokens "var(--text)" etc suivent */
:root{
  --bg: var(--e-bg);
  --text: var(--e-text);
  --muted: var(--e-muted);
  --accent: var(--e-accent);
  --accent-hover: var(--e-accent-hover);
  --radius: var(--e-radius);
}

/* =========================================
   HOME — HERO (Section Eclora — Hero)
   (pas la bannière native Balance)
========================================= */

/* Section : padding compact + centrage vertical */
.template-index .eclora-hero{
  padding-top: clamp(20px, 3.5vw, 44px) !important;
  padding-bottom: clamp(20px, 3.5vw, 44px) !important;
  display: flex !important;
  align-items: center !important;
}

/* Grille : texte prioritaire / image secondaire */
.template-index .eclora-hero .eclora-hero__grid{
  width: 100%;
  grid-template-columns: 1.25fr 0.75fr !important;
  gap: 24px !important;
  align-items: center !important;
}

/* Colonne texte : cadrage + respiration */
.template-index .eclora-hero .eclora-hero__content{
  max-width: 560px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* TITRE (plus grand, prévu pour 3 lignes) */
.template-index .eclora-hero .eclora-hero__title{
  color: var(--e-text) !important;
  font-size: clamp(42px, 4.2vw, 74px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.6px !important;
  margin: 0 0 18px 0 !important;
  max-width: 12ch !important; /* force 2-3 lignes selon ton texte */
}

/* Sous-texte */
.template-index .eclora-hero .eclora-hero__text{
  color: var(--e-muted) !important;
  font-size: clamp(16px, 1.35vw, 20px) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 32ch !important;
  opacity: 1 !important;
}

/* Boutons : on cible nos classes pour éviter de styliser tous les boutons du site */
.template-index .eclora-hero .eclora-hero__actions{
  margin-top: 22px !important;
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.template-index .eclora-hero .eclora-hero__actions a.eclora-btn--primary{
  background: var(--e-accent) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  color: #fff !important;
  border-radius: var(--e-radius) !important;
  padding: 14px 26px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.12) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
  text-decoration: none !important;
}

.template-index .eclora-hero .eclora-hero__actions a.eclora-btn--primary:hover{
  background: var(--e-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,0.16) !important;
}

/* (option) Bouton secondaire, si tu l’utilises */
.template-index .eclora-hero .eclora-hero__actions a.eclora-btn--secondary{
  background: transparent !important;
  color: var(--e-text) !important;
  border: 1px solid rgba(26,26,26,.14) !important;
  border-radius: var(--e-radius) !important;
  padding: 14px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
}

/* Image : premium doux (coins arrondis, sans “cadre” visible) */
.template-index .eclora-hero .eclora-hero__media{
  border-radius: 18px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: clamp(200px, 24vh, 280px) !important; /* compact */
  max-width: 520px !important;
  justify-self: end !important;
}

.template-index .eclora-hero .eclora-hero__media img{
  border-radius: 18px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.01) !important;
  display: block !important;
}

/* Responsive mobile */
@media (max-width: 749px){
  .template-index .eclora-hero{
    padding-top: 18px !important;
    padding-bottom: 28px !important;
  }

  .template-index .eclora-hero .eclora-hero__grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .template-index .eclora-hero .eclora-hero__title{
    max-width: 16ch !important;
    font-size: clamp(34px, 8vw, 44px) !important;
  }

  .template-index .eclora-hero .eclora-hero__text{
    max-width: 38ch !important;
    font-size: 16px !important;
  }

  .template-index .eclora-hero .eclora-hero__media{
    max-width: 100% !important;
    justify-self: stretch !important;
    min-height: 220px !important;
  }
}

/* =========================================
   Header (facultatif) — léger, sans casser
========================================= */
.header, .header *{
  letter-spacing: 0.2px;
}
.header a{
  color: var(--e-muted);
}
.header a:hover{
  color: var(--e-text);
}
/* TEST */
section.eclora-hero { outline: 3px solid red !important; }
/* =========================
   ECLORA — Trait fin au-dessus du kicker (fallback imparable)
   ========================= */

section.eclora-hero .eclora-hero__content{
  position: relative !important;
  padding-top: 18px !important;      /* crée l’espace pour le trait */
  overflow: visible !important;
}

/* Trait fin (toujours visible) */
section.eclora-hero .eclora-hero__content::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 56px !important;
  height: 1px !important;
  background: rgba(159, 95, 84, 0.55) !important; /* terracotta subtil */
  z-index: 5 !important;
}
/* =========================
   ECLORA — Trait fin + kicker (exact)
   ========================= */

section.eclora-hero .eclora-hero__content .eclora-kicker{
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;

  color: #9F5F54 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 12px !important;
}

/* Le trait fin au-dessus */
section.eclora-hero .eclora-hero__content .eclora-kicker::before{
  content: "" !important;
  display: block !important;
  width: 56px !important;
  height: 1px !important;
  background: rgba(159, 95, 84, 0.55) !important;
}
/* =========================
   ECLORA — Trait au-dessus du kicker (sans toucher ::before)
   ========================= */

section.eclora-hero .eclora-hero__content .eclora-kicker{
  position: relative !important;
  padding-top: 14px !important; /* espace pour le trait */
  color: #9F5F54 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 12px !important;
}

/* Trait fin (utilise ::after pour éviter les conflits) */
section.eclora-hero .eclora-hero__content .eclora-kicker::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 56px !important;
  height: 1px !important;
  background: rgba(159, 95, 84, 0.55) !important;
}
/* =========================
   PRODUIT — Photos normales (anti-formes)
   ========================= */

/* Photo = rectangle clean */
.product .product__media img,
.product .product__media-item img{
  border-radius: 12px !important; /* ou 0 si tu veux totalement net */
  object-fit: cover !important;
}

/* Enlève toute "forme" ajoutée par pseudo-éléments */
.product .product__media::before,
.product .product__media::after,
.product .product__media-item::before,
.product .product__media-item::after,
.product-media::before,
.product-media::after{
  content: none !important;
  display: none !important;
}

/* Si un fond terracotta est appliqué au conteneur */
.product .product__media,
.product .product__media-item,
.product-media{
  background: transparent !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
/* =========================
   PAGE PRODUIT — reset media
   ========================= */

/* Conteneur image produit */
.product-media-container {
  background: transparent !important;
  border-radius: 12px !important; /* ou 0 si tu veux full sharp */
  overflow: hidden !important;
}

/* Image à l'intérieur */
.product-media-container img {
  border-radius: 12px !important;
  display: block !important;
}

/* Supprime toute forme décorative */
.product-media-container::before,
.product-media-container::after {
  content: none !important;
  display: none !important;
}
/* =========================
   PRODUIT — supprimer les formes sur les photos (définitif)
   ========================= */

/* 1) On remet un radius "normal" uniquement sur la page produit */
.product,
.template-product,
.product-page {
  --radius: 18px; /* ajuste: 12 / 18 / 20 */
}

/* 2) On neutralise les effets de masque/clip-path qui créent des ovales */
.product media-gallery,
.product .media-gallery,
.product .product-media-container,
.product .product-media,
.product .product-media img {
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: transparent !important;
}

/* 3) On force le rendu rectangle clean */
.product .product-media-container,
.product .product-media,
.product .product-media img {
  border-radius: 18px !important;
  overflow: hidden !important;
  display: block !important;
}
/* =========================
   PRODUIT — Photos sans formes (override)
   ========================= */

.template-product .product-media-container,
.template-product .product-media,
.template-product .product-media img,
.template-product media-gallery,
.template-product .media-gallery,
.template-product .media-gallery * {
  border-radius: 18px !important;      /* premium soft */
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* Si un wrapper applique un rayon "pill" via variable */
.template-product .product-media-container,
.template-product .product-media {
  --e-radius-pill: 18px !important;    /* neutralise localement */
}
/* =========================================
   PRODUIT — RESET TOTAL MEDIA SHAPE
   ========================================= */

/* On cible le LI qui crée la forme */
.template-product li.product-media-container,
.template-product .product-media-container--image,
.template-product .media-fit-contain {
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* On sécurise l'image */
.template-product .product-media-container img {
  border-radius: 12px !important;
  display: block !important;
}
/* =========================================
   HOTFIX — empêcher le radius "pill" sur les médias (produit)
   ========================================= */
.template-product .product-media-container,
.template-product .product-media-container--image,
.template-product .media-fit-contain,
.template-product .product-media,
.template-product media-gallery,
.template-product .media-gallery__item,
.template-product .media-gallery__item img{
  border-radius: 18px !important;  /* premium soft */
  background: transparent !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  overflow: hidden !important;
}

.template-product .product-media-container::before,
.template-product .product-media-container::after,
.template-product .media-fit-contain::before,
.template-product .media-fit-contain::after{
  content: none !important;
  display: none !important;
}
/* TEST — badge en rouge */
.template-product .badge{
  outline: 3px solid red !important;
}
/* PRODUIT — masquer les badges */
.template-product .badge{ display:none !important; }
/* Mobile — enlever le carré noir du bouton menu */
@media screen and (max-width: 749px) {
  /* Le bouton/summary qui ouvre le menu */
  .header summary.header__icon,
  .header .menu-drawer__toggle,
  button[aria-controls="menu-drawer"],
  summary[aria-controls="menu-drawer"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Si le carré vient du conteneur d’icône */
  .header summary.header__icon .icon,
  .header .menu-drawer__toggle .icon,
  button[aria-controls="menu-drawer"] .icon,
  summary[aria-controls="menu-drawer"] .icon {
    background: transparent !important;
    background-color: transparent !important;
  }
}
/* Mobile — rendre l'icône menu (hamburger) visible */
@media screen and (max-width: 749px) {

  /* Cible le bouton qui ouvre le menu drawer */
  .header summary.header__icon,
  .header .menu-drawer__toggle,
  button[aria-controls="menu-drawer"],
  summary[aria-controls="menu-drawer"]{
    color: #b7795f !important; /* couleur de l'icône */
  }

  /* Cas SVG */
  .header summary.header__icon svg,
  .header .menu-drawer__toggle svg,
  button[aria-controls="menu-drawer"] svg,
  summary[aria-controls="menu-drawer"] svg{
    opacity: 1 !important;
    display: block !important;
  }

  .header summary.header__icon svg *,
  .header .menu-drawer__toggle svg *,
  button[aria-controls="menu-drawer"] svg *,
  summary[aria-controls="menu-drawer"] svg *{
    stroke: currentColor !important;
    fill: currentColor !important;
    opacity: 1 !important;
  }

  /* Cas mask-image (icône en masque) */
  .header summary.header__icon .icon,
  .header .menu-drawer__toggle .icon,
  button[aria-controls="menu-drawer"] .icon,
  summary[aria-controls="menu-drawer"] .icon{
    background-color: currentColor !important;
    opacity: 1 !important;
  }
}
@media screen and (max-width: 749px) {
  .header summary.header__icon svg,
  .header .menu-drawer__toggle svg,
  .header summary.header__icon .icon,
  .header .menu-drawer__toggle .icon {
    display: block !important;
    visibility: visible !important;
  }
}
/* Mobile — rendre visible l'icône menu (classe exacte du thème) */
@media screen and (max-width: 749px) {

  summary.header__icon--menu {
    color: #b7795f !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Cas mask-image : l'icône prend la couleur du background-color */
  summary.header__icon--menu .icon {
    background-color: #b7795f !important;
    opacity: 1 !important;
  }

  /* Cas SVG : traits visibles */
  summary.header__icon--menu svg {
    display: block !important;
    opacity: 1 !important;
  }
  summary.header__icon--menu svg * {
    stroke: #1a1a1a !important;
    fill: none !important;
    opacity: 1 !important;
  }
}
@media screen and (max-width: 749px) {
  summary.header__icon--menu .icon,
  summary.header__icon--menu svg {
    display: block !important;
  }
}
/* Mobile — recréer l’icône hamburger (100% fiable) */
@media screen and (max-width: 749px) {
  summary.header__icon--menu {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* On masque les icônes du thème si elles bug */
  summary.header__icon--menu svg,
  summary.header__icon--menu .icon {
    display: none !important;
  }

  /* Les 3 traits */
  summary.header__icon--menu::before,
  summary.header__icon--menu::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    width: 18px !important;
    height: 2px !important;
    background: #b7795f !important;
    transform: translateX(-50%) !important;
    border-radius: 2px !important;
  }

  summary.header__icon--menu::before {
    top: 16px !important;
  }

  summary.header__icon--menu::after {
    top: 28px !important;
  }

  /* Trait du milieu */
  summary.header__icon--menu .eclora-midline {
    display: none;
  }
  summary.header__icon--menu span.eclora-midline {
    display: block !important;
  }
}
/* Eclora — Hamburger mobile premium */
@media screen and (max-width: 749px) {

  summary.header__icon--menu {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Masque l'ancienne icône du thème */
  summary.header__icon--menu svg,
  summary.header__icon--menu .icon {
    display: none !important;
  }

/* Hamburger premium : 3 traits identiques (sans box-shadow) */
summary.header__icon--menu{
  --burger: #b7795f;
}

summary.header__icon--menu::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 14px;                 /* hauteur totale des 3 lignes */
  transform: translate(-50%, -50%);
  background:
    linear-gradient(
      to bottom,
      var(--burger) 0 1.5px,
      transparent 1.5px 6px,
      var(--burger) 6px 7.5px,
      transparent 7.5px 12px,
      var(--burger) 12px 13.5px,
      transparent 13.5px 14px
    );
  border-radius: 2px;
}

}
@media screen and (max-width: 749px) {

  /* Masque icônes internes du thème */
  summary.header__icon--menu .svg-wrapper,
  summary.header__icon--menu svg {
    display: none !important;
  }

  summary.header__icon--menu {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Trait du haut */
  summary.header__icon--menu::before,
  summary.header__icon--menu::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 15px;
    height: 1.5px;
    background: #A06557 !important; /* terracotta */
    transform: translateX(-50%);
    border-radius: 2px;
  }

  summary.header__icon--menu::before {
    top: 18px;
  }

  summary.header__icon--menu::after {
    top: 26px;
  }

}
/* Mobile — panier plus petit et premium */
@media screen and (max-width: 749px) {
  .header__icon--cart,
  a[href*="/cart"].header__icon,
  .header__icon-cart {
    width: 44px !important;
    height: 44px !important;
  }
}
@media screen and (max-width: 749px) {
  .header__icon--cart {
    padding: 10px !important;       /* réduit le rond */
    border-radius: 999px !important;
  }
}
@media screen and (max-width: 749px) {
  .header__icon--cart svg {
    width: 18px !important;
    height: 18px !important;
  }

  .cart-count-bubble,
  .header__cart-count {
    transform: scale(0.9) !important;
  }
}
/* Mobile — panier plus petit (header) */
@media screen and (max-width: 749px) {

  /* Bouton panier (drawer trigger) */
  button[data-testid="cart-drawer-trigger"]{
    width: 40px !important;     /* essaye 38–44 */
    height: 40px !important;
    padding: 10px !important;   /* réduit le rond */
    border-radius: 999px !important;
  }

  /* Icône dans le bouton */
  button[data-testid="cart-drawer-trigger"] cart-icon,
  button[data-testid="cart-drawer-trigger"] svg {
    width: 18px !important;
    height: 18px !important;
  }
}
/* Mobile — panier : supprimer le carré interne + centrer l’icône */
@media screen and (max-width: 749px) {

  button[data-testid="cart-drawer-trigger"]{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Supprime tout fond / bordure interne sur l'icône */
  button[data-testid="cart-drawer-trigger"] cart-icon,
  button[data-testid="cart-drawer-trigger"] .header-actions__cart-icon {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Si le carré blanc vient d’un pseudo élément */
  button[data-testid="cart-drawer-trigger"] cart-icon::before,
  button[data-testid="cart-drawer-trigger"] cart-icon::after,
  button[data-testid="cart-drawer-trigger"] .header-actions__cart-icon::before,
  button[data-testid="cart-drawer-trigger"] .header-actions__cart-icon::after {
    content: none !important;
    display: none !important;
  }

  /* Couleur de l’icône (blanc) + centrage */
  button[data-testid="cart-drawer-trigger"] svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
  }

  button[data-testid="cart-drawer-trigger"] svg * {
    stroke: #ffffff !important;
    fill: none !important;
  }
}
/* Mobile — enlever le badge/coin blanc du panier */
@media screen and (max-width: 749px) {

  button[data-testid="cart-drawer-trigger"] cart-icon .cart-count-bubble,
  button[data-testid="cart-drawer-trigger"] .cart-count-bubble,
  button[data-testid="cart-drawer-trigger"] [class*="bubble"],
  button[data-testid="cart-drawer-trigger"] cart-icon::after,
  button[data-testid="cart-drawer-trigger"] cart-icon::before {
    display: none !important;
    content: none !important;
  }
}
/* Mobile — centrage parfait icône panier */
@media screen and (max-width: 749px) {

  button[data-testid="cart-drawer-trigger"]{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;   /* supprime décalage interne */
  }

  button[data-testid="cart-drawer-trigger"] cart-icon,
  button[data-testid="cart-drawer-trigger"] .header-actions__cart-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  button[data-testid="cart-drawer-trigger"] svg {
    display: block !important;
    margin: 0 auto !important;
  }

}
/* Mobile — centrage optique parfait panier */
@media screen and (max-width: 749px) {

  button[data-testid="cart-drawer-trigger"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  button[data-testid="cart-drawer-trigger"] svg {
    width: 18px !important;
    height: 18px !important;
    transform: translate(-0.5px, -1px); /* ajuste finement */
  }

}
/* Mobile — éviter que le panier sorte de l'écran */
@media screen and (max-width: 749px) {
  button[data-testid="cart-drawer-trigger"]{
    margin-right: 12px !important; /* ajuste 8–16px */
  }
}
/* Mobile — éviter que le panier soit coupé (safe area) */
@media screen and (max-width: 749px) {
  header-actions,
  .header-actions {
    padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }
}
@media screen and (max-width: 749px) {
  button[data-testid="cart-drawer-trigger"] {
    margin-right: 8px !important;
  }
}
/* Mobile — empêcher le panier d’être coupé */
@media screen and (max-width: 749px) {

  header,
  .header {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

}
/* Mobile — éviter que le panier soit coupé par overflow */
@media screen and (max-width: 749px) {
  header, .header,
  header-actions, .header-actions {
    overflow: visible !important;
  }
}
@media screen and (max-width: 749px) {
  header-actions, .header-actions {
    padding-right: calc(18px + env(safe-area-inset-right, 0px)) !important;
  }
}
/* Mobile — rond panier plus grand */
@media screen and (max-width: 749px) {
  button[data-testid="cart-drawer-trigger"]{
    width: 60px !important;
    height: 60px !important;
    border-radius: 999px !important;
  }

  button[data-testid="cart-drawer-trigger"] svg{
    width: 19px !important;
    height: 19px !important;
  }
}
@media screen and (max-width: 749px) {
  button[data-testid="cart-drawer-trigger"]{
    margin-right: 16px !important;
  }
}
/* Mobile — empêcher l’icône panier d’être coupée */
@media screen and (max-width: 749px) {

  /* le bouton */
  button[data-testid="cart-drawer-trigger"]{
    overflow: visible !important;
    line-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* le composant cart-icon et ses wrappers */
  button[data-testid="cart-drawer-trigger"] cart-icon,
  button[data-testid="cart-drawer-trigger"] .header-actions__cart-icon {
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* le svg */
  button[data-testid="cart-drawer-trigger"] svg {
    overflow: visible !important;
    display: block !important;
  }
}
@media screen and (max-width: 749px) {
  button[data-testid="cart-drawer-trigger"] svg {
    transform: scale(0.92) translate(0, -1px) !important;
    transform-origin: center !important;
  }
}
/* Mobile — Panier parfaitement centré + jamais coupé */
@media screen and (max-width: 749px) {

  /* Le rond (bouton) */
  button[data-testid="cart-drawer-trigger"]{
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 999px !important;
    overflow: visible !important;
  }

  /* Le composant */
  button[data-testid="cart-drawer-trigger"] cart-icon,
  button[data-testid="cart-drawer-trigger"] .header-actions__cart-icon{
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  /* L’icône : on la rend plus petite (anti-coupe) */
  button[data-testid="cart-drawer-trigger"] svg{
    width: 16px !important;   /* ↓ plus petit = plus premium */
    height: 16px !important;
    display: block !important;
    margin: 0 !important;
    transform: none !important; /* IMPORTANT : annule anciens translate */
  }

  /* Traits blancs propres */
  button[data-testid="cart-drawer-trigger"] svg *{
    stroke: #fff !important;
    fill: none !important;
  }
}
@media screen and (max-width: 749px) {
  button[data-testid="cart-drawer-trigger"] .cart-count-bubble,
  button[data-testid="cart-drawer-trigger"] [class*="bubble"]{
    display: none !important;
  }
}
/* Mobile — rentrer le panier dans le viewport */
@media screen and (max-width: 749px) {

  /* le container des actions (à droite) */
  header-actions, .header-actions {
    padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  /* le bouton panier lui-même */
  button[data-testid="cart-drawer-trigger"]{
    position: relative !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;

    margin-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  }
}
@media screen and (max-width: 749px) {
  header-actions {
    position: relative !important;
  }
}
/* Mobile — supprimer totalement le badge panier */
@media screen and (max-width: 749px) {

  button[data-testid="cart-drawer-trigger"] .cart-bubble,
  button[data-testid="cart-drawer-trigger"] .cart-count-bubble {
    display: none !important;
  }

}
/* Mobile — panier : supprimer toute forme interne blanche (wrapper/bubble/pseudo) */
@media screen and (max-width: 749px) {

  /* le bouton */
  button[data-testid="cart-drawer-trigger"]{
    overflow: visible !important;
    display: grid !important;
    place-items: center !important;
  }

  /* le composant */
  button[data-testid="cart-drawer-trigger"] cart-icon,
  button[data-testid="cart-drawer-trigger"] .header-actions__cart-icon{
    overflow: visible !important;
    background: transparent !important;
  }

  /* ✅ les 2 suspects dans ton HTML */
  button[data-testid="cart-drawer-trigger"] cart-icon .svg-wrapper,
  button[data-testid="cart-drawer-trigger"] cart-icon .cart-bubble{
    display: none !important;
  }

  /* ✅ au cas où le blanc vient d’un pseudo élément */
  button[data-testid="cart-drawer-trigger"] cart-icon::before,
  button[data-testid="cart-drawer-trigger"] cart-icon::after,
  button[data-testid="cart-drawer-trigger"] .header-actions__cart-icon::before,
  button[data-testid="cart-drawer-trigger"] .header-actions__cart-icon::after{
    content: none !important;
    display: none !important;
  }

  /* l’icône visible (svg) */
  button[data-testid="cart-drawer-trigger"] svg{
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    transform: none !important;
  }
}
/* Mobile — finition premium panier */
@media screen and (max-width: 749px) {
  button[data-testid="cart-drawer-trigger"]{
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  button[data-testid="cart-drawer-trigger"] svg{
    width: 16px !important;
    height: 16px !important;
  }
}
/* Mobile — décaler le panier vers la droite */
@media screen and (max-width: 749px) {

  button[data-testid="cart-drawer-trigger"]{
    margin-right: -16px !important;  /* ajuste -4 / -6 / -10 selon rendu */
  }

}
/* Mobile — icône panier premium */
@media screen and (max-width: 749px) {

  /* masque l’icône Shopify */
  button[data-testid="cart-drawer-trigger"] svg{
    display: none !important;
  }

  /* nouvelle icône */
  button[data-testid="cart-drawer-trigger"]::before{
    content: "";
    width: 18px;
    height: 18px;
    display: block;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff' fill='none' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 3h2l.4 2m0 0L7 13h10l2-8H5.4M7 13l-1 5h12M9 21a1 1 0 110-2 1 1 0 010 2zm8 0a1 1 0 110-2 1 1 0 010 2z'/%3E%3C/svg%3E");

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

}
/* Mobile — icône sac minimal premium */
@media screen and (max-width: 749px) {

  /* masque l’icône panier actuelle */
  button[data-testid="cart-drawer-trigger"] svg{
    display: none !important;
  }

  /* sac minimal */
  button[data-testid="cart-drawer-trigger"]::before{
    content: "";
    width: 18px;
    height: 18px;
    display: block;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff' fill='none' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 8a3 3 0 016 0'/%3E%3C/svg%3E");

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

}
/* Mobile — menu couleur terracotta */
@media screen and (max-width: 749px) {

  summary.header__icon--menu svg *{
    stroke: #A06557 !important;
    fill: none !important;
  }

}
@media screen and (max-width: 749px) {

  summary.header__icon--menu{
    color: #A06557 !important;
  }
  @media screen and (max-width: 749px) {

  summary.header__icon--menu{
    color: #A06557 !important;
  }

}
@media screen and (max-width: 749px) {

  summary.header__icon--menu{
    color: #A06557 !important;
  }

}
/* Hero — alignement à gauche */
.banner__content,
.banner__box {
  text-align: left !important;
  align-items: flex-start !important;
}

/* bouton aligné avec le texte */
.banner__buttons {
  justify-content: flex-start !important;
}
/* Hero Eclora — aligner le texte à gauche */
.eclora-hero_content{
  align-items: flex-start !important;
  text-align: left !important;
}

/* supprimer la marge interne */
.eclora-container{
  padding-left: 40px !important;
}
/* TEST HERO — repérer les blocs */
.eclora-hero,
.eclora-hero_grid,
.eclora-hero_content,
.eclora-container {
  outline: 2px solid rgba(0, 140, 255, .6) !important;
  background: rgba(0, 140, 255, .04) !important;
}
/* HERO — aligner texte + bouton à gauche */
.eclora-hero__content{
  align-items: flex-start !important;
  text-align: left !important;

  /* enlève l'écart qui fausse l'alignement */
  padding-right: 0 !important;
}

/* bouton aligné à gauche */
.eclora-hero__actions{
  justify-content: flex-start !important;
}
/* HERO — remettre texte + image côte à côte */
.eclora-hero__grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
}
.eclora-hero{
  display: block !important;
}
/* Trait décoratif au-dessus du kicker */
.eclora-kicker::before{
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #A06557; /* terracotta */
  margin-bottom: 12px;
}
/* Trait décoratif au-dessus du kicker */
.eclora-kicker::before{
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #A06557; /* terracotta */
  margin-bottom: 14px;
}
.eclora-kicker::before{
  content: "—";
  display: block;
  color: red;
  font-size: 30px;
  margin-bottom: 10px;
}
.eclora-kicker{
  position: relative;
  padding-top: 16px;
}

.eclora-kicker::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: #A06557;
}
/* Trait au-dessus du kicker (ciblage ultra spécifique) */
.eclora-hero__content > .eclora-kicker{
  position: relative !important;
  display: inline-block !important;
  padding-top: 18px !important; /* crée l'espace pour le trait */
}

.eclora-hero__content > .eclora-kicker::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 60px !important;
  height: 1px !important;
  background: #A06557 !important;
  opacity: 0.7 !important;
}
/* TEST 1B — CUSTOM (mobile) */
@media (max-width: 990px){
  .eclora-section { background: rgba(0, 255, 0, .12) !important; }
}
/* Mobile — centrer l'image hero */
@media (max-width: 990px){
  .eclora-section .eclora-hero__media{
    justify-self: center !important;
    width: 100% !important;
  }

  .eclora-section .eclora-hero__media img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: cover !important;
  }
}
/* Clean debug outlines */
.eclora-section,
.eclora-section * {
  outline: none !important;
}
/* HERO mobile — image parfaitement centrée */
@media (max-width: 990px){

  .eclora-section .eclora-hero__grid{
    grid-template-columns: 1fr !important;
  }

  .eclora-section .eclora-hero__media{
    width: 100% !important;
    margin: 0 auto !important;
    justify-self: center !important;
    padding: 0 !important;
    transform: none !important;
  }

  .eclora-section .eclora-hero__media img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center !important; /* <— important */
  }
}
/* MOBILE — image hero en "carte" centrée */
@media (max-width: 990px){
  section.eclora-section .eclora-hero__media{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
/* CLEAN — retirer le background de test vert sur le hero */
section.eclora-section{
  background: transparent !important;
}
/* Alignement global sur l’axe du kicker */
@media (max-width: 990px){
  .eclora-section .eclora-hero__content{
    text-align: left !important;
    align-items: flex-start !important; /* si content est en flex */
    justify-items: start !important;    /* si content est en grid */
  }

  /* le trait doit partir du même bord que le kicker */
  .eclora-section .eclora-kicker::before{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* si le bouton était centré via margin auto */
  .eclora-section .eclora-hero__content .button,
  .eclora-section .eclora-hero__content .button--primary,
  .eclora-section .eclora-hero__content .btn{
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
  }

  /* si le wrapper du bouton force le centrage */
  .eclora-section .eclora-hero__content .button-wrapper,
  .eclora-section .eclora-hero__content .buttons,
  .eclora-section .eclora-hero__content .button-group{
    justify-content: flex-start !important;
  }
}
@media (max-width: 990px){

  /* 1) Le bloc contenu doit être une colonne alignée à gauche */
  .eclora-section .eclora-hero__content{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* 2) Si un wrapper interne centre (très courant) */
  .eclora-section .eclora-hero__content .eclora-hero__content-inner,
  .eclora-section .eclora-hero__content .content,
  .eclora-section .eclora-hero__content .text-content{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* 3) Neutraliser les centrages "margin auto" (titre/texte/bouton) */
  .eclora-section .eclora-hero__content h1,
  .eclora-section .eclora-hero__content h2,
  .eclora-section .eclora-hero__content p,
  .eclora-section .eclora-hero__content .button,
  .eclora-section .eclora-hero__content .button--primary,
  .eclora-section .eclora-hero__content .btn{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4) Si le bouton est dans un conteneur "buttons" centré */
  .eclora-section .eclora-hero__content .buttons,
  .eclora-section .eclora-hero__content .button-wrapper,
  .eclora-section .eclora-hero__content .button-group{
    justify-content: flex-start !important;
    width: 100%;
  }
}
@media (max-width: 990px){
  .eclora-section .eclora-hero__content :is(h1,h2){
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
  }
}
@media (max-width: 990px){
  .eclora-section .eclora-hero__content :is(h1,h2){
    max-width: 100% !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 990px){
  /* Retire tout décalage à gauche uniquement sur le titre */
  .eclora-section .eclora-hero__content :is(h1,h2,.h1,.h2){
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
  }
}
@media (max-width: 990px){
  .eclora-section .eclora-hero__content :is(.rte,.rich-text,.eclora-hero__text,.eclora-hero__content-inner){
    padding-left: 0 !important;
  }
}
@media (max-width: 990px){
  .eclora-section .eclora-hero__title{
    transform: translateX(-3px);
  }
}
.announcement-marquee{
  overflow: hidden;
  white-space: nowrap;
}

.announcement-track{
  display: inline-flex;
  gap: 80px;
  animation: marquee-scroll 18s linear infinite;
}

@keyframes marquee-scroll{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-50%);
  }
}
/* Barre d'annonce défilante */

.announcement-bar__text{
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: eclora-marquee 14s linear infinite;
}

@keyframes eclora-marquee{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-100%);
  }
}
/* Header icons — force une seule couleur (anti noir) */
:root{
  --eclora-header-icon: #b7795f; /* mets ta couleur */
}

/* Bouton burger + icônes header */
.header__icon,
.header__icon span,
.header__icon .icon,
.header__icon svg{
  color: var(--eclora-header-icon) !important;
  fill: var(--eclora-header-icon) !important;
  stroke: var(--eclora-header-icon) !important;
}

/* Cas spécifique burger (Dawn : details/summary) */
.header__icon--menu,
.header__icon--menu svg,
.header__icon--menu .icon{
  color: var(--eclora-header-icon) !important;
  fill: var(--eclora-header-icon) !important;
  stroke: var(--eclora-header-icon) !important;
}

/* Si ton burger est fait en "barres" (pas svg) */
.header__icon--menu .header__icon-line,
.header__icon--menu .line,
.header__icon--menu i{
  background: var(--eclora-header-icon) !important;
}
/* Couleur du menu burger */

.header__icon--menu{
  color: #b7795f !important;
}

.header__icon--menu svg{
  stroke: #b7795f !important;
  fill: #b7795f !important;
}
.header__icon.header__icon--menu{
  color: #b7795f !important;
}

.header__icon.header__icon--menu svg path{
  stroke: #b7795f !important;
  fill: #b7795f !important;
}
/* Header mobile — centrage optique logo */
@media (max-width: 990px){
  .header{
    --eclora-side: 56px; /* largeur des zones gauche/droite */
  }

  /* Zone gauche (burger) et zone droite (icônes) */
  .header__icons,
  .header__icon--menu{
    width: var(--eclora-side);
    min-width: var(--eclora-side);
  }

  /* Si le thème a un wrapper pour le logo */
  .header__heading,
  .header__heading-link{
    margin-left: auto;
    margin-right: auto;
  }
}
/* MENU BURGER — override “anti noir” (cible exacte Dawn) */
@media (max-width: 990px){
  summary.header__icon.header__icon--menu.header__icon--summary{
    color: #b7795f !important;
  }

  summary.header__icon.header__icon--menu.header__icon--summary svg{
    color: #b7795f !important;
  }

  summary.header__icon.header__icon--menu.header__icon--summary svg *{
    stroke: #b7795f !important;
    fill: #b7795f !important;
  }

  /* cas fréquent : l’icône hamburger est en stroke only */
  summary.header__icon.header__icon--menu.header__icon--summary svg path,
  summary.header__icon.header__icon--menu.header__icon--summary svg line{
    stroke: #b7795f !important;
    fill: none !important;
  }
}
@media (max-width: 990px){
  summary.header__icon.header__icon--menu.header__icon--summary .icon{
    background-color: #b7795f !important;
    color: #b7795f !important;
  }
}
/* FORCE la couleur des icônes du header (Dawn) */
@media (max-width: 990px){
  .header{
    --color-foreground: 183, 121, 95 !important; /* = #b7795f */
  }
}
@media (max-width: 990px){
  summary.header__icon.header__icon--menu{
    --color-foreground: 183, 121, 95 !important;
    color: #b7795f !important;
  }

  summary.header__icon.header__icon--menu svg *{
    stroke: #b7795f !important;
    fill: #b7795f !important;
  }

  /* si hamburger en stroke-only */
  summary.header__icon.header__icon--menu svg path,
  summary.header__icon.header__icon--menu svg line{
    stroke: #b7795f !important;
    fill: none !important;
  }
}
/* Panier header : retirer style bouton (rond) */
button[data-testid="cart-drawer-trigger"]{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important; /* optionnel si tu veux une icône plus “fine” */
  color: #b7795f !important;
}

/* Icône (si SVG) */
button[data-testid="cart-drawer-trigger"] svg,
button[data-testid="cart-drawer-trigger"] svg *{
  stroke: #b7795f !important;
  fill: none !important;
}
/* Couleur icône panier */

button[data-testid="cart-drawer-trigger"] svg *{
  fill: #b7795f !important;
}
@media screen and (max-width: 749px){

  /* bouton panier : couleur */
  button[data-testid="cart-drawer-trigger"]{
    color: #b7795f !important;
  }

  /* on remplace le background-image par un mask recolorable */
  button[data-testid="cart-drawer-trigger"]::before{
    background-image: none !important;

    /* le SVG actuel (data:image/svg+xml...) devient un mask */
    -webkit-mask-image: var(--eclora-cart-icon);
    mask-image: var(--eclora-cart-icon);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    background-color: #b7795f !important; /* <- couleur finale */
  }
}
@media screen and (max-width: 749px){
  button[data-testid="cart-drawer-trigger"]::before{
    filter: invert(53%) sepia(19%) saturate(879%) hue-rotate(334deg) brightness(92%) contrast(92%) !important;
  }
}
/* enlève l'icône en background */
button[data-testid="cart-drawer-trigger"]::before{
  display:none !important;
}

/* affiche et colore l'icône interne */
cart-icon svg{
  stroke:#b7795f !important;
  fill:none !important;
  width:22px;
  height:22px;
}
@media screen and (max-width: 749px){

  /* 1) On enlève le style “bouton” (si besoin) */
  button[data-testid="cart-drawer-trigger"]{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* 2) On remplace l’icône par une version terracotta */
  button[data-testid="cart-drawer-trigger"]::before{
    content: "" !important;
    display: block !important;
    width: 18px;
    height: 18px;

    /* IMPORTANT : remplace le SVG blanc par un SVG terracotta */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7795f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h15l-1.5 12H7.5L6 7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    /* au cas où un ancien test a mis une couleur de fond */
    background-color: transparent !important;
    filter: none !important;
  }
}
/* alignement vertical header mobile */

.header__icon--menu,
button[data-testid="cart-drawer-trigger"]{
  display:flex;
  align-items:center;
  justify-content:center;
}

.header__heading{
  display:flex;
  align-items:center;
}

.header__heading-link{
  line-height:1;
}
button[data-testid="cart-drawer-trigger"]::before{
  transform: translateY(4px);
}
/* =========================
   BOUTON SUPPRIMER — PANIER
   ========================= */

/* rendre le bouton visible */
.cart-drawer cart-remove-button,
.cart-drawer .cart-remove-button,
.cart-drawer button[aria-label*="Supprimer"],
.cart-drawer button[aria-label*="Remove"]{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: auto !important;
  height: auto !important;

  padding: 4px 6px !important;
  margin-left: 6px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  font-size: 13px !important;
  color: #b7795f !important;
  cursor: pointer;
}

/* hover premium */
.cart-drawer cart-remove-button:hover,
.cart-drawer button[aria-label*="Supprimer"]:hover{
  text-decoration: underline;
  opacity: .8;
}
/* =========================
   BOUTON SUPPRIMER (panier)
   ========================= */

.cart-drawer .cart-items__remove{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 6px !important;
  margin-left: 6px !important;
  color: #b7795f !important;
}

/* icône poubelle */
.cart-drawer .cart-items__remove svg{
  stroke: #b7795f !important;
  fill: none !important;
  width: 24px !important;
  height: 24px !important;
}

/* hover premium */
.cart-drawer .cart-items__remove:hover svg{
  opacity: .7;
}
.cart-drawer .cart-items__remove svg *{
  stroke: #b7795f !important;
  fill: none !important;
  stroke-width: 1.8 !important;
}
.cart-drawer .cart-items__remove svg *{
  stroke: #b7795f !important;
  fill: none !important;
  stroke-width: 1.8 !important;
}
.cart-drawer .cart-items__remove svg *{
  fill: #b7795f !important;
  stroke: none !important;
  opacity: 1 !important;
}
/* Supprimer : icône poubelle premium (remplace l’icône thème) */
.cart-drawer .cart-items__remove svg{
  display: none !important;
}

.cart-drawer .cart-items__remove{
  position: relative;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin-left: 8px !important;
  background: transparent !important;
  border: 1px solid rgba(183,121,95,.25) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.cart-drawer .cart-items__remove::after{
  content: "";
  width: 14px;
  height: 14px;
  display: block;
  margin: 0 auto;
  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='%23b7795f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M6 6l1 16h10l1-16'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}
/* Quantité panier : remplacer les carrés par - et + */
.cart-drawer .quantity-selector .quantity-minus,
.cart-drawer .quantity-selector .quantity-plus{
  position: relative;
  font-size: 0 !important;         /* cache tout symbole existant */
  color: transparent !important;   /* évite le #1A1A1A du base.css */
  opacity: 1 !important;
}

/* Affiche nos symboles */
.cart-drawer .quantity-selector .quantity-minus::before,
.cart-drawer .quantity-selector .quantity-plus::before{
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  color: #b7795f;
}

/* - et + */
.cart-drawer .quantity-selector .quantity-minus::before{ content: "−"; }
.cart-drawer .quantity-selector .quantity-plus::before{ content: "+"; }
/* Réduction : remplacer le carré par un + */

.cart-actions .disclosure-trigger{
  position: relative;
  font-size: 0 !important; /* masque le carré */
}

/* cache l'icône du thème */
.cart-actions .disclosure-trigger svg{
  display: none !important;
}

/* affiche notre + */
.cart-actions .disclosure-trigger::before{
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 300;
  color: #b7795f;
}
/* Réduction : supprimer le fond du carré */
.cart-actions .disclosure-trigger{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* masque totalement l'icône du thème */
.cart-actions .disclosure-trigger svg,
.cart-actions .disclosure-trigger::after{
  display: none !important;
}

/* notre symbole + */
.cart-actions .disclosure-trigger::before{
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 300;
  color: #b7795f;
}
/* RÉDUCTION — enlever le carré ET mettre + / − propre */
.cart-actions disclosure-custom.cart-discount .disclosure-trigger{
  position: relative;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;

  /* on cache tout contenu icône du thème */
  color: transparent !important;
}

/* tue tous les supports possibles du carré (svg, spans, pseudos) */
.cart-actions disclosure-custom.cart-discount .disclosure-trigger svg,
.cart-actions disclosure-custom.cart-discount .disclosure-trigger .icon,
.cart-actions disclosure-custom.cart-discount .disclosure-trigger [class*="icon"],
.cart-actions disclosure-custom.cart-discount .disclosure-trigger::after{
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* notre symbole */
.cart-actions disclosure-custom.cart-discount .disclosure-trigger::before{
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 300;
  color: #b7795f;
}

/* quand c’est ouvert → − */
.cart-actions disclosure-custom.cart-discount .disclosure-trigger[aria-expanded="true"]::before{
  content: "−";
}
/* RÉDUCTION — restaurer le texte, garder seulement le + / − */
.cart-actions disclosure-custom.cart-discount .disclosure-trigger{
  color: inherit !important;      /* remet “Réduction” */
  font-size: inherit !important;  /* sécurité */
}

/* On garde le symbole */
.cart-actions disclosure-custom.cart-discount .disclosure-trigger::before{
  color: #b7795f !important;
}
/* Bouton fermer menu mobile : remplacer rond + carré par croix */

.menu-drawer__close-button{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  width: 28px;
  height: 28px;
}

/* masque l’icône actuelle */
.menu-drawer__close-button svg,
.menu-drawer__close-button span{
  display: none !important;
}

/* croix */
.menu-drawer__close-button::before,
.menu-drawer__close-button::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #b7795f;
  transform-origin: center;
}

.menu-drawer__close-button::before{
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-drawer__close-button::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}
.eclora-hero__subtext{
  margin-top: 8px;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.4;
  color: #6f6a66;
}
.eclora-hero__text{
  margin-bottom: 18px;
}

.eclora-hero__subtext{
  margin-top: 0;
}
/* Espace entre les deux phrases du hero */
.eclora-hero__text + .eclora-hero__subtext{
  margin-top: 18px !important;   /* ajuste 14–28px */
}
/* Espace entre les 2 phrases du hero (solution robuste) */
.eclora-hero__subtext{
  margin-top: 0 !important;
  padding-top: 18px !important; /* ajuste 14–28px */
  display: block;
}
/* Espace entre les 2 phrases — DESKTOP */
@media (min-width: 990px){
  .eclora-section .eclora-hero__content .eclora-hero__text + .eclora-hero__subtext{
    padding-top: 18px !important; /* ajuste */
  }
}
@media (min-width: 990px){
  .eclora-hero__subtext{
    padding-top: 60px !important;
  }
}
/* Hero — espace entre les 2 phrases */
.eclora-hero__text + .eclora-hero__subtext{
  padding-top: 40px; /* ajuste */
}
/* Section bénéfices */
.eclora-benefits{
  padding: 44px 0;
}

.eclora-benefits__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.eclora-benefits__icon{
  font-size: 20px;
  line-height: 1;
  margin-bottom: 10px;
}

.eclora-benefits__title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
}

.eclora-benefits__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(26,26,26,.75);
}

/* mobile */
@media (max-width: 990px){
  .eclora-benefits{
    padding: 28px 0;
  }
  .eclora-benefits__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
/* Section bénéfices */
.eclora-benefits{
  padding: 40px 0;
}

.eclora-benefits__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.eclora-benefits__item{
  display: flex;
  flex-direction: column;
}

.eclora-benefits__icon{
  font-size: 18px;
  margin-bottom: 10px;
}

.eclora-bene
@media (max-width: 990px){

  .eclora-benefits__grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

}fits__title{
  font-size: 20px;
  margin-bottom: 8px;
}

.eclora-benefits__text{
  font-size: 14px;
  color: rgba(0,0,0,0.65);
}
/* Bénéfices */
/* BENEFITS */

.eclora-benefits__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 40px;
  align-items: start;
}

/* mobile */

@media (max-width: 750px){

  .eclora-benefits__grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

}

/* élargir la section bénéfices */

.eclora-benefits .eclora-container{
  max-width: 1200px;
  width: 100%;
}
/* BENEFITS — ciblage précis (sans base.css) */
.shopify-section section.eclora-benefits .eclora-benefits__grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 40px !important;
  width: 100% !important;
}

.shopify-section section.eclora-benefits .eclora-benefits__item{
  width: auto !important;
  max-width: none !important;
  grid-column: auto !important;
}
/* BENEFITS — FIX FINAL (à coller tout en bas) */

.eclora-benefits .eclora-container{
  max-width: 1200px;
  width: 100%;
}

.eclora-benefits__grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 40px !important;
  align-items: start !important;
}

@media (max-width: 750px){
  .eclora-benefits__grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
/* Force la grille des bénéfices */
.eclora-benefits__grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px !important;
}

.eclora-benefits__item{
  width: auto !important;
  max-width: none !important;
  grid-column: auto !important;
}
button.cart-items__remove {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px;
  color: #8f5f4a !important;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}

button.cart-items__remove > svg.cart-remove-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block !important;
  transform: none !important;
  transition: transform .2s ease, opacity .2s ease;
}

@media screen and (min-width: 750px) {
  button.cart-items__remove:hover {
    background: rgba(183, 121, 95, 0.10) !important;
    color: #a45f45 !important;
  }
}
button.cart-items__remove:hover > svg.cart-remove-icon {
  transform: scale(1.06);
}

button.cart-items__remove:active {
  transform: scale(0.97);
}
/* On garde uniquement le SVG qu'on a ajouté */
button.cart-items__remove::before,
button.cart-items__remove::after,
.cart-items__remove::before,
.cart-items__remove::after {
  content: none !important;
  display: none !important;
}

/* SVG poubelle : style propre */
button.cart-items__remove > svg.cart-remove-icon,
.cart-items__remove > svg.cart-remove-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block !important;
  fill: none !important;
  background: transparent !important;
}

/* Tous les traits du SVG */
button.cart-items__remove > svg.cart-remove-icon *,
.cart-items__remove > svg.cart-remove-icon * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}

/* Bouton : aucun fond parasite */
button.cart-items__remove,
.cart-items__remove {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Hover seulement sur desktop */
@media screen and (min-width: 750px) {
  button.cart-items__remove:hover {
    background: rgba(183, 121, 95, 0.10) !important;
    color: #a45f45 !important;
    border-radius: 999px !important;
  }

  button.cart-items__remove:hover > svg.cart-remove-icon {
    transform: scale(1.06);
  }
}

/* Mobile : pas de fond, pas d'effet carré */
@media screen and (max-width: 749px) {
  button.cart-items__remove,
  button.cart-items__remove:hover,
  button.cart-items__remove:active {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  button.cart-items__remove > svg.cart-remove-icon {
    transform: none !important;
  }
}
.cart-discount,
disclosure-custom.cart-discount {
  display: none !important;
}
.cart-discount,
disclosure-custom.cart-discount,
.cart__discount,
.cart-summary-discount,
.cart-discount-form {
  display: none !important;
}
button[aria-controls*="cart-discount"],
[id*="cart-discount"] {
  display: none !important;
}
disclosure-custom.cart-discount,
.cart-discount,
button[aria-controls="cart-discount-disclosure"] {
  display: none !important;
}
div.cart-actions > disclosure-custom.cart-discount {
  display: none !important;
}