/* ==========================================================================
   THÈME SOMBRE — pages CMS catégorie + photo
   --------------------------------------------------------------------------
   Cible UNIQUEMENT les 5 pages du CMS via les classes de body :
     .cms-front-route--category  (films-makers, podcasts, workshop,
                                   graphic-motion-design, ET photo)
     .cms-front-route--photo     (page photo seule)

   Ne touche PAS : accueil, /a-propos/ (.cms-front-route--about), pages
   légales, pages client (Salient/WPBakery), admin.

   Les overrides de contenu sont scopés à `main.category` pour ne PAS
   affecter le header ni le footer de Salient (nav, liens de pied de page).

   Le hero (.category-hero) est déjà sombre (vidéo de fond) : on n'y touche pas.

   Conflit connu : Salient impose `body a { color:#3452ff }`. Les liens du
   contenu sont donc forcés en blanc avec un `!important` CIBLÉ sur
   `main.category a` (pas de !important généralisé).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Header Salient transparent sur les pages CMS
   --------------------------------------------------------------------------
   Salient rend le header avec data-permanent-transparent="false" sur les
   templates CMS (pas des pages WP standard) : salient-dynamic-styles.css pose
   alors body #header-outer { background:#fff } (0-1-1), d'ou la bande blanche.
   On neutralise UNIQUEMENT sur les routes CMS, specificite 0-2-1, sans
   !important. Logo blanc gere par le CSS custom (filter: brightness(0) invert(1)).
   -------------------------------------------------------------------------- */
body.cms-front-route #header-outer,
body.cms-front-route[data-header-color="dark"] #header-outer {
  background-color: transparent;
}

body.cms-front-route #header-space {
  background: transparent;
}

body.cms-front-route #header-outer {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   1. Fond de page
   -------------------------------------------------------------------------- */
body.cms-front-route--category,
body.cms-front-route--photo {
  background: #0a0a0a;
}

body.cms-front-route--category #ajax-content-wrap,
body.cms-front-route--photo #ajax-content-wrap,
body.cms-front-route--category .container-wrap,
body.cms-front-route--photo .container-wrap {
  background: #0a0a0a;
}

body.cms-front-route--category main.category,
body.cms-front-route--photo main.category {
  background: #0a0a0a;
  color: #f2f2f2;
}

/* Le catalogue a un dégradé clair (#f7f7f7 -> #fff) codé en dur : on l'écrase. */
body.cms-front-route--category .category-catalog {
  background: #0a0a0a;
}

/* La section photo est transparente : le fond sombre du wrap suffit,
   on la fixe quand même par sécurité. */
body.cms-front-route--photo .photo-catalog {
  background: #0a0a0a;
}

/* --------------------------------------------------------------------------
   2. Titres de section et textes courants
   -------------------------------------------------------------------------- */
body.cms-front-route--category .category-catalog__title,
body.cms-front-route--category .category-band__title,
body.cms-front-route--photo .photo-catalog__title {
  color: #ffffff;
  /* Titre facon accueil : Playfair Display (etait Gloock). Playfair est deja
     charge globalement par Salient. Le corps de texte reste en DM Sans. */
  font-family: "Playfair Display", Georgia, serif;
}

body.cms-front-route--category .category-catalog__description {
  color: #ffffff;
}

/* Amorce en gras des listes a puces : blanc franc pour ressortir sur les
   72% d'opacite du texte courant. */
body.cms-front-route--category .category-catalog__list strong {
  color: #ffffff;
}

body.cms-front-route--category .category-catalog__empty {
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   3. Vignettes / cartes
   -------------------------------------------------------------------------- */
body.cms-front-route--category .category-entry__title {
  color: #ffffff;
}

body.cms-front-route--category .category-entry__excerpt {
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   4. Liens du contenu -> blancs (contre `body a { color:#3452ff }` de Salient)
   Scopé à main.category : n'affecte NI le header NI le footer de Salient.
   -------------------------------------------------------------------------- */
body.cms-front-route--category main.category a:not(.category-cta__btn),
body.cms-front-route--photo main.category a:not(.category-cta__btn) {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   5. Flèches de navigation des carrousels catégorie
   (à l'origine : bouton blanc, bordure et flèche sombres)
   -------------------------------------------------------------------------- */
body.cms-front-route--category .category-nav__button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

body.cms-front-route--category .category-nav__button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   6. Bloc CTA (bas de page catégorie)
   Le bouton est noir sur fond clair aujourd'hui -> on l'inverse.
   -------------------------------------------------------------------------- */
body.cms-front-route--category .category-cta__title {
  color: #ffffff;
}

body.cms-front-route--category .category-cta__text {
  color: rgba(255, 255, 255, 0.7);
}

body.cms-front-route--category main.category a.category-cta__btn,
body.cms-front-route--photo main.category a.category-cta__btn {
  background: #ffffff !important;
  color: #111111 !important;
}

body.cms-front-route--category main.category a.category-cta__btn:hover,
body.cms-front-route--photo main.category a.category-cta__btn:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   7. Page photo : flèches de navigation + bouton admin
   (flèches à l'origine : bouton blanc, flèche/bordure sombres)
   -------------------------------------------------------------------------- */
body.cms-front-route--photo .photo-nav {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

body.cms-front-route--photo .photo-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Bouton admin (visible seulement pour un éditeur connecté) : lisible sur fond sombre. */
body.cms-front-route--photo .photo-admin-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

body.cms-front-route--photo .photo-admin-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}