/* =========================================================
   SILK ROAD — animations de la page d'accueil
   - Entrée orchestrée du hero
   - Bandeau des pays d'achat
   - "Le trajet de votre colis" : route qui se dessine au défilement
   - Services en détail : onglets animés avec défilement automatique
   Tout est désactivé si l'utilisateur a demandé "réduire les animations".
   ========================================================= */
:root{--sr-gold:#f0b847;--sr-gold-2:#f7d27a;--sr-red:#c8161e;--sr-red-2:#8e0f15;--sr-night:#071522;--sr-card:#0d2030;--sr-line:#263d4e}

/* ---------- En-tête : ombre quand on défile ---------- */
body:not(.sr-app-body) .top{transition:box-shadow .3s,background-color .3s}
body:not(.sr-app-body) .top.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ---------- HERO : fond qui respire + entrée en cascade ---------- */
.hero2{overflow:hidden;background-image:none!important}
.hero2-bg{position:absolute;inset:0;z-index:-2;background:#07131f url("hero-shipping.jpg") 62% 58%/cover no-repeat;transform-origin:70% 60%}
.sr-js .hero2-bg{animation:srKen 26s ease-in-out infinite alternate}
@keyframes srKen{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}

.sr-js .hero2-copy>*,.sr-js .hero2-cards>.hcard{opacity:0;animation:srRise .9s cubic-bezier(.2,.75,.2,1) forwards}
.sr-js .hero2 h1{animation-delay:.15s}
.sr-js .hero2-sub{animation-delay:.4s}
.sr-js .hero2-actions{animation-delay:.6s}
.sr-js .hero2-cards>.hcard:nth-child(1){animation-delay:.85s}
.sr-js .hero2-cards>.hcard:nth-child(2){animation-delay:.97s}
.sr-js .hero2-cards>.hcard:nth-child(3){animation-delay:1.09s}
.sr-js .hero2-cards>.hcard:nth-child(4){animation-delay:1.21s}
@keyframes srRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* reflet doré qui traverse "sans limites" une fois l'entrée terminée */
.hero2 h1 span{background:linear-gradient(100deg,var(--sr-gold) 0%,var(--sr-gold) 40%,#fff3cf 50%,var(--sr-gold) 60%,var(--sr-gold) 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sr-js .hero2 h1 span{animation:srShine 2.4s 1.3s ease-in-out forwards}
@keyframes srShine{to{background-position:-50% 0}}

/* bouton principal : halo qui attire l'œil, deux fois seulement */
.sr-js .hbtn-gold{animation:srPulse 1.6s 1.6s ease-out 2}
@keyframes srPulse{0%{box-shadow:0 0 0 0 rgba(240,184,71,.55),0 10px 28px rgba(240,184,71,.28)}100%{box-shadow:0 0 0 16px rgba(240,184,71,0),0 10px 28px rgba(240,184,71,.28)}}
.hbtn{transition:transform .2s,background-color .2s,border-color .2s,color .2s}
.hbtn svg{transition:transform .25s}
.hbtn:hover svg{transform:scale(1.15) rotate(-8deg)}
.hcard:hover .hcard-ico{background:var(--sr-gold);color:#14202a}
.hcard-ico{transition:background-color .25s,color .25s}

/* ---------- Bandeau des pays d'achat ---------- */
.origins{width:100vw;margin:-56px calc(50% - 50vw) 0;background:linear-gradient(90deg,var(--sr-red-2),var(--sr-red) 50%,var(--sr-red-2));color:#fff;display:flex;align-items:center;overflow:hidden;border-block:1px solid rgba(240,184,71,.45)}
.origins-label{flex:none;position:relative;z-index:1;padding:13px 22px;background:var(--sr-red-2);font-weight:800;font-size:13px;white-space:nowrap;box-shadow:12px 0 18px var(--sr-red-2)}
html[dir=rtl] .origins-label{box-shadow:-12px 0 18px var(--sr-red-2);font-family:'Cairo','DM Sans',sans-serif}
.origins-viewport{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.origins-track{display:flex;width:max-content;animation:srMarquee 38s linear infinite}
html[dir=rtl] .origins-track{animation-name:srMarqueeRtl}
.origins:hover .origins-track{animation-play-state:paused}
.origins-list{display:flex;align-items:center;gap:30px;padding-inline-end:30px;margin:0;list-style:none}
.origins-list li{display:flex;align-items:center;gap:30px;white-space:nowrap;font-size:14px;font-weight:600}
.origins-list li::after{content:'';width:7px;height:7px;transform:rotate(45deg);background:var(--sr-gold)}
.origins-list li.is-dest{color:var(--sr-gold-2);font-weight:800}
@keyframes srMarquee{to{transform:translateX(-50%)}}
@keyframes srMarqueeRtl{to{transform:translateX(50%)}}

/* ---------- Révélation douce des titres de section ---------- */
.sr-js .sr-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1)}
.sr-js .sr-reveal.is-in{opacity:1;transform:none}

/* ---------- LE TRAJET DE VOTRE COLIS ---------- */
.journey{margin:72px 0 24px}
.journey-head{max-width:640px}
.journey-head h2,.svc-head h2{margin:0;color:#f5f8fa;font-size:clamp(26px,3.2vw,38px);line-height:1.15;letter-spacing:-.02em}
.journey-head p,.svc-head p{margin:10px 0 0;color:#a9bbc8;font-size:16px}
html[dir=rtl] .journey-head h2,html[dir=rtl] .svc-head h2{letter-spacing:0;font-family:'Cairo','DM Sans',sans-serif}

.journey-map{position:relative;margin-top:30px}
.journey-road{display:block;width:100%;height:auto;overflow:visible}
html[dir=rtl] .journey-road{transform:scaleX(-1)}
.journey-road .road-base{fill:none;stroke:#1b3245;stroke-width:16;stroke-linecap:round}
.journey-road .road-dash{fill:none;stroke:#36536a;stroke-width:2;stroke-dasharray:10 14;stroke-linecap:round}
.journey-road .road-fill{fill:none;stroke:url(#srRoadGrad);stroke-width:8;stroke-linecap:round}
.journey-road .stop{fill:var(--sr-night);stroke:#36536a;stroke-width:3;transition:fill .4s,stroke .4s}
.journey-road .stop.is-on{fill:var(--sr-gold);stroke:#fff3cf}
.journey-road .stop-ring{fill:none;stroke:var(--sr-gold);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.journey-road .stop-ring.is-on{animation:srRing 1.2s ease-out}
@keyframes srRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.journey-road .ship{transition:opacity .3s}
.journey-road .ship-wake{fill:none;stroke:rgba(255,255,255,.35);stroke-width:2;stroke-linecap:round}
.journey-end{position:absolute;top:0;font-size:12px;font-weight:800;color:#c8d8e3;display:flex;align-items:center;gap:6px}
.journey-end.start{inset-inline-start:0}
.journey-end.finish{inset-inline-end:0;color:var(--sr-gold-2)}
.journey-end i{width:9px;height:9px;border-radius:50%;background:var(--sr-red)}
.journey-end.finish i{background:var(--sr-gold)}

.journey-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:6px 0 0;padding:0;list-style:none;counter-reset:step}
.journey-step{position:relative;padding:20px 18px 22px;border-radius:16px;background:var(--sr-card);border:1px solid var(--sr-line);opacity:.45;transform:translateY(10px);transition:opacity .5s,transform .5s,border-color .5s,background-color .5s}
.journey-step.is-on{opacity:1;transform:none;border-color:rgba(240,184,71,.55);background:linear-gradient(160deg,#13293b,#0d2030)}
.journey-step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.journey-num{font-size:30px;font-weight:800;line-height:1;color:#36536a;transition:color .5s}
.journey-step.is-on .journey-num{color:var(--sr-gold)}
.journey-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(200,22,30,.14);color:#ff6f6f;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.journey-step.is-on .journey-ico{transform:rotate(-6deg) scale(1.08)}
.journey-step h3{margin:0 0 6px;font-size:17px;color:#f5f8fa}
.journey-step p{margin:0;font-size:13.5px;line-height:1.55;color:#a9bbc8}
html[dir=rtl] .journey-step h3,html[dir=rtl] .journey-step p{font-family:'Cairo','DM Sans',sans-serif}

/* ---------- SERVICES EN DÉTAIL ---------- */
.svc{margin:72px 0 30px}
.svc-body{display:grid;grid-template-columns:minmax(260px,.85fr) 1.4fr;gap:22px;margin-top:28px;align-items:stretch}
.svc-tabs{display:flex;flex-direction:column;gap:10px}
.svc-tab{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;width:100%;padding:16px 18px;text-align:start;border-radius:14px;border:1px solid var(--sr-line);background:#0b1b29;color:#c8d8e3;cursor:pointer;overflow:hidden;transition:border-color .25s,background-color .25s,color .25s}
.svc-tab:hover{border-color:#3d5a70;color:#fff}
.svc-tab[aria-selected=true]{border-color:rgba(240,184,71,.7);background:#11273a;color:#fff}
.svc-tab-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid #3d5a70;color:#9fb2c1;transition:all .3s}
.svc-tab[aria-selected=true] .svc-tab-ico{border-color:var(--sr-gold);background:var(--sr-gold);color:#14202a}
.svc-tab b{display:block;font-size:15px}
.svc-tab small{display:block;font-size:12.5px;color:#8fa4b4;margin-top:2px}
.svc-tab:focus-visible{outline:2px solid var(--sr-gold);outline-offset:3px}
.svc-tab-bar{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:100%;background:var(--sr-gold);transform:scaleX(0);transform-origin:left}
html[dir=rtl] .svc-tab-bar{transform-origin:right}
.svc.is-auto .svc-tab[aria-selected=true] .svc-tab-bar{animation:srBar var(--svc-delay,7s) linear forwards}
.svc.is-paused .svc-tab[aria-selected=true] .svc-tab-bar{animation-play-state:paused}
@keyframes srBar{to{transform:scaleX(1)}}

.svc-panels{position:relative;border-radius:20px;border:1px solid var(--sr-line);background:radial-gradient(circle at 100% 0,rgba(200,22,30,.18),transparent 45%),linear-gradient(160deg,#10263a,#0a1a28);overflow:hidden;min-height:380px}
.svc-panel{padding:30px 32px 32px;display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-content:start}
.svc-panel[hidden]{display:none}
.svc-panel.is-entering>*{animation:srPanel .55s cubic-bezier(.2,.75,.2,1) both}
.svc-panel.is-entering>*:nth-child(2){animation-delay:.06s}
.svc-panel.is-entering>*:nth-child(3){animation-delay:.12s}
.svc-panel.is-entering>*:nth-child(4){animation-delay:.18s}
.svc-panel.is-entering>*:nth-child(5){animation-delay:.24s}
@keyframes srPanel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.svc-panel h3{grid-column:1;margin:0;font-size:24px;color:#fff;line-height:1.2}
.svc-panel .svc-lead{grid-column:1;margin:0;color:#c3d3de;font-size:15.5px;line-height:1.6;max-width:52ch}
.svc-art{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:96px;height:96px;border-radius:24px;background:rgba(240,184,71,.1);border:1px solid rgba(240,184,71,.35);color:var(--sr-gold)}
.svc-panel.is-entering .svc-art svg{animation:srFloat 3.5s ease-in-out infinite}
@keyframes srFloat{50%{transform:translateY(-6px)}}
.svc-points{grid-column:1/-1;margin:14px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.svc-points li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:14.5px;line-height:1.5;color:#dbe6ee}
.svc-points li::before{content:'';width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--sr-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314202a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.svc-points b{color:#fff}
.svc-cta{grid-column:1/-1;justify-self:start;margin-top:18px}

/* ---------- Arrivages : les jauges se remplissent ---------- */
.sr-js .arrival-grid .capacity-track span{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.75,.2,1)}
html[dir=rtl].sr-js .arrival-grid .capacity-track span{transform-origin:right}
.sr-js .arrival-grid.is-in .capacity-track span{transform:scaleX(1)}
.sr-js .arrival-grid .arrival-card{transition:transform .25s,border-color .25s}
.sr-js .arrival-grid .arrival-card:hover{transform:translateY(-4px);border-color:rgba(240,184,71,.55)!important}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .svc-body{grid-template-columns:1fr}
  .svc-tabs{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .svc-tab{flex:0 0 78%;scroll-snap-align:start}
}
@media(max-width:760px){
  .journey-road,.journey-end{display:none}
  .journey-steps{grid-template-columns:1fr;gap:12px;position:relative;padding-inline-start:26px}
  .journey-steps::before{content:'';position:absolute;inset-inline-start:7px;top:8px;bottom:8px;width:4px;border-radius:4px;background:#1b3245}
  .journey-steps::after{content:'';position:absolute;inset-inline-start:7px;top:8px;width:4px;border-radius:4px;height:calc((100% - 16px) * var(--p,0));background:linear-gradient(var(--sr-red),var(--sr-gold))}
  .origins-label{padding:11px 14px;font-size:12px}
  .svc-panel{padding:22px 20px 24px;grid-template-columns:1fr}
  .svc-art{grid-column:1;grid-row:auto;width:64px;height:64px;border-radius:18px}
  .svc-art svg{width:34px;height:34px}
  .svc-panels{min-height:0}
}

/* ---------- Respect de "réduire les animations" ---------- */
@media (prefers-reduced-motion:reduce){
  .sr-js .hero2-bg,.origins-track,.sr-js .hbtn-gold,.sr-js .hero2 h1 span,.svc-panel.is-entering>*,.svc-panel.is-entering .svc-art svg{animation:none!important}
  .sr-js .hero2-copy>*,.sr-js .hero2-cards>.hcard{opacity:1;animation:none}
  .hero2 h1 span{-webkit-text-fill-color:var(--sr-gold)}
  .sr-js .sr-reveal,.journey-step{opacity:1;transform:none;transition:none}
  .sr-js .arrival-grid .capacity-track span{transform:none;transition:none}
  .origins-viewport{overflow-x:auto}
}

/* ---------- Vidéo de fond du hero ---------- */
.hero2-bg{background-position:center 55%}
.hero2-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
/* la vidéo bouge déjà : on garde seulement un zoom très léger */
.sr-js .hero2-bg{animation-duration:40s}
@keyframes srKen{from{transform:scale(1.02)}to{transform:scale(1.07)}}
/* voile un peu plus dense à gauche : la vidéo est chargée en détails derrière le titre */
.hero2::before{background:
  linear-gradient(90deg,rgba(5,14,24,.95) 0%,rgba(5,14,24,.84) 36%,rgba(5,14,24,.35) 70%,rgba(5,14,24,.08) 100%),
  linear-gradient(180deg,rgba(5,14,24,.15) 0%,rgba(5,14,24,0) 30%,rgba(5,14,24,0) 55%,rgba(5,14,24,.92) 100%)}
html[dir=rtl] .hero2::before{background:
  linear-gradient(270deg,rgba(5,14,24,.95) 0%,rgba(5,14,24,.84) 36%,rgba(5,14,24,.35) 70%,rgba(5,14,24,.08) 100%),
  linear-gradient(180deg,rgba(5,14,24,.15) 0%,rgba(5,14,24,0) 30%,rgba(5,14,24,0) 55%,rgba(5,14,24,.92) 100%)}
@media(max-width:980px){.hero2::before{background:linear-gradient(180deg,rgba(5,14,24,.85) 0%,rgba(5,14,24,.6) 45%,rgba(5,14,24,.95) 100%)}}
@media(max-width:560px){.hero2-video,.hero2-bg{object-position:62% 50%;background-position:62% 50%}}
@media (prefers-reduced-motion:reduce){.hero2-video{display:none}}