/*
================================================================================
Styles pour l'horloge interactive
================================================================================
LANGUAGE: FRANÇAIS
Version: 4.0
Auteur: Emile SNYERS
Licence: Tous droits réservés - 2025

/* LICENCE ET CONDITIONS D'UTILISATION
----------------------------------------
Tous droits réservés - 2025
📢Toute utilisation nécessite une autorisation préalable du propriétaire (Emile SNYERS).
🚨Usage non commercial uniquement.

Type d'utilisation autorisée: 
- Utilisation pour des projets éducatifs ou associatifs.
- Ne pas redistribuer sans autorisation.

Critères d'attribution d'une autorisation: 
- Contribution à des projets éducatifs ou associatifs.
- L'entraide et le partage du savoir.
---------------------------------------- */

/* DESCRIPTION TECHNIQUE
----------------------------------------
Description: 
- Styles pour une horloge interactive dynamique.
- L'horloge est positionnée en bas à droite de la fenêtre.
- Interface avec contrôles de déplacement, minimisation et personnalisation.
- Mode minimal et affichage complet disponibles.

Recommandations d'utilisation: 
- Utiliser ce fichier CSS avec le JavaScript correspondant pour l'horloge.
- Toutes les classes utilisent le préfixe ESNW-v4 pour éviter les conflits.
- L'horloge peut être repositionnée par l'utilisateur via drag and drop.
---------------------------------------- */
/*
================================================================================
Styles for Interactive Clock
================================================================================
LANGUAGE: ENGLISH
Version: 4.0
Author: Emile SNYERS
License: All rights reserved - 2025

/* LICENSE AND TERMS OF USE
----------------------------------------
All rights reserved - 2025
📢Any use requires prior authorization from the owner (Emile SNYERS).
🚨Non-commercial use only.

Authorized usage types: 
- Use for educational or associative projects.
- Do not redistribute without authorization.

Authorization criteria: 
- Contribution to educational or associative projects.
- Mutual assistance and knowledge sharing.
---------------------------------------- */

/* TECHNICAL DESCRIPTION
----------------------------------------
Description: 
- Styles for a dynamic interactive clock.
- The clock is positioned at the bottom right of the window.
- Interface with movement controls, minimization and customization.
- Minimal mode and full display available.

Usage recommendations: 
- Use this CSS file with the corresponding JavaScript for the clock.
- All classes use the ESNW-v4 prefix to avoid conflicts.
- The clock can be repositioned by the user via drag and drop.
---------------------------------------- */
/*
================================================================================
インタラクティブ時計のスタイル
================================================================================
言語: 日本語
バージョン: 4.0
作者: Emile SNYERS
ライセンス: 全著作権所有 - 2025

/* ライセンスおよび利用規約
----------------------------------------
全著作権所有 - 2025
📢いかなる使用も所有者（Emile SNYERS）の事前許可が必要です。
🚨非商用利用のみ。

許可される使用タイプ: 
- 教育または団体プロジェクトでの使用。
- 許可なく再配布しないでください。

許可基準: 
- 教育または団体プロジェクトへの貢献。
- 相互援助と知識の共有。
---------------------------------------- */

/* 技術的説明
----------------------------------------
説明: 
- ダイナミックなインタラクティブ時計のスタイル。
- 時計はウィンドウの右下に配置されています。
- 移動コントロール、最小化、カスタマイズが可能なインターフェース。
- ミニマルモードとフル表示が利用可能。

使用上の推奨事項: 
- このCSSファイルは、時計用の対応するJavaScriptと共に使用してください。
- すべてのクラスは競合を避けるためにESNW-v4接頭辞を使用しています。
- 時計はドラッグアンドドロップでユーザーが再配置できます。
---------------------------------------- */






/*
================================================================================
HORLOGE INTERACTIVE AVANCÉE - VERSION 4.0
================================================================================
LANGUAGE: FRANÇAIS
Version: 4.0
Auteur: Emile SNYERS
Licence: Tous droits réservés - 2025

LICENCE ET CONDITIONS D'UTILISATION
----------------------------------------
Emile SNYERS - Tous droits réservés - 2025
📢 Toute utilisation nécessite une autorisation préalable du propriétaire (Emile SNYERS).
🚨 Usage non commercial uniquement.

Type d'utilisation autorisée: 
- Utilisation pour des projets éducatifs ou associatifs.
- Ne pas redistribuer sans autorisation.

Critères d'attribution d'une autorisation: 
- Contribution à des projets éducatifs ou associatifs.
- L'entraide et le partage du savoir.
- Contribue à la promotion de l'éducation et de la culture.
----------------------------------------

DESCRIPTION TECHNIQUE
----------------------------------------
Description: 
- Horloge interactive avec positionnement fixe en bas à droite
- Interface avec contrôles de déplacement, minimisation et personnalisation
- Mode minimal et affichage complet disponibles
- Prise en charge complète des thèmes personnalisables
- Bouton de réapparition pour l'interface masquée
================================================================================
*/

/* ====================================================================
   VARIABLES CSS POUR LA PERSONNALISATION DES THÈMES
==================================================================== */

:root {
    /* Couleurs principales de l'horloge */
    --horloge-bg-primary: var(--theme-background, #faf0ce);
    --horloge-bg-secondary: var(--theme-secondary, #f0f0f0);
    --horloge-text-primary: var(--theme-text, #333333);
    --horloge-text-secondary: var(--theme-text-secondary, #666666);
    --horloge-accent: var(--theme-primary, #4CAF50);
    --horloge-border: var(--theme-border, #e0e0e0);
    
    /* Effets et transitions */
    --horloge-shadow: var(--theme-shadow, 0 2px 10px rgba(0,0,0,0.1));
    --horloge-hover-bg: var(--theme-hover, rgba(0,0,0,0.1));
    --horloge-transition: all 0.3s ease;
    
    /* Dimensions et espacements */
    --horloge-border-radius: var(--border-radius-md, 10px);
    --horloge-padding: var(--spacing-md, 20px);
    --horloge-font-size: var(--font-size-4xl, 48px);
}

/* ====================================================================
   CONTENEUR PRINCIPAL DE L'HORLOGE
==================================================================== */

.ESNW-v4-horloge-container {
    /* Positionnement fixe en bas à droite de l'écran */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    
    /* Apparence et thématisation */
    background-color: var(--horloge-bg-primary);
    border-radius: var(--horloge-border-radius);
    box-shadow: var(--horloge-shadow);
    
    /* Dimensions et comportement */
    min-width: 250px;
    user-select: none;
    
    /* Transition fluide pour les changements */
    transition: var(--horloge-transition);
}

/* Mode minimal - Interface réduite */
.ESNW-v4-minimal-mode {
    height: 5px !important;
    min-width: 100px !important;
    background: var(--horloge-bg-primary) !important;
    opacity: 0.5;
    
    /* Curseur indiquant la possibilité d'interaction */
    cursor: pointer;
}

/* ====================================================================
   BOUTON DE RÉAPPARITION
==================================================================== */

.ESNW-v4-show-button {
    /* Positionnement identique au conteneur principal */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    
    /* Apparence du bouton */
    padding: 10px 20px;
    background-color: var(--horloge-accent);
    color: var(--horloge-text-primary);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    
    /* Masqué par défaut */
    display: none;
    
    /* Transition pour les effets de survol */
    transition: var(--horloge-transition);
}

.ESNW-v4-show-button:hover {
    background-color: var(--theme-primary-hover, #45a049);
    transform: translateY(-2px);
    box-shadow: var(--horloge-shadow);
}

/* ====================================================================
   BARRE D'EN-TÊTE ET CONTRÔLES
==================================================================== */

.ESNW-v4-header-controls {
    /* Disposition flexible pour les contrôles */
    display: flex;
    align-items: center;
    
    /* Apparence de la barre d'en-tête */
    background-color: var(--horloge-bg-secondary);
    border-radius: var(--horloge-border-radius) var(--horloge-border-radius) 0 0;
    border-bottom: 1px solid var(--horloge-border);
}

.ESNW-v4-control-button {
    /* Boutons de contrôle dans l'en-tête */
    padding: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--horloge-text-primary);
    font-size: 16px;
    
    /* Transition pour les effets de survol */
    transition: var(--horloge-transition);
}

.ESNW-v4-control-button:hover {
    background-color: var(--horloge-hover-bg);
    border-radius: 4px;
}

/* Zone de glissement pour déplacer l'horloge */
.ESNW-v4-drag-zone {
    flex-grow: 1;
    padding: 10px;
    cursor: move;
    text-align: center;
    font-weight: bold;
    color: var(--horloge-text-primary);
    font-size: 14px;
    
    /* Indication visuelle du glissement */
    transition: var(--horloge-transition);
}

.ESNW-v4-drag-zone:hover {
    background-color: var(--horloge-hover-bg);
}

/* ====================================================================
   AFFICHAGE DE L'HEURE
==================================================================== */

.ESNW-v4-horloge {
    /* Centrage et mise en forme de l'heure */
    text-align: center;
    padding: var(--horloge-padding);
    
    /* Taille et couleur du texte */
    font-size: var(--horloge-font-size);
    color: var(--horloge-text-primary);
    font-weight: 300;
    font-family: 'Courier New', monospace;
    
    /* Espacement des caractères pour une meilleure lisibilité */
    letter-spacing: 2px;
    
    /* Bordure subtile pour délimiter l'affichage */
    border-top: 1px solid var(--horloge-border);
}

/* ====================================================================
   BOUTON D'OPTIONS ET PANNEAU DE CONTRÔLE
==================================================================== */

.ESNW-v4-options-toggle {
    /* Bouton pour afficher/masquer les options */
    width: 100%;
    padding: 10px;
    background-color: var(--horloge-bg-secondary);
    border: none;
    border-top: 1px solid var(--horloge-border);
    cursor: pointer;
    color: var(--horloge-text-primary);
    font-weight: 500;
    
    /* Disposition flexible pour l'icône et le texte */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* Transition pour les effets */
    transition: var(--horloge-transition);
}

.ESNW-v4-options-toggle:hover {
    background-color: var(--horloge-hover-bg);
}

/* Panneau de contrôles avancés */
.ESNW-v4-controls {
    padding: var(--horloge-padding);
    border-top: 1px solid var(--horloge-border);
    background-color: var(--horloge-bg-primary);
    
    /* Masqué par défaut */
    display: none;
    
    /* Arrondi pour la cohérence visuelle */
    border-radius: 0 0 var(--horloge-border-radius) var(--horloge-border-radius);
}

/* ====================================================================
   GROUPES DE CONTRÔLES
==================================================================== */

.ESNW-v4-control-group {
    /* Espacement entre les groupes de contrôles */
    margin: 15px 0;
    
    /* Disposition flexible pour les labels et inputs */
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ESNW-v4-control-group label {
    /* Largeur minimale pour l'alignement */
    min-width: 120px;
    color: var(--horloge-text-primary);
    font-weight: 500;
    font-size: 14px;
}

.ESNW-v4-control-group input,
.ESNW-v4-control-group select {
    /* Styles unifiés pour les inputs */
    padding: 8px 12px;
    border: 2px solid var(--horloge-border);
    border-radius: 4px;
    background-color: var(--theme-background, white);
    color: var(--horloge-text-primary);
    font-size: 14px;
    
    /* Largeur flexible */
    flex: 1;
    min-width: 100px;
    
    /* Transition pour les effets de focus */
    transition: var(--horloge-transition);
}

.ESNW-v4-control-group input:focus,
.ESNW-v4-control-group select:focus {
    outline: none;
    border-color: var(--horloge-accent);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

/* ====================================================================
   GROUPES DE CASES À COCHER
==================================================================== */

.ESNW-v4-checkbox-group {
    /* Disposition flexible pour les checkboxes */
    display: flex;
    gap: 20px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.ESNW-v4-checkbox-label {
    /* Labels pour las cases à cocher */
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--horloge-text-primary);
    font-size: 14px;
    font-weight: 500;
    
    /* Transition pour les effets de survol */
    transition: var(--horloge-transition);
}

.ESNW-v4-checkbox-label:hover {
    color: var(--horloge-accent);
}

.ESNW-v4-checkbox-label input[type="checkbox"] {
    /* Styles personnalisés pour les checkboxes */
    width: 18px;
    height: 18px;
    accent-color: var(--horloge-accent);
    cursor: pointer;
}

/* ====================================================================
   RESPONSIVE DESIGN
==================================================================== */

/* Adaptation pour les écrans moyens */
@media (max-width: 768px) {
    .ESNW-v4-horloge-container {
        /* Réduction de la taille sur mobile */
        min-width: 200px;
        bottom: 10px;
        right: 10px;
    }
    
    .ESNW-v4-horloge {
        /* Réduction de la taille de police */
        font-size: calc(var(--horloge-font-size) * 0.8);
        padding: calc(var(--horloge-padding) * 0.75);
    }
    
    .ESNW-v4-control-group {
        /* Passage en colonne sur mobile */
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ESNW-v4-control-group label {
        min-width: auto;
    }
}

/* Adaptation pour les très petits écrans */
@media (max-width: 480px) {
    .ESNW-v4-horloge-container {
        min-width: 180px;
    }
    
    .ESNW-v4-checkbox-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .ESNW-v4-horloge {
        font-size: calc(var(--horloge-font-size) * 0.6);
        letter-spacing: 1px;
    }
}

/* ====================================================================
   ÉTATS SPÉCIAUX ET ANIMATIONS
==================================================================== */

/* Animation d'apparition */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ESNW-v4-horloge-container {
    animation: fadeIn 0.5s ease-out;
}

/* État de glissement actif */
.ESNW-v4-dragging {
    opacity: 0.8;
    transform: scale(1.05);
    z-index: 1001;
}

/* Effet de pulsation pour l'horloge */
.ESNW-v4-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* ====================================================================
   ACCESSIBILITÉ
==================================================================== */

/* Amélioration du contraste en mode sombre */
@media (prefers-color-scheme: dark) {
    :root {
        --horloge-bg-primary: var(--theme-background, #2c2c2c);
        --horloge-bg-secondary: var(--theme-surface, #404040);
        --horloge-text-primary: var(--theme-text-primary, #ffffff);
        --horloge-text-secondary: var(--theme-text-secondary, #cccccc);
        --horloge-border: var(--theme-border, #555555);
        --horloge-shadow: var(--theme-shadow, 0 2px 10px rgba(0,0,0,0.3));
    }
}

/* Réduction des animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Amélioration de l'accessibilité au focus */
.ESNW-v4-control-button:focus,
.ESNW-v4-options-toggle:focus,
.ESNW-v4-show-button:focus {
    outline: 2px solid var(--horloge-accent);
    outline-offset: 2px;
}

/* ====================================================================
   UTILITAIRES ET CLASSES D'AIDE
==================================================================== */

/* Classe pour masquer des éléments */
.ESNW-v4-hidden {
    display: none !important;
}

/* Classe pour la transparence */
.ESNW-v4-transparent {
    opacity: 0.7;
}

/* Classe pour le mode haute visibilité */
.ESNW-v4-high-contrast {
    border: 2px solid var(--horloge-accent);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

/*
================================================================================
FIN DU FICHIER CSS - HORLOGE INTERACTIVE V4.0
================================================================================
*/