/* ============================= */
/* 🎯 HERO BASE */
/* ============================= */

.hero {
  position: relative;
  width: 100%;
  min-height: 700px;
  height: 85vh;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background-image: url('https://casaauxtresors.fr/wp-content/uploads/2026/03/hero-bandy.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0b1d2a;

  overflow: hidden;
}

/* Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenu */
.hero-content {
  position: relative;
  z-index: 5;
  max-width: 900px;
  padding: 20px;
  color: #fff;
}

.hero h1 {
  font-size: clamp(32px, 5vw, 70px);
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: clamp(18px, 1.4vw, 22px);
  margin-bottom: 20px;
}

#light {
  transform-box: fill-box;
  transform-origin: center;
}

/* ============================= */
/* 💣 BOMB */
/* ============================= */

#boom-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);

  font-size: 120px;
  font-weight: bold;
  color: #fff;

  z-index: 10000;
  pointer-events: none;

  text-shadow: 0 0 30px red, 0 0 60px orange;
}

.bomb {
  position: absolute;
  top: 55%;
  right: 3%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

.bomb svg {
  width: clamp(320px, 35vw, 700px);
  height: auto;
  overflow: visible;
}

.hero svg {
  height: auto;
}

#lighter {
  pointer-events: auto;
  cursor: pointer;
}

/* Etats animations */

#boom,
#cloud,
#flame,
#light,
#smokeShape {
  opacity: 0;
}

#boom {
  transform-origin: center;
  transform: scale(.2);
}

#fire path {
  stroke-dasharray: 3;
}

/* ============================= */
/* 💥 EXPLOSION */
/* ============================= */

#boom-screen {
  position: fixed;
  inset: 0;

  pointer-events: none;
  z-index: 9999;

  background: radial-gradient(
    circle,
    #ffffff 0%,
    #fff700 20%,
    #ffae00 40%,
    #ff5e00 60%,
    rgba(255,0,0,.3) 80%,
    transparent 100%
  );

  opacity: 0;
}

.shard {
  position: fixed;

  width: 100px;
  height: 100px;

  background: #ffae00;
  border-radius: 6px;

  box-shadow: 0 0 20px rgba(255,100,0,.8);

  pointer-events: none;
  z-index: 10000;
}

/* ============================= */
/* 🔘 BUTTON */
/* ============================= */

.btn-hero {
  display: inline-block;

  margin-top: 30px;

  padding: 14px 34px;

  background: #f8c42d;
  color: #000;

  border-radius: 40px;

  text-decoration: none;
  font-weight: bold;

  position: relative;
  z-index: 10;

  transition: .25s;
}

.btn-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* ====================================================== */
/* 📱 MOBILE */
/* ====================================================== */

@media (max-width:768px){

.hero{

    height:60vh;
    min-height:450px;

    background-position:center top;
}

.hero-overlay{
    background:rgba(0,0,0,.35);
}

.hero-content{
    padding:20px;
}

.hero h1{
    font-size:30px;
}

.hero-content p{
    font-size:15px;
}

.btn-hero{
    padding:12px 24px;
    font-size:15px;
}

.bomb{

    top:72%;
    right:-35%;

    transform:translateY(-50%) scale(.72);

    opacity:.65;
}

.bomb svg{
    width:110vw;
}

#boom-text{
    font-size:60px;
}

select{
    width:80%!important;
}

h1.page-title{
    margin-top:100px!important;
    font-size:28px;
}

.mobile-cart{

    display:flex;
    align-items:center;

    width:60%!important;
    height:45px;

    padding:0 15px;

    background:#000;
    color:#fff;

    border-radius:30px;

    font-size:14px!important;

    position:relative;
    top:-2rem;

    margin-bottom:15px;
}

}

/* ====================================================== */
/* 📱 TABLETTE */
/* ====================================================== */

@media (min-width:769px) and (max-width:1023px){

.hero{

    height:75vh;
    min-height:600px;
}

.hero h1{
    font-size:46px;
}

.hero-content p{
    font-size:18px;
}

.bomb{

    top:60%;
    right:-8%;

    transform:translateY(-50%) scale(.85);
}

.bomb svg{
    width:60vw;
}

}

/* ====================================================== */
/* 💻 DESKTOP */
/* ====================================================== */

@media (min-width:1024px){

.hero{

    height:85vh;
    min-height:700px;
}

.bomb{

    top:55%;
    right:4%;
}

.bomb svg{
    width:clamp(420px,32vw,700px);
}

}

/* ====================================================== */
/* 🖥️ VERY LARGE SCREENS */
/* ====================================================== */

@media (min-width:1600px){

.hero{

    min-height:900px;
    height:90vh;
}

.hero h1{
    font-size:72px;
}

.hero-content{
    max-width:1100px;
}

.bomb{

    right:8%;
}

.bomb svg{
    width:750px;
}

}