/* ==========================================
   TABLE DES MATIÈRES
   ==========================================
     1. GRAINE DE LUMIÈRE
     2. HEADER
     3. CART SIDEBAR
     4. HERO
     5. COLLECTIONS
     6. BOUTIQUE
     7. PAGINATION
     8. VALEURS
     9. RITUEL
    10. CE QU'IL FAUT FAIRE
    11. TODO ROW — mise en page asymétrique alternée
    12. LES PIERRES
    13. PAGE PIERRE (pierre.html?id=X)
    14. CONSEILS
    15. BLOG
    16. À PROPOS
    17. NEWSLETTER
    18. CONTACT
    19. FOOTER
    20. TOAST NOTIFICATION
    21. LEGAL PAGES (CGV, Mentions, Confidentialité)
    22. FAQ
    23. DELIVERY / LIVRAISON
    24. GUIDE DES PIERRES
    25. CART PAGE (panier.html)
    26. PRODUCT DETAIL (produit.html)
    27. FOOTER LEGAL LINKS
    28. ARTICLE / BLOG & CONSEIL DETAIL PAGES
    29. PAGE PURIFICATION & RECHARGEMENT (refonte)
    30. ANIMATIONS
    31. SECTION UTILITIES
    32. BESTSELLERS / MINIMAL PRODUCTS
    33. CRÉATRICE
    34. NOTRE HISTOIRE — Plein écran immersif
    35. TESTIMONIALS
    36. BLOG PREVIEW (HOMEPAGE)
    37. RESPONSIVE
    38. FILTERS BAR — Accordéon horizontal
    39. CLEAN CARDS — Style épuré (badge + hover bouton)
   ==========================================
*/


/* ==========================================
   GRAINE DE LUMIÈRE
   Style Minimaliste / Luxe Doux
   ========================================== */

/* ---------- VARIABLES ---------- */
:root {
  --color-primary: #b48454;
  --color-primary-light: #d4a872;
  --color-primary-dark: #96693e;
  --color-dark: #241615;
  --color-accent: #a783cf;
  --color-text: #434343;
  --color-white: #ffffff;
  --color-cream: #faf8f5;
  --color-light: #f5f0eb;
  --color-border: #e8e0d8;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-ui: 'Quicksand', 'Helvetica Neue', sans-serif;

  /* ---------- HIÉRARCHIE TYPOGRAPHIQUE ----------
     fs-display : Hero, bannière (XXL)
     fs-h1      : Titre de section principal
     fs-h2      : Titre de bloc / sous-section
     fs-h3      : Titre de carte
     fs-h4      : Petit titre / sous-carte
     fs-eyebrow : Label / surtitre */
  --fs-display: clamp(2.6rem, 5vw, 4rem);
  --fs-h1: clamp(2rem, 3vw, 2.4rem);
  --fs-h2: clamp(1.5rem, 2.2vw, 1.85rem);
  --fs-h3: 1.3rem;
  --fs-h4: 1rem;

  /* ► Tailles des NOMS dans les cartes — RÉGLAGE GLOBAL (change ici une fois) */
  --fs-stone-name: 1.6rem;     /* noms des pierres (catalogue pierres.html) */
  --fs-product-name: 1.02rem;  /* noms des produits (bijoux, bougies, huiles, encens, favoris) */

  --radius: 4px;
  --radius-lg: 8px;
  --transition: 0.3s ease;
  --shadow-sm: 0 2px 8px rgba(36, 22, 21, 0.06);
  --shadow-md: 0 4px 20px rgba(36, 22, 21, 0.08);
  --shadow-lg: 0 8px 40px rgba(36, 22, 21, 0.12);
}

/* ---------- RESET ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* ► LEVIER GLOBAL DE LA TAILLE DU TEXTE — une seule valeur à changer.
     Toutes les tailles de police du site sont en rem (et AUCUN espacement ne l'est) :
     augmenter cette valeur agrandit donc uniquement le texte, sans toucher aux
     marges, aux gouttières ni aux hauteurs. 16px = réglage d'origine. */
  font-size: 17.5px;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

/* ---------- UTILITAIRES ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Top padding for inner pages (no hero) to account for fixed header */
.page-section {
  padding-top: 140px;
  padding-bottom: 100px;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header__tag {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary);
  margin-bottom: 12px;
  font-weight: 500;
}

.section-header__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--color-dark);
  font-style: italic;
}

.section-header__desc {
  font-size: 1.05rem;
  color: var(--color-text);
  max-width: 560px;
  margin: 16px auto 0;
  line-height: 1.8;
}

/* ---------- BOUTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: var(--transition);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
}

.btn--outline:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

.btn--sm {
  padding: 8px 20px;
  font-size: 0.75rem;
}

.btn--full {
  width: 100%;
}

/* ==========================================
   HEADER
   ========================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.header.scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo-img {
  height: 64px;   /* en-tête haut de 80px → reste de la respiration au-dessus/en dessous */
  width: auto;
}

.header__logo-main {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  line-height: 1.2;
}

.header__logo-sub {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header__nav-link {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text);
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.header__nav-link--no-link {
  cursor: pointer;
  user-select: none;
}

.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: var(--transition);
}

.header__nav-link:hover::after,
.header__nav-link.active::after {
  width: 100%;
}

.header__nav-link:hover,
.header__nav-link.active {
  color: var(--color-dark);
}

/* ---- Dropdown Boutique ---- */
.header__dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.header__dropdown-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  transition: transform 0.3s ease;
}

.header__dropdown:hover .header__dropdown-arrow {
  transform: rotate(180deg);
}

.header__dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  transform: translateY(8px);
  background: var(--color-white);
  min-width: 220px;
  white-space: nowrap;
  padding: 12px 0;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  border: 1px solid var(--color-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}

.header__dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.header__dropdown:hover .header__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Sous-menu Les Pierres : reste centré sous le lien parent car large
   (540–740px) — un alignement à gauche le ferait déborder à droite.
   Limité au desktop/tablette pour ne pas écraser le reset mobile (≤768px). */
@media (min-width: 769px) {
  .header__dropdown[data-group="pierres"] .header__dropdown-menu {
    left: 50%;
    transform: translateX(-50%) translateY(8px);
  }

  .header__dropdown[data-group="pierres"]:hover .header__dropdown-menu {
    transform: translateX(-50%) translateY(0);
  }
}

/* Cas spécifique : sous-menu Les Pierres (liste longue)
   → 4 colonnes pour rester compact.
   On utilise les COLONNES CSS (et non une grille) : la liste alphabétique se lit
   alors de HAUT EN BAS, colonne après colonne (A…G, puis H…M, etc.) — et non de
   gauche à droite ligne par ligne, ce qui rendait l'ordre A→Z illisible.
   Avantage : le nombre de lignes s'ajuste seul au nombre de pierres. */
.header__dropdown[data-group="pierres"] .header__dropdown-menu {
  min-width: 740px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 18px 24px;
  column-count: 4;
  column-gap: 12px;
  white-space: normal;
}
.header__dropdown[data-group="pierres"] .header__dropdown-link {
  break-inside: avoid;          /* jamais un nom coupé entre deux colonnes */
}
/* « Voir toutes les pierres » : en tête, sur toute la largeur, au-dessus des colonnes */
.header__dropdown[data-group="pierres"] .header__dropdown-link--featured {
  column-span: all;
  margin-bottom: 6px;
}

.header__dropdown[data-group="pierres"] .header__dropdown-link {
  padding: 8px 16px;
  font-size: 0.78rem;
}

/* Le premier lien "Voir toutes les pierres" prend toute la largeur en haut */
.header__dropdown[data-group="pierres"] .header__dropdown-link:first-child {
  grid-column: 1 / -1;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 6px;
  padding-bottom: 12px;
  color: var(--color-primary);
}

@media (max-width: 1100px) {
  .header__dropdown[data-group="pierres"] .header__dropdown-menu {
    min-width: 540px;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .header__dropdown[data-group="pierres"] .header__dropdown-menu {
    min-width: 280px;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Sur mobile (≤768px) : le sous-menu pierres affiche seulement les 5 entrées
   "featured" (Voir toutes les pierres + 4 pierres populaires) pour rester compact */
@media (max-width: 768px) {
  .header__dropdown[data-group="pierres"] .header__dropdown-menu {
    display: none;
    min-width: auto;
    width: 100%;
    max-height: none;
    padding: 4px 0;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .header__dropdown[data-group="pierres"].open .header__dropdown-menu {
    display: flex;
    flex-direction: column;
  }

  .header__dropdown[data-group="pierres"] .header__dropdown-link {
    padding: 8px 16px;
    font-size: 0.78rem;
    text-align: left;
  }

  /* Réinitialiser le style spécial du premier item car on est en flex column */
  .header__dropdown[data-group="pierres"] .header__dropdown-link:first-child {
    grid-column: auto;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 4px;
  }
}

.header__dropdown-link {
  display: block;
  padding: 10px 24px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease;
}

.header__dropdown-link--icon {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__dropdown-link--icon picture {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.header__dropdown-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  display: block;
}

.header__dropdown-link:hover {
  background: rgba(0,0,0,0.03);
  color: var(--color-primary);
}

.header__cart {
  position: relative;
  color: var(--color-dark);
  padding: 8px;
}

.header__cart:hover {
  color: var(--color-primary);
}

.header__cart-count {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.6rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Actions header : recherche / favoris / compte / panier */
.header__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.header__action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  transition: color 0.25s ease;
}

.header__action:hover {
  color: var(--color-primary);
}

.header__action-count {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 600;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Barre de recherche déroulante */
.header__search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 14px 28px rgba(36, 22, 21, 0.07);
  padding: 18px 24px;
  animation: searchDrop 0.25s ease;
}

@keyframes searchDrop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.header__search-form {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__search-form > svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.header__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-dark);
  padding: 10px 4px;
}

.header__search-input:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}

.header__search-submit {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-white);
  background: var(--color-dark);
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.25s ease;
}

.header__search-submit:hover {
  background: var(--color-primary);
}

.header__search-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  padding: 0 6px;
  transition: color 0.25s ease;
}

.header__search-close:hover {
  color: var(--color-dark);
}

/* Suggestions d'autocomplétion (petites cartes) */
.header__suggestions {
  max-width: 1200px;
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
}

.search-suggestion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s ease;
}

.search-suggestion:hover,
.search-suggestion.is-active {
  background: var(--color-light);
}

.search-suggestion__img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-light);
  flex-shrink: 0;
}

.search-suggestion__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.search-suggestion__name {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggestion__meta {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-top: 2px;
}

.header__suggestions-empty {
  padding: 16px 10px;
  font-family: var(--font-body);
  color: var(--color-text);
}

/* ==========================================
   PAGE COMPTE (connexion / inscription)
   ========================================== */
.auth {
  display: flex;
  justify-content: center;
}

.auth__card {
  width: 100%;
  max-width: 460px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.auth__tabs {
  display: flex;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}

.auth__tab {
  flex: 1;
  padding: 12px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: var(--transition);
}

.auth__tab.is-active {
  color: var(--color-dark);
  border-bottom-color: var(--color-primary);
}

.auth__form {
  display: none;
}

.auth__form.is-active {
  display: block;
}

.auth__group {
  margin-bottom: 16px;
}

.auth__group label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.auth__group input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-dark);
}

.auth__group input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.auth__submit {
  width: 100%;
  margin-top: 8px;
}

.auth__hint {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  margin-top: 18px;
}

.auth__hint a {
  color: var(--color-primary);
  text-decoration: none;
}

/* État vide générique (ex. favoris) */
.empty-state {
  text-align: center;
  padding: 30px 20px 70px;
}

.empty-state__icon {
  color: var(--color-primary);
  margin-bottom: 18px;
}

.empty-state p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 26px;
}

/* Burger */
.header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.header__burger span {
  width: 24px;
  height: 1.5px;
  background: var(--color-dark);
  transition: var(--transition);
}

.header__burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 5px);
}

.header__burger.active span:nth-child(2) {
  opacity: 0;
}

.header__burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -5px);
}

/* ==========================================
   CART SIDEBAR
   ========================================== */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100vh;
  background: var(--color-white);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transition: right 0.4s ease;
}

.cart-sidebar.open {
  right: 0;
}

.cart-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--color-border);
}

.cart-sidebar__header h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
}

.cart-sidebar__close {
  font-size: 1.8rem;
  color: var(--color-text);
  padding: 4px;
}

.cart-sidebar__close:hover {
  color: var(--color-dark);
}

.cart-sidebar__items {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.cart-sidebar__empty {
  text-align: center;
  color: var(--color-text);
  opacity: 0.6;
  font-style: italic;
  padding-top: 40px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-item__info {
  flex: 1;
}

.cart-item__name {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-dark);
}

/* Nom cliquable → fiche produit (tiroir « Mon panier » + page panier) */
.cart-item__link,
.cart-page__product-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cart-item__link:hover,
.cart-page__product-link:hover {
  color: var(--color-primary);
  border-bottom-color: currentColor;
}

.cart-item__price {
  font-size: 0.9rem;
  color: var(--color-primary);
  margin-top: 4px;
}

.cart-item__remove {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text);
  opacity: 0.5;
  padding: 4px;
}

.cart-item__remove:hover {
  opacity: 1;
  color: #c0392b;
}

.cart-sidebar__footer {
  padding: 24px;
  border-top: 1px solid var(--color-border);
}

.cart-sidebar__total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 3, 0.4);
  z-index: 1500;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ==========================================
   HERO
   ========================================== */
.hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  margin: 0;
  gap: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.hero__content {
  width: 100%;
  padding: 80px calc((100% - 1200px) / 2 + 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  order: 2;
}

.hero__tag {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: 24px;
}

.hero__text {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--color-text);
  margin-bottom: 40px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__visual {
  width: 100%;
  /* Hauteur plafonnée à 85vh : le hero tient dans l'écran (header + aperçu de la section
     suivante visibles → plus de scroll forcé avant le contenu). Format 3:2 sur écrans étroits,
     plancher 420px sur mobile. object-fit:cover recadre proprement si l'écran est plus large que 3:2.
     85vh (et non plus) pour garder un aperçu de la section suivante : c'est ce liseré qui
     invite à faire défiler. */
  height: max(420px, min(66.67vw, 85vh));
  display: flex;
  order: 1;
}

.hero__slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none; /* seul le slide actif est cliquable (CTA) */
}

.hero__slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Plus de fond flouté du tout. */
.hero__slide-bg {
  display: none;
}

.hero__slide img.hero__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* plein cadre, sans bandes */
}

/* Slides « collier » (2 & 3) : plein cadre + cadrage remonté pour révéler le bas du bijou. */
.hero__slider > .hero__slide:nth-of-type(2) img.hero__img,
.hero__slider > .hero__slide:nth-of-type(3) img.hero__img {
  object-position: center 70%;
}

/* Surimpression (lisibilité du texte) + légende par slide */
.hero__slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(36, 22, 21, 0.62) 0%, rgba(36, 22, 21, 0.15) 45%, transparent 75%);
  pointer-events: none;
}

.hero__slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 72px;
  z-index: 6;
}

.hero__slide-caption-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--color-white);
}

.hero__slide-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-white);
  background: rgba(180, 132, 84, 0.9);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.hero__slide-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.7rem, 3.8vw, 2.8rem);
  line-height: 1.28;
  color: var(--color-white);
  max-width: 620px;
  margin-bottom: 22px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
  .hero__slide-caption {
    bottom: 54px;
  }
  .hero__slide-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 2px;
    padding: 5px 13px;
    margin-bottom: 12px;
  }
}

.hero__slider-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
}

.hero__dot.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.hero__dot:hover {
  border-color: var(--color-primary);
}

/* ==========================================
   COLLECTIONS
   ========================================== */
.collections {
  padding: 100px 0 60px;
  background: var(--color-cream);
  overflow: hidden;
}

.collections__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}

.collections__arrows {
  display: flex;
  gap: 10px;
}

.collections__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  background: var(--color-white);
  cursor: pointer;
  transition: var(--transition);
}

.collections__arrow:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(180, 132, 84, 0.1);
}

.collections__track-wrapper {
  overflow: hidden;
  margin-bottom: 32px;
}

.collections__track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 calc((100% - 1200px) / 2 + 28px);
  cursor: grab;
  touch-action: pan-y;            /* glisser horizontal géré en JS, scroll vertical natif conservé */
  user-select: none;             /* pas de sélection de texte pendant le glisser */
}

.collections__track.is-dragging {
  cursor: grabbing;
}

/* Évite le "fantôme" de glisser-déposer sur les liens/images des cartes */
.collections__slide,
.collections__slide img {
  -webkit-user-drag: none;
  user-drag: none;
}

.collections__slide {
  position: relative;
  flex: 0 0 calc(70% - 12px);
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 36px;
  color: white;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.collections__slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(36, 22, 21, 0.2);
}

.collections__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(36, 22, 21, 0.9) 0%,
    rgba(36, 22, 21, 0.7) 45%,
    rgba(36, 22, 21, 0.4) 75%,
    rgba(36, 22, 21, 0.15) 100%
  );
  z-index: 1;
  transition: all 0.5s ease;
}

.collections__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.collections__slide:hover .collections__bg {
  transform: scale(1.05);
}

.collections__inner {
  position: relative;
  z-index: 2;
}

.collections__label {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary-light);
  display: block;
  margin-bottom: 10px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.collections__name {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-style: italic;
  margin-bottom: 10px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.collections__desc {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  opacity: 0.92;
  margin-bottom: 20px;
  line-height: 1.6;
  max-width: 440px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.collections__btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary-light);
  transition: var(--transition);
  padding: 10px 24px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  text-shadow: none;
}

.collections__slide:hover .collections__btn {
  border-color: var(--color-primary-light);
  background: rgba(180, 132, 84, 0.15);
}

.collections__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.collections__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
}

.collections__dot.active {
  background: var(--color-primary);
  width: 24px;
  border-radius: 4px;
}

/* ==========================================
   BANDEAU DÉFILANT (marquee — engagements / authenticité)
   ========================================== */
.marquee {
  background: var(--color-primary);
  overflow: hidden;
  padding: 16px 0;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__group {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================
   CHECKOUT — choix du mode de paiement
   ========================================== */
.pay-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.pay-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e0d8ce;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.pay-opt:hover { border-color: var(--color-primary); }

.pay-opt.is-selected {
  border-color: var(--color-primary);
  background: rgba(180, 132, 84, 0.05);
}

.pay-opt input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.pay-opt__body { display: flex; flex-direction: column; gap: 3px; }

.pay-opt__title {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-dark);
}

.pay-opt__desc {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.5;
  color: #8a7d70;
}

/* ==========================================
   PETITES ATTENTIONS — micro-animations
   ========================================== */

/* Panier : l'icône tressaille à l'ajout (classe .is-added posée puis retirée en JS) */
@keyframes cartAdded {
  0%   { transform: scale(1) rotate(0); }
  28%  { transform: scale(1.24) rotate(-8deg); }
  52%  { transform: scale(0.93) rotate(5deg); }
  76%  { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
.header__cart.is-added svg { animation: cartAdded 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes countPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.header__cart.is-added .header__cart-count { animation: countPop 0.65s ease-out; }

/* Cœur des cartes : petit rebond au clic */
@keyframes heartBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  55%  { transform: scale(0.88); }
  78%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.clean-card__fav.is-bounce { animation: heartBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Cœur de l'en-tête : léger battement au survol */
.header__action--wish svg { transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.header__action--wish:hover svg { transform: scale(1.15); }

/* Respect des personnes qui désactivent les animations (réglage système) */
@media (prefers-reduced-motion: reduce) {
  .header__cart.is-added svg,
  .header__cart.is-added .header__cart-count,
  .clean-card__fav.is-bounce,
  .header__action--wish:hover svg { animation: none; transform: none; }
}

.marquee__group li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--color-white);
}

.marquee__group li::after {
  content: '✦';
  margin: 0 38px;
  font-size: 0.6rem;
  font-style: normal;
  /* line-height:1 → la boîte colle au glyphe, sinon elle hérite de l'interligne du texte
     en 1.4rem et le centrage de la flexbox tombe à côté. Pas de translateY : l'étoile
     doit rester au centre optique des mots. */
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  .marquee__group li { font-size: 1.1rem; }
  .marquee__group li::after { margin: 0 24px; }
  .marquee__track { animation-duration: 24s; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================
   BOUTIQUE
   ========================================== */
.shop {
  padding: 120px 0;
}

/* ---------- SHOP LAYOUT: sidebar + grid ---------- */
/* ---------- SIDEBAR FILTRES ---------- */
.shop__filter-checkbox:checked + .shop__filter-label .shop__filter-check {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.shop__filter-checkbox:checked + .shop__filter-label .shop__filter-check svg {
  opacity: 1;
}

.shop__filter-checkbox:checked + .shop__filter-label {
  color: var(--color-dark);
  font-weight: 500;
}

.shop__sidebar-price-input::-webkit-outer-spin-button,
.shop__main-content .shop__sort {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

/* Legacy classes hidden */
/* ---------- TOOLBAR (search, price, sort) ---------- */
.shop__toolbar {
  display: none;
}

/* Search */
.shop__search {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.shop__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text);
  opacity: 0.4;
  pointer-events: none;
}

.shop__search-input {
  width: 100%;
  padding: 11px 16px 11px 40px;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  background: var(--color-white);
  color: var(--color-dark);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  transition: var(--transition);
}

.shop__search-input::placeholder {
  color: var(--color-text);
  opacity: 0.45;
}

.shop__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(180, 132, 84, 0.08);
}

/* Price filter */
.shop__price-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop__price-label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text);
  white-space: nowrap;
}

.shop__price-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop__price-input {
  width: 72px;
  padding: 10px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-dark);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  text-align: center;
  transition: var(--transition);
  -moz-appearance: textfield;
}

.shop__price-input::-webkit-outer-spin-button,
.shop__price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shop__price-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.shop__price-sep {
  font-family: var(--font-ui);
  color: var(--color-text);
  opacity: 0.4;
}

/* Sort */
.shop__sort {
  position: relative;
}

/* ---------- STATUS BAR (active filters + count) ---------- */
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-dark);
  animation: fadeInUp 0.25s ease forwards;
}

.filter-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.7rem;
  color: var(--color-text);
  opacity: 0.5;
  transition: var(--transition);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-family: var(--font-ui);
}

.filter-tag__remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

/* ---------- PRODUCT CARD ---------- */

.product-card.hidden,
.product-card.page-hidden {
  display: none;
}

/* ==========================================
   PAGINATION
   ========================================== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 56px auto 0;
  flex-wrap: wrap;
}

.pagination__btn,
.pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.pagination__btn:hover:not([disabled]),
.pagination__num:hover:not(.pagination__num--active) {
  background: var(--color-cream);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination__btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.pagination__btn svg {
  display: block;
}

.pagination__num--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  cursor: default;
}

.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 38px;
  color: var(--color-text);
  opacity: 0.5;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .pagination__btn,
  .pagination__num {
    min-width: 34px;
    height: 34px;
    font-size: 0.8rem;
  }
}

.product-card__quick {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  background: rgba(36, 22, 21, 0.85);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 14px;
  transition: var(--transition);
}

.product-card:hover .product-card__quick {
  bottom: 0;
}

.product-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-card__bottom .btn {
  width: 100%;
  text-align: center;
}

/* ==========================================
   VALEURS
   ========================================== */
.values {
  padding: 48px 0;
  background: var(--color-white);
  color: var(--color-dark);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.values__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(180, 132, 84, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(167, 131, 207, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.values__item {
  padding: 16px 12px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.values__item:hover {
  transform: translateY(-4px);
}

.values__icon {
  display: block;
  margin: 0 auto 14px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.values__item:hover .values__icon {
  transform: scale(1.1);
}

.values__item h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.values__item:hover h4 {
  color: var(--color-primary);
}

.values__item p {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  opacity: 0.5;
  line-height: 1.6;
}

/* ==========================================
   RITUEL
   ========================================== */
.ritual {
  background: var(--color-cream);
}

.ritual__tag {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 16px;
}

.ritual__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin: 0 auto;
  text-align: center;
  max-width: 1000px;
}

.ritual__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ritual__step:hover {
  transform: translateY(-6px);
}

.ritual__num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 300;
  color: var(--color-primary);
  margin-bottom: 16px;
  line-height: 1;
  opacity: 0.7;
}

.ritual__icon {
  display: block;
  margin: 0 auto 20px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ritual__step:hover .ritual__icon {
  transform: scale(1.1);
}

.ritual__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.ritual__desc {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.7;
  max-width: 240px;
}

@media (max-width: 768px) {
  .ritual__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 40px 0 24px;
  }
}

/* ==========================================
   CE QU'IL FAUT FAIRE
   ========================================== */
.section.todo,
.section.bestsellers,
.section.testimonials {
  background: var(--color-cream);
}

.todo__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin: 60px 0 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.todo__card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  min-height: 440px;
}

.todo__image {
  position: relative;
  width: 42%;
  flex-shrink: 0;
  overflow: hidden;
}

.todo__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.todo__card:hover .todo__image img {
  transform: scale(1.05);
}

.todo__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(36, 22, 21, 0.45) 0%, rgba(36, 22, 21, 0) 55%);
  pointer-events: none;
}

.todo__body {
  padding: 36px 36px 36px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

.todo__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.todo__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.todo__card:hover::before {
  transform: scaleX(1);
}

.todo__num {
  position: absolute;
  top: 22px;
  left: 28px;
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-style: italic;
  font-weight: 300;
  color: #fff;
  line-height: 1;
  z-index: 2;
  letter-spacing: -1px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.todo__num::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--color-primary-light);
}

.todo__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 14px;
}

.todo__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 24px;
  width: 100%;
}

.todo__list li {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text);
  padding: 8px 0 8px 22px;
  position: relative;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-border);
}

.todo__list li:last-child {
  border-bottom: none;
}

.todo__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 12px;
  height: 1px;
  background: var(--color-primary);
}

.todo__desc {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1;
}

.todo__link {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  font-weight: 500;
  transition: gap 0.3s ease;
}

.todo__card:hover .todo__link {
  color: var(--color-primary-dark);
}

@media (max-width: 900px) {
  .todo__card {
    flex-direction: column;
    min-height: 0;
  }
  .todo__image {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 768px) {
  .todo__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .todo__body {
    padding: 24px 24px 32px;
  }
  .todo__num {
    font-size: 2.6rem;
    top: 14px;
    left: 20px;
  }
}

/* ==========================================
   TODO ROW — mise en page asymétrique alternée
   ========================================== */
/* Les deux blocs partagent une grille commune en lignes ÉGALES (`1fr`) : quelle
   que soit la longueur des textes saisis au back-office, les deux lignes font la
   même hauteur — donc les deux images aussi. Un simple `min-height` ne suffisait
   pas : dès qu'un texte dépassait, sa ligne grandissait seule et les visuels
   redevenaient inégaux. */
.todo-rows {
  display: grid;
  grid-auto-rows: 1fr;
}

.todo-row {
  display: grid;
  /* Colonnes SYMÉTRIQUES (moitié / moitié). Avec 1.1fr/1fr, la séparation
     texte-image tombait à 746 px sur un bloc et à 678 px sur l'autre : les deux
     images n'étaient pas alignées verticalement d'une ligne à la suivante.
     À 50/50, la couture est au même endroit partout et les visuels sont égaux. */
  grid-template-columns: 1fr 1fr;
  align-items: stretch;   /* l'image occupe toute sa moitié, bord à bord */
  /* HAUTEUR COMMUNE AUX DEUX BLOCS — c'est elle qui garantit deux images de
     taille identique. Sans elle, la hauteur suivait la longueur du texte d'à
     côté (623 px d'un côté, 589 px de l'autre) et les visuels étaient inégaux.
     640 px couvre les deux textes actuels avec de la marge. */
  min-height: 640px;
  background: var(--color-white);
}

.todo-row--reverse {
  background: var(--color-cream);
  /* Colonnes symétriques héritées de .todo-row : plus rien à inverser ici,
     les deux moitiés sont égales dans les deux sens. */
}

.todo-row--reverse .todo-row__visual {
  order: 2;
}

/* Visuel — PLEINE MOITIÉ, bord à bord (le visuel remplit toute sa cellule).
   Ces images viennent du back-office : impossible de garantir leurs proportions.
   Le cadre est donc imposé par la cellule (hauteur commune définie sur .todo-row),
   et object-fit:cover recadre l'image au centre : quelle que soit l'image
   téléversée (portrait, paysage, minuscule), elle remplit le cadre sans jamais
   être déformée ni déborder. */
.todo-row__visual {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

/* L'image est SORTIE DU FLUX (position absolue) : c'est ce qui garantit qu'elle
   ne peut jamais imposer sa hauteur au bloc. En flux normal, une image portrait
   téléversée depuis l'admin (ex. 200×1400) étirait la ligne à plus de 5000 px de
   haut — `object-fit` ne s'applique pas tant que le conteneur n'a pas de hauteur
   définie. Ici la hauteur vient de la ligne, et l'image se contente de la remplir. */
.todo-row__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* recadrage centré : jamais de déformation */
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.todo-row__visual:hover img {
  transform: scale(1.04);
}

.todo-row__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(36, 22, 21, 0.35) 0%, rgba(36, 22, 21, 0) 50%);
  pointer-events: none;
  z-index: 1;
}

.todo-row__num {
  position: absolute;
  top: 40px;
  left: 48px;
  font-family: var(--font-heading);
  font-size: 5rem;
  font-style: italic;
  font-weight: 300;
  line-height: 0.9;
  color: #fff;
  z-index: 2;
  letter-spacing: -2px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.todo-row__num::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 52px;
  height: 2px;
  background: var(--color-primary-light);
}

.todo-row--reverse .todo-row__num {
  left: auto;
  right: 48px;
  text-align: right;
}

.todo-row--reverse .todo-row__num::after {
  left: auto;
  right: 0;
}

.todo-row--reverse .todo-row__visual::before {
  background: linear-gradient(225deg, rgba(36, 22, 21, 0.35) 0%, rgba(36, 22, 21, 0) 50%);
}

/* Contenu — aligné avec le container (max-width 1200) */
.todo-row__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 80px 80px 80px;
  padding-right: max(24px, calc(50vw - 600px));
  position: relative;
}

.todo-row--reverse .todo-row__content {
  padding-left: max(24px, calc(50vw - 600px));
  padding-right: 80px;
}

/* Icône spirale — DANS LE FLUX, juste au-dessus du libellé.
   Elle était épinglée en absolu à 62 px du haut du bloc ; le texte, lui, est
   centré verticalement. En passant la ligne à 640 px de haut, un grand vide
   s'est creusé entre l'icône et le titre (~64 px). En flux, elle suit le texte
   quelle que soit la hauteur du bloc, et l'écart reste constant. */
.todo-row__content::before {
  content: "";
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin-bottom: 6px;
  background-color: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M11 12a1 1 0 1 1 2 0a3 3 0 1 1 -6 0a5 5 0 1 1 10 0a7 7 0 1 1 -14 0'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M11 12a1 1 0 1 1 2 0a3 3 0 1 1 -6 0a5 5 0 1 1 10 0a7 7 0 1 1 -14 0'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* (l'icône est désormais dans le flux : plus aucun calage horizontal à faire) */

.todo-row__label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--color-primary);
  margin-top: 16px;
  margin-bottom: 24px;
  display: block;
}

.todo-row__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: 28px;
}

.todo-row__amp {
  color: var(--color-primary);
}

.todo-row__desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-text);
  margin-bottom: 28px;
}

.todo-row__list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.todo-row__list li {
  padding: 12px 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.5;
  border-bottom: 1px solid var(--color-border);
}

.todo-row__list li:last-child {
  border-bottom: none;
}

.todo-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  align-self: flex-start;
  transition: gap 0.3s ease, color 0.3s ease;
}

.todo-row__cta:hover {
  color: var(--color-primary-dark);
  gap: 22px;
}

.todo-row__cta svg {
  transition: transform 0.3s ease;
}

/* Responsive */
@media (max-width: 960px) {
  .todo-row,
  .todo-row--reverse {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .todo-row__visual {
    height: 320px;   /* mobile : les blocs s'empilent, hauteur fixe pour l'image */
  }
  .todo-row--reverse .todo-row__visual,
  .todo-row--reverse .todo-row__content {
    order: initial;
  }
  .todo-row__content {
    padding: 48px 32px 56px;
  }
  /* (icône dans le flux : rien à repositionner en mobile) */
  .todo-row__num {
    top: 28px;
    left: 32px;
    font-size: 3.5rem;
  }
  .todo-row--reverse .todo-row__num {
    left: 32px;
    right: auto;
    text-align: left;
  }
  .todo-row--reverse .todo-row__num::after {
    left: 0;
    right: auto;
  }
}

/* ==========================================
   LES PIERRES
   ========================================== */
.stones {
  padding: 120px 0;
  background: var(--color-cream);
}

.stones__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 30px;
}

@media (max-width: 720px) {
  .stones__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
}

/* Carte pierre = lien épuré : image (fondue dans le crème, conservée) + nom dessous ;
   au survol, un indice de 3 vertus apparaît. Clic → fiche descriptif pierre-<slug>.html */
.stone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  background: transparent;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.stone-card:hover {
  transform: translateY(-5px);
}

/* Image : pierre détourée (WebP transparent) — flotte sans cadre */
.stone-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-size: 72%;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.stone-card:hover .stone-card__media {
  transform: scale(1.05);
}

.stone-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-stone-name);
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-top: 10px;
  transition: color 0.25s ease;
}

.stone-card:hover .stone-card__name {
  color: var(--color-primary);
}

/* Indice (3 vertus) révélé au survol */
.stone-card__hint {
  font-family: var(--font-ui);
  font-size: 0.64rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-top: 5px;
  min-height: 0.9em;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.stone-card:hover .stone-card__hint {
  opacity: 1;
  transform: translateY(0);
}

.virtue-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Boutons sous chaque carte pierre */
.stone-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.stone-card__btn {
  flex: 1;
  min-width: 140px;
  text-align: center;
  padding: 11px 18px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  border-radius: var(--radius);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.stone-card__btn--ghost {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-border);
}

.stone-card__btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-cream);
}

.stone-card__btn--primary {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.stone-card__btn--primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

@media (max-width: 480px) {
  .stone-card__actions {
    flex-direction: column;
    gap: 8px;
  }
  .stone-card__btn {
    width: 100%;
  }
}

/* ==========================================
   PAGE PIERRE (pierre.html?id=X)
   ========================================== */
.pierre-page {
  background: var(--color-white);
}

.pierre-hero {
  position: relative;
  min-height: 38vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
  padding: 90px 24px 40px;
}

.pierre-hero__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.85);
  transform: scale(1.05);
}

.pierre-hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 0%, rgba(36, 22, 21, 0.55) 100%),
    linear-gradient(180deg, rgba(36, 22, 21, 0.3) 0%, rgba(36, 22, 21, 0.65) 100%);
  pointer-events: none;
}

.pierre-hero__breadcrumb {
  position: relative;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
  flex-wrap: wrap;
  justify-content: center;
}

.pierre-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.pierre-hero__breadcrumb a:hover {
  color: var(--color-primary-light);
}

.pierre-hero__breadcrumb span:not(:last-child) {
  color: var(--color-primary-light);
}

.pierre-hero__content {
  position: relative;
  z-index: 2;
}

.pierre-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: 20px;
}

.pierre-hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 14px;
}

.pierre-hero__chakra {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary-light);
}

.pierre-intro {
  padding: 80px 0 40px;
  background: var(--color-white);
}

.pierre-intro__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.pierre-intro__ornament {
  display: block;
  margin: 0 auto 32px;
}

.pierre-intro__desc {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-style: italic;
  line-height: 1.7;
  color: var(--color-dark);
  font-weight: 300;
  margin-bottom: 36px;
}

.pierre-intro__virtues {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.pierre-intro__virtues li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  background: var(--color-cream);
  border-radius: 100px;
  border: 1px solid var(--color-border);
}

/* ==========================================
   FICHE PIERRE — 4 sections détaillées
   (minéralogie / vertus / symbolique / chakras)
   ========================================== */
.pierre-details {
  padding: 20px 0 90px;
  background: var(--color-white);
}

.pierre-details__grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.pierre-details__card {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px 34px;
}

.pierre-details__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.pierre-details__num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
}

.pierre-details__title {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--color-dark);
}

.pierre-details__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--color-text);
}

.pierre-details__text em {
  font-style: italic;
}

@media (max-width: 768px) {
  .pierre-details__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   FICHE PIERRE — 2 CTA (bijoux / acheter)
   ========================================== */
.pierre-cta {
  padding: 0 0 90px;
  background: var(--color-white);
}

.pierre-cta__row {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
}

.pierre-cta__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 24px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.pierre-cta__btn--ghost {
  background: transparent;
  color: var(--color-dark);
}

.pierre-cta__btn--ghost:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

.pierre-cta__btn--primary {
  background: var(--color-dark);
  color: var(--color-white);
}

.pierre-cta__btn--primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

@media (max-width: 600px) {
  .pierre-cta__row {
    flex-direction: column;
  }
}

/* État vide de la grille bijoux (filtre par pierre sans résultat) */
.shop__empty {
  display: none;
  text-align: center;
  padding: 60px 20px 20px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text);
}

.shop__empty.is-visible {
  display: block;
}

.shop__empty a {
  color: var(--color-primary);
  text-decoration: none;
}

.pierre-products {
  padding: 100px 0;
  background: var(--color-cream);
}

.pierre-products__empty {
  text-align: center;
  padding: 60px 24px;
}

.pierre-products__empty p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-text);
  margin-bottom: 24px;
}

/* Produit unique : la pierre elle-même */
.pierre-single-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1000px;
  margin: 40px auto 0;
  background: var(--color-white);
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  align-items: center;
}

.pierre-single-product__image {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-cream);
}

.pierre-single-product__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.pierre-single-product:hover .pierre-single-product__image img {
  transform: scale(1.05);
}

.pierre-single-product__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pierre-single-product__type {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary);
}

.pierre-single-product__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-style: italic;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.1;
}

.pierre-single-product__chakra {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent);
  margin: 0;
}

.pierre-single-product__price {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--color-dark);
  margin: 8px 0;
}

.pierre-single-product__desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 8px;
}

.pierre-single-product__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pierre-single-product__actions .btn {
  flex: 1;
  min-width: 180px;
  text-align: center;
}

@media (max-width: 768px) {
  .pierre-single-product {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px;
  }
}

/* ==========================================
   CONSEILS
   ========================================== */
.tips {
  padding: 120px 0;
}

.tips__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}

.tip-card {
  padding: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.tip-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.tip-card__number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--color-primary);
  opacity: 0.4;
  margin-bottom: 12px;
}

.tip-card h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.tip-card p {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ==========================================
   BLOG
   ========================================== */
.blog {
  padding: 120px 0;
  background: var(--color-cream);
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.blog-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: var(--color-white);
  padding: 4px 12px;
  border-radius: 20px;
  color: var(--color-primary);
}

.blog-card__content h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin: 8px 0 12px;
  line-height: 1.4;
}

.blog-card__content p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* ==========================================
   À PROPOS
   ========================================== */
.about {
  padding: 120px 0;
}

.about__wrapper {
  display: flex;
  gap: 64px;
  align-items: center;
}

.about__image {
  flex: 1;
}

.about__img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.about__content {
  flex: 1;
}

.about__content .section-header__tag,
.about__content .section-header__title {
  text-align: left;
}

.about__content p {
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 16px;
}

.about__signature {
  margin-top: 24px;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--color-primary);
}

/* ==========================================
   NEWSLETTER
   ========================================== */
.newsletter {
  padding: 80px 0;
  background: var(--color-dark);
  color: var(--color-white);
}

.newsletter__wrapper {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.newsletter__wrapper h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 300;
  font-style: italic;
  margin-bottom: 12px;
}

.newsletter__wrapper p {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 32px;
}

.newsletter__form {
  display: flex;
  gap: 12px;
}

.newsletter__form input {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  transition: var(--transition);
}

.newsletter__form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.newsletter__form input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Variante claire : bandes "Bientôt disponible" (alchimie) sur fond crème.
   Sans ça, l'input blanc-sur-transparent du fond sombre est invisible. */
.newsletter--light {
  color: var(--color-dark);
  border: 1px solid var(--color-border);
}

.newsletter--light input {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-dark);
}

.newsletter--light input::placeholder {
  color: rgba(36, 22, 21, 0.45);
}

.newsletter--light input:focus {
  border-color: var(--color-primary);
}

/* ==========================================
   CONTACT
   ========================================== */
.contact {
  padding: 120px 0;
  background: var(--color-cream);
}

.contact__wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}

.contact__info-item {
  margin-bottom: 28px;
}

.contact__info-item h4 {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.contact__info-item p {
  font-size: 1rem;
  color: var(--color-dark);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact__form input,
.contact__form select,
.contact__form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-dark);
  background: var(--color-white);
  transition: border-color 0.25s ease;
}

.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.contact__form textarea {
  resize: vertical;
}

.contact__form select {
  appearance: none;
  cursor: pointer;
}

/* ==========================================
   FOOTER
   ========================================== */
.footer {
  background: #efe7dd;
  color: var(--color-dark);
  border-top: 1px solid var(--color-border);
  padding: 80px 0 30px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.1fr;
  gap: 56px;
  padding-bottom: 40px;
}

.footer__logo-img {
  height: 62px;
  width: auto;
  margin-bottom: 22px;
}

.footer__brand p {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 16px;
  max-width: 340px;
}

.footer__brand p:last-child {
  margin-bottom: 0;
}

.footer__links h4,
.footer__newsletter h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.3px;
  margin-bottom: 22px;
  color: var(--color-dark);
  text-transform: none;
}

.footer__links a {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text);
  padding: 6px 0;
  transition: color 0.2s ease;
  opacity: 1;
}

.footer__links a:hover {
  color: var(--color-primary);
}

/* CTA « chemin de vie » dans le footer */
.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 20px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: var(--radius);
  transition: background 0.25s ease, transform 0.25s ease;
}

.footer__cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.footer__cta svg {
  color: var(--color-white);
}

/* Section « Découvrez votre chemin de vie » (home, teaser → calculateur) */
.lifepath {
  background: var(--color-cream);
}

.lifepath__card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 40px;
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-light) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 56px;
  overflow: hidden;
}

.lifepath__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.lifepath__title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.lifepath__text {
  font-family: var(--font-body);
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 28px;
  max-width: 460px;
}

.lifepath__visual {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.lifepath__halo {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 132, 84, 0.16), transparent 70%);
}

.lifepath__sparkle {
  position: relative;
  opacity: 0.9;
}

.lifepath__num {
  position: absolute;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-primary);
  opacity: 0.4;
  pointer-events: none;
}

.lifepath__num--a { font-size: 2.6rem; top: 6px; right: 44px; }
.lifepath__num--b { font-size: 1.8rem; bottom: 22px; left: 40px; color: var(--color-accent); }
.lifepath__num--c { font-size: 1.5rem; top: 46px; left: 24px; }

@media (max-width: 768px) {
  .lifepath__card {
    grid-template-columns: 1fr;
    padding: 36px 24px;
    text-align: center;
  }
  .lifepath__text {
    margin-left: auto;
    margin-right: auto;
  }
  .lifepath__visual {
    height: 150px;
    order: -1;
  }
  .lifepath__title {
    font-size: 1.8rem;
  }
}

/* ==========================================
   PAGE CHEMIN DE VIE (calculateur numérologie)
   ========================================== */
.cdv__intro {
  max-width: 680px;
  margin: 0 auto 36px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--color-text);
}

.cdv__form {
  max-width: 520px;
  margin: 0 auto;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.cdv__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-dark);
  margin-bottom: 8px;
}

/* Champs empilés : libellé au-dessus, saisie pleine largeur */
.cdv__field { margin-bottom: 16px; }
.cdv__field:last-of-type { margin-bottom: 24px; }

.cdv__input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-dark);
  background: var(--color-white);
}

.cdv__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.cdv__submit { width: 100%; }

/* ==========================================
   Présentation de collection — sous la bannière des pages bijoux.
   Texte éditable au backoffice (collections.description) : 1er bloc = accroche,
   blocs suivants = paragraphes (séparés par une ligne vide).
   ========================================== */
.collection-intro {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.collection-intro__tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.collection-intro__text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-text);
  margin-bottom: 12px;
}

.collection-intro__text:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .collection-intro { margin-bottom: 30px; }
  .collection-intro__text { font-size: 0.95rem; }
}

/* ==========================================
   Pages « Alchimie d'intérieur » (CMS brut, <body class="page-accroche">) :
   le texte d'introduction sous le titre reprend l'accroche élégante de la page
   Attrape-soleil (Cormorant italique) — même police que .collection-intro__tagline.
   Ciblé sur ces pages uniquement (pas le reste du site) ; on épargne le petit
   intitulé .section-header__tag (label en capitales, il garde sa police).
   Le texte reste éditable dans l'admin (Pages) — seul le style est appliqué ici.
   ========================================== */
.page-accroche .section-header p:not(.section-header__tag) {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-dark);
}

.cdv__result {
  max-width: 760px;
  margin: 44px auto 0;
  text-align: center;
  animation: searchDrop 0.3s ease;
}

.cdv__result-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
}

.cdv__number {
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-primary);
  margin: 8px 0;
}

.cdv__kw {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.cdv__text {
  max-width: 560px;
  margin: 0 auto 32px;
  font-family: var(--font-body);
  line-height: 1.8;
  color: var(--color-text);
}

.cdv__stone-card {
  display: flex;
  gap: 24px;
  text-align: left;
  align-items: center;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  max-width: 620px;
  margin: 0 auto;
}

.cdv__stone-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.cdv__stone-info {
  min-width: 0;
}

.cdv__stone-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-primary);
}

.cdv__stone-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-dark);
  margin: 4px 0 6px;
}

.cdv__stone-chakra {
  font-family: var(--font-body);
  color: var(--color-accent);
  margin-bottom: 8px;
}

.cdv__stone-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 16px;
}

.cdv__stone-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .cdv__stone-card {
    flex-direction: column;
    text-align: center;
  }
  .cdv__stone-img {
    width: 100%;
    height: 200px;
  }
  .cdv__stone-actions {
    justify-content: center;
  }
  .cdv__number {
    font-size: 4rem;
  }
}

/* Newsletter column */
.footer__newsletter-desc {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 18px;
}

.footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.footer__newsletter-field {
  position: relative;
  display: block;
}

.footer__newsletter-label {
  position: absolute;
  top: 8px;
  left: 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text);
  pointer-events: none;
  transition: transform 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

.footer__newsletter-field input {
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-dark);
  outline: none;
  transition: border-color 0.2s ease;
}

.footer__newsletter-field input:focus {
  border-bottom-color: var(--color-primary);
}

.footer__newsletter-field input:focus + .footer__newsletter-label,
.footer__newsletter-field input:not(:placeholder-shown) + .footer__newsletter-label {
  transform: translateY(-16px);
  font-size: 0.7rem;
  color: var(--color-primary);
}

.footer__newsletter-btn {
  align-self: flex-start;
  padding: 12px 38px;
  border: 1px solid var(--color-dark);
  border-radius: 40px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-dark);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.footer__newsletter-btn:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

.footer__newsletter-feedback {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-primary);
  min-height: 1em;
}

.footer__socials {
  display: flex;
  gap: 14px;
  margin-top: 28px;
}

.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 50%;
  color: var(--color-dark);
  transition: all 0.2s ease;
}

.footer__socials a:hover {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.footer__bottom {
  padding-top: 24px;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.footer__bottom p {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-text);
  opacity: 0.7;
}

/* ==========================================
   TOAST NOTIFICATION
   ========================================== */
.toast {
  position: fixed;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  padding: 14px 28px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 3000;
  transition: bottom 0.4s ease;
}

.toast.show {
  bottom: 30px;
}

/* ==========================================
   LEGAL PAGES (CGV, Mentions, Confidentialité)
   ========================================== */
.legal .legal__content {
  max-width: 800px;
  margin: 0 auto;
}

.legal__article {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.legal__article:last-child {
  border-bottom: none;
}

.legal__article h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.legal__article p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 12px;
}

.legal__article p:last-child {
  margin-bottom: 0;
}

.legal__article a {
  color: var(--color-primary);
}

.legal__article a:hover {
  color: var(--color-primary-dark);
}

.legal__list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.legal__list li {
  font-size: 0.95rem;
  line-height: 1.8;
  padding: 4px 0 4px 20px;
  position: relative;
}

.legal__list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

.legal__list li a {
  color: var(--color-primary);
}

/* ==========================================
   FAQ
   ========================================== */
.faq__content {
  max-width: 800px;
  margin: 0 auto;
}

.faq__section {
  margin-bottom: 48px;
}

.faq__section-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
  transition: var(--transition);
}

.faq__item:hover {
  border-color: var(--color-primary-light);
}

.faq__item.active {
  border-color: var(--color-primary);
}

.faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-dark);
  text-align: left;
  background: var(--color-white);
  cursor: pointer;
  transition: var(--transition);
}

.faq__question:hover {
  background: var(--color-cream);
}

.faq__question[aria-expanded="true"] {
  background: var(--color-cream);
}

.faq__icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--color-primary);
}

.faq__question[aria-expanded="true"] .faq__icon {
  transform: rotate(180deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq__answer.open {
  max-height: 300px;
}

.faq__answer p {
  padding: 0 24px 20px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text);
}

.faq__answer a {
  color: var(--color-primary);
}

.faq__cta {
  text-align: center;
  margin-top: 60px;
  padding: 48px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
}

.faq__cta p {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 20px;
}

/* ==========================================
   DELIVERY / LIVRAISON
   ========================================== */
.delivery__section {
  max-width: 800px;
  margin: 0 auto 60px;
}

.delivery__subtitle {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.delivery__section > p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 24px;
}

.delivery-table__wrapper {
  overflow-x: auto;
  margin-bottom: 16px;
}

.delivery-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.delivery-table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  padding: 14px 20px;
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-weight: 500;
}

.delivery-table tbody td {
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-dark);
  vertical-align: top;
}

.delivery-table tbody td strong {
  display: block;
  margin-bottom: 2px;
}

.delivery-table__detail {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text);
  opacity: 0.7;
}

.delivery-table__highlight {
  background: var(--color-cream);
}

.delivery-table__highlight td {
  font-weight: 500;
  color: var(--color-primary-dark);
}

.delivery__note {
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0.7;
  font-style: italic;
}

.delivery__features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.delivery__feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
}

.delivery__feature-icon {
  font-size: 1.4rem;
  color: var(--color-primary);
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.delivery__feature h4 {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.delivery__feature p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
}

.delivery__steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 32px 0;
}

.delivery__step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.delivery__step-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 300;
  color: var(--color-primary);
  opacity: 0.5;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  line-height: 1;
}

.delivery__step h4 {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.delivery__step p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
}

.delivery__notice {
  padding: 24px;
  background: var(--color-cream);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-top: 24px;
}

.delivery__notice p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
}

.delivery__cta {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
}

.delivery__cta p {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 20px;
}

/* ==========================================
   GUIDE DES PIERRES
   ========================================== */
.guide__section {
  max-width: 900px;
  margin: 0 auto 60px;
}

.guide__subtitle {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.guide__section > p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 24px;
}

.guide__text-block p {
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 16px;
}

.guide__needs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 24px;
}

.guide__need-card {
  padding: 28px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}

.guide__need-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}

.guide__need-card h4 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.guide__need-card ul {
  list-style: none;
}

.guide__need-card li {
  font-size: 0.9rem;
  line-height: 1.7;
  padding: 4px 0;
  color: var(--color-text);
}

.guide__need-card li strong {
  color: var(--color-dark);
}

/* Chakras */
.guide__chakras {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.guide__chakra {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--chakra-color, var(--color-primary));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  transition: var(--transition);
}

.guide__chakra:hover {
  box-shadow: var(--shadow-sm);
}

.guide__chakra-number {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--chakra-color, var(--color-primary));
  flex-shrink: 0;
  width: 36px;
  text-align: center;
  line-height: 1;
}

.guide__chakra-info h4 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.guide__chakra-location {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--chakra-color, var(--color-primary));
  margin-bottom: 8px;
}

.guide__chakra-info p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text);
}

.guide__chakra-stones {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-dark);
  font-weight: 500;
  margin-top: 4px;
}

/* Guide CTA */
.guide__cta {
  text-align: center;
  max-width: 600px;
  margin: 20px auto 0;
  padding: 48px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
}

.guide__cta h2 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.guide__cta p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 24px;
}

.guide__cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================
   CART PAGE (panier.html)
   ========================================== */
.cart-page__empty {
  text-align: center;
  padding: 60px 0 100px;
}

.cart-page__empty-icon {
  color: var(--color-border);
  margin-bottom: 24px;
}

.cart-page__empty h2 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.cart-page__empty p {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 32px;
}

.cart-page__content {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.cart-page__table-wrapper {
  overflow-x: auto;
  margin-bottom: 40px;
}

.cart-page__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
}

.cart-page__table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  padding: 14px 16px;
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-weight: 500;
}

.cart-page__table tbody td {
  padding: 20px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-dark);
  font-size: 0.9rem;
  vertical-align: middle;
}

.cart-page__table .cart-page__product-name {
  font-weight: 500;
}

.cart-page__qty-controls {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.cart-page__qty-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--color-dark);
  transition: var(--transition);
}

.cart-page__qty-btn:hover {
  background: var(--color-cream);
  color: var(--color-primary);
}

.cart-page__qty-value {
  width: 40px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  padding: 6px 0;
}

.cart-page__remove-btn {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text);
  opacity: 0.5;
  transition: var(--transition);
}

.cart-page__remove-btn:hover {
  opacity: 1;
  color: #c0392b;
}

.cart-page__summary {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 400px;
  margin-left: auto;
}

.cart-page__summary-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text);
  padding: 10px 0;
}

.cart-page__summary-row--total {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-dark);
  border-top: 2px solid var(--color-border);
  margin-top: 8px;
  padding-top: 16px;
}

.cart-page__summary-info {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-primary);
  margin: 16px 0;
  font-style: italic;
}

.cart-page__continue {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text);
}

.cart-page__continue:hover {
  color: var(--color-primary);
}

/* ==========================================
   PRODUCT DETAIL (produit.html)
   ========================================== */
/* Bannière des pages catégories bijoux : image + overlay + titre centré + fil d'Ariane
   (image gérable en admin → Contenu du site). */
.cat-banner {
  position: relative;
  width: 100%;
  min-height: clamp(190px, 24vw, 320px);
  padding: 96px 20px 36px;   /* le top dégage le header fixe (~81px) pour que le titre reste visible */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.cat-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(36, 22, 21, 0.45);
}
.cat-banner__inner {
  position: relative;
  z-index: 1;
  color: #fff;
}
.cat-banner__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.cat-banner__crumb {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.92);
}
.cat-banner__crumb a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.cat-banner__crumb a:hover { text-decoration: underline; }
.cat-banner__sep { margin: 0 9px; opacity: 0.6; }

/* --- Bandeau + corps d'un article de blog (/blog/<slug>) --- */
.article-banner .cat-banner__overlay { background: linear-gradient(180deg, rgba(36, 22, 21, 0.34), rgba(36, 22, 21, 0.62)); }
.article-banner .cat-banner__crumb { margin-bottom: 14px; }
.article-banner__meta {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin: 16px 0 0;
}
.article-lede {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.42rem);
  line-height: 1.55;
  color: #6b5d50;
  margin: 0 0 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid #ece3d6;
}
.article-body { line-height: 1.85; color: #3a302a; font-size: 1.04rem; }
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 20px; }
.article-body h2 { font-family: var(--font-heading); font-weight: 500; font-size: 1.7rem; color: var(--color-dark); margin: 40px 0 14px; }
.article-body h3 { font-family: var(--font-heading); font-weight: 500; font-size: 1.35rem; color: var(--color-dark); margin: 30px 0 10px; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0; }
.article-body a { color: var(--color-primary); text-decoration: underline; }
.article-body blockquote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--color-primary); font-style: italic; color: #6b5d50; }
.related-articles { background: var(--color-cream); border-top: 1px solid #ece3d6; }
.related-articles .section__title { margin-bottom: 28px; }

.breadcrumb {
  padding: 16px 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
}

/* Fiches produit : le fil d'Ariane + la section produit doivent dégager
   le header fixe (sinon ils passent dessous / sont collés). */
.breadcrumb.page-section {
  padding-top: 140px;
}

.breadcrumb a {
  color: var(--color-primary);
}

.breadcrumb a:hover {
  text-decoration: none;
}

.breadcrumb__sep {
  color: var(--color-text);
  opacity: 0.4;
  margin: 0 8px;
}

.breadcrumb__current {
  color: var(--color-text);
  opacity: 0.6;
}

.breadcrumb__nav {
  font-family: var(--font-ui);
  font-size: 0.72rem;
}

.breadcrumb__nav a {
  color: var(--color-primary);
}

.breadcrumb__nav a:hover {
  text-decoration: none;
}

/* Bandeau en haut des fiches produit : fond crème dégradé (gauche→droite),
   image du produit à gauche (entière, non zoomée) + nom en texte. */
/* ==========================================================================
   BANDEAU FICHE PRODUIT — hero d'introduction, style joaillerie
   --------------------------------------------------------------------------
   AUCUNE photo : le produit est présenté plus bas dans la page, le bandeau
   sert uniquement d'entrée en matière. Tout le décor est fabriqué en CSS
   (grain de papier, dégradé crème, halos organiques, filets dorés) — donc
   zéro requête image, et le même rendu pour tous les produits.
   Hiérarchie : catégorie → nom → séparateur → phrase.
   ========================================================================== */
.prod-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;   /* confine le mix-blend-mode du grain à ce bandeau */
  box-sizing: border-box;
  min-height: 340px;
  /* top : dégage le header fixe (~81px). Ces valeurs calent la hauteur totale
     dans la cible de 320-380px avec les 4 niveaux de contenu. */
  padding: 98px 24px 30px;
  background:
    /* lumière diffuse, haute et centrée */
    radial-gradient(115% 75% at 50% -10%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 62%),
    /* formes organiques très discrètes — évoquent le minéral sans le dessiner */
    radial-gradient(42% 56% at 16% 42%, rgba(196, 166, 124, 0.16) 0%, transparent 70%),
    radial-gradient(38% 50% at 86% 62%, rgba(180, 132, 84, 0.11) 0%, transparent 72%),
    radial-gradient(30% 40% at 62% 12%, rgba(214, 198, 170, 0.14) 0%, transparent 70%),
    /* dégradé crème de base */
    linear-gradient(165deg, #fdfcfa 0%, #f8f3ec 48%, #f0e7d9 100%);
}

/* Grain de papier — bruit fractal SVG en data-URI (aucun fichier à charger) */
.prod-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* Filets dorés ultra fins, dans l'angle haut droit, estompés par un masque radial */
.prod-banner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: min(380px, 46vw);
  height: min(380px, 46vw);
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 26px,
    rgba(180, 132, 84, 0.16) 26px 27px
  );
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%);
}

.prod-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---- Catégorie ---- */
.prod-banner__cat {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4.5px;
  color: var(--color-primary);
  margin: 0 0 14px;
}

/* ---- Nom du produit ---- */
.prod-banner__name {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--color-dark);
  margin: 0;
}

/* ---- Séparateur : filets dorés + losange ---- */
.prod-banner__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(280px, 62vw);
  margin: 22px 0 20px;
}

.prod-banner__sep-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 132, 84, 0.6));
}
.prod-banner__sep-line:last-child {
  background: linear-gradient(90deg, rgba(180, 132, 84, 0.6), transparent);
}

.prod-banner__sep-mark {
  font-size: 0.6rem;
  line-height: 1;
  color: var(--color-primary);
  transition: color 0.55s ease, text-shadow 0.55s ease, transform 0.55s ease;
}

/* Au survol du bandeau, le losange s'allume doucement — rien de plus */
.prod-banner:hover .prod-banner__sep-mark {
  color: #d8ac74;
  text-shadow: 0 0 12px rgba(216, 172, 116, 0.85);
  transform: scale(1.15);
}

/* ---- Phrase inspirante ---- */
.prod-banner__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.8;
  color: rgba(67, 67, 67, 0.78);
  margin: 0;
  max-width: 100%;   /* la phrase tient sur une seule ligne ; elle ne se replie qu'en mobile */
  white-space: pre-line;   /* les retours à la ligne saisis en admin restent possibles */
}

/* ---- Apparition : fondu + légère montée, en cascade ---- */
@keyframes prodBannerRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.prod-banner__cat,
.prod-banner__name,
.prod-banner__sep,
.prod-banner__quote {
  animation: prodBannerRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.prod-banner__name  { animation-delay: 0.1s; }
.prod-banner__sep   { animation-delay: 0.2s; }
.prod-banner__quote { animation-delay: 0.3s; }

@media (max-width: 700px) {
  .prod-banner {
    min-height: 300px;
    padding: 96px 20px 36px;
  }
  .prod-banner__cat { font-size: 0.62rem; letter-spacing: 3.4px; margin-bottom: 14px; }
  .prod-banner__sep { margin: 20px 0 18px; }
  .prod-banner__quote { font-size: 0.95rem; line-height: 1.85; }
}

/* Respect des personnes qui désactivent les animations (réglage système) */
@media (prefers-reduced-motion: reduce) {
  .prod-banner__cat,
  .prod-banner__name,
  .prod-banner__sep,
  .prod-banner__quote { animation: none; }
  .prod-banner:hover .prod-banner__sep-mark { transform: none; }
}

.product-detail {
  padding: 100px 0 80px;   /* espace sous le bandeau (le bandeau dégage déjà le header) */
}

.product-detail__crumb {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.5px;
  color: #8a7d70;
  margin: 6px 0 18px;
}
.product-detail__crumb a { color: #8a7d70; text-decoration: none; transition: color 0.2s ease; }
.product-detail__crumb a:hover { color: var(--color-primary); }
.product-detail__crumb-sep { margin: 0 8px; opacity: 0.55; }

.product-detail__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.product-detail__image {
  aspect-ratio: 1;
  background: var(--color-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.product-detail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail__category {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.product-detail__name {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.product-detail__price {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 24px;
}

.product-detail__description {
  margin-bottom: 28px;
}

.product-detail__description p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 12px;
}

.product-detail__virtues {
  margin-bottom: 32px;
  padding: 24px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
}

.product-detail__virtues h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.product-detail__virtues ul {
  list-style: none;
}

.product-detail__virtues li {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text);
  padding: 4px 0 4px 20px;
  position: relative;
}

.product-detail__virtues li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 0.6rem;
  top: 8px;
}

.product-detail__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 32px;
}

/* Sélecteur de taille (fiche produit pierre)
   Onglets soulignés : filet fin sous toute la rangée, et un soulignement
   épais en couleur primaire qui passe localement sous le label actif. */
.size-tabs {
  display: flex;
  margin: 24px 0 32px;
}

.size-tabs__btn {
  flex: 1;
  padding: 14px 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.3px;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.size-tabs__btn:hover {
  color: var(--color-primary);
}

.size-tabs__btn.is-active {
  color: var(--color-primary);
  font-weight: 500;
  border-bottom: 2.5px solid var(--color-primary);
  /* Compense les 1.5px supplémentaires pour que le bas du bouton reste aligné */
  padding-bottom: 12.5px;
}

.product-detail__quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.product-detail__qty-btn {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--color-dark);
  transition: var(--transition);
}

.product-detail__qty-btn:hover {
  background: var(--color-cream);
  color: var(--color-primary);
}

.product-detail__qty-input {
  width: 48px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-dark);
  height: 44px;
  background: none;
}

.product-detail__qty-input:focus {
  outline: none;
}

.product-detail__add-cart {
  flex: 1;
}

.product-detail__delivery {
  display: grid;
  grid-template-columns: 1fr;   /* mobile : une seule colonne */
  column-gap: 20px;
  row-gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

/* Deux colonnes dès qu'il y a la place, remplies par COLONNE : les 2 premiers à gauche,
   les 2 derniers à droite. Le placement est explicite car une grille remplit par RANGÉE
   par défaut — sans ça, « Livraison » et « Emballage » se retrouveraient côte à côte. */
@media (min-width: 601px) {
  /* Colonnes volontairement inégales : les libellés de gauche (« Emballage soigné et
     pochette incluse ») sont plus longs que ceux de droite (« Garantie 6 mois »).
     À 1fr 1fr, celui de gauche se replierait sur deux lignes. */
  .product-detail__delivery { grid-template-columns: 1.14fr 0.86fr; }
  .product-detail__delivery-item:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .product-detail__delivery-item:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .product-detail__delivery-item:nth-of-type(3) { grid-column: 2; grid-row: 1; }
  .product-detail__delivery-item:nth-of-type(4) { grid-column: 2; grid-row: 2; }
}

.product-detail__delivery-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text);
}

.product-detail__delivery-item svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Mention d'attente (pierre naturelle / fait main), sous le bloc réassurance : elle doit
   être lue AVANT l'achat. Discrète et non alarmante — l'unicité est un argument de vente. */
.product-detail__notice {
  grid-column: 1 / -1;   /* court sous les deux colonnes, jamais piégée dans une cellule */
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.65;
  color: #8a7d70;
}

/* ==========================================
   ONGLETS FICHE PRODUIT
   (Détails / Caractéristiques / Entretien / Avis)
   ========================================== */
.product-tabs {
  padding: 0 0 80px;
}

.product-tabs__nav {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 36px;
  overflow-x: auto;            /* défilement horizontal sur mobile */
  scrollbar-width: none;
}

.product-tabs__nav::-webkit-scrollbar {
  display: none;
}

.product-tabs__btn {
  flex: 0 0 auto;
  margin-right: 36px;
  padding: 18px 2px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;         /* chevauche la bordure du conteneur */
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.product-tabs__btn:hover {
  color: var(--color-dark);
}

.product-tabs__btn.is-active {
  color: var(--color-dark);
  border-bottom-color: var(--color-primary);
}

.product-tabs__panel {
  display: none;
}

.product-tabs__panel.is-active {
  display: block;
  animation: fadeTab 0.4s ease;
}

@keyframes fadeTab {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-tabs__panel h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  color: var(--color-dark);
  margin-bottom: 18px;
}

.product-tabs__panel p {
  font-family: var(--font-body);
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 16px;
  max-width: 760px;
}

/* Tableau de caractéristiques */
.product-specs {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
}

.product-specs tr {
  border-bottom: 1px solid var(--color-border);
}

.product-specs th,
.product-specs td {
  padding: 14px 0;
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
}

.product-specs th {
  width: 38%;
  padding-right: 24px;
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--color-dark);
}

.product-specs td {
  font-family: var(--font-body);
  color: var(--color-text);
}

/* Entretien — sous-blocs */
.product-care__item {
  max-width: 760px;
  margin-bottom: 26px;
}

.product-care__item h4 {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}

/* Avis clients */
.product-reviews__summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 28px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.product-reviews__score {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-dark);
}

.product-reviews__stars {
  color: var(--color-primary);
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.product-reviews__count {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text);
  margin-top: 4px;
}

.product-review {
  max-width: 760px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
}

.product-review:last-child {
  border-bottom: none;
}

.product-review__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.product-review__author {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--color-dark);
}

.product-review__date {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-accent);
}

.product-review__stars {
  color: var(--color-primary);
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.product-review__text {
  font-family: var(--font-body);
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

/* Related products */
.related-products {
  padding: 80px 0;
  background: var(--color-cream);
}

/* ==========================================
   FOOTER LEGAL LINKS
   ========================================== */
.footer__legal {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
}

.footer__legal a {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--color-text);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.footer__legal a:hover {
  opacity: 1;
  color: var(--color-primary);
}

.footer__bottom .footer__signature {
  margin-top: 14px;
  letter-spacing: 0.5px;
}

.footer__signature .footer__heart {
  color: #e0245e;
  font-style: normal;
}

.footer__signature a {
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.footer__signature a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ==========================================
   ARTICLE / BLOG & CONSEIL DETAIL PAGES
   ========================================== */
.article {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0 80px;
}

.article__breadcrumb {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text);
  margin-bottom: 32px;
}

.article__breadcrumb a {
  color: var(--color-text);
  opacity: 0.6;
}

.article__breadcrumb a:hover {
  opacity: 1;
  color: var(--color-primary);
}

.article__breadcrumb span {
  margin: 0 8px;
  opacity: 0.3;
}

.article__meta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.article__category {
  display: inline-block;
  padding: 4px 14px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 20px;
  font-weight: 500;
}

.article__date {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-text);
  opacity: 0.6;
}

.article__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: 32px;
}

.article__image {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 40px;
}

.article__image img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.article__content {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-text);
}

.article__content p {
  margin-bottom: 20px;
}

.article__content h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin: 40px 0 16px;
}

.article__content h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin: 32px 0 12px;
}

.article__content ul,
.article__content ol {
  margin: 16px 0 24px 24px;
}

.article__content li {
  margin-bottom: 8px;
  font-size: 0.95rem;
  line-height: 1.7;
}

.article__content blockquote {
  padding: 20px 24px;
  background: var(--color-cream);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: 24px 0;
  font-style: italic;
  color: var(--color-dark);
}

.article__content strong {
  color: var(--color-dark);
  font-weight: 600;
}

.article__content .article__tip {
  padding: 20px 24px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  margin: 24px 0;
  font-size: 0.9rem;
}

.article__content .article__tip strong {
  color: var(--color-primary);
}

.article__content .article__warning {
  padding: 20px 24px;
  background: #fff5f5;
  border-left: 3px solid #c0392b;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: 24px 0;
  font-size: 0.9rem;
}

/* Article steps */
.article__steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 32px 0;
}

.article__step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
}

.article__step-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 300;
  color: var(--color-primary);
  opacity: 0.6;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  line-height: 1;
}

.article__step h4 {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.article__step p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 0;
}

.article__step h4 + p {
  margin-bottom: 14px;
}

.article__list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.article__list li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.article__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.article__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 12px;
  height: 1px;
  background: var(--color-primary);
}

.article__list li strong {
  color: var(--color-dark);
  font-weight: 500;
}

/* ==========================================
   PAGE PURIFICATION & RECHARGEMENT (refonte)
   ========================================== */
.purif {
  background: var(--color-white);
}

/* ----- BANNER ----- */
.purif-banner {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}

.purif-banner__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 25%;
  transform: scale(1.05);
  filter: brightness(0.9);
  animation: purifKenBurns 20s ease-out infinite alternate;
}

@keyframes purifKenBurns {
  from { transform: scale(1.05) translateY(0); }
  to   { transform: scale(1.12) translateY(-2%); }
}

.purif-banner__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 0%, rgba(36, 22, 21, 0.5) 100%),
    linear-gradient(180deg, rgba(36, 22, 21, 0.25) 0%, rgba(36, 22, 21, 0.65) 100%);
  pointer-events: none;
}

.purif-banner__breadcrumb {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  gap: 10px;
  z-index: 2;
  white-space: nowrap;
}

.purif-banner__breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.purif-banner__breadcrumb a:hover {
  color: var(--color-primary-light);
}

.purif-banner__crumb-sep {
  color: var(--color-primary-light);
}

.purif-banner__content {
  position: relative;
  z-index: 2;
  padding: 24px;
  max-width: 1000px;
}

.purif-banner__eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: 28px;
}

.purif-banner__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.purif-banner__word {
  font-size: var(--fs-display);
  letter-spacing: -0.02em;
}

.purif-banner__amp {
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--color-primary-light);
  line-height: 1;
  margin: -8px 0;
  font-style: italic;
  font-weight: 300;
}

.purif-banner__sub {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 4px;
  text-transform: lowercase;
}

.purif-banner__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 50px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 2;
  overflow: hidden;
}

.purif-banner__scroll span {
  display: block;
  width: 100%;
  height: 30%;
  background: var(--color-primary-light);
  animation: purifScroll 2.5s ease-in-out infinite;
}

@keyframes purifScroll {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(330%); }
}

/* ----- LEAD ----- */
.purif-lead {
  padding: 100px 0 80px;
  background: var(--color-white);
}

.purif-lead__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.purif-lead__quote {
  display: block;
  margin: 0 auto 24px;
}

.purif-lead__text {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-dark);
  font-weight: 300;
  margin-bottom: 36px;
}

.purif-lead__text em {
  color: var(--color-primary);
  font-style: italic;
}

.purif-lead__ornament {
  display: flex;
  justify-content: center;
}

/* ----- STAGE BRIDGE ----- */
.stage-bridge {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-cream) 100%);
  padding: 24px 0 40px;
  text-align: center;
}

.stage-bridge__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 600px;
  margin: 0 auto;
}

.stage-bridge__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
  opacity: 0.5;
}

.stage-bridge__symbol {
  animation: purifSpin 30s linear infinite;
}

@keyframes purifSpin {
  to { transform: rotate(360deg); }
}

.stage-bridge__caption {
  font-family: var(--font-heading);
  /* Agrandi (demande cliente oct. 2026) : cette ligne sert de TITRE à l'étape II,
     elle doit être aussi présente que « La Purification ». Était 1rem (trop petit). */
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  font-style: italic;
  color: var(--color-primary);
  margin-top: 16px;
  letter-spacing: 1px;
  line-height: 1.2;
}

/* ----- STAGE NUMBERING (Roman) ----- */

.stage__num::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.5;
}

.stage__header--right .stage__num::after {
  left: auto;
  right: 0;
}

/* ----- NOTE FINALE (raffinée) ----- */

.purif__note-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-primary);
}

.purif__note-corner--tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.purif__note-corner--tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
.purif__note-corner--bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
.purif__note-corner--br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }

.purif__note-symbol {
  margin: 0 auto 24px;
  display: block;
  animation: purifSpin 60s linear infinite;
}

.purif__note-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 24px;
}

.purif__note-text em {
  color: var(--color-primary);
  font-style: italic;
  font-weight: 400;
}

/* ----- RESPONSIVE BANNER ----- */
@media (max-width: 768px) {
  .purif-banner {
    min-height: 70vh;
  }
  .purif-banner__breadcrumb {
    top: 100px;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
  }
  .purif-banner__eyebrow {
    letter-spacing: 4px;
  }
  .purif-lead {
    padding: 64px 0 48px;
  }
  .purif__note {
    padding: 56px 28px;
  }
  .purif__note-corner {
    width: 22px;
    height: 22px;
  }
  .stage-bridge__inner {
    gap: 12px;
  }
}

/* HERO */
.purif__hero {
  padding: 60px 0 80px;
  text-align: center;
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-white) 100%);
  position: relative;
  overflow: hidden;
}

.purif__hero::before,

.purif__hero::before {
  width: 280px;
  height: 280px;
  background: rgba(180, 132, 84, 0.15);
  top: -80px;
  left: -80px;
}

.purif__hero::after {
  width: 240px;
  height: 240px;
  background: rgba(167, 131, 207, 0.12);
  bottom: -80px;
  right: -80px;
}

.purif__breadcrumb {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-text);
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.purif__breadcrumb a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.purif__breadcrumb a:hover {
  color: var(--color-primary);
}

.purif__breadcrumb span:not(:last-child) {
  color: var(--color-primary);
}

.purif__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--color-primary);
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.purif__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  line-height: 1.15;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.purif__amp {
  color: var(--color-primary);
  font-style: italic;
  font-weight: 300;
}

.purif__sub {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--color-text);
  font-weight: 300;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.purif__ornament {
  display: flex;
  justify-content: center;
  margin: 24px 0 36px;
  position: relative;
  z-index: 1;
}

.purif__lead {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.85;
  max-width: 720px;
  margin: 0 auto;
  color: var(--color-text);
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* STAGE */
.stage {
  padding: 80px 0;
  position: relative;
}

.stage--purif {
  background: var(--color-white);
}

.stage--charge {
  background: var(--color-cream);
}

.stage__header {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 56px;
  max-width: 800px;
}

.stage__header--right {
  margin-left: auto;
  flex-direction: row;
  text-align: right;
  justify-content: flex-end;
}

.stage__header--right .stage__heading {
  text-align: right;
}

.stage__num {
  font-family: var(--font-heading);
  font-size: 5rem;
  font-style: italic;
  font-weight: 300;
  line-height: 0.9;
  color: var(--color-primary);
  opacity: 0.5;
  flex-shrink: 0;
}

.stage__heading {
  flex: 1;
}

.stage__label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary);
  display: block;
  margin-bottom: 10px;
}

.stage__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 14px;
  line-height: 1.2;
}

.stage__intro {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-text);
}

/* METHODS GRID */
.stage__methods {
  display: grid;
  gap: 24px;
}

.stage__methods--2 {
  grid-template-columns: repeat(2, 1fr);
}

.stage__methods--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* METHOD CARD */
.method {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.stage--purif .method {
  background: var(--color-cream);
}

.method::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.method:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.method:hover::before {
  opacity: 1;
}

.method__icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(180, 132, 84, 0.08), rgba(167, 131, 207, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.method:hover .method__icon-wrap {
  transform: scale(1.05) rotate(-3deg);
}

.method__icon {
  display: block;
}

.method__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 14px;
}

.method__desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 20px;
  flex: 1;
}

.method__desc strong {
  color: var(--color-dark);
  font-weight: 500;
  font-style: italic;
}

.method__tag {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  padding: 6px 14px;
  background: rgba(180, 132, 84, 0.08);
  border-radius: 100px;
}

.method__tag--warn {
  color: var(--color-accent);
  background: rgba(167, 131, 207, 0.1);
}

/* NOTE FINALE */
.purif__note-wrap {
  padding: 80px 0 100px;
  background: var(--color-white);
}

.purif__note {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-white) 100%);
  position: relative;
}

.purif__note::before,

.purif__note::before {
  left: -20px;
}

.purif__note::after {
  right: -20px;
}

.purif__note-icon {
  margin: 0 auto 20px;
}

.purif__note-text {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-dark);
  margin-bottom: 16px;
  border: 0;
  padding: 0;
}

.purif__note-caption {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .stage__methods--2,
  .stage__methods--3 {
    grid-template-columns: 1fr;
  }
  .stage__header,
  .stage__header--right {
    flex-direction: column !important;
    text-align: left !important;
    gap: 16px;
  }
  .stage__header--right .stage__heading {
    text-align: left;
  }
  .stage__num {
    font-size: 3.5rem;
  }
}

@media (max-width: 600px) {
  .product-tabs__btn {
    margin-right: 22px;
    font-size: 0.72rem;
    letter-spacing: 1px;
    padding: 16px 2px;
  }
  .product-reviews__summary {
    gap: 14px;
  }
  .product-reviews__score {
    font-size: 2.3rem;
  }
  .purif__hero {
    padding: 40px 0 60px;
  }
  .stage {
    padding: 56px 0;
  }
  .method {
    padding: 28px 22px;
  }
}

/* Chakra grid in article */
.article__chakras-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 32px;
}

.article__chakra-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--chakra-color, var(--color-primary));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  transition: var(--transition);
}

.article__chakra-item:hover {
  box-shadow: var(--shadow-sm);
}

.article__chakra-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--chakra-color, var(--color-primary));
  flex-shrink: 0;
  opacity: 0.7;
}

.article__chakra-info h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 2px;
}

.article__chakra-info .article__chakra-location {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--chakra-color, var(--color-primary));
  margin-bottom: 6px;
  display: block;
}

.article__chakra-info p {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 4px;
}

.article__chakra-stone {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-dark);
}

/* Needs grid in article */
.article__needs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 24px 0 32px;
}

.article__need-card {
  padding: 24px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.article__need-card h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.article__need-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article__need-card li {
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 3px 0 3px 16px;
  position: relative;
}

.article__need-card li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 0.5rem;
  top: 7px;
}

/* Stone profile (blog-choisir-pierres) */
.stone-profile {
  margin: 56px 0;
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  scroll-margin-top: 100px;
}

.stone-profile__header {
  display: flex;
  gap: 28px;
  align-items: center;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.stone-profile__image {
  display: block;
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.stone-profile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stone-profile__intro h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  margin: 0 0 6px;
  border: 0;
  padding: 0;
}

.stone-profile__tagline {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 12px;
  font-style: italic;
}

.stone-profile__chakra-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  background: var(--color-cream);
  border-radius: 20px;
  color: var(--color-primary);
}

.stone-profile__sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.stone-profile__section {
  padding: 20px 22px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
}

.stone-profile__section h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 0;
}

.stone-profile__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  flex-shrink: 0;
}

.stone-profile__section p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 768px) {
  .stone-profile {
    padding: 22px;
    margin: 40px 0;
  }

  .stone-profile__header {
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }

  .stone-profile__image {
    width: 110px;
    height: 110px;
  }

  .stone-profile__intro h2 {
    font-size: 1.8rem;
  }

  .stone-profile__sections {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Article CTA */
.article__cta {
  text-align: center;
  padding: 40px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  margin: 48px 0 0;
}

.article__cta h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.article__cta p {
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: 20px;
}

/* Related articles */
.article__related {
  margin-top: 60px;
  padding-top: 48px;
  border-top: 1px solid var(--color-border);
}

.article__related h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  text-align: center;
  margin-bottom: 32px;
}

.article__related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Conseil tip-card link */
.tip-card__link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
  margin-top: 16px;
  transition: var(--transition);
}

.tip-card__link:hover {
  color: var(--color-primary-dark);
  letter-spacing: 1.5px;
}

/* ==========================================
   ANIMATIONS
   ========================================== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.bestsellers__grid > *:nth-child(2),
.collections__grid > *:nth-child(2),
.testimonials__grid > *:nth-child(2),
.blog-preview__grid > *:nth-child(2) {
  transition-delay: 0.1s;
}

.bestsellers__grid > *:nth-child(3),
.collections__grid > *:nth-child(3),
.testimonials__grid > *:nth-child(3),
.blog-preview__grid > *:nth-child(3) {
  transition-delay: 0.2s;
}

.bestsellers__grid > *:nth-child(4),
.collections__grid > *:nth-child(4),
.testimonials__grid > *:nth-child(4),
.blog-preview__grid > *:nth-child(4) {
  transition-delay: 0.3s;
}

/* ==========================================
   SECTION UTILITIES
   ========================================== */
.section {
  padding: 100px 0;
}

.section__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  text-align: center;
  margin-bottom: 10px;
}

.section__subtitle {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 64px;
  opacity: 0.7;
}

.section__cta {
  text-align: center;
  margin-top: 48px;
}

/* Accueil — enchaînement « Découvrir nos pierres » → « Guide pratique ».
   Les deux sections cumulaient leurs 100px de marge (200px de vide entre le
   bouton et le sur-titre). On resserre CE raccord uniquement, sans toucher
   au rythme général des sections du site. */
.section.stones-intro { padding-bottom: 44px; }
.section.todo {
  padding-top: 56px;
  /* Le fond crème s'arrête PILE au bas de la dernière image : sans ça, la section
     ajoutait 100px de crème sous le visuel, qui semblait « flotter » au-dessus du
     bord. La respiration avec la section suivante vient de son propre padding. */
  padding-bottom: 0;
}

/* ==========================================
   BESTSELLERS / MINIMAL PRODUCTS
   ========================================== */
.minimal-product:hover .minimal-product__image img {
  transform: scale(1.04);
  opacity: 0.92;
}

.minimal-product:hover .minimal-product__hover {
  opacity: 1;
  transform: translateY(0);
}

/* Legacy grid (boutique page) */
.bestsellers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.product-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: var(--transition);
  position: relative;
}

.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}

.product-card__image {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.product-card:hover .product-card__img {
  transform: scale(1.06);
}

.product-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  padding: 5px 14px;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 20px;
  z-index: 2;
}

.product-card__badge.badge--bestseller {
  background: var(--color-primary);
}

.product-card__info {
  padding: 22px;
}

.product-card__name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.product-card__name a {
  color: inherit;
}

.product-card__name a:hover {
  color: var(--color-primary);
}

.product-card__stone {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-accent);
  margin-bottom: 12px;
  font-weight: 500;
}

.product-card__price {
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  white-space: nowrap;
}

.product-card__info .btn {
  width: 100%;
  padding: 12px 20px;
  font-size: 0.68rem;
}

/* ==========================================
   CRÉATRICE
   ========================================== */
/* ==========================================
   NOTRE HISTOIRE — Plein écran immersif
   ========================================== */
.histoire {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('assets/images/histoire-bg.webp') center/cover no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

.histoire__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(36, 22, 21, 0.75) 0%,
    rgba(36, 22, 21, 0.6) 50%,
    rgba(36, 22, 21, 0.75) 100%
  );
  pointer-events: none;
}

.histoire__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  padding: 80px 28px;
}

.histoire__label {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--color-primary);
  display: block;
  margin-bottom: 28px;
}

.histoire__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-white);
  line-height: 1.6;
  margin-bottom: 32px;
}

.histoire__signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 36px;
}

.histoire__dash {
  width: 32px;
  height: 1px;
  background: var(--color-primary);
}

.histoire__name {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.6);
}

.btn--light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  color: var(--color-white);
  background: transparent;
  transition: var(--transition);
}

.btn--light:hover {
  border-color: var(--color-primary);
  background: rgba(180, 132, 84, 0.15);
  color: var(--color-primary-light);
}

/* Keep old creatrice styles for apropos page */
.creatrice {
  background: var(--color-white);
}

.creatrice__grid {
  display: flex;
  gap: 64px;
  align-items: center;
}

.creatrice__image {
  flex: 0 0 380px;
}

.creatrice__img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.creatrice__content {
  flex: 1;
}

.creatrice__title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 24px;
}

.creatrice__content p {
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 16px;
  color: var(--color-text);
}

.creatrice__content .btn {
  margin-top: 12px;
}

/* ==========================================
   TESTIMONIALS
   ========================================== */
.testimonials {
  background: var(--color-light);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.testimonials__card {
  background: var(--color-white);
  padding: 36px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  text-align: center;
  transition: var(--transition);
}

.testimonials__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.testimonials__stars {
  color: var(--color-primary);
  font-size: 1rem;
  letter-spacing: 3px;
  margin-bottom: 18px;
}

.testimonials__text {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.85;
  margin-bottom: 18px;
  color: var(--color-text);
}

.testimonials__author {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-dark);
}

/* ==========================================
   BLOG PREVIEW (HOMEPAGE)
   ========================================== */
.blog-preview {
  background: var(--color-light);
}

.blog-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: var(--transition);
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

.blog-card__image {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-card:hover .blog-card__img {
  transform: scale(1.05);
}

.blog-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  padding: 5px 14px;
  background: var(--color-white);
  border-radius: 20px;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.blog-card__content {
  padding: 24px;
}

.blog-card__date {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text);
  opacity: 0.45;
}

.blog-card__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--color-dark);
  margin: 8px 0 12px;
  line-height: 1.4;
}

.blog-card__excerpt {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 16px;
}

.blog-card__link {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-primary);
  font-weight: 600;
  transition: var(--transition);
}

.blog-card__link:hover {
  color: var(--color-primary-dark);
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
  .hero {
    text-align: center;
  }

  .hero__content {
    padding: 120px 28px 40px;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__tag {
    justify-content: center;
  }

  .hero__visual {
    height: 70vh;   /* tablette / mobile : même léger agrandissement que le desktop (85vh) */
  }

  .stones__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about__wrapper {
    flex-direction: column;
  }

  .about__content .section-header__tag,
  .about__content .section-header__title {
    text-align: center;
  }

  .creatrice__grid {
    flex-direction: column;
  }

  .creatrice__image {
    flex: none;
    max-width: 400px;
    width: 100%;
  }

  .contact__wrapper {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .guide__needs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-detail__wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .related-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .article__needs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

.collections__grid {
    grid-template-columns: 1fr;
  }

  .collections__slide {
    flex: 0 0 calc(85% - 12px);
    min-height: 340px;
    padding: 28px 24px;
  }

  .collections__track {
    padding: 0 20px;
  }

  .collections__header {
    padding: 0 20px;
  }

  .bestsellers__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-preview__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .header__burger {
    display: flex;
  }

  .header__action {
    padding: 7px 5px;
  }

  .header__search-form {
    gap: 8px;
  }

  .header__search-submit {
    padding: 12px 14px;
    letter-spacing: 1px;
  }

  .header__nav {
    position: fixed;
    top: 80px;
    left: 0;
    width: 85%;
    max-width: 360px;
    height: calc(100vh - 80px);
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 32px 24px 80px;
    gap: 20px;
    border-right: 1px solid var(--color-border);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    z-index: 999;
  }

  .header__nav.open {
    transform: translateX(0);
  }

  /* Overlay sombre derrière le menu quand il est ouvert */
  .header__nav.open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 100%;
    width: 100vw;
    height: 100vh;
    background: rgba(36, 22, 21, 0.4);
    pointer-events: none;
    z-index: -1;
  }

  .header__dropdown {
    display: block;
    width: 100%;
  }

  .header__dropdown > .header__nav-link,
  .header__dropdown > .header__nav-link--no-link {
    width: 100%;
    justify-content: flex-start;
  }

  .header__nav-link {
    text-align: left;
  }

  .header__dropdown-menu {
    position: static;
    transform: none;
    transition: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 4px 0 4px 16px;
    opacity: 1;
    visibility: visible;
    display: none;
    min-width: auto;
  }

  /* Neutralise les règles desktop :hover qui réinjectent translateX(-50%)
     et déclenchent un glissement parasite au tap sur mobile */
  .header__dropdown:hover .header__dropdown-menu,
  .header__dropdown[data-group="pierres"]:hover .header__dropdown-menu {
    transform: none;
  }

  .header__dropdown.open .header__dropdown-menu {
    display: block;
  }

  .header__dropdown-link {
    padding: 8px 16px;
    font-size: 0.75rem;
  }

  /* Désactiver les animations hover du menu sur mobile/touch
     (mais on garde l'état .active pour signaler la page courante) */
  .header__nav-link:hover::after {
    width: 0;
  }
  .header__nav-link:hover {
    color: var(--color-text);
  }
  .header__dropdown-link:hover {
    background: transparent;
    color: var(--color-text);
  }
  .header__nav-link::after,
  .header__nav-link,
  .header__dropdown-link {
    transition: none;
  }
}

@media (max-width: 768px) {
  .bestsellers__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .testimonials__grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 80px 0;
  }

  .blog-preview__grid {
    grid-template-columns: 1fr;
  }

.shop__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .values__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .values { padding: 36px 0; }

  .tips__grid {
    grid-template-columns: 1fr;
  }

  .blog__grid {
    grid-template-columns: 1fr;
  }

  .newsletter__form {
    flex-direction: column;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .cart-sidebar {
    width: 100%;
    right: -100%;
  }

  .guide__needs-grid {
    grid-template-columns: 1fr;
  }

  .guide__chakra {
    flex-direction: column;
    gap: 12px;
  }

  .product-detail__actions {
    flex-direction: column;
  }

  .product-detail__add-cart {
    width: 100%;
  }

  .related-products__grid {
    grid-template-columns: 1fr;
  }

  .article__related-grid {
    grid-template-columns: 1fr;
  }

  .article__needs-grid {
    grid-template-columns: 1fr;
  }

  .article__image img {
    height: 240px;
  }

  .article__step {
    flex-direction: column;
    gap: 12px;
  }

  .article__chakra-item {
    flex-direction: column;
    gap: 10px;
  }

  .article {
    padding: 40px 20px 60px;
  }

  .cart-page__summary {
    max-width: 100%;
  }

  .footer__legal {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .bestsellers__grid {
    grid-template-columns: 1fr;
  }

  .shop__grid {
    grid-template-columns: 1fr;
  }

  .values__grid {
    grid-template-columns: 1fr;
  }

  .hero__title {
    font-size: 2rem;
  }

  .btn {
    padding: 12px 24px;
    font-size: 0.8rem;
  }
}

/* ==========================================
   FILTERS BAR — Accordéon horizontal
   collection-tous.html
   ========================================== */

.filters-bar {
  margin-bottom: 40px;
}

/* --- Ligne du haut : recherche + tri + compteur --- */
.filters-bar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.filters-bar__search {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.filters-bar__search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.35;
  pointer-events: none;
}

.filters-bar__search-input {
  width: 100%;
  padding: 10px 16px 10px 38px;
  border: 1px solid var(--color-border);
  border-radius: 40px;
  background: var(--color-cream);
  color: var(--color-dark);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  transition: var(--transition);
}

.filters-bar__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-white);
}

.filters-bar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.filters-bar__sort {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 36px 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 40px;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23434343' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--color-dark);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.filters-bar__sort:focus {
  outline: none;
  border-color: var(--color-primary);
}

.filters-bar__count {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-text);
  opacity: 0.5;
  white-space: nowrap;
}

/* --- Boutons accordéon --- */
.filters-bar__buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}

.filters-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border: 1px solid var(--color-border);
  border-radius: 40px;
  background: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.filters-bar__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filters-bar__btn.active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.filters-bar__btn.active svg {
  transform: rotate(180deg);
}

.filters-bar__btn svg {
  transition: transform 0.3s ease;
}

/* --- Panneaux dépliables --- */
.filters-bar__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
  opacity: 0;
  padding: 0 0;
  background: var(--color-cream);
  border-radius: 12px;
  margin-top: 0;
}

.filters-bar__panel.open {
  max-height: 400px;
  opacity: 1;
  padding: 20px 24px;
  margin-top: 12px;
  border: 1px solid var(--color-border);
}

.filters-bar__panel-label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  margin-bottom: 10px;
  margin-top: 0;
}

.filters-bar__panel-label + .filters-bar__pills + .filters-bar__panel-label {
  margin-top: 16px;
}

/* --- Pills (boutons de filtre) --- */
.filters-bar__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 40px;
  background: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-pill[data-virtue="all"],
.filter-pill[data-virtue="guerison"] {
  padding: 7px 18px;
}

.filter-pill__icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  transition: filter 0.2s ease;
}

.filter-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-pill.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 500;
}

.filter-pill.active .filter-pill__icon {
  filter: brightness(0) invert(1);
}

.filter-pill--element {
  font-weight: 500;
  letter-spacing: 0.5px;
}

.filter-pill--element.active {
  background: var(--color-dark);
  border-color: var(--color-dark);
}

/* --- Prix inline --- */
.filters-bar__price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filters-bar__price-input {
  width: 120px;
  padding: 9px 14px;
  border: 1px solid var(--color-border);
  border-radius: 40px;
  background: var(--color-white);
  color: var(--color-dark);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  text-align: center;
  transition: var(--transition);
  -moz-appearance: textfield;
}

.filters-bar__price-input::-webkit-outer-spin-button,
.filters-bar__price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.filters-bar__price-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.filters-bar__price-sep {
  font-family: var(--font-ui);
  color: var(--color-text);
  opacity: 0.3;
}

.filters-bar__price-btn {
  padding: 9px 24px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.filters-bar__price-btn:hover {
  background: var(--color-dark);
}

/* --- Tags filtres actifs --- */
.filters-bar__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  min-height: 0;
}

.filters-bar__tags:empty {
  margin-top: 0;
}

/* --- Grille pleine largeur --- */
.shop__grid--full {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 32px;
}

/* ==========================================
   CLEAN CARDS — Style épuré (badge + hover bouton)
   ========================================== */

.clean-card {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.clean-card:hover {
  transform: none;
  box-shadow: none;
}

.clean-card__link {
  display: block;
  text-decoration: none;
}

.clean-card__image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-light);
}

.clean-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

/* Image principale (plus de swap au survol — remplacé par un overlay) */
.clean-card__img--main {
  position: relative;
  z-index: 1;
}

/* Seconde image de survol retirée (masquée → non chargée grâce au lazy) */
.clean-card__img--hover {
  display: none;
}

/* Overlay léger au survol de la carte */
.clean-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(36, 22, 21, 0);
  transition: background 0.3s ease;
  pointer-events: none;
}

.clean-card:hover .clean-card__image::after {
  background: rgba(36, 22, 21, 0.14);
}

/* Badge haut-gauche */
.clean-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: var(--color-white);
  color: var(--color-dark);
  border-radius: 2px;
  z-index: 2;
}

.clean-card__badge--new {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Bouton "+ Ajouter au panier" — en bas, au hover */
.clean-card__hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}

.clean-card:hover .clean-card__hover {
  opacity: 1;
  transform: translateY(0);
}

.clean-card__cart {
  width: 100%;
  padding: 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border: none;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.clean-card__cart:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

/* Nom + prix + CTA sous l'image — empilés verticalement (façon e-commerce) */
.clean-card__info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  text-align: left;
  padding: 14px 0 0;
}

.clean-card__info .product-card__name {
  font-family: var(--font-ui);
  font-size: var(--fs-product-name);
  font-weight: 400;
  font-style: normal;
  line-height: 1.35;
  color: var(--color-dark);
  margin: 0;
  padding: 0;   /* aligné à gauche sur l'image et le bouton (pas de retrait) */
}

.clean-card__info .product-card__name a {
  color: inherit;
  text-decoration: none;
}

.clean-card__info .product-card__name a:hover {
  color: var(--color-primary);
}

.clean-card__info .product-card__price {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0;
  margin: 0;
  padding: 0;   /* aligné à gauche sur l'image et le bouton (pas de retrait) */
}

/* CTA "Ajouter au panier" — sous le prix, calé à gauche */
.clean-card__info .clean-card__cart {
  width: auto;
  align-self: flex-start;
  margin-top: 8px;
  padding: 11px 14px;
  text-align: left;
  background: transparent;
  backdrop-filter: none;
  border: 1px solid #d8cfc4;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.clean-card__info .clean-card__cart:hover {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

/* Cœur favoris (haut-droite de l'image) */
.clean-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 6px;
  border: none;
  background: none;
  color: rgba(36, 22, 21, 0.4);
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, transform 0.2s ease;
}

.clean-card__fav svg { display: block; }

.clean-card__fav:hover {
  color: var(--color-primary);
  transform: scale(1.12);
}

.clean-card__fav.is-active { color: #d96a86; }

.clean-card__fav.is-active svg { fill: currentColor; }

/* Grille clean-card générique (index, related-products) */
.clean-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.related-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 768px) {
  .clean-card-grid,
  .related-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .clean-card-grid,
  .related-products__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Carte article de blog (liste /blog) ---- */
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ece3d6;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(60, 45, 30, .10);
}
.blog-card__image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-cream, #faf8f5);
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card__img { transform: scale(1.04); }
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 20px 20px;
  flex: 1 1 auto;
}
.blog-card__date {
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #b0a596;
}
.blog-card__title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.22;
  margin: 0;
  color: var(--color-dark);
}
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { color: var(--color-primary); }
.blog-card__excerpt {
  color: #8a7d70;
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__more {
  margin-top: auto;
  padding-top: 4px;
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.blog-card__more span { transition: transform .2s ease; }
.blog-card:hover .blog-card__more span { transform: translateX(4px); }

/* --- Responsive --- */
@media (max-width: 768px) {
  .filters-bar__top {
    flex-direction: column;
    align-items: stretch;
  }

  .filters-bar__search {
    max-width: 100%;
  }

  .filters-bar__right {
    justify-content: space-between;
  }

  .filters-bar__buttons {
    flex-wrap: wrap;
  }

  .filters-bar__price {
    flex-wrap: wrap;
  }

  .filters-bar__price-input {
    width: 100px;
  }

  .shop__grid--full {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .shop__grid--full {
    grid-template-columns: 1fr;
  }

  .filters-bar__btn {
    font-size: 0.7rem;
    padding: 8px 14px;
  }
}


/* ==========================================
   CHAMP MOT DE PASSE — bouton oeil (afficher/masquer)
   ========================================== */
.pw-field {
  position: relative;
  display: block;
}

.pw-field input {
  width: 100%;
  padding-right: 46px;
}

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.2s ease;
}

.pw-toggle:hover {
  color: var(--color-primary);
}


/* ==========================================
   ESPACE COMPTE (mon-compte.html)
   ========================================== */
.account__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

.account__nav {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: 100px;
}

.account__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.account__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.account__hello { font-family: var(--font-ui); font-size: 0.78rem; color: var(--color-text); }
.account__name { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-dark); }

.account__menu { display: flex; flex-direction: column; gap: 2px; }

.account__menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text);
  background: none;
  border: none;
  padding: 11px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.account__menu-item:hover { background: var(--color-light); color: var(--color-dark); }
.account__menu-item.is-active { background: var(--color-primary); color: var(--color-white); }

.account__menu-item--logout {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-primary);
}
.account__menu-item--logout:hover { background: transparent; color: var(--color-primary-dark); }

.account__content {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  min-height: 340px;
}

.account__panel { display: none; }
.account__panel.is-active { display: block; animation: searchDrop 0.25s ease; }

.account__panel-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-dark);
  margin-bottom: 18px;
}

.account__intro {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 28px;
}

.account__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.account__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 16px;
  text-decoration: none;
  cursor: pointer;
  color: var(--color-dark);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.account__card:hover { transform: translateY(-3px); border-color: var(--color-primary); }
.account__card svg { color: var(--color-primary); margin-bottom: 4px; }
.account__card-num { font-family: var(--font-heading); font-size: 1.9rem; color: var(--color-dark); line-height: 1; }
.account__card-label { font-family: var(--font-ui); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text); }

.account__table-wrap { overflow-x: auto; }
.account__table { width: 100%; border-collapse: collapse; }
.account__table th {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.account__table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  color: var(--color-dark);
  font-size: 0.92rem;
  white-space: nowrap;
}

.account__status {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  padding: 4px 11px;
  border-radius: 100px;
}
.account__status--delivered { background: rgba(122, 158, 95, 0.16); color: #5d7d43; }
.account__status--pending { background: rgba(180, 132, 84, 0.16); color: var(--color-primary-dark); }

.account__link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.account__link--danger { color: #b4544f; }

.account__form { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.account__field { display: flex; flex-direction: column; }
.account__field label { font-family: var(--font-ui); font-size: 0.78rem; color: var(--color-dark); margin-bottom: 6px; }
.account__field input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-dark);
}
.account__field input:focus { outline: none; border-color: var(--color-primary); }
.account__form .btn { align-self: flex-start; margin-top: 6px; }

.account__addresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.account__address {
  position: relative;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.account__address p { font-family: var(--font-body); color: var(--color-text); line-height: 1.6; font-size: 0.92rem; }
.account__address-name { color: var(--color-dark); font-weight: 600; margin-bottom: 4px; }
.account__address-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-ui);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
  background: rgba(180, 132, 84, 0.12);
  padding: 4px 10px;
  border-radius: 100px;
}
.account__address-actions { display: flex; gap: 16px; margin-top: 14px; }

.account__add-address {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: none;
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 22px;
  min-height: 120px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.account__add-address:hover { border-color: var(--color-primary); background: var(--color-cream); }

@media (max-width: 768px) {
  .account__layout { grid-template-columns: 1fr; gap: 20px; }
  .account__nav { position: static; }
  .account__menu { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .account__menu-item { width: auto; }
  .account__menu-item--logout { margin-top: 0; padding-top: 11px; border-top: none; }
  .account__content { padding: 24px; }
  .account__cards { grid-template-columns: 1fr; }
  .account__addresses { grid-template-columns: 1fr; }
}


/* Section « Les pierres et leurs vertus » (home) */
.stones-intro { background: var(--color-cream); text-align: center; }
.stones-intro .section__subtitle { max-width: 660px; margin-left: auto; margin-right: auto; }

/* « Nouveautés » et « Les pierres et leurs vertus » partagent le même fond crème : leurs
   paddings de 100px s'additionnaient (~200px de vide à la jonction). On resserre. */
.section.bestsellers { padding-bottom: 44px; }
.section.stones-intro { padding-top: 44px; }


/* ==========================================
   GRILLE « Les pierres et leurs vertus » (home)
   ========================================== */
.vertus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 980px;
  margin: 44px auto 40px;
}

.vertus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  /* Carte blanche surélevée : l'ombre la détache du fond crème → effet "flottant" */
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.vertus-card:hover {
  transform: translateY(-10px);   /* monte davantage… */
  box-shadow: var(--shadow-lg);   /* …et l'ombre s'étale → impression de lévitation */
}

/* Média carré — pierre centrée ; le fond blanc des photos fusionne
   avec le crème de la section (multiply) → pierres "flottantes", sans cadre */
.vertus-card__bg {
  position: relative;
  inset: auto;
  width: 100%;
  aspect-ratio: 1;
  background-size: 72%;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vertus-card:hover .vertus-card__bg { transform: scale(1.05); }

.vertus-card__overlay { display: none; }

/* Légende sous l'image (sans séparateur ni bordure) */
.vertus-card__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 8px 14px 20px;   /* respiration sous la légende, la carte ayant maintenant un fond */
  text-align: center;
}

.vertus-card__name {
  font-family: var(--font-heading);
  font-size: 1.32rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 7px;
}

.vertus-card__virtues {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-primary);
}

@media (max-width: 900px) {
  .vertus-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .vertus-grid { grid-template-columns: 1fr; max-width: 380px; }
  .vertus-card { aspect-ratio: 4 / 3; }
}

/* Grilles produits : 2 colonnes en mobile (au lieu d'1) — placé après les règles ci-dessus pour l'emporter */
@media (max-width: 600px) {
  .shop__grid,
  .shop__grid--full,
  .clean-card-grid,
  .related-products__grid,
  .vertus-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: none;
  }
}


/* ==========================================
   AUTRES COLLECTIONS (bas des pages collection)
   ========================================== */
.othercol { background: var(--color-cream); }

/* Slider horizontal : fond image + swipe tactile / scroll desktop (scroll-snap) */
.othercol__grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}
.othercol__grid::-webkit-scrollbar { height: 6px; }
.othercol__grid::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 50px; }
.othercol__grid::-webkit-scrollbar-track { background: transparent; }

/* Carte = slide à fond image */
.othercol__card {
  position: relative;
  flex: 0 0 clamp(238px, 30%, 300px);
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 22px;
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.othercol__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(36, 22, 21, 0.22);
}

.othercol__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.othercol__card:hover .othercol__bg { transform: scale(1.06); }

.othercol__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(36,22,21,0.9) 0%, rgba(36,22,21,0.45) 52%, rgba(36,22,21,0.12) 100%);
}

.othercol__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.othercol__name {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

.othercol__tag {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* CTA « Découvrir » mis en évidence : bouton plein doré */
.othercol__cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  background: var(--color-primary);
  padding: 11px 26px;
  border-radius: 50px;
  box-shadow: 0 6px 18px rgba(180, 132, 84, 0.45);
  transition: var(--transition);
}
.othercol__card:hover .othercol__cta {
  background: var(--color-dark);
  transform: translateY(-1px);
}

.othercol__link { display: none; } /* ancienne classe, remplacée par .othercol__cta */

/* ==========================================
   PRÉSENTATION BOUGIES (boutique-bougies.html)
   ========================================== */
.bougies-intro {
  max-width: 680px;
  margin: 0 auto 46px;
  text-align: center;
}
.bougies-intro__lead {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--color-dark);
  margin-bottom: 22px;
}
.bougies-intro__list {
  list-style: none;
  max-width: 560px;
  margin: 0 auto 24px;
  display: grid;
  gap: 18px;
  text-align: center;
}
.bougies-intro__list li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}
.bougies-intro__list strong {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.bougies-intro__outro {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text);
}


/* ==========================================
   GALERIE PRODUIT (vignettes sous l'image)
   ========================================== */
.product-detail__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.product-detail__thumb {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-cream);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.product-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-detail__thumb:hover { transform: translateY(-2px); }

.product-detail__thumb.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}


/* ==========================================
   FOOTER — Contact "Infos Line"
   ========================================== */
.footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 22px;
  text-decoration: none;
  color: var(--color-dark);
  transition: color 0.2s ease;
}

.footer__phone:hover { color: var(--color-primary); }

.footer__phone svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.footer__phone-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.footer__phone-label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.6;
}

.footer__phone-number {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 500;
}

/* ==========================================
   SECTION « Mon inspiration unique » (home)
   Pièces uniques (products.is_unique = 1), réutilise le gabarit .clean-card des
   « Nouveautés ». Une fois vendue, la pièce RESTE affichée — en retrait + badge
   « Vendu » : elle témoigne du savoir-faire et crée la rareté.
   ========================================== */
.inspiration { background: var(--color-white); }
.inspiration .section__subtitle { max-width: 680px; margin-left: auto; margin-right: auto; }
.inspiration .clean-card-grid { margin-top: 46px; }

/* Badge « Vendu » — foncé, pour se distinguer du badge promo (doré) */
.clean-card__badge--sold {
  background: var(--color-dark);
  color: var(--color-white);
}

/* Pièce vendue : visuel en retrait, mais toujours visible */
.clean-card--sold .clean-card__img--main {
  filter: grayscale(0.4);
  opacity: 0.7;
}

/* Même gabarit que le bouton panier, mais inerte */
.clean-card__cart--sold {
  display: block;
  text-align: center;
  cursor: default;
  background: transparent;
  border: 1px solid var(--color-border);
  color: #a1968a;
}
.clean-card__cart--sold:hover {
  background: transparent;
  color: #a1968a;
}

/* ==========================================================================
   ZOOM IMAGE — fiches produit (pierre + autres types).
   Clic sur l'image principale (.product-detail__img) → visionneuse plein écran.
   Re-clic sur l'image = zoom 2,3× (l'origine suit le curseur/le doigt).
   JS : voir « ZOOM IMAGE FICHE PRODUIT » dans script.js.
   ========================================================================== */
.product-detail__img { cursor: zoom-in; }

.imgzoom {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 18, 15, 0.95);
  cursor: zoom-out;
}
.imgzoom.is-open { display: flex; }
.imgzoom__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease;
  transform: scale(1);
  transform-origin: center center;
  cursor: zoom-in;
  touch-action: pinch-zoom;
  will-change: transform;
}
.imgzoom__img.is-zoomed { cursor: zoom-out; transition: transform 0.12s ease; }
.imgzoom__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.imgzoom__close:hover { background: rgba(255, 255, 255, 0.28); }
.imgzoom__hint {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  pointer-events: none;
}
@media (max-width: 600px) {
  .imgzoom { padding: 12px; }
  .imgzoom__hint { font-size: 0.72rem; }
}