/* ============================================================
   cybele-grid.css — Répertoire Cybèle
   Compatibilité Divi : tous les sélecteurs sont scoped sous
   .cybele-repertoire pour éviter les conflits de spécificité.
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
.cybele-repertoire {
    --cybele-teal:        #2AACBB;
    --cybele-teal-light:  #D9F3F7;
    --cybele-teal-dark:   #1e95a3;
    --cybele-dark:        #1A2B3C;
    --cybele-gray:        #6B7280;
    --cybele-gray-light:  #F8FAFC;
    --cybele-white:       #ffffff;
    --cybele-radius:      12px;
    --cybele-shadow:      0 2px 12px rgba(42,172,187,.10);
    --cybele-shadow-hover:0 6px 24px rgba(42,172,187,.18);
    font-family: inherit;
    box-sizing: border-box;
}


/* ── DIVI OVERFLOW FIX ──────────────────────────────────────── */
.et_pb_row:has(.cybele-repertoire),
.et_pb_column:has(.cybele-repertoire),
.et_pb_section:has(.cybele-repertoire) {
    overflow: visible !important;
}

/* Priorité CSS sur les inputs Divi */
.et_pb_module input,
.et_pb_module select {
    /* Reset Divi defaults only within our components */
}

/* ── RESET DIVI sur nos éléments ────────────────────────────── */
.cybele-repertoire *,
.cybele-repertoire *::before,
.cybele-repertoire *::after {
    box-sizing: border-box;
}

.cybele-repertoire input,
.cybele-repertoire select,
.cybele-repertoire button,
.cybele-repertoire textarea {
    font-family: inherit !important;
    font-size: .9rem !important;
}

/* ── LAYOUT PRINCIPAL ───────────────────────────────────────── */
.cybele-repertoire {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.cybele-grid-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

/* ── SEARCH + SORT ──────────────────────────────────────────── */
.cybele-search-sort-bar {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.cybele-search-input {
    flex: 1;
    min-width: 220px;
    padding: .65rem 1rem !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: .95rem !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color 200ms;
    box-shadow: none !important;
}

.cybele-search-input:focus {
    border-color: var(--cybele-teal) !important;
    box-shadow: 0 0 0 3px rgba(42,172,187,.12) !important;
}

.cybele-sort-select {
    padding: .65rem 2rem .65rem 1rem !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
    font-size: .9rem !important;
    appearance: auto !important;
}

/* ── RÉSULTATS COUNT ────────────────────────────────────────── */
.cybele-results-count {
    font-size: .875rem;
    color: var(--cybele-teal);
    font-weight: 600;
    padding: .5rem 0;
}

/* ── FILTRES SIDEBAR ────────────────────────────────────────── */
.cybele-filters {
    background: var(--cybele-white);
    border: 1px solid #e8ecf0;
    border-radius: var(--cybele-radius);
    padding: 1.25rem;
    box-shadow: var(--cybele-shadow);
    position: sticky;
    top: 1rem;
}

.cybele-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--cybele-teal-light);
}

.cybele-filters-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cybele-dark);
    margin: 0;
}

.cybele-reset-filters {
    font-size: .78rem;
    color: var(--cybele-teal);
    text-decoration: none;
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
}

.cybele-reset-filters:hover { text-decoration: underline; }

.cybele-filter-group {
    margin-bottom: 1.1rem;
}

.cybele-filter-group-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cybele-gray);
    margin: 0 0 .5rem;
}

.cybele-filter-group label {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .3rem .4rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: .85rem !important;
    color: var(--cybele-dark) !important;
    transition: background 150ms !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.cybele-filter-group label:hover {
    background: var(--cybele-teal-light) !important;
}

.cybele-filter-checkbox,
.cybele-filter-radio {
    width: 15px !important;
    height: 15px !important;
    accent-color: var(--cybele-teal) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.cybele-filter-count {
    font-size: .75rem;
    color: var(--cybele-gray);
    margin-left: auto;
}

/* ── GRILLE CARDS ───────────────────────────────────────────── */
.cybele-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    transition: opacity 250ms;
}

/* ── CARD ───────────────────────────────────────────────────── */
.cybele-card {
    background: var(--cybele-white) !important;
    border-radius: var(--cybele-radius) !important;
    box-shadow: var(--cybele-shadow) !important;
    overflow: hidden !important;
    transition: transform 200ms, box-shadow 200ms !important;
    border: 1px solid #e8ecf0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.cybele-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--cybele-shadow-hover) !important;
}

.cybele-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.cybele-card-link:hover { color: inherit !important; }

/* Photo */
.cybele-card-photo {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--cybele-teal-light);
    position: relative;
    max-height: 220px;
}

.cybele-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 300ms !important;
}

.cybele-card:hover .cybele-card-img {
    transform: scale(1.04) !important;
}

.cybele-card-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cybele-teal-light), var(--cybele-teal));
}

.cybele-card-photo-placeholder span {
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255,255,255,.8);
}

/* Corps */
.cybele-card-body {
    padding: 1rem 1rem .75rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .4rem !important;
}

.cybele-card-name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--cybele-dark) !important;
    margin: 0 0 .3rem !important;
    line-height: 1.25 !important;
}

/* Badges métiers */
.cybele-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .25rem;
}

.cybele-badge {
    display: inline-block !important;
    padding: .2rem .55rem !important;
    border-radius: 20px !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    /* Fallback statique WCAG AA */
    background: #e0f5f7 !important;
    color: #0d636d !important;
    /* Moderne */
    background: color-mix(in srgb, var(--badge-color, #2AACBB) 18%, white) !important;
    color: color-mix(in srgb, var(--badge-color, #2AACBB) 85%, black 15%) !important;
}

/* Modes + localisation + langues */
.cybele-card-modes,
.cybele-card-location,
.cybele-card-langues {
    font-size: .8rem !important;
    color: var(--cybele-gray) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: .3rem !important;
    line-height: 1.4 !important;
}

.cybele-icon {
    flex-shrink: 0;
    margin-top: .1rem;
    color: var(--cybele-teal);
}

/* ── NO RESULTS ─────────────────────────────────────────────── */
.cybele-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cybele-gray);
}

.cybele-no-results p { font-size: 1rem; margin-bottom: .75rem; }

/* ── LOADING ─────────────────────────────────────────────────── */
.cybele-loading {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.cybele-loading-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--cybele-teal-light);
    border-top-color: var(--cybele-teal);
    border-radius: 50%;
    animation: cybele-spin .7s linear infinite;
}

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

/* Skeleton cards */
.cybele-skeleton {
    background: #f0f4f8 !important;
    border-radius: var(--cybele-radius) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.cybele-skeleton-photo {
    aspect-ratio: 1;
    max-height: 220px;
    background: linear-gradient(90deg, #e8ecf0 25%, #f4f7f9 50%, #e8ecf0 75%);
    background-size: 200% 100%;
    animation: cybele-shimmer 1.3s infinite;
}

.cybele-skeleton-body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.cybele-skeleton-line {
    height: 14px; border-radius: 4px;
    background: linear-gradient(90deg, #e8ecf0 25%, #f4f7f9 50%, #e8ecf0 75%);
    background-size: 200% 100%;
    animation: cybele-shimmer 1.3s infinite;
}
.cybele-skeleton-line.short { width: 60%; }
.cybele-skeleton-line.medium { width: 80%; }

@keyframes cybele-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ── PAGINATION ──────────────────────────────────────────────── */
.cybele-pagination {
    display: flex;
    gap: .4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.cybele-page-btn {
    padding: .45rem .9rem !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--cybele-dark) !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 150ms !important;
    text-decoration: none !important;
}

.cybele-page-btn:hover,
.cybele-page-active {
    background: var(--cybele-teal) !important;
    border-color: var(--cybele-teal) !important;
    color: #fff !important;
}

/* ── REGIONS SKELETON ────────────────────────────────────────── */
.cybele-filter-regions[hidden] { display: none !important; }
.cybele-regions-skeleton { display: flex; flex-direction: column; gap: .4rem; padding: .25rem 0; }
.cybele-regions-skeleton span {
    display: block; height: 16px;
    background: linear-gradient(90deg, #e8ecf0 25%, #f4f7f9 50%, #e8ecf0 75%);
    background-size: 200% 100%;
    animation: cybele-shimmer 1.2s infinite;
    border-radius: 4px;
}
.cybele-regions-skeleton span:nth-child(2) { width: 55%; }
.cybele-regions-skeleton span:nth-child(3) { width: 75%; }

/* ── MOBILE TOGGLE ───────────────────────────────────────────── */
.cybele-filters-mobile-toggle {
    display: none !important;
    width: 100% !important;
    padding: .7rem 1rem !important;
    background: var(--cybele-teal) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: .9rem !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: .75rem !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 860px) {
    .cybele-grid-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .cybele-filters { position: static; width: 100%; }
    .cybele-filters-mobile-toggle { display: flex !important; }
    .cybele-filters-body.collapsed { display: none !important; }
    .cybele-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .cybele-search-sort-bar { flex-direction: column; gap: .5rem; }
    .cybele-sort-select { width: 100%; }
}

@media (max-width: 640px) {
    /* Cards en mode ligne: photo à gauche, info à droite.
       La direction doit être posée sur .cybele-card-link (l'enfant réel qui porte
       le flex), sinon la règle desktop en !important l'emporte. */
    .cybele-grid { grid-template-columns: 1fr; gap: .75rem; }
    .cybele-card { display: block; }
    .cybele-card-link {
        flex-direction: row !important;
        align-items: stretch !important;
        height: auto !important;
    }
    .cybele-card-photo {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px;
        border-radius: 8px 0 0 8px;
        flex-shrink: 0;
    }
    .cybele-card-photo img {
        width: 80px !important;
        height: 80px !important;
        border-radius: 8px 0 0 8px;
    }
    .cybele-card-photo-placeholder {
        width: 80px !important;
        height: 80px !important;
        border-radius: 8px 0 0 8px;
    }
    .cybele-card-body { padding: .65rem .75rem !important; flex: 1; }
    .cybele-card-footer {
        display: none; /* CTA arrow hidden in compact mode */
    }
    .cybele-card-name { font-size: .875rem; margin-bottom: .2rem; }
    .cybele-card-badges { gap: .2rem; margin-bottom: .3rem; }
    .cybele-badge { font-size: .62rem; padding: .12rem .35rem; }
    .cybele-card-meta { font-size: .78rem; gap: .25rem; }
}

@media (max-width: 640px) {
    /* Étiquettes statut / offres / métiers libres en mode compact */
    .cybele-tag-statut,
    .cybele-tag-partenaire { font-size: .58rem; padding: .12rem .35rem; gap: .2rem; }
    .cybele-tag-offre { font-size: .62rem; padding: .12rem .4rem; }
    .cybele-tag-libre { font-size: .6rem; padding: .08rem .3rem; }
    .cybele-tag-libre__hors { font-size: .54rem; }
    .cybele-card-row { gap: .2rem; margin-bottom: .3rem; }
    .cybele-card-row--one { margin-bottom: .25rem; }
    /* Au plus 4 métiers affichés, le reste est masqué pour garder la carte lisible */
    .cybele-card-badges .cybele-badge:nth-child(n+5) { display: none; }
}

@media (max-width: 480px) {
    .cybele-card-photo { width: 70px !important; height: 70px !important; min-width: 70px; }
    .cybele-card-photo img { width: 70px !important; height: 70px !important; }
    .cybele-card-photo-placeholder { width: 70px !important; height: 70px !important; }
    .cybele-card-name { font-size: .82rem !important; }
    .cybele-card-badges .cybele-badge:nth-child(n+4) { display: none; }
}

/* ── OVERRIDE DIVI GLOBAL STYLES ─────────────────────────────── */
.cybele-repertoire .et_pb_text_inner,
.cybele-repertoire h3.cybele-card-name {
    font-size: inherit !important;
    line-height: inherit !important;
}

.cybele-card a,
.cybele-card a:hover,
.cybele-card a:visited {
    color: inherit !important;
    text-decoration: none !important;
}

/* Masquer sidebar Divi sur pages Cybèle */
body.page .et_pb_column.et_pb_column_1_4:has(.widget_categories),
body.page .et_pb_column.et_pb_column_1_4:has(.widget_search) {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES DE CARTE — statut / partenaire / offres / métiers libres (v1.2)
   ══════════════════════════════════════════════════════════════════════════ */

.cybele-tag-statut,
.cybele-tag-partenaire {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .18rem .5rem;
    border-radius: 4px;
    border: 1px solid transparent;
}
.cybele-tag-statut--gradue    { background: #CCFBF1; color: #0F766E; border-color: #5EEAD4; }
.cybele-tag-statut--etudiant  { background: #FEF9C3; color: #854D0E; border-color: #FDE047; }
.cybele-tag-partenaire        { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.cybele-tag-partenaire svg    { fill: #F59E0B; stroke: #F59E0B; }

.cybele-tag-offre {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 20px;
    background: #FFF7ED;
    color: #C2410C;
    border: 1.5px dashed #FDBA74;
}

.cybele-tag-libre {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .68rem;
    padding: .1rem .4rem;
    border-radius: 20px;
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #CBD5E1;
}
.cybele-tag-libre__hors {
    font-size: .6rem;
    background: #FEF3C7;
    color: #92400E;
    border-radius: 2px;
    padding: 0 .25rem;
    font-weight: 700;
}

.cybele-card-row      { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.cybele-card-row--tight { gap: .2rem; margin-bottom: .25rem; }
.cybele-card-row--one { margin-bottom: .4rem; }