/* ============================================================
   Thematic Pages — refonte « lumineuse » (mai 2026)
   Aligne le rythme typographique et les micro-interactions sur
   la home page (cf. pages/home.css), tout en conservant la
   couleur d'identité de chaque pôle.

   Tokens par thème (définis en bas de fichier) :
     --theme-accent       — couleur de référence du pôle
     --theme-accent-dark  — hover / surimpression texte
     --theme-accent-light — halo / mise en avant douce
     --theme-accent-rgb   — pour rgba() teintées (ombres, halos)
   ============================================================ */

/* --- Container & rythme : on aligne sur la home ---
   La home utilise `.hp-container` + padding clamp(80px, 10vw, 140px).
   Les pages thématiques utilisent `.container` (max 1200, padding 4rem).
   On garde `.container` mais on ré-applique le rythme home aux sections. */

.thematic-hero,
.thematic-content,
.thematic-pubs,
.thematic-cta {
  position: relative;
}

/* ============================================
   HERO — gradient assoupli, halo radial, pattern
   ============================================ */
.thematic-hero {
  padding: calc(var(--nav-height) + clamp(3.5rem, 7vw, 6rem)) 1.5rem clamp(3rem, 6vw, 5rem);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Halo lumineux en haut-droite — soulève le bloc, signe la fraîcheur */
.thematic-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 85% 15%, rgba(255,255,255,.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 10% 90%, rgba(0,0,0,.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Grille fine ultra-discrète, façon home */
.thematic-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 80%);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}
.thematic-hero .container {
  position: relative;
  z-index: 1;
  max-width: 960px;
}

.thematic-hero .breadcrumb {
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.thematic-hero .breadcrumb a,
.thematic-hero .breadcrumb span {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color var(--t-hover-v3) var(--ease-v3);
}
.thematic-hero .breadcrumb a:hover { color: #fff; }
.thematic-hero .breadcrumb .sep { margin: 0 .35rem; opacity: .5; }

/* Kicker — « Pôle thématique » au-dessus du titre */
.thematic-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  color: #fff;
  margin: 0 0 1rem;
  letter-spacing: -.025em;
  line-height: 1.05;
}
.thematic-hero h1::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: rgba(255,255,255,.55);
  margin: 0 0 1.25rem;
  border-radius: 1px;
}
.thematic-hero .hero-desc {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  color: rgba(255,255,255,.92);
  max-width: 640px;
  line-height: 1.7;
  margin: 0 0 2.5rem;
}

/* Stats — chiffres légers, trait fin accent dessous */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  column-gap: clamp(2rem, 5vw, 3.5rem);
  row-gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.22);
}
.hero-stat {
  text-align: left;
  display: flex;
  flex-direction: column;
}
.hero-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 300;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hero-stat::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: rgba(255,255,255,.5);
  margin: .75rem 0 .65rem;
}
.hero-stat-label {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ============================================
   THEME NAV — pills élégants, sticky sous le header
   ============================================ */
.theme-nav {
  background: rgba(255,255,255,.92);
  padding: .85rem 0;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: var(--nav-height);
  z-index: var(--z-dropdown);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.theme-nav .container {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
}
.theme-nav-pill {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .005em;
  text-decoration: none;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  transition: background var(--t-hover-v3) var(--ease-v3),
              color var(--t-hover-v3) var(--ease-v3),
              border-color var(--t-hover-v3) var(--ease-v3),
              transform var(--t-hover-v3) var(--ease-v3);
}
.theme-nav-pill:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.theme-nav-pill.active {
  background: var(--theme-accent, var(--color-accent));
  color: #fff;
  border-color: var(--theme-accent, var(--color-accent));
  box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb, 45, 91, 215), .22);
}
.theme-nav-pill.active:hover {
  background: var(--theme-accent-dark, var(--color-accent-hover));
  border-color: var(--theme-accent-dark, var(--color-accent-hover));
  transform: translateY(-1px);
}

/* ============================================
   DIRECTION + ENJEUX
   Container un peu plus large, espacement clamp,
   sidebar carte direction + grille enjeux 2 col.
   ============================================ */
.thematic-content {
  padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 80px);
  background: var(--color-bg);
}
.thematic-content .container { max-width: 1180px; }

.thematic-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

/* --- Direction card (sidebar) --- */
.direction-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.85rem;
  position: sticky;
  top: calc(var(--nav-height) + 80px);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: box-shadow .35s var(--ease-v3),
              border-color .35s var(--ease-v3);
}
/* Filet coloré en haut de la carte, façon home theme-card */
.direction-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--theme-accent, var(--color-accent)) 0%,
    var(--theme-accent-light, var(--color-accent-soft)) 100%);
}
.direction-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--sh-md);
}
.direction-card .direction-label {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--theme-accent, var(--color-accent));
  margin-bottom: .85rem;
}
.direction-card h2 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 .75rem;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.direction-card .direction-desc {
  font-family: var(--font-body);
  font-size: .94rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.direction-card .direction-desc a {
  color: var(--theme-accent, var(--color-accent));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--t-hover-v3) var(--ease-v3),
              border-color var(--t-hover-v3) var(--ease-v3);
}
.direction-card .direction-desc a:hover {
  color: var(--theme-accent-dark, var(--color-accent-hover));
}
.direction-card .direction-members-label {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-muted);
  margin-bottom: .85rem;
}

/* --- Director profile (clickable card → equipe.html#slug) --- */
.direction-director {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-hover-v3) var(--ease-v3),
              border-color var(--t-hover-v3) var(--ease-v3),
              transform var(--t-hover-v3) var(--ease-v3),
              box-shadow var(--t-hover-v3) var(--ease-v3);
}
.direction-director:hover {
  background: var(--color-surface);
  border-color: var(--theme-accent, var(--color-accent));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--theme-accent-rgb, 45, 91, 215), .12);
}
.direction-director:focus-visible {
  outline: none;
  border-color: var(--theme-accent, var(--color-accent));
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb, 45, 91, 215), .3);
}

.direction-director-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb, 45, 91, 215), .2);
  transition: box-shadow var(--t-hover-v3) var(--ease-v3);
}
.direction-director-avatar img,
.direction-director-avatar picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.direction-director:hover .direction-director-avatar {
  box-shadow: 0 0 0 2px var(--theme-accent, var(--color-accent));
}

.direction-director-body {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
  flex: 1;
}
.direction-director-name {
  font-family: var(--font-body);
  font-size: .94rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
}
.direction-director-role {
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.direction-director-cta {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--theme-accent, var(--color-accent));
  margin-top: .35rem;
  transition: transform var(--t-hover-v3) var(--ease-v3);
  display: inline-block;
}
.direction-director:hover .direction-director-cta {
  transform: translateX(3px);
}

/* --- Enjeux header + grid --- */
.enjeux-header {
  margin-bottom: 1.85rem;
}
/* Titre section façon home (.hp-section-label) : barre accent verticale */
.enjeux-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -.012em;
  line-height: 1.15;
  position: relative;
  padding-left: 1rem;
}
.enjeux-header h2::before {
  content: '';
  position: absolute;
  left: 0; top: .22em;
  width: 3px;
  height: 1.05em;
  background: var(--theme-accent, var(--color-accent));
  border-radius: 1.5px;
}

/* --- Enjeux : tuiles informatives, PAS cliquables ---
   On retire toute affordance "bouton" (hover transform, change de bord,
   ombre, animation de barre). Reste un petit trait coloré statique en
   haut, un fond sobre, et un filet hairline qui sert juste de séparation
   visuelle. Le pointeur ne change pas, aucune interaction au hover. */
.enjeux-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 1180px) {
  .enjeux-grid { gap: 1.1rem; }
}
@media (max-width: 720px) {
  .enjeux-grid { grid-template-columns: 1fr; }
}

.enjeu-card-v2 {
  position: relative;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  padding: 1.4rem 0 .25rem 1.25rem;
  /* aucune transition — l'élément est statique */
}
/* Petit trait coloré statique en haut-gauche : marqueur visuel
   d'appartenance au pôle, pas d'animation. */
.enjeu-card-v2::before {
  content: '';
  position: absolute;
  left: 0; top: 1.55rem;
  width: 14px;
  height: 2px;
  background: var(--theme-accent, var(--color-accent));
  border-radius: 1px;
}
.enjeu-card-v2 h3 {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 .4rem;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.enjeu-card-v2 p {
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ============================================
   PUBLICATIONS — section sur fond alterné
   ============================================ */
.thematic-pubs {
  padding: clamp(64px, 9vw, 120px) 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}
.thematic-pubs .sec-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.thematic-pubs .sec-ttl {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -.012em;
  line-height: 1.15;
  position: relative;
  padding-left: 1rem;
}
.thematic-pubs .sec-ttl::before {
  content: '';
  position: absolute;
  left: 0; top: .22em;
  width: 3px;
  height: 1.05em;
  background: var(--theme-accent, var(--color-accent));
  border-radius: 1.5px;
}
.thematic-pubs .sec-lnk {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--theme-accent, var(--color-accent));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--t-hover-v3) var(--ease-v3),
              border-color var(--t-hover-v3) var(--ease-v3);
}
.thematic-pubs .sec-lnk:hover {
  color: var(--theme-accent-dark, var(--color-accent-hover));
  border-bottom-color: currentColor;
}

/* ============================================
   CTA CONTRIBUER — bloc carte sur fond pâle accent
   ============================================ */
.thematic-cta {
  padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 7vw, 80px);
  background: var(--color-bg);
}
.thematic-cta .container-narrow {
  position: relative;
  text-align: center;
  background: linear-gradient(135deg,
    rgba(var(--theme-accent-rgb, 45, 91, 215), .06) 0%,
    rgba(var(--theme-accent-rgb, 45, 91, 215), .02) 100%);
  border: 1px solid rgba(var(--theme-accent-rgb, 45, 91, 215), .2);
  border-radius: 14px;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  isolation: isolate;
}
/* Filet vertical accent à gauche, signe de mise en avant */
.thematic-cta .container-narrow::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--theme-accent, var(--color-accent));
}
/* Halo radial subtil en arrière-plan */
.thematic-cta .container-narrow::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 80% 20%,
    rgba(var(--theme-accent-rgb, 45, 91, 215), .08) 0%,
    transparent 50%);
  z-index: -1;
}
.thematic-cta h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 .85rem;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.thematic-cta p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 1.75rem;
}
.thematic-cta .btn,
.thematic-cta .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 13px 26px;
  background: var(--theme-accent, var(--color-accent));
  color: #fff;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--theme-accent, var(--color-accent));
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(var(--theme-accent-rgb, 45, 91, 215), .15);
  transition: background var(--t-hover-v3) var(--ease-v3),
              border-color var(--t-hover-v3) var(--ease-v3),
              transform var(--t-hover-v3) var(--ease-v3),
              box-shadow var(--t-hover-v3) var(--ease-v3);
}
.thematic-cta .btn:hover,
.thematic-cta .btn-outline:hover {
  background: var(--theme-accent-dark, var(--color-accent-hover));
  border-color: var(--theme-accent-dark, var(--color-accent-hover));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--theme-accent-rgb, 45, 91, 215), .25);
}

/* ============================================
   POLE NAV (prev/next) — cartes discrètes
   ============================================ */
.pole-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 4rem clamp(3rem, 6vw, 5rem);
}
.pole-nav a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--t-hover-v3) var(--ease-v3),
              background var(--t-hover-v3) var(--ease-v3),
              transform var(--t-hover-v3) var(--ease-v3),
              box-shadow var(--t-hover-v3) var(--ease-v3);
}
.pole-nav a:hover {
  border-color: var(--theme-accent, var(--color-accent));
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(var(--theme-accent-rgb, 45, 91, 215), .1);
}
.pole-nav .pole-label {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-muted);
  transition: color var(--t-hover-v3) var(--ease-v3);
}
.pole-nav a:hover .pole-label { color: var(--theme-accent, var(--color-accent)); }
.pole-nav .pole-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-text);
  letter-spacing: -.005em;
}
.pole-nav .pole-next { text-align: right; align-items: flex-end; }

/* ============================================
   PUBLICATION BADGES — petit fix gap legacy
   ============================================ */
.pub-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 960px) {
  .thematic-layout {
    grid-template-columns: 1fr;
  }
  .direction-card {
    position: static;
  }
}
@media (max-width: 768px) {
  .thematic-pubs .sec-hdr {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  .pole-nav { padding: 0 1.5rem clamp(2.5rem, 5vw, 4rem); }
}
@media (max-width: 640px) {
  .thematic-hero h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .thematic-hero .hero-desc { font-size: 1rem; }
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding-top: 1.5rem;
  }
  .hero-stat::after { margin: .5rem 0 .45rem; }
  .pole-nav { grid-template-columns: 1fr; }
  .pole-nav .pole-next { text-align: left; align-items: flex-start; }
  .theme-nav-pill { font-size: .78rem; padding: .42rem .9rem; }
}
@media (max-width: 480px) {
  .thematic-cta .container-narrow { padding: 2rem 1.25rem; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .direction-card,
  .direction-director,
  .pole-nav a,
  .thematic-cta .btn,
  .thematic-cta .btn-outline,
  .theme-nav-pill {
    transition: none !important;
  }
  .direction-director:hover,
  .pole-nav a:hover,
  .thematic-cta .btn:hover {
    transform: none !important;
  }
}

/* ============================================
   PER-THEME ACCENT — tokens propagés via [data-theme]
   Ces variables nourrissent les sections ci-dessus.
   ============================================ */
[data-theme="ecologie"] {
  --theme-accent:       #16a34a;
  --theme-accent-dark:  #166534;
  --theme-accent-light: #4ade80;
  --theme-accent-rgb:   22, 163, 74;
}
[data-theme="economie"] {
  --theme-accent:       #2563eb;
  --theme-accent-dark:  #1e40af;
  --theme-accent-light: #60a5fa;
  --theme-accent-rgb:   37, 99, 235;
}
[data-theme="institutions"] {
  --theme-accent:       #d97706;
  --theme-accent-dark:  #92400e;
  --theme-accent-light: #fbbf24;
  --theme-accent-rgb:   217, 119, 6;
}
[data-theme="social"] {
  --theme-accent:       #db2777;
  --theme-accent-dark:  #9d174d;
  --theme-accent-light: #f472b6;
  --theme-accent-rgb:   219, 39, 119;
}
[data-theme="international"] {
  --theme-accent:       #0ea5e9;
  --theme-accent-dark:  #0369a1;
  --theme-accent-light: #38bdf8;
  --theme-accent-rgb:   14, 165, 233;
}
[data-theme="culture"] {
  --theme-accent:       #7c3aed;
  --theme-accent-dark:  #5b21b6;
  --theme-accent-light: #a78bfa;
  --theme-accent-rgb:   124, 58, 237;
}

/* Gradient du hero piloté par le triplet de la thématique.
   On adoucit l'angle (165°) et on resserre la zone foncée
   pour donner une vraie lumière en bas/droite. */
[data-theme] .thematic-hero {
  border-top: 3px solid var(--theme-accent);
  background:
    linear-gradient(165deg,
      var(--theme-accent-dark) 0%,
      var(--theme-accent) 55%,
      var(--theme-accent-light) 100%);
}