/* Annonces — 04/09/2026 (remarque de btob : « retravailler le design des
   demandes de travaux, services, location, vente, CV, offres d'emploi, en
   liste et quand on les consulte »).

   1. Les CARTES des onglets Demandes, Offres d'emploi, Candidatures,
      Location / Vente (.bja, rendues par marketplace.min.js) : même famille
      graphique que le fil (bleu #0c376b, vert #8abf56, gris bleutés), une
      image 16/9, un type lisible, trois faits, l'auteur, la date, Partager et
      un bouton d'action. Sur téléphone, la carte passe à l'horizontale
      (image à gauche) : quatre à cinq annonces par écran.
   2. Les PAGES d'une annonce (.ap-*) : en-tête (type, titre, ville, date),
      galerie, description, faits, auteur et actions à droite ; sur téléphone
      une barre d'action fixe en bas (Partager, Contacter / Proposer mes
      services / Postuler). */

/* ---------- cartes ---------- */
.bja-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.bja{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #d9e1ec;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(12,55,107,.06),0 6px 20px -12px rgba(12,55,107,.25);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.bja:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(12,55,107,.45)}
.bja:focus-within{outline:2px solid #8abf56;outline-offset:2px}
.bja-media{position:relative;display:block;aspect-ratio:16/9;background:#e3e9f1;overflow:hidden}
.bja-media img{width:100%;height:100%;object-fit:cover;display:block}
.bja-kind{position:absolute;left:8px;top:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:3px 7px;background:rgba(255,255,255,.94);color:#0c376b;line-height:1.3}
.bja-kind.k-demande{color:#b45f06}.bja-kind.k-emploi{color:#0c376b}.bja-kind.k-cv{color:#4c1d95}.bja-kind.k-location{color:#0f5e58}.bja-kind.k-vente{color:#3f6b1c}
.bja-urgent{position:absolute;right:8px;top:8px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:3px 7px;background:#c0392b;color:#fff;line-height:1.3}
.bja-body{display:flex;flex-direction:column;gap:6px;padding:10px 12px 10px;min-width:0;flex:1}
.bja-title{font-size:15px;font-weight:700;color:#10131b;text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.bja-title:hover{color:#0c376b}
.bja-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:#3d4757}
.bja-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.bja-meta span i{font-size:11px;color:#98a4b6;flex:none}
.bja-meta span em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bja-meta .prix{font-weight:700;color:#0c376b}
.bja-perm{font-size:11.5px;font-weight:600;color:#3f6b1c;background:#eaf4dd;border-radius:999px;padding:2px 8px;align-self:flex-start}
.bja-perm.pro{color:#0c376b;background:#e6eef8}
.bja-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid #e9eef5;min-width:0}
.bja-author{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:1;font-size:12.5px;color:#3d4757}
.bja-author img{width:24px;height:24px;border-radius:50%;object-fit:cover;background:#e3e9f1;flex:none}
.bja-author span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bja-when{font-size:11.5px;color:#98a4b6;white-space:nowrap}
.bja-share{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #d9e1ec;background:#fff;color:#3d4757;cursor:pointer;font-size:13px;display:grid;place-items:center}
.bja-share:hover{background:#f6f8fc;color:#0c376b}
.bja-cta{flex:none;border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:700;background:#0c376b;color:#fff;text-decoration:none;white-space:nowrap}
.bja-demande .bja-cta{background:#8abf56;color:#10131b}
.bja-cta:hover{filter:brightness(1.08)}
.bja-vide{grid-column:1/-1;background:#fff;border:1px solid #d9e1ec;border-radius:12px;padding:22px 18px;text-align:center;color:#3d4757;font-size:14.5px}
/* téléphone : carte horizontale, compacte */
@media (max-width:640px){
  .bja-grid{grid-template-columns:1fr;gap:10px}
  .bja{flex-direction:row;align-items:stretch}
  .bja-media{flex:0 0 118px;aspect-ratio:auto;min-height:118px}
  .bja-kind{left:6px;top:6px;font-size:9.5px;padding:2px 5px}
  .bja-urgent{right:auto;left:6px;top:auto;bottom:6px}
  .bja-body{padding:9px 10px 8px;gap:4px}
  .bja-title{font-size:14px}
  .bja-meta{font-size:12px;gap:2px 8px}
  .bja-meta span:nth-child(n+4){display:none}
  .bja-foot{padding-top:5px;gap:6px}
  .bja-author{font-size:12px}
  .bja-cta{padding:6px 10px;font-size:12px}
  .bja-share{width:30px;height:30px}
  .bja-perm{display:none}
  .bja-foot{flex-wrap:wrap;gap:4px 6px}
  .bja-cta{flex:1 1 100%;text-align:center;margin-top:2px}
}
/* les cartes sponsorisées du panneau gardent leur habillage et occupent une case */
.bja-grid .card-container{min-width:0}
@media (max-width:640px){.bja-grid .card-container .card-image img{max-height:180px}}

/* ---------- page d'une annonce ---------- */
.ap-wrap{max-width:1080px;margin:0 auto;padding:16px 14px 40px}
@media (max-width:1023px){.ap-wrap{padding-top:calc(var(--btb-h-entete-mobile,52px) + 14px)}}
/* 04/09/2026 (bug signale par btob : « repare ce bug lorsque tu scroll dans une
   annonce ») : ces 150 px etaient reserves sous le CONTENU pour que la barre
   flottante ne le recouvre pas. Mais la page d'annonce se termine par le pied
   de page, pas par .ap-wrap : la barre recouvre donc le PIED, jamais le
   contenu, et la reserve ne servait qu'a creuser une bande blanche de 150 px
   entre la derniere carte et le pied. Mesure sur la production, /vente/...-364
   a 440 px : bas du contenu 1165, haut du pied 1315.
   La reserve descend donc a la fin du document, sous le pied de page, la ou la
   barre (65 px de haut, posee a 72 px du bas) et la navigation basse la
   recouvrent entierement. Le forum, lui, garde la sienne sur .fo-wrap : ses
   pages n'ont pas de pied de page, .fo-wrap y est bien le dernier bloc. */
@media (max-width:920px){
  .ap-wrap{padding-bottom:40px}
  #site-footer{padding-bottom:150px}
}
.ap-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ap-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#0c376b;text-decoration:none;background:#fff;border:1px solid #d9e1ec;border-radius:999px;padding:7px 12px;cursor:pointer;font-family:inherit;min-height:36px}
.ap-back:hover{background:#e6eef8}
.ap-head{margin:14px 0 12px;min-width:0}
.ap-kind{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:3px 8px;background:#fbeedd;color:#b45f06;line-height:1.3}
.ap-kind.k-emploi{background:#e6eef8;color:#0c376b}.ap-kind.k-cv{background:#ede9fe;color:#4c1d95}.ap-kind.k-location{background:#dff5f2;color:#0f5e58}.ap-kind.k-vente{background:#eaf4dd;color:#3f6b1c}
.ap-head h1,.ap-head .ap-h1{font-size:24px;line-height:1.2;font-weight:800;color:#10131b;margin:8px 0 6px;overflow-wrap:anywhere;font-family:inherit}
.ap-sub{font-size:13.5px;color:#67748a;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.ap-sub span{display:inline-flex;align-items:center;gap:5px}
.ap-sub i{font-size:12px;color:#98a4b6}
.ap-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
@media (max-width:920px){.ap-layout{grid-template-columns:minmax(0,1fr)}}
.ap-main{min-width:0}
.ap-card{background:#fff;border:1px solid #d9e1ec;border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(12,55,107,.06),0 6px 20px -12px rgba(12,55,107,.25);margin-bottom:14px;min-width:0}
.ap-card h2,.ap-card h3{font-size:15px;font-weight:800;margin:0 0 10px;color:#10131b;font-family:inherit}
.ap-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:14px}
.ap-gallery:empty{display:none}
.ap-gallery img{width:100%;height:110px;object-fit:cover;display:block;cursor:pointer;border-radius:10px;background:#e3e9f1}
.ap-gallery img:first-child{grid-column:1/-1;height:min(42vw,280px);border-radius:14px}
.ap-gallery img:only-child{height:min(44vw,300px)}
/* 04/09/2026 (remarque de btob : « la photo, il faut qu'elle soit un peu plus
   redimensionnée, plus petite, et qu'on clique dessus et qu'elle s'ouvre ») :
   la première image passe de 380 à 280 px de haut, et le fait qu'elle s'ouvre
   au clic devient visible — loupe au survol, curseur d'agrandissement. */
.ap-gallery img{cursor:zoom-in;transition:filter .12s ease,transform .12s ease}
.ap-gallery img:hover{filter:brightness(.94)}
.ap-gallery{position:relative}
.ap-gallery::after{content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;background:rgba(16,19,27,.62);color:#fff;display:grid;place-items:center;font-size:14px;pointer-events:none;opacity:0;transition:opacity .12s ease}
.ap-gallery:hover::after{opacity:1}
.ap-gallery:empty::after{display:none}
@media (max-width:640px){
  .ap-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .ap-gallery img{height:76px}
  .ap-gallery img:first-child{height:min(52vw,220px)}
  .ap-gallery img:only-child{height:min(54vw,230px)}
  .ap-gallery::after{opacity:1}
}
.ap-text{font-size:15px;line-height:1.6;color:#10131b;overflow-wrap:anywhere}
.ap-text p{margin:0 0 10px}.ap-text p:last-child{margin-bottom:0}
.ap-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:420px){.ap-facts{grid-template-columns:1fr}}
.ap-facts .pd-det,.ap-fact{background:#f6f8fc;border:1px solid #e9eef5;border-radius:12px;padding:11px 13px;min-width:0}
.ap-facts .pd-det span,.ap-fact .k{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#67748a;margin-bottom:3px}
.ap-facts .pd-det b,.ap-fact .v{display:block;font-size:15px;font-weight:600;color:#10131b;overflow-wrap:anywhere}
.ap-facts .pd-det b a,.ap-fact .v a{color:#0c376b;text-decoration:none}.ap-facts .pd-det b a:hover{text-decoration:underline}
/* faits « anciens » (location) : un <p> « Libellé : <br> valeur » */
.ap-facts > p{background:#f6f8fc;border:1px solid #e9eef5;border-radius:12px;padding:11px 13px;min-width:0;font-size:15px;font-weight:600;color:#10131b;overflow-wrap:anywhere}
.ap-facts > p br{display:none}
.ap-perm{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 10px;margin-bottom:10px;background:#e6eef8;color:#0c376b}
.ap-perm.ok{background:#eaf4dd;color:#3f6b1c}
.ap-author{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:12px}
.ap-author img,.ap-author .ph{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#e3e9f1;display:block}
.ap-author .ph{display:grid;place-items:center;color:#0c376b;font-weight:800;font-size:18px}
.ap-author .lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#67748a;font-weight:700}
.ap-author b,.ap-author h1{display:block;font-size:16px;color:#10131b;margin:0;font-family:inherit;font-weight:700;overflow-wrap:anywhere;line-height:1.25}
.ap-author small{display:block;font-size:12.5px;color:#67748a}
.ap-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 16px;font-weight:700;font-size:14.5px;border:1px solid #0c376b;color:#0c376b;background:#fff;cursor:pointer;font-family:inherit;text-decoration:none;min-height:44px;line-height:1.2;white-space:nowrap}
.ap-btn:hover{background:#e6eef8}
.ap-btn.fill{background:#0c376b;color:#fff}.ap-btn.fill:hover{filter:brightness(1.08);background:#0c376b}
.ap-btn.green{background:#8abf56;border-color:#8abf56;color:#10131b}.ap-btn.green:hover{background:#8abf56;filter:brightness(1.04)}
.ap-btn.ghost{border-color:#d9e1ec;color:#3d4757}
.ap-btn[disabled],.ap-btn.off{opacity:.5;cursor:not-allowed}
.ap-actions{display:grid;gap:8px}
.ap-actions .ap-btn{width:100%}
.ap-aside-note{font-size:12.5px;color:#67748a;margin:10px 0 0}
.ap-report{margin-top:6px;font-size:13px}
.ap-report a,.ap-report button{color:#c0392b;font-weight:600;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;display:inline-flex;gap:6px;align-items:center;padding:6px 0}
.ap-bar{display:none}
@media (max-width:920px){
  .ap-side .ap-actions{display:none}
  .ap-bar{display:flex;position:fixed;left:0;right:0;bottom:72px;z-index:9998;background:#fff;border-top:1px solid #d9e1ec;padding:10px 12px;gap:8px;align-items:center;box-shadow:0 -6px 20px -12px rgba(0,0,0,.35)}
  .ap-bar .ap-btn{flex:1;padding:11px 10px}
  .ap-bar .ap-btn.ico{flex:0 0 46px;padding:0;width:46px}
  .ap-head h1,.ap-head .ap-h1{font-size:21px}
}
@media (min-width:921px){.ap-side{position:sticky;top:110px}}