/* =======================================
   Home — Modern container + carousel in-card
   ======================================= */

:root{
  --bg-outer: #0a1420;
  --card-1: #0f2b40;
  --card-2: #0c2234;
  --border: rgba(255,255,255,.10);
  --tx-strong: #fff;
  --tx-muted: #b7c6d8;
  --accent: #1ea0ff;
  --accent-2: #ffd84d;
  --radius: 18px;
}

/* Fond plein écran centré */
.home-shell{
  background: radial-gradient(1200px 70% at 70% -10%, #144466 0%, transparent 60%) , var(--bg-outer);
  display: grid;
  place-items: center;
  padding: 16px;
}

/* Contrainte de page */
.page-container{
  width: min(100%, 1100px);
}

/* Carte principale (hero + boutons + carousel) */
.container{
  background: linear-gradient(180deg, var(--card-1), var(--card-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 22px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
  padding: clamp(14px, 3vw, 24px);
  color: var(--tx-strong);
  display: grid;
  
}

/* HERO (image plus petite) */
.hero{
  width: 100%;
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.hero img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======= Boutons modernisés ======= */
.ctn-btn{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.btn{
  appearance: none;
  text-decoration: none;
  color: #0b2232;
  font-weight: 900;
  letter-spacing: .2px;
  /* Octobre Rose */
  /* background: linear-gradient(180deg, #ffbbca, #eb93a5); */
  background: linear-gradient(180deg, var(--accent-2), #f3c22b); 
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform .12s ease, filter .12s ease;
  text-align: center;

  /* Uniformité */
  width: 100%;
  height: clamp(44px, 6.2vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: clamp(13px, 1.9vw, 16px);

  /* Forme polygonale */
  clip-path: polygon(8% 0, 100% 0%, 92% 100%, 0% 100%);
  border-radius: 0;
}

.btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.btn:active{ transform: translateY(0); }

/* ========= Carousel INSIDE container ========= */
.pub{
  position: relative;
  left: auto; right: auto; bottom: auto;
  height: clamp(120px, 22vh, 220px);
  z-index: 1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
 
}

/* La piste */
.carousel{
  display:flex;
  width:100%;
  height:100%;
  overflow:hidden;
  scroll-behavior:smooth;
}

/* Slide */
.carousel-items{
  flex:0 0 100%;
  height:100%;
}

/* Image */
.carousel-items img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* ===================== Responsive ===================== */
@media (max-width: 820px){
  .ctn-btn{
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .btn{
    height: 48px;
    font-size: 13px;
  }
}

@media (max-width: 420px){
  .container{ padding: 12px; }
  .pub{ height: 20vh; }
  .btn{ height: 44px; font-size: 12px; }
}