/* ============================================================================
   VENTILO AI - COUCHE 4/4 : PAGES
   ----------------------------------------------------------------------------
   Les sections, composees avec les briques de components.css. Ici ne vit que
   ce qui est PROPRE a une section : sa grille, son media, ses details. Les
   marges entre sections, les titres, les legendes, la matiere en relief et
   les boutons viennent des briques communes.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────────────
   Plein ecran, video en fond (image fixe en repli, posee en style inline).
   Le badge, le titre et la barre de chat forment un bloc centre ; le bas est
   plus epais que le haut pour degager la mascotte, au centre de la video. */
.vs-home {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--v-space-8);
  padding: var(--v-space-4) var(--v-space-4) 22vh;
  background-color: var(--v-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.vs-home__video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mouvement reduit : la video s'efface, l'image fixe de la section reste. */
@media (prefers-reduced-motion: reduce) {
  .vs-home__video {
    display: none;
  }
}

/* Badge de nouveaute : la brique .vs-badge (en lien, .vs-press), sans
   effet au survol. Le chevron est blanc ; la marge negative rapproche le
   badge du titre. */
.vs-hero__badge {
  margin-bottom: calc(var(--v-space-3) * -1);
  padding-right: var(--v-space-3);
}

.vs-hero__badge:hover {
  transform: none;
}

.vs-hero__badge:focus-visible {
  outline-color: var(--v-text);
  outline-offset: 3px;
}

.vs-hero__badge-ico {
  font-size: 1.1em;
  color: var(--v-text);
}

/* Titre du hero : centre, deux lignes exactement. La ligne la plus longue,
   « Ventilo » + le verbe le plus large (« construit »), mesure 7,9em en DM
   Sans 700 (la seconde, « vos evenements », 7,75em) : la taille est
   calculee pour qu'elle remplisse la largeur utile (ecran moins les 2 x
   16px de marge du hero), avec 0,35em de securite, plafonnee a 5rem. A changer si le titre ou la
   liste des verbes change. Blanc sur la video, avec un halo sombre tres
   leger qui le detache du ciel clair. */
.vs-hero__title {
  margin: 0;
  text-align: center;
  font-size: min(5rem, calc((100vw - 2rem) / 8.25));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--v-text);
  text-shadow: 0 2px 24px rgba(var(--v-bg-rgb), .22);
}

.vs-hero__line {
  white-space: nowrap;
}

/* Roulette de verbes : une fenetre haute d'une ligne ; dedans, la bande des
   verbes MONTE d'un cran a la fois. La fenetre a la largeur du verbe le plus
   long : la ligne ne bouge pas quand le verbe change. Chaque verbe tient
   1.8s, puis glisse en 0.5s : 16.1s par tour (7 verbes). Tout en CSS. */
.vs-rotator {
  --rot-h: 1.15em;              /* = line-height du titre, une ligne exacte */
  display: inline-block;
  vertical-align: top;
  height: var(--rot-h);
  overflow: hidden;
  text-align: left;
}

.vs-rotator__strip {
  display: flex;
  flex-direction: column;
  animation: vs-rotator-slide 16.1s infinite;
  will-change: transform;
}

.vs-rotator__word {
  display: block;
  height: var(--rot-h);
  line-height: var(--rot-h);
}

@keyframes vs-rotator-slide {
  0.00%, 11.18% { transform: translateY(calc(var(--rot-h) * 0)); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  14.29%, 25.47% { transform: translateY(calc(var(--rot-h) * -1)); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  28.57%, 39.75% { transform: translateY(calc(var(--rot-h) * -2)); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  42.86%, 54.04% { transform: translateY(calc(var(--rot-h) * -3)); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  57.14%, 68.32% { transform: translateY(calc(var(--rot-h) * -4)); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  71.43%, 82.61% { transform: translateY(calc(var(--rot-h) * -5)); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  85.71%, 96.89% { transform: translateY(calc(var(--rot-h) * -6)); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  100% { transform: translateY(calc(var(--rot-h) * -7)); }
}

/* Phrase sous le titre (facultative) : a qui parle la page. Meme halo que
   le titre ; la marge negative la rapproche du titre, dont elle depend. */
.vs-hero__lead {
  max-width: 44ch;
  margin: calc(var(--v-space-4) * -1) 0 0;
  text-align: center;
  font-size: var(--v-fs-lead);
  line-height: var(--v-lh-lead);
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 24px rgba(var(--v-bg-rgb), .35);
  text-wrap: balance;
}

/* ── Onglets ─────────────────────────────────────────────────────────────────
   Tete centree, barre d'onglets (la brique .vs-segment), carte de l'onglet
   actif, legende. Un clic remplace le contenu, sans animation
   (assets/js/tabs.js). */
/* La carte, au format des images ; 4:3 sur telephone. */
.vs-tabs__card {
  margin-top: var(--v-head-gap);
  aspect-ratio: 2688 / 1520;
}

.vs-tabs__panel {
  height: 100%;
  overflow: hidden;
  border-radius: var(--v-radius-lg);
  background: var(--v-surface);
}

.vs-tabs__panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  .vs-tabs__card {
    aspect-ratio: 4 / 3;
  }
}

/* ── Pour qui ────────────────────────────────────────────────────────────────
   Tete, puis une grille 2 x 2 de cartes-liens (.vs-neu .vs-press) : titre et
   phrase en haut a gauche, la tete d'la mascotte de l'univers posee sur le bord
   bas, a droite. Sous 768px, une colonne. */
.vs-icp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-space-4);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.vs-icp__card {
  --press-scale: .992;
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  min-height: 190px;
  padding: var(--v-space-6);
  border-radius: var(--v-radius-lg);
  color: var(--v-neu-text);
  text-decoration: none;
}

.vs-icp__card:hover {
  color: var(--v-neu-text);
}

.vs-icp__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--v-neu-text);
}

.vs-icp__text {
  position: relative;
  z-index: 1;
  max-width: 30ch;
  margin: var(--v-space-2) 0 0;
  font-size: var(--v-fs-body);
  line-height: 1.5;
  color: var(--v-neu-text-muted);
}

.vs-icp__img {
  position: absolute;
  z-index: 0;
  right: 6%;
  bottom: 0;
  width: 26%;
  max-width: 120px;
  height: auto;
}

@media (max-width: 767.98px) {
  .vs-icp__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vs-icp__img {
    width: 28%;
  }
}

/* ── Cartes ──────────────────────────────────────────────────────────────────
   La grille 2 x 2 de « Pour qui », en cartes NON cliquables (.vs-neu, sans
   .vs-press) : etiquette orange, titre, phrase. Sous 768px, une colonne. */
.vs-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-space-4);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.vs-cards__card {
  padding: var(--v-space-6);
  border-radius: var(--v-radius-lg);
}

.vs-cards__label {
  margin: 0;
  font-size: var(--v-fs-tiny);
  font-weight: 600;
  color: var(--v-primary-ink);
}

.vs-cards__title {
  margin: var(--v-space-3) 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--v-neu-text);
}

.vs-cards__text {
  max-width: 36ch;
  margin: var(--v-space-2) 0 0;
  font-size: var(--v-fs-body);
  line-height: 1.5;
  color: var(--v-neu-text-muted);
}

@media (max-width: 767.98px) {
  .vs-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── FAQ ─────────────────────────────────────────────────────────────────────
   Tete, puis les questions : chaque question est une carte .vs-neu (aretes
   seules). Ouverte, elle s'ENFONCE (creux anime) et sa reponse se deplie
   (assets/js/faq.js). Le chevron vit dans une pastille ronde en relief qui
   s'enfonce et se retourne a l'ouverture. */
.vs-faq__list {
  display: grid;
  gap: var(--v-space-3);
}

.vs-faq__item {
  border-radius: var(--v-radius-md);
  transition: box-shadow var(--v-neu-out), --neu-a var(--v-neu-out), --neu-b var(--v-neu-out);
}

/* Ouverte : enfoncee. .is-open avec script, [open] sans. */
.vs-faq__list.is-js .vs-faq__item.is-open,
.vs-faq__list:not(.is-js) .vs-faq__item[open] {
  --neu-a: var(--v-neu-well-a);
  --neu-b: var(--v-neu-well-b);
  box-shadow: var(--v-neu-well);
}

.vs-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-space-4);
  padding: var(--v-space-4) var(--v-space-4) var(--v-space-4) var(--v-space-6);
  font-size: var(--v-fs-lead);
  font-weight: 600;
  color: var(--v-neu-text);
  cursor: pointer;
  list-style: none;
}

.vs-faq__q::-webkit-details-marker {
  display: none;
}

.vs-faq__q:focus-visible {
  outline: 2px solid var(--v-neu-text);
  outline-offset: 4px;
  border-radius: var(--v-radius-md);
}

/* La pastille du chevron : .vs-round .vs-neu, sans comportement de bouton. */
.vs-faq__icon {
  flex: none;
  width: 36px;
  height: 36px;
  color: var(--v-neu-text-muted);
  font-size: 20px;
  transition: box-shadow var(--v-neu-out), --neu-a var(--v-neu-out), --neu-b var(--v-neu-out);
}

.vs-faq__icon .vs-ico {
  transition: transform var(--v-neu-out);
}

.vs-faq__list.is-js .vs-faq__item.is-open .vs-faq__icon,
.vs-faq__list:not(.is-js) .vs-faq__item[open] .vs-faq__icon {
  --neu-a: var(--v-neu-concave-a);
  --neu-b: var(--v-neu-concave-b);
  box-shadow: var(--v-neu-pressed);
  color: var(--v-primary-ink);
}

.vs-faq__list.is-js .vs-faq__item.is-open .vs-faq__icon .vs-ico,
.vs-faq__list:not(.is-js) .vs-faq__item[open] .vs-faq__icon .vs-ico {
  transform: rotate(180deg);
}

/* Le corps porte l'animation de hauteur : aucun padding dessus. */
.vs-faq__body {
  overflow: hidden;
}

.vs-faq__a {
  max-width: 64ch;
  margin: 0;
  padding: 0 var(--v-space-6) var(--v-space-6);
  font-size: 1.0625rem;
  line-height: var(--v-lh-lead);
  color: var(--v-neu-text-muted);
}

/* ── Manifesto ───────────────────────────────────────────────────────────────
   La derniere section, tout centre : titre (une ligne), texte, grand bouton,
   puis la mascotte sur sa planete, rogne a mi-hauteur par le bas de la section :
   le pied de page, juste dessous, prend le dessus. */
.vs-manifesto {
  overflow: hidden;
}

.vs-manifesto__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vs-manifesto__title {
  white-space: nowrap;           /* une seule ligne (user, 27/09/2026) */
}

.vs-manifesto__text {
  max-width: 46ch;
  margin: var(--v-space-6) 0 0;
  font-size: var(--v-fs-lead);
  line-height: var(--v-lh-lead);
  color: var(--v-text-muted);
}

.vs-manifesto__btn {
  margin-top: var(--v-space-8);
}

/* Le cadre ne garde que le haut de l'image : la mascotte et le haut du
   globe (la planete occupe le fichier de 14 % a 98 % de sa hauteur). Il
   s'arrete a 44 % : au-dessus du milieu du globe, qui passe donc en
   grande partie sous le pied de page. */
.vs-manifesto__globe {
  width: min(760px, 92vw);
  margin-top: clamp(48px, 6vw, 80px);
  aspect-ratio: 1080 / 470;
  overflow: hidden;
}

.vs-manifesto__globe img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Hero de page interieure ─────────────────────────────────────────────────
   Pas plein ecran : un bandeau arrondi a la largeur de reference, sous
   l'en-tete fixe, rempli d'une texture organique (--texture, posee par la
   page) sous un voile sombre qui garde le texte lisible. Dedans, centres :
   le nom de la page (h1) et sa description, en blanc. */
.vs-pagehero {
  padding-top: calc(var(--v-header-h) + var(--v-space-6));
}

.vs-pagehero__band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(320px, 40vh, 440px);
  padding: var(--v-space-12) var(--v-space-6);
  overflow: hidden;
  border-radius: var(--v-radius-lg);
  background: var(--texture) center / cover no-repeat, var(--v-surface);
}

/* Le voile : plus dense au centre, ou vit le texte, et sur les bords bas. */
.vs-pagehero__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 80% at 50% 50%, rgba(var(--v-bg-rgb), .55), rgba(var(--v-bg-rgb), .2) 80%),
    linear-gradient(to bottom, rgba(var(--v-bg-rgb), .1), rgba(var(--v-bg-rgb), .45));
}

.vs-pagehero__head {
  max-width: 640px;
  margin-bottom: 0;
}

.vs-pagehero__title,
.vs-pagehero__subtitle {
  text-shadow: 0 2px 24px rgba(var(--v-bg-rgb), .35);
}

.vs-pagehero__subtitle {
  color: rgba(255, 255, 255, .82);
}

/* ── Lancements (page Nouveautes) ────────────────────────────────────────────
   Une grille de deux colonnes (une sous 768px). Chaque lancement : la date
   en badge, le titre (deux lignes au plus), la video, la legende. */
.vs-launches__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-space-20) var(--v-space-6);
}

.vs-launch__date {
  margin-bottom: var(--v-space-4);
}

/* Le titre occupe TOUJOURS la hauteur de deux lignes (la regle des titres :
   deux lignes au plus, coupees au-dela). Qu'il tienne sur une ligne ou deux,
   les videos de deux lancements voisins commencent a la meme hauteur. */
.vs-launch__title {
  --lines: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  overflow: hidden;
  min-height: calc(var(--lines) * 1.15em);
  margin: 0 0 var(--v-space-5);
  font-size: var(--v-fs-card-title);
  font-weight: 700;
  line-height: 1.15;
  color: var(--v-text);
}

/* Une seule colonne : plus de voisin a aligner, le titre reprend sa
   hauteur naturelle. */
@media (max-width: 767.98px) {
  .vs-launch__title {
    min-height: 0;
  }
}

/* Dans une demi-colonne, le grand bouton lecture se fait plus discret. */
.vs-launch .vs-player__play {
  width: 64px;
  height: 64px;
  font-size: 22px;
}

.vs-launch__caption {
  gap: var(--v-space-5);
}

.vs-launch__link {
  margin-top: var(--v-space-3);
  font-size: var(--v-fs-small);
}

@media (max-width: 767.98px) {
  .vs-launches__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Formules (page Tarifs) ──────────────────────────────────────────────────
   La bascule mensuel / annuel (.vs-segment de radios), puis trois cartes en
   relief. Les prix des deux periodes sont dans le HTML ; la bascule cochee
   decide lesquels s'affichent (:has, sans script). */
fieldset.vs-plans__switch {
  min-width: 0;
  margin-bottom: var(--v-head-gap);
  border: 0;
}

.vs-plans__switch .vs-badge__label {
  font-size: var(--v-fs-tiny);
}

.vs-plans:has([value="annuel"]:checked) [data-period="mensuel"],
.vs-plans:has([value="mensuel"]:checked) [data-period="annuel"] {
  display: none;
}

.vs-plans__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v-space-4);
}

.vs-plan {
  display: flex;
  flex-direction: column;
  padding: var(--v-space-6);
  border-radius: var(--v-radius-lg);
}

.vs-plan__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-space-3);
  min-height: 36px;
}

.vs-plan__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--v-text);
}

.vs-plan__flag {
  height: 28px;
  padding: 0 var(--v-space-3);
  font-size: .75rem;
}

.vs-plan__tagline {
  min-height: 3em;
  margin: var(--v-space-2) 0 0;
  font-size: var(--v-fs-small);
  line-height: 1.5;
  color: var(--v-text-muted);
}

.vs-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--v-space-2);
  margin: var(--v-space-6) 0 0;
}

.vs-plan__amount {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--v-text);
}

.vs-plan__per {
  font-size: var(--v-fs-small);
  color: var(--v-text-muted);
}

.vs-plan__note {
  margin: var(--v-space-2) 0 0;
  font-size: var(--v-fs-tiny);
  color: var(--v-text-faint);
}

.vs-plan__cta {
  justify-content: center;
  margin-top: var(--v-space-6);
}

/* Formule pas encore ouverte (desactivee en admin) : le bouton est la, inerte. */
.vs-plan__cta--soon {
  opacity: .55;
  cursor: not-allowed;
}

.vs-plan__features {
  display: grid;
  gap: var(--v-space-3);
  margin: var(--v-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.vs-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--v-space-3);
  font-size: var(--v-fs-small);
  line-height: 1.45;
  color: var(--v-text-muted);
}

.vs-plan__features .vs-ico {
  flex: none;
  margin-top: .1em;
  font-size: 1.15rem;
  color: var(--v-primary-ink);
}

@media (max-width: 991.98px) {
  .vs-plans__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Contact (page Aide) ─────────────────────────────────────────────────────
   Le formulaire dans une plaque en relief a gauche, les moyens de nous
   joindre en cartes-liens a droite. Sous 992px, tout s'empile. */
.vs-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--v-space-6);
  align-items: start;
}

.vs-contact__form {
  display: grid;
  gap: var(--v-space-5);
  padding: var(--v-space-8);
  border-radius: var(--v-radius-lg);
}

.vs-contact__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v-space-4);
}

.vs-contact__send-ico {
  transform: rotate(90deg);
}

.vs-contact__status {
  margin: 0;
  font-size: var(--v-fs-small);
  color: var(--v-text-muted);
}

.vs-contact__channels {
  display: grid;
  gap: var(--v-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vs-channel {
  display: flex;
  align-items: center;
  gap: var(--v-space-4);
  padding: var(--v-space-5);
  border-radius: var(--v-radius-lg);
  color: var(--v-text);
  text-decoration: none;
}

.vs-channel:hover {
  color: var(--v-text);
}

.vs-channel__ico {
  flex: none;
  width: 48px;
  height: 48px;
  font-size: 22px;
  color: var(--v-primary-ink);
}

.vs-channel__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vs-channel__title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.vs-channel__text {
  font-size: var(--v-fs-small);
  color: var(--v-text-muted);
  overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
  .vs-contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .vs-contact__form {
    padding: var(--v-space-5);
  }
}

/* ── Recit (page Manifesto) ──────────────────────────────────────────────────
   Un texte suivi a la largeur de reference, en grand corps de lecture. Deux
   variations seulement, de graisse et de couleur : le texte courant est
   gris en regular ; <strong> passe en blanc et plus gras ; <em> passe en
   blanc, en regular. */
.vs-prose__text {
  display: grid;
  gap: var(--v-space-8);
}

.vs-prose__text p {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--v-text-muted);
  text-wrap: pretty;
}

.vs-prose__text strong {
  font-weight: 600;
  color: var(--v-text);
}

.vs-prose__text em {
  font-style: normal;
  font-weight: 400;
  color: var(--v-text);
}

/* ── Pages legales (CGU, CGV, confidentialite, mentions legales) ─────────────
   Le texte est une copie a l'identique (partials/legal/*.html) : on n'y touche
   pas, on le met en forme ici, par ses balises. Lecture confortable a la
   largeur de reference : titre de page (h1) comme un titre de section, la
   date en mention, les articles (h2) et sous-articles (h3) en blanc, le
   corps en gris, les liens en blanc souligne. Pas de bandeau : le h1 est
   dans le texte juridique lui-meme. */
.vs-legal {
  padding-top: calc(var(--v-header-h) + var(--v-section-gap) / 2);
}

.vs-legal__text h1 {
  margin: 0;
  font-size: var(--v-fs-title);
  font-weight: 700;
  line-height: var(--v-lh-title);
  color: var(--v-text);
}

.vs-legal__text .vs-prose__meta {
  margin: var(--v-space-4) 0 var(--v-space-12);
  font-size: var(--v-fs-small);
  color: var(--v-text-faint);
}

.vs-legal__text section + section {
  margin-top: var(--v-space-10);
}

.vs-legal__text h2 {
  margin: 0 0 var(--v-space-4);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--v-text);
}

.vs-legal__text h3 {
  margin: var(--v-space-6) 0 var(--v-space-3);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--v-text);
}

.vs-legal__text p {
  margin: 0 0 var(--v-space-4);
  font-size: var(--v-fs-body);
  line-height: 1.75;
  color: var(--v-text-muted);
}

.vs-legal__text strong {
  font-weight: 600;
  color: var(--v-text);
}

.vs-legal__text a {
  color: var(--v-text);
  text-decoration: underline;
  text-decoration-color: var(--v-primary-ink);
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
  transition: text-decoration-color .2s ease;
}

.vs-legal__text a:hover,
.vs-legal__text a:focus-visible {
  color: var(--v-primary-ink);
}

/* ── Demandez a votre IA ─────────────────────────────────────────────────────
   Une rangee centree de boutons en relief (.vs-btn), logo puis nom ; elle
   passe a la ligne sur petit ecran. */
.vs-askai__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--v-space-3);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.vs-askai__list .vs-ico {
  font-size: 1.1em;
}