/*
Theme Name: StagePro Son&Lumières
Theme URI: https://www.stageprosl.fr
Author: Blohax
Author URI: https://blohax.fr
Description: Thème WordPress minimaliste et premium pour StagePro Son&Lumières — one-page, sombre, accents néon bleu/violet.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stagepro
*/

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

:root{
  /* — Fond — */
  --bg:        #06060c;
  --bg-raised: #0c0c16;
  --bg-hover:  #111120;

  /* — Accent — */
  --blue:      #00b4ff;
  --violet:    #c850ff;
  --glow-blue: rgba(0,180,255,.20);
  --glow-vio:  rgba(200,80,255,.18);
  --grad:      linear-gradient(135deg,var(--blue),var(--violet));

  /* — Texte — */
  --white:  #f4f4fa;
  --gray:   #8888a8;
  --muted:  #55556e;

  /* — Divers — */
  --border: rgba(255,255,255,.06);
  --r:      10px;
  --speed:  .35s cubic-bezier(.25,.46,.45,.94);
}

html{scroll-behavior:smooth;scroll-padding-top:80px}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.02em}
a{color:inherit;text-decoration:none;transition:var(--speed)}
img{max-width:100%;display:block}
ul{list-style:none}

.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem)}

/* ═══════════════════════════════════════
   NAV — ultra-minimaliste
   ═══════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(6,6,12,.6);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid transparent;
  transition:var(--speed);
}
.nav.scrolled{border-color:var(--border);background:rgba(6,6,12,.9)}

.nav__inner{
  max-width:1100px;margin:0 auto;
  padding:0 clamp(1.2rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}

.nav__logo{
  font-family:'Outfit',sans-serif;font-weight:800;font-size:1.15rem;
  display:flex;align-items:center;gap:.5rem;
  color:var(--white);
}
.nav__logo img{height:36px;width:auto}
.nav__logo b{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.nav__links{display:flex;gap:2.5rem;align-items:center}
.nav__links a{
  font-size:.875rem;font-weight:500;
  color:var(--gray);
  position:relative;
  padding:.25rem 0;
}
.nav__links a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;
  background:var(--grad);transition:var(--speed);
}
.nav__links a:hover,
.nav__links a.active{color:var(--white)}
.nav__links a:hover::after,
.nav__links a.active::after{width:100%}

.nav__cta{
  font-size:.8rem;font-weight:600;
  padding:.55rem 1.4rem;border-radius:50px;
  background:var(--grad);color:#fff !important;
  border:none;cursor:pointer;
  transition:var(--speed);
}
.nav__cta::after{display:none!important}
.nav__cta:hover{opacity:.88;transform:translateY(-1px);box-shadow:0 4px 20px var(--glow-blue)}

.burger{display:none;background:none;border:none;color:var(--white);font-size:1.4rem;cursor:pointer}

/* ═══════════════════════════════════════
   HERO — plein écran, épuré
   ═══════════════════════════════════════ */
.hero{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding:7rem 0 5rem;
}

.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%,var(--glow-blue),transparent),
    radial-gradient(ellipse 50% 40% at 80% 40%,var(--glow-vio),transparent);
  opacity:.5;
  animation:drift 12s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-3%,2%) scale(1.04)}
}

.hero__content{position:relative;z-index:1;max-width:700px}

.hero__tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--blue);
  margin-bottom:2rem;
}
.hero__tag span{width:24px;height:1px;background:var(--blue);display:inline-block}

.hero h1{
  font-size:clamp(2.6rem,5.5vw,4.2rem);
  line-height:1.08;
  margin-bottom:1.5rem;
}
.hero h1 em{
  font-style:normal;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.hero__sub{
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:var(--gray);
  max-width:520px;
  line-height:1.75;
  margin-bottom:2.5rem;
}

.hero__btns{display:flex;gap:1rem;flex-wrap:wrap}

/* ═══════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.9rem;font-weight:600;font-family:inherit;
  padding:.85rem 2rem;border-radius:50px;
  border:none;cursor:pointer;transition:var(--speed);
}
.btn-fill{
  background:var(--grad);color:#fff;
  box-shadow:0 2px 16px var(--glow-blue);
}
.btn-fill:hover{box-shadow:0 6px 28px var(--glow-blue);transform:translateY(-2px)}

.btn-ghost{
  background:transparent;color:var(--white);
  border:1px solid var(--border);
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

/* ═══════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════ */
.sec{padding:7rem 0}
.sec--alt{background:var(--bg-raised)}

.sec__label{
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--blue);margin-bottom:.8rem;
  display:flex;align-items:center;gap:.5rem;
}
.sec__label span{width:20px;height:1px;background:var(--blue)}

.sec__title{
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  margin-bottom:1rem;
}

.sec__desc{
  color:var(--gray);font-size:1.05rem;
  max-width:560px;line-height:1.75;
  margin-bottom:3.5rem;
}

.sec__header--center{text-align:center}
.sec__header--center .sec__desc{margin-left:auto;margin-right:auto}
.sec__header--center .sec__label{justify-content:center}

/* ═══════════════════════════════════════
   SERVICES — grille 3 cols
   ═══════════════════════════════════════ */
.grid3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;
}

.card{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:2.2rem 2rem;
  transition:var(--speed);
  position:relative;overflow:hidden;
}
.sec--alt .card{background:var(--bg)}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad);opacity:0;transition:var(--speed);
}
.card:hover{border-color:rgba(0,180,255,.15);transform:translateY(-4px)}
.card:hover::before{opacity:1}

.card__icon{
  width:48px;height:48px;border-radius:10px;
  background:rgba(0,180,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--blue);
  margin-bottom:1.4rem;
}

.card h3{font-size:1.15rem;margin-bottom:.6rem}
.card p{color:var(--gray);font-size:.92rem;line-height:1.65}

/* ═══════════════════════════════════════
   MATÉRIEL — tableau minimaliste
   ═══════════════════════════════════════ */
.tbl-wrap{
  border:1px solid var(--border);border-radius:var(--r);
  overflow-x:auto;margin-bottom:2.5rem;
}

table{width:100%;border-collapse:collapse;background:var(--bg-raised)}
.sec--alt table{background:var(--bg)}

thead th{
  font-family:'Outfit',sans-serif;font-weight:600;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--blue);
  padding:1rem 1.2rem;text-align:left;
  border-bottom:1px solid var(--border);
  background:rgba(0,180,255,.04);
}

td{padding:.9rem 1.2rem;border-bottom:1px solid var(--border);color:var(--gray);font-size:.9rem}
tr:last-child td{border-bottom:none}
td:first-child{color:var(--white);font-weight:500}
tr:hover td{background:rgba(255,255,255,.015)}

/* ═══════════════════════════════════════
   CATALOGUE — cards prix
   ═══════════════════════════════════════ */
.price-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;
}

.price-card{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:1.8rem;
  transition:var(--speed);
}
.sec--alt .price-card{background:var(--bg)}
.price-card:hover{border-color:rgba(0,180,255,.12);transform:translateY(-3px)}

.price-card__tag{
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--violet);
  margin-bottom:.8rem;
}

.price-card h4{font-size:1.05rem;margin-bottom:.35rem}
.price-card p{color:var(--gray);font-size:.82rem;line-height:1.55;margin-bottom:1.2rem}

.price-card__bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1rem;border-top:1px solid var(--border);
}

.price-card__amount{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:700}
.price-card__amount small{font-size:.7rem;color:var(--muted);font-weight:400}

.price-card__link{
  font-size:.78rem;font-weight:600;color:var(--blue);
  display:flex;align-items:center;gap:.3rem;
}
.price-card__link:hover{color:var(--violet)}

/* ═══════════════════════════════════════
   CONTACT — split layout
   ═══════════════════════════════════════ */
.contact-split{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:3rem;
  align-items:start;
}

.contact-info h3{font-size:1.6rem;margin-bottom:1rem}
.contact-info>p{color:var(--gray);line-height:1.75;margin-bottom:2.5rem}

.cinfo{display:flex;gap:.8rem;margin-bottom:1.4rem;align-items:flex-start}
.cinfo__ico{
  width:40px;height:40px;border-radius:8px;flex-shrink:0;
  background:rgba(0,180,255,.06);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:.95rem;
}
.cinfo h4{font-size:.9rem;margin-bottom:.15rem}
.cinfo p,.cinfo a{color:var(--gray);font-size:.88rem}
.cinfo a:hover{color:var(--blue)}

.contact-form{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:2.5rem;
}
.contact-form h3{font-size:1.2rem;margin-bottom:1.5rem}

.f-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.f-group{margin-bottom:1rem}
.f-group label{display:block;font-size:.78rem;font-weight:500;color:var(--gray);margin-bottom:.3rem}
.f-group .req{color:var(--violet)}

.f-group input,.f-group textarea,.f-group select{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.7rem .9rem;
  color:var(--white);
  font-family:inherit;font-size:.88rem;
  transition:var(--speed);outline:none;
}
.f-group input:focus,.f-group textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--glow-blue);
}
.f-group textarea{resize:vertical;min-height:100px}

.f-submit{
  width:100%;padding:.85rem;border:none;border-radius:50px;
  background:var(--grad);color:#fff;
  font-family:inherit;font-size:.92rem;font-weight:600;
  cursor:pointer;transition:var(--speed);
}
.f-submit:hover{box-shadow:0 4px 20px var(--glow-blue);transform:translateY(-1px)}

/* WPForms override */
.wpforms-container .wpforms-form input,
.wpforms-container .wpforms-form textarea{
  background:rgba(255,255,255,.03)!important;
  border:1px solid var(--border)!important;
  border-radius:6px!important;color:var(--white)!important;
  font-family:inherit!important;
}
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus{
  border-color:var(--blue)!important;box-shadow:0 0 0 3px var(--glow-blue)!important;
}
.wpforms-container label{color:var(--gray)!important}
.wpforms-container .wpforms-submit-container button{
  background:var(--grad)!important;border-radius:50px!important;font-weight:600!important;
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.foot{
  border-top:1px solid var(--border);
  padding:2.5rem 0;
}
.foot__inner{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
}
.foot__copy{color:var(--muted);font-size:.8rem}
.foot__links{display:flex;gap:1.5rem}
.foot__links a{color:var(--muted);font-size:.8rem}
.foot__links a:hover{color:var(--white)}

/* ═══════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:768px){
  .nav__links{display:none}
  .burger{display:block}
  .nav__links.open{
    display:flex;flex-direction:column;
    position:absolute;top:72px;left:0;right:0;
    background:rgba(6,6,12,.97);backdrop-filter:blur(24px);
    padding:1.5rem 2rem;gap:1rem;
    border-bottom:1px solid var(--border);
  }
  .hero{padding:8rem 0 4rem}
  .hero h1{font-size:2.2rem}
  .grid3{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .contact-split{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .foot__inner{flex-direction:column;text-align:center}
}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#222;border-radius:3px}

/* WP admin bar */
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}