/* ===============================
   VARIABLES DE THÈME (AJOUTÉES)
================================ */
:root {
    --bg-body: #f8f8f8;
    --bg-card: #ffffff;
    --bg-sidebar: #f08a5b;
    --bg-sidebar-hover: #f3a480;
    --text-main: #222;
    --text-label: #333;
    --accent: #ff7a18;
    --accent-light: #ffb347;
    --border: #ddd;
    --bg-input: #fafafa;
    --bg-item: #f9f9f9;
    --bg-item-row: #fdfdfd;
    --shadow: 0 12px 35px rgba(0,0,0,0.08);
    --hamburger-color: #130664;
    --overlay-bg: rgba(255, 255, 255, 0.3);
    --btn-gradient: linear-gradient(135deg, #ff7a18, #ffb347);
}

body.dark-theme {
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --bg-sidebar: #b91c1c; /* Rouge foncé */
    --bg-sidebar-hover: #dc2626; /* Rouge vif */
    --text-main: #f5f5f5;
    --text-label: #f5f5f5;
    --accent: #ef4444; /* Rouge */
    --accent-light: #991b1b;
    --border: #444;
    --bg-input: #2a2a2a;
    --bg-item: #252525;
    --bg-item-row: #2a2a2a;
    --shadow: 0 12px 35px rgba(0,0,0,0.5);
    --hamburger-color: #f5f5f5;
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --btn-gradient: linear-gradient(135deg, #ef4444, #991b1b);
}

/* ===============================
RESET & BASE
================================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Manrope", sans-serif;
}

/* Sidebar */
nav {
    background-color: var(--bg-sidebar); /* VARIABLE */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 220px;
    z-index: 1000;
    border-right: 1px solid var(--border-color); /* VARIABLE */
    padding-top: 40px;
    transition: left 0.3s ease, background 0.4s;
}

/* Sidebar cachée */
nav.hidden {
    left: -220px;
}

/* Liste verticale */
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-main); /* VARIABLE */
    font-family: 'Manrope';
}

nav li a:hover {
    background-color: var(--bg-sidebar-hover); /* VARIABLE */
    color: #D5F2FF;
    transition: background 0.2s ease, color 0.1s ease;
}

/* Bouton hamburger */
.hamburger {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 1101;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 4px;
    background: var(--hamburger-color); /* VARIABLE */
    margin-bottom: 5px;
    border-radius: 2px;
    transition: all 0.3s ease, background 0.4s;
}

.hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(6.2px, 6.2px);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6.2px, -6.2px);
}

#mainContent {
    margin-left: 0px;
    padding-top: 40px;
    transition: margin-left 0.3s ease;
}

#mainContent.shift {
    margin-left: 220px;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--bg-body); /* VARIABLE */
    color: var(--text-main);          /* VARIABLE */
    padding: 20px;
    transition: background 0.4s, color 0.4s;
}

h1 {
    text-align: center;
    margin-bottom: 30px;
}

/* ===============================
FORM
================================ */
form {
max-width: 720px;
margin: auto;
background: var(--bg-card); /* VARIABLE */
padding: 35px;
border-radius: 18px;
box-shadow: var(--shadow); /* VARIABLE */
transition: background 0.4s;
}

label {
font-weight: 600;
color: var(--text-label); /* VARIABLE */
}

input,
select {
width: 100%;
padding: 12px 14px;
margin-top: 6px;
border-radius: 10px;
border: 1px solid var(--border); /* VARIABLE */
background: var(--bg-input);    /* VARIABLE */
color: var(--text-main);         /* VARIABLE */
}

input[type="file"] {
padding: 6px;
}

input:focus,
select:focus {
outline: none;
border-color: var(--accent); /* VARIABLE */
box-shadow: 0 0 0 2px rgba(255,122,24,0.2);
}

/* ===============================
INGREDIENTS & ETAPES
================================ */
h3 {
margin: 28px 0 12px;
font-size: 1.3rem;
color: var(--accent); /* VARIABLE */
}

#ingredientsContainer,
#etapesContainer {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
}

#ingredientsContainer div,
#etapesContainer div {
display: flex;
gap: 10px;
}

#ingredientsContainer input,
#etapesContainer input {
flex: 1;
}

#etapesContainer textarea {
width: 100%; /* prend toute la largeur du container */
min-height: 120px; /* hauteur initiale */
max-height: 300px; /* limite si tu veux */
resize: vertical; /* permet de redimensionner à la souris */
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--border); /* VARIABLE */
background: var(--bg-input);    /* VARIABLE */
color: var(--text-main);         /* VARIABLE */
font-size: 1rem;
margin-bottom: 10px; /* espace entre les étapes */
}

#etapesContainer textarea:focus {
outline: none;
border-color: var(--accent); /* VARIABLE */
box-shadow: 0 0 0 2px rgba(255,122,24,0.2);
}

/* ===============================
BUTTONS
================================ */
button {
padding: 12px 18px;
border-radius: 12px;
border: none;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}

#addIngredient,
#addEtape {
background: var(--bg-input); /* VARIABLE */
color: var(--text-main);      /* VARIABLE */
}

#addIngredient:hover,
#addEtape:hover {
background: var(--border); /* VARIABLE */
}

button[type="submit"] {
background: var(--btn-gradient); /* VARIABLE */
color: #fff;
width: 100%;
font-size: 1.1rem;
margin-top: 25px;
}

button[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(255,122,24,0.3);
}

/* ===============================
RESPONSIVE
================================ */
@media (max-width: 768px) {
#mainContent {
margin-left: 0;
padding: 20px;
}

form {
padding: 25px;
}
}

/* Overlay pour effet flou */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg); /* VARIABLE */
    backdrop-filter: blur(5px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 999;
}

#overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Conteneur de la ligne d'ingrédient */
.ingredient-item {
    display: flex;
    align-items: flex-end; /* Aligne le bouton de suppression avec les inputs */
    gap: 10px;
    background: var(--bg-item); /* VARIABLE */
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap; /* Permet de revenir à la ligne sur mobile */
}

/* Chaque groupe Label + Input */
.ingredient-item .group {
    display: flex;
    flex-direction: column;
    flex: 2; /* Prend plus de place pour le nom */
    min-width: 120px;
}

/* Groupes plus petits (Quantité, Unité) */
.ingredient-item .group.small {
    flex: 1;
    min-width: 70px;
}

/* Cas particulier de la checkbox */
.ingredient-item .checkbox-group {
    flex: 0; /* Ne s'étire pas */
    min-width: 80px;
    align-items: center;
    justify-content: center;
}

/* On annule le width 100% global pour la checkbox uniquement */
.ingredient-item input[type="checkbox"] {
    width: 25px;
    height: 25px;
    margin-top: 5px;
    cursor: pointer;
}

/* Style des labels à l'intérieur de la ligne */
.ingredient-item label {
    font-size: 0.8rem;
    color: var(--text-muted); /* VARIABLE (gérée par text-main ou spécifique) */
    margin-bottom: 2px;
}

/* Bouton de suppression (la croix) */
.remove-ingredient {
    background: #ff4d4d !important;
    color: white !important;
    padding: 10px 15px !important;
    font-size: 1.2rem;
    height: 45px;
}

.remove-ingredient:hover {
    background: #cc0000 !important;
}

/* Style commun pour les lignes d'ingrédients et d'étapes */
.item-row {
    display: flex;
    align-items: stretch; /* Pour que le bouton fasse la même hauteur que le reste */
    gap: 12px;
    background: var(--bg-item-row); /* VARIABLE */
    padding: 15px;
    border: 1px solid var(--border); /* VARIABLE */
    border-radius: 12px;
    margin-bottom: 12px;
}

.item-row .group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Alignement spécifique pour la checkbox condiment */
.checkbox-group {
    align-items: center;
    min-width: 100px;
    text-align: center;
}

.help-text {
    font-size: 0.65rem;
    color: #888;
    margin-top: 2px;
    font-style: italic;
    line-height: 1;
}

/* Ajustement pour les Textareas dans les étapes */
.etape-item .group {
    flex: 1; /* Prend toute la place restante */
}

.etape-item textarea {
    margin-top: 6px;
    width: 100% !important;
    min-height: 60px !important;
}

/* Style uniforme pour le bouton supprimer (la croix) */
.remove-btn {
    background: #ff4d4d !important;
    color: white !important;
    border: none;
    border-radius: 8px;
    width: 40px;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px; /* Aligne la croix avec les inputs (sous le label) */
    transition: background 0.2s;
}

.remove-btn:hover {
    background: #cc0000 !important;
}

/* Sur mobile, on empile les éléments */
@media (max-width: 600px) {
    .item-row {
        flex-direction: column;
        align-items: initial;
    }
    .remove-btn {
        width: 100%;
        margin-top: 10px;
    }
}