/* Composant 3 : les trois maisons, présentées comme les lames d'un nuancier d'imprimeur.
   Chaque lame est la matière de sa marque (peinture, lumière, tissu haute visibilité), avec son étiquette,
   son œillet de rivet et sa référence. Au survol, la lame sort du nuancier et sa matière réagit. */
.maisons { max-width: 1440px; margin: 0 auto; padding: var(--espace-9) max(var(--espace-7), env(safe-area-inset-right, 0px)) var(--espace-9) max(var(--espace-7), env(safe-area-inset-left, 0px)); }
.maisons__tete { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--espace-7); align-items: end; margin-bottom: var(--espace-7); }
.maisons__tete h2 { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.maisons__tete p { margin: 0; max-width: 36em; font-size: 18px; line-height: 28px; color: var(--texte); }

.nuancier { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lame { position: relative; }
.lame > a {
  position: relative; display: grid; grid-template-columns: 380px minmax(0, 1fr); min-height: 230px; text-decoration: none; color: var(--texte);
  background: var(--fond-releve); box-shadow: 0 1px 0 rgba(10, 10, 11, 0.06), 0 10px 30px -18px rgba(10, 10, 11, 0.35);
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.55s;
}
.lame > a:hover, .lame > a:focus-visible { transform: translateX(28px); box-shadow: 0 1px 0 rgba(10, 10, 11, 0.06), 0 22px 40px -20px rgba(10, 10, 11, 0.45); }

/* L'étiquette de la lame, avec l'œillet du rivet qui tient le nuancier. */
.lame__etiquette { position: relative; display: grid; align-content: center; gap: 10px; padding: var(--espace-6) var(--espace-6) var(--espace-6) 76px; border-right: 1px solid var(--filet); }
.lame__etiquette::before {
  content: ""; position: absolute; left: 28px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--fond-creux) 0 46%, #b8b4ac 47% 58%, #e9e6df 60% 72%, #9d998f 74%);
  box-shadow: inset 0 1px 2px rgba(10, 10, 11, 0.35);
}
.lame__nom { font-family: var(--font-titre); font-weight: 700; font-size: 30px; line-height: 34px; }
.lame__nom small { display: block; margin-top: 4px; font-family: var(--font-texte); font-weight: 500; font-size: 14px; line-height: 18px; color: var(--texte-doux); }
.lame__metier { font-size: 16px; line-height: 24px; max-width: 30ch; }
.lame__lien { font-size: 15px; font-weight: 600; color: var(--accent); }
.lame__lien span { display: inline-block; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lame > a:hover .lame__lien span { transform: translateX(4px); }

/* La matière : vidéo courte, jouée au survol ou à l'arrivée à l'écran sur téléphone. */
.lame__matiere { position: relative; overflow: hidden; background: #1a1b16; }
.lame__matiere img, .lame__matiere video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lame__matiere video { opacity: 0; transition: opacity 0.25s; }
.lame.joue .lame__matiere video { opacity: 1; }
/* La référence, comme au pied d'une lame de nuancier. */
.lame__ref { position: absolute; right: 14px; bottom: 14px; z-index: 1; padding: 6px 10px; background: var(--fond-releve); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--texte); font-variant-numeric: tabular-nums; }
.lame__ref b { font-weight: 600; }

@media (max-width: 1000px) {
  .maisons { padding: var(--espace-8) max(var(--espace-4), env(safe-area-inset-right, 0px)) var(--espace-8) max(var(--espace-4), env(safe-area-inset-left, 0px)); }
  .maisons__tete { grid-template-columns: 1fr; gap: var(--espace-4); margin-bottom: var(--espace-6); }
  .lame > a { grid-template-columns: 1fr; min-height: 0; }
  .lame > a:hover, .lame > a:focus-visible { transform: none; }
  .lame__matiere { order: -1; aspect-ratio: 1600 / 520; }
  .lame__etiquette { padding: var(--espace-5) var(--espace-5) var(--espace-5) 62px; border-right: 0; border-top: 1px solid var(--filet); }
  .lame__etiquette::before { left: 22px; }
  .lame__nom { font-size: 26px; line-height: 30px; }
}