/* ==========================================================================
   AO Craponne · prototype v2 — groupe « ville-pages »
   V2 Hub « Démarches » · V3 Fiche démarche · V6 Fiche lieu « Mairie de Craponne » · V9 Délibérations et arrêtés
   (liste + fiche) · V10 « Proposer un événement » · V12 Résultats de recherche + 404 · V13 « Je viens d'arriver »
   · V14 Espace associatif (connexion + tableau de bord).
   Blocs locaux seulement (les blocs du socle restent dans blocs.css) ; jetons du socle partout.
   Placement d'après les cadres Figma V2 (xE3nEv06VMt1SJtjciJhRl, sections 113:2260 et 114:2394).
   ========================================================================== */

/* ---------- Mise en page commune : la grille de la page, rythme de section (64 / 120) ---------- */
.vp-grille { row-gap: var(--rythme-section); padding-bottom: var(--rythme-section); align-items: start; }
.vp-grille > .titre-page { padding-bottom: 0; }
.vp-grille > .titre-page:first-child, .vp-grille > .vp-premier { padding-top: var(--espace-24); }   /* 390 : fil 64–108, titre à 132 */
.vp-grille .titre-page__chapo { color: var(--couleur-texte-secondaire); max-width: none; }
@media (min-width: 1024px) { .vp-grille > .titre-page:first-child, .vp-grille > .vp-premier { padding-top: var(--espace-64); } }   /* 1 440 : rangée 64–112, titre à 176 */
.vp-bloc { display: flex; flex-direction: column; gap: var(--rythme-titre-texte); min-width: 0; }
.vp-bloc--40 { gap: var(--rythme-bloc); }
.vp-bloc--24 { gap: var(--espace-24); }
.vp-sous-grille { display: grid; grid-template-columns: repeat(var(--grille-colonnes), minmax(0, 1fr)); column-gap: var(--grille-gouttiere); row-gap: var(--rythme-section); align-items: start; }
.vp-sous-grille > * { grid-column: var(--col, 1 / -1); min-width: 0; }
@media (min-width: 1024px) { .vp-sous-grille > * { grid-column: var(--col-d, var(--col, 1 / -1)); } }
.vp-pile-section { display: flex; flex-direction: column; gap: var(--rythme-section); min-width: 0; }
.vp-grille--serree { row-gap: var(--rythme-bloc); }
@media (min-width: 1024px) {
  .vp-rang-1 { grid-row: 1; }   /* placé au rang 1 à ≥ 1 024 seulement (l'ordre du code reste celui de 390) */
  .vp-rang-3 { grid-row: 3; }
}
.vp-texte { max-width: 38em; }
.vp-texte-fort { font-weight: 500; }
.vp-meta { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.vp-titre-desktop { }
@media (max-width: 1023.98px) {
  .vp-titre-desktop { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
.vp-tel { text-decoration: none; color: inherit; white-space: nowrap; }
.vp-tel:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.vp-actions { display: flex; flex-wrap: wrap; gap: var(--espace-16); align-items: center; }
.vp-actions--pile { flex-direction: column; align-items: stretch; gap: var(--espace-8); }
.vp-actions--pile .bouton { width: 100%; }

/* Fil d'Ariane à deux niveaux (V2) : à 390, « ‹ Accueil » seul, sans « … » (rien à déplier) */
@media (max-width: 1023.98px) { .vp-fil-court .fil__liste { display: none; } }

/* État dans une page (Bloc réponse, « Une question ? ») : en mot + repère, Texte 18/19 */
.vp-etat .etat { font-size: var(--taille-texte); line-height: var(--interlignage-texte); }
.vp-etat .etat__precision { color: var(--couleur-texte-secondaire); }
.vp-etat--grand .etat { font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); }
.vp-etat--grand .etat__repere { width: 12px; height: 12px; margin-top: 0.38em; }

/* Bloc réponse sans filet du haut (lignes de V6 « État civil », réponse directe de V12) */
.vp-lignes-ouvertes { border-top: 0; }
.vp-lignes-ouvertes .reponse__ligne:first-child { padding-top: 0; }

/* « Une question ? » (V3, V10, V12, V13) */
.vp-aide { display: flex; flex-direction: column; gap: var(--rythme-titre-texte); min-width: 0; }
.vp-aide__titre { font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); }

/* ======================= V2 · Hub « Démarches » ======================= */
.vp-ratier { display: block; width: 100%; }
.vp-hub-entrees { gap: 0; }
.vp-grille > .titre-page.vp-hub-titre:first-child { padding-top: var(--espace-16); }   /* 390 : Ratier 108–172, H1 à 196 (V1S V2) */
.vp-hub-titre .t-titre-accueil { overflow-wrap: anywhere; }
.vp-hub-titre__descripteur { color: var(--couleur-texte-secondaire); }
.vp-hub-illustration { display: none; }
.vp-hub-reponse { display: flex; flex-direction: column; gap: var(--espace-16); }
.vp-hub-reponse .reponse__lignes { border-top: var(--trait-filet) solid var(--couleur-filet); }
.vp-hub-reponse .reponse__ligne dd { font-size: var(--taille-texte); overflow-wrap: anywhere; }
.vp-hub-reponse .vp-tel { white-space: normal; }
.vp-demandees { display: flex; flex-direction: column; gap: var(--espace-8); margin-top: calc(32px - var(--rythme-section)); padding-top: var(--espace-16); border-top: var(--trait-filet) solid var(--couleur-filet); }
.vp-demandees > h2 { font-weight: 400; margin-bottom: -4px; }
.vp-hub-reponse { margin-top: calc(var(--espace-16) - var(--rythme-section)); }
.vp-demandees__liste { display: flex; flex-direction: column; gap: var(--espace-8); }
.vp-demandees .bouton { width: 100%; }
.vp-demandees .bouton .ico { width: 24px; height: 24px; }
/* Ligne de liste · icône de service (R1, bloc local 228:35310) : icône 24, titre décalé de 40, icône centrée sur la 1re ligne */
.vp-entrees .ligne__lien { align-items: flex-start; gap: var(--espace-16); padding-block: var(--espace-16); min-height: 64px; }
.vp-entrees .ligne__lien > .ico:first-child { margin-top: calc((var(--interlignage-titre-ligne) - 24px) / 2); }
.vp-entrees .ligne__lien > .ico:last-child { align-self: center; }
.vp-entrees .ligne__textes { flex: 1; }
.vp-entrees .t-titre-ligne { text-wrap: pretty; }
/* Ligne de liste · Action (R25) : 390, l'action sous le texte à la largeur de son libellé ; ≥ 1 024, à droite */
.vp-ligne-action { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--espace-16); row-gap: var(--espace-16); padding-block: var(--espace-16) var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.vp-ligne-action > .ico { margin-top: calc((var(--interlignage-titre-ligne) - 24px) / 2); }
.vp-ligne-action__textes { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }
.vp-ligne-action__action { grid-column: 2; justify-self: start; }
@media (min-width: 1024px) {
  .vp-hub-titre .t-titre-accueil { white-space: nowrap; }
  .vp-hub-illustration { display: block; align-self: end; margin-bottom: 64px; }
  .vp-hub-illustration .illustration { width: 160px; height: 160px; }
  .vp-grille > .titre-page.vp-hub-titre:first-child { padding-top: 56px; }
  .vp-hub-reponse { margin-top: 0; padding-top: 56px; }            /* filet du haut à la hauteur du H1 (cadre 116:7280, y 413) */
  .vp-demandees { margin-top: calc(76px - var(--rythme-section)); padding-top: 0; border-top: 0; }
  .vp-hub-entrees { margin-top: calc(var(--espace-64) - var(--rythme-section)); }
  .vp-contact { width: calc((100% - var(--grille-gouttiere)) / 2); margin-top: var(--espace-64); }   /* c1–6 (cadre 116:7280) */
  .vp-demandees__liste { flex-direction: row; gap: var(--grille-gouttiere); }
  .vp-demandees__liste > li { flex: 0 0 calc((100% - var(--grille-gouttiere)) / 2); }
  .vp-entrees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: var(--grille-gouttiere); border-top: 0; }
  .vp-entrees .ligne__lien { min-height: 88px; }
  .vp-ligne-action { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--espace-16); align-items: start; padding-block: var(--espace-16) var(--espace-24); }
  .vp-ligne-action__action { grid-column: 3; grid-row: 1; margin-left: var(--espace-24); }
}

/* ======================= V3 · Fiche démarche ======================= */
.vp-reponse-demarche { row-gap: var(--espace-40); margin-top: calc(var(--espace-40) - var(--rythme-section)); }
.vp-reponse-demarche .reponse__lignes { border-top: var(--trait-filet) solid var(--couleur-filet); }
@media (min-width: 1024px) {
  .vp-reponse-demarche { margin-top: calc(var(--espace-64) - var(--rythme-section)); }
  .vp-reponse-demarche > .vp-actions--pile { grid-row: 1; padding-top: var(--espace-16); }
  .vp-reponse-demarche .reponse__ligne { grid-template-columns: 112px minmax(0, 1fr); }
}
/* Étapes · parcours (bloc local 117:9076) : Ligne à 390 / Colonne à 1 440 */
.vp-parcours { display: flex; flex-direction: column; }
.vp-parcours__etape { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--espace-16); padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.vp-parcours__numero { grid-row: 1 / 3; font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); letter-spacing: -0.02em; color: var(--couleur-texte-secondaire); font-variant-numeric: tabular-nums; }
.vp-parcours__titre { font-weight: 500; font-size: var(--taille-texte); line-height: var(--interlignage-titre-ligne); }
.vp-parcours__etape:last-child { border-bottom: 0; }
.vp-parcours__precision { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
@media (min-width: 1024px) {
  .vp-parcours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); }
  .vp-parcours__etape { display: flex; flex-direction: column; gap: var(--espace-4); padding-block: var(--espace-16) 0; border-bottom: 0; border-top: var(--trait-filet) solid var(--couleur-filet); }
  .vp-parcours__numero { margin-bottom: var(--espace-8); }
  .vp-parcours__titre { font-size: var(--taille-titre-ligne); }
}
/* « Votre liste » : les pièces, sans flèche (ce ne sont pas des liens) */
.vp-pieces > li { padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); font-weight: 500; line-height: var(--interlignage-titre-ligne); text-wrap: pretty; }
.vp-pieces > li:first-child { padding-top: var(--espace-8); }
/* Onglets verticaux (bloc local 117:9081) : barre 3 px action sur l'onglet choisi, filet à gauche */
.vp-onglets { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--espace-40); }
.vp-onglets__liste { display: flex; flex-direction: column; border-left: var(--trait-filet) solid var(--couleur-filet); }
.vp-onglets__onglet {
  position: relative; display: flex; align-items: center; min-height: 48px; padding: var(--espace-8) var(--espace-16);
  font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); color: var(--couleur-texte-secondaire); text-align: left;
}
.vp-onglets__onglet:hover { color: var(--couleur-texte); text-decoration: underline; text-underline-offset: 0.2em; }
.vp-onglets__onglet[aria-selected="true"] { color: var(--couleur-texte); }
.vp-onglets__onglet[aria-selected="true"]::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 3px; background: var(--couleur-action); }
.vp-onglets__onglet:focus-visible { outline-offset: -3px; }
.vp-onglets__panneau { max-width: 38em; }
.vp-onglets__panneau:focus-visible { outline-offset: 4px; }
@media (min-width: 1024px) {
  .vp-onglets { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); }
  .vp-onglets__liste { grid-column: 1 / 5; }
  .vp-onglets__panneau { grid-column: 5 / 13; padding-top: var(--espace-8); }
}

/* ======================= V6 · Fiche lieu « Mairie de Craponne » ======================= */
.vp-fiche-reponse .reponse__lignes { border-top: var(--trait-filet) solid var(--couleur-filet); }
.vp-fiche-reponse .reponse__ligne dd { overflow-wrap: anywhere; }
.vp-fiche-reponse { margin-top: calc(var(--espace-40) - var(--rythme-section)); }
.vp-fiche-reponse > .vp-actions { margin-top: calc(var(--espace-16) - var(--rythme-bloc)); }
.vp-actions--duo .bouton { padding-inline: 20px; }
.vp-horaires .horaires { max-width: 421px; }
.vp-photo-pleine { max-width: none; margin-inline: calc(max(var(--grille-marge), env(safe-area-inset-left, 0px)) * -1) calc(max(var(--grille-marge), env(safe-area-inset-right, 0px)) * -1); }
@media (min-width: 1024px) {
  .vp-photo-pleine { max-width: none; margin-inline: 0; grid-row: 1; align-self: start; margin-top: var(--espace-64); }
  .vp-fiche-reponse, .vp-horaires, .vp-rang-serre { margin-top: calc(var(--espace-64) - var(--rythme-section)); }
  .vp-lignes-ouvertes .reponse__ligne { display: flex; flex-direction: column; }   /* État civil : jour au-dessus des heures (cadre 122:15536) */
  .vp-fiche-reponse .reponse__ligne { grid-template-columns: 120px minmax(0, 1fr); }
}
/* Carte de la ville · extrait (bloc local 121:13905) : fond vectoriel du socle, repère de la mairie, crédit OSM */
.vp-extrait {
  --cv-terre: color-mix(in srgb, var(--couleur-filet) 32%, var(--couleur-fond));
  --cv-habite: color-mix(in srgb, var(--couleur-filet) 78%, var(--couleur-fond));
  --cv-herbe: color-mix(in srgb, var(--palette-ville-vert-d-yzeron) 12%, var(--cv-terre));
  --cv-bois: color-mix(in srgb, var(--palette-ville-vert-d-yzeron) 22%, var(--cv-terre));
  --cv-eau: color-mix(in srgb, var(--couleur-decor) 40%, var(--cv-terre));
  --cv-riviere: var(--couleur-decor);
  --cv-voie: var(--palette-ville-blanc);
  --cv-bord: color-mix(in srgb, var(--couleur-texte) 16%, var(--cv-habite));
  --cv-sentier: color-mix(in srgb, var(--couleur-texte) 38%, var(--cv-terre));
  display: flex; flex-direction: column; gap: var(--espace-16);
}
[data-contrast="high"] .vp-extrait { --cv-bord: color-mix(in srgb, var(--couleur-texte) 55%, var(--cv-habite)); --cv-sentier: var(--couleur-texte); }
.vp-extrait__plan { position: relative; width: 100%; max-width: 100%; aspect-ratio: 342 / 240; overflow: hidden; background: var(--cv-terre); border: var(--trait-filet) solid var(--couleur-filet); }
.vp-extrait__plan > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vp-extrait__repere { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; background: var(--couleur-fond); border: var(--trait-forme) solid var(--couleur-texte); display: grid; place-items: center; }
.vp-extrait__repere::after { content: ""; width: 12px; height: 12px; background: var(--couleur-action); }
.vp-extrait__credit { position: absolute; right: 0; bottom: 0; padding: var(--espace-4) var(--espace-8); background: var(--couleur-fond); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.vp-extrait__liens { display: flex; flex-wrap: wrap; gap: 0 var(--espace-16); }
@media (min-width: 1024px) { .vp-extrait__plan { aspect-ratio: 644 / 352; } }

/* ======================= V9 · Délibérations et arrêtés ======================= */
.vp-filtres { display: flex; flex-direction: column; gap: var(--espace-40); }
.vp-filtres__groupe { display: flex; flex-direction: column; gap: var(--espace-8); min-width: 0; }
.vp-filtres__legende { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.vp-filtres .pastilles { gap: var(--espace-8); }
.vp-filtres .champ:not(.vp-mots) { max-width: 240px; }
.vp-filtres legend.vp-filtres__legende { margin-bottom: var(--espace-16); }
.vp-filtres .champ + .champ { margin-top: var(--espace-16); }
.vp-filtres .pastille { border-width: var(--trait-forme); }
/* Champ souligné avec la loupe à gauche (mots-clés) */
.vp-mots { display: flex; flex-direction: column; gap: var(--espace-8); }
.vp-mots__ligne { display: flex; align-items: center; gap: var(--espace-16); border-bottom: var(--trait-forme) solid var(--couleur-texte); }
.vp-mots__ligne > .ico { flex: none; }
.vp-mots__champ { flex: 1; min-width: 0; min-height: 56px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: var(--taille-texte); line-height: var(--interlignage-texte); color: var(--couleur-texte); -webkit-appearance: none; appearance: none; }
.vp-mots__champ::placeholder { color: var(--couleur-texte-secondaire); opacity: 1; }
.vp-mots__champ::-webkit-search-cancel-button { display: none; }
.vp-mots__ligne:focus-within { outline: 3px solid var(--couleur-focus-interieur); box-shadow: 0 0 0 6px var(--couleur-focus-exterieur); }
.vp-mots__champ:focus-visible { outline: none; box-shadow: none; }
.vp-resultats { display: flex; flex-direction: column; gap: var(--espace-16); min-width: 0; }
.vp-actes { border-top: 0; }
.vp-acte { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--espace-16); padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.vp-acte > .ico { margin-top: 2px; color: var(--couleur-action); }
.vp-acte__textes { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }
.vp-acte__titre { display: block; padding-top: 10px; margin-top: -10px; font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); text-decoration: none; color: var(--couleur-texte); text-wrap: pretty; }
.vp-acte__titre:hover { color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.18em; }
.vp-acte__doc { align-self: flex-start; display: inline-flex; align-items: flex-start; min-height: 34px; margin-bottom: -10px; font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); color: var(--couleur-action); text-decoration: none; }
.vp-acte__doc:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.vp-vide { display: flex; flex-direction: column; gap: var(--espace-16); }
.vp-vide__texte { font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); text-wrap: balance; }
button.lien-fleche { cursor: pointer; }
.vp-essentiel { display: flex; flex-direction: column; gap: var(--espace-24); }
.vp-essentiel .reponse__lignes { border-top: var(--trait-filet) solid var(--couleur-filet); }
.vp-essentiel .bouton { align-self: flex-start; }

/* ======================= V10 · Formulaire « Proposer un événement » ======================= */
.vp-form { display: flex; flex-direction: column; gap: var(--espace-24); min-width: 0; }
.vp-form__etape { display: flex; flex-direction: column; gap: var(--espace-24); }
.vp-form__etape[hidden] { display: none !important; }
.vp-form__envoi { margin-top: var(--espace-16); align-self: flex-start; }
.vp-form .champ__controle[type="date"], .vp-form .champ__controle[type="time"], .vp-connexion .champ__controle[type="date"] { max-width: 240px; }
.vp-form .champ__controle[type="file"] { padding-block: 8px; }
.vp-form .choix { gap: 0; }
.vp-form .choix .champ__erreur { margin-bottom: var(--espace-8); }
.vp-form .choix .champ__aide { margin-bottom: var(--espace-8); }
.vp-form legend.champ__libelle { margin-bottom: var(--espace-8); }
.vp-conditionnel { margin-left: 12px; padding-left: var(--espace-24); border-left: var(--trait-forme) solid var(--couleur-champ); }
.vp-etape-repere { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.vp-form-tete { display: flex; flex-direction: column; gap: var(--rythme-titre-texte); }
.vp-form-tete .lien-retour { align-self: flex-start; margin-bottom: var(--espace-24); text-decoration: none; }
.vp-form-tete .lien-retour span { text-decoration: underline; text-underline-offset: 0.2em; }
.vp-form-tete .resume-erreurs { margin-bottom: var(--espace-24); }
.resume-erreurs:focus-visible { outline: 3px solid var(--couleur-focus-interieur); box-shadow: 0 0 0 6px var(--couleur-focus-exterieur); }
.resume-erreurs ul { display: flex; flex-direction: column; gap: var(--espace-8); }
.vp-recap { border-top: var(--trait-filet) solid var(--couleur-filet); }
.vp-recap__ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--espace-16); row-gap: var(--espace-4); padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.vp-recap__ligne dt { grid-column: 1; font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.vp-recap__ligne dd { grid-column: 1; overflow-wrap: anywhere; white-space: pre-line; }
.vp-recap__modifier { grid-column: 2; grid-row: 1 / 3; align-self: center; display: inline-flex; align-items: center; min-height: var(--cible-minimum); font-weight: 500; color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.2em; }
.vp-connexion-liens { display: flex; flex-direction: column; gap: var(--espace-8); }
.vp-connexion-liens p { margin-top: var(--espace-8); }
.vp-confirmation { display: flex; flex-direction: column; gap: var(--espace-40); }
.vp-confirmation__suivi { font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); }
.vp-confirmation .vp-bloc p + p { margin-top: var(--espace-8); }
.vp-confirmation .bouton { align-self: flex-start; }
@media (min-width: 1024px) {
  .vp-recap__ligne { grid-template-columns: 199px minmax(0, 1fr) auto; column-gap: var(--grille-gouttiere); }
  .vp-recap__ligne dt { grid-column: 1; grid-row: 1; }
  .vp-recap__ligne dd { grid-column: 2; grid-row: 1; }
  .vp-recap__modifier { grid-column: 3; grid-row: 1; }
  .vp-aide--haut { padding-top: var(--espace-40); }
}

/* ======================= V12 · Résultats de recherche · 404 ======================= */
.vp-recherche .recherche__champ { min-height: 56px; }
.vp-recherche .recherche__ligne { gap: var(--espace-8); }
.vp-recherche .recherche__bouton { margin-left: -10px; }   /* loupe à gauche (Figma), premier dans l'ordre du code */
.vp-reponse-directe { display: flex; flex-direction: column; gap: var(--espace-16); }
.vp-reponse-directe .reponse__lignes { border-top: var(--trait-filet) solid var(--couleur-filet); }
.vp-reponse-directe .bouton { align-self: flex-start; margin-top: var(--espace-8); }
@media (min-width: 1024px) { .vp-reponse-directe .reponse__ligne { grid-template-columns: 120px minmax(0, 1fr); } }
.vp-types { display: flex; flex-direction: column; gap: var(--espace-16); align-items: flex-start; }
.vp-types .pastille[aria-pressed="false"] { border-color: var(--couleur-champ); }
.vp-types .pastille { padding-inline: 12px; }
.vp-plus-filtres { display: flex; flex-direction: column; gap: var(--espace-16); align-self: stretch; }
[data-vp-liste].liste { border-top: 0; }
.vp-resultat .ligne__lien { align-items: flex-start; padding-block: var(--espace-16); min-height: 64px; }
.vp-resultat .ligne__lien > .ico:last-child { align-self: center; }
.vp-resultat .ligne__textes { flex: 1; }
.vp-resultat .t-titre-ligne { color: var(--couleur-texte); }
.vp-resultat mark, .vp-surligne { background: none; color: inherit; font-weight: 500; }
.vp-resultat .t-meta mark { color: var(--couleur-texte); }
.vp-404-agenda .jour__liste { border-top: var(--trait-filet) solid var(--couleur-filet); }
@media (min-width: 1024px) { .vp-404-agenda .jour { grid-template-columns: repeat(8, minmax(0, 1fr)); } .vp-404-agenda .jour__tete { grid-column: 1 / 4; } .vp-404-agenda .jour__liste { grid-column: 4 / 9; } }

/* ======================= V13 · Guide « Je viens d'arriver » ======================= */
/* Ligne de liste · numérotée avec méta + icône (bloc local 115:3904 + 228:35310) :
   390 : icône x 24, numéro x 64, tâche x 112, flèche x 342 ; 1 440 : icône c1, numéro x 104, tâche x 215, destination x 772–931 */
.vp-guide { border-top: 0; }
.vp-guide .ligne__lien { display: grid; grid-template-columns: 24px 32px minmax(0, 1fr) 24px; column-gap: var(--espace-16); align-items: start; padding-block: var(--espace-16); min-height: 56px; }
.vp-guide .ligne__lien > .ico:first-child { margin-top: calc((var(--interlignage-titre-ligne) - 24px) / 2); }
.vp-guide .ligne__numero { padding-top: calc((var(--interlignage-titre-ligne) - var(--interlignage-meta)) / 2); }
.vp-guide .ligne__textes { min-width: 0; }
.vp-guide .ligne__lien > .ico:last-child { grid-column: 4; margin: 0; margin-top: calc((var(--interlignage-titre-ligne) - 24px) / 2); }
.vp-guide .ligne__lien:hover .t-titre-ligne { color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.18em; }
@media (min-width: 1024px) {
  .vp-guide .ligne__lien { grid-template-columns: 24px 95px minmax(0, 1fr) 159px; padding-block: var(--espace-16); }
  .vp-guide .ligne__textes { display: contents; }
  .vp-guide .ligne__textes .t-titre-ligne { grid-column: 3; padding-right: var(--espace-8); }
  .vp-guide .ligne__textes .t-meta { grid-column: 4; margin-left: var(--espace-8); padding-top: 2px; }
  .vp-guide .ligne__lien > .ico:last-child { display: none; }   /* 1 440 : la destination tient la place de la flèche (cadre 119:14584) */
}

/* ======================= V14 · Espace associatif ======================= */
.vp-connexion { display: flex; flex-direction: column; gap: var(--espace-24); }
.vp-connexion .bouton { align-self: flex-start; margin-top: var(--espace-16); }
.vp-taches { display: flex; flex-direction: column; gap: var(--espace-16); }
.vp-taches .bouton { width: 100%; }
@media (min-width: 1024px) { .vp-taches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); } }
.vp-demande .ligne__lien { align-items: flex-start; }