/* Voyages Cortoba — design system (phase 2)
   Deep green, gold, off-white; Islamic geometric patterns. No build step: plain CSS. */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-italic-latin-var.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("../fonts/mulish-latin-var.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  --green-950: #0B2E24;
  --green-900: #0F3B2E;
  --green-800: #12402F;
  --green-700: #1B5240;
  --green-100: #E3ECE6;
  --gold-500: #C9A24B;
  --gold-400: #D9B968;
  --gold-300: #E2C989;
  --gold-text: #8A6516;   /* gold that passes contrast on light backgrounds */
  --cream: #FAF6EE;
  --sand: #F2EADB;
  --sand-line: #E4D8C2;
  --ink: #1E2622;
  --muted: #59625D;
  --white: #FFFFFF;
  --danger: #9B2C2C;
  --ok: #1F6B48;

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Mulish", "Segoe UI", system-ui, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(11, 46, 36, .06), 0 8px 24px rgba(11, 46, 36, .08);
  --shadow-lg: 0 2px 4px rgba(11, 46, 36, .06), 0 18px 48px rgba(11, 46, 36, .16);
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Eight-pointed star lattice (gold line), tiled as a background. */
  --pattern-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C9A24B' stroke-width='1'%3E%3Cpath d='M40 14l7.6 18.4L66 40l-18.4 7.6L40 66l-7.6-18.4L14 40l18.4-7.6z'/%3E%3Cpath d='M21.6 21.6h36.8v36.8H21.6z' transform='rotate(45 40 40)'/%3E%3Cpath d='M21.6 21.6h36.8v36.8H21.6z'/%3E%3Cpath d='M0 0l14 14M80 0L66 14M0 80l14-14M80 80L66 66'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: var(--green-700); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--green-950); }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--green-950); margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold-500); color: var(--green-950); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--sand { background: var(--sand); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: .4em 0 0; color: var(--muted); max-width: 52ch; }
.eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 800; color: var(--gold-text); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.lead { font-size: 1.18rem; color: var(--muted); max-width: 60ch; }
.ornament { display: flex; align-items: center; gap: 12px; color: var(--gold-500); margin: 0 0 18px; }
.ornament::before, .ornament::after { content: ""; height: 1px; width: 40px; background: currentColor; opacity: .7; }
.ornament svg { width: 16px; height: 16px; }

/* ---------- Buttons ---------- */
.btn { --bg: var(--gold-500); --fg: var(--green-950); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1.5px solid var(--bg); background: var(--bg); color: var(--fg); font: 700 .98rem/1.2 var(--font-body); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, box-shadow .2s, color .2s; }
.btn:hover { --bg: var(--gold-400); color: var(--fg); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201, 162, 75, .32); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--green { --bg: var(--green-800); --fg: var(--cream); }
.btn--green:hover { --bg: var(--green-700); box-shadow: 0 8px 20px rgba(15, 59, 46, .25); }
.btn--ghost { background: transparent; --fg: var(--cream); border-color: rgba(250, 246, 238, .55); }
.btn--ghost:hover { background: rgba(250, 246, 238, .1); --bg: rgba(250, 246, 238, .1); border-color: var(--gold-400); box-shadow: none; }
.btn--outline { background: transparent; --fg: var(--green-800); border-color: var(--green-800); }
.btn--outline:hover { background: var(--green-800); color: var(--cream); --bg: var(--green-800); box-shadow: none; }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: .9rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--green-800); }
.link-arrow svg { width: 18px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Demo banner & badges ---------- */
.demo-banner { background: repeating-linear-gradient(-45deg, #F7E9C4 0 14px, #F3E1B2 14px 28px); color: #4A3A10; font-size: .88rem; font-weight: 600; text-align: center; padding: 7px var(--gutter); border-bottom: 1px solid #E2C989; }
.demo-banner svg { display: inline; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.badge-demo { display: inline-flex; align-items: center; gap: 6px; background: #FFF4D6; color: #5A4511; border: 1px dashed #B8913A; font: 800 .72rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px; border-radius: 999px; }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state--open { color: var(--ok); background: #E2F1E8; }
.state--last { color: #8A4B00; background: #FCEBD2; }
.state--full { color: var(--danger); background: #F8E1E1; }
.state--closed { color: #555; background: #ECECEC; }

/* ---------- Header ---------- */
.topbar { background: var(--green-950); color: rgba(250, 246, 238, .86); font-size: .86rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--gold-300); }
.topbar svg { width: 15px; height: 15px; color: var(--gold-400); }
.topbar__contact, .topbar__meta { display: flex; gap: 22px; align-items: center; }
.lang-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.lang-list li + li { border-left: 1px solid rgba(250, 246, 238, .3); }
.lang-list a, .lang-list span[aria-current] { display: inline-block; padding: 2px 10px; font-weight: 800; font-size: .8rem; letter-spacing: .06em; }
.lang-list span[aria-current] { color: var(--gold-400); }
.topbar__social { padding: 4px; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--cream); /* no backdrop-filter: it would trap the fixed mobile menu */ border-bottom: 1px solid var(--sand-line); transition: box-shadow .25s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(11, 46, 36, .09); }
.site-header .container { display: flex; align-items: center; gap: 20px; min-height: 84px; }
.brand { flex: none; display: block; }
.brand img { height: 66px; width: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav a { display: block; padding: 10px 12px; color: var(--green-950); text-decoration: none; font-weight: 700; font-size: .95rem; position: relative; border-radius: 6px; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--gold-text); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1.5px solid var(--sand-line); border-radius: 999px; font-weight: 800; font-size: .85rem; letter-spacing: .06em; color: var(--green-900); text-decoration: none; }
.lang-switch:hover { border-color: var(--gold-500); color: var(--green-950); }
.menu-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--sand-line); background: transparent; color: var(--green-950); cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle svg { width: 22px; height: 22px; }

/* hidden on desktop; the mobile panel below shows them */
.nav__extra, .nav-close { display: none; }
@media (max-width: 1100px) {
  .header-actions .btn { display: none; }
}
.header-actions .btn { border-radius: 6px; }
@media (max-width: 1100px) {
}
@media (max-width: 980px) {
  
  .menu-toggle { display: inline-flex; }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: var(--green-950); padding: 88px 24px 32px; transform: translateX(100%); transition: transform .3s var(--ease); overflow-y: auto; margin: 0; visibility: hidden; }
  .nav.is-open { transform: none; visibility: visible; box-shadow: -20px 0 60px rgba(0, 0, 0, .3); }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { color: var(--cream); font-size: 1.12rem; padding: 14px 4px; border-bottom: 1px solid rgba(250, 246, 238, .1); border-radius: 0; }
  .nav a::after { left: 4px; right: auto; width: 32px; bottom: 8px; }
  .nav__extra { display: block !important; margin-top: 24px; }
  .header-actions { margin-left: auto; }
  .nav-close { position: absolute; top: 20px; right: 20px; color: var(--cream); border-color: rgba(250, 246, 238, .3); display: inline-flex; }
  body.nav-open { overflow: hidden; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(11, 46, 36, .5); z-index: 49; }
}
@media (max-width: 640px) {
  .topbar__contact a span { display: none; }
  .topbar__contact a.topbar__phone span { display: inline; }
  .brand img { height: 50px; }
  .site-header .container { min-height: 72px; }
}

/* ---------- Hero (home) : photo on the right, green arch panel on the left ---------- */
.hero { position: relative; background: var(--green-950); color: var(--cream); overflow: hidden; min-height: clamp(520px, 44vw, 640px); display: flex; align-items: center; }
.hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; }
.hero__photo picture, .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 46, 36, .35) 0%, rgba(11, 46, 36, 0) 30%), linear-gradient(0deg, rgba(11, 46, 36, .25), rgba(11, 46, 36, 0) 40%); }
.hero__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 52%; height: 100%; color: var(--green-900); }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; background-image: var(--pattern-gold); background-size: 80px; opacity: .07; z-index: 1; pointer-events: none; }
.hero__lantern { position: absolute; left: 1.5%; top: 0; width: 46px; height: 138px; z-index: 1; animation: sway 6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.hero__inner { position: relative; z-index: 2; padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero__text { max-width: 540px; }
.hero .eyebrow { color: var(--gold-400); letter-spacing: .18em; line-height: 1.7; }
.hero .eyebrow::before { display: none; }
.hero h1, .hero .hero__title { color: var(--gold-400); font-size: clamp(3.2rem, 6.4vw, 5.4rem); font-weight: 600; margin: 0 0 .05em; line-height: 1; background: linear-gradient(180deg, #F0D58E 0%, #C9A24B 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__subtitle { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--cream); margin-bottom: 20px; line-height: 1.2; }
.hero__lead { color: rgba(250, 246, 238, .86); font-size: 1.08rem; max-width: 48ch; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__actions .btn { border-radius: 6px; min-height: 52px; padding: 14px 26px; }
@media (max-width: 900px) {
  .hero { display: block; min-height: 0; }
  .hero__photo { position: relative; width: 100%; height: 300px; }
  .hero__photo::after { background: linear-gradient(0deg, var(--green-900) 0%, rgba(15, 59, 46, 0) 45%); }
  .hero__panel, .hero__lantern { display: none; }
  .hero { background: var(--green-900); }
  .hero::before { width: 100%; top: 300px; }
  .hero__inner { padding-top: 8px; padding-bottom: 44px; }
}

/* ---------- Features strip ---------- */
.features { background: var(--white); border-bottom: 1px solid var(--sand-line); }
.features ul { list-style: none; margin: 0; padding: 26px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.features li { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: .92rem; line-height: 1.35; color: var(--green-950); }
.features svg { width: 38px; height: 38px; flex: none; color: var(--gold-500); stroke-width: 1.4; }
@media (max-width: 1000px) { .features ul { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .features ul { grid-template-columns: 1fr 1fr; padding: 20px 0; } .features svg { width: 30px; height: 30px; } }

/* ---------- Home: category cards ---------- */
.section--tight { padding: clamp(48px, 6vw, 72px) 0; }
.title-dash { display: flex; align-items: center; gap: 16px; }
.title-dash::before { content: ""; width: 28px; height: 2px; background: var(--green-950); flex: none; }
.link-arrow--gold { color: var(--gold-text); }
.link-arrow--light { color: var(--cream); }
.link-arrow--light:hover { color: var(--gold-300); }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cat-card { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--sand-line); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--green-900); }
.cat-card__media picture, .cat-card__media img, .cat-card__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cat-card:hover .cat-card__media img, .cat-card:hover .cat-card__media svg { transform: scale(1.05); }
.cat-card__label { position: absolute; top: 12px; left: 12px; background: var(--green-900); color: var(--cream); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; border-radius: 4px; }
.cat-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.cat-card h3 { font-size: 1.55rem; margin-bottom: 6px; }
.cat-card p { color: var(--muted); font-size: .94rem; margin-bottom: 18px; }
.cat-card .btn { margin-top: auto; align-self: flex-start; border-radius: 6px; }
@media (max-width: 1000px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

/* ---------- Package cards ---------- */
.grid { display: grid; gap: 28px; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.grid--cards .card__title { font-size: 1.45rem; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--3 { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sand-line); box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s; position: relative; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--green-900); }
.card__media img, .card__media svg, .card__media picture { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img, .card:hover .card__media .art { transform: scale(1.04); }
.card__media .badge-demo { position: absolute; top: 12px; left: 12px; }
.card__tag { position: absolute; right: 12px; top: 12px; background: var(--green-950); color: var(--gold-300); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 6px 10px; border-radius: 999px; }
.card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 1.6rem; margin: 0 0 6px; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__summary { color: var(--muted); font-size: .96rem; margin-bottom: 16px; }
.card__meta { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 7px; font-size: .9rem; color: var(--ink); }
.card__meta li { display: flex; gap: 9px; align-items: center; }
.card__meta svg { width: 17px; height: 17px; color: var(--gold-text); flex: none; }
.card__foot { margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px dashed var(--sand-line); }
.price small { display: block; font-size: .78rem; color: var(--muted); font-weight: 600; }
.price strong { font-family: var(--font-display); font-size: 1.9rem; color: var(--green-800); line-height: 1; font-weight: 700; }
.card__cta { position: relative; z-index: 1; }

/* Destination illustrations */
.art { width: 100%; height: 100%; display: block; }

/* ---------- Destinations (dark band) ---------- */
.destinations { position: relative; background: var(--green-950); color: var(--cream); padding: clamp(48px, 6vw, 72px) 0; overflow: hidden; isolation: isolate; }
.destinations__bg { position: absolute; inset: 0; z-index: -1; opacity: .25; }
.destinations__bg picture, .destinations__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(2px); }
.destinations::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 46, 36, .7), rgba(11, 46, 36, .92)); }
.destinations h2 { color: var(--cream); }
.destinations .title-dash::before { background: var(--gold-400); }
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dest { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3.2; display: block; color: var(--cream); text-decoration: none; isolation: isolate; border: 2px solid rgba(250, 246, 238, .85); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.dest img, .dest svg.art, .dest picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease); }
.dest::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 46, 36, 0) 35%, rgba(11, 46, 36, .95) 100%); }
.dest:hover img, .dest:hover svg.art { transform: scale(1.06); }
.dest__text { position: absolute; left: 16px; right: 60px; bottom: 14px; }
.dest strong { display: block; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1.1; }
.dest__text span { font-size: .88rem; color: rgba(250, 246, 238, .85); }
.dest__go { position: absolute; right: 14px; bottom: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--cream); color: var(--green-950); display: grid; place-items: center; transition: background-color .2s; }
.dest__go svg { width: 18px; height: 18px; }
.dest:hover .dest__go { background: var(--gold-400); }
.dest:hover { color: var(--cream); }
@media (max-width: 900px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dest-grid { grid-template-columns: 1fr; } }

/* ---------- Why band ---------- */
.why-band { position: relative; background: var(--green-900); color: var(--cream); padding: 40px 0; overflow: hidden; border-top: 1px solid rgba(201, 162, 75, .35); }
.why-band::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-gold); background-size: 64px; opacity: .06; }
.why-band__arch { position: absolute; bottom: 0; width: 170px; height: 170px; }
.why-band__arch--l { left: 0; }
.why-band__arch--r { right: 0; }
.why-band__inner { position: relative; display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center; }
.why-band h2 { color: var(--gold-400); font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 0; }
.why-band h2 span { display: block; color: var(--cream); font-size: 1.15em; }
.why-band ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-band li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; font-size: .92rem; line-height: 1.35; color: rgba(250, 246, 238, .9); }
.why-band__icon { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--gold-500); display: grid; place-items: center; color: var(--gold-400); }
.why-band__icon svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .why-band__inner { grid-template-columns: 1fr; text-align: center; } .why-band ul { grid-template-columns: repeat(2, 1fr); } .why-band__arch { display: none; } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: var(--green-900); color: var(--cream); border-radius: calc(var(--radius) * 1.4); padding: clamp(36px, 5vw, 64px); overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-gold); background-size: 64px; opacity: .1; }
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--cream); margin-bottom: .25em; }
.cta-band p { color: rgba(250, 246, 238, .82); margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 800px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; background: linear-gradient(120deg, var(--green-950), var(--green-800)); color: var(--cream); overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-gold); background-size: 72px; opacity: .09; }
.page-hero::after { content: ""; position: absolute; right: -80px; top: -40px; width: 380px; height: 460px; border: 1.5px solid rgba(201, 162, 75, .45); border-radius: 999px 999px 0 0; }
.page-hero .container { position: relative; z-index: 1; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.page-hero h1 { color: var(--cream); font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 500; margin-bottom: .2em; }
.page-hero .lead { color: rgba(250, 246, 238, .82); margin: 0; }
.page-hero--photo { background: var(--green-950); }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; opacity: .3; }
.page-hero__bg img, .page-hero__bg picture { width: 100%; height: 100%; object-fit: cover; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; font-size: .86rem; color: rgba(250, 246, 238, .7); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--gold-400); }
.breadcrumb a { color: rgba(250, 246, 238, .9); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-300); }

/* ---------- Catalogue ---------- */
.filters { background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-top: -44px; position: relative; z-index: 2; }
.filters form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; align-items: end; }
.filters__actions { display: flex; gap: 8px; align-items: center; }
.filters__actions a { font-size: .88rem; font-weight: 700; color: var(--muted); padding: 0 6px; }
.results-count { margin: 32px 0 20px; color: var(--muted); font-weight: 700; }
.empty-state { background: var(--white); border: 1px dashed var(--sand-line); border-radius: var(--radius); padding: 40px; text-align: center; color: var(--muted); }
.subnav { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.subnav a { padding: 8px 16px; border: 1.5px solid var(--sand-line); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--green-900); background: var(--white); }
.subnav a[aria-current="true"] { background: var(--green-800); border-color: var(--green-800); color: var(--cream); }

/* ---------- Package detail ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.detail__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 8; background: var(--green-900); margin-bottom: 28px; position: relative; }
.detail__media img, .detail__media svg, .detail__media picture { width: 100%; height: 100%; object-fit: cover; }
.detail__media .badge-demo { position: absolute; top: 14px; left: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 24px; padding: 0; list-style: none; color: var(--muted); font-size: .95rem; }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts svg { width: 18px; height: 18px; color: var(--gold-text); }
.tabs [role="tablist"] { display: flex; gap: 4px; border-bottom: 1px solid var(--sand-line); overflow-x: auto; scrollbar-width: thin; margin-bottom: 26px; }
.tabs [role="tab"] { background: none; border: 0; padding: 14px 16px; font: 700 .95rem var(--font-body); color: var(--muted); cursor: pointer; white-space: nowrap; position: relative; }
.tabs [role="tab"][aria-selected="true"] { color: var(--green-950); }
.tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--gold-500); border-radius: 3px 3px 0 0; }
.tabs [role="tabpanel"] { animation: fade .35s var(--ease); }
.tabs [role="tabpanel"] > h2 { font-size: 1.9rem; }
.no-js .tabs [role="tablist"] { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 1px; background: var(--sand-line); }
.timeline li { position: relative; padding: 0 0 22px 64px; }
.timeline__day { position: absolute; left: 0; top: 0; width: 45px; height: 45px; border-radius: 50%; background: var(--green-800); color: var(--gold-300); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.timeline h3 { font-size: 1.3rem; margin: 6px 0 2px; }
.timeline p { margin: 0; color: var(--muted); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: start; }
.check-list svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--ok); }
.check-list--no svg { color: var(--danger); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.hotel-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.hotel-list li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius-sm); }
.hotel-list strong { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--green-950); }
.hotel-list span { color: var(--muted); font-size: .92rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--sand-line); border-radius: var(--radius-sm); background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--sand-line); vertical-align: middle; }
thead th { background: var(--sand); font-weight: 800; color: var(--green-950); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td .price-list { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.aside { position: sticky; top: 104px; display: grid; gap: 18px; }
.aside-card { background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.aside-card--green { background: var(--green-900); color: var(--cream); border-color: var(--green-900); }
.aside-card--green h2, .aside-card--green h3 { color: var(--cream); }
.aside-card--green a:not(.btn) { color: var(--gold-300); }
.aside-card .price strong { font-size: 2.4rem; }
.note { font-size: .86rem; color: var(--muted); }
.departure-pick { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.departure-pick li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--sand-line); border-radius: var(--radius-sm); font-size: .92rem; }
@media (max-width: 1000px) { .detail { grid-template-columns: minmax(0, 1fr); } .aside { position: static; } }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } .detail__media { aspect-ratio: 4 / 3; } }

/* ---------- Forms ---------- */
.form-card { background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label, .field legend { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; color: var(--green-950); }
.field .req { color: var(--danger); margin-left: 2px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #D6CCB8; border-radius: var(--radius-sm); background: var(--white); font: 400 1rem var(--font-body); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(201, 162, 75, .35); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field .error { color: var(--danger); font-size: .86rem; font-weight: 600; margin-top: 6px; }
.field .hint { color: var(--muted); font-size: .84rem; margin-top: 5px; }
.field fieldset { border: 0; padding: 0; margin: 0; }
.choice { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; cursor: pointer; }
.choice input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 3px; accent-color: var(--green-800); }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pill-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-choices label { position: relative; }
.pill-choices input { position: absolute; opacity: 0; }
.pill-choices span { display: inline-block; padding: 10px 16px; border: 1.5px solid #D6CCB8; border-radius: 999px; font-weight: 700; font-size: .92rem; cursor: pointer; }
.pill-choices input:checked + span { background: var(--green-800); color: var(--cream); border-color: var(--green-800); }
.pill-choices input:focus-visible + span { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.pill-choices input:disabled + span { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 22px; font-weight: 600; display: flex; gap: 12px; align-items: start; }
.alert svg { width: 22px; height: 22px; flex: none; }
.alert--info { background: #FFF4D6; color: #4A3A10; border: 1px solid #E2C989; }
.alert--error { background: #F8E1E1; color: #6E1E1E; border: 1px solid #E6B3B3; }
.alert--success { background: #E6F2EC; color: #14402F; border: 1px solid #A9CDB9; }
.alert--success .received dt { color: #2E5E48; }
.received-lead { margin: 0; }
.alert ul { margin: 6px 0 0; font-weight: 500; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.stepper { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: step; }
.stepper li { position: relative; text-align: center; font-size: .86rem; font-weight: 700; color: var(--muted); counter-increment: step; padding-top: 46px; }
.stepper li::before { content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--sand-line); background: var(--white); display: grid; place-items: center; z-index: 1; }
.stepper li::after { content: ""; position: absolute; top: 17px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--sand-line); }
.stepper li:first-child::after { display: none; }
.stepper li.is-done::before { background: var(--green-800); border-color: var(--green-800); color: var(--gold-300); content: "✓"; }
.stepper li.is-done::after, .stepper li.is-current::after { background: var(--green-800); }
.stepper li.is-current { color: var(--green-950); }
.stepper li.is-current::before { border-color: var(--gold-500); background: var(--gold-500); color: var(--green-950); }
.step-panel > h2 { font-size: 1.8rem; }
.js .step-panel[hidden] { display: none; }
.no-js .stepper, .no-js [data-next], .no-js [data-prev] { display: none; }
.no-js .step-panel + .step-panel { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--sand-line); }
.summary-box { background: var(--sand); border-radius: var(--radius-sm); padding: 16px 18px; font-size: .94rem; }
.summary-box dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.summary-box dt { font-weight: 700; color: var(--muted); }
.summary-box dd { margin: 0; }
@media (max-width: 560px) { .stepper li { font-size: 0; } .stepper li::before { font-size: .9rem; } }

/* ---------- Content pages ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: 2rem; margin-top: 1.4em; }
.prose h3 { font-size: 1.45rem; margin-top: 1.2em; }
.prose li { margin-bottom: .4em; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
@media (max-width: 960px) { .content-grid { grid-template-columns: minmax(0, 1fr); } }
.faq-list { display: grid; gap: 12px; }
.faq-list details { background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius-sm); }
.faq-list summary { cursor: pointer; padding: 18px 54px 18px 20px; font-weight: 700; list-style: none; position: relative; color: var(--green-950); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--gold-text); border-bottom: 2px solid var(--gold-text); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq-list details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-list details > div { padding: 0 20px 18px; color: var(--muted); }
.faq-group + .faq-group { margin-top: 40px; }
.contact-cards { display: grid; gap: 14px; }
.contact-item { display: flex; gap: 14px; align-items: start; }
.contact-item svg { width: 22px; height: 22px; color: var(--gold-500); flex: none; margin-top: 3px; }
.contact-item strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-300); }
.aside-card:not(.aside-card--green) .contact-item strong { color: var(--gold-text); }
.hours { width: 100%; font-size: .94rem; }
.hours th, .hours td { padding: 6px 0; border-bottom: 1px solid rgba(250, 246, 238, .12); background: none; text-transform: none; letter-spacing: 0; font-size: .94rem; }
.aside-card:not(.aside-card--green) .hours th, .aside-card:not(.aside-card--green) .hours td { border-color: var(--sand-line); }
.hours th { font-weight: 600; color: inherit; }
.hours td { text-align: right; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--gold-300); font-weight: 800; }
.aside-card:not(.aside-card--green) .hours tr.is-today th, .aside-card:not(.aside-card--green) .hours tr.is-today td { color: var(--green-700); }
.map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sand-line); aspect-ratio: 16 / 10; background: var(--sand); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.notice-pending { display: flex; gap: 12px; padding: 16px 18px; border-left: 4px solid var(--gold-500); background: #FFF8E6; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 32px; font-size: .95rem; }
.notice-pending svg { width: 22px; height: 22px; flex: none; color: var(--gold-text); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 28px 0; }
.fact { background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius-sm); padding: 18px; }
.fact strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--green-800); }
.fact span { font-size: .9rem; color: var(--muted); }

/* ---------- Footer (dark green, columns) ---------- */
.site-footer { background: var(--green-950); color: rgba(250, 246, 238, .82); margin-top: clamp(56px, 8vw, 96px); font-size: .93rem; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--gold-500)); }
.page-home .site-footer { margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr .9fr; gap: 40px; padding-top: 52px; padding-bottom: 40px; }
.footer-logo { display: inline-block; background: #fff; border-radius: 14px; padding: 14px 20px; margin-bottom: 22px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.footer-logo img { display: block; height: 104px; width: auto; }
.site-footer h2 { font-family: var(--font-body); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 14px; }
.footer-h2-gap { margin-top: 26px; }
.site-footer p { margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--gold-300); text-decoration: underline; }
.newsletter { display: flex; gap: 8px; margin-top: 6px; }
.newsletter input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px; border-radius: 6px; border: 1px solid rgba(250, 246, 238, .3); background: rgba(250, 246, 238, .08); color: var(--cream); font: inherit; }
.newsletter input::placeholder { color: rgba(250, 246, 238, .6); }
.newsletter .btn { border-radius: 6px; }
.footer-soon { font-size: .82rem; color: rgba(250, 246, 238, .65); margin-top: 6px; }
.footer-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px !important; }
.footer-badges li { background: var(--white); border-radius: 8px; padding: 4px 8px; }
.footer-badges img { height: 48px; width: auto; }
.footer-intro { color: rgba(250, 246, 238, .78); }
.footer-contact { display: grid; gap: 10px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; color: var(--gold-400); flex: none; margin-top: 3px; }
.footer-phone { font-weight: 800; font-size: 1.08rem; color: var(--gold-300) !important; }
.footer-tag { font-size: .75rem; color: rgba(250, 246, 238, .6); align-self: center; }
.footer-links { display: grid; gap: 8px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(250, 246, 238, .1); color: var(--cream); display: grid; place-items: center; }
.footer-social a:hover { background: var(--gold-500); color: var(--green-950); }
.footer-social svg { width: 18px; height: 18px; }
.pay-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-list li { border: 1px solid rgba(250, 246, 238, .3); border-radius: 6px; padding: 4px 10px; font-size: .8rem; font-weight: 700; }
.footer-permit { font-size: .82rem; color: rgba(250, 246, 238, .65); margin-top: 22px !important; }
.footer-bottom { border-top: 1px solid rgba(250, 246, 238, .12); color: rgba(250, 246, 238, .65); font-size: .84rem; }
.footer-bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 18px; padding-bottom: 18px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 0; }
.footer-bottom nav a { color: rgba(250, 246, 238, .85); padding: 0 14px; border-left: 1px solid rgba(250, 246, 238, .25); }
.footer-bottom nav a:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: clamp(64px, 10vw, 128px) 0; }
.notfound__num { font-family: var(--font-display); font-size: clamp(6rem, 18vw, 11rem); line-height: 1; color: var(--gold-500); font-weight: 500; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
/* Section titles: the gold/green dash draws itself when the title enters the viewport. */
.reveal-line.title-dash::before, .reveal-line .title-dash::before { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .15s; }
.reveal-line.is-visible.title-dash::before, .reveal-line.is-visible .title-dash::before { transform: none; }
/* Entrance of the first screen (no JavaScript needed). */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-slide.is-active .hero__text > *, .page-hero .container > * { animation: rise .9s var(--ease) both; }
.hero__text > :nth-child(2), .page-hero .container > :nth-child(2) { animation-delay: .08s; }
.hero__text > :nth-child(3), .page-hero .container > :nth-child(3) { animation-delay: .16s; }
.hero__text > :nth-child(4), .page-hero .container > :nth-child(4) { animation-delay: .24s; }
.hero__text > :nth-child(5), .page-hero .container > :nth-child(5) { animation-delay: .32s; }
/* Hover polish */
.btn { will-change: transform; }
.btn:active { transform: translateY(0) scale(.98); }
.cat-card, .card, .dest, .team__card, .room-card__body { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s; }
.team__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.site-footer a, .nav a, .link-arrow { transition: color .2s; }
[id] { scroll-margin-top: 110px; }

/* ---------- Home hero: static main photo + floating arch inset (no slideshow) ---------- */
.hero-main { overflow: hidden; }
.hero-main img, .hero-main svg { transform-origin: 60% 40%; }
.hero-slide.is-active .hero-main img, .hero-slide.is-active .hero-main svg { animation: hero-breathe 26s ease-in-out infinite alternate; }
.hero-main svg { width: 100%; height: 100%; display: block; }
@keyframes hero-breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-inset { position: absolute; z-index: 3; margin: 0; right: clamp(24px, 4vw, 64px); bottom: clamp(28px, 5vw, 56px); width: clamp(150px, 15vw, 220px); animation: rise 1.2s var(--ease) .5s both; }
.hero-inset__frame { aspect-ratio: 3 / 4; border-radius: 999px 999px 14px 14px; overflow: hidden; border: 4px solid var(--cream); outline: 1.5px solid var(--gold-500); outline-offset: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); animation: float 7s ease-in-out 1.7s infinite; }
.hero-inset__frame picture, .hero-inset__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 900px) { .hero-inset { display: none; } }

/* ---------- Room type cards (booking form) ---------- */
.room-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.room-card { position: relative; display: block; cursor: pointer; }
.room-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.room-card__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; height: 100%; padding: 16px 10px 14px; border: 1.5px solid #D6CCB8; border-radius: var(--radius-sm); background: var(--white); }
.room-card:hover .room-card__body { border-color: var(--gold-500); transform: translateY(-2px); }
.room-card input:checked + .room-card__body { border-color: var(--green-800); background: #F2F7F3; box-shadow: inset 0 0 0 1px var(--green-800); }
.room-card input:focus-visible + .room-card__body { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.room-card input[aria-invalid="true"] + .room-card__body { border-color: var(--danger); }
.room-card__icon { display: flex; gap: 2px; color: var(--gold-text); margin-bottom: 4px; }
.room-card__icon svg { width: 20px; height: 20px; }
.room-card strong { font-size: .95rem; color: var(--green-950); line-height: 1.25; }
.room-card__people { font-size: .85rem; color: var(--muted); }
.room-card__price { font-size: .82rem; font-weight: 700; color: var(--green-700); min-height: 1.2em; }
@media (max-width: 760px) { .room-cards { grid-template-columns: 1fr 1fr; } }
.received-title { font-weight: 800; margin: 12px 0 4px; }
.received { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0; font-weight: 500; }
.received dt { color: #6B5520; }
.received dd { margin: 0; }

/* Inner page hero with a visual on the right (ticketing) */
.page-hero--split .container { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; align-items: center; }
.page-hero--split .container > :not(.page-hero__visual) { grid-column: 1; }
.page-hero__visual { grid-column: 2; grid-row: 1 / span 6; justify-self: center; width: 100%; max-width: 300px; animation: rise 1.1s var(--ease) .2s both; }
.page-hero--split::after { display: none; }
.flight-visual { margin: 0; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35)); }
.flight-visual svg { width: 100%; height: auto; }
.flight-visual .fw-clouds { animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-10px); } to { transform: translateX(14px); } }
.flight-visual__photo { aspect-ratio: 5 / 6; border-radius: 160px 160px 18px 18px; overflow: hidden; border: 3px solid var(--gold-500); }
.flight-visual__photo img, .flight-visual__photo picture { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .page-hero--split .container { grid-template-columns: minmax(0, 1fr); }
  .page-hero__visual { grid-column: 1; grid-row: auto; max-width: 180px; order: 9; margin-top: 24px; justify-self: start; }
}

/* Information cards with a small illustration (Hajj page, practical information) */
.info-cards { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.info-card { display: flex; gap: 16px; align-items: flex-start; background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s; }
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold-300); }
.info-card h3 { font-size: 1.3rem; margin: 2px 0 6px; }
.info-card p { color: var(--muted); font-size: .94rem; margin: 0 0 10px; }
.info-card .link-arrow { font-size: .9rem; }
.illus { flex: none; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(145deg, #F7EFDD, #EFE3C8); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .35); transition: transform .35s var(--ease); }
.illus svg { width: 46px; height: 46px; }
.info-card:hover .illus { transform: rotate(-4deg) scale(1.05); }
@media (max-width: 1000px) { .info-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .info-cards { grid-template-columns: minmax(0, 1fr); } .info-card { padding: 16px; } .illus { width: 54px; height: 54px; } .illus svg { width: 38px; height: 38px; } }

/* Main menu dropdown ("Infos pratiques") */
.has-sub { position: relative; }
.nav__sub-toggle { display: flex; align-items: center; gap: 4px; padding: 10px 12px; background: none; border: 0; font: 700 .95rem var(--font-body); color: var(--green-950); cursor: pointer; border-radius: 6px; position: relative; }
.nav__sub-toggle::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav__sub-toggle[data-current] { color: var(--gold-text); }
.nav__sub-toggle[data-current]::after, .nav__sub-toggle:hover::after { transform: scaleX(1); }
.nav__caret { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.has-sub.is-open .nav__caret { transform: rotate(180deg); }
.nav .nav__sub { position: absolute; top: 100%; left: 0; min-width: 270px; display: block; padding: 8px; margin: 0; list-style: none; background: var(--white); border: 1px solid var(--sand-line); border-top: 3px solid var(--gold-500); border-radius: 0 0 10px 10px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; z-index: 60; }
.has-sub.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav .nav__sub a { padding: 10px 12px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.nav .nav__sub a::after { display: none; }
.nav .nav__sub a:hover, .nav .nav__sub a[aria-current="page"] { background: var(--cream); color: var(--gold-text); }
@media (max-width: 1250px) { .nav > ul > li > a, .nav__sub-toggle { padding-left: 9px; padding-right: 9px; font-size: .92rem; } }
@media (max-width: 980px) {
  .nav__sub-toggle { width: 100%; color: var(--cream); font-size: 1.12rem; padding: 14px 4px; border-bottom: 1px solid rgba(250, 246, 238, .1); border-radius: 0; justify-content: space-between; }
  .nav__sub-toggle::after { display: none; }
  .nav__sub-toggle[data-current] { color: var(--gold-300); }
  .nav .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; display: none; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0 0 6px 14px; }
  .has-sub.is-open .nav__sub { display: block; }
  .nav .nav__sub a { color: rgba(250, 246, 238, .85); font-size: 1rem; padding: 10px 4px; border-bottom: 0; white-space: normal; }
  .nav .nav__sub a:hover, .nav .nav__sub a[aria-current="page"] { background: none; color: var(--gold-300); }
}
.no-js .has-sub:hover .nav__sub, .no-js .has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; display: block; }

/* "Informations pratiques" page */
.toc { background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); margin-bottom: 22px; }
.toc__title { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-text); margin: 0 0 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: inline-flex; gap: 6px; padding: 7px 13px; border: 1.5px solid var(--sand-line); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .88rem; color: var(--green-900); transition: border-color .2s, background-color .2s, color .2s; }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--gold-text); }
.toc a:hover { border-color: var(--gold-500); background: var(--cream); }
.practical-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.practical-card { background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s; }
.practical-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold-300); }
.practical-card:hover .illus { transform: rotate(-4deg) scale(1.05); }
.practical-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.practical-card h2 { font-size: 1.6rem; margin: 0; }
.practical-card__n { display: block; font-family: var(--font-body); font-size: .75rem; font-weight: 800; letter-spacing: .14em; color: var(--gold-text); }
.practical-card > p { color: var(--muted); }
.practical-card .check-list { font-size: .95rem; gap: 8px; }
.practical-card__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; font-size: .92rem; }
.practical-contacts { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.practical-contacts li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.practical-contacts svg { width: 19px; height: 19px; color: var(--gold-text); flex: none; }
.muted-s { font-size: .82rem; color: var(--muted); }
.guide-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.guide-links a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px; background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius); text-decoration: none; font-weight: 800; color: var(--green-950); transition: transform .3s var(--ease), box-shadow .3s, border-color .2s; }
.guide-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold-300); }
.guide-links a > svg { width: 18px; margin-left: auto; color: var(--gold-text); flex: none; transition: transform .2s var(--ease); }
.guide-links a:hover > svg { transform: translateX(4px); }
.guide-links .illus { width: 52px; height: 52px; border-radius: 14px; }
.guide-links .illus svg { width: 36px; height: 36px; }
@media (max-width: 1000px) { .guide-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .practical-grid, .guide-links { grid-template-columns: minmax(0, 1fr); } .practical-card { padding: 18px; } .practical-card h2 { font-size: 1.4rem; } }

/* Image at the bottom of an aside card (Billetterie) */
.aside-card__img { margin: 22px -24px -24px; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.aside-card:has(.aside-card__img) { overflow: hidden; }
.flight-scene { margin: 0; aspect-ratio: 9 / 5; }
.flight-scene svg, .flight-scene img, .flight-scene picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.flight-scene .fs-plane { animation: glide 9s ease-in-out infinite; transform-box: fill-box; }
.flight-scene .fs-clouds { animation: drift 16s ease-in-out infinite alternate; }
@keyframes glide { 0%, 100% { translate: 0 0; } 50% { translate: 6px -4px; } }

/* ---------- Package overview: departure banner + large room price cards ---------- */
.overview { font-size: 1.05rem; }
.dep-blocks { display: grid; gap: 30px; margin-bottom: 14px; }
.dep-block--off .price-card { opacity: .6; }
.dep-banner { position: relative; background: var(--sand); border-radius: 14px; padding: 18px 22px 16px 64px; margin-bottom: 18px; }
.dep-banner__quote { position: absolute; left: 18px; top: 2px; font-family: var(--font-display); font-size: 4.2rem; line-height: 1; color: #CDBE9E; }
.dep-banner__date { margin: 0 0 6px; font-size: 1.12rem; color: var(--green-950); }
.dep-banner__date strong { font-weight: 800; }
.dep-banner__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; font-size: .9rem; color: var(--muted); }
.dep-banner__meta > span:not(.state) { display: inline-flex; align-items: center; gap: 6px; }
.dep-banner__meta svg { width: 16px; height: 16px; color: var(--gold-text); }
.price-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.price-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.price-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; background: #F9FBF9; border: 1px solid var(--sand-line); border-radius: 12px; padding-bottom: 18px; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.price-card__head { align-self: stretch; margin: 0 0 14px; padding: 14px 12px; background: var(--green-900); color: var(--cream); font-family: var(--font-body); font-weight: 800; font-size: 1.12rem; letter-spacing: .01em; border-bottom: 3px solid var(--gold-500); }
.price-card--confirmed .price-card__head { padding-left: 30px; padding-right: 30px; }
.price-card__head { height: calc(2.6em + 28px); display: flex; align-items: center; justify-content: center; line-height: 1.25; }
.price-card__ribbon { position: absolute; top: 12px; left: -32px; width: 108px; transform: rotate(-45deg); background: var(--danger); color: #fff; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 3px 0; z-index: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.price-card__price { margin: 0; color: var(--green-950); line-height: 1; display: flex; align-items: flex-start; justify-content: center; gap: 4px; font-family: var(--font-body); }
.price-card__price .amt { font-size: clamp(2.5rem, 4.2vw, 3.1rem); font-weight: 900; letter-spacing: -.02em; }
.price-card__price .cur { font-size: 1.15rem; font-weight: 800; margin-top: .25em; }
.price-card__per { margin: 6px 0 12px; font-size: .85rem; color: var(--muted); }
.price-card__beds { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-top: 12px; border-top: 1px solid var(--sand-line); font-weight: 800; color: var(--ok); width: 78%; justify-content: center; }
.price-card__beds svg { width: 20px; height: 20px; }
.price-card__btn { min-width: 130px; border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; background: var(--green-700); border-color: var(--green-700); color: var(--cream); }
.price-card__btn:hover { background: var(--green-800); border-color: var(--green-800); color: var(--cream); }
.price-card__state { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
.price-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--white); border: 1px dashed var(--sand-line); border-radius: 12px; padding: 16px 18px; }
.price-ask p { margin: 0; }
@media (max-width: 760px) { .price-cards, .price-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .price-cards, .price-cards--2, .price-cards--4 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .price-card__price .amt { font-size: 2.1rem; } .price-card__head { font-size: .98rem; padding: 12px 8px; } .price-card__btn { min-width: 0; padding-left: 14px; padding-right: 14px; } .price-card__beds { width: 86%; } .dep-banner { padding-left: 48px; } .dep-banner__quote { left: 10px; font-size: 3.4rem; } }

/* "Le forfait" text zone under the prices */
.forfait { margin-top: 36px; }
.forfait__title { font-family: var(--font-body); font-weight: 900; font-size: 1.6rem; color: var(--green-950); padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px dashed var(--sand-line); }
.forfait__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.forfait__text { font-size: 1rem; line-height: 1.75; color: var(--ink); }
.forfait__text strong { color: var(--green-950); font-weight: 800; }
.forfait__label { font-weight: 800; color: var(--green-950); margin: 18px 0 6px; }
.forfait__list { margin: 0 0 14px; padding-left: 1.2em; }
.forfait__list li { margin-bottom: 4px; }
.forfait__list li::marker { color: var(--gold-text); }
.forfait__closing { font-weight: 700; }
.forfait__hotels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.forfait__hotels figure { margin: 0; }
.forfait__img { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.forfait__img img, .forfait__img svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.forfait__hotels figcaption { text-align: center; font-size: .86rem; font-weight: 700; font-style: italic; color: var(--muted); margin-top: 8px; }
@media (max-width: 420px) { .forfait__hotels { gap: 10px; } .forfait__hotels figcaption { font-size: .78rem; } }

/* Flights tab: airline logo */
.airline { display: flex; gap: 22px; align-items: center; background: var(--white); border: 1px solid var(--sand-line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 18px; }
.airline__logo { flex: none; width: 200px; height: 110px; border-radius: 10px; background: #fff; border: 1px solid var(--sand-line); display: grid; place-items: center; padding: 12px; }
.airline__logo { overflow: hidden; }
.airline__logo img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; } /* tall logos (Emirates, RAM) stay inside the frame */
.airline__placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .8rem; font-weight: 700; color: var(--muted); }
.airline__placeholder svg { width: 34px; height: 34px; color: var(--gold-text); }
.airline__label { margin: 0; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-text); }
.airline__name { margin: 2px 0 6px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--green-950); }
.airline__body p:last-child { margin: 0; color: var(--muted); }
.flight-legs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.flight-legs li { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 14px; align-items: center; background: var(--white); border: 1px solid var(--sand-line); border-radius: 12px; padding: 14px 18px; }
.flight-legs__dir { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-text); }
.flight-legs__dir svg { width: 16px; height: 16px; }
.flight-legs__dir--back svg { transform: scaleX(-1); }
.flight-legs li > span:not(.flight-legs__dir) { color: var(--muted); font-size: .92rem; }
@media (max-width: 560px) { .airline { flex-direction: column; align-items: flex-start; } .airline__logo { width: 100%; } .flight-legs li { grid-template-columns: auto 1fr; } .flight-legs li > span:not(.flight-legs__dir) { grid-column: 1 / -1; } }

/* Upcoming placeholder card */
.card__tag--soon { background: var(--gold-500); color: var(--green-950); }
.card--upcoming .card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 46, 36, 0) 50%, rgba(11, 46, 36, .35)); }

@media (prefers-reduced-motion: reduce) {
  .hero-main img, .hero-main svg, .hero-inset__frame, .flight-scene .fs-plane, .flight-scene .fs-clouds, .flight-visual .fw-clouds { animation: none; }
  .reveal-line.title-dash::before, .reveal-line .title-dash::before { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .topbar, .site-header, .site-footer, .demo-banner, .btn, .filters { display: none !important; }
  body { background: #fff; }
}

/* ---------- Fixes ---------- */
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.nav .nav__extra .btn { display: flex; color: var(--green-950); border-radius: 999px; border: 1.5px solid var(--gold-500); padding: 12px 24px; font-size: 1rem; }
.nav .nav__extra .btn::after { display: none; }
.page-hero__bg { opacity: .45; }
.page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 46, 36, .96) 0%, rgba(11, 46, 36, .82) 45%, rgba(11, 46, 36, .55) 100%); }

/* ---------- Hajj page ---------- */
.page-hero__actions { margin-top: 26px; }
.page-hero__actions .btn { border-radius: 6px; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.split--wide { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.value-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.value-grid li { background: var(--white); border: 1px solid var(--sand-line); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.value-grid strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--green-950); }
.value-grid li > span:last-child { color: var(--muted); font-size: .92rem; }
.value-grid__icon { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gold-500); color: var(--gold-text); display: grid; place-items: center; margin-bottom: 8px; }
.value-grid__icon svg { width: 22px; height: 22px; }
@media (max-width: 480px) { .value-grid { grid-template-columns: 1fr; } }
.offer-card { background: var(--green-900); color: var(--cream); border-radius: 14px; padding: 30px; position: relative; overflow: hidden; }
.offer-card::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-gold); background-size: 64px; opacity: .07; }
.offer-card > * { position: relative; }
.offer-card h2 { color: var(--gold-400); font-size: 1.9rem; }
.offer-card .check-list svg { color: var(--gold-400); }
.offer-card .note { color: rgba(250, 246, 238, .75); margin: 18px 0 0; }
.hajj-outro { margin: 32px auto 0; text-align: center; font-family: var(--font-display); font-size: 1.45rem; color: var(--green-900); font-style: italic; }
.phases { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 36px; }
.phase { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 12px; background: var(--white); border: 1px solid var(--sand-line); border-top: 4px solid var(--gold-500); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
a.phase:hover { color: var(--ink); box-shadow: var(--shadow-lg); }
.phase__label { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.phase strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--green-950); line-height: 1.15; }
.phase > span:not(.phase__label) { color: var(--muted); }
@media (max-width: 700px) { .phases { grid-template-columns: 1fr; } }
.nusuk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nusuk-steps li { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--sand-line); border-radius: 12px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.nusuk-steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.nusuk-steps__img { position: relative; display: grid; place-items: center; height: 112px; background: linear-gradient(145deg, #F7EFDD, #EBDDBE); border-bottom: 1px solid var(--sand-line); overflow: hidden; }
.nusuk-steps__img::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-gold); background-size: 56px; opacity: .22; }
.nusuk-steps__img .illus { position: relative; width: 80px; height: 80px; border-radius: 22px; background: #FFFDF8; box-shadow: 0 8px 22px rgba(11, 46, 36, .12), inset 0 0 0 1px rgba(201, 162, 75, .4); }
.nusuk-steps__img .illus svg { width: 56px; height: 56px; }
.nusuk-steps li:hover .illus { transform: rotate(-4deg) scale(1.06); }
.nusuk-steps__body { display: flex; gap: 14px; padding: 18px 20px 20px; }
.nusuk-steps__n { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--green-800); color: var(--gold-300); display: grid; place-items: center; font-weight: 800; }
.nusuk-steps h3 { font-size: 1.3rem; margin: 6px 0 6px; }
.nusuk-steps p { color: var(--muted); font-size: .93rem; margin: 0; }
@media (max-width: 1000px) { .nusuk-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .nusuk-steps { grid-template-columns: 1fr; } }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--green-950); box-shadow: var(--shadow-lg); margin-bottom: 12px; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: none; }
.video__play .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: var(--gold-500); color: var(--green-950); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s var(--ease); }
.video__btn svg { width: 34px; height: 34px; margin-left: 4px; }
.video__play:hover .video__btn, .video__play:focus-visible .video__btn { transform: translate(-50%, -50%) scale(1.08); }
.help-card h3 { color: var(--gold-400); }
.help-card p { color: rgba(250, 246, 238, .85); }

/* ---------- Team ---------- */
.team { padding: clamp(48px, 6vw, 72px) 0; }
.team--compact { background: var(--white); border-top: 1px solid var(--sand-line); }
.team__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.team--compact .team__grid { grid-template-columns: repeat(4, 1fr); }
.team__card { background: var(--white); border: 1px solid var(--sand-line); border-radius: 12px; padding: 26px 18px 22px; text-align: center; box-shadow: var(--shadow); }
.team__photo { width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; background: var(--green-800); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--gold-500); display: grid; place-items: center; }
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__initials { font-family: var(--font-display); font-size: 2.4rem; color: var(--gold-300); font-weight: 600; letter-spacing: .02em; }
.team__card h3 { font-size: 1.3rem; margin: 0 0 4px; }
.team__role { color: var(--gold-text); font-weight: 700; font-size: .9rem; margin: 0; }
.team__bio { color: var(--muted); font-size: .9rem; margin: 10px 0 0; }
@media (max-width: 900px) { .team--compact .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .team__grid, .team--compact .team__grid { grid-template-columns: 1fr; } }

/* ---------- Booking: chosen package ---------- */
.chosen { display: flex; gap: 18px; align-items: center; padding: 16px; border: 1px solid var(--sand-line); border-left: 4px solid var(--gold-500); border-radius: 10px; background: var(--cream); margin: 4px 0 26px; }
.chosen__media { width: 120px; flex: none; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--green-900); }
.chosen__media img, .chosen__media svg, .chosen__media picture { width: 100%; height: 100%; object-fit: cover; }
.chosen__label { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chosen__title { font-family: var(--font-display); font-size: 1.6rem; color: var(--green-950); line-height: 1.1; margin: 0 0 4px; }
.chosen__meta { color: var(--muted); font-size: .9rem; margin: 0 0 6px; }
@media (max-width: 520px) { .chosen { flex-direction: column; align-items: flex-start; } .chosen__media { width: 100%; } }
.stepper--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Package detail: overview + prices ---------- */
.detail__desc { font-size: 1.08rem; }
.feature-chips { list-style: none; padding: 0; margin: 18px 0 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.feature-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--white); border: 1px solid var(--sand-line); border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--green-950); }
.feature-chips svg { width: 18px; height: 18px; color: var(--gold-text); }
.dates-title { font-size: 1.6rem; margin: 0 0 14px; scroll-margin-top: 110px; }
.dep-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.dep { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) auto; gap: 18px; align-items: center; background: var(--white); border: 1px solid var(--sand-line); border-radius: 12px; padding: 16px 18px; }
.dep--off { background: #F6F4EF; }
.dep__when { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dep__date { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; color: var(--green-950); }
.dep__date svg { width: 18px; height: 18px; color: var(--gold-text); flex: none; }
.dep__city { color: var(--muted); font-size: .88rem; }
.dep__prices { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.dep__prices span { display: flex; flex-direction: column; }
.dep__prices small { color: var(--muted); font-size: .78rem; }
.dep__prices strong { font-family: var(--font-display); font-size: 1.45rem; color: var(--green-800); line-height: 1.1; }
.dep__ask { font-family: var(--font-body) !important; font-size: 1rem !important; color: var(--gold-text) !important; }
.dep__action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.dep__action small { color: var(--muted); font-size: .78rem; }
@media (max-width: 760px) { .dep { grid-template-columns: minmax(0, 1fr); gap: 12px; } .dep__action { align-items: stretch; text-align: left; } .dep__action .btn { width: 100%; } }

/* ---------- Hotels ---------- */
.hotel-city { display: flex; align-items: center; gap: 8px; font-size: 1.4rem; margin: 18px 0 12px; }
.hotel-city svg { width: 20px; height: 20px; color: var(--gold-text); }
.hotel-cards { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 520px) { .hotel-cards { grid-template-columns: minmax(0, 1fr); } }
.hotel-card { background: var(--white); border: 1px solid var(--sand-line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.hotel-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--green-900); }
.hotel-card__media img, .hotel-card__media svg { width: 100%; height: 100%; object-fit: cover; }
.hotel-card__placeholder { position: absolute; right: 10px; bottom: 10px; background: rgba(11, 46, 36, .8); color: var(--cream); font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.hotel-card__body { padding: 16px 18px 18px; }
.hotel-card__body strong { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--green-950); line-height: 1.15; }
.stars { color: var(--gold-500); letter-spacing: 2px; font-size: .95rem; }
.hotel-card__body ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: .9rem; color: var(--muted); }
.hotel-card__body li { display: flex; gap: 8px; align-items: center; }
.hotel-card__body li svg { width: 16px; height: 16px; color: var(--gold-text); flex: none; }
.filters form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
@media (max-width: 640px) { .filters form { grid-template-columns: minmax(0, 1fr); } .filters__actions .btn { flex: 1; } }

/* ---------- About ---------- */
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); gap: 44px; align-items: start; margin-bottom: 12px; }
.about-photo { position: relative; margin: 0; }
.about-photo picture, .about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 999px 999px 16px 16px; box-shadow: var(--shadow-lg); }
.about-photo::after { content: ""; position: absolute; inset: -12px; border: 1.5px solid var(--gold-500); border-radius: 999px 999px 24px 24px; pointer-events: none; opacity: .8; }
@media (max-width: 900px) { .about-intro { grid-template-columns: minmax(0, 1fr); } .about-photo { max-width: min(380px, calc(100% - 28px)); margin: 16px auto 0; } }

/* ---------- Practical information pages ---------- */
.info-block { background: var(--white); border: 1px solid var(--sand-line); border-radius: 12px; padding: 22px 24px; margin-bottom: 16px; }
.info-block h2 { font-size: 1.6rem; margin: 0 0 12px; }
.info-block p:last-child { margin-bottom: 0; }
.num-list { counter-reset: n; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.num-list li { counter-increment: n; position: relative; padding-left: 46px; min-height: 32px; }
.num-list li::before { content: counter(n); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--green-800); color: var(--gold-300); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.info-outro { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--green-900); margin-top: 24px; }
.aside-actions { display: grid; gap: 10px; margin-top: 14px; }
.aside-card--green p { color: rgba(250, 246, 238, .85); }
.aside-card nav a[aria-current="page"], .aside-card a[aria-current="page"] { font-weight: 800; color: var(--gold-text); }
/* .section sets vertical padding only: keep the side gutter when combined with .container */
.container.section, .container.section--tight { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Home banner carousel (4 banners: Hajj, Omra, Séjours, Billetterie) ---------- */
.hero-slider { position: relative; background: var(--green-950); overflow: hidden; }
.hero-slider__viewport { overflow: hidden; }
.hero-slider__track { display: flex; transition: transform .9s var(--ease); will-change: transform; }
.hero-slide { flex: 0 0 100%; min-width: 0; }
.hero-slide:not(.is-active) .hero__lantern { animation-play-state: paused; }
.hero-slider__controls { position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.4vw, 28px); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
.hero-slider__controls[hidden] { display: none; }
.hero-slider__controls > * { pointer-events: auto; }
.hero-slider__dots { display: flex; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(11, 46, 36, .55); backdrop-filter: blur(6px); }
.hero-slider__dot { position: relative; border: 0; background: none; padding: 10px 4px; cursor: pointer; color: rgba(250, 246, 238, .75); font: 600 .78rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.hero-slider__dot span { display: block; padding-bottom: 7px; }
.hero-slider__dot::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(250, 246, 238, .3); }
.hero-slider__dot::before { content: ""; position: absolute; left: 4px; bottom: 6px; height: 2px; width: 0; border-radius: 2px; background: var(--gold-400); z-index: 1; }
.hero-slider__dot[aria-current="true"] { color: var(--gold-400); }
.hero-slider__dot[aria-current="true"]::before { width: calc(100% - 8px); }
.hero-slider.is-playing .hero-slider__dot.run::before { animation: slide-progress var(--slide-ms, 7000ms) linear both; }
@keyframes slide-progress { from { width: 0; } to { width: calc(100% - 8px); } }
.hero-slider__dot:hover { color: var(--cream); }
.hero-slider__arrow, .hero-slider__pause { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(226, 201, 137, .7); background: rgba(11, 46, 36, .55); color: var(--gold-400); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); transition: background .25s, color .25s, transform .25s; }
.hero-slider__arrow:hover, .hero-slider__pause:hover { background: var(--gold-500); color: var(--green-950); }
.hero-slider__arrow:active { transform: scale(.94); }
.hero-slider__arrow svg { width: 20px; height: 20px; }
.hero-slider__arrow--prev svg { transform: scaleX(-1); }
.hero-slider__pause { width: 38px; height: 38px; }
.hero-slider__pause-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero-slider.is-paused .hero-slider__pause-icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.hero-slider__dot:focus-visible, .hero-slider__arrow:focus-visible, .hero-slider__pause:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }
.hero-slide .hero__inner { padding-bottom: clamp(84px, 8vw, 110px); }
@media (min-width: 901px) {
  .hero-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); }
  .hero-slider__arrow:active { transform: translateY(-50%) scale(.94); }
  .hero-slider__arrow--prev { left: 14px; }
  .hero-slider__arrow--next { right: 14px; }
  .hero-slider__controls { top: 0; bottom: 0; align-items: flex-end; padding-bottom: clamp(16px, 2.4vw, 28px); }
}
@media (min-width: 901px) and (max-width: 1340px) { .hero-slide .hero__inner { padding-left: 80px; } .hero-slide .hero__text { max-width: min(540px, 40vw); } .hero__lantern { display: none; } }
@media (max-width: 900px) {
  .hero-slider__controls { position: static; padding: 0 16px 22px; background: var(--green-900); flex-wrap: wrap; gap: 10px; }
  .hero-slide .hero__inner { padding-bottom: 24px; }
  .hero-slider__dot { font-size: .7rem; }
  .hero-slider__arrow { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .hero-slider__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider__track { transition: none; }
  .hero-slide.is-active .hero-main img, .hero-slide.is-active .hero-main svg, .hero-slide.is-active .hero__text > * { animation: none; }
}

/* =====================================================================
   Séjours (tourist stays) — own catalogue, page and form, distinct from Omra
   ===================================================================== */
/* Catalogue header: wide illustration, light gradient, destination links */
.tours-hero { position: relative; color: var(--cream); background: var(--green-950); overflow: hidden; }
.tours-hero__bg { position: absolute; inset: 0; }
.tours-hero__bg svg, .tours-hero__bg img, .tours-hero__bg picture { width: 100%; height: 100%; object-fit: cover; }
.tours-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 46, 36, .92) 0%, rgba(11, 46, 36, .7) 42%, rgba(11, 46, 36, .1) 80%), linear-gradient(0deg, rgba(11, 46, 36, .55), rgba(11, 46, 36, 0) 40%); }
.tours-hero__inner { position: relative; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(84px, 9vw, 120px); }
.tours-hero h1 { color: var(--cream); font-size: clamp(2.8rem, 6vw, 4.6rem); font-weight: 500; margin-bottom: .15em; }
.tours-hero .eyebrow { color: var(--gold-300); }
.tours-hero .lead { max-width: 56ch; color: rgba(250, 246, 238, .88); font-size: 1.1rem; }
.tours-hero__dest { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tours-hero__dest a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(250, 246, 238, .12); border: 1px solid rgba(226, 201, 137, .5); color: var(--cream); text-decoration: none; font-weight: 700; font-size: .9rem; backdrop-filter: blur(4px); transition: background .25s, color .25s, transform .25s; }
.tours-hero__dest a svg { width: 15px; height: 15px; color: var(--gold-300); }
.tours-hero__dest a:hover, .tours-hero__dest a[aria-current] { background: var(--gold-500); color: var(--green-950); transform: translateY(-2px); }
.tours-hero__dest a:hover svg, .tours-hero__dest a[aria-current] svg { color: var(--green-950); }

/* Filters */
.tour-filters { background: var(--white); border: 1px solid var(--sand-line); border-radius: calc(var(--radius) * 1.2); padding: 22px 24px; box-shadow: var(--shadow-lg); margin-top: -56px; position: relative; z-index: 2; }
.tour-filters__title { font-size: 1.5rem; margin-bottom: 12px; }
.tour-filters__types { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tour-filters__types legend { font-weight: 700; font-size: .92rem; margin-bottom: 8px; color: var(--green-950); padding: 0; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--sand-line); background: var(--cream); font-weight: 700; font-size: .9rem; color: var(--green-900); transition: background .2s, border-color .2s, color .2s; }
.pill:hover span { border-color: var(--gold-500); }
.pill input:checked + span { background: var(--green-800); border-color: var(--green-800); color: var(--cream); }
.pill input:focus-visible + span { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.tour-filters__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; }

/* Cards ("postcards") */
.tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1060px) { .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .tour-grid { grid-template-columns: minmax(0, 1fr); } }
.tour-card { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--sand-line); transition: transform .35s var(--ease), box-shadow .35s; }
.tour-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tour-card__media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--green-900); }
.tour-card__media > svg, .tour-card__media picture, .tour-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tour-card:hover .tour-card__media > svg, .tour-card:hover .tour-card__media img { transform: scale(1.06); }
.tour-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 46, 36, .92) 0%, rgba(11, 46, 36, .35) 40%, rgba(11, 46, 36, 0) 65%); pointer-events: none; }
.tour-card__type { display: inline-block; background: var(--gold-500); color: var(--green-950); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 6px 11px; border-radius: 999px; }
.tour-card__media .tour-card__type { position: absolute; top: 14px; right: 14px; z-index: 2; }
.tour-card__media .badge-demo { position: absolute; top: 14px; left: 14px; z-index: 2; }
.tour-card__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px; }
.tour-card__place { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--gold-300); font-size: .84rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tour-card__place svg { width: 15px; height: 15px; flex: none; }
.tour-card__title { color: var(--cream); font-size: 1.75rem; margin: 0; line-height: 1.05; }
.tour-card__title a { color: inherit; text-decoration: none; }
.tour-card__title a:hover { color: var(--gold-300); }
.tour-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.tour-card__summary { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
.tour-facts { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 7px; font-size: .9rem; }
.tour-facts li { display: flex; gap: 9px; align-items: flex-start; }
.tour-facts svg { width: 17px; height: 17px; color: var(--gold-text); flex: none; margin-top: 3px; }
.tour-facts small { color: var(--muted); }
.tour-chips { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.tour-chips li { background: var(--green-100); color: var(--green-800); font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.tour-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--sand-line); display: grid; gap: 12px; }
.tour-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tour-card__actions .btn { flex: 1 1 auto; justify-content: center; }
.tour-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; line-height: 1.2; }
.tour-price small { color: var(--muted); font-size: .8rem; font-weight: 600; }
.tour-price strong { font-family: var(--font-display); font-size: 1.9rem; color: var(--green-900); font-weight: 700; }
.tour-price__ask { font-size: 1.35rem !important; color: var(--gold-text) !important; }
.tour-price--lg strong { font-size: 2.8rem; }

/* Tailor-made band */
.tour-custom { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center; background: var(--sand); border: 1px solid var(--sand-line); border-radius: 20px; padding: clamp(24px, 4vw, 40px); position: relative; overflow: hidden; }
.tour-custom::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1.5px solid rgba(201, 162, 75, .5); }
.tour-custom h2 { margin-bottom: .2em; }
.tour-custom p { margin: 0; color: var(--muted); }
.tour-custom__art svg { width: 96px; height: 96px; }
@media (max-width: 760px) { .tour-custom { grid-template-columns: 1fr; } .tour-custom__art svg { width: 64px; height: 64px; } }

/* Stay page: cover, facts strip, sections, sticky aside */
.tour-cover { position: relative; color: var(--cream); background: var(--green-950); min-height: clamp(380px, 46vw, 560px); display: flex; align-items: flex-end; overflow: hidden; }
.tour-cover__bg { position: absolute; inset: 0; }
.tour-cover__bg > svg, .tour-cover__bg picture, .tour-cover__bg img { width: 100%; height: 100%; object-fit: cover; animation: hero-breathe 30s ease-in-out infinite alternate; }
.tour-cover__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 46, 36, .95) 0%, rgba(11, 46, 36, .55) 45%, rgba(11, 46, 36, .15) 100%); }
.tour-cover__inner { position: relative; padding-top: 40px; padding-bottom: 96px; }
.tour-cover__inner > * { animation: rise .9s var(--ease) both; }
.tour-cover__inner > :nth-child(2) { animation-delay: .06s; } .tour-cover__inner > :nth-child(3) { animation-delay: .12s; }
.tour-cover__inner > :nth-child(4) { animation-delay: .18s; } .tour-cover__inner > :nth-child(5) { animation-delay: .24s; }
.tour-cover h1 { color: var(--cream); font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 500; margin-bottom: .1em; }
.tour-cover__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.tour-cover__mode { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(226, 201, 137, .7); color: var(--gold-300); }
.tour-cover__place { display: flex; align-items: center; gap: 7px; color: var(--gold-300); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .9rem; margin-bottom: 10px; }
.tour-cover__place svg { width: 17px; height: 17px; }
.tour-cover .lead { max-width: 60ch; color: rgba(250, 246, 238, .88); font-size: 1.1rem; margin: 0; }
.tour-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: -56px 0 0; position: relative; z-index: 2; background: var(--white); border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--sand-line); overflow: hidden; }
.tour-strip > div { padding: 18px 20px; border-right: 1px solid var(--sand-line); }
.tour-strip > div:last-child { border-right: 0; }
.tour-strip dt { display: flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 4px; }
.tour-strip dt svg { width: 16px; height: 16px; }
.tour-strip dd { margin: 0; font-weight: 700; color: var(--green-950); }
@media (max-width: 700px) { .tour-strip > div { border-right: 0; border-bottom: 1px solid var(--sand-line); } }
.tour-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; padding: 44px 0 72px; }
@media (max-width: 980px) { .tour-layout { grid-template-columns: minmax(0, 1fr); } }
.tour-jump { position: sticky; top: 84px; z-index: 3; background: rgba(250, 246, 238, .94); backdrop-filter: blur(6px); padding: 10px 0; margin-bottom: 8px; border-bottom: 1px solid var(--sand-line); }
.tour-jump ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.tour-jump a { display: block; white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--green-800); text-decoration: none; }
.tour-jump a:hover { background: var(--green-100); }
.tour-sec { padding: 30px 0 8px; scroll-margin-top: 150px; }
.tour-sec + .tour-sec { border-top: 1px solid var(--sand-line); }
.tour-sec h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.tour-sec__sub { font-size: 1.3rem; margin-top: 18px; }
.tour-sec .list-check { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.tour-sec .list-check li { position: relative; padding-left: 26px; }
.tour-sec .list-check li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold-500); }
.tour-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 160px; gap: 12px; }
.tour-gallery figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--green-900); }
.tour-gallery figure:first-child { grid-row: span 2; }
.tour-gallery figure > svg, .tour-gallery picture, .tour-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tour-gallery figure:hover > svg, .tour-gallery figure:hover img { transform: scale(1.05); }
.tour-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; font-size: .8rem; color: var(--cream); background: linear-gradient(0deg, rgba(11, 46, 36, .85), rgba(11, 46, 36, 0)); }
@media (max-width: 560px) { .tour-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; } .tour-gallery figure:first-child { grid-column: span 2; grid-row: auto; } }
.tour-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.tour-timeline::before { content: ""; position: absolute; left: 34px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--gold-500), var(--sand-line)); }
.tour-timeline li { position: relative; padding: 0 0 22px 92px; min-height: 52px; }
.tour-timeline__day { position: absolute; left: 0; top: 0; width: 70px; text-align: center; background: var(--green-900); color: var(--gold-300); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 6px 0; border-radius: 999px; box-shadow: 0 0 0 4px var(--cream); }
.tour-timeline h3 { font-size: 1.3rem; margin: 0 0 2px; }
.tour-timeline p { margin: 0; color: var(--muted); }
.tour-deps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tour-dep { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; background: var(--white); border: 1px solid var(--sand-line); border-left: 4px solid var(--gold-500); border-radius: 12px; padding: 16px 18px; }
.tour-dep.is-closed { opacity: .7; border-left-color: var(--sand-line); }
.tour-dep__when small { display: block; color: var(--muted); font-size: .84rem; }
.tour-dep__price { text-align: right; }
.tour-dep__price small { color: var(--muted); font-size: .8rem; }
.tour-dep__price strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--green-900); }
.tour-dep__closed { font-size: .84rem; font-weight: 700; color: var(--muted); }
@media (max-width: 620px) { .tour-dep { grid-template-columns: 1fr; } .tour-dep__price { text-align: left; } }
.tour-note { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--sand-line); border-radius: 12px; padding: 18px; }
.tour-note > svg { width: 24px; height: 24px; color: var(--gold-text); flex: none; margin-top: 2px; }
.tour-note p { margin: 0 0 4px; }
.tour-hotels { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.tour-hotels li { display: flex; gap: 14px; background: var(--white); border: 1px solid var(--sand-line); border-radius: 12px; padding: 16px; }
.tour-hotels li > svg { width: 28px; height: 28px; color: var(--gold-text); flex: none; }
.tour-hotels h3 { font-size: 1.3rem; margin: 0; }
.tour-hotels p { margin: 2px 0 0; color: var(--muted); font-size: .94rem; }
.tour-offer { margin: 0; display: grid; gap: 14px; }
.tour-offer dt { font-weight: 800; font-size: .92rem; color: var(--green-950); margin-bottom: 4px; }
.tour-offer dd { margin: 0; color: var(--ink); display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; background: var(--sand); border: 1px solid var(--sand-line); color: var(--green-900); font-size: .84rem; font-weight: 700; padding: 4px 10px; border-radius: 8px; }
.tour-inex { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .tour-inex { grid-template-columns: 1fr; } }
.tour-inex__col { border-radius: 14px; padding: 20px; border: 1px solid var(--sand-line); background: var(--white); }
.tour-inex__col--in { border-top: 4px solid var(--ok); }
.tour-inex__col--out { border-top: 4px solid #B8A88A; background: #FBF8F2; }
.tour-inex h3 { font-size: 1.25rem; }
.tour-inex ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tour-inex li { display: flex; gap: 9px; align-items: flex-start; font-size: .95rem; }
.tour-inex li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.tour-inex__col--in svg { color: var(--ok); }
.tour-inex__col--out svg { color: #8C7A5B; }
.tour-options { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tour-options li { display: flex; gap: 12px; background: var(--white); border: 1px solid var(--sand-line); border-radius: 12px; padding: 16px; transition: border-color .25s, transform .25s; }
.tour-options li:hover { border-color: var(--gold-500); transform: translateY(-2px); }
.tour-options li > svg { width: 24px; height: 24px; color: var(--gold-text); flex: none; }
.tour-options h3 { font-size: 1.15rem; margin: 0 0 2px; }
.tour-options p { margin: 0; font-size: .9rem; color: var(--muted); }
.tour-options__price { font-weight: 700; color: var(--green-800) !important; margin-top: 4px !important; }
.tour-aside { position: sticky; top: 100px; display: grid; gap: 14px; }
@media (max-width: 980px) { .tour-aside { position: static; } }
.tour-aside__card { background: var(--green-900); color: var(--cream); border-radius: 18px; padding: 26px; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.tour-aside__card::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-gold); background-size: 70px; opacity: .08; pointer-events: none; }
.tour-aside__card > * { position: relative; }
.tour-aside__card h2 { color: var(--cream); font-size: 1.6rem; margin-top: 18px; }
.tour-aside__card p { color: rgba(250, 246, 238, .82); font-size: .95rem; }
.tour-price--aside strong { color: var(--gold-300); font-size: 2.6rem; }
.tour-price--aside small { color: rgba(250, 246, 238, .75); }
.tour-price--aside .tour-price__ask { color: var(--gold-300) !important; font-size: 1.8rem !important; }
.tour-aside__actions { display: grid; gap: 10px; margin-top: 6px; }
.tour-aside__actions .btn { justify-content: center; }
.tour-aside__demo { margin: 14px 0 0; }
.tour-aside__back { font-weight: 700; justify-self: start; }
.tour-aside__back svg { transform: scaleX(-1); }

/* Stay request form */
.tour-pick { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; padding: 16px; margin-bottom: 22px; background: var(--sand); border-radius: 12px; border: 1px dashed var(--sand-line); }
.tour-pick .field { flex: 1 1 260px; }
.tour-form .tf-sec { border: 0; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.tour-form .tf-sec > legend { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; width: 100%; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--green-950); padding: 0 0 10px; margin-bottom: 14px; border-bottom: 1px solid var(--sand-line); }
.tour-form .full, .tour-form .tf-ages { grid-column: 1 / -1; }
.tour-form .hint.full { margin: -6px 0 0; color: var(--muted); font-size: .86rem; }
@media (max-width: 640px) { .tour-form .tf-sec { grid-template-columns: 1fr; } }
.tf-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-900); color: var(--gold-300); font: 800 .9rem/1 var(--font-body); flex: none; }
.tour-form .label { display: block; font-weight: 700; font-size: .92rem; margin: 0 0 8px; color: var(--green-950); }
.tf-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .tf-kinds { grid-template-columns: 1fr; } }
.tf-kind { position: relative; display: block; cursor: pointer; }
.tf-kind input { position: absolute; top: 18px; left: 16px; width: 18px; height: 18px; accent-color: var(--green-800); }
.tf-kind > span { display: block; padding: 14px 16px 14px 44px; border: 1.5px solid var(--sand-line); border-radius: 12px; background: var(--white); transition: border-color .2s, background .2s, box-shadow .2s; }
.tf-kind strong { display: block; color: var(--green-950); }
.tf-kind small { color: var(--muted); font-size: .84rem; }
.tf-kind input:checked + span { border-color: var(--green-800); background: var(--green-100); box-shadow: 0 0 0 3px rgba(18, 64, 47, .12); }
.tf-kind input:focus-visible + span { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.tf-kind-fixed { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; margin: 0; padding: 12px 14px; background: var(--green-100); border-radius: 10px; font-weight: 700; color: var(--green-900); }
.tf-kind-fixed svg { width: 18px; height: 18px; flex: none; }
.tf-ages { background: var(--cream); border: 1px solid var(--sand-line); border-radius: 12px; padding: 14px 16px; }
.tf-ages[hidden] { display: none; }
.tf-ages .hint { margin: 0 0 10px; color: var(--muted); font-size: .86rem; }
.tf-ages__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tf-radios, .tf-checks { display: grid; gap: 10px; }
.tour-form [hidden] { display: none !important; }
.received-next { margin: 10px 0 0; font-weight: 600; }
.tour-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; color: rgba(250, 246, 238, .88); font-size: .95rem; }
.tour-steps li::marker { color: var(--gold-300); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .tour-cover__bg > svg, .tour-cover__bg img { animation: none; } }

/* Partner logos (home page) — 2026-10-31 */
.partners { padding: clamp(40px, 5vw, 64px) 0; background: var(--cream); border-top: 1px solid var(--sand-line); }
.partners__grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 14px; }
.partners__item { background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius-sm); height: 84px; display: flex; align-items: center; justify-content: center; padding: 12px 16px; min-width: 0; }
.partners__item img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
@media (max-width: 560px) { .partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.card__full { color: var(--danger); font-weight: 700; }

/* Flight itinerary table (Omra packages) — 2026-11-01 */
.itinerary { margin: 28px 0 8px; }
.itinerary__title { font-family: var(--font-body); font-size: 1.15rem; font-weight: 800; color: var(--green-950); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--sand-line); }
.itinerary__scroll { overflow-x: auto; border: 1px solid var(--sand-line); border-radius: 12px; background: var(--white); }
.itinerary__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.itinerary__table thead th { background: var(--green-900); color: var(--cream); text-align: left; font-weight: 700; font-size: .74rem; letter-spacing: .02em; padding: 10px 10px; white-space: normal; line-height: 1.25; vertical-align: bottom; }
.itinerary__table td, .itinerary__table tbody th { padding: 10px 10px; border-top: 1px solid var(--sand-line); text-align: left; white-space: nowrap; }
.itinerary__table tbody th { font-weight: 800; color: var(--green-900); }
.itinerary__table tbody th svg { display: inline-block; width: 15px; height: 15px; color: var(--gold-text); vertical-align: -2px; margin-right: 6px; }
.itinerary__table tbody tr:nth-child(even) { background: #FBF8F1; }
.itinerary .tbc { color: #8A7A5C; font-style: italic; }
@media (max-width: 640px) {
  /* Phones: one card per flight instead of a wide table. */
  .itinerary__scroll { border: 0; background: none; overflow: visible; }
  .itinerary__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .itinerary__table, .itinerary__table tbody, .itinerary__table tr, .itinerary__table td, .itinerary__table tbody th { display: block; width: 100%; }
  .itinerary__table tr { background: var(--white) !important; border: 1px solid var(--sand-line); border-radius: 12px; margin-bottom: 10px; padding: 6px 0; }
  .itinerary__table tbody th { border: 0; padding: 8px 14px 4px; font-size: 1rem; }
  .itinerary__table td { border: 0; padding: 3px 14px; display: flex; justify-content: space-between; gap: 12px; white-space: normal; }
  .itinerary__table td::before { content: attr(data-label); color: #6B5520; font-size: .82rem; }
}

/* Amounts in a clear, upright typeface (2026-11-01): Cormorant's old-style figures made "3 690 $"
   hard to read (descending 3 and 9). Prices use Mulish with lining, evenly spaced figures. */
.price strong, .dep__prices strong, .tour-price strong, .tour-dep__price strong {
  font-family: var(--font-body); font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.price strong { font-size: 1.65rem; }
.aside-card .price strong { font-size: 2.1rem; }
.tour-price strong { font-size: 1.65rem; }
.tour-price--lg strong { font-size: 2.3rem; }
.tour-price--aside strong { font-size: 2.2rem; }
.dep__prices strong { font-size: 1.3rem; }
.tour-dep__price strong { font-size: 1.4rem; }
/* "Prix sur demande" stays in the elegant display face. */
.tour-price__ask, .price .dep__ask { font-family: var(--font-display) !important; font-weight: 700; }
/* Numbers inside headings ("Novembre 3", "Omra Chaabane 1") also lining when the font offers it. */
h1, h2, h3, .card__title, .tour-card__title { font-variant-numeric: lining-nums; }

/* Ticketing header: the airliner photo fills the whole banner (2026-11-01). */
.tours-hero--flights .tours-hero__bg img { object-position: 50% 50%; } /* wide crop, the airliner is in its middle */
}
.tours-hero--flights .tours-hero__bg::after { background: linear-gradient(90deg, rgba(11, 46, 36, .9) 0%, rgba(11, 46, 36, .55) 34%, rgba(11, 46, 36, 0) 58%); }
@media (max-width: 760px) { .tours-hero--flights .tours-hero__bg img { object-position: 62% 50%; } .tours-hero--flights .tours-hero__bg::after { background: linear-gradient(0deg, rgba(11, 46, 36, .55) 0%, rgba(11, 46, 36, .85) 100%); } }
.tours-hero__dest--static span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(250, 246, 238, .12); border: 1px solid rgba(226, 201, 137, .5); color: var(--cream); font-weight: 700; font-size: .9rem; }
.tours-hero__dest--static svg { width: 15px; height: 15px; color: var(--gold-300); }

/* Partner logos: gentle entrance one after the other, then a light lift on hover (2026-11-01). */
.partners__item { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.partners__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-500); }
.partners__item img { transition: transform .35s var(--ease); }
.partners__item:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: no-preference) {
  .partners.is-visible .partners__item { animation: partner-in .6s var(--ease) both; }
  .partners.is-visible .partners__item:nth-child(2) { animation-delay: .07s; }
  .partners.is-visible .partners__item:nth-child(3) { animation-delay: .14s; }
  .partners.is-visible .partners__item:nth-child(4) { animation-delay: .21s; }
  .partners.is-visible .partners__item:nth-child(5) { animation-delay: .28s; }
  .partners.is-visible .partners__item:nth-child(6) { animation-delay: .35s; }
  .partners.is-visible .partners__item:nth-child(7) { animation-delay: .42s; }
  .partners.is-visible .partners__item:nth-child(8) { animation-delay: .49s; }
  .partners.is-visible .partners__item:nth-child(9) { animation-delay: .56s; }
  .partners.is-visible .partners__item:nth-child(10) { animation-delay: .63s; }
  .partners.is-visible .partners__item:nth-child(11) { animation-delay: .7s; }
  .partners.is-visible .partners__item:nth-child(n+12) { animation-delay: .77s; }
  .partners.is-visible .partners__item img { animation: partner-float 6s ease-in-out 1.4s infinite; }
  .partners.is-visible .partners__item:nth-child(even) img { animation-delay: 2.6s; }
  .partners.is-visible .partners__item:hover img { animation-play-state: paused; }
}
@keyframes partner-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes partner-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* Wide screens: a little taller so more of the photo (and the whole airliner) shows; text kept readable over the wing. */
/* Same height as the "Séjours" banner (2026-11-10). */
.tours-hero--flights h1, .tours-hero--flights .lead { text-shadow: 0 2px 14px rgba(5, 25, 19, .65); }
.received-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }

/* Legal pages: lists and update date */
.prose ul { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose ul li::marker { color: var(--gold-500); }
.prose p + ul { margin-top: -.3em; }
.legal-updated { margin-top: 2.4em; padding-top: 1em; border-top: 1px solid rgba(0,0,0,.08); font-size: .9rem; color: #6b6b6b; font-style: italic; }

/* Contact: Google map loaded on click */
.map-embed { position: relative; display: grid; place-items: center; }
.map-embed > svg, .map-embed > .art { grid-area: 1 / 1; width: 100%; height: 100%; }
.map-embed__cta { grid-area: 1 / 1; align-self: end; margin-bottom: 7%; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; text-align: center; }
.map-embed__cta p { margin: 0; max-width: 34ch; font-size: .85rem; color: #fff; background: rgba(10, 40, 28, .72); padding: 6px 12px; border-radius: 8px; }
.map-embed.is-loaded { display: block; }
.map-links { margin-top: 12px; }
.map-links a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.map-links svg { width: 18px; height: 18px; }
.map-canvas { width: 100%; height: 100%; }
.map-info { font-family: var(--font-body); color: var(--ink); font-size: .92rem; line-height: 1.5; padding: 2px 4px; }
.map-info strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--green-900); }
.map-info a { color: var(--gold-text); font-weight: 700; }

/* Hajj page header: several photos, slow cross-fade and zoom (CSS only, 7 s per photo) */
.page-hero__bg--slides { opacity: .38; }
.page-hero__slide { position: absolute; inset: 0; opacity: 0; animation: heroFade calc(var(--n) * 7s) linear infinite; animation-delay: calc(var(--i) * 7s - 1.2s); }
.page-hero__slide picture, .page-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__slide img { animation: heroZoom calc(var(--n) * 7s) linear infinite; animation-delay: inherit; transform-origin: 50% 40%; }
@keyframes heroFade { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 100% { opacity: 0; } }
@keyframes heroZoom { 0% { transform: scale(1); } 31% { transform: scale(1.09); } 100% { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) {
  .page-hero__slide, .page-hero__slide img { animation: none; }
  .page-hero__slide:first-child { opacity: 1; }
}

/* Hajj page: photo gallery (replaces the video) */
.hajj-gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; aspect-ratio: 16 / 11; }
.hajj-gallery__item { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); min-height: 0; transition-delay: var(--d, 0ms); }
.hajj-gallery__item:first-child { grid-row: span 2; }
.hajj-gallery__item:nth-child(n+4) { display: none; }
.hajj-gallery__item picture, .hajj-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hajj-gallery__item img { transition: transform 1.2s var(--ease); }
.hajj-gallery__item:hover img { transform: scale(1.06); }
@media (min-width: 1000px) {
  .hajj-gallery { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .hajj-gallery__item:nth-child(2) { grid-column: span 2; }
  .hajj-gallery__item:nth-child(n+4) { display: block; }
}
@media (max-width: 560px) { .hajj-gallery { aspect-ratio: 4 / 3; } }

/* "Infos pratiques" hub: the five sections as cards */
.hub-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.hub-card > a, .hub-card > div { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 26px 24px; background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.hub-card > a:hover, .hub-card > a:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold-400); }
.hub-card .illus { width: 64px; height: 64px; }
.hub-card .illus svg { width: 100%; height: 100%; }
.hub-card h2 { font-size: 1.7rem; margin: 4px 0 0; color: var(--green-900); }
.hub-card p { margin: 0; color: var(--muted); }
.hub-card .link-arrow { margin-top: auto; padding-top: 8px; }
.hub-card__n { position: absolute; top: 18px; right: 22px; font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--gold-300); }
.hub-card--help > div { background: var(--green-900); border-color: var(--green-900); color: var(--cream); }
.hub-card--help h2 { color: var(--cream); }
.hub-card--help p { color: rgba(250, 246, 238, .85); }
.hub-card__contact { display: flex; align-items: center; gap: 8px; }
.hub-card__contact svg { width: 18px; height: 18px; color: var(--gold-300); }
.hub-card__contact a { color: var(--gold-300); }
/* Dropdown: the "all" entry first, separated */
.nav .nav__sub .nav__sub-all { border-bottom: 1px solid var(--sand-line); margin-bottom: 4px; padding-bottom: 4px; }
.nav .nav__sub .nav__sub-all a { font-weight: 800; }
@media (max-width: 980px) { .nav .nav__sub .nav__sub-all { border-color: rgba(250, 246, 238, .12); } }
#forfaits { scroll-margin-top: 110px; }

/* Availability: one clear, coloured status everywhere (cards, package page, departures) */
.avail { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: .8rem; font-weight: 800; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; color: #fff; box-shadow: 0 2px 8px rgba(11, 46, 36, .18); }
.avail svg { width: 15px; height: 15px; flex: none; stroke-width: 2.4; }
.avail--open { background: #1E7B4C; }
.avail--last { background: #B86A00; }
.avail--full { background: #B42318; }
.avail--closed, .avail--none { background: #F1EEE6; color: #4F5753; box-shadow: none; border: 1px solid #DDD7C8; white-space: normal; }
.avail--lg { font-size: .95rem; padding: 8px 16px 8px 13px; }
.avail--lg svg { width: 18px; height: 18px; }
.card__avail { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.card__media .card__avail.avail--none, .tour-card__media .card__avail.avail--none { background: rgba(250, 246, 238, .95); }
.tour-card__media .card__avail { top: 14px; left: 14px; bottom: auto; }
.card__meta .avail { box-shadow: none; }
.detail__avail { margin: 16px 0 0; }
.dep-banner__meta .avail { box-shadow: none; }
.price-card__btn--full { background: #B42318; border-color: #B42318; color: #fff; }
.price-card__btn--full:hover { background: #8F1B12; border-color: #8F1B12; color: #fff; }
.price-card__btn--off { background: #ECE8DE; border-color: #ECE8DE; color: #6B6B6B; cursor: default; pointer-events: none; }
.tour-card__media .badge-demo ~ .card__avail { top: 54px; }
.dep-block--full .price-card { opacity: 1; }
.dep-block--full .price-card__price, .dep-block--full .price-card__head { opacity: .7; }

/* Team: last card "Une question ?" (contact), same height as a portrait card */
.team__card--contact { background: var(--green-900); border-color: var(--green-900); color: var(--cream); display: flex; flex-direction: column; align-items: center; }
.team__card--contact h3 { color: var(--cream); }
.team__card--contact .team__role { color: var(--gold-300); font-weight: 600; margin-bottom: 2px; }
.team__photo--icon { background: rgba(201, 162, 75, .12); }
.team__photo--icon svg { width: 46px; height: 46px; color: var(--gold-300); }
.team__phone { margin: 0 0 10px; font-weight: 800; font-size: 1.05rem; font-variant-numeric: lining-nums; }
.team__phone a { color: var(--cream); text-decoration: none; }
.team__actions { display: flex; justify-content: center; gap: 10px; }
.team__action { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(201, 162, 75, .6); color: var(--gold-300); transition: background .2s, color .2s; }
.team__action:hover, .team__action:focus-visible { background: var(--gold-500); border-color: var(--gold-500); color: var(--green-950); }
.team__action svg { width: 19px; height: 19px; }
/* Phones: two portraits per row */
@media (max-width: 560px) {
  .team__grid, .team--compact .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .team__card { padding: 18px 10px 16px; }
  .team__photo { width: 88px; height: 88px; }
  .team__card h3 { font-size: 1.15rem; }
  .team__role { font-size: .8rem; }
  .team__photo--icon svg { width: 34px; height: 34px; }
  .team__action { width: 38px; height: 38px; }
}
.team__card--contact .team__photo--icon { width: 76px; height: 76px; margin-bottom: 12px; }
.team__card--contact .team__photo--icon svg { width: 32px; height: 32px; }
.team__card--contact .team__role { font-size: .82rem; }

/* À propos: our services as photo tiles */
.service-tiles { list-style: none; padding: 0; margin: 18px 0 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.service-tile a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; color: var(--cream); text-decoration: none; box-shadow: var(--shadow); background: var(--green-900); }
.service-tile picture, .service-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.service-tile a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 46, 36, 0) 30%, rgba(11, 46, 36, .72) 62%, rgba(11, 46, 36, .94) 100%); }
.service-tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 4px; padding: 18px 20px; }
.service-tile__body strong { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: #fff; line-height: 1.1; }
.service-tile__body > span:not(.service-tile__go) { font-size: .92rem; color: rgba(250, 246, 238, .9); }
.service-tile__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .85rem; font-weight: 800; color: var(--gold-300); }
.service-tile__go svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.service-tile a:hover img, .service-tile a:focus-visible img { transform: scale(1.06); }
.service-tile a:hover .service-tile__go svg { transform: translateX(4px); }
.prose .service-tiles strong, .prose .service-tiles span { margin: 0; }
@media (max-width: 560px) { .service-tiles { grid-template-columns: 1fr; } }

/* Partner logos: centred on the page, gentle float and a light sheen passing over each logo */
.partners .container > .title-dash { justify-content: center; text-align: center; }
.partners__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.partners__item { position: relative; overflow: hidden; flex: 0 1 170px; }
@media (max-width: 560px) { .partners__grid { gap: 10px; } .partners__item { flex-basis: calc(50% - 5px); } }
@media (prefers-reduced-motion: no-preference) {
  .partners__item::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-18deg); pointer-events: none; }
  .partners.is-visible .partners__item::after { animation: partner-sheen 7s ease-in-out infinite; }
  .partners.is-visible .partners__item:nth-child(3n+2)::after { animation-delay: 1.2s; }
  .partners.is-visible .partners__item:nth-child(3n)::after { animation-delay: 2.4s; }
  .partners.is-visible .partners__item img { animation: partner-float 4.5s ease-in-out 1.2s infinite; }
}
@keyframes partner-sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@keyframes partner-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }