:root{
  --brand:#ffd257;
  --brand2:#ffb703;
  --radius:16px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:#ffffff;
  color:#e9eefb;
}











.image-scroll {
  display: flex;
  overflow-x: auto;
  gap: 2rem;
  padding: 1rem;
  scroll-snap-type: x mandatory;
}

.image-scroll .section {
  flex: 0 0 auto;
  scroll-snap-align: start;
  text-align: center;
}

.image-scroll img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 12px;
}

.custom-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  padding: 2rem 0;
  color: white;
}

.footer-column {
  flex: 1 1 300px;
}

.footer-column h3 {
  margin-top: 0;
}

.footer-column a {
  color: white;
  text-decoration: underline;
}

.apres-ski-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  margin: 2rem 0;
}

.apres-ski-text {
  flex: 1 1 55%;
  min-width: 300px;
}

.apres-ski-video {
  flex: 1 1 40%;
  min-width: 250px;
  max-height: 300px;
  overflow: hidden;
}

.apres-ski-video video {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.infographie-container {
  width: 100%;
  overflow-x: auto;
  margin: 2rem 0;
}

.infographie-scroll {
  min-width: 600px; /* largeur du SVG */
  display: inline-block;
  padding: 0 1rem;
}





.shop-title {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  margin: 2rem 0;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding: 0 1rem;
}

.shop-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

.shop-item:hover {
  transform: translateY(-4px);
}

.img-fluid {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.item-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  margin-top: 0.75rem;
}

.item-price {
  font-weight: bold;
  color: #bb7300;
  font-size: 1rem;
  margin-top: 0.25rem;
}



















/* Sections split */
section{ margin:54px 0; }
.split{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:30px;
  align-items:center;
  margin:36px 0;
}
.split.reverse{ grid-template-columns:.98fr 1.02fr; }
@media(max-width:960px){
  .split, .split.reverse{ grid-template-columns:1fr; }
}
.split .text{ position:sticky; top:10vh; align-self:start; }
.split h3{ font-size:32px; margin:0 0 10px; color:var(--brand); }
.lead{ font-size:18px; color:#cbd5e1; margin:0 0 12px; }
.img-card{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  background:#0b0d11;
}
.img-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translateY(var(--parallax,0px));
  transition:transform .06s linear;
}
.img-portrait{ aspect-ratio:3/4; }
.img-square{ aspect-ratio:1/1; }

/* Values + flyout */
.values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:20px;
}
.value{
  background:#121520;
  border:1px solid #263046;
  border-radius:14px;
  padding:18px;
  cursor:pointer;
  text-align:center;
  transition:background .2s;
}
.value:hover{ background:#181d29; }
.value strong{ display:block; margin-bottom:6px; color:#ffd257; font-size:18px; }
.value span{ color:#cbd5e1; font-size:14px; }
@media(max-width:900px){
  .values{ grid-template-columns:1fr; }
}

.flyout-panel{
  display:none;
  margin-top:18px;
  padding:18px;
  border-radius:14px;
  background:#0b0f18;
  border:1px solid #2a344a;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  grid-template-columns:1fr 1.2fr;
  gap:16px;
  align-items:center;
  animation:fadeDown .25s ease;
}
.flyout-panel img{ width:100%; border-radius:10px; object-fit:cover; }
.flyout-panel h4{ margin:0 0 8px; color:#ffd257; font-size:22px; }
.flyout-panel p{ margin:0; color:#cbd5e1; font-size:15px; line-height:1.5; }
@media(max-width:900px){
  .flyout-panel{ grid-template-columns:1fr; }
}

@keyframes fadeDown{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* CTA */
.cta{ text-align:center; margin:40px 0; }
.btn{
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#1d1600;
  padding:14px 24px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  display:inline-block;
  transition:.18s;
  min-height:48px;
  line-height:1.1;
}
.btn:hover{ transform:translateY(-2px); }

/* Stats (countdown + places restantes) */
.stats{
  max-width:1100px;
  margin:24px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.stat{
  background:#121520;
  border:1px solid #263046;
  border-radius:14px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.stat b{ color:#ffd257; }
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,210,87,.12);
  color:#ffd257;
  font-weight:700;
}
.pill.low{ background:rgba(255,107,107,.14); color:#ffb3b3; }
@media(max-width:700px){
  .stats{ grid-template-columns:1fr; gap:10px; margin-top:16px; }
}

/* Mobile fixes */
@media (max-width:900px){
  .split .text{ position:static; top:auto; }
  section{ margin:36px 0; }
  .split{ gap:18px; }
  .lead{ font-size:16px; }
  /* "Au programme" → texte avant image */
  .split.reverse{ display:flex; flex-direction:column; }
  .split.reverse .text{ order:1; }
  .split.reverse figure{ order:2; }
}
@media (max-width:600px){
  .img-portrait{ aspect-ratio:auto; }
  .img-square{ aspect-ratio:auto; }
  .img-card img{ height:auto; max-height:70vh; object-fit:cover; }
  .flyout-panel{ grid-template-columns:1fr; padding:14px; }
  .flyout-panel img{ max-height:40vh; object-fit:cover; }
}