/* ============================================================
   LA MAISON — page dédiée. Toutes les règles préfixées par
   `.maison-page` pour ne rien affecter d'autre. Reprend
   strictement la DA existante Chenzu :
     - fond crème (--kinu), noir sumi (--sumi)
     - accents ocre (--kin)
     - filets fins (--sumi-12)
     - Marcellus (titres) + Karla (texte)
   ============================================================ */

/* ------------------------------------------------------------
   HERO — grande image sombre, texte overlay en haut-gauche.
   ------------------------------------------------------------ */
.maison-page .maison-hero {
  position: relative;
  overflow: hidden;
  min-height: min(88svh, 780px);
  display: flex;
  align-items: center;
  background: #000;
  color: var(--kinu);
}
.maison-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}
.maison-hero__grade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.20) 30%,
    rgba(0,0,0,0.10) 50%,
    rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.maison-hero__inner {
  position: relative;
  z-index: 2;
  padding: 120px var(--page-pad) 96px;
  max-width: 720px;
  width: 100%;
}
.maison-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,239,231,0.75);
  margin-bottom: 32px;
}
.maison-hero__title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(52px, 6.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--kinu);
  margin: 0 0 32px;
  max-width: 12ch;
}
.maison-hero__lede {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244,239,231,0.85);
  margin: 0;
  max-width: 44ch;
}

/* ------------------------------------------------------------
   BLOCS ÉDITORIAUX — 2 colonnes texte + image.
   Même palette et typographies que la Carte.
   ------------------------------------------------------------ */
.maison-block {
  padding: 100px var(--page-pad);             /* 200 px between desktop chapters. */
  background: var(--kinu);
}
/* A measured transition from the last image to the shared footer. */
.maison-block:last-of-type { padding-bottom: 84px; }
.maison-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(80px, 7.2vw, 112px);
  align-items: center;
}
/* Ordre DOM constant (texte d'abord, image ensuite) pour que
   mobile empile toujours "texte → image".
   Variante --image-left : sur desktop, on renvoie l'image à gauche. */
.maison-block--image-left .maison-block__figure { grid-column: 1; grid-row: 1; }
.maison-block--image-left .maison-block__text   { grid-column: 2; grid-row: 1; }

.maison-block__figure {
  margin: 0;
  overflow: hidden;
  background: var(--hinoki);
  aspect-ratio: 5 / 4;                        /* +7 % de hauteur → visuel plus présent */
  width: 100%;
}
.maison-block__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.maison-block__text {
  min-width: 0;
  max-width: 44ch;
}
.maison-block__eyebrow {
  display: inline-block;
  padding-top: 14px;
  border-top: 1px solid var(--kin);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kin);
  margin-bottom: 32px;
}
.maison-block__h {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(40px, 4.1vw, 60px);       /* +7 % : titres un peu plus forts */
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--sumi);
  margin: 0 0 32px;
}
.maison-block__rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--sumi-12);
  margin-bottom: 28px;
}
.maison-block__body {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--sumi);
  margin: 0;
}
.maison-block__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kin);
  text-decoration: none;
  transition: color 260ms var(--ease), transform 260ms var(--ease);
}
.maison-block__cta svg { width: 20px; height: 1px; overflow: visible; }
.maison-block__cta svg line { stroke: currentColor; stroke-width: 1; }
.maison-block__cta:hover { transform: translateX(4px); }
.maison-block__cta:focus-visible { outline: 2px solid var(--kin); outline-offset: 4px; }

/* Bloc "valeurs" — 3 lignes empilées façon partition */
.maison-block__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 32px;
}
.maison-block__stack span {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(32px, 3.7vw, 52px);       /* +8 % */
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sumi);
}

/* ------------------------------------------------------------
   Tablette < 1023 px
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .maison-block { padding: 76px var(--page-pad); }
  .maison-block:last-of-type { padding-bottom: 72px; }
  .maison-block__grid { column-gap: 48px; }
}

/* ------------------------------------------------------------
   Mobile < 768 px — colonnes empilées, image après texte
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .maison-page .maison-hero { min-height: 82svh; }
  .maison-hero__inner { padding: 96px 24px 48px; }
  .maison-hero__title { font-size: clamp(40px, 10vw, 56px); }

  .maison-block { padding: 60px 24px; }
  .maison-block:last-of-type { padding-bottom: 64px; }
  .maison-block__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  /* Sur mobile on remet tout dans l'ordre DOM (texte puis image) */
  .maison-block__figure,
  .maison-block--image-left .maison-block__figure { grid-column: 1; grid-row: auto; }
  .maison-block__text,
  .maison-block--image-left .maison-block__text   { grid-column: 1; grid-row: auto; max-width: 100%; }

  .maison-block__figure { aspect-ratio: 4 / 3; }
}

/* Reduced motion — désactive les micro-mouvements */
@media (prefers-reduced-motion: reduce) {
  .maison-block__cta { transition: none; }
  .maison-block__cta:hover { transform: none; }
}