/*
 * Pages catégorie — /categorie/<slug>, les 12 catégories.
 *
 * Vocabulaire visuel aligné sur editorial_indexes.css (le traitement partagé de
 * /blog et /lexique, les vraies pages sœurs d'un index de catégorie) et palette
 * argile reprise de consultant-seo-paris.css. Aucune dépendance à ces deux
 * fichiers : on en recopie le langage, on possède celui-ci.
 *
 * INVARIANT DE PORTÉE — tout sélecteur de premier niveau contient
 * `category-theme`. Le menu et le footer sont partagés avec tout le site : une
 * règle qui fuit hors de la page les casse partout. Vérification :
 *   python -c "import re;[print(l.rstrip()) for l in open('app/static/css/categorie.css',encoding='utf-8') if re.match(r'^[^@/ }\s]',l) and 'category-theme' not in l]"
 * ne doit rien afficher.
 *
 * Variante GEO : composé SANS espace `.category-page.category-page--geo`.
 */

/* --------------------------------------------------------------------------
   Tokens — dérivés de site-home-theme, avec repli si la classe saute
   -------------------------------------------------------------------------- */

html.site-home-theme.category-theme {
    --cat-bg: var(--site-home-bg, oklch(0.99 0.003 80));
    --cat-surface: var(--site-home-surface, oklch(0.998 0.002 80));
    --cat-ground: oklch(0.97 0.006 80);
    --cat-heading: var(--site-home-heading, oklch(0.20 0.018 250));
    --cat-text: var(--site-home-text, oklch(0.34 0.014 250));
    --cat-muted: var(--site-home-muted, oklch(0.48 0.012 250));
    --cat-soft: var(--site-home-soft, oklch(0.62 0.010 250));
    --cat-border: var(--site-home-border, oklch(0.86 0.010 80));
    --cat-rule: oklch(0.92 0.008 80);
    --cat-accent: var(--site-home-accent, oklch(0.43 0.16 25));
    --cat-accent-dark: var(--site-home-accent-dark, oklch(0.34 0.14 25));
    --cat-accent-soft: var(--site-home-accent-soft, oklch(0.43 0.16 25 / 0.08));
    --cat-clay: #c86b3c;
    --cat-clay-dark: #8f482c;
    --cat-radius: 8px;
    --cat-radius-sm: 6px;
}

html.category-theme #main-content.main-full {
    background: var(--cat-bg);
    overflow: clip;
}

/* --------------------------------------------------------------------------
   Conteneur
   -------------------------------------------------------------------------- */

/* 1180px = largeur exacte de /blog et /lexique : les trois index cassent au
   même endroit et partagent la même colonne de lecture. */
html.category-theme .category-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px 96px;
    color: var(--cat-text);
    font-family: var(--font-sans-stack);
    font-size: 17px;
    line-height: 1.65;
}

html.category-theme .category-page,
html.category-theme .category-page *,
html.category-theme .category-page *::before,
html.category-theme .category-page *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Neutralisation des globales de style.css
   Chargé sur toute page, il impose h1 orange centré, h2 gris-bleu, liens
   Bootstrap et listes indentées. Sans ces reprises, la page part de travers.
   -------------------------------------------------------------------------- */

html.category-theme .category-page h1,
html.category-theme .category-page h2,
html.category-theme .category-page h3 {
    margin: 0;
    color: var(--cat-heading);
    font-family: var(--font-sans-stack);
    text-align: left;
    text-wrap: balance;
}

html.category-theme .category-page ul,
html.category-theme .category-page ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

html.category-theme .category-page li {
    padding: 0;
}

html.category-theme .category-page p {
    margin: 0;
}

html.category-theme .category-page a {
    color: var(--cat-accent);
    text-decoration: none;
}

html.category-theme .category-page a:hover {
    color: var(--cat-accent-dark);
}

html.category-theme .category-page :is(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--cat-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */

html.category-theme .category-page .breadcrumb-container {
    padding: 28px 0 0;
}

html.category-theme .category-page .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.7rem;
    color: var(--cat-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Maillon inerte (« Accueil ») : plus clair que les liens, pour qu'on ne le
   prenne pas pour un lien mort. */
html.category-theme .category-page .breadcrumb-item {
    color: var(--cat-soft);
}

html.category-theme .category-page .breadcrumb-link {
    color: var(--cat-muted);
}

html.category-theme .category-page .breadcrumb-link:hover {
    color: var(--cat-heading);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

html.category-theme .category-page .breadcrumb-current {
    color: var(--cat-heading);
    font-weight: 500;
}

html.category-theme .category-page .breadcrumb-list li + li::before {
    content: "";
    display: inline-block;
    width: 0.36rem;
    height: 0.36rem;
    margin-right: 0.55rem;
    border-top: 1.5px solid var(--cat-border);
    border-right: 1.5px solid var(--cat-border);
    transform: rotate(45deg);
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   En-tête de catégorie
   -------------------------------------------------------------------------- */

html.category-theme .category-page .category-header {
    margin: 0 0 34px;
    padding: 34px 0 32px;
    border-bottom: 1px solid var(--cat-border);
}

html.category-theme .category-page .category-eyebrow {
    margin: 0 0 12px;
    color: var(--cat-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.3;
    text-transform: uppercase;
}

html.category-theme .category-page .category-title {
    max-width: 22ch;
    margin: 0 0 16px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

html.category-theme .category-page .category-description {
    max-width: 72ch;
    color: var(--cat-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* Compteurs : filets verticaux plutôt que pastilles grises — celles-ci
   faisaient doublon visuel avec les filtres situés juste en dessous. */
html.category-theme .category-page .category-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 0;
    margin-top: 26px;
}

html.category-theme .category-page .stat-item {
    padding: 0 22px;
    border-left: 1px solid var(--cat-border);
}

html.category-theme .category-page .stat-item:first-child {
    padding-left: 0;
    border-left: 0;
}

html.category-theme .category-page .stat-number {
    display: block;
    color: var(--cat-heading);
    font-size: 1.55rem;
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 650;
    line-height: 1.1;
}

html.category-theme .category-page .stat-label {
    color: var(--cat-soft);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Filtres de type de contenu
   -------------------------------------------------------------------------- */

html.category-theme .category-page .content-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 34px;
}

html.category-theme .category-page .filter-button {
    min-height: 44px;
    padding: 8px 16px;
    color: var(--cat-muted);
    background: var(--cat-ground);
    border: 1px solid var(--cat-border);
    border-radius: var(--cat-radius-sm);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

html.category-theme .category-page .filter-button:hover {
    color: var(--cat-heading);
    border-color: var(--cat-soft);
}

html.category-theme .category-page .filter-button.active {
    color: var(--cat-surface);
    background: var(--cat-accent);
    border-color: var(--cat-accent);
}

/* --------------------------------------------------------------------------
   Grille de contenus
   -------------------------------------------------------------------------- */

html.category-theme .category-page .content-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

html.category-theme .category-page .content-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--cat-surface);
    border: 1px solid var(--cat-border);
    border-radius: var(--cat-radius);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Pas de translation au survol : DESIGN.md proscrit tout déplacement de mise
   en page, et editorial_indexes.css pose déjà `transform: none`. */
html.category-theme .category-page .content-card:hover {
    border-color: color-mix(in oklch, var(--cat-accent) 48%, var(--cat-border));
    box-shadow: 0 3px 14px oklch(0.20 0.018 250 / 0.06);
}

html.category-theme .category-page .content-card[hidden] {
    display: none;
}

/* aspect-ratio plutôt qu'une hauteur fixe : supprime le CLS et respecte le
   cadrage des hero images. */
html.category-theme .category-page .card-image-container {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

html.category-theme .category-page .card-image {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--cat-ground);
    border-bottom: 1px solid var(--cat-rule);
    object-fit: cover;
}

html.category-theme .category-page .card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

html.category-theme .category-page .card-title {
    margin: 0 0 8px;
    font-size: 1.06rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

html.category-theme .category-page .card-title a {
    color: var(--cat-heading);
}

html.category-theme .category-page .card-title a:hover {
    color: var(--cat-accent);
}

html.category-theme .category-page .card-meta {
    margin: 0 0 12px;
    color: var(--cat-soft);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

html.category-theme .category-page .card-preview {
    flex: 1;
    margin: 0 0 18px;
    color: var(--cat-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Badges de type — une pastille de couleur, pas un fond teinté. Le trio
   Material bleu/vert/orange sortait de la palette du site. */
html.category-theme .category-page .card-type {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    padding: 4px 9px;
    color: var(--cat-muted);
    background: var(--cat-ground);
    border: 1px solid var(--cat-border);
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html.category-theme .category-page .card-type::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cat-dot, var(--cat-soft));
}

html.category-theme .category-page .type-article {
    --cat-dot: var(--cat-heading);
}

html.category-theme .category-page .type-lexique {
    --cat-dot: var(--cat-clay);
}

html.category-theme .category-page .type-podcast {
    --cat-dot: var(--cat-accent);
}

/* Nom imposé par tests/test_category_link_obfuscation.py — ne pas renommer. */
html.category-theme .category-page .read-more {
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    padding: 11px 18px;
    color: var(--cat-surface);
    background: var(--cat-accent);
    border: 1px solid var(--cat-accent);
    border-radius: var(--cat-radius-sm);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    appearance: none;
    transition: background-color 160ms ease, border-color 160ms ease;
}

html.category-theme .category-page .read-more:hover {
    color: var(--cat-surface);
    background: var(--cat-accent-dark);
    border-color: var(--cat-accent-dark);
}

/* Vignette podcast */
html.category-theme .category-page .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--cat-heading) 74%, transparent);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

html.category-theme .category-page .play-overlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--cat-surface);
    transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

html.category-theme .category-page .pagination-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 48px 0 0;
}

html.category-theme .category-page .pagination-nav a,
html.category-theme .category-page .pagination-nav span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--cat-border);
    border-radius: var(--cat-radius-sm);
    font-size: 0.86rem;
    font-weight: 600;
}

html.category-theme .category-page .pagination-nav a {
    color: var(--cat-muted);
    background: var(--cat-surface);
    transition: color 160ms ease, border-color 160ms ease;
}

html.category-theme .category-page .pagination-nav a:hover {
    color: var(--cat-heading);
    border-color: var(--cat-soft);
}

html.category-theme .category-page .pagination-nav .current {
    color: var(--cat-surface);
    background: var(--cat-accent);
    border-color: var(--cat-accent);
}

html.category-theme .category-page .pagination-nav .disabled {
    color: var(--cat-soft);
    background: var(--cat-ground);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   État vide
   -------------------------------------------------------------------------- */

html.category-theme .category-page .no-content {
    padding: 44px 24px;
    color: var(--cat-muted);
    background: var(--cat-ground);
    border: 1px dashed var(--cat-border);
    border-radius: var(--cat-radius);
    text-align: center;
}

html.category-theme .category-page .no-content h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Sections propres à la catégorie GEO
   -------------------------------------------------------------------------- */

html.category-theme .category-page.category-page--geo .geo-resources {
    margin-top: 72px;
    padding-top: 26px;
    border-top: 1px solid var(--cat-border);
}

html.category-theme .category-page.category-page--geo .section-title {
    margin: 0 0 22px;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Barre argile : signature des titres de section du site. */
html.category-theme .category-page.category-page--geo .section-title::before {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin: 0 0 18px;
    background: var(--cat-clay);
}

html.category-theme .category-page.category-page--geo .geo-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

html.category-theme .category-page.category-page--geo .geo-resource-card {
    display: block;
    padding: 20px 16px 18px 0;
    border-top: 2px solid var(--cat-clay);
    background: transparent;
}

html.category-theme .category-page.category-page--geo .geo-resource-title {
    margin: 0 0 8px;
    color: var(--cat-heading);
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.3;
    transition: color 160ms ease;
}

html.category-theme .category-page.category-page--geo .geo-resource-title::after {
    content: "\2192";
    display: inline-block;
    margin-left: 8px;
    color: var(--cat-clay-dark);
    transition: transform 180ms ease;
}

html.category-theme .category-page.category-page--geo .geo-resource-card:hover .geo-resource-title {
    color: var(--cat-accent);
}

html.category-theme .category-page.category-page--geo .geo-resource-card:hover .geo-resource-title::after {
    transform: translateX(4px);
}

html.category-theme .category-page.category-page--geo .geo-resource-description {
    color: var(--cat-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* FAQ — accordéon */
html.category-theme .category-page.category-page--geo .faq-section {
    max-width: 900px;
    margin-top: 64px;
    padding-top: 26px;
    border-top: 1px solid var(--cat-border);
}

html.category-theme .category-page.category-page--geo .faq-item {
    border-bottom: 1px solid var(--cat-border);
}

html.category-theme .category-page.category-page--geo .faq-heading {
    margin: 0;
    font-size: inherit;
}

html.category-theme .category-page.category-page--geo .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-height: 56px;
    padding: 16px 0;
    color: var(--cat-heading);
    background: none;
    border: 0;
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: color 160ms ease;
}

html.category-theme .category-page.category-page--geo .faq-question:hover {
    color: var(--cat-accent);
}

/* Chevron en bordures : plus de caractère à encoder, et invisible des
   lecteurs d'écran. */
html.category-theme .category-page.category-page--geo .faq-toggle {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--cat-accent);
    border-bottom: 2px solid var(--cat-accent);
    transform: rotate(45deg) translate(-15%, -15%);
    transition: transform 180ms ease;
}

html.category-theme .category-page.category-page--geo .faq-question[aria-expanded="true"] .faq-toggle {
    transform: rotate(-135deg) translate(-15%, -15%);
}

/* Pas de max-height : les réponses font jusqu'à 560 caractères et étaient
   tronquées sur mobile par l'ancien `max-height: 300px`. */
html.category-theme .category-page.category-page--geo .faq-answer {
    padding: 0 36px 20px 0;
    color: var(--cat-muted);
    line-height: 1.65;
}

html.category-theme .category-page.category-page--geo .faq-answer[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   Responsive — mêmes points de rupture que /blog et /lexique
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
    html.category-theme .category-page .content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    html.category-theme .category-page {
        padding: 0 18px 72px;
        font-size: 16px;
    }

    html.category-theme .category-page .content-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    html.category-theme .category-page .category-header {
        padding: 24px 0 26px;
    }

    html.category-theme .category-page .category-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 0;
    }

    html.category-theme .category-page .stat-item:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    html.category-theme .category-page .filter-button {
        flex: 1 1 calc(50% - 4px);
    }

    html.category-theme .category-page.category-page--geo .geo-resources,
    html.category-theme .category-page.category-page--geo .faq-section {
        margin-top: 52px;
    }
}

@media (max-width: 420px) {
    html.category-theme .category-page .category-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    html.category-theme .category-page .stat-item {
        padding-left: 0;
        border-left: 0;
    }

    html.category-theme .category-page .filter-button {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.category-theme .category-page *,
    html.category-theme .category-page *::before,
    html.category-theme .category-page *::after {
        transition-duration: 0.01ms !important;
    }
}