/* * ============================================================ * DROP ACADEMY — RESPONSIVE PATCH v1.0 * À inclure dans de chaque page : * * ============================================================ */ /* ─── 1. RESET ANTI-DÉBORDEMENT GLOBAL ─── */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: hidden; scroll-behavior: smooth; } body { overflow-x: hidden; min-width: 0; } img, video, iframe, embed, object { max-width: 100%; height: auto; display: block; } /* Évite que les tableaux ou pre fassent déborder */ table { width: 100%; border-collapse: collapse; } pre, code { overflow-x: auto; } /* ─── 2. NAVBAR ─── */ /* Corrige le décalage nav top:40px sur petit écran */ @media (max-width: 480px) { nav { top: 0 !important; height: 52px !important; padding: 0 14px !important; } /* Décale le contenu sous la nav fixe */ body > *:not(nav):first-of-type { padding-top: 52px; } } @media (max-width: 1024px) { nav { padding: 0 16px !important; height: 56px !important; top: 28px !important; } } /* Fix dropdown hover : zone tampon pour éviter disparition prématurée */ .nav-dropdown-menu::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; background: transparent; } /* Sous-menus mobiles accessibles au doigt */ @media (max-width: 1024px) { .nav-sub-menu a { padding: 12px 20px !important; font-size: 14px !important; min-height: 44px; display: flex; align-items: center; } .nav-links > li > a { min-height: 52px; } /* Supprime le double bloc @media dupliqué — unifié ici */ .nav-links { top: 84px !important; } } /* ─── 3. BANDEAU AVIS GOOGLE ─── */ @media (max-width: 480px) { #google-reviews-bar { display: none !important; } } @media (max-width: 768px) { #google-reviews-bar { height: 26px !important; } #google-reviews-bar span { font-size: 10px !important; } } /* ─── 4. HERO ─── */ @media (max-width: 1024px) { .hero { padding: 120px 24px 48px !important; } .hero-inner { grid-template-columns: 1fr !important; gap: 32px !important; } .hero-right { display: none !important; } } @media (max-width: 768px) { .hero { padding: 90px 16px 40px !important; min-height: auto !important; } .hero h1 { font-size: clamp(32px, 8vw, 48px) !important; letter-spacing: -0.5px !important; } .hero-subtitle { font-size: 14px !important; max-width: 100% !important; } .hero-btns { flex-direction: column !important; gap: 10px !important; } .hero-btns a { width: 100% !important; text-align: center !important; padding: 14px 20px !important; } } @media (max-width: 480px) { .hero { padding: 70px 14px 32px !important; } .hero h1 { font-size: clamp(28px, 9vw, 40px) !important; } .hero-qualiopi { font-size: 10px !important; } } /* ─── 5. WRAP (conteneur principal) ─── */ .wrap { padding-left: clamp(14px, 4vw, 48px) !important; padding-right: clamp(14px, 4vw, 48px) !important; } @media (max-width: 768px) { .wrap { padding-top: 48px !important; padding-bottom: 48px !important; } } @media (max-width: 480px) { .wrap { padding-top: 36px !important; padding-bottom: 36px !important; } } /* Sections avec padding inline hard-codé */ @media (max-width: 768px) { section[style*="padding:90px 48px"], section[style*="padding: 90px 48px"], div[style*="padding:90px 48px"], div[style*="padding: 90px 48px"] { padding-left: 16px !important; padding-right: 16px !important; padding-top: 48px !important; padding-bottom: 48px !important; } div[style*="padding:0 48px"], div[style*="padding: 0 48px"] { padding-left: 16px !important; padding-right: 16px !important; } } @media (max-width: 480px) { section[style*="padding:90px 48px"], div[style*="padding:90px 48px"] { padding-top: 32px !important; padding-bottom: 32px !important; padding-left: 14px !important; padding-right: 14px !important; } } /* ─── 6. BANDE DE CHIFFRES CLÉS (counter section) ─── */ /* Grid 4 colonnes → 2 → 1 */ @media (max-width: 1024px) { div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; } /* Compteurs : réduire la taille des chiffres */ .counter-num, [style*="font-size:58px"] { font-size: clamp(32px, 10vw, 52px) !important; } /* translateY(-40px) provoque un débordement sur mobile */ div[style*="transform:translateY(-40px)"] { transform: none !important; margin-top: 0 !important; border-radius: 12px !important; } } /* ─── 7. GRILLES FORMATIONS ─── */ .formations-grid { grid-template-columns: repeat(3, 1fr) !important; } @media (max-width: 1024px) { .formations-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } } @media (max-width: 640px) { .formations-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } /* ─── 8. GRILLE PLANNING / FLEXIBILITÉ ─── */ @media (max-width: 1024px) { .planning-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .planning-grid { grid-template-columns: 1fr !important; } .plan-specials { grid-template-columns: 1fr !important; } } /* ─── 9. CHIFFRES / STATS ─── */ .chiffres-grid { grid-template-columns: repeat(3, 1fr) !important; } @media (max-width: 768px) { .chiffres-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .chiffre-num { font-size: clamp(36px, 10vw, 52px) !important; } } /* ─── 10. CARTE FRANCE (section carte) ─── */ @media (max-width: 1024px) { .carte-inner { grid-template-columns: 1fr !important; gap: 32px !important; } #map-container { min-height: 280px !important; } } /* ─── 11. ÉTAPES (4 étapes simples) ─── */ .etapes-grid { grid-template-columns: repeat(4, 1fr) !important; } @media (max-width: 1024px) { .etapes-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; } .etapes-grid::before { display: none !important; } } @media (max-width: 640px) { .etapes-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } /* ─── 12. SIMULATEUR REVENUS ─── */ @media (max-width: 1024px) { #simulateur-grid { grid-template-columns: 1fr !important; gap: 32px !important; } } @media (max-width: 480px) { #sim-result { font-size: clamp(40px, 12vw, 60px) !important; } #simulateur-grid div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr 1fr !important; } } /* ─── 13. CALENDRIER SESSIONS ─── */ #sessions-grid, div[style*="grid-template-columns:repeat(auto-fit,minmax(280px"] { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; } @media (max-width: 768px) { #sessions-grid { grid-template-columns: 1fr !important; } /* Supprime la 2ème section calendrier dupliquée sur mobile pour éviter la confusion */ section.s-blanc#calendrier:last-of-type { display: none !important; } } /* ─── 14. SECTION "PATRON" (devenir votre propre patron) ─── */ @media (max-width: 1024px) { .patron-inner { grid-template-columns: 1fr !important; } .patron-imgs { display: none !important; } .patron-text { padding: 48px 20px !important; } } /* ─── 15. SECTION AVIS ─── */ .avis-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; } @media (max-width: 640px) { .avis-grid { grid-template-columns: 1fr !important; } } /* ─── 16. BANDEAU RÉCUPÉRATION POINTS ─── */ @media (max-width: 768px) { .recup-banner { flex-direction: column !important; text-align: center !important; padding: 24px 16px !important; gap: 16px !important; } .recup-left { flex-direction: column !important; align-items: center !important; } .recup-icon { font-size: 36px !important; } } /* ─── 17. FOOTER ─── */ @media (max-width: 1024px) { .footer-top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } } @media (max-width: 640px) { .footer-top { grid-template-columns: 1fr !important; gap: 24px !important; } .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; } .footer-badges { justify-content: center !important; } } /* ─── 18. BOUTONS FLOTTANTS ─── */ @media (max-width: 480px) { .floating-cta { bottom: 12px !important; right: 12px !important; gap: 8px !important; } .floating-btn { width: 48px !important; height: 48px !important; } } /* ─── 19. CTA STICKY MOBILE (NOUVEAU — boost conversions) ─── */ .sticky-mobile-cta { display: none; } @media (max-width: 768px) { .sticky-mobile-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400; background: #0e0e0e; border-top: 2px solid #c89230; padding: 10px 16px; gap: 10px; align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,0.3); } .sticky-mobile-cta a { flex: 1; padding: 12px 8px; border-radius: 8px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; letter-spacing: 0.3px; } .sticky-mobile-cta .smc-call { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.15); } .sticky-mobile-cta .smc-rdv { background: #c89230; color: #fff; box-shadow: 0 3px 12px rgba(200,146,48,0.4); } /* Décale le contenu pour ne pas être caché derrière le CTA sticky */ body { padding-bottom: 70px !important; } } /* ─── 20. PAGES SPÉCIFIQUES (tarifs, rdv, formations) ─── */ /* Grilles tarifs → 1 colonne sur mobile */ @media (max-width: 768px) { .tarif-grid-4, .tarif-grid-3, .tarif-grid-auto { grid-template-columns: 1fr !important; } } @media (max-width: 1024px) and (min-width: 769px) { .tarif-grid-4 { grid-template-columns: repeat(2, 1fr) !important; } .tarif-grid-3 { grid-template-columns: repeat(2, 1fr) !important; } } /* Page hero interne (tarifs, rdv, etc.) */ @media (max-width: 768px) { .page-hero { padding: 80px 16px 40px !important; } .page-hero h1 { font-size: clamp(28px, 8vw, 44px) !important; } } /* ─── 21. ACCESSIBILITÉ ─── */ /* Focus visible sur tous les éléments interactifs */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #c89230; outline-offset: 3px; border-radius: 4px; } /* Taille minimale des zones tactiles */ button, a, [role="button"] { min-height: 44px; min-width: 44px; } /* Évite le zoom iOS sur les inputs */ input, select, textarea { font-size: max(16px, 1rem); }