/*
==========================================
STYLE SIMPLE POUR PAGE DE RÉVISIONS
==========================================

Ce fichier CSS style une page simple de révisions avec protection par mot de passe.
Pas de modifications nécessaires ici pour ajouter de nouveaux PDFs.
Modifiez uniquement le fichier HTML.

Pour changer le mot de passe, modifiez la variable PASSWORD dans le fichier HTML.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-blue: #2563eb;
    --math-color: #8b5cf6;
    --physics-color: #06b6d4;
    --background: #f8fafc;
    --white: #ffffff;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --border: #e2e8f0;
    --hover: #f1f5f9;
    --shadow: rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--background);
    color: var(--text-dark);
    line-height: 1.6;
}

/*
==========================================
STYLES POUR L'ÉCRAN DE MOT DE PASSE
==========================================
*/

.password-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, var(--primary-blue), var(--math-color));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.password-container {
    background: var(--white);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 450px;
    text-align: center;
    animation: slideUp 0.6s ease-out;
}

.password-header h1 {
    font-size: 2rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.password-header h1 i {
    color: var(--primary-blue);
}

.password-header p {
    color: var(--text-light);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.password-form {
    margin-bottom: 1.5rem;
}

.input-group {
    display: flex;
    background: var(--hover);
    border: 2px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.input-group:focus-within {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.input-group input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--text-dark);
    outline: none;
}

.input-group input::placeholder {
    color: var(--text-light);
}

.input-group input.error {
    color: #dc2626;
}

.password-btn {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.password-btn:hover {
    background: #1d4ed8;
    transform: translateX(2px);
}

.error-message {
    background: #fef2f2;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #fecaca;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    animation: slideDown 0.3s ease-out;
}

.password-hint {
    color: var(--text-light);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.password-hint i {
    color: var(--primary-blue);
}

.revisions-content {
    opacity: 0;
    animation: fadeInContent 0.8s ease-out 0.2s forwards;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* En-tête */
.header {
    background: linear-gradient(135deg, var(--primary-blue), var(--math-color));
    color: white;
    text-align: center;
    padding: 3rem 0;
    margin-bottom: 3rem;
    box-shadow: 0 4px 20px var(--shadow);
}

.header h1 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.header p {
    font-size: 1.2rem;
    opacity: 0.9;
    font-weight: 400;
}

/* Sections principales */
.subject-section {
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px var(--shadow);
}

.subject-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--border);
}

.subject-title.math {
    color: var(--math-color);
    border-bottom-color: var(--math-color);
}

.subject-title.physics {
    color: var(--physics-color);
    border-bottom-color: var(--physics-color);
}

.subject-title i {
    font-size: 1.8rem;
}

/* Liste des PDFs */
.pdf-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/*
==========================================
STYLE DES ÉLÉMENTS PDF
==========================================
Chaque PDF est affiché dans un "pdf-item"
Pas besoin de modifier ces styles pour ajouter de nouveaux PDFs
*/
.pdf-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--hover);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    gap: 2rem;
}

.pdf-item:hover {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow);
}

.pdf-content {
    flex: 1;
}

.pdf-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.pdf-content p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.5;
}

/* Bouton de lien PDF */
.pdf-link {
    background: var(--primary-blue);
    color: white;
    text-decoration: none;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 1rem;
}

.pdf-link:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.pdf-link i {
    font-size: 1.2rem;
    color: #ff6b6b;
}

/* Pied de page */
.footer {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-light);
    border-top: 1px solid var(--border);
    margin-top: 3rem;
}

/*
==========================================
RESPONSIVE DESIGN
==========================================
Adaptation pour mobiles et tablettes
*/
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .header h1 {
        font-size: 2rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .header p {
        font-size: 1rem;
    }

    .subject-section {
        padding: 1.5rem;
    }

    .subject-title {
        font-size: 1.6rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Sur mobile, les éléments PDF deviennent verticaux */
    .pdf-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .pdf-link {
        align-self: stretch;
        justify-content: center;
    }

    .pdf-content h3 {
        font-size: 1.2rem;
    }

    .pdf-content p {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 2rem 0;
    }

    .header h1 {
        font-size: 1.8rem;
    }

    .subject-section {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .pdf-item {
        padding: 1rem;
    }
}

/*
==========================================
ANIMATIONS ET EFFETS
==========================================
*/

/* Animations pour l'écran de mot de passe */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInContent {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Animations pour la page de révisions */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subject-section {
    animation: fadeInUp 0.6s ease forwards;
}

.subject-section:nth-child(2) {
    animation-delay: 0.1s;
}

.subject-section:nth-child(3) {
    animation-delay: 0.2s;
}

/* Effet de focus pour l'accessibilité */
.pdf-link:focus {
    outline: 3px solid rgba(37, 99, 235, 0.5);
    outline-offset: 2px;
}

/* Responsive pour l'écran de mot de passe */
@media (max-width: 480px) {
    .password-container {
        padding: 2rem;
        margin: 1rem;
    }

    .password-header h1 {
        font-size: 1.6rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .password-header p {
        font-size: 1rem;
    }

    .input-group {
        max-width: 100%;
    }

    .input-group input {
        min-width: 0;
        padding: 0.8rem 1rem;
    }

    .password-btn {
        padding: 0.8rem 1rem;
    }
}