/*
 * Refonte visuelle du site public — surcouche appliquée par-dessus le template
 * acheté (Lux / Bootstrap) sans toucher à sa structure.
 * Palette : bleu institutionnel #005DA6 (déjà utilisé sur la barre du site) +
 * accent ocre #D9A441. Typo : Fraunces (titres) + police existante (texte).
 */

:root {
  --brand-primary: #005DA6;
  --brand-primary-dark: #003D6E;
  --brand-accent: #D9A441;
  --brand-accent-dark: #8A5A2B;
}

/* L'ancien template force `text-align: justify` sur <main>, donc tout texte
   qui n'a pas d'alignement explicite hérite d'une justification à l'ancienne
   (bords en dents de scie, vilain sur les textes courts type cartes/héros).
   On repasse en alignement naturel à gauche partout, par défaut. */
main {
  text-align: left;
}

h1, h2, h3, h4,
.heading-title,
.icon-box-title,
.title-footer {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
}

/* Cartes actualités / projets / documents : coins arrondis + ombre légère */
.card-actualites,
.post_list_box,
.presse_media .row[style*="background: #EFEFEF"] {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(28, 36, 32, .06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card-actualites:hover,
.post_list_box:hover {
  box-shadow: 0 8px 22px rgba(28, 36, 32, .12);
  transform: translateY(-2px);
}
.card-actualites .card-image {
  border-radius: 12px 12px 0 0 !important;
}

/* Bouton "Lire la suite" : pastille pleine au lieu d'un simple lien */
.more_btn {
  display: inline-flex;
  align-items: center;
  background-color: var(--brand-primary) !important;
  color: #fff !important;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
}
.more_btn:after {
  content: '\2192';
  margin-left: 6px;
}

/* Services rapides (accueil) */
.quick-services-section {
  padding: 56px 0;
  background: #fff;
}
.quick-services-section .section-title {
  margin-bottom: 28px;
}
.quick-services {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.quick-service-card {
  background: #fff;
  border: 1px solid #E2DFD2;
  border-radius: 12px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.quick-service-card:hover {
  box-shadow: 0 8px 22px rgba(28, 36, 32, .1);
  transform: translateY(-2px);
  border-color: var(--brand-primary);
}
.quick-service-card .icon {
  width: 26px;
  height: 26px;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.quick-service-card.highlight {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.quick-service-card.highlight .icon {
  color: #fff;
}
.quick-service-card.highlight strong,
.quick-service-card.highlight span {
  color: #fff !important;
}
.quick-service-card strong {
  font-size: 15px;
  color: #1C2420;
}
.quick-service-card span {
  font-size: 12.5px;
  color: #5B6459;
}
@media (max-width: 991px) {
  .quick-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   EN-TÊTE — reconstruction complète, indépendante de l'ancien CSS.
   ===================================================================== */
.site-header {
  position: relative;
  z-index: 999;
  margin-top: 0 !important;
  box-shadow: 0 1px 10px rgba(0,0,0,.08);
}

/* --- Barre utilitaire --- */
.header-utility {
  background: var(--brand-primary);
  padding: 8px 0;
}
.header-utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.header-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-social-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: background-color .2s ease, color .2s ease;
}
.header-social-icon:hover {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #3A2A05 !important;
}
.header-quicklinks {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.header-quicklinks a {
  color: #fff !important;
  font-size: 12.5px;
}
.header-quicklinks a:hover {
  color: var(--brand-accent) !important;
}
.header-search-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* --- Bandeau principal (logo + nav) --- */
.header-main {
  background: #fff;
  padding: 14px 0;
  position: relative;
}
.header-main-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.header-brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.header-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.header-brand-text strong {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-size: 19px;
  color: #1C2420;
  font-weight: 700;
}
.header-brand-text small {
  font-size: 11.5px;
  color: #5B6459;
  letter-spacing: .03em;
}
.header-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid #E2DFD2;
  background: #fff;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #1C2420;
}
.header-nav-wrap.collapse {
  /* Sur ordinateur, le menu reste toujours visible : la classe Bootstrap
     "collapse" (display:none par défaut tant que ".show" n'est pas ajouté
     par le JS) ne doit s'appliquer qu'en dessous de 992px (voir media query
     plus bas). Sans ce !important, Bootstrap masquerait le menu par défaut
     sur toutes les tailles d'écran. */
  display: flex !important;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}

/* --- Navigation principale (pilules + méga-menu) --- */
.pill-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pill-nav-item {
  position: static;
}
.pill-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #1C2420 !important;
  font-size: 14.5px;
  font-weight: 600;
}
.pill-nav-link:hover {
  color: var(--brand-primary) !important;
}
.mega-dropdown {
  display: none;
  position: absolute;
  /* Accolé directement sous le lien (top:100%, sans espace vide) : un écart
     ici casserait le survol CSS — la souris perdrait le :hover en traversant
     la zone vide entre le lien et le panneau avant de l'atteindre. */
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 0 0 12px 12px;
  border-top: 3px solid var(--brand-primary);
  box-shadow: 0 18px 40px rgba(28,36,32,.16);
  padding: 26px 32px;
  z-index: 1000;
}
/* Zone tampon invisible qui comble l'espace entre le lien et le header
   (padding-bottom du lien) afin que le survol ne se coupe jamais, même en
   diagonale. */
.pill-nav-item {
  padding-bottom: 18px;
  margin-bottom: -18px;
}
.pill-nav-item:hover .mega-dropdown {
  display: block;
}
.mega-dropdown-title {
  display: block;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: 16px;
}
.mega-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 32px;
}
.mega-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #1C2420 !important;
  line-height: 1.4;
  min-width: 0;
}
.mega-dropdown-item i {
  color: var(--brand-primary);
  width: 16px;
  margin-top: 2px;
  text-align: center;
  flex-shrink: 0;
}
.mega-dropdown-item:hover {
  color: var(--brand-primary) !important;
}
.mega-dropdown-more {
  display: inline-block;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-primary) !important;
}

.btn-reclamation {
  background: var(--brand-accent);
  color: #3A2A05 !important;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.btn-reclamation:hover {
  background: var(--brand-accent-dark);
  color: #fff !important;
}

@media (max-width: 991px) {
  .header-toggle { display: flex; }
  .header-nav-wrap.collapse {
    flex-basis: 100%;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
  }
  .header-nav-wrap.collapse:not(.show) { display: none !important; }
  .pill-nav {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 4px;
  }
  .pill-nav-link { padding: 10px 0; width: 100%; }
  .mega-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: 1px solid #E2DFD2;
    min-width: 0;
    width: 100%;
    margin-bottom: 8px;
  }
  .mega-dropdown-grid { grid-template-columns: 1fr; }
  .pill-nav-item:hover .mega-dropdown { display: none; }
  .pill-nav-item.open .mega-dropdown { display: block; }
  .btn-reclamation { margin-top: 8px; }
}

/* ===== Hero : badge catégorie ===== */
.hero-slide-content .post-category a {
  background-color: var(--brand-accent) !important;
  color: #3A2A05 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 16px !important;
  border-radius: 20px;
  display: inline-block;
}

/* ===== Badge catégorie sur les cartes actualités ===== */
.post_category_badge {
  display: inline-block;
  background: #E3EEF7;
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 12px;
  border-radius: 12px;
  margin: 12px 12px 0;
}

/* =====================================================================
   SECTIONS DE CONTENU — en-têtes, actualités, projets, documents, partenaires
   (classes neuves, indépendantes de l'ancien CSS)
   ===================================================================== */
.news-section, .projects-section, .agenda-section, .documents-section, .partners-section {
  padding: 56px 0;
}
/* Alternance des fonds de section pour casser la monotonie du blanc uniforme
   (jamais deux sections consécutives avec le même fond) */
.quick-services-section { background: #fff; }
.news-section { background: #EAF1F7; }
.projects-section { background: #F1EEE4; }
.agenda-section { background: #fff; }
.documents-section { background: #EAF1F7; }
.partners-section { background: #F1EEE4; }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.section-title {
  margin: 0;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #1C2420;
}
.section-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-primary) !important;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.section-link:hover {
  color: var(--brand-primary-dark) !important;
}

/* --- Actualités --- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.news-card {
  background: #fff;
  border: 1px solid #E2DFD2;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(28, 36, 32, .05);
  transition: box-shadow .2s ease, transform .2s ease;
}
.news-card:hover {
  box-shadow: 0 8px 22px rgba(28, 36, 32, .12);
  transform: translateY(-2px);
}
.news-card-image {
  display: block;
  height: 180px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #EDEAE0;
}
.news-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.news-card-badge {
  align-self: flex-start;
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.news-card-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
}
.news-card-title a {
  color: #1C2420 !important;
}
.news-card-title a:hover {
  color: var(--brand-primary) !important;
}
.news-card-excerpt {
  margin: 0;
  font-size: 13.5px;
  color: #5B6459;
  line-height: 1.5;
  flex: 1;
}
.news-card-footer {
  margin-top: 4px;
}
.news-card-date {
  font-size: 12px;
  color: #5B6459;
}
@media (max-width: 991px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* --- Actions de développement (mise en avant + liste) --- */
.projects-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.project-feature {
  background: #fff;
  border: 1px solid #E2DFD2;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project-feature-image {
  display: block;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: #EDEAE0;
}
.project-feature-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.project-feature-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}
.project-feature-title a {
  color: #1C2420 !important;
}
.project-feature-title a:hover {
  color: var(--brand-primary) !important;
}
.project-feature-excerpt {
  margin: 0;
  font-size: 13.5px;
  color: #5B6459;
  line-height: 1.5;
}
.project-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.project-list-item {
  background: #fff;
  border: 1px solid #E2DFD2;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.project-list-item:hover {
  box-shadow: 0 8px 22px rgba(28, 36, 32, .1);
  transform: translateY(-2px);
}
.project-list-image {
  flex-shrink: 0;
  width: 84px;
  height: 68px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #EDEAE0;
}
.project-list-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.project-list-content strong {
  font-size: 14px;
  color: #1C2420;
  line-height: 1.35;
}
.project-list-date {
  font-size: 12px;
  color: #8B9490;
}
@media (max-width: 991px) {
  .projects-layout { grid-template-columns: 1fr; }
}

/* --- Partenaires --- */
.partners-grid {
  column-count: 4;
  column-gap: 20px;
}
@media (max-width: 991px) { .partners-grid { column-count: 3; } }
@media (max-width: 700px) { .partners-grid { column-count: 2; } }
@media (max-width: 460px) { .partners-grid { column-count: 1; } }

/* --- Documents --- */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 767px) {
  .documents-grid { grid-template-columns: 1fr; }
}

/* ===== Cartes documents ===== */
.document-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid #E2DFD2;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(28, 36, 32, .05);
  transition: box-shadow .2s ease, transform .2s ease;
}
.document-card:hover {
  box-shadow: 0 8px 22px rgba(28, 36, 32, .1);
  transform: translateY(-2px);
}
.document-card-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #FBEAEA;
  color: #C0392B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.document-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.document-card-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #5B6459;
}
.document-card-meta span:not(:last-child):after {
  content: '·';
  margin-left: 10px;
  color: #C9C2AC;
}
.document-card-title {
  margin: 0;
  font-weight: 700;
  font-size: 14.5px;
  color: #1C2420;
  text-align: left;
}
.document-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.document-card-size {
  font-size: 12px;
  color: #5B6459;
  font-weight: 600;
}
.document-card-download {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-primary) !important;
}
.document-card-download:hover {
  color: var(--brand-primary-dark) !important;
}

/* ===== Partenaires ===== */
.partner-card {
  display: block;
  break-inside: avoid;
  background: #fff;
  border: 1px solid #E2DFD2;
  border-radius: 12px;
  padding: 26px 22px;
  margin: 0 0 20px;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.partner-card:hover {
  box-shadow: 0 8px 22px rgba(28, 36, 32, .1);
  transform: translateY(-2px);
}
.partner-card img {
  width: 100%;
  height: auto;
  max-width: 180px;
}

/* ===== Hero (photo plein cadre en fond + voile sombre, mesures façon maquette) ===== */
.hero-slide-bg {
  position: relative;
  width: 100%;
  background-color: var(--brand-primary-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,20,40,.82) 0%, rgba(0,20,40,.55) 55%, rgba(0,20,40,.25) 100%);
}
.hero-slide {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 480px;
  padding: 48px 0;
  box-sizing: border-box;
}
.hero-slide-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: 640px;
}
.hero-eyebrow {
  color: #CFE3D5;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-slide-content h2 {
  margin: 0;
  color: #fff !important;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.15;
  text-shadow: none;
  max-width: 620px;
}
.hero-slide-content h2 a {
  color: #fff !important;
  text-shadow: none;
}
.hero-subtext {
  margin: 0;
  color: #DCE9DE;
  font-size: 16px;
  line-height: 1.6;
  max-width: 560px;
}
.hero-slide-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.hero-btn {
  padding: 14px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.hero-btn-primary {
  background: var(--brand-accent);
  color: #3A2A05 !important;
}
.hero-btn-primary:hover {
  background: var(--brand-accent-dark);
  color: #fff !important;
}
.hero-btn-outline {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff !important;
}
.hero-btn-outline:hover {
  background: rgba(255,255,255,.22);
}
@media (max-width: 991px) {
  .hero-slide { height: auto; padding: 48px 24px; }
  .hero-slide-content h2 { font-size: 30px; }
  .hero-subtext { font-size: 14px; }
}

/* ===== Agenda municipal ===== */
.agenda-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.agenda-card {
  background: #fff;
  border: 1px solid #E2DFD2;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.agenda-card:hover {
  box-shadow: 0 8px 22px rgba(28, 36, 32, .1);
  transform: translateY(-2px);
}
.agenda-card-date {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.agenda-card-date--primary { background: var(--brand-primary); }
.agenda-card-date--accent { background: var(--brand-accent); color: #3A2A05; }
.agenda-card-date--dark { background: var(--brand-primary-dark); }
.agenda-card-month {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.agenda-card-day {
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
.agenda-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agenda-card-body strong {
  font-size: 14.5px;
  color: #1C2420;
}
.agenda-card-body span {
  font-size: 12.5px;
  color: #5B6459;
}

/* ===== Chiffres clés ===== */
.chiffres_cles {
  background: var(--brand-primary-dark);
  padding: 44px 0;
}
.chiffres-cles-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.chiffre-cle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}
.chiffre-cle-divider {
  width: 1px;
  background: rgba(255,255,255,.18);
  align-self: stretch;
}
.chiffre-cle-value {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
}
.chiffre-cle-label {
  font-size: 13px;
  color: #CFE3F5;
  text-align: center;
}

/* ===== Bandeau newsletter (crème, façon maquette) ===== */
.newsletter_band {
  background: #EFEAD9;
  padding: 36px 0;
}
.newsletter-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.newsletter-band-inner .title-footer {
  color: #1C2420 !important;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
}
.newsletter-band-inner p {
  color: #5B6459;
  margin: 4px 0 0;
}
.newsletter-band-inner form {
  flex-shrink: 0;
}
.newsletter-inline-form {
  display: flex;
  gap: 10px;
}
.newsletter-inline-input {
  width: 280px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #E2DFD2;
  font-size: 14px;
  font-family: inherit;
}
.newsletter-inline-submit {
  background: var(--brand-primary);
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 2px solid var(--brand-primary);
  cursor: pointer;
  white-space: nowrap;
}
.newsletter-inline-submit:hover {
  background: #fff;
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary);
}

/* ===== Pied de page sombre (façon maquette) ===== */
#footer {
  background-color: #1C2420 !important;
  padding: 48px 0 0;
}
#footer .title-footer {
  color: #fff !important;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-brand-col .title-footer {
  text-transform: none !important;
  font-size: 19px !important;
  letter-spacing: normal !important;
}
.footer-brand-address {
  margin: 0;
  font-size: 13.5px;
  color: #A9B3AC;
  line-height: 1.6;
  max-width: 240px;
}
#footer .nav-link-footer {
  color: #A9B3AC !important;
}
#footer .nav-link-footer:hover {
  color: #fff !important;
}
#footer .brand-icon.circle-background {
  color: #A9B3AC;
  background: rgba(255,255,255,.08);
}
#footer a:hover .brand-icon.circle-background {
  color: #1C2420;
  background: var(--brand-accent);
}

/* Les 5 colonnes du pied de page (marque + 4 groupes de liens injectés par les
   partials _footer_menu/_social_footer_menu) totalisent 15/12 en classes
   Bootstrap col-sm-3 : ça déborde de la grille et la 5e colonne retombe à la
   ligne. On repasse cette rangée précise en grille CSS à 5 colonnes réelles,
   façon maquette (colonne "marque" un peu plus large). */
#footer .first-half > .row {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 28px;
}
#footer .first-half > .row > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 767px) {
  #footer .first-half > .row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  #footer .first-half > .row {
    grid-template-columns: 1fr;
  }
}

/* Barre du bas : même fond sombre que le reste du pied de page (plus de
   bandeau bleu), avec les liens légaux de la maquette. */
.copyright-block {
  background-color: #1C2420 !important;
  padding: 20px 0;
  margin-top: 36px;
}
.copyright-block .copyright-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.copyright-block .official-logo img {
  width: 40px !important;
}
.copyright-block .copyright-text {
  color: #8B9490;
  font-size: 12.5px;
}
.footer-legal-links {
  display: flex;
  gap: 20px;
}
.footer-legal-links a {
  color: #8B9490 !important;
  font-size: 12.5px;
}
.footer-legal-links a:hover {
  color: #fff !important;
}

/* Liens et éléments interactifs : unification sur le bleu de marque */
a:hover,
.nav-link:hover,
.icon-box-title a:hover,
.nav-link-footer:hover {
  color: var(--brand-primary) !important;
}

.nav-item.dropbtn > .nav-link:hover,
.nav-item.dropbtn > .nav-link:focus {
  color: var(--brand-primary) !important;
}

.dropdown-content {
  border-top: 3px solid var(--brand-primary);
}

/* Icônes réseaux sociaux (barre du haut + pied de page) */
.social-icon-plus.social-icon,
.social-media-icons-footer .brand-icon.circle-background {
  transition: background-color .2s ease, color .2s ease;
}
.social-icon-plus.social-icon:hover,
.social-media-icons-footer a:hover .brand-icon.circle-background {
  background-color: var(--brand-accent) !important;
  color: #3A2A05 !important;
}

/* Boutons d'action */
.btn-warning,
.search-form__submit {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #3A2A05 !important;
}
.btn-warning:hover {
  background-color: var(--brand-accent-dark) !important;
  border-color: var(--brand-accent-dark) !important;
}

.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: #fff !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

/* =========================================================================
   Pages intérieures (page de contenu, liste par catégorie, article, contact,
   saisir la mairie, réclamation, 404) — classes fraîches, indépendantes du
   template acheté, cohérentes avec l'accueil.
   ========================================================================= */

.breadcrumb-bar {
  padding: 16px 0;
  font-size: 13px;
  color: #777;
  background: #FAFAF8;
}
.breadcrumb-bar a { color: #777; }
.breadcrumb-bar a:hover { color: var(--brand-primary); }
.breadcrumb-bar .current { color: #1C2420; font-weight: 600; }

.page-hero {
  background: linear-gradient(90deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  padding: 48px 0 44px;
  color: #fff;
}
.page-hero.page-hero-accent {
  background: linear-gradient(90deg, var(--brand-accent-dark) 0%, var(--brand-accent) 100%);
}
.page-hero-eyebrow {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 10px;
}
.page-hero-title {
  margin: 0;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 38px;
}
.page-hero-title + .page-hero-lead { margin-top: 10px; }
.page-hero-lead {
  font-size: 15px;
  opacity: .9;
  max-width: 680px;
}

/* Boutons pilule génériques */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 22px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}
/* !important sur la couleur : sans ça, la règle globale a{color:...!important}
   (stylebea6.css) écrase silencieusement le texte des boutons <a>, rendant le
   texte invisible (même couleur que le fond) sur certains boutons. */
.btn-pill-primary { background: var(--brand-primary); color: #fff !important; border-color: var(--brand-primary); }
.btn-pill-primary:hover { background: #fff; color: var(--brand-primary) !important; border-color: var(--brand-primary); }
.btn-pill-accent { background: var(--brand-accent-dark); color: #fff !important; }
.btn-pill-accent:hover { background: #6E4621; color: #fff !important; }
.btn-pill-light { background: #F1EEE4; color: #1C2420 !important; }
.btn-pill-light:hover { background: #E7E2D3; color: #1C2420 !important; }

/* ---- Page de contenu générique (sidebar + article) ----
   La largeur vient du vrai .container Bootstrap ajouté en 2e classe dans le
   template (<div class="content-layout container">) — ici, uniquement la
   grille et le padding vertical. */
.content-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .content-layout { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 32px; }
}
.content-sidebar {
  background: #F8F7F3;
  border-radius: 12px;
  padding: 20px;
  position: sticky;
  top: 24px;
}
.content-sidebar-title {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-primary-dark);
  padding: 0 16px 14px;
}
.content-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.side-link {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #3A4440;
}
.side-link:hover { background: #F1EEE4; }
.side-link.active { background: #EAF1F7; color: var(--brand-primary); }

.content-photo {
  width: 100%;
  height: 320px;
  border-radius: 14px;
  background: #D8E3EC;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6C86A0;
  font-size: 14px;
  overflow: hidden;
  object-fit: cover;
}

.pull-quote {
  border-left: 4px solid var(--brand-accent);
  background: #FBF6EC;
  padding: 20px 24px;
  margin: 28px 0;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 18px;
  color: #5C4321;
  line-height: 1.6;
}

.signature-block {
  margin-top: 36px;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--brand-primary-dark);
}
.signature-block small {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: #777;
  margin-top: 2px;
}

/* ---- Zones de contenu : la largeur vient du vrai .container Bootstrap
   ajouté en 2e classe dans le template — ici, uniquement le padding vertical. ---- */
.category-list-body,
.article-layout,
.form-page-body {
  padding-top: 48px;
  padding-bottom: 48px;
}
@media (max-width: 768px) {
  .category-list-body, .article-layout, .form-page-body { padding-top: 32px; padding-bottom: 32px; }
}

/* ---- Liste par catégorie (grille de cartes) ---- */
.entity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1100px) { .entity-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .entity-grid { grid-template-columns: 1fr; } }

.entity-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(28, 36, 32, .07);
  padding: 24px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.entity-card:hover {
  box-shadow: 0 8px 22px rgba(28, 36, 32, .12);
  transform: translateY(-2px);
}
.entity-card-logo {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: #EAF1F7;
  color: #6C86A0;
  font-size: 11px;
  margin-bottom: 16px;
  object-fit: cover;
  object-position: center top;
}
.entity-card-title {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 8px;
}
.entity-card-desc {
  font-size: 13.5px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 14px;
}
.entity-card-more {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-primary);
}
.entity-card-more:after { content: '\2192'; margin-left: 6px; }

.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: #888;
  font-size: 15px;
}

/* ---- Membres d'un groupe (ex : le Maire et ses adjoints, conseil communal) ---- */
.team-group-title {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #003D6E;
  margin: 0 0 20px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 44px;
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(28, 36, 32, .08);
  transition: box-shadow .2s ease, transform .2s ease;
}
.team-card:hover {
  box-shadow: 0 10px 26px rgba(28, 36, 32, .14);
  transform: translateY(-3px);
}
.team-card-photo {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center top;
  background: #EAF1F7;
}
.team-card-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B9C7D6;
}
.team-card-body {
  padding: 18px 20px 22px;
  text-align: center;
}
.team-card-name {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1C2420;
  margin-bottom: 4px;
}
.team-card-role {
  font-size: 13.5px;
  color: #6C86A0;
  font-weight: 600;
}

/* ---- Documents (page "Documents" en grille) ---- */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1100px) { .doc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .doc-grid { grid-template-columns: 1fr; } }
.doc-card {
  background: #fff;
  border: 1px solid #E2DFD2;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.doc-card:hover {
  box-shadow: 0 10px 26px rgba(28, 36, 32, .12);
  transform: translateY(-3px);
}
.doc-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
  background: #EDEAE0;
  color: #767064;
}
.doc-card-icon.doc-type-pdf, .document-card-icon.doc-type-pdf { background: #FBEAEA; color: #C0392B; }
.doc-card-icon.doc-type-doc, .doc-card-icon.doc-type-docx, .document-card-icon.doc-type-doc, .document-card-icon.doc-type-docx { background: #E8EEFA; color: #2B579A; }
.doc-card-icon.doc-type-xls, .doc-card-icon.doc-type-xlsx, .doc-card-icon.doc-type-csv, .document-card-icon.doc-type-xls, .document-card-icon.doc-type-xlsx, .document-card-icon.doc-type-csv { background: #E6F4EA; color: #217346; }
.doc-card-icon.doc-type-ppt, .doc-card-icon.doc-type-pptx, .document-card-icon.doc-type-ppt, .document-card-icon.doc-type-pptx { background: #FDEBE3; color: #D24726; }
.doc-card-icon.doc-type-zip, .doc-card-icon.doc-type-rar, .doc-card-icon.doc-type-7z, .document-card-icon.doc-type-zip, .document-card-icon.doc-type-rar, .document-card-icon.doc-type-7z { background: #F1EAFB; color: #6C3FC5; }
.doc-card-icon.doc-type-jpg, .doc-card-icon.doc-type-jpeg, .doc-card-icon.doc-type-png, .doc-card-icon.doc-type-gif, .doc-card-icon.doc-type-webp, .document-card-icon.doc-type-jpg, .document-card-icon.doc-type-jpeg, .document-card-icon.doc-type-png, .document-card-icon.doc-type-gif, .document-card-icon.doc-type-webp { background: #EAF1F7; color: #2E6DA4; }
.doc-card-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #888;
  margin-bottom: 10px;
}
.doc-card-meta span:not(:last-child):after {
  content: '·';
  margin-left: 10px;
  color: #C9C2AC;
}
.doc-card-title {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1C2420;
  flex: 1;
  margin-bottom: 18px;
}
.doc-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.doc-card-size {
  font-size: 12.5px;
  color: #5B6459;
  font-weight: 600;
}

/* ---- Détail d'un article ---- */
.article-hero {
  width: 100%;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  background-color: #7A8A96;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 40px 0;
}
.article-hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,20,40,.15) 0%, rgba(0,20,40,.68) 100%);
}
/* La largeur vient du vrai .container Bootstrap (ajouté en 2e classe dans les
   templates) — on ne garde ici que ce qui n'est pas déjà fourni par .container. */
.article-hero-inner {
  position: relative;
  z-index: 1;
}
.article-hero-tag {
  background: var(--brand-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.article-hero-title {
  margin: 16px 0 0;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #fff;
  max-width: 780px;
  line-height: 1.25;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #888;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EEE;
}
.article-photo {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  background: #D8E3EC;
  margin: 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6C86A0;
  font-size: 14px;
  overflow: hidden;
  object-fit: cover;
}
/* Popup newsletter (affiché au premier chargement, tant que non fermé) */
.newsletter-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 36, 32, .55);
  z-index: 2200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.newsletter-popup-dialog { width: 100%; max-width: 460px; }
.newsletter-popup-body { padding: 48px 40px 40px; text-align: center; }
.newsletter-popup-logo { width: 68px; height: 68px; object-fit: contain; margin: 0 auto 18px; display: block; }
.newsletter-popup-body .newsletter-inline-form { flex-direction: column; gap: 12px; margin-top: 8px; }
.newsletter-popup-body .newsletter-inline-input { width: 100%; box-sizing: border-box; text-align: center; }
.newsletter-popup-body .newsletter-inline-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
@media (max-width: 575px) {
  .newsletter-popup-body { padding: 44px 24px 32px; }
}

/* Modal de recherche (icône loupe du header) */
.search-modal-dialog { max-width: 640px; }
.search-modal-content {
  position: relative;
  border: none;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.search-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #F2F4F6;
  color: #5B6459;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.search-modal-close:hover { background: var(--brand-primary); color: #fff; }
.search-modal-body { padding: 56px 40px 48px; text-align: center; }
.search-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #EAF1F7;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.search-modal-title {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #1C2420;
  margin-bottom: 8px;
  text-align: center;
}
.search-modal-subtitle { font-size: 14px; color: #5B6459; margin-bottom: 28px; }
.search-modal-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F5F6F4;
  border: 2px solid #E4E2DB;
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  transition: border-color .15s ease;
}
.search-modal-form:focus-within { border-color: var(--brand-primary); }
.search-modal-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #1C2420;
  height: 40px;
  outline: none;
}
.search-modal-input::placeholder { color: #9AA39C; }
.search-modal-submit {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--brand-primary);
  color: #fff !important;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.search-modal-submit:hover { background: var(--brand-primary-dark); }
@media (max-width: 575px) {
  .search-modal-body { padding: 48px 20px 36px; }
  .search-modal-title { font-size: 21px; }
}

.source-credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 9px 16px;
  background: #EAF1F7;
  border-radius: 999px;
  font-size: 13px;
  color: #3A4440;
}
.source-credit i { color: #1877F2; font-size: 14px; }
.source-credit strong { color: #1C2420; }
.source-credit a {
  margin-left: 2px;
  padding-left: 10px;
  border-left: 1px solid #C9D7E2;
  color: var(--brand-primary) !important;
  font-weight: 700;
  text-decoration: none !important;
}
.source-credit a:hover { color: var(--brand-primary-dark) !important; text-decoration: underline !important; }
.share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #EEE;
}
.share-row-label {
  font-size: 13px;
  font-weight: 700;
  color: #666;
  margin-right: 2px;
}
.share-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EAF1F7;
  color: var(--brand-primary) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.share-icon:hover {
  background: var(--brand-primary);
  color: #fff !important;
  transform: translateY(-2px);
}
.sidebar-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(28, 36, 32, .07);
  padding: 20px;
}
.sidebar-card.sidebar-card-accent { background: #EAF1F7; box-shadow: none; }
.sidebar-card-title {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-primary-dark);
  margin-bottom: 14px;
}
.related-list { display: flex; flex-direction: column; gap: 14px; }
.related-link { font-size: 13.5px; font-weight: 600; line-height: 1.5; color: #1C2420; }
.related-link:hover { color: var(--brand-primary); }

/* ---- Contact / Saisir la mairie / Réclamation (formulaires) ---- */
.form-page-body.narrow { max-width: 880px; }

.contact-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 48px;
}
.help-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 48px;
}
@media (max-width: 900px) {
  .contact-layout, .help-layout { grid-template-columns: 1fr; }
}

.contact-info-item { display: flex; gap: 14px; margin-bottom: 26px; }
.contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #EAF1F7;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.contact-info-label { font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.contact-info-value { font-size: 13.5px; color: #666; line-height: 1.6; }
.map-placeholder {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  background: #D8E3EC;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6C86A0;
  font-size: 13px;
  margin-top: 26px;
}
.map-placeholder iframe { width: 100%; height: 100%; border: 0; display: block; }

.form-card {
  background: #F8F7F3;
  border-radius: 14px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; font-weight: 700; color: #3A4440; }
.form-field input,
.form-field textarea,
.form-field select {
  border: 1px solid #DDD;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  box-sizing: border-box;
}
.form-field textarea { resize: vertical; }
.form-submit { align-self: flex-start; }

.help-steps-title {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--brand-primary-dark);
  margin-bottom: 20px;
}
.help-step { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.help-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.help-step-text { font-size: 13.5px; color: #3A4440; }
.info-callout {
  margin-top: 32px;
  background: #EAF1F7;
  border-radius: 10px;
  padding: 18px;
  font-size: 13px;
  color: #294861;
  line-height: 1.6;
}

.confidentiality-note {
  background: #FBF6EC;
  border: 1px solid #F0DDB2;
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 13.5px;
  color: #5C4321;
  line-height: 1.6;
  margin-bottom: 32px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* ---- Page de connexion ---- */
.login-page {
  width: 100%;
  min-height: 70vh;
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 60%, #0A74C4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  box-sizing: border-box;
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 20, 40, .25);
  padding: 40px 36px;
}
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}
.login-logo-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 14px;
}
.login-logo-title {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--brand-primary-dark);
  text-align: center;
}
.login-logo-sub { font-size: 12.5px; color: #888; margin-top: 2px; }
.login-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  margin-top: -2px;
}
.login-field-row label { display: flex; align-items: center; gap: 6px; color: #666; }
.login-field-row a { font-weight: 600; color: var(--brand-primary); }
.login-footnote { text-align: center; font-size: 12px; color: #999; margin-top: 24px; }

/* ---- Page d'erreur 404 ---- */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px;
  min-height: 46vh;
  box-sizing: border-box;
}
.error-page-code {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 110px;
  line-height: 1;
  color: var(--brand-primary);
  opacity: .9;
}
.error-page-title {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 26px;
  margin: 12px 0 10px;
}
.error-page-text {
  font-size: 15px;
  color: #666;
  max-width: 440px;
  line-height: 1.6;
  margin: 0 0 30px;
}
.error-page-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---- Onglets "Projets" (liste par catégorie) ---- */
.pill-tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.pill-tab-link {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 20px;
  background: #F1EEE4;
  color: #1C2420 !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pill-tab-link.active, .pill-tab-link:hover {
  background: var(--brand-primary);
  color: #fff !important;
}

/* ---- FAQ (accordéon) ----
   Repose entièrement sur le comportement natif de <details>/<summary> et
   l'attribut [open] — aucun JS. Un closed <details> n'affiche son contenu
   sous aucune condition CSS, même avec !important sur un enfant : la
   visibilité doit donc passer par [open] lui-même, jamais par une classe
   indépendante. */
.faq-container { display: flex; flex-direction: column; gap: 14px; }
.faq-container details {
  font-size: 1rem;
  background: #F6FAFF;
  border-radius: 10px;
  border: 1px solid #DCE8F2;
  overflow: hidden;
}
.faq-container summary {
  user-select: none;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  list-style: none;
}
.faq-container summary::-webkit-details-marker { display: none; }
.faq-container .faq-title {
  color: var(--brand-primary-dark);
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.faq-container .expand-icon {
  color: var(--brand-primary);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform .15s ease;
}
.faq-container details[open] .expand-icon { transform: rotate(45deg); }
.faq-container .faq-content {
  padding: 0 22px 20px;
  color: #3A4440;
  font-size: 14.5px;
  line-height: 1.7;
}

/* =========================================================================
   Contenu éditorial (texte saisi via l'éditeur WYSIWYG — Article.content,
   Page.content). Donne un rendu propre par défaut aux balises HTML simples,
   pour que le contenu stocké n'ait plus besoin de styles en ligne.
   ========================================================================= */
.editorial-content { font-size: 16px; line-height: 1.8; color: #2A332E; }
.editorial-content > *:first-child { margin-top: 0; }

.editorial-content h2 {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--brand-primary-dark);
  margin: 40px 0 18px;
}
.editorial-content h3 {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: var(--brand-primary-dark);
  margin: 32px 0 14px;
}
.editorial-content h4,
.editorial-content h5 {
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--brand-primary);
  margin: 26px 0 12px;
}

.editorial-content p { margin: 0 0 18px; }
.editorial-content a { color: var(--brand-primary); text-decoration: underline; }
.editorial-content a:hover { color: var(--brand-primary-dark); }
.editorial-content strong { color: #1C2420; }

.editorial-content ul,
.editorial-content ol { margin: 0 0 20px; padding-left: 22px; }
.editorial-content li { margin-bottom: 8px; }
.editorial-content ul { list-style: none; padding-left: 4px; }
.editorial-content ul > li {
  position: relative;
  padding-left: 22px;
}
.editorial-content ul > li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-accent);
}

.editorial-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 8px 0 24px;
}
.editorial-content figure { margin: 0 0 24px; }
.editorial-content figure img { margin-bottom: 10px; }
.editorial-content figcaption {
  font-size: 13px;
  color: #888;
  text-align: center;
}

.editorial-content blockquote {
  border-left: 4px solid var(--brand-accent);
  background: #FBF6EC;
  padding: 20px 24px;
  margin: 28px 0;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 18px;
  color: #5C4321;
  line-height: 1.6;
}

.editorial-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 28px;
  font-size: 14.5px;
}
.editorial-content table th,
.editorial-content table td {
  border: 1px solid #E4E2DB;
  padding: 10px 14px;
  text-align: left;
}
.editorial-content table th {
  background: #EAF1F7;
  color: var(--brand-primary-dark);
  font-weight: 700;
}
.editorial-content table tr:nth-child(even) td { background: #FAFAF8; }
.editorial-content .table-scroll { width: 100%; overflow-x: auto; margin-bottom: 28px; }
.editorial-content .table-scroll table { margin-bottom: 0; }

/* ---- Filtre de recherche au-dessus d'un tableau de prestations ---- */
.table-filter {
  position: relative;
  max-width: 480px;
  margin: 0 0 22px;
}
.table-filter input {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--brand-primary);
  border-radius: 999px;
  padding: 12px 20px 12px 44px;
  font-size: 14.5px;
  font-family: 'Montserrat', sans-serif;
  color: #1C2420;
}
.table-filter input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,93,166,.15); }
.table-filter-icon {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-primary);
  font-size: 14px;
  pointer-events: none;
}
.table-filter-empty {
  display: none;
  padding: 20px;
  text-align: center;
  color: #888;
  font-size: 14px;
}

.editorial-content .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 10px 0 28px;
}
.editorial-content .stat-card {
  background: #F8F7F3;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.editorial-content .stat-card .stat-value {
  display: block;
  font-family: 'Fraunces', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--brand-primary);
}
.editorial-content .stat-card .stat-label {
  display: block;
  font-size: 12.5px;
  color: #666;
  margin-top: 4px;
}

.editorial-content hr { border: none; border-top: 1px solid #E4E2DB; margin: 32px 0; }