/**
 * ------------------------------------------------------------
 * DIRECTORY / PROFIL - Styles
 * By Agence 312
 * ------------------------------------------------------------
 */

/* (Optionnel mais recommandé) stabilité du layout */
.md-filter-card,
.md-member-card,
.md-member-inner,
.md-grid,
.md-filter-field input {
  box-sizing: border-box;
}

/* =========================
   Carte générique
   ========================= */
.md-card{
  padding: 18px;
  border-radius: 16px;
}

/* =========================
   Carte membre
   ========================= */
.md-member-card{
  border: 1px solid #ABDBFF;
  border-radius: 16px;
  padding: 20px;
  background: #fff;
}
.md-member-inner{
  border-radius: 16px;
  overflow: hidden;
}

/* =========================
   Bandeau (header) + titres
   ========================= */
.md-header{
  background: #ABDBFF;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.md-title{
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  color: #1c4a86;
}

.md-subtitle{
  margin-top: 10px;
  font-size: 14px;
  font-weight:300;
  color: #0662A5;
}

/* =========================
   Grille 2 colonnes + séparateur
   ========================= */
.md-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 6px;
  position: relative;
}
.md-grid .md-field:nth-child(1), .md-grid .md-field:nth-child(3) {margin-right:20px;}

/* Séparateur vertical */
@media (min-width: 520px){
  .md-grid:before{
    content:"";
    position:absolute;
    top: 4px;
    bottom: 4px;
    left: 50%;
    width: 1px;
    background: #ABDBFF;
    transform: translateX(-13px);
    pointer-events: none; /* amélioration: évite de gêner clics/sélections */
  }
}

/* Mobile : 1 colonne */
@media (max-width: 520px){
  .md-grid{ grid-template-columns: 1fr; text-align:center;}
  .md-grid:before{ display:none; }
  .md-grid .md-field:nth-child(1), .md-grid .md-field:nth-child(3) {margin-right:0px !important;}
}

/* Labels / valeurs */
.md-label{
  font-weight: 600;
  color: #0662A5;
  margin-bottom: 6px;
  font-szie:16px;
}
.md-value{
  font-szie:16px;
  font-weight: 300;
  color: #0662A5;
  word-break: break-word;
}

/* =========================
   Bouton
   ========================= */
.md-btn{
  display:block;
  margin: 8px 6px 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background:#1f4f9b;
  color:#fff !important;
  text-align:center;
  font-weight:800;
  text-decoration:none;
}
.md-btn:hover{ filter: brightness(.95); }

/* =========================
   Bloc Filtrer
   ========================= */
.md-filter-wrap{ margin: 30px 100px 100px; }

.md-filter-card{
  background: #E0CBFB;
  border-radius: 16px;
  padding: 45px 35px;
}
@media (max-width: 724px){
  .md-filter-wrap{ margin: 30px 20px 50px; }
  .md-filter-card{padding: 20px;}
}

.md-filter-title{
  font-family:"Poppins";
  font-weight: 600;
  font-size: 24px;
  color: #fff;
  margin-bottom: 20px;
}

.md-filter-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.md-filter-field input{
  width: 100%;
  height: 41px;
  border-radius: 100px;
  border: 1px solid #985BE6;
  background: #fff;
  padding: 0 16px;
  outline: none;
}
.md-filter-field input::placeholder{
  font-size:13px;
  font-weight:300;
  color:#985BE6;
  text-align:center;
}

/* petite amélioration UX */
.md-filter-field input:focus{
  border-color: rgba(120, 80, 200, .85);
}

.md-filter-actions{
  margin-top: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.md-filter-btn{
  border: 0;
  border-radius: 100px;
  padding: 10px 18px;
  font-weight: 800;
  cursor: pointer;
}

.md-filter-reset{
  text-decoration: none;
  font-weight: 800;
}

@media (max-width: 900px){
  .md-filter-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Grille Directory
   ========================= */
.md-directory-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-bottom:100px;
}

@media (max-width: 1100px){
  .md-directory-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .md-directory-grid{ grid-template-columns: 1fr; margin-bottom:50px;}
}

/* =========================
   Divers
   ========================= */
.md-filter-hint{
  margin-top: 30px;
  font-weight: 600;
  font-size:16px;
  color: #985BE6;
}

.md-directory-empty{
  padding: 22px;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
}