/*------------------------------------------------------------------------------
* DÉFINITION DE LA PALETTE DE COULEURS
*
* Cette section définit les variables de couleur personnalisées pour un thème YunoHost.
*
* Palette :
* --text-color: Couleur de texte principale (orange/dorée)
* --background-color: Couleur d'arrière-plan principale (gris foncé)
* --accent-color-links: Couleur d'accent pour les liens (violet)
* --accent-color-buttons: Couleur d'accent pour les boutons (marron foncé)
* --panel-bg-color: Couleur d'arrière-plan des panneaux, cartes et formulaires (gris moyen)
------------------------------------------------------------------------------*/
:root {
    --text-color: rgb(255, 170, 60);
    --background-color: #1a1a1a;
    --accent-color-links: #A864FF;
    --accent-color-buttons: #4A3B33;
    --panel-bg-color: #333;
}

/*------------------------------------------------------------------------------
* APPLICATION DES COULEURS ET AJOUT DES EFFETS DE TERMINAL
*
* Ces règles CSS ciblent les éléments de l'interface SSO de YunoHost pour appliquer
* la palette de couleurs et les effets visuels de terminal.
* Version 8.0
------------------------------------------------------------------------------*/

/* --- EFFETS ET ANIMATIONS --- */

/* Animation de scintillement pour le texte et les éléments */
@keyframes flicker {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 0.5px var(--text-color);
    }
    50% {
        opacity: 0.99;
        text-shadow: none;
    }
    75% {
        opacity: 1;
        text-shadow: 0 0 0.5px var(--text-color), 0 0 1px var(--text-color);
    }
}

/* Animation d'apparition du texte */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* Animation de curseur clignotant */
@keyframes blink-caret {
    from, to { border-right-color: transparent }
    50% { border-right-color: var(--text-color); }
}

/* --- STYLES GÉNÉRAUX ET EFFETS --- */

/* Arrière-plan de la page et couleur de texte de base */
body {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    font-family: 'VT323', monospace, sans-serif !important;
    animation: flicker 4s infinite alternate;
}

/* Éléments de texte courants */
h1, h2, h3, p, label, a, .brand, .footer-link {
    color: var(--text-color) !important;
    animation: flicker 4s infinite alternate;
}

/* Application de l'effet de saisie au titre principal */
h1 {
    overflow: hidden;
    white-space: nowrap;
    border-right: 0.15em solid var(--text-color);
    animation: typing 2.5s steps(30, end), blink-caret 1.2s step-end infinite;
    animation-delay: 0.5s;
}

/* Couleurs de fond pour les panneaux, cartes et formulaires */
.panel {
    background-color: var(--panel-bg-color) !important;
}

/* Couleurs des boutons */
.btn-primary, .btn-secondary, button {
    background-color: var(--accent-color-buttons) !important;
    border-color: var(--accent-color-buttons) !important;
    color: var(--text-color) !important;
}

.btn-primary:hover, .btn-secondary:hover, button:hover {
    background-color: var(--accent-color-buttons) !important;
    border-color: var(--accent-color-buttons) !important;
    opacity: 0.8 !important;
}

/* Couleurs des liens */
a {
    color: var(--accent-color-links) !important;
}

a:hover {
    color: var(--accent-color-links) !important;
}

/* Couleurs des formulaires et des champs */
.form-control, .input-group-text {
    background-color: var(--panel-bg-color) !important;
    color: var(--text-color) !important;
}

/* Correction des couleurs d'icônes */
.ynh-icon {
    fill: var(--text-color) !important;
}

/* Styles spécifiques aux pages publiques (si applicable) */
.main-container {
    max-width: 1280px;
    margin: auto;
    padding: 1rem;
}

.hero-section, .cta-section, .card, .apps-section {
    background-color: var(--background-color);
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
    padding: 1rem;
}

.hero-section {
    text-align: center;
    padding: 4rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.card {
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.cta-section {
    text-align: center;
    margin-top: 3rem;
    padding: 2.5rem;
}

.apps-section {
    text-align: center;
    margin-top: 3rem;
    padding: 2.5rem;
}

.cv-link a {
    font-size: 40px;
}