/* ============================================================
   Technotree — page vitrine.

   PALETTE : celle des progiciels de gestion, pas celle d un logo.
   Bleu nuit pour la structure (#0E2438), bleu franc pour l action
   (#1B5FA0), ambre pour ce qui doit accrocher l oeil (#B8801E), et une
   grise FROIDE pour le reste — c est ce que voit un gestionnaire toute
   la journee dans un tableau de bord, et ce a quoi il associe « serieux ».
   Le vert ne sert plus de theme : il est garde comme signal (« conforme »)
   et dans la feuille du logo, la ou il veut dire quelque chose.

   Les jetons portent un ROLE (--acc, --nuit, --ambre) et non une teinte :
   deux renommages en deux jours ont montre qu un jeton nomme « --terra »
   ou « --vert » devient un mensonge des que la charte bouge.

   Contraste verifie : #1B5FA0 sur blanc = 5.6:1, texte blanc sur #1B5FA0
   = 5.6:1 — au-dessus du seuil AA pour les boutons et les liens.
   ============================================================ */
:root{
  --bg:#F6F8FA;--surface:#FFFFFF;--surface2:#ECF1F6;--border:#DCE3EA;--border2:#E7ECF2;
  --tx:#16202B;--tx2:#55636F;--tx3:#909CA8;
  --acc:#1B5FA0;--nuit:#0E2438;--tint:#E3EDF7;
  --ambre:#B8801E;--ambre-bg:#FBF0DA;--bleu:#1B5FA0;--bleu-bg:#E3EDF7;
  --palmier:#2F7D4F;--palmier-bg:#E3F1E8;--argile:#A8552B;--argile-bg:#F6E6DC;
  --r:10px;--r2:16px;--r3:22px;--pill:999px;
  --sh:0 1px 2px rgba(16,32,48,.05),0 4px 14px rgba(16,32,48,.05);
  --sh2:0 2px 4px rgba(16,32,48,.07),0 18px 44px rgba(16,32,48,.13);
  --disp:'Fraunces',Georgia,serif;
  --ui:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ar:'IBM Plex Sans Arabic','Segoe UI',system-ui,sans-serif;
  --maxw:1140px;
}
html[data-theme="dark"]{
  --bg:#0B1622;--surface:#13202E;--surface2:#1A2A3A;--border:#27394C;--border2:#213244;
  --tx:#E8EEF4;--tx2:#A3B3C2;--tx3:#6F8091;--acc:#63A6E0;--nuit:#E8EEF4;--tint:#16304A;
  --ambre:#DCA94A;--ambre-bg:#2E2717;--bleu:#63A6E0;--bleu-bg:#152A3E;
  --palmier:#6FB88A;--palmier-bg:#16301F;--argile:#D0855C;--argile-bg:#33231C;
  --sh:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.36);
  --sh2:0 2px 4px rgba(0,0,0,.36),0 20px 48px rgba(0,0,0,.52);
}
*{box-sizing:border-box}
h1,h2,h3{text-wrap:balance}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--ui);font-size:15.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
html[dir="rtl"] body{font-family:var(--ar)}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--tint);color:var(--nuit)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- clavier ----------
   Le contour par defaut du navigateur disparait sur le heros sombre.
   Un anneau explicite, visible sur les deux fonds, et seulement au
   clavier (:focus-visible) pour ne pas cercler ce que la souris touche. */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.hero :focus-visible,.ctacard :focus-visible{outline-color:var(--ambre)}
.saut{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;
  background:var(--surface);color:var(--tx);border:1px solid var(--border);
  padding:10px 18px;border-radius:0 0 var(--r) 0;font-weight:600;box-shadow:var(--sh2)}
.saut:focus{inset-inline-start:0}
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.s{width:15px;height:15px}.ic.l{width:22px;height:22px}
/* une fleche de direction suit la langue */
html[dir="rtl"] .arr{transform:scaleX(-1)}

/* ---------- frise amazighe (separateur d identite) ---------- */
.frise{height:13px;background:var(--nuit)}
.frise svg{display:block;width:100%;height:13px}

/* ---------- entete ---------- */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
header.scrolled{border-bottom-color:var(--border);box-shadow:0 1px 12px rgba(16,32,48,.07)}
.nav{display:flex;align-items:center;gap:14px;height:70px}
.logo{display:flex;align-items:center;gap:11px;color:var(--tx)}
/* Le mot-symbole du logo : geometrique et espace, pas la serif des
   titres — c est une marque, pas un titre de section. Les deux moities
   gardent leurs couleurs propres (TECHNO petrole, TREE vert). */
.marque{width:38px;height:38px;flex:none}
.logo .lt{display:block;font-family:var(--ui);font-weight:700;font-size:18.5px;
  letter-spacing:.085em;line-height:1.1}
.logo .lt b{font-weight:700;color:var(--tx)}
.logo .lt i{font-style:normal;font-weight:700;color:var(--acc)}
.logo .ls{display:block;font-size:10.5px;color:var(--tx2);letter-spacing:.3px}
.links{display:flex;gap:4px;margin-inline-start:auto}
.links a{padding:8px 13px;border-radius:var(--pill);font-size:14px;font-weight:500;color:var(--tx2);transition:.15s}
.links a:hover{color:var(--tx);background:var(--surface2)}
.tools{display:flex;align-items:center;gap:8px}
.tbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--pill);
  border:1px solid var(--border);background:var(--surface);color:var(--tx2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.tbtn:hover{color:var(--tx);border-color:var(--tx3)}
.tbtn.icon{padding:0;width:36px;justify-content:center}
/* Selecteur de langue : TROIS LIENS, pas un bouton. Un robot d indexation
   ne clique pas ; sans lien reel, les versions ar/ et en/ n existent que
   dans le sitemap. Et un visiteur voit d un coup d oeil les trois langues
   au lieu de deviner qu un bouton tourne en boucle. */
.langs{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 8px 0 10px;
  border:1px solid var(--border);border-radius:var(--pill);background:var(--surface)}
.langs .glb{color:var(--tx3);margin-inline-end:4px;flex:none}
.langs a{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  padding:0 6px;border-radius:var(--pill);font-size:12.5px;font-weight:700;color:var(--tx3);
  letter-spacing:.02em;transition:.15s}
.langs a:hover{color:var(--tx);background:var(--surface2)}
.langs a[aria-current]{color:#fff;background:var(--acc)}
/* Le « ع » du selecteur declenchait a lui seul le telechargement des
   QUATRE fichiers de police arabe (~250 Ko) sur les pages francaise et
   anglaise, pour un unique glyphe : unicode-range ne regarde pas combien
   de caracteres arabes la page contient, il regarde s il y en a. On rend
   donc ce lien — et lui seul — a la police du systeme. */
.langs a[lang="ar"]{font-size:15px;font-weight:600;
  font-family:"Segoe UI",Tahoma,system-ui,sans-serif}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:var(--pill);
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:.16s;white-space:nowrap}
.btn.p{background:var(--acc);color:#fff;box-shadow:0 8px 22px rgba(27,95,160,.26)}
.btn.p:hover{background:#154C82;transform:translateY(-1px);box-shadow:0 12px 28px rgba(27,95,160,.32)}
.btn.o{background:rgba(255,255,255,.1);color:#F5F9FD;border-color:rgba(234,241,248,.34)}
.btn.o:hover{background:rgba(255,255,255,.18)}
.btn.sm{height:40px;padding:0 18px;font-size:13.5px}
.burger{display:none}

/* ---------- heros ---------- */
.hero{position:relative;overflow:hidden;color:#EAF1F8;
  background:
    radial-gradient(120% 90% at 84% 4%, rgba(176,138,46,.30), transparent 48%),
    radial-gradient(96% 74% at 8% 108%, rgba(27,95,160,.42), transparent 56%),
    linear-gradient(158deg,#1B4A72 0%,#0E2438 46%,#071624 100%)}
/* une grille de registre, a peine visible : le monde du progiciel sans
   le dire — et elle s efface vers les bords pour ne pas quadriller le texte */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(75% 80% at 62% 45%,#000 20%,transparent 100%);
  mask-image:radial-gradient(75% 80% at 62% 45%,#000 20%,transparent 100%)}
.hero-in{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;
  padding:78px 0 88px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#E7C88E;background:rgba(176,138,46,.18);border:1px solid rgba(176,138,46,.40);
  padding:6px 14px;border-radius:var(--pill)}
html[dir="rtl"] .eyebrow{letter-spacing:0;text-transform:none;font-size:12px}
.hero h1{font-family:var(--disp);font-weight:500;font-size:clamp(34px,4.6vw,52px);line-height:1.1;margin:22px 0 0;color:#F5F9FD}
.hero h1 em{font-style:italic;color:var(--ambre)}
html[dir="rtl"] .hero h1{font-family:var(--ar);font-weight:700;line-height:1.35}
html[dir="rtl"] .hero h1 em{font-style:normal}
.hero .lead{margin:20px 0 0;font-size:16.5px;line-height:1.66;color:#C2D5E6;max-width:520px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px;font-size:12.5px;color:#8AA0B4}
.dotsep{width:3px;height:3px;border-radius:50%;background:#8a7358;flex:none}
.trust{display:inline-flex;align-items:center;gap:7px;color:#AEC4D8}
.trust .ic{color:#7FBF94}
.illus{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
/* La fiche est claire sur le heros sombre : c est « l ecran du logiciel »
   pose sur la page, pas une illustration. */
.fiche{width:100%;max-width:440px;background:var(--surface);color:var(--tx);border-radius:var(--r2);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 70px rgba(3,12,24,.45),0 2px 6px rgba(3,12,24,.25);
  overflow:hidden}
.fiche-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
  background:var(--surface2);border-bottom:1px solid var(--border)}
.fiche-k{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx2)}
.fiche-k .ic{color:var(--acc)}
html[dir="rtl"] .fiche-k{letter-spacing:0;text-transform:none;font-size:13px}
.fiche-ref{font-size:13px;font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums;letter-spacing:.04em;
  padding:4px 10px;border-radius:var(--pill);background:var(--tint)}
.fiche-l{list-style:none;margin:0;padding:6px 18px 8px;position:relative}
.fiche-l::before{content:"";position:absolute;inset-inline-start:24px;top:16px;bottom:16px;width:2px;
  background:linear-gradient(var(--acc),var(--ambre))}
.fiche-l li{position:relative;padding:9px 0 9px 26px;opacity:0;transform:translateY(6px);
  animation:fiche-in .5s ease forwards;animation-delay:calc(.35s + var(--i) * .12s)}
html[dir="rtl"] .fiche-l li{padding:9px 26px 9px 0}
.fiche-l li::before{content:"";position:absolute;inset-inline-start:2px;top:15px;width:10px;height:10px;border-radius:50%;
  background:var(--surface);border:2px solid var(--acc)}
.fiche-l li:last-child::before{background:var(--ambre);border-color:var(--ambre)}
.fiche-l b{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
html[dir="rtl"] .fiche-l b{letter-spacing:0;text-transform:none;font-size:12px}
.fiche-l span{display:block;font-size:14px;margin-top:1px;font-variant-numeric:tabular-nums}
.fiche-f{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px 18px 14px;border-top:1px solid var(--border);background:var(--surface2)}
.fiche-f .verdict{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  padding:5px 11px;border-radius:var(--pill);background:var(--palmier-bg);color:var(--palmier)}
.fiche-n{font-size:11.5px;color:var(--tx3)}
.fiche-lien{font-size:13.5px;font-weight:600;color:#C2D5E6;border-bottom:1px solid rgba(194,213,230,.35);
  padding-bottom:2px;transition:.15s}
.fiche-lien:hover{color:#fff;border-color:#fff}
@keyframes fiche-in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fiche-l li{animation:none;opacity:1;transform:none}}
.diamonds{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.42}
.diamonds .d{position:absolute;color:rgba(234,241,248,.5)}
.d1{top:12%;left:6%}.d2{top:62%;left:2%}.d3{top:26%;right:5%}.d4{bottom:12%;right:14%}

/* ---------- bandeau preuves ---------- */
.preuves{background:var(--surface);border-bottom:1px solid var(--border)}
.preuves .g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border2)}
.preuve{background:var(--surface);padding:24px 20px;text-align:center}
.preuve b{display:block;font-family:var(--disp);font-size:19px;font-weight:600;color:var(--acc)}
html[dir="rtl"] .preuve b{font-family:var(--ar);font-weight:700;font-size:17px}
.preuve span{display:block;font-size:12.5px;color:var(--tx2);margin-top:4px}

/* ---------- sections ---------- */
section.blk{padding:84px 0}
.shead{max-width:660px;margin-bottom:44px}
.shead .kick{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
html[dir="rtl"] .shead .kick{letter-spacing:0;text-transform:none;font-size:13px}
.shead h2{font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.2vw,36px);line-height:1.18;margin:12px 0 0}
html[dir="rtl"] .shead h2{font-family:var(--ar);font-weight:700;line-height:1.4}
.shead p{margin:14px 0 0;color:var(--tx2);font-size:15.5px}

/* ---------- familles d operations ---------- */
.groupe{display:flex;align-items:center;gap:12px;margin-bottom:14px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.groupe::after{content:"";flex:1;height:1px;background:var(--border)}
html[dir="rtl"] .groupe{letter-spacing:0;text-transform:none;font-size:13px}

.familles{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:1px;background:var(--border2);border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden}
.fam{background:var(--surface);padding:24px 21px;transition:.18s}
.fam:hover{background:var(--surface2)}
.fam .fi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface2);border:1px solid var(--border2);color:var(--acc);
  margin-bottom:15px;transition:.18s}
.fam:hover .fi{background:var(--tint);border-color:transparent}
.fam b{display:block;font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:.2px}
html[dir="rtl"] .fam b{font-family:var(--ar);font-weight:700}
.fam span{display:block;font-size:13.5px;color:var(--tx2);margin-top:7px;line-height:1.55}

/* ---------- methode ----------
   Quatre etapes qui se SUIVENT : le numero et le trait qui les relie
   disent quelque chose de vrai. Les barres de progression qu il y avait
   avant (100 / 78 / 56 / 34 %) ne mesuraient rien. */
.meth{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.st{position:relative;padding-top:54px}
.st .num{position:absolute;top:0;inset-inline-start:0;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--nuit);color:#fff;font-weight:700;font-size:14.5px;
  font-variant-numeric:tabular-nums;box-shadow:0 6px 16px rgba(14,36,56,.18)}
html[data-theme="dark"] .st .num{color:var(--bg)}
.st::before{content:"";position:absolute;top:18px;inset-inline-start:46px;inset-inline-end:-26px;height:2px;
  background:linear-gradient(to right,var(--border),var(--border) 60%,transparent)}
html[dir="rtl"] .st::before{background:linear-gradient(to left,var(--border),var(--border) 60%,transparent)}
.st:last-child::before{display:none}
/* sous 4 colonnes le trait pointerait vers un vide ou hors du rang, et a
   375 px il depassait de 10 px le bord de la page (mesure) */
@media (max-width:960px){.st::before{display:none}}
.st h3{margin:0;font-size:16.5px;font-weight:700;font-family:var(--ui)}
.st p{margin:9px 0 0;font-size:14px;color:var(--tx2);line-height:1.6}

/* ---------- engagements ---------- */
.eng{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.engs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.e{display:flex;gap:16px}
.e .ei{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--bleu-bg);color:var(--bleu)}
.e:nth-child(2) .ei{background:var(--palmier-bg);color:var(--palmier)}
.e:nth-child(3) .ei{background:var(--argile-bg);color:var(--argile)}
.e b{display:block;font-size:15.5px;font-weight:700}
.e p{margin:7px 0 0;font-size:14px;color:var(--tx2);line-height:1.6}

/* ---------- contact ---------- */
.ctacard{position:relative;overflow:hidden;border-radius:var(--r3);color:#EAF1F8;padding:52px 48px;
  background:
    radial-gradient(90% 120% at 88% 6%, rgba(176,138,46,.28), transparent 52%),
    linear-gradient(150deg,#1B4A72 0%,#0E2438 52%,#071624 100%);
  box-shadow:0 26px 60px rgba(16,32,48,.24)}
.ctacard .inner{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.ctacard h2{font-family:var(--disp);font-weight:500;font-size:clamp(24px,3vw,33px);line-height:1.18;margin:14px 0 0;color:#F5F9FD}
html[dir="rtl"] .ctacard h2{font-family:var(--ar);font-weight:700;line-height:1.4}
.ctacard p{margin:14px 0 0;color:#C2D5E6;font-size:15px;max-width:460px}
.coords{display:flex;flex-direction:column;gap:12px}
.co{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(234,241,248,.15);transition:.16s}
a.co:hover{background:rgba(255,255,255,.13);border-color:rgba(234,241,248,.3)}
.co .ci{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:rgba(176,138,46,.18);color:var(--ambre)}
.co small{display:block;font-size:11px;color:#8AA0B4;letter-spacing:.04em}
.co b{display:block;font-size:14.5px;font-weight:600;color:#F5F9FD;margin-top:1px;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .co b.txt{direction:rtl}

/* ---------- pied ---------- */
footer{background:var(--surface2);border-top:1px solid var(--border);padding:40px 0 0}
.fgrid{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.fl{display:flex;flex-wrap:wrap;gap:18px;font-size:13.5px;color:var(--tx2)}
.fl a:hover{color:var(--acc)}
.legal{margin-top:26px;padding-top:20px;border-top:1px solid var(--border2);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12.5px;color:var(--tx3)}

/* ---------- apparition ---------- */
.rev{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- adaptatif ---------- */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;padding:56px 0 64px}
  .illus{order:-1;max-width:460px}
  .engs,.ctacard .inner{grid-template-columns:1fr}
  .mods,.meth{grid-template-columns:repeat(2,1fr)}
  .preuves .g{grid-template-columns:repeat(2,1fr)}
  .ctacard{padding:38px 28px}
}
/* La barre du haut a besoin d environ 1010px pour tenir en ligne
   (mesure : logo 202 + liens 448 + outils 276 + gouttieres). En dessous,
   les liens passent dans le menu deroulant — le bouton d appel reste. */
@media (max-width:1024px){
  .nav{position:relative}
  .links{display:none;position:absolute;top:70px;inset-inline-start:0;inset-inline-end:0;flex-direction:column;gap:2px;
    background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    padding:12px;box-shadow:var(--sh2);border-radius:0 0 var(--r2) var(--r2)}
  .links.open{display:flex}
  .burger{display:inline-flex}
  .tools{margin-inline-start:auto}
}
@media (max-width:720px){
  .hdcta{display:none}
  .mods,.meth{grid-template-columns:1fr}
  section.blk{padding:60px 0}
  .logo .ls{display:none}
}
/* Sous 520px la barre du haut ne tient plus : le libelle de langue
   passe en icone seule (mesure : 35px de debordement a 375px). */
@media (max-width:520px){
  .wrap{padding:0 16px}
  .langs .glb{display:none}
  .langs{padding:0 6px}
}

/* ---------- le fil (accueil) ---------- */
/* Une chaine ne se coupe pas en deux : sur ecran etroit elle defile.
   En l enroulant, une fleche se retrouvait orpheline en tete de ligne. */
.fil{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;
  overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;
  scrollbar-color:var(--border) transparent}
.fil::-webkit-scrollbar{height:6px}
.fil::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.fil::-webkit-scrollbar-track{background:transparent}
.maillon{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:var(--pill);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh);
  font-size:14px;font-weight:600;white-space:nowrap}
.maillon .ic{color:var(--tx3);transition:color .3s;transition-delay:calc(var(--i,0) * 110ms)}
.maillon{transition:border-color .3s,box-shadow .3s;transition-delay:calc(var(--i,0) * 110ms)}
.fil.on .maillon{border-color:var(--acc);box-shadow:0 6px 18px rgba(27,95,160,.12)}
.fil.on .maillon .ic{color:var(--acc)}
@media (prefers-reduced-motion:reduce){.maillon,.maillon .ic{transition:none}}
.fleche{color:var(--tx3);flex:none}
html[dir="rtl"] .fleche{transform:scaleX(-1)}
.plus{margin-top:32px;display:flex;justify-content:center}

/* ---------- page du parcours ---------- */
.chapeau{position:relative;overflow:hidden;color:#EAF1F8;
  background:
    radial-gradient(110% 90% at 80% 0%, rgba(176,138,46,.26), transparent 50%),
    linear-gradient(158deg,#1B4A72 0%,#0E2438 50%,#071624 100%)}
.chapeau-in{position:relative;z-index:2;padding:62px 0 66px;max-width:680px}
.chapeau h1{font-family:var(--disp);font-weight:500;font-size:clamp(30px,4vw,44px);line-height:1.12;margin:20px 0 0;color:#F5F9FD}
html[dir="rtl"] .chapeau h1{font-family:var(--ar);font-weight:700;line-height:1.35}
.chapeau p{margin:16px 0 0;font-size:16px;line-height:1.65;color:#C2D5E6}

/* le rail : une seule ligne de vie, du champ au client */
.rail{position:relative;max-width:720px;padding-inline-start:46px}
.rail::before{content:"";position:absolute;inset-inline-start:17px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(var(--acc),var(--ambre) 55%,var(--palmier))}
.etape{position:relative;padding:19px 0}
.etape .pt{position:absolute;inset-inline-start:-46px;top:17px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);border:2px solid var(--acc);color:var(--acc)}
.etape:nth-child(n+5) .pt{border-color:var(--ambre);color:var(--ambre)}
.etape:last-child .pt{border-color:var(--palmier);color:var(--palmier);background:var(--palmier-bg)}
.etape b{display:block;font-size:17px;font-weight:700}
.etape span{display:block;margin-top:5px;font-size:15px;color:var(--tx2);line-height:1.6}

/* le sens inverse : l argument qui vend */
.retour{margin-top:16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2);padding:34px 32px;box-shadow:var(--sh)}
.retour h2{margin:0;font-family:var(--disp);font-weight:600;font-size:23px}
html[dir="rtl"] .retour h2{font-family:var(--ar);font-weight:700}
.retour p{margin:14px 0 0;font-size:16px;line-height:1.7;color:var(--tx2);max-width:620px}
.retour .cle{color:var(--acc);font-weight:600}

/* tout le reste, nomme sans etre detaille */
.reste{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.reste span{font-size:13.5px;font-weight:600;padding:7px 15px;border-radius:var(--pill);
  background:var(--surface2);border:1px solid var(--border2);color:var(--tx2)}

@media (max-width:960px){
  .rail{padding-inline-start:40px}
  .retour{padding:26px 22px}
}

/* ---------- la remontee de chaine (page parcours) ----------
   Le seul effet anime du site. Il n est pas la pour decorer : il joue
   exactement le geste qu on demande a un exportateur le jour d un
   controle — partir d un numero de colis et remonter jusqu a la parcelle.
   Tout est en CSS (transitions + un delai indexe par --i) ; le script ne
   fait qu ecrire les valeurs et poser une classe. */
.saisie{margin-top:22px;display:flex;flex-direction:column;gap:12px;max-width:540px}
.lbl{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--tx3)}
.ligne{display:flex;gap:10px;flex-wrap:wrap}
.champ{flex:1 1 230px;height:46px;padding:0 17px;border-radius:var(--pill);
  border:1px solid var(--border);background:var(--bg);color:var(--tx);
  font:inherit;font-size:15px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.champ::placeholder{color:var(--tx3)}
.exemples{display:flex;flex-wrap:wrap;gap:8px}
.ex{font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:var(--pill);
  border:1px solid var(--border2);background:var(--surface2);color:var(--tx2);
  cursor:pointer;transition:.15s;font-variant-numeric:tabular-nums}
.ex:hover{border-color:var(--acc);color:var(--acc)}
.ex[aria-pressed="true"]{border-color:var(--acc);color:var(--acc);background:var(--tint)}
.avis{margin:0;font-size:12px;color:var(--tx3)}

.remonte{list-style:none;margin:26px 0 0;padding:0;position:relative;padding-inline-start:34px}
.remonte::before,.remonte::after{content:"";position:absolute;inset-inline-start:9px;width:2px}
.remonte::before{top:12px;bottom:12px;background:var(--border)}
/* le trait se remplit du bas (le client) vers le haut (le champ) :
   c est le SENS de la demonstration, pas un effet gratuit */
.remonte::after{bottom:12px;height:0;background:linear-gradient(to top,var(--acc),var(--ambre));
  transition:height .95s cubic-bezier(.22,.61,.36,1)}
.remonte.on::after{height:calc(100% - 24px)}
.remonte li{position:relative;padding:10px 0;opacity:0;transform:translateY(7px);
  transition:opacity .34s ease,transform .34s ease;transition-delay:calc(var(--i) * 95ms)}
.remonte.on li{opacity:1;transform:none}
.remonte li::before{content:"";position:absolute;inset-inline-start:-30px;top:17px;
  width:11px;height:11px;border-radius:50%;background:var(--surface);
  border:2px solid var(--border);transition:.3s;transition-delay:calc(var(--i) * 95ms)}
.remonte.on li::before{border-color:var(--acc);background:var(--acc)}
.remonte b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx3)}
.remonte .v{display:block;font-size:15.5px;margin-top:3px;font-variant-numeric:tabular-nums}
.remonte .verdict{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:12.5px;
  font-weight:700;padding:4px 11px;border-radius:var(--pill);
  background:var(--palmier-bg);color:var(--palmier)}
html[dir="rtl"] .lbl,html[dir="rtl"] .remonte b{letter-spacing:0;text-transform:none;font-size:13px}

@media (prefers-reduced-motion:reduce){
  .remonte li,.remonte li::before,.remonte::after{transition:none;transition-delay:0s}
}