/* Lbasi — site vitrine, thème « l'application en mouvement ».
   Les démonstrations sont des radios ou une case à cocher lues par `:has()` ; sans `:has()`,
   l'état par défaut reste affiché. Seul le comparateur de Studio dépend de `site.js`. */

/* ------------------------------------------------------------------ polices */
/* Auto-hébergées : aucune adresse IP de visiteur ne part chez un tiers. */
@font-face{font-family:'Bodoni Moda';src:url('/fonts/bodoni-moda-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Noto Kufi Arabic';src:url('/fonts/noto-kufi-arabic-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Kufi Arabic';src:url('/fonts/noto-kufi-arabic-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');font-weight:600;font-display:swap}

/* ------------------------------------------------------------------ jetons */
:root{
  --canvas:#F7F3EC; --ink:#143E33; --muted:#5F6662; --soft:#5F6662;
  --primary:#0B4F3F; --deep:#06302A; --forest:#102F28; --gold:#B08D4F; --gold-text:#8A6A33;
  --line:#DCD7CB; --sage:#E7E8DD; --stone:#E9E6DC; --mist:#E7E9DF; --sand:#EEEBE2;
  --display:'Bodoni Moda',Georgia,serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  --touch:44px;
}
:root:lang(ar){
  --display:'Noto Kufi Arabic',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--canvas);color:var(--ink);font:14px/1.6 var(--body);-webkit-font-smoothing:antialiased}
/* `height:auto` : sans lui, l'attribut `height` du balisage étire l'image à sa hauteur d'origine. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a,label{-webkit-tap-highlight-color:transparent}
p{line-height:1.75}
em{font-family:var(--display);font-weight:400}
h1,h2,h3{font-weight:400;margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Le lien d'évitement redevient visible quand le clavier l'atteint. */
a.visually-hidden:focus{position:fixed;top:8px;left:8px;z-index:10;width:auto;height:auto;clip-path:none;padding:12px 16px;background:var(--ink);color:var(--canvas)}
.page{max-width:1080px;margin:0 auto;padding-inline:24px}
.overline{font-size:10px;letter-spacing:1.7px;line-height:1.7;display:flex;align-items:center;gap:9px;margin:0;text-transform:uppercase}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block;flex-shrink:0}
.arrow{display:inline-block}
.cta{min-height:var(--touch);padding:17px 22px;background:var(--ink);color:var(--canvas);border:1px solid var(--ink);display:inline-flex;gap:38px;align-items:center;font-size:12px;cursor:pointer;transition:background .2s}
.cta:hover{background:#285C4D}

/* ------------------------------------------------------------------ entête */
.masthead{height:88px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;justify-content:center;width:94px;height:58px;color:var(--primary);flex-shrink:0}
.logo svg{display:block;width:100%;height:100%}
.sections{display:flex;gap:29px;font-size:12.5px}
.sections a{display:inline-flex;align-items:center;min-height:var(--touch)}
.sections a:hover,.lang-switch:hover{color:#A47E3D}
.header-end{display:flex;align-items:center;gap:26px}
.lang-switch{display:inline-flex;align-items:center;min-height:var(--touch);font-size:13px;color:var(--primary)}
.download{display:inline-flex;align-items:center;min-height:var(--touch);font-size:12.5px;border-bottom:1px solid var(--ink)}
.download span{margin-inline-start:32px;display:inline-block}

/* -------------------------------------------------------------------- héros */
.hero{display:grid;grid-template-columns:1fr 1fr;max-width:1800px;margin:auto}
.hero-copy{padding:51px 10% 28px;display:flex;flex-direction:column;align-items:flex-start}
h1{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(110px,12vw,185px);letter-spacing:-10px;line-height:.98;margin:25px 0 23px}
.period{color:var(--gold)}
h1 em{font-size:clamp(39px,4.3vw,68px);display:block;line-height:1.08;letter-spacing:-2.5px;margin-top:14px}
.hero-lede{font-size:13.5px;color:var(--muted);margin:0 0 25px}
.hero-bottom{margin-top:40px;padding-top:23px;border-top:1px solid var(--line);display:flex;width:100%;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.6px;line-height:1.8;text-transform:uppercase}
.hero-bottom>a{display:grid;place-items:center;min-width:var(--touch);min-height:var(--touch);font-size:25px}
.hero-visual{position:relative;background:#CBC0A9;overflow:hidden;min-height:660px}
.campaign{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 45%;animation:photo-enter 1.3s ease-out both}
.photo-top{position:absolute;top:25px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.4px;color:#fff;text-transform:uppercase}
.hero-phone{position:absolute;bottom:48px;left:27px;width:184px;border:5px solid #21372F;border-radius:30px;overflow:hidden;box-shadow:12px 24px 50px #0004;transform:rotate(-8deg);animation:phone-enter 1s ease-out both}
.hero-phone img{width:100%}
.photo-note{position:absolute;bottom:44px;right:25px;left:245px;display:flex;justify-content:space-between;gap:15px;align-items:end;color:#fff;font-size:20px;line-height:1.4;text-shadow:0 1px 8px #0008}
.photo-note em{font-size:25px}
.photo-note>a{display:grid;place-items:center;border:1px solid #fff9;width:var(--touch);height:var(--touch);border-radius:50%;flex-shrink:0}
.visual-credit{position:absolute;bottom:12px;right:20px;color:#fff;font-size:9px;text-shadow:0 1px 3px #000}

.index-strip{display:flex;align-items:center;justify-content:space-between;padding:12px 5%;border-bottom:1px solid var(--line);font-size:12px}
.index-strip>span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase}
.index-strip>a{display:inline-flex;align-items:center;min-height:var(--touch)}

/* ------------------------------------------------------------ l'application */
.app-section{padding:80px 7% 90px;max-width:1600px;margin:auto}
.section-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--line)}
.section-heading>span{font-size:10px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;padding-top:45px}
h2{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(40px,4vw,62px);line-height:1.08;letter-spacing:-2px;margin:10px 0 24px}
.app-intro>p{font-size:13.5px;color:var(--muted)}
.app-tabs{margin-top:32px}
.tab{width:100%;display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);padding:20px 10px;color:var(--soft);cursor:pointer;transition:background .3s,color .3s}
.tab:hover{color:var(--ink)}
.tab-number{font-size:10px}
.tab-arrow{margin-inline-start:auto;font-size:19px}
.tab-text{font-size:15px}
.tab small{display:block;font-size:11.5px;margin-top:7px;color:var(--muted)}
.tab:has(input:checked){background:var(--sage);color:var(--ink)}
.tab:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:-2px}
.app-stage{position:relative;display:flex;align-items:center;justify-content:center;background:var(--stone);min-height:610px;padding:28px 20px 85px;overflow:hidden}
.vertical-label{position:absolute;left:20px;top:28px;writing-mode:vertical-rl;font-size:9px;letter-spacing:2px;text-transform:uppercase}
.stage-orbit{position:absolute;width:410px;height:410px;border:1px solid #CCCBBB;border-radius:50%}
.device{position:relative;width:221px;aspect-ratio:1320/2868;background:var(--canvas);border:6px solid #21372F;border-radius:33px;overflow:hidden;box-shadow:16px 22px 28px #143E331C;box-sizing:content-box}
.real-screen{width:100%;height:100%;object-fit:contain;display:none;animation:screen-enter .35s ease-out}
.stage-caption{position:absolute;bottom:24px;left:27px;right:27px;font-size:11px}
.caption{display:none;margin:0;color:var(--muted);line-height:1.5}
.caption-rank{display:block;color:var(--ink);font-size:10px;margin-bottom:4px}
/* Le premier geste s'affiche par défaut ; `:has()` prend le relais dès qu'un autre est choisi. */
.screen-1,.caption-1{display:block}
.app-section:has(#geste-2:checked) .screen-1,.app-section:has(#geste-3:checked) .screen-1,.app-section:has(#geste-4:checked) .screen-1,
.app-section:has(#geste-2:checked) .caption-1,.app-section:has(#geste-3:checked) .caption-1,.app-section:has(#geste-4:checked) .caption-1{display:none}
.app-section:has(#geste-2:checked) .screen-2,.app-section:has(#geste-3:checked) .screen-3,.app-section:has(#geste-4:checked) .screen-4,
.app-section:has(#geste-2:checked) .caption-2,.app-section:has(#geste-3:checked) .caption-3,.app-section:has(#geste-4:checked) .caption-4{display:block}

/* ------------------------------------------------------------------ Studio */
.studio-section{display:grid;grid-template-columns:1fr 1fr;background:var(--forest);color:var(--canvas)}
.studio-photo{position:relative;overflow:hidden;min-height:740px}
.studio-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%}
.comparator{--split:50%;isolation:isolate}
.before-image{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.comparison-labels{position:absolute;top:28px;left:25px;right:25px;display:flex;justify-content:space-between;z-index:2;pointer-events:none}
.comparison-labels span{font-size:10px;letter-spacing:1.4px;background:#143E33DB;color:#fff;padding:10px 13px;text-transform:uppercase}
.comparison-divider{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:#fff;z-index:2;pointer-events:none}
.comparison-divider>span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);background:var(--canvas);color:var(--ink);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;box-shadow:0 2px 12px #0002}
/* Le curseur natif couvre toute l'image, invisible : souris, doigt et flèches du clavier. */
.comparator input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:3;touch-action:pan-y}
.comparator:focus-within{outline:3px solid var(--gold);outline-offset:-5px}
.compare-hint{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#F7F3ECEF;color:var(--ink);font-size:11px;white-space:nowrap;border-radius:25px;pointer-events:none;z-index:2}
.compare-hint span{margin-left:15px}
.studio-photo>small{position:absolute;z-index:2;pointer-events:none;bottom:10px;left:30px;color:#fff;font-size:9px;text-shadow:0 1px 3px #000}
.studio-copy{padding:85px 14% 65px}
.studio-copy .overline{color:#C1AB7B}
.studio-copy h2{font-size:clamp(43px,4.6vw,72px);margin:35px 0}
.studio-copy>p:not(.overline){color:#B9C3B7;font-size:13.5px;max-width:360px}
.studio-settings{margin:40px 0 25px}
.studio-settings>div{padding:19px 0;border-top:1px solid #516057;display:flex;gap:20px;justify-content:space-between;align-items:center}
.studio-settings span{font-size:10px;letter-spacing:1px;color:#C1AB7B;text-transform:uppercase}
.studio-settings strong{font-size:12px;font-weight:400}
.studio-copy p.quiet{font-size:11.5px;line-height:1.8}
.text-link{display:flex;align-items:center;justify-content:space-between;min-height:var(--touch);border-bottom:1px solid #C1AB7B;font-size:12px;margin-top:36px}

/* ------------------------------------------------------------------- Nejma */
.najma-section{padding:80px 8%}
.najma-title{display:flex;justify-content:space-between;gap:50px;align-items:center;margin:35px 0 45px}
.najma-title>p{max-width:300px;font-size:13.5px;color:var(--muted)}
.najma-demo{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.speech,.prepared{padding:30px 38px;min-height:365px}
.speech{border-inline-end:1px solid var(--line)}
.demo-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.2px;gap:10px;text-transform:uppercase}
.demo-label span:last-child{color:var(--gold-text)}
.speech blockquote{margin:35px 0 22px;font:34px/1.3 var(--display)}
.waveform{display:flex;height:28px;align-items:center;gap:4px;margin-bottom:26px}
.waveform i{display:block;width:2px;background:var(--gold);height:16px;animation:voice 1.5s ease-in-out infinite}
/* Les hauteurs dessinent une voix : 6 px plus |sin(1,8·i)| × 22 px, décalées dans le temps. */
.waveform i:nth-child(1){height:6px;animation-delay:0.00s}.waveform i:nth-child(2){height:27px;animation-delay:0.06s}.waveform i:nth-child(3){height:16px;animation-delay:0.11s}.waveform i:nth-child(4){height:23px;animation-delay:0.17s}.waveform i:nth-child(5){height:23px;animation-delay:0.22s}.waveform i:nth-child(6){height:15px;animation-delay:0.28s}.waveform i:nth-child(7){height:28px;animation-delay:0.33s}.waveform i:nth-child(8){height:7px;animation-delay:0.39s}.waveform i:nth-child(9){height:27px;animation-delay:0.44s}.waveform i:nth-child(10){height:16px;animation-delay:0.49s}.waveform i:nth-child(11){height:23px;animation-delay:0.55s}.waveform i:nth-child(12){height:24px;animation-delay:0.60s}.waveform i:nth-child(13){height:14px;animation-delay:0.66s}.waveform i:nth-child(14){height:28px;animation-delay:0.71s}.waveform i:nth-child(15){height:7px;animation-delay:0.77s}.waveform i:nth-child(16){height:27px;animation-delay:0.82s}.waveform i:nth-child(17){height:17px;animation-delay:0.88s}.waveform i:nth-child(18){height:22px;animation-delay:0.94s}.waveform i:nth-child(19){height:24px;animation-delay:0.99s}.waveform i:nth-child(20){height:14px;animation-delay:1.04s}.waveform i:nth-child(21){height:28px;animation-delay:1.10s}.waveform i:nth-child(22){height:8px;animation-delay:1.16s}.waveform i:nth-child(23){height:27px;animation-delay:1.21s}.waveform i:nth-child(24){height:18px;animation-delay:1.26s}.waveform i:nth-child(25){height:22px;animation-delay:1.32s}.waveform i:nth-child(26){height:25px;animation-delay:1.38s}.waveform i:nth-child(27){height:13px;animation-delay:1.43s}.waveform i:nth-child(28){height:28px;animation-delay:1.49s}.waveform i:nth-child(29){height:9px;animation-delay:1.54s}.waveform i:nth-child(30){height:27px;animation-delay:1.59s}.waveform i:nth-child(31){height:18px;animation-delay:1.65s}.waveform i:nth-child(32){height:21px;animation-delay:1.71s}.waveform i:nth-child(33){height:25px;animation-delay:1.76s}.waveform i:nth-child(34){height:12px;animation-delay:1.81s}.waveform i:nth-child(35){height:28px;animation-delay:1.87s}.waveform i:nth-child(36){height:10px;animation-delay:1.93s}.waveform i:nth-child(37){height:26px;animation-delay:1.98s}.waveform i:nth-child(38){height:19px;animation-delay:2.04s}.waveform i:nth-child(39){height:20px;animation-delay:2.09s}.waveform i:nth-child(40){height:25px;animation-delay:2.15s}
.prepared{background:var(--sand)}
.draft-wait{text-align:center;padding-top:45px;font-size:12px;color:var(--muted)}
.outline-star{font-size:90px;font-family:Georgia,serif;color:var(--gold)}
.draft-result{display:none;animation:screen-enter .5s}
.draft-result h3{font:40px var(--display);margin:28px 0 15px}
.draft-result dl{margin:0}
.draft-result dl>div{display:flex;justify-content:space-between;border-bottom:1px solid #D6D3C7;font-size:12px;padding:11px 0}
.draft-result dt{color:var(--muted)}
.draft-result dd{margin:0}
.missing{font-size:11.5px;margin-top:18px;color:var(--gold-text)}
.draft-result>p:last-child{font-size:11.5px}
.when-on{display:none}
.najma-demo:has(#nejma-prepare:checked) .draft-wait,.najma-demo:has(#nejma-prepare:checked) .when-off{display:none}
.najma-demo:has(#nejma-prepare:checked) .draft-result{display:block}
.najma-demo:has(#nejma-prepare:checked) .when-on{display:inline}
.najma-demo:has(#nejma-prepare:focus-visible) .cta{outline:2px solid var(--gold);outline-offset:5px}

/* -------------------------------------------------------------- les publics */
.audience-section{padding:40px 8% 80px}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:25px}
.audience-grid article{border-top:1px solid var(--ink);padding-top:24px}
.audience-grid article>span{font-size:10px;color:var(--gold-text)}
.audience-grid h3{font:32px var(--display);margin:22px 0 14px}
.audience-grid p{font-size:13px;color:var(--muted)}

/* --------------------------------------------------------------- livraison */
.sendit-section{padding:80px 8%;background:var(--mist);display:grid;grid-template-columns:1fr 1fr;gap:10%}
.sendit-section h2{margin-top:30px}
.sendit-section p{font-size:13px;color:var(--muted)}
.brand-connection{display:flex;align-items:center;gap:20px;margin-top:35px}
.connection-wordmark{display:block;width:85px;height:49px;color:var(--primary)}
.connection-wordmark svg{width:100%;height:100%;display:block}
.brand-connection strong{font-size:22px;letter-spacing:-1px}
.connection-line{height:1px;background:var(--gold);width:80px;position:relative}
.connection-line::after{content:'';position:absolute;width:5px;height:5px;top:-2px;border-radius:50%;background:var(--ink);animation:travel 3s ease-in-out infinite}
.tracking-demo{padding:30px;background:var(--canvas);align-self:center}
.sendit-section .tracking-hint{font-size:11px;margin:23px 0}
.track-buttons{display:flex}
.track-buttons label{flex:1;min-height:var(--touch);border-top:2px solid var(--line);text-align:start;padding:13px 0;font-size:12px;color:var(--muted);cursor:pointer}
.track-buttons label span{display:block;font-size:10px;margin-top:8px}
.track-buttons label:has(input:checked){border-color:var(--ink);color:var(--ink)}
.track-buttons label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.tracking-detail{display:none;border-top:1px solid var(--line);margin-top:15px;padding-top:28px;min-height:160px}
.tracking-detail h3{font:28px var(--display);margin:12px 0}
.sendit-section .tracking-detail p{font-size:12px}
.tracking-foot{font-size:10px;letter-spacing:2px;text-transform:uppercase}
/* La troisième étape s'affiche par défaut, comme la radio cochée dans le balisage. */
.detail-3{display:block}
.tracking-demo:has(#suivi-1:checked) .detail-3,.tracking-demo:has(#suivi-2:checked) .detail-3,.tracking-demo:has(#suivi-4:checked) .detail-3{display:none}
.tracking-demo:has(#suivi-1:checked) .detail-1,.tracking-demo:has(#suivi-2:checked) .detail-2,.tracking-demo:has(#suivi-4:checked) .detail-4{display:block}

/* ------------------------------------------------------------------- fin */
.closing{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center;gap:18px 45px;padding:75px 8% 65px;background:var(--deep);color:var(--canvas)}
.signature{flex-basis:100%;display:flex;justify-content:center;color:var(--gold);margin-bottom:10px}
.signature svg{width:clamp(220px,40vw,480px);height:auto;display:block;overflow:visible}
.closing>.signature+div{flex-basis:100%}
.closing .overline{justify-content:center;color:#C8B48B}
.closing h2{font-size:clamp(34px,4vw,55px);margin:22px 0 12px}
.closing-side>p{font-size:13.5px;color:#D4DDCF}
.store-labels{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:20px}
.store-labels a,.store-labels .soon{display:inline-flex;align-items:center;gap:14px;min-height:var(--touch);padding:13px 20px;border:1px solid var(--gold);color:var(--canvas);font-size:12px;transition:background .2s}
.store-labels a:hover{background:var(--primary)}
.store-labels .soon{border-style:dashed;color:#D4DDCF}

/* ------------------------------------------------------------------- pied */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding:20px 5%;border-top:1px solid var(--line)}
.foot .logo{width:80px;height:48px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 24px}
.foot nav a{display:inline-flex;align-items:center;min-height:var(--touch);font-size:12.5px;color:var(--primary)}
.foot nav a:hover{text-decoration:underline}
.foot .copy{margin:0;font-size:12px;color:var(--muted)}

/* ------------------------------------------------------------------ légal */
.legal{padding-block:48px 72px;max-width:760px}
.legal h1{font-family:var(--display);font-size:clamp(30px,5vw,44px);letter-spacing:-.01em;line-height:1.2;margin:0;color:var(--primary)}
.legal .updated{margin:12px 0 0;font-size:14px;color:var(--muted)}
.legal h2{font-family:var(--body);font-size:19px;font-weight:700;letter-spacing:0;line-height:1.4;color:var(--ink);margin:44px 0 12px}
.legal p,.legal li{color:var(--ink);font-size:16px;line-height:1.7}
.legal ul{padding-inline-start:22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--primary);text-decoration:underline}
/* Un tableau large défile dans son propre conteneur : sans cela, il emporterait
   la page entière de côté sur un téléphone. */
.legal .table-scroll{overflow-x:auto;margin-top:12px;-webkit-overflow-scrolling:touch}
.legal table{width:100%;border-collapse:collapse;font-size:15px}
.legal th,.legal td{text-align:start;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;min-width:8.5rem}
.legal th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* ------------------------------------------------------------- mouvements */
@keyframes voice{50%{transform:scaleY(.4)}}
@keyframes travel{0%,100%{left:0}50%{left:100%}}
@keyframes screen-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes photo-enter{from{transform:scale(1.05);opacity:.6}to{transform:scale(1);opacity:1}}
@keyframes phone-enter{from{transform:translateY(25px) rotate(-4deg);opacity:0}to{transform:translateY(0) rotate(-8deg);opacity:1}}
/* Le mot-symbole de fin se trace pendant qu'il entre dans la fenêtre, là où le navigateur
   sait lier une animation à la vue ; ailleurs, il reste dessiné et rempli. Les deux plages
   s'achèvent à l'entrée complète : en bas de page, il ne remonte jamais plus haut. */
@supports (animation-timeline:view()){
  .signature path{stroke:currentColor;stroke-width:6;stroke-dasharray:3000;animation:signature-draw linear both,signature-fill linear both;animation-timeline:view(),view();animation-range:entry 0% entry 90%,entry 70% entry 100%}
}
@keyframes signature-draw{from{stroke-dashoffset:3000}to{stroke-dashoffset:0}}
@keyframes signature-fill{from{fill:transparent}to{fill:currentColor}}

/* ------------------------------------------------------------- grands écrans */
@media(min-width:1600px){
  .masthead,.index-strip,.foot{padding-inline:max(5%,calc((100vw - 1620px)/2))}
  .hero-visual{min-height:760px}.hero-copy{padding-top:70px}.hero-phone{width:220px}.photo-note{left:300px}
  .studio-section,.najma-section,.audience-section,.sendit-section,.closing{max-width:1800px;margin:auto}
}

/* ------------------------------------------------------------------ tablette */
@media(max-width:1000px){
  .hero-visual{min-height:620px}.hero-copy{padding-inline:9% 7%}
  h1{font-size:120px}h1 em{font-size:43px}
  .photo-note{left:auto;right:18px;bottom:80px;font-size:15px}.photo-note em{font-size:17px}.photo-note>a{display:none}
  .hero-phone{width:155px;left:15px}
  .app-grid{gap:7%}.studio-copy{padding:65px 10%}.studio-photo{min-height:690px}
  .studio-settings>div{gap:10px}.speech,.prepared{padding:26px}.sendit-section{gap:6%}.tracking-demo{padding:22px}
  .sections{gap:18px}
}

/* ------------------------------------------------------------------ téléphone */
@media(max-width:720px){
  .masthead{height:74px;gap:12px}.sections{display:none}.logo{width:80px;height:48px}.header-end{gap:16px}
  .download span{margin-inline-start:12px}
  .hero{grid-template-columns:1fr}.hero-copy{padding:32px 7%}
  h1{font-size:110px;letter-spacing:-7px}h1 em{font-size:40px}
  .hero-bottom{margin-top:30px}.hero-visual{min-height:580px}.campaign{object-position:50% 42%}
  .hero-phone{width:150px;left:20px;bottom:38px}.photo-note{bottom:60px;font-size:18px;right:20px;left:auto}.photo-note em{font-size:20px}
  .index-strip{gap:4px 14px;flex-wrap:wrap;padding:20px 7%}.index-strip>span{width:100%}
  .app-section{padding:50px 7%}.section-heading>span{display:none}
  .app-grid{grid-template-columns:1fr;gap:30px;padding-top:28px}
  h2{font-size:41px}.app-stage{min-height:620px}.stage-orbit{width:320px;height:320px}
  .studio-section{grid-template-columns:1fr}.studio-photo{min-height:600px}.studio-copy{padding:50px 8%}.studio-copy h2{font-size:50px}
  .najma-section{padding:50px 7%}.najma-title{display:block;margin-bottom:30px}.najma-title>p{max-width:none}
  .najma-demo{grid-template-columns:1fr}.speech{border-inline-end:0;border-bottom:1px solid var(--line)}
  .speech blockquote{font-size:30px}.speech,.prepared{min-height:340px}
  .audience-section{padding:20px 7% 50px}.audience-grid{grid-template-columns:1fr;gap:22px}
  .sendit-section{grid-template-columns:1fr;gap:35px;padding:50px 7%}
  .closing{padding:55px 7%}.signature svg{width:min(80vw,350px)}
  .foot{justify-content:center;text-align:center}.foot nav{justify-content:center}
}

/* ------------------------------------------------------------------- arabe */
/* Un espacement entre les lettres casse leur liaison : il est nul partout en arabe. */
[dir="rtl"] *{letter-spacing:0!important}
[dir="rtl"] body{font-size:15px}
[dir="rtl"] section h2,[dir="rtl"] .hero h1{font-family:var(--display);font-weight:700}
[dir="rtl"] em{font-style:normal}
[dir="rtl"] .hero h1{font-size:clamp(84px,9vw,140px);line-height:1.25}
[dir="rtl"] h1 em{font-weight:400;color:var(--gold);font-size:clamp(34px,3.6vw,56px);line-height:1.5}
[dir="rtl"] section h2{line-height:1.45}
[dir="rtl"] h2 em{font-weight:400;color:var(--gold)}
[dir="rtl"] .studio-copy h2 em{color:#C1AB7B}
[dir="rtl"] .closing h2 em{color:#C8B48B}
[dir="rtl"] p{line-height:1.9}
[dir="rtl"] .speech blockquote{font-size:30px;line-height:1.6}
[dir="rtl"] .overline,[dir="rtl"] .section-heading>span,[dir="rtl"] .hero-bottom,[dir="rtl"] .index-strip>span,[dir="rtl"] .demo-label,[dir="rtl"] .photo-top,[dir="rtl"] .studio-settings span,[dir="rtl"] .comparison-labels span,[dir="rtl"] .compare-hint,[dir="rtl"] .tracking-foot,[dir="rtl"] .vertical-label,[dir="rtl"] .visual-credit,[dir="rtl"] .studio-photo>small,[dir="rtl"] .track-buttons label span,[dir="rtl"] .tab-number,[dir="rtl"] .caption-rank{font-size:12.5px}
[dir="rtl"] .vertical-label{left:auto;right:20px}
/* Les flèches ↗ ne se retournent pas d'elles-mêmes dans un texte de droite à gauche. */
[dir="rtl"] .arrow,[dir="rtl"] .tab-arrow,[dir="rtl"] .photo-note>a{transform:scaleX(-1)}
[dir="rtl"] .comparator,[dir="rtl"] .comparator *{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
@media(max-width:720px){
  [dir="rtl"] .hero h1{font-size:92px}
  [dir="rtl"] h1 em{font-size:36px}
}

/* ------------------------------------------------------------------ mouvement réduit */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .signature path{fill:currentColor;stroke:none}
}