/*
Fichier : annonces.css
Chemin  : D:\speedclicV2\www\assets\css\annonces.css
Rôle    : L'ÉCRAN PUBLIC DES PETITES ANNONCES — sa seule feuille de style.
          Elle ne sert QUE cet écran (règles 37 à 40) : rien d'annuaire, rien d'espace
          pro, et surtout rien dans adminx.css.

LA DISPOSITION DE RAMON (26/08/2026)
          La colonne de gauche garde sa largeur ; la rangée haute — catégories puis
          rubriques — occupe le centre ET la droite ; sous elle, le flux et la colonne
          des pros se partagent ce qui reste.
          AUCUN NOMBRE DE CASES N'EST ÉCRIT ICI : les rangées s'enroulent. Le jour où une
          treizième catégorie arrive, rien ne casse — c'est exactement ce que Ramon
          cherchait en faisant courir la rangée sur toute la largeur.

PAS D'ASCENSEUR SUR LA PAGE, comme partout dans le projet : ce sont le flux et la colonne
          des pros qui défilent, chacun chez soi, et la rangée haute reste visible.
Créé   : 26/08/2026
*/

.pa-wrap {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    height: 100%;
    background: #fff;
    font-size: 12px;
    color: #2b3540;
}

/* ═══ COLONNE 1 : LES SÉLECTEURS ═══ */
.pa-select {
    flex: 0 0 210px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-right: 1px solid #e3e8ee;
    overflow: auto;
}
/* ═══ LE LOGO DE LA COLONNE ═══                                     (26/08/2026)
   Il coiffe le selecteur de departements et change avec la categorie. La hauteur est
   LIBRE et la largeur bornee : les logos d'epoque font environ 300 x 125, et les figer
   a une hauteur les ecraserait chacun differemment selon sa marge transparente. */
.pa-logo {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
    margin: 2px auto 8px auto;
}
.pa-lbl {
    margin-top: 6px;
    color: #55606d;
    font-size: 11px;
    font-weight: 700;
}
.pa-champ {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #cfd6dd;
    border-radius: 3px;
    background: #fff;
    font: inherit;
}
.pa-champ:hover { border-color: #b9c9dd; }
.pa-champ:focus { border-color: #1c5fbe; outline: none; }
.pa-prix { display: flex; flex-direction: column; gap: 2px; }
.pa-champ-court { width: 110px; }
.pa-btn {
    margin-top: 12px;
    padding: 6px 10px;
    border: 0;
    border-radius: 4px;
    background: #c62c20;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.pa-btn:hover { background: #a3231b; }

/* ═══ LE RESTE : LA RANGÉE HAUTE, PUIS DEUX COLONNES ═══ */
.pa-corps {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
/* LES RUBRIQUES SOUS LES CATEGORIES, ET NON A LEUR DROITE.        (02/09/2026)
   C'ETAIT LA UNE SEULE LIGNE, ET C'ETAIT LA FAUTE. Ce conteneur etait `display: flex`
   en RANGEE : les categories a gauche, les rubriques a sa droite. J'ai passe l'apres-midi
   a aligner les icones DANS chaque bloc sans voir que les deux blocs eux-memes etaient
   cote a cote — Ramon demandait « les rubriques SOUS les categories » et je repondais a
   cote, trois fois.
   `flex-direction: column` empile les deux rangees. La colonne de gauche de la seconde
   (le bloc fantome, de la largeur exacte des trois mots) fait alors ce pour quoi elle a
   ete posee : les rubriques commencent SOUS les categories, au meme pixel. */
.pa-haut {
    flex: 0 0 auto;
    border-bottom: 1px solid #e3e8ee;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ═══ TOUS / PARTICULIERS / PROFESSIONNELS ═══                     (01/09/2026)
   Ramon : « Avant le premier icone, il faudrait empilees trois lignes [...] souvent ils
   excluent les pros. C'est une option sur tous les sites d'annonces. »
   EMPILEES, PARCE QUE LA LARGEUR EST LA RESSOURCE RARE ICI : douze icones de 54 px
   remplissent deja la rangee, trois mots cote a cote en pousseraient deux hors du champ.
   Empiles, ils tiennent dans la hauteur qui existe deja et la rangee ne grandit pas.
   PAS DE CADRE AUTOUR DE CHAQUE MOT : ce sont trois etats d'un meme choix, pas trois
   boutons independants. Seul celui qui est actif se marque. */
/* IL FLOTTE, ET C'EST TOUT L'OBJET.                               (02/09/2026)
   Ramon : « ils doivent rester sur la premiere ligne d'icone et ne pas pousser les
   icones a droite. » Une colonne posee A COTE de la rangee decale TOUTES les lignes ;
   un bloc qui FLOTTE ne decale que celle qu'il occupe — les icones s'ecoulent a sa
   droite, puis la ligne suivante reprend tout a gauche, sous lui.
   IL DOIT RESTER PLUS COURT QU'UNE ICONE, sinon il mordrait sur la seconde ligne et on
   n'aurait rien gagne : trois lignes de 12 px tiennent dans les 76 px d'une tuile, et
   c'est pourquoi ils sont empiles et non cote a cote. */
.pa-vendeurs {
    /* PLUS DE FLOTTANT (02/09/2026, apres-midi). Un flottant court ne retient que la
       PREMIERE ligne : les trois dernieres icones repartaient cent pixels plus a gauche
       que les neuf du dessus. Ils sont maintenant la premiere colonne d'une rangee flex,
       et la grille d'icones est la seconde — un seul bord gauche pour toutes ses lignes. */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 2px 8px 2px 0;
    border-right: 1px solid #e3e8ee;
    margin: 0 8px 2px 0;
}
.pa-vendeur {
    display: block;
    padding: 1px 8px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #1b2733;
    font: inherit;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.pa-vendeur:hover { background: #eef4fd; }
.pa-vendeur.pa-on { background: #1c5fbe; color: #fff; }

/* LES CATÉGORIES — l'image à sa taille réelle (54 x 68), le nom dessous.
   Agrandir au-delà du fichier ne rend pas plus grand, seulement plus flou : c'est la
   leçon du logo de l'annuaire, le 25/08. */
/* DEUX BOITES COTE A COTE : les trois mots, puis la GRILLE des icones.  (02/09/2026)
   Ramon, capture a l'appui : « les icones de rubriques etaient tres bien alignees en
   deuxieme ligne. » Le flottant du matin ne pouvait pas tenir cette promesse — il
   n'ecarte le texte que sur sa propre hauteur, donc sur la premiere ligne seulement.
   ALIGN-ITEMS: FLEX-START pour que les trois mots restent en haut, a la hauteur de la
   premiere ligne d'icones, comme il l'a demande ce matin. */
.pa-cats {
    display: flex;
    align-items: flex-start;
    padding: 6px 8px;
}
/* LA GRILLE : un seul bord gauche pour toutes ses lignes, quelle que soit la largeur de
   la fenetre. min-width: 0 sans quoi un flex item refuse de retrecir sous son contenu et
   la grille deborderait au lieu de passer a la ligne. */
.pa-cats-grille {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
/* LA CASE FAIT LA TAILLE DE L'IMAGE, pas plus : le nom est dessiné DANS l'icône (mesuré
   le 26/08), il ne se réécrit pas dessous. Le <span> ne sert que de secours, pour une
   catégorie neuve dont l'icône n'aurait pas encore été déposée. */
.pa-cat {
    /* Ni flottante ni margee : c'est la grille qui espace, avec son `gap`. */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.pa-cat img { width: 54px; height: 68px; }
.pa-cat span {
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;
}
.pa-cat:hover { background: #f2f6fb; border-color: #cfd6dd; }
.pa-cat.pa-on  { background: #eaf1fb; border-color: #1c5fbe; }

/* ═══ LA SECONDE RANGEE : LE FANTOME, PUIS LES RUBRIQUES ═══        (02/09/2026)
   Ramon : « le premier bloc devrait contenir les selecteurs et les categories, et le
   deuxieme un bloc identique au selecteur mais vide, et les rubriques. Ainsi impossible
   que les rubriques passent en premiere ligne. »
   DEUX RANGEES INDEPENDANTES, chacune avec sa colonne de gauche : les rubriques ne
   peuvent plus remonter a cote des trois mots, et elles commencent exactement sous les
   categories. Le fond et le filet passent sur la RANGEE — le fantome doit etre dans la
   meme bande, sinon on verrait ou il commence. */
.pa-subs-rangee {
    display: flex;
    align-items: stretch;
    background: #fafbfd;
    border-top: 1px solid #eef2f6;
}
/* LE FANTOME MESURE CE QU'IL DOUBLE : memes classes, memes mots, encre retiree. Une
   largeur en pixels aurait menti des la premiere langue. Il garde son filet vertical,
   qui descend ainsi sur les deux rangees et fait tenir les deux colonnes ensemble. */
.pa-vendeurs-fantome { padding-top: 5px; padding-bottom: 5px; }
.pa-vendeurs-fantome .pa-vendeur { visibility: hidden; cursor: default; }

/* LES RUBRIQUES — un cadre, parce qu'un cadre annonce une place à remplir, et parce que
   c'est le dessin de la maquette. La rangée GARDE SA HAUTEUR même vide : une bande qui
   apparaît et disparaît ferait sauter tout l'écran d'un clic à l'autre. */
.pa-subs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 57px;
    padding: 5px 8px;
}
.pa-sub {
    display: block;
    padding: 2px;
    border: 1px solid #cfd6dd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.pa-sub img { display: block; width: 80px; height: 43px; }
.pa-sub:hover  { border-color: #1c5fbe; }
.pa-sub.pa-on  { border-color: #1c5fbe; box-shadow: inset 0 0 0 2px #1c5fbe; }

/* ═══ LE BAS : LE FLUX ET LES PROS ═══ */
.pa-bas {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
.pa-flux {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
    overflow: auto;
}
.pa-pro {
    flex: 0 0 260px;
    padding: 8px;
    border-left: 2px solid #c62c20;
    overflow: auto;
}
.pa-vide {
    margin: 12px 4px;
    color: #96a0aa;
    font-style: italic;
}

/* ═══ UNE LIGNE D'ANNONCE ═══                                     (26/08/2026)
   Le dessin de la maquette de Ramon : la vignette à gauche, le titre et le texte au
   milieu, le prix à droite. Rien n'est centré — on lit une liste, pas une affiche.

   LA VIGNETTE GARDE SA PLACE MÊME VIDE. Une annonce sans photo ne doit pas décaler
   toutes les autres : la colonne des titres resterait en dents de scie, et l'œil ne
   saurait plus où descendre. */
/* PLUS DE PHOTO, MOINS DE BLANC (26/08/2026).
   Ramon : « on reduit les espaces separant chaque rangee de petites annonces, mais
   surtout on agrandit les photos de 50% en largeur et hauteur ». Les deux vont
   ensemble : une vignette qui grandit sans que la rangee se resserre eloignerait les
   annonces les unes des autres au lieu de les rapprocher.
   LE BLANC VERTICAL SEUL EST REDUIT — 8 px deviennent 4 en haut et en bas, les 8 px
   lateraux restent : c'est la marge du texte contre le bord de la colonne, elle n'a
   rien a voir avec la distance entre deux annonces. */
.pa-ann {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 8px;
    border-bottom: 1px solid #eef2f6;
}
.pa-ann:hover { background: #fafbfd; }
/* 92 x 70 -> 138 x 105 : exactement la moitie en plus sur les deux cotes, donc le
   MEME cadrage. Changer une seule des deux mesures deformerait les photos, que le
   fond « cover » recadre sans les etirer. */
.pa-ann-vign {
    flex: 0 0 auto;
    width: 138px;
    height: 105px;
    border: 1px solid #cfd6dd;
    border-radius: 3px;
    background: #f4f7fa center / cover no-repeat;
}
.pa-ann-corps { flex: 1 1 auto; min-width: 0; }
.pa-ann-titre {
    margin: 0 0 2px;
    color: #1c5fbe;
    font-size: 13px;
    font-weight: 700;
}
.pa-ann-texte {
    margin: 0;
    color: #55606d;
    overflow-wrap: anywhere;
}
.pa-ann-lieu { margin: 3px 0 0; color: #96a0aa; font-size: 11px; }
/* LE PRIX NE SE COUPE PAS et ne passe pas à la ligne : c'est la première chose qu'on
   compare d'une annonce à l'autre. */
/* ═══ LE PRIX EST UNE COLONNE DE CHIFFRES ═══                      (27/08/2026)
   Ramon : « les decalages a droite ne sont pas esthetiques ». La cause n'etait pas
   l'alignement mais le DECOUPAGE : un prix d'un seul tenant cale a droite fait danser
   sa virgule d'une ligne a l'autre — 17 000,00 EUR et 90,00 EUR n'ont pas la meme
   longueur. Le nombre est cale a droite dans sa largeur, la devise a gauche dans la
   sienne : les virgules tombent sous les virgules et les EUR sous les EUR.
   MEMES CLASSES QUE LA GESTION (.pg-prix-n, .pg-prix-d) : c'est le meme prix, il n'y
   a aucune raison qu'il se presente autrement d'un ecran a l'autre. */
.pa-ann-prix {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-left: 8px;
    color: #c62c20;
    font-weight: 700;
    white-space: nowrap;
}
.pa-ann-prix .pg-prix-n { flex: 0 0 96px; text-align: right; font-variant-numeric: tabular-nums; }
.pa-ann-prix .pg-prix-d { flex: 0 0 42px; text-align: left; font-weight: 600; }
/* « Je n'ai pas pu chercher » ne se dit pas comme « il n'y a rien » (règle 13). */
.pa-ennui { color: #c62c20; font-style: normal; }

/* ═══ QUI EST DEVANT L'ÉCRAN ═══                                    (28/08/2026)
   Ramon : « le Pseudo suivi de sa qualité rend plus parlant que sa maison va centrer le
   rayon autour de la société ou du particulier ». La ligne appartient au bouton maison
   qui la suit : elle se colle à lui, sans marge basse, et c'est la marge haute du bouton
   qui les sépare des sélecteurs.
   ELLE VIT DANS annonces.css, servi sur LES DEUX écrans, et non dans la feuille de la
   gestion — c'est la leçon du 27/08 : un style sert là où il est LU, pas là où il est né.
   LE PSEUDO NE SE COUPE PAS EN DEUX : il tient sur une ligne et déborde en points de
   suspension, comme le nom de commune du bouton juste dessous. */
.pa-moi {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 10px 0 0 2px;
    font-size: 12px;
    line-height: 1.3;
    min-width: 0;
}
.pa-moi-nom {
    font-weight: 700;
    color: #1b2733;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* La qualité est une précision, pas un nom : elle se dit plus bas et plus petit. */
.pa-moi-qualite { flex: 0 0 auto; color: #6a7683; font-size: 11px; }

/* ═══ « CHEZ MOI » ═══                                              (26/08/2026)
   Une maison, un mot, et rien de plus. Le mot est indispensable : une maison seule ne
   dit pas « autour de moi », et c'est pourtant ce qu'elle fait pour un visiteur qui
   n'est pas connecte. */
.pa-maison {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    /* 3 px quand la ligne du pseudo la precede — ils forment un bloc — et 8 px sinon.
       La regle courte suffit : la ligne du pseudo porte sa propre marge haute. */
    margin: 3px 0 2px 0;
    padding: 4px 6px;
    border: 1px solid #cfd6dd;
    border-radius: 4px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    color: #1d2b36;
    text-align: left;
    cursor: pointer;
}
.pa-maison:hover { border-color: #1c5fbe; background: #f2f7fd; }
.pa-maison[disabled] { opacity: .55; cursor: default; }
.pa-maison img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
/* LE NOM PREND TOUT CE QUI RESTE ET S'Y CENTRE (26/08/2026, Ramon : « si tu peux
   centrer la ville sur le restant de l'espace, c'est mieux que collé contre la
   maison »). flex:1 lui donne la place, text-align:center l'y pose. L'ellipse reste :
   « Saint-Laurent-de-la-Prée » ne rentre pas dans 190 px, et deborder serait pire que
   couper. */
.pa-maison-nom {
    flex: 1 1 auto;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* LE REFUS SE DIT UNE FOIS, en gris et petit : c'est une information, pas une alarme.
   Le visiteur a le droit de refuser, et l'ecran continue de marcher sans. */
.pa-maison-mot { margin: 2px 0 0 2px; color: #8a95a1; font-size: 11px; line-height: 1.4; }

/* ═══ LE BLOC RAYON ═══                                             (26/08/2026)
   « Trop basique » disait Ramon de la liste deroulante. Ce qui la remplace tient dans
   la meme largeur de colonne — 210 px — parce que le reste de l'ecran ne bouge pas :
   la demande etait de changer LE RAYON, pas la disposition.
   La carte est petite et fixe. Une carte qui grandit ferait sauter la colonne a chaque
   reglage, et c'est exactement ce que le visiteur est en train de lire. */
.pa-rayon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.pa-rayon-tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.pa-rayon-tete .pa-lbl { margin-top: 0; }
/* LE CHIFFRE EST LA SEULE COULEUR VIVE DU BLOC : c'est lui qu'on cherche des yeux en
   glissant le curseur. Vide quand le rayon est eteint — un « 20 km » affiche alors
   qu'il ne filtre rien serait un mensonge poli. */
.pa-rayon-val {
    color: #1b64c8;
    font-size: 12px;
    font-weight: 700;
    min-height: 15px;
}
.pa-range {
    width: 100%;
    margin: 0;
    accent-color: #1b64c8;   /* le navigateur dessine le reste : rien a repeindre */
    cursor: pointer;
}
.pa-rayon-bornes {
    display: flex;
    justify-content: space-between;
    color: #8a95a1;
    font-size: 10px;
}
/* ET L'ECHELLE DISPARAIT AVEC LUI (26/08/2026).
   Ramon : « mon ecran indique que le rayon est de 1 km autour de mon domicile. 1 ou
   25 ? » Le curseur etait bien a 25 — mesure en ligne. Ce qu'il lisait, c'etait
   « 1 km », la borne GAUCHE de l'echelle. Le raisonnement du bloc au-dessus etait
   juste et incomplet : on taisait le chiffre pour ne pas mentir, et on laissait
   l'echelle en dessous devenir le seul nombre de l'ecran. Un seul nombre visible est
   toujours lu comme LA valeur. Rayon eteint : aucun chiffre, aucune equivoque.
   VISIBILITY ET NON DISPLAY : la ligne garde sa place, sinon le bloc — et la carte
   avec lui — sauterait de dix pixels au premier mouvement du curseur. */
.pa-rayon[data-actif="0"] .pa-rayon-bornes { visibility: hidden; }
/* ETEINT, LA VALEUR EST UNE PHRASE, PAS UN CHIFFRE (27/08/2026) : elle ne doit pas
   avoir le poids d'une mesure. Meme place, meme ligne — aucune boite ne bouge. */
.pa-rayon[data-actif="0"] .pa-rayon-val { font-weight: 400; font-style: italic; opacity: .72; }
/* LA HAUTEUR EST ECRITE, ET ELLE DOIT L'ETRE : Leaflet mesure son hote a la
   construction, et une carte nee dans un cadre de zero pixel reste grise pour
   toujours (lecon du panneau visiteur, 26/08 au matin). */
.pa-carte {
    height: 150px;
    border: 1px solid #cfd6dd;
    border-radius: 3px;
    background: #eef2f6;
    overflow: hidden;
    /* Leaflet range ses panneaux de 400 a 1000 : sans contexte d'empilement propre,
       ils s'echappent et passent par-dessus le reste de l'ecran. Le meme scellement
       que dans css_espace_pro_annuaire.css. */
    position: relative;
    z-index: 0;
}
/* LA CARTE NE PROMET RIEN : pas de main, pas de pointeur. Leaflet laisse sa fleche
   quand on lui retire le deplacement, mais on l'ecrit pour que ce soit vrai partout. */
.pa-carte, .pa-carte .leaflet-container { cursor: default; }
.pa-carte-mot { margin: 3px 0 0 2px; color: #8a95a1; font-size: 10.5px; line-height: 1.35; }
.pa-lien {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: #1b64c8;
    font: inherit;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
}
.pa-lien:hover { color: #12447f; }

/* ═══ SANS DEPARTEMENT ═══                                          (26/08/2026)
   Le meme bloc d'invite que l'annuaire, dans la meme intention : l'ecran ne se ferme
   pas, il ATTEND — et le selecteur qui le debloque est juste a gauche. */
.pa-nodept {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pa-nodept-boite { text-align: center; max-width: 420px; }
.pa-nodept-icone { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.pa-nodept-titre { font-size: 16px; font-weight: 700; color: #1d2b36; margin-bottom: 6px; }
.pa-nodept-sous  { font-size: 13px; color: #55606d; line-height: 1.55; }


/* ═══ LE LOGO EST UN CHEMIN DE RETOUR ═══                            (27/08/2026)
   Ramon : « si on clique dessus, on revient a TOUTES les categories ».

   IL DOIT AVOIR L'AIR CLIQUABLE, sinon c'est une fonction cachee — et une fonction
   cachee n'existe pas. Le curseur le dit au survol, un leger soulevement le confirme, et
   le titre nomme la destination. Trois signaux discrets valent mieux qu'un cadre autour
   d'un logo.

   LE CONTOUR AU CLAVIER N'EST PAS NEGOCIABLE : c'est un lien, il se tabule, et celui qui
   n'a pas de souris doit voir ou il est. */
.pa-logo-a {
    display: inline-block;
    border-radius: 4px;
    text-decoration: none;
    transition: transform .12s, opacity .12s;
}
.pa-logo-a:hover { transform: translateY(-1px); opacity: .88; }
.pa-logo-a:focus-visible { outline: 2px solid #1c5fbe; outline-offset: 3px; }


/* ═══════════════════════════════════════════════════════════════════════════
   LES FILTRES PAR CARACTERISTIQUE                               (02/09/2026)
   Ramon : « le tri possible en recherche ».
   ILS TIENNENT DANS LA COLONNE, DONC ILS DEFILENT. Une rubrique peut porter
   onze criteres : posés d'un bloc, ils repousseraient le bouton Rechercher
   hors de l'ecran, et un bouton qu'on ne voit plus est un bouton qu'on ne
   clique plus. La hauteur est bornee, et la zone defile toute seule.
   ELLE N'OCCUPE AUCUNE PLACE QUAND ELLE EST VIDE : sans rubrique choisie il
   n'y a rien a proposer, et un blanc de vingt pixels sans cause visible fait
   croire a quelque chose qui manque.
   ═════════════════════════════════════════════════════════════════════════ */
.pa-attrs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 10px;
}
.pa-attrs:empty { display: none; margin: 0; }
.pa-attr { display: flex; flex-direction: column; gap: 2px; }
.pa-attr small { color: #8a949e; font-weight: 400; }
.pa-attr-cases { display: flex; flex-direction: column; gap: 1px; }
.pa-attr-case {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #33414f;
    cursor: pointer;
}
.pa-attr-case input { margin: 0; }
/* LES DEUX BORNES COTE A COTE, et coupees a la moitie de la colonne : « de »
   et « a » se lisent en une ligne ou pas du tout. */
.pa-attr-bornes { display: flex; gap: 6px; }
.pa-attr-bornes .pa-champ { width: 50%; }

/* === FIN DU FICHIER : D:\speedclicV2\www\assets\css\annonces.css === */

/* ═══ LA COLONNE DES PROS ═══                                       (27/08/2026)
   Ramon : « Photo - Titre - Position + Distance + Prix », « enchainees pour rotation »,
   et « uniquement celles qui etendent le quota. Si aucune, on laisse vide. »
   ELLES SONT ENCHAINEES, PAS EMPILEES AU HASARD : la photo en haut, pleine largeur de la
   colonne, puis le titre, puis lieu et distance, puis le prix. C'est l'ordre de sa
   maquette, et c'est l'ordre ou l'oeil descend — on regarde une image, puis on lit.
   LE RAPPORT DE LA PHOTO EST FIXE : sans lui, une colonne de photos de proportions
   differentes fait sauter le texte d'une carte a l'autre, et la rotation devient une
   secousse. Meme raison que les neuf photos de l'annuaire. */
.pap { margin: 0 0 10px; }
.pap-bloc {
    display: block;
    padding: 6px;
    border: 1px solid #dfe5eb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.pap-bloc:hover { border-color: #1c5fbe; }
.pap-bloc:focus-visible { outline: 2px solid #1c5fbe; outline-offset: 1px; }
.pap-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px;
    background: #2b3540 center / cover no-repeat;
    color: #fff;
    text-align: center;
}
.pap-mot   { padding: 6px; font-size: 11px; }
.pap-titre { margin: 6px 0 2px; font-size: 12.5px; font-weight: 700; color: #1c5fbe; }
.pap-lieu  { margin: 0 0 4px; color: #96a0aa; font-size: 11px; }
/* LE PRIX GARDE SES DEUX COLONNES, comme partout : le nombre cale a droite, la devise
   calee a gauche. Une colonne etroite n'est pas une raison pour que les virgules
   dansent. */
.pap-prix {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #c62c20;
    font-weight: 700;
    font-size: 12.5px;
}
.pap-prix .pg-prix-n { flex: 1 1 auto; text-align: right; font-variant-numeric: tabular-nums; }
.pap-prix .pg-prix-d { flex: 0 0 38px; text-align: left; font-weight: 600; }