/* ==========================================================================
   OPMS - Vérification des membres — Styles de l'espace public
   Toutes les couleurs sont pilotées par variables CSS injectées en ligne
   depuis les réglages du plugin (voir class-opms-public.php).
   ========================================================================== */

.opms-vm-conteneur {
    --opms-couleur-principale: #0B6E4F;
    --opms-couleur-secondaire: #F5F7F6;
    --opms-couleur-bouton: #0B6E4F;
    max-width: 1100px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 16px 48px !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.opms-vm-conteneur *,
.opms-vm-conteneur *::before,
.opms-vm-conteneur *::after {
    box-sizing: border-box !important;
}

/* ---- En-tête ---- */

.opms-vm-entete {
    text-align: center;
    margin-bottom: 28px;
}

.opms-vm-titre {
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--opms-couleur-principale);
    margin: 0 0 8px;
    font-weight: 700;
}

.opms-vm-instruction {
    color: #5f6368;
    font-size: 0.98rem;
    margin: 0;
}

.opms-vm-widget-traduction {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   Protections contre le widget Google Traduction, connu pour perturber
   les mises en page (bandeau automatique poussant tout le contenu vers
   le bas, hauteurs erratiques sur mobile). On neutralise ces effets de
   bord au lieu de les laisser casser l'affichage de la barre de
   recherche et des cartes.
   ========================================================================== */

.goog-te-banner-frame.skiptranslate,
.goog-te-balloon-frame,
iframe.skiptranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

body {
    top: 0 !important;
    position: static !important;
}

.opms-vm-widget-traduction .goog-te-gadget {
    height: auto !important;
    line-height: normal !important;
    font-size: 0.85rem !important;
}

.opms-vm-widget-traduction select.goog-te-combo {
    max-width: 220px;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Empêche le texte traduit par Google (souvent enveloppé dans des
   balises <font>) de modifier la taille ou l'agencement des éléments
   du plugin. */
.opms-vm-conteneur font {
    font-size: inherit !important;
    vertical-align: baseline !important;
}

/* ---- Formulaire de recherche ---- */

.opms-vm-formulaire {
    margin-bottom: 24px;
}

.opms-vm-barre-recherche {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: stretch !important;
}

.opms-vm-champ-recherche {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 380px !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 14px !important;
    border: 2px solid #dfe3e6 !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    outline: none;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease;
}

.opms-vm-champ-recherche:focus {
    border-color: var(--opms-couleur-principale);
}

.opms-vm-bouton-recherche,
.opms-vm-bouton-effacer {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 18px !important;
    border: none;
    border-radius: 10px;
    font-size: 0.98rem !important;
    line-height: 1.3 !important;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box !important;
    transition: opacity 0.15s ease, transform 0.05s ease;
}

.opms-vm-bouton-recherche {
    background-color: var(--opms-couleur-bouton);
    color: #fff;
}

.opms-vm-bouton-recherche:hover {
    opacity: 0.9;
}

.opms-vm-bouton-recherche:active {
    transform: scale(0.98);
}

.opms-vm-bouton-effacer {
    background-color: transparent;
    color: #5f6368;
    border: 2px solid #dfe3e6;
}

/* ---- Zone de messages (chargement, erreurs) ---- */

.opms-vm-zone-messages {
    text-align: center;
    min-height: 1px;
    margin-bottom: 8px;
}

.opms-vm-chargement {
    color: var(--opms-couleur-principale);
    font-size: 0.95rem;
}

.opms-vm-erreur {
    color: #D93025;
    font-size: 0.95rem;
}

.opms-vm-aucun-resultat {
    text-align: center;
    background: var(--opms-couleur-secondaire);
    border-radius: 12px;
    padding: 20px;
    color: #5f6368;
    font-size: 0.98rem;
    max-width: 520px;
    margin: 12px auto;
}

/* ---- Grille de cartes ---- */

.opms-vm-grille-cartes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 8px;
}

.opms-vm-grille-cartes .opms-vm-carte {
    flex: 0 1 var( --opms-largeur-carte, 320px ) !important;
    width: auto !important;
    max-width: var( --opms-largeur-carte, 320px ) !important;
}

/* ---- Carte individuelle ---- */

.opms-vm-carte {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #eef0f1;
    transition: box-shadow 0.15s ease;
}

.opms-vm-carte:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.opms-vm-carte-photo {
    width: 100% !important;
    height: 190px !important;
    max-height: 190px !important;
    background: var(--opms-couleur-secondaire);
    overflow: hidden !important;
}

.opms-vm-carte-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 190px !important;
    object-fit: cover !important;
    display: block;
}

.opms-vm-carte-infos {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.opms-vm-carte-nom {
    font-size: 1.1rem;
    margin: 0 0 4px;
    color: #202124;
    word-break: break-word;
}

.opms-vm-carte-infos p {
    margin: 0;
    font-size: 0.92rem;
    color: #3c4043;
    word-break: break-word;
}

.opms-vm-etiquette {
    font-weight: 600;
    color: #5f6368;
}

.opms-vm-carte-statut {
    display: inline-block;
    margin-top: 8px !important;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
    color: #fff;
    background-color: var(--opms-couleur-statut, #9AA0A6);
    width: fit-content;
}

/* ---- Bouton "Demander une modification" (§24) ---- */

.opms-vm-carte-action {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e3e6e8;
    text-align: center;
}

.opms-vm-carte-action-question {
    font-size: 0.85rem !important;
    color: #80868b !important;
    margin-bottom: 8px !important;
    text-align: center;
}

.opms-vm-bouton-modification {
    display: inline-block;
    width: auto;
    text-align: center;
    padding: 10px 22px;
    border-radius: 999px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: opacity 0.15s ease, transform 0.05s ease;
    margin: 0 auto;
}

.opms-vm-bouton-modification:active {
    transform: scale(0.97);
}

.opms-vm-bouton-modification:hover {
    opacity: 0.9;
    color: #fff !important;
}

/* ==========================================================================
   Responsive (§2.5)
   ========================================================================== */

/* Tablette : les cartes restent centrées, largeur légèrement réduite */
@media (max-width: 860px) {
    .opms-vm-grille-cartes .opms-vm-carte {
        flex-basis: 280px;
    }
}

/* Smartphone : une carte occupe toute la largeur disponible, toujours centrée */
@media (max-width: 560px) {
    .opms-vm-grille-cartes .opms-vm-carte {
        flex-basis: 100%;
        max-width: 100%;
    }

    .opms-vm-conteneur {
        padding: 16px 10px 32px;
    }

    .opms-vm-barre-recherche {
        gap: 6px;
    }

    .opms-vm-champ-recherche {
        max-width: none !important;
        padding: 10px 12px !important;
        font-size: 0.92rem !important;
    }

    .opms-vm-bouton-recherche {
        padding: 10px 14px !important;
        font-size: 0.88rem !important;
    }

    .opms-vm-bouton-effacer {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }

    .opms-vm-carte-photo,
    .opms-vm-carte-photo img {
        height: 160px !important;
        max-height: 160px !important;
    }
}

/* Très petits écrans : encore plus compact, on autorise le texte du
   bouton à passer sur deux lignes plutôt que de déborder de l'écran. */
@media (max-width: 360px) {
    .opms-vm-bouton-recherche,
    .opms-vm-bouton-effacer {
        white-space: normal !important;
        line-height: 1.2 !important;
        padding: 9px 10px !important;
        font-size: 0.82rem !important;
    }

    .opms-vm-champ-recherche {
        padding: 9px 10px !important;
        font-size: 0.86rem !important;
    }
}