/* COMM-DZ landing produit — extrait FIGÉ preview-landing-produit.html (2026-07-26) — ne pas modifier sans OK */
html[data-model="1"] {
      --ink:#030b12; --deep:#071824; --panel:rgba(14,36,52,.72); --panel-solid:#0e2434;
      --line:rgba(120,200,220,.22); --mute:#93b4c4; --text:#eef7fb;
      --a1:#f0c14b; --a2:#3de0ff; --a3:#2dffc0; --danger:#ff5d6c; --ok:#3dff9a;
      --font-display:"Space Grotesk",sans-serif; --font-body:"Sora",sans-serif; --r:14px;
      --m5-metal:linear-gradient(120deg,var(--a1),var(--a2)); --m5-stone:linear-gradient(160deg,#030b12,#071824);
      --m5-gloss:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);
    }
    html[data-model="2"] {
      --ink:#0c0706; --deep:#1a0e0c; --panel:rgba(42,22,18,.78); --panel-solid:#2a1612;
      --line:rgba(255,160,110,.22); --mute:#c4a090; --text:#fff4ec;
      --a1:#ff8a4c; --a2:#ffd08a; --a3:#ff5e5b; --danger:#ff4d6d; --ok:#7dffb3;
      --font-display:"Fraunces",serif; --font-body:"DM Sans",sans-serif; --r:14px;
      --m5-metal:linear-gradient(145deg,#ffd4a8,var(--a1),#e85a2a); --m5-stone:linear-gradient(160deg,#0c0706,#1a0e0c);
      --m5-gloss:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
    }
    html[data-model="3"] {
      --ink:#0b1220; --deep:#152238; --panel:rgba(255,255,255,.16); --panel-solid:rgba(30,48,78,.75);
      --line:rgba(255,255,255,.4); --mute:rgba(230,240,255,.75); --text:#f7fbff;
      --a1:#7cf7ff; --a2:#ff7ad9; --a3:#b8ff6a; --danger:#ff5e7a; --ok:#6dffa8;
      --font-display:"Nunito",sans-serif; --font-body:"Nunito",sans-serif; --r:26px;
      --m5-metal:linear-gradient(140deg,#6b2cff,#ff7ad9 55%,#7cf7ff); --m5-stone:linear-gradient(165deg,#1a2a4a,#0d1528);
      --m5-gloss:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
    }
    html[data-model="4"] {
      --ink:#f4f7fb; --deep:#e8eef6; --panel:#fff; --panel-solid:#fff;
      --line:rgba(20,40,70,.12); --mute:#5a6d82; --text:#152033;
      --a1:#0d9488; --a2:#f59e0b; --a3:#0284c7; --danger:#e11d48; --ok:#059669;
      --font-display:"Literata",serif; --font-body:"Figtree",sans-serif; --r:18px;
      --m5-metal:linear-gradient(160deg,#0d9488,#0284c7); --m5-stone:linear-gradient(180deg,#f7fafc,#e6eef5);
      --m5-gloss:none;
    }
    html[data-model="5"] {
      --ink:#0a0908; --deep:#14110e; --panel:rgba(28,24,20,.88); --panel-solid:#1c1814;
      --line:rgba(212,175,110,.28); --mute:#b8a990; --text:#f5efe4;
      --a1:#c9a227; --a2:#e8d5a3; --a3:#8a7a5c; --danger:#e35d5d; --ok:#6dbf8a;
      --font-display:"Outfit",sans-serif; --font-body:"Sora",sans-serif; --r:16px;
      --m5-metal:linear-gradient(135deg,#8a6a2a 0%,#e8d5a3 22%,#c9a227 45%,#f3e6c0 58%,#9a7420 78%,#d4af37 100%);
      --m5-stone:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 40%),
        linear-gradient(160deg,#2a241c,#14110e 55%,#1f1a14);
      --m5-diamond:conic-gradient(from 210deg,#fff8e7,#c9a227,#fff,#e8d5a3,#8a6a2a,#fff8e7);
      --m5-gloss:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.22) 48%,transparent 62%);
    }
    html[data-model="5"][data-m5="jade"] {
      --ink:#0a0e0d; --deep:#121918; --panel:rgba(22,30,28,.9); --panel-solid:#161e1c;
      --line:rgba(180,200,195,.28); --mute:#9eb0aa; --text:#eef6f3;
      --a1:#2dd4a8; --a2:#c5d0cc; --a3:#5eead4; --danger:#f07178; --ok:#34d399;
      --m5-metal:linear-gradient(135deg,#8a9490 0%,#e8eeec 25%,#b8c4c0 48%,#f4f7f6 58%,#7a8582 80%,#d0d8d5 100%);
      --m5-stone:radial-gradient(circle at 70% 20%,rgba(45,212,168,.12),transparent 42%),
        linear-gradient(165deg,#1a2422,#0f1413 55%,#16201e);
      --m5-diamond:conic-gradient(from 200deg,#e8fffa,#2dd4a8,#fff,#a7f3d0,#5eead4,#e8fffa);
      --m5-gloss:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
    }
    * { box-sizing:border-box; }
    html, body { margin:0; min-height:100%; }
    html[data-page="product"] body {
      font-family:var(--font-body); color:var(--text);
      background:var(--m5-stone);
    }
    html[data-page="product"][data-model="5"] body::before {
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.32;
      background:
        radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.5),transparent),
        radial-gradient(1px 1px at 70% 40%,rgba(255,255,255,.28),transparent);
    }
    /* Atmosphères modèles 1–4 */
    html[data-page="product"][data-model="1"] body::after {
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(ellipse 55% 40% at 15% 10%, rgba(61,224,255,.18), transparent 55%),
        radial-gradient(ellipse 40% 35% at 90% 80%, rgba(45,255,192,.12), transparent 50%);
    }
    html[data-page="product"][data-model="2"] body::after {
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(ellipse 50% 45% at 80% 0%, rgba(255,138,76,.22), transparent 55%),
        radial-gradient(ellipse 45% 40% at 10% 100%, rgba(232,90,42,.14), transparent 50%);
    }
    html[data-page="product"][data-model="3"] body::after {
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(ellipse 60% 50% at 30% 20%, rgba(124,247,255,.16), transparent 55%),
        radial-gradient(ellipse 50% 45% at 85% 70%, rgba(255,122,217,.14), transparent 50%);
    }
    html[data-page="product"][data-model="4"] body::after {
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(245,158,11,.12), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 80%, rgba(13,148,136,.08), transparent 50%);
    }
    .shell {
      position:relative; z-index:2; min-height:100vh;
      display:flex; flex-direction:column;
      padding:1rem clamp(1rem,3vw,2.5rem) 0;
      --hero-rail:5.1rem;
      --hero-gap:clamp(1.2rem,3vw,2.5rem);
      --hero-mid:minmax(0,1.2fr);
      --hero-side:minmax(0,1fr);
    }
    .devbar { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
    .chip {
      appearance:none; cursor:pointer; border:1px solid var(--line);
      background:rgba(0,0,0,.25); color:var(--mute); font:inherit; font-size:.78rem; font-weight:700;
      padding:.45rem .75rem; border-radius:999px; text-decoration:none;
    }
    html[data-model="4"] .chip { background:#fff; }
    .chip.is-on {
      color:var(--text); border-color:var(--a1);
      background:color-mix(in srgb,var(--a1) 18%, transparent);
    }
    html[data-model="5"] .m5-only { display:inline-flex; }
    .m5-only { display:none; }

    /* Hero : slides | image | texte — dock prix/CTA ancré en bas + ligne */
    .hero-product {
      flex:1; display:grid;
      grid-template-columns:var(--hero-rail) var(--hero-mid) var(--hero-side);
      column-gap:var(--hero-gap);
      row-gap:1rem;
      align-items:stretch;
      min-height:min(78vh,46rem); padding:1rem 0 2rem;
    }
    @media (max-width:980px) {
      .hero-product {
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;
        min-height:auto;
        gap:1rem;
      }
      .hero-thumbs { flex-direction:row; height:auto; max-height:none; }
      .hero-thumb { flex:1; min-height:4.25rem; }
    }
    .hero-thumbs {
      display:flex; flex-direction:column; gap:.55rem;
      min-height:0; align-self:stretch;
    }
    .hero-thumbs[hidden] { display:none !important; }
    .hero-product:has(.hero-thumbs[hidden]) {
      grid-template-columns:var(--hero-mid) var(--hero-side);
    }
    .hero-visual {
      position:relative; min-height:clamp(22rem,58vh,36rem);
      height:100%;
      border-radius:calc(var(--r) + 10px); overflow:hidden;
      border:1px solid var(--line);
      background:
        radial-gradient(ellipse 70% 60% at 40% 35%, color-mix(in srgb,var(--a1) 35%, transparent), transparent 60%),
        var(--panel-solid);
      box-shadow:0 24px 60px rgba(0,0,0,.35);
    }
    /* Bloc texte : haut variable · bas figé (prix/CTA/trust) */
    .hero-copy {
      container-type:inline-size;
      container-name:herocopy;
      max-width:100%;
      width:100%;
      min-height:0;
      height:100%;
      display:flex;
      flex-direction:column;
      align-items:stretch;
      padding-top:.1rem;
    }
    .hero-copy-main {
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:clamp(.65rem, 2.8cqi, 1.05rem);
    }
    .hero-copy-main .pill {
      align-self:flex-start;
      margin:0;
      font-size:clamp(.68rem, 2.4cqi, .78rem);
    }
    .hero-copy-main .brand {
      margin:0;
      font-size:clamp(1.65rem, 9.5cqi, 3.1rem);
      line-height:1.08;
      max-width:100%;
      overflow-wrap:anywhere;
    }
    .hero-copy-main .lede {
      margin:0;
      width:100%;
      max-width:42ch;
      font-size:clamp(.92rem, 3.6cqi, 1.14rem);
      line-height:1.55;
      overflow-wrap:break-word;
      min-height:calc(1.55em * 2); /* place réservée · 2 lignes */
    }
    .hero-copy-main .lede.is-empty {
      visibility:hidden;
    }
    .hero-copy-main .lede[hidden] { display:none !important; }
    .hero-copy-dock {
      flex:0 0 auto;
      margin-top:auto;
      padding-top:clamp(1rem, 3cqi, 1.35rem);
      border-top:1px solid var(--line);
      display:flex;
      flex-direction:column;
      gap:clamp(.65rem, 2.5cqi, .95rem);
    }
    .hero-copy-dock .price-row { margin:0; }
    .hero-copy-dock .price {
      font-size:clamp(1.55rem, 7.5cqi, 2.55rem);
      line-height:1.1;
      margin:0;
    }
    .hero-copy-dock .price-note {
      font-size:clamp(.78rem, 2.8cqi, .9rem);
      line-height:1.35;
    }
    .hero-copy-dock .cta-row { margin:0; }
    .hero-copy-dock .cta-row .btn {
      padding:clamp(.7rem, 2.2cqi, .9rem) clamp(1.05rem, 3.5cqi, 1.4rem);
      font-size:clamp(.9rem, 3.2cqi, 1.02rem);
    }
    .hero-copy-dock .trust {
      margin:0;
      font-size:clamp(.75rem, 2.6cqi, .84rem);
      line-height:1.4;
    }
    @supports not (font-size:1cqi) {
      .hero-copy-main .brand { font-size:clamp(1.7rem, 4vw, 3.1rem); }
      .hero-copy-main .lede { font-size:clamp(.95rem, 1.8vw, 1.14rem); }
      .hero-copy-dock .price { font-size:clamp(1.6rem, 3.2vw, 2.55rem); }
    }
    @media (max-width:560px) {
      .hero-visual { min-height:18rem; height:auto; }
    }
    .hero-visual::before {
      content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
      background:var(--m5-gloss);
      mix-blend-mode:soft-light;
    }
    .hero-visual::after {
      content:""; position:absolute; inset:12% 10%;
      border-radius:18px; background:var(--m5-metal);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 20px 50px rgba(0,0,0,.4);
      transform:rotate(-6deg);
      transition:transform .45s var(--ease, ease), filter .45s ease, inset .35s ease;
    }
    .hero-visual[data-shot="1"]::after { transform:rotate(-2deg) scale(1.02); filter:hue-rotate(25deg); }
    .hero-visual[data-shot="2"]::after { transform:rotate(4deg) scale(.96); filter:hue-rotate(55deg) saturate(1.1); }
    .hero-visual[data-shot="3"]::after { transform:rotate(-10deg) scale(1.05); filter:hue-rotate(110deg); }
    .hero-visual[data-shot="4"]::after { transform:rotate(7deg) scale(.98); filter:hue-rotate(200deg) brightness(1.05); }

    .hero-thumb[hidden] { display:none !important; }
    .hero-thumb {
      appearance:none; cursor:pointer; flex:1; min-height:0;
      position:relative; overflow:hidden;
      border:1px solid var(--line);
      border-radius:calc(var(--r) - 2px);
      background:
        radial-gradient(ellipse 80% 70% at 40% 35%, color-mix(in srgb,var(--a1) 28%, transparent), transparent 60%),
        var(--panel-solid);
      padding:0;
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .hero-thumb::after {
      content:""; position:absolute; inset:18% 10%;
      border-radius:8px; background:var(--m5-metal);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
      transform:rotate(-6deg) scale(.92);
    }
    .hero-thumb[data-shot="1"]::after { transform:rotate(-2deg) scale(.92); filter:hue-rotate(25deg); }
    .hero-thumb[data-shot="2"]::after { transform:rotate(4deg) scale(.88); filter:hue-rotate(55deg); }
    .hero-thumb[data-shot="3"]::after { transform:rotate(-10deg) scale(.95); filter:hue-rotate(110deg); }
    .hero-thumb[data-shot="4"]::after { transform:rotate(7deg) scale(.9); filter:hue-rotate(200deg); }
    .hero-thumb:hover {
      border-color:var(--a1);
      transform:translateY(-1px);
    }
    .hero-thumb.is-on {
      border-color:var(--a1);
      box-shadow:0 0 0 2px color-mix(in srgb,var(--a1) 45%, transparent);
    }
    html[data-model="1"] .hero-thumb.is-on {
      box-shadow:0 0 16px color-mix(in srgb,var(--a2) 40%, transparent);
    }
    html[data-model="3"] .hero-thumb {
      border-radius:18px;
      background:rgba(255,255,255,.12);
      backdrop-filter:blur(10px);
    }
    html[data-model="4"] .hero-thumb {
      background:linear-gradient(165deg,#fffbeb,#fff);
      border-top:2px solid #f59e0b;
      box-shadow:0 6px 16px rgba(21,32,51,.06);
    }
    html[data-model="4"] .hero-thumb.is-on {
      border-color:#0d9488;
      box-shadow:0 0 0 2px rgba(13,148,136,.35);
    }
    html[data-model="5"] .hero-thumb {
      background:var(--m5-stone);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }
    /* 1 Neon Frost */
    html[data-model="1"] .hero-visual {
      box-shadow:0 0 0 1px color-mix(in srgb,var(--a2) 35%, transparent),
        0 24px 60px rgba(0,0,0,.4), 0 0 48px color-mix(in srgb,var(--a2) 22%, transparent);
    }
    html[data-model="1"] .hero-visual::after {
      border-radius:12px; transform:rotate(-4deg);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 28px color-mix(in srgb,var(--a2) 40%, transparent);
    }
    /* 2 Ember Noir */
    html[data-model="2"] .hero-visual {
      box-shadow:0 28px 70px rgba(80,20,0,.45), inset 0 -40px 60px color-mix(in srgb,var(--a1) 12%, transparent);
    }
    html[data-model="2"] .hero-visual::after {
      border-radius:10px; transform:rotate(-8deg) scale(1.02);
    }
    /* 3 Aero Sur */
    html[data-model="3"] .hero-visual {
      background:
        radial-gradient(ellipse 70% 60% at 40% 35%, color-mix(in srgb,var(--a1) 28%, transparent), transparent 60%),
        rgba(255,255,255,.12);
      backdrop-filter:blur(18px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 24px 50px rgba(0,0,0,.28);
      border-radius:calc(var(--r) + 14px);
    }
    html[data-model="3"] .hero-visual::after {
      border-radius:28px; transform:rotate(-3deg);
    }
    /* 4 Soleil Clair */
    html[data-model="4"] .hero-visual {
      background:linear-gradient(165deg,#fffbeb,#fff 45%,#eef6f8);
      box-shadow:0 18px 48px rgba(21,32,51,.1);
      border-top:3px solid #f59e0b;
    }
    html[data-model="4"] .hero-visual::before { display:none; }
    html[data-model="4"] .hero-visual::after {
      border-radius:14px; transform:rotate(-5deg);
      box-shadow:0 16px 36px rgba(13,148,136,.25);
    }
    /* 5 Or / Jade — pierre + diamant */
    html[data-model="5"] .hero-visual {
      background:
        radial-gradient(ellipse 70% 60% at 40% 35%, color-mix(in srgb,var(--a1) 28%, transparent), transparent 60%),
        var(--m5-stone);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.45);
    }
    html[data-model="5"] .hero-visual::after {
      background:
        var(--m5-gloss),
        var(--m5-diamond);
      background-blend-mode:overlay, normal;
      animation:heroGem 7s linear infinite;
    }
    @keyframes heroGem {
      from { filter:hue-rotate(0deg); }
      to { filter:hue-rotate(18deg); }
    }
    .pill {
      display:inline-flex; gap:.35rem; align-items:center; padding:.28rem .7rem; border-radius:999px;
      font-size:.72rem; border:1px solid var(--line); color:var(--mute); margin-bottom:.7rem;
    }
    .pill strong { color:var(--a2); }
    .brand {
      font-family:var(--font-display); font-weight:800;
      font-size:clamp(2.2rem,5.5vw,3.6rem); margin:0 0 .55rem; line-height:1.05;
    }
    .brand em {
      font-style:normal; background:var(--m5-metal);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    html[data-model="4"] .brand em {
      background:none; -webkit-background-clip:unset; background-clip:unset; color:#0d9488;
    }
    .lede {
      margin:0 0 1.25rem; color:var(--mute); font-size:clamp(1rem,2vw,1.15rem);
      line-height:1.5;
    }
    html[data-model="1"] .lede { text-shadow:0 0 24px color-mix(in srgb,var(--a2) 25%, transparent); }
    .price-row {
      display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
      margin-bottom:1.35rem;
    }
    .price {
      font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); font-weight:800; margin:0;
    }
    .price .n {
      background:var(--m5-metal); -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    html[data-model="4"] .price .n {
      background:none; -webkit-background-clip:unset; background-clip:unset; color:#0d9488;
    }
    .price-note { color:var(--mute); font-size:.88rem; }
    .cta-row { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
    .btn {
      appearance:none; cursor:pointer; border:0; font:inherit; font-weight:750;
      padding:.85rem 1.35rem; border-radius:12px; position:relative; overflow:hidden;
      text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
    }
    .btn-primary {
      color:#041018; background:var(--a2);
      border:1px solid transparent;
      box-shadow:0 10px 28px rgba(0,0,0,.25);
      font-size:1.02rem;
    }
    html[data-model="1"] .btn-primary {
      background:linear-gradient(120deg,var(--a1),var(--a2));
      box-shadow:0 0 24px color-mix(in srgb,var(--a2) 35%, transparent), 0 10px 28px rgba(0,0,0,.3);
    }
    html[data-model="2"] .btn-primary {
      background:linear-gradient(145deg,#ffd4a8,var(--a1),#e85a2a);
      box-shadow:0 12px 32px rgba(180,50,10,.35);
    }
    html[data-model="3"] .btn-primary {
      background:linear-gradient(140deg,#6b2cff,#ff7ad9 55%,#7cf7ff);
      border-radius:999px;
      box-shadow:0 10px 28px rgba(80,40,160,.35);
    }
    html[data-model="4"] .btn-primary {
      color:#fff; background:#0d9488; border-color:#0d9488; border-radius:8px;
      box-shadow:0 10px 24px rgba(13,148,136,.28);
    }
    html[data-model="5"] .btn-primary {
      color:#1a1408; background:var(--m5-metal);
      border:1px solid rgba(255,255,255,.35);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 28px rgba(0,0,0,.3);
    }
    html[data-model="5"][data-m5="jade"] .btn-primary { color:#0a1210; }
    html[data-model="5"] .btn-primary::after {
      content:""; position:absolute; inset:0; background:var(--m5-gloss); pointer-events:none;
    }
    .btn-ghost {
      border:1px solid var(--line); color:var(--text); background:transparent;
    }
    html[data-model="3"] .btn-ghost { border-radius:999px; background:rgba(255,255,255,.08); }
    html[data-model="4"] .btn-ghost { border-radius:8px; background:#fff; }
    html[data-model="5"] .btn-ghost {
      background:rgba(255,255,255,.03);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }
    .trust {
      margin-top:1.1rem; font-size:.82rem; color:var(--mute);
    }

    /* ——— Textes & animations dédiées par thème ——— */
    :root {
      --ease: cubic-bezier(.16,1,.3,1);
      --ease-spring: cubic-bezier(.34,1.4,.64,1);
    }
    .tw {
      display:inline-block; white-space:pre;
      opacity:0; transform:translateY(.55em);
      animation:twUp .7s var(--ease) forwards;
      animation-delay:calc(var(--i, 0) * 55ms + var(--base, 0ms));
    }
    .brand .tw em {
      font-style:normal; background:var(--m5-metal);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    html[data-model="4"] .brand .tw em {
      background:none; -webkit-background-clip:unset; background-clip:unset; color:#0d9488;
    }
    @keyframes twUp {
      to { opacity:1; transform:none; }
    }

    .hero-product.is-enter-1 .hero-visual { animation:frostIn .75s var(--ease) both; }
    .hero-product.is-enter-1 .hero-copy { animation:frostIn .7s var(--ease) .08s both; }
    .hero-product.is-enter-1 .tw {
      animation-name:frostWord;
      filter:blur(8px);
    }
    @keyframes frostWord {
      from { opacity:0; filter:blur(10px); transform:translateY(.4em) scale(.98); }
      to { opacity:1; filter:none; transform:none; }
    }
    @keyframes frostIn {
      from { opacity:0; filter:blur(8px); transform:scale(.96); }
      to { opacity:1; filter:none; transform:none; }
    }
    html[data-model="1"] .brand {
      text-shadow:0 0 28px color-mix(in srgb,var(--a2) 35%, transparent);
    }
    html[data-model="1"] .brand .tw:last-child,
    html[data-model="1"] .brand em {
      animation:neonPulse 2.4s ease-in-out infinite;
    }
    @keyframes neonPulse {
      0%,100% { text-shadow:0 0 12px color-mix(in srgb,var(--a2) 40%, transparent); }
      50% { text-shadow:0 0 28px color-mix(in srgb,var(--a2) 70%, transparent), 0 0 48px color-mix(in srgb,var(--a1) 35%, transparent); }
    }
    html[data-model="1"] .price .n {
      animation:neonPulse 2.8s ease-in-out infinite;
    }
    html[data-model="1"] .btn-primary {
      animation:neonBtnGlow 2.2s ease-in-out infinite;
    }
    @keyframes neonBtnGlow {
      0%,100% { box-shadow:0 0 18px color-mix(in srgb,var(--a2) 30%, transparent), 0 10px 28px rgba(0,0,0,.3); }
      50% { box-shadow:0 0 36px color-mix(in srgb,var(--a2) 55%, transparent), 0 10px 28px rgba(0,0,0,.3); }
    }

    .hero-product.is-enter-2 .hero-visual { animation:emberIn .8s var(--ease-spring) both; }
    .hero-product.is-enter-2 .hero-copy { animation:emberIn .75s var(--ease-spring) .06s both; }
    .hero-product.is-enter-2 .tw { animation-name:emberWord; }
    @keyframes emberWord {
      from { opacity:0; transform:translateY(1.1em) scale(.94); }
      to { opacity:1; transform:none; }
    }
    @keyframes emberIn {
      from { opacity:0; transform:translateY(24px) scale(.94); }
      to { opacity:1; transform:none; }
    }
    html[data-model="2"] .brand em {
      animation:emberFlicker 3s ease-in-out infinite;
    }
    @keyframes emberFlicker {
      0%,100% { filter:brightness(1); }
      40% { filter:brightness(1.15); }
      55% { filter:brightness(.92); }
      70% { filter:brightness(1.08); }
    }
    html[data-model="2"] .btn-primary {
      animation:emberRise 2.6s ease-in-out infinite;
    }
    @keyframes emberRise {
      0%,100% { transform:translateY(0); }
      50% { transform:translateY(-3px); }
    }

    .hero-product.is-enter-3 .hero-visual { animation:aeroIn .85s var(--ease-spring) both; }
    .hero-product.is-enter-3 .hero-copy { animation:aeroIn .8s var(--ease-spring) .1s both; perspective:800px; }
    .hero-product.is-enter-3 .tw { animation-name:aeroWord; }
    @keyframes aeroWord {
      from { opacity:0; transform:translateY(.6em) rotateX(18deg); }
      to { opacity:1; transform:none; }
    }
    @keyframes aeroIn {
      from { opacity:0; transform:scale(.9) rotateX(8deg); }
      to { opacity:1; transform:none; }
    }
    html[data-model="3"] .brand {
      letter-spacing:.01em;
    }
    html[data-model="3"] .btn-primary {
      animation:aeroFloat 3s ease-in-out infinite;
    }
    @keyframes aeroFloat {
      0%,100% { transform:translateY(0); }
      50% { transform:translateY(-5px); }
    }
    html[data-model="3"] .lede {
      animation:aeroFade 1s var(--ease) .35s both;
    }
    @keyframes aeroFade {
      from { opacity:0; letter-spacing:.04em; }
      to { opacity:1; letter-spacing:normal; }
    }

    .hero-product.is-enter-4 .hero-visual { animation:soleilIn .55s ease both; }
    .hero-product.is-enter-4 .hero-copy { animation:none; opacity:1; }
    .hero-product.is-enter-4 .tw { animation:none; opacity:1; transform:none; }
    /* Soleil = tiroir mots (comme accueil), pas le simple slide */
    html[data-model="4"] .tw,
    html[data-model="4"] .pill,
    html[data-model="4"] .lede,
    html[data-model="4"] .price-row,
    html[data-model="4"] .cta-row,
    html[data-model="4"] .trust,
    html[data-model="4"] .specs tr,
    html[data-model="4"] .desc-long p {
      opacity:1 !important;
      transform:none !important;
      animation:none !important;
      filter:none !important;
    }
    html[data-model="4"] .brand { animation:none; }
    .drawer-page-word { display:inline-block; white-space:pre; }
    .drawer-page-word.is-hiding { visibility:hidden !important; }
    #drawer-fly-layer {
      position:fixed; inset:0; z-index:95; pointer-events:none;
      background:rgba(15,23,42,.45);
    }
    #drawer-fly-layer .fly-word {
      position:fixed; left:0; top:0; margin:0; z-index:96; white-space:pre;
      color:#fff; font-weight:700; text-shadow:0 2px 14px rgba(0,0,0,.35);
    }
    .drawer-hub {
      position:fixed; left:50%; top:50%; z-index:97; width:18px; height:18px;
      margin:-9px 0 0 -9px; border-radius:50%; opacity:0; background:#0d9488; pointer-events:none;
    }
    .drawer-hub.on { opacity:1; }
    body.drawer-busy .shell { pointer-events:none; }
    body.drawer-busy #anim-root .hero-visual,
    body.drawer-busy #anim-root .hero-thumbs,
    body.drawer-busy #anim-root .product-block,
    body.drawer-busy #anim-root .product-slider,
    body.drawer-busy #anim-root .site-footer {
      opacity:0;
    }
    @keyframes soleilIn {
      from { opacity:0; transform:translateY(12px); }
      to { opacity:1; transform:none; }
    }
    html[data-model="4"] .brand {
      animation:soleilSoft 4s ease-in-out infinite;
    }
    @keyframes soleilSoft {
      0%,100% { opacity:1; }
      50% { opacity:.92; }
    }
    html[data-model="4"] .price .n {
      transition:color .25s ease;
    }

    .hero-product.is-enter-5 .hero-visual { animation:wellShell 1.05s var(--ease) both; }
    .hero-product.is-enter-5 .hero-copy { animation:shellFall .9s var(--ease-spring) .05s both; }
    .hero-product.is-enter-5 .tw { animation-name:metalWord; }
    @keyframes metalWord {
      from { opacity:0; transform:translateY(.7em); filter:blur(4px); }
      to { opacity:1; transform:none; filter:none; }
    }
    @keyframes wellShell {
      0% { transform:scale(.35); opacity:0; filter:blur(6px); }
      55% { transform:scale(1.03); opacity:1; filter:blur(0); }
      100% { transform:none; opacity:1; }
    }
    @keyframes shellFall {
      from { transform:translateY(-28px); opacity:0; }
      to { transform:none; opacity:1; }
    }
    html[data-model="5"] .brand em,
    html[data-model="5"] .price .n,
    html[data-model="5"] .boost-link {
      background-size:220% 100%;
      animation:metalShimmer 4.5s ease-in-out infinite;
    }
    @keyframes metalShimmer {
      0%,100% { background-position:0% 50%; }
      50% { background-position:100% 50%; }
    }
    html[data-model="5"] .btn-primary {
      animation:floatBob 2.8s ease-in-out infinite;
    }
    @keyframes floatBob {
      0%,100% { transform:translateY(0); }
      50% { transform:translateY(-4px); }
    }
    html[data-model="5"] .btn-primary::before {
      content:""; position:absolute; inset:0; z-index:1;
      background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
      transform:translateX(-120%);
      animation:glossSweep 3.2s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes glossSweep {
      0%,55% { transform:translateX(-120%); }
      75%,100% { transform:translateX(120%); }
    }

    .pill, .price-row, .cta-row, .trust {
      opacity:0;
      animation:twUp .65s var(--ease) forwards;
    }
    .hero-product.is-enter-1 .pill,
    .hero-product.is-enter-2 .pill,
    .hero-product.is-enter-3 .pill,
    .hero-product.is-enter-4 .pill,
    .hero-product.is-enter-5 .pill { animation-delay:.2s; }
    .hero-product .lede { animation:twUp .7s var(--ease) .28s forwards; opacity:0; }
    .hero-product .price-row { animation-delay:.38s; }
    .hero-product .cta-row { animation-delay:.48s; }
    .hero-product .trust { animation-delay:.58s; }

    html[data-model="1"] .product-block { animation-name:frostIn; }
    html[data-model="2"] .product-block { animation-name:emberIn; }
    html[data-model="3"] .product-block { animation-name:aeroIn; }
    html[data-model="4"] .product-block { animation-name:soleilIn; }
    html[data-model="5"] .product-block { animation-name:wellShell; animation-duration:.95s; }

    .specs tr {
      opacity:0;
      animation:twUp .45s var(--ease) forwards;
      animation-delay:calc(var(--si, 0) * 70ms + .15s);
    }
    .desc-long p {
      opacity:0;
      animation:twUp .55s var(--ease) forwards;
      animation-delay:calc(var(--pi, 0) * 90ms + .12s);
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
      }
      /* Galerie produit : garder le fondu croisé */
      .slider-layer {
        transition-duration:.9s !important;
      }
      .tw, .pill, .lede, .price-row, .cta-row, .trust, .specs tr, .desc-long p {
        opacity:1 !important; transform:none !important; filter:none !important;
      }
    }

    /* Même grille que le hero — ligne A image↔descr · ligne B texte↔sliders */
    .product-body {
      display:grid;
      grid-template-columns:var(--hero-rail) var(--hero-mid) var(--hero-side);
      column-gap:var(--hero-gap);
      row-gap:1.25rem;
      align-items:stretch;
      padding:0 0 2.25rem;
      max-width:100%;
      width:100%;
    }
    .product-rail-spacer { min-width:0; pointer-events:none; }
    .product-body:has(#product-slider[hidden]) {
      grid-template-columns:var(--hero-rail) var(--hero-mid);
    }
    .product-body:has(.hero-thumbs[hidden]),
    .hero-product:has(.hero-thumbs[hidden]) ~ .product-body {
      grid-template-columns:var(--hero-mid) var(--hero-side);
    }
    .hero-product:has(.hero-thumbs[hidden]) ~ .product-body .product-rail-spacer,
    .product-body:has(#product-slider[hidden]) .product-rail-spacer { display:none; }
    @media (max-width:860px) {
      .product-body {
        grid-template-columns:1fr;
        align-items:start;
      }
      .product-rail-spacer { display:none; }
      .product-body:has(#product-slider[hidden]) {
        grid-template-columns:1fr;
        max-width:min(58%, 100%);
      }
      .product-slider {
        min-height:16rem;
        aspect-ratio:4 / 3;
        max-width:100%;
      }
    }
    .product-body:has(#product-texts[data-empty="1"]) {
      grid-template-columns:var(--hero-rail) var(--hero-mid) var(--hero-side);
    }
    .product-body:has(#product-texts[data-empty="1"]) #product-slider:not([hidden]) {
      grid-column:3;
    }
    .product-texts {
      display:grid; gap:1.5rem; min-width:0;
      align-content:start;
      width:100%;
    }
    .product-texts:empty,
    .product-texts[data-empty="1"] { display:none; }
    .product-body[hidden],
    .product-block[hidden],
    .product-slider[hidden],
    .btn-more[hidden] { display:none !important; }
    .product-block {
      position:relative; overflow:hidden;
      border:1px solid var(--line);
      border-radius:calc(var(--r) + 4px);
      background:var(--panel);
      padding:1.15rem 1.25rem 1.25rem;
      animation:blockIn .55s ease both;
    }
    .product-block:nth-child(2) { animation-delay:.08s; }
    @keyframes blockIn {
      from { opacity:0; transform:translateY(12px); }
      to { opacity:1; transform:none; }
    }
    /* 1 Neon */
    html[data-model="1"] .product-block {
      box-shadow:0 0 0 1px color-mix(in srgb,var(--a2) 18%, transparent),
        0 16px 40px rgba(0,0,0,.28);
    }
    html[data-model="1"] .product-block::before {
      content:""; position:absolute; top:0; left:0; right:0; height:2px;
      background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));
    }
    /* 2 Ember */
    html[data-model="2"] .product-block {
      box-shadow:0 18px 40px rgba(60,15,5,.35);
      background:linear-gradient(180deg, rgba(255,138,76,.08), transparent 35%), var(--panel);
    }
    html[data-model="2"] .product-block::before {
      content:""; position:absolute; inset:auto 0 0 0; height:40%;
      background:radial-gradient(ellipse at 50% 100%, color-mix(in srgb,var(--a1) 18%, transparent), transparent 70%);
      pointer-events:none;
    }
    /* 3 Aero glass */
    html[data-model="3"] .product-block {
      backdrop-filter:blur(20px);
      background:rgba(255,255,255,.14);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 16px 40px rgba(0,0,0,.22);
      border-radius:calc(var(--r) + 8px);
    }
    /* 4 Soleil fiche */
    html[data-model="4"] .product-block {
      background:#fff;
      box-shadow:0 12px 36px rgba(21,32,51,.07);
      border-top:3px solid #f59e0b;
      background-image:linear-gradient(180deg,#fffbeb,#fff 40%);
    }
    html[data-model="4"] #block-specs {
      border-top-color:#0d9488;
      background-image:linear-gradient(180deg,#f0fdfa,#fff 42%);
    }
    /* 5 Pierre / gloss */
    html[data-model="5"] .product-block {
      background:var(--panel);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.35);
    }
    html[data-model="5"] .product-block::after {
      content:""; position:absolute; inset:0; pointer-events:none;
      background:var(--m5-gloss); opacity:.55;
    }
    html[data-model="5"] .product-block h2 {
      background:var(--m5-metal);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      letter-spacing:.08em;
    }

    /* Slider images — galerie pro, fondu croisé */
    .product-slider {
      position:relative;
      border:1px solid var(--line);
      border-radius:calc(var(--r) + 4px);
      background:var(--panel-solid);
      overflow:hidden;
      width:100%;
      align-self:stretch;
      display:grid;
      grid-template-rows:1fr auto;
      box-shadow:0 12px 32px rgba(0,0,0,.22);
    }
    html[data-model="3"] .product-slider {
      backdrop-filter:blur(20px);
      background:rgba(255,255,255,.14);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 32px rgba(0,0,0,.18);
    }
    html[data-model="4"] .product-slider {
      background:#fff;
      border-top:3px solid #f59e0b;
      box-shadow:0 10px 28px rgba(21,32,51,.08);
    }
    html[data-model="5"] .product-slider {
      background:var(--panel-solid);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 36px rgba(0,0,0,.32);
    }
    html[data-model="1"] .product-slider {
      box-shadow:0 0 0 1px color-mix(in srgb,var(--a2) 18%, transparent), 0 12px 32px rgba(0,0,0,.25);
    }
    .slider-stage {
      position:relative;
      width:100%;
      height:100%;
      min-height:12rem;
    }
    .slider-layer {
      position:absolute; inset:0;
      opacity:0;
      z-index:1;
      pointer-events:none;
      transition:opacity .9s ease;
      will-change:opacity;
      /* photo plein cadre — pas de tilt */
      background:
        linear-gradient(145deg,
          color-mix(in srgb, var(--a1) 55%, var(--panel-solid)) 0%,
          color-mix(in srgb, var(--a2) 40%, var(--panel-solid)) 55%,
          color-mix(in srgb, var(--a3) 30%, var(--panel-solid)) 100%);
      background-size:cover;
      background-position:center;
    }
    .slider-layer.is-show { opacity:1; z-index:2; }
    .slider-layer.is-hide { opacity:0; z-index:1; }
    .slider-layer[data-shot="1"] {
      background:linear-gradient(160deg,
        color-mix(in srgb, var(--a2) 50%, #1a2a40),
        color-mix(in srgb, var(--a1) 35%, #0e1824));
    }
    .slider-layer[data-shot="2"] {
      background:linear-gradient(200deg,
        color-mix(in srgb, var(--a3) 45%, #2a1810),
        color-mix(in srgb, var(--a1) 40%, #1a0e0c));
    }
    .slider-layer[data-shot="3"] {
      background:linear-gradient(125deg,
        color-mix(in srgb, var(--a1) 40%, #1a1530),
        color-mix(in srgb, var(--a2) 55%, #0d1528));
    }
    .slider-layer[data-shot="4"] {
      background:linear-gradient(175deg,
        color-mix(in srgb, var(--a2) 35%, #1c1814),
        color-mix(in srgb, var(--a1) 50%, #14110e));
    }
    html[data-model="4"] .slider-layer {
      background:linear-gradient(145deg, #99f6e4, #5eead4 40%, #0d9488 100%);
    }
    html[data-model="4"] .slider-layer[data-shot="1"] {
      background:linear-gradient(160deg, #fde68a, #f59e0b 55%, #d97706);
    }
    html[data-model="4"] .slider-layer[data-shot="2"] {
      background:linear-gradient(200deg, #bae6fd, #0284c7 60%, #0369a1);
    }
    html[data-model="4"] .slider-layer[data-shot="3"] {
      background:linear-gradient(125deg, #fecdd3, #e11d48 55%, #be123c);
    }
    html[data-model="4"] .slider-layer[data-shot="4"] {
      background:linear-gradient(175deg, #e2e8f0, #64748b 50%, #334155);
    }
    .slider-nav {
      display:flex; align-items:center; justify-content:center; gap:.4rem;
      padding:.55rem .75rem .65rem;
      position:relative; z-index:3;
      background:color-mix(in srgb, var(--panel-solid) 88%, transparent);
      border-top:1px solid var(--line);
    }
    html[data-model="4"] .slider-nav {
      background:rgba(255,255,255,.92);
    }
    .slider-dot {
      appearance:none; cursor:pointer; width:.45rem; height:.45rem; padding:0;
      border-radius:999px; border:0;
      background:color-mix(in srgb, var(--mute) 55%, transparent);
      transition:width .2s ease, background .2s ease;
    }
    .slider-dot.is-on {
      width:1.1rem;
      background:var(--a1);
    }
    html[data-model="4"] .slider-dot.is-on { background:#0d9488; }
    html[data-model="5"] .slider-dot.is-on { background:var(--m5-metal); }
    .slider-hint { display:none; }
    .product-block h2 {
      margin:0 0 .75rem;
      font-family:var(--font-display);
      font-size:.78rem;
      letter-spacing:.07em;
      text-transform:uppercase;
      color:var(--mute);
      font-weight:700;
    }
    .desc-short {
      margin:0;
      font-size:1.05rem;
      line-height:1.5;
      color:var(--text);
    }
    .desc-long {
      margin:0;
      color:var(--mute);
      font-size:.98rem;
      line-height:1.65;
      white-space:pre-line;
    }
    .desc-long p { margin:0 0 .85rem; }
    .desc-long p:last-child { margin-bottom:0; }
    .specs {
      width:100%;
      border-collapse:collapse;
      font-size:.92rem;
    }
    .specs tr + tr td,
    .specs tr + tr th {
      border-top:1px solid var(--line);
    }
    .specs th {
      text-align:left;
      font-weight:600;
      color:var(--mute);
      padding:.65rem .5rem .65rem 0;
      width:38%;
      vertical-align:top;
    }
    .specs td {
      padding:.65rem 0 .65rem .5rem;
      color:var(--text);
      vertical-align:top;
    }
    .slot-hint {
      margin:.55rem 0 0;
      font-size:.72rem;
      color:var(--mute);
      opacity:.85;
    }

    .site-footer {
      margin-top:auto; border-top:1px solid var(--line);
      background:color-mix(in srgb, var(--panel-solid) 92%, transparent);
      padding:1.5rem clamp(1rem,3vw,2.5rem) 1.25rem;
      margin-left:calc(-1 * clamp(1rem,3vw,2.5rem));
      margin-right:calc(-1 * clamp(1rem,3vw,2.5rem));
      padding-left:clamp(1rem,3vw,2.5rem);
      padding-right:clamp(1rem,3vw,2.5rem);
    }
    .footer-grid {
      display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
      gap:1.25rem 2rem;
    }
    @media (max-width:820px) {
      .footer-grid { grid-template-columns:1fr 1fr; }
      .footer-boost { grid-column:1 / -1; }
    }
    @media (max-width:520px) { .footer-grid { grid-template-columns:1fr; } }
    .footer-grid h3 {
      margin:0 0 .55rem; font-family:var(--font-display); font-size:.78rem;
      letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
    }
    .footer-grid p, .footer-grid a {
      margin:0 0 .35rem; font-size:.88rem; color:var(--text); text-decoration:none; line-height:1.45;
    }
    .footer-meta { color:var(--mute) !important; font-size:.82rem !important; }
    .footer-boost {
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:.35rem;
    }
    .footer-credit-label {
      margin:0;
      font-family:var(--font-display);
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--mute);
    }
    .footer-credit-host {
      margin:0;
      font-family:var(--font-display);
      font-size:1.15rem;
      font-weight:800;
      color:var(--text);
      text-decoration:none;
      letter-spacing:.01em;
    }
    .footer-credit-host:hover { color:var(--a1); }
    .footer-credit-by {
      margin:.15rem 0 0;
      font-size:.84rem;
      line-height:1.4;
      color:var(--mute);
    }
    .boost-link {
      font-family:var(--font-display); font-weight:800;
      background:var(--m5-metal); -webkit-background-clip:text; background-clip:text; color:transparent;
      border-bottom:1px solid color-mix(in srgb, var(--a1) 45%, transparent);
      text-decoration:none;
    }
    html[data-model="4"] .boost-link {
      color:var(--a1); background:none; -webkit-background-clip:unset; background-clip:unset;
    }
    .footer-boost .boost-link {
      font-size:inherit;
      font-weight:800;
    }
    .footer-credit { display:none; }
    .footer-bottom {
      margin-top:1.15rem; padding-top:.85rem; border-top:1px solid var(--line);
      display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; justify-content:center;
      font-size:.78rem; color:var(--mute);
      text-align:center;
    }
    .footer-bottom a { color:var(--a2); text-decoration:none; font-weight:700; }