/*
 * Deux moitiés, deux intentions.
 *
 * La première — le widget « Menu Ordelya » — ne pose ni police, ni couleur, ni
 * taille : elle n'apporte que ce qu'aucun thème ne fournit, la grille des plats
 * et l'alignement du prix.
 *
 * La seconde — les six composants de carte — habille, parce qu'un encart de
 * formules ou une grille de desserts n'existe dans aucun thème : sans mise en
 * forme, ils n'auraient pas de forme du tout. Tout y passe par des variables
 * `--ordelya-*` branchées sur les globales Elementor, et chaque valeur reste
 * reprenable depuis le panneau de style du widget.
 */

.ordelya-category__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ordelya-dish {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.ordelya-dish__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ordelya-dish__price {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ordelya-dish__photo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: cover;
  align-self: flex-start;
}

/* Conducteur pointillé, activé depuis Elementor.
 *
 * Un élément à part entière et non un pseudo-élément décoratif : c'est lui qui
 * absorbe l'espace restant, ce qui colle le prix à droite quelle que soit la
 * longueur du nom. Masqué par défaut, le menu reste sobre sans réglage. */
.ordelya-dish__leader {
  display: none;
}

.ordelya-leader-yes .ordelya-dish__body {
  flex: 0 1 auto;
}

.ordelya-leader-yes .ordelya-dish__leader {
  display: block;
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted currentColor;
  opacity: 0.4;
  transform: translateY(-0.3em);
}

/* Message réservé aux administrateurs : jamais vu par un visiteur. */
.ordelya-notice {
  padding: 0.75rem 1rem;
  border-left: 3px solid currentColor;
  opacity: 0.75;
}

/* Formule : un prix pour un parcours.
 *
 * Les plats n'affichent un montant que si le restaurateur l'a demandé — un
 * supplément, ou leur prix entier. Sans cela, la ligne se lit en bloc. */
.ordelya-formule {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ordelya-formule__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.ordelya-formule__tier {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.ordelya-formule__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ordelya-formule__dish {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.ordelya-formule__dish-name {
  min-width: 0;
}

.ordelya-formule__dish-price {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

/* Le montant pris, description et allergènes passent à la ligne : sinon le prix
   se retrouve au milieu d'une phrase. */
.ordelya-formule__dish-price ~ .ordelya-formule__dish-description,
.ordelya-formule__dish-price ~ .ordelya-formule__dish-allergens {
  flex: 1 1 100%;
}

/* Même conducteur pointillé que la carte, même interrupteur Elementor. */
.ordelya-formule__dish-leader {
  display: none;
}

.ordelya-leader-yes .ordelya-formule__dish-leader {
  display: block;
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted currentColor;
  opacity: 0.4;
  transform: translateY(-0.3em);
}

.ordelya-leader-yes .ordelya-formule__dish-price {
  margin-left: 0;
}

.ordelya-formule__photo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: cover;
  align-self: flex-start;
}

.ordelya-formule__supplements {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.ordelya-formule__supplement {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

/* =========================================================================
 * Composants de carte
 *
 * Jetons branchés sur les globales Elementor : sur un site qui les a réglées,
 * la carte prend les couleurs et les polices du site sans un réglage de plus ;
 * ailleurs, elle retombe sur des valeurs neutres. `:where()` ne pèse rien en
 * spécificité — n'importe quel réglage Elementor passe devant.
 * ========================================================================= */

:where(.ordelya-list,
.ordelya-dishes,
.ordelya-menu-entry,
.ordelya-weekly-card,
.ordelya-desserts-grid,
.ordelya-wines,
.ordelya-winecard,
.ordelya-empty) {
  --ordelya-accent: var(--e-global-color-primary, currentColor);
  --ordelya-text: var(--e-global-color-secondary, inherit);
  --ordelya-muted: var(--e-global-color-text, #7a7268);
  --ordelya-rule: rgba(28, 26, 23, 0.08);
  --ordelya-dots: rgba(28, 26, 23, 0.28);
  --ordelya-hairline: rgba(28, 26, 23, 0.14);
  --ordelya-surface: #fff;
  --ordelya-surface-soft: #f6f5f2;
  --ordelya-placeholder: #e9e2d6;

  --ordelya-font-title: var(--e-global-typography-primary-font-family, inherit);
  --ordelya-font-body: var(--e-global-typography-text-font-family, inherit);
  --ordelya-font-ui: var(--e-global-typography-accent-font-family, inherit);

  --ordelya-title-lg: clamp(26px, 3vw, 32px);
  --ordelya-title-sm: 20px;
  --ordelya-text-md: 15px;
  --ordelya-text-sm: 14px;
  --ordelya-label: 11px;
  --ordelya-radius: 3px;
}

/* Message réservé à qui peut le corriger. */
.ordelya-empty {
  color: var(--ordelya-muted);
  font-style: italic;
  text-align: center;
}

/* --- Liste à prix : plats, desserts, vins ------------------------------- */

.ordelya-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ordelya-list-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--ordelya-rule);
}

.ordelya-list-item:last-child {
  border-bottom: 0;
}

.ordelya-list-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ordelya-list-name {
  font-family: var(--ordelya-font-title);
  font-size: var(--ordelya-title-sm);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ordelya-text);
}

.ordelya-list-meta {
  font-family: var(--ordelya-font-body);
  font-size: var(--ordelya-text-sm);
  font-weight: 400;
  color: var(--ordelya-muted);
}

/* Le conducteur absorbe l'espace restant : le prix reste collé à droite quelle
   que soit la longueur du nom. */
.ordelya-list-dots {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--ordelya-dots);
  transform: translateY(-3px);
}

.ordelya-list-price {
  flex: 0 0 auto;
  font-family: var(--ordelya-font-ui);
  font-size: var(--ordelya-text-md);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ordelya-accent);
}

.ordelya-list-desc,
.ordelya-list-allergens {
  margin: 4px 0 0;
  font-family: var(--ordelya-font-body);
  font-size: var(--ordelya-text-md);
  line-height: 1.5;
  color: var(--ordelya-muted);
}

.ordelya-list-allergens {
  font-size: var(--ordelya-text-sm);
  font-style: italic;
}

/* --- Catégories --------------------------------------------------------- */

.ordelya-cat-title {
  margin: 0 0 6px;
  font-family: var(--ordelya-font-title);
  font-size: var(--ordelya-title-lg);
  font-weight: 500;
  color: var(--ordelya-text);
  text-align: center;
}

.ordelya-cat-desc {
  margin: 0 0 14px;
  font-family: var(--ordelya-font-body);
  font-size: var(--ordelya-text-md);
  color: var(--ordelya-muted);
  text-align: center;
}

.ordelya-dishes-cat + .ordelya-dishes-cat,
.ordelya-wines-group + .ordelya-wines-group {
  margin-top: 36px;
}

/* --- Menu en étapes ----------------------------------------------------- */

.ordelya-menu-entry {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.ordelya-menu-entry-title {
  margin: 0 0 8px;
  font-family: var(--ordelya-font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--ordelya-muted);
}

.ordelya-menu-entry-excerpt {
  margin: 0 0 32px;
  font-family: var(--ordelya-font-body);
  font-size: var(--ordelya-text-sm);
  color: var(--ordelya-muted);
}

.ordelya-menu-entry-tiers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0 0 28px;
  font-family: var(--ordelya-font-ui);
  font-size: var(--ordelya-text-md);
}

.ordelya-menu-entry-tier-price {
  font-weight: 600;
  color: var(--ordelya-accent);
}

/* Les étapes se rangent d'elles-mêmes : trois de front sur un écran large, l'une
   sous l'autre dès que la largeur ne suffit plus, dans l'ordre du service. */
.ordelya-menu-cols {
  --ordelya-col-min: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ordelya-col-min)), 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  text-align: center;
}

/* Les filets encadrent l'intitulé d'étape, comme sur un menu imprimé. */
.ordelya-menu-col-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

.ordelya-menu-col-head::before,
.ordelya-menu-col-head::after {
  content: "";
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--ordelya-hairline);
}

.ordelya-menu-col-head > * {
  margin: 0;
  font-family: var(--ordelya-font-body);
  font-size: var(--ordelya-label);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ordelya-accent);
}

.ordelya-menu-col-items ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ordelya-menu-col-items li {
  font-family: var(--ordelya-font-title);
  font-size: 19px;
  line-height: 1.35;
  color: var(--ordelya-text);
  text-wrap: balance;
}

.ordelya-menu-choice-price {
  margin-left: 0.4em;
  font-family: var(--ordelya-font-ui);
  font-size: var(--ordelya-text-sm);
  font-weight: 600;
  color: var(--ordelya-accent);
}

.ordelya-menu-choice-desc {
  display: block;
  margin-top: 4px;
  font-family: var(--ordelya-font-body);
  font-size: var(--ordelya-text-sm);
  color: var(--ordelya-muted);
}

/* Le mot de liaison entre deux choix. Rendu en balise plutôt qu'en `content`
   pour rester traduisible et se retirer depuis le panneau. */
.ordelya-menu-choice-sep {
  display: block;
  margin-top: 18px;
  font-family: var(--ordelya-font-title);
  font-style: italic;
  font-size: var(--ordelya-text-sm);
  color: var(--ordelya-muted);
}

.ordelya-menu-col-items li:last-child .ordelya-menu-choice-sep {
  display: none;
}

.ordelya-menu-entry-note,
.ordelya-menu-entry-supplements {
  margin: 28px 0 0;
  font-family: var(--ordelya-font-title);
  font-style: italic;
  font-size: 12px;
  color: var(--ordelya-muted);
}

/* --- Encart formules ---------------------------------------------------- */

.ordelya-weekly-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
  max-width: 780px;
  margin: 0 auto;
  padding: 26px 32px;
  background: var(--ordelya-surface);
  border: 1px solid var(--ordelya-rule);
  border-radius: var(--ordelya-radius);
}

.ordelya-weekly-title,
.ordelya-weekly-excerpt {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
}

.ordelya-weekly-title {
  font-family: var(--ordelya-font-title);
  font-size: var(--ordelya-title-sm);
  font-weight: 500;
  color: var(--ordelya-text);
}

.ordelya-weekly-excerpt {
  font-family: var(--ordelya-font-body);
  font-size: var(--ordelya-text-sm);
  color: var(--ordelya-muted);
}

.ordelya-weekly-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.ordelya-weekly-tag {
  font-family: var(--ordelya-font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ordelya-accent);
}

.ordelya-weekly-prices {
  font-family: var(--ordelya-font-title);
  font-size: 19px;
  color: var(--ordelya-text);
}

.ordelya-weekly-prices strong {
  font-weight: 600;
}

.ordelya-weekly-sep {
  width: 1px;
  height: 38px;
  background: var(--ordelya-hairline);
}

.ordelya-weekly-note,
.ordelya-weekly-supplements {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-family: var(--ordelya-font-title);
  font-style: italic;
  font-size: 12px;
  text-align: center;
  color: var(--ordelya-muted);
}

.ordelya-supplement + .ordelya-supplement {
  margin-left: 14px;
}

/* Empilés, les paliers ne sont plus séparés par un filet vertical. */
@media (max-width: 560px) {
  .ordelya-weekly-card {
    flex-direction: column;
    gap: 18px;
    padding: 22px 20px;
  }

  .ordelya-weekly-sep {
    width: 38px;
    height: 1px;
  }
}

.ordelya-supplement-price {
  font-family: var(--ordelya-font-ui);
  font-style: normal;
  font-weight: 600;
  color: var(--ordelya-accent);
}

/* --- Grille de desserts -------------------------------------------------- */

.ordelya-desserts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.ordelya-dessert-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ordelya-surface-soft);
  border: 1px solid var(--ordelya-rule);
  border-radius: var(--ordelya-radius);
}

.ordelya-dessert-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ordelya-placeholder);
}

.ordelya-dessert-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ordelya-dessert-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--ordelya-placeholder),
    var(--ordelya-placeholder) 10px,
    #e1d8c9 10px,
    #e1d8c9 20px
  );
}

.ordelya-dessert-body {
  padding: 18px 20px 22px;
}

.ordelya-dessert-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-family: var(--ordelya-font-title);
  font-size: var(--ordelya-title-sm);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ordelya-text);
}

.ordelya-dessert-price {
  flex: 0 0 auto;
  font-family: var(--ordelya-font-ui);
  font-size: var(--ordelya-text-md);
  font-weight: 600;
  color: var(--ordelya-accent);
}

.ordelya-dessert-desc,
.ordelya-dessert-allergens {
  margin: 6px 0 0;
  font-family: var(--ordelya-font-body);
  font-size: var(--ordelya-text-md);
  line-height: 1.55;
  color: var(--ordelya-muted);
}

.ordelya-dessert-allergens {
  font-size: var(--ordelya-text-sm);
  font-style: italic;
}

@media (max-width: 900px) {
  .ordelya-desserts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ordelya-desserts-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Carte des vins ------------------------------------------------------ */

.ordelya-winecard {
  display: block;
  text-align: left;
}

.ordelya-winecard-switch {
  display: flex;
  width: max-content;
  gap: 30px;
  margin: 0 auto 30px;
}

.ordelya-winecard-switch button {
  appearance: none;
  padding: 9px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--ordelya-font-ui);
  font-size: var(--ordelya-text-md);
  font-weight: 600;
  color: var(--ordelya-muted);
  transition: 0.18s;
}

.ordelya-winecard-switch button.is-active {
  background: var(--ordelya-accent);
  color: var(--ordelya-surface);
}

.ordelya-winecard-pane {
  display: none;
}

/* Le lien onglet/panneau ne s'exprime pas en CSS pur dès que les contenances
   sont libres : c'est le serveur qui pose `is-active` au rendu, le JS qui le
   déplace ensuite. */
.ordelya-winecard-pane.is-active {
  display: block;
}

.ordelya-winecard-anchors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 0 0 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ordelya-rule);
}

.ordelya-winecard-anchors a {
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  font-family: var(--ordelya-font-ui);
  font-size: var(--ordelya-label);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ordelya-accent);
  transition: 0.15s;
}

.ordelya-winecard-anchors a:hover,
.ordelya-winecard-anchors a:focus-visible {
  border-bottom-color: currentColor;
}

.ordelya-wines-type {
  scroll-margin-top: 120px;
}

.ordelya-wines-type + .ordelya-wines-type {
  margin-top: 44px;
}

.ordelya-wines-region-name {
  margin: 22px 0 4px;
  font-family: var(--ordelya-font-ui);
  font-size: var(--ordelya-label);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ordelya-muted);
}

.ordelya-wines-region-name:first-of-type {
  margin-top: 10px;
}