/* ============================================================================
   TRIP MY EXPERIENCE — Design system
   Aligné sur la charte TripMy (synthèse technique du 5 août 2026).
   Tokens identiques à tripmy.css, dupliqués dans la config Tailwind inline.
   RÈGLE D'OR : aucune couleur hors palette. Les nuances passent par
   rgba(34,51,78,X) sur fond clair et rgba(252,252,252,X) sur fond foncé.
   ========================================================================= */

:root{
  /* Palette — strictement identique au tri-site */
  --ukblue:#22334e;
  --ukred:#bb3c36;
  --ukoffwhite:#fcfcfc;
  --ukpaper:#f3f1ec;
  --ukink:#0e1a2e;
  --ukmuted:#6b7a90;
  --ukrule:rgba(34,51,78,.12);
  --accent:var(--ukred);

  /* Typographie — deux familles, pas une de plus */
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;

  --wrap:1180px;
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --shadow:0 2px 4px rgba(34,51,78,.04),0 12px 30px -18px rgba(34,51,78,.22);
  --shadow-lg:0 24px 60px -26px rgba(34,51,78,.32);
  --ease:cubic-bezier(.22,.61,.36,1);
  --hd-h:64px;
}
@media (min-width:768px){:root{--hd-h:80px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 16px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--ukoffwhite);
  color:var(--ukink);
  line-height:1.62;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.2;font-weight:600;color:var(--ukblue)}
p{letter-spacing:-.005em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hidden{display:none !important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.skip-link{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--ukblue);color:var(--ukoffwhite);padding:10px 18px;
  border-radius:0 0 8px 8px;font-weight:600;font-size:.85rem;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--ukred);outline-offset:3px;border-radius:4px}

/* ============================================================================
   ÉCHELLES ÉDITORIALES — mêmes noms de classes que tripmy.css
   Playfair Display n'apparaît JAMAIS en non-italique.
   ========================================================================= */
.type-mega{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:clamp(2.35rem,5.6vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.025em;
  color:var(--ukblue);
}
.type-display{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:clamp(1.75rem,3.4vw,3rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ukblue);
}
.type-italic{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
}
.type-eyebrow{
  display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--font-sans);
  font-size:.7rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  line-height:1.4;
}
.section-rule{display:block;width:30px;height:1px;flex:0 0 auto}
.bg-ukred{background:var(--ukred)}
.text-ukred{color:var(--ukred)}
.text-ukblue{color:var(--ukblue)}
.text-ukmuted{color:var(--ukmuted)}

/* Icônes ------------------------------------------------------------- */
.ico{width:26px;height:26px}
.ico-sm{width:16px;height:16px;flex:0 0 auto}
.ico-lg{width:32px;height:32px}
.ico-chev{width:14px;height:14px;flex:0 0 auto;transition:transform .25s var(--ease)}

/* Reveal -------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}

/* ============================================================================
   BOUTONS
   ========================================================================= */
.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--ukred);color:var(--ukoffwhite);
  font-weight:600;font-size:.82rem;letter-spacing:-.005em;
  padding:.7rem 1.35rem;border-radius:999px;
  transition:background .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease);
  box-shadow:0 14px 28px -16px rgba(187,60,54,.7);
}
.btn-pill:hover{background:var(--ukblue);transform:translateY(-1px);box-shadow:0 18px 32px -16px rgba(34,51,78,.6)}
.btn-pill:active{transform:translateY(0)}
.btn-pill[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn-block{width:100%;padding:.95rem 1.4rem;font-size:.88rem}

/* ============================================================================
   HEADER — glass-header (modele tri-site), breakpoint 1240px (logo 36px + nav resserree, marge confortable en FR)
   La bascule desktop/mobile est portee par les utilitaires Tailwind
   (hidden lg:flex / flex lg:hidden / lg:hidden), pas par des media queries.
   ========================================================================= */
/* Mise en page 100% native : ne depend PAS du CDN Tailwind.
   Selecteurs scopes sous .hd (specificite 0,2,0) pour rester deterministes
   meme si Tailwind se charge et injecte ses utilitaires apres tmx.css. */
.hd,.glass-header{
  position:fixed;
  top:0;left:0;right:0;
  width:100%;
  z-index:100;
  background:rgba(252,252,252,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}

.hd .hd-bar{
  max-width:84rem;margin:0 auto;padding:0 1.5rem;
  height:var(--hd-h);
  display:flex;justify-content:space-between;align-items:center;
  gap:1.5rem;
}
.hd .hd-logo{display:flex;align-items:center;flex-shrink:0}
.hd .hd-logo-link{display:flex;align-items:center}
.hd .hd-logo-img{height:34px;width:auto;object-fit:contain}
@media (min-width:768px){.hd .hd-logo-img{height:36px}}

/* Bascule desktop / mobile au breakpoint 1240px (logo 36px + nav resserree, marge confortable en FR) */
.hd .hd-list,
.hd .hd-actions-desktop{display:none}
.hd .hd-actions-mobile{display:flex;align-items:center;gap:.75rem}
.hd .hd-list{list-style:none}

@media (min-width:1240px){
  .hd .hd-list{display:flex;align-items:center;gap:.1rem;list-style:none}
  .hd .hd-actions-desktop{display:flex;align-items:center;gap:1rem}
  .hd .hd-actions-mobile{display:none}
}

/* Burger : styles portes en natif, burger.js ne fait qu'animer en inline */
#burger-btn{
  width:40px;height:40px;flex-shrink:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;border-radius:999px;
  transition:background .25s var(--ease);
}
#burger-btn:hover{background:rgba(34,51,78,.06)}
.burger-line{
  display:block;width:20px;height:1.5px;
  background:var(--ukblue);border-radius:2px;
  transform-origin:center;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.hd.is-stuck{
  background:rgba(252,252,252,.96);
  border-bottom-color:var(--ukrule);
  box-shadow:0 6px 24px -16px rgba(34,51,78,.3);
}

.hd-item{position:relative}
.hd-link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.55rem .5rem;border-radius:8px;white-space:nowrap;
  font-size:.69rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ukblue);transition:color .22s var(--ease);
}
.hd-link:hover,.hd-item.is-open > .hd-link{color:var(--ukred)}
.hd-item.is-open .ico-chev{transform:rotate(180deg)}

.hd-phone{
  display:flex;align-items:center;justify-content:center;
  color:var(--ukblue);transition:color .22s var(--ease);
}
.hd-phone:hover{color:var(--ukred)}
.hd-phone svg{width:16px;height:16px}
.hd .hd-phone-mobile{display:none}
@media (min-width:640px){.hd .hd-phone-mobile{display:flex}}

.hd-sub{
  position:absolute;top:calc(100% + 6px);left:0;min-width:200px;
  background:var(--ukoffwhite);border:1px solid var(--ukrule);border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);padding:.4rem;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.hd-item.is-open .hd-sub{opacity:1;visibility:visible;transform:none}
.hd-sub a{
  display:block;padding:.5rem .75rem;border-radius:7px;
  font-size:.8rem;font-weight:500;color:var(--ukblue);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.hd-sub a:hover{background:var(--ukpaper);color:var(--ukred)}

/* --- Drawer mobile : pilote par burger.js via max-height inline --- */
#mobile-menu{
  overflow:hidden;max-height:0;
  transition:max-height .5s ease-in-out;
  background:rgba(252,252,252,.97);border-top:1px solid var(--ukrule);
}
#mobile-menu .mobile-menu-inner{max-width:80rem;margin:0 auto;padding:1.5rem}
@media (min-width:1240px){#mobile-menu{display:none}}
@supports (backdrop-filter:blur(1px)){
  #mobile-menu{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
.mobile-nav-link{
  display:block;padding:.85rem 0;
  font-size:.7rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ukblue);border-bottom:1px solid var(--ukrule);
  transition:color .2s var(--ease);
}
.mobile-nav-link:hover{color:var(--ukred)}

.mobile-picker-block{margin-top:1.4rem;display:flex;flex-direction:column;gap:1.2rem}
.mobile-picker-section{display:flex;flex-direction:column;gap:.6rem}
.mobile-picker-eyebrow{
  font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ukmuted);
}
.mobile-picker-row{display:flex;flex-wrap:wrap;gap:.5rem}
.mobile-picker-chip{
  padding:.5rem .95rem;border:1px solid var(--ukrule);border-radius:999px;
  background:var(--ukpaper);
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ukblue);border-bottom:1px solid var(--ukrule);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.mobile-picker-chip:hover{background:var(--ukred);border-color:var(--ukred);color:var(--ukoffwhite)}
.mobile-picker-chip-strong{background:var(--ukred);border-color:var(--ukred);color:var(--ukoffwhite)}
.mobile-picker-chip-strong:hover{background:var(--ukblue);border-color:var(--ukblue)}

/* ============================================================================
   HERO SLIDER
   ========================================================================= */
.hero{
  position:relative;margin-top:var(--hd-h);
  height:clamp(440px,54vw,620px);
  overflow:hidden;background:var(--ukink);isolation:isolate;
}
.hero-track{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility .9s}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(1.06);transition:transform 9s linear;
}
.hero-slide.is-active .hero-img{transform:scale(1)}

/* Cadrage mobile England : la garde royale est à droite dans la photo */
@media (max-width:640px){
  .hero-slide[data-dest="england"] .hero-img{object-position:72% center}
}

/* Voile clair à gauche : lisibilité du texte ukblue sur photo.
   Halo atténué (démarrage ~75%, extinction ~58%) pour laisser respirer la photo. */
.hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 110% at 5% 52%,
    rgba(252,252,252,.75) 0%,
    rgba(252,252,252,.62) 20%,
    rgba(252,252,252,.42) 34%,
    rgba(252,252,252,.16) 47%,
    rgba(252,252,252,0) 58%);
}
.hero-veil::after{content:none}
.hero-body{
  position:relative;height:100%;
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:flex;flex-direction:column;justify-content:center;
  transform:translateY(-20px);
}
/* Les 3 slides partagent la même ancre verticale : eyebrow / titre / lede
   occupent des hauteurs réservées, donc aucun saut d'une slide à l'autre
   même si le nombre de lignes varie (EN 2 lignes, FR parfois 3). */
.hero-body > .type-eyebrow{min-height:1.4em;align-items:center}
.hero-title{margin:.8rem 0 1.05rem;min-height:2.2em}
.hero-title .l1{display:block;color:var(--ukblue)}
.hero-title .l2{display:block;color:var(--ukred);font-size:.94em}
.hero-lede{
  max-width:30ch;min-height:3.4em;color:var(--ukink);font-weight:500;
  font-size:clamp(.9rem,1.5vw,1.02rem);line-height:1.7;
}

/* Crédit photo — masqué automatiquement si vide (convention charte) */
.hero-credit{
  position:absolute;right:20px;bottom:68px;z-index:4;
  font-size:.62rem;letter-spacing:.06em;
  color:rgba(252,252,252,.62);
  text-shadow:0 1px 3px rgba(14,26,46,.55);
}
.hero-credit:empty{display:none}

.hero-slide.is-active .type-eyebrow{animation:heroIn .8s var(--ease) both .1s}
.hero-slide.is-active .hero-title{animation:heroIn .8s var(--ease) both .22s}
.hero-slide.is-active .hero-lede{animation:heroIn .8s var(--ease) both .34s}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(34,51,78,.45);color:var(--ukblue);
  background:rgba(252,252,252,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.hero-arrow svg{width:18px;height:18px}
.hero-arrow:hover{background:var(--ukred);border-color:var(--ukred);color:var(--ukoffwhite)}
.hero-arrow.prev{left:20px}
.hero-arrow.next{right:20px}

.hero-dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;display:flex;gap:.5rem}
.hero-dot{
  width:9px;height:9px;border-radius:50%;
  background:rgba(252,252,252,.85);box-shadow:0 1px 4px rgba(14,26,46,.35);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.hero-dot:hover{transform:scale(1.2)}
.hero-dot.is-active{background:var(--ukred);transform:scale(1.15)}

/* ============================================================================
   SECTIONS
   ========================================================================= */
.sec{padding:62px 0}
.sec.sec-tight{padding-top:34px}
.sec.sec-paper{background:var(--ukpaper);margin-top:40px;padding:52px 0 62px}

.sec-head{text-align:center;margin-bottom:36px}
.sec-head .type-eyebrow{flex-direction:column;gap:.65rem;color:var(--ukred)}
.sec-head .section-rule{width:34px;order:2}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}

/* ============================================================================
   TRAVEL TYPES
   ========================================================================= */
.tt{
  display:flex;flex-direction:column;
  background:var(--ukoffwhite);border:1px solid var(--ukrule);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.tt:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tt-top{flex:1 1 auto;padding:28px 20px 22px;text-align:center;display:flex;flex-direction:column;align-items:center}
.tt-ico{
  width:56px;height:56px;border-radius:50%;
  background:rgba(187,60,54,.08);color:var(--ukred);
  display:grid;place-items:center;margin-bottom:15px;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.tt:hover .tt-ico{transform:scale(1.06);background:rgba(187,60,54,.13)}
.tt-top h3{font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ukblue)}
.tt-top p{margin-top:.75rem;font-size:.82rem;color:var(--ukmuted);max-width:26ch;line-height:1.65}
.tt-media{aspect-ratio:4/3;overflow:hidden;background:var(--ukpaper)}
.tt-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tt:hover .tt-media img{transform:scale(1.05)}

/* — Carte « service dédié » (Bike → site externe) —
   Se distingue des 3 autres : lisere rouge, icone pleine, lien explicite. */
.tt-extra{
  position:relative;text-decoration:none;
  border-color:rgba(187,60,54,.35);
  box-shadow:0 2px 4px rgba(187,60,54,.06),0 12px 30px -18px rgba(187,60,54,.3);
}
.tt-extra::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;border:1.5px solid transparent;
  transition:border-color .35s var(--ease);
}
.tt-extra:hover{
  border-color:rgba(187,60,54,.55);
  box-shadow:0 6px 14px rgba(187,60,54,.1),0 22px 46px -22px rgba(187,60,54,.45);
}
.tt-extra:hover::before{border-color:rgba(187,60,54,.4)}
.tt-extra .tt-ico{background:var(--ukred);color:var(--ukoffwhite)}
.tt-extra:hover .tt-ico{background:var(--ukred)}
.tt-extra-link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ukred);
}
.tt-extra-link svg{transition:transform .3s var(--ease)}
.tt-extra:hover .tt-extra-link svg{transform:translateX(4px)}

/* ============================================================================
   DESTINATIONS
   ========================================================================= */
.dc{
  display:flex;flex-direction:column;
  background:var(--ukoffwhite);border:1px solid var(--ukrule);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.dc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.dc-media{aspect-ratio:16/9;overflow:hidden;background:var(--ukpaper)}
.dc-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.dc:hover .dc-media img{transform:scale(1.05)}
.dc-body{display:flex;align-items:center;gap:1rem;padding:20px;flex:1 1 auto}
.dc-logo{height:66px;width:auto;max-width:74px;object-fit:contain;flex:0 0 auto}
.dc-text{flex:1 1 auto;min-width:0}
.dc-text h3{font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ukblue)}
.dc-text p{margin-top:.45rem;font-size:.82rem;color:var(--ukmuted);line-height:1.65}
.dc-go{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--ukred);color:var(--ukred);
  display:grid;place-items:center;
  transition:background .28s var(--ease),color .28s var(--ease);
}
.dc:hover .dc-go{background:var(--ukred);color:var(--ukoffwhite)}

/* ============================================================================
   WHY US
   ========================================================================= */
.why{display:grid;grid-template-columns:repeat(4,1fr)}
.why-item{padding:6px 26px;text-align:center;display:flex;flex-direction:column;align-items:center}
.why-item + .why-item{border-left:1px solid var(--ukrule)}
.why-ico{color:var(--ukred);margin-bottom:.9rem}
.why-item h3{font-size:1rem;font-weight:500;letter-spacing:-.015em;color:var(--ukblue);max-width:16ch}
.why-item p{margin-top:.6rem;font-size:.82rem;color:var(--ukmuted);max-width:24ch;line-height:1.65}

/* ============================================================================
   ABOUT + NEWSLETTER
   ========================================================================= */
.about{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  background:var(--ukoffwhite);border:1px solid var(--ukrule);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
}
.about-media img{width:100%;height:100%;object-fit:cover;min-height:290px}
.about-body{padding:34px 36px}
.about-body .type-eyebrow{color:var(--ukred);margin-bottom:1.15rem}
.about-body p{color:var(--ukmuted);font-size:.92rem;line-height:1.78}
.about-body p + p{margin-top:1rem}
.about-body strong{color:var(--ukblue);font-weight:500}

.nl{
  margin-top:1.2rem;
  background:var(--ukoffwhite);border:1px solid var(--ukrule);border-radius:var(--r);
  padding:22px 26px;display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;
}
.nl-ico{
  width:54px;height:54px;border-radius:50%;
  background:rgba(187,60,54,.08);color:var(--ukred);
  display:grid;place-items:center;flex:0 0 auto;
}
.nl-text{flex:0 1 300px}
.nl-text h3{font-size:1.05rem;font-weight:500;letter-spacing:-.015em;color:var(--ukblue)}
.nl-text p{font-size:.82rem;color:var(--ukmuted);margin-top:.2rem;line-height:1.6}
.nl-form{flex:1 1 340px;display:flex;align-items:center;gap:.7rem;min-width:0}
.nl-form input{
  flex:1 1 auto;min-width:0;
  background:var(--ukpaper);border:1px solid var(--ukrule);border-radius:999px;
  padding:.78rem 1.15rem;font-size:.86rem;color:var(--ukblue);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
.nl-form input::placeholder{color:var(--ukmuted)}
.nl-form input:focus{outline:none;background:var(--ukoffwhite);border-color:var(--ukred);box-shadow:0 0 0 3px rgba(187,60,54,.12)}
.nl-form .btn-pill{flex:0 0 auto;padding:.78rem 1.6rem}
.nl-msg{flex:1 1 100%;font-size:.8rem;color:var(--ukmuted);margin:0}
.nl-msg:empty{display:none}
.nl-msg.is-err{color:var(--ukred)}

/* ============================================================================
   FOOTER
   ========================================================================= */
.ft{background:var(--ukink);color:rgba(252,252,252,.72);font-size:.83rem}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr;gap:2rem;padding:40px 0 28px}
.ft-brand .ft-logo-img{height:44px;width:auto;object-fit:contain}
.ft-brand p{margin-top:.8rem;line-height:1.7;color:rgba(252,252,252,.55);font-size:.8rem}
.ft-social{display:flex;gap:.6rem;margin-top:1.15rem}
.ft-social a{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(252,252,252,.28);
  display:grid;place-items:center;color:var(--ukoffwhite);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.ft-social svg{width:16px;height:16px}
.ft-social a:hover{background:var(--ukred);border-color:var(--ukred)}

.ft-col h4{
  color:var(--ukoffwhite);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;margin-bottom:.9rem;
}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.ft-col a{color:rgba(252,252,252,.68);transition:color .2s var(--ease)}
.ft-col a:hover{color:var(--ukoffwhite)}
.ft-contact{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.ft-contact .ft-lead{color:rgba(252,252,252,.5);font-family:var(--font-serif);font-style:italic}

.ft-bar{
  border-top:1px solid rgba(252,252,252,.12);
  padding:16px 0 24px;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem;
  font-size:.75rem;color:rgba(252,252,252,.45);text-align:center;
}
.ft-bar .sep{opacity:.4}
.ft-bar a:hover{color:var(--ukoffwhite)}

/* ============================================================================
   MODALES — modal-landscape 5fr / 7fr (convention tri-site)
   ========================================================================= */
body.modal-locked{overflow:hidden}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(14,26,46,.68);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .35s var(--ease);
}
.modal.is-open .modal-backdrop{opacity:1}
.modal-shell{
  position:relative;width:100%;max-width:1000px;max-height:92vh;
  background:var(--ukoffwhite);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(14,26,46,.6);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.modal.is-open .modal-shell{opacity:1;transform:none}
.modal-close{
  position:absolute;top:14px;right:14px;z-index:5;
  width:38px;height:38px;border-radius:50%;
  background:rgba(252,252,252,.92);color:var(--ukblue);
  display:grid;place-items:center;box-shadow:0 4px 14px -6px rgba(14,26,46,.4);
  transition:background .22s var(--ease),color .22s var(--ease);
}
.modal-close:hover{background:var(--ukred);color:var(--ukoffwhite)}
.modal-landscape .modal-grid{display:grid;grid-template-columns:5fr 7fr;max-height:92vh}

.modal-visual{position:relative;overflow:hidden;color:var(--ukoffwhite);min-height:100%}
.modal-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-visual-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,26,46,.5) 0%,rgba(14,26,46,.78) 60%,rgba(14,26,46,.93) 100%);
}
.modal-visual-body{position:relative;height:100%;padding:36px 30px;display:flex;flex-direction:column;justify-content:flex-end}
.modal-visual-body .type-eyebrow{color:var(--ukred)}
.modal-visual-body h2{
  font-family:var(--font-sans);font-weight:300;color:var(--ukoffwhite);
  font-size:1.7rem;line-height:1.18;letter-spacing:-.02em;margin-top:.85rem;
}
.modal-visual-body h2 .type-italic{color:rgba(252,252,252,.7)}
.modal-sub{font-size:.84rem;color:rgba(252,252,252,.6);margin-top:.6rem}
.modal-foot{display:flex;align-items:center;gap:.55rem;margin-top:1.5rem;font-size:.76rem;color:rgba(252,252,252,.72)}
.modal-foot strong{font-weight:500;color:var(--ukoffwhite)}
.modal-foot .pulse{
  width:7px;height:7px;border-radius:50%;background:var(--ukred);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(187,60,54,.7);animation:pulse 2.2s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(187,60,54,0)}100%{box-shadow:0 0 0 0 rgba(187,60,54,0)}}

.modal-formcol{overflow-y:auto;padding:34px 32px;max-height:92vh;-webkit-overflow-scrolling:touch}
#tripForm{display:flex;flex-direction:column;gap:.85rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.f{display:flex;flex-direction:column;min-width:0}
.f-lab{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ukmuted);margin:0 0 .4rem .2rem}
.field{
  width:100%;background:var(--ukpaper);border:1px solid var(--ukrule);border-radius:10px;
  padding:.76rem .95rem;font-size:.86rem;color:var(--ukblue);letter-spacing:-.005em;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
.field::placeholder{color:var(--ukmuted)}
.field:focus{outline:none;background:var(--ukoffwhite);border-color:var(--ukred);box-shadow:0 0 0 3px rgba(187,60,54,.11)}
textarea.field{resize:vertical;min-height:88px}
.f-sel{position:relative}
.f-sel select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer}
.f-sel-ico{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ukmuted);pointer-events:none}
.f-err{font-family:var(--font-serif);font-style:italic;font-size:.76rem;color:var(--ukred);margin:.35rem 0 0 .2rem}

.f-check{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;font-size:.79rem;color:var(--ukmuted);line-height:1.6}
.f-check input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:18px;height:18px;margin-top:1px;border:1px solid var(--ukrule);
  border-radius:5px;background:var(--ukoffwhite);cursor:pointer;position:relative;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.f-check input:checked{background:var(--ukred);border-color:var(--ukred)}
.f-check input:checked::after{
  content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;border:solid var(--ukoffwhite);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.f-check strong{color:var(--ukblue);font-weight:500}
.f-check a{color:var(--ukblue);text-decoration:underline;text-underline-offset:2px;transition:color .2s var(--ease)}
.f-check a:hover{color:var(--ukred)}

.f-note{font-family:var(--font-serif);font-style:italic;font-size:.72rem;color:var(--ukmuted);text-align:center}
.f-alt{font-size:.74rem;color:var(--ukmuted);text-align:center;padding-top:.9rem;border-top:1px solid var(--ukrule)}
.f-alt a{color:var(--ukblue);font-weight:500}
.f-alt a:hover{color:var(--ukred)}

.f-feedback{padding:.85rem 1.1rem;border-radius:10px;font-size:.8rem;background:rgba(187,60,54,.08);color:var(--ukred)}
.f-done{padding:56px 24px 48px;text-align:center;animation:heroIn .45s var(--ease) both}
.f-done .tick{
  width:64px;height:64px;border-radius:50%;background:rgba(34,51,78,.06);color:var(--ukblue);
  display:grid;place-items:center;margin:0 auto 24px;
}
.f-done .tick svg{width:28px;height:28px}
.f-done h2{font-family:var(--font-sans);font-weight:300;font-size:1.6rem;letter-spacing:-.02em;color:var(--ukblue)}
.f-done p{margin-top:.85rem;font-size:.86rem;color:var(--ukmuted);max-width:36ch;margin-inline:auto;line-height:1.7}
.f-done .sig{
  font-family:var(--font-serif);font-style:italic;font-size:.75rem;
  color:rgba(34,51,78,.4);margin-top:34px;letter-spacing:.01em;
}

/* ============================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .ft-top{grid-template-columns:1.4fr 1fr 1fr;row-gap:2rem}
}

@media (max-width:940px){

  .grid-3{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .why{grid-template-columns:repeat(2,1fr);row-gap:2.2rem}
  .why-item + .why-item{border-left:0}
  .why-item:nth-child(even){border-left:1px solid var(--ukrule)}

  .about{grid-template-columns:1fr}
  .about-media img{min-height:220px;max-height:300px}
  .about-body{padding:28px 24px 32px}

  .modal-landscape .modal-grid{grid-template-columns:1fr}
  .modal-visual{min-height:180px}
  .modal-visual-body{padding:24px 24px 22px}
  .modal-visual-body h2{font-size:1.35rem}
  .modal-foot{display:none}
  .modal-formcol{max-height:none;padding:26px 22px 30px}
  .modal-shell{max-height:94vh;overflow-y:auto}
}

@media (max-width:620px){
  .hero{height:auto}
  .hero-track{position:relative;inset:auto;height:clamp(440px,94vw,530px)}
  /* Voile allégé : le texte est haut, ancré près de la navbar, donc le voile
     n'a besoin d'assurer le contraste que dans le tiers supérieur. */
  .hero-veil{
    background:linear-gradient(180deg,
      rgba(252,252,252,.80) 0%,
      rgba(252,252,252,.66) 26%,
      rgba(252,252,252,.42) 48%,
      rgba(252,252,252,.18) 72%,
      rgba(252,252,252,.04) 100%);
  }
  /* Ancrage par le haut, remonté vers la navbar (eyebrow à distance fixe). */
  .hero-body{justify-content:flex-start;padding-top:45px;transform:none}
  .hero-title.type-mega{font-size:clamp(2rem,8.5vw,2.9rem)}
  .hero-lede{max-width:34ch}
  .hero-credit{bottom:44px;right:14px;color:rgba(34,51,78,.4);text-shadow:none}
  /* Flèches masquées sur mobile : le swipe, l'autoslide et les dots suffisent */
  .hero-arrow{display:none}
  .hero-dots{bottom:16px}

  .grid-4{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .why{grid-template-columns:1fr}
  .why-item:nth-child(even){border-left:0}
  .why-item + .why-item{border-top:1px solid var(--ukrule);padding-top:1.8rem}

  /* En colonne, flex-basis pilote la HAUTEUR : on neutralise les bases
     heritees du mode ligne, sinon .nl-text et .nl-form imposent 300 et
     340px de haut et creusent des trous entre les elements. */
  .nl{flex-direction:column;align-items:stretch;gap:1rem;padding:22px}
  .nl > *{flex:0 0 auto}
  .nl-ico{width:48px;height:48px}
  .nl-ico .ico-lg{width:26px;height:26px}
  .nl-form{width:100%;flex-wrap:wrap;gap:.6rem}
  .nl-form input,.nl-form .btn-pill{flex:0 0 auto;width:100%}

  .ft-top{grid-template-columns:1fr;gap:1.7rem}
  .f-row{grid-template-columns:1fr}
  .ft-bar{flex-direction:column;gap:.35rem}
  .ft-bar .sep{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .hero-img{transform:none}
}

/* ============================================================================
   MODALES DOCUMENT (Legal, Privacy) — reprises du tri-site, adaptees charte
   Reutilisent .modal / .modal-shell / .modal-backdrop / .modal-close.
   ========================================================================= */
.modal-document .modal-shell{max-width:760px}
.modal-document-body{overflow-y:auto;max-height:92vh;padding:40px 44px;-webkit-overflow-scrolling:touch}
.modal-document-head{margin-bottom:1.8rem;padding-bottom:1.4rem;border-bottom:1px solid var(--ukrule)}
.modal-document-eyebrow{
  display:block;font-size:.64rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ukred);margin-bottom:.7rem;
}
.modal-document-title{
  font-family:var(--font-sans);font-weight:300;font-size:1.9rem;
  letter-spacing:-.02em;color:var(--ukblue);line-height:1.1;
}
.modal-document-sep{color:var(--ukrule);margin:0 .35rem;font-weight:300}
.modal-document-section + .modal-document-section{
  margin-top:1.8rem;padding-top:1.8rem;border-top:1px solid var(--ukrule);
}
.modal-document-section-title{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ukmuted);margin-bottom:1rem;
}
.modal-document-section p{
  font-size:.86rem;line-height:1.72;color:var(--ukink);margin-bottom:.9rem;
}
.modal-document-section p:last-child{margin-bottom:0}
.modal-document-section strong{color:var(--ukblue);font-weight:600}
.modal-document-section em{font-family:var(--font-serif);font-style:italic}
.modal-document-section a{
  color:var(--ukred);text-decoration:underline;text-underline-offset:2px;
  transition:opacity .2s var(--ease);
}
.modal-document-section a:hover{opacity:.7}
.modal-document-foot{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--ukrule);text-align:center}
.modal-document-cta{min-width:200px}

@media (max-width:620px){
  .modal-document-body{padding:30px 24px}
  .modal-document-title{font-size:1.5rem}
}

/* ============================================================================
   SÉLECTEUR DE LANGUE (EN / FR)
   ========================================================================= */
.lang-picker{display:inline-flex;align-items:center;gap:.35rem}
.lang-opt{
  font-size:.72rem;font-weight:600;letter-spacing:.06em;
  color:var(--ukmuted);padding:.3rem .35rem;border-radius:6px;
  transition:color .2s var(--ease);
}
.lang-opt:hover{color:var(--ukblue)}
.lang-opt.is-active{color:var(--ukred)}
.lang-sep{color:var(--ukrule);font-size:.72rem}

.lang-picker-mobile{
  gap:.5rem;margin-bottom:1.2rem;padding-bottom:1.2rem;
  border-bottom:1px solid var(--ukrule);
}
.lang-picker-mobile .lang-opt{
  flex:1;text-align:center;padding:.6rem;border:1px solid var(--ukrule);border-radius:8px;
  font-size:.8rem;letter-spacing:.02em;
}
.lang-picker-mobile .lang-opt.is-active{
  color:var(--ukoffwhite);background:var(--ukred);border-color:var(--ukred);
}