/* H&K Shipping Express — marketing site. Airway-bill visual language: navy paper,
   red stamp, sky route line, one mono utility face. Logical properties everywhere
   so FR (ltr) and AR (rtl) share one stylesheet. */

@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2190-21FF,U+20AC}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans-600-latin.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2190-21FF,U+20AC}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2190-21FF,U+20AC}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSansArabic-400-arabic.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSansArabic-600-arabic.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSansArabic-700-arabic.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"PlexMono";src:url(fonts/IBMPlexMono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PlexMono";src:url(fonts/IBMPlexMono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --navy:#0F1F3D; --ink:#0A1428; --sky:#2E7FD6; --sky-soft:#DCEBFA; --red:#D71920;
  --paper:#F6F4EE; --paper-2:#ECE9E0; --line:#D9D4C7; --white:#fff;
  --text:#14213A; --muted:#5B6478; --ok:#1E7A46;
  --sans:"Plex",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --mono:"PlexMono",ui-monospace,Menlo,Consolas,monospace;
  --r:6px; --r-lg:14px; --wrap:1120px;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;--s9:7rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 1rem/1.55 var(--sans);text-rendering:optimizeLegibility}
:lang(ar) body,html[lang=ar]{line-height:1.75}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{letter-spacing:0;line-height:1.3}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--sky);border-radius:var(--r)}
@media (forced-colors:active){:focus-visible{outline:3px solid Highlight;box-shadow:none}}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;inset-inline-start:var(--s4);top:-3rem;background:var(--navy);color:#fff;padding:var(--s2) var(--s4);border-radius:var(--r);z-index:99}
.skip:focus{top:var(--s4)}

/* type */
h1,h2,h3{margin:0;font-weight:700;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.6rem,7.2vw,5.6rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:1.25rem;line-height:1.3}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);max-width:56ch;text-wrap:pretty}
.eyebrow{font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sky);display:inline-flex;gap:var(--s2);align-items:center}
.eyebrow::before{content:"";width:1.5rem;height:2px;background:currentColor}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
[dir=ltr]{unicode-bidi:isolate}

/* stamp */
.stamp{display:inline-block;font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red);border:2px solid currentColor;padding:.45rem .6rem;border-radius:3px;transform:rotate(-2deg);background:rgba(255,255,255,.55)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:3rem;padding:0 var(--s5);border-radius:var(--r);font-weight:600;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 24px -10px rgba(215,25,32,.55)}

.btn-navy{background:var(--navy);color:#fff}
.btn-ghost{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-white{background:#fff;color:var(--navy)}
.btn .i{width:1.1em;height:1.1em;flex:none}
html[dir=rtl] .btn .i.fwd{transform:scaleX(-1)}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(246,244,238,.85);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:var(--s4);min-height:4.25rem}
.brand{display:flex;align-items:center;gap:var(--s3);font-weight:700;letter-spacing:-.01em;line-height:1.05}
.brand img{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover}
.brand small{display:block;font:500 .62rem/1 var(--mono);letter-spacing:.14em;color:var(--red);margin-top:.3rem;text-transform:uppercase}
.brand{min-width:0}
.brand span{min-width:0}
@media (max-width:26rem){.brand small{display:none}}
.nav{display:none;gap:var(--s5);margin-inline-start:auto;font-weight:600;font-size:.95rem}
.nav a{padding:.5rem 0;border-bottom:2px solid transparent}
.nav a[aria-current]{border-color:var(--red)}
.topbar .tools{display:flex;gap:var(--s2);margin-inline-start:auto;align-items:center}
.nav + .tools{margin-inline-start:0}
.lang{min-height:2.5rem;padding:0 var(--s3);border:1.5px solid var(--navy);border-radius:var(--r);background:#fff;font:600 .85rem var(--sans);cursor:pointer}
.topbar .btn{min-height:2.5rem;padding-inline:var(--s4);font-size:.9rem}
.topbar .btn-primary{display:none}
@media (min-width:800px){.nav{display:flex}.topbar .btn-primary{display:inline-flex}}

/* hero */
.hero{padding-block:var(--s7) var(--s8);position:relative;overflow:hidden}
.hero .wrap{display:grid;gap:var(--s6);align-items:end}
@media (min-width:900px){.hero .wrap{grid-template-columns:1.1fr .9fr;gap:var(--s7)}.hero{padding-block:var(--s8) var(--s9)}}
.hero h1 span{display:block}
.hero h1 .accent{color:var(--sky)}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.hero .note{margin-top:var(--s4);font:400 .85rem var(--mono);color:var(--muted)}

/* airway bill card */
.awb{background:#fff;border:1.5px solid var(--navy);border-radius:var(--r-lg);padding:var(--s5);position:relative;box-shadow:0 30px 60px -40px rgba(15,31,61,.5)}
.awb::before{content:"";position:absolute;inset-inline:var(--s5);top:calc(var(--s5) + 3.4rem);border-top:2px dashed var(--line)}
.awb .head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;padding-bottom:var(--s4);font:500 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.awb .head>*{white-space:nowrap}
@media (max-width:26rem){.awb .head>:last-child{display:none}}
.awb .head b{color:var(--navy)}
.awb .route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);padding-top:var(--s5)}
.awb .city{font-size:clamp(2rem,5vw,2.75rem);font-weight:700;line-height:1;letter-spacing:-.03em}
.awb .city small{display:block;font:500 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.awb .city .alt{display:block;font-size:1rem;font-weight:400;color:var(--muted);margin-top:.3rem;letter-spacing:0}
.awb .city.to{text-align:end}
.awb .plane{width:3rem;height:3rem;color:var(--sky)}
html[dir=rtl] .awb .plane{transform:scaleX(-1)}
.awb .line{position:relative;height:2px;background:var(--line);margin:var(--s5) 0;overflow:visible}
.awb .line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--sky),var(--red));transform-origin:0 50%;animation:route 1.6s cubic-bezier(.2,.7,.2,1) .2s both}
html[dir=rtl] .awb .line::after{transform-origin:100% 50%}
@keyframes route{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.awb .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.awb .meta div{font:500 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.awb .meta b{display:block;font:600 .95rem var(--sans);letter-spacing:0;text-transform:none;color:var(--navy);margin-top:.25rem}
@media (prefers-reduced-motion:reduce){.awb .line::after{animation:none}}

/* sections */
.section{padding-block:var(--s8)}
.section.tight{padding-block:var(--s7)}
.section-head{display:grid;gap:var(--s3);margin-bottom:var(--s6);max-width:60ch}
.dark{background:var(--navy);color:#fff}
.dark .lede{color:#B9C4DA}
.dark .eyebrow{color:#7FB4EE}
.grid-2{display:grid;gap:var(--s5)}
.grid-3{display:grid;gap:var(--s5)}
@media (min-width:760px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}

/* service rows - not cards */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:auto 1fr;gap:var(--s4) var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line);align-items:start}
@media (min-width:760px){.row{grid-template-columns:5.5rem 1fr auto;align-items:center}}
.row .idx{font:500 .8rem var(--mono);letter-spacing:.12em;color:var(--red)}
.row h3{margin-bottom:var(--s1)}
.row p{color:var(--muted);max-width:52ch}
.row .go{grid-column:1/-1;font-weight:600;color:var(--sky);white-space:nowrap}
@media (min-width:760px){.row .go{grid-column:auto}}

/* steps */
.steps{counter-reset:s;display:grid;gap:var(--s5)}
@media (min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
@media (min-width:760px){.steps.six{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding-top:var(--s5);border-top:2px solid rgba(255,255,255,.18)}
.step::before{counter-increment:s;content:"0" counter(s);font:500 .8rem var(--mono);letter-spacing:.12em;color:#7FB4EE;position:absolute;top:-.55rem;background:var(--navy);padding-inline-end:var(--s2)}
.step h3{margin-bottom:var(--s2)}
.step p{color:#B9C4DA}

/* office block */
.office{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:grid;gap:var(--s5)}
@media (min-width:860px){.office{grid-template-columns:1fr 1fr;padding:var(--s7)}}
.office .big{font-size:clamp(3rem,8vw,6rem);font-weight:700;line-height:.95;letter-spacing:-.04em;color:var(--navy)}
.office .big small{display:block;font:500 .75rem var(--mono);letter-spacing:.14em;color:var(--red);text-transform:uppercase;margin-bottom:var(--s3)}
.checklist{display:grid;gap:var(--s3);margin:0;padding:0;list-style:none}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start}
.checklist li::before{content:"";width:1.4rem;height:1.4rem;border-radius:50%;background:var(--sky-soft);flex:none;margin-top:.15rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7FD6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");background-size:60%;background-position:center;background-repeat:no-repeat}
.checklist b{display:block}
.checklist span{color:var(--muted)}

/* faq */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s4);align-items:center;padding:var(--s4) 0;font-weight:600;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--mono);color:var(--sky);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:var(--s5);color:var(--muted);max-width:64ch}

/* cta band */
.band{background:var(--red);color:#fff;border-radius:var(--r-lg);padding:var(--s6);display:grid;gap:var(--s4);align-items:center}
@media (min-width:860px){.band{grid-template-columns:1fr auto;padding:var(--s7)}}
.band h2{color:#fff}
.band p{color:#FFD9DB}
.band .btn-white{color:var(--red)}

/* forms */
.form{display:grid;gap:var(--s4);background:#fff;border:1.5px solid var(--navy);border-radius:var(--r-lg);padding:var(--s5)}
@media (min-width:760px){.form{grid-template-columns:1fr 1fr;padding:var(--s6)}.form .full{grid-column:1/-1}}
.field{display:grid;gap:var(--s2)}
.field label{font:500 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{min-height:3rem;padding:var(--s3);border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);width:100%}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--sky);outline:none;box-shadow:0 0 0 3px var(--sky-soft)}
.form .hint{grid-column:1/-1;font:400 .8rem var(--mono);color:var(--muted)}
.form .total{grid-column:1/-1;margin:0;font:500 .82rem var(--mono);color:var(--ok)}
.form .total.over{color:var(--red)}

/* footer */
footer{background:var(--ink);color:#C5CEDF;padding-block:var(--s7) var(--s6);margin-top:var(--s8)}
footer .cols{display:grid;gap:var(--s6)}
@media (min-width:760px){footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}}
footer h4{margin:0 0 var(--s3);font:500 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7FB4EE}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
footer .brand{color:#fff}
footer .legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.12);font:400 .78rem var(--mono);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between}
.wa{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600;color:#fff}
.wa .i{width:1.2em;height:1.2em}

/* mobile action bar */
.mbar{position:fixed;inset-inline:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));background:rgba(15,31,61,.96);backdrop-filter:blur(8px)}
.mbar .btn{min-height:2.75rem;font-size:.9rem}
@media (min-width:800px){.mbar{display:none}}
body.has-mbar{padding-bottom:4.5rem}
@media (min-width:800px){body.has-mbar{padding-bottom:0}}

/* page hero (subpages) */
.page-hero{padding-block:var(--s7) var(--s6)}
.page-hero .wrap{display:grid;gap:var(--s3);max-width:60ch}

/* RTL fixes found in review: tracking breaks Arabic's connected script; and the
   airway-bill meta row needs to stack on narrow phones. */
html[lang=ar] :is(.eyebrow,.stamp,.idx,.field label,.awb .head,.awb .meta div,.awb .city small,footer h4,.hint,.brand small,.step::before,.office .big small){letter-spacing:0}
@media (max-width:460px){.awb .meta{grid-template-columns:1fr 1fr}.awb .meta div:last-child{grid-column:1/-1}}

/* Yoyo-inspired additions: trust strip (facts only), tracking entry, profile chooser, topbar phone/login */
.topbar .tel{display:none;font:500 .85rem var(--mono);color:var(--navy)}
.topbar .login{display:none;font-weight:600;font-size:.9rem;color:var(--navy);padding:.4rem .2rem}
@media (min-width:1080px){.topbar .tel,.topbar .login{display:inline-flex}}
.strip{background:var(--navy);color:#fff}
.strip ul{list-style:none;margin:0;padding:var(--s4) 0;display:grid;gap:var(--s3);grid-template-columns:1fr 1fr}
@media (min-width:860px){.strip ul{grid-template-columns:repeat(4,1fr);padding:var(--s5) 0}}
.strip li{display:grid;gap:.15rem;padding-inline-start:var(--s3);border-inline-start:2px solid var(--red)}
.strip b{font-size:.95rem}.strip span{font:400 .78rem var(--mono);color:#B9C4DA}
.track{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){.track{grid-template-columns:1fr 1fr}}
.trackform{display:grid;grid-template-columns:1fr auto;gap:var(--s2);background:#fff;border:1.5px solid var(--navy);border-radius:var(--r-lg);padding:var(--s3)}
.trackform input{min-height:3rem;padding:0 var(--s3);border:1.5px solid var(--line);border-radius:var(--r);font:500 1rem var(--mono);letter-spacing:.06em;background:var(--paper);min-width:0}
.trackform input:focus{border-color:var(--sky);outline:none;box-shadow:0 0 0 3px var(--sky-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.profile{display:grid;gap:var(--s2);align-content:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);transition:border-color .15s,transform .15s}
.profile .idx{font:500 .8rem var(--mono);letter-spacing:.12em;color:var(--red)}
.profile p{color:var(--muted)}.profile .go{font-weight:600;color:var(--sky);margin-top:var(--s2)}
html[lang=ar] .profile .idx{letter-spacing:0}
/* topbar overflow at 1440: keep nav on one line; phone only on wide screens */
.nav a,.brand small,.topbar .login{white-space:nowrap}
.topbar .tel{display:none}@media (min-width:1280px){.topbar .tel{display:inline-flex}}
@media (min-width:800px) and (max-width:1279px){.nav{gap:var(--s4)}}

/* Arabic has no mono face - long hints read better in the sans */
html[lang=ar] .hint,html[lang=ar] .hero .note{font-family:var(--sans)}


/* mobile menu — below 800px the nav is hidden, so the burger is the only way through */
.burger{display:grid;place-content:center;gap:5px;width:2.75rem;height:2.75rem;margin-inline-start:auto;
  padding:0;border:1.5px solid var(--navy);border-radius:var(--r);background:#fff;cursor:pointer}
.burger span{display:block;width:1.05rem;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .2s ease-out,opacity .15s ease-out}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{border-top:1px solid var(--line);background:var(--paper);padding:var(--s3) var(--s4) var(--s5);
  display:grid;gap:.15rem}
.menu[hidden]{display:none}
/* the topbar hides primary buttons on small screens; inside the menu it must show */
.topbar .menu .btn-primary{display:inline-flex}
.menu a{padding:.85rem .25rem;font-weight:600;border-bottom:1px solid var(--line)}
.menu a[aria-current]{color:var(--red)}
.menu .menu-login{border-bottom:0;color:var(--muted);font-weight:500}
.menu .menu-cta{margin-top:var(--s2);justify-content:center}
@media (min-width:800px){.burger{display:none}.menu{display:none!important}}

/* polish pass */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.lede,.row p,.card p,.step p,.faq p{text-wrap:pretty}
.btn:active{transform:scale(.97)}
.lang,.burger{transition:background .15s ease-out,color .15s ease-out,transform .15s ease-out}
.lang:active,.burger:active{transform:scale(.97)}
.nav a,.menu a,.tel,.login{min-height:2.75rem;display:flex;align-items:center}
.trackform input{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .btn:active,.lang:active,.burger:active{transform:none}
  .burger span{transition:none}
}


/* Touch and selection — hover belongs to pointers, not taps */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#B7141B}
  .btn-navy:hover{background:var(--ink)}
  .btn-ghost:hover{background:var(--navy);color:#fff}
  .btn-white:hover{background:var(--sky-soft)}
  .nav a:hover{color:var(--sky)}
  .lang:hover{background:var(--navy);color:#fff}
  .row:hover .go{text-decoration:underline}
  footer a:hover{color:#fff}
  .topbar .login:hover{color:var(--sky)}
  .profile:hover{border-color:var(--navy);transform:translateY(-2px)}
}
html{-webkit-tap-highlight-color:transparent}
a,button,summary,[role=button]{-webkit-tap-highlight-color:rgba(46,127,214,.18)}
::selection{background:var(--sky-soft);color:var(--navy)}

[hidden]{display:none!important}
/* ---- Quote wizard (quote / quote.js) ---- */
.stepper{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);counter-reset:none}
.stepper li{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r);border:1.5px solid var(--line);background:#fff;font:500 .78rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;min-width:0}
.stepper li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper li b{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--navy);font-weight:700}
.stepper li.on{border-color:var(--navy);color:var(--navy)}
.stepper li.on b{background:var(--navy);color:#fff}
.stepper li.done{color:var(--ok);border-color:var(--ok)}
.stepper li.done b{background:var(--ok);color:#fff}
@media (max-width:520px){.stepper li span{display:none}.stepper li{justify-content:center}.stepper li.on span{display:inline}}
.qform{grid-template-columns:1fr}
.qstep{display:grid;gap:var(--s4);border:0;margin:0;padding:0;min-width:0}
@media (min-width:760px){.qstep{grid-template-columns:1fr 1fr}.qstep .full{grid-column:1/-1}}
.qstep legend{grid-column:1/-1;font:700 1.25rem/1.2 var(--sans);color:var(--navy);margin-bottom:var(--s2);padding:0}
.field select{min-height:3rem;padding:var(--s3);border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);width:100%;font:inherit}
.field select:focus{border-color:var(--sky);outline:none;box-shadow:0 0 0 3px var(--sky-soft)}
.field .fhelp{font:400 .78rem var(--sans);color:var(--muted)}
.field [aria-invalid]{border-color:var(--red);box-shadow:0 0 0 3px #FBE3E4}
.field .ferr{margin:0;font:500 .8rem var(--sans);color:var(--red)}
.field.check .chk{display:flex;gap:var(--s3);align-items:flex-start;font:500 .95rem var(--sans);color:var(--text);text-transform:none;letter-spacing:0;padding:var(--s3);border:1.5px dashed var(--line);border-radius:var(--r);background:var(--paper);cursor:pointer}
.field.check input{width:1.25rem;height:1.25rem;margin-top:.1rem;accent-color:var(--navy);flex:none}
.meter{display:grid;gap:var(--s2)}
.meter .bar{height:.6rem;border-radius:999px;background:var(--paper-2);overflow:hidden}
.meter .bar i{display:block;height:100%;width:0;background:var(--ok);border-radius:999px;transition:width .2s}
.meter .lbl{font:500 .82rem var(--mono);color:var(--ok)}
.meter.over .bar i{background:var(--red)}.meter.over .lbl{color:var(--red)}
.rules{list-style:none;margin:0;padding:var(--s3) var(--s4);display:grid;gap:var(--s1);background:var(--paper);border-radius:var(--r);font:400 .85rem var(--sans);color:var(--muted)}
.refbox{display:grid;gap:var(--s1);padding:var(--s4);border-radius:var(--r);background:var(--navy);color:#fff}
.refbox .eyebrow{color:#7FB4EE}
.refbox b{font:700 1.5rem/1.1 var(--mono);letter-spacing:.06em}
.refbox small{color:#B9C4DA;font-size:.8rem}
.recap dl{margin:0;display:grid;gap:0}
.recap dl>div{display:grid;grid-template-columns:minmax(7rem,30%) 1fr;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.recap dl>div:last-child{border-bottom:0}
.recap dt{font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.recap dd{margin:0;overflow-wrap:anywhere}
.preview{margin:0;padding:var(--s4);background:var(--paper);border-radius:var(--r);font:400 .85rem/1.5 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.qnav{display:flex;gap:var(--s3);justify-content:space-between;flex-wrap:wrap;padding-top:var(--s2);border-top:1px solid var(--line)}
.qnav .qnext,.qnav .qsend{margin-inline-start:auto}
@media (max-width:460px){.qnav .btn{flex:1 1 100%}}
html[lang=ar] .stepper li,html[lang=ar] .recap dt{letter-spacing:0}

/* ---- Team guide (equipe.html) ---- */
.tpl{display:grid;gap:var(--s4)}
.tpl article{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);display:grid;gap:var(--s3)}
.tpl article h3{display:flex;align-items:center;gap:var(--s2);font-size:1.05rem}
.tpl article h3 .st{font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-inline-start:auto}
.tpl pre{margin:0;padding:var(--s3);background:var(--paper);border-radius:var(--r);font:400 .88rem/1.55 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere}
.tpl .acts{display:flex;gap:var(--s2);flex-wrap:wrap}
.tpl .btn{min-height:2.5rem;padding-inline:var(--s4);font-size:.88rem}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.flow li{display:grid;grid-template-columns:2.2rem 1fr;gap:var(--s3);align-items:start;padding:var(--s3);background:#fff;border:1.5px solid var(--line);border-radius:var(--r)}
.flow li .e{font-size:1.4rem;line-height:1}
.flow li b{display:block}
.flow li small{color:var(--muted)}
.regtable{width:100%;border-collapse:collapse;font-size:.85rem;background:#fff}
.regtable th,.regtable td{border:1px solid var(--line);padding:var(--s2) var(--s3);text-align:start;vertical-align:top}
.regtable th{font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
.scroll{overflow-x:auto}

/* Guide page (addresses + advice). Classes, not style="": the CSP (style-src 'self') drops inline styles. */
.guide-addr h3{padding-top:var(--s4)}
.guide-addr .sub{color:var(--muted);margin:var(--s2) 0 var(--s4)}
.guide-addr .en{font-weight:600;color:var(--navy)}
.guide-addr .zh{font-size:1.15rem;margin:var(--s3) 0}
.acts-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.acts-row.spaced{margin-top:var(--s6);gap:var(--s3)}
.mark{text-align:center}
.mark .mark-line{font:500 clamp(1.1rem,3.4vw,1.8rem)/1.3 var(--mono);color:var(--navy);letter-spacing:.02em}
.mark .mark-ex{color:var(--muted);margin-top:var(--s3)}
.tips h3{margin-bottom:var(--s4)}
/* Seven nav items since the Guide page: the phone number only fits from 1440px, on one line. */
.topbar .tel{white-space:nowrap}
@media (min-width:1280px) and (max-width:1439px){.topbar .tel{display:none}}
.guide-addr .awb::before,.mark::before{display:none}
.guide-addr .awb .head{border-bottom:2px dashed var(--line)}
.mark-line bdi,.mark .nw{white-space:nowrap}


/* Utilities that replace the old style="" attributes, which the CSP (style-src 'self') silently dropped.
   !important keeps the precedence those inline styles were written to have. */
.u-mt4{margin-top:1rem!important}.u-mt5{margin-top:1.25rem!important}.u-mt6{margin-top:1.5rem!important}
.u-mb5{margin-bottom:1.25rem!important}.u-mb6{margin-bottom:1.5rem!important}.u-pt6{padding-top:1.5rem!important}
.u-mw34{max-width:34ch!important}.u-h2{margin:.75rem 0 1rem!important}.u-h2t{margin:.75rem 0 .5rem!important}
.u-row{display:flex!important;gap:.75rem;flex-wrap:wrap}.u-cols2{grid-template-columns:1fr 1fr!important}
.u-muted{color:var(--muted)!important}.u-m-sub{margin:.5rem 0 1.25rem!important}.u-navy{color:var(--navy)!important}
.u-stack{max-width:64ch;display:grid!important;gap:1.5rem}.u-flip{transform:scaleX(-1)}

/* Offices (home, "Nos bureaux"): one live map per office, side by side; stacked on phones. Pin + directions
   like the ATOM site. Tiles are muted so HK's pins carry the colour: red = Algeria, sky = China. */
.offices{display:grid;gap:var(--s5)}
@media (min-width:56rem){.offices{grid-template-columns:1fr 1fr}}
.office-card{background:#fff;border:1.5px solid var(--navy);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:0 30px 60px -40px rgba(15,31,61,.5)}
.office-map{height:17rem;background:#e9eef5;position:relative;z-index:0;border-bottom:1.5px solid var(--navy)}
.office-map>a{position:absolute;inset:0;display:grid;place-items:center;color:var(--navy);font-weight:600}
.office-map .leaflet-tile-pane{filter:grayscale(.6) contrast(1.05) brightness(1.03)}
.office-body{padding:var(--s5);display:grid;gap:var(--s3);align-content:start}
.office-body h3{margin:0}
.loc-code{font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.loc-code.dz{color:var(--red)}.loc-code.cn{color:var(--sky)}
html[lang=ar] .loc-code{letter-spacing:0}
.office-addr{font-weight:600;color:var(--navy)}
.office-zh{font-size:1.05rem}
.office-hint{color:var(--muted);font-size:.9rem}
.office-list{margin:0;padding-inline-start:1.1rem;display:grid;gap:.3rem}
.office-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.office-actions .btn{flex:0 1 auto}
.hk-pin{position:relative;width:28px;height:28px}
.hk-pin .core{position:absolute;inset:4px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.hk-pin.dz .core{background:var(--red)}.hk-pin.cn .core{background:var(--sky)}
.hk-pin .ring{position:absolute;inset:-4px;border-radius:50%;background:rgba(46,127,214,.35);animation:hkpulse 1.8s ease-out infinite}
.hk-pin.dz .ring{background:rgba(215,25,32,.35)}
@keyframes hkpulse{from{transform:scale(.5);opacity:.9}to{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.hk-pin .ring{animation:none;opacity:0}}
.leaflet-tooltip.hk-tip{font:600 .75rem var(--sans);color:var(--navy);border:1.5px solid var(--navy);border-radius:6px;padding:.2rem .45rem;box-shadow:none}
.leaflet-container{font-family:var(--sans)}


/* ==== Thème « Nuit étoilée » (oct. 2026) : couleurs du logo — nuit, bleu ciel, rouge. Couche finale, surcharge ce qui précède. ==== */
/* shared polish for every theme */
:root{--r:12px;--r-lg:22px}
.btn{border-radius:999px;font-weight:700}
.lang,.burger{border-radius:12px}
.profile,.office,.office-card,.form,.trackform,.awb,.tpl article,.flow li{border-radius:var(--r-lg)}
.profile,.office,.office-card{border:0;box-shadow:var(--shadow)}
.profile{transition:transform .2s,box-shadow .2s}
@media (hover:hover){.profile:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi)}}
.office-card{border:0}.office-map{border-bottom:0}
.rows{border-top:0;display:grid;gap:var(--s3)}
.row{background:var(--card);border:0;border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow)}
@media (min-width:760px){.row{padding:var(--s5) var(--s6)}}
.faq{border-top:0;display:grid;gap:var(--s2)}
.faq details{background:var(--card);border:0;border-radius:16px;padding-inline:var(--s5);box-shadow:var(--shadow)}
.band{border-radius:28px;position:relative;overflow:hidden}
.strip li{border-inline-start:0;padding:var(--s3);border-radius:14px;background:rgba(255,255,255,.07)}
.stepper li{border-radius:999px}
.field input,.field textarea,.field select,.trackform input{border-radius:12px}
/* A — Nuit étoilée : reprend le logo (nuit, ciel bleu, avion, rouge) */
:root{--navy:#0B1A3A;--ink:#060E22;--sky:#3B9BFF;--sky-soft:#DDEEFF;--red:#E5262E;--paper:#F3F6FC;--paper-2:#E6ECF7;--line:#D8E0EE;
 --text:#0E1A33;--muted:#5A6684;--card:#fff;--shadow:0 18px 40px -24px rgba(11,26,58,.35);--shadow-hi:0 28px 60px -24px rgba(11,26,58,.5)}
.topbar{background:rgba(8,18,42,.94);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.topbar .brand,.topbar .nav a,.topbar .login,.topbar .tel{color:#fff}
.lang,.burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}.burger span{background:#fff}
.menu{background:#0B1A3A;color:#fff}.menu a{border-color:rgba(255,255,255,.1)}
.hero{background:radial-gradient(900px 500px at 85% 10%,rgba(59,155,255,.45),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(229,38,46,.25),transparent 60%),linear-gradient(160deg,#0B1A3A 0%,#10275A 55%,#0B1A3A 100%);color:#fff;margin-top:-4.3rem;padding-top:calc(4.3rem + var(--s7))}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 20%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 70%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 55% 15%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 75% 55%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 90% 85%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 45% 40%,#fff 50%,transparent 51%);opacity:.6;pointer-events:none}
.hero .wrap{position:relative}
.hero h1 .accent{background:linear-gradient(90deg,#6FB8FF,#3B9BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede,.hero .note{color:#B8C6E3}
.hero .stamp{background:rgba(229,38,46,.15);color:#FF8A8F;border-color:#FF8A8F}
.hero .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-primary{background:linear-gradient(135deg,#FF3B44,#D0141C);box-shadow:0 12px 30px -10px rgba(229,38,46,.7)}
.hero .awb{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);color:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.hero .awb .head b,.hero .awb .meta b{color:#fff}.hero .awb .head,.hero .awb .meta div,.hero .awb .city small,.hero .awb .city .alt{color:#9FB2D8}
.hero .awb::before{border-color:rgba(255,255,255,.2)}.hero .awb .line{background:rgba(255,255,255,.15)}
.hero .awb .plane{color:#6FB8FF;filter:drop-shadow(0 0 12px rgba(111,184,255,.7))}
.strip{background:linear-gradient(90deg,#0B1A3A,#13306B)}
.dark{background:linear-gradient(160deg,#0B1A3A,#163A7A)}
.step::before{background:transparent;color:#6FB8FF}
.band{background:linear-gradient(135deg,#E5262E,#B0121A 60%,#0B1A3A)}
.office{box-shadow:var(--shadow)}.office .big{background:linear-gradient(135deg,#0B1A3A,#3B9BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
footer{background:linear-gradient(180deg,#0B1A3A,#060E22)}
/* sous-pages : même bandeau nuit que l'accueil */
.page-hero{background:radial-gradient(700px 400px at 90% 0%,rgba(59,155,255,.4),transparent 60%),linear-gradient(160deg,#0B1A3A,#13306B);color:#fff;margin-top:-4.3rem;padding-top:calc(4.3rem + var(--s7));padding-bottom:var(--s7);margin-bottom:var(--s6)}
.page-hero .lede{color:#B8C6E3}.page-hero .eyebrow{color:#6FB8FF}
.mbar{background:rgba(8,18,42,.94)}
.nav a[aria-current]{border-color:#FF3B44}
.menu a[aria-current]{color:#FF6B72}
.topbar .brand small{color:#FF6B72}
@media (hover:hover) and (pointer:fine){.lang:hover{background:#fff;color:#0B1A3A}.nav a:hover,.topbar .login:hover{color:#6FB8FF}.btn-primary:hover{background:linear-gradient(135deg,#FF4A52,#B8121A)}.hero .btn-ghost:hover{background:#fff;color:#0B1A3A}}
.awb{border:0;box-shadow:var(--shadow-hi)}

/* ---- Contenu géré depuis le panel : bandeau d'annonce et réseaux sociaux ---- */
.announce{display:block;position:relative;z-index:51;color:#fff;font-weight:600;font-size:.92rem;text-align:center}
.announce .wrap{display:flex;gap:var(--s3);align-items:center;justify-content:center;min-height:2.6rem;padding-block:.45rem}
.announce.t-info{background:linear-gradient(90deg,#1F6FD1,#3B9BFF)}
.announce.t-promo{background:linear-gradient(90deg,#E5262E,#FF6B3D)}
.announce.t-alert{background:#F2B33D;color:#1A1300}
.announce .announce-go{font-weight:700}
html[dir=rtl] .announce .announce-go{transform:scaleX(-1)}
a.announce:hover{filter:brightness(1.08)}
.socials-title{margin-top:var(--s5);font:500 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7FB4EE}
html[lang=ar] .socials-title{letter-spacing:0;font-family:var(--sans)}
.socials{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.socials a{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;transition:transform .15s,background .15s}
.socials .i{width:1.15rem;height:1.15rem}
@media (hover:hover){.socials a:hover{transform:translateY(-2px);background:#3B9BFF;border-color:#3B9BFF}
 .socials a[data-net=instagram]:hover{background:#E1306C;border-color:#E1306C}.socials a[data-net=tiktok]:hover{background:#000;border-color:#25F4EE}
 .socials a[data-net=youtube]:hover{background:#FF0000;border-color:#FF0000}.socials a[data-net=whatsapp]:hover{background:#25D366;border-color:#25D366}
 .socials a[data-net=snapchat]:hover{background:#FFFC00;border-color:#FFFC00;color:#000}}
.socials-big{margin-top:var(--s5)}.socials-big a{width:3rem;height:3rem}.socials-big .i{width:1.35rem;height:1.35rem}
.foot-line{margin-top:var(--s2)}.foot-line a{color:#C5CEDF}

/* ---- 3 services : grandes cases d'entrée sur l'accueil (oct. 2026) ---- */
.services{padding-block:var(--s7) var(--s8);background:linear-gradient(180deg,#0B1A3A 0,#0B1A3A 14rem,var(--paper) 14rem)}
.services .section-head h2{color:#fff}.services .section-head .eyebrow{color:#6FB8FF}
.svc-grid{display:grid;gap:var(--s5)}
@media (min-width:860px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{--c1:#3B9BFF;--c2:#1F5FD1;position:relative;display:grid;gap:var(--s3);align-content:start;background:#fff;border-radius:26px;padding:var(--s6) var(--s5) var(--s5);
 box-shadow:0 30px 60px -30px rgba(11,26,58,.45);border:1px solid rgba(11,26,58,.06);overflow:hidden;transition:transform .2s,box-shadow .2s;color:var(--text)}
.svc::before{content:"";position:absolute;inset-inline:0;top:0;height:6px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.svc-red{--c1:#FF4A52;--c2:#C8121A}.svc-sky{--c1:#22C1E8;--c2:#2B6FE0}
.svc-ico{display:grid;place-items:center;width:5rem;height:5rem;border-radius:22px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 16px 30px -14px var(--c2)}
.svc-ico svg{width:2.7rem;height:2.7rem}
.svc h3{font-size:clamp(1.45rem,2.4vw,1.75rem);font-weight:700;letter-spacing:-.01em;margin-top:var(--s2)}
.svc p{color:var(--muted);font-weight:500}
.svc ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-weight:600;font-size:.95rem}
.svc li{display:flex;gap:.55rem;align-items:center}
.svc li::before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2))}
.svc-btn{margin-top:var(--s3);justify-self:start;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 12px 26px -12px var(--c2)}
html[dir=rtl] .svc-btn .i.fwd{transform:scaleX(-1)}
@media (hover:hover){.svc:hover{transform:translateY(-6px);box-shadow:0 40px 70px -30px rgba(11,26,58,.55)}}
@media (max-width:859px){.services{background:linear-gradient(180deg,#0B1A3A 0,#0B1A3A 13rem,var(--paper) 13rem)}}

/* ---- formulaires Expédition / Sourcing ---- */
.svc-form{grid-template-columns:1fr;gap:var(--s6)}
.svc-form .qstep{display:grid;gap:var(--s4)}
@media (min-width:760px){.svc-form .qstep{grid-template-columns:1fr 1fr}.svc-form .qstep .full{grid-column:1/-1}}
.svc-form .qstep legend{font:700 1.3rem/1.2 var(--sans);color:var(--navy)}
.svc-addr{display:grid;gap:var(--s4);padding:var(--s5);border-radius:var(--r-lg);background:linear-gradient(160deg,#0B1A3A,#13306B);color:#fff}
.svc-addr-head{font:700 1.3rem/1.2 var(--sans)}
.svc-addr .en{font-weight:600;line-height:1.6;color:#DCE7FA}.svc-addr .zh{font-size:1.1rem;color:#fff}
.svc-addr .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.svc-mark{display:grid;gap:var(--s2);padding:var(--s4);border-radius:var(--r);background:rgba(255,255,255,.08);border:1.5px dashed rgba(255,255,255,.35)}
.svc-mark .eyebrow{color:#6FB8FF}
.svc-mark b{font:600 clamp(1.05rem,3vw,1.45rem)/1.3 var(--mono);color:#fff;overflow-wrap:anywhere}
.svc-mark small{color:#B8C6E3}
.radios{border:0;margin:0;padding:0;display:grid;gap:var(--s2)}
.radios legend{font:500 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2);padding:0}
html[lang=ar] .radios legend{letter-spacing:0;font-family:var(--sans)}
.radios .chk{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);border:1.5px solid var(--line);border-radius:var(--r);background:#fff;font-weight:600;cursor:pointer}
.radios .chk:has(input:checked){border-color:var(--sky);background:var(--sky-soft)}
.radios input{width:1.15rem;height:1.15rem;accent-color:var(--navy)}
.svc-send{display:grid;gap:var(--s3);justify-items:start}
.svc-send .btn{min-height:3.4rem;font-size:1.05rem}

/* ---- Animation du vol Chine → Algérie (carte de l'accueil) ---- */
.flight{display:grid;gap:var(--s3);margin-block:var(--s3) var(--s4)}
.flight-map{width:100%;height:auto;overflow:visible}
html[dir=rtl] .flight-map{transform:scaleX(-1)}
.fl-route{stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:4 7}
.fl-trail{stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(111,184,255,.6))}
.fl-pin{stroke:#fff;stroke-width:3}.fl-cn{fill:#E5262E}.fl-dz{fill:#1E9E55}
.fl-pulse{fill:none;stroke-width:2}.fl-pulse.fl-cn{stroke:#FF6B72}.fl-pulse.fl-dz{stroke:#3DDC84}
.fl-plane{fill:#fff;filter:drop-shadow(0 0 8px rgba(111,184,255,.9))}
.fl-plane-still{display:none}
.flight-steps{position:relative;height:1.6rem;text-align:center;font-weight:700;font-size:.98rem;color:#fff}
.flight-steps .fs{position:absolute;inset-inline:0;opacity:0;animation:fs-cycle 7s infinite}
.flight-steps .fs1{animation-name:fs-1}.flight-steps .fs2{animation-name:fs-2}.flight-steps .fs3{animation-name:fs-3}
@keyframes fs-1{0%,16%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes fs-2{0%,16%{opacity:0;transform:translateY(4px)}20%,80%{opacity:1;transform:none}84%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes fs-3{0%,80%{opacity:0;transform:translateY(4px)}84%,100%{opacity:1;transform:none}}
.hero .awb .eta{margin-top:var(--s4);padding-top:var(--s3);border-top:1px dashed rgba(255,255,255,.18);font-size:.86rem;color:#B8C6E3;font-weight:500}
.awb .eta{margin-top:var(--s4);font-size:.86rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
 .fl-plane-anim,.fl-pulse{display:none}.fl-plane-still{display:inline}
 .fl-trail{stroke-dashoffset:0}
 .flight-steps .fs{animation:none}.flight-steps .fs2{opacity:1}
}

/* ---- slogan « مع HK وصلت » à droite du grand titre de l'accueil ---- */
.svc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4) var(--s6);margin-bottom:var(--s6)}
.svc-head .section-head{margin-bottom:0}
.hero-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.hero-title h1{margin:0}
.slogan{flex:none;display:grid;justify-items:center;gap:.4rem;margin:0;padding:var(--s4) var(--s4) var(--s3);border-radius:24px;
 background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.slogan-ar{display:grid;justify-items:center;line-height:.95;font-weight:700;font-size:clamp(1.9rem,8.5vw,3.6rem);letter-spacing:0;
 background:linear-gradient(180deg,#FFFFFF 0%,#6FB8FF 55%,#FF6B72 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.slogan-ar b{font-size:1.15em;font-weight:700}
.slogan-plane{width:2.4rem;height:2.4rem;color:#6FB8FF;filter:drop-shadow(0 0 10px rgba(111,184,255,.8));animation:slogan-fly 3.2s ease-in-out infinite}
html[dir=rtl] .slogan-plane{transform:scaleX(-1)}
@keyframes slogan-fly{0%,100%{translate:0 0}50%{translate:6px -6px}}
@media (prefers-reduced-motion:reduce){.slogan-plane{animation:none}}
@media (min-width:900px){.slogan{margin-inline-end:var(--s4)}}
.hero-title h1 span{white-space:nowrap}
@media (min-width:900px){.hero-title .slogan-ar{font-size:clamp(2.2rem,3.4vw,3rem)}.hero-title .slogan{padding:var(--s3)}}

/* ---- Suivre mon colis : barre de recherche (accueil + page) et frise des étapes ---- */
.trackbar{display:grid;grid-template-columns:1fr;gap:var(--s3);align-items:center;margin-top:var(--s6);padding:var(--s5);border-radius:26px;background:linear-gradient(135deg,#0B1A3A,#163A7A);color:#fff;box-shadow:0 30px 60px -30px rgba(11,26,58,.55)}
@media (min-width:860px){.trackbar{grid-template-columns:auto 1fr auto}}
.trackbar label{display:grid;gap:.2rem}.trackbar label>b{font-size:1.3rem;font-weight:700;color:#fff}.trackbar label>span{color:#B8C6E3;font-weight:500;font-size:.9rem}
.trackbar input{min-height:3.2rem;padding:0 var(--s4);border-radius:999px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:600 1.05rem var(--sans);min-width:0}
.trackbar input::placeholder{color:#8FA3C8}
.trackbar input:focus{outline:none;border-color:#6FB8FF;box-shadow:0 0 0 4px rgba(111,184,255,.25)}
.trackbar .btn{min-height:3.2rem}
.trackbar-page{margin-top:0}
.suivi-msg{margin-top:var(--s4);font-weight:600;color:var(--muted)}
.suivi-msg.empty{padding:var(--s4);border-radius:var(--r-lg);background:#fff;border:1.5px dashed var(--line);color:var(--text)}
.suivi-results{display:grid;gap:var(--s5);margin-top:var(--s5)}
.suivi-card{display:grid;gap:var(--s5);padding:var(--s5);border-radius:26px;background:#fff;box-shadow:var(--shadow-hi)}
.suivi-head{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between}
.suivi-code{display:grid;gap:.2rem}.suivi-code b{font:700 clamp(1.6rem,5vw,2.2rem)/1 var(--mono);letter-spacing:.1em;color:var(--navy)}
.suivi-meta{display:flex;flex-wrap:wrap;gap:.5rem;font-weight:600;color:var(--muted)}
.suivi-meta>span{padding:.25rem .7rem;border-radius:999px;background:var(--paper-2)}
.suivi-meta .suivi-svc{background:var(--navy);color:#fff}
/* the timeline: horizontal on wide screens, vertical on phones; the line is coloured up to the current stage */
.suivi-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.suivi-steps .st{position:relative;display:grid;grid-template-columns:2.6rem 1fr;gap:var(--s3);align-items:start;padding-bottom:var(--s5)}
.suivi-steps .st:last-child{padding-bottom:0}
.suivi-steps .st::before{content:"";position:absolute;inset-inline-start:1.25rem;top:2.6rem;bottom:0;width:3px;background:var(--line);border-radius:3px}
.suivi-steps .st:last-child::before{display:none}
.suivi-steps .st.done::before{background:linear-gradient(180deg,#3B9BFF,#1E9E55)}
.suivi-steps .st.current::before{background:var(--line)}
.st-dot{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--paper-2);color:var(--muted);font-weight:700;border:3px solid #fff;box-shadow:0 0 0 2px var(--line);z-index:1}
.st.done .st-dot{background:#1E9E55;color:#fff;box-shadow:0 0 0 2px #1E9E55}
.st.current .st-dot{background:linear-gradient(135deg,#3B9BFF,#1F5FD1);box-shadow:0 0 0 2px #3B9BFF,0 0 0 8px rgba(59,155,255,.2);animation:st-pulse 1.8s ease-out infinite}
@keyframes st-pulse{0%{box-shadow:0 0 0 2px #3B9BFF,0 0 0 0 rgba(59,155,255,.45)}100%{box-shadow:0 0 0 2px #3B9BFF,0 0 0 14px rgba(59,155,255,0)}}
.st-txt{display:grid;gap:.15rem;padding-top:.45rem}.st-txt b{font-size:1.02rem}.st:not(.done) .st-txt b{color:var(--muted)}
.st-txt time{font-size:.85rem;font-weight:600;color:var(--muted)}
@media (min-width:760px){
 .suivi-steps{grid-template-columns:repeat(6,1fr)}
 .suivi-steps .st{grid-template-columns:1fr;justify-items:center;text-align:center;padding-bottom:0}
 .suivi-steps .st::before{inset-inline-start:calc(50% + 1.3rem);inset-inline-end:calc(-50% + 1.3rem);top:1.2rem;bottom:auto;width:auto;height:3px}
 .suivi-steps .st.done::before{background:linear-gradient(90deg,#1E9E55,#3B9BFF)}
 html[dir=rtl] .suivi-steps .st.done::before{background:linear-gradient(270deg,#1E9E55,#3B9BFF)}
 .suivi-steps .st.current::before{background:var(--line)}
}
@media (prefers-reduced-motion:reduce){.st.current .st-dot{animation:none}}
.suivi-now{padding:var(--s4);border-radius:var(--r-lg);background:var(--sky-soft);color:var(--navy);font-weight:600}
.suivi-todo{display:grid;gap:var(--s3);padding:var(--s5);border-radius:var(--r-lg);background:linear-gradient(160deg,#0B1A3A,#13306B);color:#fff}
.suivi-todo>b{font-size:1.2rem}.suivi-todo>span{font-weight:600;color:#DCE7FA}
.suivi-addr{margin:0;font-weight:600;line-height:1.6;color:#fff}.suivi-zh{margin:0;font-size:1.1rem}
.suivi-todo .btn-ghost{justify-self:start;border-color:rgba(255,255,255,.5);color:#fff}
.suivi-mark{display:grid;gap:.3rem;padding:var(--s4);border-radius:var(--r);border:1.5px dashed rgba(255,255,255,.4);background:rgba(255,255,255,.07)}
.suivi-mark .eyebrow{color:#6FB8FF}.suivi-mark b{font:600 clamp(1rem,3vw,1.35rem)/1.3 var(--mono);overflow-wrap:anywhere}

.suivi-todo.suivi-recheck{background:linear-gradient(160deg,#9A3412,#EA580C)}
.suivi-recheck b{font-size:1.15rem}

.svc-totals{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);background:linear-gradient(160deg,#0B1A3A,#13306B);color:#fff}
.svc-totals div{display:grid;gap:2px}.svc-totals div>span{font-size:.85rem;opacity:.85}.svc-totals b{font-size:1.5rem;line-height:1.1}
.svc-heavy{grid-column:1/-1;margin:0;padding:.6rem .8rem;border-radius:10px;background:#EA580C;font-weight:700}

/* client space (2026-10-06) */
.svc-gate{display:grid;gap:var(--s3);padding:var(--s5);border-radius:var(--r-lg);border:2px solid #2E7FD6;background:#EEF5FD}
.svc-gate b{font-size:1.2rem}.svc-gate p{margin:0}
.svc-gate-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.svc-me{grid-column:1/-1;margin:0 0 var(--s3);padding:.6rem .9rem;border-radius:12px;background:#EEF5FD;font-size:.95rem}
.esp{max-width:860px}
.esp-auth{max-width:520px;margin-inline:auto;display:grid;gap:var(--s4)}
.esp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:999px;background:#E9EEF7}
.esp-tabs button{border:0;border-radius:999px;padding:.75rem 1rem;font:700 1rem var(--sans,inherit);background:transparent;color:inherit;cursor:pointer}
.esp-tabs button[aria-pressed="true"]{background:#fff;box-shadow:0 2px 8px rgba(11,26,58,.12);color:#1F5FD1}
.esp-help{font-size:.9rem;color:#5B6478;margin:0}
.esp-home{display:grid;gap:var(--s5)}
.esp-hello{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3)}
.esp-hello h2{margin:.2rem 0}.esp-hello p{margin:0;color:#5B6478;font-weight:600}
.esp-where{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:var(--s4);align-items:center;padding:var(--s5) var(--s6);border-radius:26px;color:#fff;text-decoration:none;
 background:linear-gradient(135deg,#D71920,#1F5FD1);box-shadow:0 20px 40px -18px #1F5FD1}
.esp-where .esp-pin{grid-row:1/3;font-size:2.4rem;font-style:normal}.esp-where b{font-size:clamp(1.3rem,4vw,1.9rem);line-height:1.15}.esp-where small{opacity:.9;font-size:.95rem}
.esp-tiles{display:grid;gap:var(--s3)}
@media (min-width:720px){.esp-tiles{grid-template-columns:repeat(3,1fr)}}
.esp-tile{display:grid;gap:4px;padding:var(--s4) var(--s5);border-radius:20px;background:#fff;border:2px solid #E3E8F2;text-decoration:none;color:inherit;box-shadow:0 10px 24px -18px rgba(11,26,58,.5)}
.esp-tile b{font-size:1.1rem}.esp-tile span{color:#5B6478;font-size:.92rem}
.esp-tile.t-ship{border-color:#3B9BFF}.esp-tile.t-price{border-color:#FF4A52}.esp-tile.t-src{border-color:#22C1E8}
.esp-files{display:grid;gap:var(--s4);scroll-margin-top:90px}.esp-files h2{margin:0}
.esp-wait{padding:var(--s4);border-radius:16px;background:#FFF4E5;border:2px solid #F59E0B;font-weight:600}
.esp-code{margin:0;font-weight:600}.esp-code b{letter-spacing:.08em}
.esp-price{margin:0;font-weight:800;font-size:1.1rem}
.esp-card.esp-recheck{outline:3px solid #EA580C}
.esp-card .suivi-code b{font:800 1.15rem/1.25 var(--sans,inherit);letter-spacing:0;text-transform:none}

/* product photos uploaded on the site (2026-10-06) */
.photo-up{display:grid;gap:var(--s2)}
.photo-lab{font-weight:700}
.photo-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.photo-th{position:relative;width:96px;height:96px}
.photo-th img{width:100%;height:100%;object-fit:cover;border-radius:14px;border:2px solid #E3E8F2}
.photo-x{position:absolute;top:-8px;inset-inline-end:-8px;width:28px;height:28px;border-radius:50%;border:0;background:#D71920;color:#fff;font-weight:800;cursor:pointer}
.photo-pick{position:relative;display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border:2px dashed #3B9BFF;border-radius:16px;background:#F3F8FF;cursor:pointer;font-weight:700;color:#1F5FD1}
.photo-pick[hidden]{display:none}
.photo-pick input{position:absolute;width:1px;height:1px;opacity:0}
.photo-plus{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:#1F5FD1;color:#fff;font-size:1.4rem}
.photo-hint{color:#5B6478}
.photo-up[aria-invalid] .photo-pick,.photo-up:has(.ferr) .photo-pick{border-color:#D71920;background:#FFF1F1}

/* "Mes produits" (2026-10-06) */
.myprod{display:grid;gap:8px;padding:var(--s4);border-radius:16px;background:#FFF8E6;border:2px solid #F5C04A}
.myprod-lab{font-weight:800}
.myprod-row{display:flex;flex-wrap:wrap;gap:8px}
.myprod-chip{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;border:2px solid #E8D29A;background:#fff;font:700 .95rem inherit;cursor:pointer}
.myprod-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.myprod-chip[aria-pressed="true"]{border-color:#1F5FD1;box-shadow:0 0 0 3px rgba(31,95,209,.18)}
.myprod-hint{color:#7A5B00}
.myprod-save{font-weight:700}
.myprod-ask input{border-color:#F59E0B !important;box-shadow:0 0 0 3px rgba(245,158,11,.25)}
.esp-prods{display:grid;gap:var(--s3)}.esp-prods h2{margin:0}
.esp-prod-list{display:grid;gap:10px}
.esp-prod{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;background:#fff;border:2px solid #F5C04A}
.esp-prod img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.esp-prod div{display:grid}.esp-prod span{color:#5B6478;font-size:.9rem}
.photo-th img,.esp-prod img{cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:1000;background:rgba(5,10,20,.92);display:grid;place-items:center;padding:3.5rem 1rem 2.5rem}
.zoom img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.zoom-x{position:absolute;top:12px;inset-inline-end:12px;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:#111;font:800 1.3rem sans-serif;cursor:pointer}
.zoom-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font:800 2rem/1 sans-serif;cursor:pointer}
.zoom-nav.prev{left:10px}.zoom-nav.next{right:10px}.zoom-nav[hidden]{display:none}

/* Krimolap on the site (2026-10-06) */
.krimo{position:fixed;inset-inline-start:14px;bottom:14px;z-index:70;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
.krimo>*{pointer-events:auto}
@media (max-width:799px){.krimo{bottom:84px}}
.krimo-body{position:relative;width:70px;height:86px;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 10px 16px rgba(11,26,58,.35));animation:kr-float 3.2s ease-in-out infinite}
.krimo-body svg{width:100%;height:100%}
.krimo-badge{position:absolute;top:-4px;inset-inline-end:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:#D71920;color:#fff;font:800 .85rem/24px inherit;text-align:center;box-shadow:0 0 0 3px #fff}
.krimo-badge[hidden],.krimo-bubble[hidden],.krimo-panel[hidden]{display:none}
.krimo-bubble{max-width:min(300px,76vw);padding:.7rem .9rem;border-radius:18px 18px 18px 4px;background:#fff;color:#0B1A3A;border:2px solid #1F5FD1;font-weight:700;font-size:.95rem;line-height:1.35;box-shadow:0 14px 34px -12px rgba(11,26,58,.5);cursor:pointer;animation:kr-pop .25s ease-out}
.krimo-panel{width:min(330px,88vw);max-height:min(calc(100vh - 230px),540px);max-height:min(calc(100dvh - 230px),540px);overflow-y:auto;padding:14px;border-radius:20px;background:#fff;color:#0B1A3A;box-shadow:0 24px 60px -16px rgba(11,26,58,.55);display:grid;gap:10px;animation:kr-pop .2s ease-out}
.krimo-head{display:flex;align-items:center;gap:8px}.krimo-head b{font-size:1.1rem}.krimo-grow{flex:1}
.krimo-x{width:34px;height:34px;border-radius:50%;border:1px solid #E3E8F2;background:#fff;cursor:pointer}
.krimo-hi{margin:0;font-weight:700}
.krimo-file{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;padding:.55rem .7rem;border-radius:12px;background:#F3F7FD;color:inherit;text-decoration:none}
.krimo-file b{grid-column:1/-1;font-size:.9rem;color:#1F5FD1}.krimo-file.act{background:#FFF4E5}.krimo-file.act b{color:#C2410C}
.krimo-ref{font:600 .78rem ui-monospace,monospace;color:#5B6478}
.krimo-acts{display:grid;gap:6px}
.krimo-act{display:flex;align-items:center;gap:10px;padding:.65rem .8rem;border-radius:12px;border:2px solid #E3E8F2;color:#0B1A3A;text-decoration:none;font-weight:700}
.krimo-act:hover{border-color:#3B9BFF;background:#F3F8FF}
.krimo-tog{justify-self:start;padding:.4rem .7rem;border-radius:999px;border:2px solid #E3E8F2;background:#fff;font-weight:700;cursor:pointer}.krimo-tog.on{border-color:#16A34A;color:#16A34A}
.krimo .r-eyes{transform-origin:60px 44px;animation:kr-blink 4.5s infinite}
.krimo.alert .krimo-body{animation:kr-jump .5s ease-out 3}
.krimo.alert .r-arm-r{transform-origin:99px 80px;animation:kr-wave .45s ease-in-out 6}
.krimo.alert .r-light{animation:kr-light .3s steps(2) 10}
@keyframes kr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes kr-jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px)}}
@keyframes kr-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-55deg)}}
@keyframes kr-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes kr-light{0%{fill:#D71920}100%{fill:#FFD43B}}
@keyframes kr-pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.krimo-body,.krimo .r-eyes,.krimo.alert .krimo-body,.krimo.alert .r-arm-r{animation:none}}