/*
Fichier : annonces_recherche.css
Chemin  : D:\speedclicV2\www\assets\css\annonces_recherche.css
Rôle    : « RECHERCHE + » — le bouton qui ouvre, et la fenêtre où l'on affine.
          Une feuille à elle, servie sur le seul écran public des annonces : la fenêtre
          n'existe nulle part ailleurs, et annonces.css n'a pas à grossir d'un morceau
          qui ne le concerne pas (règles 38 et 40).
Créé   : 04/09/2026
*/

/* ═══ LE BOUTON, POSÉ SUR LE BLOC FANTÔME ═══
   Le fantôme rejoue « Tous / Particuliers / Professionnels » à l'encre retirée : c'est
   LUI qui donne sa largeur à la première colonne des deux rangées, et il la mesure tout
   seul, dans les 63 langues. Une largeur en pixels mentirait dès l'allemand.
   LE BOUTON NE PEUT DONC PAS ENTRER DANS LE FLUX : il pousserait la boîte et décalerait
   les icônes. Il se pose PAR-DESSUS, et la boîte continue d'être mesurée par ses trois
   mots invisibles. C'est la seule règle de cette feuille qui touche un bloc voisin, et
   elle n'existe que pour ce bouton. */
.pa-vendeurs-fantome { position: relative; }

.par-ouvrir {
    position: absolute;
    left: 0;
    right: 8px;                 /* la bordure droite du fantôme reste visible */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    border: 1px solid #1c5fbe;
    border-radius: 4px;
    background: #eef4fd;
    color: #1c5fbe;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    /* le title porte le mot entier : rien ne se perd */
    cursor: pointer;
}
.par-ouvrir:hover  { background: #1c5fbe; color: #fff; }
.par-ouvrir:focus  { outline: 2px solid #1c5fbe; outline-offset: 1px; }

/* LE COMPTE DES CRITÈRES ACTIFS. Fenêtre fermée, un filtre posé est invisible : sans ce
   chiffre, une liste courte se lirait « il n'y a rien », et c'est le pire des mensonges
   pour un flux. Vide, la pastille disparaît — on ne montre pas « (0) ». */
.par-compte {
    display: inline-block;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #b8281f;
    color: #fff;
    font-size: 11px;
    line-height: 15px;
    text-align: center;
}
.par-compte:empty { display: none; }

/* ═══ LA FENÊTRE ═══ */
.par-fond {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 26, 38, .45);
}
/* UN [hidden] NE SE CACHE PAS TOUT SEUL QUAND ON A POSÉ display:flex — la faute payée le
   14/08 sur .ep-modale-pied, où la modale montrait ses deux pieds à la fois. */
.par-fond[hidden] { display: none !important; }

.par {
    display: flex;
    flex-direction: column;
    width: min(880px, 100%);
    max-height: min(78vh, 720px);
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    /* LE REDIMENSIONNEMENT EST EN CSS et ne coûte pas une ligne de script (02/09). */
    resize: both;
    overflow: hidden;
}

/* LA TÊTE EST LE PREMIER ENFANT : c'est à cela que sc_modale.js la reconnaît. */
.par-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #e3e8ee;
    background: #f4f7fb;
    cursor: move;
}
.par-titre { margin: 0; font-size: 15px; font-weight: 700; color: #1b2733; }
.par-titre-rub { color: #6a7683; font-weight: 400; }
.par-x {
    border: 0;
    background: transparent;
    color: #6a7683;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.par-x:hover { color: #b8281f; }

.par-corps { padding: 14px; overflow: auto; flex: 1 1 auto; }

/* LES MOTS PRENNENT TOUTE LA LARGEUR : on y tape « clio 4 portes », pas un nombre. */
.par-mots { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.par-mots .pa-champ { width: 100%; }

/* ═══ PAS DE FLECHES SUR LES PRIX ═══                            (04/09/2026)
   Ramon : « je décoche tout et pourtant il est indiqué 1 ! » — et sa capture montrait
   un « 0 » dans Prix maxi, qu'il n'avait pas voulu taper.
   UN CHAMP type=number PORTE DEUX FLECHES, et sur un champ de 110 px elles sont collées
   au bord droit : un clic un peu large ne vide pas le champ, il y ECRIT ZERO. Et « prix
   maximum 0 » est une recherche parfaitement valable — les annonces gratuites — donc
   rien ne pouvait la refuser : la liste se vidait, le compte disait 1, et tout était
   juste sauf l'intention.
   ON SUPPRIME LA CAUSE, pas le symptôme : le champ reste un nombre (clavier chiffré sur
   téléphone, bornes respectées), il n'a simplement plus de flèche à cliquer par erreur. */
.par input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.par input[type="number"]::-webkit-outer-spin-button,
.par input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.par-prix { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.par-champ { display: flex; flex-direction: column; gap: 2px; }

/* LES CARACTÉRISTIQUES EN COLONNES. Le script dessine les MÊMES balises qu'avant —
   .pa-attr, .pa-attr-cases, .pa-attr-bornes — et c'est ici, et ici seulement, qu'elles
   apprennent à vivre dans une fenêtre large plutôt que dans une colonne de 200 px. */
.par .pa-attrs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin: 0;
}
/* UNE LISTE LONGUE NE POUSSE PAS LA FENÊTRE : trente marques d'automobile tiennent dans
   leur propre ascenseur, et les autres critères restent visibles à côté. */
.par .pa-attr-cases { max-height: 190px; overflow: auto; }
.par .pa-attr-bornes .pa-champ { width: 50%; }

.par-invite { margin: 12px 0 0; color: #6a7683; font-size: 13px; }
.par-invite[hidden] { display: none !important; }

.par-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid #e3e8ee;
    background: #f8fafc;
}
.par-lien {
    border: 0;
    background: transparent;
    color: #1c5fbe;
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
.par-lien:hover { color: #b8281f; }
.par-pied .pa-btn { margin: 0; }

/* SUR UN TÉLÉPHONE la fenêtre prend l'écran : il n'y a rien derrière à découvrir, et
   sc_modale.js y éteint déjà le déplacement sous 760 px. */
@media (max-width: 760px) {
    .par-fond { padding: 0; align-items: stretch; }
    .par { width: 100%; max-height: 100%; border-radius: 0; resize: none; }
    .par-tete { cursor: default; }
}

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