/* @grammaire v2
   « Citer ceci » — la référence et son bouton de copie.

   La feuille accompagne `components/_cite_card.html.twig`. Elle est chargée
   par les gabarits qui posent la brique, et non par une zone : les deux
   appelants connus (la fiche ressource et la fiche de communication du
   minisite) vivent dans deux zones différentes, et faire porter le style par
   l'une des deux laisserait l'autre sans habillage. */

.cite-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.cite-card__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.cite-card__rule {
    flex: none;
    width: 1.25rem;
    height: 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-section-ancesu);
}

/* Une référence bibliographique se lit caractère par caractère quand on la
   recopie : la police à chasse fixe y aide, et c'est celle que la charte
   réserve aux données. `word-break` parce qu'une référence porte souvent une
   URL ou un DOI, qui déborderait sinon d'une colonne d'appui étroite. */
.cite-card__text {
    margin: 0;
    padding: var(--spacing-md);
    background: var(--surface-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-data);
    font-size: var(--font-size-xs);
    line-height: 1.65;
    color: var(--color-text);
    word-break: break-word;
}

.cite-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.cite-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-height: var(--touch-target-min, 2.75rem);
    padding-inline: var(--spacing-md);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.cite-card__btn:hover,
.cite-card__btn:focus-visible {
    border-color: var(--color-primary);
}

/* Aucune regle d'etat « copie » : le gestionnaire vanilla ecrit la
   confirmation DANS le bouton, puis la retablit au bout de deux secondes. La
   version Alpine, elle, devait rendre les DEUX libelles dans le DOM et les
   basculer ici, parce que le build CSP n'evalue aucune expression. C'est
   quinze lignes de CSS et un libelle en double qui disparaissent. */

.cite-card__btn > span {
    /* Le libelle seul, a cote du pictogramme. C'est ce noeud que le
       gestionnaire remplace. */
    white-space: nowrap;
}

/* A l'impression, la carte disparait : un bouton « Copier » sur du papier ne
   fait rien, et la reference elle-meme est deja portee par le cartouche
   imprimable de la page (`library-print-cite` sur la fiche ressource,
   `_print_page` sur le minisite). Elle serait donc imprimee deux fois. */
@media print {
    .cite-card {
        display: none;
    }
}