/* ==========================================
   BULLETIN D'INSCRIPTION - PARTICIPANTS
   ========================================== */

/* Conteneur principal */
.participants-personnalises {
  width: 100%;
  max-width: 1050px;
  margin: 24px 0;
  box-sizing: border-box;
  counter-reset: numero-participant;
}

/* Neutraliser le tableau Webform */
.participants-personnalises .webform-multiple-table-responsive,
.participants-personnalises table,
.participants-personnalises tbody {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.participants-personnalises table {
  margin: 0;
  border-spacing: 0;
}

/* Un bloc par participant */
.participants-personnalises tbody > tr {
  counter-increment: numero-participant;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 22px;
  padding: 85px 20px 22px;
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  box-sizing: border-box;
}

/* Bandeau vert numéroté */
.participants-personnalises tbody > tr::before {
  content: "PARTICIPANT " counter(numero-participant);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: #245740;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border-radius: 7px 7px 0 0;
}

/* Libérer les champs du tableau */
.participants-personnalises tbody > tr > td {
  display: contents;
}

/* Chaque champ */
.participants-personnalises .form-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Libellés au-dessus des champs */
.participants-personnalises .form-item > label {
  display: block;
  min-height: 50px;
  margin: 0 0 6px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

/* Champs de saisie */
.participants-personnalises input:not([type="submit"]),
.participants-personnalises textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
}

/* Alignement vertical des cases */
.participants-personnalises .form-item > input,
.participants-personnalises .form-item > textarea {
  margin-top: 0;
}

/* Remarques et motif sur toute la largeur */
.participants-personnalises
[class*="item--remarques"],
.participants-personnalises
[class*="item--motif-formation"] {
  grid-column: 1 / -1;
}

/* Bouton Ajouter un participant */
.participants-personnalises .webform-multiple-add {
  width: 100%;
  margin-top: 16px;
}

.participants-personnalises
.webform-multiple-add input[type="submit"] {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid #d6d6d6;
  border-radius: 24px;
  background: white;
  color: #222;
  font-weight: 600;
  cursor: pointer;
}

/* Version mobile */
@media (max-width: 700px) {
  .participants-personnalises tbody > tr {
    grid-template-columns: 1fr;
    padding: 75px 15px 20px;
  }

  .participants-personnalises .form-item > label {
    min-height: 0;
  }
}
/* Empêcher le bloc Participant de dépasser la page */
.participants-personnalises {
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 20px 0 !important;
}

.participants-personnalises .webform-multiple-table-responsive,
.participants-personnalises table {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Aligner les champs de la ligne Sécurité sociale / Mail */
.participants-personnalises
.form-item-participant-items-0-item-numero-securite-sociale,
.participants-personnalises
.form-item-participant-items-0-item-email-participant {
  align-self: stretch;
}

/* Bouton final : Soumettre le bulletin */
.webform-submission-form .form-actions {
  width: 100%;
}

.webform-submission-form .form-actions input[type="submit"],
.webform-submission-form .form-actions button[type="submit"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 15px 20px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 30px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer;
  box-sizing: border-box;
}

/* =========================================
   CHARTE GRAPHIQUE FREDON ÎLE-DE-FRANCE
   ========================================= */

/* Police du contenu */
.webform-submission-form {
  font-family: "Source Sans Pro", sans-serif;
}

/* Police des titres */
.webform-submission-form h2,
.webform-submission-form h3,
.webform-submission-form h4 {
  font-family: "Filson Pro", sans-serif;
}

/* Bandeaux des participants */
.participants-personnalises tbody > tr::before {
  background-color: #576b35 !important;
  color: #ffffff !important;
  font-family: "Filson Pro", sans-serif;
}

/* Bandeaux verts existants */
.webform-submission-form [style*="background-color: #245740"],
.webform-submission-form [style*="background: #245740"] {
  background-color: #576b35 !important;
}

/* Libellés et champs */
.webform-submission-form label,
.webform-submission-form input,
.webform-submission-form textarea,
.webform-submission-form select {
  font-family: "Source Sans Pro", sans-serif;
}

/* Bouton Soumettre le bulletin */
.webform-submission-form .form-actions input[type="submit"],
.webform-submission-form .form-actions button[type="submit"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  background-color: #576b35 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 15px 20px !important;
  font-family: "Source Sans Pro", sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer;
  box-sizing: border-box;
}

/* Survol du bouton */
.webform-submission-form .form-actions input[type="submit"]:hover,
.webform-submission-form .form-actions button[type="submit"]:hover {
  background-color: #45562a !important;
}

/* TITRE : Protection des données personnelles */
.webform-submission-form
[data-drupal-selector="edit-protection-donnees-personnelles"]
strong {
  font-family: "Filson Pro", sans-serif;
  font-weight: 700 !important;
}

/* Espacement entre le bouton et le pied de page */
.webform-submission-form .form-actions {
  margin-top: 24px !important;
  margin-bottom: 50px !important;
  padding-bottom: 20px !important;
}

/* Espacement du bouton */
.webform-submission-form .form-actions input[type="submit"] {
  margin-bottom: 0 !important;
}

/* Couleur des bandeaux du formulaire FREDON */
.webform-submission-form .processed-text h2,
.webform-submission-form .processed-text h3,
.webform-submission-form .webform-element-description h2,
.webform-submission-form .webform-element-description h3 {
  background-color: #576b35 !important;
}

/* Bandeaux EMPLOYEUR, CONTACT et FINANCEMENT */
.webform-submission-form [style*="background-color: #24563f"],
.webform-submission-form [style*="background-color:#24563f"],
.webform-submission-form [style*="background: #24563f"],
.webform-submission-form [style*="background:#24563f"] {
  background-color: #576b35 !important;
}

/* Masquer le titre du composite Participant */
.participants-personnalises > label:first-child,
.participants-personnalises > legend:first-child {
  display: none !important;
}

/* Espacement du bulletin d'inscription sur les côtés */
.webform-submission-form {
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box;
}
/* Placer les petits boutons + et - à droite */
.participants-personnalises .webform-multiple-table--operations {
  width: 1% !important;
  white-space: nowrap !important;
  text-align: right !important;
}

.participants-personnalises .webform-multiple-table--operations input {
  display: inline-block !important;
  margin-left: 8px !important;
}
/* Remplacer le signe moins par une corbeille */
.participants-personnalises input[name*="participant_table_remove_"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M5 6l1 15h12l1-15M10 10v7M14 10v7'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  width: 24px !important;
  height: 24px !important;
  opacity: 1 !important;
}
/* Masquer l'ancien symbole moins */
.participants-personnalises input[name*="participant_table_remove_"] {
  object-fit: none !important;
  object-position: -9999px -9999px !important;
}

/* CORRECTION DU DÉCALAGE DU FORMULAIRE */

/* Empêcher le formulaire de dépasser son espace */
.webform-submission-form {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Conserver les champs à l'intérieur du formulaire */
.webform-submission-form .form-item,
.webform-submission-form .form-wrapper {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Champ de sélection des formations */
.webform-submission-form
select[name="intituledelaformation"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px 36px 12px 15px !important;
  text-indent: 0 !important;
  box-sizing: border-box !important;
}

/* Corriger le chevauchement du menu latéral Drupal
   sur les pages d'administration du Webform */

body:has(.webform-submission-form) .region-content,
body:has(.webform-submission-form) main,
body:has(.webform-submission-form) .layout-content {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Réserver la place du menu local d'administration */
body:has(.webform-submission-form) .block-local-tasks-block ~ .block,
body:has(.webform-submission-form) .block-system-main-block {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Empêcher les champs de sortir de leur colonne */
.webform-submission-form {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: clip;
}

/* ESPACEMENT DU FORMULAIRE FREDON */

/* Espace avant le premier champ */
.webform-submission-form {
  padding-top: 150px !important;
}

/* Espace entre les champs */
.webform-submission-form > .js-form-item,
.webform-submission-form > .form-item,
.webform-submission-form > .form-wrapper {
  margin-bottom: 24px;
}

/* Libellés au-dessus des champs */
.webform-submission-form
.form-item > label {
  margin-bottom: 8px;
}

/* Espace autour du choix de formation */
.webform-submission-form
.form-item-intituledelaformation {
  margin-top: 10px !important;
  margin-bottom: 24px !important;
}

/* Espace avant le bandeau EMPLOYEUR */
.webform-submission-form
[data-drupal-selector="edit-titre-employeur"] {
  margin-top: 25px !important;
}