/*
 Theme Name:   SUPRAKUMA Child
 Theme URI:    http://suprakuma.local
 Description:  Thème enfant de Hello Elementor pour SUPRAKUMA
 Author:       SUPRAKUMA
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  suprakuma-child
*/

/* ── RESET & BASE ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── VARIABLES GLOBALES ── */
:root{
  --bg:     #06050a;
  --bg2:    #0d0b12;
  --bg3:    #111018;
  --gold:   #c4a882;
  --gold-s: #d8c4a8;
  --gold-d: #8a7560;
  --gold-v: rgba(196,168,130,.07);
  --cream:  #e4d9c0;
  --cd:     rgba(228,217,192,.45);
  --cg:     rgba(228,217,192,.1);
  --ch:     rgba(228,217,192,.07);
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Jost', sans-serif;
}

/* ── BASE ── */
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.9;
  overflow-x:hidden;
  cursor:none;
}

/* ── GRAIN GLOBAL ── */
body::after{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:990;
  opacity:.6;
}

/* ── CURSEUR DORÉ ── */
#cur{
  width:5px;height:5px;
  background:var(--gold);
  border-radius:50%;
  position:fixed;top:0;left:0;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .3s,height .3s,background .3s,border .3s;
}
#cur.big{width:40px;height:40px;background:transparent;border:1px solid rgba(196,168,130,.5)}
#cur.text{width:60px;height:60px;background:transparent;border:1px solid rgba(196,168,130,.3)}

/* ── ANIMATIONS SCROLL ── */
.rio{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rio.v{opacity:1;transform:none}
.d1{transition-delay:.08s!important}
.d2{transition-delay:.18s!important}
.d3{transition-delay:.3s!important}
.d4{transition-delay:.44s!important}
.d5{transition-delay:.58s!important}
.d6{transition-delay:.72s!important}

/* ── SECTION BASE ── */
.s-wrap{padding:7rem 6vw;max-width:1300px;margin:0 auto}
@media(max-width:768px){.s-wrap{padding:5rem 2rem}}
.s-tag{
  font-size:17px;letter-spacing:.35em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:1rem;
}
.s-title{
  font-family:var(--serif);
  font-size:clamp(2rem,4.5vw,3.8rem);
  font-weight:300;line-height:1.1;
}
.s-title em{font-style:italic;color:var(--gold-s)}

/* ── BOUTONS ── */
.btn-p{
  font-family:var(--sans);font-size:17px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bg);background:var(--gold);border:none;
  padding:.9rem 2rem;text-decoration:none;
  display:inline-block;
  transition:background .3s,transform .2s;
  cursor:none;
  -webkit-appearance:none;appearance:none;
}
.btn-p:hover{background:var(--gold-s);transform:translateY(-1px)}

.btn-g{
  font-family:var(--sans);font-size:17px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cd);background:transparent;
  border:1px solid rgba(196,168,130,.3);
  padding:.9rem 2rem;text-decoration:none;
  display:inline-block;
  transition:all .3s;cursor:none;
}
.btn-g:hover{color:var(--gold-s);border-color:var(--gold-s);transform:translateY(-1px)}

/* ── ESPRIT FLOTTANT ── */
#labyrinth-entry{
  position:fixed;bottom:3rem;left:2.5rem;
  z-index:500;cursor:none;text-decoration:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
}
.spirit-img{
  width:32px;height:32px;display:block;flex-shrink:0;
  animation:spirit-float 7s ease-in-out infinite,spirit-drift 11s ease-in-out infinite;
  transition:opacity .5s;
}
#labyrinth-entry:hover .spirit-img{opacity:.85}
/* legacy orb — conservé pour compatibilité éventuelle */
.spirit-orb{
  width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(228,217,192,.22), rgba(196,168,130,.08) 60%, transparent);
  border:1px solid rgba(196,168,130,.15);
  position:relative;
  animation:spirit-float 7s ease-in-out infinite,spirit-drift 11s ease-in-out infinite,spirit-morph 8s ease-in-out infinite;
  transition:border-color .5s;flex-shrink:0;
}
.spirit-orb::before{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle, rgba(196,168,130,.07) 0%, transparent 70%);
  animation:spirit-breathe 4s ease-in-out infinite;
}
.spirit-orb::after{
  content:'';position:absolute;width:4px;height:4px;border-radius:50%;
  background:rgba(228,217,192,.4);top:9px;left:10px;
  animation:spirit-eye 7s ease-in-out infinite;
}
@keyframes spirit-float{
  0%{transform:translateY(0px)} 20%{transform:translateY(-14px)}
  45%{transform:translateY(-6px)} 65%{transform:translateY(-18px)}
  80%{transform:translateY(-9px)} 100%{transform:translateY(0px)}
}
@keyframes spirit-drift{
  0%{margin-left:0px} 15%{margin-left:12px} 35%{margin-left:-6px}
  55%{margin-left:18px} 70%{margin-left:4px} 85%{margin-left:-10px} 100%{margin-left:0px}
}
@keyframes spirit-morph{
  0%,100%{border-radius:50%}
  10%{border-radius:44% 56% 52% 48% / 48% 44% 56% 52%}
  22%{border-radius:60% 40% 38% 62% / 55% 62% 38% 45%}
  35%{border-radius:38% 62% 65% 35% / 42% 55% 45% 58%}
  50%{border-radius:50% 50% 42% 58% / 60% 40% 60% 40%}
  65%{border-radius:66% 34% 48% 52% / 38% 60% 40% 62%}
  78%{border-radius:42% 58% 56% 44% / 52% 44% 56% 48%}
  90%{border-radius:55% 45% 40% 60% / 45% 55% 45% 55%}
}
@keyframes spirit-breathe{
  0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.9;transform:scale(1.4)}
}
@keyframes spirit-eye{
  0%,88%,100%{opacity:.4;transform:scale(1)}
  91%{opacity:0;transform:scale(.3)} 95%{opacity:.4;transform:scale(1)}
}
.spirit-text{
  font-family:var(--serif);font-size:17px;font-style:italic;
  color:rgba(196,168,130,.0);letter-spacing:.06em;
  white-space:nowrap;transform:translateY(4px);
  transition:color .8s,transform .7s;padding-left:2px;
}
.spirit-arrow{
  display:inline-block;color:rgba(196,168,130,.0);
  margin-left:.4rem;transition:color .8s,transform .5s;
}
#labyrinth-entry:hover .spirit-orb{border-color:rgba(196,168,130,.4);box-shadow:0 0 20px rgba(196,168,130,.12)}
#labyrinth-entry:hover .spirit-text{color:rgba(196,168,130,.5);transform:translateY(0)}
#labyrinth-entry:hover .spirit-arrow{color:rgba(196,168,130,.4);transform:translateX(4px)}

/* ── FOOTER STRIP ── */
.footer-strip{
  padding:2.5rem 6vw;border-top:1px solid rgba(196,168,130,.1);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
.footer-logo{font-family:var(--serif);font-size:1.2rem;letter-spacing:.1em;color:var(--gold-d)}
.footer-links{display:flex;gap:2rem}
.footer-links a{
  font-size:17px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(228,217,192,.25);text-decoration:none;transition:color .3s;cursor:none;
}
.footer-links a:hover{color:var(--gold-d)}

/* ── OVERRIDES HELLO ELEMENTOR ── */
.elementor-page .elementor-section-wrap,
.elementor-page>.elementor{padding:0!important}

/* Spacer injecté par Elementor pour compenser le header sticky — inutile ici */
#sk-spacer{display:none!important}

/* Écart sous l'admin bar WordPress */
#sk-creations,
#sk-single{padding-top:100px}
.admin-bar #sk-creations,
.admin-bar #sk-single{padding-top:132px}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL — MOBILE FIRST
   ══════════════════════════════════════════════════════════ */

/* ── Tablette (≤900px) ── */
@media(max-width:900px){
  .s-wrap{padding:5rem 2rem}
  .footer-links{gap:1rem}
}

/* ── Mobile (≤768px) ── */
@media(max-width:768px){
  /* Tous les héros de pages */
  .sk-hero,.sk-all-hero,.sk-cc-hero,.sk-contact-hero,
  .sk-verif-hero,.sk-legal-hero{
    padding:5rem 1.5rem 3rem!important;
  }
  /* Admin bar padding réduit */
  #sk-creations,#sk-single{padding-top:80px}
  .admin-bar #sk-creations,.admin-bar #sk-single{padding-top:112px}
  /* Tous les autres wrappers de page */
  #sk-contact,#sk-verif,#sk-all,#sk-cocreation,#sk-legal{
    padding-top:0;
  }
  /* Boutons — touch-friendly */
  .btn-p,.btn-g{padding:.85rem 1.5rem!important;font-size:17px!important}
  /* Footers de pages */
  .sk-footer-strip,.sk-footer-links{
    flex-direction:column;gap:.8rem;text-align:center;
  }
  /* Filtres */
  .sk-filters{padding:1.5rem 1.5rem}
  .sk-filter{padding:.3rem .7rem!important}
}

/* ── Petit mobile (≤480px) ── */
@media(max-width:480px){
  /* Cartes grille : jamais en dessous de 280px */
  .sk-grid{gap:1px}
  .sk-tag{font-size:15px!important;padding:.15rem .5rem!important}
  /* Héros très petit écran */
  .sk-hero,.sk-all-hero,.sk-cc-hero,.sk-contact-hero,
  .sk-verif-hero,.sk-legal-hero{
    padding:4rem 1rem 2.5rem!important;
  }
}