/* ==========================================================================
   Annuaire & Événements Pro — Frontend CSS
   ========================================================================== */

/* --- Variables de design ------------------------------------------------- */
:root {
    --aep-primary:        #2563eb;
    --aep-primary-dark:   #1d4ed8;
    --aep-primary-light:  #eff6ff;
    --aep-accent:         #f59e0b;
    --aep-accent-dark:    #d97706;
    --aep-success:        #10b981;
    --aep-danger:         #ef4444;
    --aep-warning:        #f59e0b;
    --aep-text:           #111827;
    --aep-text-muted:     #6b7280;
    --aep-border:         #e5e7eb;
    --aep-bg:             #f9fafb;
    --aep-bg-card:        #ffffff;
    --aep-shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --aep-shadow:         0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
    --aep-shadow-lg:      0 10px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
    --aep-radius:         14px;
    --aep-radius-sm:      8px;
    --aep-gap:            1.5rem;
    --aep-transition:     .2s cubic-bezier(.4,0,.2,1);
}

/* --- Reset minimal ------------------------------------------------------- */
.aep-grid, .aep-card, .aep-search-wrapper, .aep-pagination,
.aep-related-events, .aep-empty-state {
    box-sizing: border-box;
}

/* ==========================================================================
   GRILLE
   ========================================================================== */

.aep-grid {
    display: grid;
    gap: var(--aep-gap);
    margin: 2rem 0;
}

.aep-cols-1 { grid-template-columns: 1fr; }
.aep-cols-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.aep-cols-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.aep-cols-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ==========================================================================
   CARTE GÉNÉRIQUE
   ========================================================================== */

.aep-card {
    background:     var(--aep-bg-card);
    border-radius:  var(--aep-radius);
    border:         1px solid var(--aep-border);
    box-shadow:     var(--aep-shadow);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:     transform var(--aep-transition), box-shadow var(--aep-transition);
    position:       relative;
}

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

.aep-card--featured {
    border-color: var(--aep-accent);
    box-shadow: var(--aep-shadow), 0 0 0 2px rgba(245,158,11,.15);
}

.aep-card--past {
    opacity: .75;
    filter:  grayscale(.3);
}

/* --- Média (image) -------------------------------------------------------- */

.aep-card__media {
    display:    block;
    overflow:   hidden;
    aspect-ratio: 16 / 9;
    position:   relative;
    background: var(--aep-bg);
    text-decoration: none;
}

.aep-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .35s ease;
}

.aep-card:hover .aep-card__img {
    transform: scale(1.05);
}

.aep-card__placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--aep-bg);
    color:           var(--aep-border);
}

.aep-card__placeholder--ev {
    background: #f0f9ff;
    color:      #bae6fd;
}

/* --- Badges sur l'image -------------------------------------------------- */

.aep-card__badges {
    position: absolute;
    top:      .75rem;
    left:     .75rem;
    display:  flex;
    flex-wrap: wrap;
    gap:      .35rem;
    z-index:  2;
}

.aep-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           .25rem;
    padding:       .25rem .65rem;
    border-radius: 50px;
    font-size:     .72rem;
    font-weight:   700;
    letter-spacing: .02em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    white-space:   nowrap;
}

.aep-badge__dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    currentColor;
    flex-shrink:   0;
}

.aep-badge--open    { background: rgba(16,185,129,.9);  color: #fff; }
.aep-badge--closed  { background: rgba(239,68,68,.9);   color: #fff; }
.aep-badge--break   { background: rgba(245,158,11,.9);  color: #fff; }
.aep-badge--unknown { background: rgba(107,114,128,.8); color: #fff; }
.aep-badge--verified { background: rgba(37,99,235,.9);  color: #fff; }
.aep-badge--featured { background: rgba(245,158,11,.9); color: #fff; }

/* Badge catégorie overlay (événements) */
.aep-card__cat-overlay {
    position:  absolute;
    bottom:    .75rem;
    left:      .75rem;
    background: rgba(0,0,0,.55);
    color:     #fff;
    font-size: .72rem;
    font-weight: 600;
    padding:   .2rem .6rem;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    z-index:   2;
}

/* --- Badge Date (coin supérieur gauche événement) ------------------------- */

.aep-date-badge {
    position:        absolute;
    top:             .75rem;
    left:            .75rem;
    background:      var(--aep-primary);
    color:           #fff;
    border-radius:   var(--aep-radius-sm);
    padding:         .35rem .55rem;
    text-align:      center;
    line-height:     1;
    min-width:       46px;
    box-shadow:      0 2px 8px rgba(37,99,235,.35);
    z-index:         3;
}

.aep-date-badge__day {
    display:    block;
    font-size:  1.3rem;
    font-weight: 800;
}

.aep-date-badge__month {
    display:    block;
    font-size:  .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity:    .9;
    margin-top: .1rem;
}

/* --- Badge Prix (coin supérieur droit) ------------------------------------ */

.aep-price-badge {
    position:      absolute;
    top:           .75rem;
    right:         .75rem;
    background:    var(--aep-accent);
    color:         #fff;
    font-size:     .8rem;
    font-weight:   700;
    padding:       .3rem .7rem;
    border-radius: 50px;
    box-shadow:    0 2px 8px rgba(245,158,11,.35);
    z-index:       3;
}

.aep-price-badge--free {
    background: var(--aep-success);
    box-shadow: 0 2px 8px rgba(16,185,129,.35);
}

/* --- Corps de la carte ---------------------------------------------------- */

.aep-card__body {
    padding:        1.1rem 1.25rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            .45rem;
}

.aep-card__cat {
    display:       inline-block;
    font-size:     .72rem;
    font-weight:   700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:         var(--aep-primary);
}

.aep-card__title {
    font-size:   1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin:      0;
    color:       var(--aep-text);
}

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

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

.aep-card__status-label {
    font-size:  .8rem;
    font-weight: 600;
    margin:     0;
}
.aep-status--open   { color: var(--aep-success); }
.aep-status--closed { color: var(--aep-danger);  }
.aep-status--break  { color: var(--aep-warning); }

.aep-card__excerpt {
    font-size:  .875rem;
    color:      var(--aep-text-muted);
    line-height: 1.55;
    margin:     0;
    display:    -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:   hidden;
}

.aep-card__meta {
    display:     flex;
    align-items: flex-start;
    gap:         .4rem;
    font-size:   .83rem;
    color:       var(--aep-text-muted);
    margin:      0;
    line-height: 1.5;
}

.aep-card__meta svg { flex-shrink: 0; margin-top: .1rem; }
.aep-card__meta a { color: var(--aep-text-muted); text-decoration: none; }
.aep-card__meta a:hover { color: var(--aep-primary); }
.aep-card__meta--date { color: var(--aep-primary); font-weight: 600; }

/* --- Liens sociaux ------------------------------------------------------- */

.aep-social-links {
    display:   flex;
    gap:       .5rem;
    margin-top: .25rem;
}

.aep-social-link {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    border-radius:   50%;
    background:      var(--aep-bg);
    color:           var(--aep-text-muted);
    border:          1px solid var(--aep-border);
    transition:      background var(--aep-transition), color var(--aep-transition);
    text-decoration: none;
}

.aep-social-link:hover { background: var(--aep-primary); color: #fff; border-color: var(--aep-primary); }
.aep-social--fb:hover  { background: #1877f2; border-color: #1877f2; }
.aep-social--ig:hover  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: transparent; }
.aep-social--li:hover  { background: #0a66c2; border-color: #0a66c2; }

/* --- Footer de la carte -------------------------------------------------- */

.aep-card__footer {
    padding:     .9rem 1.25rem;
    border-top:  1px solid var(--aep-border);
    display:     flex;
    gap:         .6rem;
    flex-wrap:   wrap;
    align-items: center;
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.aep-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .35rem;
    padding:         .5rem 1rem;
    border-radius:   var(--aep-radius-sm);
    font-size:       .83rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background var(--aep-transition), color var(--aep-transition), border-color var(--aep-transition);
    cursor:          pointer;
    border:          none;
    white-space:     nowrap;
}

.aep-btn--sm     { padding: .4rem .85rem; font-size: .8rem; }
.aep-btn         { background: var(--aep-primary); color: #fff !important; }
.aep-btn:hover   { background: var(--aep-primary-dark); }
.aep-btn--ghost  { background: transparent; color: var(--aep-text-muted) !important; border: 1px solid var(--aep-border); }
.aep-btn--ghost:hover { background: var(--aep-bg); color: var(--aep-text) !important; }
.aep-btn--accent { background: var(--aep-accent); color: #fff !important; }
.aep-btn--accent:hover { background: var(--aep-accent-dark); }

/* ==========================================================================
   BARRE DE RECHERCHE GLOBALE
   ========================================================================== */

.aep-search-wrapper {
    background:    var(--aep-bg-card);
    border-radius: var(--aep-radius);
    box-shadow:    var(--aep-shadow-lg);
    padding:       1.5rem;
    margin:        2rem 0;
    border:        1px solid var(--aep-border);
}

.aep-search-inner {
    display:   flex;
    gap:       .75rem;
    flex-wrap: wrap;
    align-items: center;
}

.aep-sf {
    position: relative;
    flex:     1;
    min-width: 180px;
}

.aep-sf--keywords { flex: 2; min-width: 250px; }

.aep-sf__icon {
    position:    absolute;
    left:        .85rem;
    top:         50%;
    transform:   translateY(-50%);
    color:       var(--aep-text-muted);
    pointer-events: none;
    display:     flex;
}

.aep-sf__input,
.aep-sf__select {
    width:         100%;
    padding:       .7rem .85rem .7rem 2.5rem;
    border:        1px solid var(--aep-border);
    border-radius: var(--aep-radius-sm);
    font-size:     .9rem;
    color:         var(--aep-text);
    background:    var(--aep-bg);
    transition:    border-color var(--aep-transition), box-shadow var(--aep-transition);
    appearance:    none;
    outline:       none;
}

.aep-sf__input:focus,
.aep-sf__select:focus {
    border-color: var(--aep-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
    background:   #fff;
}

.aep-sf__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2.2rem;
    cursor: pointer;
}

.aep-search-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           .45rem;
    padding:       .72rem 1.5rem;
    background:    var(--aep-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--aep-radius-sm);
    font-size:     .9rem;
    font-weight:   700;
    cursor:        pointer;
    transition:    background var(--aep-transition);
    white-space:   nowrap;
    flex-shrink:   0;
}

.aep-search-btn:hover { background: var(--aep-primary-dark); }

/* --- Autocomplétion ------------------------------------------------------ */

.aep-autocomplete {
    position:     absolute;
    top:          calc(100% + .35rem);
    left:         0;
    right:        0;
    background:   var(--aep-bg-card);
    border:       1px solid var(--aep-border);
    border-radius: var(--aep-radius-sm);
    box-shadow:   var(--aep-shadow-lg);
    z-index:      9999;
    overflow:     hidden;
    display:      none;
    max-height:   380px;
    overflow-y:   auto;
}

.aep-autocomplete.is-open { display: block; }

.aep-autocomplete-item {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    padding:     .7rem 1rem;
    cursor:      pointer;
    transition:  background var(--aep-transition);
    border-bottom: 1px solid var(--aep-border);
    text-decoration: none;
}

.aep-autocomplete-item:last-child { border-bottom: none; }
.aep-autocomplete-item:hover,
.aep-autocomplete-item.is-active { background: var(--aep-primary-light); }

.aep-suggest-thumb {
    width:         42px;
    height:        42px;
    border-radius: var(--aep-radius-sm);
    overflow:      hidden;
    flex-shrink:   0;
    background:    var(--aep-bg);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1.2rem;
}

.aep-suggest-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.aep-suggest-info {
    display:        flex;
    flex-direction: column;
    gap:            .15rem;
    flex:           1;
    min-width:      0;
}

.aep-suggest-title {
    font-size:   .88rem;
    font-weight: 600;
    color:       var(--aep-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.aep-suggest-type {
    font-size:  .73rem;
    color:      var(--aep-text-muted);
}

.aep-suggest-type--annonce   { color: var(--aep-primary); }
.aep-suggest-type--evenement { color: var(--aep-accent-dark); }

.aep-autocomplete-loading,
.aep-autocomplete-empty {
    padding:    1rem;
    text-align: center;
    font-size:  .85rem;
    color:      var(--aep-text-muted);
}

/* ==========================================================================
   SECTION ÉVÉNEMENTS LIÉS (bas de fiche annonce)
   ========================================================================== */

.aep-related-events {
    margin-top:  3.5rem;
    padding-top: 2.5rem;
    border-top:  2px solid var(--aep-border);
}

.aep-section-title {
    font-size:     1.5rem;
    font-weight:   800;
    color:         var(--aep-text);
    margin-bottom: 1.5rem;
    padding-left:  .75rem;
    border-left:   4px solid var(--aep-primary);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.aep-pagination {
    margin: 2rem 0;
    text-align: center;
}

.aep-pagination__list {
    display:         inline-flex;
    list-style:      none;
    margin:          0;
    padding:         0;
    gap:             .4rem;
    flex-wrap:       wrap;
    justify-content: center;
}

.aep-page-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border-radius:   var(--aep-radius-sm);
    font-size:       .875rem;
    font-weight:     600;
    color:           var(--aep-text);
    background:      var(--aep-bg-card);
    border:          1px solid var(--aep-border);
    text-decoration: none;
    transition:      background var(--aep-transition), color var(--aep-transition);
}

.aep-page-btn:hover { background: var(--aep-primary-light); color: var(--aep-primary); border-color: var(--aep-primary); }
.aep-page-btn--active { background: var(--aep-primary); color: #fff; border-color: var(--aep-primary); }
.aep-page-btn--ellipsis { background: transparent; border-color: transparent; cursor: default; }

/* ==========================================================================
   ÉTAT VIDE
   ========================================================================== */

.aep-empty-state {
    padding:       3rem 2rem;
    text-align:    center;
    background:    var(--aep-bg);
    border-radius: var(--aep-radius);
    border:        1px dashed var(--aep-border);
    color:         var(--aep-text-muted);
    margin:        1.5rem 0;
}

.aep-empty-state p { margin: 0; font-size: .95rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .aep-cols-3,
    .aep-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .aep-cols-2,
    .aep-cols-3,
    .aep-cols-4 { grid-template-columns: 1fr; }

    .aep-search-inner { flex-direction: column; }
    .aep-sf           { min-width: 100%; }
    .aep-sf--keywords { min-width: 100%; }
    .aep-search-btn   { width: 100%; justify-content: center; }

    .aep-card__body   { padding: .9rem 1rem; }
    .aep-card__footer { padding: .75rem 1rem; }
}