/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   kit-ultime/pages/sorties.css : LES PAGES SORTIES DU SITE — l'accueil, la liste, la fiche (13 oct. 2026)

   Ce qui est propre à ces trois pages : la mise en page (sections, grilles, rails), l'en-tête d'onglet, le héros
   de la fiche, la bande « Quand · Où · Combien · Qui », la colonne « Je viens », le haut de l'accueil. Tout le reste
   vient du kit : kit-polices.css, kit-jetons.css (les --vi-*), composants/composants.css (les .v-*). Préfixe ici :
   .vs- (viens, sorties). Aucune couleur en dur hors des jetons, sauf sur la nuit et sur photo (blanc, voile).

   Le sombre suit les jetons : la page reste claire tant que la barre et le pied sont ceux de v7.css (data-theme
   posé par sorties-lib.php), et passe au soir avec l'appareil dès que la barre du kit est là.
   Mouvement réduit : les durées du kit tombent à 0 (kit-jetons.css § 8), les boucles d'ici s'arrêtent (§ 9).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */


/* ═══ 0. LA PAGE ══════════════════════════════════════════════════════════════════════════════════════════ */

.vs-page {
  background: var(--vi-fond);
  color: var(--vi-encre);
  font: var(--vi-t-lecture);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--vi-esp-2xl);
  overflow-x: clip;
}
/* les remises à zéro ne pèsent rien (:where) : elles ne passent jamais devant une règle du kit */
:where(.vs-page) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.vs-page) :where(h1, h2, h3, h4) { font-family: var(--vi-police-sans); letter-spacing: normal; line-height: normal; text-wrap: balance; }
:where(.vs-page) :where(img) { max-width: 100%; }
.vs-in { max-width: var(--vi-largeur-lecture); margin: 0 auto; padding: 0 var(--vi-gouttiere); }
.vs-page [hidden] { display: none !important; }

/* le fil d'Ariane (v7_ariane, socle) : dans la voix du kit */
.vs-page .v7-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 16px 0 4px; font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: var(--vi-gris); }
.vs-page .v7-ariane a { color: var(--vi-gris); text-decoration: none; border-radius: 4px; }
.vs-page .v7-ariane a:hover { color: var(--vi-encre); text-decoration: underline; text-underline-offset: 3px; }
.vs-page .v7-ariane a:focus-visible { outline: 2px solid var(--vi-violet); outline-offset: 2px; }
.vs-page .v7-ariane > span:last-child { color: var(--vi-encre); }

/* ═══ 1. LES TÊTES ════════════════════════════════════════════════════════════════════════════════════════ */

/* l'en-tête d'onglet (DA § 2.4) : « Les sorties. » en signature 40, puis l'accent 44 à la ligne, en violet */
.vs-entete { padding: 10px 0 8px; }
.vs-entete-titre { display: flex; flex-direction: column; }
.vs-signature { font: var(--vi-t-signature); letter-spacing: var(--vi-t-signature-approche); color: var(--vi-encre); }
.vs-accent { font: var(--vi-t-accent); letter-spacing: var(--vi-t-accent-approche); color: var(--vi-violet-texte); }
.vs-entete-sous { margin-top: 10px; font: var(--vi-t-corps); color: var(--vi-gris); }
.vs-entete-sous b { font-weight: 600; color: var(--vi-encre); }

/* la tête d'une section : le titre, une ligne au plus dessous, le lien qui mène plus loin à droite */
.vs-section { margin-top: var(--vi-esp-2xl); }
.vs-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.vs-tete > div:first-child { min-width: 0; flex: 1 1 180px; }
.vs-tete-titre { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); color: var(--vi-encre); }
.vs-tete-sous { margin-top: 4px; font: var(--vi-t-sous); color: var(--vi-gris); }
.vs-plus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font: 600 15px/21px var(--vi-police-sans);
  color: var(--vi-violet-texte);
  text-decoration: none;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.vs-plus .v-ic { transition: transform var(--vi-duree-court) var(--vi-courbe-sortie); }
.vs-plus:hover .v-ic { transform: translateX(3px); }
.vs-plus:active { opacity: var(--vi-appui-opacite); }
.vs-plus:focus-visible { outline: 3px solid var(--vi-violet); outline-offset: 2px; }
@media (min-width: 760px) {
  .vs-tete-titre { font: var(--vi-t-titre); letter-spacing: var(--vi-t-titre-approche); }
  .vs-section { margin-top: var(--vi-esp-3xl); }
}

/* ═══ 2. LA LISTE : le ruban, les filtres, les jours ══════════════════════════════════════════════════════ */

.vs-semaine { max-width: 560px; margin: 24px 0 4px; }   /* la loupe monte de 52 px au-dessus du ruban, par-dessus la tête */

.vs-filtres { display: grid; gap: 8px; margin: 18px 0 0; }
.vs-puces, .vs-cercles {
  margin-left: calc(-1 * var(--vi-gouttiere));
  margin-right: calc(-1 * var(--vi-gouttiere));
  padding-left: var(--vi-gouttiere);
  padding-right: var(--vi-gouttiere);
  scroll-padding: 0 var(--vi-gouttiere);
}
.vs-groupe { display: contents; }
.vs-cercles { padding-top: 6px; }
.vs-compte { min-height: 17px; font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: var(--vi-gris); }

.vs-jour { margin-top: 32px; scroll-margin-top: 88px; }
.vs-jour > .v-tete-jour { margin-bottom: 14px; }
.vs-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vs-carte { min-width: 0; }
.vs-carte--une { grid-column: 1 / -1; }
.vs-carte > .v-affiche, .vs-carte > .v-tuile-lancer { width: 100%; }
/* sur grand écran : l'affiche du jour prend deux colonnes, à la hauteur du rang de jaquettes (une affiche en paysage) */
@media (min-width: 760px) {
  .vs-grille { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 16px; }
  .vs-carte--une { grid-column: span 2; }
  .vs-carte--une > .v-affiche { height: 100%; min-height: 300px; aspect-ratio: auto; }
  .vs-jour { margin-top: 44px; }
}

/* ═══ 3. LES VIDES ════════════════════════════════════════════════════════════════════════════════════════ */

.vs-vide {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 44px 20px;
  border-radius: var(--vi-rayon-carte);
  background: var(--vi-lavis);
  text-align: center;
}
.vs-vide-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 19px; background: var(--vi-violet-pale); color: var(--vi-violet-texte); }
.vs-vide-titre { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); }
.vs-vide p { font: var(--vi-t-corps); color: var(--vi-gris); }
.vs-vide .v-bouton { margin-top: 6px; }
.vs-vide--filtre { padding: 32px 20px; }

/* ═══ 4. LES QUESTIONS ════════════════════════════════════════════════════════════════════════════════════ */

.vs-faq { display: grid; gap: 10px; max-width: 820px; }
.vs-faq details { border-radius: var(--vi-rayon-md); background: var(--vi-panneau); box-shadow: 0 0 0 1px var(--vi-bord); }
.vs-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: var(--vi-rayon-md);
  font: 600 16px/21px var(--vi-police-sans);
  color: var(--vi-encre);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.vs-faq summary::-webkit-details-marker { display: none; }
.vs-faq summary .v-ic { color: var(--vi-gris); transition: transform var(--vi-duree-moyen) var(--vi-courbe-douce); }
.vs-faq details[open] summary .v-ic { transform: rotate(180deg); transition-duration: var(--vi-duree-lent); transition-timing-function: var(--vi-courbe-sortie); }
.vs-faq summary:focus-visible { outline: 3px solid var(--vi-violet); outline-offset: 2px; }
.vs-faq details p { padding: 0 18px 16px; font: var(--vi-t-lecture); color: var(--vi-gris); max-width: 68ch; }

/* ═══ 5. LES RAILS (affiches qui défilent de côté) ════════════════════════════════════════════════════════ */

.vs-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 320px);
  gap: 14px;
  margin: 0 calc(-1 * var(--vi-gouttiere));
  padding: 4px var(--vi-gouttiere) 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--vi-gouttiere);
  scrollbar-width: none;
}
.vs-rail::-webkit-scrollbar { display: none; }
.vs-rail > * { scroll-snap-align: start; }
@media (min-width: 760px) {   /* sur grand écran, le rail s'arrête au bord du contenu ; les flèches le font défiler */
  .vs-rail { margin: 0; padding: 4px 0 22px; scroll-padding: 0; }
}
.vs-rail > .v-tuile-lancer { aspect-ratio: auto; }
.vs-rail-cadre { position: relative; }
.vs-rail-fl { position: absolute; top: calc(50% - 31px); z-index: 3; background: var(--vi-panneau); color: var(--vi-encre); box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-carte); }
.vs-rail-prec { left: -10px; }
.vs-rail-suiv { right: -10px; }
.vs-rail-fl[hidden] { display: none; }
@media (min-width: 1280px) { .vs-rail-prec { left: -22px; } .vs-rail-suiv { right: -22px; } }

/* ═══ 6. LA FICHE : le héros ══════════════════════════════════════════════════════════════════════════════ */

.vs-heros {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: min(76svh, 680px);
  background: var(--vi-nuit-papier);
  background: color-mix(in srgb, var(--v-teinte, var(--vi-violet)) 28%, #000);
  color: #fff;
}
.vs-heros-fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.vs-heros-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-heros--typo .vs-heros-fond { background: linear-gradient(135deg, color-mix(in srgb, var(--v-teinte, var(--vi-violet)) 38%, #000) 0%, var(--vi-nuit-papier) 100%); }
.vs-heros-filigrane { position: absolute; right: -8%; bottom: -6%; color: rgb(255 255 255 / 0.08); }
/* LE voile en S, plus une coiffe sous le fil d'Ariane et « Partager » (sur un ciel blanc, la coiffe seule laissait 2,4:1) */
.vs-heros-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 8 22 / 0.5) 0, rgb(12 8 22 / 0) 140px), var(--vi-voile-photo); }
.vs-heros-in { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; width: 100%; padding-top: 4px; padding-bottom: 28px; }
.vs-heros-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vs-heros .v7-ariane { min-width: 0; padding: 12px 0; color: rgb(255 255 255 / 0.86); text-shadow: 0 1px 6px rgb(8 5 16 / 0.45); }
.vs-heros .v7-ariane a { color: rgb(255 255 255 / 0.86); }
.vs-heros .v7-ariane a:hover { color: #fff; }
.vs-heros .v7-ariane a:focus-visible { outline-color: #fff; }
.vs-heros .v7-ariane > span:last-child { color: #fff; }
.vs-verre {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--vi-rayon-pilule);
  background: rgb(255 255 255 / 0.18);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.36);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font: 600 14px/18px var(--vi-police-sans);
  cursor: pointer;
  transition: transform var(--vi-duree-court) var(--vi-courbe-sortie), background-color var(--vi-duree-court) var(--vi-courbe-douce);
  -webkit-tap-highlight-color: transparent;
}
.vs-verre:hover { background: rgb(255 255 255 / 0.26); }
.vs-verre:active { transform: scale(var(--vi-appui-controle)); transition-duration: var(--vi-duree-micro); }
.vs-verre:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vs-heros-texte { display: grid; max-width: 780px; }
.vs-heros-colles { margin: 0 0 16px 2px; flex-wrap: wrap; row-gap: 10px; }
.vs-heros-heure, .vs-heros-date, .vs-heros-titre, .vs-heros-ou { text-shadow: var(--vi-ombre-texte-photo); }
.vs-heros-heure { font: var(--vi-t-heureFiche); letter-spacing: var(--vi-t-heureFiche-approche); }
.vs-heros-heure .v-point { color: var(--vi-violet-400); }
.vs-heros-date { margin-top: 2px; font: var(--vi-t-accent2); letter-spacing: var(--vi-t-accent2-approche); color: rgb(255 255 255 / 0.92); }
.vs-heros-titre {
  margin-top: 14px;
  font: var(--vi-t-titreFiche);
  letter-spacing: var(--vi-t-titreFiche-approche);
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.vs-heros-ou { display: flex; align-items: center; gap: 6px; margin-top: 14px; font: 600 15px/20px var(--vi-police-sans); color: rgb(255 255 255 / 0.92); }
.vs-heros-ou span { min-width: 0; }
@media (min-width: 960px) {
  .vs-heros { min-height: 620px; }
  .vs-heros-in { padding-bottom: 48px; }
}

/* ═══ 7. LA FICHE : le corps ══════════════════════════════════════════════════════════════════════════════ */

.vs-fiche-corps { display: grid; gap: 32px; padding-top: 20px; }
.vs-fiche-principal { display: grid; gap: 40px; min-width: 0; }
.vs-bloc { scroll-margin-top: 88px; min-width: 0; }
.vs-bloc-titre { margin-bottom: 14px; font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); color: var(--vi-encre); }
@media (min-width: 960px) {
  .vs-fiche-corps { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 56px; padding-top: 32px; }
}

/* la bande Quand · Où · Combien · Qui (QuatreReponses) */
.vs-quatre {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: var(--vi-rayon-lg);
  background: var(--vi-bord);
  box-shadow: 0 0 0 1px var(--vi-bord);
}
.vs-quatre > li { display: flex; min-width: 0; background: var(--vi-panneau); }
.vs-quatre-case { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; min-height: 68px; padding: 12px 14px; color: var(--vi-encre); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--vi-duree-court) var(--vi-courbe-douce); }
a.vs-quatre-case:hover, a.vs-quatre-case:active { background: var(--vi-panneau-2); }
a.vs-quatre-case:focus-visible { outline: 3px solid var(--vi-violet); outline-offset: -3px; border-radius: var(--vi-rayon-sm); }
.vs-quatre-ic { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--vi-violet-pale); color: var(--vi-violet-texte); }
.vs-quatre-visage .v-visage { --t: 32px; }
.vs-quatre-txt { display: grid; min-width: 0; }
.vs-quatre-txt b { font: 600 15px/20px var(--vi-police-sans); overflow-wrap: anywhere; }
.vs-quatre-txt small { font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: var(--vi-gris); overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .vs-quatre-case { gap: 8px; padding: 12px 10px; align-items: flex-start; }
  .vs-quatre-ic { width: 30px; height: 30px; }
  .vs-quatre-ic .v-ic { --t: 17; }
  .vs-quatre-visage .v-visage { --t: 26px; }
}
.vs-petit { font-weight: 500; font-size: 13px; color: var(--vi-gris); }
@media (min-width: 640px) { .vs-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* qui vient */
.vs-gens { gap: 14px; }
.vs-gens .v-gens-phrase { font: var(--vi-t-corps); }
.vs-gens-ic { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vi-panneau-2); color: var(--vi-gris); }
.vs-rarete { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 600 14px/19px var(--vi-police-sans); color: var(--vi-encre); }
.vs-rarete--complet { color: var(--vi-gris); font-weight: 500; }
.vs-porte-femmes { margin-top: 16px; }
.vs-porte-femmes .v-lien { white-space: nowrap; }

/* la parole de l'hôte : son visage et son prénom au-dessus, puis la description riche */
.vs-hote { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: var(--vi-t-corps); color: var(--vi-encre); }
.vs-hote .v-visage { --t: 36px; }
.vs-hote b { font-weight: 600; }
.vs-hote small { font: inherit; color: var(--vi-gris); }
.vs-desc { max-width: 66ch; }

/* bon à savoir */
.vs-infos { overflow: hidden; border-radius: var(--vi-rayon-lg); box-shadow: 0 0 0 1px var(--vi-bord); }
.vs-infos > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
.vs-infos > div + div { border-top: 1px solid var(--vi-bord); }
.vs-infos dt { display: flex; align-items: flex-start; gap: 8px; font: 600 14px/21px var(--vi-police-sans); color: var(--vi-gris); }
.vs-infos dt .v-ic { margin-top: 1px; color: var(--vi-violet-texte); }
.vs-infos dd { font: var(--vi-t-corps); color: var(--vi-encre); }
.vs-infos dd small { display: block; margin-top: 3px; font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: var(--vi-gris); }

/* le lieu, le rendez-vous, les étapes, le coin */
.vs-lieu-seul { max-width: 440px; }
.vs-rdv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vs-rdv-adr { display: flex; align-items: flex-start; gap: 8px; min-width: 0; flex: 1 1 240px; font: var(--vi-t-corps); }
.vs-rdv-adr .v-ic { margin-top: 1px; color: var(--vi-violet-texte); }
.vs-page .vs-mini-carte { height: 240px; border: 0; border-radius: var(--vi-rayon-lg); background: var(--vi-panneau-2); box-shadow: 0 0 0 1px var(--vi-bord); }
.vs-etapes { display: grid; gap: 14px; padding: 0; list-style: none; }
.vs-etapes li { display: flex; align-items: flex-start; gap: 12px; }
.vs-etape-ic { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--vi-violet-pale); color: var(--vi-violet-texte); }
.vs-etapes li > span:last-child { display: grid; gap: 1px; padding-top: 1px; }
.vs-etapes b { font: 600 15px/21px var(--vi-police-sans); }
.vs-etapes small { font: var(--vi-t-sous); color: var(--vi-gris); }
.vs-lieux { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
@media (max-width: 759px) {   /* au téléphone, les lieux du coin défilent de côté (une colonne de quatre photos mangeait trois écrans) */
  .vs-lieux { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 14px; margin: 0 calc(-1 * var(--vi-gouttiere)); padding: 2px var(--vi-gouttiere) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--vi-gouttiere); scrollbar-width: none; }
  .vs-lieux::-webkit-scrollbar { display: none; }
  .vs-lieux > * { scroll-snap-align: start; }
}

/* ═══ 8. LA FICHE : « Je viens » (la colonne collante, la barre du bas au téléphone) ══════════════════════ */

.vs-fiche-cote { display: none; }
.vs-action {
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: var(--vi-rayon-carte);
  background: var(--vi-panneau);
  box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-une);
}
.vs-action-quand { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); color: var(--vi-encre); }
.vs-action-quand .v-point { display: inline-block; opacity: 0; transform-origin: 50% 70%; }
.vs-vient .vs-action-quand .v-point, .vs-action-quand.est-touchee .v-point { opacity: 1; animation: v-naissance-point 360ms var(--vi-courbe-sortie); }
.vs-action-ou { margin-top: -8px; font: var(--vi-t-sous); color: var(--vi-gris); }
.vs-action .vs-rarete { margin-top: 0; }
.vs-action .v-bouton--viens { margin-top: 4px; }
.vs-action-note { font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: var(--vi-gris); text-align: center; }
@media (min-width: 960px) {
  .vs-fiche-cote { display: block; position: sticky; top: 88px; }
}

.vs-barre-bas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 96;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--vi-gouttiere) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgb(255 255 255 / 0.95);
  background: color-mix(in srgb, var(--vi-fond) 95%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 -1px 0 var(--vi-bord);
}
.vs-barre-bas-txt { flex: 1; min-width: 0; }
.vs-barre-bas-txt p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vs-barre-bas-txt .vs-action-quand { font: 600 16px/21px var(--vi-police-sans); letter-spacing: 0; }
.vs-barre-bas-txt p + p { font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: var(--vi-gris); }
.vs-barre-bas .v-bouton { flex: none; min-height: 52px; padding: 0 28px; }
body:has(.vs-barre-bas) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }   /* le pied reste lisible sous la barre */
@media (min-width: 960px) {
  .vs-barre-bas { display: none; }
  body:has(.vs-barre-bas) { padding-bottom: 0; }
  .vs-fiche { padding-bottom: var(--vi-esp-3xl); }
}

/* ═══ 9. L'ACCUEIL : le haut, sur « une seule nuit » ══════════════════════════════════════════════════════
   Les couleurs posées sur la nuit sont écrites en blanc et en VIOLET 300 (#C0B0FE) : elles ne changent pas avec le
   thème, comme le texte sur photo. */

.vs-nuit {
  position: relative;
  isolation: isolate;
  padding-bottom: 28px;
  background:
    radial-gradient(60% 70% at 88% 0%, rgb(124 58 237 / 0.38), rgb(124 58 237 / 0) 70%),
    radial-gradient(50% 60% at 0% 100%, rgb(124 58 237 / 0.2), rgb(124 58 237 / 0) 70%),
    var(--vi-nuit-fond);
  color: #fff;
}
.vs-nuit-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 30px; }
.vs-nuit-texte, .vs-nuit-nuage { min-width: 0; }
.vs-nuit-eti {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--vi-rayon-pilule);
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  font: 600 13px/17px var(--vi-police-sans);
  color: rgb(255 255 255 / 0.9);
}
.vs-nuit-eti .v-ic { color: var(--vi-violet-300); }
.vs-nuit-titre { font: 700 34px/38px var(--vi-police-sans); letter-spacing: -0.02em; color: #fff; }
.vs-nuit-titre em { display: block; margin-top: 6px; font: var(--vi-t-accent); letter-spacing: var(--vi-t-accent-approche); color: var(--vi-violet-300); }
.vs-nuit-sous { margin-top: 14px; font: var(--vi-t-chapo); color: rgb(255 255 255 / 0.78); }

.vs-cherche {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 580px;
  margin-top: 22px;
  padding: 6px 6px 6px 46px;
  border-radius: var(--vi-rayon-pilule);
  background: #fff;
  box-shadow: 0 10px 30px rgb(6 2 20 / 0.35);
  transition: box-shadow var(--vi-duree-court) var(--vi-courbe-douce);
}
.vs-cherche:focus-within { box-shadow: 0 0 0 3px var(--vi-violet-300), 0 10px 30px rgb(6 2 20 / 0.35); }
.vs-cherche-ic { position: absolute; left: 16px; color: #6B6480; pointer-events: none; }
.vs-cherche input { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; background: transparent; color: #171226; font: 500 16px/21px var(--vi-police-sans); outline: none; -webkit-appearance: none; appearance: none; }
.vs-cherche input::placeholder { color: #6B6480; opacity: 1; }
.vs-cherche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.vs-cherche-bouton { min-height: 48px; padding: 0 20px; box-shadow: none; }
.vs-cherche .v7-sugg { font-family: var(--vi-police-sans); }   /* les suggestions de v7.js (le socle les refait) */

.vs-nuit-compte { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 16px; font: var(--vi-t-sous); color: rgb(255 255 255 / 0.72); }
.vs-nuit-compte a { color: rgb(255 255 255 / 0.86); text-decoration: none; border-radius: 6px; }
.vs-nuit-compte a:hover { color: #fff; }
.vs-nuit-compte a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vs-nuit-compte b { margin-right: 4px; font: 700 18px/1 var(--vi-police-sans); color: #fff; font-variant-numeric: tabular-nums; }

/* le nuage d'étiquettes (v7_nuage_html, lib7.php) : dans la voix du kit ; il ne flotte plus sans fin (trois boucles au
   plus à l'écran, et elles disent « maintenant ») ; les cercles portent leur « plein » sous le blanc (DA C5) */
.vs-accueil .v7-nuage { padding: 16px; border: 0; border-radius: var(--vi-rayon-xl); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); font-family: var(--vi-police-sans); }
.vs-accueil .v7-nuage-aide { font: var(--vi-t-legende); color: rgb(255 255 255 / 0.78); }
.vs-accueil .v7-nuage-champ .v7-eti { animation: none; }
.vs-accueil .v7-eti { font: 600 14px/18px var(--vi-police-sans); letter-spacing: 0; }
/* (!important : la couleur vive est posée par l'attribut style de l'étiquette, que seule une déclaration importante dépasse) */
.vs-accueil .v7-eti[data-k="c-filles"] { --c: var(--vi-cercle-filles-plein) !important; }
.vs-accueil .v7-eti[data-k="c-soeurs"] { --c: var(--vi-cercle-soeurs-plein) !important; }
.vs-accueil .v7-eti[data-k="c-musulman"] { --c: var(--vi-cercle-musulman-plein) !important; }
.vs-accueil .v7-eti[data-k="c-chretien"] { --c: var(--vi-cercle-chretien-plein) !important; }
.vs-accueil .v7-eti[data-k="c-juif"] { --c: var(--vi-cercle-juif-plein) !important; }
.vs-accueil .v7-eti[data-k="c-etudiants"] { --c: var(--vi-cercle-etudiants-plein) !important; }
.vs-accueil .v7-eti[data-k="c-parents"] { --c: var(--vi-cercle-parents-plein) !important; }
.vs-accueil .v7-eti[data-k="c-sans_alcool"] { --c: var(--vi-cercle-sans_alcool-plein) !important; }
.vs-accueil .v7-eti[data-k="c-seniors"] { --c: var(--vi-cercle-seniors-plein) !important; }
.vs-accueil .v7-eti[data-k="b-devoiler"] { --c: var(--vi-cercle-soeurs-texte) !important; }
.vs-accueil .v7-eti[data-k="m-ligne"] { --c: var(--vi-plein-enligne) !important; }
.vs-accueil .v7-nuage-res { border-radius: var(--vi-rayon-lg); background: var(--vi-panneau); color: var(--vi-encre); font-family: var(--vi-police-sans); }
.vs-accueil .v7-nres-tete b, .vs-accueil .v7-nres-txt b { font-family: var(--vi-police-sans); font-weight: 600; letter-spacing: 0; }
.vs-accueil .v7-nres-tete b { color: var(--vi-encre); }
.vs-accueil .v7-nres-img i { font: 700 20px/1 var(--vi-police-sans); }
.vs-accueil .v7-nres-txt small, .vs-accueil .v7-nres-genre { color: var(--vi-gris); }
.vs-accueil .v7-nres-genre { background: var(--vi-panneau-2); font-weight: 600; font-size: 12px; }
.vs-accueil .v7-nres-item:hover { background: var(--vi-panneau-2); }
.vs-accueil .v7-nres-tout { color: var(--vi-violet-texte); font-weight: 600; }
.vs-accueil .v7-nres-vide { color: var(--vi-gris); }

/* les six portes : du verre sur la nuit, une icône Phosphor, une seule couleur (fin de l'arc-en-ciel) */
.vs-portes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.vs-porte {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 14px;
  border-radius: var(--vi-rayon-lg);
  background: rgb(255 255 255 / 0.07);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  color: #fff;
  text-decoration: none;
  transition: background-color var(--vi-duree-court) var(--vi-courbe-douce), transform var(--vi-duree-court) var(--vi-courbe-sortie);
  -webkit-tap-highlight-color: transparent;
}
.vs-porte:hover { background: rgb(255 255 255 / 0.12); }
.vs-porte:active { transform: scale(var(--vi-appui-surface)); transition-duration: var(--vi-duree-micro); }
.vs-porte:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vs-porte-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 13px; background: rgb(255 255 255 / 0.12); color: var(--vi-violet-300); }
.vs-porte b { font: 600 16px/21px var(--vi-police-sans); }
.vs-porte small { font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: rgb(255 255 255 / 0.72); }
@media (max-width: 759px) {   /* au téléphone, six portes compactes sur deux rangs ; la phrase reste dite au lecteur d'écran */
  .vs-portes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vs-porte { position: relative; justify-items: center; padding: 12px 6px; text-align: center; }
  .vs-porte-ic { margin-bottom: 4px; }
  .vs-porte b { font-size: 14px; line-height: 18px; }
  .vs-porte small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

@media (min-width: 760px) {
  .vs-nuit { margin: 12px 12px 0; border-radius: var(--vi-rayon-xl); padding-bottom: 36px; }
  .vs-nuit-titre { font: var(--vi-t-signature); letter-spacing: var(--vi-t-signature-approche); }
  .vs-portes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .vs-nuit-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 48px; padding-top: 56px; }
}
@media (min-width: 1100px) {
  .vs-portes { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 40px; }
}
@media (min-width: 1264px) {
  .vs-nuit { max-width: 1240px; margin: 12px auto 0; }
}

/* ═══ 10. L'ACCUEIL : la carte, la semaine, les envies ════════════════════════════════════════════════════ */

.vs-carte .vs-carte-filtres { margin-bottom: 12px; }
.vs-page .vs-carte-boite { border-radius: var(--vi-rayon-xl); background: var(--vi-lavis); box-shadow: 0 0 0 1px var(--vi-bord); }
.vs-page .vs-carte-repos { font-family: var(--vi-police-sans); color: var(--vi-encre); text-decoration: none; }
.vs-page .vs-carte-repos b { font: 600 18px/24px var(--vi-police-sans); }
.vs-page .vs-carte-repos small { font: var(--vi-t-sous); color: var(--vi-gris); }
.vs-carte-repos-ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 19px; background: var(--vi-violet-fond); color: #fff; box-shadow: var(--vi-ombre-lueur); }

#sorties .vs-semaine { margin: 6px 0 16px; }
.vs-rail--semaine { padding-top: 6px; }

.vs-rangee + .vs-rangee { margin-top: 20px; }
.vs-rangee-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.vs-rangee-titre { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 18px/24px var(--vi-police-sans); letter-spacing: -0.01em; color: var(--vi-encre); }
.vs-rangee-titre small { font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: var(--vi-gris); }
.vs-rail--vignettes { grid-auto-columns: min(44vw, 210px); gap: 12px; }

/* ═══ 11. L'ACCUEIL : l'en ligne, rencontrer, les recherches, avant d'y aller, lancer ════════════════════ */

.vs-enligne {
  display: grid;
  gap: 22px;
  padding: 26px 20px;
  overflow: hidden;
  border-radius: var(--vi-rayon-xl);
  background: radial-gradient(70% 90% at 100% 0%, rgb(124 58 237 / 0.3), rgb(124 58 237 / 0) 70%), var(--vi-nuit-papier);
  color: #fff;
}
.vs-enligne-texte { min-width: 0; }
.vs-enligne-texte .vs-nuit-eti .v-ic { color: var(--vi-cercle-en_ligne-vif); }
.vs-enligne-titre { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font: var(--vi-t-titre); letter-spacing: var(--vi-t-titre-approche); color: #fff; }
.vs-enligne-titre em { font: var(--vi-t-accent2); letter-spacing: var(--vi-t-accent2-approche); color: var(--vi-violet-300); }
.vs-enligne-sous { margin-top: 10px; font: var(--vi-t-corps); color: rgb(255 255 255 / 0.78); }
.vs-enligne-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vs-bouton-verre { --b-fond: rgb(255 255 255 / 0.14); --b-encre: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
.vs-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vs-format { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 14px; border-radius: var(--vi-rayon-md); background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); color: #fff; text-decoration: none; transition: background-color var(--vi-duree-court) var(--vi-courbe-douce); }
.vs-format:hover { background: rgb(255 255 255 / 0.12); }
.vs-format:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vs-format-ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 12px; background: rgb(30 140 255 / 0.2); color: var(--vi-cercle-en_ligne-vif); }
.vs-format b { font: 600 15px/20px var(--vi-police-sans); }
.vs-format small { font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: rgb(255 255 255 / 0.7); }
.vs-enligne-rail, .vs-enligne-vide { grid-column: 1 / -1; }
.vs-enligne-vide { display: flex; align-items: center; gap: 8px; font: var(--vi-t-corps); color: rgb(255 255 255 / 0.8); }
@media (min-width: 760px) { .vs-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .vs-enligne { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 32px; padding: 40px; } }

.vs-liens { display: grid; gap: 10px; }
.vs-lien-carte {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px;
  border-radius: var(--vi-rayon-lg);
  background: var(--vi-panneau);
  box-shadow: 0 0 0 1px var(--vi-bord);
  color: var(--vi-encre);
  text-decoration: none;
  transition: box-shadow var(--vi-duree-rapide) var(--vi-courbe-sortie), transform var(--vi-duree-court) var(--vi-courbe-sortie);
  -webkit-tap-highlight-color: transparent;
}
.vs-lien-carte:hover { box-shadow: 0 0 0 1px var(--vi-trait), var(--vi-ombre-carte); }
.vs-lien-carte:active { transform: scale(var(--vi-appui-surface)); transition-duration: var(--vi-duree-micro); }
.vs-lien-carte:focus-visible { outline: 3px solid var(--vi-violet); outline-offset: 2px; }
.vs-lien-ic { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vi-violet-pale); color: var(--vi-violet-texte); }
.vs-lien-ic--cercle { background: var(--c-pale); color: var(--c-texte); }
.vs-lien-carte > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.vs-lien-carte b { font: 600 15px/20px var(--vi-police-sans); }
.vs-lien-carte small { font: var(--vi-t-sous); color: var(--vi-gris); }
.vs-lien-fl { color: var(--vi-gris-2); }
.vs-place { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 12px; padding: 18px; border-radius: var(--vi-rayon-lg); background: var(--vi-nuit-papier); color: #fff; text-decoration: none; transition: transform var(--vi-duree-court) var(--vi-courbe-sortie); }
.vs-place:active { transform: scale(var(--vi-appui-surface)); }
.vs-place:focus-visible { outline: 3px solid var(--vi-violet); outline-offset: 2px; }
.vs-place-ic { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: rgb(255 255 255 / 0.12); color: var(--vi-violet-300); }
.vs-place-txt { display: grid; flex: 1 1 220px; min-width: 0; }
.vs-place-txt b { font: 700 18px/24px var(--vi-police-sans); }
.vs-place-txt small { font: var(--vi-t-corps); color: rgb(255 255 255 / 0.76); }
.vs-place-cta { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/20px var(--vi-police-sans); color: var(--vi-violet-300); }
@media (min-width: 760px) { .vs-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vs-liens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vs-questions { display: grid; gap: 10px; }
.vs-question { display: grid; align-content: space-between; gap: 6px; min-height: 72px; padding: 14px 16px; border-radius: var(--vi-rayon-lg); background: var(--vi-panneau-2); color: var(--vi-encre); text-decoration: none; transition: background-color var(--vi-duree-court) var(--vi-courbe-douce), transform var(--vi-duree-court) var(--vi-courbe-sortie); }
.vs-question:hover { background: var(--vi-violet-pale); }
.vs-question:active { transform: scale(var(--vi-appui-surface)); }
.vs-question:focus-visible { outline: 3px solid var(--vi-violet); outline-offset: 2px; }
.vs-question b { font: 600 16px/21px var(--vi-police-sans); }
.vs-question span { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/17px var(--vi-police-sans); color: var(--vi-violet-texte); }
@media (min-width: 640px) { .vs-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .vs-questions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vs-page .vs-ville { display: inline-flex; gap: 2px; margin: 0; padding: 4px; border-radius: var(--vi-rayon-pilule); background: var(--vi-panneau-2); }
.vs-page .vs-ville button { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--vi-rayon-pilule); background: transparent; color: var(--vi-gris); font: 600 14px/18px var(--vi-police-sans); cursor: pointer; }
.vs-page .vs-ville button.on { background: var(--vi-panneau); color: var(--vi-encre); box-shadow: 0 1px 3px rgb(23 18 38 / 0.12); }
.vs-page .vs-ville button:focus-visible { outline: 3px solid var(--vi-violet); outline-offset: 1px; }
.vs-besoins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vs-besoin { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 16px; border-radius: var(--vi-rayon-lg); background: var(--vi-panneau); box-shadow: 0 0 0 1px var(--vi-bord); color: var(--vi-encre); text-decoration: none; transition: box-shadow var(--vi-duree-rapide) var(--vi-courbe-sortie), transform var(--vi-duree-court) var(--vi-courbe-sortie); }
.vs-besoin:hover { box-shadow: 0 0 0 1px var(--vi-trait), var(--vi-ombre-carte); }
.vs-besoin:active { transform: scale(var(--vi-appui-surface)); }
.vs-besoin:focus-visible { outline: 3px solid var(--vi-violet); outline-offset: 2px; }
.vs-besoin-ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; background: var(--vi-violet-pale); color: var(--vi-violet-texte); }
.vs-besoin-n { font: var(--vi-t-titre); letter-spacing: var(--vi-t-titre-approche); }
.vs-besoin b { font: 500 14px/19px var(--vi-police-sans); color: var(--vi-gris); }
.vs-plus-bas { margin-top: 6px; }
@media (min-width: 760px) { .vs-besoins { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vs-lancer { display: grid; gap: 12px; }
.vs-lance { display: grid; align-content: start; gap: 4px; padding: 20px; border-radius: var(--vi-rayon-carte); background: var(--vi-panneau); box-shadow: 0 0 0 1px var(--vi-bord); color: var(--vi-encre); text-decoration: none; transition: box-shadow var(--vi-duree-rapide) var(--vi-courbe-sortie), transform var(--vi-duree-court) var(--vi-courbe-sortie); }
.vs-lance:hover { box-shadow: 0 0 0 1px var(--vi-trait), var(--vi-ombre-carte); }
.vs-lance:active { transform: scale(var(--vi-appui-surface)); }
.vs-lance:focus-visible { outline: 3px solid var(--vi-violet); outline-offset: 2px; }
.vs-lance-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 15px; background: var(--vi-violet-pale); color: var(--vi-violet-texte); }
.vs-lance small { font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: var(--vi-gris); }
.vs-lance b { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); }
.vs-lance-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 600 15px/20px var(--vi-police-sans); color: var(--vi-violet-texte); }
@media (min-width: 760px) { .vs-lancer { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ═══ 12. LE MOUVEMENT RÉDUIT (en plus de kit-jetons.css § 8 et composants.css § 12) ══════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .vs-plus .v-ic, .vs-faq summary .v-ic, .vs-porte, .vs-lien-carte, .vs-question, .vs-besoin, .vs-lance, .vs-place, .vs-verre, .vs-quatre-case { transition: none !important; }
  .vs-plus:hover .v-ic { transform: none; }
  .vs-vient .vs-action-quand .v-point, .vs-action-quand.est-touchee .v-point { animation: none; }
}
html.v-sans-mouvement .vs-plus:hover .v-ic { transform: none; }