/* Style sobre et responsive */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/*body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #fafafa;
    color: #222;
    line-height: 1.5;
}*/
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-image:url('/assets/img/BG1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: #222;
    line-height: 1.5;
}
a { color: #eee; text-decoration: none; }
a:hover { text-decoration: none; }

.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }

.topbar {
    background: #333;
    border-bottom: 1px solid #eee;
    position: sticky; top: 0; z-index: 10;
}
.nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.brand { font-size: 1.4rem; font-weight: 600; color: #eee; }
.nav nav a { margin-left: 1rem; color: #aaa; }
.nav nav a:hover { color: #eee; }

h1, h2 { font-weight: 600; }
h1 { font-size: 1.6rem; margin: 1rem 0; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #eee; }
th, td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid #eee; }
th { background: #f5f5f5; font-weight: 600; font-size: .9rem; }
tr:last-child td { border-bottom: none; }
td.actions { white-space: nowrap; text-align: right; }

/* Forms */
form .field { margin-bottom: 1rem; }
label { display: block; font-size: .9rem; margin-bottom: .25rem; color: #555; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel],
input[type=file], textarea, select {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}
textarea { min-height: 80px; resize: vertical; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > .field { flex: 1; min-width: 200px; }

/* Buttons */
.btn, button {
    display: inline-block;
    padding: .5rem .9rem;
    border-radius: 4px;
    border: 1px solid #222;
    background: #333;
    color: #fff;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}
.btn:hover, button:hover { background: #94501a; text-decoration: none; }
.btn-secondary { background: #fff; color: #444; border-color: #ccc; }
.btn-secondary:hover { background: #f0f0f0; }
.btn-danger { background: #c0392b; border-color: #c0392b; }
.btn-danger:hover { background: #962d22; }
.btn-sm { padding: .3rem .55rem; font-size: .85rem; }

/* Flash */
.flash { padding: .7rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.flash-success { background: #e6f4ea; color: #1e6b3a; border: 1px solid #b6e0c4; }
.flash-error { background: #fdecea; color: #8a1f1a; border: 1px solid #f5c6c2; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; flex-wrap: wrap; gap: .5rem; }

.footer { color: #888; font-size: .85rem; text-align: center; padding: 2rem 1rem; }

/* Frontend grid */
.recettes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.recette-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
}
.recette-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: #f3f3f3;
}
.recette-card .no-img {
    width: 100%; height: 180px;
    display: flex; align-items: center; justify-content: center;
    background: #f3f3f3; color: #bbb; font-size: 2rem;
}
.recette-card h3 { margin: .75rem .5rem 1rem; font-size: 1rem; color: #333; }

/* Hero */
.hero { text-align: center; padding: 2rem 1rem 1rem; }
.hero h1 { font-size: 2rem; margin-bottom: .25rem; }
.hero p { color: #777; margin: 0; }

/* Lignes dynamiques */
.dyn-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.dyn-row select, .dyn-row input { flex: 1; }
.dyn-row .remove { flex: 0; }

.muted { color: #777; font-size: .9rem; }
.connected { color: #eee; font-size: .9rem; }
.right { text-align: right; }
.totals { background: #fff; border: 1px solid #eee; padding: 1rem; border-radius: 6px; margin-top: 1rem; }
.totals div { display: flex; justify-content: space-between; padding: .25rem 0; }
.totals .total-final { font-weight: 600; border-top: 1px solid #eee; padding-top: .5rem; margin-top: .25rem; }

@media (max-width: 600px) {
    .nav nav a { margin-left: 0; margin-right: .75rem; }
    th, td { padding: .4rem .5rem; font-size: .9rem; }
    table { display: block; overflow-x: auto; }
}