:root{
  --navy:#12314F; --navy2:#0C2439; --navy3:#081A2B;
  --gold:#B9974F; --gold-l:#D9C08A; --gold-d:#8B6F36;
  --ink:#101720; --grey:#5C6675; --line:#E3E7EC; --soft:#F6F7F9; --white:#fff;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}
h1,h2,h3{line-height:1.14; margin:0; font-weight:700; letter-spacing:-.022em}
h1{font-size:clamp(32px,5vw,60px)}
h2{font-size:clamp(26px,3.2vw,40px)}
h3{font-size:18px; letter-spacing:-.01em}
p{margin:0}
.lead{font-size:clamp(16px,1.45vw,18.5px); color:var(--grey); max-width:60ch}
section{padding:84px 0}
.eyebrow{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--gold)}
.idx{font-size:11.5px; font-weight:800; letter-spacing:.14em; color:#A8B2BF; font-variant-numeric:tabular-nums}
.head{display:block; margin-bottom:18px}
.head .idx{display:block; margin-bottom:8px; padding-top:0}
.head h2{margin-top:10px}
.sub{color:var(--grey); font-size:16.5px; max-width:62ch; margin-top:16px}
.sub a,.notice a{color:var(--navy); text-decoration:underline; text-underline-offset:2px}
.sub a:hover,.notice a:hover{color:var(--gold-d)}
.contact .sub a{color:var(--gold-l)}
.contact .sub a:hover{color:#fff}

/* banner */
.proto{background:#FDF6E7; border-bottom:1px solid #EEDFB8; color:#6F5410; font-size:12.5px; padding:7px 0; text-align:center}

/* header */
header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.93); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:26px; height:84px}
.brand{display:flex; align-items:center; gap:15px; flex:0 0 auto}
.brand img{height:56px; width:auto}
.brand-txt{display:flex; flex-direction:column; line-height:1.15; gap:2px}
.brand-txt b{font-size:13px; letter-spacing:.12em; color:#2E3A48; font-weight:800}
.brand-txt span{font-size:15px; letter-spacing:.04em; color:var(--navy); font-weight:800}
.nav-links{display:flex; gap:24px; margin-left:auto; font-size:13.5px; font-weight:600; color:#2E3A48}
.nav-links a{position:relative; padding:6px 0}
.nav-links a:hover{color:var(--navy)}
.nav-links a:hover:after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold)}
.nav-links a.on{color:var(--navy)}
.nav-links a.on:after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold)}
.nav-toggle{display:none; margin-left:10px; flex:0 0 auto; width:40px; height:36px; border:1px solid var(--line); background:#fff; border-radius:7px; padding:0; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px}
.nav-toggle span{display:block; width:16px; height:1.5px; background:var(--navy); transition:.18s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-right{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.lang{display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; flex:0 0 auto}
.lang button{border:0; background:#fff; padding:7px 10px; font-size:12.5px; font-weight:800; color:var(--grey); cursor:pointer; font-family:inherit}
.lang button.on{background:var(--navy); color:#fff}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:7px; font-weight:700; font-size:14px; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:.16s}
.btn-gold{background:var(--gold); color:#fff}
.btn-gold:hover{background:var(--gold-d)}
.btn-ghost{border-color:rgba(255,255,255,.32); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy2)}
.btn-line{border-color:var(--line); color:var(--navy); background:#fff}
.btn-line:hover{border-color:var(--navy)}

/* hero */
.hero{background:#0B2138 url(photos/tanger.webp) center 38%/cover no-repeat; color:#fff; padding:118px 0 0; position:relative; overflow:hidden}
.hero:before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg,rgba(7,22,37,.97) 0%,rgba(7,22,37,.90) 40%,rgba(7,22,37,.38) 100%)}
.hero svg.g{position:absolute; inset:auto 0 0 0; width:100%; height:auto; opacity:.28; pointer-events:none; z-index:1}
.hero .wrap{position:relative; z-index:2}
.hero .eyebrow{color:var(--gold-l)}
.hero h1{margin-top:20px; max-width:16ch}
.hero .lead{color:rgba(255,255,255,.78); margin-top:22px; max-width:56ch}
.hero .cta{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.modeschips{display:flex; gap:8px; flex-wrap:wrap; margin-top:30px}
.chip{font-size:12px; font-weight:700; letter-spacing:.06em; padding:7px 14px; border-radius:99px; border:1px solid rgba(217,192,138,.38); color:var(--gold-l); text-transform:uppercase; background:rgba(7,22,37,.25); backdrop-filter:blur(4px)}
.herobar{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid rgba(255,255,255,.18); margin-top:66px; padding:0 0 44px}
.herobar div{padding:24px 18px 0 0}
.herobar b{display:block; font-size:17px; letter-spacing:.02em; color:#fff}
.herobar span{display:block; font-size:11px; color:rgba(255,255,255,.55); margin-top:5px; letter-spacing:.1em; text-transform:uppercase}

/* page head */
.phead{position:relative; background:var(--navy) center/cover no-repeat; color:#fff; padding:80px 0 86px; overflow:hidden}
.phead:before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(7,22,37,.95) 0%,rgba(7,22,37,.80) 55%,rgba(7,22,37,.48) 100%)}
.phead .wrap{position:relative; z-index:2}
.phead h1{font-size:clamp(28px,3.6vw,44px); margin-top:16px; max-width:20ch}
.phead .lead{color:rgba(255,255,255,.78); margin-top:14px; max-width:56ch}
.phead-tanger{background-image:url(photos/tanger.webp)}
.phead-port{background-image:url(photos/port.webp)}
.phead-casa{background-image:url(photos/casa.webp)}
.phead-warehouse{background-image:url(photos/warehouse.webp)}
.phead-truck{background-image:url(photos/truck.webp)}
.phead-truck2{background-image:url(photos/truck2.webp)}
.phead-gare{background-image:url(photos/tanger2.webp)}
.phead-chassis{background-image:url(photos/chassis.webp)}
.crumb{font-size:12px; color:rgba(255,255,255,.45); letter-spacing:.04em}
.crumb a:hover{color:#fff}

/* partner */
.dgf{background:#fff; border-bottom:1px solid var(--line)}
.dgf .wrap{display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center; padding-top:32px; padding-bottom:32px}
.dgf .lbl{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--gold-d); border-right:1px solid var(--line); padding-right:44px; white-space:nowrap}
.dgf .body{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.dgf .nameslot{min-width:0; display:flex; align-items:center}
.dgf .nameslot img{height:70px; width:auto; display:block}
.dgf .nametext{font-size:clamp(18px,2.1vw,24px); font-weight:800; letter-spacing:.04em; color:var(--navy); text-transform:uppercase}
.dgf p{font-size:14px; color:var(--grey); max-width:60ch}

/* entries (query links) */
.entries{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px}
.entry{display:block; border:1px solid var(--line); border-radius:6px; padding:34px; background:#fff; position:relative; transition:.18s}
.entry:hover{border-color:var(--navy); box-shadow:0 16px 44px rgba(18,49,79,.09)}
.entry .tagline{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--gold-d)}
.entry h3{font-size:22px; color:var(--navy); margin:12px 0 9px}
.entry p{font-size:14px; color:var(--grey); line-height:1.55; max-width:38ch}
.entry .arrow{position:absolute; right:30px; top:32px; color:var(--gold); font-size:20px; line-height:1}

/* route */
.route{display:grid; grid-template-columns:repeat(5,1fr); position:relative; margin-top:56px}
.route:before{content:""; position:absolute; top:11px; left:9%; right:9%; height:1px; background:linear-gradient(90deg,rgba(185,151,79,.15),var(--gold) 22%,var(--gold) 78%,rgba(185,151,79,.15))}
.stop{position:relative; padding-top:38px; text-align:center; padding-right:8px}
.stop .d{position:absolute; top:4px; left:50%; transform:translateX(-50%); width:15px; height:15px; border-radius:50%; background:#fff; border:2.5px solid var(--gold); z-index:1}
.stop .c{font-size:15.5px; font-weight:800; color:var(--navy); letter-spacing:-.01em}
.stop .c em{display:block; font-style:normal; font-size:11px; font-weight:600; color:#98A2AE; letter-spacing:.1em; text-transform:uppercase; margin-top:4px}
.stop .r{font-size:12.5px; color:var(--grey); margin-top:9px; line-height:1.45}

/* modes */
.modes{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:64px}
.mode{padding:34px 24px 0; border-right:1px solid var(--line); text-align:center}
.mode:last-child{border-right:0}
.mode .ic{width:34px; height:34px; margin:0 auto 16px}
.mode .ic svg{width:34px; height:34px; stroke:var(--gold-d); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.mode h3{font-size:17px; color:var(--navy)}
.mode .s{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9AA5B1; margin-top:3px; font-weight:700}
.mode p{font-size:13.5px; color:var(--grey); margin-top:12px; line-height:1.55}

/* pillars (why us) */
.duo{background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:52px}
.pillar{padding:34px 32px 0 0; border-right:1px solid var(--line)}
.pillar:nth-child(2){padding-left:32px}
.pillar:last-child{padding-left:32px; padding-right:0; border-right:0}
.pillar .num{font-size:11px; font-weight:800; letter-spacing:.14em; color:#B9C2CC}
.pillar h3{font-size:21px; color:var(--navy); margin:10px 0 12px; letter-spacing:-.015em}
.pillar p{font-size:14px; color:var(--grey); line-height:1.62; min-height:72px}
.pillar ul{margin:18px 0 0; padding:0; list-style:none}
.pillar li{font-size:13.5px; padding:10px 0 10px 18px; position:relative; color:#2B3644; border-top:1px solid rgba(0,0,0,.06)}
.pillar li:first-child{border-top:0}
.pillar li:before{content:""; position:absolute; left:0; top:18px; width:5px; height:5px; border-radius:50%; background:var(--gold)}

/* services */
.svc{display:grid; grid-template-columns:1fr 1fr; gap:0 56px; margin-top:52px}
.sv{border-top:1px solid var(--line); padding:30px 0 34px; display:grid; grid-template-columns:44px 1fr; gap:20px}
.sv .n{font-size:12px; font-weight:800; color:#B9C2CC; letter-spacing:.1em; padding-top:4px}
.sv h3{color:var(--navy); margin-bottom:9px}
.sv p{font-size:14px; color:var(--grey); line-height:1.58}
.sv .k{display:flex; gap:26px; margin-top:16px; flex-wrap:wrap}
.sv .k div{font-size:12.5px; color:#8C97A4}
.sv .k div b{display:block; font-size:16px; color:var(--navy); letter-spacing:-.01em; margin-bottom:2px}
.loc{display:grid; grid-template-columns:1fr 1fr; column-gap:26px; margin-top:18px; border-top:1px solid var(--line)}
.loc div{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12.5px; padding:7px 0; border-bottom:1px solid rgba(0,0,0,.05)}
.loc span{color:#7A8595}
.loc b{color:var(--navy); font-weight:700; white-space:nowrap; font-size:12.5px}

/* standard transit times */
.delays{margin-top:30px; border-top:1px solid var(--line)}
.delays > div{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line)}
.delays > div > span{font-size:15px; font-weight:600; color:var(--navy)}
.delays b{font-size:24px; font-weight:800; color:var(--gold-d); white-space:nowrap; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.delays b span{font-size:inherit; color:inherit}

/* photo mosaic */
.mosaic{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:54px}
.mosaic figure{position:relative; margin:0; overflow:hidden; background:#0B2138; height:300px}
.mosaic img{width:100%; height:100%; object-fit:cover; display:block; opacity:.94; transition:transform .6s ease}
.mosaic figure:hover img{transform:scale(1.05)}
.mosaic figcaption{position:absolute; left:0; right:0; bottom:0; padding:46px 18px 16px; color:#fff; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; background:linear-gradient(transparent,rgba(7,22,37,.86))}

/* image cards */
.cards4{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:48px}
.card4{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); overflow:hidden; transition:.2s}
.card4:hover{border-color:#C3CCD6; box-shadow:0 20px 46px rgba(18,49,79,.10); transform:translateY(-2px)}
.card4 .thumb{height:210px; overflow:hidden; background:#0B2138}
.card4 .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease}
.card4:hover .thumb img{transform:scale(1.05)}
.card4 .body{padding:24px 26px 26px; display:flex; flex-direction:column; flex:1}
.card4 .num{font-size:11px; font-weight:800; letter-spacing:.14em; color:#B9C2CC}
.card4 h3{margin:8px 0 9px; font-size:20px; color:var(--navy)}
.card4 p{font-size:13.5px; color:var(--grey); line-height:1.6}
.card4 .meta{margin-top:auto; padding-top:16px; font-size:12px; font-weight:700; color:var(--gold-d); letter-spacing:.02em}
.warehouse{margin-top:28px; border:1px solid var(--line); background:#F7F4EE; padding:24px 28px}
.warehouse .loc{margin-top:10px; border-top:0}
.warehouse .loc div:last-child{border-bottom:0}

/* company timeline */
.timeline3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:44px}
.t3{border-top:2px solid var(--gold); padding-top:20px}
.t3 b{display:block; font-size:34px; letter-spacing:-.03em; color:var(--navy); line-height:1.05}
.t3 > span{display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-d); margin-top:6px}
.t3 p{font-size:13.5px; color:var(--grey); margin-top:10px; max-width:34ch; line-height:1.55}

/* entity cards */
.entgrid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:36px}
.ecard{border:1px solid var(--line); background:#fff; padding:26px 28px}
.ecard .f{font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:800; color:var(--gold-d)}
.ecard b{display:block; font-size:15px; color:var(--navy); margin:8px 0 4px}
.ecard .no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:#6B7684}
.ecard p{font-size:13px; color:var(--grey); margin-top:10px; line-height:1.55}

/* partner block */
.partner{display:flex; align-items:center; gap:44px; margin-top:36px; flex-wrap:wrap}
.partner .logo{background:#fff; border:1px solid var(--line); padding:24px 32px; display:flex; align-items:center}
.partner .logo img{height:54px; width:auto; display:block}
.partner p{font-size:15px; color:var(--grey); max-width:56ch; line-height:1.62}

/* contact photo card */
.contact-photo{position:relative; margin-top:30px; height:210px; overflow:hidden; background:#0B2138}
.contact-photo img{width:100%; height:100%; object-fit:cover; display:block; opacity:.95}
.contact-photo b{position:absolute; left:18px; bottom:14px; color:#fff; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase}

/* full-width photo band */
.photo-band{position:relative; height:420px; overflow:hidden; background:#0B2138}
.photo-band img{width:100%; height:100%; object-fit:cover; display:block; opacity:.95}
.photo-band .cap{position:absolute; left:0; right:0; bottom:0; padding:80px 28px 24px; background:linear-gradient(transparent,rgba(7,22,37,.88)); color:#fff}
.photo-band .cap b{display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-l)}
.photo-band .cap b span{font-size:inherit; color:inherit; letter-spacing:inherit}
.photo-band .cap span{display:block; font-size:14px; color:rgba(255,255,255,.82); margin-top:6px; max-width:60ch}

/* text + image split */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.split .media{height:440px; overflow:hidden; background:#0B2138}
.split .media img{width:100%; height:100%; object-fit:cover; display:block}

/* paper band */
.paper{background:#F7F4EE; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}


/* generic bullet list */
.bullets{margin:22px 0 0; padding:0; list-style:none; max-width:72ch}
.bullets li{font-size:14.5px; padding:9px 0 9px 20px; position:relative; color:#2B3644; border-top:1px solid var(--line)}
.bullets li:first-child{border-top:0}
.bullets li:before{content:""; position:absolute; left:0; top:17px; width:6px; height:6px; border-radius:50%; background:var(--gold)}
.bullets.two{display:grid; grid-template-columns:1fr 1fr; gap:0 48px; max-width:none}
.bullets.two li:nth-child(-n+2){border-top:0}

/* key / value rows — délais, conditions, entités */
.rows{margin-top:32px; border-top:1px solid var(--line)}
.rows .r{display:grid; grid-template-columns:250px 1fr; gap:6px 34px; padding:18px 0; border-bottom:1px solid var(--line)}
.rows .r > b{font-size:14.5px; color:var(--navy); letter-spacing:-.005em; font-weight:700}
.rows .r > b em{display:block; font-style:normal; font-weight:600; font-size:11px; color:#98A2AE; margin-top:3px; letter-spacing:.06em; text-transform:uppercase}
.rows .r p{font-size:13.5px; color:var(--grey); line-height:1.62; max-width:74ch}
.rows .r p + p{margin-top:7px}

/* placeholder block */
.ph{border:1px dashed #C9CFD7; border-radius:6px; padding:24px; margin-top:24px; font-size:13px; color:#8A939F; text-align:center; background:#FCFCFD}
.ph b{display:block; color:var(--navy); font-size:13.5px; margin-bottom:5px}
.ph.sm{padding:16px; text-align:left}

/* two columns */
.cols2{display:grid; grid-template-columns:1fr 1fr; gap:0 56px}

/* news list (company page) */
.news-grid{display:grid; grid-template-columns:1fr; margin-top:36px; border-top:1px solid var(--line)}
.nrow{display:grid; grid-template-columns:200px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); align-items:start}
.nrow.noimg{grid-template-columns:1fr}
.nthumb{display:block; height:132px; overflow:hidden; background:#0B2138}
.nthumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.nrow:hover .nthumb img{transform:scale(1.04)}
.nmeta{font-size:10.5px; font-weight:800; letter-spacing:.12em; color:#9AA5B1; text-transform:uppercase; font-variant-numeric:tabular-nums}
.nrow h3{font-size:18px; color:var(--navy); margin:6px 0 5px; line-height:1.38}
.nrow h3 a:hover{color:var(--gold-d)}
.nrow p{font-size:13.5px; color:var(--grey); line-height:1.6; margin:0; max-width:70ch}
.nmore{display:inline-block; margin-top:8px; font-size:12px; font-weight:800; color:var(--gold-d)}
.nmore:hover{color:var(--navy)}
.ntag{display:inline-block; margin-left:8px; font-size:9.5px; font-weight:800; letter-spacing:.08em; color:var(--gold-d); border:1px solid rgba(185,151,79,.45); border-radius:3px; padding:1px 5px; text-transform:uppercase}

/* homepage news band */
.news-band{background:#F7F4EE; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:76px 0}
.news-head{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:40px}
.news-head h2{font-size:34px; margin:10px 0 10px; color:var(--navy); letter-spacing:-.02em}
.news-head .sub{margin:0; font-size:14.5px; max-width:62ch}
.news-more{display:inline-block; margin:0 0 4px; font-size:13px; font-weight:800; color:var(--gold-d); border-bottom:1px solid rgba(185,151,79,.5); padding-bottom:2px; white-space:nowrap}
.news-more:hover{color:var(--navy)}
.news-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.ncard{background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .35s ease, box-shadow .35s ease}
.ncard:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(11,33,56,.10)}
.nimg{display:block; aspect-ratio:16/9; overflow:hidden; background:#0B2138}
.nimg img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.ncard:hover .nimg img{transform:scale(1.04)}
.nimg-fallback{display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase}
.ncard .nbody{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.ncard .nmeta{font-size:10.5px; font-weight:800; letter-spacing:.12em; color:#9AA5B1; text-transform:uppercase; font-variant-numeric:tabular-nums}
.ncard h3{font-size:20px; line-height:1.36; margin:8px 0 9px; color:var(--navy); letter-spacing:-.01em}
.ncard h3 a:hover{color:var(--gold-d)}
.ncard p{font-size:14.5px; line-height:1.62; color:var(--grey); margin:0 0 4px; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ncard .nmore{margin-top:16px; font-size:12.5px}

/* news detail */
.article-page{padding:54px 0 92px}
.article-wrap{max-width:820px}
.article-cover{width:100%; height:440px; object-fit:cover; margin:0 0 32px; background:#0B2138}
.article-meta{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9AA5B1; font-variant-numeric:tabular-nums}
.article-meta .ntag{margin-left:10px}
.article-page h1{font-size:clamp(28px,4vw,44px); line-height:1.18; margin:14px 0 22px; color:var(--navy); letter-spacing:-.025em}
.article-body p{font-size:16px; line-height:1.85; color:#2B3644; margin:0 0 18px}
.article-body p:first-child{font-size:17.5px; color:#1B2735}
.article-source{font-size:12.5px; color:#8A939F; margin:26px 0 0; padding-top:14px; border-top:1px solid var(--line)}
.article-source a{color:var(--gold-d); text-decoration:underline}
.article-back{display:inline-block; margin-top:34px; font-size:13px; font-weight:800; color:var(--gold-d); border-top:1px solid var(--line); padding-top:18px}
.article-back:hover{color:var(--navy)}
@media(max-width:800px){.article-cover{height:260px}}

/* captcha */
.cap-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.cap-canvas{border:1px solid var(--line); border-radius:6px; cursor:pointer; display:block; background:#F6F7F9}
.cap-input{width:120px; padding:12px 14px; border:1px solid var(--line); border-radius:6px; font-size:15px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; text-transform:uppercase; outline:none}
.cap-input:focus{border-color:var(--navy); box-shadow:0 0 0 3px rgba(18,49,79,.08)}
.cap-hint{font-size:12px; color:#8A939F}
.cap-err{font-size:12.5px; color:#B42318; margin-top:8px; display:none}

/* quota line */
.quota{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--navy); background:var(--soft); border:1px solid var(--line); border-radius:99px; padding:6px 14px}
.quota.out{color:#B42318; border-color:#F3C6C0; background:#FEF4F3}
.quota-note{font-size:12px; color:#8A939F; margin-left:4px}

/* segmented control */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:0 0 30px}
.seg button{border:0; background:#fff; padding:11px 18px; font-size:13.5px; font-weight:700; color:var(--grey); cursor:pointer; font-family:inherit; border-right:1px solid var(--line); transition:.16s}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--navy)}
.seg button.on{background:var(--navy); color:#fff}

/* HS query results */
.hs-res{margin-top:28px; border-top:1px solid var(--line)}
.hs-res .row{display:grid; grid-template-columns:132px 1fr 98px; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); align-items:start}
.hs-res .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; font-weight:700; color:var(--navy); letter-spacing:.02em}
.hs-res .lbl{font-size:13.5px; color:#2B3644; line-height:1.55}
.hs-res .lbl em{display:block; font-style:normal; font-size:12px; color:#8A939F; margin-top:3px}
.hs-res .meta{font-size:12px; color:var(--grey); text-align:right; line-height:1.6}
.hs-res .ctrl{display:inline-block; margin-top:6px; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--gold-d); border:1px solid rgba(185,151,79,.4); border-radius:3px; padding:1px 6px; white-space:nowrap}
.ctrl-line{margin-top:6px; font-size:11.5px; color:var(--grey); line-height:1.5}
.ctrl-line b{color:var(--gold-d); font-weight:800}
.hs-sum{font-size:13px; color:var(--grey); margin-top:18px}
.hs-sum b{color:var(--navy)}
.cap-box{width:120px; height:42px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#F6F7F9; cursor:pointer; display:grid; place-items:center}
.cap-box svg{display:block; width:120px; height:42px}
@media(max-width:700px){
  .hs-res .row{grid-template-columns:1fr; gap:4px}
  .hs-res .meta{text-align:left}
  .seg{display:flex; width:100%}
  .seg button{flex:1; padding:11px 10px; font-size:12.5px}
}

/* timeline (suivi page) */
.tl{margin-top:44px; border-top:1px solid var(--line)}
.tl .row{display:grid; grid-template-columns:30px 1fr auto; gap:16px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line)}
.tl .dot{width:19px; height:19px; border-radius:50%; border:2px solid var(--line); background:#fff; display:grid; place-items:center; font-size:9px; font-weight:800; color:#B9C2CC}
.tl .row.done .dot{border-color:var(--gold); background:var(--gold); color:#fff}
.tl .row.now .dot{border-color:var(--navy); background:#fff; color:var(--navy); box-shadow:0 0 0 4px rgba(18,49,79,.1)}
.tl .nm{font-size:14.5px; color:#2B3644; font-weight:600}
.tl .row.pend .nm{color:#A8B2BF; font-weight:500}
.tl .row.now .nm{color:var(--navy); font-weight:800}
.tl .dt{font-size:12px; color:#98A2AE; font-variant-numeric:tabular-nums}

/* forms */
.form{display:grid; grid-template-columns:1fr 1fr; gap:20px 26px; margin-top:38px; max-width:860px}
.field{display:grid; gap:7px}
.field.full{grid-column:1/-1}
label{font-size:11px; font-weight:800; letter-spacing:.08em; color:#3C4858; text-transform:uppercase}
input,select,textarea{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:6px; font-size:14.5px; font-family:inherit; background:#fff; outline:none; color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--navy); box-shadow:0 0 0 3px rgba(18,49,79,.08)}
textarea{min-height:92px; resize:vertical}
.checks{display:flex; gap:22px; flex-wrap:wrap; padding-top:4px}
.checks label{display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:14px; font-weight:600; color:#2B3644}
.checks input{width:auto; padding:0; margin:0}
.actions{grid-column:1/-1; display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.notice{background:var(--soft); border-left:3px solid var(--gold); padding:16px 18px; font-size:13px; color:var(--grey); border-radius:0 6px 6px 0; margin-top:30px; max-width:860px}
.notice b{color:var(--navy)}
.out{margin-top:22px; display:none; font-size:13.5px; padding:14px 16px; border-radius:6px; background:#fff; border:1px solid var(--line); color:#2B3644; max-width:860px}

/* tools */
.toolgrid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:50px}
.tool{border:1px solid var(--line); border-radius:4px; padding:34px; background:#fff; position:relative; transition:.18s}
.tool:hover{border-color:#C3CCD6; box-shadow:0 14px 40px rgba(18,49,79,.07)}
.tool .tagline{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--gold-d)}
.tool h3{color:var(--navy); margin:12px 0 10px; font-size:21px}
.tool p{font-size:14px; color:var(--grey); line-height:1.6}
.tool .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px}
.tag{font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:3px; background:var(--soft); border:1px solid var(--line); color:#3C4858}
.tool .go{display:inline-flex; align-items:center; gap:7px; margin-top:22px; font-size:13.5px; font-weight:800; color:var(--navy)}
.tool .go:hover{color:var(--gold-d)}

/* contact */
.contact{background:var(--navy3); color:#fff}
.contact h2{color:#fff}
.contact .sub{color:rgba(255,255,255,.7)}
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:52px}
.wa{display:inline-flex; align-items:center; gap:12px; background:#25D366; color:#06301B; font-weight:800; padding:16px 26px; border-radius:8px; font-size:15.5px}
.wa:hover{filter:brightness(1.06)}
.wa svg{width:21px; height:21px; fill:#06301B}
.cline{display:flex; gap:12px; font-size:13.5px; padding:12px 0; border-top:1px solid var(--line); color:var(--grey)}
.cline b{color:var(--navy); min-width:104px; font-weight:700; flex:0 0 auto}
.contact .cline{border-top-color:rgba(255,255,255,.13); color:rgba(255,255,255,.8)}
.contact .cline b{color:#fff}
.qrwrap{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.qr{background:#fff; border-radius:8px; padding:10px; display:grid; justify-items:center; gap:8px; width:172px}
.qr img{width:150px; height:150px; object-fit:contain; border-radius:5px; display:block}
.qr .qrph{width:150px; height:150px; border:2px dashed #C9CFD7; border-radius:5px; display:none; place-items:center; text-align:center; font-size:11px; color:#8A939F; line-height:1.35; padding:8px}
.qr b{font-size:11.5px; color:var(--navy); letter-spacing:.05em}
.entities{display:grid; gap:0}
.ent{border-top:1px solid var(--line); padding:18px 0}
.ent .f{font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:800; color:var(--gold-d)}
.ent b{display:block; font-size:14px; margin:6px 0 3px; color:var(--navy); font-weight:700}
.ent .no{font-size:11.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#8A939F}
.ent .ad{font-size:11.5px; color:var(--grey); margin-top:4px; line-height:1.45}
.contact .ent{border-top-color:rgba(255,255,255,.14)}
.contact .ent .f{color:var(--gold-l)}
.contact .ent b{color:#fff}
.contact .ent .no{color:rgba(255,255,255,.55)}
.contact .ent .ad{color:rgba(255,255,255,.45)}
.ent .map{display:inline-block; margin-top:7px; font-size:11.5px; font-weight:700; color:var(--gold-d); letter-spacing:.02em}
.ent .map:hover{color:var(--navy)}
.contact .ent .map{color:var(--gold-l)}
.contact .ent .map:hover{color:#fff}

/* footer */
footer{background:#05131F; color:rgba(255,255,255,.48); font-size:12.5px; padding:44px 0}
.fgrid{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:44px}
footer b{color:rgba(255,255,255,.85); font-size:12.5px; display:block; margin-bottom:9px; letter-spacing:.04em}
footer .fl{display:grid; gap:7px}
footer a:hover{color:#fff; text-decoration:underline; text-underline-offset:2px}
.fnote{margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09); font-size:11.5px; line-height:1.7}

/* fab */
.fab{position:fixed; right:22px; bottom:22px; z-index:80; display:inline-flex; align-items:center; gap:9px; background:#25D366; color:#06301B; font-weight:800; font-size:13.5px; padding:13px 19px; border-radius:99px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.fab svg{width:19px; height:19px; fill:#06301B}

section[id]{scroll-margin-top:102px}

[data-lang="fr"] .zh{display:none !important}
[data-lang="zh"] .fr{display:none !important}

@media(max-width:1150px){
  .nav-toggle{display:flex; margin-left:10px}
  .nav-right{margin-left:auto; gap:10px}
  .nav-links{display:none; position:absolute; top:84px; left:0; right:0; margin:0; padding:4px 0 8px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 18px 34px rgba(18,49,79,.10); flex-direction:column; gap:0; font-size:15px; z-index:70}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 28px; border-top:1px solid var(--line)}
  .nav-links a:first-child{border-top:0}
  .nav-links a:hover:after{display:none}
  .nav-links a.on{background:var(--soft)}
  .nav-links a.on:after{display:none}
  .rows .r{grid-template-columns:1fr; gap:5px}
  .herobar{grid-template-columns:repeat(2,1fr); gap:8px 24px}
  .dgf .wrap{grid-template-columns:1fr; gap:16px}
  .dgf .lbl{border-right:0; padding-right:0; border-bottom:1px solid var(--line); padding-bottom:12px}
  .route{grid-template-columns:1fr; gap:0; margin-top:34px}
  .route:before{display:none}
  .stop{text-align:left; padding:14px 0 14px 34px; border-left:1px solid var(--line)}
  .stop .d{top:22px; left:-8px; transform:none}
  .modes{grid-template-columns:1fr 1fr; border-top:0; margin-top:44px}
  .mode{border-top:1px solid var(--line); border-right:0; padding:26px 16px}
  .mode:nth-child(odd){border-right:1px solid var(--line)}
  .entries{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .pillar,.pillar:nth-child(2),.pillar:last-child{padding:26px 0; border-right:0}
  .pillar p{min-height:0}
  .pillar + .pillar{border-top:1px solid var(--line)}
  .svc{grid-template-columns:1fr; gap:0}
  .cols2{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .news-cards{grid-template-columns:repeat(2,1fr)}
  .news-head{flex-direction:column; align-items:flex-start; gap:16px}
  .news-head h2{font-size:30px}
  .nrow{grid-template-columns:160px 1fr}
  .loc{grid-template-columns:1fr}
  .toolgrid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr; gap:44px}
  .fgrid{grid-template-columns:1fr; gap:28px}
  .mosaic{grid-template-columns:1fr; gap:12px}
  .mosaic figure{height:240px}
  .cards4{grid-template-columns:1fr}
  .bullets.two{grid-template-columns:1fr; gap:0}
  .bullets.two li:nth-child(2){border-top:1px solid var(--line)}
  .timeline3{grid-template-columns:1fr; gap:22px}
  .entgrid{grid-template-columns:1fr}
  .partner{gap:24px}
  .split{grid-template-columns:1fr; gap:30px}
  .split .media{height:320px}
  .photo-band{height:340px}
  .hero{padding-top:92px}
  .herobar{margin-top:48px}
  section{padding:76px 0}
}
@media(max-width:560px){
  .hero{padding-top:64px}
  .hero h1{font-size:40px}
  .brand img{height:48px}
  .brand-txt{display:none}
  .fab span{display:none}
  .modes{grid-template-columns:1fr}
  .mode,.mode:nth-child(odd){border-right:0; padding:22px 0}
  .news-grid{grid-template-columns:1fr}
  .news-cards{grid-template-columns:1fr}
  .news-band{padding:56px 0}
  .news-head h2{font-size:28px}
  .nrow{grid-template-columns:1fr; gap:14px}
  .nthumb{height:190px}
  .delays > div{gap:12px}
  .delays > div > span{font-size:14px}
  .delays b{font-size:20px}
  .card4 .thumb{height:180px}
  .photo-band{height:280px}
}

/* ---- 新闻归档 / 时效提示（2026-10-29 新增） ---- */
.notice-stale{border-left-color:#B4453A; background:#FBF3F2; color:#7A3B34; margin:0 0 26px}
.arch-month{font-size:15px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin:38px 0 4px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.arch-count{font-size:11px; color:#9AA5B1; font-weight:800; margin-left:6px}
.arch-list{list-style:none; margin:0; padding:0}
.arch-list li{display:flex; gap:16px; align-items:baseline; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line)}
.arch-list a{font-size:15px; font-weight:700; color:var(--navy); line-height:1.5}
.arch-list a:hover{color:var(--gold-d)}
.arch-date{font-size:11.5px; color:#9AA5B1; font-variant-numeric:tabular-nums; white-space:nowrap}
.arch-more{display:inline-block; margin-top:26px; font-size:13px; font-weight:800; color:var(--gold-d)}
@media(max-width:640px){.arch-list li{flex-direction:column; gap:4px}}