/* =========================================================
   Formulaire chauffeur partenaire
   Complément de css/pages.css : mêmes variables, mêmes
   polices. Chargé uniquement par /formulaire-partenaire/
   pour ne pas alourdir les pages légales.
   ========================================================= */

:root {
  /* Tokens présents dans index.html mais absents de pages.css :
     redéclarés ici pour que cette feuille soit autonome. */
  --gold3: #A8853A;
  --red: #FF3347;
  --green: #00E676;
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Le formulaire est plus dense que les pages légales :
   760px rendait les colonnes doubles trop étroites. */
.page--form { width: min(920px, calc(100% - 48px)); }

/* ---------------------------------------------------------
   En-tête de page
   --------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::after {
  content: '';
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--gold3);
  opacity: 0.4;
}
.page--form h1 { margin: 0 0 16px; }

/* Même traitement que .recruit-header-img de l'accueil : illustration
   en fond, semi-cachée derrière le texte plutôt qu'à côté. */
.title-block {
  position: relative;
  padding-right: 80px;
}
.title-block-lottie {
  position: absolute;
  right: -20px;
  top: 0;
  width: 260px;
  max-width: 260px;
  height: 260px;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
}
.title-block .eyebrow,
.title-block h1,
.title-block .lead {
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  .title-block { padding-right: 0; }
  /* Remontée au-dessus du H1 : sur petit écran le bloc de titre est
     trop bas pour caser l'illustration sans chevaucher le texte. */
  .title-block-lottie { width: 160px; max-width: 160px; height: 160px; right: -10px; top: -56px; }
}
.lead {
  color: rgba(240, 242, 248, 0.78);
  font-size: 1rem;
  max-width: 640px;
}
.lead strong { color: var(--white); }

/* Reprise exacte de .recruit-card de l'accueil (section
   #espace-chauffeurs), pour que les deux pages partagent le même
   langage visuel. */
.recruit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0 0;
  text-align: left;
}
.recruit-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 28px 24px;
  border-radius: 0;
  transition: all 0.3s var(--ease);
}
.recruit-card:hover {
  border-color: rgba(212, 175, 106, 0.3);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.recruit-card-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.8rem;
}
.recruit-card-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.recruit-card h4 {
  font-family: var(--fs-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.recruit-card p {
  font-size: 0.85rem;
  color: var(--silver);
  line-height: 1.6;
  margin: 0;
}

/* ---------------------------------------------------------
   Carte du formulaire
   --------------------------------------------------------- */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 36px;
  margin-top: 34px;
}

.form-step {
  border: 0;
  padding: 0;
  margin: 0 0 38px;
}
.form-step:last-of-type { margin-bottom: 0; }
.form-step > legend {
  display: block;
  width: 100%;
  padding: 0 0 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
  font-family: var(--fs-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.step-num {
  display: inline-block;
  min-width: 26px;
  height: 26px;
  line-height: 26px;
  margin-right: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold2) 0%, var(--gold) 50%, var(--gold3) 100%);
  color: var(--black);
  font-family: var(--fs-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  vertical-align: 2px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.field--full { grid-column: 1 / -1; }

/* ---------------------------------------------------------
   Champs
   --------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
}
.req { color: var(--gold); margin-left: 3px; }
.hint {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(136, 146, 164, 0.8);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--fs-body);
  font-size: 0.95rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(136, 146, 164, 0.55); }

/* Les plaques sont toujours saisies en majuscules : on l'impose
   visuellement, la valeur est normalisée côté serveur. */
.field input[name="immatriculation"] { text-transform: uppercase; }

/* Les options sont dessinees par le systeme, pas par la page : elles
   ne heritent pas du fond sombre de la carte, et le fond translucide
   du select se recompose alors sur du blanc. Sans ces deux couleurs
   explicites, la liste sort en blanc sur blanc. */
.field select option {
  background-color: var(--card);
  color: var(--white);
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF6A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.16);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--red);
  background: rgba(255, 51, 71, 0.05);
}
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(255, 51, 71, 0.16);
}

.field-error {
  display: none;
  font-size: 0.8rem;
  color: var(--red);
}
.field-error.is-visible { display: block; }

/* Piège à robots : invisible pour l'humain, rempli par les scripts
   d'envoi automatique. Pas de display:none, certains bots l'ignorent. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------
   Conditions tarifaires
   --------------------------------------------------------- */
.terms {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 22px 24px;
  font-size: 0.9rem;
  color: rgba(240, 242, 248, 0.78);
}
.terms p + p { margin-top: 12px; }
.terms a { color: var(--gold); text-decoration: underline; }
.terms .caps {
  display: block;
  margin: 16px 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.terms-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
}
.terms-link:hover { text-decoration: underline; }
.terms-link svg { width: 15px; height: 15px; flex: 0 0 15px; }

/* ---------------------------------------------------------
   Cases à cocher de validation
   --------------------------------------------------------- */
.checks { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.check:hover { border-color: rgba(212, 175, 106, 0.35); background: rgba(255, 255, 255, 0.04); }
.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.check input::after {
  content: '';
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform 0.18s var(--ease);
}
.check input:checked {
  background: linear-gradient(135deg, var(--gold2) 0%, var(--gold) 100%);
  border-color: var(--gold);
}
.check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.25);
}
.check span { font-size: 0.9rem; color: rgba(240, 242, 248, 0.85); line-height: 1.5; }
.check.is-invalid { border-color: var(--red); background: rgba(255, 51, 71, 0.05); }

/* ---------------------------------------------------------
   Envoi
   --------------------------------------------------------- */
.form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
/* Reprise exacte du bouton d'appel de la barre de navigation de
   l'accueil (.btn-call-top) : jaune, contour noir franc, ombre nette.
   Seul ajout : min-height 48px, pour que la cible tactile du bouton
   principal du formulaire reste au-dessus du minimum recommandé. */
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  background: #fbca1f;
  color: #000000;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 0.5em 1.2em;
  border: 3px solid #000000;
  border-radius: 0.4em;
  box-shadow: 0.12em 0.12em 0 #000000;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-submit:hover {
  transform: translate(-0.05em, -0.05em);
  box-shadow: 0.18em 0.18em 0 #000000;
}
.btn-submit:active {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0.05em 0.05em 0 #000000;
}
.btn-submit svg { width: 18px; height: 18px; color: #000000; flex-shrink: 0; }
.btn-submit[disabled] {
  cursor: wait;
  opacity: 0.65;
  transform: none;
  box-shadow: 0.12em 0.12em 0 #000000;
}
.submit-note { font-size: 0.82rem; color: var(--silver); max-width: 320px; }
/* Numero isole sur sa ligne : plus lisible, et une cible plus large
   a viser au doigt sur mobile. */
.submit-note-tel {
  display: block;
  margin-top: 4px;
  color: var(--gold);
}

/* ---------------------------------------------------------
   Bandeaux d'état (succès / erreur) et RGPD
   --------------------------------------------------------- */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 12px;
  margin-bottom: 26px;
  font-size: 0.92rem;
  line-height: 1.6;
}
.banner svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }
.banner strong { display: block; margin-bottom: 3px; }
.banner--ok {
  background: rgba(0, 230, 118, 0.07);
  border: 1px solid rgba(0, 230, 118, 0.35);
  color: rgba(240, 242, 248, 0.9);
}
.banner--ok svg { color: var(--green); }
.banner--err {
  background: rgba(255, 51, 71, 0.07);
  border: 1px solid rgba(255, 51, 71, 0.35);
  color: rgba(240, 242, 248, 0.9);
}
.banner--err svg { color: var(--red); }
.banner ul { margin: 8px 0 0 18px; }
/* Sans cette regle, le "display: flex" ci-dessus l'emporterait sur le
   "display: none" que le navigateur applique a l'attribut hidden : les
   bandeaux d'erreur resteraient visibles en permanence. */
.banner[hidden] { display: none; }

.rgpd {
  margin-top: 26px;
  font-size: 0.8rem;
  color: var(--silver);
  line-height: 1.65;
}
.rgpd strong { color: rgba(240, 242, 248, 0.85); }
.rgpd a { color: var(--gold); }
.rgpd a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   Page de confirmation
   --------------------------------------------------------- */
.confirm {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 44px 40px;
  margin-top: 28px;
  text-align: center;
}
.confirm-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 230, 118, 0.1);
  border: 1px solid rgba(0, 230, 118, 0.35);
  color: var(--green);
}
.confirm-icon--err {
  background: rgba(255, 51, 71, 0.1);
  border-color: rgba(255, 51, 71, 0.35);
  color: var(--red);
}
.confirm-icon svg { width: 30px; height: 30px; }
.confirm h1 { margin: 0 0 14px; }
.confirm .lead { margin: 0 auto; }
.confirm ul { margin: 18px auto 0; max-width: 460px; text-align: left; color: rgba(240, 242, 248, 0.78); font-size: 0.92rem; }
.confirm li { margin: 6px 0; }
.confirm-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 860px) {
  .recruit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page--form { width: calc(100% - 36px); }
  .form-card { padding: 24px 20px; }
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
  .terms { padding: 18px 18px; }
  .form-submit { flex-direction: column; align-items: stretch; }
  .btn-submit { justify-content: center; width: 100%; }
  .submit-note { max-width: none; }
  .confirm { padding: 34px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-submit:hover, .btn-ghost:hover { transform: none; }
  .check input::after { transition: none; }
}