/*
  Page formulaire Leadsfluence. L'habillage du client remplace les variables
  (--accent, --ink, --bg, --card, --radius, --font, --font-titre) ; le
  constructeur du staffboard reproduit ces règles à l'identique.
*/
:root {
  --bg: #f3f1ec;
  --ink: #1a1a1a;
  --accent: #0c5c4c;
  --muted: color-mix(in srgb, var(--ink) 62%, transparent);
  --line: color-mix(in srgb, var(--ink) 18%, transparent);
  --card: #fffef9;
  --radius: 12px;
  --font: "Segoe UI", system-ui, sans-serif;
  --font-titre: var(--font);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(ellipse at 20% 0%, #d8efe8 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, #e8e0d0 0%, transparent 45%),
    var(--bg);
}
body.habille { background: var(--bg); }
main {
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.logo { display: block; max-height: 56px; max-width: 60%; margin: 0 auto 1.25rem; object-fit: contain; }
.progression { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 1rem; }
.progression span { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.carte-formulaire { background: var(--card); border-radius: calc(var(--radius) + 4px); padding: 1.5rem 1.25rem; box-shadow: 0 1px 3px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 5%); }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
.grille > * { grid-column: 1 / -1; }
.grille > .demi { grid-column: auto; }
@media (max-width: 420px) { .grille > .demi { grid-column: 1 / -1; } }

h1.bloc { font-family: var(--font-titre); font-size: 1.4rem; line-height: 1.25; margin: 0 0 .5rem; }
.paragraphe { color: var(--muted); font-size: .95rem; line-height: 1.5; margin: 0 0 1rem; }
img.image { width: 100%; border-radius: var(--radius); margin-bottom: 1rem; }
hr.bloc { border: 0; border-top: 1px solid var(--line); margin: .5rem 0 1rem; }
.espace { height: 1.25rem; }
.loading, .error { text-align: center; color: var(--muted); padding: 3rem 0; }

.field { margin: 0 0 1rem; min-width: 0; border: 0; padding: 0; }
label, legend { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .35rem; padding: 0; }
.requis { color: var(--accent); }
.aide { display: block; font-size: .8rem; color: var(--muted); margin: -.15rem 0 .4rem; }
input, select, textarea, button {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: .75rem .85rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 85%, var(--bg));
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.choix { display: grid; gap: .5rem; }
.carte { display: flex; gap: .6rem; align-items: center; margin: 0; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 500; cursor: pointer; }
.carte input { width: auto; margin: 0; accent-color: var(--accent); }
.carte:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
fieldset.invalide .carte { border-color: #b3261e; }

button { background: var(--accent); color: #fff; border: none; cursor: pointer; font-weight: 600; }
button:disabled { opacity: .6; cursor: wait; }
.nav { display: flex; gap: .75rem; margin-top: .5rem; }
.nav button { flex: 1; }
.nav button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.securise { text-align: center; font-size: .75rem; color: var(--muted); margin: .9rem 0 0; }
.pied { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem; margin: .5rem 0 0; font-size: .75rem; }
.pied a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.pied a:hover { color: var(--ink); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
#turnstile { margin: 1rem 0; }
.msg { padding: 1.25rem; background: var(--card); border-radius: var(--radius); line-height: 1.5; }
.consent label.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; font-weight: 400; line-height: 1.35; }
.consent input { width: auto; margin-top: .2rem; }
.privacy { font-size: .75rem; color: var(--muted); line-height: 1.4; }

.erreur-envoi { margin: .75rem 0 0; padding: .6rem .75rem; border-radius: calc(var(--radius, 12px) * .6); background: #fdecec; color: #a3201b; font-size: .85rem; line-height: 1.35; }

/* Envoi en cours, puis la page de fin (30/10). */
.chargement { display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne .7s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chargement { animation-duration: 2s; } }
form[aria-busy="true"] .grille { opacity: .6; pointer-events: none; }
.fin { text-align: center; }
.fin-icone { width: 3rem; height: 3rem; margin: 0 auto .75rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; color: #fff; background: var(--accent); }
.fin-icone.info { background: var(--muted); }
.resume { margin: 1.25rem 0 0; padding: 1rem; text-align: left; background: var(--bg); border-radius: calc(var(--radius, 12px) * .75); }
.resume h2 { margin: 0 0 .6rem; font-size: .95rem; }
.resume dl { margin: 0; display: grid; gap: .55rem; }
.resume dt { font-size: .78rem; color: var(--muted); }
.resume dd { margin: .1rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.note-fermeture { margin: .6rem 0 0; font-size: .85rem; color: var(--muted); }

/* Conditions d'utilisation et RGPD (30/10) : un lien sous chaque étape, une fenêtre. */
.legal { margin: .35rem 0 0; text-align: center; }
.lien-legal { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .75rem; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lien-legal:hover { color: var(--ink); }
#mentions { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: var(--radius, 12px); background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
#mentions::backdrop { background: rgba(15, 23, 42, .45); }
.mentions-corps { padding: 1.25rem 1.25rem 1rem; font-size: .88rem; line-height: 1.5; }
.mentions-corps h2 { margin: 0 0 .75rem; font-size: 1.1rem; outline: none; }
.mentions-corps h3 { margin: .9rem 0 .2rem; font-size: .88rem; }
.mentions-corps p { margin: 0; }
.mentions-corps a { color: var(--accent); }
.mentions-corps .nav { position: sticky; bottom: 0; margin-top: 1rem; padding-top: .5rem; background: var(--card); }