/* @grammaire v2
   ── L'ANNUAIRE DES RESU — ce qui lui appartient en propre ──

   Les tuiles de region, et rien d'autre : le squelette — panneau, colonnes,
   carte, infobulle, en-tete — a demenage dans `@ancesu/grammar` sous
   `directory__*`, puisque les deux annuaires s'en servent.

   Cent quatre-vingt-huit lignes sont parties avec l'ancienne grille de tuiles,
   morte depuis que l'unite de la page est la REGION : quatorze classes
   `resu-archive__tile*` sans un seul emploi, ni dans un gabarit ni dans le
   script.
*/

/**
 * /annuaire/resu — Mosaïque régionale + carte des régions.
 *
 * cesu.css est chargé en amont et porte tout le socle commun (panel,
 * filtres, toolbar, carte container, tooltip, sections "cesu-extras"
 * formations + actualités). Ce fichier ne porte QUE :
 *  - les couleurs/états de carte spécifiques layer=region
 *  - la grille de tuiles RESU + le style des cards "tuiles"
 *  - les overrides locaux (la colonne droite RESU n'a plus de scroll
 *    interne — la mosaïque scrolle naturellement avec la page).
 */

/* ── Carte régions ───────────────────────────────────────────────── */

/* `.cesu-map--selected` etait redeclare ici avec une couleur DIFFERENTE de
   celle de la carte CESU, pour les memes selecteurs et le meme moteur. Les deux
   viennent desormais de `@ancesu/grammar/geo-map.css`, sous `.geo-ramp`. */

/* ── Colonne mosaïque : override du scroll interne CESU ──────────── */

@media (width < 48em) {
}

/* ── LES TUILES DE REGION ──

   L'unite de la page est la REGION, non le reseau : la base porte 105 CESU et
   UN seul RESU, et une page qui liste les reseaux affiche une tuile. Dix-huit
   regions disent bien plus — lesquelles ont un reseau, lesquelles n'en ont pas
   encore, et combien de centres chacune abrite.

   UNE REGION SANS RESEAU N'EST PAS UNE CASE VIDE QU'ON MASQUE : c'est
   l'information principale de cette page, et le pendant exact des
   « departements en blanc » de la carte des CESU. Elle est donc rendue, et
   seulement attenuee. */
.resu-cards {
    gap: var(--spacing-sm);
}

.resu-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-section-cesu) 7%, var(--surface-2));
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Le meme dessin pour la tuile survolee et la tuile retenue, comme sur les
   fiches de l'annuaire des CESU : les deux disent « c'est de cette region qu'on
   parle », l'une le temps d'un geste, l'autre jusqu'au suivant. */
.resu-card--hovered,
.resu-card--picked {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-section-cesu) 60%, transparent);
    background: var(--surface-2);
}

/* L'attenuation dit « rien ici », sans effacer : le fond perd sa teinte de
   rubrique, qui est reservee aux regions couvertes. */
.resu-card--vacant {
    background: var(--color-bg-light);
}

.resu-card__region {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

.resu-card__network {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
}

.resu-card__network--none {
    font-weight: 400;
    font-style: italic;
    color: var(--color-text-light);
}

.resu-card__count {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.resu-card__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-ms);
    margin-top: var(--spacing-xs);
}

.resu-card__go,
.resu-card__centres {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-section-cesu);
    text-decoration: none;
}

.resu-card__go:hover,
.resu-card__centres:hover {
    text-decoration: underline;
}

.resu-card__centres {
    color: var(--color-text-light);
}