/* ==========================================================================
   LA PASTILLE INFO — STYLE GLOBAL
   ========================================================================== */

:root {
  --color-primary: #4A7E8A;
  --color-primary-light: #E8F4F7;
  --color-accent: #2C5F6B;
  --color-white: #FFFFFF;
  --color-warm-white: #FAF8F4;
  --color-dark: #1A1A1A;
  --color-gray: #555555;
  --color-border: #E0E0E0;

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --navbar-height: 84px; /* ajusté avec l'agrandissement du logo (70px) pour garder de la marge verticale */
  --container-width: 1200px;

  --shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 4px 20px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 8px 40px rgba(26, 26, 26, 0.12);
  --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- RESET ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-dark);
  background-color: var(--color-warm-white);
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  line-height: 1.6;
  position: relative;
}

/* Texture grain très subtile */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 100px 0;
}

@media (max-width: 768px) {
  section {
    padding: 64px 0;
  }
}

/* ---------- LIENS AVEC UNDERLINE ANIMÉ ---------- */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- EYEBROW ---------- */
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}

/* ---------- BOUTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-text {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 15px;
  position: relative;
}

/* Fix scroll offset pour navbar sticky (hauteur navbar = 70px + marge) */
section[id],
.member-card[id],
.section-anchor {
  scroll-margin-top: 90px;
}

/* ---------- NAVBAR ---------- */
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--navbar-height);
  background-color: var(--color-warm-white);
  box-shadow: 0 1px 0 var(--color-border);
  transition: box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.navbar.scrolled {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.08);
}

.navbar .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar-logo img {
  height: 70px; /* +25% (Nolan : logo trop petit sur la homepage) */
  width: auto;
  transition: transform 0.3s ease;
}

.navbar-logo:hover img {
  transform: scale(1.08);
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.navbar-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark);
}

.navbar-links a.active {
  color: var(--color-primary);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 24px;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  z-index: 1100;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-dark);
  transition: all 0.3s ease;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  background-color: var(--color-warm-white);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
}

.mobile-menu.open {
  transform: translateY(0);
}

.mobile-menu a {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .navbar-links {
    display: none;
  }
  .navbar-actions .btn {
    display: none;
  }
  .hamburger {
    display: flex;
  }
}

/* ===== HERO JOURNAL ===== */
.hero-journal {
  background: var(--color-warm-white);
  padding-top: 2rem;
  padding-bottom: 0;
  border-bottom: 2px solid var(--color-dark);
}

/* Bandeau date */
.journal-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 4rem;
  border-top: 1px solid var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.journal-date { font-weight: 600; color: var(--color-dark); }
.journal-numero { color: var(--color-primary); font-weight: 500; }

/* Manchette */
.journal-masthead {
  padding: 1.5rem 4rem 0.5rem;
  text-align: center;
}

.journal-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 900;
  color: var(--color-dark);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0.5rem 0;
  text-transform: none;
}

.journal-line {
  height: 2px;
  background: var(--color-dark);
  width: 100%;
}

/* Corps du hero — dernier article publié */
.journal-body {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.hero-article-surtitre {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.hero-article-byline {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
}

.hero-article-fallback {
  text-align: center;
  padding: 2rem 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  color: var(--color-gray);
  font-size: 1.05rem;
}

/* ===== HERO — UNE PRINCIPALE + 2 SECONDAIRES ===== */
.hero-news-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr; /* ~63% / 37% */
  gap: 3rem;
  align-items: start; /* la colonne secondaire garde sa hauteur naturelle — voir la note
                          dans .hero-news-secondary sur pourquoi elle n'est plus étirée */
}

.hero-news-grid--single {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}

/* [hidden] a une spécificité égale à .hero-news-grid/.hero-article-fallback
   (qui déclarent display:grid/flex) — sans cette règle, l'attribut hidden est ignoré */
.hero-news-grid[hidden],
.hero-article-fallback[hidden] {
  display: none;
}

.hero-news-featured-media {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-dark);
  margin-top: 14px; /* le CTA "Lire l'article" est juste au-dessus (voir buildFeatured
                        dans main.js) — sans ça, zéro espace entre le bouton et la photo */
  margin-bottom: 1.25rem;
}

.hero-news-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}

.hero-news-featured-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

.hero-news-featured-excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  color: var(--color-gray);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.hero-news-featured-content .hero-article-byline {
  margin-bottom: 1.25rem;
}

.hero-news-secondary {
  display: flex;
  flex-direction: column;
  gap: 0.875rem; /* moitié de l'ancien 1.75rem — voir note ci-dessous sur justify-content */
  /* Pas de justify-content: space-between ici : sur un article principal très long
     (grand titre + chapô + photo pleine largeur), ça étirait l'espace ENTRE les 2
     articles secondaires à 300px+ pour occuper la hauteur restante — l'effet inverse
     de ce qui est demandé ("resserrer l'écart"). Un espace vide peut réapparaître sous
     la colonne secondaire sur les articles très longs ; c'est moins visible qu'un
     grand vide sandwiché entre deux cartes, mais si ça redevient gênant, la vraie
     solution est d'agrandir le contenu de chaque carte, pas d'étirer les espaces.
     TODO: en discuter avec l'équipe si le vide en dessous redevient un problème. */
}

.hero-news-small a {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.hero-news-small-media {
  flex-shrink: 0;
  width: 150px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--color-dark);
}

.hero-news-small-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}

.hero-news-small-content {
  min-width: 0;
}

.hero-news-small-content .hero-article-surtitre {
  font-size: 0.72rem;
}

.hero-news-small-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.25;
  margin: 0 0 0.4rem;
}

.hero-news-small-excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--color-gray);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .hero-news-grid,
  .hero-news-grid--single {
    grid-template-columns: 1fr;
    max-width: none;
    margin: 0;
    gap: 2.5rem;
  }
}

.journal-photo-wrapper {
  position: relative;
  border: 1px solid var(--color-border);
}

.journal-photo {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  filter: saturate(0.85);
}

.journal-photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.92);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--color-gray);
  font-style: italic;
  border-top: 1px solid var(--color-border);
}

/* Responsive */
@media (max-width: 1024px) {
  .journal-body { grid-template-columns: 1fr; gap: 2rem; }
  .journal-right { order: -1; }
  .journal-photo { height: 280px; }
  .journal-topbar { padding: 0.5rem 1.5rem; }
  .journal-masthead { padding: 1rem 1.5rem 0.5rem; }
}

@media (max-width: 768px) {
  .journal-topbar { flex-direction: column; gap: 0.25rem; text-align: center; }
  .journal-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .journal-headline { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  .journal-stats { gap: 1rem; }
}

/* ---------- HERO SIMPLE (autres pages) ---------- */
.page-hero {
  padding: 140px 0 130px;
  text-align: center;
}

.page-hero.hero-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.page-hero.hero-light {
  background-color: var(--color-warm-white);
}

.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 16px;
}

.page-hero.hero-primary h1 {
  color: var(--color-white);
}

.page-hero p {
  font-size: 18px;
  max-width: 560px;
  margin: 0 auto;
}

.page-hero.hero-primary p {
  color: rgba(255, 255, 255, 0.8);
}

.wave-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
}

/* ---------- SECTION À PROPOS ---------- */
.about-section {
  text-align: center;
}

.about-text {
  max-width: 680px;
  margin: 24px auto 56px;
  font-size: 18px;
  color: var(--color-gray);
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  text-align: left;
}

.about-image img {
  width: 100%;
  border-radius: 12px;
  filter: saturate(0.9);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.about-content .about-text {
  margin: 0 0 40px;
  max-width: none;
}

.about-content .stats-row {
  justify-content: flex-start;
  margin-bottom: 32px;
}

.about-content .section-cta {
  text-align: left;
  margin-top: 0;
}

@media (max-width: 900px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .about-content .stats-row {
    justify-content: center;
  }
  .about-content .section-cta {
    text-align: center;
  }
}

.stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin-bottom: 40px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 48px;
}

.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 48px;
  width: 1px;
  background-color: var(--color-border);
}

.stat-number {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 700;
  color: var(--color-primary);
}

.stat-label {
  font-size: 14px;
  color: var(--color-gray);
  margin-top: 4px;
}

@media (max-width: 600px) {
  .stats-row {
    gap: 16px;
  }
  .stat-item {
    padding: 0 12px;
  }
}

/* ---------- TITRES DE SECTION ---------- */
.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-header h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

/* ---------- ARTICLES PREVIEW / GRID ---------- */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

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

@media (max-width: 768px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

.article-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: articleCardIn 0.5s ease-out backwards;
}

.article-card:hover {
  box-shadow: 0 12px 24px rgba(26, 26, 26, 0.06);
  transform: translateY(-4px);
}

/* Entrée jouée par le moteur CSS natif (pas par GSAP/rAF) : garantit que
   chaque carte finit toujours à opacity:1, même si le JS de la page est
   ralenti ou si l'onglet n'a pas le focus au chargement.
   Fill-mode "backwards" (pas "both"/"forwards") : une fois l'animation
   terminée, elle ne doit plus être "en effet", sinon elle prend le dessus
   sur tout changement inline ultérieur (ex. le fondu du filtre par
   catégorie dans main.js) et le bloque indéfiniment. */
@keyframes articleCardIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .article-card {
    animation: none;
  }
}

.article-img-placeholder {
  height: 200px;
  border-radius: 8px;
  margin: 4px 0 16px;
  background-color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
}

.article-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  margin: 4px 0 16px;
}

.article-cover-caption {
  font-style: italic;
  color: var(--color-gray);
  font-size: 12px;
  margin: -12px 0 16px;
}

/* ---------- PAGE DÉTAIL ARTICLE (article.html) ---------- */
.article-hero {
  text-align: left;
  padding-bottom: 32px;
}

.article-hero p {
  margin-left: 0;
  margin-right: 0;
  max-width: none; /* écrase le max-width:560px hérité de .page-hero p (partagé avec
                       les autres pages) — le chapô doit s'étendre comme le titre */
}

.article-detail-excerpt {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-gray);
  margin: 8px 0 12px;
}

.article-detail-meta {
  font-style: italic;
  color: var(--color-gray);
  margin: 0;
}

.article-detail-cover {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

.article-detail-cover-caption {
  font-style: italic;
  color: var(--color-gray);
  font-size: 13px;
}

.article-detail-body {
  max-width: 700px;
  margin: 32px auto 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-dark);
}

.article-detail-body p {
  margin-bottom: 1.25em;
}

.article-detail-body h2,
.article-detail-body h3 {
  font-family: var(--font-serif);
  color: #2F4956;
  margin: 1.5em 0 0.6em;
}

.article-detail-body img {
  max-width: 100%;
  border-radius: 8px;
  margin: 1.5em 0;
}

/* Image avec légende (bloc éditeur dédié dans /admin) — même style que l'ancienne
   convention (ligne en italique sous l'image) : italique, même taille/couleur que le
   corps de texte, juste porté par <figcaption> plutôt qu'un <p><em> séparé. */
.article-detail-body figure {
  margin: 1.5em 0;
}

.article-detail-body figure img {
  margin: 0;
}

.article-detail-body figcaption {
  font-style: italic;
  margin-top: 0.5em;
}

.article-detail-body a {
  color: var(--color-primary);
  text-decoration: underline;
}

.article-content {
  padding: 24px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.article-author {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.article-date {
  font-size: 13px;
  color: var(--color-gray);
}

.article-card__surtitre {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.article-title {
  font-size: 20px;
  margin-bottom: 10px;
}

.article-excerpt {
  color: var(--color-gray);
  font-size: 15px;
  margin-bottom: 16px;
}

.article-link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 15px;
}

.section-cta {
  text-align: center;
  margin-top: 48px;
}

/* ---------- ARTICLES TEASER (accueil, en attendant les vrais articles) ---------- */
.articles-teaser {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 32px;
  background-color: var(--color-primary-light);
  border-radius: 12px;
}

.articles-teaser p {
  font-size: 18px;
  color: var(--color-dark);
  margin-bottom: 24px;
}

.articles-teaser-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- RÉSEAUX ---------- */
.socials-section {
  background-color: var(--color-primary-light);
}

.socials-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

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

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

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.social-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.social-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ---------- FOOTER ---------- */
.footer {
  background-color: var(--color-dark);
  color: var(--color-white);
  padding: 64px 0 24px;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 48px;
}

.footer-logo img {
  height: 40px;
  filter: brightness(0) invert(1);
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
}

.footer-middle {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.footer-middle a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
}

.footer-middle a:hover {
  color: var(--color-white);
}

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.footer-socials a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.footer-socials a:hover {
  color: var(--color-primary);
}

.footer-socials svg {
  width: 20px;
  height: 20px;
}

.footer-bottom {
  border-top: 1px solid #333333;
  padding-top: 24px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom p {
  margin-bottom: 8px;
}

.footer-legal {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.5);
}

.footer-legal a:hover {
  color: var(--color-white);
}

/* ---------- ÉQUIPE ---------- */
.photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 700;
}

.member-name {
  font-size: 24px;
  margin-bottom: 4px;
}

.member-location {
  color: var(--color-gray);
  font-size: 14px;
  margin-bottom: 16px;
}

.member-bio {
  color: var(--color-gray);
  font-size: 15px;
  margin-bottom: 20px;
}

.member-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
}

.member-linkedin svg {
  width: 18px;
  height: 18px;
}

/* ===== PAGE PRÉSENTATION INDIVIDUELLE (equipe-<prenom>.html) ===== */
.member-profile {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3rem;
  align-items: start;
  padding: 1rem 0 3rem;
}

.member-profile-photo {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-md);
}

.member-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}

.member-page-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 0.5rem 0 0.75rem;
}

.member-presentation {
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  margin-top: 1rem;
  max-width: 700px;
}

.member-presentation h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.member-presentation p {
  color: var(--color-dark);
  font-size: 1rem;
  line-height: 1.75;
}

.member-presentation p + p {
  margin-top: 1.25rem;
}

.member-presentation-placeholder {
  color: var(--color-gray);
  font-style: italic;
}

@media (max-width: 700px) {
  .member-profile { grid-template-columns: 1fr; }
  .member-profile-photo { max-width: 320px; margin: 0 auto; }
}

/* ===== ÉQUIPE — GRILLE FIXE (3 en haut, 2 en bas centrées) ===== */
.team-section { padding: 5rem 0; background: var(--color-warm-white); }

.team-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-top: 3rem;
}

.team-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.team-card {
  display: block;
  width: 260px;
  text-align: center;
  transition: transform 0.3s ease;
}

.team-card:hover {
  transform: translateY(-6px);
}

.team-card-photo {
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease;
}

.team-card:hover .team-card-photo {
  box-shadow: var(--shadow-lg);
}

.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.6s ease;
}

.team-card:hover .team-card-photo img {
  transform: scale(1.04);
}

.team-card h3 {
  font-size: 1.15rem;
}

@media (max-width: 640px) {
  .team-card { width: 100%; max-width: 300px; }
}

.cta-band {
  text-align: center;
}

.cta-band p {
  font-size: 20px;
  font-family: var(--font-serif);
  margin-bottom: 28px;
}

/* ---------- ARTICLES PAGE ---------- */
.filters-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.filter-btn {
  padding: 10px 22px;
  border: 1px solid var(--color-primary);
  border-radius: 20px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.filter-btn.active,
.filter-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.articles-empty {
  text-align: center;
  color: var(--color-gray);
  margin-top: 24px;
}

/* ---------- CONTACT ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 16px;
}

.contact-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: 32px 0;
}

.contact-info h3 {
  font-size: 18px;
  margin-bottom: 16px;
}

.contact-socials {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-socials a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-dark);
  font-weight: 500;
}

.contact-socials a:hover {
  color: var(--color-primary);
}

.contact-socials svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.contact-form {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 40px;
}

@media (max-width: 500px) {
  .contact-form {
    padding: 24px;
  }
}

.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-warm-white);
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-group textarea {
  resize: vertical;
}

.btn-submit {
  width: 100%;
  padding: 16px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  transition: background-color 0.2s ease;
}

.btn-submit:hover {
  background-color: var(--color-accent);
}

.form-success {
  display: none;
  text-align: center;
  padding: 40px;
  background-color: var(--color-primary-light);
  border-radius: 12px;
}

.form-success h3 {
  color: var(--color-primary);
  margin-bottom: 10px;
}

.form-success p {
  color: var(--color-gray);
}

/* ---------- PAGES LÉGALES ---------- */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-content h2 {
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 12px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  color: var(--color-gray);
  margin-bottom: 14px;
}

.legal-content ul {
  color: var(--color-gray);
  margin: 0 0 14px;
  padding-left: 20px;
}

.legal-content ul li {
  list-style: disc;
  margin-bottom: 6px;
}

.legal-content a {
  color: var(--color-primary);
}

.legal-updated {
  color: var(--color-gray);
  font-size: 13px;
  font-style: italic;
  margin-top: 48px;
}

/* ---------- PASTILLES DE VICHY (fond décoratif animé) ---------- */
.pastilles-host {
  position: relative;
  overflow: hidden;
}

.pastilles-host > .container {
  position: relative;
  z-index: 1;
}

.pastilles-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.pastille-vichy {
  position: absolute;
  border: 1.5px solid var(--color-primary);
  border-radius: 6px;
  opacity: 0.07;
  transform: rotate(45deg);
}

.pastille-vichy.filled {
  background-color: var(--color-primary);
  border: none;
  opacity: 0.05;
}

@media (prefers-reduced-motion: reduce) {
  .pastille-vichy {
    display: none;
  }
}

/* ===== YOUTUBE — STACK DE CARDS ===== */
.youtube-section {
  background: var(--color-white);
  padding: 5rem 0;
}

/* Carousel horizontal — toutes les vidéos du flux, défilables au doigt/trackpad ou
   via les flèches, plutôt qu'une pile de 3 cards où il fallait cliquer une par une. */
.video-carousel-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
  width: 100%;
}

.video-carousel {
  display: flex;
  gap: 1.25rem;
  min-width: 0; /* même raison : contraint la largeur pour que overflow-x s'applique */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem 0.25rem 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.video-carousel::-webkit-scrollbar { height: 6px; }
.video-carousel::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }

.carousel-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, opacity 0.2s;
}

.carousel-arrow:hover { background: var(--color-primary-light); }
.carousel-arrow:active { transform: scale(0.96); }
.carousel-arrow:disabled { opacity: 0.3; cursor: default; background: #fff; }

.yt-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.yt-card img {
  width: 100%;
  height: 165px;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
}

.yt-card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  gap: 0.75rem;
}

.yt-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.yt-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-card-author {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 500;
}

.yt-card-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--color-dark);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.yt-card-link:hover { background: var(--color-primary); }

@media (max-width: 768px) {
  .carousel-arrow { display: none; } /* le glissé tactile suffit sur mobile */
  .yt-card { width: 240px; }
  .yt-card img { height: 145px; }
}

/* ---------- VIDÉOS EN 2 COLONNES (formats longs / verticaux) ---------- */
.videos-columns {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  /* align-items: stretch (par défaut) — les 2 colonnes ont la même hauteur,
     ce qui permet aux boutons .section-cta de s'aligner en bas via margin-top: auto */
}

@media (max-width: 900px) {
  .videos-columns {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.videos-col {
  display: flex;
  flex-direction: column;
  min-width: 0; /* sans ça, l'item de grille grandit pour loger tout le carousel au
                   lieu de le contraindre — le scroll interne ne se déclenche jamais */
}

.videos-col-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Le bouton reste calé en bas de colonne, quelle que soit la hauteur du contenu au-dessus */
.videos-col .section-cta {
  margin-top: auto;
  padding-top: 1.5rem;
}

.vertical-videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  flex: 1;
}

.vertical-video-embed {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-video-embed iframe,
.vertical-video-embed blockquote {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* ---------- COULISSES — CARNET DE BORD "SCRAPBOOK" (sous-page équipe) ---------- */
.scrapbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
  padding: 1rem 0;
}

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

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

.scrapbook-item {
  position: relative;
  background: var(--color-white);
  padding: 12px 12px 16px;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Rotation "photo scotchée" — valeur différente par élément, entre -3° et 3° */
.scrapbook-item:nth-child(1) { transform: rotate(-2deg); }
.scrapbook-item:nth-child(2) { transform: rotate(1.5deg); }
.scrapbook-item:nth-child(3) { transform: rotate(-1.5deg); }
.scrapbook-item:nth-child(4) { transform: rotate(2deg); }
.scrapbook-item:nth-child(5) { transform: rotate(-1deg); }
.scrapbook-item:nth-child(6) { transform: rotate(2.5deg); }

/* :hover doit passer après les règles nth-child ci-dessus pour gagner la cascade (même spécificité) */
.scrapbook-item:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

/* Amplitude réduite en dessous de 560px : les cartes sont plus étroites, une rotation
   marquée nuit à la lisibilité de la légende et du contenu */
@media (max-width: 560px) {
  .scrapbook-item:nth-child(1) { transform: rotate(-1deg); }
  .scrapbook-item:nth-child(2) { transform: rotate(0.75deg); }
  .scrapbook-item:nth-child(3) { transform: rotate(-0.75deg); }
  .scrapbook-item:nth-child(4) { transform: rotate(1deg); }
  .scrapbook-item:nth-child(5) { transform: rotate(-0.5deg); }
  .scrapbook-item:nth-child(6) { transform: rotate(1.25deg); }
}

/* Petit bout de scotch en haut de chaque élément */
.scrapbook-tape {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 70px;
  height: 26px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(232, 244, 247, 0.85);
  border: 1px solid rgba(74, 126, 138, 0.25);
  box-shadow: 0 2px 4px rgba(26, 26, 26, 0.15);
}

.scrapbook-media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-dark);
  aspect-ratio: 4 / 3;
}

.scrapbook-item--portrait .scrapbook-media {
  aspect-ratio: 3 / 4;
}

.scrapbook-media img,
.scrapbook-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrapbook-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(26, 26, 26, 0.55);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.scrapbook-play:hover {
  background: rgba(26, 26, 26, 0.75);
  transform: translate(-50%, -50%) scale(1.08);
}

.scrapbook-play svg {
  margin-left: 3px; /* optique : centre le triangle ▶ dans le cercle */
}

.scrapbook-play[hidden] {
  display: none;
}

.scrapbook-caption {
  font-family: 'Kalam', cursive;
  font-size: 1.05rem;
  color: var(--color-dark);
  text-align: center;
  margin-top: 10px;
  line-height: 1.3;
}

/* ---------- MINI-GRILLE JOURNALISTES (accueil) ---------- */
.journalists-mini-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .journalists-mini-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.journalist-mini-card {
  text-align: center;
}

.journalist-mini-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  box-shadow: var(--shadow-sm);
}

.journalist-mini-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}

/* Recadrage temporaire en attendant le nouveau fichier de Nolan — la photo source
   est un plan large (corps entier), le visage se retrouve trop haut dans les crops carrés/ronds */
.photo-jules {
  object-position: center 22%;
}

.journalist-mini-photo .photo-placeholder {
  font-size: 32px;
  border-radius: 50%;
}

.journalist-mini-card h3 {
  font-size: 18px;
}

/* ---------- CITATION MEMBRE (equipe.html) ---------- */
.member-quote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-dark);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.member-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.member-profile-btn {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
}

/* ---------- SIGNATURE FOOTER ---------- */
.footer-signature {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-style: italic;
  margin-top: 6px;
}

/* ---------- UTILITAIRES ---------- */
.reveal {
  will-change: transform, opacity;
}

/* ===== TOUCHES JOURNALISTIQUES SECTIONS ===== */

/* Ligne fine au-dessus des eyebrows */
.eyebrow {
  position: relative;
  padding-top: 1rem;
}

.eyebrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--color-primary);
}

/* Titres H2 de sections — style journal */
.section-header h2 {
  position: relative;
  padding-bottom: 1.25rem;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--color-border);
}

/* Citations en italique style journal */
blockquote {
  font-style: italic;
  border-left: 2px solid var(--color-primary);
  padding-left: 1rem;
}

/* Séparateurs de sections style journal */
section + section {
  border-top: 1px solid var(--color-border);
}