/* ============================================================
   pages.css — Styles communs aux pages intérieures
   ============================================================ */

/* ── MAIRIE ── */
.contact-block {
  border: 1px solid var(--gris-20);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.contact-block__title {
  padding: .875rem 1.25rem;
  font-family: var(--font-titre);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-60);
  background: var(--gris-10);
  border-bottom: 1px solid var(--gris-20);
}
.contact-block__row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--gris-20);
  font-size: .9375rem;
}
.contact-block__row:last-child { border-bottom: 0; }
.contact-block__key {
  font-family: var(--font-titre);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gris-60);
  flex-shrink: 0;
  width: 100px;
}
.contact-block__val { color: var(--noir); }
.contact-block__val a { color: var(--noir); text-decoration: underline; }

/* Horaires table */
.horaires-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.horaires-table td { padding: .6rem .875rem; border-bottom: 1px solid var(--gris-20); }
.horaires-table td:first-child { font-weight: 500; width: 130px; }
.horaires-table tr:last-child td { border-bottom: 0; }
.horaires-table .closed { color: var(--gris-60); font-style: italic; }

/* Conseil municipal */
.conseil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
.membre-card {
  border: 1px solid var(--gris-20);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  transition: box-shadow var(--tr);
}
.membre-card:hover { box-shadow: var(--shadow); }
.membre-card__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--gris-10);
  display: block;
}
.membre-card__initials {
  width: 100%;
  aspect-ratio: 1;
  background: var(--gris-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gris-40);
}
.membre-card__body { padding: 1rem .875rem; }
.membre-card__nom  { font-family: var(--font-titre); font-size: .9375rem; font-weight: 600; color: var(--noir); }
.membre-card__prenom { font-size: .875rem; color: var(--gris-80); }
.membre-card__role { font-size: .8125rem; color: var(--gris-60); margin-top: .25rem; }

/* Démarches */
.demarche-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--gris-20);
}
.demarche-item:last-child { border-bottom: 0; }
.demarche-item__icon {
  width: 44px; height: 44px;
  background: var(--gris-10);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.demarche-item__body    { flex: 1; }
.demarche-item__title   { font-family: var(--font-titre); font-size: 1rem; font-weight: 600; color: var(--noir); margin-bottom: .25rem; }
.demarche-item__desc    { font-size: .875rem; color: var(--gris-80); line-height: 1.6; margin-bottom: .5rem; }
.demarche-item__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Arrêtés */
.arrete-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--gris-20);
}
.arrete-item:last-child { border-bottom: 0; }
.arrete-item__date {
  font-family: var(--font-titre);
  font-size: .75rem;
  font-weight: 600;
  color: var(--gris-60);
  flex-shrink: 0;
  padding-top: .125rem;
  min-width: 80px;
}
.arrete-item__body  { flex: 1; }
.arrete-item__title { font-weight: 600; font-size: .9375rem; color: var(--noir); margin-bottom: .2rem; }
.arrete-item__desc  { font-size: .875rem; color: var(--gris-80); }

/* Urbanisme */
.urbanisme-item {
  padding: 1.5rem;
  border: 1px solid var(--gris-20);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}
.urbanisme-item:last-child { margin-bottom: 0; }
.urbanisme-item__title { font-family: var(--font-titre); font-size: 1.0625rem; font-weight: 600; margin-bottom: .5rem; }
.urbanisme-item__desc  { font-size: .9375rem; color: var(--gris-80); margin-bottom: 1rem; line-height: 1.65; }

/* ── ACTUALITÉS ── */
.filters-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gris-20);
}
.filter-btn {
  padding: .375rem .875rem;
  font-family: var(--font-titre);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid var(--gris-40);
  background: var(--blanc);
  color: var(--gris-80);
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--tr);
}
.filter-btn:hover  { background: var(--gris-10); color: var(--noir); }
.filter-btn.active { background: var(--noir); color: var(--blanc); border-color: var(--noir); }

.article-list { display: flex; flex-direction: column; gap: 0; }
.article-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--gris-20);
}
.article-row:last-child { border-bottom: 0; }
.article-row__img {
  width: 160px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--radius);
  flex-shrink: 0;
  background: var(--gris-10);
}
.article-row__img-placeholder {
  width: 160px;
  height: 110px;
  background: var(--gris-10);
  border-radius: var(--radius);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-40);
  font-size: 1.75rem;
}
.article-row__body { flex: 1; }
.article-row__meta {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.article-row__date  { font-size: var(--petit); color: var(--gris-60); }
.article-row__title { font-family: var(--font-titre); font-size: 1.1rem; font-weight: 600; color: var(--noir); margin-bottom: .4rem; line-height: 1.3; }
.article-row__excerpt { font-size: .875rem; color: var(--gris-80); line-height: 1.6; margin-bottom: .75rem; }
@media (max-width: 600px) {
  .article-row { flex-direction: column; }
  .article-row__img, .article-row__img-placeholder { width: 100%; height: 180px; }
}

/* ── ÉVÉNEMENTS ── */
.event-card {
  border: 1px solid var(--gris-20);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  transition: box-shadow var(--tr);
}
.event-card:hover { box-shadow: var(--shadow); }
.event-card__date {
  background: var(--noir);
  color: var(--blanc);
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem .5rem;
  text-align: center;
  flex-shrink: 0;
}
.event-card__day   { font-family: var(--font-titre); font-size: 2rem; font-weight: 700; line-height: 1; }
.event-card__month { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .15rem; }
.event-card__body  { padding: 1.1rem 1.25rem; flex: 1; }
.event-card__cat   { font-family: var(--font-titre); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-60); margin-bottom: .35rem; }
.event-card__title { font-family: var(--font-titre); font-size: 1rem; font-weight: 600; color: var(--noir); margin-bottom: .35rem; }
.event-card__meta  { font-size: .8125rem; color: var(--gris-60); display: flex; flex-wrap: wrap; gap: .5rem; }
.event-cards-grid  { display: flex; flex-direction: column; gap: .875rem; }

/* ── DOCUMENTS ── */
.doc-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gris-20);
  border-radius: var(--radius);
  transition: background var(--tr);
}
.doc-item:hover { background: var(--gris-10); }
.doc-item__icon  { font-size: 1.75rem; flex-shrink: 0; padding-top: .1rem; color: var(--gris-60); }
.doc-item__body  { flex: 1; }
.doc-item__title { font-family: var(--font-titre); font-size: .9375rem; font-weight: 600; color: var(--noir); margin-bottom: .2rem; }
.doc-item__meta  {
  font-size: var(--petit);
  color: var(--gris-60);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.doc-item__desc    { font-size: .875rem; color: var(--gris-80); }
.doc-item__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.doc-list          { display: flex; flex-direction: column; gap: .5rem; }

/* Badges CR / OdJ */
.badge--cr  { background: #e8f4fd; color: #1a6fa8; border-radius: 99px; }
.badge--odj { background: #fdf3e8; color: #a86a1a; border-radius: 99px; }

/* ── CONTACT PAGE ── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: start;
}
.contact-info-block { margin-bottom: 1.5rem; }
.contact-info-block h3 { font-size: var(--h3); margin-bottom: .875rem; }
.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--gris-20);
  font-size: .9375rem;
}
.contact-info-row:last-child { border-bottom: 0; }
.contact-info-row__icon { font-size: 1.1rem; flex-shrink: 0; padding-top: .1rem; width: 24px; text-align: center; }
.contact-info-row__text { color: var(--noir); line-height: 1.55; }
.contact-info-row__text a { color: var(--noir); text-decoration: underline; }
.form-success {
  padding: 1.25rem;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius);
  color: #065f46;
  font-size: .9375rem;
  margin-bottom: 1.25rem;
  display: none;
}
.form-success.show { display: block; }
.map-embed {
  width: 100%;
  height: 300px;
  border: 1px solid var(--gris-20);
  border-radius: var(--radius-lg);
  margin-top: 1.5rem;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

/* ── ARTICLE DETAIL ── */
.article-detail__header { margin-bottom: 2rem; }
.article-detail__title  { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }
.article-detail__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--jaune);
  font-size: .875rem;
  color: var(--gris-60);
}

/*
 * IMAGE ARTICLE : affichée entière, SANS rogner
 * - height: auto → la hauteur suit les proportions naturelles de l'image
 * - object-fit: contain → aucun crop, l'image est visible en totalité
 * - max-width: 100% → ne dépasse pas le conteneur
 * - Pas de max-height → l'image n'est jamais tronquée
 */
.article-detail__img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  background: var(--gris-10);
  display: block;
}

.article-detail__content { font-size: 1rem; line-height: 1.8; color: var(--noir); }
.article-detail__content p  { margin-bottom: 1.25rem; }
.article-detail__content h2 { font-size: var(--h3); margin: 2rem 0 .75rem; }
.article-detail__content ul, .article-detail__content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-detail__content ul  { list-style: disc; }
.article-detail__content ol  { list-style: decimal; }
.article-detail__content li  { margin-bottom: .375rem; }
.article-detail__pdf {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gris-20);
  border-radius: var(--radius);
  margin-top: 2rem;
  background: var(--gris-10);
}
.article-detail__tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ── VIVRE PAGE ── */
.vivre-section { padding: 2.5rem 0; border-bottom: 1px solid var(--gris-20); }
.vivre-section:last-child { border-bottom: 0; }
.service-card {
  border: 1px solid var(--gris-20);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: box-shadow var(--tr);
}
.service-card:hover { box-shadow: var(--shadow); }
.service-card__icon    { font-size: 1.5rem; margin-bottom: .625rem; }
.service-card__name    { font-family: var(--font-titre); font-size: .9375rem; font-weight: 600; color: var(--noir); margin-bottom: .3rem; }
.service-card__desc    { font-size: .875rem; color: var(--gris-80); line-height: 1.55; }
.service-card__details { margin-top: .75rem; font-size: var(--petit); color: var(--gris-60); display: flex; flex-direction: column; gap: .2rem; }

/* ── Boutons filtres bulletins ── */
.bul-periode-btn,
.bul-year-btn {
  padding: .35rem .875rem;
  font-family: var(--font-titre);
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid var(--gris-40);
  border-radius: 2px;
  background: var(--blanc);
  color: var(--gris-80);
  cursor: pointer;
  transition: all var(--tr);
}
.bul-periode-btn:hover,
.bul-year-btn:hover {
  background: var(--gris-10);
  color: var(--noir);
}
.bul-periode-btn.active,
.bul-year-btn.active {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}