/* ==================================================================== *
 * Page Micro-villages. Chargée après hoummi-branches.css.
 * ==================================================================== */

/* ------------------------------------------------------------------ *
 * Ouverture : le village en 3D (js/hoummi-micro-villages.js)
 * ------------------------------------------------------------------ *
 * Le titre et l'introduction, puis un parcours haut de six écrans (un
 * par étape) où la scène reste collée au haut de l'écran pendant que la
 * caméra suit le défilement. L'image de repli et le canevas sont
 * superposés ; l'image reste visible jusqu'aux premières images 3D
 * (`data-3d-pret`), et seule sans 3D. Le cadre de texte de l'étape est
 * posé en bas à gauche.
 * ------------------------------------------------------------------ */

/* La feuille Webflow donne une marge latérale à toute <section>. */
section.hm-mv-ouverture {
  margin: 0;
  width: 100%;
}

/* L'introduction se fond dans le haut de l'image : le ciel brumeux du rendu. */
.hm-mv-ouverture__intro {
  padding-top: clamp(48px, 7vw, 104px);
  padding-bottom: clamp(32px, 4vw, 56px);
  background: linear-gradient(180deg, #F6F7F5 0%, #DCDEDD 100%);
}

.hm-mv-ouverture__intro .hm-titre { margin-bottom: clamp(16px, 2vw, 28px); }
.hm-mv-ouverture__intro .hm-chapeau { max-width: 44rem; margin: 0; }

.hm-mv-parcours {
  position: relative;
  height: 600vh;
}

.hm-mv-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #DCDEDD;
}

.hm-mv-repli,
.hm-mv-canevas {
  position: absolute;
  inset: 0;
}

.hm-mv-repli img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* L'image (rapport 8/5) est cadrée comme la caméra de la scène, pour que la
   3D prenne le relais sans saut. Moins large que 8/5, la caméra garde sa
   largeur de champ et montre plus de ciel et de sol : l'image prend toute
   la largeur, centrée, entre une bande de ciel et une bande de sol de ses
   couleurs. Sous le rapport 0,664 (focale verticale plafonnée de la scène),
   elle déborde des côtés : sa largeur vaut alors 66,4 % de la hauteur.
   Ses bords haut et bas se fondent dans les bandes. */
@media (max-aspect-ratio: 8/5) {
  .hm-mv-repli { background: linear-gradient(180deg, #DCDEDD 50%, #AFBF92 50%); }
  .hm-mv-repli img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 66.4vh);
    width: max(100%, 66.4svh);
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}

/* Sous le canevas jusqu'à ses premières images, puis effacée. */
.hm-mv-repli { transition: opacity .6s ease; }
.hm-mv-scene[data-3d-pret] .hm-mv-repli { opacity: 0; }

.hm-mv-canevas { pointer-events: none; }
.hm-mv-canevas canvas { display: block; }

/* Cadre de texte de l'étape : son opacité et son décalage suivent le défilement (script). */
.hm-mv-texte {
  position: absolute;
  left: var(--g);
  bottom: 10vh;
  max-width: 34rem;
  padding: 18px 24px 20px;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(33, 34, 33, .12);
  font-family: Ranua, sans-serif;
  color: var(--hm-noir);
}

.hm-mv-texte__titre {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hm-vert-lisible);
}

.hm-mv-texte__corps {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 761px) {
  .hm-mv-texte { left: calc(var(--rail) + var(--g)); }
}

/* Sur téléphone, à 16 px des bords, et au-dessus des deux boutons
   flottants (cookies, discussion : 48 px à 16 px du bas). */
@media (max-width: 700px) {
  .hm-mv-texte {
    left: 16px;
    right: 16px;
    bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 60px);
    max-width: none;
    padding: 14px 18px 16px;
  }
  .hm-mv-texte__corps { font-size: 17px; }
}

/* Sans flou, le fond devient presque plein pour garder le texte lisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hm-mv-texte { background: rgba(255, 255, 255, .95); }
}

@media (prefers-reduced-motion: reduce) {
  .hm-mv-repli { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Sections de contenu, sous l'ouverture
 * ------------------------------------------------------------------ *
 * Elles réemploient les gabarits du site (hm-s, hm-tuile, hm-concept,
 * hm-etapes, hm-scind, hm-appel). Ne sont propres à la page que la
 * grille des cinq points, les fiches des publics, les plans, le schéma
 * de la terrasse partagée, les assemblages, les plans masses des
 * dispositions et la numérotation du déroulé.
 * ------------------------------------------------------------------ */

/* Le principe : cinq points sur une rangée, puis deux colonnes et une. */
.hm-mv-points { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hm-mv-points li { min-height: 0; justify-content: flex-end; }
.hm-mv-points .hm-concept__t { font-size: clamp(19px, 1.6vw, 24px); }

@media (max-width: 1100px) {
  .hm-mv-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .hm-mv-points { grid-template-columns: 1fr; }
  .hm-mv-points li { padding: 20px 22px; }
}

/* Pour qui : quatre fiches de même gabarit, deux par rangée. */
.hm-mv-publics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 860px) {
  .hm-mv-publics { grid-template-columns: 1fr; }
}

.hm-mv-public { min-height: 0; }
.hm-mv-public h3 { margin-top: 0; margin-bottom: 20px; }
.hm-mv-public dl { margin: 0; }

.hm-mv-public dl > div {
  padding: 12px 0;
  border-top: 1px solid var(--hm-trait);
}

.hm-mv-public dt {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hm-vert-lisible);
}

.hm-mv-public dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--hm-encre-douce);
}

/* Composer son village : cinq plans de plans.json, dans des cadres de même
   hauteur où chaque dessin garde ses proportions. */
.hm-mv-plans {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1100px) {
  .hm-mv-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hm-mv-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.hm-mv-plan { margin: 0; }

.hm-mv-plan__vue {
  aspect-ratio: 4 / 3;
  padding: 12px;
  background: var(--hm-blanc);
  border: 1px solid var(--hm-trait);
  border-radius: var(--hm-r);
}

.hm-mv-plan__vue img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hm-mv-plan figcaption {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.hm-mv-plan figcaption b {
  font-family: Ranua, sans-serif;
  font-weight: 200;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  color: var(--hm-encre);
}

.hm-mv-plan figcaption span {
  font-size: 13.5px;
  color: var(--hm-encre-douce);
}

/* Deux logements, une terrasse partagée : un plan par type de logement,
   redessiné d'après les fiches de la gamme (bloc généré par
   outils/micro-villages/logements.mjs). Sans script, les cinq plans se
   suivent ; avec, des onglets n'en montrent qu'un. */
.hm-mv-ensembles { margin-top: clamp(56px, 7vw, 96px); }
.hm-mv-ensembles > .hm-titre { margin: 0 0 clamp(14px, 1.6vw, 22px); }
.hm-mv-ensembles > .hm-p { max-width: 44rem; }

.hm-mv-logements { margin-top: 24px; }

.hm-mv-logements__onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.hm-mv-logements__onglets[hidden] { display: none; }

.hm-mv-logements__onglets button {
  font: inherit;
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid var(--hm-trait);
  border-radius: 999px;
  background: var(--hm-blanc);
  color: var(--hm-encre);
  cursor: pointer;
}

.hm-mv-logements__onglets button[aria-selected="true"] {
  background: var(--hm-noir);
  border-color: var(--hm-noir);
  color: var(--hm-blanc);
}

.hm-mv-logements__onglets button:focus-visible {
  outline: 2px solid var(--hm-vert-profond);
  outline-offset: 2px;
}

.hm-mv-logement {
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.hm-mv-logement[hidden] { display: none; }

@media (max-width: 860px) {
  .hm-mv-logement { grid-template-columns: minmax(0, 1fr); }
}

.hm-mv-logement__vue {
  padding: 12px;
  background: var(--hm-blanc);
  border: 1px solid var(--hm-trait);
  border-radius: var(--hm-r);
}

.hm-mv-logement figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.hm-mv-logement figcaption b {
  font-family: Ranua, sans-serif;
  font-weight: 200;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  color: var(--hm-encre);
  margin-bottom: 4px;
}

.hm-mv-logement figcaption span {
  font-size: 14px;
  color: var(--hm-encre-douce);
}

.hm-mv-logement figcaption p {
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hm-encre);
}

.hm-mv-logement figcaption ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hm-encre-douce);
}

/* Le plan : pièces en aplats, murs noirs, vitrages bleus, cotes en
   millimètres. Le corps du texte est posé par le générateur, en unités du
   dessin, pour garder la même taille d'un plan à l'autre. */
.mv-lgt { display: block; width: 100%; height: auto; max-height: 640px; }
.mv-lgt__mur { fill: #212221; }
.mv-lgt__vie { fill: #EEF5D2; }
.mv-lgt__eau { fill: #CDEEF4; }
.mv-lgt__nuit { fill: #F9DCE0; }
.mv-lgt__travail { fill: #8A8A88; }
.mv-lgt__vitre { fill: #3BA9DE; }
.mv-lgt__terrasse { fill: #EDE8DC; }
.mv-lgt__entree { fill: #212221; }
.mv-lgt__piece { text-anchor: middle; fill: #212221; font-family: inherit; }
.mv-lgt__surface { fill: #4a4b4a; font-size: .88em; }
.mv-lgt__cote line { stroke: #4a4b4a; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mv-lgt__cote .mv-lgt__rappel { stroke: #b5b1a6; }
.mv-lgt__cote text { text-anchor: middle; fill: #4a4b4a; font-family: inherit; }

/* Sur téléphone, le plan tient dans 340 px : texte plus grand, en unités
   du dessin (--k, posé par le générateur, vaut un millième de son plus
   grand côté). */
@media (max-width: 560px) {
  .mv-lgt__piece { font-size: calc(var(--k) * 21px); }
  .mv-lgt__cote text { font-size: calc(var(--k) * 17px); }
}

/* Assembler les modules : dix silhouettes de data/combinaisons.json, à la
   même échelle (blocs générés par outils/micro-villages/assemblages.mjs).
   Le trait est celui du générateur de l'accueil (hm-combi__mod,
   hm-combi__mur, hm-plan__joints, dans hoummi-branches.css). */
.hm-mv-assembler { margin-top: clamp(56px, 7vw, 96px); }
.hm-mv-assembler > .hm-titre { margin: 0 0 clamp(14px, 1.6vw, 22px); }
.hm-mv-assembler > .hm-p { max-width: 44rem; }
.hm-mv-assembler > .hm-note { margin-top: 24px; }

.hm-mv-assemblages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 16px;
  margin-top: clamp(24px, 3vw, 36px);
}

@media (max-width: 640px) {
  .hm-mv-assemblages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
}

.hm-mv-assemblage { margin: 0; }

.hm-mv-assemblage__vue {
  aspect-ratio: 1 / 1;
  padding: 8px;
  background: var(--hm-blanc);
  border: 1px solid var(--hm-trait);
  border-radius: var(--hm-r);
}

.hm-mv-assemblage__svg { display: block; width: 100%; height: 100%; }

.hm-mv-assemblage figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  text-align: left;
}

.hm-mv-assemblage figcaption b {
  font-family: Ranua, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.2;
  color: var(--hm-encre);
}

.hm-mv-assemblage figcaption span {
  font-size: 13.5px;
  color: var(--hm-encre-douce);
}

/* Des villages de toutes les formes : six plans masses au rapport 7/5
   (blocs générés par outils/micro-villages/dispositions.mjs). Les trois
   premiers occupent une rangée entière, à côté de leur vue 3D de dessus ;
   les trois autres se partagent la dernière. */
.hm-mv-legende {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: clamp(20px, 2.4vw, 32px) 0 clamp(28px, 3vw, 40px);
  padding: 0;
  font-size: 14px;
  color: var(--hm-encre-douce);
}

.hm-mv-legende li { display: flex; align-items: center; gap: 8px; }

.mv-legende__pastille {
  flex: none;
  width: 20px;
  height: 13px;
  border: 1px solid rgba(33, 34, 33, .3);
  border-radius: 2px;
}

.mv-legende__pastille--module { background: #BBAD95; border-color: var(--hm-noir); }
.mv-legende__pastille--etage { background: #8F7F66; border-color: var(--hm-noir); }
.mv-legende__pastille--commun { background: var(--hm-vert-profond); border-color: var(--hm-noir); }
.mv-legende__pastille--terrasse { background: #EAD9B2; border-color: var(--hm-beige-fonce); }
.mv-legende__pastille--allee { background: #DEDBD3; }
.mv-legende__pastille--sol { background: var(--hm-vert-doux); }

.hm-mv-dispos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 64px) 24px;
}

.hm-mv-dispo { min-width: 0; }
.hm-mv-dispo--vue { grid-column: 1 / -1; }

.hm-mv-dispo__visuels { display: grid; gap: 16px; }
.hm-mv-dispo--vue .hm-mv-dispo__visuels { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hm-mv-dispo__cadre {
  aspect-ratio: 7 / 5;
  overflow: hidden;
  border-radius: var(--hm-r);
  background: var(--hm-vert-doux);
}

.hm-mv-dispo__plan,
.hm-mv-dispo__cadre img {
  display: block;
  width: 100%;
  height: 100%;
}

.hm-mv-dispo__cadre img { object-fit: cover; }

.hm-mv-dispo h3 {
  margin: 18px 0 6px;
  font-family: Ranua, sans-serif;
  font-weight: 200;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  color: var(--hm-encre);
}

.hm-mv-dispo p {
  max-width: 40rem;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--hm-encre-douce);
}

@media (max-width: 860px) {
  .hm-mv-dispos { grid-template-columns: 1fr; }
  .hm-mv-dispo--vue .hm-mv-dispo__visuels { grid-template-columns: 1fr; gap: 12px; }
}

/* Le plan masse : vue de dessus, sans cotes. Le trait garde son épaisseur
   à toute taille du dessin. */
.mv-plan__sol { fill: var(--hm-vert-doux); }
.mv-plan__allee { fill: none; stroke: #DEDBD3; stroke-linejoin: round; stroke-linecap: butt; }
.mv-plan__gravier { fill: #DEDBD3; }
.mv-plan__terrasse { fill: #EAD9B2; stroke: var(--hm-beige-fonce); stroke-width: .6px; vector-effect: non-scaling-stroke; }
.mv-plan__arbre { fill: #6DBE92; fill-opacity: .75; }
.mv-plan__module { fill: #BBAD95; stroke: var(--hm-noir); stroke-width: 1.1px; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.mv-plan__module--etage { fill: #8F7F66; }
.mv-plan__module--commun { fill: var(--hm-vert-profond); }

/* Le déroulé : une liste ordonnée, numérotée par la liste elle-même. */
.hm-mv-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mv-etape;
}

.hm-mv-etapes .hm-etape { counter-increment: mv-etape; }

.hm-mv-etapes .hm-etape::before {
  content: counter(mv-etape);
  display: block;
  margin: 0 0 20px;
  font-family: Ranua, sans-serif;
  font-weight: 200;
  font-size: 52px;
  line-height: 1;
  color: var(--hm-vert-profond);
}

@media (max-width: 1000px) and (min-width: 561px) {
  .hm-mv-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Parlons de votre projet. */
.hm-mv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hm-appel .hm-mv-appel__note {
  margin: 28px 0 0;
  color: var(--hm-noir);
}

.hm-appel .hm-mv-appel__note a { color: var(--hm-noir); text-decoration: underline; }

.hm-appel .hm-mv-appel__voir { margin: 16px 0 0; opacity: 1; }
.hm-appel .hm-mv-appel__voir .hm-lien { color: var(--hm-noir); }

@media (max-width: 560px) {
  .hm-mv-actions .hm-btn { width: 100%; justify-content: space-between; }
}