/* ============================================================
   FFPMI – Formulaire de Signalement
   Charte : noir #111111 | or #f9b233 | fond blanc/beige
   Typo   : Montserrat
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* ── Reset couleurs texte anti-Divi ─────────────────────────── */
/* Divi écrase les couleurs héritées — on force tout le texte
   du wrapper en noir avec une spécificité maximale.           */
#ffpmi-sign-wrapper,
#ffpmi-sign-wrapper p,
#ffpmi-sign-wrapper span,
#ffpmi-sign-wrapper label,
#ffpmi-sign-wrapper legend,
#ffpmi-sign-wrapper h2,
#ffpmi-sign-wrapper h3,
#ffpmi-sign-wrapper li,
#ffpmi-sign-wrapper div,
#ffpmi-sign-wrapper fieldset,
#ffpmi-sign-wrapper textarea,
#ffpmi-sign-wrapper select,
#ffpmi-sign-wrapper input,
#ffpmi-sign-wrapper a {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* Exceptions : placeholder, bouton, badge numéro, erreurs */
#ffpmi-sign-wrapper input::placeholder,
#ffpmi-sign-wrapper textarea::placeholder { color: #aaa !important; -webkit-text-fill-color: #aaa !important; }
#ffpmi-sign-wrapper .ffpmi-sign-btn,
#ffpmi-sign-wrapper .ffpmi-sign-btn span,
#ffpmi-sign-wrapper .ffpmi-sign-btn .ffpmi-btn-text { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
#ffpmi-sign-wrapper .ffpmi-sign-section-num          { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
#ffpmi-sign-wrapper .ffpmi-field-error               { color: #c0392b !important; -webkit-text-fill-color: #c0392b !important; }
#ffpmi-sign-wrapper .ffpmi-sign-success              { color: #1e7e4a !important; -webkit-text-fill-color: #1e7e4a !important; }
#ffpmi-sign-wrapper .ffpmi-sign-error,
#ffpmi-sign-wrapper .ffpmi-sign-error span           { color: #c0392b !important; -webkit-text-fill-color: #c0392b !important; }
#ffpmi-sign-wrapper .req                             { color: #f9b233 !important; -webkit-text-fill-color: #f9b233 !important; }
#ffpmi-sign-wrapper .ffpmi-sign-mention,
#ffpmi-sign-wrapper .ffpmi-upload-info,
#ffpmi-sign-wrapper .ffpmi-sign-required-note,
#ffpmi-sign-wrapper .ffpmi-file-item-size            { color: #5a5a5a !important; -webkit-text-fill-color: #5a5a5a !important; }

/* ── Variables ──────────────────────────────────────────────── */
.ffpmi-sign-wrapper {
    --fs-color-primary:   #f9b233;
    --fs-color-primary-d: #e09e1a;
    --fs-color-text:      #111111;
    --fs-color-muted:     #5a5a5a;
    --fs-color-border:    #d8d3c9;
    --fs-color-bg:        #ffffff;
    --fs-color-bg-section:#fafaf8;
    --fs-color-error:     #c0392b;
    --fs-color-success:   #1e7e4a;
    --fs-radius:          8px;
    --fs-shadow:          0 2px 12px rgba(0,0,0,.07);
    --fs-font:            'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --fs-transition:      .2s ease;

    font-family: var(--fs-font);
    color:       var(--fs-color-text);
    max-width:   860px;
    margin:      0 auto;
    padding:     0 16px 48px;
    box-sizing:  border-box;
}

.ffpmi-sign-wrapper *,
.ffpmi-sign-wrapper *::before,
.ffpmi-sign-wrapper *::after {
    box-sizing: inherit;
}

/* ── En-tête ────────────────────────────────────────────────── */
.ffpmi-sign-header {
    border-left: 4px solid var(--fs-color-primary);
    padding:     16px 20px;
    margin-bottom: 32px;
    background:  var(--fs-color-bg-section);
    border-radius: 0 var(--fs-radius) var(--fs-radius) 0;
}

.ffpmi-sign-header h2 {
    font-size:   1.6rem;
    font-weight: 700;
    margin:      0 0 6px;
    color:       var(--fs-color-text);
    letter-spacing: -.3px;
}

.ffpmi-sign-header p {
    font-size:   .9rem;
    color:       var(--fs-color-muted);
    margin:      0;
    line-height: 1.5;
}

/* ── Notices ────────────────────────────────────────────────── */
.ffpmi-sign-notice {
    padding:       14px 18px;
    border-radius: var(--fs-radius);
    font-size:     .9rem;
    font-weight:   600;
    margin-bottom: 24px;
    line-height:   1.5;
}

.ffpmi-sign-success {
    background: #eaf6ee;
    border:     1px solid #b8dec6;
    color:      var(--fs-color-success);
}

.ffpmi-sign-error {
    background: #fdf0ef;
    border:     1px solid #f0c0bb;
    color:      var(--fs-color-error);
}

/* ── Sections (fieldset) ────────────────────────────────────── */
.ffpmi-sign-section {
    border:        none;
    padding:       0;
    margin:        0 0 32px;
    background:    var(--fs-color-bg);
    border-radius: var(--fs-radius);
    box-shadow:    var(--fs-shadow);
    overflow:      hidden;
}

.ffpmi-sign-section legend {
    display:         flex;
    align-items:     center;
    gap:             12px;
    width:           100%;
    font-size:       1rem;
    font-weight:     700;
    color:           var(--fs-color-text);
    background:      var(--fs-color-bg-section);
    border-bottom:   2px solid var(--fs-color-primary);
    padding:         14px 22px;
    letter-spacing:  .2px;
    float:           none;
}

.ffpmi-sign-section-num {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--fs-color-primary);
    color:           #ffffff;
    font-size:       .85rem;
    font-weight:     700;
    flex-shrink:     0;
}

/* Contenu de section */
.ffpmi-sign-section > *:not(legend) {
    padding: 0 22px;
}

.ffpmi-sign-section > .ffpmi-sign-field:first-of-type,
.ffpmi-sign-section > .ffpmi-sign-grid-2:first-of-type {
    padding-top: 20px;
}

.ffpmi-sign-section > *:last-child {
    padding-bottom: 22px;
}

/* ── Grille 2 colonnes ──────────────────────────────────────── */
.ffpmi-sign-grid-2 {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0 24px;
}

@media (max-width: 600px) {
    .ffpmi-sign-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ── Champ générique ────────────────────────────────────────── */
.ffpmi-sign-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  20px;
}

.ffpmi-sign-field label {
    font-size:   .82rem;
    font-weight: 600;
    color:       var(--fs-color-text);
    letter-spacing: .3px;
    text-transform: uppercase;
}

.ffpmi-sign-field .req {
    color:       var(--fs-color-primary);
    margin-left: 2px;
}

/* ── Inputs, selects, textareas ─────────────────────────────── */
.ffpmi-sign-wrapper input[type="text"],
.ffpmi-sign-wrapper input[type="email"],
.ffpmi-sign-wrapper input[type="tel"],
.ffpmi-sign-wrapper input[type="url"],
.ffpmi-sign-wrapper select,
.ffpmi-sign-wrapper textarea {
    font-family:   var(--fs-font);
    font-size:     .92rem;
    color:         var(--fs-color-text);
    background:    #ffffff;
    border:        1.5px solid var(--fs-color-border);
    border-radius: calc(var(--fs-radius) - 2px);
    padding:       11px 14px;
    width:         100%;
    transition:    border-color var(--fs-transition), box-shadow var(--fs-transition);
    outline:       none;
    appearance:    none;
    -webkit-appearance: none;
    line-height:   1.5;
}

.ffpmi-sign-wrapper input[type="text"]:focus,
.ffpmi-sign-wrapper input[type="email"]:focus,
.ffpmi-sign-wrapper input[type="tel"]:focus,
.ffpmi-sign-wrapper input[type="url"]:focus,
.ffpmi-sign-wrapper select:focus,
.ffpmi-sign-wrapper textarea:focus {
    border-color: var(--fs-color-primary);
    box-shadow:   0 0 0 3px rgba(249,178,51,.18);
}

.ffpmi-sign-wrapper input.ffpmi-has-error,
.ffpmi-sign-wrapper select.ffpmi-has-error,
.ffpmi-sign-wrapper textarea.ffpmi-has-error {
    border-color: var(--fs-color-error);
    box-shadow:   0 0 0 3px rgba(192,57,43,.12);
}

.ffpmi-sign-wrapper select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.ffpmi-sign-wrapper textarea {
    resize:  vertical;
    min-height: 120px;
}

/* ── Messages d'erreur champ ────────────────────────────────── */
.ffpmi-field-error {
    font-size:   .78rem;
    color:       var(--fs-color-error);
    font-weight: 500;
    min-height:  1em;
    display:     block;
}

/* ── Radio boutons ──────────────────────────────────────────── */
.ffpmi-sign-radio-group {
    display: flex;
    gap:     16px;
    flex-wrap: wrap;
}

.ffpmi-sign-radio {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    font-size:   .9rem;
    font-weight: 500;
}

.ffpmi-sign-radio span {
    color:       #111111 !important;
    font-size:   .9rem;
    font-weight: 500;
    line-height: 1.4;
}

.ffpmi-sign-radio input[type="radio"] {
    width:         18px;
    height:        18px;
    accent-color:  var(--fs-color-primary);
    cursor:        pointer;
    flex-shrink:   0;
}

/* ── Zone d'upload ──────────────────────────────────────────── */
.ffpmi-sign-upload-area {
    border:         2px dashed var(--fs-color-border);
    border-radius:  var(--fs-radius);
    padding:        28px 20px;
    text-align:     center;
    cursor:         pointer;
    transition:     border-color var(--fs-transition), background var(--fs-transition);
    position:       relative;
    background:     #fafafa;
}

.ffpmi-sign-upload-area:hover,
.ffpmi-sign-upload-area.drag-over {
    border-color: var(--fs-color-primary);
    background:   rgba(249,178,51,.04);
}

.ffpmi-upload-icon {
    color:         var(--fs-color-primary);
    margin-bottom: 10px;
}

.ffpmi-upload-label {
    font-size:   .9rem;
    font-weight: 600;
    color:       var(--fs-color-text);
    margin:      0 0 6px;
}

.ffpmi-upload-link {
    color:           var(--fs-color-primary);
    text-decoration: underline;
    cursor:          pointer;
}

.ffpmi-upload-info {
    font-size:  .78rem;
    color:      var(--fs-color-muted);
    margin:     0;
}

.ffpmi-file-input {
    position: absolute;
    inset:    0;
    opacity:  0;
    cursor:   pointer;
    width:    100%;
    height:   100%;
}

/* ── Liste des fichiers ─────────────────────────────────────── */
.ffpmi-file-list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     10px;
}

.ffpmi-file-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--fs-color-bg-section);
    border:          1px solid var(--fs-color-border);
    border-radius:   calc(var(--fs-radius) - 2px);
    padding:         9px 14px;
    font-size:       .83rem;
    gap:             10px;
}

.ffpmi-file-item-name {
    font-weight: 500;
    flex:        1;
    min-width:   0;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ffpmi-file-item-size {
    color:      var(--fs-color-muted);
    font-size:  .78rem;
    white-space: nowrap;
}

.ffpmi-file-remove {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--fs-color-muted);
    padding:     0 4px;
    font-size:   1.1rem;
    line-height: 1;
    transition:  color var(--fs-transition);
    flex-shrink: 0;
}

.ffpmi-file-remove:hover {
    color: var(--fs-color-error);
}

/* ── Mention confidentialité ────────────────────────────────── */
.ffpmi-sign-mention {
    background:    rgba(249,178,51,.08);
    border-left:   3px solid var(--fs-color-primary);
    border-radius: 0 var(--fs-radius) var(--fs-radius) 0;
    padding:       12px 16px;
    font-size:     .85rem;
    color:         var(--fs-color-muted);
    margin-bottom: 20px;
    line-height:   1.6;
}

/* ── Checkboxes ─────────────────────────────────────────────── */
.ffpmi-sign-checkbox {
    margin-bottom: 16px;
}

.ffpmi-checkbox-label {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    cursor:      pointer;
    font-size:   .87rem;
    line-height: 1.5;
    color:       #111111 !important;
}

.ffpmi-checkbox-label > span:last-child {
    color:       #111111 !important;
    font-size:   .87rem;
    line-height: 1.5;
}

.ffpmi-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.ffpmi-checkbox-custom {
    width:        20px;
    height:       20px;
    border:       2px solid var(--fs-color-border);
    border-radius: 4px;
    flex-shrink:  0;
    margin-top:   1px;
    display:      flex;
    align-items:  center;
    justify-content: center;
    transition:   border-color var(--fs-transition), background var(--fs-transition);
    background:   #fff;
    position:     relative;
}

.ffpmi-checkbox-label input[type="checkbox"]:checked + .ffpmi-checkbox-custom {
    background:   var(--fs-color-primary);
    border-color: var(--fs-color-primary);
}

.ffpmi-checkbox-label input[type="checkbox"]:checked + .ffpmi-checkbox-custom::after {
    content:     '';
    display:     block;
    width:       5px;
    height:      9px;
    border:      2px solid #fff;
    border-top:  none;
    border-left: none;
    transform:   rotate(45deg) translateY(-1px);
}

.ffpmi-checkbox-label input[type="checkbox"]:focus + .ffpmi-checkbox-custom {
    box-shadow: 0 0 0 3px rgba(249,178,51,.25);
    outline:    none;
}

/* ── Honeypot ────────────────────────────────────────────────── */
.ffpmi-hp {
    position:   absolute;
    left:       -9999px;
    top:        auto;
    width:      1px;
    height:     1px;
    overflow:   hidden;
}

/* ── Zone bouton ─────────────────────────────────────────────── */
.ffpmi-sign-submit-area {
    display:         flex;
    align-items:     center;
    gap:             20px;
    flex-wrap:       wrap;
    margin-top:      8px;
}

.ffpmi-sign-required-note {
    font-size:  .78rem;
    color:      var(--fs-color-muted);
    margin:     0;
}

.ffpmi-sign-required-note .req {
    color: var(--fs-color-primary);
}

/* ── Bouton principal ────────────────────────────────────────── */
.ffpmi-sign-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    font-family:     var(--fs-font);
    font-size:       .95rem;
    font-weight:     700;
    letter-spacing:  .4px;
    text-transform:  uppercase;
    color:           #ffffff !important;
    background:      var(--fs-color-primary);
    border:          none;
    border-radius:   var(--fs-radius);
    padding:         14px 32px;
    cursor:          pointer;
    transition:      background var(--fs-transition), transform var(--fs-transition), box-shadow var(--fs-transition);
    box-shadow:      0 4px 14px rgba(249,178,51,.35);
    min-width:       220px;
}

.ffpmi-sign-btn .ffpmi-btn-text {
    color: #ffffff !important;
}

.ffpmi-sign-btn:hover:not(:disabled) {
    background:  var(--fs-color-primary-d);
    transform:   translateY(-1px);
    box-shadow:  0 6px 20px rgba(249,178,51,.45);
}

.ffpmi-sign-btn:active:not(:disabled) {
    transform: translateY(0);
}

.ffpmi-sign-btn:disabled {
    opacity: .7;
    cursor:  not-allowed;
}

/* Loader spinner */
.ffpmi-btn-loader {
    display:      none;
    width:        18px;
    height:       18px;
    border:       2px solid rgba(255,255,255,.4);
    border-top:   2px solid #fff;
    border-radius:50%;
    animation:    ffpmi-spin .7s linear infinite;
    flex-shrink:  0;
}

.ffpmi-sign-btn.loading .ffpmi-btn-loader {
    display: block;
}

@keyframes ffpmi-spin {
    to { transform: rotate(360deg); }
}

/* ── Responsive mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
    .ffpmi-sign-header h2 { font-size: 1.3rem; }

    .ffpmi-sign-section > *:not(legend) { padding: 0 14px; }
    .ffpmi-sign-section > *:last-child  { padding-bottom: 16px; }
    .ffpmi-sign-section > .ffpmi-sign-field:first-of-type,
    .ffpmi-sign-section > .ffpmi-sign-grid-2:first-of-type { padding-top: 14px; }

    .ffpmi-sign-btn {
        width:     100%;
        min-width: unset;
    }

    .ffpmi-sign-submit-area {
        flex-direction: column;
        align-items:    stretch;
    }
}