/* ============ TOKENS — palette Velour (crème / noir / or) ============ */
:root{
  --creme:#f2e8de;          /* crème de la marque, relevée sur le logo d'origine */
  --creme-2:#e9dfd2;        /* même crème, un ton plus sourd */
  --noir:#000000;           /* sections sombres */
  --noir-2:#111111;         /* cartes et panneaux sombres */
  --gris-nuit:#2d2c2b;      /* boîtes sombres secondaires */

  --encre:#0a0a0a;          /* texte sur crème */
  --encre-2:#3a3835;        /* texte courant sur crème */
  --encre-doux:#66635e;     /* texte secondaire — ajusté à la nouvelle crème */

  --or:#c3a972;             /* accent */
  --or-fonce:#716242;       /* accent sur fond clair — ajusté à la nouvelle crème */
  --or-clair:#d8c8a4;       /* accent sur fond sombre */

  --sur-noir:#f2e8de;       /* texte sur noir */
  --sur-noir-2:#b8b3aa;     /* texte secondaire sur noir */

  --ligne:rgba(10,10,10,.16);        /* filets sur crème */
  --ligne-nuit:rgba(242,232,222,.20); /* filets sur noir */

  --serif:'Fraunces','Iowan Old Style',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --container:1240px;
  --radius:0px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

body{
  background:var(--noir);
  color:var(--ivoire);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* velvet grain/vignette texture, no image assets needed */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(122,36,56,.18), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(198,161,91,.08), transparent 50%);
}
body::after{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

.wrap{max-width:var(--container);margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 22px}}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--or);
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:500;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--or)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;color:var(--ivoire)}
h1{font-size:clamp(42px,6.4vw,88px);line-height:.98;font-weight:400}
h1 em, h2 em{font-style:italic;color:var(--or-clair);font-weight:400}
h2{font-size:clamp(30px,4vw,52px);line-height:1.05}
h3{font-size:clamp(20px,2.2vw,26px);line-height:1.25;font-weight:500}
p{color:var(--fume);font-size:16px;font-weight:300}
.lead{font-size:19px;line-height:1.65;color:#c9c2b8;max-width:52ch}

.hairline{height:1px;background:var(--ligne);border:0}

/* ============ HEADER ============ */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(12,11,13,.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--ligne);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{font-family:var(--serif);font-size:22px;letter-spacing:.02em;color:var(--ivoire)}
.logo span{color:var(--or)}
.nav-links{display:flex;gap:38px;align-items:center}
.nav-links a{
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fume);
  font-weight:500;transition:color .25s ease;position:relative;padding:6px 0;
}
.nav-links a:hover,.nav-links a.active{color:var(--ivoire)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--or)}
.nav-cta{
  border:1px solid var(--or);color:var(--or) !important;padding:12px 24px;
  letter-spacing:.16em;font-size:11.5px;
}
.nav-cta:hover{background:var(--or);color:var(--noir) !important}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px;z-index:200}
.burger span{width:24px;height:1px;background:var(--ivoire);display:block;transition:.3s}
.mobile-panel{
  position:fixed;inset:0;background:var(--noir);z-index:150;
  display:flex;flex-direction:column;justify-content:center;gap:28px;padding:32px;
  transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.mobile-panel.open{transform:translateY(0)}
.mobile-panel a{font-family:var(--serif);font-size:32px;color:var(--ivoire)}
.mobile-panel .nav-cta{align-self:flex-start;font-family:var(--sans)}

@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 30px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  border:1px solid transparent;transition:all .3s ease;white-space:nowrap;
}
.btn-or{background:var(--or);color:var(--noir)}
.btn-or:hover{background:var(--or-clair)}
.btn-outline{border-color:var(--ligne);color:var(--ivoire)}
.btn-outline:hover{border-color:var(--or);color:var(--or)}
.btn-arrow::after{content:"→";transition:transform .3s}
.btn-arrow:hover::after{transform:translateX(4px)}

/* ============ HERO ============ */
.hero{
  min-height:100svh;display:flex;align-items:center;position:relative;
  padding-top:110px;padding-bottom:60px;
  border-bottom:1px solid var(--ligne);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;width:100%}
.hero h1{margin:22px 0 28px}
.hero-actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
.hero-map{position:relative}
.route-caption{margin-top:18px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fume-fonce);text-align:center}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-map{order:-1;max-width:320px;margin:0 auto}
}

/* France route map — signature element */
.france-map{width:100%;height:auto}
.france-map .outline{fill:none;stroke:var(--ligne);stroke-width:1}
.france-map .route{
  fill:none;stroke:var(--or);stroke-width:1.4;stroke-dasharray:6 6;
  stroke-dashoffset:1000;stroke-dasharray:1000;
  animation:draw 3.2s ease forwards .3s;
}
@keyframes draw{to{stroke-dashoffset:0}}
.france-map .pt{fill:var(--ivoire)}
.france-map .pt-main{fill:var(--or)}
.france-map text{font-family:var(--sans);font-size:9px;letter-spacing:.06em;fill:var(--fume);text-transform:uppercase}
.france-map .pt-main + text{fill:var(--or-clair)}

/* ============ SECTIONS ============ */
section{padding:120px 0;position:relative;z-index:2}
@media(max-width:640px){section{padding:80px 0}}
.section-head{max-width:640px;margin-bottom:64px}
.section-head h2{margin-top:18px}
.section-split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px}

/* ============ GAMMES / FLEET CARDS ============ */
.fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
.fleet-card:hover{background:var(--noir-2)}
.fleet-tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}
.fleet-card h3{margin:14px 0 4px}
.fleet-sub{font-size:13px;color:var(--fume-fonce);margin-bottom:24px}
.fleet-prices{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.fleet-prices div{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px dotted var(--ligne);padding-bottom:8px;color:var(--ivoire-2)}
.fleet-prices span:last-child{color:var(--or-clair);font-family:var(--serif);font-size:16px}
@media(max-width:900px){.fleet-grid{grid-template-columns:1fr}}

/* ============ SERVICES / ICON GRID ============ */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.service{border-top:1px solid var(--ligne);padding-top:24px}
.service h3{margin-bottom:12px}
@media(max-width:900px){.services-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.services-grid{grid-template-columns:1fr}}

/* ============ ZONES / EXPERIENCE ============ */
.zone{
  display:grid;grid-template-columns:.5fr 1fr;gap:48px;padding:56px 0;
  border-top:1px solid var(--ligne);align-items:start;
}
.zone:last-child{border-bottom:1px solid var(--ligne)}
.zone-num{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--fume-fonce)}
.zone-city{font-family:var(--serif);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
@media(max-width:768px){.zone{grid-template-columns:1fr;gap:14px}}

/* ============ QUOTE / BAND ============ */
.band{
  background:var(--noir);
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  text-align:center;
}
.band h2{max-width:820px;margin:0 auto}
.band .eyebrow{justify-content:center;margin-bottom:20px}
.band .eyebrow::before{display:none}

/* ============ WHY / STATS ============ */
.why-list{display:flex;flex-direction:column}
.why-item{display:flex;gap:24px;padding:22px 0;border-top:1px solid var(--ligne)}
.why-item:last-child{border-bottom:1px solid var(--ligne)}
.why-item .mark{color:var(--or);font-family:var(--serif);font-style:italic}

/* ============ TESTI / CLIENTELE ============ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:56px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);color:var(--or-clair);font-weight:400}
.stat span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fume-fonce)}
@media(max-width:768px){.stats-row{grid-template-columns:1fr 1fr}}

/* ============ FORM (Réservation / Contact) ============ */
.form-card{background:var(--noir-2);border:1px solid var(--ligne);padding:48px}
@media(max-width:640px){.form-card{padding:28px}}
.field{margin-bottom:22px}
.field label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fume);margin-bottom:10px}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--ligne);
  color:var(--ivoire);font-family:var(--sans);font-size:15px;padding:10px 2px;font-weight:300;
}
.field input::placeholder,.field textarea::placeholder{color:var(--fume-fonce)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--or)}
.field select option{background:var(--noir)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.vehicle-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:26px}
.vehicle-opt{border:1px solid var(--ligne);padding:16px;font-size:13px;cursor:pointer;transition:.25s}
.vehicle-opt:hover{border-color:var(--or)}
.vehicle-opt.sel{border-color:var(--or);background:rgba(198,161,91,.06)}
.vehicle-opt b{display:block;font-family:var(--serif);font-weight:500;margin-bottom:4px}
.vehicle-opt span{color:var(--fume-fonce);font-size:12px}
.total-row{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0;border-top:1px solid var(--ligne);margin-top:6px}
.total-row b{font-family:var(--serif);font-size:30px;color:var(--or-clair);font-weight:400}
.included{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px}
.included li{font-size:12.5px;color:var(--fume);display:flex;align-items:center;gap:8px}
.included li::before{content:"✓";color:var(--or)}

/* ============ TABLE (CGV/Tarifs) ============ */
.price-table{width:100%;border-collapse:collapse;margin-top:20px}
.price-table th,.price-table td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--ligne);font-size:14px}
.price-table th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--or);font-weight:500}
.price-table td:not(:first-child),.price-table th:not(:first-child){color:var(--or-clair);font-family:var(--serif)}
.price-table th:not(:first-child){color:var(--or)}
@media(max-width:640px){.price-table{font-size:12px}.price-table th,.price-table td{padding:10px 6px}}

/* ============ ACCORDIONS (CGV) ============ */
.accord{border-top:1px solid var(--ligne)}
.accord:last-child{border-bottom:1px solid var(--ligne)}
.accord-head{display:flex;justify-content:space-between;align-items:center;padding:26px 0;cursor:pointer}
.accord-head h2,.accord-head h3{font-size:17px;font-weight:400}
.accord-num{font-family:var(--serif);color:var(--or);margin-right:16px;font-style:italic}
.accord-icon{color:var(--or);font-size:20px;font-weight:300;transition:transform .3s}
.accord.open .accord-icon{transform:rotate(45deg)}
.accord-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.accord-body p{padding-bottom:26px;max-width:70ch}

/* ============ TRAJET / LANDING PAGES ============ */
.route-hero{padding-top:170px;padding-bottom:80px;border-bottom:1px solid var(--ligne)}
.route-meta{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap}
.route-meta div{border-left:1px solid var(--ligne);padding-left:16px}
.route-meta b{display:block;font-family:var(--serif);font-size:24px;color:var(--or-clair);font-weight:400}
.route-meta span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fume-fonce)}
.steps{counter-reset:step}
.step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--ligne)}
.step:last-child{border-bottom:1px solid var(--ligne)}
.step-n{font-family:var(--serif);font-size:26px;color:var(--or);font-style:italic}
.breadcrumb{font-size:12px;color:var(--fume-fonce);letter-spacing:.06em;margin-bottom:20px}
.breadcrumb a{color:var(--fume)}
.breadcrumb a:hover{color:var(--or)}
.related-routes{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.related-routes a{border:1px solid var(--ligne);padding:12px 20px;font-size:12.5px;letter-spacing:.06em}
.related-routes a:hover{border-color:var(--or);color:var(--or)}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.contact-item{border-top:1px solid var(--ligne);padding:22px 0}
.contact-item h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--or);margin-bottom:8px;font-family:var(--sans);font-weight:500}
.contact-item a,.contact-item p{font-family:var(--serif);font-size:19px;color:var(--ivoire)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:20px}}

/* ============ FOOTER ============ */
footer.site{border-top:1px solid var(--ligne);padding:80px 0 32px;position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr .8fr;gap:48px;padding-bottom:56px}
.foot-brand p{margin-top:18px;max-width:32ch;font-size:14px}
.foot-col h4{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:20px;font-weight:500}
.foot-col a,.foot-col li{display:block;font-size:14px;color:var(--fume);margin-bottom:12px}
.foot-col a:hover{color:var(--ivoire)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--ligne);font-size:12px;color:var(--fume-fonce);flex-wrap:wrap;gap:12px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr}}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed;bottom:28px;right:28px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  background:var(--or);color:var(--noir);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .3s ease;
}
.wa-float:hover{transform:scale(1.08)}

/* ============ REVEAL ANIM ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ============ MISC ============ */
.tag-strip{
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  padding:20px 0;overflow:hidden;white-space:nowrap;
}
.tag-strip .track{display:inline-flex;gap:40px;animation:marquee 32s linear infinite}
.tag-strip span{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--fume-fonce);letter-spacing:.04em}
.tag-strip span.hi{color:var(--or)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ SIGNATURE : DIAGRAMME DE TRAJETS ============ */
.route-diagram{border:1px solid var(--ligne);padding:40px 34px;background:linear-gradient(180deg,rgba(74,18,32,.22),transparent)}
.route-diagram .rd-head{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fume-fonce);margin-bottom:34px;display:flex;justify-content:space-between}
.rd-stops{position:relative;padding-left:26px}
.rd-stops::before{content:"";position:absolute;left:5px;top:8px;bottom:14px;width:1px;background:linear-gradient(180deg,var(--or),rgba(198,161,91,.15));transform-origin:top;animation:grow 1.6s cubic-bezier(.6,0,.2,1) forwards}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.rd-stop{position:relative;padding-bottom:30px}
.rd-stop:last-child{padding-bottom:0}
.rd-stop::before{content:"";position:absolute;left:-26px;top:7px;width:11px;height:11px;border:1px solid var(--or);border-radius:50%;background:var(--noir)}
.rd-stop.on::before{background:var(--or)}
.rd-city{font-family:var(--serif);font-size:20px;color:var(--ivoire);line-height:1.2}
.rd-meta{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fume-fonce);margin-top:4px}
.rd-foot{margin-top:32px;padding-top:20px;border-top:1px solid var(--ligne);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}

/* ============ ESTIMATION MAPS ============ */
.est-box{border:1px solid var(--ligne);background:rgba(198,161,91,.05);padding:22px;margin:22px 0}
.est-line{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;color:var(--ivoire-2)}
.est-line span:last-child{color:var(--or-clair);font-family:var(--serif)}
.est-note{font-size:12px;color:var(--fume-fonce);margin-top:10px}
.est-loading{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--or)}
.pac-container{background:var(--noir-2)!important;border:1px solid var(--ligne)!important;border-radius:0!important;font-family:var(--sans)!important;box-shadow:0 12px 30px rgba(0,0,0,.6)!important}
.pac-item{background:var(--noir-2)!important;border-top:1px solid rgba(198,161,91,.12)!important;color:var(--fume)!important;padding:8px 12px!important;cursor:pointer}
.pac-item:hover,.pac-item-selected{background:rgba(198,161,91,.1)!important}
.pac-item-query{color:var(--ivoire)!important}
.pac-icon{display:none!important}
.pac-logo::after{display:none!important}
.err{color:#e08a8a;font-size:12.5px;margin-top:8px}
.ok{color:var(--or);font-size:12.5px;margin-top:8px}
.faq-q{font-family:var(--serif);font-size:18px;color:var(--ivoire);margin-bottom:8px}
.faq-item{border-top:1px solid var(--ligne);padding:24px 0}
.faq-item:last-child{border-bottom:1px solid var(--ligne)}
.prose h2{margin:52px 0 18px}
.prose h3{margin:34px 0 12px}
.prose p{margin-bottom:16px;max-width:70ch}
.prose ul{margin:0 0 20px}
.prose ul li{color:var(--fume);font-size:16px;padding:7px 0 7px 22px;position:relative}
.prose ul li::before{content:"—";position:absolute;left:0;color:var(--or)}
.prose a{color:var(--or-clair);border-bottom:1px solid var(--ligne)}
.prose a:hover{border-color:var(--or)}

/* ============ BILINGUE : SÉLECTEUR DE LANGUE ============ */
.lang-switch{
  border:1px solid var(--ligne);padding:7px 12px;font-size:11px;letter-spacing:.14em;
  color:var(--fume)!important;font-weight:500;
}
.lang-switch:hover{border-color:var(--or);color:var(--or)!important}
.mob-right{display:none;align-items:center;gap:14px}
.mobile-panel .lang-switch{display:none}
@media(max-width:900px){.mob-right{display:flex}.nav-links .lang-switch{display:none}}
.skip{position:absolute;left:-9999px;top:0;background:var(--or);color:var(--noir);padding:12px 20px;z-index:300}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}

/* ============ LOGO RÉEL VELOUR (noir velours sur crème) ============ */
@media(max-width:640px){
}

/* ============ CARROUSEL PHOTO DES GAMMES ============ */
.fleet-photo.has-carousel{position:relative}
.fp-track{
  display:flex;width:100%;height:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
}
.fp-track::-webkit-scrollbar{display:none}
.fp-track > img,.fp-track > picture > img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;scroll-snap-stop:always}
.fp-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border:1px solid var(--ligne);
  background:rgba(12,11,13,.72);color:var(--or-clair);
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease,background .25s ease;
}
.fleet-card:hover .fp-nav,.fp-nav:focus-visible{opacity:1}
.fp-nav:hover{background:var(--or);color:var(--noir);border-color:var(--or)}
.fp-prev{left:12px}.fp-next{right:12px}
.fp-dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:7px}
.fp-dot{
  width:7px;height:7px;border-radius:50%;padding:0;
  border:1px solid rgba(243,238,228,.55);background:transparent;transition:.25s;
}
.fp-dot.on{background:var(--or);border-color:var(--or);transform:scale(1.18)}
@media(hover:none){.fp-nav{display:none}}
@media(prefers-reduced-motion:reduce){.fp-track{scroll-behavior:auto}}

/* ============ CARTE DE GAMME PLEINE LARGEUR (dernière de la grille) ============ */
.fleet-card.wide{grid-column:1 / -1;flex-direction:row;align-items:stretch}
.fleet-card.wide .fleet-body{flex:1;justify-content:center;padding:40px 44px}
.fleet-card.wide .fleet-prices{margin-top:22px;max-width:460px}
@media(max-width:900px){
  .fleet-card.wide{flex-direction:column}
  .fleet-card.wide .fleet-body{padding:26px 30px 34px}
}

/* =======================================================================
   PALETTE VELOUR — crème dominant, sections noires, accent or
   (reprend le code couleur de velourparis.limo)
   ======================================================================= */
html{color-scheme:light;background:var(--creme)}
body{background:var(--creme);color:var(--encre)}
body::before,body::after{display:none}

/* ---- texte ---- */
h1,h2,h3,h4,h5,h6{color:var(--encre)}
h1 em,h2 em,h3 em{color:var(--encre);font-style:italic}
p,li,dd,dt,figcaption,td{color:var(--encre-2)}
.lead,.prose p,.faq-item p,.accord-body p{color:var(--encre-2)}
strong,b{color:var(--encre)}
.eyebrow{color:var(--or-fonce)}
.eyebrow::before{background:var(--or-fonce)}
.hairline,.zone,.why-item,.service,.faq-item,.accord,.contact-item,.price-table th,.price-table td{border-color:var(--ligne)}
.zone:last-child,.why-item:last-child,.faq-item:last-child,.accord:last-child{border-bottom-color:var(--ligne)}

/* ---- en-tête ---- */
header.site{background:rgba(242,232,222,.9);border-bottom:1px solid var(--ligne);backdrop-filter:blur(14px) saturate(120%)}
.nav-links a{color:var(--encre-2)}
.nav-links a:hover,.nav-links a.active{color:var(--encre)}
.nav-links a.active::after{background:var(--or-fonce)}
.nav-cta{background:var(--encre);color:var(--creme)!important;border-color:var(--encre)}
.nav-cta:hover{background:var(--or-fonce);border-color:var(--or-fonce);color:var(--noir)!important}
.lang-switch{border-color:var(--ligne);color:var(--encre-doux)!important}
.lang-switch:hover{border-color:var(--or-fonce);color:var(--or-fonce)!important}
.burger span{background:var(--encre)}
.mobile-panel{background:var(--creme)}
.mobile-panel a{color:var(--encre)}
.skip{background:var(--encre);color:var(--creme)}
:focus-visible{outline-color:var(--or-fonce)}

/* ---- boutons ---- */
.btn-or{background:var(--encre);color:var(--creme)}
.btn-or:hover{background:var(--or-fonce);color:var(--noir)}
.btn-outline{border-color:var(--ligne);color:var(--encre)}
.btn-outline:hover{border-color:var(--encre);background:var(--encre);color:var(--creme)}

/* ---- sections sombres ---- */
section.dark,section.band,.tag-strip.dark{background:var(--noir);border-color:var(--ligne-nuit)}
section.dark h1,section.dark h2,section.dark h3,section.dark h4,
section.band h1,section.band h2,section.band h3{color:var(--sur-noir)}
section.dark h2 em,section.band h2 em{color:var(--or-clair)}
section.dark p,section.dark li,section.band p{color:var(--sur-noir-2)}
section.dark .eyebrow,section.band .eyebrow{color:var(--or-clair)}
section.dark .eyebrow::before,section.band .eyebrow::before{background:var(--or-clair)}
section.dark .btn-outline,section.band .btn-outline{border-color:var(--ligne-nuit);color:var(--sur-noir)}
section.dark .btn-outline:hover,section.band .btn-outline:hover{background:var(--creme);color:var(--noir);border-color:var(--creme)}
section.dark .btn-or,section.band .btn-or{background:var(--or);color:var(--noir)}
section.dark .btn-or:hover,section.band .btn-or:hover{background:var(--or-clair)}
section.dark .service,section.dark .why-item,section.dark .zone{border-color:var(--ligne-nuit)}

/* ---- cartes de gamme : toujours sombres, comme sur le site d'origine ---- */
.fleet-grid{background:var(--ligne-nuit);border-color:var(--ligne-nuit)}
.fleet-card{background:var(--noir-2);transition:background .3s ease}
.fleet-card:hover{background:#171717}
.fleet-card h3{color:var(--sur-noir)}
.fleet-card .fleet-sub{color:var(--sur-noir-2)}
.fleet-card .fleet-prices div{color:var(--sur-noir);border-bottom-color:var(--ligne-nuit)}
.fleet-card .fleet-prices span:last-child{color:var(--or-clair)}
.fleet-card .fleet-tag{color:var(--or-clair)}
.fleet-photo{background:var(--noir);border-bottom-color:var(--ligne-nuit)}
.fleet-photo .fleet-tag{background:rgba(0,0,0,.78);border-color:var(--ligne-nuit)}
.fleet-card .btn-outline{border-color:var(--ligne-nuit);color:var(--sur-noir)}
.fleet-card .btn-outline:hover{background:var(--or);border-color:var(--or);color:var(--noir)}
.fleet-card.wide .fleet-photo{border-right-color:var(--ligne-nuit)}
.fp-nav{background:rgba(0,0,0,.7);color:var(--or-clair);border-color:var(--ligne-nuit)}
.fp-nav:hover{background:var(--or);color:var(--noir);border-color:var(--or)}
.fp-dot{border-color:rgba(242,232,222,.6)}
.fp-dot.on{background:var(--or);border-color:var(--or)}

/* ---- bandeau défilant ---- */
.tag-strip{border-color:var(--ligne);background:var(--creme-2)}
.tag-strip span{color:var(--encre-doux)}
.tag-strip span.hi{color:var(--or-fonce)}

/* ---- formulaires ---- */
.form-card{background:var(--creme-2);border-color:var(--ligne)}
.field label{color:var(--encre-doux)}
.field input,.field select,.field textarea{color:var(--encre);-webkit-text-fill-color:var(--encre);border-bottom-color:var(--ligne)}
.field input::placeholder,.field textarea::placeholder{color:var(--encre-doux);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--or-fonce)}
.field select option{background:var(--creme);color:var(--encre)}
.vehicle-opt{border-color:var(--ligne)}
.vehicle-opt b{color:var(--encre)}
.vehicle-opt span{color:var(--encre-doux)}
.vehicle-opt:hover{border-color:var(--or-fonce)}
.vehicle-opt.sel{border-color:var(--encre);background:rgba(10,10,10,.05)}
.est-box{background:rgba(195,169,114,.12);border-color:var(--ligne)}
.est-line{color:var(--encre-2)}
.est-line span:last-child{color:var(--encre)}
.est-note{color:var(--encre-doux)}
.est-loading{color:var(--or-fonce)}
.total-row{border-top-color:var(--ligne)}
.total-row b{color:var(--encre)}
.included li{color:var(--encre-2)}
.included li::before{color:var(--or-fonce)}
.err{color:#9d2b2b}
.pac-container{background:var(--creme)!important;border-color:var(--ligne)!important;box-shadow:0 12px 30px rgba(0,0,0,.18)!important}
.pac-item{background:var(--creme)!important;border-top-color:var(--ligne)!important;color:var(--encre-2)!important}
.pac-item:hover,.pac-item-selected{background:var(--creme-2)!important}
.pac-item-query{color:var(--encre)!important}

/* récapitulatif de réservation : panneau sombre, comme les cartes de gamme */
#resa-grid aside{background:var(--noir-2);border-color:var(--ligne-nuit)}
#resa-grid aside h3,#resa-grid aside .total-row b{color:var(--sur-noir)}
#resa-grid aside .eyebrow{color:var(--or-clair)}
#resa-grid aside .eyebrow::before{background:var(--or-clair)}
#resa-grid aside .est-line{color:var(--sur-noir-2);border-color:var(--ligne-nuit)}
#resa-grid aside .est-line span:last-child{color:var(--sur-noir)}
#resa-grid aside .total-row{border-top-color:var(--ligne-nuit)}
#resa-grid aside .est-note,#resa-grid aside p{color:var(--sur-noir-2)}
#resa-grid aside .included li{color:var(--sur-noir-2)}
#resa-grid aside .included li::before{color:var(--or-clair)}
#resa-grid aside .btn-or{background:var(--or);color:var(--noir)}
#resa-grid aside .btn-or:hover{background:var(--or-clair)}
#resa-grid aside .hairline{background:var(--ligne-nuit)}

/* ---- tableaux, accordéons, listes ---- */
.price-table th{color:var(--or-fonce)}
.price-table td:not(:first-child),.price-table th:not(:first-child){color:var(--encre)}
.accord-num,.accord-icon{color:var(--or-fonce)}
.zone-city{color:var(--or-fonce)}
.zone-num{color:var(--encre-doux)}
.why-item .mark{color:var(--or-fonce)}
.stat b{color:var(--encre)}
.stat span{color:var(--encre-doux)}
.route-meta div{border-left-color:var(--ligne)}
.route-meta b{color:var(--encre)}
.route-meta span{color:var(--encre-doux)}
.step-n{color:var(--or-fonce)}
.breadcrumb{color:var(--encre-doux)}
.breadcrumb a{color:var(--encre-2)}
.breadcrumb a:hover{color:var(--or-fonce)}
.related-routes a{border-color:var(--ligne);color:var(--encre-2)}
.related-routes a:hover{border-color:var(--encre);background:var(--encre);color:var(--creme)}
.prose a{color:var(--encre);border-bottom-color:var(--or-fonce)}
.prose a:hover{color:var(--or-fonce)}
.prose ul li::before{color:var(--or-fonce)}
.faq-q{color:var(--encre)}
.contact-item h3{color:var(--or-fonce)}
.contact-item a,.contact-item p{color:var(--encre)}
.contact-item a:hover{color:var(--or-fonce)}
.route-diagram{background:var(--creme-2);border-color:var(--ligne)}
.rd-head{color:var(--encre-doux)}
.rd-city{color:var(--encre)}
.rd-meta{color:var(--encre-doux)}
.rd-foot{color:var(--or-fonce);border-top-color:var(--ligne)}
.rd-stop::before{border-color:var(--or-fonce);background:var(--creme-2)}
.rd-stop.on::before{background:var(--or-fonce)}
.rd-stops::before{background:linear-gradient(180deg,var(--or-fonce),rgba(169,141,85,.2))}
.route-caption{color:var(--encre-doux)}

/* ---- pied de page : noir ---- */
footer.site{background:var(--noir);border-top:1px solid var(--ligne-nuit);color:var(--sur-noir)}
footer.site .foot-brand p{color:var(--sur-noir-2)}
.foot-logo{background:transparent;padding:0}
.foot-logo img{height:120px}
.foot-col h4{color:var(--or-clair)}
.foot-col a,.foot-col li{color:var(--sur-noir-2)}
.foot-col a:hover{color:var(--sur-noir)}
.foot-bottom{border-top-color:var(--ligne-nuit);color:#8f8a82}

/* ---- bouton WhatsApp ---- */
.wa-float{background:var(--encre);color:var(--creme);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.wa-float:hover{background:var(--or-fonce);color:var(--noir)}

@media (prefers-color-scheme:dark){
  html,body{background:var(--creme);color:var(--encre)}
  h1,h2,h3,h4,h5,h6{color:var(--encre)}
}


/* accents posés sur les fonds crème-2 : léger renfort de contraste */
.form-card .eyebrow,.form-card .included li::before,.route-diagram .rd-foot,
.tag-strip span.hi{color:#655a3c}
.route-diagram .rd-stop::before{border-color:#655a3c}
.route-diagram .rd-stop.on::before{background:#655a3c}


/* la photo ne doit jamais être déformée ni rognée par une hauteur imposée */
@media(max-width:900px){
}

/* =======================================================================
   PHOTOS DE GAMME — cadre 16:10 garanti
   Technique padding-top : fonctionne même sur les navigateurs intégrés
   (WhatsApp, Instagram, anciens WebView iOS) qui ignorent aspect-ratio.
   ======================================================================= */
.fleet-card{padding:0;display:flex;flex-direction:column;overflow:hidden}

.fleet-photo{
  position:relative;
  display:block;
  width:100%;
  height:0;
  padding-top:62.5%;              /* 10 / 16 */
  overflow:hidden;
  background:var(--noir);
  border-bottom:1px solid var(--ligne-nuit);
}
.fleet-photo > img,.fleet-photo > picture > img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;max-width:none;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.fleet-card:hover .fleet-photo > img,.fleet-card:hover .fleet-photo > picture > img{transform:scale(1.045)}
.fleet-photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.72) 100%);
}
.fleet-photo .fleet-tag{
  position:absolute;left:16px;top:14px;z-index:3;
  background:rgba(0,0,0,.8);padding:6px 12px;border:1px solid var(--ligne-nuit);
}

/* carrousel : la piste occupe le cadre, les images ne débordent jamais */
.fleet-photo .fp-track{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
}
.fleet-photo .fp-track > img,.fleet-photo .fp-track > picture > img{
  flex:0 0 100%;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;max-width:none;
}

.fleet-body{padding:26px 28px 32px;display:flex;flex-direction:column;flex:1}
.fleet-body .fleet-tag{display:inline-block;margin-bottom:10px}
.fleet-body .fleet-prices{margin-top:auto}
.fleet-body h3{margin:0 0 4px}
.fleet-card.no-photo .fleet-body{padding:38px 30px}

/* carte pleine largeur : même cadre 16:10, photo à gauche */
.fleet-card.wide{flex-direction:row;align-items:stretch}
.fleet-card.wide .fleet-photo{
  flex:0 0 48%;height:auto;padding-top:0;align-self:stretch;
  border-bottom:0;border-right:1px solid var(--ligne-nuit);
  min-height:300px;
}
.fleet-card.wide .fleet-body{flex:1;justify-content:center;padding:36px 40px}
@media(max-width:900px){
  .fleet-card.wide{flex-direction:column}
  .fleet-card.wide .fleet-photo{
    flex:none;height:0;padding-top:62.5%;min-height:0;
    border-right:0;border-bottom:1px solid var(--ligne-nuit);
  }
  .fleet-card.wide .fleet-body{padding:26px 28px 32px}
}

/* sécurité générale : aucune image ne dépasse jamais son conteneur */
img{max-width:100%;height:auto}
.fleet-photo img,.fp-track img{height:100%}

/* =======================================================================
   L'EXPÉRIENCE VELOUR — cartes photo + texte
   ======================================================================= */
.xp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
.xp-card{background:var(--noir-2);display:flex;flex-direction:column;overflow:hidden}
.xp-photo{position:relative;display:block;width:100%;height:0;padding-top:62.5%;overflow:hidden;background:var(--noir)}
.xp-photo > img,.xp-photo > picture > img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;max-width:none;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.xp-card:hover .xp-photo > img,.xp-card:hover .xp-photo > picture > img{transform:scale(1.04)}
.xp-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6) 100%)}
.xp-body{padding:30px 32px 36px;display:flex;flex-direction:column;flex:1}
.xp-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-clair);
  font-weight:500;display:block;margin-bottom:12px}
.xp-card h3{color:var(--sur-noir);font-size:clamp(20px,2.1vw,25px);margin-bottom:12px}
.xp-card p{color:var(--sur-noir-2);font-size:15px;line-height:1.7;max-width:52ch}
.xp-card.no-photo .xp-body{padding:40px 34px}
@media(max-width:900px){.xp-grid{grid-template-columns:1fr}.xp-body{padding:26px 26px 32px}}

/* carrousel dans les cartes Expérience */
.xp-photo.has-carousel{position:relative}
.xp-photo .fp-track{position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.xp-photo .fp-track::-webkit-scrollbar{display:none}
.xp-photo .fp-track > img,.xp-photo .fp-track > picture > img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;
  object-position:center;display:block;max-width:none;scroll-snap-align:center;scroll-snap-stop:always}
.xp-card:hover .fp-nav{opacity:1}


/* Expérience Velour : cadre 4:3 — les photos sont des prises verticales,
   le 16:10 en coupait trop. */
.xp-photo{padding-top:75%}                 /* 3 / 4 */
@media(max-width:900px){.xp-photo{padding-top:75%}}

/* mentions légales : tableau d'identité de la société */
.legal-list{margin:22px 0 0;border-top:1px solid var(--ligne)}
.legal-list li{display:flex;justify-content:space-between;gap:24px;padding:13px 0;
  border-bottom:1px solid var(--ligne);font-size:14.5px;color:var(--encre-2)}
.legal-list li span:first-child{color:var(--encre-doux);flex:0 0 auto}
.legal-list li span:last-child{color:var(--encre);text-align:right;font-weight:400}
@media(max-width:560px){
  .legal-list li{flex-direction:column;gap:3px}
  .legal-list li span:last-child{text-align:left}
}

/* ============ RÉSEAUX SOCIAUX (pied de page) ============ */
.foot-social{display:flex;flex-direction:column;gap:12px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--ligne-nuit)}
.foot-social a{display:inline-flex;align-items:center;gap:10px;margin:0;
  color:var(--sur-noir-2);font-size:13.5px;transition:color .25s ease}
.foot-social a:hover{color:var(--or-clair)}
.foot-social svg{flex:0 0 auto;opacity:.9}
.foot-social a:hover svg{opacity:1}

/* ============ BANDEAU PHOTO DE PAGE ============ */
.page-banner{position:relative;display:block;width:100%;height:0;padding-top:38%;
  overflow:hidden;background:var(--noir);border:1px solid var(--ligne)}
.page-banner > img,.page-banner > picture > img{position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;max-width:none}
@media(max-width:640px){.page-banner{padding-top:56%}}

/* ============ GALERIE DE PAGE (3 visuels) ============ */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--ligne);border:1px solid var(--ligne)}
.gal-cell{position:relative;margin:0;display:block;width:100%;height:0;
  padding-top:62.5%;overflow:hidden;background:var(--noir)}
.gal-cell > img,.gal-cell > picture > img{position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;max-width:none;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.gal-cell:hover > img,.gal-cell:hover > picture > img{transform:scale(1.05)}
@media(max-width:640px){.gal-grid{grid-template-columns:1fr 1fr}.gal-cell:last-child{display:none}}

/* =======================================================================
   LOGO VELOUR — vectorisé depuis l'original (marque + mot tracés au contour)
   Une seule forme : elle prend la couleur du texte, reste nette à toute
   taille, et reproduit le logo à l'identique.
   ======================================================================= */
.logo-link{display:inline-flex;align-items:center;text-decoration:none}
.logo-mark{display:inline-flex;align-items:center;color:var(--encre);line-height:0}
.v-logo{height:52px;width:auto;display:block;
  transition:height .45s var(--ease,cubic-bezier(.22,.61,.36,1)),
             transform .55s cubic-bezier(.2,.7,.3,1)}
.logo-link:hover .v-logo{transform:translateY(-2px)}

/* pied de page : logo clair sur fond noir, en plus grand */
.foot-logo{display:inline-block;background:transparent;padding:0}
.foot-logo .logo-mark{color:var(--sur-noir)}
.logo-mark.logo-lg .v-logo{height:112px}

@media(max-width:640px){
  .v-logo{height:42px}
  .logo-mark.logo-lg .v-logo{height:88px}
}


/* WebP avec repli JPEG : <picture> ne doit pas exister dans la mise en page.
   display:contents l'efface du flux — l'image redevient l'enfant effectif
   de son cadre, et carrousels comme grilles fonctionnent normalement.
   NE PAS SUPPRIMER. */
picture{display:contents}

/* =======================================================================
   FLUIDITÉ — rythme, transitions, micro-interactions
   ======================================================================= */

/* ---- 1. Échelle d'espacement fluide ----
   Les marges ne sautent plus par paliers : elles suivent la largeur
   de l'écran en continu, du téléphone au grand écran. */
:root{
  --sp-xl:clamp(72px,9.5vw,140px);
  --sp-lg:clamp(48px,6vw,88px);
  --sp-md:clamp(28px,3.5vw,52px);
  --sp-sm:clamp(16px,2vw,28px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
section{padding:var(--sp-xl) 0}
.section-head,.section-split{margin-bottom:var(--sp-lg)}
.hero{padding-top:calc(84px + var(--sp-lg));padding-bottom:var(--sp-lg)}
.route-hero{padding-top:calc(84px + var(--sp-md));padding-bottom:var(--sp-lg)}
@media(max-width:640px){
  .hero{padding-top:calc(72px + var(--sp-md))}
  .route-hero{padding-top:calc(72px + var(--sp-sm))}
}

/* ---- 2. Apparitions en cascade ----
   Les blocs d'une même grille ne surgissent plus d'un bloc :
   ils se posent l'un après l'autre, à 90 ms d'intervalle. */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none;will-change:auto}
.fleet-grid > .reveal:nth-child(2),.xp-grid > .reveal:nth-child(2),
.services-grid > .reveal:nth-child(2){transition-delay:.09s}
.fleet-grid > .reveal:nth-child(3),.xp-grid > .reveal:nth-child(3),
.services-grid > .reveal:nth-child(3){transition-delay:.18s}
.fleet-grid > .reveal:nth-child(4),.xp-grid > .reveal:nth-child(4),
.services-grid > .reveal:nth-child(4){transition-delay:.27s}
.services-grid > .reveal:nth-child(5){transition-delay:.36s}
.services-grid > .reveal:nth-child(6){transition-delay:.45s}

/* ---- 3. En-tête qui se resserre au défilement ---- */
header.site{transition:height .45s var(--ease),background .45s ease,
  border-color .45s ease,box-shadow .45s ease}
.nav{transition:height .45s var(--ease)}
header.site.condensed .nav{height:64px}
header.site.condensed{box-shadow:0 1px 0 rgba(10,10,10,.06)}
header.site.condensed .v-logo{height:40px}

/* ---- 4. Transition entre les pages ----
   Fondu enchaîné d'une page à l'autre sur les navigateurs récents. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .38s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* ---- 5. Micro-interactions ---- */
.btn{transition:background .35s var(--ease),color .35s var(--ease),
  border-color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-arrow::after{transition:transform .35s var(--ease-out)}
.btn-arrow:hover::after{transform:translateX(6px)}

/* liens de contenu : le trait se déploie au survol */
.prose a{position:relative;border-bottom:0;background-image:linear-gradient(var(--or-fonce),var(--or-fonce));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease-out),color .3s ease}
.prose a:hover{background-size:0 1px;color:var(--or-fonce)}

.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--or-fonce);transition:width .38s var(--ease-out)}
.nav-links a:hover::after{width:100%}
.nav-links a.active::after{width:100%}

.fleet-card,.xp-card{transition:background .4s ease,transform .5s var(--ease)}
.service{transition:border-color .4s ease}
.service:hover{border-top-color:var(--or-fonce)}
.why-item,.zone,.faq-item{transition:border-color .4s ease}
.related-routes a{transition:all .35s var(--ease)}
.related-routes a:hover{transform:translateY(-2px)}

/* ---- 6. Détails ---- */
::selection{background:var(--or);color:var(--noir)}
section.dark ::selection,footer.site ::selection{background:var(--or-clair);color:var(--noir)}
.wa-float{transition:transform .4s var(--ease-out),background .3s ease}
.wa-float:hover{transform:scale(1.09) translateY(-2px)}
.mobile-panel a{transition:color .3s ease,transform .4s var(--ease)}
.mobile-panel a:hover{color:var(--or-fonce);transform:translateX(6px)}

@media(prefers-reduced-motion:reduce){
  .reveal,.btn,.fleet-card,.xp-card,header.site,.nav{transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  @view-transition{navigation:none}
}

/* =======================================================================
   LOGO AGRANDI — l'en-tête s'ajuste à la nouvelle hauteur
   Le logo est un bloc vertical (marque au-dessus du mot) : il lui faut
   de la hauteur pour que les lettres restent lisibles.
   ======================================================================= */
:root{--head-h:104px;--head-h-min:78px}
@media(max-width:900px){:root{--head-h:92px;--head-h-min:74px}}
@media(max-width:640px){:root{--head-h:84px;--head-h-min:70px}}

.nav{height:var(--head-h)}
header.site.condensed .nav{height:var(--head-h-min)}
.hero{padding-top:calc(var(--head-h) + var(--sp-lg))}
.route-hero{padding-top:calc(var(--head-h) + var(--sp-md))}
@media(max-width:640px){
  .hero{padding-top:calc(var(--head-h) + var(--sp-md))}
  .route-hero{padding-top:calc(var(--head-h) + var(--sp-sm))}
}

/* en-tête */
.v-logo{height:76px}
header.site.condensed .v-logo{height:58px}
@media(max-width:900px){
  .v-logo{height:66px}
  header.site.condensed .v-logo{height:54px}
}
@media(max-width:640px){
  .v-logo{height:60px}
  header.site.condensed .v-logo{height:50px}
}

/* pied de page */
.logo-mark.logo-lg .v-logo{height:170px}
@media(max-width:900px){.logo-mark.logo-lg .v-logo{height:140px}}
@media(max-width:640px){.logo-mark.logo-lg .v-logo{height:120px}}

/* le panneau mobile décalé sous l'en-tête agrandi */
.mobile-panel{padding-top:calc(var(--head-h) + 20px)}

/* ---- Logo : seconde augmentation ---- */
:root{--head-h:126px;--head-h-min:94px}
@media(max-width:900px){:root{--head-h:110px;--head-h-min:86px}}
@media(max-width:640px){:root{--head-h:98px;--head-h-min:80px}}

.v-logo{height:98px}
header.site.condensed .v-logo{height:72px}
@media(max-width:900px){
  .v-logo{height:84px}
  header.site.condensed .v-logo{height:64px}
}
@media(max-width:640px){
  .v-logo{height:74px}
  header.site.condensed .v-logo{height:60px}
}

.logo-mark.logo-lg .v-logo{height:230px}
@media(max-width:900px){.logo-mark.logo-lg .v-logo{height:190px}}
@media(max-width:640px){.logo-mark.logo-lg .v-logo{height:155px}}

/* =======================================================================
   EN-TÊTE DE PAGE — logo en grand, puis le titre
   Le logo devient l'entrée du site ; la barre de navigation s'efface
   au profit d'une signature large et centrée.
   ======================================================================= */

/* la barre du haut n'a plus besoin d'un grand logo : le hero le porte */
:root{--head-h:88px;--head-h-min:70px}
@media(max-width:900px){:root{--head-h:80px;--head-h-min:66px}}
@media(max-width:640px){:root{--head-h:72px;--head-h-min:62px}}
.v-logo{height:60px}
header.site.condensed .v-logo{height:48px}
@media(max-width:900px){.v-logo{height:54px}header.site.condensed .v-logo{height:46px}}
@media(max-width:640px){.v-logo{height:48px}header.site.condensed .v-logo{height:42px}}

/* --- hero centré --- */
.hero-center{text-align:center}
.hero-center .wrap{display:flex;flex-direction:column;align-items:center;width:100%}
.hero-logo{margin-bottom:clamp(26px,3.4vw,44px)}
.logo-mark.logo-hero{color:var(--encre)}
.logo-mark.logo-hero .v-logo{
  height:clamp(150px,19vw,270px);
  transition:none;
}
.logo-link:hover .logo-hero .v-logo{transform:none}

.hero-center .eyebrow{justify-content:center}
.hero-center .eyebrow::before{display:none}
.hero-center h1{margin:20px 0 26px;max-width:16ch}
.hero-center .lead{max-width:60ch;margin:0 auto;text-align:center}
.hero-center .hero-actions{justify-content:center;margin-top:clamp(30px,3.6vw,44px)}

/* le diagramme des villes passe sous le titre, centré et resserré */
.hero-center .hero-map{
  order:0;margin:clamp(48px,6vw,84px) auto 0;
  width:100%;max-width:440px;
}
.hero-center .route-diagram{text-align:left}

@media(max-width:640px){
  .hero-center h1{max-width:none}
  .hero-center .hero-map{max-width:none}
}

/* =======================================================================
   VISUEL DU VÉHICULE SÉLECTIONNÉ (page de réservation)
   ======================================================================= */
.veh-preview{
  position:relative;display:block;width:100%;height:0;padding-top:62.5%;
  overflow:hidden;background:var(--noir);border:1px solid var(--ligne-nuit);
  margin-bottom:24px;
}
.veh-preview > picture > img,.veh-preview > img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;max-width:none;
  opacity:1;transform:scale(1);
  transition:opacity .32s ease,transform .7s cubic-bezier(.2,.7,.3,1);
}
.veh-preview.swap > picture > img,.veh-preview.swap > img{opacity:0;transform:scale(1.04)}
.veh-preview::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.72) 100%);
}
.veh-preview-tag{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or-clair);font-weight:500;
}
@media(prefers-reduced-motion:reduce){
  .veh-preview > picture > img{transition:none}
}

/* champ décisif du formulaire : celui qui déclenche le calcul */
.field-key{
  background:rgba(195,169,114,.13);
  border:1px solid var(--or-fonce);
  padding:18px 18px 14px;margin-top:6px;
}
.field-key label{color:var(--or-fonce);font-weight:500}
.field-key input{border-bottom-color:rgba(113,98,66,.45);font-size:17px}
.field-hint{display:block;margin-top:9px;font-size:12px;line-height:1.5;color:var(--encre-doux)}

/* =======================================================================
   PIED DE PAGE EN CRÈME
   Le logo doit apparaître comme sur l'original : noir velours sur crème.
   Le bloc entier bascule donc du noir au fond de la marque.
   ======================================================================= */
footer.site{
  background:var(--creme);
  color:var(--encre);
  border-top:1px solid var(--ligne);
}
footer.site .foot-brand p{color:var(--encre-2)}
footer.site .foot-logo .logo-mark{color:var(--encre)}
footer.site .foot-col h4{color:var(--or-fonce)}
footer.site .foot-col a,footer.site .foot-col li{color:var(--encre-2)}
footer.site .foot-col a:hover{color:var(--encre)}
footer.site .foot-social{border-top-color:var(--ligne)}
footer.site .foot-social a{color:var(--encre-2)}
footer.site .foot-social a:hover{color:var(--or-fonce)}
footer.site .foot-bottom{border-top-color:var(--ligne);color:var(--encre-doux)}
footer.site ::selection{background:var(--or);color:var(--noir)}

/* la section sombre qui précède ne doit plus se fondre dans le pied de page */
section.dark + footer.site,section.band + footer.site{border-top:0}

/* =======================================================================
   ERGONOMIE — sélecteur illustré, FAQ dépliable, barre de réservation
   ======================================================================= */

/* ---- Sélecteur de véhicule : vignette + libellé, cible tactile large ---- */
.vehicle-pick{grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.vehicle-pick{grid-template-columns:1fr 1fr}}
.vehicle-opt{
  display:grid;grid-template-columns:96px 1fr 26px;align-items:center;gap:14px;
  padding:10px 12px 10px 10px;min-height:76px;
  border:1px solid var(--ligne);background:transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.vehicle-opt:hover{transform:translateY(-1px)}
.vehicle-opt.sel{border-color:var(--encre);background:rgba(10,10,10,.045)}
.vo-thumb{position:relative;display:block;width:96px;height:0;padding-top:60px;
  overflow:hidden;background:var(--noir-2)}
.vo-thumb > picture > img,.vo-thumb > img{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.vo-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vo-tag{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--or-fonce);font-weight:500}
.vehicle-opt b{font-family:var(--serif);font-size:15.5px;font-weight:500;color:var(--encre);
  margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vo-price{font-size:11.5px;color:var(--encre-doux);line-height:1.4}
.vo-check{width:20px;height:20px;border:1px solid var(--ligne);border-radius:50%;
  position:relative;transition:all .3s var(--ease);justify-self:end}
.vehicle-opt.sel .vo-check{border-color:var(--encre);background:var(--encre)}
.vehicle-opt.sel .vo-check::after{
  content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;
  border:solid var(--creme);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}

/* ---- FAQ dépliable : on scanne les questions, on ouvre ce qui intéresse ---- */
.faq-item{border-top:1px solid var(--ligne);padding:0}
.faq-item:last-child{border-bottom:1px solid var(--ligne)}
.faq-item > summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  justify-content:space-between;gap:20px;padding:22px 0;
  font-family:var(--serif);font-size:17.5px;color:var(--encre);
  transition:color .3s ease;
}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary:hover{color:var(--or-fonce)}
.faq-ico{flex:0 0 auto;width:16px;height:16px;position:relative;margin-top:5px}
.faq-ico::before,.faq-ico::after{
  content:"";position:absolute;background:var(--or-fonce);
  transition:transform .35s var(--ease),opacity .35s var(--ease)}
.faq-ico::before{left:0;top:7.5px;width:16px;height:1.4px}
.faq-ico::after{left:7.3px;top:0;width:1.4px;height:16px}
.faq-item[open] .faq-ico::after{transform:rotate(90deg);opacity:0}
.faq-item > p{padding:0 40px 24px 0;max-width:70ch;animation:faq-in .35s var(--ease) both}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}}

/* ---- Barre de réservation collée en bas, sur mobile ---- */
.book-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(242,232,222,.96);backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--ligne);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.book-bar.on{transform:none}
.book-bar-sum{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.book-bar-sum span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-doux)}
.book-bar-sum b{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--encre)}
.book-bar .btn{padding:14px 26px;flex:0 0 auto}
@media(max-width:980px){
  .book-bar{display:flex}
  body.has-bookbar{padding-bottom:84px}
  .wa-float{bottom:96px}
}

/* ---- Retour en haut ---- */
.to-top{
  position:fixed;right:28px;bottom:96px;z-index:90;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ligne);background:rgba(242,232,222,.92);
  color:var(--encre);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s ease;
}
.to-top.on{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--encre);color:var(--creme);border-color:var(--encre)}
@media(max-width:980px){.to-top{right:20px;bottom:150px}}

/* ---- Confort tactile général ---- */
@media(max-width:640px){
  .btn{padding:16px 24px}
  .field input,.field select,.field textarea{font-size:16px;padding:12px 2px}
  .nav-cta{padding:11px 18px}
}

/* =======================================================================
   LOGO PHOTOGRAPHIQUE — velours noir sur papier crème
   Le fond de l'image est calé sur --creme : aucun cadre ne doit apparaître.
   Les surfaces qui accueillent le logo doivent donc être opaques.
   ======================================================================= */
img.v-logo{
  height:98px;width:auto;display:block;max-width:none;
  transition:height .45s var(--ease),transform .55s cubic-bezier(.2,.7,.3,1);
}
.logo-link:hover img.v-logo{transform:translateY(-2px)}
header.site.condensed img.v-logo{height:72px}
@media(max-width:900px){
  img.v-logo{height:84px}
  header.site.condensed img.v-logo{height:64px}
}
@media(max-width:640px){
  img.v-logo{height:74px}
  header.site.condensed img.v-logo{height:60px}
}
.logo-mark.logo-lg img.v-logo{height:230px}
@media(max-width:900px){.logo-mark.logo-lg img.v-logo{height:190px}}
@media(max-width:640px){.logo-mark.logo-lg img.v-logo{height:155px}}
.logo-mark.logo-hero img.v-logo{height:clamp(180px,22vw,320px);transition:none}
.logo-link:hover .logo-hero img.v-logo{transform:none}

/* fond opaque là où le logo se pose, sinon le rectangle se verrait */
header.site{background:var(--creme)}
header.site.condensed{background:var(--creme)}
footer.site,.hero{background:var(--creme)}

/* le logo respire un peu plus dans l'en-tête sur petit écran */
@media(max-width:640px){
  img.v-logo{height:66px}
  header.site.condensed img.v-logo{height:56px}
}

/* bandeau palaces : carrousel large, sur la page mise à disposition */
.palace-band{padding-top:62.5%;border:1px solid var(--ligne-nuit)}
@media(min-width:900px){.palace-band{padding-top:46%}}
.palace-band::after{background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.5) 100%)}

/* bandeau palaces : carrousel large, sur la page mise à disposition */
.palace-band{padding-top:62.5%;border:1px solid var(--ligne-nuit)}
@media(min-width:900px){.palace-band{padding-top:46%}}
.palace-band .fp-dots{bottom:16px}

/* =======================================================================
   GRILLE DE LIEUX — palaces et aviation d'affaires
   Portraits pleine hauteur : la photo n'est plus recadrée par le cadre.
   ======================================================================= */
.venue-grid{display:grid;grid-template-columns:1fr;gap:2px;
  background:var(--ligne-nuit);border:1px solid var(--ligne-nuit)}
@media(min-width:700px){.venue-grid{grid-template-columns:repeat(3,1fr)}}
.venue{margin:0;position:relative;background:var(--noir)}
.venue-img{position:relative;display:block;width:100%;height:0;padding-top:125%;overflow:hidden}
.venue-img > picture > img,.venue-img > img{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  object-position:center;display:block;max-width:none;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.venue:hover .venue-img > picture > img{transform:scale(1.04)}
.venue figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:44px 18px 16px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or-clair);font-weight:500;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))}
@media(max-width:699px){
  .venue-img{padding-top:112%}
  .venue figcaption{font-size:10px;padding:40px 16px 14px}
}

/* grille à deux colonnes, pour les sections qui n'ont que deux visuels */
@media(min-width:700px){.venue-grid.venue-grid-2{grid-template-columns:repeat(2,1fr)}}

/* série de cinq visuels : une bande qui s'adapte à la largeur */
@media(min-width:700px){
  .venue-grid.venue-grid-5{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
}

/* un seul visuel : la grille se resserre et se centre */
@media(min-width:700px){
  .venue-grid.venue-grid-1{grid-template-columns:minmax(0,420px);justify-content:center}
}

/* ============ BANDEAU D'AÉROPORT (panoramique) ============ */
.airport-band{position:relative;margin:0;display:block;width:100%;height:0;
  padding-top:56.25%;overflow:hidden;background:var(--noir);border:1px solid var(--ligne)}
@media(min-width:900px){.airport-band{padding-top:42%}}
.airport-band > picture > img,.airport-band > img{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  object-position:center;display:block;max-width:none}
.airport-band figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:52px 20px 16px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-clair);
  font-weight:500;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}

/* photo affichée entière : le cadre s'élargit, l'image n'est pas rognée */
@media(min-width:700px){
  .venue-grid.venue-grid-1{grid-template-columns:minmax(0,620px)}
}
.venue-grid-1 .venue-img > picture > img{object-fit:cover}

/* plusieurs langues : les sélecteurs se suivent sans se coller */
.lang-switch + .lang-switch{margin-left:6px}
@media(max-width:640px){
  .mob-right .lang-switch{padding:7px 9px;font-size:10.5px}
}

/* ============ SÉLECTEUR DE LANGUE COMPACT ============
   Six versions : une rangée de liens saturait l'en-tête mobile.
   Un bouton qui déplie la liste, sans script.                        */
.lang-menu{position:relative;flex:0 0 auto}
.lang-menu > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  border:1px solid var(--ligne);padding:9px 12px;
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.14em;
  color:var(--encre-2);background:transparent;transition:border-color .3s var(--ease),color .3s var(--ease)}
.lang-menu > summary::-webkit-details-marker{display:none}
.lang-menu > summary:hover{border-color:var(--or);color:var(--encre)}
.lang-caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;transition:transform .3s var(--ease)}
.lang-menu[open] > summary{border-color:var(--or);color:var(--encre)}
.lang-menu[open] .lang-caret{transform:rotate(180deg)}
.lang-list{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:86px;
  display:flex;flex-direction:column;
  background:var(--creme);border:1px solid var(--ligne);
  box-shadow:0 12px 34px rgba(0,0,0,.14)}
.lang-list a{
  padding:10px 14px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.14em;
  color:var(--encre-2);text-decoration:none;border-bottom:1px solid var(--ligne);
  transition:background .25s var(--ease),color .25s var(--ease)}
.lang-list a:last-child{border-bottom:none}
.lang-list a:hover{background:var(--creme-2);color:var(--encre)}
@media(max-width:640px){
  .lang-menu > summary{padding:8px 10px;font-size:10.5px}
}