/**
 * LeBonCoworking - Composants UI r\u00e9utilisables
 *
 * @version 1.0.0
 *
 * Extraits du design system principal (main.css).
 * Ce fichier contient tous les composants d'interface
 * r\u00e9utilisables ind\u00e9pendants du contexte de page.
 *
 * Table des mati\u00e8res :
 * 1. Buttons
 * 2. Forms
 * 3. Cards
 * 4. Badges
 * 5. Tags
 * 6. FAQ Accordion
 * 7. Alerts
 * 8. Pagination
 * 9. No Results
 */

/* ==========================================================================
   1. Buttons (.lbcw-btn)
   ========================================================================== */

.lbcw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lbcw-space-2);
    padding: var(--lbcw-space-3) var(--lbcw-space-6);
    font-family: var(--lbcw-font-family);
    font-size: var(--lbcw-font-size-base);
    font-weight: var(--lbcw-font-weight-medium);
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--lbcw-radius-lg);
    cursor: pointer;
    transition: all var(--lbcw-transition-fast);
    white-space: nowrap;
}

.lbcw-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--lbcw-primary-rgb), 0.3);
}

/* Primary */
.lbcw-btn--primary {
    background-color: var(--lbcw-primary);
    color: var(--lbcw-white);
}

.lbcw-btn--primary:hover {
    background-color: var(--lbcw-primary-dark);
    color: var(--lbcw-white);
}

/* Accent / CTA */
.lbcw-btn--accent {
    background-color: var(--lbcw-accent);
    color: var(--lbcw-white);
}

.lbcw-btn--accent:hover {
    background-color: var(--lbcw-accent-dark);
    color: var(--lbcw-white);
}

/* Outline */
.lbcw-btn--outline {
    background-color: transparent;
    border-color: var(--lbcw-primary);
    color: var(--lbcw-primary);
}

.lbcw-btn--outline:hover {
    background-color: var(--lbcw-primary);
    color: var(--lbcw-white);
}

/* Ghost */
.lbcw-btn--ghost {
    background-color: transparent;
    color: var(--lbcw-gray-700);
}

.lbcw-btn--ghost:hover {
    background-color: var(--lbcw-gray-100);
}

/* Size: Small */
.lbcw-btn--sm {
    padding: var(--lbcw-space-2) var(--lbcw-space-4);
    font-size: var(--lbcw-font-size-sm);
}

/* Size: Large */
.lbcw-btn--lg {
    padding: var(--lbcw-space-4) var(--lbcw-space-8);
    font-size: var(--lbcw-font-size-lg);
}

/* Size: Full width */
.lbcw-btn--full {
    width: 100%;
}

/* Icon button */
.lbcw-btn--icon {
    padding: var(--lbcw-space-3);
}

.lbcw-btn__icon {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   2. Forms (.lbcw-form-group, .lbcw-input, .lbcw-select, .lbcw-textarea)
   ========================================================================== */

.lbcw-form-group {
    margin-bottom: var(--lbcw-space-4);
}

.lbcw-label {
    display: block;
    font-size: var(--lbcw-font-size-sm);
    font-weight: var(--lbcw-font-weight-medium);
    color: var(--lbcw-gray-700);
    margin-bottom: var(--lbcw-space-2);
}

.lbcw-input,
.lbcw-select,
.lbcw-textarea {
    width: 100%;
    padding: var(--lbcw-space-3) var(--lbcw-space-4);
    font-family: var(--lbcw-font-family);
    font-size: var(--lbcw-font-size-base);
    color: var(--lbcw-gray-800);
    background-color: var(--lbcw-white);
    border: 1px solid var(--lbcw-gray-300);
    border-radius: var(--lbcw-radius-lg);
    transition: border-color var(--lbcw-transition-fast), box-shadow var(--lbcw-transition-fast);
}

.lbcw-input:focus,
.lbcw-select:focus,
.lbcw-textarea:focus {
    outline: none;
    border-color: var(--lbcw-primary);
    box-shadow: 0 0 0 3px rgba(var(--lbcw-primary-rgb), 0.15);
}

.lbcw-input::placeholder {
    color: var(--lbcw-gray-400);
}

/* Search box (hero) */
.lbcw-search-box {
    display: flex;
    gap: var(--lbcw-space-3);
    padding: var(--lbcw-space-3);
    background: var(--lbcw-white);
    border-radius: var(--lbcw-radius-2xl);
    box-shadow: var(--lbcw-shadow-xl);
}

.lbcw-search-box__input {
    flex: 1;
    border: none;
    padding: var(--lbcw-space-4);
    font-size: var(--lbcw-font-size-lg);
}

.lbcw-search-box__input:focus {
    box-shadow: none;
}

.lbcw-search-box__btn {
    padding: var(--lbcw-space-4) var(--lbcw-space-8);
}

/* ==========================================================================
   3. Cards (.lbcw-card)
   ========================================================================== */

.lbcw-card {
    background: var(--lbcw-white);
    border-radius: var(--lbcw-radius-xl);
    overflow: hidden;
    box-shadow: var(--lbcw-shadow);
    transition: transform var(--lbcw-transition-base), box-shadow var(--lbcw-transition-base);
}

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

/* Card image */
.lbcw-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.lbcw-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--lbcw-transition-slow);
}

.lbcw-card:hover .lbcw-card__image img {
    transform: scale(1.05);
}

/* Card badge */
.lbcw-card__badge {
    position: absolute;
    top: var(--lbcw-space-3);
    left: var(--lbcw-space-3);
}

/* Card content */
.lbcw-card__content {
    padding: var(--lbcw-space-5);
}

/* Card title */
.lbcw-card__title {
    font-size: var(--lbcw-font-size-lg);
    font-weight: var(--lbcw-font-weight-semibold);
    margin-bottom: var(--lbcw-space-2);
}

.lbcw-card__title a {
    color: var(--lbcw-gray-900);
}

.lbcw-card__title a:hover {
    color: var(--lbcw-primary);
}

/* Card location */
.lbcw-card__location {
    display: flex;
    align-items: center;
    gap: var(--lbcw-space-1);
    font-size: var(--lbcw-font-size-sm);
    color: var(--lbcw-gray-500);
    margin-bottom: var(--lbcw-space-3);
}

/* Card excerpt */
.lbcw-card__excerpt {
    font-size: var(--lbcw-font-size-sm);
    color: var(--lbcw-gray-600);
    margin-bottom: var(--lbcw-space-4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card meta */
.lbcw-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--lbcw-space-4);
    border-top: 1px solid var(--lbcw-gray-100);
}

/* Card price */
.lbcw-card__price {
    font-size: var(--lbcw-font-size-lg);
    font-weight: var(--lbcw-font-weight-bold);
    color: var(--lbcw-primary);
}

.lbcw-card__price span {
    font-size: var(--lbcw-font-size-sm);
    font-weight: var(--lbcw-font-weight-normal);
    color: var(--lbcw-gray-500);
}

/* Card rating */
.lbcw-card__rating {
    display: flex;
    align-items: center;
    gap: var(--lbcw-space-1);
    font-size: var(--lbcw-font-size-sm);
}

.lbcw-card__rating-star {
    color: var(--lbcw-accent);
}

/* ==========================================================================
   4. Badges (.lbcw-badge)
   ========================================================================== */

.lbcw-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--lbcw-space-1);
    padding: var(--lbcw-space-1) var(--lbcw-space-3);
    font-size: var(--lbcw-font-size-xs);
    font-weight: var(--lbcw-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--lbcw-radius-full);
}

/* Premium badge (gradient accent) */
.lbcw-badge--premium {
    background: linear-gradient(135deg, var(--lbcw-accent), var(--lbcw-accent-dark));
    color: var(--lbcw-white);
}

/* Ville badge (primary bg) */
.lbcw-badge--ville {
    background-color: var(--lbcw-primary);
    color: var(--lbcw-white);
}

/* Equipement badge (gray-100 bg) */
.lbcw-badge--equipement {
    background-color: var(--lbcw-gray-100);
    color: var(--lbcw-gray-700);
}

/* 24h badge (success-light bg) */
.lbcw-badge--24h {
    background-color: var(--lbcw-success-light);
    color: var(--lbcw-success);
}

/* ==========================================================================
   5. Tags (.lbcw-tags, .lbcw-tag)
   ========================================================================== */

.lbcw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lbcw-space-2);
}

.lbcw-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--lbcw-space-1);
    padding: var(--lbcw-space-1) var(--lbcw-space-2);
    font-size: var(--lbcw-font-size-xs);
    color: var(--lbcw-gray-600);
    background-color: var(--lbcw-gray-100);
    border-radius: var(--lbcw-radius-md);
}

.lbcw-tag__icon {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   6. FAQ Accordion
   --------------------------------------------------------------------------
   Deux patterns support\u00e9s :
   - Ancien : .lbcw-faq / .lbcw-faq__item / .lbcw-faq__question / .lbcw-faq__answer
   - Nouveau : .lbcw-faq-list / .lbcw-faq-item / .lbcw-faq-item__question / .lbcw-faq-item__answer
   ========================================================================== */

/* --- Ancien pattern (BEM double underscore) --- */

.lbcw-faq {
    max-width: 700px;
    margin: 0 auto;
}

.lbcw-faq__item {
    border-bottom: 1px solid var(--lbcw-gray-200);
}

.lbcw-faq__item:last-child {
    border-bottom: none;
}

.lbcw-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--lbcw-space-5) 0;
    font-size: var(--lbcw-font-size-lg);
    font-weight: var(--lbcw-font-weight-medium);
    color: var(--lbcw-gray-800);
    cursor: pointer;
    list-style: none;
}

.lbcw-faq__question::-webkit-details-marker {
    display: none;
}

.lbcw-faq__question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--lbcw-primary);
    transition: transform var(--lbcw-transition-fast);
}

.lbcw-faq__item[open] .lbcw-faq__question::after {
    content: '\2212'; /* minus sign */
}

.lbcw-faq__answer {
    padding-bottom: var(--lbcw-space-5);
    color: var(--lbcw-gray-600);
    line-height: var(--lbcw-line-height-relaxed);
}

.lbcw-faq__answer p:last-child {
    margin-bottom: 0;
}

/* --- Nouveau pattern (BEM single dash) --- */

.lbcw-faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.lbcw-faq-item {
    border-bottom: 1px solid var(--lbcw-gray-200);
}

.lbcw-faq-item:first-child {
    border-top: 1px solid var(--lbcw-gray-200);
}

.lbcw-faq-item__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lbcw-space-4);
    padding: var(--lbcw-space-5) 0;
    font-size: var(--lbcw-font-size-lg);
    font-weight: var(--lbcw-font-weight-medium);
    color: var(--lbcw-gray-800);
    cursor: pointer;
    list-style: none;
    transition: color var(--lbcw-transition-fast);
}

.lbcw-faq-item__question::-webkit-details-marker {
    display: none;
}

.lbcw-faq-item__question:hover {
    color: var(--lbcw-primary);
}

/* Chevron icon rotation on open */
.lbcw-faq-item__icon {
    flex-shrink: 0;
    color: var(--lbcw-primary);
    transition: transform 0.2s ease;
}

.lbcw-faq-item[open] .lbcw-faq-item__icon {
    transform: rotate(180deg);
}

.lbcw-faq-item__answer {
    padding: 0 0 var(--lbcw-space-5);
    color: var(--lbcw-gray-600);
    line-height: var(--lbcw-line-height-relaxed);
}

.lbcw-faq-item__answer p {
    margin: 0 0 var(--lbcw-space-3);
}

.lbcw-faq-item__answer p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   7. Alerts (.lbcw-alert)
   ========================================================================== */

.lbcw-alert {
    padding: var(--lbcw-space-4) var(--lbcw-space-5);
    border-radius: var(--lbcw-radius-lg);
    margin: var(--lbcw-space-4) 0;
}

/* Info */
.lbcw-alert--info {
    background: var(--lbcw-info-light);
    border-left: 4px solid var(--lbcw-info);
}

/* Warning */
.lbcw-alert--warning {
    background: var(--lbcw-warning-light);
    border-left: 4px solid var(--lbcw-warning);
}

/* Success */
.lbcw-alert--success {
    background: var(--lbcw-success-light);
    border-left: 4px solid var(--lbcw-success);
}

.lbcw-alert p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   8. Pagination (.lbcw-pagination)
   ========================================================================== */

.lbcw-pagination {
    display: flex;
    justify-content: center;
    gap: var(--lbcw-space-2);
    margin-top: var(--lbcw-space-10);
}

.lbcw-pagination__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--lbcw-radius-md);
    font-weight: var(--lbcw-font-weight-medium);
    color: var(--lbcw-gray-700);
    background: var(--lbcw-white);
    border: 1px solid var(--lbcw-gray-200);
    transition: all var(--lbcw-transition-fast);
}

.lbcw-pagination__link:hover {
    border-color: var(--lbcw-primary);
    color: var(--lbcw-primary);
}

.lbcw-pagination__link--active {
    background: var(--lbcw-primary);
    border-color: var(--lbcw-primary);
    color: var(--lbcw-white);
}

/* ==========================================================================
   9. No Results (.lbcw-no-results)
   ========================================================================== */

.lbcw-no-results {
    text-align: center;
    padding: var(--lbcw-space-16) var(--lbcw-space-8);
    background: var(--lbcw-gray-50);
    border-radius: var(--lbcw-radius-xl);
}

.lbcw-no-results p {
    margin-bottom: var(--lbcw-space-6);
    color: var(--lbcw-gray-600);
}