/* =============================================================
   VULABA — ALIGNEMENT SUR LA MAQUETTE (VULABA_maquette_interactive.html)
   Chargé EN DERNIER (après vulaba.css et vulaba-voyage.css) par _vb_theme.php.
   Valeurs reprises telles quelles de la maquette : palette, en-tête sur une ligne,
   hero, pastilles, bénéfices, boutons, titres de section, cartes.
   ============================================================= */
:root {
  --vb-navy: #10283b; --vb-ink: #10283b; --vb-navy-2: #174363;
  --vb-orange: #f97345; --vb-action: #f97345; --vb-action-hover: #e96132; --vb-orange-ink: #c8502e; --vb-orange-soft: #fff0e8;
  --vb-blue: #168ec8; --vb-blue-ink: #117ba7; --vb-blue-soft: #edf6f8;
  --vb-soft: #f8f8f5; --vb-bg: #f8f8f5; --vb-line: #DCE8F1; --vb-muted: #9DB6C8; --vb-lime: #f97345;
}
html, body.vb-site, body.vb-site .vb-page, body.vb-site .vb-home { background: #0B2940; }
body.vb-site { color: #FFFFFF; }

/* ---------- En-tête : une seule ligne, logo · menu centré · actions (77 px) ---------- */
body.vb-site .site-header { box-shadow: none; background: rgba(16,53,80,0.97) !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
body.vb-site .site-header .header-inner { height: 77px !important; max-width: 1450px; margin: 0 auto; padding: 0 25px; display: flex; align-items: center; gap: 20px; }
body.vb-site .site-header .header-logo { flex: 0 0 auto; min-width: 194px; }
body.vb-site .vb-logo-mark { height: 38px; }
body.vb-site .vb-logo-text { height: 20px; }
body.vb-site .site-header.header-menu-inline .header-inner .header-nav { flex: 1 1 auto; display: flex; justify-content: center; gap: 2px; margin: 0; min-width: 0; }
body.vb-site .site-header.header-menu-inline .header-inner .header-nav a {
  padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 750; color: #FFFFFF; background: transparent; white-space: nowrap; height: auto; line-height: 1.2; border: 0;
}
body.vb-site .site-header.header-menu-inline .header-inner .header-nav a::after { display: none; }
body.vb-site .site-header.header-menu-inline .header-inner .header-nav a:hover,
body.vb-site .site-header.header-menu-inline .header-inner .header-nav a.active { background: #16405F; color: #6AC8EF; }
body.vb-site .site-header .header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; margin-left: 0 !important; }
body.vb-site .site-header .wl-search-mobile-btn,
body.vb-site .site-header .wl-notif-btn,
body.vb-site .site-header .wl-msg-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: #103550; color: #FFFFFF; }
body.vb-site .site-header .btn-login { height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12) !important; background: #103550 !important; color: #FFFFFF !important; font-size: 13px; font-weight: 800; }
@media (min-width: 961px) { body.vb-site .site-header .btn-login svg { display: none; } }
@media (max-width: 960px) { body.vb-site .site-header .btn-login { width: 40px; padding: 0 !important; justify-content: center; } }
/* « + Mon voyage » : orange de la maquette, texte blanc (le thème hérité forçait un texte bleu nuit) */
body.vb-site .site-header .vb-pub-cta,
body.vb-site .vb-pub-cta { height: 40px; padding: 0 16px; border-radius: 12px; background: #f97345 !important; color: #fff !important; font-size: 13px; font-weight: 800; box-shadow: none; gap: 6px; }
body.vb-site .vb-pub-cta:hover { background: #e96132 !important; transform: translateY(-2px); }
@media (max-width: 1210px) {
  body.vb-site .site-header .header-logo { min-width: 160px; }
  body.vb-site .site-header.header-menu-inline .header-inner .header-nav a { padding: 9px 8px; font-size: 12px; }
}
@media (max-width: 960px) {
  body.vb-site .site-header .header-inner { height: 68px !important; padding: 0 18px; }
  body.vb-site .site-header.header-menu-inline .header-inner .header-nav { display: none; }
  body.vb-site .site-header .header-logo { min-width: 0; }
}
body.vb-site .vb-preview-bar { background: #16405F; color: #FFFFFF; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 400; padding: 10px 20px; }

/* ---------- Boutons (maquette .btn) ---------- */
body.vb-site .vb-btn { height: auto; min-height: 44px; padding: 12px 19px; border-radius: 13px; font-weight: 800; font-size: 15px; box-shadow: none; }
body.vb-site .vb-btn-lg { padding: 14px 24px; font-size: 16px; }
body.vb-site .vb-btn-orange, body.vb-site .vb-follow { background: #f97345; color: #fff; }
body.vb-site .vb-btn-orange:hover, body.vb-site .vb-follow:hover { background: #e96132; color: #fff; transform: translateY(-2px); }
body.vb-site .vb-follow.is-on { background: #103550; color: #6AC8EF; border: 1px solid rgba(255,255,255,.12); }
body.vb-site .vb-btn-line { background: #103550; color: #FFFFFF; border: 1px solid rgba(255,255,255,.12); }
body.vb-site .vb-btn-line:hover { background: #0B2940; color: #FFFFFF; }
body.vb-site .vb-btn-blue { background: #168ec8; color: #fff; }
body.vb-site .vb-btn-blue:hover { background: #117aaf; }

/* ---------- Hero (maquette .hero) ---------- */
body.vb-site .vb-homehero { grid-template-columns: minmax(0, 1fr); background: #0B2940; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; min-height: 460px; position: relative; }
@media (min-width: 951px) { body.vb-site .vb-homehero { grid-template-columns: 44% 56%; } }
body.vb-site .vb-homehero-txt { padding: 58px 40px 48px 59px; }
@media (max-width: 950px) { body.vb-site .vb-homehero-txt { padding: 40px 28px; } }
@media (max-width: 600px) { body.vb-site .vb-homehero-txt { padding: 33px 23px; } body.vb-site .vb-homehero { border-radius: 19px; } }
body.vb-site .vb-homehero .vb-eyebrow-line { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .11em; font-weight: 900; color: #6ACCF0; margin: 0; }
body.vb-site .vb-homehero .vb-eyebrow-line::before { width: 25px; margin: 0; background: #f97345; }
body.vb-site .vb-homehero-txt h1 { font-size: clamp(40px, 4.6vw, 70px); line-height: 1.05; letter-spacing: -.045em; font-weight: 800; color: #FFFFFF; margin: 14px 0 15px; max-width: 590px; }
@media (max-width: 600px) { body.vb-site .vb-homehero-txt h1 { font-size: 40px; } }
body.vb-site .vb-homehero-txt h1 .vb-hl-orange { color: #f97345; }
body.vb-site .vb-homehero-lead { max-width: 505px; font-size: 16px; line-height: 1.7; color: #B8CEDC; margin-bottom: 0; }
body.vb-site .vb-homehero-cta { margin: 21px 0 0; gap: 9px; }
body.vb-site .vb-homehero-chips { margin-top: 21px; gap: 9px; }
body.vb-site .vb-homehero-chips li { padding: 9px 12px; border-radius: 12px; background: #103550; border: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #B8CEDC; font-weight: 700; }
body.vb-site .vb-homehero-visual { min-height: 470px; background: linear-gradient(155deg, #93dce1, #346a8b); }
body.vb-site .vb-homehero-visual::before { display: none; }
body.vb-site .vb-homehero-visual::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0B2940 0%, transparent 18%, transparent 77%, #0d30402b); pointer-events: none; }
body.vb-site .vb-homehero-visual img { object-position: center 46%; filter: saturate(1.09); }
@media (max-width: 950px) {
  body.vb-site .vb-homehero-visual { min-height: 330px; height: 330px; }
  body.vb-site .vb-homehero-visual::after { background: linear-gradient(180deg, #0B2940 0%, transparent 14%); }
}
@media (max-width: 600px) { body.vb-site .vb-homehero-visual { min-height: 264px; height: 264px; } }
body.vb-site .vb-homehero-float { z-index: 2; border-radius: 14px; padding: 13px; box-shadow: 0 16px 42px #103e4860; left: 6%; bottom: 11%; transform: rotate(-5deg); }

/* ---------- Bénéfices (maquette .feature-strip) ---------- */
body.vb-site .vb-values { gap: 14px; margin-top: 20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1210px) { body.vb-site .vb-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { body.vb-site .vb-values { grid-template-columns: 1fr; } }
body.vb-site .vb-values li { padding: 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); column-gap: 13px; }
body.vb-site .vb-values b { font-size: 13px; }
body.vb-site .vb-values small { font-size: 12px; color: #B8CEDC; }
body.vb-site .vb-values-ic, body.vb-site .vb-values-ic-blue { width: 44px; height: 44px; border-radius: 13px; background: #0B2940; font-size: 24px; }

/* ---------- Titres de section, surtitres, cartes (maquette .section-head, .eyebrow, .card) ---------- */
body.vb-site .vb-eyebrow { font-size: 11px; font-weight: 850; letter-spacing: .18em; color: #6BC4EE; }
body.vb-site .vb-sec { margin-top: 52px; }
body.vb-site .vb-sec-title, body.vb-site .vb-h2 { font-size: clamp(26px, 2.7vw, 39px); line-height: 1.13; letter-spacing: -.045em; font-weight: 800; color: #FFFFFF; }
body.vb-site .vb-sec-more { color: #6EC2EC; font-weight: 800; font-size: 13px; }
body.vb-site .vb-tcard, body.vb-site .vb-cur, body.vb-site .vb-reco, body.vb-site .vb-trav,
body.vb-site .vb-dest, body.vb-site .vb-panel { border-color: rgba(255,255,255,.12); border-radius: 20px; box-shadow: 0 5px 25px rgba(0,0,0,0.062); }
body.vb-site .vb-wrap { max-width: 1420px; padding: 0 26px; }
@media (max-width: 950px) { body.vb-site .vb-wrap { padding: 0 15px; } }
body.vb-site .vb-home, body.vb-site .vb-page { padding-top: 26px; }
body.vb-site .vb-phead-v2 h1, body.vb-site .vb-phead h1 { font-size: 46px; letter-spacing: -.045em; font-weight: 800; color: #FFFFFF; }
@media (max-width: 600px) { body.vb-site .vb-phead-v2 h1, body.vb-site .vb-phead h1 { font-size: 36px; } }

/* ---------- Footer (maquette .footer : bleu nuit #75B5E5, texte blanc) ---------- */
body.vb-site .site-footer { background: #0b273c !important; color: #fff; border-top: 0; padding: 43px 0 28px; margin-top: 10px; }
body.vb-site .site-footer .footer-inner { max-width: 1420px; margin: 0 auto; padding: 0 26px; }
body.vb-site .site-footer .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; align-items: start; }
@media (max-width: 950px) { body.vb-site .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { body.vb-site .site-footer .footer-grid { grid-template-columns: 1fr; } }
body.vb-site .site-footer h4 { color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 850; margin: 6px 0 14px; }
body.vb-site .site-footer ul { list-style: none; margin: 0; padding: 0; }
body.vb-site .site-footer li { margin: 0 0 9px; }
body.vb-site .site-footer a { color: #c9dbe4; font-size: 14px; text-decoration: none; }
body.vb-site .site-footer a:hover { color: #fff; text-decoration: underline; }
body.vb-site .site-footer .footer-brand p { color: #8eafbd; font-size: 13px; line-height: 1.6; max-width: 320px; margin: 12px 0 16px; }
body.vb-site .site-footer .vb-foot-tagline { color: #8eafbd; letter-spacing: .16em; font-size: 11px; text-transform: uppercase; display: block; margin-top: 8px; }
body.vb-site .site-footer .vb-logo-foot .vb-logo-mark { height: 38px; } body.vb-site .site-footer .vb-logo-foot .vb-logo-text { height: 20px; }
body.vb-site .site-footer .vb-foot-help { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: rgba(16,53,80,0.08) !important; border: 1px solid rgba(255,255,255,.14); color: #fff !important; box-shadow: none !important; font-weight: 800; }
body.vb-site .site-footer .vb-foot-help small { display: none; }
body.vb-site .site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-top: 18px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
body.vb-site .site-footer .footer-bottom p { color: #8eafbd; font-size: 12px; margin: 0; }
body.vb-site .site-footer .footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
body.vb-site .site-footer .footer-bottom-links a { font-size: 12px; color: #8eafbd; }
body.vb-site .site-footer .footer-license { border-top: 1px solid rgba(255,255,255,.08) !important; color: #B8CEDC !important; font-size: 11px; }
body.vb-site .site-footer .footer-license a { color: #8eafbd !important; font-size: 11px; }

/* ---------- Hero : image 16:9 (1672×941) ---------- */
/* Desktop : texte 42 % / image 58 % pour approcher le 16:9 ; recadrage décalé à droite (cartes des voyageurs
   conservées, le bord gauche est sous le fondu). Tablette/mobile : image sous le texte, 16:9 sans recadrage. */
@media (min-width: 1100px) {
  body.vb-site .vb-homehero { grid-template-columns: 42% 58%; min-height: 0; }
  body.vb-site .vb-homehero-txt { padding: 40px 32px 40px 48px; }
  body.vb-site .vb-homehero-txt h1 { font-size: clamp(38px, 3.8vw, 58px); margin: 12px 0 12px; }
  body.vb-site .vb-homehero-lead { font-size: 15.5px; line-height: 1.65; }
  body.vb-site .vb-homehero-cta { margin-top: 18px; }
  body.vb-site .vb-homehero-chips { margin-top: 16px; }
  body.vb-site .vb-homehero-visual { min-height: 0; }
  body.vb-site .vb-homehero-visual img { object-position: 85% 50%; }
  body.vb-site .vb-homehero-visual::after { background: linear-gradient(90deg, #0B2940 0%, rgba(16,53,80,0) 14%); }
}
@media (max-width: 1099px) {
  body.vb-site .vb-homehero { grid-template-columns: minmax(0, 1fr); }
  body.vb-site .vb-homehero-visual { min-height: 0 !important; height: auto !important; aspect-ratio: 1672 / 941; }
  body.vb-site .vb-homehero-visual::after { background: linear-gradient(180deg, #0B2940 0%, rgba(16,53,80,0) 10%); }
  body.vb-site .vb-homehero-visual img { object-position: center; }
}
/* La carte « vrai carnet » ne doit pas masquer les cartes de l'illustration : en bas à gauche, sur la voyageuse */
body.vb-site .vb-homehero-float { left: 3%; bottom: 5%; max-width: 280px; }
@media (max-width: 1099px) { body.vb-site .vb-homehero-float { display: none; } }
@media (min-width: 1500px) { body.vb-site .vb-homehero-chips { flex-wrap: nowrap; } body.vb-site .vb-homehero-chips li { white-space: nowrap; } }