/* ── LES POLICES SONT SERVIES D'ICI, PLUS PAR GOOGLE ────────────────────── Le gabarit chargeait « fonts.googleapis.com » dans une feuille de style, c'est-à-dire dans une ressource QUI BLOQUE LE RENDU. Mesuré : quand cet hôte répond lentement, la page ne peint jamais — pas « lentement », JAMAIS — et la même page, cet hôte coupé, peint en 184 ms. Ce n'est pas qu'une question de vitesse. Un réseau d'entreprise qui filtre Google, un bloqueur de traqueurs, un pays qui coupe : dans les trois cas le visiteur voit une page blanche. Et une adresse IP partait chez un tiers à chaque visite, sur un site dont le pied de page dit mesurer son audience « sans témoin ni identifiant ». On ne peut pas écrire ça et faire l'autre. Six fichiers, 136 Ko, latin et latin étendu seulement : le site parle français, anglais et espagnol, le cyrillique et le vietnamien que servait Google n'ont jamais été affichés à personne. Archivo est une police variable — un seul fichier porte les cinq graisses. Les plages Unicode sont celles de Google, recopiées telles quelles : c'est elles qui font tomber le navigateur sur le bon fichier. */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap; src:url(polices/archivo-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap; src:url(polices/archivo-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(polices/plex-mono-latin-ext-400.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(polices/plex-mono-latin-400.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url(polices/plex-mono-latin-ext-500.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url(polices/plex-mono-latin-500.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ═══════════════════════════════════════════════════════════ Yoseri — feuille de style du site Jetons identiques à l'app (mode clair, assumé) ═══════════════════════════════════════════════════════════ */ :root{ color-scheme:only light; /* ── neutres — charte §01 ───────────────────────────────────────────── La lavande est la signature : fond de section, chips, surfaces secondaires. Elle n'est pas une bordure — les traits sont en Ligne. */ --fond:#FFFFFF; --encre:#0F1426; /* texte principal, trait long du symbole */ --encre-2:#2A3047; /* texte secondaire fort */ --texte:#4A5070; /* Encre 3 — libellés et sous-titres à lire */ --gris:#5D6480; /* Gris de texte — 5,83:1 sur blanc (app) */ --gris-2:#6A7088; /* Second gris de texte — 4,90:1 sur blanc */ --perle:#B9BCC9; /* Perle — trait court du symbole sur sombre */ --ardoise:#5B6472; /* Classes « autres » : porte du blanc */ --violet-3:#D5CEF9; /* Deuxième ton de l'échelle de chaleur */ --trait:#E3E2EC; /* Ligne — séparateurs et bordures */ --lavande:#EEEDF3; /* fond de section : la signature de la marque */ --gris-f:#F6F5FA; /* Lavande claire — cartes posées sur lavande */ --scene:#0B0F1C; /* Nuit */ --nuit-2:#1C2238; /* départ du dégradé Nuit de la charte */ /* ── marque ─────────────────────────────────────────────────────────── Une seule couleur de marque. Le violet signale l'action ; il n'est jamais un aplat de fond hors splash. */ --violet:#5B3DF5; --violet-vif:#8B72FF; /* dégradés, halo — jamais en texte sur clair (3,5:1) */ /* Le même violet EN TEXTE sur la nuit : 5,41 contre #0B0F1C nu, mais 4,42 là où le halo violet de .sombre passe à 26 % — sous le 4,5 exigé pour du petit texte. Une teinte un peu plus claire tient 5,02 au pire endroit du dégradé. Réservée au texte : les dégradés gardent --violet-vif, qui n'a pas de seuil à tenir. */ --violet-nuit:#9280FF; /* petit texte sur fond sombre (5,02:1 au pire) */ --violet-pastel:#C9BEFF; /* avatars, trait court sur fond violet */ --violet-fonce:#3D25C8; /* fin de dégradé, état pressé */ --violet-2:#EDEAFF; /* fond teinté d'un accent violet */ --peche:#FF8A5C; /* célébrations et illustrations seulement */ /* ── sémantiques — jamais décoratives, jamais seules ────────────────── Chaque gain ou dépense porte aussi un signe : 8 % des hommes distinguent mal le vert du rouge. */ /* Aplats : la couleur de marque, pour un fond ou une pastille. */ --vert:#0DA96B;--vert-2:#E4F6EE;--vert-vif:#2ED38C; --rouge:#E1454A;--rouge-2:#FCE9EA;--rouge-surf:#C8262B; --ambre:#D28A1B;--ambre-2:#FBF1DE; /* Variantes TEXTE, reprises de l'app. Le vert de marque ne fait que 3:1 sur blanc : parfait pour un aplat, insuffisant pour un mot à lire. */ --vert-t:#087246;--rouge-t:#BE2328;--ambre-t:#8A5A0D; /* Anciens noms, conservés le temps que tout bascule. */ --vert-fonce:var(--vert-t);--rouge-fonce:var(--rouge-t);--ambre-fonce:var(--ambre-t); /* ── couleurs de données, reprises de l'app ── */ --c-log:#5B3DF5;--c-epi:#2FA0DA;--c-res:#F0684E;--c-tra:#F2A93B;--c-abo:#8B5CF6;--c-san:#20B486;--c-aut:#B9BDD0; --a-act:#2FA0DA;--a-cry:#F2A93B;--a-imm:#20B486; /* ── typographie — une seule famille, plus une mono pour les colonnes ── */ /* ── verre et relief, repris de la nouvelle app ───────────────────── L'ombre longue n'est pas grise : elle porte la couleur de la lumière qui l'a créée. C'est ce qui distingue « posé sur une surface éclairée » de « détouré sur du gris ». */ --verre-trait:rgba(15,20,38,.07); --verre-luisant:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(15,20,38,.05); --verre-iris:linear-gradient(135deg,rgba(139,114,255,.20),rgba(255,255,255,0) 36%,rgba(255,255,255,0) 64%,rgba(96,178,255,.17)); --verre-ombre:0 2px 8px -4px rgba(15,20,38,.18),0 16px 40px -18px rgba(58,40,132,.34); --verre-barre:rgba(255,255,255,.38); --verre-barre-flou:blur(34px) saturate(2.4) brightness(1.04); /* L'ombre d'une plaque de verre, reprise telle quelle de l'app : une arête intérieure qui capte la lumière, une ombre courte dessous. Pas de bordure — c'est elle qui faisait lire « carte collée sur la page ». */ --verre-barre-ombre:inset 0 0 0 1px rgba(255,255,255,.72), inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(15,20,38,.05), 0 1px 2px -1px rgba(15,20,38,.16),0 12px 34px -14px rgba(58,40,132,.34); --verre-barre-ombre:inset 0 0 0 1px rgba(255,255,255,.72),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(15,20,38,.05),0 1px 2px -1px rgba(15,20,38,.16),0 12px 34px -14px rgba(58,40,132,.34); /* Une ombre interne ne fait pas partie du raccourci background : elle se pose par-dessus n'importe quelle couleur mise en style en ligne. */ --relief-couleur:inset 0 9px 14px -9px rgba(255,255,255,.60),inset 0 -9px 14px -9px rgba(0,0,0,.30); --relief-fort:inset 0 16px 24px -14px rgba(255,255,255,.42),inset 0 -18px 28px -16px rgba(0,0,0,.34); --appui:cubic-bezier(.4,0,1,1); --archivo:"Archivo",system-ui,sans-serif; --sans:"Archivo",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --h-nav:68px;--h-som:53px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--h-nav) + var(--h-som) + 18px)} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--fond);color:var(--encre); font-family:var(--sans);font-size:16px;line-height:1.5; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:clip; } ::selection{background:var(--violet-2);color:var(--violet-fonce)} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} svg{display:block} /* la charte interdit l'italique : aucune exception, y compris sur les dont on se sert ici pour accentuer sans changer la graisse */ em,i,cite,address{font-style:normal} img{max-width:100%} :focus-visible{outline:2.5px solid var(--violet);outline-offset:3px;border-radius:8px} .num{font-family:var(--archivo);font-variant-numeric:tabular-nums;letter-spacing:-.03em} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── structure ── */ .env{max-width:1140px;margin:0 auto;padding:0 28px} section{padding:88px 0} section.serre{padding:56px 0} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)} .eyebrow::before{content:"";width:22px;height:2.5px;border-radius:99px;background:var(--violet)} h2{font-family:var(--archivo);font-weight:700;font-size:clamp(29px,4.2vw,42px);letter-spacing:-.03em;line-height:1.09;margin:16px 0 18px;text-wrap:balance} .lede{font-size:19px;line-height:1.6;color:var(--texte);max-width:56ch} .lede b{color:var(--encre);font-weight:600} p.txt-cour{font-size:16.5px;color:var(--texte);line-height:1.65;max-width:62ch} p.txt-cour+p.txt-cour{margin-top:14px} p.txt-cour b{color:var(--encre);font-weight:600} /* ── boutons ── */ .bo{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:16px;font-weight:700;padding:15px 26px;border-radius:14px;transition:transform .15s,box-shadow .2s,background .16s} .bo svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .bo.pl{background:var(--violet);color:#fff;box-shadow:0 10px 26px -10px rgba(91,61,245,.65)} .bo.pl:hover{transform:translateY(-1.5px);box-shadow:0 14px 32px -10px rgba(91,61,245,.7)} .bo.pl:active{transform:scale(.985)} .bo.cr{background:var(--lavande);color:var(--encre)} .bo.cr:hover{background:var(--trait)} .bo.bl{background:#fff;color:var(--encre)} /* ═══════════ NAVIGATION ═══════════ */ .nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s} .nav.pose{border-bottom-color:var(--trait);box-shadow:0 6px 24px -18px rgba(15,20,38,.25)} .nav .env{display:flex;align-items:center;gap:26px;height:var(--h-nav)} /* ── mot-symbole ─────────────────────────────────────────────────────── Le symbole est le Y du mot : il se cale sur la hauteur de capitale et se colle à « oseri ». Trait long en encre, trait court un ton plus clair — jamais de violet ni de vert dans le symbole. */ .marque{display:inline-flex;align-items:baseline;gap:0;font-family:var(--archivo);font-size:20px;font-weight:800;letter-spacing:-.038em;flex:none;--ya:var(--encre);--yb:#7A80A0} /* align-items:baseline + élément remplacé : le pied du symbole tombe sur la ligne de base du mot, comme dans le fichier de marque. */ /* Le symbole est un carré dont l'encre s'arrête à 89 % : posé par sa boîte sur la ligne de base, son pied flotte 11 % trop haut. On le redescend. */ /* LE RUBAN, CALÉ SUR LE LOCKUP OFFICIEL PLUTÔT QU'À L'ŒIL. L'ancien Y laissait beaucoup de vide dans sa boîte de 100×100, d'où les grosses marges négatives. Le ruban, lui, remplit sa boîte : l'encre va de 0 à 100 en largeur et de 0 à 98,4 en hauteur. Les deux nombres ci-dessous sont MESURÉS, pas choisis. Sur le lockup livré dans le kit — la référence du crénage — la hauteur du ruban vaut 100 quand l'encre de « oseri » en vaut 107,29, et les lettres commencent 15,84 AVANT le bord droit du ruban : elles chevauchent, le « o » se glisse sous la diagonale. Reporté sur l'encre réelle d'Archivo 800 (hauteur 0,735 em, approche gauche du « o » 0,031 em — mesurées sur la police RÉELLEMENT chargée, celle de Google, et non sur le TTF du kit : les deux diffèrent de deux pour cent en hauteur d'encre, et ça se voit à 20 px), il vient 0,681 em de haut et une marge droite de −0,137 em. Le décalage vertical tombe à un cheveu près sur la ligne de base : `align-items:baseline` suffit, à 0,013 em près. */ .marque .y{height:.681em;width:auto;margin-right:-.137em;margin-left:0;position:relative;top:.013em;flex:none} .sombre .marque,.hero-attente .marque{--ya:#FFFFFF;--yb:#C9BEFF} /* Charte : sur violet, FFFFFF / C9BEFF. Le mot doit suivre, sinon il reste en encre sur du violet. */ .on-violet .marque,.violet .marque{--ya:#FFFFFF;--yb:#C9BEFF;color:#fff} .nav nav{display:flex;align-items:center;gap:20px} .nav nav>a,.nav .decl{font-size:14.5px;font-weight:600;color:var(--texte);transition:color .15s;padding:4px 0;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:5px} .nav nav>a:hover,.nav .decl:hover{color:var(--encre)} .nav nav>a.on,.nav .decl.on{color:var(--violet);border-bottom-color:var(--violet)} .nav .decl svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s} .nav .decl[aria-expanded="true"] svg{transform:rotate(180deg)} .nav .fin{margin-left:auto;display:flex;align-items:center;gap:10px} .nav .fin .conn{font-size:14.5px;font-weight:600;color:var(--texte);padding:9px 12px} .nav .fin .conn:hover{color:var(--encre)} /* Le sélecteur de langue : deux liens, pas un menu. Un menu pour deux choix demande un clic de plus pour rien, et cache la langue disponible. */ .lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:99px;background:var(--gris-f);border:1px solid var(--trait)} .lang a{font-family:var(--archivo);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--gris);padding:5px 9px;border-radius:99px;line-height:1;transition:color .15s,background .15s} .lang a:hover{color:var(--encre)} .lang a.on{background:#fff;color:var(--encre);box-shadow:0 1px 2px -1px rgba(15,20,38,.18)} .lang a:focus-visible{outline:2px solid var(--violet);outline-offset:2px} @media(max-width:1060px){.nav .fin .lang{display:none}} .nav .fin .bo{padding:10px 19px;border-radius:11px;font-size:14.5px} /* — menu produit (déroulant) — */ .pan-produit{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--trait);box-shadow:0 26px 50px -28px rgba(15,20,38,.32);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s} .pan-produit.vu{opacity:1;visibility:visible;transform:none} .pan-produit .env{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 26px;padding-top:26px;padding-bottom:26px;height:auto;align-items:start} .pan-produit .col{display:flex;flex-direction:column;gap:4px} .pan-produit h6{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--texte);margin-bottom:8px} .pan-produit a{display:flex;gap:11px;padding:10px 12px;border-radius:13px;transition:background .15s} .pan-produit a:hover{background:var(--gris-f)} .pan-produit a i{width:9px;height:9px;border-radius:3px;flex:none;margin-top:6px} .pan-produit a b{display:block;font-family:var(--archivo);font-size:15px;font-weight:600;letter-spacing:-.02em} .pan-produit a span{display:block;font-size:12.5px;color:var(--texte);line-height:1.45;margin-top:2px} .pan-produit a.on b{color:var(--violet)} /* — burger et menu mobile — */ .burger{display:none;width:42px;height:42px;border-radius:12px;background:var(--lavande);place-items:center;flex:none} .burger svg{width:19px;height:19px;stroke:var(--encre);fill:none;stroke-width:2.2;stroke-linecap:round} .voile-nav{position:fixed;inset:0;z-index:90;background:rgba(15,20,38,.4);opacity:0;pointer-events:none;transition:opacity .2s} .menu-mobile{position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(330px,88vw);background:#fff;padding:20px 22px 40px;transform:translateX(104%);transition:transform .26s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;gap:2px;overflow-y:auto;box-shadow:-18px 0 50px rgba(15,20,38,.18)} body.menu-ouvert{overflow:hidden} body.menu-ouvert .voile-nav{opacity:1;pointer-events:auto} body.menu-ouvert .menu-mobile{transform:none} .menu-mobile .fermer{align-self:flex-end;width:38px;height:38px;border-radius:11px;background:var(--gris-f);display:grid;place-items:center;margin-bottom:8px} .menu-mobile .fermer svg{width:16px;height:16px;stroke:var(--encre);fill:none;stroke-width:2.4;stroke-linecap:round} .menu-mobile h6{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--texte);margin:16px 0 4px} .menu-mobile a{display:flex;align-items:center;gap:10px;font-family:var(--archivo);font-size:17.5px;font-weight:600;letter-spacing:-.02em;padding:9px 0} .menu-mobile a i{width:8px;height:8px;border-radius:3px;flex:none} .menu-mobile a.on{color:var(--violet)} .menu-mobile .bo{margin-top:20px} /* Le sélecteur dans le tiroir : posé APRÈS « .menu-mobile a », sinon la règle du tiroir gagne à spécificité égale et le sélecteur se disloque. */ .menu-mobile .lang{margin:22px 0 0;align-self:stretch;width:100%;justify-content:stretch} .menu-mobile .lang a{flex:1;justify-content:center;font-size:13px;padding:9px 6px;gap:0;color:var(--gris)} .menu-mobile .lang a.on{color:var(--encre)} .menu-mobile .lg-tt{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--texte);margin:22px 0 6px} @media(max-width:1060px){.nav nav,.nav .fin .conn{display:none}.burger{display:grid}.pan-produit{display:none}} /* sous 760 px la barre collante porte l'appel : le bouton de la barre du haut ferait double emploi et encombrerait le héro */ @media(max-width:760px){.nav .fin .bo{display:none}} @media(max-width:380px){.env{padding:0 18px}.marque{font-size:17px}} /* ═══════════ SOMMAIRE DE PAGE ═══════════ */ .sommaire{position:sticky;top:var(--h-nav);z-index:60} .sommaire .env{display:flex;align-items:center;gap:6px;height:var(--h-som);overflow-x:auto;scrollbar-width:none;position:relative;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)} .sommaire .env::-webkit-scrollbar{display:none} .sommaire a{flex:none;font-size:13px;font-weight:600;color:var(--texte);padding:8px 13px;border-radius:99px;white-space:nowrap} .sommaire a:last-child{margin-right:26px} @media(max-width:700px){.sommaire .env{padding-left:20px;padding-right:20px}} /* ═══════════ HÉROS DE PAGE ═══════════ */ .page-hero{position:relative;overflow:hidden;padding:70px 0 40px} .page-hero .fond-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(760px 500px at 84% 0%,rgba(139,114,255,.13),transparent 65%)} .page-hero .env{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center} .page-hero .env.solo{grid-template-columns:1fr} .page-hero h1{font-family:var(--archivo);font-weight:800;font-size:clamp(35px,4.6vw,54px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance;margin:16px 0 20px} .page-hero h1 em{font-style:normal;color:var(--violet)} .page-hero .lede{margin-bottom:28px} .page-hero .actions{display:flex;gap:12px;flex-wrap:wrap} .page-hero .actions+.preuves{margin-top:26px} .preuves{display:flex;gap:20px;flex-wrap:wrap} .preuves span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--texte)} .preuves svg{width:15px;height:15px;stroke:var(--vert);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none} @media(max-width:1000px){.page-hero .env{grid-template-columns:1fr;gap:34px}} /* — « en bref » : ce que la page couvre — */ .enbref{border:1px solid var(--trait);border-radius:20px;padding:22px 24px;background:var(--gris-f);max-width:560px} .enbref h2,.enbref h3{font-family:var(--archivo);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--texte);margin:0 0 12px} .enbref ul{list-style:none;display:flex;flex-direction:column;gap:9px} .enbref li{display:flex;gap:10px;font-size:14.5px;color:var(--encre-2);font-weight:500;line-height:1.5} .enbref li svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--violet);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} /* ═══════════ TÉLÉPHONE ═══════════ */ .scene-tel{position:relative;display:flex;justify-content:center;padding:8px 0 20px} .tel{width:min(330px,86vw);border-radius:46px;background:#0F1426;padding:10px;box-shadow:0 50px 100px -34px rgba(15,20,38,.5),0 0 0 1.5px rgba(15,20,38,.08);position:relative;z-index:2} .tel .vue{border-radius:37px;overflow:hidden;background:#fff;display:flex;flex-direction:column} .tel .statut{display:flex;justify-content:space-between;align-items:center;padding:16px 24px 4px;font-size:12.5px;font-weight:600} /* ── captures réelles ───────────────────────────────────────────────────── Le même cadre d'appareil que les maquettes, mais rempli d'une image : pas d'encoche par-dessus, elle masquerait le haut de l'écran capturé. */ .tel.reel{padding:8px} .tel.reel .vue{border-radius:38px;display:block;background:#0F1426} .tel.reel .vue img{display:block;width:100%;height:auto;border-radius:38px} /* La photo du héros : l'app dans une vraie main, dès la première vue. */ .photo-hero{width:min(560px,100%);height:auto;border-radius:24px;position:relative;z-index:2; box-shadow:0 1px 2px -1px rgba(15,20,38,.1),0 44px 88px -36px rgba(58,40,132,.42)} @media(max-width:700px){.photo-hero{border-radius:16px}} .capture{padding:76px 0} .cap-source{font-size:13px;line-height:1.6;color:var(--texte);margin-top:16px;max-width:62ch} .cap-source b{color:var(--encre);font-weight:600} /* ── les mises en scène ────────────────────────────────────────────────── Des rendus de marque, pas des captures : ils reprennent les chiffres du cas type — 640 $, 62,98 $, 756 $ — mais l'app ne ressemble à ça nulle part. La légende le dit, parce qu'une image qui se fait passer pour une capture ment aussi bien qu'une phrase. */ /* LA MISE EN SCÈNE NE PREND PAS TOUTE LA COLONNE. En width:100% elle sortait à 1084 px de large sur un écran de 1280 : une tuile de « Budget » plus large que le paragraphe qui l'annonce, et une légende accrochée tout à gauche, à 400 px de l'image qu'elle légende. On la borne à 720 px et on la centre — la scène redevient une illustration au lieu d'une bannière. */ .art{margin:40px auto 0;max-width:720px;text-align:center} /* Deuxième resserrage, demandé après le premier : à 720 px sur un grand écran, la scène pesait encore plus lourd que le texte qu'elle illustre. 560 px la remet à sa place d'illustration ; le mobile ne voit pas cette règle, sa colonne est déjà plus étroite. */ @media(min-width:1020px){.art{max-width:560px}} .art img{display:block;width:100%;height:auto;border-radius:24px; box-shadow:0 1px 2px -1px rgba(15,20,38,.1),0 30px 60px -34px rgba(58,40,132,.34)} .art figcaption{margin-top:14px;font-size:12.5px;color:var(--gris)} /* Le rendu est déjà large : à côté du texte il se serre, seul il respire. */ .art.large{margin-top:46px} /* Une bande de neuf écrans se lit d'un coup d'œil sur un écran large. Réduite à 334 px, chaque téléphone fait 37 px : ce n'est plus une image, c'est une tache. Sur mobile elle garde donc sa taille et se pousse au doigt — le même geste que la piste de captures juste en dessous — avec le bord droit fondu pour dire qu'il en reste. */ .art .rail{border-radius:24px;overflow:hidden} .art .rail img{border-radius:24px} @media(max-width:760px){ .art .rail{overflow-x:auto;scrollbar-width:none;border-radius:16px; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)} .art .rail::-webkit-scrollbar{display:none} .art .rail img{width:1500px;max-width:none;border-radius:16px} } @media(max-width:700px){.art img{border-radius:16px}} /* ── la bande sombre ───────────────────────────────────────────────────── Une seule image de la série ne porte aucun mot : elle sert donc de fond, et la phrase se dit en HTML — c'est la seule façon qu'elle existe dans les trois langues. Le bouclier est au centre de son image : posé en fond plein cadre, il atterrissait DERRIÈRE le paragraphe. L'image occupe donc le haut de la bande, son bas s'efface en dégradé, et le texte remonte dessous. */ .bande-art{position:relative;background:var(--encre);color:#fff;overflow:hidden; padding:0 0 104px;text-align:center} .bande-art .fond{display:block;width:100%;height:auto;max-height:430px;object-fit:cover; object-position:center 34%; -webkit-mask-image:linear-gradient(#000 58%,transparent); mask-image:linear-gradient(#000 58%,transparent)} .bande-art .env{position:relative;margin-top:-104px} .bande-art h2{font-size:clamp(30px,4.6vw,46px);letter-spacing:-.028em;line-height:1.08;margin:0} .bande-art p{margin:18px auto 0;max-width:52ch;font-size:16.5px;line-height:1.6; color:rgba(255,255,255,.76)} @media(max-width:700px){ .bande-art{padding-bottom:74px} .bande-art .fond{max-height:190px} .bande-art .env{margin-top:-18px} } /* ── la piste de captures ──────────────────────────────────────────────── Huit écrans qu'on traverse : le doigt sur mobile, les flèches ailleurs, le clavier partout. Le défilement s'arrime pour qu'un écran soit toujours cadré, jamais coupé en deux. */ @media(max-width:900px){ .capture{padding:56px 0} } .tel .enc{position:absolute;top:19px;left:50%;transform:translateX(-50%);width:94px;height:26px;border-radius:99px;background:#0F1426;z-index:5} .tel .corps{padding:14px 16px 18px;display:flex;flex-direction:column;gap:11px} .tel .salut{font-size:13px;font-weight:600;color:var(--gris);padding:0 2px} .tel .titre-ecran{font-family:var(--archivo);font-size:20px;font-weight:600;letter-spacing:-.03em;padding:0 2px} .tel .tt{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);padding:2px 2px 0} .tel .onglets{display:flex;border-top:1px solid var(--trait);padding:9px 6px 16px;margin-top:3px} .tel .onglets span{flex:1;text-align:center;font-size:9px;font-weight:700;color:var(--perle);display:flex;flex-direction:column;align-items:center;gap:4px} .tel .onglets span.on{color:var(--violet)} .tel .onglets svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* carte héro de l'app */ .hc{border-radius:20px;padding:17px;color:#fff;background:var(--encre);position:relative;overflow:hidden} .hc.v{background:linear-gradient(135deg,var(--violet-vif),var(--violet) 55%,var(--violet-fonce))} .hc.g{background:linear-gradient(160deg,var(--nuit-2),var(--scene))} .hc::after{content:"";position:absolute;right:-46px;top:-64px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%);pointer-events:none} .hc .lb{font-size:11.5px;color:rgba(255,255,255,.66);font-weight:600;position:relative} .hc .gr{font-family:var(--archivo);font-size:31px;font-weight:600;letter-spacing:-.04em;margin:5px 0 3px;font-variant-numeric:tabular-nums;line-height:1;position:relative} .hc .gr small{font-size:17px;font-weight:500;color:rgba(255,255,255,.55)} .hc .ss{font-size:12.5px;color:rgba(255,255,255,.78);font-weight:500;position:relative} .hc .ss b{color:var(--vert-vif);font-weight:700} .hc.v .ss b{color:#fff} .hc .aire{margin-top:10px;position:relative} /* rangée KPI */ .kpi{display:flex;border:1px solid var(--trait);border-radius:14px;overflow:hidden} .kpi div{flex:1;padding:10px 6px;border-right:1px solid var(--trait);text-align:center;display:flex;flex-direction:column;justify-content:space-between;gap:3px;min-width:0} .kpi div:last-child{border-right:0} .kpi p{font-size:11.5px;color:var(--texte);font-weight:700;letter-spacing:.04em} .tel .kpi p{font-size:9px} /* dans la maquette, l'echelle du telephone est fidele */ .kpi b{display:block;font-family:var(--archivo);font-size:14.5px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .kpi.gd div{padding:14px 10px} .kpi.gd p{font-size:12px} .kpi.gd b{font-size:19px} /* rangées */ .rg{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--trait)} .rg:last-child{border-bottom:0} /* La pastille porte l'initiale du libellé qui la suit : redondante pour un lecteur d'écran (aria-hidden dans le balisage) et décorative au sens du critère de contraste — l'information est dans le à côté. */ .rg .pt{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;font-family:var(--archivo)} /* Une pastille porte soit une initiale, soit l'icône de catégorie de l'app, soit le logo de l'institution — les mêmes fichiers que l'app, pour que la maquette et l'écran réel montrent le même signe. */ .pt.ico svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pt.marque{background:#fff!important;border:1px solid var(--trait);padding:3px} .pt.marque img{width:100%;height:100%;object-fit:contain;display:block} .rg .co{flex:1;min-width:0} .rg .co b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rg .co p{font-size:11.5px;color:var(--texte);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rg .mt{font-family:var(--archivo);font-size:13.5px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;text-align:right;flex:none} .rg .mt small{display:block;font-size:11px;font-weight:500;color:var(--gris);letter-spacing:0;margin-top:1px} .rg .mt.v{color:var(--vert-fonce)} .rg .mt.r{color:var(--rouge-fonce)} .rg .mt.a{color:var(--ambre-fonce)} /* barres */ .bh{padding:7px 0} .bh .hd{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:600;margin-bottom:5px} .bh .hd span:last-child{font-family:var(--archivo);font-variant-numeric:tabular-nums;color:var(--texte);font-weight:600;flex:none} .bh .pi{height:6px;border-radius:99px;background:#E7E5EF;overflow:hidden} .bh .pi i{display:block;height:100%;border-radius:99px} /* barre de composition empilée */ .compo{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--gris-f);margin:4px 0 12px} .compo i{display:block;height:100%} .compo-lg{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;font-weight:600;color:var(--texte)} .compo-lg span{display:inline-flex;align-items:center;gap:6px} .compo-lg i{width:9px;height:9px;border-radius:3px;flex:none} .compo-lg em{font-style:normal;color:var(--texte);font-weight:500} /* pastilles */ .eq{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--lavande);color:var(--texte)} .eq.v{background:var(--vert-2);color:var(--vert-fonce)} .eq.a{background:var(--ambre-2);color:var(--ambre-fonce)} .eq.r{background:var(--rouge-2);color:var(--rouge-fonce)} .eq.p{background:var(--violet-2);color:var(--violet)} /* ═══════════ SECTIONS ═══════════ */ .plongee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center;padding:44px 0} .plongee.inv .txt{order:2} .plongee.inv .visu{order:1} .plongee>*{min-width:0} .plongee h3,.bloc h3,h3.titre{font-family:var(--archivo);font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.13;margin:14px 0 14px;text-wrap:balance} .plongee .txt p{font-size:16.5px;color:var(--texte);line-height:1.65;max-width:52ch} .plongee .txt p+p{margin-top:14px} .plongee .txt p b{color:var(--encre);font-weight:600} .points{margin-top:22px;display:flex;flex-direction:column;gap:11px;list-style:none} /* Le point était un conteneur de flex : chacun de ses enfants devenait un item posé sur une seule ligne — l'icône, le texte avant le lien, le lien, le texte après. Rien ne pouvait revenir à la ligne entre eux, et une phrase espagnole un peu longue débordait d'un pixel à 320 px. Le texte redevient donc un bloc ordinaire, l'icône se pose dessus : le rendu est le même et la phrase se plie où il faut. */ .points li{position:relative;padding-left:30px;font-size:15.5px;color:var(--encre-2);font-weight:500} .points svg{position:absolute;left:0;top:3px;width:19px;height:19px;stroke:var(--vert);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round} @media(max-width:880px){.plongee{grid-template-columns:1fr;gap:30px;padding:34px 0}.plongee.inv .txt{order:1}.plongee.inv .visu{order:2}} /* les enfants de grilles ne débordent jamais */ .grille-2>*,.grille-3>*,.grille-4>*,.formules>*,.interdits>*,.tuiles>*,.duo>*{min-width:0} /* carte-fenêtre d'interface */ .carte-ui{border:1px solid var(--trait);border-radius:24px;padding:26px;background:#fff;box-shadow:0 36px 80px -44px rgba(15,20,38,.3)} .carte-ui.plat{box-shadow:none} .carte-ui .entete{display:flex;justify-content:space-between;align-items:baseline;gap:8px 12px;margin-bottom:6px;flex-wrap:wrap} /* Le titre d'une carte d'interface DESSINÉE n'est pas un titre du document : c'est un libellé dans une illustration, au même titre que « 640,00 $ » juste en dessous. En

il entrait dans le plan de la page — un lecteur d'écran annonçait « Reste du mois, titre de niveau 4 » au milieu d'une maquette, et sautait de h1 à h4 pour y arriver. */ .carte-ui .entete .ti{font-family:var(--archivo);font-size:16px;font-weight:600;letter-spacing:-.02em} .carte-ui .grand{font-family:var(--archivo);font-size:38px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.05} .carte-ui .grand small{font-size:20px;color:var(--gris);font-weight:500} .carte-ui .sous{font-size:13.5px;color:var(--texte);margin-top:3px;margin-bottom:16px} .carte-ui .sous b{color:var(--encre);font-weight:600} .carte-ui .rg .co b{font-size:14px} .carte-ui .rg .co b,.carte-ui .rg .co p{white-space:normal;overflow:visible;text-overflow:clip} .carte-ui .tt{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--texte);margin:16px 0 4px} /* carte constat (IA) */ .ia{border:1px solid var(--trait);border-radius:16px;padding:16px 16px 14px;position:relative;overflow:hidden;background:#fff} .ia::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--violet),var(--violet-vif))} .ia .hd{display:flex;align-items:center;gap:7px;margin-bottom:8px} .ia .hd span{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--violet)} .ia .hd svg{width:13px;height:13px;stroke:var(--violet);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .ia>p{font-size:14.5px;line-height:1.5;color:var(--encre-2);font-weight:500} .ia .pi{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:11px;border-top:1px solid var(--trait);flex-wrap:wrap} .cf{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--texte)} .cf i{display:flex;gap:2px} .cf i b{width:12px;height:4px;border-radius:99px;background:var(--trait)} .cf i b.f{background:var(--violet)} /* tableaux */ .tb{width:100%;border-collapse:collapse;font-size:13.5px} .tb th,.tb td{padding:10px 8px;border-bottom:1px solid var(--trait);text-align:right;white-space:nowrap} .tb th:first-child,.tb td:first-child{text-align:left;white-space:normal} .tb thead th{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texte)} .tb td{color:var(--texte);font-variant-numeric:tabular-nums} /* Charte : « Plex Mono sert uniquement quand plusieurs montants doivent s'aligner verticalement. » Une colonne de tableau est exactement ce cas — la police était chargée sur chaque page sans servir nulle part. */ .tb.montants td:not(:first-child){font-family:var(--mono);font-size:12.6px;font-weight:500;letter-spacing:-.01em} /* Un tableau de prose n'a rien à aligner : ni mono, ni fer à droite. */ .tb.mots th,.tb.mots td{text-align:left} .tb.mots td{white-space:normal} .tb td:first-child{font-weight:600;color:var(--encre)} .tb tr:last-child td{border-bottom:0} .tb .ok{color:var(--vert-fonce);font-weight:700} .tb .ko{color:var(--rouge-fonce);font-weight:700} .tb .am{color:var(--ambre-fonce);font-weight:700} .defile{overflow-x:auto} /* calendrier */ .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 4px} .cal span{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;font-family:var(--archivo);font-size:11.5px;font-weight:600;color:var(--texte);background:var(--gris-f)} .cal span.j{color:var(--texte);background:transparent} .cal span.e{background:var(--violet-2);color:var(--violet)} .cal span.s{background:var(--rouge-2);color:var(--rouge-fonce)} .cal span.v{background:var(--vert-2);color:var(--vert)} .cal span.au{background:var(--encre);color:#fff} .calg{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--texte);font-weight:600;margin:8px 0 4px} .calg i{width:8px;height:8px;border-radius:3px;display:inline-block;margin-right:5px} /* petites stats */ .gri{display:grid;grid-template-columns:1fr 1fr;gap:10px} .gri>div{border:1px solid var(--trait);border-radius:14px;padding:13px;min-width:0} .gri p{font-size:11.5px;color:var(--texte);font-weight:600} .gri b{display:block;font-family:var(--archivo);font-size:20px;font-weight:600;letter-spacing:-.035em;margin-top:5px;font-variant-numeric:tabular-nums} .gri span{display:block;font-size:11.5px;color:var(--texte);margin-top:3px} /* bandeau de nuance */ .bn{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--ambre-2)} .bn svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--ambre);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .bn p{font-size:13.5px;color:var(--encre-2);line-height:1.5;font-weight:500} .bn p b{font-weight:700} .bn.r{background:var(--rouge-2)}.bn.r svg{stroke:var(--rouge)} .bn.v{background:var(--vert-2)}.bn.v svg{stroke:var(--vert)} .bn.p{background:var(--violet-2)}.bn.p svg{stroke:var(--violet)} .bn.n{background:var(--gris-f)}.bn.n svg{stroke:var(--gris)} /* ═══════════ GRILLES DE CARTES ═══════════ */ .grille-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px} .grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px} .grille-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px} .fait{border:1px solid var(--trait);border-radius:18px;padding:24px} .fait .lb{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--texte);margin-bottom:8px} .fait b{display:block;font-family:var(--archivo);font-size:19px;font-weight:600;letter-spacing:-.025em;margin-bottom:5px;line-height:1.2} .fait p{font-size:13.5px;color:var(--texte);line-height:1.55} .fait.doux{background:var(--gris-f);border-color:transparent} @media(max-width:940px){.grille-4{grid-template-columns:1fr 1fr}} @media(max-width:880px){.grille-3{grid-template-columns:1fr 1fr}} @media(max-width:600px){.grille-3,.grille-2,.grille-4{grid-template-columns:1fr}} /* tuiles compactes (fait + valeur) */ .tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px} .tuiles>div{border:1px solid var(--trait);border-radius:16px;padding:17px 18px} .tuiles p{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texte)} .tuiles b{display:block;font-family:var(--archivo);font-size:24px;font-weight:600;letter-spacing:-.04em;margin-top:7px;font-variant-numeric:tabular-nums;line-height:1.1} .tuiles span{display:block;font-size:13px;color:var(--texte);margin-top:5px;line-height:1.45} @media(max-width:940px){.tuiles{grid-template-columns:1fr 1fr}} @media(max-width:520px){.tuiles{grid-template-columns:1fr}} /* duo « fait / ne fait pas » */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px} .duo>div{border:1px solid var(--trait);border-radius:20px;padding:24px 26px} .duo .tete-duo{display:flex;align-items:center;gap:10px;margin-bottom:16px} .duo .tete-duo b{font-family:var(--archivo);font-size:17px;font-weight:600;letter-spacing:-.02em} .duo .tete-duo i{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex:none} .duo .tete-duo i svg{width:14px;height:14px;fill:none;stroke-width:2.6;stroke-linecap:round} .duo .oui i{background:var(--vert-2)}.duo .oui i svg{stroke:var(--vert)} .duo .non i{background:var(--rouge-2)}.duo .non i svg{stroke:var(--rouge)} .duo ul{list-style:none;display:flex;flex-direction:column;gap:11px} .duo li{font-size:14.5px;color:var(--encre-2);font-weight:500;line-height:1.5;padding-left:16px;position:relative} .duo li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gris-2)} .duo .oui li::before{background:var(--vert)} .duo .non li::before{background:var(--rouge)} .duo li em{font-style:normal;color:var(--texte);display:block;font-size:13px;margin-top:2px} @media(max-width:760px){.duo{grid-template-columns:1fr}} /* étapes numérotées (vraies séquences seulement) */ .etapes{list-style:none;display:flex;flex-direction:column;gap:2px;margin-top:32px;counter-reset:et} .etapes li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--trait)} .etapes li:last-child{border-bottom:0} .etapes li::before{counter-increment:et;content:counter(et);width:34px;height:34px;border-radius:11px;background:var(--violet-2);color:var(--violet);font-family:var(--archivo);font-size:15px;font-weight:700;display:grid;place-items:center} .etapes b{display:block;font-family:var(--archivo);font-size:18px;font-weight:600;letter-spacing:-.025em;margin-bottom:5px} .etapes p{font-size:14.5px;color:var(--texte);line-height:1.55;max-width:62ch} .etapes .quand{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--texte);background:var(--lavande);padding:4px 10px;border-radius:99px} /* bande de statistiques pleine largeur */ .bande-stat{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--trait);border-radius:20px;overflow:hidden;margin-top:32px} .bande-stat div{padding:22px 20px;border-right:1px solid var(--trait);min-width:0} .bande-stat div:last-child{border-right:0} .bande-stat p{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--texte)} .bande-stat b{display:block;font-family:var(--archivo);font-size:27px;font-weight:600;letter-spacing:-.04em;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1.05} .bande-stat span{display:block;font-size:12.5px;color:var(--texte);margin-top:5px;line-height:1.45} @media(max-width:880px){.bande-stat{grid-template-columns:1fr 1fr}.bande-stat div:nth-child(2n){border-right:0}.bande-stat div:nth-child(-n+2){border-bottom:1px solid var(--trait)}} @media(max-width:480px){.bande-stat{grid-template-columns:1fr}.bande-stat div{border-right:0;border-bottom:1px solid var(--trait)}.bande-stat div:last-child{border-bottom:0}} /* bloc de section */ .bloc{max-width:760px} .bloc.centre{margin:0 auto;text-align:center} .bloc.centre .eyebrow{justify-content:center} .bloc.centre .lede{margin-left:auto;margin-right:auto} /* ═══════════ SECTION SOMBRE ═══════════ */ .sombre{background:radial-gradient(1100px 600px at 50% -8%,rgba(91,61,245,.26),transparent 60%),var(--scene);color:#fff} .sombre .eyebrow{color:var(--violet-nuit)} .sombre .eyebrow::before{background:var(--violet-nuit)} .sombre h2,.sombre h3{color:#fff} .sombre .lede{color:rgba(255,255,255,.72)} .sombre .lede b{color:#fff} .sombre p.txt-cour{color:rgba(255,255,255,.72)} .sombre p.txt-cour b{color:#fff} .interdits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px} .interdit{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:20px;padding:26px;transition:background .2s,border-color .2s} .interdit:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)} .interdit .non{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(225,69,74,.16);margin-bottom:16px} .interdit .non svg{width:16px;height:16px;stroke:#FF7A80;fill:none;stroke-width:2.4;stroke-linecap:round} .interdit .oui{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(46,211,140,.16);margin-bottom:16px} .interdit .oui svg{width:16px;height:16px;stroke:var(--vert-vif);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .interdit b{display:block;font-family:var(--archivo);font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:7px} .interdit p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.66)} .sombre .note{margin-top:40px;display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 20px;background:rgba(255,255,255,.03);max-width:780px} .sombre .note svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--violet-vif);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} .sombre .note p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.72)} .sombre .note b{color:#fff;font-weight:600} .sombre .tb th,.sombre .tb td{border-bottom-color:rgba(255,255,255,.12)} .sombre .tb thead th{color:rgba(255,255,255,.5)} .sombre .tb td{color:rgba(255,255,255,.74)} .sombre .tb td:first-child{color:#fff} @media(max-width:900px){.interdits{grid-template-columns:1fr 1fr}} @media(max-width:580px){.interdits{grid-template-columns:1fr}} /* ═══════════ TARIFS ═══════════ */ .fond-doux{background:var(--lavande);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)} /* une carte posée sur la lavande prend la lavande claire */ .fond-doux .carte-ui,.fond-doux .fait,.fond-doux .direct,.fond-doux .encart{background:var(--gris-f)} /* Un .bo.cr est lavande, et .fond-doux est lavande : posé là, le bouton avait exactement la couleur de sa section — un appel à l'action qui ne ressemblait plus à un bouton. Il reprend un fond, comme les cartes. */ .fond-doux .bo.cr{background:var(--gris-f);border:1px solid var(--trait)} .fond-doux .bo.cr:hover{background:#fff} .formules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:stretch} .formule{background:#fff;border:1px solid var(--trait);border-radius:24px;padding:32px 28px;display:flex;flex-direction:column;position:relative} .formule.star{border:none;background:linear-gradient(135deg,var(--violet-vif),var(--violet) 55%,var(--violet-fonce));color:#fff;box-shadow:0 34px 70px -30px rgba(91,61,245,.55)} .formule .badge{position:absolute;top:-13px;left:28px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;background:var(--encre);color:#fff;padding:6px 13px;border-radius:99px} .formule h3{font-family:var(--archivo);font-size:20px;font-weight:600;letter-spacing:-.02em} .formule .qui{font-size:13.5px;color:var(--texte);margin-top:3px} .formule.star .qui{color:rgba(255,255,255,.72)} .formule .prix{font-family:var(--archivo);font-size:42px;font-weight:600;letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin:20px 0 2px;line-height:1} .formule .prix small{font-size:15px;font-weight:500;color:var(--gris);letter-spacing:0} .formule.star .prix small{color:rgba(255,255,255,.66)} .formule .cond{font-size:12.5px;color:var(--texte);margin-bottom:20px} .formule.star .cond{color:rgba(255,255,255,.66)} .formule ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:26px;flex:1} .formule li{display:flex;gap:9px;font-size:14.5px;font-weight:500;color:var(--encre-2)} .formule.star li{color:rgba(255,255,255,.92)} .formule li svg{width:17px;height:17px;flex:none;margin-top:2.5px;stroke:var(--vert);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .formule.star li svg{stroke:#fff} .formule .bo{width:100%} .formule.star .bo{background:#fff;color:var(--violet-fonce);box-shadow:none} @media(max-width:880px){.formules{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}} /* ═══════════ FAQ ═══════════ */ .faq-liste{margin-top:36px;border-top:1px solid var(--trait);max-width:820px} .faq-liste details{border-bottom:1px solid var(--trait)} .faq-liste summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 4px;font-family:var(--archivo);font-size:17.5px;font-weight:600;letter-spacing:-.02em;cursor:pointer;list-style:none} .faq-liste summary::-webkit-details-marker{display:none} .faq-liste summary .pl{flex:none;width:30px;height:30px;border-radius:10px;background:var(--gris-f);display:grid;place-items:center;transition:transform .2s,background .2s} .faq-liste summary .pl svg{width:15px;height:15px;stroke:var(--encre);fill:none;stroke-width:2.4;stroke-linecap:round} .faq-liste details[open] summary .pl{transform:rotate(45deg);background:var(--violet-2)} .faq-liste details[open] summary .pl svg{stroke:var(--violet)} .faq-liste .rep{padding:0 4px 24px;font-size:15.5px;color:var(--texte);line-height:1.65;max-width:64ch} .faq-liste .rep b{color:var(--encre);font-weight:600} .faq-liste .rep+.rep{margin-top:-10px;padding-top:0} /* ═══════════ SUITE DE LA VISITE ═══════════ */ .suite{border-top:1px solid var(--trait);padding:60px 0} .suite .tt-suite{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texte);margin-bottom:20px} .suite .cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .suite a.carte-suite{border:1px solid var(--trait);border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:6px;transition:box-shadow .2s,transform .2s,border-color .2s;min-width:0} .suite a.carte-suite:hover{box-shadow:0 24px 50px -30px rgba(15,20,38,.3);transform:translateY(-2px);border-color:var(--perle)} .suite .carte-suite .fam-nom{display:flex;align-items:center;gap:10px;font-family:var(--archivo);font-size:17px;font-weight:600;letter-spacing:-.02em} .suite .carte-suite .fam-nom i{width:9px;height:9px;border-radius:3px;flex:none} .suite .carte-suite p{font-size:13.5px;color:var(--texte);line-height:1.5} .suite .carte-suite .aller{margin-top:6px;font-size:13.5px;font-weight:700;color:var(--violet);display:inline-flex;align-items:center;gap:6px} @media(max-width:880px){.suite .cartes{grid-template-columns:1fr}} /* ── LES CINQ, EN DÉTAIL ────────────────────────────────────────────────── Une rangée par univers : l'icône, le nom, la phrase que l'APP emploie pour lui, et ses onglets réels. Les onglets sont la preuve que ce n'est pas un filtre — la barre du bas change vraiment. Ils sont décoratifs au sens strict (aria-hidden) : ce sont des étiquettes recopiées de l'app, pas des liens, et un lecteur d'écran n'a rien à y faire. */ .mondes{display:grid;gap:12px;margin-top:36px} .monde{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--trait); border-radius:20px;padding:20px 22px} .monde>img{width:56px;height:56px;border-radius:15px;flex:none} .mo-txt{min-width:0} .mo-txt b{display:block;font-family:var(--archivo);font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--encre)} .mo-txt p{margin-top:4px;font-size:14.5px;color:var(--texte);line-height:1.5} .mo-ong{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .mo-ong span{font-size:12px;font-weight:600;color:var(--texte);background:var(--lavande); border-radius:8px;padding:5px 10px;white-space:nowrap} /* Yoseri Duo : l'argument le plus fort de la page, donc une carte à lui. */ .duo-yos{background:#fff;border:1px solid var(--trait);border-radius:22px;padding:26px 26px 24px;margin-top:34px} .dy-tete{display:flex;gap:16px;align-items:center;margin-bottom:14px} .dy-tete img{width:54px;height:54px;border-radius:15px;flex:none} .dy-tete h3{font-family:var(--archivo);font-size:21px;font-weight:600;letter-spacing:-.025em;color:var(--encre);margin-top:2px} .duo-yos>p{font-size:15.5px;color:var(--texte);line-height:1.62} .duo-yos>p b{color:var(--encre);font-weight:600} .duo-yos .mini{margin-top:12px;font-size:13.5px;color:var(--gris)} /* ── LES QUATRE UNIVERS ─────────────────────────────────────────────────── Quatre icônes d'application posées côte à côte, chacune avec son nom et ce qu'elle couvre — Share a absorbé Group : un type d'espace n'était pas un produit. auto-fit et non auto-fill : auto-fill laisserait une colonne vide au large et la rangée cesserait d'être centrée — ici les cellules s'étirent pour occuper la ligne. */ .univers-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-top:38px} .uni{background:#fff;border:1px solid var(--trait);border-radius:20px;padding:20px 18px 18px; display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0} .uni img{width:62px;height:62px;border-radius:16px;display:block;margin-bottom:8px} .uni b{font-family:var(--archivo);font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--encre)} .uni span{font-size:13px;color:var(--texte)} @media(max-width:700px){ .univers-grille{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px} .uni{padding:16px 12px 14px;border-radius:16px} .uni img{width:46px;height:46px;border-radius:12px;margin-bottom:6px} .uni b{font-size:15px} .uni span{font-size:12.5px} } /* Les boutons de partage : une rangée qui se replie, jamais une colonne de dalles pleine largeur au pouce. */ .partager{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px} .partager .bo{padding:13px 22px;font-size:15px} [data-part-dit]{min-height:20px;margin-top:12px;color:var(--vert);font-weight:600} /* ── GRILLE DE LIENS COMPACTE ───────────────────────────────────────────── Onze pages posées en boutons pleins (.bo.cr) donnaient onze dalles de largeurs toutes différentes, empilées en escalier : le bloc se lisait comme un tas, pas comme une liste. Le défaut n'était pas l'alignement, c'était le composant — un .bo est un APPEL À L'ACTION, 16 px, gras, 26 px de marge intérieure. Onze appels à l'action côte à côte n'en font aucun, et le vrai bouton du bloc (« Découvrir le produit ») se noyait au milieu des liens de navigation. Ces cellules-ci font toutes la même largeur et portent la pastille de leur pilier, comme le menu et comme les cartes « Continuer la visite ». auto-fill plutôt que des colonnes comptées : au pouce il en tient une par ligne — « Comptes et patrimoine » ne se casse pas en trois —, trois sur une tablette, quatre au large, sans une seule requête de média. */ .tt-liens{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--texte);margin:30px 0 14px} .grille-liens{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:10px} .grille-liens a{display:flex;align-items:center;gap:11px;min-width:0; border:1px solid var(--trait);border-radius:14px;padding:15px 17px;min-height:52px; font-family:var(--archivo);font-size:15px;font-weight:600;letter-spacing:-.02em; color:var(--encre);background:#fff} .grille-liens a i{width:9px;height:9px;border-radius:3px;flex:none} .grille-liens a span{min-width:0} .grille-liens a:hover{border-color:var(--perle);box-shadow:0 18px 38px -26px rgba(15,20,38,.3)} /* ═══════════ CTA FINAL ═══════════ */ .final{padding:40px 0 96px} .final .carte{position:relative;overflow:hidden;border-radius:30px;background:radial-gradient(900px 500px at 50% -20%,rgba(139,114,255,.35),transparent 62%),var(--scene);color:#fff;padding:72px 40px;text-align:center} .final h2{color:#fff;margin:0 auto 16px;max-width:20ch} .final p{color:rgba(255,255,255,.72);font-size:17.5px;max-width:46ch;margin:0 auto 32px} .final .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .final .mini{margin-top:24px;font-size:13px;color:rgba(255,255,255,.5)} .bo.inverse{background:#fff;color:var(--violet-fonce);box-shadow:none} .bo.inverse:hover{transform:translateY(-1.5px)} .bo.spectre{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)} .bo.spectre:hover{background:rgba(255,255,255,.16)} /* ═══════════ PIED ═══════════ */ footer{padding:60px 0 44px;border-top:1px solid var(--trait)} footer .haut{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;gap:30px;margin-bottom:42px} @media(max-width:1020px){footer .haut{grid-template-columns:1fr 1fr 1fr}footer .marque-col{grid-column:1/-1}} footer .marque-col p{font-size:14px;color:var(--texte);margin-top:12px;max-width:30ch;line-height:1.6} /* Les trois colonnes du pied sont les titres de premier rang de ce pied : en

elles faisaient sauter le plan de h2 à h5 sur chaque page. */ footer h2{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--texte);margin-bottom:14px} footer ul{list-style:none;display:flex;flex-direction:column;gap:10px} footer ul a{font-size:14.5px;font-weight:500;color:var(--texte);transition:color .15s} footer ul a:hover{color:var(--encre)} footer .bas{border-top:1px solid var(--trait);padding-top:24px;display:flex;flex-direction:column;gap:14px} footer .bas p{font-size:12.5px;color:var(--texte);line-height:1.65;max-width:88ch} footer .bas .ligne{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--texte)} @media(max-width:820px){footer .haut{grid-template-columns:1fr 1fr}} @media(max-width:520px){footer .haut{grid-template-columns:1fr}} /* ═══════════ LISTE D'ATTENTE ═══════════ */ .hero-attente{position:relative;overflow:hidden;background:radial-gradient(900px 560px at 78% -6%,rgba(139,114,255,.34),transparent 62%),radial-gradient(700px 500px at 6% 100%,rgba(46,211,140,.1),transparent 60%),var(--scene);color:#fff;padding:76px 0 84px} .hero-attente .env{position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:52px;align-items:center} .hero-attente .eyebrow{color:var(--violet-nuit)} .hero-attente .eyebrow::before{background:var(--violet-nuit)} .hero-attente h1{font-family:var(--archivo);font-weight:600;font-size:clamp(34px,4.3vw,52px);line-height:1.05;letter-spacing:-.04em;text-wrap:balance;margin:16px 0 20px;color:#fff} .hero-attente h1 em{font-style:normal;color:var(--vert-vif)} .hero-attente .lede{color:rgba(255,255,255,.74);margin-bottom:26px} .hero-attente .lede b{color:#fff} .hero-attente .preuves span{color:rgba(255,255,255,.6)} .hero-attente .preuves svg{stroke:var(--vert-vif)} @media(max-width:980px){.hero-attente .env{grid-template-columns:1fr;gap:36px}} /* — le formulaire — */ .carte-form{background:#fff;color:var(--encre);border-radius:24px;padding:28px;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)} .carte-form .tete-form{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px} .carte-form h2,.carte-form h3{font-family:var(--archivo);font-size:19px;font-weight:600;letter-spacing:-.025em;margin:0} .carte-form .sous-form{font-size:13.5px;color:var(--texte);margin-bottom:20px;line-height:1.5} .champs{display:flex;flex-direction:column;gap:14px} .champs-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .champ{display:flex;flex-direction:column;gap:6px;min-width:0} .champ label{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--texte)} /* Sous 16 px, Safari iOS zoome à chaque focus et recadre la page. Sur pointeur grossier on remonte à 16 px, ailleurs on garde l'échelle. */ @media(pointer:coarse){.champ input,.champ select{font-size:16px}} .champ input,.champ select{width:100%;font-family:var(--sans);font-size:15.5px;font-weight:500;color:var(--encre);background:var(--gris-f);border:1.5px solid transparent;border-radius:13px;padding:13px 14px;transition:border-color .15s,background .15s} .champ select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8299' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:15px;padding-right:38px} .champ input:focus,.champ select:focus{outline:none;background:#fff;border-color:var(--violet)} /* Le fond blanc et le trait violet suffisent à la souris : on sait déjà où on a cliqué. Au clavier, non — et ce outline:none faisait des deux champs de la liste d'attente les SEULS éléments du site sans anneau. C'est la page du 8 septembre : on rend l'anneau à qui tabule. */ .champ input:focus-visible,.champ select:focus-visible{outline:2.5px solid var(--violet);outline-offset:3px} .champ input::placeholder{color:var(--gris-2)} /* Une précision qui appartient au champ, pas une erreur : elle reste visible tout le temps et se lit plus petit que le libellé. */ .aide-champ{font-size:12.5px;line-height:1.5;color:var(--texte)} .aide-champ b{font-weight:700;color:var(--encre)} .champ.faux input,.champ.faux select{border-color:var(--rouge);background:var(--rouge-2)} .champ .err{font-size:12.5px;font-weight:600;color:var(--rouge-fonce);display:none} .champ.faux .err{display:block} .carte-form .bo{width:100%;margin-top:18px} .carte-form .mention{font-size:12px;color:var(--texte);line-height:1.55;margin-top:14px} .carte-form .mention b{color:var(--texte);font-weight:600} @media(max-width:420px){.champs-2{grid-template-columns:1fr}} /* — état de confirmation — */ .form-ok{display:none;text-align:center;padding:14px 4px 6px} .carte-form.envoye .champs,.carte-form.envoye .bo,.carte-form.envoye .mention,.carte-form.envoye .sous-form{display:none} .carte-form.envoye .form-ok{display:block} .form-ok .rond{width:54px;height:54px;border-radius:50%;background:var(--vert-2);display:grid;place-items:center;margin:0 auto 16px} .form-ok .rond svg{width:26px;height:26px;stroke:var(--vert);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .form-ok>b{display:block;font-family:var(--archivo);font-size:20px;font-weight:600;letter-spacing:-.025em;margin-bottom:8px} .form-ok p{font-size:14.5px;color:var(--texte);line-height:1.55;max-width:38ch;margin:0 auto} .form-ok p b{font-weight:700;color:var(--encre)} .form-ok .rappel{margin-top:18px;padding-top:16px;border-top:1px solid var(--trait);font-size:13px;color:var(--texte)} /* — les trois vagues — */ .vagues{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;position:relative} .vague{border:1px solid var(--trait);border-radius:20px;padding:26px;background:#fff;position:relative;min-width:0} .vague.ouverte{border-color:var(--violet);box-shadow:0 0 0 1.5px var(--violet),0 30px 60px -40px rgba(91,61,245,.5)} .vague .rang{display:flex;align-items:center;gap:9px;margin-bottom:14px} .vague .rang i{width:28px;height:28px;border-radius:9px;background:var(--gris-f);color:var(--gris);font-family:var(--archivo);font-size:13px;font-weight:700;display:grid;place-items:center;flex:none} .vague.ouverte .rang i{background:var(--violet);color:#fff} .vague .rang .eq{margin-left:auto} .vague .quand{font-family:var(--archivo);font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--violet)} .vague h3{font-family:var(--archivo);font-size:21px;font-weight:600;letter-spacing:-.03em;margin:4px 0 6px} .vague .places{font-family:var(--archivo);font-size:30px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:8px} .vague .places small{font-size:14px;font-weight:500;color:var(--gris);letter-spacing:0} .vague p{font-size:13.5px;color:var(--texte);line-height:1.55} .vague ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--trait)} .vague li{display:flex;gap:8px;font-size:13px;color:var(--texte);font-weight:500;line-height:1.45} .vague li svg{width:15px;height:15px;flex:none;margin-top:2px;stroke:var(--vert);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} @media(max-width:880px){.vagues{grid-template-columns:1fr}} /* — le rabais, chiffré — */ .rabais{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px;max-width:880px} .rabais>div{border:1px solid var(--trait);border-radius:20px;padding:24px 26px;min-width:0} .rabais .nom{font-family:var(--archivo);font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px} /* Plus de prix barré : 7,99 $ n'a jamais été facturé, le barrer en ferait un « prix habituel » qui n'a pas existé. On annonce le tarif de lancement. */ .rabais .prix-plein{font-family:var(--archivo);font-size:13.5px;font-weight:500;color:var(--gris);margin-top:6px} .rabais .prix-apres{font-family:var(--archivo);font-size:34px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;margin:6px 0 4px;color:var(--vert-fonce)} .rabais .prix-apres small{font-size:14px;font-weight:500;color:var(--gris);letter-spacing:0} .rabais p{font-size:13px;color:var(--texte);line-height:1.5;margin-top:8px} @media(max-width:600px){.rabais{grid-template-columns:1fr}} /* ═══════════ RÉVÉLATION AU DÉFILEMENT ═══════════ */ .rev{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)} .rev.vu{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}} @media(max-width:1020px){section{padding:68px 0}section.serre{padding:46px 0}} /* ═══════════ YOSERI NEWS ═══════════ */ .une{display:block;border:1px solid var(--trait);border-radius:24px;padding:34px 36px;background:var(--gris-f);transition:box-shadow .25s,transform .25s,border-color .25s} .une:hover{box-shadow:0 34px 70px -40px rgba(15,20,38,.32);transform:translateY(-2px);border-color:var(--perle)} .une h2{margin:12px 0 12px;font-size:clamp(26px,3.6vw,38px)} .une p{font-size:17px;color:var(--texte);line-height:1.6;max-width:64ch} .art-rub{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--texte)} .art-rub i{width:9px;height:9px;border-radius:3px;flex:none} .art-pied{display:block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--texte)} /* La zone d'un article : un article sur le CELIAPP ne dit rien à quelqu'un qui vit en Nouvelle-Aquitaine. La pastille l'annonce, le tri le fait. */ /* 10 px en capitales espacées, c'est une pastille qu'on devine plutôt qu'on ne la lit — et celle-ci porte une information : la zone à laquelle l'article s'applique. 11,5 px, comme les titres du pied. */ .art-zone{font-family:var(--archivo);font-size:11.5px;font-weight:700;letter-spacing:.09em;line-height:1;padding:4px 7px;border-radius:6px;background:var(--violet-2);color:var(--violet-fonce);text-transform:uppercase} /* « Les afficher quand même » : rien n'est censuré, seulement rangé. */ html.tout-voir .art-carte[data-zone].zone-off{display:flex!important} html.tout-voir .une[data-zone].zone-off{display:block!important} /* un bouton qui se lit comme un lien : c'est une action, pas une navigation */ /* Un bouton au fil du texte fait la hauteur d'une ligne — vingt pixels, sous le minimum tactile de vingt-quatre. Une marge verticale l'élargit pour le doigt sans rien déplacer à l'écran : un élément en ligne sans fond ne pousse pas ses voisins. */ .lien-nu{appearance:none;background:none;border:0;padding:5px 0;margin:-5px 0;font:inherit;font-weight:700;color:var(--violet-fonce);text-decoration:underline;text-underline-offset:2px;cursor:pointer} .lien-nu:hover{color:var(--violet)} .lien-nu:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:3px} .art-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px} .art-grille>*{min-width:0} .art-carte{border:1px solid var(--trait);border-radius:20px;padding:24px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s;background:#fff} .art-carte:hover{box-shadow:0 26px 54px -34px rgba(15,20,38,.3);transform:translateY(-2px);border-color:var(--perle)} .art-carte h3{font-family:var(--archivo);font-size:18px;font-weight:600;letter-spacing:-.025em;line-height:1.25;margin:11px 0 8px;text-wrap:balance} .art-carte p{font-size:14px;color:var(--texte);line-height:1.55;flex:1} @media(max-width:900px){.art-grille{grid-template-columns:1fr 1fr}} @media(max-width:600px){.art-grille{grid-template-columns:1fr}.une{padding:26px 24px}} /* ═══════════ PAGE D'ARTICLE ═══════════ */ .article{padding:44px 0 8px} .fil{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--texte);margin-bottom:22px;flex-wrap:wrap} /* le fil d'Ariane est un lien isole : il lui faut 24 px de haut au doigt */ .fil a{color:var(--texte);display:inline-flex;align-items:center;min-height:24px} .fil a:hover{color:var(--violet)} .fil span[aria-hidden]{color:var(--gris-2)} .article .env{max-width:1140px} .rub-art{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)} .rub-art i{width:9px;height:9px;border-radius:3px;flex:none} .article h1{font-family:var(--archivo);font-weight:600;font-size:clamp(31px,4.4vw,50px);line-height:1.06;letter-spacing:-.04em;margin:14px 0 20px;max-width:20ch;text-wrap:balance} .article .chapo{font-family:var(--sans);font-size:20px;line-height:1.55;font-weight:600;color:var(--encre-2);max-width:58ch} .article .signature{margin-top:22px;padding-top:18px;border-top:1px solid var(--trait);font-size:13.5px;font-weight:600;color:var(--texte);max-width:58ch} .corps-article{max-width:768px!important;margin-left:0;padding-top:30px;padding-bottom:20px} .corps-article p{font-size:17.5px;line-height:1.72;color:var(--texte);margin-bottom:20px} .corps-article p strong,.corps-article li strong{color:var(--encre);font-weight:700} .corps-article h2{font-family:var(--archivo);font-size:clamp(23px,2.9vw,29px);font-weight:600;letter-spacing:-.03em;line-height:1.2;color:var(--encre);margin:44px 0 16px;text-wrap:balance} .corps-article h3{font-family:var(--archivo);font-size:20px;font-weight:600;letter-spacing:-.025em;color:var(--encre);margin:32px 0 12px} .corps-article ul,.corps-article ol{margin:0 0 22px 0;padding-left:22px;display:flex;flex-direction:column;gap:10px} .corps-article li{font-size:17px;line-height:1.65;color:var(--texte)} .corps-article li::marker{color:var(--violet)} .corps-article a{color:var(--violet);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2.5px} .corps-article a:hover{color:var(--violet-fonce)} .corps-article .callout{border:1px solid var(--trait);border-left:3px solid var(--violet);border-radius:0 16px 16px 0;background:var(--gris-f);padding:20px 24px;margin:30px 0;font-size:16px;line-height:1.62;color:var(--encre-2)} .corps-article .callout strong{color:var(--encre)} .corps-article .callout p{font-size:16px;margin-bottom:12px} .corps-article .callout p:last-child{margin-bottom:0} .corps-article table{width:100%;border-collapse:collapse;font-size:15px;margin:28px 0} .corps-article th,.corps-article td{padding:11px 10px;border-bottom:1px solid var(--trait);text-align:right;font-variant-numeric:tabular-nums} .corps-article th:first-child,.corps-article td:first-child{text-align:left} .corps-article thead th{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--texte)} .corps-article td{color:var(--texte)} .corps-article td:first-child{font-weight:600;color:var(--encre)} .corps-article .mention-legale{margin-top:40px;padding-top:22px;border-top:1px solid var(--trait);font-size:13.5px;line-height:1.6;color:var(--texte)} @media(max-width:820px){.corps-article p,.corps-article li{font-size:16.5px}.article{padding-top:30px}} /* précision de devise sous un titre de section */ .note-devise{margin-top:10px;font-size:14px;line-height:1.55;color:var(--texte);max-width:62ch} /* cadre defilant pour un tableau plus large que l'ecran */ .defile{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:28px 0} .defile table{margin:0} /* ═══════════ ZONE (pays et province) ═══════════ Un bloc marqué data-zone reste caché tant que le script n'a pas tranché, pour éviter qu'on voie passer les règles d'un autre pays. Sans JavaScript, la classe n'est jamais posée et tout reste visible. Caché, oui — mais pas retiré du flux quand c'est une CARTE. En display:none la grille de Yoseri News se peignait sans ses cartes de zone, puis les reprenait quand le script tranchait : tout ce qui suivait sautait d'un coup, 0,19 de décalage cumulé sur la page. En visibility:hidden la place est tenue dès la première peinture, la carte s'allume sans rien bouger, et on ne voit toujours passer aucune règle d'un autre pays. Réservé aux cartes : un au milieu d'une phrase doit bien disparaître pour de bon, sinon la phrase garde un trou. */ html.zone-js:not(.zone-prete) [data-zone]{display:none} html.zone-js:not(.zone-prete) .art-carte[data-zone]{display:flex;visibility:hidden} html.zone-js:not(.zone-prete) .une[data-zone]{display:block;visibility:hidden} [data-zone].zone-off{display:none!important} .bande-zone{border-top:1px solid var(--trait);padding:20px 0;margin-top:4px} .bande-zone .env{display:flex;align-items:center;justify-content:space-between;gap:16px 26px;flex-wrap:wrap} .bande-zone p{font-size:13.5px;line-height:1.6;color:var(--texte);display:flex;align-items:baseline;gap:9px;max-width:68ch} .bande-zone b{color:var(--encre);font-weight:600} .bande-zone .ind{display:block;color:var(--texte);margin-top:2px} .bande-zone .pt-zone{width:7px;height:7px;border-radius:50%;background:var(--violet);flex:none;align-self:flex-start;margin-top:7px} .bande-zone .ch{display:flex;gap:9px;flex:none} .bande-zone select{appearance:none;-webkit-appearance:none;background-color:#fff;border:1px solid var(--trait);color:var(--encre);font:inherit;font-size:14px;font-weight:600;padding:9px 32px 9px 13px;border-radius:11px;min-height:40px;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1426' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:12px} .bande-zone select:hover{border-color:var(--violet)} .bande-zone select:focus-visible{outline:2px solid var(--violet);outline-offset:2px} @media(max-width:620px){.bande-zone .env{flex-direction:column;align-items:flex-start}.bande-zone .ch{width:100%}.bande-zone select{flex:1;min-width:0}} /* bloc « pas encore ouvert ici » */ .ailleurs{border:1px solid var(--trait);border-radius:18px;padding:24px 26px;background:var(--gris-f);display:flex;gap:16px;align-items:flex-start;margin:22px 0} .ailleurs svg{width:22px;height:22px;stroke:var(--violet);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px} /* Le bandeau « pas encore ouvert ici » est un avis de premier rang sur la page : en

il faisait sauter le plan de h1 à h4, juste après le titre, sur les onze pages produit et dans les trois langues. */ .ailleurs h2{font-family:var(--archivo);font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px} .ailleurs p{font-size:15px;line-height:1.6;color:var(--texte)} .ailleurs p+p{margin-top:8px} .ailleurs a{color:var(--violet);font-weight:600} /* ═══════════ COUCHE NEOBANQUE ═══════════ Moins de phrases, des chiffres qui portent, et les écrans réels de l'app. Ces composants remplacent la prose : ce qui tenait en un paragraphe tient ici en un nombre et quatre mots. */ /* déclaration : peu de mots, beaucoup de corps */ .claim{max-width:19ch;font-family:var(--archivo);font-weight:600;font-size:clamp(34px,4.6vw,58px);line-height:1.03;letter-spacing:-.042em;text-wrap:balance} .claim em{font-style:normal;color:var(--violet)} .claim.large{max-width:26ch} .sombre .claim em{color:var(--violet-vif)} .sous-claim{margin-top:18px;font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;color:var(--texte);max-width:52ch} .sombre .sous-claim{color:rgba(255,255,255,.66)} /* mesure : un nombre, un mot */ .mesures{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:20px;overflow:hidden} .mesures>div{background:#fff;padding:24px 22px} .sombre .mesures{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)} .sombre .mesures>div{background:var(--scene)} .mesures b{display:block;font-family:var(--archivo);font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1} .mesures p{margin-top:9px;font-size:13px;font-weight:600;color:var(--texte);line-height:1.45} .mesures em{font-style:normal;color:var(--vert)} .mesures i{font-style:normal;color:var(--rouge-fonce)} /* bénéfices : une ligne chacun, pas un paragraphe */ .benefs{display:grid;gap:2px;margin-top:30px} .benef{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--trait)} .benef:last-child{border-bottom:0} .benef b{font-family:var(--archivo);font-size:clamp(17px,1.7vw,20px);font-weight:600;letter-spacing:-.025em} .benef span{font-size:14.5px;color:var(--texte);display:block;margin-top:5px;line-height:1.5;max-width:56ch} .benef .val{font-family:var(--archivo);font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--violet);white-space:nowrap} .sombre .benef{border-color:rgba(255,255,255,.1)} .sombre .benef span{color:rgba(255,255,255,.6)} .sombre .benef .val{color:var(--violet-vif)} /* marchés en direct : l'écart, la confiance, le plafond */ /* la carte garde sa propre palette : posée dans une section sombre, elle hériterait sinon du blanc et son texte disparaîtrait sur son fond clair */ .direct{border:1px solid var(--trait);border-radius:20px;overflow:hidden;background:#fff;color:var(--encre)} .sombre .direct,.sombre .direct b,.sombre .direct .tete b,.sombre .direct .ligne b{color:var(--encre)} .sombre .direct .ligne p,.sombre .direct .pied{color:var(--texte)} .direct .tete{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid var(--trait);background:var(--gris-f)} .direct .tete b{font-family:var(--archivo);font-size:15px;font-weight:600;letter-spacing:-.02em} .direct .vif{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vert-fonce)} .direct .vif i{width:7px;height:7px;border-radius:50%;background:var(--vert);flex:none;animation:pulse 2.2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}} @media(prefers-reduced-motion:reduce){.direct .vif i{animation:none}} .direct .ligne{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--trait)} .direct .ligne:last-of-type{border-bottom:0} .direct .ligne b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em} .direct .ligne p{font-size:12.5px;color:var(--texte);margin-top:2px} .direct .ec{font-family:var(--archivo);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap} .direct .ec.p{color:var(--vert-fonce)} .direct .ec.n{color:var(--rouge-fonce)} .direct .pied{padding:13px 18px;background:var(--gris-f);border-top:1px solid var(--trait);font-size:12.5px;color:var(--texte);line-height:1.5} .direct .pied b{color:var(--encre)} /* pastille de confiance : le mot compte autant que le chiffre */ .conf{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:99px;white-space:nowrap} .conf i{width:5px;height:5px;border-radius:50%;flex:none;background:currentColor} .conf.haute{color:var(--vert-fonce);background:rgba(13,169,107,.1)} .conf.moy{color:var(--ambre-fonce);background:rgba(210,138,27,.12)} .conf.basse{color:var(--texte);background:var(--gris-f)} /* ruban d'onglets : la profondeur d'un écran, montrée au lieu d'être racontée */ .ruban{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .ruban::-webkit-scrollbar{display:none} .ruban span{flex:none;font-size:13px;font-weight:600;color:var(--texte);background:var(--gris-f);border:1px solid var(--trait);padding:7px 13px;border-radius:99px;white-space:nowrap} .ruban span.on{color:#fff;background:var(--encre);border-color:var(--encre)} .sombre .ruban span{color:rgba(255,255,255,.62);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)} .sombre .ruban span.on{color:var(--encre);background:#fff;border-color:#fff} /* refus : ce que le produit ne fera jamais, en trois mots */ .refus{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:26px} .refus div{border:1px solid var(--trait);border-radius:15px;padding:16px 18px} .refus b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px} .refus p{font-size:13px;color:var(--texte);line-height:1.5} .refus .non{color:var(--rouge-fonce);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:7px} .refus .oui{color:var(--vert-fonce)} .sombre .refus div{border-color:rgba(255,255,255,.12)} .sombre .refus p{color:rgba(255,255,255,.6)} /* section aérée : le rythme neobanque */ .aere{padding:96px 0} .aere.serree{padding:64px 0} @media(max-width:760px){.aere{padding:64px 0}.aere.serree{padding:44px 0}} /* bande de relance : au milieu d'une page longue, pas seulement à la fin */ .relance{background:linear-gradient(140deg,var(--violet-2),rgba(139,114,255,.09));border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)} .relance .env{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:44px;padding-bottom:44px;flex-wrap:wrap} .relance h3{font-family:var(--archivo);font-size:clamp(21px,2.4vw,29px);font-weight:600;letter-spacing:-.032em;line-height:1.15;max-width:22ch;text-wrap:balance} .relance p{margin-top:9px;font-size:14.5px;color:var(--texte);max-width:46ch;line-height:1.5} .relance .actions{display:flex;gap:11px;flex-wrap:wrap;flex:none} @media(max-width:720px){.relance .env{flex-direction:column;align-items:flex-start;gap:20px}} /* ═══════════ BARRE COLLANTE MOBILE ═══════════ Sur téléphone, l'appel à l'action du haut disparaît dès le premier défilement. Cette barre le rend de nouveau atteignable à tout moment, et s'efface quand le pied de page arrive — pour ne pas couvrir la mention légale ni le sélecteur de zone. */ .barre-bas{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:12px;align-items:center; padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-top:1px solid var(--trait);box-shadow:0 -10px 30px -22px rgba(15,20,38,.4); transform:translateY(110%);transition:transform .26s cubic-bezier(.32,.72,0,1)} .barre-bas.vu{transform:none} .barre-bas .txt{flex:1;min-width:0} .barre-bas .txt b{display:block;font-family:var(--archivo);font-size:14.5px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .barre-bas .txt span{display:block;font-size:12px;color:var(--texte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .barre-bas .bo{flex:none;padding:12px 18px;font-size:14.5px;border-radius:12px;min-height:44px} @media(max-width:760px){.barre-bas{display:flex}body{padding-bottom:0}} body.menu-ouvert .barre-bas{transform:translateY(110%)} /* relais en fin de section : un lien, pas un bouton */ .relais{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:15px;font-weight:700;color:var(--violet)} .relais svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s} .relais:hover svg{transform:translateX(3px)} .sombre .relais{color:var(--violet-nuit)} /* encart d'article : convertir un lecteur au milieu d'un texte, sans le couper */ .encart{border:1px solid var(--trait);border-left:3px solid var(--violet);border-radius:16px;padding:22px 24px;margin:34px 0;background:var(--gris-f)} .encart b{display:block;font-family:var(--archivo);font-size:18px;font-weight:600;letter-spacing:-.025em;margin-bottom:6px} .encart p{font-size:14.5px;color:var(--texte);line-height:1.55;margin-bottom:14px;max-width:60ch} .encart .bo{padding:11px 18px;font-size:14.5px;border-radius:11px;text-decoration:none} /* légende sous la maquette : situe les chiffres de démonstration */ /* dans la scene flex, la legende doit occuper sa propre ligne sous le telephone */ .scene-tel{flex-wrap:wrap} .legende-demo{flex-basis:100%;margin-top:18px;text-align:center;font-size:12.5px;color:var(--texte)} /* grille des familles : sept portes, une ligne chacune, aucun chiffre */ /* Sept cartes sur quatre colonnes laissent une rangée de trois. En grille elle se colle à gauche ; en flex avec une base fixe, elle se centre d'elle-même, quel que soit le nombre de cartes. */ .fam-grille{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px} .fam-grille>*{flex:1 1 250px;max-width:calc(25% - 10.5px);min-width:250px} @media(max-width:1100px){.fam-grille>*{max-width:calc(33.333% - 9.34px)}} @media(max-width:820px){.fam-grille>*{max-width:calc(50% - 7px)}} @media(max-width:560px){.fam-grille>*{max-width:100%}} .fam{position:relative;border:1px solid var(--trait);border-radius:18px;padding:22px 22px 20px;background:#fff;display:flex;flex-direction:column;gap:11px;transition:box-shadow .22s,transform .22s,border-color .22s} /* Le pilier auquel la page appartient, repris du menu Produit. */ .fam[data-pilier]::before{content:attr(data-pilier);position:absolute;top:16px;right:18px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);background:var(--gris-f);border-radius:999px;padding:4px 9px} .fam:hover{box-shadow:0 24px 48px -30px rgba(15,20,38,.3);transform:translateY(-2px);border-color:var(--perle)} .fam .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none} .fam .ic svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .fam b{font-family:var(--archivo);font-size:17px;font-weight:600;letter-spacing:-.02em} .fam p{font-size:13.5px;color:var(--texte);line-height:1.5;flex:1} .fam .aller{font-size:13.5px;font-weight:700;color:var(--violet);display:inline-flex;align-items:center;gap:6px} .fam .aller svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round} /* flèche de direction : la couleur ne porte jamais seule le sens (charte §01) */ /* L'appel de note suit la taille de son paragraphe ; dans les blocs les plus serrés cela tombait à 10,7 px. Un plancher, sans toucher au reste. */ .fl{margin-left:.28em;font-size:max(11px,.85em);font-weight:700} /* la liste n'est pas encore branchée : on le dit sur la carte */ /* Échec d'envoi : un message de formulaire, pas une erreur de champ. */ .err-envoi{margin-top:16px;font-size:13px;font-weight:600;line-height:1.5;color:var(--rouge-fonce);background:var(--rouge-2);border:1px solid rgba(225,69,74,.28);border-radius:11px;padding:11px 13px} .err-envoi[hidden]{display:none} /* Piège à robots : sorti du flux, invisible, hors du parcours clavier. display:none serait ignoré par une partie des remplisseurs automatiques. */ .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Le bouton pendant l'envoi : il reste lisible, il ne clignote pas. */ .carte-form .bo[aria-busy="true"]{opacity:.72;cursor:progress} .carte-form .bo:disabled{cursor:not-allowed} .form-ok:focus{outline:none} .form-ok:focus-visible{outline:2px solid var(--violet);outline-offset:6px;border-radius:14px} .non-branche{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ambre-fonce);background:var(--ambre-2);border:1px solid rgba(210,138,27,.3);border-radius:11px;padding:10px 12px} /* ══════════════════════════════════════════════════════════════════════ MOUVEMENT Une seule courbe, une seule durée de base, et tout se coupe sous prefers-reduced-motion. Le mouvement sert à situer un élément dans l'espace ou à confirmer un geste — jamais à décorer un chiffre. ══════════════════════════════════════════════════════════════════════ */ :root{ --sortie:cubic-bezier(.22,.61,.36,1); /* décélération franche */ --ressort:cubic-bezier(.34,1.4,.64,1); /* léger dépassement au clic */ --t:.45s; } /* ── 1. Révélation en cascade ────────────────────────────────────────── Les enfants d'un bloc révélé entrent l'un après l'autre. Le décalage est posé par le script, plafonné, pour qu'une longue grille ne fasse pas attendre. */ .rev>*{opacity:0;transform:translateY(10px); transition:opacity var(--t) var(--sortie),transform var(--t) var(--sortie); transition-delay:var(--pas,0ms)} .rev.vu>*{opacity:1;transform:none} /* Un bloc sans cascade déclarée ne doit pas masquer ses enfants. */ .rev:not([data-cascade])>*{opacity:1;transform:none;transition-delay:0ms} /* ── 2. Cartes : élévation et halo au survol ─────────────────────────── L'ombre porte plus bas que l'objet ne monte : c'est ce décalage qui fait lire le relief. */ .fam,.carte-suite,.formule,.vague,.fait,.une,.art-carte{ transition:transform .3s var(--sortie),box-shadow .3s var(--sortie),border-color .3s var(--sortie)} .fam:hover,.carte-suite:hover,.vague:hover,.une:hover,.art-carte:hover{ transform:translateY(-4px)} .fait{position:relative;overflow:hidden} .fait::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(91,61,245,.09),transparent 62%); opacity:0;transition:opacity .35s var(--sortie)} .fait:hover::after{opacity:1} /* ── 3. Boutons : reflet au survol, appui au clic ────────────────────── Le reflet balaie une fois et s'arrête ; il ne boucle pas. */ .bo{position:relative;overflow:hidden; transition:transform .18s var(--ressort),box-shadow .24s var(--sortie),background .16s linear} .bo::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg)} .bo:hover::after{animation:reflet .72s var(--sortie) forwards} .bo.pl:hover{box-shadow:0 16px 34px -12px rgba(91,61,245,.62)} .bo:active{transform:translateY(1px) scale(.988)} @keyframes reflet{to{left:130%}} /* ── 4. Halo de fond : la lumière lente des sections sombres ─────────── Deux nappes qui dérivent en opposition. Très lent, très diffus : on ne doit pas pouvoir suivre le mouvement des yeux. */ /* Le halo déborde de sa section par construction (inset négatif) : sans clipping il ajoutait jusqu'à 394 px de défilement horizontal à 1920 px. */ .sombre,.hero-attente{position:relative;isolation:isolate;overflow:hidden} .sombre::before,.hero-attente::before{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none; background: radial-gradient(38% 45% at 22% 28%,rgba(139,114,255,.30),transparent 62%), radial-gradient(34% 42% at 78% 72%,rgba(91,61,245,.24),transparent 62%); animation:derive 26s ease-in-out infinite alternate} @keyframes derive{ from{transform:translate3d(-3%,-2%,0) scale(1)} to{transform:translate3d(4%,3%,0) scale(1.1)}} /* ── 5. Liseré vivant sur la formule mise en avant ─────────────────────*/ .formule.star{position:relative} .formule.star::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1; background:linear-gradient(120deg,var(--violet-vif),var(--violet-pastel),var(--violet-vif)); background-size:220% 100%;animation:liserer 7s linear infinite;opacity:.55} @keyframes liserer{to{background-position:220% 0}} /* ── 6. Le point « En direct » respire déjà (pulse). On lui ajoute une onde, qui dit « ça vient d'arriver » sans clignoter. ────────────*/ .direct .vif i{position:relative} .direct .vif i::after{content:"";position:absolute;inset:0;border-radius:inherit; box-shadow:0 0 0 0 currentColor;animation:onde 2.6s ease-out infinite} @keyframes onde{to{box-shadow:0 0 0 9px transparent}} /* ── 7. Liens de navigation : le trait se tire depuis la gauche ────────*/ .nav nav>a,.nav nav>button{position:relative} .nav nav>a::after,.nav nav>button::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px; border-radius:2px;background:var(--violet);transform:scaleX(0);transform-origin:left; transition:transform .26s var(--sortie)} .nav nav>a:hover::after,.nav nav>button:hover::after,.nav nav>a.on::after{transform:scaleX(1)} /* ── 8. Chiffres et pastilles : entrée à l'échelle ─────────────────────*/ .rev.vu .gr,.rev.vu .places,.rev.vu .prix-apres{animation:monte .55s var(--sortie) both} @keyframes monte{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}} /* ── Tout se coupe si la personne l'a demandé ──────────────────────────*/ @media(prefers-reduced-motion:reduce){ .rev>*{opacity:1;transform:none;transition:none;transition-delay:0ms} .fam:hover,.carte-suite:hover,.vague:hover,.une:hover,.art-carte:hover,.bo:active{transform:none} .bo::after,.fait::after{display:none} .sombre::before,.hero-attente::before,.formule.star::before,.direct .vif i::after{animation:none} .rev.vu .gr,.rev.vu .places,.rev.vu .prix-apres{animation:none} .nav nav>a::after,.nav nav>button::after{transition:none} } /* ══════════════════════════════════════════════════════════════════════ LE LANGAGE DE LA NOUVELLE APP, TRANSPOSÉ Trois gestes seulement, ceux qui tiennent hors de l'app : · le relief sur les surfaces colorées — une ombre interne, aucun fond requis, elle se pose sur une couleur mise en style en ligne ; · l'ombre à trois temps, dont la portée longue est violette ; · la tranche irisée, un dégradé peint qui ne demande aucun flou. Le VERRE, lui, ne va qu'à un seul endroit : la carte du formulaire, seule surface claire du site posée sur un fond riche et animé. Sur du blanc plat il ne donnerait que du gris frotté. ══════════════════════════════════════════════════════════════════════ */ /* ── 1. Relief sur toutes les pastilles colorées ────────────────────── */ .rg .pt,.fam .ic,.duo .tete-duo i,.vague .rang i,.form-ok .rond, .compo i,.compo-lg i,.carte-ui .rg .pt,.eq{box-shadow:var(--relief-couleur)} /* ── 2. L'ombre à trois temps : arête, contact, portée violette ─────── */ .fam,.carte-suite,.formule,.vague,.fait,.une,.art-carte,.rabais>div{ box-shadow:var(--verre-luisant),0 1px 2px -1px rgba(15,20,38,.08),0 12px 26px -20px rgba(58,40,132,.34); border-color:var(--verre-trait)} .fam:hover,.carte-suite:hover,.vague:hover,.une:hover,.art-carte:hover{ box-shadow:var(--verre-luisant),0 2px 8px -4px rgba(15,20,38,.18),0 24px 48px -26px rgba(58,40,132,.42); border-color:var(--gris-2)} /* ── 3. L'appui : enfoncement court, détente deux fois plus lente ───── */ .bo:active,.fam:active,.carte-suite:active,.une:active,.art-carte:active,.grille-liens a:active{ transform:scale(.982);transition:transform .09s var(--appui)} .bo,.fam,.carte-suite,.une,.art-carte,.grille-liens a{transition:transform .22s var(--sortie),box-shadow .3s var(--sortie),border-color .3s var(--sortie)} .bo.pl:active{background:var(--violet-fonce)} /* ── 4. Le montant se pose : il arrive flou et se fait net ─────────── */ .rev.vu .gr,.rev.vu .places,.rev.vu .prix-apres{animation:montantSePose .52s var(--sortie) both} @keyframes montantSePose{ from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(2px)} to{opacity:1;transform:none;filter:none}} /* ── 5. LA CARTE DU FORMULAIRE — le seul vrai verre du site ────────── Elle est posée sur le halo animé du héros. Opaque, elle le bouchait ; translucide, le halo passe derrière elle — c'est exactement l'effet cherché. Pas de backdrop-filter : .hero-attente porte isolation:isolate et overflow:hidden, le flou n'y échantillonnerait pas le halo. */ .carte-form{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88)); border:1px solid var(--verre-trait); box-shadow:var(--verre-luisant),0 2px 8px -4px rgba(15,20,38,.18),0 32px 70px -30px rgba(58,40,132,.55)} /* La tranche : une bordure d'1,5 px peinte au dégradé, découpée au masque. */ .carte-form::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none; background:var(--verre-iris); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude} .carte-form{position:relative} /* ── 6. La barre mobile devient une gélule posée, pas un bandeau ───── C'est la seule surface du site sous laquelle défile un vrai contenu structuré : le flou y est mérité. */ @media(max-width:760px){ .barre-bas{left:12px;right:12px;bottom:14px;width:auto;border:0;border-radius:32px; background:var(--verre-barre); -webkit-backdrop-filter:var(--verre-barre-flou);backdrop-filter:var(--verre-barre-flou); box-shadow:var(--verre-barre-ombre)} } /* ── 7. Le grain : 3,5 %, il casse la perfection du dégradé et tue le banding 8 bits, très visible sur un grand halo pâle. Zéro requête. ── */ .hero-attente::after,.sombre::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px} @media(prefers-reduced-motion:reduce){ .bo:active,.fam:active,.carte-suite:active,.une:active,.art-carte:active,.grille-liens a:active{transform:none} .rev.vu .gr,.rev.vu .places,.rev.vu .prix-apres{animation:none} } /* ══════════════════════════════════════════════════════════════════════ LE VERRE LIQUIDE — barre du haut et menu ouvert Ce sont les deux seules surfaces du site sous lesquelles défile vraiment du contenu structuré : c'est là, et seulement là, que le flou est mérité. Le voile est à 0,78 — mesuré : le pire fond qui puisse passer dessous est le héros nuit (#0B0F1C), et le texte encre y tient 11,2:1. Le violet de marque, lui, n'y ferait que 3,7:1 : les liens actifs passent au violet foncé, qui donne 5,6:1. ══════════════════════════════════════════════════════════════════════ */ .nav{ background:rgba(255,255,255,.78); -webkit-backdrop-filter:var(--verre-barre-flou);backdrop-filter:var(--verre-barre-flou); border-bottom:0} /* Un trait plein d'un bord à l'autre redonne un bloc. Le filet s'éteint sur les côtés : c'est ce qui se lit comme une arête de verre. */ .nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none; opacity:0;transition:opacity .24s var(--sortie); background:linear-gradient(90deg,rgba(0,0,0,0),var(--verre-trait) 18%,var(--verre-trait) 82%,rgba(0,0,0,0))} .nav.pose::after{opacity:1} .nav.pose{box-shadow:0 1px 2px -1px rgba(15,20,38,.16),0 12px 34px -18px rgba(58,40,132,.34)} /* Seuls les liens actifs virent au violet foncé. Le mot-symbole reste en encre : la charte le fixe, et le verre ne change pas cette règle. */ .nav nav>a.on{color:var(--violet-fonce)} .nav nav>a.on::after{background:var(--violet-fonce)} /* Le sommaire des pages produit reprend la rangée de pastilles de l'app : des capsules posées à même le fond de la page, sans plaque autour d'elles. Il portait un voile de verre, un filet et une ombre — trois marques qui en faisaient une seconde barre sous la première. Elles partent toutes. Ce qui reste est un fond couleur page. La rangée est collante, et sous une rangée collante il faut bien que quelque chose arrête le texte qui défile : le fond y sert à ça, pas à dessiner un bandeau. Il ne porte donc ni bord ni ombre, et sur les sections lavande son bas se dissout sur quatorze pixels — sans quoi la seule ligne restante, la limite du blanc, redeviendrait le trait qu'on vient d'enlever. */ .sommaire{background:var(--fond)} .sommaire::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none; background:linear-gradient(var(--fond),rgba(255,255,255,0))} /* La capsule au repos, puis au survol : les deux gris de l'app. */ .sommaire a{background:var(--gris-f);transition:background .15s,color .15s} .sommaire a:hover{background:var(--trait);color:var(--encre)} /* La capsule active : l'encre pleine de l'app. Elle bascule d'un coup — fondre le fond ET la couleur donnerait, à mi-course, du blanc sur du blanc. Le survol, lui, garde son fondu : il ne touche pas au texte. */ .sommaire a.on{background:var(--encre);color:#fff;transition:none} /* Le panneau Produit : même verre, posé sous la barre. */ .pan-produit{ background:rgba(255,255,255,.86); -webkit-backdrop-filter:var(--verre-barre-flou);backdrop-filter:var(--verre-barre-flou); border-bottom:0; box-shadow:var(--verre-luisant),0 1px 2px -1px rgba(15,20,38,.16),0 26px 54px -30px rgba(58,40,132,.42)} /* Le menu mobile : une plaque de verre posée sur la page, pas un carton opaque. La page reste visible derrière — c'est ce qui dit « au-dessus » plutôt que « à la place de ». */ .menu-mobile{ background:rgba(255,255,255,.82); -webkit-backdrop-filter:var(--verre-barre-flou);backdrop-filter:var(--verre-barre-flou); border-left:1px solid var(--verre-trait); box-shadow:var(--verre-luisant),-2px 0 8px -4px rgba(15,20,38,.18),-24px 0 60px -26px rgba(58,40,132,.46)} .menu-mobile a.on{color:var(--violet-fonce)} .menu-mobile .fermer{background:rgba(255,255,255,.62);box-shadow:var(--verre-luisant)} /* Sans backdrop-filter (Firefox ancien), le verre deviendrait un voile translucide illisible : on repasse alors à l'opaque. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav{background:rgba(255,255,255,.97)} .pan-produit,.menu-mobile{background:#fff} } /* ══════════════════════════════════════════════════════════════════════ LA BARRE SUR MOBILE Sur bureau elle est pleine et équilibrée. Sur mobile il ne restait que le mot-symbole et un carré gris plat de 42 px dans une bande de 68 px : un aplat opaque posé sur du verre, c'est ce qui se lit comme « collé ». Le bouton devient du verre lui aussi, la bande se resserre, et le trait de l'icône s'affine — à cette taille, 2,2 px fait épais. ══════════════════════════════════════════════════════════════════════ */ @media(max-width:1060px){ .burger{ width:40px;height:40px;border-radius:14px; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(12px) saturate(1.8);backdrop-filter:blur(12px) saturate(1.8); box-shadow:var(--verre-luisant),0 1px 2px -1px rgba(15,20,38,.14),0 8px 20px -12px rgba(58,40,132,.34); transition:transform .22s var(--sortie),background .2s} /* La cible tactile reste à 44 px sans agrandir l'objet. */ .burger::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px; transform:translate(-50%,-50%)} .burger{position:relative} .burger:active{transform:scale(.94);background:rgba(255,255,255,.72)} .burger svg{width:17px;height:17px;stroke-width:1.9} } @media(max-width:760px){ /* 68 px pour deux objets, c'est une bande vide. */ :root{--h-nav:58px} .marque{font-size:19px} .nav .env{gap:16px} } /* ── Ce que la barre porte sur mobile ──────────────────────────────────── Le mot-symbole et un bouton de menu, dans 390 px, laissent 280 px de vide au milieu — c'est ce vide qui fait « pas fini », pas le verre. On y met l'élément le plus utile de la page : l'appel à l'action, en version compacte. La barre du bas n'apparaît qu'après 420 px de défilement : au premier écran, celle du haut était la seule, et elle ne proposait rien. */ @media(max-width:760px){ .nav .fin{gap:8px;margin-left:auto} .nav .fin .bo{display:inline-flex;font-size:13.5px;font-weight:700; padding:9px 15px;border-radius:99px;white-space:nowrap} .nav .fin .bo svg{display:none} } @media(max-width:400px){ .nav .env{gap:10px} .marque{font-size:18px} .nav .fin .bo{padding:9px 13px;font-size:13px} } /* ═══════════════════════════════════════════════════════════ Impression ═══════════════════════════════════════════════════════════ Deux pages de ce site se lisent aussi sur papier ou dans un PDF classé : les conditions et la confidentialité. Un lecteur qui archive un engagement veut le texte, pas la barre de navigation, pas le bouton « Rejoindre la liste », pas les six colonnes de liens du pied. Sans cette feuille, l'impression donnait une barre collante en haut de chaque feuille, une rangée de pastilles coupée au milieu d'un mot, de grands blancs là où les blocs .rev attendaient un défilement qui n'arrive jamais, et un pied de trois colonnes de liens morts sur papier. Ce qu'on garde : le texte, les encadrés, la clause de non- conseil et le copyright — c'est-à-dire ce qui engage. */ @media print { /* Le navigateur n'imprime pas les fonds par défaut : tout ce qui comptait sur un fond sombre pour être lisible doit revenir au noir sur blanc, sans quoi le texte blanc disparaît. */ :root{--fond:#fff;--lavande:#fff;--gris-f:#fff;--violet-2:#fff} html,body{background:#fff;color:#000;font-size:11.5pt} .sombre,.final,.scene,.hero-attente,.bande-art,section[class*="sombre"]{ background:#fff !important;color:#000 !important} .sombre *,.final *,.scene *,.hero-attente *,.bande-art *{color:#000 !important} /* La chrome : elle ne dit rien sur papier, et le collant se répéterait en tête de chaque feuille. */ .nav,.sommaire,.barre-bas,.menu-mobile,.voile,.bande-zone,.lang, /* Du pied on garde ce qui engage : la clause de non-conseil, le copyright et la date. On retire les trois colonnes de liens — sur papier ce sont des mots soulignés qui ne mènent nulle part. .ligne porte le copyright, PAS le sélecteur de zone : la couper enlevait « © 2026 Yoseri · Montréal (Québec) » d'un document que le lecteur archive justement pour sa date. */ footer .haut{display:none !important} footer{border-top:1px solid #999;margin-top:18pt;padding-top:10pt} /* Les blocs qui apparaissent au défilement n'apparaissent jamais à l'impression : ils laisseraient des pages blanches. */ .rev{opacity:1 !important;transform:none !important} *{animation:none !important;transition:none !important; box-shadow:none !important;backdrop-filter:none !important} /* On ne coupe pas un titre de son texte, ni une carte en deux. */ h1,h2,h3{break-after:avoid-page;page-break-after:avoid} li,figure,blockquote,.carte-ui,.bloc-note,.ailleurs,.faq details{ break-inside:avoid-page;page-break-inside:avoid} section{padding-top:10pt;padding-bottom:10pt} .env{max-width:none;padding:0} /* Sur papier un lien ne se clique pas : son adresse doit se lire. Les liens internes gardent le silence — leur cible est dans le même document, et « (conditions.html) » n'aide personne. */ main a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.82em;font-weight:400;color:#444;word-break:break-all} /* D'où vient la feuille qu'on tient. */ main::after{content:"yoseri.com";display:block;margin-top:16pt; padding-top:8pt;border-top:1px solid #ccc;font-size:9pt;color:#555} /* Une pastille de couleur porte une lettre blanche : sans le fond, la lettre disparaît et il reste un carré vide. On la retourne. */ .rg .pt{background:#fff !important;color:#000 !important;border:1px solid #999} img{max-width:100% !important;break-inside:avoid-page} @page{margin:16mm 14mm} }