/* ============================================================================
   VENTILO AI - COUCHE 3/4 : COMPONENTS
   ----------------------------------------------------------------------------
   Les briques communes de toutes les pages. Une page se compose avec elles :
   elle n'invente ni marge, ni titre, ni bouton.

     MISE EN PAGE   .vs-container  .vs-section (--tinted)  .vs-wrap
     TETE           .vs-head (--center)  .vs-title  .vs-subtitle
     LEGENDE        .vs-caption  .vs-caption__text
     RELIEF         .vs-neu  .vs-press  (+ @property --neu-a / --neu-b)
     BOUTONS        .vs-btn (--lg, --primary)  .vs-round
     SELECTEUR      .vs-segment  .vs-segment__item (onglets, bascule)
     FORMULAIRE     .vs-field  .vs-field__label  .vs-field__input
     LIEN           .vs-link
     BADGE          .vs-badge (+ __label, __text)
     LECTEUR VIDEO  .vs-player (partials/components/player.php)
     CHROME         en-tete, pied de page, barre de chat du hero
   ========================================================================== */

/* ── Mise en page ────────────────────────────────────────────────────────────
   .vs-container : les marges de bord de l'ecran et la largeur maximale par
   palier (reprise de Bootstrap, pour que rien ne bouge a son retrait).
   .vs-section : une section de page ; elle ne porte que l'ecart qui la
   separe de la precedente. .vs-wrap : la largeur de reference, centree. */
.vs-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: .75rem;
}

@media (min-width: 576px)  { .vs-container { max-width: 540px; } }
@media (min-width: 768px)  { .vs-container { max-width: 720px; } }
@media (min-width: 992px)  { .vs-container { max-width: 960px; } }
@media (min-width: 1200px) { .vs-container { max-width: 1140px; } }
@media (min-width: 1400px) { .vs-container { max-width: 1320px; } }

.vs-section {
  padding-top: var(--v-section-gap);
}

.vs-wrap {
  width: var(--v-content);
  margin-inline: auto;
}

/* Portee sombre (tokens.css) : ce qui est pose sur une image ou une video
   garde les couleurs du theme sombre, meme en clair. Le texte herite du
   <body> ; on le repose ici pour qu'il prenne les couleurs de la portee. */
.vs-dark,
.vs-header {
  color: var(--v-text);
}

/* Section en BANDE NUANCEE : un fond un cran plus clair que la page, sur
   toute la largeur, pour structurer la page. L'ecart avec la section
   precedente reste l'ecart de section, mais A L'EXTERIEUR de la bande
   (marge) ; a l'interieur, une marge serree (--v-band-pad) en haut et en
   bas. Ses bords sont deux aretes, comme la matiere en relief : un filet de
   lumiere en haut, un filet d'ombre en bas. */
.vs-section--tinted {
  margin-top: var(--v-section-gap);
  padding-block: var(--v-band-pad);
  background: var(--v-bg-tint);
  box-shadow: inset 0 1px 0 var(--v-hairline), inset 0 -1px 0 var(--v-edge-shadow);
}



/* La derniere section d'une page laisse l'ecart de section avant le pied
   de page. Sauf le manifesto : son globe est fait pour etre coupe par le
   pied. */
main > section:last-of-type:not(.vs-manifesto) {
  padding-bottom: var(--v-section-gap);
}

/* ── Tete de section ─────────────────────────────────────────────────────────
   Titre (deux lignes au plus) et sous-titre facultatif. Alignee a gauche ;
   --center la centre. Les tailles viennent des tokens et ne se baissent
   jamais : un titre trop long se raccourcit. */
.vs-title {
  margin-block: 0;
  font-size: var(--v-fs-title);
  font-weight: 700;
  line-height: var(--v-lh-title);
  color: var(--v-text);
}

/* .vs-head vient APRES .vs-title : une meme balise peut porter les deux
   (un titre seul, sans sous-titre), et garder l'ecart du dessous. */
.vs-head {
  margin-bottom: var(--v-head-gap);
}

.vs-head--center {
  text-align: center;
}

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

.vs-head--center .vs-subtitle {
  margin-inline: auto;
}

/* ── Legende sous un media ───────────────────────────────────────────────────
   Le texte a gauche, en un paragraphe dont le debut (<strong>) est blanc et
   la suite attenuee ; un bouton a droite, en haut. Sous 768px, le bouton
   passe sous le texte. */
.vs-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 80px);
  margin-top: var(--v-caption-gap);
}

.vs-caption__text {
  max-width: 60ch;
  margin: 0;
  font-size: var(--v-fs-caption);
  line-height: var(--v-lh-caption);
  color: var(--v-text-muted);
}

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

@media (max-width: 767.98px) {
  .vs-caption {
    flex-direction: column;
    gap: var(--v-space-5);
  }
}

/* ── Matiere en relief (neumorphisme sombre, tokens --v-neu-*) ───────────────
   .vs-neu : la matiere. Un degrade de surface bombe et deux aretes, sans
   ombre portee. Les deux teintes du degrade sont des couleurs enregistrees
   (@property) : le navigateur les anime, et la surface passe en douceur de
   bombee a creusee.
   .vs-press : le comportement d'une commande. Elle monte d'un pixel au
   survol ; a la pression, elle s'enfonce vite (surface creusee, ombres a
   l'interieur) et remonte avec un petit rebond. --press-scale regle
   l'enfoncement (plus la commande est grande, plus il est faible). */
@property --neu-a {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(34, 30, 24, 0);
}

@property --neu-b {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(34, 30, 24, 0);
}

.vs-neu {
  --neu-a: var(--v-neu-convex-a);
  --neu-b: var(--v-neu-convex-b);
  background: linear-gradient(145deg, var(--neu-a), var(--neu-b));
  box-shadow: var(--v-neu-edge);
  transition: box-shadow var(--v-neu-out), transform var(--v-neu-out),
              --neu-a var(--v-neu-out), --neu-b var(--v-neu-out);
}

.vs-press:hover {
  transform: translateY(-1px);
}

.vs-press:active {
  --neu-a: var(--v-neu-concave-a);
  --neu-b: var(--v-neu-concave-b);
  box-shadow: var(--v-neu-pressed);
  transform: translateY(1px) scale(var(--press-scale, .985));
  transition: box-shadow var(--v-neu-in), transform var(--v-neu-in),
              --neu-a var(--v-neu-in), --neu-b var(--v-neu-in);
}

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

/* ── Boutons ─────────────────────────────────────────────────────────────────
   .vs-btn : le bouton texte, a combiner avec .vs-neu .vs-press. Texte grave
   dans la matiere. --lg : le grand bouton d'une section. .vs-round : la
   pastille ronde (icone seule), taille posee par l'emploi. */
/* Vaut pour <a> comme pour <button> : le bouton natif perd sa bordure et
   son fond systeme (le liseré clair), la matiere .vs-neu prend le relais. */
.vs-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-2);
  height: 48px;
  padding: 0 var(--v-space-4) 0 var(--v-space-5);
  border: 0;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--v-radius-sm);
  color: var(--v-neu-text);
  text-shadow: var(--v-neu-engrave);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.vs-btn:hover,
.vs-btn:focus-visible {
  color: var(--v-neu-text);
}

.vs-btn .vs-ico {
  font-size: 1.25em;
}

/* La fleche d'un bouton neutre (« Voir comment », « Les nouveautes ») porte
   l'accent : le bouton reste neutre, seul son signe d'aller est orange. */
.vs-btn__go {
  color: var(--v-primary-ink);
}

.vs-btn--lg {
  height: 52px;
  padding: 0 var(--v-space-8);
  font-size: 1.0625rem;
}

.vs-round {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--v-neu-text);
}

/* Bouton PLEIN, l'accent orange (user, 29/09/2026) : l'action principale
   d'une section, UNE par section au plus. A combiner avec .vs-neu .vs-press
   (le geste reste le meme) : couleur unie, jamais de degrade ; deux aretes
   et une ombre courte au repos, enfonce dans la teinte pressee au clic.
   Memes valeurs que les boutons primary de la plateforme. */
.vs-btn--primary {
  --neu-a: var(--v-primary);
  --neu-b: var(--v-primary);
  box-shadow: var(--v-neu-solid-edge);
  color: var(--v-on-primary);
  text-shadow: var(--v-solid-engrave);
}

.vs-btn--primary:hover,
.vs-btn--primary:focus-visible {
  color: var(--v-on-primary);
}

.vs-btn--primary.vs-press:active {
  --neu-a: var(--v-primary-pressed);
  --neu-b: var(--v-primary-pressed);
  box-shadow: var(--v-neu-solid-pressed);
}

.vs-btn--primary:focus-visible {
  outline-color: var(--v-primary);
}

/* ── Selecteur (onglets, bascule) ────────────────────────────────────────────
   Une plaque de la matiere (.vs-neu, aretes seules) ; l'element selectionne
   y est ENFONCE, comme tamponne ; un element a plat se souleve a peine au
   survol. Deux usages :
   - des onglets : <button role="tab"> selectionne par aria-selected, avec
     le geste anime .is-stamped pose par assets/js/tabs.js ;
   - une bascule sans script : <input type="radio" class="visually-hidden">
     suivi de son <label class="vs-segment__item">. */
.vs-segment {
  --bar-pad: 8px;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--bar-pad);
  gap: 4px;
  overflow-x: auto;
  border-radius: var(--v-radius-lg);
  scrollbar-width: none;
}

.vs-segment::-webkit-scrollbar {
  display: none;
}

.vs-segment__item {
  --neu-a: var(--v-neu-clear);
  --neu-b: var(--v-neu-clear);
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-2);
  height: 44px;
  margin: 0;
  padding: 0 var(--v-space-5);
  border: 0;
  border-radius: calc(var(--v-radius-lg) - var(--bar-pad));
  background: linear-gradient(145deg, var(--neu-a), var(--neu-b));
  box-shadow: var(--v-neu-flat);
  color: var(--v-neu-text-muted);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow var(--v-neu-out), transform var(--v-neu-out),
              --neu-a var(--v-neu-out), --neu-b var(--v-neu-out), color .25s ease;
}

.vs-segment__item:hover {
  --neu-a: var(--v-neu-hover-a);
  --neu-b: var(--v-neu-hover-b);
  box-shadow: var(--v-neu-hint);
  color: var(--v-neu-text);
}

/* L'element CHOISI porte l'accent : son texte et son icone passent en
   orange (le meme dosage que la plateforme : ce qui est choisi). */

.vs-segment__item[aria-selected="true"],
.vs-segment__item[aria-current="true"],
input:checked + .vs-segment__item {
  --neu-a: var(--v-neu-concave-a);
  --neu-b: var(--v-neu-concave-b);
  box-shadow: var(--v-neu-pressed);
  transform: scale(.985);
  color: var(--v-primary-ink);
  text-shadow: none;
}

/* Le geste de selection des onglets. */
.vs-segment__item.is-stamped {
  animation: vs-neu-stamp .46s cubic-bezier(.3, 0, .3, 1);
}

@keyframes vs-neu-stamp {
  0%   { box-shadow: var(--v-neu-flat);    transform: scale(1); }
  38%  { box-shadow: var(--v-neu-deep);    transform: scale(.965); }
  100% { box-shadow: var(--v-neu-pressed); transform: scale(.985); }
}

/* Un choix indisponible (ex. une langue pas encore traduite) : a plat,
   eteint, sans reaction au survol. */
.vs-segment__item[aria-disabled="true"] {
  --neu-a: var(--v-neu-clear);
  --neu-b: var(--v-neu-clear);
  box-shadow: var(--v-neu-flat);
  color: var(--v-text-faint);
  cursor: default;
}

/* Un choix en lien (bascule de langue) : pas de soulignement. */
a.vs-segment__item {
  text-decoration: none;
}

.vs-segment__item:focus-visible,
input:focus-visible + .vs-segment__item {
  outline: 2px solid var(--v-neu-text);
  outline-offset: 2px;
}

/* ── Champ de formulaire ─────────────────────────────────────────────────────
   Un libelle au-dessus, puis le champ GRAVE dans la matiere (creux leger,
   plus profond au focus), comme la barre de chat du hero. Vaut pour input,
   select et textarea. */
.vs-field {
  display: grid;
  gap: var(--v-space-2);
}

.vs-field__label {
  font-size: var(--v-fs-small);
  font-weight: 600;
  color: var(--v-text);
}

.vs-field__input {
  --neu-a: var(--v-neu-well-a);
  --neu-b: var(--v-neu-well-b);
  width: 100%;
  min-height: 52px;
  padding: var(--v-space-3) var(--v-space-5);
  border: 0;
  outline: 0;
  border-radius: var(--v-radius-sm);
  background: linear-gradient(145deg, var(--neu-a), var(--neu-b));
  box-shadow: var(--v-neu-well);
  color: var(--v-neu-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  caret-color: var(--v-primary);
  transition: box-shadow var(--v-neu-out), --neu-a var(--v-neu-out), --neu-b var(--v-neu-out);
}

.vs-field__input:focus {
  --neu-a: var(--v-neu-concave-a);
  --neu-b: var(--v-neu-concave-b);
  box-shadow: var(--v-neu-pressed);
}

.vs-field__input::placeholder {
  color: var(--v-neu-text-muted);
  opacity: 1;
}

textarea.vs-field__input {
  min-height: 160px;
  resize: vertical;
}

/* La liste deroulante : sans fleche du systeme, un chevron dessine a la
   place, dans la couleur du texte attenue. */
select.vs-field__input {
  appearance: none;
  padding-right: var(--v-space-12);
  background:
    var(--v-select-chevron) right var(--v-space-5) center / 18px no-repeat,
    linear-gradient(145deg, var(--neu-a), var(--neu-b));
  cursor: pointer;
}

select.vs-field__input option {
  background: var(--v-surface);
  color: var(--v-text);
}

/* ── Lien secondaire ──────────────────────────────────────────────────────────
   .vs-link : lien texte attenue, blanc au survol, avec son icone (lien
   externe, documentation...). */
.vs-link {
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-2);
  font-size: var(--v-fs-body);
  font-weight: 500;
  color: var(--v-text-muted);
  text-decoration: none;
  transition: color .2s ease;
}

.vs-link:hover,
.vs-link:focus-visible {
  color: var(--v-text);
}

.vs-link .vs-ico {
  font-size: 1.15em;
}

/* ── Badge ───────────────────────────────────────────────────────────────────
   Petit rectangle en relief (.vs-neu), pour une annonce ou une date. Le
   libelle porte l'accent orange (__label), la suite est blanche (__text).
   Sans comportement de bouton ; en lien, ajouter .vs-press. */
.vs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--v-space-4);
  border-radius: var(--v-radius-sm);
  font-size: var(--v-fs-tiny);
  font-weight: 600;
  color: var(--v-text);
  text-decoration: none;
}

/* Orange uni (plus de degrade, 29/09/2026). Sans ombre de texte : le texte
   grave des commandes enfoncees salirait l'orange. */
.vs-badge__label {
  color: var(--v-primary-ink);
  text-shadow: none;
}

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

/* ── Lecteur video ───────────────────────────────────────────────────────────
   partials/components/player.php + assets/js/video.js. Cadre 16:9 a la
   largeur de reference. Commandes rondes en relief : un grand bouton lecture
   au centre (qui s'efface en lecture et revient au survol), un bouton son en
   bas a droite, une barre de progression cliquable ; les deux derniers
   n'apparaissent qu'apres le premier lancement. */
.vs-player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--v-radius-lg);
  background: var(--v-surface);
}

.vs-player__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.vs-player__play,
.vs-player__sound {
  position: absolute;
  cursor: pointer;
  transition: box-shadow var(--v-neu-out), transform var(--v-neu-out),
              --neu-a var(--v-neu-out), --neu-b var(--v-neu-out), opacity .3s ease;
}

.vs-player__play:active,
.vs-player__sound:active {
  transition: box-shadow var(--v-neu-in), transform var(--v-neu-in),
              --neu-a var(--v-neu-in), --neu-b var(--v-neu-in), opacity .3s ease;
}

.vs-player__play:focus-visible,
.vs-player__sound:focus-visible {
  outline-offset: 3px;
}

/* Le grand bouton, centre par translate : ses etats le gardent centre. Le
   triangle est decale d'un poil : son centre optique n'est pas son centre
   geometrique. */
.vs-player__play {
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  font-size: 30px;
  transform: translate(-50%, -50%);
}

.vs-player__play:hover {
  transform: translate(-50%, calc(-50% - 1px));
}

.vs-player__play:active {
  transform: translate(-50%, -50%) scale(.96);
}

.vs-player__ico {
  line-height: 0;
}

/* Le triangle de lecture porte l'accent, la pastille reste neutre (comme
   la fleche d'envoi de la barre de chat). */
.vs-player__ico--play {
  color: var(--v-primary);
}

.vs-player__ico--play .vs-ico {
  transform: translateX(2px);
}

.vs-player__ico--pause,
.vs-player.is-playing .vs-player__ico--play,
.vs-player__ico--off,
.vs-player.is-muted .vs-player__ico--on {
  display: none;
}

.vs-player.is-playing .vs-player__ico--pause,
.vs-player.is-muted .vs-player__ico--off {
  display: block;
}

.vs-player.is-playing .vs-player__play {
  opacity: 0;
}

.vs-player.is-playing:hover .vs-player__play,
.vs-player.is-playing .vs-player__play:focus-visible {
  opacity: 1;
}

/* Le bouton son : cache avant la premiere lecture, au-dessus de la barre. */
.vs-player__sound {
  right: var(--v-space-5);
  bottom: calc(var(--v-space-6) + 8px);
  width: 48px;
  height: 48px;
  font-size: 22px;
  opacity: 0;
  pointer-events: none;
}

.vs-player.is-started .vs-player__sound {
  opacity: 1;
  pointer-events: auto;
}

/* Progression cliquable : zone de 20px, trait de 3px qui passe a 6px au
   survol ou au glisser, avec une pastille au bout. Trois couches : le fond,
   la part chargee, la part lue. */
.vs-player__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  height: 20px;
  cursor: pointer;
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.vs-player.is-started .vs-player__progress {
  opacity: 1;
  pointer-events: auto;
}

.vs-player__track {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, .14);
  transition: height .2s ease;
}

.vs-player__progress:hover .vs-player__track,
.vs-player__progress:focus-visible .vs-player__track,
.vs-player.is-seeking .vs-player__track {
  height: 6px;
}

.vs-player__buffer,
.vs-player__fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.vs-player__buffer {
  background: rgba(255, 255, 255, .22);
}

.vs-player__fill {
  background: var(--v-primary);
}

.vs-player__knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--v-primary);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .2s ease;
}

.vs-player__progress:hover .vs-player__knob,
.vs-player__progress:focus-visible .vs-player__knob,
.vs-player.is-seeking .vs-player__knob {
  transform: translate(-50%, -50%) scale(1);
}

.vs-player__progress:focus-visible {
  outline: 2px solid var(--v-text);
  outline-offset: -4px;
}

@media (max-width: 575.98px) {
  .vs-player__play {
    width: 68px;
    height: 68px;
    font-size: 24px;
  }
}

/* ── En-tete ─────────────────────────────────────────────────────────────────
   Fixe. Transparent tout en haut, pose sur la video du hero. Des qu'on
   defile (.is-scrolled, pose par assets/js/header.js), il prend le fond
   opaque de la page, un peu plus haut ; un filet sombre marque son bord bas.
   Deux elements, a la largeur de reference : le logo et « Se connecter ». */
.vs-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--v-space-5) 0;
  background: rgba(var(--v-bg-rgb), 0);
  transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
}

.vs-header.is-scrolled {
  padding: var(--v-space-4) 0;
  background: rgba(var(--v-bg-rgb), 1);
  box-shadow: inset 0 -1px 0 var(--v-edge-shadow), 0 1px 0 var(--v-hairline);
}

.vs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-space-4);
}

.vs-header__logo {
  display: inline-flex;
  line-height: 0;
}

.vs-header__logo img {
  height: 38px;
  width: auto;
  filter: var(--v-logo-filter);
  transition: filter .3s ease;
}

/* Se connecter, deux etats qui suivent l'en-tete :
   - en haut de page, sur la video : texte blanc seul ;
   - des qu'on defile : bouton dans la matiere en relief.
   Aucun effet au survol (ni soulignement, ni soulevement) ; le clavier garde
   un contour au focus.
   Le passage est anime : la surface et les aretes partent de zero et
   transparentes (--v-neu-clear, --v-neu-flat), et le rembourrage s'ouvre. */
.vs-header__login {
  --neu-a: var(--v-neu-clear);
  --neu-b: var(--v-neu-clear);
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0;
  border-radius: var(--v-radius-sm);
  background: linear-gradient(145deg, var(--neu-a), var(--neu-b));
  box-shadow: var(--v-neu-flat);
  color: var(--v-text);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: box-shadow var(--v-neu-out), transform var(--v-neu-out),
              --neu-a .3s ease, --neu-b .3s ease, padding .3s ease;
}

.vs-header__login:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.vs-header.is-scrolled .vs-header__login {
  --neu-a: var(--v-neu-convex-a);
  --neu-b: var(--v-neu-convex-b);
  padding: 0 var(--v-space-5);
  box-shadow: var(--v-neu-edge);
  color: var(--v-neu-text);
  text-shadow: var(--v-neu-engrave);
  font-size: var(--v-fs-small);
  font-weight: 600;
}

.vs-header.is-scrolled .vs-header__login:active {
  --neu-a: var(--v-neu-concave-a);
  --neu-b: var(--v-neu-concave-b);
  box-shadow: var(--v-neu-pressed);
  transform: translateY(1px) scale(.985);
  transition: box-shadow var(--v-neu-in), transform var(--v-neu-in),
              --neu-a var(--v-neu-in), --neu-b var(--v-neu-in);
}

.vs-header.is-scrolled .vs-header__login:focus-visible {
  outline: 2px solid var(--v-neu-text);
  outline-offset: 3px;
}

/* ── Pied de page ────────────────────────────────────────────────────────────
   Une surface un cran au-dessus du fond, qui prend le dessus sur le globe
   du manifesto ; son arete haute, un filet de lumiere, marque le bord. En
   haut : la colonne de marque (logo, phrase, reseaux en pastilles rondes
   en relief) puis les colonnes de liens. En bas : le copyright, centre. */
.vs-footer {
  padding: var(--v-space-20) 0 var(--v-space-10);
  background: var(--v-surface);
  box-shadow: inset 0 1px 0 var(--v-hairline);
}

.vs-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: var(--v-space-12) var(--v-space-10);
}

.vs-footer__logo {
  display: inline-flex;
  line-height: 0;
}

.vs-footer__logo img {
  width: auto;
  height: 30px;
  filter: var(--v-logo-filter);
}

.vs-footer__tagline {
  max-width: 26ch;
  margin: var(--v-space-5) 0 0;
  font-size: var(--v-fs-small);
  line-height: 1.55;
  color: var(--v-text-muted);
}

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

/* Pastille de reseau : .vs-round .vs-neu .vs-press ; icone attenuee, blanche
   au survol. */
.vs-footer__round {
  --press-scale: .96;
  width: 44px;
  height: 44px;
  color: var(--v-neu-text-muted);
  font-size: 18px;
  transition: box-shadow var(--v-neu-out), transform var(--v-neu-out),
              --neu-a var(--v-neu-out), --neu-b var(--v-neu-out), color .25s ease;
}

.vs-footer__round:hover {
  color: var(--v-primary-ink);
}

.vs-footer__round:focus-visible {
  outline-offset: 3px;
}

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

.vs-footer__title {
  margin: 0 0 var(--v-space-4);
  font-size: var(--v-fs-small);
  font-weight: 600;
  color: var(--v-text);
}

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

.vs-footer__links a {
  font-size: var(--v-fs-small);
  color: var(--v-text-muted);
  text-decoration: none;
  transition: color .2s ease;
}

.vs-footer__links a:hover,
.vs-footer__links a:focus-visible {
  color: var(--v-text);
}

/* Derniere ligne : copyright a gauche, bascule de theme a droite (l'une
   sous l'autre, centrees, sur telephone). */
.vs-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-space-4) var(--v-space-6);
  padding-top: var(--v-space-8);
  box-shadow: inset 0 1px 0 var(--v-hairline);   /* filet, pas une bordure */
}

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

/* Les bascules (langue, theme), cote a cote ; l'une sous l'autre si la
   place manque. */
.vs-footer__switches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--v-space-3);
}

/* Une bascule : la brique .vs-segment, en plus compact. */
.vs-footer__switch {
  --bar-pad: 4px;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: var(--v-radius-sm);
}

.vs-footer__switch .vs-segment__item {
  height: 36px;
  padding: 0 var(--v-space-4);
  border-radius: calc(var(--v-radius-sm) - var(--bar-pad));
  font-size: var(--v-fs-tiny);
}

.vs-footer__switch .vs-ico {
  font-size: 16px;
}

/* Tablette : la marque au-dessus des liens. Mobile : liens sur deux colonnes. */
@media (max-width: 991.98px) {
  .vs-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .vs-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--v-space-10);
  }

  .vs-footer__bottom {
    flex-direction: column-reverse;
  }
}

/* ── Barre de chat du hero ───────────────────────────────────────────────────
   Une plaque de la matiere, posee sur la video, qui en SORT (seule commande
   avec une ombre portee : --v-neu-plate). Dedans, le champ est GRAVE (creux
   leger, plus profond au focus) et le bouton d'envoi en sort. Tout sur une
   ligne, rayons concentriques. */
.vs-prompt {
  --prompt-r: var(--v-radius-lg);
  --prompt-pad: 10px;
  position: relative;
  width: 100%;
  max-width: 720px;
  text-align: left;
}

.vs-prompt__card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--prompt-pad);
  padding: var(--prompt-pad);
  border-radius: var(--prompt-r);
  background: linear-gradient(145deg, var(--v-neu-convex-a), var(--v-neu-convex-b));
  box-shadow: var(--v-neu-plate);
  color: var(--v-neu-text);
}

.vs-prompt__input {
  --neu-a: var(--v-neu-well-a);
  --neu-b: var(--v-neu-well-b);
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 var(--v-space-5);
  border: 0;
  outline: 0;
  border-radius: calc(var(--prompt-r) - var(--prompt-pad));
  text-overflow: ellipsis;
  background: linear-gradient(145deg, var(--neu-a), var(--neu-b));
  box-shadow: var(--v-neu-well);
  color: var(--v-neu-text);
  font: inherit;
  font-size: 1.0625rem;
  caret-color: var(--v-primary);
  transition: box-shadow var(--v-neu-out), --neu-a var(--v-neu-out), --neu-b var(--v-neu-out);
}

.vs-prompt__input:focus {
  --neu-a: var(--v-neu-concave-a);
  --neu-b: var(--v-neu-concave-b);
  box-shadow: var(--v-neu-pressed);
}

.vs-prompt__input::placeholder {
  color: var(--v-neu-text-muted);
  opacity: 1;
}

/* Envoi : .vs-neu .vs-press, un carre aux rayons concentriques. Neutre en
   relief, SEULE la fleche est orange (le bouton d'envoi de la plateforme). */
.vs-prompt__send {
  --press-scale: .97;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--prompt-r) - var(--prompt-pad));
  color: var(--v-primary);
  font-size: 22px;
  cursor: pointer;
}

.vs-prompt__send:focus-visible {
  outline-offset: 3px;
}