/* Programme ambassadeurs (ambassadeur.php). Chargée avec vg-carte.css, dont elle
   réutilise l'en-tête (.vgc-head), les champs (.vgc-field, .vgc-input) et les
   encadrés (.vgc-notice). Mobile d'abord : 16 px de gouttière, jamais de
   défilement horizontal, tableaux en cartes empilées sous 768 px.

   Un seul élément fort : la plaque « Ton code » (encre + doré). Le doré #d9ab52
   ne s'emploie QUE sur l'encre : sur blanc il tombe sous 2:1 de contraste. */

.vga {
  --vga-encre: #141210;
  --vga-papier: #fff;
  --vga-sable: #f6f2ec;
  --vga-filet: #e3ddd3;
  --vga-gris: #6b6b6b;
  --vga-or: #d9ab52;
  --vga-ok: #1e5c37;
  --vga-ok-fond: #e7f4ec;
  --vga-att: #6a3c00;
  --vga-att-fond: #fff4e5;
  --vga-ko: #8a1c1c;
  --vga-ko-fond: #fdecea;
  overflow-wrap: anywhere;
}
@media (max-width: 575px) {
  .vga > .container { padding-left: 16px; padding-right: 16px; }
}
.vga .vgc-notice.is-ok { background: var(--vga-ok-fond); color: var(--vga-ok); }
.vga .vgc-head { margin-bottom: 24px; }

/* ───────── Titres ───────── */
.vga-h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; line-height: 1.2; margin: 0 0 8px; color: var(--vga-encre); }
.vga-h2--sec { font-size: clamp(24px, 3.4vw, 30px); margin: 48px 0 20px; }
.vga-h3 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--vga-encre); }
.vga-h3--liste { margin-top: 32px; }
.vga-intro { color: #4a4a4a; font-size: 15px; line-height: 1.6; margin: 0 0 18px; max-width: 62ch; }
.vga-facultatif { font-weight: 400; color: var(--vga-gris); }

/* ───────── Boutons ───────── */
.vga-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 1px solid var(--vga-encre); border-radius: 4px;
  background: var(--vga-encre); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.vga-btn:hover { background: #3a3631; border-color: #3a3631; color: #fff; }
.vga-btn.is-ghost { background: transparent; color: var(--vga-encre); }
.vga-btn.is-ghost:hover { background: var(--vga-encre); color: #fff; }
.vga-btn[disabled] { opacity: .55; cursor: progress; }
.vga-btn:focus-visible, .vga-lien-btn:focus-visible, .vga-ancres a:focus-visible, .vga-moyen input:focus-visible + span {
  outline: 2px solid var(--vga-encre); outline-offset: 2px;
}
.vga-lien-btn { background: none; border: 0; padding: 8px 0; min-height: 40px; color: var(--vga-encre); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ───────── Ancres de section ───────── */
.vga-ancres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.vga-ancres a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--vga-filet); border-radius: 99px; color: var(--vga-encre); font-size: 14px; font-weight: 600; text-decoration: none;
}
.vga-ancres a:hover { border-color: var(--vga-encre); }
.vga-pastille {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 99px; background: var(--vga-encre); color: #fff; font: 700 12px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.vga-pastille[hidden] { display: none; }
.vga-h2 .vga-pastille { margin-left: 6px; }

/* Sections : décalage pour l'en-tête collant quand on suit une ancre. */
.vga [id] { scroll-margin-top: 96px; }

/* ───────── Plaque « Ton code » ───────── */
.vga-code {
  background: var(--vga-encre); color: #f2f0eb; border-radius: 6px; padding: 22px 18px 20px;
}
.vga-code__titre { font-family: inherit; font-size: 14px; font-weight: 600; color: rgba(242,240,235,.7); margin: 0 0 4px; }
.vga-code__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.vga-code__valeur {
  font-family: 'DM Mono', ui-monospace, Consolas, monospace; font-weight: 500; color: var(--vga-or);
  font-size: clamp(40px, 13vw, 76px); line-height: 1; letter-spacing: .04em; margin: 4px 0 6px;
  overflow-wrap: anywhere;
}
.vga-code__attente { margin: 8px 0 0; color: rgba(242,240,235,.85); }
.vga-code__deal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(242,240,235,.16); }
.vga-code__deal dt { font-weight: 400; font-size: 13px; color: rgba(242,240,235,.62); }
.vga-code__deal dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; color: #f2f0eb; }

.vga-btn.is-or { background: var(--vga-or); border-color: var(--vga-or); color: var(--vga-encre); }
.vga-btn.is-or:hover { background: #e6bd6b; border-color: #e6bd6b; color: var(--vga-encre); }
.vga-btn.is-clair { background: transparent; border-color: rgba(242,240,235,.4); color: #f2f0eb; }
.vga-btn.is-clair:hover { background: #f2f0eb; border-color: #f2f0eb; color: var(--vga-encre); }
.vga-code .vga-btn:focus-visible { outline-color: var(--vga-or); }
.vga-btn.is-fait { background: #f2f0eb; border-color: #f2f0eb; color: var(--vga-encre); }

.vga-lien { margin-top: 20px; }
.vga-lien label { display: block; font-size: 13px; color: rgba(242,240,235,.62); margin-bottom: 6px; }
.vga-lien__champ {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(242,240,235,.22); border-radius: 4px;
  background: rgba(255,255,255,.06); color: #f2f0eb; font: 500 14px/1.3 'DM Mono', ui-monospace, Consolas, monospace;
  text-overflow: ellipsis;
}
.vga-lien__champ:focus { outline: 2px solid var(--vga-or); outline-offset: 1px; }
.vga-lien__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); gap: 8px; margin-top: 10px; }
.vga-lien__actions .vga-btn[hidden] { display: none; }

/* Exemple sur la page de présentation */
.vga-code--exemple .vga-code__titre { margin-bottom: 0; }

/* ───────── Gains ───────── */
.vga-gains { padding: 4px 0 0; }
.vga-solde { margin: 6px 0 0; }
.vga-solde__lib { display: block; font-size: 14px; color: var(--vga-gris); }
.vga-solde__val {
  display: block; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 10vw, 56px); line-height: 1.05;
  color: var(--vga-encre); font-variant-numeric: tabular-nums;
}
.vga-solde__aide { font-size: 14px; color: var(--vga-gris); margin: 6px 0 20px; }
.vga-solde__aide a { color: var(--vga-encre); font-weight: 600; }
.vga-chiffres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--vga-filet); }
.vga-chiffres > div { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--vga-filet); min-width: 0; }
.vga-chiffres > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--vga-filet); }
.vga-chiffres dt { font-weight: 400; font-size: 13px; color: var(--vga-gris); }
.vga-chiffres dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: var(--vga-encre); font-variant-numeric: tabular-nums; }
.vga-chiffres dd.vga-chiffres__aide { font-size: 12px; font-weight: 400; color: var(--vga-gris); }

/* Une valeur qui change en direct s'éclaire une fois : on voit ce qui a bougé. */
@media (prefers-reduced-motion: no-preference) {
  .is-maj { animation: vga-maj 1.6s ease-out; }
  @keyframes vga-maj { 0% { background: #f3e2bd; } 100% { background: transparent; } }
}

/* ───────── Blocs ───────── */
.vga-dash { display: grid; gap: 48px; }
.vga-haut { display: grid; gap: 28px; }
.vga-bloc { min-width: 0; }
.vga-bas { display: grid; gap: 48px; }
.vga-vide { background: var(--vga-sable); border-radius: 4px; padding: 16px; font-size: 14px; line-height: 1.55; color: #4a4a4a; margin: 0; }
.vga-vide p { margin: 0; }
.vga-vide p + p { margin-top: 4px; }
.vga-vide[hidden] { display: none; }

/* ───────── Tableaux : cartes empilées sur mobile ───────── */
.vga-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vga-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vga-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px 0; border-bottom: 1px solid var(--vga-filet); }
.vga-table tr:first-child { border-top: 1px solid var(--vga-filet); }
.vga-table th, .vga-table td { display: block; padding: 0; text-align: left; font-weight: 400; min-width: 0; }
.vga-table tbody th { grid-column: 1 / -1; }
.vga-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--vga-gris); margin-bottom: 1px; }
.vga-ref { font-weight: 700; color: var(--vga-encre); font-variant-numeric: tabular-nums; }
.vga-sous { display: block; font-size: 12px; color: var(--vga-gris); margin-top: 2px; }
.vga-ref + .vga-sous { display: inline; margin-left: 8px; }
.vga-table .is-num { font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  .vga-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: table-header-group; }
  .vga-table tr { display: table-row; padding: 0; }
  .vga-table th, .vga-table td { display: table-cell; padding: 12px 12px 12px 0; vertical-align: top; border-bottom: 1px solid var(--vga-filet); }
  .vga-table tr, .vga-table tr:first-child { border: 0; }
  .vga-table thead th { font-size: 12px; font-weight: 600; color: var(--vga-gris); border-bottom-color: var(--vga-encre); padding-top: 0; }
  .vga-table td::before { content: none; }
  .vga-table .is-num { text-align: right; padding-right: 24px; }
  .vga-ref + .vga-sous { display: block; margin-left: 0; }
}

/* ───────── États (commission, retrait) ───────── */
.vga-etat {
  display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700;
  background: var(--vga-att-fond); color: var(--vga-att);
}
.vga-etat.is-validee, .vga-etat.is-r-paye { background: var(--vga-ok-fond); color: var(--vga-ok); }
.vga-etat.is-annulee, .vga-etat.is-r-refuse { background: var(--vga-ko-fond); color: var(--vga-ko); }
.vga-etat.is-r-approuve { background: var(--vga-sable); color: var(--vga-encre); }

/* ───────── Retraits ───────── */
.vga-retraits { display: grid; gap: 32px; }
.vga-form { min-width: 0; }
.vga-actuel { font-size: 14px; color: #4a4a4a; margin: 0 0 14px; line-height: 1.55; }
.vga-moyens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 16px; }
.vga-moyen { position: relative; display: block; margin: 0; cursor: pointer; }
.vga-moyen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vga-moyen span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 10px; text-align: center;
  border: 1px solid #cfc8bc; border-radius: 4px; font-size: 14px; font-weight: 600; color: var(--vga-encre); background: #fff;
}
.vga-moyen input:checked + span { border-color: var(--vga-encre); box-shadow: inset 0 0 0 1px var(--vga-encre); background: var(--vga-sable); }
.vga-montant { display: flex; gap: 8px; }
.vga-montant .vgc-input { flex: 1 1 0; width: auto; min-width: 0; }
.vga-montant .vga-btn { flex: none; padding: 0 14px; }
/* La validation en direct du site (vg-app.js) glisse son message juste après le
   champ, donc DANS cette rangée : on le renvoie sur sa propre ligne, sous le bouton. */
.vga-montant { flex-wrap: wrap; }
.vga-montant .vg-field-error { order: 3; flex: 0 0 100%; }
.vga-msg { background: var(--vga-ko-fond); color: var(--vga-ko); padding: 12px 14px; border-radius: 4px; font-size: 14px; margin: 0 0 14px; }
.vga-msg[hidden] { display: none; }
.vga-form .vga-btn[type="submit"] { width: 100%; }
.vga textarea.vgc-input { min-height: 0; line-height: 1.5; resize: vertical; }

/* ───────── Notifications ───────── */
.vga-notifs__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.vga-notifs__tete form { margin: 0; }
.vga-direct { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vga-gris); margin: 0 0 12px; }
.vga-direct__point { width: 8px; height: 8px; border-radius: 50%; background: #2f8a55; }
@media (prefers-reduced-motion: no-preference) {
  .vga-direct__point { animation: vga-pouls 2.4s ease-in-out infinite; }
  @keyframes vga-pouls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
}
.vga-notifs__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vga-filet); }
.vga-notif { position: relative; padding: 14px 0 14px 16px; border-bottom: 1px solid var(--vga-filet); }
.vga-notif::before { content: ""; position: absolute; left: 0; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.vga-notif.is-new::before { background: var(--vga-encre); }
.vga-notif__titre { margin: 0; font-size: 15px; font-weight: 600; color: var(--vga-encre); line-height: 1.35; }
.vga-notif__titre a { color: inherit; text-decoration: underline; text-decoration-color: var(--vga-filet); text-underline-offset: 3px; }
.vga-notif__titre a:hover { text-decoration-color: currentColor; }
.vga-notif:not(.is-new) .vga-notif__titre { font-weight: 400; }
.vga-notif__msg { margin: 3px 0 4px; font-size: 14px; color: #4a4a4a; line-height: 1.5; }
.vga-notif__date { font-size: 12px; color: var(--vga-gris); }
.vga-notifs .vga-vide { margin-top: 0; }
.vga-push { margin-top: 20px; padding: 16px; background: var(--vga-sable); border-radius: 4px; font-size: 14px; }
.vga-push p { margin: 0 0 10px; color: #4a4a4a; }
.vga-push .vga-btn[hidden] { display: none; }
.vga-push .vga-push__etat { margin: 10px 0 0; font-size: 13px; }
.vga-push a { color: var(--vga-encre); }
.vga-push__etat a { display: inline-flex; align-items: center; min-height: 40px; }

/* ───────── Présentation ───────── */
.vga-pres { display: grid; gap: 28px; align-items: center; }
.vga-pres .vgc-head { margin-bottom: 0; }
.vga-etapes { list-style: none; counter-reset: vga-etape; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--vga-encre); }
.vga-etapes li {
  counter-increment: vga-etape; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px;
  padding: 20px 0; border-bottom: 1px solid var(--vga-filet);
}
.vga-etapes li::before {
  content: counter(vga-etape); grid-row: 1 / span 2; font-family: Georgia, 'Times New Roman', serif;
  font-size: 34px; line-height: 1; color: var(--vga-encre);
}
.vga-etapes h3 { font-size: 18px; margin: 2px 0 4px; }
.vga-etapes p { margin: 0; color: #4a4a4a; font-size: 15px; line-height: 1.55; }
.vga-candidature { max-width: 640px; }
.vga-form--cand .vga-btn[type="submit"] { margin-top: 4px; }
.vga-form--cand .vgc-hint { margin-top: 12px; }
.vga-etat-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ───────── Écrans larges ───────── */
@media (min-width: 768px) {
  .vga-code { padding: 30px 30px 26px; }
  .vga-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vga-chiffres > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .vga-chiffres > div:not(:nth-child(3n + 1)) { padding-left: 14px; border-left: 1px solid var(--vga-filet); }
  .vga-moyens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vga-form .vga-btn[type="submit"] { width: auto; }
  .vga-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; border-top: 0; }
  .vga-etapes li { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--vga-encre); border-bottom: 0; padding-top: 16px; }
  .vga-etapes li::before { grid-row: auto; margin-bottom: 14px; font-size: 44px; }
}
@media (min-width: 992px) {
  .vga-haut { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .vga-bas { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .vga-retraits { grid-template-columns: minmax(0, 1fr); }
  .vga-pres { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
}