/* ============================================================================
 * MEETLAW V2 — Fiche avocat (US TB#2664)
 *
 * Styles dédiés au gabarit `annuaire_fiche_membre_meetlaw_v2.tpl`.
 *
 * Preview locale : approximation du Figma `meetlaw.fr/Parcours/Fiche avocat`
 * (palette magenta Meet Law, pills tabs, badges rectangulaires).
 *
 * Le skin Meet Law (skins.azko.fr) appliquera l'identité visuelle finale
 * en surchargant les variables CSS / sélecteurs ci-dessous. Les classes
 * BEM `__tab` / `__panel` + état `.is-active` sont stables et stylables
 * directement par le skin.
 *
 * Scope : sélecteurs préfixés `.annuaireficheavocatmeetlawv2` pour
 *         garantir l'isolation vis-à-vis des gabarits V1 et legacy.
 * ============================================================================ */


/* ------------------------------------------------------------------
 * Palette (variables CSS — facilement override-ables par le skin)
 * ------------------------------------------------------------------ */

.annuaireficheavocatmeetlawv2 {
    --ml-magenta:        #a01c5f;
    --ml-magenta-hover:  #821650;
    --ml-magenta-light:  #f5e7ee;
    --ml-text:           #1a1f29;
    --ml-text-soft:      #6b7785;
    --ml-text-mute:      #8a94a3;
    --ml-bg:             #eef3fb;
    --ml-card-bg:        #ffffff;
    --ml-card-border:    #e5e8ed;
    --ml-card-shadow:    0 2px 10px rgba(30, 55, 88, .06);
    --ml-divider:        #f1f3f6;
    --ml-radius:         12px;
    --ml-radius-pill:    999px;
}


/* ------------------------------------------------------------------
 * Grille principale 2 colonnes (sidebar 360px + main fluide)
 * ------------------------------------------------------------------ */

.annuaireficheavocatmeetlawv2 .annuaireFicheContentMeetlaw--v2 {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    align-items: start;
    background: var(--ml-bg);
    padding: 24px;
    border-radius: var(--ml-radius);
}

@media (max-width: 992px) {
    .annuaireficheavocatmeetlawv2 .annuaireFicheContentMeetlaw--v2 {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}


/* ------------------------------------------------------------------
 * Sidebar « carte »
 * ------------------------------------------------------------------ */

.annuaireficheavocatmeetlawv2 .annuaireFicheSidebar {
    position: sticky;
    top: 24px;
}

@media (max-width: 992px) {
    .annuaireficheavocatmeetlawv2 .annuaireFicheSidebar { position: static; }
}

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard {
    background: var(--ml-card-bg);
    border: 1px solid var(--ml-card-border);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-card-shadow);
    overflow: hidden;
}

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard__header {
    padding: 28px 24px 20px;
    text-align: center;
    border-bottom: 1px solid var(--ml-divider);
}

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard__header .annuaireFicheBlocPhoto {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ml-divider);
}

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard__header .annuaireFicheBlocPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard__header .annuaireFicheBlocNoPhoto {
    background: var(--ml-divider);
}

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard__header .annuaireFicheNom {
    font-size: 18px;
    font-weight: 700;
    color: var(--ml-text);
    margin: 0 0 4px;
    line-height: 1.3;
    text-transform: none;
}

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard__header .annuaireFicheNom .anfiche_civ {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ml-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheVille {
    font-size: 13px;
    color: var(--ml-text-soft);
    margin-top: 6px;
}


/* Sections de la sidebar */

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard__section {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ml-divider);
}

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard__section:last-of-type {
    border-bottom: 0;
}

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard__section h2 {
    font-size: 11px;
    font-weight: 700;
    color: var(--ml-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
}


/* Contact : site web + réseaux sociaux */

.annuaireficheavocatmeetlawv2 .annuaireFicheSite {
    display: block;
    color: var(--ml-magenta);
    text-decoration: none;
    font-size: 13px;
    word-break: break-all;
    margin-bottom: 12px;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheSite:hover { text-decoration: underline; }

.annuaireficheavocatmeetlawv2 .annuaireFicheSocialNetwork {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheSocialNetwork li { margin: 0; }

.annuaireficheavocatmeetlawv2 .annuaireFicheSocialNetwork a {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--ml-divider);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    text-decoration: none;
    overflow: hidden;
    text-indent: -9999px;          /* masque le label texte ; les vraies icônes (background-image) viennent du skin distant */
    transition: background-color 0.15s;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheSocialNetwork a:hover {
    background-color: var(--ml-magenta-light);
}


/* Bloc Services (visio + AJ) */

.annuaireficheavocatmeetlawv2 .annuaireListeServices {
    list-style: none;
    padding: 0;
    margin: 0;
}

.annuaireficheavocatmeetlawv2 .annuaireService {
    padding: 10px 0;
    border-bottom: 1px dashed var(--ml-divider);
}

.annuaireficheavocatmeetlawv2 .annuaireService:last-child { border-bottom: 0; }

.annuaireficheavocatmeetlawv2 .annuaireService__title {
    display: block;
    font-weight: 500;
    color: var(--ml-text);
    font-size: 13px;
}

.annuaireficheavocatmeetlawv2 .annuaireService__title::before {
    content: '✓';
    color: var(--ml-magenta);
    margin-right: 8px;
    font-weight: 700;
}

.annuaireficheavocatmeetlawv2 .annuaireService__description {
    display: block;
    font-size: 11px;
    color: var(--ml-text-soft);
    margin-top: 4px;
    margin-left: 18px;
    line-height: 1.4;
}


/* Langues : "Français / Anglais / Espagnol" séparés par "/" */

.annuaireficheavocatmeetlawv2 .annuaireListeLangues {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: var(--ml-text);
}

.annuaireficheavocatmeetlawv2 .annuaireListeLangues li {
    display: inline;
}

.annuaireficheavocatmeetlawv2 .annuaireListeLangues li + li::before {
    content: ' / ';
    color: var(--ml-text-mute);
}


/* Moyens de paiement : badges rectangulaires bordure */

.annuaireficheavocatmeetlawv2 .annuaireListeMoyensPaiement {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.annuaireficheavocatmeetlawv2 .annuaireListeMoyensPaiement li {
    background: var(--ml-card-bg);
    border: 1px solid var(--ml-card-border);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--ml-text);
    line-height: 1.2;
}


/* CTA Prendre RDV (footer sidebar) */

.annuaireficheavocatmeetlawv2 .annuaireSidebarCard__footer {
    padding: 20px 24px;
    background: var(--ml-card-bg);
}

.annuaireficheavocatmeetlawv2 .btnAnnuaireRdv {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background-color: var(--ml-magenta);
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.annuaireficheavocatmeetlawv2 .btnAnnuaireRdv:hover,
.annuaireficheavocatmeetlawv2 .btnAnnuaireRdv:focus {
    background-color: var(--ml-magenta-hover);
    color: #ffffff;
    text-decoration: none;
}


/* ------------------------------------------------------------------
 * Main (colonne droite)
 * ------------------------------------------------------------------ */

.annuaireficheavocatmeetlawv2 .annuaireFicheMain { min-width: 0; }

.annuaireficheavocatmeetlawv2 .annuaireFicheMain .annuaireFicheBloc {
    background: var(--ml-card-bg);
    border: 1px solid var(--ml-card-border);
    border-radius: var(--ml-radius);
    padding: 24px 28px;
    margin-bottom: 16px;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheMain .annuaireFicheBloc h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ml-magenta);
    margin: 0 0 16px;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheMain .annuaireFicheBloc h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ml-text);
    margin: 0 0 8px;
}


/* Lieux : tabs natifs HTML PROD (pills magenta sur is-active) */

.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__tab {
    background: var(--ml-divider);
    border: 0;
    border-radius: 8px;
    padding: 8px 18px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ml-text);
    transition: background-color 0.15s, color 0.15s;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__tab:hover {
    background: var(--ml-magenta-light);
    color: var(--ml-magenta);
}

.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__tab.is-active {
    background: var(--ml-magenta);
    color: #ffffff;
    font-weight: 600;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__tab:focus {
    outline: 2px solid var(--ml-magenta);
    outline-offset: 2px;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__panel { display: none; }
.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__panel.is-active { display: block; }

/* Bloc Cabinet (maquette PROD) : colonne gauche (.annuaireFicheLieux__col = onglets
 * + infos du cabinet actif) face à la carte (.annuaireFicheLieux__maps), alignée en
 * haut sur toute la hauteur de la colonne gauche.
 * Les panels infos (gauche) et carte (droite) partagent le même data-lieu et
 * basculent ensemble via oMain.initAriaTabs (activation par attribut, pas par id).
 * 2 colonnes UNIQUEMENT quand une carte est présente (sinon la colonne gauche occupe
 * toute la largeur — pas d'espace fantôme). */
.annuaireficheavocatmeetlawv2 .annuaireFicheLieux {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 24px;
    align-items: start;
}
.annuaireficheavocatmeetlawv2 .annuaireFicheLieux:has(.annuaireFicheLieux__maps .mapFrame) {
    grid-template-columns: 1fr auto;
}
.annuaireficheavocatmeetlawv2 .annuaireFicheLieux > h2  { grid-column: 1 / -1; }
.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__col  { min-width: 0; }
.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__maps { align-self: stretch; }

/* La carte remplit la hauteur de la colonne gauche (onglets + infos) */
.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__maps .annuaireFicheLieux__panel--map,
.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__maps .annuaireBlocCarte { height: 100%; }
.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__maps .mapFrame {
    width: 100%;
    height: 100%;
    min-height: 250px;
}

@media (max-width: 768px) {
    .annuaireficheavocatmeetlawv2 .annuaireFicheLieux,
    .annuaireficheavocatmeetlawv2 .annuaireFicheLieux:has(.annuaireFicheLieux__maps .mapFrame) {
        grid-template-columns: 1fr;
    }
    .annuaireficheavocatmeetlawv2 .annuaireFicheLieux__maps .mapFrame { height: 250px; }
}

/* Force block layout (annule un éventuel float/inline hérité de common.css) */
.annuaireficheavocatmeetlawv2 .annuaireFicheLieux__infos { min-width: 0; }
.annuaireficheavocatmeetlawv2 .annuaireBlocAdresse,
.annuaireficheavocatmeetlawv2 .annuaireBlocTelephone {
    display: block;
    clear: both;
    float: none;
    width: auto;
}

.annuaireficheavocatmeetlawv2 .annuaireBlocAdresse {
    font-size: 13px;
    color: var(--ml-text);
    line-height: 1.5;
}

.annuaireficheavocatmeetlawv2 .annuaireBlocAdresse .adresse { font-weight: 500; }
.annuaireficheavocatmeetlawv2 .annuaireBlocAdresse .complementadresse { color: var(--ml-text-soft); }
.annuaireficheavocatmeetlawv2 .annuaireBlocAdresse .cpville { margin-top: 2px; }

.annuaireficheavocatmeetlawv2 .annuaireBlocTelephone { margin-top: 10px; font-size: 13px; }
.annuaireficheavocatmeetlawv2 .annuaireBlocTelephone .valeur { font-weight: 500; color: var(--ml-text); }
.annuaireficheavocatmeetlawv2 .annuaireBlocTelephone .valeur::before { content: '☏  '; color: var(--ml-magenta); }

.annuaireficheavocatmeetlawv2 .annuaireBlocCarte iframe { border-radius: 8px; max-width: 100%; }


/* Mentions de spécialisation + Domaines : badges rectangulaires avec bordure */

.annuaireficheavocatmeetlawv2 .annuaireListeSpecialisations,
.annuaireficheavocatmeetlawv2 .annuaireListeDomCmp {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.annuaireficheavocatmeetlawv2 .annuaireListeSpecialisations li,
.annuaireficheavocatmeetlawv2 .annuaireListeDomCmp li {
    background: var(--ml-card-bg);
    border: 1px solid var(--ml-card-border);
    color: var(--ml-text);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheDomaines__toggle {
    background: transparent;
    color: var(--ml-magenta);
    cursor: pointer;
    text-decoration: underline;
    padding: 8px 0;
    font-size: 12px;
}


/* Honoraires / Divers / Formations */

.annuaireficheavocatmeetlawv2 .annuaireFicheHonorairesContent,
.annuaireficheavocatmeetlawv2 .annuaireFicheAccroche,
.annuaireficheavocatmeetlawv2 .annuaireFicheBio {
    font-size: 13px;
    color: var(--ml-text);
    line-height: 1.6;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheHonorairesContent a,
.annuaireficheavocatmeetlawv2 .annuaireFicheAccroche a {
    color: var(--ml-magenta);
}

.annuaireficheavocatmeetlawv2 .annuaireFicheHonorairesContent h3,
.annuaireficheavocatmeetlawv2 .annuaireFicheBio h3 {
    color: var(--ml-text);
    margin-top: 16px;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheDateSerment { margin-top: 12px; font-size: 13px; }
.annuaireficheavocatmeetlawv2 .annuaireFicheDateSerment .intitule { color: var(--ml-text-soft); }
.annuaireficheavocatmeetlawv2 .annuaireFicheDateSerment .valeur { font-weight: 700; color: var(--ml-text); }


/* Bouton retour */

.annuaireficheavocatmeetlawv2 .annuaireFicheRetour {
    background: transparent;
    border: 0;
    padding: 16px 0 0;
    margin-bottom: 0;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheRetour .retour {
    display: inline-block;
    color: var(--ml-text-soft);
    text-decoration: none;
    font-size: 13px;
}

.annuaireficheavocatmeetlawv2 .annuaireFicheRetour .retour::before { content: '← '; }
.annuaireficheavocatmeetlawv2 .annuaireFicheRetour .retour:hover {
    color: var(--ml-magenta);
    text-decoration: underline;
}


/* ============================================================================
 * Mini-card listing (US TB#2663)
 *
 * Styles de la carte avocat dans la liste de résultats — Figma node 13513-3365.
 * Structure : colonne gauche (photo+identité+langues) | contenu (services+domaines+paiements) | dispos AJAX.
 * Scope : .annuaireFicheMiniContainerMeetlaw (wrapper émis par le tpl pour TYPE_MEETLAW_V2)
 *
 * Le skin Meet Law (skins.azko.fr) surcharge les variables et sélecteurs.
 * ============================================================================ */


/* ------------------------------------------------------------------
 * Variables (réplique de .annuaireficheavocatmeetlawv2 pour héritage indépendant)
 * ------------------------------------------------------------------ */

.annuaireFicheMiniContainerMeetlaw {
    --ml-magenta:        #a01c5f;
    --ml-magenta-hover:  #821650;
    --ml-magenta-light:  #f5e7ee;
    --ml-text:           #1a1f29;
    --ml-text-soft:      #6b7785;
    --ml-text-mute:      #8a94a3;
    --ml-bg:             #eef3fb;
    --ml-card-bg:        #ffffff;
    --ml-card-border:    #e5e8ed;
    --ml-card-shadow:    0 2px 10px rgba(30, 55, 88, .06);
    --ml-divider:        #f1f3f6;
    --ml-radius:         12px;

    position: relative;
    background: var(--ml-card-bg);
    border: 1px solid var(--ml-card-border);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-card-shadow);
    margin-bottom: 20px;
    margin-top: 10px; /* espace pour le badge "À la une" qui dépasse en haut */
}


/* ------------------------------------------------------------------
 * Badge "À la une" (top-left hors carte — Figma node 13513-3366)
 * ------------------------------------------------------------------ */

.annuaireFicheMiniContainerMeetlaw .annuaireFicheBadge--featured {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--ml-magenta);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 999px;
    z-index: 1;
    white-space: nowrap;
}


/* ------------------------------------------------------------------
 * Grille principale : [identité | contenu | dispos?]
 * Flex : colonne gauche fixe + contenu fluide + dispos fixe optionnel
 * ------------------------------------------------------------------ */

.annuaireFicheMiniContainerMeetlaw {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}


/* ------------------------------------------------------------------
 * Colonne gauche : photo (cercle) + nom + ville + langues (empilés)
 * ------------------------------------------------------------------ */

.annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col1 {
    width: 220px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 28px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    position: relative;
    /* Pas de border-right pleine hauteur : on dessine un séparateur partiel via ::after
     * pour matcher le Figma 13513-3365 (ligne qui ne touche pas haut/bas de la carte). */
}

.annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col1::after {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    right: 0;
    width: 1px;
    background: var(--ml-divider);
}

/* Spécificité bumpée (.annuaireFicheMini .annuaireFicheMiniContainerMeetlaw ...) pour gagner
 * sur common.css:1877 « .annuaireFicheMini .annuaireFicheImage { display: none; } » qui
 * masque par défaut .annuaireFicheImage dans .annuaireFicheMini (legacy).
 * Sans ce bump, l'avatar disparaît côté mini-card V2 (commun.css distant chargé après). */
.annuaireFicheMini .annuaireFicheMiniContainerMeetlaw .annuaireFicheImage {
    display: block;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ml-divider);
    flex-shrink: 0;
}

.annuaireFicheMini .annuaireFicheMiniContainerMeetlaw .annuaireFicheImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.annuaireFicheMini .annuaireFicheMiniContainerMeetlaw .annuaireFicheImage a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Nom (sous la photo dans la colonne gauche) */

.annuaireFicheMiniContainerMeetlaw .annuaireFicheNom {
    font-size: 14px;
    font-weight: 700;
    color: var(--ml-text);
    margin: 8px 0 0;
    line-height: 1.3;
    text-align: center;
}

.annuaireFicheMiniContainerMeetlaw .annuaireFicheNom a {
    text-decoration: none;
}

.annuaireFicheMiniContainerMeetlaw .annuaireFicheNom a:hover { color: var(--ml-magenta); }

/* Ville (sous le nom) */

.annuaireFicheMiniContainerMeetlaw .annuaireFicheVille {
    font-size: 12px;
    color: var(--ml-text-soft);
    line-height: 1.4;
    text-align: center;
}

/* Langues parlées */

.annuaireFicheMiniContainerMeetlaw .annuaireFicheLangues {
    margin-top: 4px;
}

.annuaireFicheMiniContainerMeetlaw .annuaireFicheLangues .libelle {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--ml-text-soft);
    margin-bottom: 2px;
}

.annuaireFicheMiniContainerMeetlaw .annuaireListeLangues {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--ml-text);
}

.annuaireFicheMiniContainerMeetlaw .annuaireListeLangues li { display: inline; }

.annuaireFicheMiniContainerMeetlaw .annuaireListeLangues li + li::before {
    content: ' / ';
    color: var(--ml-text-mute);
    font-weight: 400;
}


/* ------------------------------------------------------------------
 * Colonne centrale : services + domaines + moyens de paiement
 * Largeur fixe pour que la colonne dispos puisse prendre le reste (flex:1)
 * ------------------------------------------------------------------ */

.annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col2 {
    flex: 0 0 340px;
    min-width: 0;
    box-sizing: border-box;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Pas de border-right : dans le Figma 13513-3365 seule la colonne photo/identité
     * est séparée par un trait vertical. La zone dispos se fond avec content. */
}

/* Wrapper section avec label (3 sections en col2 : services / domaines / moyens de paiement) */

.annuaireFicheMiniContainerMeetlaw__col2 > .annuaireServices,
.annuaireFicheMiniContainerMeetlaw__col2 > .annuaireFicheDomCmp,
.annuaireFicheMiniContainerMeetlaw__col2 > .annuaireFicheMoyensPaiement {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ml-divider);
}

.annuaireFicheMiniContainerMeetlaw__col2 > .annuaireServices:last-child,
.annuaireFicheMiniContainerMeetlaw__col2 > .annuaireFicheDomCmp:last-child,
.annuaireFicheMiniContainerMeetlaw__col2 > .annuaireFicheMoyensPaiement:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.annuaireFicheMiniContainerMeetlaw__col2 .libelle {
    font-size: 11px;
    font-weight: 400;
    color: var(--ml-text-soft);
    margin: 0;
}


/* Services (checklist avec icône ✓) */

.annuaireFicheMiniContainerMeetlaw .annuaireListeServices {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Item service : dans le HTML PROD mini-card, le texte est directement dans <li class="annuaireService ...">,
 * sans <span class="annuaireService__title"> (qui n'existe que sur la fiche-détail). */
.annuaireFicheMiniContainerMeetlaw .annuaireService {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ml-text);
}

/* Icône générique préfixée via ::before */
.annuaireFicheMiniContainerMeetlaw .annuaireService::before {
    content: '✓';
    color: var(--ml-text-soft);
    font-size: 12px;
    flex-shrink: 0;
}

/* Icône visio : carré avec bordure */
.annuaireFicheMiniContainerMeetlaw .annuaireServiceVisio::before {
    content: '';
    font-size: 9px;
    color: var(--ml-text-mute);
    border: 1.5px solid var(--ml-text-mute);
    border-radius: 2px;
    width: 14px;
    height: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icône aide juridictionnelle : checkmark fin */
.annuaireFicheMiniContainerMeetlaw .annuaireServiceAideJuridictionnelle::before {
    content: '✓';
    color: var(--ml-text-soft);
    font-size: 12px;
    font-weight: 400;
}


/* Domaines de compétences (pills bleu marine — style Figma 13513-3366) */

.annuaireFicheMiniContainerMeetlaw .annuaireFicheDomaines {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.annuaireFicheMiniContainerMeetlaw .annuaireFicheDomaines li {
    background: #1d3461;
    border: 0;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

.annuaireFicheMiniContainerMeetlaw .annuaireFicheDomaines li.ellipsis {
    background: transparent;
    border: 1px dashed var(--ml-card-border);
    color: var(--ml-text-mute);
    font-weight: 400;
}

.annuaireFicheMiniContainerMeetlaw .autresdomaines {
    display: inline-block;
    background: transparent;
    border: 1px dashed var(--ml-card-border);
    color: var(--ml-magenta);
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
}


/* Moyens de paiement */

.annuaireFicheMiniContainerMeetlaw .annuaireListeMoyensPaiement {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.annuaireFicheMiniContainerMeetlaw .annuaireListeMoyensPaiement li {
    background: var(--ml-bg);
    border: 1px solid var(--ml-card-border);
    color: var(--ml-text-soft);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
}


/* ------------------------------------------------------------------
 * Prochaines disponibilités (colonne droite desktop, bas mobile)
 * Sélecteurs JS AJAX à préserver : annuaireProchainesDisposAgendaId_*
 * ------------------------------------------------------------------ */

.annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col3 {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 24px;
    border-top: 1px solid var(--ml-divider);
    background: var(--ml-card-bg);
}

@media (min-width: 768px) {
    .annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col3 {
        flex: 1 1 0;      /* basis 0 → prend tout l'espace restant après photo (220px) + content (340px) sans déclencher de wrap */
        min-width: 0;
        border-top: 0;
        background: var(--ml-card-bg);
        padding: 20px 28px;
    }
}

/* Override common.css:1909 — supprime fond teal + paddings hérités */
.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos {
    font-size: 11px;
    background: transparent;
    padding: 0;
    display: block;
}

.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    table-layout: fixed;
}

/* Override common.css:1913 — supprime les bordures teal tbody */
.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table tbody {
    border-top: 0;
    border-bottom: 0;
}

/* Override common.css:1920 — spinner chargement neutre */
.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos .prochaineDispo {
    background: transparent;
    color: var(--ml-text-soft);
    position: static;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    text-align: center;
}

.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos thead th {
    text-align: center;
    padding: 0 2px 12px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ml-text);
    line-height: 1.5;
    word-break: break-word;
}

/* Majuscule sur la 1re lettre du jour (Figma 13513-3365 : "Mercredi" et non "mercredi").
 * `::first-letter` ne touche que le premier caractère du nœud, donc "janv." reste minuscule. */
.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos thead th::first-letter {
    text-transform: uppercase;
}

/* Maquette Figma 13513-3365 : « Mercredi 21 janv » — pas d'année dans l'en-tête.
 * Le JS (main.js, annuaireGetDisposCallback) émet jour/mois/année dans des spans
 * dédiés (.cal-jour / .cal-mois / .cal-annee) ; on masque l'année ici sans toucher
 * aux autres gabarits annuaire qui partagent le même JS. */
.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos thead th .cal-annee {
    display: none;
}

/* Pas de séparateur entre dates (thead) et créneaux (tbody) dans le Figma 13513-3365 :
 * juste l'espacement vertical naturel (border-spacing + padding-bottom du thead). */

.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos tbody td {
    text-align: center;
    padding: 2px 0;
}

/* Override common.css #27b8ce → pilules bleu clair style Figma */
.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table tbody td span {
    display: block;
    background: #e8eef8;
    color: #1d3461;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 4px;
    border-radius: 8px;
    min-height: 28px;
    line-height: 16px;
    text-align: center;
}

.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table tbody td span:empty {
    background: none;
    min-height: 22px;
}

.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table tbody td span:empty::before {
    content: '';
}

/* ------------------------------------------------------------------
 * Hover state — overlay "Prendre RDV" (Figma node 13513-4426)
 * Au survol du panneau dispos : les créneaux passent en opacité réduite
 * et le bouton magenta apparaît centré en absolute.
 * ------------------------------------------------------------------ */

.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos {
    position: relative;
}

/* Bouton caché par défaut, visible uniquement au survol */
.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos > a.btnAnnuaireRdv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 28px;
    background: var(--ml-magenta);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out, background-color 0.15s;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(160, 28, 95, 0.25);
}

.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos > a.btnAnnuaireRdv:hover {
    background: var(--ml-magenta-hover);
    color: #fff;
    text-decoration: none;
}

/* Au hover du panneau dispos : créneaux estompés + bouton visible */
.annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col3:hover .annuaireProchainesDispos table {
    opacity: 0.35;
    transition: opacity 0.15s ease-in-out;
}

.annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col3:hover .annuaireProchainesDispos > a.btnAnnuaireRdv {
    opacity: 1;
    pointer-events: auto;
}

.annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table {
    transition: opacity 0.15s ease-in-out;
}


/* ------------------------------------------------------------------
 * Mobile : colonne gauche pleine largeur sous 600px
 * ------------------------------------------------------------------ */

/* ============================================================================
 * Mobile (< 768px) — Figma node 13548-4764
 *
 * Structure très différente du desktop :
 * - Header horizontal : photo (60px) + nom/ville alignés à gauche
 * - Bloc Domaines + Moyens encadré (fond --ml-bg, border-radius)
 * - Dispos compact : 1 seule pill date + bouton "Prendre RDV" full-width
 * - Table 5x5 desktop masquée (tbody display:none) + th.date1 affichée seule
 * ============================================================================ */

@media (max-width: 767px) {

    /* — Header : photo + nom/ville côte à côte — */
    .annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col1 {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        text-align: left;
        gap: 14px;
        padding: 20px 20px 16px;
    }

    /* Pas de séparateur vertical en mobile (le ::after desktop est masqué) */
    .annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col1::after {
        display: none;
    }

    .annuaireFicheMini .annuaireFicheMiniContainerMeetlaw .annuaireFicheImage {
        width: 60px;
        height: 60px;
    }

    .annuaireFicheMiniContainerMeetlaw .annuaireFicheNom,
    .annuaireFicheMiniContainerMeetlaw .annuaireFicheVille {
        text-align: left;
        margin-top: 0;
    }

    /* Langues masquées en mobile (absentes du Figma 13548-4764) */
    .annuaireFicheMiniContainerMeetlaw .annuaireFicheLangues {
        display: none;
    }

    /* — Bloc content : encadré fond bleu clair — */
    .annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col2 {
        flex: none;
        width: auto;
        margin: 0 16px 16px;
        padding: 16px;
        background: var(--ml-bg);
        border-radius: 8px;
        gap: 14px;
    }

    /* — Bloc dispos compact : label + 1 pill date + bouton — */
    .annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col3 {
        flex: none;
        width: 100%;
        padding: 0 16px 16px;
        border-top: 0;
        background: transparent;
        text-align: center;
    }

    /* Label "Prochaine disponibilité" injecté en ::before */
    .annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col3::before {
        content: 'Prochaine disponibilité';
        display: block;
        text-align: center;
        font-size: 13px;
        font-weight: 400;
        color: var(--ml-text);
        margin-bottom: 12px;
    }

    /* Reset position absolue héritée de common.css.
     * Affichage conservé : si l'API renvoie "Aucun créneau disponible" ou un message
     * d'erreur, il prend la place de la pill date (cf. annuaireGetDisposCallback). */
    .annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos .prochaineDispo {
        display: block;
        position: static;
        width: auto;
        margin: 0;
        padding: 8px 18px;
        background: transparent;
        color: var(--ml-text-soft);
        text-align: center;
        font-size: 13px;
        line-height: 1.4;
    }

    /* Spinner de chargement (image .gif) : on cache l'image pendant le loading initial
     * (image visible dans common.css par défaut). Le texte de remplacement post-AJAX
     * sera visible via la règle .prochaineDispo ci-dessus. */
    .annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos .prochaineDispo img {
        display: none;
    }

    /* Table : on cache tout sauf le th.date1 transformé en pill.
     * Si pas de créneaux, le th.date1 reste avec son placeholder "-" : on le masque
     * dans ce cas via :empty + le content qui n'est jamais peuplé par le JS si days=[]. */
    .annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table {
        display: block;
        text-align: center;
        border-spacing: 0;
    }
    .annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table thead,
    .annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table thead tr {
        display: block;
    }
    .annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table thead th:not(.date1) {
        display: none;
    }
    .annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table thead th.date1 {
        display: inline-block;
        background: #e8eef8;
        color: #1d3461;
        padding: 8px 18px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
        word-break: normal;
    }
    /* Si th.date1 est vide (pas de données API), on le masque pour laisser place
     * au message dans .prochaineDispo ("Aucun créneau disponible"). Le JS vide
     * proactivement th.date1 dans annuaireGetDisposCallback quand days.length === 0. */
    .annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table thead th.date1:empty {
        display: none;
    }
    .annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos table tbody {
        display: none;
    }

    /* Bouton "Prendre RDV" pleine largeur, toujours visible (pas d'overlay hover) */
    .annuaireFicheMiniContainerMeetlaw .annuaireProchainesDispos > a.btnAnnuaireRdv {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        display: block;
        width: 100%;
        margin-top: 16px;
        padding: 14px 12px;
        background: var(--ml-magenta);
        color: #fff;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        box-shadow: none;
        box-sizing: border-box;
    }

    /* Pas d'estompage des créneaux au hover en mobile (la table est cachée) */
    .annuaireFicheMiniContainerMeetlaw .annuaireFicheMiniContainerMeetlaw__col3:hover .annuaireProchainesDispos table {
        opacity: 1;
    }
}