/* ============================================================================
   Formulaires de candidature (Stage et Emploi) — VERION
   Complete services/service.css : on ne redefinit ici que ce qui touche aux
   champs de saisie. Meme charte, meme rythme vertical que les pages services.
   ========================================================================== */

/* Le preambule occupe la meme largeur que les sections du formulaire : une
   colonne de texte plus etroite que les cartes donnerait deux alignements
   differents sur la meme page. */
.form-intro {
  font-family: var(--font-body); font-size: 15px; color: var(--ink-mid);
  line-height: 1.75; margin-bottom: 12px;
}
.form-note {
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink-muted);
  line-height: 1.7; margin-bottom: 12px;
}
.form-obligatoire { color: var(--carmin); font-weight: 600; }

/* Respiration entre le preambule et la premiere section. */
#form-candidature { margin-top: 36px; }

/* ── Sections numerotees, calquees sur les dix rubriques du dossier ──────── */
.fieldset {
  border: 1px solid var(--border-light); border-radius: 2px; background: #fff;
  padding: 28px 30px; margin: 0 0 20px;
}
/* Par defaut un legend se pose SUR la bordure haute du fieldset et la coupe.
   Le passer en bloc flottant pleine largeur le remet dans le flux, comme un
   titre de carte ordinaire. */
.fieldset > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 18px;
  font-family: var(--font-head); font-size: 17px; font-weight: 700;
  color: var(--ink);
}
.fieldset > legend + * { clear: both; }
.fieldset::after { content: ''; display: block; clear: both; }
.fieldset-aide {
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink-muted);
  line-height: 1.65; margin: 4px 0 20px;
}
@media (max-width: 700px) { .fieldset { padding: 22px 18px; } }

/* ── Champs ─────────────────────────────────────────────────────────────── */
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.grille-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 20px; }
.pleine-largeur { grid-column: 1 / -1; }
@media (max-width: 760px) { .grille, .grille-3 { grid-template-columns: 1fr; } }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > label, .bloc-titre {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--ink-mid);
}
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"],
.champ input[type="date"], .champ input[type="number"], .champ select,
.champ textarea, .champ input[type="file"] {
  font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
  background: #fff; border: 1px solid rgba(0,0,0,0.16); border-radius: 2px;
  padding: 11px 13px; width: 100%; min-height: 44px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.champ textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim);
}
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"],
.champ select[aria-invalid="true"] { border-color: var(--carmin); }
.champ-erreur {
  font-family: var(--font-body); font-size: 12.5px; color: var(--carmin);
  min-height: 0;
}
.champ-aide { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-muted); }

/* ── Choix (radios et cases) ────────────────────────────────────────────── */
.choix { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-top: 4px; }
.choix label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
  min-height: 44px;
}
.choix input[type="radio"], .choix input[type="checkbox"],
.consentement input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); }

.consentement {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 0;
  border-top: 1px solid var(--border-light);
}
.consentement:first-of-type { border-top: none; }
.consentement label {
  font-family: var(--font-body); font-size: 14px; color: var(--ink-mid);
  line-height: 1.65; cursor: pointer;
}
.consentement input { margin-top: 3px; flex-shrink: 0; }

/* ── Lignes repetables (parcours, experiences, references) ───────────────── */
.repet-ligne {
  border: 1px solid var(--border-light); border-radius: 2px;
  padding: 18px; margin-bottom: 14px; background: var(--off-white);
}
.repet-numero {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 12px;
}
/* Bouton present sur les seules lignes ajoutees : la premiere ligne de chaque
   rubrique fait partie du dossier et ne se supprime pas. */
.btn-supprimer {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--carmin); background: transparent;
  border: 1px solid rgba(150,0,24,0.35); border-radius: 100px;
  padding: 8px 16px; cursor: pointer; min-height: 36px; flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.btn-supprimer:hover { background: rgba(150,0,24,0.06); border-color: var(--carmin); }
.btn-supprimer[hidden] { display: none; }
.btn-ajouter {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--teal); background: transparent; border: 1.5px solid var(--teal);
  border-radius: 100px; padding: 10px 20px; cursor: pointer; min-height: 44px;
  transition: background 0.2s;
}
.btn-ajouter:hover { background: var(--teal-dim); }

/* ── Grilles de niveaux (matieres, outils, langues) ──────────────────────── */
.niveaux { width: 100%; border-collapse: collapse; }
.niveaux th {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  color: var(--ink-muted); text-align: center; padding: 8px 6px;
  border-bottom: 1px solid var(--border-light); white-space: nowrap;
}
.niveaux th:first-child { text-align: left; }
.niveaux td {
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
  padding: 10px 6px; border-bottom: 1px solid var(--border-light);
}
.niveaux td:not(:first-child) { text-align: center; }
.niveaux input[type="radio"] { width: 18px; height: 18px; accent-color: var(--teal); }
.niveaux input[type="text"] {
  font-family: var(--font-body); font-size: 14px; padding: 7px 10px;
  border: 1px solid rgba(0,0,0,0.16); border-radius: 2px; width: 100%;
}
.niveaux-conteneur { overflow-x: auto; }

/* Sur mobile le tableau devient une suite de blocs : une ligne = un domaine,
   ses niveaux en dessous, sans defilement horizontal. */
@media (max-width: 700px) {
  .niveaux, .niveaux tbody, .niveaux tr, .niveaux td { display: block; width: 100%; }
  .niveaux thead { display: none; }
  .niveaux tr { border-bottom: 1px solid var(--border-light); padding: 12px 0; }
  .niveaux td { border: none; padding: 4px 0; text-align: left; }
  .niveaux td:not(:first-child) { display: inline-flex; align-items: center; gap: 8px; text-align: left; margin-right: 16px; }
  .niveaux td:not(:first-child)::before {
    content: attr(data-niveau); font-size: 13px; color: var(--ink-mid);
  }
  .niveaux td:first-child { font-weight: 600; margin-bottom: 6px; }
}

/* ── Pieces jointes ─────────────────────────────────────────────────────── */
.pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .pieces { grid-template-columns: 1fr; } }

/* ── Envoi ──────────────────────────────────────────────────────────────── */
.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }
.btn-envoyer {
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #fff;
  background: var(--teal); border: none; border-radius: 100px;
  padding: 15px 34px; cursor: pointer; min-height: 48px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-envoyer:hover:not(:disabled) {
  background: var(--teal-light); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(14,100,89,0.3);
}
.btn-envoyer:disabled { opacity: 0.6; cursor: progress; }

.message-global {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.7;
  border-radius: 2px; padding: 16px 18px; margin-bottom: 20px;
}
.message-global[data-etat="erreur"] {
  background: rgba(150,0,24,0.06); border: 1px solid rgba(150,0,24,0.25); color: var(--carmin);
}
.message-global[hidden] { display: none; }

/* Ecran affiche apres un depot reussi, a la place du formulaire. */
.confirmation {
  border: 1px solid var(--teal-border); border-radius: 2px; background: #fff;
  padding: 40px 38px; text-align: center;
}
.confirmation h2 {
  font-family: var(--font-head); font-size: 24px; font-weight: 700;
  color: var(--teal); margin-bottom: 14px;
}
.confirmation p {
  font-family: var(--font-body); font-size: 15px; color: var(--ink-mid);
  line-height: 1.75; max-width: 620px; margin: 0 auto 12px;
}
.confirmation .reference {
  font-family: var(--font-head); font-size: 20px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.04em; display: block; margin: 18px 0;
}
.confirmation[hidden] { display: none; }

/* Champ piege : jamais vu ni atteint par un humain, rempli par les robots. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }