/* SmartTraveller — landing pages RDV / Contact
   Identité smarttraveller.mu : Pangram · teal #1faeb8 · jaune #fecc2f · vert profond #04373b */
@font-face{font-family:"Pangram";src:url(/assets/fonts/pangram-light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Pangram";src:url(/assets/fonts/pangram.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Pangram";src:url(/assets/fonts/pangram-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Pangram";src:url(/assets/fonts/pangram-black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --teal:#1faeb8; --teal-dark:#1e7380; --teal-light:#45d0d8; --teal-deep:#04373b;
  --yellow:#fecc2f; --yellow-hover:#ffd75a;
  --white:#fff; --grey:#f2f3f5; --grey-2:#f9f9fb; --ink:#04373b; --ink-soft:#3d6a6e; --line:#e3e8ea;
  --radius:16px; --radius-sm:12px; --pill:25px;
  --shadow:0 18px 50px -18px rgba(4,55,59,.45);
  --pad:clamp(16px,2.2vw,40px);
  --gap:clamp(14px,1.6vw,28px);
  --font:"Pangram",Inter,Arial,Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-weight:300;color:var(--ink);background:var(--teal);-webkit-font-smoothing:antialiased;line-height:1.45}
a{color:inherit}
img,video{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Background slideshow ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--teal)}
.bg__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.02);transition:opacity 2.2s ease-in-out;will-change:opacity,transform}
.bg__slide.is-active{opacity:1;animation:kenburns 14s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.bg__slide--1{background-image:url(/assets/img/bg-1.webp);background-position:70% 40%}
.bg__slide--2{background-image:url(/assets/img/bg-2.webp);background-position:60% 50%}
.bg__slide--3{background-image:url(/assets/img/bg-3.webp)}
@media (max-width:900px){
  .bg__slide--1{background-image:url(/assets/img/bg-1-sm.webp)}
  .bg__slide--2{background-image:url(/assets/img/bg-2-sm.webp)}
  .bg__slide--3{background-image:url(/assets/img/bg-3-sm.webp)}
}
.bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,55,59,.78) 0%,rgba(4,55,59,.62) 30%,rgba(4,55,59,.34) 48%,rgba(4,55,59,.34) 62%,rgba(4,55,59,.70) 100%)}

/* ---------- Layout (desktop: single screen, no scroll) ---------- */
.page{height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr);padding:0 0 var(--pad)}
/* Transparent: the logo sits straight on the photo, which the .bg::after
   gradient already darkens enough at the top to carry white type. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(6px,1.1vh,12px) var(--pad);background:transparent}
.brand img{height:clamp(40px,6.4vh,60px);width:auto}
.topbar__right{display:flex;align-items:center;gap:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:400 16px/1 var(--font);text-decoration:none;padding:13px 26px;border-radius:var(--pill);border:2px solid var(--yellow);cursor:pointer;color:var(--ink);font-weight:400;background:var(--yellow);transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px);background:var(--yellow-hover);border-color:var(--yellow-hover)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn svg{width:18px;height:18px}
.btn--block{width:100%;padding:16px 22px;font-size:17px}
.btn[disabled]{opacity:.65;cursor:wait;transform:none}

/* Hero */
.hero{text-align:center;padding:clamp(2px,0.8vh,10px) var(--pad) clamp(12px,2.4vh,30px)}
.hero__title{font-family:var(--font);font-weight:400;color:var(--white);font-size:clamp(26px,min(3.3vw,5.6vh),56px);line-height:1.08;margin:0 auto;max-width:24ch;text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 14px rgba(4,55,59,.5)}
.hero__title em{font-style:normal;color:var(--yellow)}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-top:clamp(16px,3vh,34px)}

/* Google rating chip */
.rating{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:8px 14px 8px 10px;border-radius:var(--pill);background:var(--white);color:var(--ink);font-size:14px;font-weight:400;box-shadow:var(--shadow);transition:transform .2s ease}
.rating:hover{transform:translateY(-1px)}
.rating__g{width:20px;height:20px;flex:none}
.rating__stars{color:#fbbc04;letter-spacing:1px;font-size:16px;line-height:1}
.rating__txt b{font-weight:700}

/* Main row */
.main{min-height:0;display:flex;gap:var(--gap);justify-content:center;align-items:stretch;padding:0 var(--pad)}
.glass{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.55);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}

/* Key figures line (under the Google badge) */
.figures{list-style:none;margin:clamp(16px,2.8vh,32px) auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px clamp(18px,2.4vw,40px);max-width:1200px;color:var(--white);font-size:clamp(13px,min(1.05vw,1.95vh),15.5px);font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 6px rgba(4,55,59,.5)}
.figures li{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.figures__br{flex-basis:100%;height:0}
.figures b{font-weight:700;color:var(--yellow);font-size:1.35em;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* Booking / form card */
.card{flex:0 1 780px;min-width:340px;display:flex;flex-direction:column;overflow:hidden;min-height:0;position:relative}
.card__head{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--teal);color:#fff;font:400 14px/1.2 var(--font)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(254,204,47,.3);flex:none}
.card__body{flex:1;min-height:0;background:transparent;overflow:hidden;position:relative}
/* 640px is Calendly's edge-to-edge compact layout threshold — above it the
   widget draws its own inner white box. The iframe must therefore stay at
   640px, so the visible card is narrowed by the scrollbar width instead. */
.card--calendly{flex:0 1 640px;max-width:calc(640px - var(--cal-sb,0px));background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.card--calendly::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius);background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.55);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}
.card.is-highlight{animation:pulse 1.2s ease 2}
@keyframes pulse{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 4px var(--yellow),var(--shadow)}}
/* The scrollbar belongs to Calendly's own cross-origin document, so no CSS here
   can reach it. Instead the iframe is made wider than its clipping wrapper by
   exactly one scrollbar width (--cal-sb, measured in main.js — 0 on overlay-
   scrollbar systems, where there is nothing to hide anyway). The bar lands
   outside the visible area, Calendly's centred content stays centred, and the
   wheel/trackpad/touch still scroll the timeslot view normally.
   overflow:hidden is safe here: it creates no stacking context, so the
   mix-blend-mode transparency on the iframe keeps working. */
.calendly-inline-widget{position:absolute;inset:0;width:100%;height:100%!important;min-width:320px;overflow:hidden}
.calendly-inline-widget iframe{width:calc(100% + var(--cal-sb,0px))!important;height:100%!important;mix-blend-mode:multiply;isolation:auto}
.card--calendly .card__loading{inset:48px 0 0}
.card__loading{position:absolute;inset:48px 0 0;display:grid;place-items:center;color:var(--ink-soft);font-size:14px;pointer-events:none}

/* Form */
/* The tiers below keep the form inside the card at every supported size, so the
   bar has nothing to show; it stays scrollable for anything unusual. */
.form-wrap{flex:1;min-height:0;overflow:auto;scrollbar-width:none;-ms-overflow-style:none;padding:clamp(14px,2.2vh,30px) clamp(20px,2.6vw,40px);display:flex;flex-direction:column;justify-content:flex-start;background:transparent}
.form-wrap::-webkit-scrollbar{width:0;height:0}
.form-wrap::before,.form-wrap::after{content:"";flex:1 0 0;min-height:0}
.form-wrap>*{flex:none}
.form-wrap h2{font:400 clamp(20px,3vh,28px)/1.15 var(--font);margin:0 0 4px;color:var(--teal)}
.form-wrap p.sub{margin:0 0 clamp(10px,2vh,20px);color:var(--ink);font-size:clamp(13.5px,1.9vh,15px)}
.field{margin-bottom:clamp(10px,1.8vh,16px)}
.field label{display:block;font-size:13.5px;font-weight:400;margin-bottom:6px;color:var(--ink)}
.input,.select{width:100%;font:300 16px var(--font);color:var(--ink);background:rgba(255,255,255,.6);border:1px solid rgba(4,55,59,.15);border-radius:var(--radius-sm);padding:clamp(9px,1.5vh,13px) 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.input::placeholder{color:#8fa5a8}
.input:focus,.select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,174,184,.18);background:rgba(255,255,255,.9)}
.input[aria-invalid="true"]{border-color:#e0524f;box-shadow:0 0 0 3px rgba(224,82,79,.15)}
.phone{display:flex;gap:8px}
.select{width:auto;flex:none;appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2304373b' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-soft);margin:4px 0 clamp(12px,2vh,20px)}
.consent a{color:var(--teal)}
.consent input{margin-top:3px;accent-color:var(--teal);width:16px;height:16px;flex:none}
.hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}
.form-msg{margin:8px 0 0;font-size:14px;min-height:1.2em}
.form-msg.is-error{color:#c8322f}
.reassure-mini{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:clamp(8px,1.4vh,14px);font-size:12.5px;color:var(--ink-soft)}
.reassure-mini span::before{content:"✓ ";color:var(--teal);font-weight:700}

/* Video */
.video{flex:none;height:100%;aspect-ratio:9/16;max-width:30vw;position:relative;overflow:hidden;padding:0;background:#000;backdrop-filter:none;-webkit-backdrop-filter:none}
.video video{width:100%;height:100%;object-fit:cover}
.video__sound{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:400 13px var(--font);color:var(--ink);background:rgba(255,255,255,.92);border:0;border-radius:var(--pill);padding:9px 14px;cursor:pointer;box-shadow:0 4px 16px rgba(4,55,59,.3)}
.video__sound:hover{background:var(--yellow)}
.video__sound svg{width:16px;height:16px}
.video__tag{position:absolute;top:12px;left:12px;font:400 12px var(--font);background:var(--yellow);color:var(--ink);border-radius:var(--pill);padding:5px 10px}

/* Thank-you page */
.thanks{display:grid;place-items:center;min-height:0}
.thanks .glass{max-width:560px;padding:clamp(24px,4vh,44px);text-align:center}
.thanks h1{font:400 clamp(28px,4.5vh,42px)/1.1 var(--font);margin:10px 0;color:var(--teal)}
.thanks .check{width:64px;height:64px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;margin:0 auto;font-size:34px;font-weight:700}
.thanks p{color:var(--ink)}
.thanks .muted{color:var(--ink-soft)}


/* ---------- Tablet / mobile / very short screens: stacked + scroll ---------- */
@media (max-width:1023px),(max-height:560px){
  .page{height:auto;min-height:100dvh;overflow:visible;display:block;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .topbar .btn{display:none}
  .hero{padding:10px var(--pad) 20px}
  .hero__title{font-size:clamp(26px,6.6vw,44px)}
  .main{flex-direction:column;align-items:center}
  .card{order:1;width:100%;max-width:640px;min-width:0;flex:none}
  .card--calendly{max-width:calc(640px - var(--cal-sb,0px))}
  .card__body,.form-wrap{flex:none}
  .form-wrap{padding-top:22px;padding-bottom:22px}
  .card--calendly .card__body{height:560px}
  /* Two ragged wrapping columns were unreadable on a phone: uneven row heights,
     labels breaking mid-phrase, numbers landing at random x. One figure per row
     instead, numbers right-aligned in their own column so the block scans
     straight down and each label keeps its own lines. */
  .figures{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:9px;
    max-width:335px;font-size:13.5px}
  .figures li{display:grid;grid-template-columns:58px 1fr;gap:0 10px;align-items:baseline;
    width:100%;white-space:normal;text-align:left;padding:0}
  .figures b{justify-self:end}
  .figures li.figures__br{display:none}
  .video{order:3;height:auto;width:min(100%,380px);max-width:none}
  .sticky-cta{display:flex}
}
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(4,55,59,.85) 35%)}
@media (max-width:420px){.rating{font-size:13px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Desktop is a single screen: the card has its own scroll area, so anything the
   hero takes is taken from the form. These four tiers step down continuously —
   each band must reclaim enough that the submit button stays in view, otherwise
   the overflow reappears just above a breakpoint instead of below it. */

/* Most laptops (≤1060px tall): tighten the vertical rhythm. */
@media (min-width:1024px) and (max-height:1060px){
  .hero{padding:2px var(--pad) 12px}
  .hero__meta{margin-top:16px}
  .figures{margin-top:16px}
  .form-wrap{padding-top:18px;padding-bottom:18px}
  .form-wrap h2{margin-bottom:8px}
  .form-wrap p.sub{margin-bottom:12px}
  .field{margin-bottom:8px}
  .field label{margin-bottom:4px;font-size:13px}
  .consent{margin:2px 0 10px;font-size:12px}
  .btn--block{padding:13px 22px;font-size:16px}
  .reassure-mini{margin-top:8px;font-size:12px}
  .card__head{padding:9px 18px;font-size:13px}
}
/* Shorter laptops (≤880px): shrink the hero chrome too. */
@media (min-width:1024px) and (max-height:880px){
  .hero__title{font-size:clamp(24px,3.9vh,38px)}
  .hero__meta{margin-top:12px}
  .figures{margin-top:12px;font-size:13px}
  .brand img{height:40px}
  .topbar{padding:6px var(--pad)}
  .form-wrap{padding-top:14px;padding-bottom:14px}
}
/* 1280×720 / 1366×768: the form intro has to go. */
@media (min-width:1024px) and (max-height:800px){
  .hero__meta{margin-top:10px}
  .figures{margin-top:10px;font-size:12.5px}
  .form-wrap{padding-top:10px;padding-bottom:10px}
  .form-wrap p.sub{display:none}
  .field{margin-bottom:6px}
}
@media (min-width:1024px) and (max-height:700px){
  .reassure-mini{display:none}
  .hero{padding-top:2px}
}