:root { --header-h: 76px; --nav-h: 76px; --ink: #101828; --ink-soft: #667085; --ink-faint: #98a2b3; --paper: #ffffff; --bg: #f5f8fd; --blue: #155eef; --blue-dark: #0b3fc4; --blue-darker: #0a2f94; --blue-soft: #eaf1ff; --blue-soft-2: #d9e8ff; --blue-line: #cddffd; /* Pas de halo de focus : uniquement la bordure bleue, propre sur tous les thèmes (le halo ressortait toujours comme un contour disgracieux). */ --focus-ring: transparent; --line: #e5e8ef; --line-soft: #eef1f6; --amber: #d98e2b; --amber-dim: #fbeed9; --rose: #e14a63; --rose-dim: #fbe3e8; --slate: #667085; --slate-dim: #eceef2; --display: 'Sora', sans-serif; --body: 'Inter', sans-serif; --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.05); } /* ---------- Thème Night (mode sombre) ---------- On flippe simplement les variables de palette : tout le site utilise deja ces variables (--ink, --paper, --bg, --line...), donc surcharger ici suffit a passer l'interface en sombre sans toucher au reste du CSS. Applique via (voir script inline dans + applyTheme() dans main.html). */ html[data-theme="night"] { --ink: #e7eaf0; --ink-soft: #99a3b3; --ink-faint: #6b7484; --paper: #1a1d24; --bg: #12141a; --blue: #4a86ff; --blue-dark: #3a72e8; --blue-darker: #2e5fce; --blue-soft: #1e2b45; --blue-soft-2: #24365a; --blue-line: #2f4472; /* Pas de halo de focus sur les thèmes sombres : juste la bordure bleue (le halo translucide ressortait en gris terne autour de la bordure). */ --focus-ring: transparent; --line: #2b303b; --line-soft: #23272f; --amber: #e0a54a; --amber-dim: #3a2f1c; --rose: #f0637b; --rose-dim: #3a222a; --slate: #99a3b3; --slate-dim: #262a33; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); } /* Fond global de la page en Night : le body/html doit etre sombre aussi (au-dela de .page-scroll), sinon les bords hors-contenu restent blancs. */ html[data-theme="night"], html[data-theme="night"] body { background: var(--bg); } /* ---------- Thème Gris (gris sombre / charcoal) ---------- Variante sombre mais grise (charcoal), plus claire que Night (qui tire vers le noir). Texte clair, accent bleu clair. */ html[data-theme="gris"] { --ink: #e8eaee; --ink-soft: #a3a8b2; --ink-faint: #757b86; --paper: #3a3d43; --bg: #2f3237; --blue: #4a86ff; --blue-dark: #3a72e8; --blue-darker: #2e5fce; --blue-soft: #333b4c; --blue-soft-2: #3a4457; --blue-line: #45536e; --focus-ring: transparent; --line: #4a4e56; --line-soft: #40444b; --amber: #e0a54a; --amber-dim: #453a26; --rose: #f0637b; --rose-dim: #453035; --slate: #a3a8b2; --slate-dim: #3c4046; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.32); } html[data-theme="gris"], html[data-theme="gris"] body { background: var(--bg); } * { box-sizing: border-box; } button, input, select, textarea { font-family: var(--body); font-size: 15px; color: inherit; } button { cursor: pointer; } /* ---------- Optimisations de rendu globales ---------- CSS containment cible : chaque zone marquee ci-dessous se comporte comme une "ile" pour le navigateur — un changement a l'interieur (hover, focus, ouverture de popup) n'oblige plus le recalcul de layout/style de tout le reste de la page. Sur Chrome et Firefox, ca supprime la majorite des micro-lags ressentis a l'ouverture d'une popup ou au survol d'un bouton. IMPORTANT : on utilise "contain: layout style" et JAMAIS "paint" ici. "paint" decoupe le rendu au bord de l'element, ce qui masquerait les box-shadow (ombres portees) des cartes/popups/modales qui debordent volontairement de leur boite. layout + style suffisent a isoler les recalculs sans rien rogner visuellement. .modal-inner est volontairement EXCLU : c'est le conteneur qui recoit le translateY du rebond elastique (voir initModalElasticScroll), le contenir pourrait perturber le calcul de scroll. */ .access-card, .feature-card, .telegram-popup, .settings-modal-box, .mobile-menu-inner { contain: layout style; } /* NB : on n'utilise PAS content-visibility:auto ici. Ce serait un gain de premier paint, mais il modifie la hauteur rapportee des sections hors ecran, ce qui perturberait le calcul de la barre de scroll personnalisee (hauteur/position du curseur recalculees en JS depuis scrollHeight). La fluidite du scroll custom prime. */ /* ----- Lancement propre ----- Le temps que le CSS/police/état (connecté ou non) soit posé, on coupe toutes les transitions et on garde la page invisible : ça évite le flash de bordure/ombre "hover" sur les boutons et la barre de recherche au premier rendu. Une fois prêt, un fondu simple révèle la page. */ body.preload, body.preload * { transition: none !important; animation: none !important; } /* will-change: opacity : indique explicitement au navigateur que l'opacite du body est susceptible de bouger (transitions swapView utilisees pour toute navigation SPA, y compris register -> login apres creation de compte). Sur mobile en particulier, le compositeur promeut le body en layer GPU dedie et evite un repaint plein-ecran a chaque frame du fondu -> transition fluide identique sur telephone et desktop. Sans ce hint, Chrome/Safari mobiles decidaient au coup par coup s'il valait la peine de promouvoir la couche, avec parfois un premier fondu saccade avant que le compositeur "chauffe". */ body { will-change: opacity; } body.preload { opacity: 0; } body.app-ready { opacity: 1; /* Courbe "easeOut" plus douce et duree legerement plus courte que l'ancienne (.32s -> .28s) : le contenu apparait sans temps mort, mais toujours avec un decollage progressif. */ transition: opacity .28s cubic-bezier(.22, 1, .36, 1); } /* ----- Transition douce entre les pages ----- Quand on clique sur un lien interne (Connexion, Créer un compte, retour à l'accueil...), on fait disparaître la page en douceur avant de naviguer, plutôt qu'un changement de page brutal. Utilisée par swapView() pour TOUTES les navigations, y compris la redirection register -> login après création de compte. Le translateY ajoute un léger glissement vertical (la page descend en sortant, remonte en entrant) pour donner de la spatialité au switch — purement composité sur GPU (will-change: opacity déjà sur body). Le transform est sur .page-scroll et pas sur body, pour ne pas casser le containing block des éléments fixed (nav, modale TOS, menu mobile). */ body.nav-leaving { opacity: 0; /* Sortie legerement plus rapide que l'entree (.18s vs .28s), courbe "easeIn" douce : le contenu s'estompe rapidement au debut puis ralentit -> impression de "clean" plus vif, moins de temps mort entre le clic et l'apparition de la nouvelle page. */ transition: opacity .18s cubic-bezier(.4, 0, 1, 1); } /* ----- Transition douce interne (carte "Créer un compte") ----- Même mécanique et mêmes durées/easing que la transition de page ci-dessus (nav-leaving -> preload -> app-ready), mais appliquée à un conteneur précis à l'intérieur de la carte plutôt qu'à toute la page. Utilisée par swapInner() (voir JS) pour le passage du formulaire classique au flux "Continuer avec Telegram" et entre les deux étapes de ce flux (identifiant -> identifiant Telegram/code). Le translateY ajoute un léger glissement vertical cohérent avec la transition de page (même direction, même feeling). */ .inner-fade-preload, .inner-fade-preload * { transition: none !important; } .inner-fade-preload { opacity: 0; } .inner-fade-leaving { opacity: 0; transition: opacity .22s cubic-bezier(.22, .61, .36, 1); } .inner-fade-ready { opacity: 1; transition: opacity .32s cubic-bezier(.22, .61, .36, 1); } /* IMPORTANT : ne JAMAIS remettre de "transform" sur (même translateY(0)). Un transform sur un ancetre cree un nouveau bloc conteneur pour tous ses descendants en position:fixed (#tosModal, #customScrollbar, #settingsModal, .mobile-menu...) : ils seraient alors ancres a au lieu du vrai viewport. C'est ce qui causait la barre de scroll native qui reapparaissait au redimensionnement de la fenetre sous Firefox (la modale TOS en etant l'exemple le plus visible). Si un effet de glissement est souhaite au reveal, l'ajouter sur un wrapper interne dedie, jamais sur body/html. */ html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; /* html/body ne défilent plus jamais : seul .page-scroll (sous le header) est scrollable, donc sa propre barre de scroll ne peut physiquement pas remonter plus haut que le bas du header. */ overflow: hidden; scrollbar-width: none !important; -ms-overflow-style: none !important; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } a { color: var(--blue); } a:hover { color: var(--blue-dark); } svg { display: block; } /* ---------- Barre de scroll personnalisée ----------- Fine, discrète mais visible au repos (pas seulement au survol), et surtout toujours la même taille — elle ne grossit jamais au survol, seule sa teinte change légèrement. */ * { scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; } ::-webkit-scrollbar, html::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track, html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background-color: var(--ink-faint); border-radius: 999px; border: 1px solid var(--bg); background-clip: padding-box; min-height: 40px; } ::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background-color: var(--ink-soft); } ::-webkit-scrollbar-thumb:active, html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active { background-color: var(--blue); } ::-webkit-scrollbar-corner { background: transparent; } /* ---------- En-tête (bandeau promo + nav collante) ----------- Le bandeau promo reste fixe en haut de l'écran, en dehors de .page-scroll : la barre de scroll de ce dernier ne peut jamais remonter au-dessus de lui. La nav (liens/icônes), elle, vit dans .page-scroll mais reste collée juste sous ce bandeau grace a .top-nav { position: sticky } ci-dessous : seul le contenu de page (résultats, cartes...) défile réellement sous elle. */ .site-header { position: relative; z-index: 20; background: var(--bg); /* contain: layout paint : le bandeau promo et sa nav collee ne peuvent plus provoquer de repaint hors de leurs limites. Pendant le scroll smooth custom, Chrome/Firefox ne recalculent plus le layout au-dessus de la ligne de flottaison a chaque frame. */ contain: layout paint; } /* Conteneur de scroll dédié : seule cette zone défile. Sa hauteur est calée sur "tout l'écran moins le bandeau promo", donc sa barre de scroll commence pile sous le bandeau et ne peut pas remonter plus haut. */ .page-scroll { height: calc(100vh - var(--header-h)); overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; /* overflow-anchor: none : desactive le "scroll anchoring" du navigateur. Comme la position de scroll est pilotee a la main (smooth-scroll JS + barre custom), on ne veut pas que Chrome/Firefox tentent en plus de re-ancrer la position quand un contenu au-dessus change de taille (bascule de vue, volet de filtres...) : ca entrait en conflit avec notre pilotage et pouvait provoquer un micro-saut. */ overflow-anchor: none; /* La nav est maintenant en position: fixed (hors du flux) : le contenu scrollable commencerait sous le bandeau promo et passerait derriere la nav. Ce padding-top reserve exactement la hauteur de la nav pour que le premier element visible commence juste en-dessous d'elle. */ padding-top: var(--nav-h); scrollbar-width: none; -ms-overflow-style: none; } .page-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Wrapper du contenu scrollable de la page (accueil/login/register/ telegram, tous dans #pageScroll) : recoit en continu le translateY du scroll sub-pixel + du rebond elastique (voir stepSmoothScroll dans main.html). */ /* Layer compositor + rendu texte figes EN PERMANENCE (sans will-change, qui causait le tremblement precedent au hover). C'est le passage automatique de Chrome/Safari entre rendu "subpixel" (aucun transform actif) et "grayscale" (transform actif) qui repositionnait le texte de fractions de pixel a la fin du rebond -> le "recaler" signale. En figeant les deux en permanence, aucune bascule possible, aucun replacement de texte. Sans will-change, aucune promotion continue du layer, donc aucun tremblement au repos non plus. */ .page-scroll-inner { transform: translateZ(0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Barre de scroll personnalisée (remplace celle de .page-scroll) ---------- Le curseur a une hauteur FIXE, définie ici en dur : elle ne dépend jamais de la quantité de contenu ni du ratio contenu/écran. Seule sa position verticale bouge quand on défile — sa taille, elle, ne change jamais, que la page soit courte ou très longue. */ .custom-scrollbar { position: fixed; top: var(--header-h); right: 4px; width: 4px; height: calc(100vh - var(--header-h)); z-index: 30; } .custom-scrollbar.hidden { display: none; } .custom-scrollbar-thumb { position: absolute; left: 0; top: 0; width: 4px; height: 40px; /* valeur initiale ; la hauteur réelle (proportionnelle au contenu, avec ce minimum) est posée en JS via style.height */ border-radius: 999px; background-color: var(--ink-faint); opacity: .55; pointer-events: auto; cursor: pointer; transition: opacity .15s ease, background-color .15s ease; /* Le positionnement se fait via transform: translateY() (posé en JS) plutôt que via top : le navigateur peut animer translateY sur le compositor GPU sans déclencher de reflow, ce qui élimine les micro- saccades de scroll. will-change: transform garde le layer pré-alloué en permanence (pas de promotion just-in-time a chaque frame). */ will-change: transform; } .custom-scrollbar-thumb:hover { opacity: .85; background-color: var(--ink-soft); } /* Pendant le glissement : meme apparence que le survol (gris), pas de bleu. On garde transition:none pour que le curseur suive le geste sans latence. */ .custom-scrollbar-thumb.dragging { opacity: .85; background-color: var(--ink-soft); transition: none; } .top-nav { background: transparent; /* Fixed plutot que sticky : sticky provoquait du sub-pixel jitter pendant le smooth-scroll custom (le navigateur recalcule la position du sticky a chaque frame avec des arrondis differents → tremblement visible des boutons @pseudo / Parametres / Deconnecter, et micro- decalage quand le scroll s'arrete). En fixed, la nav est purement ancree au viewport — le navigateur ne la repositionne plus du tout pendant le scroll, zero tremblement. top: var(--header-h) la cale juste sous le bandeau promo. */ position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 15; /* .top-nav est transparent et couvre TOUTE la largeur de l'ecran (left:0;right:0), meme la ou il n'y a visuellement aucun bouton (logo absent, espace vide entre le burger et le bord...). Sans ceci, cette bande invisible interceptait quand meme les clics destines a ce qu'il y a en dessous (ex: la barre de recherche/bouton "Rechercher" qui se retrouve sous cette bande a certaines tailles de fenetre) -> zone inutilisable. On desactive les clics sur le nav lui-meme et on les rend actifs uniquement sur ses enfants directs (logo, liens, boutons, burger...) : seuls les elements visibles et cliquables interceptent, tout le reste laisse passer vers le contenu en dessous. */ pointer-events: none; } .top-nav > * { pointer-events: auto; } /* ---------- Bandeau promo (au-dessus du nav) ---------- */ .promo-banner { display: flex; align-items: center; justify-content: center; padding: 10px 40px; background: var(--blue-soft); border-bottom: 1px solid var(--blue-line); } .promo-banner-msg { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-soft); } .promo-msg-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue); } .promo-msg-icon svg { width: 16px; height: 16px; stroke: currentColor; } .promo-msg-text { white-space: nowrap; } .promo-msg-link { font-weight: 600; color: var(--blue); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .promo-msg-link:hover { color: var(--blue-dark); text-decoration: none; } /* ---------- Shared: top nav ---------- */ .top-nav { display: flex; align-items: center; /* Barre unique centree : tout (marque, liens, actions) vit dans .nav-pill. */ justify-content: center; gap: 14px; padding: 20px 40px; } /* ---------- Barre "pilule" de navigation ---------- Conteneur arrondi qui regroupe la marque + les liens principaux (Accueil / Recherche / Telegram), facon barre d'app. */ .nav-pill { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-sm); min-width: 0; } /* Pas de separateurs : c'est l'espace qui separe les liens du bloc d'actions (Se connecter / @pseudo + parametres), lequel vit DANS la pilule -> pas de marge auto qui le repousserait a droite. */ .nav-pill .nav-actions { margin-left: 28px; gap: 8px; } /* ----- Thème + langue dans la barre (visiteur non connecte) ----- */ /* Double classe (.icon-btn.xxx) VOLONTAIRE : la regle .icon-btn generique (width/height 34px, svg 17px) est declaree PLUS BAS dans ce fichier avec la meme specificite ; sans ce bump elle gagnait le cascade et forcait le bouton langue a rester carre -> drapeau, code et chevron se chevauchaient. */ .icon-btn.nav-theme-btn { width: 34px; height: 34px; } /* Une seule icone a la fois : soleil en thème clair, lune en thème sombre. */ .nav-theme-btn .icon-moon { display: none; } html[data-theme="night"] .nav-theme-btn .icon-sun, html[data-theme="gris"] .nav-theme-btn .icon-sun { display: none; } html[data-theme="night"] .nav-theme-btn .icon-moon, html[data-theme="gris"] .nav-theme-btn .icon-moon { display: block; } .nav-lang-wrap { position: relative; } .icon-btn.nav-lang-btn { width: auto; min-width: 0; height: 34px; gap: 6px; padding: 0 10px; flex-shrink: 0; white-space: nowrap; } .nav-lang-flag { font-size: 15px; line-height: 1; flex-shrink: 0; } .nav-lang-code { font-family: var(--body); font-size: 12.5px; font-weight: 700; line-height: 1; flex-shrink: 0; } /* Meme raison que ci-dessus : bat ".icon-btn svg { width:17px }". */ .icon-btn.nav-lang-btn .nav-lang-chevron { width: 13px; height: 13px; opacity: .7; flex-shrink: 0; } /* Le menu reprend .user-pill-menu (animation + fond), on ajuste la largeur. */ .nav-lang-menu { min-width: 234px; padding: 8px; } .nav-lang-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); } .nav-lang-search svg { width: 14px; height: 14px; color: var(--ink-soft); flex-shrink: 0; } .nav-lang-search input { flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none; font-family: var(--body); font-size: 13px; color: var(--ink); } .nav-lang-list { display: flex; flex-direction: column; gap: 2px; } .nav-lang-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; border-radius: var(--radius-sm); background: none; cursor: pointer; text-align: left; transition: background .14s ease; } .nav-lang-option:hover { background: var(--bg); } .nav-lang-name { flex: 1 1 auto; font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--ink); } .nav-lang-tag { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); } /* Langue active : coche a droite. */ .nav-lang-option.selected .nav-lang-tag::after { content: '✓'; margin-left: 6px; color: var(--blue); font-weight: 700; } /* Marque compacte : uniquement en taille telephone (voir media query 560px), ou la barre se reduit a "logo + burger". */ .nav-logo { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; color: var(--blue); } .nav-logo svg { width: 19px; height: 19px; } .nav-pill-item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; } .nav-pill-item svg { width: 15px; height: 15px; flex-shrink: 0; } .nav-pill-item:hover { background: var(--bg); color: var(--ink); text-decoration: none; } /* Lien de la page courante : pastille pleine. */ .nav-pill-item.active { background: var(--bg); color: var(--ink); border: 1px solid var(--line); padding: 7px 13px; } /* Bouton d'action principal a droite (Se connecter). */ .nav-cta { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px; background: var(--blue); color: #fff; font-family: var(--body); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-sm); transition: background .15s ease; } .nav-cta:hover, .nav-cta:visited { color: #fff; text-decoration: none; } .nav-cta:hover { background: var(--blue-dark); } .top-nav .nav-link { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 9px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper); transition: border-color .15s ease, color .15s ease; } .top-nav .nav-link:hover { border-color: var(--blue); color: var(--blue); } .nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* ---------- Popup Telegram (accueil uniquement) ---------- */ .telegram-popup { position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 340px; max-width: calc(100vw - 40px); padding: 20px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .28s cubic-bezier(.22, .61, .36, 1), transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s; } .telegram-popup.open { opacity: 1; visibility: visible; transform: translateY(0); } .telegram-popup-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: none; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--ink-soft); cursor: pointer; transition: color .15s ease, background .15s ease; } .telegram-popup-close:hover { color: var(--rose); } .telegram-popup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-right: 24px; } .telegram-popup-icon { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #29a9eb; color: #fff; border-radius: 50%; } .telegram-popup-icon svg { width: 19px; height: 19px; } .telegram-popup-head h4 { margin: 0; font-family: var(--display); font-size: 15.5px; font-weight: 700; color: var(--ink); } .telegram-popup-text { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } .telegram-popup-btn { background: #29a9eb; } .telegram-popup-btn:hover { background: #1c8fcb; } /* .btn n'est utilisé nulle part ailleurs sur un (partout des