/* Martin's Traiteur — Sélections INLINE R2 — 2026-08-15
   Le choix se fait a cote de la ligne du menu, dans la liste elegante.
   Ce fichier N'AJOUTE que le mode inline. menu-selections.css reste en place
   pour le recapitulatif et n'est pas modifie. */

/* ---- la ligne choisissable ---------------------------------------- */

.m-items li[data-mt-opt] {
  list-style: none;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding-left: 0;
  cursor: pointer;
  transition: color .18s ease;
}

/* la liste garde son tiret decoratif sur les lignes NON choisissables ;
   sur les lignes choisissables, le rond le remplace. */
.m-items li[data-mt-opt]::before { content: none; }

.mt-inline-check {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: .18em;
  border: 1.5px solid rgba(214, 138, 74, .55);
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: border-color .18s ease, background-color .18s ease, transform .12s ease;
}

/* rond pour un choix unique, carre adouci pour un choix multiple */
.mt-inline-check[data-shape="radio"] { border-radius: 50%; }
.mt-inline-check[data-shape="check"] { border-radius: 5px; }

.mt-inline-check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 9px;
  height: 5px;
  border-left: 1.7px solid #120b07;
  border-bottom: 1.7px solid #120b07;
  transform: translate(-50%, -50%) rotate(-45deg) scale(.4);
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
}

.m-items li[data-mt-opt]:hover .mt-inline-check {
  border-color: rgba(214, 138, 74, .95);
}

.mt-inline-check[aria-checked="true"] {
  background: #d68a4a;
  border-color: #d68a4a;
}

.mt-inline-check[aria-checked="true"]::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}

.mt-inline-check:focus-visible {
  outline: 2px solid #d68a4a;
  outline-offset: 3px;
}

.mt-inline-check[disabled] {
  opacity: .32;
  cursor: not-allowed;
}

.m-items li[data-mt-opt].mt-on {
  color: #f6e8d8;
}

/* ---- le compteur, discret, a cote du titre du sous-groupe ---------- */

.mt-inline-counter {
  display: inline-block;
  margin-left: .8rem;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(214, 138, 74, .8);
  vertical-align: middle;
  white-space: nowrap;
}

.mt-inline-counter[data-state="done"] { color: rgba(150, 190, 130, .95); }
.mt-inline-counter[data-state="todo"] { color: rgba(214, 138, 74, .8); }

.m-sous.mt-invalid .mt-inline-counter { color: #e08a7a; }

/* ---- le recapitulatif en bas, sans les grosses cartes -------------- */

.mt-recap {
  border: 1px solid rgba(214, 138, 74, .28);
  background: rgba(30, 18, 11, .5);
  padding: 1.6rem 1.8rem;
  margin: 0 0 2rem;
}

.mt-recap h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: #d68a4a;
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 .9rem;
}

.mt-recap ul { margin: 0; padding: 0; list-style: none; }

.mt-recap li {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .92rem;
  color: #e8dccd;
  padding: .38rem 0;
  border-bottom: 1px solid rgba(214, 138, 74, .12);
}

.mt-recap li:last-child { border-bottom: 0; }

.mt-recap .mt-recap-todo {
  color: rgba(232, 220, 205, .62);
  font-style: italic;
}

.mt-recap-empty {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .92rem;
  color: rgba(232, 220, 205, .62);
  font-style: italic;
  margin: 0;
}

@media (max-width: 640px) {
  .mt-recap { padding: 1.2rem 1.1rem; }
  .mt-inline-counter { display: block; margin: .3rem 0 0; }
}

/* legende de groupe — utilisee quand un meme sous-titre porte plusieurs
   groupes de choix ; sans elle les compteurs s'empilent sur le titre. */
.m-items li.mt-group-caption {
  list-style: none;
  display: block;
  padding: .9rem 0 .25rem;
  border-bottom: 0;
  cursor: default;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(232, 220, 205, .58);
}
.m-items li.mt-group-caption::before { content: none; }
.m-items li.mt-group-caption:first-child { padding-top: 0; }

/* ---- marquage sur un TITRE de sous-groupe -------------------------
   Cas « L'art de la table » : les trois Suggestions sont des blocs
   entiers, pas des lignes. La coche se pose sur leur titre. */

.m-sous-title[data-mt-opt] {
  display: flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
  transition: color .18s ease;
}

.m-sous-title[data-mt-opt] .mt-inline-check {
  margin-top: 0;
  width: 17px;
  height: 17px;
}

.m-sous-title[data-mt-opt]:hover { color: #f0dcc4; }
.m-sous-title[data-mt-opt].mt-on { color: #d68a4a; }

/* le bloc entier se distingue quand sa suggestion est retenue */
.m-sous:has(> .m-sous-title[data-mt-opt].mt-on) {
  border-left: 2px solid rgba(214, 138, 74, .5);
  padding-left: 1.1rem;
}