:root{
  --container: 1400px;

  --white: #ffffff;
  --overlay: rgba(126, 86, 63, 0.55); /* warm brown overlay */
  --overlay2: rgba(90, 60, 46, 0.22);

  --text: rgba(255,255,255,0.92);
  --text-soft: rgba(255,255,255,0.80);
  --stroke: rgba(255,255,255,0.70);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: 'Montserrat', sans-serif;
  background:#111;
  color: var(--white);
}

/* HERO */
.hero{
  position: relative;
  min-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;

  /* Replace this with your real image */
  background-image:
    linear-gradient(90deg, var(--overlay), var(--overlay2)),
    url("img/hero.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.hero-a-propos-de-nous {
    background-image:
    linear-gradient(90deg, var(--overlay), var(--overlay2)),
    url("img/hero-about.jpg");
    min-height: unset;
}

.hero-nos-cours {
    background-image:
    linear-gradient(90deg, var(--overlay), var(--overlay2)),
    url("img/hero-cours.jpg");
    min-height: unset;
}

.hero-tarifs {
    background-image:
    linear-gradient(90deg, var(--overlay), var(--overlay2)),
    url("img/hero-tarifs.jpg");
    min-height: unset;
}

.hero-contact {
    background-image:
    linear-gradient(90deg, var(--overlay), var(--overlay2)),
    url("img/hero-contact.jpg");
    min-height: unset;
}

.hero__container{
  width: min(1400px, 100%);
  margin: 0 auto;
}

/* Desktop large (1400 → 1024) */
@media (max-width: 1400px){
  .hero__container{
    padding: 0 40px; /* total 80px */
  }
}

/* Tablet (1024 → 768) */
@media (max-width: 1024px){
  .hero__container{
    padding: 0 20px; /* total 40px */
  }
}

/* TOP BAR */
.hero__header{
  padding-top: 26px;
}

.hero__topbar{
  display: grid;
  grid-template-columns: 260px 1fr 250px;
  align-items: center;
  gap: 16px;
}

/* Brand */
.hero__brand{
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--white);
}

.hero__brand .logo{
    width: 100%;
}

/* Nav */
.hero__nav{
  display: flex;
  justify-content: center;
  gap: 44px;
}

@media (max-width: 1300px){
  .hero__nav{
    gap: 20px;
  }
}

.hero__navLink{
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 16px;
  text-transform: uppercase;
}

.hero__navLink:hover{
  color: var(--white);
}







/* Burger button */
.burger{
  display: none;            /* shown under 1199px below */
  width: 40px;
  height: 34px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 2001;            /* above menu */
}

.burger span{
  display: block;
  height: 2px;
  width: 100%;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
  transition: transform .28s ease, opacity .18s ease;
}

.burger span:nth-child(1){ transform: translateY(-8px); }
.burger span:nth-child(2){ transform: translateY(0); }
.burger span:nth-child(3){ transform: translateY(8px); }

/* Burger -> Close (X) when open */
.is-menu-open .burger span:nth-child(1){
  transform: translateY(0) rotate(45deg);
}
.is-menu-open .burger span:nth-child(2){
  opacity: 0;
}
.is-menu-open .burger span:nth-child(3){
  transform: translateY(0) rotate(-45deg);
}

/* Mobile menu overlay */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

/* dim overlay behind panel */
.mobile-menu::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

/* Panel slides from right */
.mobile-menu__panel{
  position: absolute;
  inset: 0;
  padding: 120px 40px 40px; /* leave room for header */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;

  background:
    radial-gradient(900px 620px at 35% 35%, rgba(255,255,255,0.08), rgba(255,255,255,0) 58%),
    linear-gradient(90deg, rgba(74,45,34,1), rgba(123,86,63,1));

  transform: translateX(100%);
  transition: transform .38s ease;
}

/* Open state */
.is-menu-open .mobile-menu{
  opacity: 1;
  pointer-events: auto;
}

.is-menu-open .mobile-menu__panel{
  transform: translateX(0);
}

/* Links like footer */
.mobile-menu__nav{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

.mobile-menu__link{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 24px;
}

.mobile-menu__link:hover{
  color: #fff;
}

/* CTA */
.mobile-menu__cta{
  margin-top: 10px;
}

/* Lock scroll when menu open */
.is-menu-open{
  overflow: hidden;
}





@media (max-width: 1199px){

  .hero__nav{ display: none; /* hide desktop nav */ }
  
  .header-reservation { display: none !important; /* hide desktop nav */ }

  .burger{ display: inline-block; justify-self: end; } 
    
  /* Optional: adjust grid layout */
  .hero__topbar{
    grid-template-columns: 260px 1fr; 
  }

}

@media (max-width: 768px){
    .hero__topbar{
    grid-template-columns: 200px 1fr; 
  }
    
}




/* CONTENT */
.hero__content{
  padding-top: 170px; /* positions headline like screenshot */
  padding-bottom: 90px;
}

.hero__title{
  margin: 0 0 14px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 64px;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--white);
}

.hero__subtitle{
  margin: 0 0 36px 0;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white);
  font-size: 25px;
}

.hero__actions{
  display: flex;
  gap: 22px;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .08s ease, background-color .2s ease, border-color .2s ease;
  white-space: nowrap;
}

.btn-auto{
    width: auto; 
    margin: auto;
}

.btn:active{ transform: translateY(1px); }

.btn--pill{ border-radius: 999px; }

.btn--solid{
  background: var(--white);
  color: rgba(88, 58, 43, 1);
  border-color: rgba(255,255,255,0.9);
}

.btn--solid:hover{
  background: rgba(255,255,255,0.92);
}

.btn--ghost{
  background: transparent;
  color: var(--white);
  border-color: var(--stroke);
}

.btn--ghost:hover{
  border-color: var(--white);
}

.hero__header .btn--ghost:hover{
  background: var(--white);
  color: rgba(88, 58, 43, 1);
  border-color: var(--white);
}

@media (max-width: 768px){
    .hero {
        min-height: unset;
    }
    .hero__content {
        padding-bottom: 100px;
        padding-top: 100px;
    }
    .btn {
        padding: 0 16px;
        font-size: 14px;
    }
    .hero__title {
        font-size: 50px;
    }
    .hero__subtitle {
        font-size: 20px;
    }
}

@media (max-width: 500px){
    .hero__actions {
        display: grid;
    }
    .hero__actions .btn {
        width: fit-content;
        margin: auto;
    }
}


/* BELOW HERO SECTION */
.below-hero{
  background: #765238; /* solid warm brown */
  padding: 50px 0;
}

.below-hero__container{
  width: min(var(--container), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  text-align: center;
}

@media (max-width: 900px){
    .below-hero__container {
        gap: 20px;
    }
    .below-hero__container .btn {
        padding: 0 16px;
        font-size: 14px;
    }
    
}

@media (max-width: 768px){
    .below-hero__container {
        grid-template-columns: 1fr;
    }
}

/* ABOUT BLOCK (below hero) */
.about-block{
  background: #fbf7f3;          /* cream background */
  padding: 90px 0;
}

.about-block__grid{
  display: grid;
  grid-template-columns: 640px 1fr; /* image a bit wider */
  gap: 80px;
  align-items: start;
}

.about-block__media{
  border-radius: 22px;
  overflow: hidden;
}

.about-block__media img{
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
}

.about-block__content{
  padding-top: 6px;
  color: #1c1c1c;
}

.about-block__title{
  margin: 0 0 10px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.05;
  text-transform: uppercase;
  color: #7b563f; /* warm brown like screenshot */
  letter-spacing: 0.02em;
}

.about-block__kicker{
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 18px;
  color: rgba(123, 86, 63, 0.95);
  margin-bottom: 24px;
}

.about-block__content p {
  margin: 0 0 18px 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(20, 20, 20, 0.78);
  text-align: justify;
}

.about-block__content strong{
  color: rgba(20, 20, 20, 0.92);
  font-weight: 700;
}

.about-block__closing{
  margin-top: 26px;
}

@media (max-width: 1400px){
    .about-block__grid {
        gap: 40px;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px){
    .about-block__grid {
        grid-template-columns: 1fr;
    }
    .about-block__media{
      order: 2;
    }
    .about-block__content{
      order: 1;
    }
    .about-block__content p {
      text-align: left;
    }
}



/* Button variant: ghost brown (reuses your .btn + .btn--ghost) */
.btn--ghost-brown{
  color: #7b563f;
  border-color: rgba(123, 86, 63, 0.70);
  background: transparent;
}

.btn--ghost-brown:hover{
  border-color: #7b563f;
  background: #7b563f;
  color: #ffffff;
}

.logo-arch{
  background: #fbf7f3; /* same cream page bg */
  display: flex;
  justify-content: center;
  height: 90px;
    overflow: hidden;
}

.logo-arch__shape{
  width: 400px;
    height: 200px;
    background: #6f4a36;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-arch__img{
  height: auto;
  transform: translateY(-50px); /* move logo slightly down/up */
}

/* SPACE SLIDER BLOCK */
.space-slider{
  padding: 110px 0 120px;
  color: #fff;

  /* warm brown gradient background like screenshot */
  background:#6f4a36;
}

.space-slider__wrap{
  /* reuse your container; ensure padding exists in your hero__container */
}

.space-slider__head{
  margin-bottom: 48px;
  max-width: 980px;
}

.space-slider__title{
  margin: 0 0 12px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}

.space-slider__subtitle{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
}

.space-slider__stage{
  position: relative;
}

/* two big images */
.space-slider__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px; /* big gap like screenshot */
  align-items: stretch;
}

.space-slider__card{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);

  /* subtle “frame” like the screenshot */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 18px 50px rgba(0,0,0,0.22);
}

.space-slider__card img{
  width: 100%;
  height: 420px;     /* adjust to match your crop */
  object-fit: cover;
  display: block;
}

/* arrows */
.space-slider__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 70px;
  border-radius: 999px;

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

  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.92);
  cursor: pointer;

  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.space-slider__arrow span{
  font-size: 56px;
  line-height: 1;
  transform: translateY(-2px) translateX(2px);
}

.space-slider__arrow--left{ left: -100px; }
.space-slider__arrow--right{ right: -100px; }
.space-slider__arrow--left span { left: -100px; transform: translateY(-2px) translateX(-2px); }


.space-slider__arrow:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.95);
}

.space-slider__arrow:active{
  transform: translateY(-50%) scale(0.98);
}

@media (max-width: 1600px){
    .space-slider__arrow {
        display: none
    }
}

@media (max-width: 1200px){
    .space-slider__grid {
        gap: 40px;
    }
}

@media (max-width: 768px){
    .space-slider__grid {
        grid-template-columns: 1fr;
    }
}

/* EXPERIENCE BLOCK */
.experience{
  background: #fbf7f3; /* same cream */
  padding: 90px 0 95px;
}

.experience__head{
  text-align: center;
  margin-bottom: 46px;
}

.experience__title{
  margin: 0 0 10px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 54px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #7b563f;
  line-height: 1.05;
}

.experience__subtitle{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(123, 86, 63, 0.95);
}

.experience__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
  align-items: start;
}

.experience__card{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(123,86,63,0.10) inset;
}

.experience__img{
  width: 100%;
  height: 440px;       /* adjust crop */
  object-fit: cover;
  display: block;
    transition: transform .6s ease;
  will-change: transform;
}

.experience__card:hover .experience__img{
  transform: scale(1.08);
}


.experience__caption{
  background: #6f4a36; /* brown bar */
  color: rgba(255,255,255,0.92);
  text-align: center;
  padding: 18px 18px;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.experience__caption strong{
  font-weight: 800;
  color: rgba(255,255,255,0.96);
}

.experience__cta{
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

.experience__btn{
  /* make it brown like the screenshot CTA */
  background: #6f4a36;
  color: #fff;
  border-color: rgba(111,74,54,0.95);
}

.experience__btn:hover{
  background: rgba(111,74,54,0.92);
}

@media (max-width: 1300px){
    
    .experience__grid {
        gap:30px;
    }
    
}

@media (max-width: 1200px){
    
    .experience__caption {
        font-size: 16px;
    }
    
}

@media (max-width: 768px){
    
    .experience__grid {
        grid-template-columns: 1fr
    }
    .experience__card {
        width: 100%;
    }
    .experience__title{ 
        font-size: 40px;
    }
    
}




/* PRICING */
.pricing{
  padding: 110px 0 120px;
  color: #fff;

  background:
    radial-gradient(850px 560px at 30% 35%, rgba(255,255,255,0.08), rgba(255,255,255,0) 58%),
    linear-gradient(90deg, rgba(74,45,34,1), rgba(123,86,63,1));
}

.pricing__head{
  text-align: center;
  margin-bottom: 58px;
}

.pricing__title{
  margin: 0 0 10px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 56px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.95);
}

.pricing__subtitle{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}

/* 3 cards */
.pricing__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  align-items: stretch;
}

.pricing__card{
  border-radius: 14px;
  border: 3px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.10);
  padding: 22px 26px 28px;
  min-height: 210px;

  box-shadow: 0 12px 40px rgba(0,0,0,0.16);
}

.pricing__top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255,255,255,0.70);
}

.pricing__name{
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  color: rgba(255,255,255,0.95);
}

.pricing__valid{
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}

.pricing__body{
  padding-top: 28px;
  text-align: center;
}

.pricing__price{
  font-size: 64px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(255,255,255,0.96);
}

.pricing__note{
  margin-top: 6px;
  font-size: 20px;
  color: rgba(255,255,255,0.90);
}

/* Highlight card (beige) */
.pricing__card--highlight{
  border-color: rgba(255,255,255,0.0);
  background: rgba(214, 194, 176, 0.92); /* beige */
}

.pricing__card--highlight .pricing__top{
  border-bottom-color: rgba(255,255,255,0.75);
}

.pricing__card--highlight .pricing__name,
.pricing__card--highlight .pricing__valid,
.pricing__card--highlight .pricing__price,
.pricing__card--highlight .pricing__note{
  color: #ffffff;
}

/* CTA */
.pricing__cta{
  display: flex;
  justify-content: center;
  margin-top: 54px;
}

/* Button variant for dark bg (uses your .btn base) */
.btn--ghost-light{
  border-color: rgba(255,255,255,0.85);
  color: rgba(255,255,255,0.95);
}

.btn--ghost-light:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.95);
}

@media (max-width: 1024px){
    .pricing__title {
        font-size: 40px;
    }
    
    .pricing__grid {
        grid-template-columns: 1fr;
    }
    
    .pricing__card {
        width: 480px;
        margin: auto;
    }
    
}

@media (max-width: 768px){
    .pricing__card {
        width: 100%;
    }
}



/* APP BLOCK */
.app-block{
  position: relative;
  padding: 90px 0 0 0;
  overflow: hidden;

  background-image:
    linear-gradient(90deg, rgba(111,74,54,0.62), rgba(111,74,54,0.35)),
    url("img/app-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.app-block__grid{
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 60px;
  align-items: center;
}

.app-block__content{
  color: rgba(255,255,255,0.92);
}

.app-block__title{
  margin: 0 0 22px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}

.app-block__content p{
  margin: 0 0 26px 0;
  font-size: 22px;        /* big text like screenshot */
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
}

.app-block__btn{
  height: 56px;            /* larger CTA */
  padding: 0 34px;
  font-size: 16px;
  border-width: 2px;
  margin-top: 10px;
}

/* Phone */
.app-block__phone{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none; /* purely decorative */
}

.app-block__phone img{
  width: 420px; /* adjust to match */
  height: auto;
  transform: rotate(0deg) translate(40px, 10px);
  filter: drop-shadow(0 22px 40px rgba(0,0,0,0.35));
}

@media (max-width: 1199px){
    
    .app-block__title {
        font-size: 40px;
    }
    
    .app-block__content p {
        font-size: 18px;
    }
    
}

@media (max-width: 900px){
    .app-block__grid {
        grid-template-columns: 1fr;
    }
    .app-block__title {
        text-align: center;
    }
    .app-block__phone {
        margin: auto;
    }
    .app-block__phone img {
        max-width: 100%;
    }
}

@media (max-width: 500px){
    .app-block__btn {
        height: 40px;
    padding: 0 20px;
    font-size: 14px;
    }
}



/* FOOTER */
.site-footer{
  color: rgba(255,255,255,0.92);
  background:
    radial-gradient(900px 600px at 35% 35%, rgba(255,255,255,0.08), rgba(255,255,255,0) 58%),
    linear-gradient(90deg, rgba(74,45,34,1), rgba(123,86,63,1));
  padding: 70px 0 0;
}

.site-footer__grid{
  display: grid;
  grid-template-columns: 420px 1fr 260px;
  gap: 50px;
  align-items: start;
  padding-bottom: 42px;
}

/* Brand */
.site-footer__brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.site-footer__logo{
  width: 100%; /* adjust */
  height: auto;
  display: block;
}

.site-footer__tag{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
}

/* Contact column with divider */
.site-footer__contact{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 24px;
}

.site-footer__divider{
  width: 2px;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  margin-top: 10px;
}

.site-footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.site-footer__item{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}

.site-footer__ico{
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
}

.site-footer__ico svg{
  width: 100%;
  height: 100%;
  display: block;
}

.site-footer__text{
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255,255,255,0.86);
}

.site-footer__text strong{
  color: rgba(255,255,255,0.95);
  font-weight: 800;
}

/* Right menu */
.site-footer__nav{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  padding-top: 10px;
}

.site-footer__link{
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 22px;
}

.site-footer__link:hover{
  color: #fff;
}

/* Bottom line */
.site-footer__bottom{
  padding: 22px 0 26px;
}

.site-footer__bottomInner{
  text-align: center;
}

.site-footer__legal{
  font-size: 16px;
  color: rgba(255,255,255,0.86);
  margin-bottom: 6px;
}

.site-footer__legalLink{
  color: rgba(255,255,255,0.86);
  text-decoration: none;
}

.site-footer__legalLink:hover{
  color: #fff;
  text-decoration: underline;
}

.site-footer__dot{
  margin: 0 10px;
  opacity: 0.9;
}

.site-footer__copy{
  font-size: 16px;
  color: rgba(255,255,255,0.80);
}


@media (max-width: 1199px){
    
    .site-footer__grid{
      grid-template-columns: 300px 1fr 200px;
      gap: 30px;
      align-items: start;
      padding-bottom: 42px;
        grid-template-areas:"brand contact nav";
    }
    
    .site-footer__brand   { grid-area: brand; }
    .site-footer__contact { grid-area: contact; }
    .site-footer__nav     { grid-area: nav; }
    
    .site-footer__link {
        font-weight: 700;
        font-size: 18px;
    }
    
    .site-footer__text {
        font-size: 16px;
    }
    
}

@media (max-width: 1024px){
    .site-footer__grid{
      grid-template-columns: 300px 1fr;
      gap: 30px;
     grid-template-areas:
         "brand contact"
         "nav nav";
    }
    
    .site-footer__nav {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
    
    .site-footer__link {
        text-align: center;
    }
}

@media (max-width: 768px){
    .site-footer__grid{
      grid-template-columns: 1fr;
      gap: 30px;
     grid-template-areas:
         "brand"
         "contact"
         "nav";
    }
    
    .site-footer__brand {
        padding-bottom: 20px;
        border-bottom: 2px solid #fff;
    }
    
    .site-footer__logo {
        max-width: 400px;
    }
    
    .site-footer__contact {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0px;
    }
    
    .site-footer__divider {
        display: none;
    }
    
    .site-footer__nav {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .site-footer__link {
        text-align: left;
    }
    
    .site-footer__legal, .site-footer__copy {
        font-size: 12px;
    }
}







/* A-PROPOS / VISION BLOCK */
.about-vision{
  background: #fbf7f3; /* cream */
  padding: 90px 0 95px;
}

.about-vision__wrap {
    width: min(1100px, 100%);
}

/* top row */
.about-vision__top{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr; /* text wider, portrait smaller */
  gap: 70px;
  align-items: start;
}

.about-vision__title{
  margin: 0 0 10px 0;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.05;
    text-transform: uppercase;
    color: #7b563f;
    letter-spacing: 0.02em;
}

.about-vision__subtitle{
  font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 18px;
    color: rgba(123, 86, 63, 0.95);
    margin-bottom: 24px;
}

.about-vision__text p{
  margin: 0 0 18px 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(20, 20, 20, 0.78);
    text-align: justify;
}

/* portrait */
.about-vision__portrait{
  display: flex;
  justify-content: flex-end;
}

.about-vision__portrait img{
  object-fit: cover;
  border-radius: 18px;
  display: block;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}

/* cards */
.about-vision__cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  margin-top: 44px;
}

.about-vision__card{
  background: #6f4a36;
  border-radius: 14px;
  padding: 36px 42px;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.14);
}

.about-vision__cardTitle{
  margin: 0 0 18px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.95);
}

.about-vision__cardText{
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.86);
}

@media (max-width: 768px){
    
    .about-vision__top {
        grid-template-columns: 1fr;
        gap:40px;
    }
    .about-vision__text p {
        text-align: left;
    }
    .about-vision__portrait img {
        margin: auto;
    }
    .about-vision__cards {
        grid-template-columns: 1fr;
        gap:40px;
    }
    .about-vision__card {
        width: 400px;
        margin: auto;
    }
}

@media (max-width: 440px){
    .about-vision__card {
        width: 100%;
    }
    .about-vision__portrait img {
        width: 100%;
    }
}



/* TEAM */
.team{
  padding: 90px 0 110px;
  color: #fff;

  background:
    radial-gradient(900px 620px at 35% 35%, rgba(255,255,255,0.08), rgba(255,255,255,0) 58%),
    linear-gradient(90deg, rgba(74,45,34,1), rgba(123,86,63,1));
}

.team__head{
  text-align: center;
  margin-bottom: 44px;
}

.team__title{
  margin: 0 0 10px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}

.team__subtitle{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
}

/* grid */
.team__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px 62px; /* row gap, col gap like screenshot */
}

/* card */
.team__card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.team__photo{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

.team__photo img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* text under image */
.team__name{
  margin: 16px 0 4px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.94);
}

.team__role{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
}

/* Optional: image-only zoom on hover */
.team__photo img{
  transition: transform .6s ease;
  will-change: transform;
}

.team__card:hover .team__photo img{
  transform: scale(1.05);
}

@media (max-width: 1024px){
    
    .team__grid{
      grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 768px){
    
    .team__grid{
      grid-template-columns: 1fr;
    }
}


/* AUTONOMIE BLOCK */
.autonomie{
  background: #fbf7f3; /* cream */
  padding: 90px 0 100px;
}

.autonomie__grid{
  display: grid;
  grid-template-columns: 1fr 600px;
  gap: 80px;
  align-items: center;
}

.autonomie__title{
  margin: 0 0 10px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #7b563f;
}

.autonomie__subtitle{
  font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 18px;
    color: rgba(123, 86, 63, 0.95);
    margin-bottom: 24px;
}

.autonomie__content p{
  margin: 0 0 18px 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(20, 20, 20, 0.78);
    text-align: justify;
}

.autonomie__media{
  display: flex;
  justify-content: flex-end;
}

.autonomie__media img{
  width: 100%;
  max-width: 600px;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

@media (max-width: 1024px){
    .autonomie__grid{
      grid-template-columns: 1fr;
      gap: 40px;
    }
}


/* BOOKING CTA */
.booking-cta{
  position: relative;
  padding: 95px 0 105px;
  overflow: hidden;

  background-image:
    linear-gradient(90deg, rgba(84,60,48,0.58), rgba(84,60,48,0.35)),
    url("img/bg-reservation.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.informations {
    background-image:
    linear-gradient(90deg, rgba(84,60,48,0.58), rgba(84,60,48,0.35)),
    url("img/bg-informations.jpg");
}

.booking-cta__inner{
  text-align: center;
  max-width: 980px;
}

.booking-cta__title{
  margin: 0 0 10px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}

.booking-cta__subtitle{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  margin-bottom: 26px;
}

.booking-cta__text{
  max-width: 760px;
  margin: 0 auto 26px;
}

.booking-cta__text p{
  margin: 0 0 16px 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.95);
    text-align: left;
}

.booking-cta__btn{
  height: 44px;
  padding: 0 26px;
  font-size: 16px;
}

@media (max-width: 1024px){
    .booking-cta__text p{
        text-align: center;
    }
}



/* PRICING MATRIX */
.pricing-matrix{
  background: #fbf7f3;
  padding: 85px 0 95px;
}

.pricing-matrix__grid{
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* panels */
.pricing-matrix__panel{
  border: 3px solid rgba(111,74,54,0.85);
  border-radius: 10px;
  background: #fff;
  padding: 26px 22px 26px;
}

.pricing-matrix__panel--featured{
  background: #6f4a36;
  border-color: #6f4a36;
  color: #fff;
  padding: 28px 22px 24px;
}

.pricing-matrix__panelHead{
  text-align: center;
  margin-bottom: 18px;
}

.pricing-matrix__panelTitle{
  margin: 0 0 8px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 34px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(111,74,54,0.95);
}

.pricing-matrix__panelSub{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(111,74,54,0.75);
}

.pricing-matrix__panelTitle--featured,
.pricing-matrix__panelSub--featured{
  color: rgba(255,255,255,0.95);
}

/* items stacks */
.pricing-matrix__items{
  display: grid;
  gap: 18px;
}

.pricing-matrix__items--tight{
  gap: 22px;
}

/* inner price card */
.price-item{
  border: 2px solid rgba(111,74,54,0.65);
  border-radius: 8px;
  padding: 14px 14px 12px;
  background: #fff;
}

.price-item--beige{
  background: rgba(214, 194, 176, 0.92);
  border-color: rgba(255,255,255,0.55);
}

.price-item--brown{
  background: #6f4a36;
  border-color: rgba(255,255,255,0.55);
}

.price-item__top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(111,74,54,0.55);
}

.price-item--beige .price-item__top{
  border-bottom-color: rgba(255,255,255,0.55);
}

.price-item__name{
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 16px;
  color: rgba(33,33,33,0.92);
}

.price-item__valid{
  font-size: 14px;
  font-weight: 700;
  color: rgba(33,33,33,0.70);
  white-space: nowrap;
}

.price-item__price{
  text-align: center;
  margin-top: 10px;
  font-size: 34px;
  font-weight: 800;
  color: rgba(0,0,0,0.92);
  line-height: 1.05;
}

.price-item__note{
  text-align: center;
  font-size: 12px;
  color: rgba(0,0,0,0.70);
  margin-top: 4px;
}

.price-item--beige .price-item__name,
.price-item--beige .price-item__valid,
.price-item--beige .price-item__price,
.price-item--beige .price-item__note{
  color: rgba(255,255,255,0.95);
}

.price-item--beige .price-item__valid{
  color: rgba(255,255,255,0.85);
}

/* center column text + CTA */
.pricing-matrix__featuredCards{
  display: grid;
  gap: 18px;
  margin: 18px 0 18px;
}

.pricing-matrix__featuredText{
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  text-align: center;
  margin: 6px 8px 18px;
}

.pricing-matrix__fine{
  margin-top: 10px;
  font-size: 10px;
  opacity: 0.9;
}

.pricing-matrix__cta{
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.pricing-matrix__ctaBtn{
  background: #ffffff;
  color: #6f4a36;
  border-color: rgba(255,255,255,0.95);
  height: 40px;
  padding: 0 22px;
  font-size: 12px;
}

/* right column footnote */
.pricing-matrix__footnote{
  margin-top: 16px;
  font-size: 10px;
  line-height: 1.55;
  color: rgba(111,74,54,0.75);
  text-align: center;
}

@media (max-width: 1024px){

    .pricing-matrix {
        padding-top: 0
    }
    .pricing-matrix__featuredCards .price-item {
        width: 420px;
        margin: auto;
    }
  .pricing-matrix__grid{
    grid-template-columns: 1fr 1fr;
  }

  /* Reorder columns */
  .pricing-matrix__panel--featured{
    order: 1;
    grid-column: 1 / -1; /* full width */
      width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;

    border-radius: 0;
  }

  .pricing-matrix__panel:not(.pricing-matrix__panel--featured){
    order: 2;
  }

}

@media (max-width: 768px){

  .pricing-matrix__grid{
    grid-template-columns: 1fr;
  }

  .pricing-matrix__panel{
    width: 100%;
  }
    
.pricing-matrix__panel--featured {
        width: calc(100% + 40px);
    }
    
.pricing-matrix__featuredCards .price-item {
        width: 100%;
        margin: auto;
    }

}



/* CONTACT PANELS (form + info card) */
.contact-panels{
  padding: 70px 0 90px;
}

.contact-panels__grid{
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 34px;
  align-items: start;
    padding: 0;
}

/* shared card look */
.contact-card,
.info-card{
  background: radial-gradient(900px 600px at 35% 35%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 58%), linear-gradient(90deg, rgba(74, 45, 34, 1), rgba(123, 86, 63, 1));
  border-radius: 14px;
  padding: 26px 26px 22px;
  color: rgba(255,255,255,0.92);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);
}

.contact-card__title,
.info-card__title{
  margin: 0 0 30px 0;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 20px;
  color: rgba(255,255,255,0.92);
}

/* form grid */
.contact-form__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 18px;
}

.field label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  margin: 0 0 8px;
}

.field input,
.field textarea{
  width: 100%;
  border: none;
  outline: none;
  background: rgba(255,255,255,0.95);
  border-radius: 999px;
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
  color: rgba(30,30,30,0.90);
}

.field textarea{
  border-radius: 14px;
  height: 120px;
  padding: 12px 14px;
  resize: vertical;
}

.field--span2{ grid-column: span 2; }
.field--full{ grid-column: 1 / -1; }

/* checks */
.contact-form__checks{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.check{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
}

.check input{
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #ffffff;
}

.check strong{
  color: rgba(255,255,255,0.92);
  font-weight: 800;
}

/* submit button: ghost outline */
.contact-form__submit{
  margin-top: 16px;
  width: 100%;
  height: 50px;
  border-radius: 999px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.70);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 16px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .08s ease;
}

.contact-form__submit:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.92);
}

.contact-form__submit:active{
  transform: translateY(1px);
}

/* info card */
.info-card{
  padding: 26px 26px;
}

.info-card__block{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
}

.info-card__block strong{
  color: rgba(255,255,255,0.95);
  font-weight: 800;
}

.info-card__label{
  margin-bottom: 6px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,0.92);
}

@media (max-width: 768px){
    .contact-panels__grid {
        grid-template-columns: 1fr;
    }
    .contact-card {
        background: unset;
    }
}

@media (max-width: 500px){
    .contact-form__grid {
        grid-template-columns: 1fr;
    }
    .field--span2 {
        grid-column:unset;
    }
}