/**
 * Styles CSS pour le plugin Annuaire Cyclescore
 * Conforme à la Charte Graphique "Cycle Score & Indice France Vélo"
 */

/* ==========================================================================
   1. LAYOUT GLOBAL & CONTENEUR
   ========================================================================== */
.annuaire-wrapper {
    display: flex;
    gap: 24px;
    font-family: 'Comfortaa', 'Arboria', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #111827;
    margin: 20px 0;
    box-sizing: border-box;
}

.annuaire-wrapper * {
    box-sizing: border-box;
}

/* ==========================================================================
   2. BARRE DE FILTRES (SIDEBAR GAUCHE)
   ========================================================================== */
.annuaire-sidebar-filters {
    width: 310px;
    flex-shrink: 0;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.filter-box {
    margin-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 14px;
}

.filter-box:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Champ de Recherche Textuelle */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    font-size: 14px;
    color: #6b7280;
    pointer-events: none;
}

#velo-search-input {
    width: 100%;
    padding: 10px 36px 10px 34px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 13.5px;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#velo-search-input:focus {
    outline: none;
    border-color: #1EBA78;
    box-shadow: 0 0 0 3px rgba(30, 186, 120, 0.15);
}

.search-clear-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    font-size: 16px;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px 6px;
}

.search-clear-btn:hover {
    color: #111827;
}

/* Accordéons / Sections de filtres */
.filter-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.filter-accordion-header h3,
.filter-accordion-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.accordion-icon {
    font-size: 10px;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.filter-accordion.closed .accordion-icon {
    transform: rotate(180deg);
}

.filter-accordion.closed .filter-accordion-content {
    display: none;
}

.filter-accordion-content {
    margin-top: 12px;
}

.filter-subhelp {
    font-size: 11px;
    color: #6b7280;
    margin: 0 0 8px 0;
}

/* Sélecteur Dropdown Marque */
.filter-select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    background-color: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.filter-select:focus {
    outline: none;
    border-color: #1EBA78;
}

/* Boutons de Filtre par Score Global (Forme Parallélogrammes biseautés identiques au Cycle Score) */
.score-filter-buttons {
    display: flex;
    gap: 3px;
    align-items: center;
    padding: 6px 0;
}

.score-filter-buttons button.score-btn,
.score-btn {
    flex: 1;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important; /* Neutralise les arrondis du thème WP */
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    transform: skewX(-15deg) !important;
    opacity: 0.65;
    transition: all 0.2s ease;
    box-shadow: none !important;
}

.score-filter-buttons button.score-btn .letter-text,
.score-btn .letter-text {
    transform: skewX(15deg) !important;
    display: inline-block;
}

/* Couleurs de fond identiques aux lettres du Cycle Score */
.score-btn-tous { background-color: #111827 !important; }
.score-btn-a    { background-color: #72D64C !important; }
.score-btn-b    { background-color: #1EBA78 !important; }
.score-btn-c    { background-color: #1E9E00 !important; }
.score-btn-d    { background-color: #44883E !important; }
.score-btn-e    { background-color: #36573B !important; }

/* Bouton Actif : Plus grand (taller & wider) et à 100% d'opacité, sans aucune bordure ni arrondi */
.score-filter-buttons button.score-btn.active,
.score-btn.active {
    height: 34px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    z-index: 5;
    flex: 1.25;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.score-btn:hover {
    opacity: 0.95;
}

/* Filtres Checkboxes Indice France */
.checkbox-filter-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12.5px;
    color: #374151;
    user-select: none;
}

.checkbox-item input[type="checkbox"] {
    accent-color: #000000;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-item:hover .label-text {
    color: #111827;
}

/* Bouton Réinitialiser */
.reset-filters-btn {
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed #9ca3af;
    border-radius: 8px;
    font-size: 12px;
    color: #4b5563;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 6px;
}

.reset-filters-btn:hover {
    background: #f3f4f6;
    color: #111827;
    border-color: #4b5563;
}


/* ==========================================================================
   3. SECTION PRINCIPALE & LISTE EN LIGNES (TABLEAU INTERACTIF)
   ========================================================================== */
.annuaire-main-content {
    flex-grow: 1;
    min-width: 0;
}

.annuaire-header-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #000000;
}

.banner-title-area h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #000000;
    text-transform: uppercase;
}

/* En-tête du Tableau de Vélos */
.velo-table-header {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1.2fr 2fr 2.6fr;
    gap: 12px;
    padding: 10px 14px;
    background-color: #ffffff;
    border-bottom: 2px solid #e5e7eb;
    font-size: 11px;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.col-header.sortable {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    transition: color 0.15s ease;
}

.col-header.sortable:hover {
    color: #1EBA78;
}

.col-header.sortable.sorted-asc .sort-direction-icon::after {
    content: ' ▲';
    color: #1EBA78;
}

.col-header.sortable.sorted-desc .sort-direction-icon::after {
    content: ' ▼';
    color: #1EBA78;
}

.col-header.sortable:not(.sorted-asc):not(.sorted-desc) .sort-direction-icon::after {
    content: ' ↕';
    color: #9ca3af;
    font-weight: normal;
}

/* Conteneur Isotope en Lignes */
.velo-list-container {
    width: 100%;
}

/* Ranger Individuelle (.velo-item) */
.velo-item {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1.4fr 1.2fr 2fr 2.6fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;
}

/* Alternance des rangées (Zebra striping) */
.velo-item:nth-child(even) {
    background-color: #fcfdfc;
}

.velo-item:hover {
    background-color: #f4fbf6;
}

.velo-col {
    font-size: 13px;
}

.mobile-label {
    display: none; /* Masqué sur écran desktop */
}

.velo-title {
    font-weight: 700;
    color: #111827;
}

.marque-tag {
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    font-size: 12px;
}

.date-text {
    color: #4b5563;
    font-size: 12.5px;
}


/* ==========================================================================
   4. COMPOSANT CYCLE SCORE (ÉCHELLE PARALLÉLOGRAMMES A-E)
   ========================================================================== */
.cyclescore-gauge {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.parallelogram-scale {
    display: flex;
    gap: 3px;
    align-items: center;
    padding: 4px 0;
}

.score-block {
    position: relative;
    width: 28px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skewX(-15deg);
    border-radius: 1px;
    font-weight: 700;
    font-size: 14px;
    color: #ffffff;
    border: none;
    outline: none;
    transition: all 0.2s ease;
}

/* Rétablir le texte droit à l'intérieur du parallélogramme */
.score-block .letter-text {
    transform: skewX(15deg);
    display: inline-block;
}

/* Couleurs officielles de la charte graphique */
.score-letter-a { background-color: #72D64C; }
.score-letter-b { background-color: #1EBA78; }
.score-letter-c { background-color: #1E9E00; }
.score-letter-d { background-color: #44883E; }
.score-letter-e { background-color: #36573B; }

/* Élément Actif (Score Global du vélo) : Plus grand (taller & wider) sans aucune bordure ! */
.score-block.active {
    width: 36px;
    height: 34px;
    font-size: 21px;
    font-weight: 900;
    z-index: 5;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 1px;
}

/* Sous-ligne des sous-scores (Environnement et Sociétal) juste en dessous */
.cyclescore-subline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 11px;
    color: #374151;
}

.subline-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.subline-label {
    font-weight: 700;
    color: #4b5563;
    font-size: 10.5px;
}

.mini-score-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 16px;
    transform: skewX(-15deg);
    border-radius: 1px;
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
}

.mini-score-pill .letter-text {
    transform: skewX(15deg);
    display: inline-block;
}

.non-concerne-text {
    font-style: italic;
    color: #6b7280;
    font-size: 10px;
}

.subline-sep {
    color: #9ca3af;
    font-size: 9px;
}


/* ==========================================================================
   5. COMPOSANT INDICE FRANCE VÉLO (PICTOGRAMMES PNG)
   ========================================================================== */
.indice-badges-container {
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 0px;
    min-width: 44px;
    max-width: 54px;
    transition: all 0.2s ease;
}

.badge-img,
.badge-svg {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}

.badge-label {
    font-size: 7px;
    font-weight: 700;
    margin-top: 3px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.2px;
    word-break: break-word;
    white-space: normal;
    text-align: center;
}

/* Statut Valide (Coché / True) : Noir intense (#000000) */
.badge-item.valide {
    color: #000000;
    opacity: 1;
}

.badge-item.valide .badge-img {
    opacity: 1;
    filter: none;
}

/* Statut Invalide (Non coché / False) : Grisé (#CCCCCC / Opacité 0.35) */
.badge-item.invalide {
    color: #9ca3af;
    opacity: 0.8;
}

.badge-item.invalide .badge-img {
    opacity: 1;
    filter: none;
}


/* ==========================================================================
   6. RESPONSIVE DESIGN (MOBILES ET TABLETTES)
   ========================================================================== */
@media (max-width: 991px) {
    .annuaire-wrapper {
        flex-direction: column;
    }

    .annuaire-sidebar-filters {
        width: 100%;
    }

    .velo-table-header {
        display: none; /* Masquer l'en-tête de tableau sur mobile */
    }

    .velo-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .mobile-label {
        display: inline-block;
        font-weight: 700;
        font-size: 11px;
        color: #6b7280;
        text-transform: uppercase;
        margin-right: 6px;
    }
}