/* Hallmark · shape: Le film, deux personnes, un outil par problème · genre: editorial · theme: custom · job: hire · idea: "Un téléphone en 3D qui tourne pendant le défilement et montre leurs vrais outils, puis une page et un calculateur par outil" · vibe: "lumière du jour, mur à la chaux, bleu de Rabat, direct"
 * paper: oklch(98.4% 0.006 85) · accent: oklch(43% 0.15 262) et terre oklch(57% 0.14 40) pour les mentions clients · display: Golos Text · body: Golos Text · hero: le film plein écran, la phrase en haut (téléphone) ou à gauche (PC), le téléphone 3D dessous ou à droite · nav: wordmark, quatre liens, langues, un bouton, un menu sur petit écran · footer: wordmark, les sept pages, une ligne, année · imagery: the product (le téléphone 3D avec les écrans des applis, vidéos et captures des projets, clients floutés) · signature: le téléphone qui fait un tour complet entre chaque appli, sur fond clair
 * axes: light/grotesk-sans/cool · posture: two chromatic accents, blue for action and earth for client notes · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · waive 79 · le film d'ouverture : la moitié droite de l'écran (et le bas sur téléphone) est tenue par le téléphone en 3D dessiné dans le canvas, que le lint ne mesure pas · capture film-d0 : le téléphone occupe 60 % de la hauteur à côté du titre */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: V (le fond clair et une grotesque peuvent se banaliser), réglé par les portraits en ouverture et des phrases à la première personne qu'aucune autre agence ne dirait */
@import url("./tokens.css");
@import url("./base.css");

html { scroll-behavior: auto; }   /* saut direct : un défilement doux traverserait tout le film d'ouverture */
html[lang="ar"] { --font-display: var(--font-arabic); --font-body: var(--font-arabic); --font-latin: var(--font-arabic); --tracking-display: 0; }
html[lang="ar"] .film__t, html[lang="ar"] .film__h, html[lang="ar"] .h2 { line-height: 1.3; }
.h2 { font-size: var(--text-section); font-weight: 800; line-height: 1.06; letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: 20ch; }
h3 { font-size: var(--text-title); font-weight: 600; line-height: 1.25; color: var(--color-ink); }

.skip { position: absolute; inset-inline-start: var(--space-md); top: -100px; z-index: var(--z-modal); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); }
.skip:focus-visible { top: var(--space-md); }

/* Boutons : un style plein, une variante fantôme */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; font-size: var(--text-md); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.btn:hover { background: color-mix(in oklab, var(--color-accent) 84%, var(--color-ink)); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.btn[aria-disabled="true"], .btn:disabled { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: color-mix(in oklab, var(--color-ink) 30%, transparent); }
.btn--ghost:hover { background: var(--color-paper-2); border-color: var(--color-ink); }
.btn--small { min-height: 42px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }

/* Navigation : une ligne, rien de plus */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dur-long) var(--ease-out); }
.nav.is-scrolled { border-bottom-color: var(--color-rule); }
.nav__in { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--color-ink); margin-inline-end: auto; border-radius: var(--space-xs); }
.brand__mark { width: 38px; height: auto; overflow: visible; }
.brand__mark polyline { fill: none; stroke: var(--color-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.brand__mark circle { fill: var(--color-earth); }
.brand__name { font-family: var(--font-latin); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--color-ink); }
.brand__name b { font-weight: 800; color: var(--color-accent); }
.nav__links { display: flex; gap: var(--space-lg); }
.nav__links a { text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); padding: var(--space-xs) var(--space-3xs); border-radius: var(--space-2xs); transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover { color: var(--color-ink); }
.lang { display: inline-flex; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); padding: var(--space-2xs); }
.lang button { min-width: 38px; min-height: 34px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.lang button:hover { color: var(--color-ink); }
.lang button[aria-pressed="true"] { color: var(--color-ink); background: var(--color-paper-3); }
.lang button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lang button[lang="ar"] { font-family: var(--font-arabic); }

.nav__links a[aria-current="page"] { color: var(--color-ink); font-weight: 600; }
.nav__menu { display: none; min-height: 42px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.nav__menu:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* 1. Le film d'ouverture · par défaut (sans script, sans WebGL, animations réduites) : les textes se suivent, une image fixe ;
      avec WebGL (html.film-gl) : la section fait cinq écrans, la scène reste épinglée et le texte change pendant le défilement */
.film { position: relative; border-bottom: 1px solid var(--color-rule); }
.film__pin { position: relative; display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--section-gap-s); }
.film__gl { display: none; }
.film__still { width: min(320px, 72%); height: auto; margin-inline: auto; border-radius: var(--radius-media); }
.film__t { font-size: var(--text-display); font-weight: 800; line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 13ch; color: var(--color-ink); }
.film__s { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 36ch; }
.film__h { font-size: var(--text-section); font-weight: 800; line-height: 1.08; letter-spacing: var(--tracking-display); max-width: 15ch; color: var(--color-ink); }
.hero__a { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
html.film-gl .film { height: 440svh; border-bottom: 0; }
html.film-gl .film .btn--ghost { background: color-mix(in oklab, var(--color-paper) 88%, transparent); }
html.film-gl .film__pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: clip; gap: 0; padding-block: 0; isolation: isolate; }
html.film-gl .film__pin::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 70% 55% at 50% 72%, var(--color-paper-2), var(--color-paper) 70%); }
html.film-gl .film__gl { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
html.film-gl .film__still { display: none; }
html.film-gl .film__beat { grid-area: 1 / 1; position: relative; z-index: 2; align-self: start; padding-top: var(--space-xl); opacity: 0; pointer-events: none; will-change: opacity, transform; }
html.film-gl .film__beat.is-on { pointer-events: auto; }
html.film-gl .film__t { font-size: var(--text-display-s); }
@media (min-width: 70rem) {
  html.film-gl .film__beat { align-self: center; padding-top: 0; }
  html.film-gl .film__beat .container { padding-inline-end: 50%; }
  html.film-gl .film__pin::before { background: radial-gradient(ellipse 45% 70% at 76% 50%, var(--color-paper-2), var(--color-paper) 70%); }
  html.film-gl .film__t { font-size: var(--text-display); }
}
html[dir="rtl"].film-gl .film__pin::before { background: radial-gradient(ellipse 70% 55% at 50% 72%, var(--color-paper-2), var(--color-paper) 70%); }

/* 2. Nous deux : deux prénoms en grand, un rôle, une adresse */
.team { padding-block: var(--section-gap-l); border-top: 1px solid var(--color-rule); }
.team__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--section-gap-s) var(--gap-columns); align-items: start; align-content: center; min-height: calc(100svh - var(--nav-h) - 2 * var(--section-gap-l)); }
.duo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.duo__p { padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.duo__name { font-size: var(--text-display-s); font-weight: 800; line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.duo__role { margin-top: var(--space-xs); color: var(--color-ink-2); }
.duo__mail { display: inline-block; margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration-color: var(--color-rule); }
.duo__mail:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }

/* 3. Un outil par problème : une liste de liens, un filet entre chaque */
.tools { padding-block: var(--section-gap-s); }
.tools__list { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; }
.tools__list a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xs) var(--gap-columns); align-items: baseline; padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); text-decoration: none; color: inherit; }
.tools__list li:last-child a { border-bottom: 1px solid var(--color-rule); }
.tools__list a:hover h3 { color: var(--color-accent); }
.tools__list a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--space-2xs); }
.tools__list h3 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.1; transition: color var(--dur-short) var(--ease-out); }
.tools__list p { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 46ch; }
.job__more { display: inline-block; margin-top: var(--space-md); color: var(--color-accent); font-weight: 600; text-decoration-color: color-mix(in oklab, var(--color-accent) 40%, transparent); }
.job__more:hover { text-decoration-color: var(--color-accent); }

/* 4. Comment ça se passe : le titre à gauche, les étapes à droite */
.how { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.how__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-lg); }
.steps li { counter-increment: step; display: grid; grid-template-columns: var(--space-xl) minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.steps li::before { content: counter(step); grid-row: 1 / span 2; font-weight: 800; font-size: var(--text-lg); color: var(--color-earth); line-height: 1.35; }
.steps p { color: var(--color-ink-2); }

/* 3. Ce qu'on a construit */
.work { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.work__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md) var(--gap-columns); }
.work__note { color: var(--color-muted); font-size: var(--text-sm); max-width: 40ch; }
.work__list { list-style: none; margin: var(--space-3xl) 0 0; padding: 0; display: grid; gap: var(--section-gap); }
.job { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; }
.job:nth-child(even) .job__media { order: 2; }
.job__media { position: relative; aspect-ratio: 16 / 10; }
.job__desk { position: absolute; inset-inline-start: 0; top: 0; width: 82%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--radius-media); border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.job__phone { position: absolute; inset-inline-end: 0; bottom: 0; height: 86%; width: auto; aspect-ratio: 600 / 1298; object-fit: cover; object-position: top; border-radius: var(--space-lg); border: 4px solid var(--color-ink); background: var(--color-paper-2); }
.job__desk--back { inset-inline-start: auto; inset-inline-end: 0; top: auto; bottom: 0; width: 60%; }
.job__media--phones { display: flex; justify-content: center; align-items: center; gap: 4%; }
.job__media--phones img { height: 94%; width: auto; aspect-ratio: 600 / 1298; object-fit: cover; object-position: top; border-radius: var(--space-lg); border: 4px solid var(--color-ink); }
.job__media--phones img:nth-child(2) { transform: translateY(-4%); }
.job__kind { color: var(--color-accent); font-size: var(--text-sm); margin-bottom: var(--space-xs); }
.job__kind--client { color: var(--color-earth); }
.job__txt p:last-child { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 46ch; }
video.job__desk { cursor: default; }

/* 4. Le calculateur */
.calc { padding-block: var(--section-gap-l); border-top: 1px solid var(--color-rule); }
.calc__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; }
.calc__lead { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); }
.calc__form { margin-top: var(--space-3xl); display: grid; gap: var(--space-2xl); }
.field { display: grid; gap: var(--space-sm); }
.field__l { display: flex; justify-content: space-between; gap: var(--space-md); color: var(--color-ink-2); }
.field__v { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--color-ink) var(--fill, 50%), var(--color-rule) var(--fill, 50%)); }
html[dir="rtl"] input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--color-ink) var(--fill, 50%), var(--color-rule) var(--fill, 50%)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--color-rule); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--color-ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: calc(var(--space-xs) * -1.25); border-radius: 50%; background: var(--color-paper); border: 4px solid var(--color-ink); transition: transform var(--dur-micro) var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--color-paper); border: 4px solid var(--color-ink); }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.95); }
input[type="range"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: 6px; }
.calc__out { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); display: grid; gap: var(--space-lg); }
.calc__n { font-size: var(--text-figure); font-weight: 800; line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; direction: ltr; text-align: start; }
html[dir="rtl"] .calc__n { text-align: end; }
.calc__u { font-size: 0.4em; color: var(--color-ink-2); }
.calc__k { color: var(--color-ink-2); margin-top: var(--space-xs); }
.calc__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.calc__n2 { font-size: var(--text-2xl); font-weight: 800; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.calc__fine { color: var(--color-muted); font-size: var(--text-sm); }

/* 5. Contact */
.contact { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.contact__in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: center; }
.contact__lead { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 40ch; }
.contact__ways { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
.contact__link { color: var(--color-ink); font-weight: 600; font-size: var(--text-lg); text-decoration-color: var(--color-rule); }
.contact__link:hover { text-decoration-color: var(--color-ink); }
.foot { border-top: 1px solid var(--color-rule); padding-block: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
.foot__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md) var(--space-2xl); align-items: start; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot__links a { color: var(--color-ink-2); text-decoration-color: var(--color-rule); }
.foot__links a:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }
.foot__in p:last-child { grid-column: 2; }

/* Une seule apparition : les blocs montent doucement quand ils arrivent à l'écran */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 70rem) {
  .nav__menu { display: inline-flex; align-items: center; }
  .nav__links { display: none; position: absolute; inset-inline: 0; top: 100%; padding: var(--space-md) var(--gutter) var(--space-lg); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); flex-direction: column; gap: 0; }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a { font-size: var(--text-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
  .job, .job:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .job:nth-child(even) .job__media { order: 0; }
  .calc__in, .contact__in { grid-template-columns: minmax(0, 1fr); }
  .calc__out { position: static; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  .foot__in p:last-child { grid-column: auto; }
}
@media (max-width: 56rem) {
  .team__in, .how__in { grid-template-columns: minmax(0, 1fr); }
  .tools__list a { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-lg); }
  .tools__list h3 { font-size: var(--text-xl); }
  .tools__list p { font-size: var(--text-md); }
  .steps li { grid-template-columns: var(--space-lg) minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .nav__in { gap: var(--space-sm); }
  .nav__links { padding-inline: var(--space-md); }
  .brand__mark { width: 30px; }
  .brand__name { font-size: 1.1rem; }
  .nav .btn--small { display: none; }
  .hero__a .btn { width: 100%; }
  .duo { gap: var(--space-lg); }
  .job__phone { height: 78%; }
  .calc__out { padding: var(--space-lg); }
  .calc__row { grid-template-columns: minmax(0, 1fr); }
  .contact__ways .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}