/* ============================================================ Starboost — couche d'harmonisation Corrige les blocs generes hors charte (heros trop pales, cartes plates, respirations manquantes en mobile). Chargee en fin de pour passer devant les styles inlines. ============================================================ */ /* ---- Hero des pages ville et metier ------------------------- La photo servait de fond mais etait noyee sous un voile blanc : le titre devenait illisible et la carte flottait sans relief. On assume la photo comme texture et on redonne du contraste. */ .hero::after{ background:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.86) 38%, rgba(255,255,255,.97) 78%, #fff 100%) !important; } .hero::before{ filter:saturate(.82) contrast(.94); } .hero .badge{ background:#fff; border:1px solid var(--line2,#d3deea); color:var(--accent-ink,#0a5c92); box-shadow:0 4px 16px rgba(16,45,80,.10); } h1.htitle{ font-size:clamp(30px,5vw,52px); letter-spacing:-.02em; margin-bottom:32px; text-wrap:balance; } /* La carte : panneau blanc franc, filet bleu, ombre reelle. */ .hcard{ background:#fff !important; border:1px solid var(--line,#e4ebf3) !important; border-top:3px solid var(--accent,#1f9fe0) !important; border-radius:18px !important; padding:34px 38px !important; box-shadow:0 24px 70px rgba(16,45,80,.14) !important; } .hcard p{ max-width:68ch; } .hcard .btn{ margin-top:6px; } .sb-cta-note{ margin-top:12px; font-size:13.5px; color:var(--mut,#5b6b7d); } /* Si l'animation ne se joue pas, la carte doit rester visible. */ @media (prefers-reduced-motion:reduce){ .hcard{ opacity:1 !important; animation:none !important; } } /* ---- Boutons : un seul bleu, un seul comportement ---------- */ .btn-p{ background:linear-gradient(135deg,var(--accent,#1f9fe0),var(--accent-d,#127bc4)) !important; border:1px solid var(--accent-d,#127bc4) !important; color:#fff !important; } .btn-p:hover{ box-shadow:0 10px 34px rgba(31,159,224,.34) !important; } .btn-o:hover{ border-color:var(--accent,#1f9fe0) !important; background:rgba(31,159,224,.06) !important; } /* ---- Responsive : ce qui cassait en dessous de 900 px ------ */ @media (max-width:900px){ .hero{ padding:52px 20px 40px !important; } .hcard{ padding:26px 22px !important; } h1.htitle{ margin-bottom:24px; } } @media (max-width:560px){ .hero{ padding:38px 16px 32px !important; } .hcard{ padding:22px 18px !important; border-radius:16px !important; } .hero .badge{ font-size:12px; padding:7px 13px; } .hcard .btn{ display:block; width:100%; text-align:center; } } /* ---- Aucun bloc ne doit pouvoir elargir la page ------------ overflow:clip plutot que hidden : ca coupe le debordement sans casser les en-tetes en position:sticky. */ html{ overflow-x:clip; } body{ overflow-x:clip; } .halo,.orb,.bfx,.grid-bg{ pointer-events:none; } img,svg,video,iframe,table,pre{ max-width:100%; } .hcard,.sec,.hero{ min-width:0; }