/* ══════════════════════════════════════════════════════════════
   Page /flux — annuaire des flux de syndication

   Même squelette qu'une page institutionnelle : en-tête éditorial
   (`components/_content_header.html.twig`, porté par zones/content.css)
   puis UNE colonne de lecture bornée. Pas de sommaire : la page tient
   en trois sections, un rail collant à côté de 62 rem de texte serait
   du décor.

   La colonne se borne à 62 rem et se centre (cf. design-system.md
   « Une colonne unique se BORNE ») : à pleine largeur, les paragraphes
   d'explication faisaient plus de 90 signes par ligne.

   Les adresses de flux de chaque carte sont la brique partagée
   `components/rss-button.css`, en variante `inline` (les 3 formats à
   plat + copie du lien). Aucun libellé de format n'est rendu en dur
   ici : les trois URLs vivent dans la brique, une seule source.
   ══════════════════════════════════════════════════════════════ */

/* `padding-block` seul, JAMAIS le raccourci `padding` : l'élément porte aussi
   la classe `container`, dont la gouttière latérale (0,75 rem sous 48em) est
   posée en `padding-inline`. Un raccourci la remet à zéro, à specificité
   égale mais plus loin dans la cascade, et toute la page se colle aux bords
   sur téléphone, sans que rien ne le signale ailleurs. */
.syndication-page {
    padding-block: var(--spacing-xl) var(--spacing-3xl);
}

.syndication-page__column {
    max-width: 62rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

/* ── Sections ── */
.syndication-section__title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-navy);
}

@media (min-width: 48em) {
    .syndication-section__title {
        font-size: var(--font-size-2xl);
    }
}

.syndication-section__intro {
    margin: 0 0 var(--spacing-lg);
    max-width: 46rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* ── « Comment s'abonner » : trois étapes numérotées ──
   Grille de 3 au-dessus de 48em, empilée en dessous. Le numéro est un
   pseudo-élément : il compte l'ordre visuel, il n'ajoute pas de texte
   à lire pour qui écoute la page (l'élément de liste ordonnée le porte
   déjà). */
.syndication-steps {
    list-style: none;
    counter-reset: syndication-step;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-md);
}

@media (min-width: 48em) {
    .syndication-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.syndication-steps__item {
    counter-increment: syndication-step;
    position: relative;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 3.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.syndication-steps__item::before {
    content: counter(syndication-step);
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 100px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary-dark, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary) 12%, #fff);
}

.syndication-steps__title {
    margin: 0 0 var(--spacing-2xs);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-navy);
}

.syndication-steps__text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

/* ── Cartes de flux ──
   Deux destinations par carte (la rubrique par son titre, le flux par ses
   trois adresses) : la carte ne peut donc pas devenir un `<a>` unique,
   contrairement à `_list_card`. */
.syndication-feeds {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-md);
}

@media (min-width: 56em) {
    .syndication-feeds {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.feed-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.feed-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.feed-card__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-navy);
}

/* Le titre est le lien vers la rubrique : c'est la destination éditoriale
   de la carte, et elle n'a pas besoin d'un second lien en pied. */
.feed-card__title-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: inherit;
    text-decoration: none;
}

.feed-card__title-link svg {
    color: var(--color-primary);
    transition: transform 0.18s ease;
}

.feed-card__title-link:hover,
.feed-card__title-link:focus-visible {
    color: var(--color-primary-dark, var(--color-primary));
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.feed-card__title-link:hover svg {
    transform: translateX(3px);
}

.feed-card__description {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
    text-wrap: pretty;
}

.feed-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.feed-card__meta svg {
    flex-shrink: 0;
}

/* Un flux sans publication reste proposé à l'abonnement : le lecteur
   recevra la première parution. On le dit, plutôt que de masquer la
   rubrique (elle existe) ou de laisser croire à une panne. */
.feed-card__meta--empty {
    color: var(--color-text-light);
    font-style: italic;
}

/* Les trois formats (brique `_rss_button`, variante `inline`) tombent en bas
   de carte : les descriptions n'ont pas la même hauteur d'une carte à
   l'autre, et sans cela les adresses de flux flottaient à des hauteurs
   différentes sur une même rangée. Aucun filet au-dessus : les puces portent
   déjà leur propre contour. */
.feed-card__formats {
    margin-top: auto;
    padding-top: var(--spacing-2xs);
}

/* ── « Quel format choisir » ── */
.syndication-formats {
    display: grid;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
}

@media (min-width: 48em) {
    .syndication-formats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.syndication-formats__term {
    margin: 0 0 var(--spacing-2xs);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-navy);
}

.syndication-formats__def {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

/* ── Note de bas de page ── */
.syndication-note {
    margin: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    background: var(--color-bg-light, var(--color-bg-light));
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

@media print {
    .feed-card,
    .syndication-steps__item {
        box-shadow: none;
    }
}