/* =========================================================
   PadelMatch Directory — BASE
   ---------------------------------------------------------
   Tokens, utility classes, boutons et cartes mutualisés.
   Chargé sur toutes les pages frontend.
========================================================= */

/* ===== TOKENS ===== */
:root {
    /* Couleurs de marque (Elementor) */
    --pmd-color-primary:   var(--e-global-color-primary,   #0B1D3A);
    --pmd-color-secondary: var(--e-global-color-secondary, #1E3A6A);
    --pmd-color-accent:    var(--e-global-color-accent,    #D4FF00);
    --pmd-color-text:      var(--e-global-color-text,      #000000);

    /* Sémantiques */
    --pmd-success:        #10b981;
    --pmd-success-hover:  #059669;
    --pmd-success-bg:     #d1fae5;
    --pmd-success-border: #10b981;

    --pmd-danger:         #dc2626;
    --pmd-danger-bg:      #fee2e2;
    --pmd-danger-text:    #991b1b;
    --pmd-danger-border:  #ef4444;
    --pmd-danger-border-soft: #fca5a5;
    --pmd-danger-strong:  #b91c1c;

    --pmd-warning:        #f5c518;
    --pmd-warning-text:   #b45309;
    --pmd-warning-bg:     #fff8e5;
    --pmd-warning-border: #fcd34d;

    --pmd-info:           #3b82f6;

    /* Neutres UI */
    --pmd-color-white:         #ffffff;
    --pmd-color-bg-soft:       #f8fafc;
    --pmd-color-bg-muted:      #f1f5f9;
    --pmd-color-border:        #e2e8f0;
    --pmd-color-border-strong: #cbd5e1;
    --pmd-color-text-soft:     #334155;
    --pmd-color-text-muted:    #64748b;
    --pmd-color-text-strong:   #1e293b;
    --pmd-color-text-on-dark:  #e2e8f0;

    /* Radius */
    --pmd-radius-card: 12px;
    --pmd-radius-md:   8px;
    --pmd-radius-sm:   6px;
    --pmd-radius-pill: 60px;

    /* Ombres */
    --pmd-shadow-card:  0 4px 15px rgba(0, 0, 0, 0.03);
    --pmd-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.08);
    --pmd-shadow-bar:   0 15px 35px rgba(0, 0, 0, 0.18);
}

/* =========================================================
   UTILITIES : section, container, titres
========================================================= */
.pmd-section {
    padding: 5% 0;
}
.pmd-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Eyebrow / pastille au-dessus des titres de section */
.pmd-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}
.pmd-tag--accent {
    background: var(--pmd-color-accent);
    color: var(--pmd-color-primary);
}
.pmd-tag--soft {
    background: rgba(212, 255, 0, 0.15);
    color: var(--pmd-color-primary);
}
.pmd-tag--dark {
    background: var(--pmd-color-primary);
    color: var(--pmd-color-white);
}

/* Titre H2 section (style fiche club / pages) */
.pmd-h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 800;
    color: var(--pmd-color-primary);
    margin: 0 0 12px;
    line-height: 1.2;
}
.pmd-h2--center { text-align: center; }
.pmd-h2--white  { color: var(--pmd-color-white); }
.pmd-h2-sub {
    font-size: 1rem;
    color: var(--pmd-color-text-muted);
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Pastille numérique (étapes / features) */
.pmd-num-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pmd-color-accent);
    color: var(--pmd-color-primary);
    font-weight: 800;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* État vide (shortcodes sans résultats) */
.pmd-front-empty {
    text-align: center;
    color: var(--pmd-color-text-muted);
    font-style: italic;
    padding: 30px 20px;
    background: var(--pmd-color-bg-soft);
    border-radius: var(--pmd-radius-card);
}

/* =========================================================
   CARTES (base partagée)
========================================================= */
.pmd-card-base {
    background: var(--pmd-color-white);
    border: 1px solid var(--pmd-color-border);
    border-radius: var(--pmd-radius-card);
    box-shadow: var(--pmd-shadow-card);
    transition: transform 0.3s, box-shadow 0.3s;
}
.pmd-card-base:hover {
    transform: translateY(-4px);
    box-shadow: var(--pmd-shadow-hover);
}

/* =========================================================
   BOUTONS
========================================================= */
.pmd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: var(--pmd-radius-md);
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: none;
}
.pmd-btn:hover { transform: translateY(-2px); }
.pmd-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Variantes (toutes avec !important pour bypass Elementor) */
.pmd-btn-primary {
    background: var(--pmd-color-primary) !important;
    color: var(--pmd-color-white) !important;
}
.pmd-btn-primary:hover { background: var(--pmd-color-secondary) !important; }

.pmd-btn-accent {
    background: var(--pmd-color-accent) !important;
    color: var(--pmd-color-primary) !important;
}
.pmd-btn-accent:hover { background: #c5ee00 !important; }

.pmd-btn-edit {
    background: var(--pmd-color-border) !important;
    color: var(--pmd-color-primary) !important;
}
.pmd-btn-edit:hover { background: var(--pmd-color-border-strong) !important; }

.pmd-btn-logout {
    background: var(--pmd-danger-bg) !important;
    color: var(--pmd-danger-text) !important;
    border: 1px solid var(--pmd-danger-border-soft) !important;
}
.pmd-btn-logout:hover { background: #fecaca !important; }

.pmd-btn-cancel {
    background: var(--pmd-color-bg-muted) !important;
    color: var(--pmd-color-text-soft) !important;
}
.pmd-btn-cancel:hover { background: var(--pmd-color-border) !important; }

/* Submit en pleine largeur */
.pmd-btn-submit {
    background: var(--pmd-color-accent) !important;
    color: var(--pmd-color-primary) !important;
    width: 100%;
    margin-top: 15px;
}
.pmd-btn-submit:hover { background: #c5ee00 !important; }
.pmd-btn-submit--primary {
    background: var(--pmd-color-primary) !important;
    color: var(--pmd-color-white) !important;
}
.pmd-btn-submit--primary:hover { background: var(--pmd-color-secondary) !important; }

/* =========================================================
   LIENS — fix kit Elementor accent (illisible sur blanc)
========================================================= */
.pmd-form-wrapper a:not(.pmd-btn):not(.pmd-add-link):not(.pmd-close-btn),
.pmd-dashboard-header a:not(.pmd-btn),
.pmd-history-section a:not(.pmd-add-link):not(.pmd-close-btn):not(.pmd-btn),
.pmd-friends-section a:not(.pmd-add-link):not(.pmd-close-btn):not(.pmd-btn),
.pmd-pending-section a:not(.pmd-btn),
.pmd-match-card a:not(.pmd-btn),
.pmd-history-item a:not(.pmd-btn) {
    color: var(--pmd-color-primary) !important;
    text-decoration: underline;
    text-decoration-color: var(--pmd-color-border-strong);
    transition: color 0.2s;
}
.pmd-form-wrapper a:not(.pmd-btn):hover,
.pmd-dashboard-header a:not(.pmd-btn):hover,
.pmd-history-section a:not(.pmd-add-link):not(.pmd-close-btn):not(.pmd-btn):hover,
.pmd-friends-section a:not(.pmd-add-link):not(.pmd-close-btn):not(.pmd-btn):hover,
.pmd-pending-section a:not(.pmd-btn):hover,
.pmd-match-card a:not(.pmd-btn):hover,
.pmd-history-item a:not(.pmd-btn):hover {
    color: var(--pmd-color-secondary) !important;
}

.pmd-add-link, .pmd-add-link:link, .pmd-add-link:visited {
    color: var(--pmd-info) !important;
    font-size: 14px;
    cursor: pointer;
    font-weight: normal;
}
.pmd-close-btn { color: var(--pmd-danger) !important; }

.pmd-hp{
        position:absolute !important;
        left:-9999px !important;
        width:1px; height:1px;
        overflow:hidden;
    }
/* ===== Toast de notification (remplace les alert() navigateur) ===== */
.pmd-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 99999;
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px 20px;
    border-radius: 10px;
    background: #0B1D3A;
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 8px 30px rgba(11, 29, 58, .35);
    border-left: 4px solid #D4FF00;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.pmd-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.pmd-toast--error   { border-left-color: #e74c3c; }
.pmd-toast--success { border-left-color: #D4FF00; }