/* ================================================================
   WATHI — Think Tank Institutionnel
   Charte graphique officielle WATHI
   Couleurs primaires : #004671 · #008F98 · #88C9D9 · #EE9F39 · #D95441
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ── Couleurs officielles WATHI ─────────────────────────────── */
:root {
  /* Primaires */
  --navy:   #004671;   /* Bleu de nuit */
  --teal:   #008F98;   /* Bleu turquoise */
  --sky:    #88C9D9;   /* Bleu de ciel */
  --orange: #EE9F39;   /* Orange */
  --rouge:  #D95441;   /* Rouge/Corail — couleur dominante */

  /* Secondaires */
  --beige:  #DE9885;
  --yellow: #FDE598;
  --brick:  #BC5F64;

  /* Neutres */
  --ink:    #1A1A1A;
  --ink-2:  #3D3D3D;
  --ink-3:  #7F7F7F;
  --paper:  #F9F7F4;
  --line:   #E8E4DF;
  --line-2: #F0EDE9;
  --white:  #FFFFFF;

  /* Aliases */
  --brand:  var(--rouge);
  --accent: var(--teal);

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;

  --max: 1200px;
  --t:   .2s ease;

  /* Pattern URLs — set via inline style ou CSS custom properties */
  --pattern-blue:  url('/wp-content/uploads/2024/04/WATHI_pattern-blue.jpg');
  --pattern-gray:  url('/wp-content/uploads/2024/04/WATHI_pattern-gray-transparent-2.png');
  --pattern-green: url('/wp-content/uploads/2023/05/WATHI_pattern-green.jpg');
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img  { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Conteneur ──────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
@media (max-width: 600px) { .wrap { padding: 0 20px; } }

/* ── Typographie ────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family: var(--sans); line-height: 1.1; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); }
h4 { font-size: 1rem; font-weight: 600; }

/* ── Labels / badges ────────────────────────────────────────── */
.label {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.badge {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--teal); color: var(--white);
}
.badge-rouge  { background: var(--rouge); }
.badge-orange { background: var(--orange); color: var(--ink); }
.badge-navy   { background: var(--navy); }

/* ── Boutons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .01em; padding: 12px 24px; border-radius: 4px;
  transition: var(--t); white-space: nowrap; cursor: pointer;
}
.btn-rouge  { background: var(--rouge);  color: var(--white); }
.btn-rouge:hover  { background: #c44438; }
.btn-teal   { background: var(--teal);   color: var(--white); }
.btn-teal:hover   { background: #007a82; }
.btn-navy   { background: var(--navy);   color: var(--white); }
.btn-navy:hover   { background: #003558; }
.btn-orange { background: var(--orange); color: var(--white); }
.btn-orange:hover { background: #d4882a; }
.btn-white  { background: var(--white);  color: var(--navy); }
.btn-white:hover  { background: var(--paper); }
.btn-outline-white { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.5); }
.btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: var(--white); }

.lien {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; color: var(--teal);
  letter-spacing: .01em; transition: gap var(--t);
}
.lien svg { width: 14px; height: 14px; transition: transform var(--t); }
.lien:hover { gap: 10px; }
.lien:hover svg { transform: translateX(3px); }
.lien-white { color: rgba(255,255,255,.75); }
.lien-white:hover { color: var(--white); }

/* ═══════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: var(--navy);
  transition: box-shadow var(--t), top var(--t);
}
.site-header.is-scrolled { box-shadow: 0 2px 32px rgba(0,0,0,.35); }

/* Barre d'admin WordPress — WP ajoute margin-top:32px sur <html>,
   le header suit via top:32px, le slider n'a pas besoin d'override */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* Barre supérieure */
.hd-top { border-bottom: 1px solid rgba(255,255,255,.08); }
.hd-top .wrap { display: flex; align-items: center; justify-content: space-between; height: 32px; }
.hd-top-left { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.hd-top-right { display: flex; align-items: center; gap: 20px; }
.hd-top-link { font-size: .65rem; font-weight: 500; color: rgba(255,255,255,.4); transition: color var(--t); }
.hd-top-link:hover { color: rgba(255,255,255,.85); }
.hd-lang {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,.5); padding: 2px 10px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px; transition: var(--t);
}
.hd-lang:hover { color: var(--white); border-color: rgba(255,255,255,.45); }

/* Barre principale */
.hd-main .wrap { display: flex; align-items: center; height: 72px; gap: 0; }

/* Logo */
.hd-logo {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding-right: 32px; margin-right: 32px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.hd-logo img { height: 64px; width: auto; border-radius: 7px; }
.hd-logo-fallback {
  font-family: var(--sans); font-size: 1.6rem; font-weight: 800;
  color: var(--white); letter-spacing: .04em;
}

/* Nav — centrée */
.hd-nav { flex: 1; display: flex; justify-content: center; }
.hd-nav ul { display: flex; align-items: center; gap: 2px; }
.hd-nav ul li { position: relative; }
.hd-nav ul li > a {
  display: flex; align-items: center; gap: 5px; padding: 8px 14px;
  font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.65);
  border-radius: 4px; transition: var(--t); white-space: nowrap; letter-spacing: .01em;
}
.hd-nav ul li > a:hover,
.hd-nav ul li.current-menu-item > a,
.hd-nav ul li.current-menu-ancestor > a { color: var(--white); background: rgba(255,255,255,.1); }

/* Chevron sous-menu */
.hd-nav ul li.menu-item-has-children > a::after {
  content: ''; width: 9px; height: 5px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5'%3E%3Cpath d='M1 1l3.5 3L8 1' stroke='rgba(255,255,255,.45)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s ease;
}
.hd-nav ul li.menu-item-has-children:hover > a::after { transform: rotate(180deg); }

/* ── Sous-menu : épuré + coloré + animé ─── */
.hd-nav ul ul {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 260px;
  max-height: 240px;          /* ≈ 5 items + un peek du 6e */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 8px 0;
  box-shadow:
    0 28px 56px -12px rgba(0,12,30,.18),
    0 6px 18px rgba(0,12,30,.06);
  opacity: 0; visibility: hidden;
  transition:
    opacity .22s cubic-bezier(.16,1,.3,1),
    transform .32s cubic-bezier(.16,1,.3,1),
    visibility .22s;
  flex-direction: column;
  z-index: 200;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.hd-nav ul ul::-webkit-scrollbar { width: 4px; }
.hd-nav ul ul::-webkit-scrollbar-track { background: transparent; }
.hd-nav ul ul::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.hd-nav ul ul::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

.hd-nav ul li:hover > ul {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Items animés en cascade */
.hd-nav ul ul li {
  width: 100%;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity .28s cubic-bezier(.2,.8,.3,1),
    transform .32s cubic-bezier(.2,.8,.3,1);
}
.hd-nav ul li:hover > ul li { opacity: 1; transform: translateX(0); }
.hd-nav ul li:hover > ul li:nth-child(1) { transition-delay: .04s; }
.hd-nav ul li:hover > ul li:nth-child(2) { transition-delay: .08s; }
.hd-nav ul li:hover > ul li:nth-child(3) { transition-delay: .12s; }
.hd-nav ul li:hover > ul li:nth-child(4) { transition-delay: .16s; }
.hd-nav ul li:hover > ul li:nth-child(5) { transition-delay: .2s; }
.hd-nav ul li:hover > ul li:nth-child(n+6) { transition-delay: .22s; }

/* Liens */
.hd-nav ul ul li > a {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 24px 11px 20px;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .005em;
  color: var(--ink-2);
  background: none;
  border-radius: 0;
  white-space: nowrap;
  transition:
    color .2s,
    background .25s,
    padding-left .3s cubic-bezier(.2,.8,.3,1);
}

/* Marker coloré (point → trait au hover) */
.hd-nav ul ul li > a::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rouge);
  transition:
    width .32s cubic-bezier(.2,.8,.3,1),
    height .32s cubic-bezier(.2,.8,.3,1),
    border-radius .32s,
    transform .32s;
}

/* Cycle des 4 couleurs WATHI */
.hd-nav ul ul li:nth-child(4n+1) > a::before { background: var(--rouge);  }
.hd-nav ul ul li:nth-child(4n+2) > a::before { background: var(--orange); }
.hd-nav ul ul li:nth-child(4n+3) > a::before { background: var(--teal);   }
.hd-nav ul ul li:nth-child(4n)   > a::before { background: var(--sky);    }

/* Hover : texte plus sombre, fond ultra-discret, marker s'allonge */
.hd-nav ul ul li > a:hover,
.hd-nav ul ul li.current-menu-item > a {
  color: var(--ink);
  background: var(--paper);
  padding-left: 24px;
}
.hd-nav ul ul li > a:hover::before,
.hd-nav ul ul li.current-menu-item > a::before {
  width: 18px;
  height: 2px;
  border-radius: 1px;
}

/* Actions */
.hd-actions { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.hd-search-btn {
  width: 36px; height: 36px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); transition: var(--t);
}
.hd-search-btn:hover { background: rgba(255,255,255,.12); color: var(--white); }
.hd-search-btn svg { width: 18px; height: 18px; }
.hd-don-btn {
  display: inline-flex; align-items: center;
  padding: 7px 16px;
  background: var(--rouge);
  color: var(--white);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background .2s, transform .15s;
  white-space: nowrap;
}
.hd-don-btn:hover { background: #b51020; transform: translateY(-1px); }
.hd-burger { display: none; flex-direction: column; gap: 5px; padding: 6px; color: rgba(255,255,255,.7); }
.hd-burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: var(--t); transform-origin: center; }
.hd-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-burger.open span:nth-child(2) { opacity: 0; }
.hd-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Search overlay ─────────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,70,113,.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: var(--t);
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-inner { width: 100%; max-width: 640px; padding: 0 24px; position: relative; }
.search-inner label {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 20px;
}
.search-row { display: flex; border-bottom: 2px solid rgba(255,255,255,.25); padding-bottom: 2px; }
.search-row input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--serif); font-size: 2.2rem; color: var(--white); padding: 8px 0;
}
.search-row input::placeholder { color: rgba(255,255,255,.18); }
.search-row button { color: rgba(255,255,255,.4); padding: 0 4px; transition: color var(--t); }
.search-row button:hover { color: var(--orange); }
.search-row button svg { width: 22px; height: 22px; }
.search-close {
  position: absolute; top: -56px; right: 0;
  font-size: 2rem; color: rgba(255,255,255,.3); line-height: 1;
  font-weight: 300; transition: color var(--t);
}
.search-close:hover { color: var(--white); }

/* ── Mobile nav ─────────────────────────────────────────────── */
.mob-nav {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
  background: var(--navy); z-index: 899; padding: 80px 32px 40px;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; border-left: 1px solid rgba(255,255,255,.08);
}
.mob-nav.open { transform: none; }
.mob-nav-bg { position: fixed; inset: 0; z-index: 898; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: var(--t); }
.mob-nav-bg.open { opacity: 1; visibility: visible; }
.mob-nav a {
  display: block; font-size: 1.1rem; font-weight: 600;
  color: rgba(255,255,255,.65); padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08); transition: color var(--t);
}
.mob-nav a:hover { color: var(--white); }

/* ═══════════════════════════════════════════════════════════════
   HERO SLIDER — Projets & Initiatives
═══════════════════════════════════════════════════════════════ */
.hero-slider {
  position: relative;
  margin-top: 105px;
  overflow: hidden;
  background: var(--navy);
  height: min(92vh, 680px);
  min-height: 500px;
}

/* Slides */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; display: flex; }
.slide.active { opacity: 1; z-index: 2; }

/* Fond image */
.slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.slide-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,70,113,.92) 0%, rgba(0,70,113,.7) 50%, rgba(0,70,113,.2) 100%);
}
/* Fond pattern (si pas d'image) */
.slide-bg-pattern {
  position: absolute; inset: 0;
  background-color: var(--navy);
  background-image: var(--pattern-blue);
  background-size: 320px;
  background-repeat: repeat;
}
.slide-bg-pattern::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,70,113,.92) 0%, rgba(0,70,113,.82) 100%);
}
/* Accent couleur selon slide */
.slide[data-color="rouge"] .slide-bg-pattern { background-color: var(--rouge); }
.slide[data-color="teal"]  .slide-bg-pattern { background-color: var(--teal); }
.slide[data-color="orange"] .slide-bg-pattern { background-color: var(--orange); }

/* Barre colorée en haut du slide */
.slide-color-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 5;
  background: var(--orange);
}

/* Contenu */
.slide-content {
  position: relative; z-index: 3; display: flex; align-items: center;
  width: 100%; padding: 60px 0;
}
.slide-inner { max-width: 620px; }
.slide-tag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.slide-tag-pill {
  background: var(--orange); color: var(--navy);
  font-size: .6rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 20px;
}
.slide-tag-label {
  font-size: .65rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.slide-inner h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem); color: var(--white);
  font-weight: 800; line-height: 1.08; margin-bottom: 14px;
}
.slide-inner p {
  font-family: var(--serif); font-size: 1rem; color: rgba(255,255,255,.65);
  line-height: 1.75; margin-bottom: 28px; max-width: 520px;
}
.slide-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.slide-meta {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; gap: 16px;
}
.slide-meta-item {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; color: rgba(255,255,255,.4);
}
.slide-meta-item svg { width: 13px; height: 13px; color: var(--orange); }

/* Controls slider */
.slider-prev,
.slider-next {
  position: absolute; top: 50%; z-index: 10; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t); border: 1px solid rgba(255,255,255,.2);
}
.slider-prev { left: 28px; }
.slider-next { right: 28px; }
.slider-prev:hover, .slider-next:hover { background: var(--orange); border-color: var(--orange); }
.slider-prev svg, .slider-next svg { width: 20px; height: 20px; }

/* Dots */
.slider-dots {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; gap: 8px; align-items: center;
}
.slider-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.3); transition: var(--t); cursor: pointer; border: none; padding: 0;
}
.slider-dot.active { background: var(--orange); width: 24px; border-radius: 4px; }

/* Barre de progression */
.slider-progress {
  position: absolute; bottom: 0; left: 0; height: 3px;
  background: var(--orange); z-index: 10; width: 0; transition: width 5.5s linear;
}

/* Counter */
.slider-counter {
  position: absolute; bottom: 20px; right: 28px; z-index: 10;
  font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.3); letter-spacing: .1em;
}

/* ═══════════════════════════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════════════════════════ */
.section { padding: 72px 0; }
.section-sm { padding: 52px 0; }
.section--publications {
  position: relative;
}
.section--publications::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url('/wp-content/uploads/2024/04/WATHI_pattern-gray-transparent-2.png');
  background-size: 1500px;
  background-repeat: repeat;
  background-position: center;
  opacity: 1;
  pointer-events: none;
}
.section--publications .wrap { position: relative; z-index: 1; }
.bg-paper {
  background: var(--paper);
  position: relative;
}
.bg-paper::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--pattern-gray);
  background-size: 220px; background-repeat: repeat;
  opacity: .045;
}
.bg-navy  { background: var(--navy); }
.bg-teal  { background: var(--teal); }
.bg-rouge { background: var(--rouge); }

/* Section header */
.s-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 36px;
}
.s-head-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); display: block; margin-bottom: 8px;
}
.s-head-label--lg { font-size: 1.5rem; letter-spacing: .04em; }

/* Titre institutionnel WATHI */
.s-head-label--inst {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  padding-left: 14px;
  border-left: 3px solid currentColor;
  margin-bottom: 0;
}
.s-head-label-rouge { color: var(--rouge); }
.s-head h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.s-head-dark h2 { color: var(--white); }
.s-head-divider {
  display: flex; align-items: center; gap: 0; margin-bottom: 36px;
}
.s-head-divider h2 {
  padding-right: 24px; white-space: nowrap; font-size: clamp(1.3rem, 2.5vw, 1.9rem);
}
.s-head-divider::after {
  content: ''; flex: 1; height: 2px; background: var(--line);
}

/* ═══════════════════════════════════════════════════════════════
   PILIERS WATHI
═══════════════════════════════════════════════════════════════ */

.section--piliers {
  background: var(--navy);
  padding: 64px 0;
}

.piliers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.pilier-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 32px;
  background: rgba(255,255,255,.04);
  border-top: 3px solid transparent;
  text-decoration: none;
  color: var(--white);
  transition: background .2s, border-color .2s;
  position: relative;
}
.pilier-card:hover {
  background: rgba(255,255,255,.08);
  border-top-color: var(--teal);
}
.pilier-card:nth-child(2):hover { border-top-color: var(--orange); }
.pilier-card:nth-child(3):hover { border-top-color: var(--rouge); }
.pilier-card:nth-child(4):hover { border-top-color: var(--sky); }

.pilier-icon {
  width: 52px; height: 52px;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  flex-shrink: 0;
  transition: border-color .2s, color .2s;
}
.pilier-card:hover .pilier-icon {
  border-color: var(--teal);
  color: var(--teal);
}
.pilier-card:nth-child(2):hover .pilier-icon { border-color: var(--orange); color: var(--orange); }
.pilier-card:nth-child(3):hover .pilier-icon { border-color: var(--rouge);  color: var(--rouge); }
.pilier-card:nth-child(4):hover .pilier-icon { border-color: var(--sky);    color: var(--sky); }

.pilier-body { flex: 1; }

.pilier-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.25;
}

.pilier-desc {
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(255,255,255,.55);
}

.pilier-arrow {
  color: rgba(255,255,255,.25);
  transition: color .2s, transform .2s;
  align-self: flex-end;
}
.pilier-card:hover .pilier-arrow {
  color: rgba(255,255,255,.6);
  transform: translateX(4px);
}

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

/* ═══════════════════════════════════════════════════════════════
   PUBLICATIONS — Grille 3×2 avec cards magnifiques
═══════════════════════════════════════════════════════════════ */

/* Grille 3 colonnes × 2 rangées */
.pub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .pub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pub-grid { grid-template-columns: 1fr; } }

/* Card publication */
.pub-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
  transition: transform .3s ease, box-shadow .3s ease;
  text-decoration: none;
  position: relative;
}
.pub-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,70,113,.16), 0 0 0 1px rgba(0,70,113,.08);
}

/* Image */
.pub-card-img {
  aspect-ratio: 16/10; overflow: hidden; background: var(--paper);
  position: relative;
}
.pub-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pub-card:hover .pub-card-img img { transform: scale(1.08); }

/* Placeholder coloré avec pattern WATHI */
.pub-card-img-placeholder {
  width: 100%; height: 100%;
  background-color: var(--card-color, var(--navy));
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.25);
}
.pub-placeholder-pattern {
  position: absolute; inset: 0;
  background-image: var(--pattern-blue);
  background-size: 200px;
  background-repeat: repeat;
  opacity: .18;
}

/* Badge catégorie */
.pub-card-cat-badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--card-color, var(--teal)); color: var(--white);
  font-size: .58rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* Corps de la card */
.pub-card-body {
  padding: 20px 22px 22px; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}

/* Accent coloré en haut du corps */
.pub-card-body::before {
  content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px;
  background: var(--card-color, var(--teal));
  opacity: 0; transition: opacity .3s ease;
}
.pub-card:hover .pub-card-body::before { opacity: 1; }

.pub-card-body h3 {
  font-size: 1rem; line-height: 1.35; color: var(--ink); font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s ease;
}
.pub-card:hover h3 { color: var(--navy); }

.pub-card-body h3 { flex: 1; }

/* Footer de la card : auteur + date + temps de lecture */
.pub-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--line-2);
  margin-top: auto; gap: 8px;
}
.pub-card-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pub-card-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--card-color, var(--teal)); color: var(--white);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center;
}
.pub-card-author-name {
  display: block; font-size: .73rem; font-weight: 700; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
.pub-card-date {
  display: block; font-size: .65rem; color: var(--ink-3);
}
.pub-card-reading {
  font-size: .65rem; color: var(--ink-3); white-space: nowrap; flex-shrink: 0;
}

/* Bouton lire */
.pub-card-lire {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  color: var(--card-color, var(--teal));
  text-transform: uppercase; transition: gap .2s ease;
}
.pub-card-lire svg { width: 13px; height: 13px; transition: transform .2s ease; }
.pub-card:hover .pub-card-lire { gap: 10px; }
.pub-card:hover .pub-card-lire svg { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════
   ÉVÉNEMENTS
═══════════════════════════════════════════════════════════════ */

/* Onglets À venir / Passés */
.evt-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--line);
  margin-bottom: 36px;
}
.evt-tab {
  padding: 10px 24px; font-size: .82rem; font-weight: 700;
  color: var(--ink-3); cursor: pointer; border: none; background: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: var(--t);
}
.evt-tab.active { color: var(--rouge); border-bottom-color: var(--rouge); }
.evt-tab:hover:not(.active) { color: var(--ink); }

.evt-panel { display: none; }
.evt-panel.active { display: block; }

/* Grille événements */
.evt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

.evt-card {
  background: var(--white); border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t);
  text-decoration: none;
}
.evt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(217,84,65,.15), 0 0 0 1px rgba(217,84,65,.08);
}

/* Header coloré de la card event */
.evt-card-head {
  background: var(--navy); padding: 20px 24px;
  display: flex; align-items: flex-start; gap: 16px;
  position: relative; overflow: hidden;
}
.evt-card-head::before {
  content: ''; position: absolute; right: -20px; bottom: -20px;
  width: 120px; height: 120px;
  background-image: var(--pattern-gray);
  background-size: 120px; background-repeat: no-repeat;
  opacity: .15;
}
.evt-card-head.rouge { background: var(--rouge); }
.evt-card-head.teal  { background: var(--teal); }

.evt-date-block { text-align: center; flex-shrink: 0; }
.evt-day {
  font-size: 3rem; font-weight: 800; color: var(--white); line-height: 1;
  display: block;
}
.evt-month {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.6); display: block;
}
.evt-year { font-size: .65rem; color: rgba(255,255,255,.4); display: block; }
.evt-head-divider { width: 1px; background: rgba(255,255,255,.2); align-self: stretch; }

.evt-head-text {}
.evt-head-type {
  font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 4px; display: block;
}
.evt-head-title {
  font-size: 1rem; font-weight: 700; color: var(--white); line-height: 1.25;
}

.evt-card-body { padding: 18px 24px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.evt-card-body p { font-size: .82rem; color: var(--ink-3); line-height: 1.65; flex: 1; }
.evt-card-footer {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; color: var(--ink-3);
  padding-top: 12px; border-top: 1px solid var(--line-2);
}
.evt-card-footer svg { width: 14px; height: 14px; color: var(--rouge); flex-shrink: 0; }

/* Empty state */
.evt-empty {
  text-align: center; padding: 60px 24px;
  color: var(--ink-3);
}
.evt-empty svg { width: 48px; height: 48px; color: var(--line); margin: 0 auto 16px; }
.evt-empty p { font-size: .9rem; }

/* ── Badge count onglet événement ──────────────────────────── */
.evt-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rouge); color: #fff;
  font-size: .58rem; font-weight: 800;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; margin-left: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL YOUTUBE — Section événements (quand vide)
═══════════════════════════════════════════════════════════════ */

.yt-section { }

.yt-intro {
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.8;
  color: var(--ink-2); max-width: 680px;
  margin-bottom: 32px;
}

/* Conteneur externe : positionne les flèches */
.yt-carousel-outer {
  position: relative;
  margin: 0 -8px; /* compense le padding interne */
}

/* Les flèches de navigation */
.yt-nav {
  position: absolute; top: 50%; transform: translateY(-60%);
  z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--navy);
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transition: background var(--t), color var(--t), box-shadow var(--t), border-color var(--t);
  cursor: pointer;
}
.yt-nav:hover {
  background: var(--rouge); color: #fff; border-color: var(--rouge);
  box-shadow: 0 6px 20px rgba(217,84,65,.3);
}
.yt-nav:disabled { opacity: .3; pointer-events: none; }
.yt-nav-prev { left: -22px; }
.yt-nav-next { right: -22px; }

/* Carousel scrollable */
.yt-carousel {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 8px 16px;
  /* Cache la scrollbar */
  scrollbar-width: none; -ms-overflow-style: none;
}
.yt-carousel::-webkit-scrollbar { display: none; }

/* Carte vidéo */
.yt-card {
  flex: 0 0 calc(33.33% - 14px);
  scroll-snap-align: start;
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: box-shadow .25s ease, transform .25s ease;
}
.yt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}
.yt-card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; }

/* Thumbnail */
.yt-thumb {
  aspect-ratio: 16/9; position: relative; overflow: hidden;
  background: var(--navy);
  flex-shrink: 0;
}
.yt-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.yt-card:hover .yt-thumb img { transform: scale(1.05); }

/* Overlay sombre sur hover */
.yt-thumb-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.28);
  transition: background .3s ease;
}
.yt-card:hover .yt-thumb-overlay { background: rgba(0,0,0,.45); }

/* Bouton play central */
.yt-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.yt-play-btn > svg {
  width: 52px; height: 52px;
  background: var(--rouge);
  color: #fff;
  border-radius: 50%;
  padding: 14px 12px 14px 16px; /* décale le triangle pour le centrer visuellement */
  box-shadow: 0 6px 24px rgba(217,84,65,.5);
  transition: transform .25s ease, box-shadow .25s ease, background .2s;
}
.yt-card:hover .yt-play-btn > svg {
  transform: scale(1.12);
  box-shadow: 0 8px 28px rgba(217,84,65,.65);
}

/* Date en bas-gauche de la thumbnail */
.yt-card-date {
  position: absolute; bottom: 10px; left: 12px; z-index: 2;
  font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .06em; color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.35); backdrop-filter: blur(4px);
  padding: 3px 8px; border-radius: 3px;
}

/* Corps texte */
.yt-card-body {
  padding: 16px 18px 18px; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 3px solid var(--rouge);
}
.yt-card-body h3 {
  font-family: var(--sans); font-size: .85rem; font-weight: 700;
  line-height: 1.4; color: var(--ink); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s;
}
.yt-card:hover h3 { color: var(--rouge); }

.yt-card-watch {
  display: flex; align-items: center; gap: 5px; margin-top: auto;
  font-family: var(--sans); font-size: .63rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--rouge); transition: gap .2s;
}
.yt-card:hover .yt-card-watch { gap: 8px; }

/* Footer : barre de progression + lien playlist */
.yt-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-top: 24px;
}

.yt-track {
  flex: 1; height: 3px; background: var(--line);
  border-radius: 2px; overflow: hidden;
}
.yt-track-fill {
  height: 100%; background: var(--rouge);
  border-radius: 2px;
  width: 33%; /* mis à jour par JS */
  transition: width .3s ease;
}

.yt-playlist-link {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: var(--sans); font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--rouge); text-decoration: none;
  padding: 9px 18px; border: 2px solid var(--rouge);
  border-radius: 4px;
  transition: background var(--t), color var(--t);
}
.yt-playlist-link:hover { background: var(--rouge); color: #fff; }

/* Carte : le bouton remplace le lien */
.yt-card-link {
  display: flex; flex-direction: column; height: 100%; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer;
  text-align: left; color: inherit;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .yt-card { flex: 0 0 calc(50% - 10px); }
  .yt-nav-prev { left: -16px; }
  .yt-nav-next { right: -16px; }
}
@media (max-width: 580px) {
  .yt-card { flex: 0 0 85%; }
  .yt-nav { display: none; }
  .yt-footer { flex-direction: column; align-items: flex-start; }
  .yt-track { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   MODAL LECTEUR VIDÉO
═══════════════════════════════════════════════════════════════ */
.yt-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.yt-modal[hidden] { display: none; }

/* Fond flouté */
.yt-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 15, 30, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Boîte centrale */
.yt-modal-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 940px;
  background: #0a1628;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation: ytModalIn .22s ease;
}
@keyframes ytModalIn {
  from { opacity: 0; transform: scale(.96) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Header du modal */
.yt-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.yt-modal-title {
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  color: rgba(255,255,255,.75); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yt-modal-close {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.yt-modal-close:hover { background: var(--rouge); color: #fff; }

/* Player iframe 16/9 */
.yt-modal-player {
  position: relative; width: 100%; padding-top: 56.25%;
}
.yt-modal-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none; display: block;
}

/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER — Bande colorée avec pattern
═══════════════════════════════════════════════════════════════ */
.nl-band {
  background: var(--rouge);
  position: relative; overflow: hidden;
  padding: 72px 0;
}
.nl-band::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--pattern-blue);
  background-size: 240px;
  opacity: .14;
  mix-blend-mode: overlay;
}
.nl-band::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--orange);
}
.nl-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.nl-left-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.6); display: block; margin-bottom: 10px;
}
.nl-left h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 14px; }
.nl-left p  { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.75; }
.nl-form { display: flex; flex-direction: column; gap: 12px; }
.nl-row {
  display: flex; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.25);
  border-radius: 6px; overflow: hidden; transition: border-color var(--t);
}
.nl-row:focus-within { border-color: var(--white); background: rgba(255,255,255,.15); }
.nl-row input {
  flex: 1; padding: 14px 18px; background: none; border: none; outline: none;
  font-family: var(--sans); font-size: .88rem; color: var(--white); font-weight: 500;
}
.nl-row input::placeholder { color: rgba(255,255,255,.4); }
.nl-row button {
  padding: 14px 22px; background: var(--navy); color: var(--white);
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  transition: background var(--t); white-space: nowrap;
}
.nl-row button:hover { background: #003558; }
.nl-note { font-size: .68rem; color: rgba(255,255,255,.4); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER — Pattern + couleurs WATHI
═══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--navy);
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--pattern-blue);
  background-size: 260px; opacity: .07;
  pointer-events: none;
}

.ft-top {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px; padding: 64px 0 52px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Logo footer */
.ft-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ft-logo img { height: 48px; width: auto; border-radius: 6px; }
.ft-logo-fallback { font-size: 1.6rem; font-weight: 800; color: var(--white); letter-spacing: .04em; }
.ft-brand p {
  font-size: .82rem; color: rgba(255,255,255,.85);
  line-height: 1.8; max-width: 240px; margin-top: 4px;
}
.ft-socials { display: flex; gap: 8px; margin-top: 20px; }
.ft-soc {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85); transition: var(--t);
}
.ft-soc:hover { background: var(--rouge); border-color: var(--rouge); color: var(--white); }
.ft-soc svg { width: 14px; height: 14px; }
.ft-col h5 {
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 18px;
}
.ft-col ul { display: flex; flex-direction: column; gap: 10px; }
.ft-col a { font-size: .82rem; color: var(--white); transition: color var(--t); }
.ft-col a:hover { color: var(--sky); }
.ft-bottom {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; font-size: .68rem; color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.12);
}
/* Barre de couleurs en bas de footer */
.ft-color-bar {
  display: flex; height: 4px;
}
.ft-color-bar span { flex: 1; }
.ft-color-bar .c1 { background: var(--rouge); }
.ft-color-bar .c2 { background: var(--orange); }
.ft-color-bar .c3 { background: var(--teal); }
.ft-color-bar .c4 { background: var(--sky); }

/* ═══════════════════════════════════════════════════════════════
   SINGLE POST — Article moderne WATHI
═══════════════════════════════════════════════════════════════ */

/* Barre de lecture en haut */
.read-progress {
  position: fixed; top: 0; left: 0; z-index: 1100;
  height: 3px; width: 0; background: var(--orange);
  transition: width .1s linear;
}

/* ── Hero article ─────────────────────────────────────────────── */
.art-hero {
  position: relative; overflow: hidden;
  background: var(--navy);
  padding: 120px 0 60px;
  margin-top: 105px; /* compense header fixe */
}
.art-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.art-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(0,28,56,.92) 0%, rgba(0,70,113,.78) 55%, rgba(0,70,113,.45) 100%);
}
.art-hero-pattern {
  position: absolute; inset: 0;
  background-image: var(--pattern-blue); background-size: 260px;
  opacity: .06;
}
.art-hero-inner {
  position: relative; z-index: 2;
  max-width: 820px;
}

/* Fil d'Ariane */
.art-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .68rem; color: rgba(255,255,255,.4);
  margin-bottom: 24px;
}
.art-breadcrumb a { color: rgba(255,255,255,.45); transition: color var(--t); }
.art-breadcrumb a:hover { color: var(--orange); }
.art-breadcrumb span:last-child { color: rgba(255,255,255,.25); }

/* Badge catégorie */
.art-cat-badge {
  display: inline-block; margin-bottom: 18px;
  background: var(--rouge); color: var(--white);
  font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 20px;
  transition: background var(--t);
}
.art-cat-badge:hover { background: #c44438; }

/* Titre */
.art-title {
  color: var(--white); font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1.1; margin-bottom: 20px;
}

/* Chapô */
.art-chapo {
  font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; color: rgba(255,255,255,.6);
  line-height: 1.75; max-width: 680px; margin-bottom: 32px;
}

/* Méta date + temps de lecture */
.art-hero-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
}
.art-meta-item {
  display: flex; align-items: center; gap: 5px;
  font-size: .75rem; color: rgba(255,255,255,.5);
}
.art-meta-item svg { width: 13px; height: 13px; color: var(--orange); }
.art-meta-sep { color: rgba(255,255,255,.2); font-size: .75rem; }

/* ── Layout 2 colonnes ────────────────────────────────────────── */
.art-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 72px;
  padding: 56px 0 80px;
  align-items: start;
}

/* ── Corps de l'article ───────────────────────────────────────── */
.art-body { min-width: 0; }

/* Partage inline (mobile) */
.art-share-inline {
  display: none;
  align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 32px; padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  font-size: .72rem; color: var(--ink-3);
}

/* Contenu riche */
.art-content { font-family: var(--serif); font-size: 1.08rem; line-height: 1.9; color: var(--ink-2); }
.art-content > * + * { margin-top: 1.5em; }

/* Espacement forcé entre paragraphes consécutifs (couvre les anciens migrés sans blocs) */
.art-content p + p,
.art-content p + h2,
.art-content p + h3,
.art-content p + h4,
.art-content h2 + p,
.art-content h3 + p,
.art-content h4 + p { margin-top: 1.5em; }

/* Blocs Gutenberg dans le contenu d'article */
.art-content .wp-block-heading,
.art-content .wp-block-paragraph,
.art-content .wp-block-quote,
.art-content .wp-block-list,
.art-content .wp-block-image,
.art-content .wp-block-gallery,
.art-content .wp-block-buttons,
.art-content .wp-block-separator,
.art-content .wp-block-html { margin: 1.5em 0; }
.art-content .wp-block-heading:first-child,
.art-content .wp-block-paragraph:first-child { margin-top: 0; }

/* Cibler les blocs HTML wrappés (les vidéos par exemple ne doivent pas avoir double margin) */
.art-content .wathi-video { margin: 28px 0; }

/* Nettoyer les <p> vides résiduels héritage WPBakery (display:none si vraiment vide) */
.art-content p:empty { display: none; }

.art-content h2 {
  font-family: var(--sans); font-size: 1.08rem; font-weight: 800;
  color: var(--ink); line-height: 1.25;
  padding-top: .7em; margin-bottom: .35em;
  border-top: 3px solid var(--rouge);
  display: flex; gap: 8px; align-items: flex-start;
}
.art-content h2::before {
  content: ''; flex-shrink: 0;
  width: 3px; height: 1em; background: var(--orange);
  border-radius: 2px; margin-top: .2em;
}
.art-content h3 {
  font-family: var(--sans); font-size: .92rem; font-weight: 700;
  color: var(--navy); line-height: 1.35;
  padding-top: 0; margin-top: 1em; margin-bottom: .25em;
}
.art-content h4 {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  color: var(--ink); text-transform: uppercase; letter-spacing: .06em;
  margin-top: 1em; margin-bottom: .25em;
}

/* ── Encart [su_box] : resserrer l'espace en haut ─────────────
   Le plugin Shortcodes Ultimate met `padding: 1em` sur .su-box-content
   et wpautop laisse souvent une </p> orpheline en tête qui
   peut décaler le rendu. On force un padding réduit et zéro marge
   sur tous les enfants directs. */
.art-content .su-box {
  margin: 1.6em 0 !important;
  border-radius: 4px !important;
  overflow: hidden;
}
.art-content .su-box-title {
  padding: 10px 20px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3 !important;
}
.art-content .su-box-content {
  padding: 14px 20px 16px !important;
}
/* Zéro marge/padding sur TOUS les enfants directs (pas seulement le premier),
   le plugin gère déjà .su-u-trim>:first-child mais on s'assure ici. */
.art-content .su-box-content > * {
  margin-top: 0 !important;
}
/* Mais on remet un peu d'espace entre items consécutifs */
.art-content .su-box-content > * + * {
  margin-top: .8em !important;
}
/* H3/H2/H4 dans le su_box : neutralisés (pas de border-top, pas de barre) */
.art-content .su-box-content h2,
.art-content .su-box-content h3,
.art-content .su-box-content h4 {
  border-top: none !important;
  padding-top: 0 !important;
  display: block !important;
}
.art-content .su-box-content h2::before,
.art-content .su-box-content h3::before,
.art-content .su-box-content h4::before {
  display: none !important;
}
.art-content .su-box-content > :last-child { margin-bottom: 0 !important; }

/* Masquer les <p> totalement vides à l'intérieur (artefact wpautop) */
.art-content .su-box-content p:empty {
  display: none !important;
}
.art-content p { margin-bottom: 0; }
.art-content a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.art-content a:hover { color: var(--navy); }

.art-content blockquote {
  position: relative;
  margin: 2.5em 0; padding: 28px 32px 28px 36px;
  border-left: 4px solid var(--rouge);
  background: linear-gradient(135deg, var(--paper) 0%, #fff 100%);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.art-content blockquote::before {
  content: '\201C'; position: absolute; top: -8px; left: 24px;
  font-family: var(--serif); font-size: 5rem; color: var(--rouge);
  opacity: .15; line-height: 1;
}
.art-content blockquote p {
  font-family: var(--serif); font-style: italic; font-size: 1.12rem;
  color: var(--ink); line-height: 1.75; margin: 0;
}
.art-content blockquote cite {
  display: block; margin-top: 12px;
  font-size: .78rem; font-style: normal; font-weight: 600;
  color: var(--ink-3); letter-spacing: .04em;
}

.art-content ul, .art-content ol {
  padding-left: 0; display: flex; flex-direction: column; gap: 10px;
}
.art-content ul li { list-style: none; padding-left: 22px; position: relative; }
.art-content ul li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 8px; height: 2px; background: var(--teal); border-radius: 1px;
}
.art-content ol { counter-reset: ol-counter; }
.art-content ol li { list-style: none; padding-left: 28px; position: relative; counter-increment: ol-counter; }
.art-content ol li::before {
  content: counter(ol-counter); position: absolute; left: 0; top: .1em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--sans); font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.art-content img { width: 100%; border-radius: 8px; margin: 2em 0; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.art-content figure { margin: 2em 0; }
.art-content figcaption { font-size: .78rem; color: var(--ink-3); text-align: center; margin-top: 8px; font-style: italic; }

.art-content table {
  width: 100%; border-collapse: collapse; margin: 2em 0;
  font-size: .9rem;
}
.art-content th {
  background: var(--navy); color: var(--white);
  padding: 12px 16px; text-align: left; font-weight: 700; font-size: .8rem;
}
.art-content td { padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.art-content tr:hover td { background: var(--paper); }

/* Tags */
.art-tags {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
}
.art-tags-label { font-size: .68rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
.art-tag {
  padding: 5px 14px; border: 1px solid var(--line); border-radius: 20px;
  font-size: .7rem; color: var(--ink-3); transition: var(--t);
}
.art-tag:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Partage bas de page */
.art-share-bottom {
  margin-top: 48px; padding: 28px 32px;
  background: var(--paper); border-radius: 12px;
  border: 1px solid var(--line);
}
.art-share-bottom-label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .9rem; color: var(--ink);
  margin-bottom: 16px;
}
.art-share-bottom-label svg { color: var(--teal); }
.art-share-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Boutons partage */
.art-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 6px;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  cursor: pointer; border: none; text-decoration: none;
  transition: opacity var(--t), transform var(--t);
}
.art-share-btn:hover { opacity: .85; transform: translateY(-1px); }
.art-share-x    { background: #000;    color: #fff; }
.art-share-li   { background: #0077b5; color: #fff; }
.art-share-fb   { background: #1877f2; color: #fff; }
.art-share-wa   { background: #25D366; color: #fff; }
.art-share-wa:hover { background: #1ebe5b; }
.art-share-copy { background: var(--navy); color: #fff; }
.art-share-vertical { display: flex; flex-direction: column; gap: 8px; }
.art-share-vertical .art-share-btn { justify-content: flex-start; }

/* ── Sidebar article ──────────────────────────────────────────── */
.art-sidebar { position: sticky; top: 120px; }
.aside-block { margin-bottom: 28px; }
.aside-block-title {
  font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); padding-bottom: 10px; border-bottom: 2px solid var(--teal); margin-bottom: 16px;
}
.aside-item { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.aside-item:last-child { border-bottom: none; }
.aside-item a { font-size: .84rem; color: var(--ink-2); line-height: 1.4; display: block; margin-bottom: 4px; transition: color var(--t); }
.aside-item a:hover { color: var(--navy); }
.aside-item time { font-size: .65rem; color: var(--ink-3); }

/* Table des matières */
.toc-nav { display: flex; flex-direction: column; gap: 4px; }
.toc-nav a {
  font-size: .8rem; color: var(--ink-3); padding: 5px 10px;
  border-left: 2px solid var(--line); transition: var(--t);
  display: block; line-height: 1.4;
}
.toc-nav a:hover, .toc-nav a.active {
  color: var(--navy); border-left-color: var(--teal); background: var(--paper);
}
.toc-nav a.toc-h3 { padding-left: 22px; font-size: .75rem; }

/* ── Articles similaires ──────────────────────────────────────── */
.art-related {
  background: var(--paper); padding: 72px 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.art-related::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--pattern-gray); background-size: 200px; opacity: .04;
}
.art-related-head { position: relative; z-index: 1; margin-bottom: 36px; }
.art-related-head .s-head-label { display: block; margin-bottom: 8px; }
.art-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; position: relative; z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   ARCHIVE / INDEX
═══════════════════════════════════════════════════════════════ */
.arch-header {
  background: var(--navy); padding: 120px 0 52px;
  position: relative; overflow: hidden;
}
.arch-header::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--pattern-blue); background-size: 280px; opacity: .05;
}
.arch-header-inner { position: relative; z-index: 1; }
.arch-header h1 { color: var(--white); font-weight: 800; margin-top: 10px; }
.arch-header p { color: rgba(255,255,255,.4); margin-top: 10px; font-size: .92rem; }
.arch-content { padding: 52px 0; }

/* Cards grille archive */
.arch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.arch-card {
  background: var(--white); border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform var(--t), box-shadow var(--t);
  text-decoration: none; display: flex; flex-direction: column;
}
.arch-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,70,113,.12); }
.arch-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--paper); }
.arch-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.arch-card:hover .arch-card-img img { transform: scale(1.05); }
.arch-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.arch-card-cat { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; display: block; }
.arch-card-body h3 { font-size: 1rem; line-height: 1.3; margin-bottom: 8px; transition: color var(--t); }
.arch-card:hover h3 { color: var(--navy); }
.arch-card-body p { font-size: .82rem; color: var(--ink-3); line-height: 1.6; flex: 1; }
.arch-card-meta { font-size: .68rem; color: var(--ink-3); display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 48px; }
.pagination .page-numbers {
  min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: .82rem; font-weight: 600;
  border: 1px solid var(--line); color: var(--ink-3); background: var(--white); transition: var(--t);
}
.pagination .page-numbers:hover, .pagination .current { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ── 404 ─────────────────────────────────────────────────────── */
.not-found { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 24px; }
.not-found-n { font-family: var(--sans); font-size: clamp(6rem, 18vw, 12rem); font-weight: 900; color: var(--paper); display: block; line-height: 1; }
.not-found h2 { margin-bottom: 12px; }
.not-found p { max-width: 340px; margin: 0 auto 28px; color: var(--ink-3); font-size: .88rem; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pub-card { flex: 0 0 250px; }
  .evt-grid { grid-template-columns: 1fr 1fr; }
  .nl-inner { grid-template-columns: 1fr; gap: 40px; }
  .ft-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .post-body-wrap { grid-template-columns: 1fr; gap: 48px; }
  .post-sidebar { position: static; }
  .carousel-prev { left: 4px; }
  .carousel-next { right: 4px; }
  .arch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hd-top, .hd-nav, .hd-search-btn, .hd-don-btn { display: none; }
  .hd-burger { display: flex; }
  .hd-main .wrap { height: 64px; gap: 16px; }
  .hero-slider { margin-top: 64px; height: min(85vh, 560px); min-height: 420px; }
  .slide-inner h2 { font-size: 1.7rem; }
  .slider-prev { left: 12px; }
  .slider-next { right: 12px; }
  .pub-carousel-wrap { padding: 0; }
  .pub-card { flex: 0 0 236px; }
  .carousel-prev, .carousel-next { display: none; }
  .evt-grid { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
  .nl-inner { gap: 32px; }
  .ft-top { grid-template-columns: 1fr; gap: 32px; }
  .ft-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .arch-grid { grid-template-columns: 1fr; }
  .hd-search-btn { display: flex; }
  .hd-actions { display: flex; }

  /* Article mobile */
  .art-hero { margin-top: 64px; padding: 80px 0 40px; }
  .art-layout { grid-template-columns: 1fr; gap: 40px; }
  .art-sidebar { position: static; }
  .art-share-inline { display: flex; }
  .art-related-grid { grid-template-columns: 1fr; }
  .art-content h2 { font-size: 1.25rem; }
  .nl-inner { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   INITIATIVE ÉLECTION GHANA 2024
   Design éditorial — Charte WATHI × couleurs Ghana
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────── */
.gh-hero {
  position: relative;
  background: var(--navy);
  margin-top: 105px;
  overflow: hidden;
}

/* Couche 1 : Pattern-blue en fond */
.gh-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url('/wp-content/uploads/2021/02/Pattern-blue.png');
  background-size: 600px;
  background-repeat: repeat;
  opacity: .65;
}

/* Couche 2 : Lueur colorée (Ghana vert/rouge) */
.gh-hero-texture { display: none; }
.gh-hero-glow {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 60% 70% at 85% 110%, rgba(0,107,63,.45) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% -10%, rgba(206,17,38,.18) 0%, transparent 55%);
}

/* Grille hero : texte gauche + panneau pays droit */
.gh-hero-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: center;
  padding: 80px 0 72px;
}

/* Colonne principale */
.gh-hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.gh-label-initiative {
  font-family: var(--sans);
  font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.gh-label-sep { color: rgba(255,255,255,.2); }
.gh-label-date {
  font-family: var(--sans);
  font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  color: #FCD116;
  padding: 3px 10px;
  border: 1px solid rgba(252,209,22,.35);
  border-radius: 3px;
}

.gh-hero-title {
  font-family: var(--sans);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 800; line-height: 1.05;
  color: #fff;
  margin-bottom: 24px;
}

.gh-hero-desc {
  font-family: var(--serif);
  font-size: 1.08rem; line-height: 1.8;
  color: rgba(255,255,255,.55);
  max-width: 580px;
  margin-bottom: 40px;
}

/* Stats du hero */
.gh-hero-stats {
  display: flex; align-items: center; gap: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.gh-stat { }
.gh-stat strong {
  display: block; font-size: 2.1rem; font-weight: 800;
  color: #FCD116; line-height: 1;
}
.gh-stat span {
  display: block; margin-top: 5px;
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.32);
}
.gh-stat-sep { width: 1px; height: 44px; background: rgba(255,255,255,.1); flex-shrink: 0; }

/* Panneau pays droit */
.gh-hero-aside { align-self: stretch; display: flex; align-items: center; }

/* Fiche pays */
.gh-country-badge {
  width: 100%;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
}

/* Zone drapeau : ratio 3/2, image couvre tout */
.gh-country-badge-flag {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(0,0,0,.2);
}
.gh-country-badge-flag img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Dégradé en bas pour faire transition avec le corps */
.gh-country-badge-flag::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to top, rgba(4,18,38,.85) 0%, transparent 100%);
  pointer-events: none;
}
/* Nom du pays en overlay sur le drapeau */
.gh-country-name {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 12px 18px;
  font-family: var(--sans); font-size: .82rem; font-weight: 800;
  color: #fff; text-transform: uppercase; letter-spacing: .1em;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  margin: 0;
}

/* Corps : liste des faits */
.gh-country-badge-body { padding: 4px 18px 18px; }
.gh-country-facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.gh-country-facts li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.gh-country-facts li:last-child { border-bottom: none; }
.gh-country-facts span { font-size: .72rem; color: rgba(255,255,255,.38); }
.gh-country-facts strong { font-size: .78rem; color: rgba(255,255,255,.82); font-weight: 600; text-align: right; }

/* Barre WATHI bas */
.gh-wathi-bar { display: flex; height: 4px; }
.gh-wathi-bar span { flex: 1; }


/* ─────────────────────────────────────────────────────────────
   INTRO BILINGUE
───────────────────────────────────────────────────────────── */
.gh-intro {
  background: #fff;
  padding: 72px 0 0;
  border-bottom: 1px solid var(--line);
}

.gh-intro-inner { display: flex; flex-direction: column; gap: 40px; }

/* En-tête : label + titre + boutons langue */
.gh-intro-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px 24px;
  align-items: end;
}
.gh-intro-header .s-head-label { grid-column: 1; }
.gh-intro-header h2 {
  grid-column: 1;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800; line-height: 1.2;
  margin: 0;
}
.gh-lang-switch {
  grid-column: 2; grid-row: 1 / 3;
  display: flex; align-self: end; gap: 4px;
}
.gh-lang-btn {
  padding: 7px 16px;
  font-family: var(--sans); font-size: .7rem; font-weight: 800;
  letter-spacing: .08em; border-radius: 4px;
  border: 2px solid var(--line); color: var(--ink-3);
  background: none; cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.gh-lang-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.gh-lang-btn:hover:not(.active) { border-color: var(--navy); color: var(--navy); }

/* Corps bilingue */
.gh-intro-body {
  max-width: 800px;
}
.gh-lang-content p {
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.9;
  color: var(--ink-2); margin-bottom: 1em;
}
.gh-lang-content p:last-child { margin-bottom: 0; }

/* Navigation rapide — 4 cartes couleur */
.gh-quicknav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.gh-quicknav-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 24px;
  border-right: 1px solid var(--line);
  border-top: 4px solid var(--qn-color, var(--navy));
  transition: background var(--t);
  cursor: pointer; text-decoration: none; color: inherit;
}
.gh-quicknav-item:last-child { border-right: none; }
.gh-quicknav-item:hover { background: var(--paper); }

.gh-quicknav-count {
  font-family: var(--sans); font-size: 1.9rem; font-weight: 800;
  color: var(--qn-color, var(--navy)); line-height: 1;
}
.gh-quicknav-label {
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  color: var(--ink-2); line-height: 1.3;
}
.gh-quicknav-arrow {
  margin-top: auto; color: var(--ink-3);
  transition: transform var(--t);
}
.gh-quicknav-item:hover .gh-quicknav-arrow { transform: translateX(4px); color: var(--qn-color, var(--navy)); }


/* ─────────────────────────────────────────────────────────────
   SECTIONS THÉMATIQUES
───────────────────────────────────────────────────────────── */
.gh-content {
  position: relative;
  padding: 64px 0 80px;
  background: var(--paper);
}

/* Pattern WATHI en filigrane */
.gh-content::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--pattern-gray);
  background-size: 220px;
  opacity: .04;
}

/* Barre onglets */
.gh-tabs-wrap {
  position: relative; z-index: 1;
  margin-bottom: 36px;
}
.gh-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--line);
}
.gh-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  color: var(--ink-3);
  background: none; border: none; cursor: pointer;
  position: relative; white-space: nowrap;
  transition: color var(--t);
}
/* Indicateur coloré — barre en bas */
.gh-tab::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px;
  background: var(--tc, var(--navy));
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
  border-radius: 2px 2px 0 0;
}
.gh-tab:hover { color: var(--ink); }
.gh-tab:hover::after { transform: scaleX(1); opacity: .4; }
.gh-tab.is-active { color: var(--tc, var(--navy)); }
.gh-tab.is-active::after { transform: scaleX(1); opacity: 1; }

/* Dot coloré (remplace les emojis) */
.gh-tab-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tc, var(--navy));
  flex-shrink: 0;
  opacity: .4;
  transition: opacity var(--t);
}
.gh-tab.is-active .gh-tab-dot { opacity: 1; }

.gh-tab-count {
  font-size: .6rem; font-weight: 800;
  background: var(--line-2); color: var(--ink-3);
  padding: 2px 7px; border-radius: 10px; min-width: 22px; text-align: center;
  transition: background var(--t), color var(--t);
}
.gh-tab.is-active .gh-tab-count {
  background: var(--tc, var(--navy)); color: #fff;
}

/* Panneaux */
.gh-panel { display: none; position: relative; z-index: 1; }
.gh-panel.is-active { display: block; }


/* ── Grille documents (contexte, programmes, opinions) ─────── */
.gh-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gh-doc-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease;
}
.gh-doc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.1);
}

/* Image du document */
.gh-doc-visual {
  aspect-ratio: 16/10; overflow: hidden; position: relative;
  background: var(--line);
}
.gh-doc-visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.gh-doc-card:hover .gh-doc-visual img { transform: scale(1.05); }

/* Placeholder avec pattern WATHI */
.gh-doc-nophoto {
  width: 100%; height: 100%;
  background: var(--dc, var(--navy));
  position: relative; overflow: hidden;
}
.gh-doc-nophoto-pattern {
  position: absolute; inset: 0;
  background-image: var(--pattern-blue);
  background-size: 180px;
  opacity: .12;
}

/* Tag catégorie sur l'image */
.gh-doc-cat-tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--dc, var(--navy)); color: #fff;
  font-family: var(--sans); font-size: .55rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px;
}

/* Corps texte */
.gh-doc-body {
  padding: 18px 20px 20px;
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  border-top: 3px solid var(--dc, var(--navy));
}
.gh-doc-body h3 {
  font-family: var(--sans); font-size: .88rem; font-weight: 700;
  line-height: 1.4; color: var(--ink); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s;
}
.gh-doc-card:hover h3 { color: var(--dc, var(--navy)); }

.gh-doc-foot {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--line-2);
  padding-top: 10px;
}
.gh-doc-meta {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.gh-doc-author {
  font-size: .65rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gh-doc-date { font-size: .6rem; color: var(--ink-3); }

.gh-doc-read {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-family: var(--sans); font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--dc, var(--navy));
  transition: gap .2s;
}
.gh-doc-card:hover .gh-doc-read { gap: 8px; }


/* ── Grille candidats ──────────────────────────────────────── */
.gh-candidates-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.gh-candidate-card {
  border-radius: 8px; overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease;
}
.gh-candidate-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}

/* Photo candidat — format portrait 3/4 */
.gh-candidate-photo {
  aspect-ratio: 3/4; overflow: hidden; position: relative;
  background: var(--navy);
}
.gh-candidate-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .5s ease;
}
.gh-candidate-card:hover .gh-candidate-photo img { transform: scale(1.04); }

/* Aucune photo : fond pattern WATHI */
.gh-candidate-nophoto {
  width: 100%; height: 100%;
  background: var(--navy);
  background-image: var(--pattern-blue);
  background-size: 200px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 20px;
  position: relative;
}
.gh-candidate-nophoto::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.3);
}
.gh-candidate-nophoto svg { position: relative; z-index: 1; }

.gh-candidate-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
  pointer-events: none;
}

/* Badge "Programme disponible" */
.gh-candidate-has-prog {
  position: absolute; bottom: 10px; left: 10px;
  background: var(--teal); color: #fff;
  font-family: var(--sans); font-size: .54rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px; z-index: 1;
}

/* Infos candidat */
.gh-candidate-info {
  padding: 16px 16px 18px;
  border-top: 3px solid var(--rouge);
  flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.gh-candidate-info h3 {
  font-family: var(--sans); font-size: .85rem; font-weight: 800;
  line-height: 1.3; color: var(--ink);
  transition: color .2s;
}
.gh-candidate-card:hover h3 { color: var(--navy); }

.gh-candidate-parti {
  font-size: .65rem; color: var(--ink-3); font-weight: 500;
}
.gh-candidate-lire {
  display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 8px;
  font-family: var(--sans); font-size: .63rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--rouge);
  transition: gap .2s;
}
.gh-candidate-card:hover .gh-candidate-lire { gap: 8px; }


/* ── État vide ─────────────────────────────────────────────── */
.gh-empty {
  text-align: center; padding: 72px 24px; color: var(--ink-3);
  background: #fff; border-radius: 8px; border: 1px solid var(--line);
}
.gh-empty-icon {
  display: flex; justify-content: center; margin-bottom: 16px; color: var(--line);
}
.gh-empty p { font-family: var(--serif); font-size: 1rem; }


/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .gh-hero-grid { grid-template-columns: 1fr 320px; }
  .gh-candidates-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .gh-docs-grid { grid-template-columns: repeat(2, 1fr); }
  .gh-candidates-grid { grid-template-columns: repeat(2, 1fr); }
  .gh-quicknav { grid-template-columns: repeat(2, 1fr); }
  .gh-quicknav-item:nth-child(2) { border-right: none; }
  .gh-quicknav-item:nth-child(n+3) { border-top-width: 1px; border-bottom: 1px solid var(--line); }
}
@media (max-width: 768px) {
  .gh-hero { margin-top: 64px; }
  .gh-hero-grid { grid-template-columns: 1fr; padding: 56px 0 48px; }
  .gh-hero-aside { display: none; }
  .gh-hero-stats { gap: 18px; flex-wrap: wrap; }
  .gh-tabs { flex-wrap: wrap; gap: 0; }
  .gh-tab { padding: 10px 16px; font-size: .73rem; }
  .gh-intro-header { grid-template-columns: 1fr; }
  .gh-lang-switch { grid-column: 1; grid-row: auto; }
}
@media (max-width: 580px) {
  .gh-docs-grid { grid-template-columns: 1fr; }
  .gh-candidates-grid { grid-template-columns: repeat(2, 1fr); }
  .gh-quicknav { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   WP BAKERY COMPAT — Styles des éléments rendus par le thème
═══════════════════════════════════════════════════════════════ */

/* Vidéo responsive 16/9 */
.vc-video-wrap {
  position: relative; width: 100%; padding-top: 56.25%;
  margin: 2em 0; border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.vc-video-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none;
}

/* Image */
.vc-img { margin: 1.5em 0; }
.vc-img img { border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }

/* Séparateur */
.vc-sep { border: none; border-top: 1px solid var(--line); margin: 2em 0; }

/* Accordion toggle */
.vc-toggle {
  border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; margin: 1em 0;
}
.vc-toggle summary {
  padding: 14px 20px; font-family: var(--sans); font-weight: 700;
  font-size: .9rem; cursor: pointer; background: var(--paper);
  list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.vc-toggle summary::after {
  content: '+'; font-size: 1.2rem; color: var(--teal); flex-shrink: 0;
}
.vc-toggle[open] summary::after { content: '−'; }
.vc-toggle-body { padding: 18px 20px; font-family: var(--serif); font-size: 1rem; line-height: 1.8; }

/* Tabs simples */
.vc-tabs-wrap { margin: 2em 0; }
.vc-tab { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.vc-tab-title {
  padding: 12px 18px; background: var(--paper);
  font-family: var(--sans); font-weight: 700; font-size: .85rem;
  color: var(--navy); border-bottom: 1px solid var(--line);
}
.vc-tab-body { padding: 18px 20px; font-family: var(--serif); font-size: 1rem; line-height: 1.8; }

/* ═══════════════════════════════════════════════════════════════
   SHORTCODES ULTIMATE — Override styles modernes WATHI
═══════════════════════════════════════════════════════════════ */

/* ── su_box ──────────────────────────────────────────────────── */
.su-box {
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin: 2em 0 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.05) !important;
  font-family: var(--sans) !important;
}

/* Titre de la box */
.su-box-title {
  font-family: var(--sans) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 14px 22px !important;
  border-bottom: none !important;
  position: relative;
}
/* Ligne décorative à gauche du titre */
.su-box-title::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: rgba(255,255,255,.4);
  border-radius: 2px;
}

/* Contenu de la box */
.su-box-content {
  background: #fff !important;
  padding: 24px 28px !important;
  font-family: var(--serif) !important;
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: var(--ink-2) !important;
  border: none !important;
}
.su-box-content p { margin-bottom: .9em; }
.su-box-content p:last-child { margin-bottom: 0; }

/* ── su_note / su_highlight ─────────────────────────────────── */
.su-note {
  border: none !important;
  border-left: 4px solid var(--teal) !important;
  border-radius: 0 8px 8px 0 !important;
  background: var(--paper) !important;
  padding: 18px 22px !important;
  margin: 1.8em 0 !important;
  font-family: var(--serif) !important;
  font-size: .98rem !important;
  color: var(--ink-2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
}
.su-note-inner { padding: 0 !important; background: none !important; border: none !important; }

/* ── su_quote ────────────────────────────────────────────────── */
.su-quote {
  border: none !important;
  border-left: 4px solid var(--rouge) !important;
  background: linear-gradient(135deg, var(--paper) 0%, #fff 100%) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 28px 32px !important;
  margin: 2em 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
  position: relative;
}
.su-quote::before {
  content: '\201C';
  position: absolute; top: -8px; left: 22px;
  font-family: var(--serif); font-size: 5rem;
  color: var(--rouge); opacity: .12; line-height: 1;
  pointer-events: none;
}
.su-quote-cite {
  font-family: var(--sans) !important;
  font-size: .75rem !important; font-weight: 700 !important;
  color: var(--ink-3) !important;
  letter-spacing: .06em !important;
  margin-top: 12px !important;
}

/* ── su_spoiler ──────────────────────────────────────────────── */
.su-spoiler {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin: 1.5em 0 !important;
}
.su-spoiler-title {
  background: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  padding: 14px 20px !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
}
.su-spoiler-title:hover { background: #f0ede9 !important; }
.su-spoiler-content {
  font-family: var(--serif) !important;
  font-size: .98rem !important;
  color: var(--ink-2) !important;
  padding: 20px 22px !important;
  border: none !important;
  background: #fff !important;
  line-height: 1.8 !important;
}

/* ── su_tabs ─────────────────────────────────────────────────── */
.su-tabs-nav {
  border-bottom: 2px solid var(--line) !important;
  gap: 0 !important;
  background: none !important;
}
.su-tabs-nav span {
  font-family: var(--sans) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: var(--ink-3) !important;
  padding: 10px 20px !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  background: none !important;
  border-radius: 0 !important;
  transition: color .2s ease, border-color .2s ease !important;
}
.su-tabs-nav span.sui-active,
.su-tabs-nav span:hover {
  color: var(--rouge) !important;
  border-bottom-color: var(--rouge) !important;
  background: none !important;
}
.su-tab-content {
  font-family: var(--serif) !important;
  font-size: 1rem !important;
  color: var(--ink-2) !important;
  line-height: 1.85 !important;
  padding: 22px 4px !important;
  border: none !important;
}

/* ── su_divider ──────────────────────────────────────────────── */
.su-divider {
  border-color: var(--line) !important;
  margin: 2em 0 !important;
}
.su-divider-text {
  background: var(--white) !important;
  color: var(--ink-3) !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 0 16px !important;
}

/* ── su_button ───────────────────────────────────────────────── */
.su-button {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  border-radius: 6px !important;
  border: none !important;
  transition: opacity .2s ease, transform .2s ease !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.su-button:hover {
  opacity: .88 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.15) !important;
}



/* ═══════════════════════════════════════════════════════════════
   PAGE NOUS SOUTENIR
═══════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.don-hero {
  position: relative;
  margin-top: 105px;
  background: var(--navy);
  overflow: hidden;
  padding: 100px 0 0;
}
.don-hero-pattern {
  position: absolute; inset: 0;
  background-image: url('/wp-content/uploads/2021/02/Pattern-blue.png');
  background-size: 520px;
  opacity: .055;
  pointer-events: none;
}
.don-hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: start;
  padding-bottom: 80px;
}
.don-eyebrow {
  font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange); display: block; margin-bottom: 24px;
}
.don-hero-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700; line-height: 1.12;
  color: var(--white); margin-bottom: 28px;
}
.don-hero-title em {
  font-style: italic;
  color: var(--orange);
}
.don-hero-rule {
  width: 48px; height: 3px;
  background: var(--orange);
  margin-bottom: 24px;
}
.don-hero-desc {
  font-size: .95rem; line-height: 1.8;
  color: rgba(255,255,255,.58);
  max-width: 520px; margin-bottom: 36px;
}
.don-hero-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  transition: border-color .2s, color .2s;
}
.don-hero-cta:hover { color: var(--orange); border-color: var(--orange); }
.don-hero-cta-arrow { font-size: 1.1rem; }

/* Stats colonne droite */
.don-hero-stats {
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: 40px;
  gap: 0;
}
.don-hero-stat {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.don-hero-stat:last-child { border-bottom: none; }
.don-hero-stat-num {
  font-family: var(--serif);
  font-size: 3rem; font-weight: 700; line-height: 1;
  color: var(--white);
  display: block;
}
.don-hero-stat-unit {
  font-size: 1.6rem; font-weight: 700;
  color: var(--orange);
}
.don-hero-stat-label {
  display: block;
  font-size: .72rem; letter-spacing: .08em;
  color: rgba(255,255,255,.38);
  margin-top: 6px;
}

.don-wathi-bar {
  display: flex; height: 4px;
  position: relative; z-index: 1;
}
.don-wathi-bar span { flex: 1; }

/* ── Engagements ─────────────────────────────────────────── */
.don-engagements {
  padding: 80px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.don-eng-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.don-eng-item {
  padding: 0 40px 0 0;
  border-right: 1px solid var(--line);
  margin-right: 40px;
}
.don-eng-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.don-eng-num {
  display: block;
  font-size: .62rem; font-weight: 700; letter-spacing: .18em;
  color: var(--teal); margin-bottom: 16px;
}
.don-eng-item h3 {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 600;
  color: var(--ink); margin-bottom: 12px; line-height: 1.3;
}
.don-eng-item p {
  font-size: .875rem; line-height: 1.75;
  color: var(--ink-3);
}

/* ── Méthodes de don — Accordéon ─────────────────────────── */
.don-methodes {
  padding: 80px 0;
  background: var(--white);
}
.don-methodes-head {
  max-width: 600px; margin-bottom: 56px;
}
.don-methodes-label {
  display: block;
  font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 14px;
}
.don-methodes-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700; color: var(--ink);
  margin-bottom: 12px; line-height: 1.15;
}
.don-methodes-sub {
  font-size: .9rem; color: var(--ink-3); line-height: 1.7;
}

/* ── Layout tabs paiement ───────────────────────────────── */
.don-pay-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

/* Colonne gauche — navigation */
.don-pay-nav {
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}

.don-pay-tab {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 20px 24px 24px;
  text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--line);
  cursor: pointer; font-family: var(--sans);
  position: relative;
  transition: background .15s;
}
.don-pay-tab:last-child { border-bottom: none; }
.don-pay-tab:hover { background: rgba(0,0,0,.025); }
.don-pay-tab.is-active { background: var(--white); }
.don-pay-tab.is-active::after {
  content: '';
  position: absolute; right: -1px; top: 0; bottom: 0;
  width: 2px; background: var(--white);
}

.don-pay-tab-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  opacity: 0; transition: opacity .2s;
}
.don-pay-tab:hover .don-pay-tab-accent,
.don-pay-tab.is-active .don-pay-tab-accent { opacity: 1; }

.don-pay-tab-content { display: flex; flex-direction: column; gap: 4px; }
.don-pay-tab-content strong {
  font-size: .95rem; font-weight: 800; color: var(--ink); line-height: 1;
}
.don-pay-tab-content span {
  font-size: .7rem; color: var(--ink-3); line-height: 1.4;
}

.don-pay-tab-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.don-pay-tab-chips span {
  font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--white); color: var(--ink-2);
  border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 20px;
}
.don-pay-tab.is-active .don-pay-tab-chips span {
  background: var(--paper);
}

/* Colonne droite — panneaux */
.don-pay-panels { background: var(--white); }

.don-pay-panel { display: none; }
.don-pay-panel.is-active { display: block; }

.don-pay-panel-header {
  padding: 36px 40px 28px;
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--pc, var(--navy));
}
.don-pay-panel-label {
  font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); display: block; margin-bottom: 8px;
}
.don-pay-panel-title {
  font-family: var(--serif);
  font-size: 1.8rem; font-weight: 700; color: var(--ink);
  line-height: 1; margin-bottom: 14px;
}
.don-pay-panel-desc {
  font-size: .875rem; line-height: 1.7; color: var(--ink-3);
  max-width: 520px;
}

.don-pay-panel-body {
  padding: 32px 40px 36px;
}

/* Étapes numérotées */
.don-steps {
  list-style: none; counter-reset: steps;
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 32px;
}
.don-steps li {
  counter-increment: steps;
  display: flex; gap: 16px; align-items: flex-start;
  font-size: .875rem; line-height: 1.65; color: var(--ink-2);
}
.don-steps li::before {
  content: counter(steps);
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.don-steps li a { color: var(--teal); }

.don-method-intro { display: none; }

/* Étapes numérotées */
.don-steps {
  list-style: none; counter-reset: steps;
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 28px;
  max-width: 680px;
}
.don-steps li {
  counter-increment: steps;
  display: flex; gap: 16px; align-items: flex-start;
  font-size: .875rem; line-height: 1.65; color: var(--ink-2);
}
.don-steps li::before {
  content: counter(steps);
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-size: .65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.don-steps li a { color: var(--teal); }

/* Champ copiable */
.don-copy-field {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 6px; padding: 8px 12px;
  font-family: monospace; font-size: .875rem;
  color: var(--ink); font-weight: 600;
  margin-top: 8px;
}
.don-copy-btn {
  font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal); background: none; border: none; cursor: pointer;
  padding: 0; font-family: var(--sans);
  transition: color .15s;
}
.don-copy-btn:hover { color: var(--navy); }

/* Tableau coordonnées bancaires */
.don-bank-table {
  border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
  margin: 20px 0 20px;
  max-width: 560px;
}
.don-bank-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 20px; gap: 16px;
}
.don-bank-row:not(:last-child) { border-bottom: 1px solid var(--line-2); }
.don-bank-key { font-size: .8rem; color: var(--ink-3); flex-shrink: 0; }
.don-bank-val { font-size: .875rem; color: var(--ink); font-weight: 600; text-align: right; }

.don-method-note {
  font-size: .8rem; color: var(--ink-3); font-style: italic;
  margin-bottom: 20px; max-width: 560px;
}
.don-method-email {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.don-method-email:hover { color: var(--teal); border-color: var(--teal); }
.don-link { color: var(--teal); font-weight: 600; }

/* ── Garanties ───────────────────────────────────────────── */
.don-garanties {
  background: var(--navy);
  padding: 56px 0;
}
.don-garanties-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.don-garantie {
  display: flex; gap: 20px; align-items: flex-start;
}
.don-garantie-num {
  font-size: 1.4rem; color: var(--orange); flex-shrink: 0;
  line-height: 1.3;
}
.don-garantie strong {
  display: block;
  font-size: .875rem; font-weight: 700; color: var(--white);
  margin-bottom: 8px;
}
.don-garantie p {
  font-size: .8rem; line-height: 1.7; color: rgba(255,255,255,.45);
}

/* ── Contact ─────────────────────────────────────────────── */
.don-contact {
  padding: 80px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.don-contact-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: center;
}
.don-contact-text .don-methodes-label { margin-bottom: 10px; }
.don-contact-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 700; color: var(--ink);
  margin-bottom: 14px;
}
.don-contact-text p {
  font-size: .9rem; line-height: 1.75; color: var(--ink-3);
  margin-bottom: 28px; max-width: 480px;
}

.don-contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: 8px;
  padding: 28px;
  text-align: center;
}
.don-contact-card-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); display: block; margin-bottom: 12px;
}
.don-contact-email {
  display: block;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
  color: var(--navy); text-decoration: none;
  margin-bottom: 12px;
  word-break: break-all;
}
.don-contact-email:hover { color: var(--teal); }
.don-contact-card-note {
  font-size: .72rem; color: var(--ink-3);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .don-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .don-hero-stats { flex-direction: row; border-left: none; border-top: 1px solid rgba(255,255,255,.12); padding-left: 0; padding-top: 32px; }
  .don-hero-stat { flex: 1; border-bottom: none; padding: 0 24px; border-right: 1px solid rgba(255,255,255,.1); }
  .don-hero-stat:last-child { border-right: none; }
  .don-garanties-inner { grid-template-columns: 1fr; gap: 28px; }
  .don-contact-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .don-hero { margin-top: 64px; padding: 64px 0 0; }
  .don-eng-grid { grid-template-columns: 1fr; gap: 32px; }
  .don-eng-item { border-right: none; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 32px; }
  .don-eng-item:last-child { border-bottom: none; padding-bottom: 0; }
  .don-hero-stats { flex-direction: column; gap: 0; }
  .don-hero-stat { border-right: none; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  /* Tabs paiement : empilement vertical sur mobile */
  .don-pay-layout { grid-template-columns: 1fr; }
  .don-pay-nav { border-right: none; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; }
  .don-pay-tab { flex-direction: row; align-items: center; border-bottom: none; border-right: 1px solid var(--line); min-width: 140px; padding: 16px; }
  .don-pay-tab:last-child { border-right: none; }
  .don-pay-tab.is-active::after { right: 0; top: auto; bottom: -1px; left: 0; width: auto; height: 2px; }
  .don-pay-tab-chips { display: none; }
  .don-pay-panel-header { padding: 24px; }
  .don-pay-panel-body { padding: 20px 24px 28px; }
}



/* ═══════════════════════════════════════════════════════════════
   PAGE PROJET — Design premium éditorial
═══════════════════════════════════════════════════════════════ */

/* ─── HERO ──────────────────────────────────────────────────── */
.prj-hero {
  position: relative; overflow: hidden;
  min-height: 82vh; display: flex; flex-direction: column; justify-content: flex-end;
  background: #010e1a;
}
.prj-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.06);
  transition: transform 7s cubic-bezier(.25,.46,.45,.94);
}
.prj-hero.is-loaded .prj-hero-bg { transform: scale(1); }
.prj-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(1,14,26,.3) 0%, rgba(1,14,26,.0) 30%, rgba(1,14,26,.75) 70%, rgba(1,14,26,.98) 100%),
    linear-gradient(to right, rgba(0,70,113,.6) 0%, transparent 60%);
}
.prj-hero-noise {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url('/wp-content/uploads/2021/02/Pattern-blue.png');
  background-size: 300px; opacity: .04; mix-blend-mode: screen;
}
.prj-hero-wrap {
  position: relative; z-index: 3;
  padding-top: 140px; padding-bottom: 80px;
}
.prj-hero-content { max-width: 800px; }

/* Breadcrumb */
.prj-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 28px;
}
.prj-breadcrumb a { color: rgba(255,255,255,.35); transition: color var(--t); }
.prj-breadcrumb a:hover { color: rgba(255,255,255,.8); }
.prj-breadcrumb > span { color: rgba(255,255,255,.18); }

/* Badge + statut */
.prj-badge-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.prj-badge {
  display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--white);
  background: var(--teal); padding: 5px 16px; border-radius: 2px;
}
.prj-statut {
  display: flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.7);
}
.prj-statut-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--statut-color, var(--teal)); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
  animation: prj-pulse 2.5s ease infinite;
}
@keyframes prj-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
  50%      { box-shadow: 0 0 0 7px rgba(255,255,255,.02); }
}

/* Titre */
.prj-hero-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.1;
  color: var(--white); margin-bottom: 36px;
  letter-spacing: -.02em;
}

/* Pills méta */
.prj-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prj-meta-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  padding: 7px 14px; border-radius: 40px;
  backdrop-filter: blur(4px);
}
.prj-meta-pill svg { opacity: .6; flex-shrink: 0; }

/* Scroll indicator */
.prj-hero-scroll {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-top: 48px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  color: rgba(255,255,255,.5); transition: var(--t);
  animation: prj-bounce 2s ease infinite;
}
.prj-hero-scroll:hover { border-color: var(--teal); color: var(--teal); }
@keyframes prj-bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* Barre de couleurs */
.prj-hero-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; height: 5px; z-index: 4;
}
.prj-hero-bar span { flex: 1; }

/* ─── SECTION DESCRIPTION ───────────────────────────────────── */
.prj-desc-section {
  background: var(--white);
  padding: 0;
}
.prj-desc-wrap {
  padding-top: 80px; padding-bottom: 80px;
}
.prj-desc-wrap--split {
  display: grid; grid-template-columns: 340px 1fr; gap: 72px; align-items: start;
}

/* Col image */
.prj-desc-img-col { position: sticky; top: 100px; }
.prj-desc-img-frame {
  position: relative; border-radius: 4px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,70,113,.18);
}
.prj-desc-img-frame img { width: 100%; display: block; }
/* Frame vidéo (récap project) */
.prj-desc-img-frame--video {
  background: #000;
  box-shadow: 0 20px 60px rgba(0,12,30,.25);
}
.prj-desc-img-frame--video .wathi-video {
  margin: 0;
  padding-top: 56.25%;
}
.prj-desc-img-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,28,54,.92), transparent);
  padding: 24px 16px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.prj-desc-img-caption span {
  font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.7);
}

/* Col texte */
.prj-desc-eyebrow {
  font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.prj-desc-eyebrow::after {
  content: ''; flex: 1; height: 1px; background: var(--teal); opacity: .25; max-width: 80px;
}

.prj-desc-lead p {
  font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-style: italic; line-height: 1.65; color: var(--navy);
  margin-bottom: 1.2em;
}
.prj-desc-rest p {
  font-size: 1rem; line-height: 1.82; color: var(--ink-2); margin-bottom: 1.1em;
}
.prj-desc-rest a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* CTA téléchargement */
.prj-desc-dl {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 28px;
  padding: 14px 20px;
  background: var(--navy); color: var(--white); border-radius: 3px;
  font-size: .78rem; font-weight: 700; text-decoration: none;
  transition: background var(--t), transform var(--t);
}
.prj-desc-dl:hover { background: #003558; transform: translateY(-1px); }
.prj-desc-dl-icon {
  width: 36px; height: 36px; background: rgba(255,255,255,.12);
  border-radius: 2px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ─── BARRE DE TABS ─────────────────────────────────────────── */
.prj-tabs-bar {
  background: var(--navy);
  position: sticky; top: 72px; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.prj-tabs-nav {
  display: flex; align-items: stretch; overflow-x: auto;
  scrollbar-width: none;
}
.prj-tabs-nav::-webkit-scrollbar { display: none; }
.prj-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 0 28px; height: 60px; white-space: nowrap;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.4); background: none;
  border: none; border-bottom: 3px solid transparent;
  cursor: pointer; transition: color var(--t), border-color var(--t);
  flex-shrink: 0;
}
.prj-tab:hover { color: rgba(255,255,255,.8); }
.prj-tab.is-active { color: var(--white); border-bottom-color: var(--teal); }
.prj-tab-num {
  font-size: .6rem; font-weight: 700; color: var(--teal);
  font-family: var(--serif); font-style: italic;
}
.prj-tab.is-active .prj-tab-num { color: var(--teal); }

/* ─── PANELS ────────────────────────────────────────────────── */
.prj-panel { display: none; }
.prj-panel.is-active { display: block; animation: prj-fade .3s ease; }
@keyframes prj-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.prj-panel-intro {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
}
.prj-panel-intro-inner {
  max-width: 780px;
  font-size: 1rem; line-height: 1.8; color: var(--ink-2);
  border-left: 3px solid var(--teal); padding-left: 24px;
}
.prj-panel-intro-inner p { margin-bottom: .9em; }
.prj-panel-intro-inner p:last-child { margin-bottom: 0; }

/* ─── INTERVIEWS / GRILLE DE POSTS ──────────────────────────── */
.prj-interviews { padding: 60px 0; }
.prj-interviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.prj-interview-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--ink);
  transition: box-shadow var(--t), transform var(--t);
}
.prj-interview-card:hover { box-shadow: 0 8px 40px rgba(0,70,113,.1); transform: translateY(-3px); }
.prj-interview-img {
  position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--navy);
}
.prj-interview-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.prj-interview-card:hover .prj-interview-img img { transform: scale(1.04); }
.prj-interview-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy), var(--teal));
}
.prj-interview-placeholder span {
  font-family: var(--serif); font-size: 3rem; font-style: italic;
  color: rgba(255,255,255,.4); font-weight: 400;
}
.prj-interview-cat {
  position: absolute; top: 12px; left: 12px;
  font-size: .55rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); background: var(--teal); padding: 4px 10px; border-radius: 2px;
}
.prj-interview-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.prj-interview-body h3 {
  font-size: .92rem; font-weight: 700; line-height: 1.4; color: var(--ink);
  margin-bottom: 10px; flex: 1;
}
.prj-interview-body p { font-size: .8rem; color: var(--ink-3); line-height: 1.55; margin-bottom: 16px; }
.prj-interview-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.prj-interview-author { display: flex; align-items: center; gap: 8px; }
.prj-interview-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; flex-shrink: 0;
}
.prj-interview-author span { font-size: .72rem; font-weight: 600; color: var(--ink-2); }
.prj-interview-footer time { font-size: .65rem; color: var(--ink-3); }

/* ─── ÉVÉNEMENTS — Vidéos + flyers ─────────────────────────── */
.prj-events { padding: 60px 0; }
.prj-events-subhead {
  font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 24px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.prj-videos-grid { display: grid; gap: 16px; margin-bottom: 48px; }
.prj-videos-grid--1col { grid-template-columns: 1fr; max-width: 680px; }
.prj-videos-grid--2col { grid-template-columns: repeat(2, 1fr); }
.prj-videos-grid--3col { grid-template-columns: repeat(3, 1fr); }

.prj-video-card { }
.prj-video-thumb {
  position: relative; aspect-ratio: 16/9;
  border-radius: 4px; overflow: hidden; background: var(--ink);
  cursor: pointer;
}
.prj-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.prj-video-card:hover .prj-video-thumb img { transform: scale(1.04); }
.prj-video-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(1,14,26,.3); border: none; cursor: pointer; transition: background var(--t);
}
.prj-video-play:hover { background: rgba(1,14,26,.1); }
.prj-video-play svg {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
  transition: transform var(--t);
}
.prj-video-play:hover svg { transform: scale(1.15); }
.prj-video-play::before {
  content: '';
  position: absolute;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--rouge);
  box-shadow: 0 6px 24px rgba(217,84,65,.5);
}
.prj-video-play svg { position: relative; z-index: 1; margin-left: 3px; }

.prj-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prj-media-card {
  position: relative; border-radius: 4px; overflow: hidden;
  aspect-ratio: 3/4; background: var(--paper); display: block;
}
.prj-media-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.prj-media-card:hover img { transform: scale(1.04); }
.prj-media-card-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 14px; background: linear-gradient(to top, rgba(0,28,54,.6), transparent);
  opacity: 0; transition: opacity var(--t);
}
.prj-media-card:hover .prj-media-card-overlay { opacity: 1; }

/* ─── DOCUMENTS / QUICK ─────────────────────────────────────── */
.prj-docs { padding: 60px 0; }
.prj-docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.prj-doc-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
}
.prj-doc-card:hover { box-shadow: 0 10px 48px rgba(0,70,113,.12); transform: translateY(-4px); }
.prj-doc-card-cover {
  position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--paper);
}
.prj-doc-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.prj-doc-card:hover .prj-doc-card-cover img { transform: scale(1.03); }
.prj-doc-card-cover-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--paper) 0%, var(--line) 100%);
  color: var(--line-2);
}
.prj-doc-card-cover-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(to right, var(--teal), var(--navy));
}
.prj-doc-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.prj-doc-card-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal);
}
.prj-doc-card-title { font-size: .88rem; font-weight: 700; line-height: 1.45; color: var(--ink); flex: 1; }
.prj-doc-card-read {
  display: flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); margin-top: auto;
  transition: gap var(--t), color var(--t);
}
.prj-doc-card:hover .prj-doc-card-read { gap: 10px; color: var(--teal); }

/* ─── RESSOURCES (Wathinotes + Liens utiles) ────────────────── */
.prj-resources { background: var(--navy); padding: 80px 0; }
.prj-resources-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.prj-resources-head { margin-bottom: 36px; }
.prj-resources-eyebrow {
  font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 8px;
}
.prj-resources-head h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--white);
}

/* Colonne Wathinotes */
.prj-resources-col--notes { border-right: 1px solid rgba(255,255,255,.06); padding-right: 80px; }
.prj-notes-list { display: flex; flex-direction: column; gap: 0; }
.prj-note-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none; color: var(--white);
  transition: opacity var(--t);
}
.prj-note-item:last-child { border-bottom: none; }
.prj-note-item:hover { opacity: .75; }
.prj-note-img {
  width: 72px; height: 72px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.06); flex-shrink: 0;
}
.prj-note-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prj-note-placeholder { width: 100%; height: 100%; background: rgba(255,255,255,.06); }
.prj-note-body { flex: 1; min-width: 0; }
.prj-note-cat {
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal); display: block; margin-bottom: 6px;
}
.prj-note-body h3 {
  font-size: .85rem; font-weight: 700; line-height: 1.4;
  color: rgba(255,255,255,.85); margin-bottom: 6px;
}
.prj-note-body time { font-size: .65rem; color: rgba(255,255,255,.35); }

/* Colonne Liens utiles */
.prj-links-list { display: flex; flex-direction: column; gap: 0; }
.prj-links-list li { border-bottom: 1px solid rgba(255,255,255,.06); }
.prj-links-list li:last-child { border-bottom: none; }
.prj-links-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0; text-decoration: none; transition: var(--t);
}
.prj-links-list a span {
  font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.7); line-height: 1.4;
  transition: color var(--t);
}
.prj-links-list a svg { flex-shrink: 0; color: rgba(255,255,255,.2); transition: color var(--t); }
.prj-links-list a:hover span { color: var(--white); }
.prj-links-list a:hover svg { color: var(--teal); }

/* ─── PUBLICATIONS LIÉES ────────────────────────────────────── */
.prj-related { padding: 80px 0; background: var(--paper); }
.prj-related-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 48px; flex-wrap: wrap;
}
.prj-related-eyebrow {
  font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 8px;
}
.prj-related-header h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--navy); margin: 0; }
.prj-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* ─── MÉTA (partage + fiche) ────────────────────────────────── */
.prj-meta-section { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; }
.prj-meta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.prj-meta-share-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 20px;
}

/* Boutons partage compacts pour les pages projets (5 boutons sur une ligne) */
.prj-meta-share .art-share-btns { gap: 6px; flex-wrap: wrap; }
.prj-meta-share .art-share-btn {
  padding: 8px 12px;
  font-size: .68rem;
  gap: 5px;
}
.prj-meta-share .art-share-btn svg { width: 12px; height: 12px; }
.prj-fiche-dl { display: flex; flex-direction: column; gap: 0; }
.prj-fiche-dl > div {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 8px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.prj-fiche-dl > div:last-child { border-bottom: none; }
.prj-fiche-dl dt { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.prj-fiche-dl dd { font-size: .85rem; font-weight: 600; color: var(--ink); }
.prj-fiche-dl a { color: var(--teal); text-decoration: none; }

/* ─── CTA SOUTENIR ──────────────────────────────────────────── */
.prj-cta { position: relative; overflow: hidden; background: var(--rouge); padding: 80px 0; }
.prj-cta-bg {
  position: absolute; inset: 0;
  background-image: url('/wp-content/uploads/2021/02/Pattern-blue.png');
  background-size: 360px; background-repeat: repeat;
  opacity: .06; mix-blend-mode: overlay;
}
.prj-cta-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap;
}
.prj-cta-eyebrow {
  font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 14px;
}
.prj-cta-title {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--white);
  line-height: 1.18; margin-bottom: 16px;
}
.prj-cta-desc { font-size: .92rem; color: rgba(255,255,255,.7); line-height: 1.75; max-width: 520px; }
.prj-cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.prj-cta-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; background: var(--white); color: var(--rouge);
  font-family: var(--sans); font-size: .82rem; font-weight: 800;
  letter-spacing: .02em; border-radius: 3px; text-decoration: none;
  transition: transform var(--t), box-shadow var(--t);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.prj-cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.25); }
.prj-cta-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; background: transparent; color: rgba(255,255,255,.8);
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 3px; text-decoration: none;
  transition: var(--t);
}
.prj-cta-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); color: var(--white); }

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .prj-desc-wrap--split { grid-template-columns: 280px 1fr; gap: 48px; }
  .prj-resources-wrap { gap: 48px; }
  .prj-resources-col--notes { padding-right: 48px; }
  .prj-interviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .prj-hero { min-height: 70vh; }
  .prj-desc-wrap--split { grid-template-columns: 1fr; }
  .prj-desc-img-col { position: static; max-width: 360px; margin: 0 auto; }
  .prj-resources-wrap { grid-template-columns: 1fr; gap: 0; }
  .prj-resources-col--notes { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); padding-right: 0; padding-bottom: 48px; margin-bottom: 48px; }
  .prj-docs-grid { grid-template-columns: repeat(2, 1fr); }
  .prj-videos-grid--3col { grid-template-columns: repeat(2, 1fr); }
  .prj-media-grid { grid-template-columns: repeat(2, 1fr); }
  .prj-meta-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .prj-hero { min-height: 90vw; }
  .prj-hero-title { font-size: 1.9rem; }
  .prj-tab { padding: 0 16px; font-size: .62rem; }
  .prj-interviews-grid { grid-template-columns: 1fr; }
  .prj-docs-grid { grid-template-columns: 1fr; }
  .prj-related-grid { grid-template-columns: 1fr; }
  .prj-videos-grid--2col,
  .prj-videos-grid--3col { grid-template-columns: 1fr; }
  .prj-media-grid { grid-template-columns: repeat(2, 1fr); }
  .prj-cta-inner { flex-direction: column; text-align: center; align-items: center; }
  .prj-cta-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .prj-related-header { flex-direction: column; align-items: flex-start; }
}

/* ── Bouton "Voir plus" description ─────────────────────────── */
.prj-desc-rest {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s ease, opacity .35s ease;
}
.prj-desc-rest.is-open {
  max-height: 2000px;
  opacity: 1;
}
.prj-desc-rest p {
  font-size: 1rem; line-height: 1.82; color: var(--ink-2); margin-bottom: 1.1em;
}
.prj-desc-rest a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.prj-desc-toggle {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; color: var(--teal);
  background: rgba(0,143,152,.07); border: 1.5px solid rgba(0,143,152,.2);
  padding: 8px 16px; border-radius: 40px; cursor: pointer;
  transition: background var(--t), border-color var(--t), gap var(--t);
}
.prj-desc-toggle:hover { background: rgba(0,143,152,.14); border-color: var(--teal); }
.prj-desc-toggle svg { transition: transform .3s ease; flex-shrink: 0; }
.prj-desc-toggle.is-open svg { transform: rotate(180deg); }

/* ── Logo partenaire ─────────────────────────────────────────── */
.prj-partner-logo {
  margin-top: 20px;
  padding: 18px 20px;
  background: #f7f8fa;
  border: 1.5px solid #e8eaee;
  border-radius: 10px;
  text-align: center;
}
.prj-partner-label {
  font-family: var(--sans); font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px;
}
.prj-partner-logo img {
  max-width: 100%; max-height: 70px; width: auto;
  object-fit: contain; display: block; margin: 0 auto;
  filter: grayscale(20%);
}

/* ── Language tabs FR / EN ────────────────────────────────────── */
.prj-lang-tabs {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,70,113,.06); border: 1.5px solid rgba(0,70,113,.12);
  border-radius: 40px; padding: 4px;
  margin-bottom: 20px;
}
.prj-lang-tab {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); padding: 6px 16px; border-radius: 40px;
  background: transparent; border: none; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.prj-lang-tab.is-active {
  background: var(--navy); color: #fff;
}
.prj-lang-tab:not(.is-active):hover { background: rgba(0,70,113,.1); }
.prj-desc-panel[hidden] { display: none !important; }

/* ── Pagination Wathinotes ───────────────────────────────────── */
.prj-note-hidden { display: none !important; }

.prj-notes-pagination {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  gap: 16px; flex-wrap: wrap;
}
.prj-notes-counter {
  font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.35);
  letter-spacing: .04em;
}
.prj-notes-counter span { color: rgba(255,255,255,.7); font-weight: 700; }

.prj-notes-pagination-btns {
  display: flex; align-items: center; gap: 8px;
}
.prj-notes-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.1); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.prj-notes-btn:hover:not(:disabled) { background: var(--teal); color: var(--white); border-color: var(--teal); }
.prj-notes-btn:disabled { opacity: .3; cursor: not-allowed; }

.prj-notes-dots { display: flex; align-items: center; gap: 5px; }
.prj-notes-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: none; cursor: pointer;
  transition: background var(--t), transform var(--t);
  padding: 0;
}
.prj-notes-dot.is-active {
  background: var(--teal); transform: scale(1.4);
}


/* ═══════════════════════════════════════════════════════════════
   LES VOIX DE WATHI — Design institutionnel
   Typographie EB Garamond · Palette navy / ink / paper
═══════════════════════════════════════════════════════════════ */

/* ── Variables locales ─────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   HERO — magazine éditorial : cover XL gauche + texte droite
══════════════════════════════════════════════════════════════ */
.vdw-hero {
  background: var(--paper);
  position: relative;
  padding-top: 80px;
}

.vdw-hero-bar {
  height: 4px;
  background: linear-gradient(to right,
    var(--rouge) 0% 25%, var(--orange) 25% 50%,
    var(--teal) 50% 75%, var(--sky) 75% 100%);
}
.vdw-hero-bar--top { margin-top: -80px; }

.vdw-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 88px 40px 96px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 960px) {
  .vdw-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 64px 24px 72px;
    text-align: center;
    justify-items: center;
  }
}

/* Cover image */
.vdw-hero-cover-wrap {
  position: relative;
}
.vdw-hero-cover-wrap::before {
  content: '';
  position: absolute;
  inset: -16px;
  border: 1px solid var(--line);
  pointer-events: none;
  z-index: 0;
}
.vdw-hero-cover {
  position: relative; z-index: 1;
  width: 320px; height: 320px;
  overflow: hidden;
  background: color-mix(in srgb, var(--navy) 60%, black);
  box-shadow: 0 24px 48px -16px rgba(0,12,30,.25),
              0 4px 12px rgba(0,12,30,.08);
}
.vdw-hero-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vdw-hero-cover--empty {
  background: linear-gradient(135deg, var(--navy), color-mix(in srgb, var(--navy) 60%, black));
}
@media (max-width: 480px) {
  .vdw-hero-cover { width: 240px; height: 240px; }
}

/* Texte hero */
.vdw-hero-text {
  display: flex; flex-direction: column;
}

.vdw-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: .62rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 24px;
}
@media (max-width: 960px) {
  .vdw-kicker { justify-content: center; }
}
.vdw-kicker-line {
  display: inline-block; width: 28px; height: 2px;
  background: var(--rouge); flex-shrink: 0;
}

.vdw-hero-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 6.5vw, 5rem);
  font-weight: 400; line-height: .95;
  color: var(--ink); letter-spacing: -.02em;
  margin-bottom: 24px;
}
.vdw-hero-title em { font-style: italic; color: var(--orange); }

.vdw-hero-desc {
  font-family: var(--serif); font-size: 1.1rem;
  font-style: italic; color: var(--ink-2);
  line-height: 1.65; max-width: 540px;
  margin-bottom: 24px;
}
@media (max-width: 960px) {
  .vdw-hero-desc { margin-left: auto; margin-right: auto; }
}

.vdw-hero-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .65rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 28px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  align-self: flex-start;
}
@media (max-width: 960px) { .vdw-hero-meta { align-self: center; } }
.vdw-hero-count { color: var(--ink); }
.vdw-hero-sep { color: var(--line); }

/* Plateformes */
.vdw-plat-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
@media (max-width: 960px) { .vdw-plat-row { align-items: center; } }

.vdw-plat-row-label {
  font-family: var(--sans); font-size: .56rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
}
.vdw-plat-row-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pills sur fond clair */
.vdw-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 12px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 100px;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.vdw-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.vdw-pill:hover {
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,12,30,.08);
}
.vdw-pill--na { opacity: .4; cursor: default; pointer-events: none; }

.vdw-pill--sp svg { color: #1DB954; }
.vdw-pill--sp:hover { border-color: #1DB954; }
.vdw-pill--ap svg { color: #b150e2; }
.vdw-pill--ap:hover { border-color: #b150e2; }
.vdw-pill--yt svg { color: #FF0000; }
.vdw-pill--yt:hover { border-color: #FF0000; }
.vdw-pill--dz svg { color: #A238FF; }
.vdw-pill--dz:hover { border-color: #A238FF; }


/* ══════════════════════════════════════════════════════════════
   SECTION HEADERS COMMUNS
══════════════════════════════════════════════════════════════ */
.vdw-sec-head {
  display: flex; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--ink);
}
.vdw-sec-kicker {
  display: block;
  font-family: var(--sans); font-size: .58rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 10px;
}
.vdw-sec-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.1; color: var(--ink); letter-spacing: -.01em;
}
.vdw-sec-count {
  font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}


/* ══════════════════════════════════════════════════════════════
   À LA UNE — Dernier épisode mis en avant
══════════════════════════════════════════════════════════════ */
.vdw-featured {
  background: var(--white);
  padding: 80px 0 88px;
}
.vdw-featured .wrap { max-width: 1080px; }

.vdw-feat {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 760px) {
  .vdw-feat { grid-template-columns: 1fr; gap: 28px; }
}

.vdw-feat-media {
  position: relative;
  width: 280px; height: 280px;
  overflow: hidden;
  background: color-mix(in srgb, var(--navy) 70%, black);
  box-shadow: 0 16px 40px -16px rgba(0,12,30,.25);
  display: block;
}
@media (max-width: 760px) {
  .vdw-feat-media { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; margin: 0 auto; }
}
.vdw-feat-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s;
}
.vdw-feat:hover .vdw-feat-media img { transform: scale(1.04); }

.vdw-feat-body { display: flex; flex-direction: column; gap: 12px; }

.vdw-feat-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .65rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.vdw-feat-meta time { font-weight: 700; color: var(--ink); }
.vdw-feat-sep { color: var(--line); }

.vdw-feat-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.18;
  color: var(--ink); letter-spacing: -.01em;
}
.vdw-feat-title a {
  text-decoration: none; color: inherit;
  transition: color .2s;
}
.vdw-feat-title a:hover { color: var(--rouge); }

.vdw-feat-guest {
  font-family: var(--serif); font-size: 1rem;
  color: var(--ink-2); line-height: 1.4;
}
.vdw-feat-guest em { font-style: italic; font-weight: 500; color: var(--ink); }
.vdw-feat-guest span { color: var(--ink-3); }

.vdw-feat-excerpt {
  font-family: var(--serif); font-size: .95rem;
  color: var(--ink-2); line-height: 1.65;
  margin-top: 2px;
}

.vdw-feat-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 10px;
}
.vdw-feat-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white); background: var(--ink);
  padding: 12px 22px;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.vdw-feat-cta svg { width: 14px; height: 14px; }
.vdw-feat-cta:hover { background: var(--rouge); transform: translateY(-1px); }

.vdw-feat-plats { display: flex; gap: 4px; align-items: center; }


/* ══════════════════════════════════════════════════════════════
   ARCHIVES — liste avec miniatures carrées 96px
══════════════════════════════════════════════════════════════ */
.vdw-archives {
  background: var(--paper);
  padding: 80px 0 96px;
  border-top: 1px solid var(--line);
}
.vdw-archives .wrap { max-width: 1080px; }

.vdw-arc-list { list-style: none; margin: 0; padding: 0; }

.vdw-arc-li {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .25s, padding .25s;
}
@media (min-width: 641px) {
  .vdw-arc-li:hover {
    background: var(--white);
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
  }
}
@media (max-width: 640px) {
  .vdw-arc-li {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 16px;
  }
  .vdw-arc-aside {
    grid-column: 2;
    margin-top: 4px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}

/* Vignette */
.vdw-arc-thumb {
  display: block;
  width: 96px; height: 96px;
  overflow: hidden;
  background: color-mix(in srgb, var(--navy) 80%, black);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .vdw-arc-thumb { width: 72px; height: 72px; }
}
.vdw-arc-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85);
  transition: filter .3s, transform .5s;
}
.vdw-arc-li:hover .vdw-arc-thumb img {
  filter: saturate(1); transform: scale(1.06);
}
.vdw-arc-thumb-empty {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--navy), color-mix(in srgb, var(--navy) 60%, black));
}

/* Body */
.vdw-arc-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.vdw-arc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.vdw-arc-meta time { font-weight: 700; color: var(--ink-2); }
.vdw-arc-meta em { font-style: italic; color: var(--ink-2); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 1.08em; }
.vdw-arc-sep { color: var(--line); }

.vdw-arc-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.3;
  color: var(--ink);
}
.vdw-arc-title a {
  text-decoration: none; color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}
.vdw-arc-li:hover .vdw-arc-title a { color: var(--rouge); }

.vdw-arc-excerpt {
  font-family: var(--serif); font-size: .88rem;
  color: var(--ink-3); line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Aside */
.vdw-arc-aside {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px; flex-shrink: 0; min-width: 80px;
}
.vdw-arc-dur {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; color: var(--ink-3);
  white-space: nowrap;
}
.vdw-arc-plats { display: flex; gap: 4px; align-items: center; }

.vdw-arc-li--hidden { display: none; }

/* Icônes plateformes (commun) */
.vdw-ep-ico {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: var(--ink-3); border-radius: 50%;
  transition: color .2s, background .2s;
}
.vdw-ep-ico svg { width: 14px; height: 14px; }
.vdw-ep-ico--sp:hover { color: #1DB954; background: rgba(29,185,84,.1); }
.vdw-ep-ico--ap:hover { color: #b150e2; background: rgba(177,80,226,.1); }
.vdw-ep-ico--yt:hover { color: #FF0000; background: rgba(255,0,0,.1); }

/* Bouton charger plus */
.vdw-ep-more {
  margin-top: 48px; text-align: center;
}
.vdw-ep-more-btn {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: none;
  border: 1px solid var(--ink);
  padding: 14px 36px; cursor: pointer;
  transition: background .2s, color .2s;
}
.vdw-ep-more-btn:hover { background: var(--ink); color: var(--white); }
#vdwMoreCount { font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.vdw-ep-more-btn:hover #vdwMoreCount { color: rgba(255,255,255,.55); }


/* ══════════════════════════════════════════════════════════════
   À PROPOS
══════════════════════════════════════════════════════════════ */
.vdw-about {
  background: var(--white);
  padding: 96px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.vdw-about-wrap {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 80px; align-items: start;
}
@media (max-width: 760px) {
  .vdw-about-wrap { grid-template-columns: 1fr; gap: 32px; }
}
.vdw-about-label {
  font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rouge); display: block; padding-top: 8px;
}
.vdw-about-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.5vw, 2.9rem); line-height: 1.08;
  color: var(--ink); letter-spacing: -.01em; margin-bottom: 32px;
}
.vdw-about-body {
  font-family: var(--serif); font-size: 1.05rem;
  color: var(--ink-2); line-height: 1.78; margin-bottom: 48px;
}
.vdw-about-body p + p { margin-top: 16px; }
.vdw-about-body em { font-style: italic; color: var(--ink); }

.vdw-about-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border-top: 1px solid var(--line);
}
@media (max-width: 560px) { .vdw-about-pillars { grid-template-columns: 1fr; } }
.vdw-about-pillar {
  padding: 28px 24px 0 0;
  border-right: 1px solid var(--line);
}
.vdw-about-pillar:last-child { border-right: none; padding-right: 0; }
.vdw-about-pillar:not(:first-child) { padding-left: 24px; }
.vdw-about-pillar dt {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 10px;
}
.vdw-about-pillar dd {
  font-family: var(--serif); font-size: .95rem;
  color: var(--ink-3); line-height: 1.65;
}


/* ══════════════════════════════════════════════════════════════
   PLATEFORMES / ABONNEMENT
══════════════════════════════════════════════════════════════ */
.vdw-subscribe {
  background: var(--navy);
  padding: 88px 0;
  position: relative; overflow: hidden;
}
.vdw-subscribe::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--pattern-gray);
  background-size: 500px; opacity: .03;
  pointer-events: none;
}
.vdw-subscribe .wrap { position: relative; z-index: 1; }

.vdw-sub-kicker {
  font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 14px;
}
.vdw-sub-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: .95; color: var(--white);
  letter-spacing: -.02em; margin-bottom: 56px;
}

.vdw-sub-platforms {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,255,255,.08);
}
@media (max-width: 720px) { .vdw-sub-platforms { grid-template-columns: 1fr; } }

.vdw-sub-plat {
  display: flex; align-items: center; gap: 20px;
  padding: 28px 32px;
  background: rgba(255,255,255,.03);
  text-decoration: none;
  transition: background .2s, padding-left .25s;
}
.vdw-sub-plat:hover { background: rgba(255,255,255,.07); padding-left: 42px; }
.vdw-sub-plat--na { opacity: .38; cursor: default; pointer-events: none; }

.vdw-sub-plat-ico {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,.08); flex-shrink: 0;
  transition: background .2s;
}
.vdw-sub-plat-ico svg { width: 28px; height: 28px; }
.vdw-sub-plat--sp .vdw-sub-plat-ico { color: #1DB954; }
.vdw-sub-plat--ap .vdw-sub-plat-ico { color: #b150e2; }
.vdw-sub-plat--yt .vdw-sub-plat-ico { color: #FF0000; }
.vdw-sub-plat--dz .vdw-sub-plat-ico { color: #A238FF; }
.vdw-sub-plat--sp:hover .vdw-sub-plat-ico { background: rgba(29,185,84,.18); }
.vdw-sub-plat--ap:hover .vdw-sub-plat-ico { background: rgba(177,80,226,.18); }
.vdw-sub-plat--yt:hover .vdw-sub-plat-ico { background: rgba(255,0,0,.18); }
.vdw-sub-plat--dz:hover .vdw-sub-plat-ico { background: rgba(162,56,255,.18); }

.vdw-sub-plat-info {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
}
.vdw-sub-plat-verb {
  font-family: var(--sans); font-size: .54rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.vdw-sub-plat-name {
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  color: rgba(255,255,255,.72); transition: color .2s;
}
.vdw-sub-plat:hover .vdw-sub-plat-name { color: var(--white); }

.vdw-sub-plat-arr {
  width: 18px; height: 18px;
  color: rgba(255,255,255,.2); flex-shrink: 0;
  transition: transform .2s, color .2s;
}
.vdw-sub-plat:hover .vdw-sub-plat-arr {
  transform: translateX(4px); color: rgba(255,255,255,.55);
}

/* Responsive global */
@media (max-width: 768px) {
  .vdw-episodes  { padding: 56px 0 72px; }
  .vdw-about     { padding: 64px 0; }
  .vdw-subscribe { padding: 64px 0; }
}


/* ═══════════════════════════════════════════════════════════════
   À PROPOS DE WATHI — page-wathi.php
═══════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────── */
.ab-hero {
  position: relative;
  background: var(--navy);
  margin-top: 105px;
  overflow: hidden;
}

.ab-hero .team-hero-pattern {
  position: absolute; inset: 0;
  background: url('/wp-content/uploads/2021/02/Pattern-blue.png') 0 0 repeat;
  background-size: 600px;
  opacity: .65;
  pointer-events: none;
}

.ab-hero-inner {
  position: relative; z-index: 1;
  text-align: center;
  padding-top: 100px;
  padding-bottom: 80px;
}

.ab-hero-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 400; line-height: 1.05;
  color: var(--white);
  margin-bottom: 28px;
}

.ab-hero-title em {
  font-style: italic;
  color: var(--orange);
}

.ab-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255,255,255,.62);
  max-width: 560px;
  margin: 0 auto 40px;
}

.ab-hero-pills {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .5rem 1rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
}

.ab-pill-sep { color: rgba(255,255,255,.25); font-weight: 300; }

/* ── Section 3 dimensions ────────────────────────────────────── */
.ab-dimensions {
  background: var(--white);
  padding: 80px 0;
  border-bottom: 1px solid var(--line);
}

.ab-dimensions-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.ab-dim-card {
  padding: 0 2.5rem;
  border-left: 1px solid var(--line);
}

.ab-dim-card:first-child { border-left: none; padding-left: 0; }
.ab-dim-card:last-child  { padding-right: 0; }

.ab-dim-num {
  display: block;
  font-family: var(--serif);
  font-size: .72rem; font-weight: 400; letter-spacing: .1em;
  color: var(--orange);
  margin-bottom: 1rem;
}

.ab-dim-title {
  font-family: var(--serif);
  font-size: 1.3rem; font-weight: 400; line-height: 1.25;
  color: var(--navy);
  margin-bottom: .75rem;
}

.ab-dim-title::after {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: var(--orange);
  margin-top: .6rem;
}

.ab-dim-text {
  font-size: .875rem; line-height: 1.8;
  color: var(--ink-2);
}

/* ── 4 Piliers ───────────────────────────────────────────────── */
.ab-pillars {
  background: var(--paper);
  padding: 80px 0 96px;
}

.ab-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.ab-pillar {
  background: var(--white);
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Barre colorée en haut */
.ab-pillar-accent {
  height: 4px;
  flex-shrink: 0;
}

.ab-pillar--navy   .ab-pillar-accent { background: var(--navy); }
.ab-pillar--orange .ab-pillar-accent { background: var(--orange); }
.ab-pillar--rouge  .ab-pillar-accent { background: var(--rouge); }
.ab-pillar--sky    .ab-pillar-accent { background: var(--sky); }

/* Numéro */
.ab-pillar-num {
  display: block;
  font-family: var(--serif);
  font-size: .65rem; font-weight: 400; letter-spacing: .16em;
  padding: 28px 36px 0;
}

.ab-pillar--navy   .ab-pillar-num { color: var(--navy); }
.ab-pillar--orange .ab-pillar-num { color: var(--orange); }
.ab-pillar--rouge  .ab-pillar-num { color: var(--rouge); }
.ab-pillar--sky    .ab-pillar-num { color: var(--teal); }

/* Titre */
.ab-pillar-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 400; line-height: 1.15;
  color: var(--navy);
  padding: .75rem 36px 0;
  margin: 0;
}

/* Règle colorée sous le titre */
.ab-pillar-title::after {
  content: '';
  display: block;
  width: 32px; height: 3px;
  margin-top: .9rem;
}

.ab-pillar--navy   .ab-pillar-title::after { background: var(--navy); }
.ab-pillar--orange .ab-pillar-title::after { background: var(--orange); }
.ab-pillar--rouge  .ab-pillar-title::after { background: var(--rouge); }
.ab-pillar--sky    .ab-pillar-title::after { background: var(--sky); }

/* Texte */
.ab-pillar-text {
  padding: 1.25rem 36px 40px;
  font-size: .9rem; line-height: 1.85;
  color: var(--ink-2);
}

.ab-pillar-text p { margin-bottom: .8rem; }
.ab-pillar-text p:last-child { margin-bottom: 0; }
.ab-pillar-text em { font-style: italic; color: var(--navy); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ab-dimensions-inner { grid-template-columns: 1fr; }
  .ab-dim-card { border-left: none; border-top: 1px solid var(--line); padding: 2rem 0; }
  .ab-dim-card:first-child { border-top: none; padding-top: 0; }
  .ab-dim-card:last-child  { padding-bottom: 0; }

  .ab-pillars { padding: 56px 0 72px; }
  .ab-pillars-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ab-hero-inner { padding-top: 72px; padding-bottom: 60px; }
  .ab-dimensions { padding: 56px 0; }
  .ab-pillar-num   { padding: 24px 24px 0; }
  .ab-pillar-title { padding: .6rem 24px 0; }
  .ab-pillar-text  { padding: 1rem 24px 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   PARTENAIRES — Design institutionnel
═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.prt-hero {
  background: var(--navy);
  padding: 148px 0 0;
  position: relative;
  overflow: hidden;
}
.prt-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--pattern-blue);
  background-size: 600px; opacity: .04;
  pointer-events: none;
}

.prt-hero-wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  padding-bottom: 56px;
}
@media (max-width: 760px) {
  .prt-hero-wrap { grid-template-columns: 1fr; }
  .prt-hero-aside { display: none; }
}

/* Kicker */
.prt-hero-kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 26px;
}
.prt-hero-kicker-line {
  display: inline-block; width: 28px; height: 1px;
  background: var(--orange); flex-shrink: 0;
}

/* Titre */
.prt-hero-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 400; line-height: .96;
  color: var(--white); letter-spacing: -.01em;
  margin-bottom: 28px;
}
.prt-hero-title em { font-style: italic; color: var(--orange); }

/* Intro */
.prt-hero-intro {
  font-family: var(--serif); font-size: 1.1rem;
  color: rgba(255,255,255,.55); line-height: 1.7;
  font-style: italic; max-width: 520px;
}

/* Stats */
.prt-hero-aside {
  display: flex; align-items: flex-end; gap: 24px;
  padding-bottom: 4px;
  flex-shrink: 0;
}
.prt-hero-stat { text-align: right; }
.prt-hero-stat-num {
  display: block;
  font-family: var(--serif); font-size: 3.8rem;
  font-weight: 400; line-height: 1;
  color: rgba(255,255,255,.13); letter-spacing: -.02em;
}
.prt-hero-stat-label {
  display: block; font-family: var(--sans);
  font-size: .56rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.2); margin-top: 4px;
}
.prt-hero-rule-v {
  width: 1px; height: 52px;
  background: rgba(255,255,255,.1); flex-shrink: 0;
}

/* Navigation interne */
.prt-hero-nav {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 0;
}
.prt-hero-nav-link {
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; color: rgba(255,255,255,.4);
  padding: 16px 24px;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: color var(--t), background var(--t);
  text-decoration: none;
}
.prt-hero-nav-link:first-child { padding-left: 0; }
.prt-hero-nav-link:hover { color: var(--white); background: rgba(255,255,255,.04); }

/* Filet bas */
.prt-hero-foot { position: relative; z-index: 1; }
.prt-hero-foot-bar {
  height: 1px;
  background: linear-gradient(to right,
    var(--rouge) 0% 25%, var(--orange) 25% 50%,
    var(--teal) 50% 75%, var(--sky) 75% 100%);
}


/* ══════════════════════════════════════════════════════════════
   SECTIONS PAR TYPE
══════════════════════════════════════════════════════════════ */
.prt-section {
  padding: 80px 0 88px;
  border-bottom: 1px solid var(--line);
}
.prt-section--white { background: var(--white); }
.prt-section--paper { background: var(--paper); }

/* En-tête de section */
.prt-section-header {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: baseline;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}
@media (max-width: 720px) {
  .prt-section-header { grid-template-columns: 1fr; gap: 12px; }
}

.prt-section-header-left {
  display: flex; flex-direction: column; gap: 6px;
}
.prt-section-label {
  font-family: var(--sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rouge);
}
.prt-section-count {
  font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .1em; color: var(--ink-3);
}
.prt-section-desc {
  font-family: var(--serif); font-size: .95rem;
  color: var(--ink-2); line-height: 1.65; font-style: italic;
  max-width: 640px;
}


/* ══════════════════════════════════════════════════════════════
   GRILLE DE CARTES PARTENAIRES
══════════════════════════════════════════════════════════════ */
.prt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line); /* les gaps deviennent des filets */
  border: 1px solid var(--line);
}
@media (max-width: 480px) {
  .prt-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Carte partenaire ─────────────────────────────────────── */
.prt-card {
  display: flex; flex-direction: column;
  background: var(--white);
  padding: 32px 24px 24px;
  position: relative;
  text-decoration: none; color: inherit;
  transition: background var(--t);
  min-height: 200px;
  gap: 16px;
}
/* Fond paper pour sections paires */
.prt-section--paper .prt-card { background: var(--paper); }

/* Effet hover — uniquement si lien */
a.prt-card::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--rouge);
  opacity: 0; transition: opacity var(--t);
}
a.prt-card:hover { background: var(--white); }
a.prt-card:hover::after { opacity: 1; }

/* Logo */
.prt-card-logo {
  flex: 1;
  display: flex; align-items: center; justify-content: flex-start;
}
.prt-card-logo img {
  max-width: 100%; max-height: 56px;
  width: auto; height: auto;
  object-fit: contain; display: block;
  filter: grayscale(1) opacity(.65);
  transition: filter var(--t);
}
a.prt-card:hover .prt-card-logo img {
  filter: grayscale(0) opacity(1);
}
.prt-card-logo-initial {
  font-family: var(--serif); font-size: 2.4rem; font-weight: 400;
  color: rgba(0,70,113,.2); line-height: 1;
}

/* Corps */
.prt-card-body { display: flex; flex-direction: column; gap: 4px; }

.prt-card-name {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  color: var(--ink); letter-spacing: .01em; line-height: 1.3;
}
a.prt-card:hover .prt-card-name { color: var(--navy); }

.prt-card-pays {
  font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

.prt-card-desc {
  font-family: var(--serif); font-size: .82rem;
  color: var(--ink-3); line-height: 1.5;
  font-style: italic; margin-top: 4px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Badges et flèche */
.prt-card-since {
  font-family: var(--sans); font-size: .56rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); display: block;
}

.prt-card-arrow {
  position: absolute; top: 16px; right: 16px;
  font-size: .8rem; color: rgba(0,0,0,.15);
  transition: color var(--t), transform var(--t);
  line-height: 1;
}
a.prt-card:hover .prt-card-arrow {
  color: var(--rouge); transform: translate(2px, -2px);
}


/* ══════════════════════════════════════════════════════════════
   ÉTAT VIDE
══════════════════════════════════════════════════════════════ */
.prt-empty {
  background: var(--paper);
  padding: 120px 0;
  border-bottom: 1px solid var(--line);
}
.prt-empty-wrap { text-align: center; }
.prt-empty-label {
  font-family: var(--sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}
.prt-empty-text {
  font-family: var(--serif); font-size: 1.1rem;
  font-style: italic; color: var(--ink-2);
}


/* ══════════════════════════════════════════════════════════════
   CTA — DEVENIR PARTENAIRE
══════════════════════════════════════════════════════════════ */
.prt-cta {
  background: var(--navy);
  padding: 96px 0;
  position: relative; overflow: hidden;
}
.prt-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--pattern-gray);
  background-size: 500px; opacity: .04;
  pointer-events: none;
}
.prt-cta-wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 720px) {
  .prt-cta-wrap { grid-template-columns: 1fr; gap: 40px; }
}

/* Gauche */
.prt-cta-kicker {
  font-family: var(--sans); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 16px;
}
.prt-cta-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: .98; color: var(--white); letter-spacing: -.01em;
}
.prt-cta-title em { font-style: italic; color: var(--orange); }

/* Droite */
.prt-cta-desc {
  font-family: var(--serif); font-size: 1rem;
  color: rgba(255,255,255,.5); line-height: 1.75;
  font-style: italic; margin-bottom: 36px;
}

.prt-cta-actions {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 20px 32px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 32px;
}
.prt-cta-btn {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.35);
  padding: 13px 28px;
  transition: background var(--t), border-color var(--t);
}
.prt-cta-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.65);
}
.prt-cta-link {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; color: rgba(255,255,255,.4);
  transition: color var(--t);
}
.prt-cta-link:hover { color: rgba(255,255,255,.85); }


/* Alias grille (colonnes définies par le grid parent) */
.prt-hero-main { /* contenu principal du hero */ }
.prt-cta-left  { /* colonne titre du CTA     */ }
.prt-cta-right { /* colonne texte du CTA     */ }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .prt-hero    { padding: 120px 0 0; }
  .prt-section { padding: 56px 0 64px; }
  .prt-cta     { padding: 64px 0; }
  .prt-grid    { grid-template-columns: repeat(2, 1fr); }
  .prt-hero-nav-link { padding: 14px 16px; font-size: .62rem; }
}
@media (max-width: 480px) {
  .prt-grid    { grid-template-columns: 1fr; }
  .prt-card    { min-height: 160px; padding: 24px 20px 20px; }
}

/* ── Compatibilité info_circle (legacy → prt-grid) ─────────── */
.prt-grid--legacy { margin-top: 40px; }
.prt-card--legacy .prt-card-logo img {
  filter: grayscale(.4) opacity(.8);
  border-bottom: 2px solid var(--accent, var(--teal));
  padding-bottom: 12px; margin-bottom: 4px;
}
.prt-card--legacy .prt-card-desc {
  overflow: visible; display: block;
  -webkit-line-clamp: unset;
  font-style: normal !important;
  font-size: .82rem; line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════
   ORBITE PARTENAIRES — Cercle interactif
══════════════════════════════════════════════════════════════ */

/* ── Section — fond à motif points gris ─────────────────────── */
.prt-orbit-section {
  background-color: #f7f7f5;
  background-image: radial-gradient(circle, rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 56px 0 72px;
  overflow: hidden;
}

/* ── Stage centré ───────────────────────────────────────────── */
.prt-orbit-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Orbit container ────────────────────────────────────────── */
/* 800px : half=400 → offset CSS = 400×(230/300) = 307px        */
.prt-orbit {
  position: relative;
  width: 800px;
  height: 800px;
  flex-shrink: 0;
}

/* ── SVG ────────────────────────────────────────────────────── */
.prt-orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Anneau extérieur décoratif */
.prt-orbit-ring-outer {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 1;
  stroke-dasharray: 2 12;
}

/* Anneau principal */
.prt-orbit-ring {
  fill: none;
  stroke: #d0d0d0;
  stroke-width: 1;
  stroke-dasharray: 4 7;
}

/* Ligne vers nœud actif */
.prt-orbit-line {
  stroke: var(--teal);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  transition: x2 .35s ease, y2 .35s ease, opacity .2s ease;
}

/* Point central */
.prt-orbit-center-dot {
  fill: var(--teal);
  opacity: .5;
}

/* ── Zone centrale ──────────────────────────────────────────── */
.prt-orbit-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* rayon max = offset(307) - node_half(36) - gap(16) = 255 → diam 510 */
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 32px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  z-index: 1;
}

/* Idle — vide, jamais visible (1er partenaire activé au chargement) */
.prt-center-idle { display: none; }

/* Actif */
.prt-center-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 40px 36px;
  box-sizing: border-box;
  overflow: hidden;
  animation: prtFadeIn .3s ease;
}

@keyframes prtFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.prt-center-logo-wrap {
  flex-shrink: 0;
  width: 220px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prt-center-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.prt-center-rule {
  width: 40px;
  height: 1px;
  background: #ddd;
  margin: 16px auto;
  flex-shrink: 0;
}

.prt-center-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  width: 100%;
}

.prt-center-body::-webkit-scrollbar { display: none; }

.prt-center-desc {
  font-size: .82rem;
  line-height: 1.75;
  color: #444;
  margin: 0;
  text-align: center;
}

/* ── Nœuds ──────────────────────────────────────────────────── */
.prt-node {
  position: absolute;
  top: 50%; left: 50%;
  transform:
    rotate(var(--angle))
    translateX(307px)
    rotate(calc(-1 * var(--angle)))
    translate(-50%, -50%);

  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  cursor: pointer;
  padding: 0;
  transition:
    border-color .2s ease,
    box-shadow   .2s ease,
    transform    .25s cubic-bezier(.34,1.56,.64,1);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prt-node:hover,
.prt-node:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 4px 16px rgba(0,143,152,.2);
  transform:
    rotate(var(--angle))
    translateX(307px)
    rotate(calc(-1 * var(--angle)))
    translate(-50%, -50%)
    scale(1.08);
  outline: none;
  z-index: 3;
}

.prt-node.is-active {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px var(--teal), 0 4px 16px rgba(0,143,152,.25);
  z-index: 4;
  transform:
    rotate(var(--angle))
    translateX(307px)
    rotate(calc(-1 * var(--angle)))
    translate(-50%, -50%)
    scale(1.1);
}

.prt-node-inner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.prt-node-inner img {
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  filter: grayscale(.4);
  transition: filter .2s ease;
}

.prt-node:hover .prt-node-inner img,
.prt-node.is-active .prt-node-inner img {
  filter: none;
}

.prt-node-initial {
  font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
  font-size: 1.1rem;
  color: var(--navy);
}

/* Tooltip */
.prt-node-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  background: #fff;
  border: 1px solid #ddd;
  padding: 4px 9px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 10;
}

.prt-node:hover .prt-node-label,
.prt-node.is-active .prt-node-label { opacity: 1; }

/* ── Liste mobile ───────────────────────────────────────────── */
.prt-mobile-list {
  display: none;
  padding: 48px 0 64px;
  background: var(--paper);
}

.prt-mobile-list-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal);
  font-weight: 600;
  margin: 0 0 32px;
}

.prt-mobile-item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.prt-mobile-item:last-child { border-bottom: 1px solid var(--line); }

.prt-mobile-logo {
  width: 72px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
}

.prt-mobile-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.prt-mobile-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.prt-mobile-type {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal);
  font-weight: 600;
  margin: 0;
}

.prt-mobile-name {
  font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
  font-size: 1.1rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}

.prt-mobile-pays { font-size: .72rem; color: var(--muted, #8a9aaa); margin: 0; }
.prt-mobile-desc { font-size: .82rem; line-height: 1.65; color: #444; margin: 4px 0 0; }

.prt-mobile-link {
  display: inline-block;
  margin-top: 8px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color .2s;
}

.prt-mobile-link:hover { color: var(--teal); }

/* ── Responsive ─────────────────────────────────────────────── */

/* Tablette 721–980px : orbit 540px, offset 207px, centre 320px */
@media (max-width: 980px) and (min-width: 721px) {
  .prt-orbit { width: 540px; height: 540px; }
  .prt-orbit-center { width: 320px; height: 320px; }
  .prt-center-logo-wrap { width: 160px; height: 68px; }
  .prt-center-idle-label { font-size: 1.3rem; }
  .prt-center-detail { padding: 28px 24px; }
  .prt-center-desc { font-size: .76rem; }
  .prt-node {
    transform: rotate(var(--angle)) translateX(207px) rotate(calc(-1*var(--angle))) translate(-50%,-50%);
    width: 62px; height: 62px;
  }
  .prt-node:hover, .prt-node:focus-visible {
    transform: rotate(var(--angle)) translateX(207px) rotate(calc(-1*var(--angle))) translate(-50%,-50%) scale(1.08);
  }
  .prt-node.is-active {
    transform: rotate(var(--angle)) translateX(207px) rotate(calc(-1*var(--angle))) translate(-50%,-50%) scale(1.1);
  }
}

/* Mobile ≤ 720px : liste */
@media (max-width: 720px) {
  .prt-orbit-section { display: none; }
  .prt-mobile-list   { display: block; }
}

@media (max-width: 480px) {
  .prt-mobile-item { flex-direction: column; }
  .prt-mobile-logo { width: 80px; height: 56px; }
}

/* ════════════════════════════════════════════════════════════════
   PAGE DÉBAT WATHI — page-debat.php
   ════════════════════════════════════════════════════════════════ */

/* ── Hero (full-bleed image, overlay gradient gauche → droite) ── */
.dbt-hero {
  position: relative;
  margin-top: 105px;
  overflow: hidden;
  background: var(--navy);
  display: flex;
  flex-direction: column;
}

/* Photo du débat en fond pleine page */
.dbt-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}

/* Gradient : navy opaque à gauche → transparent à droite */
.dbt-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    rgba(2,69,115,1)   0%,
    rgba(2,69,115,.96) 35%,
    rgba(2,69,115,.78) 55%,
    rgba(2,69,115,.3)  75%,
    transparent        100%
  );
}

/* Pas d'image : pattern centré à droite */
.dbt-hero-bg--pattern {
  background-image: url('/wp-content/uploads/2021/02/Pattern-blue.png');
  background-size: 520px;
  background-position: center right;
  opacity: .5;
}
.dbt-hero-bg--pattern::after { display: none; }

/* Zone de contenu (au-dessus du bg) */
.dbt-hero-body {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; align-items: center;
  padding: 88px 0 80px;
}

/* Colonne gauche : titre + questions (max ~60% de la largeur) */
.dbt-hero-inner {
  max-width: 680px;
}

.dbt-hero-eyebrow {
  font-family: var(--sans);
  font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: .7rem;
}
.dbt-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}

.dbt-hero-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 400; line-height: 1.15;
  color: var(--white);
  margin-bottom: 0;
}

/* Trait orange sous le titre */
.dbt-hero-title-rule {
  width: 40px; height: 3px;
  background: var(--orange);
  margin: 1.5rem 0 2rem;
}

/* Questions */
.dbt-hero-question {
  font-family: var(--serif);
  font-size: 1.05rem; font-style: italic; line-height: 1.7;
  margin: 0;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(255,255,255,.15);
}
.dbt-hero-question:last-of-type { border-bottom: 1px solid rgba(255,255,255,.15); }

.dbt-hero-question--fr { color: rgba(255,255,255,.9); }
.dbt-hero-question--en { color: rgba(255,255,255,.55); }

.dbt-hero-qlang {
  display: inline-block;
  font-family: var(--sans); font-style: normal;
  font-size: .56rem; font-weight: 700; letter-spacing: .12em;
  border: 1px solid; border-radius: 2px;
  padding: .15em .45em;
  vertical-align: middle;
  margin-right: .55rem;
  position: relative; top: -2px;
}
.dbt-hero-question--fr .dbt-hero-qlang {
  color: var(--orange); border-color: var(--orange);
}
.dbt-hero-question--en .dbt-hero-qlang {
  color: rgba(255,255,255,.45); border-color: rgba(255,255,255,.25);
}

/* Boutons Note de synthèse dans le hero */
.dbt-hero-cta {
  display: flex; gap: .875rem; flex-wrap: wrap;
  margin-top: 2rem;
}
.dbt-hero-note-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.9);
  font-family: var(--sans);
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  padding: .6rem 1.1rem; border-radius: 2px;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.dbt-hero-note-btn:hover {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.65);
  color: var(--white);
}
.dbt-hero-note-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Sections ────────────────────────────────────────────────── */
.dbt-section {
  padding: 72px 0 80px;
  background: var(--white);
}
.dbt-section--paper { background: var(--paper); }

.dbt-section-head { margin-bottom: 2.5rem; }

.dbt-section-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400; line-height: 1.2;
  color: var(--navy);
  padding-left: 1rem;
  border-left: 4px solid var(--navy);
}

/* ── Accordéon bilingue 2 colonnes ──────────────────────────── */
.dbt-acc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
}

.dbt-acc-col { background: var(--white); }

.dbt-acc-col-head {
  padding: .8rem 1.25rem;
  background: var(--navy);
  color: rgba(255,255,255,.8);
  font-family: var(--sans);
  font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}

.dbt-acc-item { border-bottom: 1px solid var(--line); }

.dbt-acc-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1.1rem 1.25rem;
  background: none; border: none;
  font-family: var(--sans);
  font-size: .85rem; font-weight: 600;
  color: var(--navy);
  cursor: pointer; text-align: left; gap: .75rem;
  transition: background .15s, color .15s;
}
.dbt-acc-trigger:hover { background: var(--paper); }
.dbt-acc-trigger.open  { color: var(--teal); }

/* Icône +/× */
.dbt-acc-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  position: relative;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.dbt-acc-icon::before,
.dbt-acc-icon::after {
  content: ''; position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  background: currentColor;
  transition: transform .22s ease, opacity .22s;
}
.dbt-acc-icon::before { width: 8px; height: 1.5px; }
.dbt-acc-icon::after  { width: 1.5px; height: 8px; }
.dbt-acc-trigger.open .dbt-acc-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }

/* Corps accordéon (animation CSS pure) */
.dbt-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.dbt-acc-body.open { grid-template-rows: 1fr; }
.dbt-acc-body-inner { overflow: hidden; }

.dbt-acc-content {
  padding: .875rem 1.25rem 1.25rem;
  font-size: .87rem; line-height: 1.8;
  color: var(--ink-2);
}
.dbt-acc-content li   { margin-bottom: .45rem; }
.dbt-acc-content ul   { padding-left: 1.2rem; }
.dbt-acc-content p    { margin-bottom: .6rem; }
.dbt-acc-content p:last-child { margin-bottom: 0; }
.dbt-acc-content a    { color: var(--teal); }
.dbt-acc-content strong { color: var(--navy); }

/* ── Grille Contributions ────────────────────────────────────── */
.dbt-contrib-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.dbt-contrib-card {
  background: var(--white);
  border-top: 3px solid var(--teal);
  display: flex; flex-direction: column;
  transition: box-shadow .25s, transform .25s;
}
.dbt-contrib-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
  transform: translateY(-2px);
}

.dbt-contrib-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--navy);
}
.dbt-contrib-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s;
}
.dbt-contrib-card:hover .dbt-contrib-thumb img { transform: scale(1.04); }
.dbt-contrib-thumb-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(2,69,115,.3) 0%, rgba(2,69,115,.1) 100%);
}

.dbt-contrib-body {
  padding: 1rem 1.25rem 1.4rem;
  flex: 1; display: flex; flex-direction: column;
}
.dbt-contrib-cat {
  display: block;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .5rem;
}
.dbt-contrib-title {
  font-family: var(--serif);
  font-size: .98rem; font-weight: 400; line-height: 1.45;
  flex: 1; margin: 0 0 .6rem;
}
.dbt-contrib-title a { color: var(--navy); text-decoration: none; }
.dbt-contrib-title a:hover { color: var(--teal); }
.dbt-contrib-date { font-size: .7rem; color: var(--ink-3); margin-top: auto; }

/* ── Grille Wathinotes ───────────────────────────────────────── */
.dbt-wn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.dbt-wn-card {
  background: var(--white);
  padding: 1.25rem 1.5rem;
  border-left: 3px solid transparent;
  transition: border-color .15s, background .15s;
}
.dbt-wn-card:hover {
  border-left-color: var(--navy); background: var(--paper);
}
.dbt-wn-title {
  font-family: var(--serif);
  font-size: .94rem; font-weight: 400; line-height: 1.45;
  margin: 0 0 .4rem;
}
.dbt-wn-title a { color: var(--navy); text-decoration: none; }
.dbt-wn-title a:hover { color: var(--teal); }
.dbt-wn-date { font-size: .7rem; color: var(--ink-3); }

/* ── Grille Vidéos ───────────────────────────────────────────── */
.dbt-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.dbt-video-card {
  background: var(--white);
  border-top: 3px solid var(--orange);
  overflow: hidden;
}
.dbt-video-wrap {
  position: relative; padding-top: 56.25%;
  background: #000;
}
.dbt-video-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
.dbt-video-title {
  padding: .8rem 1rem;
  font-size: .8rem; line-height: 1.45;
  color: var(--navy); margin: 0;
  border-top: 1px solid var(--line);
}

/* ── Vide / empty ────────────────────────────────────────────── */
.dbt-empty { color: var(--ink-3); font-style: italic; padding: 2rem 0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dbt-hero-inner { max-width: 58%; }
}

@media (max-width: 900px) {
  .dbt-hero-inner    { max-width: 100%; }
  .dbt-hero-body     { padding: 64px 0 64px; }
  .dbt-acc-cols      { grid-template-columns: 1fr; }
  .dbt-contrib-grid  { grid-template-columns: 1fr 1fr; }
  .dbt-videos-grid   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .dbt-hero-body     { padding: 52px 0 52px; }
  .dbt-contrib-grid  { grid-template-columns: 1fr; }
  .dbt-wn-grid       { grid-template-columns: 1fr; }
  .dbt-videos-grid   { grid-template-columns: 1fr; }
  .dbt-section       { padding: 48px 0 56px; }
}

/* ════════════════════════════════════════════════════════════════
   PAGE ÉQUIPE PERMANENTE
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.team-hero {
  position: relative;
  margin-top: 105px;
  background: var(--navy);
  overflow: hidden;
  padding: 100px 0 0;
}

.team-hero-pattern {
  position: absolute; inset: 0;
  background-image: url('/wp-content/uploads/2021/02/Pattern-blue.png');
  background-size: 600px;
  opacity: .65;
  pointer-events: none;
}

.team-hero-inner {
  position: relative; z-index: 1;
  padding-bottom: 72px;
}

.team-eyebrow {
  font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
}

.team-hero-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 400; line-height: 1.08;
  color: var(--white);
  margin-bottom: 28px;
}

.team-hero-title em {
  font-style: italic;
  color: var(--orange);
}

.team-hero-rule {
  width: 48px; height: 3px;
  background: var(--orange);
  margin-bottom: 24px;
}

.team-hero-desc {
  font-size: .95rem; line-height: 1.8;
  color: rgba(255,255,255,.58);
}

.team-wathi-bar {
  display: flex; height: 4px;
  position: relative; z-index: 1;
}
.team-wathi-bar span { flex: 1; }

/* ── Section ─────────────────────────────────────────────── */
.team-section {
  padding: 80px 0 100px;
  background: var(--paper);
}

.team-section-header {
  margin-bottom: 56px;
}

.team-section-kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}

.team-section-kicker::before {
  content: '';
  display: inline-block; width: 28px; height: 1px;
  background: var(--teal); flex-shrink: 0;
}

.team-section-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400; line-height: 1.15;
  color: var(--ink);
}

/* Section alternée (chercheurs associés) */
.team-section--alt {
  background: var(--white);
}

/* Titre de section avec em italique */
.team-section-title em {
  font-style: italic;
  color: var(--teal);
}

/* ════════════════════════════════════════════════════════════════
   PAGE L'ASSOCIATION — /wathi/team/
   ════════════════════════════════════════════════════════════════ */

.asso-page {
  background: var(--paper);
  padding: 0 0 100px;
}

/* ── Intro hero paragraphes ──────────────────────────────── */
.team-hero-desc p {
  margin-bottom: 1rem;
  font-size: .95rem;
  line-height: 1.8;
  color: rgba(255,255,255,.58);
}
.team-hero-desc p:last-child { margin-bottom: 0; }

/* ── Onglets ─────────────────────────────────────────────── */
.asso-tabs {
  display: flex;
  border-bottom: 2px solid var(--line);
  margin-bottom: 0;
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.asso-tab {
  flex: 1;
  padding: 1.25rem 1.5rem;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  background: none; border: none; cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .15s var(--t), border-color .15s var(--t);
  line-height: 1;
}

.asso-tab:hover { color: var(--navy); }

.asso-tab.active {
  color: var(--navy);
  border-bottom-color: var(--rouge);
}

/* ── Panels ──────────────────────────────────────────────── */
.asso-panel {
  padding: 56px 0 0;
}

.asso-panel-intro {
  margin-bottom: 48px;
}

.asso-panel-intro p {
  font-size: .95rem; line-height: 1.8;
  color: var(--ink-2);
}

/* ── Grille comité ───────────────────────────────────────── */
.asso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.75rem;
  align-items: start;
}

/* ── Carte membre ────────────────────────────────────────── */
.asso-member {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--rouge);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s var(--t), transform .25s var(--t);
}

.asso-member:hover {
  box-shadow: 0 14px 40px rgba(0,0,0,.1);
  transform: translateY(-3px);
}

.asso-member-head {
  padding: 1.75rem 1.5rem 1.5rem;
}

.asso-member-avatar { display: none; }
.asso-member-meta { width: 100%; }

.asso-member-name {
  font-family: var(--serif);
  font-size: 1.3rem; font-weight: 400; line-height: 1.25;
  color: var(--navy);
  margin-bottom: 0;
}

.asso-member-name::after {
  content: '';
  display: block;
  width: 28px; height: 2px;
  background: var(--rouge);
  margin-top: .65rem;
  margin-bottom: .75rem;
}

.asso-member-poste {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal);
  line-height: 1.5;
  margin-bottom: .3rem;
}

.asso-member-pays {
  font-size: .72rem; font-weight: 400;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* ── Biographie ──────────────────────────────────────────── */
.asso-member-bio {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .875rem; line-height: 1.8;
  color: var(--ink-2);
}

.asso-member-bio p { margin-bottom: .75rem; }
.asso-member-bio p:last-child { margin-bottom: 0; }
.asso-member-bio hr { border: none; border-top: 1px solid var(--line); margin: 1rem 0; }

.asso-bio-lang {
  display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .5rem;
}

/* ── Bouton expand ───────────────────────────────────────── */
.asso-expand-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none; border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rouge);
  cursor: pointer;
  transition: background .15s var(--t), color .15s var(--t);
  margin-top: auto;
}

.asso-expand-btn:hover { background: var(--rouge); color: var(--white); }

.asso-expand-icon {
  width: 14px; height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex-shrink: 0;
}

.asso-expand-btn.open .asso-expand-icon { transform: rotate(-135deg); }

/* ── Section Membres & Amis ──────────────────────────────── */
.asso-membres-content {
  font-size: .95rem; line-height: 1.8;
  color: var(--ink-2);
}

.asso-membres-content p { margin-bottom: 1rem; }
.asso-membres-content p:last-child { margin-bottom: 0; }
.asso-membres-content hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
.asso-membres-content a { color: var(--teal); text-decoration: underline; }
.asso-membres-content a:hover { color: var(--navy); }
.asso-membres-content strong { color: var(--navy); }

.asso-empty {
  color: var(--ink-3); font-style: italic; font-size: .95rem;
  padding: 2rem 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .asso-tabs { position: static; }
  .asso-tab  { padding: 1rem .75rem; font-size: .65rem; }

  .asso-grid {
    grid-template-columns: 1fr;
  }

  .asso-panel { padding: 36px 0 0; }
  .asso-panel-intro { margin-bottom: 32px; }
}

@media (max-width: 480px) {
  .asso-member-head { padding: 1.5rem 1.25rem; }
  .asso-expand-btn  { padding: .875rem 1.25rem; }
  .asso-member-bio  { padding: 1rem 1.25rem 1.25rem; }
}

/* ── Grille membres ──────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.team-member {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s var(--t), box-shadow .2s var(--t), border-color .2s var(--t);
}

.team-member:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  border-color: var(--teal);
}

/* Photo */
.team-member-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  background: var(--line-2);
}

.team-member-photo-bg {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center top;
  transition: transform .4s ease;
}

.team-member:hover .team-member-photo-bg {
  transform: scale(1.04);
}

.team-member-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 1.25rem;
  background: linear-gradient(to top, rgba(0,70,113,.6) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .3s ease;
}

.team-member:hover .team-member-overlay { opacity: 1; }

.team-member-view-text {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white);
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  padding: .35rem .85rem;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.25);
}

.team-member-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-family: var(--serif);
  font-size: 4rem; font-weight: 400;
}

/* Info */
.team-member-info {
  padding: 1.25rem 1.25rem 1.125rem;
  border-top: 3px solid var(--line-2);
  background: var(--white);
  transition: border-color .2s var(--t);
}

.team-member:hover .team-member-info {
  border-top-color: var(--teal);
}

.team-member-name {
  font-size: 1.05rem; font-weight: 700;
  color: var(--navy);
  margin-bottom: .3rem;
  line-height: 1.25;
}

.team-member-position {
  font-size: .8rem; line-height: 1.5;
  color: var(--ink-3);
  margin-bottom: .85rem;
  padding-left: .9rem;
  position: relative;
}

.team-member-position::before {
  content: '';
  position: absolute; left: 0; top: .45em;
  width: 3px; height: 14px;
  background: var(--teal);
  border-radius: 2px;
}

/* Liens sociaux */
.team-member-links {
  display: flex; gap: .4rem;
}

.team-member-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--line-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: background .18s var(--t), color .18s var(--t), border-color .18s var(--t);
}

.team-member-link:hover           { background: var(--navy);   color: var(--white); border-color: var(--navy); }
.team-member-link.linkedin:hover  { background: #0077b5;       color: var(--white); border-color: #0077b5; }
.team-member-link.twitter:hover   { background: #1da1f2;       color: var(--white); border-color: #1da1f2; }
.team-member-link.facebook:hover  { background: #1877f2;       color: var(--white); border-color: #1877f2; }
.team-member-link.email:hover     { background: var(--orange); color: var(--white); border-color: var(--orange); }
.team-member-link.website:hover   { background: var(--teal);   color: var(--white); border-color: var(--teal); }

.team-member-link svg { width: 15px; height: 15px; }

/* ── Message vide ────────────────────────────────────────── */
.team-no-members {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 600px;
  margin: 0 auto;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: 4px;
  color: var(--ink-3);
  font-size: .95rem;
}

.team-no-members p   { margin-bottom: .75rem; }
.team-no-members em  { color: var(--navy); font-weight: 500; font-size: .875rem; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .team-hero { margin-top: 64px; padding: 64px 0 0; }
  .team-section { padding: 56px 0 72px; }
  .team-section-header { margin-bottom: 36px; }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-member { max-width: 340px; margin: 0 auto; }
}

/* ════════════════════════════════════════════════════════════════
   MODAL ÉQUIPE
   ════════════════════════════════════════════════════════════════ */

.team-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 10000;
  align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
}

.team-modal.team-modal-open { opacity: 1; }

.team-modal-content {
  background: var(--white);
  border-radius: 4px;
  max-width: 600px; width: 92%;
  max-height: 88vh; overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
  transform: translateY(16px);
  transition: transform .25s ease;
}

.team-modal-open .team-modal-content { transform: translateY(0); }

.team-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--line-2); color: var(--ink-3);
  font-size: 1.25rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  transition: background .15s var(--t), color .15s var(--t);
  z-index: 10;
}

.team-modal-close:hover { background: var(--navy); color: var(--white); }

.team-modal-header {
  display: flex; gap: 1.5rem;
  padding: 2rem;
  border-bottom: 1px solid var(--line);
}

.team-modal-photo {
  flex-shrink: 0;
  width: 96px; height: 96px;
  border-radius: 4px; overflow: hidden;
}

.team-modal-photo-bg {
  width: 100%; height: 100%;
  background-size: cover; background-position: center top;
}

.team-modal-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-family: var(--serif); font-size: 2.5rem; font-weight: 400;
}

.team-modal-info { flex: 1; min-width: 0; }

.team-modal-name {
  font-family: var(--serif);
  font-size: 1.6rem; font-weight: 400;
  color: var(--navy); line-height: 1.2;
  margin-bottom: .4rem;
}

.team-modal-position {
  font-size: .85rem; line-height: 1.5;
  color: var(--ink-3);
  margin-bottom: .85rem;
  padding-left: 1rem; position: relative;
}

.team-modal-position::before {
  content: '';
  position: absolute; left: 0; top: .4em;
  width: 3px; height: 14px;
  background: var(--teal); border-radius: 2px;
}

.team-modal-links { display: flex; gap: .4rem; }

.team-modal-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--line-2); color: var(--ink-3);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: background .18s var(--t), color .18s var(--t), border-color .18s var(--t);
}

.team-modal-link:hover           { background: var(--navy);   color: var(--white); border-color: var(--navy); }
.team-modal-link.linkedin:hover  { background: #0077b5;       color: var(--white); border-color: #0077b5; }
.team-modal-link.twitter:hover   { background: #1da1f2;       color: var(--white); border-color: #1da1f2; }
.team-modal-link.facebook:hover  { background: #1877f2;       color: var(--white); border-color: #1877f2; }
.team-modal-link.email:hover     { background: var(--orange); color: var(--white); border-color: var(--orange); }
.team-modal-link.website:hover   { background: var(--teal);   color: var(--white); border-color: var(--teal); }

.team-modal-link svg { width: 15px; height: 15px; }

.team-modal-bio { padding: 2rem; }

.team-modal-bio h3 {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 600;
  color: var(--navy); margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}

.team-modal-bio-content {
  font-size: .9rem; line-height: 1.8;
  color: var(--ink-2);
}

.team-modal-bio-content p              { margin-bottom: .75rem; }
.team-modal-bio-content p:last-child   { margin-bottom: 0; }
.team-modal-bio-content ul,
.team-modal-bio-content ol             { margin-bottom: .75rem; padding-left: 1.5rem; }
.team-modal-bio-content li             { margin-bottom: .4rem; }
.team-modal-bio-content strong,
.team-modal-bio-content b              { font-weight: 600; color: var(--navy); }
.team-modal-bio-content em,
.team-modal-bio-content i              { font-style: italic; color: var(--teal); }

/* Responsive modal */
@media (max-width: 768px) {
  .team-modal-content { width: 96%; max-height: 92vh; }
  .team-modal-header  { flex-direction: column; text-align: center; padding: 1.5rem; }
  .team-modal-photo   { align-self: center; }
  .team-modal-position { padding-left: 0; }
  .team-modal-position::before { display: none; }
  .team-modal-links   { justify-content: center; }
  .team-modal-bio     { padding: 1.5rem; }
}




/* ════════════════════════════════════════════════════════════════
   PAGE TRIBUNE WATHI — page-tribune.php
   ════════════════════════════════════════════════════════════════ */

/* ── Hero : masthead éditorial (fond blanc + pattern discret) ──── */
.trb-hero {
  background: var(--white);
  margin-top: 105px;
  position: relative;
  overflow: hidden;
}

.trb-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/wp-content/uploads/2021/02/pattern_sur_boite.png') 0 0 repeat;
  background-size: 520px;
  opacity: .45;
  pointer-events: none;
}

.trb-hero-wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 0;
  min-height: 300px;
}

/* Colonne gauche : Titre + règle couleur */
.trb-hero-left {
  padding: 64px 48px 64px 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.trb-hero-kicker {
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.25rem;
}

.trb-hero-title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  font-weight: 400; line-height: .95;
  color: var(--navy);
}

/* Règle 4-couleurs en bas du titre */
.trb-hero-rule {
  display: flex;
  gap: 4px;
  margin-top: 2rem;
}
.trb-hero-rule span {
  height: 4px;
  flex: 1;
  border-radius: 2px;
}

/* Colonne droite : Description + CTA */
.trb-hero-right {
  padding: 64px 0 64px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

.trb-hero-desc {
  font-size: 1rem; line-height: 1.8;
  color: var(--ink-2);
  max-width: 620px;
}

.trb-hero-submit {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans);
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color .15s, border-color .15s;
}
.trb-hero-submit svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform .2s; }
.trb-hero-submit:hover { color: var(--orange); }
.trb-hero-submit:hover svg { transform: translateX(3px); }

/* ── Bande "Dernières tribunes" (3 vignettes, fond navy) ───────── */
.trb-latest {
  background: var(--navy);
  padding: 0;
  position: relative;
  overflow: hidden;
}
/* Couleur du fond = pastille de la rubrique */
.trb-latest--rouge  { background: var(--rouge); }
.trb-latest--orange { background: var(--orange); }
.trb-latest--teal   { background: var(--teal); }
.trb-latest--sky    { background: var(--sky); }
.trb-latest--navy   { background: var(--navy); }

/* Ajustements de contraste pour les fonds clairs (orange, sky) :
   l'auteur en orange disparaîtrait sur orange, et le blanc est peu lisible sur sky */
.trb-latest--orange .trb-latest-author { color: var(--navy); }
.trb-latest--sky .trb-latest-author    { color: var(--navy); }
.trb-latest--sky .trb-latest-meta      { color: rgba(0,28,54,.6); }
.trb-latest--sky .trb-latest-title     { color: var(--ink); }

.trb-latest::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/wp-content/uploads/2021/02/Pattern-blue.png') repeat;
  background-size: 480px;
  opacity: .3;
  pointer-events: none;
}

.trb-latest-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.12);
}

.trb-latest-card {
  background: transparent;
  padding: 2rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: background .2s;
  text-decoration: none;
}
.trb-latest-card:hover { background: rgba(255,255,255,.07); }

.trb-latest-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  margin-bottom: .25rem;
}
.trb-latest-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s;
  opacity: .85;
}
.trb-latest-card:hover .trb-latest-card-img img { transform: scale(1.04); opacity: 1; }

.trb-latest-meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-family: var(--sans); font-size: .7rem;
  color: rgba(255,255,255,.5);
}

.trb-latest-author {
  font-weight: 700;
  color: var(--orange);
}

.trb-latest-title {
  font-family: var(--serif);
  font-size: 1.02rem; font-weight: 400; line-height: 1.45;
  color: rgba(255,255,255,.9);
}

/* ── Barre de navigation (filtres + compteur) ─────────────────── */
.trb-nav {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0;
}

.trb-nav-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.trb-nav-inner::-webkit-scrollbar { display: none; }

.trb-nav-group {
  display: flex;
  align-items: center;
  border-right: 1px solid var(--line);
  padding: 0 1.25rem;
  gap: .5rem;
  flex-shrink: 0;
}
.trb-nav-group:last-child { border-right: none; margin-left: auto; }

.trb-nav-label {
  font-family: var(--sans);
  font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.trb-nav-pills { display: flex; gap: .25rem; }

.trb-nav-pill {
  background: transparent; border: none;
  font-family: var(--sans);
  font-size: .75rem; font-weight: 500;
  color: var(--ink-2);
  padding: .65rem .75rem;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color .15s;
}
.trb-nav-pill::after {
  content: '';
  position: absolute; bottom: 0; left: .75rem; right: .75rem;
  height: 2px; background: var(--navy);
  transform: scaleX(0); transform-origin: center;
  transition: transform .2s;
}
.trb-nav-pill:hover { color: var(--navy); }
.trb-nav-pill.active { color: var(--navy); font-weight: 700; }
.trb-nav-pill.active::after { transform: scaleX(1); }

.trb-nav-count {
  font-family: var(--sans);
  font-size: .75rem;
  color: var(--ink-3);
  white-space: nowrap;
  padding: 0 .5rem;
}

/* ── Grille principale ────────────────────────────────────────── */
.trb-main {
  background: var(--white);
  padding: 48px 0 80px;
}

.trb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

.trb-card {
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: background .15s;
}
.trb-card:hover { background: var(--paper); }

.trb-card-img-wrap {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--line);
  flex-shrink: 0;
}
.trb-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s;
}
.trb-card:hover .trb-card-img-wrap img { transform: scale(1.04); }

.trb-card-no-img {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--paper) 0%, var(--line) 100%);
}

.trb-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  display: flex; flex-direction: column; gap: .6rem;
  border-top: 2px solid var(--teal);
}

.trb-card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  font-family: var(--sans); font-size: .7rem; color: var(--ink-3);
}

.trb-card-author {
  font-weight: 700;
  color: var(--navy);
}

.trb-lang-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: .54rem; font-weight: 700; letter-spacing: .08em;
  border: 1px solid currentColor;
  border-radius: 2px; padding: .1em .4em;
  color: var(--teal); vertical-align: middle;
}

.trb-card-title {
  font-family: var(--serif);
  font-size: .98rem; font-weight: 400; line-height: 1.5;
  color: var(--navy);
  flex: 1;
}
.trb-card-title a { color: inherit; text-decoration: none; }
.trb-card-title a:hover { color: var(--teal); }

/* ── Voir plus ────────────────────────────────────────────────── */
.trb-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.trb-loadmore-btn {
  display: inline-flex; align-items: center; gap: .75rem;
  background: var(--navy);
  color: var(--white);
  font-family: var(--sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  padding: .875rem 2.25rem;
  border: none; cursor: pointer; border-radius: 2px;
  transition: background .2s, opacity .2s;
}
.trb-loadmore-btn:hover { background: var(--teal); }
.trb-loadmore-btn:disabled { opacity: .4; cursor: default; }

.trb-loadmore-info {
  font-size: .75rem; color: var(--ink-3);
}

.trb-empty {
  text-align: center;
  padding: 4rem 0;
  font-style: italic; color: var(--ink-3);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .trb-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .trb-hero-wrap { grid-template-columns: 1fr; }
  .trb-hero-left { border-right: none; border-bottom: 1px solid var(--line); padding: 48px 0 32px; }
  .trb-hero-right { padding: 32px 0 48px; }
  .trb-latest-inner { grid-template-columns: 1fr 1fr; }
}

/* ── Lien 10 ans dans le header ─────────────────────────── */
.hd-10ans {
  display: inline-flex; align-items: center; gap: 5px;
  color: #C9922A !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  position: relative;
}
.hd-10ans:hover { color: #e8a830 !important; }
.hd-10ans-icon { font-size: 13px; line-height: 1; flex-shrink: 0; }
.hd-10ans::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: #C9922A;
  border-radius: 1px;
  opacity: .6;
}

/* ════════════════════════════════════════════════════════════
   10 ANS DE WATHI — Page anniversaire
════════════════════════════════════════════════════════════ */
:root { --gold: #C9922A; --gold-light: #f5c86a; --ann-teal: #008F98; }

/* ── Hero ──────────────────────────────────────────────── */
.ann-hero {
  position: relative;
  background: var(--navy);
  margin-top: 105px;
  overflow: hidden;
}
.ann-hero-pattern {
  position: absolute; inset: 0;
  background: url('/wp-content/uploads/2021/02/Pattern-blue.png') 0 0 repeat;
  background-size: 480px;
  opacity: .07;
  pointer-events: none;
}
/* ── Hero inner layout ─────────────────────────────────── */
.ann-hero-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  align-items: flex-start;
  padding: 56px 0 64px;
}
.ann-hero-logo-wrap { flex-shrink: 0; }
.ann-hero-logo {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  border-radius: 4px;
}
/* Texte hero */
.ann-hero-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700; line-height: 1.15;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.ann-hero-body {
  font-size: .96rem; line-height: 1.75;
  color: rgba(255,255,255,.75);
}
.ann-hero-body p { margin-bottom: .9em; }
.ann-hero-body p:last-child { margin-bottom: 0; }
/* Barre 4 couleurs */
.ann-hero-bar { display: flex; height: 5px; }
.ann-hero-bar span { flex: 1; }

/* ── En-tête de section (bande teal) ───────────────────── */
.ann-section-head { padding: 0; }
.ann-section-head--teal { background: var(--ann-teal); }
.ann-section-head-title {
  font-family: var(--sans);
  font-size: .85rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--white);
  padding: 14px 0;
  margin: 0;
}

/* ── Événements ────────────────────────────────────────── */
.ann-events { background: var(--white); padding-bottom: 64px; }
.ann-events-list {
  display: flex; flex-direction: column;
  gap: 0;
  padding-top: 0;
  border: 1px solid var(--line);
  border-top: none;
  margin-top: 0;
}
.ann-event-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.ann-event-card:last-child { border-bottom: none; }
.ann-event-card-img {
  display: block; overflow: hidden;
  aspect-ratio: 4/3;
}
.ann-event-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.ann-event-card:hover .ann-event-card-img img { transform: scale(1.04); }
.ann-event-card-body {
  padding: 28px 32px;
  display: flex; flex-direction: column; justify-content: center;
}
.ann-event-type {
  font-family: var(--sans);
  font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ann-teal);
  margin-bottom: .6rem;
}
.ann-event-title {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 400; line-height: 1.35;
  margin-bottom: .75rem;
}
.ann-event-title a { color: var(--navy); }
.ann-event-title a:hover { color: var(--ann-teal); }
.ann-event-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
}
.ann-event-date, .ann-event-lieu {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; color: var(--ink-3);
}
.ann-event-date svg, .ann-event-lieu svg { width: 13px; height: 13px; flex-shrink: 0; }
.ann-empty-msg {
  padding: 48px 0; text-align: center;
  font-size: .9rem; color: var(--ink-3);
}

/* ── Sections vidéos ───────────────────────────────────── */
.ann-videos--dark {
  background: #1a2030;
  padding: 52px 0 64px;
}
.ann-videos--light {
  background: var(--white);
  padding-bottom: 0;
}
.ann-videos-title {
  font-family: var(--serif);
  font-size: 1.35rem; font-weight: 400;
  color: var(--white);
  margin-bottom: 2rem;
}
.ann-videos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.ann-video-link { display: block; }
.ann-video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0a0e1a;
}
.ann-video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease, opacity .3s ease;
}
.ann-video-link:hover .ann-video-thumb img { transform: scale(1.05); opacity: .85; }
.ann-video-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ann-video-play svg { width: 44px; height: 44px; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ann-videos-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .ann-hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .ann-hero-logo { max-width: 180px; }
  .ann-event-card { grid-template-columns: 1fr; }
  .ann-event-card-img { aspect-ratio: 16/7; }
  .ann-videos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ann-videos-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .ann-event-card-body { padding: 20px; }
}

@media (max-width: 640px) {
  .trb-grid { grid-template-columns: 1fr; }
  .trb-latest-inner { grid-template-columns: 1fr; }
  .trb-hero-title { font-size: clamp(3.5rem, 14vw, 5rem); }
}


/* ═══════════════════════════════════════════════════════════════
   ÉVÉNEMENTS — page-evenements.php
═══════════════════════════════════════════════════════════════ */

/* ── HERO COMPACT ──────────────────────────────────────────── */
.evt-hero {
  background: var(--navy);
  padding: 120px 0 0;
  position: relative;
  overflow: hidden;
}
.evt-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--pattern-blue);
  background-size: 600px; opacity: .04;
  pointer-events: none;
}
.evt-hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 44px;
}
@media (max-width: 768px) { .evt-hero-inner { padding: 0 24px 32px; } }

.evt-hero-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
}
@media (max-width: 760px) {
  .evt-hero-row { grid-template-columns: 1fr; gap: 28px; }
}

.evt-kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 18px;
}
.evt-kicker-line {
  display: inline-block; width: 28px; height: 2px;
  background: var(--rouge); flex-shrink: 0;
}

.evt-hero-title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 6.5vw, 5rem);
  font-weight: 400; line-height: .95;
  color: var(--white); letter-spacing: -.02em;
  margin-bottom: 16px;
}

.evt-hero-desc {
  font-family: var(--serif); font-size: 1rem;
  font-style: italic; color: rgba(255,255,255,.55);
  line-height: 1.65; max-width: 580px;
}

.evt-hero-stats {
  display: flex; flex-wrap: wrap; gap: 28px;
  padding-bottom: 4px;
}
.evt-stat {
  display: flex; flex-direction: column; gap: 4px;
}
.evt-stat-n {
  font-family: var(--serif); font-size: 2.2rem; font-weight: 400;
  line-height: 1; color: var(--white); letter-spacing: -.02em;
}
.evt-stat-l {
  font-family: var(--sans); font-size: .55rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.evt-stat--accent .evt-stat-n { color: var(--orange); }
.evt-stat--accent .evt-stat-l { color: var(--orange); opacity: .75; }

.evt-hero-bar {
  height: 4px;
  background: linear-gradient(to right,
    var(--rouge) 0% 25%, var(--orange) 25% 50%,
    var(--teal) 50% 75%, var(--sky) 75% 100%);
}

/* ── SECTION HEADER COMMUN ─────────────────────────────────── */
.evt-sec-head {
  display: flex; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 48px;
}
.evt-sec-kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 12px;
}
.evt-sec-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1;
  color: var(--ink); letter-spacing: -.01em;
}
.evt-sec-count {
  font-family: var(--sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Pastille pulse pour "à venir" */
.evt-pulse {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--rouge);
  position: relative;
}
.evt-pulse::before {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--rouge);
  animation: evt-pulse 1.8s cubic-bezier(.66,0,.34,1) infinite;
}
@keyframes evt-pulse {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* ── ÉVÉNEMENT MIS EN AVANT (à venir) ──────────────────────── */
.evt-upcoming {
  background: var(--white);
  padding: 88px 0;
  border-bottom: 1px solid var(--line);
}

.evt-feat {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--paper);
  margin-bottom: 56px;
  min-height: 420px;
}
@media (max-width: 900px) {
  .evt-feat { grid-template-columns: 1fr; min-height: auto; }
}

.evt-feat-media {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--navy) 80%, black);
  min-height: 360px;
}
.evt-feat-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  position: absolute; inset: 0;
  filter: saturate(.9);
}
.evt-feat-media-empty {
  width: 100%; height: 100%;
  background-image: var(--pattern-blue);
  background-size: 400px; opacity: .15;
}

/* Datebox sur l'image */
.evt-feat-datebox {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column;
  background: var(--rouge);
  color: var(--white);
  padding: 18px 22px 14px;
  text-align: center;
}
.evt-feat-day {
  font-family: var(--serif); font-size: 2.4rem;
  font-weight: 400; line-height: 1; letter-spacing: -.02em;
}
.evt-feat-month {
  font-family: var(--sans); font-size: .65rem; font-weight: 700;
  letter-spacing: .2em; margin-top: 6px;
}
.evt-feat-year {
  font-family: var(--sans); font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; opacity: .8; margin-top: 2px;
}

.evt-feat-body {
  padding: 48px 56px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 18px;
}
@media (max-width: 900px) { .evt-feat-body { padding: 36px 28px; } }

.evt-feat-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.evt-feat-loc {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  color: var(--ink-3); letter-spacing: .02em;
}
.evt-feat-loc svg { width: 13px; height: 13px; }

.evt-feat-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15;
  color: var(--ink); letter-spacing: -.01em;
}
.evt-feat-title a { transition: color .2s; text-decoration: none; }
.evt-feat-title a:hover { color: var(--rouge); }

.evt-feat-sub {
  font-family: var(--serif); font-size: 1rem;
  color: var(--ink-2); line-height: 1.65; font-style: italic;
}

.evt-feat-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

/* ── BOUTONS ───────────────────────────────────────────────── */
.evt-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 22px;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.evt-btn svg { width: 14px; height: 14px; }
.evt-btn--primary {
  background: var(--rouge); color: var(--white);
  border: 1px solid var(--rouge);
}
.evt-btn--primary:hover {
  background: color-mix(in srgb, var(--rouge) 85%, black);
  border-color: color-mix(in srgb, var(--rouge) 85%, black);
}
.evt-btn--ghost {
  background: transparent; color: var(--navy);
  border: 1px solid var(--navy);
}
.evt-btn--ghost:hover { background: var(--navy); color: var(--white); }

/* ── TAGS ─────────────────────────────────────────────────── */
.evt-tag {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px;
}
.evt-tag--live { background: var(--rouge); color: var(--white); }
.evt-tag--past { background: var(--ink); color: var(--white); opacity: .7; }

/* ── GRILLE CARDS ─────────────────────────────────────────── */
.evt-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) { .evt-card-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 560px) { .evt-card-grid { grid-template-columns: 1fr; gap: 20px; } }

.evt-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.evt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(0,12,30,.18);
  border-color: var(--line);
}

.evt-card-media {
  position: relative; display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--navy);
}
.evt-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.85);
  transition: transform .5s, filter .4s;
}
.evt-card:hover .evt-card-media img {
  transform: scale(1.05); filter: saturate(1);
}
.evt-card-media-empty {
  width: 100%; height: 100%;
  background-image: var(--pattern-blue);
  background-size: 300px; opacity: .12;
}

/* Datebox sur cards */
.evt-card-datebox {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column;
  background: var(--rouge); color: var(--white);
  padding: 12px 16px 10px;
  text-align: center;
}
.evt-card-datebox--past { background: var(--ink); opacity: .9; }
.evt-card-day {
  font-family: var(--serif); font-size: 1.6rem;
  font-weight: 400; line-height: 1;
}
.evt-card-month {
  font-family: var(--sans); font-size: .55rem; font-weight: 700;
  letter-spacing: .18em; margin-top: 4px;
}
.evt-card-year {
  font-family: var(--sans); font-size: .5rem; font-weight: 500;
  letter-spacing: .14em; opacity: .75; margin-top: 2px;
}

.evt-card-body {
  padding: 24px 24px 20px; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.evt-card-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--sans); font-size: .68rem;
  color: var(--ink-3); font-weight: 500;
}
.evt-card-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.1rem; line-height: 1.3;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.evt-card-title a { text-decoration: none; transition: color .2s; }
.evt-card-title a:hover { color: var(--rouge); }
.evt-card-sub {
  font-family: var(--serif); font-size: .88rem;
  color: var(--ink-3); font-style: italic; line-height: 1.5;
}

.evt-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.evt-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; color: var(--navy);
  text-decoration: none; transition: color .2s, gap .2s;
}
.evt-card-link:hover { color: var(--rouge); gap: 8px; }
.evt-card-link--replay {
  color: #c4302b;
}
.evt-card-link--replay svg { width: 12px; height: 12px; }
.evt-card-link--replay:hover { color: #c4302b; }

.evt-card--hidden { display: none; }

/* ── ÉVÉNEMENTS PASSÉS ────────────────────────────────────── */
.evt-past {
  background: var(--paper);
  padding: 88px 0;
}

.evt-more {
  text-align: center;
  margin-top: 56px;
}
.evt-more-btn {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); background: none;
  border: 1px solid var(--ink);
  padding: 16px 36px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.evt-more-btn:hover {
  background: var(--navy); color: var(--white); border-color: var(--navy);
}
.evt-more-count {
  font-weight: 400; color: var(--ink-3); margin-left: 6px;
}
.evt-more-btn:hover .evt-more-count { color: rgba(255,255,255,.5); }

/* ── REPLAYS YOUTUBE — en héros, juste après le hero ──────── */
.evt-replays {
  background: color-mix(in srgb, var(--navy) 96%, black);
  padding: 72px 0 80px;
  position: relative; overflow: hidden;
}
.evt-replays::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--pattern-gray);
  background-size: 600px; opacity: .03;
  pointer-events: none;
}
.evt-replays .wrap { position: relative; z-index: 1; }

.evt-replays-head {
  display: flex; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 40px;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.evt-replays-kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 16px;
}
.evt-replays-kicker svg {
  width: 18px; height: 18px; color: #FF0000;
}

.evt-replays-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1;
  color: var(--white); letter-spacing: -.02em;
  margin-bottom: 18px;
}
.evt-replays-title em { font-style: italic; color: var(--orange); }

.evt-replays-desc {
  font-family: var(--serif); font-size: 1rem;
  font-style: italic; color: rgba(255,255,255,.55);
  line-height: 1.65; max-width: 520px;
}

.evt-replays-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,.25);
  text-decoration: none;
  transition: background .2s, border-color .2s, gap .2s;
  flex-shrink: 0;
}
.evt-replays-cta svg { width: 14px; height: 14px; }
.evt-replays-cta:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
  gap: 14px;
}

/* Grille de replays */
.evt-replays-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .evt-replays-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .evt-replays-grid { grid-template-columns: 1fr; } }

.evt-replay {
  position: relative; display: block;
  aspect-ratio: 16/9;
  background: #000;
  border: none; padding: 0; cursor: pointer;
  overflow: hidden;
  transition: transform .3s;
}
.evt-replay:hover { transform: translateY(-3px); }

.evt-replay-thumb {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  filter: saturate(.9) brightness(.85);
  transition: filter .4s, transform .5s;
}
.evt-replay:hover .evt-replay-thumb {
  filter: saturate(1) brightness(1); transform: scale(1.05);
}

/* Bouton play centré */
.evt-replay-play {
  position: absolute; top: 50%; left: 50%;
  width: 60px; height: 60px;
  transform: translate(-50%, -50%);
  background: rgba(255,0,0,.95);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: transform .25s ease, background .2s;
}
.evt-replay-play svg {
  width: 28px; height: 28px; color: var(--white);
  margin-left: 3px;
}
.evt-replay:hover .evt-replay-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #FF0000;
}

/* Logo YouTube discret en coin */
.evt-replay-brand {
  position: absolute; top: 14px; right: 14px;
  width: 24px; height: 24px;
  color: rgba(255,255,255,.55);
  transition: color .2s;
}
.evt-replay-brand svg { width: 100%; height: 100%; }
.evt-replay:hover .evt-replay-brand { color: var(--white); }

/* Empty state */
.evt-replays-empty {
  text-align: center;
  padding: 48px 24px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.15);
}
.evt-replays-empty p {
  font-family: var(--serif); font-size: 1rem;
  color: rgba(255,255,255,.6); font-style: italic;
  margin-bottom: 24px;
}
.evt-replays-empty code {
  font-family: 'SF Mono', Menlo, monospace;
  background: rgba(255,255,255,.08);
  padding: 2px 8px; font-size: .85em;
  color: var(--orange);
}

/* ── MODAL VIDÉO ──────────────────────────────────────────── */
.evt-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.evt-modal[hidden] { display: none; }
.evt-modal-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: evt-modal-fade .2s ease;
}
@keyframes evt-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.evt-modal-inner {
  position: relative;
  width: 92%; max-width: 1100px;
  animation: evt-modal-pop .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes evt-modal-pop {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.evt-modal-close {
  position: absolute; top: -48px; right: 0;
  width: 36px; height: 36px;
  background: none; border: none; cursor: pointer;
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s;
}
.evt-modal-close:hover { opacity: .7; }
.evt-modal-close svg { width: 22px; height: 22px; }

.evt-modal-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  box-shadow: 0 32px 64px rgba(0,0,0,.5);
}
.evt-modal-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ── RESPONSIVE GLOBAL ────────────────────────────────────── */
@media (max-width: 768px) {
  .evt-hero       { padding: 100px 0 0; }
  .evt-upcoming   { padding: 56px 0; }
  .evt-past       { padding: 56px 0; }
  .evt-replays    { padding: 64px 0; }
  .evt-sec-head   { margin-bottom: 32px; }
  .evt-stat       { padding-right: 24px; margin-right: 20px; }
}


/* ══════════════════════════════════════════════════════════════
   SECTION LISTE ÉVÉNEMENTS — onglets À VENIR / PASSÉS
══════════════════════════════════════════════════════════════ */
.evt-list {
  background: var(--paper);
  padding: 80px 0 96px;
}

.evt-list-head {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 32px;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--ink);
}
.evt-list-titlewrap { padding-bottom: 24px; }
.evt-list-kicker {
  font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rouge); margin-bottom: 10px;
}
.evt-list-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1; color: var(--ink); letter-spacing: -.01em;
}

/* Onglets */
.evt-tabs {
  display: flex; align-items: stretch; gap: 0;
  margin-bottom: -2px; /* overlay le border-bottom du parent */
}
.evt-tab {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  background: none; border: none;
  padding: 14px 24px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.evt-tab:hover { color: var(--ink); }
.evt-tab.is-active {
  color: var(--ink); border-color: var(--rouge);
}
.evt-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .04em;
  background: var(--line); color: var(--ink-3);
  border-radius: 12px;
  transition: background .2s, color .2s;
}
.evt-tab.is-active .evt-tab-count {
  background: var(--rouge); color: var(--white);
}
.evt-tab .evt-pulse { width: 8px; height: 8px; }

/* Panels */
.evt-tab-panel {
  display: none;
  padding-top: 40px;
  animation: evt-fade .25s ease;
}
.evt-tab-panel.is-active { display: block; }
@keyframes evt-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card foot avec span vide pour alignement */
.evt-card-foot > span:empty { flex: 1; }

/* Accent link (pour S'inscrire) */
.evt-card-link--accent {
  color: var(--rouge);
}
.evt-card-link--accent:hover { color: color-mix(in srgb, var(--rouge) 80%, black); }

/* Responsive onglets */
@media (max-width: 640px) {
  .evt-list-head { gap: 16px; }
  .evt-list-titlewrap { padding-bottom: 12px; }
  .evt-tabs { width: 100%; }
  .evt-tab { flex: 1; justify-content: center; padding: 12px 8px; font-size: .65rem; }
  .evt-tab-panel { padding-top: 28px; }
}


/* ══════════════════════════════════════════════════════════════
   VIDÉOS iframe responsives (migration WPBakery)
══════════════════════════════════════════════════════════════ */
.wathi-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin: 28px 0;
  background: #000;
  overflow: hidden;
}
.wathi-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.wathi-video-caption {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-3);
  font-style: italic;
  text-align: center;
  margin: -16px 0 28px;
  line-height: 1.5;
}

/* Variantes par provider — utile pour personnalisations futures */
.wathi-video--youtube { /* hook */ }
.wathi-video--vimeo   { /* hook */ }
.wathi-video--other   { /* hook */ }

/* Compat : nettoyer styles inline width="200" sur anciens iframes mal formés */
.wathi-video iframe[width],
.wathi-video iframe[height] {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 640px) {
  .wathi-video { margin: 20px 0; }
}


/* ══════════════════════════════════════════════════════════════
   CONTACT — page-contact.php
══════════════════════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────────────────────────── */
.ctc-hero {
  background: var(--navy);
  padding-top: 120px;
  position: relative;
  overflow: hidden;
}
.ctc-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--pattern-blue);
  background-size: 600px; opacity: .03;
  pointer-events: none;
}
.ctc-hero-inner {
  position: relative; z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 64px;
}
@media (max-width: 768px) { .ctc-hero-inner { padding: 0 24px 48px; } }

.ctc-kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 22px;
}
.ctc-kicker-line {
  display: inline-block; width: 28px; height: 2px;
  background: var(--rouge); flex-shrink: 0;
}

.ctc-hero-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 400; line-height: .95;
  color: var(--white); letter-spacing: -.02em;
  margin-bottom: 24px;
}
.ctc-hero-desc {
  font-family: var(--serif); font-size: 1.1rem;
  font-style: italic; color: rgba(255,255,255,.6);
  line-height: 1.65; max-width: 640px;
}
.ctc-hero-bar {
  height: 4px;
  background: linear-gradient(to right,
    var(--rouge) 0% 25%, var(--orange) 25% 50%,
    var(--teal) 50% 75%, var(--sky) 75% 100%);
}

/* ── GRILLE PRINCIPALE ──────────────────────────────────────── */
.ctc-main {
  background: var(--paper);
  padding: 80px 0 88px;
}
.ctc-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 960px) {
  .ctc-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ── COLONNE GAUCHE — coordonnées ───────────────────────────── */
.ctc-side {
  display: flex; flex-direction: column; gap: 28px;
}

.ctc-side-block {
  background: var(--white);
  padding: 28px 28px 32px;
  border: 1px solid var(--line);
}

.ctc-side-kicker {
  font-family: var(--sans); font-size: .58rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 12px;
}
.ctc-side-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.3rem; line-height: 1.2;
  color: var(--ink); letter-spacing: -.005em;
  margin-bottom: 20px;
}

/* Email */
.ctc-email {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  padding: 14px 16px;
  background: var(--paper);
  border-left: 3px solid var(--rouge);
  transition: background .2s, color .2s;
}
.ctc-email svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--rouge); }
.ctc-email:hover { background: color-mix(in srgb, var(--rouge) 8%, var(--white)); color: var(--rouge); }

/* Socials */
.ctc-socials {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--line);
}
.ctc-soc {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: .85rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  transition: color .2s, padding-left .2s;
}
.ctc-soc svg { color: var(--ink-3); transition: color .2s; flex-shrink: 0; }
.ctc-soc:hover { color: var(--ink); padding-left: 8px; }
.ctc-soc:hover svg { color: var(--rouge); }

/* Info block */
.ctc-side-block--info { background: var(--paper); border: none; border-left: 3px solid var(--teal); padding-left: 24px; }
.ctc-side-text {
  font-family: var(--serif); font-size: .95rem;
  color: var(--ink-2); line-height: 1.65; font-style: italic;
  margin-bottom: 16px;
}
.ctc-side-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: color .2s, gap .2s;
}
.ctc-side-link svg { width: 14px; height: 14px; }
.ctc-side-link:hover { color: var(--rouge); gap: 12px; }

/* ── FORMULAIRE ──────────────────────────────────────────── */
.ctc-form-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 40px 44px 48px;
}
@media (max-width: 600px) { .ctc-form-wrap { padding: 28px 22px 32px; } }

.ctc-form-head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.ctc-form-kicker {
  font-family: var(--sans); font-size: .58rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rouge); margin-bottom: 10px;
}
.ctc-form-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.1;
  color: var(--ink); letter-spacing: -.01em;
  margin-bottom: 12px;
}
.ctc-form-intro {
  font-family: var(--serif); font-size: 1rem;
  font-style: italic; color: var(--ink-3); line-height: 1.55;
}

/* Formulaire natif WATHI */
.ctc-form { display: flex; flex-direction: column; gap: 20px; }

.ctc-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.ctc-field { display: flex; flex-direction: column; gap: 8px; }

.ctc-field label {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.ctc-field label span { color: var(--rouge); font-weight: 800; }

.ctc-field input[type="text"],
.ctc-field input[type="email"],
.ctc-field textarea,
.ctc-field select {
  width: 100%;
  font-family: var(--sans); font-size: .95rem; font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 12px 14px;
  transition: border-color .15s, background .15s, box-shadow .15s;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.ctc-field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }

.ctc-field input::placeholder,
.ctc-field textarea::placeholder {
  color: var(--ink-3); font-style: italic; opacity: 1;
}

.ctc-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' stroke='%237F7F7F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
  cursor: pointer;
}

.ctc-field input:focus,
.ctc-field textarea:focus,
.ctc-field select:focus {
  outline: none;
  border-color: var(--rouge);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(217, 84, 65, .12);
}

/* Champ en erreur */
.ctc-field--err input,
.ctc-field--err textarea,
.ctc-field--err select {
  border-color: var(--rouge);
  background: rgba(217, 84, 65, .04);
}

/* Row de champs (catégorie + sujet côte à côte) */
.ctc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) {
  .ctc-field-row { grid-template-columns: 1fr; }
}

/* Footer du formulaire */
.ctc-form-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.ctc-form-note {
  font-family: var(--sans); font-size: .7rem;
  color: var(--ink-3); line-height: 1.55;
  max-width: 320px; margin: 0;
}
.ctc-form-note span { color: var(--rouge); font-weight: 700; }

.ctc-submit {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 14px 32px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.ctc-submit svg { width: 14px; height: 14px; transition: transform .2s; }
.ctc-submit:hover {
  background: var(--rouge);
  border-color: var(--rouge);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(217, 84, 65, .5);
}
.ctc-submit:hover svg { transform: translateX(3px); }

/* Messages de feedback */
.ctc-msg {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-family: var(--sans); font-size: .88rem;
  line-height: 1.5;
  border-left: 4px solid;
}
.ctc-msg svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.ctc-msg strong { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 2px; }
.ctc-msg span { display: block; font-size: .85rem; }
.ctc-msg a { color: inherit; font-weight: 600; text-decoration: underline; }

.ctc-msg--ok {
  background: rgba(0, 143, 152, .08);
  border-color: var(--teal);
  color: color-mix(in srgb, var(--teal) 80%, black);
}
.ctc-msg--err {
  background: rgba(217, 84, 65, .08);
  border-color: var(--rouge);
  color: color-mix(in srgb, var(--rouge) 75%, black);
}

/* ── APPEL À CONTRIBUTION ──────────────────────────────────── */
.ctc-cta {
  background: var(--navy);
  padding: 80px 0;
  position: relative; overflow: hidden;
}
.ctc-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--pattern-gray);
  background-size: 500px; opacity: .03;
  pointer-events: none;
}
.ctc-cta-wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 800px) {
  .ctc-cta-wrap { grid-template-columns: 1fr; gap: 32px; }
}

.ctc-cta-kicker {
  font-family: var(--sans); font-size: .58rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 14px;
}
.ctc-cta-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.1;
  color: var(--white); letter-spacing: -.01em;
  margin-bottom: 18px;
}
.ctc-cta-title em { font-style: italic; color: var(--orange); }
.ctc-cta-desc {
  font-family: var(--serif); font-size: 1rem;
  font-style: italic; color: rgba(255,255,255,.6);
  line-height: 1.65; max-width: 520px;
}

.ctc-cta-actions { display: flex; flex-direction: column; gap: 12px; }

.ctc-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 24px;
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.ctc-cta-btn svg { width: 14px; height: 14px; }
.ctc-cta-btn--primary {
  background: var(--rouge); color: var(--white);
  border: 1px solid var(--rouge);
}
.ctc-cta-btn--primary:hover {
  background: color-mix(in srgb, var(--rouge) 85%, black);
  border-color: color-mix(in srgb, var(--rouge) 85%, black);
  transform: translateY(-1px);
}
.ctc-cta-btn--ghost {
  background: transparent; color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.25);
}
.ctc-cta-btn--ghost:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
  color: var(--white);
}

/* Responsive */
@media (max-width: 768px) {
  .ctc-main { padding: 56px 0 64px; }
  .ctc-cta { padding: 56px 0; }
}


/* ══════════════════════════════════════════════════════════════
   PROJET — Chroniques audio (ai_playlist)
══════════════════════════════════════════════════════════════ */
.prj-chroniques {
  background: var(--paper);
  padding: 64px 0;
  border-top: 1px solid var(--line);
}
.prj-chroniques-head {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}
.prj-chroniques-eyebrow {
  font-family: var(--sans); font-size: .58rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--rouge); margin-bottom: 10px;
}
.prj-chroniques-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.1;
  color: var(--ink); letter-spacing: -.01em;
}
.prj-chroniques-player {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 18px;
}
.prj-chroniques-player audio { width: 100%; }
.prj-chroniques-player .ai-playlist { margin: 0; }

@media (max-width: 768px) {
  .prj-chroniques { padding: 48px 0; }
}


/* ══════════════════════════════════════════════════════════════
   PROJET — Lecteur audio chroniques (style institutionnel)
══════════════════════════════════════════════════════════════ */
.prj-audio { padding: 40px 0 64px; max-width: 920px; margin: 0 auto; }

.prj-audio-player {
  background: var(--white);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

/* ─ Now playing : compact horizontal sobre ─ */
.prj-audio-now {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 600px) {
  .prj-audio-now { grid-template-columns: 72px 1fr; gap: 16px; padding: 20px 0; }
}

.prj-audio-cover {
  position: relative;
  width: 96px; height: 96px;
  background: var(--paper);
  overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .prj-audio-cover { width: 72px; height: 72px; }
}
.prj-audio-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.92);
}
.prj-audio-cover-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.prj-audio-cover-empty svg { width: 32px; height: 32px; }
/* Vinyle décoratif : supprimé */
.prj-audio-vinyl { display: none; }

.prj-audio-info {
  display: flex; flex-direction: column;
  min-width: 0;
}

.prj-audio-kicker {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.prj-audio-dot { display: none; }

.prj-audio-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.3;
  color: var(--ink); letter-spacing: -.005em;
  margin: 0 0 16px;
}

/* ─ Contrôles : minimaliste ─ */
.prj-audio-controls {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
}
.prj-audio-btn,
.prj-audio-play {
  border: 0; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink-2);
  transition: color .15s;
}
.prj-audio-btn { width: 24px; height: 24px; }
.prj-audio-btn:hover { color: var(--ink); }
.prj-audio-play {
  width: 38px; height: 38px;
  background: var(--ink);
  color: var(--white);
  border-radius: 50%;
}
.prj-audio-play:hover { background: var(--rouge); }

.prj-audio-time {
  margin-left: auto;
  font-family: var(--sans);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.prj-audio-time-sep { margin: 0 4px; opacity: .35; }

/* ─ Barre de progression : ligne fine ─ */
.prj-audio-progress {
  cursor: pointer;
  padding: 8px 0;
}
.prj-audio-progress-bar {
  position: relative;
  height: 2px;
  background: var(--line);
}
.prj-audio-progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--ink);
  width: 0;
  transition: width .12s linear;
}
.prj-audio-progress-handle {
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: var(--ink);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .15s;
}
.prj-audio-progress:hover .prj-audio-progress-handle { opacity: 1; }

/* ─ Liste de pistes : sobre éditoriale ─ */
.prj-audio-list {
  list-style: none; margin: 0; padding: 0;
  max-height: none;
  overflow: visible;
}

.prj-audio-track {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: padding-left .2s;
}
.prj-audio-track:last-child { border-bottom: 0; }
.prj-audio-track:hover { padding-left: 8px; }

.prj-audio-track-num {
  font-family: var(--sans);
  font-size: .7rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3); letter-spacing: .06em;
  text-align: left;
}

.prj-audio-track-body { min-width: 0; }
.prj-audio-track-title {
  font-family: var(--serif); font-size: 1rem;
  font-weight: 400;
  color: var(--ink); line-height: 1.35;
  display: block;
}

.prj-audio-track-play {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--ink-3);
  background: transparent;
  transition: color .15s;
  flex-shrink: 0;
}
.prj-audio-track:hover .prj-audio-track-play { color: var(--ink); }

/* État : piste active */
.prj-audio-track.is-active { padding-left: 12px; }
.prj-audio-track.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  width: 2px; height: 100%;
  background: var(--rouge);
}
.prj-audio-track.is-active { position: relative; }
.prj-audio-track.is-active .prj-audio-track-num { color: var(--rouge); font-weight: 700; }
.prj-audio-track.is-active .prj-audio-track-title { font-weight: 500; }
.prj-audio-track.is-active .prj-audio-track-play { color: var(--rouge); }


/* ══════════════════════════════════════════════════════════════
   PROJET — Bloc spécial (callout : Spéciale 8 mars, etc.)
══════════════════════════════════════════════════════════════ */
.prj-special { padding: 24px 0 48px; }
.prj-special-card {
  background: var(--navy);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  color: var(--white);
}
.prj-special-card--with-img { display: grid; grid-template-columns: 1.1fr 1fr; }
@media (max-width: 760px) {
  .prj-special-card--with-img { grid-template-columns: 1fr; }
}

.prj-special-img {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background: color-mix(in srgb, var(--navy) 80%, black);
}
.prj-special-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 760px) {
  .prj-special-img { min-height: 200px; }
}

.prj-special-body {
  padding: 40px 48px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 18px;
}
@media (max-width: 760px) {
  .prj-special-body { padding: 32px 28px; }
}

.prj-special-kicker {
  font-family: var(--sans); font-size: .68rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.prj-special-text {
  font-family: var(--serif); font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255,255,255,.92);
  margin: 0;
}

.prj-special-cta {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  background: var(--rouge);
  color: var(--white);
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 3px;
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .04em;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.prj-special-cta:hover {
  background: color-mix(in srgb, var(--rouge) 85%, black);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(217,84,65,.4);
}
.prj-special-cta svg { transition: transform .2s; }
.prj-special-cta:hover svg { transform: translateX(3px); }


/* ══════════════════════════════════════════════════════════════
   PROJET — Section vidéo récap + intro
══════════════════════════════════════════════════════════════ */
.prj-recap {
  background: var(--white);
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--line);
}
.prj-recap-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) {
  .prj-recap-grid { grid-template-columns: 1fr; gap: 32px; }
}

.prj-recap-video {
  position: relative;
}
.prj-recap-video .wathi-video {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 50px -16px rgba(0,12,30,.22);
}

.prj-recap-text {
  font-family: var(--serif);
}
.prj-recap-kicker {
  font-family: var(--sans); font-size: .62rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--rouge);
  margin: 0 0 14px;
}
.prj-recap-text p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.prj-recap-text p:last-child { margin-bottom: 0; }


/* Quand l'auteur est masqué : date alignée à droite */
.prj-interview-footer--date-only { justify-content: flex-end; }
.prj-interview-footer--date-only time::before {
  content: '\f017';
  font-family: 'Font Awesome 5 Free', sans-serif;
  font-weight: 400;
  margin-right: 4px;
  opacity: .55;
}



/* ══════════════════════════════════════════════════════════════
   PROJET — Galerie d'images (sections "X en images" sur initiatives
   Grande ville). Aligné sur le design prj-* (paper bg, titres serif,
   accents rouge, transitions douces).
══════════════════════════════════════════════════════════════ */
.prj-gallery {
  background: var(--paper);
  padding: 64px 0 72px;
  border-top: 1px solid var(--line);
}

.prj-gallery-head {
  text-align: center;
  margin: 0 0 36px;
}
.prj-gallery-title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0;
  position: relative;
}
.prj-gallery-title::after {
  content: '';
  display: block;
  width: 40px; height: 2px;
  background: var(--rouge);
  margin: 14px auto 0;
}

.prj-gallery-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 1100px) { .prj-gallery-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 760px)  { .prj-gallery-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px)  { .prj-gallery-grid { grid-template-columns: repeat(3, 1fr); } }

.prj-gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--line-2);
}
.prj-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.2,.8,.3,1),
              filter .35s;
  filter: saturate(.95);
}
.prj-gallery-item:hover img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.prj-gallery-cta {
  margin-top: 36px;
  text-align: center;
}
.prj-gallery-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 24px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  transition: background .25s, color .25s, transform .2s;
}
.prj-gallery-more:hover {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-1px);
}
.prj-gallery-more svg { transition: transform .25s; }
.prj-gallery-more:hover svg { transform: translateX(3px); }