:root {
--bg: #fef6e9;
--card: #ffefc9;
--card-hover: #fff4d8;
--line: #f0dca8;
--ink: #5003c0;
--ink-soft: #5003c0;
--ink-faint: #8a6ecf;
--btn: #5003c0;
--sale: #5003c0;
--sucre: #ff467a;
--gluten: #ffd51e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: "Inter", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ---------- Header ---------- */

header {
text-align: center;
padding: 72px 20px 30px;
}
header h1 {
font-size: clamp(2.4rem, 6vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
}
header h1 .dot { color: #ff467a; }

/* ---------- Toolbar ---------- */
.toolbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(254, 246, 233, .9);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
padding: 14px 20px;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-items: center;
}
.tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.tab {
border: 1.5px solid var(--btn);
background: var(--btn);
color: #fef6e9;
padding: 10px 26px;
border-radius: 999px;
cursor: pointer;
font-size: .95rem;
font-weight: 700;
font-family: inherit;
transition: all .18s ease;
}
.tab:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(171, 3, 169, .35); }
.tab.active[data-cat="sale"] { background: var(--sale); border-color: var(--sale); color: #ffd51e; }
.tab.active[data-cat="sucre"] { background: var(--sucre); border-color: var(--sucre); color: #fff; }
.tab.active[data-cat="sansgluten"] { background: var(--gluten); border-color: var(--gluten); color: #5003c0; }
.search {
display: flex;
align-items: center;
gap: 8px;
background: var(--card);
border: 1.5px solid rgba(171, 3, 169, .55);
border-radius: 999px;
padding: 9px 16px;
min-width: 250px;
}
.search input {
border: none;
outline: none;
background: transparent;
font-size: .95rem;
font-family: inherit;
width: 100%;
color: var(--ink);
}
.search input::placeholder { color: var(--ink-faint); }
.count {
width: 100%;
text-align: center;
font-size: .8rem;
color: var(--ink-faint);
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
}

/* ---------- Section ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 34px 20px 10px; }
.section-title {
display: flex;
align-items: center;
gap: 16px;
margin: 10px 0 24px;
}
.section-title h2 {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
white-space: nowrap;
}
.section-title .line { flex: 1; height: 1px; background: var(--line); }

/* ---------- Grille de cartes ---------- */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: transform .2s ease, border-color .2s ease, background .2s ease;
display: flex;
flex-direction: column;
}
.card:hover { transform: translateY(-4px); background: var(--card-hover); border-color: var(--ink); box-shadow: 0 12px 26px rgba(171, 3, 169, .22); }
.card-thumb { display: none; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.card h3 { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }
.card .desc { font-size: .86rem; color: var(--ink-soft); flex: 1; }
.tag-pill {
font-size: .68rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 999px;
}
.pill-viande { background: #ff467a; color: #fff; }
.pill-poisson { background: #5003c0; color: #ffd51e; }
.pill-vege { background: #ffd51e; color: #5003c0; }
.pill-vegan { background: #ab03a9; color: #fff; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip {
font-size: .72rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
background: rgba(171, 3, 169, .15);
color: var(--ink-soft);
}
.empty {
text-align: center;
color: var(--ink-soft);
padding: 70px 20px;
font-size: 1.05rem;
}

/* ---------- Modale recette ---------- */
.overlay {
position: fixed;
inset: 0;
background: rgba(80, 3, 192, .35);
display: none;
align-items: flex-start;
justify-content: center;
z-index: 100;
padding: 30px 16px;
overflow-y: auto;
}
.overlay.open { display: flex; }
.modal {
background: var(--bg);
border: 1px solid rgba(171, 3, 169, .5);
border-radius: 20px;
max-width: 720px;
width: 100%;
overflow: hidden;
animation: pop .25s ease;
}
@keyframes pop { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { padding: 32px 34px 24px; position: relative; color: #fff; }
.modal-head.sale { background: linear-gradient(135deg, #ab03a9, var(--sale)); }
.modal-head.sucre { background: linear-gradient(135deg, #ab03a9, var(--sucre)); }
.modal-head.sansgluten { background: linear-gradient(135deg, #ffea9c, var(--gluten)); color: #5003c0; }
.modal-head .close {
position: absolute;
top: 16px;
right: 18px;
background: rgba(255, 255, 255, .22);
border: none;
color: inherit;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.1rem;
cursor: pointer;
line-height: 1;
}
.modal-head .emoji { font-size: 2.5rem; margin-bottom: 8px; }
.modal-head h2 { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.modal-head .origin { font-size: .85rem; opacity: .85; }
.modal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.modal-meta .chip { background: rgba(255, 255, 255, .22); color: inherit; font-size: .78rem; }
.modal-body { display: grid; grid-template-columns: 1fr 1.35fr; gap: 30px; padding: 30px 34px 38px; }
@media (max-width: 640px) { .modal-body { grid-template-columns: 1fr; padding: 24px; } .modal-head { padding: 26px 24px 20px; } }
.modal-body h3 {
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .16em;
font-weight: 800;
color: var(--ink-soft);
margin-bottom: 14px;
}
ul.ingredients { list-style: none; }
ul.ingredients li {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 7px 0;
font-size: .93rem;
border-bottom: 1px dashed var(--line);
cursor: pointer;
user-select: none;
}
ul.ingredients li .box {
width: 17px; height: 17px;
border: 1.6px solid var(--ink-faint);
border-radius: 5px;
flex-shrink: 0;
margin-top: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .7rem;
color: transparent;
}
ul.ingredients li.done .box { background: var(--gluten); border-color: var(--gluten); color: #5003c0; }
ul.ingredients li.done { text-decoration: line-through; color: var(--ink-faint); }
ol.steps { counter-reset: step; list-style: none; }
ol.steps li {
counter-increment: step;
position: relative;
padding-left: 44px;
margin-bottom: 16px;
font-size: .95rem;
}
ol.steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 1px;
width: 30px; height: 30px;
border-radius: 50%;
background: var(--ink);
color: var(--bg);    display: flex;
align-items: center;
justify-content: center;
font-size: .82rem;
font-weight: 800;
}
.tip {
margin-top: 18px;
background: rgba(255, 213, 30, .2);
border-left: 4px solid var(--gluten);
padding: 12px 16px;
border-radius: 0 10px 10px 0;
font-size: .88rem;
}
.tip strong { color: #ab03a9; }

/* ---------- Footer ---------- */
footer {
text-align: center;
padding: 40px 20px 56px;
color: var(--ink-faint);
font-size: .85rem;
}
footer a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
footer a:hover { color: var(--ink); text-decoration: underline; }