/* ═══════════════════════════════════════════════════════════════════════

   THÈME GÎTES DE FRANCE — theme-gdf
   🎨 Palette officielle Gîtes de France
   📦 VERSION: 1.1 — 2026-05-28
   ⚠️  Ce fichier s'ajoute APRÈS main.css — ne pas remplacer main.css.

   ACTIVATION : html.theme-gdf (setTheme('gdf') dans app.html)

   PALETTE :
   ┌─────────────────────────────────────────────────────────────┐
   │  Vert principal    #5B8A2D  (vert forêt GdF)               │
   │  Vert foncé        #2C5016  (vert profond / ombres)         │
   │  Or / épis         #E8A820  (blé doré — logo GdF)           │
   │  Crème fond        #F4EFE3  (parchemin naturel)             │
   │  Crème carte       #FDFAF4  (blanc cassé chaud)             │
   │  Texte principal   #1E2D10  (vert-noir foncé)               │
   │  Texte secondaire  #5A6B47  (vert sage)                     │
   └─────────────────────────────────────────────────────────────┘

   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   1. VARIABLES DE MARQUE GDF (disponibles partout, tous thèmes)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --gdf-green:         #5B8A2D;
    --gdf-dark-green:    #2C5016;
    --gdf-light-green:   #8CB85B;
    --gdf-gold:          #E8A820;
    --gdf-gold-light:    #F5C84A;
    --gdf-cream:         #F4EFE3;
    --gdf-cream-card:    #FDFAF4;
    --gdf-text-dark:     #1E2D10;
    --gdf-text-sage:     #5A6B47;
    --gdf-gradient:      linear-gradient(135deg, #5B8A2D 0%, #2C5016 100%);
    --gdf-gradient-gold: linear-gradient(135deg, #E8A820 0%, #C8880A 100%);
    --gdf-border:        rgba(91, 138, 45, 0.18);
    --gdf-shadow:        0 8px 24px rgba(44, 80, 22, 0.15);
    --gdf-shadow-hover:  0 4px 20px rgba(44, 80, 22, 0.28);
}


/* ═══════════════════════════════════════════════════════════════════════
   2. THÈME PRINCIPAL — html.theme-gdf
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf {
    --bg-primary:         #F4EFE3;
    --bg-secondary:       #FDFAF4;
    --text-primary:       #1E2D10;
    --text-secondary:     #5A6B47;
    --border-color:       rgba(91, 138, 45, 0.18);
    --shadow:             0 8px 24px rgba(44, 80, 22, 0.10);
    --shadow-hover:       0 4px 20px rgba(44, 80, 22, 0.22);
    --btn-neutral:        rgba(91, 138, 45, 0.08);
    --btn-neutral-bg:     #E8E0D0;

    /* Remplacement upstay-cyan/blue → vert GdF */
    --upstay-cyan:        #5B8A2D;
    --upstay-blue:        #2C5016;
    --upstay-gradient:    linear-gradient(135deg, #5B8A2D 0%, #2C5016 100%);

    /* Variables locales utilisées par les pages */
    --primary:            #5B8A2D;
    --primary-color:      #5B8A2D;
    --primary-hover:      #2C5016;
    --secondary:          #2C5016;
    --accent:             #E8A820;

    /* Couleurs gîtes héritées */
    --gite-blue:          #5B8A2D;
    --gite-green:         #3D7A1A;
    --gite-red:           #C0392B;
    --gite-cyan:          #8CB85B;
}


/* ═══════════════════════════════════════════════════════════════════════
   3. BODY & FOND GLOBAL
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf body {
    background: var(--bg-primary);
    color: var(--text-primary);
}


/* ═══════════════════════════════════════════════════════════════════════
   4. BARRE DE CONTRÔLE (theme-controls)
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .theme-controls {
    background: var(--gdf-dark-green);
    border-color: rgba(91, 138, 45, 0.4);
    box-shadow: 0 4px 16px rgba(44, 80, 22, 0.4);
}

html.theme-gdf .ctrl-btn { color: #e8f4d4; }

html.theme-gdf .ctrl-btn.active {
    background: rgba(232, 168, 32, 0.25);
    color: var(--gdf-gold);
}

html.theme-gdf .ctrl-btn:hover { color: #ffffff; opacity: 0.85; }

html.theme-gdf .ctrl-separator { background: rgba(232, 168, 32, 0.3); }

html.theme-gdf .ctrl-btn-admin {
    background: rgba(232, 168, 32, 0.15) !important;
    color: var(--gdf-gold) !important;
}

html.theme-gdf .ctrl-btn-admin:hover {
    background: var(--gdf-gold) !important;
    color: var(--gdf-dark-green) !important;
}

html.theme-gdf .user-display-name {
    border-color: rgba(232, 168, 32, 0.25) !important;
    color: #e8f4d4 !important;
}
#t-gdf.active {
    background: rgba(232, 168, 32, 0.25) !important;
    color: var(--gdf-gold) !important;
}

#t-gdf.active {
    background: rgba(232, 168, 32, 0.25) !important;
    color: var(--gdf-gold) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   5. CARTES & CONTENEURS
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .card,
html.theme-gdf .section-card,
html.theme-gdf .stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

html.theme-gdf .card:hover,
html.theme-gdf .section-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: rgba(91, 138, 45, 0.32);
}

html.theme-gdf .card-header,
html.theme-gdf .section-header {
    border-bottom: 1px solid var(--border-color);
    color: var(--gdf-dark-green);
}

html.theme-gdf .card-header-gradient {
    background: var(--gdf-gradient);
    color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════
   6. NAVIGATION TABS
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .tab-button,
html.theme-gdf .nav-tab {
    color: var(--gdf-text-sage);
    border-color: transparent;
}

html.theme-gdf .tab-button:hover,
html.theme-gdf .nav-tab:hover {
    color: var(--gdf-green);
    background: rgba(91, 138, 45, 0.06);
}

html.theme-gdf .tab-button.active,
html.theme-gdf .nav-tab.active {
    color: var(--gdf-dark-green);
    border-bottom-color: var(--gdf-green);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. BOUTONS
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .btn-primary,
html.theme-gdf button.primary {
    background: var(--gdf-gradient) !important;
    color: #ffffff !important;
    border: none;
}

html.theme-gdf .btn-primary:hover,
html.theme-gdf button.primary:hover {
    background: linear-gradient(135deg, #6A9E35 0%, #3A6B20 100%) !important;
    box-shadow: 0 4px 14px rgba(44, 80, 22, 0.35);
}

html.theme-gdf .btn-secondary,
html.theme-gdf button.secondary {
    background: var(--btn-neutral-bg);
    color: var(--gdf-dark-green);
    border: 1px solid var(--border-color);
}


/* ═══════════════════════════════════════════════════════════════════════
   8. FORMULAIRES & INPUTS
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf input,
html.theme-gdf select,
html.theme-gdf textarea {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

html.theme-gdf input:focus,
html.theme-gdf select:focus,
html.theme-gdf textarea:focus,
html.theme-gdf .form-group input:focus {
    border-color: var(--gdf-green) !important;
    box-shadow: 0 0 0 3px rgba(91, 138, 45, 0.15) !important;
    outline: none !important;
}

html.theme-gdf label { color: var(--gdf-text-sage); }


/* ═══════════════════════════════════════════════════════════════════════
   9. TABLEAUX
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf table { background: var(--bg-secondary); }

html.theme-gdf thead tr,
html.theme-gdf th {
    background: rgba(91, 138, 45, 0.08);
    color: var(--gdf-dark-green);
    border-bottom: 2px solid rgba(91, 138, 45, 0.2);
}

html.theme-gdf tbody tr:hover { background: rgba(91, 138, 45, 0.04); }

html.theme-gdf td {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}


/* ═══════════════════════════════════════════════════════════════════════
   10. BADGES & STATUTS
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .badge-success,
html.theme-gdf .status-confirmee {
    background: rgba(91, 138, 45, 0.12);
    color: var(--gdf-dark-green);
    border: 1px solid rgba(91, 138, 45, 0.25);
}

html.theme-gdf .badge-warning,
html.theme-gdf .status-option {
    background: rgba(232, 168, 32, 0.12);
    color: #8A5A00;
    border: 1px solid rgba(232, 168, 32, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════
   11. STAT CARDS
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .stat-icon,
html.theme-gdf .stat-value {
    color: var(--gdf-green) !important;
    stroke: var(--gdf-green) !important;
}

html.theme-gdf .stat-card-primary {
    background: var(--gdf-gradient);
    color: #ffffff;
}

html.theme-gdf .stat-card-primary .stat-value,
html.theme-gdf .stat-card-primary .stat-icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   12. MODALS
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .modal-content,
html.theme-gdf .modal-body {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(44, 80, 22, 0.2);
}

html.theme-gdf .modal-header {
    border-bottom: 1px solid var(--border-color);
    color: var(--gdf-dark-green);
}


/* ═══════════════════════════════════════════════════════════════════════
   13. ALERTES & TOASTS
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .toast,
html.theme-gdf .alert {
    background: var(--bg-secondary);
    border-left: 4px solid var(--gdf-green);
    color: var(--text-primary);
    box-shadow: var(--shadow);
}

html.theme-gdf .toast-success { border-left-color: var(--gdf-green); }
html.theme-gdf .toast-warning { border-left-color: var(--gdf-gold); }
html.theme-gdf .toast-error   { border-left-color: #C0392B; }


/* ═══════════════════════════════════════════════════════════════════════
   14. DROPDOWN ADMIN
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .admin-dropdown-modern {
    background: var(--gdf-cream-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(44, 80, 22, 0.18);
}

html.theme-gdf .dropdown-item-modern {
    color: var(--gdf-dark-green);
    border-bottom-color: rgba(91, 138, 45, 0.07);
}

html.theme-gdf .dropdown-item-modern:hover { background: rgba(91, 138, 45, 0.07); }
html.theme-gdf .dropdown-item-modern i { color: var(--gdf-green); }
html.theme-gdf .dropdown-divider-modern { background: rgba(91, 138, 45, 0.1); }
html.theme-gdf .dropdown-item-danger { color: #C0392B !important; }


/* ═══════════════════════════════════════════════════════════════════════
   15. LIENS
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf a { color: var(--gdf-green); }
html.theme-gdf a:hover { color: var(--gdf-dark-green); }
html.theme-gdf .forgot-link,
html.theme-gdf .create-account,
html.theme-gdf a.link-primary { color: var(--gdf-green) !important; }


/* ═══════════════════════════════════════════════════════════════════════
   16. OVERRIDES BLEUS HARDCODÉS — pages auth (login / forgot / reset)
   ═══════════════════════════════════════════════════════════════════════ */

/* Bouton Se connecter / Envoyer / Réinitialiser */
html.theme-gdf .btn-login,
html.theme-gdf .btn-forgot,
html.theme-gdf .btn-reset,
html.theme-gdf .btn-submit {
    background: linear-gradient(135deg, #5B8A2D 0%, #2C5016 100%) !important;
    box-shadow: 0 4px 12px rgba(91, 138, 45, 0.35) !important;
    color: #ffffff !important;
}

html.theme-gdf .btn-login:hover,
html.theme-gdf .btn-forgot:hover,
html.theme-gdf .btn-reset:hover {
    background: linear-gradient(135deg, #6A9E35 0%, #3A6B20 100%) !important;
    box-shadow: 0 6px 20px rgba(91, 138, 45, 0.45) !important;
}

/* Logo icône */
html.theme-gdf .logo-icon {
    background: linear-gradient(135deg, #5B8A2D 0%, #2C5016 100%) !important;
    box-shadow: 0 8px 24px rgba(91, 138, 45, 0.3) !important;
}

/* Fond body login (bleu clair → crème) */
html.theme-gdf body {
    background: linear-gradient(135deg, #F4EFE3 0%, #EBE4D4 100%) !important;
}

/* Input fond bleuté → crème */
html.theme-gdf .form-group input,
html.theme-gdf input[type="email"],
html.theme-gdf input[type="password"],
html.theme-gdf input[type="text"] {
    background: #FDFAF4 !important;
    border-color: rgba(91, 138, 45, 0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   17. OVERRIDES BLEUS HARDCODÉS — validation.html
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .tab-btn.active,
html.theme-gdf .nav-tab-v.active {
    border-bottom-color: #5B8A2D !important;
    color: #5B8A2D !important;
}

html.theme-gdf .validation-card.selected {
    border-color: #5B8A2D !important;
    box-shadow: 2px 2px 0 #5B8A2D !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   18. OVERRIDES BLEUS HARDCODÉS — femme-menage.html
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .progress-bar,
html.theme-gdf .menage-progress,
html.theme-gdf .header-progress-fill {
    background: linear-gradient(90deg, #5B8A2D, #8CB85B) !important;
}

html.theme-gdf .task-section-title,
html.theme-gdf .menage-section h3 {
    color: #5B8A2D !important;
}

html.theme-gdf .menage-task-item {
    border-left-color: #5B8A2D !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   19. OVERRIDES BLEUS HARDCODÉS — options.html
       (les inline styles ne peuvent pas être overridés — voir instructions
        Copilot pour remplacer #667eea directement dans options.html)
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf .pricing-card.popular {
    border-color: #5B8A2D !important;
    box-shadow: 0 8px 30px rgba(91, 138, 45, 0.2) !important;
}

html.theme-gdf .pricing-savings { color: #5B8A2D !important; }

html.theme-gdf input[type="range"]::-webkit-slider-thumb,
html.theme-gdf input[type="checkbox"]:checked {
    accent-color: #5B8A2D !important;
    background: #5B8A2D !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   20. ICÔNES SVG & ACCENTS GLOBAUX
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf svg[stroke] { stroke: currentColor; }

html.theme-gdf .text-accent,
html.theme-gdf .highlight { color: var(--gdf-gold); }

html.theme-gdf *:focus-visible {
    outline-color: var(--gdf-green) !important;
    box-shadow: 0 0 0 3px rgba(91, 138, 45, 0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   21. SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════ */
html.theme-gdf ::-webkit-scrollbar-track { background: var(--bg-primary); }

html.theme-gdf ::-webkit-scrollbar-thumb {
    background: rgba(91, 138, 45, 0.3);
    border-radius: 4px;
}

html.theme-gdf ::-webkit-scrollbar-thumb:hover {
    background: rgba(91, 138, 45, 0.55);
}


/* ═══════════════════════════════════════════════════════════════════════
   21. PLANNING RÉSERVATIONS — CARTES DE SEMAINE
   ═══════════════════════════════════════════════════════════════════════ */

/* Conteneur global des semaines */
html.theme-gdf .planning-weeks {
    background: transparent;
}

/* Wrapper de chaque semaine (4 colonnes = 4 gîtes) */
html.theme-gdf .weeks-grid {
    background: var(--gdf-cream-card) !important;
    border: 2px solid rgba(91, 138, 45, 0.28) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(44, 80, 22, 0.10), inset 0 1px 0 rgba(255,255,255,0.8) !important;
    padding: 16px !important;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

/* Bande décorative en haut du cadre */
html.theme-gdf .weeks-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gdf-green) 0%, var(--gdf-gold) 50%, var(--gdf-green) 100%);
    border-radius: 16px 16px 0 0;
}

/* En-têtes de colonnes */
html.theme-gdf .week-column-header {
    background: linear-gradient(135deg, var(--gdf-green) 0%, var(--gdf-dark-green) 100%) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(44, 80, 22, 0.25) !important;
    border-radius: 10px 10px 0 0 !important;
}

/* Textes dans les en-têtes */
html.theme-gdf .week-column-header-gite,
html.theme-gdf .week-column-header-week,
html.theme-gdf .week-column-header-dates {
    color: #ffffff !important;
}

html.theme-gdf .week-column-header-dates {
    opacity: 0.75 !important;
}

/* Badges couleurs gîtes en blanc sur fond vert */
html.theme-gdf .week-column-header-trevoux .week-column-header-gite::before { color: #93d7f8 !important; }
html.theme-gdf .week-column-header-couzon .week-column-header-gite::before  { color: #ffb3b3 !important; }
html.theme-gdf .week-column-header-3eme .week-column-header-gite::before    { color: #b9f0d4 !important; }
html.theme-gdf .week-column-header-4eme .week-column-header-gite::before    { color: #fffacc !important; }

/* Corps de colonne */
html.theme-gdf .week-column-body {
    background: rgba(253, 250, 244, 0.7) !important;
    border: 1px solid rgba(91, 138, 45, 0.18) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: inset 0 2px 6px rgba(44, 80, 22, 0.04) !important;
}

/* Cartes de réservation */
html.theme-gdf .week-reservation {
    background: var(--gdf-cream-card) !important;
    border: 1.5px solid rgba(91, 138, 45, 0.22) !important;
    border-left: 4px solid var(--gdf-green) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(44, 80, 22, 0.08) !important;
}

html.theme-gdf .week-reservation:hover {
    border-left-color: var(--gdf-gold) !important;
    box-shadow: 0 4px 14px rgba(44, 80, 22, 0.16) !important;
    transform: translateY(-2px);
}

/* Zone "Disponible" */
html.theme-gdf .week-disponible {
    color: var(--gdf-text-sage) !important;
    opacity: 0.75;
}
html.theme-gdf .week-disponible::before {
    color: var(--gdf-light-green) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   22. PLANNING MÉNAGE — CARTES DE SEMAINE
   ═══════════════════════════════════════════════════════════════════════ */

/* Wrapper de chaque semaine ménage */
html.theme-gdf .menage-week-container {
    background: var(--gdf-cream-card) !important;
    border: 2px solid rgba(91, 138, 45, 0.28) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(44, 80, 22, 0.10), inset 0 1px 0 rgba(255,255,255,0.8) !important;
    padding: 4px !important;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

/* Bande décorative en haut */
html.theme-gdf .menage-week-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gdf-green) 0%, var(--gdf-gold) 50%, var(--gdf-green) 100%);
    border-radius: 16px 16px 0 0;
    z-index: 1;
}

/* Colonnes de gîte */
html.theme-gdf .gite-column {
    border: 1px solid rgba(91, 138, 45, 0.18) !important;
    box-shadow: 0 2px 8px rgba(44, 80, 22, 0.06) !important;
    background: rgba(253, 250, 244, 0.8) !important;
}

/* Corps de colonne */
html.theme-gdf .gite-column-body {
    background: rgba(253, 250, 244, 0.7) !important;
}

/* Cartes de ménage */
html.theme-gdf .menage-card {
    background: var(--gdf-cream-card) !important;
    border: 1.5px solid rgba(91, 138, 45, 0.22) !important;
    border-left: 4px solid var(--gdf-green) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(44, 80, 22, 0.08) !important;
}

html.theme-gdf .menage-card:hover {
    border-left-color: var(--gdf-gold) !important;
    box-shadow: 0 4px 14px rgba(44, 80, 22, 0.16) !important;
}

/* Carte validée */
html.theme-gdf .menage-card-validated {
    border-left: 4px solid var(--gdf-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GdF + MODE NUIT — Coexistence html.theme-gdf.theme-dark
   ═══════════════════════════════════════════════════════════════════════ */

html.theme-gdf.theme-dark {
    --bg-primary:    #1c2318;
    --bg-secondary:  #232d1c;
    --text-primary:  #dff0c8;
    --text-secondary: #8daa6a;
    --border-color:  rgba(141,170,106,0.18);
    --btn-neutral-bg: #2a3620;
}

html.theme-gdf.theme-dark body {
    background: #1c2318 !important;
}

html.theme-gdf.theme-dark .section-card,
html.theme-gdf.theme-dark .card,
html.theme-gdf.theme-dark .modal-content,
html.theme-gdf.theme-dark .dashboard-container-urssaf,
html.theme-gdf.theme-dark [class*="dashboard-kpi-"] {
    background: #232d1c !important;
    border-color: rgba(141,170,106,0.15) !important;
}

html.theme-gdf.theme-dark .filter-btn {
    background: #232d1c !important;
    color: #8daa6a !important;
    border-color: rgba(141,170,106,0.2) !important;
}

html.theme-gdf.theme-dark .dashboard-icalou body,
html.theme-gdf.theme-dark .tab-content,
html.theme-gdf.theme-dark .tab-content.active,
html.theme-gdf.theme-dark #app-container,
html.theme-gdf.theme-dark main {
    background: #1c2318 !important;
}

/* Séparateur dans les cartes */
html.theme-gdf .menage-card-time {
    border-bottom-color: rgba(91, 138, 45, 0.18) !important;
}

/* Zone vide */
html.theme-gdf .gite-column-body-empty {
    color: var(--gdf-text-sage) !important;
}