/** Shopify CDN: Minification failed

Line 318:23 Expected ")" to end URL token

**/
:root{
    /* base palette — overridable via tweaks */
    --c0:#003B4E;        /* nuit-cyan */
    --c1:#00C9D4;        /* turquoise */
    --c2:#00E5F0;        /* cyan élec */
    --c3:#7BF3FF;        /* ciel */
    --c4:#0094B2;        /* deep */
    --gold:#FFD23D;
    --gold-deep:#F2A900;
    --coral:#FF6B5B;
    --ink:#06222B;
    --mist:#EAFBFD;
    --bg:#F4FDFE;
    --white:#FFFFFF;

    /* category signature colors */
    --cat-relais:#00C9D4;
    --cat-relais-deep:#0094B2;
    --cat-olympiade:#2D5DFB;
    --cat-olympiade-deep:#1438A8;
    --cat-coop:#D9B583;
    --cat-coop-deep:#B08A4F;
    --cat-ballon:#10B981;
    --cat-ballon-deep:#047857;
    --cat-poursuite:#FF8C42;
    --cat-poursuite-deep:#C2570B;
    --cat-fun:#EF4136;
    --cat-fun-deep:#C0271C;
    --cat-valoria:#5B47D8;
    --cat-valoria-deep:#3B2BA8;
    --cat-pirate:#D32F2F;
    --cat-pirate-deep:#7C1010;
    --cat-jo:#F2A900;
    --cat-jo-deep:#8B5E00;

    --display: "Fredoka", system-ui, sans-serif;
    --sans: "Plus Jakarta Sans", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;

    --r:22px;
    --r-lg:36px;

    /* density vars (toggled by .compact / .comfy on body) */
    --pad-section:120px;
    --gap-grid:22px;

    --shadow-card: 0 22px 60px -22px rgba(0,75,90,.32), 0 2px 0 rgba(255,255,255,.6) inset;
    --shadow-lift: 0 40px 90px -30px rgba(0,80,100,.55);
  }

  /* density */
  body.compact{ --pad-section:80px; --gap-grid:14px; }

  /* palette: sunset (corail/or) */
  body.palette-sunset{
    --c0:#3A1F0F;
    --c1:#FF7A4E;
    --c2:#FFA66A;
    --c3:#FFD8B5;
    --c4:#C94817;
    --gold:#FFC83D;
    --gold-deep:#E0950A;
    --coral:#FF4D6D;
    --ink:#1F0E08;
    --mist:#FFF1E5;
    --bg:#FFF8F1;
  }
  /* palette: forest (vert profond / or) */
  body.palette-forest{
    --c0:#0A2E1F;
    --c1:#16B36A;
    --c2:#34D899;
    --c3:#A7F3CB;
    --c4:#0B7E47;
    --gold:#F7C948;
    --gold-deep:#C99619;
    --coral:#FF5A4E;
    --ink:#06150E;
    --mist:#E6FBEF;
    --bg:#F1FBF5;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: var(--sans);
    color:var(--ink);
    background:var(--bg);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  .display{font-family: var(--display); font-weight:600; letter-spacing:-.01em}
  .wrap{max-width:1240px; margin:0 auto; padding:0 32px}

  a{color:inherit}

  /* ===================== NAV ===================== */
  nav.topbar{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(14px);
    background:color-mix(in oklab, var(--white) 70%, transparent);
    border-bottom:1px solid color-mix(in oklab, var(--c1) 18%, transparent);
  }
  nav.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:24px}
  .logo{display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:600; font-size:18px; color:var(--c0); line-height:1.05; text-decoration:none}
  .logo .dot{
    width:38px; height:38px; border-radius:12px;
    background:linear-gradient(135deg,var(--c1),var(--c4));
    display:grid; place-items:center; color:white; font-size:20px;
    box-shadow: 0 8px 20px -6px var(--c1), inset 0 -3px 0 rgba(0,0,0,.18);
  }
  .logo .sm{font-family: var(--sans); font-size:10px; letter-spacing:.18em; opacity:.55; font-weight:700; display:block; text-transform:uppercase; max-width:120px}
  .logo-img{ height:52px; width:auto; display:block; flex:none; }
  .logo-img--chip{ height:46px; background:#fff; border-radius:12px; padding:3px; box-shadow:0 6px 16px -6px rgba(0,0,0,.5); }
  .nav-links{display:flex; gap:30px; font-weight:600; color:var(--c0); font-size:14.5px}
  .nav-links a{color:inherit; text-decoration:none; opacity:.78}
  .nav-links a:hover{opacity:1}
  .nav-right{display:flex; gap:10px; align-items:center}
  .icon-btn{
    width:42px; height:42px; border-radius:14px;
    background:white; border:1px solid color-mix(in oklab, var(--c0) 10%, transparent);
    display:grid; place-items:center; color:var(--c0); cursor:pointer;
  }
  .cart-btn{
    background:var(--ink); color:white; border:0;
    padding:11px 16px 11px 14px; border-radius:999px; font-weight:700; font-size:14px;
    font-family:var(--sans); cursor:pointer;
    display:flex; align-items:center; gap:10px;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.4);
  }
  .cart-btn .count{
    background:var(--gold); color:var(--ink); padding:2px 8px; border-radius:999px; font-size:12px; font-weight:800;
  }

  /* ===================== HERO ===================== */
  .hero{
    position:relative; overflow:hidden;
    padding:60px 0 100px;
    background:
      radial-gradient(900px 600px at 12% 18%, color-mix(in oklab, var(--c3) 90%, transparent) 0%, transparent 60%),
      radial-gradient(900px 800px at 88% 28%, color-mix(in oklab, var(--c2) 50%, transparent) 0%, transparent 55%),
      radial-gradient(1200px 900px at 50% 110%, var(--c1) 0%, transparent 60%),
      linear-gradient(180deg, color-mix(in oklab, var(--c3) 30%, white) 0%, var(--bg) 100%);
  }
  .hero::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(2px 2px at 14% 22%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 78% 18%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 36% 72%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 88% 64%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 56% 12%, white 50%, transparent 51%);
    opacity:.7;
    pointer-events:none;
  }
  .hero-grid{
    position:relative; z-index:2;
    display:grid; grid-template-columns: 1.05fr 1fr; gap:40px;
    align-items:center;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    background:white; border:1px solid color-mix(in oklab, var(--c0) 8%, transparent);
    padding:8px 14px 8px 8px; border-radius:999px;
    font-weight:700; font-size:13px; color:var(--c0);
    box-shadow:0 8px 24px -12px rgba(0,75,90,.2);
  }
  .eyebrow .pill{
    background:linear-gradient(135deg,var(--gold),var(--gold-deep));
    color:var(--ink); padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800;
  }
  h1.head{
    font-family: var(--display); font-weight:600;
    font-size: clamp(44px, 6vw, 80px);
    line-height:1.26; letter-spacing:-.02em;
    margin: 22px 0 18px;
    color:var(--c0);
    text-wrap: balance;
  }
  h1.head em{
    font-style:normal;
    color: var(--c1);
    background:#fff;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding:0 .24em;
    border-radius:12px;
    box-shadow:0 10px 30px -12px rgba(0,75,90,.30);
  }
  .lede{font-size: 19px; line-height:1.55; color: color-mix(in oklab, var(--c0) 75%, transparent); max-width:540px; margin-bottom:24px}

  .stats-inline{
    display:flex; gap:28px; margin: 22px 0 30px;
    flex-wrap:wrap;
  }
  .stat-block{
    display:flex; flex-direction:column;
  }
  .stat-block .n{
    font-family:var(--display); font-weight:600; font-size:36px; color:var(--c0); line-height:1;
  }
  .stat-block .n em{font-style:normal; color:var(--coral)}
  .stat-block .lbl{font-size:13px; color:color-mix(in oklab, var(--c0) 60%, transparent); font-weight:600; margin-top:4px}

  .cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
  .btn-primary{
    appearance:none; border:0; cursor:pointer;
    font-family: var(--sans); font-weight:800; font-size:17px;
    color:white;
    background: linear-gradient(180deg, var(--coral) 0%, color-mix(in oklab, var(--coral) 80%, black) 100%);
    padding: 18px 26px;
    border-radius:999px;
    display:inline-flex; align-items:center; gap:12px;
    box-shadow:
      0 20px 40px -16px color-mix(in oklab, var(--coral) 60%, transparent),
      0 -3px 0 rgba(0,0,0,.12) inset,
      0 2px 0 rgba(255,255,255,.3) inset;
    transition: transform .15s ease;
    text-decoration:none;
  }
  .btn-primary:hover{transform: translateY(-2px)}
  .btn-primary .arr{
    background:white; color:var(--coral);
    width:28px; height:28px; border-radius:50%;
    display:grid; place-items:center; font-weight:800;
  }
  .btn-ghost{
    background:white; border:1.5px solid color-mix(in oklab, var(--c0) 12%, transparent);
    color:var(--c0); font-weight:700; font-size:15px;
    padding:16px 22px; border-radius:999px; cursor:pointer;
    font-family: var(--sans); text-decoration:none;
    display:inline-flex; align-items:center; gap:10px;
  }
  .trust-row{
    margin-top:28px; display:flex; gap:24px; flex-wrap:wrap;
    color:var(--c0); font-size:14px; font-weight:600;
  }
  .trust-row > span{display:flex; align-items:center; gap:8px}

  /* Hero book stack */
  .hero-stack{
    position:relative; height:560px;
    display:grid; place-items:center;
  }
  .hero-stack .halo{
    position:absolute; width:560px; height:560px;
    background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--c2) 55%, transparent) 0%, color-mix(in oklab, var(--c1) 22%, transparent) 35%, transparent 65%);
    filter: blur(10px);
    animation: pulse 4.5s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{transform:scale(1); opacity:.85}
    50%{transform:scale(1.08); opacity:1}
  }
  .hero-stack .rings{
    position:absolute; width:520px; height:520px;
    border-radius:50%;
    border:2px dashed rgba(255,255,255,.7);
    animation: spin 28s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  .book-fan{position:relative; width:380px; height:520px; z-index:3}
  .book-card{
    position:absolute; left:50%; top:50%;
    width:230px; height:320px;
    border-radius:14px;
    transform-origin:bottom center;
    box-shadow: 0 30px 50px -20px rgba(0,40,60,.5), inset 0 0 0 4px rgba(255,255,255,.65), inset -6px 0 0 rgba(0,0,0,.08);
    overflow:hidden;
    display:grid; place-items:center;
    color:white; text-align:center;
    transition: transform .3s ease;
  }
  .book-card .ctitle{
    font-family:var(--display); font-weight:600; font-size:30px;
    line-height:1; text-shadow: 0 3px 0 rgba(0,0,0,.18);
  }
  .book-card .csub{
    font-family:var(--display); font-weight:500; font-size:12px;
    letter-spacing:.16em; text-transform:uppercase; opacity:.9;
    margin-top:6px;
  }
  .book-card .cnum{
    position:absolute; top:18px; left:0; right:0; text-align:center;
    font-family:var(--display); font-weight:600; color:rgba(255,255,255,.95); font-size:54px; line-height:1;
    text-shadow: 0 4px 0 rgba(0,0,0,.22);
  }
  .book-card .cbody{position:relative; padding-top:96px}
  .book-card .stripe{
    position:absolute; left:0; right:0; bottom:0; height:42px;
    background:rgba(0,0,0,.18);
    display:grid; place-items:center;
    font-size:11px; letter-spacing:.18em; font-weight:800; text-transform:uppercase;
  }
  .book-card .ribbon{
    position:absolute; top:22px; right:-30px; transform:rotate(28deg);
    background:var(--gold); color:var(--ink);
    padding:4px 30px; font-size:10px; font-weight:800; letter-spacing:.18em;
    box-shadow:0 4px 10px -3px rgba(0,0,0,.3);
  }
  .b1{background:linear-gradient(160deg, var(--cat-fun), var(--cat-fun-deep)); transform: translate(-50%, -50%) rotate(-14deg) translateX(-180px) translateY(20px)}
  .b2{background:linear-gradient(160deg, var(--cat-olympiade), var(--cat-olympiade-deep)); transform: translate(-50%, -50%) rotate(-6deg) translateX(-90px) translateY(30px)}
  .b4{background:linear-gradient(160deg, var(--cat-ballon), var(--cat-ballon-deep)); transform: translate(-50%, -50%) rotate(8deg) translateX(90px) translateY(30px)}
  .b5{background:linear-gradient(160deg, var(--cat-coop), var(--cat-coop-deep)); transform: translate(-50%, -50%) rotate(16deg) translateX(180px) translateY(20px)}
  .book-fan:hover .b1{transform: translate(-50%, -50%) rotate(-20deg) translateX(-210px) translateY(20px)}
  .book-fan:hover .b5{transform: translate(-50%, -50%) rotate(22deg) translateX(210px) translateY(20px)}

  /* Real product cover image as centerpiece — sized to match the placeholder cards */
  .book-hero-real{
    position:absolute; left:50%; top:50%;
    width:280px; height:400px;
    background: url({{ 'cover-relais.png' | asset_url }}) no-repeat center center;
    background-size: 230% auto;
    transform: translate(-50%, -50%) translateY(-10px) rotate(-2deg);
    z-index:5;
    filter: drop-shadow(0 30px 50px rgba(0,40,60,.45)) drop-shadow(0 8px 16px rgba(0,40,60,.25));
    transition: transform .3s ease;
    animation: bookbob 4s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes bookbob{
    0%,100%{transform: translate(-50%, -50%) translateY(-12px) rotate(-2deg)}
    50%{transform: translate(-50%, -50%) translateY(-26px) rotate(-3deg)}
  }
  .book-fan:hover .book-hero-real{animation:none; transform: translate(-50%, -50%) translateY(-22px) rotate(0deg) scale(1.04)}

  /* photo book cards (real covers around the centre) */
  .book-photo{
    position:absolute; left:50%; top:50%;
    width:230px; height:325px;
    border-radius:12px;
    background-size: cover; background-position:center;
    transform-origin:bottom center;
    box-shadow: 0 30px 50px -20px rgba(0,40,60,.5);
    transition: transform .3s ease;
  }

  /* 3D book renders fanned in hero (background pre-cut to transparent) */
  .book3d{
    position:absolute; left:50%; top:50%;
    width:215px; height:auto;
    transform-origin:center bottom;
    filter: drop-shadow(0 26px 34px rgba(0,40,60,.40)) drop-shadow(0 6px 12px rgba(0,40,60,.25));
    transition: transform .35s ease;
    pointer-events:none;
  }
  .book3d.bk0{transform: translate(-50%,-50%) translateX(-158px) translateY(22px) rotate(-26deg); z-index:1}
  .book3d.bk1{transform: translate(-50%,-50%) translateX(-92px) translateY(5px) rotate(-15deg); z-index:2}
  .book3d.bkc{transform: translate(-50%,-50%) translateX(-10px) translateY(-10px) rotate(-2deg) scale(1.06); z-index:6}
  .book3d.bk3{transform: translate(-50%,-50%) translateX(74px) translateY(2px) rotate(12deg); z-index:3}
  .book3d.bk4{transform: translate(-50%,-50%) translateX(142px) translateY(12px) rotate(22deg); z-index:2}
  .book3d.bk5{transform: translate(-50%,-50%) translateX(205px) translateY(26px) rotate(31deg); z-index:1}
  .book-fan:hover .book3d.bk0{transform: translate(-50%,-50%) translateX(-185px) translateY(22px) rotate(-30deg)}
  .book-fan:hover .book3d.bk5{transform: translate(-50%,-50%) translateX(232px) translateY(26px) rotate(35deg)}
  .book-fan:hover .book3d.bkc{transform: translate(-50%,-50%) translateX(-10px) translateY(-20px) rotate(-2deg) scale(1.10)}

  /* sparkles */
  .spark{position:absolute; color:var(--gold); opacity:.9; animation: twinkle 2.4s ease-in-out infinite; z-index:4}
  @keyframes twinkle{0%,100%{transform:scale(.7); opacity:.5}50%{transform:scale(1); opacity:1}}

  /* hero floaty card */
  .hero-floaty{
    position:absolute; z-index:5;
    background:white; border-radius:18px;
    padding:12px 16px;
    box-shadow: var(--shadow-card);
    display:flex; align-items:center; gap:12px;
    font-weight:700; color:var(--c0); font-size:14px;
    border:1px solid color-mix(in oklab, var(--c0) 6%, transparent);
  }
  .hero-floaty .ico{width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--c1),var(--c4)); display:grid; place-items:center; color:white}
  .hero-floaty.f1{top:6%; left:-4%; animation: float 6s ease-in-out infinite}
  .hero-floaty.f2{bottom:-4%; right:2%; animation: float 5.5s ease-in-out infinite .5s}
  .hero-floaty.f3{top:-3%; left:50%; margin-left:-92px; animation: float 6.5s ease-in-out infinite 1.2s; z-index:7}
  @keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
  .hero-floaty .big{font-family:var(--display); font-size:22px; color:var(--c4); line-height:1}
  .hero-floaty .lil{font-size:11px; opacity:.6; font-weight:500; margin-top:2px}

  /* curve divider */
  .curve-divider{
    position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:3;
  }

  /* ===================== MARQUEE ===================== */
  .strip{
    background: var(--ink);
    color:white; padding:18px 0; overflow:hidden;
    position:relative;
  }
  .strip-track{
    display:flex; gap:48px; white-space:nowrap;
    animation: scroll 9s linear infinite;
    font-family:var(--display); font-weight:500; font-size:22px;
    will-change: transform;          /* compositing GPU = pas de saccade */
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  @keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
  .strip-track > span{display:flex; align-items:center; gap:48px}
  .strip-track .star{color:var(--gold)}

  /* ===================== SECTION COMMON ===================== */
  section{padding: var(--pad-section) 0; position:relative}
  .section-eyebrow{
    font-family:var(--display); font-weight:500; color:var(--c4);
    font-size:13px; letter-spacing:.18em; text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
  }
  .section-eyebrow::before{
    content:""; width:32px; height:2px; background:var(--c1); border-radius:2px;
  }
  h2.title{
    font-family:var(--display); font-weight:600;
    font-size: clamp(36px, 4.4vw, 58px);
    line-height:1; letter-spacing:-.02em;
    color:var(--c0); margin: 14px 0 18px; text-wrap:balance;
  }
  .section-lede{font-size:18px; color:color-mix(in oklab, var(--c0) 65%, transparent); max-width:620px; line-height:1.55}

  /* ===================== COMMENT ÇA MARCHE ===================== */
  .how{
    background: var(--white);
    background:
      radial-gradient(700px 500px at 95% 10%, color-mix(in oklab, var(--c3) 50%, transparent) 0%, transparent 60%),
      var(--white);
  }
  .how-head{display:flex; justify-content:space-between; align-items:end; gap:40px; flex-wrap:wrap}
  .how-grid{
    margin-top:34px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    position:relative;
  }
  .how-grid::before{
    content:""; position:absolute; top:34px; left:10%; right:10%; height:2px;
    background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--c1) 40%, transparent) 0 8px, transparent 8px 16px);
    z-index:0;
  }
  .step{
    background:white; border-radius:24px; padding:32px;
    box-shadow: var(--shadow-card);
    border:1px solid color-mix(in oklab, var(--c1) 14%, transparent);
    position:relative; z-index:1;
    transition: transform .2s ease;
  }
  .step:hover{transform: translateY(-4px)}
  .step .num{
    width:60px; height:60px; border-radius:50%;
    background: linear-gradient(135deg, var(--c2), var(--c4));
    color:white; display:grid; place-items:center;
    font-family:var(--display); font-weight:600; font-size:28px; line-height:1;
    box-shadow: 0 14px 28px -10px var(--c1);
    margin-bottom:24px;
  }
  .step:nth-child(2) .num{background:linear-gradient(135deg, var(--gold), var(--gold-deep)); box-shadow:0 14px 28px -10px var(--gold-deep)}
  .step:nth-child(3) .num{background:linear-gradient(135deg, var(--coral), color-mix(in oklab, var(--coral) 75%, black)); box-shadow:0 14px 28px -10px var(--coral)}
  .step h3{font-family:var(--display); font-size:24px; font-weight:600; color:var(--c0); margin:0 0 8px}
  .step p{margin:0; color:color-mix(in oklab, var(--c0) 65%, transparent); line-height:1.55; font-size:15px}
  .step .meta{
    margin-top:18px; display:flex; align-items:center; gap:8px;
    font-size:12px; font-weight:700; color:var(--c4);
    background:var(--mist); padding:6px 10px; border-radius:999px; align-self:flex-start;
    width:fit-content;
  }

  /* ===================== CATALOGUE COULEUR ===================== */
  .catalogue{
    background:
      radial-gradient(900px 700px at 50% 0%, color-mix(in oklab, var(--c3) 65%, transparent) 0%, transparent 60%),
      linear-gradient(180deg, color-mix(in oklab, var(--c3) 35%, white) 0%, color-mix(in oklab, var(--c3) 18%, white) 100%);
  }
  .cat-head{display:flex; justify-content:space-between; align-items:end; gap:40px; flex-wrap:wrap}
  .cat-filters{
    display:flex; gap:8px; flex-wrap:wrap; margin-top:30px;
  }
  .cat-chip{
    background:white; border:1px solid color-mix(in oklab, var(--c0) 10%, transparent);
    padding:9px 16px; border-radius:999px;
    font-size:13px; font-weight:700; color:var(--c0); cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
    box-shadow: 0 6px 16px -10px rgba(0,75,90,.3);
    transition: all .15s ease;
  }
  .cat-chip .swatch{width:10px; height:10px; border-radius:50%; flex:none}
  .cat-chip.active{background:var(--ink); color:white; border-color:transparent}
  .cat-chip:hover:not(.active){transform: translateY(-1px)}

  .catalogue-grid{
    margin-top:40px;
    display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid);
  }
  .product{
    --pc: var(--cat-relais);
    --pcd: var(--cat-relais-deep);
    position:relative;
    background:white;
    border-radius:24px;
    padding:18px 18px 22px;
    box-shadow: var(--shadow-card);
    border:1px solid color-mix(in oklab, var(--pc) 14%, transparent);
    overflow:hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    display:flex; flex-direction:column;
    cursor:pointer;
    text-decoration:none; color:inherit;
  }
  .product:hover{transform: translateY(-6px); box-shadow: 0 40px 80px -30px color-mix(in oklab, var(--pc) 40%, transparent)}
  .product::before{
    content:""; position:absolute; inset:auto 0 0 0; height:6px;
    background: linear-gradient(90deg, var(--pc), var(--pcd));
  }
  .product .cover{
    position:relative;
    border-radius:14px;
    aspect-ratio: 1 / 1.414;
    background: linear-gradient(160deg, var(--pc) 0%, var(--pcd) 100%);
    overflow:hidden;
    display:grid; place-items:center;
    margin-bottom:18px;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.4), inset -8px 0 16px rgba(0,0,0,.18);
  }
  .product .cover::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
      radial-gradient(2px 2px at 75% 25%, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(2px 2px at 45% 78%, rgba(255,255,255,.6) 50%, transparent 51%),
      radial-gradient(2px 2px at 85% 72%, rgba(255,255,255,.4) 50%, transparent 51%);
    opacity:.7;
  }
  .product .cover-num{
    font-family:var(--display); font-weight:600; color:rgba(255,255,255,.96);
    font-size:64px; line-height:1; text-shadow: 0 4px 0 rgba(0,0,0,.22);
    position:relative; z-index:2;
  }
  .product .cover-jeux{
    position:relative; z-index:2;
    color:rgba(255,255,255,.92); font-family:var(--display); font-weight:500; font-size:13px;
    letter-spacing:.22em; text-transform:uppercase;
  }
  .product .cover-title{
    position:relative; z-index:2;
    margin-top:8px;
    background: var(--gold);
    color: var(--ink);
    padding:6px 18px;
    border-radius:8px;
    font-family:var(--display); font-weight:600; font-size:22px;
    box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 12px 20px -8px rgba(0,0,0,.4);
    transform: rotate(-2deg);
  }
  .product .cover.has-img{
    padding:0;
    background:
      radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--pc) 35%, white) 0%, transparent 60%),
      linear-gradient(160deg, var(--pc) 0%, var(--pcd) 100%);
  }
  .product .cover-img-bg{
    position:absolute; inset:0;
    background-image: var(--cover-src);
    background-repeat:no-repeat;
    background-position: center 52%;
    background-size: 230% auto;
    transition: transform .35s ease, background-size .35s ease;
    z-index:2;
    filter: drop-shadow(0 12px 18px rgba(0,40,60,.35));
  }
  .product:hover .cover-img-bg{background-size: 245% auto}

  /* flat A4 covers (no transparent padding) — fill the cover edge to edge */
  .product .cover-img-bg.cover-flat{
    background-size: cover;
    background-position: center center;
    filter: none;
  }
  .product:hover .cover-img-bg.cover-flat{background-size: 110% auto}
  .product .cover.has-img:has(.cover-flat) .cover-foot{display:none}

  /* clean cover — just the image, no colored frame */
  .product .cover.cover-clean{
    background:none;
    box-shadow:none;
    aspect-ratio: 1 / 1.414;
    overflow:visible;
  }
  .product .cover.cover-clean::before{display:none}
  .product .cover.cover-clean img{
    width:100%; height:100%;
    object-fit: contain;
    border-radius:10px;
    filter: drop-shadow(0 14px 24px rgba(0,40,60,.28));
    transition: transform .3s ease;
  }
  .product:hover .cover.cover-clean img{transform: translateY(-4px) scale(1.02)}

  .product .cover-foot{
    position:absolute; bottom:14px; left:0; right:0; text-align:center; z-index:2;
    color:rgba(255,255,255,.85); font-size:10px; letter-spacing:.18em; font-weight:700;
  }

  /* mini glyph in cover */
  .cover-glyph{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px;
  }

  .product .tag{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px; border-radius:999px;
    font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    background: color-mix(in oklab, var(--pc) 14%, transparent);
    color: var(--pcd);
    margin-bottom:10px;
    width:fit-content;
  }
  .product h3{
    font-family:var(--display); font-weight:600; font-size:22px;
    color:var(--c0); margin: 0 0 6px; line-height:1.05; letter-spacing:-.01em;
  }
  .product .pdesc{font-size:13px; color:color-mix(in oklab, var(--c0) 60%, transparent); line-height:1.5; margin:0 0 14px; flex:1}
  .product .price-row{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:14px; border-top:1px dashed color-mix(in oklab, var(--c0) 14%, transparent);
  }
  .product .price-row .px{display:flex; align-items:baseline; gap:8px}
  .product .price-row .old{font-size:13px; color:#94a3a8; text-decoration:line-through}
  .product .price-row .nw{font-family:var(--display); font-weight:600; font-size:22px; color:var(--c0); line-height:1}
  .product .price-row .add{
    background:var(--ink); color:white; border:0; border-radius:999px;
    padding:8px 14px; font-weight:700; font-size:12px; cursor:pointer;
    display:flex; align-items:center; gap:6px;
    font-family:var(--sans);
  }
  .product .sale-badge{
    position:absolute; top:14px; left:14px; z-index:3;
    background: var(--coral); color:white;
    padding:5px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.08em;
    transform: rotate(-4deg);
    box-shadow: 0 6px 12px -4px color-mix(in oklab, var(--coral) 50%, transparent);
  }

  /* category color overrides per product */
  .product.cat-relais{--pc:var(--cat-relais); --pcd:var(--cat-relais-deep)}
  .product.cat-olympiade{--pc:var(--cat-olympiade); --pcd:var(--cat-olympiade-deep)}
  .product.cat-coop{--pc:var(--cat-coop); --pcd:var(--cat-coop-deep)}
  .product.cat-ballon{--pc:var(--cat-ballon); --pcd:var(--cat-ballon-deep)}
  .product.cat-poursuite{--pc:var(--cat-poursuite); --pcd:var(--cat-poursuite-deep)}
  .product.cat-fun{--pc:var(--cat-fun); --pcd:var(--cat-fun-deep)}
  .product.cat-valoria{--pc:var(--cat-valoria); --pcd:var(--cat-valoria-deep)}
  .product.cat-pirate{--pc:var(--cat-pirate); --pcd:var(--cat-pirate-deep)}
  .product.cat-jo{--pc:var(--cat-jo); --pcd:var(--cat-jo-deep)}

  /* ===================== PACK BANNER ===================== */
  .pack-banner{
    margin-top:50px;
    background: linear-gradient(135deg, var(--ink) 0%, color-mix(in oklab, var(--c4) 60%, black) 100%);
    border-radius: var(--r-lg);
    padding: 44px 48px;
    color:white;
    display:grid; grid-template-columns: 1.4fr 1fr; gap:40px; align-items:center;
    position:relative; overflow:hidden;
    box-shadow: 0 40px 80px -30px rgba(0,30,40,.55);
  }
  .pack-banner::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(2px 2px at 14% 22%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 78% 18%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 56% 12%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 36% 72%, white 50%, transparent 51%);
    opacity:.45;
  }
  .pack-banner > *{position:relative; z-index:1}
  .pack-banner .pb-head{
    font-family:var(--display); font-weight:500; font-size:13px;
    letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  }
  .pack-banner h3{
    font-family:var(--display); font-weight:600; font-size: clamp(28px, 3vw, 42px); line-height:1.05;
    margin: 8px 0 12px; color:white; text-wrap:balance;
  }
  .pack-banner p{color:rgba(255,255,255,.78); margin:0 0 22px; font-size:16px; line-height:1.55; max-width:520px}
  .pack-banner .row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
  .pack-banner .px-block{
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
    padding:14px 18px; border-radius:18px;
    display:flex; flex-direction:column;
  }
  .pack-banner .px-block .o{font-size:13px; color:rgba(255,255,255,.55); text-decoration:line-through}
  .pack-banner .px-block .n{font-family:var(--display); font-weight:600; font-size:34px; line-height:1; color:white}
  .pack-banner .px-block .savings{margin-top:4px; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--gold)}

  /* grille des 6 couvertures : toutes visibles, légèrement inclinées */
  .pack-stack{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:18px 12px; place-items:center; padding:6px 0;
  }
  .pack-book{
    width:100%; max-width:118px; height:auto;
    border-radius:7px;
    box-shadow: 0 14px 26px -10px rgba(0,0,0,.55);
    transition: transform .25s ease;
  }
  .pack-book.pb1{transform: rotate(-4deg)}
  .pack-book.pb2{transform: rotate(3deg)}
  .pack-book.pb3{transform: rotate(-3deg)}
  .pack-book.pb4{transform: rotate(4deg)}
  .pack-book.pb5{transform: rotate(-3deg)}
  .pack-book.pb6{transform: rotate(3deg)}
  .pack-book:hover{transform: rotate(0) translateY(-6px) scale(1.06); z-index:5; box-shadow:0 22px 40px -12px rgba(0,0,0,.6)}

  /* ===================== COLLECTIONS ===================== */
  .collections{
    background: var(--white);
  }
  .col-grid{
    margin-top:50px;
    display:grid; grid-template-columns: 1fr 1fr; gap:24px;
  }
  .col-card{
    position:relative;
    border-radius: var(--r-lg);
    overflow:hidden;
    aspect-ratio: 5/4;
    padding:40px;
    display:flex; flex-direction:column; justify-content:flex-end;
    color:white;
    text-decoration:none;
    box-shadow: var(--shadow-lift);
    transition: transform .25s ease;
  }
  .col-card:hover{transform: translateY(-6px)}
  .col-card.c1{
    background:
      radial-gradient(circle at 80% 20%, color-mix(in oklab, var(--c2) 60%, transparent) 0%, transparent 50%),
      linear-gradient(160deg, var(--c1) 0%, var(--c4) 100%);
  }
  .col-card.c2{
    background:
      radial-gradient(circle at 20% 80%, color-mix(in oklab, var(--gold) 50%, transparent) 0%, transparent 50%),
      linear-gradient(160deg, color-mix(in oklab, var(--ink) 90%, var(--c1)) 0%, var(--ink) 100%);
  }
  .col-card::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(2px 2px at 16% 22%, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(2px 2px at 78% 18%, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(2px 2px at 36% 72%, rgba(255,255,255,.5) 50%, transparent 51%);
  }
  .col-card .eyebr{font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.2em; text-transform:uppercase; opacity:.8}
  .col-card h3{
    font-family:var(--display); font-weight:600; font-size: clamp(28px, 3vw, 42px); line-height:1.02;
    margin:10px 0 12px;
    text-wrap:balance;
  }
  .col-card p{margin:0 0 24px; opacity:.85; font-size:15px; line-height:1.5; max-width:380px}
  .col-card .row{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
  .col-card .row .tag{
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
    border:1px solid rgba(255,255,255,.22);
    padding:6px 12px; border-radius:999px;
    font-size:12px; font-weight:600;
  }
  .col-card .cta{
    margin-top:24px;
    background:white; color:var(--ink);
    padding:14px 22px; border-radius:999px;
    display:inline-flex; align-items:center; gap:10px;
    font-weight:800; font-size:14px;
    width:fit-content;
    transition: gap .2s ease;
  }
  .col-card:hover .cta{gap:16px}
  .col-card .float-art{
    position:absolute; right:-20px; top:-30px; width:220px; height:220px;
    opacity:.85; z-index:0;
  }
  .col-card .deco-books{
    position:absolute; right:30px; top:30px;
    display:flex; gap:0;
    z-index:1;
  }
  .col-card .deco-books > div{
    width:42px; height:56px; border-radius:5px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 6px 14px -4px rgba(0,0,0,.3);
    display:grid; place-items:center;
    font-family:var(--display); font-size:10px; font-weight:600; color:var(--ink); text-align:center; line-height:1;
  }
  /* vignettes empilées en cascade (chevauchement léger), toutes sur une ligne */
  .col-card .deco-books{ flex-wrap:nowrap; width:auto; }
  .col-card .deco-books img{
    width:48px; height:64px; border-radius:5px;
    object-fit:cover; background:#fff;
    border:2px solid #fff;
    box-shadow: -6px 5px 12px -4px rgba(0,0,0,.45);
    margin-left:-20px;
    transition: transform .2s ease;
  }
  .col-card .deco-books img:first-child{ margin-left:0; }
  .col-card:hover .deco-books img{ margin-left:-12px; }   /* léger éventail au survol */
  .col-card:hover .deco-books img:first-child{ margin-left:0; }
  .col-card .deco-rings{
    position:absolute; right:-100px; top:-100px;
    width:380px; height:380px; border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
  }
  .col-card .deco-rings::before{
    content:""; position:absolute; inset:30px; border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
  }

  /* ===================== APERÇU FICHE-JEU ===================== */
  .apercu{
    background:
      radial-gradient(800px 600px at 95% 10%, color-mix(in oklab, var(--c2) 55%, transparent) 0%, transparent 60%),
      radial-gradient(760px 620px at 5% 85%, color-mix(in oklab, var(--c1) 45%, transparent) 0%, transparent 62%),
      linear-gradient(180deg, color-mix(in oklab, var(--c3) 30%, white) 0%, var(--bg) 100%);
  }
  .ap-grid{
    margin-top:60px;
    display:grid; grid-template-columns: 1fr 1.15fr; gap:60px; align-items:center;
  }
  .ap-features{margin-top:30px; display:grid; gap:18px}
  .ap-feat{display:flex; gap:16px; align-items:start}
  .ap-feat .ico{
    width:46px; height:46px; flex:none; border-radius:14px;
    background:linear-gradient(135deg, var(--c2), var(--c1));
    display:grid; place-items:center; color:white;
    box-shadow: 0 12px 22px -10px var(--c1);
  }
  .ap-feat h4{margin:0 0 4px; font-family:var(--display); font-size:18px; color:var(--c0); font-weight:600}
  .ap-feat p{margin:0; font-size:14px; color:color-mix(in oklab, var(--c0) 60%, transparent); line-height:1.5}

  .pages-stack{position:relative; height:540px}
  /* real fiche images */
  .fiche-img{
    position:absolute;
    width:78%; height:auto;
    border-radius:14px;
    filter: drop-shadow(0 30px 50px rgba(0,40,60,.35)) drop-shadow(0 8px 16px rgba(0,40,60,.18));
    transition: transform .35s ease;
  }
  .fi1{top:0; left:-2%; transform: rotate(-3deg); z-index:2}
  .fi2{top:42%; right:-4%; width:72%; transform: rotate(4deg); z-index:3}
  .pages-stack:hover .fi1{transform: rotate(-5deg) translateX(-12px)}
  .pages-stack:hover .fi2{transform: rotate(6deg) translateX(12px)}
  /* aperçu = une seule fiche, agrandie et centrée */
  .pages-stack.solo{display:flex; align-items:center; justify-content:center; height:auto}
  .pages-stack.solo .fi1{position:relative; top:auto; left:auto; width:100%; max-width:600px; transform:rotate(-1.5deg)}
  .pages-stack.solo:hover .fi1{transform:rotate(-1.5deg) translateY(-6px)}
  .fiche-badge{
    position:absolute; z-index:4;
    background:white; padding:10px 16px; border-radius:14px;
    box-shadow: var(--shadow-card);
    border:1px solid color-mix(in oklab, var(--c0) 6%, transparent);
    display:flex; flex-direction:column; gap:2px;
  }
  .fiche-badge .k{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color: var(--c4)}
  .fiche-badge .v{font-family:var(--display); font-weight:600; font-size:16px; color:var(--c0)}
  .fb1{top:-30px; left:38%; transform: rotate(-4deg)}
  .fb2{bottom:6%; left:-6%; transform: rotate(3deg)}

  .page-mock{
    position:absolute;
    background:white; border-radius:18px;
    box-shadow: var(--shadow-lift);
    width: 290px; height: 410px;
    padding: 22px 22px 18px;
    overflow:hidden;
    border:1px solid color-mix(in oklab, var(--c0) 6%, transparent);
  }
  .page-mock .label{
    background:var(--c2); color:var(--c0);
    font-family:var(--display); font-weight:500; font-size:11px;
    padding:4px 10px; border-radius:6px; display:inline-block;
    margin-bottom:8px;
  }
  .page-mock h5{
    margin:0 0 12px; font-family:var(--display); font-weight:600;
    font-size:22px; color:var(--c0); letter-spacing:-.01em;
  }
  .page-mock h5 .small{font-size:13px; color:var(--coral); display:block; font-family:var(--sans); font-weight:600; margin-bottom:4px}
  .page-mock .pitch{
    background:var(--mist); border-radius:12px;
    height:140px;
    position:relative; overflow:hidden;
    border:1px solid color-mix(in oklab, var(--c1) 18%, transparent);
  }
  .page-mock .meta-row{display:flex; gap:8px; margin-top:12px; align-items:center}
  .page-mock .chip{
    background:var(--mist); border:1px solid color-mix(in oklab, var(--c1) 22%, transparent);
    padding:5px 9px; border-radius:8px; font-size:11px; font-weight:600; color:var(--c4);
  }
  .page-mock .chip.alt{background: color-mix(in oklab, var(--gold) 25%, white); border-color: color-mix(in oklab, var(--gold-deep) 30%, transparent); color:#7c5d00}
  .page-mock h6{
    margin:14px 0 6px; font-family:var(--display); font-size:13px; color:var(--c0); font-weight:600;
    background:var(--c2); display:inline-block; padding:3px 8px; border-radius:6px;
  }
  .page-mock .pg-num{position:absolute; bottom:14px; right:18px; font-weight:800; color:var(--c0); font-size:14px}
  .page-mock .obj-row{display:flex; gap:8px; align-items:start; margin-top:8px; font-size:10.5px; color: color-mix(in oklab, var(--c0) 70%, transparent); line-height:1.4}
  .page-mock .check{
    width:14px; height:14px; flex:none; border-radius:3px; border:1.5px solid var(--c1);
    display:grid; place-items:center; color:var(--c1); font-size:10px;
  }
  .page-mock .stop-watch{
    position:absolute; right:14px; top:14px;
    width:60px; height:60px; border-radius:50%;
    background: var(--c2); border:3px solid var(--c4);
    display:grid; place-items:center; font-family:var(--display); font-weight:600;
    color:white; font-size:14px; line-height:1; text-align:center;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.15);
  }
  .page-mock.p1{transform: rotate(-7deg); top:30px; left:0; z-index:2}
  .page-mock.p2{transform: rotate(3deg); top:60px; left:180px; z-index:3}
  .page-mock.p3{transform: rotate(-2deg); top:140px; left:330px; z-index:2}

  /* ===================== STATS / SOCIAL PROOF ===================== */
  .proof{
    background: linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--c3) 25%, white) 100%);
  }
  .proof .big-num{
    display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;
  }
  .proof .big-num .left .n{
    font-family:var(--display); font-weight:600;
    font-size: clamp(56px, 10vw, 132px);
    line-height:.95; letter-spacing:-.03em;
    color: var(--c0); white-space:nowrap;
  }
  .proof .big-num .left .n em{
    font-style:normal;
    background: linear-gradient(180deg, var(--c1) 30%, var(--c4) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .proof .big-num .left .lbl{font-family:var(--display); font-weight:500; font-size:18px; color:var(--c4); letter-spacing:.14em; text-transform:uppercase; margin-top:6px}
  .proof .big-num .right p{font-size:18px; line-height:1.6; color: color-mix(in oklab, var(--c0) 75%, transparent); max-width:480px}
  .proof .big-num .right p strong{color:var(--c0)}

  .testimonials{
    margin-top: 70px;
    display:grid; grid-template-columns: repeat(3, 1fr); gap:22px;
  }
  .testi{
    background:white; border-radius:24px; padding:28px;
    box-shadow: var(--shadow-card);
    border:1px solid color-mix(in oklab, var(--c0) 6%, transparent);
    display:flex; flex-direction:column; gap:14px;
  }
  .testi .stars{color:var(--gold-deep); font-size:18px; letter-spacing:2px}
  .testi blockquote{
    margin:0; font-family:var(--sans); font-size:16px; line-height:1.55; color:var(--c0); font-weight:500;
  }
  .testi .who{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:14px; border-top:1px dashed color-mix(in oklab, var(--c0) 14%, transparent)}
  .testi .ava{
    width:42px; height:42px; border-radius:50%;
    display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:18px; color:white;
  }
  .testi .meta .name{font-weight:700; color:var(--c0); font-size:14px}
  .testi .meta .role{font-size:12px; color: color-mix(in oklab, var(--c0) 55%, transparent); margin-top:1px}

  /* ===================== ABOUT XAVIER ===================== */
  .about{
    background: var(--white);
  }
  .about-grid{
    display:grid; grid-template-columns: 1fr; gap:60px; align-items:center;
    max-width:760px;
  }
  .about-portrait{
    position:relative;
    border-radius: var(--r-lg);
    aspect-ratio: 4/5;
    background:
      radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--c3) 60%, transparent) 0%, transparent 60%),
      linear-gradient(160deg, var(--c1) 0%, var(--c4) 100%);
    box-shadow: var(--shadow-lift);
    overflow:hidden;
    display:grid; place-items:center;
  }
  .about-portrait::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(2px 2px at 14% 22%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 78% 18%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 36% 72%, white 50%, transparent 51%);
    opacity:.55;
  }
  .about-portrait .ph-tag{
    position:absolute; bottom:24px; left:24px; right:24px;
    background:rgba(255,255,255,.92); border-radius:16px;
    padding:14px 18px;
    color:var(--c0);
  }
  .about-portrait .ph-tag .name{font-family:var(--display); font-weight:600; font-size:22px}
  .about-portrait .ph-tag .lbl{font-size:13px; opacity:.7; margin-top:2px}
  .about-emblem{
    width:160px; height:160px; border-radius:50%;
    background:rgba(255,255,255,.92);
    display:grid; place-items:center; font-size:84px;
    box-shadow:0 24px 60px -18px rgba(0,40,60,.45);
    position:relative; z-index:2;
  }
  .about-portrait .silhouette{
    width:55%; height:75%; align-self:end;
    background: rgba(0,0,0,.18);
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    position:relative;
  }
  .about-portrait .silhouette::before{
    content:""; position:absolute; top:-20px; left:50%; transform:translateX(-50%);
    width:55%; aspect-ratio:1; border-radius:50%;
    background: rgba(0,0,0,.22);
  }
  .about-portrait .ph-tag .mono{font-family:var(--mono); font-size:11px; opacity:.5; margin-top:8px; letter-spacing:.04em}

  .about-text h2{margin-top:14px}
  .about-text .qsigne{
    background: var(--mist); border-left: 4px solid var(--c1);
    padding: 18px 22px; border-radius: 14px;
    font-family:var(--display); font-style:italic; font-weight:500; font-size:20px;
    color:var(--c0);
    margin: 22px 0;
    line-height:1.4;
  }
  .about-text .stats-line{
    display:flex; gap:32px; margin-top:30px; flex-wrap:wrap;
  }
  .about-text .stats-line .it{display:flex; flex-direction:column}
  .about-text .stats-line .n{font-family:var(--display); font-weight:600; font-size:28px; color:var(--c0); line-height:1}
  .about-text .stats-line .lbl{font-size:12px; color: color-mix(in oklab, var(--c0) 60%, transparent); margin-top:4px; font-weight:600}

  /* ===================== NEWSLETTER / FINAL ===================== */
  .final{
    background:
      radial-gradient(900px 700px at 30% 30%, var(--c2) 0%, transparent 60%),
      radial-gradient(900px 700px at 80% 80%, color-mix(in oklab, var(--c4) 70%, blue) 0%, transparent 50%),
      linear-gradient(135deg, var(--c4) 0%, var(--c0) 100%);
    color:white;
    overflow:hidden; position:relative;
  }
  .final::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(2px 2px at 14% 22%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 78% 18%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 36% 72%, white 50%, transparent 51%),
      radial-gradient(2px 2px at 88% 64%, white 50%, transparent 51%);
    opacity:.6;
  }
  .final .wrap{position:relative; z-index:2}
  .final-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:60px; align-items:center}
  .final h2{
    font-family:var(--display); font-weight:600;
    font-size: clamp(42px, 5vw, 68px);
    line-height:.98; letter-spacing:-.02em; margin:0 0 22px;
    color:white;
  }
  .final h2 .y{color:var(--gold)}
  .final p.lede{color:rgba(255,255,255,.85); font-size:19px; max-width:520px}
  .newsletter-card{
    background:white; border-radius: var(--r-lg); padding:36px;
    box-shadow:0 60px 120px -40px rgba(0,30,40,.7);
    color:var(--ink); position:relative; overflow:hidden;
  }
  .newsletter-card .nh{font-family:var(--display); font-weight:600; font-size:24px; color:var(--c0); margin:0 0 8px}
  .newsletter-card p{margin:0 0 22px; color: color-mix(in oklab, var(--c0) 65%, transparent); font-size:14px; line-height:1.5}
  .newsletter-card .form{display:flex; gap:8px}
  .newsletter-card input{
    flex:1; appearance:none;
    border:1.5px solid color-mix(in oklab, var(--c0) 12%, transparent);
    background:var(--bg); border-radius:999px;
    padding:14px 18px; font-family:var(--sans); font-size:15px;
    outline:none; color:var(--c0);
  }
  .newsletter-card input:focus{border-color: var(--c1)}
  .newsletter-card .submit{
    background: var(--ink); color:white; border:0; cursor:pointer;
    padding: 14px 22px; border-radius:999px; font-weight:800; font-size:14px;
    font-family:var(--sans);
  }
  .newsletter-card .perks{
    margin-top:20px; display:grid; gap:8px;
  }
  .newsletter-card .perks > div{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color: color-mix(in oklab, var(--c0) 75%, transparent)}
  .newsletter-card .perks svg{color:var(--c1)}

  /* ===================== FOOTER ===================== */
  footer{
    background:color-mix(in oklab, var(--c0) 92%, black);
    color:rgba(255,255,255,.7); padding:60px 0 30px; font-size:14px;
  }
  footer .ft-grid{
    display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;
  }
  footer h5{font-family:var(--display); font-weight:600; color:white; margin:0 0 16px; font-size:15px}
  footer ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
  footer ul a{color:rgba(255,255,255,.62); text-decoration:none}
  footer ul a:hover{color:white}
  footer .ft-blurb p{margin:0 0 18px; line-height:1.55; max-width:280px}
  footer .ft-social{display:flex; gap:10px}
  footer .ft-social a{
    width:38px; height:38px; border-radius:12px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    display:grid; place-items:center; color:white; text-decoration:none;
  }
  footer .ft-bottom{
    border-top:1px solid rgba(255,255,255,.1); padding-top:20px;
    display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
    font-size:12px; color:rgba(255,255,255,.45);
  }
  footer .ft-pay{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
  footer .ft-pay .p{
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    padding:4px 8px; border-radius:6px;
    font-size:10px; font-weight:700; letter-spacing:.06em; color:white;
  }

  /* ===================== TWEAKS PANEL ===================== */
  #tweaks-panel{
    position:fixed; bottom:24px; right:24px; z-index:200;
    background:white; border-radius:22px;
    padding:18px; width:300px;
    box-shadow: 0 30px 80px -20px rgba(0,40,60,.45), 0 0 0 1px rgba(0,40,60,.06);
    font-family:var(--sans);
    display:none;
  }
  #tweaks-panel.open{display:block}
  #tweaks-panel .hdr{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
  #tweaks-panel .hdr h4{margin:0; font-family:var(--display); font-weight:600; font-size:18px; color:var(--c0)}
  #tweaks-panel .hdr button{background:transparent; border:0; cursor:pointer; color:var(--c0); opacity:.5; font-size:18px}
  #tweaks-panel .sec{margin-bottom:16px}
  #tweaks-panel label{display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: color-mix(in oklab, var(--c0) 60%, transparent); margin-bottom:8px}
  #tweaks-panel .palette-row{display:flex; gap:8px}
  #tweaks-panel .pal{
    flex:1; border:1.5px solid color-mix(in oklab, var(--c0) 10%, transparent);
    border-radius:14px; padding:8px; cursor:pointer; background:white;
    display:flex; flex-direction:column; gap:4px; align-items:center;
  }
  #tweaks-panel .pal.active{border-color:var(--c1); box-shadow: 0 6px 16px -6px var(--c1)}
  #tweaks-panel .pal .swatch-row{display:flex; gap:3px}
  #tweaks-panel .pal .s{width:14px; height:14px; border-radius:50%}
  #tweaks-panel .pal .nm{font-size:10px; font-weight:700; color:var(--c0)}
  #tweaks-panel select, #tweaks-panel .seg{
    width:100%; appearance:none;
    border:1.5px solid color-mix(in oklab, var(--c0) 10%, transparent);
    background:white; border-radius:12px; padding:10px 12px;
    font-family:var(--sans); font-size:14px; color:var(--c0);
    font-weight:600; cursor:pointer;
  }
  #tweaks-panel .seg{display:flex; gap:0; padding:3px; background: color-mix(in oklab, var(--c1) 10%, white)}
  #tweaks-panel .seg button{
    flex:1; appearance:none; border:0; background:transparent;
    padding:8px; border-radius:9px; font-weight:700; font-size:13px;
    cursor:pointer; color: color-mix(in oklab, var(--c0) 70%, transparent);
    font-family:var(--sans);
  }
  #tweaks-panel .seg button.active{background:white; color:var(--c0); box-shadow: 0 4px 10px -4px rgba(0,40,60,.2)}

  /* burger button (hidden on desktop) */
  .burger{display:none; width:42px; height:42px; border-radius:14px; background:white; border:1px solid color-mix(in oklab, var(--c0) 10%, transparent); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px}
  .burger span{display:block; width:18px; height:2px; background:var(--c0); border-radius:2px; transition:.25s}
  .burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .cat-chip{text-decoration:none}

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 1100px){
    .burger{display:flex}
    .nav-links{
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:0;
      background:white; border-bottom:1px solid color-mix(in oklab, var(--c1) 18%, transparent);
      padding:8px 0; box-shadow:0 20px 40px -20px rgba(0,60,75,.35);
      display:none;
    }
    .nav-links.open{display:flex}
    .nav-links a{padding:14px 32px; opacity:1; border-bottom:1px solid color-mix(in oklab, var(--c0) 6%, transparent)}
    nav.topbar .wrap{position:relative}
  }
  @media (max-width: 980px){
    .hero-grid, .ap-grid, .final-grid, .about-grid, .proof .big-num, .pack-banner, .col-grid{grid-template-columns:1fr}
    .how-grid, .catalogue-grid, .testimonials{grid-template-columns: 1fr 1fr}
    .how-grid::before{display:none}
    .hero-floaty{display:none}
    /* ---- PERF MOBILE : on coupe les animations lourdes (sinon ça saccade tout, dont le bandeau) ---- */
    .halo{ animation:none !important; }
    .rings{ animation:none !important; }
    .book3d.bkc{ animation:none !important; }
    nav.topbar{ backdrop-filter:none; background:#ffffff; }   /* blur retiré = scroll fluide */
    /* ---- hero tablette : fan sorti du flux (n'élargit plus la colonne), sans boîte ---- */
    .hero-stack{ height:320px; overflow:visible; }
    .hero-stack .halo{ width:360px; height:360px; }
    .hero-stack .rings{ width:340px; height:340px; }
    .book-fan{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%) scale(.66); }
    .pages-stack{height:auto}
    footer .ft-grid{grid-template-columns:1fr 1fr}
    .col-card{padding:30px; aspect-ratio:auto; min-height:0; justify-content:flex-start}
    /* vignettes : dans le flux (plus en superposition sur le texte), empilées en cascade */
    .col-card .deco-books{ position:static; width:auto; justify-content:flex-start; margin:0 0 18px; flex-wrap:nowrap; }
    .col-card .deco-rings{ display:none; }
  }
  @media (max-width: 620px){
    .how-grid, .catalogue-grid, .testimonials{grid-template-columns: 1fr}
    .wrap{padding:0 18px}
    section{padding:56px 0}
    h1.head{font-size:clamp(32px,8vw,44px)}
    .logo-img{ height:44px; }
    .logo-word{ display:none; }   /* le logo contient déjà le nom → on évite le texte en double qui se casse */
    .hero{padding:30px 0 56px}
    /* ---- hero mobile : fan sorti du flux (n'élargit plus la colonne), sans boîte ---- */
    .hero-stack{ height:250px; overflow:visible; }
    .hero-stack .halo{ width:300px; height:300px; }
    .hero-stack .rings{ width:280px; height:280px; }
    .book-fan{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%) scale(.5); }
    .spark{display:none}
    .stats-inline{gap:18px}
    .stat-block .n{font-size:28px}
    .cta-row{flex-direction:column; align-items:stretch}
    .btn-primary, .btn-ghost{justify-content:center}
    .pages-stack.solo{transform:none}
    footer .ft-grid{grid-template-columns:1fr}
    .col-card{padding:26px; min-height:260px}
    .col-card h3{font-size:28px}
    .pack-banner{padding:30px 24px}
    .pack-stack{gap:12px 10px; margin-top:10px}       /* grille 3×2 compacte sur mobile */
    .pack-book{max-width:92px}
  }