/* =====================================================================
   ANNUAIRE VÉTÉRINAIRE — pages liste /{locale}/veterinarians[/{filtres}]
   (23/08/2026 : styles sortis des vues search-results / vet-results /
   vet-filters pour alléger le HTML ; chargé via @push('styles') avec
   ?v=filemtime). Aucune valeur Blade ici : l'image du bandeau est
   référencée en relatif (public/css → public/assets/img).
   ===================================================================== */

/* ---------- Hero : mobile compact ---------- */
@media (max-width: 767.98px) {
    .vets-search-hero { padding-top: 1.25rem !important; padding-bottom: 1.5rem !important; margin-bottom: 1rem !important; }
    .vets-search-hero h1 { font-size: 1.5rem !important; line-height: 1.25; margin-bottom: .5rem !important; }
    .vets-search-hero #vets-hint { font-size: .95rem !important; line-height: 1.4; }
    .vets-search-hero .breadcrumb { font-size: .8rem; }
}

/* Hero Section Style — image fournie (chien + chat a gauche, fond menthe).
   L'image est calee sur la hauteur du bandeau ; sa teinte prolonge le fond
   vers la droite et un degrade masque la couture (empreinte du bord droit). */
.vets-search-hero {
    position: relative;
    background:
        linear-gradient(90deg, rgba(232, 244, 235, 0) 18rem, #E8F4EB 38rem),
        #E8F4EB url('../assets/img/vetdir-hero.jpg') no-repeat left center / auto 100%;
    color: #fff;
    border-radius: 0;
    overflow: hidden;
}
[dir="rtl"] .vets-search-hero {
    background:
        linear-gradient(270deg, rgba(232, 244, 235, 0) 18rem, #E8F4EB 38rem),
        #E8F4EB url('../assets/img/vetdir-hero.jpg') no-repeat right center / auto 100%;
}
/* La cale qui ecarte le texte des animaux de l'image (>= 1200px) */
.vdir-pets-spacer { width: 20rem; }
/* Sous 1200px le texte repart du bord : fond uni, sans animaux derriere */
@media (max-width: 1199.98px) {
    .vets-search-hero, [dir="rtl"] .vets-search-hero {
        background: linear-gradient(180deg, #EAF7F1 0%, #F7F9FD 100%);
    }
}

.vets-search-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), transparent 55%);
    pointer-events: none;
}

.vets-search-hero .container,
.vets-search-hero .vdir-fluid {
    position: relative;
    z-index: 1;
}

/* Breadcrumb sur fond hero */
.breadcrumb-light .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-light a:hover {
    text-decoration: underline !important;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}

.vets-search-hero #vets-hint {
    /* Maquette : paragraphe discret sous un titre compact (ratio ~3:1) */
    font-size: 15.5px;
    line-height: 1.75;
    max-width: 34rem;
}

@media (max-width: 767.98px) {
    .vets-search-hero {
        border-radius: 0 0 1.5rem 1.5rem;
    }

    .vets-search-hero h1 {
        font-size: 2rem;
    }

    .vets-search-hero .lead {
        font-size: 1rem;
    }
}


/* Bandeau vert doux (repris du calendrier de vaccination) : le balisage
   hérité du fond bleu (text-white…) est re-teinté en sombre ici. */
.vets-search-hero { color: #101731; border-bottom: 1px solid #E2EFE9; }
.vets-search-hero::after { display: none; }
.vets-search-hero h1, .vets-search-hero .display-5 { color: #101731 !important; }
/* Titre bicolore maquette : « Trouvez le meilleur vétérinaire » noir,
   localisation (« près de chez vous » / ville choisie) en vert. */
.vets-search-hero h1 .vdir-h1-main { color: #101731; }
.vets-search-hero h1 .vdir-h1-loc { color: #157F56; }
.vets-search-hero .lead, .vets-search-hero .text-white-75, .vets-search-hero #vets-hint { color: #67708F !important; }
.vets-search-hero .text-white { color: #157F56 !important; }
.vets-search-hero .breadcrumb-light .breadcrumb-item + .breadcrumb-item::before { color: #8A91AD; }
.vets-search-hero .breadcrumb-light .breadcrumb-item.active { color: #67708F; }

/* ---------- Hero maquette : pastilles de chiffres ---------- */
/* Titre maquette : bloc étroit qui casse en deux lignes
   (« Trouvez le meilleur / vétérinaire à Ariana ») */
.vets-search-hero h1 { letter-spacing: -.02em; }
@media (min-width: 768px) {
    .vets-search-hero h1.display-5 { font-size: 2.35rem !important; line-height: 1.22; max-width: 36rem; }
    /* La partie verte ne se coupe jamais : le titre tient sur 2 lignes
       (« Trouvez le meilleur vétérinaire » / « près de chez vous » ou « à Ariana ») */
    .vets-search-hero h1 .vdir-h1-loc { white-space: nowrap; }
}
/* Bloc de chiffres maquette : plus large mais plus aéré, contenu discret
   (icônes 2.2rem, valeurs .95rem) */
.vdir-stats {
    background: #fff; border: 1px solid #E7EDF6; border-radius: 14px;
    padding: 1.1rem 1.5rem; display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem 2.4rem; box-shadow: 0 14px 34px rgba(16,23,49,.07); min-width: 23rem;
}
.vdir-stat { display: flex; align-items: center; gap: .65rem; }
.vdir-stat__ic {
    width: 2.2rem; height: 2.2rem; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.vdir-stat b { display: block; font-size: .95rem; color: #16203A; line-height: 1.2; }
.vdir-stat div > span { font-size: .68rem; color: #7A849B; }
@media (max-width: 575.98px) { .vdir-stats { min-width: 0; width: 100%; } }

/* ---------- Conteneur : MEME gabarit que tout le site (1600 px) ----------
   (harmonisation du 07/08 : plus de largeur derogatoire a 2400 px) */
.vdir-fluid {
    width: 100%;
    max-width: min(1600px, 100%);
    margin-inline: auto;
    padding-inline: clamp(1rem, 2.5vw, 40px);
}

/* ---------- Grille auto-adaptative : autant de cartes que la zone en tient,
   largeur minimale confortable, espacement constant ----------
   ~ 1 colonne < 640 px, 2 en tablette, 3 en 1024-1440, 4 vers 1920, 5 au-dela */
.vdir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr));
    gap: 1.25rem;
}
.vdir-grid > .col { width: auto; max-width: none; min-width: 0; padding: 0; flex: none; }
.vdir-grid--list { grid-template-columns: 1fr !important; }

/* ---------- Carte a droite : le composant du site, recadre en colonne ---------- */
.vdir-map .home-vets-map { padding: 0 !important; margin: 0 !important; max-width: 100%; }
/* L'en-tete du composant (H2 + « Voir tout ») est redondant ici */
.vdir-map .home-vets-map > .d-flex:first-child { display: none !important; }
/* Pas de moteur de recherche SUR la carte (maquette) : elle applique les
   critères choisis dans le moteur de la page. */
.vdir-map .vm-filters { display: none !important; }
/* Compteur exactement en haut a gauche : le style du composant (top 5.6rem,
   rendu dans le corps de page) passe apres le notre — !important requis. */
.vdir-map .home-vets-map .vm-count {
    top: 1rem !important;
    inset-inline-start: 1rem !important;
    inset-inline-end: auto !important;
}
.vdir-map__sticky { position: sticky; top: 96px; }
.vdir-map #vets-map { height: min(46rem, calc(100vh - 130px)); }
@media (max-width: 1199.98px) {
    .vdir-map__sticky { position: static; }
    .vdir-map #vets-map { height: 24rem; }
}

/* =====================================================================
   FILTRES (ex vet-filters.blade.php)
   ===================================================================== */
/* Bouton flottant des filtres (mobile) — aligné sur la pilule VERTE de
   la marketplace (.mk-fab-filter), l'identité actuelle du site (constat
   propriétaire 20/08 : l'ancien btn-primary turquoise détonnait).
   z-index 1030 : SOUS les offcanvas Bootstrap (1045) — l'ancien 1050
   flottait PAR-DESSUS le menu du site ouvert et cachait ses boutons. */
.vet-filter-fab {
    position: fixed;
    bottom: 80px;
    inset-inline-end: 16px;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1.4rem;
    background: #189B5D;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(24, 155, 93, 0.3);
}
.vet-filter-fab:hover, .vet-filter-fab:focus { background: #13824E; color: #fff; }
@media (min-width: 992px) { .vet-filter-fab { display: none !important; } }
#vetFiltersOffcanvas .offcanvas-body { overflow-y: auto; padding-bottom: 2rem; }

/* Barre de filtres maquette : encart blanc, champs séparés par un filet */
.vdir-bar {
    background: #fff; border: 1px solid #E7EDF6; border-radius: 16px;
    padding: .65rem .9rem; box-shadow: 0 10px 28px rgba(16,23,49,.06);
    position: relative; z-index: 5;
}
.vdir-bar .form-control, .vdir-bar .form-select,
.vdir-bar .choices__inner {
    border: 0 !important; box-shadow: none !important; background: transparent;
}
.vdir-bar__f { position: relative; }
.vdir-bar__f + .vdir-bar__f { border-inline-start: 1px solid #EEF1F7; }
.vdir-bar .form-control-lg { font-size: .9rem; padding-top: .55rem; padding-bottom: .55rem; }
.vdir-geo {
    width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid #E7EDF6;
    background: #fff; color: #157F56; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.vdir-geo:hover { background: #EAF7F1; }
.vdir-reset { font-size: .82rem; font-weight: 600; color: #7A849B; text-decoration: none; }
.vdir-reset:hover { color: #157F56; }

/* =====================================================================
   RÉSULTATS (ex vet-results.blade.php)
   ===================================================================== */
/* Publicité de l'annuaire (revu le 23/08/2026, 2e version).
   1re version : `grid-column: 1 / -1` — une rangée entière. ERREUR : si la
   pub ne tombe pas juste après une rangée COMPLÈTE, la grille ne peut pas
   la caser sur la rangée en cours et laisse les cellules restantes VIDES
   (constat propriétaire : « une seule fiche sur la ligne avant la pub »).
   Impossible à rattraper par des points de rupture : le nombre de colonnes
   ne suit pas la largeur d'écran (mesuré : 1024 px → 3 colonnes, 1280 → 2,
   1440 → 3), la carte latérale faisant varier la place disponible.
   2e version : la pub est une CELLULE ORDINAIRE de la grille. Elle
   s'intercale sans jamais laisser de trou, à n'importe quel nombre de
   colonnes, et n'enlève aucun vétérinaire (c'est une cellule EN PLUS, les
   12 fiches restent affichées). Non servie, elle est masquée par le layout
   (`!important`) et la grille se referme d'elle-même. */
.vdir-ad { align-self: start; }

/* ============ Cartes de l'annuaire (design maquette) ============ */
.vdir-strip {
    background: #F5F8F6; border: 1px solid #E4EFE8; border-radius: 14px;
    padding: .9rem 1.1rem; display: grid; gap: .8rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
.vdir-strip__i { display: flex; align-items: center; gap: .6rem; }
.vdir-strip__ic {
    width: 2.3rem; height: 2.3rem; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.vdir-strip__i b { display: block; font-size: 1.05rem; color: #16203A; line-height: 1.1; }
.vdir-strip__i div > span { font-size: .72rem; color: #7A849B; }

.vdir-views { border: 1px solid #E7EDF6; border-radius: 10px; overflow: hidden; }
.vdir-view-btn { border: 0; background: #fff; color: #98A1B3; padding: .35rem .6rem; }
.vdir-view-btn.is-on { background: #157F56; color: #fff; }

.vdir-card {
    background: #fff; border: 1px solid #E7EDF6; border-radius: 16px; overflow: hidden;
    height: 100%; display: flex; flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.vdir-card:hover { box-shadow: 0 16px 38px rgba(16,23,49,.10); transform: translateY(-2px); }
.vdir-card.vet-vip { border-color: #EBCB77; }

.vdir-card__cover {
    position: relative; height: 6.5rem; flex-shrink: 0;
    background: linear-gradient(120deg, #DFF0E7, #EDF6F1 60%, #F4F9FD);
}
.vdir-card__paw {
    position: absolute; inset-inline-end: 4.2rem; top: .4rem;
    font-size: 3.4rem; color: rgba(21,127,86,.10); pointer-events: none;
}
.vdir-card__badges { position: absolute; top: .65rem; inset-inline-start: .65rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; max-width: calc(100% - 3.5rem); z-index: 2; }
.vdir-card__dispo {
    background: #157F56; color: #fff; border-radius: 999px;
    padding: .18rem .6rem; font-size: .66rem; font-weight: 700;
}
.vdir-card__dispo--off { background: #9AA3B5; }
/* Ouvert / Fermé maintenant */
.vdir-card__etat { display: inline-flex; align-items: center; gap: .3rem; background: #fff; border-radius: 999px; padding: .18rem .6rem .18rem .5rem; font-size: .66rem; font-weight: 700; box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.vdir-card__etat i { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.vdir-card__etat--open { color: #157F56; }
.vdir-card__etat--open i { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
.vdir-card__etat--closed { color: #C93B3B; }
.vdir-card__etat--closed i { background: #EF4444; }
.vdir-card__actions {
    position: absolute; top: .55rem; inset-inline-end: .55rem;
    display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; z-index: 2;
}
.vdir-card__fav {
    width: 2rem; height: 2rem; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.95); color: #C4CBD8;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(16,23,49,.15);
}
.vdir-card__fav .text-danger { color: #dc3545 !important; }
.vdir-card__avatar {
    /* Maquette : grand portrait centré, logé DANS le bandeau (léger
       débord de ~0.6rem seulement sur le corps). left/translate
       physiques : le centrage est symétrique, valable aussi en RTL. */
    position: absolute; bottom: -.6rem; left: 50%; transform: translateX(-50%);
    width: 5.4rem; height: 5.4rem; border-radius: 50%; overflow: hidden;
    border: 4px solid #fff; box-shadow: 0 6px 16px rgba(16,23,49,.16);
    display: block; background: #F2F5FA;
}
.vdir-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vdir-card__note {
    position: absolute; bottom: -.85rem; inset-inline-end: 1rem;
    background: #fff; border: 1px solid #F0E7CF; border-radius: 999px;
    padding: .18rem .6rem; font-size: .74rem; font-weight: 700; color: #16203A;
    box-shadow: 0 4px 10px rgba(16,23,49,.08);
}
.vdir-card__note i { color: #E9A800; margin-inline-end: .15rem; }
.vdir-card__note small { color: #98A1B3; font-weight: 500; }

.vdir-card__body { padding: 1.4rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex-grow: 1; }
.vdir-card__name a { color: #16203A; font-weight: 700; text-decoration: none; }
.vdir-card__loc { font-size: .78rem; color: #7A849B; margin-top: .2rem; }
.vdir-card__loc i { margin-inline-end: .25rem; }
.vdir-card__loc a { color: #7A849B; text-decoration: none; }
.vdir-card__loc a:hover { color: #157F56; }
.vdir-card__specs { font-size: .78rem; margin-top: .5rem; color: #46536B; }
.vdir-card__specs a { color: #46536B; text-decoration: none; font-weight: 500; }
.vdir-card__specs a:hover { color: #157F56; }
.vdir-dot { color: #C4CBD8; margin: 0 .3rem; }
.vdir-plus { color: #157F56 !important; font-weight: 700; text-decoration: none; margin-inline-start: .3rem; }
.vdir-card__animals { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.vdir-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #F4F7FB; color: #46536B; border-radius: 999px;
    padding: .22rem .6rem; font-size: .72rem; text-decoration: none;
}
.vdir-chip i { color: #157F56; font-size: .78rem; }
.vdir-chip:hover { background: #E7F3EC; color: #157F56; }
.vdir-chip--plus { background: #E7F3EC; color: #157F56; font-weight: 700; }
.vdir-card__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
    font-size: .74rem; color: #7A849B; margin-top: .65rem;
}
.vdir-card__meta i { margin-inline-end: .25rem; color: #98A1B3; }
.vdir-badge-domicile {
    background: #EAF0FB; color: #3B6FD4; border-radius: 999px;
    padding: .16rem .55rem; font-weight: 600;
}
.vdir-badge-domicile i { color: #3B6FD4; }
.vdir-zone { color: #7A849B; text-decoration: underline dotted; }
.vdir-zone:hover { color: #157F56; }
.vdir-card__desc {
    font-size: .8rem; color: #67708F; margin-top: .6rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vdir-card__foot {
    display: flex; gap: .6rem; margin-top: auto; padding-top: .9rem;
    border-top: 1px solid #F0F3F8; margin-top: .9rem;
}
.vdir-btn {
    border-radius: 10px; font-size: .84rem; font-weight: 600; padding: .5rem .9rem;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.vdir-btn--vide { border: 1px solid #E0E6EF; background: #fff; color: #16203A; }
.vdir-btn--vide:hover { border-color: #157F56; color: #157F56; }
.vdir-btn--vert { border: 0; background: #157F56; color: #fff; }
.vdir-btn--vert:hover { background: #0F6B47; color: #fff; }
.vdir-btn--vert:disabled { opacity: .75; }

/* Carte Leaflet du tiroir « réservation » (une par vétérinaire, fabriquée à
   l'ouverture du tiroir) */
.vdir-vetmap { height: 400px; position: relative; }

/* =====================================================================
   « EN BREF » — faits calculés sous la grille (pages à une facette,
   indexables, ≥ 3 vétérinaires). Discret, même vocabulaire que .vdir-strip.
   ===================================================================== */
.vdir-bref {
    background: #fff; border: 1px solid #E7EDF6; border-radius: 14px;
    padding: 1rem 1.2rem; margin-top: 1.25rem; font-size: .84rem; color: #46536B;
}
.vdir-bref h2 { font-size: 1rem; font-weight: 700; color: #16203A; margin: 0 0 .6rem; }
.vdir-bref dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; }
.vdir-bref dt { font-weight: 600; color: #7A849B; white-space: nowrap; }
.vdir-bref dd { margin: 0; }
.vdir-bref dd a { color: #157F56; text-decoration: none; }
.vdir-bref dd a:hover { text-decoration: underline; }
.vdir-bref__sep { color: #C4CBD8; margin: 0 .3rem; }
@media (max-width: 575.98px) {
    .vdir-bref dl { grid-template-columns: 1fr; gap: .2rem; }
    .vdir-bref dt { margin-top: .45rem; }
}