/* =============================================================
   Pots-Étiques — style.css
   Système de 6 thèmes (palette stricte) + design artisanal
   ============================================================= */

@font-face {
  font-family: 'George Rounded';
  src: url('../fonts/GeorgeRoundedBold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Décale l'ancrage des liens internes pour ne pas passer sous le header sticky.
   Header replié = 4.25rem ; on ajoute un peu d'air. */
html { scroll-padding-top: 5.5rem; }

/* =============================================================
   PALETTE — couleurs strictes du logo Pots-Étiques 2026
   ============================================================= */
:root {
  /* Bases */
  --p-blue:     #02557f;  /* ocean — bleu marine */
  --p-plum:     #392361;  /* aubergine — violet profond */
  --p-rose:     #ff396b;  /* rose vif */
  --p-leaf:     #2fab66;  /* vert feuille */
  --p-honey:    #f8ac4b;  /* miel ambré */
  --p-olive:    #d2db50;  /* lime olivâtre */
  --p-paper:    #f5f5f5;  /* off-white */
  --p-ink:      #383838;  /* gris foncé (= fond logo) */
  --p-lime:     #c4e15a;  /* lime vif */
  --p-magenta:  #e166c5;  /* rose magenta */

  /* Variations sombres (pour AA contrast / accents) */
  --p-blue-d:   #013e5e;
  --p-plum-d:   #2a1747;
  --p-rose-d:   #d2204d;
  --p-leaf-d:   #218049;
  --p-honey-d:  #c98322;
  --p-olive-d:  #a7af33;
  --p-magenta-d:#b73e98;
  --p-ink-d:    #1f1f1f;
  --p-ink-vd:   #121212;

  /* Variations claires (tints) */
  --p-paper-warm: #fbf6ed;
  --p-paper-cool: #f1f6ef;
  --p-paper-rose: #fdf3f7;
  --p-paper-sand: #faf3e5;
  --p-leaf-tint:  #e9f4eb;
  --p-leaf-vd:    #0d1d12;  /* vert très foncé (theme sombre) */
  --p-leaf-vd2:   #16291c;
  --p-leaf-vd3:   #1f3a26;
}

/* =============================================================
   THÈMES — override des CSS vars Tailwind v4
   ============================================================= */

/* --- 1. PRIMAVERA (boxed, défaut) — vert + lime, paper crème ---- */
:root, [data-theme="primavera"] {
  --color-cream:    var(--p-paper-warm);
  --color-ink:      var(--p-ink);
  --color-plum:     var(--p-plum);
  --color-leaf:     var(--p-leaf);
  --color-rose:     var(--p-rose);
  --color-rose-vif: var(--p-rose-d);
  --color-honey:    var(--p-honey);
  --color-ocean:    var(--p-blue);
  --color-earth:    var(--p-honey-d);
  --color-coral:    var(--p-rose);

  --bg-card:     #ffffff;
  --border-c:    rgba(56,56,56,0.09);
  --head-bg:     rgba(251,246,237,0.95);
  --head-color:  var(--p-ink);
  --footer-bg:   var(--p-plum);
  --footer-txt:  rgba(245,245,245,0.88);
  --hero-veil:   rgba(251,246,237,0.32);
  --hairline:    linear-gradient(90deg, var(--p-leaf), var(--p-lime));
  --eyebrow-c:   var(--p-leaf-d);
  --radius-lg:   22px;
  --radius-md:   18px;
  --radius-sm:   12px;
}

/* --- 2. FORÊT (boxed) — verts, lime, blue accent --------------- */
[data-theme="foret"] {
  --color-cream:    var(--p-paper-cool);
  --color-ink:      #233022;
  --color-plum:     #1c2a1b;
  --color-leaf:     var(--p-leaf);
  --color-rose:     var(--p-lime);
  --color-rose-vif: var(--p-olive-d);
  --color-honey:    var(--p-honey);
  --color-ocean:    var(--p-blue);
  --color-earth:    var(--p-leaf-d);
  --color-coral:    var(--p-leaf-d);

  --bg-card:     #fbfdf8;
  --border-c:    rgba(28,42,27,0.08);
  --head-bg:     rgba(241,246,239,0.95);
  --head-color:  #1c2a1b;
  --footer-bg:   var(--p-leaf-vd);
  --footer-txt:  rgba(245,245,245,0.85);
  --hero-veil:   rgba(28,42,27,0.30);
  --hairline:    linear-gradient(90deg, var(--p-leaf), var(--p-lime));
  --eyebrow-c:   var(--p-leaf-d);
  --radius-lg:   22px;
  --radius-md:   18px;
  --radius-sm:   12px;
}

/* --- 3. AURORE (boxed) — rose + magenta + lime ----------------- */
[data-theme="aurore"] {
  --color-cream:    var(--p-paper-rose);
  --color-ink:      #2a1424;
  --color-plum:     var(--p-plum);
  --color-leaf:     var(--p-magenta);
  --color-rose:     var(--p-rose);
  --color-rose-vif: var(--p-rose-d);
  --color-honey:    var(--p-lime);
  --color-ocean:    var(--p-magenta-d);
  --color-earth:    var(--p-magenta-d);
  --color-coral:    var(--p-rose);

  --bg-card:     #ffffff;
  --border-c:    rgba(57,35,97,0.10);
  --head-bg:     rgba(253,243,247,0.96);
  --head-color:  var(--p-plum);
  --footer-bg:   var(--p-plum);
  --footer-txt:  rgba(245,245,245,0.88);
  --hero-veil:   rgba(253,243,247,0.40);
  --hairline:    linear-gradient(90deg, var(--p-rose), var(--p-magenta));
  --eyebrow-c:   var(--p-magenta-d);
  --radius-lg:   22px;
  --radius-md:   18px;
  --radius-sm:   12px;
}

/* --- 4. TERRE (boxed) — honey, olive, blue marine -------------- */
[data-theme="terre"] {
  --color-cream:    var(--p-paper-sand);
  --color-ink:      var(--p-ink);
  --color-plum:     var(--p-blue-d);
  --color-leaf:     var(--p-olive-d);
  --color-rose:     var(--p-honey-d);
  --color-rose-vif: var(--p-honey-d);
  --color-honey:    var(--p-honey);
  --color-ocean:    var(--p-blue);
  --color-earth:    var(--p-honey-d);
  --color-coral:    var(--p-honey-d);

  --bg-card:     #fffcf5;
  --border-c:    rgba(56,56,56,0.10);
  --head-bg:     rgba(250,243,229,0.96);
  --head-color:  var(--p-ink);
  --footer-bg:   var(--p-blue-d);
  --footer-txt:  rgba(245,245,245,0.88);
  --hero-veil:   rgba(250,243,229,0.32);
  --hairline:    linear-gradient(90deg, var(--p-honey-d), var(--p-olive-d));
  --eyebrow-c:   var(--p-honey-d);
  --radius-lg:   22px;
  --radius-md:   18px;
  --radius-sm:   12px;
}

/* --- 5. FORÊT WIDE — full-width, header gris #383838, coins fins */
[data-theme="foret-wide"] {
  --color-cream:    var(--p-paper);
  --color-ink:      var(--p-ink);
  --color-plum:     var(--p-ink-d);
  --color-leaf:     var(--p-leaf-d);     /* AA-safe pour text-leaf */
  --color-rose:     var(--p-leaf-d);     /* accents lisibles, lime gardé pour décor */
  --color-rose-vif: var(--p-leaf);
  --color-honey:    var(--p-honey-d);
  --color-ocean:    var(--p-blue);
  --color-earth:    var(--p-blue);
  --color-coral:    var(--p-leaf-d);

  --bg-card:     #ffffff;
  --border-c:    rgba(56,56,56,0.10);
  --head-bg:     var(--p-ink);          /* gris foncé du logo */
  --head-color:  var(--p-paper);
  --footer-bg:   var(--p-ink);          /* idem #383838 */
  --footer-txt:  rgba(245,245,245,0.88);
  --hero-veil:   rgba(245,245,245,0.55);
  --hairline:    linear-gradient(90deg, var(--p-leaf), var(--p-lime));
  --eyebrow-c:   var(--p-leaf-d);
  --radius-lg:   8px;
  --radius-md:   6px;
  --radius-sm:   4px;
}

/* --- 6. FORÊT SOMBRE — wide, dark forest, AA contrast ---------- */
[data-theme="foret-sombre"] {
  --color-cream:    var(--p-leaf-vd);
  --color-ink:      #e9efe6;
  --color-plum:     var(--p-lime);
  --color-leaf:     var(--p-leaf);
  --color-rose:     var(--p-rose);
  --color-rose-vif: var(--p-olive);
  --color-honey:    var(--p-honey);
  --color-ocean:    var(--p-lime);
  --color-earth:    var(--p-olive);
  --color-coral:    var(--p-olive);

  --bg-card:     var(--p-leaf-vd2);
  --border-c:    rgba(196,225,90,0.12);
  --head-bg:     var(--p-ink);          /* #383838 (= fond logo) */
  --head-color:  var(--p-paper);
  --footer-bg:   var(--p-ink);          /* idem #383838 */
  --footer-txt:  rgba(245,245,245,0.88);
  --hero-veil:   rgba(13,29,18,0.45);
  --hairline:    linear-gradient(90deg, var(--p-leaf), var(--p-lime));
  --eyebrow-c:   var(--p-lime);
  --radius-lg:   8px;
  --radius-md:   6px;
  --radius-sm:   4px;
}

/* =============================================================
   BASE
   ============================================================= */
/* Scope l'override Font Awesome aux icônes (sinon casse md:flex) */
.fa-solid.hidden, .fa-regular.hidden, .fa-brands.hidden, i.hidden {
  display: none !important;
}

body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  color: var(--color-ink);
  background-color: var(--color-cream);
  transition: background-color 0.55s ease, color 0.55s ease;
}

header, nav, section, footer, main,
.card-editorial, .mission-band, .cta-card,
.product-tile, .site-footer, .float-tag,
.img-frame, #mobileMenu, .map-block > div {
  transition: background-color 0.55s ease, color 0.55s ease,
              border-color 0.55s ease;
}

/* =============================================================
   HEADER
   ============================================================= */
.scroll-header,
.scroll-header #headerLogo {
  transition: padding 0.4s ease, 
                background-color 0.4s ease,
                box-shadow 0.4s ease, 
                border-color 0.4s ease,
                max-height  0.4s ease;
}
.scroll-header.is-scrolled {
  background: var(--head-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 24px rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.06) !important;
}
.scroll-logo { transition: height 0.4s ease; }

/* Dropdown menu desktop ("À propos") */
.nav-dropdown__panel > div { min-width: 12rem; }
.nav-dropdown__panel a { white-space: nowrap; }

/* Sous-menu mobile (toujours déroulé) */
.mobile-submenu {
  display: flex;
  flex-direction: column;
  margin: 4px 0 8px 1.25rem;
  border-left: 2px solid color-mix(in srgb, var(--color-honey) 45%, transparent);
  padding-left: 0.25rem;
}
.nav-dropdown__panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s;
  pointer-events: auto;
}
.nav-dropdown__trigger i {
  transition: transform 200ms ease;
}
.nav-dropdown:hover .nav-dropdown__trigger i,
.nav-dropdown:focus-within .nav-dropdown__trigger i {
  transform: rotate(180deg);
}

.scroll-header,
.scroll-header #headerLogo {
  max-height: 130px;
}
.scroll-header.is-scrolled,
.scroll-header.is-scrolled #headerLogo {
  max-height: 80px;
}

/* =============================================================
   REVEAL AU SCROLL
   ============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s cubic-bezier(0.215,0.61,0.355,1),
              transform 0.8s cubic-bezier(0.215,0.61,0.355,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* =============================================================
   HERO
   ============================================================= */
.hero-banner__bg {
  position: absolute; inset: 0; z-index: -2;
  will-change: transform;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.hero-banner__veil {
  position: absolute; inset: 0; z-index: -1;
  background: var(--hero-veil);
  transition: background 0.55s ease;
}
.hero-banner__fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(transparent, var(--color-cream));
  z-index: 0; pointer-events: none;
  transition: background 0.55s ease;
}

/* Blobs décoratifs (parallaxe JS) */
.hero-blob {
  position: absolute; border-radius: 9999px;
  pointer-events: none; z-index: -1;
  filter: blur(72px); will-change: transform;
  transition: background-color 0.55s ease;
}
.hero-blob--1 { width: 440px; height: 440px; opacity: 0.16; background: var(--color-leaf); top: -100px; right: 8%; }
.hero-blob--2 { width: 300px; height: 300px; opacity: 0.13; background: var(--color-rose); bottom: 12%; left: 3%; }
.hero-blob--3 { width: 220px; height: 220px; opacity: 0.16; background: var(--color-honey); top: 30%; right: 33%; }

/* =============================================================
   TYPOGRAPHIE
   ============================================================= */
.hero-headline {
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
  line-height: 1.05; letter-spacing: -0.01em;
}
.hero-sub { font-size: clamp(1rem,1.6vw,1.2rem); line-height: 1.6; }
.display-section { font-size: clamp(1.9rem,4vw,3.2rem); line-height: 1.1; }
.display-block    { font-size: clamp(1.5rem,2.8vw,2.2rem); line-height: 1.15; }

.eyebrow {
  font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.75rem;
  color: var(--eyebrow-c);
  transition: color 0.55s;
}
.eyebrow.on-dark { color: var(--color-honey); }

.hairline-honey {
  width: 48px; height: 3px; border-radius: 9999px;
  background: var(--hairline);
  transition: background 0.55s;
}

/* =============================================================
   BOUTONS — forme pilule (radius variable selon thème)
   ============================================================= */
.btn-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem; border-radius: 9999px;
  font-weight: 700; font-size: 0.92rem; line-height: 1;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
              filter 0.22s ease, background-color 0.25s ease,
              box-shadow 0.25s ease, opacity 0.22s ease;
}
.btn-pill:hover { transform: translateY(-2px); }

.btn-pill.btn-dark { background: var(--color-ink); color: var(--color-cream); }
.btn-pill.btn-dark:hover { filter: brightness(1.25); }

.btn-pill.btn-rose {
  background: var(--color-rose); color: #fff;
  padding: 0.95rem 1.6rem; font-size: 1rem;
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--color-rose) 45%, transparent);
}
.btn-pill.btn-rose:hover { filter: brightness(1.1); }

.btn-pill.btn-ghost-dark {
  border: 1.5px solid color-mix(in srgb, var(--color-ink) 22%, transparent);
  color: var(--color-ink);
  background: color-mix(in srgb, white 60%, transparent);
  padding: 0.95rem 1.4rem; font-size: 1rem;
}
.btn-pill.btn-ghost-dark:hover {
  background: color-mix(in srgb, white 80%, transparent);
}

.btn-pill.btn-ghost-cream {
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff; background: rgba(255,255,255,0.12);
  padding: 0.95rem 1.4rem; font-size: 1rem;
}
.btn-pill.btn-ghost-cream:hover { background: rgba(255,255,255,0.22); }

/* =============================================================
   CARTES ÉDITORIALES
   ============================================================= */
.card-editorial {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-c);
  padding: 1.75rem;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease, background-color 0.55s;
}
.card-editorial:hover {
  transform: translateY(-6px) rotate(0.35deg);
  box-shadow: 0 28px 50px -22px color-mix(in srgb, var(--color-leaf) 28%, transparent);
}

/* =============================================================
   MISSION BAND
   ============================================================= */
.mission-band {
  background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ocean) 100%);
  color: #fff;
  border-radius: calc(var(--radius-lg) + 6px);
  position: relative; overflow: hidden;
}
.mission-band::before {
  content: ''; position: absolute; pointer-events: none;
  width: 320px; height: 320px; border-radius: 9999px;
  background: var(--color-honey); opacity: 0.20;
  filter: blur(64px); top: -80px; right: -80px;
  animation: floatA 14s ease-in-out infinite alternate;
}
.mission-band::after {
  content: ''; position: absolute; pointer-events: none;
  width: 280px; height: 280px; border-radius: 9999px;
  background: var(--color-leaf); opacity: 0.20;
  filter: blur(64px); bottom: -80px; left: -80px;
  animation: floatB 16s ease-in-out infinite alternate;
}

/* =============================================================
   GALERIE PRODUITS (marquee)
   ============================================================= */
.marquee-wrap {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  cursor: grab; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.marquee-wrap::-webkit-scrollbar { display: none; }
.marquee-wrap.is-dragging { cursor: grabbing; }
.marquee-track { display: flex; gap: 1rem; width: max-content; }

.product-tile {
  flex: 0 0 auto; width: clamp(220px, 24vw, 320px);
  background: var(--bg-card);
  border-radius: var(--radius-xs);
  border: none;
  overflow: hidden; text-decoration: none;
  color: var(--color-ink); display: block;
  transition: box-shadow 0.3s ease, background-color 0.55s;
}
.product-tile:hover {
  box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--color-leaf) 32%, transparent);
}
.marquee-wrap.is-dragging .product-tile,
.marquee-wrap.is-dragging .product-tile img { pointer-events: none; }
/* Largeur fluide via clamp() ci-dessus : 220px (mobile) → 320px (grand écran) */
/* Cadre carré : masque le débordement du zoom → coins ronds du conteneur intacts */
.product-tile__media { display: block; overflow: hidden; }
.product-tile img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  display: block; pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Seule la photo zoome au survol */
.product-tile:hover img { transform: scale(1.07); }
.product-tile figcaption {
  padding: 0.7rem 0.85rem; font-size: 0.95rem;
  font-weight: 700; color: var(--color-ink); text-align: center;
}

/* =============================================================
   FEED FACEBOOK
   ============================================================= */
.fb-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.5rem;
  align-items: start;
}

.fb-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease, background-color 0.55s;
}
.fb-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -22px color-mix(in srgb, var(--color-leaf) 28%, transparent);
}

.fb-card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-leaf) 8%, transparent);
}
.fb-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.215,0.61,0.355,1);
}
.fb-card:hover .fb-card-img img { transform: scale(1.04); }

.fb-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  flex: 1 1 auto;
}
.fb-card-text {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.6;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fb-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-c);
}
.fb-card-date {
  font-size: 0.8rem;
  color: var(--color-ink);
  opacity: 0.55;
}
.fb-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-leaf);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.fb-card-link:hover { color: var(--color-plum); transform: translateX(2px); }

.fb-feed-loader { color: var(--color-ink); }

/* =============================================================
   CTA CARDS (avec motifs animés)
   ============================================================= */
.cta-card {
  position: relative; overflow: hidden;
  border-radius: calc(var(--radius-lg) + 4px); padding: 2.5rem;
  color: #fff; display: block;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease, background 0.55s;
}
.cta-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 40px 60px -28px rgba(0,0,0,0.26);
}
.cta-card.cta-boutique {
  background: linear-gradient(135deg, var(--color-rose), var(--color-honey));
}
.cta-card.cta-facebook {
  background: linear-gradient(135deg, var(--color-leaf), var(--color-ocean));
}
.cta-card::before, .cta-card::after {
  content: ''; position: absolute; border-radius: 9999px;
  background: rgba(255,255,255,0.11); pointer-events: none;
}
.cta-card::before {
  width: 260px; height: 260px; top: -80px; right: -80px;
  animation: floatA 12s ease-in-out infinite alternate;
}
.cta-card::after {
  width: 200px; height: 200px; bottom: -60px; left: -60px;
  animation: floatB 14s ease-in-out infinite alternate;
}
.cta-card > * { position: relative; }

/* =============================================================
   ANIMATIONS — motifs flottants
   ============================================================= */
@keyframes floatA {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-22px, 18px) scale(1.06); }
}
@keyframes floatB {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(26px, -16px) scale(1.05); }
}
@keyframes driftSlow {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-40px, 28px); }
}
@keyframes floatC {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-18px, -26px) scale(1.08); }
}
@keyframes driftDots {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 80px; }
}

/* =============================================================
   SECTIONS — motifs de fond animés (parallaxe douce)
   Blobs réels injectés par JS : dégradé de flous + parallaxe scroll.
   - .section-blobs    : couche absolue derrière le contenu
   - .sb               : blob individuel (transparence + couleur)
   - .sb--blur-{x}     : 5 niveaux de flou (none → xl)
   - .sb--size-{x}     : 5 tailles
   - .sb--c{1..6}      : 6 couleurs (rotation par section)
   ============================================================= */
main section[data-bg-pattern] {
  position: relative; overflow: hidden; isolation: isolate;
}
.section-blobs {
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.sb {
  position: absolute; display: block;
  border-radius: 9999px;
  will-change: transform;
  /* `translate` = paralaxe scroll (JS) ; `transform`/animation = breathe (CSS) */
}
.sb--size-xl { width: 620px; height: 620px; margin: -310px 0 0 -310px; }
.sb--size-lg { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
.sb--size-md { width: 230px; height: 230px; margin: -115px 0 0 -115px; }
.sb--size-sm { width: 140px; height: 140px; margin: -70px  0 0 -70px;  }
.sb--size-xs { width: 78px;  height: 78px;  margin: -39px  0 0 -39px;  }

/* Dégradé de flou : du net diaphane au halo très flou */
.sb--blur-none { filter: none;             opacity: 0.14; }
.sb--blur-sm   { filter: blur(8px);        opacity: 0.18; }
.sb--blur-md   { filter: blur(28px);       opacity: 0.24; }
.sb--blur-lg   { filter: blur(58px);       opacity: 0.30; }
.sb--blur-xl   { filter: blur(95px);       opacity: 0.38; }

/* Palette des blobs (utilise les vars du thème courant) */
.sb--c1 { background: var(--color-leaf); }
.sb--c2 { background: var(--color-rose); }
.sb--c3 { background: var(--color-honey); }
.sb--c4 { background: var(--color-ocean); }
.sb--c5 { background: var(--p-lime); }
.sb--c6 { background: var(--p-magenta); }

/* Animations « respiration » légères, indépendantes du scroll */
.sb--anim-a { animation: floatA 18s ease-in-out infinite alternate; }
.sb--anim-b { animation: floatB 22s ease-in-out infinite alternate; }
.sb--anim-c { animation: floatC 26s ease-in-out infinite alternate; }

/* Forêt-wide : sections claires, opacité un peu plus marquée */
[data-theme="foret-wide"] .sb--blur-none { opacity: 0.20; }
[data-theme="foret-wide"] .sb--blur-sm   { opacity: 0.24; }
[data-theme="foret-wide"] .sb--blur-md   { opacity: 0.30; }
[data-theme="foret-wide"] .sb--blur-lg   { opacity: 0.38; }
[data-theme="foret-wide"] .sb--blur-xl   { opacity: 0.45; }

/* Forêt sombre : fond foncé, on monte la luminance des blobs */
[data-theme="foret-sombre"] .sb--blur-none { opacity: 0.30; }
[data-theme="foret-sombre"] .sb--blur-sm   { opacity: 0.38; }
[data-theme="foret-sombre"] .sb--blur-md   { opacity: 0.48; }
[data-theme="foret-sombre"] .sb--blur-lg   { opacity: 0.55; }
[data-theme="foret-sombre"] .sb--blur-xl   { opacity: 0.62; }

@media (prefers-reduced-motion: reduce) {
  .cta-card::before, .cta-card::after,
  .mission-band::before, .mission-band::after,
  body::before, body::after,
  .sb { animation: none !important; translate: none !important; }
}

/* =============================================================
   PASTILLES FLOTTANTES
   ============================================================= */
.float-tag {
  position: absolute; font-weight: 800; font-size: 0.82rem;
  padding: 0.5rem 1rem; border-radius: 9999px;
  background: #fff; color: var(--color-ink);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.18);
}

/* =============================================================
   IMAGE FRAME
   ============================================================= */
.img-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-c);
}
.img-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =============================================================
   LISTE DOTS
   ============================================================= */
.dot-list { list-style: none; padding: 0; margin: 0; }
.dot-list li { display: flex; gap: 0.75rem; padding: 0.5rem 0; }
.dot-list li::before {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px;
  margin-top: 0.55rem; border-radius: 9999px;
  background: var(--color-leaf);
}
.dot-list li.dot-rose::before  { background: var(--color-rose); }
.dot-list li.dot-honey::before { background: var(--color-honey); }
.dot-list li.dot-ocean::before { background: var(--color-ocean); }

/* =============================================================
   UTILITAIRES
   ============================================================= */
.divider-thin {
  height: 1px; border: 0;
  background: linear-gradient(90deg,transparent,var(--border-c),transparent);
}
.divider-on-dark {
  background: linear-gradient(90deg,transparent,rgba(255,255,255,0.14),transparent);
}
.serif-quote::before { content: '« '; color: var(--color-honey); }
.serif-quote::after  { content: ' »'; color: var(--color-honey); }

/* =============================================================
   CARTE GOOGLE MAPS
   ============================================================= */
.map-block { border-radius: var(--radius-lg); overflow: hidden; }
.map-embed-wrap { position: relative; min-height: 300px; }
@media (min-width: 1024px) { .map-embed-wrap { min-height: 380px; } }

/* =============================================================
   MENU MOBILE
   ============================================================= */
#mobileMenu {
  transform: translateX(100%);
  background: var(--color-cream) !important;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
              background-color 0.55s ease;
}
#mobileMenu.is-open { transform: translateX(0); }
#mobileOverlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#mobileOverlay.is-open { opacity: 1; pointer-events: auto; }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-txt);
}
.site-footer a:hover { color: var(--color-honey); }

/* =============================================================
   SÉLECTEUR DE THÈME
   ============================================================= */
.theme-switcher {
  /* Masqué visuellement, fonctionnalité conservée (clic JS possible via data-theme-select). */
  position: fixed; bottom: 5.5rem; right: 1.3rem;
  z-index: 60; display: none; flex-direction: column;
  align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.45rem;
  background: color-mix(in srgb, var(--color-cream) 80%, transparent);
  border: 1px solid var(--border-c);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.theme-switcher__label {
  font-size: 0.55rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; opacity: 0.55;
  color: var(--color-ink); margin-bottom: 0.1rem;
}
.theme-switcher__btn {
  width: 26px; height: 26px; border-radius: 9999px;
  border: 2px solid rgba(255,255,255,0.55); cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.2s ease, box-shadow 0.2s ease;
}
.theme-switcher__btn:hover { transform: scale(1.18); }
.theme-switcher__btn.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.2);
  transform: scale(1.08);
}
.theme-switcher__btn--primavera   { background: linear-gradient(135deg,#2fab66,#ff396b); }
.theme-switcher__btn--foret       { background: linear-gradient(135deg,#2fab66,#c4e15a); }
.theme-switcher__btn--aurore      { background: linear-gradient(135deg,#ff396b,#e166c5); }
.theme-switcher__btn--terre       { background: linear-gradient(135deg,#c98322,#d2db50); }
.theme-switcher__btn--foret-wide  { background: linear-gradient(135deg,#383838 50%,#2fab66 50%); }
.theme-switcher__btn--foret-sombre{ background: linear-gradient(135deg,#0d1d12,#c4e15a); }

/* =============================================================
   BACK TO TOP
   ============================================================= */
#backToTop {
  background: var(--color-ocean) !important;
  border-radius: 9999px !important;
  color: #fff !important;
  transition: background-color 0.3s ease, opacity 0.3s ease,
              transform 0.3s ease !important;
}
#backToTop:hover { filter: brightness(1.12); }

/* =============================================================
   THÈMES WIDE — overrides (foret-wide + foret-sombre)
   ============================================================= */

/* Header dark-grey permanent (sans scroll) */
[data-theme="foret-wide"] .scroll-header,
[data-theme="foret-sombre"] .scroll-header {
  background: var(--head-bg) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 12px rgba(0,0,0,0.18);
}
[data-theme="foret-wide"] .scroll-header .text-plum,
[data-theme="foret-wide"] .scroll-header nav a,
[data-theme="foret-wide"] .scroll-header span,
[data-theme="foret-sombre"] .scroll-header .text-plum,
[data-theme="foret-sombre"] .scroll-header nav a,
[data-theme="foret-sombre"] .scroll-header span {
  color: var(--head-color) !important;
}
[data-theme="foret-wide"] .scroll-header nav a:hover,
[data-theme="foret-sombre"] .scroll-header nav a:hover {
  color: var(--p-lime) !important;
}
[data-theme="foret-wide"] #navToggle,
[data-theme="foret-sombre"] #navToggle { color: var(--head-color) !important; }

/* Boutons header "Boutique en ligne" — AA contrast */
[data-theme="foret-wide"] .scroll-header .bg-coral,
[data-theme="foret-sombre"] .scroll-header .bg-coral {
  background: var(--p-leaf-d) !important; color: #fff !important;
}
[data-theme="foret-wide"] .scroll-header .bg-coral:hover,
[data-theme="foret-sombre"] .scroll-header .bg-coral:hover {
  background: var(--p-leaf-vd2) !important;
}

/* CTA "btn-rose" en wide : utiliser leaf-d pour respecter AA (4.5:1 avec blanc) */
[data-theme="foret-wide"] .btn-pill.btn-rose {
  background: var(--p-leaf-d); color: #fff;
}
[data-theme="foret-wide"] .btn-pill.btn-rose:hover {
  background: var(--p-leaf-vd2);
}

/* Élargir les conteneurs (wide layout) */
[data-theme="foret-wide"] .max-w-6xl,
[data-theme="foret-wide"] .max-w-5xl,
[data-theme="foret-wide"] .max-w-7xl,
[data-theme="foret-sombre"] .max-w-6xl,
[data-theme="foret-sombre"] .max-w-5xl,
[data-theme="foret-sombre"] .max-w-7xl {
  max-width: min(1480px, 92vw);
}

/* Sections — fond plein largeur avec patterns animés */
[data-theme="foret-wide"] main section,
[data-theme="foret-sombre"] main section {
  position: relative; overflow: hidden;
}
[data-theme="foret-wide"] main section:nth-of-type(odd)::before,
[data-theme="foret-sombre"] main section:nth-of-type(odd)::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 520px; height: 520px; border-radius: 9999px;
  top: -180px; right: -160px; opacity: 0.10;
  filter: blur(80px);
  background: var(--color-leaf);
  animation: floatA 18s ease-in-out infinite alternate;
}
[data-theme="foret-wide"] main section:nth-of-type(even)::after,
[data-theme="foret-sombre"] main section:nth-of-type(even)::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 440px; height: 440px; border-radius: 9999px;
  bottom: -160px; left: -120px; opacity: 0.10;
  filter: blur(80px);
  background: var(--color-rose);
  animation: floatB 22s ease-in-out infinite alternate;
}
[data-theme="foret-wide"] main section,
[data-theme="foret-sombre"] main section { isolation: isolate; }

/* Coins discrets sur cartes */
[data-theme="foret-wide"] .img-frame,
[data-theme="foret-wide"] .card-editorial,
[data-theme="foret-wide"] .map-block,
[data-theme="foret-wide"] .mission-band,
[data-theme="foret-wide"] .cta-card,
[data-theme="foret-wide"] .product-tile,
[data-theme="foret-sombre"] .img-frame,
[data-theme="foret-sombre"] .card-editorial,
[data-theme="foret-sombre"] .map-block,
[data-theme="foret-sombre"] .mission-band,
[data-theme="foret-sombre"] .cta-card,
[data-theme="foret-sombre"] .product-tile {
  border-radius: var(--radius-lg);
}
[data-theme="foret-wide"] .btn-pill,
[data-theme="foret-sombre"] .btn-pill {
  border-radius: var(--radius-md);
}

/* Map block — pas d'effet "carte boîtée", merge avec la page */
[data-theme="foret-wide"] .map-block,
[data-theme="foret-sombre"] .map-block {
  box-shadow: none;
  border: 1px solid var(--border-c);
}

/* Pattern de fond sur body — motif léger animé */
[data-theme="foret-wide"] body::before,
[data-theme="foret-sombre"] body::before {
  content: ''; position: fixed; inset: -10vmin;
  z-index: -3; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--color-leaf) 8%, transparent) 0, transparent 18%),
    radial-gradient(circle at 78% 64%, color-mix(in srgb, var(--color-honey) 7%, transparent) 0, transparent 18%),
    radial-gradient(circle at 38% 82%, color-mix(in srgb, var(--p-lime) 7%, transparent) 0, transparent 14%);
  animation: driftSlow 26s ease-in-out infinite alternate;
}

/* =============================================================
   FORÊT SOMBRE — overrides spécifiques (couleurs sombres + AA)
   ============================================================= */
[data-theme="foret-sombre"] body {
  background: var(--p-leaf-vd);
  color: #e9efe6;
}

/* Hero — voile plus sombre pour lisibilité */
[data-theme="foret-sombre"] .hero-banner__veil {
  background: linear-gradient(180deg, rgba(13,29,18,0.55) 0%, rgba(13,29,18,0.78) 100%);
}
[data-theme="foret-sombre"] .hero-banner__fade {
  background: linear-gradient(transparent, var(--p-leaf-vd));
}
[data-theme="foret-sombre"] .hero-headline { color: var(--p-paper); }
[data-theme="foret-sombre"] .hero-headline .text-rose { color: var(--p-honey) !important; }
[data-theme="foret-sombre"] .hero-headline .text-leaf { color: var(--p-rose) !important; }
[data-theme="foret-sombre"] .hero-sub,
[data-theme="foret-sombre"] .hero-sub .text-plum { color: var(--p-paper) !important; }

/* Cartes — fond légèrement plus clair */
[data-theme="foret-sombre"] .card-editorial,
[data-theme="foret-sombre"] .product-tile {
  background: var(--p-leaf-vd2);
  border-color: rgba(196,225,90,0.10);
  color: #e9efe6;
}
[data-theme="foret-sombre"] .product-tile figcaption { color: #e9efe6; }
[data-theme="foret-sombre"] .float-tag {
  background: var(--p-leaf-vd3); color: var(--p-lime);
  border: 1px solid rgba(196,225,90,0.18);
}

/* Texte global */
[data-theme="foret-sombre"] .text-ink,
[data-theme="foret-sombre"] [class*="text-ink/"] { color: #e9efe6 !important; }
[data-theme="foret-sombre"] .text-plum { color: var(--p-lime) !important; }
[data-theme="foret-sombre"] .text-ocean { color: var(--p-olive) !important; }
[data-theme="foret-sombre"] .text-earth { color: var(--p-olive) !important; }
[data-theme="foret-sombre"] .text-leaf  { color: var(--p-leaf) !important; }
[data-theme="foret-sombre"] .text-rose  { color: var(--p-lime) !important; }

/* Boutons ghost — adaptés au fond sombre (AA) */
[data-theme="foret-sombre"] .btn-pill.btn-ghost-dark {
  border-color: rgba(196,225,90,0.35);
  background: rgba(196,225,90,0.06);
  color: var(--p-paper);
}
[data-theme="foret-sombre"] .btn-pill.btn-ghost-dark:hover {
  background: rgba(196,225,90,0.14);
}
[data-theme="foret-sombre"] .btn-pill.btn-dark {
  background: var(--p-lime); color: var(--p-leaf-vd);
}
[data-theme="foret-sombre"] .btn-pill.btn-rose {
  background: var(--p-leaf); color: #fff;
}

/* Map - colonne info en dark */
[data-theme="foret-sombre"] .map-block .bg-white {
  background: var(--p-leaf-vd2) !important;
  color: #e9efe6;
}

/* Mission band — déjà sombre, juste teinte */
[data-theme="foret-sombre"] .mission-band {
  background: linear-gradient(135deg, var(--p-ink-vd) 0%, var(--p-leaf-vd3) 100%);
}

/* Dividers et hairlines plus visibles sur fond foncé */
[data-theme="foret-sombre"] .divider-thin {
  background: linear-gradient(90deg, transparent, rgba(196,225,90,0.18), transparent);
}

/* Theme switcher — adapté fond sombre */
[data-theme="foret-sombre"] .theme-switcher {
  background: rgba(13,29,18,0.85);
  border-color: rgba(196,225,90,0.22);
}
[data-theme="foret-sombre"] .theme-switcher__label { color: var(--p-paper); }

/* Footer — lisibilité forcée pour le thème sombre
   (text-cream/80 mappe à #0d1d12 invisible sur fond sombre) */
[data-theme="foret-sombre"] .site-footer { color: var(--p-paper); }
[data-theme="foret-sombre"] .site-footer [class*="text-cream"],
[data-theme="foret-sombre"] .site-footer .text-cream {
  color: rgba(245,245,245,0.92) !important;
}
[data-theme="foret-sombre"] .site-footer .text-honey {
  color: var(--p-lime) !important;
}
[data-theme="foret-sombre"] .site-footer a { color: rgba(245,245,245,0.92); }
[data-theme="foret-sombre"] .site-footer a:hover { color: var(--p-lime); }
[data-theme="foret-sombre"] .site-footer h4 { color: var(--p-lime) !important; }
[data-theme="foret-sombre"] .site-footer .divider-thin {
  background: linear-gradient(90deg, transparent, rgba(245,245,245,0.18), transparent) !important;
}

/* =============================================================
   FACEBOOK FEED — section #social
   ============================================================= */
.fb-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.fb-card {
  border: 1px solid var(--border-c);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.fb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.fb-card-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.fb-card-body {
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .75rem;
}
.fb-card-text {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--color-ink);
  flex: 1;
}
.fb-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.fb-card-date {
  font-size: .8rem;
  color: var(--color-ink);
  opacity: .5;
}
.fb-card-link {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-plum);
  text-decoration: none;
}
.fb-card-link:hover { text-decoration: underline; }