/* =========================================================
   assets/css/outils/password-generator.css - Style pour le Générateur MDP
   (Nouveau style "Minimaliste/Cyber V2")
   ========================================================= */

.tool-section { /* Renommée pour être générique aux outils */
    padding-top: 60px;
    padding-bottom: 60px;
    color: var(--color-text-light); /* Texte clair par défaut */
}

/* Titres principaux (h1 et h2) */
.tool-section h1 { /* Style du terminal-heading déjà dans global.css */
    margin-bottom: 10px;
}
.tool-section h2 {
    font-family: var(--font-body); /* Police plus lisible pour le sous-titre */
    color: var(--color-text-grey); /* Gris atténué */
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.3em;
    font-weight: 400;
}
.tool-section h2 i {
    margin-right: 10px;
    color: var(--color-accent); /* Vert fluo */
}


/* --- Layout Principal de l'Outil --- */
.tool-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* Espacement entre les panneaux */
    max-width: 1100px; /* Largeur pour contenir les deux sections */
    margin: 0 auto;
    background-color: transparent; /* Pas de fond pour le layout global */
}

/* Panneaux individuels (settings, display) */
.tool-panel {
    background-color: var(--color-darker); /* Fond très sombre */
    padding: 30px;
    border: 1px solid var(--color-line); /* Bordure subtilement lumineuse */
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.05); /* Glow très léger */
    border-radius: 6px; /* Légers coins arrondis pour la douceur */
    flex: 1; /* Prend l'espace disponible */
    min-width: 320px; /* Largeur minimale pour éviter l'écrasement */
}

/* Flexibilité des panneaux */
.generator-layout .settings-panel {
    flex: 1; /* Panneau des options */
}
.generator-layout .display-panel {
    flex: 2; /* Panneau d'affichage et d'analyse du mot de passe généré */
}


/* Titres des sous-sections (h3) */
h3, h4, h5, h6 {
    font-family: var(--font-terminal); /* Police terminal */
    color: var(--color-secondary); /* Vert clair */
    margin-bottom: 25px;
    border-bottom: 1px dashed var(--color-line); /* Ligne pointillée */
    padding-bottom: 15px;
    font-weight: normal; /* Plus léger */
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.15); /* Léger glow */
}
h3 i, h4 i, h5 i, h6 i { 
    margin-right: 10px; 
    color: var(--color-accent); /* Icônes en vert fluo */
}
h4 { font-size: 1.2em; margin-top: 30px; } /* Titres d'analyse */
h5 { font-size: 1.1em; margin-top: 25px; border-bottom: none; } /* Titre des temps de craquage */
h6 { font-size: 1em; margin-top: 20px; border-bottom: none; color: var(--color-text-grey); } /* Titre des formules */


/* --- Groupe d'options (Slider, Checkboxes) --- */
.option-group {
    margin-bottom: 30px;
}
.option-group label {
    display: block;
    margin-bottom: 10px;
    color: var(--color-text-light);
    font-family: var(--font-body); /* Police plus douce */
    font-size: 1em;
}

/* Style du Slider */
.slider {
    width: 100%;
    height: 8px; /* Plus épais */
    border-radius: 4px;
    background: #333; /* Fond sombre */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: grab;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; /* Plus grand */
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    cursor: grab;
    box-shadow: 0 0 10px var(--color-accent-transparent); /* Glow vert léger */
    transition: background-color 0.2s, box-shadow 0.2s;
}
.slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    cursor: grab;
    box-shadow: 0 0 10px var(--color-accent-transparent);
    transition: background-color 0.2s, box-shadow 0.2s;
}
.slider:hover::-webkit-slider-thumb, 
.slider:active::-webkit-slider-thumb,
.slider:hover::-moz-range-thumb, 
.slider:active::-moz-range-thumb {
    background: var(--color-secondary); /* Vert plus doux au survol */
    box-shadow: 0 0 15px var(--color-accent-transparent); /* Glow plus fort */
    transform: scale(1.1);
    cursor: grabbing;
}

#lengthValue {
    font-family: var(--font-terminal);
    color: var(--color-accent);
    font-weight: bold;
    text-shadow: 0 0 5px var(--color-accent-transparent);
    margin-left: 8px; /* Plus d'espace */
}

/* Style des Checkboxes */
.checkbox-group label {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
    color: var(--color-text-light);
    font-family: var(--font-body);
}
.checkbox-group input[type="checkbox"] {
    margin-right: 15px;
    width: 20px; /* Plus grand */
    height: 20px;
    accent-color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 3px;
    cursor: pointer;
    background-color: var(--color-darker);
    box-shadow: 0 0 5px var(--color-accent-transparent);
}
.checkbox-group input[type="checkbox"]:checked {
    box-shadow: 0 0 10px var(--color-accent-transparent); /* Glow plus fort */
}


/* --- Zone de Mot de Passe Généré --- */
.password-display-box {
    display: flex;
    margin-bottom: 15px;
    border: 1px solid var(--color-secondary); /* Bordure vert clair */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 0 8px rgba(0, 255, 65, 0.1); /* Glow interne subtil */
}
#generatedPasswordOutput {
    flex-grow: 1;
    padding: 15px; /* Plus de padding */
    font-size: 1.3em; /* Plus grand */
    font-family: var(--font-terminal);
    background-color: #0c0c0c; /* Fond très très sombre pour l'input */
    border: none;
    color: var(--color-accent);
    text-shadow: 0 0 8px var(--color-accent-transparent);
    overflow-x: auto;
    line-height: 1.4;
}

/* Bouton Copier */
#copyGeneratedBtn {
    padding: 0 20px; /* Plus de padding */
    background-color: var(--color-secondary);
    border: none;
    color: var(--color-darker);
    cursor: pointer;
    font-size: 1.3em; /* Icône plus grande */
    transition: background-color 0.2s, box-shadow 0.2s;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#copyGeneratedBtn:hover {
    background-color: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent-transparent);
    color: var(--color-darker);
}

.copy-feedback {
    font-size: 0.9em;
    color: var(--color-accent);
    height: 1.5em;
    font-family: var(--font-terminal);
    text-shadow: 0 0 5px var(--color-accent-transparent);
    margin-top: 5px;
    text-align: right;
    padding-right: 5px;
}

.disclaimer {
    font-size: 0.85em;
    color: var(--color-text-grey);
    margin-top: 25px;
    font-style: italic;
    line-height: 1.4;
    font-family: var(--font-body);
}

/* --- Analyse de Force du Générateur --- */
.generated-password-analysis {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed var(--color-line); /* Ligne pointillée */
}

/* Grille des éléments d'analyse */
.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Min 200px */
    gap: 20px;
    margin-bottom: 20px;
}

.analysis-item {
    background-color: #222; /* Fond sombre */
    padding: 15px 20px;
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.analysis-item .label {
    display: block;
    font-size: 0.85em;
    color: var(--color-text-grey);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-family: var(--font-body);
}
.analysis-item .value {
    display: block;
    font-size: 1.2em;
    font-family: var(--font-terminal);
    color: var(--color-secondary);
    font-weight: bold;
    text-shadow: 0 0 5px var(--color-accent-transparent);
}

.time-grid .value {
    font-size: 1.1em;
}

/* Styles pour la force estimée (changement dynamique de couleur) */
#strengthText {
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}
#strengthText.very-weak { color: #ff4d4d; text-shadow: 0 0 5px rgba(255, 77, 77, 0.5); }
#strengthText.weak { color: #ffa500; text-shadow: 0 0 5px rgba(255, 165, 0, 0.5); }
#strengthText.medium { color: #ffd700; text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
#strengthText.strong { color: #90ee90; text-shadow: 0 0 5px rgba(144, 238, 144, 0.5); }
#strengthText.very-strong { color: var(--color-accent); text-shadow: 0 0 8px var(--color-accent); }

/* --- Section des Formules --- */
.formulas {
    margin-top: 30px;
    padding: 20px;
    background-color: #111; /* Fond très sombre */
    border: 1px dashed var(--color-line);
    border-radius: 4px;
    font-size: 0.9em;
    line-height: 1.6;
}
.formulas h6 {
    font-family: var(--font-body); /* Titre des formules plus discret */
    color: var(--color-text-grey);
    margin-bottom: 15px;
    font-weight: 600;
}
.formulas p {
    margin-bottom: 8px;
    font-family: var(--font-terminal);
    color: var(--color-text-light);
}
.formulas strong {
    color: var(--color-accent);
    font-weight: bold;
}
.formulas small {
    display: block;
    margin-top: 15px;
    color: var(--color-text-grey);
    font-style: italic;
    font-family: var(--font-body);
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .tool-layout {
        flex-direction: column;
        gap: 30px; /* Moins d'espace sur mobile */
    }
    .tool-panel {
        min-width: unset;
        width: 100%;
        padding: 20px; /* Moins de padding sur mobile */
    }
    .analysis-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    #generatedPasswordOutput {
        font-size: 1.1em;
        padding: 12px;
    }
    #copyGeneratedBtn {
        font-size: 1.1em;
        min-width: 45px;
        padding: 0 15px;
    }
}