/* =====================================================================
   STYLE GLOBAL – OUTILS INTERNES SA / LG
   ---------------------------------------------------------------------
   Objectif :
   - Centraliser tous les styles personnalisés du projet.
   - Ne jamais modifier directement Bootstrap.
   - Fournir un système simple pour distinguer :
       * Loisirs gratuits (vert)
       * Soins alternatifs (bleu)
   - Permettre de mixer les deux thèmes sur une même page.

   Rappel :
   - Bootstrap est chargé dans /includes/haut.php
   - Ce fichier est chargé après Bootstrap : il peut donc surcharger
     certaines choses via classes ou CSS variables personnalisées.
   ===================================================================== */


/* =====================================================================
   1. VARIABLES GLOBALES
   ---------------------------------------------------------------------
   - Palette de couleurs commune au projet.
   - Les nuances "dark" et "light" servent pour les hover, fonds alternés
     et valeurs de stats.
   - Ces variables sont utilisées dans TOUT le fichier (boutons, tableaux,
     cartes, etc.).
   ===================================================================== */

:root{
    /* Couleur principale pour les loisirs gratuits (LG) */
    --sa-vert:#3AB55C;

    /* Variante plus foncée du vert (hover, bordures actives, titres) */
    --sa-vert-dark:#2D8D47;

    /* Variante plus claire du vert (états désactivés, fonds pâles) */
    --sa-vert-light:#60C97C;

    /* Couleur principale pour les soins alternatifs (SA) */
    --sa-bleu:#3AAED8;

    /* Variante plus foncée du bleu (hover, bordures actives, titres) */
    --sa-bleu-dark:#2B86A6;

    /* Variante plus claire du bleu (états désactivés, fonds pâles) */
    --sa-bleu-light:#63C3E3;

    /* Couleur principale pour Beauté et Soins */
    --sa-noir:#212529;

    /* Variante plus foncée du noir (hover, bordures actives, titres) */
    --sa-noir-dark:#000000;

    /* Variante plus claire du noir (états désactivés, fonds pâles) */
    --sa-noir-light:#495057;

    /* Couleur d’accentuation secondaire (non thématique) */
    --sa-orange:#FFA94D;

    /* Gris utilisé pour le texte standard et certains liens */
    --sa-gris:#555555;

    /* Gris très clair utilisé pour le fond global de la page */
    --sa-gris-light:#F2F2F2;
}


/* =====================================================================
   2. LAYOUT GLOBAL (BODY, HEADER, LIEN RETOUR)
   ---------------------------------------------------------------------
   Ces styles gèrent l’aspect général de toutes les pages :
   - Fond global
   - Bandeau supérieur (header)
   - Lien "← Retour menu"
   ===================================================================== */

/* Fond global du site (toutes les pages) */
body{
    /* Fond légèrement grisé pour détacher les blocs blancs */
    background: var(--sa-gris-light);
}

/* Bandeau supérieur commun à toutes les pages */
.sa-header{
    background: #ffffff;        /* Fond blanc pour contraster avec body */
    padding: 25px 0;            /* Espacement vertical confortable */
    border-bottom: 4px solid var(--sa-vert); /* Ligne verte forte */
    margin-bottom: 30px;        /* Espace sous le header pour le contenu */
}

/* Lien "← Retour menu" présent dans le header */
.menu-back{
    text-decoration: none;      /* Pas de soulignement */
    color: var(--sa-gris);      /* Gris neutre */
    font-weight: bold;          /* Mise en avant du lien */
    font-size: 1.1rem;          /* Légèrement plus grand que le texte normal */
}

/* Effet au survol du lien "← Retour menu" */
.menu-back:hover{
    color: var(--sa-vert);      /* Rappel de la couleur loisirs pour cohérence */
}


/* =====================================================================
   3. BOUTONS THÉMATIQUES (Loisirs / Soins)
   ---------------------------------------------------------------------
   Ces classes étendent les boutons Bootstrap, sans modifier .btn lui-même.
   ===================================================================== */

/* ---------------------------------------------------------------------
   3.1. Bouton "Loisirs gratuits"
   --------------------------------------------------------------------- */
.btn-loisirs{
    /* Couleur du texte du bouton */
    --bs-btn-color:#ffffff;

    /* Couleur de fond par défaut du bouton */
    --bs-btn-bg:var(--sa-vert);

    /* Couleur de la bordure du bouton */
    --bs-btn-border-color:var(--sa-vert);

    /* Couleurs au survol */
    --bs-btn-hover-color:#ffffff;
    --bs-btn-hover-bg:var(--sa-vert-dark);
    --bs-btn-hover-border-color:var(--sa-vert-dark);

    /* Couleurs à l’état actif (mousedown) */
    --bs-btn-active-bg:var(--sa-vert-dark);
    --bs-btn-active-border-color:var(--sa-vert-dark);

    /* Couleurs à l’état désactivé */
    --bs-btn-disabled-bg:var(--sa-vert-light);
    --bs-btn-disabled-border-color:var(--sa-vert-light);
}

/* ---------------------------------------------------------------------
   3.2. Bouton "Soins alternatifs"
   --------------------------------------------------------------------- */
.btn-soins{
    --bs-btn-color:#ffffff;
    --bs-btn-bg:var(--sa-bleu);
    --bs-btn-border-color:var(--sa-bleu);

    --bs-btn-hover-color:#ffffff;
    --bs-btn-hover-bg:var(--sa-bleu-dark);
    --bs-btn-hover-border-color:var(--sa-bleu-dark);

    --bs-btn-active-bg:var(--sa-bleu-dark);
    --bs-btn-active-border-color:var(--sa-bleu-dark);

    --bs-btn-disabled-bg:var(--sa-bleu-light);
    --bs-btn-disabled-border-color:var(--sa-bleu-light);
}

/* ---------------------------------------------------------------------
   3.3. Bouton "Beauté et Soins"
   --------------------------------------------------------------------- */
.btn-beaute{
    --bs-btn-color:#ffffff;
    --bs-btn-bg:var(--sa-noir);
    --bs-btn-border-color:var(--sa-noir);

    --bs-btn-hover-color:#ffffff;
    --bs-btn-hover-bg:var(--sa-noir-dark);
    --bs-btn-hover-border-color:var(--sa-noir-dark);

    /* --bs-btn-active-color forcé en blanc : sans ça, Bootstrap retombe sur
       son texte foncé par défaut (#212529) même à l'état actif, illisible
       sur un fond noir (contrairement au vert/bleu où ça reste visible). */
    --bs-btn-active-color:#ffffff;
    --bs-btn-active-bg:var(--sa-noir-dark);
    --bs-btn-active-border-color:var(--sa-noir-dark);

    /* Idem pour l'état désactivé, sur le fond gris foncé --sa-noir-light. */
    --bs-btn-disabled-color:#ffffff;
    --bs-btn-disabled-bg:var(--sa-noir-light);
    --bs-btn-disabled-border-color:var(--sa-noir-light);
}


/* =====================================================================
   4. ONGLETS (NAV-TABS) THÉMATIQUES
   ---------------------------------------------------------------------
   Objectif :
   - Avoir des barres d’onglets visuellement liées à chaque thème.
   ===================================================================== */

/* ---------------------------------------------------------------------
   4.1. Onglets pour les pages/sections "Loisirs"
   --------------------------------------------------------------------- */
.nav-tabs-loisirs{
    /* Ligne de base verte sous les onglets */
    border-bottom: 2px solid var(--sa-vert);
}

/* Style des liens d’onglets non actifs (couleur de texte par défaut) */
.nav-tabs-loisirs .nav-link{
    color: var(--sa-gris);
}

/* Style de l’onglet actif (celui qui affiche son contenu) */
.nav-tabs-loisirs .nav-link.active{
    color: var(--sa-vert-dark);     /* Texte légèrement plus foncé */
    border-color: var(--sa-vert) var(--sa-vert) #ffffff;
    /* Bordure supérieure et latérales vertes, bordure basse blanche
       pour "fusionner" visuellement avec le contenu sur fond blanc. */

    background-color: #ffffff;      /* Fond blanc pour l’onglet actif */
    font-weight: 600;               /* Légèrement gras */
}

/* ---------------------------------------------------------------------
   4.2. Onglets pour les pages/sections "Soins"
   --------------------------------------------------------------------- */
.nav-tabs-soins{
    border-bottom: 2px solid var(--sa-bleu);
}

.nav-tabs-soins .nav-link{
    color: var(--sa-gris);
}

.nav-tabs-soins .nav-link.active{
    color: var(--sa-bleu-dark);
    border-color: var(--sa-bleu) var(--sa-bleu) #ffffff;
    background-color: #ffffff;
    font-weight: 600;
}


/* =====================================================================
   5. TABLEAUX THÉMATIQUES (CORRIGÉ POUR ÉCRASER BOOTSTRAP)
   ---------------------------------------------------------------------
   Objectif :
   - Avoir des tableaux distincts pour les données "Loisirs" et "Soins".
   - Colorer principalement l’entête (thead).
   ===================================================================== */

/* ---------------------------------------------------------------------
   5.1. Tableau "Loisirs"
   --------------------------------------------------------------------- */
.table-loisirs thead th{
    background-color: var(--sa-vert);       /* Bande verte en tête */
    color: #ffffff;                         /* Texte blanc pour le contraste */
    border-color: var(--sa-vert-dark) !important;
}

/* ---------------------------------------------------------------------
   5.2. Tableau "Soins"
   --------------------------------------------------------------------- */
.table-soins thead th{
    background-color: var(--sa-bleu);       /* Bande bleue en tête */
    color: #ffffff;
    border-color: var(--sa-bleu-dark) !important;
}

/* ---------------------------------------------------------------------
   5.3. Tableau "Beauté et Soins"
   --------------------------------------------------------------------- */
.table-beaute thead th{
    background-color: var(--sa-noir);       /* Bande noire en tête */
    color: #ffffff;
    border-color: var(--sa-noir-dark) !important;
}


/* =====================================================================
   6. LIGNES MIXTES DANS UN MÊME TABLEAU (CORRECTION FORCEE)
   ---------------------------------------------------------------------
   ICI C'EST LA CORRECTION CRITIQUE :
   On cible les CELLULES (td) et pas juste la ligne (tr) pour que la
   couleur passe au-dessus du fond blanc par défaut de Bootstrap.
   ===================================================================== */

/* Ligne Leader "Loisirs" (Vert clair) */
/* On utilise color-mix pour créer un vert très clair basé sur votre variable */
.table-loisirs tbody tr.leader-loisirs td {
    background-color: color-mix(in srgb, var(--sa-vert), white 85%) !important;
    color: var(--sa-vert-dark) !important;
    font-weight: bold;
}

/* Ligne Leader "Soins" (Bleu clair) */
/* On utilise color-mix pour créer un bleu très clair basé sur votre variable */
.table-soins tbody tr.leader-soins td {
    background-color: color-mix(in srgb, var(--sa-bleu), white 85%) !important;
    color: var(--sa-bleu-dark) !important;
    font-weight: bold;
}


/* =====================================================================
   7. BADGES DE CATÉGORISATION (Loisirs / Soins)
   ---------------------------------------------------------------------
   Objectif : Indiquer visuellement s'il s'agit de "Loisirs" ou "Soins".
   ===================================================================== */

.badge-loisirs{
    background-color: var(--sa-vert);
    color: #ffffff;
}

.badge-soins{
    background-color: var(--sa-bleu);
    color: #ffffff;
}


/* =====================================================================
   8. CARTES DE STATS (BLOCS D’INDICATEURS)
   ---------------------------------------------------------------------
   Objectif : Afficher des indicateurs chiffrés sous forme de "cards".
   ===================================================================== */

/* Style de base de toutes les cartes de stats */
.stat-card{
    background: #ffffff;              /* Carte blanche sur fond gris */
    border-radius: .5rem;             /* Coins légèrement arrondis */
    padding: 1.25rem 1.5rem;          /* Espacement interne */
    margin-bottom: 1rem;              /* Espace entre les cartes */
    box-shadow: 0 2px 4px rgba(0,0,0,.05); /* Ombre très légère */
}

/* Variation "Loisirs" : bande supérieure verte */
.stat-loisirs{
    border-top: 4px solid var(--sa-vert);
}

/* Valeur numérique ou texte de mise en avant dans une carte "Loisirs" */
.stat-loisirs .stat-value{
    color: var(--sa-vert-dark);   /* Texte dans une nuance plus foncée */
    font-weight: 700;             /* Gras */
    font-size: 1.4rem;            /* Plus gros que le texte normal */
}

/* Variation "Soins" : bande supérieure bleue */
.stat-soins{
    border-top: 4px solid var(--sa-bleu);
}

/* Valeur numérique ou texte de mise en avant dans une carte "Soins" */
.stat-soins .stat-value{
    color: var(--sa-bleu-dark);
    font-weight: 700;
    font-size: 1.4rem;
}

/* Zone d'affichage de la définition SQL (explore_db) */
.sql-definition{
    background-color:#2d2d2d;
    color:#f8f8f2;
    padding:15px;
    border-radius:5px;
    white-space:pre-wrap;
    word-wrap:break-word;
    font-family:"Courier New", Courier, monospace;
    font-size:0.85rem;
}