/* Correctifs mobiles transverses - TMG Conseil */

html,
body {
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.marquee {
  max-width: 100%;
  overflow: clip;
  contain: paint;
}

.marquee span {
  display: inline-block;
}

@media (max-width: 960px) {
  .wrap > *,
  .hero-grid > *,
  .page-head .head-grid > *,
  .section-head > *,
  .contact-grid > *,
  .flagship > *,
  .domain > *,
  .custom-block > *,
  .bento > *,
  .values > *,
  .sol-grid > *,
  .principles > *,
  .combine-grid > *,
  .footer-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .nav-links {
    display: none !important;
  }

  .nav-inner {
    grid-template-columns: auto auto !important;
    justify-content: space-between;
    gap: 16px;
  }

  .hero-grid,
  .page-head .head-grid,
  .section-head,
  .contact-grid,
  .flagship,
  .custom-block,
  .domain,
  .cta-strip,
  .founder,
  .network {
    grid-template-columns: 1fr !important;
  }

  .hero-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .bento,
  .values,
  .sol-grid,
  .principles,
  .combine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
  }

  .cell,
  .value,
  .sol-card,
  .principle {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .footer-grid,
  footer[style*="background: #18181B"] > .wrap > div:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .hero {
    padding: 32px 0 20px;
  }

  .hero-main {
    min-height: auto;
    padding: 34px 26px 30px;
    border-radius: 26px;
  }

  .hero-main h1,
  .page-head h1 {
    max-width: 100% !important;
    font-size: clamp(40px, 12vw, 58px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
  }

  .hero-main .lede,
  .page-head .lede {
    font-size: 17px !important;
  }

  .hero-main .ctas,
  .actions,
  .cta-strip .actions,
  .form-foot {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .hero-main .bottom-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 34px;
  }

  .section {
    padding-top: 56px !important;
    padding-bottom: 28px !important;
  }

  .section-head h2 {
    font-size: clamp(32px, 9vw, 42px) !important;
    max-width: 100%;
  }

  .tile,
  .cell,
  .value,
  .phase-card,
  .sol-card,
  .contact-tile,
  .num-card,
  .history,
  .founder-bio,
  .manifesto,
  .cta-strip {
    border-radius: 22px !important;
    padding: 26px !important;
  }

  .cell,
  .value,
  .sol-card,
  .phase-card,
  .num-card {
    min-height: auto !important;
  }

  .btn,
  .form-foot .submit {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .btn-ghost {
    justify-content: flex-start;
    width: auto;
  }
}

@media (max-width: 640px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .nav {
    padding: 14px 0;
  }

  .nav-inner {
    padding: 8px 10px 8px 14px !important;
    gap: 10px;
  }

  .logo {
    font-size: 16px !important;
    line-height: 1.05;
  }

  .logo .mark {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }

  .nav .cta {
    padding: 10px 13px !important;
    font-size: 13px !important;
  }

  .page-head {
    padding: 38px 0 12px !important;
  }

  .page-head .crumbs,
  .hero-main .meta,
  .section-head .eyebrow,
  .tile-eyebrow,
  .cell .ix,
  .phase-tag,
  .flag-tag {
    white-space: normal !important;
    line-height: 1.45;
  }

  .marquee {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    white-space: normal !important;
  }

  .marquee span {
    padding: 0 !important;
  }

  .hero-main .meta {
    align-items: flex-start;
    border-radius: 18px;
  }

  .hero-side,
  .bento,
  .values,
  .numbers,
  .hist-grid,
  .phase-cards,
  .principles,
  .sol-grid,
  .contact-bottom,
  .mini-metrics,
  .combine-grid,
  .domain-side .side-top,
  .field-row,
  .manifesto .body-text,
  .tmg-grid {
    grid-template-columns: 1fr !important;
  }

  .cell h4,
  .domain-main h2,
  .flagship-main h2,
  .tile h3,
  .value h3,
  .sol-card h3,
  .contact-tile h3,
  .founder-bio h3,
  .network .left h3,
  .cta-strip h3 {
    font-size: clamp(24px, 7.2vw, 32px) !important;
    max-width: 100%;
  }

  .domain-main,
  .flagship-main,
  .preview-window {
    min-height: auto !important;
  }

  .domain-side .deliv-wide .stat,
  .flagship-stat .stat-num {
    font-size: clamp(42px, 14vw, 56px) !important;
  }

  .cell-1 .stat {
    align-items: flex-start;
    flex-direction: column;
  }

  .cell-1 .stat .num,
  .num-card .big,
  .metric .big {
    font-size: clamp(48px, 16vw, 72px) !important;
  }

  .phase-tag .num {
    font-size: clamp(64px, 22vw, 94px) !important;
  }

  .tl-row,
  .contact-line,
  .preview-row,
  .partner {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea,
  .form-card,
  .side-stack,
  .flagship-main,
  .flagship-side {
    min-width: 0;
    max-width: 100%;
  }

  .contact-line,
  .preview-row,
  .partner {
    gap: 12px !important;
  }

  .preview-bar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .preview-bar .url,
  .flagship-main .flag-tag,
  .bar-vis .b {
    max-width: 100%;
    min-width: 0;
  }

  .preview-bar .url {
    margin-left: 0 !important;
    overflow-wrap: anywhere;
  }

  .bar-vis .b {
    grid-template-columns: 1fr !important;
  }

  .contact-line .val,
  .footer,
  .footer .f-bottom,
  .legal-body,
  footer[style*="background: #18181B"] {
    overflow-wrap: anywhere;
  }

  .legal-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  .footer {
    margin-top: 56px !important;
    padding: 48px 0 28px !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .footer-grid,
  footer[style*="background: #18181B"] > .wrap > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-bottom: 36px !important;
  }

  .footer .f-brand,
  footer[style*="background: #18181B"] .wrap > div:first-child p {
    font-size: 30px !important;
    max-width: 100% !important;
  }

  .footer .f-bottom,
  footer[style*="background: #18181B"] > .wrap > div:last-child {
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    text-transform: none !important;
  }
}

@media (max-width: 380px) {
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav .cta {
    display: none !important;
  }

  .hero-main {
    padding: 28px 20px 26px;
  }

  .hero-main h1,
  .page-head h1 {
    font-size: clamp(36px, 12vw, 44px) !important;
  }

  .hero-main h1 .swash,
  .page-head h1 .swash {
    border-radius: 14px;
    padding: 0 8px 3px;
  }

  .tile,
  .cell,
  .value,
  .phase-card,
  .sol-card,
  .contact-tile,
  .num-card,
  .history,
  .founder-bio,
  .manifesto,
  .cta-strip {
    padding: 22px !important;
  }
}