/* ===== GOUPI — Outil « Aliment inflammatoire ou pas ? » ===== */

.outil{
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  padding:var(--sp-xl);
  margin:var(--sp-xxl) 0;
}

.outil-label{
  display:block;
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:var(--sp-sm);
}

/* ── Champ de recherche ── */

.outil-search{position:relative}

.outil-search input{
  width:100%;
  font-family:'Nunito',sans-serif;font-size:1.125rem;
  color:var(--text-primary);
  padding:16px 20px;
  border:2px solid rgba(0,0,0,.08);
  border-radius:var(--r-squircle);
  background:#fff;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.outil-search input::placeholder{color:var(--text-tertiary)}
.outil-search input:focus{
  outline:none;
  border-color:var(--link-blue);
  box-shadow:0 0 0 4px rgba(91,159,237,.15);
}

.outil-suggestions{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  margin:0;padding:6px;list-style:none;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--r-squircle);
  box-shadow:0 12px 32px rgba(0,0,0,.10);
  max-height:340px;overflow-y:auto;
}
.outil-suggestions li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-radius:12px;cursor:pointer;
  font-size:1rem;line-height:1.3;
}
.outil-suggestions li:hover,
.outil-suggestions li[aria-selected="true"]{background:#F0F4F8}
.outil-suggestions .sug-score{
  flex:none;font-family:'Poppins',sans-serif;font-weight:700;font-size:.8rem;
  padding:3px 10px;border-radius:999px;color:#fff;
}
.outil-suggestions .sug-vide{
  padding:11px 14px;color:var(--text-secondary);cursor:default;
}
.outil-suggestions .sug-vide:hover{background:transparent}

/* ── Exemples ── */

.outil-exemples{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:var(--sp-md);font-size:.9rem;color:var(--text-tertiary);
}
.ex-chip{
  font-family:'Nunito',sans-serif;font-size:.875rem;color:var(--text-secondary);
  background:#F0F4F8;border:1px solid rgba(0,0,0,.05);
  padding:6px 14px;border-radius:999px;cursor:pointer;
  transition:background .2s,color .2s;
}
.ex-chip:hover{background:#E3EBF3;color:var(--text-primary)}

/* ── Fiche ── */

.outil-fiche:empty{display:none}
.outil-fiche{margin-top:var(--sp-xl)}

.fiche-tete{
  display:flex;align-items:center;gap:var(--sp-lg);
  padding-bottom:var(--sp-lg);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.fiche-jauge{
  flex:none;width:104px;height:104px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;line-height:1;
}
.fiche-jauge b{font-family:'Poppins',sans-serif;font-weight:800;font-size:2.25rem}
.fiche-jauge span{font-size:.7rem;opacity:.9;margin-top:3px}
.fiche-titre{min-width:0}
.fiche-titre h2{
  font-family:'Poppins',sans-serif;font-weight:800;
  font-size:clamp(1.3rem,4vw,1.7rem);line-height:1.2;
  margin:0 0 6px;letter-spacing:-.01em;
}
.fiche-bande{
  display:inline-block;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:.8rem;padding:4px 12px;border-radius:999px;color:#fff;
}
.fiche-portion-txt{margin:8px 0 0;font-size:.95rem;color:var(--text-secondary)}

/* Bandes de score */
.s-vert{background:#6FD195}
.s-vert-clair{background:#8FD9A8}
.s-orange{background:#F28E3B}
.s-rouge{background:#EF6461}

/* Sélecteur de quantité */
.fiche-quantite{margin:var(--sp-lg) 0}
.fiche-quantite p{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);
  margin:0 0 var(--sp-sm);
}
.fiche-quantite input[type=range]{width:100%;accent-color:var(--link-blue)}
.fiche-qte-valeur{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.95rem;color:var(--text-secondary);margin-top:6px;
}
.fiche-qte-valeur b{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:1.05rem;
  color:var(--text-primary);
}
.fiche-reset{
  font-family:'Nunito',sans-serif;font-size:.85rem;color:var(--link-blue);
  background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;
}

/* Composition */
.fiche-nova{
  display:flex;align-items:flex-start;gap:10px;
  background:#F0F4F8;border-radius:var(--r-squircle);
  padding:var(--sp-md);margin:var(--sp-lg) 0;font-size:.95rem;
}
.fiche-nova b{font-family:'Poppins',sans-serif;font-weight:700;flex:none}

.fiche-nutriments{width:100%;border-collapse:collapse;font-size:.95rem}
.fiche-nutriments th{
  text-align:left;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-tertiary);padding:0 0 8px;
}
.fiche-nutriments th:not(:first-child),
.fiche-nutriments td:not(:first-child){text-align:right}
.fiche-nutriments td{padding:7px 0;border-top:1px solid rgba(0,0,0,.05)}
.fiche-nutriments td:first-child{color:var(--text-secondary)}
.fiche-nutriments .nut-fort td{font-weight:700;color:var(--text-primary)}
.fiche-nutriments .nut-sous td:first-child{padding-left:16px;font-size:.9rem}

.fiche-note{
  margin:var(--sp-lg) 0 0;font-size:.9rem;color:var(--text-secondary);
  line-height:1.6;
}

.outil-noscript{margin-top:var(--sp-lg);color:var(--text-secondary)}

.outil-credits{
  font-size:.85rem;color:var(--text-tertiary);line-height:1.6;
  margin-top:var(--sp-lg);
}

@media(max-width:520px){
  .outil{padding:var(--sp-lg)}
  .fiche-tete{gap:var(--sp-md)}
  .fiche-jauge{width:84px;height:84px}
  .fiche-jauge b{font-size:1.85rem}
}

/* ── Fiches d'aliment ── */

.fiche-verdict{
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  padding:var(--sp-xl);
  margin:0 0 var(--sp-xxl);
}
.fiche-verdict .fiche-tete{padding-bottom:var(--sp-md)}
.fiche-reponse{
  font-size:1.075rem;line-height:1.65;margin:var(--sp-md) 0 0;
  color:var(--text-primary);
}
.fiche-lien-outil{margin:var(--sp-sm) 0 0;font-size:.95rem}

/* Tableau de comparaison */
.fiche-comparaison{width:100%;border-collapse:collapse;font-size:.95rem}
.fiche-comparaison th{
  text-align:left;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-tertiary);padding:0 0 8px;
}
.fiche-comparaison th:not(:first-child),
.fiche-comparaison td:not(:first-child){text-align:right}
.fiche-comparaison td{padding:9px 0;border-top:1px solid rgba(0,0,0,.05)}
.fiche-comparaison tr.comp-principal td{font-weight:700}
.fiche-comparaison tr.comp-principal td:first-child::after{
  content:" — cette fiche";font-weight:400;color:var(--text-tertiary);font-size:.85rem;
}
.comp-pastille{
  display:inline-block;min-width:38px;text-align:center;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.85rem;
  padding:3px 10px;border-radius:999px;color:#fff;
}

/* Liste des fiches sur la page de l'outil */
.outil-fiches{margin:var(--sp-xxl) 0}
.fiches-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:var(--sp-sm);margin-top:var(--sp-md);
}
.fiche-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:1px solid rgba(0,0,0,.05);
  border-radius:var(--r-squircle);padding:13px 16px;
  color:var(--text-primary);font-size:.95rem;line-height:1.3;
  box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s;
}
.fiche-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.07);color:var(--text-primary)}
.fiche-card .comp-pastille{flex:none}