/* Health Lab Nutrition – « Les super-pouvoirs des aliments » : les 13 aliments en haut, les 4 super-pouvoirs en bas.
   Pensé pour l'écran tactile collectif : tout tient sur l'écran. */
main,.logos{max-width:1400px}
.accueil h1{font-size:clamp(2.2rem,6vw,4.6rem)}
.apercu{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.apercu span{font-weight:800;padding:10px 18px;border-radius:999px;background:var(--f);color:#fff;font-size:clamp(1rem,1.8vw,1.3rem)}

.jeu{gap:12px}
.plateau{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:110px;align-items:center;padding:10px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.plateau-fini{margin:0;font-weight:800;color:var(--vrai);font-size:1.2rem}
.aliment{font:inherit;display:inline-grid;justify-items:center;gap:2px;min-width:86px;padding:8px 10px;border-radius:16px;border:2px solid var(--line);background:var(--bg);color:var(--ink);cursor:grab;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform .1s}
.aliment:active{transform:scale(.95)}
.aliment .img{font-size:clamp(2rem,3.4vw,3rem);line-height:1.1}
.aliment .nom{font-weight:800;font-size:clamp(.75rem,1vw,.9rem)}
.aliment.choisi{border-color:var(--k2);box-shadow:0 0 0 3px var(--k2)}
.aliment[disabled]{cursor:default;min-width:0;padding:4px 8px}
.aliment[disabled] .img{font-size:clamp(1.4rem,2.2vw,2rem)}
.aliment.fantome{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%) scale(1.2);box-shadow:0 16px 34px -10px rgba(0,0,0,.6);border-color:var(--k2)}

.retour{margin:0;text-align:center;font-weight:800;font-size:clamp(1rem,1.7vw,1.25rem);padding:10px 16px;border-radius:14px;color:var(--muted);min-height:1.5em}
.retour.bien{background:color-mix(in srgb,var(--vrai) 18%,transparent);color:var(--ink)}
.retour.mal{background:color-mix(in srgb,var(--faux) 18%,transparent);color:var(--ink)}

.fonctions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fonction{display:grid;grid-template-rows:auto 1fr;gap:8px;min-height:calc(100dvh - 545px);padding:12px;border-radius:20px;border:3px dashed var(--f);background:color-mix(in srgb,var(--f) 10%,var(--surface));transition:background .15s,transform .15s}
.fonction.attend{cursor:pointer;border-style:solid}
.fonction.cible{border-style:solid;background:color-mix(in srgb,var(--f) 30%,var(--surface));transform:scale(1.02)}
.fonction.secoue{animation:secoue .45s}
.f-titre{margin:0;font-weight:800;color:var(--f);font-size:clamp(1rem,1.7vw,1.3rem);text-align:center}
.f-contenu{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;justify-content:center}
.actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Fin */
.final h2{font-size:clamp(1.4rem,3vw,2.2rem);max-width:30ch}
.recap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;text-align:left}
.recap-f{padding:12px 14px;border-radius:18px;border:3px solid var(--f);background:color-mix(in srgb,var(--f) 10%,var(--surface))}
.recap-aliments{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.recap-aliments span{font-weight:700;padding:4px 10px;border-radius:999px;background:var(--bg)}
.plusieurs{margin:0;color:var(--muted);max-width:70ch}

@media (max-width:900px){
  .fonctions,.recap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fonction{min-height:140px}
}