/* =========================================================================
   MUSLIMA WORK — LA PAGE DES ANNONCES

   Ce que cette feuille règle.

   La page montrait quatorze annonces dans quatorze grandes cartes, rangées
   deux par deux. Une carte porte un intitulé, une entreprise, un lieu, un
   contrat et une date : cinq lignes courtes pour près de trois cents pixels
   de haut. La page en faisait trois mille, aux trois quarts vides, et les
   mêmes cinq blocs revenaient quatorze fois de suite.

   Elle est maintenant un bandeau qui l'annonce, une colonne de filtres, et
   une grille de cartes compactes — trois par ligne sur un grand écran. La
   carte n'a pas disparu : elle a maigri. Elle tient dans deux cent dix à deux
   cent trente pixels et n'a plus de zone blanche sans fonction.

   Rien n'est retiré de ce qui était montré, et rien n'est ajouté : le mode de
   travail qui paraît dans les repères vient de la même localisation que le
   lieu, et « Nouveau » obéit toujours à la règle des trois plus récentes.

   Un seul balisage, trois grilles :

     à partir de 1280 px   trois cartes par ligne, à droite des filtres ;
     de 1024 à 1279 px     deux cartes, les filtres toujours à gauche ;
     de 600 à 1023 px      deux cartes, les filtres passés dans le panneau ;
     en dessous            une carte par ligne, et le panneau que « Filtrer
                           les annonces » fait monter du bas.

   Rien ici ne touche au filtrage : les champs, leurs noms, leurs valeurs et
   l'adresse que le formulaire compose sont ceux d'avant, à la lettre.

   Sommaire
     0. La largeur de la page
     1. Le bandeau d'introduction
     2. La grille de la page
     3. La colonne des filtres
     4. L'en-tête des résultats
     5. La grille des cartes
     6. La pagination
     7. L'état sans résultat
     8. Sous 1024 px : la barre compacte et le panneau
     9. Mouvement refusé
   ========================================================================= */

/* =========================================================================
   0. LA LARGEUR DE LA PAGE
   Elle suit la grille du site — celle du header et du hero — et non la
   colonne de 1180 px des pages de texte : le bandeau, les filtres et les
   lignes commencent tous à la même abscisse que le logo.
   ========================================================================= */
.ann .wrap,
.ann-intro .wrap{
  width:calc(100% - (2 * var(--grille-marge)));
  max-width:var(--grille-max);
  margin-inline:auto;
}

/* =========================================================================
   1. LE BANDEAU D'INTRODUCTION (21/10/2026)

   Le bandeau prune des parcours (parcours.css), dans le conteneur du header.
   Plus de bande rose pleine largeur ni de grand compteur : le fond de la
   page est blanc, et le nombre de résultats est près des filtres.
   ========================================================================= */
.ann-intro{padding-top:20px;background:#fff}

/* =========================================================================
   2. LA GRILLE DE LA PAGE
   Le corps se resserre : la page ne commence plus par un grand blanc, et ne
   finit plus par un autre avant le pied de page.
   ========================================================================= */
/* La zone des filtres et des résultats. Même fond que le bandeau et que la
   bande de la barre : il n'y a pas trois sections empilées, il y a une seule
   composition sur un seul fond. Le passage de l'une à l'autre est fait par
   l'espacement, et par rien d'autre. */
/* Le rose s'arrête au bandeau. Le corps de la page — les filtres et les
   cartes — est sur l'ivoire du site : c'est lui qui occupe les sept dixièmes
   de l'écran, et les cartes blanches s'y détachent sans qu'aucune bordure ait
   à le faire.

   La bascule se fait par un fondu de cinquante-six pixels en haut de la zone,
   et non par un trait : les deux teintes sont assez proches pour que le
   passage ne se voie pas, et assez distinctes pour que la page ne soit plus
   rose d'un bout à l'autre. Le dernier arrêt d'un dégradé se prolonge : le
   reste de la section est donc l'ivoire plein. */
/* Fond blanc sous le bandeau, et un espace resserré avant les filtres et
   les résultats. */
.sec.ann{
  background:#fff;
  padding-block:24px clamp(44px,4.6vw,64px);
}
.ann-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:0}

/* La gouttière entre les filtres et la grille est volontairement courte :
   chaque pixel qu'elle prend est un pixel de moins pour les cartes, et il en
   faut trois de front à partir de 1280 px. Les seuils suivent ceux de la
   grille de cartes, non l'inverse. */
@media (min-width:1024px){
  .ann-grille{grid-template-columns:262px minmax(0,1fr);gap:32px;align-items:start}
}
@media (min-width:1280px){
  .ann-grille{grid-template-columns:272px minmax(0,1fr);gap:36px}
}
@media (min-width:1440px){
  .ann-grille{grid-template-columns:284px minmax(0,1fr);gap:40px}
}

/* =========================================================================
   3. LA COLONNE DES FILTRES

   Plus de carte : ni fond, ni ombre, ni grand cadre autour de la colonne. Un
   titre, des champs empilés, un bouton pleine largeur, et le lien qui remet
   tout à zéro. Les champs eux-mêmes gardent leur fond blanc et prennent un
   filet rose très pâle — c'est là, et seulement là, que le cadre subsiste.
   ========================================================================= */

/* Le titre du bloc. Sous 1024 px, le formulaire est dans un panneau qui porte
   déjà son en-tête : le titre y devient inaudible à l'œil, mais il reste dans
   le document — c'est lui qui nomme le formulaire au lecteur d'écran. */
.ann-filtres__t{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.ann-panneau .ann-filtres{
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;
}

@media (min-width:1024px){
  /* La colonne suit le défilement, sous la barre du site : la liste est
     longue, et remonter chercher un filtre à chaque fois est une corvée. Le
     décalage tient compte de la hauteur de l'en-tête flottant.

     Elle ne dépasse pas sa colonne : c'est la grille qui borne un élément
     collant, et la colonne s'arrête donc avec la liste.

     `max-height` n'est pas une hauteur fixe : c'est un garde-fou. La colonne
     mesure ce que mesurent ses champs — cinq le plus souvent, huit quand une
     région, un département et une ville sont choisis — et sur un écran bas,
     le bouton « Rechercher » passerait sinon sous le bord de la fenêtre,
     hors d'atteinte. */
  #ann-filtres.ann-panneau{
    position:sticky;top:104px;
    max-height:calc(100vh - 128px);
    max-height:calc(100dvh - 128px);
    overflow-y:auto;overscroll-behavior:contain;
    background:none;border:0;border-radius:0;box-shadow:none;padding:0;
    scrollbar-width:thin;
  }

  /* Le bouton d'ouverture, le voile, l'en-tête et le pied du panneau
     n'existent que sur petit écran : ici, la colonne est là en permanence et
     ils n'auraient rien à ouvrir ni à fermer. */
  .ann-filtrer,.ann-voile,
  .ann-panneau__tete,.ann-panneau__pied,
  .ann-barre{display:none}

  /* Le titre reprend sa place. */
  .ann-filtres__t{
    position:static;width:auto;height:auto;margin:0 0 18px;
    overflow:visible;clip:auto;clip-path:none;
    padding-bottom:12px;border-bottom:1px solid #EAE2E6;
    font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--plum);
  }

  /* Les champs, les uns sous les autres : la colonne ne fait que deux cent
     soixante-dix pixels, et les trois menus qui tenaient sur une ligne n'y
     entreraient pas. */
  .ann-filtres__ligne{display:grid;grid-template-columns:minmax(0,1fr);gap:13px}
  .ann-filtres__ligne + .ann-filtres__ligne{margin-top:13px}
  .ann-filtres__ligne--lieu{padding-top:15px;border-top:1px solid #EDE6EA}
  .ann-filtres__actions{
    display:flex;flex-direction:column;align-items:stretch;gap:10px;
    margin-top:18px;padding-top:0;border-top:0;
  }
  .ann-filtres__ok{width:100%;height:46px}
  .ann-filtres__note{margin-top:15px;padding-top:15px;border-top:1px solid #EDE6EA;font-size:13.5px}

  /* Des champs plus bas et plus compacts que ceux du hero : ils sont cinq à
     huit dans une colonne, et cinquante-quatre pixels chacun faisaient
     descendre le bouton bien au-delà de la première annonce. */
  .ann-panneau .field{gap:6px}
  .ann-panneau .field > label{font-size:13px;font-weight:600;color:#3E2B38}
  .ann-panneau .input,
  .ann-panneau .select{
    height:46px;padding:0 14px 0 38px;
    border:1px solid #E9E1E5;border-radius:8px;
    background-color:#FFFFFF;
    font-size:14.5px;box-shadow:none;
  }
  .ann-panneau .select{padding-right:36px;background-position:right 13px center}
  .ann-panneau .field-ctl .ico{left:13px;width:16px;height:16px}
  .ann-panneau .field-ctl .ico{color:#7A6B74}
  /* Un champ renseigné ne se colore pas en rose : style.css lui donne un fond
     « #FFF9FC » et un filet rose, et c'était un aplat rose de plus dans la
     colonne. Il garde son fond blanc — c'est sa valeur qui dit qu'il est
     rempli, pas sa teinte. */
  .ann-panneau .select.is-set{background-color:#FFFFFF;border-color:#DCD2D8;color:var(--plum)}
  .ann-panneau .input:hover,
  .ann-panneau .select:hover{border-color:#D8CCD3}
  .ann-panneau .input:focus,
  .ann-panneau .select:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(195,35,113,.12)}
}

/* Le lien discret qui remet la recherche à zéro. Il ne paraît que si un
   filtre est posé — la page ne le peint pas autrement. */
.ann-filtres__vider{
  display:inline-block;align-self:center;
  font-size:13.5px;font-weight:600;color:#6E6470;text-decoration:none;
  padding:2px 0;
  transition:color 160ms var(--ease);
}
.ann-filtres__vider:hover{color:var(--rose);text-decoration:underline;text-underline-offset:3px}

/* =========================================================================
   4. L'EN-TÊTE DES RÉSULTATS
   Une ligne, pas une carte : le décompte à gauche, la page à droite.
   ========================================================================= */
.ann-tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 6px;
}
/* Même raison que pour les repères des lignes : « --ink-3 » passe sous le
   seuil AA sur le blanc chaud. */
.ann__compte{margin:0;font-size:15px;line-height:1.4;color:#6E6470}
.ann__compte strong{font-weight:700;color:var(--plum)}
.ann__compte-s{color:#6E6470}
.ann-tete__page{
  margin:0;flex:none;
  font-size:13.5px;line-height:1.4;color:#6E6470;font-variant-numeric:tabular-nums;
}

/* =========================================================================
   5. LA GRILLE DES CARTES

   La carte elle-même n'est plus décrite ici : elle est partagée avec
   l'accueil et le bas des fiches, et vit dans carte-offre.css. Cette page ne
   décide plus que du nombre de colonnes et de l'écart entre elles — c'est
   tout ce qu'une page a à dire d'une carte qu'elle n'a pas dessinée.

     à partir de 1280 px   trois cartes par ligne, à droite des filtres ;
     de 1024 à 1279 px     deux cartes, les filtres toujours à gauche ;
     de 600 à 1023 px      deux cartes, les filtres passés dans le panneau ;
     en dessous            une carte par ligne.
   ========================================================================= */
.ann-cartes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:18px;
}
/* L'élément de liste ne dessine rien : il porte la carte, qui l'occupe en
   entier. C'est ce qui donne aux cartes d'une même ligne la même hauteur. */
.ann-cartes__item{display:flex;min-width:0}

/* Le seuil des deux colonnes est bas — six cents pixels : à cette largeur,
   une carte fait encore deux cent quatre-vingts pixels, ce qui suffit à son
   intitulé. Le seuil des trois tient compte de la colonne de filtres, qui
   prend deux cent soixante-dix pixels sur la gauche. */
@media (min-width:600px){
  .ann-cartes{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media (min-width:1280px){
  .ann-cartes{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
@media (min-width:1440px){
  .ann-cartes{gap:20px}
}
/* Entre 1024 et 1279 px, la colonne de filtres est là et la grille n'a que
   six cent cinquante pixels : deux cartes, pas trois. */
@media (min-width:1024px) and (max-width:1279.98px){
  .ann-cartes{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}

/* =========================================================================
   6. LA PAGINATION
   Un filet, puis trois choses sur une ligne : revenir, où l'on est, avancer.
   Le numéro ne flotte plus seul au milieu d'un grand vide, et le pied de page
   suit de près.
   ========================================================================= */
/* Trois colonnes, et non une rangée souple : les deux boutons n'ont pas la
   même largeur — « Page précédente » et « Page suivante » n'ont pas le même
   nombre de lettres, et l'un des deux manque à la première et à la dernière
   page. Une rangée souple faisait donc dériver le numéro du milieu. Ici, la
   colonne centrale est au milieu de la ligne, quoi qu'il y ait autour. */
.ann-pages{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  margin-top:26px;padding-top:20px;border-top:1px solid #EDE5E9;
}
.ann-pages > :first-child{justify-self:start}
.ann-pages > :last-child{justify-self:end}
.ann-pages__etat{
  text-align:center;
  font-size:13.5px;font-weight:500;color:#6E6470;font-variant-numeric:tabular-nums;
}
.ann-pages__n{font-size:15px;font-weight:700;color:var(--plum)}

/* =========================================================================
   7. L'ÉTAT SANS RÉSULTAT
   Il vient à la place qu'auraient prise les lignes. Il n'a plus de carte :
   un filet, du texte centré, et de quoi repartir.
   ========================================================================= */
.ann__vide{
  display:grid;justify-items:center;gap:10px;
  margin-top:4px;padding:52px 24px;
  background:#FFFFFF;border:1px solid #ECE4E8;border-radius:8px;box-shadow:none;
  text-align:center;
}
.ann__vide-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-top:8px}

/* =========================================================================
   8. SOUS 1024 px

   La liste d'abord. Le formulaire ne disparaît pas — il attend dans un
   panneau, et le bouton dit combien de filtres sont posés.
   ========================================================================= */
@media (max-width:1023.98px){
  /* --- La barre compacte -------------------------------------------------
     Le mot-clé et sa loupe, sur une ligne. Les autres filtres la suivent en
     valeurs cachées — chercher un mot ne doit pas effacer la région qu'on
     venait de choisir. Le bouton des filtres, lui, n'est pas dans cette
     barre : il est le premier élément de la grille de la page, au-dessus
     d'elle, et c'est là qu'il reste. */
  .ann-barre{
    display:flex;align-items:center;gap:8px;
    margin-bottom:16px;
  }
  .ann-barre__champ{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
  .ann-barre__champ .ico{
    position:absolute;left:14px;width:17px;height:17px;color:#8A7A83;pointer-events:none;
  }
  .ann-barre__champ .input{
    width:100%;height:46px;padding:0 14px 0 40px;
    background:#FFFFFF;border:1px solid #E9E1E5;border-radius:9px;
    font-size:16px;   /* 16 px : en dessous, un iPhone agrandit la page au focus */
  }
  .ann-barre__ok{
    --h:46px;flex:none;width:46px;padding:0;border-radius:9px;
  }
  .ann-barre__ok svg{width:18px;height:18px}

  /* --- Le bouton des filtres ---------------------------------------------
     Il occupe sa rangée, en toutes lettres et sur toute la largeur : « Filtres »
     seul, dans un bouton de la taille d'un mot, demandait de deviner ce qu'il
     ouvrait. */
  .ann-filtrer{
    display:flex;align-items:center;justify-content:center;gap:9px;
    width:100%;margin-bottom:10px;
    height:46px;padding:0 16px;
    background:#FFFFFF;border:1px solid #E9E1E5;border-radius:9px;
    font-size:14.5px;font-weight:600;color:var(--plum);cursor:pointer;
    transition:border-color 180ms ease,color 180ms ease;
  }
  .ann-filtrer:hover{border-color:#951753;color:#951753}
  .ann-filtrer__ico{display:grid;place-items:center;color:#7C1648}
  /* La pastille : combien de filtres sont posés. Elle ne paraît que s'il y en
     a — un zéro n'apprend rien. */
  .ann-filtrer__n{
    display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
    background:linear-gradient(105deg,#951753,#C92D78);border-radius:10px;
    font-size:12px;font-weight:700;color:#FFFFFF;
  }

  /* --- Le voile ----------------------------------------------------------- */
  .ann-voile{
    position:fixed;inset:0;z-index:300;
    background:rgba(42,12,28,.44);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;
    transition:opacity 240ms ease,visibility 240ms ease;
  }
  .ann-voile.is-ouvert{opacity:1;visibility:visible}

  /* --- Le panneau ---------------------------------------------------------
     Il monte du bas et s'arrête aux neuf dixièmes de l'écran : ce qui reste
     visible de la page derrière lui dit qu'on ne l'a pas quittée. */
  .ann-panneau{
    position:fixed;left:0;right:0;bottom:0;z-index:310;
    display:flex;flex-direction:column;
    max-height:90vh;max-height:90svh;
    background:#FFFFFF;
    border-radius:18px 18px 0 0;
    box-shadow:0 -18px 44px rgba(42,12,28,.24);
    transform:translateY(100%);
    visibility:hidden;
    transition:transform 300ms cubic-bezier(.22,.68,.28,1),visibility 300ms;
  }
  .ann-panneau.is-ouvert{transform:translateY(0);visibility:visible}

  .ann-panneau__tete{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;
    padding:18px 20px 14px;border-bottom:1px solid #F1E8EC;
  }
  .ann-panneau__t{margin:0;font-size:17px;font-weight:600;color:#2A1220}
  .ann-panneau__x{
    display:grid;place-items:center;width:36px;height:36px;flex:none;
    background:transparent;border:1px solid #E8DDE3;border-radius:9px;
    color:#5A4650;cursor:pointer;
  }
  .ann-panneau__x:hover{border-color:#951753;color:#951753}

  /* Le corps défile, le pied ne bouge pas : le bouton de validation reste
     sous le pouce quelle que soit la longueur de la liste de filtres. */
  .ann-panneau__corps{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 8px}
  .ann-panneau__pied{
    flex:none;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
    border-top:1px solid #F1E8EC;background:#FFFFFF;
  }
  /* Le bouton « Rechercher » du formulaire fait double emploi avec celui du
     pied : dans le panneau, c'est le pied qui valide. */
  .ann-panneau__corps .ann-filtres__ok{display:none}
  .ann-panneau__corps .ann-filtres__actions{margin-top:6px}
}

/* --- Le bandeau et les lignes sur téléphone ------------------------------- */
@media (max-width:759.98px){
  /* Le bouton des filtres suit le nombre de près : sur un téléphone, chaque
     dizaine de pixels vide en haut de page est une annonce de moins à l'écran. */
  /* Le compteur passe sous le paragraphe et s'aligne à gauche, sur le même axe
     que tout le reste. La composition ne change pas — le nombre, le filet, la
     mention sur deux lignes —, elle se réduit : sur une colonne unique, un
     chiffre de soixante-huit pixels ouvrirait un trou au milieu du haut de
     page. */

  .ann-intro{padding-top:14px}
  .sec.ann{padding-top:18px}
  .ann-tete{align-items:baseline}
  .ann__compte{font-size:14.5px}
  .ann-tete__page{font-size:12.5px}

  .ann-cartes{gap:14px}

  .ann-pages{
    grid-template-columns:1fr 1fr;grid-template-areas:"etat etat" "prec suiv";
    gap:12px;margin-top:22px;padding-top:16px;
  }
  .ann-pages__etat{grid-area:etat;text-align:left}
  /* Les deux places des boutons sont tenues, occupées ou non : à la première
     page, « Page suivante » reste à droite plutôt que de glisser à gauche. */
  .ann-pages > :nth-child(1){grid-area:prec;justify-self:stretch}
  .ann-pages > :nth-child(3){grid-area:suiv;justify-self:stretch}
  .ann-pages__b{width:100%;justify-content:center}

  .ann__vide{padding:40px 20px}
}

/* =========================================================================
   9. MOUVEMENT REFUSÉ
   Le panneau s'affiche et s'efface sans glisser ; les cartes ne montent pas,
   ni à l'entrée ni sous la souris. L'entrée elle-même est déjà neutralisée
   par app.js, qui pose `is-in` sur tout d'un coup lorsque le mouvement est
   refusé ; le filet et le fond, eux, changent encore — ce sont des couleurs,
   non un mouvement.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .ann-panneau,.ann-voile{transition:none}
}