/* ==========================================================================
   PAGE D'ACCUEIL VISITEUR (app/Views/home/index.php)
   --------------------------------------------------------------------------
   Image de fond du hero : modifier --hero-image et --hero-ratio
   (ratio = largeur / hauteur de l'image, ex. 1672 x 695 => 2.4).
   L'image est centrée verticalement et occupe 100 % de la hauteur du hero.
   Sur écran ultra-large, elle reste centrée et ses bords fondent dans le bleu nuit.
   ========================================================================== */
:root{
  --hero-image: url("../images/background_home.png");
  --hero-ratio: 2.4;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  flex:1;
  min-height:42rem;
  overflow:hidden;
  background:radial-gradient(60% 85% at 72% 40%,#16356a 0%,#0b1f45 55%,#050f24 100%);
}
.hero__bg{
  position:absolute;top:0;right:0;           /* calée contre le bord droit */
  height:100%;
  aspect-ratio:var(--hero-ratio);
  background:var(--hero-image) center / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 12%,rgba(0,0,0,.75) 28%,#000 45%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 12%,rgba(0,0,0,.75) 28%,#000 45%);
}
.hero__shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,15,36,.9) 0%,rgba(5,15,36,.66) 30%,rgba(5,15,36,.12) 58%,rgba(5,15,36,0) 70%),
    linear-gradient(180deg,rgba(5,15,36,.4) 0%,rgba(5,15,36,0) 22%),
    linear-gradient(0deg,rgba(5,15,36,.35) 0%,rgba(5,15,36,0) 18%);
}
.hero .container{height:100%}

.hero__copy{position:relative;z-index:2;padding:3.3rem 0 .4rem 3.75rem}

.hero__title{
  font-family:"Exo 2","Noto Sans",sans-serif;
  font-style:italic;font-weight:600;
  font-size:3rem;line-height:1.02;letter-spacing:-.012em;
  text-shadow:0 .15rem .8rem rgba(0,0,0,.6);
}
.hero__title em{font-style:inherit;color:var(--blue-400);text-shadow:0 0 1.2rem rgba(40,150,255,.6)}
.hero__rule{
  width:36.7rem;height:.19rem;margin-top:.9rem;border-radius:.1rem;
  background:linear-gradient(90deg,#2ea0ff 0%,#2ea0ff 70%,rgba(46,160,255,0) 100%);
  box-shadow:0 0 .8rem rgba(46,160,255,.9);
}
.hero__lead{
  margin-top:1.55rem;
  font-size:1.5rem;font-weight:500;line-height:1.22;
  text-shadow:0 .1rem .5rem rgba(0,0,0,.65);
}

.hero__features{margin-top:1.15rem}
.hero__features li{display:flex;align-items:center;gap:1.7rem;height:2.8rem}
.hero__features .badge{
  display:grid;place-items:center;
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:linear-gradient(180deg,#2b9aff,#0c6ddb);
  box-shadow:0 0 .9rem rgba(30,140,255,.55),inset 0 1px 0 rgba(255,255,255,.35);
  font-size:1.25rem;color:#fff;
}
.hero__features span.t{font-size:1.38rem;font-weight:500;color:var(--text-soft);text-shadow:0 .1rem .4rem rgba(0,0,0,.6)}

.hero__cta{display:flex;align-items:center;gap:1.75rem;margin:1.85rem 0 0 -.65rem}
.btn-cta{
  display:flex;align-items:center;
  height:4rem;border-radius:.5rem;
  transition:filter .2s,background .2s;
}
.btn-cta--primary{
  flex:none;
  width:auto;
  min-width:18rem;         
  gap:1rem;padding:0 1.6rem;
  white-space:nowrap;      
  background:linear-gradient(180deg,#2e9bff,#0b6fdc);
  border:1.5px solid #46a8ff;
  box-shadow:0 0 1.6rem rgba(30,140,255,.5),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-cta--primary:hover{filter:brightness(1.12)}
.btn-cta--primary .icon{width:2.1rem;height:2.1rem}
.btn-cta--primary .lbl{display:flex;flex-direction:column;line-height:1.15}
.btn-cta--primary .lbl b{font-size:1.32rem;font-weight:700}
.btn-cta--primary .lbl small{font-size:1.05rem;font-weight:500;color:#e3f0ff}
.btn-cta--ghost{
  width:14.5rem;justify-content:center;gap:1rem;
  border:1.5px solid var(--blue-line);
  background:rgba(8,28,66,.6);
  font-size:1.32rem;font-weight:600;
}
.btn-cta--ghost:hover{background:rgba(30,100,200,.45)}
.btn-cta--ghost .icon{width:1.9rem;height:1.9rem;color:var(--blue-400)}

.hero__video{width:34.2rem;margin:.95rem 0 0 -.65rem;display:flex;flex-direction:column;align-items:center}
.or{
  display:flex;align-items:center;gap:1rem;width:100%;
  font-size:.9rem;color:var(--text-soft);
}
.or::before,.or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(130,180,240,0),rgba(130,180,240,.55))}
.or::after{background:linear-gradient(270deg,rgba(130,180,240,0),rgba(130,180,240,.55))}
.btn-video{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  height:2.2rem;width:16.4rem;margin-top:.3rem;
  border:1px solid var(--blue-line);border-radius:1.1rem;
  background:rgba(8,28,66,.65);
  font-size:1rem;font-weight:500;
  transition:background .2s;
}
.btn-video:hover{background:rgba(30,100,200,.45)}
.btn-video .icon{width:1.1rem;height:1.1rem}

/* ---------- Bloc récompense ---------- */
.award{
  position:absolute;z-index:2;
  top:2.7rem;right:-1.1rem;
  width:31.25rem;height:11.7rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;isolation:isolate;
}
.award::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:skewX(-18deg);
  border:1px solid rgba(135,190,255,.5);border-radius:.5rem;
  background:linear-gradient(135deg,rgba(70,120,200,.42),rgba(20,50,115,.3));
  -webkit-backdrop-filter:blur(.4rem);backdrop-filter:blur(.4rem);
  box-shadow:0 0 2rem rgba(0,0,0,.4),inset 0 0 1.2rem rgba(130,185,255,.15);
}
.award__title{
  font-family:"Exo 2","Noto Sans",sans-serif;
  font-style:italic;font-weight:700;font-size:1.5rem;line-height:1.2;
}
.award__text{margin-top:.55rem;font-size:1.08rem;font-weight:500;line-height:1.4;color:#e6efff}
.award__stars{margin-top:.55rem;color:var(--gold);font-size:1.45rem;letter-spacing:.2rem;line-height:1;text-shadow:0 0 .6rem rgba(255,190,40,.6)}
.laurel{
  position:absolute;top:1.45rem;height:7.7rem;width:3.2rem;
  color:#e2b53f;fill:currentColor;filter:drop-shadow(0 0 .4rem rgba(255,190,50,.45));
}
.laurel--l{left:2.3rem}
.laurel--r{right:2.3rem;transform:scaleX(-1)}

/* ==========================================================================
   BANDEAU AVANTAGES
   ========================================================================== */
.benefits{
  position:relative;z-index:3;
  height:5.5rem;
  background:
  linear-gradient(90deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 70%),
  linear-gradient(180deg,rgba(9,30,68,.97),rgba(6,20,46,.99));
  border-top:1px solid rgba(70,150,235,.5);
  box-shadow:0 -.3rem 1.2rem rgba(0,0,0,.4);
}
.benefits .container{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 3.5rem 0 3.25rem}
.benefit{display:flex;align-items:center;gap:1.5rem}
.benefit .icon{width:3.1rem;height:3.1rem;color:var(--blue-400);stroke-width:1.6}
.benefit b{display:block;font-size:1.1rem;font-weight:700;line-height:1.25}
.benefit small{display:block;font-size:.95rem;color:var(--text-mute);line-height:1.3}
.benefit-sep{width:1px;height:3rem;background:linear-gradient(180deg,rgba(90,160,235,0),rgba(90,160,235,.6),rgba(90,160,235,0))}
.deco-print{
  position:absolute;right:.6rem;bottom:-1.6rem;z-index:4;
  width:6.2rem;height:7.6rem;color:rgba(46,166,255,.28);
  fill:none;stroke:currentColor;pointer-events:none;
}

/* ==========================================================================
   TABLETTE / MOBILE (< 1100 px de large)
   ========================================================================== */
@media (max-width:1100px){
  .hero{min-height:0}
  .hero .container{height:auto}
  .hero__bg{width:auto}
  .hero__shade{background:linear-gradient(180deg,rgba(5,15,36,.82),rgba(5,15,36,.7) 60%,rgba(5,15,36,.88))}
  .hero__copy{padding:2rem 1.25rem 1rem}
  .hero__title{font-size:2.7rem}
  .hero__rule{width:min(22rem,80%)}
  .hero__lead{font-size:1.15rem}
  .hero__lead br{display:none}
  .hero__features li{height:2.6rem;gap:1rem}
  .hero__features .badge{width:2.3rem;height:2.3rem;font-size:1.2rem}
  .hero__features span.t{font-size:1.1rem}
  .hero__cta{flex-direction:column;align-items:stretch;gap:.9rem;margin:1.6rem 0 0}
  .btn-cta--primary,.btn-cta--ghost{width:100%}
  .btn-cta--primary .lbl b{font-size:1.15rem}
  .btn-cta--ghost{font-size:1.15rem;height:3.4rem}
  .hero__video{width:100%;margin:1rem 0 0}
  .btn-video{width:100%;max-width:18rem;height:2.6rem}

  .award{position:relative;top:auto;right:auto;width:auto;height:auto;margin:1rem 1.25rem 2rem;padding:1.4rem 3.6rem}
  .award::before{transform:none}
  .laurel{height:5.6rem;width:2.4rem;top:50%;margin-top:-2.8rem}
  .laurel--l{left:.7rem}
  .laurel--r{right:.7rem}

  .benefits{height:auto;padding:1.4rem 0}
  .benefits .container{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1rem;padding:0 1.25rem}
  .benefit-sep{display:none}
  .benefit .icon{width:2.4rem;height:2.4rem}
  .deco-print{display:none}

}
@media (max-width:560px){
  .benefits .container{grid-template-columns:1fr}
}