/* =============================================================================
   PAGE COMMUNICATION - France-USA-Net.Com
   Communiqués de presse, filtres, sommaire sticky et cartes institutionnelles
   ============================================================================= */

:root {
  --comm-blue-dark: #0a2463;
  --comm-blue: #3a86ff;
  --comm-red: #d7263d;
  --comm-red-light: #ef233c;
  --comm-white: #ffffff;
  --comm-light: #f8f9fa;
  --comm-ink: #10182b;
  --comm-ink-soft: #45506b;
  --comm-border: rgba(10, 36, 99, 0.14);
  --comm-shadow: 0 16px 36px rgba(10, 36, 99, 0.12);
  --comm-us-gradient: linear-gradient(90deg, #0a2463 0%, #ffffff 44%, #ffffff 56%, #d7263d 100%);

  --tag-diplomatie: #0a4080;
  --tag-diplomatie-bg: rgba(58, 134, 255, 0.14);
  --tag-defense: #8b1a2b;
  --tag-defense-bg: rgba(215, 38, 61, 0.12);
  --tag-economie: #6f421a;
  --tag-economie-bg: rgba(184, 112, 58, 0.15);
  --tag-environnement: #1a5c40;
  --tag-environnement-bg: rgba(26, 92, 64, 0.14);
  --tag-immigration: #1a3d32;
  --tag-immigration-bg: rgba(44, 95, 78, 0.14);
  --tag-culture: #9a3412;
  --tag-culture-bg: rgba(194, 65, 12, 0.12);
  --tag-education: #4f238f;
  --tag-education-bg: rgba(88, 28, 135, 0.12);
  --tag-tourisme: #0e7490;
  --tag-tourisme-bg: rgba(14, 116, 144, 0.14);
  --tag-memoire: #4a5568;
  --tag-memoire-bg: rgba(74, 85, 104, 0.14);
  --tag-geopolitique: #991b1b;
  --tag-geopolitique-bg: rgba(153, 27, 27, 0.12);
}

html {
  scroll-behavior: smooth;
}

.communication-page {
  background: var(--comm-light);
}

.communication-page .page-hero {
  border-bottom: 4px solid transparent;
  border-image: var(--comm-us-gradient) 1;
}

.communication-page .media-figure {
  background: var(--comm-white);
  text-align: center;
  box-shadow: none;
}

.communication-page .media-figure img {
  width: 35%;
  max-width: 35%;
  height: auto;
  display: inline-block;
}

.comm-sticky {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(10, 36, 99, 0.97);
  border-bottom: 3px solid transparent;
  border-image: var(--comm-us-gradient) 1;
  box-shadow: 0 4px 20px rgba(10, 36, 99, 0.24);
}

.comm-sticky__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem clamp(0.75rem, 2vw, 1.25rem);
}

.comm-sticky__label {
  color: var(--comm-white);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.comm-toc-toggle {
  display: none;
  margin-left: auto;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
  color: var(--comm-white);
  background: rgba(255, 255, 255, 0.1);
  font-weight: 700;
  cursor: pointer;
}

.comm-theme-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.comm-theme-nav a {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
}

.comm-theme-nav a:hover,
.comm-theme-nav a:focus-visible {
  color: var(--comm-white);
  background: rgba(255, 255, 255, 0.18);
}

.comm-theme-nav a[aria-current="true"] {
  color: var(--comm-blue-dark);
  background: var(--comm-white);
  border-color: transparent;
}

.comm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.comm-stat {
  padding: 1rem;
  border: 1px solid var(--comm-border);
  border-radius: 0.5rem;
  background: var(--comm-white);
  box-shadow: 0 8px 22px rgba(10, 36, 99, 0.06);
  text-align: center;
}

.comm-stat .num {
  display: block;
  color: var(--comm-blue-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  font-weight: 800;
}

.comm-stat .label {
  display: block;
  margin-top: 0.25rem;
  color: var(--comm-ink-soft);
  font-size: 0.85rem;
}

.comm-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: end;
  margin: 1.5rem 0 1rem;
}

.comm-search-wrap label,
.comm-year-wrap label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--comm-ink);
  font-size: 0.88rem;
  font-weight: 800;
}

.comm-search,
.comm-year-wrap select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--comm-border);
  border-radius: 0.5rem;
  color: var(--comm-ink);
  background: var(--comm-white);
  font-size: 1rem;
}

.comm-recent-btn,
.comm-filter-btn,
.comm-card__read {
  min-height: 2.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--comm-border);
  border-radius: 0.5rem;
  color: var(--comm-blue-dark);
  background: var(--comm-white);
  font-weight: 800;
  cursor: pointer;
}

.comm-recent-btn:hover,
.comm-filter-btn:hover,
.comm-card__read:hover {
  border-color: var(--comm-blue);
  box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.16);
}

.comm-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.comm-filter-btn.active,
.comm-filter-btn[aria-pressed="true"] {
  color: var(--comm-white);
  background: var(--comm-blue-dark);
  border-color: var(--comm-blue-dark);
}

.comm-search-count {
  min-height: 1.4rem;
  margin: 0 0 1rem;
  color: var(--comm-ink-soft);
  font-weight: 700;
}

.comm-noresult {
  display: none;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px dashed var(--comm-border);
  border-radius: 0.5rem;
  background: var(--comm-white);
  color: var(--comm-ink-soft);
  text-align: center;
}

.comm-theme-section {
  scroll-margin-top: 5.5rem;
  margin-top: 2rem;
}

.comm-theme-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--comm-border);
}

.comm-theme-section__head h2 {
  margin: 0 0 0.65rem;
  color: var(--comm-blue-dark);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
}

.comm-theme-section__count {
  margin-bottom: 0.75rem;
  color: var(--comm-ink-soft);
  font-weight: 800;
}

.comm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.comm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--comm-border);
  border-radius: 0.5rem;
  background: var(--comm-white);
  color: var(--comm-ink);
  box-shadow: var(--comm-shadow);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.comm-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 0.5rem 0.5rem 0 0;
  background: var(--comm-us-gradient);
}

.comm-card.is-hidden {
  display: none;
}

.comm-card__kicker {
  color: var(--comm-red);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.comm-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.comm-card__date {
  color: var(--comm-ink-soft);
  font-size: 0.86rem;
  font-weight: 800;
}

.comm-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
}

.comm-tag--diplomatie { color: var(--tag-diplomatie); background: var(--tag-diplomatie-bg); }
.comm-tag--defense { color: var(--tag-defense); background: var(--tag-defense-bg); }
.comm-tag--economie { color: var(--tag-economie); background: var(--tag-economie-bg); }
.comm-tag--environnement { color: var(--tag-environnement); background: var(--tag-environnement-bg); }
.comm-tag--immigration { color: var(--tag-immigration); background: var(--tag-immigration-bg); }
.comm-tag--culture { color: var(--tag-culture); background: var(--tag-culture-bg); }
.comm-tag--education { color: var(--tag-education); background: var(--tag-education-bg); }
.comm-tag--tourisme { color: var(--tag-tourisme); background: var(--tag-tourisme-bg); }
.comm-tag--memoire { color: var(--tag-memoire); background: var(--tag-memoire-bg); }
.comm-tag--geopolitique { color: var(--tag-geopolitique); background: var(--tag-geopolitique-bg); }

.comm-card h3 {
  margin: 0;
  color: var(--comm-blue-dark);
  font-size: 1.12rem;
  line-height: 1.25;
}

.comm-card__excerpt,
.comm-card__more p,
.comm-card__signature {
  margin: 0;
  color: var(--comm-ink-soft);
  line-height: 1.65;
}

.comm-card__signature {
  padding-top: 0.75rem;
  border-top: 1px solid var(--comm-border);
  color: var(--comm-ink);
  font-weight: 800;
}

.comm-card__read {
  align-self: flex-start;
}

.comm-legal-note {
  margin: 0;
  padding: 1rem;
  border-left: 4px solid var(--comm-blue-dark);
  background: var(--comm-light);
  color: var(--comm-ink-soft);
}

.comm-search:focus-visible,
.comm-year-wrap select:focus-visible,
.comm-recent-btn:focus-visible,
.comm-filter-btn:focus-visible,
.comm-card__read:focus-visible,
.comm-toc-toggle:focus-visible {
  outline: 3px solid var(--comm-blue);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .comm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 769px) {
  .comm-toolbar {
    grid-template-columns: 1fr minmax(10rem, 13rem) auto;
  }
}

@media (min-width: 1180px) {
  .comm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .comm-toc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .comm-theme-nav {
    display: none;
    flex-basis: 100%;
    padding-top: 0.35rem;
  }

  .comm-sticky.is-open .comm-theme-nav {
    display: flex;
  }
}