/* ==========================================================================
   Flushr — page « Espace de marque » (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; } }

/* ── offres ──────────────────────────────────────────────────────────────── */
.mq-offers { display: grid; gap: 18px; align-items: stretch; }
.mq-offer {
  position: relative; display: flex; flex-direction: column; padding: 28px 24px;
  background: #fff; border: 1px solid var(--cm-line); border-radius: 24px; box-shadow: var(--cm-shadow);
  transition: transform .25s ease, box-shadow .25s ease, opacity .6s ease;
}
.mq-offer:hover { transform: translateY(-3px); box-shadow: var(--cm-shadow-up); }
.mq-offer--featured { border: 2px solid var(--flush); box-shadow: 0 18px 40px -18px rgba(23, 89, 224, .35); }
.mq-offer__name { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--flush); }
.mq-offer__price { margin-top: 10px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--cm-navy); }
.mq-offer__desc { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--cm-text-2); }
.mq-offer__list { display: grid; gap: 10px; margin: 20px 0 24px; padding-top: 20px; border-top: 1px solid var(--cm-line); }
.mq-offer__list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cm-text); }
.mq-offer__list .icon { width: 18px; height: 18px; color: var(--good-500); stroke-width: 2.4; }
.mq-offer .cm-btn { margin-top: auto; width: 100%; height: 48px; }
.mq-offer .cm-btn--ghost { border-color: var(--flush-200); color: var(--flush); }
/* Une seule formule : carte centrée, présentation à gauche, contenu à droite. */
.mq-offers { max-width: 960px; margin-inline: auto; }
.mq-offer--single .mq-offer__intro { display: flex; flex-direction: column; }
.mq-offer--single .mq-offer__intro .cm-btn { margin-top: 24px; }
.mq-offer--single .mq-offer__list { margin-bottom: 0; }
@media (min-width: 640px) { .mq-offer--single .mq-offer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .mq-offers { grid-template-columns: 1fr; }
  .mq-offer--single { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; padding: 40px; }
  .mq-offer--single .mq-offer__intro .cm-btn { width: auto; align-self: flex-start; padding-inline: 28px; }
  .mq-offer--single .mq-offer__list { margin: 0; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--cm-line); }
}
.mq-offers__note { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--ink-dim); }
.cm-js .mq-offer.cm-reveal.is-in:hover { transform: translateY(-3px); }

/* ── réseau : image à gauche fondue dans la bannière ─────────────────────── */
.mq-network {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 28px; border: 1px solid var(--flush-100);
  background: linear-gradient(100deg, var(--paper-tint) 0%, var(--flush-50) 55%, var(--good-50) 100%);
}
.mq-network__img {
  width: 100%; height: auto; aspect-ratio: 2000 / 750; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.mq-network__text { position: relative; padding: 8px 24px 32px; }
.mq-network__text .cm-h2 { font-size: clamp(24px, 2.6vw, 34px); }
.mq-network__text > p:not(.mq-hand) { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--cm-text); }
.mq-network__text .cm-btn { margin-top: 22px; }
.mq-hand {
  margin-top: 18px; font-family: var(--cm-hand); font-weight: 600; font-size: 21px; line-height: 1.05;
  color: var(--cm-navy); transform: rotate(-3deg); transform-origin: left;
}
@media (min-width: 960px) {
  .mq-network { display: block; min-height: 420px; }
  .mq-network__img {
    position: absolute; left: 0; top: 0; width: 60%; height: 100%; aspect-ratio: auto;
    object-position: 25% 50%;
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  }
  .mq-network__text { margin-left: 56%; padding: 52px 52px 52px 0; }
}

/* ── 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; } }

/* ── CTA final : bloc bleu de l'accueil, dans la grille de la page ───────── */
.cm .cta .h2 { color: #fff; }

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