/* izak v6 — the home as a story: black opening with a light and bricks to catch, words that arrive, a window on the work,
   three scenes sideways, words to jostle on cobalt, the offer by audience, the work full screen, the end. */
/* 07/10/2026: the faces are declared once for the whole site in /fonts.css (and /fonts-ar.css on Arabic pages), linked before this
   sheet, under their real names: "Plus Jakarta Sans", "Instrument Serif", "Noto Sans Arabic" (Caveat, unused, is gone) */
/* the themes: dark (default when the device asks for it) and light; html[data-theme] is set before the first paint */
:root, [data-theme="dark"] { color-scheme: dark; --tile: #121318; --page: #000; --page-2: #0b0c0e; --fg: #fff; --fg-2: rgba(255, 255, 255, .74); --fg-3: rgba(255, 255, 255, .52); --line: rgba(255, 255, 255, .14); --paper: #07080b; --grid: rgba(255, 255, 255, .045); --sk: #6f97ff; --accent: #7da2ff; --spot-1: rgba(255, 255, 255, .13); --spot-2: rgba(190, 210, 255, .06); --b0-bg: #fff; --b0-fg: #0a0b0d; --b2-bg: #121318; --b2-fg: #fff; --b2-bd: rgba(255, 255, 255, .26); --menu: #fff; --fg-4: rgba(255, 255, 255, .34); --soft: #14151a; --line-strong: rgba(255, 255, 255, .34); --s-alt: #0b0c0e; --s-end: #000; --desk: #1b1c20; }
[data-theme="light"] { color-scheme: light; --tile: #f2f3f6; --page: #fff; --page-2: #f4f5f7; --fg: #0a0b0d; --fg-2: #3b414c; --fg-3: #6b7280; --line: #e1e4ea; --paper: #f6f7fa; --grid: rgba(10, 30, 70, .06); --sk: #1455f5; --accent: #1455f5; --spot-1: rgba(20, 85, 245, .10); --spot-2: rgba(20, 85, 245, .05); --b0-bg: #0a0b0d; --b0-fg: #fff; --b2-bg: #fff; --b2-fg: #0a0b0d; --b2-bd: #cfd4dc; --menu: #fff; --fg-4: #b4bac4; --soft: #f4f5f7; --line-strong: #c4cad3; --s-alt: #fff; --s-end: #fff; --desk: #e7e5df; }
:root { --ink: #0a0b0d; --mut: #5b6270; --line: #e3e6eb; --soft: #f4f5f7; --cobalt: #1455f5; --cobalt-h: #1045cc; --g: clamp(20px, 3vw, 48px); --hd: 76px; --ease: cubic-bezier(.22, 1, .36, 1); }
*, *::before, *::after { box-sizing: border-box; }
html { background: #000; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font-family: "Plus Jakarta Sans", system-ui, -apple-system, 'Segoe UI', sans-serif; color: #fff; background: #000; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
:where(.v6) a { color: inherit; text-decoration: none; }
:where(.v6) h1, :where(.v6) h2, :where(.v6) p, :where(.v6) ul, :where(.v6) figure { margin: 0; padding: 0; }
:where(.v6) ul { list-style: none; }
:where(.v6) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 10px 14px; border-radius: 4px; }
.skip:focus { top: 12px; }
.logo { width: 92px; height: auto; display: block; }
.ax { width: 18px; height: 18px; flex: none; transition: transform .5s var(--ease); }
.bt { display: inline-flex; align-items: center; gap: 12px; background: var(--cobalt); color: #fff; border-radius: 4px; padding: 17px 24px; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background .3s; }
.bt:hover { background: var(--cobalt-h); }
.bt:hover .ax, .lnk:hover .ax { transform: translateX(4px); }
.bt.sm { padding: 12px 16px; font-size: 14px; }
.bt.big { padding: 22px 30px; font-size: 18px; }
.bt.ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.bt.ghost:hover { background: rgba(255, 255, 255, .08); }
.lnk { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.kick { font-size: 14px; font-weight: 600; letter-spacing: .02em; opacity: .65; padding: 0 var(--g); }
.hint { font-size: 13px; font-weight: 500; opacity: .5; }
.wd { display: inline-block; white-space: nowrap; }
.lt { display: inline-block; }
.lt[data-c]::before { content: attr(data-c); } /* 08/10 (home SEO): the letter is drawn, so the sentence is in the page's text once (its .vh copy) */ /* 07/10: no permanent will-change (≈150 layers); GSAP and the s4 loop promote a letter only while it moves */

/* header: tone follows the section under it */
.hd { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hd); display: flex; align-items: center; gap: 34px; padding: 0 var(--g); color: #fff; transition: color .35s, transform .6s var(--ease); }
.hd::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .55); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); opacity: 0; transition: opacity .35s, background .35s; }
.hd.solid::before { opacity: 1; }
.hd.on-light { color: var(--ink); }
.hd.on-light::before { background: rgba(255, 255, 255, .8); }
.hd.up:not(.menu-open) { transform: translateY(-100%); }

/* 1, the opening */
.s1 { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: #000; isolation: isolate; }
.s1-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 38%), rgba(255, 255, 255, .13) 0, rgba(190, 210, 255, .06) 16%, rgba(20, 85, 245, .035) 30%, transparent 46%); transition: opacity 1.6s; }
html.js .s1-light { opacity: 0; }
html.js .s1.lit .s1-light { opacity: 1; }
.s1-t { position: relative; z-index: 2; padding: calc(var(--hd) + 9vh) var(--g) 0; max-width: 58vw; }
.slogan { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(64px, 10.6vw, 200px); line-height: .9; letter-spacing: -.025em; }
.slogan .sl1, .slogan .sl2 { display: block; }
.slogan em { font-style: italic; padding-inline-start: .04em; }
.slogan .wd { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; }
.s1-sub { font-size: clamp(18px, 1.5vw, 24px); line-height: 1.45; color: rgba(255, 255, 255, .72); margin-top: 26px; letter-spacing: -.01em; max-width: 26em; }
.s1 .ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.s1 .hint { display: none; }
/* the basket: the brand's open frame, where the visitor drops what they need */
.bk { position: absolute; z-index: 2; inset-inline-end: var(--g); top: calc(var(--hd) + 7vh); width: 36vw; height: 54vh; padding: 34px 36px; display: grid; align-content: start; gap: 10px; }
.bk > i { position: absolute; width: 36px; height: 36px; border: 0 solid rgba(255, 255, 255, .9); transition: border-color .4s, transform .5s var(--ease); }
.bk > i:nth-of-type(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.bk > i:nth-of-type(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.bk > i:nth-of-type(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.bk > i:nth-of-type(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.bk.invite > i { animation: bk-breathe 2.4s var(--ease) infinite; }
.bk.invite > i:nth-of-type(2) { animation-delay: .15s; } .bk.invite > i:nth-of-type(3) { animation-delay: .3s; } .bk.invite > i:nth-of-type(4) { animation-delay: .45s; }
@keyframes bk-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.18); border-color: #7da2ff; } }
.bk.near > i { border-color: var(--cobalt); transform: scale(1.12); }
.bk::before { content: ''; position: absolute; inset: 0; background: rgba(20, 85, 245, .0); transition: background .4s; pointer-events: none; }
.bk.near::before { background: rgba(20, 85, 245, .08); }
.bk-h { font-family: "Instrument Serif", serif; font-size: clamp(30px, 2.6vw, 46px); line-height: 1.05; letter-spacing: -.01em; }
.bk-s { font-size: 15px; color: rgba(255, 255, 255, .6); max-width: 24em; line-height: 1.5; }
.bk-r { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: 14px; }
.bk-r[hidden] { display: none; }
.bk-n { font-weight: 600; color: #fff; }
.bk-go { display: inline-flex; align-items: center; gap: 8px; color: #7da2ff; font-weight: 600; }
.bk-x { color: rgba(255, 255, 255, .55); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.bk-floor { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 1px; background: rgba(255, 255, 255, .14); }
/* the drop zone: dashed, a plus, « Déposez ici »; it gives way to the first need */
.bk-drop { position: absolute; left: 26px; right: 26px; bottom: 26px; height: 38%; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1.5px dashed rgba(255, 255, 255, .28); border-radius: 8px; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, .55); transition: opacity .5s, border-color .3s, color .3s, background .3s; pointer-events: none; }
.bk-plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 20px; font-weight: 400; line-height: 1; }
.bk.want .bk-drop, .bk.near .bk-drop { border-color: #7da2ff; color: #fff; background: rgba(20, 85, 245, .1); }
.bk.has .bk-drop { opacity: 0; }
.bk.want > i { border-color: #7da2ff; transform: scale(1.1); }
/* the demonstration: a hand carries a ghost of a need into the frame, until the visitor tries */
.demo { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.demo .tag { position: absolute; left: 0; top: 0; opacity: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 2px rgba(125, 162, 255, .9); }
.demo .hand { position: absolute; left: 0; top: 0; width: 46px; height: 46px; opacity: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.demo .hand svg { width: 100%; height: 100%; display: block; }
.tag.dim { opacity: .45; transition: opacity .3s; }
.tag[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--cobalt); }
.tag.t2[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 0 0 2px #fff, 0 0 0 5px var(--cobalt); }
/* the project chip in the header, and the toast that says the site changed */
.hd-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 9px 13px; border-radius: 4px; background: rgba(20, 85, 245, .16); color: inherit; box-shadow: inset 0 0 0 1px rgba(77, 132, 255, .5); }
.hd-chip[hidden] { display: none; }
.hd-chip b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--cobalt); color: #fff; font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; background: #fff; color: var(--ink); border-radius: 6px; padding: 14px 18px; font-size: 15px; font-weight: 500; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); transition: opacity .4s, transform .6s var(--ease); display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); flex: none; }
.adapted { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cobalt); }
.adapted::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); }
.tags { position: absolute; inset: auto 0 0; z-index: 3; padding: 0 var(--g) 28px; }
.tags ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tag { display: inline-block; padding: 15px 24px; border-radius: 6px; font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: -.01em; white-space: nowrap; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-user-drag: none; }
.tag.t0 { background: #fff; color: var(--ink); }
.tag.t1 { background: var(--cobalt); color: #fff; }
.tag.t2 { background: #121318; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
html.phys .tags { inset: 0; padding: 0; }
html.phys .tags ul { display: block; height: 100%; }
html.phys .tags li { position: absolute; left: 0; top: 0; }
html.phys .tag { will-change: transform; }

/* 2, the design of websites and business applications: the plan of the screen (read from the screen itself by the script) draws
   itself on a white sheet that straightens up in 3D, then the screen lands on it; a handle compares the two */
/* the passage from the opening: scene 2 slides over it as a panel (rounded top corners that settle at the top, --r2f), while the opening
   sinks under a shade (.s1-veil, added by the script); the page under both is the theme's own colour, so no other tone shows through */
html, body { background: var(--page); }
.s1-veil { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: #000; opacity: 0; }
.s2 { --ar: 1.2249; --r2: 40px; --r2f: 1; position: relative; z-index: 1; background: var(--page-2); color: var(--fg); }
html.js .s2 { height: 340vh; border-radius: calc(var(--r2) * var(--r2f)) calc(var(--r2) * var(--r2f)) 0 0; box-shadow: 0 -34px 80px -30px rgba(10, 20, 40, .26); }
html.js [data-theme="dark"] .s2, html.js[data-theme="dark"] .s2 { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 -40px 90px -24px rgba(0, 0, 0, .9); }
.s2-pin { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--hd) + 6vh) var(--g) 5vh; overflow: hidden; }
html.js .s2-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.s2-txt { position: relative; z-index: 3; max-width: 1100px; }
.s2-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(40px, 4.9vw, 92px); line-height: 1.02; letter-spacing: -.018em; }
.s2-h span { display: block; }
.s2-h em { font-style: italic; padding-inline-end: .03em; }
.s2-p { margin-top: 24px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--fg-2); max-width: 36em; }
.s2-stage { position: absolute; z-index: 2; left: var(--g); right: var(--g); top: calc(var(--hd) + 1.5vh); bottom: 1.5vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
html:not(.js) .s2-stage { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 6vh; }
.s2-cam { width: min(100%, calc((100svh - var(--hd) - 3vh - 30px) * var(--ar))); transform-origin: 50% 100%; pointer-events: auto; }
html.js .s2-cam { will-change: transform; }
.s2-cam.flat { transform: none !important; }
.s2-frame { --w: 100%; --d: 0; position: relative; aspect-ratio: var(--ar); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 70px 120px -50px rgba(0, 0, 0, .6), 0 0 0 1px var(--line); touch-action: pan-y; }
[data-theme="light"] .s2-frame { box-shadow: 0 60px 110px -50px rgba(10, 20, 40, .35), 0 0 0 1px #dfe3e9; }
/* the plan: a design tool's sheet, its dots, and the screen's structure in grey lines (blue for what can be clicked) */
.s2-plan { position: absolute; inset: 0; background: #fff radial-gradient(circle, #e2e5eb 1px, transparent 1.4px) 0 0 / 16px 16px; }
.s2-plan svg { display: block; width: 100%; height: 100%; }
.s2-plan path { fill: none; stroke: #a9b2bf; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.s2-plan path:not(.t) { stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.s2.run .s2-plan path { stroke-dashoffset: 1; opacity: 0; }
.s2-plan .b.md { fill: #f6f7f9; }
.s2-plan .b.dk { fill: #e8ebef; stroke: #939cab; }
.s2-plan .b.ac { fill: #edf2ff; stroke: #1455f5; }
.s2-plan .b.k { stroke: #1455f5; }
.s2-plan .m { fill: #f4f5f7; stroke: #c1c7d0; }
.s2-plan .l { stroke: #d2d7de; }
.s2-plan .i { fill: #d9dde3; stroke: none; }
.s2-plan .t { stroke: #d5dae1; }
.s2-plan .t.h { stroke: #bac1cb; }
.s2-plan .t.k { stroke: #b2c6fb; }
.s2-plan .t.o { stroke: #c6ccd4; }
.s2-plan .t.h.o { stroke: #a8b0bb; }
.s2-meas { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: -1; }
.s2-meas *, .s2-meas *::before, .s2-meas *::after { transition: none !important; }
/* the screen, over its plan: it lands in a soft sweep from the top (--d), then shares the sheet with the plan (--w) */
.s2-real { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--w)) 0 0); }
[dir="rtl"] .s2-real { clip-path: inset(0 0 0 calc(100% - var(--w))); }
.s2.run .s2-real { -webkit-mask-image: linear-gradient(#000 calc(var(--d) * 100% - 22%), transparent calc(var(--d) * 100%)); mask-image: linear-gradient(#000 calc(var(--d) * 100% - 22%), transparent calc(var(--d) * 100%)); }
.s2-real-in { position: absolute; inset: 0; }
.s2-real-in > .dev, .s2-meas > .dev { border-radius: 0; box-shadow: none; }
.s2-sel { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; outline: 1.5px solid #1455f5; pointer-events: none; opacity: 0; transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .35s; }
.s2-sel.on { opacity: 1; }
.s2-sel i { position: absolute; width: 8px; height: 8px; margin: -4px; background: #fff; border: 1.5px solid #1455f5; border-radius: 1px; }
.s2-sel i:nth-child(1) { left: 0; top: 0; } .s2-sel i:nth-child(2) { left: 100%; top: 0; } .s2-sel i:nth-child(3) { left: 0; top: 100%; } .s2-sel i:nth-child(4) { left: 100%; top: 100%; }
.s2-sel b { position: absolute; left: -1.5px; bottom: calc(100% + 8px); font: 600 12px/1 "Plus Jakarta Sans", sans-serif; color: #fff; background: #1455f5; padding: 5px 7px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
[dir="rtl"] .s2-sel b { left: auto; right: -1.5px; }
.s2-sel.low b { bottom: auto; top: calc(100% + 8px); }
.s2-handle { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--w); width: 0; z-index: 3; opacity: 0; transition: opacity .4s; outline: none; }
.s2-handle i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 20, 40, .25); }
.s2-handle b { position: absolute; top: 50%; left: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--cobalt); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.s2-handle b svg { width: 22px; height: 22px; }
.s2-handle:focus-visible b { outline: 2px solid #fff; outline-offset: 3px; }
.s2-frame.cmp .s2-handle { opacity: 1; }
.s2-tag { position: absolute; bottom: 14px; z-index: 2; font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 7px 11px; border-radius: 4px; background: rgba(10, 11, 13, .78); color: #fff; opacity: 0; transition: opacity .5s; pointer-events: none; }
.s2-tag-a { inset-inline-end: 14px; } .s2-tag-b { inset-inline-start: 14px; }
.s2-frame.cmp .s2-tag { opacity: 1; }
.s2-hint { margin: 0; font-size: 13px; line-height: 20px; color: var(--fg-3); opacity: 0; transition: opacity .5s; }
.s2.cmp .s2-hint { opacity: 1; }

/* 3, trend, power, logic */
.s3 { position: relative; background: #fff; color: var(--ink); }
html.js .s3 { height: 460vh; }
.s3-pin { position: relative; overflow: hidden; }
html.js .s3-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.s3-track { display: flex; flex-direction: column; }
html.js .s3-track { flex-direction: row; width: 400vw; height: 100%; will-change: transform; }
.s3-p { width: 100vw; min-height: 100svh; display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 5vw; padding: calc(var(--hd) + 4vh) var(--g) 6vh; }
.s3-n { font-size: 14px; font-weight: 600; color: var(--mut); font-variant-numeric: tabular-nums; }
.s3-h { font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(72px, 9.6vw, 190px); line-height: .9; letter-spacing: -.02em; margin: 18px 0 26px; margin-inline-start: -.03em; }
.s3-d { font-size: clamp(18px, 1.5vw, 24px); line-height: 1.5; color: #3b414c; max-width: 24em; }
.s3-frame { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #0d0e11; box-shadow: 0 50px 100px -30px rgba(10, 20, 40, .35), 0 0 0 1px rgba(10, 20, 40, .06); }
.s3-frame.shot { background: #fff; }
.s3-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s3-p > * { min-width: 0; }
.s3-m figcaption { font-size: 13px; color: var(--mut); margin-top: 14px; text-align: end; }
/* each value's real work: its photograph opens its page */
a.s3-m { display: block; color: inherit; }
.s3-frame.ph { display: block; background: #0b0d12; }
.s3-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
a.s3-m:hover .s3-img { transform: scale(1.035); }
.s3-cap { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; font-size: 15px; color: var(--fg-2); }
.s3-cap b { color: var(--fg); font-weight: 700; font-size: 17px; }
.s3-cap .ax { width: 20px; height: 20px; margin-inline-start: auto; align-self: center; transition: transform .35s var(--ease); }
a.s3-m:hover .s3-cap .ax { transform: translateX(5px); }
[dir="rtl"] a.s3-m:hover .s3-cap .ax { transform: scaleX(-1) translateX(5px); }

/* 4, the words to jostle */
.s4 { background: var(--cobalt); color: #fff; padding: 16vh var(--g); }
.frame { position: relative; padding: clamp(34px, 5vw, 84px); }
.frame > i { position: absolute; width: 30px; height: 30px; border: 0 solid #fff; }
.frame > i:nth-of-type(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.frame > i:nth-of-type(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.frame > i:nth-of-type(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.frame > i:nth-of-type(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.s4-p { font-size: clamp(38px, 5.4vw, 98px); line-height: 1.06; letter-spacing: -.045em; font-weight: 500; max-width: 15em; }
.s4 .hint { margin-top: 34px; opacity: .7; }

/* 5, by audience */
/* 5, website design, izak's first craft: the head (the title for search engines, the promise, two buttons), then a bento of what
   every website we make has, each tile shown by a real website or a screen of the kit; hosting and maintenance after it */
.s5 { background: #fff; color: var(--ink); padding: 16vh var(--g) 13vh; }
.s5-hd { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3vh 6vw; align-items: end; }
.s5-hd .kick { grid-column: 1 / -1; }
.s5-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(60px, 8.4vw, 164px); line-height: .9; letter-spacing: -.025em; margin-inline-start: -.03em; }
.s5-s { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--fg-2); max-width: 30em; }
.s5-r .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.s5-h .wd { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
/* the bento (03/10: « bizarre d'avoir un cadre noir et deux cadres sur fond blanc… anime moi cette section »): five dark studio
   tiles, each lit by its own colour, each alive while the section is seen (.s5.on): MORPHO's chapters follow one another in a
   leaning window, shoot.immo's page scrolls on a phone, izak turns over from French to Arabic like a card, the kit's screens drift */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 330px 330px 410px; gap: 14px; margin-top: 9vh; }
.b-t { --glow: rgba(64, 104, 214, .5); position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(90% 70% at 70% 0%, var(--glow), rgba(0, 0, 0, 0) 70%), #07090f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.b-a { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.b-b { --glow: rgba(232, 119, 90, .4); grid-column: 5 / span 2; grid-row: 1 / span 2; }
.b-c { --glow: rgba(20, 85, 245, .5); grid-column: 1 / span 2; }
.b-d { --glow: rgba(43, 196, 156, .34); grid-column: 3 / span 2; }
.b-e { --glow: rgba(139, 108, 240, .4); grid-column: 5 / span 2; }
.b-v { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.b-par { position: absolute; inset: 0; }
.b-x { position: relative; z-index: 2; padding: 6px 28px 26px; }
.b-x h3 { font-size: clamp(20px, 1.6vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.b-a .b-x h3 { font-size: clamp(26px, 2.5vw, 42px); }
.b-x p { font-size: 15px; line-height: 1.5; margin-top: 8px; color: rgba(255, 255, 255, .72); max-width: 34em; }
.b-l { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 600; color: #fff; }
.b-l .ax { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.b-l:hover .ax { transform: translateX(4px); }
[dir="rtl"] .b-l:hover .ax { transform: scaleX(-1) translateX(4px); }
.b-demo { display: block; margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .45); }
.b-gl { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 45%); opacity: 0; transition: opacity .4s; }
.b-t:hover .b-gl { opacity: 1; }
.b-win { position: absolute; border-radius: 10px; overflow: hidden; background: #0d0e11; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -20px rgba(0, 0, 0, .8); }
.b-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: #1b1c20; border-bottom: 1px solid #2a2b30; }
.b-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.b-bar i:nth-child(2) { background: #febc2e; } .b-bar i:nth-child(3) { background: #28c840; }
.b-bar span { margin: 0 auto; width: 44%; height: 16px; border-radius: 5px; background: #2a2b30; font: 500 9.5px/16px "Plus Jakarta Sans", sans-serif; color: #9aa0aa; text-align: center; overflow: hidden; white-space: nowrap; direction: ltr; }
.b-scr { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.b-scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.b-a .b-win { left: 9%; top: 9%; width: 96%; transform: perspective(1600px) rotateY(-14deg) rotateX(5deg); transform-origin: 0 0; }
[dir="rtl"] .b-a .b-win { left: auto; right: 9%; transform: perspective(1600px) rotateY(14deg) rotateX(5deg); transform-origin: 100% 0; }
.b-ch { opacity: 0; }
.b-ch:first-child { opacity: 1; }
.s5.on .b-ch { animation: b-chap 16s infinite; }
.s5.on .b-ch:nth-child(2) { animation-delay: 4s; } .s5.on .b-ch:nth-child(3) { animation-delay: 8s; } .s5.on .b-ch:nth-child(4) { animation-delay: 12s; }
@keyframes b-chap { 0% { opacity: 0; transform: scale(1.06); } 4%, 25% { opacity: 1; } 30% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
.b-ph { position: absolute; left: 50%; top: 7%; height: 106%; aspect-ratio: 9 / 19.4; transform: translateX(-50%); border-radius: 15% / 7%; padding: 1%; background: linear-gradient(135deg, #3d4045, #1c1d20 40%, #36383d); box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .85); }
.b-phs { position: relative; width: 100%; height: 100%; border-radius: 13.6% / 6.3%; overflow: hidden; background: #111; border: 3px solid #000; }
.b-phs::before { content: ''; position: absolute; z-index: 1; top: 1.6%; left: 50%; width: 30%; height: 3.2%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.b-tall { display: block; width: 100%; height: auto; }
.s5.on .b-tall { animation: b-scroll 22s cubic-bezier(.6, 0, .4, 1) infinite alternate; }
@keyframes b-scroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(-73%); } }
.b-flip { position: absolute; left: 9%; right: 9%; top: 11%; perspective: 1400px; }
.b-card { position: relative; transform-style: preserve-3d; }
.s5.on .b-card { animation: b-turn 9s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes b-turn { 0%, 38% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.b-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.b-face.back { position: absolute; inset: 0; transform: rotateY(180deg); }
.b-flip .b-win { position: relative; }
.b-kit { position: absolute; left: 7%; right: 7%; top: 9%; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -20px rgba(0, 0, 0, .8); }
.b-kit .dev { border-radius: 0; box-shadow: none; }
.s5.on .b-kit { animation: b-drift 14s ease-in-out infinite alternate; }
@keyframes b-drift { from { transform: translateY(0); } to { transform: translateY(-9%); } }
@media (prefers-reduced-motion: reduce) { .s5 .b-ch, .s5 .b-tall, .s5 .b-card, .s5 .b-kit { animation: none !important; } }
.s5 .kick { color: var(--mut); opacity: 1; }
.care { display: flex; align-items: center; gap: 18px; margin: 14px 0 0; padding: 26px 30px; background: var(--soft); border-radius: 8px; font-size: 16px; color: var(--mut); }
.care b { color: var(--ink); font-size: 19px; font-weight: 600; }
.care .ax { margin-inline-start: auto; color: var(--cobalt); }

/* 6, the work: full screen, one over the other */
.s6 { background: #000; padding-top: 14vh; }
.s6 > .kick { padding-bottom: 5vh; }
.wk { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
html.js .wk { position: sticky; top: 0; }
.wk-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-a { position: absolute; inset: 0; display: block; }
.wk::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .78) 100%); }
.wk-t { position: absolute; left: var(--g); right: var(--g); bottom: 7vh; z-index: 2; display: grid; gap: 14px; max-width: 1100px; }
.wk-n { font-size: 14px; font-weight: 600; opacity: .75; }
.wk-h { font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(68px, 11vw, 210px); line-height: .88; letter-spacing: -.02em; margin-inline-start: -.03em; }
.wk-d { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.5; color: rgba(255, 255, 255, .85); max-width: 34em; }
.wk .lnk { justify-self: start; margin-top: 8px; }

/* 7, the end */
.s7 { background: #fff; color: var(--ink); padding: 22vh var(--g) 18vh; text-align: center; }
.s7-h { font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(60px, 9.4vw, 180px); line-height: .95; letter-spacing: -.02em; }
.s7-h .wd { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; vertical-align: top; }
.s7-sub { font-size: clamp(18px, 1.5vw, 23px); color: #3b414c; margin: 30px auto 40px; max-width: 32em; }
.s7 .ctas { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.s7-mail { font-size: 18px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* footer */
.ft { background: #000; color: #fff; padding: 10vh var(--g) 34px; }
.ft-l { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 10vh; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: rgba(255, 255, 255, .5); }
.ft-l span:last-child { display: flex; gap: 22px; flex-wrap: wrap; }

/* the cursor: one element, a shape per scene */
.izc { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; display: none; }
html.fine .izc { display: block; }
html.fine, html.fine body, html.fine a, html.fine button { cursor: none; }
.izc > * { position: absolute; left: 0; top: 0; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), opacity .3s, background .3s, border-color .3s, transform .45s var(--ease); }
.c-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; }
.c-ring { width: 0; height: 0; margin: 0; border-radius: 50%; border: 1.5px solid #fff; opacity: 0; }
.c-fr { width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 0; transform: scale(.6); }
.c-fr b { position: absolute; width: 16px; height: 16px; border: 0 solid #fff; }
.c-fr b:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.c-fr b:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.c-fr b:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.c-fr b:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.c-t { display: grid; place-items: center; width: 0; height: 0; margin: 0; border-radius: 50%; background: var(--cobalt); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; overflow: hidden; }
.izc.m-grab .c-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 1; }
.izc.m-grab .c-t, .izc.m-grabbing .c-t { width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 1; background: transparent; }
.izc.m-grabbing .c-ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: 1; border-width: 3px; }
.izc.m-grab .c-dot, .izc.m-grabbing .c-dot { opacity: 0; }
.izc.m-frame .c-fr { opacity: 1; transform: none; }
.izc.m-frame .c-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
.izc.m-arrow .c-t { width: 88px; height: 88px; margin: -44px 0 0 -44px; opacity: 1; background: var(--ink); }
.izc.m-arrow .c-dot { opacity: 0; }
.izc.m-push .c-ring { width: 150px; height: 150px; margin: -75px 0 0 -75px; opacity: 1; }
.izc.m-view .c-t { width: 92px; height: 92px; margin: -46px 0 0 -46px; opacity: 1; }
.izc.m-view .c-dot, .izc.m-go .c-dot { opacity: 0; }
.izc.m-go .c-t { width: 110px; height: 110px; margin: -55px 0 0 -55px; opacity: 1; }
.izc.on-light .c-dot { background: var(--ink); }
.izc.on-light .c-ring, .izc.on-light .c-fr b { border-color: var(--ink); }
.izc.m-link .c-dot { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: rgba(255, 255, 255, .18); }
.izc.on-light.m-link .c-dot { background: rgba(10, 11, 13, .12); }
.izc.out { opacity: 0; }

@media (max-width: 1000px) {
  .s1-t { max-width: 60vw; }
  .s3-p { grid-template-columns: 1fr; gap: 34px; }
  .s5-hd { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .b-a, .b-b, .b-c, .b-d, .b-e { grid-column: auto; grid-row: auto; }
  .b-t { min-height: 0; }
  .b-v { flex: none; }
  .b-a .b-v { height: 64vw; } .b-b .b-v { height: 118vw; } .b-c .b-v { height: 66vw; } .b-d .b-v, .b-e .b-v { height: 58vw; }
  .b-x { padding: 6px 22px 24px; }
  .care { flex-direction: column; align-items: flex-start; gap: 8px; }
  .care .ax { margin-inline-start: 0; }
  html.js .s3-p { padding-top: calc(var(--hd) + 2vh); align-content: center; }
  .s3-h { font-size: clamp(56px, 16vw, 120px); margin-bottom: 14px; }
}
@media (max-width: 640px) {
  :root { --hd: 64px; }
  /* on a phone the film keeps its 16:10 frame above the words instead of being cropped behind them */
  .wk-v { inset: auto 0 auto 0; top: calc(var(--hd) + 5vh); height: auto; aspect-ratio: 16 / 10; }
  .wk::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, #000 62%); }
  .logo { width: 80px; }
  .s1-t { padding-top: calc(var(--hd) + 3vh); max-width: none; }
  .slogan { font-size: clamp(52px, 15vw, 76px); }
  .s1-sub { font-size: 16px; margin-top: 14px; }
  .s1 .ctas { margin-top: 18px; }
  .s1 .ctas .ghost { display: none; }
  .bk { left: var(--g); right: var(--g); width: auto; top: auto; bottom: 168px; height: 30vh; padding: 20px 22px; }
  .bk-h { font-size: 28px; }
  .bk-s { font-size: 13px; }
  .bk-drop { height: 34%; font-size: 14px; left: 18px; right: 18px; bottom: 18px; }
  .s1 .hint { display: none; }
  .tag { font-size: 15px; padding: 12px 18px; }
  .s1 .hint { bottom: 210px; }
  .s3-d { font-size: 17px; }
  .wk-t { bottom: 5vh; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .s2, html.js .s3 { height: auto; }
  html.js .s2-pin, html.js .s3-pin, html.js .wk { position: relative; }
  html.js .s2-pin { height: auto; }
  .s2-stage { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 6vh; }
  html.js .s3-track { flex-direction: column; width: auto; }
  html.js .s1-light { opacity: 1; }
}

/* the sections that follow the theme (the cobalt field, the work's cinema and the footer stay as they are in both) */
.s1 { background: var(--page); color: var(--fg); }
.s1-light { background: radial-gradient(circle at var(--mx, 50%) var(--my, 38%), var(--spot-1) 0, var(--spot-2) 16%, rgba(20, 85, 245, .035) 30%, transparent 46%); }
.s1-sub { color: var(--fg-2); }
.s1 .bt.ghost, .s5 .bt.ghost { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.s5 .bt.ghost:hover { background: var(--tile); }
.s5 .care { background: radial-gradient(60% 140% at 85% 0%, rgba(20, 85, 245, .28), rgba(0, 0, 0, 0) 70%), #07090f; color: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); border-radius: 20px; }
.s5 .care b { color: #fff; }
.s5 .care .ax { color: #7da2ff; }
.tag.t0 { background: var(--b0-bg); color: var(--b0-fg); }
.tag.t2 { background: var(--b2-bg); color: var(--b2-fg); box-shadow: inset 0 0 0 1px var(--b2-bd); }
.tag[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--page), 0 0 0 5px var(--cobalt); }
.tag.t2[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--b2-bd), 0 0 0 2px var(--page), 0 0 0 5px var(--cobalt); }
.bk > i { border-color: var(--fg); }
.bk-s, .bk-x { color: var(--fg-3); }
.bk-n { color: var(--fg); }
.bk-go { color: var(--accent); }
.bk-floor { background: var(--line); }
.bk-drop { border-color: var(--line-strong); color: var(--fg-3); }
.bk.want .bk-drop, .bk.near .bk-drop { color: var(--fg); }
.s3 { background: var(--s-alt); color: var(--fg); }
.s3-n, .s3-m figcaption { color: var(--fg-3); }
.s3-d { color: var(--fg-2); }
.s5 { background: var(--s-alt); color: var(--fg); }
.s5 .kick { color: var(--fg-3); }
.care { background: var(--tile); color: var(--fg-3); }
.care b { color: var(--fg); }
.s7 { background: var(--s-end); color: var(--fg); }
.s7-sub { color: var(--fg-2); }
.s7 .bt.ghost { color: var(--fg); }
/* the theme switch: a sun in the dark, a moon in the light; the new theme opens as a circle from the button */
.theme-b { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: inherit; box-shadow: inset 0 0 0 1px currentColor; opacity: .8; transition: opacity .3s, transform .5s var(--ease); }
.theme-b:hover { opacity: 1; transform: rotate(-12deg); }
.theme-b svg { width: 18px; height: 18px; grid-area: 1 / 1; }
[data-theme="dark"] .i-moon, [data-theme="light"] .i-sun { display: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: vt-reveal .75s cubic-bezier(.22, 1, .36, 1); }
@keyframes vt-reveal { from { clip-path: circle(0 at var(--vx, 90%) var(--vy, 5%)); } to { clip-path: circle(150vmax at var(--vx, 90%) var(--vy, 5%)); } }
@media (max-width: 1000px) {
  .s2 { --r2: 26px; }
  .s2-pin { display: flex; flex-direction: column; justify-content: center; gap: 3vh; padding-top: calc(var(--hd) + 2vh); padding-bottom: 3vh; }
  .s2-h { font-size: clamp(30px, 7.4vw, 56px); line-height: 1.05; }
  .s2-p { font-size: 15px; margin-top: 12px; }
  .s2-stage { position: relative; left: auto; right: auto; top: auto; bottom: auto; gap: 10px; }
  .s2-cam { width: min(100%, calc(46svh * var(--ar))); }
  .s2-tag { font-size: 11px; padding: 5px 8px; bottom: 8px; }
  .s2-tag-a { inset-inline-end: 8px; } .s2-tag-b { inset-inline-start: 8px; }
  .s2-handle b { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .s2-sel b { font-size: 10px; padding: 3px 5px; }
}

.ft-lg { display: flex; flex-wrap: wrap; gap: 18px; }
.ft-lg a[aria-current] { color: #fff; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 5b, anything is possible with izak: three bands of what we build, drifting in turn like the opening's bricks */
.s5b { position: relative; background: var(--page); color: var(--fg); padding: 18vh 0 16vh; overflow: hidden; }
.cap-t { text-align: center; padding: 0 var(--g); }
.cap-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(56px, 8.4vw, 160px); line-height: .92; letter-spacing: -.025em; }
.cap-s { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.5; color: var(--fg-2); max-width: 32em; margin: 26px auto 0; }
.cap-rows { direction: ltr; display: grid; gap: 16px; margin-top: 11vh; }
.cap-row { overflow: hidden; }
.cap-in { display: flex; gap: 16px; width: max-content; animation: cap-x 80s linear infinite; animation-play-state: paused; }
.cap-row.rev .cap-in { animation-direction: reverse; animation-duration: 95s; }
.s5b.on .cap-in { animation-play-state: running; }
@keyframes cap-x { to { transform: translateX(calc(-50% - 8px)); } }
.cap-in span { flex: none; padding: 17px 28px; border-radius: 6px; font-size: clamp(17px, 1.5vw, 24px); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-strong); }
[dir="rtl"] .cap-in span { direction: rtl; }
.cap-in .c1 { background: var(--cobalt); color: #fff; box-shadow: none; }
.cap-in .c2 { background: var(--b0-bg); color: var(--b0-fg); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .cap-in { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding: 0 var(--g); } .cap-row:not(:first-child) { display: none; } }
/* 5c, the sectors: one line each, the name very large, which opens its page */
.s5c { background: var(--s-alt); color: var(--fg); padding: 16vh var(--g) 14vh; }
.s5c .kick { color: var(--fg-3); }
.sc-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(36px, 4.2vw, 76px); line-height: 1.02; letter-spacing: -.02em; max-width: 17em; margin-top: 18px; }
.sc-list { list-style: none; margin: 9vh 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.sc-list a { display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1fr) 28px; align-items: center; gap: 3vw; padding: 3.4vh 0; border-top: 1px solid var(--line); color: inherit; }
.sc-i { font-size: 13px; font-weight: 700; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.sc-n { font-family: "Instrument Serif", 'Times New Roman', serif; font-size: clamp(40px, 5vw, 96px); line-height: 1; letter-spacing: -.02em; transition: transform .6s var(--ease), color .4s; }
.sc-d { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; color: var(--fg-2); }
.sc-list .ax { width: 26px; height: 26px; color: var(--fg-3); transition: transform .4s var(--ease), color .4s; }
.sc-list a:hover .sc-n { transform: translateX(18px); color: var(--accent); }
[dir="rtl"] .sc-list a:hover .sc-n { transform: translateX(-18px); }
.sc-list a:hover .ax { transform: translateX(6px); color: var(--fg); }
[dir="rtl"] .sc-list a:hover .ax { transform: scaleX(-1) translateX(6px); }
/* a sector's page (/v6/<lang>/<sectors>/<slug>/): the work pages' parts, a long title for search engines, the works, the questions */
.sp-h { margin: 26px 0 0; font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(52px, 7.2vw, 136px); line-height: .95; letter-spacing: -.022em; max-width: 13em; margin-inline-start: -.02em; }
.sp .cp-did { padding-top: 12vh; }
.sp-refs { max-width: 1520px; margin: 0 auto; padding: 4vh var(--g) 12vh; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4vh 2.4vw; margin-top: 7vh; }
.sp-w { display: grid; gap: 8px; color: inherit; }
.sp-wi { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: #0b0d12; margin-bottom: 10px; transition: transform 1s var(--ease); }
.sp-w:hover .sp-wi { transform: scale(1.02); }
.sp-w b { font-size: 22px; letter-spacing: -.015em; }
.sp-w span { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--fg-2); }
.sp-w .ax { width: 18px; height: 18px; }
.sp-faq { max-width: 1520px; margin: 0 auto; padding: 4vh var(--g) 12vh; }
.sp-faq details { max-width: 1100px; }
.sp-faq .cp-s { margin-bottom: 6vh; }
.sp-faq details { border-top: 1px solid var(--line); }
.sp-faq details:last-child { border-bottom: 1px solid var(--line); }
.sp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font-size: clamp(18px, 1.5vw, 23px); font-weight: 600; letter-spacing: -.01em; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: '+'; flex: none; font-size: 28px; font-weight: 300; color: var(--fg-3); transition: transform .4s var(--ease); }
.sp-faq details[open] summary::after { transform: rotate(45deg); }
.sp-faq details p { padding: 0 0 28px; font-size: 17px; line-height: 1.65; color: var(--fg-2); max-width: 46em; }
.sp-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 var(--g) 14vh; }
.sp-more a { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 600; font-size: 15px; transition: background .3s, color .3s; }
.sp-more a:hover { background: var(--fg); color: var(--page); }
.sp-more .ax { width: 16px; height: 16px; }
@media (max-width: 1000px) {
  .sc-list a { grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 4px 14px; }
  .sc-d { grid-column: 2; grid-row: 2; }
  .sc-list .ax { grid-column: 3; grid-row: 1; }
  .cap-in span { padding: 13px 20px; }
}
[lang="ar"] .cap-h, [lang="ar"] .sc-h, [lang="ar"] .sc-n, [lang="ar"] .sp-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
[lang="ar"] .cap-h { font-size: clamp(44px, 6.4vw, 120px); }
[lang="ar"] .sc-n { font-size: clamp(32px, 3.8vw, 72px); }
[lang="ar"] .sp-h { font-size: clamp(40px, 5.2vw, 96px); }

/* a work's page (/v6/<lang>/work/<slug>/): its name very large, what it is, the facts, its photograph, what we did, more pictures,
   the next work, then the contact scene */
.cp { background: var(--page); color: var(--fg); }
.cp-hd { max-width: 1520px; margin: 0 auto; padding: calc(var(--hd) + 10vh) var(--g) 7vh; }
.cp-k { font-size: 14px; font-weight: 600; color: var(--fg-3); }
.cp-k a { transition: color .3s; } .cp-k a:hover { color: var(--fg); }
.cp-h { margin: 26px 0 0; font-weight: 400; }
.cp-n { display: block; font-family: "Instrument Serif", 'Times New Roman', serif; font-size: clamp(76px, 12vw, 230px); line-height: .88; letter-spacing: -.025em; margin-inline-start: -.03em; }
.cp-t { display: block; font-size: clamp(20px, 1.8vw, 30px); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; color: var(--fg-2); margin-top: 24px; max-width: 30em; }
.cp-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3vh 6vw; margin-top: 8vh; align-items: start; }
.cp-lead { grid-row: span 3; font-size: clamp(19px, 1.6vw, 26px); line-height: 1.5; letter-spacing: -.01em; max-width: 30em; }
.cp-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; margin: 0; }
.cp-f dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.cp-f dd { margin: 6px 0 0; font-size: 16px; line-height: 1.45; }
.cp-in .bt { justify-self: start; }
.cp-pv { font-size: 14px; color: var(--fg-3); }
.cp-hero { margin: 0 auto; padding: 0 var(--g); max-width: 1880px; }
.cp-hero img, .cp-gal img, .cp-ni { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; background: #0b0d12; }
.cp-did { max-width: 1520px; margin: 0 auto; padding: 16vh var(--g) 10vh; }
.cp-s { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(48px, 6vw, 110px); line-height: .95; letter-spacing: -.02em; }
.cp-did ol { list-style: none; margin: 8vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7vh 6vw; }
.cp-i { font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.cp-did h3 { font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 12px 0 10px; }
.cp-did p { font-size: 17px; line-height: 1.6; color: var(--fg-2); max-width: 32em; }
.cp-gal { max-width: 1720px; margin: 0 auto; padding: 0 var(--g) 14vh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4vh 3vw; }
.cp-gal figure { margin: 0; }
.cp-gal figure:first-child { grid-column: 1 / -1; }
.cp-gal img { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .55), 0 0 0 1px var(--line); }
.cp-gal figcaption { font-size: 14px; color: var(--fg-3); margin-top: 14px; }
.cp-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; gap: 2vh 5vw; padding: 12vh var(--g); border-top: 1px solid var(--line); color: inherit; }
.cp-nk { font-size: 14px; font-weight: 600; color: var(--fg-3); }
.cp-nn { font-family: "Instrument Serif", 'Times New Roman', serif; font-size: clamp(64px, 9vw, 170px); line-height: .9; letter-spacing: -.02em; }
.cp-nt { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--fg-2); }
.cp-nt .ax { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.cp-next:hover .cp-nt .ax { transform: translateX(5px); }
[dir="rtl"] .cp-next:hover .cp-nt .ax { transform: scaleX(-1) translateX(5px); }
.cp-ni { grid-column: 2; grid-row: 1 / span 3; transition: transform 1.2s var(--ease); }
.cp-next:hover .cp-ni { transform: scale(1.02); }
@media (max-width: 1000px) {
  .cp-hd { padding-top: calc(var(--hd) + 6vh); }
  .cp-in, .cp-did ol, .cp-gal, .cp-next { grid-template-columns: 1fr; }
  .cp-lead { grid-row: auto; }
  .cp-ni { grid-column: 1; grid-row: auto; margin-top: 3vh; }
  .cp-did { padding-top: 10vh; }
}
[lang="ar"] .cp-n, [lang="ar"] .cp-s, [lang="ar"] .cp-nn { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.15; }
[lang="ar"] .cp-f dt { letter-spacing: 0; }

/* Arabic: Noto Sans Arabic everywhere (Instrument Serif has no Arabic), no italics, no letter-spacing, taller lines; the arrows turn */
[lang="ar"] body { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
[lang="ar"] .slogan, [lang="ar"] .s2-h, [lang="ar"] .s3-h, [lang="ar"] .wk-h, [lang="ar"] .s7-h, [lang="ar"] .bk-h, [lang="ar"] .s4-p, [lang="ar"] .s5-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-style: normal; letter-spacing: 0; }
[lang="ar"] .slogan { font-weight: 600; font-size: clamp(60px, 9.4vw, 176px); line-height: 1.12; }
[lang="ar"] .slogan .wd, [lang="ar"] .s7-h .wd { padding-bottom: .25em; margin-bottom: -.25em; }
[lang="ar"] .slogan em, [lang="ar"] .s2-h em { font-style: normal; color: var(--accent); }
[lang="ar"] .s2-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; line-height: 1.3; letter-spacing: 0; font-size: clamp(34px, 4.2vw, 80px); }
[lang="ar"] .s2-h em { font-family: "Aref Ruqaa", "Noto Sans Arabic", serif; font-size: 1.12em; }
[lang="ar"] .s2-sel b { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; }
[lang="ar"] .s3-h { font-weight: 600; line-height: 1.2; font-size: clamp(60px, 8vw, 160px); }
[lang="ar"] .wk-h { font-weight: 600; line-height: 1.15; font-size: clamp(56px, 8.4vw, 168px); }
[lang="ar"] .s7-h { font-weight: 600; line-height: 1.25; font-size: clamp(48px, 7.6vw, 150px); }
[lang="ar"] .bk-h { font-weight: 600; font-size: clamp(26px, 2.2vw, 38px); }
[lang="ar"] .s4-p { line-height: 1.5; font-size: clamp(32px, 4.4vw, 80px); }
[lang="ar"] .s5-h { font-weight: 600; line-height: 1.2; font-size: clamp(48px, 6.6vw, 124px); }
[lang="ar"] .tag, [lang="ar"] .bt, [lang="ar"] .kick { letter-spacing: 0; }
[dir="rtl"] .ax { transform: scaleX(-1); }
[dir="rtl"] .bt:hover .ax, [dir="rtl"] .lnk:hover .ax { transform: scaleX(-1) translateX(4px); }

/* ---------- 04/10/2026, the pages (plan-pages-v6.md): expertises, solutions, the hubs, the studio, the contact page ---------- */
/* the breadcrumb: the home, the family, the page */
.bc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 4px; }
.bc li { display: inline-flex; align-items: center; }
.bc li + li::before { content: '/'; margin: 0 .6em; color: var(--fg-4); }
.bc [aria-current] { color: var(--fg-2); }
.sp-h.long { font-size: clamp(44px, 5.6vw, 108px); max-width: 15em; }
.sp-h, .cp-s, .xp-mc b, .wh-h, .st-q, .s7-h { text-wrap: balance; }
.nw { white-space: nowrap; }
/* the footer's legal links (they touched each other since 03/10) */
.ft-l > span { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.xp-go { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.cp-in > .cp-f + .xp-go { margin-top: 6px; }

/* a page's living picture: the kit's screens on a dark studio tile lit by its colour (they play their own motion once seen),
   or a work's photograph; the tile stays dark in both themes, as the home's bento does */
.g-blue { --glow: rgba(20, 85, 245, .5); } .g-teal { --glow: rgba(32, 170, 170, .42); } .g-green { --glow: rgba(43, 196, 156, .36); }
.g-violet { --glow: rgba(139, 108, 240, .44); } .g-coral { --glow: rgba(232, 119, 90, .42); }
.xp-st { position: relative; max-width: 1520px; margin: 0 auto; padding: 0 var(--g); }
.xp-in { --glow: inherit; position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; isolation: isolate; background: radial-gradient(80% 75% at 50% 0%, var(--glow), rgba(0, 0, 0, 0) 72%), #07090f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.xp-sc { position: absolute; left: 11%; top: 9%; width: 78%; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 110px -30px rgba(0, 0, 0, .9); }
.xp-st:not(.k-phone) .xp-sc .dev { border-radius: 0; box-shadow: none; }
.xp-st.k-browser.n-2 .s-0 { left: 6%; top: 8%; width: 64%; }
.xp-st.k-browser.n-2 .s-1 { left: auto; right: 5%; top: 26%; width: 45%; z-index: 2; }
[dir="rtl"] .xp-st.k-browser.n-2 .s-0 { left: auto; right: 6%; }
[dir="rtl"] .xp-st.k-browser.n-2 .s-1 { right: auto; left: 5%; }
.xp-st.k-panel .s-0 { left: 9%; top: 11%; width: 44%; }
.xp-st.k-panel .s-1 { left: auto; right: 9%; top: 6%; width: 36%; }
[dir="rtl"] .xp-st.k-panel .s-0 { left: auto; right: 9%; }
[dir="rtl"] .xp-st.k-panel .s-1 { right: auto; left: 9%; }
.xp-st.k-phone .xp-sc { width: 21%; top: 7%; border-radius: 0; overflow: visible; box-shadow: none; }
.xp-st.k-phone .s-0 { left: 27%; }
.xp-st.k-phone .s-1 { left: auto; right: 27%; top: 13%; }
.xp-st figcaption { font-size: 13px; color: var(--fg-3); margin-top: 12px; }
.xp-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; background: #0b0d12; }
.xp .cp-hd { padding-bottom: 8vh; }

/* links as large cards: an expertise's sectors, the expertises of the same audience, the solutions */
.xp-more { max-width: 1520px; margin: 0 auto; padding: 4vh var(--g) 12vh; }
.xp-mg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin-top: 6vh; }
.xp-mg.c-6, .xp-mg.c-9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xp-mc { display: flex; flex-direction: column; gap: 12px; min-height: 220px; padding: 28px 28px 26px; border-radius: 14px; color: inherit; box-shadow: inset 0 0 0 1px var(--line); transition: background .35s, box-shadow .35s; }
.xp-mc b { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(30px, 2.5vw, 44px); line-height: 1; letter-spacing: -.02em; }
.xp-mc span { font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 30em; }
.xp-mc .ax { margin-top: auto; width: 22px; height: 22px; color: var(--fg-3); }
.xp-mc:hover { background: var(--tile); box-shadow: inset 0 0 0 1px var(--line-strong); }
.xp-mc:hover .ax { transform: translateX(6px); color: var(--accent); }
[dir="rtl"] .xp-mc .ax, [dir="rtl"] .xc-x .ax, [dir="rtl"] .wh-l .ax, [dir="rtl"] .bc .ax { transform: scaleX(-1); }
[dir="rtl"] .xp-mc:hover .ax { transform: scaleX(-1) translateX(6px); }
.xp-all { margin-top: 5vh; }

/* the hubs: by audience (the expertises), the solutions, the tiles with their screen */
.hub-g { max-width: 1520px; margin: 0 auto; padding: 9vh var(--g) 3vh; }
.hub-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2vh 6vw; align-items: end; margin-bottom: 5vh; }
.hub-h p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--fg-2); max-width: 32em; }
.xg { display: grid; gap: 14px; }
.xg-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 340px 340px; }
.xg-clients > :first-child { grid-column: span 2; grid-row: span 2; }
.xg-equipes, .xg-partenaires { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 460px; }
.xg-sol { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 440px; }
.xc { --glow: rgba(20, 85, 245, .5); position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(90% 70% at 70% 0%, var(--glow), rgba(0, 0, 0, 0) 70%), #07090f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.xc-v { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.xc-k { position: absolute; left: 8%; right: 8%; top: 9%; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -20px rgba(0, 0, 0, .8); transition: transform 1.1s var(--ease); }
.xc-k .dev { border-radius: 0; box-shadow: none; }
.xc-k.k-panel { left: 20%; right: 20%; }
.xc-k.k-phone { left: 34%; right: 34%; border-radius: 0; overflow: visible; box-shadow: none; }
.xc-k.k-pair { display: flex; gap: 6%; left: 24%; right: 24%; }
.xc-k.k-pair .xc-s { flex: 1; min-width: 0; }
.xc-k.k-pair .xc-s:last-child { margin-top: 8%; }
.xc:hover .xc-k { transform: translateY(-3%); }
.xc-ph .xc-v img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.xc-ph:hover .xc-v img { transform: scale(1.03); }
.xc-x { padding: 8px 28px 26px; }
.xc-x h3 { font-size: clamp(20px, 1.7vw, 27px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.xc-x h3 a { color: inherit; }
.xc-x h3 a::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.xc-x h3 a:focus-visible { outline: none; }
.xc:has(a:focus-visible) { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.xc-x p { font-size: 15px; line-height: 1.5; margin-top: 8px; color: rgba(255, 255, 255, .72); max-width: 34em; }
.xc-x .ax { display: block; margin-top: 14px; width: 20px; height: 20px; }
.xc:hover .xc-x .ax { transform: translateX(5px); }
[dir="rtl"] .xc:hover .xc-x .ax { transform: scaleX(-1) translateX(5px); }
.xc:hover .b-gl { opacity: 1; }
.xg-clients > :first-child .xc-x h3 { font-size: clamp(26px, 2.5vw, 40px); }
.hub-band { max-width: 1520px; margin: 0 auto; padding: 2vh var(--g) 6vh; }
.hub-band .care { margin: 0; }
.hub-sec { max-width: 1520px; margin: 0 auto; padding: 0 var(--g) 10vh; }
.hub-sec .sc-list { margin-top: 4vh; }
.xp-rest { max-width: 1520px; margin: 0 auto; padding: 10vh var(--g) 14vh; }
.cap-wrap { list-style: none; margin: 6vh 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.cap-wrap a, .cap-wrap span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 6px; font-size: clamp(16px, 1.25vw, 20px); font-weight: 600; letter-spacing: -.01em; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .3s, color .3s; }
.cap-wrap span { color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); }
.cap-wrap a { background: var(--b0-bg); color: var(--b0-fg); box-shadow: none; }
.cap-wrap a:hover { background: var(--cobalt); color: #fff; }
.cap-wrap .ax { width: 16px; height: 16px; }
[dir="rtl"] .cap-wrap .ax { transform: scaleX(-1); }

/* the works' hub: the four photographs, two by two */
.wh { max-width: 1720px; margin: 0 auto; padding: 2vh var(--g) 14vh; }
.wh-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10vh 3vw; }
.wh-c { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: inherit; }
.wh-i { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; background: #0b0d12; margin-bottom: 16px; transition: transform 1.2s var(--ease); }
.wh-c:hover .wh-i { transform: scale(1.015); }
.wh-n { font-size: 13px; font-weight: 600; color: var(--fg-3); }
.wh-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(48px, 5.4vw, 104px); line-height: .95; letter-spacing: -.02em; }
.wh-d { font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 34em; }
.wh-l { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 600; font-size: 15px; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.wh-c:hover .wh-l .ax { transform: translateX(4px); }

/* the studio: the cobalt field with the brand's corner brackets, who we are, the method, the languages, the hosting */
.st-cob { background: var(--cobalt); color: #fff; padding: 14vh var(--g); }
.st-q { font-family: "Instrument Serif", 'Times New Roman', serif; font-size: clamp(40px, 5.2vw, 96px); line-height: 1.02; letter-spacing: -.02em; max-width: 17em; }
.st-who { max-width: 1520px; margin: 0 auto; padding: 16vh var(--g) 2vh; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4vh 6vw; align-items: start; }
.st-p p { font-size: clamp(19px, 1.6vw, 25px); line-height: 1.5; letter-spacing: -.01em; }
.st-p p + p { margin-top: 1.1em; color: var(--fg-2); }
.cp-did.st-m ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5vh 3vw; }
.st-two { max-width: 1520px; margin: 0 auto; padding: 10vh var(--g); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 5vh 5vw; align-items: center; }
.st-two .cp-s { font-size: clamp(38px, 3.6vw, 66px); }
.st-t p { font-size: 17px; line-height: 1.6; color: var(--fg-2); margin-top: 24px; max-width: 32em; }
.st-t p + p { margin-top: 26px; }
.st-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.st-pics figure { margin: 0; }
.st-pics img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), 0 0 0 1px var(--line); transition: transform 1s var(--ease); }
.st-pics a:hover img { transform: translateY(-4px); }
.st-pics figcaption { font-size: 13px; color: var(--fg-3); margin-top: 10px; }
.st-host .xp-st { padding: 0; margin: 0; width: 100%; max-width: none; }
.st-host { padding-bottom: 16vh; }

/* the contact page: three ways, large, then what happens next */
.ct-l a { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 28px; }
.ct-after { max-width: 1520px; margin: 0 auto; padding: 4vh var(--g) 18vh; }
.ct-after p { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.55; color: var(--fg-2); max-width: 34em; margin-top: 26px; }
.ct-after .ct-cl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font-size: 17px; }

/* the home's sections lead to the pages: the website's page, the capabilities that have one, all the sectors */
.s5-l { margin-top: 22px; }
.cap-in a { flex: none; padding: 17px 28px; border-radius: 6px; font-size: clamp(17px, 1.5vw, 24px); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .3s, color .3s, box-shadow .3s; }
[dir="rtl"] .cap-in a { direction: rtl; }
.cap-in a.c1 { background: var(--cobalt); color: #fff; box-shadow: none; }
.cap-in a.c2 { background: var(--b0-bg); color: var(--b0-fg); box-shadow: none; }
.cap-in a:hover, .cap-in a.c1:hover, .cap-in a.c2:hover { background: var(--fg); color: var(--page); box-shadow: none; }
.s5b.on .cap-row:hover .cap-in { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cap-in .again { display: none; } }
.cap-all { position: relative; text-align: center; margin-top: 8vh; padding: 0 var(--g); }
.sc-all { margin-top: 6vh; }

/* Arabic: Noto Sans Arabic for the new large titles (Instrument Serif has no Arabic) */
[lang="ar"] .xp-mc b, [lang="ar"] .wh-h, [lang="ar"] .st-q { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.25; }
[lang="ar"] .sp-h.long { font-size: clamp(36px, 4.4vw, 84px); }
[lang="ar"] .st-q { font-size: clamp(32px, 4vw, 72px); line-height: 1.5; }
[lang="ar"] .xp-mc b { font-size: clamp(24px, 2vw, 34px); }

@media (max-width: 1240px) {
  .cp-did.st-m ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .hub-h, .st-who, .st-two { grid-template-columns: 1fr; }
  .xg-clients, .xg-equipes, .xg-partenaires, .xg-sol { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 400px; }
  .xg-clients > :first-child { grid-column: 1 / -1; grid-row: auto; }
  .wh-g { grid-template-columns: 1fr; gap: 8vh; }
  .ct-l a { grid-template-columns: minmax(0, 1fr) 22px; }
  .ct-l .sc-d { grid-column: 1; grid-row: 2; }
  .ct-l .ax { grid-column: 2; grid-row: 1; }
  .xp-mg.c-6, .xp-mg.c-9 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .xp-in { aspect-ratio: 4 / 3.3; border-radius: 16px; }
  .xp-sc, .xp-st.k-browser.n-2 .s-0 { left: 6%; top: 7%; width: 88%; }
  .xp-st.k-browser.n-2 .s-1 { right: 4%; top: 40%; width: 58%; }
  [dir="rtl"] .xp-sc, [dir="rtl"] .xp-st.k-browser.n-2 .s-0 { left: auto; right: 6%; }
  [dir="rtl"] .xp-st.k-browser.n-2 .s-1 { right: auto; left: 4%; }
  .xp-st.k-panel .s-0 { left: 5%; top: 8%; width: 66%; }
  .xp-st.k-panel .s-1 { right: 5%; top: 24%; width: 52%; }
  .xp-st.k-phone .xp-in { aspect-ratio: 1 / 1.05; }
  .xp-st.k-phone .xp-sc { width: 40%; }
  .xp-st.k-phone .s-0 { left: 7%; } .xp-st.k-phone .s-1 { right: 7%; }
  .xp-photo img { border-radius: 14px; }
  .xg-clients, .xg-equipes, .xg-partenaires, .xg-sol { grid-template-columns: 1fr; grid-auto-rows: 380px; }
  .xg-clients > :first-child { grid-column: auto; }
  .xc-x { padding: 6px 22px 22px; }
  .cp-did.st-m ol { grid-template-columns: 1fr; }
  .st-pics { grid-template-columns: 1fr; }
  .xp-mc { min-height: 0; }
  .xp-mg.c-6, .xp-mg.c-9 { grid-template-columns: 1fr; }
}

/* 04/10, phones and tablets: nothing may make the page wider than the screen (the letters of « bousculer », the bricks, the scenes
   sliding sideways, the drifting bands). The page clips what goes past its sides without becoming a scroll container, so the pinned
   scenes keep working; the scenes that move things clip them too. */
html, body { overflow-x: clip; }
.s4 { overflow: clip; }
/* a tablet held upright shows each work's photograph whole above its words, as a phone does (the full-screen crop cut the screens) */
@media (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
  .wk-v { inset: auto 0 auto 0; top: calc(var(--hd) + 6vh); height: auto; aspect-ratio: 16 / 10; }
  .wk::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, #000 66%); }
}
/* 04/10, the opening without physics (« on ne peut même pas glisser dans le cadre »: on a phone the frame and the bricks' floor never
   fit in one screen, and a finger on a brick could not scroll). On a phone, a phone held sideways and with reduced motion, the
   needs are chips inside the frame and a touch chooses one: nothing is dragged, so the page scrolls from anywhere. A chosen need
   straightens up, takes a check and lights the frame. On a wide screen the script lays the same chips on the floor as bricks. */
.bk .tags { position: relative; inset: auto; z-index: auto; padding: 0; margin-top: 8px; }
.bk .tags ul { justify-content: flex-start; gap: 10px; }
.tg-more-li, .bk-tap { display: none; }
.tag .tk { display: none; }
/* the check is a badge on the chip's corner: choosing never changes a chip's width, so the others stay where the finger expects them */
.bk .tag { position: relative; }
.bk .tag .tk { display: grid; place-items: center; position: absolute; top: -8px; inset-inline-end: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--cobalt); color: #fff; box-shadow: 0 0 0 2px var(--page); scale: 0; transition: scale .4s var(--ease); pointer-events: none; }
.bk .tag .tk svg { display: block; width: 11px; height: 11px; }
.bk .tag[aria-pressed="true"] .tk { scale: 1; }
/* on a wide screen the chips wait, unseen, for the physics to lay them on the floor */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) { html.js:not(.phys) .bk .tags { visibility: hidden; } }
@media (pointer: coarse) and (max-height: 520px) { html.js:not(.phys) .bk .tags { visibility: visible; } }
@media (max-width: 640px), (pointer: coarse) and (max-height: 520px), (prefers-reduced-motion: reduce) {
  .bk-desk, .bk-drop, .bk-floor { display: none; }
  .bk-tap { display: block; }
  .bk .tag { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; rotate: var(--r, 0deg); transition: rotate .6s var(--ease), scale .3s var(--ease), box-shadow .3s, background-color .3s, color .3s; }
  .bk .tags li:nth-child(5n+1) .tag { --r: -2deg; }
  .bk .tags li:nth-child(5n+2) .tag { --r: 1.4deg; }
  .bk .tags li:nth-child(5n+3) .tag { --r: -.8deg; }
  .bk .tags li:nth-child(5n+4) .tag { --r: 2.2deg; }
  .bk .tags li:nth-child(5n) .tag { --r: -1.5deg; }
  .bk .tag:active { scale: .94; }
  .bk .tag[aria-pressed="true"] { rotate: 0deg; }
  .bk .tag.pop { animation: tg-pop .55s var(--ease); }
  .bk::before { transition: background .5s; }
  .bk.has::before { background: rgba(20, 85, 245, .07); }
  .tg-more { display: inline-flex; align-items: center; border: 1.5px dashed var(--line-strong); border-radius: 6px; color: var(--fg-2); font-weight: 600; line-height: 1; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color .3s, border-color .3s, scale .3s var(--ease); }
  .tg-more:active { scale: .94; }
  .bk-r { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); gap: 4px 16px; }
  .bk-go, .bk-x { padding: 6px 0; }
  .bk-x { margin-inline-start: auto; }
}
@keyframes tg-pop { 0% { scale: .86; } 55% { scale: 1.07; } 100% { scale: 1; } }
/* on a phone the frame and its chips wait for their entrance (never shown, then hidden, then falling); should the script never
   come, they show after 3 s */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.tap-ready) .bk > i, html.js:not(.tap-ready) .bk-h, html.js:not(.tap-ready) .bk-tap, html.js:not(.tap-ready) .bk .tags li { opacity: 0; animation: tg-show 0s 3s forwards; }
}
@keyframes tg-show { to { opacity: 1; } }
/* reduced motion on a wide screen: the frame grows with its chips if the window is short */
@media (prefers-reduced-motion: reduce) and (min-width: 641px) { .bk { height: auto; min-height: 54vh; } }
@media (prefers-reduced-motion: reduce) { .bk .tag { rotate: none; transition: none; } .bk .tag.pop { animation: none; } }
/* a phone, upright or sideways: the core needs first, the others behind « + 6 »; compact chips, still a thumb wide */
@media (max-width: 640px), (pointer: coarse) and (max-height: 520px) {
  html.js .bk .tags:not(.all) li.x { display: none; }
  html.js .bk .tags:not(.all) .tg-more-li { display: block; }
  .bk .tags ul { gap: 9px 8px; }
  .bk .tag, .tg-more { font-size: 14.5px; padding: 12px 15px; }
  .tg-more { padding: 10.5px 13.5px; }
  .bk-h { font-size: 27px; }
  .bk-s { font-size: 13.5px; line-height: 1.45; }
}
.hd-fr { display: none; width: 16px; height: 16px; flex: none; }
.hd-chip { white-space: nowrap; }
/* the phone: one column, the words then the frame, from the top (centred, the words jumped whenever the frame grew); the
   header's project chip keeps only a frame and the count (its words stay for screen readers) */
@media (max-width: 640px) {
  .s1 { height: auto; min-height: 100svh; display: flex; flex-direction: column; padding: 0 0 26px; }
  .s1-t { padding-top: calc(var(--hd) + 16px); }
  .bk { position: relative; inset: auto; width: auto; height: auto; margin: 26px var(--g) 0; padding: 20px 20px 22px; gap: 6px; flex: none; }
  .bk > i { width: 26px; height: 26px; }
  .hd-chip { gap: 7px; padding: 8px 9px; }
  .hd-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hd-fr { display: block; }
}
/* a phone held sideways: the words on one side, the frame on the other, as tall as its chips (two chips a row, Arabic too) */
@media (min-width: 641px) and (pointer: coarse) and (max-height: 520px) {
  .s1-t { max-width: 52vw; padding-top: calc(var(--hd) + 4vh); }
  .slogan { font-size: clamp(48px, 8.4vw, 76px); }
  [lang="ar"] .slogan { font-size: clamp(46px, 7.6vw, 72px); }
  .bk { width: 40vw; height: auto; top: calc(var(--hd) + 10px); padding: 20px; }
  .bk .tag, .tg-more { font-size: 13.5px; padding: 11px 13px; }
  .tg-more { padding: 9.5px 11.5px; }
}

/* 05/10/2026, the crash-test (src/v6/crash6.js): an address bar, the site analysed in a window beside its score, then its demolition
   on a canvas with the plan of the next site underneath. Dark in both themes, like the work's cinema: a screenshot and a blueprint
   read best on black. Colours of the statuses: green good, amber to improve, red to fix. */
.cx { position: relative; background: #000; color: #fff; padding: 16vh var(--g) 14vh; overflow: clip; }
.cx .kick { padding: 0; color: rgba(255, 255, 255, .62); opacity: 1; }
.cx-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(44px, 6.2vw, 104px); line-height: 1; letter-spacing: -.02em; margin-top: 18px; max-width: 13em; }
.cx-h em { font-style: italic; }
.cx-s { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: rgba(255, 255, 255, .72); max-width: 40em; margin-top: 22px; }
.cx-f { margin-top: 42px; max-width: 900px; }
.cx-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cx-bar { display: flex; align-items: center; gap: 12px; padding: 8px; padding-inline-start: 20px; background: #0d0f14; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: box-shadow .3s; }
.cx-bar:focus-within { box-shadow: inset 0 0 0 2px var(--cobalt); }
.cx-lock { width: 20px; height: 20px; flex: none; color: rgba(255, 255, 255, .5); }
.cx-u { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 500 clamp(17px, 1.5vw, 22px)/1.2 "Plus Jakarta Sans", system-ui, sans-serif; padding: 14px 0; }
.cx-u::placeholder { color: rgba(255, 255, 255, .34); }
[dir="rtl"] .cx-u { text-align: right; }
.cx-f .bt { flex: none; }
.cx.busy .cx-f .bt { opacity: .55; pointer-events: none; }
.cx-msg { margin-top: 12px; color: #ff8a8a; font-size: 15px; }
.cx-msg:empty { display: none; }
.cx-note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .5); max-width: 46em; }
.cx-run { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "stage box" "stage details"; grid-template-rows: auto 1fr; gap: 30px 48px; margin-top: 56px; align-items: start; }
.cx-run[hidden] { display: none; }
.cx-stage { grid-area: stage; position: sticky; top: calc(var(--hd) + 16px); }
.cx-box { grid-area: box; }
.cx-details { grid-area: details; }
/* the window */
.cx-win { position: relative; border-radius: 14px; overflow: hidden; background: #0d0f14; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px -30px rgba(0, 0, 0, .9); }
.cx-wbar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; background: #15171d; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 13px; }
.cx-wbar > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); flex: none; }
.cx-dom { margin-inline: 12px auto; padding: 5px 12px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .82); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58%; direction: ltr; }
.cx-meter { color: rgba(255, 255, 255, .7); white-space: nowrap; }
.cx-meter[hidden] { display: none; }
.cx-meter b { color: #fff; font-variant-numeric: tabular-nums; }
.cx-view { position: relative; display: flex; justify-content: center; background: #060709; }
.cx-shot { display: block; width: 100%; height: auto; max-height: 74vh; object-fit: cover; object-position: top; }
.cx-shot[hidden] { display: none; }
.cx-cv { display: block; touch-action: none; cursor: crosshair; outline: none; user-select: none; -webkit-user-select: none; }
.cx-cv[data-tool="ball"] { cursor: grab; }
.cx-cv:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.cx-scan { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(rgba(125, 162, 255, .09) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgba(125, 162, 255, .09) 1px, transparent 1px) 0 0 / 24px 100%, #071433; }
.cx-scan[hidden] { display: none; }
.cx-scan i { position: absolute; inset-inline: 0; top: 0; height: 2px; background: #7da2ff; animation: cx-scan 1.9s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
.cx-scan i::after { content: ''; position: absolute; inset-inline: 0; bottom: 2px; height: 90px; background: linear-gradient(0deg, rgba(125, 162, 255, .22), rgba(125, 162, 255, 0)); }
@keyframes cx-scan { from { top: 0; } to { top: calc(100% - 2px); } }
.cx-break { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; z-index: 2; display: inline-flex; align-items: center; gap: 12px; padding: 17px 24px; border-radius: 6px; background: #fff; color: #0a0b0d; font-weight: 700; font-size: 17px; line-height: 1; white-space: nowrap; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .7); transition: scale .25s var(--ease); }
.cx-break[hidden] { display: none; }
.cx-break:hover { scale: 1.04; }
.cx-break:active { scale: .97; }
.cx-break .ci { width: 22px; height: 22px; transform-origin: 30% 75%; animation: cx-knock 1.8s var(--ease) infinite; }
@keyframes cx-knock { 0%, 58%, 100% { rotate: 0deg; } 68% { rotate: -30deg; } 80% { rotate: 10deg; } 88% { rotate: 0deg; } }
/* the steps, then the score */
.cx-k { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.cx-steps { margin-top: 18px; display: grid; gap: 14px; }
.cx-steps li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .38); font-size: 16px; line-height: 1.4; transition: color .4s; }
.cx-steps li i { position: relative; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); flex: none; }
.cx-steps li.now { color: #fff; }
.cx-steps li.now i { box-shadow: inset 0 0 0 1.5px #7da2ff; animation: cx-pulse .9s ease-in-out infinite alternate; }
.cx-steps li.ok { color: rgba(255, 255, 255, .85); }
.cx-steps li.ok i { background: #7da2ff; box-shadow: none; }
.cx-steps li.ok i::after { content: ''; position: absolute; left: 5px; top: 4.5px; width: 8px; height: 4.5px; border: solid #071433; border-width: 0 0 2px 2px; rotate: -45deg; }
@keyframes cx-pulse { to { box-shadow: inset 0 0 0 5px rgba(125, 162, 255, .45); } }
.cx-score { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.cx-n { font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(100px, 9vw, 156px); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cx-of { font-size: 22px; color: rgba(255, 255, 255, .5); }
.cx.lo .cx-n { color: #ff8a8a; }
.cx-v { font-family: "Instrument Serif", serif; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.15; margin-top: 12px; }
.cx-weak { margin-top: 10px; color: rgba(255, 255, 255, .66); font-size: 15px; }
.cx-cats { margin-top: 26px; display: grid; gap: 12px; }
.cx-cats li { display: grid; grid-template-columns: minmax(7em, 10em) 1fr 2.4em; align-items: center; gap: 14px; font-size: 15px; }
.cx-cats li span { color: rgba(255, 255, 255, .86); }
.cx-cats li i { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.cx-cats li i::after { content: ''; position: absolute; inset: 0; border-radius: 3px; background: currentColor; transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 1.3s var(--ease); }
[dir="rtl"] .cx-cats li i::after { transform-origin: right center; }
.cx-cats li b { color: #fff; text-align: end; font-variant-numeric: tabular-nums; }
.cx-cats .good, .cx-c.good > i { color: #2bd17e; }
.cx-cats .warn, .cx-c.warn > i { color: #ffb547; }
.cx-cats .bad, .cx-c.bad > i { color: #ff6b6b; }
.cx-at { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .45); }
/* the details */
.cx-cols { display: grid; gap: 30px; }
.cx-col h3 { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .6); margin: 0 0 14px; }
.cx-col ul { display: grid; gap: 14px; }
.cx-c { display: grid; grid-template-columns: 10px 1fr; gap: 12px; align-items: start; }
.cx-c > i { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: currentColor; }
.cx-c b { display: block; font-weight: 600; font-size: 16px; line-height: 1.4; }
.cx-c span { display: block; color: rgba(255, 255, 255, .62); font-size: 14.5px; line-height: 1.5; margin-top: 3px; }
.cx-ok { gap: 9px !important; }
.cx-ok .cx-c b { font-weight: 500; color: rgba(255, 255, 255, .8); font-size: 15px; }
.cx-tech { margin-top: 28px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .62); }
.cx-tech b { color: #fff; font-weight: 600; }
.cx-phone { margin: 0 0 30px; width: 168px; }
.cx-phone img { display: block; width: 100%; aspect-ratio: 390 / 700; object-fit: cover; object-position: top; border-radius: 24px; box-shadow: 0 0 0 6px #1b1d23, 0 0 0 7px rgba(255, 255, 255, .14); }
.cx-phone figcaption { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.cx-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.cx-note2 { margin-top: 16px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .42); }
/* the tools */
.cx-tools { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cx-tools[hidden] { display: none; }
.cx-t { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; min-width: 48px; padding: 0 16px; border-radius: 8px; background: #15171d; color: rgba(255, 255, 255, .82); font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .2s, color .2s, box-shadow .2s, scale .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.cx-t:hover { background: #1d2029; color: #fff; }
.cx-t:active { scale: .95; }
.cx-t[aria-pressed="true"] { background: #fff; color: #0a0b0d; box-shadow: none; }
.cx-t .ci { width: 22px; height: 22px; flex: none; }
.cx-sep { flex: 1; }
.cx-snd .x { display: none; }
.cx-snd.off .x { display: inline; }
.cx-snd.off .w { display: none; }
.cx-hint { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .55); min-height: 1.5em; }
/* the end */
.cx-end { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); text-align: center; }
.cx-end-in { max-width: 560px; }
.cx-end-n { font-family: "Instrument Serif", serif; font-size: clamp(64px, 8vw, 120px); line-height: .9; font-variant-numeric: tabular-nums; }
.cx-end-h { font-family: "Instrument Serif", serif; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; margin-top: 10px; }
.cx-end-p { color: rgba(255, 255, 255, .76); margin-top: 14px; font-size: 16px; line-height: 1.55; }
.cx-end-r { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 26px; }
.cx-sh { display: inline-flex; align-items: center; gap: 9px; height: 51px; padding: 0 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); color: #fff; font-weight: 600; }
.cx-sh .ci { width: 20px; height: 20px; }
.cx-keep { color: rgba(255, 255, 255, .7); text-decoration: underline; text-underline-offset: 4px; padding: 10px 6px; font-weight: 500; }
/* its page: the breadcrumb first, then the same section */
.cx-pg { padding-top: calc(var(--hd) + 7vh); }
.cx-pg .bc { margin-bottom: 26px; color: rgba(255, 255, 255, .6); }
.cxp .sp-faq { background: var(--page); }
[lang="ar"] .cx-h, [lang="ar"] .cx-v, [lang="ar"] .cx-end-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; font-style: normal; letter-spacing: 0; }
[lang="ar"] .cx-h { font-size: clamp(38px, 5.4vw, 88px); line-height: 1.2; }
[lang="ar"] .cx-h em { font-style: normal; color: #7da2ff; }
[lang="ar"] .cx-v { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.4; }
@media (max-width: 1000px) {
  .cx-run { grid-template-columns: minmax(0, 1fr); grid-template-areas: "box" "stage" "details"; grid-template-rows: none; }
  .cx-stage { position: relative; top: auto; }
}
@media (max-width: 760px) {
  .cx { padding: 12vh var(--g) 10vh; }
  .cx-f { margin-top: 30px; }
  .cx-bar { flex-wrap: wrap; padding: 6px; padding-inline-start: 16px; }
  .cx-u { padding: 13px 0; font-size: 17px; }
  .cx-f .bt { width: 100%; justify-content: center; }
  .cx-run { margin-top: 40px; gap: 26px; }
  .cx-scan { aspect-ratio: 4 / 5; }
  .cx-n { font-size: 112px; }
  .cx-cats li { grid-template-columns: 7.6em 1fr 2.2em; font-size: 14px; gap: 10px; }
  .cx-break { bottom: 18px; padding: 15px 20px; font-size: 16px; }
  .cx-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cx-t[data-tool] { flex-direction: column; gap: 4px; height: 62px; padding: 0 4px; font-size: 12px; }
  .cx-sep { display: none; }
  .cx-phone { display: none; }
  .cx-end { padding: 16px; }
  .cx-end-n { font-size: 56px; }
  .cx-end-h { font-size: 24px; }
  .cx-end-p { font-size: 14px; margin-top: 8px; }
  .cx-end-r { margin-top: 16px; gap: 8px; }
  .cx-end .bt { padding: 14px 16px; font-size: 14px; }
  .cx-sh { height: 46px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cx-scan i, .cx-break .ci, .cx-steps li.now i { animation: none; } }
.cx-run, .cx-win { scroll-margin-top: calc(var(--hd) + 12px); }
.cx-all { margin-top: 12px; color: rgba(255, 255, 255, .7); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; }
.cx-ok li[hidden] { display: none; }
.cx-mark { position: absolute; inset-inline-end: var(--g); top: 15vh; width: clamp(84px, 10vw, 168px); height: auto; animation: cx-turn 16s linear infinite; }
.cx-pg .cx-mark { top: calc(var(--hd) + 7vh); }
@keyframes cx-turn { to { rotate: 360deg; } }
@media (max-width: 760px) { .cx-mark { width: 58px; top: 11vh; } .cx-pg .cx-mark { top: calc(var(--hd) + 5vh); } }
@media (prefers-reduced-motion: reduce) { .cx-mark { animation: none; } }
.cx-under { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-top: 10px; }
.cx-under .cx-hint { margin-top: 0; }
.cx-go2 { font-size: 15px; }
.cx-go2[hidden] { display: none; }
@media (max-width: 760px) { .cx-fin span { display: none; } .cx-go2 { font-size: 14px; } }
.cx-meter { margin-inline-start: auto; }
.cx-wb { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: rgba(255, 255, 255, .72); flex: none; transition: background .2s, color .2s; }
.cx-wb:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.cx-wb .ci { width: 18px; height: 18px; }
.cx-meter + .cx-wb { margin-inline-start: 8px; }
.cx-t[data-tool] { padding: 0 14px; }
@media (max-width: 760px) { .cx-tools { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cx-fin { flex-direction: column; gap: 4px; height: 62px; padding: 0 4px; font-size: 12px; } .cx-fin span { display: inline; } .cx-dom { max-width: 44%; } }

/* 05/10/2026, on a phone: « Démarrer un projet » held at the bottom once the opening is passed (common6.js mobileCta) */
.mcta { display: none; }
@media (max-width: 640px) {
  .mcta { display: flex; justify-content: center; position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 17px 20px; font-size: 16px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14); transform: translateY(calc(100% + 40px)); visibility: hidden; transition: transform .55s var(--ease), visibility 0s linear .55s; }
  .mcta.on { transform: none; visibility: visible; transition: transform .55s var(--ease), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) { .mcta { transition: none; } }
/* the report by email (05/10/2026) */
.cx-mail { margin-top: 26px; padding: 18px; border-radius: 12px; background: #0d0f14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.cx-mail-h { font-weight: 600; font-size: 16px; }
.cx-mail-r { display: flex; gap: 8px; margin-top: 12px; }
.cx-mail-r input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border-radius: 8px; border: 0; outline: 0; background: #15171d; color: #fff; font: 500 16px "Plus Jakarta Sans", system-ui, sans-serif; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cx-mail-r input:focus { box-shadow: inset 0 0 0 2px var(--cobalt); }
.cx-mail-r input::placeholder { color: rgba(255, 255, 255, .34); }
.cx-mail-r .bt { flex: none; padding: 0 20px; height: 50px; }
.cx-mail-r .bt:disabled { opacity: .55; }
.cx-mail-c { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .82); cursor: pointer; }
.cx-mail-c input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--cobalt); }
.cx-mail-n { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .5); }
.cx-mail-n a { color: rgba(255, 255, 255, .7); text-decoration: underline; text-underline-offset: 3px; }
.cx-mail-m { margin-top: 10px; font-size: 14px; }
.cx-mail-m:empty { display: none; }
.cx-mail-m.ok { color: #57e0a0; }
.cx-mail-m.err { color: #ff8a8a; }

/* 05/10/2026 evening: the teaser after the report, ten tools, the whole screen (crash6.js) */
.cx-cv.lock { cursor: pointer; }
.cx-inv { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding: 26px 22px 24px; text-align: center; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .55) 52%, rgba(0, 0, 0, .9)); pointer-events: none; }
.cx-inv-in { max-width: 520px; pointer-events: auto; }
.cx-inv-h { font-family: "Instrument Serif", serif; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; color: #fff; }
.cx-inv-p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.cx-inv-go { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 18px 26px; border-radius: 6px; background: #fff; color: #0a0b0d; font-size: 17px; font-weight: 700; line-height: 1; transition: scale .25s var(--ease); }
.cx-inv-go::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); animation: cx-ping 1.8s var(--ease) infinite; pointer-events: none; }
@keyframes cx-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 80%, 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); } }
.cx-inv-go:hover { scale: 1.04; }
.cx-inv-go:active { scale: .97; }
.cx-inv-go .ci { width: 22px; height: 22px; transform-origin: 30% 75%; animation: cx-knock 1.8s var(--ease) infinite; }
.cx-inv-t { display: flex; justify-content: center; gap: 12px; margin-top: 18px; color: rgba(255, 255, 255, .62); }
.cx-inv-t .ci { width: 20px; height: 20px; animation: cx-pop 2.6s var(--ease) infinite; }
.cx-inv-t .ci:nth-child(2) { animation-delay: .12s; } .cx-inv-t .ci:nth-child(3) { animation-delay: .24s; } .cx-inv-t .ci:nth-child(4) { animation-delay: .36s; } .cx-inv-t .ci:nth-child(5) { animation-delay: .48s; }
.cx-inv-t .ci:nth-child(6) { animation-delay: .6s; } .cx-inv-t .ci:nth-child(7) { animation-delay: .72s; } .cx-inv-t .ci:nth-child(8) { animation-delay: .84s; } .cx-inv-t .ci:nth-child(9) { animation-delay: .96s; } .cx-inv-t .ci:nth-child(10) { animation-delay: 1.08s; }
@keyframes cx-pop { 0%, 30%, 100% { translate: 0 0; color: rgba(255, 255, 255, .62); } 12% { translate: 0 -6px; color: #fff; } }
[lang="ar"] .cx-inv-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.35; }
/* ten tools: five a row on a computer, a row to swipe on a phone */
.cx-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cx-tools .cx-t { padding: 0 8px; gap: 7px; height: 46px; font-size: 13.5px; justify-content: flex-start; white-space: nowrap; }
.cx-tools .cx-t span { overflow: hidden; text-overflow: ellipsis; }
.cx-wb.cx-fin { width: auto; padding: 0 10px; gap: 6px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; }
.cx-wb.cx-fin .ci { width: 17px; height: 17px; }
@media (max-width: 760px) {
  .cx-tools { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  [dir="rtl"] .cx-tools { -webkit-mask-image: linear-gradient(270deg, #000 86%, transparent); mask-image: linear-gradient(270deg, #000 86%, transparent); }
  .cx-tools::-webkit-scrollbar { display: none; }
  .cx-tools .cx-t { flex: 0 0 72px; flex-direction: column; justify-content: center; gap: 4px; height: 62px; padding: 0 4px; font-size: 11.5px; scroll-snap-align: start; }
  .cx-wb.cx-fin span { display: none; }
  .cx-wb.cx-fin { width: 32px; padding: 0; justify-content: center; }
  .cx-inv { padding: 18px 14px 16px; }
  .cx-inv-h { font-size: 26px; }
  .cx-inv-p { font-size: 13.5px; margin-top: 6px; }
  .cx-inv-go { margin-top: 12px; padding: 15px 20px; font-size: 16px; }
  .cx-inv-t { gap: 8px; margin-top: 12px; }
  .cx-inv-t .ci { width: 17px; height: 17px; }
}
/* the whole screen: the window takes what the screen has, the tools stay under the thumb */
html.cx-lock, html.cx-lock body { overflow: hidden; overscroll-behavior: none; }
.cx-stage.cx-full { position: fixed; inset: 0; top: 0; z-index: 95; display: flex; flex-direction: column; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); background: #000; }
.cx-full .cx-win { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cx-full .cx-view { flex: 1; min-height: 0; align-items: center; }
.cx-full .cx-tools { margin-top: 0; flex: none; }
.cx-full .cx-under { margin-top: 0; flex: none; }
@media (min-width: 761px) { .cx-stage.cx-full { padding: 18px max(18px, calc((100vw - 1400px) / 2)); } }
@media (prefers-reduced-motion: reduce) { .cx-inv-go::after, .cx-inv-go .ci, .cx-inv-t .ci { animation: none; } }
@media (max-width: 760px) { .cx-full .cx-wbar > i { display: none; } .cx-full .cx-dom { margin-inline-start: 0; max-width: 34%; } }

/* ===== 07/10/2026, crash dev: the crash-test's story, calm motion, contrast, the phone's toolbar (crash6.js) ===== */
/* no loop at rest: the scan is 2 px of cobalt without trail nor grid, three passes at most; the steps tick without pulsing; the hammer
   knocks twice then rests; no ping ring, no hopping icons; the marker turns only while a run is going */
.cx-scan { background: #071433; }
.cx-scan i { background: #3d74ff; animation: cx-scan 1.2s cubic-bezier(.65, 0, .35, 1) 3 alternate both; }
.cx-scan i::after { content: none; }
.cx-steps li.now i { animation: none; box-shadow: inset 0 0 0 2px #7da2ff; }
.cx-break .ci, .cx-inv-go .ci { animation-iteration-count: 2; }
.cx-inv-go::after { content: none; }
.cx-inv-t .ci { animation: none; }
.cx-mark { animation-play-state: paused; }
.cx.busy .cx-mark, .cx.playing .cx-mark { animation-play-state: running; }
/* contrast of 4.5:1 or more on black */
.cx-steps li { color: rgba(255, 255, 255, .58); }
.cx-at, .cx-note2 { color: rgba(255, 255, 255, .64); }
.cx-u::placeholder, .cx-mail-r input::placeholder { color: rgba(255, 255, 255, .52); }
.cx-cats li i::after { transition: transform .6s var(--ease) var(--d, 0s); }
/* the first facts, the weights under the score, what the izak team would fix first */
.cx-fk { margin-top: 26px; }
.cx-facts { margin-top: 12px; display: grid; gap: 8px; }
.cx-facts .cx-c b { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .86); }
.cx-w { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .66); max-width: 34em; }
.cx-first { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); }
.cx-first h3 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.cx-first ol { display: grid; gap: 14px; }
.cx-first .cx-c { grid-template-columns: 10px 1fr auto; }
.cx-pts { font-style: normal; font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }
.cx-details .cx-mail { margin-top: 30px; }
/* the hint in the window's bar on a computer */
.cx-wbar .cx-hint { flex: 1; min-width: 0; margin: 0; min-height: 0; font-size: 13px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-wbar .cx-hint:empty + .cx-meter { margin-inline-start: auto; }
/* the invitation on a solid band, legible over any site */
.cx-inv { align-items: flex-end; padding: 0; background: none; }
.cx-inv-in { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 22px; padding: 18px 22px; background: rgba(0, 0, 0, .9); border-top: 1px solid rgba(255, 255, 255, .14); text-align: start; }
.cx-inv-h { font-size: clamp(24px, 2.2vw, 34px); }
.cx-inv-p { color: rgba(255, 255, 255, .8); }
.cx-inv-go { margin-top: 0; }
.cx-inv-t { grid-column: 1 / -1; justify-content: flex-start; margin-top: 0; }
/* the end: scrolls when the window is short; the first fixes and the ways on */
.cx-end { overflow-y: auto; align-items: safe center; }
.cx-end-k { margin-top: 18px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.cx-end-f { margin: 8px auto 0; display: grid; gap: 4px; max-width: 30em; font-size: 15px; line-height: 1.45; color: #fff; }
.cx-end-l { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 18px; font-size: 15px; }
.cx-end-l .lnk { color: #fff; }
/* while playing, the bar keeps its room for the domain, the hint, the meter and the buttons (no window dots) */
.cx.playing .cx-wbar > i { display: none; }
.cx.playing .cx-dom { margin-inline-start: 0; }
.cx-end-n { font-size: clamp(48px, 5vw, 84px); }
.cx-end-h { font-size: clamp(24px, 2.4vw, 36px); }
.cx-end-r { margin-top: 18px; }
/* numbers and percentages keep their order in Arabic */
.cx-meter b, .cx-end-n { direction: ltr; unicode-bidi: isolate; }
/* the whole screen is a dialog: the focus shows */
.cx-stage :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cx-cv:focus-visible { outline-offset: -2px; }
@media (max-width: 760px) {
  /* the marker above the title, never over it, in every language, on the home and on its page */
  .cx-mark, .cx-pg .cx-mark { position: static; display: block; width: 48px; margin: 0 0 18px; margin-inline-start: auto; }
  .cx-pg .cx-mark { margin-top: 0; }
  .cx-w { font-size: 13px; }
  .cx-first .cx-c span { font-size: 14px; }
  /* the invitation stacks */
  .cx-inv-in { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 16px; }
  .cx-inv-h { font-size: 22px; }
  .cx-inv-go { justify-self: start; }
  /* the tools: two rows of five, labels of 12 px that wrap */
  .cx-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  [dir="rtl"] .cx-tools { -webkit-mask-image: none; mask-image: none; }
  .cx-tools .cx-t { flex: none; min-width: 0; height: 58px; padding: 2px 2px; gap: 3px; font-size: 12px; line-height: 1.1; white-space: normal; text-align: center; }
  .cx-tools .cx-t span { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; hyphens: auto; }
  .cx-tools .cx-t .ci { width: 20px; height: 20px; }
  /* under the tools: the hint, then « Terminer » in words and the way out */
  .cx-under { align-items: center; gap: 6px 12px; }
  .cx-under .cx-hint { flex: 1 0 100%; font-size: 13px; min-height: 1.4em; color: rgba(255, 255, 255, .7); }
  .cx-fin2 { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); color: #fff; font-size: 14px; font-weight: 600; }
  .cx-fin2 .ci { width: 17px; height: 17px; }
  .cx-full .cx-ml { display: none; }
  .cx-full .cx-dom { max-width: 46%; }
  .cx-end-n { font-size: 44px; }
  .cx-end-h { font-size: 22px; }
  .cx-end-k { margin-top: 12px; }
  .cx-end-f { font-size: 14px; }
  .cx-end-r { margin-top: 14px; }
  .cx-end-l { font-size: 14px; margin-top: 10px; gap: 6px 18px; }
}
@media (prefers-reduced-motion: reduce) { .cx-scan i { animation: none; } .cx-cats li i::after { transition: none; } }
/* ===== end crash dev (07/10) ===== */

/* ===== 07/10/2026, home dev: global fixes (root + preview) — header, phone bar, a11y, contrast ===== */
html { scroll-padding-top: calc(var(--hd) + 16px); }
main:focus { outline: none; }
/* « Bousculez les mots »: only where the words can be pushed (a fine pointer, motion allowed), and readable on cobalt (4.8:1) */
.s4 .hint { opacity: .9; }
html:not(.fine) .s4 .hint { display: none; }
@media (prefers-reduced-motion: reduce) { .s4 .hint { display: none; } }
.s4 :focus-visible, .s7 .bt:focus-visible { outline-color: #fff; }
/* the kicks start where their titles start (they were padded twice) and read at 4.5:1 or more */
.s5-hd .kick, .s5c .kick { padding: 0; }
.s5c .kick { opacity: 1; }
.b-demo { color: rgba(255, 255, 255, .6); }
.cx-pg .bc [aria-current] { color: rgba(255, 255, 255, .85); }
/* the header: « Analyse gratuite » on wide screens (the phone menu has it too); over cobalt it takes the section's tone, no navy band */
.hd.on-cob { color: #fff; }
.hd.on-cob::before { background: rgba(20, 85, 245, .94); }
.hd.on-cob:not(.solid)::before { opacity: 0; }
.hd.on-cob .hd-go { background: #fff; color: var(--ink); }
.hd.on-cob .hd-go:hover { background: #e8edf8; }
.hd.on-cob :focus-visible { outline-color: #fff; }
/* the phone bar: white over a cobalt section; the page keeps room for it when a focused element scrolls into view */
@media (max-width: 640px) {
  html { scroll-padding-bottom: 96px; }
  .mcta.w { background: #fff; color: var(--ink); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .45); }
  .mcta.w:hover { background: #eef1f7; }
}

/* ===== 07/10/2026, home dev: the home's next story after .s3 (main.v7, the preview until the switch) ===== */
/* the index mark: a cobalt ↘, two digits, the section's name (it replaces .kick, aligned with the title) */
.ix { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .02em; line-height: 1.4; color: var(--fg-2); }
.ix-a { width: 14px; height: 14px; flex: none; color: var(--cobalt); }
.ix-n { color: var(--fg); font-variant-numeric: tabular-nums; }
[dir="rtl"] .ix-a { transform: scaleX(-1); }
[lang="ar"] .ix { letter-spacing: 0; }
[data-theme="dark"] .ix-a { color: #4d84ff; }
/* the open frame: 30 px brackets, 18 px on a phone, in the text's colour */
.v7 .frame > i { border-color: currentColor; }
@media (max-width: 760px) { .v7 .frame > i, .ns-fr > i { width: 18px; height: 18px; } }
/* surfaces: cobalt opens (s4) and closes (s7); in dark every section is black, the adjacent ones split by a hairline */
[data-theme="dark"] .v7 .cx, [data-theme="dark"] .v7 .s5, [data-theme="dark"] .v7 .n-apps { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }

/* 4, the hinge: under the line, the way on to 01 */
.s4 .ix, .s4 .ix-a, .s4 .ix-n { color: #fff; }
.s4-nx { display: inline-flex; margin-top: 40px; padding: 10px 0; }
.s4-nx .ix-l { border-bottom: 1px solid rgba(255, 255, 255, .5); padding-bottom: 2px; transition: border-color .2s; }
.s4-nx:hover .ix-l { border-color: #fff; }
@media (max-width: 640px) { .v7 .s4 { padding: 12vh var(--g); } }

/* 01, « Votre métier »: the head here; the twelve-row index is in the block « 07/10 afternoon » at the end of this file */
.n-sec { background: var(--page); color: var(--fg); padding: 14vh var(--g) 12vh; }
.ns-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(36px, 4.2vw, 76px); line-height: 1.02; letter-spacing: -.02em; max-width: 17em; margin-top: 18px; }
.ns-s { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--fg-2); margin-top: 18px; max-width: 34em; }
[lang="ar"] .ns-h, [lang="ar"] .ns-n, [lang="ar"] .na-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.3; }

/* 03, « Votre site web »: flat tiles, real pictures, all inside one open frame (the bento's look stays on the root until the switch) */
.v7 .s5 { background: var(--page); color: var(--fg); padding: 14vh var(--g) 12vh; }
.v7 .s5-hd .ix { grid-column: 1 / -1; }
.w7-f { margin-top: 8vh; padding: clamp(14px, 2vw, 28px); color: var(--fg); }
.w7 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.w7-t { display: flex; flex-direction: column; min-width: 0; border-radius: 4px; overflow: hidden; background: var(--page); box-shadow: inset 0 0 0 1px var(--line); }
.w7-a { grid-column: 1 / span 4; } .w7-b { grid-column: 5 / span 2; } .w7-c, .w7-d, .w7-e { grid-column: span 2; }
.w7-v { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tile); border-bottom: 1px solid var(--line); }
.w7-b .w7-v { aspect-ratio: auto; flex: 1; min-height: 320px; }
.w7-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.w7-ph { position: absolute; left: 50%; top: 8%; height: 104%; aspect-ratio: 9 / 19.4; transform: translateX(-50%); padding: 1.2%; border-radius: 13% / 6%; background: #0c0c0e; box-shadow: 0 0 0 1px var(--line-strong); }
.w7-phs { width: 100%; height: 100%; overflow: hidden; border-radius: 12% / 5.6%; background: #111; }
.w7-tall { display: block; width: 100%; height: auto; }
.w7-kit { position: absolute; left: 7%; right: 7%; top: 9%; }
.w7-kit .dev { border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.w7-x { padding: 18px 22px 22px; }
.w7-x h3 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.w7-a .w7-x h3 { font-size: clamp(22px, 2vw, 32px); }
.w7-x p { font-size: 15px; line-height: 1.5; color: var(--fg-2); margin-top: 6px; max-width: 36em; }
.w7-l { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding-bottom: 2px; font-size: 14px; font-weight: 600; border-bottom: 1px solid currentColor; }
.w7-l .ax { width: 16px; height: 16px; }
.w7-demo { display: block; margin-top: 12px; font-size: 12px; color: var(--fg-3); }
.v7 .s5 .care { margin-top: 18px; background: var(--tile); color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; }
.v7 .s5 .care b { color: var(--fg); }
.v7 .s5 .care .ax { color: var(--accent); }
@media (max-width: 760px) {
  .v7 .s5 { padding: 11vh var(--g) 9vh; }
  .v7 .s5-h { font-size: clamp(46px, 13vw, 64px); }
  .w7-f { margin-top: 5vh; padding: 10px; }
  .w7 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .w7-a, .w7-b, .w7-c { grid-column: 1 / -1; }
  .w7-d, .w7-e { grid-column: auto; }
  .w7-b .w7-v { flex: none; height: 250px; min-height: 0; }
  .w7-x { padding: 14px 16px 16px; }
  .w7-d .w7-x, .w7-e .w7-x { padding: 12px 12px 14px; }
  .w7-d .w7-x h3, .w7-e .w7-x h3 { font-size: 16px; }
  .w7-d .w7-x p, .w7-e .w7-x p { font-size: 13px; }
}

/* 04, « Vos applications »: four screens of the kit, each in the open frame, then the still index of what we build (always dark) */
.v7 .n-apps { --fg: #fff; --fg-2: rgba(255, 255, 255, .74); --fg-3: rgba(255, 255, 255, .6); --line: rgba(255, 255, 255, .16); --line-strong: rgba(255, 255, 255, .34); --tile: #121318; --accent: #7da2ff;
  background: #000; color: #fff; padding: 14vh var(--g) 12vh; }
.na-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(40px, 5.2vw, 96px); line-height: 1; letter-spacing: -.02em; max-width: 14em; margin-top: 18px; }
.na-s { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--fg-2); margin-top: 18px; max-width: 34em; }
.na-g { list-style: none; margin: 8vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6vh 2vw; }
.na-c { min-width: 0; }
.v7 .na-v { padding: 12px; color: #fff; }
.na-sc { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 2px; }
.na-sc .dev { border-radius: 0; box-shadow: none; }
.na-demo { margin-top: 10px; font-size: 12px; color: var(--fg-3); }
.na-n { margin-top: 12px; font-size: clamp(20px, 1.6vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.na-n a { display: inline-flex; align-items: center; gap: 10px; transition: color .2s; }
.na-n a:hover { color: var(--accent); }
.na-n .ax { width: 18px; height: 18px; }
.na-d { font-size: 15px; line-height: 1.5; color: var(--fg-2); margin-top: 6px; }
.na-go { margin-top: 14px; font-size: 15px; }
.na-caps { margin-top: 10vh; }
.na-ch { font-size: 14px; font-weight: 600; color: var(--fg-2); }
.na-cl { list-style: none; margin: 3vh 0 0; padding: 0; columns: 3; column-gap: 2.4vw; }
.na-cl li { position: relative; break-inside: avoid; }
.na-cl li::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); transform: scaleX(var(--hl, 1)); transform-origin: left; }
[dir="rtl"] .na-cl li::before { transform-origin: right; }
.na-cl a, .na-cl span { display: block; padding: 11px 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.4; }
.na-cl span { color: var(--fg-2); }
.na-cl a { font-weight: 600; transition: color .2s; }
.na-cl a:hover { color: var(--accent); }
.v7 .n-apps .care { margin-top: 7vh; background: var(--tile); color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; }
.v7 .n-apps .care b { color: #fff; }
.v7 .n-apps .care .ax { color: var(--accent); }
.na-all { margin-top: 5vh; }
@media (max-width: 1000px) { .na-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .na-cl { columns: 2; } }
@media (max-width: 640px) {
  .v7 .n-apps { padding: 11vh var(--g) 9vh; }
  .na-g { grid-template-columns: 1fr; gap: 6vh; margin-top: 6vh; }
  .na-sc { aspect-ratio: 16 / 9; }
  .na-cl a, .na-cl span { padding: 8px 0; font-size: 14px; }
}

/* 05, the end, cobalt in both themes, in the open frame: start, write to the team, the e-mail */
.v7 .s7 { background: var(--cobalt); color: #fff; padding: 14vh var(--g); }
.v7 .s7-f { max-width: 1500px; margin: 0 auto; color: #fff; }
.v7 .s7 .ix { justify-content: center; margin-bottom: 26px; color: rgba(255, 255, 255, .9); }
.v7 .s7 .ix-a, .v7 .s7 .ix-n { color: #fff; }
.v7 .s7-sub { color: rgba(255, 255, 255, .9); }
.v7 .s7 .bt.big:not(.ghost) { background: #fff; color: var(--ink); }
.v7 .s7 .bt.big:not(.ghost):hover { background: #e8edf8; }
.v7 .s7 .bt.ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.v7 .s7 .bt.ghost:hover { background: rgba(255, 255, 255, .12); }
.v7 .s7 .ctas { gap: 14px 22px; }
.v7 .s7-mail { color: #fff; }
@media (max-width: 640px) { .v7 .s7 { padding: 10vh var(--g); } .v7 .s7 .ctas { flex-direction: column; } .v7 .s7 .bt.big { width: 100%; justify-content: center; } }

/* ===== shell (07/10): the footer, the legal pages, the page not found ===== */
/* the footer: black in both themes (a hairline on top), the brand's open frame (4 white brackets) around izak's wordmark, the slogan,
   the address and izak's accounts; the link groups are <details> (closed on phones by common6.js, the izak group excepted); no motion */
.ft { background: #000; color: #fff; padding: clamp(56px, 10vh, 120px) var(--g) 28px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ft-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 36px 56px; padding: clamp(28px, 4vw, 60px); margin-bottom: clamp(56px, 9vh, 104px); }
.ft-top > i { position: absolute; width: 30px; height: 30px; border: 0 solid #fff; pointer-events: none; }
.ft-top > i:nth-child(1) { top: 0; inset-inline-start: 0; border-top-width: 2px; border-inline-start-width: 2px; }
.ft-top > i:nth-child(2) { top: 0; inset-inline-end: 0; border-top-width: 2px; border-inline-end-width: 2px; }
.ft-top > i:nth-child(3) { bottom: 0; inset-inline-start: 0; border-bottom-width: 2px; border-inline-start-width: 2px; }
.ft-top > i:nth-child(4) { bottom: 0; inset-inline-end: 0; border-bottom-width: 2px; border-inline-end-width: 2px; }
.ft-logo { display: inline-block; color: #fff; }
.ft-logo .logo { width: clamp(92px, 8vw, 132px); height: auto; display: block; }
.ft-slo { margin: clamp(18px, 2.4vw, 30px) 0 0; font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(46px, 7vw, 120px); line-height: .95; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
[lang="ar"] .ft-slo { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.3; font-size: clamp(34px, 4.8vw, 82px); }
.ft-ct { display: grid; justify-items: end; gap: 14px; }
.ft-mail { color: #fff; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 6px; min-height: 44px; display: inline-flex; align-items: center; }
.ft-mail:hover { text-decoration-color: #fff; }
.ft-so { list-style: none; margin: 0 -6px; padding: 0; display: flex; gap: 2px; }
.ft-t { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; }
.ft-t svg { width: 32px; height: 32px; display: block; }
.ft-t .t { fill: var(--cobalt); transition: fill .2s; }
.ft-t .g { color: #fff; transition: color .2s; }
.ft-t:hover .t, .ft-t:focus-visible .t { fill: #fff; }
.ft-t:hover .g, .ft-t:focus-visible .g { color: #0a0b0d; }
.ft a:focus-visible, .ft summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ft-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 30px; }
.ft-d summary { list-style: none; display: block; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .55); margin-bottom: 16px; }
.ft-d summary::-webkit-details-marker { display: none; }
.ft-ls { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.ft-ls a { color: rgba(255, 255, 255, .85); } .ft-ls a:hover { color: #fff; }
.ft-ls .ft-sub { margin-top: 14px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .55); }
@media (min-width: 641px) { .ft-d summary { pointer-events: none; cursor: default; } }
.ft-l { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-top: clamp(56px, 9vh, 104px); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: rgba(255, 255, 255, .55); }
.ft-l > span { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.ft-l a { color: rgba(255, 255, 255, .7); display: inline-flex; align-items: center; min-height: 32px; }
.ft-l a:hover, .ft-lg a[aria-current] { color: #fff; }
@media (max-width: 1240px) { .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ft-top { grid-template-columns: minmax(0, 1fr); align-items: start; } .ft-ct { justify-items: start; } .ft-so { margin-inline: -6px 0; } }
@media (max-width: 640px) {
  .ft { padding-top: 48px; }
  .ft-top { padding: 26px 22px; margin-bottom: 36px; gap: 22px; }
  .ft-top > i { width: 18px; height: 18px; }
  .ft-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ft-d { border-top: 1px solid rgba(255, 255, 255, .14); }
  .ft-d:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .ft-d summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0; font-size: 16px; color: #fff; cursor: pointer; }
  .ft-d summary::after { content: ''; width: 9px; height: 9px; border: solid rgba(255, 255, 255, .7); border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease); }
  .ft-d[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .ft-ls { gap: 0; padding-bottom: 14px; }
  .ft-ls a { display: flex; align-items: center; min-height: 44px; }
  .ft-ls .ft-sub { margin-top: 8px; }
  .ft-l { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 18px; padding-top: 0; border-top: 0; }
  .ft-l > span { gap: 0 18px; }
  .ft-l a { min-height: 44px; }
}

/* « العربية » in the language lists: the Arabic face on Arabic pages, its 3 KB cut elsewhere (/fonts.css) */
a[hreflang="ar"][lang="ar"] { font-family: "Noto Sans Arabic", "Noto Sans Arabic Lang", "Plus Jakarta Sans", sans-serif; }

/* the legal pages in the shell: the text as it was, in the page's theme, readable width */
.lgd-w { background: var(--page); color: var(--fg); padding: calc(var(--hd) + clamp(32px, 7vh, 80px)) var(--g) clamp(64px, 12vh, 140px); }
.lgd { max-width: 820px; margin: 0 auto; font-size: 16px; line-height: 1.7; }
.lgd-nav ul { list-style: none; margin: 0 0 clamp(28px, 5vh, 48px); padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; }
.lgd-nav a { color: var(--fg-2); display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
.lgd-nav a:hover { color: var(--fg); text-decoration-color: currentColor; }
.lgd-nav a[aria-current] { color: var(--fg); font-weight: 600; text-decoration-color: var(--cobalt); text-decoration-thickness: 2px; }
.lgd-note { max-width: 820px; margin: 0 auto 24px; padding: 12px 16px; border: 1px solid var(--line-strong); font-size: 14px; color: var(--fg-2); }
.lgd-h { margin: 0 0 clamp(20px, 3vh, 32px); font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(44px, 6vw, 92px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
[lang="ar"] .lgd-h, .lgd[lang="ar"] .lgd-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.3; font-size: clamp(34px, 4.4vw, 64px); }
.lgd h2 { margin: 40px 0 10px; font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.lgd h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 600; }
.lgd p { margin: 0 0 14px; color: var(--fg-2); }
.lgd strong { color: var(--fg); font-weight: 600; }
.lgd a { color: var(--accent); }
.lgd .tw { overflow-x: auto; margin: 8px 0 18px; }
.lgd table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.lgd th, .lgd td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-strong); text-align: start; vertical-align: top; color: var(--fg-2); }
.lgd th { font-weight: 600; color: var(--fg); }
[dir="rtl"] .lgd th, [dir="rtl"] .lgd td, .lgd[dir="rtl"] th, .lgd[dir="rtl"] td { padding: 10px 0 10px 14px; }

/* the page not found */
.nf { min-height: 100svh; background: var(--page); color: var(--fg); display: grid; align-content: center; justify-items: start; gap: 18px; padding: calc(var(--hd) + 40px) var(--g) 80px; }
.nf-n { margin: 0; font-family: "Instrument Serif", 'Times New Roman', serif; font-size: clamp(96px, 14vw, 240px); line-height: .85; color: var(--cobalt); letter-spacing: -.03em; }
.nf-h { margin: 0; font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(40px, 5.4vw, 96px); line-height: 1; letter-spacing: -.02em; max-width: 14em; text-wrap: balance; }
[lang="ar"] .nf-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.3; font-size: clamp(32px, 4vw, 64px); }
.nf-p { margin: 0 0 10px; max-width: 34em; color: var(--fg-2); font-size: 18px; }
.nf .ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.nf .bt.ghost { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* ===== end shell (07/10) ===== */
/* 07/10, home dev: a section the skip link or an anchor moved the focus to shows no ring (the ring is for what can be used) */
main [tabindex="-1"]:focus { outline: none; }

/* 07/10/2026, QA fixes: the crash-test stays black in both themes, so its index mark is light; the hosting row reads at AA; the
   kit's browser bars lose their coloured dots in the applications scene, like the rest of the story */
.v7 .cx .ix { color: rgba(255, 255, 255, .72); }
.v7 .cx .ix-n { color: #fff; }
.v7 .s5 .care { color: var(--fg-2); }
.v7 .n-apps .br-dots { display: none; }
/* 07/10/2026, review: the applications' four screens slide sideways on a phone (one tall column cost ~1 500 px), the titles balance
   their lines, and the capabilities read as one even index */
.na-h, .ns-h { text-wrap: balance; }
.na-cl a { font-weight: 500; }
@media (max-width: 640px) {
  .na-g { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--g)); padding-inline: var(--g); scroll-padding-inline: var(--g); }
  .na-g::-webkit-scrollbar { display: none; }
  .na-c { flex: 0 0 84%; scroll-snap-align: start; }
}

/* ===== 07/10 afternoon: sectors, subscriptions, foundations ===== */
/* the founder: « tu ajoutes plus de domaines de compétence… je veux une belle liste… dis d'arrêter de payer plusieurs abonnements car
   nous pouvons tout créer ! parle de sécurité, d'optimisation de rapidité, de seo, geo, de pixel, de cookies, de conformité, d'api » */

/* 01, « Votre métier »: the twelve sectors as an index, two columns from 1000 px; « Déjà réalisé » with each real work's photograph */
.ns-l { list-style: none; margin: 7vh 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); }
.ns-r { position: relative; min-width: 0; padding: 22px 0 24px; }
.ns-r::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); transform: scaleX(var(--hl, 1)); transform-origin: left; }
[dir="rtl"] .ns-r::before { transform-origin: right; }
.ns-r:last-child { box-shadow: inset 0 -1px 0 var(--line); }
.ns-a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 6px 16px; align-items: baseline; color: inherit; }
.ns-i { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 700; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ns-n { grid-column: 2; grid-row: 1; justify-self: start; font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(28px, 2.3vw, 40px); line-height: 1.06; letter-spacing: -.015em; transition: transform .35s var(--ease), color .2s; }
.ns-d { grid-column: 2; grid-row: 2; font-size: clamp(14px, 1vw, 16px); line-height: 1.5; color: var(--fg-2); max-width: 34em; }
.ns-a .ax { grid-column: 3; grid-row: 1; align-self: center; width: 22px; height: 22px; color: var(--fg-3); transition: transform .35s var(--ease), color .2s; }
.ns-a:hover .ns-n, .ns-a:focus-visible .ns-n { transform: translateX(10px); color: var(--accent); }
[dir="rtl"] .ns-a:hover .ns-n, [dir="rtl"] .ns-a:focus-visible .ns-n { transform: translateX(-10px); }
.ns-a:hover .ax { color: var(--fg); transform: translateX(4px); }
[dir="rtl"] .ns-a:hover .ax { transform: scaleX(-1) translateX(4px); }
.ns-wl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 14px 0 0; padding-inline-start: 56px; font-size: 14px; }
.ns-wk { color: var(--fg-3); font-weight: 600; }
.ns-wl a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; transition: color .2s; }
.ns-wl a span { padding-bottom: 1px; border-bottom: 1px solid var(--line-strong); transition: border-color .2s; }
.ns-wl a:hover { color: var(--accent); }
.ns-wl a:hover span { border-color: currentColor; }
.ns-wl img { width: 64px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; background: var(--tile); box-shadow: 0 0 0 1px var(--line); }
.ns-all { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 6vh; }
@media (min-width: 761px) { .ns-wk { flex-basis: 100%; } }
@media (min-width: 1000px) {
  .ns-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-r:nth-last-child(2):nth-child(odd) { box-shadow: inset 0 -1px 0 var(--line); }
}
[lang="ar"] .ns-n { font-size: clamp(21px, 1.8vw, 30px); line-height: 1.35; }
@media (max-width: 760px) {
  .n-sec { padding: 56px var(--g) 46px; }
  .ns-h { font-size: clamp(28px, 7.8vw, 40px); }
  .ns-s { font-size: 15px; margin-top: 10px; }
  .ns-l { margin-top: 22px; }
  .ns-r { padding: 9px 0 10px; }
  .ns-a { grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 2px 10px; }
  .ns-i { font-size: 12px; }
  .ns-n { font-size: 21px; line-height: 1.12; }
  /* compact (07/10: about 1 200 px for the twelve at 390): the line on one line, cut by an ellipsis; read whole by screen readers */
  .ns-d { font-size: 13.5px; line-height: 1.42; } /* 07/10 review: the whole line, never cut mid-word (legibility first) */
  .ns-a .ax { width: 18px; height: 18px; }
  .ns-wl { padding-inline-start: 34px; margin-top: 8px; gap: 6px 14px; font-size: 13px; }
  .ns-wl a { gap: 7px; }
  .ns-wl img { width: 40px; }
  .ns-all { margin-top: 26px; gap: 12px 22px; }
  .ns-all .lnk { font-size: 14px; }
  [lang="ar"] .ns-n { font-size: 19px; }
}

/* the sectors' hub: twelve rows, a little smaller than the five were */
.sc-12 .sc-n { font-size: clamp(30px, 3.4vw, 60px); }
.sc-12 a { padding: 2.6vh 0; }
@media (max-width: 640px) { .sc-12 .sc-n { font-size: 26px; } .sc-12 a { padding: 16px 0; } }

/* the mega menu's sectors: three columns of twelve on a wide screen (two below 1240 px), one list on a tablet and a phone */
@media (min-width: 1001px) {
  .mi-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; }
  .mi-sectors a { padding: 10px 14px; gap: 2px; align-content: start; }
  .mi-sectors b { font-size: 16px; }
  .mi-sectors span { font-size: 13px; line-height: 1.45; }
}
@media (min-width: 1001px) and (max-width: 1240px) { .mi-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the footer's sectors: two columns of their own on a wide screen */
@media (min-width: 1241px) { .ft-cols { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 861px) {
  .ft-d-sec { grid-column: span 2; }
  .ft-d-sec .ft-ls { display: block; columns: 2; column-gap: 30px; }
  .ft-d-sec .ft-ls a { display: block; margin-bottom: 10px; break-inside: avoid; }
}

/* 05, « Arrêtez de payer plusieurs abonnements »: white in light, black with a hairline in dark; the head on the inline start (it
   stays in view while the statement is struck), the statement in the open frame on the other side; the lines struck by the scroll
   (--st, 1 = struck: without the script or with reduced motion they are all struck at once) */
.n-subs { background: var(--page); color: var(--fg); padding: 14vh var(--g) 12vh; }
[data-theme="dark"] .v7 .n-subs, [data-theme="dark"] .v7 .n-base { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.nb-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4vh 5vw; align-items: start; margin-top: 18px; }
.nb-hd { position: sticky; top: calc(var(--hd) + 6vh); }
.nb-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(40px, 4.4vw, 80px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.nb-s { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--fg-2); margin-top: 18px; max-width: 30em; }
.v7 .nb-f { padding: clamp(22px, 2.6vw, 42px); color: var(--fg); }
.nb-l { list-style: none; margin: 0; padding: 0; }
.nb-r { --st: 1; position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.nb-r:first-child { border-top: 1px solid var(--line); }
.nb-n { font-size: clamp(17px, 1.3vw, 21px); font-weight: 500; letter-spacing: -.01em; opacity: calc(1 - .36 * var(--st)); }
.nb-u { font-size: 13px; color: var(--fg-3); }
.nb-r::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--cobalt); transform: scaleX(var(--st)); transform-origin: left; pointer-events: none; }
[dir="rtl"] .nb-r::after { transform-origin: right; }
[data-theme="dark"] .nb-r::after { background: #4d84ff; }
.nb-one { margin-top: clamp(26px, 4vh, 40px); padding-top: 24px; border-top: 2px solid var(--fg); }
.nb-o { font-family: "Instrument Serif", 'Times New Roman', serif; font-size: clamp(30px, 2.7vw, 48px); line-height: 1.08; letter-spacing: -.015em; max-width: 17em; text-wrap: balance; }
.nb-go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 26px; }
[lang="ar"] .nb-h, [lang="ar"] .nb-o, [lang="ar"] .fd-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
@media (max-width: 1000px) {
  .nb-g { grid-template-columns: minmax(0, 1fr); }
  .nb-hd { position: static; }
}
@media (max-width: 760px) {
  .n-subs { padding: 72px var(--g) 64px; }
  .nb-g { gap: 26px; margin-top: 14px; }
  .nb-h { font-size: clamp(32px, 9vw, 42px); }
  .nb-s { font-size: 16px; margin-top: 12px; }
  .v7 .nb-f { padding: 16px 14px 20px; }
  .nb-r { padding: 9px 0; gap: 0 12px; }
  .nb-n { font-size: 15.5px; }
  .nb-u { font-size: 12px; }
  .nb-one { margin-top: 22px; padding-top: 18px; }
  .nb-o { font-size: 27px; }
  .nb-go { margin-top: 20px; gap: 14px 24px; }
}

/* 06, « Les fondations »: black in both themes; eight items, each a hairline that draws from the inline start, a line icon and its
   number, the title, one or two sentences; 4 × 2, then 2 columns, then 1 (compact) on a phone */
.v7 .n-base { --fg: #fff; --fg-2: rgba(255, 255, 255, .74); --fg-3: rgba(255, 255, 255, .6); --line: rgba(255, 255, 255, .16); --line-strong: rgba(255, 255, 255, .34); --accent: #7da2ff;
  background: #000; color: #fff; padding: 14vh var(--g) 12vh; }
.v7 .n-base .ix-a { color: #4d84ff; }
.fd-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(40px, 4.6vw, 84px); line-height: 1.02; letter-spacing: -.02em; max-width: 16em; margin-top: 18px; text-wrap: balance; }
.fd-s { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--fg-2); margin-top: 18px; max-width: 34em; }
.fd-g { list-style: none; margin: 8vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 40px); }
.fd-c { position: relative; min-width: 0; padding: 26px 0 44px; }
.fd-c::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line-strong); transform: scaleX(var(--hl, 1)); transform-origin: left; }
[dir="rtl"] .fd-c::before { transform-origin: right; }
.fd-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fd-ic { width: 28px; height: 28px; flex: none; color: var(--fg); }
.fd-i { font-size: 13px; font-weight: 700; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.fd-n { margin-top: 24px; font-size: clamp(19px, 1.45vw, 24px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.fd-p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 30em; }
@media (max-width: 1100px) { .fd-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .v7 .n-base { padding: 72px var(--g) 64px; }
  .fd-h { font-size: clamp(32px, 9vw, 42px); }
  .fd-s { font-size: 16px; margin-top: 12px; }
  .fd-g { grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
  .fd-c { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 14px 0 16px; }
  .fd-t { display: contents; }
  .fd-ic { grid-column: 1; grid-row: 1; align-self: start; width: 22px; height: 22px; margin-top: 1px; }
  .fd-i { grid-column: 3; grid-row: 1; font-size: 12px; }
  .fd-n { grid-column: 2; grid-row: 1; margin: 0; font-size: 17px; }
  .fd-p { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0; font-size: 13.5px; line-height: 1.48; }
}
/* ===== end 07/10 afternoon ===== */

/* ===== round 3: pages (07/10 evening) — a work's way to start and what it used, the works' hub band, a sector's expertises ===== */
/* a work: after the facts, « Démarrer un projet comme celui-ci » and « Écrire à l'équipe »; its public address, quieter, opens a new tab */
.cp-in > .cp-f + .cp-go { margin-top: 10px; }
.cp-out { margin: 0; }
.cp-out .lnk { font-size: 15px; color: var(--fg-2); transition: color .3s; }
.cp-out .lnk:hover { color: var(--fg); }
.cp-out .xa { width: 16px; height: 16px; }
.cp-out .lnk:hover .xa { transform: translate(2px, -2px); }
[dir="rtl"] .cp-out .lnk:hover .xa { transform: scaleX(-1) translate(2px, -2px); }
/* « Ce que nous avons utilisé »: the expertise and solution pages the work proves, one row */
.cp-used { max-width: 1520px; margin: 0 auto; padding: 0 var(--g) 14vh; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 3vh 5vw; align-items: start; }
.cu-h { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; font-size: clamp(32px, 3vw, 54px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; padding-top: 18px; }
.cu-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.4vw; }
.cu-l.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cu-l li { display: flex; }
.cu-l a { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-content: start; gap: 10px 16px; padding: 22px 0 26px; border-top: 1px solid var(--line-strong); color: inherit; }
.cu-l b { font-size: clamp(19px, 1.45vw, 23px); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; transition: color .3s; }
.cu-d { grid-column: 1; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.cu-l .ax { grid-column: 2; grid-row: 1; width: 20px; height: 20px; margin-top: 3px; color: var(--fg-3); }
.cu-l a:hover b { color: var(--accent); }
.cu-l a:hover .ax { transform: translateX(5px); color: var(--fg); }
[dir="rtl"] .cu-l a:hover .ax { transform: scaleX(-1) translateX(5px); }
[lang="ar"] .cu-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.3; font-size: clamp(26px, 2.4vw, 42px); }
/* the works' hub: a shorter opening and a band to start a project or write, so the first work shows above the fold on a desktop */
.cp-hd.wh-hd { padding-top: calc(var(--hd) + 6vh); padding-bottom: 0; }
.wh-t { margin: 22px 0 0; font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; }
.wh-hd .cp-n { font-size: clamp(60px, 7.4vw, 150px); }
.wh-hd .cp-t { margin-top: 14px; }
.wh-go { margin-top: 5vh; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 5vw; }
.wh-go .cp-lead { grid-row: auto; font-size: clamp(17px, 1.3vw, 21px); max-width: 40em; color: var(--fg-2); text-wrap: pretty; }
.wh-go .xp-go { justify-content: flex-end; }
.wh-hd + .wh { padding-top: 6vh; }
[lang="ar"] .wh-t { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; letter-spacing: 0; }
[lang="ar"] .wh-t em { font-style: normal; }
/* a sector without a real work: its expertises, in whole rows */
.sp-xp { padding-top: 2vh; }
.sp-xp .xp-mg.c-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-xp .xp-mg.c-4, .sp-xp .xp-mg.c-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-xp .xp-mg.c-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sp-xp .xp-mc b { font-size: clamp(28px, 2.2vw, 40px); }
@media (max-width: 1240px) {
  .sp-xp .xp-mg.c-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-xp .xp-mg.c-5 > :last-child { grid-column: span 2; } /* 3 + 2 would leave a hole: the fifth card takes the rest of its row */
}
@media (max-width: 1000px) {
  .cp-used { grid-template-columns: 1fr; }
  .cu-h { padding-top: 0; }
  .wh-go { grid-template-columns: 1fr; }
  .wh-go .xp-go { justify-content: flex-start; }
  .sp-xp .xp-mg.c-4, .sp-xp .xp-mg.c-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cu-l, .cu-l.n-2 { grid-template-columns: 1fr; }
  .cu-l a { padding: 18px 0 20px; }
  .cp-hd.wh-hd { padding-top: calc(var(--hd) + 4vh); }
  .wh-go { margin-top: 4vh; padding: 20px 0 22px; }
  .sp-xp .xp-mg.c-3, .sp-xp .xp-mg.c-4, .sp-xp .xp-mg.c-8, .sp-xp .xp-mg.c-5 { grid-template-columns: 1fr; }
  .sp-xp .xp-mg.c-5 > :last-child { grid-column: auto; }
}
/* ===== end round 3: pages ===== */

/* ===== round 3: tech (07/10 evening) ===== */
/* the footer between 861 and 1240 px: four columns, the three audiences and the solutions on the first row, the twelve sectors (three
   columns of their own) and izak on the second, so no group is left alone on a third row */
@media (min-width: 861px) and (max-width: 1240px) {
  .ft-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ft-d-sec { grid-column: span 3; }
  .ft-d-sec .ft-ls { columns: 3; }
}
/* ===== end round 3: tech ===== */

/* ---------- mega menu (MORPHO) 07/10 ---------- */
/* the founder (07/10 night): « tu copies le mega menu de morphowater.com ». MORPHO's anatomy, sizes and motion in izak's brand: a glass
   notch hangs from the top edge with the items; one shared panel opens under it (a film, the numbered list, the analysis card, a bottom
   bar); below 1200 px the notch holds « Explorer », which opens the same panel as a sheet with its tabs in a row. The pills and the
   rounded cards are the founder's explicit request for this component only. The panel is dark in both themes, as MORPHO's. */
.hd { --mn-tint: rgba(125, 162, 255, .12); --mn-sh: rgba(0, 0, 0, .2); --mn-bg: rgba(30, 32, 38, .52); --mn-edge: rgba(255, 255, 255, .22); --mn-ic: rgba(255, 255, 255, .72); --mn-hov: rgba(255, 255, 255, .12); --mn-cur: rgba(255, 255, 255, .06); gap: 20px; }
.hd.on-light { --mn-tint: rgba(20, 85, 245, .06); --mn-sh: rgba(10, 11, 13, .08); --mn-bg: rgba(255, 255, 255, .66); --mn-edge: rgba(10, 11, 13, .14); --mn-ic: rgba(10, 11, 13, .62); --mn-hov: rgba(10, 11, 13, .07); --mn-cur: rgba(10, 11, 13, .05); }
.hd.on-cob { --mn-bg: rgba(255, 255, 255, .12); --mn-edge: rgba(255, 255, 255, .34); --mn-ic: rgba(255, 255, 255, .82); --mn-hov: rgba(255, 255, 255, .16); --mn-cur: rgba(255, 255, 255, .1); }
.hd.menu-open { --mn-bg: rgba(10, 11, 13, .9); --mn-edge: rgba(255, 255, 255, .2); --mn-ic: rgba(255, 255, 255, .72); --mn-hov: rgba(255, 255, 255, .12); --mn-cur: rgba(255, 255, 255, .06); }
/* the band behind the header once scrolled: MORPHO's soft fall from the top edge instead of a hard bar */
.hd::before { inset: 0 0 -18px; background: linear-gradient(rgba(0, 0, 0, .74), rgba(0, 0, 0, .42) 62%, rgba(0, 0, 0, 0)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(#000 58%, transparent); mask-image: linear-gradient(#000 58%, transparent); }
.hd.on-light::before { background: linear-gradient(rgba(255, 255, 255, .92), rgba(255, 255, 255, .6) 62%, rgba(255, 255, 255, 0)); }
.hd.on-cob::before { background: linear-gradient(rgba(20, 85, 245, .96), rgba(20, 85, 245, .62) 62%, rgba(20, 85, 245, 0)); }
.hd-brand { position: relative; z-index: 3; }
/* the notch: a glass tab with rounded lower corners and concave flares joining the top edge (the flares are two masked squares, so the
   shape follows the items' width in every language without measuring) */
.mn { position: absolute; top: 0; left: 50%; z-index: 2; transform: translateX(-50%); height: 62px; padding: 6px 12px 8px; display: flex; align-items: center; justify-content: center; color: #fff; transition: color .25s; }
.hd.on-light:not(.menu-open) .mn { color: var(--ink); }
.mn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--mn-tint), rgba(255, 255, 255, 0) 62%), var(--mn-bg); -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35); border-radius: 0 0 18px 18px; box-shadow: 0 7px 18px var(--mn-sh); transition: background .25s; }
.mn::after { content: ''; position: absolute; inset: 22px 0 0; z-index: -1; border: 1px solid var(--mn-edge); border-top: 0; border-radius: 0 0 18px 18px; pointer-events: none; transition: border-color .25s; }
.mn-f { position: absolute; top: 0; left: -22px; z-index: -1; width: 22px; height: 22px; background: radial-gradient(circle at 0 100%, transparent 21px, var(--mn-edge) 21.4px, var(--mn-edge) 22.3px, transparent 22.8px), var(--mn-bg); -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35); -webkit-mask-image: radial-gradient(circle at 0 100%, transparent 21px, #000 21.5px); mask-image: radial-gradient(circle at 0 100%, transparent 21px, #000 21.5px); pointer-events: none; transition: background .25s; }
.mn-f2 { left: auto; right: -22px; background: radial-gradient(circle at 100% 100%, transparent 21px, var(--mn-edge) 21.4px, var(--mn-edge) 22.3px, transparent 22.8px), var(--mn-bg); -webkit-mask-image: radial-gradient(circle at 100% 100%, transparent 21px, #000 21.5px); mask-image: radial-gradient(circle at 100% 100%, transparent 21px, #000 21.5px); }
.mn-nav { position: relative; }
.mn-nav ul { display: flex; align-items: center; gap: 2px; }
.mn-i { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 17px; border-radius: 999px; font-size: 13px; font-weight: 400; line-height: 1; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .28); transition: background .18s, box-shadow .18s; }
.hd.on-light:not(.menu-open) .mn-i, .hd.on-light:not(.menu-open) .mn-x { text-shadow: none; }
.mn-ic { width: 16px; height: 16px; flex: none; color: var(--mn-ic); transition: color .18s; }
.mn-ch { width: 11px; height: 11px; flex: none; opacity: .55; transition: transform .18s, opacity .18s; }
.mn-i:hover:not([aria-expanded="true"]) { background: var(--mn-hov); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.mn-i[aria-current="page"]:not(:hover), .mn-i[data-current]:not([aria-expanded="true"]):not(:hover) { background: var(--mn-cur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); }
.mn-i[aria-expanded="true"] .mn-ic { color: inherit; }
.mn-i[aria-expanded="true"] .mn-ch { transform: rotate(180deg); opacity: .9; }
.mn-i:focus-visible, .mn-x:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
/* the open item's highlight slides from one item to the next (common6.js places it) */
.mn-hl { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); opacity: 0; pointer-events: none; transition: transform .3s var(--ease), width .3s var(--ease), opacity .18s; }
.mn-hl.on { opacity: 1; }
.mn-hl.jump { transition: opacity .18s; }
.mn-x { display: none; align-items: center; justify-content: center; gap: 10px; min-width: 142px; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 400; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .28); }
.mn-x svg { width: 13px; height: 13px; flex: none; }
.mn-xx { display: none; }
.mn-x[aria-expanded="true"] .mn-ch { display: none; }
.mn-x[aria-expanded="true"] .mn-xx { display: block; }
/* the right: the project chip, the languages inline (the current underlined) and the theme, the light pill */
.hd-r { position: relative; z-index: 3; margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
.hd-sub { display: flex; align-items: center; gap: 10px; }
.hd-lg { display: flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 500; letter-spacing: .07em; }
.hd-lg a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 3px; opacity: .62; transition: opacity .3s; }
.hd-lg a:hover, .hd-lg a[aria-current] { opacity: 1; }
.hd-lg a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hd-lg span { opacity: .35; }
.hd.on-cob .hd-lg a { opacity: .9; }
.hd.on-cob .hd-lg a:hover, .hd.on-cob .hd-lg a[aria-current] { opacity: 1; }
.hd .theme-b { width: 32px; height: 32px; }
.hd .theme-b svg { width: 16px; height: 16px; }
.hd-go { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 12px 16px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .33); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background .18s, transform .18s; }
.hd-go:hover { background: #eef2ff; transform: translateY(-1px); }
.hd-go .ne { width: 13px; height: 13px; flex: none; }
.hd.on-light .hd-go { background: var(--ink); color: #fff; box-shadow: none; }
.hd.on-light .hd-go:hover { background: #23262d; }
.hd.on-cob .hd-go { background: #fff; color: var(--ink); }
.go-s { display: none; }
.ne { width: 14px; height: 14px; flex: none; }
[dir="rtl"] .ne { transform: scaleX(-1); }
/* the panel */
.mm { position: absolute; top: 74px; left: 50%; z-index: 1; transform: translateX(-50%); width: min(1040px, calc(100vw - 64px)); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow: auto; overscroll-behavior: contain; color: #fff; background: rgba(10, 11, 13, .96); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); border: 1px solid rgba(255, 255, 255, .14); border-radius: 24px; box-shadow: 0 22px 70px rgba(0, 0, 0, .33); animation: mm-in .22s ease both; scrollbar-width: thin; }
.mm[hidden] { display: none; }
@keyframes mm-in { from { opacity: 0; translate: 0 -7px; } }
.mm :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mm-tabs { display: none; }
.mm-body { display: grid; grid-template-columns: minmax(0, 1fr) 244px; align-items: stretch; gap: 28px; padding: 28px; }
.mm-p { grid-area: 1 / 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 28px; visibility: hidden; opacity: 0; transition: opacity .16s ease, visibility 0s .16s; }
.mm-p[data-on] { visibility: visible; opacity: 1; transition: opacity .16s ease; }
.mm-card { grid-area: 1 / 2; }
.mm-film { position: relative; align-self: stretch; height: auto; min-height: 252px; margin: 0; border-radius: 14px; overflow: hidden; background: #16171c; }
.mm-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.84) saturate(.9); }
.mm-film::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .6) 56%, rgba(0, 0, 0, .9)); pointer-events: none; }
.mm-film figcaption { position: absolute; z-index: 1; bottom: 23px; inset-inline: 21px 14px; text-shadow: 0 1px 10px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .4); }
.mm-film figcaption span { display: block; margin-bottom: 10px; font-size: 9px; font-weight: 400; letter-spacing: .17em; text-transform: uppercase; }
.mm-film em { display: block; font-family: "Instrument Serif", 'Times New Roman', serif; font-size: 30px; font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
.mm-pp { position: absolute; z-index: 2; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .38); background: rgba(10, 11, 13, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; }
.mm-pp svg { grid-area: 1 / 1; width: 13px; height: 13px; }
.mm-pp .i-pl, .mm-film.paused .i-pa { display: none; }
.mm-film.paused .i-pl { display: block; }
.mm-pp[hidden] { display: none; }
.mm-k { margin: 4px 0 14px; font-size: 10px; font-weight: 400; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
.mm-l { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.mm-l.c2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; column-gap: 8px; font-size: 13px; }
/* rows of one height in the two columns (a long sector name takes two lines, its neighbours keep its height: no ragged rows) */
.mm-l.r5 { grid-template-rows: repeat(5, minmax(40px, 1fr)); }
.mm-l.r6 { grid-template-rows: repeat(6, minmax(40px, 1fr)); }
.mm-l a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 9px 8px; border-radius: 8px; line-height: 1.35; transition: background .18s, transform .18s; }
.mm-l.c2 a { gap: 8px; height: 100%; padding: 6px; line-height: 1.25; }
.mm-l a:hover { background: rgba(255, 255, 255, .07); transform: translateX(2px); }
[dir="rtl"] .mm-l a:hover { transform: translateX(-2px); }
.mm-l a[aria-current="page"] { color: #9db8ff; background: rgba(255, 255, 255, .04); }
.mm-n { flex: none; min-width: 14px; font-size: 10px; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.mm-t { min-width: 0; }
.mm-t small { margin-inline-start: 6px; font-size: 12px; color: rgba(255, 255, 255, .52); }
.mm-l .ne { margin-inline-start: auto; color: rgba(255, 255, 255, .5); }
.mm-d { max-width: 380px; margin-top: 17px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .64); }
.mm-all { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; }
.mm-all a { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13px; font-weight: 600; }
.mm-all .ax { width: 15px; height: 15px; color: #7da2ff; }
.mm-all a:hover .ax { transform: translateX(3px); }
[dir="rtl"] .mm-all a:hover .ax { transform: scaleX(-1) translateX(3px); }
/* the card, the same in every panel (MORPHO's product card): the free analysis, its marker as the product */
.mm-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 22px 22px 20px; border-radius: 16px; background: linear-gradient(145deg, #f6f8ff, #e2eaff 65%); color: var(--ink); border: 1px solid rgba(255, 255, 255, .44); }
.mm-ck { display: block; font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #0b2f8f; }
.mm-cf { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 66px; align-items: center; gap: 12px; min-height: 140px; margin-top: 12px; }
.mm-ct { font-size: 22px; font-weight: 300; line-height: 1.18; letter-spacing: -.03em; }
.mm-ct em { display: block; margin-top: 3px; white-space: nowrap; font-family: "Instrument Serif", 'Times New Roman', serif; font-size: 25px; font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }
.mm-mark { width: 66px; height: 66px; transform: rotate(-8deg); filter: drop-shadow(0 10px 10px rgba(11, 47, 143, .2)); }
.mm-cp { margin: 10px 0 16px; font-size: 11px; line-height: 1.55; color: #3b4250; }
.mm-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: auto; padding-block: 9px; padding-inline: 16px 10px; border-radius: 999px; background: var(--cobalt); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.3; box-shadow: 0 3px 8px rgba(20, 85, 245, .14); transition: background .2s, box-shadow .2s; }
.mm-cta:hover { background: var(--cobalt-h); box-shadow: 0 5px 12px rgba(20, 85, 245, .24); }
.mm-cta-a { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); transition: background .2s; }
.mm-cta:hover .mm-cta-a { background: rgba(255, 255, 255, .24); }
.mm-cta .ax { width: 15px; height: 15px; }
.mm-cta:hover .ax { transform: translateX(2px); }
[dir="rtl"] .mm-cta:hover .ax { transform: scaleX(-1) translateX(2px); }
.mm-card :focus-visible { outline-color: var(--cobalt); }
/* the bottom bar: write to the team; the slogan and izak's accounts */
.mm-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 11px; }
.mm-talk { display: flex; align-items: center; gap: 12px; min-height: 24px; }
.mm-talk strong { margin-inline-start: 5px; font-weight: 500; color: #7da2ff; }
.mm-ic { width: 16px; height: 16px; flex: none; color: #7da2ff; }
.mm-talk .ax { width: 15px; height: 15px; color: #7da2ff; }
.mm-talk:hover strong, .mm-so a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mm-so { display: flex; align-items: center; gap: 9px; font-size: 10px; color: rgba(255, 255, 255, .58); }
.mm-so .mm-ic { width: 13px; height: 13px; color: inherit; }
.mm-so a { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; margin-inline-start: 12px; color: #fff; }
.mm-so .ne { width: 12px; height: 12px; }
html.mm-lock, html.mm-lock body { overflow: hidden; overscroll-behavior: none; }
/* Arabic: Noto Sans Arabic, no spacing on the small capitals, the serif captions upright */
[lang="ar"] .mm-film em, [lang="ar"] .mm-ct em { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; font-style: normal; font-weight: 600; font-size: 24px; line-height: 1.35; letter-spacing: 0; }
[lang="ar"] .mm-ct { letter-spacing: 0; font-weight: 400; }
[lang="ar"] .mm-k, [lang="ar"] .mm-ck, [lang="ar"] .mm-film figcaption span, [lang="ar"] .hd-lg { letter-spacing: 0; }
/* the tiers (second pass): FR/ES words are a third longer than MORPHO's English, and izak has four languages and a theme button, so
   below 1580 px the languages and the theme sit in a small row under the pill (as MORPHO's phone header) and the pill keeps
   « Démarrer un projet ↗ » down to MORPHO's 1150 px; the icons go only where the items would touch (≤ 1239 px); the narrow panel
   (columns 220 / 1fr / 244, padding 24) only at MORPHO's ≤ 1150; the sheet at MORPHO's ≤ 1099. The short word keeps the full
   words as its accessible name. */
.go-s { display: none; }
@media (max-width: 1579px) {
  .hd-r { align-self: flex-start; margin-top: 16px; }
  .hd-sub { position: absolute; top: 44px; inset-inline-end: 0; gap: 4px; }
  .hd-lg { gap: 0; }
  .hd-lg a { min-height: 26px; padding: 0 5px; }
  .hd .theme-b { width: 26px; height: 26px; box-shadow: none; }
  .hd .theme-b svg { width: 14px; height: 14px; }
  .hd .hd-chip { gap: 7px; padding: 8px 9px; }
  .hd .hd-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hd .hd-fr { display: block; }
}
@media (max-width: 1239px) { .mn-i { gap: 7px; padding: 0 14px; } .mn-i .mn-ic { display: none; } }
@media (max-width: 1150px) {
  .go-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .go-s { display: inline; }
  .mm { width: min(1040px, calc(100vw - 48px)); }
  .mm-body { gap: 22px; padding: 24px; }
  .mm-p { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
}
/* below 1100 px: « Explorer » in the notch opens the panel as a sheet, its tabs in a row (« Studio ↗ » a link, the others choose) */
@media (max-width: 1099px) {
  .mn { height: 58px; }
  .mn-nav { display: none; }
  .mn-x { display: flex; }
  .mm { top: 72px; width: min(720px, calc(100vw - 40px)); max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); touch-action: pan-y pinch-zoom; }
  .mm-tabs { display: flex; gap: 6px; padding: 16px 20px 0; overflow-x: auto; scrollbar-width: none; }
  .mm-tabs::-webkit-scrollbar { display: none; }
  .mm-tabs.f-e { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
  .mm-tabs.f-s { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); }
  .mm-tabs.f-s.f-e { -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
  [dir="rtl"] .mm-tabs.f-e { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); }
  [dir="rtl"] .mm-tabs.f-s { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
  .mm-tabs > * { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 400; line-height: 1.3; white-space: nowrap; color: rgba(255, 255, 255, .74); transition: background .18s, color .18s; }
  .mm-tabs a { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
  .mm-tabs .ne { width: 11px; height: 11px; }
  .mm-tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); }
  /* as a sheet a tap chooses: the panels take their own height again (no shared cell, no crossfade) */
  .mm-body { grid-template-columns: minmax(0, 1fr) 244px; align-items: start; gap: 22px; padding: 24px; }
  .mm-p { display: none; visibility: visible; opacity: 1; transition: none; }
  .mm-p[data-on] { display: contents; }
  .mm-card { grid-area: auto; }
  .mm-film { grid-column: 1 / -1; align-self: auto; height: 168px; min-height: 0; }
  .mm-so > span, .mm-so > .mm-ic { display: none; }
}
@media (max-width: 900px) {
  .mm { top: 78px; max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); }
}
@media (max-width: 600px) {
  .hd { gap: 8px; }
  .mn { height: 54px; padding: 4px 9px 6px; }
  .mn-x { min-width: 92px; gap: 8px; padding: 0 12px; font-size: 12px; }
  .hd-r { gap: 8px; margin-top: 12px; }
  .hd-go { min-height: 36px; padding: 8px 11px; gap: 6px; }
  .hd-sub { top: 44px; } /* the row starts under the notch's corner, not on it */
  .mm { width: calc(100vw - 28px); border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .53); }
  /* MORPHO's phone tabs: small words, tight sides, so the row fits (a fade says it scrolls where it still does not) */
  .mm-tabs { gap: 2px; padding: 12px 10px 0; }
  .mm-tabs > * { flex: 1 1 auto; gap: 3px; padding: 8px 6px; min-height: 38px; font-size: 10.5px; letter-spacing: -.01em; }
  .mm-tabs .ne { width: 9px; height: 9px; }
  .mm-body { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px; }
  .mm-film { height: auto; aspect-ratio: 16 / 9; }
  .mm-film figcaption { inset-inline-start: 17px; bottom: 16px; }
  .mm-film figcaption span { margin-bottom: 6px; font-size: 8px; }
  .mm-film em { font-size: 27px; }
  .mm-k { margin: 0 0 8px; font-size: 9px; }
  .mm-l, .mm-l.c2 { display: flex; flex-direction: column; font-size: 13px; }
  .mm-l a, .mm-l.c2 a { min-height: 42px; padding: 9px 4px; }
  .mm-d { margin-top: 12px; padding-top: 12px; font-size: 12px; }
  .mm-card { padding: 20px; }
  .mm-cf { grid-template-columns: minmax(0, 1fr) 64px; min-height: 124px; margin-top: 10px; }
  /* the bar on one line, as MORPHO's: « Parlons-en. » stays for screen readers only, the accounts lose their margin */
  .mm-bar { padding: 14px 16px; gap: 10px; }
  .mm-talk { gap: 8px; }
  .mm-tk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mm-talk strong { margin: 0; }
  .mm-so { gap: 10px; }
  .mm-so a { margin: 0; }
}
/* narrow phones: a tighter notch and pill, so the pill keeps clear of the notch's flare (320 px: 28 px overlap before) */
@media (max-width: 400px) { .mn-x { min-width: 0; gap: 6px; padding: 0 10px; } .hd-go { padding: 8px 10px; font-size: 11px; } }
@media (max-width: 359px) { .logo { width: 66px; } .mn-x { font-size: 11px; } .hd-go .ne { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mm { animation: none; }
  .mn-hl, .mn-i, .mn-ch, .mm-l a, .hd-go, .mm-cta, .mm-tabs > * { transition: none; }
  .mm-l a:hover, [dir="rtl"] .mm-l a:hover, .hd-go:hover { transform: none; }
}
/* the project chip by the logo (07/10 night): compact (a frame and the count) while the notch is narrow, under the logo on a phone */
.hd .hd-chip { position: relative; z-index: 3; }
@media (max-width: 900px) {
  .hd .hd-chip { gap: 7px; padding: 8px 9px; }
  .hd .hd-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hd .hd-fr { display: block; }
}
@media (max-width: 600px) {
  .hd .hd-chip { position: absolute; top: 54px; inset-inline-start: var(--g); gap: 6px; padding: 3px 7px; }
  .hd .hd-chip b { min-width: 20px; height: 20px; font-size: 11px; }
}
/* 08/10 (the founder: « le fond glass ne remplit pas tout le mega menu, mets-le en noir transparent glass »): the notch, its flares and
   the panel are one even black glass in every theme and over every section, with no tint fading across it */
.hd, .hd.on-light, .hd.on-cob, .hd.menu-open { --mn-tint: rgba(0, 0, 0, 0); --mn-bg: rgba(0, 0, 0, .8); --mn-edge: rgba(255, 255, 255, .16); --mn-sh: rgba(0, 0, 0, .28); --mn-ic: rgba(255, 255, 255, .72); --mn-hov: rgba(255, 255, 255, .12); --mn-cur: rgba(255, 255, 255, .07); }
.mn::before { background: var(--mn-bg); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); }
.hd.on-light:not(.menu-open) .mn { color: #fff; }
.hd.on-light:not(.menu-open) .mn-i, .hd.on-light:not(.menu-open) .mn-x { text-shadow: 0 1px 2px rgba(0, 0, 0, .28); }
.mm { background: rgba(0, 0, 0, .84); -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2); border-color: rgba(255, 255, 255, .16); }

/* ===== 08/10 home SEO (the founder's brief): the opening's brand mention and h1, the four offer sets, the works' links ===== */
/* the brand mention « We are the agency. » keeps the serif and its letter rise (letters hidden from assistive technology, the full
   text read once); the h1 under it is one plain, strong text; then the line and the buttons */
.slogan .lts { display: block; }
.slogan .sl2 em { font-style: italic; }
.s1-h { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 600; font-size: clamp(26px, 2.9vw, 50px); line-height: 1.12; letter-spacing: -.025em; max-width: 22em; margin-top: clamp(18px, 3.4vh, 34px); color: var(--fg); text-wrap: balance; }
.s1-sub { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; margin-top: clamp(12px, 2vh, 20px); max-width: 34em; }
.s1 .ctas { margin-top: clamp(18px, 3.4vh, 32px); }
[lang="ar"] .s1-h { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", sans-serif; letter-spacing: 0; line-height: 1.4; }
[lang="ar"] .s1-sub { line-height: 1.7; }
/* in Arabic the mention stays Latin and in the serif, set to the right like the words under it */
[lang="ar"] .slogan[lang="en"] { font-family: "Instrument Serif", 'Times New Roman', serif; font-weight: 400; line-height: .9; letter-spacing: -.025em; text-align: right; }
[lang="ar"] .slogan[lang="en"] em { font-style: italic; color: inherit; }
[lang="ar"] .slogan[lang="en"] .wd { padding-bottom: .1em; margin-bottom: -.1em; }
.slogan, [lang="ar"] .slogan[lang="en"] { font-size: clamp(60px, 8.4vw, 168px); }
@media (max-width: 1000px) { .slogan, [lang="ar"] .slogan[lang="en"] { font-size: clamp(56px, 9.6vw, 96px); } }
@media (max-width: 640px) {
  .slogan, [lang="ar"] .slogan[lang="en"] { font-size: clamp(46px, 13.4vw, 64px); }
  .s1-h { font-size: clamp(23px, 6.6vw, 28px); line-height: 1.16; margin-top: 14px; }
  [lang="ar"] .s1-h { line-height: 1.45; }
  .s1-sub { font-size: 15px; margin-top: 10px; }
  .s1 .ctas { margin-top: 16px; gap: 8px 16px; align-items: center; }
  /* the second way in comes back on a phone, as a text link beside the button */
  .s1 .ctas .ghost { display: inline-flex; padding-inline: 4px; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}
@media (min-width: 641px) and (pointer: coarse) and (max-height: 520px) {
  .slogan, [lang="ar"] .slogan[lang="en"] { font-size: clamp(40px, 6.4vw, 60px); }
  .s1-h { font-size: 22px; margin-top: 10px; }
  .s1-sub { display: none; }
}
/* the links of an offer set to its pages: an index of hairline rows (they draw from the inline start as the set comes in) */
.set-l { list-style: none; margin: 24px 0 0; padding: 0; max-width: 36em; }
.set-l li { position: relative; }
.set-l li::before, .set-l li:last-child::after { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line-strong, var(--line)); transform: scaleX(var(--hl, 1)); transform-origin: left; }
.set-l li:last-child::after { inset: auto 0 0; }
[dir="rtl"] .set-l li::before, [dir="rtl"] .set-l li:last-child::after { transform-origin: right; }
.set-l a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; font-size: clamp(16px, 1.2vw, 19px); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; transition: color .2s; }
[lang="ar"] .set-l a { letter-spacing: 0; }
.set-l a:hover { color: var(--accent); }
.set-l .ax { color: var(--accent); }
.set-l a:hover .ax { transform: translateX(4px); }
[dir="rtl"] .set-l .ax { transform: scaleX(-1); }
[dir="rtl"] .set-l a:hover .ax { transform: scaleX(-1) translateX(4px); }
.v7 .s5-r .set-l + .ctas { margin-top: 28px; }
/* 04 the teams, 05 clients and partners: the two screens beside the set's pages; 06 AI and automation, compact */
.na-b { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 5vh 4vw; margin-top: 7vh; align-items: start; }
.na-b .na-g { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.na-b .na-l { margin: 0; }
.v7 .n-apps + .n-apps { padding-top: 5vh; }
.v7 .n-apps:has(+ .n-apps) { padding-bottom: 7vh; }
[data-theme="dark"] .v7 .n-apps + .n-apps { box-shadow: none; }
.ni-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vh 5vw; align-items: center; }
.ni-t .na-l { margin-top: 30px; }
.ni-v .na-sc { aspect-ratio: 16 / 10; }
@media (max-width: 1000px) {
  .na-b, .ni-g { grid-template-columns: 1fr; }
  .na-b .na-l { max-width: none; }
}
@media (max-width: 640px) {
  .na-b { margin-top: 5vh; }
  .na-b .na-g { display: flex; }
  .set-l a { padding: 12px 0; font-size: 16px; }
  .v7 .n-apps + .n-apps { padding-top: 4vh; }
  .v7 .n-apps:has(+ .n-apps) { padding-bottom: 6vh; }
}
/* 08/10 (the founder: « retire we are agency du titre du hero »): the h1 opens the hero, so it takes the title's size */
.s1-h { font-size: clamp(34px, 4.3vw, 76px); line-height: 1.04; letter-spacing: -.03em; max-width: 15em; margin-top: 0; }
[lang="ar"] .s1-h { line-height: 1.3; letter-spacing: 0; }
@media (max-width: 640px) { .s1-h { font-size: clamp(30px, 8.6vw, 38px); line-height: 1.08; margin-top: 0; } [lang="ar"] .s1-h { line-height: 1.35; } }