/* self-hosted fonts: @fontsource/ibm-plex-sans-arabic (SIL OFL 1.1) — /assets/fonts/LICENSE.txt */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 300; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-300.441410df80.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-400.6010e7fd0d.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-500.90aef64fea.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-600.16734a5adb.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-700.04c730b429.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 300; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-300.dde6d3b237.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-400.9ed8dcb02e.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-500.be6a3b2e37.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-600.63f4757271.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-700.ae2d59f91e.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 300; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-300.dd27720fab.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-400.1935fa1a33.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-500.ae5c1a58c1.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-600.0f7c03bb52.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-700.ab0b958427.woff2) format('woff2'); }

/* ============================================================================
   ouivisa.css — OuiVisa shared design system (SINGLE SOURCE OF TRUTH)
   Loaded LAST on every page so it governs the shared layer and pages can never
   drift again. Page-specific styles (hero, map, tiles, facts, finder…) stay inline per page.
   Phase 0 (2026-07-08): fonts, type scale, container padding, logo, header controls, buttons.
   v2 (2026-11-03, approved by the owner): the style of the live holding page on every page —
   amber logo mark, 76px header, 17px body (Arabic 18px), larger headings, 860px reading column,
   text-grade amber --accent-text #8a5200, Conseil Voyages legal footer (footer.site-foot).
   Header/footer markup of the generated pages: _site-chrome.mjs. Homepage: _apply-standalone-home-v2.mjs.
   ============================================================================ */
/* ---- type system: one font stack (as on the holding page), true 800 weight everywhere ---- */
:root{ --font-sans:'IBM Plex Sans Arabic','Segoe UI',system-ui,-apple-system,Roboto,'Noto Sans Arabic',Tahoma,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; }
body{ font-family:var(--font-sans); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-wrap:break-word; }
/* Arabic (RTL) — ONE treatment everywhere: one step larger, generous leading (overrides the pages' inline 17.5px) */
html[dir="rtl"] body{ font-size:18px; line-height:1.85; overflow-wrap:anywhere; }
h1,h2,h3,h4,h5,h6,button,input,select,textarea,optgroup{ font-family:var(--font-sans); }

/* ---- tokens this shared layer relies on — and the CONTRAST-AUDITED values.
   This block loads last so it deliberately overrides every page's inline :root:
   · light --cta darkened #e05e00→#c25100 so white button text measures 4.7:1 (was 3.6);
   · dark --cta-ink switches to dark ink #31230c on the bright orange, 6.7:1 (white was 2.3);
   · --accent-strong = solid pill bg for white/-ink text (lang switch): 4.9:1 light;
   · dark --faint lightened #928877→#a29884 (was 4.4:1 on panels, now ≥5:1);
   · --accent-text (v2) #8a5200 = the holding page's text amber: 6.0:1 on --bg, 5.2:1 on the amber-tinted chips;
     dark #f8c46d: 11.6:1 on --bg. ---- */
:root{ --accent-ink:#ffffff; --accent-strong:#a36100; --cta:#c25100; --cta2:#a84600; --cta-ink:#ffffff; --accent-text:#8a5200; }
html[data-theme="dark"]{ --accent-ink:#31230c; --accent-strong:#f6b03c; --cta:#ff8e3d; --cta2:#ffa96b; --cta-ink:#31230c; --faint:#a29884; --accent-text:#f8c46d; }

/* ---- container: consistent edges (keep each page's own max-width) ---- */
.wrap{ padding-inline:18px; }
@media(max-width:640px){ .wrap{ padding-inline:15px; } }

/* ---- header: one bar everywhere — solid page background, 76px, 1080px wide, amber logo mark ---- */
header.nav{ position:sticky; top:0; z-index:20; background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--border); }
header.nav .wrap{ max-width:1080px; }
header.nav .nav-in{ display:flex; align-items:center; justify-content:space-between; min-height:76px; height:auto; padding-block:8px; gap:20px; }
.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.01em; font-size:21px; text-decoration:none; color:var(--text); flex:none; }
.logo b{ color:var(--accent-text); font-weight:600; }
.logo .dot{ display:none !important; }
.logo-mark{ width:30px; height:30px; flex:none; display:block; }
/* generated pages (_site-chrome.mjs): links + theme + language on the inline-end side */
.hdr-right{ display:flex; align-items:center; gap:14px; min-width:0; }
.hdr-links{ display:flex; align-items:center; gap:26px; }
.hdr-links a{ font-weight:600; font-size:15.5px; color:var(--muted); text-decoration:none; white-space:nowrap; }
.hdr-links a:hover,.hdr-links a[aria-current="page"]{ color:var(--text); }
.nav-links{ color:var(--muted); font-size:14.5px; }
/* language switch — bordered pill container + SOLID active; works for <button> (home) AND <a>/<span> (generated pages) */
.lang{ display:flex; gap:4px; background:var(--panel); border:1px solid var(--border); padding:3px; border-radius:999px; flex:none; }
.lang button,.lang a,.lang span{ appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer; padding:5px 11px; border-radius:999px; font:inherit; font-size:13px; font-weight:700; text-decoration:none; min-height:0; display:inline-flex; align-items:center; }
.lang .active,.lang button.active{ background:var(--accent-strong); color:var(--accent-ink); }
@media (max-width:760px){
  header.nav .nav-in{ gap:10px; }
  .logo{ font-size:19px; gap:8px; }
  .hdr-right{ gap:8px; }
  .hdr-links{ gap:12px; }
  .hdr-links a:not(:first-child){ display:none; }   /* phone: Destinations only (approved demo) */
  .hdr-right .theme-toggle{ display:none; }          /* phone: theme follows the OS (head script) */
  .lang a,.lang span,.lang button{ padding:6px 9px; }
}

/* ---- theme toggle: round, bordered, canonical ---- */
.theme-toggle{ appearance:none; border:1px solid var(--border); background:var(--panel); color:var(--text);
  cursor:pointer; width:44px; height:44px; border-radius:50%; font-size:15px; line-height:1; flex:0 0 auto; }
.theme-toggle:hover{ border-color:var(--cta); }
/* glyph is CSS-driven ☾/☀ so it swaps with the theme on EVERY page, regardless of the page's markup/JS */
.theme-toggle{ font-size:0; }
.theme-toggle::after{ content:"\263E"; font-size:15px; line-height:1; }
html[data-theme="dark"] .theme-toggle::after{ content:"\2600"; }

/* ---- buttons: canonical scale ---- */
.btn{ display:inline-block; border-radius:10px; padding:10px 18px; font-weight:700; font-size:14.5px; cursor:pointer; border:0; font-family:inherit; }
.btn-primary{ background:var(--cta); color:var(--cta-ink); } .btn-primary:hover{ background:var(--cta2); }
.btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--text); } .btn-ghost:hover{ border-color:var(--accent); }

/* ---- content pages (body.page: country · type · info · Omra · hub · travel authorizations) ---- */
body.page main .wrap{ max-width:860px; }
body.page .crumbs{ font-size:14px; margin-top:30px; padding-top:0; }
body.page main h1{ font-size:clamp(32px,4.8vw,48px); line-height:1.12; font-weight:800; letter-spacing:-.02em; margin:14px 0 12px; }
body.page main h2{ font-size:clamp(22px,2.8vw,28px); letter-spacing:-.01em; line-height:1.25; }
body.page main .wrap>section{ margin-block:56px; }
body.page .upd{ font-size:14px; }
body.page .answer{ font-size:18.5px; line-height:1.75; padding:24px 26px; border-radius:18px; }
html[dir="rtl"] body.page .answer{ font-size:19.5px; }
body.page table.fees td{ padding:13px 8px; font-size:16.5px; }
body.page details.faq summary{ font-size:17px; }
body.page .typesec{ padding:22px 24px; }
body.page .head .lede{ font-size:clamp(17px,2.2vw,19px); }
@media(max-width:640px){ body.page .answer{ padding:18px 18px; } body.page .typesec{ padding:18px 16px; } }

/* ---- legal footer of the generated pages (_site-chrome.mjs siteFooter; lines from _legal.mjs) ---- */
footer.site-foot{ border-top:1px solid var(--border); margin-top:64px; padding-block:30px 46px; color:var(--faint); font-size:14.5px; line-height:1.6; background:transparent; }
footer.site-foot .wrap{ max-width:1080px; }
footer.site-foot p{ margin:5px 0; }
footer.site-foot a{ color:var(--accent-text); }
footer.site-foot .foot-tag{ color:var(--muted); margin:0 0 12px; }
footer.site-foot .foot-tag b{ color:var(--text); }
footer.site-foot .foot-brand b{ color:var(--text); }
footer.site-foot .foot-legal{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:12px 0; font-size:14px; }
footer.site-foot .foot-legal a{ color:var(--muted); text-decoration:none; }
footer.site-foot .foot-legal a:hover{ color:var(--accent-text); }
footer.site-foot .foot-legal span{ color:var(--faint); }
/* footer legal links of the single-file pages (the Omra pages have no inline rule for them) */
.foot-legal{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:12px 0; font-size:14px; }
.foot-legal a{ color:var(--muted); text-decoration:none; }
.foot-legal a:hover{ color:var(--accent-text); }
.foot-legal span{ color:var(--faint); }
/* single-file pages (homepage, Omra agencies): the same legal lines inside their own footer */
.legal-lines{ margin-top:16px; font-size:14px; color:var(--faint); }
.legal-lines p{ margin:5px 0; }
.legal-lines a{ color:var(--accent-text); }
.legal-lines b{ color:var(--text); }

/* ---- homepage (body.home, _apply-standalone-home-v2.mjs) — holding-page hero + approved v2 layout ---- */
body.home .nav-links{ font-size:15px; gap:16px; }
body.home .nav-links a{ white-space:nowrap; }
body.home .nav-right{ gap:10px; }
body.home .nav-right .btn{ white-space:nowrap; }
body.home .hero{ background:none; }
body.home .hero-in{ padding-block:72px 56px; } /* block only: .hero-in is also the .wrap (keeps its side padding) */
body.home .eyebrow{ text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:700; border:0; border-radius:999px; padding:6px 12px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent-text); }
body.home .hero h1{ font-size:clamp(34px,6vw,58px); line-height:1.08; letter-spacing:-.02em; }
body.home .hero h1 .g{ background:none; -webkit-background-clip:initial; background-clip:initial; color:inherit; }
body.home .hero p.lead{ font-size:clamp(17px,2.2vw,20px); max-width:560px; }
body.home section.block{ padding:72px 0; }
body.home h2.title{ font-size:clamp(26px,3.6vw,36px); letter-spacing:-.01em; }
body.home .kicker{ font-size:13.5px; }
body.home footer{ font-size:14.5px; padding:44px 0 64px; }
/* hero text column: centred since the stats block left (2026-11-03) — no more space-between gaps */
body.home .hero-in>div:first-child{ justify-content:center; gap:6px; }
body.home .hero-in>div:first-child .finder{ margin-top:10px; }
/* agency directory: short until the first partners sign — wilaya select + "coming soon" note, map hidden */
body.home #directory{ padding-block:56px; }
#directory .dir-grid[hidden]{ display:none !important; }
#directory .finder-lite{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
#directory .finder-lite select{ min-width:min(260px,100%); max-width:100%; border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:12px; padding:12px 14px; font:inherit; font-size:16px; }
#directory .soon-note{ margin-top:14px; border-inline-start:3px solid var(--accent); padding:4px 14px; color:var(--muted); font-size:15px; }
#directory .soon-note a{ color:var(--accent-text); }
/* "coming soon" note outside the homepage directory (Omra agencies page) + partner-badge disclaimers (2026-11-03) */
.soon-note{ margin:14px 0 0; border-inline-start:3px solid var(--accent); padding:4px 14px; color:var(--muted); font-size:15px; }
.soon-note a{ color:var(--accent-text); }
.badge-note,.seal-note{ display:block; margin-top:8px; font-size:12.5px; line-height:1.5; color:var(--faint); font-weight:400; }
.mail-intro{ color:var(--muted); max-width:60ch; }

/* ---- flags: the production build serves 4:3 SVG flags in the pages' 3:2 boxes — fill the box, never stretch ---- */
h1 img, img.flag, .tile img, .poptile img{ object-fit:cover; }

/* ---- a11y + motion safety (in case a page omits them) ---- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } }