/**
 * Styles front du plugin FT Offres d'emploi.
 * Couleurs --ftoe-* injectées dynamiquement depuis les réglages.
 */
.ftoe-wrapper {
    --ftoe-couleur-principale: #7ec353;
    --ftoe-couleur-boutons: #2b2b2b;
    --ftoe-couleur-cdc: #7ec353;
    --ftoe-couleur-creme: #f2f0ea;
    --ftoe-couleur-texte: #2b2b2b;
    --ftoe-couleur-bordure: #e6e6e6;
    --ftoe-radius: 14px;
    --ftoe-gap: 14px;
    color: var(--ftoe-couleur-texte);
    font-family: inherit;
}
.ftoe-ico { flex: 0 0 auto; vertical-align: middle; }

/* === Reset anti-thème : on neutralise ce que le thème impose === */
.ftoe-wrapper ul.ftoe-liste,
.ftoe-wrapper ul.ftoe-liste > li,
.ftoe-wrapper ul.ftoe-single__infos,
.ftoe-wrapper ul.ftoe-single__infos > li {
    list-style: none !important;
    margin: 0;
    padding: 0;
    background: none;
}
/* Supprime les pseudo-puces (carrés/ronds) injectées par le thème */
.ftoe-wrapper ul.ftoe-liste > li::before,
.ftoe-wrapper ul.ftoe-liste > li::marker,
.ftoe-wrapper ul.ftoe-single__infos > li::before,
.ftoe-wrapper ul.ftoe-single__infos > li::marker {
    content: none !important;
    display: none !important;
}
/* Force la couleur des titres (le thème met du vert sur les liens) */
.ftoe-wrapper .ftoe-offre__titre,
.ftoe-wrapper .ftoe-offre__titre a,
.ftoe-wrapper .ftoe-offre__titre a:visited {
    color: var(--ftoe-couleur-texte) !important;
    text-decoration: none;
}
.ftoe-wrapper .ftoe-offre__titre a:hover {
    color: var(--ftoe-couleur-principale) !important;
}

/* ---- Filtres ---- */
.ftoe-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 24px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--ftoe-couleur-bordure);
    border-radius: var(--ftoe-radius);
}
.ftoe-filtre-champ { display: flex; flex-direction: column; flex: 1 1 180px; }
.ftoe-filtre-champ > label { font-size: .82rem; font-weight: 600; margin-bottom: .35rem; color: var(--ftoe-couleur-texte); }
.ftoe-input {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d8d8d8;
    border-radius: 9px;
    padding: 0 12px;
    height: 46px;
    background: #fff;
    color: #9a9a9a;
}
.ftoe-input input,
.ftoe-input select {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    height: 100%;
    font-size: .95rem;
    color: var(--ftoe-couleur-texte);
}
.ftoe-input--select { position: relative; }
.ftoe-input--select select { appearance: none; cursor: pointer; }
.ftoe-filtre-actions { flex: 0 0 auto; }

/* ---- Boutons ---- */
.ftoe-btn {
    display: inline-block;
    background: var(--ftoe-couleur-principale);
    color: #fff;
    border: none;
    padding: 0 26px;
    height: 46px;
    line-height: 46px;
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 600;
    transition: opacity .15s ease;
    white-space: nowrap;
}
.ftoe-btn:hover { opacity: .92; color: #fff; }
.ftoe-btn--filtrer { width: 100%; }
.ftoe-btn--postuler { background: var(--ftoe-couleur-boutons); padding: 0 24px; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.ftoe-btn--postuler:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(43,43,43,.20); opacity: 1; }
.ftoe-btn--block { display: block; width: 100%; text-align: center; margin-top: 16px; }

/* ---- Toolbar + switch liste/blocs ---- */
.ftoe-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.ftoe-count { font-size: .95rem; font-weight: 600; color: var(--ftoe-couleur-texte); }
.ftoe-switch { display: inline-flex; border: 1px solid var(--ftoe-couleur-bordure); border-radius: 9px; overflow: hidden; }
.ftoe-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: #fff;
    color: #777;
    padding: 8px 14px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ftoe-switch__btn + .ftoe-switch__btn { border-left: 1px solid var(--ftoe-couleur-bordure); }
.ftoe-switch__btn[aria-pressed="true"] { background: var(--ftoe-couleur-principale); color: #fff; }

/* ---- Liste ---- */
.ftoe-liste { list-style: none; margin: 0; padding: 0; }
.ftoe-liste--liste { display: flex; flex-direction: column; gap: 20px; }
.ftoe-liste--liste .ftoe-offre { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ftoe-liste--liste .ftoe-offre__corps { flex: 1; }
.ftoe-liste--liste .ftoe-offre__extrait { display: none; }

.ftoe-liste--grille { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ftoe-liste--grille.ftoe-cols-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ftoe-liste--grille .ftoe-offre { display: flex; flex-direction: column; }
.ftoe-liste--grille .ftoe-offre__meta { flex-direction: column; align-items: flex-start; gap: 10px; }
.ftoe-liste--grille .ftoe-offre__action { margin-top: auto; padding-top: 18px; }
.ftoe-liste--grille .ftoe-btn--postuler { display: block; text-align: center; }

/* ---- Carte offre ---- */
.ftoe-offre {
    position: relative;
    border: 1px solid var(--ftoe-couleur-bordure);
    border-radius: var(--ftoe-radius);
    padding: 28px 30px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
/* Barre d'accent verte qui apparaît au survol (comme leur plateforme) */
.ftoe-offre::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: var(--ftoe-couleur-principale);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .25s ease;
}
.ftoe-offre:hover {
    box-shadow: 0 12px 30px rgba(43, 43, 43, .10);
    transform: translateY(-3px);
    border-color: #dcdcdc;
}
.ftoe-offre:hover::after { transform: scaleY(1); }

.ftoe-offre--cdc { border-color: var(--ftoe-couleur-cdc); border-width: 2px; }
.ftoe-offre--cdc:hover { box-shadow: 0 12px 30px rgba(126, 195, 83, .22); }

.ftoe-offre__titre { font-size: 1.3rem; font-weight: 700; margin: .85rem 0 .9rem; line-height: 1.3; }
.ftoe-offre__titre a { color: var(--ftoe-couleur-texte); text-decoration: none; }
.ftoe-offre__titre a:hover { color: var(--ftoe-couleur-principale); }
.ftoe-offre__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0;
    font-size: .95rem;
    color: #555;
}
.ftoe-offre__info { display: inline-flex; align-items: center; gap: 8px; }
.ftoe-offre__info .ftoe-ico { color: var(--ftoe-couleur-principale); }
.ftoe-offre__extrait { font-size: .92rem; margin-top: .8rem; color: #555; line-height: 1.6; }
.ftoe-offre__action { flex: 0 0 auto; }

/* ---- Badges ---- */
.ftoe-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .73rem;
    font-weight: 600;
    padding: .4rem .8rem;
    border-radius: 7px;
    letter-spacing: .01em;
}
.ftoe-badge .ftoe-ico { width: 13px; height: 13px; }
.ftoe-badge--cdc { background: color-mix(in srgb, var(--ftoe-couleur-cdc) 22%, #fff); color: #4d7a1e; }
.ftoe-badge--ft { background: #f1f1ee; color: #6b6b6b; }

.ftoe-vide {
    padding: 2rem;
    text-align: center;
    color: #777;
    background: var(--ftoe-couleur-creme);
    border-radius: var(--ftoe-radius);
}

/* ===================================================================
   PAGE DÉTAIL D'UNE OFFRE
   =================================================================== */
.ftoe-single__topbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ftoe-couleur-bordure);
}
.ftoe-single__titre { font-size: 1.9rem; font-weight: 700; margin: .5rem 0 .4rem; line-height: 1.2; color: var(--ftoe-couleur-texte) !important; }
.ftoe-single__entreprise { display: inline-flex; align-items: center; gap: 8px; color: #555; font-size: 1rem; margin: 0; }
.ftoe-single__entreprise .ftoe-ico { color: var(--ftoe-couleur-principale); }

.ftoe-single__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
}
.ftoe-single__main h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem; }
.ftoe-single__desc { font-size: .98rem; line-height: 1.65; }
.ftoe-single__desc ul { padding-left: 1.2em; }

.ftoe-single__card {
    background: #fff;
    border: 1px solid var(--ftoe-couleur-bordure);
    border-radius: var(--ftoe-radius);
    padding: 22px;
}
.ftoe-single__infos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ftoe-single__infos li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; }
.ftoe-single__infos .ftoe-ico { color: var(--ftoe-couleur-principale); margin-top: 2px; }
.ftoe-single__back { margin-top: 18px; }
.ftoe-single__back a { color: var(--ftoe-couleur-principale); text-decoration: none; font-weight: 600; font-size: .9rem; }

/* ---- Responsive ---- */
@media (max-width: 782px) {
    .ftoe-single__grid { grid-template-columns: 1fr; }
    .ftoe-liste--liste .ftoe-offre { flex-direction: column; align-items: stretch; }
    .ftoe-liste--liste .ftoe-offre__action { margin-top: 14px; }
    .ftoe-liste--liste .ftoe-btn--postuler { display: block; text-align: center; }
    .ftoe-filtre-champ { flex: 1 1 100%; }
}