/* ==========================================================================
   SupBalloon — vitrine : pages publiques (accueil, connexion, inscription, invitation, pages légales)
   S'appuie sur les jetons de atelier.css (mêmes couleurs, polices, clair / sombre que le hub).
   Visiteur : data-mode="auto" (suit le réglage clair / sombre de l'appareil).
   ========================================================================== */

:root { --ciel-haut: #D8E7F3; --ciel-bas: #F7EEE2; --ballon: #C8843C; --ballon-2: #00827A; --ballon-3: #8C5A2B; }
:root[data-mode="sombre"] { --ciel-haut: #0B1220; --ciel-bas: #1D2C44; --ballon: #D9A15B; --ballon-2: #19C3B1; --ballon-3: #E2B276; }
@media (prefers-color-scheme: dark) {
  :root[data-mode="auto"] { --ciel-haut: #0B1220; --ciel-bas: #1D2C44; --ballon: #D9A15B; --ballon-2: #19C3B1; --ballon-3: #E2B276; }
}

body.vt { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- En-tête ---------- */
.vt-entete { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); }
.vt-entete-in { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vt-entete .aa-marque-logo { margin-left: 0; }
.vt-nav { display: flex; align-items: center; gap: 6px; }
.vt-lien { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--rayon-petit);
  font-size: .875rem; font-weight: 600; color: var(--texte-2); white-space: nowrap; }
.vt-lien:hover, .vt-lien[aria-current="page"] { color: var(--texte); background: var(--surface-2); }
.vt-nav form { margin: 0; }
@media (max-width: 479px) { .vt-entete .aa-marque-logo img + img { display: none; } .vt-lien { padding: 0 8px; } }

/* ---------- Contenu, messages, pied ---------- */
.vt-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px 16px 56px; }
.vt-messages { max-width: 36rem; margin: 0 auto 20px; display: flex; flex-direction: column; gap: 10px; }
.vt-pied { border-top: 1px solid var(--ligne); color: var(--texte-2); font-size: .8125rem; }
.vt-pied-in { max-width: 1120px; margin: 0 auto; padding: 20px 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.vt-pied nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.vt-pied a:hover { color: var(--or); }

/* ---------- Ciel : relief, ballons qui flottent ---------- */
.vt-ciel { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--ligne);
  background: linear-gradient(180deg, var(--ciel-haut), var(--ciel-bas)); isolation: isolate; }
.vt-ciel .aa-bandeau-relief { height: 38%; z-index: -1; }
.vt-ballons { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vt-ballon { position: absolute; fill: var(--ballon); opacity: .9; animation: vt-flotte 7s ease-in-out infinite alternate; }
.vt-ballon.b2 { fill: var(--ballon-2); opacity: .75; animation-duration: 9s; animation-delay: -3s; }
.vt-ballon.b3 { fill: var(--ballon-3); opacity: .55; animation-duration: 11s; animation-delay: -5s; }
@keyframes vt-flotte { from { transform: translateY(0); } to { transform: translateY(-14px); } }

/* ---------- Boutons larges ---------- */
.vt-bouton-large { min-height: 48px; padding: 0 22px; font-size: .9375rem; }

/* ---------- Connexion ---------- */
.vt-connexion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px 16px 72px; }
@media (min-width: 960px) { .vt-connexion { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 48px; padding: 48px 48px 96px; min-height: 560px; } }
.vt-connexion-carte { position: relative; background: var(--surface); border: 1px solid var(--ligne); border-radius: 20px; padding: 26px;
  box-shadow: 0 18px 50px -20px var(--voile); display: flex; flex-direction: column; gap: 16px;
  transition: transform .6s cubic-bezier(.5, 0, .75, 0), opacity .5s ease-in; }
.vt-connexion-carte h1 { font-size: 1.75rem; }
.vt-connexion-carte form { display: flex; flex-direction: column; gap: 14px; }
.vt-ligne-droite { display: flex; justify-content: flex-end; font-size: .8125rem; }
.vt-accroche { display: flex; flex-direction: column; gap: 10px; }
.vt-accroche h2 { font-size: 1.5rem; }
@media (min-width: 960px) { .vt-accroche h2 { font-size: 2rem; } }
.vt-accroche p { color: var(--texte-2); max-width: 32rem; }
.vt-carrousel-zone { margin-top: 10px; }

/* Décollage : à l'envoi, la carte s'élève et le ciel s'ouvre vers le tableau de bord */
.vt-voile { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, var(--ciel-haut), var(--fond)); opacity: 0; pointer-events: none; transition: opacity .5s ease .25s; }
.vt-voile svg { width: 46px; height: 58px; fill: var(--or); }
.vt-voile p { font-family: var(--police-titre); font-weight: 600; color: var(--texte); }
body.vt-decolle .vt-connexion-carte { transform: translateY(-40px) scale(.97); opacity: 0; }
body.vt-decolle .vt-ballon { animation: vt-envol 1s ease-in forwards; }
body.vt-decolle .vt-voile { opacity: 1; }
body.vt-decolle .vt-voile svg { animation: vt-monte 1.4s ease-in-out infinite alternate; }
@keyframes vt-envol { to { transform: translateY(-420px); opacity: 0; } }
@keyframes vt-monte { from { transform: translateY(8px); } to { transform: translateY(-8px); } }

/* ---------- Carrousel (aperçus d'outils, exemples inventés) ---------- */
.vt-carrousel { position: relative; user-select: none; }
.vt-carrousel-fenetre { overflow: hidden; border-radius: 18px; }
.vt-carrousel-piste { display: flex; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.vt-diapo { flex: 0 0 100%; padding: 2px; }
.vt-apercu { background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; padding: 20px; min-height: 19rem;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 30px -18px var(--voile); }
.vt-apercu-tete { display: flex; align-items: center; gap: 10px; }
.vt-apercu-tete .aa-icone { color: var(--or); width: 22px; height: 22px; }
.vt-apercu-tete strong { font-family: var(--police-titre); font-size: 1.05rem; }
.vt-apercu-texte { font-size: .8125rem; color: var(--texte-2); }
.vt-exemple { margin-top: auto; font-size: .6875rem; color: var(--texte-2); opacity: .8; }
.vt-carrousel-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.vt-fleche { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ligne-2); background: var(--surface); color: var(--texte); cursor: pointer; font-size: 1rem; }
.vt-fleche:hover { border-color: var(--or); }
.vt-point { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--ligne-2); cursor: pointer; transition: width .3s, background .3s; }
.vt-point[aria-current="true"] { width: 22px; border-radius: 6px; background: var(--or); }
.vt-mini-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; font-size: .6875rem; }
.vt-mini-grille span { padding: 5px 0; border-radius: 6px; background: var(--surface-2); color: var(--texte-2); position: relative; }
.vt-mini-grille .ent { background: none; font-weight: 600; }
.vt-mini-grille .dispo { background: var(--vert-fond); color: var(--vert); }
.vt-mini-grille .vol { background: var(--or); color: #FFFFFF; }
.vt-mini-grille .meeting { background: var(--turquoise-fond); color: var(--turquoise); }
.vt-mini-grille i { position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; }
.vt-mini-grille i.r { background: var(--rouge); } .vt-mini-grille i.a { background: var(--ambre); } .vt-mini-grille i.v { background: var(--vert); }
.vt-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .6875rem; color: var(--texte-2); }
.vt-legende span { display: inline-flex; align-items: center; gap: 5px; }
.vt-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
@media (prefers-reduced-motion: reduce) {
  .vt-ballon, .vt-carrousel-piste, .vt-connexion-carte, .vt-voile { animation: none !important; transition: none !important; }
}

/* ---------- Accueil ---------- */
.vt-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding: 32px 20px 64px; }
@media (min-width: 960px) { .vt-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; padding: 56px 48px 96px; } }
.vt-hero h1 { font-size: 2.25rem; line-height: 1.1; }
@media (min-width: 960px) { .vt-hero h1 { font-size: 3rem; } }
.vt-hero-texte { display: flex; flex-direction: column; gap: 16px; }
.vt-hero-texte > p { font-size: 1.0625rem; color: var(--texte-2); max-width: 34rem; }
.vt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vt-section { margin-top: 64px; }
.vt-section-tete { text-align: center; max-width: 40rem; margin: 0 auto 28px; display: flex; flex-direction: column; gap: 8px; }
.vt-section-tete h2 { font-size: 1.75rem; }
.vt-section-tete p { color: var(--texte-2); }
.vt-grille { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .vt-grille--3, .vt-grille--4, .vt-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vt-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vt-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vt-outil { display: flex; flex-direction: column; gap: 10px; }
.vt-outil-tete { display: flex; align-items: center; gap: 12px; }
.vt-outil-icone { width: 44px; height: 44px; border-radius: 12px; background: var(--or-fond); color: var(--or); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vt-outil-icone .aa-icone { width: 24px; height: 24px; }
.vt-outil h3 { font-size: 1.125rem; }
.vt-outil p { color: var(--texte-2); font-size: .9375rem; }
.vt-coches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .875rem; }
.vt-coches li { display: flex; gap: 8px; }
.vt-coches li::before { content: "✓"; color: var(--turquoise); font-weight: 700; }
.vt-atout { text-align: center; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.vt-atout strong { font-family: var(--police-titre); font-size: 1.0625rem; }
.vt-atout span { color: var(--texte-2); font-size: .875rem; }
.vt-final { margin-top: 64px; text-align: center; padding: 48px 20px 80px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vt-final h2 { font-size: 2rem; }
.vt-final p { color: var(--texte-2); max-width: 34rem; }

/* ---------- Encart pub (invitation Info pilot) ---------- */
.vt-pub { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.vt-pub h2 { font-size: 1.375rem; }
.vt-pub > p { color: var(--texte-2); }
.vt-pub-outils { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vt-pub-outils span { display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--ligne); border-radius: var(--rayon-petit); padding: 8px 10px; font-size: .8125rem; font-weight: 600; }
.vt-pub-outils .aa-icone { color: var(--or); }

/* Lien d'évitement (clavier) */
.vt-saut { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--surface); color: var(--texte); padding: 8px 14px; border-radius: var(--rayon-petit); }
.vt-saut:focus { left: 8px; }

/* Connexion sur téléphone : le formulaire d'abord, l'aperçu des outils ensuite */
.vt-connexion .vt-connexion-carte { order: -1; }
@media (min-width: 960px) { .vt-connexion .vt-connexion-carte { order: 0; } }

/* ---------- Tarifs (tarifs.php) ---------- */
.vt-tarif { gap: 10px; }
.vt-tarif h2 { font-size: 1.375rem; }
.vt-tarif--mis-en-avant { border-color: var(--or); box-shadow: 0 0 0 1px var(--or); }
.vt-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 4px 0; }
.vt-prix strong { font-family: var(--police-titre); font-size: 2rem; line-height: 1.1; }
.vt-prix span { color: var(--texte-2); font-size: .875rem; }
.vt-prix small { flex-basis: 100%; color: var(--texte-2); font-size: .8125rem; }
.vt-sondage-q { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vt-sondage-q legend { font-size: .875rem; font-weight: 600; margin-bottom: 4px; }
.vt-sondage-q .aa-case { min-height: 34px; }
/* Lien Tarifs de l'en-tête : sur téléphone, seulement dans le pied de page (place) */
.vt-lien-tarifs { display: none; }
@media (min-width: 640px) { .vt-lien-tarifs { display: inline-flex; } }