/* ========================================================================== RESPONSIVE CSS — Pro Essentiel Adaptations tablette et mobile. Approche : desktop-first, avec points de rupture à 960px (tablette) et 640px (mobile). ========================================================================== */ /* ----- Tablette (≤ 960px) ----- */ @media (max-width: 960px) { :root { --fs-4xl: 2.5rem; --fs-3xl: 2.1rem; --header-height: 84px; } .site-header__logo { height: 64px; } .hero__inner, .intro-split, .about-grid, .contact-grid { grid-template-columns: 1fr; } .hero__inner > *:first-child, .about-grid > *:first-child { order: 2; } .hero__inner > *:last-child, .about-grid > *:last-child { order: 1; } .brand-visual { min-height: 300px; } .pillars, .benefits-grid, .pricing-grid, .intervention-grid, .testimonials-grid, .why-grid { grid-template-columns: repeat(2, 1fr); } .reassurance-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(3, 1fr); } .steps::before { display: none; } .about-values { grid-template-columns: repeat(3, 1fr); } .trust-bar__list { grid-template-columns: repeat(2, 1fr); } .service-block__grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } } /* ----- Menu mobile (≤ 780px) ----- */ @media (max-width: 780px) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } /* Pendant que le menu est ouvert, le bouton (devenu la croix de fermeture) est déplacé en JS avec le menu directement sous ; on le fixe au-dessus du panneau pour qu'il reste visible et cliquable. */ .nav-toggle[aria-expanded="true"] { position: fixed; top: var(--space-3); right: var(--container-padding); z-index: 1001; background-color: var(--color-ivory); } .main-nav { position: fixed; inset: 0; height: 100vh; height: 100dvh; width: 100%; z-index: 999; background-color: var(--color-ivory); flex-direction: column; align-items: stretch; padding: calc(var(--header-height) + var(--space-2)) var(--container-padding) var(--space-4); gap: var(--space-4); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base); overflow-y: auto; -webkit-overflow-scrolling: touch; } .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); } /* Empêche le contenu de la page de défiler derrière le menu ouvert */ body.nav-open { overflow: hidden; } .main-nav__list { flex-direction: column; gap: var(--space-1); } .main-nav__list a { display: block; padding: var(--space-2) 0; font-size: var(--fs-lg); border-bottom: 1px solid var(--color-border); } .header-cta { flex-direction: column; align-items: stretch; } .header-cta .btn { width: 100%; } } /* ----- Mobile (≤ 640px) ----- */ @media (max-width: 640px) { :root { --fs-4xl: 2rem; --fs-3xl: 1.75rem; --fs-2xl: 1.5rem; --space-6: 2.5rem; --space-7: 3rem; --header-height: 76px; } .site-header__logo { height: 52px; } .pillars, .benefits-grid, .pricing-grid, .intervention-grid, .testimonials-grid, .trust-bar__list, .why-grid, .reassurance-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } .about-values { grid-template-columns: 1fr; } .brand-visual { min-height: 260px; } .brand-visual__badge { max-width: 220px; padding: var(--space-1) var(--space-2); } .hero__actions, .cta-band__actions { flex-direction: column; align-items: stretch; } .hero__proof { flex-direction: column; gap: var(--space-1); } .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); } .footer-bottom { flex-direction: column; text-align: center; } }