/* ═══════════════════════════ Le menu de la machine ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * ── La machine à café du bureau, quatre carrosseries ──
 *
 * Le contenu et la structure ne bougent pas : l'enseigne au nom du service, l'écran, six boutons
 * (une boisson, une humeur), la fente à monnaie et son prix, la niche du gobelet. Chaque style est
 * une carrosserie :
 * - **Rétro** : le distributeur orange des années 70, façade crème, écran ambre ;
 * - **Inox** : l'acier brossé, boutons noirs, écran vert ;
 * - **Pop** : rouge et jaune, comme une machine de fête foraine ;
 * - **Nuit** : noir mat et écran ambre, la machine du couloir à 19 h.
 *
 * Polices servies par nous (point 2) : Roboto Condensed par `theme.css`, Anton et Press Start 2P
 * (l'écran) ici. **Aucune marque** de café, de distributeur ni d'entreprise réelle.
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en tête,
 * et nulle part ailleurs. `[data-style]` ne nomme pas `.mk` exprès, pour que les échantillons du
 * formulaire se colorent avec les mêmes variables.
 */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/press-start-2p-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/press-start-2p-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --m-mur : le mur derrière la machine ; --m-mur-texte : la phrase du bas ; --m-corps : la
   carrosserie ; --m-bord : son liseré ; --m-corps-texte : ce qui est écrit sur la carrosserie ;
   --m-enseigne / --m-enseigne-texte : le bandeau lumineux ; --m-ecran / --m-led : l'écran et ses
   lettres ; --m-bouton / --m-bouton-texte / --m-bouton-ombre : un bouton, son texte, son relief ;
   --m-led-fond / --m-led-num : la pastille numérotée ; --m-panneau / --m-panneau-texte : le
   monnayeur ; --m-fente : la fente ; --m-niche / --m-niche-texte : la niche du gobelet ;
   --m-gobelet : le gobelet ; --m-halo : la lueur de l'écran. */
[data-style="Rétro"] {
  --m-mur: #f2e6cf; --m-mur-texte: #3a2416; --m-corps: #e2702a; --m-bord: #a8481a; --m-corps-texte: #2a160b;
  --m-enseigne: #fff4dc; --m-enseigne-texte: #3a1d0c; --m-ecran: #2a1b10; --m-led: #ffb347;
  --m-bouton: #f6e7c8; --m-bouton-texte: #2a160b; --m-bouton-ombre: #a8481a; --m-led-fond: #b8360f; --m-led-num: #fff4dc;
  --m-panneau: #f6e7c8; --m-panneau-texte: #2a160b; --m-fente: #2a160b; --m-niche: #3a2416; --m-niche-texte: #f6e7c8;
  --m-gobelet: #fff4dc; --m-halo: rgba(255, 179, 71, .55);
}
[data-style="Inox"] {
  --m-mur: #e9ecef; --m-mur-texte: #1f252b; --m-corps: #b9c0c7; --m-bord: #6c757d; --m-corps-texte: #12171c;
  --m-enseigne: #12171c; --m-enseigne-texte: #f1f3f5; --m-ecran: #0e1a0c; --m-led: #8ee66b;
  --m-bouton: #1f252b; --m-bouton-texte: #f1f3f5; --m-bouton-ombre: #0b0e11; --m-led-fond: #8ee66b; --m-led-num: #0e1a0c;
  --m-panneau: #d7dce1; --m-panneau-texte: #12171c; --m-fente: #12171c; --m-niche: #12171c; --m-niche-texte: #d7dce1;
  --m-gobelet: #f1f3f5; --m-halo: rgba(142, 230, 107, .5);
}
[data-style="Pop"] {
  --m-mur: #fff3c4; --m-mur-texte: #1b1b1b; --m-corps: #c81f35; --m-bord: #8f1426; --m-corps-texte: #fff6d6;
  --m-enseigne: #ffd23f; --m-enseigne-texte: #1b1b1b; --m-ecran: #1b1b1b; --m-led: #ffd23f;
  --m-bouton: #ffd23f; --m-bouton-texte: #1b1b1b; --m-bouton-ombre: #8f1426; --m-led-fond: #1b1b1b; --m-led-num: #ffd23f;
  --m-panneau: #fff6d6; --m-panneau-texte: #1b1b1b; --m-fente: #1b1b1b; --m-niche: #1b1b1b; --m-niche-texte: #fff6d6;
  --m-gobelet: #fff6d6; --m-halo: rgba(255, 210, 63, .5);
}
[data-style="Nuit"] {
  --m-mur: #161616; --m-mur-texte: #e9e4d8; --m-corps: #262626; --m-bord: #0c0c0c; --m-corps-texte: #e9e4d8;
  --m-enseigne: #0c0c0c; --m-enseigne-texte: #ffb000; --m-ecran: #0c0c0c; --m-led: #ffb000;
  --m-bouton: #353535; --m-bouton-texte: #f1ece0; --m-bouton-ombre: #0c0c0c; --m-led-fond: #ffb000; --m-led-num: #161616;
  --m-panneau: #353535; --m-panneau-texte: #e9e4d8; --m-fente: #0c0c0c; --m-niche: #0c0c0c; --m-niche-texte: #e9e4d8;
  --m-gobelet: #f1ece0; --m-halo: rgba(255, 176, 0, .55);
}

/* ── L'affiche ──
 *
 * Tout est en `cqw`. La machine prend toute la hauteur que lui laisse la phrase du bas ; l'écart
 * entre les formats s'absorbe dans la hauteur des boutons, jamais dans une taille de texte.
 * `--mk-t` est la taille du texte des boutons, 1 ou moins : le serveur l'estime, le script la
 * reprend au pixel. */
.mk {
  --fond: var(--m-mur); --texte: var(--m-mur-texte);
  --mk-t: 1;
  display: flex; flex-direction: column; padding: 3.6cqw 5cqw 2.6cqw;
  background: var(--m-mur); color: var(--m-corps-texte); font-family: "Roboto Condensed", system-ui, sans-serif; line-height: 1.15;
}
.mk :where(p, ol) { margin: 0; padding: 0; }
.mk__machine {
  flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative;
  background: var(--m-corps); border: .55cqw solid var(--m-bord); border-radius: 3.2cqw; padding: 3cqw 3.4cqw 3.2cqw;
  box-shadow: inset 0 0 0 .4cqw rgba(255, 255, 255, .12), inset 0 -3cqw 5cqw rgba(0, 0, 0, .18), 0 1.4cqw 0 rgba(0, 0, 0, .18);
}
/* L'inox : un acier brossé, fait de fines bandes claires et sombres. */
.mk[data-style="Inox"] .mk__machine {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 .3cqw, rgba(0, 0, 0, .04) .3cqw .7cqw), linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(0, 0, 0, .12)), var(--m-corps);
}

/* L'enseigne : « CAFÉ » en très grand, le nom du service dessous, sur une ligne qui se resserre. */
.mk__enseigne {
  flex: none; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--m-enseigne); color: var(--m-enseigne-texte); border-radius: 1.8cqw; padding: 1.6cqw 3cqw 1.8cqw;
}
.mk__enseigne-mot { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 11cqw; line-height: 1; letter-spacing: .08em; text-transform: uppercase; padding-top: .6cqw; }
.mk[data-style="Nuit"] .mk__enseigne-mot { text-shadow: 0 0 1.8cqw var(--m-halo); }
.mk__nom {
  width: 100%; white-space: nowrap; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: calc(4cqw * var(--ech, 1)); line-height: 1.2; margin-top: .4cqw;
}

.mk__ecran {
  flex: none; margin-top: 2.2cqw; background: var(--m-ecran); border-radius: 1.2cqw; padding: 2cqw 2.4cqw;
  box-shadow: inset 0 0 0 .5cqw rgba(0, 0, 0, .5), inset 0 0 3cqw rgba(0, 0, 0, .6); text-align: center;
}
.mk__ecran-texte {
  display: block; font-family: "Press Start 2P", monospace; font-size: 2.7cqw; line-height: 1.5; color: var(--m-led);
  text-shadow: 0 0 1cqw var(--m-halo); text-transform: uppercase; overflow-wrap: anywhere;
}
.mk__consigne {
  flex: none; margin: 2cqw 0 1.4cqw; text-align: center; font-weight: 700; font-size: 2cqw;
  letter-spacing: .24em; text-transform: uppercase; color: var(--m-corps-texte);
}

/* Les six boutons : une grille de deux colonnes, chaque bouton sa part de la hauteur. */
.mk__boutons { flex: 1; min-height: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 2cqw 2.2cqw; }
.mk__bouton {
  min-width: 0; min-height: 0; display: flex; align-items: center; gap: 1.8cqw; overflow: hidden;
  background: var(--m-bouton); color: var(--m-bouton-texte); border-radius: 1.6cqw; padding: 1.4cqw 2cqw;
  box-shadow: 0 .7cqw 0 var(--m-bouton-ombre), inset 0 .3cqw 0 rgba(255, 255, 255, .25);
}
.mk__led {
  flex: none; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--m-led-fond); color: var(--m-led-num); font-family: "Anton", Impact, sans-serif; font-size: 3.1cqw; line-height: 1;
  box-shadow: 0 0 1.2cqw var(--m-halo);
}
.mk__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4cqw; }
.mk__boisson {
  font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .03em;
  font-size: calc(5cqw * var(--mk-t)); line-height: 1.04; overflow-wrap: anywhere;
}
.mk__humeur { font-size: calc(3.2cqw * var(--mk-t)); line-height: 1.15; font-weight: 500; overflow-wrap: anywhere; text-wrap: pretty; }

/* Le bas : le monnayeur et son prix, la niche du gobelet. */
.mk__bas { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4cqw; margin-top: 2.6cqw; }
.mk__monnaie {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8cqw; text-align: center;
  background: var(--m-panneau); color: var(--m-panneau-texte); border-radius: 1.4cqw; padding: 1.6cqw 1.4cqw;
}
.mk__fente { width: 1.6cqw; height: 5.4cqw; border-radius: 1cqw; background: var(--m-fente); box-shadow: 0 0 0 .5cqw rgba(0, 0, 0, .12); }
.mk__inserer { font-weight: 700; font-size: 1.85cqw; letter-spacing: .14em; text-transform: uppercase; }
.mk__prix { font-size: 2.3cqw; overflow-wrap: anywhere; }
.mk__prix[hidden] { display: none; }
.mk__prix-mot { margin-right: .5em; }
.mk__prix b { font-weight: 800; }
.mk__niche {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .6cqw;
  background: var(--m-niche); color: var(--m-niche-texte); border-radius: 1.4cqw; padding: 1.6cqw 1.4cqw 1.4cqw;
  box-shadow: inset 0 1.4cqw 2.4cqw rgba(0, 0, 0, .55);
}
.mk__gobelet { width: 7.4cqw; height: auto; fill: var(--m-gobelet); stroke: var(--m-niche); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.mk__vapeur { fill: none; stroke: var(--m-gobelet); stroke-width: 1.8; opacity: .8; }
.mk__niche-mot { font-weight: 700; font-size: 1.6cqw; letter-spacing: .14em; text-transform: uppercase; }
.mk__pied { flex: none; margin-top: 2.2cqw; text-align: center; font-style: italic; font-size: 2.6cqw; color: var(--m-mur-texte); }

/* ── Le formulaire ── */
.mk-boutons { display: grid; gap: 1.2rem; margin-bottom: 1.6rem; }
.mk-boutons__titre { font-weight: 700; font-size: 1.6rem; margin: 0; }
.mk-bouton { padding: 0; border: 0; margin: 0; min-width: 0; display: grid; gap: .8rem; }
.mk-bouton legend { font-weight: 700; padding: 0; margin-bottom: .6rem; }
.mk-bouton__rang { display: flex; gap: .6rem; align-items: end; }
.mk-bouton__champ { flex: 1; min-width: 0; }
.mk-bouton__champ label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.mk-bouton__champ input { width: 100%; }
.mk-de {
  width: 4.4rem; height: 4.4rem; display: inline-flex; align-items: center; justify-content: center;
  border: .1rem solid currentColor; border-radius: .8rem; background: transparent; cursor: pointer; flex: none;
}
.mk-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mk-de svg circle { fill: currentColor; stroke: none; }
.mk-de[hidden], .mk-tout[hidden], .mk-idees[hidden] { display: none; }
.mk-tout { justify-self: start; }
.mk-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.mk-idees button {
  min-height: 4.4rem; padding: .4rem 1.2rem; border: .1rem solid currentColor; border-radius: 99rem; background: transparent;
  font: inherit; font-size: 1.3rem; cursor: pointer; text-align: left; max-width: 100%;
}
.mk-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mk-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.mk-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0;
  font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.25;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .8rem .6rem;
}
.mk-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.mk-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.mk-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.mk-echantillon {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; width: 100%; max-width: 10rem; padding: .5rem;
  background: var(--m-corps); border: .2rem solid var(--m-bord); border-radius: .8rem;
}
.mk-echantillon b {
  grid-column: 1 / -1; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.5rem; letter-spacing: .08em;
  background: var(--m-enseigne); color: var(--m-enseigne-texte); border-radius: .4rem; line-height: 1.3;
}
.mk-echantillon i { display: block; height: 1rem; border-radius: .3rem; background: var(--m-bouton); }
@media (min-width: 750px) { .mk-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }