/* ========================================
   MODE SOMBRE - Variables CSS
   ======================================== */

@layer base {

/* Mode Clair (défaut) */
:root {
    --bg-primary: #F9FAFB;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F3F4F6;
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-tertiary: #6B7280;
    --border-color: #E5E7EB;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Mode Sombre - Palette élégante avec contraste élevé */
.dark {
    --bg-primary: #0F172A;      /* Bleu nuit très foncé */
    --bg-secondary: #1E293B;    /* Bleu ardoise */
    --bg-tertiary: #334155;     /* Bleu ardoise moyen */
    --text-primary: #F1F5F9;    /* Blanc cassé */
    --text-secondary: #CBD5E1;  /* Gris clair */
    --text-tertiary: #94A3B8;   /* Gris moyen */
    --border-color: #475569;    /* Gris ardoise */
    --shadow-color: rgba(0, 0, 0, 0.5);
    --accent-primary: #22D3EE;  /* Cyan lumineux */
    --accent-secondary: #FB923C; /* Orange chaud */
    --accent-violet: #BBA7FA;    /* Violet clair (dark mode CTA) */
    --accent-gold: #F4C300;      /* Or (dark mode highlights) */
}

/* Application des variables */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Empêcher le scroll horizontal sur mobile */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Police par défaut pour le texte */
body {
    font-family: 'Roboto', sans-serif;
}
/* Police pour tous les titres */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word; /* Permet au texte de se casser sur plusieurs lignes */
}

/* Box-sizing pour tous les éléments */
* {
    box-sizing: border-box;
}

/* Empêcher les éléments de déborder */
section, div, main {
    max-width: 100%;
}

/* Images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Texte avec débordement long */
a, p, span {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Email et URLs longues - permettre la casse */
a[href^="mailto:"],
a[href^="https://"],
a[href^="http://"],
.email-text,
.phone-text {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Footer responsive */
footer p, footer a {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Texte des boutons pour mobile */
button, a[class*="btn"], a[class*="button"] {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Responsive padding pour petits écrans */
@media (max-width: 640px) {
    body {
        padding: 0;
        margin: 0;
    }

    p, span, a {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    h1, h2, h3, h4, h5, h6 {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* Empêcher le scroll dans les menus déroulants desktop */
nav .group > div {
    overflow: hidden !important;
    max-height: none !important;
}

/* Bloquer le scroll sur le body quand les menus sont ouverts */
nav .group:hover {
    pointer-events: auto;
}

/* Animation pulse pour le bouton flottant CTA */
@keyframes pulse-subtle {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 82, 119, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 82, 119, 0);
    }
}

#floating-cta-btn {
    animation: pulse-subtle 2s infinite;
}

#floating-cta-btn:hover {
    animation: none;
}

/* ========================================
   COMPOSANTS RÉUTILISABLES
   ======================================== */

/* Boutons standardisés */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.btn:focus {
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid;
    outline-offset: 2px;
}

.btn-primary {
    background-color: #005277;
    color: white;
}

.btn-primary:hover {
    background-color: #004260;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(1.05);
}

.btn-primary:active {
    transform: scale(0.95);
}

.btn-primary:focus-visible {
    outline-color: #005277;
}

.btn-secondary {
    background-color: #FF9A66;
    color: white;
}

.btn-secondary:hover {
    background-color: #E68C5D;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(1.05);
}

.btn-secondary:active {
    transform: scale(0.95);
}

.btn-outline {
    border: 2px solid #005277;
    color: #005277;
    background-color: transparent;
}

.btn-outline:hover {
    background-color: #DEF3FA;
}

.btn-ghost {
    color: #374151;
    background-color: transparent;
}

.btn-ghost:hover {
    background-color: #F3F4F6;
}

.btn-danger {
    background-color: #DC2626;
    color: white;
}

.btn-danger:hover {
    background-color: #B91C1C;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Tailles de boutons */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-md {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Messages d'alerte */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid;
    animation: slideDown 0.3s ease-out;
}

.alert-success {
    background-color: #F0FDF4;
    border-color: #10B981;
    color: #065F46;
}

.alert-error {
    background-color: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

.alert-warning {
    background-color: #FFFBEB;
    border-color: #F59E0B;
    color: #92400E;
}

.alert-info {
    background-color: #EFF6FF;
    border-color: #3B82F6;
    color: #1E40AF;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Champs de formulaire */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #D1D5DB;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    outline: 2px solid;
    outline-color: #199D92;
    border-color: #199D92;
}

.form-input:disabled, .form-select:disabled, .form-textarea:disabled {
    background-color: #F3F4F6;
    cursor: not-allowed;
}

.form-input:invalid, .form-select:invalid, .form-textarea:invalid {
    border-color: #EF4444;
}

.form-error {
    font-size: 0.875rem;
    color: #DC2626;
    font-weight: 500;
    margin-top: 0.25rem;
}

.form-hint {
    font-size: 0.75rem;
    color: #6B7280;
    margin-top: 0.25rem;
}

/* Typographie cohérente */
.h1 {
    font-size: 1.875rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.2;
}

.h2 {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.3;
}

.h3 {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

.body-lg {
    font-size: 1rem;
    line-height: 1.625;
}

.body-normal {
    font-size: 0.875rem;
    line-height: 1.625;
}

/* Responsive typography */
@media (min-width: 640px) {
    .h1 { font-size: 2.25rem; }
    .h2 { font-size: 1.875rem; }
    .body-lg { font-size: 1.125rem; }
    .body-normal { font-size: 1rem; }
}

@media (min-width: 768px) {
    .h1 { font-size: 3rem; }
    .h2 { font-size: 2.5rem; }
}

@media (min-width: 1024px) {
    .h1 { font-size: 3.75rem; }
    .h2 { font-size: 3rem; }
}

/* Désactiver scale sur mobile tactile */
@media (hover: none) {
    .btn:hover {
        transform: none !important;
    }
    .btn:active {
        transform: scale(0.95) !important;
    }
}

/* ========================================
   DARK MODE - Styles Adaptatifs avec !important
   ======================================== */

/* Body et HTML */
.dark body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Navigation */
.dark nav {
    background-color: var(--bg-secondary) !important;
    box-shadow: 0 1px 3px 0 var(--shadow-color) !important;
}

.dark nav a {
    color: var(--text-secondary) !important;
}

.dark nav a:hover {
    color: var(--accent-primary) !important;
}

/* Boutons primaires en dark mode - Accent cyan */
.dark .bg-primary-500,
.dark .bg-primary-600 {
    background-color: var(--accent-primary) !important;
    color: #0F172A !important;
}

.dark .bg-primary-500:hover,
.dark .bg-primary-600:hover {
    background-color: #06B6D4 !important;
}

.dark .text-primary-600,
.dark .text-primary-700 {
    color: var(--accent-primary) !important;
}

/* Footer */
.dark footer {
    background-color: #020617 !important;
}

.dark footer .text-gray-400 {
    color: var(--text-tertiary) !important;
}

.dark footer .text-white {
    color: var(--text-primary) !important;
}

/* Cards et Containers */
.dark .bg-white {
    background-color: var(--bg-secondary) !important;
}

.dark .bg-gray-50 {
    background-color: var(--bg-primary) !important;
}

.dark .bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}

.dark .bg-gray-200 {
    background-color: var(--bg-tertiary) !important;
}

/* Sections avec backgrounds colorés */
.dark .bg-primary-600 {
    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%) !important;
}

.dark .bg-secondary-600 {
    background-color: var(--accent-secondary) !important;
}

/* Textes */
.dark .text-gray-600 {
    color: var(--text-secondary) !important;
}

.dark .text-gray-700 {
    color: var(--text-secondary) !important;
}

.dark .text-gray-800 {
    color: var(--text-primary) !important;
}

.dark .text-gray-900 {
    color: var(--text-primary) !important;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: var(--text-primary) !important;
}

.dark p {
    color: var(--text-secondary) !important;
}

/* Borders */
.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: var(--border-color) !important;
}

.dark .border-t {
    border-top-color: var(--border-color) !important;
}

/* Forms */
.dark input,
.dark textarea,
.dark select {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--text-tertiary) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    background-color: var(--bg-secondary) !important;
    border-color: var(--accent-primary) !important;
}

/* Shadows */
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl {
    box-shadow: 0 10px 25px -5px var(--shadow-color) !important;
}

/* Bouton Dark Mode Toggle */
#darkModeToggle,
#darkModeToggleMobile {
    transition: all 0.3s ease;
}

#darkModeToggle:hover,
#darkModeToggleMobile:hover {
    transform: scale(1.1) rotate(20deg);
}

.dark #darkModeToggle,
.dark #darkModeToggleMobile {
    color: #FCD34D !important;
}

/* Liens */
.dark a:not(.bg-primary-600):not(.bg-primary-500) {
    color: var(--accent-primary) !important;
}

.dark a:hover {
    opacity: 0.8;
}

/* Hero sections */
.dark section[class*="bg-primary"] {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
}

/* Cartes avec bordures */
.dark .rounded-3xl,
.dark .rounded-2xl,
.dark .rounded-xl {
    border: 1px solid var(--border-color);
}

/* Info boxes et alerts */
.dark .bg-green-50 {
    background-color: rgba(34, 211, 238, 0.1) !important;
    border-color: var(--accent-primary) !important;
}

.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

.dark .text-green-800 {
    color: var(--accent-primary) !important;
}

.dark .text-red-800 {
    color: #FCA5A5 !important;
}

/* Menu mobile */
.dark #mobile-menu {
    background-color: var(--bg-secondary) !important;
}

/* ========================================
   TRANSITIONS DOUCES ENTRE SECTIONS
   ======================================== */

/* Transitions globales pour les sections */
section {
    position: relative;
    transition: background-color 0.5s ease;
}

/* Dégradés de transition entre sections */
section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Blocs colorés - Transitions douces */
.bg-green-50, .bg-blue-50, .bg-purple-50, .bg-orange-50,
.bg-primary-50, .bg-gray-50, .bg-gray-100 {
    transition: all 0.4s ease;
}

/* Mode sombre - Couleurs harmonisées pour les blocs colorés */
.dark .bg-green-50 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.dark .bg-purple-50 {
    background-color: rgba(139, 92, 246, 0.1) !important;
}

.dark .bg-orange-50 {
    background-color: rgba(251, 146, 60, 0.1) !important;
}

.dark .bg-yellow-50 {
    background-color: rgba(250, 204, 21, 0.1) !important;
}

.dark .bg-primary-50 {
    background-color: rgba(25, 157, 146, 0.1) !important;
}

/* Bordures en mode sombre - plus subtiles */
.dark .border-green-200 { border-color: rgba(16, 185, 129, 0.3) !important; }
.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; }
.dark .border-purple-200 { border-color: rgba(139, 92, 246, 0.3) !important; }
.dark .border-orange-200 { border-color: rgba(251, 146, 60, 0.3) !important; }
.dark .border-yellow-200 { border-color: rgba(250, 204, 21, 0.3) !important; }
.dark .border-primary-200 { border-color: rgba(25, 157, 146, 0.3) !important; }

/* Blocs avec fond blanc en dark mode */
.dark div[class*="bg-white"] {
    background-color: var(--bg-secondary) !important;
    transition: background-color 0.3s ease;
}

/* Transitions pour les cartes */
.rounded-2xl, .rounded-3xl, .rounded-xl {
    transition: all 0.3s ease;
}

/* Séparateurs visuels doux */
.dark section + section {
    border-top: 1px solid rgba(71, 85, 105, 0.3);
}

/* Ombre douce en mode sombre */
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4) !important;
}

/* Harmonisation des sections colorées */
.dark section.bg-white,
.dark section[class*="bg-gray"] {
    background-color: var(--bg-primary) !important;
}

/* Dégradés harmonisés en mode sombre */
.dark .bg-gradient-to-br.from-gray-50,
.dark .bg-gradient-to-r.from-gray-50 {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
}

/* Amélioration du contraste des textes dans les blocs colorés */
.dark .text-gray-700,
.dark .text-gray-600 {
    color: var(--text-secondary) !important;
}

.dark .text-gray-900,
.dark .text-gray-800 {
    color: var(--text-primary) !important;
}

/* Espacement visuel entre sections */
section + section {
    margin-top: 0;
}

/* Animation fade pour les blocs */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classes utilitaires pour transitions */
.transition-smooth {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-colors-smooth {
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.3s ease;
}

/* ========================================
   ALERTES ET BOÎTES COLORÉES - DARK MODE
   ======================================== */

/* Alertes jaunes */
.dark .bg-yellow-100 {
    background-color: rgba(250, 204, 21, 0.15) !important;
}

.dark .text-yellow-900,
.dark .text-yellow-800 {
    color: #FDE68A !important;
}

/* Alertes rouges */
.dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

.dark .text-red-900 {
    color: #FCA5A5 !important;
}

/* Alertes vertes */
.dark .bg-green-100 {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

.dark .text-green-900 {
    color: #6EE7B7 !important;
}

/* Alertes bleues */
.dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

.dark .text-blue-900 {
    color: #93C5FD !important;
}

/* Code inline */
.dark code {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

/* Cartes internes blanches */
.dark .bg-white.rounded-xl,
.dark .bg-white.rounded-2xl {
    background-color: var(--bg-secondary) !important;
}

/* Amélioration des blocs imbriqués */
.dark [class*="bg-green-900"],
.dark [class*="bg-blue-900"],
.dark [class*="bg-purple-900"],
.dark [class*="bg-orange-900"] {
    opacity: 0.9;
}

/* Liens dans les blocs colorés */
.dark .text-blue-600 {
    color: #60A5FA !important;
}

.dark .text-green-600 {
    color: #34D399 !important;
}

.dark .text-purple-600 {
    color: #A78BFA !important;
}

.dark .text-orange-600 {
    color: #FB923C !important;
}

/* Icônes de checkmark */
.dark .text-green-600.text-xl,
.dark span.text-green-600 {
    color: #34D399 !important;
}

/* Bordures des sections */
.dark .border-l-4.border-yellow-500 {
    border-left-color: #FBBF24 !important;
}

.dark .border-l-4.border-green-500 {
    border-left-color: #10B981 !important;
}

.dark .border-l-4.border-red-500 {
    border-left-color: #EF4444 !important;
}

.dark .border-l-4.border-blue-500 {
    border-left-color: #3B82F6 !important;
}

/* Backgrounds avec opacité */
.dark [class*="bg-"][class*="/30"],
.dark [class*="bg-"][class*="/20"],
.dark [class*="bg-"][class*="/10"] {
    transition: background-color 0.3s ease;
}

/* ========================================
   DARK MODE - Audit Complémentaire
   ======================================== */

/* --- Couleurs brand manquantes --- */
.dark .bg-brand-gold-warm { background-color: var(--bg-secondary) !important; }
.dark .bg-brand-gold-peach { background-color: rgba(244, 195, 0, 0.1) !important; }
.dark .bg-brand-violet-light { background-color: rgba(123, 98, 223, 0.15) !important; }
.dark .bg-brand-beige { background-color: var(--bg-secondary) !important; }

/* --- Backgrounds manquants --- */
.dark .bg-primary-100 { background-color: rgba(25, 157, 146, 0.15) !important; }
.dark .bg-primary-200 { background-color: rgba(25, 157, 146, 0.2) !important; }
.dark .bg-secondary-100 { background-color: rgba(255, 154, 102, 0.15) !important; }
.dark .bg-gray-300 { background-color: var(--bg-tertiary) !important; }

/* --- Textes manquants --- */
.dark .text-gray-400 { color: #94A3B8 !important; }
.dark .text-gray-500 { color: var(--text-tertiary) !important; }
.dark .text-green-700 { color: #6EE7B7 !important; }
.dark .text-green-800 { color: #6EE7B7 !important; }
.dark .text-yellow-700 { color: #FDE68A !important; }
.dark .text-red-700 { color: #FCA5A5 !important; }
.dark .text-primary-900 { color: #5EEAD4 !important; }

/* --- Composants CSS manquants --- */

/* Form labels */
.dark .form-label { color: var(--text-secondary) !important; }

/* Bouton outline */
.dark .btn-outline {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}
.dark .btn-outline:hover {
    background-color: rgba(34, 211, 238, 0.1) !important;
}

/* Bouton ghost */
.dark .btn-ghost { color: var(--text-secondary) !important; }
.dark .btn-ghost:hover { background-color: var(--bg-tertiary) !important; }

/* Alertes CSS */
.dark .alert-success { background-color: rgba(16, 185, 129, 0.15) !important; color: #6EE7B7 !important; }
.dark .alert-error { background-color: rgba(239, 68, 68, 0.15) !important; color: #FCA5A5 !important; }
.dark .alert-warning { background-color: rgba(250, 204, 21, 0.15) !important; color: #FDE68A !important; }
.dark .alert-info { background-color: rgba(59, 130, 246, 0.15) !important; color: #93C5FD !important; }

} /* end @layer base */


/* ===================================================================
   Soulignement animé sur mots-clés (.souligne-anim)
   Trait coral qui se dessine au scroll, derrière les descendants (q, p, g)
   Usage : <span class="souligne-anim">mot</span> dans n'importe quel template
   Animation déclenchée par le JS dans base.html (IntersectionObserver)
   =================================================================== */
.souligne-anim {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    isolation: isolate; /* nouveau contexte d'empilement pour le z-index négatif */
}
.souligne-anim::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px; /* léger espace entre le texte et le trait */
    width: 0;
    height: 10px;
    background-color: #FA8072;
    border-radius: 5px;
    opacity: 0.85;
    transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: -1;
}
.souligne-anim.is-visible::after {
    width: 100%;
}
@media (prefers-reduced-motion: reduce) {
    .souligne-anim::after { transition: none; }
    .souligne-anim.is-visible::after { width: 100%; }
}