/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   kit-ultime/pages/cercles.css : les pages CERCLES DE CONFIANCE, EN LIGNE, COMMENT ON VÉRIFIE et la VITRINE DE L'APP
   (viens.app), au niveau de l'app ultime (chantier « site-cercles », 13 oct. 2026).

   Se charge APRÈS kit-polices.css, kit-jetons.css et composants/composants.css (cercles-kit.php : vc_kit_feuilles()).
   Tout est sous .vc (la racine de ces pages) : rien ne fuit sur les autres pages, ni sur la barre et le pied de lib7.
   Les couleurs, les rôles, les rayons et le mouvement sont ceux des jetons (--vi-*) : le soir suit tout seul.

   Les règles tenues (BRIEF, DA-FINALE) : Instrument Sans partout ; l'italique serif = un accent de 2 à 5 mots, 26 px
   et plus, violet sur papier, lilas sur la nuit ; le romain serif n'est pas employé ici (pas de titre de sortie ni de
   nom de lieu en 34 dans ces pages) ; gras courant 600, 700 pour les titres ; pas de kicker en capitales ; pas de
   glyphe en guise d'icône (Phosphor partout) ; aucun nombre de membres ni de personnes ; les cercles « en pierres »
   (plein sous le blanc, texte sur le blanc, pâle pour la tuile) ; le mouvement s'arrête avec prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */


/* ═══ 0. LA RACINE ═════════════════════════════════════════════════════════════════════════════════════════════ */

.vc {
  /* les cartes de lib7 posées dans ces pages (sorties, lieux) prennent la police et le violet de l'app ; leurs couleurs
     restent les leurs (le chantier « sorties » / « lieux » les refait) */
  --titre: var(--vi-police-sans);
  --texte: var(--vi-police-sans);
  --violet: var(--vi-violet);
  --violet2: var(--vi-violet);
  font: var(--vi-t-lecture);
  font-family: var(--vi-police-sans);
  color: var(--vi-encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
body:has(.vc) { background: var(--vi-fond); }
/* la carte de lieu de lib7 est blanche dans les deux thèmes : son texte garde l'encre de lib7 (le soir, l'encre des jetons
   devient claire et la carte serait illisible) — à retirer quand le chantier « lieux » la passera aux jetons */
.vc .v7-lieu { color: var(--encre, #16112A); }
/* (intégration, 13 oct.) les titres des composants du kit (v-affiche-titre : Serif romain 34/38, v-vitrine-nom…) gardent
   leur police : sans ce :not(), les affiches de sortie des pages de cercle passaient en Sans 400 34 px */
.vc :where(h1, h2, h3):not([class^="v-"]):not([class*=" v-"]) { margin: 0; font-family: var(--vi-police-sans); text-wrap: balance; }
.vc :where(h1, h2, h3) { margin: 0; }
.vc :where(p) { margin: 0; }
.vc :focus-visible { outline: 3px solid var(--vi-violet); outline-offset: 2px; border-radius: 10px; }
.vc .v-point { font-family: var(--vi-police-marque); font-weight: 800; color: var(--vi-violet-texte); }

.vc-in { max-width: var(--vi-largeur-lecture); margin: 0 auto; padding: 0 var(--vi-gouttiere); }
.vc-sec { margin-top: var(--vi-esp-2xl); }
@media (min-width: 960px) { .vc-sec { margin-top: var(--vi-esp-3xl); } }



/* ═══ 1. LE HAUT DE PAGE ═══════════════════════════════════════════════════════════════════════════════════════
   Le lavis de l'app (BG_WASH) ou la teinte pâle du cercle ; l'en-tête d'onglet de la DA (§ 2.4) : la signature
   « Les cercles de confiance. » (point du logo), puis l'accent en italique à la ligne. */

.vc-haut { position: relative; padding: 4px 0 var(--vi-esp-xl); background: var(--vi-lavis); }
.vc-haut--cercle { background: linear-gradient(180deg, var(--c-pale) 0%, color-mix(in srgb, var(--c-pale) 45%, var(--vi-fond)) 62%, var(--vi-fond) 100%); }
.vc-haut-grille { display: grid; gap: var(--vi-esp-lg); align-items: center; }
.vc-haut-grille > *, .vc-app-haut-in > *, .vc-app-cercles-in > * { min-width: 0; }
@media (min-width: 960px) {
  .vc-haut { padding-bottom: var(--vi-esp-2xl); }
  .vc-haut-grille { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--vi-esp-2xl); }
}

/* le fil d'Ariane de lib7, à la voix des légendes */
.vc .v7-ariane { padding: 16px 0 0; margin: 0 0 20px; font: var(--vi-t-legende); letter-spacing: var(--vi-t-legende-approche); color: var(--vi-gris); }
.vc .v7-ariane a { color: var(--vi-gris); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--vi-duree-court) var(--vi-courbe-douce), text-decoration-color var(--vi-duree-court); }
.vc .v7-ariane a:hover { color: var(--vi-encre); text-decoration-color: currentColor; }
@media (min-width: 960px) { .vc .v7-ariane { margin-bottom: 32px; } }

.vc-h1 { color: var(--vi-encre); }
.vc-h1-sans { display: block; font: var(--vi-t-signature); letter-spacing: var(--vi-t-signature-approche); }
.vc-accent { display: block; margin-top: 2px; font: var(--vi-t-accent); letter-spacing: var(--vi-t-accent-approche); color: var(--vi-violet-texte); }
/* le motif « en-tête de page » au téléphone (titre 28 puis l'accent 30 sur la même ligne de base), la une dès 760 px */
.vc-h1--page .vc-h1-sans { display: inline; font: var(--vi-t-titre); letter-spacing: var(--vi-t-titre-approche); }
.vc-h1--page .vc-accent { display: inline; font: var(--vi-t-accent2); letter-spacing: var(--vi-t-accent2-approche); }
@media (min-width: 760px) {
  .vc-h1--page .vc-h1-sans { display: block; font: var(--vi-t-signature); letter-spacing: var(--vi-t-signature-approche); }
  .vc-h1--page .vc-accent { display: block; font: var(--vi-t-accent); letter-spacing: var(--vi-t-accent-approche); }
}

.vc-sous { max-width: 36em; margin-top: 14px; font: 400 16px/23px var(--vi-police-sans); color: var(--vi-gris); }
.vc-sous b { font-weight: 600; color: var(--vi-encre); }
@media (min-width: 760px) { .vc-sous { margin-top: 18px; font: var(--vi-t-chapo); } }

.vc-gestes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--vi-esp-lg); }
@media (max-width: 479px) { .vc-gestes .v-bouton { flex: 1 1 100%; } }
.vc .v-bouton { text-decoration: none; }
.vc .v-marque-tuile span { margin-top: -1px; }


/* ═══ 2. LES SECTIONS ══════════════════════════════════════════════════════════════════════════════════════════ */

.vc-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.vc-tete > div { flex: 1 1 420px; min-width: 0; }
.vc-tete h2 { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); }
.vc-tete p { margin-top: 4px; font: var(--vi-t-corps); color: var(--vi-gris); }
@media (min-width: 760px) { .vc-tete h2 { font: var(--vi-t-titre); letter-spacing: var(--vi-t-titre-approche); } .vc-tete { margin-bottom: 22px; } }
.vc-tete h2 em { font: var(--vi-t-accent3); letter-spacing: var(--vi-t-accent3-approche); color: var(--vi-violet-texte); }
@media (min-width: 760px) { .vc-tete h2 em { font: var(--vi-t-accent2); letter-spacing: var(--vi-t-accent2-approche); } }

.vc-voir {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  color: var(--vi-violet-texte); font: 600 15px/21px var(--vi-police-sans); white-space: nowrap; text-decoration: none;
}
.vc-voir .v-ic { transition: transform var(--vi-duree-court) var(--vi-courbe-sortie); }
@media (hover: hover) { .vc-voir:hover .v-ic { transform: translateX(3px); } }
.vc-voir:active { opacity: var(--vi-appui-opacite); }

/* la phrase qui nomme, sous un titre de rang (« Proposées par Lolo et Nezuko ») : des visages, jamais un compte */
.vc-gens { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; }
.vc-gens .v-gens-phrase b { font-weight: 600; }

/* le rang des sorties (les cartes de lib7) et la place libre « Lance la tienne » */
.vc .vc-rail { margin: 0 calc(var(--vi-gouttiere) * -1); padding-left: var(--vi-gouttiere); padding-right: var(--vi-gouttiere); scroll-padding-inline: var(--vi-gouttiere); }
@media (min-width: 1248px) { .vc .vc-rail { margin: 0; padding-left: 2px; padding-right: 2px; } }
.vc-lancer { aspect-ratio: auto; min-height: 330px; }

/* l'état vide : la tuile du cercle, ce qu'il en est, le geste */
.vc-vide {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px;
  padding: 18px; border-radius: var(--vi-rayon-lg); background: var(--vi-panneau-2);
}
.vc-vide b { display: block; font: var(--vi-t-carte); }
.vc-vide p { margin-top: 2px; font: var(--vi-t-sous); color: var(--vi-gris); }
.vc-vide-tuile { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: var(--c-pale, var(--vi-violet-pale)); color: var(--c-texte, var(--vi-violet-texte)); }
.vc-vide .v-bouton { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 640px) { .vc-vide { grid-template-columns: auto minmax(0, 1fr) auto; padding: 20px 22px; } .vc-vide .v-bouton { grid-column: auto; } }

/* les liens qui prolongent (rubriques du guide, villes) : des lignes, une flèche dessinée */
.vc-liens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.vc-liens a {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px 10px 16px;
  border-radius: var(--vi-rayon-md); background: var(--vi-panneau); box-shadow: inset 0 0 0 1px var(--vi-bord);
  color: var(--vi-encre); font: 600 15px/20px var(--vi-police-sans); text-decoration: none;
  transition: background-color var(--vi-duree-court) var(--vi-courbe-douce), transform var(--vi-duree-court) var(--vi-courbe-sortie);
}
.vc-liens a > span:first-child { flex: 1 1 auto; min-width: 0; }
.vc-liens small { flex: none; font: 500 13px/17px var(--vi-police-sans); color: var(--vi-gris); font-variant-numeric: tabular-nums; }
.vc-liens .v-ic { color: var(--vi-gris); }
.vc-liens a:active { transform: scale(var(--vi-appui-surface)); }
@media (hover: hover) { .vc-liens a:hover { background: var(--vi-panneau-2); } }
.vc-sous-titre { margin: 26px 0 10px; font: 600 15px/21px var(--vi-police-sans); color: var(--vi-encre); }

/* un paragraphe à lire (≈ 60 signes par ligne) */
.vc-texte { max-width: 62ch; display: grid; gap: 12px; }
.vc-texte p { font: var(--vi-t-lecture); color: var(--vi-encre); }


/* ═══ 3. LES QUESTIONS ═════════════════════════════════════════════════════════════════════════════════════════
   Fermées, une ou deux phrases ; le chevron tourne de 180° (400 ms à l'ouverture, plus vite à la fermeture). */

.vc-faq { display: grid; max-width: 820px; border-top: 1px solid var(--vi-bord); }
.vc-faq details { border-bottom: 1px solid var(--vi-bord); }
.vc-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 2px;
  list-style: none; cursor: pointer; font: 600 16px/22px var(--vi-police-sans); color: var(--vi-encre);
  -webkit-tap-highlight-color: transparent;
}
.vc-faq summary::-webkit-details-marker { display: none; }
.vc-faq summary:focus-visible { outline-offset: 0; }
.vc-faq-ic { color: var(--vi-gris); transition: transform var(--vi-duree-moyen) var(--vi-courbe-douce); }
.vc-faq details[open] .vc-faq-ic { transform: rotate(180deg); transition-duration: var(--vi-duree-lent); transition-timing-function: var(--vi-courbe-sortie); }
.vc-faq details p { max-width: 62ch; padding: 0 2px 18px; font: var(--vi-t-lecture); color: var(--vi-gris); }
@media (hover: hover) { .vc-faq summary:hover { color: var(--vi-violet-texte); } }


/* ═══ 4. LA PORTE DES CERCLES DE FEMMES ════════════════════════════════════════════════════════════════════════
   Écrite au lieu de la capture de l'ancienne app : le cadenas sur un disque blanc, la phrase de la règle. */

.vc-porte { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--vi-rayon-lg); background: var(--c-pale); color: var(--vi-encre); }
.vc-porte-ic { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--vi-panneau); color: var(--c-texte); box-shadow: 0 2px 8px color-mix(in srgb, var(--c-vif) 22%, transparent); }
.vc-porte p { display: grid; gap: 2px; min-width: 0; }
.vc-porte b { font: 600 16px/21px var(--vi-police-sans); color: var(--vi-encre); }
.vc-porte span:not(.vc-porte-ic) { font: var(--vi-t-sous); color: var(--vi-gris); }



/* ═══ 5. LES CERCLES : LE HUB ══════════════════════════════════════════════════════════════════════════════════ */

.vc-rail-cercles { margin: var(--vi-esp-lg) calc(var(--vi-gouttiere) * -1) 0; padding-left: calc(var(--vi-gouttiere) - 9px); padding-right: var(--vi-gouttiere); scroll-padding-inline: calc(var(--vi-gouttiere) - 9px); }
@media (min-width: 760px) { .vc-rail-cercles { flex-wrap: wrap; margin-left: -9px; margin-right: 0; padding: 0 0 4px; gap: 6px 2px; } }
.vc-tete + .vc-rail-cercles { margin-top: 0; }
.vc .v-jeton { text-decoration: none; }
.vc .v-jeton:focus-visible { outline: none; }
@media (hover: hover) { .vc .v-jeton:hover .v-jeton-tuile { transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, var(--c-vif) 26%, transparent); } }

/* comment ça protège : la porte, puis trois lignes à icône (plus de ronds numérotés) */
.vc-protege { display: grid; gap: 14px; }
@media (min-width: 960px) { .vc-protege { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--vi-esp-lg); align-items: start; } }
.vc-protege .vc-porte { padding: 22px; }
.vc-points { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vc-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; align-items: start; padding: 12px 0; }
.vc-points li + li { border-top: 1px solid var(--vi-bord); }
.vc-points-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--vi-violet-pale); color: var(--vi-violet-texte); grid-row: span 2; }
.vc-points b { font: var(--vi-t-carte); padding-top: 1px; }
.vc-points p { font: var(--vi-t-sous); color: var(--vi-gris); }

/* les 9 vitrines (VitrineCercle de l'app) : toute la carte mène au cercle */
.vc-vitrines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.vc .v-vitrine { align-content: start; gap: 14px; transition: transform var(--vi-duree-court) var(--vi-courbe-sortie), box-shadow var(--vi-duree-rapide) var(--vi-courbe-sortie); }
.vc .v-vitrine:active { transform: scale(var(--vi-appui-surface)); }
@media (hover: hover) { .vc .v-vitrine:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-une); } }
.vc .v-vitrine:has(.vc-vitrine-lien:focus-visible) { outline: 3px solid var(--vi-violet); outline-offset: 3px; }
.vc-vitrine-lien { color: inherit; text-decoration: none; outline: none; }
.vc-vitrine-lien::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.vc .v-vitrine-nom { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); }
.vc-vitrine-porte { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px 5px 8px; border-radius: var(--vi-rayon-pilule); background: var(--c-pale); color: var(--c-texte); font: var(--vi-t-etiquette); letter-spacing: var(--vi-t-etiquette-approche); }
.vc-vitrine-porte--ouverte { background: var(--vi-panneau-2); color: var(--vi-gris); }
.vc .v-vitrine-reperes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.vc .v-vitrine-reperes li { padding: 9px 12px; }
.vc .v-vitrine-reperes li > span:last-child { font: 600 14px/18px var(--vi-police-sans); }
.vc-vitrines .v-vitrine { display: flex; flex-direction: column; }
.vc-vitrines .v-vitrine > .vc-vitrine-porte { align-self: flex-start; }
.vc-vitrine-pied { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 2px; color: var(--vi-violet-texte); font: 600 14px/19px var(--vi-police-sans); }
.vc-vitrine-pied .v-ic { transition: transform var(--vi-duree-court) var(--vi-courbe-sortie); }
@media (hover: hover) { .vc .v-vitrine:hover .vc-vitrine-pied .v-ic { transform: translateX(3px); } }

/* grand écran : trois cercles posés à droite du titre, comme des autocollants (décor muet) */
.vc-collage { display: none; }
@media (min-width: 960px) {
  .vc-haut-grille--hub { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .vc-collage { position: relative; display: block; height: 372px; }
  .vc-collage-carte {
    position: absolute; display: flex; align-items: center; gap: 14px; width: min(92%, 340px); padding: 16px 20px 16px 16px;
    border-radius: var(--vi-rayon-lg); background: var(--vi-panneau); box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-une);
  }
  .vc-collage-carte .v-vitrine-tuile { width: 56px; height: 56px; }
  .vc-collage-carte > span:last-child { display: grid; gap: 6px; justify-items: start; }
  .vc-collage-carte b { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); }
  .vc-collage-1 { top: 6px; left: 0; transform: rotate(-4deg); }
  .vc-collage-2 { top: 134px; right: 0; transform: rotate(3deg); z-index: 1; }
  .vc-collage-3 { top: 262px; left: 6%; transform: rotate(-1.5deg); }
}


/* ═══ 6. UN CERCLE ═════════════════════════════════════════════════════════════════════════════════════════════ */

/* la vitrine du cercle, posée dans le haut comme l'objet de la page (elle ne se touche pas : elle présente) */
.vc-haut .v-vitrine { box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-une); background: var(--vi-panneau); }
.vc-haut .v-vitrine-tuile { width: 64px; height: 64px; border-radius: 22px; }
.vc-haut .v-vitrine-phrase { font: var(--vi-t-sous); }
@media (min-width: 960px) { .vc-haut .v-vitrine { padding: 24px; gap: 18px; } }


/* ═══ 7. EN LIGNE ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* les six formats en tuiles (le bleu « En ligne » de l'app : pâle pour la tuile, texte pour l'icône) */
.vc-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .vc-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .vc-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.vc-format {
  position: relative; display: grid; align-content: start; gap: 4px; height: 100%; padding: 14px; min-height: 132px;
  border-radius: var(--vi-rayon-lg); background: var(--vi-panneau); box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-carte);
  color: var(--vi-encre); text-decoration: none;
  transition: transform var(--vi-duree-court) var(--vi-courbe-sortie), box-shadow var(--vi-duree-rapide) var(--vi-courbe-sortie);
}
.vc-format-tuile { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 15px; background: var(--c-pale); color: var(--c-texte); }
.vc-format b { font: var(--vi-t-carte); }
.vc-format small { font: var(--vi-t-sous); color: var(--vi-gris); }
.vc-format:active { transform: scale(var(--vi-appui-surface)); }
@media (hover: hover) { .vc-format:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-une); } }
@media (min-width: 960px) { .vc-format { padding: 16px; min-height: 148px; } }

/* une ligne qui mène ailleurs (« Rencontrer du monde en ligne ») */
.vc-ligne-vers {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: var(--vi-rayon-lg);
  background: var(--c-pale, var(--vi-violet-pale)); color: var(--vi-encre); text-decoration: none;
  transition: transform var(--vi-duree-court) var(--vi-courbe-sortie);
}
.vc-ligne-vers > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.vc-ligne-vers b { display: block; font: var(--vi-t-carte); }
.vc-ligne-vers small { display: block; font: var(--vi-t-sous); color: var(--vi-gris); }
.vc-ligne-vers-ic { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 15px; background: var(--vi-panneau); color: var(--c-texte, var(--vi-violet-texte)); }
.vc-ligne-vers > .v-ic { color: var(--c-texte, var(--vi-violet-texte)); transition: transform var(--vi-duree-court) var(--vi-courbe-sortie); }
.vc-ligne-vers:active { transform: scale(var(--vi-appui-surface)); }
@media (hover: hover) { .vc-ligne-vers:hover > .v-ic { transform: translateX(3px); } }

/* la porte, avec sa phrase et son lien (Entre filles, en ligne aussi) */
.vc-bloc-porte { display: grid; gap: 14px; padding: 20px; border-radius: var(--vi-rayon-xl); background: color-mix(in srgb, var(--c-pale) 55%, var(--vi-fond)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-vif) 18%, transparent); }
.vc-bloc-porte h2 { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); }
.vc-bloc-porte p { font: var(--vi-t-corps); color: var(--vi-gris); }
.vc-bloc-porte h2 + p { margin-top: 6px; }
.vc-bloc-porte .vc-voir { margin-top: 6px; }
.vc-bloc-porte .vc-porte { background: var(--vi-panneau); }
@media (min-width: 760px) { .vc-bloc-porte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 28px; } }

/* lance ta session : deux cartes, une action chacune */
.vc-lancer2 { display: grid; gap: 12px; }
@media (min-width: 760px) { .vc-lancer2 { grid-template-columns: 1fr 1fr; gap: 16px; } }
.vc-carte-geste {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 18px;
  border-radius: var(--vi-rayon-lg); background: var(--vi-panneau); box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-carte);
  color: var(--vi-encre); text-decoration: none;
  transition: transform var(--vi-duree-court) var(--vi-courbe-sortie), box-shadow var(--vi-duree-rapide) var(--vi-courbe-sortie);
}
.vc-carte-geste-tuile { grid-row: span 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 19px; background: var(--c-pale, var(--vi-violet-pale)); color: var(--c-texte, var(--vi-violet-texte)); }
.vc-carte-geste small { font: var(--vi-t-legende); color: var(--vi-gris); }
.vc-carte-geste b { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); }
.vc-carte-geste span:last-child { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--vi-violet-texte); font: 600 14px/19px var(--vi-police-sans); }
.vc-carte-geste:active { transform: scale(var(--vi-appui-surface)); }
@media (hover: hover) { .vc-carte-geste:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-une); } }


/* ═══ 8. COMMENT ON VÉRIFIE ════════════════════════════════════════════════════════════════════════════════════ */

.vc-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.vc-chiffres li { display: grid; align-content: start; gap: 2px; padding: 16px; border-radius: var(--vi-rayon-lg); background: var(--vi-panneau); box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-carte); }
.vc-chiffres .n { font: var(--vi-t-heure); letter-spacing: var(--vi-t-heure-approche); font-variant-numeric: tabular-nums; color: var(--vi-encre); }
.vc-chiffres b { font: 600 15px/20px var(--vi-police-sans); }
.vc-chiffres small { font: var(--vi-t-legende); color: var(--vi-gris); }
.vc-chiffres li:first-child .n { color: var(--vi-violet-texte); }
.vc-chiffres-quand { margin: 0 0 10px; font: var(--vi-t-legende); color: var(--vi-gris); }

.vc-niveaux { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 960px) { .vc-niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.vc-niveau { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 18px; border-radius: var(--vi-rayon-lg); background: var(--vi-panneau); box-shadow: 0 0 0 1px var(--vi-bord); }
.vc-niveau-ic { grid-row: span 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--vi-panneau-2); color: var(--vi-encre); }
.vc-niveau--fort .vc-niveau-ic { background: var(--vi-violet-pale); color: var(--vi-violet-texte); }
.vc-niveau-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.vc-niveau b { font: var(--vi-t-carte); }
.vc-niveau-n { font: 500 13px/17px var(--vi-police-sans); color: var(--vi-gris); font-variant-numeric: tabular-nums; }
.vc-niveau p { font: var(--vi-t-sous); color: var(--vi-gris); }
.vc-niveau-vu { justify-self: start; margin-top: 6px; }
.vc-niveau-vu.v-pilule { background: var(--vi-panneau-2); color: var(--vi-encre); }
.vc-niveau--fort .vc-niveau-vu.v-pilule { background: var(--vi-violet-pale); color: var(--vi-violet-texte); }

.vc-signaler { display: grid; gap: 14px; padding: 20px; border-radius: var(--vi-rayon-xl); background: var(--vi-panneau-2); }
.vc-signaler p { font: var(--vi-t-corps); color: var(--vi-gris); }
.vc-signaler b { display: block; font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); color: var(--vi-encre); margin-bottom: 4px; }
.vc-signaler-gestes { display: flex; flex-wrap: wrap; gap: 10px; }
.vc-signaler .v-bouton--secondaire { --b-fond: var(--vi-panneau); box-shadow: inset 0 0 0 1px var(--vi-bord); }
@media (min-width: 760px) { .vc-signaler { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 24px 28px; } }


/* ═══ 9. LA VITRINE DE L'APP (viens.app) ═══════════════════════════════════════════════════════════════════════
   Une seule nuit (NOIR_VIOLET) pour le haut et la fin, un seul halo violet (plus de rose) ; le blanc de l'app au
   milieu. Les écrans du téléphone sont des cadres au format de l'écran : de nouvelles captures aux mêmes noms
   (img/app/<nom>.webp) s'y posent sans rien changer (object-fit: cover, calées en haut). */

body.vc-app { margin: 0; padding-bottom: 0; background: var(--vi-nuit-fond); }
.vc-app main { display: block; }
.vc-saut { position: absolute; left: -9999px; top: 0; z-index: 300; padding: 12px 18px; border-radius: 0 0 12px 0; background: var(--vi-encre); color: var(--vi-fond); font: 600 15px/21px var(--vi-police-sans); }
.vc-saut:focus { left: 0; }
.vc-apercu { padding: 7px 16px; background: var(--vi-violet-fond); color: #fff; font: 600 13px/17px var(--vi-police-sans); text-align: center; }
.vc-apercu a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.vc-nuit { --vc-nuit-texte: #F3F0FA; --vc-nuit-gris: #B4AECA; color: var(--vc-nuit-texte); background: radial-gradient(70% 60% at 78% 18%, rgba(124, 58, 237, 0.34) 0%, rgba(124, 58, 237, 0) 70%), linear-gradient(180deg, var(--vi-nuit-fond) 0%, var(--vi-nuit-papier) 100%); }
.vc-nuit :focus-visible { outline-color: var(--vi-violet-300); }
.vc-nuit .v-point { color: var(--vi-violet-400); }

.vc-app-tete { position: sticky; top: 0; z-index: 40; background: var(--vi-nuit-fond); background: rgb(11 9 20 / 0.94); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06); }
.vc-app-tete-in { display: flex; align-items: center; gap: 20px; height: 64px; }
.vc-logo { flex: none; font: 800 26px/1 var(--vi-police-marque); letter-spacing: -0.04em; color: #fff; text-decoration: none; }
.vc-logo span { color: var(--vi-violet-400); }
.vc-app-nav { display: flex; gap: 2px; margin-left: auto; }
.vc-app-nav a { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border-radius: var(--vi-rayon-pilule); color: #B4AECA; font: 600 14px/1 var(--vi-police-sans); text-decoration: none; transition: background-color var(--vi-duree-court) var(--vi-courbe-douce), color var(--vi-duree-court) var(--vi-courbe-douce); }
.vc-app-nav a:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.vc-app-tete .v-bouton { margin-left: 4px; }
@media (max-width: 759px) { .vc-app-nav { display: none; } .vc-app-tete .v-bouton { margin-left: auto; } .vc-app-tete-in { height: 58px; } }

.vc-app-haut { position: relative; overflow: hidden; padding: 28px 0 0; }
.vc-app-haut-in { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .vc-app-haut { padding-top: 56px; } .vc-app-haut-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
.vc-app-pilule { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: var(--vi-rayon-pilule); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); color: #E4DEF5; font: var(--vi-t-legende); }
.vc-app-pilule .v-ic { color: var(--vi-violet-300); }
.vc-app h1 { margin-top: 18px; color: #fff; }
.vc-app-h1-sans { display: block; font: 700 calc(44px * var(--vi-une)) / calc(48px * var(--vi-une)) var(--vi-police-sans); letter-spacing: -0.025em; }
.vc-app h1 em { display: block; margin-top: 4px; font: var(--vi-t-accent); letter-spacing: var(--vi-t-accent-approche); color: var(--vi-violet-300); }
@media (min-width: 960px) { .vc-app-h1-sans { font-size: 64px; line-height: 68px; } .vc-app h1 em { font-size: 64px; line-height: 70px; } }
.vc-app-sous { max-width: 30em; margin-top: 16px; font: var(--vi-t-chapo); color: var(--vc-nuit-gris); }
.vc-nw { white-space: nowrap; }
.vc-app-direct { display: flex; align-items: center; gap: 6px; margin-top: 18px; font: var(--vi-t-legende); color: #D9D3EA; }
.vc-app-direct .v-pouls { --p: 7px; color: var(--vi-point-succes); }
.vc-app-direct .v-pouls::after { content: ''; position: absolute; width: var(--p); height: var(--p); border-radius: 50%; background: currentColor; animation: v-onde 1200ms cubic-bezier(0.5, 1, 0.89, 1) infinite; }

/* les boutons des stores */
.vc-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.vc-store {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px 0 14px; border-radius: 16px;
  background: #fff; color: var(--vi-nuit-encre); text-decoration: none;
  transition: transform var(--vi-duree-court) var(--vi-courbe-sortie), box-shadow var(--vi-duree-rapide) var(--vi-courbe-sortie);
}
.vc-store svg { width: 22px; height: 22px; flex: none; }
.vc-store span { display: grid; }
.vc-store small { font: 500 11px/14px var(--vi-police-sans); color: #4A4560; }
.vc-store b { font: 700 17px/21px var(--vi-police-sans); letter-spacing: -0.01em; }
.vc-store:active { transform: scale(var(--vi-appui-controle)); }
@media (hover: hover) { .vc-store:hover { box-shadow: 0 8px 22px rgba(124, 58, 237, 0.35); } }
.vc-papier .vc-store { background: var(--vi-encre); color: var(--vi-fond); }
.vc-papier .vc-store small { color: color-mix(in srgb, var(--vi-fond) 72%, transparent); }

.vc-qr { display: none; }
@media (min-width: 960px) and (hover: hover) {
  .vc-qr { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 8px 16px 8px 8px; border-radius: 18px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
  .vc-qr img { width: 76px; height: 76px; padding: 5px; border-radius: 12px; background: #fff; }
  .vc-qr span { display: grid; font: var(--vi-t-sous); color: var(--vc-nuit-gris); }
  .vc-qr b { font: 600 15px/20px var(--vi-police-sans); color: #fff; }
}

/* les téléphones : un cadre à l'aspect de l'écran, la capture calée en haut (prête pour les nouvelles) */
.vc-tel { position: relative; margin: 0; padding: 6px; border-radius: 38px; background: #0E0B18; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.10), 0 30px 60px rgba(6, 3, 18, 0.55), 0 10px 22px rgba(6, 3, 18, 0.35); }
.vc-tel img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1480; object-fit: cover; object-position: top center; border-radius: 32px; background: var(--vi-nuit-papier); }
.vc-app-tels { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 0; padding: 0 0 8px; }
.vc-app-tels .vc-tel { flex: none; width: 46%; max-width: 270px; }
.vc-app-tels .vc-tel--g, .vc-app-tels .vc-tel--d { width: 38%; max-width: 230px; opacity: 0.96; }
.vc-app-tels .vc-tel--g { margin-right: -12%; transform: rotate(-7deg) translateY(30px); z-index: 1; }
.vc-app-tels .vc-tel--c { z-index: 2; }
.vc-app-tels .vc-tel--d { margin-left: -12%; transform: rotate(7deg) translateY(30px); z-index: 1; }
@media (min-width: 960px) { .vc-app-tels { padding-bottom: 0; margin-bottom: -40px; } }
/* les autocollants de l'app, posés sur les écrans (des objets fixes : plus d'étiquettes qui flottent sans fin) */
.vc-app-tels .v-autocollant { position: absolute; z-index: 3; }
.vc-app-tels .vc-colle-1 { left: 2%; top: 18%; --v-angle: -6deg; }
.vc-app-tels .vc-colle-2 { right: 2%; top: 40%; --v-angle: 5deg; }
.vc-app-vrai { display: flex; align-items: center; gap: 6px; padding-top: 22px; padding-bottom: 20px; font: var(--vi-t-legende); color: var(--vc-nuit-gris); }
@media (min-width: 960px) { .vc-app-vrai { padding-top: 60px; } }

/* le défilé des vraies sorties de la semaine (une boucle : elle dit « maintenant ») */
.vc-defile { overflow: hidden; padding: 14px 0; border-bottom: 1px solid var(--vi-bord); background: var(--vi-panneau); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vc-defile-piste { display: flex; width: max-content; animation: vc-defile 70s linear infinite; }
.vc-defile:hover .vc-defile-piste, .vc-defile:focus-within .vc-defile-piste { animation-play-state: paused; }
.vc-defile ul { display: flex; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; }
.vc-defile a { display: flex; align-items: baseline; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--vi-rayon-pilule); background: var(--vi-panneau-2); color: var(--vi-encre); white-space: nowrap; text-decoration: none; align-items: center; }
.vc-defile small { font: 700 14px/1 var(--vi-police-sans); color: var(--vi-violet-texte); font-variant-numeric: tabular-nums; }
.vc-defile b { font: 600 14px/1 var(--vi-police-sans); }
.vc-defile span { font: 500 13px/1 var(--vi-police-sans); color: var(--vi-gris); }
@keyframes vc-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* comment ça marche : trois écrans, trois mots */
.vc-pas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); gap: 14px; margin: 0 calc(var(--vi-gouttiere) * -1); padding: 4px var(--vi-gouttiere) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vi-gouttiere); scrollbar-width: none; list-style: none; }
.vc-pas::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .vc-pas { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; gap: 20px; } }
.vc-pas li { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; gap: 16px; padding: 20px 20px 0; overflow: hidden; border-radius: var(--vi-rayon-xl); background: var(--vi-lavis); box-shadow: inset 0 0 0 1px var(--vi-bord); }
.vc-pas-tete { display: flex; align-items: center; gap: 12px; }
.vc-pas-n { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vi-panneau); box-shadow: inset 0 0 0 1.5px var(--vi-trait); color: var(--vi-gris); font: 600 14px/1 var(--vi-police-sans); font-variant-numeric: tabular-nums; }
.vc-pas b { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); }
.vc-pas .vc-tel { align-self: end; width: 78%; margin: 0 auto -38%; border-radius: 34px 34px 0 0; padding-bottom: 0; box-shadow: 0 0 0 1px rgb(23 18 38 / 0.10), 0 18px 36px rgba(27, 15, 58, 0.18); }
.vc-pas .vc-tel img { border-radius: 28px 28px 0 0; }
.vc-pas li { max-height: 470px; }

/* les cercles dans la vitrine : le rail de l'app, la porte, l'écran des cercles */
.vc-app-cercles { padding: var(--vi-esp-2xl) 0; background: var(--vi-lavis); }
.vc-app-cercles-in { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .vc-app-cercles { padding: var(--vi-esp-3xl) 0; } .vc-app-cercles-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; } }
.vc-app-cercles .vc-rail-cercles { margin-top: 18px; }
.vc-app-cercles .vc-porte { margin-top: 18px; background: var(--vi-panneau); box-shadow: 0 0 0 1px var(--vi-bord); }
.vc-app-cercles .vc-tel { width: min(70%, 290px); margin: 0 auto; transform: rotate(2deg); box-shadow: 0 0 0 1px rgb(23 18 38 / 0.10), 0 20px 40px rgba(27, 15, 58, 0.20); }

/* tout pour sortir : deux tuiles à écran, quatre tuiles à icône */
.vc-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 960px) { .vc-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.vc-tuile {
  position: relative; display: grid; align-content: start; gap: 4px; padding: 18px; overflow: hidden; min-height: 150px;
  border-radius: var(--vi-rayon-xl); background: var(--vi-panneau); box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-carte);
  color: var(--vi-encre); text-decoration: none;
  transition: transform var(--vi-duree-court) var(--vi-courbe-sortie), box-shadow var(--vi-duree-rapide) var(--vi-courbe-sortie);
}
.vc-tuile b { font: var(--vi-t-carte); font-weight: 700; }
.vc-tuile small { font: var(--vi-t-sous); color: var(--vi-gris); }
.vc-tuile-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: 16px; background: var(--vi-violet-pale); color: var(--vi-violet-texte); }
.vc-tuile--ecran { grid-column: span 2; min-height: 300px; padding-bottom: 0; background: var(--vi-lavis); }
@media (min-width: 960px) { .vc-tuile--ecran { grid-row: span 2; min-height: 380px; } }
.vc-tuile--ecran b { font: var(--vi-t-section); letter-spacing: var(--vi-t-section-approche); }
.vc-tuile--ecran .vc-tel { align-self: end; width: min(62%, 230px); margin: 18px auto -46%; border-radius: 30px 30px 0 0; padding-bottom: 0; box-shadow: 0 0 0 1px rgb(23 18 38 / 0.10), 0 16px 32px rgba(27, 15, 58, 0.16); }
.vc-tuile--ecran .vc-tel img { border-radius: 24px 24px 0 0; }
.vc-tuile:active { transform: scale(var(--vi-appui-surface)); }
@media (hover: hover) { .vc-tuile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--vi-bord), var(--vi-ombre-une); } }

/* la fin : « Viens. » au mot du logo, les stores, la liste d'attente */
.vc-app-fin { padding: var(--vi-esp-3xl) 0; text-align: center; }
.vc-app-fin h2 { font: 800 72px/1 var(--vi-police-marque); letter-spacing: -0.04em; color: #fff; }
@media (min-width: 960px) { .vc-app-fin h2 { font-size: 112px; } }
.vc-app-fin .vc-app-sous { margin: 14px auto 0; }
.vc-app-fin .vc-stores, .vc-app-fin .vc-qr { justify-content: center; }
.vc-app-fin .vc-qr { margin-left: auto; margin-right: auto; text-align: left; }
.vc-attente { max-width: 460px; margin: 28px auto 0; text-align: center; }
.vc-attente summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; color: #D9D3EA; font: 600 15px/21px var(--vi-police-sans); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / 0.3); }
.vc-attente summary::-webkit-details-marker { display: none; }
.vc-attente summary .v-ic { transition: transform var(--vi-duree-moyen) var(--vi-courbe-douce); }
.vc-attente[open] summary .v-ic { transform: rotate(180deg); }
.vc-attente form { display: flex; gap: 8px; margin-top: 10px; }
.vc-attente input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 18px; border: 1.5px solid rgb(255 255 255 / 0.22); border-radius: var(--vi-rayon-pilule); background: rgb(255 255 255 / 0.06); color: #fff; font: 500 16px/21px var(--vi-police-sans); }
.vc-attente input::placeholder { color: #A9A2C2; }
.vc-attente input:focus { outline: none; border-color: var(--vi-violet-300); box-shadow: 0 0 0 4px rgb(124 58 237 / 0.35); }
.vc-attente .v-bouton { box-shadow: none; }
.vc-attente-ok { margin-top: 12px; font: var(--vi-t-corps); color: #D9D3EA; }

/* le pied de la vitrine : titres de colonnes sans capitales (Sans 600 13) */
.vc-app-pied { padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--vi-nuit-fond); color: #B4AECA; }
.vc-app-pied-in { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .vc-app-pied-in { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }
.vc-app-pied-marque { grid-column: 1 / -1; }
@media (min-width: 760px) { .vc-app-pied-marque { grid-column: auto; } }
.vc-app-pied-marque p { margin-top: 10px; font: var(--vi-t-sous); }
.vc-app-pied nav { display: grid; align-content: start; gap: 2px; }
.vc-app-pied h3 { margin-bottom: 8px; font: 600 13px/17px var(--vi-police-sans); color: #fff; }
.vc-app-pied nav a { display: block; padding: 5px 0; color: #B4AECA; font: var(--vi-t-sous); text-decoration: none; }
.vc-app-pied nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* le bouton collé du téléphone (il paraît quand les stores du haut sont passés) */
.vc-colle { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 22px; background: color-mix(in srgb, var(--vi-panneau) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); box-shadow: 0 0 0 1px var(--vi-bord), 0 12px 32px rgba(27, 15, 58, 0.22); transform: translateY(140%); transition: transform var(--vi-duree-lent) var(--vi-courbe-sortie); }
@media (max-width: 759px) { .vc-colle { display: flex; } }
.vc-colle.on { transform: none; }
.vc-colle img { width: 40px; height: 40px; border-radius: 11px; }
.vc-colle > span { flex: 1 1 auto; display: grid; min-width: 0; }
.vc-colle b { font: 700 15px/19px var(--vi-police-sans); color: var(--vi-encre); }
.vc-colle small { font: var(--vi-t-legende); color: var(--vi-gris); }
.vc-colle .v-bouton { box-shadow: none; }

/* les sections claires de la vitrine */
.vc-papier { display: flow-root; color: var(--vi-encre); background: var(--vi-fond); }


/* ═══ 10. LE MOUVEMENT RÉDUIT ══════════════════════════════════════════════════════════════════════════════════
   kit-jetons.css coupe déjà les durées et les boucles ; ici, le défilé devient une rangée qu'on fait glisser. */
@media (prefers-reduced-motion: reduce) {
  .vc-defile { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; }
  .vc-defile-piste { animation: none; }
  .vc-defile ul[aria-hidden="true"] { display: none; }
  .vc-app-direct .v-pouls::after { animation: none; display: none; }
  .vc .v-vitrine:hover, .vc-format:hover, .vc-tuile:hover, .vc-carte-geste:hover { transform: none; }
}


/* ═══ 11. LE SOIR ══════════════════════════════════════════════════════════════════════════════════════════════
   Presque tout suit les jetons. Restent : les téléphones posés sur le papier (leur liseré passe au clair) et les
   petites phrases écrites sur la tuile d'un cercle : le soir, la tuile est le vif à 20 % et le texte vif n'y fait que
   4,0:1 ; le texte passe à l'encre du soir (AA), l'icône garde la couleur du cercle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.vc-pas, .vc-tuile--ecran, .vc-app-cercles) .vc-tel { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 18px 36px rgba(0, 0, 0, 0.45); }
  :root:not([data-theme="light"]) .vc :is(.v-vitrine-porte, .vc-vitrine-porte) { color: var(--vi-encre); }
  :root:not([data-theme="light"]) .vc :is(.v-vitrine-porte, .vc-vitrine-porte) .v-ic { color: var(--c-texte); }
}
:root[data-theme="dark"] :is(.vc-pas, .vc-tuile--ecran, .vc-app-cercles) .vc-tel { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 18px 36px rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] .vc :is(.v-vitrine-porte, .vc-vitrine-porte) { color: var(--vi-encre); }
:root[data-theme="dark"] .vc :is(.v-vitrine-porte, .vc-vitrine-porte) .v-ic { color: var(--c-texte); }