/*
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;
}
.pa-haut {
    flex: 0 0 auto;
    border-bottom: 1px solid #e3e8ee;
}

/* 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. */
.pa-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
}
/* 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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    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; }

/* 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 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 57px;
    padding: 5px 8px;
    background: #fafbfd;
    border-top: 1px solid #eef2f6;
}
.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. */
.pa-ann-prix {
    flex: 0 0 auto;
    padding-left: 8px;
    color: #c62c20;
    font-weight: 700;
    white-space: nowrap;
}
/* « 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; }

/* ═══ « 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%;
    margin: 8px 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; }
/* 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; }

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