/* Fichier : annonces_gestion_modale.css Chemin : D:\speedclicV2\www\assets\css\annonces_gestion_modale.css Role : LA MODALE DE SAISIE D'UNE ANNONCE, et elle seule. Une feuille a part parce que la modale est un ecran a part (regle 32) : la feuille de la gestion ne doit pas devenir un fourre-tout (regle 40). « Saisie facile et aeree » (Ramon, 27/08) : de l'air entre les champs, des libelles au-dessus, aucune case collee a une autre. Ecrit le: 27/08/2026 */ .pgm-fond { position: fixed; inset: 0; z-index: 1250; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 26, 33, .5); } /* UN ELEMENT MARQUE hidden DOIT DISPARAITRE, MEME EN FLEX — piege paye trois fois. */ .pgm-fond[hidden] { display: none !important; } .pgm { width: min(980px, 96vw); max-height: 92vh; display: flex; flex-direction: column; border-radius: 6px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); } /* ═══ LES DEUX BOUTONS EN HAUT ═══ (demande de Ramon : le formulaire est long) */ .pgm-tete { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #e3e8ee; background: #f7f9fc; border-radius: 6px 6px 0 0; } /* LE NOM DU COMPTE PORTE, LE TITRE DE LA MODALE ACCOMPAGNE : deux informations de meme graisse se liraient comme une seule phrase. */ .pgm-nom { margin: 0; font-size: 15px; color: #1b2733; display: flex; align-items: baseline; gap: 10px; } /* ═══ L'IDENTIFIANT DE L'ANNONCE, EN TETE DE BARRE ═══ (27/08/2026) Ramon : « je veux le ID de l'annonce AVANT le pro et le titre ». IL S'EFFACE QUAND IL N'EXISTE PAS. Une annonce en cours de creation n'a pas encore de numero, et .pgm-nom est un conteneur flex : une case vide y garderait quand meme son ecart, et la barre commencerait par un blanc de dix pixels dont personne ne saurait d'ou il vient. display:none la retire de la rangee, ecart compris. PAS DE SEPARATEUR DESSINE : l'ecart et les graisses suffisent a distinguer les trois. Un tiret en dur serait un caractere de plus a effacer le jour ou l'un des trois manque — et il manque, regulierement. */ .pgm-id { font-weight: 700; color: #1c5fbe; white-space: nowrap; } .pgm-id:empty { display: none; } .pgm-qui { font-weight: 700; } .pgm-quoi { color: #6a7683; font-weight: 400; font-size: 13px; } .pgm-tete-btns { display: flex; gap: 8px; } /* ═══ LES BOUTONS DU MODULE, POUR LES DEUX ECRANS ═══ (27/08/2026) Ils vivaient dans annonces_gestion.css, servie sur le SEUL ecran de gestion. Or la fiche visiteur porte les memes classes — c'est tout le principe de ce chantier : la meme disposition, donc les memes classes. Son bouton « Fermer » sortait en bouton gris du navigateur, et la boite de confirmation du signalement aurait fait de meme avec son « Confirmer » vert. Cette feuille-ci est servie sur les deux ecrans : c'est donc ici que la famille doit vivre, et a un seul endroit (regle 19). TROISIEME FOIS AUJOURD'HUI QU'UN LIBELLE OU UN STYLE MANQUE PARCE QU'IL AVAIT ETE ECRIT LA OU IL EST NE, et non la ou il est LU. */ /* LA FAMILLE .pg-btn A DEMENAGE UNE SECONDE FOIS — assets/css/css_pg_boutons.css (31/08/2026). Elle vivait ici depuis le 27/08, dans la feuille servie sur les quatre ecrans des annonces, et c'etait juste tant que seuls ces quatre-la s'en servaient. L'espace perso en a besoin a son tour pour son bouton « Mes Favoris » : servir toute cette feuille la-bas y aurait porte les regles des modales des annonces, et les recopier aurait fait deux dessins pour un meme bouton — celui qui divergerait au premier ajustement (regle 19). La famille part donc dans SA feuille, servie partout ou elle sert. C'est exactement la lecon du 27/08, appliquee une fois de plus. */ /* ═══ LES DEUX ONGLETS ═══ (28/08/2026) Ramon : « en gestion les deux lignes sont identiques, sauf que Gestion est activé (bleu) et Messages dans un bouton blanc ; lorsque Messages est activé, Gestion passe dans un cadre blanc ». L'ACTIF N'EST PAS UN LIEN : on ne propose pas d'aller là où l'on est déjà. C'est donc un , et il porte aria-current — la couleur seule ne dit rien à qui ne la voit pas. L'INACTIF EST UN LIEN : il se copie, s'ouvre dans un onglet, et marche sans script. */ /* ═══ LES NOMBRES SUR UNE LIGNE ═══ (28/08/2026) La maquette de Ramon : gratuites, pack et validite a gauche, actives et diffusees poussees a droite. `margin-left:auto` sur le premier des deux fait le trou — pas une largeur fixe, qui aurait menti des que « Petites Annonces Gratuites » sera traduit en allemand. */ .pg-chiffres-ligne { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; /* PAS width:100% — c'est LUI qui poussait les nombres sur une ligne a eux seuls et laissait le pseudo tout seul au-dessus. `flex:1 1 auto` les fait tenir SUR la meme ligne que le pseudo, et le haut de page retrouve les TROIS lignes de la maquette de Ramon au lieu de quatre. */ flex: 1 1 auto; min-width: 0; } /* PLUS DE `margin-left:auto` SUR LES DEUX COMPTEURS (28/08/2026). Ramon : « ils sont perdus dans l'espace ». Sur sa maquette la barre fait 830 px et les pousser a droite les posait a cote des autres ; sur un ecran de 1200, la meme regle les envoyait a quatre cents pixels de tout, seuls dans un coin. Une mise en page reglee sur une largeur ment des qu'on change d'ecran : ils suivent maintenant les autres nombres, au meme ecart. L'ECART ENTRE LES DEUX GROUPES RESTE, LUI : 22 px separent deja chaque mesure, et « Actives » et « Diffusees » ne mesurent pas la meme chose que « Gratuites » et « Pack » — c'est le double ecart qui le dit, pas la position. */ .pg-chiffres-ligne .pg-stat-droite { margin-left: 12px; } /* L'ORDRE DE LA LIGNE : le pseudo, les nombres, puis le retour — alors que le gabarit ecrit le retour en deuxieme (il y est depuis le 27/08, et on ne deplace pas un bloc pour une question de couleur d'affichage). `order` range ce que le HTML n'a pas a savoir. */ .pg-haut .pg-qui { order: 1; flex: 0 0 auto; } .pg-haut .pg-chiffres { order: 2; } .pg-haut .pg-retour { order: 3; } .pg-onglets { margin-top: 0; } .pg-onglet { text-decoration: none; } .pg-onglet-actif { background: #1c5fbe; border-color: #1c5fbe; color: #fff; cursor: default; } .pg-onglet-actif:hover { background: #1c5fbe; border-color: #1c5fbe; } /* ═══ LES CARACTERISTIQUES DE LA RUBRIQUE ═══ (01/09/2026) Elles vivent dans la colonne d'options, a droite de la saisie. Serrees, parce que l'immobilier en compte neuf et l'automobile onze : espacees comme les champs principaux, elles feraient defiler la modale. LES CASES A COCHER SE SUIVENT EN LIGNE et reviennent a la ligne toutes seules : huit equipements de voiture empiles verticalement, c'est une colonne interminable pour une information qui se lit d'un coup d'oeil. */ .pgm-attrs { display: flex; flex-direction: column; gap: 6px; } .pgm-attr { display: flex; flex-direction: column; gap: 2px; } .pgm-attr .pa-lbl { margin: 0; } .pgm-attr small { color: #8a949e; font-weight: 400; } /* L'ETOILE DE L'OBLIGATOIRE EST ROUGE ET DISCRETE : elle previent, elle n'accuse pas. */ .pgm-attr-oblig { color: #c62c20; } .pgm-attr-cases { display: flex; flex-wrap: wrap; gap: 2px 10px; } .pgm-attr-case { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #1b2733; white-space: nowrap; cursor: pointer; } .pgm-attr-case input { margin: 0; } /* ═══ PREMIUM ET TOP10 ═══ (01/09/2026) DEUX BOUTONS ET DEUX FILTRES A LA FOIS. Ils portent la forme d'un onglet — Ramon les a demandes « comme Messages » — mais pas sa couleur d'onglet actif : etre SUR l'ecran des messages et FILTRER sur Premium ne sont pas le meme etat, et deux etats de meme couleur se confondent. L'onglet courant reste plein et bleu ; le filtre pose s'encadre. */ .pg-niveau { display: inline-flex; align-items: baseline; gap: 4px; text-decoration: none; white-space: nowrap; } .pg-niveau b { color: #1c5fbe; } .pg-niveau-actif { background: #eef4fd; border-color: #1c5fbe; color: #1b2733; box-shadow: inset 0 0 0 1px #1c5fbe; } .pg-niveau-actif b { color: #14458c; } /* LES DEUX BOUTONS DE LA MODALE, devant « Enregistrer ». Eteints tant que l'annonce ne les porte pas, allumes des qu'elle est qualifiee : le bouton EST l'etat, il n'y a pas de coche a cote qui pourrait dire le contraire. */ .pgm-niveau { white-space: nowrap; } .pgm-niveau-actif { background: #1c5fbe; border-color: #1c5fbe; color: #fff; } .pgm-niveau-actif:hover { background: #14458c; border-color: #14458c; } /* ═══ LES DEUX FILTRES ═══ Ils ne sont pas des boutons : ce sont deux nombres qu'on peut suivre. Un bouton promet une action, un compteur cliquable promet un tri — et c'est bien un tri. */ .pg-filtre { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; color: #55606d; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; } .pg-filtre b { color: #1c5fbe; font-size: 13px; } .pg-filtre:hover { background: #f2f7fd; border-color: #cfd6dd; } .pg-filtre-actif { background: #eef4fd; border-color: #1c5fbe; color: #1b2733; } /* LA DATE D'EFFACEMENT ET SON « ? » — une mesure, pas une commande : elle ne se clique pas. Seul le point d'interrogation répond, et il ne fait qu'expliquer. */ .pg-efface { display: inline-flex; align-items: baseline; gap: 6px; margin-left: auto; } .pg-aide { border: 1px solid #cfd6dd; border-radius: 3px; background: #f4f1c9; color: #55606d; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; cursor: help; } .pg-aide:hover { border-color: #1c5fbe; } /* LA GARDE VIT COLLÉE À LA RÈGLE QUI LA REND NÉCESSAIRE (28/08/2026). `display:flex` l'emporte sur le `display:none` implicite de l'attribut `hidden` : un .pgm-corps marqué hidden restait AFFICHÉ. C'est mot pour mot le défaut payé le 14/08 sur .ep-modale-pied, et je l'ai refait le 28 en donnant cette classe à la seconde face de la fiche — les deux faces se sont empilées, sans que personne ait cliqué. Écrite ici, sous la règle fautive, elle protège TOUS ceux qui portent la classe. */ .pgm-corps[hidden] { display: none !important; } .pgm-corps { flex: 1 1 auto; display: flex; gap: 20px; min-height: 0; padding: 14px 16px 6px; overflow: auto; } .pgm-gauche { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* DE L'AIR : chaque champ respire, et le libelle ne colle pas a la case d'au-dessus. */ .pgm-gauche .pa-lbl { margin-top: 12px; } /* ═══ LA MAQUETTE DE RAMON ═══ (27/08/2026) « Référence et titre alignés en 1re ligne. [...] Prix de l'annonce à droite de la photo, Désignation et enfin carrousel photo. » LA REFERENCE EST COURTE, LE TITRE EST LONG : une reference tient en dix signes, un titre en cent vingt. Deux colonnes egales auraient donne une reference qui baille et un titre a l'etroit — c'est la LONGUEUR ATTENDUE qui decide de la largeur. */ .pgm-l1 { display: flex; gap: 16px; align-items: flex-end; } .pgm-champ-ref { flex: 0 0 230px; min-width: 0; } .pgm-champ-titre { flex: 1 1 auto; min-width: 0; } .pgm-ligne2 { display: flex; gap: 16px; align-items: flex-end; } .pgm-ligne2 > .pgm-champ { flex: 1 1 0; min-width: 0; } /* ═══ LA GRANDE PHOTO, ET CE QUI SE TIENT A SA DROITE ═══ Elle EST la premiere du carrousel, montree en grand — pas une copie. Elle garde son cadre meme vide : une annonce sans photo ne doit pas faire remonter le prix et la designation de deux cents pixels, sinon l'ecran saute d'une annonce a l'autre. LE RAPPORT EST FIXE (4/3) : c'est celui qui deforme le moins les photos d'objets, et un rapport fixe est ce qui permet a un carrousel de ne pas sauter d'une image a l'autre — la meme raison que les neuf photos de l'annuaire. */ .pgm-l3 { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; } /* DEUX CLASSES, ET C'EST DELIBERE : .pgm-case pose 118x90, et elle est declaree plus bas dans cette meme feuille — a specificite egale, c'est la derniere qui gagne. Mesure du 27/08 : la grande image sortait a la taille d'une vignette. */ .pgm-case.pgm-grande { flex: 0 0 340px; width: 340px; height: auto; aspect-ratio: 4 / 3; } .pgm-case.pgm-grande .pgm-case-nom { font-size: 22px; } .pgm-cote { flex: 1 1 auto; min-width: 0; } /* SUR LA COLONNE DE DROITE, le premier libelle n'a pas a redescendre : il est deja en haut de sa colonne. */ .pgm-gauche .pgm-cote .pa-lbl:first-child { margin-top: 0; } .pgm-texte { resize: vertical; min-height: 130px; font: inherit; line-height: 1.45; } .pgm-reste { margin-top: 3px; color: #96a0aa; font-size: 11px; text-align: right; } .pgm-aide { margin-top: 3px; color: #96a0aa; font-size: 11px; } /* LE MONTANT ET SA DEVISE, COLLES (27/08/2026) Ramon : « monnaie alignee avec tarif serait mieux ». La devise etait un troisieme element de la rangee, donc renvoyee a l'autre bout de la modale — elle flottait a cote de rien. Elle est maintenant contre le champ, sur sa ligne de base. ET LE MONTANT EST ALIGNE A DROITE : un prix se lit par sa fin, on compare des unites avec des unites. C'est la regle de toutes les colonnes de chiffres. */ .pgm-montant { display: flex; align-items: baseline; gap: 8px; } .pgm-prix-champ { text-align: right; } .pgm-devise { color: #55606d; font-weight: 700; white-space: nowrap; } /* ═══ LA ZONE D'OPTIONS ═══ — elle porte desormais les caracteristiques de la rubrique (02/09/2026) : ce n'est plus un cadre en attente. La largeur reste FIXE a 260 px sur les deux ecrans, gestion et fiche, pour que l'annonceur voie ce que le visiteur verra. */ .pgm-options { flex: 0 0 260px; padding: 10px 12px; border: 1px dashed #cfd6dd; border-radius: 4px; background: #fbfcfe; } .pgm-options .pa-lbl { margin-top: 0; } .pgm-bientot { margin-top: 8px; color: #96a0aa; font-style: italic; } /* ═══ LES PHOTOS ═══ */ .pgm-photos { flex: 0 0 auto; padding: 6px 16px 14px; border-top: 1px solid #eef2f6; } .pgm-photos .pa-lbl { margin-top: 0; } /* LES EMPLACEMENTS DEFILENT HORIZONTALEMENT : dix cases ne tiennent pas sur une ligne d'ecran, et les empiler pousserait les boutons du haut hors de vue. */ /* LES EMPLACEMENTS PASSENT A LA LIGNE : dix cases sur une seule rangee obligeaient a pousser une barre de defilement pour voir la dixieme. Un pro qui depose dix photos doit les voir toutes d'un coup. */ .pgm-cases { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; } .pgm-case { position: relative; flex: 0 0 118px; height: 90px; display: flex; align-items: center; justify-content: center; border: 1px solid #cfd6dd; border-radius: 4px; background: #f4f1ea; color: #8b8377; cursor: pointer; overflow: hidden; } .pgm-case:hover { border-color: #1c5fbe; } /* ═══ UNE CASE QUI PORTE SA PHOTO ═══ (27/08/2026) Ramon : « quand on clique sur une photo pour ajout, c'est comme pour l'annuaire, photo et Texte au survol ». C'est mot pour mot .epa-photo-pleine : l'image en FOND cadree en « cover », le trait qui devient plein parce que la place n'est plus a remplir, le numero et la croix qui s'effacent puis reviennent au survol sous un voile blanc — sans quoi on ne peut plus REMPLACER une photo sans la deviner. */ .pgm-case.pgm-pleine { background-size: cover; background-position: center; border-style: solid; border-color: #cfd6dd; } .pgm-case.pgm-pleine .pgm-case-nom { opacity: 0; transition: opacity .12s; } .pgm-case.pgm-pleine:hover .pgm-case-nom { opacity: 1; } .pgm-case.pgm-pleine:hover { box-shadow: inset 0 0 0 999px rgba(255,255,255,.72); } /* PLUS D'EMPLACEMENT FERME (27/08/2026) : les dix cases se cliquent des la premiere seconde. La regle grisee et son avis « enregistrez d'abord » ont ete retires avec le detour qu'ils servaient a expliquer. */ .pgm-case-nom { font-size: 12px; font-weight: 700; } /* LA CROIX DANS LA CASE A DISPARU LE 27/08 : le retrait vit dans la boite de la photo, avec « Je retire cette photo » — un bouton qui DIT ce qu'il fait, au lieu d'une croix qu'il fallait deviner. */ /* ═══ LE MESSAGE ═══ Un refus se voit, et il dit quoi faire. Pas d'alert() (regle 31). */ .pgm-msg { margin: 0 16px 14px; padding: 8px 12px; border-radius: 4px; background: #fdecea; color: #8c2118; font-weight: 700; } .pgm-msg.pgm-msg-ok { background: #eaf6ee; color: #1f7a3d; } @media (max-width: 860px) { .pgm-corps { flex-direction: column; } .pgm-options { flex: 0 0 auto; } .pgm-ligne2 { flex-direction: column; align-items: stretch; gap: 0; } } /* ═══ L'ONGLET « MES FAVORIS » PORTE SON COEUR ═══ (31/08/2026) Ramon : « une icone Mes Favoris entre Gestion des Annonces et Messages ». C'est bien une ICONE et un mot : l'image seule ne se lit pas quand on ne l'a jamais vue, le mot seul ne se repere pas d'un coup d'oeil dans une rangee de trois. ELLE EST PETITE ET ALIGNEE SUR LE TEXTE — 14 px, pas 20 : l'onglet ne doit pas grandir, sinon les trois ne sont plus de la meme hauteur et la barre se met a onduler. */ /* .pg-onglet-img A SUIVI dans css_pg_boutons.css (31/08/2026) : le coeur voyage avec le bouton qui le porte. Les separer aurait donne un onglet habille et une icone nue le jour ou l'une des deux feuilles manque. */ /* ═══ LA CORBEILLE ═══ ELLE N'EST PAS UN FILTRE, ELLE AGIT — d'ou le bouton et non le compteur cliquable. Elle se range apres les trois filtres et AVANT la date d'effacement, qui pousse toujours a droite (margin-left:auto) : les deux parlent d'effacement, l'une l'annonce, l'autre le fait. */ .pg-corbeille { padding: 3px 8px; font-size: 13px; line-height: 1.2; } .pg-corbeille[disabled] { opacity: .45; cursor: default; } /* ═══════════════════════════════════════════════════════════════════════════ LES CARACTERISTIQUES, DANS LEUR PROPRE ECRAN (02/09/2026) Ramon : « ajouter un bouton dans la barre de creation de l'annonce, en cliquant, nouvelle modale qui presente tous les champs specifiques ». ELLE PASSE AU-DESSUS DE LA MODALE D'ANNONCE, comme celle d'une photo, et au-dessous d'elle : on peut ouvrir une photo depuis le formulaire, jamais depuis les caracteristiques. DEUX COLONNES DES QUE LA PLACE EXISTE. L'immobilier compte 51 champs chez le concurrent : sur une seule colonne, le vendeur defile trois ecrans pour trouver le bouton. La grille tombe a une colonne sous 720 px, ou deux colonnes donneraient des champs trop etroits pour etre lus. ═════════════════════════════════════════════════════════════════════════ */ .pgc-fond { position: fixed; inset: 0; z-index: 1350; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 26, 33, .5); } /* MEME PIEGE, MEME PAROLE : hidden doit gagner sur display:flex (regles 36/37). */ .pgc-fond[hidden] { display: none !important; } .pgc { /* ELLE S'ELARGIT DE 30 % (02/09/2026). Ramon : « tu agrandis la largeur de la modale des options de 30 % ». 860 -> 1118 px. Le `min()` reste : sur un ecran plus etroit que la demande, c'est l'ecran qui commande, pas le chiffre. */ width: min(1118px, 96vw); max-height: 88vh; display: flex; flex-direction: column; border-radius: 6px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); } .pgc-tete { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #e3e8ee; background: #f7f9fc; border-radius: 6px 6px 0 0; } .pgc-titre { margin: 0; font-size: 15px; color: #1b2733; font-weight: 700; } .pgc-aide { padding: 10px 16px 0; color: #6a7683; font-size: 13px; } /* LA ZONE DES CHAMPS DEFILE, PAS LA TETE : le bouton de validation doit rester sous la souris quel que soit le nombre de champs. */ .pgc .pgm-attrs { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 16px; display: grid; /* TROIS COLONNES (02/09/2026). Ramon : « tu devrais pouvoir caser une troisieme colonne d'options pour limiter le nombre de lignes ». Avec 1118 px de large et des champs raccourcis d'un quart, les trois tiennent sans serrer. */ grid-template-columns: 1fr 1fr 1fr; gap: 10px 20px; align-content: start; } /* ON REDESCEND PAR PALIERS, PAS D'UN COUP : trois colonnes sur 290 px chacune se lisent encore ; sous 980 px de fenetre la modale ne fait plus que 96vw et il en reste deux ; sous 720, une seule. Un ecran qui passerait de trois a une casserait la lecture. */ @media (max-width: 980px) { .pgc .pgm-attrs { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .pgc .pgm-attrs { grid-template-columns: 1fr; } } /* UN CHOIX MULTIPLE PREND LA LARGEUR : ses cases se lisent en rangee, et coupees en deux colonnes elles se liraient comme deux questions. UNE COCHE SEULE, ELLE, RESTE DANS SA COLONNE. (02/09/2026) Depuis ce jour un booleen s'ecrit avec la meme mecanique que les cases d'un groupe — son libelle est DANS la case, il n'y en a plus au-dessus. Sans ce :not(), il heriterait aussi de la pleine largeur et « Ascenseur » traverserait la modale : la disposition est fixe, ce n'est pas au dessin de bouger parce qu'on a change une facon d'ecrire. */ .pgc .pgm-attr:has(.pgm-attr-cases):not(.pgm-attr-seule) { grid-column: 1 / -1; } /* ET ELLE SE POSE A LA HAUTEUR DU CHAMP D'A COTE, pas de son libelle : la case descend au bas de sa cellule, la ou le voisin porte son RESTE, REPLIE : c'est lui qui porte la valeur et qui part a l'envoi ; la reglette n'est qu'un habillage. Il garde son focus clavier, donc l'echelle reste atteignable sans souris. */ .pgm-ech-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .pgm-ech { position: relative; } /* LA BARRE A UNE HAUTEUR FIXE, ET C'EST TOUT L'OBJET. (02/09/2026) Ramon : « les deux selections ne sont pas uniformes en taille, la premiere barre semble plus grosse ». Elle l'etait, et MESURE A L'APPUI : 19 px a vide, 26 px des qu'une lettre est choisie. La lettre choisie grandissait en HAUTEUR (padding et police) et `align-items: stretch` remontait toute la rangee a sa taille — une echelle renseignee devenait donc plus epaisse que sa voisine vide, pour cette seule raison. LA HAUTEUR EST DESORMAIS POSEE SUR LA BARRE, et la lettre choisie ne grandit plus qu'en LARGEUR et en encre. Les deux reglettes font la meme taille, remplies ou non. */ .pgm-ech-barre { display: flex; gap: 2px; align-items: stretch; height: 22px; } .pgm-l { flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: 2px; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; color: #2b3640; opacity: .45; cursor: pointer; /* Centree dans une hauteur fixe : la police peut changer sans pousser la barre. */ display: flex; align-items: center; justify-content: center; } .pgm-l:hover { opacity: .8; } /* CELLE QUI EST CHOISIE SORT DU RANG — en largeur et en encre, jamais en hauteur. */ .pgm-l.pgm-on { flex: 0 0 30px; font-size: 14px; opacity: 1; color: #fff; } .pgm-ech-select:focus + .pgm-ech-barre { outline: 2px solid #1c5fbe; outline-offset: 2px; } /* ═══ LES TROIS COLONNES DE FAMILLES ═══ (02/09/2026) Ramon : « 1ere colonne les informations de dimensions, 2eme les informations financieres, 3eme les informations techniques et autres. » TROIS BOITES ET NON UNE GRILLE : une grille se remplit ligne par ligne et melangerait les familles des le premier ecart de taille. Chaque colonne empile SES champs, et les trois colonnes ont la meme largeur. ELLES VIVENT DANS #pgm-attrs, QUI RESTE LA GRILLE : le bloc .pgm-cols prend la largeur entiere, et les rangees d'icones se posent dessous, comme avant. */ .pgc .pgm-cols { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 20px; align-items: start; } .pgm-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* Une coche seule n'a plus a se caler sur la cellule d'a cote : dans une colonne, elle suit simplement ce qui la precede. */ .pgm-col .pgm-attr-seule { justify-content: flex-start; } @media (max-width: 980px) { .pgc .pgm-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .pgc .pgm-cols { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ LA MODALE D'UNE PHOTO (27/08/2026) Ramon : « quand on ajoute une photo dans l'annuaire, idem ». La BOITE vient de css_espace_usager_modales.css (classes ep-modale-*), servie sur cette page depuis ce jour : c'est la meme, pas une copie. Ne restent ici que les regles du CORPS, reprises de css_espace_pro_annuaire.css a l'identique — meme graisse d'etiquette, meme gris d'aide, meme rouge de retrait. ELLE PASSE AU-DESSUS DE LA MODALE D'ANNONCE : elle s'ouvre depuis elle. ═════════════════════════════════════════════════════════════════════════ */ .pgp-fond { z-index: 1400; } .pgp-apercu { width: 100%; max-width: 320px; height: 200px; margin: 0 auto 10px; cursor: default; } .pgp-apercu:hover { border-color: #cfd6dd; } .pgp-choisir { display: inline-block; } /* LE SELECTEUR DE FICHIER EST CACHE, PAS ABSENT : c'est le