/*
 * pages/politique.css -- Hub Vie politique + modele pour les sous-pages
 * Commune de Silly -- Theme custom
 *
 * Pattern hub (landing) base sur ma-commune.css, adapte avec un override couleur sobre :
 * Vie politique utilise --color-arts-culture (#161B88) comme accent institutionnel,
 * via la classe `.page-vie-politique` sur le body (cf. body_class WP).
 *
 * Convention BEM stricte. Mobile-first.
 * Les sous-pages (college-conseil, commissions, participation-citoyenne, strategie) et
 * toutes les pages du mini-site du PCDR (`.is-pcdr`, sorti de la Vie politique le 5 oct. 2026)
 * heritent automatiquement de l'override couleur si la classe `page-vie-politique` est
 * ajoutee a leur body via le filter `body_class` (slug parent), OU si elles l'ajoutent
 * explicitement sur leur conteneur principal.
 *
 * @package Silly
 */

/* ============================================
   OVERRIDE COULEUR -- VIE POLITIQUE
   ============================================
   On surcharge la primaire pour donner un ton institutionnel sobre (bleu marine).
   Toutes les regles qui utilisent var(--color-primary) heritent automatiquement
   de cette nouvelle teinte sur les pages Vie politique et ses sous-pages. */
.page-vie-politique,
.page-college-conseil,
.page-commissions,
.page-participation-citoyenne,
.is-pcdr,
.page-strategie {
  --color-primary: #161B88;       /* --color-arts-culture */
  --color-primary-dark: #0e1268;  /* Variante plus sombre pour les hovers */
}

/* Page-hero institutionnel sombre partage entre toutes les pages Vie politique */
.page-college-conseil .page-hero,
.page-commissions .page-hero,
.page-participation-citoyenne .page-hero,
.is-pcdr .page-hero,
.page-strategie .page-hero {
  background: var(--color-bg-dark);
  padding: calc(var(--total-header-height, 120px) + 60px) 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-college-conseil .page-hero__inner,
.page-commissions .page-hero__inner,
.page-participation-citoyenne .page-hero__inner,
.is-pcdr .page-hero__inner,
.page-strategie .page-hero__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.page-college-conseil .page-hero__title,
.page-commissions .page-hero__title,
.page-participation-citoyenne .page-hero__title,
.is-pcdr .page-hero__title,
.page-strategie .page-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 72px;
  line-height: 79.2px;
  letter-spacing: -2.16px;
  color: var(--color-text-light);
}

.page-college-conseil .page-hero__subtitle,
.page-commissions .page-hero__subtitle,
.page-participation-citoyenne .page-hero__subtitle,
.is-pcdr .page-hero__subtitle,
.page-strategie .page-hero__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.72px;
  color: rgba(255, 255, 255, 0.64);
  max-width: 640px;
  text-align: center;
}

@media (max-width: 1024px) {
  .page-college-conseil .page-hero__title,
  .page-commissions .page-hero__title,
  .page-participation-citoyenne .page-hero__title,
  .is-pcdr .page-hero__title,
  .page-strategie .page-hero__title {
    font-size: 48px;
    line-height: 52px;
  }
}

@media (max-width: 768px) {
  .page-college-conseil .page-hero,
  .page-commissions .page-hero,
  .page-participation-citoyenne .page-hero,
  .is-pcdr .page-hero,
  .page-strategie .page-hero {
    padding: calc(var(--total-header-height, 80px) + 40px) 0 48px;
  }

  .page-college-conseil .page-hero__title,
  .page-commissions .page-hero__title,
  .page-participation-citoyenne .page-hero__title,
  .is-pcdr .page-hero__title,
  .page-strategie .page-hero__title {
    font-size: 36px;
    line-height: 40px;
  }
}

/* ============================================
   PAGE HERO (institutionnel, sobre)
   ============================================ */
.page-vie-politique .page-hero {
  background: var(--color-bg-dark);
  padding: calc(var(--total-header-height, 120px) + 60px) 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-vie-politique .page-hero__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.page-vie-politique .page-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 72px;
  line-height: 79.2px;
  letter-spacing: -2.16px;
  color: var(--color-text-light);
}

.page-vie-politique .page-hero__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.72px;
  color: rgba(255, 255, 255, 0.64);
  max-width: 640px;
  text-align: center;
}

/* ============================================
   HUB INTRO SECTION
   ============================================ */
.vie-politique__intro {
  padding: var(--section-padding, 112px) 0;
  background: var(--color-bg);
}

.vie-politique__intro-inner {
  display: flex;
  gap: 48px;
  align-items: stretch;
}

.vie-politique__intro-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vie-politique__intro-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 52.8px;
  letter-spacing: -1.44px;
  color: var(--color-text);
}

.vie-politique__intro-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: var(--color-text-secondary);
}

.vie-politique__intro-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.vie-politique__intro-media {
  flex: 0 0 auto;
  /* Portrait officiel : colonne media plus etroite que la photo paysage
     d'origine, et centree verticalement sur la colonne texte. */
  width: 360px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vie-politique__intro-image-wrap {
  width: 100%;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
  /* Ratio portrait 2:3 pour respecter le cadrage de la photo officielle. */
  aspect-ratio: 2 / 3;
}

.vie-politique__intro-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait officiel : cadrage haut pour ne jamais rogner le visage. */
  object-position: center 20%;
  display: block;
}

.vie-politique__intro-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  padding: 16px 20px;
  background: rgba(26, 26, 46, 0.88);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.vie-politique__intro-caption-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.36px;
  color: var(--color-text-light);
}

.vie-politique__intro-caption-role {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: rgba(255, 255, 255, 0.72);
}

/* ============================================
   HUB CARDS (5 sous-pages)
   ============================================ */
/* Section "Nos institutions" sur fond alterne (gris clair) pour contraster
   avec le bloc intro blanc situe au-dessus. Les cartes blanches ressortent
   ainsi nettement sur la trame --color-bg-alt. */
.vie-politique__hub {
  padding: var(--section-padding, 112px) 0;
  background: var(--color-bg-alt);
}

.vie-politique__hub-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.vie-politique__hub-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
}

.vie-politique__hub-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 52.8px;
  letter-spacing: -1.44px;
  color: var(--color-text);
}

.vie-politique__hub-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.72px;
  color: var(--color-text-secondary);
}

.vie-politique__hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Carte specifique hub Vie politique (plus institutionnelle que service-card) */
.vie-politique__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  text-decoration: none;
  color: inherit;
  min-height: 280px;
}

.vie-politique__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
  border-color: var(--color-primary);
}

.vie-politique__card-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}

.vie-politique__card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(22, 27, 136, 0.08);
  color: var(--color-primary);
}

.vie-politique__card-icon svg {
  width: 28px;
  height: 28px;
}

.vie-politique__card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.vie-politique__card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 28.6px;
  letter-spacing: -0.66px;
  color: var(--color-text);
}

.vie-politique__card-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: -0.45px;
  color: var(--color-text-secondary);
}

.vie-politique__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: var(--color-primary);
  margin-top: auto;
}

.vie-politique__card-cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.vie-politique__card:hover .vie-politique__card-cta svg {
  transform: translateX(3px);
}

/* ============================================
   STATS / CHIFFRES CLES
   ============================================ */
.vie-politique__stats {
  padding: 0 0 var(--section-padding, 112px);
  background: var(--color-bg);
}

.vie-politique__stats-inner {
  background: var(--color-bg-dark);
  border-radius: var(--radius-xl);
  padding: 72px 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.vie-politique__stats-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}

.vie-politique__stats-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1.2px;
  color: var(--color-text-light);
}

.vie-politique__stats-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: rgba(255, 255, 255, 0.72);
}

.vie-politique__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.vie-politique__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.vie-politique__stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 62px;
  letter-spacing: -1.68px;
  color: var(--color-text-light);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.vie-politique__stat-suffix {
  font-size: 32px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 400;
}

.vie-politique__stat-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: -0.45px;
  color: rgba(255, 255, 255, 0.72);
}

/* ============================================
   LIENS UTILES (encart documents officiels)
   ============================================ */
.vie-politique__links {
  padding: 0 0 var(--section-padding, 112px);
  background: var(--color-bg);
}

.vie-politique__links-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}

.vie-politique__links-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--total-header-height, 120px) + 24px);
}

.vie-politique__links-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 43.2px;
  letter-spacing: -1.08px;
  color: var(--color-text);
}

.vie-politique__links-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: var(--color-text-secondary);
}

.vie-politique__links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vie-politique__links-item {
  margin: 0;
}

.vie-politique__link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.vie-politique__link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-natural);
  transform: translateY(-2px);
}

.vie-politique__link-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(22, 27, 136, 0.08);
  color: var(--color-primary);
}

.vie-politique__link-icon svg {
  width: 22px;
  height: 22px;
}

.vie-politique__link-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vie-politique__link-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 23.8px;
  letter-spacing: -0.34px;
  color: var(--color-text);
}

.vie-politique__link-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.28px;
  color: var(--color-text-secondary);
}

.vie-politique__link-arrow {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-text-secondary);
  transition: background var(--transition-base), color var(--transition-base);
}

.vie-politique__link:hover .vie-politique__link-arrow {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.vie-politique__link-arrow svg {
  width: 16px;
  height: 16px;
}

.vie-politique__link-external {
  margin-left: 6px;
  width: 12px;
  height: 12px;
  vertical-align: baseline;
}

/* ============================================
   CTA BANNER (override pour Vie politique)
   ============================================ */
.page-vie-politique .cta-banner {
  background: var(--color-primary);
}

.page-vie-politique .cta-banner__inner {
  padding: 64px var(--container-padding, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.page-vie-politique .cta-banner__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1.2px;
  color: var(--color-text-light);
  max-width: 560px;
}

/* ============================================
   RESPONSIVE -- TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .page-vie-politique .page-hero__title {
    font-size: 48px;
    line-height: 52px;
  }

  .vie-politique__intro-inner {
    flex-direction: column;
  }

  .vie-politique__intro-title,
  .vie-politique__hub-title {
    font-size: 36px;
    line-height: 40px;
  }

  .vie-politique__hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vie-politique__stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vie-politique__stats-title {
    font-size: 32px;
    line-height: 38px;
  }

  .vie-politique__links-inner {
    grid-template-columns: 1fr;
  }

  .vie-politique__links-header {
    position: static;
  }

  .vie-politique__links-title {
    font-size: 28px;
    line-height: 33.6px;
  }

  .page-vie-politique .cta-banner__inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }

  .page-vie-politique .cta-banner__title {
    font-size: 32px;
    line-height: 38px;
  }
}

/* ============================================
   RESPONSIVE -- MOBILE LARGE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  .page-vie-politique .page-hero {
    padding: calc(var(--total-header-height, 80px) + 40px) 0 48px;
  }

  .page-vie-politique .page-hero__title {
    font-size: 36px;
    line-height: 40px;
  }

  .vie-politique__intro {
    padding: 64px 0;
  }

  .vie-politique__intro-title,
  .vie-politique__hub-title {
    font-size: 28px;
    line-height: 32px;
  }

  .vie-politique__intro-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .vie-politique__intro-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Portrait un peu plus contenu sur mobile pour laisser respirer. */
  .vie-politique__intro-media {
    width: 300px;
  }

  .vie-politique__intro-caption {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 12px 16px;
  }

  .vie-politique__hub {
    padding: 64px 0;
  }

  .vie-politique__hub-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .vie-politique__card {
    padding: 24px;
    min-height: 0;
  }

  .vie-politique__stats {
    padding-bottom: 64px;
  }

  .vie-politique__stats-inner {
    padding: 48px 24px;
    gap: 32px;
  }

  .vie-politique__stats-title {
    font-size: 26px;
    line-height: 32px;
  }

  .vie-politique__stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .vie-politique__stat {
    padding: 16px 0;
  }

  .vie-politique__stat-value {
    font-size: 40px;
    line-height: 44px;
  }

  .vie-politique__stat-suffix {
    font-size: 24px;
  }

  .vie-politique__links {
    padding-bottom: 64px;
  }

  .vie-politique__link {
    padding: 16px 18px;
    gap: 14px;
  }

  .vie-politique__link-arrow {
    display: none;
  }

  .page-vie-politique .cta-banner__title {
    font-size: 26px;
    line-height: 32px;
  }
}

/* ============================================
   RESPONSIVE -- MOBILE SMALL (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  .vie-politique__stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   ===== SOUS-PAGE : COMMISSIONS COMMUNALES
   ============================================
   Convention BEM stricte avec prefixe `commissions__`.
   Reutilise les variables et le pattern visuel de la Vie politique
   (couleur arts-culture, ombres, radius, rythme vertical). */

/* Section intro (texte + encarts a droite) */
.commissions__intro {
  padding: var(--section-padding, 112px) 0;
  background: var(--color-bg);
}

.commissions__intro-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}

.commissions__intro-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.commissions__intro-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1.2px;
  color: var(--color-text);
}

.commissions__intro-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.32px;
  color: var(--color-text-secondary);
}

.commissions__intro-highlights {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 32px;
  border-left: 4px solid var(--color-primary);
}

.commissions__intro-highlight {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.commissions__intro-highlight-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.commissions__intro-highlight-icon svg {
  width: 22px;
  height: 22px;
}

.commissions__intro-highlight-body strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  color: var(--color-text);
  margin-bottom: 4px;
}

.commissions__intro-highlight-body p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Grille des 6 commissions */
.commissions__list {
  padding: 0 0 var(--section-padding, 112px);
  background: var(--color-bg);
}

.commissions__list-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin: 0 0 48px;
}

.commissions__list-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1.2px;
  color: var(--color-text);
}

.commissions__list-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 25.5px;
  letter-spacing: -0.51px;
  color: var(--color-text-secondary);
}

.commissions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card commission */
.commission-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.commission-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
  border-color: var(--color-primary);
}

.commission-card__accent {
  height: 4px;
  background: var(--color-primary);
  width: 100%;
}

.commission-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.commission-card__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.commission-card__number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(22, 27, 136, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
}

.commission-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: var(--color-text);
  margin: 0;
  flex: 1;
  padding-top: 6px;
}

.commission-card__people {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.commission-card__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.commission-card__person-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.commission-card__person-name {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--color-text);
}

.commission-card__members-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin: 0 0 4px;
  display: block;
}

.commission-card__members-list {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Section frequence/acces -- 3 cards icones */
.commissions__access {
  padding: var(--section-padding, 112px) 0;
  background: var(--color-bg-alt);
}

.commissions__access-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
  align-items: center;
}

.commissions__access-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  letter-spacing: -1.08px;
  color: var(--color-text);
}

.commissions__access-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-secondary);
}

.commissions__access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.commissions__access-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-natural);
}

.commissions__access-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(22, 27, 136, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.commissions__access-icon svg {
  width: 26px;
  height: 26px;
}

.commissions__access-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 25px;
  letter-spacing: -0.38px;
  color: var(--color-text);
  margin: 0;
}

.commissions__access-card-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Section PV (archives) */
.commissions__pv {
  padding: var(--section-padding, 112px) 0;
  background: var(--color-bg);
}

.commissions__pv-inner {
  max-width: 880px;
  margin: 0 auto;
}

.commissions__pv-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  box-shadow: var(--shadow-natural);
}

.commissions__pv-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(22, 27, 136, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.commissions__pv-icon svg {
  width: 34px;
  height: 34px;
}

.commissions__pv-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.84px;
  color: var(--color-text);
  margin: 0;
}

.commissions__pv-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 600px;
}

.commissions__pv-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* Section tag centree (variante) */
.commissions__access .section-tag,
.commissions__pv-card .section-tag {
  margin-bottom: 4px;
}

/* CTA banner override partage avec les autres sous-pages */
.page-commissions .cta-banner,
.page-college-conseil .cta-banner,
.page-participation-citoyenne .cta-banner,
.is-pcdr .cta-banner,
.page-strategie .cta-banner {
  background: var(--color-primary);
}

.page-commissions .cta-banner__inner,
.page-college-conseil .cta-banner__inner,
.page-participation-citoyenne .cta-banner__inner,
.is-pcdr .cta-banner__inner,
.page-strategie .cta-banner__inner {
  padding: 64px var(--container-padding, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.page-commissions .cta-banner__title,
.page-college-conseil .cta-banner__title,
.page-participation-citoyenne .cta-banner__title,
.is-pcdr .cta-banner__title,
.page-strategie .cta-banner__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  letter-spacing: -1.08px;
  color: var(--color-text-light);
  max-width: 560px;
  margin: 0;
}

/* Le CTA de Collège & Conseil affiche l'adresse du secrétariat de la Bourgmestre.
   .cta-banner__text a est en white-space: nowrap (service.css) pour les numéros de
   téléphone : on l'autorise à se couper pour l'e-mail, trop long sur mobile. */
.page-college-conseil .cta-banner__text a[href^="mailto:"] {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Responsive sous-page Commissions */
@media (max-width: 1024px) {
  .commissions__intro-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .commissions__intro-title,
  .commissions__list-title {
    font-size: 32px;
    line-height: 40px;
  }

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

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

  .commissions__access-title {
    font-size: 28px;
    line-height: 34px;
  }

  .commissions__pv-card {
    padding: 40px 32px;
  }

  .commissions__pv-title {
    font-size: 24px;
    line-height: 30px;
  }

  .page-commissions .cta-banner__inner,
  .page-college-conseil .cta-banner__inner,
  .page-participation-citoyenne .cta-banner__inner,
  .is-pcdr .cta-banner__inner,
  .page-strategie .cta-banner__inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }

  .page-commissions .cta-banner__title,
  .page-college-conseil .cta-banner__title,
  .page-participation-citoyenne .cta-banner__title,
  .is-pcdr .cta-banner__title,
  .page-strategie .cta-banner__title {
    font-size: 28px;
    line-height: 34px;
  }
}

@media (max-width: 768px) {
  .commissions__intro,
  .commissions__access,
  .commissions__pv {
    padding: 64px 0;
  }

  .commissions__list {
    padding-bottom: 64px;
  }

  .commissions__intro-title,
  .commissions__list-title {
    font-size: 26px;
    line-height: 32px;
  }

  .commissions__intro-highlights {
    padding: 24px;
  }

  .commissions__list-header {
    margin-bottom: 32px;
  }

  .commissions__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Colonne de contenu (page Commissions en layout service) : 1 colonne
     sous 768px — surcharge la règle .service-content .commissions__grid
     (plus spécifique que .commissions__grid seule). */
  .service-content .commissions__grid {
    grid-template-columns: 1fr;
  }

  .commission-card__body {
    padding: 24px;
  }

  .commissions__access-card {
    padding: 24px;
  }

  .commissions__access-title {
    font-size: 24px;
    line-height: 30px;
  }

  .commissions__pv-card {
    padding: 32px 24px;
    gap: 16px;
  }

  .commissions__pv-title {
    font-size: 22px;
    line-height: 28px;
  }

  .commissions__pv-actions {
    flex-direction: column;
    width: 100%;
  }

  .commissions__pv-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .page-commissions .cta-banner__title,
  .page-college-conseil .cta-banner__title,
  .page-participation-citoyenne .cta-banner__title,
  .is-pcdr .cta-banner__title,
  .page-strategie .cta-banner__title {
    font-size: 24px;
    line-height: 30px;
  }
}

/* ============================================
   ===== SOUS-PAGE : PCDR
   ============================================
   Programme Communal de Developpement Rural.
   La page reutilise le layout 2 colonnes du modele service
   (.service-layout / .service-content / .service-sidebar) defini
   dans service.css, ainsi que les composants partages de la Vie
   politique (.section-tag, .commission-compo, .commission-contact,
   .cc-intro__stats, .cc-prose__list, .service-notice). Ne restent
   ici que les composants SPECIFIQUES au PCDR :
     - .pcdr-parts / .pcdr-part : liste numerotee des 5 parties du PCDR
     - .pcdr-projet* : cards des projets du budget participatif
     - .pcdr__documents / .pcdr-document : liste des PDF telechargeables
   Couleur primaire : bleu marine (--color-arts-culture) heritee plus haut. */

/* ============================================
   PCDR -- LES 5 PARTIES (liste numerotee)
   ============================================ */
.pcdr-parts {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pcdr-part {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.pcdr-part:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
  border-color: var(--color-primary);
}

.pcdr-part__num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(22, 27, 136, 0.08);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pcdr-part__body {
  flex: 1;
  min-width: 0;
}

.pcdr-part__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 23px;
  letter-spacing: -0.2px;
  color: var(--color-text);
  margin: 0 0 4px;
}

.pcdr-part__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   PCDR -- PROJETS (cards budget participatif)
   ============================================ */
.pcdr__projets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.pcdr-projet {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.pcdr-projet:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.pcdr-projet__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.pcdr-projet__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.pcdr-projet:hover .pcdr-projet__img {
  transform: scale(1.04);
}

.pcdr-projet__status {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-light);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.pcdr-projet__status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.pcdr-projet__status--ongoing {
  background: rgba(255, 128, 1, 0.92);
}

.pcdr-projet__status--done {
  background: rgba(52, 153, 28, 0.92);
}

.pcdr-projet__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.pcdr-projet__axe {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

.pcdr-projet__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: var(--color-text);
  margin: 0;
}

.pcdr-projet__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}

.pcdr-projet__meta {
  list-style: none;
  padding: 14px 0 0;
  margin: auto 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.pcdr-projet__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text);
  font-weight: 500;
}

.pcdr-projet__meta li svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Variante sans média (projets du budget participatif) : la pastille de
   statut « Retenu » est rendue dans le corps de la carte, pas en overlay. */
.pcdr-projet--text .pcdr-projet__body {
  padding: 24px;
}

.pcdr-projet__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #2f7a18;
  background: rgba(52, 153, 28, 0.12);
}

/* ============================================
   PCDR -- DOCUMENTS (liste PDF telechargeables)
   ============================================ */
.pcdr__documents {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.pcdr-document {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.pcdr-document:hover,
.pcdr-document:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
  border-color: var(--color-primary);
}

.pcdr-document__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(22, 27, 136, 0.08);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pcdr-document__icon svg {
  width: 22px;
  height: 22px;
}

.pcdr-document__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pcdr-document__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--color-text);
  margin: 0;
}

.pcdr-document__meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 17px;
  color: var(--color-text-secondary);
}

.pcdr-document__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.pcdr-document:hover .pcdr-document__arrow {
  transform: translateX(4px);
}

/* ============================================
   RESPONSIVE -- PCDR
   (le layout 2 colonnes et les sections sont geres
   par service.css ; ici, uniquement les composants
   specifiques PCDR : grilles projets/documents.)
   ============================================ */
@media (max-width: 768px) {
  .pcdr__projets {
    grid-template-columns: 1fr;
  }

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

  .pcdr-part {
    padding: 16px 18px;
    gap: 14px;
  }
}

/* ============================================================================
   ================ PAGE STRATEGIE TRANSVERSALE (PST + DPC) ===================
   Sous-page de Vie politique (couleur heritee --color-arts-culture #161B88).
   Layout vertical "long-form" avec sections empilees, alternance fond
   blanc / fond alterne, rythme genereux entre les blocs.
   ============================================================================ */

/* Utilitaire d'accessibilite : visuellement masque mais lu par les lecteurs d'ecran */
.page-strategie .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CTA banner : forcer le texte blanc sur le bouton dark au hover */
.page-strategie .cta-banner .btn--dark,
.page-strategie .cta-banner .btn--dark:hover {
  color: var(--color-text-light);
}

/* ============================================
   STRATEGIE -- BOUTON DE TELECHARGEMENT (DPC / PST)
   ============================================
   Conteneur du bouton sous chaque encadre « En bref ». Petit margin-top
   pour s'aligner sur le rythme du gap de section (.service-content > section).
   Remplace l'ancien <p> qui ajoutait une marge de paragraphe parasite. */
.strat-actions {
  margin-top: 4px;
}

/* ============================================
   STRATEGIE -- THEMATIQUES (grille de pills)
   ============================================
   Liste des domaines reellement couverts par le PST. Pills compactes avec
   icone Lucide line-art + libelle, hover leger. Heritent de --color-primary
   (bleu marine #161B88) via .page-strategie. */
.strat-themes {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.strat-theme {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.strat-theme:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-natural);
  transform: translateY(-2px);
}

.strat-theme__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 10%, #fff);
  color: var(--color-primary);
}

.strat-theme__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-text);
}

/* ============================================
   STRATEGIE -- DOCUMENTS (liste de telechargement)
   ============================================ */
.strat-docs {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strat-doc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.strat-doc:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-natural);
  transform: translateY(-2px);
}

.strat-doc__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 10%, #fff);
  color: var(--color-primary);
}

.strat-doc__icon svg {
  width: 22px;
  height: 22px;
}

.strat-doc__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.strat-doc__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-text);
}

.strat-doc__meta {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.strat-doc__arrow {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

.strat-doc__arrow svg {
  width: 20px;
  height: 20px;
}

.strat-doc:hover .strat-doc__arrow {
  transform: translateY(2px);
}

/* ============================================
   STRATEGIE -- RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .strat-themes {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (max-width: 375px) {
  .strat-doc {
    flex-wrap: wrap;
  }
}

/* ====================================================================
   ====================================================================
   ===== SOUS-PAGE : COLLÈGE ET CONSEIL COMMUNAL
   ====================================================================
   Sections : intro narrative, team-grid Collège, présentation Conseil,
   council-grid (conseillers), calendrier des séances, PV archives,
   documents officiels, iDelibe banner, CTA banner final.
   Classes préfixées .cc-* pour isoler des autres sous-pages.
   ==================================================================== */

/* ============================================
   STRUCTURE SECTIONS génériques
   ============================================ */
.cc-section {
  padding: 96px 0;
}

.cc-section--alt {
  background: var(--color-bg-alt);
}

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

.cc-section__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
  max-width: 760px;
}

.cc-section__header--centered {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  text-align: center;
}

.cc-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -1.2px;
  color: var(--color-text);
  margin: 0;
}

.cc-section__intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 27px;
  letter-spacing: -0.34px;
  color: var(--color-text-secondary);
}

/* ============================================
   INTRO — 2 colonnes texte + chiffres-cles
   ============================================ */
.cc-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: start;
}

.cc-intro__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-intro__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -1.08px;
  color: var(--color-text);
  margin: 0;
}

.cc-intro__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-secondary);
  margin: 0;
}

.cc-intro__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cc-stat {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.cc-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}

.cc-stat__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -1.08px;
  color: var(--color-primary);
  display: block;
  margin-bottom: 8px;
}

.cc-stat__label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
}

/* ============================================
   TEAM GRID — Membres du Collège
   ============================================ */
.cc-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cc-team-member {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cc-team-member:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.cc-team-member__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
  z-index: 2;
}

.cc-team-member--cpas .cc-team-member__accent {
  background: var(--color-cpas);
}

.cc-team-member__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Fond blanc : les portraits détourés (fond transparent à la source)
     s'affichent proprement sur blanc plutôt que sur le gris de fond. */
  background: #fff;
  overflow: hidden;
}

.cc-team-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%);
  transition: filter var(--transition-base), transform var(--transition-base);
}

.cc-team-member:hover .cc-team-member__photo img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

.cc-team-member__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, rgba(22, 27, 136, 0.08) 100%);
  color: var(--color-primary);
}

.cc-team-member__photo-placeholder svg {
  width: 64px;
  height: 64px;
  opacity: 0.4;
}

.cc-team-member__party {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.cc-team-member__party--lb { color: var(--color-arts-culture); }
.cc-team-member__party--sens { color: var(--color-mobilite); }
.cc-team-member__party--ecolo { color: #74840a; }
.cc-team-member__party--ps { color: var(--color-slowfood); }

.cc-team-member__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.cc-team-member__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.6px;
  color: var(--color-text);
  margin: 0;
}

.cc-team-member__role {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.cc-team-member__competences {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.cc-team-member__competences-label {
  font-weight: 700;
  color: var(--color-text);
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-family: var(--font-heading);
}

.cc-team-member__contacts {
  list-style: none;
  padding: 16px 0 0;
  margin: auto 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-team-member__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text);
}

.cc-team-member__contact svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.cc-team-member__contact a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base);
}

.cc-team-member__contact a:hover {
  color: var(--color-primary-ink);
}

/* ============================================================
   PARTICIPATION CITOYENNE — sous-blocs structurés par organe
   (#ccatm, #securite, #ccca, #cadd, #developpement-rural)
   Espace + encadrés pour aérer la page : prose, composition
   en encadré, carte de contact en encadré.
   ============================================================ */

/* Encadré « Composition » : liste à puces sur fond alterné, comme
   .service-list__items mais en pleine largeur (1 colonne). */
.commission-compo {
  margin-top: 8px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}

.commission-compo__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.commission-compo__title svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.commission-compo .cc-prose__list {
  margin: 0;
}

/* Phrase d'amorce au-dessus de la liste et note de synthèse en dessous
   (utilisées par le bloc « Représentation citoyenne » de l'Observatoire). */
.commission-compo__intro,
.commission-compo__note {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 10px;
}

.commission-compo__note {
  margin: 14px 0 0;
}

/* Carte de contact d'un organe : encadré bordé avec pastille bleue,
   identité, rôle et coordonnées. Donne du poids visuel et structure
   l'info qui « flottait » sous les titres. */
.commission-contact {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 24px 28px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.commission-contact__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(22, 27, 136, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.commission-contact__avatar svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.commission-contact__body {
  flex: 1;
  min-width: 0;
}

.commission-contact__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 2px;
}

.commission-contact__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 23px;
  letter-spacing: -0.3px;
  color: var(--color-text);
  margin: 0;
}

.commission-contact__role {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
  margin: 2px 0 0;
}

.commission-contact__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.commission-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}
.commission-contact__note {
  font-size: 12.5px;
  color: var(--color-text-secondary);
}

.commission-contact__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.commission-contact__item a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base);
}

.commission-contact__item a:hover {
  color: var(--color-primary-ink);
}

/* Lien « Voir le service X » sous une carte de contact */
.commission-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--transition-base);
}

.commission-link:hover {
  gap: 10px;
}

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

@media (max-width: 768px) {
  .commission-compo {
    padding: 20px;
  }
  .commission-contact {
    padding: 20px;
    gap: 14px;
  }
  .commission-contact__list {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================================
   FEATURES — Rôle du Conseil (3 cards)
   ============================================ */
.cc-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.cc-feature {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cc-feature__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(22, 27, 136, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.cc-feature__icon svg {
  width: 22px;
  height: 22px;
}

.cc-feature__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.34px;
  color: var(--color-text);
  margin: 0;
}

.cc-feature__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   COUNCIL GRID — Conseillers (compact)
   ============================================ */
.cc-council-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cc-council-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

.cc-council-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-natural);
}

.cc-council-card--leader {
  border-color: var(--color-primary);
}

/* En-tête de la carte : avatar + identité (alignés horizontalement) */
.cc-council-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Liste des coordonnées (sous l'en-tête) */
.cc-council-card__contacts {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-council-card__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--color-text);
}

.cc-council-card__contact svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.cc-council-card__contact a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base);
  word-break: break-word;
}

.cc-council-card__contact a:hover {
  color: var(--color-primary-ink);
}

.cc-council-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* Fond blanc pour les portraits détourés (cf. .cc-team-member__photo) */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.cc-council-card__avatar svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  opacity: 0.5;
}

.cc-council-card__info {
  min-width: 0;
  flex: 1;
}

.cc-council-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 19px;
  letter-spacing: -0.3px;
  color: var(--color-text);
  margin-bottom: 6px;
}

.cc-council-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cc-council-card__party {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 3px;
  background: rgba(22, 27, 136, 0.08);
  color: var(--color-primary);
}

.cc-council-card__party--sens { background: rgba(52, 153, 28, 0.1); color: var(--color-mobilite); }
.cc-council-card__party--ecolo { background: rgba(163, 185, 9, 0.18); color: #74840a; }
.cc-council-card__party--ps { background: rgba(238, 15, 13, 0.1); color: var(--color-slowfood); }

.cc-council-card__tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ============================================
   ADAPTATIONS LAYOUT « service » (colonne étroite)
   La page Collège/Conseil utilise .service-layout (contenu + sidebar).
   Les grilles cc-* sont recalibrées pour la largeur de .service-content.
   ============================================ */

/* Chiffres-clés : 2 colonnes dans la colonne de contenu */
.page-college-conseil .cc-intro__stats {
  margin-top: 8px;
}

/* Liste à puces du rôle du Conseil (compétences verbatim) */
.cc-prose__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-prose__list li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 23px;
  color: var(--color-text-secondary);
}

.cc-prose__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  opacity: 0.85;
}

/* Bloc « Composition du Conseil » */
.cc-conseil-block {
  margin-top: 8px;
}

.cc-conseil-block__note {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin: 4px 0 20px;
}

/* Le Collège passe en 2 colonnes dans la colonne de contenu (au lieu de 3) */
.page-college-conseil .cc-team-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Le Conseil passe en 2 colonnes dans la colonne de contenu (au lieu de 4).
   Idem pour les grilles membres CCCA de la page Participation citoyenne. */
.page-college-conseil .cc-council-grid,
.page-participation-citoyenne .cc-council-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Commissions communales : la grille des cards (repeat(3,1fr) en pleine
   largeur) passe en 2 colonnes dans la colonne étroite .service-content.
   Override 1 colonne sous 768px géré dans le bloc media plus bas. */
.service-content .commissions__grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Portrait dans l'avatar compact du Conseil */
.cc-council-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* En-tete d'agent non depliable (sidebar Contact -- pas de toggle horaires) */
.service-sidebar__team-header--static {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Mention discrete a cote d'une coordonnee (ex: « (secrétariat) ») */
.service-sidebar__contact-note {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-secondary);
  margin-left: 4px;
}

/* Sous-sections de la carte Contact (Direction générale / Secrétariat) :
   chaque personne dans son propre bloc, séparées par un divider + espace
   pour bien distinguer les deux interlocuteurs. */
.service-sidebar__team-section {
  display: flex;
  flex-direction: column;
}

.service-sidebar__team-section + .service-sidebar__team-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

/* ============================================
   RESPONSIVE — Collège et Conseil
   (sélecteurs préfixés .page-college-conseil pour battre la spécificité
   des règles de base .page-college-conseil .cc-* définies plus haut)
   ============================================ */

/* Tablette : la sidebar passe sous le contenu (géré par service.css).
   Le Collège reste sur 2 colonnes, le Conseil aussi (largeur retrouvée). */
@media (max-width: 1024px) {
  .page-college-conseil .cc-council-grid,
  .page-participation-citoyenne .cc-council-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .page-college-conseil .cc-intro__stats {
    grid-template-columns: 1fr 1fr;
  }

  .cc-stat {
    padding: 20px;
  }

  .cc-stat__number {
    font-size: 28px;
  }

  .page-college-conseil .cc-team-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cc-team-member__photo {
    aspect-ratio: 16 / 10;
  }

  .page-college-conseil .cc-council-grid,
  .page-participation-citoyenne .cc-council-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .page-college-conseil .cc-council-grid,
  .page-participation-citoyenne .cc-council-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 375px) {
  .cc-team-member__body {
    padding: 20px;
  }

  .page-college-conseil .cc-intro__stats {
    grid-template-columns: 1fr;
  }
}