/* =============================================================================
   Espace Pro — Surface APP claire (mode sombre retiré).
   -----------------------------------------------------------------------------
   But : factoriser UNE SEULE palette + les surcharges des classes utilitaires
   Tailwind sombres → claires, utilisées par les pages /espace-pro/*.html
   (demarrage, bienvenue, site-web, accueil…). Changer le thème = modifier ce
   fichier en un seul endroit, pas dans chaque page.

   Les tokens viennent de validon-ui.css (source de vérité visuelle, DESIGN.md) :
   ce fichier ne définit PAS de second système, il s'appuie sur --vui-* et ne
   touche qu'aux CLASSES NON PRÉFIXÉES héritées des pages (tailwind.css compilé
   + styles locaux historiques).

   Prérequis (déjà présents dans les pages) :
     <link rel="stylesheet" href="/styles/tailwind.css">
     <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville...&family=Outfit...&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/styles/validon-ui.css">
     <link rel="stylesheet" href="/styles/espace-pro.css">
============================================================================= */

/* — Surface de page claire (var(--vui-bg) = #f8fafc par défaut) — */
body {
    font-family: var(--vui-font, 'Outfit', sans-serif);
    background-color: var(--vui-bg, #f8fafc);
    color: var(--vui-text, #0f172a);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(15, 118, 110, 0.08) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(15, 118, 110, 0.05) 0%, transparent 20%);
    background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--vui-font-serif, 'Libre Baskerville', Georgia, serif); }

/* — Verreries historiques : surface blanche, bordure teal douce — */
.glass {
    background: var(--vui-surface, #ffffff);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(15, 118, 110, 0.12);
    box-shadow: 0 20px 45px -15px rgba(15, 118, 110, 0.18);
}
.glass-card {
    background: var(--vui-surface, #ffffff);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(15, 118, 110, 0.12);
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.1);
}

/* — CTA de marque : pilule à dégradé teal, texte blanc garanti (DA §5.1).
   PRIORITÉ haute : tout élément qui cumule `bg-gradient-to-r` (dégradé d'action
   teal/émeraude, volontairement sombre) + `text-white` DOIT garder un texte blanc.
   Sans ça, `.text-white{→encre}` (voir plus bas) rendrait le texte illisible sur
   ces fonds. `body .bg-gradient` est plus spécifique que `.text-white` → il gagne. */
.btn-brand,
body .bg-gradient-to-r,
body .bg-gradient-to-r.from-emerald-500.to-teal-600,
body .bg-gradient-to-r.from-emerald-500.to-teal-700,
body .bg-gradient-to-r.from-emerald-500.to-teal-400,
body .bg-gradient-to-r.from-emerald-600.to-teal-700 {
    color: #ffffff !important;
}
.btn-brand {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-gradient-end) 100%);
    border-radius: 99px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(15, 118, 110, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-brand:hover { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); transform: translateY(-2px); }

/* =============================================================================
   Surcharges des classes utilitaires SOMBRES (tailwind.css compilé) → claires.
   La structure HTML n'est pas réécrite : on redéfinit les classes héritées.
============================================================================= */

/* Textes utilitaires sombres → encres lisibles sur fond clair */
.text-gray-100, .text-gray-200 { color: #0f172a !important; }
.text-gray-300, .text-gray-400 { color: #475569 !important; }
.text-gray-500, .text-gray-600, .text-gray-700 { color: #64748b !important; }
.text-white { color: #0f172a !important; }
.text-emerald-300, .text-emerald-400, .text-emerald-200, .text-teal-300 { color: #0f766e !important; }
.text-emerald-200\/80 { color: rgba(15, 118, 110, 0.8) !important; }
.text-emerald-300\/70 { color: rgba(15, 118, 110, 0.75) !important; }
.text-blue-300, .text-blue-400 { color: #1d4ed8 !important; }
.text-amber-300, .text-amber-400 { color: #b45309 !important; }
.text-red-400 { color: #dc2626 !important; }

/* Conteneurs / objets sombres → nuages clairs */
.bg-gray-800, .bg-gray-900, .bg-gray-900\/60, .bg-gray-900\/80, .bg-gray-800\/60, .bg-gray-800\/80 {
    background: #ffffff !important;
    border-color: rgba(15, 118, 110, 0.12) !important;
}
.bg-white\/5, .bg-white\/10, .bg-white\/20 { background: #f1f5f9 !important; }
.bg-gray-800 { background: #f1f5f9 !important; }

/* Bordures */
.border-white\/5, .border-white\/10, .border-white\/20 { border-color: rgba(15, 118, 110, 0.12) !important; }
.border-gray-800 { border-color: #e2e8f0 !important; }
.border-gray-700 { border-color: #cbd5e1 !important; }

/* Formulaire (champs sombres → clairs) */
.bg-gray-950 { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
.bg-gray-950::placeholder, input::placeholder { color: #94a3b8; }

/* Boutons secondaires / "Passer" + hover */
button.bg-gray-800, a.bg-gray-800 { background: #f1f5f9 !important; color: #334155 !important; border: 1px solid #cbd5e1; }
button.bg-white\/10, button.bg-white\/20 { background: #f1f5f9 !important; color: #334155 !important; border: 1px solid #cbd5e1; }
.hover\:bg-gray-700\/80:hover, .hover\:bg-gray-800:hover { background: #e2e8f0 !important; }
.hover\:text-gray-200:hover, .hover\:text-white:hover { color: #0f172a !important; }
.hover\:border-emerald-500, .hover\:border-emerald-500\/50:hover { border-color: rgba(15, 118, 110, 0.5) !important; }

/* Rails de progression sombres → clairs */
.bg-gray-800.rounded-full, .bg-gray-700.rounded-full { background: #e2e8f0 !important; }

/* — Finition : textes pâles pensés pour fond sombre, repris en clair (dashboard) — */
.stat-label[style*="#cbd5e1"] { color: #334155 !important; }
strong[style*="#e5e7eb"] { color: #0f172a !important; }
a[style*="#94a3b8"], small[style*="#9ca3af"] { color: #475569 !important; }
/* Désactivation des icônes d'auto-remplissage Safari / Chrome au-dessus des inputs */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button,
input::-webkit-credit-card-auto-fill-button {
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* Réinitialisation de la couleur de fond en cas d'autofill par le navigateur */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}