/* ============================================================
   celina-projects.css
   Pages : index projets, fiches projet
   Chargé conditionnellement via functions.php, avec
   celina-discographie.css (grille/onglets/cartes réutilisés tels quels).

   Les variables --disco-* et les styles de header sombre de
   celina-discographie.css sont scopés aux classes body des pages
   discographie ; on les redéfinit ici pour nos propres classes body
   plutôt que de modifier ce fichier partagé.
   ============================================================ */

body.page-template-page-projects,
body.single-projects {
  --disco-bg:        #1C0038;
  --disco-bg-deep:   #130025;
  --disco-bg-light:  #F5F2EE;
  --disco-text:      #FFFFFF;
  --disco-text-muted:rgba(255,255,255,0.7);
  --disco-accent:    #7B2D8B;
  --disco-accent-2:  #B040C8;
  --disco-border:    rgba(255,255,255,0.12);
  --disco-card-border: rgba(255,255,255,0.1);
  --disco-card-bg:   rgba(255,255,255,0.04);
  --disco-card-hover:rgba(255,255,255,0.08);
  --disco-font-d:    var(--font-display);
  --disco-font-b:    var(--font-body);
  --disco-max-w:     1220px;
  --disco-gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --disco-ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.page-template-page-projects .header,
body.single-projects .header {
  background-color: var(--disco-bg);
}

body.page-template-page-projects .header ul.menu li a,
body.single-projects .header ul.menu li a {
  color: var(--disco-text);
}

body.page-template-page-projects .header ul.menu li a:hover,
body.single-projects .header ul.menu li a:hover,
body.page-template-page-projects .header ul.menu li.current-menu-item > a,
body.page-template-page-projects .header ul.menu li.current-menu-parent > a,
body.single-projects .header ul.menu li.current-menu-item > a,
body.single-projects .header ul.menu li.current-menu-parent > a {
  color: var(--disco-accent-2);
}

body.page-template-page-projects .header .menu-toggle,
body.single-projects .header .menu-toggle {
  background-color: #B040C8;
}

/* Icônes streaming blanches sur fond sombre */
body.page-template-page-projects nav.secondary_menu ul.menu li.menu-icon a::before,
body.single-projects nav.secondary_menu ul.menu li.menu-icon a::before {
  background-color: var(--disco-text);
}

/* Scrolled : icônes streaming repassent en sombre (header redevenu blanc) —
   sans ce reset elles restaient blanches sur fond blanc une fois scrollé. */
body.page-template-page-projects .header.smallscroll nav.secondary_menu ul.menu li.menu-icon a::before,
body.single-projects .header.smallscroll nav.secondary_menu ul.menu li.menu-icon a::before {
  background-color: #1C0038;
}

/* Scrolled : revenir au header semi-transparent */
body.page-template-page-projects .header.smallscroll,
body.single-projects .header.smallscroll {
  background-color: rgba(255, 255, 255, 0.80);
}

body.page-template-page-projects .header.smallscroll ul.menu li a,
body.single-projects .header.smallscroll ul.menu li a {
  color: #1C0038;
}

body.page-template-page-projects .header.smallscroll ul.menu li a:hover,
body.single-projects .header.smallscroll ul.menu li a:hover,
body.page-template-page-projects .header.smallscroll ul.menu li.current-menu-item > a,
body.page-template-page-projects .header.smallscroll ul.menu li.current-menu-parent > a,
body.single-projects .header.smallscroll ul.menu li.current-menu-item > a,
body.single-projects .header.smallscroll ul.menu li.current-menu-parent > a {
  color: #B040C8;
}

/* .cover-card démarre à opacity:0 dans celina-discographie.css, révélé en
   temps normal par l'IntersectionObserver de celina-discographie.js — script
   volontairement non chargé ici (logique d'onglets dédiée), donc on affiche
   les cartes directement. */
.projects-page .cover-card {
  opacity: 1;
  transform: none;
}

.projects-grid {
  grid-template-columns: repeat(4, 1fr);
}

.cover-card__subtitle {
  font-size: 0.8125rem;
  color:     var(--disco-text-muted);
}

/* .titre-detail__right applique un gap uniforme (1.25rem) entre tous ses
   enfants ; ce wrapper regroupe sous-titre + date pour qu'ils restent
   proches l'un de l'autre plutôt que séparés par ce même espacement. */
.projects-meta {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
}

@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}