/* Site de Glumi : mêmes couleurs que la palette Glumi de l'app (prune, framboise, vert feuille, gris poussière mauve) */
:root { --fond: #F3F0F3; --carte: #fff; --texte: #1F1B18; --doux: #5F5852; --prune: #7B3F73; --pale: #E9E0E8;
  /* Tuiles de la palette Glumi (fond, texte) : Plats, Aliments, Collations, Desserts */
  --tuile-prune: #F0DDEB; --texte-prune: #5A2652; --vert: #E3ECD3; --texte-vert: #3D5A1E;
  --peche: #F6E1CC; --texte-peche: #6B3F1C; --rose: #F9D8DD; --texte-rose: #8A1F33; }
@media (prefers-color-scheme: dark) { :root { --fond: #161514; --carte: #242221; --texte: #EDE8E3; --doux: #B9B1AA; --prune: #C08AB8; --pale: #2C2629;
  --tuile-prune: #33232f; --texte-prune: #E9C6E2; --vert: #26301c; --texte-vert: #CFE3B4; --peche: #33271d; --texte-peche: #F1CFAE; --rose: #351f25; --texte-rose: #F4BFC8; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 17px/1.6 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--prune); }
.page { max-width: 880px; margin: 0 auto; padding: 0 16px; }
nav { display: flex; align-items: center; gap: 10px; padding: 14px 0; }
nav .marque { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 22px; color: var(--prune); text-decoration: none; margin-right: auto; }
nav .marque img { width: 40px; height: 40px; }
nav a.lien { text-decoration: none; font-weight: 700; font-size: 15px; padding: 6px 10px; border-radius: 999px; }
nav a.lien:hover { background: var(--pale); }
.entete { text-align: center; padding: 28px 0 8px; }
.entete img { width: 150px; height: 150px; }
h1 { font-size: 44px; line-height: 1.1; margin: 8px 0 6px; color: var(--prune); }
.accroche { font-size: 22px; margin: 0 auto 18px; max-width: 560px; }
.puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.puces li { background: var(--carte); border: 2px solid var(--pale); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 15px; }
.bientot { display: inline-block; background: var(--prune); color: #fff; border-radius: 16px; padding: 12px 20px; font-weight: 800; }
@media (prefers-color-scheme: dark) { .bientot { color: #161514; } }
h2 { font-size: 26px; margin: 40px 0 12px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.carte { background: var(--carte); border-radius: 20px; padding: 16px 18px; }
.carte h3 { margin: 0 0 4px; font-size: 18px; }
.carte p { margin: 0; color: var(--doux); font-size: 16px; }
/* Cartes = tuiles de l'app : fond pâle et texte foncé de la même teinte */
.c1 { background: var(--vert); color: var(--texte-vert); } .c2 { background: var(--tuile-prune); color: var(--texte-prune); }
.c3 { background: var(--peche); color: var(--texte-peche); } .c4 { background: var(--rose); color: var(--texte-rose); }
.c1 p, .c2 p, .c3 p, .c4 p { color: inherit; opacity: .85; }
ol.etapes { padding-left: 22px; } ol.etapes li { margin: 6px 0; }
.note { background: var(--pale); border-left: 5px solid var(--prune); border-radius: 14px; padding: 14px 18px; font-weight: 700; margin: 28px 0 0; }
details { background: var(--carte); border-radius: 14px; padding: 12px 16px; margin: 8px 0; }
summary { font-weight: 700; cursor: pointer; }
details p { margin: 8px 0 0; }
footer { color: var(--doux); font-size: 14px; text-align: center; padding: 36px 0 28px; }
@media (max-width: 520px) { h1 { font-size: 36px; } .accroche { font-size: 19px; } .entete img { width: 120px; height: 120px; } nav a.lien { padding: 6px 6px; } }
.histoire { background: var(--carte); border-radius: 20px; padding: 18px 22px; border-left: 5px solid var(--prune); }
.histoire p { margin: 0 0 10px; }
.histoire .signature { font-weight: 800; color: var(--prune); font-size: 19px; margin: 4px 0 0; }
@media (max-width: 520px) { nav { flex-wrap: wrap; } }