/* ============================================================
   SpiLi — Fiches de l'Atlas, sur l'écran 03
   Identité « Le Filet » · lot 4
   ------------------------------------------------------------
   Régime clair : une fiche se lit longuement, et le noir sert
   à voir, pas à lire. Aucune couleur n'est déclarée ici, tout
   vient de css/tokens.css.

   La fiche est l'unité canonique de l'Atlas : c'est elle qui
   doit tenir devant un chercheur, une institution et un
   mécène. Sa structure suit cet ordre — d'où l'on vient, ce
   que c'est, ce qu'on en sait, d'où ça vient.
   ============================================================ */

/* ---------- Fil d'Ariane ---------- */

.fil-ariane {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-family: var(--spili-data);
  font-size: 12px; line-height: 1.6;
  color: var(--spili-texte-faible);
  margin-bottom: 26px;
}
.fil-ariane a { color: var(--spili-accent); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }
.fil-ariane [aria-current="page"] { color: var(--spili-texte); }

/* ---------- Tête de fiche ---------- */

.fiche-tete { padding: 52px 0 0; }

.fiche-rang {
  font-family: var(--spili-data);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin-bottom: 16px;
}

.fiche-tete h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.75rem);
  font-weight: 300; line-height: 1.02; letter-spacing: -0.04em;
  margin-bottom: 20px;
}
/* La qualification suit le nom sans le concurrencer : « — AOC », « — Eaux-de-vie ». */
.fiche-qualification { color: var(--spili-texte-faible); }

/* Le filet de notation, pleine largeur sous le titre. Sa trame vient de
   tokens.css : pleine pour une aire délimitée, tiretée pour un repère
   territorial, pointillée pour une entrée non localisée. */
.fiche-tete .spili-preuve { margin: 0; width: 100%; }

/* ---------- Bandeau de données ---------- */

.fiche-bandeau {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 22px 0 0;
  font-family: var(--spili-data);
  font-size: 12px; line-height: 1.6;
}
.fiche-bandeau dt { color: var(--spili-texte-faible); }
.fiche-bandeau dd { margin: 0; color: var(--spili-texte-doux); }
.fiche-note { display: block; color: var(--spili-texte-faible); }

/* ---------- Corps sur deux colonnes ---------- */

.fiche-corps { padding: 48px 0 0; }
.fiche-corps .container {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px; align-items: start;
}

.fiche-texte { max-width: 65ch; }
.fiche-chapo {
  font-size: 17px; line-height: 1.65;
  color: var(--spili-texte-doux);
}
.fiche-texte h2 {
  font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em;
  margin: 40px 0 12px;
}
.fiche-texte p { color: var(--spili-texte-doux); }

/* ---------- Colonne de données ---------- */

.fiche-colonne {
  font-family: var(--spili-data);
  font-size: 12px; line-height: 1.7;
  border-top: 1px solid var(--spili-texte);
  padding-top: 18px;
}
.fiche-bloc + .fiche-bloc {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--spili-trait);
}
.fiche-colonne h2 {
  font-family: var(--spili-data);
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 0 0 7px;
}
.fiche-colonne p { margin: 0; color: var(--spili-texte-doux); }
.fiche-bloc-note { margin-top: 6px !important; color: var(--spili-texte-faible) !important; }

/* La navigation croisée : des jetons filaires, sans angle arrondi. */
.fiche-jetons { display: flex; flex-wrap: wrap; gap: 6px; }
.fiche-jetons a {
  border: 1px solid var(--spili-trait);
  background: var(--spili-fond-eleve);
  padding: 4px 11px;
  font-size: 12px; text-decoration: none;
  color: var(--spili-texte-doux);
  transition: border-color var(--spili-transition), color var(--spili-transition);
}
.fiche-jetons a:hover { border-color: var(--spili-accent); color: var(--spili-accent); }

/* ---------- Blocs de médiation ---------- */

.fiche-repere {
  margin: 34px 0;
  padding: 18px 0 0;
  background: transparent;
  border-top: var(--spili-notation) solid var(--spili-texte);
  max-width: 65ch;
}
.fiche-repere strong {
  display: block;
  font-family: var(--spili-data);
  font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin-bottom: 8px;
}
.fiche-repere p { margin: 0; color: var(--spili-texte-doux); line-height: 1.65; }

/* ---------- Listes de terroirs ---------- */

.fiche-liens {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px; background: var(--spili-trait);
}
.fiche-liens li {
  background: var(--spili-fond-eleve);
  padding: 14px 16px;
}
.fiche-liens a { color: var(--spili-texte); text-decoration: none; font-size: 15px; }
.fiche-liens a:hover { color: var(--spili-accent); text-decoration: underline; }
.fiche-type {
  display: block; margin-top: 5px;
  font-family: var(--spili-data);
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--spili-texte-faible);
}

.fiche-vide { color: var(--spili-texte-faible); max-width: 65ch; line-height: 1.65; }
.fiche-vide a { color: var(--spili-accent); }

/* ---------- Appareil critique ----------
   « Sources et validation » n'est pas une mention légale reléguée en bas de
   page : c'est le geste central du musée. Rien n'est affirmé sans être
   traçable, et la fiche dit aussi ce qu'elle ne sait pas encore. */

.fiche-appareil {
  margin-top: 64px;
  padding: 36px 0 72px;
  border-top: 1px solid var(--spili-trait);
  background: var(--spili-fond-carte);
}
.fiche-appareil h2 {
  font-family: var(--spili-data);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin-bottom: 22px;
}
.fiche-appareil dl {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 44px;
  font-family: var(--spili-data);
  font-size: 12px; line-height: 1.7;
  max-width: 900px;
}
.fiche-appareil dt { color: var(--spili-texte); }
.fiche-appareil dd { margin: 0; color: var(--spili-texte-doux); }

.fiche-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

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

@media (max-width: 1120px) {
  /* La colonne de données passe sous le texte, comme le prévoit le système. */
  .fiche-corps .container { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fiche-colonne { max-width: 65ch; }
}
@media (max-width: 860px) {
  .fiche-bandeau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-appareil dl { grid-template-columns: minmax(0, 1fr); }
  .fiche-liens { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .fiche-tete { padding-top: 34px; }
  .fiche-bandeau { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- Les jalons de la Frise qui citent l'entrée (lot 6) ---------- */

.fiche-jalons {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--spili-data);
  font-size: 12px;
  line-height: 1.6;
}
.fiche-jalons li {
  margin-bottom: 10px;
}
.fiche-jalons a {
  color: var(--spili-accent);
  text-decoration: none;
}
.fiche-jalons a:hover,
.fiche-jalons a:focus-visible {
  color: var(--spili-accent-fort);
  text-decoration: underline;
}
.fiche-jalon-annee {
  display: block;
  color: var(--spili-texte-faible);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ---------- Les figures documentaires (lot C-4) ---------- *
 * Une image du fonds arrive avec son appareil : légende éditoriale, puis
 * crédit — titre, auteur, date, cote, source. Le crédit est sous l'image et
 * lisible, jamais en gris clair : c'est la contrepartie du droit d'usage, et
 * ce qui sépare un fonds documentaire d'une banque d'images.               */

.figure {
  margin: 32px 0;
  max-width: 760px;
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--spili-trait);
  background: var(--spili-fond-eleve);
}
.figure figcaption {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.figure-legende {
  font-size: 15px;
  line-height: 1.7;
  color: var(--spili-texte-doux);
  max-width: 66ch;
}
.figure-credit {
  font-family: var(--spili-data);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--spili-texte-faible);
  max-width: 78ch;
}
.figure-credit em { font-style: normal; color: var(--spili-texte-doux); }
.figure-credit a { color: var(--spili-accent); overflow-wrap: anywhere; }
.figure-credit a:hover,
.figure-credit a:focus-visible { color: var(--spili-accent-fort); }

/* Dans une colonne étroite — cartel de station, aside de fiche. */
.figure--compacte { margin: 22px 0; max-width: none; }
.figure--compacte .figure-legende { font-size: 13.5px; }
.figure--compacte .figure-credit { font-size: 10.5px; }

/* ---------- Les distilleries recensées dans l'aire (lot C-5) ---------- *
 * Un décompte, pas un inventaire — la mise en forme suit : pas de grille de
 * cartes qui suggérerait un annuaire, une phrase et une liste des seules
 * fiches datées. L'attribution ODbL est dans la note, visible : c'est une
 * obligation de licence, pas une politesse.                                */

.fiche-distilleries { margin-top: 40px; }
.fiche-distilleries-compte {
  font-size: 15px;
  line-height: 1.75;
  color: var(--spili-texte-doux);
  max-width: 66ch;
}
.fiche-distilleries-compte strong {
  font-family: var(--spili-data);
  font-weight: 400;
  color: var(--spili-texte);
}
.fiche-distilleries-liste {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  max-width: 78ch;
}
.fiche-distilleries-liste li {
  padding: 10px 0 10px 14px;
  border-left: var(--spili-notation) solid var(--spili-trait);
  border-top: 1px solid var(--spili-trait-faible);
}
.fiche-distilleries-liste li:last-child { border-bottom: 1px solid var(--spili-trait-faible); }
.fiche-distillerie-nom {
  display: block;
  font-size: 15px;
  color: var(--spili-texte);
}
.fiche-distillerie-date {
  display: block;
  font-family: var(--spili-data);
  font-size: 11.5px;
  color: var(--spili-texte-faible);
  margin-top: 3px;
}

/* ---------- Le cartouche cartographique (lot V-1) ----------
   La fiche renvoyait vers « la carte de l'Atlas » sans en montrer aucune,
   alors qu'elle porte la position — et, pour cinquante-quatre entrées, le
   contour INAO réel. La scène est celle des stations de visite, à l'identique
   (`css/scene.css`) ; seule la taille change.

   Elle est posée en tête du corps, avant le chapô : une aire se comprend en
   la regardant, et « l'union de six départements » et « le contour du cahier
   des charges » sont deux phrases voisines pour deux images sans rapport. */

.cartouche { margin: 0 0 30px; }

/* La scène déborde de la colonne de lecture — 65 ch —, parce qu'une carte de
   380 px ne montre rien d'une aire de six cents kilomètres. Elle reste dans
   le gabarit : ce n'est pas la scène de l'Atlas, c'est une figure. */
.cartouche-scene {
  width: 100%;
  max-width: 620px;
}

.cartouche-cartel {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin-top: 8px;
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.04em; line-height: 1.5;
}
.cartouche-nature { color: var(--spili-texte-doux); }
.cartouche-source { color: var(--spili-texte-faible); }

@media (max-width: 560px) {
  .cartouche { margin-bottom: 22px; }
}


/* ---------- Les documents dans le corps (lot V-3) ----------
   Ils étaient posés après le bloc « sources et validation », donc en tout
   dernier : un document d'archive y avait le statut d'une annexe. Remontés
   dans le corps, ils illustrent le sujet — et ils débordent la colonne de
   lecture, parce qu'une gravure de 65 caractères de large ne se regarde pas. */

.fiche-documents {
  margin: 26px 0 30px;
  display: flex; flex-direction: column; gap: 26px;
}
.fiche-documents .figure { margin: 0; max-width: 620px; }

/* ---------- Le renvoi vers la robe (lot V-4) ----------
   La fiche ne recopie pas le régime de coloration : elle dit qu'il existe et
   renvoie à la page qui l'établit, parce que c'est là que vivent le geste et
   le texte réglementaire. L'aplat est le seul endroit d'une fiche où une
   couleur est un contenu — il est donc `aria-hidden`, et tout ce qu'il montre
   est écrit à côté. */

.fiche-robe p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.fiche-robe-aplat {
  width: 26px; height: 12px;
  background: var(--robe);
  border: 1px solid var(--spili-trait);
  display: inline-block;
  flex: none;
  align-self: center;
}
.fiche-robe em { font-style: normal; color: var(--spili-texte); }