/* ═══════════════════════════════════════════════════════════════ liquid-glass.css — Boutons "Liquid Glass" (façon iOS 26) pour tout le site. Chargé via sur chaque page, PLACÉ EN FIN DE pour passer après les styles inline de chaque page. Principe UX : - CTA principaux : restent VIBRANTS (couleur conservée) + gloss/reflet de verre (on ne les rend pas transparents, sinon ça tue les conversions). - Boutons secondaires / fantômes : vrai verre translucide. ═══════════════════════════════════════════════════════════════ */ /* ── Base commune : micro-interactions douces ── */ .cta, .cta-btn, .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-outline, .btn-kiwi, .btn-kiwi-sm, .nav-cta { position: relative; isolation: isolate; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease, background .2s ease !important; } .cta:hover, .cta-btn:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover, .btn-outline:hover, .btn-kiwi:hover, .btn-kiwi-sm:hover, .nav-cta:hover { transform: translateY(-1.5px); } .cta:active, .cta-btn:active, .btn:active, .btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-outline:active, .btn-kiwi:active, .btn-kiwi-sm:active, .nav-cta:active { transform: translateY(0) scale(.98); } /* ── CTA / boutons pleins : gloss lumineux (couleur conservée) ── */ .cta, .cta-btn, .btn-primary, .btn-kiwi, .btn-kiwi-sm, .nav-cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -8px 14px -8px rgba(0,0,0,.28), 0 10px 26px -10px rgba(0,0,0,.4) !important; } .cta:hover, .cta-btn:hover, .btn-primary:hover, .btn-kiwi:hover, .btn-kiwi-sm:hover, .nav-cta:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -8px 14px -8px rgba(0,0,0,.3), 0 16px 34px -12px rgba(137,233,0,.45) !important; } /* Reflet spéculaire (couche au-dessus, n'affecte pas le fond coloré) */ .cta::after, .cta-btn::after, .btn-primary::after, .btn-kiwi::after, .btn-kiwi-sm::after, .nav-cta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 42%); pointer-events: none; z-index: 1; } /* ── Boutons fantômes / secondaires / outline : vrai verre translucide ── */ .btn-ghost, .btn-secondary, .btn-outline { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.16) !important; -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -6px 12px -8px rgba(0,0,0,.3), 0 8px 22px -10px rgba(0,0,0,.4) !important; } .btn-ghost:hover, .btn-secondary:hover, .btn-outline:hover { background: rgba(137,233,0,.10) !important; border-color: rgba(137,233,0,.4) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px -12px rgba(137,233,0,.35) !important; } /* Thème clair : verre plus lumineux pour les boutons fantômes */ body.light-mode .btn-ghost, body.light-mode .btn-secondary, body.light-mode .btn-outline, .light-mode .btn-ghost, .light-mode .btn-secondary, .light-mode .btn-outline { background: rgba(255,255,255,.55) !important; border-color: rgba(0,0,0,.06) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px -12px rgba(0,0,0,.22) !important; } /* On ne "verre" pas les actions destructrices : elles doivent rester nettes */ .btn-danger { -webkit-backdrop-filter: none; backdrop-filter: none; } .btn-danger::after { display: none; } /* ═══════════════════════════════════════════════════════════════ POLISH GLOBAL (tout le site) — chargé après les styles inline, donc ces règles s'appliquent partout sans casser les mises en page. Objectif : montée en gamme "premium" cohérente sur chaque page. ═══════════════════════════════════════════════════════════════ */ /* Rendu de texte plus net + défilement fluide ancré sous la nav */ html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Sélection de texte aux couleurs de la marque */ ::selection { background: rgba(137, 233, 0, .26); color: #fff; } ::-moz-selection { background: rgba(137, 233, 0, .26); color: #fff; } /* Scrollbar premium, fine et discrète (cohérente sur toutes les pages) */ * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(137, 233, 0, .5); background-clip: padding-box; } /* Focus clavier accessible et élégant. NB : on exclut les champs texte (input/textarea/select) — ils ont déjà leur propre style de focus, un contour en plus créerait un "double anneau" moche. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid rgba(137, 233, 0, .75) !important; outline-offset: 2px !important; border-radius: 8px; } /* Liens : lisibilité de soulignement */ a { text-underline-offset: 3px; } /* Images : pas d'étirement, coins nets */ img { max-width: 100%; } /* Respect de l'accessibilité : on coupe les animations si l'utilisateur le demande */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Thème clair : scrollbar et sélection adaptées */ body.light-mode ::-webkit-scrollbar-thumb, .light-mode ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); background-clip: padding-box; } body.light-mode ::selection, .light-mode ::selection { background: rgba(137, 233, 0, .3); color: #0a0a0b; } /* ═══════════════════════════════════════════════════════════════ ADOUCISSEMENT DES BOUTONS "VERRE" SECONDAIRES (tout le site) Plusieurs pages appliquent un style "bombé" très chargé (gros reliefs internes, texte ombré, survol qui saute) à .ui-btn/.sp-btn/etc. On les aplatit en verre doux — chargé en dernier, donc prioritaire sur l'inline. (.btn-*, .agent-btn et .connect-btn ont déjà leur propre traitement.) ═══════════════════════════════════════════════════════════════ */ .ui-btn, .sp-btn, .lang-btn, .skip-btn, .done-btn, .soon-btn, .img-dl-btn, .copy-btn { text-shadow: none; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 16px -10px rgba(0, 0, 0, .45); } /* On calme le reflet agressif (overlay en mix-blend) de ces boutons */ .ui-btn::before, .sp-btn::before, .lang-btn::before, .skip-btn::before, .done-btn::before, .soon-btn::before, .img-dl-btn::before, .copy-btn::before { mix-blend-mode: normal; opacity: .3; } .ui-btn:hover, .sp-btn:hover, .lang-btn:hover, .skip-btn:hover, .done-btn:hover, .soon-btn:hover, .img-dl-btn:hover, .copy-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -12px rgba(0, 0, 0, .5); }