/* ============================================================ Hub Vision v2 — optimisations mobile Chargé APRÈS hub.css. Règles ciblées + !important pour battre les styles inline du prototype. Rien au-dessus de 600px sauf utilitaires. ============================================================ */ /* ---- utilitaires d'affichage responsive ---- */ @media (max-width: 600px) { .hide-sm { display: none !important; } } @media (min-width: 601px) { .only-sm { display: none !important; } } /* ---- Success story (#conv) : centrage en mobile (sauf le paragraphe) ---- */ @media (max-width: 760px) { #conv .conv-grid > div:first-child > div:first-child { justify-content: center !important; } /* badge */ #conv .conv-grid > div:first-child > div:nth-child(2) { text-align: center !important; } /* nom + rôle */ #conv .conv-grid > div:first-child > a { align-self: center !important; } /* bouton Simuler */ } /* ---- confort tactile ---- */ @media (max-width: 900px) { a, button, .jf-opt, .sim-chip, .opt, .chip { -webkit-tap-highlight-color: rgba(27, 110, 243, .18); } /* pas de survol « collant » au tactile */ html { -webkit-text-size-adjust: 100%; } } /* ============================================================ HEADER — compact, sans chevauchement du logo Le CTA est le dernier direct de .hdr__bar (le nav est .vp-desk, masqué < 900px). On le rend compact, insécable, collé à droite. ============================================================ */ @media (max-width: 600px) { .hdr__bar { gap: 10px !important; height: 60px !important; } .hdr__bar .brand { min-width: 0; flex: 0 1 auto; } .hdr__bar .brand img { height: 16px !important; } .hdr__bar .brand .hh { font-size: 17px !important; } .hdr__bar > a:not(.brand) { margin-left: auto !important; flex: 0 0 auto; white-space: nowrap !important; font-size: 13px !important; padding: 10px 16px !important; gap: 6px !important; min-height: 40px; } .hdr__bar > a:not(.brand) svg { width: 14px !important; height: 14px !important; } } /* header très étroit : on réduit encore la marque */ @media (max-width: 380px) { .hdr__bar .brand img { height: 15px !important; } .hdr__bar > a:not(.brand) { font-size: 12.5px !important; padding: 9px 14px !important; } } /* ---- cibles tactiles minimales pour les petits liens/pills ---- */ @media (max-width: 600px) { .dock a, .dock button { min-height: 52px; } } /* ============================================================ MOBILE : en-tête épuré + un seul CTA « Nous rejoindre » en bas (remplace le dock 3 icônes / le CTA « Rejoindre » de l'en-tête) ============================================================ */ /* CTA de l'en-tête masqué en mobile (repris par la barre du bas) */ @media (max-width: 899px) { [data-hdr-cta] { display: none !important; } } /* barre CTA du bas — pilule noire pleine largeur */ .joinbar { display: none; } @media (max-width: 899px) { .joinbar { display: flex !important; align-items: center; justify-content: center; gap: 10px; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 250; background: #0C0C0E; color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; padding: 17px 24px; border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(12, 12, 14, .55); transition: transform .16s, background .2s; } .joinbar:active { transform: translateY(1px); background: #26262B; } .joinbar svg { width: 18px; height: 18px; } /* réserve la place de la barre (remplace le padding du dock de hub.css) */ body { padding-bottom: 0; } body:has(.joinbar) { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; } } /* Débordement horizontal : hub.css met déjà body{overflow-x:hidden}. Ne PAS toucher (le passer en scroll-container casse le position:sticky de l'en-tête). */