/* ==========================================================================
   SKYWAY TRAVELERS — page d'accueil
   Source : NEW LIEN MAQUETTE.xd, plans « HOME – 1 » / « HOME – 2 » (1920 × 6222)
   Unités : 1rem = 10 px à 1920 px de large, proportionnel en dessous.
   ========================================================================== */

html{
  font-size: min(10px, calc(100vw / 192));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;          /* les décors débordent volontairement */
}

:root{
  /* Espace entre la barre de contact et le logo. Un seul réglage pour tout le
     site : la maquette collait le logo sous la barre (valeur 0). */
  --nav-gap: 4rem;

  /* palette relevée dans le fichier XD */
  --navy:       #073064;
  --blue:       #024876;
  --red:        #F52F06;
  --ink:        #343434;
  --ink-strong: #151515;
  --grey:       #696969;
  --gold:       #FFBA00;
  --white:      #fff;
  --page:       #FAFAFA;

  /* Gilroy et Geomanist sont des polices commerciales : elles restent en tête
     de pile et Poppins/Outfit prennent le relais tant qu'elles ne sont pas
     fournies. Un seul endroit à modifier le jour où les licences arrivent. */
  --font-title: 'Gilroy', 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body:  'Outfit', 'Segoe UI', Arial, sans-serif;
  --font-ui:    'Uni Sans', 'Poppins', 'Segoe UI', Arial, sans-serif;

  --wrap: 137rem;                    /* contenu 275 → 1645 px */
  --shadow-card: 0 .4rem 2rem rgba(7,48,100,.10);
  --shadow-soft: 0 .2rem 1.2rem rgba(7,48,100,.08);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:2rem;
  line-height:1.5;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:.2rem solid var(--red); outline-offset:.3rem; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:#fff; padding:1.2rem 2rem;
}
.skip:focus{ left:0; }

.wrap{ width:min(var(--wrap), 92%); margin-inline:auto; }

/* ---------- titres de section ---------- */
.title{
  margin:0;
  font-family:var(--font-title);
  font-weight:600;
  font-size:5.7rem;
  line-height:5.2rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
.title{ position:relative; }
.title__line{
  position:relative; display:inline-block;
  transform:scaleX(.945); transform-origin:left center;
}
.title--center .title__line{ transform-origin:center; }
.title__line::before{
  content:"";
  position:absolute; left:0; top:3.6rem;
  width:100%; height:1rem;
  background:var(--red);
}
.title--light .title__line::before{ background:#fff; }
.title--center .title__line::before{ left:0; transform:none; }
.title--center{ text-align:center; }
.title--light{ color:var(--white); }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:space-between;
  gap:1.6rem;
  width:28.3rem; height:7.3rem;
  padding:0 1.8rem 0 3.1rem;
  white-space:nowrap;
  border-radius:99rem;
  font-family:var(--font-ui);
  font-size:2rem; font-weight:600; line-height:1;
  transition:filter .2s ease, transform .2s ease;
}
.btn__ico{
  width:3.6rem; height:3.6rem; flex:none;
  background:currentColor;
  -webkit-mask:var(--m-arrow) no-repeat center / contain;
  mask:var(--m-arrow) no-repeat center / contain;
}
.btn--red{ background:var(--red); color:#fff; }
.btn--blue{ background:var(--blue); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 .2rem #343434; }
.btn--outline{ background:transparent; color:#fff; box-shadow:inset 0 0 0 .15rem rgba(255,255,255,.85); }
.btn:hover{ filter:brightness(1.07); }
.btn:active{ transform:translateY(.1rem); }

/* ---------- icônes ---------- */
.ico{
  display:inline-block; flex:none;
  width:2.2rem; height:2.2rem;
  background:currentColor;
  -webkit-mask:var(--m) no-repeat center / contain;
  mask:var(--m) no-repeat center / contain;
}
.ico--chev{ width:1.4rem; height:1.4rem; }

.socials{ display:inline-flex; align-items:center; gap:1.4rem; }
.soc{
  width:2.4rem; height:2.4rem; display:block;
  background:currentColor;
  -webkit-mask:var(--m) no-repeat center / contain;
  mask:var(--m) no-repeat center / contain;
  opacity:.9; transition:opacity .2s ease;
}
.soc:hover{ opacity:1; }

/* ==========================================================================
   BARRE DE CONTACT  (XD : bande blanche 1920 × 60)
   Le fichier XD place ici du texte blanc sur fond blanc — donc illisible.
   La géométrie est respectée, la couleur du texte passe au bleu de marque.
   ========================================================================== */
.topbar{
  height:6rem;
  background:var(--white);
  position:relative; z-index:30;
  font-size:2rem; font-weight:300;
  color:var(--ink);
}
.topbar__in{
  height:100%;
  display:flex; align-items:center; gap:4.3rem;
}
.topbar__item{ display:inline-flex; align-items:center; gap:1.4rem; white-space:nowrap; }
.topbar__item .ico{ width:2.4rem; height:2.4rem; color:var(--blue); }
.topbar__item--addr{ margin-left:auto; }
.topbar__sep{ width:1px; height:2.6rem; background:rgba(52,52,52,.28); }
.topbar .socials{ color:var(--blue); }

/* ==========================================================================
   HERO  (photo 1920 × 863, visible de y=60 à y=863)
   ========================================================================== */
.hero{
  position:relative;
  height:80.3rem;
  color:#fff;
  z-index:20;
}
.hero__slides{ position:absolute; inset:0; overflow:hidden; }
.hero__slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .9s ease;
}
.hero__slide.is-active{ opacity:1; }
.hero::before{                             /* voile sombre sous le menu : sans lui,
                                              le menu blanc se perd sur les photos claires */
  content:""; position:absolute; inset:0 0 auto; height:34rem; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.34) 40%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.hero::after{                              /* dégradé sombre bas-gauche du XD */
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.07) 44%, rgba(0,0,0,0) 68%);
  pointer-events:none;
}

/* --- navigation --- */
.nav{ position:absolute; top:-1.3rem; left:0; right:0; z-index:12; }
.nav__in{ display:flex; align-items:center; height:9.5rem; }
.nav__logo img{ width:10.4rem; height:10.8rem; }

.menu{
  display:flex; align-items:center; gap:3rem;
  margin-left:auto;
  font-family:var(--font-title); font-weight:600; font-size:1.9rem;
  letter-spacing:-.01em; white-space:nowrap;
}
.menu a{ display:inline-flex; align-items:center; gap:1rem; padding-bottom:.8rem; }
.menu a:hover{ opacity:.82; }
.menu .is-current{ box-shadow:0 .15rem 0 currentColor; }
.menu__home .ico{ width:2.6rem; height:2.6rem; }

.burger{ display:none; width:4.4rem; height:3.4rem; flex-direction:column; justify-content:space-between; margin-left:auto; }
.burger span{ height:.3rem; background:#fff; border-radius:2px; }

/* --- sélecteur de langue --- */
.langs{
  position:absolute; left:0; top:31.5rem; z-index:12;
  width:6.4rem; padding:1.8rem 0;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  background:#fff; border-radius:0 1.5rem 1.5rem 0;
  box-shadow:0 .3rem 1.4rem rgba(0,0,0,.16);
}
.langs img{ width:3.2rem; height:3.2rem; object-fit:contain; }

/* --- titre + accroche --- */
.hero__in{ position:relative; z-index:10; }
.hero__title{
  margin:0;
  padding-top:16.4rem;
  font-family:var(--font-title);
  font-size:8.4rem;
  line-height:8.6rem;
  letter-spacing:-.015em;
}
.hero__title-light{ display:block; font-weight:300; }
.hero__title-strong{
  display:block; font-weight:800; margin-top:1.4rem;
  text-transform:uppercase; letter-spacing:-.02em;
  background:linear-gradient(var(--red), var(--red)) .1rem 100% / 52.8rem 1.4rem no-repeat;
  padding-bottom:1.3rem;
}
.hero__cta{ margin-top:3.2rem; }

/* --- carte de recherche --- */
.search{
  position:absolute; right:.4rem; top:13.2rem; z-index:11;
  width:39.1rem; min-height:33.8rem;
  padding:3.4rem 2.1rem 2.1rem;
  background:#fff; border-radius:5.6rem;
  box-shadow:0 1rem 3rem rgba(7,48,100,.14);
  display:flex; flex-direction:column; gap:.6rem;
}
.search__row{
  display:flex; align-items:center; gap:1.4rem;
  height:4.8rem; padding:0 1.5rem;
  color:var(--ink); cursor:pointer;
}
.search__row > .ico:first-child{ width:2.4rem; height:2.4rem; color:var(--ink); }
.search__row select,
.search__row input{
  flex:1; min-width:0;
  border:0; background:none; appearance:none; -webkit-appearance:none;
  font-family:var(--font-body); font-size:1.7rem; color:rgba(52,52,52,.45);
  cursor:pointer;
}
.search__row .ico--chev{ color:rgba(52,52,52,.45); }
.search__label{ font-size:1.7rem; color:rgba(52,52,52,.45); }
.search__row--date input{ text-align:left; }
.search__submit{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
  height:6.35rem; padding:0 2rem 0 2.8rem;
  border-radius:99rem; background:var(--blue); color:#fff;
  font-family:var(--font-ui); font-size:1.7rem; font-weight:600;
}
.search__submit .btn__ico{ width:3rem; height:3rem; }

/* --- pagination du diaporama --- */
.hero__dots{
  position:absolute; right:3.5rem; top:37rem; z-index:11;
  display:flex; flex-direction:column; gap:1rem;
}
.hero__dots button{
  width:.9rem; height:.9rem; border-radius:50%;
  background:rgba(255,255,255,.55);
}
.hero__dots button[aria-selected="true"]{ background:#fff; }

/* --- cartes « nos voyages récents » --- */
.trips{
  position:absolute; z-index:11;
  left:65.4rem; right:2.8rem; bottom:-2.5rem;
}
.trips__label{
  width:38.5rem; height:5.5rem;
  border-radius:2.8rem 2.8rem 0 0;
  background:var(--navy);
  display:flex; align-items:center; padding-left:3.3rem;
  font-family:var(--font-title); font-weight:600; font-size:1.6rem;
  letter-spacing:.04em; text-transform:uppercase;
  color:#fff;
}
.trips__grid{ display:grid; grid-template-columns:repeat(3, 40.3rem); gap:1.5rem; }

.trip{
  height:15.1rem; background:#fff; border-radius:1rem;
  box-shadow:var(--shadow-card);
  display:grid; grid-template-columns:12.9rem 1fr;
  gap:1.9rem; padding:1.4rem;
}
.trip img{ width:12.9rem; height:11.9rem; object-fit:cover; border-radius:1rem; }
.trip__body{ padding-top:.2rem; }
.trip__place{
  display:flex; align-items:center; gap:.8rem;
  font-size:1.8rem; color:var(--grey);
}
.trip__place .ico{ width:1.6rem; height:2rem; }
.trip__name{
  margin-top:.4rem;
  font-size:1.5rem; line-height:1.6rem; font-weight:500; color:var(--ink-strong);
}
.trip__stars{ display:flex; gap:.3rem; margin-top:.8rem; color:var(--gold); }
.trip__stars .ico{ width:1.4rem; height:1.4rem; }
.trip__foot{
  display:flex; align-items:center; gap:2rem;
  margin-top:.8rem; font-size:1.9rem;
}
.trip__price{ font-weight:500; color:#000; }
.trip__days{ display:inline-flex; align-items:center; gap:.6rem; color:var(--grey); }
.trip__days .ico{ width:1.6rem; height:1.6rem; }

/* ---------- illustrations line-art (tracés vectoriels extraits du XD) ----- */
.deco{ position:absolute; z-index:1; pointer-events:none; }
.deco--camera { left:171.91rem; top:13.11rem; width:15.01rem;  height:12.25rem; }
.deco--route  { left:145.83rem; top:63.71rem; width:42.83rem;  height:45.96rem; }
.deco--liberty{ left:178.22rem; top:-.08rem;  width:14.08rem;  height:39.35rem; }
.deco--plane  { left:174.10rem; top:31.71rem; width:13.96rem;  height:27.90rem; }
.deco--luggage{ left:4.39rem;   top:18.68rem; width:17.39rem;  height:23.41rem; }
.deco--paper  { left:10.25rem;  top:-7.27rem; width:10.22rem;  height:6.17rem; }
.deco--route2 { left:172.49rem; top:44.06rem; width:18.11rem;  height:21.83rem; }

@media (max-width:1199px){ .deco{ display:none; } }

/* ==========================================================================
   À PROPOS
   ========================================================================== */
.about{ position:relative; padding-top:5.8rem; min-height:78rem; }
.about__in{ position:relative; }

.about__visual{
  position:absolute; left:-30.6rem; top:0;
  width:100.1rem;
}
.about__collage{ width:100.1rem; max-width:none; height:auto; }

.badge{
  position:absolute; left:71.9rem; top:21.5rem;
  width:20.6rem; height:20.6rem; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-ui); line-height:1;
  box-shadow:0 0 0 1.3rem rgba(245,47,6,.33), 0 0 0 2.6rem rgba(245,47,6,.33);
}
.badge__num{ font-size:7.5rem; font-weight:700; }
.badge__txt{ font-size:1.9rem; line-height:2.7rem; text-align:center; margin-top:.6rem; }

.about__text{ margin-left:74.2rem; padding-top:13.8rem; }
.about__text p{
  margin-top:3.4rem;
  width:66.2rem;
  font-family:var(--font-title);
  font-size:2.3rem; line-height:3rem;
}
.about__text .btn{ margin-top:5.2rem; }

.about__shots{
  position:relative; z-index:2;
  width:min(var(--wrap), 92%); margin:1.9rem auto 0;
  height:31.1rem;
}
.about__shots img{ position:absolute; width:38.5rem; height:25.8rem; object-fit:cover; border-radius:1rem; }
.about__shots img:first-child{ left:67.3rem; top:5.3rem; }
.about__shots img:last-child{ left:99.3rem; top:0; }

/* ==========================================================================
   NOS SERVICES  (bandeau bleuté délimité par deux vagues)
   ========================================================================== */
.services{
  position:relative;
  margin-top:8.4rem;
  padding:5.5rem 0 9.6rem;
  background:#EFF6FC;
}
.services::before,
.services::after{
  content:""; position:absolute; left:0; right:0; height:9rem;
  background:#fff;
}
.services::before{ top:-1px; border-radius:0 0 50% 50% / 0 0 100% 100%; height:5rem; }
.services::after{ bottom:-1px; border-radius:50% 50% 0 0 / 100% 100% 0 0; height:5rem; }
.services .title{ position:relative; z-index:2; }

.services__viewport{ margin-top:9.4rem; overflow:hidden; }
.services__track{
  display:flex; gap:3.3rem; padding-left:.7rem;
  transition:transform .5s ease;
}
.service{
  position:relative; flex:0 0 36.3rem;
  height:56.5rem;
}
.service > img{
  width:36.3rem; height:56.5rem; object-fit:cover; border-radius:1.4rem;
}
.service__card{
  position:absolute; left:1.3rem; right:2.8rem; bottom:.7rem;
  min-height:16.9rem;
  background:#fff; border-radius:2rem;
  box-shadow:var(--shadow-card);
  padding:2.9rem 2.9rem 2.4rem;
}
.service__badge{
  position:absolute; left:2.9rem; top:-2.1rem;
  width:4.2rem; height:4.2rem; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
}
.service__badge .ico{ width:2.2rem; height:2.2rem; color:var(--red); }
.service__title{
  margin:0; font-family:var(--font-body); font-weight:600;
  font-size:2.3rem; line-height:2.4rem; color:var(--blue);
}
.service__card p{ margin-top:1.7rem; font-size:1.8rem; line-height:2.5rem; }

.carousel-nav{
  display:flex; justify-content:center; gap:1.6rem;
  margin-top:2.8rem; position:relative; z-index:2;
}
.carousel-nav button{
  width:3.4rem; height:3.4rem; border-radius:50%;
  background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.carousel-nav .ico{ width:1.6rem; height:1.6rem; }
.carousel-nav button:hover{ filter:brightness(1.15); }

/* ==========================================================================
   DEVENIR PARTENAIRE
   ========================================================================== */
.partner{
  position:relative;
  padding:10rem 0 16.1rem;
  display:grid; grid-template-columns:96.7rem 1fr; align-items:start; gap:0;
}
.partner__photo{
  position:relative;
  margin-left:-11.1rem;
  width:95.7rem; height:56rem;
  border:.2rem solid var(--red);
  border-radius:0 30.5rem 30.5rem 0;
}
.partner__photo img{
  position:absolute; left:5rem; top:1.9rem;
  width:88.7rem; height:51.8rem;
  object-fit:cover;
  border-radius:0 30.5rem 30.5rem 0;
}

.partner__text{ padding-right:6rem; margin-top:-3.6rem; }
.partner__text > p{
  margin-top:3.6rem; width:65.6rem;
  font-family:var(--font-title); font-size:2.3rem; line-height:3rem;
}
.tiers{ display:flex; gap:.9rem; margin-top:2.8rem; }
.tier{
  position:relative; width:21.8rem; height:13.9rem;
  border-radius:1rem; overflow:hidden;
  display:flex; align-items:center;
  padding-left:3.4rem;
}
.tier img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tier::after{ content:""; position:absolute; inset:0; background:rgba(2,72,118,.49); }
.tier span{
  position:relative; z-index:2;
  font-family:var(--font-title); font-weight:600; font-size:2.5rem;
  letter-spacing:-.01em; text-transform:uppercase; color:#fff;
}
.partner__text .btn{ margin-top:3.7rem; margin-left:-.7rem; }

/* ==========================================================================
   ATOUTS + CHIFFRES
   ========================================================================== */
.figures{
  position:relative; z-index:4;
  display:grid; grid-template-columns:auto auto; justify-content:start;
  align-items:center; gap:0 27.9rem; padding:1rem 0 7.1rem 27.5rem;
}
.atouts{ display:grid; grid-template-columns:repeat(3, 26.4rem); gap:6rem 1.1rem; }
.atout{
  height:19.3rem; background:#fff; border-radius:1rem;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.4rem; padding:0 2rem; text-align:center;
}
.atout .ico{ width:3.2rem; height:3.2rem; color:var(--red); }
.atout span{
  font-family:var(--font-title); font-weight:600;
  font-size:2.3rem; line-height:2.7rem; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--ink);
}

.stats{ display:grid; grid-template-columns:repeat(2, 21.2rem); gap:2.1rem 7.6rem; }
.stat{
  width:21.2rem; height:21.2rem; aspect-ratio:1; border-radius:50%;
  background:var(--red); color:#fff;
  box-shadow:inset 0 0 0 .5rem #fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1;
}
.stat b{ font-family:var(--font-title); font-weight:900; font-size:5.3rem; }
.stat span{ font-family:var(--font-title); font-size:1.8rem; line-height:2.1rem; margin-top:.8rem; text-transform:uppercase; }

/* ==========================================================================
   BLOG
   ========================================================================== */
/* Le fond n'est pas un rectangle : c'est le tracé du XD (forme pleine
   + doublure pâle à 10 %), exporté tel quel pour être exact au pixel. */
.blog{
  position:relative; z-index:3;
  background:transparent;
  padding:15rem 0 0;
  margin-top:-6rem;
}
.blog__bg{
  position:absolute; z-index:-1; pointer-events:none;
  left:-5.02rem; top:-10.75rem;
  width:201.12rem; height:109.06rem;
  max-width:none;
}
.blog .title{ position:relative; z-index:2; }

.blog__grid{
  position:relative; z-index:2;
  width:min(var(--wrap), 92%); margin:7.1rem auto 0;
  display:grid; grid-template-columns:70.7rem 62.4rem; justify-content:space-between; gap:0;
}
.post--lead{ background:#fff; border-radius:0 0 1rem 1rem; overflow:hidden; box-shadow:var(--shadow-card); align-self:start; }
.post--lead img{ width:100%; height:18.7rem; object-fit:cover; object-position:38% 50%; }
.post--lead .post__body{ height:26.3rem; padding:5.6rem 4.2rem 0; }
.post__meta{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  font-family:var(--font-title); font-weight:700; font-size:1.6rem; color:var(--ink);
}
.post__meta .ico{ width:1.6rem; height:1.8rem; color:var(--red); }
.post__meta .ico + .ico{ margin-left:1.6rem; }
.post__text{ margin-top:1.4rem; font-size:1.6rem; line-height:2.2rem; }
.post__cta{ width:10.2rem; height:2.7rem; gap:.6rem; padding:0 .5rem 0 1rem; font-size:1.1rem; margin-top:1.4rem; }
.post--lead .post__cta{ width:21.5rem; height:5.5rem; padding:0 1.4rem 0 2.4rem; font-size:1.8rem; margin-top:2.4rem; }
.post--lead .post__cta .btn__ico{ width:3rem; height:3rem; }
.post__cta .btn__ico{ width:2.2rem; height:2.2rem; }

.posts{ display:grid; grid-template-columns:repeat(2, 29.7rem); gap:3.2rem 3rem; align-content:start; justify-content:space-between; }
.post--mini{
  display:grid; grid-template-columns:12.4rem 17.3rem;
  background:#fff; border-radius:1rem; overflow:hidden; box-shadow:var(--shadow-card);
  height:20.5rem;
}
.post--mini img{ width:12.4rem; height:100%; object-fit:cover; object-position:37% 50%; }
.post--mini .post__body{ padding:2.6rem 1.4rem 0 4.4rem; }
.post--mini .post__meta{ display:block; font-size:1.6rem; }
.post--mini .post__meta .ico{ vertical-align:-.3rem; margin-right:.5rem; }
.post--mini .post__meta em{ display:block; font-style:normal; font-weight:400;
  font-family:var(--font-body); font-size:1.5rem; margin-top:.4rem; }
.post--mini .post__text{ font-size:1.6rem; line-height:1.7rem; margin-top:.8rem; font-family:var(--font-body); }

.blog__all{
  position:relative; z-index:2;
  display:flex; margin:7.4rem auto 0; width:28.3rem; height:7.3rem; font-size:2rem;
}

/* ==========================================================================
   TÉMOIGNAGES
   ========================================================================== */
/* z-index 2 : les fleches debordent sous la section (bottom:-5.4rem) et le
   pied de page, place apres dans le DOM, les recouvrait — elles n'etaient
   alors plus cliquables. */
.quotes{ position:relative; z-index:2; margin-top:-7.6rem; padding:23.4rem 0 0; background:var(--page); }
.quotes__viewport{ overflow:hidden; margin-top:11.4rem; }
.quotes__track{ display:flex; gap:9.3rem; transition:transform .5s ease; padding-left:-19.9rem; margin-left:-19.9rem; }
.quote{
  flex:0 0 71.1rem; min-height:21.9rem;
  opacity:.32; transition:opacity .4s ease;
  background:var(--blue); color:#fff; border-radius:11rem;
  display:grid; grid-template-columns:17.9rem 1fr; align-items:center;
  padding-right:5rem;
}
.quote img{
  width:15.4rem; height:15.4rem; border-radius:50%; object-fit:cover;
  margin-left:1.5rem;
}
.quote__body{ font-family:var(--font-title); font-size:1.8rem; line-height:2.5rem; }
.quote__who{ margin-top:2.2rem; line-height:2.4rem; }
.quote.is-active{ opacity:1; }
.quotes .carousel-nav{ position:absolute; left:0; right:0; bottom:-5.4rem; margin-top:0; }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.footer{
  position:relative; z-index:1; overflow:hidden;
  background:var(--page) url("../images/footer-map.webp") no-repeat center 0 / 226.4rem auto;
  padding-top:28.6rem;
}
.footer__monuments{
  position:absolute; left:0; bottom:5.9rem; z-index:1;
  width:22.8rem; height:33.1rem; pointer-events:none;
}
.footer__plane{
  /* XD : cadre 802,5 x 441 a (1341, 5724), image retournee (flipX) et pivotee de 6 deg */
  position:absolute; left:130.9rem; top:29rem;
  width:80.25rem; height:44.1rem;
  transform:scaleX(-1) rotate(-6deg);
  object-fit:contain;
  pointer-events:none;
}
.footer__in{
  position:relative; z-index:2;
  width:min(var(--wrap), 92%); margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
}
.footer__logo{ width:13.5rem; height:14rem; object-fit:contain; }
.socials--footer{ margin-top:3.6rem; color:var(--ink); gap:1.8rem; }
.socials--footer .soc{ width:2.6rem; height:2.6rem; }
.footer__baseline{
  margin-top:2.4rem; text-align:center;
  font-family:var(--font-title); font-size:1.8rem; line-height:2.5rem;
}
.footer__nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 3.6rem;
  margin-top:5.1rem;
  font-family:var(--font-title); font-size:1.9rem;
  text-transform:uppercase; letter-spacing:.01em;
}
.footer__nav a:hover{ color:var(--blue); }
.footer__contact{
  display:flex; align-items:center; justify-content:center; gap:3rem;
  margin-top:2.4rem; padding-bottom:4.6rem;
  font-size:2rem;
}
.footer__contact > *{ display:inline-flex; align-items:center; gap:1.2rem; white-space:nowrap; }
.footer__contact .ico{ width:2.4rem; height:2.4rem; color:var(--blue); }
.footer__sep{ width:1px; height:2.6rem; background:rgba(52,52,52,.3); }

.footer__copy{
  position:relative; z-index:2;
  height:4.7rem; display:flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff;
  font-family:var(--font-title); font-size:1.6rem;
}
.footer__copy b{ font-weight:700; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  html{ font-size:8px; }

  .topbar__in{ gap:2.4rem; font-size:1.8rem; }
  .topbar__item--addr, .topbar__sep{ display:none; }
  .topbar .socials{ margin-left:auto; }

  .burger{ display:flex; }
  .menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:2rem;
    background:rgba(7,48,100,.97); padding:3rem 4%;
    display:none;
  }
  .menu.is-open{ display:flex; }

  .hero{ height:auto; padding-bottom:34rem; }
  .hero__title{ padding-top:14rem; font-size:6.4rem; line-height:6.4rem; }
  .hero__title-strong{ background-size:37rem 1.4rem; }
  .search{ position:relative; top:auto; right:auto; margin:4rem 0 0; width:39.1rem; max-width:100%; }
  .hero__dots{ display:none; }
  .langs{ top:14rem; }

  .trips{ left:4%; right:4%; bottom:4rem; }
  .trips__grid{ grid-template-columns:1fr; }
  .trip{ width:100%; }

  .about{ padding-top:8rem; }
  .about__in{ grid-template-columns:1fr; }
  .about__visual{ margin-left:0; }
  .about__collage{ width:100%; }
  .badge{ left:auto; right:4rem; top:auto; bottom:2rem; width:16rem; height:16rem; }
  .badge__num{ font-size:5.4rem; }
  .about__text{ padding-top:2rem; }
  .about__text p{ width:100%; }
  .about__shots{ justify-content:flex-start; padding-right:0; margin-top:4rem; }

  .partner{ grid-template-columns:1fr; }
  .partner__photo{ margin-left:0; width:100%; }
  .partner__text{ padding-right:0; }
  .partner__text > p{ width:100%; }

  .figures{ grid-template-columns:1fr; gap:6rem; justify-items:center; }
  .atouts{ grid-template-columns:repeat(3, 26.4rem); }

  .blog__grid{ grid-template-columns:1fr; }
  .quotes__track{ padding-left:4%; }
  .quote{ flex:0 0 min(71.1rem, 92vw); }

  .footer__plane{ width:60rem; opacity:.5; }
}

@media (max-width:767px){
  html{ font-size:9px; }

  .topbar{ height:auto; padding:1rem 0; }
  .topbar__in{ flex-wrap:wrap; justify-content:center; gap:1rem 2rem; font-size:1.6rem; }

  .hero__title{ padding-top:13rem; font-size:4.6rem; line-height:4.8rem; }
  .hero__title-strong{ background-size:26rem 1rem; }
  .btn{ width:24rem; height:6rem; font-size:1.8rem; }
  .langs{ display:none; }
  .search{ width:100%; }

  .title{ font-size:3.8rem; line-height:3.6rem; }

  .services__track{ gap:2rem; }
  .service{ flex:0 0 min(36.3rem, 86vw); height:auto; }
  .service > img{ width:100%; height:46rem; }
  .service__card{ position:relative; right:0; bottom:auto; margin-top:-8rem; }

  .atouts{ grid-template-columns:repeat(2, 1fr); }
  .stats{ grid-template-columns:repeat(2, 1fr); }
  .stat{ width:100%; height:auto; padding:3rem 0; }

  .posts{ grid-template-columns:1fr; }
  .post--mini{ grid-template-columns:10rem 1fr; }

  .quote{ grid-template-columns:1fr; border-radius:3rem; padding:3rem; text-align:center; justify-items:center; }
  .quote img{ margin:0 auto; }

  .footer__nav{ gap:1rem 2.4rem; font-size:1.8rem; }
  .footer__contact{ flex-direction:column; gap:1.6rem; }
  .footer__sep{ display:none; }
  .footer__plane{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ---------- listes à puces cochées (fiches et pages partenaires) ---------- */
.checks li{
  display:flex; align-items:center; gap:1.4rem;
  font-family:var(--font-title); font-weight:600; font-size:2.3rem;
  letter-spacing:-.01em; color:var(--ink);
}
.checks .ico{ width:2.2rem; height:2.2rem; color:var(--red); flex:none; }
.checks--wide li{
  height:auto; min-height:4.5rem;
  white-space:normal;
  align-items:flex-start;
}
.checks--wide li .ico{ margin-top:1rem; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}