/*
Theme Name: Charly Kane
Theme URI: https://charly.grower.fr
Author: Joel Reisberg
Description: Theme sur mesure pour le site officiel de Charly Kane / SKYFEN. Mecanique de parallax a defilement horizontal, direction artistique bleu nuit et olive.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: charlykane
*/

  :root{
    --black:#0d1526;
    --near-black:#131f33;
    --charcoal:#1c2b45;
    --charcoal-light:#28395a;
    --gold:#c9a24b;
    --gold-light:#e7c877;
    --gold-pale:#f2ddad;
    --gold-deep:#8a6a24;
    --ivory:#f2ece0;
    --sand:#d9d0be;
    --grey-warm:#8b8578;
    --olive:#57623f;
    --olive-light:#8a9968;
    --olive-deep:#37401f;
    --serif:'Fraunces', 'Georgia', serif;
    --sans:'Inter', -apple-system, sans-serif;
    --r-lg:22px;
    --r-md:16px;
    --r-sm:10px;
    --ease:cubic-bezier(.16,.8,.24,1);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    background:var(--black);
    color:var(--ivory);
    line-height:1.6;
    overflow-x:hidden;
  }
  a{color:inherit;}
  ::selection{background:var(--gold);color:var(--black);}
  section, .h-panel, .horizontal-section{scroll-margin-top:90px;}

  /* ---------- FILM GRAIN (premium texture) ---------- */
  .grain{
    position:fixed; inset:0; z-index:250; pointer-events:none;
    opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  .vignette{
    position:fixed; inset:0; z-index:249; pointer-events:none;
    box-shadow:inset 0 0 220px rgba(0,0,0,0.75);
  }

  /* ---------- SCROLL PROGRESS ---------- */
  .progress-bar{
    position:fixed; top:0; left:0; height:2px; width:0%; z-index:300;
    background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
    box-shadow:0 0 14px rgba(231,200,119,0.55);
    transition:width .05s linear;
  }

  /* ---------- GLASS NAV ---------- */
  .glassnav{
    position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:200;
    display:flex; align-items:center; gap:4px;
    padding:8px 10px 8px 6px;
    border-radius:999px;
    background:rgba(8,8,9,0.62);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border:1px solid rgba(201,162,75,0.22);
    box-shadow:0 16px 44px rgba(0,0,0,0.5);
  }
  .glassnav .ck-mark{margin:0 10px 0 8px;transform:scale(0.72);}
  .glassnav a{
    font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:rgba(242,236,224,0.68); text-decoration:none;
    padding:9px 15px; border-radius:999px;
    transition:all .25s var(--ease);
    white-space:nowrap;
  }
  .glassnav a:hover{color:var(--gold-light);background:rgba(201,162,75,0.1);}
  @media (max-width:760px){
    .glassnav{max-width:92vw; overflow-x:auto; padding:7px; gap:2px;}
    .glassnav a{padding:8px 12px;font-size:10.5px;}
  }

  /* ---------- CK MONOGRAM ---------- */
  .ck-mark{display:inline-flex;flex-direction:column;align-items:center;line-height:1;}
  .ck-mark .letters{
    font-family:var(--serif); font-weight:500; font-style:italic;
    font-size:22px; letter-spacing:-.02em;
    background:linear-gradient(180deg,var(--gold-pale),var(--gold-deep));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .ck-mark .rule{width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin-top:4px;}

  /* ---------- SHARED BACKGROUND VIDEO LAYER ----------
     kept deliberately cheap: no CSS filter() on the <video> — filtering a
     playing video forces the browser to re-run that effect on every decoded
     frame, which is what was making the horizontal-scroll section heavy/janky.
     opacity alone is free (compositor-only), and the dark gradient "shade"
     does the same dimming job filter() was doing, without the per-frame cost. */
  .bg-video-layer{position:absolute; inset:0; z-index:0; overflow:hidden;}
  .bg-video-layer video{
    position:absolute; top:50%; left:50%; width:100%; height:100%;
    object-fit:cover; transform:translate(-50%,-50%);
    opacity:.16;
  }
  .bg-video-layer .shade{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(13,21,38,0.45), rgba(13,21,38,0.92) 72%),
      linear-gradient(180deg, rgba(13,21,38,0.6), rgba(13,21,38,0.8) 55%, var(--black) 100%);
  }

  /* ---------- STARFIELD (css fallback / accent) ---------- */
  .stars{
    position:absolute; inset:0;
    background-image:
      radial-gradient(1px 1px at 10% 20%, rgba(231,200,119,.5), transparent),
      radial-gradient(1px 1px at 30% 65%, rgba(231,200,119,.35), transparent),
      radial-gradient(1.5px 1.5px at 55% 30%, rgba(231,200,119,.3), transparent),
      radial-gradient(1px 1px at 75% 75%, rgba(231,200,119,.35), transparent),
      radial-gradient(1px 1px at 90% 15%, rgba(231,200,119,.3), transparent),
      radial-gradient(1px 1px at 45% 90%, rgba(231,200,119,.25), transparent),
      radial-gradient(1.5px 1.5px at 20% 45%, rgba(231,200,119,.25), transparent);
    opacity:.8;
    pointer-events:none;
  }

  /* ================= HERO ================= */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:0 8vw;
    background:var(--black);
    overflow:hidden;
  }
  .hero-photo{
    position:absolute; inset:0; z-index:0;
    background-image:
      linear-gradient(90deg, rgba(13,21,38,0.72) 0%, rgba(13,21,38,0.38) 45%, rgba(13,21,38,0.94) 100%),
      linear-gradient(0deg, var(--black) 0%, rgba(13,21,38,0.15) 32%, rgba(13,21,38,0.55) 100%),
      radial-gradient(ellipse at 72% 30%, rgba(201,162,75,0.12), transparent 60%),
      url('assets/joel-reisberg-portrait.jpg');
    background-size:cover; background-position:80% 12%;
    filter:grayscale(.15) contrast(1.05);
  }
  .hero-grid{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    align-items:center;
    width:100%;
    max-width:1320px;
    margin:0 auto;
  }
  .hero-eyebrow{
    display:flex; align-items:center; gap:14px;
    font-size:12px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--gold-light); opacity:.9; margin-bottom:26px;
  }
  .hero-eyebrow .ck-mark{transform:scale(.55);margin-right:2px;}
  .hero h1{
    font-family:var(--serif); font-weight:400;
    font-size:clamp(2.4rem,5vw,4.4rem);
    line-height:1.08; margin:0 0 24px; max-width:13ch;
    text-shadow:0 8px 40px rgba(0,0,0,0.6);
  }
  .hero h1 em{
    font-style:italic;font-weight:400;
    background:linear-gradient(120deg,var(--gold-light),var(--gold-pale) 50%,var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p.lead{
    max-width:480px; font-size:16.5px; color:rgba(242,236,224,0.72);
    margin:0 0 36px; font-weight:300;
  }
  .btn{
    position:relative;
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ivory); background:transparent;
    border:1px solid rgba(242,236,224,0.3);
    padding:16px 30px; border-radius:999px; cursor:pointer;
    text-decoration:none;
    transition:all .35s var(--ease);
    overflow:hidden;
  }
  .btn .arrow{transition:transform .35s var(--ease);}
  .btn:hover .arrow{transform:translateX(4px);}
  .btn:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--black);box-shadow:0 14px 40px rgba(201,162,75,0.3);transform:translateY(-2px);}
  .btn.solid{background:linear-gradient(135deg,var(--gold-light),var(--gold));border-color:var(--gold-light);color:var(--black);box-shadow:0 14px 36px rgba(201,162,75,0.25);}
  .btn.solid:hover{background:var(--gold-pale);border-color:var(--gold-pale);transform:translateY(-2px);}
  .btn.ghost{border-color:rgba(242,236,224,0.18);color:rgba(242,236,224,0.6);}
  .btn.ghost:hover{background:rgba(242,236,224,0.06);color:var(--ivory);border-color:rgba(242,236,224,0.3);box-shadow:none;transform:none;}

  .hero-visual{position:relative; height:480px;}
  .float-card{
    position:absolute;
    border-radius:var(--r-md);
    box-shadow:0 30px 80px rgba(0,0,0,0.65);
    border:1px solid rgba(201,162,75,0.22);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:22px;
    overflow:hidden;
    transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  .float-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 44px 100px rgba(0,0,0,0.7);}
  .float-card::before{content:""; position:absolute; inset:0; opacity:.95;}
  .float-card::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.55));
  }
  .float-card .book-title{position:relative;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ivory);}
  .float-card .book-sub{position:relative;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin-top:4px;}
  .card-a{width:230px;height:330px;top:20px;left:70px;z-index:2;}
  .card-a::before{background:linear-gradient(150deg,#26262b,var(--near-black) 75%);}
  .card-b{width:170px;height:240px;top:230px;left:0;z-index:3;}
  .card-b::before{background:linear-gradient(150deg,var(--olive-deep),var(--near-black) 78%);}
  .card-c{width:160px;height:220px;top:0;left:270px;z-index:1;opacity:.95;}
  .card-c::before{background:linear-gradient(150deg,var(--gold-light),var(--gold-deep) 85%);}
  .card-c .book-title,.card-c .book-sub{color:#241c08;}

  .scroll-cue{
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold-light); opacity:.75; z-index:2;
  }
  .scroll-cue .line{width:1px;height:38px;background:linear-gradient(var(--gold-light),transparent);animation:pulse-line 2s ease-in-out infinite;}
  @keyframes pulse-line{0%,100%{opacity:.25;}50%{opacity:1;}}

  /* ---------- CURSOR GLOW (hero) ---------- */
  .cursor-glow{
    position:absolute; width:560px; height:560px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,162,75,0.14), transparent 70%);
    pointer-events:none; z-index:1;
    transform:translate(-50%,-50%);
    left:50%; top:50%;
    transition:left .5s var(--ease), top .5s var(--ease);
  }

  @media (max-width:900px){
    .hero{padding-top:110px;padding-bottom:110px;min-height:auto;align-items:flex-start;}
    .hero-photo{background-position:65% 15%;}
    .hero-grid{grid-template-columns:1fr;text-align:left;}
    .hero-visual{height:340px;margin-top:20px;}
    .card-a{width:170px;height:240px;left:40px;}
    .card-b{width:130px;height:180px;top:160px;}
    .card-c{width:120px;height:160px;left:190px;}
    .scroll-cue{bottom:24px;}
  }

  /* ---------- MARQUEE ---------- */
  .marquee{
    position:relative;
    background:var(--near-black);
    border-top:1px solid rgba(201,162,75,0.14);
    border-bottom:1px solid rgba(201,162,75,0.14);
    padding:22px 0;
    overflow:hidden;
  }
  .marquee-track{display:flex; width:max-content; animation:marquee 28s linear infinite;}
  .marquee-track span{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(1.1rem,2.4vw,1.6rem);
    color:rgba(242,236,224,0.4);
    padding:0 2.2vw;
    white-space:nowrap;
  }
  .marquee-track span.accent{color:var(--gold-light);font-style:normal;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ---------- SCROLL REVEAL ---------- */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
  .reveal.visible{opacity:1; transform:translateY(0);}
  .reveal-stagger.visible > *{opacity:1;transform:translateY(0);}
  .reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal-stagger.visible > *:nth-child(1){transition-delay:.02s;}
  .reveal-stagger.visible > *:nth-child(2){transition-delay:.09s;}
  .reveal-stagger.visible > *:nth-child(3){transition-delay:.16s;}
  .reveal-stagger.visible > *:nth-child(4){transition-delay:.23s;}
  .reveal-stagger.visible > *:nth-child(5){transition-delay:.30s;}
  .reveal-stagger.visible > *:nth-child(6){transition-delay:.37s;}

  /* ================= HORIZONTAL PIN SECTION ================= */
  .horizontal-section{position:relative; background:var(--black);}
  .horizontal-sticky{
    position:sticky; top:0; height:100vh; height:100dvh;
    overflow:hidden;
    contain:paint;
    isolation:isolate;
  }
  .horizontal-track{display:flex; height:100%; width:max-content; will-change:transform;}
  .h-panel{
    position:relative;
    width:100vw; height:100%; flex:0 0 100vw;
    display:flex; align-items:center;
    padding:0 8vw;
    overflow:hidden;
    background:transparent;
    transition:opacity .1s linear;
  }
  .h-panel .stars{opacity:.45;}
  .h-panel-inner{position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto;}
  .h-kicker{
    display:flex; align-items:center; gap:10px;
    font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--gold-light); opacity:.85; margin-bottom:20px;
  }
  .h-kicker::before{content:"";width:22px;height:1px;background:var(--gold);display:inline-block;}
  .h-giant{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(2.8rem,9.5vw,8rem);
    line-height:0.95; margin:0 0 26px;
    background:linear-gradient(180deg, var(--gold-pale) 0%, var(--gold) 55%, rgba(138,106,36,0.35) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    white-space:nowrap;
  }
  .h-text{max-width:520px;font-size:15.5px;color:rgba(242,236,224,0.68);font-weight:300;}
  .h-quote{
    font-family:var(--serif); font-style:italic;
    font-size:clamp(1.15rem,2.1vw,1.55rem);
    color:var(--ivory); max-width:560px; line-height:1.5; margin:0 0 14px;
  }
  .h-link{
    display:inline-block; margin-top:24px; font-size:12px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--gold-light); border-bottom:1px solid rgba(231,200,119,.4);
    padding-bottom:3px;
  }

  /* subtle per-panel ambiance — soft radial tint, no hard edges */
  .panel-manifeste::before,
  .panel-romans::before,
  .panel-skyfen::before,
  .panel-resonances::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  }
  .panel-manifeste::before{background:radial-gradient(ellipse at 15% 50%, rgba(87,98,63,0.14), transparent 60%);}
  .panel-romans::before{background:radial-gradient(ellipse at 85% 50%, rgba(201,162,75,0.09), transparent 55%);}
  .panel-skyfen::before{background:radial-gradient(ellipse at 30% 70%, rgba(87,98,63,0.13), transparent 55%);}
  .panel-resonances::before{background:radial-gradient(ellipse at 80% 30%, rgba(201,162,75,0.09), transparent 55%);}

  .romans-cards{position:absolute; right:6vw; top:50%; transform:translateY(-50%); height:70%; width:40%; z-index:2;}
  .romans-cards .float-card{position:absolute;}
  .rc-1{width:200px;height:290px;top:0;right:60px;}
  .rc-1::before{background:linear-gradient(150deg,var(--gold-light),var(--gold-deep) 85%);}
  .rc-1 .book-title,.rc-1 .book-sub{color:#241c08;}
  .rc-2{width:170px;height:240px;top:120px;right:230px;}
  .rc-2::before{background:linear-gradient(150deg,var(--olive-deep),var(--near-black) 78%);}
  .rc-3{width:150px;height:210px;top:250px;right:0;}
  .rc-3::before{background:linear-gradient(150deg,#3a3833,#18170f 80%);}

  .escale-line{position:relative; display:flex; align-items:center; gap:0; margin-top:56px; max-width:640px; z-index:2;}
  .escale-line::before{content:""; position:absolute; left:0; right:0; top:26px; height:1px; background:rgba(201,162,75,0.3);}
  .escale-dot{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:12px;}
  .escale-dot .n{
    width:52px;height:52px;border-radius:50%;
    border:1px solid var(--gold-light); color:var(--gold-light);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif); font-size:16px; background:var(--near-black);
  }
  .escale-dot span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,236,224,0.55);}
  .escale-dot:nth-child(2n) .n{transform:translateY(-14px);}
  .escale-dot:nth-child(2n) span{transform:translateY(-14px);}

  .pill-field{position:relative; height:100%; z-index:2;}
  .res-pill{
    position:absolute;
    font-family:var(--serif); font-style:italic; font-size:15px;
    padding:10px 20px; border-radius:999px;
    border:1px solid rgba(201,162,75,0.35);
    background:rgba(201,162,75,0.06);
    backdrop-filter:blur(4px);
    color:var(--gold-light);
    white-space:nowrap;
  }

  /* ---------- ROTATING BADGE ---------- */
  .badge-spin{position:absolute; right:6vw; bottom:8vh; z-index:5; width:132px; height:132px;}
  .badge-ring{width:100%; height:100%; animation:spin 18s linear infinite;}
  @keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  .badge-arrow{
    position:absolute; inset:0; margin:auto; width:18px;height:18px;
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-light); font-size:20px;
  }

  /* ---------- MOBILE: same pinned parallax mechanic, tuned for touch ----------
     stacked content (kicker + giant title + quote + text [+ pills/timeline]) can
     be taller than one screen on narrow/short viewports — rather than clip it
     with overflow:hidden, the pinned block itself grows taller than 100dvh here
     so every line stays fully visible; the JS pin math reads the block's real
     rendered height (see the horizontal-pin script) so the scroll-hijack stays
     in sync with whatever height these breakpoints produce. */
  @media (max-width:900px){
    .horizontal-sticky{height:132dvh;}
    .h-panel{padding:0 7vw;}
    .h-giant{font-size:clamp(2.3rem,13vw,4rem);white-space:normal;}
    .h-text{font-size:14px;max-width:82vw;}
    .h-quote{font-size:1.05rem;max-width:82vw;}
    .h-kicker{font-size:10.5px;}
    .badge-spin{width:88px;height:88px;right:5vw;bottom:4vh;}
    .romans-cards{right:5vw;width:52%;height:56%;top:56%;}
    .rc-1{width:150px;height:210px;right:20px;}
    .rc-2{width:120px;height:170px;top:90px;right:120px;}
    .rc-3{width:105px;height:150px;top:190px;right:0;}
  }
  /* below this width the decorative absolute-positioned overlays (floating book
     stack, résonance pills) would need even more extra height to avoid
     overlapping the paragraph text — simpler and cleaner to drop them here and
     let the kicker / giant title / quote / text carry the panel; the escale
     timeline stays since it reads fine as plain stacked content. */
  @media (max-width:640px){
    .horizontal-sticky{height:150dvh;}
    .romans-cards,.pill-field{display:none;}
    .escale-line{margin-top:32px;max-width:100%;}
    .escale-dot .n{width:38px;height:38px;font-size:12.5px;}
    .escale-dot span{font-size:8.5px;letter-spacing:.04em;}
    .escale-dot:nth-child(2n) .n,.escale-dot:nth-child(2n) span{transform:none;}
    .badge-spin{width:74px;height:74px;right:4vw;bottom:3vh;}
  }
  /* short viewports (landscape phones) need the same treatment even above
     640px width, since it's the available height — not width — that's tight */
  @media (max-height:520px) and (max-width:900px){
    .horizontal-sticky{height:175dvh;}
  }

  /* ================= VERTICAL SECTIONS ================= */
  .section{padding:130px 8vw; position:relative; background:var(--black);}
  .section-head{max-width:640px;margin:0 auto 56px;text-align:center;position:relative;z-index:2;}
  .section-head .kicker{
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold-light);margin-bottom:16px;
  }
  .section-head .kicker::before,.section-head .kicker::after{content:"";width:22px;height:1px;background:var(--gold);}
  .section-head h2{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(2rem,4vw,3rem);margin:0 0 14px;
  }
  .section-head p{color:rgba(242,236,224,0.6);margin:0;font-weight:300;}

  .carnet-grid{
    display:grid; gap:1px;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    max-width:1200px;margin:0 auto 48px;
    position:relative;z-index:2;
    background:rgba(201,162,75,0.1);
    border:1px solid rgba(201,162,75,0.1);
  }
  .carnet-card{
    background:var(--near-black);
    padding:34px 30px;
    transition:background .4s var(--ease);
  }
  .carnet-card:hover{background:var(--charcoal);}
  .carnet-card p.txt{
    font-family:var(--serif); font-style:italic; font-size:17px;
    color:var(--ivory); margin:0 0 18px; line-height:1.5;
  }
  .carnet-card .date{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);opacity:.75;}
  .center-cta{text-align:center;position:relative;z-index:2;}

  /* ---------- LIVRES / PRODUITS — SHARED SHOP GRID ---------- */
  .shop-grid{
    display:grid; gap:26px;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    max-width:1280px;margin:0 auto 40px;
    position:relative;z-index:2;
  }
  .slider-hint{display:none;}
  .shop-card{
    position:relative;
    background:var(--near-black);
    border:1px solid rgba(201,162,75,0.16);
    border-radius:var(--r-lg);
    padding:18px 18px 26px;
    overflow:hidden;
    transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  }
  .shop-card:hover{transform:translateY(-8px);box-shadow:0 34px 70px rgba(0,0,0,0.55);border-color:rgba(201,162,75,0.4);}
  .shop-card .thumb{height:220px; border-radius:var(--r-md); margin-bottom:20px; position:relative; overflow:hidden;}
  .shop-card .thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.06), transparent 40%, rgba(0,0,0,0.25));}
  .shop-badge{
    position:absolute; top:14px; left:14px; z-index:2;
    font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    background:rgba(13,21,38,0.75); color:var(--gold-light);
    padding:6px 12px; border-radius:999px;
    border:1px solid rgba(201,162,75,0.35);
    backdrop-filter:blur(6px);
  }
  .shop-cat{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);opacity:.75;margin-bottom:8px;}
  .shop-card h3{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 6px;}
  .shop-card p.desc{font-size:13.5px;color:rgba(242,236,224,0.55);margin:0 0 16px;line-height:1.55;font-weight:300;}
  .shop-foot{display:flex;align-items:center;justify-content:space-between;}
  .shop-price{font-family:var(--serif);font-size:16px;color:var(--gold-light);}
  .shop-link{
    font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sand);
    display:inline-flex;align-items:center;gap:6px;text-decoration:none;
    border-bottom:1px solid rgba(242,236,224,.25);padding-bottom:2px;
    transition:color .3s ease, border-color .3s ease;
  }
  .shop-link:hover{color:var(--gold-light);border-color:var(--gold-light);}

  /* ---------- MOBILE: product grids become a one-at-a-time slider ---------- */
  @media (max-width:760px){
    .shop-grid{
      display:flex; gap:16px;
      overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      margin:0 -7vw 28px; padding:4px 7vw 14px;
      scrollbar-width:none;
    }
    .shop-grid::-webkit-scrollbar{display:none;}
    .shop-card{flex:0 0 88vw; scroll-snap-align:center; scroll-snap-stop:always;}
    .shop-card .thumb{height:56vw;max-height:260px;}
    .slider-hint{
      position:relative; z-index:2;
      display:flex; align-items:center; justify-content:center; gap:8px;
      margin:-14px 0 30px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
      color:rgba(242,236,224,0.4);
    }
    .slider-hint .arrow-l,.slider-hint .arrow-r{opacity:.6;}
  }

  .thumb-book-1{background:linear-gradient(150deg,#26262b,var(--near-black) 78%);}
  .thumb-book-2{background:linear-gradient(150deg,#2c2c30,#141416 80%);}
  .thumb-book-3{background:linear-gradient(150deg,#33312c,#141412 82%);}
  .thumb-p-1{background:linear-gradient(150deg,#c9a24b,#5f4818 85%);}
  .thumb-p-2{background:linear-gradient(150deg,#4a4a3f,#1c1c17 85%);}
  .thumb-p-3{background:linear-gradient(150deg,#2c2c30,#101012 85%);}
  .thumb-p-4{background:linear-gradient(150deg,#e7c877,#8a6a24 85%);}
  .thumb-p-5{background:linear-gradient(150deg,#413a45,#161418 85%);}
  .thumb-p-6{background:linear-gradient(150deg,#4f4a37,#1a1710 85%);}

  /* ---------- AUDIO EXPERIENCE CALLOUT ---------- */
  .experience-box{
    max-width:1280px; margin:0 auto; position:relative; z-index:2;
    display:flex; align-items:center; gap:22px; flex-wrap:wrap;
    justify-content:space-between;
    padding:28px 34px;
    border:1px solid rgba(201,162,75,0.25);
    border-radius:var(--r-lg);
    background:linear-gradient(120deg, rgba(201,162,75,0.07), transparent 60%);
  }
  .experience-box .exp-left{display:flex;align-items:center;gap:18px;}
  .exp-icon{
    width:46px;height:46px;border-radius:50%;
    border:1px solid rgba(201,162,75,0.4);
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-light); font-size:18px; flex:0 0 auto;
  }
  .experience-box h4{font-family:var(--serif);font-weight:500;font-size:17px;margin:0 0 4px;}
  .experience-box p{font-size:13px;color:rgba(242,236,224,0.55);margin:0;max-width:440px;font-weight:300;}

  /* ---------- SHARED OLIVE TAG (brief accent colour) ---------- */
  .tag{
    display:inline-block;font-size:12px;padding:7px 15px;border-radius:999px;
    background:rgba(87,98,63,0.16);color:var(--olive-light);
    border:1px solid rgba(87,98,63,0.42);
  }

  /* ---------- ROMANS — narrative spread, distinct from the sober Livres grid ---------- */
  .romans-spread{
    max-width:1200px;margin:0 auto;position:relative;z-index:2;
    display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center;
  }
  .romans-cover{
    position:relative;aspect-ratio:3/4;border-radius:var(--r-lg);
    background:linear-gradient(150deg,var(--gold-light),var(--gold-deep) 88%);
    box-shadow:0 40px 90px rgba(0,0,0,0.5);
    display:flex;flex-direction:column;justify-content:flex-end;padding:32px;
    overflow:hidden;
  }
  .romans-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(13,21,38,0.55));}
  .romans-cover .rc-title{position:relative;font-family:var(--serif);font-style:italic;font-size:28px;color:#241c08;}
  .romans-cover .rc-sub{position:relative;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#3a2d0d;margin-top:6px;}
  .romans-text .tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 26px;}
  .romans-text p.syn{font-size:16px;color:rgba(242,236,224,0.72);line-height:1.75;margin:0 0 18px;font-weight:300;}
  .romans-text p.syn:first-of-type{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ivory);line-height:1.55;}
  @media(max-width:900px){
    .romans-spread{grid-template-columns:1fr;gap:32px;}
    .romans-cover{max-width:280px;margin:0 auto;}
  }

  /* ---------- MUSIQUES & FILMS ---------- */
  .media-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1200px;margin:0 auto;position:relative;z-index:2;}
  .media-card{
    position:relative;border-radius:var(--r-lg);overflow:hidden;
    background:var(--near-black);border:1px solid rgba(201,162,75,0.14);
    transition:transform .4s var(--ease),border-color .4s var(--ease);
  }
  .media-card:hover{transform:translateY(-6px);border-color:rgba(201,162,75,0.4);}
  .media-thumb{height:170px;position:relative;display:flex;align-items:center;justify-content:center;}
  .media-play{
    width:52px;height:52px;border-radius:50%;border:1px solid rgba(242,236,224,0.5);
    display:flex;align-items:center;justify-content:center;color:var(--ivory);font-size:16px;
    background:rgba(13,21,38,0.4);backdrop-filter:blur(4px);
  }
  .media-body{padding:20px 22px 24px;}
  .media-cat{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);opacity:.8;margin-bottom:6px;}
  .media-body h3{font-family:var(--serif);font-weight:500;font-size:16.5px;margin:0 0 8px;}
  .media-body p{font-size:13px;color:rgba(242,236,224,0.55);margin:0;font-weight:300;line-height:1.5;}
  .media-thumb-a{background:linear-gradient(150deg,var(--olive),var(--olive-deep) 85%);}
  .media-thumb-b{background:linear-gradient(150deg,#2c3c30,var(--near-black) 82%);}
  .media-thumb-c{background:linear-gradient(150deg,var(--gold),var(--gold-deep) 85%);}
  .media-thumb-c .media-play{color:#241c08;border-color:rgba(36,28,8,0.4);}

  /* ---------- À PROPOS ---------- */
  .about-wrap{max-width:680px;margin:0 auto;text-align:center;position:relative;z-index:2;}
  .about-wrap p{font-size:16px;color:rgba(242,236,224,0.72);line-height:1.8;margin:0 0 20px;font-weight:300;}
  .about-credit{
    margin-top:32px;padding-top:28px;border-top:1px solid rgba(201,162,75,0.16);
    font-size:13px;color:rgba(242,236,224,0.45);font-style:italic;
  }

  /* ---------- CONTACT ---------- */
  .contact-grid{max-width:1000px;margin:0 auto;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;}
  .contact-form{display:flex;flex-direction:column;gap:14px;}
  .contact-form input,.contact-form textarea,.newsletter-row input{
    background:var(--near-black);border:1px solid rgba(201,162,75,0.2);border-radius:var(--r-sm);
    padding:14px 16px;color:var(--ivory);font-family:var(--sans);font-size:14px;
    transition:border-color .3s ease;
  }
  .contact-form input:focus,.contact-form textarea:focus,.newsletter-row input:focus{outline:none;border-color:rgba(201,162,75,0.55);}
  .contact-form textarea{min-height:120px;resize:vertical;font-family:var(--sans);}
  .contact-form ::placeholder,.newsletter-row ::placeholder{color:rgba(242,236,224,0.35);}
  .contact-side h4{font-family:var(--serif);font-weight:500;font-size:16px;margin:0 0 14px;color:var(--gold-light);}
  .contact-side .social-row{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;}
  .contact-side .social-row a{font-size:14px;color:rgba(242,236,224,0.7);text-decoration:none;border-bottom:1px solid transparent;transition:all .25s ease;}
  .contact-side .social-row a:hover{color:var(--gold-light);border-color:rgba(231,200,119,.4);}
  .newsletter-row{display:flex;gap:10px;flex-wrap:wrap;}
  .newsletter-row input{flex:1 1 180px;}
  @media(max-width:800px){.contact-grid{grid-template-columns:1fr;gap:36px;}}

  /* ================= CTA FINAL ================= */
  .cta-final{
    min-height:70vh; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    background:var(--black);
    padding:80px 8vw;
    overflow:hidden;
  }
  .cta-final h2{
    position:relative; z-index:2;
    font-family:var(--serif); font-weight:500;
    font-size:clamp(2.2rem,6.5vw,5rem);
    margin:0 0 36px;
    background:linear-gradient(120deg,var(--gold-pale),var(--gold) 55%,var(--gold-light));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .cta-final .ck-mark{position:relative;z-index:2;margin-bottom:30px;}

  footer{
    padding:56px 8vw 40px; text-align:center;
    background:var(--near-black);
    border-top:1px solid rgba(201,162,75,0.12);
  }
  footer .ck-mark{margin-bottom:16px;}
  footer p{font-size:12px;color:rgba(242,236,224,0.38);max-width:580px;margin:6px auto;font-weight:300;}