/* Palette relevée sur les captures : le ciel de l'app, son panneau, le cyan de
   ses routes et le vert de ses cercles de visée. Page volontairement sombre —
   le sujet est un ciel, un thème clair le contredirait. Tout est peint. */
:root{
  --night:#071119; --deep:#040A11; --panel:#0E1D2A; --edge:#1B3348;
  --paper:#E8F0F7; --sky:#93B2CD; --faint:#5E7891;
  --route:#55C8F5; --reticle:#4ADE6A; --warn:#E8BE72;
  --display:"IBM Plex Sans Condensed",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,menlo,monospace;
  --gut:clamp(20px,5vw,44px);

  /* Les règles des documents ont été écrites avec un autre vocabulaire de
     couleurs. Plutôt que de les réécrire — et de risquer d'en oublier une —
     ce vocabulaire devient une série d'alias sur la palette ci-dessus. Une
     seule source, donc plus de divergence possible entre les deux moitiés
     du site. C'est ce qui manquait : deux feuilles séparées ont dérivé. */
  --ground:var(--night); --surface:var(--panel); --ink:var(--paper);
  --muted:var(--sky); --rule:var(--edge); --accent:var(--route);
  --sans:var(--body); --mark:var(--warn); --mark-bg:#3A2C13;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--night);color:var(--paper);
  font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--route)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--route);outline-offset:3px;border-radius:3px}

/* ── Barre ─────────────────────────────────────────────────────────────────
   Marque, onglets (accueil, globe, aide, confidentialité), langue. Chaque cible
   fait 44 px de haut — le trait visible peut être plus petit, la zone d'appui
   non. Sur un téléphone, voir plus bas : deux rangées. */
.bar{position:sticky;top:0;z-index:20;background:rgba(7,17,25,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--edge)}
.bar > div{max-width:1080px;margin:0 auto;padding:6px var(--gut);
  display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
.brand{font:700 19px/1 var(--display);letter-spacing:-.01em;color:var(--paper);
  text-decoration:none;margin-inline-end:auto;min-height:44px;white-space:nowrap}

.onglets{display:flex;align-items:center;gap:2px}
.onglet{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;min-width:44px;padding:0 11px;color:var(--sky);text-decoration:none;
  font-size:14.5px;line-height:1.2;white-space:nowrap}
a.onglet:hover{color:var(--route)}
.onglet[aria-current]{color:var(--paper)}
.onglet[aria-current]::after{content:"";position:absolute;inset-inline:11px;inset-block-end:6px;
  height:2px;border-radius:1px;background:var(--route)}
/* Le globe, vitrine du site : mis en valeur sans crier — un point vert « en
   direct » (le vert des cercles de visée de l'app) et une pastille fine. La
   pastille est dessinée plus petite que la zone d'appui. Pas de pulsation : ici
   les choses se posent, elles ne clignotent pas (site.js). */
.onglet-globe{color:var(--paper);isolation:isolate;margin-inline:4px}
.onglet-globe::before{content:"";position:absolute;z-index:-1;inset-block:6px;inset-inline:0;
  border-radius:999px;border:1px solid rgba(85,200,245,.42);background:rgba(85,200,245,.07);
  transition:border-color .18s}
a.onglet-globe:hover{color:var(--paper)}
a.onglet-globe:hover::before{border-color:var(--route)}
.direct{flex:none;width:7px;height:7px;border-radius:50%;background:var(--reticle);
  box-shadow:0 0 0 3px rgba(74,222,106,.16)}
.onglet .court{display:none}

/* ── Héros ─────────────────────────────────────────────────────────────── */
.hero{position:relative;max-width:1080px;margin:0 auto;
  padding:clamp(48px,9vw,92px) var(--gut) clamp(40px,7vw,72px);
  display:grid;gap:clamp(30px,5vw,58px);align-items:center;
  grid-template-columns:1fr}
@media(min-width:880px){.hero{grid-template-columns:1.08fr .92fr}}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--reticle);margin:0 0 18px}
h1{font:700 clamp(38px,6.4vw,66px)/1.02 var(--display);letter-spacing:-.022em;
  margin:0 0 20px;text-wrap:balance}
h1 .dim{color:var(--sky)}
.lede{font-size:clamp(17px,2vw,19.5px);color:var(--sky);margin:0 0 26px;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pill{display:inline-block;font:500 13.5px/1 var(--mono);letter-spacing:.02em;
  padding:9px 14px;border-radius:999px;border:1px solid var(--edge);
  background:var(--panel);color:var(--sky)}
.pill b{color:var(--reticle);font-weight:500}

/* Trace de trajectoire — écho de la flèche de mouvement apparent de l'app. */
.trace{position:absolute;inset:auto 0 0 0;height:130px;width:100%;
  pointer-events:none;opacity:.5}
.trace path{fill:none;stroke:var(--route);stroke-width:1.4;stroke-dasharray:7 9;
  stroke-dashoffset:900;animation:draw 3.2s .35s cubic-bezier(.22,.7,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ── Téléphone ─────────────────────────────────────────────────────────── */
.phone{position:relative;margin-inline:auto;width:min(300px,74vw);
  border-radius:36px;padding:7px;background:linear-gradient(160deg,#22364a,#0b1622);
  box-shadow:0 34px 70px -28px #000,0 0 0 1px var(--edge)}
.phone img{border-radius:29px;width:100%;height:auto;aspect-ratio:660/1428}
.hero .phone{width:min(322px,76vw)}

/* ── Rythme ────────────────────────────────────────────────────────────── */
main{max-width:1080px;margin:0 auto;padding:0 var(--gut) 20px}
.band{border-top:1px solid var(--edge);padding:clamp(52px,8vw,96px) 0}
.feature{display:grid;gap:clamp(26px,4.5vw,58px);align-items:center;
  grid-template-columns:1fr}
@media(min-width:880px){
  .feature{grid-template-columns:.92fr 1.08fr}
  .feature.flip .shot{order:2}
}
h2{font:700 clamp(27px,3.6vw,40px)/1.1 var(--display);letter-spacing:-.018em;
  margin:0 0 14px;text-wrap:balance}
.feature p{color:var(--sky);margin:0 0 14px;max-width:46ch}
.tag{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:12px}

/* Relevé repris d'une vraie capture — pas un exemple inventé. */
.readout{font:400 13.5px/1.75 var(--mono);color:var(--sky);background:var(--panel);
  border:1px solid var(--edge);border-radius:12px;padding:14px 16px;margin-top:20px;
  overflow-x:auto}
.readout b{color:var(--paper);font-weight:500}
.readout .r{color:var(--route)}
.readout .g{color:var(--reticle)}

/* ── Transits : pas de capture, une mesure ─────────────────────────────── */
.transit{background:var(--panel);border:1px solid var(--edge);border-radius:18px;
  padding:clamp(26px,4vw,44px)}
.figs{display:grid;gap:22px;margin:26px 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.figs div{border-top:2px solid var(--reticle);padding-top:12px}
.figs .n{font:700 clamp(24px,3vw,32px)/1 var(--display);color:var(--paper);
  font-variant-numeric:tabular-nums;display:block}
.figs .k{font-size:14.5px;color:var(--sky);display:block;margin-top:5px}

/* ── Prix ──────────────────────────────────────────────────────────────── */
.aim .readout{max-width:62ch}
.cols{display:grid;gap:0 46px;grid-template-columns:1fr}
@media(min-width:760px){.cols{grid-template-columns:1fr 1fr}}
.cols p{color:var(--sky);margin:0 0 14px}
.free h2{margin-bottom:18px}
.free ul{margin:0;padding:0;list-style:none;display:grid;gap:11px;max-width:56ch}
.free li{color:var(--sky);padding-inline-start:26px;position:relative}
.free li::before{content:"";position:absolute;inset-inline-start:2px;top:.66em;width:9px;height:9px;
  border:1.6px solid var(--reticle);border-radius:50%}

footer{border-top:1px solid var(--edge);background:var(--deep)}
footer div{max-width:1080px;margin:0 auto;padding:36px var(--gut) 52px;
  color:var(--faint);font-size:14px}
footer p{margin:0 0 9px;max-width:70ch}

/* ── Mouvement ─────────────────────────────────────────────────────────── */
.js .rise{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rise.seen{opacity:1;transform:none}
.js .hero .rise{transition-delay:var(--d,0s)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{opacity:1;transform:none;transition:none}
  .trace path{animation:none;stroke-dashoffset:0}
}

/* ── Sélecteur de langue ───────────────────────────────────────────────────
   Sept langues ne tiennent pas à plat dans une barre collante en téléphone :
   `<details>` les replie sans une ligne de script, et reste utilisable au
   clavier parce que c'est un élément natif. */
.langues{position:relative;font:400 13.5px/1 var(--body)}
/* 44 px d'appui, pastille de 30 dessinée dedans (::before). */
.langues summary{list-style:none;cursor:pointer;color:var(--sky);position:relative;isolation:isolate;
  min-height:44px;padding:0 12px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.langues summary::before{content:"";position:absolute;z-index:-1;inset-block:7px;inset-inline:0;
  border:1px solid var(--edge);border-radius:999px}
.langues summary::-webkit-details-marker{display:none}
.langues summary::after{content:"";width:5px;height:5px;border-inline-end:1.4px solid currentColor;
  border-block-end:1.4px solid currentColor;transform:rotate(45deg);margin-block-start:-3px;opacity:.7}
.langues summary:hover{color:var(--route)}
.langues summary:hover::before{border-color:var(--route)}
.langues[open] summary{color:var(--paper)}
.langues .menu{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 2px);z-index:30;
  background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:7px;
  display:grid;gap:1px;min-width:158px;box-shadow:0 20px 44px -18px #000}
.langues .menu a,.langues .menu span{display:flex;align-items:center;min-height:44px;padding:0 11px;border-radius:7px;
  text-decoration:none;color:var(--sky);font-size:14px}
.langues .menu a:hover{background:var(--edge);color:var(--paper)}
.langues .menu [aria-current]{color:var(--paper);background:var(--edge)}

/* En pied de page la place ne manque pas : liste à plat, donc visible sans
   avoir à deviner qu'un menu existe. */
.langues.plat{display:flex;flex-wrap:wrap;gap:0 16px;margin-block-start:10px}
.langues.plat a,.langues.plat span{display:inline-flex;align-items:center;min-height:44px}
.langues.plat a{color:var(--faint);text-decoration:none}
.langues.plat a:hover{color:var(--route)}
.langues.plat [aria-current]{color:var(--sky)}

/* ── Pages de documentation ────────────────────────────────────────────────
   Même palette et même typographie que l'accueil ; seules changent la
   largeur de lecture et l'échelle des titres, parce qu'on lit ici un texte
   suivi et non une page d'accroche. */
.doc{max-width:760px;margin:0 auto;padding:38px var(--gut) 90px}
.doc h1{font-family:var(--display);font-size:clamp(28px,5vw,40px);line-height:1.1;letter-spacing:-.025em;margin:0 0 6px;text-wrap:balance}
.doc h2{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.015em;margin:38px 0 10px;text-wrap:balance}
.doc h3{font-family:var(--display);font-weight:600;font-size:17px;margin:26px 0 6px}
.doc p,.doc li{color:var(--ink)}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px;padding-inline-start:22px}
.doc li{margin-bottom:6px}
.doc .lede{color:var(--muted);font-size:19px;margin-bottom:26px}
.doc .updated{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.doc a{color:var(--accent)}
.doc code{font-family:var(--mono);font-size:.86em;background:var(--ground);padding:1px 5px;border-radius:3px}
/* Une adresse d'API entière ne se coupe nulle part : en arabe, elle élargissait
   toute la page de 90 px à 375 de large, et la barre avec elle — marque et
   premier onglet hors de l'écran (relevé le 25/09/2026). */
.doc code{overflow-wrap:anywhere}
.doc blockquote{margin:0 0 16px;padding:12px 16px;border-inline-start:3px solid var(--accent);
background:var(--surface);color:var(--muted)}
.doc blockquote p:last-child{margin:0}
.doc .scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:4px;margin:0 0 18px;background:var(--surface)}
.doc table{width:100%;border-collapse:collapse;font-size:15px}
.doc th{text-align:start;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
padding:9px 13px;border-bottom:1px solid var(--rule);white-space:nowrap}
.doc td{padding:10px 13px;border-bottom:1px solid var(--rule);vertical-align:top}
.doc tr:last-child td{border-bottom:none}
.doc mark{background:var(--mark-bg);color:var(--mark);font-family:var(--mono);font-size:.85em;
padding:1px 6px;border-radius:3px;font-weight:600}
.doc footer{background:none;border-top:1px solid var(--rule);margin-top:56px;padding-top:20px;font-size:13px;color:var(--faint)}
.doc footer a{color:var(--muted)}
.doc hr{border:0;border-top:1px solid var(--rule);margin:32px 0}

/* ── Le ciel du héros ──────────────────────────────────────────────────────
   Une toile posée derrière le contenu, jamais devant : elle n'intercepte
   aucun geste et n'entre pas dans l'ordre de tabulation. Le contenu du héros
   passe donc au-dessus sans qu'on ait à empiler des z-index partout. */
.hero > .sky{position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.6s ease .3s}
.js .hero > .sky{opacity:1}
/* Le contenu passe au-dessus de la toile. Le tracé, lui, ne reçoit qu'un
   z-index : lui imposer `position` ici écraserait son `absolute` d'origine,
   il rentrerait dans la grille et prendrait la cellule du texte. */
.hero > div{position:relative;z-index:1}
.hero > .trace{z-index:1}

/* Le tracé d'entrée reste, mais s'efface une fois le ciel installé : deux
   dessins de trajectoire au même endroit se disputent l'attention. */
.js .trace{opacity:.28}

/* ── La barre ne se détache qu'au défilement ───────────────────────────────
   Posée d'emblée, sa bordure coupe le héros en deux pour rien. */
.bar{border-block-end:1px solid transparent;
  transition:border-color .35s ease,background-color .35s ease}
.bar.posee{border-block-end-color:var(--edge)}
@media(prefers-reduced-motion:reduce){
  .bar{border-block-end-color:var(--edge)}
  .hero > .sky{transition:none}
}

/* ── Les captures répondent au survol ──────────────────────────────────────
   Un décalage de quatre pixels, pas un effet : il signale qu'on regarde
   l'écran d'un appareil, pas une image plate. Désactivé au doigt, où le
   survol n'existe pas et laisserait l'état collé après un appui. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .band .phone{transition:transform .5s cubic-bezier(.2,.7,.3,1),
                          box-shadow .5s cubic-bezier(.2,.7,.3,1)}
  .band .phone:hover{transform:translateY(-4px);
    box-shadow:0 42px 80px -30px #000,0 0 0 1px var(--route)}
}

/* Les mesures des transits s'alignent sur leur chiffre : le script fige la
   largeur pendant qu'il compte, encore faut-il que la colonne ne bouge pas. */
.figs .n{font-variant-numeric:tabular-nums}

/* ── Le logo dans la barre ─────────────────────────────────────────────────
   La variante sombre de l'icône : fond transparent, viseur cyan, cellule
   blanche — c'est déjà la palette du site, rien à adapter. Elle est décorative
   au sens strict, le nom la suit ; d'où `alt=""` côté balise.

   Dimensions posées dans l'attribut *et* ici : sans elles, la barre saute d'un
   demi-pixel au chargement de l'image, et c'est l'élément le plus haut de la
   page. */
.brand{display:inline-flex;align-items:center;gap:9px}
.brand img{width:26px;height:26px;flex:none}

/* Unités de l'exemple : métrique par défaut, impérial pour les régions qui le
   lisent (US, UK, LR, MM). La bascule est en CSS et non en JS pour qu'elle soit
   décidée AVANT le premier rendu — un script qui réécrit le texte après coup
   ferait clignoter la ligne. Le script de <head> ne pose que la classe. */
.imp{display:none}
html.imperial .met{display:none}
html.imperial .imp{display:inline}
.units{font:400 13px/1.65 var(--body);color:var(--faint);margin:12px 0 0}
.units b{color:var(--sky);font-weight:500}

/* ── Téléchargement ─────────────────────────────────────────────────────────
   Deux chemins, côte à côte, et aucun mot pour les expliquer : un QR posé
   contre un badge App Store se lit tout seul. La légende qui vivait ici
   disait à voix haute ce que le dessin montrait déjà.

   Le QR ne s'affiche que là où il sert — sur un écran depuis lequel on ne peut
   PAS installer. Sur iPhone comme sur iPad, il demanderait de se scanner
   soi-même : `html.ios` le retire, et prime sur la largeur parce qu'un iPad
   est large ET installable. */
.get{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0 0 22px}
.get .badge{display:inline-block;line-height:0;transition:opacity .18s}
.get .badge:hover{opacity:.82}
.get .badge img{width:150px;height:auto;display:block}

/* Le trait sépare deux gestes — toucher, ou scanner — sans les nommer.
   `inset-inline-start` et non `left` : en arabe la rangée s'inverse, et le
   trait doit suivre. */
.qr{display:none;position:relative;padding-inline-start:20px;line-height:0}
.qr::before{content:"";position:absolute;inset-block:8px;inset-inline-start:0;
  width:1px;background:var(--edge)}
.qr .card{display:block;background:#fff;border-radius:12px;padding:9px;
  box-shadow:0 2px 16px rgba(0,0,0,.32);transition:transform .18s}
.qr:hover .card{transform:scale(1.04)}
.qr img{width:104px;height:104px;display:block}

@media(min-width:760px){.qr{display:block}}
html.ios .qr{display:none}

/* ── Le globe en direct ─────────────────────────────────────────────────────
   Un lien, pas un bouton : le téléchargement reste l'appel principal du héros ;
   le globe est la preuve qu'on peut aller voir tout de suite, sans rien installer. */
.lien-globe{margin:20px 0 0;font:500 15.5px/1.45 var(--body);color:var(--route);max-width:52ch}
.lien-globe a{color:var(--route);text-decoration:none;border-bottom:1px solid rgba(85,200,245,.45)}
.lien-globe a:hover{border-bottom-color:var(--route)}

/* ── La barre sur un téléphone : deux rangées, et seule celle des onglets reste ─
   Six langues, quatre pages et un sélecteur ne tiennent pas sur une ligne de 360
   à 430 px : la barre débordait de 70 à 132 px dans cinq langues sur six, et le
   sélecteur de langue sortait de l'écran (mesuré le 24/09/2026). Trois voies
   écartées :
   - un menu replié cachait justement ce qu'on vient chercher — l'onglet Globe ;
   - un défilement horizontal laissait « Confidentialité » hors de vue, sans rien
     qui dise qu'il existe ;
   - des libellés tronqués ne se lisent plus.
   Retenu : un retour à la ligne MAÎTRISÉ. En haut la marque et la langue ; en
   dessous les quatre onglets, sur toute la largeur, comme une barre d'onglets
   d'application. Le globe y prend son libellé court (« Globe »), son point
   « en direct » disant le reste. Et pour ne pas payer deux rangées collantes,
   `top` négatif : au défilement, la rangée du haut part avec la page et seuls
   les onglets restent collés — 45 px, moins que l'ancienne barre de 55. La
   langue reste dans le pied de chaque page, en liste plate.
   `--rangee` : hauteur de la rangée du haut, padding compris. */
@media (max-width:899px){
  .bar{--rangee:48px;top:calc(-1 * var(--rangee))}
  .bar > div{padding:4px var(--gut) 0;column-gap:10px}
  /* Les zones d'appui débordent dans la gouttière ; les textes s'alignent sur elle. */
  .onglets{order:3;flex:1 0 100%;justify-content:space-between;gap:0;margin-inline:-10px}
  .langues{margin-inline-end:-12px}
  .onglet{padding:0 10px;font-size:14px}
  .onglet[aria-current]::after{inset-inline:10px}
  .onglet-globe{margin-inline:0;padding-inline:12px}
  .onglet .long{display:none}
  .onglet .court{display:inline}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .bar{border-block-end-color:var(--edge)}
}