/* ==========================================================================
   AMBASSADEUR.CSS : page « Devenir ambassadeur » (FR et NL)

   Ecrit a la main, comme legal.css : le build Tailwind du site est purge, une
   valeur arbitraire jamais rencontree ailleurs n'y produit aucune regle.

   Partagee par affiliation.php et nl-pages/affiliatie.php. C'est volontaire :
   les deux pages avaient chacune leur bloc <style>, et elles divergeaient.

   Parti pris de la refonte du 2026-08-30 : la page ne promet plus de montant.
   Plus de simulateur a curseur, plus de « 3 EUR par vente », plus de compteur
   de sommes versees, plus de temoignages chiffres. Une promesse de revenus est
   une promesse qu'on ne tient pas toujours, et elle attire des candidats qui
   viennent pour le montant plutot que pour le produit.
   ========================================================================== */

:root {
    --amb-ink:        #e8eef5;
    --amb-ink-strong: #ffffff;
    --amb-ink-soft:   #93a4b8;
    --amb-rule:       rgba(255, 255, 255, .10);
    --amb-surface:    rgba(255, 255, 255, .035);
    --amb-surface-2:  rgba(255, 255, 255, .06);
    --amb-accent:     #8cc63f;
    --amb-btn:        #4e7d1f;
    --amb-btn-hover:  #3d6318;
}
html[data-theme="light"] {
    --amb-ink:        #24384d;
    --amb-ink-strong: #0f2b46;
    --amb-ink-soft:   #5b6f85;
    --amb-rule:       rgba(15, 43, 70, .14);
    --amb-surface:    #ffffff;
    --amb-surface-2:  #f4f7fa;
    --amb-accent:     #4e7d1f;   /* #8cc63f ne donne que 2.05:1 sur blanc */
}

.amb-wrap { max-width: 780px; margin: 0 auto; padding: 0 20px 90px; }

/* ---------- En-tete ---------- */
.amb-head { padding: 52px 0 34px; }
.amb-kicker {
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--amb-accent); margin: 0 0 14px;
}
.amb-head h1 {
    font-size: clamp(30px, 5vw, 44px); line-height: 1.12; font-weight: 800;
    color: var(--amb-ink-strong); margin: 0 0 18px; letter-spacing: -.015em;
}
.amb-lede { font-size: 17.5px; line-height: 1.65; color: var(--amb-ink); margin: 0; }

/* Appel a l'action des l'en-tete.
   Le formulaire est en cinquieme position sur la page, et c'est le bon ordre :
   on explique avant de demander. Mais quelqu'un qui arrive deja convaincu ne
   doit pas avoir a parcourir trois sections pour trouver ou postuler. */
.amb-go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.amb-go a {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--amb-btn); color: #fff; text-decoration: none;
    font-weight: 800; font-size: 15.5px; padding: 14px 26px; border-radius: 999px;
    transition: background-color .2s ease;
}
.amb-go a:hover { background: var(--amb-btn-hover); }
.amb-go span { font-size: 13.5px; color: var(--amb-ink-soft); }

/* ---------- Encadre de mise au point ----------
   Sert a ce qu'on ne promet PAS. Une limite annoncee franchement, mise en
   evidence plutot que releguee en note de bas de page, se lit comme une preuve
   de serieux. Cachee en petits caracteres, elle se lit comme un aveu. */
.amb-note {
    border-left: 3px solid var(--amb-accent);
    background: var(--amb-surface);
    border-radius: 0 12px 12px 0;
    padding: 18px 22px; margin: 0 0 15px;
}
.amb-note p:last-child { margin-bottom: 0; }

/* Adresse d'exemple, dans le texte. Volontairement selectionnable d'un double
   clic : c'est ce qu'on vient copier. */
.amb-code {
    display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px; padding: 3px 9px; border-radius: 7px;
    background: var(--amb-surface-2); border: 1px solid var(--amb-rule);
    color: var(--amb-ink-strong); word-break: break-all;
}

/* ---------- Sections ---------- */
.amb-sec { padding-top: 10px; margin-bottom: 44px; scroll-margin-top: 134px; }
.amb-sec h2 {
    font-size: 21px; font-weight: 800; color: var(--amb-ink-strong);
    margin: 0 0 18px; letter-spacing: -.005em;
}
.amb-sec p { font-size: 15.5px; line-height: 1.72; color: var(--amb-ink); margin: 0 0 15px; }
.amb-sec a { color: var(--amb-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Etapes ---------- */
.amb-steps { list-style: none; margin: 0; padding: 0; counter-reset: ambstep; }
.amb-steps li {
    position: relative; padding: 0 0 22px 52px; margin: 0;
    border-left: 1px solid var(--amb-rule); margin-left: 17px;
}
.amb-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.amb-steps li::before {
    counter-increment: ambstep; content: counter(ambstep);
    position: absolute; left: -17px; top: -2px;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--amb-surface-2); border: 1px solid var(--amb-rule);
    color: var(--amb-accent); font-weight: 800; font-size: 14px;
}
.amb-steps b { display: block; color: var(--amb-ink-strong); font-weight: 700; margin-bottom: 4px; font-size: 16px; }
.amb-steps span { display: block; font-size: 15px; line-height: 1.65; color: var(--amb-ink); }

/* ---------- Liste simple a puces vertes ---------- */
.amb-list { list-style: none; margin: 0; padding: 0; }
.amb-list li {
    position: relative; padding-left: 26px; margin-bottom: 11px;
    font-size: 15.5px; line-height: 1.65; color: var(--amb-ink);
}
.amb-list li::before {
    content: ''; position: absolute; left: 4px; top: .62em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--amb-accent);
}

/* ---------- Formulaire ---------- */
.amb-form { background: var(--amb-surface); border: 1px solid var(--amb-rule); border-radius: 14px; padding: 24px; }
.amb-row { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 620px) { .amb-row.is-two { grid-template-columns: 1fr 1fr; } }

/* Libelles flottants : aucune fausse donnee dans un champ. Meme motif que le
   formulaire de contact, valide par le client le 2026-08-29. */
.amb-field { position: relative; }
.amb-field input, .amb-field textarea {
    width: 100%; padding: 25px 16px 9px; font: inherit; font-size: 15px; line-height: 1.3;
    background: var(--amb-surface-2); border: 1px solid var(--amb-rule);
    border-radius: 10px; color: var(--amb-ink-strong);
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.amb-field textarea { padding-top: 28px; resize: none; }
.amb-field input::placeholder, .amb-field textarea::placeholder { color: transparent; }
.amb-field input:focus, .amb-field textarea:focus {
    outline: none; border-color: var(--amb-accent);
    box-shadow: 0 0 0 3px rgba(140, 198, 63, .18);
}
html[data-theme="light"] .amb-field input,
html[data-theme="light"] .amb-field textarea { background: #ffffff; color: var(--amb-ink-strong); }

.amb-float {
    position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
    font-size: 15px; font-weight: 500; color: var(--amb-ink-soft);
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease, transform .15s ease;
}
.amb-field textarea ~ .amb-float { top: 20px; transform: none; }
.amb-field input:focus ~ .amb-float,
.amb-field input:not(:placeholder-shown) ~ .amb-float,
.amb-field textarea:focus ~ .amb-float,
.amb-field textarea:not(:placeholder-shown) ~ .amb-float {
    top: 9px; transform: none; font-size: 11px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
}
.amb-field input:focus ~ .amb-float, .amb-field textarea:focus ~ .amb-float { color: var(--amb-accent); }
.amb-float .req { color: #f87171; }
.amb-float .opt { color: var(--amb-ink-soft); font-weight: 500; text-transform: none; letter-spacing: 0; }

.amb-help { font-size: 13px; color: var(--amb-ink-soft); margin: 6px 0 0; line-height: 1.55; }
.amb-legend { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
              color: var(--amb-ink-soft); margin: 26px 0 12px; }
/* Les memes marqueurs que sur les libelles flottants. Sans ces deux regles,
   l'asterisque d'un groupe obligatoire s'affichait en gris comme le reste du
   titre, et ne signalait plus rien. */
.amb-legend .req { color: #f87171; }
.amb-legend .opt { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ---------- Choix du canal ----------
   Remplace les quatre champs de reseaux sociaux qui etaient OBLIGATOIRES.
   Le programme s'adresse aussi a un etudiant qui en parlera a sa classe : lui
   demander un compte TikTok avant de le laisser candidater, c'est fermer la
   porte a la majorite des gens qu'on veut recruter.

   Des cases cliquables plutot qu'une liste deroulante : sur mobile, un <select>
   masque ses options derriere un appui, et le candidat ne voit pas qu'il a le
   droit de repondre « a mes amis ». Ici les possibilites sont visibles d'un
   coup d'oeil, et c'est ce message-la qui compte. */
.amb-choice { display: grid; grid-template-columns: 1fr; gap: 9px; margin-bottom: 4px; }
@media (min-width: 620px) { .amb-choice { grid-template-columns: 1fr 1fr; } }

.amb-choice label {
    display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
    padding: 13px 15px; border-radius: 11px;
    background: var(--amb-surface-2); border: 1px solid var(--amb-rule);
    transition: border-color .18s ease, background .18s ease;
}
.amb-choice label:hover { border-color: rgba(140, 198, 63, .45); }
.amb-choice input {
    flex: none; width: 17px; height: 17px; margin-top: 2px;
    accent-color: var(--amb-btn); cursor: pointer;
}
.amb-choice b {
    display: block; font-size: 14.5px; font-weight: 650; line-height: 1.4;
    color: var(--amb-ink-strong);
}
.amb-choice small {
    display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5;
    color: var(--amb-ink-soft);
}
/* :has() n'est pas indispensable ici : sans lui, la case reste cochee et
   lisible, elle n'est simplement pas surlignee. Aucun navigateur ne se
   retrouve avec un formulaire inutilisable. */
.amb-choice label:has(input:checked) {
    border-color: var(--amb-accent); background: rgba(140, 198, 63, .10);
}
.amb-choice label:has(input:focus-visible) {
    outline: 2px solid var(--amb-accent); outline-offset: 2px;
}
html[data-theme="light"] .amb-choice label { background: #ffffff; }
html[data-theme="light"] .amb-choice label:has(input:checked) { background: rgba(78, 125, 31, .08); }

/* Cases a cocher */
.amb-check { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; cursor: pointer; }
.amb-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--amb-btn); cursor: pointer; }
.amb-check span { font-size: 14px; line-height: 1.55; color: var(--amb-ink); }

.amb-submit {
    width: 100%; display: block; margin-top: 20px;
    background: var(--amb-btn); color: #ffffff; font: inherit;
    font-weight: 800; font-size: 16.5px; border: none; border-radius: 999px;
    padding: 17px; cursor: pointer; transition: background-color .2s ease;
}
.amb-submit:hover { background: var(--amb-btn-hover); }
.amb-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Messages ---------- */
.amb-msg { border-radius: 12px; padding: 18px 20px; margin-bottom: 26px; border: 1px solid var(--amb-rule); }
.amb-msg h2 { font-size: 18px; font-weight: 800; color: var(--amb-ink-strong); margin: 0 0 6px; }
.amb-msg p { font-size: 15px; line-height: 1.65; color: var(--amb-ink); margin: 0; }
.amb-msg.is-ok  { border-left: 3px solid var(--amb-accent); background: var(--amb-surface); }
.amb-msg.is-err { border-left: 3px solid #ef4444; background: var(--amb-surface); }

/* ---------- FAQ ---------- */
.amb-faq { border-top: 1px solid var(--amb-rule); }
.amb-faq details { border-bottom: 1px solid var(--amb-rule); }
.amb-faq summary {
    cursor: pointer; padding: 15px 0; font-size: 15.5px; font-weight: 650;
    color: var(--amb-ink-strong); list-style: none;
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.amb-faq summary::-webkit-details-marker { display: none; }
.amb-faq summary::after { content: '+'; color: var(--amb-accent); font-size: 20px; font-weight: 700; line-height: 1; }
.amb-faq details[open] summary::after { content: '\2212'; }
.amb-faq details > p { padding: 0 0 16px; margin: 0; font-size: 15px; line-height: 1.7; color: var(--amb-ink); }