/* ===================================================================== Yafoye — grands écrans. V101.149. Tout le site a été construit en descendant depuis le mobile : chaque point de rupture est un `max-width`, et le bureau hérite de règles pensées pour un téléphone. Sur un écran de 1365 px et plus, cela donne un titre d'accueil qui repousse l'assistant sous la ligne de flottaison, des champs de saisie larges de sept cents pixels pour un numéro de téléphone, et de grandes zones vides sous le contenu. Ce fichier ne contient QUE des règles `min-width`. En dessous de 1024 px, aucune de ces lignes ne s'applique : le mobile ne peut pas être affecté. C'est délibéré — il fonctionne, on n'y touche pas. ===================================================================== */ @media (min-width: 1024px) { /* ---------- L'accueil ---------- `clamp(38px, 6vw, 72px)` atteint son maximum dès 1200 px de large. Le titre occupait alors quatre lignes et repoussait l'assistant — le cœur du produit — hors de l'écran. On plafonne à 54 px, et on resserre l'interlettrage, trop négatif aux grandes tailles. */ .hero h1, .home-hero h1 { font-size: clamp(38px, 3.6vw, 54px) !important; letter-spacing: -1.8px !important; max-width: 22ch; margin-left: auto; margin-right: auto; } /* ---------- L'échelle du texte ---------- V101.382. Tout le site est dimensionné pour un téléphone tenu à trente centimètres. Sur un écran de bureau, à soixante, les mêmes valeurs paraissent deux fois plus petites : le bouton « Publier un bien » était en 11 px, les choix du questionnaire en 12,5 px. Le contraste avec le titre — 54 px — accentuait la sensation : un grand titre au-dessus de commandes minuscules donne un écran mal assuré, comme si l'interface n'avait pas été prévue pour cette taille d'écran. Elle ne l'avait pas été. On ne touche à RIEN en dessous de 1024 px. Le mobile est le parcours principal de Yafoye, il fonctionne, et ces règles ne peuvent pas l'atteindre. Les valeurs suivent une échelle simple : 15 px pour le texte courant, 16 px pour ce qui se clique, 17 px pour ce qui appelle à l'action. En deçà de 15 px, une interface de bureau se lit avec effort — et un client qui plisse les yeux ne fait pas confiance. */ /* Les choix du questionnaire : c'est là que le client commence. */ .yq-option { min-height: 52px !important; padding: 13px 16px !important; font-size: 15px !important; border-radius: 13px !important; } .yq-choix { gap: 10px !important; } .yq-question, .yq-titre { font-size: 20px !important; } .yq-aide { font-size: 13.5px !important; } /* Le bouton qui lance la recherche — le geste que tout l'écran prépare. */ .yq-lancer { min-height: 58px !important; font-size: 17px !important; border-radius: 18px !important; } /* ---------- « Publier un bien » ---------- V101.383 : la barre de l'accueil disparaît sur grand écran. La V101.382 l'avait posée en superposition sur le hero. Résultat : elle passait derrière le titre, et le bouton devenait carrément invisible — pire que le défaut qu'elle corrigeait. Le bouton vit maintenant dans l'en-tête, au centre (voir yafoye-unified-chrome.css). Il y est visible sur TOUTES les pages, pas seulement l'accueil, et rien ne peut le recouvrir. La barre d'origine n'a plus lieu d'être ici — elle reste sur mobile, où l'en-tête n'a pas la place de l'accueillir. */ .yf-home-publish-bar { display: none !important; } /* ---------- L'accroche et le questionnaire ---------- V101.387. Le titre s'étalait sur quatre lignes et poussait le questionnaire sous la ligne de flottaison : on arrivait sur une phrase, et il fallait défiler pour trouver ce qu'on était venu faire. Le hero fait pourtant toute la hauteur de l'écran. Deux lignes suffisent, et la place gagnée revient au questionnaire — qui est le cœur du produit, pas le titre. */ .yf-value-prop { font-size: clamp(38px, 3.4vw, 52px) !important; max-width: 20ch !important; margin-bottom: clamp(24px, 3vh, 40px) !important; } /* Le hero occupait 100 % de la hauteur, ce qui repoussait tout le reste. On lui laisse la place qu'il lui faut, pas davantage. */ .hero { min-height: auto !important; padding-bottom: 40px; } .hero-inner { padding-top: clamp(28px, 5vh, 64px) !important; } /* Le questionnaire s'élargit : à 1180 px de page, une carte de 600 px laisse ses neuf catégories sur trois colonnes serrées, et le bouton de recherche passe sous le pli. */ .yf-conversation-search { max-width: 880px !important; margin: 0 auto !important; padding: 22px !important; } .yq-choix { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* ---------- La largeur du contenu ---------- V101.385. Le site est cadré à 1180 px. Sur un écran de 1365, cela laisse une centaine de pixels vides de chaque côté ; au-delà, la page devient une colonne étroite au milieu du vide, et tout paraît tassé alors que la place ne manque pas. 1180 px vient du mobile, où c'était un plafond confortable. Sur bureau, c'est un plancher. On laisse la page respirer jusqu'à 1440 px, avec des marges qui grandissent avec l'écran. */ .wrap, .yf-home-publish-bar { width: min(1440px, calc(100% - clamp(32px, 5vw, 88px))) !important; } /* La barre d'Explorer est en pleine largeur : elle suit l'écran, pas la colonne de contenu. Ses marges internes s'alignent malgré tout sur celles du contenu, sinon les onglets démarreraient avant les cartes qu'ils filtrent. */ .yf-explorer-controls { padding-left: clamp(16px, 3vw, 44px) !important; padding-right: clamp(16px, 3vw, 44px) !important; } /* ---------- La carte d'Explorer ---------- V101.392. Elle est en `position:sticky` avec `height:100%` — donc calée sur la hauteur de son conteneur, pas sur celle de l'écran. En descendant dans la liste, elle finissait par se décaler : les dernières annonces défilaient sans carte en face. On lui donne la hauteur visible réelle, moins l'en-tête et la barre de filtres qu'elle ne doit pas recouvrir. Elle reste alors en place du premier au dernier bien. */ /* La grille, la colonne de liste et la carte sont réglées dans la page elle-même, en dernier bloc — pour la raison expliquée ci-dessus. Les régler ici aussi donnerait deux sources pour une même valeur, dont une sans effet : c'est ainsi qu'on finit par corriger celle qui ne sert à rien. */ /* ---------- Les onglets d'Explorer ---------- V101.384. Les catégories étaient en 11 px, et descendaient à 10 px sur certaines largeurs. Les sous-onglets « Visite gratuite » et « Visite payante » en 10 px, hauts de 28 px. Ce sont pourtant les commandes les plus utilisées de la page : on choisit une catégorie avant même de regarder une annonce. Les rendre minuscules revient à cacher la première décision que le client doit prendre. Les cartes en dessous font 300 px de large avec des titres en 16 px : des onglets de 10 px au-dessus donnent une barre qui paraît désactivée. */ .yi-explorer-category-tabs button { min-height: 46px !important; padding: 0 20px !important; font-size: 14px !important; gap: 9px !important; } /* La barre entière respire : elle empilait trois rangées de commandes dans 18 px de hauteur de marge. Sur un écran, ce tassement se lit comme un manque de soin — c'est la première chose qu'on voit en arrivant sur Explorer. */ /* La barre est collée sous l'en-tête, qui est fixe : sans marge, les onglets touchent la barre bleue. Et sans marge basse, les cartes démarrent au ras des sous-onglets — deux blocs qui se touchent se lisent comme un seul. */ .yf-explorer-controls { padding-top: 22px !important; padding-bottom: 22px !important; row-gap: 16px !important; } /* LA VARIABLE EST LA CLÉ. Cette barre est en `position:fixed`, et le contenu qui la suit réserve exactement sa hauteur via `margin-top:var(--yf-explorer-controls-h)`. Elle valait 46 px — la hauteur d'une seule rangée serrée — et la barre débordait donc sur les cartes : d'où l'absence de marge visible, en haut comme en bas. Sa valeur est fixée plus haut, avec les onglets : les deux vont ensemble et se lisent mieux côte à côte. */ /* V101.390 — les catégories restent sur UNE ligne. La V101.387 les faisait passer à la ligne pour éviter le défilement. Mauvaise idée : les dernières catégories — Maisons en vente, Entrepôts, Lieux de cérémonie — se retrouvaient sur la rangée des sous-onglets de visite. Elles semblaient appartenir à cette section alors qu'elles filtrent une catégorie, et la barre devenait illisible. Un défilement horizontal se comprend : on voit que la liste continue. Un onglet rangé au mauvais endroit, non. `flex-basis:100%` reste : c'est lui qui garantit que la rangée de visite passe TOUJOURS en dessous, quelle que soit la place restante. */ .yi-explorer-category-tabs { gap: 10px !important; padding-bottom: 0 !important; flex: 0 0 100% !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; margin-bottom: 4px !important; } .yi-explorer-category-tabs::-webkit-scrollbar { display: none; } /* La hauteur réservée par la barre, la grille et la colonne de liste sont réglées DANS `explorer-annonces.html`, en dernier bloc de la page. Cette feuille est chargée au milieu du document : quinze blocs `