/*
Theme Name: Charly Kane
Theme URI: https://charly.grower.fr
Author: Charly Kane
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:130px;}

  /* ---------- 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;
  }

  /* ---------- VOICE BAR ---------- */
  .ck-voicebar{
    position:fixed; top:0; left:0; right:0; z-index:240;
    height:56px;
    display:flex; align-items:center; gap:14px;
    padding:0 18px;
    background:rgba(8,12,22,0.78);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid rgba(201,162,75,0.18);
  }
  .ck-voice-play{
    flex:0 0 38px; width:38px; height:38px;
    border-radius:50%;
    border:1px solid rgba(201,162,75,0.45);
    background:linear-gradient(160deg,rgba(231,200,119,0.18),rgba(13,21,38,0.4));
    cursor:pointer; padding:0;
    display:grid; place-items:center;
  }
  .ck-voice-play:disabled{opacity:.4;cursor:not-allowed;}
  .ck-voice-play-icon{
    width:0; height:0;
    border-style:solid;
    border-width:7px 0 7px 12px;
    border-color:transparent transparent transparent var(--gold-light);
    margin-left:3px;
  }
  .ck-voicebar.is-playing .ck-voice-play-icon{
    width:10px; height:12px;
    border:0;
    background:linear-gradient(90deg,var(--gold-light) 0 3px, transparent 3px 7px, var(--gold-light) 7px 10px);
    margin-left:0;
  }
  .ck-voice-meta{flex:0 0 auto; min-width:118px;}
  .ck-voice-kicker{
    display:block;
    font-size:9px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold-light);
  }
  .ck-voice-now{
    display:block;
    font-family:var(--serif); font-style:italic;
    font-size:13px; color:var(--ivory);
    max-width:220px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ck-voice-scope{
    position:relative;
    flex:1 1 auto;
    height:36px;
    min-width:80px;
  }
  .ck-voice-scope canvas{
    display:block; width:100%; height:100%;
  }
  .ck-voice-scope input[type=range]{
    position:absolute; inset:0;
    width:100%; height:100%;
    opacity:0; cursor:pointer; margin:0;
  }
  .ck-voice-time{
    flex:0 0 auto;
    font-size:11px; letter-spacing:.04em;
    color:rgba(242,236,224,0.55);
    font-variant-numeric:tabular-nums;
  }
  .ck-voice-sep{margin:0 4px; opacity:.5;}
  @media (max-width:720px){
    .ck-voicebar{gap:10px; padding:0 10px;}
    .ck-voice-meta{min-width:0; max-width:28vw;}
    .ck-voice-kicker{display:none;}
    .ck-voice-now{font-size:12px; max-width:28vw;}
    .ck-voice-time{font-size:10px;}
  }

  /* ---------- GLASS NAV ---------- */
  .glassnav{
    position:fixed; top:68px; 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);}
  .glassnav a.nav-home{
    padding:0; letter-spacing:0; text-transform:none;
    background:transparent; display:inline-flex; align-items:center;
  }
  .glassnav a.nav-home:hover{background:transparent;}
  @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:72px 8vw 0;
    background:var(--black);
    overflow:hidden;
  }
  .hero-photo{
    position:absolute; inset:0; z-index:0;
    background-image:
      linear-gradient(90deg, rgba(13,21,38,0.82) 0%, rgba(13,21,38,0.28) 42%, rgba(13,21,38,0.08) 68%, rgba(13,21,38,0.35) 100%),
      linear-gradient(180deg, rgba(13,21,38,0.25) 0%, transparent 28%, rgba(13,21,38,0.55) 100%),
      url('assets/hero-profil.jpg');
    background-size:cover; background-position:78% 42%;
    filter:contrast(1.08);
  }
  .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; display:flex; align-items:center; justify-content:center;}
  .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);z-index:1;}
  .float-card .book-sub{position:relative;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin-top:4px;z-index:1;}
  .card-a{
    position:relative; width:260px; height:380px; top:auto; left:auto;
    background-size:cover; background-position:center;
  }
  .card-a::before{display:none;}
  .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:72% 38%;opacity:.55;}
    .hero-grid{grid-template-columns:1fr;text-align:left;}
    .hero-visual{height:360px;margin-top:20px;}
    .card-a{width:200px;height:300px;left:auto;}
    .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 ---------- */
  .ck-word{display:inline;}
  @media (prefers-reduced-motion:reduce){
    .ck-word{opacity:1 !important;}
  }

  .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;}

  /* ---------- PER-PANEL BACKGROUND VIDEO (changement d'univers) ----------
     hidden by default (opacity 0); JS adds .active on the panel that is
     currently centred in the scroll-jack and removes it from the others,
     so each slide's video fades in as you arrive and stops as you leave. */
  .panel-bgvideo{
    /* anchored to the top + capped at 100dvh (the actually-visible sticky
       viewport window) rather than inset:0 on the panel itself — on mobile
       .h-panel is deliberately taller than the viewport (see the mobile pin
       breakpoints below) so its text never clips, but that means inset:0
       would centre the video crop on the MIDDLE OF THAT TALLER BOX, well
       below what's actually on screen. Capping the height keeps the video's
       own centre aligned with the viewport's centre on every breakpoint. */
    position:absolute; top:0; left:0; right:0; height:100vh; height:100dvh;
    overflow:hidden;
    opacity:0; transition:opacity .15s linear;
    pointer-events:none;
  }
  .panel-bgvideo video{
    position:absolute; top:50%; left:50%; width:100%; height:100%;
    object-fit:cover; transform:translate(-50%,-50%);
  }
  .panel-bgvideo .veil{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 50% 35%, rgba(13,21,38,0.32), rgba(13,21,38,0.62) 75%),
      linear-gradient(180deg, rgba(13,21,38,0.28), rgba(13,21,38,0.42) 55%, rgba(13,21,38,0.75) 100%);
  }
  .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:36px 40px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:920px;margin:0 auto;
    position:relative;z-index:2;
  }
  .carnet-card{
    margin:0;
    background:transparent;
    padding:8px 4px 0 28px;
    border:0;
    border-left:1px solid rgba(201,162,75,0.38);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:0;
  }
  .carnet-card:hover{background:transparent;}
  .carnet-card blockquote{
    margin:0 0 16px;
    padding:0;
    border:0;
    quotes:"«" "»";
  }
  .carnet-card blockquote p{
    font-family:var(--serif); font-style:italic; font-weight:300;
    font-size:clamp(18px,2vw,23px);
    color:var(--ivory); margin:0; line-height:1.4;
  }
  .carnet-card figcaption{
    font-family:var(--sans);
    font-style:normal;
    font-size:11px;
    letter-spacing:.06em;
    line-height:1.55;
    color:rgba(231,200,119,0.78);
  }
  .carnet-card figcaption cite{
    font-style:italic;
    font-family:var(--serif);
    letter-spacing:0;
    color:var(--gold-light);
  }
  .center-cta{text-align:center;position:relative;z-index:2;}
  @media (max-width:720px){
    .carnet-grid{grid-template-columns:1fr;gap:32px;max-width:440px;}
    .carnet-card{padding-left:22px;}
  }

  /* ---------- 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;}
  .buy-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
  .buy-row .btn{text-decoration:none;}
  @media(max-width:900px){
    .romans-spread{grid-template-columns:1fr;gap:32px;}
    .romans-cover{max-width:280px;margin:0 auto;}
  }

  /* Livres II & III — pas encore de couverture réelle (romans non publiés).
     Même format exact que la couverture du Livre I (romans-cover / romans-spread),
     simplement sans photo : une reliure sobre et haut de gamme plutôt qu'une
     vignette générique, pour que la trilogie se lise comme un vrai rayon de livres. */
  .romans-cover--soon{
    justify-content:center;align-items:center;text-align:center;
    border:1px solid rgba(201,162,75,0.28);
  }
  .romans-cover--soon::after{content:none;}
  .romans-cover--soon .rc-title{color:var(--ivory);font-size:26px;padding:0 8px;}
  .romans-cover--soon .rc-sub{color:var(--gold-light);opacity:.85;margin-top:10px;}
  .romans-cover--ii{background:linear-gradient(160deg,#20301f,var(--near-black) 85%);}
  .romans-cover--iii{background:linear-gradient(160deg,#241c08,var(--near-black) 85%);}

  /* ---------- 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;}
  .welcome-copy{max-width:720px;}
  .welcome-copy p.welcome-turn,
  .welcome-copy p.welcome-axis{
    font-family:var(--serif); font-style:italic; font-size:22px;
    color:var(--ivory); line-height:1.45; margin:36px 0 20px;
  }
  .welcome-copy p.welcome-close{
    font-family:var(--serif); font-style:italic; font-size:20px;
    color:var(--gold-light); margin:36px 0 0;
  }
  .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 (dans le modal) ---------- */
  .contact-form{display:flex;flex-direction:column;gap:14px;}
  .ck-field{display:flex;flex-direction:column;gap:7px;}
  .ck-field span{
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(231,200,119,.72);
  }
  .contact-form input,.contact-form textarea,.newsletter-row input{
    width:100%;
    background:rgba(13,21,38,0.55);border:1px solid rgba(201,162,75,0.18);border-radius:0;
    padding:13px 0 12px;color:var(--ivory);font-family:var(--sans);font-size:14px;
    transition:border-color .35s var(--ease);
  }
  .contact-form input,.newsletter-row input{border-left:0;border-right:0;border-top:0;}
  .contact-form textarea{min-height:96px;resize:vertical;font-family:var(--sans);padding-top:10px;}
  .contact-form input:focus,.contact-form textarea:focus,.newsletter-row input:focus{outline:none;border-color:rgba(201,162,75,0.7);}
  .contact-form ::placeholder,.newsletter-row ::placeholder{color:rgba(242,236,224,0.28);}
  .ck-modal-foot{
    display:grid;grid-template-columns:1fr 1fr;gap:32px;
    margin-top:36px;padding-top:28px;
    border-top:1px solid rgba(201,162,75,0.14);
  }
  .ck-modal-foot h4{font-family:var(--serif);font-weight:400;font-size:15px;margin:0 0 12px;color:var(--gold-light);}
  .ck-modal-foot p{font-size:13px;color:rgba(242,236,224,0.5);margin:0 0 12px;font-weight:300;line-height:1.5;}
  .social-row{display:flex;gap:16px;flex-wrap:wrap;}
  .social-row a{font-size:13px;color:rgba(242,236,224,0.62);text-decoration:none;border-bottom:1px solid transparent;transition:all .25s ease;}
  .social-row a:hover{color:var(--gold-light);border-color:rgba(231,200,119,.4);}
  .newsletter-row{display:flex;gap:10px;align-items:flex-end;}
  .newsletter-row input{flex:1 1 auto;}
  @media(max-width:720px){.ck-modal-foot{grid-template-columns:1fr;gap:28px;}}

  /* ---------- CONTACT MODAL ---------- */
  .ck-modal{
    position:fixed;inset:0;z-index:400;
    display:flex;align-items:center;justify-content:center;
    padding:28px 18px;
  }
  .ck-modal[hidden]{display:none;}
  .ck-modal-veil{
    position:absolute;inset:0;
    background:rgba(8,12,22,0.72);
    backdrop-filter:blur(18px) saturate(120%);
    -webkit-backdrop-filter:blur(18px) saturate(120%);
    opacity:0;
  }
  .ck-modal-panel{
    position:relative;z-index:2;
    opacity:0;
    width:min(560px,100%);
    max-height:min(88vh,820px);
    overflow:auto;
    padding:36px 36px 32px;
    background:linear-gradient(180deg,rgba(19,31,51,0.96),rgba(13,21,38,0.98));
    border:1px solid rgba(201,162,75,0.22);
    box-shadow:0 30px 80px rgba(0,0,0,0.45);
  }
  .ck-modal-panel .kicker{
    display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);
  }
  .ck-modal-panel .kicker::before,.ck-modal-panel .kicker::after{content:"";width:18px;height:1px;background:var(--gold);}
  .ck-modal-panel h2{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(1.8rem,4vw,2.4rem);
    text-align:center;margin:0 0 10px;
  }
  .ck-modal-lead{
    text-align:center;color:rgba(242,236,224,0.55);
    font-size:14px;font-weight:300;line-height:1.55;
    margin:0 0 28px;
  }
  .ck-modal-close{
    position:absolute;top:18px;right:18px;
    background:none;border:0;padding:8px;
    font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(242,236,224,0.45);cursor:pointer;
  }
  .ck-modal-close:hover{color:var(--gold-light);}
  .ck-modal-panel .btn.solid{align-self:flex-start;margin-top:6px;}
  body.ck-modal-open{overflow:hidden;}
  @media (max-width:560px){
    .ck-modal{padding:12px;align-items:flex-end;}
    .ck-modal-panel{padding:28px 20px 24px;max-height:92vh;}
  }
  @media (prefers-reduced-motion:reduce){
    .ck-modal-veil,.ck-modal-panel{transition:none;}
  }
  .ck-modal-legal{width:min(640px,100%);}
  .ck-legal-work{
    text-align:center;margin:0 0 6px;
    font-family:var(--serif);font-size:15px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--gold-light);
  }
  .ck-legal-name{
    text-align:center;margin:0 0 22px;
    font-family:var(--serif);font-size:20px;color:var(--gold-pale);
  }
  .ck-legal-body p{
    font-size:14px;font-weight:300;line-height:1.65;
    color:rgba(242,236,224,0.62);margin:0 0 14px;
  }
  .ck-legal-meta{
    list-style:none;margin:8px 0 18px;padding:16px 18px;
    border:1px solid rgba(201,162,75,0.16);
    background:rgba(13,21,38,0.45);
  }
  .ck-legal-meta li{
    font-size:13px;font-weight:300;line-height:1.7;
    color:rgba(242,236,224,0.7);
  }
  .ck-legal-close{
    text-align:center;margin-top:8px;
    font-family:var(--serif);font-style:italic;color:var(--gold-pale)!important;
  }
  footer .footer-links{margin-top:14px;}
  footer .footer-links a{
    color:rgba(231,200,119,0.7);text-decoration:none;
    letter-spacing:.08em;text-transform:uppercase;font-size:11px;
  }
  footer .footer-links a:hover{color:var(--gold-light);}

  /* ================= 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;}


footer .footer-copy{margin:0;font-size:12px;letter-spacing:.08em;color:rgba(242,236,224,.45);}
footer .footer-copy .footer-sep{margin:0 .45em;opacity:.5;}
footer .footer-copy a{color:rgba(231,200,119,.7);text-decoration:none;}
footer .footer-copy a:hover{color:var(--gold-light);}