/* =========================================================
   A Extermination — Encyclopédie des nuisibles
   Design system v2.0.0 · https://a-extermination.com/
   Calqué sur encyclopedie v1.html (design Claude)
   ========================================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ── Tokens ── */
.aee-wrap {
    /* Couleurs */
    --aee-ink:          #1f1f1f;
    --aee-ink-2:        #4a4a4a;
    --aee-ink-3:        #8a8a8a;
    --aee-ink-4:        #c8c8c8;
    --aee-paper:        #fbfaf6;
    --aee-paper-2:      #f2efe6;
    --aee-paper-3:      #e6e1d2;
    --aee-accent:       #de1d2d;
    --aee-accent-dk:    #a91320;
    --aee-accent-tint:  #fde2e4;
    --aee-gold:         #dcc023;
    --aee-gold-dk:      #b59c14;
    --aee-gold-tint:    #faf3c8;
    --aee-forest:       #2d5a3d;

    /* Rayons */
    --aee-r-sm:   6px;
    --aee-r-md:   10px;
    --aee-r-lg:   18px;
    --aee-r-xl:   28px;
    --aee-r-pill: 999px;

    /* Typo */
    --aee-font-display: "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;
    --aee-font-body:    "Geist", "Inter Tight", system-ui, sans-serif;
    --aee-font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

    /* Layout */
    --aee-gap:  18px;
    --aee-cols: 4;

    font-family: var(--aee-font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--aee-ink);
    -webkit-font-smoothing: antialiased;
}

/* ── Barre de recherche ── */
.aee-search-wrap {
    position: relative;
    margin-bottom: 20px;
}

.aee-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--aee-ink-3);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.aee-search-icon svg { width: 18px; height: 18px; }

.aee-search {
    width: 100%;
    padding: 12px 52px 12px 42px;
    font-family: var(--aee-font-body);
    font-size: 15px;
    color: var(--aee-ink);
    background: var(--aee-paper);
    border: 1.5px solid var(--aee-ink-4);
    border-radius: var(--aee-r-pill);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}

.aee-search::placeholder { color: var(--aee-ink-3); }

.aee-search:focus {
    border-color: var(--aee-ink);
    box-shadow: 0 0 0 4px rgba(26, 23, 21, .08);
}

.aee-search-kbd {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--aee-font-mono);
    font-size: 11px;
    color: var(--aee-ink-2);
    background: var(--aee-paper-2);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--aee-paper-3);
    pointer-events: none;
}

/* ── Groupes de filtres ── */
.aee-filter-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.aee-filter-group--tags { margin-bottom: 28px; }

.aee-filter-label {
    flex-shrink: 0;
    font-family: var(--aee-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--aee-ink-3);
    padding-top: 8px;
    min-width: 4.5rem;
}

/* ── Chips de filtre ── */
.aee-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.aee-filters::-webkit-scrollbar { display: none; }

.aee-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--aee-paper-2);
    border: 1px solid transparent;
    border-radius: var(--aee-r-pill);
    font-family: var(--aee-font-body);
    font-size: 13px;
    color: var(--aee-ink-2);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1.4;
}

.aee-filter-btn:hover {
    border-color: var(--aee-ink-4);
    color: var(--aee-ink);
}

.aee-filter-btn.is-active {
    background: var(--aee-ink);
    color: var(--aee-paper);
    border-color: var(--aee-ink);
    box-shadow: inset 0 -3px 0 var(--aee-gold);
}

/* Chips tags — style secondaire */
.aee-filter-btn--tag {
    font-size: 12px;
    padding: 5px 12px;
    color: var(--aee-accent-dk);
    background: rgba(222, 29, 45, .06);
    border-color: rgba(222, 29, 45, .2);
}

.aee-filter-btn--tag:hover {
    background: rgba(222, 29, 45, .1);
    border-color: var(--aee-accent);
    color: var(--aee-accent-dk);
}

.aee-filter-btn--tag.is-active {
    background: var(--aee-accent);
    color: #fff;
    border-color: var(--aee-accent);
    box-shadow: inset 0 -3px 0 rgba(169, 19, 32, .4);
}

.aee-filter-btn .aee-chip-count {
    font-family: var(--aee-font-mono);
    font-size: 11px;
    opacity: .7;
}

/* ── Grille ── */
.aee-grid {
    display: grid;
    grid-template-columns: repeat(var(--aee-cols), 1fr);
    gap: var(--aee-gap);
    padding: 4px 0 28px;
}

.aee-grid .aee-card { width: 100%; } /* Isotope override */

/* ── Carte ── */
.aee-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--aee-paper);
    border: 1px solid var(--aee-paper-3);
    border-radius: var(--aee-r-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .15s;
}

.aee-card__inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -16px rgba(26, 23, 21, .25);
    border-color: var(--aee-ink-4);
}

/* Zone image */
.aee-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(155deg, var(--aee-paper-2), var(--aee-paper-3));
}

.aee-card__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.aee-card__inner:hover .aee-card__thumb img {
    transform: scale(1.04);
}

/* Placeholder sans image — style doodle encyclopédique */
.aee-card__thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 -6% -8% 0;
    color: var(--aee-ink);
    opacity: .8;
}

.aee-card__thumb-placeholder svg {
    width: 75%;
    transform: rotate(-6deg) translate(6%, 8%);
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
    display: block;
}

.aee-card__inner:hover .aee-card__thumb-placeholder svg {
    transform: rotate(-2deg) translate(4%, 6%) scale(1.04);
}

/* Badge numéro */
.aee-card__num {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 2;
    font-family: var(--aee-font-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, .9);
    background: rgba(26, 23, 21, .6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.4;
}

/* Badges urgence (top-right) */
.aee-card__badges {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

/* Pills urgence */
.aee-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--aee-r-pill);
    font-family: var(--aee-font-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

.aee-pill .aee-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.aee-pill--urgent {
    background: var(--aee-accent-tint);
    color: var(--aee-accent-dk);
}

.aee-pill--warn {
    background: var(--aee-gold-tint);
    color: #6a5a07;
}

.aee-pill--calm {
    background: #e0ecdb;
    color: #2f5d3e;
}

/* Corps */
.aee-card__body {
    flex: 1;
    padding: 16px 18px 10px;
}

.aee-card__cat {
    display: inline-block;
    font-family: var(--aee-font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aee-ink-3);
    margin-bottom: 4px;
}

.aee-card__title {
    margin: 0 0 3px;
    font-family: var(--aee-font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: var(--aee-ink);
}

.aee-card__sci {
    font-family: var(--aee-font-mono);
    font-size: 11px;
    color: var(--aee-ink-3);
    font-style: italic;
    letter-spacing: .02em;
    margin-bottom: 2px;
}

.aee-card__excerpt {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--aee-ink-2);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Méta : urgence dots + saison */
.aee-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--aee-paper-3);
    font-size: 12px;
    color: var(--aee-ink-2);
}

.aee-card__meta-sep { color: var(--aee-ink-4); }

/* Indicateur d'urgence (3 points) */
.aee-urg {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.aee-urg i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aee-ink-4);
    font-style: normal;
}

.aee-urg.l1 i:nth-child(1)       { background: var(--aee-forest); }
.aee-urg.l2 i:nth-child(-n+2)    { background: var(--aee-gold-dk); }
.aee-urg.l3 i                    { background: var(--aee-accent); }

/* Tags sur les cartes */
.aee-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.aee-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-family: var(--aee-font-mono);
    font-size: 10px;
    color: var(--aee-forest);
    background: rgba(45, 90, 61, .07);
    border: 1px solid rgba(45, 90, 61, .18);
    border-radius: var(--aee-r-pill);
    letter-spacing: .03em;
}

/* CTA */
.aee-card__cta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--aee-ink);
    transition: gap .15s;
}

.aee-card__inner:hover .aee-card__cta { gap: 10px; }

/* ── Bannière d'aide ── */
.aee-help-banner {
    margin: 24px 0 8px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    border: 1px solid var(--aee-ink);
    border-radius: var(--aee-r-xl);
    overflow: hidden;
    background: var(--aee-ink);
    color: var(--aee-paper);
}

.aee-help-banner > div { padding: 28px 32px; }

.aee-help-banner > div + div {
    border-left: 1px solid rgba(250, 246, 238, .15);
}

.aee-help-banner__title {
    font-family: var(--aee-font-display);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--aee-paper);
    margin-top: 8px;
    line-height: 1.1;
}

.aee-help-banner__lead {
    color: rgba(250, 246, 238, .7);
    font-size: 15px;
    margin-top: 10px;
    max-width: 340px;
    line-height: 1.5;
}

.aee-help-banner__serial {
    font-family: var(--aee-font-mono);
    font-size: 11px;
    color: rgba(250, 246, 238, .35);
    letter-spacing: .06em;
}

.aee-help-banner__opt-h {
    font-family: var(--aee-font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-top: 4px;
}

.aee-help-banner__opt-l {
    color: rgba(250, 246, 238, .65);
    font-size: 14px;
    margin-top: 4px;
    line-height: 1.45;
}

.aee-help-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--aee-paper);
    text-decoration: none;
    transition: gap .15s;
}

.aee-help-banner__cta:hover { gap: 12px; color: var(--aee-paper); }

.aee-help-banner__cta svg { stroke: var(--aee-accent); }

/* ── États vides ── */
.aee-empty,
.aee-no-results {
    text-align: center;
    color: var(--aee-ink-3);
    padding: 48px 0;
    font-size: 15px;
    font-family: var(--aee-font-body);
}

.aee-no-results strong {
    display: block;
    font-family: var(--aee-font-display);
    font-size: 22px;
    letter-spacing: -.02em;
    color: var(--aee-ink-2);
    margin-bottom: 6px;
}

/* ── Filtrage (sans Isotope) ── */
.aee-card {
    transition: opacity .2s ease, transform .2s ease;
}

.aee-card.aee-hidden {
    display: none;
}

/* ── Barre de stats ── */
.aee-stats {
    display: flex;
    gap: 0;
    border: 1px solid var(--aee-paper-3);
    border-radius: var(--aee-r-lg);
    overflow: hidden;
    margin-bottom: 28px;
    background: var(--aee-paper);
}

.aee-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    gap: 4px;
    border-right: 1px solid var(--aee-paper-3);
}

.aee-stat:last-child { border-right: none; }

.aee-stat__num {
    font-family: var(--aee-font-display);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--aee-ink);
    line-height: 1;
}

.aee-stat__num small {
    font-size: 0.45em;
    font-weight: 500;
    letter-spacing: 0;
    vertical-align: super;
    color: var(--aee-ink-2);
}

.aee-stat__lbl {
    font-family: var(--aee-font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--aee-ink-3);
}

/* ── Barre de tri ── */
.aee-sort-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 14px;
}

.aee-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--aee-font-mono);
    font-size: 12px;
    color: var(--aee-ink-3);
    letter-spacing: .03em;
    user-select: none;
}

.aee-sort {
    font-family: var(--aee-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--aee-ink);
    background: var(--aee-paper);
    border: 1.5px solid var(--aee-paper-3);
    border-radius: var(--aee-r-pill);
    padding: 6px 12px 6px 10px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
    appearance: none;
    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='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.aee-sort:hover,
.aee-sort:focus { border-color: var(--aee-ink); }

/* ── Responsive ── */
@media (max-width: 1200px) {
    .aee-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
    .aee-grid { grid-template-columns: repeat(2, 1fr); }
    .aee-help-banner { grid-template-columns: 1fr; }
    .aee-help-banner > div + div { border-left: 0; border-top: 1px solid rgba(250,246,238,.15); }
}

@media (max-width: 520px) {
    .aee-grid { grid-template-columns: 1fr; }
    .aee-filter-group { flex-direction: column; gap: 6px; }
    .aee-filter-label { padding-top: 0; min-width: unset; }
    .aee-search-kbd { display: none; }
    .aee-stats { flex-wrap: wrap; }
    .aee-stat { flex: 1 1 50%; border-bottom: 1px solid var(--aee-paper-3); }
    .aee-stat:nth-child(even) { border-right: none; }
    .aee-stat:nth-last-child(-n+2) { border-bottom: none; }
}