/* ═══════════════════════════════════════════════════════════════════════════════════════
   Cabestian — la conclusion et ses pièces.
   ───────────────────────────────────────────────────────────────────────────────────────
   La carte « traçabilité » affirme : « Une affirmation sans sa pièce n'est pas une
   conclusion, c'est un avis. Le rapport distingue les deux. » Elle l'affirmait au-dessus
   d'un schéma en filets, c'est-à-dire qu'elle demandait qu'on la croie sur parole — ce
   qui est précisément ce que la phrase reproche aux autres.

   Ici, la conclusion est écrite en clair et chaque affirmation porte son marqueur. On
   ouvre le marqueur, la pièce est là : sa référence, sa date, l'extrait qui fonde le
   point. La démonstration remplace l'affirmation.

   Porté de `ai-citation` (SmoothUI, MIT). Trois écarts :
     · la source n'est pas un site web mais une PIÈCE de dossier — donc ni favicon ni nom
       d'hôte, mais une référence, une date de réception et un extrait cité ;
     · pas de dépendance : ouverture en CSS au survol et au focus, le script ne sert qu'à
       la touche d'échappement et au délai de grâce ;
     · la fiche grandit depuis le marqueur (origine en bas), comme l'original : la
       croissance désigne ce qu'on vient d'ouvrir, l'œil ne perd pas le fil.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.cit-bloc{
  --cit-rule:var(--rule,rgba(11,27,39,.15));
  --cit-ink:var(--light-ink,#0B1B27);
  --cit-soft:var(--light-soft,#3D5168);
  --cit-accent:var(--ruby,#63001F);
  --cit-page:#fff;
  max-width:62ch;
}

/* la conclusion : une vraie phrase de rapport, pas un libellé */
.cit-lead{
  font-size:var(--t-large,17px);line-height:1.62;color:var(--cit-ink);
  letter-spacing:-.008em;margin:0;
}

/* ── le marqueur ─────────────────────────────────────────────────────────────────────── */
.cit{position:relative;display:inline}
.cit-n{
  font-family:var(--fm,ui-monospace,monospace);font-size:var(--t-micro);line-height:1;
  color:var(--cit-accent);background:color-mix(in srgb,var(--cit-accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--cit-accent) 26%,transparent);
  border-radius:5px;padding:2px 5px;margin-left:3px;cursor:pointer;
  vertical-align:.32em;   /* posé comme un appel de note, sans exposant typographique */
  transition:background .18s ease,border-color .18s ease;
}
.cit-n:hover,.cit-n:focus-visible{
  background:color-mix(in srgb,var(--cit-accent) 16%,transparent);
  border-color:color-mix(in srgb,var(--cit-accent) 48%,transparent);
}
.cit-n:focus-visible{outline:2px solid var(--cit-accent);outline-offset:2px}
/* Appel de note de 19 × 18 px : la zone active passe à 44 × 44 autour du dessin, qui ne
   bouge pas (M17, audit du 23/09). */
.cit-n{position:relative}
.cit-n::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}

/* ── la fiche de la pièce ────────────────────────────────────────────────────────────── */
.cit-fiche{
  position:absolute;z-index:40;left:50%;bottom:calc(100% + 10px);
  width:min(300px,72vw);
  /* L'origine est en BAS et au centre : la fiche pousse depuis son marqueur au lieu
     d'apparaître au milieu de nulle part. C'est tout l'intérêt du geste. */
  transform:translateX(-50%) scale(.94);transform-origin:bottom center;
  opacity:0;visibility:hidden;pointer-events:none;
  display:grid;gap:7px;padding:13px 15px 14px;text-align:left;
  background:var(--cit-page);border:1px solid var(--cit-rule);border-radius:11px;
  box-shadow:0 1px 2px rgba(11,27,39,.05),0 16px 34px -18px rgba(11,27,39,.42);
  transition:opacity .19s ease,transform .19s cubic-bezier(.16,1,.3,1),visibility 0s .19s;
}
.cit.est-ouvert .cit-fiche{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) scale(1);
  transition:opacity .19s ease,transform .19s cubic-bezier(.16,1,.3,1),visibility 0s;
}
/* la pointe, qui rattache la fiche à son marqueur */
.cit-fiche::after{
  content:'';position:absolute;top:100%;left:50%;width:9px;height:9px;
  transform:translate(-50%,-5px) rotate(45deg);
  background:var(--cit-page);border-right:1px solid var(--cit-rule);
  border-bottom:1px solid var(--cit-rule);
}
.cit-ref{font-size:var(--t-petit);font-weight:600;line-height:1.35;color:var(--cit-ink);letter-spacing:-.01em}
.cit-meta{
  font-family:var(--fm,ui-monospace,monospace);font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--cit-soft);
}
.cit-ext{
  font-size:var(--t-petit);line-height:1.5;color:var(--cit-soft);
  padding-left:10px;border-left:2px solid color-mix(in srgb,var(--cit-accent) 45%,transparent);
}

/* ── le pied : ce que la conclusion doit à ses pièces ────────────────────────────────── */
/* `.cit-bloc .cit-pied` et non `.cit-pied` : dans une carte, `.card p` (cards.css, une
   classe ET un élément) l'emportait et passait le pied, dessiné en micro, en 16 px mono
   sur deux lignes. Même défaut que la source de la vignette interrogeable. (La conclusion
   .cit-lead le subit aussi, 16 px au lieu de --t-large : laissé tel quel, c'est le rendu
   que l'on voit aujourd'hui, à trancher à l'écran.) */
.cit-bloc .cit-pied{max-width:none;line-height:1.5;
  margin-top:16px;padding-top:12px;border-top:1px solid var(--cit-rule);
  font-family:var(--fm,ui-monospace,monospace);font-size:var(--t-micro);letter-spacing:.04em;
  color:var(--cit-soft);
}
.cit-pied b{color:var(--cit-accent);font-weight:400}

/* Les marqueurs entrent après la phrase : la conclusion se lit d'abord, ses appuis
   arrivent ensuite. L'ordre du regard est celui de la démonstration. */
.cit-arme .cit-n{opacity:0;transform:translateY(-3px)}
.cit-n{transition:background .18s ease,border-color .18s ease,opacity .34s ease,transform .34s cubic-bezier(.16,1,.3,1)}
.cit-arme.cit-entre .cit-n{opacity:1;transform:none}

@media (max-width:620px){
  /* Sur un écran de 390 px, une fiche de 280 px centrée sur son marqueur sort du cadre dès
     que le marqueur n'est pas au milieu de la ligne. Mesuré : le document partait à 412 px
     de large, donc une page qui glisse latéralement — et le défaut était INVISIBLE, la
     fiche étant `visibility:hidden`, qui masque sans retirer la boîte.
     Elle se cale donc sur le bloc et non plus sur le marqueur, en pleine largeur, et perd
     sa pointe : il n'y a plus un point précis à désigner. */
  .cit-bloc{position:relative}
  .cit{position:static}
  .cit-fiche{
    left:0;right:0;width:auto;
    top:calc(100% + 12px);bottom:auto;
    transform:translateX(0) scale(.97);transform-origin:top center;
  }
  .cit.est-ouvert .cit-fiche{transform:translateX(0) scale(1)}
  .cit-fiche::after{display:none}
  .cit-lead{font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  .cit-fiche,.cit-n{transition:opacity .01s,visibility 0s}
}