/* Health Lab Nutrition – « Composer mon assiette » : les 10 groupes d'aliments à gauche, l'assiette à droite.
   Pensé pour l'écran collectif (tout tient sur l'écran) et utilisable sur tablette. */
main,.logos{max-width:1400px}
.accueil h1{font-size:clamp(2.2rem,6vw,4.6rem)}

.composer{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);align-items:start;gap:18px}
.rayons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:calc(100dvh - 200px);overflow:auto;padding-right:4px}
.rayon{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--g);border-radius:14px;padding:8px 10px;display:grid;gap:6px;align-content:start}
.rayon-nom{margin:0;font-weight:800;font-size:.8rem;color:var(--g);line-height:1.2}
.aliments{display:flex;flex-wrap:wrap;gap:5px}
.aliment{font:inherit;font-weight:700;font-size:clamp(.78rem,1vw,.92rem);padding:6px 10px;border-radius:999px;border:2px solid var(--g);background:transparent;color:var(--ink);cursor:pointer;transition:background .15s,transform .1s}
.aliment:active{transform:scale(.94)}
.aliment.pris{background:var(--g);color:#fff}

.table{position:sticky;top:8px;display:grid;justify-items:center;gap:10px;text-align:center}
.assiette{width:min(100%,calc(100dvh - 400px),420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 58%,#E8EEF3 59% 63%,#fff 64%);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--k2) 40%,transparent),0 24px 50px -20px rgba(0,0,0,.6);display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:5px;padding:14%;overflow:hidden}
.assiette-vide{margin:0;color:#7A8796;font-weight:700}
.dans{font:inherit;font-weight:800;font-size:.8rem;padding:5px 9px;border-radius:999px;border:0;background:var(--g);color:#fff;cursor:pointer;animation:pose .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pose{from{transform:scale(0)}}
.compte{margin:0;font-weight:800;font-size:clamp(1.2rem,2.2vw,1.6rem)}
.compte b{font-size:1.5em;color:var(--vrai)}
.pastilles{display:flex;gap:6px}
.pastilles i{width:18px;height:18px;border-radius:50%;border:3px solid var(--g);transition:background .2s}
.pastilles i.on{background:var(--g)}
.pastilles i.pop{animation:pose .4s cubic-bezier(.3,1.8,.5,1)}
.aide{margin:0;color:var(--muted);font-size:.85rem}

/* Résultat */
.resultat{gap:16px}
.resultat h2{margin:0;font-size:clamp(1.5rem,3.4vw,2.6rem);text-align:center}
.gros-chiffre{color:var(--vrai);font-size:1.4em}
.groupes-res{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.groupe-res{display:grid;gap:4px;align-content:start;padding:10px 12px;border-radius:14px;background:var(--surface);border:2px solid var(--line);opacity:.45;filter:grayscale(1);font-size:.85rem}
.groupe-res.couvert{opacity:1;filter:none;border-color:var(--g);box-shadow:0 10px 24px -14px var(--g)}
.groupe-res b{color:var(--g);line-height:1.2}
.apports{font-weight:700}
.choisis{color:var(--muted);font-style:italic}
.legende{margin:0;text-align:center;color:var(--muted);font-size:.9rem}
.principes,.regles{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 20px;display:grid;gap:10px}
.principes h3,.regles h3{margin:0;color:var(--k2)}
.principes > p{margin:0;line-height:1.45}
.cartes-principes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.principe{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--k2) 10%,var(--bg))}
.principe b{color:var(--k2)}
.regles ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.regles li{display:flex;gap:10px;align-items:flex-start}
.r-icone{font-size:1.5rem;line-height:1}
.regles li div{display:grid;gap:2px}
.regles li span:not(.r-icone){color:var(--muted);line-height:1.35}
.actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .composer{grid-template-columns:1fr}
  .rayons{max-height:none;grid-template-columns:1fr}
  .table{position:static;order:-1}
  .assiette{width:min(80vw,320px)}
  .groupes-res,.cartes-principes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .regles ol{grid-template-columns:1fr}
}

/* Aliments en image : emoji au-dessus du nom, à prendre et déposer dans l'assiette */
.aliment{display:inline-grid;justify-items:center;gap:2px;padding:6px 8px;border-radius:14px;min-width:70px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.aliment .img{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1}
.aliment .nom{font-size:clamp(.68rem,.9vw,.8rem);line-height:1.15;text-align:center;max-width:9em}
.aliment.pris{opacity:.55}
.aliment.fantome{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%) scale(1.25);background:var(--g);color:#fff;box-shadow:0 16px 34px -10px rgba(0,0,0,.6)}
.assiette.cible{box-shadow:0 0 0 10px var(--vrai),0 24px 50px -20px rgba(0,0,0,.6)}
.dans{display:inline-grid;justify-items:center;gap:0;padding:4px 7px;border-radius:12px}
.dans .img{font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.1}
.dans .nom{font-size:.68rem}