/* ──────────────────────────────────────────────────────────────
   Pawgeot design system (header, hero, cards and
   guide components), with Pawgeot's own palette (bleu nuit, bleu roi, a touch of rouge on
   white and ivory) and Latin typography. One stylesheet, no build step. The variable names
   --navy / --coral are kept from the shared system so components stay interchangeable
   between the sites: here the --coral accent slot holds the royal blue.
   ────────────────────────────────────────────────────────────── */

:root {
  --navy: #172b4d;           /* bleu nuit: headings, header links, dark sections, footer */
  --navy-dark: #10203f;
  --navy-deep: #0b1731;
  --blue: #2446a6;           /* bleu roi: links, icons, accent text (8.4:1 with white) */
  --blue-hover: #1b3785;
  --red: #e63946;            /* rouge: small details only (tricolour rules, current-page marks) */
  --red-strong: #c42b38;     /* red text and the filled quote button: 5.6:1 with white */
  --red-hover: #a32230;
  --red-soft: #f0646f;       /* red on navy: 4.5:1 */
  --sky: #c9d6f2;            /* pale blue for accents on navy */
  --salmon: #ff8a73;         /* "pour chiens et chats" in the home headline, on navy */
  --tricolour: linear-gradient(90deg, #5b7bd6 0 33.34%, #fff 0 66.67%, var(--red) 0);
  --tricolour-on-light: linear-gradient(90deg, var(--blue) 0 33.34%, #d5dae3 0 66.67%, var(--red) 0);
  --coral: var(--blue);      /* the shared accent slot: icons, rules, borders */
  --coral-strong: var(--blue);
  --coral-hover: var(--blue-hover);
  --sage: #3f7a63;           /* a calm green for checks and "OK" states */
  --ivory: #faf9f6;
  --ink: #222c3b;
  --muted: #566578;
  --line: #e2e3e8;
  --bg-soft: var(--ivory);
  --serif: "Pawgeot Serif", Georgia, "Times New Roman", serif;
  --ok: #2f7a4f;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(23, 41, 77, .10);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", sans-serif;
}

/* Playfair Display Italic (SIL OFL, app/assets/fonts/PlayfairDisplay-OFL.txt), subset to Latin and
   renamed as the licence asks: the serif accent of the home headlines, as in the logo. */
@font-face {
  font-family: "Pawgeot Serif"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("/assets/pawgeot-serif-italic-4fca3638.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
em { font-style: normal; }
/* A phrase that should wrap as a unit. */
.keep-together { display: inline-block; }

img { max-width: 100%; display: block; height: auto; }
picture { display: contents; }
a { color: var(--navy); }
a:hover { color: var(--coral-strong); }

:focus-visible { outline: 3px solid #5b7bd6; outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 700; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header > .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 10px; padding-bottom: 10px;
  max-width: 1440px; position: relative;
}
/* The logo: the rooster symbol, then a column with the wordmark
   image ("Paw" in red), a short tricolour rule and the tagline as live text, its <em> in blue. */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand-mark { width: 56px; height: 56px; flex: none; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.brand-word { height: 30px; width: auto; max-width: none; flex: none; }
/* The symbol with a short tricolour rule under it. On white the middle stripe is a light grey,
   or the rule would read blue-gap-red. */
.brand-emblem { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.tricolour-rule { display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--tricolour-on-light); }
/* Two fixed lines: "platform journey" (never wrapped), then "life." in blue italic. */
.brand-tagline { margin-top: 4px; font-size: .84rem; color: var(--muted); line-height: 1.35; letter-spacing: .01em; white-space: nowrap; }
.brand-tagline em { font-style: italic; font-weight: 700; color: var(--blue); }
.tagline-life { display: block; }
/* Laptop widths: the full menu needs the room, so the tagline waits for 1280px (or the burger). */
@media (min-width: 1024px) and (max-width: 1279px) { .brand-tagline { display: none; } }
@media (min-width: 1280px) and (max-width: 1439px) { .brand-tagline { font-size: .8rem; } }

.header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* Narrow screens keep one quote button in the bar itself, beside the menu button. */
.site-header .header-quick-cta { display: none; margin-left: auto; white-space: nowrap; }
.header-nav { display: flex; align-items: center; gap: 2px; }
.header-link, .nav-toggle {
  font-size: .95rem; font-weight: 700; color: var(--navy); text-decoration: none;
  white-space: nowrap; padding: 10px 10px; border-radius: 8px;
}
.header-link:hover, .nav-toggle:hover { color: var(--coral-strong); background: var(--bg-soft); }
.header-link[aria-current="page"], .nav-toggle.is-current { color: var(--coral-strong); }

.nav-item { position: relative; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; font-family: inherit; letter-spacing: inherit;
}
.nav-toggle .caret { width: 14px; height: 14px; transition: transform .15s ease; }
.nav-item:hover .caret, .nav-item.open .caret, .nav-item:focus-within .caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; z-index: 60; min-width: 290px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px;
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.open .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dropdown a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: .93rem; font-weight: 700; color: var(--ink); text-decoration: none;
}
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { background: var(--bg-soft); color: var(--navy); }
.nav-dropdown a small { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
/* The destinations mega menu: regions in three
   columns, anchored to the header's right edge rather than to its button, so it can
   never run off either side of the viewport. A transparent bridge under the button
   keeps :hover alive while the pointer travels down to the menu. */
.nav-item--mega { position: static; }
.nav-item--mega .nav-toggle { position: relative; }
.nav-item--mega .nav-toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; }
.nav-dropdown--wide {
  left: auto; right: 20px; transform: translateY(6px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px;
  width: min(800px, calc(100vw - 40px)); padding: 12px 14px 14px;
  max-height: min(76vh, 660px); overflow-y: auto; overscroll-behavior: contain;
}
.nav-item:hover .nav-dropdown--wide,
.nav-item:focus-within .nav-dropdown--wide,
.nav-item.open .nav-dropdown--wide { transform: none; }
.nav-dropdown--wide .dd-group { min-width: 0; }
.nav-dropdown--wide .dd-span { grid-column: 1 / -1; }
.nav-dropdown--wide .dd-links--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.nav-dropdown--wide a { white-space: nowrap; }
.dd-label { font-size: .74rem; font-weight: 800; letter-spacing: .14em; color: var(--muted); padding: 10px 12px 4px; }
.dd-divider { height: 1px; background: var(--line); margin: 6px 4px; }

/* Country flags: cropped to 4:3 with a hairline edge so white
   flags (Japan) stay visible on white. Always paired with the country's name. */
.flag {
  display: inline-block; width: 16px; height: 12px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); flex: 0 0 auto;
}
.flags { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.flag-label { display: inline-flex; align-items: center; gap: 7px; }
.destination-card .flag { width: 20px; height: 15px; }

/* Route chip above a guide's h1: France → Japon. */
.route-chip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 14px;
  font-size: .9rem; font-weight: 700; color: #e4eaf4;
}
.route-chip .flag { width: 20px; height: 15px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.route-chip svg { width: 16px; height: 16px; color: #c3cee2; }
.route-chip .route-arrow { color: var(--red-soft); }

/* Language switch: a plain external link to the English-language sister site. */
.lang-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 700; color: var(--navy); text-decoration: none;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 13px; margin: 0 6px;
  white-space: nowrap; letter-spacing: 0;
}
.lang-link svg { width: 16px; height: 16px; }
.lang-link:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-soft); }

/* ── Mobile menu (burger + slide-down panel) ───────── */
.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 6px 8px; border-radius: 10px; flex: 0 0 auto; margin-right: -8px;
  flex-direction: column; align-items: center; gap: 4px; color: var(--navy);
}
.menu-toggle-box { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 24px; height: 20px; }
.menu-toggle .bar {
  display: block; height: 2.5px; width: 100%; border-radius: 2px;
  background: var(--navy); transition: transform .3s ease, opacity .2s ease;
}
.menu-toggle-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.menu-open .menu-toggle .bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .menu-toggle .bar:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle .bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu {
  display: none; grid-template-rows: 0fr; visibility: hidden;
  background: var(--bg-soft);
  transition: grid-template-rows .42s cubic-bezier(.22, 1, .36, 1), visibility .42s;
}
.menu-open .mobile-menu { grid-template-rows: 1fr; visibility: visible; box-shadow: 0 18px 30px rgba(23, 41, 77, .16); }
.mobile-menu-inner { overflow: hidden; min-height: 0; }
/* Compact: rows of 44px (the tap-target floor), slightly smaller type, short group gaps. */
.mobile-menu-scroll {
  max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 2px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.mobile-menu a:not(.btn), .msub-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 9px 2px; font-size: .95rem; font-weight: 700; line-height: 1.4;
  color: var(--navy); text-decoration: none; text-align: left;
  border: 0; border-bottom: 1px solid var(--line); background: none;
  font-family: inherit; letter-spacing: inherit; cursor: pointer;
}
.mobile-menu a[aria-current="page"] { color: var(--coral-strong); box-shadow: inset 3px 0 0 var(--red); padding-left: 12px; }
.msub-toggle .caret { width: 16px; height: 16px; color: var(--coral); transition: transform .25s ease; }
.msub.open .msub-toggle .caret { transform: rotate(180deg); }
.msub-panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1), visibility .32s;
}
.msub.open .msub-panel { grid-template-rows: 1fr; visibility: visible; }
.msub-inner { overflow: hidden; min-height: 0; }
.mobile-menu .msub-inner a:not(.btn) {
  margin-left: 10px; padding-left: 14px; width: calc(100% - 10px);
  border-left: 2px solid var(--line); font-weight: 600; font-size: .92rem;
}
.mobile-menu .msub-inner a[aria-current="page"] { box-shadow: none; border-left-color: var(--coral); }
.mobile-menu a.mobile-lang { justify-content: flex-start; }
.mobile-lang svg { width: 18px; height: 18px; }
.mobile-menu-ctas { display: grid; gap: 8px; margin-top: 14px; }
.mobile-menu-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: var(--muted); padding: 12px 2px 2px; }
.msub-inner .mobile-menu-label { margin-left: 10px; padding-left: 16px; }
.mobile-menu-ctas .btn { width: 100%; }

.mobile-menu-scroll > * { opacity: 0; transform: translateY(-10px); transition: opacity .28s ease, transform .28s ease; }
.menu-open .mobile-menu-scroll > * { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 9) * 35ms); }
.mobile-menu-scroll > :nth-child(1) { --i: 0; }
.mobile-menu-scroll > :nth-child(2) { --i: 1; }
.mobile-menu-scroll > :nth-child(3) { --i: 2; }
.mobile-menu-scroll > :nth-child(4) { --i: 3; }
.mobile-menu-scroll > :nth-child(5) { --i: 4; }
.mobile-menu-scroll > :nth-child(6) { --i: 5; }
.mobile-menu-scroll > :nth-child(7) { --i: 6; }
.mobile-menu-scroll > :nth-child(8) { --i: 7; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none; font-family: inherit;
  font-weight: 700; letter-spacing: .01em; border-radius: 999px; text-align: center;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-primary {
  background: var(--red-strong); color: #fff;
  padding: 14px 30px; font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(196, 43, 56, .28);
}
.btn-primary:hover { background: var(--red-hover); color: #fff; transform: translateY(-1px); }
.btn-small { padding: 9px 18px; font-size: .92rem; box-shadow: none; }
/* WhatsApp is the secondary channel: outlined, so the quote button stays the one filled
   call to action. White label on the navy sections it sits in; on light panels (the
   mobile menu) a dark green that keeps AA contrast. */
.btn-ghost {
  background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .6);
  padding: 12px 26px; font-size: 1rem;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
.btn-outline {
  background: #fff; color: var(--navy); border: 2px solid var(--navy);
  padding: 12px 26px; font-size: 1rem;
}
.btn-outline:hover { background: var(--navy); color: #fff; }

/* ── Hero ───────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 60%, var(--navy-deep) 100%);
  color: #fff; padding: 64px 0 56px;
}
.hero .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero--media { padding: 0; }
.hero--media .container { max-width: 1220px; grid-template-columns: 1.1fr .9fr; align-items: stretch; }
.hero-copy {
  padding: 64px 0 56px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, .07); color: #e3e9f6;
  border: 1px solid rgba(255, 255, 255, .26);
  font-size: .85rem; font-weight: 700; letter-spacing: .04em;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 18px;
}
/* The one flag on the page: a small blue-white-red mark before the home kicker. */
.hero-kicker::before {
  content: ""; flex: none; width: 18px; height: 12px; border-radius: 2px;
  background: var(--tricolour);
}
.hero h1 { font-size: clamp(1.85rem, 4.2vw, 2.9rem); line-height: 1.32; font-weight: 800; margin-bottom: 18px; }
.hero-motto { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--sky); font-weight: 700; letter-spacing: .01em; margin-bottom: 14px; }
.hero p.lead { font-size: 1.1rem; color: #d3dcec; margin-bottom: 28px; max-width: 33em; }
.hero p a:not(.btn) { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 3px; }
.hero p a:not(.btn):hover { color: var(--sky); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-alt { font-size: .95rem; color: #c3cee2; margin: -12px 0 22px; }
.hero-alt a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.hero-alt a:hover { color: var(--sky); }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .93rem; color: #c3cee2; }
.hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust svg { width: 16px; height: 16px; color: #7fd4a8; }

/* Photo backdrop under a navy scrim. The scrim is what keeps
   white copy above AA contrast over a bright outdoor photo: don't lighten it. */
.hero--photo { position: relative; overflow: hidden; }
.hero--photo > .container { position: relative; z-index: 2; }
.hero-banner { display: block; position: absolute; inset: 0; z-index: 0; }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(11, 25, 54, .95) 0%, rgba(11, 25, 54, .90) 45%, rgba(11, 25, 54, .82) 100%);
}


/* Guide / inner-page hero */
.hero--guide { padding: 48px 0 44px; }
.hero--guide .container { display: block; max-width: 880px; }
.hero--guide p.lead { margin-bottom: 0; max-width: none; }
.hero--guide .hero-ctas { margin: 26px 0 0; }

.breadcrumbs { font-size: .88rem; color: #b8c4da; margin-bottom: 16px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin: 0 9px; color: #6f7f9a; }
.breadcrumbs a { color: #d3dcec; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }

/* ── Sections ───────────────────────────────────────── */
section { padding: 64px 0; }
.section-title { font-size: clamp(1.5rem, 3vw, 2.05rem); color: var(--navy); font-weight: 800; text-align: center; margin-bottom: 12px; }
.section-sub { text-align: center; color: var(--muted); max-width: 40em; margin: 0 auto 40px; }
.bg-soft { background: var(--bg-soft); }
.center { text-align: center; }
.section-cta { margin-top: 32px; text-align: center; }

/* Card grid (benefits, services) */
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.benefit-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.benefit-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.benefit {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: var(--shadow);
}
.benefit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.benefit-head svg { width: 26px; height: 26px; color: var(--coral); flex: 0 0 auto; }
.benefit h3 { color: var(--navy); font-size: 1.06rem; }
.benefit p { color: var(--muted); font-size: .95rem; }
.benefit .card-link { display: inline-block; margin-top: 10px; font-weight: 700; font-size: .93rem; color: var(--coral-strong); text-decoration: none; }
.benefit .card-link:hover { text-decoration: underline; }
/* A whole card that is one link (article hub, home page reading list). */
a.benefit--link { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
a.benefit--link:hover { transform: translateY(-2px); border-color: var(--navy); color: inherit; }
a.benefit--link:hover .card-link { text-decoration: underline; }

/* Destination cards: the route and the one planning fact that drives its calendar. */
.destination-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.destination-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .15s ease, border-color .15s ease;
}
.destination-card:hover { transform: translateY(-2px); border-color: var(--navy); color: var(--ink); }
.destination-card h3 { color: var(--navy); font-size: 1.12rem; }
.destination-card p { color: var(--muted); font-size: .93rem; flex: 1; }
.destination-card .lead-time {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 700; color: var(--coral-hover);
  background: #eef2fb; border: 1px solid #cfdaf3; border-radius: 999px; padding: 3px 11px;
}
.destination-card .lead-time svg { width: 14px; height: 14px; }
.destination-card .go { font-weight: 700; font-size: .92rem; color: var(--navy); }

/* Steps (how it works) */
.steps-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps-grid.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: 0 auto; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.step .num {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--step-c, var(--coral)) 14%, #fff);
  color: var(--step-c, var(--coral-strong)); font-weight: 800; font-size: 1.05rem;
}
.step h3 { color: var(--navy); font-size: 1.04rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .93rem; }

/* Split media section: copy left, full-bleed carousel right */
.media-section { padding: 0; }
.media-section > .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: stretch; }
.media-section .media-text { padding: 64px 0; align-self: center; }
.media-section .media-text .section-title, .media-section .media-text .section-sub { text-align: left; margin-left: 0; }
.media-section .media-figure { align-self: center; padding: 48px 0; }

.check-list { list-style: none; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list svg { width: 20px; height: 20px; color: var(--ok); flex: 0 0 auto; margin-top: 4px; }
.check-list b { color: var(--navy); }

/* Navy feature panel (timing warning on the home page, etc.) */
.feature-panel { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; }
.feature-panel .panel { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.feature-panel h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 800; margin-bottom: 14px; }
.feature-panel p { color: #d3dcec; margin-bottom: 14px; }
.feature-panel ul { list-style: none; margin-bottom: 22px; }
.feature-panel ul li { padding: 5px 0 5px 22px; color: #e4eaf4; position: relative; }
.feature-panel ul li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.feature-panel a:not(.btn) { color: #fff; }

.hero-panel {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius); padding: 26px;
}
.hero-panel h3 { font-size: 1.02rem; color: var(--sky); margin-bottom: 12px; letter-spacing: .02em; }
.hero-panel dl { display: grid; gap: 0; }
.hero-panel dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.hero-panel dl > div:last-child { border-bottom: 0; }
.hero-panel dt { color: #e4eaf4; }
.hero-panel dd { color: #fff; font-weight: 700; white-space: nowrap; }
.hero-panel .panel-note { font-size: .82rem; color: #aebbd6; margin: 12px 0 0; }

/* ── FAQ ────────────────────────────────────────────── */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-list details {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 12px; overflow: hidden;
}
.faq-list summary {
  cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 700; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--coral-strong); flex: 0 0 auto; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list .faq-answer { padding: 0 20px 18px; color: var(--ink); font-size: .97rem; }
.faq-list .faq-answer p + p { margin-top: 8px; }
.faq-group { max-width: 780px; margin: 0 auto; }
.faq-group + .faq-group { margin-top: 36px; }
.faq-group h2 { color: var(--navy); font-size: 1.25rem; margin-bottom: 14px; }

/* ── Contact ────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 20px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .15s ease, border-color .15s ease;
}
a.contact-card:hover { transform: translateY(-2px); border-color: var(--navy); color: var(--ink); }
.contact-card svg { width: 34px; height: 34px; color: var(--coral); margin-bottom: 4px; }
.contact-card h2, .contact-card h3 { color: var(--navy); font-size: 1.08rem; }
.contact-card p { color: var(--muted); font-size: .93rem; overflow-wrap: anywhere; }
.contact-card .contact-action { margin-top: 6px; font-weight: 700; color: var(--coral-strong); }
.config-note {
  max-width: 720px; margin: 24px auto 0; padding: 16px 18px; border-radius: 12px;
  background: #fffaf0; border: 1px dashed #e0b45a; color: #6b4c12; font-size: .92rem;
}

/* ── Photos ─────────────────────────────────────────── */
.photo { border-radius: var(--radius); overflow: hidden; background: var(--line); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* Two portraits over one landscape: the media column of split sections. */
.photo-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.photo-mosaic .photo:nth-child(1), .photo-mosaic .photo:nth-child(2) { aspect-ratio: 4 / 5; }
.photo-mosaic .photo:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 5 / 3; }

/* ── Bottom CTA ─────────────────────────────────────── */
.bottom-cta { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; text-align: center; }
.bottom-cta h2 { font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 800; margin-bottom: 12px; }
.bottom-cta p { color: #d3dcec; margin: 0 auto 26px; max-width: 36em; }
.bottom-cta .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ── Footer ─────────────────────────────────────────── */
.site-footer { background: var(--navy-deep); color: #a9b7cf; padding: 46px 0 28px; font-size: .9rem; }
.site-footer a { color: #d3dcec; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 30px; }
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-logo .brand-mark { width: 56px; height: 56px; flex: none; }
.footer-logo .brand-word { height: 32px; width: auto; }
.footer-motto { color: #fff; font-weight: 700; letter-spacing: .01em; margin-bottom: 8px; }
/* A short tricolour rule between the logo and the motto. */
.footer-motto::before {
  content: ""; display: block; width: 54px; height: 3px; margin-bottom: 14px; border-radius: 2px;
  background: var(--tricolour);
}
.footer-brand p { max-width: 28em; }
.footer-col h2 { color: #fff; font-size: .92rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 12px; }
.footer-col a { display: block; margin-bottom: 9px; }
.footer-base {
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
}
.footer-company { font-size: .84rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ── Guide pages (destinations, services) ───────────── */
.guide-body { max-width: 880px; margin: 0 auto; }
.guide-body > section { padding: 44px 0 0; }
.guide-body > section:last-child { padding-bottom: 60px; }
.guide-body h2 { color: var(--navy); font-size: clamp(1.3rem, 2.6vw, 1.65rem); font-weight: 800; margin-bottom: 12px; }
.guide-body h3 { color: var(--navy); font-size: 1.1rem; margin: 22px 0 8px; }
.guide-body p { margin-bottom: 14px; }
.guide-body h2 + p.intro { color: var(--muted); }
.guide-body [id] { scroll-margin-top: 90px; }
.guide-list { margin: 0 0 18px 22px; }
.guide-list li { margin-bottom: 7px; }
.guide-list b { color: var(--navy); }
.guide-note { font-size: .88rem; color: var(--muted); margin-top: 12px; }
.guide-note a { font-weight: 600; }

.guide-updated { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .88rem; color: var(--muted); }
.guide-updated svg { width: 16px; height: 16px; flex: 0 0 auto; color: #2e9e6b; }
.hero .guide-updated { color: #c3cee2; }
.hero .guide-updated svg { color: #7fd4a8; }

.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-top: 36px; }
.toc h2 { font-size: 1rem; margin-bottom: 8px; }
.toc ol { margin-left: 20px; display: grid; gap: 4px; }
.toc a { font-weight: 600; }

.table-wrap { overflow-x: auto; margin-top: 18px; -webkit-overflow-scrolling: touch; }
.guide-table {
  width: 100%; border-collapse: collapse; font-size: .94rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); min-width: 560px;
}
.guide-table th { background: var(--navy); color: #fff; text-align: left; padding: 12px 16px; font-size: .9rem; letter-spacing: .02em; }
.guide-table td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.guide-table tbody tr:nth-child(even) { background: var(--bg-soft); }
.guide-table td:first-child { font-weight: 700; color: var(--navy); min-width: 6.5em; }
.guide-table td em { font-weight: 700; color: var(--coral-strong); }

/* Phones: a table that script/table-labels has prepared (`guide-table--stack`, `data-label` on every
   cell) turns each row into a card, the first cell as its title and each other cell under its
   column heading, so no column hides off-screen. Tables with merged cells keep scrolling sideways. */
@media (max-width: 600px) {
  .guide-table--stack { min-width: 0; border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
  .guide-table--stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .guide-table--stack, .guide-table--stack tbody, .guide-table--stack tr, .guide-table--stack td { display: block; width: 100%; }
  .guide-table--stack tr {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(23, 41, 77, .06); overflow: hidden;
  }
  .guide-table--stack tbody tr:nth-child(even) { background: #fff; }
  .guide-table--stack td { border-top: 0; padding: 8px 16px; }
  .guide-table--stack td:first-child { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 11px 16px; }
  .guide-table--stack td:last-child { padding-bottom: 14px; }
  .guide-table--stack td:not(:first-child)::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  }
}

.window-chip {
  display: inline-block; background: rgba(36, 70, 166, .07); color: var(--coral-strong);
  border: 1px solid rgba(36, 70, 166, .3); border-radius: 14px; max-width: 100%;
  font-size: .8rem; font-weight: 700; padding: 1px 10px; letter-spacing: 0;
}

.timeline { list-style: none; counter-reset: tstep; margin-top: 26px; }
.timeline > li { counter-increment: tstep; position: relative; padding: 0 0 30px 62px; }
.timeline > li::before {
  content: counter(tstep); position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.timeline > li::after { content: ""; position: absolute; left: 20px; top: 48px; bottom: 6px; border-left: 2px dashed var(--line); }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li:last-child::after { display: none; }
.timeline h3 { color: var(--navy); font-size: 1.08rem; margin: 6px 0 6px; }
.timeline h3 .window-chip { margin-left: 8px; vertical-align: 2px; }
.timeline p { color: var(--ink); font-size: .97rem; margin-bottom: 6px; }

.callout {
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 5px solid var(--navy);
  border-radius: 10px; padding: 16px 18px; margin-top: 16px; font-size: .95rem;
}
.callout-risk { background: #fdf2f3; border-color: #f2cdd0; border-left-color: var(--red); color: #6e1d25; }
.callout-risk b { color: var(--red-hover); }
.callout p:last-child { margin-bottom: 0; }

.sources { font-size: .9rem; }
.sources li { margin-bottom: 6px; }
.sources a { overflow-wrap: anywhere; }

/* The calm "let us handle it" card placed mid-guide. */
.service-intro {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 5px solid var(--coral); border-radius: var(--radius);
}
.guide-body > section.service-intro { padding: 26px clamp(18px, 3.5vw, 32px); margin-top: 44px; }
.service-intro h2 { font-size: 1.22rem; }
.service-intro .hero-ctas { margin: 18px 0 0; }
/* The same card as the first screen of a route guide, before the rules (corridors/_service_summary). */
.guide-body > section.service-intro--top { margin-top: 0; }
.service-intro--top h2 { font-size: 1.4rem; }

/* The short quote invitation after an article's first section (articles/_inline_cta): text on the
   left, the button on the right; stacked on phones, button full width. */
.inline-cta {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 28px; align-items: center;
  margin-top: 40px; padding: 22px clamp(18px, 3.5vw, 28px);
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 5px solid var(--red-strong);
  border-radius: var(--radius);
}
.guide-body .inline-cta p { margin: 0; }
.inline-cta-title { color: var(--navy); font-weight: 800; font-size: 1.08rem; line-height: 1.35; }
.inline-cta-text { color: var(--muted); font-size: .97rem; }
.inline-cta-actions {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.inline-cta-actions .btn { padding: 12px 24px; font-size: 1rem; white-space: nowrap; }
.inline-cta-link { font-size: .9rem; font-weight: 700; color: var(--blue); padding: 6px 4px; }
@media (max-width: 760px) {
  .inline-cta { grid-template-columns: 1fr; }
  .inline-cta-actions { grid-column: auto; grid-row: auto; margin-top: 14px; }
  .inline-cta-actions .btn { width: 100%; white-space: normal; }
}

.route-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.route-pills a {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--bg-soft);
  font-weight: 700; font-size: .92rem; color: var(--navy); text-decoration: none;
  transition: border-color .15s, color .15s, transform .15s;
}
.related-subtitle { margin-top: 26px; }
.route-pills a:hover { border-color: var(--coral); color: var(--coral-strong); transform: translateY(-1px); }

/* Services page: one section per service, icon + body */
.service-block { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 34px 0; border-top: 1px solid var(--line); }
.service-block:first-of-type { border-top: 0; }
.service-block > div { min-width: 0; }
.service-block .service-icon {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 70, 166, .07); color: var(--coral-strong);
}
.service-block .service-icon svg { width: 28px; height: 28px; }
.service-block h2 { margin-bottom: 8px; }
.guide-body > section.service-block { padding: 34px 0; }

/* Legal prose */
.legal-body h2 { font-size: 1.2rem; margin: 30px 0 10px; }
.legal-body ul, .legal-body ol { margin: 0 0 14px 22px; }
.legal-body li { margin-bottom: 7px; }
.legal-meta { font-size: .88rem; color: var(--muted); }
.review-flag {
  background: #fffaf0; border: 1px dashed #e0b45a; color: #6b4c12; border-radius: 10px;
  padding: 12px 16px; font-size: .9rem; margin-top: 18px;
}
.company-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin-top: 10px; }
.company-facts dt { font-weight: 700; color: var(--navy); }

/* 404 */
.nf-section { padding: 64px 0 80px; text-align: center; }
.nf-section h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.nf-section .nf-lead { color: var(--muted); font-size: 1.08rem; max-width: 34em; margin: 0 auto 30px; }
.nf-section .route-pills { justify-content: center; margin-top: 30px; }
.nf-ctas { justify-content: center; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1023px) {
  .header-actions { display: none; }
  .site-header .header-quick-cta { display: inline-flex; }
  .menu-toggle { display: inline-flex; }
  .mobile-menu { display: grid; }

  .hero .container { grid-template-columns: 1fr; gap: 30px; }
  .hero--media .container { gap: 26px; }
  .hero-copy { padding: 44px 0 8px; }

  .media-section > .container { grid-template-columns: 1fr; gap: 0; }
  .media-section .media-text { padding: 44px 0 28px; }
  .media-section .media-figure { padding: 0 0 44px; max-width: 560px; }
  .benefit-grid, .benefit-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .benefit-grid.cols-3 > :nth-child(3):last-child { grid-column: 1 / -1; }
  .destination-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid.cols-3 { grid-template-columns: 1fr; max-width: 560px; }
  .feature-panel .panel { grid-template-columns: 1fr; gap: 26px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  section { padding: 44px 0; }
  .section-sub { margin-bottom: 28px; }
  .site-header > .container { padding-top: 8px; padding-bottom: 8px; }
  .brand { gap: 8px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-word { height: 24px; }
  /* Phones: "platform" over "journey", small, without "life" (no room beside the menu). */
  .brand-tagline { margin-top: 2px; font-size: .62rem; line-height: 1.3; letter-spacing: 0; }
  .tagline-platform { display: block; }
  .tagline-life { display: none; }
  .brand-emblem { gap: 4px; }
  .tricolour-rule { width: 36px; }
  .site-header .header-quick-cta { padding: 8px 12px; font-size: .86rem; letter-spacing: .02em; }
  .menu-toggle { padding: 6px 4px; margin-right: -4px; }
  .menu-toggle-label { letter-spacing: .04em; }

  .hero-copy { padding: 34px 0 4px; }
  .hero p.lead { font-size: 1.02rem; margin-bottom: 22px; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .hero-trust { gap: 6px 16px; font-size: .86rem; }
  .hero-panel { padding: 20px 16px; }

  .benefit-grid, .benefit-grid.cols-2, .benefit-grid.cols-3,
  .destination-grid, .steps-grid { grid-template-columns: 1fr; }
  .benefit { padding: 20px 18px; }

  .destination-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .service-block { grid-template-columns: 1fr; gap: 12px; }
  .timeline > li { padding-left: 54px; }
  .timeline > li::before { width: 38px; height: 38px; }
  .timeline > li::after { left: 18px; }

  .bottom-cta .btn { width: 100%; max-width: 360px; }
  .footer-cols { grid-template-columns: 1fr; gap: 26px; }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .company-facts { grid-template-columns: 1fr; gap: 2px; }
  .company-facts dd { margin-bottom: 8px; }
}

/* Narrowest phones (320–380px): globe without the code, a smaller wordmark, so nothing overlaps. */
@media (max-width: 380px) {
  .brand { gap: 6px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-word { height: 20px; }
  .tricolour-rule { width: 30px; }
}
/* Phones keep the two tagline lines now that the quote button has its own row (.header-cta-bar);
   only the very narrowest drop them beside the globe and the menu. */
@media (max-width: 330px) {
  .brand-tagline { display: none; }
}
@media (max-width: 340px) {
  .brand-word { height: 17px; }
  .site-header .header-quick-cta { padding: 7px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
}

@media (prefers-contrast: more) {
  .hero--photo::after { background: rgba(11, 25, 54, .96); }
}

/* ══ Landing page components ═══════════════════════════════════════════════ */

/* Section h2 with a coral first line ("Pourquoi Pawgeot ?") */
.section-kicker { display: block; font-size: .78em; color: var(--red-strong); margin-bottom: 4px; letter-spacing: .03em; }
/* The emphasised end of the home headlines: the logo's serif italic, in pale blue on navy. */
.hero h1 em, .cargo-cta h2 em { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: 0; color: var(--sky); }
.hero h1 em { font-size: 1.08em; }
.hero-accent { color: var(--salmon); }
.why-cta { margin-top: 30px; }
.why-benefits { margin-top: 48px; }

/* Photo carousel (gallery_controller.js) */
.gallery-wrap { position: relative; }
.gallery-track {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 16px; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-card {
  flex: 0 0 auto; width: clamp(220px, 23vw, 250px); aspect-ratio: 4 / 5;
  overflow: hidden; scroll-snap-align: center; background: var(--line);
}
.gallery-card img { width: 100%; height: 100%; object-fit: cover; }
.gallery-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(18, 36, 74, .65); background: rgba(23, 41, 77, .55); color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: background .15s;
}
.gallery-btn:hover { background: rgba(23, 41, 77, .85); }
.gallery-btn.prev { left: -10px; }
.gallery-btn.next { right: -10px; }
/* One full-bleed slide at a time (hero and split sections) */
.gallery--hero { height: 100%; }
.gallery--hero .gallery-track { height: 100%; gap: 0; padding: 0; }
.gallery--hero .gallery-card {
  flex: 0 0 100%; width: 100%; height: 100%; aspect-ratio: auto;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.gallery--hero .gallery-btn.prev { left: 12px; }
.gallery--hero .gallery-btn.next { right: 12px; }
.hero-media { align-self: stretch; display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 2; }
.hero-media .gallery-wrap { flex: 1; min-height: 0; }
.hero--media .hero-copy { padding: 72px 0 64px; }
.media-section .media-figure:has(.gallery-wrap) { align-self: stretch; display: flex; flex-direction: column; min-height: 520px; padding: 0; }
.media-section .media-figure .gallery-wrap { flex: 1; min-height: 0; }

/* The client portal, shown as it really looks: a browser window with the desktop
   screenshot, and a phone with the mobile one overlapping its corner. */
.portal-showcase { position: relative; max-width: 960px; margin: 0 auto; padding: 0 70px 34px 0; }
.dash-frame {
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(23, 41, 77, .18);
}
.dash-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: #eef2f7; border-bottom: 1px solid var(--line);
}
.dash-dot { width: 10px; height: 10px; border-radius: 50%; background: #d3dbe6; }
.dash-dot:nth-child(1) { background: #f28b82; }
.dash-dot:nth-child(2) { background: #fdd663; }
.dash-dot:nth-child(3) { background: #81c995; }
.dash-url {
  flex: 1; max-width: 340px; margin-left: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; color: var(--muted);
  padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0;
}
.dash-frame picture, .portal-phone picture { display: block; }
.dash-frame img { width: 100%; height: auto; }
.portal-phone {
  position: absolute; right: 0; bottom: 0; width: 200px;
  padding: 8px; background: #101826; border-radius: 30px;
  box-shadow: 0 24px 50px rgba(13, 27, 56, .35);
}
.portal-phone img { width: 100%; height: auto; border-radius: 23px; }
.portal-caption { color: var(--muted); font-size: .85rem; margin-top: 14px; max-width: calc(100% - 250px); }
.dash-points {
  list-style: none; display: flex; justify-content: center; gap: 14px 30px;
  flex-wrap: wrap; margin: 30px auto 0; max-width: 980px;
}
.dash-points li { display: flex; align-items: center; gap: 9px; font-size: .96rem; font-weight: 700; color: var(--ink); }
.dash-points svg { width: 20px; height: 20px; color: var(--coral); flex: 0 0 auto; }

/* Home "start here": every route and article as pills under the six cards */
.home-routes { margin-top: 36px; }
.home-routes-title { color: var(--navy); font-size: 1rem; margin: 20px 0 12px; text-align: center; }
.home-routes .route-pills { justify-content: center; }
.home-routes .route-pills a { background: #fff; }
.route-pills .flag-label { gap: 6px; }

/* Client segments (who-we-serve) */
.client-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.client-list li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: 0 4px 14px rgba(23, 41, 77, .06);
}
.client-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.client-icon {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
  background: rgba(36, 70, 166, .08); color: var(--coral-strong);
  display: flex; align-items: center; justify-content: center;
}
.client-icon svg { width: 19px; height: 19px; }
.client-list h3 { color: var(--navy); font-size: 1rem; line-height: 1.4; }
.client-list p { color: var(--muted); font-size: .9rem; line-height: 1.65; }

/* Air-cargo panel */
.cargo-cta { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; }
.cargo-cta .panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.cargo-cta h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 800; margin-bottom: 16px; }
.cargo-cta ul { list-style: none; margin-bottom: 24px; }
.cargo-cta ul li { padding: 5px 0; color: #e4eaf4; }
.cargo-cta ul li::before { content: "→ "; color: var(--red-soft); font-weight: 800; }
.cargo-steps { list-style: none; counter-reset: cstep; }
.cargo-steps li {
  counter-increment: cstep; display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, .14); color: #e4eaf4;
}
.cargo-steps li:last-child { border-bottom: 0; }
.cargo-steps li::before {
  content: counter(cstep); flex: 0 0 28px; height: 28px; border-radius: 50%;
  background: var(--coral-strong); color: #fff; font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.cargo-cta .panel-note a { color: #fff; }

/* Route directory (/destinations) */
.route-search { position: relative; max-width: 440px; margin: 0 auto 26px; }
.route-search svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.route-search input {
  width: 100%; padding: 12px 16px 12px 44px; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff; box-shadow: var(--shadow);
}
.route-search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(23, 41, 77, .14); }
.route-search-hit { background: #fff2a8; color: inherit; border-radius: 2px; }
.corridor-directory {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px 18px;
}
.corridor-group { min-width: 0; }
.corridor-region {
  display: flex; align-items: baseline; gap: 6px; padding: 8px 10px 4px;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: var(--muted);
}
.corridor-region span { font-weight: 600; opacity: .75; letter-spacing: 0; }
.corridor-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  text-decoration: none; transition: background .15s ease;
}
.corridor-link:hover { background: var(--bg-soft); }
.corridor-name { flex: 1 1 auto; min-width: 0; font-size: .97rem; font-weight: 700; color: var(--ink); }
.corridor-link:hover .corridor-name { color: var(--navy); }
.corridor-go { flex: 0 0 auto; color: var(--coral); font-weight: 800; opacity: .55; transform: translateX(-3px); transition: transform .15s, opacity .15s; }
.corridor-link:hover .corridor-go, .corridor-link:focus-visible .corridor-go { opacity: 1; transform: none; }
.route-no-results { text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); margin-top: 18px; }
.route-no-results b { color: var(--navy); }
.route-custom { margin-top: 22px; }

@media (max-width: 1023px) {
  .hero--media .hero-copy { padding: 44px 0 8px; }
  .hero-media { margin: 0 -20px; }
  .gallery--hero, .gallery--hero .gallery-track { height: auto; }
  .gallery--hero .gallery-card { height: auto; aspect-ratio: 4 / 5; }
  .media-section .media-figure:has(.gallery-wrap) { min-height: 0; margin: 0 -20px; max-width: none; }
  .corridor-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cargo-cta .panel { grid-template-columns: 1fr; gap: 26px; }
  .portal-showcase { padding: 0 40px 30px 0; }
  .portal-phone { width: 160px; border-radius: 24px; padding: 6px; }
  .portal-phone img { border-radius: 19px; }
}

@media (max-width: 600px) {
  .hero-media { margin: 0 -16px; }
  .media-section .media-figure:has(.gallery-wrap) { margin: 0 -16px; }
  .gallery--hero .gallery-card { aspect-ratio: 4 / 4.6; }
  .client-list { grid-template-columns: 1fr; }
  .corridor-directory { grid-template-columns: 1fr; padding: 8px 10px 12px; }
  /* Phones see the portal as they would use it: the mobile screenshot, framed. */
  .portal-showcase { padding: 0; display: flex; flex-direction: column; align-items: center; }
  .portal-showcase .dash-frame { display: none; }
  .portal-phone { position: static; width: min(270px, 78vw); }
  .dash-points { flex-direction: column; align-items: flex-start; gap: 12px; max-width: 320px; }
  .why-cta .btn { width: 100%; max-width: 360px; }
}
@media (max-width: 1023px) { .portal-caption { max-width: calc(100% - 190px); } }
@media (max-width: 600px) { .portal-caption { max-width: none; text-align: center; margin-top: 16px; } }

/* ── Article hubs: topic sections, related cards ───────────────── */
.topic-nav { margin-bottom: 8px; }
.topic-title { color: var(--navy); font-size: 1.2rem; margin: 40px 0 16px; padding-left: 12px; border-left: 4px solid var(--coral); scroll-margin-top: 90px; }
.benefit h4 { color: var(--navy); font-size: 1.06rem; }
.related-grid .benefit h3 { margin-bottom: 6px; }
.guide-table small { color: var(--muted); font-size: .8rem; }
.nav-dropdown--wide a.dd-more { color: var(--coral-strong); font-size: .86rem; }

/* ── Pawgeot additions ───────────────────────────────── */

/* Language dropdown: a small globe button with the current code; the list opens on hover,
   focus or click (nav-menu controller), aligned right so it never leaves the screen. */
.lang-switch { position: relative; display: inline-flex; margin: 0 6px; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 700; color: var(--navy); white-space: nowrap;
}
.lang-toggle:hover, .lang-switch.open .lang-toggle { border-color: var(--navy); }
.lang-globe { width: 15px; height: 15px; color: var(--blue); flex: none; }
.lang-toggle .caret { width: 12px; height: 12px; flex: none; transition: transform .15s ease; }
.lang-switch:hover .caret, .lang-switch:focus-within .caret, .lang-switch.open .caret { transform: rotate(180deg); }
.lang-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 148px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
/* Bridges the gap under the button so the pointer can reach the list. */
.lang-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.lang-switch:hover .lang-dropdown, .lang-switch:focus-within .lang-dropdown, .lang-switch.open .lang-dropdown {
  opacity: 1; visibility: visible; transform: none;
}
.lang-dropdown a, .lang-current {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  font-size: .88rem; color: var(--navy); text-decoration: none; white-space: nowrap;
}
.lang-dropdown b { min-width: 1.7em; font-size: .74rem; color: var(--muted); }
.lang-dropdown a:hover { background: var(--bg-soft); color: var(--navy); }
.lang-current { font-weight: 700; background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--red); }
.lang-switch--compact { display: none; }
@media (max-width: 1023px) {
  .lang-switch--compact { display: inline-flex; margin: 0 4px 0 auto; }
  .lang-switch--compact + .header-quick-cta { margin-left: 0; }
}
/* Phones: the globe alone (the list names each language), so the logo and its tagline keep room. */
@media (max-width: 600px) {
  .lang-switch--compact { margin: 0 2px 0 auto; }
  .lang-toggle { padding: 0 8px; }
  .lang-toggle .caret, .lang-toggle .lang-code { display: none; }
}

/* Said under quote buttons when the Orppio form is not in the page's language. */
.cta-note { font-size: .88rem; color: var(--muted); margin-top: 10px; }
.hero .cta-note, .bottom-cta .cta-note { color: rgba(255, 255, 255, .78); }
.mobile-menu .cta-note { margin-top: 6px; }

.draft-banner { background: #fff1c9; color: #5c4400; text-align: center; padding: 8px 16px; font-weight: 700; font-size: .9rem; }

/* Consent banner (only rendered when Google tags are configured). Both choices weigh the same. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 560px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(11, 23, 49, .22);
}
.consent[hidden] { display: none; }
.consent-inner { padding: 18px 20px; }
.consent h2 { font-size: 1.05rem; margin-bottom: 6px; color: var(--navy); }
.consent p { font-size: .92rem; }
.consent-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.consent-actions .btn { flex: 1 1 140px; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Regulatory pages: the reminder under the sources, direction labels, key facts. */
.sources-reminder {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px;
  background: var(--bg-soft); border-left: 3px solid var(--coral); border-radius: 8px; font-size: .93rem;
}
.sources-reminder svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--coral-strong); }
.related-kind { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--coral-strong); margin-bottom: 4px; }
.service-note { font-size: .9rem; color: var(--muted); margin-top: 10px; }
.direction {
  display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--coral-strong); margin-bottom: 6px;
}
.direction .flag { width: 18px; height: 13.5px; }
.law-vs-advice { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .law-vs-advice { grid-template-columns: 1fr 1fr; } }
.law-vs-advice > div { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.law-vs-advice h3 { font-size: 1rem; margin-bottom: 8px; }
.callout-info { background: #eef3fb; border-left: 4px solid var(--navy); border-radius: 10px; padding: 14px 18px; margin: 18px 0; }
.blog-card-meta { font-size: .82rem; color: var(--muted); margin-bottom: 4px; }
.company-facts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 18px; margin-top: 10px; }
.company-facts dd { overflow-wrap: anywhere; }
@media (max-width: 560px) { .company-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .company-facts dd { margin-bottom: 8px; } }
.company-facts dt { font-weight: 700; color: var(--navy); }
.article-card { padding-top: 0; overflow: hidden; }
.article-card-image { display: block; margin: 0 -22px 14px; }
.article-card-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; }

/* Calculators (app/views/tools): hidden until their Stimulus controller runs. */
.tool { margin-top: 8px; }
.tool-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--bg-soft); }
.tool-panel[hidden], .tool-fields [hidden] { display: none; }
.tool-fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tool-fields label { display: grid; gap: 6px; font-weight: 700; color: var(--navy); font-size: .92rem; }
.tool-fields input, .tool-fields select {
  font: inherit; font-weight: 400; color: var(--ink); padding: 10px 12px; border: 1.5px solid var(--line);
  border-radius: 10px; background: #fff; min-height: 44px; width: 100%;
}
.tool-fields input:focus-visible, .tool-fields select:focus-visible { outline: 3px solid #5b7bd6; outline-offset: 1px; }
.tool-fields .tool-check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.tool-fields .tool-check input { width: 20px; min-height: 20px; }
.tool-result { margin-top: 18px; font-size: 1.12rem; font-weight: 800; color: var(--coral-strong); }
.tool-steps { margin: 8px 0 0 20px; color: var(--ink); }
.tool-note { margin-top: 12px; font-size: .88rem; color: var(--muted); }

/* Step colours (a class, not an inline style: the CSP allows no inline styles). */
.step--1 { --step-c: #2446a6; }
.step--2 { --step-c: #172b4d; }
.step--3 { --step-c: #3f7a63; }
.step--4 { --step-c: #c42b38; }

/* Destinations comparison table (pages/destinations): grouped headers, sticky first column
   so the country stays in view while the table scrolls sideways on a phone. */
.compare-wrap:focus-visible { outline: 3px solid #5b7bd6; outline-offset: 2px; }
.compare-table { overflow: visible; min-width: 820px; font-size: .88rem; }
.compare-table caption { caption-side: top; text-align: left; color: var(--muted); font-size: .85rem; padding: 0 0 8px; }
.compare-table thead th { vertical-align: bottom; padding: 10px 12px; }
.compare-table thead th[scope="colgroup"] { text-align: center; border-left: 1px solid rgba(255, 255, 255, .25); }
.compare-table td { padding: 11px 12px; }
.compare-table tbody th {
  background: #fff; color: var(--navy); text-align: left; vertical-align: top; padding: 11px 12px;
  border-top: 1px solid var(--line); font-size: .9rem; letter-spacing: 0; min-width: 9.5em;
}
.compare-table tbody tr:nth-child(even) th { background: var(--bg-soft); }
.compare-table tbody th a { font-weight: 700; color: var(--navy); }
.compare-table tbody th small { display: block; font-weight: 400; margin-top: 4px; }
.compare-table thead tr:first-child th:first-child, .compare-table tbody th { position: sticky; left: 0; z-index: 1; }
.compare-table thead tr:first-child th:first-child { background: var(--navy); }
.compare-muted { color: var(--muted); }

/* A copyable letter or email template inside an article. */
.letter-template {
  background: #fff; border: 1px dashed var(--muted); border-radius: 10px;
  padding: 16px 18px; margin: 14px 0 6px; font-size: .95rem; overflow-wrap: anywhere;
}
.letter-template p { margin: 0 0 10px; }
.letter-template p:last-child { margin-bottom: 0; }

/* ── Home route selector (pages/_route_selector, route_selector_controller.js) ──
   A white card with the brand's short tricolour rule on its top edge. Two field tiles (departure,
   destination) joined by a round plane badge that turns blue once the route is complete, then the
   quote button. It opens the white part of the page, under the hero (whose photo keeps its full height);
   z-index lets an open country list run over the section below. */
.route-finder { position: relative; z-index: 3; padding: 52px 0 0; scroll-margin-top: 92px; }
.route-finder + section { padding-top: 60px; }
.route-card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 30px 16px;
  box-shadow: 0 24px 60px rgba(11, 23, 49, .16), 0 2px 6px rgba(11, 23, 49, .05);
}
.route-card::before {
  content: ""; position: absolute; left: 30px; top: -2px; width: 64px; height: 4px; border-radius: 2px;
  background: var(--tricolour-on-light);
}
.route-head { margin-bottom: 18px; }
.route-title { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 800; color: var(--navy); }
.route-title:focus { outline: none; }
.route-sub { margin-top: 4px; color: var(--muted); font-size: .97rem; max-width: 46em; }

.route-grid {
  display: grid; align-items: center; gap: 0 10px;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) auto;
  grid-template-areas: "from badge to go" "status status status status";
}
.route-field--from { grid-area: from; }
.route-field--to { grid-area: to; }
.route-badge { grid-area: badge; }
.route-go { grid-area: go; }
.route-status { grid-area: status; }

.route-field {
  position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0;
  min-height: 64px; padding: 8px 44px 8px 16px; border-radius: 12px; cursor: text;
  background: var(--ivory); border: 1.5px solid var(--line);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  scroll-margin-top: 104px;
}
.route-field:hover { border-color: #b7c1d4; }
.route-field:focus-within, .route-field.is-open {
  background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36, 70, 166, .15);
}
.route-label { font-size: .78rem; font-weight: 700; color: var(--muted); line-height: 1.3; cursor: inherit; }
.route-input {
  width: 100%; min-width: 0; padding: 2px 0 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 1.06rem; font-weight: 700; line-height: 1.4; color: var(--navy);
  text-overflow: ellipsis; cursor: inherit;
}
/* The tile carries the focus ring (border and halo above), not the bare text field inside it. */
.route-input:focus-visible { outline: none; }
.route-input::placeholder { color: var(--muted); font-weight: 500; opacity: 1; }
.route-caret {
  position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  color: var(--muted); pointer-events: none; transition: transform .2s ease;
}
.route-field.is-open .route-caret { transform: rotate(180deg); color: var(--blue); }
/* Waiting for the departure: visibly unavailable, still readable. */
.route-field.is-waiting { background: #f2f3f6; border-style: dashed; cursor: not-allowed; padding-right: 16px; }
.route-field.is-waiting:hover { border-color: var(--line); }
.route-input:disabled { cursor: inherit; opacity: 1; -webkit-text-fill-color: currentColor; }
.route-field.is-waiting .route-caret { display: none; }
.route-field.is-waiting .route-input::placeholder { font-size: .94rem; }
/* Fixed to France (any other departure): a quiet confirmed state with a tick. */
.route-field.is-fixed { background: #eef2fb; border-color: #cfdaf3; cursor: default; }
.route-field.is-fixed .route-caret { display: none; }
.route-field.is-fixed::after {
  content: ""; position: absolute; right: 19px; top: 50%; width: 6px; height: 12px; margin-top: -8px;
  border: solid var(--blue); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

.route-badge {
  justify-self: center; position: relative; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--line); color: var(--blue);
  box-shadow: 0 4px 12px rgba(23, 41, 77, .08);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* The plane icon points up and to the right: turned to follow the route. */
.route-badge svg { width: 19px; height: 19px; transform: rotate(45deg); }
.route-card.is-complete .route-badge { background: var(--blue); border-color: var(--blue); color: #fff; }
.route-card.is-leaving .route-badge svg { animation: route-takeoff .65s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes route-takeoff {
  50% { transform: rotate(45deg) translate(3px, -3px); }
  100% { transform: rotate(45deg); }
}

.route-go { min-height: 60px; margin-left: 8px; padding: 0 30px; white-space: nowrap; }
.route-status { min-height: 1.6em; margin-top: 12px; font-size: .9rem; color: var(--muted); }
.route-card.is-leaving .route-status { color: var(--navy); font-weight: 700; }
.route-noscript { margin-top: 6px; font-size: .9rem; color: var(--muted); }
.route-card .cta-note { margin-top: 4px; }

/* The country list: under its field (or above it when the screen has more room there). */
.route-list {
  position: absolute; z-index: 30; left: -1.5px; right: -1.5px; top: calc(100% + 8px);
  max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(11, 23, 49, .2); cursor: default;
}
.route-list[hidden] { display: none; }
.route-field.is-above .route-list { top: auto; bottom: calc(100% + 8px); }
.route-group { padding: 10px 12px 4px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.route-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 10px 12px; border-radius: 8px;
  font-size: .97rem; font-weight: 600; line-height: 1.35; color: var(--ink); cursor: pointer;
}
.route-option:hover { background: var(--bg-soft); }
.route-option.is-active { background: #eef2fb; color: var(--navy); box-shadow: inset 3px 0 0 var(--blue); }
.route-option[aria-selected="true"] { font-weight: 800; color: var(--navy); }
.route-option[aria-selected="true"]::after {
  content: ""; flex: none; width: 6px; height: 11px; margin: -3px 4px 0 0;
  border: solid var(--blue); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.route-empty { padding: 12px; font-size: .93rem; color: var(--muted); }

/* Reached from the header's phone button: one soft ring, so the eye lands on the card. */
.route-card::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--blue); opacity: 0;
}
.route-card.is-glowing::after { animation: route-glow 1.6s ease-out; }
@keyframes route-glow {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.025, 1.06); }
}
.route-field, .route-option { -webkit-tap-highlight-color: rgba(36, 70, 166, .1); }

@media (max-width: 1023px) {
  .route-finder { padding-top: 36px; }
  .route-grid {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    grid-template-areas: "from badge to" "status status go";
    row-gap: 14px;
  }
  .route-go { margin-left: 0; width: 100%; }
  .route-status { margin-top: 0; }
}
@media (max-width: 600px) {
  .route-finder { padding-top: 24px; scroll-margin-top: 72px; }
  .route-finder + section { padding-top: 44px; }
  .route-card { padding: 22px 16px 12px; border-radius: 16px; }
  .route-card::before { left: 16px; width: 56px; }
  .route-head { margin-bottom: 16px; }
  .route-title { font-size: 1.22rem; }
  .route-sub { font-size: .93rem; line-height: 1.55; }
  /* Stacked: the badge sits on the seam between the two tiles, its plane pointing down. */
  .route-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "from" "badge" "to" "go" "status"; row-gap: 0; }
  .route-badge { width: 34px; height: 34px; margin: -9px 0; }
  .route-field--from.is-open + .route-badge { visibility: hidden; }
  .route-badge svg { width: 17px; height: 17px; transform: rotate(135deg); }
  @keyframes route-takeoff {
    50% { transform: rotate(135deg) translate(3px, -3px); }
    100% { transform: rotate(135deg); }
  }
  .route-field { min-height: 62px; scroll-margin-top: 76px; }
  .route-go { min-height: 52px; margin-top: 14px; }
  .route-status { margin-top: 10px; text-align: center; }
}

/* ── Phones: the quote button in a row of its own under the header bar ──
   The row (.header-cta-bar, after the header) scrolls away with the page. Once the sticky header covers it,
   header_dock_controller.js docks the header (.is-docked): the wordmark and tagline fold away to the left
   while the same button, shorter (.header-docked-cta), opens in their place between the logo's symbol and
   the globe. Both grow and shrink together, so the globe and the menu button never move; the header keeps
   its height (a 44px row). An open menu brings the wordmark back: the menu ends with its own quote button. */
.header-cta-bar, .header-docked-cta { display: none; }
@media (max-width: 600px) {
  .site-header .header-quick-cta { display: none; }
  .site-header > .container { min-height: 61px; }

  .header-cta-bar {
    display: block; background: #fff;
    padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  }
  .site-header.menu-open + .header-cta-bar { visibility: hidden; }
  .header-cta {
    width: 100%; min-height: 44px; padding: 10px 18px;
    font-size: .88rem; letter-spacing: .07em; text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(196, 43, 56, .22);
  }
  .header-cta:hover { transform: none; }

  .site-header .brand { transition: gap .45s cubic-bezier(.22, 1, .36, 1); }
  .site-header.is-docked:not(.menu-open) .brand { gap: 0; }
  .site-header .brand-text {
    max-width: 220px; overflow: hidden;
    transition: max-width .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease .12s, transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  .header-docked-cta {
    display: inline-flex; flex: 1 1 auto; min-width: 0; max-width: 0; min-height: 44px;
    margin-left: 0; padding: 0; overflow: hidden; white-space: nowrap;
    font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; box-shadow: none;
    opacity: 0; visibility: hidden; transform: translateX(10px);
    transition: max-width .45s cubic-bezier(.22, 1, .36, 1), margin .45s cubic-bezier(.22, 1, .36, 1),
                padding .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1),
                opacity .2s ease, visibility 0s linear .45s, background .15s ease;
  }
  .header-docked-cta:hover { transform: none; }
  .site-header.is-docked:not(.menu-open) .brand-text {
    max-width: 0; opacity: 0; transform: translateX(-12px);
    transition: max-width .45s cubic-bezier(.22, 1, .36, 1), opacity .18s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  .site-header.is-docked:not(.menu-open) .header-docked-cta {
    max-width: 260px; margin-left: 2px; padding: 0 12px; opacity: 1; visibility: visible; transform: none;
    transition: max-width .45s cubic-bezier(.22, 1, .36, 1), margin .45s cubic-bezier(.22, 1, .36, 1),
                padding .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1),
                opacity .3s ease .12s, visibility 0s, background .15s ease;
  }
  /* A page opened already scrolled starts docked, without the animation. */
  .site-header.dock-instant .brand, .site-header.dock-instant .brand-text,
  .site-header.dock-instant .header-docked-cta { transition: none; }
}
/* The narrowest phones: a little less space between the header's items and around the words, so
   "OBTENIR UN DEVIS" fits whole beside the symbol, the globe and the menu button. */
@media (max-width: 340px) {
  .site-header > .container { gap: 8px; }
  .header-docked-cta { font-size: .76rem; letter-spacing: .03em; }
  .site-header.is-docked:not(.menu-open) .header-docked-cta { padding: 0 10px; }
}