/* ============================================================
   KAPFINE — couche FX (signature interactive)
   Détachable : retirez ce fichier + kapfine-fx.js pour revenir
   à la version statique.
   ============================================================ */

/* ---------- Grain filmique ---------- */
.grain{
  position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-4%,3%); }
  50%{ transform:translate(3%,-3%); } 75%{ transform:translate(-3%,-2%); } 100%{ transform:translate(2%,4%); }
}

/* ---------- Aurores dorées : halos qui dérivent en fond ---------- */
.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aurora .orb{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
  background:radial-gradient(circle at 50% 50%, rgba(201,168,76,.32), transparent 70%);
  will-change:transform;
}
.aurora .orb.o1{ width:46vw; height:46vw; top:-12vw; left:-6vw; animation:drift1 26s ease-in-out infinite; }
.aurora .orb.o2{ width:38vw; height:38vw; top:30vh; right:-10vw; opacity:.4;
  background:radial-gradient(circle at 50% 50%, rgba(139,105,20,.4), transparent 70%); animation:drift2 32s ease-in-out infinite; }
.aurora .orb.o3{ width:30vw; height:30vw; bottom:-8vw; left:30vw; opacity:.35;
  background:radial-gradient(circle at 50% 50%, rgba(245,230,163,.18), transparent 70%); animation:drift3 38s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(8vw,6vh) scale(1.12); } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-7vw,-5vh) scale(1.15); } }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(5vw,-7vh) scale(.9); } }

/* ---------- Sheen : reflet doré qui balaie les mots clés ---------- */
.sheen em, em.sheen{
  background:linear-gradient(100deg, var(--gold) 0%, var(--gold) 38%, var(--gold-soft) 50%, var(--gold) 62%, var(--gold) 100%);
  background-size:240% 100%; background-position:160% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.mask-lines.play .sheen em, .mask-lines.play em.sheen{ animation:sheenSweep 1.4s var(--ease) .5s 1 forwards; }
@keyframes sheenSweep{ from{ background-position:160% 0; } to{ background-position:-60% 0; } }

/* ---------- Lampe / spotlight qui suit la souris ---------- */
.spotlight{
  position:fixed; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle 480px at var(--mx,50%) var(--my,38%),
    rgba(201,168,76,.22), rgba(201,168,76,.08) 32%, rgba(201,168,76,.02) 54%, transparent 68%);
}

/* ---------- Barre de progression scroll ---------- */
.scroll-progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:55; background:transparent; }
.scroll-progress span{ display:block; height:100%; width:0; background:var(--gold); box-shadow:0 0 12px rgba(201,168,76,.5); }

/* ---------- Curseur personnalisé ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9998; pointer-events:none; border-radius:50%;
  transform:translate(-50%,-50%); will-change:transform; }
.cursor-dot{ width:5px; height:5px; background:var(--gold); }
.cursor-ring{
  width:36px; height:36px; border:1px solid var(--gold-line);
  display:flex; align-items:center; justify-content:center;
  transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.cursor-ring .clabel{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:#0A0A0A; opacity:0; transform:scale(.6); transition:opacity .25s var(--ease), transform .25s var(--ease); white-space:nowrap;
}
.cursor-ring.is-link{ width:34px; height:34px; background:rgba(201,168,76,.12); border-color:var(--gold); }
.cursor-ring.is-label{ width:84px; height:84px; background:var(--gold); border-color:var(--gold); }
.cursor-ring.is-label .clabel{ opacity:1; transform:none; }
.cursor-ring.is-down{ transform:translate(-50%,-50%) scale(.86); }
body.cursor-on{ cursor:none; }
body.cursor-on a,body.cursor-on button,body.cursor-on input,body.cursor-on .choice,body.cursor-on [data-cursor]{ cursor:none; }

/* ---------- Loader / intro de marque ---------- */
.loader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:transform 1s var(--ease), opacity .6s ease;
}
.loader.done{ transform:translateY(-101%); }
.loader-c{ display:flex; align-items:center; gap:16px; }
.loader-gem{ width:46px; height:54px; opacity:0; transform:translateY(10px) rotate(-8deg); animation:gemIn .8s var(--ease) .1s forwards; }
.loader-word{ font-family:var(--font-sans); font-weight:600; font-size:2.4rem; letter-spacing:-.01em; overflow:hidden; }
.loader-word i,.loader-word b{ display:inline-block; font-weight:600; font-style:normal; transform:translateY(110%); animation:wordIn .8s var(--ease) forwards; }
.loader-word i{ color:var(--ink); animation-delay:.28s; }
.loader-word b{ color:var(--gold); animation-delay:.4s; }
.loader-meta{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep);
  opacity:0; animation:fadeIn .6s ease .75s forwards;
}
.loader-bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--line-2); }
.loader-bar span{ display:block; height:100%; width:0; background:var(--gold); animation:barFill 1.25s var(--ease) .1s forwards; }
@keyframes gemIn{ to{ opacity:1; transform:none; } }
@keyframes wordIn{ to{ transform:none; } }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes barFill{ to{ width:100%; } }
body.loading{ overflow:hidden; }

/* ---------- Révélation des titres en masque (ligne par ligne) ---------- */
.mask-lines .ml{ display:block; overflow:hidden; padding:.05em 0 .14em; margin-bottom:-.1em; }
.mask-lines .mli{
  display:block; transform:translateY(118%);
  transition:transform .95s var(--ease); transition-delay:calc(var(--i,0) * .1s);
}
.mask-lines.play .mli{ transform:none; }

/* ============================================================
   MANIFESTE — grand moment éditorial
   ============================================================ */
.statement{ text-align:center; padding-block:clamp(96px,18vh,200px); position:relative; }
.statement .eyebrow{ justify-content:center; }
.statement h2{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(2.4rem,6.4vw,5.6rem); line-height:1.02; letter-spacing:-.018em;
  margin:28px auto 0; max-width:18ch; text-wrap:balance;
}
.statement h2 em{ color:var(--gold); font-style:italic; }
.statement .statement-sub{ color:var(--ink-2); font-size:1.12rem; margin:28px auto 0; max-width:50ch; }

/* ============================================================
   SHOWCASE — grille filtrable (façon réalisations)
   ============================================================ */
.show-filters{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:clamp(32px,5vh,52px); padding-bottom:22px; border-bottom:1px solid var(--line);
}
.filter{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  transition:all .22s var(--ease);
}
.filter:hover{ border-color:var(--gold-line); color:var(--ink); }
.filter.on{ background:var(--gold); color:#0A0A0A; border-color:var(--gold); }
.show-count{ margin-left:auto; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

.show-grid{
  margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.show-card{ display:block; }
.show-card.hide{ display:none; }
.show-cover{
  position:relative; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .35s var(--ease);
}
.show-card:hover .show-cover{ border-color:var(--gold-line); }
.show-cover-bg{
  position:absolute; inset:0; background:var(--bg-2);
  background-image:repeating-linear-gradient(135deg, var(--line-2) 0 2px, transparent 2px 12px);
  transition:transform .7s var(--ease);
}
.show-card:hover .show-cover-bg{ transform:scale(1.07); }
.show-cover .ph-note{
  position:relative; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:0 16px; text-align:center; transition:opacity .3s var(--ease);
}
.show-card:hover .ph-note{ opacity:0; }
.show-pop{
  position:absolute; z-index:2; width:86px; height:86px; border-radius:50%;
  background:var(--gold); color:#0A0A0A;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  opacity:0; transform:scale(.5); transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.show-card:hover .show-pop{ opacity:1; transform:scale(1); }
.show-tags{ display:flex; gap:12px; align-items:center; margin-top:16px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.show-tags .cat{ color:var(--gold); }
.show-card h4{ font-family:var(--font-serif); font-weight:400; font-size:1.28rem; line-height:1.16; letter-spacing:-.005em; margin-top:10px; }
.show-card .arrowline{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; color:var(--ink-3); font-size:.82rem; transition:color .25s var(--ease); }
.show-card:hover .arrowline{ color:var(--gold); }

/* ---------- Featured (article vedette) full width ---------- */
.blog-feat{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(28px,4vw,52px); align-items:center; margin-top:clamp(40px,6vh,64px); }
.blog-feat .show-cover{ aspect-ratio:16/10; }
.blog-feat .pill{ display:inline-block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-line); border-radius:999px; padding:5px 12px; }

@media (max-width:1000px){
  .show-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-feat{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .show-grid{ grid-template-columns:1fr; }
}

/* ---------- Réglages mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  .grain{ animation:none; }
  .loader-gem,.loader-word i,.loader-word b,.loader-meta,.loader-bar span{ animation:none; opacity:1; transform:none; width:auto; }
  .loader-bar span{ width:100%; }
  .mask-lines .mli{ transform:none; transition:none; }
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ============================================================
   JEUX DE LUMIÈRE SUR LES BORDS (edge light / border beam)
   ============================================================ */
@property --beam-a{ syntax:"<angle>"; inherits:false; initial-value:0deg; }

/* --- Filets lumineux haut & bas de l'écran --- */
.edge-beam{
  position:fixed; left:0; right:0; height:1px; z-index:58; pointer-events:none; overflow:hidden;
  background:rgba(201,168,76,.12);
}
.edge-top{ top:0; } .edge-bottom{ bottom:0; }
.edge-beam::after{
  content:""; position:absolute; top:0; left:-220px; width:220px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,.4), var(--gold), var(--gold-soft), var(--gold), rgba(201,168,76,.4), transparent);
  box-shadow:0 0 12px 1px rgba(201,168,76,.6);
  animation:edgeRun 7s linear infinite;
}
.edge-bottom::after{ animation-duration:9s; animation-direction:reverse; }
@keyframes edgeRun{ from{ left:-220px; } to{ left:100%; } }

/* --- Dividers lumineux entre sections --- */
.beam-top{ position:relative; border-top:1px solid var(--line); }
.beam-top::after{
  content:""; position:absolute; top:-1px; left:-180px; width:180px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), var(--gold-soft), var(--gold), transparent);
  box-shadow:0 0 10px 1px rgba(201,168,76,.55);
  animation:beamRun 6.5s linear infinite;
}
@keyframes beamRun{ from{ left:-180px; } to{ left:100%; } }

/* --- Border-beam : lumière qui tourne sur le contour des cartes --- */
.beam-card{ position:relative; isolation:isolate; }
.beam-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.3px; pointer-events:none; z-index:4;
  background:conic-gradient(from var(--beam-a), transparent 0deg 282deg, rgba(201,168,76,.5) 312deg, var(--gold-soft) 337deg, var(--gold) 351deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:beamSpin 6s linear infinite;
}
.specimen.beam-card::after{ animation-duration:6.5s; }
.sim.beam-card::after{ animation-duration:8s; }
.tier-card.beam-card::after{ animation-duration:5.5s; }
@keyframes beamSpin{ to{ --beam-a:360deg; } }

@media (prefers-reduced-motion: reduce){
  .edge-beam::after,.beam-top::after{ display:none; }
  .beam-card::after{ animation:none; background:none; }
}