/* Festival du Fjord, version « Sobre » : page Bénévoles.
   Postes en cartes à filet, rappel sur photo de fond, formulaire de candidature dans un bloc nuit. */

/* ---------- Postes ---------- */
.postes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.poste { display: grid; align-content: start; gap: 12px; padding: 26px 24px 28px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); color: var(--encre); }
.poste__ic { margin-bottom: 6px; }
.poste h3 { margin: 0; font: 700 1.45rem/1.05 var(--f-titre); letter-spacing: 0.03em; }
.poste p { margin: 0; color: var(--encre-2); line-height: 1.55; }
/* La 8e case : une note, en bloc nuit */
.poste--note { align-content: center; background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.poste--note > i { font-size: 2rem; color: var(--jaune); }
.poste--note p { color: rgba(255, 255, 255, 0.88); font-weight: 500; }
.poste--note .lien-fleche { justify-self: start; color: var(--blanc); border-color: var(--jaune); font-size: 0.98rem; }
.poste--note .lien-fleche i { color: var(--jaune); }

/* ---------- Rappel (photo de fond) ---------- */
.bn-rappel { padding: calc(var(--section) * 1.15) 0; --voile: linear-gradient(90deg, rgba(10, 14, 22, 0.9) 0%, rgba(10, 14, 22, 0.72) 48%, rgba(10, 14, 22, 0.25) 100%); }
.rappel__txt { display: grid; gap: 20px; max-width: 640px; }
.rappel__txt .surtitre { margin: 0 0 -6px; }
.rappel__cit { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--jaune); }
.rappel__cit p { margin: 0; font: 600 clamp(1.35rem, 2.2vw, 1.85rem)/1.22 var(--f-titre); letter-spacing: 0.01em; color: var(--blanc); text-wrap: balance; }
.rappel__cit footer { margin-top: 10px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.78); }

/* ---------- Candidature (bloc nuit) ---------- */
.candidature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); }
.candidature .formulaire { --f-rayon: var(--r); }
.candidature__zone { min-width: 0; }
.candidature__txt { display: grid; gap: 18px; align-content: start; }
.candidature__txt .surtitre { margin: 0 0 -4px; }
.candidature__direct { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: grid; gap: 2px; font: 700 1.1rem var(--f-titre); letter-spacing: 0.06em; }
.candidature__direct span { margin-bottom: 4px; font: 500 0.95rem var(--f-texte); letter-spacing: 0; color: rgba(255, 255, 255, 0.8); }
.candidature__direct a { display: inline-flex; min-height: 44px; align-items: center; justify-self: start; text-decoration: none; }
@media (hover: hover) { .candidature__direct a:hover { color: var(--jaune); } }
.champ legend { margin-bottom: 10px; padding: 0; }

/* Sommaire des erreurs */
.bn-sommaire { padding: 16px 20px; border: 1.5px solid #FF8AB0; border-left-width: 4px; border-radius: var(--r); background: rgba(255, 138, 176, 0.1); }
.bn-sommaire:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
.bn-sommaire__titre { margin: 0 0 6px; font: 700 1.1rem var(--f-titre); letter-spacing: 0.04em; text-transform: uppercase; }
.bn-sommaire ul { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.bn-sommaire li { padding: 3px 0; }
.bn-sommaire a { color: #FFD1E0; font-weight: 600; line-height: 1.5; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1100px) {
  .postes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .candidature { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .postes { grid-template-columns: 1fr; gap: 10px; }
  .poste { grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px; padding: 18px 18px 20px; }
  .poste__ic { grid-row: 1 / span 2; margin: 0; }
  .poste h3 { align-self: end; font-size: 1.3rem; }
  .poste--note { grid-template-columns: 1fr; row-gap: 10px; }
  .bn-rappel { --voile: linear-gradient(180deg, rgba(10, 14, 22, 0.62), rgba(10, 14, 22, 0.9)); }
  .candidature { padding: 26px 18px; }
  #form-benevole { grid-template-columns: minmax(0, 1fr); }
}