﻿/* ============================================================
   MAHLYA VOYAGES â€” Design System 2026
   Vert #679e3f Â· Violet #71358f Â· ZÃ‰RO jaune
   ============================================================ */
:root {
  --green:       #679e3f;
  --green-dark:  #4a7029;
  --green-light: #e8f5e0;
  --violet:      #71358f;
  --violet-dark: #4d2363;
  --violet-light:#f3e8ff;
  --dark:        #0c0c0f;
  --dark-2:      #141418;
  --dark-3:      #1e1e25;
  --light:       #f7f8fa;
  --light-2:     #eef0f4;
  --white:       #ffffff;
  --text:        #1a1a2e;
  --text-2:      #4a5568;
  --border:      rgba(0,0,0,0.06);
  --border-light:rgba(255,255,255,0.08);

  --font-h: 'Playfair Display', Georgia, serif;
  --font-b: 'Inter', system-ui, sans-serif;
  --font-s: 'Dancing Script', cursive;

  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --r-xs:   8px;
  --r-sm:   14px;
  --r-md:   24px;
  --r-lg:   40px;
  --r-pill: 100px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
  --shadow-xl: 0 40px 80px rgba(0,0,0,0.16);
}

/* â”€â”€ RESET â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;width:100%;}
body{
  width:100%; overflow-x:hidden;
  font-family:var(--font-b);color:var(--text);
  background:var(--white);line-height:1.7;overflow-x:hidden;
  
}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

h1,h2,h3,h4{font-family:var(--font-h);line-height:1.1;font-weight:700}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}

/* â”€â”€ UTILITIES â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.container{width:100%;max-width:1360px;margin:0 auto;padding:0 5%}
.section{padding:8rem 0}
.section-sm{padding:5rem 0}

.eyebrow{
  font-family:var(--font-s);font-size:1.6rem;
  color:var(--green);display:block;margin-bottom:.6rem;
}
.title-xl{font-size:clamp(2.4rem,5vw,4.2rem)}
.title-lg{font-size:clamp(2rem,4vw,3.2rem)}
.title-md{font-size:clamp(1.6rem,3vw,2.4rem)}
.text-green{color:var(--green)}
.text-violet{color:var(--violet)}

/* â”€â”€ BOUTONS â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem 2.4rem;border-radius:var(--r-pill);font-weight:600;
  font-size:.95rem;border:none;cursor:pointer;
  transition:all .4s var(--ease);font-family:var(--font-b);
}
.btn-green{background:var(--dark);color:#fff}
.btn-green:hover{background:var(--green-dark);transform:translateY(-3px);box-shadow:0 12px 30px rgba(103,158,63,.35)}
.btn-violet{background:var(--violet);color:#fff}
.btn-violet:hover{background:var(--violet-dark);transform:translateY(-3px);box-shadow:0 12px 30px rgba(113,53,143,.35)}
.btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.btn-outline-white:hover{background:#fff;color:var(--text);border-color:#fff}
.btn-ghost{background:transparent;color:var(--green);border:2px solid var(--green)}
.btn-ghost:hover{background:var(--dark);color:#fff}
.btn-lg{padding:1.25rem 3rem;font-size:1.05rem}
.btn-sm{padding:.65rem 1.5rem;font-size:.85rem}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#128C7E;transform:translateY(-3px)}

/* â”€â”€ ANIMATIONS â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.reveal{
  opacity:0;transform:translateY(50px);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
.reveal.on{opacity:1;transform:none;filter:none}
.reveal-left{opacity:0;transform:translateX(-50px);transition:all .9s var(--ease)}
.reveal-left.on{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(50px);transition:all .9s var(--ease)}
.reveal-right.on{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* â”€â”€ NAVBAR â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.nav{
  background:rgba(255,255,255,.98); box-shadow:0 2px 20px rgba(0,0,0,.05);
  position:fixed;top:0;left:0;width:100%;z-index:9000;
  padding:1.2rem 0;transition:all .5s var(--ease);
}
.nav.scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 4px 30px rgba(0,0,0,.07);
  padding:.8rem 0;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-logo img{height:52px;width:auto;transition:filter .4s}
.nav.scrolled .nav-logo img{filter:none}
.nav-logo img.logo-light{display:none} .nav-logo img.logo-dark{display:block}


.nav-menu{display:flex;align-items:center;gap:2.5rem}
.nav-link{
  font-weight:500;font-size:.95rem;color:var(--text-2);
  position:relative;transition:color .3s;
}
.nav-link::after{
  content:'';position:absolute;bottom:-4px;left:0;
  width:0;height:2px;background:var(--dark);transition:width .4s var(--ease);
}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link:hover{color:var(--green)}
.nav.scrolled .nav-link{color:var(--text-2)}
.nav.scrolled .nav-link:hover{color:var(--green)}
.nav-actions{display:flex;align-items:center;gap:1rem}
.nav-phone{font-weight:600; font-size:.9rem; color:var(--text); margin-right:1rem; display:flex; align-items:center; gap:0.4rem;} .nav-wa{
  display:flex;align-items:center;gap:.5rem;
  background:#25D366;color:#fff;padding:.6rem 1.4rem;
  border-radius:var(--r-pill);font-weight:600;font-size:.85rem;
  transition:all .3s var(--ease);
}
.nav-wa:hover{background:#128C7E;transform:translateY(-2px)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:.3rem}
.burger span{display:block;width:26px;height:2px;background:#fff;border-radius:2px;transition:all .4s}
.nav.scrolled .burger span{background:var(--text)}

/* â”€â”€ FOOTER â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.footer{background:#ffffff;color:#fff;border-top:4px solid var(--green);overflow:hidden}
.footer-top{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.4fr;gap:4rem;padding:6rem 0 4rem}
.footer-brand .f-logo{font-family:var(--font-h);font-size:2rem;color:var(--green);margin-bottom:1.2rem;display:block}
.footer-brand p{color:var(--text-2);line-height:1.9;font-size:.95rem;max-width:380px}
.footer-title{font-family:var(--font-b);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:.8rem;color:var(--text);margin-bottom:1.8rem}
.footer-links{display:flex;flex-direction:column;gap:1rem}
.footer-links a{color:var(--text-2);font-size:.95rem;transition:all .3s;display:inline-block}
.footer-links a:hover{color:var(--green);padding-left:6px}
.footer-contact-item{display:flex;gap:.8rem;margin-bottom:1.2rem;align-items:flex-start;color:var(--text-2);font-size:.95rem}
.footer-contact-item svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;stroke:var(--green);fill:none;stroke-width:1.8}
.footer-contact-item a{color:var(--text-2);transition:color .3s}
.footer-contact-item a:hover{color:var(--green)}
.footer-bottom-bar{border-top:1px solid rgba(255,255,255,.06);padding:2rem 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem; background:var(--dark); color:#fff; border-top:none;; box-shadow: 0 0 0 100vmax var(--dark); clip-path: inset(0 -100vmax);}
.footer-bottom-bar p,.footer-bottom-bar a{color:#ffffff;font-size:.82rem;font-weight:500;}
.footer-bottom-bar a:hover{color:var(--green)}
.footer-wm{font-family:var(--font-h);font-size:clamp(5rem,14vw,14rem);color:rgba(255,255,255,.02);text-align:center;line-height:.9;user-select:none;margin-top:2rem;letter-spacing:-4px}

/* â”€â”€ PAGE HEADER (pages internes) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.page-hero{
  position:relative;padding:10rem 0 5rem;
  overflow:hidden;color:#fff;
}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.4)}
.page-hero-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,15,.95) 0%,rgba(12,12,15,.3) 100%)}
.page-hero .container{position:relative;z-index:2}

/* â”€â”€ SERVICE CARDS â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:srv-counter;}
.srv-card{position:relative;border-radius:var(--r-md);overflow:hidden;height:420px;display:flex;align-items:flex-end;text-decoration:none;cursor:pointer;border:4px solid var(--green);}
.srv-card.wide{grid-column:span 2}
.srv-card::before { counter-increment: srv-counter; content: counter(srv-counter); position: absolute; top: 15px; left: 15px; width: 40px; height: 40px; background-color: var(--violet); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-b); font-weight: 800; font-size: 1.25rem; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.4); border: 2px solid #fff; }

.srv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.srv-card:hover .srv-img{transform:scale(1.07)}
.srv-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,15,.95) 0%,rgba(12,12,15,.4) 30%,rgba(12,12,15,0) 65%);transition:background .5s}
.srv-card:hover .srv-veil{background:linear-gradient(to top,rgba(12,12,15,.95) 0%,rgba(12,12,15,.5) 55%)}
.srv-body{position:relative;z-index:2;padding:2rem;width:100%;color:#fff}
.srv-ico{width:46px;height:46px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;transition:all .4s}
.srv-card:hover .srv-ico{background:#fff}
.srv-ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;transition:stroke .4s}
.srv-card:hover .srv-ico svg{stroke:var(--green)}
.srv-name{font-size:1.4rem;margin-bottom:.4rem;text-shadow:0 2px 8px rgba(0,0,0,0.9),0 4px 20px rgba(0,0,0,0.6);font-weight:700;letter-spacing:0.5px}
.srv-desc{font-size:.88rem;color:rgba(255,255,255,.95);opacity:0;transform:translateY(8px);transition:all .4s;line-height:1.6;max-width:350px;text-shadow:0 2px 5px rgba(0,0,0,0.8)}
.srv-card:hover .srv-desc{opacity:1;transform:none}
.srv-cta{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.4);margin-top:.8rem;transition:color .3s;letter-spacing:.5px;text-transform:uppercase}
.srv-card:hover .srv-cta{color:#fff}

/* â”€â”€ DESTINATIONS BENTO â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:320px 280px;gap:1.2rem}
.bento-card{position:relative;border-radius:var(--r-md);overflow:hidden;display:block;border:4px solid var(--violet);border-bottom-color:var(--green);border-right-color:var(--green);}
.bento-card.big{grid-column:span 2;grid-row:span 1}
.bento-card.tall{grid-row:span 2}
.bento-img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.bento-card:hover .bento-img{transform:scale(1.06)}
.bento-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,15,.78) 0%,transparent 55%)}
.bento-info{position:absolute;bottom:1.6rem;left:1.6rem;color:#fff;z-index:2}
.bento-info span{font-size:.72rem;text-transform:uppercase;letter-spacing:2px;opacity:.7}
.bento-info h3{font-size:1.8rem;margin-top:.2rem}
.bento-card.big .bento-info h3,.bento-card.tall .bento-info h3{font-size:2.4rem}

/* â”€â”€ PARTENAIRES CAROUSEL â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.partners-track{
  display:flex;gap:3rem;align-items:center;
  animation:scroll 30s linear infinite;
  width:max-content;
}
.partners-track:hover{animation-play-state:paused}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes scrollReverse{0%{transform:translateX(-50%)}100%{transform:translateX(0)}} .partners-track.reverse{animation:scrollReverse 30s linear infinite} .partners-track.reverse:hover{animation-play-state:paused}
.partners-outer{overflow:hidden;mask:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%)}
.partner-logo{
  height:40px;opacity:.35;filter:grayscale(1);
  transition:all .4s;flex-shrink:0;
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-b);font-weight:800;font-size:1.1rem;letter-spacing:.5px;color:var(--text);
}
.partner-logo:hover{opacity:1;filter:none}
.partner-logo svg{width:28px;height:28px}

/* â”€â”€ TEMOIGNAGES â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.review-card{background:var(--white);border-radius:var(--r-md);padding:2.5rem;border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:all .4s var(--ease)}
.review-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.stars{color:var(--green);font-size:1.1rem;margin-bottom:1.2rem;letter-spacing:2px}
.review-text{color:var(--text-2);line-height:1.8;font-size:.95rem;margin-bottom:1.8rem;font-style:italic}
.reviewer{display:flex;align-items:center;gap:.8rem}
.reviewer-avatar{width:44px;height:44px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--green);font-size:1rem;flex-shrink:0}
.reviewer-name{font-weight:700;font-size:.95rem}
.reviewer-city{font-size:.82rem;color:var(--text-2)}

/* â”€â”€ CTA FINAL â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cta-section{
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark-3) 50%,#0d1a0a 100%);
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;top:-40%;right:-10%;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(103,158,63,.12) 0%,transparent 70%);
}
.cta-section::after{
  content:'';position:absolute;bottom:-30%;left:-5%;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(113,53,143,.1) 0%,transparent 70%);
}
.cta-inner{position:relative;z-index:2;text-align:center;padding:8rem 0;color:#fff}
.cta-inner h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:1.5rem}
.cta-inner p{color:rgba(255,255,255,.65);font-size:1.1rem;max-width:600px;margin:0 auto 3rem;line-height:1.8}
.cta-btns{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.cta-contacts{display:flex;gap:3rem;justify-content:center;margin-top:3rem;flex-wrap:wrap}
.cta-contact-item{color:rgba(255,255,255,.5);font-size:.9rem;display:flex;align-items:center;gap:.5rem}
.cta-contact-item a{color:rgba(255,255,255,.9);font-weight:600}
.cta-contact-item a:hover{color:var(--green)}

/* â”€â”€ WHY US â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.why-img-wrap{position:relative;border-radius:var(--r-md);overflow:hidden;height:auto;border:4px solid var(--violet);}
.why-img-wrap img{width:100%;height:auto;object-fit:contain;display:block;}
.why-img-badge{
  position:absolute;bottom:2rem;right:2rem;
  background:#fff;border-radius:var(--r-md);
  padding:1.4rem 2rem;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;align-items:center;
}
.why-img-badge .num{font-family:var(--font-h);font-size:2.6rem;color:var(--green);line-height:1}
.why-img-badge .lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-2);margin-top:.3rem}
.why-feats{display:flex;flex-direction:column;gap:2rem;margin-top:2.5rem}
.why-feat{display:flex;gap:1.2rem;align-items:flex-start}
.why-feat-icon{
  width:52px;height:52px;border-radius:16px;
  background:var(--green-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .3s;
}
.why-feat:hover .why-feat-icon{background:var(--green)}
.why-feat-icon svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:2;transition:stroke .3s}
.why-feat:hover .why-feat-icon svg{stroke:#fff}
.why-feat h4{font-family:var(--font-b);font-weight:700;margin-bottom:.3rem;font-size:1.05rem}
.why-feat p{color:var(--text-2);font-size:.92rem;line-height:1.7}

/* â”€â”€ SERVICE DETAIL PAGE â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.srv-detail-grid{display:grid;grid-template-columns:1fr 360px;gap:3rem;align-items:start;padding:5rem 0}
.srv-detail-main img{border-radius:var(--r-md);width:100%;height:420px;object-fit:cover;margin-bottom:2.5rem}
.srv-detail-main h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:1.5rem}
.srv-detail-main p{color:var(--text-2);line-height:1.9;font-size:1rem;margin-bottom:1.4rem}
.srv-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.srv-feature{background:var(--light);padding:1.4rem;border-radius:var(--r-sm);border-left:3px solid var(--green)}
.srv-feature strong{color:var(--green);display:block;margin-bottom:.3rem;font-size:.95rem}
.srv-feature p{font-size:.88rem;color:var(--text-2);margin:0}
.srv-book{background:#fff;border-radius:var(--r-md);padding:2.5rem;box-shadow:var(--shadow-lg);border:1px solid var(--border);position:sticky;top:100px}
.srv-book h3{font-size:1.5rem;margin-bottom:.5rem}
.srv-book p{color:var(--text-2);margin-bottom:2rem;font-size:.95rem}
.srv-book-contacts{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}
.srv-book-contacts a{display:block;color:var(--green);font-weight:700;margin-bottom:.4rem;font-size:.95rem}

/* â”€â”€ CONTACT PAGE â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;padding:5rem 0}
.contact-info-cards{display:flex;flex-direction:column;gap:1.2rem}
.contact-info-card{background:var(--white);border-radius:var(--r-md);padding:2rem;border:1px solid var(--border);display:flex;gap:1.2rem;align-items:flex-start;transition:all .4s var(--ease)}
.contact-info-card:hover{box-shadow:var(--shadow-md);transform:translateX(6px)}
.contact-info-icon{width:50px;height:50px;border-radius:14px;background:var(--green-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-icon svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:2}
.contact-info-card h4{font-family:var(--font-b);font-weight:700;margin-bottom:.3rem}
.contact-info-card p,.contact-info-card a{color:var(--text-2);font-size:.95rem}
.contact-info-card a:hover{color:var(--green)}
.contact-form-card{background:#fff;border-radius:var(--r-md);padding:3rem;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.form-group{margin-bottom:1.4rem}
.form-label{display:block;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.6px;margin-bottom:.5rem;color:var(--text)}
.form-input{
  width:100%;padding:.9rem 1.2rem;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-family:var(--font-b);font-size:.95rem;background:var(--light);color:var(--text);
  transition:all .3s;
}
.form-input:focus{outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(103,158,63,.1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}

/* â”€â”€ RESPONSIVE â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media(max-width:1100px){
  .srv-grid{grid-template-columns:1fr 1fr}
  .srv-card.wide{grid-column:span 1}
  .why-grid{grid-template-columns:1fr}
  .why-img-wrap{height:auto}
  .footer-top{grid-template-columns:1fr 1fr;gap:2.5rem}
  .srv-detail-grid{grid-template-columns:1fr}
  .srv-book{position:static}
  .contact-grid{grid-template-columns:1fr}
  .bento{grid-template-rows:auto}
  .bento-card.big{grid-column:span 3;height:320px}
  .bento-card.tall{grid-row:span 1;height:260px}
}
@media(max-width:768px){
  .srv-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bento-card.big{grid-column:span 1}
  .reviews-grid{grid-template-columns:1fr}
  .nav-menu{display:none} .burger{display:none !important} .nav-wa {display:none !important}
  .nav-phone {display:flex !important; font-size:0.75rem !important; margin-right:auto !important; margin-left:0.5rem !important; gap:0.2rem !important;}
  .nav-devis {padding: 0.5rem 0.8rem !important; font-size: 0.75rem !important;}
  
  
  .form-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
}
@media(max-width:480px){
  .footer-top{grid-template-columns:1fr}
  .cta-contacts{flex-direction:column;gap:1.5rem}
}

/* â”€â”€ PAGE LOADER AVION â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
#page-loader{
  position:fixed;inset:0;z-index:99999;
  background:#ffffff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease),visibility .6s;
}
#page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}

.loader-logo-text{
  font-family:var(--font-h);font-size:clamp(1.4rem,4vw,2.2rem);
  color:var(--green);letter-spacing:2px;margin-bottom:3rem;
  animation:loaderPulse 2s ease-in-out infinite;
}
@keyframes loaderPulse{0%,100%{opacity:1}50%{opacity:.5}}

.loader-runway{
  width:min(340px,85vw);height:2px;background:rgba(0,0,0,.1);
  border-radius:2px;position:relative;overflow:visible;margin-bottom:2rem;
}
.loader-plane-wrap{
  position:absolute;top:50%;left:-40px;
  animation:fly 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes fly{
  0%  {left:-40px; transform:translateY(-50%) scale(.9)}
  50% {left:calc(50% - 20px); transform:translateY(-60%) scale(1)}
  100%{left:calc(100% + 10px); transform:translateY(-50%) scale(.9)}
}
.loader-plane-svg{
  width:40px;height:40px;fill:var(--green);
  filter:drop-shadow(0 0 8px rgba(103,158,63,.6));
}
.loader-progress{
  width:min(340px,85vw);height:3px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;
}
.loader-progress-bar{
  height:100%;background:linear-gradient(to right,var(--green),var(--violet));
  border-radius:3px;width:0%;
  animation:progressAnim 1.8s var(--ease) infinite;
}
@keyframes progressAnim{0%{width:0%}60%{width:80%}100%{width:100%}}
.loader-tagline{
  color:var(--text-2);font-size:.8rem;letter-spacing:2px;
  text-transform:uppercase;margin-top:1.5rem;
}

/* â”€â”€ DOUBLE CAROUSEL TEMOIGNAGES â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.reviews-carousel-wrap{overflow:hidden;mask:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%)}
.reviews-track{
  display:flex;gap:1.5rem;width:max-content;
  animation:trackLeft 40s linear infinite;
}
.reviews-track.reverse{animation:trackRight 40s linear infinite}
.reviews-track:hover,.reviews-track.reverse:hover{animation-play-state:paused}
@keyframes trackLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes trackRight{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.rev-card{
  background:#fff;border-radius:var(--r-md);padding:2rem 2.2rem;
  border:1px solid var(--border);min-width:320px;max-width:340px;flex-shrink:0;
  box-shadow:var(--shadow-sm);
}
.rev-stars{color:var(--green);font-size:1rem;margin-bottom:.8rem;letter-spacing:2px}
.rev-text{color:var(--text-2);font-size:.9rem;line-height:1.75;font-style:italic;margin-bottom:1.4rem}
.rev-author{display:flex;align-items:center;gap:.8rem}
.rev-avatar{width:38px;height:38px;border-radius:50%;background:var(--green-light);color:var(--green);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rev-name{font-weight:700;font-size:.88rem}
.rev-city{font-size:.78rem;color:var(--text-2)}

/* â”€â”€ NAV DEVIS BUTTON â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.nav-devis{
  background:var(--violet);color:#fff;padding:.6rem 1.3rem;
  border-radius:var(--r-pill);font-weight:600;font-size:.85rem;
  transition:all .3s var(--ease);
}
.nav-devis:hover{background:var(--violet-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(113,53,143,.35)}
















/* MOBILE BOTTOM NAV */
.mobile-bottom-nav { display: none; }
@media(max-width:768px){
  body { padding-bottom: 70px; }
  .mobile-bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: #ffffff;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.06);
    z-index: 9999;
    justify-content: space-around;
    align-items: center;
    padding: 0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }
  .mb-nav-item {
    display: flex; flex-direction: column; align-items: center;
    color: var(--text-2); text-decoration: none; font-size: 0.65rem; font-weight: 600; gap: 4px;
    transition: color 0.3s;
  }
  .mb-nav-item svg { width: 22px; height: 22px; fill: currentColor; }
  .mb-nav-item.active { color: var(--green); }
  .nav-devis { padding: 0.5rem 1rem !important; font-size: 0.85rem !important; }
}









.contact-info-icon { background: rgba(113, 53, 143, 0.15) !important; }
.contact-info-icon svg { stroke: var(--violet) !important; fill: none; }

.btn-violet { background: var(--violet) !important; color: #fff !important; }
.btn-violet:hover, .btn-violet:active { background: var(--green) !important; }

/* Update Whatsapp buttons */
.btn-wa { background: var(--violet) !important; color: #fff !important; }
.btn-wa:hover, .btn-wa:active { background: var(--green) !important; }


      .srv-select-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; }
      .srv-select-label { cursor: pointer; position: relative; display:block; }
      .srv-select-label input { display: none; }
      .srv-select-card { background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); padding: 1.5rem 0.5rem; text-align: center; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
      .srv-select-card svg { width: 32px; height: 32px; fill: var(--muted); transition: all 0.3s; }
      .srv-select-card span { font-size: 0.85rem; font-weight: 600; color: var(--dark); line-height:1.2; }
      .srv-select-label input:checked + .srv-select-card { border-color: var(--violet); background: rgba(113, 53, 143, 0.05); box-shadow: 0 8px 20px rgba(113, 53, 143, 0.15); transform: translateY(-3px); }
      .srv-select-label input:checked + .srv-select-card svg { fill: var(--violet); }
      
      .srv-check-icon { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; background: var(--violet); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: all 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 5; }
      .srv-check-icon svg { width: 14px; height: 14px; stroke: #fff; fill:none; stroke-width: 3; }
      .srv-select-label input:checked ~ .srv-check-icon { opacity: 1; transform: scale(1); }



.fb-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width:100%; }
.fb-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fb-copy { font-size: 0.9rem; }
.fb-sep { color: var(--text-2); }
.fb-dev { font-size: 0.9rem; }
.dev-link { color: #fff; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 4px; transition: all 0.3s; }
.dev-link:hover { color: var(--green); }
.fb-right { display: flex; gap: 1.5rem; }
.fb-heart { display: none; }

@media(max-width: 768px) {
  .fb-container { flex-direction: column; text-align: center; gap: 1rem; }
  .fb-left { flex-direction: column; gap: 1rem; width: 100%; }
  .fb-sep { display: none; }
  .fb-copy { order: 1; }
  .fb-right { order: 2; width: 100%; justify-content: center; }
  .fb-dev { order: 3; margin-top: 1rem; }
  .fb-heart { display: inline; color: #ff4b4b; }
}
