/* ═══════════════════════════════════════════════════════════════
   VEILLE — page archive. Présentation « timeline à nœuds » : le même
   langage que le fil de veille de /publications et de l'accueil — UN
   seul trait vertical, un nœud par brève, aucun autre filet (le rail
   des mois est nu ; seule la recherche garde son soulignement,
   affordance d'input, pas séparateur).
   Crantage : la section remplit l'écran (100vh) et la pagination
   borne le nombre de brèves affichées — rien ne déborde.
   ═══════════════════════════════════════════════════════════════ */

body{background:var(--navy-3);color:var(--cream)}

/* — Section pleine hauteur ; contenu ANCRÉ EN HAUT (flex-start) : le fil
   d'Ariane, le rail des mois et la barre de recherche restent toujours au
   même endroit, quel que soit le nombre de brèves (seule la liste dessous
   varie en hauteur, bornée par la pagination). — */
.vl{background:var(--navy-3);color:var(--cream);
  min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;
  /* padding-haut resserré : l'en-tête éditorial habille désormais le haut de
     page, tout remonte pour que les blocs respirent mieux à l'écran. */
  /* padding-bas = marge titre→veille (.vl-head margin-bottom) : la veille a
     la MÊME respiration au-dessus et en dessous */
  padding:clamp(118px,15vh,160px) var(--pad) clamp(44px,6.4vh,80px)}

/* — Fil d'Ariane : calé sur la marge de page (cf. pages profil) — */
.vl-crumb{margin:0 0 clamp(44px,6.4vh,80px)}
/* — En-tête éditorial : titre Epilogue (composant .veille-title de Ressources)
   + sous-titre, date de mise à jour sous le titre — */
/* même marge que sous le fil d'Ariane (.vl-crumb) → le titre est à égale
   distance de ce qui le précède et de ce qui le suit.
   Pleine largeur (comme /publications) : calé marge gauche → marge droite. */
/* MÊME grille que .vl-inner → la recherche est calée à l'extrême droite
   de la colonne des brèves. */
.vl-head{width:100%;margin:0 0 clamp(44px,6.4vh,80px);
  display:grid;grid-template-columns:minmax(270px,320px) minmax(0,920px);
  column-gap:clamp(72px,8vw,150px);align-items:center}
.vl-head-tools{display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(24px,4vw,64px)}
/* — Réinitialiser les filtres : EN BAS DU RAIL, sous les thèmes. Petites
   capitales discrètes + croix ; n'existe à l'écran que lorsqu'un filtre est
   actif (attribut hidden sinon) — */
.vl-reset{display:inline-flex;align-items:center;gap:7px;flex:none;
  margin-top:clamp(22px,3vh,32px);
  background:none;border:none;cursor:pointer;padding:0;
  font-family:var(--mu);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(247,245,243,.45);white-space:nowrap;
  transition:color .3s}
.vl-reset:hover{color:var(--cream)}
.vl-reset svg{width:11px;height:11px;flex:none}
.vl-reset[hidden]{display:none}
/* même gabarit que les titres de bandeaux de l'accueil (.hb-title).
   nowrap : une seule ligne — le léger dépassement de la colonne (≈15px)
   s'étale dans la gouttière, très loin des brèves. */
.vl-title{font-family:var(--ep);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(27px,3.2vw,46px);line-height:1.12;color:var(--cream);margin:0;
  white-space:nowrap}
.vl-title em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--blue)}

/* — ANCRÉ À GAUCHE sur la marge de page (mêmes repères que nav/footer),
   gouttière fixe (clampée), colonne des brèves plafonnée à 920px pour la
   lisibilité. Sur très grand écran le vide reste à DROITE, après la zone de
   lecture — une gouttière élastique creusait un trou au milieu de la page. — */
.vl-inner{display:grid;grid-template-columns:minmax(270px,320px) minmax(0,920px);
  column-gap:clamp(72px,8vw,150px);align-items:start;width:100%;
  flex:1}/* absorbe la hauteur restante de l'écran (voir .vl-main ci-dessous) */

/* — Rail gauche « SOMMAIRE ÉDITORIAL » : 3 sections au même gabarit —
   titre capitales souligné d'un filet PLEINE LARGEUR, puis lignes nues
   (libellé + compteur). Se lit comme le sommaire d'une revue. — */
/* margin-top calé pour que « PÉRIODE » s'aligne sur le libellé « Juillet »
   de la 1re brève — vérifié au pixel */
.vl-rail{position:static;margin-top:-2px}
/* titre de section : rubrique des pages profil (.prof-sec-title d'Alix/Julien :
   capitales accent) + filet pleine largeur dessous (registre sommaire) */
.vl-rail-title{font-family:var(--mu);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 5px;
  padding-bottom:10px;border-bottom:1px solid rgba(247,245,243,.14)}
.vl-tree{display:flex;flex-direction:column}
/* mois : lignes nues (le filet n'existe que sous les titres) */
.vl-month{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  width:100%;background:none;border:none;border-radius:0;cursor:pointer;text-align:left;
  padding:8px 0;font-family:var(--mu);font-size:13.5px;font-weight:300;
  color:rgba(247,245,243,.55);transition:color .3s}
.vl-month:hover{color:var(--cream)}
.vl-month.active{color:var(--cream)}
.vl-month-label{text-transform:capitalize}
.vl-month.active .vl-month-label{border-bottom:1px solid var(--accent);padding-bottom:1px}
.vl-month-n{font-size:10.5px;font-weight:600;letter-spacing:.06em;
  color:rgba(247,245,243,.35);white-space:nowrap}
.vl-month.active .vl-month-n{color:var(--accent)}

/* — Année : en-tête d'arbo (caret + libellé + total) ; clic = déplier/replier — */
/* l'année n'est PAS un filtre sélectionné : même gris que les autres lignes
   (seule la graisse 400 marque la hiérarchie de l'arbo) */
.vl-year-toggle{display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:8px 0;font-family:var(--mu);font-size:13.5px;font-weight:400;letter-spacing:.02em;
  color:rgba(247,245,243,.55);transition:color .3s}
.vl-year-toggle:hover{color:var(--cream)}
/* un mois de cette année est sélectionné → l'année s'allume aussi en blanc */
.vl-year:has(.vl-month.active) .vl-year-toggle{color:var(--cream)}
/* gris : le caret suit la couleur de la ligne d'année (et s'éclaircit avec elle au survol) */
.vl-caret{width:12px;height:12px;flex:none;color:inherit;transition:transform .35s var(--ease)}
.vl-year-toggle[aria-expanded="true"] .vl-caret{transform:rotate(90deg)}
.vl-year-label{flex:1}
.vl-year-toggle .vl-month-n{color:rgba(247,245,243,.4)}
/* liste des mois d'une année : repliable en douceur */
.vl-year-months{overflow:hidden;max-height:0;opacity:0;
  transition:max-height .4s var(--ease),opacity .3s ease}
.vl-year-months[data-open="true"]{max-height:640px;opacity:1}
.vl-year-months .vl-month{padding-left:22px}

/* — Filtre par thèmes : MÊME gabarit que Période (titre + filet, lignes nues,
   compteur à droite, actif = soulignement accent) — */
.vl-themes{margin-top:clamp(22px,3vh,32px)}
.vl-themes-list{display:flex;flex-direction:column}
.vl-theme{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  width:100%;background:none;border:none;border-radius:0;cursor:pointer;text-align:left;
  padding:8px 0;font-family:var(--mu);font-size:13.5px;font-weight:300;
  color:rgba(247,245,243,.55);transition:color .3s}
.vl-theme:hover{color:var(--cream);background:none}
.vl-theme.active{color:var(--cream);background:none}
.vl-theme.active .vl-theme-label{border-bottom:1px solid var(--accent);padding-bottom:1px}
.vl-theme.active .vl-month-n{color:var(--accent)}

/* — Recherche : DANS L'EN-TÊTE, sur la ligne du titre. Même format que
   /publications (navy) : 13px léger, filet .18 → accent au focus. — */
/* colonne pleine hauteur : le vide de l'écran se loge ENTRE les brèves et la
   pagination (margin-top:auto sur celle-ci) → la pagination reste en bas et
   la marge sous elle = padding-bas de section, égale à la marge titre→veille */
.vl-main{min-width:0;align-self:stretch;display:flex;flex-direction:column}
.vl-search-wrap{position:relative;flex:0 1 320px}
/* même registre typographique que les lignes du rail (mois / hashtags) :
   13.5px, graisse 300, gris .55, padding 8px. line-height FIXE 16px → la
   hauteur totale est paire et la loupe se cale sur un pixel entier (nette). */
.vl-search{background:none;border:none;border-bottom:1px solid rgba(247,245,243,.18);
  border-radius:0;padding:8px 26px 8px 0;width:100%;line-height:16px;
  font-family:var(--mu);font-size:13.5px;font-weight:300;color:var(--cream);
  -webkit-text-fill-color:var(--cream);caret-color:var(--cream);transition:border-color .3s}
.vl-search::placeholder{color:rgba(247,245,243,.55);-webkit-text-fill-color:rgba(247,245,243,.55)}
.vl-search:focus{outline:none;border-bottom-color:var(--accent);box-shadow:none}
/* neutralise le recolorage du texte par l'autofill du navigateur */
.vl-search:-webkit-autofill,.vl-search:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--cream);caret-color:var(--cream);
  transition:background-color 9999s ease-out 0s}
/* top:8px (= padding-top) : position entière, plus de demi-pixel flou */
.vl-search-icon{position:absolute;right:0;top:8px;
  width:16px;height:16px;color:rgba(247,245,243,.4);pointer-events:none}
.vl-empty{font-family:var(--mu);font-weight:300;font-size:14.5px;
  color:rgba(247,245,243,.5);padding:24px 0}

/* — HAUTEURS NATURELLES + espacement UNIFORME : chaque brève prend la hauteur
   de son contenu et un même écart la sépare de la suivante → rythme vertical
   régulier (fini les créneaux fixes qui laissaient de grands vides sous les
   brèves courtes). Les titres de mois restent masqués mais dans le DOM (SEO). — */
/* --railx : X du fil vertical = largeur de la gouttière où vit l'étiquette
   de mois ; les nœuds sont tous centrés sur cet axe. */
.vl-main{--vlzone:clamp(390px,60vh,620px);--railx:72px}
#vlGroups{position:relative;height:auto;padding:0;overflow:visible}
/* fil vertical, centré sur --railx (trait 1px) */
#vlGroups::before{content:'';position:absolute;left:calc(var(--railx) - .5px);top:8px;bottom:8px;
  width:1px;background:rgba(139,163,217,.28)}
.vl-group{margin:0}
.vl-group-title{display:none}
.vl-list{list-style:none;margin:0;padding:0}
/* padding-left = gouttière (étiquette de mois + fil) ; le contenu vient après */
/* Espacement vertical IDENTIQUE entre toutes les brèves. PAS de
   :last-child{margin:0} : chaque mois est un <ol> distinct, donc :last-child
   viserait la dernière brève de CHAQUE mois et la collerait à la 1re du mois
   suivant → c'était la cause des écarts inégaux. */
.vl-item{border:none;position:relative;
  margin:0 0 clamp(30px,4.2vh,46px);padding-left:calc(var(--railx) + 24px);--dlh:16px}
/* brève liée à un article du cabinet : toute la brève est cliquable */
.vl-item[data-art]{cursor:pointer}
/* IMPORTANT — publications.css (chargé aussi ici) pose un slide-in sur TOUT
   [data-art] : opacity:0 + translateX(-20px), révélé par une classe .in au
   scroll. Sur /publications c'est une carte d'article ; sur la veille, data-art
   marque juste une brève liée à un article (clic) et AUCUNE classe .in n'est
   posée → ces brèves restaient invisibles, laissant un vide en tête des pages
   paginées (ex. page 2). On neutralise donc ce reveal pour les brèves : elles
   apparaissent/disparaissent uniquement via la pagination (display).
   NB : la transition .3s est conservée pour l'estompe au survol (cf. plus bas). */
.vl-item[data-art]{opacity:1;transform:none;transition:opacity .3s}

/* — NŒUDS : ronds pleins, TOUS exactement de la même taille (9px), centrés
   sur le fil. translate(-50%,-50%) garde le centre sur (--railx, milieu date). */
.vl-item::before{content:'';position:absolute;left:var(--railx);top:calc(var(--dlh)/2);
  width:9px;height:9px;box-sizing:border-box;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(139,163,217,.5);
  transition:background .3s}
.vl-item:hover::before{background:var(--accent)}

/* — DÉBUT DE MOIS : point de MÊME taille, mais plein (accent) + onde animée
   autour → les 1res brèves de chaque mois « pulsent ». — */
.vl-item.is-month-start::before{background:var(--accent)}
.vl-item.is-month-start::after{content:'';position:absolute;
  left:var(--railx);top:calc(var(--dlh)/2);width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  border:1px solid var(--accent);
  animation:vlPing 3.2s ease-out infinite}

/* étiquette de mois : masquée par défaut, révélée sur chaque début de mois.
   top:0 + line-height de la 1re ligne = --dlh → le mois s'aligne pile sur la
   date (même centre vertical), l'année passe dessous ; rien n'est rogné. */
/* alignées à DROITE : les bords droits de « Juillet » / « Juin » tombent au
   même endroit, quelle que soit leur longueur. Largeur = railx - 24px → le
   mois s'arrête à la MÊME distance du point que le texte de droite (24px de
   part et d'autre du centre du nœud, symétrie parfaite). */
.vl-flag{position:absolute;left:0;top:0;
  width:calc(var(--railx) - 24px);text-align:right;
  display:none;pointer-events:none}
.vl-item.is-month-start .vl-flag{display:block}
.vl-flag-m{display:block;font-family:var(--ep);font-weight:300;line-height:var(--dlh);
  font-size:14px;color:var(--cream);text-transform:capitalize;white-space:nowrap}
/* année masquée : chaque date porte déjà l'année → l'étiquette de mois tient
   sur une seule ligne (« Juillet » / « Juin »), plus de bloc sur 2 lignes. */
.vl-flag-y{display:none}

/* — brève la plus récente : point de MÊME taille, mais cœur bleu et onde bleue
   (le ::after animé est déjà posé par is-month-start ; is-first est toujours un
   début de mois, on ne fait que recolorer). — */
.vl-item.is-first::before{background:var(--blue)}
.vl-item.is-first::after{border-color:var(--blue)}
/* au survol, l'onde SUIT la souris : elle passe sur la brève survolée et les
   ondes permanentes (débuts de mois, brève de tête) s'éteignent */
.vl-item:hover::after{content:'';position:absolute;
  left:var(--railx);top:calc(var(--dlh)/2);width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  border:1px solid var(--accent);
  animation:vlPing 3.2s ease-out infinite}
/* les nœuds non survolés redeviennent TOUS identiques (couleur de base, sans onde) */
#vlGroups:has(.vl-item:hover) .vl-item:not(:hover)::before{background:rgba(139,163,217,.5)}
#vlGroups:has(.vl-item:hover) .vl-item.is-month-start:not(:hover)::after{animation:none;opacity:0}
/* MÊMES keyframes que opsPulse (Ressources) : anneau 1→3.4, fondu à 70 % */
@keyframes vlPing{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.7}
  70%{transform:translate(-50%,-50%) scale(3.4);opacity:0}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .vl-item.is-month-start::after{animation:none;opacity:0}
  .vl-item:hover::after{animation:none;opacity:0}
}
/* tête de date : date + pictos (★ à la une, 📄 article détaillé). Le texte est
   le lien vers la source ; pictos et tags sont des frères (pas de lien imbriqué). */
.vl-link{display:block;padding:0;color:inherit;text-decoration:none}
/* survol d'une brève : TOUTES les autres se grisent, tous mois confondus
   (:has → l'estompe ne se déclenche que si une brève est réellement survolée,
   pas quand la souris passe sur un titre de mois ou un interstice) */
#vlGroups:has(.vl-item:hover) .vl-item:not(:hover){opacity:.5}
.vl-item{transition:opacity .3s}
.vl-date{display:flex;align-items:center;gap:7px;font-family:var(--mu);font-size:10.5px;font-weight:600;
  line-height:var(--dlh);letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,243,.42);
  margin-bottom:4px}
/* étoile = « un article détaillé existe sur ce sujet ». Or plein, sans halo :
   le lueur portée était le seul effet de ce genre sur le site et faisait
   baver le glyphe. Cliquable (lien vers l'article) ; petite remontée au
   survol, qui suffit à dire que c'est un lien. */
.vl-star{width:14px;height:14px;flex:none;fill:#C6A15B}
.vl-star-link{display:inline-flex;flex:none;transition:transform .3s var(--ease)}
.vl-star-link:hover{transform:translateY(-1px)}
.vl-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--mu);font-weight:300;
  font-size:clamp(13.5px,1vw,15px);line-height:1.55;color:rgba(247,245,243,.82);
  transition:color .3s}
.vl-link:hover .vl-text{color:var(--cream)}

/* meta : source + puces de thème */
/* margin-top:0 — calé À L'ENCRE (glyphes, pas boîtes CSS) pour que l'écart
   visuel titre→source égale l'écart date→titre (11,4px d'encre à encre,
   mesuré) : les interlignages différents des trois lignes (16px / 23px /
   17-23px) gonflent les boîtes de façon inégale, seule la mesure à l'encre
   donne un rythme vertical réellement uniforme.
   baseline : source (capitales 10px) et hashtags (bas-de-casse 13.5px) posés
   sur la même ligne de base → leurs masses visuelles coïncident (le centrage
   géométrique les faisait paraître décalés à cause des jambages). */
.vl-meta{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:0}
.vl-src{font-family:var(--mu);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);opacity:.75}
/* source qui S'AGRANDIT SUR PLACE au survol de la brève. La version DÉVELOPPÉE
   est sortie du flux (position absolue dans .vl-meta) : la source occupe
   toujours la hauteur de la version courte, donc le survol ne repousse JAMAIS
   les brèves du dessous. Si la citation complète dépasse une ligne, elle
   déborde dans l'espace (40px de marge) déjà présent entre deux brèves, sur
   un fond opaque identique à la page. */
.vl-src--full{opacity:1}
.vl-src--full .vl-src-short{opacity:.75}
/* Calque développé : pleine largeur de colonne (left:0/right:0) → il fait un
   retour à la ligne quand nécessaire, à la largeur de la colonne ; hors flux
   (absolu) → il ne repousse JAMAIS les brèves du dessous (les lignes en trop
   débordent dans la marge de 40px entre deux brèves, sur fond opaque).
   Position verticale garantie PAR CONSTRUCTION, sans chiffre magique : la
   1re ligne contient un étai invisible (.vl-src-strut) qui reproduit la
   hauteur du hashtag (13,5px/1.7) — la ligne de base se calcule donc
   exactement comme sur la ligne par défaut, quel que soit le navigateur. */
.vl-src-long{display:none;position:absolute;left:0;right:0;top:0;z-index:3;
  background:rgb(19,27,42);line-height:17px;
  color:color-mix(in srgb, var(--accent) 75%, transparent)}
.vl-src-strut{font-size:13.5px;line-height:1.7;letter-spacing:0}
/* au survol : la ligne source + hashtag (en flux) est masquée en GARDANT sa
   place (visibility, pas display) → aucune brève du dessous ne se décale ;
   la citation complète s'affiche par-dessus et, si elle dépasse une ligne,
   déborde dans la marge de 40px déjà présente entre deux brèves. */
.vl-item:hover .vl-src--full .vl-src-short,
.vl-item:focus-within .vl-src--full .vl-src-short,
.vl-item:hover .vl-tag,.vl-item:focus-within .vl-tag{visibility:hidden}
.vl-item:hover .vl-src-long,.vl-item:focus-within .vl-src-long{display:block}
/* tags en style hashtag : texte simple gris, sans pastille — MÊME taille et
   graisse que les hashtags du filtre du rail (13.5px / 300) */
.vl-tag{font-family:var(--mu);font-size:13.5px;font-weight:300;letter-spacing:.005em;
  line-height:1.7; /* verrouillé : .vl-src-strut doit rester identique */
  color:rgba(247,245,243,.4);transition:color .3s}
.vl-item:hover .vl-tag{color:rgba(247,245,243,.62)}

/* — Infobulle de l'étoile : « Article détaillé » se révèle dès le survol de la
   BRÈVE entière (pas seulement de l'étoile), à droite du picto
   (position absolue → aucun décalage de mise en page) — */
.vl-star-link{position:relative}
.vl-star-tip{position:absolute;left:calc(100% + 8px);top:50%;
  transform:translateY(-50%) translateX(-4px);white-space:nowrap;
  font-family:var(--mu);font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#C6A15B;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .3s var(--ease)}
.vl-item:hover .vl-star-tip,.vl-item:focus-within .vl-star-tip{
  opacity:1;transform:translateY(-50%) translateX(0)}

/* — Pagination (pastilles pub-page-*, styles dans publications.css).
   min-height : réserve la place même à une page → rien ne bouge. — */
#vlGroups{margin-bottom:clamp(14px,2.2vh,24px)}/* écart minimal avant pagination */
.vl-pagination{margin-top:auto;min-height:36px}

/* — Fenêtres basses : créneaux plus courts → le texte passe à 1 ligne
   pour que 6 brèves tiennent toujours — */
@media(max-height:799px){
  .vl-text{-webkit-line-clamp:1}
}

/* — Crantage : la page se cale écran par écran (même modèle que les
   autres pages) — */
@media(min-width:921px){
  /* Le fil garde la MÊME longueur d'une page à l'autre : sa hauteur mini est
     posée en JS (sizeTimeline dans veille.astro) = hauteur de la page la plus
     haute. On n'utilise PAS flex:1 ici : il faisait remplir jusqu'à la
     pagination, donc le fil pendait dans le vide, d'une longueur différente
     selon le nombre/longueur des brèves de la page. */
  html:has(.vl){scroll-snap-type:y mandatory}
  html:has(.vl) .vl,
  html:has(.vl) .cta-prefooter{scroll-snap-align:start}
  html:has(.vl) .footer{scroll-snap-align:end}
  /* cran intermédiaire sur le BAS de la veille : si la section dépasse un
     écran (fenêtres basses), on se cale d'abord sur sa fin — juste avant le
     bandeau CTA — au lieu de sauter directement dessus (la pagination
     redevient atteignable). Sans débordement, ce cran se confond avec le
     cran de tête et ne change rien. */
  html:has(.vl) .vl::after{content:"";display:block;height:0;scroll-snap-align:end}
}

/* — Responsive : rail au-dessus, mois en chips ; plus de crantage — */
@media(max-width:900px){
  .vl{min-height:0;justify-content:flex-start}
  .vl-inner{grid-template-columns:1fr;row-gap:36px}
  /* empilé : titre puis ligne recherche/date */
  .vl-head{grid-template-columns:1fr;row-gap:14px}
  .vl-search-wrap{flex:1 1 auto}
  /* empilé : le rail repasse au-dessus → on annule le décalage d'alignement desktop */
  .vl-rail{margin-top:0}
  /* gouttière un peu plus étroite mais l'étiquette de mois reste visible */
  .vl-main{--railx:76px}
  /* empilé : le gabarit figé n'a plus de sens, hauteurs naturelles */
  #vlGroups{height:auto;overflow:visible}
  /* même espacement pour toutes (pas de :last-child : cf. desktop) */
  .vl-item{height:auto;margin:0 0 18px}
  .vl-text{-webkit-line-clamp:2}
  /* l'arbo (années/mois) reste verticale au-dessus du fil ; les thèmes en ligne */
  .vl-themes{margin-top:20px}
}
/* très petit écran : plus de place pour l'étiquette → on la masque, la
   transition de mois reste marquée par le nœud plus gros + son halo */
@media(max-width:560px){
  .vl-main{--railx:26px}
  .vl-flag{display:none!important}
  .vl-flag-m{font-size:13px}
}