/*
 * Le site vaquia.com — transcription des planches Claude Design du 29/09/2026
 * (« Vaquia Site » et « Vaquia Légal »). Mêmes tokens que l'application : le
 * site n'introduit aucune valeur nouvelle.
 *
 * La police est servie depuis vaquia.com, pas depuis Google Fonts : chaque
 * visite enverrait sinon l'adresse IP du visiteur à Google — difficile à
 * concilier avec une page qui promet que les données ne sont pas partagées.
 */

@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url('/polices/PlusJakartaSans_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url('/polices/PlusJakartaSans_600SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url('/polices/PlusJakartaSans_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-display: swap; src: url('/polices/PlusJakartaSans_800ExtraBold.ttf') format('truetype'); }

:root {
  --surface: #0f1724;
  --card: #182233;
  --card-elevated: #1e2a3d;
  --text-1: #f0f4f8;
  --text-2: #c8d3e0;
  --text-3: #7b8fa3;
  --mint: #4dd9b4;
  --blue: #5b8def;
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text-1);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--mint); text-decoration: none; }
a:hover { color: var(--text-1); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 8px; }
summary::-webkit-details-marker { display: none; }
details[open] .plus { transform: rotate(45deg); }
.plus { transition: transform 0.15s ease; }

/* Les états de survol de la maquette (`style-hover`). */
.lien-discret { color: var(--text-2); }
.lien-discret:hover { color: var(--text-1); }
.btn-menthe { background: var(--mint); color: var(--surface); }
.btn-menthe:hover { background: var(--text-1); color: var(--surface); }
.btn-carte { background: var(--card); color: var(--text-1); }
.btn-carte:hover { background: var(--card-elevated); color: var(--text-1); }
.btn-sureleve { background: var(--card-elevated); color: var(--text-1); }
.btn-sureleve:hover { background: #26344a; color: var(--text-1); }
.sommaire a:hover { background: var(--card-elevated); color: var(--text-1); }

/* Pages légales : sommaire collant sur ordinateur, en tête sur mobile. */
@media (min-width: 900px) {
  .sommaire { position: sticky; top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plus { transition: none; }
}

/* Le fond : halos + grain (planche « Vaquia Site »). Décoratif seulement :
   ni clic, ni lecteur d'écran, et tout le contenu passe au-dessus. */
.halos {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1400px;
  pointer-events: none;
  overflow: hidden;
}
.halos-bas { top: 2600px; height: 1200px; }
.halo { position: absolute; border-radius: 50%; }
.halo-menthe {
  width: 900px; height: 900px; left: -280px; top: -360px;
  background: radial-gradient(closest-side, rgba(77, 217, 180, 0.13), rgba(77, 217, 180, 0));
}
.halo-bleu {
  width: 900px; height: 900px; right: -240px; top: 40px;
  background: radial-gradient(closest-side, rgba(91, 141, 239, 0.14), rgba(91, 141, 239, 0));
}
.halo-menthe-bas {
  width: 620px; height: 620px; left: 30%; top: 520px;
  background: radial-gradient(closest-side, rgba(77, 217, 180, 0.07), rgba(77, 217, 180, 0));
}
.halo-rappel {
  width: 800px; height: 800px; left: 50%; margin-left: -400px; top: 0;
  background: radial-gradient(closest-side, rgba(91, 141, 239, 0.08), rgba(91, 141, 239, 0));
}
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Les états de départ des animations (anim.js). Posés seulement quand la
   classe `vq-anim` l'est : sans JavaScript ou avec « Réduire les
   animations », tout est visible d'emblée. */
.vq-anim [data-vq-hero],
.vq-anim [data-vq-row],
.vq-anim [data-vq-reveal],
.vq-anim [data-vq-note] {
  opacity: 0;
}
.halos, .halo { will-change: transform; }

/* La démo du rendez-vous (planche « Vaquia Site », section rendez-vous). */
.rdv-carte {
  position: absolute; left: 0; right: 0; top: 28px; bottom: 0;
  background: #1e2a3d; border-radius: 20px; padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35); transform-origin: 50% 0;
}
.rdv-tampon {
  position: absolute; top: 20px; z-index: 1; padding: 8px 14px; border-radius: 14px;
  color: #0f1724; font-weight: 800; font-size: 16px; white-space: nowrap; opacity: 0;
}
.rdv-haut, .rdv-ligne { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rdv-pastille { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.rdv-date { font-size: 13px; color: #7b8fa3; font-weight: 600; }
.rdv-centre { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.rdv-montant { font-size: clamp(36px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; }
.rdv-libelle { font-size: 19px; font-weight: 700; }
.rdv-pied {
  display: flex; flex-direction: column; gap: 10px; padding-top: 16px;
  border-top: 1px solid rgba(240, 244, 248, 0.08); font-size: 14px;
}
.rdv-cle { color: #7b8fa3; }
.rdv-qui { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.rdv-val { font-weight: 700; text-align: right; }
.rdv-avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%; color: #0f1724;
  font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center;
}
.rdv-bouton {
  flex: 1; min-width: 0; height: 60px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-weight: 700; font-size: 14px;
}