/** * Reloge - panneau de choix du lieu. * * Rien ici n'est decoratif : la hierarchie visuelle sert a repondre en un coup d'oeil aux trois * questions du visiteur. Ou suis-je (le fil d'ariane), qu'ai-je deja choisi (les jetons), et ou * y a-t-il des logements (le compte, aligne a droite, lisible en colonne). * * Les couleurs passent par les variables du theme quand il en fournit, avec une valeur de repli * a chaque fois : une feuille de style d'extension ne doit pas dependre d'un theme precis. */ .reloge-ou { --reloge-ou-bord: var(--theme-border-color, #d8dbe0); --reloge-ou-accent: var(--theme-palette-color-1, #1c6758); --reloge-ou-doux: var(--theme-palette-color-7, #f4f6f8); position: relative; /* AUCUNE LARGEUR MINIMALE ICI. Elle valait 15rem, et c'est ce qui faisait chevaucher le champ « Arrivée » : la case de la barre a le droit de retrecir (min-width: 0), mais la boite qu'elle contient refusait de suivre et depassait par la droite. Une case de flex et son contenu doivent retrecir ensemble, sinon le contenu deborde sur le voisin au lieu de provoquer le retour a la ligne attendu. La largeur utile est declaree une seule fois, sur la case, dans reloge-front.css. */ min-width: 0; width: 100%; } /* Le declencheur : ce que l'on voit quand le panneau est ferme. Il porte la valeur, pas le libelle : celui-ci est pose par la barre au-dessus, comme pour « Arrivée » ou « Départ ». Ses mesures reprennent celles d'un champ de saisie de la barre, sinon la ligne se decale d'un ou deux pixels et cela se voit. */ .reloge-ou__declencheur { display: flex; align-items: center; padding: .6rem .7rem; border: 1px solid var(--reloge-ou-bord); border-radius: .35rem; cursor: pointer; background: #fff; list-style: none; /* MEME HAUTEUR QUE LES CHAMPS VOISINS, et prise du theme plutot que devinee. Blocksy impose « height: 40px » a ses champs de formulaire et expose cette mesure en variable. Une valeur ecrite ici a la main redeviendrait fausse au premier reglage change dans le personnalisateur, et le decalage (deux pixels, puis dix avec la marge des libelles) se voit tout de suite sur une rangee alignee. La valeur de repli sert aux themes qui ne declarent rien. */ box-sizing: border-box; min-height: var(--theme-button-min-height, 40px); line-height: normal; font: inherit; } .reloge-ou__declencheur::-webkit-details-marker { display: none; } .reloge-ou__resume { font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Le panneau. DANS LE FLUX par defaut : il pousse ce qui suit, il n'est jamais rogne, et il se comporte correctement sans JavaScript comme sur telephone. Il ne se met a flotter que lorsque le script est la pour le placer (classe posee par lui). */ .reloge-ou__panneau { margin-top: .4rem; padding: .85rem; border: 1px solid var(--reloge-ou-bord); border-radius: .5rem; background: #fff; } /* SORTI DU DOM, rattache au par le script, et place par lui. Deux raisons, mesurees sur l'accueil le 2026-09-07 : - trois blocs Stackable qui l'entourent portent « overflow: hidden » : en position absolue, le panneau etait coupe net au bord de la carte blanche du heros ; - « position: fixed » ne suffisait PAS a s'en echapper, parce que cette meme carte porte un « backdrop-filter » (l'effet verre depoli), lequel etablit un bloc conteneur pour les elements en position fixe. Le panneau restait prisonnier de la carte, et rogne par elle. Meme piege avec transform, filter, contain et perspective. Enfant du , plus rien ne le rogne ni ne le capture. Cette classe est posee par le script, jamais par le serveur : sans JavaScript le panneau reste dans le flux, ou il pousse ce qui suit sans jamais etre rogne. */ .reloge-ou__panneau--flottant { position: fixed; /* Au-dessus de la pile de Leaflet, qui monte jusqu'a 800 avec ses tuiles et ses controles, mais sous les fenetres modales du theme. */ z-index: 1200; width: 30rem; max-width: calc(100vw - 2rem); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .14); } /* Ce qui est deja choisi. */ .reloge-ou__choix { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .6rem; } .reloge-ou__vide { margin: 0; font-size: .85rem; opacity: .75; } .reloge-ou__jeton { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem; border: 1px solid var(--reloge-ou-accent); border-radius: 999px; background: var(--reloge-ou-doux); color: inherit; font-size: .85rem; text-decoration: none; cursor: pointer; } .reloge-ou__jeton-croix { font-size: 1.05rem; line-height: 1; opacity: .65; } .reloge-ou__jeton:hover .reloge-ou__jeton-croix { opacity: 1; } .reloge-ou__effacer { font-size: .8rem; text-decoration: underline; background: none; border: 0; padding: 0 .25rem; cursor: pointer; color: inherit; opacity: .75; } /* La saisie. * * `position: relative` est indispensable et n'est pas decoratif : c'est lui qui ancre la liste * de suggestions, posee juste dessous en `position: absolute`. Le retirer ferait remonter les * suggestions vers un ancetre positionne plus lointain, donc a cote du champ. * * Le champ lui-meme n'est plus habille ici (decision de Fred, 2026-09-09) : la largeur, les * marges internes et la bordure qui etaient imposees a `input[type="search"]` desservaient le * rendu au lieu de l'aider, en s'ecartant du style que le theme donne aux autres champs de la * barre. Il reprend donc l'apparence du theme, comme ses voisins. */ .reloge-ou__saisie { position: relative; } .reloge-ou__suggestions { position: absolute; z-index: 5; left: 0; right: 0; margin: .15rem 0 0; padding: 0; list-style: none; max-height: 15rem; overflow-y: auto; border: 1px solid var(--reloge-ou-bord); border-radius: .35rem; background: #fff; box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .1); } .reloge-ou__suggestion { display: flex; justify-content: space-between; gap: .5rem; width: 100%; padding: .4rem .6rem; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; } .reloge-ou__suggestion:hover, .reloge-ou__suggestion:focus { background: var(--reloge-ou-doux); } .reloge-ou__detail { font-size: .78rem; opacity: .65; white-space: nowrap; } /* Le fil d'ariane : France > region > departement. */ .reloge-ou__fil { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: .7rem 0 .35rem; font-size: .82rem; } .reloge-ou__fil a, .reloge-ou__fil button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; } .reloge-ou__fil strong { text-decoration: none; } /* La liste des territoires, en GRILLE et non en colonnes CSS. Les colonnes CSS (« columns ») remplissent en hauteur puis debordent LATERALEMENT des qu'on leur impose une hauteur maximale : le panneau se retrouvait avec une barre de defilement horizontale que personne n'avait demandee, en plus de la verticale (constate le 2026-09-07). Une grille reste dans sa largeur et ne defile que vers le bas. Le defilement vertical n'apparait qu'au-dela d'une certaine hauteur : avec deux regions, une barre de defilement sur une liste qui tient entierement a l'ecran est du bruit. */ /* UNE SEULE COLONNE. Deux colonnes tenaient plus de noms a l'ecran, mais elles ne tenaient pas debout : « Provence-Alpes-Côte d'Azur » se repliait sur deux lignes, sa rangee doublait de hauteur, et « Bretagne » se retrouvait flottant au milieu d'un vide, sans separation verticale entre les deux colonnes. Une liste de lieux se lit de haut en bas, une ligne par lieu, nom a gauche et nombre a droite : c'est la forme que prennent tous les selecteurs de ce genre, et c'est celle qui reste juste avec cent trente communes comme avec deux regions. La densite perdue est recuperee par le champ de recherche au-dessus, qui repond en deux lettres, et par le defilement. */ .reloge-ou__liste { display: block; margin: 0; padding: 0; list-style: none; max-height: 18rem; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border-top: 1px solid var(--reloge-ou-bord); } .reloge-ou__liste li { display: flex; align-items: stretch; border-bottom: 1px solid var(--reloge-ou-doux); } .reloge-ou__liste li:last-child { border-bottom: 0; } .reloge-ou__entree { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .5rem; border: 0; background: none; font: inherit; color: inherit; text-decoration: none; text-align: left; cursor: pointer; } .reloge-ou__entree:hover, .reloge-ou__entree:focus { background: var(--reloge-ou-doux); } .reloge-ou__entree.est-choisi { font-weight: 700; box-shadow: inset .18rem 0 0 var(--reloge-ou-accent); } /* min-width:0 sur le nom, flex-shrink:0 sur le compte : quand la place manque, c'est le NOM qui se replie sur deux lignes, jamais le nombre qui se fait pousser hors de la case. */ .reloge-ou__nom { min-width: 0; /* Sur toute la largeur du panneau, un nom de commune ou de region tient sur une ligne. Les rares exceptions sont coupees plutot que repliees : des rangees de hauteurs inegales cassent le parcours du regard dans une liste. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reloge-ou__compte { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: .82rem; opacity: .7; } .reloge-ou__descendre { display: flex; align-items: center; flex: 0 0 auto; padding: 0 .5rem; border: 0; border-left: 1px solid var(--reloge-ou-doux); background: none; font-size: 1.1rem; line-height: 1; color: inherit; text-decoration: none; cursor: pointer; opacity: .6; } .reloge-ou__descendre:hover { opacity: 1; } .reloge-ou__aucun { padding: .6rem .4rem; font-size: .85rem; opacity: .7; } /* Le rayon. Masque tant qu'aucune commune n'est choisie : autour d'une region, il ne veut rien dire. */ .reloge-ou__rayon { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; font-size: .88rem; } .reloge-ou__rayon.est-masque { display: none; } .reloge-ou__autour { border: 1px solid var(--reloge-ou-bord); border-radius: .3rem; background: none; padding: .25rem .5rem; font: inherit; font-size: .82rem; cursor: pointer; } .reloge-ou__note { margin: .6rem 0 .4rem; font-size: .78rem; opacity: .65; } /* Le bouton « Voir les logements » du panneau a ete retire : il doublait le « Rechercher » de la barre, a quelques centimetres de lui. Sa regle est conservee vide a dessein, pour que la raison du retrait soit lisible ici plutot que d'etre a redecouvrir. */