/* ============================================================
   SpiLi — Les robes
   Identité « Le Filet » · lot V-4
   ------------------------------------------------------------
   La seule page du site où une couleur est un CONTENU et non un
   code. La charte interdit à la couleur de porter une
   information — le degré de preuve est une trame, l'accent ne
   dit qu'un état — et cette page ne la contredit pas : la teinte
   d'un aplat n'y code aucune catégorie, aucun terroir, aucune
   maison. Elle est le sujet documenté, comme une gravure est le
   sujet d'une figure.

   Tout le reste de la page suit la règle générale : le degré est
   une trame, jamais une couleur.
   ============================================================ */

.robes-reserve {
  border-left: var(--spili-notation) solid var(--spili-texte);
  padding-left: 18px;
  max-width: 76ch;
  font-size: 0.96rem; line-height: 1.62;
  color: var(--spili-texte-doux);
  margin-bottom: 40px;
}

.robes-planche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1px;
  background: var(--spili-trait);
  border: 1px solid var(--spili-trait);
}

.robe {
  background: var(--spili-fond-eleve);
  display: flex; flex-direction: column;
}

/* L'aplat. Il occupe une bande et non une pastille : une pastille se lit comme
   un jeton d'interface — donc comme un code —, une bande se lit comme une
   matière. La différence n'est pas cosmétique, c'est celle que la charte
   protège. */
.robe-aplat {
  background: var(--robe);
  height: 86px;
  border-bottom: 1px solid var(--spili-trait);
}

.robe-corps {
  padding: 22px 24px 26px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}

.robe-geste {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--spili-texte-faible);
}
.robe h2 {
  font-size: 1.28rem; font-weight: 500; letter-spacing: -0.018em;
  line-height: 1.2; margin: 0;
}
.robe-explication {
  font-size: 0.93rem; line-height: 1.6;
  color: var(--spili-texte-doux);
}

.robe-entrees {
  font-size: 0.86rem; line-height: 1.6;
  color: var(--spili-texte-faible);
}
.robe-entrees a { color: var(--spili-accent); }

/* La source, et le degré qui la qualifie. Le filet dit le degré par sa trame —
   plein pour l'attesté, pointillé pour le rapporté — parce que la couleur est
   déjà prise par le sujet de la page, et qu'elle ne peut pas coder deux choses
   à la fois. */
.robe-source {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--spili-trait-faible);
  display: flex; flex-direction: column; gap: 5px;
}
.robe-degre {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--spili-texte);
  padding-left: 12px;
  border-left: var(--spili-notation) solid var(--spili-texte);
}
.robe--rapporte .robe-degre {
  color: var(--spili-texte-doux);
  border-left-style: dotted;
}
.robe-texte { font-size: 0.84rem; line-height: 1.5; color: var(--spili-texte-doux); }
.robe-texte a { color: var(--spili-accent); }
.robe-renvoi {
  font-family: var(--spili-data); font-size: 10.5px; line-height: 1.6;
  color: var(--spili-texte-faible);
}

.robes-etat {
  margin-top: 34px;
  font-family: var(--spili-data); font-size: 11.5px;
  letter-spacing: 0.03em; color: var(--spili-texte-faible);
}
.robes-etat strong { color: var(--spili-texte); }

@media (max-width: 560px) {
  .robes-planche { grid-template-columns: 1fr; }
  .robe-aplat { height: 64px; }
  .robe-corps { padding: 18px 18px 22px; }
}