/* AidFacile - Professionnels : les composants
   Cartes, fiche détaillée, boutons de contact, message d'attente.
   Cette feuille ne contient AUCUNE règle de page : elle peut donc être
   chargée n'importe où, y compris sur l'accueil, sans rien déranger.
   Une seule définition de la carte pour tout le site. */



/* Un bloc masqué doit disparaître, même quand sa classe impose un display.
   Sans cette règle, .grid{display:grid} l'emportait sur l'attribut hidden et
   les professionnels d'une recherche précédente restaient affichés sous le
   message « aucun professionnel ». */
[hidden]{display:none!important}


/* Fenêtre « Comment ça marche » */
.fiche-boite--etroite{max-width:520px}

.me-titre{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:600;margin-bottom:14px;padding-right:36px}

.me-intro{font-size:.82rem;line-height:1.65;color:#566060;margin-bottom:16px}

.me-etapes{list-style:none;counter-reset:etape;margin:0 0 4px;padding:0}

.me-etapes li{counter-increment:etape;position:relative;padding:0 0 14px 38px;font-size:.82rem;line-height:1.65;color:#566060}

.me-etapes li::before{content:counter(etape);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:#E8F3EC;border:1px solid #A8CDB6;color:#457857;font:700 .72rem 'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center}

.me-etapes strong{color:#252F28}


.empty-state{padding:32px 22px;text-align:center;background:rgba(255,255,255,.72);border:1.5px dashed #A8CDB6;border-radius:18px;color:#566060}

.empty-state .icon{display:block;font-size:2rem;margin-bottom:7px}

.empty-state strong{display:block;font-family:'Fraunces',serif;font-size:1.1rem;color:#252F28;margin-bottom:5px}

.empty-state p{font-size:.82rem;line-height:1.55;max-width:520px;margin:0 auto}

.empty-state[hidden]{display:none}


.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}

.pro-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px;border:1.5px solid rgba(100,140,110,0.14);border-left:4px solid #457857;border-radius:18px;background:#F8FBF8;box-shadow:0 2px 12px rgba(30,50,35,0.06);transition:.18s;cursor:pointer}

.pro-card:hover{transform:translateY(-2px);box-shadow:0 6px 32px rgba(30,50,35,0.10)}

.pro-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}

.pro-logo{flex-shrink:0;width:46px;height:46px;border-radius:14px;object-fit:contain;background:#fff;border:1.5px solid;padding:3px}

.pro-initials{flex-shrink:0;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font:700 .95rem 'DM Sans',sans-serif;color:#fff}

.pro-id{min-width:0;flex:1}

.pro-card h3{font-family:'Fraunces',serif;font-size:1.08rem;line-height:1.3;font-weight:600;margin-bottom:3px}

.pro-cat{font-size:.72rem;font-weight:600;color:#566060;line-height:1.4}

.pro-verified{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:#E8F3EC;color:#457857;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:7px}

.pro-distance{font-size:.78rem;font-weight:600;color:#252F28;margin-bottom:10px}

.pro-desc{font-size:.78rem;line-height:1.55;color:#566060;margin-bottom:11px}

.pro-facts{display:flex;flex-direction:column;gap:6px;flex:1;margin-bottom:12px;padding:10px;border-radius:11px;background:#F7FAF7;border:1px solid rgba(100,140,110,.10)}

.pro-fact{font-size:.72rem;line-height:1.45;color:#566060}

.pro-fact strong{color:#252F28;font-weight:600}

.pro-more{padding-top:11px;border-top:1px solid rgba(100,140,110,0.14);font:700 .72rem 'DM Sans',sans-serif;color:#457857}


/* Fiche détaillée */
/* z-index élevé : la fiche s'ouvre aussi depuis le panneau du parcours,
   qui est lui-même au-dessus de la page. Elle doit rester devant. */
.fiche-fond{position:fixed;inset:0;z-index:400;background:rgba(20,35,25,.45);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}

.fiche-boite{position:relative;width:100%;max-width:620px;background:#F8FBF8;border:1px solid rgba(100,140,110,0.14);border-radius:22px;box-shadow:0 20px 60px rgba(20,40,25,.28);padding:26px}

.fiche-fermer{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(100,140,110,0.14);background:#F1F5F1;color:#566060;font-size:.9rem;cursor:pointer}

.fiche-fermer:hover{background:#E8F3EC;color:#457857;border-color:#A8CDB6}

.fiche-tete{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;padding-right:36px}

.fiche-tete h2{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:600;line-height:1.25;margin-bottom:4px}

.fiche-presentation{font-size:.88rem;line-height:1.65;color:#566060;margin-bottom:16px}

.fiche-details{margin:18px 0 0;border-top:1px solid rgba(100,140,110,0.14)}

.fiche-rang{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid rgba(100,140,110,0.14);font-size:.8rem;line-height:1.5}

.fiche-rang dt{flex:0 0 44%;color:#566060;font-weight:600}

.fiche-rang dd{flex:1;color:#252F28}

.fiche-note{display:block;margin-top:4px;font-size:.72rem;color:#566060;line-height:1.5}

.fiche-avertissement{margin-top:16px;padding:12px 14px;border-radius:12px;background:#F1F5F1;border:1px solid rgba(100,140,110,0.14);font-size:.72rem;line-height:1.6;color:#566060}


.pro-actions{display:flex;gap:7px;flex-wrap:wrap;padding-top:11px;border-top:1px solid rgba(100,140,110,0.14);margin-top:4px}

.pro-action{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border-radius:999px;text-decoration:none;font-size:.75rem;font-weight:700;transition:.16s}

.pro-action--primary{background:#457857;color:#fff}
.pro-action--primary:hover{opacity:.88}

.pro-action--secondary{background:#F1F5F1;color:#566060;border:1px solid rgba(100,140,110,0.14)}

.pro-action--secondary:hover{border-color:#A8CDB6;color:#457857;background:#E8F3EC}
@media (max-width:760px){
  
  .grid{grid-template-columns:1fr}
  
  .fiche-boite{padding:20px 18px}
  
  .fiche-rang{flex-direction:column;gap:3px}
  
  .fiche-rang dt{flex:none}
}

.apercu-zone .pro-card{cursor:default}

.apercu-zone .pro-card:hover{transform:none;box-shadow:0 2px 12px rgba(30,50,35,0.06)}