:root {
  --vert: #067a46; --vert-clair: #91c11e; --vert-fond: #eef6e7;
  --texte: #242424; --gris: #6b6b6b; --bord: #e4e4e4; --fond: #f7f7f5; --carte: #fff;
  --rouge: #b42318; --rouge-fond: #fdecea; --ombre: 0 1px 3px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  :root { --texte: #ececec; --gris: #a3a3a3; --bord: #333; --fond: #161616; --carte: #222;
          --vert-fond: #1c2c1f; --rouge-fond: #3a1d1b; --rouge: #f28b82; --vert: #4cc38a; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 "Source Sans 3", system-ui, -apple-system, sans-serif;
       background: var(--fond); color: var(--texte); }
a { color: var(--vert); }
header.top { background: var(--carte); border-bottom: 1px solid var(--bord); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.top .wrap { display: flex; align-items: center; gap: 16px; height: 60px; }
.logo { font-weight: 800; font-size: 1.25rem; color: var(--vert); text-decoration: none; }
.logo span { color: var(--vert-clair); }
.top nav { margin-left: auto; display: flex; gap: 18px; }
.top nav a { text-decoration: none; font-weight: 600; color: var(--texte); }
.top nav a.actif { color: var(--vert); }

h1 { font-size: 1.9rem; margin: 28px 0 6px; }
.sous { color: var(--gris); margin: 0 0 18px; }
.semaines { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.semaines a { flex: none; padding: 8px 14px; border: 1px solid var(--bord); border-radius: 999px;
              text-decoration: none; color: var(--texte); background: var(--carte); font-weight: 600; font-size: .92rem; }
.semaines a.actif { background: var(--vert); border-color: var(--vert); color: #fff; }

.barre { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--vert-fond);
        color: var(--vert); font-size: .85rem; font-weight: 600; text-decoration: none;
        border: 1px solid transparent; }
a.chip:hover { border-color: var(--vert); }
.chip.off { background: transparent; color: var(--gris); border-color: var(--bord); text-decoration: line-through; }
.barre .droite { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.btn { border: 1px solid var(--vert); background: var(--vert); color: #fff; padding: 9px 16px;
       border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn.secondaire { background: transparent; color: var(--vert); }
.btn:disabled { opacity: .6; cursor: wait; }
.note { color: var(--gris); font-size: .85rem; }
.erreur { background: var(--rouge-fond); color: var(--rouge); padding: 12px 14px; border-radius: 8px; margin-bottom: 18px; }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.carte { background: var(--carte); border-radius: 10px; overflow: hidden; box-shadow: var(--ombre);
         display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s; }
.carte:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.carte .img { aspect-ratio: 4/3; background: var(--vert-fond); position: relative; overflow: hidden; }
.carte .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte .label { position: absolute; top: 10px; left: 10px; background: #fff; color: #242424;
                font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.carte .coeur { position: absolute; top: 10px; right: 10px; background: var(--vert-clair); color: #fff;
                font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.carte .corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.carte h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.carte .headline { color: var(--gris); font-size: .9rem; margin: 0; }
.carte .meta { margin-top: auto; padding-top: 8px; font-size: .82rem; color: var(--gris); }
.carte .meta b { color: var(--texte); }
.allerg { font-size: .78rem; color: var(--gris); }

details.exclues { margin: 36px 0 60px; }
details.exclues summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; }
.exclues ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.exclues li { background: var(--carte); border-radius: 8px; padding: 10px 14px; box-shadow: var(--ombre); }
.exclues li a { font-weight: 600; }
.raison { color: var(--rouge); font-size: .88rem; }

/* Profils */
.personnes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.personne { background: var(--carte); border-radius: 10px; padding: 16px; box-shadow: var(--ombre); }
.personne .tete { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.personne .tete input[type=text] { flex: 1; font-weight: 700; font-size: 1.05rem; }
label.titre { display: block; font-weight: 700; font-size: .88rem; margin: 12px 0 4px; }
input[type=text], input[type=number], select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 6px;
  font: inherit; background: var(--fond); color: var(--texte); }
.cases { display: flex; flex-wrap: wrap; gap: 6px; }
.cases label { font-size: .85rem; border: 1px solid var(--bord); border-radius: 999px; padding: 3px 10px; cursor: pointer; user-select: none; }
.cases input { display: none; }
.cases label:has(input:checked) { background: var(--rouge-fond); border-color: var(--rouge); color: var(--rouge); font-weight: 600; }
.aide { font-size: .78rem; color: var(--gris); margin: 3px 0 0; }
.suppr { background: none; border: none; color: var(--rouge); cursor: pointer; font: inherit; }
.options { background: var(--carte); border-radius: 10px; padding: 16px; box-shadow: var(--ombre); margin: 22px 0; display: grid; gap: 10px; }
.actions { display: flex; gap: 10px; align-items: center; margin: 22px 0 60px; }
@media (max-width: 520px) { h1 { font-size: 1.5rem; } .personnes { grid-template-columns: 1fr; } }

/* Page extension */
.etapes { background: var(--carte); border-radius: 10px; padding: 18px 22px 18px 40px; box-shadow: var(--ombre); max-width: 760px; }
.etapes li { margin: 10px 0; }
code { background: var(--vert-fond); padding: 1px 6px; border-radius: 4px; font-size: .9em; word-break: break-all; }
@media (max-width: 600px) {
  .top .wrap { height: auto; flex-wrap: wrap; row-gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .top nav { margin-left: 0; width: 100%; gap: 16px; font-size: .92rem; white-space: nowrap; overflow-x: auto; }
}

/* Préférences : remarque sans écarter */
.carte .avis { background: var(--orange-fond); color: var(--orange); font-size: .82rem; padding: 6px 14px; border-bottom: 1px solid var(--bord); }
.note-avis { color: var(--orange); font-size: .88rem; }
.avis-inline { color: var(--orange); font-weight: 700; }
:root { --orange: #a14d00; --orange-fond: #fff1e0; }
@media (prefers-color-scheme: dark) { :root { --orange: #f5a35c; --orange-fond: #3a2a18; } }