/* Guide Visa Maroc — "Clair" design system (v4).
   Brief from the owner: clean and trustworthy like a good banking app; one geometric typeface
   (Plus Jakarta Sans); white with near-black as the only accent; soft rounded shapes; travel cues
   kept subtle (boarding-pass cards, route maps). The five status colours carry the data and are the
   only colour on the page besides WhatsApp green.
   Mobile-first: base rules are for phones, min-width queries add columns.
   Light mode only (owner's choice, 2026-10-06): no dark palette. */
:root {
  --bg: #f6f1e8;
  --surface: #fcf8f0;
  --soft: #efe8dc;
  --sunk: #e7dfd1;
  --sea: #eef4f7;
  --home: #a99f91;
  --ink: #0b0d12;
  --ink-2: #4a505c;
  --ink-3: #545a66;
  --line: #e7dfd1;
  --line-2: #d8cebd;
  --accent: #0b0d12;
  --accent-ink: #ffffff;
  --panel: #0f5c4a;
  --panel-2: #146b57;
  --panel-3: #3a8572;
  --panel-ink: #ffffff;
  --panel-dim: #c3ddd2;
  /* status, pastel (owner's choice 2026-10-07): soft fills for the map and markers; text uses a darker mix of each */
  --s-free: #5bbf88; --s-voa: #f5a55a; --s-evisa: #f6d86a; --s-schengen: #5a78d8; --s-visa: #e8867a; --s-none: #e4ddd0;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --arabic: "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", sans-serif;
  --gutter: 18px;
  --max: 1120px;
  --r: 16px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; z-index: 100; border-radius: 8px; }
.skip:focus { left: 8px; }
@media (min-width: 720px) { :root { --gutter: 28px; } }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.ar { font-family: var(--arabic); direction: rtl; unicode-bidi: isolate; }
.code { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.label { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 8vw, 3.8rem); line-height: 1.05; }
h2 { font-size: clamp(1.55rem, 5.4vw, 2.25rem); line-height: 1.12; }
h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.02em; }
.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 36em; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink);
  font: 700 0.98rem var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.15s, opacity 0.15s; }
.btn:hover { opacity: 0.9; }
.btn:active { transform: scale(0.98); }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn svg { width: 20px; height: 20px; flex: none; }
.band .btn, .side-card .btn { background: #ffffff; color: #0b0d12; }
/* WhatsApp: official colours only. Green glyph on white for text buttons, white glyph on WhatsApp green for the bubble. */
.btn.wa, .band .btn.wa, .side-card .btn.wa { background: #ffffff; color: #111b21; box-shadow: inset 0 0 0 1.5px #25d366; }
.more { font-weight: 700; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.more::after { content: "→"; transition: transform 0.15s; }
.more:hover::after { transform: translateX(3px); }

/* status pill: tinted, a dot, darker text */
.pill, .lamp { --c: var(--s-none); display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: color-mix(in srgb, var(--c) 52%, var(--ink)); font: 700 0.8rem/1.3 var(--font); white-space: nowrap; }
.pill::before, .lamp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.k-free { --c: var(--s-free); } .k-voa { --c: var(--s-voa); } .k-evisa { --c: var(--s-evisa); } .k-schengen { --c: var(--s-schengen); } .k-visa { --c: var(--s-visa); }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo burger" "search search" "nav nav"; align-items: center; column-gap: 14px; }
.logo { grid-area: logo; display: inline-flex; align-items: center; gap: 10px; min-height: 58px; text-decoration: none; color: var(--ink); min-width: 0; }
.logo svg { width: 28px; height: 28px; flex: none; }
.logo b { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; white-space: nowrap; }
.burger { grid-area: burger; display: none; position: relative; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s, opacity 0.2s; }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.top .search { grid-area: search; padding-bottom: 12px; }
.tuck .top .search { display: none; }
.nav { grid-area: nav; display: flex; flex-direction: column; padding-bottom: 14px; }
.nav a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px; border-top: 1px solid var(--line); text-decoration: none; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.nav a::after { content: "→"; font-weight: 500; color: var(--ink-3); }
.nav a[aria-current="page"]::after { content: "●"; font-size: 0.6rem; color: var(--ink); }
@media (max-width: 1099px) {
  .js .burger { display: block; }
  .js .nav { display: none; }
  .js .nav.open { display: flex; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
  .top:has(.nav.open) { background: var(--bg); }
}
@media (min-width: 1100px) {
  .top .wrap { grid-template-columns: auto minmax(220px, 340px) minmax(0, 1fr); grid-template-areas: "logo search nav"; column-gap: 28px; min-height: 70px; }
  .top .search { padding-bottom: 0; }
  .tuck .top .search { display: block; visibility: hidden; }
  .nav { flex-direction: row; justify-content: flex-end; gap: 4px; padding: 0; }
  .nav a { padding: 8px 14px; border: 0; border-radius: 999px; font-size: 0.92rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
  .nav a::after, .nav a[aria-current="page"]::after { content: none; }
  .nav a:hover { background: var(--soft); color: var(--ink); }
  .nav a[aria-current="page"] { background: var(--soft); color: var(--ink); }
  .nav .m-only { display: none; }
}

/* search */
.search { position: relative; }
.search input { width: 100%; min-height: 46px; padding: 0 18px 0 46px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 1rem var(--font); }
.search input::placeholder { color: var(--ink-3); font-weight: 400; }
.search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent); }
.search svg { position: absolute; left: 17px; top: 14px; width: 18px; height: 18px; pointer-events: none; color: var(--ink-3); }
.search.big input { min-height: 62px; padding-left: 56px; font-size: 1.1rem; box-shadow: 0 12px 34px -18px rgba(11, 13, 18, 0.35); }
.search.big svg { left: 22px; top: 20px; width: 22px; height: 22px; color: var(--ink); }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: calc(100dvh - 160px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(11, 13, 18, 0.35); list-style: none; margin: 0; padding: 6px; }
.top .results { top: calc(100% - 6px); }
@media (min-width: 1100px) { .top .results { top: calc(100% + 8px); } }
.results a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none; }
.results a:hover, .results a[aria-selected="true"] { background: var(--soft); }
.results .nm { display: flex; gap: 12px; align-items: baseline; min-width: 0; }
.results .nm b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .empty { padding: 12px 14px; color: var(--ink-2); }

/* sections */
.sec { padding-block: 48px; }
.sec + .sec { padding-top: 12px; }
.sec-head { display: grid; gap: 10px; margin-bottom: 24px; }
.sec-head p { color: var(--ink-2); max-width: 38em; }
@media (min-width: 720px) { .sec { padding-block: 72px; } .sec + .sec { padding-top: 16px; } .sec-head { margin-bottom: 32px; } }

/* hero (home): one question, one search */
.hero { padding-block: 36px 8px; display: grid; gap: 18px; max-width: 780px; }
.hero .lead { margin-top: -4px; }
.hero .search { margin-top: 8px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.qchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--soft); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: background 0.15s; }
.qchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.qchip:hover { background: var(--sunk); }
.trust { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.88rem; font-weight: 500; color: var(--ink-3); }
.trust span::before { content: "✓"; margin-right: 6px; color: var(--s-free); font-weight: 800; }
@media (min-width: 720px) { .hero { padding-block: 72px 12px; gap: 22px; } }

/* map */
.map-box { position: relative; background: var(--surface); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.map-view { position: relative; aspect-ratio: 1.6; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.map-view:active { cursor: grabbing; }
.map-view svg { display: block; width: 100%; height: 100%; }
@media (min-width: 760px) { .map-view { aspect-ratio: 1000 / 438; } }
.map-ctrl { position: absolute; top: 12px; right: 12px; z-index: 4; display: grid; gap: 6px; }
.map-ctrl button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 1.3rem/1 var(--font); cursor: pointer; box-shadow: 0 4px 12px -6px rgba(11, 13, 18, 0.25); }
.map-ctrl button:disabled { opacity: 0.35; cursor: default; }
.map-ctrl svg { width: 17px; height: 17px; }
.map-box .hint { position: absolute; left: 12px; bottom: 12px; font-weight: 700; font-size: 0.72rem; background: var(--ink); color: var(--bg); padding: 6px 11px; border-radius: 999px; pointer-events: none; transition: opacity 0.3s; }
@media (hover: hover) { .map-box .hint { display: none; } }
.map-box.touched .hint { opacity: 0; }
.ct { vector-effect: non-scaling-stroke; stroke: var(--surface); stroke-width: 0.7; stroke-linejoin: round; fill: var(--s-none); transition: opacity 0.15s; }
.ct.f-free { fill: var(--s-free); } .ct.f-voa { fill: var(--s-voa); } .ct.f-evisa { fill: var(--s-evisa); } .ct.f-schengen { fill: var(--s-schengen); } .ct.f-visa { fill: var(--s-visa); }
.ct.home { fill: var(--ink); }
.ct[data-slug] { cursor: pointer; }
.ct[data-slug]:hover { stroke: var(--ink); stroke-width: 1.4; }
.ct.dim { opacity: 0.14; }
.map-label { font: 800 12px var(--font); letter-spacing: 0.04em; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; pointer-events: none; }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: var(--bg); border-radius: 12px; padding: 8px 12px; display: grid; gap: 1px; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); font-size: 0.9rem; }
.tip b { font-weight: 700; }
.tip span { font-size: 0.8rem; opacity: 0.75; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lg { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--soft); text-decoration: none; font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
.lg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lg b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.lg:hover { background: var(--sunk); color: var(--ink); }

/* route map (country pages) */
.route-map { aspect-ratio: 2 / 1; background: var(--surface); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.route-map svg { display: block; width: 100%; height: 100%; }
.route-map .ct { fill: var(--soft); stroke: var(--line); }
.route-map .ct.dest { fill: var(--c); }
.route-map .ct.home { fill: var(--ink); }
.route-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* boarding-pass cards */
.passes { display: grid; gap: 12px; }
@media (min-width: 640px) { .passes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .passes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--surface); border-radius: var(--r); border: 1px solid var(--line); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.ticket:hover { border-color: var(--line-2); box-shadow: 0 16px 36px -24px rgba(11, 13, 18, 0.35); }
.ticket .main { padding: 18px; display: grid; gap: 10px; min-width: 0; }
.ticket .route { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }
.ticket .route i { flex: 1; height: 0; border-top: 1.5px dashed var(--line-2); max-width: 44px; }
.ticket h3 { font-size: 1.35rem; }
.ticket .meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 0.9rem; color: var(--ink-2); }
.ticket .stub { width: 58px; border-left: 1.5px dashed var(--line-2); display: grid; place-items: center; }
.ticket .stub span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.22em; color: var(--ink-3); }
.ticket::before, .ticket::after { content: ""; position: absolute; right: 49px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.ticket::before { top: -9px; clip-path: inset(50% 0 0 0); } .ticket::after { bottom: -9px; clip-path: inset(0 0 50% 0); }

/* rails on phones */
.rail { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block: 10px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 640px) { .passes.rail { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; } }

/* updates list */
.updates { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.updates a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 16px 18px; border-radius: var(--r); background: var(--soft); text-decoration: none; transition: background 0.15s; }
.updates a:hover { background: var(--sunk); }
.updates time { grid-column: 1 / -1; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.updates b { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.updates p { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.95rem; max-width: 62ch; }
.updates .go { align-self: center; color: var(--ink-3); }

/* dark panel */
.band { background: var(--panel); color: var(--panel-ink); border-radius: 24px; padding: 28px 22px; }
.band .label { color: var(--panel-dim); }
.band p { color: var(--panel-dim); }
@media (min-width: 720px) { .band { padding: 44px; } }
.band.teaser { display: grid; gap: 22px; }
.teaser-cta { display: flex; align-items: end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.tier-from, .tier .from { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--panel-dim); }
.teaser-price, .tier .price { font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; color: var(--panel-ink); font-variant-numeric: tabular-nums; }
.teaser-price small, .tier .price small { font-weight: 700; font-size: 0.95rem; margin-left: 6px; letter-spacing: 0; color: var(--panel-dim); }
@media (min-width: 860px) { .band.teaser { grid-template-columns: 1fr auto; align-items: end; } }
.tiers { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: 18px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--panel-3); }
.tier.main { box-shadow: inset 0 0 0 2px var(--panel-ink); }
.tier ul { margin: 0; padding-left: 1.1em; display: grid; gap: 7px; color: var(--panel-ink); font-size: 0.97rem; }
.tier .fine { font-size: 0.86rem; }
.tag { justify-self: start; font-weight: 700; font-size: 0.75rem; color: #0b0d12; background: #ffffff; padding: 4px 10px; border-radius: 999px; }

/* destination index */
.filters { display: grid; gap: 10px; margin-bottom: 8px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 0; background: var(--soft); color: var(--ink); font: 600 0.92rem var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.filters input { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 1rem var(--font); width: 100%; max-width: 420px; }
.filters input:focus { outline: none; border-color: var(--ink); }
.region { border-bottom: 1px solid var(--line); }
.region:first-of-type { border-top: 1px solid var(--line); margin-top: 14px; }
.region > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 2px; }
.region > summary::-webkit-details-marker { display: none; }
.region > summary h3 { font-size: 1.15rem; flex: 1; }
.region > summary .code { background: var(--soft); padding: 3px 9px; border-radius: 999px; }
.region > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform 0.2s; margin-right: 6px; }
.region[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.rows { list-style: none; margin: 0 0 12px; padding: 0; display: grid; }
@media (min-width: 760px) { .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.rows a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px; padding: 6px 2px; border-top: 1px solid var(--line); text-decoration: none; }
.rows a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rows b { font-weight: 700; overflow-wrap: anywhere; }
.rows .right { display: flex; align-items: center; gap: 10px; }
.rows .stay { font-weight: 600; font-size: 0.8rem; color: var(--ink-3); min-width: 3.6em; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .rows .stay { display: none; } }
.no-match { color: var(--ink-2); padding: 16px 0; }

/* FAQ */
.faq { display: grid; gap: 8px; max-width: 820px; }
.faq details { border-radius: var(--r); background: var(--soft); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 700; font-size: 1.02rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font-weight: 500; font-size: 1.5rem; color: var(--ink-3); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 18px 18px; color: var(--ink-2); max-width: 64ch; }

/* breadcrumb */
.crumbs { padding-top: 16px; font-size: 0.88rem; font-weight: 500; color: var(--ink-3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { text-decoration: underline; }

/* country page */
.c-hero { display: grid; gap: 14px; padding-block: 18px 22px; }
.c-hero .ar { font-size: 1.15rem; color: var(--ink-2); }
.c-hero h1 { font-size: clamp(2.1rem, 8vw, 3.5rem); max-width: 16ch; }
.answer { font-size: 1.15rem; line-height: 1.55; max-width: 34em; color: var(--ink-2); }
.answer strong { font-weight: 800; color: var(--ink); }
.pass { position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; display: grid; box-shadow: 0 22px 50px -34px rgba(11, 13, 18, 0.4); }
.pass-main { padding: 20px; display: grid; gap: 20px; }
.pass-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.pass-route small { display: block; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pass-route b { display: block; font-weight: 800; font-size: 2.3rem; line-height: 1.1; letter-spacing: -0.02em; }
.pass-route span { font-size: 0.85rem; color: var(--ink-2); }
.pass-route .to { text-align: right; }
.pass-route .path { position: relative; height: 0; border-top: 1.5px dashed var(--line-2); }
.pass-route .path svg { position: absolute; left: 50%; top: 0; width: 22px; height: 22px; transform: translate(-50%, -50%); color: var(--ink); background: var(--surface); padding: 2px; }
.pass-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0; }
.pass-grid div { min-width: 0; }
.pass-grid .wide { grid-column: 1 / -1; }
.pass-grid dt { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.pass-grid dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.pass-grid dd .lamp { font-size: 0.85rem; }
.pass-stub { position: relative; border-top: 1.5px dashed var(--line-2); padding: 13px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; font-size: 0.82rem; color: var(--ink-3); background: var(--soft); border-radius: 0 0 21px 21px; }
.pass-stub::before, .pass-stub::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); }
.pass-stub::before { left: -9px; clip-path: inset(0 0 0 50%); } .pass-stub::after { right: -9px; clip-path: inset(0 50% 0 0); }
.barcode { display: none; }
.c-grid { display: grid; gap: 36px; padding-bottom: 24px; }
.c-grid > * { min-width: 0; }
@media (min-width: 980px) {
  .c-top { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: end; }
  .c-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; }
  .side { position: sticky; top: 92px; align-self: start; }
}
.prose { display: grid; gap: 36px; }
.prose section { display: grid; gap: 14px; }
.prose h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
.prose p { max-width: 64ch; }
.notice { padding: 14px 16px; border-radius: 14px; background: var(--soft); font-size: 0.95rem; color: var(--ink-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.9rem; }
.steps li span { padding-top: 3px; }
.check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check label { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 13px 14px; border-radius: 14px; background: var(--soft); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--line-2); border-radius: 7px; display: grid; place-items: center; background: var(--surface); cursor: pointer; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.check input:checked + span { color: var(--ink-3); text-decoration: line-through; }
.check-progress { font-weight: 700; font-size: 0.82rem; color: var(--ink-3); }
.tips { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--ink-2); }
.video { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--soft); color: var(--ink-2); }
.video b { color: var(--ink); }
.video i { width: 46px; height: 32px; border-radius: 9px; background: #e62117; display: grid; place-items: center; flex: none; }
.video i::after { content: ""; border-left: 11px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.src { font-size: 0.9rem; color: var(--ink-3); }
.src a { overflow-wrap: anywhere; color: var(--ink-2); }
.side-card { display: grid; gap: 12px; padding: 24px 22px; border-radius: 22px; background: var(--panel); color: var(--panel-ink); }
.side-card .label { color: var(--panel-dim); }
.side-card h3 { font-size: 1.4rem; }
.side-card p { color: var(--panel-dim); font-size: 0.97rem; }
.side-card .more { color: var(--panel-ink); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px 0 13px; border-radius: 999px; background: var(--soft); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.tags a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tags a:hover { background: var(--sunk); }
.near { display: grid; gap: 8px; }
.near a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--soft); text-decoration: none; }
.near b { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }

/* services page */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: h; }
@media (min-width: 860px) { .how { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.how li { counter-increment: h; padding: 18px; border-radius: var(--r); background: var(--soft); display: grid; gap: 6px; align-content: start; }
.how li::before { content: counter(h); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.9rem; margin-bottom: 4px; }
.how p { color: var(--ink-2); font-size: 0.97rem; }
.rules { display: grid; gap: 10px; }
@media (min-width: 760px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rules div { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--soft); }
.rules .x { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0; background: color-mix(in srgb, var(--s-visa) 14%, var(--surface)); }
.rules .x::before { content: "✕"; font-size: 0.85rem; font-weight: 800; color: var(--s-visa); }
.rules .x.ok { background: color-mix(in srgb, var(--s-free) 14%, var(--surface)); }
.rules .x.ok::before { content: "✓"; color: var(--s-free); }
.rules p { color: var(--ink-2); font-size: 0.97rem; }
.rules b { color: var(--ink); display: block; font-weight: 800; margin-bottom: 2px; }
.req { display: grid; gap: 20px; }
@media (min-width: 900px) { .req { grid-template-columns: 1fr 1fr; align-items: start; } }
.form { display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: var(--soft); }
@media (min-width: 520px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.form label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 6px; }
.form input, .form select { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 1rem var(--font); }
.form input:focus, .form select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent); }
.msg { display: grid; gap: 12px; }
.msg pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 0.92rem/1.6 var(--font); padding: 18px; border-radius: 18px; background: var(--soft); color: var(--ink); }
.msg .row { display: flex; flex-wrap: wrap; gap: 10px; }

/* footer */
.foot { margin-top: 48px; background: var(--soft); color: var(--ink); padding-block: 44px calc(104px + env(safe-area-inset-bottom, 0px)); }
.foot a { text-decoration: none; color: var(--ink-2); }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.foot-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } .foot-grid > :first-child { grid-column: auto; } }
.foot .label { margin-bottom: 12px; display: block; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; }
.foot p { color: var(--ink-2); font-size: 0.95rem; max-width: 44ch; }
.foot .logo { color: var(--ink); grid-area: auto; min-height: 0; }
.foot .logo:hover { text-decoration: none; }
.wa-line { display: flex; align-items: center; gap: 10px; }
.wa-line svg { width: 22px; height: 22px; flex: none; }
.foot .wa-line a { font-weight: 700; color: var(--ink); }
.all { margin-top: 28px; border-top: 1px solid var(--line-2); padding-top: 18px; }
.all summary { cursor: pointer; font-weight: 700; }
.all ul { margin-top: 14px; columns: 2 150px; column-gap: 24px; display: block; font-size: 0.9rem; }
.all li { break-inside: avoid; padding: 3px 0; }
.legal { margin-top: 24px; font-size: 0.84rem; color: var(--ink-3); }

/* WhatsApp bubble */
.wa-fab { position: fixed; z-index: 40; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; border-radius: 50%; background: #25d366; display: grid; place-items: center;
  box-shadow: 0 14px 30px -12px rgba(11, 13, 18, 0.5), 0 2px 6px rgba(11, 13, 18, 0.12); transition: transform 0.2s; }
.wa-fab svg { width: 31px; height: 31px; }
.wa-fab:hover { transform: scale(1.05); }
.wa-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 50%; }
@media (min-width: 900px) { .wa-fab { right: 28px; bottom: 28px; width: 64px; height: 64px; } .wa-fab svg { width: 33px; height: 33px; } }

/* 404 */
.lost { padding-block: 48px; display: grid; gap: 18px; max-width: 640px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* where to apply (Schengen) */
.where-card { display: grid; gap: 14px; padding: 20px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--surface); }
.where-card .btn { justify-self: start; }
.where-head { display: flex; align-items: center; gap: 14px; }
.where-head b { display: block; font-weight: 800; font-size: 1.05rem; }
.where-head span:not(.prov-logo) { font-size: 0.88rem; color: var(--ink-3); font-weight: 600; }
.via { font-size: 0.95rem; color: var(--ink-2); }
.via a { font-weight: 700; }
.prov-logo { display: inline-grid; place-items: center; flex: none; height: 48px; min-width: 104px; padding: 8px 12px; border-radius: 12px; background: #ffffff; box-shadow: inset 0 0 0 1px #e6e8ec; }
.prov-logo img { display: block; max-height: 30px; width: auto; }
.prov-logo.sm { height: 34px; min-width: 88px; padding: 5px 9px; border-radius: 9px; }
.prov-logo.sm img { max-height: 22px; }
.prov-logo.txt { font-weight: 800; font-size: 0.82rem; letter-spacing: -0.01em; color: #0b0d12; }
.prov-logo.sm.txt { font-size: 0.74rem; }
.prov-tls.txt { color: #1d3c8f; } .prov-vfs.txt { color: #0c2e5b; } .prov-bls.txt { color: #7a7a7a; } .prov-embassy.txt, .prov-evisa.txt { color: #4a505c; }
.prov-list { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 760px) { .prov-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.prov-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; min-height: 56px; border-top: 1px solid var(--line); }
.prov-list li > a:first-child { text-decoration: none; display: grid; }
.prov-list b { font-weight: 700; }
.via-tag { font-size: 0.8rem; color: var(--ink-3); font-weight: 600; }
.prov-list .go { text-decoration: none; font-weight: 700; color: var(--ink-3); text-align: center; }
.prov-list .go:hover { color: var(--ink); }

/* ===== v4.1 "Slim" (owner: too bold, too padded, chunky boxes, big headings → slim & airy) =====
   Lighter weights (600 max for titles, 400–500 for text), tighter spacing, hairlines instead of
   grey filled boxes, outline chips instead of filled pills, smaller headings on phones. */
body { font-size: 1rem; line-height: 1.6; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.022em; }
h1 { font-size: clamp(1.85rem, 6.4vw, 2.9rem); line-height: 1.1; }
h2 { font-size: clamp(1.3rem, 4.4vw, 1.7rem); line-height: 1.2; }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.lead { font-size: 1.02rem; }
.label { font-weight: 600; font-size: 0.7rem; letter-spacing: 0.1em; }
.code { font-weight: 600; }
.logo { min-height: 54px; }
.logo svg { width: 24px; height: 24px; }
.logo b { font-weight: 700; font-size: 1rem; }
.nav a { font-weight: 500; font-size: 1.05rem; padding: 12px 2px; }
@media (min-width: 1100px) { .nav a { font-weight: 500; font-size: 0.9rem; padding: 7px 12px; } }

/* buttons, pills, chips: thinner */
.btn { min-height: 44px; padding: 0 18px; font-weight: 600; font-size: 0.92rem; }
.btn svg { width: 18px; height: 18px; }
.btn.line { box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.wa, .band .btn.wa, .side-card .btn.wa { box-shadow: inset 0 0 0 1px #25d366; }
.more { font-weight: 600; font-size: 0.9rem; }
.pill, .lamp { padding: 2px 9px 2px 8px; gap: 6px; font-weight: 600; font-size: 0.74rem; background: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.pill::before, .lamp::before { width: 6px; height: 6px; }
.qchip, .lg, .tags a, .chip { min-height: 34px; padding: 0 12px 0 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; font-size: 0.88rem; }
.qchip::before, .lg::before, .tags a::before, .chip .dot { width: 6px; height: 6px; }
.qchip:hover, .lg:hover, .tags a:hover { background: var(--soft); }
.lg b { font-weight: 600; }
.chip[aria-pressed="true"] { box-shadow: none; }

/* spacing */
.sec { padding-block: 36px; }
.sec + .sec { padding-top: 8px; }
.sec-head { gap: 6px; margin-bottom: 18px; }
@media (min-width: 720px) { .sec { padding-block: 56px; } .sec-head { margin-bottom: 24px; } }
.hero { padding-block: 28px 4px; gap: 14px; }
@media (min-width: 720px) { .hero { padding-block: 56px 8px; gap: 16px; } }
.search input { min-height: 44px; font-weight: 400; }
.search.big input { min-height: 54px; font-size: 1.02rem; padding-left: 50px; box-shadow: 0 8px 24px -18px rgba(11, 13, 18, 0.3); }
.search.big svg { left: 19px; top: 17px; width: 19px; height: 19px; }
.trust { font-weight: 400; font-size: 0.84rem; }

/* grey boxes → hairlines */
.faq { gap: 0; border-top: 1px solid var(--line); }
.faq details { background: none; border-radius: 0; border-bottom: 1px solid var(--line); }
.faq summary { padding: 14px 36px 14px 0; font-weight: 500; font-size: 0.98rem; }
.faq summary::after { right: 4px; top: 10px; font-weight: 300; }
.faq details p { padding: 0 0 14px; font-size: 0.95rem; }
.updates { gap: 0; border-top: 1px solid var(--line); }
.updates a { background: none; border-radius: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.updates a:hover { background: none; }
.updates a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.updates b { font-weight: 600; font-size: 1rem; }
.updates time { font-weight: 600; font-size: 0.7rem; }
.check { gap: 0; border-top: 1px solid var(--line); }
.check label { background: none; border-radius: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.96rem; }
.check input { width: 18px; height: 18px; border-width: 1px; border-radius: 5px; }
.check input:checked::after { width: 5px; height: 9px; border-width: 0 1.5px 1.5px 0; }
.check-progress { font-weight: 500; font-size: 0.8rem; }
.notice { background: none; border-radius: 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--line-2); font-size: 0.92rem; }
.video { background: none; border: 1px solid var(--line); padding: 12px 14px; font-size: 0.95rem; }
.video b { font-weight: 600; }
.video i { width: 38px; height: 26px; border-radius: 7px; }
.near { gap: 0; border-top: 1px solid var(--line); }
.near a { background: none; border-radius: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.near b { font-weight: 500; }
.how { gap: 0; border-top: 1px solid var(--line); }
.how li { background: none; border-radius: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .how { gap: 28px; border-top: 0; } .how li { border-bottom: 0; border-top: 1px solid var(--line-2); } }
.rules { gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .rules { column-gap: 32px; } }
.rules div { background: none; border-radius: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rules b { font-weight: 600; }
.form { background: none; border: 1px solid var(--line); padding: 18px; border-radius: 16px; }
.form label { font-weight: 500; font-size: 0.84rem; }
.form input, .form select { min-height: 44px; font-weight: 400; }
.msg pre { font-weight: 400; font-size: 0.88rem; border-radius: 14px; }

/* steps: outlined numbers */
.steps { gap: 10px; }
.steps li { grid-template-columns: 26px 1fr; gap: 12px; font-size: 0.96rem; }
.steps li::before, .how li::before { width: 24px; height: 24px; background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 600; font-size: 0.75rem; }
.steps li span { padding-top: 1px; }

/* country page */
.c-hero { gap: 10px; padding-block: 14px 18px; }
.c-hero h1 { font-size: clamp(1.75rem, 6.2vw, 2.7rem); }
.c-hero .ar { font-size: 1.02rem; }
.answer { font-size: 1.02rem; }
.answer strong { font-weight: 600; }
.prose { gap: 28px; }
.prose section { gap: 12px; }
.prose h2 { font-size: clamp(1.15rem, 4vw, 1.4rem); }
.c-grid { gap: 28px; }
.pass { border-radius: 16px; border-color: var(--line); box-shadow: none; }
.pass-main { padding: 16px; gap: 16px; }
.pass-route b { font-weight: 600; font-size: 1.8rem; }
.pass-route small, .pass-grid dt { font-weight: 600; font-size: 0.64rem; }
.pass-grid { gap: 12px 14px; }
.pass-grid dd { font-weight: 500; font-size: 0.95rem; }
.pass-stub { padding: 10px 16px; font-weight: 500; font-size: 0.78rem; border-radius: 0 0 15px 15px; border-top-width: 1px; }
.route-map, .map-box { border-radius: 16px; }
.where-card { padding: 16px; border-radius: 16px; border-color: var(--line); gap: 12px; }
.where-head b { font-weight: 600; font-size: 0.98rem; }
.where-head span:not(.prov-logo) { font-weight: 500; }
.side-card { padding: 20px 18px; border-radius: 16px; gap: 10px; }
.side-card h3 { font-size: 1.15rem; }

/* cards & panels */
.ticket { border-radius: 14px; }
.ticket .main { padding: 14px 16px; gap: 8px; }
.ticket h3 { font-size: 1.1rem; }
.ticket .route { font-weight: 600; font-size: 0.7rem; }
.ticket .stub { width: 48px; }
.ticket .stub span { font-weight: 600; font-size: 0.78rem; }
.ticket::before, .ticket::after { right: 40px; }
.band { border-radius: 18px; padding: 24px 20px; }
@media (min-width: 720px) { .band { padding: 36px; } }
.teaser-price, .tier .price { font-weight: 600; font-size: 2.1rem; }
.teaser-price small, .tier .price small { font-weight: 500; }
.tier { padding: 18px; border-radius: 14px; }
.tier.main { box-shadow: inset 0 0 0 1px var(--panel-ink); }
.tag { font-weight: 600; font-size: 0.7rem; }
.region > summary { padding: 13px 2px; }
.region > summary h3 { font-size: 1.02rem; }
.rows a { min-height: 46px; }
.rows b { font-weight: 500; }
.prov-list li { min-height: 48px; }
.prov-list b { font-weight: 500; }
.foot { padding-block: 36px calc(96px + env(safe-area-inset-bottom, 0px)); }
.foot .wa-line a, .all summary { font-weight: 600; }
.map-ctrl button { width: 36px; height: 36px; border-radius: 10px; font-weight: 400; box-shadow: none; }
.wa-fab { width: 56px; height: 56px; }
.wa-fab svg { width: 29px; height: 29px; }

/* ===== v5 "Zellige & Darija" (owner picked direction C on the design canvas, 2026-10-06) =====
   Darija first: a Reem Kufi headline in Arabic script above the French one. A zellige band
   (see v7: traced zellij, assets/zellij.svg) under the header and on top of the boarding pass. Zellige green
   is the action colour; status markers become small zellige diamonds. Slim layout kept. */
:root { --zel: #0f5c4a; --zel-ink: #ffffff; --arabic: "Reem Kufi", "Geeza Pro", "Segoe UI", sans-serif; }
.zellige { height: 44px; background: #0f5c4a url(/assets/zellij-band.svg?v=1) center / 132px 132px repeat; }
.zellige.strip { height: 28px; border-radius: 15px 15px 0 0; }
.darija { margin: 0; font-family: var(--arabic); font-weight: 700; font-size: clamp(1.9rem, 7.5vw, 2.8rem); line-height: 1.3; color: var(--zel); direction: rtl; text-align: right; unicode-bidi: isolate; }
.hero .darija { margin-bottom: -4px; }
.c-hero .darija { font-size: clamp(1.6rem, 6.4vw, 2.3rem); }
.hero h1 { font-size: clamp(1.5rem, 5.4vw, 2.2rem); }
.c-hero h1 { font-size: clamp(1.45rem, 5.2vw, 2.2rem); }
.c-hero .ar, .hero .ar { display: none; }
.kicker { font-family: var(--arabic); font-weight: 500; font-size: 1rem; color: var(--zel); direction: rtl; margin-bottom: -8px; }
.btn { background: var(--zel); color: var(--zel-ink); }
.btn.line { background: transparent; color: var(--ink); }
.search input { border-color: color-mix(in srgb, var(--zel) 45%, var(--line-2)); }
.search.big input { border: 1.5px solid var(--zel); }
.search.big svg, .search input:focus + * { color: var(--zel); }
.search input:focus { border-color: var(--zel); box-shadow: 0 0 0 4px color-mix(in srgb, var(--zel) 14%, transparent); }
.steps li::before, .how li::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zel) 50%, var(--line-2)); color: var(--zel); }
.check input:checked { background: var(--zel); border-color: var(--zel); }
/* zellige diamonds for status */
.pill::before, .lamp::before, .lg::before, .qchip::before, .tags a::before, .chip .dot { border-radius: 1px; transform: rotate(45deg); }
/* Arabic names in country lists */
.rows .nm { display: grid; min-width: 0; }
.rows .ar-n { font-family: var(--arabic); font-size: 0.85rem; color: var(--ink-3); direction: rtl; text-align: left; line-height: 1.3; }
.pass { overflow: hidden; }
.label { color: var(--zel); }

/* --- Schengen checklist (filters, categories, sources, print) --- */
.ck { display: grid; gap: 18px; }
.ck-notes { font-size: 0.95rem; }
.ck-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 16px; border-radius: 16px; background: var(--soft); }
html:not(.js) .ck-filters, html:not(.js) .ck-bar { display: none; }
.ck-filters label:not(.tog) { display: grid; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--ink-3); }
.ck-filters select { font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink); min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); }
.ck-filters .tog { display: flex; gap: 10px; align-items: center; font-size: 0.92rem; cursor: pointer; }
.ck-filters .tog input { accent-color: var(--zel); width: 18px; height: 18px; margin: 0; flex: none; }
.ck-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: sticky; top: calc(var(--top-h, 64px) + 8px); z-index: 3; padding: 10px 0; background: var(--bg, #fff); }
.ck-bar .check-progress { margin-right: auto; font-size: 0.95rem; font-weight: 700; color: var(--zel); }
.ck-cat h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: 1.02rem; }
.ck-cat h3 span { order: 2; font-family: var(--arabic); font-weight: 500; font-size: 0.95rem; color: var(--zel); }
.ck .check span { display: grid; gap: 3px; }
.ck .check small { color: var(--ink-2); font-size: 0.88rem; line-height: 1.45; }
.ck .check .ref { font-size: 0.74rem; color: var(--ink-3); text-decoration: none; }
.ck .check a.ref:hover { color: var(--zel); text-decoration: underline; }
.ck .check .ref.local { color: var(--zel); font-weight: 600; }
.ck .check li[hidden], .ck-cat[hidden] { display: none; }
.ck .alt-head { padding: 12px 0 2px; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); border-bottom: 0; }
.ck li.alt label { padding-left: 14px; box-shadow: inset 2px 0 0 color-mix(in srgb, var(--zel) 40%, transparent); }
.ck input:checked + span b { color: var(--ink-3); text-decoration: line-through; }
.ck input:checked + span small, .ck input:checked + span .ref { opacity: 0.6; }
.ck .check input:checked + span { text-decoration: none; }
@media (max-width: 560px) { .ck-filters { grid-template-columns: 1fr; } .ck-bar .btn { flex: 1; } .ck-bar .check-progress { flex-basis: 100%; } }
@media print {
  body.print-ck .top, body.print-ck .zellige, body.print-ck .foot, body.print-ck .wa-fab, body.print-ck .crumbs, body.print-ck .side,
  body.print-ck .ck-filters, body.print-ck .ck-bar .btn, body.print-ck .prose > :not(.ck-sec), body.print-ck .c-top, body.print-ck .ck-sec > p { display: none !important; }
  body.print-ck .c-grid { display: block; margin: 0 !important; }
  body.print-ck .ck-bar { position: static; }
  body.print-ck .ck-cat { break-inside: avoid; }
}
.ck-print-title { display: none; }
@media print { body.print-ck .ck-print-title { display: block; font-weight: 800; font-size: 1.2rem; } }
.ck, .ck-sec, .ck-filters label { min-width: 0; }
.ck-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ck-filters select { width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 560px) { .ck-filters { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ck-bar { position: static; } .ck-bar .btn { min-height: 42px; font-size: 0.88rem; padding: 0 12px; } }
.ck .opt { font-style: normal; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); background: var(--soft); padding: 2px 7px; border-radius: 999px; vertical-align: 2px; margin-left: 4px; }

/* --- v6 "Sable" (2026-10-07): warm sand page with a faint zellige pattern, white cards, pale-blue sea on maps, pastel statuses --- */
body { background: var(--bg); }
/* whispered zellij on a fixed, slightly blurred layer: texture without thin lines crossing the text */
body::before { content: ""; position: fixed; inset: -12px; z-index: -1; pointer-events: none;
  background: url(/assets/zellij-whisper.svg?v=1) 0 0 / 420px 420px; filter: blur(1.6px); }
/* page shade: the whole background sits a step darker (warm), so text and white cards stand out */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(92, 70, 40, 0.18); }
.top { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.map-box, .route-map { background: var(--sea); border-color: var(--line); }
.ct, .route-map .ct { stroke: var(--sea); }
.route-map .ct { fill: #e4ddd0; }
.map-label { stroke: var(--sea); }
.pill, .lamp { color: color-mix(in srgb, var(--c) 45%, var(--ink)); background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.qchip, .tags a, .lg, .chip, .updates a, .video, .notice, .ck-filters, .search input, .filters input { background: var(--surface); }
.qchip, .tags a, .lg, .chip, .updates a, .video, .ck-filters { box-shadow: inset 0 0 0 1px var(--line); }
.chip[aria-pressed="true"] { box-shadow: none; }
.rules .x::before { color: color-mix(in srgb, var(--s-visa) 70%, var(--ink)); }
.rules .x.ok::before { color: color-mix(in srgb, var(--s-free) 70%, var(--ink)); }
.trust span::before { color: color-mix(in srgb, var(--s-free) 70%, var(--ink)); }
.ct.home, .route-map .ct.home { fill: var(--home); }
.teaser-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.band .btn.line { color: var(--panel-ink); box-shadow: inset 0 0 0 1px var(--panel-3); }
/* recent changes: white cards with breathing room on the sand page */
.updates { gap: 10px; border-top: 0; }
.updates a { background: var(--surface); border: 0; border-radius: 14px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--line); }
.updates a:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), 0 12px 28px -22px rgba(11, 13, 18, 0.35); }
/* ticket stub: official flag (flag-icons, MIT) above the country code */
.ticket .stub { align-content: center; gap: 10px; }
.ticket .stub .flag { width: 30px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.12); }

/* "Le guichet": zellige-green panel; the recommended formula is a white card so it stands out */
.tier.main { background: var(--surface); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45); }
.tier.main h3, .tier.main ul { color: var(--ink); }
.tier.main .from, .tier.main .fine { color: var(--ink-3); }
.tier.main .price { color: var(--zel); }
.tier.main .price small { color: var(--ink-3); }
.tier.main .tag { background: var(--zel); color: #fff; }

/* --- v7 (2026-10-07): real zellij. Traced from a photo of a traditional Fez rosette pattern (8-point khatem,
   arrows, long hexagons), edges snapped to 0/45/90°, symmetry and repeat enforced. Not drawn from memory. */
.zellige.strip { background-size: 110px 110px; }
/* owner's choice 2026-10-07: zellij in greens with a saffron crown around each rosette (zellij-band.svg); page background = the same zellij, whispered (zellij-whisper.svg, 9% outline, 420px) */

/* --- v8 "Cartes" (2026-10-07): on the shaded page, reading content sits in white cards.
   Big hero text stays on the background; lists, steps, checklists, FAQ and regions get a card. */
.prose > section, .prose > .notice, .faq, .region {
  background: var(--surface); border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 1px 0 rgba(60, 40, 10, 0.04), 0 14px 34px -26px rgba(60, 40, 10, 0.45);
}
@media (max-width: 560px) { .prose > section, .prose > .notice, .faq, .region { padding: 16px; border-radius: 16px; } }
.prose { gap: 16px; }
.prose > .notice { border-left: 0; font-size: 0.95rem; }
.faq details:last-child, .region .rows > :last-child { border-bottom: 0; }
.region { margin-bottom: 10px; }
.region > summary { padding: 0; }
/* inside a white card, the inner chips and panels take the soft sand instead of white */
.prose section .tags a, .ck-filters, .prose section .video { background: var(--soft); box-shadow: none; }
.ck-bar { background: var(--surface); }
.where-card { border: 0; padding: 0; background: none; }
/* embassy marks: national emblem + "Ambassade de X" */
.prov-logo.emb { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-start; min-width: 0; }
.prov-logo.emb em { font-style: normal; font-weight: 700; font-size: 0.8rem; color: var(--ink); white-space: nowrap; }
.prov-logo.emb.sm em { font-size: 0.72rem; }
.prov-logo.emb.wide img { max-height: 30px; }
.prov-logo.emb.sm.wide img { max-height: 24px; }
.where-head .prov-logo.emb:not(.wide) em { display: none; } .where-head .prov-logo.emb { min-width: 56px; justify-content: center; }
/* all provider marks share one box size so the table lines up (owner request) */
.prov-logo { width: 136px; height: 44px; min-width: 0; padding: 6px 10px; box-sizing: border-box; }
.prov-logo.sm { width: 124px; height: 34px; padding: 5px 9px; }
.prov-logo img { max-height: 24px; max-width: 100%; }
.prov-logo.sm img { max-height: 20px; max-width: 100%; }
.prov-logo.emb { justify-content: center; gap: 7px; }
.prov-logo.emb img { max-height: 24px; width: auto; flex: none; }
.prov-logo.emb.sm img { max-height: 22px; }
.prov-logo.emb em, .prov-logo.emb.sm em { font-size: 0.78rem; }
.where-head .prov-logo.emb em, .where-head .prov-logo.emb:not(.wide) em { display: inline; }
.prov-logo.img-tls img { max-width: 92px; }
.prov-logo.img-vfs img, .prov-logo.img-bls img { max-height: 26px; }
.prov-logo.sm.img-tls img { max-width: 84px; }
.prov-logo.sm.img-vfs img, .prov-logo.sm.img-bls img { max-height: 24px; }

/* --- footer v2 (2026-10-07): compact, aligned columns; guides in two columns; legal lines small --- */
.foot { padding-block: 32px calc(92px + env(safe-area-inset-bottom, 0px)); font-size: 0.9rem; }
.foot-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.1fr 0.9fr 1.4fr; } }
.foot-brand { display: grid; gap: 10px; align-content: start; }
.foot-brand p { font-size: 0.88rem; }
.foot ul { gap: 6px; font-size: 0.88rem; }
.foot-guides ul { display: block; columns: 2; column-gap: 20px; }
.foot-guides li { break-inside: avoid; padding-bottom: 6px; }
.foot-contact { gap: 8px; }
.foot-contact li { display: flex; align-items: center; gap: 8px; }
.foot-contact svg { width: 18px; height: 18px; flex: none; }
.foot-contact a { font-weight: 600; color: var(--ink); }
.foot .label { margin-bottom: 10px; }
.all { margin-top: 22px; padding-top: 14px; font-size: 0.88rem; }
.legal { margin-top: 18px; display: grid; gap: 2px; }
.legal p { font-size: 0.74rem; line-height: 1.5; color: var(--ink-3); max-width: none; }
.fine-note { margin-top: 14px; font-size: 0.74rem; color: var(--panel-dim); }
.prov-logo { background: var(--surface); }
@media (max-width: 859px) { .foot-guides { grid-column: 1 / -1; } .foot-guides ul { columns: 3 110px; } }

/* --- country page layout v2 (2026-10-07): one grid. Phone: title → pass → content → help.
   Desktop: left = title then content, right = pass + help card in one column of the same width. --- */
.c-layout { display: grid; gap: 20px; padding-bottom: 24px; }
.c-layout > * { min-width: 0; }
.c-layout .c-hero { order: 1; }
.c-layout .side { display: contents; }
.c-layout .side .pass { order: 2; }
.c-layout .prose { order: 3; }
.c-layout .side .side-card { order: 4; }
@media (min-width: 900px) {
  .c-layout { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "hero side" "main side"; column-gap: 40px; row-gap: 24px; align-items: start; }
  .c-layout .c-hero { grid-area: hero; padding-top: 8px; }
  .c-layout .prose { grid-area: main; }
  .c-layout .side { grid-area: side; display: grid; gap: 16px; align-content: start; align-self: stretch; position: static; }
  .c-layout .side .side-card { position: sticky; top: 92px; }
  .c-layout .c-hero h1 { max-width: none; }
}
@media print { body.print-ck .c-layout .side, body.print-ck .c-layout .c-hero { display: none !important; } body.print-ck .c-layout { display: block; } }
/* region lists: 2 columns × 3 rows on large screens */
.regions { display: grid; gap: 10px; }
.regions .region { margin: 0; }
@media (min-width: 900px) { .regions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; } }
@media (min-width: 900px) { .regions .rows { grid-template-columns: minmax(0, 1fr); } .regions .rows b { overflow-wrap: normal; } }
/* news: the card is the <li>; the main link and a small source line sit inside it */
.updates li { background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.updates li > a.news-main { background: none; box-shadow: none; border-radius: 14px 14px 0 0; padding: 16px 18px 6px; }
.updates li > a.news-main:hover { box-shadow: none; }
.updates .news-src { padding: 0 18px 14px; font-size: 0.72rem; color: var(--ink-3); }
.updates .news-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.updates .news-src a { display: inline; padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0; min-height: 0; font-weight: 500; }
.updates p, .updates li > a.news-main p { max-width: none; }
@media (min-width: 900px) { .updates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; align-items: stretch; } .updates li { display: flex; flex-direction: column; } .updates li > a.news-main { flex: 1; } }
/* phone ticket rail: each card centred, the previous/next ones peek on both sides, first card not flush */
@media (max-width: 639px) {
  .rail { grid-auto-columns: 78vw; gap: 12px; padding-inline: 11vw; scroll-padding-inline: 11vw; }
  .rail > * { scroll-snap-align: center; }
}
/* escale testimony */
.story-doc { margin: 4px 0; display: grid; gap: 8px; }
.story-doc img { width: 100%; max-width: 420px; height: auto; border-radius: 12px; box-shadow: 0 10px 30px -18px rgba(60, 40, 10, 0.5); }
.story-doc figcaption { font-size: 0.8rem; color: var(--ink-3); max-width: 60ch; }
.story-cmp { display: grid; gap: 10px; }
@media (min-width: 560px) { .story-cmp { grid-template-columns: 1fr 1fr; } }
.story-cmp > div { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; font-size: 0.92rem; }
.story-cmp .no { background: color-mix(in srgb, var(--s-visa) 16%, var(--surface)); }
.story-cmp .ok { background: color-mix(in srgb, var(--s-free) 18%, var(--surface)); }
.story-cmp span { color: var(--ink-2); }
/* numbered inline sources */
sup.fn { font-size: 0.68em; line-height: 0; margin-left: 2px; font-weight: 700; }
sup.fn a { color: var(--zel); text-decoration: none; padding: 0 1px; }
sup.fn a:hover { text-decoration: underline; }
ol.src-list { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: 0.86rem; color: var(--ink-2); }
ol.src-list li { scroll-margin-top: 140px; }
ol.src-list li:target { background: color-mix(in srgb, var(--zel) 10%, transparent); border-radius: 6px; }