/* ═══════════════════════════════════════════════════════ ELL'A SERVICES — RESPONSIVE MOBILE Cibles : iPhone SE 375×667 · Android Tablet · Fold Ce fichier est chargé en DERNIER dans pour avoir priorité sur les styles inline des pages. ═══════════════════════════════════════════════════════ */ /* ─── 0. SOCLE ANTI-DÉBORDEMENT ─────────────────────── */ /* overflow-x:clip sur html ET body : - clip ne crée pas de scroll container → position:fixed reste intact sur iOS - bloque tout débordement horizontal (nav dropdown 540px, grilles, etc.) */ /* Bloque le scroll horizontal sans casser position:fixed iOS */ html { overflow-x: clip; } body { overflow-x: clip; } /* Images et médias ne dépassent jamais leur conteneur */ img, video, iframe { max-width: 100%; height: auto; } /* Flex/grid items : empêche le débordement du contenu texte */ @media (max-width: 900px) { * { min-width: 0; } /* Dropdown nav 540px — masqué et sans impact sur le layout */ .ella-drop-menu { display: none !important; } } /* Empêche le zoom iOS sur les champs de formulaire */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], textarea, select { font-size: 16px; } /* ─── 0b. MENU MOBILE — blocage scroll fond iOS ─────── */ /* Sur iOS Safari, overflow:hidden sur body ne suffit pas quand l'utilisateur scrolle à l'intérieur d'un élément fixed. overscroll-behavior:contain empêche la propagation au body. Supporté depuis iOS 16 (sept. 2022). */ .ella-mobile-menu { overscroll-behavior: contain; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } /* ─── 1. BARRE DE NAV — compact sur mobile (≤ 900 px) ─ */ /* Le JS lit banner.offsetHeight via getBannerH() et met à jour body.paddingTop. Le CSS fournit une valeur initiale conservatrice le temps que le JS s'exécute. banner multi-lignes ~72px + nav 68px + pb 2px ≈ 142px → on prend 150px. */ @media (max-width: 900px) { /* ── Nav inner : hauteur compacte ── */ .ella-nav-inner { height: 68px !important; max-height: 68px !important; overflow: visible !important; } /* ── Logo : réduit ── */ #ella-nav-logo-img { height: 48px !important; max-height: 48px !important; width: auto !important; } /* ── Burger : TOUJOURS visible à ≤900px ── */ .ella-burger { display: flex !important; flex-shrink: 0 !important; } /* ── Nav links : masquée — logo + burger suffisent ── */ .ella-nav-links { display: none !important; } /* ── Bandeau : multi-lignes sur mobile ── */ #ella-banner { height: auto !important; min-height: 44px !important; flex-direction: column !important; gap: 5px !important; padding: 8px 36px 8px 12px !important; align-items: center !important; text-align: center !important; overflow: hidden !important; } .ella-banner-txt { white-space: normal !important; flex-wrap: wrap !important; justify-content: center !important; gap: 4px !important; font-size: .68rem !important; } .ella-banner-txt strong { white-space: normal !important; } /* Cache la 3e ligne (remboursement immédiat…) */ .ella-banner-txt span:not(.ella-banner-badge) { display: none !important; } .ella-banner-cta { font-size: .6rem !important; padding: 5px 12px !important; } .ella-banner-close { top: 50% !important; transform: translateY(-50%) !important; right: 10px !important; } /* body padding initial : banner(~72) + nav(68) + pb(2) ≈ 142 → 150px de sécurité */ body { padding-top: 150px; } /* Drawer démarre juste sous banner + nav */ .ella-mobile-menu { top: 150px !important; } #ella-nav.banner-hidden ~ #ella-mobile-menu { top: 70px !important; } } /* ─── 2. BARRE DE NAV — très petits écrans (≤ 480 px) ─ */ @media (max-width: 480px) { .ella-nav-inner { height: 60px !important; max-height: 60px !important; overflow: visible !important; } #ella-nav-logo-img { height: 40px !important; max-height: 40px !important; } .ella-burger { display: flex !important; flex-shrink: 0 !important; } /* banner(~72) + nav(60) + pb(2) ≈ 134 → 140px */ body { padding-top: 140px; } .ella-mobile-menu { top: 140px !important; } #ella-nav.banner-hidden ~ #ella-mobile-menu { top: 62px !important; } } @media (max-width: 360px) { #ella-banner { gap: 4px !important; padding: 6px 32px 6px 10px !important; } .ella-banner-cta { padding: 4px 8px !important; font-size: .55rem !important; } } /* ─── BOUTON FLOTTANT "DEVIS GRATUIT" — supprimé ──── */ /* Le bouton #ella-float double le WhatsApp sur mobile. On le cache sur tous les écrans (déjà display:none par défaut, mais certaines pages l'activent à ≤600 px via la footer-style). */ #ella-float { display: none !important; } .float-cta { display: none !important; } /* ─── 4. BOUTONS HERO / CTA — empilés en colonne ──── */ @media (max-width: 480px) { .hero-btns, .cta-btns, .hero-buttons { flex-direction: column !important; align-items: stretch !important; } .hero-btns .btn, .cta-btns .btn, .hero-buttons .btn { justify-content: center !important; text-align: center; } } /* ─── 5. TABLEAUX COMPARATIFS ───────────────────────── */ /* Problème : 3 colonnes (Critère | O2/Shiva | Ell'a) dépassent sur 375px. Solution mobile : on cache la colonne concurrente (col 2) et on affiche uniquement Critère + Ell'a Services → 2 colonnes claires. */ @media (max-width: 640px) { /* ─ Structure grille 3 → 2 colonnes ─ */ .vs-thead, .vs-row { grid-template-columns: 1fr 1fr !important; } /* ─ Cache la colonne "O2/Shiva" (2e enfant) ─ */ .vs-th:nth-child(2), .vs-cell:nth-child(2) { display: none !important; } /* ─ Centre le tableau dans son conteneur ─ */ .vs-table-wrap, .vs-table { width: 100%; margin: 0 auto; } /* ─ Cellule critère : un peu plus large ─ */ .vs-cell:first-child { font-size: .78rem !important; padding: 12px 10px !important; } /* ─ En-tête "Ell'a" : fond sombre bien visible ─ */ .vs-th.ours { font-size: .6rem !important; padding: 12px 8px !important; } } /* Pages avec tableaux multi-colonnes différentes (cmp-table, pg-table…) */ @media (max-width: 640px) { .cmp-table-wrap, .pg-table-wrap, [class*="table-wrap"], [class*="comparatif"] table, table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; display: block; width: 100%; } } /* ─── 6. GRILLE ARRONDISSEMENTS (zones-paris) ───────── */ /* index.html : 5 colonnes → 4 → maintenant géré aussi à 480 px */ @media (max-width: 480px) { .zones-paris { grid-template-columns: repeat(4, 1fr) !important; } .z { padding: 10px 3px !important; } .z-n { font-size: 1rem !important; } .z-name { font-size: .42rem !important; letter-spacing: .05em !important; } } /* Galaxy Z Fold fermé ≈ 280–344 px */ @media (max-width: 360px) { .zones-paris { grid-template-columns: repeat(3, 1fr) !important; } .arr-nav-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ─── 7. STATS STRIP ────────────────────────────────── */ /* Déjà 2×2 à ≤ 640 px dans les pages ; on blinde pour fold */ @media (max-width: 360px) { #stats { grid-template-columns: 1fr 1fr !important; } .stat { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.04) !important; } } /* ─── 8. SECTION FISCALE / CRÉDIT D'IMPÔT ───────────── */ /* Réduit le "50 %" géant sur très petits écrans */ @media (max-width: 480px) { .fisc-big { font-size: clamp(4rem, 22vw, 7rem) !important; } } /* ─── 9. FOOTER COLONNES ────────────────────────────── */ /* ella-footer-style gère déjà 2 cols à 600 px */ /* Blinde pour Fold fermé */ @media (max-width: 360px) { .ella-f-cols { grid-template-columns: 1fr !important; } } /* ─── 10. FLOATING CTA (WhatsApp / Devis) ──────────── */ @media (max-width: 480px) { #ella-float, .float-cta, #ella-wa-wrap { bottom: 14px !important; right: 14px !important; } #ella-float a, .float-cta a { padding: 11px 16px !important; font-size: .65rem !important; } } /* ─── 11. GRILLES CONTENU GÉNÉRIQUES ────────────────── */ /* Pages arrondissements, services, etc. */ /* Grille services 3 colonnes → 1 à ≤ 480 px */ @media (max-width: 480px) { .srv-grid { grid-template-columns: 1fr !important; } .reviews-grid { grid-template-columns: 1fr !important; } .cards-grid { grid-template-columns: 1fr !important; } } /* Grilles 2 colonnes → 1 colonne à ≤ 600 px */ @media (max-width: 600px) { .edit-grid, .faq-grid, .diff-grid, .arg-inner, .zones-grid, .fisc-inner { grid-template-columns: 1fr !important; } } /* ─── 12. TEXTES — lisibilité sur 375 px ────────────── */ @media (max-width: 480px) { /* Assure un minimum de lisibilité sur les petits corps de texte */ .prose, .prose-sm, p { font-size: max(.82rem, 13px); } /* Headings : évite la troncature si clamp() pas présent */ h1 { font-size: clamp(1.8rem, 8vw, 3rem) !important; word-break: break-word; } h2 { font-size: clamp(1.4rem, 6vw, 2.2rem) !important; } h3 { font-size: clamp(1.1rem, 5vw, 1.6rem) !important; } } /* ─── 13. SAFE AREA (iPhone X et ultérieurs) ─────────── */ @supports (padding-bottom: env(safe-area-inset-bottom)) { #ella-float, .float-cta, #ella-wa-wrap { bottom: calc(14px + env(safe-area-inset-bottom)); } .ella-mobile-menu { padding-bottom: calc(40px + env(safe-area-inset-bottom)); } } /* ─── 14. TABLETTE (641–900 px) — nav compact ───────── */ @media (min-width: 641px) and (max-width: 900px) { #ella-nav-logo-img { height: 52px !important; } .ella-nav-cta { padding: 9px 16px !important; } } /* ─── 15. GALAXY Z FOLD OUVERT (≈ 717–900 px) ──────── */ /* Le Fold ouvert ressemble à une tablette étroite. La nav est déjà en mode burger à ≤ 900 px — OK. */ @media (min-width: 641px) and (max-width: 820px) { .ella-f-cols { grid-template-columns: repeat(3, 1fr) !important; } .srv-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ─── 16. NAV TABLETTE/LAPTOP MEDIUM (901–1400 px) ──── */ /* À 1024 px (iPad Pro), les 9 liens nav totalisent ~897 px mais la largeur disponible n'est que ~789 px (viewport 1024 − padding − logo 125px). Les items de droite (téléphone + CTA) débordent et sont tronqués par html{overflow-x:clip}. → On cache les 2 items secondaires et on compresse l'espacement. Borne haute étendue de 1200 à 1400 px (2026-08) : la nav pleine taille a besoin d'environ 1256 px + marges pour tenir sans ce correctif, donc la zone 1201–1350 px (ex. MacBook Air 13" en 1280×800) débordait encore, bouton "Devis gratuit" coupé à l'écran. Vérifié : 1366×768 ne laissait que ~7 px de marge sans compression, donc inclus aussi dans la zone compressée par sécurité. */ @media (min-width: 901px) and (max-width: 1400px) { /* Cache "Astuces" et "Guides" (liens secondaires) */ .ella-nav-links > a[href*="astuces"], .ella-nav-links > a[href*="guide-ultime"] { display: none !important; } /* Compresse font + padding des liens restants */ .ella-nav-links > a, .ella-nav-drop > .ella-drop-trigger { font-size: .6rem !important; padding: 6px 8px !important; } } /* Même la version compressée ci-dessus déborde encore légèrement entre 901 et ~970 px (vérifié : jusqu'à 64 px de débordement à 901 px). On cache aussi le téléphone dans cette sous-bande. */ @media (min-width: 901px) and (max-width: 1000px) { .ella-nav-phone { display: none !important; } } /* ─── 16. LISIBILITÉ — TEXTE SUR FONDS SOMBRES ──────── */ /* Ces classes utilisent rgba(255,255,255, .25–.48) illisible sur les sections à fond var(--ink) / var(--ink2) / dark. On booste l'opacité pour atteindre un contraste WCAG AA. S'applique sur tous les écrans (pas de breakpoint). */ /* ─ Héros (toutes variantes de pages) ─ */ .hero-sub, .iv-hero-sub, .sv-hero-sub, .pg-hero-sub { color: rgba(255,255,255,.85) !important; } /* ─ Stats strip ─ */ .stat-l, .stat-label { color: rgba(255,255,255,.80) !important; } /* ─ Méthode / Swiper slides ─ */ .ms-s { color: rgba(255,255,255,.80) !important; } /* ─ Timeline ─ */ .tl-s { color: rgba(255,255,255,.75) !important; } /* ─ CTA fond sombre (toutes variantes) ─ */ .cta-sub, .sv-cta-sub, .iv-cta-sub { color: rgba(255,255,255,.85) !important; } /* ─ Service cards — texte au survol fond sombre ─ */ .srv:hover .srv-body { color: rgba(255,255,255,.85) !important; } /* ─ About / social proof ─ */ .ab-sub { color: rgba(255,255,255,.80) !important; } /* ─ Sous-titres de sections dark récurrents ─ */ .hg-s, .sac-s, .cf-s, .cs-t, .cso-s, .ac-s { color: rgba(255,255,255,.80) !important; } /* ─ Micro-copy / proof sous CTA ─ */ .cta-pre, .sv-cta-pre, .iv-cta-pre { color: rgba(255,255,255,.75) !important; } /* ─ Éléments numériques (grands chiffres dark) ─ */ .rp-k, .cr-k, .vcr-k { color: rgba(255,255,255,.80) !important; } /* ─ Labels de sections dark (track, slider…) ─ */ .ap-label, .ap-track, .aps-l, .el-lab, .sl-label, .sh-label, .col-label { color: rgba(255,255,255,.80) !important; }