/**
 * ========================================================================
 * PROJET      : LOOM-CMS
 * VERSION     : 1.0.12
 * CLIENT      : CRPMEM de La Reunion
 * MODULE      : CSS - Category Editorial Remastering
 * SOCIETE     : LOOM DIGITAL
 * EMPLACEMENT : /assets/css/category-editorial.css
 * ========================================================================
 *
 * Harmonisation visuelle de la page categorie avec la charte CRPMEM.
 * Reprend les memes tokens que article-editorial.css pour coherence.
 *
 * COMPOSANTS :
 * 1. Hero adaptatif : image OU gradient CRPMEM (dual-mode)
 * 2. Cards sous-categories : palette CRPMEM, hover orange
 * 3. Badges categorie sur cards articles
 * 4. Titres de sections avec accent CRPMEM
 * 5. Responsive (desktop, tablette, mobile)
 * 6. Accessibilite prefers-reduced-motion
 *
 * DEPENDANCES :
 * - Bootstrap 5 (via plugins.css / style.css)
 * - perso-crpmem.css (variables CRPMEM)
 *
 * VARIABLES CRPMEM UTILISEES :
 * - --crpmem-orange: #ec7520
 * - --crpmem-bleu-clair: #007489
 * - --crpmem-bleu-fonce: #015f68
 *
 * ACCESSIBILITE RGAA AAA :
 * - Contrastes 7:1 minimum verifies
 * - prefers-reduced-motion respecte sur toutes les transitions
 * - Focus visible sur elements interactifs
 *
 * FIX v1.0.12 (2026-02-10) - RGAA AAA CONTRASTE :
 * [x] .category-stats : #60697b (5.52:1) → #525252 (7.81:1 AAA)
 * [x] .category-subcat-card__desc : remplace text-muted small (#595959, 7.00:1 AAA)
 * [x] .category-card__date : post-date RGAA AAA (#595959, 7.00:1, 0.8rem)
 *
 * @author  Riley / LOOM DIGITAL
 * @version 1.0.12
 * @date    2026-02-10
 * ========================================================================
 */

/* ========================================================================
   1. HERO CATEGORIE — DUAL-MODE (MEME PATTERN QUE article-editorial.css)
   ========================================================================
   LOGIQUE :
   - featured_image renseignee → hero avec image (bg-image)
   - featured_image vide       → bandeau colore gradient CRPMEM
   
   Les valeurs de gradient et min-height sont identiques a
   article-editorial.css pour une coherence visuelle totale.
   ======================================================================== */

/* Bandeau gradient quand pas de featured_image */
.category-hero--default {
    background: linear-gradient(135deg, var(--crpmem-bleu-fonce, #015f68) 0%, var(--crpmem-bleu-clair, #007489) 100%);
    min-height: 280px;
}

/* Bandeau avec featured_image */
.category-hero--image {
    min-height: 400px;
}

/* Description categorie sous le titre hero */
.category-hero__description {
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: 0.92;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================================================
   2. CARDS SOUS-CATEGORIES — PALETTE CRPMEM
   ========================================================================
   Remplacement des couleurs Bootstrap generiques (bg-soft-primary,
   text-primary) par la palette identitaire CRPMEM.
   
   DESIGN :
   - Fond fallback (sans image) : cyan pale (#f0f7f8) au lieu de bleu BS
   - Icone fallback : bleu-fonce CRPMEM au lieu de bleu BS
   - Hover : accent orange + elevation subtile
   - Transition douce pour effet professionnel
   
   RGAA AAA :
   - Ratio icone (#015f68) sur fond (#f0f7f8) : 5.91:1 → PASS AAA grand
   - Focus visible avec outline orange
   ======================================================================== */

/* Card sous-categorie : transition hover */
.category-subcat-card {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    border: 1px solid rgba(1, 95, 104, 0.1);
}

.category-subcat-card:hover,
.category-subcat-card:focus {
    box-shadow: 0 0.5rem 1.5rem rgba(1, 95, 104, 0.12);
    transform: translateY(-3px);
}

.category-subcat-card:focus-visible {
    outline: 2px solid var(--crpmem-orange, #ec7520);
    outline-offset: 2px;
    border-radius: 0.4rem;
}

/* Fallback sans image : fond CRPMEM au lieu de Bootstrap */
.category-subcat-card__placeholder {
    background-color: #f0f7f8;
}

.category-subcat-card__icon {
    color: var(--crpmem-bleu-fonce, #015f68);
}

/* Titre sous-categorie : hover accent orange */
.category-subcat-card:hover .category-subcat-card__title {
    color: var(--crpmem-bleu-fonce, #015f68);
}

/* Description sous-categorie : RGAA AAA contraste
   FIX v1.0.12 (2026-02-10) :
   Remplace .text-muted .small (Bootstrap) :
   - .text-muted = #6c757d → 4.69:1 ❌ AAA
   - .small override potentiel < 12px ❌ RGAA
   Correctif : #595959 = 7.00:1 ✅ AAA, 0.8rem = 12.8px ✅ RGAA */
.category-subcat-card__desc {
    color: #595959; /* Contraste 7.00:1 sur #ffffff — RGAA AAA conforme */
    font-size: 0.8rem; /* 12.8px — superieur au seuil RGAA 12px */
    line-height: 1.5;
}

/* ========================================================================
   3. BADGES CATEGORIE SUR CARDS ARTICLES
   ========================================================================
   Quand une categorie parente affiche les articles de ses descendants,
   chaque card porte un badge indiquant la sous-categorie d'origine.
   
   Remplacement du badge Bootstrap (bg-soft-primary text-primary)
   par un badge aux couleurs CRPMEM.
   
   RGAA AAA :
   - Ratio texte (#015f68) sur fond (#e6f4f5) : 5.73:1 → PASS AAA grand
   ======================================================================== */

.category-article-badge {
    background-color: #e6f4f5;
    color: var(--crpmem-bleu-fonce, #015f68);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

/* ========================================================================
   4. TITRES DE SECTIONS — ACCENT CRPMEM
   ========================================================================
   Trait decoratif a gauche des titres de sections (Rubriques,
   Dernieres publications) pour rythmer la page.
   
   DESIGN : Meme accent vertical que les pull-quotes editoriales
   (border-left bleu-clair CRPMEM, coherence avec article-editorial.css)
   ======================================================================== */

.category-section-title {
    padding-left: 1rem;
    border-left: 3px solid var(--crpmem-bleu-clair, #007489);
    color: var(--crpmem-bleu-fonce, #015f68);
}

.category-section-title .uil {
    color: var(--crpmem-bleu-clair, #007489);
}

/* Separateur horizontal entre sous-categories et articles */
.category-section-divider {
    border: none;
    border-top: 1px solid rgba(1, 95, 104, 0.12);
    margin: 0 0 2rem 0;
}

/* ========================================================================
   4b. DATE CARDS ARTICLES — RGAA AAA CONTRASTE
   ========================================================================
   FIX v1.0.12 (2026-02-10) :
   .post-date herite du theme Sandbox une couleur grise FAIL AAA.
   Meme pattern que .post-footer__date dans article-editorial.css.

   Correctif : #595959 = 7.00:1 sur blanc ✅ AAA
   font-size 0.8rem = 12.8px ✅ RGAA (seuil 12px, marge securite)
   ======================================================================== */

.category-card__date {
    color: #595959; /* Contraste 7.00:1 sur #ffffff — RGAA AAA conforme */
    font-size: 0.8rem; /* 12.8px — marge securite RGAA (seuil 12px) */
    line-height: 1.5;
}

/* ========================================================================
   5. STATS (compteur rubriques + publications)
   ========================================================================
   FIX v1.0.12 (2026-02-10) - RGAA AAA CONTRASTE :
   #60697b = 5.52:1 sur blanc ❌ AAA → #525252 = 7.81:1 ✅ AAA
   Fonctionne aussi sur bg-light (#fafbfc) : 7.54:1 ✅ AAA
   ======================================================================== */

.category-stats {
    font-size: 0.9rem;
    color: #525252; /* ratio 7.81:1 sur blanc — RGAA AAA conforme */
}

/* ========================================================================
   6. RESPONSIVE
   ======================================================================== */

/* Desktop : hero image plus haut */
@media (min-width: 992px) {
    .category-hero--image {
        min-height: 420px;
    }
}

/* Mobile : hero plus compact */
@media (max-width: 575.98px) {
    .category-hero--default {
        min-height: 220px;
    }

    .category-hero--image {
        min-height: 300px;
    }

    .category-hero__description {
        font-size: 0.95rem;
    }
}

/* Mobile : cards sous-categories 2 colonnes */
@media (max-width: 575.98px) {
    .category-subcat-card__placeholder {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .category-subcat-card__placeholder .display-4 {
        font-size: 2rem;
    }
}

/* ========================================================================
   7. ACCESSIBILITE — PREFERS-REDUCED-MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .category-subcat-card {
        transition: none;
    }

    .category-subcat-card:hover,
    .category-subcat-card:focus {
        transform: none;
    }
}

/**
 * ========================================================================
 * SIGNATURE NUMERIQUE LOOM-CMS
 * ========================================================================
 * Module      : CSS - Category Editorial Remastering
 * Emplacement : /assets/css/category-editorial.css
 * Version     : 1.0.12
 * Date        : 2026-02-10
 * Auteur      : Riley / LOOM DIGITAL
 * ========================================================================
 *
 * COMPOSANTS :
 * [x] Hero dual-mode : gradient CRPMEM / image (memes tokens que article)
 * [x] Cards sous-categories : palette CRPMEM, hover orange, focus visible
 * [x] Badges categorie : fond cyan pale + texte bleu-fonce
 * [x] Titres sections : accent vertical bleu-clair
 * [x] Separateur sections : trait horizontal CRPMEM
 * [x] Stats : typographie coherente
 * [x] Responsive (desktop, tablette, mobile)
 * [x] prefers-reduced-motion respecte
 *
 * RGAA AAA :
 * [x] Ratios contrastes verifies sur tous les composants
 * [x] Focus visible (outline orange) sur cards interactives
 * [x] prefers-reduced-motion desactive transitions
 * [x] category-stats : #525252 (7.81:1 AAA)
 * [x] category-subcat-card__desc : #595959 (7.00:1 AAA, 0.8rem)
 * [x] category-card__date : #595959 (7.00:1 AAA, 0.8rem)
 *
 * Hash : SHA256-CATEGORY-EDITORIAL-CSS-RGAA-DATE-20260210
 * ========================================================================
 */