/* ============================================================================
   STAMOVA SKIN 2026 — identité visuelle de la nouvelle landing appliquée
   à l'app (dashboards, login, register, pages admin).
   Chargé par header.php APRÈS stamova-theme.css / app.css ; les pages ont
   des <style> inline postérieurs → on impose l'identité via !important sur
   les propriétés visuelles uniquement (fonds, bordures, ombres, rayons).
   Palette : fond #ffffff · encre #0f172a · violet #667eea
   · dégradé 115deg 667eea→a78bfa→f093fb (inchangé : c'est l'identité)
   ============================================================================ */

/* ⚠️ CES JETONS SONT DES ALIAS, PLUS DES VALEURS.
   Cette feuille avait sa propre palette, en double de `stamova-theme.css` :
   le thème sombre ne basculait donc que la moitié de l'écran (le texte
   suivait, le fond restait blanc). Ils pointent maintenant vers l'échelle
   sémantique, qui est le SEUL endroit où le thème se décide.
   ➡️ Ne jamais remettre une couleur en dur ici. */
:root {
    --stm-bg:           var(--stm-page);
    --stm-surface:      var(--stm-surface-1);
    /* ⚠️ `--stm-surface-2` N'EST PLUS REDÉFINI ICI. Ce nom existait dans cette
       feuille pour « l'aplat opaque des cartes », et il est entré en collision
       avec le niveau 2 de l'échelle sémantique de `stamova-theme.css` : tous
       les fonds convertis en `var(--stm-surface-2)` prenaient la couleur d'une
       carte pleine. Les deux anciens usages sont passés à `--stm-field`. */
    --stm-border:       var(--stm-line);
    --stm-border-hover: rgba(122, 139, 255, 0.45);
    --stm-violet:       #667eea;                  /* la marque : identique partout */
    --stm-grad: linear-gradient(115deg, #667eea 0%, #a78bfa 45%, #f093fb 100%);
    --stm-green:        var(--stm-success);
}

/* ============================================================================
   FOND GLOBAL — halos violets fixes façon landing
   ============================================================================ */
/* Anti-débordement horizontal sur mobile (la page paraissait décalée à gauche
   quand un élément dépassait du viewport). Les tableaux larges gardent leur
   propre défilement via leurs conteneurs overflow-x:auto. */
html { overflow-x: hidden; }

body {
    background: var(--stm-bg) !important;
    color: var(--stm-ink);
}

/* Scrollbar discrète assortie */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.55); }

::selection { background: rgba(102, 126, 234, 0.4); color: var(--stm-accent); }

/* ⚠️ LE VOILE DES MODALES A ÉTÉ RETIRÉ D'ICI (2026-09-05).
   Cette feuille en portait une COPIE avec des valeurs figées (`#0f172a`,
   `0.22`), et comme elle se charge APRÈS `stamova-theme.css`, c'est elle qui
   gagnait : le voile ne suivait donc pas le mode sombre du CRM. La règle
   n'existe plus qu'au thème, où elle passe par `--stm-veil`. */


/* ============================================================================
   NAVBAR & SIDEBAR (header.php)
   ============================================================================ */
.navbar {
    background: var(--stm-bar) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid var(--stm-border) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

.sidebar {
    background: var(--stm-rail) !important;
    border-color: var(--stm-border) !important;
}
.sidebar .nav-link {
    border-radius: 0.6rem !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}
.sidebar .nav-link:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    transform: translateX(3px);
}
.sidebar .nav-link.active {
    background: linear-gradient(115deg, rgba(102, 126, 234, 0.25), rgba(167, 139, 250, 0.15)) !important;
    box-shadow: inset 2px 0 0 var(--stm-violet), 0 0 18px rgba(102, 126, 234, 0.12) !important;
    color: var(--stm-accent) !important;
}

/* ============================================================================
   BOUTONS
   ============================================================================ */
.btn-primary,
.btn-hero-primary,
.btn-lead-primary,
.btn-gestion-primary {
    background: var(--stm-grad) !important;
    background-size: 160% 160% !important;
    border: none !important;
    animation: stm-grad-shift 6s ease infinite;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.btn-primary:hover,
.btn-hero-primary:hover,
.btn-lead-primary:hover,
.btn-gestion-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(102, 126, 234, 0.45) !important;
}
@keyframes stm-grad-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Focus des champs : violet landing */
.form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--stm-violet) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18) !important;
}

/* ============================================================================
   ANIMATION D'ENTRÉE (cartes des dashboards / login)
   ============================================================================ */
@keyframes stm-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================================
   LOGIN & REGISTER
   ============================================================================ */
.login-card, .register-card {
    background: var(--stm-field) !important;
    border: 1px solid var(--stm-border-hover) !important;
    border-radius: 1.3rem !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: blur(14px);
    animation: stm-fade-up 0.6s cubic-bezier(0.2, 0.65, 0.3, 1) both;
}
.login-header, .register-header {
    background: linear-gradient(160deg, rgba(102, 126, 234, 0.14), rgba(240, 147, 251, 0.06)) !important;
    border-bottom: 1px solid var(--stm-border) !important;
}
.login-header h1, .register-header h1,
.login-header h2, .register-header h2 {
    background: var(--stm-grad);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: stm-grad-shift 8s ease infinite;
    font-weight: 800 !important;
}
.login-body .form-control, .register-body .form-control {
    background: var(--stm-surface-1) !important;
    border: 1px solid var(--stm-line-strong) !important;
    border-radius: 0.6rem !important;
}
.steps-indicator .step-dot.active {
    background: var(--stm-grad) !important;
    box-shadow: 0 0 14px rgba(102, 126, 234, 0.5) !important;
}

/* ============================================================================
   DASHBOARDS — hero de bienvenue (entrepreneur / manager)
   ============================================================================ */
.dashboard-hero, .dashboard-header {
    background: linear-gradient(160deg, rgba(102, 126, 234, 0.12), rgba(240, 147, 251, 0.05)) !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
    border-radius: 1.3rem !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 40px rgba(102, 126, 234, 0.1) !important;
    animation: stm-fade-up 0.5s cubic-bezier(0.2, 0.65, 0.3, 1) both;
    position: relative;
    overflow: hidden;
}
.dashboard-hero::after, .dashboard-header::after {
    content: '';
    position: absolute;
    top: -120px; right: -80px;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.18), transparent 70%);
    pointer-events: none;
}

/* ============================================================================
   DASHBOARDS — cartes stats (toutes variantes)
   ============================================================================ */
.stat-card, .admin-stat-card, .lead-stat,
.admin-content-card, .gestion-card {
    background: var(--stm-surface) !important;
    border: 1px solid var(--stm-border) !important;
    border-radius: 1rem !important;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease !important;
    animation: stm-fade-up 0.55s cubic-bezier(0.2, 0.65, 0.3, 1) both;
}
.stat-card:hover, .admin-stat-card:hover, .lead-stat:hover {
    transform: translateY(-5px) !important;
    border-color: var(--stm-border-hover) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14), 0 0 30px rgba(102, 126, 234, 0.12) !important;
}

/* Légère cascade d'apparition */
.stat-card:nth-child(2), .admin-stat-card:nth-child(2) { animation-delay: 0.06s; }
.stat-card:nth-child(3), .admin-stat-card:nth-child(3) { animation-delay: 0.12s; }
.stat-card:nth-child(4), .admin-stat-card:nth-child(4) { animation-delay: 0.18s; }
.stat-card:nth-child(5), .admin-stat-card:nth-child(5) { animation-delay: 0.24s; }
.stat-card:nth-child(6), .admin-stat-card:nth-child(6) { animation-delay: 0.30s; }

/* Valeurs en dégradé landing */
.stat-value, .admin-stat-value {
    background: var(--stm-grad) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
}

/* Icônes des stats */
.stat-icon, .admin-stat-card-icon {
    border-radius: 0.8rem !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.16), rgba(240, 147, 251, 0.1)) !important;
    border: 1px solid var(--stm-border) !important;
}

/* ============================================================================
   ADMIN DASHBOARD — actions rapides & activité
   ============================================================================ */
.admin-quick-action {
    background: var(--stm-surface) !important;
    border: 1px solid var(--stm-border) !important;
    border-radius: 0.8rem !important;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
}
.admin-quick-action:hover {
    transform: translateY(-4px);
    border-color: var(--stm-border-hover) !important;
    background: rgba(102, 126, 234, 0.08) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(102, 126, 234, 0.14) !important;
}
.admin-quick-action i {
    background: var(--stm-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.admin-card-title, .gestion-card-title {
    border-bottom: 1px solid var(--stm-border) !important;
}
.admin-card-title i, .gestion-card-title i { color: var(--stm-violet) !important; }

.admin-activity-item {
    border-radius: 0.7rem !important;
    transition: background 0.2s ease !important;
}
.admin-activity-item:hover { background: rgba(102, 126, 234, 0.07) !important; }

/* ============================================================================
   TABLES & CARTES GÉNÉRIQUES
   ============================================================================ */
.card {
    background: var(--stm-surface) !important;
    border: 1px solid var(--stm-border) !important;
    border-radius: 1rem !important;
}
.table, .gestion-table { --bs-table-bg: transparent; }
.gestion-table tr:hover td { background: rgba(102, 126, 234, 0.06) !important; }

/* Onglets de gestion */
.gestion-tab.active {
    background: linear-gradient(115deg, rgba(102, 126, 234, 0.28), rgba(167, 139, 250, 0.18)) !important;
    border-color: var(--stm-border-hover) !important;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.15) !important;
}

/* Alerts assorties */
.alert-success { border-color: rgba(52, 211, 153, 0.35) !important; }
.alert-danger  { border-color: rgba(239, 68, 68, 0.35) !important; }

/* Accessibilité : pas d'animations si l'utilisateur les refuse */
@media (prefers-reduced-motion: reduce) {
    .login-card, .register-card, .dashboard-hero, .dashboard-header,
    .stat-card, .admin-stat-card, .lead-stat, .admin-content-card, .gestion-card {
        animation: none !important;
    }
    .btn-primary, .btn-hero-primary, .btn-lead-primary, .btn-gestion-primary,
    .login-header h1, .stat-value, .admin-stat-value {
        animation: none !important;
    }
}

/* ============================================================================
   BOUTONS EN SURBRILLANCE — halo pulsé + balayage brillant
   ----------------------------------------------------------------------------
   Repris de rdv.php (Everglass). Deux effets superposés :
     1. `stm-glow`  : l'ombre portée respire, le bouton « appelle »
     2. `stm-shine` : un reflet traverse le bouton en diagonale
   Le halo s'arrête au survol : une fois la souris dessus, l'appel a fonctionné,
   l'animation devient du bruit.

   ⚠️ Volontairement réservé aux boutons d'ACTION PRINCIPALE. Un halo pulsé sur
   « Annuler » ou « Retour » ferait clignoter la page entière et, surtout,
   supprimerait la hiérarchie : si tout attire l'œil, plus rien ne l'attire.
   ============================================================================ */

/* ============================================================================
   🔴 LE HALO ET LE REFLET ONT ETE RETIRES — 23/08/2026, demande utilisateur :
   « retire le brillant autour ».

   Il y avait deux effets cumules sur tout bouton d'action principale du site :
     * `stm-glow`  : une ombre coloree qui pulsait en permanence ;
     * `stm-shine` : un reflet blanc qui balayait le bouton toutes les 3,6 s.

   Ce qu'ils coutaient : un bouton qui bouge tout seul se lit comme un element
   en cours de chargement, et le reflet blanc traversant abaisse le contraste du
   libelle a chaque passage. Sur une page qui en compte plusieurs, l'ecran ne
   tient plus en place.

   🔴 LE MEME BLOC EXISTAIT EN DOUBLE : ici et dans `stamova-theme.css`, chargee
   AVANT celle-ci. Ne le retirer que d'un seul fichier n'aurait rien change a
   l'ecran — c'est le piege de cette correction. Les deux sont traites.

   ℹ️ Les keyframes `stm-glow` / `stm-shine` sont supprimees avec les regles qui
   les appelaient : plus rien dans le site ne s'y refere (verifie le 23/08).

   ⚠️ `position: relative` est conserve sur ces boutons : plusieurs portent des
   pastilles positionnees en absolu (compteurs de panier, badges « nouveau »)
   qui se placeraient sur la page entiere sans lui.
   ============================================================================ */



/* Un bouton désactivé ne doit rien promettre */



@media (prefers-reduced-motion: reduce) {
    .btn-hero-primary, .btn-register, .btn-checkout, .tv-submit, .otp-submit,
    .rs-btn.primary, .btn-gestion-primary, .btn-card.btn-add,
    .btn-primary, .btn-success { animation: none; }
    .btn-hero-primary::after, .btn-register::after, .btn-checkout::after,
    .tv-submit::after, .otp-submit::after, .rs-btn.primary::after,
    .btn-gestion-primary::after, .btn-card.btn-add::after,
    .btn-primary::after, .btn-success::after { display: none; }
}

/* ⚠️ Un `<a>` est `display: inline` par défaut, et `overflow: hidden` n'a
   AUCUN effet sur un élément inline : le reflet débordait donc du bouton.
   Il faut forcer un mode d'affichage en bloc. */


/* ============================================================================
   CHAMPS NATIFS (2026-08-08, repris en thème clair le 2026-09-04)
   ============================================================================
   Copie de la règle posée dans `stamova-theme.css` — voir le commentaire
   détaillé là-bas. Les deux feuilles sont nécessaires : celle-ci couvre
   register.php et les pages qui ont leur propre <head>.
   ============================================================================ */

[data-bs-theme="dark"] { color-scheme: dark; }

/* ⚠️ LE FOND DES CHAMPS EST TRANSLUCIDE (`rgba(255,255,255,.05)`).
   Hérité du thème sombre, où c'était joli ; un <select> posé dans un conteneur
   — une modale Bootstrap sans thème, un tableau, un encart blanc — devient
   presque blanc, avec un texte `#e0e0e0` par-dessus : illisible.

   Pour un <select>, la transparence n'apporte rien et coûte cher : on lui donne
   un fond OPAQUE. Les <input> gardent leur translucidité. */


/* Le menu déroulant lui-même. On ne se repose PAS uniquement sur
   `color-scheme` : Safari ne l'applique pas au popup des <option>, et le texte
   clair hérité du <select> se retrouverait sur le fond blanc du système. */


select option:checked,
select option:hover { background-color: var(--stm-field-hover); color: var(--stm-ink); }



/* ============================================================================
   BOUTONS SECONDAIRES ET BOUTONS D'ACTION — style commun (2026-08-14)
   ============================================================================
   Retour utilisateur : « je n'aime pas le style de bouton comme "Voir tous les
   packs", "Filtrer" » et « les boutons actions sur le côté je les trouve moches ».

   Le fond du problème n'était pas la taille ni le libellé, c'était que ces
   boutons portaient les classes Bootstrap BRUTES :
     - `.btn-outline-primary` → bordure et texte #0d6efd, un bleu franc qui
       n'existe nulle part ailleurs dans l'identité (violet #667eea) ;
     - `.btn-outline-secondary` → gris #6c757d, pensé pour un fond blanc : sur
       #05050a le contraste est mou et la bordure paraît sale ;
     - `.btn-outline-light` → bordure blanche pleine, beaucoup trop dure à côté
       des cartes en verre du reste de l'application.

   ⚠️ On restyle les CLASSES plutôt que de réécrire le balisage : ces trois
   classes sont utilisées dans une quarantaine de fichiers. Les remplacer une à
   une garantissait d'en oublier — et un écran qui garde l'ancien style au milieu
   des autres est pire que si rien n'avait bougé.

   ⚠️ Ce bloc doit rester APRÈS le CSS de Bootstrap dans l'ordre de chargement
   (header.php : bootstrap → stamova-theme → skin). Les sélecteurs sont à
   spécificité ÉGALE à ceux de Bootstrap : c'est l'ordre qui tranche, pas un
   `!important` qu'il faudrait ensuite surcharger partout.
   ============================================================================ */



/* `btn-outline-primary` reste le plus affirmé des trois : c'est lui qui porte
   les actions de navigation mises en avant (« Voir tous les packs »). */






/* Bootstrap force `.btn-check:checked + .btn-outline-*` en aplat plein de sa
   couleur : sans cette reprise, un bouton radio coché redevient bleu vif. */


/* ⚠️ Un bouton désactivé ne doit RIEN promettre : ni surbrillance au survol,
   ni curseur qui invite au clic. */


/* --- Les variantes rouges gardent leur sens : on ne les repeint pas en violet,
       on les accorde seulement au fond sombre. --- */



/* --- Boutons d'ACTION en bout de ligne (les « boutons sur le côté ») ---------
   Dans un tableau, ce sont presque toujours 2 à 4 boutons icône collés les uns
   aux autres. Chacun avec sa propre bordure, ça fait une suite de petites
   boîtes grises qui pèsent plus lourd que la donnée de la ligne.
   `.crm-actions` les fond en UN seul bloc segmenté : une bordure pour le
   groupe, de simples séparateurs à l'intérieur. */





/* Le geste destructeur vire au rouge AU SURVOL seulement : rouge en
   permanence, c'est un bouton qui crie dans chaque ligne du tableau. */



/* ============================================================================
   LES BOUTONS — passe generale du 23/08/2026
   ============================================================================
   Signalement : « les boutons ne sont pas tres beaux : pas d'espace avec
   l'icone, pas assez proportionnels a l'ecriture ».

   Trois defauts, tous dus au fait qu'aucune regle de base n'existait : on
   heritait de Bootstrap, et les icones `bootstrap-icons` s'y comportent comme
   du texte colle.

   ⚠️ Cette feuille est la DERNIERE chargee (`header.php`) : ces regles priment
   sans avoir besoin d'`!important`, qu'on evite ici pour que les pages puissent
   encore surcharger un bouton particulier.
   ============================================================================ */

/* 1. L'ESPACE ENTRE L'ICONE ET LE TEXTE.
   ⚠️ `:not(:only-child)` est indispensable : un bouton qui ne contient QU'une
   icone (fermer, fleche, poubelle) n'a pas de texte a ecarter, et la marge le
   decentrerait dans son carre. */
.btn > .bi:first-child:not(:only-child) { margin-inline-end: .45em; }
.btn > .bi:last-child:not(:only-child)  { margin-inline-start: .45em; }

/* 2. L'ICONE SUIVE LA TAILLE DU TEXTE.
   `bootstrap-icons` impose sa propre taille : une icone restait identique sur un
   `btn-sm` et un `btn-lg`, d'ou l'impression de disproportion. En `1em` elle
   grandit avec le libelle, quel que soit le bouton.
   Le calage vertical corrige le decalage propre a la fonte d'icones : sans lui
   l'icone flotte au-dessus de la ligne de base du texte. */
.btn > .bi { font-size: 1em; vertical-align: -.09em; line-height: 1; }

/* 3. DES PROPORTIONS QUI TIENNENT.
   La hauteur de ligne de Bootstrap (1.5) donne des boutons hauts et etroits.
   1.35 resserre le rapport hauteur/largeur, et le rembourrage horizontal reste
   superieur au vertical — c'est ce qui fait qu'un bouton se lit comme un bouton
   et non comme une etiquette. */
.btn { line-height: 1.35; padding: .48rem .95rem; }
.btn-sm { padding: .26rem .62rem; }
.btn-lg { padding: .62rem 1.3rem; }

/* 3 bis. LE CAS DES BOUTONS RENDUS EN FLEX.
   🐛 Signale le 23/08 : « Importer » et « la selection » etaient colles.
   Cause : dans un conteneur flex, l'espace entre deux nœuds voisins d'un bouton
   n'est pas rendu — il n'existe qu'en flux inline. Le libelle a ete refait en un
   seul nœud de texte la ou le probleme se posait, mais la regle ci-dessous evite
   qu'un futur bouton compose retombe dans le meme piege.
   ⚠️ `column-gap` seulement, jamais `gap` tout court : un `row-gap` ecarterait
   les lignes d'un bouton dont le libelle passe sur deux lignes. */
.btn { column-gap: .45em; }

/* ⚠️ Et alors la marge de l'icone ferait DOUBLE emploi avec ce gap : elle est
   annulee quand le bouton est effectivement en flex. En flux inline, le gap est
   ignore et c'est la marge qui agit. Les deux ne s'appliquent jamais ensemble. */
.btn:is(.d-flex, .d-inline-flex) > .bi:first-child:not(:only-child) { margin-inline-end: 0; }

/* 4. PLUS DE HALO AU FOCUS.
   ⚠️ On ne supprime PAS l'indicateur de focus : le retirer rendrait la
   navigation au clavier impossible a suivre. On remplace l'ombre diffuse de
   Bootstrap par un contour net, qui se voit mieux et ne bave pas.
   `:focus-visible` et non `:focus` : le contour n'apparait qu'au clavier, pas
   apres un clic a la souris. */
.btn:focus { box-shadow: none; }
.btn:focus-visible { box-shadow: none; outline: 2px solid #818cf8; outline-offset: 2px; }