/* NyamTechs, maquette A2 (version 2 de « Registre »).
   Ivoire clair dominant, noir pour le texte, or safran #E9A21B en touche (aplat ou soulignement, jamais en texte sur fond clair).
   Peu de filets : le rythme vient des espaces, des tailles et des images.
   Animations au défilement permises quand elles montrent le produit ; coupées avec « réduire les animations ». */
@font-face{font-family:"Reem Kufi";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/ReemKufi-VF.ttf) format("truetype")}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/noto-sans-arabic-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}

:root{
  --bg:#F5F5F3;--bg2:#EBEBE8;--ink:#0D0D0D;--ink2:rgba(26,26,26,.68);--ink3:rgba(26,26,26,.52);--line:rgba(26,26,26,.14);
  --gold:#E9A21B;--ivory:#EBEBE8;--night:#0D0D0D;--night-ink:#F5F5F3;--night-ink2:rgba(245,245,243,.72);
  --bub-c:#FFFFFF;--bub-a:#EBEBE8;
  --serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
  --head:"Reem Kufi",var(--sans);
  --pad:clamp(20px,6vw,112px);--gap:clamp(20px,3.2vw,56px);--sp:clamp(64px,7.5vw,112px);--hdr:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0D0D0D;--bg2:#141414;--ink:#F5F5F3;--ink2:rgba(245,245,243,.72);--ink3:rgba(245,245,243,.54);--line:rgba(245,245,243,.16);--bub-c:#1C1C1C;--bub-a:#EBEBE8}}
:root[data-theme=dark]{--bg:#0D0D0D;--bg2:#141414;--ink:#F5F5F3;--ink2:rgba(245,245,243,.72);--ink3:rgba(245,245,243,.54);--line:rgba(245,245,243,.16);--bub-c:#1C1C1C;--bub-a:#EBEBE8}
:root{color-scheme:light dark}
:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 19px/1.65 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1px;transition:opacity .3s}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.night :focus-visible{outline-color:var(--night-ink)}
p{margin:0 0 1.1em;hyphens:auto;-webkit-hyphens:auto}
.j{text-align:justify}
.skip{position:absolute;left:8px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;font:14px var(--sans);transform:translateY(-200%);z-index:100}.skip:focus{transform:none}
.nb{white-space:nowrap}.url{hyphens:none;white-space:nowrap}
.small{font:14px/1.55 var(--sans);color:var(--ink2)}
.cap{font:14px/1.55 var(--sans);color:var(--ink2);margin:14px 0 0;text-align:left}
.meta{font:13px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:0 0 22px}

/* En-tête : une ligne, fond plein, sans flou ni ombre */
.top{position:sticky;top:0;z-index:50;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--pad);background:var(--bg);transition:background .3s}
.top.scrolled{box-shadow:inset 0 -1px 0 var(--line)}
.brand{font:600 23px/1 var(--head);text-decoration:none;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.brand::before{content:"";width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
.top nav{display:flex;gap:4px 30px;font:400 15px/1.4 var(--sans)}
.top nav a{text-decoration:none;color:var(--ink2);padding:6px 0;position:relative;white-space:nowrap}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current]{color:var(--ink);font-weight:600}
.top nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}

/* Titres : noms courts, alignés à gauche, Reem Kufi */
h1,h2,h3{font-family:var(--head);margin:0;font-weight:600;text-align:left}
h1{font-size:clamp(58px,12.5vw,196px);line-height:.9;letter-spacing:-.025em}
h2{font-size:clamp(40px,6.6vw,104px);line-height:.98;letter-spacing:-.02em}
h3{font-size:clamp(24px,2.4vw,34px);line-height:1.12}
.lede{font-size:clamp(21px,2.1vw,30px);line-height:1.5;text-align:justify;hyphens:auto}

.sec{padding-block:var(--sp);padding-inline:var(--pad)}
.sec.tight{padding-block:clamp(56px,8vw,120px)}
.tone2{background:var(--bg2)}
.night{background:var(--night);color:var(--night-ink)}
.night .small,.night .cap{color:var(--night-ink2)}
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,6vw,110px);align-items:start}
.cols.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.cols.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stick{position:sticky;top:calc(var(--hdr) + 28px)}

/* Ouverture */
.open{padding:clamp(40px,7vw,110px) var(--pad) 0}
.open .lede{margin:clamp(36px,5vw,72px) 0 0}
.hero-fig{margin:clamp(44px,7vw,110px) var(--pad) 0}
.hero-fig figcaption{margin-top:16px}

/* Images claires et sombres : suivent le thème */
.img-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .img-l{display:none}:root:not([data-theme=light]) .img-d{display:block}}
:root[data-theme=dark] .img-l{display:none}:root[data-theme=dark] .img-d{display:block}
.pic img{width:100%;height:auto}

/* Iram : titre, mot arabe, barre fine */
.bar{height:1px;background:var(--ink);margin:clamp(22px,3vw,40px) 0 0;transform-origin:left;transform:scaleX(var(--bx,1));transition:transform 1.1s var(--ease)}
.rv .bar,.bar.rv{--bx:0}.bar.rv.in{--bx:1}

/* Révélations au défilement */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.1s}.js .rv.d2{transition-delay:.2s}.js .rv.d3{transition-delay:.3s}

/* Démonstration : échange client et Iram, interface nette */
.chat{background:var(--bg2);border-radius:4px;overflow:hidden}
.tone2 .chat{background:var(--bg)}
.chat-bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:15px 20px;background:var(--ink);color:var(--bg);font:600 14px/1.3 var(--sans)}
.chat-bar span{font-weight:400;opacity:.78}
.chat-body{display:flex;flex-direction:column;gap:12px;padding:22px 20px 20px;min-height:clamp(420px,46vw,560px)}
.msg{max-width:82%;padding:10px 14px 9px;border-radius:3px;font:16px/1.45 var(--sans);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .chat.armed .msg,.js .chat.armed .sys{opacity:0;transform:translateY(10px)}
.js .chat.armed .msg.on,.js .chat.armed .sys.on{opacity:1;transform:none}
.msg.c{align-self:flex-end;background:var(--bub-c);color:var(--ink)}
.msg.a{align-self:flex-start;background:var(--bub-a);color:#111}
.msg p{margin:0;hyphens:none;text-align:left}
.msg .fr{font-size:13px;line-height:1.4;opacity:.66;margin-top:4px}
.msg time{display:block;font-size:11px;opacity:.55;margin-top:5px;font-variant-numeric:tabular-nums}
.sys{align-self:stretch;margin-top:4px;padding:11px 14px;background:var(--gold);color:#111;font:600 14px/1.4 var(--sans);border-radius:3px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chat-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 20px 16px;font:13px/1.4 var(--sans);color:var(--ink2)}
.chat-foot button{background:none;border:0;padding:4px 0;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px}
.notes{list-style:none;margin:0;padding:0;font:15px/1.55 var(--sans);color:var(--ink2)}
.notes li{display:grid;grid-template-columns:30px 1fr;gap:12px;margin:0 0 22px}
.n{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--gold);color:#111;font:700 12px/1 var(--sans)}

/* Console, présentation à la Apple */
.stage-intro{padding:var(--sp) var(--pad) clamp(40px,6vw,90px)}
.stage-intro .cols{align-items:end}
.stage-intro p{margin:0;color:var(--night-ink2)}
.track{position:relative}
.step{padding:clamp(40px,6vw,80px) var(--pad);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,48px)}
.copy .kick{font:13px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--night-ink2);margin:0 0 14px}
.copy h3{margin-bottom:16px}
.copy p{color:var(--night-ink2);font-size:18px}
.hots{list-style:none;margin:22px 0 0;padding:0}
.hots li{margin:0 0 4px}
.hots button{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:7px 0;font:600 15px/1.3 var(--sans);color:var(--night-ink);opacity:.82;transition:opacity .25s}
.hots button:hover,.hots li.on button{opacity:1}
.hd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.hd>div{overflow:hidden}
.hd p{margin:2px 0 10px 42px;font:15px/1.55 var(--sans);color:var(--night-ink2);text-align:left}
.hots li.on .hd{grid-template-rows:1fr}
.reset{margin:8px 0 0;background:none;border:0;padding:4px 0;font:14px var(--sans);color:var(--night-ink2);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px;visibility:hidden}
.zoomed .reset{visibility:visible}

.frame{position:relative;overflow:hidden;background:var(--bg2);aspect-ratio:4/3;width:100%;--s:1}
.shot{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform 1s var(--ease)}
.shot .pic img{width:100%;height:100%}
.spot{position:absolute;pointer-events:none;box-shadow:0 0 0 200vmax rgba(0,0,0,.58);opacity:0;transition:opacity .6s var(--ease),left 1s var(--ease),top 1s var(--ease),width 1s var(--ease),height 1s var(--ease)}
.zoomed .spot{opacity:1}
.m{z-index:2}
.m{position:absolute;transform:translate(-50%,-50%) scale(calc(1 / var(--s)));width:28px;height:28px;display:grid;place-items:center;background:var(--gold);color:#111;border:0;font:700 14px/1 var(--sans);padding:0;transition:transform .5s var(--ease)}
.m:hover,.m.on{background:#fff}
.tabs{display:none;flex-wrap:wrap;gap:6px 26px;padding:0 var(--pad);font:15px/1.4 var(--sans)}
.stage-end{padding-bottom:clamp(60px,9vw,130px)}
.tabs button{background:none;border:0;padding:6px 0;color:var(--night-ink2);position:relative}
.tabs button[aria-current=true]{color:var(--night-ink);font-weight:600}
.tabs button[aria-current=true]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
/* Mode épinglé : seulement avec JS, écran large, sans « réduire les animations » */
.stage-on .track{height:calc(var(--n) * 50svh + 100svh)}
.stage-on .pin{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:flex-start;gap:0}
.stage-on .steps{position:relative;flex:1;min-height:0}
.stage-on .step{position:absolute;inset:0;padding-block:32px 0;grid-template-columns:minmax(260px,30%) minmax(0,1fr);align-items:start;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.stage-on .step.on{opacity:1;visibility:visible}
.stage-on .step .fwrap{height:100%;display:flex;align-items:flex-start;justify-content:center;min-height:0}
.stage-on .dev{width:min(100%,calc((100svh - var(--hdr) - 140px) * 1.3333))}
.stage-on .tabs{display:flex;padding-block:6px 14px}

/* Mesures : courbes */
.chart{margin:0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .ax{font:12px var(--sans);fill:var(--ink3)}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .ln{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--gold);stroke:var(--bg);stroke-width:2}
.tone2 .chart .pt{stroke:var(--bg2)}
.chart .v{font:600 12px var(--sans);fill:var(--ink)}
.chart .tt{font:600 13px var(--sans);fill:var(--ink)}
.js .chart .ln{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2.2s var(--ease)}
.js .chart.in .ln{stroke-dashoffset:0}
.js .chart .pt,.js .chart .v{opacity:0;transition:opacity .6s 1.6s}
.js .chart.in .pt,.js .chart.in .v{opacity:1}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(40px,6vw,80px)}
.facts b{display:block;font:600 clamp(34px,4.2vw,60px)/1 var(--head);letter-spacing:-.01em;margin-bottom:10px}
.facts p{font:15px/1.55 var(--sans);color:var(--ink2);margin:0;text-align:justify}
.facts .d{display:block;font:600 12px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}

/* Listes sans filets : deux colonnes, rythme par l'espace */
.dl{display:grid;grid-template-columns:minmax(150px,24%) minmax(0,1fr);column-gap:var(--gap);row-gap:clamp(26px,3.4vw,44px);margin:0}
.dl dt{font:600 clamp(20px,1.9vw,26px)/1.2 var(--head)}
.dl dd{margin:0}
.dl dd p{margin:0 0 .6em}
.dl .cond{font:15px/1.55 var(--sans);color:var(--ink2)}
.state{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.6fr);gap:14px var(--gap);font:15.5px/1.5 var(--sans)}
.state .th{font:600 12px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.state .f{font-weight:600}
.state .s{color:var(--ink)}
.state .p{color:var(--ink2)}
.roles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr);gap:12px var(--gap);font:15.5px/1.5 var(--sans)}
.roles .th{font:600 12px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.roles .f{font-weight:600}

.cta{display:inline-block;font:600 clamp(26px,3.6vw,52px)/1.15 var(--head);margin-top:.3em;letter-spacing:-.01em}
.vide{min-height:52svh;display:flex;flex-direction:column;justify-content:center}

/* Pied de page */
.ftr{padding:clamp(48px,6vw,88px) var(--pad) 56px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:32px var(--gap);font:14px/1.8 var(--sans);color:var(--ink2);background:var(--bg2)}
.ftr b{display:block;color:var(--ink);font:600 24px/1.2 var(--head);margin-bottom:6px}
.ftr a{color:var(--ink)}
.ftr p{margin:0;text-align:left}
.theme{display:flex;gap:14px;margin-top:10px}
.theme button{background:none;border:0;padding:2px 0;font:13px var(--sans);color:var(--ink2)}
.theme button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px}

@media (max-width:900px){
  body{font-size:17.5px}
  .cols,.cols.rev,.cols.even{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .stick{position:static}
  .top{height:auto;flex-wrap:wrap;padding-block:12px 4px;row-gap:2px}
  :root{--hdr:96px}
  .top nav{width:100%;flex-wrap:wrap;gap:2px 20px;padding-bottom:6px;font-size:14.5px}
  .dl{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .dl dd{margin-bottom:22px}
  .state{grid-template-columns:minmax(0,1fr)}
  .state .th{display:none}
  .state .f{margin-top:14px}
  .roles{grid-template-columns:minmax(0,1fr)}
  .roles .th{display:none}.roles .f{margin-top:12px}
  .facts{grid-template-columns:minmax(0,1fr)}
  .ftr{grid-template-columns:minmax(0,1fr)}
  .msg{max-width:92%}
  .m{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001s!important;animation:none!important}
  .js .rv,.js .chart .ln,.js .chart .pt,.js .chart .v{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .hero-fig{transform:none}
}
@media print{.top{position:static}.js .rv{opacity:1;transform:none}}

.anc{position:absolute;left:0;top:0;width:1px;height:1px;pointer-events:none}
.stage-on .anc{top:calc(var(--i) * 50svh + 2px)}
.cap-mode .top,.cap-mode .stage-end,.cap-mode main>*:not(.stage),.cap-mode .ftr{display:none}
.cap-mode .track{height:100svh}
.cap-mode .pin{top:0;height:100svh}

/* Mesures : une seule courbe, un seul chiffre */
.mes{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gap);align-items:center;margin-top:clamp(40px,6vw,90px)}
.mes .big b{display:block;font:600 clamp(72px,11vw,190px)/.9 var(--head);letter-spacing:-.03em}
.mes .big span{display:block;margin-top:16px;font:16px/1.45 var(--sans);color:var(--ink2);width:min(100%,24ch)}
.chart.curve .ln{stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.chart.curve .area{fill:url(#gd);stroke:none}
.js .chart.curve .area{opacity:0;transition:opacity 1.2s 1.4s}.js .chart.curve.in .area{opacity:1}
.chart.curve .ax{font:13px var(--sans);fill:var(--ink3)}
@media (max-width:900px){.mes{grid-template-columns:minmax(0,1fr);row-gap:28px}}

/* Délais en cascade : 90 ms entre éléments d'un même groupe (JS pose --i) */
.js .rv{transition-delay:calc(var(--i,0) * 90ms)}
.js .rv.d1{transition-delay:.1s}.js .rv.d2{transition-delay:.2s}.js .rv.d3{transition-delay:.3s}
.js .sfig .pic img{transform:scale(1.04);transition:transform 1.2s var(--ease)}.js .rv.in .sfig .pic img,.js .sfig.in .pic img{transform:none}

/* Canaux, Séjour : rangées visuelles défilantes */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--gap)) / 4);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;margin-top:clamp(36px,5vw,70px);padding-bottom:14px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail.five{grid-auto-columns:calc((100% - 4 * var(--gap)) / 5)}
.rail>*{scroll-snap-align:start;min-width:0}
.chan{margin:0}.chan h3{font-size:clamp(22px,2vw,28px);margin:18px 0 8px}.chan p{font:16px/1.5 var(--serif);margin:0 0 8px;text-align:left}.chan p.small{font-family:var(--sans)}
.vis{aspect-ratio:4/5;background:var(--bg);border-radius:4px;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:14px;overflow:hidden}
.vis.b{justify-content:flex-end}
.vl{font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0}
.vn{font:600 17px/1.3 var(--sans);margin:0;text-align:left}
.wave{display:flex;align-items:center;gap:4px;height:84px}
.wave i{display:block;width:4px;height:calc(var(--h) * 1%);background:var(--gold)}
.js .wave i{transform:scaleY(0);transition:transform .9s var(--ease) calc(var(--k) * 45ms)}.js .rv.in .wave i{transform:none}
.wave.sm{height:22px;flex:1;gap:3px}.wave.sm i{width:3px;background:currentColor;opacity:.5}
.vb{align-self:flex-start;padding:10px 14px;background:var(--ink);color:var(--bg);font:600 13px/1 var(--sans);border-radius:3px}
.mic{display:grid;place-items:center;width:48px;height:48px;background:var(--gold);color:#111;border-radius:3px}
.vq{font:15px/1.45 var(--sans);color:var(--ink2);margin:0;text-align:justify}
.vocal{display:flex;align-items:center;gap:10px;width:92%}.vocal time{margin:0}
.vis .msg{max-width:90%}
.langs{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-top:clamp(28px,4vw,50px)}
.langs p{margin:0;flex:1 1 280px}
.tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.tags li{padding:9px 16px;background:var(--bg);border-radius:3px;font:600 15px/1 var(--sans)}
.stp{display:flex;flex-direction:column;gap:12px}
.stp h3{font-size:clamp(20px,1.8vw,26px)}
.stp>p{font:15.5px/1.5 var(--sans);color:var(--ink2);margin:0;text-align:justify}
.stp .n{width:28px;height:28px;font-size:14px}
.snip{margin-top:auto;background:var(--bg2);border-radius:4px;padding:14px;font:14px/1.5 var(--sans)}
.snip p{margin:0 0 6px;text-align:left;hyphens:none}.snip p:last-child{margin:0}
.snip.sys{background:var(--gold);color:#111;font-weight:600}
.snip.form p{display:flex;justify-content:space-between;gap:10px}.snip.form b{font-weight:600}

/* Réception : circuit, capture surlignée, jauge */
.circ{list-style:none;margin:0;padding:0}
.circ li{display:grid;grid-template-columns:36px 1fr;gap:14px;margin:0 0 28px;font:18px/1.5 var(--sans);align-items:start}
.circ .n{width:28px;height:28px;font-size:14px}
.sfig{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg2)}
.sfig .pic{display:block}.sfig .spot{opacity:1;transition:none}
.gauge{margin-top:clamp(24px,3vw,40px)}
.gl{font:600 14px/1.3 var(--sans);margin:0 0 10px}
.gbar{position:relative;height:24px;background:var(--bg);border-radius:3px;overflow:hidden}
.gbar i{position:absolute;left:0;top:0;bottom:0;width:40%;background:var(--gold);transform-origin:left}
.js .gbar i{transform:scaleX(0);transition:transform 1.3s var(--ease) .3s}.js .rv.in .gbar i{transform:none}
.gbar b{position:absolute;left:calc(40% + 12px);top:0;line-height:24px;font:600 12px/24px var(--sans);color:var(--ink2)}
.gauge .small{margin:8px 0 0}

/* Rôles : sélecteur et console vue par chaque rôle */
.roles2{margin-top:clamp(30px,4vw,60px)}
.rtabs{display:flex;flex-wrap:wrap;gap:6px 30px;margin-bottom:clamp(24px,3vw,40px);font:16px/1.4 var(--sans)}
.rtabs button{background:none;border:0;padding:6px 0;color:var(--ink2);position:relative}
.rtabs button[aria-selected=true]{color:var(--ink);font-weight:600}
.rtabs button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
.rpane{display:none;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gap);row-gap:24px;align-items:center}
.rpane.on{display:grid;animation:rin .7s var(--ease)}
@keyframes rin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pas{display:grid;place-items:center;width:46px;height:46px;background:var(--gold);color:#111;font:700 21px/1 var(--head);border-radius:3px;margin-bottom:16px}
.rtxt h3{margin-bottom:10px}.rtxt>p{font:17px/1.5 var(--sans);color:var(--ink2);margin:0;text-align:justify}
.lab{font:600 12px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)!important;margin:20px 0 6px!important}
.ll{margin:0;padding:0;list-style:none;font:15.5px/1.5 var(--sans)}.ll li{margin:0 0 4px;text-align:left}

/* État des travaux : feuille de route */
.etat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.maj{font:600 clamp(18px,2.2vw,28px)/1.2 var(--head);margin:0}
.feuille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(36px,5vw,70px);align-items:start}
.fcol h3{font:600 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 18px}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.chip{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--bg);border:0;border-radius:3px;padding:12px 14px;font:600 15px/1.3 var(--sans)}
.ci{display:grid;place-items:center;width:34px;height:34px;background:var(--gold);color:#111;border-radius:3px;flex:none}
.fcol li{position:relative}
.chip{cursor:default;user-select:none}
.proof{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;margin:0;padding:12px 14px;background:var(--bg);border-radius:3px;box-shadow:0 12px 32px rgba(0,0,0,.35);font:14px/1.5 var(--sans);color:var(--ink2);text-align:left;hyphens:none;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}
.proofs .proof{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;margin-top:8px}
@media (hover:hover){.fcol li:hover .proof{opacity:1;visibility:visible;transform:none}}
.fcol .none{font:14px/1.5 var(--sans);color:var(--ink3)}

/* Appel final centré, comme en bas d'une page produit */
.final{text-align:center;padding-block:clamp(64px,7.5vw,112px)}
.final .bigp{font:600 clamp(44px,7.4vw,120px)/1 var(--head);letter-spacing:-.02em;text-align:center;width:min(100%,14ch);margin:0 auto;hyphens:none}
.btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:clamp(30px,4vw,52px) 0 14px}
.btn{display:inline-block;padding:15px 26px;border-radius:3px;font:600 16px/1 var(--sans);text-decoration:none;background:var(--gold);color:#111;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ftr{grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,3fr))}
.ft{font:600 12px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)!important;margin-bottom:6px!important}
.ftr p{margin:0 0 2px}
@media (max-width:1100px){.rail,.rail.five{grid-auto-columns:min(78%,320px)}.feuille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.rpane,.rpane.on{grid-template-columns:minmax(0,1fr)}.feuille{grid-template-columns:minmax(0,1fr)}.ftr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.js .wave i,.js .gbar i,.js .sfig .pic img{transform:none!important}.rpane.on{animation:none}}

/* Captures : tout visible, sans transition */
.static .rv,.static .rv *,.static .wave i,.static .gbar i,.static .chart .ln,.static .chart .area{transition:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
.static .msg,.static .sys{opacity:1!important;transform:none!important}

/* Ouverture de l'accueil : le produit seul sur fond noir, puis le défilement dévoile la suite */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h2.big{font-size:clamp(58px,12.5vw,196px);line-height:.9;letter-spacing:-.025em}
.hero{position:relative;background:var(--night);color:#F5F5F3}
.hero-pin{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(36px,6vw,80px);overflow:hidden;padding:120px var(--pad) 90px}
.hero-logo{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.nyam{position:relative;display:flex;font:700 clamp(84px,19vw,300px)/.92 var(--head);letter-spacing:.01em;padding-right:.1em}
.lt{display:block;overflow:hidden;padding-bottom:.08em}
.lt>span{display:block;background:linear-gradient(105deg,#F5F5F3 0%,#F5F5F3 42%,#E9A21B 50%,#F5F5F3 58%,#F5F5F3 100%);background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.dia{position:absolute;right:-.02em;top:.06em;width:.11em;height:.11em;background:var(--gold);transform:rotate(45deg)}
.techs{margin-top:.5em;font:600 clamp(18px,3.4vw,52px)/1 var(--head);letter-spacing:.62em;padding-left:.62em;color:rgba(245,245,243,.78)}
.hero-phrase{margin:0;text-align:center;font:600 clamp(48px,8.4vw,140px)/1 var(--head);letter-spacing:-.02em;color:#F5F5F3;width:min(100%,12ch);hyphens:none;text-wrap:balance}
.hero-foot{position:absolute;left:0;right:0;bottom:32px;margin:0;text-align:center;font:12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:rgba(245,245,243,.5)}
/* Mode animé : épinglé, trois temps (logo, recul, phrase) */
.hero-on .hero{height:190svh}
.hero-on .hero-pin{position:sticky;top:0;height:100svh;min-height:0;padding:0;display:block}
.hero-on .hero-logo{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% - 30svh * var(--p1,0))) scale(calc(1 - .56 * var(--p1,0)));opacity:calc(1 - .78 * var(--p1,0));transform-origin:50% 50%}
.hero-on .hero-phrase{position:absolute;left:50%;top:50%;width:min(92%,14ch);transform:translate(-50%,calc(-50% + 40px * (1 - var(--p2,0)))) scale(calc(1.05 - .05 * var(--p2,0)));opacity:calc(var(--p2,0) * (1 - var(--p3,0)))}
.hero-on .hero-foot{opacity:calc(1 - var(--p1,0))}
/* Entrée au chargement : lettres révélées au masque, balayage de lumière or */
.hero-on .lt>span{transform:translateY(112%);animation:rise 1.1s var(--ease) calc(.35s + var(--i) * .09s) forwards,sweep 2.8s cubic-bezier(.4,.1,.2,1) 1.5s forwards}
.hero-on .techs{opacity:0;animation:fadein 1.4s var(--ease) 1.2s forwards}
.hero-on .dia{opacity:0;animation:fadein 1s var(--ease) 1.5s forwards}
.hero-on .hero-foot{animation:fadein 1.4s var(--ease) 2.2s backwards}
@keyframes rise{to{transform:none}}
@keyframes sweep{to{background-position:0 0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.static .hero-on .lt>span,.static.hero-on .lt>span{animation:none!important;transform:none!important;background-position:50% 0!important}
.static .techs,.static .dia,.static .hero-foot{animation:none!important;opacity:1!important}
/* En-tête sur le noir de l'ouverture */
.top.over{position:fixed;left:0;right:0;background:transparent;color:#F5F5F3;transition:background .4s,color .4s}
.top.over .brand,.top.over nav a{color:#F5F5F3}
.top.over nav{opacity:var(--navo,0);transition:opacity .5s}
.top.over .brand{opacity:var(--navo,0);transition:opacity .5s}
.top.over.solid{background:var(--bg);color:var(--ink)}
.top.over.solid .brand,.top.over.solid nav a{color:var(--ink)}
.top.over.solid nav a{color:var(--ink2)}
.top.over.solid nav a[aria-current]{color:var(--ink)}
/* Barre fixe en bas à droite */
.fab{position:fixed;right:clamp(14px,2.4vw,32px);bottom:clamp(14px,2.4vw,32px);z-index:60;padding:14px 22px;border-radius:3px;background:var(--gold);color:#111;font:600 15px/1 var(--sans);text-decoration:none;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.fab.on{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.hero-on .hero{height:auto}}

/* Cadre d'appareil : fenêtre sobre, grands arrondis, ombre noire diffuse, inclinaison qui se redresse */
:root{--devsh:0 60px 110px -24px rgba(0,0,0,.30),0 28px 56px -14px rgba(0,0,0,.16);--devbd:rgba(26,26,26,.16);--devbar:rgba(26,26,26,.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--devsh:0 50px 100px -20px rgba(0,0,0,.7),0 0 0 1px rgba(245,245,243,.04);--devbd:rgba(245,245,243,.14);--devbar:rgba(245,245,243,.05)}}
:root[data-theme=dark]{--devsh:0 50px 100px -20px rgba(0,0,0,.7),0 0 0 1px rgba(245,245,243,.04);--devbd:rgba(245,245,243,.14);--devbar:rgba(245,245,243,.05)}
.dev3d{perspective:1700px}
.dev{position:relative;border-radius:14px;overflow:hidden;background:var(--bg2);box-shadow:var(--devsh),0 0 0 1px var(--devbd);transform-origin:50% 100%}
.js .dev3d .dev{transform:rotateX(calc(7deg * (1 - var(--tp,1)))) scale(calc(.95 + .05 * var(--tp,1)))}
.dev-bar{display:flex;gap:6px;align-items:center;height:26px;padding:0 12px;background:var(--devbar)}
.dev-bar i{width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.18}
.dev .pic img,.dev .sfig img{width:100%;height:auto}
.spot{border-radius:6px}
.fwrap .dev{width:100%}
.stage-on .step .dev{transform:none}
@media (prefers-reduced-motion:reduce){.js .dev3d .dev{transform:none}}

/* Tracés liés au défilement (JS pose les valeurs, aucune transition qui retarde) */
.js .chart.curve .ln{transition:none;stroke-dasharray:none;stroke-dashoffset:0}
.js .chart.curve .area{opacity:1;transition:none}
.chart.curve .head{fill:var(--gold);stroke:var(--bg2);stroke-width:3}
.js .gbar i{transform:scaleX(var(--gp,0));transition:none}
.js .rv.in .gbar i{transform:scaleX(var(--gp,0))}
@media (prefers-reduced-motion:reduce){.js .gbar i{transform:scaleX(1)!important}}
.static .hero-pin{min-height:900px}
.static .hero-pin.m{min-height:760px}
/* aperçu « avant » (captures comparatives) */
.plain .dev{border-radius:4px!important;box-shadow:0 0 0 1px var(--line)!important;transform:none!important}.plain .dev-bar{display:none}


/* En-tête : menu, langue, recherche ; menu déroulant sur mobile */
.top .tmenu{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.tools{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:10px;font:13px/1 var(--sans);letter-spacing:.04em}
.lang a{text-decoration:none;color:var(--ink2);padding:6px 2px}
.lang a[aria-current]{color:var(--ink);font-weight:600}
.sbtn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--ink2);padding:6px 2px}
.sbtn:hover{color:var(--ink)}.sbtn .sl{display:none}
.mbtn{display:none;background:none;border:0;font:600 15px var(--sans);padding:8px 0}
.top.over .lang a,.top.over .sbtn,.top.over .mbtn{color:#F5F5F3}
.top.over.solid .lang a,.top.over.solid .sbtn{color:var(--ink2)}.top.over.solid .lang a[aria-current]{color:var(--ink)}.top.over.solid .mbtn{color:var(--ink)}
.top.over .tmenu{opacity:var(--navo,0);transition:opacity .5s}
.top.over nav,.top.over .brand{opacity:1}
@media (max-width:900px){
  .top{flex-wrap:wrap;height:auto;min-height:var(--hdr);padding-block:10px}
  :root{--hdr:56px}
  .mbtn{display:block}
  .tmenu{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:18px;padding:14px 0 18px}
  .top.open .tmenu{display:flex;animation:rin .5s var(--ease)}
  .top.open{position:fixed!important;inset:0;height:100svh;z-index:300;align-content:flex-start;overflow-y:auto;overscroll-behavior:contain;background:var(--bg)!important}
  .menu-open,.menu-open body{overflow:hidden}
  .menu-open .fab{opacity:0!important;pointer-events:none}
  .top.over.open .brand,.top.over.open nav a,.top.over.open .lang a,.top.over.open .sbtn,.top.over.open .mbtn{color:var(--ink)}
  .top.over .tmenu{opacity:1}.top.over .mbtn{opacity:var(--navo,1)}
  .top nav{flex-direction:column;width:100%;gap:2px}
  .top nav a{font-size:20px;padding:10px 0}
  .sbtn .sl{display:inline}
  .tools{width:100%;justify-content:space-between}
}
/* Recherche : panneau plein écran */
.spanel{position:fixed;inset:0;z-index:200;background:var(--bg);overflow:auto;opacity:0;transition:opacity .4s var(--ease)}
.spanel.on{opacity:1}
.spanel[hidden]{display:none}
.sin{padding:clamp(28px,5vw,64px) var(--pad) 80px}
.srow{display:flex;align-items:center;gap:20px}
#sq{flex:1;min-width:0;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:600 clamp(28px,5vw,64px)/1.2 var(--head);padding:10px 0;outline:none}
#sq::placeholder{color:var(--ink3)}
#sq:focus-visible{border-bottom-color:var(--ink)}
.sclose{background:none;border:0;font:15px var(--sans);color:var(--ink2);padding:8px}
.squick{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:32px;align-items:baseline}
.squick .ft{margin:0 12px 0 0!important}
.squick a{font:600 17px var(--sans)}
.sres{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-direction:column;gap:22px}
.sres a{text-decoration:none;display:block}
.sres a:hover .rt,.sres a:focus-visible .rt{text-decoration:underline;text-decoration-thickness:1px}
.sres .rp{font:12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);display:block}
.sres .rt{font:600 clamp(20px,2.4vw,30px)/1.2 var(--head);display:block;margin:2px 0 4px}
.sres .rx{font:15px/1.5 var(--sans);color:var(--ink2);display:block}
.sres mark{background:none;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px}
body.slock{overflow:hidden}
/* Liens : jamais soulignés en or */
a{text-decoration:none}a:hover{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:currentColor;text-underline-offset:4px}
.more{font:600 17px var(--sans)}
/* Aperçus de l'accueil : grandes lignes liées */
.explore{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(28px,4vw,56px)}
.explore a{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--gap);align-items:baseline;text-decoration:none}
.explore .et{font:600 clamp(40px,7vw,104px)/1 var(--head);letter-spacing:-.02em;transition:transform .5s var(--ease)}
.explore a:hover .et{transform:translateX(10px)}
.explore .ed{font:17px/1.5 var(--sans);color:var(--ink2)}
@media (max-width:900px){.explore a{grid-template-columns:minmax(0,1fr);gap:6px}}
/* Réception : étapes qui pilotent la capture */
.recep .rgrid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--gap);align-items:center;margin-top:clamp(30px,4vw,56px)}
.recep .circ button{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;width:100%;text-align:left;background:none;border:0;padding:0;font:18px/1.5 var(--sans)}
.recep .circ li{opacity:.42;transition:opacity .4s var(--ease);margin-bottom:24px}.recep .circ li.on{opacity:1}
.recep .spot{transition:left .8s var(--ease),top .8s var(--ease),width .8s var(--ease),height .8s var(--ease)}
.recep-on .recep .rtrack{height:calc(var(--n) * 40svh + 100svh)}
.recep-on .recep .rpin{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;align-items:center}
.recep-on .recep .rgrid{margin-top:0;width:100%}
@media (max-width:900px){.recep .rgrid{grid-template-columns:minmax(0,1fr)}}
/* Rôles : lignes cliquables, écran qui prouve le droit */
.rpane{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.rtxt h3::before{content:"";display:inline-block;width:9px;height:9px;background:var(--gold);transform:rotate(45deg);margin-right:12px;vertical-align:middle}
/* RTL (pages arabes) */
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{text-align:right}
[dir=rtl] .brand::before{margin:0}
[dir=rtl] .explore a:hover .et{transform:translateX(-10px)}
.fab.away{opacity:0!important;transform:translateY(16px)!important;pointer-events:none!important}
#sq::-webkit-search-cancel-button{display:none}
.recep .circ li{display:block}

/* Carrousel « aperçu » de l'accueil */
.chead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,44px)}
.carousel{position:relative;margin-inline:calc(-1 * var(--pad))}
.ctrack{display:flex;gap:20px;list-style:none;margin:0;padding:0 var(--pad) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;outline:none}
.ctrack::-webkit-scrollbar{display:none}
.ccard{flex:0 0 min(calc(100vw - 2 * var(--pad) - 56px),1180px);scroll-snap-align:start;scroll-snap-stop:always}
.cc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(18px,2.6vw,40px);align-items:center;height:100%;min-height:clamp(340px,36vw,520px);padding:clamp(24px,3.2vw,48px);border-radius:28px;background:#141414;box-shadow:0 0 0 1px rgba(245,245,243,.14);color:#F5F5F3;overflow:hidden}
.js .ccard .cc>*{transition:opacity .45s var(--ease)}
.js .ccard:not(.cur) .cc>*{opacity:0}
.ck{font:600 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,243,.6)}
.ctx p{margin:14px 0 0;font:600 clamp(24px,2.2vw,30px)/1.25 var(--head);letter-spacing:-.005em;text-align:left;hyphens:none}
.cim{border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(245,245,243,.12)}
.cim img{width:100%;height:auto;display:block}
.chit{position:absolute;top:0;bottom:8px;width:50%;border:0;padding:0;background:none;z-index:2;opacity:0}
.chit.l{left:0;cursor:w-resize}.chit.r{right:0;cursor:e-resize}
.cnav{width:42px;height:42px;border-radius:50%;border:0;background:var(--bg2);color:var(--ink);font:26px/1 var(--sans);padding:0 0 3px}
.cbar{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:26px}
.cdots{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--bg2)}
.cdot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:var(--ink);opacity:.3;position:relative;overflow:hidden;transition:width .5s var(--ease),opacity .3s}
.cdot i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.cdot.on{width:44px;opacity:1;background:var(--ink-3,rgba(128,128,128,.35))}
.cdot.on{background:rgba(128,128,128,.4)}
.cdot.on i{transform:scaleX(var(--cp,1))}
.cplay{width:42px;height:42px;border-radius:50%;border:0;background:var(--bg2);position:relative;color:var(--ink)}
.cplay i{position:absolute;left:50%;top:50%;width:12px;height:14px;margin:-7px 0 0 -6px;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box}
.cplay[aria-pressed=true] i{border:0;width:0;height:0;margin:-8px 0 0 -4px;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
@media (max-width:900px){.cc{grid-template-columns:minmax(0,1fr)}.ccard{flex-basis:88vw}}
@media (prefers-reduced-motion:reduce){.cdot,.cdot i{transition:none}}
.chead h2{font-size:clamp(34px,4.6vw,68px)}

/* Rôles : texte seul, listes en grand */
.rpane,.rpane.on{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:clamp(28px,5vw,80px);row-gap:clamp(18px,2.4vw,32px)}
.rhead{grid-column:1/-1}
.rhead h3{font-size:clamp(28px,3.4vw,48px);margin-bottom:12px}
.rhead p{font:clamp(18px,1.5vw,22px)/1.5 var(--sans);color:var(--ink2);margin:0;text-align:justify}
.rcol{border-top:1px solid var(--line,rgba(128,128,128,.35));padding-top:18px}
.rcol .lab{margin:0 0 12px!important}
.rcol .ll{font:clamp(18px,1.6vw,24px)/1.4 var(--head)}.rcol .ll li{margin:0 0 10px}
@media (max-width:900px){.rpane,.rpane.on{grid-template-columns:minmax(0,1fr)}}
.js .ccard:not(.cur) .cc>*{opacity:0!important}

/* Contact : une colonne lisible, champs nets, angles 3 px */
.cform{margin-inline:auto;padding-top:0}
.form{display:grid;gap:22px}
.form label{display:block;font:500 15px/1.3 var(--sans);color:var(--ink2);margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;font:17px/1.4 var(--sans);padding:14px 16px;border:1px solid var(--line,rgba(128,128,128,.45));border-radius:3px;background:var(--bg2);color:var(--ink);appearance:none}
.form select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.form .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form .btn{border:0;cursor:pointer}.form .btn:disabled{opacity:.6}
.form-status{margin:0;font:500 16px/1.5 var(--sans);min-height:1.5em;text-align:left}
.form .note{margin:0;font:14px/1.5 var(--sans);color:var(--ink3);text-align:left}
.calcd{border-top:1px solid var(--line,rgba(128,128,128,.35));border-bottom:1px solid var(--line,rgba(128,128,128,.35));padding:14px 0}
.calcd summary{cursor:pointer;font:500 16px/1.4 var(--sans);list-style:none}.calcd summary::-webkit-details-marker{display:none}
.calcd summary::after{content:"+";float:right;font-size:22px;line-height:1}.calcd[open] summary::after{content:"\2212"}
.calc{border:0;padding:0;margin:18px 0 0;min-width:0}
.calc-grid{display:grid;gap:18px}
.calc-out{display:grid;gap:12px;margin-top:22px}.calc-out div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;font:15px/1.4 var(--sans)}
.calc-out b{font:600 22px/1 var(--head)}
.calc .note{margin-top:16px}
.direct{margin-top:30px;text-align:left}

.spot{border-radius:8px}

/* Espacements resserrés : aucune zone vide de plus d'environ 120 px, pistes épinglées justes */
.recep .sfig .pic img{transform:none!important}
.recep .rleft{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px)}
.recep .circ li{margin-bottom:20px}
.gauge{margin-top:0}
.gnum{margin:0 0 6px;font:600 clamp(44px,5vw,72px)/1 var(--head);letter-spacing:-.02em}
.gauge .gl{font:15px/1.5 var(--sans);color:var(--ink2);margin:0}
.recep-on .recep .dev3d{width:min(100%,calc((100svh - var(--hdr) - 26px - 48px) * 1.07))}
.recep-on .recep .rgrid{align-items:center}
.recep h2{margin-bottom:clamp(20px,3vw,36px)}
.recep .rgrid{margin-top:clamp(20px,3vw,36px)}

.langs{flex-direction:column;align-items:flex-start;gap:14px}
.lt2{margin:0;font:600 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}

.cform{margin-inline:0;padding-top:clamp(32px,4vw,56px)}
.rhead h3::before{content:"";display:inline-block;width:9px;height:9px;background:var(--gold);transform:rotate(45deg);margin-right:12px;vertical-align:middle}
.cform{}

/* Secteurs, Vision, Actualités */
.stat{margin:0 0 10px;font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) var(--gap)}
.scard{padding:clamp(22px,2.6vw,36px);border-radius:3px;background:var(--bg);display:flex;flex-direction:column}
.scard h3{font-size:clamp(28px,3vw,42px);margin:0 0 14px}
.sph{margin:0 0 16px;font:17px/1.55 var(--sans);color:var(--ink2);text-align:left}
.cas{margin:0 0 14px;padding-left:1.1em;font:16px/1.55 var(--sans);color:var(--ink)}.cas li{margin:0 0 8px;text-align:left}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px)}
.trio p{margin:0;font:17px/1.55 var(--sans);text-align:left}.trio .lab{margin:0 0 10px!important}
@media (max-width:900px){.sgrid,.trio{grid-template-columns:minmax(0,1fr)}}
.bigs{margin-top:clamp(36px,5vw,64px)}
.bn3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:10px 0 12px}
.bn3 p{margin:0;font:16px/1.4 var(--sans);color:var(--ink2);text-align:left}
.bnn{font:600 clamp(36px,5vw,72px)/1.05 var(--head)!important;color:var(--ink)!important;letter-spacing:-.02em}
@media (max-width:900px){.bn3{grid-template-columns:minmax(0,1fr)}}
.faits{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.faits p{margin:0;font:16px/1.55 var(--sans);text-align:left}.faits .fd{font:600 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
@media (max-width:900px){.faits{grid-template-columns:minmax(0,1fr)}}
.src{color:var(--ink2)}
.fil{padding-top:clamp(24px,3vw,40px)}
.nw{display:grid;grid-template-columns:minmax(120px,2fr) minmax(0,8fr);gap:var(--gap);padding:clamp(24px,3vw,40px) 0}
.nd{margin:0;font:600 clamp(20px,2vw,28px)/1.2 var(--head)}
.nt{font-size:clamp(26px,3vw,40px);margin:0 0 12px}
.nr{margin:0 0 14px;font:18px/1.55 var(--sans);text-align:left}
.ns,.nl{margin:0 0 8px;font:15px/1.5 var(--sans);color:var(--ink2);text-align:left}
.lab2{font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-right:8px}
@media (max-width:700px){.nw{grid-template-columns:minmax(0,1fr);gap:8px}}
.bnn{font-size:clamp(32px,4vw,56px)!important;white-space:nowrap}
.cas li,.trio p,.faits p,.nr{hyphens:auto}

/* Frise de la Vision : sans JS ou en mouvement réduit, quatre périodes empilées ; sinon épinglée et pilotée par le défilement */
.tl-bar{display:none}
.tl-items{display:grid;gap:clamp(32px,4vw,56px)}
.tl-item{padding-top:clamp(20px,2.4vw,32px)}
.tl-l{margin:0 0 6px;font:600 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.tl-y{margin:0 0 12px;font:600 clamp(56px,9vw,120px)/1 var(--head);letter-spacing:-.02em;hyphens:none}
.tl-p{margin:0 0 14px;font:clamp(20px,2vw,28px)/1.4 var(--sans);text-align:left}
.tl-r{margin:0;padding-left:1.1em;font:17px/1.55 var(--sans)}.tl-r li{margin:0 0 8px;text-align:left}
.tl-note{margin-top:clamp(24px,3vw,40px)}
.tl-on .tl-track{height:calc(var(--n) * 45svh + 100svh)}
.tl-on .tl-pin{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,4vh,56px)}
.tl-on .tl-bar{display:block}
.tl-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));font:600 14px/1.3 var(--sans);color:var(--ink)}
.tl-steps li{opacity:.4;transition:opacity .4s var(--ease)}.tl-steps li.on{opacity:1}
.tl-prog{height:2px;background:rgba(128,128,128,.3);position:relative;overflow:hidden}
.tl-prog i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--tp,0))}
.tl-on .tl-items{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-height:0}
.tl-on .tl-item{grid-area:1/1;border-top:0;padding-top:0;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s}
.tl-on .tl-item.on{opacity:1;visibility:visible;transform:none}
.tl-on .tl-y{font-size:clamp(88px,16vw,240px)}
.tl-on .tl-note{margin-top:0}
.tl-note{}

/* 11/10 : pleine largeur et texte justifié (règle des documents : jamais de largeur maximale fixe) */
.nw p,.tl-p,.tl-note,.rhead p,.fil p{text-align:justify;hyphens:auto}
h2.rv+.trio{margin-top:clamp(24px,3vw,40px)}

/* 11/10 : espace fixe sous chaque grand titre de section, partout */
.sec > h2,.sec > .cols > h2,section > h2,.sec h2.rv{margin-bottom:clamp(32px,4vw,64px)}
.cols > h2{margin-bottom:0}

/* 11/10 : en colonne, flex-basis 280px devenait une hauteur (grands vides sous Canaux) */
.langs p{flex:none}
.form{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(20px,3vw,40px)}
.form .full{grid-column:1/-1}
.calc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(20px,3vw,40px)}
@media (max-width:700px){.form,.calc-grid{grid-template-columns:minmax(0,1fr)}}

/* Sections épinglées : contenu collé sous l'intro, aligné en haut, jamais coupé en bas */
.recep-on .recep .rpin{align-items:flex-start;padding-top:24px}
.recep-on .recep .dev3d{width:min(100%,calc((100svh - var(--hdr) - 90px) * 1.07))}
.recep-on .recep .rgrid{align-items:start}
.tl-on .tl-pin{justify-content:flex-start;padding-top:24px}

/* Vision : le bloc épinglé n'a que la hauteur de son contenu, la note est sous la barre de progression */
.tl-on .tl-pin{height:auto;display:block;padding-top:24px}
.tl-note{margin:0 0 clamp(24px,3vh,32px)}
.tl-on .tl-note{margin-top:16px}
.tl-on .tl-bar{margin-bottom:0}
.stage-on .fwrap .dev{width:min(100%,calc((100svh - var(--hdr) - 150px) * 1.3333))}

.cap-instant .recep *{transition:none!important;animation:none!important}

/* Sections épinglées (Console, Réception, Vision) : titre, intro, étape, capture et onglets dans le même bloc, centré sous l'en-tête */
.stage-on .stage{padding-block:0}
.stage-on .stage-intro{padding:0 var(--pad) clamp(28px,4.5vh,56px)}
.stage-on .stage-intro .cols{align-items:baseline;grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.stage-on .stage-intro h2{font-size:clamp(40px,5vw,88px);margin:0}
.stage-on .stage-intro p{font-size:17px;line-height:1.45}
.stage-on .pin{justify-content:center;padding-block:0}
.stage-on .steps{display:grid;flex:none;position:relative}
.stage-on .step{grid-area:1/1;position:static;inset:auto;padding-block:0}
.stage-on .step .fwrap{height:auto;align-items:flex-start}
.stage-on .tabs{margin-top:24px;padding-block:0}
.stage-on .fwrap .dev{width:min(100%,calc((100svh - var(--hdr) - 250px) * 1.3333))}
@media (max-height:780px){.stage-on .stage-intro p{display:none}}
.recep-on .recep{padding-block:0}
.recep-on .recep .rpin{flex-direction:column;justify-content:center;align-items:stretch;padding-top:0}
.recep-on .recep h2{font-size:clamp(40px,5vw,88px);margin:0 0 clamp(28px,4.5vh,56px)}
.recep-on .recep .rgrid{margin-top:0;align-items:center}
.recep-on .recep .dev3d{width:min(100%,calc((100svh - var(--hdr) - 220px) * 1.07))}
.tl{padding-top:clamp(40px,7vw,110px)}
.tl-h1{font:600 clamp(48px,9vw,140px)/1 var(--head);letter-spacing:-.02em;margin:0;white-space:nowrap}
.tl-lede{margin:clamp(20px,3vw,36px) 0 clamp(28px,4vw,48px)}
.tl-on{padding-block:0}
.tl-on .tl-pin{height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;padding-top:0}
.tl-on .tl-h1{font-size:clamp(40px,5vw,88px)}
.tl-on .tl-lede{font-size:18px;line-height:1.45;margin:12px 0 24px}
.tl-on .tl-y{font-size:clamp(64px,11vw,170px)}
@media (max-height:780px){.tl-on .tl-lede{display:none}.tl-on .tl-lede+.tl-bar{margin-top:20px}}
.stage-on .fwrap .dev{width:min(100%,calc((100svh - var(--hdr) - 275px) * 1.3333))}
.recep-on .recep .dev3d{width:min(100%,calc((100svh - var(--hdr) - 250px) * 1.07))}
.tl-on .tl-y{font-size:clamp(56px,9vw,140px);margin-bottom:8px}
@media (max-height:760px){.tl-on .tl-y{font-size:clamp(48px,7vw,100px)}.tl-on .tl-r{font-size:16px}.tl-on .tl-r li{margin-bottom:4px}.tl-on .tl-p{font-size:20px;margin-bottom:8px}}
/* Sombre : contour fin pour que la zone allumée se lise sur un fond déjà noir */
:root[data-theme=dark] .spot{outline:1px solid rgba(245,245,243,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .spot{outline:1px solid rgba(245,245,243,.5)}}

/* Arabe : sens de lecture inversé, polices, éléments positionnés */
:root[lang=ar]{--serif:"Noto Sans Arabic",var(--sans);--head:"Reem Kufi","Noto Sans Arabic",var(--sans)}
[dir=rtl] body{text-align:start}
[dir=rtl] .lede,[dir=rtl] p,[dir=rtl] li{text-align:justify}
[dir=rtl] .tl-prog i,[dir=rtl] .tl-bar{transform-origin:right}
[dir=rtl] .fab{right:auto;left:clamp(14px,2.4vw,32px)}
[dir=rtl] .cas{padding-left:0;padding-right:1.1em}
[dir=rtl] .tl-r{padding-left:0;padding-right:1.1em}
[dir=rtl] .form select{background-position:15px 55%,20px 55%;padding-right:16px;padding-left:40px}
[dir=rtl] .calcd summary::after{float:left}
[dir=rtl] .hots button,[dir=rtl] .circ button,[dir=rtl] .tabs button{text-align:right}
[dir=rtl] .circ li,[dir=rtl] .ll li,[dir=rtl] .tl-r li,[dir=rtl] .cas li{text-align:right}
[dir=rtl] .nyam,[dir=rtl] .hero-logo{direction:ltr}
[dir=rtl] .cbar,[dir=rtl] .tl-steps{direction:rtl}
[dir=rtl] .ccard .cc{direction:rtl}
[dir=rtl] .cim,[dir=rtl] .dev,[dir=rtl] .shot{direction:ltr}   /* les captures de la console restent en français, sens de lecture d'origine */
[dir=rtl] .chit.l{left:auto;right:0;cursor:e-resize}[dir=rtl] .chit.r{right:auto;left:0;cursor:w-resize}
[dir=rtl] .m{direction:ltr}
[dir=rtl] .sin,[dir=rtl] .sres a{text-align:right}


/* Carrousel : la règle « .cim img{display:block} » rendait visibles les deux images (claire et sombre) en thème clair */
.cim .img-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cim .img-l{display:none}:root:not([data-theme=light]) .cim .img-d{display:block}}
:root[data-theme=dark] .cim .img-l{display:none}:root[data-theme=dark] .cim .img-d{display:block}
[dir=rtl] .lang{direction:ltr}

/* Sombre : voile plus fort pour que la zone allumée se lise (réglage du 11/10) */
:root[data-theme=dark] .spot{box-shadow:0 0 0 200vmax rgba(0,0,0,.72)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .spot{box-shadow:0 0 0 200vmax rgba(0,0,0,.72)}}

/* 11/10 : la carte Pré-arrivée héritait de la grille du formulaire de contact (.form) */
.snip.form{display:block}
.snip.form p{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.snip.form b{white-space:nowrap}
.snip.form span{text-align:right}

/* Légendes des captures : dans le bloc épinglé, en petit */
.stage-cap{margin:10px 0 0;padding-inline:var(--pad);font:13px/1.4 var(--sans);color:var(--night-ink2)}
.rcap{margin:12px 0 0;font:13px/1.4 var(--sans);color:var(--ink3)}
.stage-on .fwrap .dev{width:min(100%,calc((100svh - var(--hdr) - 305px) * 1.3333))}
.recep-on .recep .dev3d{width:min(100%,calc((100svh - var(--hdr) - 280px) * 1.07))}
@media (max-height:840px){.stage-on .fwrap .dev{width:min(100%,calc((100svh - var(--hdr) - 352px) * 1.3333))}.recep-on .recep .dev3d{width:min(100%,calc((100svh - var(--hdr) - 310px) * 1.07))}}

/* Barre : logo à gauche, liens et loupe centrés, sélecteur de langue à droite (à gauche en arabe, comme le logo passe à droite) */
@media (min-width:901px){
  .top{display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
  .top .brand{justify-self:start}
  .top .tmenu{display:contents}
  .top .mid{grid-column:2;display:flex;align-items:center;gap:clamp(22px,2.4vw,34px);justify-self:center}
  .top .tools{grid-column:3;justify-self:end}
  .top.over .mid,.top.over .tools{opacity:var(--navo,0);transition:opacity .5s}
}
@media (max-width:900px){
  .mid{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%}
}

/* Captures : vrai espace entre la capture et le texte, en LTR comme en RTL ; la marge est dans la capture elle-même (captures/mesurer.js), pas en CSS */
.cc{column-gap:clamp(32px,4vw,64px)}
@media (min-width:901px){
  .stage-on .step{column-gap:clamp(40px,5vw,72px)}
  .recep .rgrid{column-gap:clamp(40px,5vw,72px)}
}
@media (max-width:900px){.cc{row-gap:clamp(18px,3vw,28px)}}
@media (max-height:840px){.stage-on .stage-intro h2{font-size:clamp(36px,4vw,56px)}.stage-on .stage-intro{padding-bottom:16px}}

/* Actualités : un visuel maison par actualité (pictogramme en or, chiffre clé, légende, source, date), le texte long replié */
.nw{grid-template-columns:minmax(220px,4fr) minmax(0,7fr);align-items:start;gap:clamp(28px,4vw,64px)}
.nv{margin:0;background:#0D0D0D;color:#F5F5F3;border-radius:18px;padding:clamp(20px,2.4vw,30px);box-shadow:0 0 0 1px rgba(245,245,243,.12);direction:ltr}
.nvs{display:block;width:100%;height:auto}
.nvi{color:#E9A21B}
.nvb{fill:#F5F5F3;font-family:var(--head);font-weight:600;letter-spacing:-.01em}
.nv figcaption{margin-top:16px}
.nvl{display:block;font:15px/1.4 var(--sans);color:rgba(245,245,243,.84)}
.nvf{display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(245,245,243,.16);font:12px/1.35 var(--sans);letter-spacing:.03em;color:rgba(245,245,243,.62)}
[dir=rtl] .nv .nvl{direction:rtl;text-align:start}
.nx .nd{font:600 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px}
.nx .nt{margin:0 0 14px}
.nx .nl{margin:0;font:19px/1.5 var(--sans);color:var(--ink)}
.nm{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.nm summary{cursor:pointer;font:600 15px/1.4 var(--sans);color:var(--ink2);list-style:none;display:inline-flex;align-items:center;gap:10px}
.nm summary::-webkit-details-marker{display:none}
.nm summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font-weight:400;line-height:1}
.nm[open] summary::before{content:"−"}
.nm summary:hover{color:var(--ink)}
.nm .nr{margin:14px 0 10px}
@media (max-width:700px){.nw{grid-template-columns:minmax(0,1fr);gap:18px}}

/* Page Iram : le pictogramme (colonnes et soleil, sans le mot) à gauche du titre, sur une seule ligne ; le soleil se lève derrière les colonnes (figé avec prefers-reduced-motion) */
.iram-sym .lg-sun{transform-box:fill-box;animation:lgsun 1.8s var(--ease) .3s both}
.iram-sym .lg-col,.iram-sym .lg-dune{animation:lgfade 1.1s var(--ease) .15s both}
@keyframes lgsun{from{transform:translateY(46px);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes lgfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.iram-sym .lg-sun,.iram-sym .lg-col,.iram-sym .lg-dune{animation:none}}
.static .iram-sym .lg-sun,.static .iram-sym .lg-col,.static .iram-sym .lg-dune{animation:none}

/* Fin de l'accueil : trois aperçus nets (Secteurs, Vision, Actualités) ; titre, phrase et lien d'un côté, aperçu de l'autre, les côtés alternent */
#suite{display:flex;flex-direction:column;gap:clamp(56px,8vw,120px)}
.ap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.ap.rev .ap-t{order:2}
.ap-t h2{font:600 clamp(40px,5vw,72px)/1.05 var(--head);letter-spacing:-.02em;margin:0 0 18px}
.ap-t p{margin:0 0 22px;font:18px/1.5 var(--sans);color:var(--ink2)}
.ap-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.ap-grid li{display:flex;flex-direction:column;gap:8px;padding:clamp(14px,1.6vw,20px);border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.ap-i{width:28px;height:28px;color:var(--ink)}
.ap-n{font:600 16px/1.25 var(--head)}
.ap-s{font:12px/1.3 var(--sans);letter-spacing:.04em;color:var(--ink3);display:inline-flex;align-items:center;gap:6px}
.ap-s.on{color:var(--ink)}.ap-s.on::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.ap-fr{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);padding-inline-start:34px}
.ap-fr::before,.ap-fr::after{content:"";position:absolute;inset-inline-start:7px;top:8px;bottom:8px;width:2px}
.ap-fr::before{background:var(--line)}
.ap-fr::after{background:var(--ink);transform-origin:top;transition:transform 1.8s var(--ease) .2s}
.js .ap-fr::after{transform:scaleY(0)}.js .ap.in .ap-fr::after{transform:scaleY(1)}
.ap-fr li{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"y l" "p p";gap:2px 12px;align-items:baseline}
.ap-fr li::before{content:"";position:absolute;inset-inline-start:-34px;top:.5em;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--ink);box-sizing:border-box}
.ap-y{grid-area:y;font:600 clamp(22px,2.4vw,32px)/1.1 var(--head)}
.ap-l{grid-area:l;font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink,#8A5A00)}
.ap-p{grid-area:p;font:15px/1.5 var(--sans);color:var(--ink2)}
.js .ap-fr li{opacity:.2;transition:opacity .7s var(--ease) calc(.35s + var(--i) * .4s)}.js .ap.in .ap-fr li{opacity:1}
.ap-news{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.ap-news a{display:block;text-decoration:none}
.ap-news .nv{padding:clamp(12px,1.4vw,18px);border-radius:14px;transition:transform .5s var(--ease)}
.ap-news a:hover .nv{transform:translateY(-4px)}
.ap-news .nvl{font-size:12px}.ap-news .nvf{display:none}
.ap-news figcaption{margin-top:10px}
.ap-d{display:block;margin-top:12px;font:600 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.ap-t3{display:block;margin-top:4px;font:600 clamp(16px,1.4vw,19px)/1.25 var(--head);color:var(--ink)}
@media (max-width:900px){
  .ap{grid-template-columns:minmax(0,1fr)}
  .ap.rev .ap-t{order:0}
  .ap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-news{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.js .ap-fr::after{transition:none}.js .ap-fr li{transition:none}}
.ap-news li{display:flex}.ap-news a{display:flex;flex-direction:column;width:100%}.ap-news .nv{flex:1;display:flex;flex-direction:column;justify-content:space-between}

/* En-tête de la page Iram : pictogramme, « Iram », trait fin, « إرم » sur une seule ligne, tous centrés sur la hauteur des capitales de « Iram » (--cap) ; espacements égaux */
.iram-head{--S:clamp(58px,12.5vw,196px);--cap:calc(var(--S) * .728);--dy:0px;display:flex;align-items:center;flex-wrap:nowrap;gap:calc(var(--S) * .2)}
.iram-head h1{font-size:var(--S);line-height:1;transform:translateY(var(--dy));white-space:nowrap}
.iram-head .sep{flex:none;width:2px;height:var(--cap);background:var(--ink);opacity:.3}
.iram-head .iram-sym{flex:none;height:var(--cap);width:auto;color:var(--ink);overflow:visible}
.iram-head .ar{flex:none;height:calc(var(--cap) * 1.05);width:auto;color:var(--ink);overflow:visible}
.iram-head{--dy:calc(var(--S) * .014)}
.iram-head .iram-sym{margin-inline-end:calc(var(--S) * -.06)}
.iram-head .sep{margin-inline:calc(var(--S) * -.012) calc(var(--S) * .018)}

/* Arabe : la phrase d'ouverture et les grands titres centrés restent UN bloc de texte en flux normal (pas de justification ni d'écart entre les mots), lettres liées sans espacement ajouté */
[dir=rtl] .hero-phrase,[dir=rtl] .bigp,[dir=rtl] .hero-foot{text-align:center;text-align-last:center}
[dir=rtl] .hero-phrase{width:min(92%,11em);font-size:clamp(44px,7.4vw,124px);line-height:1.25;text-wrap:balance}
[dir=rtl] .hero-on .hero-phrase{width:min(92%,11em)}
[dir=rtl] :is(h1,h2,h3,.hero-phrase,.bigp,.big,.ap-n,.ap-y,.nt,.et,.tl-h1,.tl-y){letter-spacing:0}
.hero-phrase,.bigp{text-wrap:balance}

/* Carrousel : les flèches pointent toujours vers l'extérieur, ‹ au bouton de gauche et › au bouton de droite, dans toutes les langues ; le bouton pause ouvre la rangée (à gauche, à droite en RTL).
   En RTL le bouton de gauche (‹) avance et celui de droite (›) revient : « précédent » est le premier bouton après la pause, de chaque côté. */
.cnav{font-size:0;display:inline-grid;place-items:center;padding:0}
.cnav::before{font:26px/1 var(--sans);padding-bottom:3px}
.cnav.prev::before{content:"‹"}.cnav.next::before{content:"›"}
[dir=rtl] .cnav.prev::before{content:"›"}[dir=rtl] .cnav.next::before{content:"‹"}

/* Pages légales : sommaire ancré à côté du texte, titres de section, paragraphes justifiés, aucune largeur maximale fixe */
.lg{display:grid;grid-template-columns:minmax(200px,3fr) minmax(0,9fr);gap:clamp(32px,5vw,80px);align-items:start}
.toc{position:sticky;top:calc(var(--hdr) + 28px)}
.toc-t{margin:0 0 14px;font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;border-inline-start:1px solid var(--line)}
.toc a{display:block;padding:7px 0 7px 16px;font:15px/1.35 var(--sans);color:var(--ink2);text-decoration:none}
[dir=rtl] .toc a{padding:7px 16px 7px 0}
.toc a:hover{color:var(--ink)}
.lg-body h2{font:600 clamp(24px,2.6vw,36px)/1.15 var(--head);letter-spacing:-.01em;margin:clamp(34px,4vw,56px) 0 14px;scroll-margin-top:calc(var(--hdr) + 24px)}
.lg-body h2:first-child{margin-top:0}
.lg-body p{margin:0 0 16px;font:18px/1.6 var(--sans)}
.lg-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
[dir=rtl] .lg-body h2{letter-spacing:0}
@media (max-width:900px){.lg{grid-template-columns:minmax(0,1fr)}.toc{position:static}}
.liens404{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:14px 32px}
.liens404 a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.liens404 a:hover{text-decoration-color:var(--or,#E9A21B)}
.lg-body h3{font:600 clamp(22px,2.2vw,28px)/1.2 var(--head);letter-spacing:-.01em;margin:clamp(28px,3vw,44px) 0 8px}
.lg-body .poste{padding-top:2px}
.lg-body .etq{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin:20px 0 6px;text-align:start}
[dir=rtl] .lg-body .etq{letter-spacing:0}
.lg-body ul{margin:0 0 12px;padding-inline-start:1.2em}
.lg-body li{margin:0 0 6px;font:18px/1.6 var(--sans);text-align:justify}

/* Toutes tailles d'écran : tout texte courant justifié à gauche et à droite, dans les trois langues (retours d'Abdennour du 12/10) ; restent alignés les bulles de chat, légendes, messages de formulaire et titres de cartes */
main :is(p,li):not(.msg p,.cap,.form-status,.note,.vn,.direct){text-align:justify!important;hyphens:auto;-webkit-hyphens:auto}
