/* assets/themes.css - VERSION FINALE : AUTOMNE PLUS DENSE */

/* =========================================
   1. PALETTES DE COULEURS
   ========================================= */
:root {
    --primary: #FF5733; 
    --secondary: #FFC300; 
    --bg-light: #fffaf0; 
    --text-dark: #2c3e50;
}

/* --- THÈMES VALIDÉS --- */
body.theme-noel { --primary: #c0392b; --secondary: #1e8449; --bg-light: #ffffff; --text-dark: #2c0b0b; }
body.theme-hiver { --primary: #00cec9; --secondary: #0984e3; --bg-light: #ffffff; --text-dark: #1e272e; }
body.theme-paque { --primary: #8e44ad; --secondary: #f1c40f; --bg-light: #ffffff; --text-dark: #2c3e50; }
body.theme-printemps { --primary: #27ae60; --secondary: #16a085; --bg-light: #ffffff; --text-dark: #2d3436; }
body.theme-ete { --primary: #ff6b6b; --secondary: #feca57; --bg-light: #ffffff; --text-dark: #2d3436; }

/* --- THÈME AUTOMNE (VALIDÉ) --- */
body.theme-automne {
    --primary: #d35400;       /* Rouille / Citrouille */
    --secondary: #f39c12;     /* Orange Safran */
    --bg-light: #fff9f0;      /* Crème chaud */
    --text-dark: #2d3436;
}


/* =========================================
   2. CONFIGURATION MASCOTTES
   ========================================= */

.hero-section h1 {
    display: inline-block;
    position: relative;
}

/* Base générique */
.hero-section h1::before,
.hero-section h1::after {
    content: '';
    display: none; 
    height: 60px; width: 60px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    vertical-align: bottom;
    margin-bottom: 5px;
}
.hero-section h1::before { margin-right: 15px; }
.hero-section h1::after { margin-left: 15px; }

@media (max-width: 768px) {
    .hero-section h1::before, .hero-section h1::after { 
        width: 40px; height: 40px; margin: 0 8px 2px 8px; 
    }
}


/* --- MASCOTTES PAR THÈME --- */

/* NOËL (Aléatoire) */
body.theme-noel.mascot-1 .hero-section h1::after {
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='20' fill='white'/%3E%3Cpath d='M32 28l4 2' stroke='%23e74c3c' stroke-width='2'/%3E%3Ccircle cx='28' cy='26' r='2' fill='black'/%3E%3Ccircle cx='36' cy='26' r='2' fill='black'/%3E%3Cpath d='M26 38q6 4 12 0' stroke='black' stroke-width='2' fill='none'/%3E%3Crect x='22' y='12' width='20' height='6' fill='%232c3e50'/%3E%3Crect x='25' y='4' width='14' height='10' fill='%232c3e50'/%3E%3C/svg%3E");
    transform: rotate(5deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
body.theme-noel.mascot-2 .hero-section h1::after {
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 10 L20 22 M20 16 L12 12 M20 16 L28 12' stroke='%235d4037' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M44 10 L44 22 M44 16 L52 12 M44 16 L36 12' stroke='%235d4037' stroke-width='3' stroke-linecap='round'/%3E%3Cellipse cx='16' cy='28' rx='4' ry='8' fill='%238d6e63' transform='rotate(-30 16 28)'/%3E%3Cellipse cx='48' cy='28' rx='4' ry='8' fill='%238d6e63' transform='rotate(30 48 28)'/%3E%3Ccircle cx='32' cy='36' r='16' fill='%238d6e63'/%3E%3Cellipse cx='32' cy='42' rx='9' ry='7' fill='%23d7ccc8'/%3E%3Ccircle cx='32' cy='40' r='4' fill='%23c0392b'/%3E%3Ccircle cx='26' cy='32' r='2' fill='black'/%3E%3Ccircle cx='38' cy='32' r='2' fill='black'/%3E%3C/svg%3E");
    transform: rotate(-5deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* PÂQUES (Tombeau Vide) */
body.theme-paque .hero-section h1::after {
    display: inline-block; width: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cpath d='M10,80 Q10,20 50,20 Q90,20 90,80 Z' fill='%23795548' stroke='%233e2723' stroke-width='3'/%3E%3Cpath d='M25,80 Q25,35 50,35 Q75,35 75,80 Z' fill='%232c3e50'/%3E%3Ccircle cx='50' cy='60' r='8' fill='%23f1c40f' opacity='0.7' filter='blur(2px)'/%3E%3Ccircle cx='85' cy='70' r='18' fill='%23bdc3c7' stroke='%237f8c8d' stroke-width='2'/%3E%3C/svg%3E");
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

/* HIVER (Flocon) */
body.theme-hiver .hero-section h1::after {
    display: inline-block; width: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 2v20M2 12h20M4.9 4.9l14.2 14.2M4.9 19.1L19.1 4.9'/%3E%3C/svg%3E");
    animation: spin 20s linear infinite;
}

/* ÉTÉ (Soleil Cartoon) */
body.theme-ete .hero-section h1::after {
    display: inline-block; width: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='14' fill='%23ffeb3b'/%3E%3Cg stroke='%23ffeb3b' stroke-width='4' stroke-linecap='round'%3E%3Cline x1='32' y1='8' x2='32' y2='12'/%3E%3Cline x1='32' y1='52' x2='32' y2='56'/%3E%3Cline x1='8' y1='32' x2='12' y2='32'/%3E%3Cline x1='52' y1='32' x2='56' y2='32'/%3E%3Cline x1='15' y1='15' x2='18' y2='18'/%3E%3Cline x1='46' y1='46' x2='49' y2='49'/%3E%3Cline x1='46' y1='18' x2='49' y2='15'/%3E%3Cline x1='15' y1='49' x2='18' y2='46'/%3E%3C/g%3E%3C/svg%3E");
    animation: spin 20s linear infinite; filter: drop-shadow(0 0 5px rgba(255, 235, 59, 0.5));
}

/* PRINTEMPS (Jeune Pousse) */
body.theme-printemps .hero-section h1::after {
    display: inline-block; width: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 56 Q32 60 44 56' stroke='%23795548' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M32 56 Q32 40 32 36' stroke='%2327ae60' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M32 36 Q15 20 10 32 Q15 45 32 36 Z' fill='%234cd137'/%3E%3Cpath d='M32 36 Q49 20 54 32 Q49 45 32 36 Z' fill='%234cd137'/%3E%3C/svg%3E");
    animation: sway 3s ease-in-out infinite alternate;
    transform-origin: bottom center; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

/* AUTOMNE (L'Arbre aux dernières feuilles) - VALIDÉ */
body.theme-automne .hero-section h1::after {
    display: inline-block; width: 60px;
    /* Arbre brun avec quelques feuilles rouges/oranges restantes */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 60 L32 40 Q32 20 15 15' stroke='%235d4037' stroke-width='3' fill='none'/%3E%3Cpath d='M32 40 Q32 25 50 20' stroke='%235d4037' stroke-width='3' fill='none'/%3E%3Cpath d='M32 30 Q32 15 25 5' stroke='%235d4037' stroke-width='2' fill='none'/%3E%3Ccircle cx='15' cy='15' r='4' fill='%23d35400'/%3E%3Ccircle cx='50' cy='20' r='3' fill='%23f39c12'/%3E%3Ccircle cx='25' cy='5' r='3' fill='%23c0392b'/%3E%3C/svg%3E");
    /* Oscillation douce */
    animation: sway 4s ease-in-out infinite alternate;
    transform-origin: bottom center; 
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}


/* =========================================
   3. AMBIANCE DE FOND (MOUVEMENT POUR TOUS)
   ========================================= */

.hero-section, .bottom-hero { position: relative; overflow: hidden; }
.hero-section::before, .bottom-hero::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 1; 
}

/* --- LE FOND QUI BOUGE (VAGUE FLUIDE) --- */

/* ORIGINAL (Défaut) : Orange -> Jaune */
body:not([class*="theme-"]) .hero-section, body:not([class*="theme-"]) .bottom-hero,
body.theme-default .hero-section, body.theme-default .bottom-hero {
    background: linear-gradient(-45deg, #FF5733, #FFC300, #ff9f43, #FF5733);
    background-size: 400% 400%; animation: gradientMove 15s ease infinite;
}

/* NOËL : Rouge -> Vert */
body.theme-noel .hero-section, body.theme-noel .bottom-hero {
    background: linear-gradient(-45deg, #c0392b, #e74c3c, #1e8449, #c0392b);
    background-size: 400% 400%; animation: gradientMove 15s ease infinite;
}
/* HIVER : Bleu -> Cyan */
body.theme-hiver .hero-section, body.theme-hiver .bottom-hero {
    background: linear-gradient(-45deg, #0984e3, #00cec9, #74b9ff, #0984e3);
    background-size: 400% 400%; animation: gradientMove 15s ease infinite;
}
/* PÂQUES : Violet -> Or */
body.theme-paque .hero-section, body.theme-paque .bottom-hero {
    background: linear-gradient(-45deg, #8e44ad, #9b59b6, #f1c40f, #8e44ad);
    background-size: 400% 400%; animation: gradientMove 15s ease infinite;
}
/* PRINTEMPS : 100% Vert */
body.theme-printemps .hero-section, body.theme-printemps .bottom-hero {
    background: linear-gradient(-45deg, #27ae60, #2ecc71, #16a085, #27ae60);
    background-size: 400% 400%; animation: gradientMove 15s ease infinite;
}
body.theme-printemps .hero-section h1, body.theme-printemps .hero-section p { text-shadow: 0 2px 10px rgba(0,0,0,0.15); }

/* ÉTÉ : Orange -> Jaune */
body.theme-ete .hero-section, body.theme-ete .bottom-hero {
    background: linear-gradient(-45deg, #ff6b6b, #ff9f43, #feca57, #ff6b6b);
    background-size: 400% 400%; animation: gradientMove 15s ease infinite;
}
body.theme-ete .hero-section::before, body.theme-ete .bottom-hero::before { display: none; }


/* --- AUTOMNE : BRISE SUBTILE PLUS DENSE --- */

/* 1. Fond en mouvement (Terre, Rouille, Or) */
body.theme-automne .hero-section, body.theme-automne .bottom-hero {
    background: linear-gradient(-45deg, #d35400, #f39c12, #e67e22, #d35400);
    background-size: 400% 400%; animation: gradientMove 15s ease infinite;
}

/* 2. Particules blanches/crèmes subtiles (Plus nombreuses) */
body.theme-automne .hero-section::before,
body.theme-automne .bottom-hero::before {
    display: block;
    /* Ajout de plus de petites formes ovales pour densifier */
    background-image: 
        radial-gradient(ellipse 3px 5px at 10% 10%, rgba(255, 255, 255, 0.5) 50%, transparent),
        radial-gradient(ellipse 4px 6px at 30% 40%, rgba(255, 250, 240, 0.4) 50%, transparent),
        radial-gradient(ellipse 2px 4px at 60% 20%, rgba(255, 255, 255, 0.5) 50%, transparent),
        radial-gradient(ellipse 5px 3px at 80% 70%, rgba(255, 250, 240, 0.4) 50%, transparent),
        /* Nouveaux éléments pour la densité */
        radial-gradient(ellipse 3px 4px at 15% 60%, rgba(255, 255, 255, 0.4) 50%, transparent),
        radial-gradient(ellipse 4px 5px at 45% 80%, rgba(255, 250, 240, 0.5) 50%, transparent),
        radial-gradient(ellipse 2px 3px at 70% 30%, rgba(255, 255, 255, 0.4) 50%, transparent),
        radial-gradient(ellipse 3px 5px at 90% 50%, rgba(255, 250, 240, 0.5) 50%, transparent);

    background-size: 400px 400px; 
    /* Animation : dérive dans le vent */
    animation: autumnWind 20s linear infinite;
}


/* --- EFFET DE NEIGE (Noël & Hiver Uniquement) --- */
body.theme-noel .hero-section::before, body.theme-noel .bottom-hero::before,
body.theme-hiver .hero-section::before, body.theme-hiver .bottom-hero::before {
    display: block;
    background-image: 
        radial-gradient(4px 4px at 10% 10%, rgba(255, 255, 255, 0.8) 50%, transparent),
        radial-gradient(6px 6px at 20% 30%, rgba(255, 255, 255, 0.6) 50%, transparent),
        radial-gradient(3px 3px at 40% 70%, rgba(255, 255, 255, 0.9) 50%, transparent),
        radial-gradient(4px 4px at 60% 20%, rgba(255, 255, 255, 0.7) 50%, transparent),
        radial-gradient(3px 3px at 90% 10%, rgba(255, 255, 255, 0.8) 50%, transparent);
    background-size: 500px 500px;
    animation: snow 20s linear infinite;
}


/* =========================================
   4. ANIMATIONS & BOOTSTRAP OVERRIDES
   ========================================= */

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes sway { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } }
@keyframes snow { 0% { background-position: 0 0; } 100% { background-position: 50px 500px; } }

/* Nouvelle animation pour le vent d'automne (diagonale) */
@keyframes autumnWind {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 100px 400px, 150px 350px, -50px 450px, 200px 500px, 120px 420px, 180px 380px, -20px 480px, 220px 520px; }
}

body[class*="theme-"] .btn-outline-primary { color: var(--primary); border-color: var(--primary); }
body[class*="theme-"] .btn-outline-primary:hover { background-color: var(--primary); color: white; }
body[class*="theme-"] .text-primary { color: var(--primary) !important; }
body[class*="theme-"] .bg-primary { background-color: var(--primary) !important; }
body[class*="theme-"] .navbar-brand { color: var(--primary) !important; }
body[class*="theme-"] .page-link { color: var(--primary); }
body[class*="theme-"] .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); }
body[class*="theme-"] .form-control:focus, body[class*="theme-"] .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 0.25rem rgba(0,0,0,0.1); }