/* ==================================================
   FICHIER DE STYLE UNIFIÉ - CARNET DE RECETTES

   SOMMAIRE (Raccourcis) :
   1. Variables et Styles de base
   2. Header
   3. Navigation
   4. Footer
   5. Responsive (Mobile)
   6. Styles pour la page d'accueil (Index)
   7. Styles pour la page de Connexion/Inscription
   8. Styles pour la page de Recherche
   9. Styles pour la page Catégorie
   10. Styles pour les Formulaires de Recette
   11. Styles pour l'affichage de Recette
   12. Styles pour les pages Admin & Assistant
================================================== */

/* 1. Variables et Styles de base
-------------------------------------------------- */
:root {
    --red-primary: #b91c1c; /* Rouge principal (plus foncé) */
    --red-light: #fef2f2;   /* Rouge très clair pour les fonds */
    --red-text: #dc2626;    /* Rouge pour le texte ou les accents */
    --text-color: #374151;  /* Couleur de texte standard */
    --border-color: #e5e7eb;/* Couleur de bordure */
    --background-color: #f9fafb; /* Fond général du site */
    --white: #ffffff;
    --header-height: 65px;
    --font-sans: 'Inter', sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding-top: var(--header-height); /* Espace pour le header fixe */
    box-sizing: border-box; /* Correction pour le padding */
}

*, *:before, *:after {
    box-sizing: inherit;
}

.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    min-height: calc(100vh - var(--header-height) - 100px); /* 100px pour le footer */
}

/* 2. Header
-------------------------------------------------- */
.site-header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--red-primary);
}

.brand-icon {
    font-size: 1.5rem;
}

/* 3. Navigation
-------------------------------------------------- */
.main-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-link {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}

.nav-link:hover, .dropdown-toggle:hover {
    background-color: var(--red-light);
    color: var(--red-primary);
}

/* Barre de recherche */
.search-form {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
}

.search-input {
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    outline: none;
    background: transparent;
}

.search-button {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 0.5rem;
}

/* Menus déroulants */
.nav-dropdown {
    position: relative;
}

.dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1rem;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-width: 200px;
    padding: 0.5rem;
    z-index: 1001;
}

.dropdown-content a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 6px;
}

.dropdown-content a:hover {
    background-color: var(--red-light);
}

/* Menu utilisateur spécifique */
.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--red-primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* 4. Footer
-------------------------------------------------- */
.site-footer {
    background-color: var(--red-light);
    color: var(--red-primary);
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--border-color);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    color: var(--red-primary);
    text-decoration: none;
    font-weight: 600;
}

.footer-copyright p, .footer-copyright span {
    margin: 0;
    font-size: 0.9rem;
}

/* 5. Responsive (Mobile)
-------------------------------------------------- */
.mobile-menu-toggle {
    display: none; /* Caché par défaut */
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--red-primary);
}

@media (max-width: 850px) {
    .mobile-menu-toggle {
        display: block; /* Apparaît sur mobile */
    }

    .main-nav {
        display: none; /* Cache la nav par défaut sur mobile */
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background-color: var(--white);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .main-nav.is-open {
        display: flex; /* Affiche la nav quand active */
    }
    
    .search-form {
        width: 100%;
        margin-bottom: 1rem;
    }

    .nav-dropdown {
        width: 100%;
    }

    .dropdown-toggle {
        width: 100%;
        text-align: left;
    }

    .dropdown-content {
        position: static;
        border: none;
        box-shadow: none;
        padding-left: 1.5rem; /* Indentation */
    }
    
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}

/* 6. Styles pour la page d'accueil (Index)
-------------------------------------------------- */
.welcome-banner {
    background-color: var(--red-light);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 3rem;
    border: 1px solid var(--red-primary);
}
.welcome-banner h1 { color: var(--red-primary); margin-bottom: 0.5rem; }
.welcome-banner p { font-size: 1.1rem; color: var(--text-color); margin-bottom: 1.5rem; }
.btn-add-recipe {
    background-color: var(--red-primary);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.2s;
}
.btn-add-recipe:hover { background-color: #991b1b; }
.recipes-section { padding: 0 1rem; }
.recipes-section h2 { font-size: 2rem; text-align: center; margin-bottom: 2rem; color: var(--red-primary); }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.recipe-card-simple { background-color: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.07); transition: transform 0.2s, box-shadow 0.2s; }
.recipe-card-simple:hover { transform: translateY(-5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.recipe-card-simple .recipe-link { text-decoration: none; color: inherit; display: block; }
.recipe-card-simple .recipe-image { height: 180px; position: relative; }
.recipe-card-simple .recipe-image img { width: 100%; height: 100%; object-fit: cover; }
.recipe-placeholder { width: 100%; height: 100%; background-color: var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--text-color); opacity: 0.5; }
.recipe-category-badge { position: absolute; top: 0.75rem; right: 0.75rem; background-color: rgba(255, 255, 255, 0.9); color: var(--red-primary); padding: 0.25rem 0.75rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; }
.recipe-card-simple .recipe-content { padding: 1rem; }
.recipe-card-simple h3 { margin: 0 0 0.25rem 0; font-size: 1.2rem; }
.recipe-card-simple .recipe-author { font-size: 0.9rem; color: #6b7280; margin: 0; }
.empty-state { text-align: center; padding: 3rem 1rem; background-color: var(--background-color); border-radius: 12px; }

/* 7. Styles pour la page de Connexion/Inscription
-------------------------------------------------- */
.login-page-body { background-color: var(--background-color); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; padding-top: 0; }
.login-form-container { width: 100%; max-width: 400px; background-color: var(--white); padding: 2.5rem 2rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.login-header { text-align: center; margin-bottom: 2rem; }
.login-header h1 { color: var(--red-primary); font-size: 1.5rem; margin-bottom: 0.5rem; }
.login-header p { color: var(--text-color); }
.alert-message { padding: 1rem; margin-bottom: 1.5rem; border-radius: 8px; font-weight: 600; }
.alert-message.error { background-color: var(--red-light); color: var(--red-primary); border: 1px solid var(--red-primary); }
.alert-message.success { background-color: #dcfce7; color: #166534; border: 1px solid #166534; }
.login-form .form-group { margin-bottom: 1.25rem; }
.login-form label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.login-form input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; }
.login-form input:focus { outline: none; border-color: var(--red-primary); box-shadow: 0 0 0 3px var(--red-light); }
.btn-submit { width: 100%; padding: 0.8rem 1rem; background-color: var(--red-primary); color: var(--white); border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.btn-submit:hover { background-color: #991b1b; }
.login-footer { margin-top: 2rem; text-align: center; font-size: 0.9rem; }
.login-footer a { display: block; color: var(--red-primary); text-decoration: none; }
.login-footer a:first-child { margin-bottom: 0.5rem; }
.login-footer a:hover { text-decoration: underline; }

/* 8. Styles pour la page de Recherche
-------------------------------------------------- */
.search-page-container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
.search-form-simple { background-color: var(--red-light); padding: 2rem; border-radius: 12px; text-align: center; margin-bottom: 3rem; }
.search-form-simple h1 { color: var(--red-primary); margin-bottom: 1.5rem; }
.search-form-simple form { display: flex; justify-content: center; max-width: 600px; margin: 0 auto; border: 1px solid var(--border-color); border-radius: 30px; overflow: hidden; background-color: var(--white); }
.search-form-simple input { flex-grow: 1; border: none; padding: 0.8rem 1.2rem; font-size: 1rem; outline: none; }
.search-form-simple button { background-color: var(--red-primary); color: var(--white); border: none; padding: 0 1.5rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.search-form-simple button:hover { background-color: #991b1b; }
.recipes-section h2 { font-size: 1.5rem; }

/* 9. Styles pour la page Catégorie
-------------------------------------------------- */
.category-page-container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
.category-header-simple { text-align: center; margin-bottom: 3rem; }
.category-header-simple h1 { font-size: 2.5rem; color: var(--red-primary); margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.category-header-simple .category-icon { font-size: 3rem; }
.category-header-simple p { font-size: 1.1rem; color: var(--text-color); }

/* 10. Styles pour les Formulaires de Recette
-------------------------------------------------- */
.recipe-form-container { max-width: 800px; margin: 2rem auto; padding: 2rem; }
.recipe-form-container h1 { text-align: center; color: var(--red-primary); margin-bottom: 2rem; }
.form-section { background-color: var(--white); padding: 2rem; border-radius: 12px; margin-bottom: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.form-section h2 { font-size: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-group { margin-bottom: 1rem; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--red-primary); box-shadow: 0 0 0 3px var(--red-light); }
.dynamic-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.dynamic-item .form-group { flex-grow: 1; margin-bottom: 0; }
.dynamic-item .form-group label { font-size: 0.9rem; color: #6b7280; }
.ingredient-fields { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; width: 100%; }
.step-number { font-size: 1.2rem; font-weight: 600; color: var(--red-primary); padding-top: 2rem; }
.btn-remove-line { background: var(--red-light); color: var(--red-primary); border: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem; line-height: 1; margin-top: 1.75rem;}
.btn-add-line { width: 100%; padding: 0.75rem; font-weight: 600; color: var(--red-primary); background-color: var(--white); border: 2px dashed var(--red-primary); cursor: pointer; border-radius: 8px; margin-top: 1rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
.btn-cancel { background-color: var(--border-color); color: var(--text-color); padding: 0.8rem 1.5rem; border-radius: 8px; text-decoration: none; border: none; font-size: 1rem; font-weight: 600; cursor: pointer; }

@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .ingredient-fields { grid-template-columns: 1fr; }
    .recipe-form-container { padding: 1rem; } /* Correction pour mobile */
}

/* 11. Styles pour l'affichage de Recette
-------------------------------------------------- */
.recipe-display-container { max-width: 800px; margin: 2rem auto; padding: 1rem; }
.recipe-card-full { background-color: var(--white); border-radius: 12px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); overflow: hidden; }
.recipe-header-full { padding: 2rem; }
.category-link-display { display: inline-block; background-color: var(--red-light); color: var(--red-primary); padding: 0.25rem 0.75rem; border-radius: 15px; text-decoration: none; font-weight: 600; font-size: 0.9rem; margin-bottom: 1rem; }
.recipe-header-full h1 { font-size: 2.5rem; margin: 0 0 0.5rem 0; }
.author-info { color: #6b7280; margin-bottom: 1rem; }
.recipe-description-display { font-size: 1.1rem; line-height: 1.6; border-left: 3px solid var(--red-primary); padding-left: 1rem; margin: 1.5rem 0; }
.recipe-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }
.btn-action-edit, .btn-action-delete { padding: 0.6rem 1.2rem; text-decoration: none; font-weight: 600; border-radius: 8px; }
.btn-action-edit { background-color: var(--text-color); color: var(--white); }
.btn-action-delete { background-color: var(--red-primary); color: var(--white); border: none; cursor: pointer; font-family: var(--font-sans); font-size: inherit; }
.recipe-image-full img { width: 100%; height: auto; max-height: 400px; object-fit: cover; }
.recipe-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background-color: var(--border-color); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.detail-item { background-color: var(--white); padding: 1rem; text-align: center; }
.detail-item span { display: block; color: #6b7280; font-size: 0.9rem; }
.detail-item strong { font-size: 1.1rem; }
.recipe-body { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding: 2rem; }
.recipe-body h2 { font-size: 1.5rem; margin-top: 0; color: var(--red-primary); }
.ingredients-section-display ul, .steps-section-display ol { padding-left: 20px; margin: 0; }
.ingredients-section-display li, .steps-section-display li { margin-bottom: 0.75rem; line-height: 1.5; }
.ingredients-section-display li strong { margin-right: 0.5em; }

@media (max-width: 768px) {
    .recipe-body { grid-template-columns: 1fr; }
    .recipe-header-full h1 { font-size: 2rem; }
}

/* 12. Styles pour les pages Admin & Assistant
-------------------------------------------------- */
.admin-container, .assistant-container { max-width: 800px; margin: 2rem auto; padding: 2rem; }
.admin-container h1, .assistant-container h1 { text-align: center; color: var(--red-primary); margin-bottom: 0.5rem; }
.admin-container p, .assistant-container p { text-align: center; margin-bottom: 2rem; color: var(--text-color); }
.admin-section { background-color: var(--white); padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.admin-section h2 { margin-top: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 1rem; }
.code-list { list-style: none; padding: 0; }
.code-list li { background-color: var(--background-color); padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.code-info { display: flex; flex-direction: column; }
.code-info span { font-size: 0.8rem; color: #6b7280; }
.assistant-form { display: flex; flex-direction: column; gap: 1rem; }
.assistant-form textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; min-height: 100px; }
.recipe-display-ai { background-color: var(--white); padding: 1.5rem; border-radius: 12px; margin-top: 2rem; border: 1px solid var(--border-color); }

@media (max-width: 480px) {
    .admin-container, .assistant-container { padding: 1rem; }
}