/* Montserrat et Raleway viennent deja du theme mda2018 (header.php:38, avec
   son propre preconnect), sur toute la plage de graisses dont nous avons
   besoin. Les charger ici en plus serait une requete tierce en double,
   bloquante au premier rendu, et transmettrait l'adresse IP du visiteur a un
   tiers hors UE — sur le site d'une association. Voir spec §6.2. */

/* ==========================================================================
   Petites annonces — La Maison des Artistes
   Tout est cantonné à .mda-cl pour ne jamais toucher au reste du thème.
   ========================================================================== */

.mda-cl,
#classiwrapper {
  /* couleurs — reprises de style.css du thème mda2018 */
  --mint:      #70f4cd;
  --mint-mid:  #b6f0dd;
  --mint-soft: #ddfaf1;
  --mint-ink:  #0b6e55;
  --blue:      #21a8f2;
  --blue-soft: #d9edfd;
  --blue-ink:  #0a6ba8;
  --peri:      #a0a9ea;
  --peri-soft: #e5e8fb;
  --peri-ink:  #3d45a0;
  --cyan-soft: #dcf5f8;
  --cyan-ink:  #0d6b76;
  --coral-soft:#fbe6de;
  --coral-ink: #a4472c;
  --yellow:    #ffc700;
  --yellow-soft:#fff3c9;
  --yellow-ink:#856200;

  --ink:    #2b2b2b;
  --ink-2:  #676767;
  --ink-3:  #9a9a9a;
  --line:   #e4e0df;
  --line-2: #f0eeed;
  --paper:  #ffffff;
  --canvas: #fbfaf9;
  --warn-ink:#96702a;

  /* espacement */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 14px;
  --sp-4: 22px; --sp-5: 34px; --sp-6: 52px;

  /* rayons */
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px;

  /* le soulignement tracé à la main — écho au lettrage du logo */
  /* preserveAspectRatio='none' est indispensable : sans lui le SVG garde son
     rapport d'aspect, se centre dans la boîte et ne souligne qu'une partie du titre. */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='7' viewBox='0 0 124 7' preserveAspectRatio='none'%3E%3Cpath d='M1.5 5.1C18 2.3 32 5.7 48 3.3 64 .9 80 5.5 96 3.1c8.4-1.3 17 .5 26 1.6' fill='none' stroke='%2370f4cd' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");

  font-family: "Raleway", sans-serif;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

:where(.mda-cl, #classiwrapper) *,
:where(.mda-cl, #classiwrapper) *::before,
:where(.mda-cl, #classiwrapper) *::after { box-sizing: border-box; }

/* :where() ne contribue aucune specificite : ces regles valent (0,0,1) et se
   laissent donc depasser par tout selecteur de composant. Sans cela,
   #classiwrapper etant un identifiant, « #classiwrapper a » en (1,0,1)
   ecrasait « .mda-cl-item-title a » en (0,2,1) — les titres d'annonces
   sortaient en bleu — et « #classiwrapper h3 { margin: 0 } » ecrasait la
   marge des titres de cartes. Elles restent malgre tout prioritaires sur le
   theme, qui declare « a { color: #444 } » a la meme specificite (0,0,1) :
   notre feuille est chargee apres la sienne (priorite 20 sur
   wp_enqueue_scripts), et a specificite egale la derniere gagne. */
:where(.mda-cl, #classiwrapper) :is(h1, h2, h3, h4, h5) {
  font-family: "Montserrat", sans-serif; margin: 0; line-height: 1.25;
}
:where(.mda-cl, #classiwrapper) a { color: var(--blue); }
:where(.mda-cl, #classiwrapper) :focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px;
}
:where(.mda-cl, #classiwrapper) img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  :where(.mda-cl, #classiwrapper) *,
  :where(.mda-cl, #classiwrapper) *::before { transition: none !important; animation: none !important; }
}

/* ---------- utilitaires typographiques ---------- */
.mda-cl-eyebrow {
  font-family: "Montserrat", sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.mda-cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* le seul accessoire : titres de section soulignés au pinceau.
   Un seul tracé étiré à la largeur du titre — jamais répété, les coutures se voient. */
.mda-cl-sectitle {
  display: inline-block; font-size: 16px; font-weight: 700;
  padding-bottom: 12px; margin-bottom: var(--sp-3);
  background-image: var(--brush);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 6px;
}

/* ==========================================================================
   Barre de recherche + menu
   ========================================================================== */
.mda-cl-searchbar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mda-cl-searchbar input[type="search"],
.mda-cl-searchbar input[type="text"] {
  flex: 1; min-width: 0; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: 12px 16px; transition: border-color .15s;
}
.mda-cl-searchbar input::placeholder { color: var(--ink-3); }
.mda-cl-searchbar input:focus { border-color: var(--blue); outline: none; }

.mda-cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 700;
  border: 1.5px solid transparent; border-radius: var(--r-md);
  padding: 12px 20px; cursor: pointer; text-decoration: none; transition: .15s;
}
.mda-cl-btn--primary { background: var(--mint); color: #093f31; }
.mda-cl-btn--primary:hover { background: #4ceabc; }
.mda-cl-btn--ghost { background: var(--paper); border-color: var(--line); color: var(--ink); }
.mda-cl-btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.mda-cl-btn--block { width: 100%; }

.mda-cl-menu {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
}
.mda-cl-menu a {
  display: block; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600;
  color: var(--ink); text-decoration: none; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px; transition: .15s;
}
.mda-cl-menu a:hover { border-color: var(--mint); background: var(--mint-soft); color: var(--mint-ink); }
.mda-cl-menu .is-primary a { background: var(--mint); border-color: var(--mint); color: #093f31; }
.mda-cl-menu .is-primary a:hover { background: #4ceabc; }

/* ==========================================================================
   Badges de rubrique
   « Offres » et « Demandes » partagent la teinte : plein / contour.
   ========================================================================== */
.mda-cl-tag {
  display: inline-block; font-family: "Montserrat", sans-serif; font-size: 10px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  white-space: nowrap; text-decoration: none;
}
.mda-cl-tag--ateliers-offres   { background: var(--mint-soft);   color: var(--mint-ink);  border-color: var(--mint-soft); }
.mda-cl-tag--ateliers-demandes { background: transparent;        color: var(--mint-ink);  border-color: var(--mint-mid); }
.mda-cl-tag--appels            { background: var(--yellow-soft); color: var(--yellow-ink);border-color: var(--yellow-soft); }
.mda-cl-tag--emplois           { background: var(--blue-soft);   color: var(--blue-ink);  border-color: var(--blue-soft); }
.mda-cl-tag--formations        { background: var(--peri-soft);   color: var(--peri-ink);  border-color: var(--peri-soft); }
.mda-cl-tag--services          { background: var(--cyan-soft);   color: var(--cyan-ink);  border-color: var(--cyan-soft); }
.mda-cl-tag--materiel          { background: var(--coral-soft);  color: var(--coral-ink); border-color: var(--coral-soft); }
.mda-cl-tag--perso             { background: var(--line-2);      color: var(--ink-2);     border-color: var(--line-2); }

/* ==========================================================================
   Marqueur de validité — l'élément signature
   ========================================================================== */
.mda-cl-age { display: inline-flex; align-items: center; gap: 6px; }
.mda-cl-age--new { color: var(--mint-ink); font-weight: 600; }
.mda-cl-age--new::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft);
}
/* anneau creux, dessiné en CSS — pas de glyphe, donc pas de dépendance à la fonte */
.mda-cl-age--old { color: var(--warn-ink); }
.mda-cl-age--old::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--warn-ink); box-shadow: 0 0 0 3px #f7f0e1;
}

.mda-cl-deadline {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Montserrat", sans-serif; font-size: 11.5px; font-weight: 700;
  background: var(--yellow-soft); color: var(--yellow-ink);
  padding: 4px 10px; border-radius: var(--r-sm);
}
.mda-cl-deadline--closed { background: var(--line-2); color: var(--ink-3); }

/* pastille d'échéance, colonne de droite / bandeau */
.mda-cl-countdown {
  background: var(--yellow-soft); color: var(--yellow-ink);
  border-radius: var(--r-md); padding: 12px 16px; text-align: center;
}
.mda-cl-countdown b { display: block; font-family: "Montserrat", sans-serif; font-size: 17px; margin-top: 3px; }
.mda-cl-countdown--closed { background: var(--line-2); color: var(--ink-3); }

/* ==========================================================================
   Mise en page à deux colonnes
   ========================================================================== */
/* Le rythme vertical passe par une marge sur les enfants, pas par row-gap :
   voir la note sur grid-template-rows plus bas. */
.mda-cl-layout {
  display: grid; grid-template-columns: 224px 1fr;
  grid-template-rows: repeat(24, auto);
  column-gap: var(--sp-5); row-gap: 0; align-items: start;
}

/* Les enfants de la grille sont produits par AWPCP — selecteur de rubrique,
   pagination, liste — et nous n'en controlons ni le nombre ni l'ordre. On place
   donc explicitement : le panneau occupe la colonne 1 sur toute la hauteur, tout
   le reste tombe en colonne 2, dans l'ordre du document. Cela evite un conteneur
   ouvert par un filtre et ferme par un autre, qui laisserait un <div> non ferme
   des que l'un des deux echoue sans l'autre.

   « grid-row: 1 / -1 » exige des pistes de lignes EXPLICITES, d'ou le
   repeat(24, auto) ci-dessus. Sans lui, -1 designe la ligne 1, l'intervalle
   1/-1 est invalide et le navigateur retombe sur « span 1 » : le panneau
   (~850 px, sticky) imposait alors sa hauteur a la seule premiere piste, celle
   du chapeau de la page. Mesure avant correctif : pistes « 852.9px 116.1px … »
   alors que le chapeau ne mesure que 583 px, soit ~270 px de blanc entre les
   textes de mise en garde et la barre de recherche. Avec les 24 pistes, la
   hauteur du panneau se compare a la somme de la colonne 2 et ne gonfle plus
   rien : « 616.6px 139.5px … 0px ».

   Les pistes en trop restent a 0, mais une gouttiere s'applique AUSSI entre
   pistes vides : 16 pistes vides x 34 px auraient laisse ~540 px de blanc en
   bas de page. D'ou row-gap: 0 et l'espacement reporte en margin-bottom.
   24 est large ; au-dela, les enfants surnumeraires tombent dans des pistes
   implicites que le panneau ne couvre plus, sans consequence visible puisqu'il
   est bien plus court que la colonne 2. */
.mda-cl-layout > .mda-cl-filters { grid-column: 1; grid-row: 1 / -1; }
.mda-cl-layout > *:not(.mda-cl-filters) {
  grid-column: 2; min-width: 0; margin-bottom: var(--sp-5);
}
.mda-cl-layout > *:not(.mda-cl-filters):last-child { margin-bottom: 0; }

/* Si le panneau n'a pas ete emis — exception rattrapee dans inject_panel()
   alors que open() a reussi — la grille doit revenir a une seule colonne.
   Remettre grid-template-columns ne suffit PAS : la regle
   « > *:not(.mda-cl-filters) { grid-column: 2 } » ci-dessus ferait creer une
   piste implicite a droite, laissant une gouttiere vide a gauche et une liste
   comprimee. Il faut replacer les enfants, comme le fait la media query mobile.
   Mesure avant correctif sur un conteneur de 1000 px : pistes 178.9px 787px.
   Ces deux regles doivent rester APRES celles ci-dessus : meme specificite
   (0,2,0), donc l'ordre de declaration tranche. */
.mda-cl-layout:not(:has(> .mda-cl-filters)) { grid-template-columns: 1fr; }
.mda-cl-layout:not(:has(> .mda-cl-filters)) > * { grid-column: 1; }

/* Le chapeau — introduction, mise en garde rouge, encadre jaune — passe sur
   toute la largeur AU-DESSUS des deux colonnes, et le panneau ne demarre donc
   qu'a la deuxieme piste.

   Sans cela ces textes vivaient dans la colonne des resultats, ce qui les
   comprimait a 852px et repoussait la liste tres bas : le panneau demarrait au
   ras du premier paragraphe et la liste 792px plus bas. Mesure apres : textes sur
   1110px, et le panneau demarre au niveau du contenu de la colonne 2, l'ecart
   tombant a 176px.

   Les 176px restants sont le menu, le bandeau d'outils et la pagination du haut,
   qui vivent en colonne 2 au-dessus de la liste. Le bandeau et la pagination y
   sont a leur place : ce sont des controles de la liste. Les descendre plus haut
   demanderait de les sortir de la colonne, ce qui les detacherait de ce qu'ils
   commandent.

   Ces regles valent (0,2,0), comme celles ci-dessus : l'ordre de declaration
   tranche, elles doivent rester APRES. Et AVANT la media query mobile, qui les
   annule en remettant tous les enfants en une colonne. */
.mda-cl-layout > .uiwelcome { grid-column: 1 / -1; grid-row: 1; }
.mda-cl-layout > .mda-cl-filters { grid-row: 2 / -1; }

/* En une colonne, plus de panneau qui traverse les pistes : le repeat(24, auto)
   et la marge n'ont plus de raison d'etre, on revient a la gouttiere. */
@media (max-width: 900px) {
  .mda-cl-layout > .mda-cl-filters,
  .mda-cl-layout > *:not(.mda-cl-filters) { grid-column: 1; grid-row: auto; }
  .mda-cl-layout > *:not(.mda-cl-filters) { margin-bottom: 0; }
}

/* ---------- panneau de filtres ---------- */
.mda-cl-filters {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4); position: sticky; top: var(--sp-3);
}
.mda-cl-fgroup { margin-bottom: var(--sp-4); }
.mda-cl-fgroup:last-child { margin-bottom: 0; }
.mda-cl-fgroup > .mda-cl-eyebrow { display: block; margin-bottom: var(--sp-2); color: var(--ink); }

.mda-cl-flist { list-style: none; margin: 0; padding: 0; }
.mda-cl-flist a {
  display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  padding: 5px 0; transition: color .12s;
}
.mda-cl-flist a:hover { color: var(--blue); }
.mda-cl-flist a > span { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mda-cl-flist .is-active a { color: var(--ink); font-weight: 600; }
.mda-cl-flist .is-active a > span { color: var(--mint-ink); }

/* Les rubriques et periodes sont des cases a cocher, pas des liens : elles
   doivent porter la ville et les bornes de prix deja saisies. */
.mda-cl-flist label {
  display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline;
  font-size: 13.5px; color: var(--ink-2); padding: 5px 0; cursor: pointer;
}
.mda-cl-flist label:hover { color: var(--blue); }
.mda-cl-flist label > span:last-child { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mda-cl-flist .mda-cl-fname { flex: 1; }
.mda-cl-flist .is-active label { color: var(--ink); font-weight: 600; }
.mda-cl-flist .is-active label > span:last-child { color: var(--mint-ink); }
.mda-cl-flist input { margin: 0 var(--sp-2) 0 0; flex: none; }
.mda-cl-fclear { display: inline-block; }

/* Le bouton n'a d'utilite que sans JavaScript : annonces.js pose cette
   classe sur le formulaire et soumet au changement. */
.mda-cl-js .mda-cl-fsubmit { display: none; }

.mda-cl-finput {
  width: 100%; font-family: inherit; font-size: 13px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--paper);
}
.mda-cl-finput:focus { border-color: var(--blue); outline: none; }
.mda-cl-frange { display: flex; gap: var(--sp-2); }

/* Menus Région et Département : même gabarit que les champs texte du panneau.
   appearance:none puis flèche dessinée en fond — sans quoi le rendu natif
   impose sa propre hauteur et le menu dépasse les champs voisins. */
.mda-cl-fselect {
  width: 100%; font-family: inherit; font-size: 13px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 8px 28px 8px 10px;
  background-color: var(--paper); cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23767676' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
}
.mda-cl-fselect:focus { border-color: var(--blue); outline: none; }

.mda-cl-fclear {
  font-size: 12.5px; color: var(--ink-2); text-decoration: underline;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.mda-cl-fclear:hover { color: var(--blue); }

/* ---------- bandeau d'outils ---------- */
.mda-cl-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.mda-cl-count { font-size: 13.5px; color: var(--ink-2); }
.mda-cl-count b { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mda-cl-sort { font-size: 13.5px; color: var(--ink-2); display: flex; align-items: center; gap: var(--sp-2); }

/* Le theme impose 18px, un padding-right de 20px et une marge basse a tous les
   libelles de formulaire (mda2018/style.css:2852, « main form label »), reglage
   concu pour des formulaires en colonne. Ici le libelle est en ligne avec le
   menu deroulant : a 18px gras, « Trier par » depassait la place laissee et se
   coupait en deux lignes, ce qui portait le bandeau a 56px de haut.
   Notre selecteur porte une classe, donc (0,1,1) contre (0,0,3) : il gagne sans
   !important. Le gras, lui, est marque !important a la source et reste — il fait
   office de libelle de champ, c'est acceptable.
   Mesure : 2 lignes et 56px de bandeau avant, 1 ligne et 47px apres. */
.mda-cl-sort label {
  font-size: inherit; line-height: 1.3; white-space: nowrap; padding: 0; margin: 0;
}

/* Le rythme de la grille (voir .mda-cl-layout) impose 34px sous chaque enfant,
   ce qui ecrasait les 14px voulus ici : le filet du bandeau se retrouvait a 34px
   de la pagination. Meme specificite que la regle de rythme (0,2,0), donc c'est
   l'ordre de declaration qui tranche et cette regle doit rester APRES elle. */
.mda-cl-layout > .mda-cl-toolbar { margin-bottom: var(--sp-3); }
.mda-cl-sort select {
  font-family: inherit; font-size: 13.5px; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px;
}

.mda-cl-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mda-cl-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 12.5px;
  background: var(--mint-soft); color: var(--mint-ink);
  border: 0; border-radius: var(--r-pill); padding: 5px 12px; cursor: pointer; font-family: inherit;
}
.mda-cl-pill:hover { background: var(--mint-mid); }
.mda-cl-pill span { font-size: 14px; line-height: 1; opacity: .7; }

/* ==========================================================================
   Un item de liste
   ========================================================================== */
.mda-cl-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }

/* L'espacement porte sur les cartes elles-memes, pas sur un conteneur flex :
   en production le parent est le <div class="awpcp-listings"> d'AWPCP, en
   display:block. Ainsi les maquettes (qui ont un <ul class="mda-cl-list">) et
   la production obtiennent le meme rendu. */
.mda-cl-item + .mda-cl-item { margin-top: var(--sp-3); }

.mda-cl-item {
  display: grid; grid-template-columns: 104px 1fr auto; gap: var(--sp-4); align-items: start;
  background: var(--paper);
  /* Bordure uniforme : un border-left de 3px transparent laissait la carte sans
     bord gauche visible. L'accent de survol passe par une ombre interieure. */
  border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); transition: .18s;
}
.mda-cl-item:hover {
  box-shadow: inset 3px 0 0 var(--mint), 0 6px 18px rgba(0,0,0,.07);
  transform: translateY(-1px);
}
.mda-cl-item:focus-within { box-shadow: inset 3px 0 0 var(--blue); }

.mda-cl-item-thumb { width: 104px; height: 104px; border-radius: var(--r-sm); overflow: hidden; background: var(--line-2); }
.mda-cl-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mda-cl-item-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 11px; text-align: center; padding: var(--sp-2);
}

.mda-cl-item-title { font-size: 16px; font-weight: 600; margin: var(--sp-2) 0 5px; }
.mda-cl-item-title a { color: var(--ink); text-decoration: none; }
.mda-cl-item:hover .mda-cl-item-title a { color: var(--blue); }

.mda-cl-item-excerpt {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 var(--sp-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Pas de séparateur généré : `.mda-cl-item-meta > * + *::before` entrerait en
   collision de spécificité avec `.mda-cl-age--new::before` (identiques, 0-1-1)
   et remplacerait silencieusement la pastille turquoise par un point médian.
   L'espacement seul suffit à séparer les éléments. */
.mda-cl-item-meta {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--ink-2);
}
/* Localisation : un seul enfant flex pour les trois niveaux, sinon les
   virgules deviendraient des nœuds anonymes espacés par le gap du parent. */
.mda-cl-place-group { display: inline; color: var(--ink-2); }
.mda-cl-city { color: var(--ink-2); }
.mda-cl-place { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.mda-cl-place:hover { color: var(--blue); border-bottom-color: currentColor; }
.mda-cl-item-side { text-align: right; min-width: 96px; padding-top: var(--sp-2); }
.mda-cl-price { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }
.mda-cl-price--free { font-size: 12.5px; font-weight: 600; background: var(--mint-soft); color: var(--mint-ink); padding: 3px 9px; border-radius: var(--r-sm); }
.mda-cl-item-date { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

/* annonce clôturée : lisible, mais visiblement en retrait */
.mda-cl-item--closed { background: #fcfcfb; }
.mda-cl-item--closed .mda-cl-item-thumb img { filter: grayscale(.75); opacity: .8; }
.mda-cl-item--closed .mda-cl-item-title a { color: var(--ink-2); }

/* ---------- état vide ---------- */
.mda-cl-empty {
  background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-4); text-align: center;
}
.mda-cl-empty h3 { font-size: 17px; margin-bottom: var(--sp-2); }
.mda-cl-empty p { color: var(--ink-2); margin: 0 auto var(--sp-3); max-width: 44ch; }

/* ---------- pagination ---------- */
.mda-cl-pager { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.mda-cl-pager-sum { font-size: 13px; color: var(--ink-2); margin-right: auto; }
.mda-cl-pager a, .mda-cl-pager span.is-current {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
  font-family: "Montserrat", sans-serif; font-size: 13.5px; font-weight: 600;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; background: var(--paper); padding: 0 10px;
}
.mda-cl-pager a:hover { border-color: var(--blue); color: var(--blue); }
.mda-cl-pager span.is-current { background: var(--mint); border-color: var(--mint); color: #093f31; }

/* ==========================================================================
   Fiche annonce — une colonne
   ========================================================================== */
.mda-cl-single { max-width: none; margin: 0; }
.mda-cl-single-title { font-size: 25px; font-weight: 700; margin: var(--sp-2) 0 var(--sp-3); }

/* $ad_title emballe le titre dans un lien qui pointe vers la page courante.
   Sans cette regle il herite du bleu des liens, alors que les titres de la
   liste sont en encre sombre. Le curseur reste par defaut : ce lien ne mene
   nulle part d'utile. */
.mda-cl-single-title a { color: var(--ink); text-decoration: none; cursor: default; }

.mda-cl-single-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-size: 13px; color: var(--ink-2);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.mda-cl-single-meta .mda-cl-price { font-size: 18px; color: var(--ink); }
/* le rappel de contact, compensation du choix « une colonne » */
.mda-cl-jump {
  margin-left: auto; font-family: "Montserrat", sans-serif; font-size: 12.5px; font-weight: 700;
  color: var(--mint-ink); background: var(--mint-soft); border-radius: var(--r-pill);
  padding: 6px 14px; text-decoration: none; white-space: nowrap;
}
.mda-cl-jump:hover { background: var(--mint-mid); color: var(--mint-ink); }

/* ---------- galerie ---------- */
.mda-cl-gallery { margin: var(--sp-4) 0; }
/* Beaucoup d'annonces n'ont aucune photo, en particulier dans la rubrique des
   appels a candidature. $featureimg et $awpcpshowadotherimages se resolvent
   alors en chaines vides, mais le conteneur reste : sans cette regle,
   .mda-cl-gallery-main affiche 700 x 467 px de gris, son aspect-ratio et son
   fond s'appliquant a un bloc vide. Verifie en production sur show-ad/134031.
   :has() est pris en charge par le site — c'est deja lui qui masque l'encart
   des champs supplementaires, et CSS.supports le confirme. */
.mda-cl-gallery:not(:has(img)) { display: none; }
.mda-cl-gallery-main { border-radius: var(--r-lg); overflow: hidden; background: var(--line-2); aspect-ratio: 3 / 2; }
.mda-cl-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mda-cl-gallery-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--sp-2); margin-top: var(--sp-2); list-style: none; padding: 0;
}
.mda-cl-gallery-thumbs img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--r-sm); border: 2px solid transparent; cursor: pointer; transition: border-color .15s;
}
.mda-cl-gallery-thumbs a:hover img, .mda-cl-gallery-thumbs a:focus-visible img { border-color: var(--mint); }

/* Le cadre photo s'arrete a la taille native de la plus grande image
   qu'AWPCP genere (640 x 427) : au-dela, elle serait agrandie et molle.
   Le reste de la fiche occupe bien toute la largeur du conteneur. */
.mda-cl-gallery { max-width: 640px; }

/* $featureimg emballe l'image dans deux conteneurs qu'il faut etirer, sinon
   l'image occupe 241 x 241 dans un cadre bien plus grand, le reste etant du
   fond gris. Mesure en production avant correctif : 241 x 241 dans 1110 x 740. */
.mda-cl-gallery-main { position: relative; }
.mda-cl-gallery-main .awpcp-ad-primary-image,
.mda-cl-gallery-main .awpcp-listing-primary-image-thickbox-link {
  display: block; width: 100%; height: 100%;
}

/* « Cliquez pour agrandir l'image. » est un second lien, frere de l'image
   dans le meme conteneur : etire a 100%, il debordait sous le cadre. On en
   fait une pastille posee dans le coin. */
.mda-cl-gallery-main .enlarge {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-size: 12px; padding: 4px 10px; border-radius: var(--r-sm);
  text-decoration: none;
}
.mda-cl-gallery-main .enlarge:hover { background: #fff; color: var(--blue); }

/* ---------- corps ---------- */
.mda-cl-prose { font-size: 15.5px; line-height: 1.7; }
.mda-cl-prose p { margin: 0 0 var(--sp-3); }
.mda-cl-prose p:last-child { margin-bottom: 0; }
.mda-cl-block { margin-bottom: var(--sp-5); }

/* ---------- encart « l'essentiel » (rubrique 188) ---------- */
.mda-cl-essentials {
  background: #fffdf5; border: 1px solid #f3e3a6; border-radius: var(--r-lg);
  padding: var(--sp-4); margin-bottom: var(--sp-5);
}
.mda-cl-essentials > .mda-cl-eyebrow { display: block; color: var(--yellow-ink); margin-bottom: var(--sp-3); }
/* Aucune annonce de la 188 ne renseigne encore les 10 champs : l'encart ne
   doit alors afficher ni cadre, ni titre. AWPCP resout $awpcpextrafields en
   <div class="awpcp-extra-fields …"></div> vide, jamais en chaine vide, d'ou
   le test sur le conteneur enfant plutot que sur :empty. */
.mda-cl-essentials:not(:has(.awpcp-extra-fields > *)) { display: none; }
.mda-cl-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: 14px; }
.mda-cl-dl dt { color: var(--ink-2); }
.mda-cl-dl dd { margin: 0; font-weight: 500; }

/* ---------- bandeau de contact ---------- */
.mda-cl-contact {
  background: var(--mint-soft); border: 1px solid var(--mint-mid); border-radius: var(--r-lg);
  padding: var(--sp-4); display: flex; justify-content: space-between;
  align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.mda-cl-contact > .mda-cl-btn { flex: none; min-width: 220px; }
.mda-cl-contact dl { margin: 0; font-size: 14px; }
.mda-cl-contact .mda-cl-eyebrow { display: block; color: var(--mint-ink); margin-bottom: var(--sp-2); }

/* ---------- pied de fiche : partage et signalement ---------- */
.mda-cl-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4);
}
.mda-cl-share { display: inline-flex; align-items: center; gap: var(--sp-3); }
.mda-cl-share .mda-cl-eyebrow { color: var(--ink-2); }
/* Les deux boutons arrivent d'AWPCP avec leur propre balisage : un <a class=
   "awpcp-social-button"> contenant un <svg> pour X, un <i class="fab"> pour
   Facebook (Font Awesome 5, deja charge par AWPCP sur cette page — c'est lui
   qui dessine aussi l'icone de $flagad). On ne les redessine pas, on les
   pose a la taille et a la couleur de la fiche. */
.mda-cl-share .awpcp-social-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--line-2); color: var(--ink-2);
  font-size: 16px; line-height: 1; text-decoration: none; transition: background .15s, color .15s;
}
.mda-cl-share .awpcp-social-button:hover,
.mda-cl-share .awpcp-social-button:focus-visible { background: var(--mint); color: var(--mint-ink); }
/* awpcpstyle.css peint les deux icones aux couleurs des marques
   (.twitter-share-button{color:#00aced}, .facebook-share-button{color:#3b5999})
   en visant le <span> interieur : sans cette reprise, la couleur du bouton
   ne les atteindrait jamais et le survol resterait sans effet. */
.mda-cl-share .twitter-share-button,
.mda-cl-share .facebook-share-button { color: inherit; }

/* Le rouge et le soulignement visaient le <div> conteneur : le <a> qu'AWPCP
   pose dedans reprenait la couleur de lien du theme, et le drapeau sortait
   bleu. Les regles portent donc sur le lien lui-meme. */
.mda-cl-flag { display: inline-flex; align-items: center; }
.mda-cl-flag a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: #a5453f; text-decoration: underline;
}
.mda-cl-flag a:hover, .mda-cl-flag a:focus-visible { color: #7d2f2a; }
/* L'icone garde le rouge meme si le theme repeint le libelle. */
.mda-cl-flag .fa-flag { color: #c0392b; font-size: 14px; }

/* ---------- barre collante, mobile uniquement ---------- */
.mda-cl-stickybar { display: none; }

/* ==========================================================================
   Formulaires — recherche avancée et dépôt d'annonce
   ========================================================================== */
.mda-cl-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.mda-cl-field { margin-bottom: var(--sp-4); }
.mda-cl-field:last-child { margin-bottom: 0; }
.mda-cl-field > label, .mda-cl-legend {
  display: block; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600;
  color: var(--ink); margin-bottom: var(--sp-2);
}
.mda-cl-field .mda-cl-hint { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: var(--sp-1); }
.mda-cl-req { color: #c0563f; }

.mda-cl-input, .mda-cl-select, .mda-cl-textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 11px 14px; transition: border-color .15s;
}
.mda-cl-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.mda-cl-input:focus, .mda-cl-select:focus, .mda-cl-textarea:focus { border-color: var(--blue); outline: none; }
.mda-cl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.mda-cl-steps { display: flex; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-5); padding: 0; flex-wrap: wrap; }
.mda-cl-steps li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: "Montserrat", sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ink-3);
}
.mda-cl-steps li::before {
  content: attr(data-step); display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--line-2); color: var(--ink-3); font-size: 12px;
}
.mda-cl-steps .is-current { color: var(--ink); }
.mda-cl-steps .is-current::before { background: var(--mint); color: #093f31; }
.mda-cl-steps .is-done::before { content: "✓"; background: var(--mint-soft); color: var(--mint-ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  /* grid-template-rows remis a none : sinon les 15 pistes explicites restees
     vides ajouteraient autant de gouttieres en bas de page. */
  .mda-cl-layout { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--sp-4); }
  .mda-cl-filters { position: static; }
}

@media (max-width: 620px) {
  .mda-cl-item { grid-template-columns: 76px 1fr; gap: var(--sp-3); padding: var(--sp-3); }
  .mda-cl-item-thumb { width: 76px; height: 76px; }
  .mda-cl-item-side { grid-column: 2; text-align: left; padding-top: var(--sp-2); min-width: 0; }
  .mda-cl-item-date { display: none; }
  .mda-cl-single-title { font-size: 21px; }
  .mda-cl-jump { display: none; }
  .mda-cl-contact > .mda-cl-btn { min-width: 0; width: 100%; }
  .mda-cl-grid-2 { grid-template-columns: 1fr; }
  .mda-cl-form { padding: var(--sp-4); }

  /* le contact reste toujours à portée, malgré la lecture en une colonne */
  .mda-cl-single { padding-bottom: 76px; }
  .mda-cl-stickybar {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 40;
    background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
    padding: var(--sp-2) var(--sp-3); box-shadow: 0 -4px 14px rgba(0,0,0,.06);
  }
}

/* ==========================================================================
   EXCEPTION UNIQUE à la règle de préfixe .mda-cl-*
   Ces trois composants sont produits par AWPCP lui-même et nous ne
   remplaçons pas leur balisage. Ils sont donc cibles par leurs classes
   d'origine, ancrées sur #classiwrapper.

   #classiwrapper contient tout le balisage d'annonces et rien d'autre :
   vérifié, 99 occurrences dedans, 0 en dehors. L'en-tête, le bandeau de
   titre et le pied de page sont hors de ce conteneur.

   NE JAMAIS étendre ce bloc au-delà de ces trois composants. Toute règle
   supplémentaire doit passer par une classe .mda-cl-*.
   ========================================================================== */

/* 1. barre de recherche — RETIREE, voir la regle juste dessous. La mise en forme
      qui suit est conservee volontairement : elle redevient utile telle quelle si
      la barre est un jour reaffichee, et ne coute qu'un selecteur inactif.

   Depuis que le panneau de filtres porte un champ « Mot-clé », cette barre est un
   doublon strict : les deux formulaires sont des GET vers /chercher/, mais la
   barre ne transmet que awpcp-step et keywordphrase quand le panneau transmet en
   plus les rubriques, la ville, les bornes de prix, l'anciennete et le tri.

   C'est bien la barre qui part et non le champ du panneau : sur la page de
   resultats AWPCP eteint la barre (frontend/page-search-ads.php:26), et le champ
   du panneau y est le SEUL controle du mot-cle.

   En CSS et non en PHP : les composants de la barre sont resolus par
   wp_parse_args sans filtre (includes/ui/class-classifieds-bar.php:49). Le seul
   filtre offert, awpcp_should_show_classifieds_bar, masque la barre ENTIERE, donc
   aussi le menu que nous gardons. Le reglage show-classifieds-search-bar, lui,
   est global : inutilisable tant que la refonte n'est pas publique. La feuille
   n'etant chargee que porte ouverte, le masquage est correctement cantonne. */
#classiwrapper .awpcp-classifieds-search-bar { display: none; }

#classiwrapper .awpcp-classifieds-search-bar form {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--sp-3);
}
#classiwrapper .awpcp-classifieds-search-bar--query-field { flex: 1; min-width: 220px; }
#classiwrapper .awpcp-classifieds-search-bar input[type="text"] {
  width: 100%; font-family: "Raleway", sans-serif; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: 12px 16px;
}
#classiwrapper .awpcp-classifieds-search-bar input[type="text"]:focus {
  border-color: var(--blue); outline: none;
}
#classiwrapper .awpcp-classifieds-search-bar input[type="submit"] {
  font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 700;
  background: var(--mint); color: #093f31; border: 0;
  border-radius: var(--r-md); padding: 12px 20px; cursor: pointer;
}
/* « Recherche avancee » retire : le lien mene a /chercher/, exactement comme le
   bouton « Chercher » du menu, et cette page est desormais MOINS riche que le
   panneau de gauche. Elle offre expression, rubrique, prix min/max et
   « Annonces publiees par » ; le panneau offre rubrique, ville, prix min/max,
   anciennete et tri. Seul « Annonces publiees par » lui est propre — une liste
   de tous les comptes, sur des annonces publiables sans compte. Le libellé
   « avancée » promettait donc plus et donnait moins.

   display: none et non visibility/clip : le lien doit aussi disparaitre de
   l'arbre d'accessibilite, sinon il reste annonce par les lecteurs d'ecran.

   Pourquoi en CSS et pas en PHP : le lien est code en dur dans
   templates/components/classifieds-search-bar.tpl.php:22, et AWPCP n'expose ni
   filtre sur la sortie (awpcp_render_template n'en declenche aucun) ni
   surcharge de template depuis le theme (class-template-renderer.php:64,
   resolution en deux branches, aucun locate_template). Masquer ici evite de
   forker le template a chaque mise a jour de l'extension.

   Le pendant de cette regle est cote reglages AWPCP : show-menu-item-search-ads
   et show-menu-item-browse-ads decoches retirent « Chercher » et « Les
   annonces » du menu, eux aussi redondants avec cette page. */
#classiwrapper .awpcp-classifieds-search-bar--advanced-search-link { display: none; }

/* Le theme cale le conteneur du bouton avec margin-top: 24px
   (mda2018/style.css:5824), un reglage fait pour l'ancienne barre non stylee.
   Notre selecteur porte un identifiant, donc (1,1,0) contre (0,1,1) : il gagne. */
#classiwrapper .awpcp-classifieds-search-bar--submit-button { margin: 0; }

/* Meme boite que le champ, au pixel : 24px d'interligne + 2x12px de padding
   + 2x1px de bordure = 50px des deux cotes. La bordure transparente n'existe
   que pour egaliser la hauteur. */
#classiwrapper .awpcp-classifieds-search-bar input[type="submit"] {
  font-size: 15px;
  line-height: 24px;
  border: 1px solid transparent;
}

/* 2. menu des annonces */
#classiwrapper ul.awpcp-classifieds-menu {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; margin: 0 0 var(--sp-4);
}

/* Le !important est ici le SEUL moyen, et non un raccourci — le reste de cette
   feuille l'evite, d'ou cette note.

   Le <ul> recevait « padding: 0px 4px », qui decalait tout le menu de 4px vers la
   droite : son premier bouton commencait a 609px quand le reste de la colonne —
   le compteur « 337 annonces » — commence a 605px. Le « padding: 0 » declare
   ci-dessus, de specificite (1,1,1), ne suffisait pas.

   Demonstration faite dans le navigateur : une regle de MEME specificite (1,1,1)
   placee APRES dans la cascade laisse le padding a 0px 4px ; la meme avec
   !important le ramene a 0px et l'ecart avec le compteur tombe a 0. La
   declaration concurrente est donc elle-meme en !important — sans elle, l'ordre
   de declaration aurait tranche en notre faveur.

   Sa source n'a pas pu etre attribuee : l'enumeration des 39 feuilles lisibles ne
   trouve aucune regle en !important sur un padding qui corresponde a ce <ul>, et
   4 feuilles sont illisibles depuis la page (css2, deux css, jquery-ui.css). Si
   elle est un jour identifiee et corrigee a la source, ce !important pourra
   partir. */
#classiwrapper ul.awpcp-classifieds-menu { padding: 0 !important; }
#classiwrapper ul.awpcp-classifieds-menu li { margin: 0; border: 0; }
#classiwrapper ul.awpcp-classifieds-menu li a {
  display: block; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600;
  color: var(--ink); text-decoration: none; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px;
}
#classiwrapper ul.awpcp-classifieds-menu li a:hover {
  border-color: var(--mint); background: var(--mint-soft); color: var(--mint-ink);
}
#classiwrapper ul.awpcp-classifieds-menu .awpcp-classifieds-menu--post-listing-menu-item a {
  background: var(--mint); border-color: var(--mint); color: #093f31;
}

/* 3. pagination native */
#classiwrapper .awpcp-pagination-links {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-4);
}
#classiwrapper .awpcp-pagination-summary {
  font-size: 13px; color: var(--ink-2); margin-right: auto;
}
#classiwrapper .awpcp-pagination-links--link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  font-family: "Montserrat", sans-serif; font-size: 13.5px; font-weight: 600;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; background: var(--paper);
}
#classiwrapper a.awpcp-pagination-links--link:hover {
  border-color: var(--blue); color: var(--blue);
}
#classiwrapper span.awpcp-pagination-links--link {
  background: var(--mint); border-color: var(--mint); color: #093f31;
}

/* Pagination du haut resserree. Elle occupait 148px entre le filet du bandeau
   d'outils et la premiere annonce, pour 36px de boutons : 34px de marge du
   bandeau, 14px de #classiwrapper .pager (mda2018/style.css:3226), nos 22px de
   margin-top ci-dessus, les boutons, 8px du theme, puis 34px du rythme de la
   grille. Une telle respiration n'a pas de sens entre le compteur et la liste ;
   celle du BAS doit en revanche rester detachee de la derniere carte, d'ou le
   ciblage par « la pagination qui precede immediatement la liste » plutot que
   par :first-of-type. Mesure apres correctif : 64px.

   L'ancrage sur #classiwrapper est indispensable et non decoratif : la regle du
   theme et la notre plus haut valent (1,1,0), qu'un selecteur sans identifiant
   ne peut pas battre. :has() est deja utilise dans cette feuille. */
#classiwrapper .awpcp-pagination:has(+ .awpcp-listings) {
  margin-top: 0; margin-bottom: var(--sp-3);
}
#classiwrapper .awpcp-pagination:has(+ .awpcp-listings) .awpcp-pagination-links {
  margin: 0;
}

/* Formulaire natif « Nombre d'annonces par page », sous la pagination du bas :
   remonte dans le bandeau d'outils a cote de « Trier par », voir
   MDA_CL_Listings_Page::render_toolbar(). Masque ici plutot que deplace — il est
   imprime dans la pagination sans aucun filtre pour l'en extraire, et le CSS ne
   change pas un noeud de parent.

   Le masquer n'est pas cosmetique : son action est vide, donc une soumission GET
   repartait de l'URL privee de sa chaine de requete et perdait tous les criteres.
   Le laisser visible offrirait deux menus au comportement different. */
#classiwrapper .awpcp-pagination-form { display: none; }