/* ============================================
   PLAYBOX - CPT OCCASION (single-occasion.php)
   Sections distinctes du CPT activite, orientees evenement.
   ============================================ */

/* === HERO OCCASION (asymetrique, plus event-y que activite) === */
.occ-hero{padding:120px 6vw 70px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 70%);position:relative;overflow:hidden}
.occ-hero::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(242,100,25,0.08) 0%,transparent 60%);pointer-events:none}
.occ-hero::after{content:'';position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(0,153,255,0.1) 0%,transparent 60%);pointer-events:none}
.occ-hero-grid{position:relative;z-index:2;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.occ-hero-text{padding:20px 0}
.occ-hero-title{font-family:'Rajdhani',sans-serif;font-size:clamp(2.6rem,5.8vw,4.8rem);font-weight:700;line-height:1.02;margin:0 0 22px 0;color:var(--white)}
.occ-hero-intro{font-size:1.15rem;line-height:1.65;color:var(--off-white);margin:0 0 28px 0;max-width:560px}

.occ-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px 0}
.occ-pill{font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-3);background:rgba(0,153,255,0.08);border:1px solid rgba(0,153,255,0.25);padding:8px 16px;border-radius:999px}
.occ-pill:nth-child(2){color:var(--orange);background:rgba(242,100,25,0.08);border-color:rgba(242,100,25,0.25)}
.occ-pill:nth-child(3n){color:var(--blue-4);background:rgba(102,212,255,0.08);border-color:rgba(102,212,255,0.25)}

.occ-hero-cta{display:flex;gap:14px;flex-wrap:wrap}

.occ-hero-visual{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid rgba(0,153,255,0.2);box-shadow:0 30px 80px rgba(0,0,0,0.4)}
.occ-hero-visual::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 60%,rgba(6,15,30,0.6) 100%);z-index:2;pointer-events:none}
.occ-hero-visual img{width:100%;height:100%;object-fit:cover;display:block}

/* Touche "event" : decor SVG pattern derriere le visual */
.occ-hero-visual::after{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:linear-gradient(45deg,var(--orange),var(--blue-3));clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);opacity:.18;z-index:1}

/* === SECTION HEAD GENERIQUE OCCASION === */
.occ-section-head{max-width:780px;margin:0 auto 48px;text-align:center}
.occ-section-head .section-eyebrow{margin:0 auto 16px}
.occ-section-head .section-title{margin-bottom:18px}
.occ-section-head .section-intro{margin:0 auto;color:var(--off-white)}

/* === AMBIANCE (3 grandes images, mood) === */
.occ-ambiance{padding:90px 6vw;background:var(--navy)}
.occ-ambiance-head{max-width:780px;margin:0 auto 48px;text-align:center}
.occ-ambiance-head .section-title{font-family:'Rajdhani',sans-serif;font-size:clamp(2rem,4.5vw,3.2rem);font-weight:700;line-height:1.1;margin:0 0 18px 0;color:var(--white)}
.occ-ambiance-head .section-intro{font-size:1.05rem;line-height:1.7;color:var(--off-white);margin:0}
.occ-ambiance-strip{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:18px;max-width:1400px;margin:0 auto}
.occ-ambiance-item{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:3/4;border:1px solid rgba(0,153,255,0.15)}
.occ-ambiance-item:nth-child(2){aspect-ratio:3/5;margin-top:40px}
.occ-ambiance-item:nth-child(3){aspect-ratio:4/5;margin-top:-20px}
.occ-ambiance-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.occ-ambiance-item:hover img{transform:scale(1.05)}
.occ-ambiance-item::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 50%,rgba(6,15,30,0.85) 100%);z-index:2;pointer-events:none}
.occ-ambiance-item figcaption{position:absolute;bottom:18px;left:20px;right:20px;z-index:3;font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.06em;color:var(--white);line-height:1.4}

/* === ETAPES (timeline horizontale) === */
.occ-etapes{padding:100px 6vw;background:var(--navy-mid);position:relative;overflow:hidden}
.occ-etapes::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(0,153,255,0.08) 0%,transparent 60%);pointer-events:none}
.occ-timeline{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;padding:0;margin:0;max-width:1200px;margin:0 auto}
.occ-timeline::before{content:'';position:absolute;top:46px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent 0%,var(--blue-3) 20%,var(--blue-3) 80%,transparent 100%);z-index:1}
.occ-step{position:relative;text-align:center;z-index:2}
.occ-step-num{width:80px;height:80px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy-card) 0%,var(--navy) 100%);border:2px solid var(--blue-3);border-radius:50%;font-family:'Rajdhani',sans-serif;font-size:1.6rem;font-weight:700;color:var(--blue-3);box-shadow:0 8px 24px rgba(0,153,255,0.25);position:relative}
.occ-step:nth-child(odd) .occ-step-num{border-color:var(--orange);color:var(--orange);box-shadow:0 8px 24px rgba(242,100,25,0.2)}
.occ-step-body h3{font-family:'Rajdhani',sans-serif;font-size:1.3rem;font-weight:700;color:var(--white);margin:0 0 10px 0}
.occ-step-body p{font-size:.92rem;line-height:1.55;color:var(--off-white);margin:0;max-width:240px;margin:0 auto}

/* === FORMULES (cards verticales avec checklist d inclusions) === */
.occ-formules{padding:100px 6vw;background:var(--navy)}
.occ-formules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;max-width:1200px;margin:0 auto}
.occ-formule{display:flex;flex-direction:column;padding:32px 28px 28px;background:var(--navy-card);border:1px solid rgba(0,153,255,0.18);border-radius:16px;position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.occ-formule::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-2),var(--blue-3))}
.occ-formule:nth-child(2)::before{background:linear-gradient(90deg,var(--orange),var(--blue-3))}
.occ-formule:hover{transform:translateY(-6px);border-color:var(--blue-3);box-shadow:0 24px 60px rgba(0,153,255,0.18)}
.occ-formule-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px;padding-bottom:18px;border-bottom:1px solid rgba(0,153,255,0.12)}
.occ-formule-head h3{font-family:'Rajdhani',sans-serif;font-size:1.4rem;font-weight:700;color:var(--white);margin:0;line-height:1.2;flex:1}
.occ-formule-prix{font-family:'Rajdhani',sans-serif;font-size:1.5rem;font-weight:700;color:var(--blue-3);line-height:1}
.occ-formule-desc{font-size:.95rem;line-height:1.55;color:var(--off-white);margin:0 0 18px 0}
.occ-formule-list{list-style:none;padding:0;margin:0 0 24px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.occ-formule-list li{position:relative;padding-left:28px;font-size:.92rem;line-height:1.45;color:var(--off-white)}
.occ-formule-list li::before{content:'';position:absolute;left:0;top:3px;width:18px;height:18px;background:rgba(51,187,255,0.12);border-radius:50%;border:1px solid var(--blue-3)}
.occ-formule-list li::after{content:'';position:absolute;left:5px;top:9px;width:8px;height:4px;border-left:2px solid var(--blue-3);border-bottom:2px solid var(--blue-3);transform:rotate(-45deg)}
.occ-formule-cta{align-self:flex-start;margin-top:auto}

/* === ANIMATIONS (badges grille) === */
.occ-animations{padding:90px 6vw;background:var(--navy-mid);position:relative}
.occ-animations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;max-width:1100px;margin:0 auto}
.occ-animation{padding:24px 22px;background:var(--navy);border:1px solid rgba(242,100,25,0.2);border-radius:12px;position:relative;transition:transform .25s,border-color .25s,background .25s}
.occ-animation::before{content:'';position:absolute;top:14px;right:14px;width:6px;height:6px;background:var(--orange);border-radius:50%;box-shadow:0 0 12px rgba(242,100,25,0.5)}
.occ-animation:hover{transform:translateY(-4px);border-color:var(--orange);background:linear-gradient(135deg,var(--navy) 0%,var(--navy-card) 100%)}
.occ-animation h4{font-family:'Rajdhani',sans-serif;font-size:1.2rem;font-weight:700;color:var(--white);margin:0 0 8px 0;padding-right:18px}
.occ-animation p{font-size:.88rem;line-height:1.5;color:var(--off-white);margin:0}

/* === BANDEAU CTA === */
.occ-cta-band{padding:90px 6vw;background:linear-gradient(135deg,var(--navy-card) 0%,var(--navy-mid) 100%);position:relative;overflow:hidden}
.occ-cta-band::before{content:'';position:absolute;top:-150px;right:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(0,153,255,0.18) 0%,transparent 60%);pointer-events:none}
.occ-cta-band-inner{position:relative;z-index:2;max-width:780px;margin:0 auto;text-align:center}
.occ-cta-band-inner h2{font-family:'Rajdhani',sans-serif;font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;color:var(--white);margin:0 0 14px 0}
.occ-cta-band-inner p{font-size:1.1rem;color:var(--off-white);margin:0 0 28px 0}
.occ-cta-band-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .occ-hero-grid{grid-template-columns:1fr;gap:40px}
  .occ-hero-visual{max-width:500px;margin:0 auto;aspect-ratio:4/3}
  .occ-ambiance-strip{grid-template-columns:1fr 1fr;gap:14px}
  .occ-ambiance-item:nth-child(3){grid-column:span 2;aspect-ratio:16/9;margin-top:0}
  .occ-ambiance-item:nth-child(2){margin-top:0}
  .occ-timeline{grid-template-columns:repeat(2,1fr);gap:48px 24px}
  .occ-timeline::before{display:none}
}
@media(max-width:640px){
  .occ-hero{padding:100px 5vw 50px}
  .occ-ambiance,.occ-etapes,.occ-formules,.occ-animations,.occ-cta-band{padding:70px 5vw}
  .occ-ambiance-strip{grid-template-columns:1fr;gap:14px}
  .occ-ambiance-item,.occ-ambiance-item:nth-child(2),.occ-ambiance-item:nth-child(3){aspect-ratio:16/10;margin-top:0;grid-column:auto}
  .occ-timeline{grid-template-columns:1fr;gap:36px}
  .occ-step-body p{max-width:none}
  .occ-formule-head{flex-direction:column;gap:8px}
  .occ-formule-prix{font-size:1.6rem}
}