/* socle.css -- LA MISE EN PAGE DU SOCLE DE « DINERS » (lot DN-01 ; copie d'app.css d'Outils a7eb846, adaptee), mobile d'abord.
 *
 * La forme des maquettes validees : Dîners v1 (index.html : la bande, la barre du bas et son bouton central) et Outils v2
 * (la signature « DVO ◇ Lem », essai 3c). Charge APRES base, tokens, composants, tokens-diners ; AVANT les feuilles des lots
 * (repas.css, soldes.css, bureau.css). AUCUNE couleur litterale : que des var().
 */

/* ---- socle --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--dv-pt-14); }
body { margin: 0; min-height: 100vh; background: var(--fond-doux); color: var(--texte); overflow-x: clip;
  font-size: var(--dv-pt-14); }
main { display: block; width: 100%; max-width: var(--m-page-max); margin: 0 auto; padding: var(--dv-px-16) var(--dv-px-12) var(--dv-px-24); }
a { color: var(--lien); }
img, svg { max-width: 100%; }
.ic { width: var(--dv-px-20); height: var(--dv-px-20); flex: none; }
.ic-a1 { flex: none; }

/* ---- la bande de la plateforme, le filet orange LEM ------------------------------------- */
.bande { position: relative; height: var(--m-px-52); display: flex; align-items: center; gap: var(--dv-px-10);
  padding: 0 var(--dv-px-12); background: var(--bande); color: var(--texte-inverse); }
.bande::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--dv-px-3); background: var(--lem-filet); }
.bande :focus-visible { outline-color: var(--bande-anneau); }
.bande .ic-a1 { width: var(--dv-px-24); height: var(--dv-px-24); color: var(--texte-inverse); }
.bande__app { display: inline-flex; align-items: center; gap: var(--dv-px-8); min-width: 0; font-weight: var(--dv-graisse-700);
  font-size: var(--dv-pt-16); color: var(--texte-inverse); text-decoration: none; }
.bande__droite { margin-left: auto; display: flex; align-items: center; gap: var(--dv-px-6); flex: none; }

/* la signature « DVO ◇ Lem » (essai 3c) : le losange a la hauteur des capitales, comme une lettre de plus */
.signature { display: inline-flex; align-items: flex-end; gap: var(--dv-px-3); padding: var(--dv-px-12) 0; flex: none;
  min-height: var(--m-cible); text-decoration: none; border-radius: var(--dv-px-4); }
.signature img { display: block; height: var(--dv-px-20); width: auto; max-width: none; }
.signature .signature__losange { margin: 0 var(--dv-px-4); align-self: flex-end; }

.initiales { width: var(--dv-px-32); height: var(--dv-px-32); border-radius: var(--dv-px-999); background: var(--accent-doux);
  color: var(--texte); font-size: var(--dv-pt-12); font-weight: var(--dv-graisse-700); display: inline-flex; align-items: center;
  justify-content: center; flex: none; }

/* ---- l'accueil : la pile des blocs declares par les lots ------------------------------- */
.accueil { display: flex; flex-direction: column; gap: var(--dv-px-12); }

/* ---- les cartes, les boutons de 52 px, les puces, les pastilles (maquette v1, le telephone) */
.carte { display: flex; gap: var(--dv-px-12); align-items: center; padding: var(--dv-px-10); background: var(--fond);
  border: 1px solid var(--bordure); border-radius: var(--m-rayon); color: var(--texte); text-decoration: none; }
.carte img { flex: none; width: var(--m-px-52); height: var(--m-px-52); object-fit: contain; border-radius: var(--dv-px-8);
  background: var(--fond); border: 1px solid var(--bordure-fine); }
.carte__txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--dv-px-4); }
.carte__nom { font-weight: var(--dv-graisse-600); font-size: var(--dv-pt-14); line-height: 1.25; }
.carte__meta { font-size: var(--dv-pt-12); color: var(--texte-doux); }
.carte--retard { border-color: var(--danger); box-shadow: inset var(--dv-px-4) 0 0 var(--danger); }
.carte--lem { box-shadow: inset var(--dv-px-3) 0 0 var(--lem-filet); }

.btn { min-height: var(--m-bouton); width: 100%; padding: 0 var(--dv-px-16); border-radius: var(--m-rayon); border: 1px solid var(--primaire);
  background: var(--primaire); color: var(--texte-inverse); font: inherit; font-size: var(--dv-pt-16); font-weight: var(--dv-graisse-700);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dv-px-10); text-decoration: none; cursor: pointer; }
.btn .ic { width: var(--m-px-22); height: var(--m-px-22); }
.btn:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); }
.btn--sec { background: var(--fond); color: var(--primaire-fonce); border-color: var(--bordure-forte); }
.btn--sec:hover { background: var(--fond-survol); color: var(--primaire-fonce); border-color: var(--bordure-forte); }
.btn--succes { background: var(--succes); border-color: var(--succes); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--fond-inactif); color: var(--texte-doux); border-color: var(--bordure); cursor: default; }
.pile { display: flex; flex-direction: column; gap: var(--dv-px-10); }

.puces { display: flex; flex-wrap: wrap; gap: var(--dv-px-8); }
.puces .puce { height: var(--m-cible); padding: 0 var(--dv-px-16); border-radius: var(--dv-px-999); font-size: var(--dv-pt-14);
  font-weight: var(--dv-graisse-600); }

.pastille { display: inline-flex; align-items: center; gap: var(--dv-px-4); width: fit-content; height: var(--m-px-22);
  padding: 0 var(--dv-px-8); border-radius: var(--dv-px-999); font-size: var(--dv-pt-11); font-weight: var(--dv-graisse-600); white-space: nowrap; }
.pastille--ok { background: var(--succes-fond); color: var(--succes); }
.pastille--neutre { background: var(--fond-inactif); color: var(--texte-moyen); }
.pastille--danger { background: var(--danger-fond); color: var(--danger); }
.pastille--alerte { background: var(--alerte-fond); color: var(--alerte-texte); }

/* ---- la barre du bas : 4 liens et le bouton central « J'ai faim » (anneau orange LEM) ---------- */
body.avec-nav main { padding-bottom: calc(var(--m-nav) + var(--dv-px-24) + env(safe-area-inset-bottom)); }
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: calc(var(--m-nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: 1fr 1fr var(--m-nav-centre) 1fr 1fr;
  align-items: center; background: var(--fond); border-top: 1px solid var(--bordure); }
.nav__lien { min-height: var(--m-cible); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--dv-px-3); font-size: var(--dv-pt-10-5); color: var(--texte-doux); text-decoration: none; }
.nav__lien .ic { width: var(--m-px-22); height: var(--m-px-22); }
.nav__lien--actif { color: var(--primaire-fonce); font-weight: var(--dv-graisse-700); }
.nav__faim { justify-self: center; position: relative; top: calc(-1 * var(--dv-px-16)); width: var(--m-px-64); height: var(--m-px-64);
  display: flex; align-items: center; justify-content: center; border-radius: var(--dv-px-999); background: var(--primaire);
  color: var(--texte-inverse); border: var(--dv-px-4) solid var(--fond); box-shadow: 0 0 0 var(--dv-px-3) var(--lem-accent), var(--ombre-bouton); }
.nav__faim .ic { width: var(--dv-px-30); height: var(--dv-px-30); }
.nav :focus-visible { outline-offset: var(--dv-px-2); }

/* ---- la page d'erreur ------------------------------------------------------------------ */
.erreur { max-width: var(--m-erreur-max); margin: var(--dv-px-32) auto 0; display: flex; flex-direction: column; align-items: center; gap: var(--dv-px-8);
  text-align: center; }
.erreur__code { margin: 0; font-size: var(--dv-pt-14); font-weight: var(--dv-graisse-700); color: var(--texte-doux);
  font-variant-numeric: tabular-nums; }
.erreur__mot { margin: 0; font-size: var(--dv-pt-22); }
.erreur__message { margin: 0; color: var(--texte-moyen); }
.erreur__retour { margin-top: var(--dv-px-16); width: auto; }

/* ---- le bureau (au-dela du telephone) ------------------------------------------------- */
@media (min-width: 640px) {
  .bande { padding: 0 var(--dv-px-20); gap: var(--m-px-14); }
  .signature img { height: var(--dv-px-26); }
  .signature { padding: var(--dv-px-10) 0; }
  .signature .signature__losange { margin: 0 var(--dv-px-6); }
  main { padding: var(--dv-px-24) var(--dv-px-20) var(--dv-px-32); }
  .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}