/* ==================================================================
   DRAREK — formulaires : candidature contributeur et contact.
   Mêmes jetons que le reste : arêtes à 1px, filet braise, focus orange.
   Aucun endpoint pour l'instant — voir js/formulaires.js.
   ================================================================== */

.form{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:clamp(16px,2.4vw,26px); margin-top:clamp(24px,3vw,34px);
}
/* Un champ qui doit occuper toute la largeur de la grille. */
.form__large{ grid-column:1 / -1; }

.form__l{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-weight:700; font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cendre);
}
.form__l span{ color:var(--cendre-morte); letter-spacing:.1em; }

.form input[type="text"],
.form input[type="email"],
.form input[type="url"],
.form textarea{
  width:100%;
  background:rgba(6,11,8,.7);
  border:1px solid rgba(166,139,110,.32);
  border-radius:var(--rayon);
  color:var(--os);
  padding:13px 15px;
  font-family:var(--corps); font-size:16px; line-height:1.5;
  transition:border-color .18s ease, background .18s ease;
}
.form textarea{ min-height:120px; resize:vertical; }
.form input:focus,
.form textarea:focus{ border-color:var(--braise); outline:none; }
/* Champ refusé par la validation : le filet passe au sang. */
.form .est-invalide{ border-color:var(--sang); background:rgba(168,66,44,.06); }
/* Sur un groupe de cases, c'est le fieldset qui porte l'état : son
   intitulé passe au sang, les cases restent lisibles. */
.cases.est-invalide{ background:none; }
.cases.est-invalide legend{ color:var(--sang); }
.cases.est-invalide .case{ border-left-color:rgba(168,66,44,.5); }

/* ---------------- Cases à cocher ----------------
   Case native (donc accessible au clavier) mais repeinte : la case native
   sort en blanc franc sur l'ardoise, et son rendu varie d'un navigateur à
   l'autre. appearance:none + une coche en SVG donne un résultat identique
   partout, avec les arêtes vives de la direction. */
.cases{
  display:flex; flex-direction:column; gap:12px;
  margin:0; padding:0; border:0;
}
.cases legend{
  padding:0; margin-bottom:12px;
  font-family:var(--mono); font-weight:700; font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cendre);
}
.case{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.02);
  border-left:2px solid rgba(166,139,110,.3);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.case:hover{ background:rgba(226,144,63,.08); border-left-color:rgba(226,144,63,.5); }
.case input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:16px; height:16px; margin:3px 0 0;
  background:rgba(6,11,8,.6);
  border:1px solid rgba(166,139,110,.45);
  border-radius:var(--rayon);
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease;
}
.case input:checked{
  background-color:var(--braise);
  border-color:var(--braise);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.6 9 10 3.4' fill='none' stroke='%231B1409' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px;
}
.case:hover input{ border-color:rgba(226,144,63,.7); }
/* Une option cochée garde son rail allumé. */
.case:has(input:checked){ border-left-color:var(--braise); background:rgba(226,144,63,.06); }
.case span{ font-size:16px; color:rgba(226,218,203,.82); }

/* ---------------- Pied de formulaire ---------------- */
.form__pied{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px;
}
/* Retour de validation. Neutre par défaut, sang en cas d'erreur. */
.form__note{
  margin:0; font-size:14.5px; color:var(--cendre); max-width:52ch;
}
.form__note--erreur{ color:var(--sang); }
.form__note--ok{ color:var(--v-reussite); }

/* Adresse de contact, affichée à côté du formulaire. */
.contact__direct{
  margin:clamp(24px,3vw,32px) 0 0; padding-top:18px;
  border-top:1px solid rgba(166,139,110,.22);
  font-size:16px; color:rgba(226,218,203,.72);
}
.contact__direct a{
  font-family:var(--mono); font-weight:700; font-size:15px;
  color:var(--braise); text-decoration:none;
}
.contact__direct a:hover{ color:var(--braise-haut); text-decoration:underline; }