/* ════════════════════════════════════════════
   Bloc Réalisations — style.css v2.0
════════════════════════════════════════════ */

.br-wrap {
    --br-teal      : #76A47C;
    --br-teal-dark : #59735d;
    --br-teal-light: #99d1a2;
    --br-text      : #1a1a2e;
    --br-muted     : #6b7280;
    --br-border    : #e5e7eb;
    --br-white     : #ffffff;
    --br-radius    : 4px;
    --br-shadow-lg : 0 8px 40px rgba(0,0,0,.13);
    --br-transition: .22s cubic-bezier(.4,0,.2,1);
    font-family    : 'Segoe UI', system-ui, sans-serif;
    color          : var(--br-text);
    width          : 100%;
}

/* ── Filtres ── */
.br-filters {
    display       : flex;
    flex-wrap     : wrap;
    align-items   : center;
    gap           : 0;
    margin-bottom : 36px;
}

.br-filter {
    padding: 10px 15px;
    background     : none;
    border         : none;
    font-family    : inherit;
    font-size      : .72rem;
    font-weight    : 600;
    letter-spacing : .08em;
    text-transform : uppercase;
    color          : var(--br-muted);
    cursor         : pointer;
    white-space    : nowrap;
    position       : relative;
    transition     : color var(--br-transition);
}

.br-filter::after {
    content    : '';
    display    : block;
    height     : 2px;
    width      : 0;
    background : var(--br-teal);
    transition : width var(--br-transition); 
} 

.br-filter.active:focus {
    outline: 0px solid var(--br-teal);
    outline-offset: 0px;
}

.br-filter:hover,
.br-filter.active       { color: var(--br-teal); }
.br-filter:hover::after,
.br-filter.active::after {
    width: 80%;
    margin: 5px auto 0;
}

/* ── Grille ── */
.br-grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 24px;
    transition            : opacity var(--br-transition);
}

.br-grid--loading { opacity: .4; pointer-events: none; }

.br-wrap[data-layout="grid-2"] .br-grid { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1024px) { .br-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .br-grid { grid-template-columns: 1fr; } }

/* ── Carte ── */
.br-card {
    background    : var(--br-white);
    border        : 1px solid var(--br-border);
    border-radius : var(--br-radius);
    overflow      : hidden;
    transition    : box-shadow var(--br-transition), transform var(--br-transition);
    display       : flex;
    flex-direction: column;
}

.br-card:hover {
    box-shadow : var(--br-shadow-lg);
    transform  : translateY(-3px);
}

/* Lien image */
.br-card__link {
    display         : block;
    text-decoration : none;
}

/* Image */
.br-card__img-wrap {
    position     : relative;
    aspect-ratio : 16/10;
    overflow     : hidden;
    background   : var(--br-teal-light);
}

.br-card__img-wrap img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
    transition : transform .5s ease;
}

.br-card:hover .br-card__img-wrap img { transform: scale(1.05); }

.br-card__img-placeholder {
    width      : 100%;
    height     : 100%;
    background: linear-gradient(135deg, #5f9669, #7fbb89 55%, var(--br-teal-light) 100%);
}

/* Overlay — INVISIBLE par défaut, visible au hover uniquement */
.br-card__overlay {
    position        : absolute;
    inset           : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : rgba(0,0,0,.28);
    opacity         : 0;           /* ← clé : caché par défaut */
    transition      : opacity var(--br-transition);
    pointer-events  : none;
}

.br-card:hover .br-card__overlay { opacity: 1; }

.br-card__cta {
    display        : inline-block;
    padding        : 9px 24px;
    border         : 2px solid #fff;
    color          : #fff;
    font-size      : .75rem;
    font-weight    : 700;
    letter-spacing : .12em;
    text-transform : uppercase;
    transition     : background var(--br-transition), color var(--br-transition);
}

.br-card:hover .br-card__cta { background: #fff; color: var(--br-text); }

/* Corps */
.br-card__body { padding: 20px 22px 26px; flex: 1; }

.br-card__meta {
    font-size      : .68rem;
    color          : var(--br-teal);
    letter-spacing : .07em;
    text-transform : uppercase;
    margin         : 0 0 8px;
    font-weight: 400;
    display        : flex;
    align-items    : center;
    gap            : 5px;
    flex-wrap      : wrap;
}

.br-card__sep { opacity: .4; }
.br-card__cat { color: var(--br-teal); font-weight: 600; }

.br-card__divider {
    width      : 26px;
    height     : 2px;
    background : var(--br-teal);
    margin     : 0 0 12px;
}

.br-card__title {
    font-size   : .97rem;
    font-weight : 700;
    line-height : 1.35;
    margin      : 0 0 10px;
}

.br-card__title a {
    color           : var(--br-teal);
    text-decoration : none;
    transition      : color var(--br-transition);
}

.br-card__title a:hover { color: var(--br-teal); }

.br-card__title a:focus {
    outline: 0px solid var(--br-teal);
    outline-offset: 0px;
}

.br-card__excerpt {
    font-size          : .85rem;
    color              : var(--br-muted);
    line-height        : 1.65;
    margin             : 0;
    display            : -webkit-box;
    -webkit-line-clamp : 3;
    -webkit-box-orient : vertical;
    overflow           : hidden;
}

/* Animation entrée AJAX */
.br-card--anim { animation: brFadeUp .3s both; }
.br-card--anim:nth-child(2) { animation-delay: .05s; }
.br-card--anim:nth-child(3) { animation-delay: .10s; }
.br-card--anim:nth-child(4) { animation-delay: .13s; }
.br-card--anim:nth-child(5) { animation-delay: .16s; }
.br-card--anim:nth-child(6) { animation-delay: .19s; }

@keyframes brFadeUp {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── État vide ── */
.br-empty {
    text-align : center;
    padding    : 60px 20px;
    color      : var(--br-muted);
    font-style : italic;
    font-size  : .95rem;
}

/* ── Pagination ── */
.br-pagination {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 4px;
    margin-top      : 48px;
    flex-wrap       : wrap;
}

.br-pagi-label {
    font-size      : .68rem;
    font-weight    : 600;
    letter-spacing : .08em;
    text-transform : uppercase;
    color          : var(--br-muted);
    padding        : 0 6px;
    user-select    : none;
}

.br-page {
    min-width       : 36px;
    height          : 36px;
    padding         : 0 10px;
    background      : var(--br-white);
    border          : 1px solid var(--br-border);
    border-radius   : var(--br-radius);
    font-family     : inherit;
    font-size       : .83rem;
    font-weight     : 500;
    color           : var(--br-text);
    cursor          : pointer;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    transition      : background var(--br-transition), color var(--br-transition), border-color var(--br-transition);
}

.br-page:hover:not(:disabled):not(.br-page--dots) {
    background   : var(--br-teal-light);
    border-color : var(--br-teal);
    color        : var(--br-teal);
}

.br-page--active {
    background   : var(--br-teal) !important;
    border-color : var(--br-teal) !important;
    color        : #fff !important;
    font-weight  : 700;
}

.br-page--dots   { border:none; background:transparent; cursor:default; color:var(--br-muted); }
.br-page:disabled { opacity:.3; cursor:not-allowed; }
.br-page--prev,
.br-page--next   { color: var(--br-teal); }