/* ============================================================================
 * TropEasy — refonte UX/UI des calculateurs (TVA, IMC, Conversion, Mots, MdP)
 *
 * Approche additive : pas de modification des 5 templates ni des JS.
 * Spécificité accrue (`.calc-card .xxx`) pour battre les <style> blocks
 * inline présents dans chaque template, sans !important.
 *
 * Identité TropEasy : --primary #2563EB, --success #10B981, --accent #F59E0B.
 * Chargé après style.css via base_calculator.html.
 * ============================================================================ */

/* ---- Hero ------------------------------------------------------------- */
.calc-hero {
    text-align: center;
    padding: 2.5rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.calc-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #DCFCE7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
    margin-bottom: 0.25rem;
}
.calc-hero-icon svg { width: 28px; height: 28px; }
.calc-hero h1 {
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 800;
    margin: 0;
}
.calc-hero p {
    color: var(--text-light);
    font-size: 1.0625rem;
    max-width: 600px;
    margin: 0;
}
@media (min-width: 720px) {
    .calc-hero h1 { font-size: 2rem; }
}

/* ---- Card de formulaire ------------------------------------------------ */
.calc-card {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
@media (min-width: 720px) {
    .calc-card { padding: 28px 32px; }
}
.calc-card .calc-card-title {
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Tabs (mode-cards des calculateurs) ------------------------------- */
.calc-card .calc-mode-list,
.calc-card .calc-rate-list,
.calc-card .converter-categories {
    background: #F1F5F9;
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
    margin-bottom: 1.25rem;
}
.calc-card .calc-mode-list .mode-card,
.calc-card .calc-rate-list .mode-card,
.calc-card .converter-categories .mode-card {
    background: transparent;
    border: none;
    padding: 0.625rem 0.5rem;
    border-radius: 10px;
    font-size: 0.875rem;
    transition: background var(--transition), box-shadow var(--transition);
}
.calc-card .calc-mode-list .mode-card:hover,
.calc-card .calc-rate-list .mode-card:hover,
.calc-card .converter-categories .mode-card:hover {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    transform: none;
}
.calc-card .calc-mode-list .mode-card.active,
.calc-card .calc-rate-list .mode-card.active,
.calc-card .converter-categories .mode-card.active {
    background: var(--bg-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    color: var(--primary);
}
.calc-card .calc-mode-list .mode-card .mode-title,
.calc-card .calc-rate-list .mode-card .mode-title,
.calc-card .converter-categories .mode-card .mode-title {
    font-weight: 600;
    font-size: 0.875rem;
}
.calc-card .calc-mode-list .mode-card .mode-desc,
.calc-card .calc-rate-list .mode-card .mode-desc {
    font-size: 0.6875rem;
    margin-top: 0.125rem;
    color: var(--text-lighter);
}
.calc-card .calc-mode-list .mode-card.active .mode-desc,
.calc-card .calc-rate-list .mode-card.active .mode-desc {
    color: var(--text-light);
}

@media (max-width: 600px) {
    .calc-card .calc-mode-list,
    .calc-card .calc-rate-list,
    .calc-card .converter-categories {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .calc-card .calc-mode-list .mode-card,
    .calc-card .calc-rate-list .mode-card,
    .calc-card .converter-categories .mode-card {
        flex: 0 0 auto;
        min-width: 96px;
    }
}

/* ---- Inputs ------------------------------------------------------------ */
.calc-card .calc-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 0.4375rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.calc-card .calc-input {
    padding: 0.875rem 2.75rem 0.875rem 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.calc-card .calc-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.calc-card .calc-suffix {
    color: var(--text-light);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* ---- Result-card (gradient bleu) — TVA + IMC -------------------------- */
.calc-card .calc-result {
    background: linear-gradient(135deg, var(--primary) 0%, #1E40AF 100%);
    border: none;
    border-radius: 16px;
    padding: 28px 24px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
}
.calc-card .calc-result .calc-result-line {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem 0;
    border-top: none;
}
.calc-card .calc-result .calc-result-line + .calc-result-line {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.calc-card .calc-result .calc-result-label {
    font-size: 0.875rem;
    font-weight: 500;
}
.calc-card .calc-result .calc-result-value {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
}
.calc-card .calc-result .calc-result-line.highlight {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.calc-card .calc-result .calc-result-line.highlight .calc-result-label {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.25rem;
}
.calc-card .calc-result .calc-result-line.highlight .calc-result-value {
    font-size: 2.625rem;
    font-weight: 500;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
@media (max-width: 640px) {
    .calc-card .calc-result .calc-result-line.highlight .calc-result-value {
        font-size: 2rem;
    }
}

/* ---- Custom rate ------------------------------------------------------- */
.calc-card .calc-custom-rate { margin-top: 0.875rem; }
.calc-card .calc-custom-toggle {
    color: var(--text-light);
    font-size: 0.875rem;
}
.calc-card .calc-custom-input {
    margin-top: 0.625rem;
    max-width: 220px;
}

/* ---- IMC : layout uniquement -----------------------------------------
 * Les couleurs (background et text) par catégorie sont gérées dans le
 * <style> inline du template calculateur_imc.html (fond clair coloré +
 * text foncé contrasté). Ici on se limite au layout responsive du form
 * et à un placeholder propre pour l'état empty. Surtout NE PAS imposer
 * de color au parent .imc-result : ça écraserait les couleurs de texte
 * spécifiques à chaque catégorie et donnerait du texte blanc invisible
 * sur les fonds clairs ambre/vert/bleu/rouge.
 * ---------------------------------------------------------------------- */
.calc-card .imc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 480px) {
    .calc-card .imc-row { grid-template-columns: 1fr; }
}
/* Placeholder discret quand aucune saisie — le <style> inline du template
   pose un fond #F8FAFC / border #E2E8F0, on ajoute juste un text gris
   plus marqué pour que le "Saisissez votre taille et votre poids" se lise
   bien. */
.calc-card .imc-result[data-category="empty"] .imc-result-label,
.calc-card .imc-result[data-category="empty"] .imc-result-number,
.calc-card .imc-result[data-category="empty"] .imc-result-category {
    color: #94A3B8;
}
/* Couleurs explicites par catégorie sur le parent (pour bonus de
   contraste, et parce que .imc-result-label / .imc-result-number du
   <style> inline ont des color spécifiques qu'on respecte ici via
   inherit). On force la specificité (0,3,0) pour battre proprement
   sans !important. */
.calc-card .imc-result[data-category="insuffisant"] { color: #1E40AF; }
.calc-card .imc-result[data-category="normal"]      { color: #166534; }
.calc-card .imc-result[data-category="surpoids"]    { color: #92400E; }
.calc-card .imc-result[data-category="obesite"]     { color: #991B1B; }
/* Le label "VOTRE IMC" et le grand chiffre héritent du parent quand le
   <style> inline ne les surcharge pas — mais l'inline les colore en
   #475569 / #1E293B (lisibles sur tous les fonds clairs), donc c'est OK. */

/* ---- Compteur de mots : stats grid ------------------------------------ */
.calc-card.counter-card .stat-value,
.counter-card .stat-value {
    font-size: 2rem !important;       /* override inline si présent */
    font-weight: 500;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.counter-card .stat-card,
.calc-card.counter-card .stats-grid > div {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}
.counter-card .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ---- Générateur mdp : password output --------------------------------- */
.calc-card.pwd-card .password-display,
.pwd-card .password-display {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: 14px;
    padding: 1.25rem;
}
.pwd-card .password-output {
    background: transparent;
    border: none;
    color: #F8FAFC !important;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
}
@media (max-width: 640px) {
    .pwd-card .password-output { font-size: 1.25rem; }
}
.pwd-card .password-action-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #F8FAFC !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.pwd-card .password-action-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
.pwd-card .strength-meter {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}
.pwd-card .pwd-generate-btn {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
}

/* ---- Convertisseur : selects + swap ----------------------------------- */
.calc-card.converter-card .converter-select,
.converter-card .converter-select {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    background: var(--bg-white);
}
.converter-card .converter-output {
    background: #F8FAFC !important;
    color: var(--primary);
    font-weight: 600;
}
.converter-card .converter-swap {
    background: var(--primary-light);
    color: var(--primary);
    border: none;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
}

/* ---- Reassurance footer (calculateurs) -------------------------------- */
.calc-reassurance {
    max-width: 720px;
    margin: 1.5rem auto 2.5rem;
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-light);
    font-size: 0.875rem;
    text-align: center;
}
.calc-reassurance svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--success);
}