:root {
  --couleur-fond: #f5f6f8;
  --couleur-texte: #1f2430;
  --couleur-accent: #2f6f4f;
  --couleur-accent-fonce: #234f39;
  --couleur-danger: #b3413a;
  --couleur-bordure: #dde1e6;
  --couleur-carte: #ffffff;
  --rayon: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--couleur-accent-fonce);
  color: white;
  padding: 0.75rem 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.nav-brand { font-weight: 600; font-size: 1.1rem; white-space: nowrap; }

.btn-hamburger {
  display: none;
  background: transparent;
  border: none;
  color: white;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.nav-panel { display: flex; align-items: center; gap: 1.5rem; flex: 1; justify-content: space-between; margin-left: 1.5rem; }

.nav-links { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-links a { color: white; text-decoration: none; opacity: 0.85; font-size: 0.95rem; }
.nav-links a.actif, .nav-links a:hover { opacity: 1; text-decoration: underline; }

.nav-droite { display: flex; align-items: center; gap: 0.75rem; }

.nav-logout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.nav-logout:hover { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 768px) {
  .nav { flex-wrap: wrap; }
  .btn-hamburger { display: block; }
  .nav-panel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-left: 0;
    margin-top: 0.85rem;
    gap: 1rem;
  }
  .nav-panel.ouvert { display: flex; }
  .nav-links { flex-direction: column; gap: 0; width: 100%; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.65rem 0.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  .nav-droite { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .nav-droite .select-langue, .nav-droite .nav-logout { width: 100%; text-align: center; }
}

.select-langue {
  background: var(--couleur-accent-fonce);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
}
.select-langue option { color: var(--couleur-texte); background: white; }

.pied-de-page {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--couleur-accent-fonce);
  color: white;
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  z-index: 100;
}
.pied-de-page a { color: white; text-decoration: underline; }

body { padding-bottom: 2.75rem; }

main { max-width: 900px; margin: 0 auto; padding: 0 1.5rem 3rem; }

h1 { font-size: 1.6rem; margin-bottom: 0.75rem; }

.hero { text-align: center; padding: 3rem 1rem 2rem; }
.hero h1 { font-size: 2.1rem; }
.hero p { max-width: 480px; margin: 0.5rem auto 0; }

.cartes-accueil { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }

.carte {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.carte-lien {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
  display: block;
}
.carte-lien:hover { border-color: var(--couleur-accent); transform: translateY(-2px); }
.carte-lien h2 { font-size: 1.1rem; margin: 0 0 0.4rem; color: var(--couleur-accent-fonce); }

.champ-recherche {
  width: 100%;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-size: 1rem;
}

.resultat-aliment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--couleur-bordure);
  font-size: 0.92rem;
}
.resultat-aliment:last-child { border-bottom: none; }

.ligne-ingredient { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.ligne-ingredient input { padding: 0.4rem 0.5rem; border: 1px solid var(--couleur-bordure); border-radius: 6px; }

.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.stat-nombre { font-size: 1.6rem; font-weight: 700; color: var(--couleur-accent); }
.stat-libelle { font-size: 0.82rem; color: #666; margin-top: 0.2rem; }

.bouton {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--rayon);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
}
.bouton-valider { background: var(--couleur-accent); color: white; }
.bouton-valider:hover { background: var(--couleur-accent-fonce); }
.bouton-valider:disabled { background: #a9c3b6; cursor: not-allowed; }
.bouton-refuser { background: transparent; color: var(--couleur-danger); border: 1px solid var(--couleur-danger); }
.bouton-refuser:hover { background: var(--couleur-danger); color: white; }

.champ { margin-bottom: 1rem; }
.champ label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.3rem; }
.champ input, .champ select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-size: 0.95rem;
  font-family: inherit;
}

/* iOS Safari donne un fond gris natif aux champs date tant qu'ils sont
   vides, qui tranche avec le blanc des autres champs et donne
   l'impression d'un champ cassé/débordant. Fond blanc + hauteur
   cohérente pour qu'il se fonde avec le reste du formulaire. */
.champ input[type="date"] {
  background-color: white;
  min-height: 2.6rem;
}

.ligne-champs {
  display: grid;
  gap: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.ligne-champs.cols-3 { grid-template-columns: 2fr 1fr 1fr; }
.ligne-champs.cols-2 { grid-template-columns: 1fr 1fr; }
.ligne-champs.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.ligne-champs .champ { margin-bottom: 0; }

@media (max-width: 560px) {
  .ligne-champs.cols-3, .ligne-champs.cols-2, .ligne-champs.cols-4 { grid-template-columns: 1fr; }
}

.message-erreur { color: var(--couleur-danger); font-size: 0.9rem; margin-bottom: 1rem; }
.message-info { color: #666; font-size: 0.9rem; }
.message-succes { color: var(--couleur-accent-fonce); font-size: 0.95rem; }

.scanner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.scanner-boite {
  background: white;
  border-radius: var(--rayon);
  overflow: hidden;
  width: 100%;
  max-width: 480px;
}
.scanner-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--couleur-accent-fonce);
  color: white;
  font-weight: 600;
}
.scanner-fermer {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  line-height: 1;
}
.scanner-video {
  width: 100%;
  display: block;
  background: black;
  max-height: 60vh;
}
.scanner-message {
  text-align: center;
  padding: 0.85rem 1rem;
  margin: 0;
  font-size: 0.9rem;
  color: #444;
}