/* SKYELITE : socle commun, chargé après le style de chaque page.
   Jost légère pour les titres, la portance comme mouvement (accélérations longues, aucune secousse),
   et le ciel gardé en fond après le vol : la flotte et la cabine ne quittent pas l'altitude. */

:root{
  --f-titre:'Jost','Century Gothic',system-ui,sans-serif;
  --f-texte:'Archivo',system-ui,sans-serif;
  --s-navy:#202A36; --s-instr:#4A5563; --s-trait:rgba(32,42,54,.14); --s-or:#F3C892;
  --s-portance:cubic-bezier(.19,1,.22,1);
  --ciel-haut:#F2F1EC; --ciel-bas:#F2F1EC;
}
html{background:#F2F1EC;scrollbar-color:#8a94a1 #e6e5df;scrollbar-width:thin}
body{font-family:var(--f-texte);font-variation-settings:normal;caret-color:var(--s-navy)}
/* le ciel de la page : posé par le script, il passe du matin au crépuscule entre la flotte et les questions */
body.ciel{background:none}
body.ciel::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--ciel-haut),var(--ciel-bas))}

/* ---------- typographie ---------- */
.disp,h1,h2,h3,.fl-item h3,.v-read b,.tarifs .px,.tarifs td:first-child,.cab-db b,.dest-read div b,.dest-list button b{font-family:var(--f-titre);font-variation-settings:normal}
.disp{font-weight:300;letter-spacing:-.015em;line-height:1.02}
.brand{font-family:var(--f-titre);font-variation-settings:normal;font-weight:500!important;font-size:1.14rem;letter-spacing:.05em}
.brand span{opacity:.5;color:inherit}
.mono{font-size:12px;letter-spacing:.12em}
.btn{font-family:var(--f-texte)}
.h2{font-size:clamp(2.2rem,4.4vw,4rem);max-width:16ch;margin-top:0}
.lead{font-size:1.06rem;max-width:50ch}
/* pages intérieures : le titre de page au même rang que ceux de l'accueil */
h1:not(.disp){font-size:clamp(2.4rem,4.8vw,4.4rem);line-height:1.04}

/* ---------- menu : le même sur les trois pages ; il s'efface en descendant, revient en remontant ---------- */
header.top{transition:background-color .35s,color .35s,box-shadow .35s,transform .7s var(--s-portance)}
header.top.cachee{transform:translateY(-105%)}
header.top nav{justify-content:flex-start;max-width:1320px;padding:0 clamp(20px,4vw,56px)}
.navlinks{margin-left:clamp(28px,4.5vw,72px);margin-right:auto}
.navlinks a{color:inherit;opacity:.78}
.navlinks a:hover,.navlinks a[aria-current]{opacity:1;color:inherit}
.trail{padding-bottom:3px;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .6s var(--s-portance),opacity .2s}
.trail:hover,.trail[aria-current]{background-size:100% 1px}
.son{margin-left:0}
.nav-cta{display:inline-flex;align-items:center;height:42px;padding:0 1.3rem;font-size:.84rem}
.nav-cta[aria-current]{background:transparent;color:var(--s-navy);border-color:rgba(32,42,54,.3)}
#mobileMenu a[aria-current]{font-weight:600}
:focus-visible{outline:2px solid var(--s-navy);outline-offset:3px}
header.top.on-dark :focus-visible,.nuit :focus-visible,footer :focus-visible,.pc :focus-visible{outline-color:#fff}

/* ---------- apparitions : tout monte lentement et se pose sans à-coup ---------- */
.js .rv{transform:translateY(34px);transition:opacity 1.4s var(--s-portance),transform 1.6s var(--s-portance)}
.leve .mo{display:inline-block;overflow:clip;vertical-align:top;padding:.1em 0 .24em;margin:-.1em 0 -.24em}
.leve .mo>span{display:inline-block;transform:translateY(115%);transition:transform 1.5s var(--s-portance);transition-delay:calc(var(--l,0)*120ms)}
.leve.in .mo>span{transform:none}
@media(prefers-reduced-motion:reduce){.leve .mo>span{transform:none}}

/* ---------- le vol ---------- */
.v-copy{display:flex;flex-direction:column;align-items:flex-start;bottom:clamp(40px,8vh,88px)}
.v-copy h1{font-size:clamp(2.8rem,6.2vw,6rem);max-width:11ch}
.v-copy p{max-width:42ch}
/* le statut d'embarquement passe sous les boutons : un voyant, pas un surtitre */
.v-copy .k{order:9;display:flex;align-items:center;gap:10px;margin:26px 0 0}
.v-copy .k i{width:7px;height:7px;border-radius:50%;background:#3d9a6c;box-shadow:0 0 0 4px rgba(61,154,108,.2)}
.ready-in .v-copy .k{transition-delay:1.7s}
.v-win{box-shadow:inset 0 0 0 12px #E3DDD1,inset 0 0 0 13px rgba(32,42,54,.1),inset 0 10px 30px rgba(0,0,0,.25),0 36px 70px -40px rgba(32,42,54,.45)}
.v-msg h2{font-size:clamp(2.4rem,5.2vw,5rem)}
.v-msg2{color:var(--s-navy);text-shadow:none}
.v-title{font-size:clamp(2.6rem,6vw,6rem)}
.v-read b{font-weight:300;font-size:clamp(1.9rem,3.2vw,3rem)}
.v-read small{font-size:12px}
/* sans mouvement, tout est visible d'un coup : le texte d'accueil se range au-dessus des trois relevés */
@media(prefers-reduced-motion:reduce){.v-copy{bottom:clamp(170px,27vh,250px)}}

/* ---------- la flotte : les trois appareils restent dans le ciel de la page ---------- */
.pad{padding:clamp(88px,13vh,160px) 0}
.fl-pano{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;aspect-ratio:auto;height:clamp(300px,64vh,660px);background:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 82%,transparent)}
.fl-pano img{max-width:none}   /* sans cela l'image s'arrêtait à 100 % et laissait une bande à droite */
.fl-item h3{font-weight:400;font-size:clamp(1.7rem,2.4vw,2.3rem)}
.fl-item dt{font-size:12px}
.fl-item dd{font-family:var(--f-titre);font-size:1.3rem}

/* ---------- destinations : la carte en pleine largeur, le tableau des arrivées dessous ---------- */
.dest{display:flex;flex-direction:column-reverse;align-items:stretch;gap:26px;margin-top:clamp(36px,6vh,64px)}
.dest-map{border-radius:clamp(14px,1.6vw,22px);background:rgba(255,255,255,.55);border-color:rgba(32,42,54,.1)}
.dest-map .route{stroke-width:1.8}
/* le relevé quitte le bas de la carte, où il recouvrait Madrid, pour le tiers est, qui est vide */
.dest-read{left:auto;right:4.5%;top:50%;bottom:auto;transform:translateY(-50%);width:19%;flex-direction:column;flex-wrap:nowrap;gap:clamp(14px,2.4vw,30px);
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;padding:0}
.dest-read div b{font-weight:300;font-size:clamp(1.7rem,3.2vw,3rem);line-height:1}
.dest-read div small{display:block;margin-top:6px}
.dest-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));border-top:1px solid var(--s-trait)}
.dest-list button{position:relative;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 10px 16px 0;border-bottom:0}
.dest-list button b{font-size:1.2rem;font-weight:400}
.dest-list button::before{content:"";position:absolute;left:0;right:10px;top:-1px;height:2px;background:var(--s-navy);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--s-portance)}
.dest-list button[aria-pressed="true"]::before{transform:scaleX(1)}

/* ---------- la cabine : d'un bord à l'autre de l'écran ---------- */
.cab{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;height:clamp(340px,68vh,720px)}
.cab-pt span{font-size:12px}
.cab-db b{font-weight:300;font-size:2.4rem}

/* ---------- tarifs, questions, nuit ---------- */
.tarifs th{font-size:12px}
.tarifs td:first-child{font-size:1.45rem}
.tarifs .px{font-weight:300}
summary{font-size:1.1rem}
summary::after{font-family:var(--f-titre)}
.nuit h2{font-size:clamp(3rem,7vw,6rem)}
.foot-cols h3{margin-bottom:14px;font-weight:500;color:rgba(255,255,255,.62)}
/* les longues légendes se lisent en bas de casse : les capitales espacées restent aux étiquettes courtes */
.v-read small,.foot-base{font-family:var(--f-texte);font-size:.84rem;letter-spacing:.01em;text-transform:none}
.foot-base{color:rgba(255,255,255,.62)}

/* ---------- pages intérieures : petits textes et repères ---------- */
.img-slot figcaption{color:#4A5563;letter-spacing:.02em}
.stat small,.jet .tag{font-size:12px}

/* ---------- téléphone ---------- */
@media(max-width:760px){
  .brand{margin-right:auto}
  .nav-cta{display:none}
  .v-copy h1{font-size:clamp(2.3rem,10.4vw,3rem)}
  .v-copy .k{margin-top:18px}
  .v-msg h2{font-size:2.3rem}
  .dest-read{position:static;transform:none;width:auto;flex-direction:row;justify-content:space-between;gap:12px;padding:14px 16px;border-top:1px solid var(--s-trait)}
  .dest-read div b{font-size:1.5rem}
  .dest-map .cityname{font-size:19px}
  .dest-list{grid-template-columns:repeat(3,1fr)}
  .dest-list button{border-bottom:1px solid var(--s-trait)}
  .dest-list button::before{top:auto;bottom:-1px}
  .cab{height:clamp(300px,52vh,460px)}
}

/* ---------- pied de page sur téléphone : deux colonnes pleines, liens à hauteur de doigt ---------- */
@media (max-width: 760px) {
  .foot-grid > div:first-child p { max-width: none; font-size: 1rem; line-height: 1.55; }
  .foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; width: 100%; margin-top: 36px; }
  .foot-cols h3 { margin-bottom: 6px; }
  .foot-cols a { display: block; padding: 11px 0; font-size: 1.02rem; }
  .foot-base { display: flex; flex-direction: column; gap: 10px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); line-height: 1.5; }
}

/* ---------- le vol sur téléphone : trois films verticaux qui se raccordent, sans miroir ---------- */
@media (max-width: 759px) and (orientation: portrait) {
  /* l'écran est plus étroit que le film : on garde le nez de l'avion, pas le bout de l'aile */
  #lCouche video, #lCouche img { transform: none; object-position: 72% 50%; }
  #lCroisiere video, #lCroisiere img { object-position: 62% 50%; }
}

/* ---------- « Bon vol » sur téléphone : une photo verticale, l'avion entier au-dessus du texte ---------- */
@media (max-width: 759px) and (orientation: portrait) {
  .nuit img { transform: none; object-position: 50% 0; }
  .nuit::after { background: linear-gradient(0deg, rgba(9, 15, 26, 0.92), rgba(9, 15, 26, 0.5) 34%, transparent 56%); }
}

/* ---------- croisière : titre et lectures lisibles sur le ciel clair ---------- */
/* un voile bleu nuit monte du bas avec les lectures ; le titre se pose dans le bleu, au-dessus de l'avion */
.v-read { isolation: isolate; --vr: 0; }
.v-read::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--g)); right: calc(-1 * var(--g)); top: -34vh; bottom: calc(-1 * clamp(36px, 8vh, 80px));
  background: linear-gradient(to top, rgba(10, 20, 36, .74), rgba(10, 20, 36, .42) 46%, rgba(10, 20, 36, 0));
  opacity: var(--vr);
}
.v-read div { border-top-color: rgba(255, 255, 255, .7); }
.v-read b { font-weight: 400; text-shadow: 0 1px 18px rgba(8, 16, 30, .45); }
.v-read small { opacity: 1; color: #fff; font-size: .9rem; text-shadow: 0 1px 10px rgba(8, 16, 30, .5); }
.v-alt { filter: drop-shadow(0 1px 8px rgba(8, 16, 30, .35)); }
@media (min-width: 761px) {
  .v-title { top: 12%; max-width: 20ch; font-size: clamp(2.4rem, 4.4vw, 4.8rem); text-shadow: 0 2px 30px rgba(10, 25, 50, .6), 0 0 2px rgba(10, 25, 50, .3); }
}
@media (max-width: 760px) {
  /* trois lignes compactes sous l'avion : le chiffre à gauche, sa légende à côté */
  .v-read { gap: 0; }
  .v-read::before { top: -18vh; }
  .v-read div { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; column-gap: 12px; padding: 10px 0; }
  .v-read b { font-size: 1.75rem; }
  .v-read small { margin-top: 0; font-size: .82rem; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) { .v-read { --vr: 1; } }