/* =====================================================================
   Vaayu — site public

   Reprend les jetons de l'application : c'est le meme produit, la page de
   vente ne doit pas ressembler a autre chose. Sous-ensemble volontaire —
   un site vitrine n'a pas besoin de l'echelle complete d'une interface.
   ===================================================================== */

:root {
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   2rem;
  --text-2xl:  2.75rem;

  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 5rem;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;

  --canvas:         #f7f7f8;
  --surface:        #ffffff;
  --surface-sunken: #f1f1f2;
  --line:        #e4e4e7;
  --line-strong: #8a8a8f;
  --ink:        #09090b;
  --ink-muted:  #52525b;
  --ink-subtle: #6b6b70;
  --accent:      #4f46e5;
  --accent-ink:  #ffffff;
  --accent-text: #4338ca;
  --accent-wash: #eef2ff;
  --ok:        #047857;
  --ok-wash:   #ecfdf5;
  --focus: #4338ca;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:         #09090b;
    --surface:        #121214;
    --surface-sunken: #1b1b1f;
    --line:        #27272a;
    --line-strong: #6a6a72;
    --ink:        #fafafa;
    --ink-muted:  #a1a1aa;
    --ink-subtle: #8b8b93;
    --accent:      #a5b4fc;
    --accent-ink:  #1e1b4b;
    --accent-text: #a5b4fc;
    --accent-wash: #1e1b4b;
    --ok:        #6ee7b7;
    --ok-wash:   #052e23;
    --focus: #a5b4fc;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Sur une page courte, le pied de page flottait au milieu du vide. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink-muted);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: var(--accent-text); text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* --- Ossature --- */

.wrap { width: min(64rem, 100% - 2 * var(--s-5)); margin: 0 auto; }
.wrap-etroit { width: min(44rem, 100% - 2 * var(--s-5)); margin: 0 auto; }

header.site {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.bandeau { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-4) 0; }
/* Le signe et le mot forment un couple : le V emporte porte le sens, le mot
   porte le nom. L'un sans l'autre perd la moitie de la marque. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.bandeau nav { margin-left: auto; display: flex; gap: var(--s-5); }
.bandeau nav a { color: var(--ink-muted); font-size: var(--text-sm); text-decoration: none; }
.bandeau nav a:hover { color: var(--ink); }

/* --- Accroche --- */

.accroche { padding: var(--s-8) 0 var(--s-7); text-align: center; }
.accroche h1 {
  font-size: var(--text-2xl);
  line-height: 1.1;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.accroche .sous {
  font-size: var(--text-md);
  margin-top: var(--s-4);
  max-width: 36rem;
  margin-inline: auto;
}

.jauge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: var(--ok-wash);
  border: 1px solid var(--ok);
  color: var(--ok);
  font-size: var(--text-xs);
  font-weight: 600;
}

.boutons { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-top: var(--s-6); }

.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
}
.bouton:hover { filter: brightness(1.12); }
.bouton.fantome {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--line-strong);
}
.bouton.fantome:hover { background: var(--surface-sunken); color: var(--ink); filter: none; }

/* --- Sections --- */

main { flex: 1; }
section { padding: var(--s-7) 0; }
section h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
section > .wrap > p, section > .wrap-etroit > p { margin-top: var(--s-4); }

.etiquette {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: var(--s-2);
}

/* --- Arguments --- */

.grille {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: var(--s-6);
}
.carte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.carte h3 { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.carte p { margin-top: var(--s-2); font-size: var(--text-sm); }

/* --- Offres --- */

.offres {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: var(--s-6);
  align-items: start;
}
.offre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* La formule recommandee se distingue par un contour, jamais par un fond
   colore : le tarif doit rester lisible, pas etre crie. */
.offre.mise-en-avant { border-color: var(--accent); }

.offre h3 { font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.offre .prix { font-size: var(--text-xl); font-weight: 700; color: var(--ink); line-height: 1; }
.offre .prix .unite { font-size: var(--text-sm); font-weight: 400; color: var(--ink-subtle); }
.offre .resume { font-size: var(--text-sm); }

.offre ul { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--text-sm); }
.offre li { display: flex; gap: var(--s-2); align-items: baseline; }
/* Un signe, pas une couleur : « inclus » et « exclu » doivent se
   distinguer en niveaux de gris comme pour qui ne voit pas les teintes. */
.offre li::before { content: "✓"; color: var(--ok); font-weight: 700; flex: 0 0 auto; }
.offre li.hors::before { content: "—"; color: var(--ink-subtle); }
.offre li.hors { color: var(--ink-subtle); }

.offre .bouton { justify-content: center; margin-top: auto; }

/* --- Note --- */

.note {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-sunken);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--text-sm);
}

/* --- Pied --- */

footer.site {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: var(--s-6) 0;
  margin-top: var(--s-7);
  font-size: var(--text-sm);
}
footer.site .lignes { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center; }
footer.site .lignes .pousse { margin-left: auto; color: var(--ink-subtle); }

/* --- Document (politique de confidentialite) --- */

.doc { padding: var(--s-7) 0; line-height: 1.65; }
.doc h1 { font-size: var(--text-xl); font-weight: 700; color: var(--ink); margin-bottom: var(--s-5); }
.doc h2 { font-size: var(--text-md); font-weight: 600; color: var(--ink); margin: var(--s-6) 0 var(--s-3); }
.doc h3 { font-size: var(--text-base); font-weight: 600; color: var(--ink); margin: var(--s-5) 0 var(--s-2); }
.doc p { margin-bottom: var(--s-4); }
.doc ul { list-style: disc; padding-left: var(--s-5); margin-bottom: var(--s-4); }
.doc li { margin-bottom: var(--s-2); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
.doc code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.1em 0.4em;
}

/* Formulaire de la page de connexion. */
.doc-form {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--s-4) 0 var(--s-2);
}
.doc-label {
  flex: 1 0 100%;
  font-size: var(--text-sm);
  color: var(--ink-subtle);
}
.doc-form input {
  flex: 1 1 18rem;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit;
  font-family: ui-monospace, Consolas, monospace;
}
.doc-form input:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.doc-form button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.doc-note { font-size: var(--text-sm); color: var(--ink-subtle); min-height: 1.4em; }
.doc-note:empty { margin: 0; }

.doc-table { overflow-x: auto; margin-bottom: var(--s-4); }
.doc table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.doc th, .doc td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.doc th {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
.doc tbody tr:last-child td { border-bottom: 0; }

.marque .sigle { color: var(--accent-text); flex: 0 0 auto; }