/* DATAOS - Formulaire PHP commun - Orange #FE9434 - Police Lato */


/* -- Reset -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: auto; overflow: visible; background: transparent; }
body { font-family: 'Lato', sans-serif; font-size: 14px; color: #333; }

/* -- Wrapper -------------------------------- */
.frm,
.df-form { padding: 16px 20px 30px; }

/* -- Champs de saisie ----------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid #ccc; border-radius: 4px;
    font-family: 'Lato', sans-serif; font-size: 14px; color: #333; background: #fff;
    outline: none; -webkit-appearance: none;
    transition: border-color .2s;
}
input:focus, select:focus, textarea:focus { border-color: #FE9434; }
select:disabled { background: #f5f5f5; color: #aaa; }
input::placeholder, textarea::placeholder { color: #bbb; }
textarea { resize: vertical; min-height: 80px; }

/* -- Labels --------------------------------- */
/* Famille "ancienne" : .lbl */
.lbl {
    display: block; font-size: 14px; font-weight: 400;
    color: #333; margin-bottom: 5px;
}
/* Famille "nouvelle" : .df-label */
.df-label {
    display: block; font-size: 14px; font-weight: 400;
    color: #333; margin-bottom: 5px;
}
/* Titre de section souligné */
.lbl-title {
    display: block; font-size: 14px; font-weight: 700;
    text-decoration: underline; color: #222; margin: 16px 0 6px;
}
/* Requis */
.req { color: #e00; }

/* -- Mise en page --------------------------- */
/* Ancienne : .q  /  Nouvelle : (pas d'équivalent, margin direct) */
.q { margin-bottom: 12px; }

/* Deux colonnes — ancienne : .row2  /  nouvelle : .df-row */
.row2,
.df-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.row2 > div,
.df-col { flex: 1; min-width: 180px; }
.df-col.df-full   { flex: 0 0 100%; min-width: 100%; }
.df-col.df-third  { flex: 0 0 calc(33.33% - 8px); min-width: 160px; }

/* -- Radios natifs (ancienne famille) ------- */
.radios { display: flex; gap: 18px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.radios label { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 400; color: #333; cursor: pointer; }
.radios input[type="radio"] { width: 15px; height: 15px; accent-color: #FE9434; cursor: pointer; flex-shrink: 0; }

/* -- Pills (nouvelle famille) --------------- */
.df-pills { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.df-pills input[type="radio"],
.df-pills input[type="checkbox"] { display: none; }
.df-pills label {
    padding: 6px 14px; border: 1px solid #ccc; border-radius: 20px;
    font-size: 14px; font-weight: 600; cursor: pointer; color: #555;
    transition: all .15s; user-select: none;
}
.df-pills input[type="radio"]:checked  + label,
.df-pills input[type="checkbox"]:checked + label { border-color: #FE9434; background: #FE9434; color: #fff; }

/* -- Blocs conditionnels -------------------- */
/* Ancienne : .cond / .cond.on  */
.cond { display: none; margin-top: 10px; padding-left: 10px; border-left: 3px solid #FE9434; }
.cond.on { display: block; }
/* Nouvelle : .df-conditional / .df-conditional.visible */
.df-conditional { display: none; margin-top: 10px; padding-left: 10px; border-left: 3px solid #FE9434; }
.df-conditional.visible { display: block; }

/* -- Séparateur ----------------------------- */
.sep,
.df-divider { border: none; border-top: 1px solid #e5e7eb; margin: 14px 0; }

/* -- Messages d'erreur inline --------------- */
.err-msg { display: none; color: #c0392b; font-size: 12px; margin-top: 3px; }
.err-msg.on { display: block; }
.field-error input,
.field-error textarea,
.field-error select { border-color: #c0392b !important; }
.field-error .radios { outline: 1px solid #c0392b; border-radius: 4px; padding: 4px; }

/* -- Info verte ----------------------------- */
.info-green { color: #2a7a2a; font-weight: 700; font-size: 13px; margin-top: 5px; }

/* -- RGPD ----------------------------------- */
.rgpd,
.df-rgpd { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13px; color: #555; }
.rgpd input[type="checkbox"],
.df-rgpd input[type="checkbox"] { width: 16px; height: 16px; accent-color: #FE9434; margin-top: 1px; flex-shrink: 0; cursor: pointer; }
.rgpd span,
.df-rgpd span { line-height: 1.4; }

/* -- Honeypot ------------------------------- */
.hp,
.df-hp { position: absolute; left: -9999px; visibility: hidden; }

/* -- Bouton --------------------------------- */
button.btn-send,
button.df-btn,
.df-btn {
    display: inline-block; background: #FE9434; color: #fff; border: none;
    padding: 11px 32px; border-radius: 4px;
    font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 700;
    cursor: pointer; margin-top: 16px; transition: background .15s;
    width: auto;
}
button.btn-send:hover,
button.df-btn:hover,
.df-btn:hover { background: #e6821e; }
button.btn-send:disabled,
button.df-btn:disabled,
.df-btn:disabled { opacity: .6; cursor: not-allowed; }

/* -- Loader --------------------------------- */
.loader,
.df-loader { display: none; margin-top: 10px; color: #888; font-size: 13px; font-style: italic; text-align: center; }
.loader.on,
.df-loader.on,
.df-loader.show { display: block; }

/* -- Messages finaux ------------------------ */
.msg-final,
.df-msg {
    display: none; margin-top: 12px; padding: 10px 14px;
    border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 1.4;
}
.msg-final.ok,
.df-msg.success,
.df-msg.show.success { display: block; background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.msg-final.ko,
.df-msg.error,
.df-msg.show.error   { display: block; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
/* Compat ancienne gestion .show séparé */
.df-msg.show { display: block; }

/* -- Responsive ----------------------------- */
@media (max-width: 480px) {
    .row2,
    .df-row { flex-direction: column; }
    .row2 > div,
    .df-col,
    .df-col.df-third { min-width: 100%; flex: 0 0 100%; }
}