@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    user-select: none;
}

body {
    background-color: var(--background);
    color: var(--text-color);
    min-height: 100vh;
    font-family: 'Quicksand', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    font-weight: 600;
    line-height: 1.3;
}

p, a, li, div, button, input, textarea, label, select {
    font-family: 'Quicksand', sans-serif;
    color: var(--text-muted);
}

a {
    text-decoration: none;
    color: var(--accent);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-dark);
}

.dark a:hover {
    color: var(--accent-light);
}

/* Popup message */
#popup #popup-icon .success{
    padding: 8px;
    background-color: var(--bg-success);
    color: var(--text-success);
}

#popup #popup-icon .error{
    padding: 8px;
    background-color: var(--bg-error);
    color: var(--text-error);
}


/* Variables CSS - Mode clair (par défaut) */
:root {
    /* Brand Identity */
    --accent: #578a27;           /* Primary eco green */
    --accent-dark: #021408;      /* Deep forest green */
    --accent-light: #b5e1b5;     /* Soft mint green accent */
    
    /* Supporting Colors */
    --secondary: #f5f1e3;        /* Warm beige for soft sections */
    --highlight: #d3f36b;        /* Light lime highlight (used for buttons/hover) */
    --brown: #7a5c42;            /* Earth tone (for icons, details) */

    /* Text & Background */
    --text-color: #404040;       /* Dark gray for text */
    --text-muted: #555555;       /* Muted for paragraphs */
    --text-dimmed: #777777;      /* Lighter gray for less emphasis */
    --background: #ffffff;       /* Clean white background */
    --bg-alt: #f0f2ed;          /* Very light gray background */
    --surface: #f8f9f6;          /* Light surface for cards, sections */
    
    /* Feedback & State Colors */
    --bg-success: #6bffa488;         /* Success green */
    --text-success: #2d7a4a; 
    --warning: #f5b700;          /* Eco yellow warning */
    --bg-error: #d6454586;            /* Error red (subtle, not harsh) */
    --text-error: #d64545;          /* Error red for text */

    /* Shadows & Border */
    --shadow-color: rgba(219, 201, 201, 0.12);
    --border-color: rgba(0, 0, 0, 0.08);
}

/* Mode sombre */
.dark {
    --accent: #4a7521;
    --accent-dark: #010a04;      /* Corrigé: maintenant une couleur sombre */
    --accent-light: #8bc34a;     /* Corrigé: couleur plus claire pour hover/accents */

    --secondary: #2c2c2c;
    --highlight: #3e6210;
    --brown: #5e432f;

    --text-color: #e0e0e0;
    --text-muted: #b0b0b0;
    --text-dimmed: #888888;      /* Renommé de text-light à text-dimmed */
    --background: #121212;
    --bg-alt: #1e1e1e;
    --surface: #232323;

    --bg-success: #1f5e326c;
    --text-success: #1f5e32;
    --warning: #b38600;
    --bg-error: #a8323298;
    --text-error: #a83232;

    --shadow-color: rgba(0, 0, 0, 0.2);
    --border-color: rgba(255, 255, 255, 0.1);
}

/* Support du préférence système pour le mode sombre */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --accent: #4a7521;
        --accent-dark: #010a04;
        --accent-light: #8bc34a;

        --secondary: #2c2c2c;
        --highlight: #3e6210;
        --brown: #5e432f;

        --text-color: #e0e0e0;
        --text-muted: #b0b0b0;
        --text-dimmed: #888888;
        --background: #121212;
        --bg-alt: #1e1e1e;
        --surface: #232323;

        --success: #1f5e32;
        --warning: #b38600;
        --error: #a83232;

        --shadow-color: rgba(0, 0, 0, 0.2);
        --border-color: rgba(255, 255, 255, 0.1);
    }
}

/* Classes utilitaires pour les couleurs */
.text-accent { color: var(--accent); }
.text-accent-dark { color: var(--accent-dark); }
.text-accent-light { color: var(--accent-light); }
.text-secondary { color: var(--secondary); }
.text-highlight { color: var(--highlight); }
.text-brown { color: var(--brown); }

.bg-accent { background-color: var(--accent); }
.bg-accent-dark { background-color: var(--accent-dark); }
.bg-accent-light { background-color: var(--accent-light); }
.bg-secondary { background-color: var(--secondary); }
.bg-highlight { background-color: var(--highlight); }
.bg-brown { background-color: var(--brown); }
.bg-surface { background-color: var(--surface); }
.bg-alt { background-color: var(--bg-alt); }

.border-accent { border-color: var(--accent); }
.border-default { border-color: var(--border-color); }

/* Classes pour les états */
.success { color: var(--success); }
.warning { color: var(--warning); }
.error { color: var(--error); }

.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error { background-color: var(--error); }

/* Ombres */
.shadow-soft { box-shadow: 0 4px 10px var(--shadow-color); }
.shadow-default { box-shadow: 0 2px 4px var(--shadow-color); }

/* Loader animation */
@keyframes progress {
    0% { 
        transform: translateX(-100%); 
        opacity: 0.7;
    }
    50% { 
        transform: translateX(0); 
        opacity: 1;
    }
    100% { 
        transform: translateX(100%); 
        opacity: 0.7;
    }
}

/* Animation de fade pour les transitions de mode */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0.8;
    }
    to {
        opacity: 1;
    }
}

.carousel img{
    opacity: 0.3 !important;
}

/* Style pour les cartes/surfaces */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--shadow-default);
}

.card:hover {
    box-shadow: var(--shadow-soft);
}

/* Accessibilité : focus visible */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-alt);
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-dark);
}

/* Correction pour les images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Classes utilitaires pour le texte */
.text-light { color: var(--text-dimmed); }
.text-muted { color: var(--text-muted); }
.text-bold { font-weight: 600; }
.text-italic { font-style: italic; }

/* Classes utilitaires pour l'espacement */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Support pour le mode réduit (reduced-motion) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Map filter */
.map-dark-filter {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(1.1);
}


/* Global container */
/*============================================================================================================= */

.notyf__message {
    font-family: "Quicksand", system-ui, sans-serif !important;
    font-size: 14px !important;
    color: white !important;
}

/* Toast Base */
.notyf__toast {
    border-radius: 18px !important;
    padding: 4px 12px !important;
    box-shadow: 0 10px 25px var(--shadow-color) !important;
}

@media screen and (max-width: 600px) {
    .notyf__toast {
        border-radius: 0 !important;
    }
}


/* Blob */
.dots {
   width: 56px;
   height: 13.4px;
   background: radial-gradient(circle closest-side,#578a27 90%,#0000) 0 0/33% 100% space;
   clip-path: inset(0 100% 0 0);
   animation: dots-e3xtdg 1.5s steps(4) infinite;
}

@keyframes dots-e3xtdg {
   to {
      clip-path: inset(0 -34% 0 0);
   }
}