/* ============================================================
   Components — éléments UI réutilisables
   Boutons, badges, alertes, cards, formulaires, pagination…
   ============================================================ */

/* ── Boutons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: background var(--transition), opacity var(--transition);
    white-space: nowrap;
}

.btn-primary   { background: var(--primary);  color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }

.btn-danger    { background: var(--danger);   color: #fff; }
.btn-danger:hover  { background: var(--danger-dark); color: #fff; }

.btn-success   { background: var(--success);  color: #fff; }
.btn-success:hover { opacity: .9; color: #fff; }

.btn-secondary { background: var(--bg-alt);   color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); color: var(--text); }

.btn-outline   { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }

.btn-sm { padding: .35rem .75rem; font-size: .8rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }

.btn-icon { padding: .35rem .5rem; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-published { background: #dcfce7; color: #166534; }
.badge-draft     { background: #f1f5f9; color: var(--text-muted); }
.badge-pending   { background: #fef9c3; color: #854d0e; }
.badge-warning   { background: #fef3c7; color: #92400e; }
.badge-danger    { background: #fee2e2; color: #991b1b; }
.badge-primary   { background: #eff6ff; color: var(--primary); }
.badge-member    { background: #f59e0b; color: #fff; }
.badge-admin-role { background: #ef4444; color: #fff; }

/* ── Badge cliquable (toggle statut, ex. "Lu"/"Non lu") ─────── */
.badge-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
}
.badge-btn:hover { opacity: .75; }

/* ── Alertes ──────────────────────────────────────────────── */
.alert {
    padding: .875rem var(--space-md);
    border-radius: var(--radius);
    margin-bottom: var(--space-lg);
    font-size: .875rem;
}

.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-warning { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ── Zone dangereuse (ex. suppression de compte) ─────────────── */
.danger-zone {
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: var(--space-md);
    background: #fef2f2;
}

/* ── Card générique ───────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.card-header {
    padding: var(--space-md) 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h2 {
    font-size: 1rem;
    font-weight: 600;
}

.card-body {
    padding: 1.25rem;
}

/* Card contenu (article/portfolio/news) */
.card-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition);
}

.card-item:hover {
    box-shadow: var(--shadow-md);
}

.card-img {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.card-item:hover .card-img img {
    transform: scale(1.03);
}

.card-body-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-sm);
}

.card-date    { font-size: .8rem; color: var(--text-muted); }
.card-title   { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.card-title a { color: var(--text); text-decoration: none; }
.card-title a:hover { color: var(--primary); }
.card-excerpt { font-size: .875rem; color: var(--text-muted); flex: 1; }
.card-actions { display: flex; gap: var(--space-sm); margin-top: auto; }

/* ── Formulaires ──────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.has-error input,
.has-error select,
.has-error textarea {
    border-color: var(--danger);
}

.error-msg {
    display: block;
    font-size: .8rem;
    color: var(--danger);
    margin-top: .3rem;
}

.help-text {
    display: block;
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .3rem;
}

/* ── Table wrap ───────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.table-wrap table {
    border: none;
}

/* ── Actions inline (✎/✕) ────────────────────────────────── */
.actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    justify-content: center;
    margin-top: var(--space-xl);
}

.pagination a, .pagination span {
    padding: .4rem .75rem;
    border-radius: var(--radius);
    font-size: .875rem;
    text-decoration: none;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.pagination a:hover {
    background: var(--bg-alt);
    color: var(--text);
}

.pagination .current {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Flèches, numéros et saisie directe (cf. macro `pagination`, macros.twig).
   Retour à la ligne autorisé pour ne pas déborder sur smartphone. */
.pagination {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.pagination-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
}

.pagination-pages a, .pagination-pages span,
.pagination-arrow {
    min-width: 2.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pagination-arrow.is-disabled {
    opacity: .35;
}

/* « … » : ni contour ni fond, pour se distinguer des numéros cliquables. */
.pagination-pages .pagination-gap {
    border: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

.pagination-jump {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
}

.pagination-jump label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    font-weight: 400;
    color: var(--text-muted);
}

.pagination .pagination-jump input {
    width: 4.5rem;
    padding: .4rem .5rem;
    font-size: .875rem;
    text-align: center;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pagination-jump input::-webkit-outer-spin-button,
.pagination-jump input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Smartphone : la saisie directe passe sur sa propre ligne. */
@media (max-width: 600px) {
    .pagination-jump {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* ── État vide ────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--text-muted);
}

/* ── Filtre nav (tags/catégories) ─────────────────────────── */
.filter-nav {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.filter-nav a {
    padding: .35rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    border: 1px solid var(--border);
    color: var(--text-muted);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.filter-nav a:hover,
.filter-nav a.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ── Tag catégorie (article) ──────────────────────────────── */
.cat-tag {
    background: #eff6ff;
    color: var(--primary);
    border-radius: 999px;
    padding: .2rem .75rem;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
}

.cat-tag:hover {
    background: var(--primary);
    color: #fff;
}

/* ── Aperçu image (formulaires) ───────────────────────────── */
.img-preview {
    max-width: 200px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-top: var(--space-sm);
}

/* ── Thumbnail tableau ────────────────────────────────────── */
.thumb {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ── Article / page de détail (générique) ─────────────────── */
.content-article {
    max-width: 800px;
    margin: 0 auto;
}

.article-header {
    margin-bottom: var(--space-xl);
}

.article-header h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.article-date {
    display: block;
    color: var(--text-muted);
    font-size: .875rem;
    margin-top: var(--space-sm);
}

.article-cats {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.article-image {
    margin-bottom: var(--space-xl);
    border-radius: var(--radius);
    overflow: hidden;
}

.article-image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.article-excerpt {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    font-style: italic;
}

.article-body {
    font-size: 1.05rem;
    line-height: 1.8;
}

.article-footer {
    margin-top: 2.5rem;
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border);
}

/* ── Section header (liste + détail) ─────────────────────── */
/* h1 en contexte de page, h2 pour les sections homepage */
.section-header h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
}

/* ── Layouts de liste ─────────────────────────────────────── */

/* Liste verticale */
.layout-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.card-list-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.card-list-item .card-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius);
}

.card-list-item .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 600px) {
    .card-list-item {
        grid-template-columns: 1fr;
    }
}

/* Masonry CSS */
.layout-masonry {
    columns: 3;
    column-gap: var(--gap);
}

.layout-masonry .card-item {
    break-inside: avoid;
    margin-bottom: var(--gap);
}

@media (max-width: 900px) { .layout-masonry { columns: 2; } }
@media (max-width: 500px) { .layout-masonry { columns: 1; } }