/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  SINCÈRES — BACK-OFFICE ADMIN                                           ║
   ║  Fichier : css/admin.css                                                ║
   ║  Rôle    : Tous les styles du back-office admin Sincères                ║
   ║  Chargé  : uniquement sur les pages admin (via functions.php)           ║
   ║                                                                         ║
   ║  Pages couvertes :                                                      ║
   ║    - templates/admin/tableau-bord-admin.php                             ║
   ║    - templates/admin/admin-membres.php                                  ║
   ║    - templates/admin/admin-membre-detail.php                            ║
   ║    - templates/admin/admin-gestion-inscriptions.php                     ║
   ║    - templates/admin/admin-photos-a-valider.php                         ║
   ║    - templates/admin/admin-signalements.php                             ║
   ║    - templates/admin/tarifs.php                                         ║
   ║                                                                         ║
   ║  Structure :                                                            ║
   ║    A. Variables CSS (:root)                                             ║
   ║    B. Reset + Body                                                      ║
   ║    C. Navigation admin (unifiée)                                        ║
   ║    D. Structure commune (main, titres, tableaux, alertes)               ║
   ║    E. Tableau de bord (compteurs)                                       ║
   ║    F. Gestion inscriptions                                              ║
   ║    G. Liste membres (filtres, pagination, badges)                       ║
   ║    H. Fiche membre (cards, info-grid, actions)                          ║
   ║    I. Photos à valider                                                  ║
   ║    J. Signalements + modal                                              ║
   ║    K. Tarifs abonnements + popup                                        ║
   ║    L. Responsive                                                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ═══════════════ A. VARIABLES CSS ═══════════════════════════════════════════ */

:root {
    --rose:      #C94F6D;
    --rose-dark: #8B2D45;
    --rose-light:#F5E6EA;
    --cream:     #FAF7F4;
    --warm:      #F0E8E0;
    --white:     #FFFFFF;
    --charcoal:  #1C1C1C;
    --muted:     #6B6460;
    --gold:      #C4A882;
    --vert:      #2E7D32;
    --vert-bg:   #E8F5E9;
    --orange:    #E65100;
    --orange-bg: #FFF3E0;
    --rouge:     #B71C1C;
    --rouge-bg:  #FFEBEE;
    --bleu:      #1565C0;
}


/* ═══════════════ B. RESET + BODY ════════════════════════════════════════════ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* html hérite de margin-top: 32px !important ajouté par WordPress (admin-bar.min.css)
   pour réserver l'espace de la barre d'admin WP. On l'annule : notre nav admin
   est sticky top:0 et doit coller directement en haut du viewport. */
html {
    margin-top: 0 !important;
}

body {
    font-family: Arial, sans-serif;
    background: var(--cream);
    color: var(--charcoal);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

/* Annule le padding-top de sinceres.css uniquement sur les pages admin,
   qui ont leur propre nav (.admin-nav) et pas de nav publique sticky.
   :has(.admin-nav) cible uniquement les pages qui contiennent la nav admin. */
body:has(.admin-nav) {
    padding-top: 0 !important;
}


/* ═══════════════ C. NAVIGATION ADMIN (unifiée) ══════════════════════════════
   Navigation commune à toutes les pages admin.
   Barre sombre sticky en haut de page — logo Sincères à gauche,
   liens de navigation au centre, info date à droite.
   ════════════════════════════════════════════════════════════════════════════ */

.admin-nav {
    background: var(--charcoal);
    color: white;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    /* Décalage sous la barre WP admin (32px desktop, 46px mobile).
       --wp-admin--admin-bar--height est une variable native WordPress,
       toujours à jour même si WP change la hauteur de sa barre. */
    top: var(--wp-admin--admin-bar--height, 32px);
    z-index: 100;
    min-height: 52px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Logo "Sincères · Admin" à gauche */
.nav-logo {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 17px;
    color: var(--rose);
    white-space: nowrap;
    margin-right: 20px;
    flex-shrink: 0;
}

.nav-logo span {
    font-style: normal;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    font-weight: normal;
}

/* Liens de navigation admin — scopés à .admin-nav pour ne pas affecter le menu public.
   flex-wrap:wrap : si trop de liens, ils passent à la 2e ligne plutôt qu'être masqués. */
.admin-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    flex-wrap: wrap;
    padding: 4px 0;
}

.admin-nav .nav-links a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.admin-nav .nav-links a:hover { background: rgba(255,255,255,0.08); color: white; }

.admin-nav .nav-links a.active { background: var(--rose); color: white; font-weight: 500; }

.admin-nav .nav-links a.nav-attente { color: #FFB74D; }
.admin-nav .nav-links a.nav-attente:hover { background: rgba(255,183,77,0.15); color: #FFB74D; }

.admin-nav .nav-links a.active.nav-attente { background: var(--rose); color: white; }

/* Info droite — date ou texte secondaire */
.nav-right {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 16px;
    padding-left: 16px;
}


/* ═══════════════ D. STRUCTURE COMMUNE ═══════════════════════════════════════
   Éléments partagés par toutes les pages admin.
   ════════════════════════════════════════════════════════════════════════════ */

/* Wrapper structurel de page — enveloppe le contenu sous la nav.
   padding-top: 0 car .admin-main (enfant) a déjà son propre padding-top 32px.
   Cumuler les deux donnait 60px d'espace — cohérent avec admin-boite-lettres
   qui n'a pas d'admin-wrap et affiche 32px seulement. */
.admin-wrap {
    padding: 0 28px 60px;
}

/* Conteneur principal — centré, largeur max 1100px */
.admin-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

/* Variante plus large pour la liste membres */
.admin-main--large { max-width: 1280px; }

/* Variante plus étroite pour les pages de formulaire (tarifs, détail) */
.admin-main--narrow { max-width: 860px; }

/* Titre de page */
.admin-titre {
    font-size: 22px;
    font-weight: bold;
    color: var(--charcoal);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Sous-titre de section — ligne séparatrice */
.admin-sous-titre {
    font-size: 16px;
    font-weight: bold;
    color: var(--charcoal);
    margin: 32px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--warm);
}

/* Lien retour arrière */
.lien-retour {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 20px;
    transition: color 0.2s;
}
.lien-retour:hover { color: var(--charcoal); }

/* ── Tableau standard ── */
/* Utilisé sur plusieurs pages admin (inscriptions, signalements, tableau de bord) */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--warm);
    font-size: 13px;
}

.admin-table th {
    background: var(--charcoal);
    color: white;
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--warm);
    color: var(--charcoal);
    vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--cream); }

/* Variante cliquable — curseur pointer + survol plus visible */
.admin-table-cliquable tbody tr { cursor: pointer; }
.admin-table-cliquable tbody tr:hover td { background: var(--warm); }

/* Message "aucun résultat" dans les tableaux */
.admin-vide {
    color: var(--muted);
    font-style: italic;
    font-size: 13px;
    padding: 12px 0;
    text-align: center;
}

/* Bloc vide avec fond blanc encadré */
.admin-vide-wrap {
    background: white;
    border: 1px solid var(--warm);
    border-radius: 14px;
    padding: 40px;
    text-align: center;
}

/* ── Alertes et confirmations ── */

/* Alerte orange — information ou avertissement */
.admin-alerte {
    background: var(--orange-bg);
    border-left: 4px solid var(--orange);
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--charcoal);
    line-height: 1.6;
}
.admin-alerte a { color: var(--orange); font-weight: 600; text-decoration: none; }
.admin-alerte a:hover { text-decoration: underline; }

/* Variante rouge — urgence (signalements) */
.admin-alerte-rouge {
    background: var(--rouge-bg);
    border-left-color: var(--rouge);
}
.admin-alerte-rouge a { color: var(--rouge); }

/* Variante orange — information non urgente (suggestions membres) */
.admin-alerte-orange {
    background: var(--orange-bg);
    border-left-color: var(--orange);
}
.admin-alerte-orange a { color: var(--orange); }

/* Variante verte — succès */
.admin-alerte-succes {
    background: var(--vert-bg);
    border-left-color: var(--vert);
    color: var(--vert);
}

/* Message de confirmation après une action (valider/refuser) */
.admin-confirmation {
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}
.admin-confirmation.vert  { background: var(--vert-bg);  color: var(--vert);  border-left: 4px solid var(--vert);  }
.admin-confirmation.rouge { background: var(--rouge-bg); color: var(--rouge); border-left: 4px solid var(--rouge); }

/* Badge numérique dans les titres (ex: "4 en attente") */
.admin-badge-count {
    background: var(--rose);
    color: white;
    font-size: 13px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 100px;
}

/* Texte d'aide discret sous les titres */
.admin-aide {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 20px;
    line-height: 1.6;
}


/* ═══════════════ E. TABLEAU DE BORD — compteurs ═════════════════════════════
   Page : templates/admin/tableau-bord-admin.php
   ════════════════════════════════════════════════════════════════════════════ */

/* Grille de cartes statistiques — 6 colonnes sur grand écran */
/* Grille de compteurs — adapte automatiquement le nombre de colonnes
   au nombre de cartes enfants via auto-fit + minmax.
   Chaque carte occupe au minimum 120px et s'étend également pour remplir la largeur,
   quelle que soit le nombre de cartes dans la rangée (5, 3, ou autre). */
.admin-compteurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

/* Carte individuelle — cliquable */
.admin-compteur-card {
    cursor: pointer;
    color: inherit;
    background: white;
    border: 1px solid var(--warm);
    border-radius: 12px;
    padding: 18px 10px;
    text-align: center;
    transition: transform 0.15s;
    text-decoration: none;
    display: block;
}
.admin-compteur-card:hover { transform: translateY(-2px); }

/* Variante non cliquable — carte purement informative (ex : compteur Découverte,
   qui n'a pas de page dédiée derrière) — ajouté le 14/07/2026, Étape 6.
   Sans ça, le curseur "main" et l'effet de survol laisseraient croire à tort
   qu'il y a quelque chose à cliquer. */
.admin-compteur-card--statique { cursor: default; }
.admin-compteur-card--statique:hover { transform: none; }

/* Carte "niveau actif" — indique quel niveau d'abonnement est actuellement
   filtré sur la page "Tous les membres" (les 4 cartes Découverte/Discret/
   Classique/Premium ajoutées le 14/07/2026). Même couleur que la nav admin
   pour "page active" (var(--rose)), pour rester cohérent avec cette
   convention déjà utilisée ailleurs dans le back-office. */
/* Sélecteur à 2 classes (.admin-compteur-card + --niveau-actif) : spécificité
   volontairement plus élevée qu'un simple .card-decouverte/.card-discret/etc.,
   pour être sûr que le rose "actif" l'emporte toujours sur la couleur de
   niveau, quel que soit l'ordre des règles dans ce fichier. */
.admin-compteur-card.admin-compteur-card--niveau-actif {
    background: var(--rose);
    border-color: var(--rose);
}
.admin-compteur-card.admin-compteur-card--niveau-actif .admin-compteur-nombre,
.admin-compteur-card.admin-compteur-card--niveau-actif .admin-compteur-label {
    color: white;
}

/* Variantes colorées selon le type de stat */
.card-vert   { background: var(--vert-bg);   border-color: var(--vert);   }
.card-orange { background: var(--orange-bg); border-color: var(--orange); }
.card-rouge  { background: var(--rouge-bg);  border-color: var(--rouge);  }

/* Variantes par niveau d'abonnement — mêmes couleurs que les badges niveau déjà
   utilisés dans la liste des membres (.niveau-decouverte, etc. ci-dessous),
   pour que "Découverte" ait toujours la même couleur partout dans l'admin.
   Ajouté le 14/07/2026 : 4 cartes niveaux sur "Tous les membres" + nouvelle
   couleur dédiée pour la carte "Demandes Découverte" du tableau de bord. */
.card-decouverte { background: #F5F5F5; border-color: #B0B0B0; }
.card-decouverte .admin-compteur-nombre { color: #555; }
.card-discret    { background: #EDE7F6; border-color: #4527A0; }
.card-discret    .admin-compteur-nombre { color: #4527A0; }
.card-classique  { background: #E3F2FD; border-color: #1565C0; }
.card-classique  .admin-compteur-nombre { color: #1565C0; }
.card-premium    { background: #FFF8E1; border-color: #F57F17; }
.card-premium    .admin-compteur-nombre { color: #F57F17; }

/* Grand chiffre au centre de chaque carte */
.admin-compteur-nombre {
    font-size: 36px;
    font-weight: bold;
    color: var(--charcoal);
    line-height: 1;
    margin-bottom: 8px;
}
.card-vert   .admin-compteur-nombre { color: var(--vert);   }
.card-orange .admin-compteur-nombre { color: var(--orange); }
.card-rouge  .admin-compteur-nombre { color: var(--rouge);  }

/* Libellé sous le chiffre */
.admin-compteur-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 500;
}


/* ═══════════════ F. GESTION INSCRIPTIONS ════════════════════════════════════
   Page : templates/admin/admin-gestion-inscriptions.php
   ════════════════════════════════════════════════════════════════════════════ */

.admin-actions { white-space: nowrap; }

/* Bouton "🔍 Accéder au compte" — remplace depuis le 3 juillet 2026 les anciens
   boutons Valider/Refuser (supprimés de cette page, déplacés dans
   admin-membre-detail.php pour éviter le doublon avec la synchronisation Stripe).
   Style neutre (rose du site) plutôt que vert/rouge : ce bouton ne valide ni
   ne refuse rien lui-même, il ouvre juste la fiche du membre. */
.btn-acceder-compte {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
    background: var(--rose);
    color: white;
    text-decoration: none;
}
.btn-acceder-compte:hover { opacity: 0.85; color: white; }


/* ═══════════════ G. LISTE MEMBRES ═══════════════════════════════════════════
   Page : templates/admin/admin-membres.php
   ════════════════════════════════════════════════════════════════════════════ */

/* En-tête de page — titre à gauche, actions éventuelles à droite */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Bloc titre + description */
.page-header-left h1 {
    font-size: 22px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 4px;
}
.page-header-left p {
    font-size: 13px;
    color: var(--muted);
}

/* Barre de filtres — fond blanc, arrondie */
.filtres-bar {
    background: white;
    border: 1px solid var(--warm);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(28,28,28,0.04);
}

/* Groupe filtre individuel (label + champ) */
.filtre-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 140px;
}

.filtre-group label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.filtre-group select,
.filtre-group input[type="text"] {
    height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(28,28,28,0.15);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--charcoal);
    background: white;
    outline: none;
    transition: border-color 0.2s;
}
.filtre-group select:focus,
.filtre-group input[type="text"]:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(201,79,109,0.1);
}

/* Champ recherche — plus large */
.filtre-group.search { min-width: 220px; flex: 1; }

/* Bouton Filtrer */
.btn-filtrer {
    height: 38px;
    padding: 0 20px;
    background: var(--rose);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.btn-filtrer:hover { background: var(--rose-dark); }

/* Bouton Réinitialiser les filtres */
.btn-reset {
    height: 38px;
    padding: 0 16px;
    background: transparent;
    color: var(--muted);
    border: 1px solid rgba(28,28,28,0.15);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.btn-reset:hover { border-color: var(--rose); color: var(--rose); }

/* Compteur résultats */
.compteur {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
    padding-left: 2px;
}
.compteur strong { color: var(--charcoal); font-weight: 500; }

/* Conteneur tableau avec ombre */
.table-wrap {
    background: white;
    border: 1px solid var(--warm);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(28,28,28,0.05);
}

/* Nom + pseudo dans la liste membres */
.membre-name {
    font-weight: 500;
    color: var(--charcoal);
    display: block;
    margin-bottom: 2px;
}
.membre-pseudo {
    font-size: 12px;
    color: var(--muted);
}

/* Texte secondaire dans les cellules */
.td-muted { color: var(--muted); font-size: 12.5px; }

/* Flèche de lien vers la fiche membre */
.td-action {
    color: var(--rose);
    font-size: 16px;
    text-align: right;
    padding-right: 20px;
}

/* ── Badges statut et niveau ── */
.badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 100px;
    white-space: nowrap;
}

.badge-valide   { background: #E8F5E9; color: var(--vert);   }
.badge-attente  { background: #FFF3E0; color: var(--orange); }
.badge-suspendu { background: #FFEBEE; color: var(--rouge);  }

.niveau-decouverte { background: #F5F5F5; color: #555;     }
.niveau-discret    { background: #EDE7F6; color: #4527A0;  }
.niveau-classique  { background: #E3F2FD; color: #1565C0;  }
.niveau-premium    { background: #FFF8E1; color: #F57F17;  }

/* ── Pagination ── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 0 8px;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid rgba(28,28,28,0.12);
    color: var(--charcoal);
    background: white;
    transition: all 0.15s;
}
.pagination a:hover           { border-color: var(--rose); color: var(--rose); }
.pagination span.active       { background: var(--rose); color: white; border-color: var(--rose); }
.pagination span.dots         { border: none; background: transparent; color: var(--muted); }
.pagination-nav               { font-size: 13px; padding: 0 8px; width: auto; }

/* ── État vide (aucun membre trouvé) ── */
.vide {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}
.vide-icon { font-size: 40px; margin-bottom: 16px; opacity: 0.4; display: block; }
.vide p    { font-size: 15px; }

/* ── Tableau admin-membres — pas de classe sur <table>, on cible via .table-wrap
   Ces règles reproduisent exactement le style de .admin-table / .admin-table-cliquable
   pour que admin-membres.php ait le même rendu visuel que les autres pages.
   À supprimer lors du refactoring des classes PHP (sera remplacé par .admin-table). ── */
.table-wrap table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 13px;
}
.table-wrap table th {
    background: var(--charcoal);
    color: white;
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table-wrap table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--warm);
    color: var(--charcoal);
    vertical-align: middle;
}
.table-wrap table tr:last-child td { border-bottom: none; }
/* Curseur pointer sur les lignes cliquables (onclick inline dans le PHP) */
.table-wrap table tr[onclick] { cursor: pointer; }
.table-wrap table tr[onclick]:hover td { background: var(--cream); }


/* ═══════════════ H. FICHE MEMBRE ════════════════════════════════════════════
   Page : templates/admin/admin-membre-detail.php
   ════════════════════════════════════════════════════════════════════════════ */

/* Titre de page avec badge statut inline */
.page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Badge statut (valide/suspendu/en attente) — pastille colorée */
.badge-statut {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 100px;
    color: white;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Carte blanche — chaque section de la fiche est dans une carte */
.card {
    background: white;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid rgba(201,79,109,0.08);
}

/* Titre de section dans une carte */
.card-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--rose);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--warm);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Grille d'informations membres — 2-3 colonnes selon la largeur */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 24px;
}

/* Libellé et valeur d'un champ */
.info-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted);
    margin-bottom: 4px;
}

.info-value {
    font-size: 15px;
    color: var(--charcoal);
}
.info-value.empty { color: var(--muted); font-style: italic; font-size: 13px; }

/* Texte de description libre */
.description-texte { font-size: 15px; line-height: 1.7; color: var(--charcoal); white-space: pre-wrap; }
.description-vide  { color: var(--muted); font-style: italic; font-size: 14px; }

/* Message retour d'action (validation, suspension) */
.msg-action {
    background: var(--rose-light);
    border-left: 4px solid var(--rose);
    border-radius: 0 10px 10px 0;
    padding: 12px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--rose-dark);
    font-weight: 500;
}

/* Zone boutons d'action sur la fiche */
.actions-zone {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Bouton d'action générique — pill arrondie */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    font-family: inherit;
}
.btn-action:hover  { opacity: 0.85; transform: translateY(-1px); }
.btn-action:active { transform: translateY(0); }

.btn-valider-action  { background: var(--vert);  color: white; }
.btn-refuser-action  { background: var(--rouge); color: white; }
.btn-suspendre       { background: var(--rouge); color: white; }
.btn-reactiver       { background: var(--bleu);  color: white; }
/* Bouton suppression définitive — ajouté le 10 juin 2026
   Rouge foncé (plus sombre que btn-refuser) pour marquer visuellement
   que cette action est irréversible et plus grave qu'une simple suspension.
   Visible uniquement pour les membres avec statut 'suspendu' ou 'suspendu_admin'. */
/* Pas de border — hérite de btn-action (border: none) pour rester aligné avec les autres boutons */
.btn-supprimer       { background: #7F1D1D; color: white; }
.btn-supprimer:hover { background: #991B1B; opacity: 1; }

/* Message "membre introuvable" */
.introuvable { text-align: center; padding: 60px 24px; }
.introuvable .icon { font-size: 48px; margin-bottom: 16px; display: block; }
.introuvable h2 { font-size: 20px; margin-bottom: 8px; }
.introuvable p  { color: var(--muted); font-size: 15px; }


/* ═══════════════ I. PHOTOS À VALIDER ════════════════════════════════════════
   Page : templates/admin/admin-photos-a-valider.php
   ════════════════════════════════════════════════════════════════════════════ */

/* Bandeau compteur en haut de page */
.photos-compteur    { font-size: 15px; color: var(--muted); margin-bottom: 28px; }
.photos-compteur-nb { font-size: 22px; font-weight: 700; color: var(--orange); margin-right: 6px; }
.photos-compteur-zero { color: var(--vert); font-weight: 600; }

/* Grille de cartes photos — 4 colonnes sur grand écran */
.photos-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Carte individuelle */
.photo-card {
    background: white;
    border: 1px solid var(--warm);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Miniature — ratio 3:4 portrait (cohérent avec le trombinoscope) */
.photo-card-img {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #eee;
}
.photo-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* priorité au visage */
    display: block;
}

/* Badge "Principale" sur la miniature */
.photo-badge-principale {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--rose);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 100px;
}

/* Infos membre sous la photo */
.photo-card-infos    { padding: 12px 12px 8px; flex: 1; }
.photo-card-membre   { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.photo-card-pseudo   { color: var(--muted); font-weight: 400; margin-left: 6px; }
.photo-card-meta     { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Lien "Voir la fiche membre" — remplace les anciens boutons Valider/Refuser.
   CE QUE : bouton-lien centré qui redirige vers la fiche admin du membre.
   COMMENT : display:block pour occuper toute la largeur de la carte,
             couleur neutre (gris-bleu) pour ne pas suggérer une action
             irréversible — c'est juste une navigation.
   POURQUOI : la validation/refus se fait dans admin-membre-detail.php
              (avec envoi d'email). On ne duplique pas la logique ici. */
.photo-card-actions { padding: 10px 12px 14px; }

.btn-voir-fiche {
    display: block;
    width: 100%;
    padding: 9px 6px;
    border: 1.5px solid #94A3B8;    /* gris-bleu neutre */
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #475569;
    background: #F8FAFC;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s;
}
.btn-voir-fiche:hover {
    background: #475569;
    color: white;
    border-color: #475569;
}


/* ═══════════════ J. SIGNALEMENTS + MODAL ════════════════════════════════════
   Page : templates/admin/admin-signalements.php
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Onglets À traiter / Traités ── */
.admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--warm);
    margin-bottom: 0;
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px; /* couvre la bordure du conteneur */
    transition: color 0.15s;
}
.admin-tab:hover { color: var(--charcoal); }
.admin-tab.actif { color: var(--charcoal); border-bottom-color: var(--rose); }

/* Badge numérique sur les onglets */
.admin-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--rouge-bg);
    color: var(--rouge);
    border: 1px solid var(--rouge);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.admin-tab-badge--vert { background: var(--vert-bg); color: var(--vert); border-color: var(--vert); }

.admin-tab-contenu          { padding-top: 16px; }
.admin-tab-contenu[hidden]  { display: none; }

/* Indication "Cliquez sur une ligne" */
.admin-sig-aide {
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    margin-bottom: 10px;
}

/* Colonnes aperçu/motif — troncature */
.admin-apercu,
.admin-motif {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: var(--muted);
}

/* Pseudo sous le prénom */
.admin-pseudo {
    display: block;
    font-size: 11px;
    color: var(--muted);
    font-weight: 400;
}

/* Ligne traitée — opacité réduite */
.admin-row-traite td { opacity: 0.65; }

/* Badge récidive */
.admin-sig-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--rouge-bg);
    color: var(--rouge);
    border: 1px solid var(--rouge);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Bouton "Marquer traité" ── */
.admin-btn-traiter {
    padding: 6px 14px;
    background: var(--vert-bg);
    color: var(--vert);
    border: 1px solid var(--vert);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.admin-btn-traiter:hover    { background: var(--vert); color: white; }
.admin-btn-traiter:disabled { opacity: 0.5; cursor: wait; }
.admin-btn-traiter-modal    { padding: 10px 24px; font-size: 14px; }

/* ── Modal signalement ── */
/* Overlay plein écran — fond semi-transparent */
.admin-sig-modal-overlay {
    display: none; /* JS → style.display = 'flex' pour ouvrir */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Boîte du modal */
.admin-sig-modal {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

/* Bouton ✕ */
.admin-sig-modal-fermer {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--warm);
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    color: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.admin-sig-modal-fermer:hover { background: #d0c8c0; }

/* Titre et date dans le modal */
.admin-sig-modal-titre {
    font-size: 18px;
    font-weight: bold;
    color: var(--charcoal);
    margin-bottom: 4px;
    padding-right: 40px;
}
.admin-sig-modal-date { font-size: 12px; color: var(--muted); margin-bottom: 24px; }

/* Deux blocs membres côte à côte */
.admin-sig-modal-membres {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.admin-sig-modal-membre {
    background: var(--cream);
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid var(--warm);
}
.admin-sig-modal-signale { border-color: var(--rouge); background: var(--rouge-bg); }

.admin-sig-label        { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.admin-sig-label-rouge  { color: var(--rouge); }
.admin-sig-prenom       { font-size: 16px; font-weight: bold; color: var(--charcoal); margin-bottom: 2px; }
.admin-sig-pseudo       { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.admin-sig-lien         { font-size: 11px; color: var(--rose); text-decoration: none; font-weight: 600; }
.admin-sig-lien:hover   { text-decoration: underline; }
.admin-sig-tel          { font-size: 12px; color: var(--muted); margin-top: 2px; margin-bottom: 6px; }

.admin-sig-recidive {
    display: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--rouge);
    background: var(--rouge-bg);
    border: 1px solid var(--rouge);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 6px;
    margin-bottom: 4px;
}

/* Sections message + motif dans le modal */
.admin-sig-section       { margin-bottom: 20px; }
.admin-sig-section-titre {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-sig-msg-date {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}

/* Contenu du message signalé */
.admin-sig-msg-contenu {
    background: #F5F5F5;
    border-left: 4px solid var(--rouge);
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--charcoal);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Motif du signalement */
.admin-sig-motif-contenu {
    background: #FFF8E1;
    border-left: 4px solid #F59E0B;
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--charcoal);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Zone bouton "Traité" en bas du modal */
.admin-sig-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid var(--warm);
    margin-top: 20px;
}

/* Zone email dans le modal */
.admin-sig-email-section      { border-top: 1px solid var(--warm); padding-top: 16px; margin-top: 4px; }
.admin-sig-email-destinataire { font-size: 12px; color: var(--muted); margin-bottom: 10px; font-style: italic; }

.admin-sig-email-objet,
.admin-sig-email-corps {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--warm);
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: var(--charcoal);
    background: white;
    box-sizing: border-box;
}
.admin-sig-email-objet        { margin-bottom: 8px; }
.admin-sig-email-corps        { height: 90px; resize: vertical; margin-bottom: 10px; }
.admin-sig-email-objet:focus,
.admin-sig-email-corps:focus  { outline: none; border-color: var(--rose); }

.admin-sig-email-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.admin-btn-envoyer-email {
    padding: 8px 18px;
    background: var(--rose);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.admin-btn-envoyer-email:hover    { background: var(--rose-dark); }
.admin-btn-envoyer-email:disabled { opacity: 0.6; cursor: wait; }

.admin-sig-email-feedback      { font-size: 12px; min-height: 16px; flex: 1; }
.admin-sig-email-feedback.ok   { color: var(--vert); }
.admin-sig-email-feedback.err  { color: var(--rouge); }


/* ═══════════════ K. TARIFS ABONNEMENTS + POPUP ══════════════════════════════
   Page : templates/admin/tarifs.php
   ════════════════════════════════════════════════════════════════════════════ */

/* Texte d'avertissement sous le titre */
.admin-avertissement {
    background: var(--orange-bg);
    border-left: 4px solid var(--orange);
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin-bottom: 32px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--charcoal);
}
.admin-avertissement strong { color: var(--orange); }

/* Carte d'offre — une ligne par offre dans le formulaire */
.offre-card {
    background: white;
    border: 1px solid var(--warm);
    border-left: 4px solid var(--rose);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.offre-label { flex: 1; }

.offre-nom {
    font-size: 15px;
    font-weight: bold;
    color: var(--charcoal);
    margin-bottom: 4px;
}

/* Constante Stripe correspondante — info lecture seule */
.offre-constant {
    font-size: 11px;
    color: var(--muted);
    font-family: monospace;
    background: var(--warm);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Largeur fixe sur le bloc prix — garantit que tous les inputs sont
   alignés verticalement, qu'il y ait ou non le badge ÷6 à droite */
.offre-prix-wrap { display: flex; align-items: center; gap: 10px; width: 320px; flex-shrink: 0; }

/* Champ prix */
.offre-input {
    width: 90px;
    font-size: 18px;
    font-weight: bold;
    color: var(--charcoal);
    text-align: right;
    padding: 8px 12px;
    border: 2px solid var(--warm);
    border-radius: 8px;
    background: white;
    transition: border-color 0.2s;
    font-family: inherit;
}
.offre-input:focus { outline: none; border-color: var(--rose); }

.offre-symbole { font-size: 18px; font-weight: bold; color: var(--charcoal); }
.offre-periode { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* Calcul mensuel automatique (÷6) — affiché à droite du champ semestriel */
/* .offre-calc : encadré discret qui affiche le résultat calculé en JS     */
.offre-calc {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rose);
    background: rgba(201, 79, 109, 0.08);
    border: 1px solid rgba(201, 79, 109, 0.2);
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
}
.offre-calc-val  { font-size: 15px; font-weight: 700; }
.offre-calc-libelle { font-size: 11px; color: var(--muted); font-weight: 400; }

/* Bouton enregistrer les tarifs */
.btn-enregistrer {
    display: block;
    width: 100%;
    padding: 16px;
    margin-top: 24px;
    background: var(--rose);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}
.btn-enregistrer:hover { background: var(--rose-dark); }

/* ── Popup instructions Stripe ── */
/* Overlay sombre plein écran */
.popup-overlay {
    display: none; /* JS ajoute .visible pour afficher */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    overflow-y: auto;
}
.popup-overlay.visible { display: flex; }

/* Boîte du popup */
.popup-boite {
    background: white;
    border-radius: 12px;
    max-width: 680px;
    width: 100%;
    padding: 32px;
    position: relative;
}

/* Bouton ✕ */
.popup-fermer {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
}
.popup-fermer:hover { color: var(--charcoal); }

.popup-titre {
    font-size: 16px;
    font-weight: bold;
    color: var(--orange);
    margin-bottom: 8px;
}

.popup-intro {
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Étapes dans le popup */
.popup-etape { margin-bottom: 20px; }

.popup-etape-titre {
    font-size: 14px;
    font-weight: bold;
    color: var(--charcoal);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--warm);
}

.popup-etape-note {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
    font-style: italic;
}

.popup-etape ol,
.popup-etape ul {
    padding-left: 18px;
    font-size: 13px;
    line-height: 2;
    color: var(--charcoal);
}

.popup-etape code {
    background: var(--warm);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
}

/* Bloc "pourquoi ces 3 étapes sont obligatoires" */
.popup-pourquoi {
    background: var(--cream);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.8;
    margin-top: 16px;
}
.popup-pourquoi strong { color: var(--charcoal); }

/* Bouton "J'ai compris" */
.popup-btn-fermer {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background: var(--charcoal);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
}
.popup-btn-fermer:hover { opacity: 0.85; }


/* ═══════════════ L. RESPONSIVE ══════════════════════════════════════════════ */

/* Tablette : compteurs 6 → 3 colonnes */
@media (max-width: 1024px) {
    .admin-compteurs     { grid-template-columns: repeat(3, 1fr); }
    .photos-grille       { grid-template-columns: repeat(3, 1fr); }
    .admin-apercu,
    .admin-motif         { max-width: 150px; }
}

@media (max-width: 900px) {
    .admin-nav  { padding: 0 16px; }
    .admin-main { padding: 20px 16px 40px; }
    .admin-table { font-size: 12px; }
    .admin-table th,
    .admin-table td { padding: 8px 10px; }
}

/* Mobile : compteurs 2 colonnes, photos 2 colonnes */
@media (max-width: 768px) {
    .admin-compteurs  { grid-template-columns: 1fr 1fr; }
    .filtres-bar      { flex-direction: column; align-items: stretch; }
    .filtre-group     { min-width: unset; }
    .admin-apercu,
    .admin-motif      { max-width: 100px; }
    .admin-sig-modal  { padding: 24px 16px; border-radius: 12px; }
    .admin-sig-modal-membres { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .photos-grille    { grid-template-columns: repeat(2, 1fr); }
    .card             { padding: 20px 18px; }
    .actions-zone     { flex-direction: column; }
    .btn-action       { justify-content: center; }
}