/*
 * Outils SEO — articlum.com
 * Styles neutres, héritent autant que possible des variables du thème.
 * Préfixe .aos- pour éviter les collisions.
 */

.articlum-outils-seo {
    --aos-bg:           #ffffff;
    --aos-bg-soft:      #f7f7f9;
    --aos-border:       #e3e6ec;
    --aos-border-soft:  #eef0f4;
    --aos-text:         #1a1a1a;
    --aos-text-soft:    #5a6270;
    --aos-accent:       #2b6cb0;
    --aos-accent-soft:  #ebf3fb;
    --aos-shadow:       0 1px 2px rgba(20, 24, 35, 0.04), 0 2px 6px rgba(20, 24, 35, 0.04);
    --aos-shadow-hover: 0 4px 12px rgba(20, 24, 35, 0.08), 0 8px 24px rgba(20, 24, 35, 0.06);
    --aos-radius:       10px;
    --aos-radius-pill:  999px;
    --aos-gap:          1.25rem;

    color: var(--aos-text);
    padding-block: 2rem;
}

.aos-container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.25rem;
    margin-top: 200px;
}

/* ---------- Intro ---------- */

.aos-intro {
    margin-bottom: 2rem;
}

.aos-title {
    margin: 0 0 0.5rem;
    line-height: 1.15;
    /* Idem que .aos-card-title : forcer la couleur pour éviter les
       surcharges de thème qui pénaliseraient la lisibilité.
       Commente la ligne ci-dessous pour revenir au style du thème. */
    color: var(--aos-text);
}

.aos-lede {
    color: var(--aos-text-soft);
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.aos-lede p {
    margin: 0 0 0.5rem;
}

.aos-meta {
    color: var(--aos-text-soft);
    font-size: 0.95rem;
    margin: 0;
}

.aos-meta strong {
    color: var(--aos-text);
}

.aos-intro-text {
    margin: 0.75rem 0 0;
    color: var(--aos-text);
    font-size: 1rem;
    line-height: 1.6;
}

/* ---------- Filtres ---------- */

.aos-filters {
    background: var(--aos-bg-soft);
    border: 1px solid var(--aos-border);
    border-radius: var(--aos-radius);
    padding: 1.1rem 1.25rem 0.75rem;
    margin-bottom: 1.75rem;
}

.aos-filter-group {
    margin-bottom: 0.85rem;
}

.aos-filter-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--aos-text-soft);
    margin-bottom: 0.45rem;
}

.aos-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.aos-pill {
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--aos-border);
    background: var(--aos-bg);
    color: var(--aos-text);
    padding: 0.4rem 0.85rem;
    border-radius: var(--aos-radius-pill);
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

.aos-pill:hover {
    border-color: var(--aos-accent);
    color: var(--aos-accent);
}

.aos-pill:focus-visible {
    outline: 2px solid var(--aos-accent);
    outline-offset: 2px;
}

.aos-pill:active {
    transform: translateY(1px);
}

.aos-pill.is-active {
    background: var(--aos-accent);
    border-color: var(--aos-accent);
    color: #fff;
}

.aos-pill.is-active:hover {
    color: #fff;
    filter: brightness(1.05);
}

/* Récap + reset */
.aos-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px dashed var(--aos-border);
    padding-top: 0.7rem;
    margin-top: 0.25rem;
    font-size: 0.95rem;
    color: var(--aos-text-soft);
}

.aos-count strong {
    color: var(--aos-text);
}

.aos-reset {
    appearance: none;
    background: transparent;
    border: 1px solid var(--aos-border);
    border-radius: var(--aos-radius-pill);
    color: var(--aos-text-soft);
    padding: 0.35rem 0.85rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.aos-reset:hover {
    border-color: var(--aos-accent);
    color: var(--aos-accent);
}

/* État vide */
.aos-empty {
    background: var(--aos-bg-soft);
    border: 1px dashed var(--aos-border);
    border-radius: var(--aos-radius);
    padding: 1.5rem;
    text-align: center;
    color: var(--aos-text-soft);
}

.aos-link-btn {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--aos-accent);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Grille de cartes ---------- */

.aos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--aos-gap);
}

.aos-card {
    --aos-cat-color: var(--aos-accent);
    position: relative;
    background: var(--aos-bg);
    border: 1px solid var(--aos-border);
    border-radius: var(--aos-radius);
    padding: 1.25rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--aos-shadow);
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(.22, .61, .36, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}

/* Barre d'accent colorée en haut (couleur catégorie). */
.aos-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--aos-cat-color);
    opacity: 0.7;
    transition: opacity 0.22s ease, height 0.22s ease;
}

.aos-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--aos-shadow-hover);
    border-color: var(--aos-cat-color);
}

.aos-card:hover::before {
    opacity: 1;
    height: 4px;
}

/* Couleur de l'accent par catégorie (réutilise les couleurs des badges). */
.aos-card[data-cat="recherche-strategie"] { --aos-cat-color: #1e40af; }
.aos-card[data-cat="contenu-semantique"]  { --aos-cat-color: #166534; }
.aos-card[data-cat="technique"]           { --aos-cat-color: #9a3412; }
.aos-card[data-cat="netlinking"]          { --aos-cat-color: #86198f; }
.aos-card[data-cat="maillage-interne"]    { --aos-cat-color: #3730a3; }
.aos-card[data-cat="tracking-analyse"]    { --aos-cat-color: #155e75; }
.aos-card[data-cat="autre"]               { --aos-cat-color: #374151; }

.aos-card.is-hidden {
    display: none;
}

.aos-card-head {
    margin-bottom: 0.6rem;
}

.aos-card-title {
    font-size: 1.05rem;
    line-height: 1.25;
    margin: 0 0 0.25rem;
    /* --- Lisibilité du titre ---
       Forcer la couleur/poids car certains thèmes appliquent aux <h3>
       une couleur de marque qui devient illisible sur fond sombre.
       Commente ce bloc si tu préfères garder le style natif du thème. */
    color: var(--aos-text);
    font-weight: 700;
    /* --- fin --- */
}

.aos-card-emoji {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.05em;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.aos-card-brand {
    margin: 0;
    font-size: 0.85rem;
    color: var(--aos-text-soft);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.aos-card-brand span:first-of-type {
    font-weight: 500;
    color: var(--aos-text);
}

.aos-flag {
    font-size: 1.05rem;
    line-height: 1;
}

/* Badges */
.aos-badges {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.aos-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.32rem 0.55rem;
    border-radius: var(--aos-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Couleurs catégories */
.aos-badge--cat-recherche-strategie { background: #eef4ff; color: #1e40af; border-color: #c7d8ff; }
.aos-badge--cat-contenu-semantique  { background: #eefcf4; color: #166534; border-color: #bbe9cd; }
.aos-badge--cat-technique           { background: #fdf3e7; color: #9a3412; border-color: #f3d4ab; }
.aos-badge--cat-netlinking          { background: #faecf7; color: #86198f; border-color: #ecc4e0; }
.aos-badge--cat-maillage-interne    { background: #eef0fb; color: #3730a3; border-color: #cbd1ee; }
.aos-badge--cat-tracking-analyse    { background: #e8f6f7; color: #155e75; border-color: #b8e0e3; }
.aos-badge--cat-autre               { background: #f1f1f3; color: #374151; border-color: #d8dae0; }

/* Tarifs */
.aos-badge--tarif-gratuit  { background: #ecfdf5; color: #065f46; border-color: #b6e9d2; }
.aos-badge--tarif-freemium { background: #fff7ed; color: #9a3412; border-color: #fcd9b6; }
.aos-badge--tarif-payant   { background: #fef2f2; color: #991b1b; border-color: #f5c4c4; }

/* Langue */
.aos-badge--langue-oui     { background: #ecfdf5; color: #065f46; border-color: #b6e9d2; }
.aos-badge--langue-partiel { background: #fefce8; color: #854d0e; border-color: #f1e3a1; }
.aos-badge--langue-non     { background: #f1f1f3; color: #4b5563; border-color: #d8dae0; }

.aos-card-desc {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--aos-text-soft);
    flex-grow: 1;
}

.aos-card-cta {
    margin: 0;
}

.aos-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    background: var(--aos-accent);
    color: #fff;
    border-radius: var(--aos-radius-pill);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.05s ease;
}

.aos-card-link:hover,
.aos-card-link:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.08);
}

.aos-card-link:active {
    transform: translateY(1px);
}

/* ---------- Bloc éditorial sous la grille ---------- */

.aos-content {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--aos-border);
    /* Hérite des polices/couleurs du thème pour rester sobre. */
}

.aos-content-title {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 1.25rem;
    color: var(--aos-text);
}

.aos-content-body {
    color: var(--aos-text);
    font-size: 1rem;
    line-height: 1.65;
    /* Pas de max-width : le bloc prend toute la largeur du conteneur,
       comme la grille au-dessus. Si la lecture devient inconfortable sur
       écran large, ré-ajoute par ex. `max-width: 75ch;` ici. */
}

.aos-content-body h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 2.25rem 0 0.85rem;
    color: var(--aos-text);
    scroll-margin-top: 1rem;
}

.aos-content-body p {
    margin: 0 0 1rem;
}

.aos-content-body p.aos-content-lede {
    font-size: 1.08rem;
    color: var(--aos-text);
}

.aos-content-body strong {
    color: var(--aos-text);
    font-weight: 600;
}

.aos-content-body a {
    color: var(--aos-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aos-content-body a:hover,
.aos-content-body a:focus {
    filter: brightness(1.1);
    text-decoration-thickness: 2px;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    .articlum-outils-seo {
        padding-block: 1.25rem;
    }
    .aos-filters {
        padding: 1rem 0.95rem 0.6rem;
    }
    .aos-filter-summary {
        flex-direction: column;
        align-items: flex-start;
    }
    .aos-grid {
        grid-template-columns: 1fr;
    }
    .aos-content {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
    .aos-content-title {
        font-size: 1.4rem;
    }
}

/* ---------- Mode sombre ----------
   Bloc retiré volontairement : la détection via prefers-color-scheme se base
   sur l'OS de l'utilisateur, pas sur le thème WP. Quand l'OS est en sombre
   mais que le thème reste clair (fond blanc), le composant appliquait des
   couleurs de texte claires sur fond blanc, rendant tout illisible.
   La couleur est désormais pilotée par le thème WordPress.

   Si le thème articlum.com passe officiellement en sombre un jour, on peut
   réintroduire un override scopé à .aos-card uniquement (pour préserver les
   cartes en sombre sans toucher au texte hors cartes). */