/* =============================================================================
   Banner MaQuickPage — TOP RIBBON + BOTTOM BAR
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&display=swap');

#mqs-ribbon,
#mqs-bar-wrap {
  font-family: 'Schibsted Grotesk', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#mqs-ribbon *,
#mqs-bar-wrap * {
  box-sizing: border-box;
}

/* ── TOP RIBBON ──────────────────────────────────────────────────────────── */
#mqs-ribbon {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  z-index: 2147483645;
  background: #0a0a0a;
  color: #E8E8EC;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: 'Schibsted Grotesk', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: .005em;
  display: flex; align-items: center;
  animation: mqsRibbonIn .35s cubic-bezier(.2,.7,.2,1);
  /* Toute la bande est cliquable (cf. banner.js) : viser une puce de prix au
     doigt, sur un contenu qui défile, demandait trop de précision. */
  cursor: pointer;
}
@keyframes mqsRibbonIn {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.mqs-ribbon-inner {
  width: 100%; height: 100%;
  display: flex; align-items: stretch;
  overflow: hidden;
}
.mqs-ribbon-track {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.mqs-ribbon-left {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.mqs-ribbon-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  background: #d9f24e;
  color: #0E1014;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em;
  flex-shrink: 0;
}
.mqs-ribbon-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: mqsDot 1.8s infinite;
}
@keyframes mqsDot {
  0%   { box-shadow: 0 0 0 0   currentColor; opacity: 1;  }
  70%  { box-shadow: 0 0 0 5px transparent;  opacity: .6; }
  100% { box-shadow: 0 0 0 0   transparent;  opacity: 1;  }
}
.mqs-ribbon-cta {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-weight: 600; font-size: 14.5px;
  color: #d9f24e;
  display: inline-flex; align-items: center; cursor: pointer;
  padding: 6px 2px;
  flex-shrink: 0;
}
.mqs-ribbon-cta:hover { opacity: .85; }
.mqs-ribbon-cta svg { margin-left: 6px; }

/* ── PRIX PASSIF SUR LE RIBBON ────────────────────────────────────────────── */
/* Prix affiché en clair dans le ribbon (barre haute fixe → visible en
   permanence, sans scroll ni clic). Sur fond sombre, la puce prix est
   inversée en pastille vert-lime pour ressortir. */
.mqs-ribbon-message { color: #f4f4f2; font-size: 13px; white-space: nowrap; }
.mqs-ribbon-message b { color: #d9f24e; }
.mqs-ribbon-options { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mqs-ribbon-options button {
  position: relative; display: flex; align-items: baseline; gap: 5px;
  min-height: 34px; padding: 6px 13px; border: 1px solid #33332f;
  border-radius: 10px; background: #171717; color: #f4f4f2;
  font: inherit; cursor: pointer; white-space: nowrap;
}
.mqs-ribbon-options button small { color: #8c8c87; font-size: 9px; }
.mqs-ribbon-options button strong { font-size: 14px; color: #f4f4f2; }
.mqs-ribbon-options button.is-popular { border-color: #596a17; background: #20270f; }
.mqs-ribbon-options button.is-popular span {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  padding: 1px 7px; border-radius: 999px; background: #d9f24e; color: #182006;
  font-size: 8px; font-weight: 800;
}
.mqs-ribbon-mobile,
.mqs-ribbon-cta-mobile { display: none; }
.mqs-ribbon-price-main {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.mqs-ribbon-price-main strong {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.035em;
}
.mqs-ribbon-from,
.mqs-ribbon-period,
.mqs-ribbon-price-extra { opacity: .66; font-weight: 500; }
.mqs-ribbon-period { font-size: 12px; }
.mqs-ribbon-all-in {
  padding: 4px 8px;
  border-radius: 5px;
  background: #D4FF3A;
  color: #0E1014;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.mqs-ribbon-price-extra { font-size: 12px; }
/* Sur écrans étroits, on garde « dès 9,90 €/mois » et on lâche le détail,
   puis le texte « Ce site a été créé… » avant de toucher au prix. */
@media (max-width: 900px) { .mqs-ribbon-price-extra { display: none; } }
/* Tablette / petit laptop : le message a `white-space: nowrap` et se comprime
   sans se couper → son texte passait sous les puces de prix. En dessous de la
   largeur où tout tient côte à côte (~1060px), on le retire. Sur mobile il est
   au contraire conservé : le marquee lui donne la place de défiler. */
@media (min-width: 761px) and (max-width: 1060px) {
  .mqs-ribbon-message { display: none; }
}
/* Mobile : plutôt que de tronquer / superposer, le ribbon devient une bande
   défilante horizontalement. Tout le contenu garde sa taille normale et se lit
   en glissant latéralement. `display: contents` sur .mqs-ribbon-left fait
   remonter la puce DÉMO et le message au niveau du conteneur scrollable, ce
   qui permet de les réordonner : l'info tarifaire passe en premier, le message
   marketing en dernier. */
@media (max-width: 760px) {
  /* Repli quand le marquee est inactif (prefers-reduced-motion, ou JS non
     exécuté) : la bande reste lisible en la faisant défiler au doigt. */
  .mqs-ribbon-inner {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .mqs-ribbon-inner::-webkit-scrollbar { display: none; }
  .mqs-ribbon-track {
    flex: 0 0 auto;
    padding: 0 12px;
    gap: 10px;
    justify-content: flex-start;
  }
  .mqs-ribbon-left { display: contents; }
  .mqs-ribbon-chip { order: 1; }
  .mqs-ribbon-options { order: 2; flex: 0 0 auto; margin-left: 0; min-width: max-content; }
  .mqs-ribbon-cta { order: 3; flex: 0 0 auto; }
  .mqs-ribbon-message { order: 4; flex: 0 0 auto; padding-right: 4px; }
  /* overflow-y: hidden rogne le badge s'il déborde du ribbon → on le remonte
     juste ce qu'il faut pour qu'il reste entièrement dans les 48px. */
  .mqs-ribbon-options button.is-popular span { top: -5px; }

  /* ── Marquee : défilement automatique permanent ─────────────────────────
     Activé par banner.js (classe .is-marquee) seulement si le contenu déborde
     et que l'utilisateur n'a pas demandé de réduire les animations. La piste
     est dupliquée : les deux glissent de -100 % de leur largeur, donc le clone
     prend le relais pile quand l'original sort → boucle sans coupure.
     `overflow-x: hidden` reprend la main pour que l'animation ne crée pas de
     zone scrollable parasite. */
  #mqs-ribbon.is-marquee .mqs-ribbon-inner { overflow-x: hidden; }
  #mqs-ribbon.is-marquee .mqs-ribbon-track {
    animation: mqsMarquee var(--mqs-marquee-duration, 20s) linear infinite;
    will-change: transform;
  }
  /* Un tap fige la bande 5 s (cf. banner.js) : sans ça les puces de prix sont
     des cibles mouvantes. */
  #mqs-ribbon.is-paused .mqs-ribbon-track { animation-play-state: paused; }
}
@keyframes mqsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
/* Ceinture et bretelles : même si le JS a posé .is-marquee (par ex. le réglage
   système a changé après coup), on n'anime jamais en mode « moins d'animations ». */
@media (prefers-reduced-motion: reduce) {
  #mqs-ribbon.is-marquee .mqs-ribbon-track { animation: none; }
  #mqs-ribbon.is-marquee .mqs-ribbon-inner { overflow-x: auto; }
  .mqs-ribbon-track-clone { display: none; }
}
@media (max-width: 420px) {
  .mqs-ribbon-inner { padding: 0 10px; }
  .mqs-ribbon-price-main strong { font-size: 17px; }
  .mqs-ribbon-from { display: none; }
}

/* ── BOTTOM BAR ──────────────────────────────────────────────────────────── */
#mqs-bar-wrap {
  position: fixed;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 2147483644;
  animation: mqsBarRise .35s cubic-bezier(.2,.7,.2,1);
  font-family: 'Schibsted Grotesk', -apple-system, system-ui, sans-serif;
}
@keyframes mqsBarRise {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Largeur de la bar, exposée pour que les deux pilules (« Style du site » et
   « Modifier mon site ») viennent s'aligner exactement sur ses bords. */
:root { --mqs-bar-w: min(860px, calc(100vw - 40px)); }

.mqs-bar {
  position: relative;
  width: var(--mqs-bar-w);
  background: #0f0f0f;
  color: #f4f4f2;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 26px 70px -12px rgba(0,0,0,.62);
  padding: 15px 18px;
}

.mqs-bar-inner {
  display: flex; align-items: center; gap: 20px;
}
.mqs-domain-offer-mark {
  display: grid;
  place-items: center;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: #edf8c9;
  color: #33420a;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.mqs-sheet-handle {
  display: none;
  width: 42px;
  height: 4px;
  margin: -6px auto 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
}
.mqs-sheet-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: none;
  cursor: pointer;
  font: 400 22px/1 inherit;
}
.mqs-sheet-close:hover {
  background: #f1f1ef;
  color: #111318;
}
.mqs-sheet-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 118px;
  padding-right: 17px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.mqs-sheet-value s {
  color: rgba(255,255,255,.42);
  font-size: 14px;
}
.mqs-sheet-value strong {
  color: #cdf24d;
  font-size: 34px;
  letter-spacing: -.05em;
}

.mqs-bar-copy {
  flex: 1 1 auto; min-width: 0; line-height: 1.35;
}
.mqs-bar-mobile,
.mqs-bar-cta-mobile { display: none; }
.mqs-bar-copy-1 {
  margin-top: 0;
  font-size: 15px; font-weight: 500;
  color: #f4f4f2;
}
.mqs-bar-copy-1 b { font-weight: 700; }
.mqs-bar-copy-1 span { color: #d9f24e; }
.mqs-bar-copy-2 {
  margin-top: 10px;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.mqs-domain-offer-label {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 6px;
  background: #263500;
  color: #f5ffd7;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mqs-domain-preview { color: #d3ec66; font-size: 13px; white-space: nowrap; }
.mqs-domain-preview span { color: #b7e400; }
.mqs-domain-preview-list {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: #d3ec66;
}
.mqs-domain-preview-list strong { padding: 6px 12px; border: 1px solid rgba(217,242,78,.35); border-radius: 9px; background: rgba(217,242,78,.12); font-size: 13px; white-space: nowrap; }
.mqs-domain-preview-list strong span { color: #b7e400; }
.mqs-domain-preview-list > span { padding: 6px 11px; border: 1px dashed rgba(255,255,255,.22); border-radius: 9px; color: rgba(255,255,255,.55); font-weight: 700; }
.mqs-domain-helper { flex-basis: 100%; }
/* Kicker de la version mobile de la bar (remplace la phrase d'accroche). */
.mqs-bar-kicker {
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mqs-price-chip {
  display: inline-flex; align-items: center;
  background: rgba(205,242,77,.12); color: #cdf24d;
  font-family: inherit;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 5px;
  letter-spacing: .01em;
}

.mqs-bar-cta {
  appearance: none; border: 0; cursor: pointer;
  background: #d9f24e; color: #1c2708;
  font: inherit; font-weight: 800; font-size: 15px;
  padding: 14px 24px;
  border-radius: 12px;
  flex: 0 0 auto;
  transition: transform .15s ease, background .15s ease;
  box-shadow: none;
  white-space: nowrap;
}
.mqs-bar-action { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.mqs-bar-action small { color: rgba(255,255,255,.42); font-size: 11px; font-weight: 600; }
.mqs-bar-cta:hover { background: #dcff6b; transform: translateY(-1px); }
.mqs-bar-cta:active { transform: translateY(0); }

/* ── INLINE CONVERSION BEFORE FOOTER ─────────────────────────────────────── */
#mqs-sheet-sentinel { width: 1px; height: 1px; }

/* ── Bar responsive ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* env(safe-area-inset-bottom) : sur iPhone à encoche, la barre d'accueil
     mange les ~34 px du bas. Sans ça la CTA se retrouve dessous. Vaut 0 partout
     ailleurs (Android, iPhone à bouton), donc c'est neutre. */
  #mqs-bar-wrap {
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 40px);
  }
  .mqs-bar {
    width: 100%;
    padding: 15px 16px;
    border-radius: 16px;
  }
  .mqs-sheet-handle { display: none; }
  .mqs-domain-offer-mark {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 12px;
  }
  .mqs-bar-desktop,
  .mqs-bar-cta-desktop { display: none; }
  .mqs-bar-mobile,
  .mqs-bar-cta-mobile { display: block; }
  /* Empilement vertical : en ligne, le bouton (largeur fixe, texte insécable)
     grignotait la colonne de gauche et le nom de domaine passait dessous.
     En colonne, le texte dispose de toute la largeur quel que soit l'écran. */
  .mqs-bar-inner {
    display: grid;
    gap: 11px;
    align-items: stretch;
  }
  .mqs-bar-copy { min-width: 0; }
  .mqs-bar-action { width: 100%; align-items: stretch; gap: 0; }
  .mqs-bar-cta { width: 100%; padding: 13px 16px; font-size: 14.5px; }
  .mqs-bar-copy-2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; font-size: 12.5px; margin-top: 0; }
  .mqs-bar-kicker { flex-basis: 100%; }
  .mqs-domain-preview { font-size: 14px; }
  /* Mobile : les adresses passent en texte simple (plus de pastilles bordées),
     sinon la bar double de hauteur pour deux mots. */
  .mqs-bar-mobile .mqs-domain-preview-list { gap: 2px 8px; min-width: 0; max-width: 100%; }
  .mqs-bar-mobile .mqs-domain-preview-list strong {
    padding: 0; border: 0; background: none; font-size: 14px;
    min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
  }
  .mqs-bar-mobile .mqs-domain-preview-list > span {
    padding: 0; border: 0; font-weight: 600; font-size: 12px;
  }
  .mqs-bar-copy-2 .mqs-price-chip { display: inline-flex; margin-top: 4px; }
}

@media (max-width: 420px) {
  .mqs-domain-offer-mark { display: none; }
  .mqs-bar { padding: 14px; }
  .mqs-bar-inner { gap: 10px; }
}

/* ── Ajustements pour les sites coiffeur (navbar fixée en haut) ─────────── */
/* Le ribbon prend la place 36px en haut : on pousse la navbar existante. */
body:has(#mqs-ribbon) .navbar { top: 48px !important; }