/* ════════════════════════════════════════════════════════════════════ DA-52 « Univers II · alternance » (08/10/2026) : DA-52 nuit, dont le parcours alterne désormais nuit et papier. Règle stricte de BRIEF-13 (09/10) : bleu, puis blanc, en alternance jusqu'au pied de page bleu. nuit : hero (le trident, « Sortez de l'ombre. ») ; papier: Références (le mur de logos à l'encre) ; nuit : Méthode (la plongée au cœur, les trois barres de lumière) ; papier: Résultats (quatre hautes cartes claires, photos en lumière douce) ; nuit : Pourquoi Triaina (les chiffres, un trait de lumière sous chacun) ; papier: Médias (l'orbite des huit titres, à l'encre) ; nuit : CTA (le dézoom, le trident entier, le formulaire) ; papier: FAQ (le petit trident à l'encre) ; nuit : pied de page. Le papier est une FEUILLE posée sur la nuit (coins arrondis, plus étroite en montant, bord à bord quand elle remplit l'écran). La nuée change de MATIÈRE selon le fond qu'elle survole, au pixel près : lumière (mélange additif) sur la nuit, encre et bleu (mélange normal) sur le papier ; un grain qui franchit le bord d'une feuille passe de l'un à l'autre. La nav prend le ton du fond qu'elle survole. ────────────────────────────────────────────────────────────────── Base, DA-52 « Univers II · nuit » : fusion de DA-48 (Univers, la base) et des cas clients de DA-50 (Portails), fond bleu nuit. Retour de Lucas du 08/10 : plus aucun tremblement quand la nuée forme les trois barres (voir « Anti- tremblement » dans le script de la nuée), et les quatre fenêtres photo de DA-50 pour les résultats clients, raccordées à la plongée. UNE grande idée : un zoom continu dans la matière, façon « puissances de dix ». La nuée (Three.js Points + shader maison) forme le trident ; au défilement, la caméra plonge dans sa hampe, les grains passent de part et d'autre, et l'on débouche dans un nouvel univers recomposé avec les mêmes particules (fond, profondeur et lumière propres). Au CTA, on dézoome : on ressort, et le trident entier réapparaît près du formulaire. 0 · le trident du hero, en volume, vivant (courant de lumière, curseur) ; 1 · univers Références : la nuée dessine les logos, qui se font nets ; 2 · univers Méthode : les trois barres, celle du levier lu s'intensifie ; 3 · univers Résultats (papier) : quatre hautes cartes claires se dressent comme les barres du trident, la photo du secteur y monte en fente ; une jauge de grains d'encre monte de 0 à la valeur dans chacune ; 4 · univers Chiffres (nuit) : un trait de lumière sous chaque chiffre ; 5 · univers Médias (papier) : l'orbite des huit titres autour d'un petit trident, à l'encre ; 6 · dézoom : le trident entier + un halo autour du formulaire ; 7 · le trident recomposé, en petit, à côté de la FAQ. Le texte HTML suit le mouvement (il vient de la profondeur, puis passe derrière la caméra) et la nuée reste toujours À CÔTÉ du texte (masque d'exclusion calculé sur les rectangles de texte, marge 12 px). ════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Syne';font-weight:400 800;font-display:swap;src:url(/assets/syne.woff2) format("woff2")} @font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url(/assets/manrope.woff2) format("woff2")} /* ── 1. Tokens ───────────────────────────────────────────────────── */ :root{ /* couleurs : nuit lisible, famille bleue, une seule lueur chaude rare */ --nuit:#0B1428; --nuit-2:#101A33; --nuit-3:#0D1730; --bleu:#2563EB; --bleu-1:#1D4ED8; --bleu-2:#3B82F6; --bleu-3:#60A5FA; --bleu-4:#93C5FD; --bleu-5:#DBEAFE; --bleu-6:#EAF2FF; --or:#FFE9B8; --t1:#F1F6FF; --t2:rgba(234,242,255,.80); --t3:rgba(234,242,255,.66); --line:rgba(234,242,255,.10); --line-2:rgba(234,242,255,.18); --line-3:rgba(234,242,255,.32); --surface:rgba(15,25,50,.82); --surface-2:rgba(19,31,60,.92); /* rayons */ --r-s:10px; --r-m:18px; --r-l:26px; --r-pill:999px; /* ombres et lueurs */ --sh-card:0 40px 80px -46px rgba(2,6,20,.95); --glow-btn:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(6,18,58,.4),0 0 0 1px rgba(37,99,235,.75),0 14px 36px -12px rgba(37,99,235,.9); --glow-btn-on:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(6,18,58,.4),0 0 0 1px rgba(96,165,250,.95),0 18px 48px -10px rgba(59,130,246,1); /* espacements */ --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.5rem; --s-5:4rem; --sec:clamp(3.25rem,6vw,5.5rem); --wrap:75rem; --gut:clamp(1rem,4vw,2.5rem); --nav:72px; /* durées et courbes */ --d-1:.3s; --d-2:.6s; --d-3:1.1s; --ease:cubic-bezier(.22,.8,.2,1); --ease-io:cubic-bezier(.65,0,.25,1); /* typo */ --syne:'Syne',system-ui,sans-serif; --man:'Manrope',system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; } /* ── 2. Base ─────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{background:var(--nuit);-webkit-text-size-adjust:100%} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} body{margin:0;background:var(--nuit);color:var(--t1);font:400 1.0625rem/1.7 var(--man);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} ::selection{background:rgba(37,99,235,.55);color:#fff} a{color:inherit;text-decoration:none} svg,canvas{display:block} h1,h2,h3,p{margin:0} h1,h2,h3{font-family:var(--syne);color:var(--t1)} :focus-visible{outline:2px solid var(--bleu-4);outline-offset:3px;border-radius:8px} .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:1rem;top:-4rem;z-index:400;padding:.7rem 1rem;border-radius:var(--r-s);background:var(--bleu);color:#fff;font-weight:600} .skip:focus{top:1rem} main,.foot{position:relative;z-index:1} main{overflow-x:clip} [id]{scroll-margin-top:calc(var(--nav) + 1rem)} /* La nuée : un seul canvas fixe, posé SUR le contenu en mode écran (le noir ne change rien, la lumière s'ajoute) ; un masque calculé sur les rectangles de texte l'efface partout où il y a quelque chose à lire. */ .nuee{position:fixed;inset:0;z-index:5;width:100%;height:100%;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity 1.2s var(--ease)} .is-gl .nuee{opacity:1} /* ALTERNANCE · deuxième canvas, même nuée : l'encre. Mélange normal (jamais d'addition, jamais de halo gris) ; chaque grain choisit sa matière selon le fond qu'il survole : lumière sur la nuit, encre sur le papier. */ .nuee-ink{mix-blend-mode:normal} /* Le cosmos : fond fixe de chaque univers (couleur, lueur, profondeur), interpolé au défilement ; une lueur de tunnel s'ouvre pendant la plongée. */ .cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--u-bg,#0B1428)} .cosmos::before{content:"";position:absolute;inset:-10%; background:radial-gradient(var(--u-gr,46%) var(--u-gr,46%) at var(--u-gx,70%) var(--u-gy,48%),var(--u-gl,rgba(37,99,235,.16)),transparent 72%)} .cosmos::after{content:"";position:absolute;inset:0;opacity:var(--tun,0); background:radial-gradient(34% 34% at 50% 50%,rgba(147,197,253,.16),rgba(37,99,235,.08) 45%,transparent 72%)} /* grain très fin : la matière du fond */ .cosmos i{position:absolute;inset:0;opacity:.5;background:radial-gradient(rgba(234,242,255,.05) .6px,transparent .9px) 0 0/3px 3px} /* profondeur du contenu : piloté par le défilement (data-depth) */ [data-depth]{will-change:transform,opacity} /* ── 3. Mise en page ─────────────────────────────────────────────── */ .wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)} .sec{position:relative;padding-block:var(--sec)} /* ── 3 bis. ALTERNANCE : la feuille de papier ────────────────────── Une section claire est une feuille posée sur la nuit : coins arrondis, un peu plus étroite que l'écran quand elle monte ; elle s'élargit jusqu'aux bords quand elle remplit l'écran, puis se resserre en sortant (masque clip-path piloté au défilement, --sx : aucune remise en page). Sur la feuille, les jetons de la nuit s'inversent : chaque composant a son équivalent clair sans règle dédiée (texte encre, filets d'encre, accents bleu marque). */ .paper{ --t1:#0F172A; --t2:#334155; --t3:#56607A; --line:rgba(15,23,42,.10); --line-2:rgba(15,23,42,.18); --line-3:rgba(15,23,42,.34); --bleu-3:#2563EB; --bleu-4:#1D4ED8; --bleu-5:#0F172A; position:relative;z-index:2;color:var(--t1);background:#F6F9FF; clip-path:inset(0 var(--sx,0px) round var(--sr,40px))} .paper ::selection{background:rgba(37,99,235,.2);color:#0F172A} .paper :focus-visible{outline-color:#1D4ED8} /* l'aube : juste au-dessus d'une feuille, la nuit s'éclaire un peu (lumière motivée : celle du papier qui arrive), sans faisceau */ .dawn{position:relative;z-index:1;height:0;pointer-events:none} .dawn::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:clamp(120px,22vh,220px); background:radial-gradient(60% 100% at 50% 100%,rgba(147,197,253,.16),rgba(96,165,250,.05) 55%,transparent 80%)} /* quatre papiers : papier bleuté (logos), papier (les cartes blanches s'y détachent), blanc (l'orbite), ciel (FAQ) */ .refs.paper{background:radial-gradient(70% 52% at 50% 64%,#E4EEFF,rgba(234,242,255,0) 72%),linear-gradient(180deg,#F6F9FF,#F1F6FF)} .results.paper{background:radial-gradient(60% 46% at 50% 72%,#E8F0FF,rgba(234,242,255,0) 74%),linear-gradient(180deg,#F6F9FF,#EEF3FB)} .medias.paper{background:#FFFFFF} .faq.paper{background:linear-gradient(180deg,#EAF2FF,#F6F9FF 46%)} /* composants sur papier : on éteint les lueurs (sur clair, une lueur devient un halo gris) */ .paper .eyebrow::before{filter:none} .paper .link{border-bottom-color:rgba(29,78,216,.3)} .paper .ref::before{background:radial-gradient(closest-side,rgba(147,197,253,.42),rgba(219,234,254,.3) 55%,transparent);opacity:0} .paper .ref:hover::before{opacity:1} .paper .ref:hover .logo:not(.wm){background:#2563EB} .paper .ref:hover .wm{color:#2563EB} .paper .faq details[open] .pm,.faq.paper details[open] .pm{box-shadow:0 8px 20px -8px rgba(37,99,235,.7)} .faq.paper details[open] .pm::before,.faq.paper details[open] .pm::after{background:#fff} .faq.paper summary:hover .pm{border-color:var(--bleu)} /* médias sur papier : les puces d'encre, celle du titre actif en bleu marque (pas d'or, pas de lueur) */ .paper .mlist li::before{background:rgba(15,23,42,.2)} .paper .mlist li.is-on::before{background:#2563EB;box-shadow:0 0 0 4px rgba(37,99,235,.13)} /* ── 4. Composants ───────────────────────────────────────────────── */ /* c-eyebrow : sur-titre, précédé de l'atome « trois points » (le trident en lumière) */ .eyebrow{display:flex;align-items:center;gap:.75rem;font:650 .72rem/1 var(--man);letter-spacing:.24em;text-transform:uppercase;color:var(--bleu-4)} .eyebrow::before{content:"";flex:none;width:15px;height:11px;filter:drop-shadow(0 0 4px rgba(96,165,250,.9)); background:radial-gradient(circle at 2.5px 7.5px,var(--bleu-5) 1.4px,transparent 1.9px),radial-gradient(circle at 7.5px 3px,var(--bleu-3) 1.7px,transparent 2.2px),radial-gradient(circle at 12.5px 7.5px,var(--bleu-5) 1.4px,transparent 1.9px)} /* c-titre */ .h2{margin-top:1.15rem;font-weight:560;font-size:clamp(2.1rem,4.4vw,3.8rem);line-height:1.04;letter-spacing:-.032em} .lead{margin-top:1.35rem;max-width:40rem;font-size:clamp(1rem,1.25vw,1.12rem);color:var(--t2)} .sec-head{max-width:46rem} .sec-head.center{margin-inline:auto;text-align:center} .sec-head.center .eyebrow{justify-content:center} .sec-head.center .lead{margin-inline:auto} /* c-bouton : la lumière se pose là où est le curseur (--mx/--my) */ .btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:3.3rem;padding:0 1.65rem;border:0;border-radius:var(--r-pill);cursor:pointer; font:650 .95rem/1 var(--man);letter-spacing:.01em;color:#fff;white-space:nowrap; background:linear-gradient(180deg,#3B7BF5 0%,#2563EB 52%,#1F56D8 100%);box-shadow:var(--glow-btn); transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease); background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 62%)} .btn:hover{transform:translateY(-1px);box-shadow:var(--glow-btn-on)} .btn:hover::before{opacity:1} .btn:active{transform:translateY(0)} .btn-sm{height:2.55rem;padding:0 1.15rem;font-size:.85rem} .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;height:3.3rem;padding:0 1.45rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(11,20,40,.35);font:600 .95rem/1 var(--man);color:var(--t1);transition:border-color .4s,background-color .4s} .btn-ghost svg{width:14px;height:14px;transition:transform .5s var(--ease)} .btn-ghost:hover{border-color:var(--line-3);background:rgba(234,242,255,.05)} .btn-ghost:hover svg{transform:translateY(2px)} .link{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem 0;font:650 .88rem/1.2 var(--man);color:var(--bleu-4);border-bottom:1px solid rgba(147,197,253,.34);transition:color .3s,border-color .3s} .link svg{width:12px;height:12px;transition:transform .45s var(--ease)} .link:hover{color:var(--t1);border-color:var(--t1)} .link:hover svg{transform:translateX(3px)} /* c-carte : surface nuit, liseré, lueur localisée qui suit le curseur */ .card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-l);border:1px solid var(--line);background:linear-gradient(180deg,rgba(21,33,64,.88),rgba(13,22,45,.9));box-shadow:var(--sh-card)} .card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s var(--ease); background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(96,165,250,.13),transparent 62%)} .card:hover::before{opacity:1} .card::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(234,242,255,.3),transparent)} /* Révélations (états cachés seulement avec JS) */ .js .rv{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease) calc(var(--d,0)*1s),transform 1.1s var(--ease) calc(var(--d,0)*1s)} .js .rv.in{opacity:1;transform:none} .safe .rv,.safe .h1-l,.safe .ref-box,.safe .ref-name{opacity:1!important;transform:none!important;filter:none!important} .safe .case-ph{clip-path:none!important;animation:none!important}.safe .gauge i{transform:none!important} /* Badge DA */ .da-badge{position:absolute;top:calc(var(--nav) + 12px);right:var(--gut);z-index:60;padding:.38rem .7rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(11,20,40,.6);font:650 .62rem/1 var(--man);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);transition:color .3s,border-color .3s} .da-badge:hover{color:var(--t1);border-color:var(--line-3)} /* ── 5. Navigation ───────────────────────────────────────────────── */ .nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav);border-bottom:1px solid transparent;transition:background-color .5s,border-color .5s,-webkit-backdrop-filter .5s,backdrop-filter .5s} .nav.is-scrolled,.nav.is-open{background:rgba(11,20,40,.82);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom-color:var(--line)} .nav-in{height:100%;display:flex;align-items:center;gap:1.25rem} .lockup{display:flex;align-items:center;gap:.7rem;margin-right:auto;border-radius:8px} .lk-mark{width:30px;height:30px;flex:none} .lk-txt{display:flex;flex-direction:column;gap:.32rem} .lk-name{font:700 1rem/1 var(--syne);letter-spacing:.3em;color:var(--t1)} .lk-sub{font:650 .5rem/1 var(--man);letter-spacing:.24em;color:var(--t3);white-space:nowrap} .menu ul{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0} .menu a,.sub-btn{display:inline-flex;align-items:center;gap:.35rem;height:2.5rem;padding:0 .78rem;border:0;border-radius:var(--r-pill);background:none;cursor:pointer;font:500 .875rem/1 var(--man);color:var(--t2);transition:color .3s} .menu a:hover,.sub-btn:hover,.menu a[aria-current="page"],.sub-btn[aria-expanded="true"]{color:var(--t1)} .sub-btn svg{width:10px;height:10px;transition:transform .35s var(--ease)} .has-sub{position:relative} .has-sub:hover .sub-btn svg,.sub-btn[aria-expanded="true"] svg{transform:rotate(180deg)} .sub{position:absolute;top:calc(100% + .6rem);left:50%;width:18rem;margin-left:-9rem;padding:.5rem;border-radius:var(--r-m);background:rgba(16,26,51,.97);border:1px solid var(--line-2);box-shadow:0 30px 70px -24px rgba(2,6,20,.85);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s} .sub::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem} .has-sub:hover .sub,.has-sub:focus-within .sub,.sub-btn[aria-expanded="true"]+.sub{opacity:1;visibility:visible;transform:none;transition-delay:0s} .menu .sub a{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;height:auto;padding:.8rem .95rem;border-radius:12px} .menu .sub a:hover{background:rgba(234,242,255,.05)} .sub b{font:600 .95rem/1 var(--syne);color:var(--t1)} .sub span{font:400 .78rem/1.3 var(--man);color:var(--t3)} .burger{display:none;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line-2);background:none;cursor:pointer;position:relative;flex:none} .burger span{position:absolute;left:50%;width:15px;height:1.5px;margin-left:-7.5px;background:var(--t1);border-radius:1px;transition:transform .45s var(--ease)} .burger span:first-child{top:calc(50% - 3.5px)} .burger span:last-child{top:calc(50% + 2.5px)} .burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)} .mnav{position:absolute;top:var(--nav);left:0;right:0;height:calc(100svh - var(--nav));overflow:auto;overscroll-behavior:contain;padding:.5rem var(--gut) 2rem;background:var(--nuit);border-top:1px solid var(--line)} .mnav ul{list-style:none;margin:0;padding:0} .mnav a{display:flex;justify-content:space-between;align-items:center;padding:.95rem 0;border-bottom:1px solid var(--line);font:500 1.1rem/1.2 var(--syne);color:var(--t1)} .mnav .mn-sub a{padding-left:1rem;font:500 .95rem/1.2 var(--man);color:var(--t2)} .mnav .btn{width:100%;margin-top:1.4rem} /* la nav s'adapte au fond qu'elle survole : encre sur papier, clair sur nuit */ .nav .lat{fill:var(--lat,#EAF2FF);transition:fill .5s} .nav,.nav .lk-name,.nav .lk-sub,.menu a,.sub-btn{transition:color .5s,background-color .5s,border-color .5s} .nav.on-p{--t1:#0F172A;--t2:#334155;--t3:#56607A;--line:rgba(15,23,42,.09);--line-2:rgba(15,23,42,.18);--line-3:rgba(15,23,42,.34);--lat:#0F172A} .nav.on-p.is-scrolled{background:rgba(246,249,255,.84);border-bottom-color:rgba(15,23,42,.08)} .nav.on-p .sub{background:#fff;border-color:rgba(15,23,42,.1);box-shadow:0 30px 60px -28px rgba(15,23,42,.35)} .nav.on-p .menu .sub a:hover{background:#F6F9FF} .nav.on-p :focus-visible{outline-color:#1D4ED8} /* menu ouvert : toujours la nuit */ .nav.is-open{--t1:#F1F6FF;--t2:rgba(234,242,255,.80);--t3:rgba(234,242,255,.66);--line:rgba(234,242,255,.10);--line-2:rgba(234,242,255,.18);--lat:#EAF2FF;background:rgba(11,20,40,.96)} /* ── 6. Hero ─────────────────────────────────────────────────────── */ .hero{position:relative;display:flex;align-items:center;min-height:calc(min(100svh,960px) - 4rem);padding:calc(var(--nav) + 1rem) 0 1rem} .hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(1rem,3vw,3rem)} .h1{font-weight:620;font-size:clamp(3.2rem,7.2vw,6.9rem);line-height:.95;letter-spacing:-.04em} .h1-l{display:block} .h1-l.is-blue{color:var(--bleu-3)} /* le titre « se condense » en même temps que la nuée : lisible dès la première image */ .js .h1-l{opacity:.35;filter:blur(5px);letter-spacing:.05em;font-weight:480} .lit .h1-l{opacity:1;filter:none;letter-spacing:-.04em;font-weight:620;transition:opacity .5s var(--ease),filter .9s var(--ease),letter-spacing 1.5s var(--ease-io),font-weight 1.5s var(--ease-io)} .lit .h1-l+.h1-l{transition-delay:.12s} .hero-sub{margin-top:1.6rem;max-width:31rem;font:560 clamp(1.08rem,1.45vw,1.28rem)/1.42 var(--syne);letter-spacing:-.008em;color:var(--bleu-5)} .hero-p{margin-top:1rem;max-width:33rem;color:var(--t2)} /* ligne-clé du H1 (H1 de la référence) : même allure que l'ancien sous-titre */ .h1-cle{display:block;margin-top:1.6rem;max-width:31rem;font:560 clamp(1.08rem,1.45vw,1.28rem)/1.42 var(--syne);letter-spacing:-.008em;color:var(--bleu-5)} .hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem} .reassure{margin-top:1.1rem;font:550 .8rem/1.5 var(--man);letter-spacing:.04em;color:var(--t3)} .hero-obj{position:relative;height:clamp(460px,74vh,720px)} /* lueur motivée : celle que la nuée dégage, pas un faisceau */ .hero-obj::before{content:"";position:absolute;inset:4% -6% 0;pointer-events:none;mix-blend-mode:screen; background:radial-gradient(32% 40% at 50% 48%,rgba(37,99,235,.20),rgba(37,99,235,.06) 55%,transparent 76%);opacity:var(--glow,1);transition:opacity 2s var(--ease)} .js .hero-obj::before{--glow:0} .lit .hero-obj::before{--glow:1} .fb{position:absolute;left:50%;top:50%;height:80%;width:auto;transform:translate(-50%,-52%)} .is-gl .fb{display:none} .hint{position:absolute;left:50%;bottom:.4rem;transform:translateX(-50%);font:600 .62rem/1 var(--man);letter-spacing:.24em;text-transform:uppercase;color:var(--t3);white-space:nowrap;opacity:0;transition:opacity 1.2s var(--ease) 2s} .is-gl.lit .hint{opacity:.85} /* ── 7. Références : le mur ──────────────────────────────────────── */ /* Un univers plein écran : grands logos, nets et pleins, le nom en texte. */ .refs{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav) + clamp(1.5rem,4vh,3rem)) 0 clamp(2.5rem,6vh,4rem)} .refs>.wrap{width:100%} .refs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap} .refs-head .h2{font-size:clamp(2.2rem,4.6vw,4.2rem);max-width:16ch} .wall{position:relative;margin-top:clamp(2.2rem,6vh,4rem)} .refs-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:clamp(2.4rem,6vh,3.8rem);column-gap:clamp(.5rem,1.6vw,1.5rem);perspective:1100px} .ref{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.15rem;min-width:0;--k:1;transform-style:preserve-3d} /* lueur localisée du logo : elle s'allume quand le logo avance vers nous */ .ref::before{content:"";position:absolute;left:50%;top:60px;width:min(300px,130%);height:190px;transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(closest-side,rgba(59,130,246,.26),rgba(37,99,235,.08) 55%,transparent);opacity:.32;transition:opacity .6s var(--ease)} .ref:hover::before{opacity:1} .ref-box{height:120px;width:100%;display:flex;align-items:center;justify-content:center;padding:0 .4rem;transform-style:preserve-3d} .logo{display:block;flex:none;width:calc(var(--w)*var(--k));height:calc(var(--h)*var(--k));max-width:100%;background:var(--t1); -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;transition:background-color .4s,transform .7s var(--ease)} .wm{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;width:auto;height:auto;background:none;-webkit-mask:none;mask:none;color:var(--t1)} .wm-a{font:650 2.05rem/1 var(--syne);letter-spacing:.32em;margin-right:-.32em} .wm-b{font:650 .72rem/1 var(--man);letter-spacing:.5em;margin-right:-.5em} .ref-name{font:650 .72rem/1.35 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--t3);text-align:center;transition:color .4s} .ref:hover .logo:not(.wm){background:#fff} .ref:hover .ref-name{color:var(--t1)} /* au survol, le logo avance vers nous */ .wall.is-done .ref-box{transition:transform .7s var(--ease)} .wall.is-done .ref:hover .ref-box{transform:translateZ(90px)} /* arrivée : avec la nuée, les grains viennent de la profondeur et dessinent le logo, puis il se fait net sur place ; sans WebGL, le logo lui-même arrive de la profondeur. */ .js .ref-box{opacity:0;filter:blur(10px);transform:translate3d(var(--fx,0),var(--fy,0),-1100px)} .js.is-gl .ref-box{opacity:.1;filter:blur(7px);transform:translate3d(0,0,-160px)} .js .ref-name{opacity:0;transform:translateY(8px)} .js .ref-box{transition:opacity .5s var(--ease) calc(var(--i)*.04s),filter .55s var(--ease) calc(var(--i)*.04s),transform .7s cubic-bezier(.16,1,.3,1) calc(var(--i)*.04s)} .js .ref-name{transition:opacity .9s var(--ease) calc(.3s + var(--i)*.07s),transform .9s var(--ease) calc(.3s + var(--i)*.07s),color .4s} .wall.is-formed .ref-box{opacity:1;filter:none;transform:none} .wall.is-formed .ref-name{opacity:1;transform:none} .wall.is-done .ref-name{transition:color .4s} /* ── 8. Méthode : la nuée forme les trois barres, le levier lu s'intensifie ── */ .m-stage{position:relative;height:clamp(250px,33vh,330px);margin-top:clamp(1.2rem,2.5vw,2rem)} .m-stage .fb{height:84%;transform:translate(-50%,-50%)} .levers{list-style:none;margin:clamp(.6rem,1.5vw,1.2rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.5rem);text-align:center} .lever{position:relative;padding:1.4rem .9rem 1.6rem;border-radius:var(--r-l);transition:background-color .5s var(--ease)} .lever:hover,.lever:focus-within,.lever.is-read{background:rgba(234,242,255,.03)} .lv-n{display:inline-flex;align-items:center;gap:.55rem;font:650 .7rem/1 var(--man);letter-spacing:.26em;color:var(--bleu-4)} .lv-n::after{content:"";width:0;height:1px;background:var(--bleu-3);box-shadow:0 0 6px rgba(96,165,250,.9);transition:width .7s var(--ease)} .lever.is-read .lv-n::after,.lever:hover .lv-n::after{width:1.6rem} .lever h3{margin-top:.75rem;font-weight:620;font-size:clamp(1.25rem,1.75vw,1.6rem);line-height:1.15;letter-spacing:-.018em} .lv-p{margin:.85rem auto 0;max-width:31ch;font-size:.95rem;line-height:1.66;color:var(--t2)} .lever .link{margin-top:1.1rem} /* repli sans WebGL, en colonne : une barre de points dans la gouttière */ .lv-bar{display:none} /* ── 9. Résultats : on débouche dans l'univers des cas (fenêtres de DA-50) ── Desktop : quatre hautes fenêtres côte à côte, dressées comme les barres du trident ; chacune monte du sol puis s'ouvre comme une fente sur la photo du SECTEUR (bichromie bleu nuit et bleu pâle). La fenêtre survolée s'élargit. À droite de chaque fenêtre, une jauge de grains monte de 0 à la valeur (aucune courbe). Version de nuit ci-dessous ; sur l'accueil alternance, les résultats sont sur papier : voir 9 bis (la carte claire). */ .cases{--cw:min(calc(100vw - 2*var(--gut)),var(--wrap));margin-top:clamp(1.8rem,3.4vw,2.6rem);display:flex;gap:1rem;height:clamp(540px,70vh,640px)} .case{position:relative;isolation:isolate;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--r-l);border:1px solid rgba(234,242,255,.16);background:var(--nuit-2); box-shadow:0 50px 90px -50px rgba(2,6,20,.95);transition:flex-grow 1s var(--ease-io),border-color .6s var(--ease)} .case.is-on{flex-grow:1.75;border-color:rgba(147,197,253,.42)} /* bichromie : ombres bleu nuit, lumières bleu pâle (multiply + lighten) */ .case-ph{position:absolute;inset:0;z-index:-2;overflow:hidden;isolation:isolate;background:#C9DCFF} .case-ph img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.18) brightness(1.04);transform:scale(1.04);transition:transform 1.6s var(--ease)} .case-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0F2A78,#0A1638);mix-blend-mode:lighten} .case::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(11,20,40,.78) 0%,rgba(11,20,40,.18) 26%,rgba(11,20,40,.12) 40%,rgba(11,20,40,.72) 62%,rgba(11,20,40,.96) 84%)} .case:hover .case-ph img,.case.is-on .case-ph img{transform:scale(1.1)} /* le texte garde la largeur d'une fenêtre étroite : il ne se recompose jamais quand elle s'élargit */ .case-in{position:relative;height:100%;width:calc((var(--cw) - 3rem)/4.75 - 3.4rem);margin-left:1.4rem;display:flex;flex-direction:column;justify-content:space-between;padding:1.45rem 0 1.5rem} .case-n{font:650 .64rem/1 var(--man);letter-spacing:.24em;text-transform:uppercase;color:rgba(234,242,255,.78)} .case h3{margin-top:.75rem;font-weight:620;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.18;letter-spacing:-.015em;text-wrap:balance} /* « de 0 % à » puis la valeur en très grand : départ et arrivée, rien entre les deux */ .case-from{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .55rem;font:650 .68rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:rgba(234,242,255,.8)} .case-from b{font:300 clamp(1.8rem,2.3vw,2.2rem)/1 var(--man);letter-spacing:-.03em;text-transform:none;color:rgba(234,242,255,.8);font-variant-numeric:lining-nums} .case-big{display:flex;align-items:flex-start;margin-top:.15rem;font:200 clamp(4.4rem,6.4vw,6.2rem)/.86 var(--man);letter-spacing:-.06em;font-variant-numeric:tabular-nums lining-nums;color:#fff} .case-big .pct{margin:.12em 0 0 .08em;font-size:.38em;font-weight:300;letter-spacing:0;color:var(--bleu-4)} .case-cap{margin-top:.75rem;font-size:.86rem;line-height:1.45;color:rgba(234,242,255,.88);text-wrap:balance} /* les indicateurs, en ligne */ .specs{margin:1rem 0 0} .specs div{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.5rem 0;border-top:1px solid rgba(234,242,255,.16);font-size:.8rem;line-height:1.35} .specs dt{color:rgba(234,242,255,.76)} .specs dd{margin:0;font-weight:650;color:#fff;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} /* la jauge : un rail, une lumière qui monte de 0 à la valeur ; la nuée y dépose ses grains */ .gauge{position:absolute;right:1.1rem;top:1.5rem;bottom:1.5rem;width:3px;border-radius:2px;background:rgba(234,242,255,.14)} .gauge i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v)*1%);border-radius:2px;background:linear-gradient(0deg,rgba(96,165,250,.5),#DBEAFE);box-shadow:0 0 12px rgba(96,165,250,.7);transform-origin:50% 100%;transition:opacity .8s var(--ease)} .js .gauge i{transform:scaleY(var(--g,0))} .is-gl .cases:not(.is-solo) .gauge i{opacity:.42} .cases-note{margin-top:1rem;font:550 .74rem/1.4 var(--man);letter-spacing:.04em;color:rgba(234,242,255,.68)} /* elles se dressent : dans chaque fenêtre (le texte est déjà là, lisible), la photo monte du sol en une fente étroite, comme une barre du trident (les deux du centre d'abord), puis la fente s'ouvre sur toute la fenêtre ; la nuée allume le cadre */ .js .case .case-ph{clip-path:inset(100% 43% 0 43% round 10px)} .js .case .case-ph img{transform:scale(1.35)} .js .case.is-open .case-ph{animation:dresse 1.7s calc(var(--o)*.12s) both} .js .case.is-open .case-ph img{transform:scale(1.04);transition:transform 2s var(--ease) calc(.5s + var(--o)*.12s)} @keyframes dresse{ 0%{clip-path:inset(100% 43% 0 43% round 10px);animation-timing-function:cubic-bezier(.3,.75,.25,1)} 42%{clip-path:inset(0 43% 0 43% round 10px);animation-timing-function:cubic-bezier(.65,0,.25,1)} 100%{clip-path:inset(0 0 0 0 round 0px)}} .js .case.is-open:hover .case-ph img,.js .case.is-open.is-on .case-ph img{transform:scale(1.1)} /* ── 9 bis. ALTERNANCE · Résultats sur papier : la fenêtre devient une CARTE CLAIRE ── Même geste (quatre hautes cartes dressées comme les barres du trident, la lue s'élargit, la photo monte du sol en fente puis s'ouvre), autre matière : une carte blanche ; en haut, une fenêtre photo en lumière douce (couleur adoucie, noirs relevés, voile bleu pâle en mode écran, comme DA-49/51 et Références B) ; dessous, le texte à l'encre ; la jauge passe au bleu marque, sans lueur. */ .paper .cases{height:clamp(600px,73vh,670px)} .paper .case{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(15,23,42,.08); box-shadow:0 1px 2px rgba(30,58,138,.06),0 44px 80px -52px rgba(30,58,138,.5);transition:flex-grow 1s var(--ease-io),border-color .6s var(--ease),box-shadow .6s var(--ease)} .paper .case.is-on{border-color:rgba(37,99,235,.3);box-shadow:0 1px 2px rgba(30,58,138,.08),0 50px 90px -50px rgba(30,58,138,.6)} .paper .case::before{display:none} /* la fenêtre photo : même hauteur dans les quatre cartes (le texte le plus long tient dessous) */ .paper .case-ph{position:relative;inset:auto;z-index:0;flex:none;height:calc(100% - 25.5rem);min-height:7rem;margin:.5rem .5rem 0;border-radius:calc(var(--r-l) - .5rem);background:#DBEAFE} .paper .case-ph img{position:absolute;inset:0;mix-blend-mode:normal;filter:saturate(.66) contrast(.92) brightness(1.08)} .paper .case-ph::after{mix-blend-mode:screen;background:linear-gradient(165deg,rgba(234,242,255,.5) 0%,rgba(219,234,254,.22) 45%,rgba(96,165,250,.14) 100%)} .paper .case-in{position:static;flex:1 1 auto;height:auto;padding:1.15rem 0 1.35rem} /* le numéro du cas : une pastille posée sur la photo */ .paper .case-n{position:absolute;left:1.15rem;top:1.15rem;z-index:1;padding:.45rem .72rem;border-radius:var(--r-pill);background:rgba(255,255,255,.88); box-shadow:0 6px 16px -10px rgba(30,58,138,.45);font-weight:700;color:#0F172A} .paper .case h3{margin-top:0} .paper .case-body{padding-top:.95rem} .paper .case-from{color:var(--t3)} .paper .case-from b{color:#7D8CA6} .paper .case-big{color:#0F172A;font-weight:250} .paper .case-big .pct{color:#2563EB} .paper .case-cap{color:var(--t2)} .paper .specs div{border-top-color:var(--line)} .paper .specs dt{color:var(--t3)} .paper .specs dd{color:#0F172A} .paper .gauge{top:auto;bottom:1.4rem;height:min(46%,15rem);background:rgba(15,23,42,.08)} .paper .gauge i{background:linear-gradient(0deg,rgba(37,99,235,.35),#2563EB);box-shadow:none} .paper .cases-note{color:var(--t3)} /* ── 10. Pourquoi : un trait de lumière souligne chaque chiffre ── */ .why .sec-head{max-width:60rem} .figs{margin-top:clamp(2rem,4vw,3.2rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)} .fig{padding:2rem 1.5rem 0 0} .fig+.fig{padding-left:1.6rem;border-left:1px solid var(--line)} .fig-v{display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .45rem} .fig-n{font:200 clamp(3rem,4.6vw,4.4rem)/1 var(--man);letter-spacing:-.05em;white-space:nowrap;font-variant-numeric:lining-nums} .fig-a{margin:0 .18em;font:560 .36em/1 var(--syne);letter-spacing:0;color:var(--bleu-4);vertical-align:.35em} .fig-u{font:560 1.05rem/1 var(--syne);color:var(--bleu-4)} .fig-u.fig-pre{color:var(--t2)} /* le trait : dessiné par la nuée ; en repli, un filet qui se trace */ .fig-ul{display:block;height:1px;margin-top:1.15rem;width:min(11rem,100%);background:linear-gradient(90deg,var(--bleu-3),rgba(96,165,250,0));transform-origin:0 50%} .js .fig-ul{transform:scaleX(0);transition:transform 1.4s var(--ease) calc(var(--d,0)*1s + .3s)} .js .fig.in .fig-ul{transform:none} .is-gl .fig-ul{opacity:.45} .fig p{margin-top:1rem;max-width:23ch;font-size:.92rem;line-height:1.55;color:var(--t2)} /* compteur de guides (chiffre de la référence, recalculé à chaque génération) */ .figs-more{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--t2)} .figs-more b{font:300 1.6rem/1 var(--man);letter-spacing:-.03em;color:var(--t1);margin-right:.25rem;font-variant-numeric:lining-nums} .figs-more a{color:var(--bleu-4);border-bottom:1px solid rgba(147,197,253,.4);transition:color .3s,border-color .3s} .figs-more a:hover{color:var(--t1);border-color:var(--t1)} /* ── 11. Médias : huit étoiles en orbite autour du trident ── */ .md-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center} .mlist{list-style:none;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0;border-top:1px solid var(--line)} .mlist li{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;padding:.95rem 0 .95rem 1.5rem;border-bottom:1px solid var(--line);cursor:default} .mlist li::before{content:"";position:absolute;left:.1rem;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:rgba(234,242,255,.22);transition:background-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)} .mlist li.is-on::before{background:var(--or);box-shadow:0 0 10px rgba(255,233,184,.85),0 0 22px rgba(96,165,250,.5);transform:scale(1.25)} .m-name{font:500 clamp(1.18rem,1.8vw,1.6rem)/1.12 var(--syne);letter-spacing:-.02em;color:var(--t2);transition:font-weight .7s var(--ease),color .5s} .mlist li.is-on .m-name{font-weight:700;color:var(--t1)} .m-th{flex:none;font:650 .62rem/1.3 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--t3);text-align:right;transition:color .5s} .mlist li.is-on .m-th{color:var(--bleu-4)} .medias-foot{margin-top:1.6rem;display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap} .medias-foot p{font-size:.92rem;color:var(--t2);max-width:30rem} .md-stage{position:relative;height:clamp(380px,58vh,540px)} .md-stage .fb{position:absolute;left:50%;top:50%;width:92%;height:auto;transform:translate(-50%,-50%)} /* ── 13. CTA final : compact, un halo circule autour du formulaire ── */ /* on ressort de la matière : le trident entier revient, à côté du formulaire (même composition que le hero : la boucle est bouclée) */ .cta{padding-block:clamp(3rem,6vw,5rem)} .cta-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(1rem,3vw,3rem)} .cta .h2{margin-top:.9rem;font-size:clamp(2.6rem,5.4vw,4.8rem);letter-spacing:-.04em} .cta-or{color:var(--or);text-shadow:0 0 28px rgba(255,233,184,.25)} .cta-p{max-width:34rem;margin-top:1.1rem;color:var(--t2)} .cta-obj{position:relative;height:clamp(420px,66vh,620px)} .cta-obj::before{content:"";position:absolute;inset:6% -4% 2%;pointer-events:none;background:radial-gradient(34% 42% at 50% 50%,rgba(37,99,235,.18),rgba(37,99,235,.05) 55%,transparent 76%)} .form{margin:2rem 0 0;display:grid;gap:1rem} .fields{width:100%;padding:.55rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:.55rem;border-radius:var(--r-l); background:rgba(16,26,51,.92);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(234,242,255,.07),0 40px 80px -40px rgba(2,6,20,.9);transition:border-color .6s var(--ease),box-shadow .6s var(--ease)} .is-gl .fields{box-shadow:inset 0 1px 0 rgba(234,242,255,.07),0 0 0 1px rgba(37,99,235,.12),0 0 48px -6px rgba(37,99,235,.32),0 40px 80px -40px rgba(2,6,20,.9)} .fields.is-ready{border-color:rgba(147,197,253,.5);box-shadow:inset 0 1px 0 rgba(234,242,255,.1),0 0 0 1px rgba(59,130,246,.3),0 0 64px -4px rgba(59,130,246,.5),0 40px 80px -40px rgba(37,99,235,.55)} .field{display:flex;flex-direction:column;gap:.42rem;padding:.72rem 1rem .74rem;text-align:left;border-radius:var(--r-m);background:rgba(11,20,40,.85);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s} .field:focus-within{border-color:rgba(96,165,250,.7);box-shadow:0 0 0 4px rgba(37,99,235,.22)} .field label{font:700 .62rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--t3)} .field input{width:100%;padding:0;border:0;outline:0;background:none;color:var(--t1);font:400 1rem/1.4 var(--man)} .field input::placeholder{color:rgba(234,242,255,.45)} .btn-cta{grid-column:1/-1;height:auto;min-height:3.6rem;padding:0 1.8rem;font-size:.98rem;border-radius:calc(var(--r-l) - .55rem)} .btn-cta.is-charged{animation:charge 2.4s var(--ease-io) infinite} @keyframes charge{0%,100%{box-shadow:var(--glow-btn)}50%{box-shadow:var(--glow-btn-on),0 0 60px -6px rgba(96,165,250,.7)}} .form-ok{font-size:.94rem;color:var(--bleu-5)} .cta-foot{margin-top:1.3rem;display:flex;flex-direction:column;gap:.3rem} .cta .reassure{margin-top:0} /* titre du formulaire (H3 de la référence) et réassurance de l'ancien accueil */ .form-t{margin:0 0 .2rem;font:600 clamp(1rem,1.3vw,1.12rem)/1.3 var(--syne);letter-spacing:-.01em;color:var(--t1)} .cta-off{max-width:34rem;font-size:.9rem;line-height:1.55;color:var(--t2)} .form-ko{font-size:.94rem;color:#FCA5A5} .form-ko a{color:var(--t1);border-bottom:1px solid currentColor} .cta-addr{font-style:normal;font:550 .8rem/1.5 var(--man);letter-spacing:.04em;color:var(--t3)} /* ── 14. FAQ ─────────────────────────────────────────────────────── */ .faq-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,6vw,6rem);align-items:start} .faq-list{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.4rem 0;font:560 clamp(1.04rem,1.5vw,1.24rem)/1.35 var(--syne);letter-spacing:-.01em;color:var(--t1);border-radius:8px} .faq summary::-webkit-details-marker{display:none} .pm{position:relative;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;border:1px solid var(--line-2);transition:border-color .4s,background-color .4s,box-shadow .4s} .pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:.72rem;height:1.5px;border-radius:1px;background:var(--t1);transform:translate(-50%,-50%)} .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease)} .faq details[open] .pm{background:var(--bleu);border-color:var(--bleu);box-shadow:0 0 18px rgba(59,130,246,.6)} .faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0deg)} .faq summary:hover .pm{border-color:var(--line-3)} .ans{padding:0 3.2rem 1.6rem 0;color:var(--t2);font-size:.98rem} .ans a{color:var(--bleu-4);border-bottom:1px solid rgba(147,197,253,.4)} .ans a:hover{color:var(--t1);border-color:var(--t1)} .faq-obj{position:relative;height:clamp(190px,25vh,240px);margin-top:1.2rem} .faq-obj .fb{height:76%} .faq-side .lead{margin-top:1.2rem} .faq-side .link{margin-top:1.6rem} /* ── 15. Pied de page ────────────────────────────────────────────── */ .foot{border-top:1px solid var(--line);padding:clamp(3.5rem,6vw,5rem) 0 2rem;background:rgba(11,20,40,.7)} .foot-grid{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:2rem} .foot-brand p{margin-top:1.1rem;max-width:18rem;font-size:.88rem;line-height:1.6;color:var(--t3)} .foot h2{font:700 .68rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--t3)} .foot ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.65rem;font-size:.9rem} .foot ul a{color:var(--t2);transition:color .3s} .foot ul a:hover{color:var(--t1)} .foot address{margin-top:1.2rem;font-style:normal;font-size:.9rem;line-height:1.7;color:var(--t2)} .foot-bar{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--t3)} .foot-bar a:hover{color:var(--t1)} /* ── 16. Responsive ──────────────────────────────────────────────── */ .sub-more{display:flex;flex-wrap:wrap;gap:.2rem .1rem;margin:.35rem 0 0;padding:.6rem .55rem .3rem;border-top:1px solid var(--line)} .menu .sub-more a{height:auto;padding:.35rem .45rem;font-size:.78rem;color:var(--t3)} .menu .sub-more a:hover{color:var(--t1);background:none} @media (max-width:1240px){ .menu{display:none} .burger{display:block} .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .foot-brand{grid-column:1/-1} } @media (max-width:1040px){ /* tablette : deux colonnes de fenêtres, toutes ouvertes */ .cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto} .case{height:clamp(450px,58vh,540px)} .case-in{width:auto;margin-right:3.4rem} /* cartes claires : la hauteur suit le texte, la photo garde une belle fenêtre */ .paper .cases{height:auto} .paper .case{height:auto} .paper .case-ph{flex:none;height:clamp(190px,24vw,250px)} } @media (max-width:980px){ .figs{grid-template-columns:repeat(2,minmax(0,1fr))} .fig:nth-child(3){padding-left:0;border-left:0} .fig:nth-child(n+3){margin-top:1rem;border-top:1px solid var(--line)} .faq-grid{grid-template-columns:1fr;gap:1.6rem} .faq-side{position:relative;padding-right:min(34%,9rem)} .faq-obj{position:absolute;right:0;top:1.6rem;width:min(32%,8.5rem);height:min(100%,200px);min-height:150px;margin:0} .refs-list{grid-template-columns:repeat(3,minmax(0,1fr))} .ref{--k:.86} .md-grid{grid-template-columns:1fr;gap:0} .md-stage{order:-1;height:clamp(240px,34vh,300px);margin:clamp(1.4rem,4vw,2rem) 0 0} .md-copy{display:contents} .md-copy .sec-head{order:-2} .mlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem} } @media (max-width:860px){ /* en colonne, chaque levier porte sa barre de lumière dans sa gouttière */ .m-stage{display:none} .levers{grid-template-columns:1fr;text-align:left;gap:0;margin-top:clamp(1.6rem,4vw,2.4rem);border-top:1px solid var(--line)} .lever{padding:1.5rem 0 1.6rem 3.6rem;border-radius:0;border-bottom:1px solid var(--line)} .lever:hover,.lever:focus-within,.lever.is-read{background:none} .lv-p{margin-left:0;max-width:none} .lv-bar{display:block;position:absolute;left:.6rem;top:50%;width:14px;height:var(--bh,60%);transform:translateY(-50%);border-radius:3px; background:radial-gradient(circle,var(--bleu-5) 1px,transparent 1.5px) 0 0/4px 4px;opacity:.55} .lever[data-bar="0"] .lv-bar{--bh:72%;width:18px;background-image:radial-gradient(circle,var(--bleu-3) 1.1px,transparent 1.6px)} .lever[data-bar="1"] .lv-bar,.lever[data-bar="2"] .lv-bar{--bh:46%} .is-gl .lv-bar{display:none} /* CTA : le trident au-dessus, comme au hero */ .cta-grid{grid-template-columns:1fr;gap:0} .cta-obj{order:-1;height:clamp(260px,38svh,340px);margin-bottom:.4rem} } @media (max-width:700px){ .hero{min-height:0;padding-top:calc(var(--nav) + .25rem)} .hero-grid{grid-template-columns:1fr;gap:0} .hero-obj{order:-1;height:clamp(250px,36svh,320px);margin:0 0 .2rem} .hint{display:none} .da-badge{top:calc(var(--nav) + 8px)} .refs{min-height:0;padding-top:clamp(3rem,8vw,4rem)} .refs-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem} .ref{--k:.66;gap:.8rem} .ref::before{top:44px;height:130px} .ref-box{height:88px} .wm-a{font-size:1.45rem} .wm-b{font-size:.56rem} .fields{grid-template-columns:1fr} .btn-cta{min-height:3.5rem} } @media (max-width:640px){ /* mobile : les fenêtres s'empilent ; celle du centre de l'écran devient le fond */ .cases{grid-template-columns:1fr;gap:.9rem} .case{height:clamp(430px,60svh,500px)} .case-in{margin-left:1.25rem;margin-right:3rem} .paper .case{height:auto} .paper .case-ph{height:clamp(170px,46vw,210px)} .paper .case-n{left:1rem;top:1rem} } @media (max-width:520px){ :root{--nav:64px} .nav-in{gap:.55rem} .lockup{gap:.5rem} .lk-mark{width:26px;height:26px} .lk-name{font-size:.88rem;letter-spacing:.24em} .lk-sub{font-size:.44rem;letter-spacing:.2em} .nav .btn-sm{height:2.35rem;padding:0 .85rem;font-size:.78rem} .burger{width:2.35rem;height:2.35rem} .hero-ctas .btn,.hero-ctas .btn-ghost{width:100%} .figs{grid-template-columns:1fr} .fig,.fig+.fig{padding:1.3rem 0 0;border-left:0} .fig:nth-child(n+2){margin-top:1.1rem;border-top:1px solid var(--line)} .fig-ul{margin-top:.9rem} .fig p{margin-top:.8rem} .mlist li{flex-direction:column;gap:.35rem;padding:.8rem 0 .8rem 1.15rem} .mlist li::before{top:1.38rem} .m-name{font-size:1.02rem;line-height:1.2} .m-th{text-align:left;font-size:.54rem;letter-spacing:.16em} .ans{padding-right:0} .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem} .ref-name{font-size:.6rem;letter-spacing:.15em} .btn-cta{width:100%;padding:0 1rem;font-size:.95rem} .case h3{font-size:1.2rem} } /* ── 17. Mouvement réduit : tout lisible, statique ───────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important} .js .rv,.js .h1-l,.js .ref-box,.js .ref-name{opacity:1!important;transform:none!important;filter:none!important;letter-spacing:-.04em} [data-depth]{opacity:1!important;transform:none!important;filter:none!important} .js .case .case-ph{clip-path:none!important;animation:none!important} .js .gauge i{transform:none!important} .js .ref-name{letter-spacing:.18em} .js .h1-l{font-weight:620} .js .hero-obj::before{--glow:1} .btn-cta.is-charged{animation:none} .hint{display:none} } /* sans JavaScript (pas de classe .js) : menu mobile déplié, sans burger. Hors