/* ==========================================================================
   Thirdslot — page Methodology (/methodology/)
   Maquette : 2026-10-28 Thirdslot-Methodology-01.svg (1920 px de large).
   Les cotes viennent de la maquette : « y » = position dans la maquette.
   Colonne de contenu : x 433 → 1593 (1160 px) ; carte « On This Page » : x 370 → 1592 ;
   colonne « Guide » : x 41. Images : assets/methodology/ (découpées / extraites de la maquette).
   ========================================================================== */

.page-meth { --mt-ink: #1a1a2e; --mt-text: #4f4f4f; --mt-mute: #aaaab5; --mt-line: #e2e2f2; --mt-card: #f6f6fb; }

/* Le header est transparent au-dessus du hero, comme dans la maquette */
.page-meth .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.mt { overflow-x: clip; }
.mt-hero h1, .mt-body h2, .mt-body h3, .mt-body h4 { margin: 0; font-family: var(--font-head); font-weight: 500; color: var(--mt-ink); }
.mt-hero p, .mt-body p { margin: 0; }

/* ---------- Hero (bande y 0 → 1066, le header passe dessus) ---------- */
.mt-hero { position: relative; height: 1066px; margin-top: -88px; background: #fff; }
.mt-hero-bg { position: absolute; inset: 0; background: url(/assets/methodology/hero-bg.webp) center top / max(1920px, 100%) auto no-repeat; }
/* au-delà de 1920 px l'image est agrandie : on garantit le fondu vers le blanc en bas de bande */
.mt-hero-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 380px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 90%); }
.mt-hero-art { position: absolute; inset: 0; pointer-events: none; }
.mt-hero-art img { position: absolute; max-width: none; }
/* positions = x de la maquette − 960 (centre) */
.mt-hand { left: calc(50% - 1177.35px); top: 501.22px; width: 954.75px; height: auto; }
.mt-glow { left: calc(50% + 315px); top: 185.6px; width: 213.2px; }
/* boussole 3D (image à filtre d'ombre dans la maquette, qu'Illustrator affiche mais pas Chrome) */
.mt-compass { left: calc(50% + 341px); top: 149px; width: 407px; height: auto; filter: drop-shadow(10px 30px 40px rgba(208, 193, 244, 0.7)); }
.mt-sparkle { left: calc(50% + 688.12px); top: 211.64px; width: 31.55px; }

.mt-hero-inner { position: relative; z-index: 1; padding-top: 292px; text-align: center; }
.mt-pill {
  display: inline-flex; align-items: center; gap: 12px;
  height: 37px; padding: 0 20px 0 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #4a46d3 0%, #d085c2 30%, #ddd 80%) border-box;
  box-shadow: 0 8px 16px rgba(218, 218, 232, 0.5);
  font-weight: 500; font-size: 14px; color: var(--mt-ink);
}
.mt-pill img { width: 18px; height: 18px; }
.mt .mt-h1 { position: relative; margin-top: 20px; font-size: 74px; line-height: 74px; font-weight: 600; }
.mt-h1 span { display: block; }
/* soulignement dégradé sous « AI Visibility » : 396 × 6, y 489 */
.mt-h1::after {
  content: ""; position: absolute; left: 50%; top: 140px;
  width: 396px; height: 6px; margin-left: -198px; border-radius: 3px;
  background: var(--grad-underline);
  transform-origin: left center;
}
.mt .mt-hero-sub { max-width: 580px; margin: 36px auto 0; font-size: 19px; line-height: 28px; color: #505056; }
.mt .mt-updated { margin-top: 260px; font-family: var(--font-head); font-size: 16px; line-height: 19px; color: var(--mt-ink); }

/* ---------- Corps : carte sommaire + colonne Guide + contenu ---------- */
.mt-body { position: relative; z-index: 1; width: 1222px; margin: -123px 0 0 calc(50% - 590px); padding-bottom: 36px; }

/* Carte « On This Page » (y 943 → 1187) */
.mt-toc {
  height: 244px; padding: 36px 0 0 60px;
  border: 2px solid rgba(74, 70, 211, 0.8); border-radius: 24.5px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 30px rgba(172, 168, 204, 0.2);
}
.mt-toc-title { font-family: var(--font-head); font-weight: 500; font-size: 26px; line-height: 31px; color: var(--mt-ink); }
.mt-toc-list {
  display: grid; grid-template-columns: 611px 1fr; grid-template-rows: repeat(4, 22px); grid-auto-flow: column; row-gap: 10px;
  margin: 21px 0 0; padding: 0; list-style: none;
}
.mt-toc-list a { display: flex; align-items: center; font-family: var(--font-head); font-size: 18px; line-height: 22px; color: var(--mt-text); white-space: nowrap; }
.mt-toc-list a:hover { color: var(--mt-ink); }
.mt-toc-list .ic { flex: none; width: 22px; height: 22px; margin-right: 16px; background: url(/assets/methodology/ic-toc.svg) center / 22px 22px no-repeat; }
.mt-toc-list .n { display: inline-block; width: 21px; }
.mt-toc-list a[aria-current="true"] { color: #4a46d3; font-weight: 500; }
.mt-toc-list a[aria-current="true"] .ic { background-image: url(/assets/methodology/ic-toc-on.svg); }

/* Colonne « Guide » (x 41, y 1281), collante au défilement */
.mt-guide { position: absolute; left: -329px; top: 338px; bottom: 0; width: 210px; }
/* sous 1920 px, la colonne reste à 24 px du bord de la fenêtre au lieu de sortir de l’écran (50vw − 590 = bord du corps) */
.mt-guide { left: max(-329px, calc(24px - 50vw + 590px)); }
.mt-guide-in { position: sticky; top: 118px; }
.mt-guide-title { font-family: var(--font-head); font-weight: 500; font-size: 24px; line-height: 28px; color: var(--mt-ink); }
.mt-guide ol { margin: 20px 0 0; padding: 0; list-style: none; }
.mt-guide li + li { margin-top: 10px; }
.mt-guide li:nth-child(6) { margin-top: 4px; }
.mt-guide li:nth-child(8) { margin-top: 8px; }
.mt-guide a { position: relative; display: flex; padding-left: 21px; font-family: var(--font-head); font-size: 16px; line-height: 20px; color: var(--mt-text); }
.mt-guide a:hover { color: var(--mt-ink); }
.mt-guide .n { flex: none; width: 23px; }
.mt-guide a[aria-current="true"] { color: #4a46d3; font-weight: 500; }
.mt-guide a[aria-current="true"]::before { content: ""; position: absolute; left: 1px; top: 4.5px; width: 7px; height: 10px; background: url(/assets/methodology/ic-guide-marker.svg) center / contain no-repeat; }

/* Contenu (x 433 → 1593) */
.mt-main { width: 1160px; margin-left: 63px; }
.mt-h2 { position: relative; padding-left: 34px; font-size: 38px; line-height: 45px; }
.mt-h2 .n { position: absolute; left: 0; top: 4px; font-size: 32px; line-height: 39px; color: #4a46d3; }
#questions .mt-h2 { margin-top: 77px; }
#engines .mt-h2 { margin-top: 98px; }
#audit .mt-h2 { margin-top: 95px; }
#tracking .mt-h2 { margin-top: 89px; }
#reading .mt-h2 { margin-top: 92px; }
#recommendations .mt-h2 { margin-top: 104px; }
#proof .mt-h2 { margin-top: 77px; }
#limits .mt-h2 { margin-top: 88px; }
.mt-h3 { font-size: 32px; line-height: 39px; }
.mt-sec > p, .mt-tcol > p, .mt-note p, .mt-wins p, .mt-limits p { max-width: 1145px; font-size: 18px; line-height: 28px; color: var(--mt-text); }
.mt-sec > p b, .mt-dots b { font-weight: 500; color: var(--mt-ink); }
.mt-h2 + p { margin-top: 26px; }
#questions .mt-h2 + p { margin-top: 24px; }
.mt-sec > p + p { margin-top: 28px; }
.mt-h3 + p { margin-top: 12px; }

/* ---------- 1. Schéma des questions (carte y 1542 → 1932) ---------- */
.mt-qmap { position: relative; height: 390px; margin-top: 42px; border-radius: 18px; background: url(/assets/methodology/q-bg.webp) 0 0 / 100% 100% no-repeat; }
.mt-qmap > * { position: absolute; margin: 0; }
.mt-q-links { left: 269.1px; top: 108.8px; width: 361.6px; max-width: none; }
.mt-q-site { left: 76px; top: 132px; width: 209px; height: 104px; padding-top: 27px; border-radius: 12px; background: #fff; text-align: center; }
.mt-q-site img { margin: 0 auto; }
.mt-q-site span { display: block; margin-top: 10px; font-family: var(--font-head); font-weight: 500; font-size: 18px; line-height: 22px; color: var(--mt-ink); }
.mt-q-circle { left: 362.3px; top: 106.2px; width: 156.4px; height: 156.4px; text-align: center; }
.mt-q-circle img { position: absolute; inset: 0; width: 100%; max-width: none; }
.mt-q-circle b, .mt-q-circle span { position: absolute; left: 0; right: 0; }
.mt-q-circle b { top: 47.8px; font-family: var(--font-head); font-weight: 600; font-size: 36px; line-height: 43px; color: #4a46d3; }
.mt-q-circle span { top: 88.8px; font-size: 18px; line-height: 21px; color: var(--mt-ink); }
.mt .mt-q-gen { left: 361.8px; top: 272px; width: 156.4px; max-width: none; text-align: center; font-size: 16px; line-height: 19px; color: var(--mt-text); }
.mt-q-box { left: 630px; width: 225px; height: 118px; padding: 15px 0 0 26px; border-radius: 12px; background: #fff; }
.mt-q-box.b1 { top: 57px; }
.mt-q-box.b2 { top: 200px; }
.mt-q-box b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 28px; line-height: 34px; color: #4a46d3; }
.mt-q-box .l { display: block; margin-top: 9px; font-size: 18px; line-height: 21px; color: var(--mt-ink); }
.mt-q-box .s { display: block; margin-top: 5px; font-size: 15px; line-height: 18px; color: #7f7f7f; }
.mt-q-box.b2 .l { margin-top: 11px; }
.mt-q-box.b2 .s { margin-top: 4px; }
.mt-q-ex { left: 884px; padding: 0; list-style: none; font-size: 15px; line-height: 26px; color: var(--mt-text); white-space: nowrap; }
.mt-q-ex.e1 { top: 84px; }
.mt-q-ex.e2 { top: 228px; }

/* ---------- 2. Les moteurs (carte y 2197 → 2587) ---------- */
.mt-engines {
  position: relative; height: 390px; margin-top: 40px; overflow: hidden;
  border: 1px solid rgba(223, 223, 234, 0.8); border-radius: 18px;
  background: #fff url(/assets/methodology/engines-bg.webp) center / cover no-repeat;
}
.mt-engines > * { position: absolute; margin: 0; }
.mt-engines img { max-width: none; }
.mt-arc { left: -1px; top: -1px; width: 1160px; }
.lg-pplx { left: 497.5px; top: 43.2px; width: 165.6px; }
.lg-gpt { left: 244.4px; top: 136.7px; width: 165.6px; }
/* Gemini : la maquette dessine l'étoile avec une image (le vecteur, décalé, n'est pas rendu par Chrome) */
.mt-gem-box { left: 798px; top: 187px; width: 66px; height: 66px; border: 1px solid #ececf3; border-radius: 14px; background: #fff; box-shadow: 0 20px 30px rgba(193, 207, 229, 0.5); }
.mt-gem-star { left: 770.7px; top: 179.1px; width: 100px; }
.mt-eng { max-width: none; text-align: center; white-space: nowrap; translate: -50% 0; } /* translate (pas transform) : les animations posent transform */
.mt-eng b { display: block; font-weight: 600; font-size: 22px; line-height: 26px; color: var(--mt-ink); }
.mt-eng span { display: block; margin-top: 5px; font-size: 16px; line-height: 20px; color: var(--mt-text); }
.en-pplx { left: 579px; top: 191px; }
.en-gpt { left: 325.5px; top: 280px; }
.en-gem { left: 831px; top: 285px; }

/* ---------- 3. L'audit gratuit ---------- */
.mt-dots { margin: 17px 0 0; padding: 0; list-style: none; }
.mt-dots li { position: relative; padding-left: 16px; font-size: 18px; line-height: 28px; color: var(--mt-text); }
.mt-dots li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #4a46d3; }
.mt-h3.after-dots { margin-top: 42px; }
.mt-h3.after-pair { margin-top: 45px; }
.mt-h3.after-p { margin-top: 40px; }
.mt-h3.after-frame { margin-top: 49px; }
.mt-h3.after-frame2 { margin-top: 55px; }
.mt-h3.after-wins { margin-top: 46px; }

/* Cité / Mentionné (cartes y 2966 → 3266) */
.mt-pair { display: flex; gap: 41px; margin-top: 30px; }
.mt-vis { position: relative; width: 559px; height: 300px; padding: 25px 0 0 28px; border: 1px solid #dfdfea; border-radius: 20.4px; }
.mt-vis-h { display: flex; align-items: center; margin-left: 1px; font-weight: 600; font-size: 22px; line-height: 26px; color: var(--mt-ink); }
.mt-vis-h img { margin-right: 19px; }
.mt .mt-vis-k { margin-top: 22px; font-size: 17px; line-height: 20px; color: var(--mt-text); }
.mt-vis-box { position: relative; width: 507px; height: 136px; margin-top: 10px; padding: 15px 0 0 25px; border-radius: 4px 13px 13px 13px; background: #ededf9; }
.mt-vis-box p { font-size: 20px; line-height: 28px; color: #474760; white-space: nowrap; }
.mt-vis-box p b { font-weight: 500; color: var(--mt-ink); }
.mt-vis-box .ul { position: relative; }
.mt-vis-box .ul img { position: absolute; left: 2px; top: 22px; width: 108px; max-width: none; }
.mt-vis .chip {
  position: absolute; left: 24px; top: 88px; display: inline-flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 16px 0 15px; border: 1px solid #dfdfea; border-radius: 16px; background: #fff;
  font-weight: 500; font-size: 15px; line-height: 1; color: var(--mt-ink); white-space: nowrap;
}
.mt-vis .chip.ok { gap: 9px; padding-left: 16px; color: #13804f; }
.mt .mt-vis-c { margin-top: 13px; font-size: 18px; line-height: 28px; color: var(--mt-text); }

/* Carte score (y 3450 → 3653) */
.mt-score { position: relative; width: 1162px; height: 203px; margin-top: 33px; border: 1px solid #dfdfea; border-radius: 20.4px; background: #fff url(/assets/methodology/score-bg.webp) center / cover no-repeat; }
.mt-score > * { position: absolute; margin: 0; }
.mt-score .t { left: 43px; top: 34px; font-weight: 600; font-size: 22px; line-height: 26px; color: var(--mt-ink); }
.mt-score .s { left: 43px; top: 66px; font-size: 18px; line-height: 21px; color: #474760; }
.mt-score .big { right: 43px; top: 39px; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-head); }
.mt-score .big b { font-weight: 600; font-size: 45.5px; line-height: 54px; color: var(--mt-ink); }
.mt-score .big span { font-weight: 500; font-size: 26.3px; line-height: 31px; color: var(--mt-mute); }
.mt-score .c { left: 43px; top: 146px; font-size: 16px; line-height: 19px; color: var(--mt-text); }
.mt .bar { display: block; height: 12px; border-radius: 6px; background: var(--mt-line); }
.mt .bar i { --wf: var(--w); display: block; width: var(--wf); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4a46d3 0%, #66d 100%); }
.mt-score .bar { left: 44px; top: 117px; width: 1074px; }

/* Concurrents (lignes y 3752 / 3856 / 3959) */
.mt .mt-named-h { margin: 48px 0 0 1px; font-weight: 600; font-size: 22px; line-height: 26px; color: var(--mt-ink); }
.mt-named { margin: 25px 0 0 1px; padding: 0; list-style: none; }
.mt-named li { position: relative; width: 1159px; height: 88px; border-radius: 15px; background: var(--mt-card); }
.mt-named li + li { margin-top: 16px; }
.mt-named li:nth-child(3) { margin-top: 15px; }
.mt-named li > * { position: absolute; }
.mt-named b { left: 43px; top: 21px; font-family: var(--font-head); font-weight: 500; font-size: 20px; line-height: 24px; color: var(--mt-ink); }
.mt-named li > span:not(.bar) { left: 43px; top: 46px; font-size: 15px; line-height: 19px; color: var(--mt-text); }
.mt-named .bar { left: 299px; top: 44px; width: 729px; height: 10px; border-radius: 5px; }
.mt-named em { right: 43px; top: 27px; display: flex; align-items: baseline; gap: 3px; font-family: var(--font-head); font-style: normal; font-weight: 600; font-size: 26px; line-height: 31px; color: var(--mt-ink); }
.mt-named em small { font-weight: 500; font-size: 15px; line-height: 18px; color: var(--mt-mute); }
.mt-named + p { margin-top: 28px; }

/* ---------- 4. Tableau des vagues (y 4384 → 4657) ---------- */
.mt-table { width: 1159px; margin: 37px 0 0 1px; table-layout: fixed; border-collapse: separate; border-spacing: 0; border-radius: 15px; background: var(--mt-card); }
.mt-table th, .mt-table td { position: relative; padding: 0; text-align: left; font-weight: 500; font-size: 18px; line-height: 21px; color: var(--mt-ink); }
.mt-table th:first-child, .mt-table td:first-child { padding-left: 44px; width: 485px; }
.mt-table th:nth-child(2), .mt-table td:nth-child(2) { width: 327px; }
.mt-table th { padding-top: 30px; padding-bottom: 16px; }
.mt-table th::after, .mt-table tbody tr + tr td::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #605fdb; }
.mt-table tbody tr + tr td::after { top: 0; bottom: auto; background: var(--mt-line); }
.mt-table th:first-child::after, .mt-table td:first-child::after { left: 44px; }
.mt-table th:last-child::after, .mt-table td:last-child::after { right: 44px; }
.mt-table td { height: 61px; vertical-align: middle; }
.mt-table tbody tr:first-child td { height: 65px; padding-top: 7px; }
.mt-table td:not(:first-child) { font-weight: 400; color: var(--mt-text); }
.mt-table td .eng { display: flex; align-items: center; gap: 19px; }
.mt-table td img { width: 33.8px; height: 33.8px; }
.mt-table tbody::after { content: ""; display: table-row; height: 18px; }
.mt-sec > p.after-table { margin-top: 39px; }

/* ---------- 5. Trois mini-tableaux de bord (cartes y 4941 → 5277) ---------- */
.mt-trio { display: grid; grid-template-columns: repeat(3, 364px); gap: 33px; margin: 53px 0 0 1px; }
.mt-tcol h3 { margin: 30px 0 0 -1px; font-size: 22px; line-height: 26px; }
.mt-tcol > p { margin: 9px 0 0 -1px; }
/* largeurs des blocs de texte de la maquette (les retours à la ligne en dépendent) */
.mt-tcol:nth-child(1) > p { max-width: 300px; }
.mt-tcol:nth-child(2) > p { max-width: 345px; }
.mt-tcol:nth-child(3) > p { max-width: 340px; }
.mt-tcard { position: relative; height: 336px; border-radius: 15px; background: var(--mt-card); font-family: var(--font-head); }
.mt-tcard > *, .mt-tcard .in > * { position: absolute; margin: 0; }
.mt-tcard .box, .mt-waves .wv, .mt-alert .pv, .mt-alert .cu, .mt-alert .al, .mt-cmp .in { border: 1px solid #fff; border-radius: 14.9px; background: rgba(255, 255, 255, 0.8); }
.mt-tcard .bar { height: 8px; border-radius: 4px; }
.mt-tcard em { display: flex; align-items: baseline; gap: 2px; font-style: normal; font-weight: 600; font-size: 20px; line-height: 24px; color: var(--mt-ink); }
.mt-tcard em small { font-weight: 500; font-size: 14px; line-height: 17px; color: var(--mt-mute); }

/* a) fenêtres glissantes */
.mt-waves .hd { position: static; }
.mt-waves .hd > * { position: absolute; }
.mt-waves .hd b { left: 37px; top: 42px; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 20px; color: var(--mt-ink); }
.mt-waves .hd small { left: 36px; top: 64px; font-size: 12.5px; line-height: 15px; color: var(--mt-text); }
.mt-waves .hd em { right: 47px; top: 46px; font-style: normal; font-weight: 500; font-size: 24px; line-height: 28px; color: var(--mt-ink); }
.mt-waves .wv > * { position: absolute; }
.mt-waves .ib { display: grid; place-items: center; border: 1px solid #ededed; border-radius: 9px; background: #fff; }
.mt-waves .wv b { font-weight: 500; color: var(--mt-ink); }
.mt-waves .w1 { left: 21px; top: 91px; width: 322px; height: 68px; }
.mt-waves .w1 .ib { left: 12px; top: 13px; width: 42px; height: 42px; }
.mt-waves .w1 b { left: 67px; top: 17px; font-size: 16px; line-height: 19px; }
.mt-waves .w1 .bar { left: 71px; top: 47px; width: 234px; }
.mt-waves .w1 em { right: 24px; top: 15px; }
.mt-waves .w2, .mt-waves .w3 { left: 32px; width: 299px; height: 63px; opacity: 0.5; background: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.5); }
.mt-waves .w2 { top: 168px; }
.mt-waves .w3 { top: 241px; }
.mt-waves .w2 .ib { left: 12px; top: 12px; width: 39px; height: 39px; }
.mt-waves .w3 .ib { left: 12px; top: 12px; width: 39px; height: 39px; border: 0; background: none; }
.mt-waves .w3 .ib img { width: 39px; height: 39px; }
.mt-waves .w2 b, .mt-waves .w3 b { font-size: 14.5px; line-height: 17px; }
.mt-waves .w2 b { left: 60px; top: 16px; }
.mt-waves .w3 b { left: 62px; top: 14px; }
.mt-waves .w2 .bar { left: 65px; top: 42px; width: 224px; }
.mt-waves .w3 .bar { left: 67px; top: 40px; width: 221px; }
.mt-waves .w2 em { right: 14px; top: 10px; }
.mt-waves .w3 em { right: 14px; top: 8px; }

/* b) alerte */
.mt-alert .pv, .mt-alert .cu { top: 58px; width: 125px; height: 138px; padding: 12px 0 0 19px; }
.mt-alert .pv { left: 35px; }
.mt-alert .cu { left: 207px; }
.mt-alert small { display: block; font-size: 13px; line-height: 16px; color: var(--mt-text); }
.mt-alert .pv b, .mt-alert .cu b { display: block; margin-top: 36px; font-weight: 600; font-size: 28px; line-height: 34px; color: var(--mt-ink); }
.mt-alert .pv b span, .mt-alert .cu b span { margin-left: 3px; font-weight: 500; font-size: 18.3px; line-height: 22px; color: var(--mt-mute); }
.mt-alert small.v { margin-top: 4px; }
.mt-alert .arr { left: 176px; top: 121px; width: 15px; }
.mt-alert .al { left: 35px; top: 215px; width: 297px; height: 79px; }
.mt-alert .al > * { position: absolute; }
.mt-alert .al img { left: 21px; top: 14px; width: 18px; }
.mt-alert .al b { left: 50px; top: 13px; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 17px; color: var(--mt-ink); }
.mt-alert .al span { left: 50px; top: 34px; font-size: 13px; line-height: 16px; color: var(--mt-text); white-space: nowrap; }

/* c) concurrents à la même échelle */
.mt-cmp .in { left: 35px; top: 49px; width: 292px; height: 252px; border-radius: 14px; }
.mt-cmp .r { position: relative; height: 61.5px; margin: 0 25px 0 22px; }
.mt-cmp .r:first-child { margin-top: 29px; }
.mt-cmp .r > span:not(.bar) { position: absolute; left: 0; top: 0; font-family: var(--font-body); font-size: 15px; line-height: 19px; color: var(--mt-ink); }
.mt-cmp .r em { position: absolute; right: 0; top: -4px; }
.mt-cmp .r .bar { position: absolute; left: 4px; top: 35px; width: 247px; }
.mt-cmp .in p { left: 0; right: 0; top: 214px; max-width: none; text-align: center; font-family: var(--font-head); font-size: 12px; line-height: 14px; color: var(--mt-text); }

/* « Nothing is Overwritten » / « Action Marked as Done » */
.mt-note { display: flex; margin: 55px 0 0 1px; padding-top: 40px; border-top: 1px solid var(--mt-line); }
.mt-note > img { flex: none; width: 60px; height: 60px; }
.mt-note > div { margin-left: 38px; }
.mt-note h3 { margin-top: 5px; font-size: 22px; line-height: 26px; }
.mt-note p { margin-top: 10px; }
.mt-done { margin: 32px 0 0 6px; padding-top: 0; border-top: 0; }
.mt-done > div { margin-left: 30px; }
.mt-done h3 { margin-top: 4px; }
.mt-done p { margin-top: 9px; }

/* ---------- 6. Cadres causes (y 6058 et 6719) ---------- */
.mt-frame { width: 1167px; margin: 33px 0 0 -3px; padding: 6px 0 8.5px; border: 8px solid #e7e7f2; border-radius: 26.3px; }
.after-frame + .mt-intro + .mt-frame { margin-top: 35px; }
.mt-frame > div { position: relative; display: grid; grid-template-columns: 469px 1fr; padding: 24.5px 32px 24px 29px; }
.mt-frame > div + div::before { content: ""; position: absolute; left: 33px; right: 32px; top: 0; height: 1px; background: #e4e4ea; }
.mt-frame dt { position: relative; top: 2px; font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 28px; color: var(--mt-ink); }
.mt-frame dd { margin: 0; font-size: 18px; line-height: 28px; color: var(--mt-text); }

/* Qui gagne la question (cartes y 7415 → 7657) */
.mt-wins { display: grid; grid-template-columns: repeat(3, 364px); gap: 33px; margin: 44px 0 0 1px; }
.mt-wins > div { height: 242px; padding: 30px 32px 0; border-radius: 15px; background: var(--mt-card); }
.mt-wins h4 { margin-top: 37px; font-size: 22px; line-height: 26px; }
.mt-wins p { margin-top: 9px; max-width: 290px; }

/* ---------- 7. Avant / après (cartes y 8086 → 8296) ---------- */
.mt-ba { gap: 42px; margin-top: 45px; }
.mt-bacard { position: relative; width: 559px; height: 210px; border: 1px solid #dfdfea; border-radius: 20.4px; }
.mt-bacard.after { background: #fff url(/assets/methodology/after-bg.webp) center / cover no-repeat; }
.mt-bacard > * { position: absolute; margin: 0; }
.mt-bacard .k { left: 28px; top: 22px; font-size: 17px; line-height: 20px; color: var(--mt-text); }
.mt-bacard .big { left: 27px; top: 53px; display: flex; align-items: baseline; gap: 6px; font-family: var(--font-head); }
.mt-bacard .big b { font-weight: 600; font-size: 45.5px; line-height: 54px; color: var(--mt-ink); }
.mt-bacard .big span { font-weight: 500; font-size: 26.3px; line-height: 31px; color: var(--mt-mute); }
.mt-bacard .l { left: 28px; top: 124px; font-size: 18px; line-height: 21px; color: var(--mt-text); }
.mt-bacard .bar { left: 24px; top: 168px; width: 508px; }

/* ---------- 8. Limites ---------- */
.mt-limits { margin: 29px 0 0; padding: 0; list-style: none; }
.mt-limits li { position: relative; padding-left: 19px; }
.mt-limits li + li { margin-top: 17px; }
.mt-limits li:nth-child(4) { margin-top: 19px; }
.mt-limits li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #4a46d3; }
.mt-limits h3 { font-family: var(--font-body); font-weight: 600; font-size: 22px; line-height: 26px; }
.mt-limits p { margin-top: 5px; max-width: 1100px; }
.mt-sec > p.mt-close { margin: 67px 0 0 2px; padding-top: 30px; border-top: 1px solid var(--mt-line); max-width: none; text-align: right; }
.mt-close a { font-weight: 600; color: #4a46d3; text-decoration: underline; text-underline-offset: 3px; }
.mt-close a:hover { color: #2f2bb0; }

/* ---------- Ancres : marge sous le header ---------- */
.mt-sec { scroll-margin-top: 110px; }

/* La colonne Guide (hors conteneur, x 41) n'a de place qu'à partir de 1700 px */
@media (max-width: 1599px) { .mt-guide { display: none; } }

/* ==========================================================================
   Animations (html.anim ; ?noanim les coupe, comme sur le reste du site — html.no-anim posé par site.js)
   Hero : body.mt-ready (polices + images chargées, js/methodology.js) lance l'entrée.
   Blocs : .is-in posé bloc par bloc quand ils entrent à l'écran (.mt-sec > *, .mt-toc, .mt-guide-in).
   Mots des titres découpés par methodology.js (.mt-split .w > span, --i), cascades par --i / --c.
   ========================================================================== */
@keyframes mtRise    { from { opacity: 0; transform: translateY(28px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mtFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes mtWord    { from { transform: translateY(135%) rotate(4deg); } to { transform: none; } }
@keyframes mtDraw    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mtPop     { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.12); } 80% { transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mtBar     { from { width: 0; } to { width: var(--wf); } }
@keyframes mtStroke  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mtWipe    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -5% 0 0); } }
@keyframes mtRowIn   { from { opacity: 0; transform: translateX(34px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mtFloat   { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes mtHandIn  { from { opacity: 0; transform: translate(-140px, 40px) rotate(-6deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mtHandIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-1.2deg); } }
@keyframes mtCompassIn { 0% { opacity: 0; transform: translateY(120px) scale(0.4) rotate(-50deg); } 70% { opacity: 1; transform: translateY(-10px) scale(1.06) rotate(6deg); } 100% { opacity: 1; transform: none; } }
@keyframes mtCompassIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes mtTwinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: 0.55; transform: scale(0.8) rotate(12deg); } }
@keyframes mtGlow    { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.12); } }
@keyframes mtBoxIn   { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mtRock    { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }

/* ---- Mots découpés ---- */
.mt-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.mt-split .w > span { display: inline-block; }
.anim .mt-split .w > span { transform: translateY(135%); }

/* ---- Hero ---- */
.anim .mt-hero-bg, .anim .mt-hero-art img, .anim .mt-pill, .anim .mt-hero-sub, .anim .mt-updated { opacity: 0; }
.anim .mt-h1::after { transform: scaleX(0); }
.anim .mt-ready .mt-hero-bg { animation: mtFade 1.2s ease both; }
.anim .mt-ready .mt-hand { animation: mtHandIn 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both, mtHandIdle 7s ease-in-out 1.6s infinite; }
.anim .mt-ready .mt-compass { animation: mtCompassIn 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both, mtCompassIdle 7s ease-in-out 1.9s infinite; }
.anim .mt-ready .mt-glow { animation: mtFade 1s ease 0.5s both, mtGlow 4.5s ease-in-out 1.6s infinite; }
.anim .mt-ready .mt-sparkle { animation: mtPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.3s both, mtTwinkle 2.6s ease-in-out 2.2s infinite; }
.anim .mt-ready .mt-pill { animation: mtRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
.anim .mt-ready .mt-h1 .w > span { animation: mtWord 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) calc(0.45s + var(--i) * 0.06s) both; }
.anim .mt-ready .mt-h1::after { animation: mtDraw 1s cubic-bezier(0.65, 0, 0.2, 1) 1.05s both; }
.anim .mt-ready .mt-hero-sub { animation: mtRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.95s both; }
.anim .mt-ready .mt-updated { animation: mtFade 0.8s ease 1.4s both; }

/* ---- Sommaire et guide ---- */
.anim .mt-toc, .anim .mt-toc-list li, .anim .mt-toc-list .ic, .anim .mt-guide-in, .anim .mt-guide li { opacity: 0; }
.anim .mt-toc.is-in { animation: mtRise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s both; }
.anim .mt-toc.is-in li { animation: mtRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(1.25s + var(--i) * 0.07s) both; }
.anim .mt-toc.is-in .ic { animation: mtPop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(1.4s + var(--i) * 0.07s) both; }
.anim .mt-guide-in.is-in { animation: mtFade 0.8s ease 0.2s both; }
.anim .mt-guide-in.is-in li { animation: mtRowIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.35s + var(--i) * 0.06s) both; }
.mt-toc-list a, .mt-guide a { transition: color 0.25s ease; }
.mt-toc-list .ic { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1.4); }
.mt-toc-list a:hover .ic { transform: translateX(4px); }
.mt-guide a[aria-current="true"]::before { animation: mtPop 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* ---- Blocs du contenu ---- */
.anim .mt-sec > * { opacity: 0; }
.anim .mt-sec > .is-in { animation: mtRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .mt-h2 .n { opacity: 0; }
.anim .mt-h2.is-in .n { animation: mtPop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both; }
.anim .mt-h2.is-in .w > span { animation: mtWord 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) calc(0.1s + var(--i) * 0.05s) both; }

/* 1. schéma des questions */
.anim .mt-qmap > *:not(.mt-q-links), .anim .mt-q-circle b, .anim .mt-q-circle span { opacity: 0; }
.anim .mt-q-links path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .mt-qmap.is-in .mt-q-site { animation: mtPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.anim .mt-qmap.is-in .c1 { animation: mtStroke 0.45s cubic-bezier(0.6, 0, 0.3, 1) 0.55s both; }
.anim .mt-qmap.is-in .mt-q-circle { animation: mtPop 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.85s both; }
.anim .mt-qmap.is-in .mt-q-circle b, .anim .mt-qmap.is-in .mt-q-circle span { animation: mtFade 0.5s ease 1s both; }
.anim .mt-qmap.is-in .mt-q-gen { animation: mtRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.15s both; }
.anim .mt-qmap.is-in .c2, .anim .mt-qmap.is-in .c3 { animation: mtStroke 0.6s cubic-bezier(0.6, 0, 0.3, 1) 1.2s both; }
.anim .mt-qmap.is-in .b1 { animation: mtPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.45s both; }
.anim .mt-qmap.is-in .b2 { animation: mtPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.6s both; }
.anim .mt-qmap.is-in .mt-q-ex { opacity: 1; }
.anim .mt-q-ex li { opacity: 0; }
.anim .mt-qmap.is-in .e1 li { animation: mtRowIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(1.75s + var(--i) * 0.1s) both; }
.anim .mt-qmap.is-in .e2 li { animation: mtRowIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(1.9s + var(--i) * 0.1s) both; }

/* 2. moteurs */
.anim .mt-engines > * { opacity: 0; }
.anim .mt-engines.is-in .mt-arc { animation: mtFade 1.2s ease 0.1s both; }
.anim .mt-engines.is-in .lg-gpt { animation: mtPop 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both, mtFloat 5s ease-in-out 1.3s infinite alternate; }
.anim .mt-engines.is-in .lg-pplx { animation: mtPop 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both, mtFloat 5.6s ease-in-out 1.5s infinite alternate-reverse; }
.anim .mt-engines.is-in .mt-gem-box { animation: mtPop 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s both, mtFloat 5.3s ease-in-out 1.7s infinite alternate; }
.anim .mt-engines.is-in .mt-gem-star { animation: mtPop 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.85s both, mtFloat 5.3s ease-in-out 1.7s infinite alternate; }
.anim .mt-engines.is-in .en-gpt { animation: mtRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both; }
.anim .mt-engines.is-in .en-pplx { animation: mtRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s both; }
.anim .mt-engines.is-in .en-gem { animation: mtRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.95s both; }

/* 3. audit gratuit */
.anim .mt-dots li { opacity: 0; }
.anim .mt-dots.is-in li { animation: mtRowIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.1s + var(--i) * 0.15s) both; }
.anim .mt-pair > * { opacity: 0; }
.anim .mt-pair.is-in > * { animation: mtRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.15s) both; }
.anim .mt-vis-box, .anim .mt-vis .chip, .anim .mt-vis-c { opacity: 0; }
.anim .mt-pair.is-in .mt-vis-box { animation: mtBoxIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.4s + var(--i) * 0.15s) both; }
.anim .mt-pair.is-in .mt-vis .chip { animation: mtPop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.8s + var(--i) * 0.15s) both; }
.anim .mt-pair.is-in .mt-vis-c { animation: mtFade 0.6s ease calc(0.9s + var(--i) * 0.15s) both; }
.anim .mt-vis-box .ul img { clip-path: inset(0 100% 0 0); }
.anim .mt-pair.is-in .mt-vis-box .ul img { animation: mtWipe 0.6s cubic-bezier(0.65, 0, 0.2, 1) calc(1.05s + var(--i) * 0.15s) both; }
.anim .mt .bar i { width: 0; }
.anim .is-in .bar i { animation: mtBar 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--bd, 0.5s) both; }
.anim .mt-score > * { opacity: 0; }
.anim .mt-score.is-in > * { animation: mtRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.anim .mt-score.is-in .big { animation: mtPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both; }
.mt-score .bar { --bd: 0.45s; }
.anim .mt-named li { opacity: 0; }
.anim .mt-named.is-in li { animation: mtRowIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.15s) both; }
.mt-named .bar { --bd: calc(0.45s + var(--i) * 0.15s); }

/* 4. tableau */
.anim .mt-table th::after { transform: scaleX(0); transform-origin: left center; }
.anim .mt-table.is-in th::after { animation: mtDraw 0.9s cubic-bezier(0.65, 0, 0.2, 1) 0.3s both; }
.anim .mt-table tbody td { opacity: 0; }
.anim .mt-table.is-in tbody td { animation: mtRowIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.35s + var(--i) * 0.15s) both; }
.anim .mt-table.is-in tbody td::after { transform-origin: left center; animation: mtDraw 0.7s cubic-bezier(0.65, 0, 0.2, 1) calc(0.3s + var(--i) * 0.15s) both; }

/* 5. mini-tableaux de bord */
.anim .mt-tcol { opacity: 0; }
.anim .mt-trio.is-in .mt-tcol { animation: mtRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--c) * 0.15s) both; }
.anim .mt-tcard > *, .anim .mt-cmp .r { opacity: 0; }
.anim .mt-trio.is-in .mt-tcard > * { animation: mtRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.45s + var(--c) * 0.15s + var(--i) * 0.12s) both; }
.anim .mt-trio.is-in .mt-cmp .r { animation: mtRowIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.65s + var(--c) * 0.15s + var(--i) * 0.12s) both; }
.mt-tcard .bar { --bd: calc(0.9s + var(--c) * 0.15s + var(--i) * 0.12s); }
.anim .mt-alert .arr, .anim .mt-alert .al img { transform: scale(0.3); opacity: 0; }
.anim .mt-trio.is-in .mt-alert .arr { animation: mtPop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both; }
.anim .mt-trio.is-in .mt-alert .al img { animation: mtPop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1.35s both; }
.mt-tcard, .mt-wins > div { transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; }
.mt-tcard:hover, .mt-wins > div:hover { translate: 0 -5px; box-shadow: 0 22px 44px rgba(26, 26, 46, 0.07); }
.mt-logo, .mt-gem-box { transition: scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1.4); }
.mt-logo:hover, .mt-gem-box:hover { scale: 1.08; }

/* encarts */
.anim .mt-note > * { opacity: 0; }
.anim .mt-note.is-in > img { animation: mtPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.anim .mt-note.is-in > div { animation: mtRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
.mt-note:hover > img { animation: mtRock 1.4s ease-in-out; }

/* 6. cadres et cartes */
.anim .mt-frame > div { opacity: 0; }
.anim .mt-frame.is-in > div { animation: mtRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.15s + var(--i) * 0.1s) both; }
.anim .mt-frame > div + div::before { transform: scaleX(0); transform-origin: left center; }
.anim .mt-frame.is-in > div + div::before { animation: mtDraw 0.8s cubic-bezier(0.65, 0, 0.2, 1) calc(0.25s + var(--i) * 0.1s) both; }
.anim .mt-wins > div { opacity: 0; }
.anim .mt-wins.is-in > div { animation: mtRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.15s) both; }
.anim .mt-wins img { opacity: 0; }
.anim .mt-wins.is-in img { animation: mtPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.4s + var(--i) * 0.15s) both; }

/* 7. avant / après */
.anim .mt-bacard > * { opacity: 0; }
.anim .mt-ba.is-in .mt-bacard > * { animation: mtRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.3s + var(--i) * 0.15s) both; }
.anim .mt-ba.is-in .mt-bacard .big { animation: mtPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.45s + var(--i) * 0.15s) both; }
.mt-bacard .bar { --bd: calc(0.7s + var(--i) * 0.15s); }

/* 8. limites */
.anim .mt-limits li { opacity: 0; }
.anim .mt-limits.is-in li { animation: mtRowIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.14s) both; }
.anim .mt-limits li::before { transform: scale(0); }
.anim .mt-limits.is-in li::before { animation: mtPop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.25s + var(--i) * 0.14s) both; }

/* ?noanim : tout est en place immédiatement */
.no-anim .mt *, .no-anim .mt *::before, .no-anim .mt *::after { animation: none !important; transition: none !important; }
.no-anim .mt-hero-bg, .no-anim .mt-hero-art img, .no-anim .mt-pill, .no-anim .mt-hero-sub, .no-anim .mt-updated,
.no-anim .mt-toc, .no-anim .mt-toc-list li, .no-anim .mt-toc-list .ic, .no-anim .mt-guide-in, .no-anim .mt-guide li,
.no-anim .mt-sec > *, .no-anim .mt-h2 .n, .no-anim .mt-qmap > *, .no-anim .mt-q-circle b, .no-anim .mt-q-circle span, .no-anim .mt-q-ex li,
.no-anim .mt-engines > *, .no-anim .mt-dots li, .no-anim .mt-pair > *, .no-anim .mt-vis-box, .no-anim .mt-vis .chip, .no-anim .mt-vis-c,
.no-anim .mt-score > *, .no-anim .mt-named li, .no-anim .mt-table tbody td, .no-anim .mt-tcol, .no-anim .mt-tcard > *, .no-anim .mt-cmp .r,
.no-anim .mt-alert .arr, .no-anim .mt-alert .al img, .no-anim .mt-note > *, .no-anim .mt-frame > div, .no-anim .mt-wins > div, .no-anim .mt-wins img,
.no-anim .mt-bacard > *, .no-anim .mt-limits li { opacity: 1; }
.no-anim .mt-split .w > span, .no-anim .mt-h1::after, .no-anim .mt-table th::after, .no-anim .mt-frame > div + div::before, .no-anim .mt-limits li::before, .no-anim .mt-alert .arr, .no-anim .mt-alert .al img { transform: none; }
.no-anim .mt-q-links path { stroke-dashoffset: 0; }
.no-anim .mt-vis-box .ul img { clip-path: none; }
.no-anim .mt .bar i { width: var(--wf); }
.no-anim .mt-qmap > *:not(.mt-q-links), .no-anim .mt-qmap .mt-q-circle b, .no-anim .mt-qmap .mt-q-circle span { opacity: 1; }

/* ==========================================================================
   Écrans plus étroits que la maquette (variables posées par methodology.js :
   --k = (largeur − 48) / 1222 pour réduire tout le corps d'un bloc entre 1100 et 1299 px ;
   --kc, --kp, --kt = réduction des compositions à cotes fixes (1160 / 559 / 364 px) sous 1100 px)
   ========================================================================== */
@media (max-width: 1499px) {
  /* la boussole se range en haut à droite pour ne pas chevaucher le titre */
  .mt-compass { left: auto; right: 16px; top: 92px; width: 300px; }
  .mt-glow { left: auto; right: 86px; top: 118px; width: 160px; }
  .mt-sparkle { left: auto; right: 22px; top: 62px; }
}
@media (max-width: 1299px) and (min-width: 1100px) {
  .mt-body { zoom: var(--k, 1); }
}

@media (max-width: 1099px) {
  .mt-hero { height: auto; padding-bottom: 150px; }
  .mt-hero-bg { background-size: max(1920px, 100%) auto; }
  .mt-hero-art { display: none; }
  .mt-hero-inner { padding-top: 176px; }
  .mt .mt-h1 { margin-top: 18px; font-size: clamp(38px, 7vw, 64px); line-height: 1.06; }
  .mt-h1 span { display: inline; }
  .mt-h1 .l1::after { content: " "; }
  .mt-h1::after { display: none; }
  .mt-h1 .l2 { background: var(--grad-underline) no-repeat 0 100% / 100% 5px; padding-bottom: 6px; }
  .mt .mt-hero-sub { margin-top: 26px; }
  .mt .mt-updated { margin-top: 44px; }

  .mt-body { width: auto; margin: -70px 24px 0; padding-bottom: 32px; }
  .mt-toc { height: auto; padding: 26px 26px 30px; border-radius: 20px; }
  .mt-toc-title { font-size: 24px; }
  .mt-toc-list { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); margin-top: 18px; row-gap: 12px; column-gap: 16px; }
  .mt-toc-list a { white-space: normal; align-items: flex-start; line-height: 22px; }
  .mt-toc-list .ic { margin-right: 12px; }
  .mt-main { width: auto; margin-left: 0; }
  .mt-sec > p, .mt-tcol > p, .mt-note p, .mt-wins p, .mt-limits p { max-width: none; }
  .mt-h2 { font-size: clamp(30px, 5.4vw, 38px); line-height: 1.2; }
  .mt-h2 .n { top: 0.12em; font-size: 0.85em; line-height: 1.2; }
  #questions .mt-h2 { margin-top: 56px; }
  #engines .mt-h2, #audit .mt-h2, #tracking .mt-h2, #reading .mt-h2, #recommendations .mt-h2, #proof .mt-h2, #limits .mt-h2 { margin-top: 72px; }
  .mt-h3 { font-size: clamp(26px, 4.4vw, 32px); line-height: 1.2; }
  .mt-h3.after-dots, .mt-h3.after-pair, .mt-h3.after-p, .mt-h3.after-frame, .mt-h3.after-frame2, .mt-h3.after-wins { margin-top: 40px; }

  /* compositions à cotes fixes : réduites d'un bloc */
  .mt-qmap, .mt-engines, .mt-score, .mt-named, .mt-table { zoom: var(--kc, 1); }
  .mt-score { width: 1160px; }
  .mt-pair { flex-wrap: wrap; gap: 24px; }
  .mt-vis, .mt-bacard { zoom: var(--kp, 1); }
  .mt-trio, .mt-wins { grid-template-columns: repeat(auto-fit, 364px); justify-content: start; gap: 28px; }
  .mt-tcol, .mt-wins > div { zoom: var(--kt, 1); }
  .mt-tcol > p { max-width: 364px; }
  .mt-note { margin-top: 40px; padding-top: 32px; }
  .mt-note > div { margin-left: 22px; }
  .mt-done { margin-top: 26px; }
  .mt-frame { width: auto; margin: 26px 0 0; border-width: 6px; border-radius: 22px; padding: 4px 0 6px; }
  .after-frame + .mt-intro + .mt-frame { margin-top: 26px; }
  .mt-frame > div { grid-template-columns: 1fr; gap: 6px; padding: 20px 20px 20px; }
  .mt-frame > div + div::before { left: 20px; right: 20px; }
  .mt-frame dt { top: 0; line-height: 26px; }
  .mt-limits li + li { margin-top: 18px; }
  .mt-sec > p.mt-close { margin: 48px 0 0; }
  .mt-sec > p br { display: none; } /* retours forcés de la maquette (un espace les précède dans le HTML) */
}

@media (max-width: 699px) {
  .mt-hero-inner { padding-top: 150px; }
  .mt-hero { padding-bottom: 120px; }
  .mt-body { margin: -56px 16px 0; }
  .mt-toc { padding: 22px 18px 24px; }
  .mt-toc-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .mt-toc-list a { font-size: 17px; }
  .mt-sec > p, .mt-tcol > p, .mt-note p, .mt-wins p, .mt-limits p, .mt-dots li, .mt-frame dd { font-size: 17px; line-height: 27px; }
  .mt-note { flex-direction: column; gap: 14px; }
  .mt-note > div { margin-left: 0; }
  .mt-note h3 { margin-top: 0; }
  .mt-trio, .mt-wins { justify-content: center; }
  .mt-sec > p.mt-close { text-align: left; }
}

/* ---------- Sous 900 px : les compositions larges (1160 / 559 px) sont remises en flux au lieu d'être réduites ---------- */
@media (max-width: 899px) {
  /* carte score */
  .mt-score { zoom: 1; width: auto; height: auto; padding: 22px 20px 20px; background-size: cover; }
  .mt-score > * { position: static; }
  .mt-score .s { margin-top: 4px; }
  .mt-score .big { margin-top: 10px; }
  .mt-score .bar { width: 100%; margin-top: 12px; }
  .mt-score .c { margin-top: 12px; line-height: 22px; }
  /* concurrents */
  .mt-named { zoom: 1; }
  .mt-named li { width: auto; height: auto; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name count" "sub count" "bar bar"; align-items: center; padding: 16px 18px 18px; }
  .mt-named li > * { position: static; }
  .mt-named b { grid-area: name; }
  .mt-named li > span:not(.bar) { grid-area: sub; margin-top: 2px; }
  .mt-named em { grid-area: count; }
  .mt-named .bar { grid-area: bar; width: 100%; margin-top: 12px; }
  .mt-score .bar i, .mt-named .bar i, .mt-bacard .bar i { --wf: var(--p); } /* --w est posé en ligne : on passe par --wf */
  /* tableau des vagues */
  .mt-table { zoom: 1; width: 100%; table-layout: auto; border-radius: 14px; }
  .mt-table th, .mt-table td { font-size: 15px; line-height: 20px; }
  .mt-table th:first-child, .mt-table td:first-child { padding-left: 16px; width: auto; }
  .mt-table th:nth-child(2), .mt-table td:nth-child(2) { width: auto; }
  .mt-table th:last-child, .mt-table td:last-child { padding-right: 16px; }
  .mt-table th { padding-top: 18px; padding-bottom: 12px; }
  .mt-table th:first-child::after, .mt-table td:first-child::after { left: 16px; }
  .mt-table th:last-child::after, .mt-table td:last-child::after { right: 16px; }
  .mt-table td { height: 54px; }
  .mt-table tbody tr:first-child td { height: 56px; padding-top: 2px; }
  .mt-table td .eng { gap: 10px; }
  .mt-table td img { width: 28px; height: 28px; }
  .mt-table tbody::after { height: 10px; }
  /* cartes Cité / Mentionné et avant / après */
  .mt-vis, .mt-bacard { zoom: 1; width: 100%; height: auto; }
  .mt-vis { padding: 20px 18px 22px; }
  .mt-vis-box { width: 100%; height: auto; padding: 14px 16px 16px; }
  .mt-vis-box p { white-space: normal; font-size: 18px; line-height: 27px; }
  .mt-vis .chip { position: static; display: inline-flex; margin-top: 12px; }
  .mt-vis-box .ul img { top: 20px; }
  .mt-bacard { padding: 18px 20px 22px; }
  .mt-bacard > * { position: static; }
  .mt-bacard .big { margin-top: 6px; }
  .mt-bacard .l { margin-top: 10px; }
  .mt-bacard .bar { width: 100%; margin-top: 12px; }
}

/* ---------- Sous 800 px : schéma des questions et moteurs en flux ---------- */
@media (max-width: 799px) {
  .mt-qmap { zoom: 1; height: auto; padding: 24px 18px 26px; display: grid; justify-items: center; gap: 14px; background-size: cover; }
  .mt-qmap > * { position: static; }
  .mt-q-links { display: none; }
  .mt-q-site { order: 1; width: 100%; max-width: 260px; }
  .mt-q-circle { order: 2; position: relative; left: auto; top: auto; width: 156.4px; height: 156.4px; margin-top: 6px; }
  .mt .mt-q-gen { order: 3; margin-top: -6px; }
  .mt-q-box { width: 100%; max-width: 360px; }
  .mt-q-box.b1 { order: 4; margin-top: 10px; }
  .mt-q-ex.e1 { order: 5; }
  .mt-q-box.b2 { order: 6; margin-top: 10px; }
  .mt-q-ex.e2 { order: 7; }
  .mt-q-ex { width: 100%; max-width: 360px; padding-left: 26px; white-space: normal; }

  .mt-engines { zoom: 1; height: auto; padding: 26px 8px 22px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "a b c" "la lb lc"; align-items: center; justify-items: center; row-gap: 4px; background-size: cover; }
  .mt-engines > * { position: static; }
  .mt-arc, .mt-gem-star { display: none; }
  .mt-logo { width: 124px; max-width: 100%; }
  .lg-gpt { grid-area: a; }
  .lg-pplx { grid-area: b; }
  .mt-gem-box { grid-area: c; width: 50px; height: 50px; border-radius: 11px; background: #fff url(/assets/methodology/gemini-glow.webp) center / 76px auto no-repeat; }
  .mt-eng { translate: none; }
  .en-gpt { grid-area: la; }
  .en-pplx { grid-area: lb; }
  .en-gem { grid-area: lc; }
  .mt-eng b { font-size: 18px; line-height: 22px; }
  .mt-eng span { font-size: 14px; line-height: 18px; margin-top: 2px; }
}