/* ============================================================
   Design v2 : base des pages redessinées (accueil, fiches packs, FAQ) et sections de l'accueil.
   Chargé après styles.css et v2-chrome.css (includes/head.php, $page_css = 'v2').
   Les variables sont posées sur .mq-v2 (le <main> des pages v2) par v2-chrome.css : le bandeau
   cookies et les fenêtres de connexion gardent celles du site.
   ============================================================ */
/* La barre de navigation est fixe : le contenu commence sous elle (comme pages-dark.css). */
body { padding-top: var(--nav-h); }
.mq-v2 { font-family: var(--font); color: var(--txt); line-height: 1.6; }
:where(.mq-v2) img { display: block; max-width: 100%; height: auto; }
:where(.mq-v2) ol { list-style: none; }
:where(.mq-v2) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.mq-v2) :focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }

/* ── Liens, surtitres, petits éléments ─────────────────────── */
.mq-link { display: inline-flex; align-items: center; gap: 8px; color: var(--o); font-size: 15px; font-weight: 800; transition: gap .2s; }
.mq-link:hover { gap: 12px; }
.mq-kicker { display: block; color: var(--o); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
/* Petit trait orange devant le surtitre, de chaque côté quand le titre est centré. */
.mq-kicker::before, .mq-head--center .mq-kicker::after {
  content: ''; display: inline-block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--og); vertical-align: middle; transform: translateY(-2px);
}
.mq-kicker::before { margin-right: 10px; }
.mq-head--center .mq-kicker::after { margin-left: 10px; }
.mq-sub { margin-top: 16px; max-width: 580px; color: var(--mut); font-size: 16px; line-height: 1.7; }
.mq-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--grn); flex-shrink: 0; }
.mq-grad { background: var(--og); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:where(.mq-v2) h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; margin-top: 14px; }
.mq-hero .mq-btn--ghost { background: rgba(255,255,255,.05); border-width: 1px; border-color: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mq-hero .mq-btn--ghost:hover { background: rgba(255,255,255,.09); border-color: var(--o); color: var(--o); }

/* ── En-tête ───────────────────────────────────────────────── */
/* Le hero et le bandeau « Ils m'ont fait confiance » (118 px) remplissent ensemble le premier
   écran sous la barre de navigation (76 px) ; contenu centré verticalement. */
.mq-hero {
  position: relative; overflow: hidden; padding: 48px 0 56px;
  min-height: calc(100vh - 194px); min-height: calc(100svh - 194px);
  display: flex; align-items: center;
  background:
    radial-gradient(ellipse 45% 60% at 78% 45%, rgba(247,147,29,.16), transparent 70%),
    radial-gradient(rgba(247,147,29,.1) 1px, transparent 1px) 0 0 / 28px 28px;
}
/* Reflet qui passe sur la partie orange du titre, comme sur du métal poli. */
.mq-hero h1 .mq-grad {
  background: linear-gradient(105deg, #F7931D 0%, #ffd080 38%, #fff4df 50%, #F7931D 62%, #ffd080 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  animation: mqSheen 8s cubic-bezier(.45,0,.25,1) 1.5s infinite;
}
@keyframes mqSheen { 0% { background-position: 100% 0; } 32%, 100% { background-position: 0 0; } }
.mq-hero > .mq-wrap { position: relative; z-index: 1; }
.mq-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.mq-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px;
  border: 1px solid var(--ol); border-radius: 999px; background: var(--od);
  color: var(--o); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.mq-hero h1 { margin: 26px 0 22px; font-size: clamp(40px, 5.4vw, 72px); font-weight: 800; line-height: 1.03; letter-spacing: -.045em; }
.mq-lead { max-width: 560px; color: var(--mut); font-size: 18px; line-height: 1.7; }
.mq-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.mq-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; color: var(--mut); font-size: 13px; }
.mq-checks li { display: inline-flex; align-items: center; gap: 6px; }
.mq-checks i { color: var(--grn); }
.mq-trust {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 36px;
  padding: 14px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card);
  transition: border-color .2s;
}
.mq-trust:hover { border-color: var(--ol); }
.mq-avatars { display: flex; }
.mq-avatars img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--card); object-fit: cover; }
.mq-avatars img + img { margin-left: -10px; }
.mq-trust-item { display: flex; flex-direction: column; font-size: 13px; color: #d6d6d6; line-height: 1.35; }
.mq-trust-item strong { color: #fff; }
.mq-trust-item .mq-big { font-size: 18px; }
.mq-trust-item span:last-child { color: var(--mut); }
.mq-sep { width: 1px; height: 32px; background: #262626; }

.mq-hero-visual { position: relative; height: 560px; }
/* Écrans d'ordinateur portable peu hauts : on resserre pour garder le bandeau clients visible. */
@media (min-width: 1025px) and (max-height: 940px) {
  .mq-hero { padding: 24px 0 28px; }
  .mq-hero h1 { margin: 18px 0 16px; font-size: clamp(40px, 4.2vw, 58px); }
  .mq-hero-visual { height: 480px; }
}
@media (min-width: 1025px) and (max-height: 800px) {
  .mq-hero { padding: 14px 0 18px; }
  .mq-hero h1 { margin: 14px 0 12px; font-size: clamp(38px, 3.8vw, 52px); }
  .mq-hero-visual { height: 440px; }
}
/* Fenêtre de navigateur sombre qui présente la capture d'un site. */
.mq-browser { display: block; overflow: hidden; border-radius: 12px; background: #0f0f0f; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -18px rgba(0,0,0,.8); }
.mq-browser-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #1a1a1a; border-bottom: 1px solid rgba(255,255,255,.06); }
.mq-browser-bar i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #3a3a3a; }
.mq-browser-bar i:first-child { background: var(--o); }
.mq-browser-bar em { min-width: 0; margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: rgba(255,255,255,.05); font-style: normal; font-size: 11px; color: #8d8d8d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.mq-fan { position: absolute; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.mq-fan--1 { top: 30px; left: 0; width: 70%; transform: rotate(-5deg); }
.mq-fan--2 { top: 52px; right: 0; width: 70%; transform: rotate(4deg); }
.mq-fan--3 { top: 168px; left: 10%; width: 80%; z-index: 2; }
.mq-fan--3 .mq-browser { border-color: rgba(255,255,255,.16); box-shadow: 0 40px 80px -16px rgba(0,0,0,.85), 0 0 0 1px rgba(247,147,29,.12); }
.mq-hero-visual:hover .mq-fan--1 { transform: rotate(-7deg) translate(-12px, -6px); }
.mq-hero-visual:hover .mq-fan--2 { transform: rotate(6deg) translate(12px, -6px); }
.mq-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--line2); border-radius: 999px;
  background: rgba(16,16,16,.95); box-shadow: 0 12px 30px rgba(0,0,0,.45);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.mq-chip strong { color: var(--o); }
.mq-chip--price { top: 0; right: 36px; }
.mq-chip--cwv { top: 410px; right: 0; }
.mq-chip--cwv i { color: var(--grn); font-size: 16px; }
.mq-founder {
  position: absolute; z-index: 3; left: 0; bottom: -50px;
  display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px;
  border: 1px solid var(--line2); border-radius: 18px; background: rgba(16,16,16,.96);
  box-shadow: 0 24px 50px rgba(0,0,0,.55);
}
.mq-founder img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 2px solid var(--ol); }
.mq-founder div { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.mq-founder strong { font-size: 15px; }
.mq-founder span { font-size: 12px; color: var(--mut); }
.mq-founder em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--grn); }
.mq-founder em .mq-dot { width: 7px; height: 7px; }

/* ── Clients ───────────────────────────────────────────────── */
.mq-clients { border-top: 1px solid #161616; border-bottom: 1px solid #161616; background: #0a0a0a; }
.mq-clients-in { min-height: 116px; display: flex; align-items: center; gap: 40px; }
.mq-clients-label { flex-shrink: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.mq-clients-list { flex-grow: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; color: #7a7a7a; }
/* Logos clients : blancs monochromes (tailles équilibrées à surface égale), atténués, nets au survol. */
.mq-cl { display: block; opacity: .5; transition: opacity .25s ease; }
.mq-cl:hover, .mq-cl:focus-visible { opacity: 1; }
.mq-v2 .mq-cl img { display: block; max-width: none; }

/* ── Sections ──────────────────────────────────────────────── */
.mq-section { padding: 104px 0; }
/* Sections alternées : filets lumineux qui s'estompent sur les bords, à la place des bordures. */
.mq-section--alt {
  background:
    linear-gradient(90deg, transparent, rgba(247,147,29,.28), transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(247,147,29,.16), transparent) bottom / 100% 1px no-repeat,
    var(--bg2);
}
/* Décor des sections : le langage de l'en-tête (halo orange, trame de points),
   en plus discret et placé différemment d'une section à l'autre. */
.mq-deco { position: relative; overflow: hidden; }
.mq-deco > * { position: relative; z-index: 1; }
.mq-deco::before, .mq-deco::after { content: ''; position: absolute; z-index: 0; pointer-events: none; }
.mq-deco::before { width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(247,147,29,.09), rgba(247,147,29,0) 65%); }
.mq-deco::after {
  width: 560px; height: 460px;
  background: radial-gradient(rgba(247,147,29,.1) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent);
  mask-image: radial-gradient(closest-side, #000 25%, transparent);
}
.mq-deco--tl::before { top: -300px; left: -260px; }
.mq-deco--tl::after { top: 30px; right: -60px; }
.mq-deco--br::before { bottom: -320px; right: -240px; }
.mq-deco--br::after { bottom: 10px; left: -60px; }
.mq-deco--phone::before { display: none; }
.mq-deco--phone::after { top: 50%; right: 3%; width: 660px; height: 660px; transform: translateY(-50%); }
.mq-deco--photo::before { top: 50%; left: -200px; transform: translateY(-50%); }
.mq-deco--photo::after { top: 20px; right: -40px; }
.mq-deco--line::before { top: 150px; left: 50%; width: 1100px; height: 380px; border-radius: 0; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(247,147,29,.08), rgba(247,147,29,0)); }
.mq-deco--line::after { display: none; }
.mq-deco--center::before { top: -400px; left: 50%; width: 920px; height: 820px; transform: translateX(-50%); }
.mq-deco--center::after { top: 0; left: 50%; width: 780px; height: 380px; transform: translateX(-50%); }
.mq-deco--faq::before { top: -320px; left: -300px; }
.mq-deco--faq::after { top: 50px; left: -40px; width: 480px; height: 400px; }
.mq-head { margin-bottom: 48px; }
.mq-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.mq-head--split h2 { max-width: 720px; }
.mq-head--split p { max-width: 420px; color: var(--mut); font-size: 16px; line-height: 1.7; }
.mq-head--center { text-align: center; }
.mq-head--center p { margin: 12px auto 0; max-width: 600px; color: var(--mut); font-size: 16px; line-height: 1.7; }

/* ── Services en mosaïque ──────────────────────────────────── */
.mq-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(172px, auto); gap: 16px; }
.mq-card {
  display: flex; flex-direction: column; padding: 24px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--card);
  transition: border-color .25s, transform .25s;
}
.mq-card:hover { border-color: var(--ol); transform: translateY(-3px); }
.mq-card strong { margin-top: 14px; font-size: 17px; }
.mq-card-desc { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--mut); }
.mq-card-tag { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 800; color: var(--o); }
.mq-card-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--od); color: var(--o); font-size: 21px; }
.mq-card--hero {
  grid-column: span 2; grid-row: span 2; padding: 34px;
  border-color: var(--ol); border-radius: 24px;
  background: linear-gradient(140deg, rgba(247,147,29,.16), var(--card) 62%);
}
.mq-card-icon--solid { width: 56px; height: 56px; border-radius: 16px; background: var(--og); color: var(--ink); font-size: 28px; }
.mq-card--hero h3 { margin: 24px 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.mq-card--hero p { max-width: 480px; font-size: 16px; line-height: 1.7; color: #b5b5b5; }
.mq-card-foot { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mq-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mq-pills span { padding: 7px 14px; border: 1px solid #333; border-radius: 999px; font-size: 13px; font-weight: 600; }
.mq-price { text-align: right; font-size: 34px; font-weight: 800; color: var(--o); line-height: 1.1; }
.mq-price small { display: block; font-size: 12px; font-weight: 500; color: var(--mut); }
.mq-card--all {
  grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 30px; border: 1px dashed rgba(247,147,29,.45); background: rgba(247,147,29,.04);
}
.mq-card--all > span:first-child { display: flex; flex-direction: column; }
.mq-card--all strong { margin-top: 0; font-size: 19px; }
.mq-bento-cards { display: contents; }
.mq-dots { display: none; }
.mq-round { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--og); color: var(--ink); font-size: 20px; }

/* ── Secteurs ──────────────────────────────────────────────── */
.mq-sectors { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.mq-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 28px; max-width: 640px; }
.mq-tags a, .mq-tags button { padding: 9px 16px; border: 1px solid #2a2a2a; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.mq-tags a:hover, .mq-tags button:hover { border-color: var(--ol); color: var(--o); }
.mq-tags a.is-on, .mq-tags button.is-on { border-color: var(--o); background: var(--od); color: var(--o); font-weight: 700; }
.mq-tags--sm a { padding: 7px 14px; }
.mq-sector-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.mq-phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; }
.mq-phone-wrap::before { content: ''; position: absolute; top: 8%; left: 50%; width: min(420px, 100%); height: 480px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(247,147,29,.22), transparent 65%); filter: blur(30px); pointer-events: none; }
.mq-phone {
  position: relative; width: 300px; height: 600px; overflow: hidden;
  border: 10px solid #1b1b1b; border-radius: 40px; background: #15100b;
  box-shadow: 0 0 0 1px #262626, 0 40px 80px rgba(0,0,0,.6);
}
.mq-phone iframe { width: 390px; height: 806px; border: 0; transform: scale(.718); transform-origin: 0 0; pointer-events: none; }
.mq-phone-wrap figcaption { position: relative; font-size: 13px; color: var(--mut); }
.mq-phone-wrap figcaption a { color: var(--o); font-weight: 800; }
/* Le téléphone entier ouvre l'exemple en grand ; l'indication apparaît au survol (toujours visible au doigt). */
.mq-phone-box { position: relative; }
.mq-phone-hit {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 24px; border-radius: 40px; cursor: zoom-in;
}
.mq-phone-hint {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--ol); border-radius: 999px;
  background: rgba(12,12,12,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--txt); font-size: 13px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  opacity: 0; translate: 0 6px; transition: opacity .2s, translate .2s;
}
.mq-phone-hint i { color: var(--o); font-size: 16px; }
.mq-phone-hit:hover .mq-phone-hint, .mq-phone-hit:focus-visible .mq-phone-hint { opacity: 1; translate: 0 0; }
.mq-phone-hit:focus-visible { outline: 2px solid var(--o); outline-offset: 4px; }
@media (hover: none) { .mq-phone-hint { opacity: 1; translate: none; } }

/* Fenêtre « exemple en grand ». */
html.mq-lock { overflow: hidden; }
.mq-demo {
  width: min(1320px, calc(100vw - 48px)); height: calc(100vh - 48px); height: calc(100dvh - 48px);
  max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden;
  border: 1px solid var(--line2); border-radius: 20px; background: var(--bg2); color: var(--txt);
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
}
.mq-demo[open] { display: flex; flex-direction: column; }
.mq-demo::backdrop { background: rgba(0,0,0,.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mq-demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px 12px 22px; border-bottom: 1px solid var(--line); }
.mq-demo-name { display: flex; flex-direction: column; margin-right: auto; line-height: 1.3; }
.mq-demo-name span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--o); }
.mq-demo-name strong { font-size: 17px; font-weight: 800; }
.mq-demo-view { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #262626; border-radius: 999px; background: var(--bg); }
.mq-demo-view button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--mut); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; }
.mq-demo-view button.is-on { background: var(--o); color: var(--ink); }
.mq-demo-view i { font-size: 16px; }
.mq-demo-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 50%; background: none; color: var(--txt); font-size: 18px; cursor: pointer; transition: border-color .2s, color .2s; }
.mq-demo-icon:hover { border-color: var(--o); color: var(--o); }
.mq-demo-stage { flex: 1; min-height: 0; display: flex; justify-content: center; background: #0a0a0a; }
.mq-demo-stage iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.mq-demo-stage[data-view="mobile"] { padding: 18px 0; background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(247,147,29,.12), transparent 70%), #0a0a0a; }
.mq-demo-stage[data-view="mobile"] iframe { width: 390px; max-width: calc(100% - 24px); border: 8px solid #1b1b1b; border-radius: 34px; box-shadow: 0 0 0 1px #262626, 0 30px 60px rgba(0,0,0,.6); }
/* Sur téléphone : plein écran, l'exemple s'affiche déjà en mobile ; le bouton de la page passe sur sa ligne. */
@media (max-width: 767px) {
  .mq-demo { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  .mq-demo-bar { padding: 10px 10px 10px 16px; }
  .mq-demo-view { display: none; }
  .mq-demo-cta { order: 9; flex-basis: 100%; }
  .mq-demo-stage[data-view] { padding: 0; background: #0a0a0a; }
  .mq-demo-stage[data-view] iframe { width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
}

/* ── Réalisations ──────────────────────────────────────────── */
.mq-works { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mq-work { display: flex; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--card); transition: border-color .25s, transform .25s; }
.mq-work:hover { border-color: var(--ol); transform: translateY(-3px); }
/* La fenêtre émerge du bas d'une scène sombre légèrement éclairée. */
.mq-work-media {
  display: flex; align-items: flex-end; width: 42%; flex-shrink: 0; overflow: hidden; padding: 20px 20px 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(247,147,29,.14), rgba(247,147,29,0) 60%), #121212;
}
.mq-work-media .mq-browser { width: 100%; border-bottom: 0; border-radius: 10px 10px 0 0; transform: translateY(10px); transition: transform .35s ease; }
.mq-work:hover .mq-work-media .mq-browser { transform: translateY(0); }
/* Petites cartes : la fenêtre, plus grande que sa colonne, n'en montre que le coin haut gauche. */
.mq-work:not(.mq-work--big) .mq-work-media { width: 46%; padding: 26px 0 0 22px; }
.mq-work:not(.mq-work--big) .mq-work-media .mq-browser { flex-shrink: 0; width: 215%; border-right: 0; border-radius: 10px 0 0 0; }
.mq-work--big { grid-row: span 2; flex-direction: column; border-radius: 24px; }
.mq-work--big .mq-work-media { width: 100%; padding: 30px 34px 0; }
.mq-work-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; }
.mq-work-cat { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--o); }
.mq-work-body strong { font-size: 18px; line-height: 1.3; }
.mq-work--big .mq-work-body strong { font-size: 22px; letter-spacing: -.02em; }
.mq-work-body > span:not([class]) { font-size: 14px; line-height: 1.6; color: var(--mut); }
.mq-work-quote { margin-top: 6px; padding-left: 14px; border-left: 2px solid var(--o); font-size: 14px; font-style: italic; line-height: 1.6; color: #d6d6d6; }
.mq-work-quote em { display: block; margin-top: 4px; font-size: 12px; font-style: normal; font-weight: 700; color: var(--mut); }
.mq-work-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--o); }
.mq-work--big .mq-work-body { flex-grow: 1; gap: 10px; padding: 26px 28px; }

/* ── À propos ──────────────────────────────────────────────── */
/* Qui suis-je : texte à gauche, portrait à droite entouré de quatre badges. */
.mq-about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 72px; align-items: center; }
.mq-about-text .mq-sub { max-width: 620px; }
.mq-about-text .mq-sub + .mq-sub { margin-top: 12px; }
.mq-about-text .mq-sub strong { color: var(--txt); }
.mq-about-quote { margin: 26px 0 24px; padding: 20px 24px; border-left: 3px solid var(--o); border-radius: 0 16px 16px 0; background: rgba(255,255,255,.03); font-size: 17px; font-style: italic; line-height: 1.65; color: #e6e6e6; }
.mq-about-quote cite { display: block; margin-top: 10px; font-size: 13px; font-style: normal; font-weight: 700; color: var(--mut); }
.mq-stack { margin-bottom: 26px; }
.mq-stack span { color: #bdbdbd; }
.mq-about-pic { position: relative; justify-self: center; margin: 0; padding: 40px 0; }
.mq-about-pic::before { content: ''; position: absolute; inset: -30px -60px; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(247,147,29,.18), transparent); }
.mq-about-photo { position: relative; z-index: 1; width: 220px; height: 280px; border-radius: 24px; will-change: transform; }
.mq-v2 .mq-about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 24px; border: 1px solid var(--ol); box-shadow: 0 0 40px rgba(247,147,29,.2), 0 30px 60px -20px rgba(0,0,0,.9); }
/* Au survol, une lumière orange fait le tour du cadre (même dégradé que sur le site). */
@property --mq-fdr-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mqFdrSpin { to { --mq-fdr-a: 360deg; } }
.mq-about-photo::before {
  content: ''; position: absolute; inset: -1px; z-index: 2; padding: 2px; border-radius: 25px; pointer-events: none;
  background: conic-gradient(from var(--mq-fdr-a), transparent 0%, transparent 72%, rgba(247,147,29,.25) 78%, #f7931d 83%, #ffd080 86%, #f7931d 89%, rgba(247,147,29,.25) 94%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude;
  opacity: 0; transition: opacity .5s ease; animation: mqFdrSpin 2.5s linear infinite;
}
.mq-about-pic:hover .mq-about-photo::before { opacity: 1; }
.mq-fs {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 11px 16px;
  border: 1px solid var(--line2); border-radius: 16px; background: rgba(16,16,16,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -14px rgba(0,0,0,.85);
  font-size: 12px; line-height: 1.3; color: var(--mut); white-space: nowrap; transition: translate .18s ease;
}
.mq-fs strong { display: inline-flex; align-items: center; gap: 7px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--o); }
.mq-fs--1 { top: 18px; right: -92px; }
.mq-fs--2 { top: 128px; left: -118px; }
.mq-fs--3 { bottom: 104px; right: -128px; }
.mq-fs--4 { bottom: 14px; left: -70px; border-color: rgba(34,197,94,.35); transition: border-color .2s, transform .2s, translate .18s ease; }
.mq-fs--4 strong { color: var(--txt); }
/* Points « Disponible » : un halo vert pulse, comme sur le site. */
@keyframes mqDotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 50% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }
.mq-fs--4 .mq-dot, .mq-badge .mq-dot { animation: mqDotPulse 2s ease-in-out infinite; }
.mq-fs--4:hover { border-color: var(--grn); transform: translateY(-2px); }

/* ── Méthode ───────────────────────────────────────────────── */
.mq-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; text-align: center; }
.mq-steps::before { content: ''; position: absolute; top: 30px; left: 12.5%; right: 12.5%; height: 1px; background: linear-gradient(90deg, rgba(247,147,29,.5), rgba(247,147,29,.08)); }
.mq-steps li { position: relative; display: flex; flex-direction: column; align-items: center; }
/* Flèche entre deux étapes : sur la ligne à l'horizontale, vers le bas quand elles s'empilent. */
.mq-steps li:not(:last-child)::after {
  content: ''; position: absolute; top: 19px; left: calc(100% + 16px); width: 22px; height: 22px; margin-left: -11px;
  border-radius: 50%; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7931D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.mq-step-n { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: #151515; border: 1px solid var(--ol); color: var(--o); font-size: 22px; font-weight: 800; }
.mq-step-n--first { background: var(--og); border-color: transparent; color: var(--ink); }
.mq-steps strong { margin-top: 20px; font-size: 18px; }
.mq-steps li > span:last-child { margin-top: 8px; max-width: 250px; font-size: 14px; line-height: 1.65; color: var(--mut); }
/* Engagements, sous la méthode. */
.mq-promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
.mq-promises li { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.mq-promises i { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--od); color: var(--o); font-size: 20px; }
.mq-promises span { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.5; color: var(--mut); }
.mq-promises strong { font-size: 15px; color: var(--txt); }

/* ── Avis ──────────────────────────────────────────────────── */
.mq-reviews { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.mq-score { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.mq-score > strong { font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.mq-score > span { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--mut); line-height: 1.5; }
.mq-stars--lg { font-size: 22px; }
.mq-score-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--mut); }
.mq-score-note i { color: var(--o); font-size: 16px; }
.mq-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mq-quote { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); display: flex; flex-direction: column; }
.mq-quote blockquote { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: #d6d6d6; }
.mq-quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.mq-quote figcaption img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.mq-quote figcaption span { display: flex; flex-direction: column; font-size: 12px; color: var(--mut); }
.mq-quote figcaption strong { font-size: 14px; color: var(--txt); }
.mq-quote--big { grid-column: 1 / -1; padding: 34px 36px; border-color: var(--ol); border-radius: 24px; background: linear-gradient(160deg, rgba(247,147,29,.1), var(--card) 60%); }
.mq-quote--big blockquote { margin: 14px 0 22px; font-size: 19px; font-weight: 500; color: var(--txt); }
.mq-quote-mark { font-family: Georgia, serif; font-size: 64px; line-height: .6; color: var(--o); }

/* ── Tarifs ────────────────────────────────────────────────── */
.mq-toggle { display: inline-flex; gap: 4px; margin-top: 26px; padding: 4px; border: 1px solid #262626; border-radius: 999px; background: var(--bg); }
.mq-toggle button { height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--mut); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; }
.mq-toggle button.is-on { background: var(--o); color: var(--ink); }
.mq-head--center .mq-toggle-note { min-height: 1.7em; margin-top: 14px; font-size: 14px; }
/* Réassurance sous le sélecteur achat / location. */
.mq-assur { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 16px 0 0; padding: 0; }
.mq-assur li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--mut); }
.mq-assur i { color: var(--o); font-size: 17px; }
.mq-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mq-plan { position: relative; display: flex; flex-direction: column; padding: 34px 32px; border: 1px solid #222; border-radius: 24px; background: var(--card); }
.mq-plan--pop { border: 1.5px solid var(--o); background: linear-gradient(170deg, rgba(247,147,29,.12), var(--card) 55%); }
.mq-plan-badge { position: absolute; top: -13px; left: 32px; padding: 5px 14px; border-radius: 999px; background: var(--og); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mq-plan-name { font-size: 22px; }
.mq-plan-for { margin-top: 6px; font-size: 14px; color: var(--mut); }
.mq-plan-price { margin-top: 22px; font-size: 48px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.mq-plan--pop .mq-plan-price { color: var(--o); }
.mq-plan-unit { font-size: 12px; color: var(--faint); }
.mq-plan ul { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 28px; padding-top: 22px; border-top: 1px solid #262626; font-size: 14px; color: #d6d6d6; }
.mq-plan li { display: flex; gap: 8px; align-items: flex-start; }
.mq-plan li i { color: var(--o); margin-top: 3px; }
.mq-plan ul li:first-child { font-weight: 700; color: var(--txt); }
.mq-plan .mq-btn { margin-top: auto; }
.mq-plan-promise { display: flex; align-items: center; gap: 8px; margin: -8px 0 22px; font-size: 13px; font-weight: 600; color: var(--grn); }
.mq-addons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 34px; }
.mq-addons-label { margin-right: 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.mq-addons a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid #2a2a2a; border-radius: 999px; font-size: 14px; color: #d6d6d6; transition: border-color .2s; }
.mq-addons a:hover { border-color: var(--ol); }
.mq-addons a i { color: var(--o); font-size: 17px; }
.mq-addons a strong { color: var(--o); }

/* ── Toulouse ──────────────────────────────────────────────── */
.mq-local { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.mq-local-text { padding: 96px 64px 96px max(32px, calc((100vw - var(--sbw, 0px) - 1400px) / 2 + 32px)); }
.mq-local-text .mq-tags { margin: 26px 0 26px; }
.mq-local-photo { position: relative; overflow: hidden; margin: 0; }
.mq-v2 .mq-local-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.mq-local-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg) 0%, rgba(8,8,8,.2) 35%, rgba(8,8,8,0) 60%); }
.mq-local-photo figcaption {
  position: absolute; z-index: 2; right: 28px; bottom: 28px;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(8,8,8,.6);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.mq-local-photo figcaption i { color: var(--o); }

/* ── Blog ──────────────────────────────────────────────────── */
.mq-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mq-post { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--card); transition: border-color .25s, transform .25s; }
.mq-post:hover { border-color: var(--ol); transform: translateY(-3px); }
.mq-v2 .mq-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mq-post-body { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
.mq-post-cat { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--o); }
.mq-post-body strong { font-size: 18px; line-height: 1.35; letter-spacing: -.01em; }
.mq-post-body > span:not([class]) { font-size: 14px; line-height: 1.6; color: var(--mut); }
.mq-post-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--faint); }
.mq-post-foot span { display: inline-flex; align-items: center; gap: 6px; }
.mq-post-foot span:last-child { font-weight: 800; color: var(--o); }

/* ── FAQ ───────────────────────────────────────────────────── */
.mq-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.mq-faq-more { margin-top: 34px; padding: 24px; border: 1px solid var(--ol); border-radius: 18px; background: rgba(247,147,29,.05); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mq-faq-more strong { font-size: 17px; }
.mq-faq-more span { margin-bottom: 10px; font-size: 14px; color: var(--mut); line-height: 1.6; }
.mq-faq-more .mq-link { margin-top: 12px; font-size: 14px; }
.mq-faq-item { border-bottom: 1px solid #222; }
.mq-faq-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; border: 0; background: none; cursor: pointer; text-align: left; font-size: 17px; font-weight: 700; }
.mq-faq-item button i { color: var(--o); font-size: 20px; transition: transform .25s; flex-shrink: 0; }
.mq-faq-item p { display: none; padding-bottom: 22px; font-size: 15px; line-height: 1.7; color: var(--mut); }
.mq-faq-item.is-open p { display: block; }
.mq-faq-item.is-open button i { transform: rotate(180deg); }

/* ── Contact ───────────────────────────────────────────────── */
.mq-rdv { display: flex; align-items: center; gap: 22px; margin-bottom: 24px; padding: 22px 28px; border: 1px solid var(--line2); border-radius: 22px; background: var(--card); }
.mq-rdv-icon { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--od); color: var(--o); font-size: 26px; }
.mq-rdv-text { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.55; color: var(--mut); }
.mq-rdv-text strong { font-size: 17px; color: var(--txt); }
.mq-contact {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; padding: 52px 56px;
  border: 1px solid rgba(247,147,29,.4); border-radius: 30px;
  background: radial-gradient(ellipse 50% 90% at 0% 0%, rgba(247,147,29,.16), transparent 70%), #0e0e0e;
}
.mq-contact h2 { margin-top: 0; }
.mq-contact .mq-kicker + h2 { margin-top: 14px; }
.mq-me { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.mq-v2 .mq-me img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 2px solid var(--ol); }
.mq-me span { display: flex; flex-direction: column; font-size: 14px; color: var(--mut); }
.mq-me strong { font-size: 17px; color: var(--txt); }
.mq-coords { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; font-size: 15px; color: var(--mut); }
.mq-coords li { display: flex; align-items: center; gap: 12px; }
.mq-coords i { color: var(--o); font-size: 19px; }
.mq-coords a { color: var(--txt); }
.mq-coords li > span { color: var(--mut); }
.mq-form { display: flex; flex-direction: column; gap: 14px; }
.mq-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mq-form label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.mq-form input, .mq-form select, .mq-form textarea {
  width: 100%; padding: 14px 16px; border: 1px solid #2a2a2a; border-radius: 12px;
  background: #151515; font-size: 15px; letter-spacing: normal; text-transform: none; outline: 0;
}
.mq-form input:focus, .mq-form select:focus, .mq-form textarea:focus { border-color: var(--o); }
.mq-form textarea { resize: vertical; }
.mq-form select option { background: #151515; color: var(--txt); }
/* Choix unique en pastilles : chaque ligne est remplie sur toute la largeur. */
.mq-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.mq-choice legend { margin-bottom: 9px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.mq-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mq-form .mq-choice-list label { position: relative; display: block; flex: 1 1 auto; letter-spacing: normal; text-transform: none; }
.mq-choice-list input { position: absolute; opacity: 0; pointer-events: none; }
.mq-choice-list span {
  display: block; padding: 12px 16px; border: 1px solid #2a2a2a; border-radius: 12px; background: #151515;
  text-align: center; font-size: 14px; font-weight: 600; color: #d6d6d6; cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.mq-choice-list span:hover { border-color: #3a3a3a; color: var(--txt); }
.mq-choice-list input:checked + span { border-color: var(--o); background: var(--od); color: var(--o); }
.mq-choice-list input:focus-visible + span { outline: 2px solid var(--o); outline-offset: 2px; }
.mq-form .mq-btn { margin-top: 4px; }
.mq-form .mq-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.mq-form-hint { margin-top: -6px; font-size: 12px; color: var(--faint); }
.mq-form-more { border: 1px dashed #333; border-radius: 12px; padding: 0 16px; }
.mq-form-more summary { padding: 14px 0; font-size: 14px; font-weight: 700; color: var(--o); cursor: pointer; }
.mq-form-more[open] { padding-bottom: 16px; }
.mq-form-more .mq-form-row { margin-bottom: 14px; }
.mq-form-guarantee { display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 13px; color: var(--mut); }
.mq-form-guarantee i { color: var(--grn); font-size: 16px; }
/* Retour de l'envoi du formulaire. */
.mq-form-result { padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.55; }
.mq-form-result[hidden] { display: none; }
.mq-form-result.is-ok { border: 1px solid rgba(34,197,94,.3); background: rgba(34,197,94,.12); color: var(--grn); }
.mq-form-result.is-ko { border: 1px solid rgba(248,113,113,.3); background: rgba(248,113,113,.12); color: #f87171; }
.mq-form-gdpr { font-size: 11.5px; line-height: 1.6; color: var(--faint); }
.mq-form-gdpr a { color: var(--mut); text-decoration: underline; text-underline-offset: 2px; }

/* ── Apparitions ───────────────────────────────────────────── */
/* Classes posées par le script de la page (sans JavaScript, tout reste visible). On anime
   « translate » et non « transform » pour ne pas écraser les inclinaisons existantes.
   L'animation attend en pause sur son état de départ (masqué), démarre à l'apparition, et ne
   fixe aucun état final : chaque élément retrouve ensuite ses propres styles. */
@keyframes mqRise { from { opacity: 0; translate: 0 28px; } }
@keyframes mqFromLeft { from { opacity: 0; translate: -40px 0; } }
@keyframes mqFromRight { from { opacity: 0; translate: 40px 0; } }
.mq-rv { animation: mqRise .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards paused; }
.mq-rv-l { animation: mqFromLeft .85s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards paused; }
.mq-rv-r { animation: mqFromRight .85s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards paused; }
.mq-st > * { animation: mqRise .7s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s) + var(--i, 0) * 90ms) backwards paused; }
.mq-rv.is-in, .mq-rv-l.is-in, .mq-rv-r.is-in, .mq-st.is-in > * { animation-play-state: running; }

/* Premier écran (accueil, fiches packs, FAQ) : même apparition, mais en CSS dès le premier affichage.
   Avec le script, sur mobile lent, l'en-tête s'affichait, disparaissait puis réapparaissait. */
@media (prefers-reduced-motion: no-preference) {
  :is(.mq-hero-text, .mq-clients-list, .pk-hero-text, .fq-hero-grid > :first-child) > * { animation: mqRise .7s cubic-bezier(.2,.7,.2,1) calc(var(--d0, 0s) + var(--k, 0) * 90ms) backwards; }
  :is(.mq-hero-text, .mq-clients-list, .pk-hero-text, .fq-hero-grid > :first-child) > :nth-child(2) { --k: 1; }
  :is(.mq-hero-text, .mq-clients-list, .pk-hero-text, .fq-hero-grid > :first-child) > :nth-child(3) { --k: 2; }
  :is(.mq-hero-text, .mq-clients-list, .pk-hero-text, .fq-hero-grid > :first-child) > :nth-child(4) { --k: 3; }
  :is(.mq-hero-text, .mq-clients-list, .pk-hero-text, .fq-hero-grid > :first-child) > :nth-child(5) { --k: 4; }
  :is(.mq-hero-text, .mq-clients-list, .pk-hero-text, .fq-hero-grid > :first-child) > :nth-child(6) { --k: 5; }
  :is(.mq-hero-text, .mq-clients-list, .pk-hero-text, .fq-hero-grid > :first-child) > :nth-child(7) { --k: 6; }
  :is(.mq-hero-text, .mq-clients-list, .pk-hero-text, .fq-hero-grid > :first-child) > :nth-child(n+8) { --k: 7; }
  /* Le titre, contenu principal (LCP), est visible dès le premier affichage ; le reste apparaît autour. */
  :is(.mq-hero-text, .pk-hero-text, .fq-hero-grid > :first-child) > h1 { animation: none; }
  .mq-clients-list { --d0: .6s; }
  .mq-hero-visual { animation: mqRise .8s cubic-bezier(.2,.7,.2,1) .35s backwards; }
  .pk-hero-visual { animation: mqFromRight .85s cubic-bezier(.2,.7,.2,1) .3s backwards; }
  .fq-search { animation: mqRise .8s cubic-bezier(.2,.7,.2,1) .25s backwards; }
}

/* ── Barre d'action mobile ─────────────────────────────────── */
.mq-sticky { display: none; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .mq-hero-grid, .mq-sectors, .mq-reviews, .mq-faq, .mq-contact { grid-template-columns: 1fr; }
  .mq-hero-visual { height: 600px; max-width: 620px; width: 100%; justify-self: center; }
  .mq-founder { bottom: -30px; }
  .mq-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mq-works { grid-template-columns: 1fr; grid-template-rows: none; }
  .mq-work--big { grid-row: auto; }
  .mq-work:not(.mq-work--big) .mq-work-media .mq-browser { width: 150%; }
  .mq-about { grid-template-columns: 1fr; gap: 24px; }
  .mq-about-pic { margin-top: 8px; }
  .mq-steps { grid-template-columns: 1fr; gap: 64px; max-width: 460px; margin: 0 auto; }
  .mq-steps::before { display: none; }
  .mq-steps li:not(:last-child)::after { top: auto; left: 50%; bottom: -44px; transform: rotate(90deg); }
  .mq-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .mq-plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .mq-posts { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .mq-local { grid-template-columns: 1fr; }
  .mq-local-text { padding: 80px 32px 48px; }
  .mq-local-photo { height: 380px; }
  .mq-local-photo::before { background: linear-gradient(180deg, var(--bg) 0%, rgba(8,8,8,0) 30%); }
  .mq-clients-in { flex-direction: column; justify-content: center; gap: 18px; padding: 28px 32px; }
  .mq-clients-list { justify-content: center; }
}
@media (max-width: 640px) {
  .mq-deco::before { width: 480px; height: 480px; }
  .mq-deco::after { width: 340px; height: 300px; }
  .mq-deco--phone::after { top: auto; bottom: 30px; right: -40px; width: 400px; height: 400px; transform: none; }
  .mq-deco--photo::before { top: -120px; left: -200px; transform: none; }
  .mq-deco--line::before { top: 140px; width: 520px; height: 900px; }
  .mq-deco--center::before { top: -260px; width: 600px; height: 560px; }
  .mq-deco--center::after { width: 380px; height: 280px; }
  /* Après la règle du conteneur (v2-chrome.css), qui remettrait à zéro l'espacement vertical du bandeau. */
  .mq-clients-in { padding-top: 36px; padding-bottom: 36px; gap: 22px; }
  .mq-hero { padding: 36px 0 64px; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
  .mq-lead { font-size: 16px; }
  /* Pleine largeur, texte centré : marges réduites et retour à la ligne possible, pour qu'un libellé long
     (espagnol surtout) n'élargisse pas la colonne au-delà de l'écran. */
  .mq-ctas .mq-btn { flex: 1 1 100%; padding-left: 24px; padding-right: 24px; white-space: normal; text-align: center; }
  /* Bloc de confiance : grille 2 × 2 (avatars | note Google, avis | expérience) plutôt qu'un retour à la ligne au hasard. */
  .mq-trust { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); align-items: center; gap: 14px 16px; padding: 16px 18px; }
  .mq-avatars { grid-area: 1 / 1; }
  .mq-trust-item--google { grid-area: 1 / 3; }
  .mq-trust-item--reviews { grid-area: 2 / 1; }
  .mq-trust-item--years { grid-area: 2 / 3; }
  .mq-sep { grid-column: 2; align-self: stretch; height: auto; }
  .mq-sep--1 { grid-row: 1; }
  .mq-sep--2 { grid-row: 2; }
  .mq-hero-visual { height: 420px; margin-top: 8px; }
  .mq-chip--price { right: 0; font-size: 12px; padding: 7px 12px; }
  .mq-chip--cwv { display: none; }
  .mq-founder { bottom: -26px; padding: 9px 14px 9px 9px; }
  .mq-founder img { width: 40px; height: 40px; }
  .mq-founder span { display: none; }
  .mq-section { padding: 64px 0; }
  .mq-head { margin-bottom: 32px; }
  .mq-head--split { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mq-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .mq-card--hero, .mq-card--all { grid-column: auto; grid-row: auto; }
  .mq-card--hero { padding: 26px; }
  .mq-card--hero h3 { font-size: 26px; }
  .mq-card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 18px; }
  .mq-card--hero { flex-direction: column; align-items: stretch; }
  .mq-card strong { margin-top: 0; flex: 1; }
  .mq-card-desc { width: 100%; order: 3; }
  .mq-card-tag { margin-top: 0; padding-top: 0; }
  .mq-card--all { flex-wrap: nowrap; }
  .mq-card--all .mq-card-desc { order: 0; }
  .mq-phone { width: 270px; height: 540px; }
  .mq-phone iframe { transform: scale(.641); }
  .mq-work { flex-direction: column; }
  .mq-work-media, .mq-work--big .mq-work-media, .mq-work:not(.mq-work--big) .mq-work-media { width: 100%; padding: 18px 18px 0; }
  .mq-work:not(.mq-work--big) .mq-work-media .mq-browser { width: 100%; border-right: 1px solid rgba(255,255,255,.1); border-radius: 10px 10px 0 0; }
  .mq-work--big .mq-work-body { padding: 22px 20px; }
  /* Sur mobile, les badges passent sous la photo, en grille de deux. */
  .mq-about-pic { justify-self: stretch; display: flex; flex-direction: column; align-items: center; padding: 0; }
  .mq-about-pic::before { inset: -20px 0 40%; }
  .mq-about-pic figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 18px; }
  .mq-fs { position: static; white-space: normal; }
  .mq-fs strong { font-size: 17px; }
  .mq-about-quote { font-size: 15px; padding: 16px 18px; }
  .mq-steps { grid-template-columns: 1fr; }
  .mq-promises { grid-template-columns: 1fr; }
  .mq-score > strong { font-size: 64px; }
  .mq-quotes { grid-template-columns: 1fr; }
  .mq-quote--big { padding: 26px 22px; }
  .mq-quote--big blockquote { font-size: 16px; }
  .mq-plan { padding: 30px 22px; }
  .mq-addons { flex-direction: column; align-items: stretch; }
  .mq-assur { gap: 6px 14px; }
  .mq-assur li { font-size: 13px; }
  .mq-addons-label { margin: 0 0 4px; text-align: center; }
  .mq-addons a { justify-content: center; }
  .mq-local-text { padding: 64px 20px 40px; }
  .mq-local-photo { height: 300px; }
  .mq-rdv { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .mq-rdv .mq-btn { width: 100%; }
  .mq-contact { padding: 28px 20px; border-radius: 22px; gap: 32px; }
  .mq-form-row { grid-template-columns: 1fr; }
  /* Barre collée au bas de l'écran : elle passe sous la zone du bas des iPhone (safe-area)
     et son fond se prolonge en dessous, pour ne jamais laisser voir la page sous elle
     quand la barre d'outils du navigateur se replie. */
  .mq-sticky:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: center; gap: 10px;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-top: 1px solid var(--line2); background: #0c0c0c; box-shadow: 0 60px 0 0 #0c0c0c;
    font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--mut);
  }
  .mq-sticky > span { flex-grow: 1; display: flex; flex-direction: column; line-height: 1.35; }
  .mq-sticky-close { width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 50%; background: #1b1b1b; color: var(--mut); cursor: pointer; }
  .v2-home .mq-top { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Cartes en carrousel : on les fait glisser du doigt, la suivante dépasse. */
  .mq-swipe {
    display: flex; gap: 14px; max-width: none;
    margin-inline: -20px; padding: 4px 20px 8px; scroll-padding-inline: 20px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mq-swipe::-webkit-scrollbar { display: none; }
  .mq-swipe::after { content: ''; flex: 0 0 6px; }
  .mq-swipe > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  .mq-bento-cards.mq-swipe > * { flex-basis: 64%; }
  .mq-swipe > .mq-card { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; padding: 20px; }
  .mq-swipe > .mq-card strong { flex: none; margin-top: 14px; }
  .mq-swipe > .mq-card .mq-card-desc { order: 0; }
  .mq-swipe > .mq-card .mq-card-tag { margin-top: auto; padding-top: 12px; }
  .mq-plans.mq-swipe { padding-top: 18px; margin-top: -8px; }
  .mq-plans.mq-swipe > * { flex-basis: 88%; }
  .mq-quotes.mq-swipe > .mq-quote--big blockquote { font-size: 15px; }
  .mq-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .mq-dots span { width: 6px; height: 6px; border-radius: 999px; background: #333; transition: width .25s, background .25s; }
  .mq-dots span.is-on { width: 20px; background: var(--o); }
}
@media (prefers-reduced-motion: reduce) {
  .mq-v2 *, .mq-v2 *::before, .mq-v2 *::after { transition: none !important; }
  .mq-pulse, .mq-hero h1 .mq-grad, .mq-fs--4 .mq-dot, .mq-badge .mq-dot { animation: none; }
  .mq-rv, .mq-rv-l, .mq-rv-r, .mq-st > * { animation: none; }
}