/* ==========================================================================
   TADAGBÉ — L'annuaire (annuaire.html)
   Fiches typées, filtrables, avec demande de mise en relation.
   Prolonge opportunites.css (barre, filtres, fiche modale).
   ========================================================================== */

/* ---------- Recherche ------------------------------------------------------ */
.ann-rech{display:flex;align-items:center;gap:9px;flex:1;max-width:420px;
  background:#fff;border:1px solid var(--bord);border-radius:24px;padding:0 16px}
.ann-rech svg{flex:none;color:var(--texte-3)}
.ann-rech input{flex:1;min-width:0;border:0;background:none;padding:11px 0;
  font-size:13px;outline:none}
.ann-rech:focus-within{border-color:var(--vert);box-shadow:0 0 0 3px rgba(62,128,53,.12)}
.ann-rech input::-webkit-search-cancel-button{cursor:pointer}

/* Compteur par type dans les puces de filtre */
.ann-n{display:inline-block;margin-left:5px;font-size:9.5px;font-weight:800;
  opacity:.6}

/* ---------- Fiches -------------------------------------------------------- */
.ann-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ann{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bord);
  border-radius:var(--r-lg);border-left:3px solid var(--c);padding:20px 22px;
  transition:transform .4s var(--ease),box-shadow .4s}
.ann:hover{transform:translateY(-4px);box-shadow:var(--ombre-fort)}

.ann__hd{display:flex;gap:14px;align-items:flex-start;padding-bottom:14px;
  border-bottom:1px solid var(--gris-2)}
.ann__mono,.ann__photo{flex:none;width:48px;height:48px;border-radius:12px}
.ann__mono{display:grid;place-items:center;background:var(--c);color:#fff;
  font-family:'Archivo',Arial,sans-serif;font-size:15px;font-weight:800}
.ann__photo{object-fit:cover}
.ann__id{min-width:0}
.ann__type{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--c);
  background:color-mix(in srgb,var(--c) 12%,transparent);border-radius:20px;
  padding:4px 8px;margin-bottom:7px}
.ann__id h3{font-size:15.5px;line-height:1.25}
.ann__org{display:block;font-size:12px;color:var(--texte-2);margin-top:4px}
.ann__prof{display:block;font-size:11.6px;color:var(--texte-3);margin-top:2px}

.ann__meta{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:6px 18px}
.ann__meta li{display:flex;gap:6px;align-items:center;font-size:11.8px;color:var(--texte-2)}
.ann__meta svg{flex:none;color:var(--texte-3)}

.ann__pres{font-size:12.6px;line-height:1.65;color:var(--texte-2);margin-top:12px}

/* Ce que le profil recherche : c'est l'accroche d'une mise en relation. */
.ann__besoin{margin-top:13px;padding:11px 13px;background:var(--gris);
  border-left:3px solid var(--or);border-radius:0 var(--r) var(--r) 0;
  font-size:12.2px;line-height:1.6;color:var(--texte-2)}
.ann__besoin b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texte-3);margin-bottom:4px}

.ann__pied{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
.ann__pied .btn{flex:1;justify-content:center;white-space:nowrap}

/* ---------- Écrans étroits ------------------------------------------------- */
@media(max-width:1080px){
  .ann-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .ann-grid{grid-template-columns:minmax(0,1fr)}
  .ann-rech{max-width:none}
}