/* ============================================================
   SpiLi — Histoires de maisons (lot R-maisons, 03/10/2026)
   ------------------------------------------------------------
   Le mur des maisons, la page d'une histoire, la charte.
   Ne consomme que les jetons de tokens.css : ni couleur en dur,
   ni angle arrondi, l'accent réservé aux liens et au focus.

   Le degré de certitude se lit à la TRAME du filet, jamais à la
   couleur — la grammaire de la Frise et des fiches, augmentée
   d'un quatrième état propre à la rubrique : la légende, en
   double trait (« deux versions de la même histoire »).
   ============================================================ */

/* ---------- Le filet de certitude ---------- */

.maison-filet {
  border: 0;
  height: var(--spili-notation);
  margin: 0;
  width: 100%;
}
.maison-filet--atteste   { background: var(--spili-trame-atteste); }
.maison-filet--probable  { background: var(--spili-trame-probable); }
.maison-filet--tradition { background: var(--spili-trame-rapporte); }
.maison-filet--legende {
  height: 7px;
  background:
    linear-gradient(var(--spili-texte), var(--spili-texte)) top / 100% 2px no-repeat,
    linear-gradient(var(--spili-texte), var(--spili-texte)) bottom / 100% 2px no-repeat;
}

/* ---------- Le seuil ---------- */

.maisons-tete .lead { max-width: 62ch; }

.maisons-mur-section { padding-top: 24px; }
.maisons-mur-tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 24px; margin-bottom: 28px;
}
.maisons-mur-tete h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); }
.maisons-mur-tete p { color: var(--spili-texte-faible); font-size: 14.5px; }

/* Le mur : des cartes de même largeur, jointes par un trait de 2 px
   — la grille du site. */
.maisons-mur {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 2px;
  background: var(--spili-trait);
  border: 2px solid var(--spili-trait);
}
.maison-carte { background: var(--spili-fond-eleve); display: flex; }
.maison-carte a {
  display: flex; flex-direction: column; width: 100%;
  color: var(--spili-texte); text-decoration: none;
}
.maison-carte a:focus-visible { outline: 2px solid var(--spili-accent); outline-offset: -2px; }

.maison-carte-image,
.maison-carte-plaque {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--spili-trait);
  background: var(--spili-fond-carte);
}
.maison-carte-image img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform 600ms ease;
}
.maison-carte a:hover .maison-carte-image img { transform: scale(1.03); }

/* Sans document reproductible, la carte porte l'année de fondation sur le
   graticule du système : une plaque typographique, pas une image vide. */
.maison-carte-plaque {
  position: relative;
  background-image:
    linear-gradient(var(--spili-trait) 1px, transparent 1px),
    linear-gradient(90deg, var(--spili-trait) 1px, transparent 1px);
  background-size: var(--spili-trame) var(--spili-trame);
  background-color: var(--spili-fond-carte);
}
.maison-carte-annee {
  position: absolute; left: 22px; bottom: 14px;
  font-family: var(--spili-data);
  font-size: clamp(3.2rem, 8vw, 4.6rem);
  font-weight: 300; letter-spacing: -0.04em; line-height: 1;
  color: var(--spili-texte);
}

.maison-carte-corps { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.maison-carte-nom {
  font-family: var(--spili-data); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--spili-texte-faible);
}
.maison-carte-question {
  font-size: 1.32rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.22;
}
.maison-carte a:hover .maison-carte-question { color: var(--spili-accent); }
.maison-carte-accroche { font-size: 14.5px; color: var(--spili-texte-doux); line-height: 1.55; }
.maison-carte-meta {
  margin-top: auto; padding-top: 6px;
  font-family: var(--spili-data); font-size: 11.5px; color: var(--spili-texte-faible);
}

/* ---------- Les fils ---------- */

.maisons-fils {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 2px; background: var(--spili-trait); border: 2px solid var(--spili-trait);
}
.maison-fil { background: var(--spili-fond-eleve); padding: 24px 24px 26px; }
.maison-fil h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 10px; }
.maison-fil p { font-size: 14.5px; color: var(--spili-texte-doux); }
.maison-fil-etiquette {
  margin-top: 16px;
  font-family: var(--spili-data); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
}
.maison-fil .maison-fil-etiquette { color: var(--spili-texte-faible); }
.maison-fil-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 15px; }
.maison-fil-expo { margin-top: 12px; }

/* ---------- La charte ---------- */

.maisons-charte-cadre {
  max-width: 760px;
  border-top: var(--spili-notation) solid var(--spili-texte);
  padding-top: 26px;
}
.maisons-charte-cadre h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 12px; }
.maisons-charte-lead { color: var(--spili-texte-doux); margin-bottom: 18px; }
.maisons-charte-liste { margin-left: 22px; display: grid; gap: 12px; color: var(--spili-texte-doux); }
.maisons-charte-liste strong { color: var(--spili-texte); font-weight: 500; }
.maisons-charte-suite { margin-top: 20px; font-size: 14.5px; color: var(--spili-texte-doux); }

/* ---------- Le pied de rubrique ---------- */

.maisons-sante {
  border-top: 1px solid var(--spili-trait);
  padding: 22px 0 30px;
  font-size: 14px;
  color: var(--spili-texte-doux);
}
.maisons-sante p + p { margin-top: 8px; color: var(--spili-texte); font-weight: 500; }

/* ============================================================
   La page d'une histoire
   ============================================================ */

.maison-tete .fil-ariane { margin-bottom: 26px; }
.maison-tete h1 { max-width: 22ch; }
.maison-tete .lead { max-width: 60ch; }
.maison-meta {
  margin-top: 18px;
  font-family: var(--spili-data); font-size: 12px; color: var(--spili-texte-faible);
}

.maison-corps {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px; align-items: start;
  padding-top: 20px; padding-bottom: 56px;
}
.maison-recit { max-width: 66ch; }
.maison-recit p { font-size: 17.5px; line-height: 1.72; color: var(--spili-texte-doux); }
.maison-recit p + p { margin-top: 18px; }
.maison-recit .maison-idee {
  font-size: 1.32rem; line-height: 1.45; color: var(--spili-texte);
  letter-spacing: -0.015em;
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 1px solid var(--spili-trait);
}
/* La première lettre du récit, en capitale haute : le geste éditorial qui
   dit « ici commence une histoire », sans ornement. */
.maison-recit .maison-idee + p::first-letter {
  float: left; font-size: 3.4em; line-height: 0.86; margin: 6px 10px 0 0;
  font-weight: 300; color: var(--spili-texte);
}

.maison-aside { position: sticky; top: calc(var(--spili-entete) + 20px); display: grid; gap: 30px; }
.maison-aside-titre {
  font-family: var(--spili-data); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--spili-texte-faible);
  border-bottom: 1px solid var(--spili-trait); padding-bottom: 8px; margin-bottom: 4px;
}
.maison-objet .figure { margin-top: 14px; }
.maison-objet-absent { margin: 14px 0; font-size: 14.5px; }
.maison-cartel-titre { font-size: 15px; color: var(--spili-texte); margin: 10px 0 8px; }
.maison-cartel-titre cite { font-style: italic; }
.maison-cartel { font-size: 13.5px; line-height: 1.55; }
.maison-cartel dt {
  font-family: var(--spili-data); font-size: 11px; color: var(--spili-texte-faible); margin-top: 8px;
}
.maison-cartel dd { margin: 0; color: var(--spili-texte-doux); }

.maison-personnages ul { list-style: none; display: grid; gap: 12px; margin-top: 12px; }
.maison-personnage-nom { font-weight: 500; color: var(--spili-texte); }
.maison-personnage-dates { font-family: var(--spili-data); font-size: 12px; color: var(--spili-texte-faible); }
.maison-personnage-role { display: block; font-size: 13.5px; color: var(--spili-texte-doux); }

/* ---------- La confrontation ----------
   La légende d'abord, sur le papier teinté de la carte, comme une pièce
   qu'on présente ; les sources lui répondent sur le blanc. Ce n'est pas un
   tableau : deux voix, l'une après l'autre, la seconde décalée. */

.maison-confrontation { padding: 10px 0 56px; }
.maison-confrontation .container { display: grid; gap: 0; }
.maison-legende {
  background: var(--spili-fond-carte);
  padding: 34px 36px 32px;
  max-width: 760px;
}
.maison-sources-disent {
  background: var(--spili-fond-eleve);
  border: 1px solid var(--spili-trait);
  border-top: var(--spili-notation) solid var(--spili-texte);
  padding: 30px 36px 32px;
  max-width: 760px;
  margin: -14px 0 0 min(12%, 120px);
  position: relative;
}
.maison-scene-etiquette {
  font-family: var(--spili-data); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--spili-texte);
  margin-bottom: 6px;
}
.maison-legende-porteur { font-size: 13.5px; color: var(--spili-texte-faible); margin-bottom: 18px; }
.maison-legende blockquote {
  margin: 0; padding-left: 22px;
  border-left: 2px solid var(--spili-texte-faible);
}
.maison-legende blockquote p {
  font-size: 1.12rem; line-height: 1.6; font-style: italic; color: var(--spili-texte-doux);
}
.maison-legende blockquote p + p { margin-top: 14px; }
.maison-sources-disent p { font-size: 16px; line-height: 1.68; color: var(--spili-texte-doux); }
.maison-sources-disent p + p { margin-top: 14px; }
.maison-sources-disent .maison-scene-etiquette + p { margin-top: 12px; }

/* ---------- Le verdict ---------- */

.maison-verdict { padding: 0 0 60px; }
.maison-verdict h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 22px; max-width: 760px; }

.maison-pari { max-width: 760px; margin-bottom: 24px; }
.maison-pari[hidden] { display: none; }
.maison-pari-titre { font-size: 1.1rem; font-weight: 500; }
.maison-pari-aide { font-size: 14.5px; color: var(--spili-texte-doux); margin-top: 4px; }
.maison-pari-choix { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.maison-pari-choix button {
  font: inherit; font-size: 15px;
  padding: 10px 18px;
  background: var(--spili-fond-eleve);
  color: var(--spili-texte);
  border: 1px solid var(--spili-texte);
  border-radius: 0;
  cursor: pointer;
}
.maison-pari-choix button:hover { background: var(--spili-accent-voile); }
.maison-pari-choix button:focus-visible { outline: 2px solid var(--spili-accent); outline-offset: 2px; }
.maison-pari-choix button[aria-pressed="true"] { background: var(--spili-texte); color: var(--spili-fond); }
.maison-pari-choix button:disabled { cursor: default; }
.maison-pari-retour { margin-top: 14px; font-size: 15px; color: var(--spili-texte); min-height: 1.5em; }

.maison-verdict-reponse { max-width: 760px; }
.maison-verdict-reponse[hidden] { display: none; }
/* La réponse se dévoile : le filet se trace d'abord, le texte suit. */
.maison-verdict-reponse.est-revelee .maison-filet { animation: maison-trace 700ms ease-out both; transform-origin: left; }
.maison-verdict-reponse.est-revelee > :not(.maison-filet) { animation: maison-parait 500ms 450ms ease-out both; }
@keyframes maison-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes maison-parait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .maison-verdict-reponse.est-revelee .maison-filet,
  .maison-verdict-reponse.est-revelee > * { animation: none; }
  .maison-carte-image img { transition: none; }
}

.maison-verdict-degre {
  margin-top: 14px;
  font-family: var(--spili-data); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--spili-texte);
}
.maison-verdict-degre-mot { color: var(--spili-texte-faible); }
.maison-verdict-court {
  margin-top: 12px;
  font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.35; letter-spacing: -0.02em; font-weight: 500;
}
.maison-verdict-texte { margin-top: 14px; font-size: 16.5px; line-height: 1.7; color: var(--spili-texte-doux); }

/* ---------- Comment nous savons ---------- */

.maison-savoir {
  background: var(--spili-fond-eleve);
  border-top: 1px solid var(--spili-trait);
  border-bottom: 1px solid var(--spili-trait);
  padding: 44px 0 48px;
  font-size: 14.5px;
}
.maison-savoir h2 { font-size: 1.5rem; margin-bottom: 10px; }
.maison-savoir h3 {
  font-family: var(--spili-data); font-size: 12px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--spili-texte-faible);
  margin: 30px 0 12px;
}
.maison-savoir-intro { max-width: 70ch; color: var(--spili-texte-doux); }

.maison-reperes {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 22px 26px;
}
.maison-reperes li { display: grid; gap: 4px; align-content: start; }
.maison-reperes .maison-filet { margin-bottom: 8px; }
.maison-repere-annee { font-family: var(--spili-data); font-size: 15px; color: var(--spili-texte); }
.maison-repere-titre { color: var(--spili-texte-doux); line-height: 1.5; }
.maison-repere-meta { font-family: var(--spili-data); font-size: 11.5px; color: var(--spili-texte-faible); }

.maison-degres {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 14px 26px; margin-top: 28px;
  font-size: 13.5px;
}
.maison-degres dt { font-weight: 500; display: grid; gap: 6px; }
.maison-degres dt .maison-filet { width: 48px; }
.maison-degres dd { margin: 4px 0 0; color: var(--spili-texte-doux); }

.maison-incertain { margin-left: 20px; display: grid; gap: 8px; max-width: 76ch; color: var(--spili-texte-doux); }
.maison-sources { margin-left: 22px; display: grid; gap: 8px; max-width: 80ch; color: var(--spili-texte-doux); }
.maison-sources a { overflow-wrap: anywhere; }
.maison-sources li:target { background: var(--spili-accent-voile); }

/* ---------- Poursuivre ---------- */

.maison-poursuivre { padding: 44px 0 40px; }
.maison-poursuivre h2 { font-size: 1.5rem; margin-bottom: 18px; }
.maison-poursuivre ul {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 2px; background: var(--spili-trait); border: 2px solid var(--spili-trait);
}
.maison-poursuivre li { background: var(--spili-fond-eleve); padding: 18px 20px; display: grid; gap: 6px; }
.maison-poursuivre-etiquette {
  font-family: var(--spili-data); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--spili-texte-faible);
}
.maison-retour { margin-top: 22px; }

/* ---------- Ruptures ---------- */

@media (max-width: 960px) {
  .maison-corps { grid-template-columns: 1fr; gap: 40px; }
  .maison-aside { position: static; }
}
@media (max-width: 560px) {
  .maison-legende, .maison-sources-disent { padding: 24px 20px; }
  .maison-sources-disent { margin-left: 0; margin-top: 0; }
  .maison-recit p { font-size: 16.5px; }
}