/* ==========================================================================
   JdM Trail — Classes utilitaires
   Remplacent les inline styles répétitifs identifiés dans les templates.
   Naming : préfixe jdm- pour éviter les conflits avec WP/plugins.
   ========================================================================== */

/* ── Visibilité ─────────────────────────────────────────────────────────── */
.jdm-hidden   { display: none; }
.jdm-sr-only  { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Layout : z-index de conteneur dans une section relative ────────────── */
/* Utilisé sur .container dans archive-gpx_parcours, archive-jdm_sortie,
   index, page-contact, page.php, search */
.jdm-container-z1 { position: relative; z-index: 1; }

/* ── Formulaire : groupe label + input en colonne ───────────────────────── */
/* Utilisé dans archive-gpx_parcours (filtres) × 4 */
.jdm-field-group { display: flex; flex-direction: column; gap: 4px; }

/* ── Formulaire : label de filtre / section uppercase ───────────────────── */
/* Utilisé dans archive-gpx_parcours (filtres) × 5 */
.jdm-filter-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.90);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ── Formulaire : champ texte standard sur fond sombre ─────────────────── */
/* Utilisé dans page-contact × 3 */
.jdm-field-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--smoke);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    background: #fff;
    color: var(--ink);
}

/* ── Formulaire : label de champ sur fond sombre ────────────────────────── */
/* Utilisé dans page-contact × 4 */
.jdm-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #fff;
}

/* ── Bouton lien inline (style texte) ───────────────────────────────────── */
/* Utilisé dans header.php × 3 (switch tabs auth) */
.jdm-btn-link {
    color: var(--lime-dark);
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}
.jdm-btn-link:hover { text-decoration: underline; }

/* ── Texte d'aide centré sous formulaire ────────────────────────────────── */
/* Utilisé dans header.php × 3 (sous les formulaires auth) */
.jdm-form-hint {
    text-align: center;
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 14px;
}

/* ── Actions groupées flex ──────────────────────────────────────────────── */
/* Utilisé dans archive-gpx_parcours, archive-jdm_sortie × 3 */
.jdm-actions-group { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Bloc avec marge basse standard ────────────────────────────────────── */
.jdm-mb-sm  { margin-bottom: 10px; }   /* 10px */
.jdm-mb-md  { margin-bottom: 16px; }   /* 16px */
.jdm-mb-lg  { margin-bottom: 32px; }   /* 32px */
.jdm-mb-xl  { margin-bottom: 52px; }   /* 52px */

/* ── Bloc centré avec padding vertical (état vide / empty state) ─────────  */
/* Utilisé dans plusieurs templates sur les états vides × 2 */
.jdm-empty-state {
    text-align: center;
    padding: 60px 20px;
    font-size: 13px;
    color: var(--ink-soft);
}

/* ── Dashboard modal overlay ─────────────────────────────────────────────── */
/* Utilisé dans template-parts × 3 */
.jdm-modal-overlay-full {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.jdm-modal-overlay-full.is-open { display: flex; }

/* ── Bouton réinitialiser (ghost, sans style natif) ─────────────────────── */
/* Utilisé dans template-parts × 5 */
.jdm-btn-reset {
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: 100%;
    padding: 0;
}

/* ── Dashboard : puce de compteur (badge rond vert) ─────────────────────── */
/* Utilisé dans template-parts × 3 */
.jdm-count-badge {
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2d5a3d;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #7ef552;
    flex-shrink: 0;
}

/* ── Dashboard : texte secondaire (petite légende) ──────────────────────── */
/* Utilisé dans template-parts × 3 */
.jdm-card-meta {
    font-size: 13px;
    color: rgba(255,255,255,.75);
    line-height: 1.45;
    padding-top: 2px;
}
.jdm-card-meta--xs { font-size: 10px; color: rgba(255,255,255,.45); }

/* ── Dashboard défi : badge "en cours" ──────────────────────────────────── */
/* Utilisé dans bloc-club-defi.php */
.jdm-defi-badge-count {
    font-size: 11px;
    background: rgba(111,207,66,.15);
    color: #a3e635;
    border: 1px solid rgba(111,207,66,.3);
    border-radius: 99px;
    padding: 2px 8px;
    font-weight: 600;
    flex-shrink: 0;
}

/* ── Dashboard défi : carte d'un défi ───────────────────────────────────── */
.jdm-defi-item {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Dashboard défi : en-tête icône + titre ─────────────────────────────── */
.jdm-defi-hd          { display: flex; align-items: flex-start; gap: 10px; }
.jdm-defi-hd__icon    { font-size: 22px; line-height: 1; flex-shrink: 0; }
.jdm-defi-hd__body    { flex: 1; min-width: 0; }
.jdm-defi-hd__title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jdm-defi-hd__name    { font-size: 13px; font-weight: 700; color: #fff; }
.jdm-defi-hd__status  { font-size: 10px; color: rgba(255,255,255,.45); margin-left: auto; white-space: nowrap; }
.jdm-defi-hd__desc    { font-size: 11px; color: rgba(255,255,255,.5); margin: 2px 0 0; line-height: 1.4; }

/* ── Dashboard défi : section interne (fond légèrement contrasté) ────────── */
.jdm-defi-section {
    background: rgba(255,255,255,.05);
    border-radius: 7px;
    padding: 8px 9px;
}

/* ── Dashboard défi : titre de section interne ──────────────────────────── */
.jdm-defi-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}
.jdm-defi-section-title--sm { font-size: 10px; color: rgba(255,255,255,.6); margin: 0; line-height: 1.4; }

/* ── Dashboard défi : bouton fermer modal ────────────────────────────────── */
.jdm-modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #fff;
    display: grid;
    place-items: center;
}

/* ── Deuxième passe — patterns supplémentaires ─────────────────────────────── */
.jdm-modal-label        { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: #374151; }
.jdm-field-input--sm    { padding: 8px 11px; font-size: 13px; border-color: #d1d5db; }
.jdm-flex-row           { display: flex; align-items: flex-start; gap: 12px; }
.jdm-icon-faded         { flex-shrink: 0; opacity: .7; }
.jdm-label-xs           { display: block; font-size: 12px; margin-bottom: 1px; }
.jdm-radius             { border-radius: 8px; }
.jdm-inline-flex        { display: inline-flex; }
.jdm-center-flex        { margin-top: 36px; display: flex; justify-content: center; }
.jdm-label-upper-faint  { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); margin-bottom: 5px; }
.jdm-lead               { font-size: 18px; color: var(--ink-soft); margin-bottom: 20px; }
.jdm-white              { color: #fff; }
.jdm-mb-22              { margin-bottom: 22px; }
.jdm-mt-56              { margin-top: 56px; }
.jdm-pb-lg              { padding-bottom: 32px; }
.jdm-p0                 { padding: 0; }
.jdm-flex-center-12     { display: flex; align-items: center; gap: 12px; }
.jdm-subtitle           { color: rgba(255,255,255,.55); margin-top: 6px; font-size: 14px; }

/* ── Troisième passe — patterns restants ─────────────────────────────────── */
.jdm-cover             { height: 100%; width: 100%; }
.jdm-gradient-bg       { background: linear-gradient(135deg, var(--moss), var(--forest)); width: 100%; height: 100%; }
.jdm-hero-overlay      { background: linear-gradient(160deg, var(--forest) 0%, var(--moss) 100%); }
.jdm-pos-rel           { position: relative; }
.jdm-modal-close-abs   { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.1); border: none; cursor: pointer; color: rgba(255,255,255,.7); font-size: 16px; display: grid; place-items: center; }
.jdm-btn-filter        { border: 1px solid var(--smoke); border-radius: 7px; padding: 7px 12px; font-size: 13px; background: #fff; cursor: pointer; min-width: 160px; }
.jdm-flex-grow-center  { flex: 1; justify-content: center; }
.jdm-modal-overlay-sm  { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.75); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 16px; }
.jdm-modal-overlay-sm.is-open { display: flex; }
.jdm-btn-lg            { font-size: 14px; padding: 11px 22px; }
.jdm-icon-xl           { font-size: 24px; }
.jdm-text-xs           { font-size: 12px; }

/* ── bloc-club-defi.php ──────────────────────────────────────────────────── */
.jdm-defi-prog-hd  { display: flex; justify-content: space-between; margin-bottom: 4px; }
.jdm-defi-podium   { display: flex; gap: 6px; }
.jdm-defi-actions  { display: flex; gap: 6px; flex-wrap: wrap; }
.jdm-defi-global-btns { display: flex; gap: 8px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.07); }