/**
 * ZONEMPLOI - FORMULAIRES INDEPENDANTS
 * ====================================
 * Styles des formulaires produits par nos propres shortcodes.
 *
 * Contrairement a zonemploi-formulaire.css, qui habillait le balisage de
 * WP Job Manager depuis l'exterieur, cette feuille stylise un HTML que nous
 * ecrivons : classes maitrisees, aucune lutte de specificite, aucun !important.
 */

.zf-form {
    background: var(--zu-surface, #fff);
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: var(--zu-rayon, 14px);
    box-shadow: var(--zu-ombre-md, 0 4px 16px rgba(16,24,40,.07));
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* ============================================================
   EN-TETE
   ============================================================ */

.zf-entete {
    position: relative;
    padding: 28px 32px;
    background: linear-gradient(120deg, #EFF6FF 0%, #F2F7FF 45%, #FFFFFF 100%);
    border-bottom: 1px solid var(--zu-primaire-bordure, #DBEAFE);
    overflow: hidden;
}
.zf-entete::after {
    content: '';
    position: absolute; top: -70px; right: -50px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,.09), transparent 70%);
    pointer-events: none;
}
.zf-entete > * { position: relative; z-index: 1; }
.zf-entete__titre { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--zu-noir, #272727); }
.zf-entete__aide { margin: 0; font-size: 15px; color: var(--zu-texte, #54595F); }

/* ============================================================
   SECTIONS
   ============================================================ */

.zf-section {
    padding: 28px 32px;
    border-bottom: 1px solid var(--zu-bordure, #E6EEFC);
}
.zf-section:last-of-type { border-bottom: 0; }

.zf-section__titre {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--zu-noir, #272727);
}

.zf-section__numero {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--zu-primaire, #2563EB);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.zf-section__aide { margin: 0 0 20px; font-size: 13.5px; color: var(--zu-texte-doux, #7A7A7A); }
.zf-section__titre + .zf-grille,
.zf-section__titre + .zf-bloc { margin-top: 20px; }

/* ============================================================
   GRILLE DE CHAMPS
   ============================================================
   C'est ce qui met enfin les champs apparentes cote a cote, au lieu de la
   colonne unique interminable du formulaire d'origine.
   ------------------------------------------------------------ */

.zf-grille {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px 20px;
    align-items: start;
}

.zf-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zf-champ--pleine { grid-column: span 6; }
.zf-champ--moitie { grid-column: span 3; }
.zf-champ--tiers  { grid-column: span 2; }

.zf-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--zu-noir, #272727);
}
.zf-requis { color: var(--zu-danger, #EF4444); margin-left: 2px; }

.zf-input {
    width: 100%;
    padding: 11px 15px;
    border: 1px solid var(--zu-bordure-forte, #CBD5E1);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--zu-texte, #54595F);
    background-color: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.zf-input:hover { border-color: var(--zu-primaire, #2563EB); }
.zf-input:focus {
    outline: none;
    border-color: var(--zu-primaire, #2563EB);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.zf-input::placeholder { color: #A8B3C4; }

textarea.zf-input { resize: vertical; min-height: 92px; }

select.zf-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A7A7A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.zf-input--erreur {
    border-color: var(--zu-danger, #EF4444);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}

.zf-aide { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--zu-texte-doux, #7A7A7A); }

.zf-case {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--zu-texte, #54595F);
    cursor: pointer;
    margin-top: 8px;
}

/* ============================================================
   PHOTO
   ============================================================ */

.zf-photo {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: 12px;
    background: #FBFCFE;
}
.zf-photo__apercu {
    flex: 0 0 88px;
    width: 88px; height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--zu-primaire-clair, #EFF6FF);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--zu-primaire-bordure, #DBEAFE);
}
.zf-photo__apercu img { width: 100%; height: 100%; object-fit: cover; }
.zf-photo__vide { font-size: 34px; opacity: .4; }
.zf-photo__corps { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.zf-fichier {
    width: 100%;
    padding: 12px;
    border: 1px dashed var(--zu-bordure-forte, #CBD5E1);
    border-radius: 10px;
    background: #fff;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
}
.zf-fichier:hover { border-color: var(--zu-primaire, #2563EB); background: var(--zu-primaire-clair, #EFF6FF); }

/* ============================================================
   BLOCS REPETABLES
   ============================================================ */

.zf-bloc { display: flex; flex-direction: column; gap: 14px; }
.zf-bloc__lignes { display: flex; flex-direction: column; gap: 14px; }

.zf-ligne {
    position: relative;
    padding: 20px 46px 20px 20px;
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: 12px;
    background: #FBFCFE;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.zf-ligne:focus-within {
    border-color: var(--zu-primaire-bordure, #DBEAFE);
    box-shadow: 0 4px 14px -6px rgba(37, 99, 235, .3);
    background: #fff;
}

.zf-ligne--neuve { animation: zf-entree .28s cubic-bezier(.34, 1.2, .64, 1); }
.zf-ligne--sortante { opacity: 0; transform: scale(.97); transition: opacity .18s ease, transform .18s ease; }

@keyframes zf-entree {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.zf-retirer {
    position: absolute;
    top: 12px; right: 12px;
    width: 28px; height: 28px;
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: 50%;
    background: #fff;
    color: var(--zu-neutre, #94A3B8);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.zf-retirer:hover {
    background: var(--zu-danger, #EF4444);
    border-color: var(--zu-danger, #EF4444);
    color: #fff;
}

.zf-ajouter {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px dashed var(--zu-bordure-forte, #CBD5E1);
    border-radius: 100px;
    background: transparent;
    color: var(--zu-texte, #54595F);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.zf-ajouter:hover {
    border-style: solid;
    border-color: var(--zu-primaire, #2563EB);
    color: var(--zu-primaire, #2563EB);
    background: var(--zu-primaire-clair, #EFF6FF);
}
.zf-ajouter span { font-size: 16px; }

/* ============================================================
   FORMULAIRE D'OFFRE : CHOIX DE LA METHODE DE CANDIDATURE
   ============================================================ */

.zf-radios { display: grid; gap: 12px; margin-top: 20px; }

.zf-radio {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: 12px;
    background: #FBFCFE;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.zf-radio:hover { border-color: var(--zu-primaire, #2563EB); background: #fff; }

/* La carte entiere doit se colorer quand son bouton est coche : sans cela,
   seul le petit rond change et le choix passe inapercu. */
.zf-radio:has(input:checked) {
    border-color: var(--zu-primaire, #2563EB);
    background: var(--zu-primaire-clair, #EFF6FF);
    box-shadow: 0 0 0 1px var(--zu-primaire, #2563EB) inset;
}
.zf-radio:focus-within { box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }

.zf-radio input { margin-top: 3px; flex: 0 0 auto; }
.zf-radio__corps { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.zf-radio__titre { font-size: 15px; font-weight: 600; color: var(--zu-noir, #272727); }
.zf-radio__resume { font-weight: 400; color: var(--zu-texte, #54595F); }
.zf-radio__resume::before { content: ' — '; }
.zf-radio__aide { font-size: 13px; line-height: 1.55; color: var(--zu-texte-doux, #7A7A7A); }

.zf-radio--verrouille { opacity: .62; cursor: not-allowed; }
.zf-radio--verrouille:hover { border-color: var(--zu-bordure, #E6EEFC); background: #FBFCFE; }

/* ============================================================
   FORMULAIRE D'OFFRE : CRITERES DE PRESELECTION
   ============================================================ */

.zf-bareme {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 0 0 22px;
    padding: 18px 20px;
    border: 1px solid var(--zu-primaire-bordure, #DBEAFE);
    border-left: 4px solid var(--zu-primaire, #2563EB);
    border-radius: 12px;
    background: linear-gradient(120deg, #EFF6FF 0%, #F8FAFF 100%);
}
.zf-bareme strong { display: block; margin-bottom: 8px; font-size: 14px; color: var(--zu-noir, #272727); }
.zf-bareme p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--zu-texte, #54595F); }
.zf-bareme ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.zf-bareme li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--zu-texte, #54595F); }
.zf-bareme__ligne { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--zu-texte-doux, #7A7A7A); }

.zf-critere {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 24px;
    align-items: start;
    padding: 20px;
    margin-bottom: 12px;
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: 12px;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.zf-critere:hover { box-shadow: var(--zu-ombre-md, 0 4px 16px rgba(16,24,40,.07)); }
.zf-critere:focus-within { border-color: var(--zu-primaire-bordure, #DBEAFE); }

/* Les criteres a barème automatique se distinguent : leur champ est ailleurs
   dans le formulaire, seule leur importance se regle ici. */
.zf-critere--auto { background: #FFFBEB; border-color: #FDE68A; }

.zf-critere__corps { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zf-critere__titre { font-size: 14.5px; font-weight: 600; color: var(--zu-noir, #272727); }
.zf-critere__importance { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.zf-input--court { max-width: 140px; }

.zf-options { display: flex; flex-wrap: wrap; gap: 8px; }
.zf-options--compact .zf-option { min-width: 62px; justify-content: center; }

.zf-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--zu-bordure-forte, #CBD5E1);
    border-radius: 100px;
    background: #fff;
    font-size: 13.5px;
    color: var(--zu-texte, #54595F);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.zf-option:hover { border-color: var(--zu-primaire, #2563EB); color: var(--zu-primaire, #2563EB); }
.zf-option:has(input:checked) {
    border-color: var(--zu-primaire, #2563EB);
    background: var(--zu-primaire-clair, #EFF6FF);
    color: var(--zu-primaire, #2563EB);
    font-weight: 600;
}

/* ============================================================
   FORMULAIRE D'OFFRE : EDITEUR DE DESCRIPTION
   ============================================================
   L'editeur de WordPress arrive avec ses propres bordures grises. On les
   remplace par celles du formulaire pour qu'il ne detonne pas au milieu des
   autres champs.
   ------------------------------------------------------------ */

.zf-editeur .wp-editor-container {
    border: 1px solid var(--zu-bordure-forte, #CBD5E1);
    border-radius: 10px;
    overflow: hidden;
}
.zf-editeur .wp-editor-tabs { margin-bottom: 0; }
.zf-editeur .mce-panel { border-color: var(--zu-bordure, #E6EEFC) !important; }
.zf-editeur textarea.wp-editor-area { border: 0; font-family: inherit; }

.zf-photo__apercu--carre { border-radius: 12px; }

/* ============================================================
   ACTIONS ET MESSAGES
   ============================================================ */

.zf-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 24px 32px;
    background: #F8FAFD;
    border-top: 1px solid var(--zu-bordure, #E6EEFC);
}

.zf-erreurs { margin: 8px 0 0; padding-left: 20px; }
.zf-erreurs li { margin-bottom: 3px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 860px) {
    .zf-champ--moitie, .zf-champ--tiers { grid-column: span 6; }
    .zf-entete, .zf-section, .zf-actions { padding-left: 20px; padding-right: 20px; }
    .zf-entete__titre { font-size: 22px; }
    .zf-photo { flex-direction: column; align-items: center; text-align: center; }
    .zf-photo__corps { width: 100%; }
    .zf-actions .zu-btn { width: 100%; }
    .zf-critere { grid-template-columns: 1fr; gap: 16px; }
    .zf-radio__resume { display: block; }
    .zf-radio__resume::before { content: none; }
}

@media (min-width: 861px) and (max-width: 1100px) {
    .zf-champ--tiers { grid-column: span 3; }
}

@media (prefers-reduced-motion: reduce) {
    .zf-ligne--neuve { animation: none; }
}

/* Envoi en cours. Le bouton reste ACTIF — un <button disabled> est exclu des
   donnees envoyees, et le formulaire d'offre declenche justement son
   traitement sur le name de son bouton. On se contente donc de l'aspect. */
.zf-envoyer--occupe {
    opacity: .65;
    pointer-events: none;
    cursor: progress;
}

/* Message d'annonce en tete de formulaire (brouillon efface, etc.). */
.zf-annonce {
    margin-bottom: 14px;
    animation: zf-annonce-entree .3s ease-out;
    transition: opacity .4s ease, transform .4s ease;
}
.zf-annonce--sortante { opacity: 0; transform: translateY(-6px); }

@keyframes zf-annonce-entree {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .zf-annonce { animation: none; }
}

/* Critères personnalisés : zone de texte, pas un champ d'une ligne.
   Une exigence réelle — la liste des pièces attendues au dossier —
   fait dix lignes, et c'est l'IA qui la lit. La brider poussait à
   résumer, donc à perdre ce sur quoi elle doit se prononcer. */
.zf-textarea--critere {
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
    font-family: inherit;
}