/* ==========================================================================
   Prototype V2 · groupe « ville-actus-assos » — V7a liste d'actualités, V7b article, V8a Associations,
   V8b annuaire, V8c fiche association. Blocs locaux seulement (les blocs communs : blocs.css).
   Cotes : cadres Figma 228:31903 (07-pages-v2-ville-actus-assos-notes.md), grille 4 / 24 / 16 → 12 / 64 / 24.
   ========================================================================== */

/* ---------- Commun ---------- */
.va-section-tete { margin-bottom: var(--espace-24); }
@media (min-width: 1024px) { .va-section-tete { margin-bottom: var(--espace-40); } }
.va-puces { list-style: disc; padding-left: 1.25em; }
.va-puces li + li { margin-top: var(--espace-8); }
.va-puces li::marker { color: var(--couleur-texte-secondaire); }
.va-liens { display: flex; flex-wrap: wrap; gap: 0 var(--espace-24); margin-top: var(--espace-16); }
.va-tel, .va-courriel { color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; white-space: nowrap; }
.va-courriel { white-space: normal; overflow-wrap: anywhere; }
/* Ligne de liste avec icône de service (R1) : icône 24 · libellé · flèche */
.va-ligne-icone .ligne__lien { min-height: 56px; }
.va-ligne-icone .ligne__lien > .ico:first-child { color: var(--couleur-texte); }
.va-ligne-icone__texte { font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); }
.va-ligne-icone .ligne__lien:hover .va-ligne-icone__texte { color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.18em; }
/* Recherche dans l'annuaire : loupe à gauche, envoi par la flèche (champ souligné du socle) */
.va-recherche .recherche__ligne { gap: var(--espace-16); }
.va-recherche__loupe { color: var(--couleur-texte); }
.va-recherche .recherche__bouton { color: var(--couleur-action); }
.va-recherche { max-width: 644px; }

/* ---------- Lettre d'information (§1.10, R15) ---------- */
.va-lettre-section { padding-top: 0; }
.va-lettre { gap: var(--espace-16); }
.va-lettre .lettre__tete { align-items: flex-start; flex-wrap: wrap; }
.va-lettre__titres { display: flex; flex-direction: column; gap: var(--espace-8); padding-top: var(--espace-8); flex: 1 1 180px; min-width: 0; }
/* la lettre est un bloc second : titre 28/32 aux deux largeurs (cadres 228:31960 / 228:32254) */
.va-lettre__titres .t-titre-section { font-size: calc(28px * var(--facteur-titre)); line-height: calc(32px * var(--facteur-titre)); }
.va-lettre__liste { border-top: var(--trait-filet) solid var(--couleur-filet); gap: 0; }
.va-lettre__liste li { align-items: center; min-height: 48px; border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.va-lettre .lettre__form { flex-direction: column; align-items: flex-start; }
.va-lettre .lettre__form .champ { flex: none; width: 100%; max-width: 421px; }
.va-lettre .lettre__confirmation { max-width: 421px; }

/* ==========================================================================
   V7a · Liste d'actualités (228:31960 / 228:32254)
   ========================================================================== */
.va-titre-liste { padding-bottom: var(--espace-24); }
.actus { padding-bottom: var(--rythme-section); }
.actus__outils { display: flex; flex-direction: column; gap: var(--espace-16); }
.actus__compte-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--espace-16); }
.actus__compte { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
@media (min-width: 1024px) {
  .va-titre-liste { padding-bottom: var(--espace-40); }
  .actus__outils { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); align-items: center; }
  .actus__outils .pastilles { grid-column: 1 / 10; }
  .actus__compte-ligne { grid-column: 10 / 13; justify-content: flex-end; }
}

.actus__liste { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--espace-24); }
.va-a-lire__liste { margin-top: 0; border-top: var(--trait-filet) solid var(--couleur-filet); }
.actus__item { min-width: 0; }
.actus__liste[data-change] { animation: va-fondu calc(var(--souffle-duree) * 1ms) var(--souffle-courbe); }
@keyframes va-fondu { from { opacity: 0.2; } to { opacity: 1; } }

/* Titres de groupe « Ce mois-ci » / « Avant » (390) : libellé Medium + filet fort, pour hiérarchiser (revue 8,0 → défaut ouvert) */
.actus__groupe { padding-top: var(--espace-40); padding-bottom: var(--espace-8); border-bottom: 2px solid var(--couleur-texte); font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); font-weight: 500; }
.actus__groupe--sr, .actus__item--une .actus__groupe { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Carte : ligne à vignette (390) */
.actu { display: grid; grid-template-columns: clamp(72px, 27vw, 104px) minmax(0, 1fr); column-gap: var(--espace-16); align-items: start; padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.actu__visuel { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--couleur-filet); }
.actu__visuel picture { display: contents; }
.actu__visuel img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform calc(var(--souffle-duree) * 1ms) var(--souffle-courbe); }
.actu:hover .actu__visuel img { transform: scale(1.03); }
.actu .photo__credit { display: none; }
.actu .carte__textes { gap: var(--espace-4); }
.actu .carte__titre { overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.actu__chapo, .actu__suite, .actu__une-mot { display: none; }
.actus__credit { margin-top: var(--espace-16); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }

/* Mise en avant (390) : image 342 × 228, titre 28/32, chapô 3 lignes, « Lire l'article » */
.actus__item--une .actu { display: flex; flex-direction: column; gap: var(--espace-16); padding-block: 0 var(--espace-8); border-bottom: 0; }
.actus__item--une .actu__visuel { aspect-ratio: 3 / 2; }
.actus__item--une .actu .photo__credit { display: block; }
.actus__item--une .actu .carte__titre { display: block; font-weight: 400; font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); letter-spacing: -0.02em; overflow: visible; }
.actus__item--une .actu__chapo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--espace-8); }
.actus__item--une .actu__suite { display: inline-flex; }
.actus__item--une .actu__une-mot { display: inline; }

@media (min-width: 1024px) {
  .actus__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); row-gap: var(--espace-40); margin-top: var(--espace-40); }
  .va-a-lire__liste { border-top: 0; }
  .actus__groupe { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  /* Standard 310 : image 3:2, Méta, titre 22/28 (4 lignes au plus) */
  .actu { display: flex; flex-direction: column; gap: var(--espace-16); padding: 0; border: 0; }
  .actu__visuel { aspect-ratio: 3 / 2; }
  .actu .photo__credit { display: block; }
  .actus__credit { display: none; }
  /* Mise en avant horizontale : image c1–6 (644 × 429) · texte c7–12, titre 48/52 */
  .actus__item--une { grid-column: 1 / -1; }
  .actus__item--une .actu { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--grille-gouttiere); row-gap: var(--espace-16); align-items: start; padding: 0; }
  .actus__item--une .actu__visuel { grid-column: 1 / 7; grid-row: 1 / 4; }
  .actus__item--une .carte__textes { grid-column: 7 / 13; grid-row: 1; }
  .actus__item--une .actu__suite { grid-column: 7 / 13; grid-row: 2; }
  .actus__item--une .actu__chapo { -webkit-line-clamp: 4; }
}

/* État « catégorie vide » et « Afficher plus » */
.actus__vide { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-16); margin-top: var(--espace-24); padding-block: var(--espace-24); border-block: var(--trait-filet) solid var(--couleur-filet); max-width: 644px; }
.actus__plus { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-16); margin-top: var(--espace-40); }
.actus__plus:empty { display: none; }
@media (min-width: 1024px) { .actus__plus { align-items: center; } }

/* ==========================================================================
   V7b · Article (228:32516 / 228:32755) — une colonne c3–8, sans colonne de droite (R26)
   ========================================================================== */
.va-article__grille > * { min-width: 0; }
.va-article__tete { display: flex; flex-direction: column; gap: var(--espace-8); padding-top: var(--espace-40); position: relative; }
.va-article__chapo { margin-top: var(--espace-16); }
.va-article__meta { margin-top: var(--espace-24); }
.va-article__actions { display: flex; flex-direction: column; gap: var(--espace-8); margin-top: var(--espace-16); }
.va-article__actions .bouton { width: 100%; }
.va-article__media { margin-top: var(--espace-24); }
.va-article__media--couverture { margin-top: 0; }
.va-article__photo { margin-inline: calc(max(var(--grille-marge), env(safe-area-inset-left, 0px)) * -1); max-width: none; }
.va-article__bloc { margin-top: var(--espace-40); }
.va-article__corps { margin-top: var(--espace-40); max-width: none; }
.va-article__corps > h2 { margin-top: var(--espace-40); }
.va-article__corps > h3 { margin-top: var(--espace-24); }
.va-article__corps > h2 + *, .va-article__corps > h3 + * { margin-top: var(--espace-16); }
.va-article__corps > .donnee-a-venir { margin-top: 0; }
.va-article__partage { display: flex; flex-direction: column; gap: var(--espace-16); margin-top: var(--espace-40); padding-top: var(--espace-24); border-top: var(--trait-filet) solid var(--couleur-filet); }
.va-article__partage-boutons { display: flex; flex-wrap: wrap; gap: var(--espace-16); }
.va-article + .va-a-lire { padding-top: var(--rythme-section); }
.va-a-lire + .va-lettre-section { padding-top: 0; }

/* Carrousel d'images de l'article (bloc local, Figma 232:49523) : à la main, hauteur fixe 260 / 578,
   largeur naturelle des images (3:2 pleine largeur à 390 ; l'affiche dépasse et invite à faire défiler), un crédit par image (D17) */
.va-carrousel { gap: var(--espace-8); }
.va-carrousel .carrousel-cartes__piste { padding-inline: 0; scroll-padding-inline: 0; padding-block: 0; }
.va-carrousel__item { flex: 0 0 auto; height: 260px; aspect-ratio: var(--ratio-diapo, 3 / 2); scroll-snap-align: start; }
.va-carrousel__figure { height: 100%; }
.va-carrousel__figure picture { display: contents; }
.va-carrousel__figure .photo__image { width: 100%; height: 100%; aspect-ratio: auto; }
.va-carrousel .carrousel-cartes__commandes { justify-content: flex-end; }
.va-carrousel__libelle { margin-right: auto; }
.va-carrousel .carrousel-cartes__piste:focus-visible { outline-offset: -3px; }

@media (min-width: 1024px) {
  .va-article__tete { grid-column: 3 / 11; padding-top: var(--espace-64); }
  .va-article__chapo, .va-article__actions, .va-article__bloc, .va-article__corps, .va-article__partage { grid-column: 3 / 9; }
  .va-article__actions { flex-direction: row; flex-wrap: wrap; gap: var(--espace-16); }
  .va-article__actions .bouton { width: auto; }
  .va-article__media { grid-column: 3 / 9; margin-top: var(--espace-40); }
  .va-article__media--carrousel { grid-column: 3 / 13; }
  .va-article__media--couverture { grid-column: 3 / 11; }
  .va-article__photo { margin-inline: 0; max-width: 100%; }
  /* la piste s'arrête à c12 (cadre 228:32755) : l'affiche coupée au bord de la colonne invite à faire défiler */
  .va-carrousel .carrousel-cartes__piste { margin-inline: 0; gap: var(--grille-gouttiere); }
  .va-carrousel__item { height: 578px; }
  .va-article__meta { grid-column: 3 / 11; }
}

/* ==========================================================================
   V8a · Associations (228:33014 / 228:33234)
   ========================================================================== */
.va-asso-tete { display: flex; flex-direction: column; }
.va-asso-tete__titre { padding-bottom: var(--espace-24); }
/* H1 d'un ou deux mots plus large que sa colonne (« Associations », « AS Craponne ») : taille calculée pour tenir sur une ligne
   (07-pages-ux-v2 §2, DIR §4) — --h1-em = largeur du mot en em, mesurée ; plafond = Titre d'accueil (56 / 128) */
.va-asso-tete__titre, .va-fiche__textes { container-type: inline-size; }
.va-h1-ajuste { font-size: min(var(--taille-ville-titre-accueil), calc(100cqi / var(--h1-em, 6))); line-height: 1; white-space: nowrap; }
.va-hub .reponse > .t-titre-ligne { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.va-hub__taches { display: flex; flex-direction: column; gap: var(--espace-8); padding-top: var(--espace-8); }
.va-hub__taches .bouton { width: 100%; }
.va-hub .reponse__ligne dd { font-size: var(--taille-texte); line-height: var(--interlignage-texte); }
.va-galerie-section { padding-top: var(--espace-40); }
.va-fiche__infos { padding-bottom: 0; }
.va-par-activite { margin-top: var(--espace-24); margin-bottom: var(--espace-8); }
h2 + .va-recherche { margin-top: var(--espace-16); }
.va-asso-tete__titre .titre-page__chapo { max-width: 40em; }
.va-categories, .va-cotes { margin-top: var(--espace-8); }
.va-une { display: flex; flex-direction: column; gap: var(--espace-24); }
.va-une__carte { gap: var(--espace-16); }
.va-une__nom { font-weight: 400; font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); letter-spacing: -0.02em; }
.va-une__carte .photo__image { transition: transform calc(var(--souffle-duree) * 1ms) var(--souffle-courbe); }
.va-une__photo { overflow: hidden; }
.va-une__carte:hover .photo__image { transform: scale(1.02); }
.va-rdv-section { display: flex; flex-direction: column; gap: var(--espace-24); margin-top: var(--rythme-section); }
.va-rdv { margin-bottom: var(--espace-8); }
.va-rdv__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-16); padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.va-rdv__textes { display: flex; flex-direction: column; gap: var(--espace-4); }
.va-cotes .ligne__lien { min-height: 56px; }
@media (min-width: 1024px) {
  .va-asso-tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); align-items: start; }
  .va-asso-tete__titre { grid-column: 1 / 9; padding-bottom: 0; }
  .va-asso-tete__hub { grid-column: 9 / 13; padding-top: var(--espace-64); }
  .va-hub .reponse__ligne { grid-template-columns: 120px minmax(0, 1fr); }
  .va-hub__taches { padding-top: 0; align-items: flex-start; }
  .va-hub__taches .bouton { width: auto; }
  .va-hub .reponse__ligne dd { font-size: var(--taille-texte); }
  .va-galerie-section { padding-top: var(--espace-64); }
  .va-categories, .va-cotes { display: grid; column-gap: var(--grille-gouttiere); border-top: 0; }
  .va-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .va-cotes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(8 / 12 * 100%); }
  .va-une-rdv { align-items: start; }
  .va-rdv-section { margin-top: 0; }
  .va-rdv__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--espace-24); align-items: start; }
}

/* ==========================================================================
   V8b · Annuaire (228:33492 / 228:33720)
   ========================================================================== */
.va-onglets ul { display: flex; flex-direction: column; }
.va-onglets a { display: flex; align-items: center; min-height: 48px; padding-left: var(--espace-16); border-left: 3px solid transparent; text-decoration: none; color: var(--couleur-texte-secondaire); font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
.va-onglets a:hover { color: var(--couleur-texte); text-decoration: underline; text-underline-offset: 0.2em; }
.va-onglets a[aria-current="page"] { border-left-color: var(--couleur-action); color: var(--couleur-texte); font-weight: 500; }
.va-annuaire { padding-top: var(--espace-40); padding-bottom: var(--rythme-section); }
.va-annuaire__outils { row-gap: var(--espace-24); }
.va-annuaire__filtres { display: flex; flex-direction: column; gap: var(--espace-16); }
.va-annuaire__compte-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--espace-24); }
.va-annuaire__liste { margin-top: var(--espace-24); }
.va-annuaire__liste .ligne__lien { min-height: 72px; }
.va-annuaire__vide { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-8); padding-block: var(--espace-24); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.va-annuaire__pied { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-16); margin-top: var(--espace-24); }
.va-annuaire__pied .pagination[hidden] + p:empty { display: none; }
@media (min-width: 1024px) {
  .va-onglets ul { flex-direction: row; gap: var(--espace-40); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
  .va-onglets a { padding-left: 0; border-left: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; }
  .va-onglets a[aria-current="page"] { border-bottom-color: var(--couleur-action); }
  .va-annuaire__outils { align-items: start; }
  .va-annuaire__compte-ligne { justify-content: flex-start; }
  .va-annuaire__liste { margin-top: var(--espace-40); }
  .va-annuaire__pied { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--espace-16) var(--espace-24); }
  .va-annuaire__pied > .lien-fleche { margin-left: auto; }
}

/* ==========================================================================
   V8c · Fiche association (228:33987 / 228:34207 ; GREHC 228:34465 / 228:34685)
   ========================================================================== */
.va-fiche__tete { display: flex; flex-direction: column; }
.va-fiche__visuel { margin: 0; }
.va-fiche__photo .photo__image { aspect-ratio: 3 / 2; }
.va-fiche__couverture, .va-fiche__couverture .couverture { display: block; width: 100%; }
.va-fiche__couverture .couverture { aspect-ratio: 3 / 2; }
.va-fiche__textes { display: flex; flex-direction: column; gap: var(--espace-16); padding-top: var(--espace-40); position: relative; }
.va-fiche__textes .titre-page__surtitre { margin-bottom: calc(var(--espace-8) * -1); }
.va-fiche__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-8); margin-top: var(--espace-8); }
.va-fiche__actions .bouton { width: 100%; }
.va-fiche__infos .grille { row-gap: var(--rythme-bloc); }
.va-fiche__bloc { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-24); }
.va-fiche__bloc .reponse { align-self: stretch; }
.va-fiche__suivre { display: flex; flex-direction: column; gap: var(--espace-8); }
.va-histoire { margin-top: var(--espace-24); border-top: var(--trait-filet) solid var(--couleur-filet); }
.va-histoire__item { display: flex; flex-direction: column; gap: var(--espace-4); padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
/* L'année en grand : le repère se lit d'un coup d'œil (« mieux hiérarchisé »), même rythme que les numéros d'agenda */
.va-histoire__annee { font-size: calc(28px * var(--facteur-titre)); line-height: calc(32px * var(--facteur-titre)); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--couleur-action); }
.va-histoire__source { margin-top: var(--espace-16); }
.va-histoire sup { font-size: 0.7em; line-height: 0; }
.va-mag { padding-bottom: 0; }
.va-mag .liste { margin-top: var(--espace-8); }
.va-meme .liste { margin-top: var(--espace-24); margin-bottom: var(--espace-16); }
.va-fiche__note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espace-24); padding-bottom: var(--rythme-section); }
.va-archives__figure { margin: var(--espace-24) 0 var(--espace-16); }
.va-archives__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-8); }
.va-archives__liste .photo__image { aspect-ratio: 3 / 2; }
.va-archives__figure figcaption { margin-top: var(--espace-8); }
.va-encart { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-8); margin-top: var(--espace-40); padding: var(--espace-24); border: var(--trait-filet) solid var(--couleur-champ); }
@media (min-width: 1024px) {
  .va-fiche__tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere);
    padding-inline: max(var(--grille-marge), env(safe-area-inset-left, 0px)) max(var(--grille-marge), env(safe-area-inset-right, 0px)); }
  .va-fiche__textes { grid-column: 1 / 8; grid-row: 1; padding: var(--espace-40) 0 0; }
  /* photo c8–12 à fond perdu à droite, 597 × 448 (4:3), collée sous la rangée de situation */
  .va-fiche__visuel { grid-column: 8 / 13; grid-row: 1; margin-right: calc(max(var(--grille-marge), env(safe-area-inset-right, 0px)) * -1); }
  .va-fiche__photo .photo__image, .va-fiche__couverture .couverture { aspect-ratio: 4 / 3; }
  .va-fiche__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--espace-16) var(--espace-24); margin-top: var(--espace-16); }
  .va-fiche__actions .bouton { width: auto; }
  .va-archives__liste { gap: var(--grille-gouttiere); }
  .va-histoire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); border-top: 0; }
  .va-histoire__item { border-top: 0; }
}