/** * MOBILE — Page Applications Web (644) * ------------------------------------------------------------------ * Reflow mobile de la page, chargé UNIQUEMENT : * - sur la page 644 (condition PHP dans inc/22-mobile-applications-web.php) * - sous 1024px (attribut media de l'enqueue — aligné sur le breakpoint * du modal coming-soon, inc/19) * Le desktop n'est jamais affecté. * * Diagnostic d'origine (2026-08-07, viewport 375px) : * - header (833c055) et menu latéral (9b83891) en position:fixed * par-dessus le contenu ; logo SVG 528px de large * - conteneurs internes à 96px de large avec 2×48px de padding * → zone de contenu 0px, texte en un mot par ligne * - H1 64px aligné à droite → déborde hors écran à gauche * * Stratégie : reflow générique (tout conteneur atomique passe pleine * largeur), sections empilées en colonne, header remis dans le flux, * menu latéral desktop masqué (burger mobile = itération suivante), * typographie fluide. */ @media (max-width: 1023.98px) { /* == 0. Plus aucun débordement horizontal ====================== */ /* Clip aux deux niveaux : sans le clip sur html, Chrome mobile élargit le viewport de layout à la largeur du contenu débordant (constaté : 556px au lieu de 375) et tout paraît zoomé-out. */ html:has(body.page-id-644), html body.page-id-644 { overflow-x: clip; } /* == 1. Reflow générique des conteneurs atomiques ============== */ /* Les wrappers racine (.elementor : page 644, template header 17, template footer) sont figés en largeur desktop (1600px constaté) → retour à la largeur du viewport. */ body.page-id-644 .elementor { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Tous les e-con reprennent la largeur du viewport : c'est la correction de fond du "96px de large, contenu 0px". Les conteneurs V4 se dimensionnent via la variable --width (.e-con { width: var(--width) }) : on surcharge la variable ET la propriété. */ body.page-id-644 .e-con { --width: 100%; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-wrap: wrap; /* Paddings latéraux desktop (jusqu'à 160px par côté constatés sur le scroller f445140 → 55px de zone utile sur 375) remis à zéro ; la gouttière mobile est posée sur UN seul niveau (enfants directs du scroller, règle plus spécifique §1b). */ padding-left: 0 !important; padding-right: 0 !important; } /* == 1b. Gouttière mobile ====================================== */ /* Les grandes sections (enfants directs du scroller f445140) s'empilent en colonne avec un padding latéral raisonnable. Les petits rows internes (icône + label) gardent leur direction. */ body.page-id-644 .elementor-element-f445140 > .e-con { flex-direction: column !important; padding-left: 20px !important; padding-right: 20px !important; } /* == 2. Header : retour dans le flux, logo à l'échelle ========= */ body.page-id-644 .elementor-element-833c055 { position: static !important; height: auto !important; padding: 16px 20px !important; } body.page-id-644 .elementor-element-833c055 .e-svg-base, body.page-id-644 .elementor-element-833c055 svg { max-width: min(62vw, 240px) !important; height: auto !important; } /* == 2b. Icône mail du header ================================== */ /* En desktop : position:fixed avec left:492px (offset pixel) et SVG sans width/height (0×0, tracés débordants). En mobile on la recale en haut à droite avec une taille explicite. */ body.page-id-644 .elementor-element-40aafe6 { left: auto !important; right: 16px !important; top: 16px !important; width: 44px !important; } body.page-id-644 .elementor-element-40aafe6 svg { width: 44px !important; height: auto !important; } /* Garde-fou : aucun SVG d'icône ne déborde de son conteneur. */ body.page-id-644 .elementor-icon svg, body.page-id-644 .e-svg-base svg { max-width: 100%; overflow: hidden; } /* == 3. Menu latéral desktop : masqué en mobile ================ */ /* C'est le bloc fixed qui recouvrait la page. Le burger mobile viendra dans une itération suivante ; en attendant le visiteur a le fil d'Ariane et les liens du footer. */ body.page-id-644 .elementor-element-9b83891 { display: none !important; } /* Le scroller principal n'a plus de header fixe à compenser. */ body.page-id-644 .elementor-element-f445140 { margin-top: 0 !important; } /* == 3b. Footer : dans le flux ================================= */ /* En desktop le footer est fixed bottom:0 (bandeau permanent) ; en mobile il recouvrait le texte → retour dans le flux, en fin de page. */ body.page-id-644 .elementor-element-0215730 { position: static !important; } /* == 3c. Icône mail : liée au header, pas à l'écran ============ */ /* fixed → absolute : elle reste en haut à droite du header et défile avec la page au lieu de flotter sur le texte. */ body.page-id-644 .elementor-element-40aafe6 { position: absolute !important; } /* == 3d. Largeurs de widgets internes ========================== */ /* Titres d'accordéon FAQ (V4 nested accordion) : le texte prend toute la largeur disponible à côté de la flèche. */ body.page-id-644 .e-n-accordion, body.page-id-644 .e-n-accordion-item { width: 100% !important; max-width: 100% !important; } body.page-id-644 .e-n-accordion-item-title-header, body.page-id-644 .e-n-accordion-item-title-text { width: auto !important; flex: 1 1 auto !important; } /* Légendes de slides projets : largeur desktop figée (128px). */ body.page-id-644 .elementor-slide-description { width: 100% !important; max-width: 100% !important; } /* == 4. Typographie fluide ===================================== */ body.page-id-644 h1 { font-size: clamp(2rem, 8vw, 2.6rem) !important; line-height: 1.15 !important; text-align: left !important; width: auto !important; max-width: 100% !important; } body.page-id-644 h2 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; line-height: 1.2 !important; } body.page-id-644 h3 { font-size: clamp(1.2rem, 5.5vw, 1.5rem) !important; line-height: 1.25 !important; } /* Paragraphes : le justifié desktop crée des rivières de blanc sur 335px de large → alignement gauche. */ body.page-id-644 .elementor-element-f445140 p { text-align: left !important; } /* == 5. Médias fluides ========================================= */ body.page-id-644 img, body.page-id-644 video, body.page-id-644 iframe { max-width: 100% !important; height: auto !important; } }