/* * MOBILE.CSS — socle responsive du site Biome Constructions * --------------------------------------------------------------- * Charge APRES tokens.css et site.css dans le layout principal * (resources/views/layouts/site.blade.php). * * STRATEGIE ACTEE (chef de projet) : HYBRIDE BORNEE. * Le site est aujourd'hui 100% desktop, avec des styles INLINE herites de la * maquette Claude Design (fidelite pixel-perfect actee, aucune regression * desktop toleree). Plutot que de tout re-ecrire en classes, on extrait en * classes utilitaires CSS UNIQUEMENT les proprietes qui doivent changer selon * le viewport : * - display (masquer/afficher des blocs) * - grid-template-columns (nombre de colonnes de grille) * - max-width / padding lateral du conteneur * - font-size des titres (echelle typographique) * - position des elements fixes (a traiter lot par lot, voir points * d'attention M1+ dans docs/mobile-strategie.md) * Tout le decoratif (couleurs, ombres, rayons, transitions) reste INLINE et * INTOUCHE : ce fichier ne le duplique jamais. * * BREAKPOINTS ACTES : * - Desktop : > 1024px (comportement actuel, INCHANGE) * - Tablette : 481px a 1024px * - Mobile : <= 480px * * REGLE D'OR (non-regression desktop) : * AUCUNE regle de ce fichier ne s'applique au-dela de 1024px. Toute regle * est OBLIGATOIREMENT enfermee dans une media query (max-width:1024px) ou * (max-width:480px). Une seule exception documentee plus bas * (.biome-visible-mobile, qui a besoin d'une regle min-width:1025px pour * se masquer en desktop) : elle ne change rien au rendu desktop existant, * elle ne fait que garder ce bloc cache par defaut la ou l'inline ne le * masque pas deja. * * JUSTIFICATION DU !important : * Les elements cibles portent des styles inline (grid-template-columns, * padding, font-size...) directement dans le HTML/Blade. Une regle CSS * normale ne peut jamais surcharger un style inline (specificite inline * toujours superieure). Le !important est donc INDISPENSABLE ici pour que * le responsive fonctionne. Il est strictement confine : * - a ce fichier (mobile.css) uniquement, * - a l'interieur des media queries (max-width:1024px)/(max-width:480px), * - jamais actif en desktop (>1024px), ou l'inline garde la main seul. * Voir docs/mobile-strategie.md pour le detail de la justification. * * CONSIGNE ABSOLUE : ce fichier est purement visuel. On ne retire JAMAIS de * contenu du DOM cote Blade pour le mobile (voir docs/mobile-strategie.md). */ /* ================================================================= GRILLES — utilitaires .biome-grille-N ----------------------------------------------------------------- Ces classes ne portent AUCUNE declaration hors media query : en desktop (>1024px), l'element garde entierement son grid-template-columns inline (aucune regle ici n'est active). En tablette et mobile, on surcharge le nombre de colonnes via !important (voir justification ci-dessus). ================================================================= */ @media (max-width: 1024px) { .biome-grille-2, .biome-grille-3, .biome-grille-4, .biome-grille-5, .biome-grille-6, .biome-grille-7 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .biome-grille-2, .biome-grille-3, .biome-grille-4, .biome-grille-5, .biome-grille-6, .biome-grille-7 { grid-template-columns: 1fr !important; } } /* * Correctif debordement grid-item : par defaut, un enfant direct d'une * grille CSS a min-width:auto, ce qui l'empeche de se retrecir en dessous * de la largeur de son contenu (texte insecable, bloc avec padding, etc.). * Constate en recette a 375px sur des blocs "placeholder" (texte centre + * padding, ex: qui-sommes-nous/investir) qui debordaient de 8 a 16px du * conteneur alors que la grille etait bien passee a 1 colonne. On force * min-width:0 sur les enfants directs des grilles utilitaires en * tablette/mobile (ne change rien au rendu desktop : aucune regle ici * au-dela de 1024px, et ne retire aucun style inline existant). */ @media (max-width: 1024px) { .biome-grille-2 > *, .biome-grille-3 > *, .biome-grille-4 > *, .biome-grille-5 > *, .biome-grille-6 > *, .biome-grille-7 > * { min-width: 0 !important; } } /* ================================================================= CONTENEUR — .biome-conteneur ----------------------------------------------------------------- Reduit le padding lateral du conteneur principal (desktop : 32px inline, voir --padding-lateral-conteneur dans tokens.css, valeur non dupliquee ici). ================================================================= */ @media (max-width: 1024px) { .biome-conteneur { padding-left: 24px !important; padding-right: 24px !important; } } @media (max-width: 480px) { .biome-conteneur { padding-left: 16px !important; padding-right: 16px !important; } } /* ================================================================= ECHELLE TYPOGRAPHIQUE — titres ----------------------------------------------------------------- Le desktop garde ses tailles inline, variables selon la page (52/50/48/46px pour un hero par exemple). Ces classes se contentent d'ecraser le font-size (et au besoin line-height/letter-spacing pour la lisibilite mobile) en tablette et mobile, quelle que soit la valeur desktop d'origine. ================================================================= */ /* Titre hero (H1) : 52/50/48/46px selon page en desktop -> 40px tablette, 30px mobile */ @media (max-width: 1024px) { .biome-titre-hero { font-size: 40px !important; line-height: 1.15 !important; } } @media (max-width: 480px) { .biome-titre-hero { font-size: 30px !important; line-height: 1.2 !important; letter-spacing: normal !important; } } /* Titre de section, variante large : 38px desktop -> 30px tablette, 26px mobile */ @media (max-width: 1024px) { .biome-titre-section-lg { font-size: 30px !important; line-height: 1.2 !important; } } @media (max-width: 480px) { .biome-titre-section-lg { font-size: 26px !important; line-height: 1.25 !important; } } /* Titre de section standard : 32-34px desktop -> 28px tablette, 24px mobile */ @media (max-width: 1024px) { .biome-titre-section { font-size: 28px !important; line-height: 1.2 !important; } } @media (max-width: 480px) { .biome-titre-section { font-size: 24px !important; line-height: 1.25 !important; } } /* Titre de sous-section : 24-28px desktop -> 22px tablette, 20px mobile */ @media (max-width: 1024px) { .biome-titre-sous-section { font-size: 22px !important; line-height: 1.25 !important; } } @media (max-width: 480px) { .biome-titre-sous-section { font-size: 20px !important; line-height: 1.3 !important; } } /* ================================================================= AFFICHAGE — utilitaires de visibilite ================================================================= */ /* Masque l'element uniquement en mobile (<=480px) */ @media (max-width: 480px) { .biome-masquer-mobile { display: none !important; } } /* Masque l'element en tablette ET en mobile (<=1024px) */ @media (max-width: 1024px) { .biome-masquer-tablette-mobile { display: none !important; } } /* * .biome-visible-mobile : SEULE classe de ce fichier qui utilise une regle * en min-width. Justification : cet element n'existe pas dans la maquette * desktop (aucun style inline desktop ne le masque), il est destine a * n'apparaitre qu'en dessous de 1025px (tablette + mobile). Il faut donc le * masquer explicitement en desktop pur (>1024px), sans quoi il serait visible * par defaut partout. Cette regle ne modifie AUCUN rendu existant : elle ne * fait que garder cache, en desktop, un bloc qui n'a de sens qu'en dessous de * 1024px (ex : un bouton menu burger, un CTA compact mobile). */ @media (min-width: 1025px) { .biome-visible-mobile { display: none !important; } } /* ================================================================= IMAGES — evite tout debordement horizontal en tablette/mobile ----------------------------------------------------------------- Ajout lot M2 (pages vitrine). Les images de la maquette sont fluides par defaut (largeur/hauteur explicites ou width:100%), mais certaines portent une largeur fixe en pixels (ex: cartes du carrousel realisations, 300px). Cette regle generique confine toute image a la largeur de son conteneur en dessous de 1024px, uniquement pour eviter un debordement horizontal residuel — elle ne change pas le rendu desktop (aucune regle ici au-dela de 1024px). ================================================================= */ @media (max-width: 1024px) { .biome-conteneur img, .biome-grille-2 img, .biome-grille-3 img, .biome-grille-4 img, .biome-grille-5 img, .biome-grille-6 img, .biome-grille-7 img { max-width: 100% !important; } } /* ================================================================= HERO FULL-BLEED (page Accueil) — .biome-hero-fullbleed ----------------------------------------------------------------- Le hero de l'accueil affiche une image pleine largeur (height:auto, ratio conserve) avec un bloc de texte en position absolute, centre verticalement sur la hauteur de l'image. Sur petit ecran, l'image redimensionnee en largeur devient trop basse pour contenir le texte (titre + paragraphe + bouton) sans le faire deborder verticalement. On impose donc une hauteur minimale a la section en tablette/mobile : l'image passe alors en object-fit:cover pour remplir cet espace (elle perd son ratio naturel, mais reste plein cadre, sans bande vide ni texte tronque). ================================================================= */ @media (max-width: 1024px) { .biome-hero-fullbleed { min-height: 460px !important; } .biome-hero-fullbleed > img { position: absolute !important; inset: 0 !important; height: 100% !important; object-fit: cover !important; } } @media (max-width: 480px) { .biome-hero-fullbleed { min-height: 420px !important; } .biome-hero-fullbleed .biome-hero-fullbleed__texte { max-width: 100% !important; } } /* ================================================================= HERO IMAGE LATERALE (pages Investir, Partenaires) — .biome-hero-image-laterale ----------------------------------------------------------------- Ces heros portent une image de fond en position absolute occupant 50% de la largeur a droite (width:50%;height:100%), recouverte d'un dégradé horizontal qui la fait disparaitre progressivement vers la gauche ou se trouve le texte. Sur tablette/mobile, une image reduite a une bande verticale de 50% n'apporte plus rien de lisible : on la masque et on laisse le fond uni (couleur du degrade, deja en fond de section) porter seul le hero, pour garder le texte pleinement lisible sans zone d'image tronquee ni degrade incoherent. ================================================================= */ @media (max-width: 1024px) { .biome-hero-image-laterale { display: none !important; } } /* ================================================================= CARTE "PARCOURS" (Accueil) — .biome-accueil__parcours-carte--mobile ----------------------------------------------------------------- Carte en display:flex (ligne) avec hauteur fixe (300px) : texte a gauche (flex:1), image ou placeholder a droite en width:52%/40% et position absolute a l'interieur. Sur tablette/mobile, la hauteur fixe ne suffit plus au texte (titre + description + bouton) : on passe la carte en colonne (texte en haut, visuel en bas), on libere la hauteur (auto) et on redonne au bloc visuel une hauteur explicite (au lieu de align-self:stretch sur une largeur en %). ================================================================= */ @media (max-width: 1024px) { .biome-accueil__parcours-carte--mobile { flex-direction: column !important; height: auto !important; } .biome-accueil__parcours-carte--mobile > div { width: 100% !important; box-sizing: border-box !important; } .biome-accueil__parcours-carte--mobile > div:last-child { height: 160px !important; } } /* ================================================================= CARROUSEL REALISATIONS (page Qui-sommes-nous) — .biome-carrousel-realisations ----------------------------------------------------------------- Le conteneur porte deja overflow:hidden en inline (aucun scroll horizontal parasite a ajouter ici). On ralentit uniquement la vitesse de defilement en tablette/mobile (34s desktop -> plus lent), car les cartes de 300px de large deroulent proportionnellement plus vite sur un viewport etroit, ce qui degrade la lisibilite. ================================================================= */ @media (max-width: 1024px) { .biome-carrousel-realisations > div { animation-duration: 52s !important; } } @media (max-width: 480px) { .biome-carrousel-realisations > div { animation-duration: 64s !important; } } /* ================================================================= FILTRES DE CATEGORIES (page Actualites) — .biome-filtre-categorie ----------------------------------------------------------------- Cibles tactiles >=44px en tablette/mobile (desktop : 38px de haut environ via padding:10px + texte 14px, suffisant a la souris). Le retour a la ligne est deja gere par flex-wrap sur le conteneur parent (inline, non modifie). ================================================================= */ @media (max-width: 1024px) { .biome-filtre-categorie { min-height: 44px !important; padding-top: 13px !important; padding-bottom: 13px !important; } } /* ================================================================= PAGINATION (public/views/pagination/biome.blade.php) — .biome-pagination__item ----------------------------------------------------------------- Cibles tactiles >=44px en tablette/mobile (desktop : 38x38px, suffisant a la souris). ================================================================= */ @media (max-width: 1024px) { .biome-pagination__item { width: 44px !important; height: 44px !important; } } /* ================================================================= SIDEBAR STICKY (page Actualites) — .biome-desactiver-sticky-mobile ----------------------------------------------------------------- L'aside (bloc guide + articles populaires) est position:sticky en desktop, a cote de la liste d'articles. En tablette/mobile, la grille parente passe en 1 colonne : l'aside se retrouve alors sous la liste d'articles dans le flux, et un position:sticky y resterait actif en cas de scroll, ce qui n'a plus de sens (il collerait un bloc qui suit deja tout le contenu). On revient a un positionnement normal. ================================================================= */ @media (max-width: 1024px) { .biome-desactiver-sticky-mobile { position: static !important; top: auto !important; } } /* ================================================================= HEADER MOBILE/TABLETTE — bandeau logo + burger, tiroir plein ecran (resources/views/components/header.blade.php, lot mobile M1) ----------------------------------------------------------------- Desktop (>1024px) : aucune regle ici, header strictement inchange (nav du haut + nav principale visibles, bouton burger et tiroir masques via .biome-visible-mobile, voir plus haut dans ce fichier). Sous 1024px : la nav du haut et la nav principale sont deja masquees via .biome-masquer-tablette-mobile (classe posee directement dans le Blade). Le bloc logo + burger (grille 3 colonnes 1fr auto 1fr en desktop, avec la nav principale au centre) passe en 2 colonnes (logo a gauche, burger a droite) puisque la colonne centrale est vide en tablette/mobile ; la hauteur fixe de 108px (desktop, adaptee a la nav principale) est reduite pour un bandeau plus compact. ================================================================= */ @media (max-width: 1024px) { .biome-header__ligne-principale { grid-template-columns: 1fr auto !important; height: 72px !important; } } /* * CORRECTIF DEBORDEMENT (constate en recette navigateur reelle a 375px, * scrollWidth 385px vs viewport 375px, ~10px de depassement) : * le conteneur du header (.biome-header__conteneur) garde son padding * lateral desktop de 32px (--padding-lateral-conteneur, inline) meme sous * 1024px : a 375px de large, il ne restait que 311px utiles pour le logo * (285px, "BIOME CONSTRUCTIONS") + le bouton burger (44px + 8px de marge), * soit 337px necessaires > 311px disponibles. * On reduit ce padding a 16px sous 1024px (coherent avec .biome-conteneur * en mobile, voir section CONTENEUR plus haut) : 375 - 2*16 = 343px * disponibles, largement suffisant pour 337px. Confine a la media query, * aucun effet sur le padding desktop (32px inline, inchange). */ @media (max-width: 1024px) { .biome-header__conteneur { padding-left: 16px !important; padding-right: 16px !important; } } /* * Reduction complementaire du logo sous 1024px : la hauteur d'image passe * de 90px (desktop) a 44px, ce qui reduit proportionnellement sa largeur * (l'image garde son ratio naturel via width:auto, inline, non modifie) et * degage une marge de securite confortable dans le bandeau reduit a 72px * de haut. Coherent avec la reduction generale de l'echelle du header en * mobile (bandeau compact). Cible tactile du lien logo non affectee (le * lien garde une zone cliquable suffisante via son padding naturel de * ligne, aligne verticalement sur les 72px du bandeau). */ @media (max-width: 1024px) { .biome-header__logo img { height: 44px !important; } } /* * Z-INDEX du tiroir menu burger (#biome-tiroir-menu) : 60, pose directement * en inline dans header.blade.php (pas de regle ici, valeur fixe voulue dans * tous les breakpoints ou le tiroir est actif). Choix documente : entre le * header sticky (z-index:50) et les modales de demande / candidature * (z-index:70, modale-lead.blade.php, modale-candidature.blade.php, * formulaire-terrain.blade.php) : le tiroir doit rester AU-DESSUS du header * (qui reste visible/sticky derriere) mais SOUS les modales plein ecran * (lot M4 a venir), au cas ou une modale s'ouvrirait pendant que le tiroir * est ouvert (ex: lien "Nous contacter" du tiroir vers une ancre qui ouvre * une modale) : la modale doit passer au-dessus, jamais l'inverse. */ /* ================================================================= STICKY-ACTIONS MOBILE/TABLETTE — barre horizontale fixe en bas (resources/views/components/sticky-actions.blade.php, lot mobile M1) ----------------------------------------------------------------- Desktop (>1024px) : aucune regle ici, colonne verticale a droite strictement inchangee (position:fixed;right:0;top:50%, inline). Sous 1024px : le conteneur .biome-sticky-actions passe en barre horizontale fixe en bas de l'ecran (position:fixed;bottom:0;left:0; right:0), les items s'alignent en ligne (flex-direction:row) et se partagent la largeur a parts egales (flex:1). Seuls 2 items par variante restent visibles (voir .biome-masquer-tablette-mobile pose sur les items non retenus, directement dans sticky-actions.blade.php) : le troisieme/quatrieme etant masque, la barre affiche naturellement 2 blocs cote a cote. Cibles tactiles >=44px (padding vertical only, la largeur s'adapte a 50% de l'ecran). Z-INDEX choisi : 45 (entre le sticky-actions desktop a 40 et le header sticky a 50) : la barre basse doit rester visible en permanence au-dessus du contenu de page, mais passer SOUS le header (rare chevauchement possible en tres petite hauteur d'ecran) et surtout SOUS le tiroir menu burger (60) et les modales plein ecran (70, lot M4 a venir) : une modale ouverte doit toujours recouvrir entierement la barre basse, jamais l'inverse. ================================================================= */ @media (max-width: 1024px) { .biome-sticky-actions { position: fixed !important; right: 0 !important; left: 0 !important; bottom: 0 !important; top: auto !important; transform: none !important; width: 100% !important; height: auto !important; border-radius: 0 !important; display: flex !important; flex-direction: row !important; z-index: 45 !important; } .biome-sticky-actions > .biome-sticky__item { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; min-height: 44px !important; box-sizing: border-box !important; padding-left: 6px !important; padding-right: 6px !important; /* La bordure de separation desktop (border-top, entre blocs empiles verticalement) n'a plus de sens en ligne : on la retire. Une seule bordure de separation est reintroduite ci-dessous, uniquement entre les 2 items REELLEMENT visibles (peu importe leur position dans le DOM, .biome-masquer-tablette-mobile etant deja display:none). */ border-top: none !important; } /* * CORRECTIF DEBORDEMENT (verification navigateur reelle a 375px sur * /acheter et /contact, variante callback) : scrollWidth 528px au lieu de * 375px. Cause precise : min-width:0 manquait sur les items flex * ci-dessus (meme piege deja rencontre et corrige sur .biome-grille-N, * voir plus haut dans ce fichier) — un enfant flex a min-width:auto par * defaut, qui se calcule sur la largeur intrinseque du contenu le plus * large. Ici le contenu (icone SVG 26-28px de large + texte en 2 lignes * via
inline, deja pose cote Blade) n'etait pas la cause directe du * texte qui deborde, mais le refus du flex item de se comprimer sous * cette largeur intrinseque empechait les 2 items (variante callback : * "Etre rappele" + "Nous contacter") de se partager les 375px * disponibles (264px + 265px = 529px mesures). Ajout de min-width:0 (comme * pour .biome-grille-N) : les items peuvent desormais se comprimer a * parts egales (flex:1 1 0, deja pose) sur la largeur du viewport. * padding lateral reduit de 8px a 6px en complement (marge de securite * supplementaire sur les tres petits ecrans, ex 320px), box-sizing:border-box * ajoute pour que ce padding soit bien inclus dans la largeur flexible * (le style inline ne posait pas de box-sizing explicite sur ces items). */ .biome-sticky-actions > .biome-sticky__item > span { max-width: 100% !important; overflow-wrap: break-word !important; } /* Bordure de separation entre le 1er et le 2e item visibles : cible tout item visible precede par au moins un autre item visible (le selecteur general ~ combine a :not() ignore les items masques dans le calcul de "precede par"). */ .biome-sticky-actions > .biome-sticky__item:not(.biome-masquer-tablette-mobile) ~ .biome-sticky__item:not(.biome-masquer-tablette-mobile) { border-left: 1px solid rgba(255, 255, 255, .12) !important; } } /* * Compense la hauteur de la barre basse fixe pour qu'elle ne masque pas * le bas de page / le footer (regle d'or : ne pas cacher de contenu). * Hauteur mesuree de la barre en mobile/tablette (padding 20-22px + * icone 26-28px + texte 2 lignes ~13.5px : ~90px), padding-bottom de * securite pose sur le body (marge de confort incluse). Selecteur * body:has(.biome-sticky-actions) : seules les pages qui incluent * effectivement le composant recoivent ce padding (ex: page Bien, qui * n'a pas de sticky-actions dans la maquette, n'est pas impactee). * Support :has() : Chrome/Edge/Safari depuis 2023, Firefox >=121 ; sur * un navigateur plus ancien, seul ce confort de marge est perdu (aucune * regression fonctionnelle, la barre basse reste utilisable). * Confine a la media query : aucun effet en desktop (>1024px), ou le * sticky-actions garde sa position flottante a droite sans impact sur * le flux de la page. */ @media (max-width: 1024px) { body:has(.biome-sticky-actions) { padding-bottom: 100px; } } /* ================================================================= LOT MOBILE M3 — PAGE ACHETER (resources/views/pages/acheter.blade.php) ----------------------------------------------------------------- Decisions client validees (Laurent, 2026-07-03) : 1 bien par ligne, filtres en tiroir plein ecran, liste de provinces a cocher a la place du SVG, vue carte masquee. Desktop (>1024px) strictement inchange : aucune regle de cette section ne s'applique au-dela de 1024px. ================================================================= */ /* * BLOC NEWSLETTER (bas de page) — .biome-acheter-newsletter * ----------------------------------------------------------------- * Correctif debordement (verification navigateur 375px) : le cadre bleu * gardait son padding lateral desktop (48px) et le groupe champ+bouton * un min-width:320px inline, plus larges que la zone utile en mobile -> * la rangee debordait a 528px et etirait la barre sticky basse * (width:100% sur une page en scroll horizontal). Ici on reduit le * padding, on leve le min-width et on empile champ+bouton sous 480px. */ @media (max-width: 1024px) { .biome-acheter-newsletter { padding: 28px 20px !important; } .biome-acheter-newsletter-champs { min-width: 0 !important; max-width: 100% !important; width: 100% !important; } } @media (max-width: 480px) { .biome-acheter-newsletter-champs { flex-direction: column !important; } .biome-acheter-newsletter-champs > input, .biome-acheter-newsletter-champs > button { width: 100% !important; } } /* * TIROIR DE FILTRES — .biome-filtres-tiroir-mobile * ----------------------------------------------------------------- * Le
de filtres desktop (barre horizontale) est repris tel * quel (aucune duplication de DOM, un seul formulaire, un seul * submit) : cette classe le transforme en tiroir plein ecran sous * 1024px, ferme par defaut (display:none), ouvert/ferme en JS * (initTiroirFiltres() dans site.js, meme pattern que le tiroir du * menu burger). Le bouton "Filtrer" qui le declenche est un element * .biome-visible-mobile distinct, ajoute juste avant la section * FILTER BAR dans le Blade. */ @media (max-width: 1024px) { .biome-filtres-tiroir-mobile { display: none; position: fixed !important; inset: 0 !important; z-index: 60; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow-y: auto !important; padding: 20px 16px 24px !important; box-sizing: border-box; } .biome-filtres-tiroir-mobile.biome-filtres-tiroir-mobile--ouvert { display: block; } } /* * Z-INDEX du tiroir de filtres : 60, meme niveau que le tiroir du menu * burger (#biome-tiroir-menu, voir section HEADER MOBILE/TABLETTE plus * haut) : au-dessus du header sticky (50) et du sticky-actions mobile * (45), en dessous des modales de demande (70, modale-lead.blade.php) * qui doivent toujours passer au-dessus si un lien du tiroir de * filtres venait a ouvrir une modale (cas non present actuellement, * meme logique defensive que le tiroir du menu, voir plus haut). */ /* * PANNEAU DE COMMUNES — .biome-panneau-communes-mobile * ----------------------------------------------------------------- * (renomme depuis .biome-panneau-provinces-mobile lors du passage du * filtre de localisation par province a un filtre par commune, meme * comportement) * Desktop/tablette>1024px : aucune regle ici, le panneau reste gere * par le JS existant (data-toggle-carte-communes, display:none/grid). * Sous 1024px : le panneau est TOUJOURS visible dans le tiroir de * filtres (le SVG est masque via .biome-masquer-tablette-mobile pose * directement dans le Blade sur le , seule la liste de communes a * cocher, deja presente dans le DOM pour le desktop, reste utilisable). * On force donc son display en grid (ecrase le style inline * display:none pose par defaut cote serveur) et on passe en 1 colonne * (le SVG masque libere toute la largeur pour le texte/la liste). */ @media (max-width: 1024px) { .biome-panneau-communes-mobile { display: grid !important; grid-template-columns: 1fr !important; margin-top: 18px !important; } } /* ================================================================= LOT MOBILE M3 — PAGE BIEN (resources/views/pages/bien.blade.php) ----------------------------------------------------------------- Decisions client validees (Laurent, 2026-07-03) : galerie en scroll tactile, sidebar sous le contenu + barre prix sticky basse, toutes les grilles multi-colonnes en 1 colonne (2 en tablette selon les cas). Desktop (>1024px) strictement inchange. ================================================================= */ /* * MAIN GRID — .biome-bien-grille-principale * ----------------------------------------------------------------- * Ratio specifique (1fr 360px, pas dans le catalogue .biome-grille-N * standard qui applique des fractions egales). Passe en 1 colonne sous * 1024px : la sidebar (
en tete de * la boite, inline, inchange) devient sticky en haut de la modale pour * rester accessible pendant le scroll du formulaire (etape 2 du * formulaire terrain / candidature, ou formulaire long type "visite"). * Un fond blanc lui est ajoute (il n'en avait pas besoin en carte * centree sur fond semi-transparent) pour eviter que le contenu qui * defile ne passe visuellement "sous" le titre. */ @media (max-width: 1024px) { /* * L'overlay centre la carte en desktop avec un padding lateral (inline) * qui creait une marge de ~24px autour de la boite en mobile : on l'annule * pour un vrai plein ecran bord a bord (la boite passe a 100% du viewport, * pas 100% de la zone padee). */ .biome-modale-lead { padding: 0 !important; } .biome-modale-lead__boite { max-width: 100% !important; width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; box-shadow: none !important; overflow-y: auto !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; } /* * Bandeau titre+croix de chaque composant : premier enfant direct de * la boite en display:flex;justify-content:space-between (modale-lead, * modale-candidature) ou en display:flex;align-items:center (formulaire-terrain, * libelle d'etape + croix). On le rend sticky en haut, fond blanc, avec * un leger padding-bottom/border pour le detacher visuellement du * contenu qui defile en dessous. */ .biome-modale-lead__boite > div:first-child { position: sticky !important; top: 0 !important; background: #fff !important; z-index: 1 !important; padding-top: 4px !important; padding-bottom: 12px !important; margin-bottom: 12px !important; border-bottom: 1px solid #EEF1F5 !important; } /* Le formulaire (et son bouton de soumission en pied) doit pouvoir grandir librement dans la boite en colonne flex ci-dessus, pour que le bouton final reste atteignable en scrollant tout le contenu. */ .biome-modale-lead__boite > form { flex: 1 1 auto !important; } } /* * Z-INDEX des modales plein ecran : 70, deja pose en inline sur les 3 * composants (aucun changement necessaire ici) — au-dessus du tiroir * menu burger (60) et du tiroir de filtres Acheter (60), et de la barre * sticky-actions mobile (45) : une modale ouverte recouvre entierement * tout le reste de l'interface mobile, conforme aux choix des lots * precedents (voir docs/mobile-strategie.md section 11). * * BLOCAGE DU SCROLL BODY : deja gere par le JS existant (initModaleCandidature(), * initModalesLead() dans site.js, cette derniere couvrant aussi la * variante modale de formulaire-terrain via le meme attribut * [data-modale-lead]) : document.body.style.overflow = 'hidden' a * l'ouverture, restaure a la fermeture. Aucun JS ajoute pour ce lot. */ /* * BOUTONS HERO CONTACT — .biome-boutons-hero-wrap * ----------------------------------------------------------------- * 3 CTA du hero de Contact ("Etre rappele", "Trouver ma maison", * "Vendre mon terrain") en flex-wrap:nowrap (desktop, ligne unique) : * debordent des 1024px de large des la tablette. Passage en wrap pour * un retour a la ligne naturel, sans toucher au style des boutons * eux-memes (inline, inchange). */ @media (max-width: 1024px) { .biome-boutons-hero-wrap { flex-wrap: wrap !important; } } /* * GRILLE FORM CONTACT — .biome-contact-grille-form * ----------------------------------------------------------------- * Ratio specifique (1.4fr 1fr, formulaire adaptatif + bloc "Pourquoi * contacter Biome"), hors catalogue .biome-grille-N (fractions egales * uniquement) : 1 colonne sous 1024px, le bloc "Pourquoi contacter" * passe naturellement sous le formulaire dans le flux DOM. */ @media (max-width: 1024px) { .biome-contact-grille-form { grid-template-columns: 1fr !important; } .biome-contact-grille-form > * { min-width: 0 !important; } } /* * GRILLE CARTE CONTACT — .biome-contact-grille-carte * ----------------------------------------------------------------- * Ratio specifique (1.6fr 1fr, carte placeholder + bloc coordonnees) : * 1 colonne sous 1024px. */ @media (max-width: 1024px) { .biome-contact-grille-carte { grid-template-columns: 1fr !important; } .biome-contact-grille-carte > * { min-width: 0 !important; } } /* * GRILLE BANNER CONTACT — .biome-contact-grille-banner * ----------------------------------------------------------------- * Ratio specifique (38% 1fr, image + texte du bandeau final) : 1 * colonne sous 1024px. Le bloc image (premier enfant, height:100% dans * une grille align-items:stretch) recoit une hauteur fixe reduite en * complement (sinon il herite d'une hauteur de ligne de grille auto qui * peut rester tres haute une fois passe en 1 colonne). */ @media (max-width: 1024px) { .biome-contact-grille-banner { grid-template-columns: 1fr !important; } .biome-contact-grille-banner > div:first-child { height: 200px !important; min-height: 200px !important; } } /* * GRILLE FORM TERRAIN (section fond sombre) — .biome-terrain-grille-form * ----------------------------------------------------------------- * Ratio specifique (1.25fr 1fr, formulaire + bloc reassurance) : 1 * colonne sous 1024px. Padding interne du cadre reduit (44px desktop * trop large en mobile, meme logique que le correctif newsletter * Acheter, lot M3). */ @media (max-width: 1024px) { .biome-terrain-grille-form { grid-template-columns: 1fr !important; padding: 28px 20px !important; } .biome-terrain-grille-form > * { min-width: 0 !important; } } /* ================================================================= LOT MOBILE M5 — PAGES EMPLOI (Recrutement, Offres, Offre) (resources/views/pages/recrutement.blade.php, resources/views/pages/offres.blade.php, resources/views/pages/offre.blade.php) ----------------------------------------------------------------- Decisions client validees (Laurent, 2026-07-03). Desktop (>1024px) strictement inchange : aucune regle de cette section ne s'applique au-dela de 1024px. La modale de candidature (2 etapes) est deja rendue plein ecran par le lot M4 (.biome-modale-lead__boite), non retouchee ici. ================================================================= */ /* * GRILLE BODY OFFRES (liste) — .biome-offres-grille-body * ----------------------------------------------------------------- * Ratio specifique (1fr 320px, liste + sidebar candidature spontanee), * hors catalogue .biome-grille-N (fractions egales uniquement) : 1 * colonne sous 1024px. La sidebar (second enfant direct) se retrouve * naturellement sous la liste dans le flux DOM ; son position:sticky * est desactive via .biome-desactiver-sticky-mobile (catalogue * existant, deja pose sur le