/* =================================================================
   Fiche recette — show.php
================================================================= */

.recipe-hero {
    min-height: 420px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.recipe-hero-overlay {
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
    padding: var(--space-8) 0 var(--space-6);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,.7);
    margin-bottom: var(--space-3);
}

.breadcrumb a { color: rgba(255,255,255,.7); }
.breadcrumb a:hover { color: #fff; }

.recipe-hero-title {
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 3rem);
    margin-bottom: var(--space-4);
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.recipe-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255,255,255,.9);
    font-size: 0.9rem;
}

.recipe-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.recipe-hero-actions .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
.recipe-hero-actions .btn-outline:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Corps */
.recipe-body { padding: var(--space-8) 0 var(--space-12); }

.recipe-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 900px) {
    .recipe-grid { grid-template-columns: 1fr 340px; }
}

.recipe-section { margin-bottom: var(--space-8); }

.recipe-section-title {
    font-size: 1.4rem;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
}

.recipe-description { font-size: 1.05rem; color: var(--color-text-muted); line-height: 1.7; }

.recipe-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip {
    display: inline-flex;
    align-items: center;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    text-decoration: none;
}

.chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }

/* Étapes */
.steps-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-5); }

/* Conseils */
.tips-box {
    padding: var(--space-4) var(--space-5);
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: .92rem;
    line-height: 1.75;
    color: var(--color-text);
    white-space: pre-line;
}
[data-theme="dark"] .tips-box { background: #2a2510; border-left-color: #d97706; }

.step-item { display: flex; gap: var(--space-4); align-items: flex-start; }

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.step-content p { font-size: 1.05rem; line-height: 1.7; }

/* Rating */
.rating-widget { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.star-btn {
    font-size: 1.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-border);
    transition: color 150ms, transform 100ms;
    padding: 0;
    line-height: 1;
}

.star-btn.is-active, .star-btn.is-hover { color: #f4a261; }
.star-btn:hover { transform: scale(1.15); }
.rating-label { font-size: 0.875rem; color: var(--color-text-muted); }

.recipe-source { font-size: 0.8rem; color: var(--color-text-light); }
.recipe-source a { color: var(--color-text-muted); }

/* Sidebar ingrédients */
.ingredients-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
}

.ingredients-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ingredients-header h2 { font-size: 1.1rem; }

.servings-adjuster { display: flex; align-items: center; gap: var(--space-2); }

.adj-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface-2);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition);
}

.adj-btn:hover { border-color: var(--color-primary); }

.servings-input {
    width: 50px;
    text-align: center;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
    font-family: var(--font-body);
    font-weight: 700;
    background: var(--color-surface);
    color: var(--color-text);
}

.servings-label { font-size: 0.8rem; color: var(--color-text-muted); }

.ingredients-list { list-style: none; display: flex; flex-direction: column; }

.ingredient-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.ingredient-label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; flex: 1; }
.ingredient-check { cursor: pointer; }
.ingredient-label:has(.ingredient-check:checked) .ingredient-name { text-decoration: line-through; opacity: 0.5; }
.ingredient-qty { color: var(--color-text-muted); font-size: 0.85rem; text-align: right; white-space: nowrap; }
.ingredient-note { font-size: 0.78rem; }

.author-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.author-name { font-weight: 700; font-size: 0.9rem; }
.author-link { font-size: 0.8rem; color: var(--color-primary); }
.recipe-similar { padding: var(--space-8) 0 var(--space-12); }

/* =================================================================
   Commentaires
================================================================= */
.recipe-comments {
    padding: var(--space-8) 0 var(--space-12);
    border-top: 1px solid var(--color-border);
}

.comments-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.comments-count {
    background: var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    border-radius: var(--radius-full);
    padding: 1px 8px;
}

.comments-empty,
.comments-login {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.comments-login a { color: var(--color-primary); }

/* Commentaire individuel */
.comment {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.comment__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comment__body { flex: 1; min-width: 0; }

.comment__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
}

.comment__author {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}

.comment__date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.comment__delete {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 4px;
    opacity: 0;
    transition: opacity var(--transition), color var(--transition);
}

.comment:hover .comment__delete { opacity: 1; }
.comment__delete:hover { color: #ef4444; }

.comment__content {
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

/* Formulaire */
.comment-form { margin-top: var(--space-5); }

.comment-input {
    font-size: 0.875rem;
    resize: vertical;
    min-height: 70px;
}

.comment-form__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
}
.favorite-btn.is-fav { background: #fee2e2; border-color: #ef4444; color: #991b1b; }

/* =================================================================
   Formulaire recette — form.php
================================================================= */

.form-page-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.form-page-header h1 { flex: 1; margin: 0; }

.form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

.form-card-title {
    font-size: 1.1rem;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.form-control-lg { font-size: 1.1rem; padding: var(--space-4); }

.image-upload-area {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    position: relative;
    overflow: hidden;
}

.image-upload-area:hover, .image-upload-area.is-dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.upload-placeholder { text-align: center; pointer-events: none; }
.upload-icon { font-size: 2.5rem; display: block; margin-bottom: var(--space-2); }

.upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.image-preview-current { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius-md); display: block; }

.ingredients-form-list { display: flex; flex-direction: column; gap: var(--space-3); }

.ingredient-row {
    display: grid;
    grid-template-columns: 1fr 80px 90px 140px auto;
    gap: var(--space-2);
    align-items: center;
}

@media (max-width: 640px) {
    .ingredient-row { grid-template-columns: 1fr 70px; }
    .ingredient-row .unit-input,
    .ingredient-row .note-input { grid-column: 1 / -1; }
}

.steps-form-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.step-row { background: var(--color-surface-2); border-radius: var(--radius-sm); padding: var(--space-4); }

.step-header { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; margin-bottom: var(--space-2); }
.step-drag-handle {
    cursor: grab;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 var(--space-1);
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
}
.step-drag-handle:active { cursor: grabbing; }
.step-header .step-number {
    /* Annule le style cercle orange de la fiche recette */
    flex: 1;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.875rem;
    display: inline;
    margin-top: 0;
}
.step-row.is-dragging { opacity: 0.45; }
.step-row.drag-over { outline: 2px dashed var(--color-primary); outline-offset: 2px; }

.checkboxes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}

.checkbox-label:hover { background: var(--color-surface-2); }
.checkbox-label--large { font-size: 1rem; padding: var(--space-3); }
.required { color: var(--color-error); }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
}