/*
 * custom.css — Styles personnalisés Affiny
 * Direction artistique : Clean Mint (sobre, blanc, vert menthe)
 *
 * Organisation :
 *   1. Base       — corps de page, focus, date
 *   2. Animations — apparition, rotation spinner
 *   3. Cartes     — carte blanche, carte accent
 *   4. Boutons    — primaire, secondaire, accent
 *   5. Champs     — inputs et textareas
 *   6. Messages   — succès, erreur, avertissement
 *   7. Badges     — vert, rouge, primaire
 *   8. Textes     — erreur, accent
 *   9. Navigation — barre mobile fixe
 *  10. Profil     — btn-choix, tag-passion, zone-photo
 *  11. Découvrir  — spinner, filtres d'âge
 *  12. Admin      — icônes stats, icônes actions, lien retour
 */


/* ================================================
   1. BASE
   ================================================ */

body {
    background-color: #f8fafc;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Halo vert au focus sur tous les champs de saisie */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus {
    outline: none;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* Forcer le mode clair sur les champs de date */
input[type="date"] {
    color-scheme: light;
}


/* ================================================
   2. ANIMATIONS
   ================================================ */

/* Apparition douce (page connexion / inscription) */
@keyframes apparition {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Rotation continue pour le spinner de chargement */
@keyframes tourner {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* ================================================
   3. CARTES
   ================================================ */

/* Carte standard : fond blanc + bordure gris clair */
.carte {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
}

/* Carte accent : fond vert très clair + bordure verte */
.carte-accent {
    background-color: #f0fdf4;
    border: 1px solid #a7f3d0;
}

/* Carte bannissement : fond blanc + bordure rouge */
.carte-banni {
    border-color: #fecaca;
}


/* ================================================
   4. BOUTONS
   ================================================ */

/* Bouton principal : fond vert menthe plein, texte blanc */
.btn-primaire {
    background-color: #10b981;
    color: #ffffff;
}

.btn-primaire:hover {
    opacity: 0.9;
}

/* Bouton secondaire : fond gris clair, texte gris, bordure */
.btn-secondaire {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    text-decoration: none;
}

.btn-secondaire:hover {
    opacity: 0.85;
}

/* Bouton accent : fond vert très clair + bordure verte */
.btn-accent {
    background-color: #f0fdf4;
    border: 1px solid #a7f3d0;
    color: #059669;
}

.btn-accent:hover {
    opacity: 0.85;
}


/* ================================================
   5. CHAMPS DE FORMULAIRE
   ================================================ */

/* Style commun aux inputs et textareas (fond, bordure, couleur) */
.champ {
    background-color: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
}


/* ================================================
   6. MESSAGES D'ALERTE
   ================================================ */

/* Message de succès : fond vert doux */
.msg-succes {
    background-color: #f0fdf4;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

/* Message d'erreur : fond rouge doux */
.msg-erreur {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* Message d'avertissement : fond jaune doux */
.msg-warning {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
}


/* ================================================
   7. BADGES ET ÉTIQUETTES
   ================================================ */

/* Badge vert (statut actif, accent) */
.badge-vert {
    background-color: #f0fdf4;
    color: #059669;
    border: 1px solid #a7f3d0;
}

/* Badge rouge (banni, danger) */
.badge-rouge {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Badge primaire : vert plein, texte blanc */
.badge-primaire {
    background-color: #10b981;
    color: #ffffff;
}


/* ================================================
   8. TEXTES UTILITAIRES
   ================================================ */

/* Couleur d'erreur sous les champs de formulaire */
.texte-erreur {
    color: #f87171;
}


/* ================================================
   9. NAVIGATION MOBILE — barre fixe en bas
   ================================================ */

.nav-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
    z-index: 100;
}

.nav-item {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav-item:hover {
    color: #475569;
}

.nav-item.actif {
    color: #10b981;
}


/* ================================================
   10. PAGE CRÉATION DE PROFIL
   ================================================ */

/* Boutons de sélection unique (genre, recherche_genre) */
.btn-choix {
    cursor: pointer;
    border: 1px solid #e2e8f0;
    color: #64748b;
    background-color: #ffffff;
    transition: all 0.15s ease;
}

.btn-choix:hover {
    border-color: #10b981;
    color: #1e293b;
}

.btn-choix.selectionne {
    border-color: #10b981;
    color: #10b981;
    background-color: #f0fdf4;
}

/* Tags de passions */
.tag-passion {
    cursor: pointer;
    border: 1px solid #e2e8f0;
    color: #64748b;
    background-color: #ffffff;
    transition: all 0.15s ease;
}

.tag-passion:hover {
    border-color: #10b981;
    color: #1e293b;
}

.tag-passion.selectionne {
    border-color: #10b981;
    color: #059669;
    background-color: #f0fdf4;
}

/* Zone d'upload de photo de profil */
.zone-photo {
    border: 2px dashed #cbd5e1;
    cursor: pointer;
    background-color: #f8fafc;
    transition: border-color 0.15s ease;
}

.zone-photo:hover {
    border-color: #10b981;
}


/* ================================================
   11. PAGE DÉCOUVRIR
   ================================================ */

/* Spinner de chargement (cercle en rotation) */
.spinner {
    border-color: #e2e8f0;
    border-top-color: #10b981;
    animation: tourner 0.8s linear infinite;
}

/* Bouton filtre de tranche d'âge (pill) */
.filtre-age {
    white-space: nowrap;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid #e2e8f0;
    background-color: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.filtre-age:hover {
    border-color: #10b981;
    color: #1e293b;
}

/* Filtre d'âge actif */
.filtre-age.selectionne-age {
    background-color: #f0fdf4;
    border-color: #10b981;
    color: #10b981;
}


/* ================================================
   12. ADMINISTRATION
   ================================================ */

/* Icône arrondie dans les cartes de stats admin */
.icone-admin {
    width: 2.25rem;
    height: 2.25rem;
    background-color: #10b981;
    color: #ffffff;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icône arrondie dans les liens d'action admin */
.icone-action {
    width: 2.75rem;
    height: 2.75rem;
    background-color: #f0fdf4;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Lien de retour en haut des pages admin */
.lien-retour {
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Tags de passions sur les cartes de swipe (fond sombre) */
.tag-swipe {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Tags de passions sur les cartes de profil match (fond clair) */
.tag-swipe-vert {
    background-color: #f0fdf4;
    color: #10b981;
    border: 1px solid #a7f3d0;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}