/* ============================================================
   The Loft 67 — Shell container (source unique de la largeur)
   Aligne header, sections et footer sur la même grille.
   Largeur max 1250px, marges responsives identiques au footer.
   ============================================================ */

:root {
  --tlf-shell-max: 1250px;
  --tlf-shell-gutter-desk: 32px;   /* marge gauche/droite ≥1024px */
  --tlf-shell-gutter-mob: 16px;    /* marge gauche/droite <1024px */
}

/* Conteneur visible (carte/section avec fond) :
   - Centré, max 1250px, marges identiques header/footer. */
.tlf-shell {
  width: min(var(--tlf-shell-max), calc(100% - (2 * var(--tlf-shell-gutter-desk))));
  max-width: var(--tlf-shell-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
@media (max-width: 1023px) {
  .tlf-shell {
    width: calc(100% - (2 * var(--tlf-shell-gutter-mob)));
  }
}

/* Section pleine largeur (fond qui s'étend bord à bord)
   avec contenu intérieur aligné sur la grille shell. */
.tlf-section { width: 100%; box-sizing: border-box; }
.tlf-section > .tlf-shell { display: block; }

/* Espacement vertical standard entre sections */
.tlf-section--pad   { padding-block: 56px; }
.tlf-section--pad-l { padding-block: 96px; }
@media (max-width: 1023px) {
  .tlf-section--pad   { padding-block: 40px; }
  .tlf-section--pad-l { padding-block: 64px; }
}
@media (max-width: 760px) {
  .tlf-section--pad   { padding-block: 32px; }
  .tlf-section--pad-l { padding-block: 48px; }
}

/* ----------------------------------------------------------
   Overrides : alignement de TOUS les conteneurs existants sur
   la même grille 1250px responsive (source de vérité unique).
   Cela évite d'avoir à toucher la structure HTML de chaque page.
   ---------------------------------------------------------- */

/* .max-w-shell (nos-logements, a-propos, faq) */
.max-w-shell {
  max-width: var(--tlf-shell-max) !important;
  margin-left: auto;
  margin-right: auto;
}

/* Tailwind max-w-7xl (blog.html + articles blog/*) → 1250px pour
   coller à la grille header/footer. */
.max-w-7xl {
  max-width: var(--tlf-shell-max) !important;
  margin-left: auto;
  margin-right: auto;
}

/* .page (index, contact, logements/*) — assure cohérence si une
   page définit une valeur différente en inline. */
.page {
  width: min(var(--tlf-shell-max), calc(100% - (2 * var(--tlf-shell-gutter-desk)))) !important;
  max-width: var(--tlf-shell-max) !important;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023px) {
  .page {
    width: calc(100% - (2 * var(--tlf-shell-gutter-mob))) !important;
  }
}