/*! * bloo.Cards — Page « Wallet & écosystème » (/www/wallet) : styles de page * --------------------------------------------------------------------------------------------- * @package bloo.Cards * @category Site vitrine / CSS de page * @version 2.7.0 (2026-09-23) — création * * S'appuie sur /assets/css/bloo-www-2026.css (jetons --bg, --surf, --ink…, thèmes jour / nuit par * , .wrap, .eyebrow, .btn, .cta-band), chargée par www/_partials/header.php. * Portée : tout est préfixé « wa- » ou limité à body.bloo-www-wallet (aucun effet sur les autres pages). * * Maquettes (téléphones, fenêtres du back-office) : palette fixe, identique dans les deux thèmes (comme une * capture d'écran) ; tailles en unités de conteneur (cqw) → la maquette entière suit la largeur du téléphone. * Accessibilité : contrastes ≥ 4,5:1 (texte courant) et ≥ 3:1 (grands titres) vérifiés dans les deux thèmes ; * focus visible ; animations sobres, coupées par prefers-reduced-motion. * Points de rupture du site : 1440 · 1280 · 1024 · 768 · 600 · 480 · 390 · 360. */ /* ============ JETONS DE PAGE ============ */ .bloo-www-wallet{ --wa-accent:#8fb4ff; /* texte d'accent sur fond sombre (≥ 8:1) */ --wa-g1:#3d78ff; --wa-g2:#22d3ee; /* dégradé du titre (grand texte, ≥ 4,9:1) */ --wa-band:rgba(255,255,255,.022); --wa-flowline:rgba(143,180,255,.5); --wa-dot:#22d3ee; --wa-soft:rgba(61,120,255,.16); --wa-focus:#8fb4ff; --wa-shadow-dev:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07); --wa-card-shadow:0 1px 2px rgba(0,0,0,.25),0 14px 34px rgba(0,0,0,.28); } :root[data-theme="light"] .bloo-www-wallet{ --wa-accent:#1e4fd0; /* ≥ 5,9:1 sur les fonds clairs de la page */ --wa-g1:#2f6bff; --wa-g2:#6d4dff; --wa-band:#edf2fa; --wa-flowline:rgba(30,79,208,.38); --wa-dot:#2f6bff; --wa-soft:rgba(47,107,255,.10); --wa-focus:#1e4fd0; --wa-shadow-dev:0 26px 60px rgba(18,28,56,.24),0 0 0 1px rgba(18,28,56,.07); --wa-card-shadow:0 1px 2px rgba(18,28,56,.05),0 12px 30px rgba(18,28,56,.08); } /* ============ BASES ============ */ .bloo-www-wallet .eyebrow{color:var(--wa-accent)} /* contraste AA aussi en thème clair */ .bloo-www-wallet main :focus-visible{outline:3px solid var(--wa-focus);outline-offset:3px;border-radius:8px} .wa-sprite{position:absolute;width:0;height:0;overflow:hidden} .wa-ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .wa-sec{position:relative;z-index:2;padding:76px 0;scroll-margin-top:76px} .wa-band{background:var(--wa-band);border-block:1px solid var(--line)} .wa-head{max-width:740px;margin:0 auto 42px;text-align:center} .wa-head h2{font-size:clamp(26px,3.3vw,40px);margin-top:14px} .wa-head p{margin-top:14px;color:var(--ink-2);font-size:17px} /* Fil d'Ariane */ .wa-crumb{position:relative;z-index:3;padding-top:16px;font-size:13.5px;color:var(--ink-3)} .wa-crumb a{color:var(--wa-accent);font-weight:600} .wa-crumb a:hover{text-decoration:underline;text-underline-offset:3px} /* ============ HÉROS ============ */ .wa-hero{position:relative;overflow:hidden;padding:30px 0 60px} .wa-hero__glow{position:absolute;inset:-12% -8% auto;height:720px;pointer-events:none; background:radial-gradient(38% 46% at 76% 34%,rgba(61,120,255,.26),transparent 70%), radial-gradient(30% 36% at 92% 72%,rgba(34,211,238,.14),transparent 70%), radial-gradient(38% 42% at 8% 6%,rgba(124,92,255,.14),transparent 70%)} .wa-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px;align-items:center} .wa-hero h1{font-size:clamp(32px,4.7vw,56px);margin-top:18px} .wa-hero h1 .g{background:linear-gradient(110deg,var(--wa-g1),var(--wa-g2));-webkit-background-clip:text;background-clip:text;color:transparent} .wa-lede{margin-top:18px;max-width:58ch;font-size:clamp(16px,1.55vw,18.5px);color:var(--ink-2)} .wa-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .wa-cta-row--c{justify-content:center} .wa-chips{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;font-weight:600;color:var(--ink-2)} .wa-chips li{display:inline-flex;align-items:center;gap:8px} .wa-chips i{color:var(--wa-accent)} .wa-hero__stage{position:relative;margin:0;display:flex;justify-content:center;padding:8px 0} .wa-float{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px; background:var(--surf);border:1px solid var(--line-2);box-shadow:var(--wa-card-shadow);font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap; animation:wa-bob 6s ease-in-out infinite} .wa-float .wa-ic{color:var(--wa-accent)} .wa-float--a{top:47%;left:0} .wa-float--b{top:25%;right:0;animation-delay:-3s} @keyframes wa-bob{50%{transform:translateY(-8px)}} /* Sommaire « Sur cette page » */ .wa-toc{position:relative;z-index:3;margin-top:-18px;padding-bottom:26px} .wa-toc ul{list-style:none;margin:0;padding:4px 2px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px} .wa-toc a{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surf-glass); font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:color .15s,border-color .15s} .wa-toc a:hover{color:var(--ink);border-color:var(--wa-accent)} /* ============ TÉLÉPHONES (maquettes) ============ */ .wa-phone{--wa-pw:280px;position:relative;flex:none;width:var(--wa-pw);aspect-ratio:9/17.4;padding:calc(var(--wa-pw)*.036); border-radius:14%/7.24%;background:linear-gradient(160deg,#2c3754,#0c1120 62%);box-shadow:var(--wa-shadow-dev)} .wa-phone--hero{--wa-pw:300px} .wa-screen{position:relative;height:100%;overflow:hidden;border-radius:11.2%/5.6%;container-type:inline-size; background:#eef2f8;color:#0f1830;font-family:var(--sans);line-height:1.3;text-align:left} .wa-screen--dark{background:#0b1020;color:#eef2fb} .wa-ui{height:100%;display:flex;flex-direction:column;gap:.72em;padding:0 5.5cqw;font-size:4.6cqw} .wa-ui--mid>.wa-status+*,.wa-ui--mid>:first-child:not(.wa-status){margin-top:auto} /* écrans sans onglets : contenu centré */ .wa-ui--mid>:last-child{margin-bottom:auto} .wa-ui b{font-weight:800} .wa-status{position:relative;flex:none;display:flex;justify-content:space-between;align-items:center;height:2.7em;padding:0 .4em} .wa-status::before{content:"";position:absolute;left:50%;top:.55em;width:27%;height:1.55em;border-radius:1em;background:#070a14;transform:translateX(-50%)} .wa-status i{display:block;width:2.4em;height:.55em;border-radius:1em;background:#0f1830;opacity:.75} .wa-status i+i{width:1.6em} .wa-screen--dark .wa-status i{background:#eef2fb} /* Accueil */ .wa-apphead{display:flex;justify-content:space-between;align-items:center;font-size:1.3em;letter-spacing:-.02em} .wa-av{display:grid;place-items:center;flex:none;width:3.2em;height:3.2em;border-radius:50%;font-size:.9em;font-weight:800;color:#fff; background:linear-gradient(135deg,#2556e8,#170c48)} .wa-av--xs{width:2.1em;height:2.1em;font-size:.62em} .wa-av--sm{width:2.7em;height:2.7em;font-size:.78em} .wa-av--alt{background:linear-gradient(135deg,#0f766e,#134e4a)} .wa-av--paper{background:#e2e8f0;color:#334155} .wa-idchip{display:flex;align-items:center;gap:.5em;padding:.5em .8em;border-radius:999px;background:#fff;border:1px solid #e2e8f3;font-size:.84em;color:#56627a} .wa-idchip>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wa-idchip b{color:#0f1830} .wa-idchip .wa-ic{margin-left:auto;color:#2556e8} .wa-live{flex:none;width:.6em;height:.6em;border-radius:50%;background:#16a34a;box-shadow:0 0 0 .25em rgba(22,163,74,.18)} .wa-bizcard{display:flex;flex-direction:column;align-items:flex-start;gap:.12em;padding:1em 1.1em 1.05em;border-radius:1em;color:#fff; background:radial-gradient(110% 90% at 100% 0%,rgba(61,120,255,.9),transparent 58%),linear-gradient(145deg,#170c48,#241b7a);box-shadow:0 .8em 1.6em rgba(23,12,72,.28)} .wa-bizcard .wa-av{margin-bottom:.45em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35)} .wa-phone--hero .wa-ui{gap:.85em} .wa-phone--hero .wa-bizcard{aspect-ratio:1.6/1} .wa-phone--hero .wa-bizcard .wa-av{margin-bottom:auto} .wa-bizcard b{font-size:1.18em} .wa-bizcard span{font-size:.88em;color:#dfe6ff} .wa-bizcard .wa-bizcard__url{margin-top:.45em;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72em;color:#c9d4ff} .wa-sharebtn{display:flex;align-items:center;justify-content:center;gap:.5em;padding:.9em;border-radius:.9em;background:#2556e8;color:#fff; font-weight:800;font-size:1.05em;box-shadow:0 .6em 1.4em rgba(37,86,232,.35)} .wa-minirow{display:grid;grid-template-columns:1fr 1fr;gap:.5em} .wa-minirow>span{display:flex;align-items:center;justify-content:center;gap:.4em;padding:.62em .4em;border-radius:.8em;background:#fff;border:1px solid #e2e8f3; font-size:.76em;font-weight:700;color:#0f1830;text-align:center} .wa-minirow--dark>span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#eef2fb} .wa-tabbar{flex:none;margin:auto -5.5cqw 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:.6em .15em 1.25em;background:#fff;border-top:1px solid #e2e8f3} .wa-tabbar>span{display:flex;flex-direction:column;align-items:center;gap:.28em;min-width:0;font-size:.56em;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:#5f6b84;text-align:center} .wa-tabbar .wa-ic{width:2.15em;height:2.15em} .wa-tabbar .is-on{color:#170c48} .wa-tabbar .is-on .wa-ic{color:#2556e8} /* Pastilles, boutons, squelettes (communs aux maquettes) */ .wa-pill{display:inline-flex;align-items:center;gap:.4em;padding:.35em .7em;border-radius:999px;background:#eef2f8;color:#56627a;font-size:.8em;font-weight:700} .wa-pill--ok{align-self:center;background:#dcfce7;color:#166534} .wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;padding:.7em 1em;border-radius:.7em;background:#2556e8;color:#fff;font-size:.9em;font-weight:800} .wa-btn--full{display:flex;width:100%} .wa-btn--ghost{background:#fff;color:#1e4fd0;border:1px solid #cdd8ea} .wa-skel{display:block;flex:1;height:.6em;border-radius:1em;background:#e2e8f3} .wa-skel--s{flex:none;width:100%} .wa-qr{display:block;width:100%;height:auto} .wa-note{font-size:.78em;line-height:1.4;color:#56627a} .wa-note--c{text-align:center} .wa-scrtitle{font-size:1.2em;margin-top:.2em} .wa-minititle{font-size:.85em} /* Partage (écran sombre) */ .wa-sharehead{display:flex;flex-direction:column;align-items:center;gap:.2em;text-align:center} .wa-sharehead>b{font-size:1.15em} .wa-sharehead>span{font-size:.84em;color:#b9c4dc} .wa-bigqr{margin:.3em 5%;padding:6%;border-radius:1.1em;background:#fff;box-shadow:0 0 0 .35em rgba(61,120,255,.35)} .wa-sharehint{text-align:center;font-weight:700;font-size:.9em} /* Identités : chaque identité = une mini-carte de visite */ .wa-ident{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1.9/1;padding:.95em 1.05em;border-radius:1em;color:#fff; background:radial-gradient(110% 90% at 100% 0%,rgba(61,120,255,.85),transparent 58%),linear-gradient(145deg,#170c48,#241b7a);box-shadow:0 .7em 1.4em rgba(23,12,72,.22)} .wa-ident--alt{background:radial-gradient(110% 90% at 100% 0%,rgba(45,212,191,.55),transparent 58%),linear-gradient(145deg,#0b2e2b,#115e59)} .wa-ident.is-on{box-shadow:0 0 0 .22em #2556e8,0 .7em 1.4em rgba(23,12,72,.28)} .wa-ident .wa-av{position:absolute;top:.9em;left:1.05em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4)} .wa-ident__txt{display:flex;flex-direction:column;min-width:0;font-size:.9em;color:#dfe6ff} .wa-ident__txt b{font-size:1.15em;color:#fff} .wa-radio{position:absolute;top:.9em;right:.95em;display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;border:2px solid rgba(255,255,255,.7);color:#fff} .wa-ident.is-on .wa-radio{background:#16a34a;border-color:#16a34a} .wa-radio .wa-ic{width:1em;height:1em;stroke-width:3} .wa-infobox{display:flex;align-items:flex-start;gap:.5em;padding:.7em .8em;border-radius:.8em;background:#e8efff;color:#1e3a8a;font-size:.76em;line-height:1.4} .wa-infobox .wa-ic{margin-top:.05em;color:#1e4fd0} /* Contacts */ .wa-search{display:flex;align-items:center;gap:.5em;padding:.6em .8em;border-radius:.8em;background:#fff;border:1px solid #e2e8f3;font-size:.84em;color:#56627a} .wa-filters{display:flex;flex-wrap:wrap;gap:.4em} .wa-filters span{padding:.35em .7em;border-radius:999px;background:#fff;border:1px solid #e2e8f3;font-size:.72em;font-weight:700;color:#56627a;white-space:nowrap} .wa-filters .is-on{background:#170c48;border-color:#170c48;color:#fff} .wa-contact{padding:.6em .7em;border-radius:.9em;background:#fff;border:1px solid #e2e8f3} .wa-contact__row{display:flex;align-items:center;gap:.6em} .wa-contact__txt{display:flex;flex-direction:column;min-width:0;font-size:.8em;line-height:1.3;color:#56627a} .wa-contact__txt b{font-size:1.1em;color:#0f1830} .wa-tag{margin-left:auto;flex:none;padding:.22em .55em;border-radius:.5em;background:#e8efff;color:#1e4fd0;font-size:.6em;font-weight:800;white-space:nowrap} .wa-tag--paper{background:#fef3c7;color:#92400e} .wa-contact--ghost{opacity:.55} .wa-contact--ghost+.wa-contact--ghost{opacity:.3} .wa-contact--ghost .wa-skel{flex:0 1 55%} .wa-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3em;margin-top:.6em;padding-top:.6em;border-top:1px solid #eef2f8} .wa-actions>span{display:flex;flex-direction:column;align-items:center;gap:.3em;min-width:0;font-size:.56em;font-weight:700;line-height:1.1;color:#1e4fd0;text-align:center} .wa-actions .wa-ic{width:2.3em;height:2.3em;padding:.5em;border-radius:50%;background:#e8efff} /* Scanner */ .wa-seg{display:grid;grid-template-columns:1fr 1fr;padding:.25em;border-radius:.8em;background:#fff;border:1px solid #e2e8f3} .wa-seg>span{display:flex;align-items:center;justify-content:center;gap:.35em;padding:.45em;border-radius:.6em;font-size:.76em;font-weight:800;color:#56627a} .wa-seg .is-on{background:#170c48;color:#fff} .wa-viewfinder{position:relative;overflow:hidden;padding:15% 12%;border-radius:1em;background:linear-gradient(160deg,#1f2a44,#0b1020)} .wa-viewfinder::after{content:"";position:absolute;inset:6%;border:.15em dashed rgba(255,255,255,.5);border-radius:.8em;pointer-events:none} .wa-paper{display:flex;flex-direction:column;gap:.28em;padding:.85em .95em;border-radius:.35em;background:#fbfaf7;color:#1f2937;transform:rotate(-3deg);box-shadow:0 .5em 1em rgba(0,0,0,.35)} .wa-paper b{font-family:Georgia,'Times New Roman',serif;font-size:1.05em} .wa-paper span{font-size:.74em;color:#4b5563} .wa-paper i{display:block;height:.35em;width:70%;border-radius:1em;background:#d6d3cd} .wa-paper i:nth-of-type(2){width:52%} .wa-paper i:nth-of-type(3){width:62%} .wa-scanline{position:absolute;left:9%;right:9%;top:12%;height:76%;pointer-events:none;animation:wa-scan 2.8s ease-in-out infinite alternate} .wa-scanline::before{content:"";position:absolute;left:0;right:0;top:0;height:.2em;border-radius:1em;background:linear-gradient(90deg,transparent,#22d3ee,transparent);box-shadow:0 0 .8em #22d3ee} @keyframes wa-scan{to{transform:translateY(100%)}} .wa-sheet{display:flex;flex-direction:column;gap:.55em;padding:.8em;border-radius:1em;background:#fff;border:1px solid #e2e8f3} .wa-sheet>b{font-size:.9em} .wa-fields{display:flex;flex-wrap:wrap;gap:.3em} .wa-fields span{display:inline-flex;align-items:center;gap:.3em;padding:.25em .5em;border-radius:.5em;background:#ecfdf3;color:#166534;font-size:.62em;font-weight:800} .wa-fields span::before{content:"";width:.7em;height:.38em;margin-top:-.2em;border:solid currentColor;border-width:0 0 .16em .16em;transform:rotate(-45deg)} /* Fidélité (écran client) */ .wa-loycard{display:flex;flex-direction:column;gap:.7em;padding:.9em;border-radius:1em;color:#fff;background:linear-gradient(145deg,#170c48,#2b1d8f)} .wa-loycard__top{display:flex;justify-content:space-between;align-items:center;gap:.5em} .wa-loycard__shop{display:flex;align-items:center;gap:.4em;font-size:.95em;font-weight:800} .wa-status-pill{flex:none;padding:.25em .6em;border-radius:999px;font-size:.66em;font-weight:800;letter-spacing:.04em} .wa-status-pill--gold{background:#fde68a;color:#7c4a03} .wa-status-pill--silver{background:#e2e8f0;color:#334155} .wa-status-pill--plat{background:#334155;color:#fff} .wa-loyqr{display:flex;align-items:center;gap:.8em;padding:.6em;border-radius:.8em;background:rgba(255,255,255,.1)} .wa-loyqr .wa-qr{width:34%;border-radius:.35em} .wa-loyqr>span{display:flex;flex-direction:column;gap:.2em;font-size:.8em} .wa-loyqr>span span{font-size:.9em;color:#dfe6ff} .wa-stamps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45em} .wa-stamps i{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;border:2px dashed #b8c4d8} .wa-stamps i.on{border:0;background:radial-gradient(circle at 35% 30%,#7c9bff,#2556e8)} .wa-stamps i.gift{border:2px solid #d97706;background:#fffbeb;color:#b45309} .wa-stamps .wa-ic{width:55%;height:55%} .wa-progress{display:flex;flex-direction:column;gap:.45em;padding:.7em .8em;border-radius:.9em;background:#fff;border:1px solid #e2e8f3} .wa-progress>span{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;font-size:.78em;color:#56627a} .wa-progress b{color:#0f1830} .wa-progress>i{display:block;height:.5em;border-radius:1em;background:#e2e8f3;overflow:hidden} .wa-progress>i>i{display:block;width:68%;height:100%;border-radius:1em;background:linear-gradient(90deg,#f59e0b,#2556e8)} .wa-reward{display:flex;align-items:center;gap:.7em;padding:.7em .8em;border-radius:.9em;background:#fff;border:1.5px dashed #d97706} .wa-reward .wa-ic{width:1.9em;height:1.9em;color:#b45309} .wa-reward>span{display:flex;flex-direction:column;font-size:.8em;color:#56627a} .wa-reward b{font-size:1.08em;color:#0f1830} /* Fidélité (mode commerçant, écran sombre) */ .wa-phone--sm{--wa-pw:150px} .wa-phone--sm .wa-ui{font-size:6.6cqw;gap:.6em;padding:0 7cqw} .wa-merchant__h{display:flex;align-items:center;gap:.4em;font-weight:800;font-size:.95em} .wa-scanned{align-self:flex-start;display:inline-flex;align-items:center;gap:.35em;padding:.35em .6em;border-radius:999px;background:rgba(34,197,94,.18);color:#86efac;font-size:.72em;font-weight:800} .wa-amount__l{font-size:.78em;color:#b9c4dc} .wa-amount{display:flex;align-items:center;justify-content:flex-end;gap:.3em;padding:.55em .8em;border-radius:.8em;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-size:1.25em} .wa-caret{display:block;width:2px;height:1.1em;background:#8fb4ff;animation:wa-blink 1.1s steps(1) infinite} @keyframes wa-blink{50%{opacity:0}} /* Installation : fenêtre du back-office et téléphone côte à côte (sans chevauchement du texte), écran « appareil photo » */ .wa-feat__art--pair{align-items:flex-end;gap:16px} .wa-feat__art--pair .wa-win{flex:1 1 auto;max-width:420px} .wa-phone--cam{--wa-pw:132px;margin-bottom:-14px} .wa-screen--cam{background:#0b1020;color:#fff} .wa-cam{display:grid;place-items:center} .wa-cam__frame{display:block;width:74%;padding:7%;border-radius:.7em;background:#fff;box-shadow:0 0 0 .2em rgba(143,180,255,.7)} .wa-toast{align-self:center;display:inline-flex;align-items:center;gap:.35em;padding:.45em .75em;border-radius:999px;background:#15803d;color:#fff;font-size:.74em;font-weight:800;white-space:nowrap} /* ============ FENÊTRES DU BACK-OFFICE (maquettes) ============ */ .wa-win{position:relative;width:100%;max-width:520px;overflow:hidden;border-radius:14px;background:#fff;color:#0f1830;text-align:left; box-shadow:var(--wa-shadow-dev);container-type:inline-size;font-family:var(--sans);line-height:1.3} .wa-win__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#e9eef7;border-bottom:1px solid #dbe3ef} .wa-win__bar i{width:9px;height:9px;border-radius:50%;background:#f87171} .wa-win__bar i:nth-child(2){background:#fbbf24} .wa-win__bar i:nth-child(3){background:#34d399} .wa-win__bar span{flex:0 1 55%;margin-left:10px;padding:3px 10px;border-radius:7px;background:#fff;font:600 11px/1.4 ui-monospace,Menlo,Consolas,monospace;color:#56627a} .wa-win__body{display:grid;grid-template-columns:11% minmax(0,1fr);font-size:clamp(9px,2.75cqw,13.5px)} .wa-win__side{display:flex;flex-direction:column;align-items:center;gap:1.1em;padding:1.4em 0;background:#170c48} .wa-win__side i{display:block;width:1.7em;height:1.7em;border-radius:.45em;background:rgba(255,255,255,.2)} .wa-win__side i.is-on{background:#fff} .wa-win__main{display:flex;flex-direction:column;gap:1em;padding:1.4em 1.5em 1.6em;background:#f6f8fc} .wa-win__h{font-size:1.25em;font-weight:800} .wa-pair{display:flex;align-items:center;gap:1.2em;padding:1.1em;border-radius:1em;background:#fff;border:1px solid #e2e8f3} .wa-pair .wa-qr{flex:none;width:30%} .wa-pair__txt{display:flex;flex-direction:column;align-items:flex-start;gap:.7em;min-width:0;font-size:.95em;font-weight:600} .wa-devices{display:flex;flex-direction:column;gap:.5em} .wa-devices__h{font-size:.76em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#56627a} .wa-device{display:flex;align-items:center;gap:.7em;padding:.6em .8em;border-radius:.7em;background:#fff;border:1px solid #e2e8f3} .wa-device .wa-ic{color:#2556e8} .wa-device__x{flex:none;font-size:.78em;font-weight:700;color:#b91c1c} .wa-win--bo .wa-win__main{padding-bottom:1.8em} .wa-bohead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8em} .wa-botabs{display:flex;flex-wrap:wrap;gap:.2em;border-bottom:1px solid #e2e8f3} .wa-botabs span{margin-bottom:-1px;padding:.5em .75em;border-bottom:2px solid transparent;font-size:.82em;font-weight:700;color:#56627a} .wa-botabs .is-on{color:#170c48;border-color:#2556e8} .wa-table{display:flex;flex-direction:column;gap:.45em} .wa-tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto 16%;align-items:center;gap:.8em;padding:.55em .7em;border-radius:.7em;background:#fff;border:1px solid #e2e8f3} /* ============ ÉCOSYSTÈME ============ */ .wa-pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px} .wa-pillar{position:relative;padding:28px 24px 26px;border-radius:var(--r-l);background:var(--surf);border:1px solid var(--line);box-shadow:var(--wa-card-shadow)} .wa-pillar--mid{border-color:var(--wa-flowline);background:linear-gradient(180deg,var(--wa-soft),transparent 55%),var(--surf)} .wa-pillar__ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:14px;border-radius:16px;background:var(--wa-soft);color:var(--wa-accent);font-size:22px} .wa-where{display:block;margin-bottom:4px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--wa-accent)} .wa-pillar h3{font-size:20px} .wa-pillar p{margin-top:8px;font-size:15px;color:var(--ink-2)} /* liaison entre deux piliers : trait + nœud (échanges dans les deux sens) */ .wa-pillar+.wa-pillar::before{content:"";position:absolute;top:50%;right:100%;width:48px;height:2px;background:var(--wa-flowline)} .wa-pillar+.wa-pillar::after{content:"";position:absolute;top:50%;right:calc(100% + 17px);width:14px;height:14px;margin-top:-6px;border-radius:50%; background:var(--bg);border:2px solid var(--wa-dot);box-shadow:0 0 0 4px var(--wa-soft)} /* Deux parcours animés */ .wa-flows{display:grid;gap:22px;margin-top:44px} .wa-flow{padding:22px 24px 24px;border-radius:var(--r-l);background:var(--surf-glass);border:1px solid var(--line)} .wa-flow__t{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:17px} .wa-flow__t i{color:var(--wa-accent)} .wa-flow__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 52px} .wa-step{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 16px 18px;border-radius:16px;background:var(--surf);border:1px solid var(--line)} .wa-step__w{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--wa-accent)} .wa-step strong{font-family:var(--display);font-size:16.5px;color:var(--ink)} .wa-step>span:last-child{font-size:14px;color:var(--ink-2)} /* flèche : trait + point lumineux qui circule (::before), pointe (::after) */ .wa-step+.wa-step::before{content:"";position:absolute;top:50%;right:100%;width:52px;height:10px;margin-top:-5px; background:radial-gradient(circle,var(--wa-dot) 0 3px,transparent 3.6px) 0 50%/10px 10px no-repeat, linear-gradient(var(--wa-flowline),var(--wa-flowline)) 0 50%/calc(100% - 8px) 2px no-repeat; animation:wa-flow-x 2.4s cubic-bezier(.45,0,.55,1) infinite} .wa-step:nth-child(3)::before{animation-delay:1.2s} .wa-step+.wa-step::after{content:"";position:absolute;top:50%;right:100%;margin-top:-5px;border-left:8px solid var(--wa-flowline);border-top:5px solid transparent;border-bottom:5px solid transparent} @keyframes wa-flow-x{to{background-position:100% 50%,0 50%}} @keyframes wa-flow-y{to{background-position:50% 100%,50% 0}} /* ============ SECTIONS « FONCTION » ============ */ .wa-feat__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center} .wa-feat--rev .wa-feat__copy{order:2} .wa-feat__copy h2{font-size:clamp(26px,3.1vw,38px);margin-top:14px} .wa-feat__copy>p{margin-top:14px;font-size:16.5px;color:var(--ink-2)} .wa-feat__art{position:relative;margin:0;display:flex;justify-content:center;align-items:center;padding:34px 20px;border-radius:32px; background:radial-gradient(60% 60% at 50% 45%,var(--wa-soft),transparent 75%)} .wa-num{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px} .wa-num li{display:flex;align-items:flex-start;gap:14px} .wa-num__n{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#2556e8;color:#fff;font-size:14px;font-weight:800} .wa-num p{padding-top:4px;font-size:16px;color:var(--ink-2)} .wa-num strong{color:var(--ink)} .wa-facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px} .wa-facts li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surf-glass);border:1px solid var(--line);font-size:14.5px;color:var(--ink-2)} .wa-facts i{margin-top:3px;color:var(--wa-accent)} .wa-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .wa-list li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--ink-2)} .wa-list i{margin-top:4px;color:var(--wa-accent)} .wa-try{display:flex;align-items:flex-start;gap:10px;margin-top:22px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line-2);font-size:14px;color:var(--ink-2)} .wa-try i{margin-top:3px;color:var(--wa-accent)} .wa-try a,.wa-small a,.wa-qa__a a{color:var(--wa-accent);font-weight:700;text-decoration:underline;text-underline-offset:2px} .wa-small{margin-top:16px;font-size:13.5px;color:var(--ink-3)} /* ============ FIDÉLITÉ ============ */ .wa-lo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center} .wa-lo__sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .wa-side{padding:20px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line);box-shadow:var(--wa-card-shadow)} .wa-side__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--wa-soft);color:var(--wa-accent);font-size:17px} .wa-side h3{margin-top:12px;font-size:18px} .wa-side p{margin-top:6px;font-size:14.5px;color:var(--ink-2)} .wa-rules{grid-column:1/-1;padding:20px 22px;border-radius:var(--r);background:var(--surf-glass);border:1px solid var(--line)} .wa-rules h3{font-size:17px} .wa-rules ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px} .wa-rules li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink-2)} .wa-rules li i{margin-top:4px;color:var(--wa-accent)} .wa-rules strong{color:var(--ink)} .wa-lo__art{position:relative;margin:0;display:flex;justify-content:center;padding:24px 84px 24px 0} .wa-phone--merchant{position:absolute;right:0;bottom:8%;z-index:2} /* ============ SCÉNARIO ============ */ .wa-day{position:relative;list-style:none;margin:0 auto;padding:0;max-width:860px;display:flex;flex-direction:column;gap:16px} .wa-day::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--wa-flowline)} .wa-day li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start} .wa-day__ic{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--surf);border:2px solid var(--wa-flowline);color:var(--wa-accent);font-size:18px} .wa-day li>div{padding:16px 20px 18px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line)} .wa-day__w{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--wa-accent)} .wa-day h3{margin-top:4px;font-size:18px;text-wrap:pretty} .wa-day p{margin-top:6px;font-size:15px;color:var(--ink-2)} /* ============ TARIF ============ */ .wa-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:920px;margin:0 auto} .wa-price{display:flex;flex-direction:column;padding:26px 26px 28px;border-radius:var(--r-l);background:var(--surf);border:1px solid var(--line);box-shadow:var(--wa-card-shadow)} .wa-price--feat{border-color:var(--wa-flowline);background:linear-gradient(180deg,var(--wa-soft),transparent 45%),var(--surf)} .wa-price__tag{align-self:flex-start;padding:5px 11px;border-radius:999px;background:var(--wa-soft);color:var(--wa-accent);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .wa-price h3{margin-top:14px;font-size:21px} .wa-price__big{margin-top:4px;font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink)} .wa-price__big--s{font-size:25px;line-height:1.25} .wa-price__big sup{font-size:.55em;line-height:0} .wa-price__d{margin-top:6px;font-size:14.5px;color:var(--ink-2)} .wa-price ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px} .wa-price li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink-2)} .wa-price li i{margin-top:4px;color:var(--wa-accent)} .wa-more{margin-top:24px;text-align:center;font-weight:700} .wa-more a{display:inline-flex;align-items:center;gap:8px;color:var(--wa-accent)} .wa-more a:hover{text-decoration:underline;text-underline-offset:3px} /* ============ FAQ ============ */ .wa-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px} .wa-qa{border-radius:14px;background:var(--surf);border:1px solid var(--line)} .wa-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-radius:14px;cursor:pointer;list-style:none} .wa-qa summary::-webkit-details-marker{display:none} .wa-qa summary h3{font-size:16.5px;line-height:1.35;letter-spacing:-.01em;text-wrap:pretty} .wa-qa summary::after{content:"";flex:none;width:13px;height:13px;color:var(--wa-accent);transition:transform .2s ease; background:linear-gradient(currentColor,currentColor) 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 50%/2px 100% no-repeat} .wa-qa[open] summary::after{transform:rotate(45deg)} .wa-qa__a{padding:0 20px 18px} .wa-qa__a p{font-size:15px;color:var(--ink-2)} /* ============ APPEL À L'ACTION ============ */ .wa-sec--cta{padding-top:40px} .wa-cta{background:radial-gradient(80% 120% at 50% 0%,var(--wa-soft),transparent 70%),var(--surf-2)} /* ============ APPARITIONS AU DÉFILEMENT (assets/js/www/www-wallet.js) ============ */ .bloo-www-wallet [data-wa-reveal].is-pending{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)} .bloo-www-wallet [data-wa-reveal].is-pending.is-in{opacity:1;transform:none} /* ============ POINTS DE RUPTURE ============ */ /* 1 · grand écran */ @media (min-width:1440px){ .wa-sec{padding:88px 0} .wa-phone--hero{--wa-pw:320px} } /* 2 · portable */ @media (max-width:1280px){ .wa-hero__grid{gap:40px} .wa-feat__grid{gap:48px} } /* 3 · tablette paysage */ @media (max-width:1024px){ .wa-phone--hero{--wa-pw:270px} .wa-phone{--wa-pw:260px} .wa-phone--sm{--wa-pw:140px} .wa-pillars{gap:40px} .wa-pillar+.wa-pillar::before{width:40px} .wa-pillar+.wa-pillar::after{right:calc(100% + 13px)} .wa-flow__steps{gap:0 44px} .wa-step+.wa-step::before{width:44px} .wa-lo{grid-template-columns:minmax(0,1fr)} .wa-lo__art{justify-content:center;padding-right:0} .wa-lo__art .wa-phone:first-child{margin-right:90px} } /* tablette : colonne d'illustration trop étroite pour la fenêtre et le téléphone réunis */ @media (min-width:769px) and (max-width:1024px){ .wa-phone--cam{display:none} } /* 4 · tablette portrait : une colonne, parcours verticaux */ @media (max-width:768px){ .wa-sec{padding:58px 0} .wa-head{margin-bottom:34px} .wa-hero{padding-bottom:44px} .wa-hero__grid,.wa-feat__grid{grid-template-columns:minmax(0,1fr);gap:34px} .wa-feat--rev .wa-feat__copy{order:0} .wa-pillars{grid-template-columns:minmax(0,1fr);gap:44px} .wa-pillar+.wa-pillar::before{top:auto;bottom:100%;right:auto;left:50%;width:2px;height:44px;margin-left:-1px} .wa-pillar+.wa-pillar::after{top:auto;right:auto;bottom:calc(100% + 15px);left:50%;margin:0 0 0 -7px} .wa-flow__steps{grid-template-columns:minmax(0,1fr);gap:44px 0} .wa-step+.wa-step::before{top:auto;bottom:100%;right:auto;left:50%;width:10px;height:44px;margin:0 0 0 -5px; background:radial-gradient(circle,var(--wa-dot) 0 3px,transparent 3.6px) 50% 0/10px 10px no-repeat, linear-gradient(var(--wa-flowline),var(--wa-flowline)) 50% 0/2px calc(100% - 8px) no-repeat; animation-name:wa-flow-y} .wa-step+.wa-step::after{top:auto;bottom:100%;right:auto;left:50%;margin:0 0 0 -5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--wa-flowline);border-bottom:0} .wa-prices{grid-template-columns:minmax(0,1fr)} } /* 5 · grand téléphone */ @media (max-width:600px){ .wa-toc{margin-top:-10px} .wa-toc ul{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch} .wa-cta-row .btn{flex:1 1 100%} .wa-lo__sides{grid-template-columns:minmax(0,1fr)} .wa-feat__art{padding:26px 6px} .wa-phone--cam{display:none} .wa-phone--sm{--wa-pw:124px} .wa-lo__art .wa-phone:first-child{margin-right:64px} .wa-flow{padding:18px 16px 20px} } /* 6 · téléphone */ @media (max-width:480px){ .wa-phone,.wa-phone--hero{--wa-pw:250px} .wa-phone--sm{--wa-pw:112px} .wa-float{display:none} /* le téléphone occupe la largeur : pas de badge par-dessus l'écran */ .wa-head p{font-size:16px} .wa-day li{grid-template-columns:40px minmax(0,1fr);gap:12px} .wa-day__ic{width:40px;height:40px;font-size:15px} .wa-day::before{left:19px} .wa-day li>div{padding:14px 16px 16px} .wa-price{padding:22px 20px 24px} .wa-price__big{font-size:34px} } /* 7 · téléphone standard */ @media (max-width:390px){ .wa-phone,.wa-phone--hero{--wa-pw:232px} .wa-phone--sm{--wa-pw:104px} .wa-lo__art .wa-phone:first-child{margin-right:52px} .wa-qa summary{padding:16px} .wa-qa__a{padding:0 16px 16px} } /* 8 · petit téléphone */ @media (max-width:360px){ .wa-phone,.wa-phone--hero{--wa-pw:214px} .wa-hero h1{font-size:29px} } /* ============ MOUVEMENT RÉDUIT ============ */ @media (prefers-reduced-motion:reduce){ .wa-float,.wa-scanline,.wa-caret,.wa-step+.wa-step::before{animation:none} .wa-step+.wa-step::before{background:linear-gradient(var(--wa-flowline),var(--wa-flowline)) 0 50%/calc(100% - 8px) 2px no-repeat} .wa-qa summary::after,.wa-toc a{transition:none} .bloo-www-wallet [data-wa-reveal].is-pending{opacity:1;transform:none;transition:none} } /* Impression : aucun bloc laissé invisible par les apparitions au défilement, pas d'animation */ @media print{ .bloo-www-wallet [data-wa-reveal].is-pending{opacity:1;transform:none} .wa-float,.wa-scanline,.wa-caret,.wa-step+.wa-step::before{animation:none} } @media (prefers-reduced-motion:reduce) and (max-width:768px){ .wa-step+.wa-step::before{background:linear-gradient(var(--wa-flowline),var(--wa-flowline)) 50% 0/2px calc(100% - 8px) no-repeat} }