/* ==========================================================================
   MONFI BANK — v3
   Composition inspirée de Winden : panneaux arrondis en dégradé, titrage
   néo-grotesque serré, grilles « bento », interfaces flottantes.
   Couleurs : la charte, et rien d'autre — neuf valeurs du marine au blanc.
   ========================================================================== */

@font-face{font-family:"MONFI Serif";font-weight:100 900;font-style:normal;font-display:swap;src:url(assets/fonts/monfi-serif.woff2) format("woff2")}
@font-face{font-family:Inter;src:url(assets/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600 700;font-display:swap}

:root{
  /* la charte */
  --marine:#03045E; --bleu:#0077B6; --bm:#248AC0; --bc:#499ECB; --azur:#6DB1D5;
  --ciel:#92C5E0; --cp:#B6D8EA; --lavis:#DBECF5; --blanc:#FFFFFF;
  /* usages */
  --ink:var(--marine);
  --mut:rgba(3,4,94,.72);
  --line:rgba(3,4,94,.10);
  --line2:rgba(3,4,94,.16);
  --soft:#F1F7FB;                       /* lavis à mi-chemin du blanc */
  --disp:"MONFI Serif",Georgia,"Times New Roman",serif;
  /* le texte courant suit le titrage, comme en v1 ; --body reste Inter et
     ne sert plus qu'à l'interface — étiquettes, boutons, chiffres. */
  --serif:"MONFI Serif",Georgia,"Times New Roman",serif;
  --body:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* le dégradé unique : sombre en haut, clair en bas */
  /* D'une couleur pure à l'autre, sur toute la hauteur. Le palier de marine
     qui tenait le premier quart écrasait la rampe dans les trois quarts
     restants : la transition se faisait vite et mollement. Étalée sur toute
     la hauteur, elle est à la fois plus douce et plus franche — on voit le
     marine devenir bleu au lieu de le trouver déjà bleu. */
  --ombre:linear-gradient(180deg,#03045E 0%,#0077B6 100%);
  --lav-grad:linear-gradient(180deg,#FFFFFF 0%,#DBECF5 100%);
  --btn-grad:linear-gradient(97deg,#0077B6 0%,#03045E 130%);
  --r-xl:32px; --r-l:24px; --r-m:18px; --r-s:12px;
  --sh-card:0 1px 2px rgba(3,4,94,.06),0 6px 14px rgba(3,4,94,.06),0 24px 40px rgba(3,4,94,.07),0 60px 80px rgba(3,4,94,.05);
  --sh-float:0 2px 4px rgba(3,4,94,.08),0 12px 26px rgba(3,4,94,.12),0 40px 70px rgba(3,4,94,.14);
  --glow:0 3px 7px rgba(0,119,182,.18),0 13px 13px rgba(0,119,182,.14),0 30px 18px rgba(0,119,182,.08);
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(16px,4vw,40px);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.7 var(--serif);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
ul{margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:400;letter-spacing:-.016em;line-height:1.1;text-wrap:balance}
::selection{background:rgba(0,119,182,.35);color:var(--marine)}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* le verrou MUSD : M appuyé, USD normal */
/* Le verrou de la marque : **le M en gras, USD en corps normal**.

   Pas en maigre. La consigne écrite est sans ambiguïté — « please keep the M
   in bold but the USD must not be thinner, just normal thickness » — et le 200
   posé plus tôt venait d'une mauvaise lecture d'un « light » antérieur : il
   voulait dire « pas gras », non « maigre ». USD est donc à 400, comme le
   texte courant qui l'entoure, et c'est le seul contraste du M qui fait le
   verrou. */
.musd{font-weight:400;letter-spacing:inherit;white-space:nowrap}
.musd b{font-weight:700}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:820px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ------------------------------------------------------------------ type */
/* Un cran plus bas, partout. Un titre de 92 px sur un écran de portable
   posé à cinquante centimètres occupe le champ de vision entier : on le
   subit avant de le lire. */
.h-xxl{font-size:clamp(34px,4.6vw,64px);font-weight:300;letter-spacing:-.018em;line-height:1.08}
.h-xl{font-size:clamp(29px,3.5vw,48px);font-weight:300;letter-spacing:-.016em;line-height:1.12}
.h-l{font-size:clamp(25px,2.8vw,38px);font-weight:700;letter-spacing:-.012em;line-height:1.16}
.h-m{font-size:clamp(21px,2vw,28px);font-weight:700;letter-spacing:-.008em;line-height:1.2}
.h-s{font-size:clamp(18px,1.4vw,20px);font-weight:600;letter-spacing:-.004em;line-height:1.3}
.lead{font-size:clamp(17px,1.35vw,20px);font-weight:300;line-height:1.62;color:var(--mut);max-width:62ch}
.center .lead,.lead.center{margin-left:auto;margin-right:auto}
.small{font-size:14px;color:var(--mut)}
.mt-xs{margin-top:10px}.mt-s{margin-top:16px}.mt{margin-top:22px}.mt-l{margin-top:34px}.mt-xl{margin-top:clamp(40px,5vw,64px)}

/* l'étiquette : une pastille, comme le « WHY WINDEN? » */
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;
  font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);
  background:#fff;border:1px solid var(--line2);box-shadow:0 1px 2px rgba(3,4,94,.05)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bleu);box-shadow:0 0 0 3px rgba(0,119,182,.16)}
.on-dark .tag{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);box-shadow:none}
.on-dark .tag::before{background:var(--ciel);box-shadow:0 0 0 3px rgba(146,197,224,.25)}
.tag.plain::before{display:none}
.tag.plain{padding-left:14px}

/* ------------------------------------------------------------------ boutons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.center .btns,.btns.center{justify-content:center}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;
  padding:0 24px;border-radius:999px;font:600 15px/1 var(--body);letter-spacing:-.005em;text-decoration:none;
  border:0;cursor:pointer;white-space:nowrap;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s}
.btn .ar{width:18px;height:18px;transition:transform .5s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
/* Le bouton porte la couleur principale, pleine. Un dégradé sur un objet
   de 50 px de haut ne se lit pas comme un dégradé : il se lit comme une
   couleur sale. Le dégradé reste là où il a de la place — les fonds. */
.btn.primary{background:var(--bleu);color:#fff;box-shadow:var(--glow)}
.btn.primary:hover{transform:translateY(-1px);background:var(--bm);box-shadow:var(--glow),0 10px 30px rgba(0,119,182,.30)}
.btn.ghost{background:#fff;color:var(--marine);box-shadow:inset 0 0 0 1px var(--line2),0 1px 2px rgba(3,4,94,.05)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--bleu),0 6px 18px rgba(3,4,94,.08)}
.on-dark .btn.primary{background:#fff;color:var(--marine);box-shadow:0 3px 7px rgba(3,4,94,.25),0 18px 30px rgba(3,4,94,.25)}
.on-dark .btn.primary:hover{box-shadow:0 0 0 6px rgba(255,255,255,.12),0 18px 30px rgba(3,4,94,.3)}
.on-dark .btn.ghost{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.on-dark .btn.ghost:hover{background:rgba(255,255,255,.14)}
.arrow{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:600 15px/1 var(--body);color:var(--bleu);text-decoration:none}
.arrow::after{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .5s var(--ease)}
.arrow:hover::after{transform:translateX(4px)}
.on-dark .arrow{color:#fff}

/* ------------------------------------------------------------------ en-tête */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none}
.prog i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--bleu),var(--ciel))}
/* L'en-tête tient toute la largeur. C'était une capsule flottante centrée
   sur 1360 px : jolie, mais elle redoublait le cadre arrondi du héro et
   laissait deux vides aux extrémités sur un grand écran. */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;padding:0;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.hd .bar{max-width:none;margin:0;display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(14px,1.8vw,30px);height:76px;
  padding:0 clamp(16px,2.6vw,40px);border-radius:0;
  color:#fff;background:transparent;transition:background .5s var(--ease),box-shadow .5s var(--ease),color .5s var(--ease),backdrop-filter .5s}
.hd .logo{display:block;position:relative;width:150px;height:38px;flex:none}
.hd .logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s}
.hd .logo .lc{opacity:0}
.hd nav.main{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;white-space:nowrap}
.hd .nav-top{display:inline-flex;align-items:center;gap:4px;padding:10px 14px;border-radius:999px;font:500 15px/1 var(--body);
  text-decoration:none;color:inherit;background:none;border:0;cursor:pointer;transition:background .3s}
.hd .nav-top:hover,.hd .nav-top[aria-expanded="true"]{background:rgba(255,255,255,.12)}
.hd .chev{width:16px;height:16px;transition:transform .3s}
.hd .nav-top[aria-expanded="true"] .chev{transform:rotate(180deg)}
.hd .sp{flex:1}
.hd .acts{display:flex;align-items:center;gap:8px}
.hd .login{padding:10px 16px;font:500 15px/1 var(--body);text-decoration:none;color:inherit;border-radius:999px}
.hd .login:hover{background:rgba(255,255,255,.12)}
.hd .join{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none;
  background:#fff;color:var(--marine);box-shadow:0 4px 14px rgba(3,4,94,.22);transition:transform .5s var(--ease)}
.hd .join:hover{transform:translateY(-1px)}
.hd .burger{display:none;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:inherit;cursor:pointer;position:relative}
.hd .burger span{position:absolute;left:14px;right:14px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease),top .4s var(--ease)}
.hd .burger span:first-child{top:18px}.hd .burger span:last-child{top:26px}
.hd .burger[aria-expanded="true"] span:first-child{top:22px;transform:rotate(45deg)}
.hd .burger[aria-expanded="true"] span:last-child{top:22px;transform:rotate(-45deg)}
/* hors du héros : une capsule blanche dépolie */
.hd.scrolled{padding-top:0}
/* Opaque, et pas dépoli : sur un fond qui bouge, une barre translucide
   laisse passer le mouvement derrière les libellés du menu. */
.hd.scrolled .bar,.hd.menu-open .bar{background:#fff;color:var(--marine);
  box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(3,4,94,.08)}
.hd.scrolled .logo .lw,.hd.menu-open .logo .lw{opacity:0}
.hd.scrolled .logo .lc,.hd.menu-open .logo .lc{opacity:1}
.hd.scrolled .nav-top:hover,.hd.scrolled .nav-top[aria-expanded="true"],.hd.scrolled .login:hover{background:var(--soft)}
.hd.scrolled .join,.hd.menu-open .join{background:var(--bleu);color:#fff;box-shadow:var(--glow)}
.hd.scrolled .burger,.hd.menu-open .burger{background:var(--soft)}
/* une page qui ouvre sur du clair (404, pages légales) : capsule dès le départ */
.light-top .hd .bar{background:rgba(255,255,255,.82);color:var(--marine);box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(3,4,94,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.light-top .hd .logo .lw{opacity:0}.light-top .hd .logo .lc{opacity:1}
.light-top .hd .join{background:var(--btn-grad);color:#fff}
.light-top .hd .nav-top:hover,.light-top .hd .login:hover{background:var(--soft)}
.light-top .hd .burger{background:var(--soft)}

/* méga-menus : un bandeau pleine largeur sous l'en-tête.

   `position:static` sur l'entrée de menu : c'est la ligne qui fait tout. Un
   bloc absolu se mesure sur le premier ancêtre positionné ; tant que c'était
   l'entrée de menu, le panneau était large comme elle. Ce ne l'est plus, donc
   il se mesure sur l'en-tête, qui va d'un bord à l'autre.

   Le panneau prend toute la largeur, mais son contenu se range sur la même
   grille de 1240 px que les pages : les colonnes du menu tombent sous les
   colonnes du contenu. */
.nav-item{position:static}
.mega{position:absolute;left:0;right:0;top:100%;z-index:60;color:var(--marine);
  background:#fff;border-radius:0;padding:0;white-space:normal;
  border-top:1px solid var(--line);box-shadow:0 26px 54px -26px rgba(3,4,94,.28);
  animation:megain .26s var(--ease)}
/* la bande de rattrapage entre la barre et le panneau : sans elle, le menu se
   referme quand la souris traverse le pixel qui les sépare */
.mega::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
@keyframes megain{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* Cinq colonnes dans 1240 px au lieu de 980 : 248 px chacune, et la gouttière
   passe de 4 à 32 px. C'est tout ce que « trop serré » voulait dire. */
.mega-in{max-width:var(--max);margin:0 auto;padding:46px clamp(20px,3vw,44px) 42px;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
/* Un menu à deux rubriques ne s'étale pas sur cinq colonnes. Ses colonnes
   gardent une largeur de lecture et se rangent à gauche, sur la même verticale
   que le logo et que le contenu des pages — plutôt que centrées, ce qui
   laissait la colonne d'une seule entrée flotter au milieu du vide. */
.mega:not(.wide) .mega-in{grid-template-columns:repeat(2,minmax(0,340px));
  justify-content:start;gap:clamp(40px,6vw,120px)}
.mm-col{padding:0;min-width:0}

/* L'intitulé de colonne : capitales espacées, et un filet sous lui qui tient
   lieu de séparation. Deux colonnes voisines se lisent sans trait vertical. */
/* L'intitulé de colonne. Dans Products & Services c'est devenu un lien vers la
   page de la famille : il garde exactement la même apparence au repos — un
   surtitre qui se mettrait à ressembler à un bouton déséquilibrerait la
   colonne — et ne se signale qu'au survol, par le filet qui passe au bleu et
   le mot qui fonce. C'est assez : le curseur dit le reste. */
.mm-head{display:block;font:700 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bleu);margin:0 0 14px;padding-bottom:11px;border-bottom:1px solid var(--line);
  text-decoration:none;transition:color .25s var(--ease),border-color .25s var(--ease)}
a.mm-head:hover,a.mm-head:focus-visible{color:var(--marine);border-bottom-color:var(--bleu)}

/* Une colonne sans surtitre — Who We Serve depuis le 06/10 — ne doit pas
   démarrer plus haut que ses voisines : son premier article reprend la hauteur
   qu'occupait le surtitre, pour que les deux colonnes restent sur la même
   ligne de départ. */
.mm-col > .mm-item:first-child{margin-top:0}

/* Les entrées respirent : 12 px de haut et de bas, et le fond du survol
   déborde de 10 px sur les côtés pour que la pastille entoure le texte sans
   décaler la colonne. */
.mm-item{display:flex;gap:13px;align-items:flex-start;padding:12px 10px;margin:0 -10px;
  border-radius:12px;text-decoration:none;color:inherit;transition:background .25s var(--ease)}
.mm-item + .mm-item{margin-top:2px}
.mm-item:hover{background:var(--soft)}
/* Le picto n'est plus une vignette : un trait fin, à la taille du texte, comme
   dans les sections des pages. */
.mm-item .mi{flex:none;width:22px;height:22px;padding:0;border-radius:0;background:none;
  box-shadow:none;color:var(--bleu);margin-top:1px}
.mm-item span{display:flex;flex-direction:column;gap:3px;padding-top:0}
.mm-item b{font:600 15px/1.3 var(--body)}
.mm-item i{font:400 13px/1.45 var(--body);font-style:normal;color:var(--mut)}

/* Le pied : une bande teintée sur toute la largeur, et son lien aligné sur la
   même grille que les colonnes au-dessus. */
.mega-foot{margin:0;padding:0;border-top:1px solid var(--line);background:var(--soft)}
.mega-foot .arrow{display:flex;max-width:var(--max);margin:0 auto;
  padding:17px clamp(20px,3vw,44px);font-size:14px}

/* menu mobile */
.mnav{position:fixed;inset:0;z-index:55;background:#fff;padding:104px var(--pad) 32px;overflow:auto;display:flex;flex-direction:column;gap:20px}
.mnav[hidden]{display:none}
.mnav nav{display:flex;flex-direction:column}
.mnav nav>a,.mnav summary{display:flex;align-items:center;justify-content:space-between;padding:18px 4px;border-bottom:1px solid var(--line);
  font:500 22px/1.1 var(--disp);letter-spacing:-.02em;text-decoration:none;color:var(--marine);cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary svg{width:22px;height:22px;transition:transform .3s}
.mnav details[open] summary svg{transform:rotate(180deg)}
.msub-in{display:flex;flex-direction:column;padding:6px 0 14px}
.msub-in a{display:flex;align-items:center;gap:12px;padding:10px 4px;text-decoration:none;font:500 15.5px/1.3 var(--body)}
.msub-in .mi{width:32px;height:32px;padding:7px;border-radius:9px;background:var(--soft);color:var(--bleu);flex:none}
.msub-in .mm-head{margin:14px 4px 6px}
.msub-in .msub-all{color:var(--bleu);font-weight:600}
.mnav-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}

/* ------------------------------------------------------------------ héros */
/* Le héro touche les quatre bords. Le cadre arrondi posait une marge
   blanche de 10 px tout autour : un cadre dans le cadre, qui rapetissait
   l'image au lieu de la mettre en valeur. */
.hero{position:relative;margin:0;border-radius:0;overflow:hidden;isolation:isolate;color:#fff;background:var(--ombre);
  padding:clamp(150px,18vh,200px) 0 clamp(80px,10vw,130px)}
.hero.home{min-height:min(84svh,820px);padding-bottom:clamp(80px,8vw,120px)}
/* Le slider des partenaires suit le héro de près : il sert de ligne de
   flottaison. On resserre l'espace entre les deux. */
.slider-sec{padding:clamp(34px,3.4vw,52px) 0 clamp(44px,4.6vw,70px)}
.slider-sec .marq-label{margin-bottom:22px}
.hero.sub{min-height:min(76svh,720px);display:flex;align-items:center}
.hero.sub>.wrap{width:100%}
/* les lumières : deux halos ciel posés sur le dégradé, comme les nappes de Winden */
/* LA LUMIÈRE DU HÉROS — verticale, et rien d'autre.

   C'est écrit dans le document de la cliente, et c'est une règle de marque, pas
   une préférence : « The colors must be dark to light from up to down, not from
   right to left ». Les trois nappes rondes qui étaient ici faisaient exactement
   l'inverse — de la lumière posée en halo, et de la lumière qui venait des
   côtés. Il ne reste qu'une montée verticale : sombre en haut, où se tiennent
   les titres, clair en bas, où le héros rejoint la page. */
.hero .glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(3,4,94,.42) 0%, rgba(3,4,94,.10) 34%,
    rgba(0,119,182,.16) 68%, rgba(146,197,224,.34) 100%)}
/* le sigle en filigrane, comme sur la couverture de la charte */
/* Le sigle en filigrane est retiré : il se lisait comme une tache dans le
   fond animé, et deux motifs qui bougent l'un sur l'autre se gênent. */
.hero .mark,.panel>.mark{display:none}
.hero .grain,.panel .grain{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 70%);mask:linear-gradient(180deg,#000,transparent 70%)}
.hero h1{color:#fff}
.hero .lead{color:var(--cp)}
/* Un titre centré sur trois lignes oblige l'œil à chercher le début de
   chaque ligne. Au fer à gauche, il y a une seule verticale à suivre —
   celle du surtitre, du titre, du chapô et des boutons. */
.hero .hc{text-align:left;max-width:980px;margin:0}
.hero .hc .lead{margin:24px 0 0}
.hero .hc .btns{justify-content:flex-start}
.hero .hl{max-width:860px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:999px;font:500 14px/1 var(--body);color:#fff;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:28px}
.badge b{padding:6px 10px;border-radius:999px;background:#fff;color:var(--marine);font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.anim-in{animation:jumpIn .9s cubic-bezier(.85,0,.15,1) both}
@keyframes jumpIn{0%{opacity:0;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
/* La mention de licence se range à gauche, comme tout le reste du héros.
   Le `auto` la centrait dans la colonne de texte : elle partait seule vers
   la droite pendant que le titre, les boutons et le surtitre tenaient la
   verticale du logo. */
.trust{display:flex;gap:14px;align-items:flex-start;max-width:640px;margin:44px 0 0;padding:16px 20px;border-radius:var(--r-m);text-align:left;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.trust svg{flex:none;width:26px;height:26px;color:var(--ciel)}
.trust p{font-size:14px;line-height:1.55;color:var(--cp)}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);animation:bob 2.6s ease-in-out infinite}
.scroll-cue svg{width:18px;height:18px}
@keyframes bob{50%{transform:translate(-50%,6px)}}
.hero.home .scroll-cue{display:none}

/* deux colonnes dans un héros */
.hduo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center}

/* ------------------------------------------------------------------ sections */
.sec{position:relative;padding:clamp(72px,9vw,124px) 0}
.sec.tight{padding:clamp(48px,6vw,80px) 0}
.sec.flush-top{padding-top:0}
/* un panneau : la section posée comme une carte, bords arrondis, marges latérales */
/* Une section n'est pas un objet : elle n'a pas de bord à arrondir. Les
   angles restent aux blocs — cartes, bento, fenêtres, boutons. */
.panel{margin:0;border-radius:0;overflow:hidden;isolation:isolate;position:relative}
.panel.lav{background:var(--lav-grad)}
.panel.soft{background:linear-gradient(180deg,var(--soft) 0%,#fff 100%)}
.panel.dark{background:var(--ombre);color:#fff}
.panel.dark .lead,.panel.dark .small{color:var(--cp)}
.panel.dark h2,.panel.dark h3{color:#fff}
.panel.dark .glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(3,4,94,.34) 0%, rgba(3,4,94,.06) 40%,
    rgba(0,119,182,.14) 72%, rgba(146,197,224,.30) 100%)}
.sec-head{max-width:820px}
.sec-head.center{text-align:center;margin:0 auto}
.sec-head .h-l,.sec-head .h-xl{margin-top:20px}
.sec-head .lead{margin-top:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.split.top{align-items:start}
.split.wide-r{grid-template-columns:.9fr 1.1fr}

/* ------------------------------------------------------------------ cartes */
.grid{display:grid;gap:16px}
.c2{grid-template-columns:repeat(2,1fr)}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}.c5{grid-template-columns:repeat(5,1fr)}
.card{position:relative;padding:clamp(24px,2.4vw,34px);border-radius:var(--r-l);background:linear-gradient(170deg,#fff 0%,var(--soft) 100%);
  box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;display:flex;flex-direction:column;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
/* Les titres de carte sont des h3 presque partout, et des h2 là où l'en-tête
   de section a été retiré — Who We Serve et Products & Services, dont les
   intitulés n'étaient pas dans les documents de la cliente. Le niveau change,
   l'apparence non : c'est la hiérarchie du document qui doit être juste, pas
   la taille du texte. */
.card h3,.card .h-seg{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.025em;line-height:1.15}
.card p{margin-top:12px;color:var(--mut);font-size:15.5px;line-height:1.6}
.card .arrow{margin-top:auto;padding-top:22px}
a.card:hover,.card.lift:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-card)}
.card .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;color:#fff;
  background:linear-gradient(145deg,var(--bleu),var(--marine));box-shadow:var(--glow);font:600 14px/1 var(--disp);letter-spacing:0}
.card .ic svg{width:24px;height:24px}
.card .kicker{font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);margin-bottom:12px}
.card .num-k{font:500 15px/1 var(--disp);color:var(--bleu);margin-bottom:26px;letter-spacing:0}
.panel.dark .card,.on-dark .card{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.panel.dark .card p,.on-dark .card p{color:var(--cp)}
.panel.dark .card .kicker,.panel.dark .card .num-k{color:var(--ciel)}
.panel.dark .card .ic{background:#fff;color:var(--marine);box-shadow:none}
.card ul.list{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:0}
.card ul.list li,.ulist li{position:relative;padding:12px 0 12px 28px;border-top:1px solid var(--line);font-size:15.5px}
.card ul.list li:first-child,.ulist li:first-child{border-top:0}
.card ul.list li::before,.ulist li::before{content:"";position:absolute;left:2px;top:17px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 2px,var(--bleu) 2.5px)}
.ulist{list-style:none}
.panel.dark .card ul.list li{border-color:rgba(255,255,255,.14)}
.panel.dark .card ul.list li::before{background:radial-gradient(circle,var(--marine) 0 2px,var(--ciel) 2.5px)}

/* ------------------------------------------------------------------ bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento .b{position:relative;overflow:hidden;border-radius:var(--r-l);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;
  background:linear-gradient(170deg,#fff 0%,var(--lavis) 140%);box-shadow:inset 0 0 0 1px var(--line);min-height:360px}
.bento .b.s2{grid-column:span 2}.bento .b.s3{grid-column:span 3}.bento .b.s4{grid-column:span 4}.bento .b.s6{grid-column:span 6}
.bento .b .n{font:500 14px/1 var(--disp);color:var(--bleu);letter-spacing:0}
.bento .b h3{margin-top:12px;font-size:clamp(24px,2.2vw,32px)}
.bento .b .ulist{margin-top:14px}
.bento .b .ulist li{padding:9px 0 9px 26px;font-size:15px}
.bento .b .ulist li::before{top:13px}
.bento .b .stage{flex:1;display:flex;align-items:flex-end;justify-content:center;margin-top:26px;min-height:150px}
.bento .b.dark{background:var(--ombre);color:#fff;box-shadow:none}
.bento .b.dark .n{color:var(--ciel)}
.bento .b.dark h3{color:#fff}
.bento .b.dark .ulist li{border-color:rgba(255,255,255,.14)}
.bento .b.dark .ulist li::before{background:radial-gradient(circle,var(--marine) 0 2px,var(--ciel) 2.5px)}
.bento .b.dark .arrow{color:#fff}
.bento .b.dark .glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(146,197,224,.34) 100%)}
.bento .b>*{position:relative;z-index:1}

/* ------------------------------------------------------------------ interfaces flottantes */
.ui{background:#fff;color:var(--marine);border-radius:var(--r-m);box-shadow:0 0 0 1px var(--line),var(--sh-float);padding:18px 20px}
.ui .ui-t{font:600 11.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.ui .ui-big{font:500 clamp(36px,4vw,52px)/1 var(--disp);letter-spacing:-.04em;margin-top:10px}
.ui .ui-big em{font:500 15px/1 var(--body);font-style:normal;color:var(--mut);margin-left:8px;letter-spacing:0}
.float{animation:float 6s ease-in-out infinite}
.float.d2{animation-delay:-2s}.float.d3{animation-delay:-4s}
@keyframes float{50%{transform:translateY(-8px)}}

/* les quatre devises du compte */
.ccy{width:100%;max-width:440px}
.ccy .row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px}
.ccy .row:first-of-type{border-top:0;margin-top:8px}
.ccy .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--body);color:#fff;flex:none}
.ccy .row span:nth-child(2){flex:1;font-weight:600}
.ccy .row .pill{font:600 11px/1 var(--body);letter-spacing:.06em;color:var(--bleu);background:var(--lavis);padding:6px 9px;border-radius:999px}
/* l'anneau des actifs ségrégués */
.ring{position:relative;width:180px;height:180px;border-radius:50%;
  background:conic-gradient(var(--bleu) 0 100%);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%)}
.ring-wrap{position:relative;display:grid;place-items:center}
.ring-wrap .ring-c{position:absolute;text-align:center}
.ring-wrap .ring-c b{display:block;font:500 40px/1 var(--disp);letter-spacing:-.04em}
.ring-wrap .ring-c i{font:500 13px/1.2 var(--body);font-style:normal;color:var(--mut)}
.b.dark .ring{background:conic-gradient(#fff 0 100%)}
/* Sur un fond qui bouge, un libellé ne peut pas se reposer sur une teinte
   pâle : le dégradé vif passe par du cyan clair, et #B6D8EA y tombait à
   1,8:1. Un petit texte posé sur un fond animé se compose en blanc —
   c'est la seule couleur qui tienne quelle que soit l'humeur du fond. */
.b.dark .ring-wrap .ring-c i,.on-dark .ring-wrap .ring-c i{color:#fff}
/* le délai de décision */
.timer{width:100%;max-width:300px}
.timer .track{height:10px;border-radius:999px;background:var(--lavis);overflow:hidden;margin-top:16px}
.timer .track i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--marine),var(--bleu),var(--azur));transform-origin:0 50%;transform:scaleX(.08);transition:transform 2.2s var(--ease)}
.in-view .timer .track i{transform:scaleX(1)}
.timer .lbl{display:flex;justify-content:space-between;font:500 12px/1 var(--body);color:var(--mut);margin-top:10px}
/* le sélecteur de durée */
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--lavis);margin-top:18px}
.seg button{border:0;background:none;padding:9px 16px;border-radius:999px;font:600 13.5px/1 var(--body);color:var(--marine);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.seg button[aria-pressed="true"]{background:#fff;box-shadow:0 2px 6px rgba(3,4,94,.12)}
.term{width:100%;max-width:420px}

/* ------------------------------------------------------------------ convertisseur */
/* Le convertisseur remontait de 260 px dans la marge basse du héro. Le
   slider des partenaires occupe désormais cette place : il n'a plus à
   remonter, il prend sa propre section. */
.conv-sec{margin-top:0;position:relative;z-index:3;padding-top:clamp(20px,2.4vw,40px)}
.conv-stage{position:relative;max-width:980px;margin:0 auto}
.conv{max-width:520px;margin:0 auto;background:#fff;border-radius:var(--r-l);box-shadow:0 0 0 1px var(--line),var(--sh-float),0 80px 120px rgba(3,4,94,.12);overflow:hidden}
.conv .hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.conv .t{font:600 15px/1 var(--body)}
.conv .live{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--bleu)}
.conv .live i{width:8px;height:8px;border-radius:50%;background:var(--bleu);box-shadow:0 0 0 0 rgba(0,119,182,.5);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(0,119,182,0)}100%{box-shadow:0 0 0 0 rgba(0,119,182,0)}}
.conv[data-state="ko"] .live i{animation:none;background:var(--ciel)}
.conv .body{padding:20px 22px 22px}
.conv .row{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r-m);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.conv .f{flex:1;min-width:0}
.conv .lb{display:block;font:500 12.5px/1 var(--body);color:var(--mut);margin-bottom:8px}
.conv input,.conv .out{width:100%;border:0;background:none;padding:0;font:500 30px/1.1 var(--disp);letter-spacing:-.03em;color:var(--marine);outline:none}
.conv input:focus-visible{outline:none}
.conv .row:focus-within{box-shadow:inset 0 0 0 1.5px var(--bleu)}
.conv select{appearance:none;-webkit-appearance:none;border:0;border-radius:999px;padding:10px 34px 10px 14px;font:600 14px/1 var(--body);color:var(--marine);cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303045E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 10px center/16px no-repeat;
  box-shadow:0 0 0 1px var(--line2),0 2px 4px rgba(3,4,94,.06)}
.conv .tk{padding:10px 14px;border-radius:999px;background:var(--marine);color:#fff;font-size:14px}
.conv .swap{display:flex;align-items:center;justify-content:center;margin:-8px 0;position:relative;z-index:1}
.conv .swap button{width:38px;height:38px;border-radius:12px;border:0;background:#fff;color:var(--bleu);box-shadow:0 0 0 1px var(--line2),0 4px 10px rgba(3,4,94,.1);font-size:16px;cursor:default}
.conv .meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:16px 4px 0;font-size:13px;color:var(--mut)}
.conv .meta .free{color:var(--bleu)}
.conv .go{width:100%;margin-top:18px}
.chip{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line),var(--sh-float);z-index:2}
.chip .ci{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,var(--bleu),var(--marine));color:#fff}
.chip .ci svg{width:20px;height:20px}
.chip{white-space:nowrap}
.chip b{display:block;font:600 15px/1.1 var(--disp);letter-spacing:-.01em}
.chip i{display:block;font:500 12px/1.2 var(--body);font-style:normal;color:var(--mut);margin-top:3px}
.chip.l{left:0;top:22%}.chip.r{right:0;top:55%}

/* chiffres */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{padding:30px 30px 28px;border-radius:var(--r-l);background:linear-gradient(170deg,#fff,var(--soft));box-shadow:inset 0 0 0 1px var(--line)}
.stat .v{font:500 clamp(46px,5.4vw,76px)/1 var(--disp);letter-spacing:-.05em;background:linear-gradient(180deg,var(--marine) 30%,var(--bleu));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .k{margin-top:12px;font-size:15px;color:var(--mut)}

/* ------------------------------------------------------------------ MUSD */
.coin{position:relative;display:grid;place-items:center}
.coin img{width:min(100%,460px);filter:drop-shadow(0 30px 50px rgba(3,4,94,.45))}
.coin::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(146,197,224,.55),rgba(0,119,182,0) 70%);filter:blur(10px)}
.musd-word{font:400 clamp(64px,10vw,150px)/.9 var(--disp);letter-spacing:-.04em}
.musd-word .musd b{font-weight:700}

/* écrans d'application */
.app-panel{padding:clamp(70px,9vw,120px) 0}
.app-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);margin-top:30px}
.app-tabs button{border:0;background:none;color:#fff;padding:10px 18px;border-radius:999px;font:600 14px/1 var(--body);cursor:pointer;transition:background .35s,color .35s}
.app-tabs button[aria-selected="true"]{background:#fff;color:var(--marine)}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.stores img{height:46px;width:auto}
.screens{position:relative;height:560px}
.ph{position:absolute;left:50%;top:50%;width:264px;height:540px;border-radius:40px;padding:12px;background:linear-gradient(160deg,#0077B6 -40%,#03045E 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 40px 80px rgba(3,4,94,.5);transition:transform .9s var(--ease),opacity .9s var(--ease);color:#fff}
.ph[data-pos="0"]{transform:translate(-50%,-50%);z-index:3}
.ph[data-pos="1"]{transform:translate(-2%,-50%) scale(.84) rotate(6deg);opacity:.55;z-index:2}
.ph[data-pos="2"]{transform:translate(-50%,-50%) scale(.7);opacity:0;z-index:1}
.ph[data-pos="3"]{transform:translate(-98%,-50%) scale(.84) rotate(-6deg);opacity:.55;z-index:2}
.ph .top{display:flex;justify-content:space-between;padding:8px 14px 10px;font:600 10px/1 var(--body);letter-spacing:.1em;color:var(--cp)}
.ph .scr{height:calc(100% - 28px);border-radius:30px;padding:18px 16px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:12.5px}
.ph .pt{font:600 10.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--cp)}
.ph .pbig{font:500 30px/1 var(--disp);letter-spacing:-.03em}
.ph .pbig small{font-size:13px;color:var(--cp);letter-spacing:0}
.ph .prow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.ph .up{color:var(--ciel)}
.ph .mut{color:var(--cp)}
.ph .pbtn{display:grid;place-items:center;height:40px;border-radius:999px;background:#fff;color:var(--marine);font:600 13px/1 var(--body)}
.ph .pbtn.o{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ph .pbox{padding:12px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ph .chart{height:74px;border-radius:12px;background:linear-gradient(180deg,rgba(146,197,224,.35),rgba(146,197,224,0));position:relative;overflow:hidden}
.ph .chart svg{position:absolute;inset:0;width:100%;height:100%}
.ph .vcard{border-radius:14px;padding:14px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(115deg,#03045E 0%,#0077B6 62%,#6DB1D5 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

/* tokenisation : l'actif devient jeton */
.tok{position:relative;aspect-ratio:1;width:100%;max-width:460px;margin:0 auto;display:grid;place-items:center}
.tok .orb{position:absolute;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2)}
.tok .orb.o1{inset:0;background:radial-gradient(circle,rgba(219,236,245,.0) 55%,rgba(219,236,245,.9))}
.tok .orb.o2{inset:16%;box-shadow:inset 0 0 0 1px var(--line2)}
.tok .orb.o3{inset:32%;background:linear-gradient(145deg,var(--bleu),var(--marine));box-shadow:var(--glow),0 30px 60px rgba(3,4,94,.3)}
.tok .hub{position:relative;width:24%;filter:brightness(0) invert(1)}
.tok .chip{position:absolute}
.tok .chip.a{left:-4%;top:18%}.tok .chip.b{right:-6%;bottom:20%}

/* partenaires */
.marq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq .run{display:flex;gap:64px;width:max-content;animation:marq 38s linear infinite}
.marq span{font:400 clamp(22px,2.4vw,30px)/1 var(--disp);letter-spacing:-.012em;color:var(--marine);opacity:.55;white-space:nowrap}
@keyframes marq{to{transform:translateX(-33.333%)}}
.marq-label{text-align:center;font:500 15px/1 var(--body);color:var(--mut);margin-bottom:30px}

/* formules : la grille tarifaire */
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.pack{display:flex;flex-direction:column;padding:30px 28px;border-radius:var(--r-l);background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--sh-card)}
.pack .tier{display:flex;align-items:center;gap:10px;font:500 22px/1 var(--disp);letter-spacing:-.02em}
.pack .gem{width:28px;height:28px;border-radius:9px;background:linear-gradient(145deg,var(--azur),var(--bleu))}
.pack:nth-child(1) .gem{background:linear-gradient(145deg,var(--lavis),var(--ciel))}
.pack:nth-child(2) .gem{background:linear-gradient(145deg,var(--ciel),var(--bc))}
.pack:nth-child(3) .gem{background:linear-gradient(145deg,var(--bc),var(--bleu))}
.pack .ulist{margin:24px 0 28px}
.pack .ulist li{font-size:15px;padding:11px 0 11px 28px}
.pack .btn{margin-top:auto;width:100%}
.pack.hi{background:var(--ombre);color:#fff;box-shadow:0 30px 60px rgba(3,4,94,.3);position:relative;overflow:hidden}
.pack.hi::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 50% at 50% 115%,rgba(146,197,224,.55),transparent 70%);pointer-events:none}
.pack.hi>*{position:relative;z-index:1}
.pack.hi .gem{background:linear-gradient(145deg,#fff,var(--ciel))}
.pack.hi .ulist li{border-color:rgba(255,255,255,.16)}
.pack.hi .ulist li::before{background:radial-gradient(circle,var(--marine) 0 2px,var(--ciel) 2.5px)}
.pack.hi .btn.primary{background:#fff;color:var(--marine);box-shadow:none}
.pack .sub{font-size:13.5px;color:var(--mut);margin-top:10px}
.pack.hi .sub{color:var(--cp)}

/* l'appel final : le grand panneau */
.cta{padding:clamp(100px,12vw,170px) 0;text-align:center}
.cta .h-xl{max-width:900px;margin:22px auto 0}

/* ------------------------------------------------------------------ tableaux */
.spec{padding:8px 22px}
.spec table,.tbl{width:100%;border-collapse:collapse}
.spec td{padding:16px 0;border-top:1px solid var(--line);font-size:15px;vertical-align:top}
.spec tr:first-child td{border-top:0}
.spec td.k{color:var(--mut);width:44%;padding-right:16px}
.spec td:not(.k){font-weight:600}
.spec-h{display:flex;align-items:center;gap:12px;padding:16px 0 12px;border-bottom:1px solid var(--line)}
.spec-h img{width:30px;height:30px}
.spec-h b{font:600 14px/1 var(--body)}
.spec-h i{margin-left:auto;font:600 11px/1 var(--body);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--bleu);background:var(--lavis);padding:6px 9px;border-radius:999px}
.tblwrap{overflow-x:auto;border-radius:var(--r-l);box-shadow:inset 0 0 0 1px var(--line);background:#fff}
.tbl th{text-align:left;font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:18px 22px;background:var(--soft);border-bottom:1px solid var(--line)}
.tbl td{padding:18px 22px;border-top:1px solid var(--line);font-size:15px;white-space:nowrap}
.tbl tr:first-child td{border-top:0}
.tbl td.k{font-weight:600}

/* ------------------------------------------------------------------ accordéon */
.acc{display:flex;flex-direction:column;gap:10px}
.acc details{border-radius:var(--r-m);background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s}
.acc details[open]{box-shadow:inset 0 0 0 1px var(--line2),var(--sh-card)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font:500 18px/1.3 var(--disp);letter-spacing:-.015em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077B6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .4s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details p{padding:0 22px 20px;color:var(--mut);font-size:15.5px}
.acc details p+p{margin-top:-8px}

/* ------------------------------------------------------------------ MUSD : la roue, la vague */
.uses{list-style:none;margin-top:30px;display:flex;flex-direction:column}
.uses li{padding:14px 0;border-top:1px solid rgba(255,255,255,.14);display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;opacity:.6;transition:opacity .4s}
.uses li.on{opacity:1}
.uses .n{font:500 13px/1 var(--disp);color:var(--ciel);min-width:52px}
.uses h3{font-size:20px}
.uses p{flex-basis:100%;padding-left:70px;color:var(--cp);font-size:15px}
.wheel{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto;width:100%}
.wheel>svg{position:absolute;inset:0;width:100%;height:100%}
.wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;gap:8px;
  background:#fff;color:var(--marine);box-shadow:0 30px 60px rgba(3,4,94,.4)}
.wheel-hub img{width:42%}
.wheel-hub b{font:400 clamp(18px,2vw,24px)/1 var(--disp)}
.wheel-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;color:#fff;cursor:pointer;padding:0}
.wheel-node .dot{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);backdrop-filter:blur(8px);transition:background .4s,color .4s,transform .4s var(--ease)}
.wheel-node .dot svg{width:22px;height:22px}
.wheel-node .lb{font:600 12.5px/1.2 var(--body);white-space:nowrap;padding:5px 9px;border-radius:999px;background:rgba(3,4,94,.4)}
.wheel-node.on .dot,.wheel-node:hover .dot{background:#fff;color:var(--marine);transform:scale(1.08)}
.wave{position:relative;margin-top:clamp(40px,5vw,64px);aspect-ratio:1100/260;max-width:1100px;margin-left:auto;margin-right:auto}
.wave>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wave-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.wave-node .dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--bleu);box-shadow:0 0 0 1px var(--line2),var(--sh-card)}
.wave-node .dot svg{width:20px;height:20px}
.wave-node .lb{font:600 12.5px/1.2 var(--body);white-space:nowrap}
.wave .draw{stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 2.6s var(--ease)}
.wave.in-view .draw{stroke-dashoffset:0}
.mark-lg{display:grid;place-items:center}
.mark-lg img{width:min(80%,380px)}

/* ------------------------------------------------------------------ formulaires */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form label{display:block;font:500 13.5px/1 var(--body);margin-bottom:8px;color:var(--marine)}
.form input,.form select,.form textarea{width:100%;font:400 15.5px/1.4 var(--body);color:var(--marine);padding:14px 16px;border-radius:14px;border:0;background:var(--soft);
  box-shadow:inset 0 0 0 1px var(--line2);outline:none;transition:box-shadow .3s,background .3s}
.form select{appearance:none;-webkit-appearance:none;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303045E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--bleu),0 0 0 4px rgba(0,119,182,.12)}
.form ::placeholder{color:rgba(3,4,94,.5)}
.form .btn{width:100%}
.form-card{background:#fff;color:var(--marine);border-radius:var(--r-l);padding:clamp(24px,3vw,36px);box-shadow:0 0 0 1px var(--line),var(--sh-float),0 60px 100px rgba(3,4,94,.25)}
.form-card h2{font-size:clamp(22px,2vw,28px);letter-spacing:-.025em;margin-bottom:24px}
.note{padding:14px 16px;border-radius:14px;margin-bottom:18px;font-size:14.5px}
.note.ok{background:var(--lavis);color:var(--marine)}
.note.ko{background:#fff;box-shadow:inset 0 0 0 1.5px var(--bleu);color:var(--marine)}
.note a{color:var(--bleu)}

/* bureaux */
.office h3{font-size:22px}
.office .city{font:500 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);margin-bottom:14px}
.office p{font-size:15px}
.office a{color:var(--bleu);text-decoration:none;font-weight:600}

/* ------------------------------------------------------------------ pages légales */
.lg-body{max-width:780px;margin:0 auto}
.lg-body h2{font-size:clamp(26px,2.6vw,34px);margin:56px 0 18px}
.lg-body h2:first-child{margin-top:0}
.lg-body h3{font-size:20px;margin:34px 0 12px;letter-spacing:-.02em}
.lg-body p{margin:0 0 14px;color:rgba(3,4,94,.82);font-size:16px;line-height:1.7}
.lg-body a{color:var(--bleu)}
.lg-list{margin:0 0 16px;padding-left:22px;color:rgba(3,4,94,.82)}
.lg-list li{margin:6px 0;line-height:1.65}
.lg-body .tblwrap{margin:18px 0 22px}
.lg-body .tbl td{white-space:normal}

/* segments (who we serve) */
.seg-mark{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--bleu),var(--marine));color:#fff;box-shadow:var(--glow);margin-bottom:26px}
.seg-mark svg{width:28px;height:28px}
.seg-block+.seg-block{margin-top:16px}

/* ------------------------------------------------------------------ pop-up MUSD */
/* Un rideau, pas une teinte : noir à 50 %, et aucun flou. On doit lire
   derrière la page qu'on a quittée. C'est le seul noir du site, et c'est
   justement parce qu'un voile de modale n'est pas une couleur de marque. */
.ov{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.5);animation:fade .4s}
.ov[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.mo{position:relative;width:min(860px,100%);border-radius:var(--r-xl);overflow:hidden;background:#fff;color:var(--marine);box-shadow:0 60px 120px rgba(3,4,94,.28);animation:jumpIn .7s var(--ease)}
.mo::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 75% 110%,rgba(146,197,224,.55),transparent 70%);pointer-events:none}
.mo .x{position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:#fff;color:var(--marine);font-size:16px;cursor:pointer;transition:background .3s var(--ease)}
.mo .x:hover{background:var(--soft)}
.mo .in2{position:relative;padding:clamp(28px,5vw,56px)}
.modo{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.modo .sym{font:400 clamp(44px,6vw,72px)/1 var(--disp);letter-spacing:-.03em}
.modo h2{font-size:clamp(26px,3vw,38px);margin-top:16px}
.modo p{margin-top:14px;color:var(--cp)}
.modo .coin img{width:100%;max-width:300px}
.mo .btns{margin-top:10px}

/* ------------------------------------------------------------------ pied de page */
.ft{padding:clamp(70px,8vw,110px) 0 36px;background:linear-gradient(180deg,#fff 0%,var(--lavis) 100%);margin-top:0}
.ft .cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.ft .brand img.lg{width:190px}
.ft .brand p{margin-top:20px;color:var(--mut);font-size:15px;max-width:320px}
.ft .stores img{height:40px}
.ft h3{font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);margin-bottom:18px}
.ft .l{display:block;padding:6px 0;text-decoration:none;font-size:15px;color:var(--marine);transition:color .25s}
.ft .l:hover{color:var(--bleu)}
.ft .bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:64px;padding-top:24px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--mut)}
.ft .bot a{text-decoration:none;color:inherit}
.ft .bot a:hover{color:var(--bleu)}
.ft .giant{margin-top:56px;opacity:.9}
.ft .giant img{width:100%}

/* ------------------------------------------------------------------ apparitions */
.rev{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rev.in-view{opacity:1;transform:none}
.rev.d1{transition-delay:.08s}.rev.d2{transition-delay:.16s}.rev.d3{transition-delay:.24s}
.no-js .rev{opacity:1;transform:none}

/* mode relecture : ?wip=1 */
.wip [data-wip]{outline:2px dashed var(--bleu);outline-offset:4px}

/* ------------------------------------------------------------------ adaptatif */
@media (max-width:1100px){
  .hd nav.main,.hd .login{display:none}
  .hd .burger{display:block}
  .c5{grid-template-columns:repeat(3,1fr)}
  .c4,.packs{grid-template-columns:repeat(2,1fr)}
  .ft .cols{grid-template-columns:1fr 1fr 1fr}
  .ft .brand{grid-column:1/-1}
}
@media (max-width:900px){
  .split,.split.wide-r,.hduo,.modo{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr}
  .bento .b.s2,.bento .b.s3,.bento .b.s4{grid-column:span 2}
  .bento .b{min-height:0}
  .c3{grid-template-columns:1fr 1fr}
  .chip.l,.chip.r{display:none}
  .screens{height:520px}
  .uses p{padding-left:0}
}
@media (max-width:640px){
  .hero{margin:6px;border-radius:24px}
  .panel{margin:0 6px;border-radius:24px}
  .hero.home{min-height:0}
  .c2,.c3,.c4,.c5,.stats,.packs,.form{grid-template-columns:1fr}
  .ft .cols{grid-template-columns:1fr 1fr}
  .hd .join{display:none}
  .hd .bar{padding-left:18px}
  .btns .btn{flex:1 1 auto}
  .conv input,.conv .out{font-size:24px}
  .wheel-node .lb{display:none}
  .wave-node .lb{display:none}
  .wave-node .dot{width:30px;height:30px}
  .wave-node .dot svg{width:14px;height:14px}
  .tbl td{white-space:normal}
  .mnav-act{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------------------------ compléments */
/* héros clair : 404 et pages légales */
.hero.paper{background:var(--lav-grad);color:var(--marine);min-height:0;padding:clamp(150px,18vh,190px) 0 clamp(60px,7vw,90px)}
.hero.paper h1{color:var(--marine)}
.hero.paper .lead{color:var(--mut)}
.hero.paper .glow{background:radial-gradient(50% 70% at 85% 0%,rgba(146,197,224,.5),transparent 70%)}
.hero.paper .mark{opacity:.08;filter:none}
/* la roue */
.wheel-lines circle,.wheel-lines line{fill:none;stroke:rgba(255,255,255,.2);stroke-width:.25}
.wheel-lines circle:first-child{stroke-dasharray:1 1.2}
/* la vague */
.wave-route .bed{fill:none;stroke:var(--line2);stroke-width:2;vector-effect:non-scaling-stroke}
.wave-route .run{fill:none;stroke:var(--bleu);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.6s var(--ease)}
.wave.in-view .wave-route .run{stroke-dashoffset:0}
.wave-node.on .dot{background:linear-gradient(145deg,var(--bleu),var(--marine));color:#fff}
/* onglets de l'application sur fond clair */
.app-tabs.light{background:#fff;box-shadow:inset 0 0 0 1px var(--line2)}
.app-tabs.light button{color:var(--marine)}
.app-tabs.light button[aria-selected="true"]{background:var(--btn-grad);color:#fff}
/* segments : la grille 3 + 2 */
.seg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.seg-grid .card{grid-column:span 2}
.seg-grid .card:nth-child(4),.seg-grid .card:nth-child(5){grid-column:span 3}
@media (max-width:900px){.seg-grid .card,.seg-grid .card:nth-child(4),.seg-grid .card:nth-child(5){grid-column:span 3}}
@media (max-width:640px){.seg-grid{grid-template-columns:1fr}.seg-grid .card,.seg-grid .card:nth-child(4),.seg-grid .card:nth-child(5){grid-column:auto}}
/* la tuile d'une solution : un fond lavis et une interface posée dessus */
.tile{position:relative;border-radius:var(--r-l);padding:clamp(28px,4vw,56px);background:linear-gradient(160deg,var(--soft) 0%,var(--lavis) 100%);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.tile::before{content:attr(data-n);position:absolute;right:-.06em;bottom:-.24em;font:500 clamp(140px,16vw,240px)/1 var(--disp);letter-spacing:-.06em;color:rgba(0,119,182,.09)}
.tile .ui{position:relative;max-width:420px}
.tile .ui h3{font-size:20px}
.panel.dark .tile{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.panel.dark .tile::before{color:rgba(255,255,255,.07)}
.step-n{font:500 clamp(44px,4vw,60px)/1 var(--disp);letter-spacing:-.05em;color:var(--ciel);margin-bottom:22px}

.conv-stage+.sec-head{margin-top:clamp(56px,6vw,80px)}
.form-card .btn.primary{background:var(--bleu);color:#fff;box-shadow:var(--glow)}
@media (max-width:640px){.tok .chip.a{left:0}.tok .chip.b{right:0}.tok .chip b{font-size:13.5px}}
html{overflow-x:clip}
.badge{max-width:100%;text-align:left;line-height:1.3}
@media (max-width:640px){.badge{font-size:12.5px;padding-right:12px}.badge b{flex:none}}
/* contraste AA : sur le bas clair des panneaux, le texte courant passe au blanc */
.panel.dark .lead,.panel.dark .small,.panel.dark .card p,.on-dark .card p,.uses p,.pack.hi .sub{color:#fff}
.panel.dark .glow{background:radial-gradient(55% 50% at 50% 118%,rgba(146,197,224,.4),rgba(0,119,182,0) 70%),radial-gradient(40% 50% at 90% 0%,rgba(0,119,182,.4),rgba(0,119,182,0) 70%)}
.bento .b.dark .glow{background:radial-gradient(70% 50% at 70% 115%,rgba(146,197,224,.35),transparent 70%)}
/* le bleu de marque en petit corps ne tient pas 4,5:1 sur les fonds teintés : ces libellés passent au marine, l'accent bleu reste sur la pastille et la flèche */
.tag,.card .kicker,.spec-h i,.ccy .row .pill,.office .city{color:var(--marine)}
.arrow{color:var(--marine)}
.arrow::after{background:var(--bleu)}
.on-dark .arrow::after,.bento .b.dark .arrow::after{background:#fff}
.panel.dark .card .num-k,.panel.dark .card .kicker,.uses .n,.b.dark .n{color:#fff}
.panel.dark .ui h3{color:var(--marine)}
.b.dark .small{color:#fff!important}
.ft h3{color:var(--marine)}
@media (max-width:900px){.panel.dark .glow{opacity:.45}}
/* le verrou MUSD l'emporte sur tout style de <b> d'un parent */
.musd b{font:inherit;font-weight:700!important;display:inline!important;letter-spacing:inherit;padding:0;margin:0;background:none;color:inherit;border-radius:0}
.modo .coin img{max-width:320px;height:auto;filter:drop-shadow(0 24px 40px rgba(3,4,94,.5))}
.modo .coin::before{width:85%}
@media (max-width:900px){.modo .coin{order:-1}.modo .coin img{max-width:170px}}
/* ------------------------------------------------------------------ Products : rubriques détaillées */
.body-txt p{color:var(--mut);font-size:16px;line-height:1.65;max-width:620px}
.body-txt p.lead{color:var(--ink);font-size:clamp(18px,1.5vw,20px);font-family:var(--disp);letter-spacing:-.01em}
.panel.dark .body-txt p,.panel.dark .body-txt p.lead{color:#fff}
.tile.stack{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,40px)}
.tile.stack .ui{max-width:none}
.tile.stack::before{display:none}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.feat{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-m);background:linear-gradient(170deg,#fff,var(--soft));box-shadow:inset 0 0 0 1px var(--line)}
.feat .fi{flex:none;width:26px;height:26px;border-radius:50%;background:var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.feat h3{font-size:16.5px;line-height:1.3;letter-spacing:-.01em;font-weight:500}
@media (max-width:1100px){.feats{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.feats{grid-template-columns:1fr}}

/* ====================================================================== 06/10
   Le picto d'un titre de section — sans cartouche.

   Il était d'abord posé dans un médaillon dégradé, comme sur les cartes. Mais
   une carte est un objet : elle a un fond, un bord, et le médaillon y tient
   lieu de coin supérieur. Un titre de section n'est pas un objet — l'entourer
   d'un cadre ajoute une boîte là où il n'y a rien à délimiter.

   Le picto se tient donc seul, jusqu'à 60 px, dans le bleu de marque sur les
   fonds clairs et en blanc sur les panneaux sombres. Le trait est aminci à
   1,3 : un dessin tracé pour 24 px et agrandi deux fois et demie épaissit
   d'autant, et c'est le trait, pas la taille, qui le ferait paraître lourd.

   La marque de segment de Who We Serve (.seg-mark) suit la même règle : elle
   portait encore sa pastille dégradée alors que les deux autres versions
   l'avaient déjà abandonnée. Les trois versions se tiennent maintenant.
*/
.ic-t,.seg-mark{display:block;width:auto;height:auto;border-radius:0;background:none;
  /* La pastille était une grille à contenu centré. En bloc, `place-items`
     ne disparaît pas : Chrome applique `justify-self` aux boîtes de bloc,
     et le picto se recentrait au milieu de la colonne. On le remet au
     fer à gauche, sur la marge du titre. */
  place-items:start;justify-self:start;
  box-shadow:none;color:var(--bleu);line-height:0;margin-bottom:18px}
.ic-t svg,.seg-mark svg{display:block;width:clamp(46px,4.4vw,60px);height:auto;stroke-width:1.3}
.panel.dark .ic-t,.on-dark .ic-t,.panel.dark .seg-mark,.on-dark .seg-mark{color:#fff}


/* ======================================================================= v4
   LES FONDS DE HÉRO — deux voies, le même cadre.

   La demande laissait le choix : « des vidéos pour l'arrière-plan du héro de
   chaque rubrique principale, ou des animations js de dégradé avec des halos
   fluides, zen, calmes, lumineux ». Les deux sont posées, dans le même
   emplacement et sous les mêmes règles, pour qu'on puisse trancher en les
   regardant côte à côte plutôt que sur le papier.

   1. **Les halos animés** (.halo). Un canevas dessine quatre nappes rondes qui
      dérivent lentement sur des trajectoires sinusoïdales sans jamais se
      répéter à l'identique. Rien d'autre ne bouge : pas de particules, pas de
      lignes, pas de réseau — la demande disait zen et calme, et une seule
      chose qui bouge lentement est plus calme que dix choses lentes.

      Le canevas est dessiné à un quart de la définition puis étalé en CSS avec
      un flou : une nappe floue n'a aucun détail à perdre, et on divise le
      travail du processeur par seize. Il tourne à 30 images par seconde, ce
      qui suffit largement pour un mouvement de cette lenteur.

   2. **La vidéo** (.hero-vid). Le même plan que la v1, dans le même cadre
      arrondi. Chargée seulement au-delà de 901 px, jamais en mouvement réduit,
      jamais en économie de données : ailleurs, l'affiche fait le travail.

   Dans les deux cas le dégradé fixe de la v3 reste dessous. C'est lui qu'on
   voit si le canevas ne démarre pas, si la vidéo ne charge pas, ou si le
   visiteur a demandé moins d'animations — jamais un trou noir.
*/
.hero .halo{position:absolute;inset:-12%;z-index:-1;width:124%;height:124%;
  pointer-events:none;opacity:.58;filter:blur(40px) saturate(115%);
  animation:halo-apparait 1.8s var(--ease) both}
@keyframes halo-apparait{from{opacity:0}to{opacity:.58}}
/* Le voile. Sans lui, les nappes additionnées éclaircissent tout le héro et le
   marine disparaît : on perd le point bas de l'échelle, celui qui tient la
   page. Le voile rend la nuit au haut, là où tombent le titre et la mention
   réglementaire, et laisse la lumière monter en bas. */
.hero .halo-voile{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,4,94,.62) 0%,rgba(3,4,94,.34) 38%,
    rgba(3,4,94,.12) 62%,rgba(3,4,94,.26) 100%)}
/* Un héro de page fille fait trois quarts de la hauteur d'un héro d'accueil :
   la lumière des nappes arrive donc plus tôt, juste là où tombe le chapô. Le
   voile y est plus appuyé, et son éclaircie commence plus bas. */
.hero.sub .halo-voile{background:linear-gradient(180deg,rgba(3,4,94,.70) 0%,
  rgba(3,4,94,.52) 46%,rgba(3,4,94,.30) 74%,rgba(3,4,94,.34) 100%)}

.hero .hero-vid{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:var(--affiche) center/cover no-repeat}
.hero .hero-vid video{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.2s var(--ease)}
.hero .hero-vid video.on{opacity:1}
/* Le voile : sombre en haut où tombent les titres, clair en bas où le héro
   rejoint la page. C'est la même règle que les huit fonds de section — du
   sombre vers le clair, de haut en bas, jamais de gauche à droite. */
.hero .hero-vid::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,4,94,.78) 0%,rgba(3,4,94,.52) 42%,
    rgba(0,119,182,.30) 72%,rgba(0,119,182,.10) 100%)}

@media (prefers-reduced-motion:reduce){
  .hero .halo,.hero .hero-vid{display:none}
}

/* ======================================================================= v4
   LE SLIDER DES PARTENAIRES.

   Une bande qui défile sans fin : deux copies de la même piste mises bout à
   bout, et une translation de la moitié de l'ensemble. Quand la première copie
   a fini de passer, la seconde est exactement à sa place — la boucle ne se voit
   pas. Elle s'arrête au survol et au clavier, pour qu'on puisse lire un nom.

   **Les six logos sont posés d'une seule couleur**, et pas dans leurs couleurs
   d'origine. Les six marques arrivent en vert d'eau, en turquoise, en bleu
   nuit : alignées, elles donneraient une barre d'arc-en-ciel au milieu d'une
   page qui tient sur deux bleus. C'est la raison d'être d'une bande de
   partenaires monochrome, et c'est l'usage que toutes les chartes autorisent.

   Le procédé : le fichier SVG sert de **masque**, et c'est le fond qui porte la
   couleur. Aucun filtre acrobatique, aucune retouche des fichiers du
   partenaire — le marine sur fond clair, le blanc sur fond sombre, exactement
   les valeurs de la charte. Au survol d'un logo, le fichier d'origine reprend
   sa place et ses couleurs.

   Chaque emplacement fait 150 × 40 et le logo s'y inscrit sans déformation :
   les six n'ont pas le même rapport (de 3,9:1 pour Hadron à 8,25:1 pour
   Bitfinex), c'est donc la hauteur optique qui est accordée, pas la largeur.
*/
.slider{position:relative;overflow:hidden;padding:8px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.slider .piste{display:flex;width:max-content;animation:slider 46s linear infinite}
.slider:hover .piste,.slider:focus-within .piste{animation-play-state:paused}
.slider .lot{display:flex;align-items:center;gap:clamp(34px,4.4vw,72px);
  padding-right:clamp(34px,4.4vw,72px)}
/* Les logos des partenaires en leurs propres couleurs.

   Ils étaient rendus en monochrome par un masque CSS — une façon de les mettre
   d'accord entre eux sans toucher aux fichiers officiels. La cliente les veut
   dans leurs couleurs : le masque sort, le fichier d'origine se montre. Les
   deux couches existaient déjà, l'une servant au survol ; il n'y a donc rien à
   ajouter, seulement à inverser. */
.slider .logo{position:relative;flex:none;width:150px;height:40px;
  opacity:.82;transition:opacity .45s var(--ease)}
.slider .logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:1}
.slider:hover .logo{opacity:.5}
.slider .logo:hover{opacity:1}
.on-dark .slider:hover .logo,.panel.dark .slider:hover .logo{opacity:.4}
@keyframes slider{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .slider{-webkit-mask:none;mask:none}
  .slider .piste{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
  .slider .lot:nth-child(2){display:none}
  .slider .lot{flex-wrap:wrap;justify-content:center;row-gap:30px}
}

/* ======================================================================= v4
   Products & Services en cinq pages : la grille d'entrée.

   Une carte par famille, avec son picto de menu, sa phrase et ce qu'elle
   contient. C'est la page qui remplace l'ancienne page unique de 2 600 lignes.
*/
.fam{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,1.6vw,22px)}
.fam a{display:flex;flex-direction:column;padding:clamp(28px,2.6vw,38px);border-radius:var(--r-l);
  text-decoration:none;background:#fff;box-shadow:inset 0 0 0 1px var(--line2),var(--sh-card);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fam a:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--bleu),var(--sh-card)}
.fam .n{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.fam h3,.fam h2{margin-top:18px}
.fam p{margin-top:12px;color:var(--mut);font-size:15.5px;line-height:1.6}
.fam ul{list-style:none;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.fam li{font-size:14.5px;color:var(--mut);padding:5px 0}
.fam .arrow{margin-top:auto;padding-top:24px}

/* ======================================================================= v4
   Le fil d'Ariane des pages filles.

   Products & Services n'est plus une page mais une famille de six : il faut
   dire au lecteur où il est, et lui rendre la porte d'entrée en un clic.
*/
.fil{display:flex;align-items:center;gap:10px;margin-bottom:22px;
  font:500 13.5px/1 var(--body);letter-spacing:.02em;color:var(--cp)}
.fil a{text-decoration:none;opacity:.82;transition:opacity .3s var(--ease)}
.fil a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.fil b{font-weight:600;color:#fff}
.fil span{opacity:.5}


/* ========================================================================= v4
   LES FONDS — des nappes de couleur qui dérivent, et se déplacent au
   défilement.

   Le principe demandé : un dégradé maillé, des taches molles qui se recouvrent
   et se fondent, et un mouvement lié au défilement de la page. Trois choses
   qui, mises ensemble, demandent de la prudence — c'est exactement la recette
   d'un fond qui fait ramer un portable.

   Ce qu'on fait, donc :

     — **une seule toile par fond**, peinte au quart de la définition et étalée
       avec un flou : une nappe floue n'a aucun détail à perdre, et c'est seize
       fois moins de pixels ;
     — **six nappes** qui dérivent sur des sinusoïdes de périodes premières
       entre elles : la figure ne se répète jamais à l'identique ;
     — **le défilement déplace le champ**, il ne le recalcule pas : la position
       de la page entre comme un décalage dans les trajectoires, ce qui ne
       coûte rien de plus ;
     — rien n'est peint quand l'onglet est caché ou quand le fond est sorti de
       l'écran, et rien ne démarre en mouvement réduit.

   Sous la toile, le dégradé fixe reste : c'est lui qu'on voit si rien ne
   démarre, et c'est déjà une image finie.
*/
.mesh{position:absolute;inset:-14%;z-index:-1;width:128%;height:128%;
  /* La toile est déjà peinte au quart de la définition : son agrandissement
     fait l'essentiel du fondu. Un flou de 30 px par-dessus écrasait les
     nappes en un seul dégradé lisse — il tombe à 14 px, juste de quoi
     effacer l'escalier des pixels. */
  pointer-events:none;opacity:.86;filter:blur(14px) saturate(124%);
  animation:mesh-apparait 1.8s var(--ease) both}
@keyframes mesh-apparait{from{opacity:0}to{opacity:.86}}
/* Le voile. Sans lui, les nappes additionnées éclaircissent tout et le marine
   disparaît — on perd le point bas de l'échelle, celui qui tient la page. */
.mesh-voile{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,4,94,.56) 0%,rgba(3,4,94,.26) 38%,
    rgba(3,4,94,.06) 64%,rgba(3,4,94,.22) 100%)}
.hero.sub .mesh-voile{background:linear-gradient(180deg,rgba(3,4,94,.70) 0%,
  rgba(3,4,94,.50) 48%,rgba(3,4,94,.30) 76%,rgba(3,4,94,.34) 100%)}

/* ========================================================================= v4
   LES BLOCS DE VERRE.

   Sur un fond coloré qui bouge, une carte opaque fait un trou. Une carte
   translucide et floutée laisse passer la couleur et le mouvement : elle
   appartient au fond au lieu d'être posée dessus, et le texte reste lisible
   parce que le flou écrase les contrastes derrière lui.

   Le réglage tient en trois valeurs : 10 % de blanc pour le corps, 18 % pour
   le liseré, 22 px de flou. Au-delà, le verre devient laiteux et on perd la
   couleur ; en deçà, le texte attrape les taches du fond.
*/
.on-dark .card,.panel.dark .card,.glass{
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 18px 40px rgba(3,4,94,.18);
  backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%)}
.on-dark .card:hover,.panel.dark .card:hover,.glass:hover{
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30),0 22px 50px rgba(3,4,94,.22)}
.on-dark .card p,.panel.dark .card p,.glass p{color:rgba(255,255,255,.82)}
.on-dark .card h3,.on-dark .card .h-seg,.panel.dark .card h3,.glass h3{color:#fff}
.glass{border-radius:var(--r-l);padding:clamp(24px,2.4vw,34px);position:relative}

/* ========================================================================= v4
   LES BLOCS QUI SE CONSTRUISENT.

   `.rev` faisait déjà monter un bloc de 24 px en fondu. On va un cran plus
   loin : les enfants d'une grille entrent **l'un après l'autre**, avec un
   retard calculé à l'affichage et non écrit à la main — sans quoi il faudrait
   poser une classe de retard sur chaque carte de chaque page.

   Et ils entrent **par les côtés** : chaque bloc vient du bord dont il est
   le plus proche, et rejoint sa place par le chemin le plus court. La mise
   en page se referme sur elle-même au lieu de défiler dans un sens. Le
   décalage latéral (--dx) est posé à l'affichage par app.js, qui seul
   connaît la position de chaque bloc dans sa grille ; une carte qui tient
   toute la largeur n'a pas de côté et garde la montée.

   Le mouvement reste sans rebond, et un peu plus long que la montée seule :
   une seconde, une courbe qui décélère.
*/
.build>*{opacity:0;transform:translate3d(var(--dx,0px),var(--dy,22px),0) scale(.985);
  transition:opacity .85s var(--ease),transform 1.05s var(--ease);
  transition-delay:calc(var(--i,0)*90ms);will-change:transform,opacity}
.build.in-view>*{opacity:1;transform:none}
.no-js .build>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .build>*{opacity:1;transform:none;transition:none}
}


/* ========================================================================= v4
   Le bento posé sur un fond animé.

   Les blocs étaient blancs, dégradés, posés sur du blanc. Sur un panneau
   sombre ils feraient des trous. Ils passent au même verre que les cartes :
   10 % de blanc, un liseré à 18 %, 22 px de flou. Le fond continue de dériver
   derrière eux, et c'est précisément ce qu'on veut voir.

   Le panneau peut aussi sortir de sa marge (.bleed) : sur une bande de couleur,
   dix pixels de blanc de chaque côté se lisent comme un défaut d'assemblage.
*/
.panel.bleed{margin:0;border-radius:0}
.panel.dark .bento .b,.on-dark .bento .b{
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 18px 40px rgba(3,4,94,.18);
  backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%)}
.panel.dark .bento .b h3,.on-dark .bento .b h3{color:#fff}
.panel.dark .bento .b .n,.on-dark .bento .b .n{color:var(--ciel)}
.panel.dark .bento .b .ulist li,.on-dark .bento .b .ulist li{color:rgba(255,255,255,.84)}
.panel.dark .bento .b .ulist li::before,.on-dark .bento .b .ulist li::before{background:var(--ciel)}
.panel.dark .bento .b .arrow,.on-dark .bento .b .arrow{color:#fff}
.panel.dark .bento .b .arrow::after,.on-dark .bento .b .arrow::after{background:#fff}
/* Les encarts d'interface restent opaques : ce sont des captures d'écran de
   l'application, pas des blocs de page — un écran translucide n'existe pas. */
.panel.dark .bento .b .ui,.on-dark .bento .b .ui{background:#fff;color:var(--marine)}


/* ========================================================================= v4
   LE SURTITRE — du texte, et rien d'autre.

   Il était posé dans une pastille, avec un point de couleur devant. Deux objets
   pour annoncer trois mots : la pastille se lisait comme un bouton, et le point
   comme une puce de liste. Il ne reste que le texte — capitales espacées, en
   bleu de marque sur fond clair, en ciel sur fond sombre — et un filet court
   devant lui, qui dit « ceci précède un titre » sans faire un objet de plus.
*/
.tag{display:inline-flex;align-items:center;gap:12px;padding:0;border:0;background:none;
  box-shadow:none;border-radius:0;
  font:600 12px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--marine)}
/* Le filet garde le bleu de marque ; le texte, lui, est en marine. À 12 px en
   capitales, le bleu #0077B6 passe sur du blanc (4,6:1) mais tombe à 4,0 sur le
   moindre lavis — et la moitié des surtitres du site sont sur un lavis. Le
   filet n'a pas à être lisible, seulement visible : il peut rester bleu. */
.tag::before{content:"";width:26px;height:1.5px;border-radius:0;background:var(--bleu);
  box-shadow:none;flex:none}
.on-dark .tag,.panel.dark .tag,.hero.on-dark .tag{color:var(--ciel);background:none;border:0;box-shadow:none}
.on-dark .tag::before,.panel.dark .tag::before,.hero.on-dark .tag::before{background:currentColor;box-shadow:none}
.tag.plain{padding:0}
.tag.plain::before{display:none}
.center .tag,.sec-head.center .tag{justify-content:center}

/* Le bandeau du héro d'accueil suivait la même logique de pastille, avec le
   sigle en vignette. Même traitement : du texte. */
.badge{display:block;padding:0;border-radius:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  font:600 12px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ciel);margin-bottom:26px;text-align:left}
.badge b{display:none}
.badge img{display:none}

/* ========================================================================= v4
   LE FOND DU HÉRO — plus contrasté, et le dégradé lui-même en mouvement.

   Deux couches, et c'est le décalage entre les deux qui fait la profondeur :

     — **le dégradé de base** n'est plus fixe. Il est tracé deux fois plus grand
       que le cadre et se déplace très lentement en diagonale — quarante
       secondes pour un aller, quatre-vingts pour le cycle complet. On ne le voit
       pas bouger ; on voit que ce n'est jamais tout à fait la même image ;
     — **les nappes**, par-dessus, qui dérivent à leur propre rythme et suivent
       le défilement.

   Le contraste vient du bas de l'échelle, pas du haut : c'est le marine profond
   qui fait ressortir le bleu, et non l'inverse. Le voile s'allège donc au
   milieu et se referme aux deux bouts.
*/
/* CINQ DÉRIVES, ET NON PLUS UNE.

   Le dégradé est tracé deux fois plus grand que le cadre, et c'est le cadrage
   qui se déplace : on ne voit pas la couleur bouger, on voit que ce n'est
   jamais tout à fait la même image.

   Cinq parcours, cinq durées entre 26 et 40 secondes, cinq cadrages.
   (Elles étaient de 68 à 104 s : à cette lenteur, le mouvement ne se
   voyait pas — un fond qu'on ne voit pas bouger est un fond fixe qui
   coûte du calcul. Divisées par deux fois et demie.) Quatre
   font l'aller-retour (`alternate`) ; le cinquième, `derive-c`, fait un tour
   complet et revient à son point de départ — c'est pourquoi il peut tourner en
   `linear` sans à-coup à la boucle.

   app.js pose la classe sur chaque héros et chaque panneau sombre, d'après le
   nom de la page et le rang de la section : la même section joue toujours la
   même dérive, ses voisines en jouent une autre. Sans JavaScript, tout le monde
   garde `derive-a` — et c'est déjà un fond vivant. */
.hero,.panel.dark{
  background:var(--ombre);
  background-size:150% 150%;
  background-position:0% 0%;
  animation:derive-a 33s ease-in-out infinite alternate}

@keyframes derive-a{
  0%{background-position:0% 0%}
  50%{background-position:100% 42%}
  100%{background-position:28% 100%}
}
@keyframes derive-b{
  0%{background-position:100% 0%}
  50%{background-position:8% 58%}
  100%{background-position:74% 100%}
}
/* Un tour complet : le dernier état est le premier, donc pas de retour en
   arrière et pas de saut — le seul des cinq qui peut tourner en `linear`. */
@keyframes derive-c{
  0%{background-position:0% 50%}
  25%{background-position:50% 0%}
  50%{background-position:100% 50%}
  75%{background-position:50% 100%}
  100%{background-position:0% 50%}
}
@keyframes derive-d{
  0%{background-position:30% 100%}
  50%{background-position:100% 66%}
  100%{background-position:0% 18%}
}
@keyframes derive-e{
  0%{background-position:0% 100%}
  45%{background-position:88% 22%}
  100%{background-position:16% 0%}
}

/* `.panel.dark` pèse deux classes, `.derive-a` une seule : la règle de base
   l'emportait sur la variante, et tous les panneaux sombres rejouaient la
   même dérive. Les variantes sont donc nommées sur les deux porteurs. */
.hero.derive-a,.panel.derive-a{animation:derive-a 33s ease-in-out infinite alternate;background-size:150% 150%}
.hero.derive-b,.panel.derive-b{animation:derive-b 26s ease-in-out infinite alternate;background-size:165% 140%}
.hero.derive-c,.panel.derive-c{animation:derive-c 40s linear infinite;background-size:140% 165%}
.hero.derive-d,.panel.derive-d{animation:derive-d 28s ease-in-out infinite alternate;background-size:158% 145%}
.hero.derive-e,.panel.derive-e{animation:derive-e 36s ease-in-out infinite alternate;background-size:145% 172%}

@media (prefers-reduced-motion:reduce){
  .hero,.panel.dark,
  .hero[class*="derive-"],.panel[class*="derive-"]{animation:none;background-size:100% 100%}
}
/* Le flou est passé de 12 à 9 pixels. Il sert à effacer l'escalier laissé
   par la montée d'échelle de la toile ; au-delà il efface aussi le modelé,
   et un fond sans modelé ne donne rien à voir quand il bouge. */
.mesh{opacity:1;filter:blur(9px) saturate(142%) contrast(112%)}
@keyframes mesh-apparait{from{opacity:0}to{opacity:1}}
.mesh-voile{background:linear-gradient(180deg,rgba(3,4,94,.68) 0%,rgba(3,4,94,.30) 34%,
  rgba(3,4,94,0) 60%,rgba(3,4,94,.18) 84%,rgba(3,4,94,.42) 100%)}
.hero.sub .mesh-voile{background:linear-gradient(180deg,rgba(3,4,94,.74) 0%,
  rgba(3,4,94,.46) 46%,rgba(3,4,94,.22) 74%,rgba(3,4,94,.40) 100%)}

/* La fenêtre est passée au blanc : ses textes et son bouton suivaient encore
   les règles du fond sombre — un chapô en bleu ciel et un bouton blanc, tous
   deux illisibles sur du blanc. */
.mo .sym,.mo h2{color:var(--marine)}
.mo p{color:var(--mut)}
.mo .btns.on-dark .btn.primary{background:var(--bleu);color:#fff;box-shadow:var(--glow)}
.mo .btns.on-dark .btn.primary:hover{background:var(--bm)}

/* ========================================================================= v4
   Les écrans de l'application : des captures, plus des écrans redessinés.

   Le cadre reste — c'est lui qui donne le téléphone — mais son contenu est
   l'image. Elle remplit le cadre bord à bord, sous le rayon intérieur ; rien
   n'est redessiné par-dessus, rien ne peut donc diverger du produit.
*/
.ph img{width:100%;height:100%;object-fit:cover;object-position:top center;
  border-radius:30px;display:block}
.ph:has(img){padding:10px}

/* La pile de téléphones était dessinée pour des écrans redessinés, plats et
   pâles : trois en éventail, deux à demi effacés derrière. Avec de vraies
   captures — denses, contrastées, pleines de texte — l'éventail devient
   illisible : on lit trois écrans à la fois et aucun. Un seul écran à la fois,
   donc, au centre, et les onglets le changent. */
.ph:has(img){transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ph:has(img)[data-pos="0"]{transform:translate(-50%,-50%);opacity:1;z-index:3}
.ph:has(img):not([data-pos="0"]){transform:translate(-50%,-50%) scale(.94);opacity:0;z-index:1;
  pointer-events:none}


/* ========================================================================= v4
   LE RÉSEAU — le maillage des héros de rubrique.

   Il se superpose aux nappes et à leur voile : les nappes donnent la couleur,
   le voile la lisibilité du titre, le réseau le relief. Trois couches qui ne
   se recouvrent pas, chacune avec son travail.

   Pas de flou ici, au contraire des nappes : un trait d'un pixel qu'on floute
   disparaît. Le canevas est donc peint à la définition de l'écran, et c'est
   la seule chose du site qui le soit — un réseau de cent points reste bon
   marché, et un maillage mou ne ressemble à rien.
*/
.hero .reseau,.panel .reseau{position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  pointer-events:none;opacity:.92;animation:reseau-apparait 2s var(--ease) both}
@keyframes reseau-apparait{from{opacity:0}to{opacity:.92}}
/* Sur un panneau de section, le maillage passe par-dessus un dégradé déjà très
   présent : il se retient, sinon deux motifs se disputent le même fond. */
.panel .reseau{opacity:.62}
@media (max-width:900px){.hero .reseau,.panel .reseau{opacity:.52}}
@media (prefers-reduced-motion:reduce){
  .hero .reseau{animation:none;opacity:.55}
  .panel .reseau{animation:none;opacity:.40}
}



/* ========================================================================= v4
   LE CADRE VIDÉO — posé le 25/09, rempli le 06/10.

   Le cadre tient son rapport 16/9 par `aspect-ratio` et non par une hauteur
   calculée : la place est donc réservée **avant** que la vidéo n'arrive, et la
   page ne saute pas au chargement. C'est pour cela qu'il avait été dessiné
   vide en septembre.

   Au repos on ne voit que l'affiche et le bouton ; la vidéo est bien là, mais
   `preload="none"` fait qu'aucun octet n'est demandé. Un visiteur qui ne
   regarde pas la vidéo paie 60 Ko d'affiche, pas 8 Mo de film.
*/
.vwrap{max-width:860px;margin-left:auto;margin-right:auto}
.vslot{position:relative;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;
  background:var(--affiche) center/cover no-repeat,var(--ombre);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 70px rgba(3,4,94,.26)}
.vslot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:var(--marine);display:block}

/* Le bouton couvre tout le cadre : on clique où l'on veut, pas sur une cible de
   soixante-dix pixels. Le voile qu'il porte s'éclaircit au survol — c'est la
   seule chose qui bouge, et elle suffit à dire que c'est cliquable. */
.vslot .vplay{position:absolute;inset:0;z-index:2;display:grid;place-content:center;
  width:100%;height:100%;border:0;padding:20px;cursor:pointer;text-align:center;color:#fff;
  background:rgba(3,4,94,.38);
  transition:background .45s var(--ease),opacity .5s var(--ease)}
.vslot .vplay:hover{background:rgba(3,4,94,.24)}
.vslot .vplay .rond{width:74px;height:74px;border-radius:999px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.72);margin:0 auto 20px;
  transition:transform .45s var(--ease),background .45s var(--ease)}
.vslot .vplay:hover .rond{transform:scale(1.07);background:rgba(255,255,255,.14)}
.vslot .vplay .rond svg{width:26px;height:26px;margin-left:4px}
.vslot .vplay .t{display:block;font:400 clamp(19px,2vw,26px)/1.2 var(--disp);letter-spacing:-.01em}
.vslot .vplay i{display:block;font-style:normal;margin-top:10px;
  font:600 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.78)}
.vslot.joue .vplay{opacity:0;pointer-events:none}
@media (max-width:560px){
  .vslot .vplay .rond{width:58px;height:58px;margin-bottom:14px}
  .vslot .vplay .rond svg{width:21px;height:21px}
}


/* ========================================================================= v4
   L'ILLUSTRATION DU HÉROS.

   **Le fondu fait tout.** L'illustration arrive sur fond noir ; `screen` rend
   ce noir neutre (screen(x, 0) = x) et ajoute la lumière du reste au fond du
   héros. Aucun détourage, aucun cache à dessiner, et le halo — qui est le sujet
   de ces images — passe entier, quelle que soit la couleur derrière.

   `isolation:isolate` est déjà sur le héros : le fondu reste chez lui.

   **La contrainte qui vient avec, et qui est à tenir côté production :** un
   fondu « screen » n'ajoute que de la lumière. Dans une illustration destinée
   à ce traitement, *les détails doivent être clairs sur fond sombre*, jamais
   l'inverse — un pictogramme marine sur une carte claire s'efface. Le
   détourage en couche alpha a été essayé pour contourner cela : il ne le peut
   pas, parce que le halo d'une image composée sur du noir est fait de bleus
   très sombres qui, posés sur un fond clair, font une fumée grise. Une lumière
   s'ajoute, elle ne se compose pas.

   Le cadrage suit la maquette : par défaut l'image déborde à droite et se fait
   couper par le bord du héros — une illustration qui tient tout entière dans
   son cadre se regarde comme une vignette ; coupée, elle appartient à la page.
   La classe `tient` sert aux illustrations qu'on veut voir en entier.
*/
.hero .illu{position:absolute;z-index:-1;pointer-events:none;
  top:50%;right:-8%;width:min(57vw,900px);
  transform:translateY(-50%);
  mix-blend-mode:screen;
  animation:illu-entre 1.8s var(--ease) both}
.hero .illu img{display:block;width:100%;height:auto}

/* Deux cadrages, et c'est tout ce qui distingue une illustration d'une
   autre : celle qui déborde du cadre (par défaut) et celle qui y tient.
   La seconde se range au bord de la grille, un peu plus petite — une
   illustration entière a besoin de respirer là où une illustration coupée
   se nourrit de sa coupe. */
.hero .illu.tient{right:1.5%;width:min(48vw,780px)}
@keyframes illu-entre{
  from{opacity:0;transform:translateY(-50%) translateX(34px) scale(1.02)}
  to{opacity:1;transform:translateY(-50%)}
}

/* Le texte ne court jamais sous l'illustration : la colonne est bornée, et
   c'est la borne qui garantit la lisibilité, pas la longueur du titre actuel —
   celui de la page suivante sera peut-être plus long. */
.hero.illus .hl{max-width:min(700px,58%)}
/* Et le titre se resserre d'un cran. Le héros illustré n'a plus toute la
   largeur : à 64 px, « crypto and fiat banking » tombait sur deux lignes et
   le titre en faisait trois. À 58 px il tient, et il pèse le même poids à
   l'œil puisque la colonne est plus étroite. */
.hero.illus .hl .h-xxl{font-size:clamp(32px,4.2vw,58px)}

/* Un flottement très lent. Huit pixels sur quatorze secondes : on ne le voit
   pas bouger, on voit que l'objet n'est pas collé. */
@media (prefers-reduced-motion:no-preference){
  .hero .illu img{animation:illu-flotte 14s ease-in-out infinite alternate}
}
@keyframes illu-flotte{from{transform:translateY(-8px)}to{transform:translateY(8px)}}

@media (max-width:1100px){
  .hero .illu{right:-18%;width:min(72vw,720px)}
  .hero .illu.tient{right:0;width:min(52vw,560px)}
  .hero.illus .hl{max-width:min(520px,58%)}
}
/* Sous 760 px l'illustration passe derrière le titre plutôt que de disparaître :
   elle fait partie de la page, et un téléphone n'est pas une version amputée. */
@media (max-width:760px){
  /* Elle descend sous le bloc de texte et s'efface : sur 390 px de large, le
     titre passe forcément dessus, et c'est le titre qui doit gagner. */
  .hero .illu{top:auto;bottom:-12%;right:-22%;width:122vw;transform:none;opacity:.34}
  .hero .illu img{animation:none}
  @keyframes illu-entre{from{opacity:0}to{opacity:.34}}
  .hero.illus .hl{max-width:none}
}

/* un h2 de carte garde la taille d'un titre de carte */
.card .h-seg{font-weight:inherit}

/* Les trois bureaux sont devenus les premiers titres de la page de contact,
   l'en-tête inventé qui les coiffait étant parti. Ils prennent le niveau h2
   pour que la hiérarchie du document reste juste, et gardent la taille d'un
   titre de carte. */
.card .h-bureau{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.025em;
  line-height:1.15;font-weight:600;margin-bottom:10px}

/* ========================================================================= v4
   LES SEGMENTS, UNE FOIS LES TITRES INVENTÉS RETIRÉS.

   La colonne de gauche portait le picto, le nom du segment et un titre. Le
   titre est parti — il n'était pas de la cliente — et la colonne s'est
   retrouvée presque vide en face d'un paragraphe de huit lignes. On la
   resserre : le picto et le nom tiennent sur un cinquième, le texte prend le
   reste. Le vide d'une section ne se comble pas avec de la rédaction, mais
   il se range. */
.split.top:has(.seg-mark){grid-template-columns:minmax(180px,21%) 1fr;
  gap:clamp(28px,4vw,72px);align-items:start}
.split.top:has(.seg-mark) .lead{max-width:62ch}
@media (max-width:860px){
  .split.top:has(.seg-mark){grid-template-columns:1fr;gap:20px}
}

/* ========================================================================= v4
   LE HÉROS EN PLEINE LARGEUR.

   Le contenu du site se range sur une grille de 1240 px centrée, et c'est bien
   pour du texte courant : une ligne de quatre-vingts caractères se lit, une
   ligne de deux cents ne se lit pas. Mais un héros n'est pas du texte courant.
   Centré dans sa grille, son titre flottait au milieu d'un écran large, à
   cent pixels du logo qui le surplombe — deux verticales au lieu d'une.

   Il prend donc la pleine largeur, et son texte se range **sur la même
   verticale que le logo** : exactement le retrait de la barre d'en-tête,
   `clamp(16px, 2.6vw, 40px)`. L'œil n'a plus qu'une ligne à suivre, du sigle
   au titre et du titre au bouton.

   La colonne de texte reste bornée en largeur : la pleine largeur est celle du
   cadre, pas celle de la phrase. */
.hero > .wrap{max-width:none;margin:0;
  padding-left:clamp(16px,2.6vw,40px);padding-right:clamp(16px,2.6vw,40px)}
.hero .hc,.hero .hl{max-width:min(1040px,62%)}
.hero.illus .hl{max-width:min(700px,46%)}

@media (max-width:1100px){
  .hero .hc,.hero .hl{max-width:min(780px,76%)}
  .hero.illus .hl{max-width:min(560px,56%)}
}
@media (max-width:760px){
  .hero .hc,.hero .hl,.hero.illus .hl{max-width:none}
}