/* ============================================================
   ESMELYS — Joaillerie florale
   Theme: pastel, dominant blue, florals, luminous & airy
   (CSS d'origine conservé À L'IDENTIQUE, + ajouts boutique en fin)
============================================================ */
:root{
  --font-display:'Cormorant Garamond','Georgia',serif;
  --font-sans:'Jost','Trebuchet MS',system-ui,sans-serif;

  --bg:#f1f8ff;
  --bg-2:#e7f2fc;
  --surface:#ffffff;
  --surface-2:#f7fbff;

  --ink:#22405d;
  --ink-2:#5d7791;
  --ink-3:#90a6bd;

  --sky-50:#f0f8ff;
  --sky-100:#e3f1fc;
  --sky-200:#cde6fa;
  --sky-300:#a9d2f1;
  --blue-400:#7fb6e6;
  --blue-500:#5499d6;
  --blue-600:#3a82c4;
  --blue-700:#2c6aa6;

  --lav:#e7e3f8;
  --lav-2:#d3ccf0;
  --blush:#f9dde4;
  --blush-2:#f3c5d1;
  --cream:#fffdf8;
  --gold:#c9a96a;
  --gold-soft:#e6d2a4;

  --r-sm:14px;
  --r:22px;
  --r-lg:34px;
  --pill:999px;

  --shadow-xs:0 1px 3px rgba(40,80,130,.06);
  --shadow-sm:0 6px 18px -8px rgba(40,90,150,.18);
  --shadow:0 18px 40px -18px rgba(40,90,150,.32), 0 6px 16px -10px rgba(40,90,150,.18);
  --shadow-lg:0 40px 80px -30px rgba(38,86,150,.45);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --maxw:1240px;
  --gut:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* clip = clippe le débordement horizontal SANS casser position:sticky
     (contrairement à hidden) ; couplé à html{overflow-x:clip} ça empêche
     la page d'être plus large que l'écran → plus de "vide" au dézoom.
     `hidden` en repli pour les vieux navigateurs qui ignorent `clip`. */
  overflow-x:hidden;
  overflow-x:clip;
  max-width:100%;
  position:relative;
}
::selection{background:var(--blue-300,#a9d2f1);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.06;color:var(--ink);letter-spacing:.2px}

/* ---------- Atmospheric background ---------- */
.bg-field{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--sky-50) 0%, var(--bg) 45%, var(--bg-2) 100%);}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.6;mix-blend-mode:multiply;will-change:transform}
.blob.b1{width:46vw;height:46vw;left:-10vw;top:-8vw;background:radial-gradient(circle,#bfe0f7,transparent 70%);animation:drift1 26s ease-in-out infinite}
.blob.b2{width:40vw;height:40vw;right:-12vw;top:6vw;background:radial-gradient(circle,#e6def8,transparent 70%);animation:drift2 32s ease-in-out infinite}
.blob.b3{width:38vw;height:38vw;left:18vw;bottom:-14vw;background:radial-gradient(circle,#fadbe4,transparent 72%);animation:drift3 30s ease-in-out infinite}
.blob.b4{width:34vw;height:34vw;right:6vw;bottom:2vw;background:radial-gradient(circle,#cfe9fb,transparent 70%);animation:drift1 28s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,5vh) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-4vh) scale(1.15)}}

/* film grain */
.grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* drifting petals layer */
.petal-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-8%;will-change:transform,opacity;opacity:0}
.petal svg{display:block}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-sans);font-weight:500;font-size:.94rem;letter-spacing:.3px;
  padding:.85em 1.5em;border-radius:var(--pill);
  position:relative;overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),background .3s;
  white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em}
.btn--primary{color:#fff;background:linear-gradient(135deg,var(--blue-400),var(--blue-600));box-shadow:0 12px 26px -12px rgba(44,106,166,.7),inset 0 1px 0 rgba(255,255,255,.45)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 20px 36px -14px rgba(44,106,166,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--primary::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .7s var(--ease-out)}
.btn--primary:hover::after{left:140%}
.btn--ghost{color:var(--blue-700);background:rgba(255,255,255,.55);border:1.5px solid var(--sky-300);backdrop-filter:blur(6px)}
.btn--ghost:hover{transform:translateY(-3px);background:#fff;border-color:var(--blue-400);box-shadow:var(--shadow-sm)}
.btn--block{width:100%;justify-content:center}

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--blue-600)}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--blue-400))}
.eyebrow.center::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--blue-400),transparent)}
.eyebrow svg{width:13px;height:13px;color:var(--gold)}

/* ---------- Announcement bar ---------- */
.announce{background:linear-gradient(90deg,var(--blue-600),var(--blue-500),var(--blue-600));color:#eaf4ff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;overflow:hidden;position:relative;z-index:60}
.announce .track{display:flex;gap:3.5rem;white-space:nowrap;padding:.55rem 0;width:max-content;animation:slide 30s linear infinite}
.announce span{display:inline-flex;align-items:center;gap:.7rem}
.announce span::before{content:"✦";color:var(--gold-soft)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;transition:all .45s var(--ease)}
.header__inner{max-width:var(--maxw);margin:0 auto;padding:1.05rem var(--gut);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.header.scrolled{background:rgba(247,251,255,.82);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 rgba(80,140,200,.12),0 12px 30px -22px rgba(40,90,150,.4)}
.header.scrolled .header__inner{padding-top:.7rem;padding-bottom:.7rem}

.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.65rem;letter-spacing:.5px;color:var(--ink)}
.brand .mark{width:34px;height:34px;color:var(--blue-500);animation:spin 26s linear infinite}
.brand b{font-weight:600}
.brand small{font-family:var(--font-sans);font-size:.56rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:-2px;margin-left:1px}
@keyframes spin{to{transform:rotate(360deg)}}

.nav{display:flex;align-items:center;gap:2.1rem}
.nav a{font-size:.92rem;font-weight:400;color:var(--ink-2);position:relative;padding:.2rem 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:linear-gradient(90deg,var(--blue-400),var(--gold));transition:width .35s var(--ease-out)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{width:100%}

.header__actions{display:flex;align-items:center;gap:.4rem}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink);position:relative;transition:background .3s,transform .3s}
.icon-btn:hover{background:rgba(124,184,230,.16);transform:translateY(-1px)}
.icon-btn svg{width:21px;height:21px}
.cart-count{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--blue-600);color:#fff;font-size:.66rem;font-weight:600;display:grid;place-items:center;transform:scale(0);transition:transform .35s var(--ease-out)}
.cart-count.show{transform:scale(1)}
.cart-count.pop{animation:pop .45s var(--ease-out)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.burger{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,6vw,5rem) var(--gut) clamp(3rem,7vw,6rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero__content{position:relative;z-index:2}
.hero h1{font-size:clamp(2.7rem,6vw,5.1rem);font-weight:500;letter-spacing:-.5px;margin:1.1rem 0 0}
.hero h1 em{font-style:italic;color:var(--blue-600);position:relative}
.hero h1 .grad{background:linear-gradient(105deg,var(--blue-500),var(--blue-700) 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.hero p.lead{font-size:1.12rem;color:var(--ink-2);max-width:34ch;margin:1.5rem 0 2.1rem;font-weight:300}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap}
.hero__stats{display:flex;gap:2rem;margin-top:2.6rem;flex-wrap:wrap}
.hero__stats .s{display:flex;align-items:center;gap:.6rem}
.hero__stats .s svg{width:26px;height:26px;color:var(--blue-500);flex:none}
.hero__stats .s b{font-family:var(--font-display);font-size:1.25rem;font-weight:600;display:block;line-height:1}
.hero__stats .s small{font-size:.74rem;color:var(--ink-3);letter-spacing:.06em}

/* hero visual */
.hero__visual{position:relative;z-index:1;aspect-ratio:1/1.05;max-width:520px;justify-self:center;width:100%}
.orb{position:absolute;inset:6%;border-radius:46% 54% 52% 48%/52% 46% 54% 48%;
  background:linear-gradient(150deg,#fff,var(--sky-100));box-shadow:var(--shadow-lg),inset 0 2px 30px rgba(255,255,255,.9);
  overflow:hidden;animation:morph 14s ease-in-out infinite;border:1px solid rgba(255,255,255,.7)}
@keyframes morph{0%,100%{border-radius:46% 54% 52% 48%/52% 46% 54% 48%}50%{border-radius:54% 46% 47% 53%/46% 54% 47% 53%}}
.orb img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease-out)}
.hero__visual:hover .orb img{transform:scale(1.12)}
.orb .media-fallback{position:absolute;inset:0}
.ring{position:absolute;inset:0;border:1.5px dashed rgba(124,184,230,.5);border-radius:50%;animation:spin 40s linear infinite}
.ring.r2{inset:-5%;border-color:rgba(201,169,106,.35);border-style:dotted;animation-duration:55s;animation-direction:reverse}
.float-chip{position:absolute;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid #fff;box-shadow:var(--shadow-sm);border-radius:var(--pill);padding:.55rem 1rem;font-size:.8rem;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:.5rem;z-index:3}
.float-chip svg{width:16px;height:16px;color:var(--gold)}
.chip-a{top:4%;left:-6%;animation:bob 5s ease-in-out infinite}
.chip-b{bottom:9%;right:-7%;animation:bob 6s ease-in-out infinite .8s}
.chip-c{bottom:-2%;left:14%;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;animation:bob 5.5s ease-in-out infinite .4s}
.chip-c svg{color:#fff}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.mini-flower{position:absolute;color:var(--blue-400);opacity:.85;animation:bob 7s ease-in-out infinite}
.mf1{top:-3%;right:18%;width:46px;animation-delay:.3s}
.mf2{bottom:18%;left:-8%;width:36px;color:var(--blush-2);animation-delay:1s}

.scroll-cue{position:absolute;left:var(--gut);bottom:.5rem;display:flex;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--blue-400),transparent);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--blue-600);animation:slidedown 1.8s ease-in-out infinite}
@keyframes slidedown{to{top:120%}}

/* ---------- Marquee ribbon ---------- */
.ribbon{border-block:1px solid rgba(124,184,230,.22);overflow:hidden;background:rgba(255,255,255,.4);margin-top:1rem}
.ribbon .track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:slide 38s linear infinite}
.ribbon i{display:inline-flex;align-items:center;gap:1.6rem;font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:var(--blue-700);padding:1.1rem 1.6rem;opacity:.85}
.ribbon i::after{content:"❀";font-style:normal;color:var(--gold);font-size:1rem}

/* ---------- Section frame ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,6vw,5.5rem) var(--gut);position:relative}
.sec-head{text-align:center;max-width:640px;margin:0 auto clamp(2.6rem,5vw,4rem)}
.sec-head h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin:1rem 0 .8rem}
.sec-head p{color:var(--ink-2);font-weight:300;font-size:1.05rem}
.flower-deco{position:absolute;color:var(--blue-300);opacity:.5;pointer-events:none;z-index:0}

/* ---------- Products ---------- */
/* Grille ADAPTATIVE : s'ajuste automatiquement au nombre de produits
   et à la largeur d'écran (ajoutez un produit → la grille se réagence). */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(1.4rem,3vw,2.4rem);position:relative;z-index:1;justify-content:center}
.product{background:linear-gradient(180deg,#fff,var(--surface-2));border:1px solid rgba(255,255,255,.8);border-radius:var(--r-lg);padding:1rem 1rem 1.5rem;box-shadow:var(--shadow-sm);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);position:relative;overflow:hidden}
.product::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(124,184,230,.5),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s}
.product:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)}
.product:hover::before{opacity:1}
.product__media{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,var(--sky-100),var(--lav))}
.media{position:relative;aspect-ratio:1/1;overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out),opacity .5s}
.product:hover .media img{transform:scale(1.07)}
.media-fallback{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(140deg,var(--sky-200),var(--lav) 55%,var(--blush));color:rgba(44,106,166,.55);text-align:center}
.media-fallback svg{width:64px;height:64px;opacity:.7;animation:bob 6s ease-in-out infinite}
.media-fallback span{display:block;font-family:var(--font-display);font-style:italic;font-size:1rem;margin-top:.5rem;letter-spacing:.04em}
.media.broken img{opacity:0}
.media:not(.broken) .media-fallback{opacity:0}
/* fill non-square parents */
.orb .media,.story__media .frame .media,.lightbox__media .media,.gphoto .media{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.story__media .frame{position:relative}

.product__tag{position:absolute;top:.9rem;left:.9rem;z-index:3;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);color:var(--blue-700);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.38rem .7rem;border-radius:var(--pill);box-shadow:var(--shadow-xs)}
.product__tag.gold{background:linear-gradient(135deg,var(--gold),#b9923f);color:#fff}
.product__zoom{position:absolute;top:.8rem;right:.8rem;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow-xs);opacity:0;transform:scale(.7);transition:.4s var(--ease-out)}
.product:hover .product__zoom{opacity:1;transform:scale(1)}
.product__zoom:hover{background:var(--blue-600);color:#fff}
.product__zoom svg{width:18px;height:18px}

.product__thumbs{display:flex;gap:.5rem;margin-top:.85rem}
.thumb{flex:1;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1.5px solid transparent;opacity:.65;transition:.3s;position:relative;background:linear-gradient(135deg,var(--sky-100),var(--lav))}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-active{opacity:1;border-color:var(--blue-400);box-shadow:0 6px 14px -8px rgba(44,106,166,.6)}
.thumb:hover{opacity:1}

.product__info{padding:1.2rem .5rem 0}
.product__flower{font-family:var(--font-display);font-style:italic;color:var(--gold);font-size:1rem;letter-spacing:.02em}
.product__name{font-size:1.55rem;margin:.1rem 0 .4rem}
.product__rating{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-3);margin-bottom:.6rem}
.stars{color:var(--gold);letter-spacing:1px}
.product__desc{font-size:.92rem;color:var(--ink-2);font-weight:300;min-height:3.6em}
.product__buy{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.2rem}
.product__price{font-family:var(--font-display);font-size:1.85rem;font-weight:600;color:var(--ink)}
.product__price small{font-size:.85rem;color:var(--ink-3);font-weight:400}
.btn--add{padding:.7em 1.15em;background:var(--ink);color:#fff;border-radius:var(--pill);font-size:.86rem;transition:transform .35s var(--ease-out),background .3s}
.btn--add svg{width:1.1em;height:1.1em}
.btn--add:hover{transform:translateY(-2px);background:var(--blue-600)}

/* ---------- Story split ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.story__media{position:relative}
.story__media .frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;background:linear-gradient(135deg,var(--sky-200),var(--lav))}
.story__media .frame img{width:100%;height:100%;object-fit:cover}
.story__media .badge{position:absolute;right:-22px;bottom:30px;width:128px;height:128px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;display:grid;place-content:center;text-align:center;box-shadow:var(--shadow);animation:bob 6s ease-in-out infinite}
.story__media .badge b{font-family:var(--font-display);font-size:2.2rem;line-height:.9;display:block}
.story__media .badge span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.story__media .seal{position:absolute;left:-26px;top:-26px;width:96px;color:var(--gold);opacity:.9;animation:spin 30s linear infinite}
.story h2{font-size:clamp(2rem,4vw,3.2rem);margin:1rem 0 1.2rem}
.story p{color:var(--ink-2);font-weight:300;margin-bottom:1.1rem;font-size:1.04rem}
.story .signature{font-family:var(--font-display);font-style:italic;font-size:1.7rem;color:var(--blue-700);margin-top:.4rem}

/* ---------- Features ---------- */
.features{background:linear-gradient(150deg,rgba(255,255,255,.6),rgba(231,243,252,.6));border:1px solid rgba(255,255,255,.7);border-radius:var(--r-lg);padding:clamp(2rem,4vw,3.5rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.feature{text-align:center;padding:1rem .6rem;position:relative}
.feature .ic{width:62px;height:62px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#fff,var(--sky-100));box-shadow:var(--shadow-sm);color:var(--blue-600);transition:transform .5s var(--ease-out)}
.feature:hover .ic{transform:translateY(-6px) rotate(-6deg)}
.feature .ic svg{width:28px;height:28px}
.feature h4{font-size:1.25rem;margin-bottom:.35rem}
.feature p{font-size:.85rem;color:var(--ink-2);font-weight:300}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:130px;gap:1rem}
.gphoto{border-radius:var(--r);overflow:hidden;position:relative;box-shadow:var(--shadow-sm);background:linear-gradient(135deg,var(--sky-200),var(--lav))}
.gphoto img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.gphoto:hover img{transform:scale(1.1)}
.gphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(34,64,93,.35));opacity:0;transition:opacity .4s}
.gphoto:hover::after{opacity:1}
.g-tall{grid-row:span 3}
.g-wide{grid-column:span 2}
.g-big{grid-column:span 2;grid-row:span 2}

/* ---------- Newsletter ---------- */
.newsletter{position:relative;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));border-radius:var(--r-lg);padding:clamp(2.5rem,6vw,5rem);text-align:center;color:#fff;overflow:hidden;box-shadow:var(--shadow-lg)}
.newsletter .deco{position:absolute;color:rgba(255,255,255,.16);pointer-events:none}
.nl-1{top:-30px;left:-20px;width:180px;animation:spin 40s linear infinite}
.nl-2{bottom:-50px;right:-20px;width:220px;animation:spin 55s linear infinite reverse}
.newsletter .eyebrow{color:#cfe7fb}
.newsletter .eyebrow::before,.newsletter .eyebrow.center::after{background:rgba(255,255,255,.5)}
.newsletter .eyebrow svg{color:var(--gold-soft)}
.newsletter h2{color:#fff;font-size:clamp(2rem,4.5vw,3.4rem);margin:1rem 0 .7rem}
.newsletter p{color:#dcecfb;color:rgba(255,255,255,.85);font-weight:300;max-width:46ch;margin:0 auto 2rem;position:relative;z-index:2}
.nl-form{display:flex;gap:.6rem;max-width:480px;margin:0 auto;position:relative;z-index:2;flex-wrap:wrap;justify-content:center}
.nl-form input{flex:1;min-width:220px;padding:.95em 1.3em;border-radius:var(--pill);border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);color:#fff;font-family:inherit;font-size:.95rem;backdrop-filter:blur(6px)}
.nl-form input::placeholder{color:rgba(255,255,255,.7)}
.nl-form input:focus{outline:none;background:rgba(255,255,255,.26);border-color:#fff}
.nl-form .btn{background:#fff;color:var(--blue-700);box-shadow:0 12px 24px -10px rgba(0,0,0,.3)}
.nl-form .btn:hover{transform:translateY(-3px)}
.nl-note{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:1.1rem;position:relative;z-index:2}
.nl-ok{display:none;font-family:var(--font-display);font-style:italic;font-size:1.4rem;margin-top:.2rem;position:relative;z-index:2}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(180deg,transparent,rgba(231,243,252,.7));border-top:1px solid rgba(124,184,230,.2);margin-top:2rem}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,6vw,4.5rem) var(--gut) 2rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.footer .brand{margin-bottom:1rem}
.footer__col h5{font-family:var(--font-sans);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.1rem;font-weight:600}
.footer__col a{display:block;color:var(--ink-2);font-size:.92rem;margin-bottom:.65rem;transition:color .3s,padding-left .3s}
.footer__col a:hover{color:var(--blue-600);padding-left:5px}
.footer__about p{color:var(--ink-2);font-weight:300;font-size:.92rem;max-width:34ch;margin-bottom:1.2rem}
.socials{display:flex;gap:.6rem}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue-600);box-shadow:var(--shadow-xs);transition:.3s}
.socials a:hover{background:var(--blue-600);color:#fff;transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.footer__bottom{max-width:var(--maxw);margin:0 auto;padding:1.4rem var(--gut);border-top:1px solid rgba(124,184,230,.2);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--ink-3)}
.footer__bottom .pay{display:flex;gap:.5rem;align-items:center}
.footer__bottom .pay span{padding:.25rem .55rem;background:#fff;border-radius:6px;font-size:.66rem;font-weight:600;letter-spacing:.05em;color:var(--ink-2);box-shadow:var(--shadow-xs)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);opacity:0;pointer-events:none;transition:opacity .4s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox__overlay{position:absolute;inset:0;background:rgba(20,42,68,.55);backdrop-filter:blur(8px)}
.lightbox__dialog{position:relative;z-index:2;background:linear-gradient(180deg,#fff,var(--surface-2));border-radius:var(--r-lg);width:min(820px,100%);box-shadow:var(--shadow-lg);overflow:hidden;transform:scale(.92) translateY(12px);transition:transform .5s var(--ease-out);display:grid;grid-template-columns:1.15fr .85fr}
.lightbox.open .lightbox__dialog{transform:none}
.lightbox__media{position:relative;background:linear-gradient(135deg,var(--sky-100),var(--lav));aspect-ratio:1/1}
.lightbox__media img{width:100%;height:100%;object-fit:cover}
.lightbox__close{position:absolute;top:1rem;right:1rem;z-index:5;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow-sm);transition:.3s}
.lightbox__close:hover{background:var(--blue-600);color:#fff;transform:rotate(90deg)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow-sm);transition:.3s;font-size:1.4rem}
.lightbox__nav:hover{background:var(--blue-600);color:#fff}
.lightbox__nav.prev{left:1rem}.lightbox__nav.next{right:1rem}
.lightbox__info{padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.lightbox__info .product__flower{font-size:1.1rem}
.lightbox__info h3{font-size:2rem}
.lightbox__info p{color:var(--ink-2);font-weight:300;font-size:.95rem}
.lightbox__thumbs{display:flex;gap:.5rem;margin:.4rem 0 1rem}
.lightbox__thumbs .thumb{width:54px;flex:none}
.lb-price{font-family:var(--font-display);font-size:1.8rem;font-weight:600}

/* ---------- Cart drawer ---------- */
.cart{position:fixed;inset:0;z-index:110;pointer-events:none}
.cart__overlay{position:absolute;inset:0;background:rgba(20,42,68,.4);backdrop-filter:blur(4px);opacity:0;transition:opacity .4s}
.cart.open{pointer-events:auto}
.cart.open .cart__overlay{opacity:1}
.cart__panel{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);background:linear-gradient(180deg,#fff,var(--surface-2));box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .5s var(--ease-out);display:flex;flex-direction:column}
.cart.open .cart__panel{transform:none}
.cart__head{padding:1.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(124,184,230,.2)}
.cart__head h3{font-size:1.6rem;display:flex;align-items:center;gap:.5rem}
.cart__head h3 svg{width:22px;height:22px;color:var(--blue-500)}
.cart__items{flex:1;overflow-y:auto;padding:1.2rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.cart-empty{text-align:center;color:var(--ink-2);margin:auto;padding:2rem 1rem}
.cart-empty svg{width:60px;height:60px;color:var(--blue-300);margin-bottom:1rem}
.cart-empty p{font-family:var(--font-display);font-style:italic;font-size:1.3rem;margin-bottom:.3rem;color:var(--ink)}
.cart-empty small{font-size:.85rem;font-weight:300}
.cart-line{display:flex;gap:1rem;align-items:center}
.cart-line .ci-img{width:68px;height:68px;border-radius:14px;overflow:hidden;flex:none;background:linear-gradient(135deg,var(--sky-200),var(--lav))}
.cart-line .ci-img img{width:100%;height:100%;object-fit:cover}
.cart-line .ci-body{flex:1;min-width:0}
.cart-line .ci-body b{font-family:var(--font-display);font-size:1.15rem;font-weight:600;display:block;line-height:1.2}
.cart-line .ci-body small{color:var(--gold);font-style:italic}
.qty{display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;border:1px solid rgba(124,184,230,.4);border-radius:var(--pill);padding:.15rem}
.qty button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--blue-700);font-size:1rem;line-height:1;transition:.2s}
.qty button:hover{background:var(--sky-100)}
.qty span{min-width:18px;text-align:center;font-size:.9rem;font-weight:500}
.ci-price{font-family:var(--font-display);font-weight:600;font-size:1.15rem}
.ci-remove{font-size:.72rem;color:var(--ink-3);text-decoration:underline;margin-top:.3rem;display:inline-block;cursor:pointer}
.ci-remove:hover{color:#c0506a}
.cart__foot{padding:1.4rem 1.5rem;border-top:1px solid rgba(124,184,230,.2);background:var(--surface)}
.cart__total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.3rem;font-size:1rem}
.cart__total b{font-family:var(--font-display);font-size:1.8rem;font-weight:600}
.cart__foot .ship{font-size:.78rem;color:var(--ink-3);margin-bottom:1rem}
.cart-thanks{display:none;text-align:center;padding:.5rem 0 .2rem;font-family:var(--font-display);font-style:italic;color:var(--blue-700);font-size:1.25rem}

/* ---------- Toast ---------- */
.toasts{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:130;display:flex;flex-direction:column;gap:.6rem;align-items:center;pointer-events:none}
.toast{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border:1px solid rgba(124,184,230,.3);box-shadow:var(--shadow);border-radius:var(--pill);padding:.8rem 1.3rem;font-size:.9rem;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:.6rem;transform:translateY(20px);opacity:0;transition:.4s var(--ease-out)}
.toast.show{transform:none;opacity:1}
.toast svg{width:18px;height:18px;color:var(--blue-500)}

/* petal burst */
.burst{position:fixed;z-index:140;pointer-events:none}
.burst i{position:absolute;left:0;top:0;will-change:transform,opacity}

/* back to top */
.totop{position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;width:48px;height:48px;border-radius:50%;background:var(--blue-600);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:.4s var(--ease-out)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--blue-700);transform:translateY(-3px)}
.totop svg{width:20px;height:20px}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(42px);filter:blur(9px);
  transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out),filter .9s var(--ease-out);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.fade-load{opacity:0;transform:translateY(28px);animation:floatUp 1s var(--ease-out) forwards;animation-delay:var(--d,0s)}
@keyframes floatUp{to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero p.lead{margin-left:auto;margin-right:auto}
  .hero__cta,.hero__stats{justify-content:center}
  .hero__visual{grid-row:1;max-width:380px;margin-bottom:1rem}
  .scroll-cue{display:none}
  .story{grid-template-columns:1fr}
  /* width:100% indispensable : sur une cellule de grille, margin:auto retire
     l'étirement et, le contenu du cadre étant en position:absolute, la photo
     s'effondrait à 0×0 (badge « 2018 » alors flottant dans le vide). */
  .story__media{width:100%;max-width:420px;margin:0 auto}
  .features{grid-template-columns:repeat(2,1fr)}
  .footer__inner{grid-template-columns:1fr 1fr}
  .lightbox__dialog{grid-template-columns:1fr;max-height:90vh;overflow:auto}
}
@media(max-width:760px){
  .nav,.header__actions .label{display:none}
  .burger{display:grid;place-items:center}
  .products{max-width:420px;margin-inline:auto}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}
  .g-big,.g-wide{grid-column:span 2}.g-tall{grid-row:span 2}
  .ribbon i{font-size:1.2rem}
}
@media(max-width:480px){
  .footer__inner{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
}

/* ============================================================
   OPTIMISATIONS MOBILE — n'affecte PAS la version bureau.
   Corrige : (1) pastilles/fleurs flottantes qui retombaient au
   milieu des boutons du héros, (2) en-tête collant qui masquait
   le haut du site, (3) intro qui n'affichait « rien » puis sautait
   au résultat final.
============================================================ */
@media(max-width:760px){
  /* (1) Bulles flottantes CONSERVÉES sur mobile (demandées) : elles
        gravitent autour de la 1re image comme sur bureau. Elles restent
        au-dessus du texte/boutons, pas besoin de les masquer. */

  /* (2) En-tête auto-masqué (classe posée par common.js) : glisse hors
        de l'écran au défilement vers le bas, revient vers le haut. */
  .header{transition:transform .35s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease)}
  .header.header--hidden{transform:translateY(-100%)}
  /* les titres de section ne se cachent plus sous l'en-tête collant */
  #collection,#story,#savoirfaire,#gallery,#footer,#top{scroll-margin-top:84px}

  /* (2 bis) Barre d'actions DÉFILABLE horizontalement : Connexion / Créer un
        compte / recherche / panier / menu ne débordent plus la page (plus
        d'effet « 2 pages » au dézoom) ; on les fait glisser de gauche à
        droite. La barre prend la place restante et scrolle EN INTERNE. */
  .header__inner{gap:.4rem}
  /* logo compact (on retire le sous-titre) → plus de place */
  .header .brand small{display:none}
  .header .brand{font-size:1.5rem}
  /* Sur mobile : PLUS de zone défilable. Les liens texte « Connexion / Créer un
     compte » sont masqués et remplacés par UNE icône « compte » compacte (→ page
     de connexion). Recherche / panier / menu restent donc tous visibles sans
     avoir à glisser. */
  .header__actions{flex:none}
  .header__actions > .icon-btn{flex:none}
  #authLinks{flex:none;overflow:visible}
  #authLinks .text-link{display:none}
  #authLinks .auth-compact{display:grid;place-items:center}
  /* menu compte hors du flux défilant (sinon coupé par l'overflow) */
  .account__panel{position:fixed;top:58px;right:10px;left:auto;width:min(252px,calc(100vw - 20px))}

  /* (3) Intro mobile — éclosion par TRANSITIONS déclenchées par la classe
        .pl-go (common.js l'ajoute après un paint). iOS Safari IGNORE souvent
        les @keyframes lancées au chargement (d'où « rien ne s'anime ») ; les
        transitions sur changement de classe, elles, jouent de façon fiable.
        On anime la FLEUR ENTIÈRE (élément <svg>, transform fiable) plutôt que
        chaque cercle SVG (fragile sur iOS). */
  .preloader .pl-petals circle,
  .preloader .pl-core{animation:none!important;opacity:1!important;transform:none!important}
  .preloader .pl-flower{animation:none!important;opacity:0;transform:scale(.55) rotate(-10deg);
    transform-origin:center;transition:opacity .6s ease,transform .75s var(--ease-out)}
  .preloader .pl-word span{animation:none!important;opacity:0;transform:translateY(75%);
    transition:opacity .55s ease,transform .55s var(--ease-out);transition-delay:calc(.35s + var(--i) * .05s)}
  .preloader .pl-sub{animation:none!important;opacity:0;transition:opacity .6s ease .75s}
  .preloader .pl-sub .ln{animation:none!important;transform:scaleX(1)}
  /* état ÉCLOS (après .pl-go) */
  .preloader.pl-go .pl-flower{opacity:1;transform:none}
  .preloader.pl-go .pl-word span{opacity:1;transform:none}
  .preloader.pl-go .pl-sub{opacity:1}
  .pl-scrollcue{display:none} /* pas de "Défilez" sur mobile (intro auto) */
}

/* mobile nav overlay */
.mnav{position:fixed;inset:0;z-index:80;background:rgba(247,251,255,.97);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;opacity:0;pointer-events:none;transition:.4s}
.mnav.open{opacity:1;pointer-events:auto}
.mnav a{font-family:var(--font-display);font-size:2rem;color:var(--ink)}
.mnav .close{position:absolute;top:1.4rem;right:1.4rem;width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.mnav .mf{color:var(--blue-300);width:60px;margin-bottom:1rem}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.1ms!important}
  .reveal,.fade-load{opacity:1!important;transform:none!important;filter:none!important}
}

/* ============================================================
   AJOUTS BOUTIQUE  (auth, compte, admin, checkout, fiche produit)
   Mêmes variables & composants pour rester cohérent avec le thème.
============================================================ */

/* Liens d'action du header (Connexion / Mon compte / Admin) */
.header__actions a.text-link{font-size:.9rem;color:var(--ink-2);padding:.45rem .7rem;border-radius:var(--pill);transition:color .3s,background .3s;white-space:nowrap}
.header__actions a.text-link:hover{color:var(--blue-700);background:rgba(124,184,230,.16)}
.header__actions a.text-link.admin{color:var(--gold);font-weight:600}
/* Icône « compte » compacte : visible UNIQUEMENT sur mobile (remplace les liens texte) */
.auth-compact{display:none}

/* Conteneur des pages secondaires (centré sous le header) */
.page{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,6vw,5rem) var(--gut);min-height:60vh}
.page__head{text-align:center;margin-bottom:2.5rem}
.page__head h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:.5rem}
.page__head p{color:var(--ink-2);font-weight:300}
.breadcrumb{font-size:.84rem;color:var(--ink-3);margin-bottom:1.4rem}
.breadcrumb a:hover{color:var(--blue-600)}

/* Cartes / surfaces génériques */
.card{background:linear-gradient(180deg,#fff,var(--surface-2));border:1px solid rgba(255,255,255,.8);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(1.6rem,4vw,2.6rem)}

/* Formulaires */
.auth-wrap{max-width:440px;margin:0 auto}
.field{margin-bottom:1.1rem;text-align:left}
.field label{display:block;font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--ink-2);margin-bottom:.4rem}
.field input,.field textarea{width:100%;padding:.85em 1.1em;border-radius:var(--r-sm);border:1.5px solid var(--sky-200);background:#fff;font-family:inherit;font-size:.95rem;color:var(--ink);transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(124,184,230,.2)}
/* Menu déroulant natif (ex. liste des pays) — assorti aux champs texte */
.field select{width:100%;padding:.85em 2.6em .85em 1.1em;border-radius:var(--r-sm);border:1.5px solid var(--sky-200);background:#fff;font-family:inherit;font-size:.95rem;color:var(--ink);cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .3s,box-shadow .3s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a6bd' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;background-size:16px}
.field select:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(124,184,230,.2)}

/* ---------- Menu déroulant pays sur mesure (.cselc) : drapeaux + recherche ---------- */
.cselc{position:relative}
.cselc__fallback{width:100%;padding:.85em 1.1em;border-radius:var(--r-sm);border:1.5px solid var(--sky-200);background:#fff;font-family:inherit;font-size:.95rem;color:var(--ink)}
.cselc__btn{width:100%;display:flex;align-items:center;gap:.6rem;padding:.74em 1em;border-radius:var(--r-sm);
  border:1.5px solid var(--sky-200);background:#fff;font-family:inherit;font-size:.95rem;color:var(--ink);
  text-align:left;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.cselc__btn:hover{border-color:var(--blue-400)}
.cselc.open .cselc__btn{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(124,184,230,.2)}
.cselc__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cselc__label.is-placeholder{color:var(--ink-3)}
.cselc__chev{width:16px;height:16px;color:var(--ink-3);flex:none;transition:transform .25s var(--ease-out),color .2s}
.cselc.open .cselc__chev{transform:rotate(180deg);color:var(--blue-600)}
.cselc__flag{flex:none;width:1.55em;text-align:center;font-size:1.18rem;line-height:1}
/* repli sans emoji (Windows) : pastille élégante avec le code pays */
.cselc--codes .cselc__flag{font-size:.6rem;font-weight:700;letter-spacing:.02em;color:var(--blue-700);
  width:1.95em;height:1.4em;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sky-100),var(--lav));border:1px solid rgba(124,184,230,.45);border-radius:5px}
/* panneau */
.cselc__pop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:rgba(255,255,255,.98);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--sky-200);border-radius:16px;padding:.55rem;
  box-shadow:0 26px 54px -24px rgba(40,90,150,.55);
  opacity:0;transform:translateY(-6px) scale(.985);pointer-events:none;
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.cselc.open .cselc__pop{opacity:1;transform:none;pointer-events:auto}
.cselc__search{position:relative;margin-bottom:.45rem}
.cselc__search svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.cselc__search input{width:100%;padding:.6em .8em .6em 2.2em;border-radius:11px;border:1.5px solid var(--sky-200);
  background:var(--sky-50);font-family:inherit;font-size:.9rem;color:var(--ink)}
.cselc__search input:focus{outline:none;border-color:var(--blue-400);background:#fff;box-shadow:0 0 0 3px rgba(124,184,230,.18)}
.cselc__list{list-style:none;margin:0;padding:.1rem;max-height:288px;overflow-y:auto;overscroll-behavior:contain}
.cselc__list::-webkit-scrollbar{width:9px}
.cselc__list::-webkit-scrollbar-thumb{background:var(--sky-200);border-radius:8px;border:2px solid #fff}
.cselc__list::-webkit-scrollbar-thumb:hover{background:var(--sky-300)}
.cselc__opt{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:10px;font-size:.92rem;
  color:var(--ink-2);cursor:pointer;transition:background .16s,color .16s,padding-left .16s}
.cselc__opt:hover{background:var(--sky-50);color:var(--ink);padding-left:.95rem}
.cselc__opt.is-active{background:rgba(124,184,230,.16);color:var(--blue-700);font-weight:600}
.cselc__optname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cselc__opt.is-active .cselc__optname::after{content:"✓";margin-left:.45rem;color:var(--blue-600);font-weight:700}
.cselc__empty{padding:.85rem;text-align:center;color:var(--ink-3);font-size:.88rem;list-style:none}
.form-note{font-size:.84rem;color:var(--ink-2);text-align:center;margin-top:1.2rem}
.form-note a{color:var(--blue-600);font-weight:500}
.form-error{display:none;background:#fdeef0;border:1px solid var(--blush-2);color:#b0445f;border-radius:var(--r-sm);padding:.7rem 1rem;font-size:.86rem;margin-bottom:1rem}
.form-error.show{display:block}

/* Fiche produit (page individuelle) */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.pdp__media .frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1/1;background:linear-gradient(135deg,var(--sky-100),var(--lav));position:relative}
.pdp__media .frame .media{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.pdp__media .product__thumbs{margin-top:.85rem}
.pdp__info h1{font-size:clamp(2rem,4vw,3rem);margin:.3rem 0 .6rem}
.pdp__price{font-family:var(--font-display);font-size:2.4rem;font-weight:600;margin:1rem 0}
.pdp__desc{color:var(--ink-2);font-weight:300;font-size:1.05rem;margin-bottom:1.4rem}
.stock-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:500;padding:.35rem .8rem;border-radius:var(--pill);margin-bottom:1.2rem}
.stock-badge.ok{background:#e6f6ec;color:#2f8a52}
.stock-badge.low{background:#fef3e2;color:#b9772b}
.stock-badge.out{background:#fdeef0;color:#b0445f}
.pdp__buy{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

/* Tableaux (commandes / admin) */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);background:#fff}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
table.data th,table.data td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid rgba(124,184,230,.18)}
table.data th{background:var(--surface-2);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--sky-50)}
.tag-status{font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:var(--pill);text-transform:uppercase;letter-spacing:.04em}
.tag-status.paid{background:#e6f6ec;color:#2f8a52}
.tag-status.pending{background:#fef3e2;color:#b9772b}
.tag-status.cancelled{background:#fdeef0;color:#b0445f}

/* Compte / commandes */
.order-card{background:#fff;border:1px solid rgba(124,184,230,.18);border-radius:var(--r);padding:1.3rem 1.5rem;margin-bottom:1.2rem;box-shadow:var(--shadow-xs)}
.order-card__head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;margin-bottom:.8rem}
.order-card__head b{font-family:var(--font-display);font-size:1.2rem}
.order-card__items{list-style:none;font-size:.9rem;color:var(--ink-2)}
.order-card__items li{display:flex;justify-content:space-between;padding:.25rem 0}

/* Admin layout */
.admin-grid{display:grid;grid-template-columns:380px 1fr;gap:2rem;align-items:start}
.admin-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.btn--sm{padding:.45em .9em;font-size:.8rem}
.btn--danger{background:#fdeef0;color:#b0445f}
.btn--danger:hover{background:#b0445f;color:#fff}
.empty-state{text-align:center;color:var(--ink-2);padding:3rem 1rem}
.empty-state svg{width:64px;height:64px;color:var(--blue-300);margin-bottom:1rem}

@media(max-width:860px){
  .pdp{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .admin-grid{grid-template-columns:1fr}
}

/* Page checkout / succès */
.checkout-grid{display:grid;grid-template-columns:1fr .8fr;gap:2rem;align-items:start}
.summary-line{display:flex;justify-content:space-between;padding:.4rem 0;font-size:.92rem;color:var(--ink-2)}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(124,184,230,.2);margin-top:.6rem;padding-top:.8rem}
.summary-total b{font-family:var(--font-display);font-size:1.7rem}
.success-hero{text-align:center;max-width:560px;margin:0 auto}
.success-hero .check{width:90px;height:90px;margin:0 auto 1.5rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;box-shadow:var(--shadow)}
.success-hero .check svg{width:44px;height:44px}
@media(max-width:760px){.checkout-grid{grid-template-columns:1fr}}

/* Statuts logistiques supplémentaires */
.tag-status.shipped{background:#e3f1fc;color:#2c6aa6}
.tag-status.in_delivery{background:#efeafb;color:#6a4fb0}
.tag-status.delivered{background:#e6f6ec;color:#2f8a52}

/* Sélecteur de statut (admin) */
.status-select{display:block;font-family:inherit;font-size:.8rem;padding:.3rem .5rem;border:1px solid var(--sky-200);border-radius:8px;background:#fff;color:var(--ink);max-width:180px;cursor:pointer}
.status-select:focus{outline:none;border-color:var(--blue-400)}

/* Choix de la méthode de paiement (checkout) */
.pay-methods{display:flex;flex-direction:column;gap:.6rem}
.pay-method{display:flex;align-items:center;gap:.8rem;border:1.5px solid var(--sky-200);border-radius:var(--r-sm);padding:.85rem 1rem;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s}
.pay-method:hover{border-color:var(--blue-400)}
.pay-method input{accent-color:var(--blue-600);width:auto}
.pay-method:has(input:checked){border-color:var(--blue-500);background:var(--sky-50);box-shadow:0 0 0 3px rgba(124,184,230,.18)}
.pay-method__body{flex:1;display:flex;flex-direction:column;line-height:1.25}
.pay-method__body b{font-family:var(--font-sans);font-weight:600}
.pay-method__body small{color:var(--ink-3);font-size:.8rem}
.pay-method svg{width:26px;height:26px;color:var(--blue-600);flex:none}
/* Transporteur non desservi : affiché mais NON sélectionnable */
.ship-method.is-disabled{cursor:not-allowed;opacity:.5;background:var(--sky-50);border-style:dashed}
.ship-method.is-disabled:hover{border-color:var(--sky-200)}
.ship-method.is-disabled .pay-method__body b{color:var(--ink-3);font-weight:500}

/* Code A2F : champ centré */
#tf-code{font-variant-numeric:tabular-nums}

/* ============================================================
   PRELOADER / ÉCRAN D'OUVERTURE  (logo qui éclot + rideau courbe)
   Inspiré du pattern "curtain" 21st.dev, adapté en vanilla.
   100% transform/opacity (GPU), respecte prefers-reduced-motion.
============================================================ */
.preloader{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.preloader__panel{
  position:absolute;inset:0;display:grid;place-items:center;
  /* bleu clair pastel */
  background:linear-gradient(160deg,#f2f9ff 0%,#dcecfb 0%,#dcecfb 50%,#cfe6fb 100%);
  background:linear-gradient(160deg,#f2f9ff 0%,#deeefb 52%,#cfe6fb 100%);
  transform:translateY(0);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
/* bord courbe (hangs below the panel, follows it up) */
.preloader__edge{position:absolute;top:99.5%;left:0;width:100%;height:16vh;display:block;fill:#cfe6fb}
/* sortie (fallback) : le panneau (et son bord courbe) remontent */
.preloader.is-exiting .preloader__panel{transform:translateY(-120%)}
.preloader.is-exiting .preloader__logo{opacity:0;transition:opacity .4s ease}
.preloader.is-skip{opacity:0;transition:opacity .35s ease}

/* ÉCLOSION déclenchée par JS (classe .pl-go) APRÈS un paint : sinon iOS
   Safari "saute" les animations lancées au chargement sur des éléments
   cachés (tout apparaissait d'un coup à la levée du rideau). Tant que
   .pl-go est absent → animations en pause sur leur 1re frame (état caché).
   common.js ajoute .pl-go en double-rAF, sur bureau ET mobile. */
.preloader:not(.pl-go) .preloader__logo,
.preloader:not(.pl-go) .pl-flower,
.preloader:not(.pl-go) .pl-petals circle,
.preloader:not(.pl-go) .pl-core,
.preloader:not(.pl-go) .pl-word span,
.preloader:not(.pl-go) .pl-sub,
.preloader:not(.pl-go) .pl-sub .ln,
.preloader:not(.pl-go) .pl-scrollcue{animation-play-state:paused}

/* --- Mode piloté par le SCROLL (bureau uniquement) ---
   Au sommet, le rideau couvre l'écran (logo animé). En descendant, il se
   lève PROPORTIONNELLEMENT au défilement (var --p = 0→1, posée par
   common.js) ; en remontant tout en haut, il réapparaît. La pastille
   « Défilez » est dans le panneau, donc elle s'efface en se levant. */
.preloader.is-scroll{pointer-events:none}
.preloader.is-scroll .preloader__panel{transform:translateY(calc(var(--p,0) * -118%));transition:none;will-change:transform}
.preloader.is-scroll .preloader__logo{opacity:calc(1 - var(--p,0) * 1.5)}
.preloader.is-scroll.is-lifted{visibility:hidden}

.preloader__logo{position:relative;text-align:center;color:var(--ink);padding:0 2rem}

/* indice « défilez pour entrer » */
.pl-scrollcue{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--font-sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--blue-700);opacity:0;animation:plFade .8s ease 1.7s forwards}
.pl-scrollcue svg{width:22px;height:22px;color:var(--blue-500);animation:cueBounce 1.8s ease-in-out infinite}
@keyframes cueBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* Fleur qui éclot */
.pl-flower{width:clamp(54px,8vw,76px);height:auto;margin:0 auto .9rem;display:block;filter:drop-shadow(0 10px 22px rgba(60,120,180,.28));animation:plSpin 24s linear infinite}
.pl-petals circle{fill:#7fb6e6;transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;animation:petalPop .7s cubic-bezier(.34,1.56,.64,1) forwards}
.pl-petals circle:nth-child(1){animation-delay:.20s}
.pl-petals circle:nth-child(2){animation-delay:.30s}
.pl-petals circle:nth-child(3){animation-delay:.40s}
.pl-petals circle:nth-child(4){animation-delay:.50s}
.pl-petals circle:nth-child(5){animation-delay:.60s}
.pl-core{fill:#e0bd6a;transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;animation:petalPop .6s cubic-bezier(.34,1.56,.64,1) .62s forwards}
@keyframes petalPop{from{transform:scale(0);opacity:0}60%{opacity:1}to{transform:scale(1);opacity:1}}
@keyframes plSpin{to{transform:rotate(360deg)}}

/* ===== Préchargeur : LYS qui éclot (+ fleurs bleues qui poussent partout) ===== */
.pl-lily{width:auto;height:clamp(210px,40vh,380px);margin:0 auto .3rem;display:block;filter:drop-shadow(0 16px 30px rgba(80,125,180,.22))}
/* jardin de fleurs bleues dispersées sur tout l'écran (derrière le logo) */
.pl-garden{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.preloader__logo{z-index:2}
.pl-bloom{position:absolute;width:var(--s,64px);height:auto;transform:translate(-50%,-50%) scale(0);opacity:0;filter:drop-shadow(0 8px 16px rgba(80,125,180,.20))}
.pl-bloom .pb-petals circle{fill:currentColor}
.pl-bloom .pb-core{fill:#e0bd6a}
.preloader.pl-go .pl-bloom{animation:plGrow 1.15s var(--gd,.4s) cubic-bezier(.2,.84,.3,1) forwards}
@keyframes plGrow{0%{transform:translate(-50%,-50%) translateY(16px) scale(0);opacity:0}62%{transform:translate(-50%,-50%) translateY(0) scale(1.14);opacity:var(--op,.9)}100%{transform:translate(-50%,-50%) scale(1);opacity:var(--op,.9)}}
/* états repliés (bouton/graine) — l'éclosion se joue quand .pl-go est posé */
.pl-lily .flowerhead{transform:translate(320px,392px) rotate(-42deg)}
.pl-lily .petal{transform-origin:0 0;transform:rotate(var(--c)) scale(.2);opacity:.35}
.pl-lily .stamen{transform-origin:0 0;transform:rotate(var(--so)) scaleY(0);opacity:0}
.pl-lily .ovary{transform-origin:0 0;transform:scale(0);opacity:0}
.pl-lily .stem-path{stroke-dasharray:640;stroke-dashoffset:640}
.pl-lily .leaf{transform-box:fill-box;transform-origin:bottom right;transform:scale(0) rotate(8deg);opacity:0}
.pl-lily .leaf.r{transform-origin:bottom left}
.pl-lily .dew{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
/* éclosion */
.preloader.pl-go .pl-lily .flowerhead{animation:lilySway 8s ease-in-out 2.8s infinite alternate}
.preloader.pl-go .pl-lily .petal{animation:lilyBloom 1.7s var(--d) cubic-bezier(.16,.84,.24,1) forwards}
.preloader.pl-go .pl-lily .stamen{animation:lilyEmerge 1.15s var(--sd) cubic-bezier(.2,.72,.28,1) forwards}
.preloader.pl-go .pl-lily .ovary{animation:lilyPop .9s .3s cubic-bezier(.2,.8,.3,1) forwards}
.preloader.pl-go .pl-lily .stem-path{animation:lilyDraw 1.5s ease-out forwards}
.preloader.pl-go .pl-lily .leaf{animation:lilyLeafPop 1.1s var(--ld) cubic-bezier(.2,.82,.3,1) forwards}
.preloader.pl-go .pl-lily .dew{animation:lilyTwinkle 1s var(--dd) ease forwards}
@keyframes lilySway{from{transform:translate(320px,392px) rotate(-42deg) scale(1)}to{transform:translate(320px,392px) rotate(-36deg) scale(1.012)}}
@keyframes lilyBloom{0%{transform:rotate(var(--c)) scale(.2);opacity:.35}62%{transform:rotate(calc(var(--o) + var(--ov))) scale(1.05);opacity:1}100%{transform:rotate(var(--o)) scale(1);opacity:1}}
@keyframes lilyEmerge{0%{transform:rotate(var(--so)) scaleY(0);opacity:0}70%{transform:rotate(calc(var(--so) + var(--sov))) scaleY(1.04);opacity:1}100%{transform:rotate(var(--so)) scaleY(1);opacity:1}}
@keyframes lilyPop{to{transform:scale(1);opacity:1}}
@keyframes lilyDraw{to{stroke-dashoffset:0}}
@keyframes lilyLeafPop{to{transform:scale(1) rotate(0);opacity:1}}
@keyframes lilyTwinkle{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:.92}}

/* Mot ESMELYS — lettres qui montent */
.pl-word{font-family:var(--font-display);font-weight:500;font-size:clamp(2.4rem,7vw,4rem);letter-spacing:.22em;line-height:1;padding-left:.22em;display:flex;justify-content:center;overflow:hidden}
.pl-word span{display:inline-block;transform:translateY(120%);opacity:0;animation:letterUp .85s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.85s + var(--i) * .06s)}
@keyframes letterUp{to{transform:translateY(0);opacity:1}}

/* Sous-titre + filets qui s'étendent */
.pl-sub{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1rem;font-family:var(--font-sans);font-size:.7rem;letter-spacing:.45em;text-transform:uppercase;color:var(--blue-700);opacity:0;animation:plFade .9s ease 1.35s forwards}
.pl-sub .ln{width:38px;height:1px;background:linear-gradient(90deg,transparent,#7fb6e6);transform:scaleX(0);transform-origin:right;animation:plLine .8s cubic-bezier(.16,1,.3,1) 1.4s forwards}
.pl-sub .ln:last-child{transform-origin:left;background:linear-gradient(90deg,#7fb6e6,transparent)}
@keyframes plFade{to{opacity:1}}
@keyframes plLine{to{transform:scaleX(1)}}

/* ============================================================
   BARRE DE PROGRESSION AU SCROLL
============================================================ */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:65;
  background:linear-gradient(90deg,var(--blue-400),var(--blue-600) 60%,var(--gold));
  box-shadow:0 0 10px rgba(124,184,230,.55);transition:width .12s linear;border-radius:0 2px 2px 0}

/* ============================================================
   PARALLAXE HÉRO (léger) — home.js translate l'.orb au scroll
============================================================ */
.hero .orb{will-change:transform}

/* ============================================================
   RÉVÉLATION "CARTES EMPILÉES" (clin d'œil à « Empilé »)
   Les produits arrivent légèrement empilés/inclinés puis se posent.
============================================================ */
.reveal--stack{transform:translateY(72px) scale(.9) rotate(var(--rot,0deg));transform-origin:50% 100%}
.products .reveal--stack:nth-child(3n+1){--rot:-4deg}
.products .reveal--stack:nth-child(3n+2){--rot:0deg}
.products .reveal--stack:nth-child(3n){--rot:4deg}
.reveal--stack.in{transform:translateY(0) scale(1) rotate(0deg)}
/* Restaure le survol "lift" (la cascade .reveal.in l'écrasait) */
.products .product.in:hover{transform:translateY(-10px) scale(1.01)}

/* ============================================================
   prefers-reduced-motion : on neutralise tout le décoratif
============================================================ */
@media (prefers-reduced-motion: reduce){
  .preloader__panel,.pl-petals circle,.pl-core,.pl-word span,.pl-sub,.pl-sub .ln,.pl-flower{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .scroll-progress{transition:none!important}
  .reveal--stack{transform:none!important}
}

/* ============================================================
   MENU COMPTE (dropdown dans le header)
============================================================ */
.account{position:relative}
.account__btn{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .5rem .25rem .3rem;border-radius:var(--pill);transition:background .3s}
.account__btn:hover{background:rgba(124,184,230,.16)}
.account__avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue-400),var(--blue-600));color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1;box-shadow:var(--shadow-xs)}
.account__avatar.lg{width:46px;height:46px;font-size:1.4rem}
.account__caret{width:15px;height:15px;color:var(--ink-3);transition:transform .3s}
.account.open .account__caret{transform:rotate(180deg)}
.account__panel{position:absolute;top:calc(100% + 12px);right:0;width:252px;background:#fff;border:1px solid rgba(124,184,230,.22);border-radius:var(--r);box-shadow:var(--shadow);padding:.5rem;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out);z-index:61}
.account.open .account__panel{opacity:1;transform:none;pointer-events:auto}
.account__head{display:flex;align-items:center;gap:.7rem;padding:.5rem .55rem .8rem;border-bottom:1px solid rgba(124,184,230,.18);margin-bottom:.4rem}
.account__id{min-width:0}
.account__id b{font-family:var(--font-display);font-size:1.1rem;display:block;line-height:1.15}
.account__id small{color:var(--ink-3);font-size:.76rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.account__panel a{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:12px;font-size:.92rem;color:var(--ink-2);transition:background .2s,color .2s,padding-left .2s}
.account__panel a svg{width:18px;height:18px;color:var(--ink-3);transition:color .2s;flex:none}
.account__panel a:hover{background:var(--sky-50);color:var(--ink);padding-left:1rem}
.account__panel a:hover svg{color:var(--blue-600)}
.account__panel a.account__admin{color:var(--gold)}
.account__panel a.account__admin svg{color:var(--gold)}
.account__panel a.account__logout{color:#b0445f}
.account__panel a.account__logout:hover{background:#fdeef0}
.account__panel a.account__logout svg{color:#b0445f}
.account__sep{height:1px;background:rgba(124,184,230,.18);margin:.4rem .35rem}
.account__cta{color:var(--blue-700)!important;font-weight:600}

/* ============================================================
   CURSEUR PERSONNALISÉ (desktop, pointeur fin)
============================================================ */
html.has-cursor, html.has-cursor *{cursor:none!important}
/* on garde le curseur texte sur les champs de saisie */
html.has-cursor input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.has-cursor textarea{cursor:text!important}
.cursor-dot{position:fixed;top:0;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--blue-700);z-index:10000;pointer-events:none}
.cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid rgba(58,130,196,.55);z-index:10000;pointer-events:none;
  transition:width .25s var(--ease-out),height .25s var(--ease-out),margin .25s var(--ease-out),border-color .25s,background .25s}
html.cursor-hot .cursor-ring{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:var(--gold);background:rgba(201,169,106,.12)}
html.cursor-down .cursor-ring{width:26px;height:26px;margin:-13px 0 0 -13px;border-color:var(--blue-600)}

/* ============================================================
   MICRO-INTERACTIONS & FOCUS ACCESSIBLE
============================================================ */
.btn:active{transform:translateY(-1px) scale(.97)}
.btn--add:active{transform:scale(.93)}
.icon-btn:active{transform:scale(.88)}
.account__btn:active{transform:scale(.94)}
.thumb:active,.gphoto:active{transform:scale(.97)}
/* anneau de focus visible (accessibilité clavier) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blue-500);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion: reduce){
  .account__panel{transition:opacity .12s!important}
  .cursor-ring{transition:none!important}
  .btn:active,.btn--add:active,.icon-btn:active,.account__btn:active{transform:none!important}
}

/* ============================================================
   SECTION "SAVOIR-FAIRE" — cartes empilées au scroll (sticky)
   Pattern 21st.dev (stacking cards) adapté en vanilla.
   Le rétrécissement des cartes couvertes est piloté par home.js.
============================================================ */
.sf-stack{position:relative;max-width:920px;margin:0 auto}
.sf-card{position:sticky;top:calc(14vh + var(--i,0) * 22px);min-height:64vh;display:flex;justify-content:center;align-items:flex-start;z-index:calc(1 + var(--i,0))}
.sf-card__inner{
  width:100%;min-height:300px;display:flex;align-items:center;gap:clamp(1.4rem,4vw,3rem);
  background:linear-gradient(150deg,#fff,var(--sky-100));
  border:1px solid rgba(255,255,255,.85);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:clamp(1.8rem,5vw,3.4rem);
  transform-origin:top center;will-change:transform,opacity;position:relative;overflow:hidden
}
.sf-num{font-family:var(--font-display);font-weight:600;font-size:clamp(4rem,13vw,9rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--sky-300);flex:none;opacity:.85}
.sf-body{flex:1;min-width:0}
.sf-flower{width:42px;height:auto;color:var(--blue-400);margin-bottom:.7rem}
.sf-body h3{font-size:clamp(1.8rem,4vw,2.7rem);margin-bottom:.6rem}
.sf-body p{color:var(--ink-2);font-weight:300;font-size:1.06rem;max-width:44ch}
/* carte finale en bleu nuit (clin d'œil au logo) */
.sf-card__inner--dark{background:linear-gradient(150deg,#244a6f,#13273c);border-color:rgba(255,255,255,.12)}
.sf-card__inner--dark .sf-num{-webkit-text-stroke-color:var(--gold)}
.sf-card__inner--dark h3{color:#fff}
.sf-card__inner--dark p{color:rgba(255,255,255,.82)}
.sf-card__inner--dark .sf-flower{color:#cfe6fb}

@media(max-width:680px){
  .sf-card{top:calc(11vh + var(--i,0) * 16px);min-height:58vh}
  .sf-card__inner{flex-direction:column;text-align:center;gap:.6rem}
  .sf-num{font-size:3.6rem}
  .sf-body p{margin:0 auto}
}
/* motion réduite : pas d'empilement collant (évite la désorientation) */
@media (prefers-reduced-motion: reduce){
  .sf-card{position:static;min-height:auto;margin-bottom:1.4rem}
  .sf-card__inner{transform:none!important;opacity:1!important}
}

/* ============================================================
   SUIVI DE LIVRAISON ANIMÉ (atelier → camion → maison)
============================================================ */
.track-deliv{margin:.4rem 0 1rem}
.td-road{position:relative;height:46px;margin:0 8px 8px}
.td-road::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--sky-200) 0 9px,transparent 9px 17px);border-radius:2px}
.td-fill{position:absolute;left:0;top:50%;height:3px;transform:translateY(-50%);
  background:linear-gradient(90deg,var(--blue-400),var(--gold));border-radius:2px;transition:width 1.1s var(--ease-out)}
.td-icon{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:#fff;box-shadow:var(--shadow-xs);color:var(--blue-600);z-index:2}
.td-icon svg{width:17px;height:17px}
.td-start{left:-6px}
.td-end{right:-6px;color:var(--ink-3)}
.td-end.reached{color:#2f8a52;box-shadow:0 0 0 3px rgba(47,138,82,.2)}
.td-truck{position:absolute;top:50%;left:8%;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;box-shadow:var(--shadow-sm);z-index:3;
  transition:left 1.1s var(--ease-out);animation:truckBob 1.6s ease-in-out infinite}
.td-truck svg{width:18px;height:18px}
@keyframes truckBob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-64%)}}
.td-truck.arrived{animation:none;transform:translate(-50%,-50%);background:linear-gradient(135deg,#3fae74,#2f8a52)}
.td-steps{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-3);letter-spacing:.01em}
.td-step{flex:1;text-align:center}
.td-step.done{color:var(--blue-600)}
.td-step.current{color:var(--blue-700);font-weight:700}
.td-cancelled{background:#fdeef0;color:#b0445f;border-radius:var(--r-sm);padding:.7rem 1rem;font-size:.88rem;font-weight:500;text-align:center;margin:.4rem 0 1rem}
.track-line{font-size:.86rem;color:var(--ink-2);margin:.1rem 0 .7rem}
.track-line a{color:var(--blue-600);font-weight:500}
@media (prefers-reduced-motion: reduce){
  .td-truck{animation:none!important;transition:none!important}
  .td-fill{transition:none!important}
}

/* ============================================================
   CONNEXION GOOGLE (bouton + séparateur « ou »)
============================================================ */
.google-btn-wrap{display:flex;justify-content:center}
.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;width:100%;
  background:#fff;border:1.5px solid var(--sky-200);border-radius:var(--pill);
  padding:.8em 1.4em;font-family:var(--font-sans);font-weight:500;font-size:.95rem;color:var(--ink);
  cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .25s}
.btn-google:hover{border-color:var(--blue-400);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.btn-google:active{transform:scale(.98)}
.btn-google svg{flex:none}
.auth-divider{display:flex;align-items:center;gap:.8rem;color:var(--ink-3);font-size:.8rem;letter-spacing:.05em;margin:1.2rem 0;text-transform:uppercase}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:rgba(124,184,230,.3)}

/* ============================================================
   PAGE CATALOGUE (tous les produits)
============================================================ */
.cat-toolbar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-bottom:1.2rem}
.cat-search{position:relative;flex:1;min-width:240px;max-width:460px}
.cat-search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.cat-search input{width:100%;padding:.8em 1em .8em 2.8em;border-radius:var(--pill);border:1.5px solid var(--sky-200);background:#fff;font-family:inherit;font-size:.95rem;color:var(--ink);transition:border-color .3s,box-shadow .3s}
.cat-search input:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(124,184,230,.2)}
.cat-sortwrap{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.cat-sortlabel{font-size:.85rem;color:var(--ink-2)}
.cat-sort{font-family:inherit;font-size:.9rem;color:var(--ink);padding:.7em 2.2em .7em 1em;border:1.5px solid var(--sky-200);border-radius:var(--pill);background:#fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d7791' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9em center;
  -webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .3s}
.cat-sort:focus{outline:none;border-color:var(--blue-400)}

.cat-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.cat-chip{font-family:inherit;font-size:.86rem;color:var(--ink-2);padding:.5em 1.1em;border-radius:var(--pill);border:1.5px solid var(--sky-200);background:#fff;cursor:pointer;transition:.25s}
.cat-chip:hover{border-color:var(--blue-400);color:var(--ink)}
.cat-chip.is-active{background:var(--blue-600);border-color:var(--blue-600);color:#fff;box-shadow:0 8px 18px -10px rgba(44,106,166,.7)}

.cat-count{font-size:.85rem;color:var(--ink-3);margin:0 0 1.4rem}

.cat-group{margin-bottom:2.6rem}
.cat-group__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(124,184,230,.25);padding-bottom:.6rem;margin-bottom:1.4rem}
.cat-group__head h2{font-size:clamp(1.7rem,3.5vw,2.4rem)}
.cat-group__head span{font-size:.82rem;color:var(--ink-3);white-space:nowrap}
.cat-sub{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--gold);margin:1.2rem 0 1rem}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(1rem,2.2vw,1.6rem)}

.cat-card{background:linear-gradient(180deg,#fff,var(--surface-2));border:1px solid rgba(255,255,255,.8);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.cat-card__link{display:flex;flex-direction:column;flex:1;color:inherit}
.cat-card__media{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--sky-100),var(--lav))}
.cat-card__media .media{aspect-ratio:1/1}
.cat-card__media .media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.cat-card:hover .cat-card__media .media img{transform:scale(1.06)}
.product__tag.out-tag{background:#fdeef0;color:#b0445f;top:auto;bottom:.7rem;left:.7rem;right:auto}
.cat-card__info{padding:1rem 1rem .3rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.cat-card__info .product__flower{font-size:.92rem}
.cat-card__name{font-size:1.3rem;line-height:1.15;margin:.05rem 0 .2rem}
.cat-card__info .product__rating{margin:.1rem 0 .4rem}
.cat-card__info .stock-badge{align-self:flex-start;margin-bottom:.5rem}
.cat-card__info .product__price{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin-top:auto}
.cat-card__add{margin:.4rem .8rem .9rem;justify-content:center;background:var(--ink);color:#fff;border-radius:var(--pill)}
.cat-card__add:hover{background:var(--blue-600)}
.cat-card__add[disabled]{opacity:.5;cursor:not-allowed}

/* Bouton « Voir tous les produits » sous la collection (accueil) */
.see-all{display:flex;justify-content:center;margin-top:2.4rem}

@media(max-width:560px){
  .cat-toolbar{flex-direction:column;align-items:stretch}
  .cat-search{max-width:none}
  .cat-sortwrap{justify-content:space-between}
}

/* ============================================================
   AVIS (étoiles) + MODALE + section avis fiche produit
============================================================ */
.stars-static{color:var(--gold);letter-spacing:1px}
.star-input{display:inline-flex;gap:.1rem}
.star-btn{font-size:2rem;line-height:1;color:#c6d6e8;background:none;padding:.12em .1em;cursor:pointer;transition:color .15s,transform .15s}
.star-btn.on{color:var(--gold)}
.star-btn:hover{transform:scale(1.18);color:var(--gold-soft)}

.az-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem;opacity:0;pointer-events:none;transition:opacity .3s}
.az-modal.open{opacity:1;pointer-events:auto}
.az-modal__overlay{position:absolute;inset:0;background:rgba(20,42,68,.5);backdrop-filter:blur(6px)}
.az-modal__box{position:relative;z-index:2;background:linear-gradient(180deg,#fff,var(--surface-2));border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:min(460px,100%);max-height:90vh;overflow:auto;padding:clamp(1.6rem,4vw,2.4rem);transform:scale(.95) translateY(10px);transition:transform .35s var(--ease-out);text-align:center}
.az-modal.open .az-modal__box{transform:none}
.az-modal__close{position:absolute;top:.8rem;right:.8rem;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(124,184,230,.14);transition:.25s}
.az-modal__close:hover{background:var(--blue-600);color:#fff}
.az-modal__close svg{width:18px;height:18px}
.az-modal h3{font-size:1.6rem;margin-bottom:.4rem}
.az-modal .star-input{justify-content:center;margin:.6rem 0 1rem}
.az-modal textarea{width:100%;min-height:80px;border:1.5px solid var(--sky-200);border-radius:var(--r-sm);padding:.7em .9em;font-family:inherit;font-size:.95rem;resize:vertical;margin-bottom:1rem}
.az-modal textarea:focus{outline:none;border-color:var(--blue-400)}
.modal-thumb{width:88px;height:88px;border-radius:16px;object-fit:cover;margin:0 auto .6rem;display:block;box-shadow:var(--shadow-sm)}

.reviews{margin-top:3rem;border-top:1px solid rgba(124,184,230,.22);padding-top:2rem}
.reviews h2{font-size:1.9rem;margin-bottom:.3rem}
.reviews__avg{display:flex;align-items:center;gap:.6rem;color:var(--ink-2);font-size:.95rem;margin-bottom:1.6rem}
.reviews__avg .stars-static{font-size:1.35rem}
.reviews__big{font-family:var(--font-display);font-size:2.1rem;font-weight:600;color:var(--ink);line-height:1}
.reviews h2 .reviews__pill{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 .45rem;border-radius:999px;background:var(--blue-600);color:#fff;font-family:var(--font-sans);font-size:.8rem;vertical-align:middle;margin-left:.4rem}
.pdp-rating{cursor:pointer;transition:color .2s}
.pdp-rating:hover{color:var(--blue-600)}
.review-form{background:linear-gradient(180deg,#fff,var(--surface-2));border:1px solid rgba(124,184,230,.25);border-radius:var(--r);padding:1.4rem 1.5rem;margin-bottom:1.8rem;box-shadow:var(--shadow-sm)}
.review-form h3{font-size:1.35rem;margin-bottom:.15rem}
.review-form .form-note{text-align:left;margin:0;color:var(--ink-2)}
.review-form .star-input{display:flex;margin:.6rem 0 .9rem}
.review-form textarea{display:block;width:100%;min-height:96px;border:1.5px solid var(--sky-200);border-radius:var(--r-sm);padding:.8em 1em;font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff;resize:vertical;margin-bottom:1rem}
.review-form textarea:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(124,184,230,.2)}
.review-form .btn{width:auto}
.review-note{color:var(--ink-2);font-size:.92rem;background:var(--surface-2);border:1px dashed rgba(124,184,230,.45);border-radius:var(--r-sm);padding:.9rem 1.1rem;margin-bottom:1.6rem}
.review-card{background:#fff;border:1px solid rgba(124,184,230,.2);border-radius:var(--r);padding:1.1rem 1.3rem;margin-bottom:.9rem;box-shadow:var(--shadow-xs)}
.review-card__head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.review-card__head b{font-family:var(--font-display);font-size:1.18rem;color:var(--ink)}
.review-card__head .stars-static{font-size:1.05rem}
.review-card__date{color:var(--ink-3);font-size:.82rem;margin-left:auto}
.review-card p{color:var(--ink);font-weight:400;margin-top:.5rem;line-height:1.55}

/* ============================================================
   COUPON (checkout) + PARAMÈTRES COMPTE
============================================================ */
.coupon-row{display:flex;gap:.5rem;margin:.2rem 0 1rem}
.coupon-row input{flex:1;padding:.7em 1em;border-radius:var(--r-sm);border:1.5px solid var(--sky-200);background:#fff;font-family:inherit;font-size:.92rem;text-transform:uppercase}
.coupon-row input:focus{outline:none;border-color:var(--blue-400)}
.coupon-row .btn{padding:.6em 1.1em}
.coupon-applied{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:#e6f6ec;color:#2f8a52;border:1px solid #b8e3c8;border-radius:var(--r-sm);padding:.6rem .9rem;font-size:.9rem;margin:.2rem 0 1rem}
.coupon-applied button{color:#2f8a52;text-decoration:underline;font-size:.82rem}
.summary-line.discount{color:#2f8a52}

.account-tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem;justify-content:center}

/* ============================================================
   TABLEAU DE BORD ADMIN (KPIs + graphiques + à préparer)
============================================================ */
.dash{margin-bottom:1rem}
.dash__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.dash__periods{display:inline-flex;gap:.25rem;background:#fff;border:1px solid var(--sky-200);border-radius:var(--pill);padding:.25rem}
.dash__periods button{font-family:inherit;font-size:.84rem;color:var(--ink-2);padding:.45em .95em;border-radius:var(--pill);transition:background .2s,color .2s}
.dash__periods button:hover{color:var(--ink)}
.dash__periods button.is-active{background:var(--blue-600);color:#fff;box-shadow:0 6px 14px -8px rgba(44,106,166,.7)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.4rem}
.kpi{background:linear-gradient(180deg,#fff,var(--surface-2));border:1px solid rgba(255,255,255,.8);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:1.1rem 1.3rem}
.kpi__label{display:block;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
.kpi__val{font-family:var(--font-display);font-size:1.9rem;font-weight:600;color:var(--ink);line-height:1}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.chart-card{background:#fff;border:1px solid rgba(124,184,230,.18);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:1.2rem 1.3rem}
.chart-card h3{font-size:1.02rem;font-family:var(--font-sans);font-weight:600;color:var(--ink-2);margin-bottom:.6rem}
.chart-card canvas{width:100%!important;height:240px!important}
.prep-pill{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 .45rem;border-radius:999px;background:var(--gold);color:#fff;font-family:var(--font-sans);font-size:.82rem;vertical-align:middle;margin-left:.3rem}
.prep-card{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;background:#fff;border:1px solid rgba(124,184,230,.18);border-left:3px solid var(--gold);border-radius:var(--r-sm);padding:.8rem 1.1rem;margin-bottom:.6rem}
.prep-card__items{color:var(--ink-3);font-size:.88rem;margin-top:.2rem}
@media(max-width:760px){.charts{grid-template-columns:1fr}}

/* ============================================================
   NEXT-GEN ✦ glow curseur + tilt 3D + skeletons + verre dépoli
============================================================ */
/* Glow qui suit le curseur (cartes catalogue, produits, commandes) */
.cat-card::after,.product::after,.order-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;
  transition:opacity .35s var(--ease-out);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 55%);
  mix-blend-mode:soft-light}
.cat-card:hover::after,.product:hover::after,.order-card:hover::after{opacity:1}

/* Tilt 3D fluide (catalogue) — piloté par --rx/--ry (common.js) */
.cat-card{--sc:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc));
  transition:transform .22s var(--ease-out),box-shadow .45s var(--ease-out)}
.cat-card:hover{--sc:1.02}

/* Carte commande : effet verre + liseré dégradé animé en haut */
.order-card{position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.92),var(--surface-2));
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.order-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;z-index:5;
  background:linear-gradient(90deg,var(--blue-400),var(--gold),var(--blue-400));background-size:200% 100%;animation:slideGrad 6s linear infinite}
.order-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
@keyframes slideGrad{to{background-position:200% 0}}

/* Skeletons (shimmer) pendant le chargement */
.skeleton{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,var(--surface-2));border:1px solid rgba(124,184,230,.18);border-radius:var(--r)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.7) 50%,transparent 80%);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.sk-card{height:360px}
.sk-order{height:172px;margin-bottom:.9rem}

/* Barre d'outils catalogue : verre dépoli collant sous le header */
.cat-sticky{position:sticky;top:64px;z-index:40;background:rgba(240,248,255,.72);
  backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(124,184,230,.28);border-radius:var(--r);padding:1.5rem 1.3rem 1.25rem;margin-bottom:1.8rem;
  box-shadow:0 12px 30px -22px rgba(40,90,150,.5);
  transition:transform .4s var(--ease,ease),box-shadow .4s var(--ease,ease)}
/* se masque au scroll vers le bas / réapparaît au scroll vers le haut (JS catalogue.js) */
.cat-sticky.is-hidden{transform:translateY(-135%)}
.cat-sticky .cat-toolbar{margin-bottom:.9rem}
.cat-sticky .cat-chips{margin-bottom:.3rem}
.cat-sticky .cat-count{margin:.2rem 0 0}

/* ---------- Catalogue sur MOBILE : barre compacte, chips défilables, auto-masquage ---------- */
@media(max-width:760px){
  /* (D) onglets de catégorie défilables horizontalement (glisser gauche↔droite) */
  .cat-chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;
    padding:.1rem .2rem .3rem;margin-left:-.2rem}
  .cat-chips::-webkit-scrollbar{display:none}
  .cat-chip{flex:none;scroll-snap-align:start}

  /* (E) barre plus COMPACTE sur mobile (l'auto-masquage .is-hidden est géré en JS) */
  .cat-sticky{padding:.6rem .7rem .5rem;border-radius:14px;margin-bottom:1.1rem}
  .cat-sticky .cat-toolbar{margin-bottom:.5rem}
  .cat-search input{padding:.58em 1em .58em 2.6em;font-size:.9rem}
  .cat-count{font-size:.76rem}
  .cat-sticky.is-hidden{transform:translateY(-160%)}
}

@media (prefers-reduced-motion: reduce){
  .cat-card{transform:none!important}
  .cat-card::after,.product::after,.order-card::after{display:none}
  .order-card::before,.skeleton::after{animation:none!important}
}

/* ============================================================
   HÉROS « SHADER » WebGL (dégradé pastel animé) + parallaxe scroll
============================================================ */
.shader-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);isolation:isolate;
  min-height:clamp(220px,34vh,360px);display:grid;place-items:center;text-align:center;margin-bottom:2.2rem;
  background:linear-gradient(135deg,#eaf4fd,#dcecfb 50%,#e7e3f8)} /* fond de secours si pas de WebGL */
.shader-hero--sm{min-height:clamp(170px,24vh,250px)}
.shader-hero .shader-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;will-change:transform}
.shader-hero__veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(130% 115% at 50% 0%, rgba(255,255,255,.18), rgba(255,255,255,.55) 80%)}
.shader-hero__content{padding:2rem 1.5rem;position:relative;will-change:transform,opacity}
.shader-hero__content h1{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:.4rem;text-shadow:0 1px 14px rgba(255,255,255,.55)}
.shader-hero__content p{color:var(--ink-2)}
.shader-hero__content .eyebrow{color:var(--blue-700)}
@media (prefers-reduced-motion: reduce){
  .shader-hero__content{transform:none!important;opacity:1!important}
  .shader-hero .shader-bg{transform:none!important}
}

/* ============================================================
   SELECT PERSONNALISÉ (.csel) — remplace la liste native
============================================================ */
.csel{position:relative;display:inline-block}
.csel select{display:none}
.csel__btn{display:inline-flex;align-items:center;gap:.6rem;font-family:inherit;font-size:.9rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--sky-200);border-radius:var(--pill);padding:.6em 1.05em;cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.csel__btn:hover{border-color:var(--blue-400)}
.csel__btn:active{transform:scale(.98)}
.csel.open .csel__btn{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(124,184,230,.2)}
.csel__chev{width:15px;height:15px;color:var(--ink-3);transition:transform .25s var(--ease-out),color .2s}
.csel.open .csel__chev{transform:rotate(180deg);color:var(--blue-600)}
.csel__list{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;list-style:none;margin:0;padding:.4rem;z-index:60;
  background:#fff;border:1px solid rgba(124,184,230,.25);border-radius:var(--r);box-shadow:var(--shadow);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.csel.open .csel__list{opacity:1;transform:none;pointer-events:auto}
.csel__opt{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:11px;font-size:.9rem;color:var(--ink-2);cursor:pointer;
  transition:background .15s,color .15s,padding-left .15s}
.csel__opt:hover{background:var(--sky-50);color:var(--ink);padding-left:1rem}
.csel__opt.is-active{color:var(--blue-700);font-weight:600;background:rgba(124,184,230,.14)}
.csel__opt.is-active::after{content:"✓";margin-left:auto;color:var(--blue-600);font-weight:700}

/* ============================================================
   CARTE DES VISITEURS (admin) — globe 3D + KPIs + historique
   Centre premium "data-globe" : panneau sombre bleu nuit + or,
   verre dépoli pour les côtés, conforme à la marque Esmelys.
============================================================ */
.geo{margin:2.6rem 0}
.geo__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.geo__head h2{font-size:1.7rem;margin:.15rem 0 .15rem}
.geo__head p{color:var(--ink-2);font-weight:300;font-size:.96rem}
.geo__eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-600)}
.geo__eyebrow svg{width:15px;height:15px;color:var(--blue-500)}

/* --- KPIs --- */
.geo__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.3rem}
.geo-kpi{display:flex;align-items:center;gap:.85rem;background:linear-gradient(180deg,#fff,var(--surface-2));
  border:1px solid rgba(124,184,230,.22);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--shadow-xs)}
.geo-kpi__ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sky-100),var(--sky-200));color:var(--blue-700)}
.geo-kpi__ic svg{width:21px;height:21px}
.geo-kpi__val{font-family:var(--font-display);font-weight:600;font-size:1.7rem;line-height:1;display:block;font-variant-numeric:tabular-nums;color:var(--ink)}
.geo-kpi small{font-size:.78rem;color:var(--ink-3);letter-spacing:.02em}
.geo-kpi--live .geo-kpi__ic{background:linear-gradient(135deg,var(--sky-100),var(--sky-300))}
.geo-pulse{position:relative;width:12px;height:12px;border-radius:50%;background:var(--blue-500)}
.geo-pulse::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--blue-500);opacity:.7;animation:geoPing 1.8s var(--ease-out) infinite}
@keyframes geoPing{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.5);opacity:0}}

/* --- Grille globe + panneau latéral --- */
.geo__grid{display:grid;grid-template-columns:1.55fr 1fr;gap:1.2rem;align-items:stretch}

/* Panneau globe (sombre) */
.geo-globe{position:relative;min-height:clamp(360px,52vh,560px);border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(130% 110% at 50% 6%,#ffffff 0,#e3f1fc 42%,#cde6fa 100%);
  border:1px solid rgba(127,182,230,.35);box-shadow:var(--shadow-lg),inset 0 0 60px rgba(127,182,230,.18)}
.geo-globe canvas{display:block;outline:none}
/* canvas cobe : carré, centré dans le panneau, fondu d'apparition */
.geo-cobe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  opacity:0;transition:opacity 1.1s ease;touch-action:none;contain:layout paint}
.geo-globe__hint{position:absolute;left:0;right:0;bottom:.7rem;text-align:center;font-size:.72rem;letter-spacing:.04em;
  color:rgba(44,106,166,.72);pointer-events:none;z-index:2}
.geo-globe__loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  color:var(--blue-700);font-size:.9rem;z-index:3}
.geo-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(84,153,214,.22);border-top-color:var(--blue-500);animation:geoSpin .9s linear infinite}
@keyframes geoSpin{to{transform:rotate(360deg)}}

/* Tooltip du globe (globe.gl injecte .scene-tooltip dans le conteneur) */
.geo-globe .scene-tooltip{font-family:var(--font-sans)!important}
.globe-tip{background:rgba(255,255,255,.96);border:1px solid rgba(127,182,230,.5);color:var(--ink);
  padding:.4rem .65rem;border-radius:10px;font-size:.8rem;line-height:1.35;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.globe-tip b{font-family:var(--font-display);font-size:.95rem;color:var(--blue-700)}

/* Panneau latéral : dernières visites (verre) */
.geo-side{display:flex;flex-direction:column;background:rgba(255,255,255,.62);backdrop-filter:blur(12px);
  border:1px solid rgba(124,184,230,.22);border-radius:var(--r-lg);padding:1.1rem 1.1rem .5rem;box-shadow:var(--shadow-sm);min-width:0}
.geo-side h3{font-size:1.15rem;margin-bottom:.7rem}
.geo-list{display:flex;flex-direction:column;gap:.15rem;overflow:auto;max-height:clamp(300px,46vh,520px);padding-right:.2rem}
.geo-list::-webkit-scrollbar{width:7px}
.geo-list::-webkit-scrollbar-thumb{background:rgba(124,184,230,.4);border-radius:99px}
.geo-item{display:flex;align-items:center;gap:.7rem;padding:.55rem .35rem;border-bottom:1px solid rgba(124,184,230,.14)}
.geo-item:last-child{border-bottom:none}
.geo-item__cc{flex:none;width:34px;height:26px;border-radius:6px;display:grid;place-items:center;
  font-size:.68rem;font-weight:700;letter-spacing:.02em;color:var(--blue-700);
  background:linear-gradient(135deg,var(--sky-100),var(--sky-200));border:1px solid rgba(124,184,230,.3)}
.geo-item__body{flex:1;min-width:0}
.geo-item__body b{font-size:.9rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-item__body small{font-size:.74rem;color:var(--ink-3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-item time{flex:none;font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.geo-empty{color:var(--ink-2);text-align:center;padding:2rem 1rem;font-size:.9rem}

/* Tableau détaillé (repliable) */
.geo-details{margin-top:1.2rem}
.geo-details>summary{cursor:pointer;font-weight:600;color:var(--blue-700);padding:.5rem 0;list-style:none;display:inline-flex;align-items:center;gap:.4rem}
.geo-details>summary::-webkit-details-marker{display:none}
.geo-details>summary::before{content:"▸";transition:transform .25s var(--ease-out);display:inline-block}
.geo-details[open]>summary::before{transform:rotate(90deg)}
.geo-ip{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;color:var(--ink-2);background:var(--sky-50);padding:.1rem .4rem;border-radius:6px}

@media(max-width:880px){
  .geo__grid{grid-template-columns:1fr}
  .geo__kpis{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .geo-pulse::before,.geo-spinner{animation:none!important}
}

/* ============================================================
   GALERIE MORPHANTE (accueil) — anneau de photos → éventail au scroll
   Adapté (en vanilla) du composant React "scroll-morph-hero".
============================================================ */
.morph-section{position:relative;height:175vh;max-width:none;margin:0;padding:0}
.morph-stage{position:sticky;top:0;height:100vh;min-height:560px;overflow:visible;
  display:flex;flex-direction:column;align-items:center;perspective:1300px}
.morph-head{position:relative;z-index:45;text-align:center;max-width:720px;margin:0 auto;
  padding:clamp(2.2rem,5vh,3.8rem) var(--gut) 0;pointer-events:none}
/* texte narratif : phrases placées à des endroits différents, décomposées
   en LETTRES qui se dispersent puis se réassemblent au scroll (JS). */
.morph-text{position:absolute;inset:0;z-index:40;pointer-events:none}
.morph-phrase{position:absolute;margin:0;text-align:center;transform:translate(-50%,0);
  font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,3.3vw,2.5rem);line-height:1.12;
  color:var(--ink);white-space:nowrap}
.morph-letter{display:inline-block;white-space:pre;will-change:transform,opacity,filter}
.grad{background:linear-gradient(105deg,var(--blue-500),var(--blue-700) 60%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.morph-ring{position:absolute;inset:0;z-index:8}
.morph-hint{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:45;pointer-events:none;
  font-family:var(--font-sans);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--blue-600);opacity:.7;
  animation:morphHint 1.8s ease-in-out infinite}
@keyframes morphHint{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

.morph-card{position:absolute;left:50%;top:50%;width:clamp(66px,8.5vw,104px);aspect-ratio:3/4;margin:0;
  transform-style:preserve-3d;will-change:transform,opacity;cursor:pointer;opacity:0}
.morph-card__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--ease-out)}
.morph-card:hover .morph-card__inner{transform:rotateY(180deg)}
.morph-face{position:absolute;inset:0;border-radius:14px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:var(--shadow)}
.morph-face--front{background:linear-gradient(135deg,var(--sky-100),var(--lav))}
/* la .media a un aspect-ratio:1/1 hérité → on le neutralise pour qu'elle
   REMPLISSE toute la carte (sinon bande claire en bas de chaque photo). */
.morph-face--front .media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important}
.morph-face--front .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.morph-face--back{transform:rotateY(180deg);display:grid;place-items:center;text-align:center;
  background:linear-gradient(150deg,var(--blue-500),var(--blue-700));color:#fff;border:1px solid rgba(255,255,255,.2)}
.morph-face--back span{display:block;font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;color:#cfe7fb;margin-bottom:.25rem}
.morph-face--back b{font-family:var(--font-display);font-size:1.05rem}

@media(max-width:760px){
  .morph-section{height:150vh}
  .morph-stage{min-height:520px}
}
@media (prefers-reduced-motion: reduce){
  .morph-hint{animation:none}
  .morph-card__inner{transition:none}
}

/* ============================================================
   WISHLIST / FAVORIS — cœur sur les cartes produit + en-tête
============================================================ */
.wish-btn{position:absolute;top:.6rem;right:.6rem;z-index:5;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);
  border:1px solid rgba(124,184,230,.25);box-shadow:var(--shadow-xs);cursor:pointer;
  transition:transform .25s var(--ease-out),background .25s}
.wish-btn svg{width:19px;height:19px;fill:none;stroke:var(--blue-600);stroke-width:1.8;transition:fill .2s,stroke .2s}
.wish-btn:hover{transform:scale(1.12);background:#fff}
.wish-btn.is-on svg{fill:#e3789a;stroke:#e3789a;animation:wishPop .4s var(--ease-out)}
@keyframes wishPop{0%{transform:scale(.6)}55%{transform:scale(1.28)}100%{transform:scale(1)}}
.wish-btn--lg{position:static;width:50px;height:50px;flex:none}
.wish-btn--lg svg{width:23px;height:23px}
/* cœur dans l'en-tête + compteur */
.wish-head{position:relative}
.wish-count{position:absolute;top:1px;right:-1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#e3789a;color:#fff;font-size:.62rem;font-weight:600;display:grid;place-items:center;
  transform:scale(0);transition:transform .3s var(--ease-out)}
.wish-count.show{transform:scale(1)}

/* ============================================================
   FICHE PRODUIT — réassurance (sous le bouton) + ventes croisées
============================================================ */
.pdp-trust{list-style:none;margin:1.4rem 0 0;padding:1.2rem 0 0;border-top:1px solid rgba(124,184,230,.2);
  display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1.2rem}
.pdp-trust li{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--ink-2)}
.pdp-trust li b{color:var(--ink);font-weight:600}
.pdp-trust svg{width:24px;height:24px;flex:none;color:var(--blue-500)}

.cross-sell{max-width:var(--maxw);margin:3.5rem auto 0;padding:2.5rem var(--gut) 0;border-top:1px solid rgba(124,184,230,.18)}
.cross-sell .sec-head{margin-bottom:1.8rem}
.xs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.xs-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,var(--surface-2));
  border:1px solid rgba(255,255,255,.8);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  color:var(--ink);transition:transform .35s var(--ease-out),box-shadow .35s}
.xs-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.xs-card__media{aspect-ratio:1/1;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--sky-100),var(--lav))}
.xs-card__media .media{position:absolute;inset:0}
.xs-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.xs-card:hover .xs-card__media img{transform:scale(1.07)}
.xs-card__body{padding:.9rem 1rem 1.1rem;text-align:center}
.xs-flower{font-size:.72rem;letter-spacing:.04em;color:var(--blue-600);text-transform:uppercase}
.xs-card__body h3{font-size:1.18rem;margin:.2rem 0 .4rem}
.xs-price{font-family:var(--font-display);font-weight:600;font-size:1.25rem}

@media(max-width:760px){
  .xs-grid{grid-template-columns:1fr 1fr;gap:.9rem}
  .pdp-trust{grid-template-columns:1fr}
}

/* ============================================================
   VAGUE 2 — option cadeau (checkout) + urgence (fiche) + tag admin
============================================================ */
.gift-field{border:1.5px solid var(--sky-200);border-radius:var(--r-sm);padding:.9rem 1rem;background:linear-gradient(180deg,#fff,var(--surface-2))}
.gift-toggle{display:flex;align-items:center;gap:.8rem;cursor:pointer;margin:0}
.gift-toggle input{width:auto;margin:0;accent-color:var(--blue-600)}
.gift-toggle__box{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--sky-100),var(--lav));color:var(--blue-700)}
.gift-toggle__box svg{width:21px;height:21px}
.gift-toggle__txt b{display:block;font-size:.95rem}
.gift-toggle__txt small{color:var(--ink-3);font-size:.8rem}
.gift-msg{margin-top:.7rem}
.gift-msg textarea{width:100%;min-height:64px;padding:.7em .9em;border:1.5px solid var(--sky-200);border-radius:var(--r-sm);font-family:inherit;font-size:.92rem;resize:vertical}
.gift-msg textarea:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(124,184,230,.2)}

.pdp-urgency{display:flex;align-items:center;gap:.45rem;margin:.8rem 0 0;font-size:.9rem;color:#b9772b;font-weight:500}
.pdp-urgency svg{width:18px;height:18px;flex:none}
.pdp-countdown{display:inline-flex;gap:.4rem;align-items:center;margin:1rem 0 0;padding:.55rem .9rem;border-radius:var(--pill);
  background:linear-gradient(135deg,#fef3e2,#fde7c9);color:#a85d12;font-size:.86rem;font-weight:500}
.pdp-countdown svg{width:16px;height:16px}
.pdp-countdown b{font-variant-numeric:tabular-nums;font-weight:700}

.gift-tag{display:inline-block;font-size:.68rem;font-weight:600;padding:.12rem .5rem;border-radius:var(--pill);background:#efeafb;color:#6a4fb0;margin-left:.35rem}
.gift-note-admin{font-size:.82rem;color:#6a4fb0;font-style:italic;margin-top:.3rem}

/* ===== Parrainage (espace compte) ===== */
.referral-card{margin:0 0 2rem;padding:1.5rem 1.6rem;border-radius:20px;border:1.5px solid var(--sky-300,#cfe5f8);background:linear-gradient(135deg,rgba(234,244,255,.9),rgba(255,255,255,.85));box-shadow:0 18px 40px -26px rgba(44,106,166,.5);backdrop-filter:blur(6px)}
.referral-card__head{display:flex;align-items:flex-start;gap:1rem}
.referral-card__head svg{flex:none;width:34px;height:34px;color:#e3789a;margin-top:.15rem}
.referral-card__head h3{font-size:1.45rem;color:var(--blue-700);margin:0 0 .25rem}
.referral-card__head p{font-size:.95rem;color:var(--ink-2);margin:0;line-height:1.5}
.referral-card__head p b{color:var(--blue-600)}
.referral-card__link{display:flex;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}
.referral-card__link input{flex:1;min-width:220px;padding:.7rem .9rem;border-radius:12px;border:1.5px solid var(--sky-300,#cfe5f8);background:#fff;color:var(--ink-2);font-size:.88rem;font-family:inherit}
.referral-card__link input:focus{outline:none;border-color:var(--blue-400)}
.referral-card__link .btn{flex:none;white-space:nowrap}
.referral-card__share{margin-top:.7rem;background:none;border:none;color:var(--blue-600);font-size:.85rem;font-family:inherit;cursor:pointer;text-decoration:underline;padding:.2rem 0}
@media(max-width:540px){.referral-card__link .btn{width:100%}}

/* ===================== MESSAGERIE ADMIN (webmail) ===================== */
/* Onglets admin */
.admin-tabs-nav{display:flex;gap:1.4rem;align-items:center}
.admin-tabs-nav a{position:relative}
.admin-tabs-nav a.is-active{color:var(--blue-700);font-weight:500}
.admin-tabs-nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--blue-400),var(--blue-600));border-radius:2px}
.mail-nav-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:.25rem;border-radius:9px;background:#e3789a;color:#fff;font-size:.66rem;font-weight:600;vertical-align:middle}

/* Pastille d'état */
.mail-pill{display:inline-block;margin-left:.5rem;padding:.2rem .65rem;border-radius:999px;font-size:.72rem;font-weight:500;letter-spacing:.02em;vertical-align:middle}
.mail-pill--demo{background:#fdf0d8;color:#a85d12}
.mail-pill--ok{background:#dcf2e4;color:#1f7a4d}
.mail-pill--err{background:#fbe0e0;color:#b23a3a}

/* Bandeau démo + aide */
.mail-banner{display:flex;gap:.8rem;align-items:flex-start;margin:0 0 1.2rem;padding:1rem 1.2rem;border-radius:16px;background:linear-gradient(135deg,#fdf4e3,#fffdf8);border:1.5px solid #f0d9a8;color:#7a5a1e;font-size:.92rem;line-height:1.5}
.mail-banner svg{flex:none;width:24px;height:24px;color:#c8941f;margin-top:1px}
.mail-banner a{color:var(--blue-700);text-decoration:underline;white-space:nowrap}
.mail-help{margin:0 0 1.4rem;padding:1.2rem 1.4rem;border-radius:16px;background:rgba(255,255,255,.7);border:1.5px solid var(--sky-300,#cfe5f8)}
.mail-help h3{font-size:1.25rem;color:var(--blue-700);margin:0 0 .6rem}
.mail-help ol{margin:0 0 .8rem 1.1rem;color:var(--ink-2);font-size:.92rem;line-height:1.6}
.mail-help code{background:#eef4fb;padding:.05em .4em;border-radius:5px;font-size:.86em}
.mail-help pre{background:#0f2438;color:#cfe3f7;padding:1rem 1.1rem;border-radius:12px;overflow:auto;font-size:.82rem;line-height:1.55;margin:.4rem 0 .8rem}
.mail-help p{color:var(--ink-2);font-size:.9rem;margin:0}

/* Layout deux volets */
.mail{display:grid;grid-template-columns:350px 1fr;gap:1.2rem;align-items:start}
@media(max-width:860px){.mail{grid-template-columns:1fr}}
.mail__list{background:rgba(255,255,255,.72);border:1.5px solid var(--sky-300,#cfe5f8);border-radius:18px;overflow:hidden;backdrop-filter:blur(6px)}
.mail__list-head{display:flex;gap:.6rem;align-items:center;justify-content:space-between;padding:.8rem .9rem;border-bottom:1px solid var(--sky-300,#cfe5f8)}
.mail__list-head .btn{flex:1}
#mailItems{max-height:64vh;overflow:auto}
.mail-empty{padding:1.6rem;color:var(--ink-2);text-align:center;font-size:.92rem}
.mail-empty--err{color:#b23a3a}

.mail-item{display:flex;gap:.6rem;width:100%;text-align:left;border:none;background:none;padding:.8rem .9rem;border-bottom:1px solid rgba(127,182,230,.18);cursor:pointer;transition:background .2s}
.mail-item:hover{background:rgba(127,182,230,.1)}
.mail-item.is-active{background:rgba(127,182,230,.18)}
.mail-item__dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:.45rem;background:transparent}
.mail-item.is-unread .mail-item__dot{background:var(--blue-500)}
.mail-item__main{flex:1;min-width:0}
.mail-item__top{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.mail-item__from{font-family:var(--font-sans);font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-item.is-unread .mail-item__from{font-weight:600}
.mail-item__date{flex:none;font-size:.74rem;color:var(--ink-3)}
.mail-item__subject{display:block;font-size:.84rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15rem}
.mail-item.is-unread .mail-item__subject{color:var(--ink)}

.mail__view{background:rgba(255,255,255,.78);border:1.5px solid var(--sky-300,#cfe5f8);border-radius:18px;min-height:64vh;backdrop-filter:blur(6px)}
.mail__placeholder{height:64vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;color:var(--ink-3);text-align:center}
.mail__placeholder svg{width:54px;height:54px;color:var(--blue-300,#a9d2f1)}

.mail-msg{padding:1.6rem 1.8rem}
.mail-msg__subject{font-size:1.7rem;color:var(--ink);margin:0 0 1rem;line-height:1.2}
.mail-msg__meta{display:flex;align-items:center;gap:.8rem;padding-bottom:1.1rem;border-bottom:1px solid var(--sky-300,#cfe5f8);flex-wrap:wrap}
.mail-msg__avatar{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue-400),var(--blue-600));color:#fff;font-weight:600;font-size:1.1rem}
.mail-msg__from{font-size:.95rem;color:var(--ink)}
.mail-msg__from span{color:var(--ink-3);font-size:.86rem}
.mail-msg__date{font-size:.8rem;color:var(--ink-3);text-transform:capitalize}
.mail-msg__reply{margin-left:auto}
.mail-msg__body{padding-top:1.3rem;font-size:1rem;line-height:1.7;color:var(--ink);font-family:var(--font-sans);word-break:break-word}
.mail-msg__body a{color:var(--blue-600);text-decoration:underline}

/* Modale composition */
.mail-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}
.mail-modal[hidden]{display:none}
.mail-modal__overlay{position:absolute;inset:0;background:rgba(20,45,75,.4);backdrop-filter:blur(3px)}
.mail-modal__panel{position:relative;width:min(620px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 70px -20px rgba(30,70,120,.5);padding:1.6rem}
.mail-modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.mail-modal__head h3{font-size:1.5rem;color:var(--blue-700);margin:0}
.mail-modal__foot{display:flex;justify-content:flex-end;gap:.7rem;margin-top:.6rem}
.mail-modal textarea{font-family:var(--font-sans);resize:vertical}
@media(max-width:520px){.mail-msg{padding:1.2rem}.mail-msg__subject{font-size:1.4rem}}

/* ===================== UPLOAD / DÉPÔT DE PHOTOS (admin) ===================== */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.6rem 1rem;border:2px dashed var(--sky-300,#cfe5f8);border-radius:14px;background:rgba(127,182,230,.06);color:var(--ink-2);text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--blue-400);background:rgba(127,182,230,.12);outline:none}
.dropzone.is-over{border-color:var(--blue-600);background:rgba(127,182,230,.2)}
.dropzone.is-loading{opacity:.6;pointer-events:none}
.dropzone svg{width:30px;height:30px;color:var(--blue-500)}
.dropzone p{margin:0;font-size:.9rem;line-height:1.4}
.dropzone p span{font-size:.82rem;color:var(--ink-3)}
.img-previews{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.img-previews:empty{display:none}
.img-thumb{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1.5px solid var(--sky-300,#cfe5f8);background:#fff}
.img-thumb.is-main{border-color:var(--blue-500);box-shadow:0 0 0 2px rgba(84,153,214,.3)}
.img-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.img-thumb__badge{position:absolute;left:0;bottom:0;right:0;background:var(--blue-600);color:#fff;font-size:.6rem;text-align:center;padding:.12rem;letter-spacing:.04em}
.img-thumb__del{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:rgba(20,40,70,.6);color:#fff;font-size:.95rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.img-thumb__del:hover{background:#c0392b}
.img-thumb__star{position:absolute;left:2px;top:2px;width:20px;height:20px;border:none;border-radius:50%;background:rgba(255,255,255,.85);color:#c8941f;font-size:.8rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.img-thumb__star:hover{background:#fff}
.img-url-extra{margin-top:.6rem}
.img-url-extra summary{font-size:.82rem;color:var(--blue-700);cursor:pointer}
.img-url-row{display:flex;gap:.5rem;margin-top:.5rem}
.img-url-row input{flex:1}

/* ===================== PHOTOS DANS LES AVIS ===================== */
.review-photos-add{margin:.4rem 0 .2rem}
.review-photos-prev{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.review-photos-prev:empty{display:none}
.rv-thumb{position:relative;width:68px;height:68px;border-radius:9px;overflow:hidden;border:1.5px solid var(--sky-300,#cfe5f8)}
.rv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rv-thumb__del{position:absolute;top:1px;right:1px;width:18px;height:18px;border:none;border-radius:50%;background:rgba(20,40,70,.6);color:#fff;font-size:.85rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.rv-thumb__del:hover{background:#c0392b}
.review-card__photos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.review-card__photos a{display:block;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--sky-300,#cfe5f8);transition:transform .2s}
.review-card__photos a:hover{transform:scale(1.05)}
.review-card__photos img{width:100%;height:100%;object-fit:cover;display:block}

/* ===================== ALERTE RETOUR EN STOCK ===================== */
.stock-alert{margin:.2rem 0 1.2rem;padding:1rem 1.1rem;border-radius:14px;background:rgba(127,182,230,.1);border:1.5px solid var(--sky-300,#cfe5f8)}
.stock-alert__title{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem;color:var(--ink-2);margin:0 0 .7rem;line-height:1.45}
.stock-alert__title svg{flex:none;width:20px;height:20px;color:var(--blue-500);margin-top:1px}
.stock-alert__row{display:flex;gap:.5rem;flex-wrap:wrap}
.stock-alert__row input{flex:1;min-width:180px;padding:.7rem .9rem;border-radius:11px;border:1.5px solid var(--sky-300,#cfe5f8);background:#fff;font-family:inherit;font-size:.9rem}
.stock-alert__row input:focus{outline:none;border-color:var(--blue-400)}
.stock-alert__row .btn{flex:none}
.stock-alert__msg{margin:.5rem 0 0}
.stock-alert__ok{margin:0;color:#1f7a4d;font-size:.95rem;font-weight:500}
@media(max-width:480px){.stock-alert__row .btn{width:100%}}

/* ===================== ADMIN — HISTORIQUE CLIENTS ===================== */
.clients-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.clients-search{flex:1;min-width:220px;max-width:340px;padding:.6rem .9rem;border-radius:11px;border:1.5px solid var(--sky-300,#cfe5f8);background:#fff;font-family:inherit;font-size:.9rem}
.clients-search:focus{outline:none;border-color:var(--blue-400)}
.client-card{margin:0 0 .7rem;border:1.5px solid var(--sky-300,#cfe5f8);border-radius:14px;background:rgba(255,255,255,.7);overflow:hidden}
.client-card[open]{box-shadow:0 12px 30px -20px rgba(44,106,166,.5)}
.client-card__sum{display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;cursor:pointer;list-style:none;flex-wrap:wrap}
.client-card__sum::-webkit-details-marker{display:none}
.client-card__sum:hover{background:rgba(127,182,230,.08)}
.client-card__avatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue-400),var(--blue-600));color:#fff;font-weight:600}
.client-card__id{display:flex;flex-direction:column;min-width:0;flex:1}
.client-card__id b{color:var(--ink);font-size:.98rem}
.client-card__id small{color:var(--ink-3);font-size:.82rem;overflow:hidden;text-overflow:ellipsis}
.cli-admin{display:inline-block;margin-left:.4rem;padding:.05rem .4rem;border-radius:6px;background:#e9dcfa;color:#6a4fb0;font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}
.client-card__stats{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;text-align:right}
.cli-stat{font-size:.78rem;color:var(--ink-3);white-space:nowrap}
.cli-stat--buy{font-weight:600;color:var(--blue-700)}
.client-card__body{padding:.2rem 1rem 1rem;border-top:1px solid var(--sky-300,#cfe5f8)}
.cli-none{color:var(--ink-3);font-size:.9rem;padding:.6rem 0;margin:0}
.cli-order{padding:.8rem .9rem;margin-top:.7rem;border:1px solid rgba(127,182,230,.25);border-radius:11px;background:#fff}
.cli-order__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.cli-order__id{font-weight:600;color:var(--ink)}
.cli-order__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.86rem;color:var(--ink-2);margin-bottom:.4rem}
.cli-order__addr{font-size:.85rem;color:var(--ink-2);margin-bottom:.5rem}
.cli-order__addr b{color:var(--ink)}
.cli-items{list-style:none;margin:0;padding:.5rem .6rem;background:rgba(127,182,230,.07);border-radius:9px;display:flex;flex-direction:column;gap:.25rem}
.cli-items li{font-size:.86rem;color:var(--ink)}
.cli-q{color:var(--ink-3)}
.cli-pu{color:var(--ink-3);float:right}
@media(max-width:600px){.client-card__stats{align-items:flex-start;text-align:left;width:100%}}

/* ===================== PAGES LÉGALES ===================== */
.legal-page{max-width:900px;margin:0 auto;padding:2.4rem 1.4rem 4rem}
.legal{background:rgba(255,255,255,.7);border:1.5px solid var(--sky-300,#cfe5f8);border-radius:20px;padding:clamp(1.5rem,4vw,3rem);backdrop-filter:blur(6px)}
.legal__back{display:inline-block;color:var(--blue-700);font-size:.9rem;margin-bottom:1.2rem;text-decoration:none}
.legal__back:hover{text-decoration:underline}
.legal h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,2.8rem);color:var(--ink);margin:0 0 .3rem;line-height:1.1}
.legal__updated{color:var(--ink-3);font-size:.85rem;margin:0 0 1.8rem}
.legal h2{font-size:1.4rem;color:var(--blue-700);margin:2rem 0 .6rem}
.legal h3{font-size:1.08rem;color:var(--ink);margin:1.2rem 0 .4rem}
.legal p,.legal li{color:var(--ink-2);line-height:1.7;font-size:.98rem}
.legal p{margin:0 0 .8rem}
.legal ul,.legal ol{margin:0 0 1rem 1.3rem;display:flex;flex-direction:column;gap:.35rem}
.legal a{color:var(--blue-600);text-decoration:underline}
.legal b,.legal strong{color:var(--ink)}
.legal__note{background:#fdf4e3;border:1.5px solid #f0d9a8;color:#7a5a1e;border-radius:12px;padding:1rem 1.2rem;font-size:.9rem;margin:0 0 1.8rem;line-height:1.55}
.legal__todo{background:rgba(255,210,120,.28);padding:.05em .45em;border-radius:5px;color:#8a5a12;font-weight:500;font-style:normal}
.legal__links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--sky-300,#cfe5f8)}
.legal__links a{font-size:.86rem;color:var(--blue-700)}

/* ===================== HÉRO PHOTO (refonte perles) ===================== */
.hero--photo .hero__visual{aspect-ratio:auto;max-width:420px;display:flex;align-items:center;justify-content:center}
.hero-glow{position:absolute;inset:-14% -10%;border-radius:50%;z-index:0;filter:blur(34px);
  background:radial-gradient(circle at 50% 38%,rgba(127,182,230,.5),rgba(243,197,209,.28) 46%,transparent 72%);
  animation:bob 9s ease-in-out infinite}
.hero-photo{position:relative;width:100%;border-radius:30px;overflow:hidden;z-index:1;transform:rotate(-1.6deg);
  box-shadow:0 50px 90px -34px rgba(55,105,165,.55),0 0 0 1px rgba(255,255,255,.7);
  transition:transform .7s var(--ease-out)}
.hero-photo::after{content:"";position:absolute;inset:0;border-radius:30px;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(201,169,106,.4)}
.hero-photo:hover{transform:rotate(0) scale(1.015)}
.hero-photo img{width:100%;height:auto;display:block}
.hero-photo__shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.4) 0%,transparent 28%,transparent 72%,rgba(255,255,255,.18) 100%)}
.hero--photo .float-chip{z-index:3}
.hero--photo .chip-a{top:7%;left:-7%}
.hero--photo .chip-b{bottom:20%;right:-8%}
.hero--photo .chip-c{bottom:3%;left:6%}
@media(max-width:760px){
  .hero--photo .hero__visual{max-width:300px;margin-bottom:1.4rem}
  .hero--photo .chip-a{left:-4%}
  .hero--photo .chip-b{right:-4%}
}

/* ===================== CASES À COCHER LÉGALES ===================== */
.check-legal{display:flex;align-items:flex-start;gap:.6rem;font-size:.86rem;color:var(--ink-2);line-height:1.45;margin:.6rem 0 1.1rem;cursor:pointer}
.check-legal input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:.1rem;accent-color:var(--blue-600);cursor:pointer}
.check-legal a{color:var(--blue-600);text-decoration:underline}

/* ---------- Champ carte Stripe (paiement directement sur le site) ---------- */
.card-field[hidden]{display:none}
.pay-element{min-height:44px;padding:.15rem 0}
.pay-loading{color:var(--ink-3);font-size:.9rem;padding:.7rem .2rem}
.pay-secure{display:flex;align-items:center;gap:.45rem;color:var(--ink-3)!important;margin-top:.55rem;font-size:.78rem}
.pay-secure svg{width:15px;height:15px;flex:none;color:var(--blue-500)}

/* ---------- Volet « Détail des matériaux » (fiche produit) ---------- */
.pdp-materials{margin:.1rem 0 1.4rem;border:1.5px solid var(--sky-200);border-radius:var(--r);background:rgba(255,255,255,.55);overflow:hidden}
.pdp-materials summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.85rem 1.1rem;font-weight:500;color:var(--ink);user-select:none;transition:background .25s}
.pdp-materials summary::-webkit-details-marker{display:none}
.pdp-materials summary:hover{background:rgba(124,184,230,.1)}
.pdp-materials__lbl{display:inline-flex;align-items:center;gap:.55rem}
.pdp-materials__lbl svg{width:18px;height:18px;color:var(--blue-500);flex:none}
.pdp-materials__chev{width:18px;height:18px;color:var(--ink-3);flex:none;transition:transform .3s var(--ease-out)}
.pdp-materials[open] .pdp-materials__chev{transform:rotate(180deg)}
.pdp-materials__body{padding:.1rem 1.1rem 1rem;color:var(--ink-2);font-size:.95rem;line-height:1.65;animation:pdpMatIn .35s var(--ease-out)}
@keyframes pdpMatIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ===================== HÉRO BANNIÈRE — décor pleine largeur ===================== */
.hero-banner{position:relative;width:100%;min-height:clamp(440px,64vh,660px);
  display:flex;align-items:stretch;overflow:hidden;isolation:isolate}
/* FONDU DU BAS : la photo se fond doucement dans la page (pas de ligne brutale) */
.hero-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(241,248,255,.35) 48%,rgba(241,248,255,.8) 80%,var(--bg) 100%)}

/* média : photo + voiles + lumière + poussière d'or.
   Visible PAR DÉFAUT (jamais bloquée cachée). Masquée seulement pendant l'intro
   (.hero-hold), puis la photo se DÉPLOIE de gauche à droite quand elle se révèle
   (classe .hero-go posée par common.js). .hero-shown = filet de sécurité qui la
   force visible après le déploiement, au cas où l'animation ne jouerait pas. */
.hero-banner__media{position:absolute;inset:0;z-index:0;overflow:hidden}
@keyframes hbWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
html.hero-hold .hero-banner__media{clip-path:inset(0 100% 0 0)}
html.hero-go .hero-banner__media{will-change:clip-path;animation:hbWipe 2.1s var(--ease-out) both}
html.hero-shown .hero-banner__media{animation:none;clip-path:inset(0 0 0 0)}
.hero-banner__img{position:absolute;inset:0;
  background:url(/images/hero-banner.png) 64% 45%/cover no-repeat;
  will-change:background-position;
  animation:hbKen 36s ease-in-out infinite alternate}
/* panoramique léger SANS agrandir l'image (préserve la netteté ; pas de scale) */
@keyframes hbKen{0%{background-position:60% 42%}100%{background-position:70% 56%}}

/* dégradé crème : panneau lisible à gauche, photo qui respire à droite + fondu bas vers la page */
.hero-banner__shade{position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(255,253,248,.98) 0%, rgba(255,253,248,.88) 22%, rgba(255,253,248,.5) 44%, rgba(255,253,248,.06) 62%, rgba(255,253,248,0) 72%),
    linear-gradient(180deg, rgba(255,253,248,.16) 0%, rgba(241,248,255,0) 32%, rgba(241,248,255,.5) 78%, var(--bg) 100%)}

/* éclat diagonal qui balaie la bannière */
.hero-banner__shine{position:absolute;top:-60%;bottom:-60%;left:-35%;width:36%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-15deg);filter:blur(4px);opacity:0;mix-blend-mode:screen;
  animation:hbSweep 9s ease-in-out 1.8s infinite}
@keyframes hbSweep{0%{left:-35%;opacity:0}6%{opacity:.85}24%{left:125%;opacity:0}100%{left:125%;opacity:0}}

/* poussière d'or qui s'élève */
.hero-banner__dust{position:absolute;inset:0;pointer-events:none}
.hero-banner__dust i{position:absolute;left:var(--x);bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,rgba(255,248,228,.95),rgba(201,169,106,.55) 55%,transparent 72%);
  box-shadow:0 0 8px 1px rgba(230,210,164,.5);opacity:0;will-change:transform,opacity;
  animation:hbDust var(--dur) linear var(--delay) infinite}
@keyframes hbDust{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}12%{opacity:.9}82%{opacity:.6}100%{transform:translate3d(var(--drift),calc(-1*var(--rise)),0) scale(1);opacity:0}}

/* contenu de la bannière */
.hero-banner__inner{position:relative;z-index:2;width:100%;display:flex;
  padding:clamp(2rem,5.5vh,4rem) clamp(1.3rem,5vw,3.6rem) clamp(2rem,5.5vh,4rem) clamp(1.6rem,6vw,5.5rem)}
/* contenu réparti sur la hauteur : titre en haut de l'image, accroche + boutons en bas */
.hero-banner__content{max-width:580px;width:100%;display:flex;flex-direction:column;justify-content:space-between}

.hero-banner__eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--blue-600);
  opacity:0;animation:hbUp .85s var(--ease-out) .4s forwards}
.hero-banner__eyebrow svg{width:17px;height:17px;color:var(--gold);filter:drop-shadow(0 1px 2px rgba(201,169,106,.4))}

.hero-banner__title{font-family:var(--font-display);font-weight:500;line-height:.96;margin:.55rem 0 0}
.hb-brand{display:flex;font-size:clamp(3.4rem,9vw,6.6rem);letter-spacing:-.5px}
.hb-brand>span{display:inline-block;
  background:linear-gradient(100deg,var(--blue-700),var(--blue-500) 50%,var(--gold));
  background-size:700% 100%;background-position:calc(var(--i)*16.66%) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(48px) rotate(7deg);filter:blur(10px);
  animation:hbLetter .9s var(--ease-out) forwards;animation-delay:calc(.5s + var(--i)*.075s)}
@keyframes hbLetter{
  0%{opacity:0;transform:translateY(48px) rotate(7deg);filter:blur(10px)}
  70%{opacity:1;transform:translateY(-6px) rotate(-1.2deg);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}}

.hb-sub{display:block;font-size:clamp(1.15rem,2.5vw,1.8rem);font-style:italic;color:var(--ink);
  margin-top:.4rem;opacity:0;animation:hbUp .85s var(--ease-out) 1.15s forwards}
.hb-sub em{font-style:italic;background:linear-gradient(100deg,var(--blue-600),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}

.hero-banner__lead{font-size:1.06rem;color:var(--ink-2);font-weight:300;max-width:44ch;margin:1.1rem 0 1.8rem;line-height:1.6;
  opacity:0;animation:hbUp .85s var(--ease-out) 1.3s forwards}
.hero-banner__cta-row{display:flex;gap:.8rem;flex-wrap:wrap;opacity:0;animation:hbUp .85s var(--ease-out) 1.45s forwards}
@keyframes hbUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* perles lumineuses (bokeh) qui flottent doucement sur la photo */
.hero-banner__pearls{position:absolute;inset:0;pointer-events:none}
.hero-banner__pearls i{position:absolute;left:var(--px);top:var(--py);width:var(--ps);height:var(--ps);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,255,255,.4) 55%,rgba(255,255,255,0) 75%);
  filter:blur(.5px);opacity:0;will-change:transform,opacity;
  animation:hbPearl var(--pd) ease-in-out var(--pdel) infinite}
@keyframes hbPearl{0%,100%{opacity:0;transform:translateY(10px) scale(.85)}30%{opacity:.6}50%{opacity:.75;transform:translateY(-12px) scale(1)}70%{opacity:.5}}

/* étincelles qui scintillent sur le bijou */
.hero-banner__sparks{position:absolute;inset:0;pointer-events:none}
.hero-banner__sparks i{position:absolute;left:var(--sx);top:var(--sy);font-style:normal;font-size:var(--ss);line-height:1;
  color:#fff;text-shadow:0 0 10px rgba(255,255,255,.95),0 0 24px rgba(201,169,106,.65);opacity:0;will-change:transform,opacity;
  animation:hbSpark var(--sd) ease-in-out var(--sdel) infinite}
@keyframes hbSpark{0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}

/* trait calligraphié qui se DESSINE sous le titre, ponctué d'une perle dorée */
.hb-flourish{display:block;width:clamp(150px,26vw,250px);height:auto;margin:.7rem 0 0}
.hb-flourish__line{stroke-dasharray:300;stroke-dashoffset:300;animation:hbFlour 1s var(--ease-out) 1.5s forwards}
@keyframes hbFlour{to{stroke-dashoffset:0}}
.hb-flourish__dot{transform-origin:center;transform-box:fill-box;transform:scale(0);animation:hbDot .5s var(--ease-out) 2.35s forwards}
@keyframes hbDot{60%{transform:scale(1.6)}100%{transform:scale(1)}}

/* reflet périodique sur le bouton principal de la bannière */
.hero-banner__cta-row .btn--primary::after{transition:none;animation:hbBtnSheen 4.6s ease-in-out 2.8s infinite}
@keyframes hbBtnSheen{0%{left:-120%}14%{left:140%}100%{left:140%}}

/* badges de confiance : cascade à la révélation */
.hero-trust span{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.hero-trust span:nth-child(2){transition-delay:.1s}
.hero-trust span:nth-child(3){transition-delay:.2s}
.hero-trust span:nth-child(4){transition-delay:.3s}
.hero-trust.in span{opacity:1;transform:none}

/* Tant que l'intro (préchargeur) couvre la page, on FIGE l'entrée du héros —
   sinon elle se joue cachée et on ne la voit jamais. common.js retire « hero-hold »
   AU MOMENT où la bannière se révèle : au scroll sur bureau, à la sortie de l'intro
   sur mobile. L'animation se joue alors pile quand elle devient visible. */
html.hero-hold .hero-banner__img,
html.hero-hold .hero-banner__shine,
html.hero-hold .hero-banner__dust i,
html.hero-hold .hero-banner__pearls i,
html.hero-hold .hero-banner__sparks i,
html.hero-hold .hb-flourish__line,
html.hero-hold .hb-flourish__dot,
html.hero-hold .hero-banner__eyebrow,
html.hero-hold .hb-brand>span,
html.hero-hold .hb-sub,
html.hero-hold .hero-banner__lead,
html.hero-hold .hero-banner__cta-row,
html.hero-hold .hero-banner__cta-row .btn--primary::after{animation-play-state:paused!important}

/* mobile : titre en haut sur voile crème · bracelet dégagé au centre ·
   accroche + boutons POSÉS DIRECTEMENT SUR LA PHOTO (sans carte), comme sur bureau. */
@media (max-width:760px){
  .hero-banner{align-items:stretch;min-height:clamp(490px,82vh,660px)}
  /* photo nette, bracelet cadré dans la zone claire (haut-centre), sans panoramique */
  .hero-banner__img{background-position:center 40%;animation:none}
  /* crème douce derrière le TITRE en haut ; voile léger en bas pour garder le texte lisible
     sur la photo (ce n'est PAS une carte, juste le même voile que le reste de la bannière) */
  .hero-banner__shade{background:
    linear-gradient(180deg,
      rgba(255,253,248,.96) 0%,
      rgba(255,253,248,.7) 16%,
      rgba(255,253,248,.18) 30%,
      rgba(255,253,248,0) 42%,
      rgba(255,253,248,0) 58%,
      rgba(255,253,248,.5) 78%,
      rgba(241,248,255,.6) 90%,
      var(--bg) 100%)}
  .hero-banner__inner{padding-top:clamp(1.3rem,5vw,2rem)}
  .hero-banner__content{max-width:none;gap:1rem}
  /* plus de carte : l'accroche + les boutons reposent à même la photo */
  .hero-banner__bottom{margin-top:.4rem}
  /* teaser : on ne montre qu'un aperçu (≈¼) ; le reste s'ouvre via « En savoir plus ».
     Halo crème discret pour rester lisible sur la photo, sans encadré visible. */
  .hero-banner__lead{font-size:.97rem;line-height:1.55;margin:.1rem 0 .55rem;max-width:none;color:var(--ink-2);
    text-shadow:0 1px 12px rgba(255,253,248,.95),0 0 4px rgba(255,253,248,.9);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero-more{display:inline-flex;margin:0 0 1rem;text-shadow:0 1px 10px rgba(255,253,248,.9)}
  .hero-banner__cta-row{gap:.6rem}
  .hero-banner__cta-row .btn{flex:1 1 140px;justify-content:center;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .hero-banner,.hero-banner__eyebrow,.hb-sub,.hero-banner__lead,.hero-banner__cta-row,.hb-brand>span{animation:none;opacity:1;transform:none;filter:none}
  .hero-banner__media{animation:none;clip-path:none}
  .hero-banner__img,.hero-banner__shine,.hero-banner__dust i{animation:none}
  .hero-banner__pearls i,.hero-banner__sparks i{animation:none;opacity:0}
  .hb-flourish__line{animation:none;stroke-dashoffset:0}
  .hb-flourish__dot{animation:none;transform:scale(1)}
  .hero-banner__cta-row .btn--primary::after{animation:none}
  .hero-trust span{opacity:1;transform:none;transition:none}
}

/* bandeau confiance sous la bannière */
.hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 2.2rem;max-width:var(--maxw);margin:0 auto;
  padding:clamp(1rem,2.4vw,1.6rem) var(--gut) 0}
.hero-trust span{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--ink-2);font-weight:500}
.hero-trust svg{width:18px;height:18px;color:var(--blue-500);flex:none}

/* ============================================================
   CATALOGUE ✦ raffinements — éclosion en cascade, éclats, dorures
   (s'ajoute au design d'origine sans le modifier)
============================================================ */
/* Titre du héros catalogue : dégradé signature bleu→or, doux reflet */
.shader-hero__content h1{
  background:linear-gradient(100deg,var(--blue-700),var(--blue-500) 55%,var(--gold));
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;animation:esShineSlide 9s ease-in-out infinite alternate}
@keyframes esShineSlide{from{background-position:0% 0}to{background-position:100% 0}}

/* --- Éclosion en cascade des cartes ---
   Chaque carte de la grille fleurit l'une après l'autre (délai croissant),
   avec une légère inclinaison organique qui se redresse. L'animation en
   fill « backwards » laisse ensuite la main au tilt 3D interactif. */
.cat-grid>:nth-child(1){--td:0s}
.cat-grid>:nth-child(2){--td:.07s}
.cat-grid>:nth-child(3){--td:.14s}
.cat-grid>:nth-child(4){--td:.21s}
.cat-grid>:nth-child(5){--td:.28s}
.cat-grid>:nth-child(6){--td:.35s}
.cat-grid>:nth-child(7){--td:.42s}
.cat-grid>:nth-child(8){--td:.49s}
.cat-grid>:nth-child(3n+1){--rot:-2.5deg}
.cat-grid>:nth-child(3n){--rot:2.5deg}
.cat-grid .cat-card.reveal{opacity:0;transform:translateY(46px) scale(.94);filter:blur(8px)}
/* RÉPARE AUSSI le tilt 3D : .reveal.in posait transform:none et le tuait. */
.cat-grid .cat-card.reveal.in{opacity:1;filter:none;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));
  animation:catBloom .85s var(--ease-out) var(--td,0s) backwards}
@keyframes catBloom{
  from{opacity:0;transform:translateY(46px) scale(.94) rotate(var(--rot,0deg));filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0deg);filter:blur(0)}}

/* --- Liseré dégradé (bleu→or) qui s'allume au survol de la carte --- */
.cat-card{position:relative}
.cat-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:6;
  background:linear-gradient(160deg,rgba(124,184,230,.7),rgba(201,169,106,.4) 55%,transparent 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s;pointer-events:none}
.cat-card:hover::before{opacity:1}

/* --- Balayage lumineux diagonal sur la photo au survol --- */
.cat-card__media::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-85%;width:45%;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .8s var(--ease-out);pointer-events:none}
.cat-card:hover .cat-card__media::after{left:165%}

/* --- Nom et prix s'embellissent au survol --- */
.cat-card__name{transition:color .35s}
.cat-card:hover .cat-card__name{color:var(--blue-700)}
.cat-card .product__price{transition:.3s}
.cat-card:hover .product__price{
  background:linear-gradient(100deg,var(--blue-600),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* --- Bouton « Ajouter » : le petit panier frétille --- */
.cat-card__add svg{transition:transform .3s}
.cat-card__add:hover svg{animation:cartWiggle .55s var(--ease-out)}
@keyframes cartWiggle{
  0%{transform:translateX(0) rotate(0)}35%{transform:translateX(3px) rotate(8deg)}
  70%{transform:translateX(-2px) rotate(-6deg)}100%{transform:none}}

/* --- Chips de catégorie : ressort + dégradé actif --- */
.cat-chip{transition:transform .3s var(--ease-out),box-shadow .3s,border-color .25s,background .25s,color .25s}
.cat-chip:hover{transform:translateY(-2px);box-shadow:0 10px 18px -12px rgba(44,106,166,.55)}
.cat-chip:active{transform:scale(.93)}
.cat-chip.is-active{background:linear-gradient(135deg,var(--blue-500),var(--blue-700))}

/* --- Tête de groupe : filet dégradé qui se déploie + compteur en pastille --- */
.cat-group__head{position:relative;border-bottom:none;padding-bottom:.7rem}
.cat-group__head::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-400),var(--gold) 55%,transparent 95%);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out) .2s}
.cat-group.in .cat-group__head::after{transform:scaleX(1)}
.cat-group__head span{background:rgba(255,255,255,.75);border:1px solid rgba(201,169,106,.45);
  color:#a9883f;font-weight:600;font-size:.78rem;padding:.22rem .75rem;border-radius:var(--pill)}
.cat-sub::before{content:"❀ ";font-style:normal;font-size:.8em;color:var(--gold-soft);vertical-align:.08em}

/* --- Détails vivants : loupe, compteur, stock faible, état vide --- */
.cat-search svg{transition:color .3s,transform .3s}
.cat-search:focus-within svg{color:var(--blue-600);transform:translateY(-50%) scale(1.12)}
.cat-count.tick{animation:countTick .45s var(--ease-out)}
@keyframes countTick{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.stock-badge.low{animation:lowPulse 2.6s ease-in-out infinite}
@keyframes lowPulse{0%,100%{box-shadow:0 0 0 0 rgba(185,119,43,.3)}55%{box-shadow:0 0 0 6px rgba(185,119,43,0)}}
.empty-state{animation:countTick .6s var(--ease-out)}
.empty-state svg{animation:bob 5.5s ease-in-out infinite}

/* ============================================================
   FICHE PRODUIT ✦ chorégraphie d'entrée, halo, dorures, crossfade
============================================================ */
/* --- Entrée : la photo glisse depuis la gauche, les infos fleurissent en cascade --- */
.pdp__media{position:relative;isolation:isolate;animation:pdpMediaIn .95s var(--ease-out) both}
@keyframes pdpMediaIn{from{opacity:0;transform:translateX(-28px) scale(.97);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
.pdp__info>*{--pi:8;animation:pdpRise .65s var(--ease-out) both;animation-delay:calc(.1s + var(--pi)*.07s)}
.pdp__info>:nth-child(1){--pi:0}
.pdp__info>:nth-child(2){--pi:1}
.pdp__info>:nth-child(3){--pi:2}
.pdp__info>:nth-child(4){--pi:3}
.pdp__info>:nth-child(5){--pi:4}
.pdp__info>:nth-child(6){--pi:5}
.pdp__info>:nth-child(7){--pi:6}
.pdp__info>:nth-child(8){--pi:7}
@keyframes pdpRise{from{opacity:0;transform:translateY(22px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

/* --- Halo lumineux pastel qui respire derrière la photo --- */
.pdp__media::before{content:"";position:absolute;inset:-9%;z-index:-1;filter:blur(34px);pointer-events:none;
  background:
    radial-gradient(58% 52% at 28% 22%,rgba(127,182,230,.4),transparent 70%),
    radial-gradient(52% 48% at 76% 82%,rgba(201,169,106,.3),transparent 72%);
  animation:pdpGlow 9s ease-in-out infinite alternate}
@keyframes pdpGlow{from{opacity:.65;transform:rotate(-2deg) scale(.97)}to{opacity:1;transform:rotate(2deg) scale(1.04)}}

/* --- Cadre : fin liseré doré, balayage lumineux + zoom doux au survol --- */
.pdp__media .frame::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:6;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(201,169,106,.55) 45%,rgba(127,182,230,.5) 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;pointer-events:none}
.pdp__media .frame::before{content:"";position:absolute;top:-30%;bottom:-30%;left:-85%;width:42%;z-index:5;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-16deg);transition:left .95s var(--ease-out);pointer-events:none}
.pdp__media .frame:hover::before{left:170%}
.pdp__media .frame img{transition:transform 1.2s var(--ease-out)}
.pdp__media .frame:hover img{transform:scale(1.05)}

/* --- Crossfade au changement de miniature (classe .swap posée par product.js) --- */
.media.swap img{animation:pdpSwap .55s var(--ease-out)}
@keyframes pdpSwap{from{opacity:0;transform:scale(1.045);filter:blur(5px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
.thumb{transition:opacity .3s,transform .3s var(--ease-out),border-color .3s,box-shadow .3s}
.thumb:hover{transform:translateY(-3px)}
.thumb.is-active{transform:translateY(-2px)}

/* --- Titre souligné d'un trait qui se déploie + prix en dégradé vivant --- */
.pdp__info h1{position:relative;padding-bottom:.55rem}
.pdp__info h1::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:86px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-400),var(--gold));
  transform-origin:left;animation:pdpLine 1s var(--ease-out) .55s backwards}
@keyframes pdpLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pdp__price{background:linear-gradient(100deg,var(--blue-700),var(--blue-500) 45%,var(--gold) 90%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:esShineSlide 7s ease-in-out infinite alternate}

/* --- Bouton « Ajouter au panier » : reflet périodique (comme le héros) --- */
.pdp__buy .btn--primary::after{transition:none;animation:hbBtnSheen 5.4s ease-in-out 3s infinite}

/* --- Réassurance : icônes qui s'animent à l'approche --- */
.pdp-trust li{transition:transform .3s var(--ease-out)}
.pdp-trust li:hover{transform:translateX(3px)}
.pdp-trust svg{transition:transform .35s var(--ease-out),color .3s}
.pdp-trust li:hover svg{transform:translateY(-2px) scale(1.12);color:var(--gold)}
.pdp-urgency svg{animation:urgFlash 1.8s ease-in-out infinite}
@keyframes urgFlash{0%,100%{opacity:1}50%{opacity:.4}}

/* --- Fil d'Ariane : soulignement au survol --- */
.breadcrumb a{position:relative;transition:color .25s}
.breadcrumb a:hover{color:var(--blue-600)}
.breadcrumb a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--blue-500);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.breadcrumb a:hover::after{transform:scaleX(1)}

/* --- Avis : apparition en cascade + carte qui se soulève --- */
.reviews .review-card{animation:pdpRise .55s var(--ease-out) both;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.reviews .review-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.reviews .review-card:nth-of-type(2){animation-delay:.07s}
.reviews .review-card:nth-of-type(3){animation-delay:.14s}
.reviews .review-card:nth-of-type(4){animation-delay:.21s}
.reviews .review-card:nth-of-type(5){animation-delay:.28s}
.reviews__big{background:linear-gradient(120deg,var(--blue-700),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* --- « Vous aimerez aussi » : cascade + balayage lumineux + prix doré --- */
.xs-grid .xs-card{animation:pdpRise .7s var(--ease-out) both}
.xs-grid .xs-card:nth-child(2){animation-delay:.09s}
.xs-grid .xs-card:nth-child(3){animation-delay:.18s}
.xs-grid .xs-card:nth-child(4){animation-delay:.27s}
.xs-card__media::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-85%;width:45%;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .8s var(--ease-out);pointer-events:none}
.xs-card:hover .xs-card__media::after{left:165%}
.xs-card .xs-price{transition:.3s}
.xs-card:hover .xs-price{background:linear-gradient(100deg,var(--blue-600),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* --- Accessibilité : on neutralise tous ces raffinements si demandé --- */
@media (prefers-reduced-motion: reduce){
  .shader-hero__content h1,.pdp__price{animation:none}
  .cat-grid .cat-card.reveal,.cat-grid .cat-card.reveal.in{opacity:1;transform:none;filter:none;animation:none}
  .cat-card__media::after,.xs-card__media::after,.pdp__media .frame::before{display:none}
  .pdp__media,.pdp__info>*,.pdp__info h1::after,.media.swap img,
  .reviews .review-card,.xs-grid .xs-card,.empty-state,.empty-state svg{animation:none!important}
  .pdp__media::before{animation:none}
  .stock-badge.low,.pdp-urgency svg,.pdp__buy .btn--primary::after{animation:none}
  .cat-group__head::after{transform:scaleX(1);transition:none}
}

/* ============================================================
   CATALOGUE ✦ contenu éditorial — réassurance, atelier, guide
============================================================ */
/* --- Bandeau de réassurance (pilules de verre sous le héros) --- */
.cat-perks{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1rem;margin:-.4rem 0 1.8rem}
.cat-perks span{display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--ink-2);
  background:rgba(255,255,255,.65);border:1px solid rgba(124,184,230,.32);border-radius:var(--pill);
  padding:.5rem 1.05rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s}
.cat-perks span:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:rgba(201,169,106,.55)}
.cat-perks svg{width:17px;height:17px;color:var(--blue-500);flex:none;transition:color .3s}
.cat-perks span:hover svg{color:var(--gold)}
.cat-perks b{color:var(--ink);font-weight:600}

/* --- Bannière éditoriale « l'atelier » (panneau bleu, reflet, points) --- */
.cat-banner{position:relative;display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-700));border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:clamp(2rem,5vw,3.6rem);margin-top:3.2rem;color:#fff;overflow:hidden}
.cat-banner .eyebrow{color:#cfe7fb}
.cat-banner .eyebrow::before{background:rgba(255,255,255,.5)}
.cat-banner .eyebrow svg{color:var(--gold-soft)}
.cat-banner h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.9rem);margin:.9rem 0 .7rem}
.cat-banner p{color:rgba(255,255,255,.86);font-weight:300;max-width:54ch}
.cat-banner__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}
.btn--light{background:#fff;color:var(--blue-700);box-shadow:0 12px 26px -14px rgba(0,30,60,.55)}
.btn--light:hover{transform:translateY(-3px);box-shadow:0 18px 34px -16px rgba(0,30,60,.6)}
.btn--glass{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn--glass:hover{transform:translateY(-3px);background:rgba(255,255,255,.22)}
.cat-banner__deco{position:absolute;color:rgba(255,255,255,.14);pointer-events:none}
.cat-banner__deco.d1{top:-36px;left:-26px;width:170px;animation:spin 45s linear infinite}
.cat-banner__deco.d2{bottom:-46px;right:-24px;width:210px;animation:spin 60s linear infinite reverse}
.cat-banner__points{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;position:relative;z-index:1}
.cat-banner__points li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:var(--r-sm);
  padding:.85rem 1.1rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;transition:transform .35s var(--ease-out),background .3s}
.cat-banner__points li:hover{transform:translateX(4px);background:rgba(255,255,255,.18)}
.cat-banner__points b{font-family:var(--font-display);font-size:1.3rem}
.cat-banner__points span{font-size:.8rem;color:rgba(255,255,255,.75)}
/* reflet lumineux qui traverse régulièrement la bannière */
.cat-banner::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:32%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-16deg);animation:nlSheen 10s ease-in-out 2.5s infinite;pointer-events:none}
@keyframes nlSheen{0%{left:-40%}18%{left:130%}100%{left:130%}}
@media(max-width:860px){.cat-banner{grid-template-columns:1fr}}

/* --- Mot de l'atelier (grande citation signée) --- */
.atelier-note{max-width:760px;margin:3.4rem auto 0;text-align:center;position:relative;padding:0 1rem}
.atelier-note__mark{width:42px;height:42px;color:var(--blue-300);margin:0 auto 1rem;display:block;animation:bob 7s ease-in-out infinite}
.atelier-note blockquote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.75rem);
  line-height:1.5;color:var(--ink);margin:0 0 1rem}
.atelier-note figcaption{font-size:.9rem;color:var(--gold);letter-spacing:.06em}

/* --- Petit guide (entretien, matériaux, livraison) --- */
.cat-guide{margin-top:3.6rem}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start}
.guide-item{border:1.5px solid var(--sky-200);border-radius:var(--r);background:rgba(255,255,255,.6);overflow:hidden;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .35s var(--ease-out),box-shadow .35s,border-color .3s,background .3s}
.guide-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--blue-400)}
.guide-item[open]{border-color:var(--blue-400);background:#fff}
.guide-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:1rem 1.15rem;font-weight:500;color:var(--ink);user-select:none}
.guide-item summary::-webkit-details-marker{display:none}
.guide-item__lbl{display:inline-flex;align-items:center;gap:.6rem}
.guide-item__lbl svg{width:19px;height:19px;color:var(--blue-500);flex:none}
.guide-item__chev{width:18px;height:18px;color:var(--ink-3);flex:none;transition:transform .3s var(--ease-out)}
.guide-item[open] .guide-item__chev{transform:rotate(180deg)}
.guide-item__body{padding:0 1.15rem 1.05rem;color:var(--ink-2);font-size:.93rem;line-height:1.65;animation:pdpMatIn .35s var(--ease-out)}
.guide-item__body a{color:var(--blue-600);text-decoration:underline}
@media(max-width:860px){.guide-grid{grid-template-columns:1fr}}

/* --- Ruban poétique en pied de catalogue --- */
.ribbon--cat{margin-top:3.2rem;border:1px solid rgba(124,184,230,.25);border-radius:var(--r)}
.ribbon:hover .track{animation-play-state:paused}

/* ============================================================
   ACCUEIL ✦ chiffres clés, témoignages, micro-animations
============================================================ */
/* --- Chiffres clés (compteurs animés par home.js) --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.65),rgba(231,243,252,.65));
  border:1px solid rgba(255,255,255,.75);border-radius:var(--r-lg);
  padding:clamp(1.6rem,4vw,2.8rem);box-shadow:var(--shadow-sm)}
.stat{text-align:center;position:relative;padding:.4rem .6rem}
.stat+.stat::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(201,169,106,.55),transparent)}
.stat-num{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(2.1rem,4.5vw,3.2rem);line-height:1;
  background:linear-gradient(120deg,var(--blue-700),var(--blue-500) 55%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat-lbl{display:block;margin-top:.45rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
@media(max-width:760px){
  .stats{grid-template-columns:1fr 1fr;gap:1.3rem 0}
  .stat:nth-child(odd)::before{display:none}
}

/* --- Témoignages (cartes citation) --- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.quotes-empty{grid-column:1/-1;text-align:center;color:var(--ink-2);font-style:italic;font-size:1.04rem;padding:1.6rem 1rem}
.quote{position:relative;margin:0;background:linear-gradient(180deg,#fff,var(--surface-2));
  border:1px solid rgba(255,255,255,.8);border-radius:var(--r);box-shadow:var(--shadow-sm);
  padding:2.3rem 1.6rem 1.5rem;overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.quote:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.quote::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue-400),var(--gold),var(--blue-400));
  background-size:200% 100%;animation:slideGrad 7s linear infinite;opacity:.65}
.quote__mark{position:absolute;top:.35rem;left:1.05rem;font-family:var(--font-display);
  font-size:5rem;line-height:1;color:var(--sky-200);pointer-events:none}
.quote .stars{font-size:1rem;margin-bottom:.6rem;position:relative}
.quote blockquote{margin:0 0 1.1rem;color:var(--ink-2);font-weight:300;line-height:1.65;position:relative}
.quote figcaption{display:flex;flex-direction:column;border-top:1px dashed rgba(124,184,230,.4);padding-top:.8rem}
.quote figcaption b{font-family:var(--font-display);font-size:1.15rem;color:var(--ink)}
.quote figcaption span{font-size:.8rem;color:var(--ink-3)}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}

/* --- Filet dégradé sous les titres de section (se déploie au scroll) --- */
.sec-head h2::after{content:"";display:block;width:78px;height:2px;margin:.75rem auto 0;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-400),var(--gold))}
.sec-head.reveal h2::after{transform:scaleX(0);transition:transform .9s var(--ease-out) .3s}
.sec-head.reveal.in h2::after{transform:scaleX(1)}

/* --- Features : cascade + icône qui se dore au survol --- */
.features .feature{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.features .feature:nth-child(2){transition-delay:.1s}
.features .feature:nth-child(3){transition-delay:.2s}
.features .feature:nth-child(4){transition-delay:.3s}
.features.in .feature{opacity:1;transform:none}
.feature .ic{transition:transform .5s var(--ease-out),color .35s,box-shadow .4s}
.feature:hover .ic{color:var(--gold);box-shadow:0 12px 24px -10px rgba(201,169,106,.55)}

/* --- Histoire : halo pastel derrière la photo + filet sous le titre --- */
.story__media{position:relative;isolation:isolate}
.story__media::before{content:"";position:absolute;inset:-8%;z-index:-1;filter:blur(32px);pointer-events:none;
  background:
    radial-gradient(56% 50% at 30% 25%,rgba(127,182,230,.38),transparent 70%),
    radial-gradient(50% 46% at 74% 80%,rgba(201,169,106,.28),transparent 72%);
  animation:pdpGlow 10s ease-in-out infinite alternate}
.story__text h2{position:relative;padding-bottom:.6rem}
.story__text h2::after{content:"";position:absolute;left:0;bottom:0;width:86px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-400),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .35s}
.story__text.in h2::after{transform:scaleX(1)}

/* --- Newsletter : reflet périodique + étincelles flottantes --- */
.newsletter::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-16deg);animation:nlSheen 9s ease-in-out 2s infinite;pointer-events:none}
.nl-spark{position:absolute;left:var(--sx);top:var(--sy);color:rgba(255,255,255,.85);font-size:15px;z-index:1;
  pointer-events:none;animation:nlSpark var(--sd,6s) ease-in-out var(--sdel,0s) infinite}
@keyframes nlSpark{0%,100%{opacity:.15;transform:translateY(0) scale(.8)}50%{opacity:.9;transform:translateY(-10px) scale(1.15)}}

/* --- Micro-détails : flèches de CTA, badges de confiance, réseaux sociaux --- */
.hero-banner__cta-row .btn svg{transition:transform .35s var(--ease-out)}
.hero-banner__cta-row .btn:hover svg{transform:translateX(4px)}
.see-all .btn svg{transition:transform .35s var(--ease-out)}
.see-all .btn:hover svg{transform:translateX(4px)}
.hero-trust span{transition:transform .3s var(--ease-out),color .3s}
.hero-trust span:hover{transform:translateY(-2px);color:var(--ink)}
.hero-trust svg{transition:color .3s}
.hero-trust span:hover svg{color:var(--gold)}
.socials a:hover{transform:translateY(-3px) rotate(-6deg);color:var(--gold)}

/* --- Accessibilité (reduced motion) pour ces nouveautés --- */
@media (prefers-reduced-motion: reduce){
  .cat-banner::after,.newsletter::after{display:none}
  .cat-banner__deco,.nl-spark,.atelier-note__mark,.quote::before,.story__media::before{animation:none}
  .features .feature{opacity:1;transform:none;transition:none}
  .sec-head.reveal h2::after,.story__text h2::after{transform:scaleX(1);transition:none}
  .stat-num{background:none;color:var(--ink);-webkit-background-clip:initial;background-clip:initial}
}

/* ============================================================
   HÉRO ✦ « En savoir plus » (mobile) — teaser + fenêtre (bottom-sheet)
============================================================ */
/* Bouton « En savoir plus » (masqué sur ordinateur, où le texte est entier) */
.hero-more{display:none;align-items:center;gap:.4rem;font-family:var(--font-sans);font-weight:600;
  font-size:.82rem;letter-spacing:.02em;color:var(--blue-700);background:none;padding:.1rem 0;cursor:pointer;
  transition:color .25s,gap .25s}
.hero-more:hover{color:var(--blue-500);gap:.55rem}
.hero-more svg{width:15px;height:15px;transition:transform .3s var(--ease-out)}
.hero-more:hover svg{transform:translateY(2px)}
/* visible uniquement sur mobile (placée APRÈS la base pour gagner en ordre source) */
@media (max-width:760px){.hero-more{display:inline-flex}}

/* Fenêtre coulissante (bottom-sheet) — VERRE DÉPOLI BLEU NUIT (pas de fond blanc) */
.hero-sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;pointer-events:none}
.hero-sheet.is-open{pointer-events:auto}
.hero-sheet__overlay{position:absolute;inset:0;background:rgba(16,34,58,.4);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .4s var(--ease-out)}
.hero-sheet.is-open .hero-sheet__overlay{opacity:1}
.hero-sheet__panel{position:relative;width:100%;max-width:560px;max-height:84vh;overflow-y:auto;color:#eaf4ff;
  background:linear-gradient(180deg,rgba(42,78,118,.62),rgba(24,48,78,.74));
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.22);border-bottom:none;border-radius:28px 28px 0 0;
  box-shadow:0 -26px 70px -26px rgba(8,26,52,.7);
  padding:1.5rem 1.4rem 1.95rem;transform:translateY(101%);transition:transform .46s var(--ease-out)}
.hero-sheet.is-open .hero-sheet__panel{transform:none}
.hero-sheet__grip{display:block;width:42px;height:5px;border-radius:5px;background:rgba(255,255,255,.42);margin:0 auto 1.1rem}
.hero-sheet__close{position:absolute;top:1rem;right:1rem;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.16);color:#eaf4ff;border:1px solid rgba(255,255,255,.22);transition:.25s}
.hero-sheet__close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
.hero-sheet__close svg{width:18px;height:18px}
.hero-sheet__head{text-align:center;margin-bottom:1.1rem}
.hero-sheet__mark{width:34px;height:34px;color:#bcdcfb;margin:0 auto .5rem;display:block;animation:bob 7s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(0,20,50,.4))}
.hero-sheet__eyebrow{display:block;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:#cfe7fb;margin-bottom:.35rem}
.hero-sheet__head h2{font-family:var(--font-display);font-style:italic;font-size:1.75rem;color:#fff}
.hero-sheet__text{color:rgba(255,255,255,.9);font-weight:300;line-height:1.7;font-size:1rem;margin-bottom:1.5rem}
/* Dévoilement en cascade du contenu quand la fenêtre s'ouvre */
.hero-sheet__head,.hero-sheet__text,.hero-sheet__panel .btn{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.hero-sheet.is-open .hero-sheet__head{opacity:1;transform:none;transition-delay:.14s}
.hero-sheet.is-open .hero-sheet__text{opacity:1;transform:none;transition-delay:.24s}
.hero-sheet.is-open .hero-sheet__panel .btn{opacity:1;transform:none;transition-delay:.34s}
body.sheet-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .hero-sheet__overlay,.hero-sheet__panel,.hero-sheet__head,.hero-sheet__text,.hero-sheet__panel .btn{transition:none}
  .hero-sheet__head,.hero-sheet__text,.hero-sheet__panel .btn{opacity:1;transform:none}
  .hero-sheet__mark{animation:none}
}