/*
 * SDE Symbolic Solver — style.css
 *
 * FIX BUG 13: L'import Google Fonts de "Palatino" a été supprimé car Palatino
 * n'est PAS disponible sur Google Fonts (c'est une police système propriétaire Adobe/Apple).
 * L'import échouait silencieusement. On utilise désormais EB Garamond (disponible sur GFonts,
 * chargée dans index.html) avec une pile de fallbacks appropriée.
 */

/* ─── Typographie de base ─────────────────────────────────────────────────── */
body {
    font-family: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
}

select,
input,
textarea,
button {
    font-family: inherit;
}

/* ─── Formula box ─────────────────────────────────────────────────────────── */
.formula-box {
    background-color: #f0fdfa;
    border-left: 4px solid #349192;
    padding: 1rem;
    margin: 0.5rem 0;
    border-radius: 0.25rem;
    max-height: 500px;
    overflow-y: auto;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.formula-box.collapsed {
    max-height: 100px;
    overflow-y: hidden;
    /* AMÉLIORATION: dégradé pour indiquer que le contenu est tronqué */
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Scrollbar personnalisée */
.formula-box::-webkit-scrollbar       { width: 6px; }
.formula-box::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.formula-box::-webkit-scrollbar-thumb { background: #349192; border-radius: 3px; }
.formula-box::-webkit-scrollbar-thumb:hover { background: #2a7d7e; }

/* ─── Expand button ───────────────────────────────────────────────────────── */
.expand-btn {
    background: rgba(52, 145, 146, 0.1);
    border: 1px solid rgba(52, 145, 146, 0.3);
    color: #349192;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.expand-btn:hover {
    background: rgba(52, 145, 146, 0.25);
}

/* ─── Solution steps ──────────────────────────────────────────────────────── */
.solution-step {
    border: 1px solid #e5e7eb;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    animation: fadeInUp 0.4s ease-out both;
}

/* ─── Loading dots ────────────────────────────────────────────────────────── */
.loading-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%,  20% { content: '';    }
    40%       { content: '.';  }
    60%       { content: '..'; }
    80%, 100% { content: '...'; }
}

/* ─── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);     }
}

/* ─── Download button ─────────────────────────────────────────────────────── */
.download-btn {
    background: rgba(52, 145, 146, 0.1);
    border: 1px solid #349192;
    color: #349192;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.download-btn:hover {
    background: #349192;
    color: white;
}

/* ─── Couleurs Tailwind personnalisées (teal #349192) ─────────────────────── */
.bg-teal-50  { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-500 { background-color: rgb(72, 135, 136); }
.bg-teal-600 { background-color: rgb(52, 145, 146); }
.bg-teal-700 { background-color: rgb(40, 115, 116); }
.bg-teal-800 { background-color: rgb(28,  90,  91); }
.bg-teal-900 { background-color: rgb(18,  68,  69); }

.text-teal-600 { color: rgb(52, 145, 146); }
.text-teal-700 { color: rgb(40, 115, 116); }

.border-teal-200 { border-color: rgb(153, 246, 228); }

.hover\:bg-teal-700:hover { background-color: rgb(40, 115, 116); }
.hover\:bg-teal-900:hover { background-color: rgb(18,  68,  69); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .formula-box {
        font-size: 0.875rem;
        padding: 0.75rem;
    }
    .solution-step {
        margin-bottom: 0.75rem;
    }
}

/* ─── Impression ──────────────────────────────────────────────────────────── */
@media print {
    .no-print { display: none !important; }
    nav, footer { display: none !important; }
    .formula-box {
        border: 1px solid #ccc;
        max-height: none;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
        page-break-inside: avoid;
    }
    .formula-box.collapsed {
        max-height: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
}