/**
 * Bloc prestations_carte — « La carte des boissons » : les prestations comme une carte de café
 *
 * Contenu : 1. En-tête  2. Liste  3. Prestation (nom café · filet pointillé · intitulé en clair),
 *           renvoi vers les références  4. Responsive
 *
 * R21 (demande client) : chaque prestation a un nom café (le ton) et un intitulé en clair, placé
 * comme le prix sur une carte : c'est lui que lisent les moteurs et les IA (JSON-LD makesOffer).
 * Nombre de prestations libre : grille auto-fill, une ou deux colonnes.
 */

/* 1. En-tête --------------------------------------------------------------- */
.prestations-carte__intro { display: grid; gap: var(--space-xs); max-width: 44rem; margin-bottom: var(--space-xl); }
.prestations-carte__intro .body-lg { color: var(--color-text-muted); margin-top: var(--space-xs); }

/* 2. Liste ----------------------------------------------------------------- */
.prestations-carte__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-lg) var(--space-2xl);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
}

/* 3. Prestation ------------------------------------------------------------ */
.prestations-carte__item { display: grid; gap: var(--space-2xs); }
/* Nom café ......... intitulé en clair : la ligne d'une carte de café */
.prestations-carte__head {
    display: flex; align-items: baseline; gap: var(--space-xs);
    margin: 0; font-weight: inherit;
}
.prestations-carte__name {
    font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600;
    line-height: 1.15; letter-spacing: -0.01em;
}
.prestations-carte__rule {
    flex: 1; min-width: var(--space-md); height: calc(var(--rule-dot) * 2);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--color-text) 45%, transparent) var(--rule-dot), transparent calc(var(--rule-dot) + 0.5px));
    background-size: var(--rule-gap) calc(var(--rule-dot) * 2); background-repeat: repeat-x;
}
.prestations-carte__label {
    font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.04em;
    color: var(--color-primary); text-align: right;
}
.prestations-carte__desc { color: var(--color-text-muted); max-width: 46ch; }

/* R22 : renvoi vers les références (site de l'Agence K2) */
.prestations-carte__refs { margin-top: var(--space-xl); }

/* 4. Responsive ------------------------------------------------------------ */
/* Étroit : l'intitulé passe sous le nom (sinon le filet disparaît et les deux se tassent) */
@media (max-width: 480px) {
    .prestations-carte__head { flex-direction: column; gap: var(--space-2xs); }
    .prestations-carte__rule { display: none; }
    .prestations-carte__label { text-align: left; }
}
