/* ==========================================================================
   Flushr — page « Espace commerces » (marques.html)
   S'appuie sur landing.css (tokens --cm-*, titres, boutons, cartes, étapes)
   et n'ajoute que les blocs propres à la page, préfixe `mq-`.
   ========================================================================== */

.mq-head { max-width: 760px; }
.mq-head--center { margin-inline: auto; text-align: center; }

/* ── hero : texte à gauche, photo arrondie à droite ──────────────────────── */
.mq-hero { display: grid; gap: 28px; padding-block: 32px 24px; align-items: center; }
.mq-hero .cm-hero__title { font-size: clamp(32px, 3.5vw, 48px); }
.mq-hero__tagline {
  margin-top: 14px; color: var(--flush);
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em;
}
.mq-hero__text .cm-btn { margin-top: 26px; }

.mq-hero__art { position: relative; }
.mq-hero__art > img {
  width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover;
  border-radius: 28px; box-shadow: var(--cm-shadow-up);
}

/* Fiche flottante « Café du Marché » posée sur la photo. */
.mq-place {
  position: relative; z-index: 1; margin: -48px 16px 0; padding: 16px 18px;
  background: #fff; border: 1px solid var(--cm-line); border-radius: 20px; box-shadow: var(--shadow-lift);
}
.mq-place__name {
  display: flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--cm-navy);
}
.mq-place__name .icon { width: 20px; height: 20px; color: var(--good-500); stroke: none; }
.mq-place__verified { display: block; font-size: 11px; font-weight: 600; color: var(--good-600); }
.mq-place .cm-ui__addr { margin-top: 6px; }
.mq-place__btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; height: 34px; padding-inline: 14px;
  border-radius: 999px; border: 1.5px solid var(--flush-200); color: var(--flush); font-size: 12px; font-weight: 700;
}

@media (min-width: 960px) {
  .mq-hero { grid-template-columns: 5fr 6fr; gap: 48px; padding-block: 56px 40px; min-height: 560px; }
  .mq-hero__art > img { aspect-ratio: 4 / 4.2; object-position: 62% 50%; }
  .mq-place { position: absolute; left: -48px; bottom: 32px; margin: 0; width: 290px; }
}
@media (min-width: 1200px) { .mq-hero__art > img { aspect-ratio: 1 / 1; } }

/* ── comment ça marche : grand panneau bleu pâle ─────────────────────────── */
.mq-panel {
  padding: 32px 24px; border-radius: 28px;
  background: linear-gradient(110deg, var(--flush-50) 0%, var(--paper-tint) 60%, var(--paper-cool) 100%);
  border: 1px solid var(--flush-100);
}
.mq-steps .cm-step__num { box-shadow: 0 0 0 5px var(--flush-50); background: #fff; color: var(--flush); }
.mq-steps .cm-step:nth-child(even) .cm-step__num { background: #fff; color: var(--flush-navy); }
@media (min-width: 900px) { .mq-panel { padding: 48px; } }

/* ── la fiche ────────────────────────────────────────────────────────────── */
.mq-product { display: grid; gap: 32px; align-items: center; }
.mq-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.mq-product__img {
  margin: 0; border-radius: 28px; overflow: hidden; background: #fff;
  border: 1px solid var(--cm-line); box-shadow: var(--cm-shadow-up);
}
.mq-product__img img { width: 100%; height: auto; }
@media (min-width: 960px) { .mq-product { grid-template-columns: 4fr 7fr; gap: 56px; } }

.mq-product__note { margin-top: 20px; font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }

/* ── demande de devis : intro à gauche, formulaire à droite ──────────────── */
.mq-quote { display: grid; gap: 28px; align-items: start; }
.mq-quote__card {
  padding: 24px; background: #fff; border: 2px solid var(--flush); border-radius: 24px;
  box-shadow: 0 18px 40px -18px rgba(23, 89, 224, .35);
}
.mq-quote .cm-btn { border: 0; cursor: pointer; font-family: inherit; }
.mq-quote .cm-btn:disabled { opacity: .6; cursor: progress; }
@media (min-width: 960px) {
  .mq-quote { grid-template-columns: 4fr 7fr; gap: 56px; }
  .mq-quote__intro { position: sticky; top: 96px; }
  .mq-quote__card { padding: 36px; }
}

/* ── FAQ en accordéons ───────────────────────────────────────────────────── */
.mq-faq { display: grid; gap: 8px; }
.mq-faq__list { display: grid; gap: 10px; }
.mq-faq details {
  background: #fff; border: 1px solid var(--cm-line); border-radius: 18px; box-shadow: var(--shadow-chip);
  transition: border-color .2s ease;
}
.mq-faq details[open] { border-color: var(--flush-200); }
.mq-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 700; color: var(--cm-navy);
}
.mq-faq summary::-webkit-details-marker { display: none; }
.mq-faq summary .icon { color: var(--flush); transition: transform .2s ease; }
.mq-faq details[open] summary .icon { transform: rotate(180deg); }
.mq-faq details p { padding: 0 20px 18px; font-size: 14px; line-height: 1.65; color: var(--cm-text-2); }
@media (min-width: 960px) { .mq-faq { grid-template-columns: 4fr 7fr; gap: 56px; align-items: start; } }

/* Le footer porte aussi « Demander un devis ». */
.cm-footer__top > .cm-btn { align-self: flex-start; }
@media (min-width: 768px) { .cm-footer__top > .cm-btn { align-self: center; } }