/* ==========================================================================
   webroot/css/categories.css
   Page d'une catégorie racine (templates/Posts/categories.php)
   Remplace le <style> qui était écrit dans le template.

   Contrastes texte blanc sur l'en-tête des cartes (minimum 4.5:1) :
   - vert   #144d47 ... 9.62:1
   - rouge  #c0231c ... 6.00:1
   - orange #b5440c ... 5.53:1  (orange de la charte assombri)
   - ocre   #8a5a00 ... 5.93:1  (remplace le jaune : blanc sur #fcb900 = 1.9:1)
   ========================================================================== */

.man-categories {
  --cat-tone: #144d47;
}

/* ── Introduction ────────────────────────────────────────────────────────── */

.man-categories .cat-hero-desc {
  max-width: 680px;
  margin: 0 auto;
  color: #444;
  line-height: 1.75;
}

.man-categories .separator-wave {
  width: 60px;
  height: 4px;
  border-radius: 2px;
  margin: 1rem auto 1.5rem;
  background: #144d47;
}

.man-categories .cat-counter {
  font-size: 0.875rem;
  color: #595959;
}

/* ── Couleur de chaque carte ─────────────────────────────────────────────── */

.cat-card--vert   { --cat-tone: #144d47; }
.cat-card--rouge  { --cat-tone: #c0231c; }
.cat-card--orange { --cat-tone: #b5440c; }
.cat-card--ocre   { --cat-tone: #8a5a00; }

/* ── Carte ───────────────────────────────────────────────────────────────── */

.cat-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Focus clavier : le lien est dans le titre, on entoure toute la carte */
.cat-card:focus-within {
  outline: 3px solid var(--cat-tone);
  outline-offset: 3px;
}

.cat-card .stretched-link:focus-visible {
  outline: none; /* remplacé par le contour de la carte ci-dessus */
}

.cat-card-header {
  min-height: 90px; /* min-height et non height : les noms longs passent à la ligne */
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  position: relative;
  overflow: hidden;
  background: var(--cat-tone);
  color: #fff;
}

.cat-card-header::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.cat-card-header .cat-icon {
  font-size: 2rem;
  margin-right: 0.75rem;
  color: #fff;
}

.cat-card .cat-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Spécificité plus forte que le a:hover jaune de custom.css,
   illisible sur le rouge (2:1) */
.cat-card .cat-name a,
.cat-card .cat-name a:hover,
.cat-card .cat-name a:focus {
  color: #fff;
  text-decoration: none;
}

.cat-card:hover .cat-name a {
  text-decoration: underline;
}

.cat-card .cat-count {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: #fff;
}

.cat-card .card-body {
  padding: 0.75rem 1rem 0.5rem;
}

.cat-card .card-text {
  font-size: 0.875rem;
  color: #595959;
  line-height: 1.5;
}

/* ── Sous-rubriques ──────────────────────────────────────────────────────── */

.cat-card .list-group-item {
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  border-left: none;
  border-right: none;
}

/* Au-dessus du lien étiré (z-index 1), sinon ces liens ne sont pas cliquables */
.cat-card__child {
  position: relative;
  z-index: 2;
  color: var(--cat-tone);
  text-decoration: none;
}

.cat-card__child:hover,
.cat-card__child:focus {
  color: var(--cat-tone);
  text-decoration: underline;
}

.cat-card__child i {
  font-size: 0.7rem;
  margin-right: 0.35rem;
}

.cat-card__rest {
  font-style: italic;
  color: #595959;
}

/* ── Repère « Voir tout » (décoratif, le lien est le titre) ──────────────── */

.cat-card__more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cat-tone);
}

/* ── Animations : uniquement si l'utilisateur ne les a pas désactivées ──── */

@media (prefers-reduced-motion: no-preference) {
  .cat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: catFadeSlideUp 0.5s ease backwards; /* backwards et non forwards : sinon l'animation bloque le transform du survol */
  }

  .cat-card:hover,
  .cat-card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  }

  /* Décalage sur le <li class="col">, pas sur .cat-card :
     la carte est toujours le 1er enfant de sa colonne,
     l'ancien .cat-card:nth-child(n) donnait le même délai à toutes */
  .man-categories .col:nth-child(2)  .cat-card { animation-delay: 0.07s; }
  .man-categories .col:nth-child(3)  .cat-card { animation-delay: 0.14s; }
  .man-categories .col:nth-child(4)  .cat-card { animation-delay: 0.21s; }
  .man-categories .col:nth-child(5)  .cat-card { animation-delay: 0.28s; }
  .man-categories .col:nth-child(6)  .cat-card { animation-delay: 0.35s; }
  .man-categories .col:nth-child(7)  .cat-card { animation-delay: 0.42s; }
  .man-categories .col:nth-child(8)  .cat-card { animation-delay: 0.49s; }
  .man-categories .col:nth-child(n+9) .cat-card { animation-delay: 0.56s; }
}

@keyframes catFadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}