/* Digicalys Cantine — styles front (identite v2 « brocoli explorateur »).
   Les tokens sont definis par le theme ; fallbacks ici si charge hors theme. */
:root {
  --bll-encre: #1F2937;
  --bll-vert-profond: #0B2A20;
  --bll-vert-fonce: #2E7D32;
  --bll-vert: #4CAF50;
  --bll-vert-clair: #C8E669;
  --bll-orange: #FFB74D;
  --bll-corail: #FF6B6B;
  --bll-surligneur: #FDCF2F;
  --bll-creme: #F8F6EE;
  --bll-blanc: #FFFFFF;
  --bll-gris: #6B7280;
}

/* ---------- Commun ---------- */

.bll-annuaire, .bll-ville, .bll-fiche {
  background: var(--bll-creme);
  padding: 0 0 64px;
}

.bll-annuaire .conteneur, .bll-ville .conteneur, .bll-fiche .conteneur {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.bll-ville h1, .bll-fiche h1, .bll-annuaire h1 {
  font-weight: 800;
  color: var(--bll-vert-profond);
  line-height: 1.1;
}

.sous-titre { color: var(--bll-gris); font-size: 1.05rem; margin-top: 8px; }

.fil { font-size: .9rem; margin-bottom: 16px; color: var(--bll-gris); }
.fil a { color: var(--bll-vert-fonce); text-decoration: underline; text-underline-offset: 3px; }

.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.btn--corail { background: var(--bll-corail); color: var(--bll-blanc); }
.btn--corail:hover { background: #E85858; transform: translateY(-1px); }
.btn--vert { background: var(--bll-vert-fonce); color: var(--bll-blanc); }
.btn--vert:hover { background: #256B29; }
.btn--contour { background: transparent; color: var(--bll-encre); border-color: var(--bll-encre); }
.btn--contour:hover { background: var(--bll-blanc); transform: translateY(-1px); }

.btn:focus-visible,
.compteur:focus-visible,
.champ-recherche:focus-visible,
input:focus-visible {
  outline: 2px solid var(--bll-encre);
  outline-offset: 2px;
}

/* ---------- Cards ---------- */

.bll-card {
  background: var(--bll-blanc);
  border: 2px solid var(--bll-encre);
  border-radius: 20px;
  box-shadow: 0 3px 0 rgba(31, 41, 55, .08);
}

/* ---------- Annuaire ---------- */

.grille-villes {
  list-style: none;
  margin: 32px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.bll-card--ville a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 20px;
  text-decoration: none;
  color: var(--bll-encre);
}

.bll-card--ville__nom { font-weight: 700; font-size: 1.05rem; }
.bll-card--ville__total { color: var(--bll-gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bll-card--ville:hover { transform: translateY(-2px); }

/* ---------- Page ville ---------- */

.entete-ville { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }

.compteurs { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.compteur {
  border: 2px solid var(--bll-encre);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--bll-blanc);
  cursor: pointer;
}
.compteur--vert[aria-pressed="true"], .compteur--vert { background: color-mix(in srgb, var(--bll-vert) 18%, white); }
.compteur--jaune { background: color-mix(in srgb, var(--bll-surligneur) 25%, white); }
.compteur--orange { background: color-mix(in srgb, var(--bll-orange) 25%, white); }
.compteur[aria-pressed="true"] { border-width: 3px; }

.barre-recherche-ville { margin: 16px 0 24px; }
.champ-recherche {
  width: 100%;
  max-width: 480px;
  border: 2px solid var(--bll-encre);
  border-radius: 999px;
  padding: 12px 20px;
  background: var(--bll-blanc);
  font-size: 1rem;
}

.liste-etablissements { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.liste-etablissements > [hidden], .bll-liste-vide[hidden] { display: none !important; }

.bll-card--etablissement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
}

.bll-card--etablissement h2 { margin: 0 0 4px; font-size: 1.15rem; }
.bll-card--etablissement h2 a { color: var(--bll-vert-profond); text-decoration: none; }
.bll-card--etablissement h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bll-card--etablissement .meta { margin: 2px 0; color: var(--bll-gris); font-size: .92rem; }

.bloc-journal-ville, .bloc-journal-fiche { margin-top: 48px; }
.bloc-journal-ville ul, .bloc-journal-fiche ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.bloc-journal-ville a, .bloc-journal-fiche a { color: var(--bll-vert-fonce); font-weight: 600; }

/* ---------- Fiche ---------- */

.entete-fiche { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }

.bloc-menu, .bloc-features, .bloc-sources { margin-top: 48px; }
.bloc-menu h2, .bloc-features h2, .bloc-sources h2, .bloc-journal-ville h2, .bloc-journal-fiche h2 {
  font-size: 1.4rem;
  color: var(--bll-vert-profond);
  margin-bottom: 16px;
}

.bloc-menu--vide { padding: 32px; text-align: center; }
.bloc-menu--vide a { color: var(--bll-vert-fonce); font-weight: 600; }

.bloc-menu-hebdo { padding: 24px; margin-bottom: 20px; }
.bloc-menu-hebdo__header { display: flex; align-items: center; gap: 12px; }
.bloc-menu-hebdo__header h3 { margin: 0; font-size: 1.15rem; }
.bloc-menu-hebdo__footer { margin-top: 16px; color: var(--bll-gris); font-size: .88rem; border-top: 1px dashed rgba(31,41,55,.25); padding-top: 12px; }

.menu-jours { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 20px; }
.menu-jour h4 { margin: 0 0 8px; font-size: .95rem; color: var(--bll-vert-fonce); border-bottom: 2px solid var(--bll-vert-clair); padding-bottom: 6px; }
.menu-jour ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.menu-jour li { padding: 3px 0; }
.menu-variante { display: block; color: var(--bll-vert-profond); margin-bottom: 3px; }
.menu-jour li:has(.menu-variante) + li { margin-top: 12px; }

.menu-pdf { margin: 20px 0; }

.menus-precedents { margin-top: 16px; }
.menus-precedents summary { cursor: pointer; color: var(--bll-vert-fonce); font-weight: 600; }
.menus-precedents[open] summary { margin-bottom: 20px; }

.grille-features {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.bll-card--feature { display: flex; gap: 12px; padding: 16px 18px; }
.bll-card--feature h3 { margin: 0 0 4px; font-size: 1rem; }
.bll-card--feature .feature-valeur { margin: 0 0 6px; }
.bll-card--feature .feature-source { margin: 0; color: var(--bll-gris); font-size: .82rem; }
.feature-icone { font-size: 1.5rem; line-height: 1; }
.feature-icone svg { width: 28px; height: 28px; }
.bll-card--feature-old { opacity: .75; }

.liste-sources { list-style: none; padding: 0; display: grid; gap: 6px; color: var(--bll-gris); font-size: .92rem; }
.liste-sources a { color: var(--bll-vert-fonce); }

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  border: 1.5px solid var(--bll-encre);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .78rem;
  font-weight: 700;
}
.badge--vert { background: var(--bll-vert-clair); }
.badge--gris { background: var(--bll-creme); color: var(--bll-gris); border-color: var(--bll-gris); }

/* ---------- Bande contribution ---------- */

.bande-contribution {
  margin-top: 48px;
  background: color-mix(in srgb, var(--bll-orange) 28%, var(--bll-blanc));
  border: 2px solid var(--bll-encre);
  border-radius: 20px;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.bande-contribution h2 { margin: 0 0 4px; font-size: 1.25rem; color: var(--bll-vert-profond); }
.bande-contribution p { margin: 0; }

.mention-prudence {
  margin-top: 32px;
  font-size: .88rem;
  color: var(--bll-gris);
  text-align: center;
}

/* ---------- Bloc vide ---------- */

.bloc-vide {
  background: var(--bll-blanc);
  border: 2px solid var(--bll-encre);
  border-radius: 20px;
  padding: 48px;
  text-align: center;
  margin: 32px 0;
}

/* ---------- Formulaire contribution ---------- */

.bll-form-contribution {
  max-width: 560px;
  margin: 32px auto;
  display: grid;
  gap: 20px;
  background: var(--bll-blanc);
  border: 2px solid var(--bll-encre);
  border-radius: 20px;
  padding: 32px;
}
.bll-form-contribution__champ { display: grid; gap: 6px; }
.bll-form-contribution label { font-weight: 600; }
.bll-form-contribution .optionnel { color: var(--bll-gris); font-weight: 400; font-size: .88rem; }
.bll-form-contribution input[type="text"],
.bll-form-contribution input[type="url"],
.bll-form-contribution input[type="email"],
.bll-form-contribution input[type="file"],
.bll-form-contribution input[type="search"] {
  border: 2px solid var(--bll-encre);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 1rem;
  background: var(--bll-creme);
}
.bll-etab-resultats {
  list-style: none; margin: 4px 0 0; padding: 0;
  border: 2px solid var(--bll-encre);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bll-blanc);
}
.bll-etab-resultats li button {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; background: none; border: 0; cursor: pointer;
}
.bll-etab-resultats li button:hover { background: var(--bll-vert-clair); }
.bll-honeypot { position: absolute; left: -9999px; }
.bll-form-contribution__statut { min-height: 1.2em; font-weight: 600; }
.bll-form-contribution__note { font-size: .88rem; color: var(--bll-gris); margin: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .menu-jours { grid-template-columns: 1fr; }
  .bll-card--etablissement, .bande-contribution, .entete-fiche, .entete-ville { flex-direction: column; align-items: flex-start; }
  .bll-annuaire .conteneur, .bll-ville .conteneur, .bll-fiche .conteneur { padding: 0 16px; }
}

/* Mascotte dans les bandes contribution */
.bande-mascotte {
	flex: none;
	width: clamp(110px, 14vw, 160px);
	height: auto;
	margin: -14px 0;
}
@media (max-width: 768px) {
	.bande-mascotte { display: none; }
}