/* NovaCBD — maquette (accueil et À propos) */

/* Thème : « Olive fumée » partout (sombre). Une section .section--clair, ou tout élément .clair,
   passe en « Olive pâle ». Les composants n'utilisent que ces couleurs nommées : changer de thème,
   c'est changer ces deux blocs. */
:root {
  --fond: #15160f;
  --fond-2: #0f100a;      /* pied de page, bas des dégradés */
  --surface: #212318;     /* cartes, bandeaux */
  --surface-2: #2a2d1f;
  --encre: #0b0c07;       /* pastilles d'icônes : toujours très foncé */
  --texte: #f1efe2;
  --doux: #a9a991;        /* texte secondaire */
  --ligne: rgba(241, 239, 226, .12);
  --or: #cfa955;
  --or-clair: #e8cd8c;
  --or-texte: #cfa955;    /* or utilisé pour du texte */
  --accent: #6f7a45;
  --accent-texte: #b3bc82;
  --sur-or: #15160f;      /* texte posé sur l'or */
  --sur-accent: #f1efe2;
  --lueur: #2e3221;       /* centre des dégradés du haut de page */
  --ombre: rgba(0, 0, 0, .5);
  --eyebrow: #e8cd8c;
  --eyebrow-etoile: #cfa955;

  --display: "Rammetto One", "Arial Black", sans-serif;
  --sans: "Manrope", system-ui, sans-serif;
  --chiffres: "Outfit", "Manrope", sans-serif; /* prix, taux, promos : le % de Rammetto One est dessiné « °/o » */
  --radius: 18px;
  --annonce: 34px;        /* hauteur du bandeau d'annonce */
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z'/%3E%3C/svg%3E");
}

.clair, .section--clair {
  --fond: #e5e6d3;
  --fond-2: #dcdec7;
  --surface: #f3f4e8;
  --surface-2: #fbfbf5;
  --encre: #1c1f12;
  --texte: #1c1f12;
  --doux: #5a5e48;
  --ligne: rgba(28, 31, 18, .13);
  --or: #c6a046;
  --or-clair: #d8b762;
  --or-texte: #7e631f;
  --accent: #6a7a3a;
  --accent-texte: #4f5c27;
  --sur-or: #1c1f12;
  --sur-accent: #f3f4e8;
  --ombre: rgba(28, 31, 18, .22);
  --eyebrow: #4f5c27;
  --eyebrow-etoile: #7e631f;
  color: var(--texte);
}
.section--clair { background: var(--fond); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; }
/* un nombre au milieu d'un titre en Rammetto One : Outfit, un peu plus grand pour garder le même poids */
.num { font-family: var(--chiffres); font-weight: 800; font-size: 1.12em; letter-spacing: -.01em; }
p { margin: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico-g { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
@media (min-width: 768px) { .container { width: min(1200px, 100% - 64px); } }

/* ---------- Éléments communs ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--eyebrow);
}
.eyebrow svg { width: 11px; height: 11px; color: var(--eyebrow-etoile); }

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.55rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: .95rem; line-height: 1; white-space: nowrap; letter-spacing: .01em;
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s, background-color .2s, color .2s, border-color .2s, filter .2s;
}
/* point lumineux : la lueur suit la souris (script.js règle --mx et --my) */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), var(--btn-lueur, color-mix(in srgb, var(--or-clair) 30%, transparent)), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.btn:hover::after { opacity: 1; }
.btn:hover { transform: translateY(-2px) scale(1.05); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn__ico { width: 18px; height: 18px; transition: transform .25s; }
.btn:hover .btn__ico { transform: translateX(4px); }
.btn--gold {
  --btn-lueur: rgba(255, 249, 228, .7);
  color: var(--sur-or);
  background: linear-gradient(135deg, var(--or-clair) 0%, var(--or) 48%, color-mix(in srgb, var(--or) 80%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 10px 26px -14px color-mix(in srgb, var(--or) 80%, transparent);
}
.btn--gold:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 0 0 4px color-mix(in srgb, var(--or) 18%, transparent), 0 16px 34px -12px color-mix(in srgb, var(--or) 85%, transparent);
}
.btn--ghost {
  color: var(--texte);
  background: color-mix(in srgb, var(--texte) 5%, transparent);
  border-color: color-mix(in srgb, var(--texte) 24%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  color: var(--or-clair);
  background: color-mix(in srgb, var(--or) 10%, transparent);
  border-color: color-mix(in srgb, var(--or) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--or) 10%, transparent), 0 14px 30px -16px color-mix(in srgb, var(--or) 60%, transparent);
}
/* bouton inversé : couleur du texte en fond */
.btn--dark { background: var(--texte); color: var(--fond); }
.btn--dark:hover { background: var(--or); color: var(--sur-or); }
.btn--line { border-color: var(--ligne); color: var(--texte); background: transparent; }
.btn--line:hover { border-color: var(--texte); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .92rem;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Logo ---------- */

.logo { display: inline-flex; align-items: center; }
/* Le logo de la marque (images/logo-nova.webp) : un reflet le traverse toutes les 7 s, découpé à sa forme
   par le masque #logo-masque du sprite ; au survol, il se soulève et le reflet repasse aussitôt. */
.logo__svg {
  display: block; height: 46px; width: auto; overflow: visible;
  animation: logo-lueur 7s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.logo__reflet { animation: logo-reflet 7s ease-in-out infinite; }
.logo:hover .logo__svg { transform: translateY(-2px) scale(1.03); }
.logo:hover .logo__reflet { animation: logo-reflet-vite 1s ease-out; }
.logo--light .logo__svg { height: 64px; }
.footer .logo__svg { height: 58px; }

/* ---------- En-tête ---------- */

/* lien d'évitement (clavier) et bandeau d'annonce au-dessus de l'en-tête */
.evitement {
  position: fixed; left: 16px; top: 12px; z-index: 300; padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--or); color: var(--sur-or); font-weight: 800; transform: translateY(-160%); transition: transform .25s;
}
.evitement:focus { transform: none; outline: 2px solid var(--or-clair); outline-offset: 3px; }
#contenu { outline: none; }
.annonce {
  position: relative; height: var(--annonce); overflow: hidden; color: var(--or-clair); font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  background: linear-gradient(90deg, var(--fond-2), color-mix(in srgb, var(--or) 14%, var(--fond-2)) 50%, var(--fond-2));
  border-bottom: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
}
.annonce__inner { position: relative; height: 100%; }
.annonce__msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 0; text-align: center;
  opacity: 0; transform: translateY(70%); transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.annonce__msg.est-visible { opacity: 1; transform: none; }
.annonce__msg.sort { opacity: 0; transform: translateY(-70%); }
.annonce__msg svg { width: 9px; height: 9px; flex: none; color: var(--or); }
.annonce__msg .num { font-size: 1.08em; }
@media (prefers-reduced-motion: reduce) { .annonce__msg { transition: none; } }

.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--texte);
  border-bottom: 1px solid var(--ligne);
  transition: box-shadow .3s;
}
.header.is-scrolled { box-shadow: 0 10px 30px -12px var(--ombre); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; }

/* Liens du menu : au survol, le texte s'éclaircit d'une pointe d'or et un trait doré naît au milieu, puis
   s'étire vers les deux bords en freinant, une lueur dessous. En partant, il se resserre vers le milieu
   sans à-coup (deux courbes : celle de l'entrée est posée sur :hover, celle de la sortie sur le lien).
   La page courante garde son trait plein, sa lueur s'avive au survol. */
.nav { display: flex; gap: 2.2rem; font-size: .92rem; font-weight: 500; }
.nav a {
  position: relative; padding: .3rem 0; opacity: .82;
  transition: opacity .45s ease, color .45s ease, text-shadow .45s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--or), var(--or-clair) 50%, var(--or));
  box-shadow: 0 0 8px color-mix(in srgb, var(--or) 35%, transparent);
  opacity: 0; transform: scaleX(0); transform-origin: center;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1), opacity .35s ease .15s, box-shadow .45s ease;
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { opacity: 1; }
.nav a:hover, .nav a:focus-visible {
  color: color-mix(in srgb, var(--texte) 72%, var(--or-clair));
  text-shadow: 0 0 18px color-mix(in srgb, var(--or-clair) 45%, transparent);
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
.nav a:hover::after, .nav a:focus-visible::after {
  box-shadow: 0 0 10px color-mix(in srgb, var(--or) 60%, transparent), 0 3px 16px -2px color-mix(in srgb, var(--or-clair) 50%, transparent);
  transition: transform .65s cubic-bezier(.16, 1, .3, 1), opacity .25s ease, box-shadow .5s ease;
}
/* étoiles entre les liens : elles tournent d'un quart de tour et s'éclairent autour du lien survolé */
.nav a + a::before {
  content: ""; position: absolute; top: 50%; left: calc(-1.1rem - 4px);
  width: 8px; height: 8px; margin-top: -4px;
  background: var(--or); opacity: .5;
  -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat;
  transition: opacity .45s ease, background-color .45s ease, transform .6s cubic-bezier(.3, 1.4, .5, 1);
}
.nav a:hover::before, .nav a:hover + a::before,
.nav a:focus-visible::before, .nav a:focus-visible + a::before {
  opacity: 1; background-color: var(--or-clair); transform: rotate(90deg) scale(1.25);
}

/* Icônes (recherche, compte, panier, menu) : au survol, un halo doré s'allume au centre et s'élargit,
   un fin cercle d'or se resserre autour, le bouton se soulève et l'icône penche un peu en se dorant.
   Halo et cercle passent sous l'icône (isolation + z-index -1). Tout est en transition, à l'aller
   comme au retour. Menu ouvert : le burger garde son halo. */
.header__actions { display: flex; align-items: center; gap: .25rem; }
.icon-btn {
  position: relative; isolation: isolate; display: grid; place-items: center;
  width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; color: var(--texte);
  transition: color .45s ease, transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
}
.icon-btn::before, .icon-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.icon-btn::before {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--or-clair) 32%, transparent), color-mix(in srgb, var(--or) 14%, transparent) 60%, transparent);
  transform: scale(.4);
}
.icon-btn::after { border: 1px solid color-mix(in srgb, var(--or) 55%, transparent); transform: scale(1.3); }
.icon-btn:hover, .icon-btn:focus-visible, .burger[aria-expanded="true"] {
  color: var(--or-clair);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--or) 70%, transparent);
}
.icon-btn:hover, .icon-btn:focus-visible { transform: translateY(-2px); }
.icon-btn:hover::before, .icon-btn:focus-visible::before, .burger[aria-expanded="true"]::before,
.icon-btn:hover::after, .icon-btn:focus-visible::after, .burger[aria-expanded="true"]::after { opacity: 1; transform: scale(1); }
.icon-btn:active { transform: translateY(0) scale(.92); transition-duration: .12s; }
.icon-btn svg {
  width: 21px; height: 21px;
  transition: transform .55s cubic-bezier(.3, 1.5, .5, 1), filter .45s ease;
}
.icon-btn:hover svg, .icon-btn:focus-visible svg {
  transform: rotate(-8deg) scale(1.1);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--or) 65%, transparent));
}
.burger:hover svg, .burger:focus-visible svg { transform: scale(1.1); } /* le menu ne penche pas : ses traits restent droits */
/* pastille du panier : au-dessus du halo, cernée de la couleur de l'en-tête pour rester lisible */
.cart-count {
  position: absolute; top: 3px; right: 1px; z-index: 1;
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--or); color: var(--sur-or); font-family: var(--chiffres); font-size: .7rem; font-weight: 700;
  box-shadow: 0 0 0 2px var(--fond);
  transition: transform .55s cubic-bezier(.3, 1.5, .5, 1), box-shadow .45s ease;
}
.icon-btn:hover .cart-count, .icon-btn:focus-visible .cart-count {
  transform: translate(2px, -2px) scale(1.08);
  box-shadow: 0 0 0 2px var(--fond), 0 4px 12px -2px color-mix(in srgb, var(--or) 70%, transparent);
}
.burger { display: none; }
/* animations réduites : pas de soulèvement ni de bascule, seulement les couleurs et le halo */
@media (prefers-reduced-motion: reduce) {
  .icon-btn, .icon-btn svg, .icon-btn .cart-count { transform: none !important; }
}

@media (max-width: 960px) {
  .burger { display: grid; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 0;
    padding: .25rem 16px 1.25rem;
    background: var(--fond); border-bottom: 1px solid var(--ligne);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .95rem 0; border-bottom: 1px solid var(--ligne); opacity: 1; }
  .nav a::after, .nav a::before { display: none; }
}
@media (max-width: 420px) { .hide-sm { display: none; } }

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
  background: radial-gradient(110% 90% at 78% 42%, var(--lueur) 0%, var(--fond) 50%, var(--fond-2) 100%);
  color: var(--texte);
}
/* l'accueil occupe tout l'écran sous l'en-tête (72 px) : le bandeau des engagements n'arrive qu'en défilant */
.hero--plein { display: grid; align-items: center; min-height: calc(100vh - 72px - var(--annonce)); min-height: calc(100svh - 72px - var(--annonce)); }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
/* Feuilles du fond : dessin détaillé (folioles dentelées, nervures), voile très léger dedans, et un
   balancement lent autour de leur tige, chacune à son rythme (rotate et translate s'ajoutent au transform). */
.hero__leaf {
  position: absolute; color: color-mix(in srgb, var(--doux) 17%, transparent);
  --leaf-fill: color-mix(in srgb, var(--doux) 4%, transparent);
  animation: feuille-balance 11s ease-in-out infinite alternate;      /* autour du centre : la place dessinée ne bouge pas */
}
.hero__leaf--1 { width: 560px; left: -190px; bottom: -270px; transform: rotate(28deg); }
.hero__leaf--2 { width: 380px; right: -120px; top: -140px; transform: rotate(-150deg); animation-duration: 13s; animation-delay: -5s; }
/* feuilles en plus : trois qui pendent du haut (leur pollen tombe), une de plus en bas (son pollen monte) */
.hero__leaf--3 { width: 300px; left: -90px; top: -120px; transform: rotate(160deg); animation-duration: 12s; animation-delay: -3s; --decalage-feuille: -2.3s; }
.hero__leaf--4 { width: 420px; right: -150px; bottom: -210px; transform: rotate(-25deg); animation-duration: 14s; animation-delay: -8s; --decalage-feuille: -1.1s; }
.hero__leaf--5 { width: 230px; left: 40%; top: -125px; transform: rotate(188deg); animation-duration: 10s; animation-delay: -6s; --decalage-feuille: -3.4s; }
.hero__leaf--6 { width: 270px; left: 28%; bottom: -175px; transform: rotate(10deg); animation-duration: 12.5s; animation-delay: -2s; --decalage-feuille: -.4s; }
/* en-tête court de la boutique : les deux feuilles rentrent dans le cadre */
.page-tete .hero__leaf--1 { width: 440px; left: -110px; bottom: -230px; }
.page-tete .hero__leaf--2 { width: 340px; right: -50px; top: -120px; }
.page-tete .hero__leaf--3 { width: 230px; left: -70px; top: -110px; }
.page-tete .hero__leaf--4 { width: 300px; right: -100px; bottom: -170px; }
.page-tete .hero__leaf--5 { width: 190px; left: 52%; top: -110px; }
.page-tete .hero__leaf--6 { width: 220px; left: 36%; bottom: -160px; }
/* Folioles (symbole #leaf) : chacune pivote autour de son attache (110, 128 dans le viewBox), les latérales
   plus que la centrale (--amp), à des rythmes et décalages différents, comme une feuille riggée.
   --decalage-feuille, posé sur chaque feuille, évite que toutes bougent ensemble. */
.foliole {
  transform-box: view-box; transform-origin: 110px 128px;
  animation: foliole var(--duree, 4s) ease-in-out calc(var(--retard, 0s) + var(--decalage-feuille, 0s)) infinite alternate;
}
@keyframes foliole { from { rotate: calc(var(--amp, 2) * -1deg); } to { rotate: calc(var(--amp, 2) * 1deg); } }
.hero__leaf--2 { --decalage-feuille: -1.7s; }
.story__leaf { --decalage-feuille: -2.9s; }
.visual-leaf { --decalage-feuille: -.8s; }
/* pollen (script.js) : des grains dorés dessinés dans le SVG de la feuille, qui peuvent en sortir */
.hero__leaf, .story__leaf, .visual-leaf { overflow: visible; }
.pollen { fill: var(--or-clair); }
@keyframes feuille-balance { from { rotate: -2.5deg; translate: 0 0; } to { rotate: 3deg; translate: 0 -10px; } }

.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 3rem; }
.hero h1 { font-size: clamp(2.3rem, 4.9vw, 4.2rem); line-height: 1.08; margin: 1.3rem 0 1.4rem; }
.hero h1 em { color: var(--or); }
.lead { max-width: 34rem; margin-bottom: 2.2rem; font-size: clamp(1rem, 1.35vw, 1.13rem); color: color-mix(in srgb, var(--texte) 76%, transparent); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__stats {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.75rem;
  list-style: none; margin: 3rem 0 0; padding: 1.6rem 0 0;
  border-top: 1px solid var(--ligne);
}
.hero__stats li { font-size: .84rem; color: color-mix(in srgb, var(--texte) 62%, transparent); }
.hero__stats strong { display: block; font-family: var(--chiffres); font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--texte); }

.hero__visual { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; justify-self: center; }
.nova-glow {
  position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--or-clair) 50%, transparent) 0%, color-mix(in srgb, var(--or) 20%, transparent) 32%, transparent 68%);
  animation: pulse 6s ease-in-out infinite;
}
/* Rayons de lumière qui tournent lentement, ondes qui partent du centre, poussière d'or qui monte */
.rayons {
  position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--or-clair) 13%, transparent) 0deg 5deg, transparent 5deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  animation: spin 70s linear infinite;
}
.onde {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--or) 55%, transparent);
  translate: -50% -50%; opacity: 0;
  animation: onde 6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.onde--2 { animation-delay: -3s; }
@keyframes onde { 0% { scale: .7; opacity: 0; } 12% { opacity: .7; } 100% { scale: 2.05; opacity: 0; } }
.poussiere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 50%; }
.poussiere i {
  position: absolute; bottom: 12%; width: var(--t, 3px); height: var(--t, 3px); border-radius: 50%;
  background: var(--or-clair); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--or) 70%, transparent);
  opacity: 0; animation: poussiere var(--d, 9s) linear var(--r, 0s) infinite;
}
@keyframes poussiere {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: .9; }
  70% { opacity: .55; }
  100% { transform: translate(var(--x, 0px), -62vmin); opacity: 0; }
}
.orbit { position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--texte) 14%, transparent); }
.orbit--1 { inset: 3%; animation: spin 48s linear infinite; }
.orbit--2 { inset: 17%; border-style: dashed; border-color: color-mix(in srgb, var(--or) 28%, transparent); animation: spin 80s linear infinite reverse; }
.orbit__dot {
  position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--or); box-shadow: 0 0 18px 5px color-mix(in srgb, var(--or) 55%, transparent);
}
.visual-leaf {
  position: absolute; inset: 4% 8% 12%; width: 84%; transform: rotate(-12deg);
  color: color-mix(in srgb, var(--doux) 30%, transparent); --leaf-fill: color-mix(in srgb, var(--doux) 7%, transparent);
  transform-origin: 50% 90%; animation: feuille-balance 9s ease-in-out -2s infinite alternate;
}
.twinkle { position: absolute; width: 16px; height: 16px; color: var(--or-clair); animation: twinkle 3.2s ease-in-out infinite; }
.twinkle svg { width: 100%; height: 100%; }
.twinkle--sm { width: 10px; height: 10px; }

/* Mascotte en trois calques :
   .mascotte        glisse un peu vers la souris et penche vers elle autour de ses pieds (script.js) ;
   .mascotte__corps rebondit au clic (classe .rebond) ;
   l'image         flotte en continu et grossit au survol. */
.mascotte { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform-origin: 50% 96%; will-change: transform; }
.mascotte__corps { position: absolute; inset: 0; transform-origin: 50% 97%; }
.mascotte__corps.rebond { animation: rebond .8s cubic-bezier(.3, .7, .4, 1); }
@keyframes rebond {
  0% { transform: none; }
  16% { transform: scale(1.08, .9); }
  40% { transform: translateY(-8%) scale(.95, 1.07); }
  64% { transform: scale(1.05, .94); }
  82% { transform: translateY(-1.5%) scale(.99, 1.02); }
  100% { transform: none; }
}
/* ombre posée au sol : elle ancre le personnage pendant qu'il bouge */
.mascotte__sol {
  position: absolute; left: 50%; bottom: 1%; width: 50%; height: 8%; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .62) 45%, rgba(0, 0, 0, 0) 100%);
  animation: ombre-sol 7s ease-in-out infinite;       /* même rythme que le flottement de l'image */
}
@keyframes ombre-sol { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(.84); opacity: .75; } }
.mascotte__bulle {
  position: absolute; z-index: 5; left: 63%; top: 6%; max-width: min(14rem, 46%); margin: 0;
  padding: .7rem .95rem; border-radius: 16px 16px 16px 4px;
  background: var(--texte); color: var(--fond);
  font-weight: 700; font-size: .88rem; line-height: 1.35;
  box-shadow: 0 16px 34px -14px var(--ombre);
  opacity: 0; transform: scale(.6) translateY(10px); transform-origin: 0 100%;
  transition: opacity .25s, transform .45s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.mascotte__bulle.est-visible { opacity: 1; transform: none; }
.hero__mascotte {
  position: absolute; z-index: 2; left: 50%; bottom: 3%; height: 86%; width: auto;
  transform: translateX(-50%);
  pointer-events: auto; cursor: pointer; transform-origin: 50% 100%;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
  scale: 1; transition: scale .6s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 30px 34px var(--ombre));
  animation: float-mascotte 7s ease-in-out infinite;
}
.hero__mascotte:hover { scale: 1.07; }
@keyframes float-mascotte { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-12px); } }
.hero__bottle, .hero__jar, .hero__tin { position: absolute; filter: drop-shadow(0 28px 32px var(--ombre)); }
.hero__bottle { width: 25%; left: 40%; top: 12%; z-index: 2; animation: float 7s ease-in-out infinite; }
.hero__jar { width: 31%; left: 13%; top: 44%; z-index: 3; animation: float 8s ease-in-out -3s infinite; }
.hero__tin { width: 33%; right: 8%; top: 59%; z-index: 3; animation: float 7.5s ease-in-out -5s infinite; }

/* au-dessus du cercle (qui commence à 3 % du haut du cadre), centrée */
.hero__badge {
  position: absolute; bottom: calc(97% + 14px); left: 0; right: 0; z-index: 4; width: max-content; max-width: 94%; margin-inline: auto;
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem 1.1rem .75rem .85rem; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--texte);
  border: 1px solid var(--ligne);
  font-family: var(--display); font-size: .88rem; line-height: 1.25;
  box-shadow: 0 18px 40px -16px var(--ombre);
  animation: float 9s ease-in-out -2s infinite;
}
.hero__badge svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--encre); color: var(--or); flex: none; box-sizing: content-box; }
.hero__badge small { display: block; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero__visual { max-width: 440px; margin-top: 4.5rem; }
}
@media (max-width: 520px) {
  .hero__badge { font-size: .8rem; }
  .mascotte__bulle { left: 54%; font-size: .8rem; }
  .hero__stats { gap: 1rem 1.6rem; }
  .hero__stats strong { font-size: 1.45rem; }
}

/* ---------- Engagements ---------- */

.trust { background: linear-gradient(var(--fond-2), var(--fond)); border-block: 1px solid var(--ligne); }
.trust__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; margin-block: 0; padding: 1.6rem 0; }
.trust__item {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--ligne);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--texte) 6%, transparent), 0 14px 30px -20px var(--ombre);
}
.trust__icon {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--fond); border: 1px solid var(--ligne); color: var(--or);
}
.trust__icon svg { width: 22px; height: 22px; }
.trust__item strong { display: block; font-size: .92rem; line-height: 1.3; }
.trust__item span { font-size: .8rem; color: var(--doux); }
@media (max-width: 900px) { .trust__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust__list { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- Sections ---------- */

.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: 2.75rem; }
.section-head h2 { margin-top: .8rem; font-size: clamp(1.7rem, 3.4vw, 2.7rem); }

/* Catégories : chaque carte a sa teinte, posée en lueur sur la surface */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.cat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  min-height: 360px; padding: 1.5rem; border-radius: var(--radius);
  background: radial-gradient(120% 80% at 50% 28%, color-mix(in srgb, var(--teinte, var(--accent)) 32%, transparent), transparent 70%), var(--surface);
  border: 1px solid var(--ligne);
  transition: transform .35s, border-color .35s;
}
.cat:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--or) 45%, transparent); }
.cat--fleurs { --teinte: #6f7a45; }
.cat--huiles { --teinte: #cfa955; }
.cat--resines { --teinte: #9a6b3c; }
.cat--gummies { --teinte: #c26a3a; }
.cat__visual { position: relative; display: grid; place-items: center; height: 210px; }
.cat__visual::before {
  content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--or-clair) 22%, transparent), transparent 70%);
}
.cat__visual svg, .cat__visual img { position: relative; width: 78%; height: 100%; filter: drop-shadow(0 18px 18px var(--ombre)); transition: transform .4s; }
/* mascotte : positionnée en absolu, sa hauteur se calcule sur les 210 px de la case (en grille, un % ne se résout pas) */
.cat__visual img { position: absolute; left: 50%; bottom: 0; width: auto; height: 112%; transform: translateX(-50%); transform-origin: 50% 100%; }
/* produit en 3D (produits3d.js) : le canvas remplace la mascotte quand la scène est prête ; il déborde un peu de sa case */
/* le cadre descend sous la case (vers le titre, il est transparent) : le produit est plus bas dans la carte */
.produit3d { position: absolute; inset: 2% -12% -22%; pointer-events: none; }
.produit3d canvas { display: block; width: 100% !important; height: 100% !important; }
/* 3D : au doigt, on fait tourner le produit. Pas de sélection bleue, pas de menu d'appui long, pas de flash au toucher. */
.cat, .cat__visual, .produit3d, .produit3d canvas, .fiche__visuel, .carte__scene, .carte__scene canvas {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.cat:hover .cat__visual svg { transform: scale(1.05) rotate(-2deg); }
.cat:hover .cat__visual img { transform: translateX(-50%) scale(1.05) rotate(-2deg); }
.cat h3 { font-size: 1.35rem; }
.cat p { margin-top: .3rem; font-size: .86rem; color: var(--doux); }
.cat__arrow {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--fond); color: var(--texte); transition: background-color .25s, color .25s;
}
.cat__arrow svg { width: 18px; height: 18px; }
.cat:hover .cat__arrow { background: var(--or); color: var(--sur-or); }
@media (max-width: 1000px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cats { grid-template-columns: 1fr; } .cat { min-height: 320px; } }

/* Produits */
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.product {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--radius);
  transition: transform .3s, box-shadow .3s;
}
.product:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -28px var(--ombre); }
.product__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: color-mix(in srgb, var(--tint, var(--fond)) 55%, var(--fond)); }
.product__media::before {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%);
}
.product__media svg { position: absolute; inset: 0; margin: auto; width: 72%; height: 70%; filter: drop-shadow(0 16px 16px var(--ombre)); transition: transform .4s; }
.product:hover .product__media svg { transform: scale(1.05); }
.product__tag {
  position: absolute; top: .9rem; left: .9rem; z-index: 1;
  padding: .38rem .7rem; border-radius: 999px;
  background: var(--encre); color: var(--surface);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.product__tag--gold { background: var(--or); color: var(--sur-or); }
.product__body { display: flex; flex: 1; flex-direction: column; gap: .35rem; padding: 1.15rem 1.25rem 1.25rem; }
.product__cat { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-texte); }
.product h3 { font-size: 1.12rem; }
.product__notes { font-size: .85rem; color: var(--doux); }
.product__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .9rem; }
.price { font-family: var(--chiffres); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.price small { font-family: var(--sans); font-size: .76rem; color: var(--doux); }
.add {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--encre); color: var(--or);
  transition: background-color .2s, color .2s, transform .2s;
}
.add:hover { background: var(--accent); color: var(--sur-accent); transform: scale(1.06); }
.add svg { width: 20px; height: 20px; }
.add.is-added { background: var(--or); color: var(--sur-or); }
@media (max-width: 1000px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .products { gap: .75rem; } .product__body { padding: .9rem; } .product h3 { font-size: 1rem; } .product__notes { display: none; } .price { font-size: 1.15rem; } .add { width: 38px; height: 38px; } }

/* ---------- Méthode (et « La boutique » sur À propos) ---------- */

.story {
  position: relative; overflow: hidden; color: var(--texte);
  background: radial-gradient(90% 80% at 12% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--fond-2);
}
.story__leaf {
  position: absolute; width: 640px; right: -220px; bottom: -260px; pointer-events: none;
  color: color-mix(in srgb, var(--doux) 12%, transparent); --leaf-fill: color-mix(in srgb, var(--doux) 3%, transparent);
  transform: rotate(-30deg); transform-origin: 50% 90%; animation: feuille-balance 15s ease-in-out -7s infinite alternate;
}
.story__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
.story h2 { margin-top: .9rem; font-size: clamp(1.7rem, 3.3vw, 2.6rem); }
.story h2 em { color: var(--or); }
.story__lead { margin-top: 1.2rem; max-width: 32rem; color: color-mix(in srgb, var(--texte) 72%, transparent); }
.steps { display: grid; gap: 1.6rem; list-style: none; margin: 2.4rem 0 2.6rem; padding: 0; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; }
.step__num {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--or) 45%, transparent); color: var(--or); font-family: var(--chiffres); font-size: .95rem; font-weight: 700;
}
.step h3 { font-size: 1.08rem; padding-top: .7rem; }
.step p { margin-top: .3rem; font-size: .95rem; color: color-mix(in srgb, var(--texte) 70%, transparent); }

.labwrap { position: relative; justify-self: center; width: 100%; max-width: 440px; }
.seal { position: absolute; top: -48px; right: -36px; z-index: 2; width: 116px; animation: spin 30s linear infinite; }
/* le certificat est un document papier : il porte la classe .clair */
.labcard {
  position: relative; padding: 1.8rem; border-radius: 22px;
  background: var(--surface); color: var(--texte);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
  transform: rotate(-1.5deg);
}
.labcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0 64px 1.1rem 0; margin-bottom: .6rem; border-bottom: 1px dashed var(--ligne); }
.labcard__head small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texte); }
.labcard__head strong { display: block; margin-top: .3rem; font-family: var(--display); font-size: 1.15rem; font-weight: 400; line-height: 1.2; }
.labcard__lot { font-size: .8rem; color: var(--doux); }
.stamp {
  display: inline-flex; align-items: center; gap: .3rem; flex: none;
  padding: .38rem .7rem .38rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent-texte); font-size: .72rem; font-weight: 700;
}
.stamp svg { width: 14px; height: 14px; }
.cannabinoid { display: grid; grid-template-columns: 44px 1fr 62px; align-items: center; gap: 1rem; padding: .6rem 0; font-size: .88rem; }
.cannabinoid span:first-child { font-weight: 700; }
.cannabinoid b { text-align: right; font-family: var(--chiffres); font-weight: 600; }
.bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--texte) 9%, var(--surface)); overflow: hidden; }
.bar span { display: block; width: var(--w); height: 100%; border-radius: 4px; background: var(--accent); }
.bar--thc span { background: var(--or); min-width: 6px; }
.labcard__limit { margin-top: .4rem; font-size: .76rem; color: var(--doux); text-align: right; }
.labcard__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--ligne); font-size: .8rem; color: var(--doux); }
.qr { width: 58px; height: 58px; flex: none; }

@media (max-width: 900px) {
  .story__inner { grid-template-columns: 1fr; gap: 4.5rem; }
  .labwrap { max-width: 420px; }
  .seal { right: -8px; width: 96px; top: -42px; }
}

/* ---------- Newsletter ---------- */

.newsletter { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.newsletter__box {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 2.5rem;
  padding: clamp(2.2rem, 5vw, 4rem); border-radius: 28px;
  background: var(--surface); color: var(--texte); border: 1px solid var(--ligne);
}
.newsletter__box::before {
  content: ""; position: absolute; right: -10%; top: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--or) 28%, transparent), transparent 65%);
  pointer-events: none;
}
.newsletter__box > * { position: relative; }
.newsletter h2 { margin-top: .8rem; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.newsletter__lead { margin-top: .9rem; color: color-mix(in srgb, var(--texte) 70%, transparent); }
.newsletter__form {
  display: flex; gap: .4rem; padding: .4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--texte) 6%, transparent); border: 1px solid color-mix(in srgb, var(--texte) 16%, transparent);
}
.newsletter__form input {
  flex: 1; min-width: 0; padding: 0 1.1rem; border: 0; outline: 0; background: none;
  color: var(--texte); font: inherit;
}
.newsletter__form input::placeholder { color: color-mix(in srgb, var(--texte) 50%, transparent); }
.newsletter__small { margin-top: .8rem; padding-left: 1.2rem; font-size: .78rem; color: color-mix(in srgb, var(--texte) 50%, transparent); }
.newsletter__ok { font-family: var(--display); font-size: 1.1rem; color: var(--or-clair); }
@media (max-width: 860px) { .newsletter__box { grid-template-columns: 1fr; } }
@media (max-width: 440px) {
  .newsletter__form { flex-direction: column; border-radius: 20px; }
  .newsletter__form input { padding: .8rem 1rem; }
}

/* ---------- Pied de page ---------- */

.footer { padding: 4.5rem 0 2rem; background: var(--fond-2); color: color-mix(in srgb, var(--texte) 66%, transparent); font-size: .9rem; border-top: 1px solid var(--ligne); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
.footer__brand p { margin-top: 1.1rem; max-width: 18rem; }
.footer h4 { margin-bottom: 1.1rem; font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--texte); }
.footer ul { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.footer a { transition: color .2s; }
.footer a:hover { color: var(--or); }
.footer__disclaimer { margin-top: 3.5rem; max-width: 52rem; font-size: .76rem; line-height: 1.6; color: color-mix(in srgb, var(--texte) 45%, transparent); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--ligne); font-size: .78rem; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } .footer__brand { grid-column: 1 / -1; } }

/* ---------- Page À propos ---------- */

/* Carte de visite en 3D (carte.js) : la scène WebGL, un halo doré derrière, une ombre au sol */
.carte { position: relative; margin: 0; width: 100%; max-width: 560px; justify-self: center; }
.carte__scene { position: relative; z-index: 1; aspect-ratio: 1.15; cursor: zoom-in; touch-action: pan-y; }
.carte__scene canvas, .carte__scene img { display: block; width: 100% !important; height: 100% !important; }
.carte__scene img { object-fit: contain; padding: 12%; }
/* halo tamisé : faible, très étalé et flouté pour qu'on n'en voie pas le bord */
.carte__halo {
  position: absolute; inset: -6% -10% 4%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--or-clair) 16%, transparent) 0%, color-mix(in srgb, var(--or) 8%, transparent) 45%, color-mix(in srgb, var(--or) 3%, transparent) 70%, transparent 100%);
  filter: blur(24px);
  animation: pulse 6s ease-in-out infinite;
}
.carte__ombre {
  position: absolute; left: 22%; right: 22%; bottom: 7%; height: 9%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
  transform: translateX(var(--ombre-x, 0)) scaleX(var(--ombre-s, 1));
}
.carte__aide {
  display: grid; justify-items: center; gap: .35rem;
  margin-top: -.4rem; font-size: .8rem; color: color-mix(in srgb, var(--texte) 60%, transparent);
}
.carte__aide strong { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--or-clair); }
.carte__aide > span { display: inline-flex; align-items: center; gap: .5rem; }
.carte__aide svg { width: 16px; height: 16px; color: var(--or); }
.aide-tactile { display: none; }
@media (hover: none) { .aide-souris { display: none; } .aide-tactile { display: inline; } }

.carte__scene--css { display: grid; place-items: center; perspective: 1100px; }
.carte3d { position: relative; width: 76%; aspect-ratio: 1400 / 906; transform-style: preserve-3d; }
.carte3d__face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 3.5% / 5.4%;
  background: center / cover no-repeat;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--or) 75%, transparent), 0 34px 50px -22px rgba(0, 0, 0, .65);
}
.carte3d__face--dos { transform: rotateY(180deg); }
.carte3d__reflet {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 236, 190, .55), rgba(255, 236, 190, 0) 55%);
}
.carte3d__face--dos .carte3d__reflet { transform: scaleX(-1); }

/* La carte en grand (carte.js) : fond flouté, la même carte agrandie au centre */
.carte-zoom {
  position: fixed; inset: 0; z-index: 90;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 1rem;
  padding: clamp(16px, 5vw, 64px) clamp(16px, 4vw, 48px) clamp(16px, 3vw, 32px);
  background: color-mix(in srgb, var(--fond-2) 60%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(.85); backdrop-filter: blur(16px) saturate(.85);
  opacity: 0; transition: opacity .28s ease;
}
.carte-zoom.est-ouvert { opacity: 1; }
.carte-zoom__scene {
  display: grid; place-items: center; perspective: 1400px;
  width: min(1100px, 100%); height: 100%; max-height: 760px;
  cursor: pointer; touch-action: pan-y; outline: none;
  transform: scale(.9); transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.carte-zoom.est-ouvert .carte-zoom__scene { transform: none; }
.carte-zoom__scene canvas { display: block; width: 100% !important; height: 100% !important; }
.carte-zoom .carte3d { width: min(90%, 980px); }
.carte-zoom__fermer {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--ligne); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--texte);
  transition: border-color .2s, color .2s, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.carte-zoom__fermer:hover { border-color: var(--or); color: var(--or-clair); transform: rotate(90deg); }
.carte-zoom__fermer svg { width: 22px; height: 22px; }
.carte-zoom__aide { margin: 0; font-size: .85rem; color: color-mix(in srgb, var(--texte) 65%, transparent); cursor: default; }

.about-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem 5rem; align-items: center; }
.about-mascotte { position: relative; display: grid; place-items: center; }
.about-mascotte::before {
  content: ""; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--or) 28%, transparent), transparent 68%);
}
.about-mascotte img { position: relative; width: min(100%, 380px); height: auto; filter: drop-shadow(0 26px 30px var(--ombre)); }
.about-split h2 { margin-top: .8rem; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.about-prose { display: grid; gap: 1.1rem; padding-top: 1.6rem; font-size: 1.04rem; color: var(--doux); }
.about-facts {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.6rem; list-style: none; margin: 1rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--ligne); font-size: .84rem;
}
.about-facts strong { display: block; font-family: var(--chiffres); font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--texte); }
@media (max-width: 860px) { .about-split { grid-template-columns: 1fr; } .about-mascotte img { width: min(70%, 300px); } }

.boutique-photo { margin: 0; }
.boutique-photo img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
}
.infos { display: grid; gap: 1.3rem; list-style: none; margin: 2rem 0; padding: 0; }
.infos li { display: grid; grid-template-columns: 22px 1fr; gap: 1rem; color: color-mix(in srgb, var(--texte) 75%, transparent); }
.infos li > svg { width: 22px; height: 22px; color: var(--or); margin-top: .15rem; }
.infos strong { display: block; color: var(--texte); }
.infos small { display: block; margin-top: .3rem; font-size: .76rem; color: color-mix(in srgb, var(--texte) 50%, transparent); }
.horaires { border-collapse: collapse; font-size: .95rem; }
.horaires th { padding: .1rem 1.6rem .1rem 0; text-align: left; font-weight: 600; color: var(--texte); }
.horaires td { padding: .1rem 0; font-variant-numeric: tabular-nums; }
.offre {
  display: grid; gap: .15rem; margin-bottom: 1.8rem; padding: 1rem 1.3rem; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--or) 45%, transparent); background: color-mix(in srgb, var(--or) 8%, transparent);
}
.offre small { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); }
.offre strong { font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--texte); }
.offre span { font-size: .76rem; color: color-mix(in srgb, var(--texte) 55%, transparent); }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.value {
  padding: 2rem 1.7rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--ligne);
  transition: transform .3s, box-shadow .3s;
}
.value:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -28px var(--ombre); }
.value__icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--encre); color: var(--or);
}
.value__icon svg { width: 24px; height: 24px; }
.value h3 { margin-top: 1.4rem; font-size: 1.25rem; }
.value p { margin-top: .55rem; font-size: .94rem; color: var(--doux); }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } }


.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.contact-item {
  display: flex; align-items: center; gap: .9rem; padding: 1.2rem; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--ligne);
}
.contact-item strong { display: block; font-size: .92rem; line-height: 1.3; }
.contact-item span:not(.trust__icon), .contact-item a { font-size: .82rem; color: var(--doux); }
.contact-item a:hover { color: var(--texte); text-decoration: underline; }
@media (max-width: 860px) { .contacts { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .contacts { grid-template-columns: 1fr; } }

/* ---------- Vérification de l'âge ---------- */

.age-gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--fond-2) 78%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.age-gate__card {
  width: 100%; max-width: 420px; padding: 2.6rem 2rem 2.2rem; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--ligne); text-align: center;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6);
}
.age-gate h2 { margin-top: 1.6rem; font-size: 1.45rem; }
.age-gate p { margin-top: .7rem; font-size: .92rem; color: var(--doux); }
.age-gate__actions { display: flex; justify-content: center; gap: .6rem; margin-top: 1.6rem; }
.age-gate__no { display: none; color: #e08a6e !important; font-weight: 600; }
.age-gate__card.is-refused .age-gate__no { display: block; }

/* Pastilles et cartes qui ne sont pas des liens : curseur normal, pas le curseur de texte */
:where(.point-lumineux, .bulle):not(a, button) { cursor: default; }
.hero__badge, .bulle { -webkit-user-select: none; user-select: none; }

/* Boutons d'info (bulles) : tout passe par des transitions, rien ne saute.
   - Entrée : quand on arrive dessus en défilant, script.js ajoute .est-visible ; elles montent, se
     défloutent et apparaissent l'une après l'autre (--i). Remonté au-dessus, elles repartent, et l'entrée
     se rejoue en redescendant. Sans JavaScript (.js absent), elles sont simplement visibles.
   - Survol : elles se soulèvent et grossissent un peu, et le flottement s'installe en douceur : son
     amplitude (--bulle-amp) passe de 0 à 1 en transition, et redescend à 0 quand la souris s'en va.
   Trois propriétés distinctes pour que rien ne se marche dessus : transform (entrée), translate
   (soulèvement + flottement), scale (grossissement). */
@property --bulle-amp { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --bulle-t { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --bulle-levee { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* .bulle.bulle : double classe pour passer devant la transition de .point-lumineux, déclarée plus bas */
.bulle.bulle {
  translate: 0 var(--bulle-levee);                                                         /* sans sin() : soulèvement seul */
  translate: 0 calc(var(--bulle-levee) + sin(var(--bulle-t) * 1turn) * var(--bulle-amp) * 3px);
  animation: bulle-temps 2.6s linear infinite;
  transition:
    opacity .9s ease calc(var(--i, 0) * 130ms),
    transform 1.1s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 130ms),
    filter .9s ease calc(var(--i, 0) * 130ms),
    --bulle-levee .7s cubic-bezier(.22, 1, .36, 1),
    --bulle-amp .9s ease,
    scale .7s cubic-bezier(.22, 1, .36, 1),
    box-shadow .5s ease, border-color .5s ease;
}
@keyframes bulle-temps { to { --bulle-t: 1; } }
.bulle:hover { --bulle-levee: -6px; --bulle-amp: 1; scale: 1.03; }
.js .bulle { opacity: 0; transform: translateY(34px) scale(.95); filter: blur(8px); }
.js .bulle.est-visible { opacity: 1; transform: none; filter: none; }

/* Point lumineux : au survol, une lueur dorée suit la souris (script.js règle --mx et --my)
   et le contour s'allume. La lueur passe sous le contenu grâce à isolation + z-index -1. */
:where(.point-lumineux) { position: relative; } /* sans poids : la pastille du haut de page reste en absolu */
.point-lumineux { isolation: isolate; transition: transform .35s, box-shadow .35s, border-color .35s; }
.point-lumineux::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--or-clair) 30%, transparent), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.point-lumineux:hover::after { opacity: 1; }
.point-lumineux:hover {
  border-color: color-mix(in srgb, var(--or) 50%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--or) 22%, transparent), 0 18px 50px -18px color-mix(in srgb, var(--or) 45%, transparent);
}

/* ---------- Transition entre les pages ---------- */

/* Un flou radial, comme un coup de zoom. Au départ, la page s'avance vers nous et se floute depuis
   les bords jusqu'au centre, puis un fond se referme dessus et le logo arrive avec une barre de
   chargement. La page d'arrivée naît couverte (classe .en-transition posée dans le <head>) ; quand
   elle est prête, script.js la passe en .en-arrivee : le logo file vers nous en s'effaçant, le fond
   s'ouvre, la page recule en place et le flou se résorbe depuis le centre.
   Au moment où l'on change de page, le fond est opaque : rien de l'ancienne ni de la nouvelle page
   ne saute à l'écran.
   - .en-transition : couvert (fin du départ, début de l'arrivée) ; .en-depart : on part ;
     .en-arrivee : on lève le voile. Les transitions de l'état couvert règlent le départ, celles
     de l'état de repos règlent l'arrivée.
   - Le flou : trois calques de backdrop-filter, de plus en plus forts. Les deux premiers ne floutent
     que le pourtour (masque radial), le troisième tout l'écran : ils s'allument du bord vers le
     centre et s'éteignent du centre vers le bord. Rien que de l'opacité, du scale et des calques
     fixes : tout tourne sur le compositeur, fluide même quand la page charge ses scènes 3D.
     Le conteneur ne doit avoir ni opacité ni filtre : le flou de ses calques ne verrait plus la page. */
.transition {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s 1.25s;
}
.transition__flou, .transition__flou i, .transition__fond { position: absolute; inset: 0; }
.transition__flou i { opacity: 0; transition: opacity var(--duree-leve) ease var(--leve); }
.transition__flou i:nth-child(1) {
  --leve: .5s; --duree-leve: .65s; --couvre: 0s;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: radial-gradient(circle, transparent 12%, #000 62%); mask-image: radial-gradient(circle, transparent 12%, #000 62%);
}
.transition__flou i:nth-child(2) {
  --leve: .3s; --duree-leve: .6s; --couvre: .1s;
  -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px);
  -webkit-mask-image: radial-gradient(circle, transparent 34%, #000 88%); mask-image: radial-gradient(circle, transparent 34%, #000 88%);
}
.transition__flou i:nth-child(3) { --leve: .12s; --duree-leve: .5s; --couvre: .22s; -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }
.transition__fond {
  background: radial-gradient(circle at 50% 50%, var(--lueur), var(--fond-2) 72%);
  opacity: 0; transition: opacity .55s ease .06s;
}
.transition__contenu {
  position: relative; display: grid; justify-items: center; gap: 1.5rem;
  opacity: 0; transform: scale(.86);
  transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}
.transition__logo { width: min(340px, 64vw); height: auto; filter: drop-shadow(0 0 34px color-mix(in srgb, var(--or) 45%, transparent)); }
.transition__barre { position: relative; width: 150px; height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--texte) 12%, transparent); }
.transition__barre span {
  position: absolute; inset: 0 auto 0 0; width: 45%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--or-clair), transparent);
  animation: chargement 1s ease-in-out infinite;
}
@keyframes chargement { from { transform: translateX(-110%); } to { transform: translateX(240%); } }
.en-transition .transition { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.en-transition .transition__flou i { opacity: 1; transition: opacity .3s ease var(--couvre); }
.en-transition .transition__fond { opacity: 1; transition: opacity .3s ease .34s; }
.en-transition .transition__contenu { opacity: 1; transform: none; transition: opacity .3s ease .38s, transform .55s cubic-bezier(.22, 1, .36, 1) .3s; }
/* le voile se lève : le logo continue vers nous en s'effaçant */
.en-arrivee .transition__contenu {
  opacity: 0; transform: scale(1.18); filter: blur(6px);
  transition: opacity .3s ease, transform .45s cubic-bezier(.5, 0, .9, .6), filter .3s ease;
}

/* La page elle-même s'avance (départ) puis recule en place (arrivée), autour du centre de l'écran :
   script.js donne à l'en-tête, au contenu et au pied de page ce centre pour origine. Des animations
   plutôt que des transitions, pour ne pas écraser celles que ces blocs ont déjà. Au repos, aucun
   scale : même à 1, il décrocherait de l'écran les éléments fixes qu'ils contiennent. */
.en-transition body > :is(header, main, footer) { scale: 1.15; }
.en-depart body > :is(header, main, footer) { animation: zoom-depart .62s cubic-bezier(.4, 0, .7, .4) backwards; }
.en-arrivee body > :is(header, main, footer) { animation: zoom-arrivee 1.15s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes zoom-depart { from { scale: 1; } }
@keyframes zoom-arrivee { from { scale: 1.15; } }

/* Sous le voile, rien ne joue son entrée : bulles, fiches produit et scènes 3D attendent qu'il se
   lève pour apparaître, au lieu d'être déjà à moitié entrées (ou entrées d'un coup) à ce moment-là. */
.js.en-transition .bulle.est-visible { opacity: 0; transform: translateY(34px) scale(.95); filter: blur(8px); }
.en-transition :is(.product.apparait, .produit3d canvas, .produit3d > img, .carte__scene) { animation-play-state: paused; }

/* Scènes 3D (produits3d.js, carte.js) : elles arrivent en fondu quand elles sont prêtes, même bien
   après la levée du voile. La mascotte d'attente des produits 3D reste cachée 2,5 s : si la scène
   est prête avant, on ne la voit pas disparaître d'un coup ; sinon (pas de WebGL), elle apparaît en fondu. */
.produit3d canvas, .carte__scene:has(> canvas, > .carte3d) { animation: entree-douce .9s cubic-bezier(.16, 1, .3, 1) backwards; }
.js .produit3d:not(.est-pret) > img { animation: entree-douce .6s ease 2.5s backwards; }
@keyframes entree-douce { from { opacity: 0; scale: .94; filter: blur(8px); } }

/* ---------- Page Boutique ---------- */

.page-tete {
  position: relative; overflow: hidden; color: var(--texte);
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  background: radial-gradient(90% 130% at 80% 0%, var(--lueur), var(--fond) 60%, var(--fond-2));
}
.page-tete__inner { position: relative; }
.page-tete h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 1rem 0; }
.page-tete h1 em { color: var(--or); }
.page-tete .lead { margin-bottom: 0; }
.section--serre { padding-top: clamp(2.5rem, 5vw, 3.5rem); }

.filtres { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtres-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: -1rem 0 2rem; }
.tri { display: flex; align-items: center; gap: 1rem; }
.tri__nb { font-size: .85rem; font-weight: 700; color: var(--doux); white-space: nowrap; }
.tri__choix select {
  padding: .6rem 2.4rem .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--ligne); background-color: var(--surface); color: var(--texte);
  font: 600 .88rem var(--sans); cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--or-texte) 50%), linear-gradient(135deg, var(--or-texte) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
  transition: border-color .2s;
}
.tri__choix select:hover, .tri__choix select:focus { outline: none; border-color: color-mix(in srgb, var(--or) 70%, transparent); }
.filtre {
  padding: .6rem 1.15rem; border-radius: 999px; border: 1px solid var(--ligne);
  background: var(--surface); color: var(--texte); font-weight: 600; font-size: .9rem;
  transition: background-color .2s, color .2s, border-color .2s, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.filtre:hover { border-color: color-mix(in srgb, var(--or) 70%, transparent); transform: translateY(-1px); }
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--or-clair); border-color: var(--encre); }
.product.apparait { animation: apparait .5s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 50ms) backwards; }
@keyframes apparait { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Entrée des textes du haut de page (script.js) ---------- */

/* Les éléments du bloc texte (--n) et les mots du grand titre (--k) montent en se défloutant, l'un après
   l'autre, quand html perd .texte-attente. Filet : le petit script du <head> la retire de toute façon à 4 s.
   (Pas d'animation de secours ici : une valeur tenue par une animation ne se transitionne pas, tout sauterait.) */
:is(.hero__text, .page-tete__inner) > *, h1 .mot {
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1), filter .7s ease;
}
:is(.hero__text, .page-tete__inner) > * { transition-delay: calc(var(--n, 0) * 110ms); }
:is(.hero__text, .page-tete__inner) > h1 { transition-delay: 0s; }
h1 .mot { display: inline-block; transition-delay: calc(80ms + var(--k, 0) * 70ms); }
.texte-attente :is(.hero__text, .page-tete__inner) > *:not(h1),
.texte-attente :is(.hero__text, .page-tete__inner) h1 .mot {
  opacity: 0; transform: translateY(22px); filter: blur(7px);
}
/* le logo en haut à gauche s'illumine à l'arrivée */
.logo-arrivee .header .logo__reflet { animation: logo-reflet-vite 1.2s cubic-bezier(.3, .6, .4, 1) .15s; }
.logo-arrivee .header .logo__svg { animation: logo-lueur-arrivee 1.4s ease-out; }
@keyframes logo-lueur-arrivee {
  0% { filter: drop-shadow(0 0 0 rgba(240, 212, 136, 0)); transform: scale(.94); }
  45% { filter: drop-shadow(0 0 14px rgba(240, 212, 136, .7)); transform: scale(1.03); }
  100% { filter: drop-shadow(0 0 0 rgba(240, 212, 136, 0)); transform: none; }
}

/* ---------- Animations ---------- */

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes logo-reflet { 0%, 55% { transform: translateX(0) skewX(-20deg); } 80%, 100% { transform: translateX(1300px) skewX(-20deg); } }
@keyframes logo-reflet-vite { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(1300px) skewX(-20deg); } }
@keyframes logo-lueur {
  0%, 58%, 92%, 100% { filter: drop-shadow(0 0 0 rgba(240, 212, 136, 0)); }
  72% { filter: drop-shadow(0 0 10px rgba(240, 212, 136, .55)); }
}
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}