/* =========================================================================
   SYRES SG — habillage FluentForm (formulaire d'adhésion n°20 et autres).
   Chargé uniquement sur les pages contenant [fluentform]. Ne touche pas au
   comportement : uniquement la présentation, alignée sur sg-base.css.
   ========================================================================= */
.sg-form-page { padding-block: var(--s-6) var(--sec-y); }
.sg-form-wrap { max-width: 880px; margin-inline: auto; }
.sg-form-head { text-align: center; margin-bottom: var(--s-5); }
.sg-form-head .sg-eyebrow { justify-content: center; }
.sg-form-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: var(--s-2); }
.sg-form-head .sg-sub { margin-inline: auto; text-align: center; }
.sg-form-card { background: var(--white); border-radius: var(--r-lg); padding: clamp(var(--s-3), 4vw, var(--s-6)); box-shadow: var(--shadow); }

/* Reset des <p> du thème à l'intérieur du formulaire */
.sg-form-card :where(p) { margin: 0; }

/* ---------- Étapes ---------- */
.fluentform .ff-step-header { margin-bottom: var(--s-4); }
.fluentform .ff-el-progress { height: 6px; border-radius: 99px; background: var(--g2); overflow: hidden; }
.fluentform .ff-el-progress-bar { background: var(--accent); height: 100%; font-size: 0; }
.fluentform .ff-el-progress-status { font-family: var(--f-mono); font-size: var(--t-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--g3); margin-top: var(--s-1); }
.fluentform .ff-el-section-break { margin: var(--s-2) 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--g2); }
.fluentform .ff-el-section-title { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; color: var(--dark); margin: 0 0 6px; }
.fluentform .ff-section_break_desk { color: var(--g4); font-size: var(--t-small); }

/* ---------- Groupes, libellés, aide ---------- */
.fluentform .ff-el-group { margin-bottom: var(--s-3); }
.fluentform .ff-el-input--label { margin-bottom: 8px; }
.fluentform .ff-el-input--label label { font-weight: 600; color: var(--dark); font-size: var(--t-body); line-height: 1.4; }
.fluentform .ff-el-is-required.asterisk-right label::after { color: var(--accent-d); margin-left: 3px; }
.fluentform .ff-el-help-message { font-size: var(--t-caption); color: var(--g3); margin-top: 6px; }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: #c8472b; }
.fluentform .ff-el-is-error .error, .fluentform .text-danger { color: #a63a22; font-size: var(--t-caption); margin-top: 6px; }

/* ---------- Champs ---------- */
.fluentform .ff-el-form-control { width: 100%; min-height: 48px; padding: 10px 14px; font: 500 var(--t-body)/1.4 var(--f-body); color: var(--dark); background: var(--white); border: 1px solid var(--g2); border-radius: var(--r); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
.fluentform .ff-el-form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-l); }
.fluentform .ff-el-form-control::placeholder { color: var(--g3); font-weight: 400; }
.fluentform select.ff-el-form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6760' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.fluentform textarea.ff-el-form-control { min-height: 120px; }
.fluentform input[type="file"].ff-el-form-control { padding: 10px; }

/* ---------- Radios et cases en liste : lignes cliquables, sans bordure ---------- */
.fluentform .ff-el-form-check { margin: 0 0 8px; }
.fluentform .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 0; border-radius: var(--r); background: var(--bg); cursor: pointer; font-size: var(--t-small); color: var(--ink); line-height: 1.4; transition: background .15s ease; }
.fluentform .ff-el-form-check-label:hover { background: var(--g1); }
.fluentform .ff-el-form-check-label:has(input:checked) { background: var(--accent-l); color: var(--dark); }
.fluentform .ff-el-form-check-input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--accent-d); }

/* ---------- Choix en ligne (ff_list_buttons, ex. Yes / No) : boutons côte à côte, sans carte autour ---------- */
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check { display: inline-block; width: auto; margin: 0 8px 8px 0; }
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check-label,
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check-label:hover,
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check-label:has(input:checked) { display: block; padding: 0; gap: 0; border: 0; background: transparent; }
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check label > span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 88px; padding: 0 20px; margin: 0; border: 1px solid var(--g2); border-radius: var(--r); background: var(--white); color: var(--dark); font: 500 var(--t-small)/1 var(--f-body); box-shadow: none; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check label > span:hover { border-color: var(--accent); color: var(--dark); }
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check.ff_item_selected label > span,
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check-label:has(input:checked) > span { background: var(--dark); border-color: var(--dark); color: #fff; box-shadow: none; }
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check:first-child label > span,
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check:last-child label > span { border-radius: var(--r); border-left: 1px solid var(--g2); box-shadow: none; }
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check.ff_item_selected:first-child label > span { border-left-color: var(--dark); }
.sg-form-card .fluentform .ff_list_buttons .ff-el-form-check-label:has(input:focus-visible) > span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Colonnes ---------- */
.fluentform .ff-t-container { display: flex; gap: var(--s-2); }
.fluentform .ff-t-cell { flex: 1 1 0; min-width: 0; }
@media (max-width: 600px) { .fluentform .ff-t-container { flex-direction: column; } .fluentform .ff-t-cell { flex-basis: auto !important; } }

/* ---------- Boutons ---------- */
.fluentform .ff-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-3); border-radius: var(--r); font: 600 var(--t-small)/1 var(--f-body); border: none; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.fluentform .ff-btn-submit { background: var(--dark) !important; color: #fff !important; }
.fluentform .ff-btn-submit:hover { background: var(--accent-d) !important; transform: translateY(-1px); }
.fluentform .ff-btn-next { background: var(--dark) !important; color: #fff !important; }
.fluentform .ff-btn-next:hover { background: var(--accent-d) !important; }
.fluentform .ff-btn-prev { background: transparent !important; color: var(--dark) !important; box-shadow: inset 0 0 0 1px var(--g2); }
.fluentform .ff-btn-prev:hover { background: var(--bg) !important; }
.fluentform .ff-step-nav-buttons, .fluentform .step-nav { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--g2); }
.fluentform .ff-float-right { float: none; margin-left: auto; }

/* ---------- Datepicker, upload, selfie ---------- */
.flatpickr-calendar { font-family: var(--f-body); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.flatpickr-day.selected { background: var(--accent-d); border-color: var(--accent-d); }
.fluentform .ff-upload-progress, .fluentform .ff_upload_btn { border-radius: var(--r); }
/* Bouton d'upload : FluentForm impose inline-block + padding 10px (texte collé en haut d'une boîte de 48 px) ; on reprend la main */
.sg-form-card .fluentform .ff_upload_btn.ff-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; background: var(--white); border: 1px dashed var(--g3); color: var(--dark); font: 600 var(--t-small)/1 var(--f-body); }
.sg-form-card .fluentform .ff_upload_btn.ff-btn:hover, .sg-form-card .fluentform .ff_upload_btn.ff-btn:focus-visible { background: var(--accent-l); border-color: var(--accent); color: var(--dark); }
.sg-form-card .fluentform .ff_file_upload_holder { display: inline-block; line-height: 1; }

/* ---------- Message de succès ---------- */
.fluentform .ff-message-success, .ff-message-success { background: var(--mint-bg); color: var(--mint-tx); border: none; border-radius: var(--r-lg); padding: var(--s-3); font-weight: 500; }

@media (max-width: 600px) {
  .fluentform .ff-btn { width: 100%; }
  .fluentform .ff-step-nav-buttons, .fluentform .step-nav { flex-direction: column-reverse; }
}