/* ============================================================
   FPRO - pack restaurant : ses rubriques a lui.
   Chargee apres base, themes et direction, donc toutes les variables
   de la palette en cours sont disponibles. Rien ici ne connait la
   direction : ces rubriques doivent tenir dans les trois.
   ============================================================ */

/* --- galeries : menus, plats, salle ---------------------------------------
   Un restaurant se choisit avec les yeux. C'est la rubrique qui compte le
   plus, et elle n'a pas d'equivalent chez un praticien : d'ou une rubrique
   propre au metier plutot qu'un « texte avec image » de plus.
   -------------------------------------------------------------------------- */

/* les styles de base de la galerie vivent dans base.css : elle sert a tous les metiers */


/* Le centrage d'une rangee incomplete est desormais dans base.css : il valait
   pour les seize metiers, pas pour le seul restaurant. Ne restent ici que les
   reglages qui appartiennent vraiment a ce metier. */

/* les photos de menus se lisent : format portrait, plus grandes, moins par ligne */
/* « min(300px, 100%) » et non « 300px » : sur un telephone de 320 pixels,
   une colonne minimale de 300 pixels depasse la zone de texte et fait
   defiler la page. La colonne ne peut plus etre plus large que la place. */
.galerie--menus .galerie__grille { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.galerie--menus .galerie__grille:not(:has(> :nth-child(3))) > .galerie__item { flex: 1 1 320px; max-width: 400px; }
/* Le cadre suit la photo, il ne la commande pas.
   Ce champ recoit deux choses tres differentes : la photo d'une carte ou d'une
   ardoise, plus haute que large, et la photo d'un plat, plus large que haute.
   Un cadre fixe en 3/4 convenait a la premiere et ruinait la seconde. Mesure
   du 14 septembre sur une photo de 1536x960 : le dessin faisait 338x211 dans
   un cadre de 338x458, soit 134 px de blanc au-dessus et 134 en dessous. Plus
   de vide que de photo, et le client croit que son image est mal cadree alors
   que c'est le cadre qui est faux.
   Le cadre prend donc les proportions de la photo. Une hauteur maximale reste,
   pour qu'une carte photographiee en tres haut format ne remplisse pas l'ecran
   a elle seule. Les items s'alignent en haut, faute de quoi une rangee de
   photos de hauteurs differentes flotterait. */
.galerie--menus .galerie__grille { align-items: start; }
.galerie--menus .galerie__item img {
  aspect-ratio: auto;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  background: var(--surface);
  padding: 10px;
}

/* la premiere photo de la salle prend toute la largeur */
.galerie--salle .galerie__item:first-child { grid-column: 1 / -1; }
.galerie--salle .galerie__item:first-child img { aspect-ratio: 21 / 9; }

/* --- menus et formules -----------------------------------------------------
   Une carte, pas un tableau de tarifs : le libelle a droit a la place, le
   prix se pose au bout de la ligne, comme sur une ardoise.
   -------------------------------------------------------------------------- */

.menus__liste { list-style: none; margin: 0 0 24px; padding: 0; max-width: 46rem; }
.menu {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--trait);
}
.menu:first-child { border-top: 1px solid var(--trait); }
.menu__libelle { flex: 1; }
.menu__prix {
  font-family: var(--titres);
  font-size: 1.35rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--accent-fonce);
}
.menus__mention { max-width: 46rem; }
.menus__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* La direction 3 centre ses titres et, dans base, la colonne des rubriques
   de texte. Les rubriques propres a ce pack (menus, galeries) doivent suivre,
   sinon un titre centre surplombe une colonne collee a gauche. */
html[data-direction="3"] .menus .section__corps,
html[data-direction="3"] .menus__liste,
html[data-direction="3"] .menus__mention { margin-inline: auto; }
html[data-direction="3"] .menus__actions { justify-content: center; }
/* meme largeur pour le paragraphe, la liste et la mention : les bords s'alignent */
html[data-direction="3"] .menus .section__corps { max-width: 46rem; }

/* sur fond sombre, les filets et le prix suivent */
.section--accent .menu { border-color: color-mix(in srgb, var(--encre-contraste) 24%, transparent); }
.section--accent .menu__prix { color: var(--encre-contraste); }
.section--accent .galerie__item figcaption { color: color-mix(in srgb, var(--encre-contraste) 78%, transparent); }


/* --- corrections de contraste sur les rubriques communes -------------------
   Deux textes des gabarits partages passaient sous le seuil de 4,5 pour 1.
   Les deux relevent du meme defaut de fond, deja rencontre trois fois dans ce
   projet : une classe utilitaire ne sait pas sur quel fond elle atterrit.

   1. En direction 2, la rubrique de contact passe sur fond d'encre. La feuille
      de direction rattrape h2, .etiq et .section__corps, mais pas .urgence ni
      .mention, ajoutees plus tard. Resultat : gris-vert sur presque noir,
      3,10 pour 1.
   2. En direction 1, la carte d'adresse est posee sur l'accent et sa mention
      est en blanc a 80 % d'opacite : 4,39 pour 1, juste sous le seuil.

   La correction vit ici plutot que dans base.css parce que base.7.css est deja
   servi avec un cache d'un an et ne se modifie plus. Chaque pack la porte.
   -------------------------------------------------------------------------- */

html[data-direction="2"] .contact .urgence,
html[data-direction="2"] .contact .mention,
html[data-direction="2"] .contact small {
  color: color-mix(in srgb, var(--encre-contraste) 82%, transparent);
}
html[data-direction="2"] .contact .urgence a,
html[data-direction="2"] .contact .mention a { color: var(--encre-contraste); }

html[data-direction="1"] .lieu .mention {
  color: color-mix(in srgb, var(--encre-contraste) 94%, transparent);
}