/* Maison Qeddus — cadrage ordinateur — mise à jour du 15/09/2026
   Correctif de mise en page uniquement : aucun contenu, média, script ou parcours n'est modifié. */

:root {
  /* Zone de respiration demandée sur les écrans d'ordinateur. */
  --mq-desktop-safe-edge: clamp(24px, 3vw, 44px);
  --mq-desktop-inner-safe-edge: clamp(16px, 1.5vw, 24px);
  --mq-desktop-frame-max: 1380px;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*, *::before, *::after { box-sizing: border-box; }

main, section, article, aside,
.site, .home-site, .signup-site, .mq-page,
.grid, .split, .secure-grid, .mq-dashboard-shell,
.mq-update-main, .mq26-main, .profile-page {
  min-width: 0;
}

img, picture, video, canvas, svg, iframe,
input, select, textarea, button {
  max-width: 100%;
}

.grid > *, .split > *, .secure-grid > *,
.mq-dashboard-shell > *, .mq-stat-grid > *,
.mq-offer-table > *, .footer-grid > *, .mqf-grid > * {
  min-width: 0;
}

.table-card, .table-wrap, .mq-governance-table-wrap,
.secure-table-wrap, .mq-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*
   Le cadre principal conserve toujours une marge visible à droite et à gauche.
   Cela protège les débuts de phrases et la fin des photos, notamment avec le
   zoom du navigateur ou la mise à l'échelle de Windows.
*/
@media (min-width: 901px) {
  body.mqf-layout > .site,
  body.mqf-layout > .home-site,
  body.mqf-layout > .signup-site,
  body.mqf-layout > .mq-page,
  body.mqf-layout > main.mq26-main,
  body.mqf-layout > main.profile-page,
  body.mqf-layout > main.access-page,
  body.mqf-layout > main:not([class]),
  body > .site,
  body > .home-site,
  body > .signup-site,
  body > .mq-page,
  body > main.mq26-main,
  body > main.profile-page,
  body > main.access-page,
  body > main:not([class]) {
    width: min(
      var(--mq-desktop-frame-max),
      calc(100% - (2 * var(--mq-desktop-safe-edge)))
    ) !important;
    max-width: min(
      var(--mq-desktop-frame-max),
      calc(100% - (2 * var(--mq-desktop-safe-edge)))
    ) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* L'en-tête suit exactement le même cadre de sécurité. */
  .mq-u-header-inner,
  .bar {
    width: min(
      var(--mq-desktop-frame-max),
      calc(100% - (2 * var(--mq-desktop-safe-edge)))
    ) !important;
    max-width: min(
      var(--mq-desktop-frame-max),
      calc(100% - (2 * var(--mq-desktop-safe-edge)))
    ) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
     Renforcement ciblé de l'accueil : même si un ancien style utilise 100vw,
     les colonnes texte/photo restent dans la zone visible.
  */
  body.mq-uniform-page > .site.home-site .home-shell {
    width: min(
      1120px,
      calc(100% - (2 * var(--mq-desktop-inner-safe-edge)))
    ) !important;
    max-width: min(
      1120px,
      calc(100% - (2 * var(--mq-desktop-inner-safe-edge)))
    ) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.mq-uniform-page > .site.home-site .home-hero-grid,
  body.mq-uniform-page > .site.home-site .feature-grid,
  body.mq-uniform-page > .site.home-site .mq-update-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.mq-uniform-page > .site.home-site .home-hero-copy,
  body.mq-uniform-page > .site.home-site .feature-copy,
  body.mq-uniform-page > .site.home-site .home-hero-visual,
  body.mq-uniform-page > .site.home-site .feature-visual {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.mq-uniform-page > .site.home-site .home-hero-visual > img,
  body.mq-uniform-page > .site.home-site .feature-visual > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/*
   Certains ordinateurs avec zoom ou mise à l'échelle élevée exposent un
   viewport CSS proche d'une tablette tout en gardant la composition en
   colonnes. L'accueil conserve donc aussi sa marge de sécurité entre
   701 et 900 px.
*/
@media (min-width: 701px) and (max-width: 900px) {
  body.mq-uniform-page > .site.home-site .home-shell {
    width: min(
      940px,
      calc(100% - (2 * var(--mq-desktop-safe-edge)))
    ) !important;
    max-width: min(
      940px,
      calc(100% - (2 * var(--mq-desktop-safe-edge)))
    ) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.mq-uniform-page > .site.home-site .home-hero-grid,
  body.mq-uniform-page > .site.home-site .feature-grid,
  body.mq-uniform-page > .site.home-site .mq-update-grid,
  body.mq-uniform-page > .site.home-site .home-hero-copy,
  body.mq-uniform-page > .site.home-site .feature-copy,
  body.mq-uniform-page > .site.home-site .home-hero-visual,
  body.mq-uniform-page > .site.home-site .feature-visual {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.mq-uniform-page > .site.home-site .home-hero-visual > img,
  body.mq-uniform-page > .site.home-site .feature-visual > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Les cadres internes existants gardent leur largeur propre mais restent
   systématiquement centrés sur ordinateur. */
@media (min-width: 901px) {
  .wrap,
  .home-shell,
  .secure-shell,
  .mq-container,
  .mq26-shell,
  .mq-suite-shell,
  .mq-shell,
  .mq-group-shell,
  .mq-governance-shell,
  .mq-recipient-shell,
  .mq-founder-shell,
  .mq-family-shell,
  .mq-update-shell,
  .mq-offer-shell,
  .mq-lineage-shell,
  .mq-gc-shell,
  .mq-gp-shell,
  .mq-foundation-shell,
  .mq-ext-shell,
  .deposit-shell,
  .page-shell,
  .payment-shell,
  .sealed-shell,
  .sanctuary-shell,
  .d-shell,
  .mqf-shell {
    margin-left: auto;
    margin-right: auto;
  }
}