:root{
  /* couleurs */
  --gold:#ECBD00;
  --nude:hsl(22,24%,78%);
  --white:#FAF9F6;
  --black:#181818;
  --soft-black:#1a1a1a;
  --brown:#363534;
  --darken-nude:hsl(22,31%,78%);
  --lighten-nude:hsl(22,25%,77%);
}

/* =======================
   Base / Typo
   ======================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background-color:var(--soft-black);
  color:var(--white);
  overflow-x:hidden;
}

h1,h2,h4,.pack__modal__card__price,.values__card h3,.more{ font-family:"Lugrasimo",cursive; }
p,li,a,h3,.packs__subtitle{ font-family:"Questrial",sans-serif; }

h2,h3{ color:var(--white); }
h2{
  font-size:2.8rem;
  text-align:center;
  width:100%;
  text-decoration:underline var(--gold);
}
h3{ font-size:2.5rem; text-align:center; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

main section{ border-top:1px solid var(--gold); }

/* =======================
   Header + Slider
   ======================= */
header{ position:relative; height:100vh; width:100%; }

h1{
  position:fixed; top:0; left:0;
  padding:1rem; text-align:center;
  z-index:111; background-color:#000000b6;
}

.logo{
  width:80%;
  position:absolute;
  height:50%;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:11;
  object-fit:content;
}

header .fa-chevron-down{
  position:absolute; bottom:5vh; left:50%;
  transform:translateX(-50%);
  background-color:#000000b6;
  font-size:2rem;
  border-radius:50%;
  padding:1rem;
  transition:bottom .2s;
  z-index:11;
}
header .fa-chevron-down:hover{ bottom:4vh; }

.footerArrow{
  position:absolute; top:5vh; left:50%;
  transform:translateX(-50%) rotate(180deg);
  background-color:#000000b6;
  font-size:2rem;
  border-radius:50%;
  padding:1rem;
  transition:top .2s;
  z-index:11;
}
.footerArrow:hover{ top:4vh; }

.hero, .slider__slide{ width:100%; height:100%; z-index:1; }
.slider__slide{
  position:absolute; inset:0;
  opacity:0; display:none;
  transition:opacity 1s;
}
.show{ display:block; opacity:1; }

/* images slider UNIQUEMENT */
.hero img{ width:100%; height:100%; object-fit:cover; }
.object-position-1{ object-position:bottom; }
.object-position-2{ object-position:50% 75%; }
.object-position-3{ object-position:50% 70%; }
.object-position-4{ object-position:50% 60%; }

/* =======================
   Liens/boutons génériques
   ======================= */
.link{
  position:absolute;
  bottom:3%; left:50%;
  transform:translateX(-50%);
  padding:1rem 1.5rem;
  font-size:1.2rem;
  transition:background-color .2s,color .2s;
}
.link i{ margin-left:.5rem; }

.valueLink{ color:var(--black); background-color:var(--nude); border:1px solid var(--nude); }
.valueLink:hover{ background-color:var(--soft-black); color:var(--nude); }

.contactLink{ border:1px solid var(--soft-black); background-color:var(--soft-black); color:var(--white); }
.contactLink:hover{ background-color:transparent; color:var(--soft-black); }

.infosLink{ border:1px solid var(--gold); }
.infosLink:hover{ color:var(--soft-black); background-color:var(--gold); }

/* =========================================================
   PACKS (NOUVELLE VERSION) — .packs-container + .pack-card
   (celle utilisée par ton index.php)
   ========================================================= */
.packs-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center; /* centre la dernière ligne */
  gap:24px;
  max-width:1200px;
  margin: 3rem auto;
  padding: 0 16px 2rem;
}

/* carte standard */
.pack-card{
  position:relative;
  width:320px;
  background:#fff;
  color:#333;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
}

/* image standard (seulement l’image directe de la carte) */
.pack-card > img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

/* header / body / footer */
.card-header{
  background:#0B6623;
  color:#fff;
  font-weight:700;
  font-size:1.2rem;
  text-align:center;
  padding:12px;
}

.card-body{
  padding:16px;
  flex:1 1 auto;
  font-size:0.95rem;
}

.card-body ul{
  list-style:none;
  padding:0;
  margin:0 0 12px 0;
}

.card-body li{
  margin:6px 0;
  display:flex;
  align-items:center;
  gap:6px;
}

.price{
  text-align:right;
  font-size:1rem;
  color:#0B6623;
}

.price span{
  font-size:0.85rem;
  color:#666;
  margin-right:4px;
}

.price strong{
  font-size:1.3rem;
  font-weight:700;
  margin-left:4px;
}

.card-footer{
  display:flex;
  justify-content:center;
  padding:12px;
  background:#fafafa;
  border-top:1px solid #eee;
  margin-top:auto;
}

.btn-reserver{
  flex:1;
  padding:12px;
  background:#0B6623;
  color:#fff;
  font-weight:600;
  border-radius:6px;
  text-align:center;
  text-decoration:none;
  transition:background 0.2s;
}
.btn-reserver:hover{ background:#094d1a; }

.pack-card--complete::before,
.pack-card--last-place::before{
  position:absolute;
  top:24px;
  left:-86px;
  z-index:20;
  width:280px;
  padding:11px 0 10px;
  transform:rotate(-35deg);
  color:#fff;
  font-weight:800;
  font-size:1.05rem;
  line-height:1;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:0 8px 18px rgba(0,0,0,.3);
  pointer-events:none;
}

.pack-card--complete::before{
  content:"COMPLET";
  background:#c70000;
}

.pack-card--last-place::before{
  content:"DERNIÈRE PLACE";
  background:#c88912;
  color:#181818;

  top:42px;
  left:-60px;
  width:280px;
  transform:rotate(-35deg);

  font-size:1.05rem;
  text-align:center;
}
/* MOBILE : cartes full width */
@media (max-width:600px){
  .packs-container{ margin-top:2rem; }
  .pack-card{ width:100%; }
}

/* =========================================================
   CARTE MARS + FLYER (pack-card--with-flyer)
   ========================================================= */
.pack-card--with-flyer{
  width:664px;         /* 320 + 320 + petit jeu */
  max-width:100%;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap:0;
  align-items:start;
}

/* la partie "fiche" garde le style carte */
.pack-card--with-flyer .pack-card__main{
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* image principale de la fiche Mars */
.pack-card--with-flyer .pack-card__main > img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

/* flyer à droite */
.pack-card--with-flyer .pack-card__flyer{
  background:#fff;
  border-left:1px solid #eee;
}

.pack-card--with-flyer .pack-card__flyer img{
  width:100%;
  height:auto;               /* IMPORTANT : ne pas forcer à 200px */
  object-fit:contain;
  display:block;
}

/* Mobile : on empile fiche + flyer */
@media (max-width:700px){
  .pack-card--with-flyer{
    width:100%;
    grid-template-columns:1fr;
  }
  .pack-card--with-flyer .pack-card__flyer{
    border-left:none;
    border-top:1px solid #eee;
  }
}

/* =========================================================
   BADGE “Les 15 derniers jours” UNIQUEMENT sur Mars
   ========================================================= */
@keyframes ohf-blink{
  0%,100%{ opacity:1; }
  50%{ opacity:.25; }
}

.pack-card--mars .pack-card__main{ position:relative; }

.pack-card--mars .pack-card__main::before{
  content:"Les 15 derniers jours";
  position:absolute;
  top:12px; right:12px;
  z-index:10;
  padding:6px 10px;
  background:#d50000;
  color:#fff;
  font-weight:800;
  font-size:.95rem;
  border-radius:8px;
  letter-spacing:.5px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  animation:ohf-blink 1s steps(2, start) infinite;
}

@media (max-width:340px){
  .pack-card--mars .pack-card__main::before{
    top:8px; right:8px;
    font-size:1rem;
    padding:7px 12px;
  }
}

/* =========================
   (Ancien bloc .packs / .pack)
   - laissé pour compatibilité si tu as d’autres pages
   - scope sur .packs pour ne pas casser tes pack-card
   ========================= */
.packs{
  height:auto;
  border-bottom:1px solid var(--gold);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2%;
  position:relative;
  padding:3rem 0;
}

.packs__subtitle{
  position:absolute; top:0; right:0;
  padding:1rem;
  background-color:var(--nude);
  color:var(--black);
  font-size:1.2rem;
}

/* grille pour les .pack uniquement (si utilisée ailleurs) */
.packs .packs-container{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
@media (min-width:700px){
  .packs .packs-container{ grid-template-columns:repeat(2, minmax(320px, 1fr)); }
}
@media (min-width:1200px){
  .packs .packs-container{ grid-template-columns:repeat(3, minmax(320px, 1fr)); }
}

.pack{
  border-radius:16px;
  overflow:hidden;
  background:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  transition:box-shadow .5s;
  cursor:pointer;
}

.pack h3{
  margin:0;
  padding:12px 16px;
  font-size:clamp(18px,2.1vw,26px);
  line-height:1.25;
  text-align:left;
  background:transparent;
  white-space:normal;
  word-break:break-word;
}

.pack__image-container{
  width:100%;
  aspect-ratio:3 / 4;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.pack__image-container img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.pack__content{ padding:1rem; color:var(--white); }
.pack__content p{ font-size:1.4rem; }
.pack__content ul{ padding:1rem; display:flex; height:6rem; }
.pack__content li{
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  margin:0 .5rem;
  width:20%;
  text-align:center;
  background-color:var(--soft-black);
  border:1px solid var(--gold);
  border-radius:1rem;
}
.pack__content .pack__content__infos{ font-style:italic; font-size:1.2rem; }

.badge{
  position:absolute;
  top:5%; right:5%;
  background-color:var(--gold);
  padding:.5rem;
  border-radius:.5rem;
  color:var(--soft-black);
}
.badge__price{ font-weight:800; font-size:1.2rem; }

.pack__modal{
  position:absolute; inset:0; z-index:11;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  background-color:rgba(0,0,0,.705);
  gap:1rem;
  padding:1rem 0;
  opacity:0;
  transition:opacity .2s;
}
.pack:hover .pack__modal{ opacity:1; }

.pack__modal h4{
  width:100%;
  text-align:center;
  font-size:1.7rem;
  color:var(--nude);
}
.pack__modal__card{
  height:35%;
  width:40%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
  background-color:var(--soft-black);
  border-radius:1rem;
}
.pack__modal__card h5{
  font-size:1.4rem;
  height:2rem;
  color:var(--white);
  text-transform:uppercase;
  border-bottom:1px solid var(--nude);
  width:100%;
  text-align:center;
}
.pack__modal__card__icon{
  font-size:2rem;
  background-color:var(--nude);
  width:100%;
  text-align:center;
  color:var(--soft-black);
}
.pack__modal__card__price{
  font-size:1.2rem;
  font-weight:800;
  width:30%;
  text-align:center;
  border-top:1px solid var(--nude);
  border-bottom:1px solid var(--nude);
  padding:.2rem 0;
}
.pack__modal__card__infos{ font-style:italic; font-size:.8rem; }

.pack__cta{ margin-top:auto; padding:16px; }
.pack__cta .link{
  position:static;
  transform:none;
  left:auto;
  display:block;
  width:100%;
  text-align:center;
  padding:14px 16px;
  font-size:clamp(14px,1.4vw,18px);
}

@media (max-width:800px){
  .pack__modal{ display:none; }
}

/* =======================
   Hotels / Visites
   ======================= */
.hotel-section{ min-height:100vh; position:relative; padding-bottom:6rem; }
.hotel-section h2{ margin-top:1rem; margin-bottom:2rem; }

.hotel-nav{
  width:100%;
  display:flex;
  justify-content:center;
  gap:1rem;
  margin:3rem 0 2rem;
}

.hotel-section button{
  transition:box-shadow .1s;
  background-color:transparent;
  color:var(--lighten-nude);
  font-size:1.5rem;
  border:2px solid var(--lighten-nude);
  border-radius:1.1rem;
  padding:.5rem;
  box-shadow:-2px 2px 0 var(--lighten-nude);
}
.hotel-section button:hover{ background-color:var(--brown); }
.hotel-section button:active{ box-shadow:0 0 0 var(--gold); }

.hotel-section article{
  display:flex;
  flex-wrap:wrap;
  width:80%;
  margin:auto;
  margin-bottom:1rem;
  gap:1rem;
  justify-content:space-evenly;
}

.hotel-section .card{
  border-radius:1rem;
  overflow:hidden;
  background-color:rgba(0,0,0,.705);
  width:32%;
  position:relative;
  height:50vh;
}

.hotel-section .card h3{
  padding:1rem;
  color:var(--white);
  font-size:2rem;
  position:absolute;
  top:0; left:0;
  background-color:#0000008f;
  opacity:0;
  transition:opacity .1s;
}

.hotel-section .card:hover h3,
.hotel-section .card:hover p{ opacity:1; }

.hotel-section article img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:bottom;
}

.hotel-section .more{
  position:absolute;
  bottom:0; left:0;
  background-color:#18181892;
  width:100%;
  padding:1rem;
  text-decoration:underline var(--gold);
  opacity:0;
  transition:opacity .3s;
}

/* =======================
   Values
   ======================= */
.values{
  box-sizing:border-box;
  padding-top:2rem;
  justify-content:flex-start;
  background-color:#FAF9F6;
  height:65vh;
  position:relative;
}

.values__container{
  width:100%;
  margin:0 auto;
  gap:5%;
  justify-content:center;
  height:70%;
  display:flex;
  flex-direction:row;
  align-items:center;
  flex-wrap:wrap;
}

.values h2{
  color:var(--black);
  text-decoration:none;
  letter-spacing:.3rem;
  text-decoration:underline var(--nude);
}
.values h2 span{ color:var(--black); }

.values__card{
  height:60%;
  color:var(--brown);
  width:14%;
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  text-align:center;
  transition:transform .5s;
  border:1px solid var(--soft-black);
}

.values__card:hover{ transform:scale(1.1) translateY(1rem); }

.values__card .catch{ color:var(--soft-black); font-weight:600; }

.values__card h3{
  height:4rem;
  width:100%;
  border-bottom:1px solid var(--brown);
  color:var(--brown);
  font-size:1.5rem;
  font-weight:600;
}

.values__card p{ font-size:1rem; margin:1rem 0; line-height:1.4rem; }

/* =======================
   Avis
   ======================= */
.avis{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3rem;
  padding-bottom:2rem;
}
.avis img{ width:60%; }
.avis .ratings{ display:flex; width:70%; justify-content:space-evenly; }
.avis .rating1{ width:28%; }
.avis .rating2{ width:68%; }

/* =======================
   Contact
   ======================= */
.contact{
  box-sizing:border-box;
  height:100vh;
  padding-top:3rem;
  position:relative;
}

.contact__subtitle{
  margin-top:1rem;
  width:100%;
  text-align:center;
}

.contact__subtitle.error{
  color:#ffcdcd;
  font-weight:600;
}

.contact__form{
  margin:auto;
  width:50%;
  height:50%;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  border:1px solid var(--gold);
  border-radius:1rem;
  padding:1rem;
  margin-top:4rem;
}

.contact__form fieldset{
  display:flex;
  flex-direction:column;
  text-align:center;
  gap:1rem;
  font-size:1.5rem;
}

.contact__form input,
.contact__form select{
  text-align:center;
  height:3rem;
  font-size:1rem;
}

.contact__form input:focus{ background-color:var(--gold); }

.contactLinks{ display:flex; }

.phoneLink,.whatsappLink{
  display:block;
  color:var(--nude);
  width:100%;
  text-align:center;
  margin-top:2.5rem;
  font-size:1.1rem;
}

.contact-infos i,.phoneLink i{ margin-right:.5rem; color:var(--gold); }
.contact-infos li:hover,.phoneLink:hover{ color:var(--gold); }

.whatsappLink:hover{ color:rgb(0,255,55); }
.whatsappLink i{ color:rgb(0,255,55); margin-right:.5rem; font-size:1.8rem; }

.instaLink i{ font-size:1.4rem; color:#DD2A7B; }
.instaLink:hover{ color:#DD2A7B; }

/* =======================
   Footer + infos
   ======================= */
footer{
  position:relative;
  height:100vh;
}

footer picture{
  display:block;
  max-width:1200px;
  margin:0 auto;
  padding-top:3rem;
}

footer picture img{
  width:100%;
  height:auto;
  object-fit:contain;
}

/* infos en bas */
.contact-infos{
  position:absolute;
  bottom:5%;
  width:100%;
  display:flex;
  justify-content:space-evenly;
  color:var(--nude);
  font-size:1.2rem;
  padding:0 16px;
  gap:12px;
  flex-wrap:wrap;
}

/* =======================
   Responsive global
   ======================= */
@media (max-width:1400px){
  .values{ height:100vh; }
  .values__card{ width:30%; height:30%; }
}

@media (max-width:1200px){
  html{ font-size:.95rem; }
  .values__container{ width:80%; }
  .options{ width:80%; gap:1rem; }
}

@media (max-width:900px){
  .logo{ height:revert; }
  .programme .day{ width:80%; }
}

@media (max-width:800px){
  .values{ height:auto; gap:2rem; padding:2rem 0; }
  .values__card{ width:80%; background:rgba(255,255,255,.212); margin:1rem 0; }
  .values__card:hover{ transform:none; }
  .values__container{ gap:0; }

  .contact__form{ width:80%; height:70%; }

  .hotel-section article{ flex-direction:column; align-items:center; }
  .hotel-section .card{ width:95%; }
  .hotel-section .card h3, .hotel-section .card p{ opacity:1; }

  .avis img{ width:95%; }
  .avis .ratings{ flex-direction:column; align-items:center; gap:2rem; width:100%; }
  .avis .rating1{ width:60%; }
  .avis .rating2{ width:95%; }

  .contact{ padding-bottom:6rem; }
  .contactLinks{ flex-direction:column; }
}

@media (max-width:500px){
  header{ height:50vh; }
  .contact-infos{
    bottom:0;
    width:100%;
    padding:1rem;
    background-color:#0000007e;
  }
  .phoneLink,.whatsappLink{ margin-top:0; padding:.5rem 0; margin:.4rem 0; }
  .contact{ padding-bottom:10rem; }
}