/* ===== VARIABLES ===== */
:root {
  --blue-primary: #1e3a5f;
  --blue-secondary: #2563eb;
  --blue-light: #dbeafe;
  --blue-hover: #93c5fd;
  --white: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --red: #dc2626;
  --red-light: #fef2f2;
  --green: #059669;
  --green-light: #ecfdf5;
  --orange: #d97706;
  --orange-light: #fffbeb;
  --purple: #7c3aed;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --radius: 8px;
  --radius-lg: 12px;
  --max-width: 1366px;
  --header-height: 80px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a {
  color: var(--blue-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--blue-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--blue-primary);
  line-height: 1.3;
  font-weight: 700;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

main {
  flex: 1;
}

/* ===== ALERT BANNER ===== */
.alert-banner {
  background: var(--red);
  color: var(--white);
  padding: 14px 20px;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 1001;
}

.alert-banner--info {
  background: var(--blue-secondary);
}

.alert-banner--warning {
  background: var(--orange);
}

.alert-banner .alert-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.alert-banner .alert-text {
  display: inline;
}

.alert-banner .close-alert {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  cursor: pointer;
  opacity: 0.8;
  padding: 4px 8px;
  line-height: 1;
  transition: opacity 0.2s;
}

.alert-banner .close-alert:hover {
  opacity: 1;
}

/* ===== HEADER ===== */
.header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: background 0.3s, box-shadow 0.3s;
}

.header.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 2px 20px rgba(0,0,0,0.12);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--blue-primary);
  text-decoration: none;
}

.header-brand img {
  height: 48px;
  width: auto;
}

.header-brand-text h1 {
  color: var(--blue-primary);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.header-brand-text span {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-weight: 400;
}

/* ===== NAVIGATION ===== */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav a {
  color: var(--gray-600);
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s;
  white-space: nowrap;
  position: relative;
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 16px;
  right: 16px;
  height: 3px;
  background: var(--blue-secondary);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.nav a:hover {
  color: var(--blue-primary);
}

.nav a:hover::after {
  transform: scaleX(1);
}

.nav a.active {
  color: var(--blue-secondary);
}

.nav a.active::after {
  transform: scaleX(1);
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 1.5rem;
  color: var(--blue-primary);
  line-height: 1;
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blue-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
}

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

.mobile-menu-btn.open span:nth-child(2) {
  opacity: 0;
}

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

/* ===== HERO ===== */
.hero {
  position: relative;
  background: var(--blue-primary);
  color: var(--white);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,58,95,0.55) 0%, rgba(37,99,235,0.35) 100%);
}

.hero-content {
  position: relative;
  max-width: 750px;
  z-index: 1;
  padding: 40px 20px;
}

.hero h1 {
  color: var(--white);
  font-size: 3rem;
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  letter-spacing: -0.5px;
}

.hero p {
  font-size: 1.2rem;
  opacity: 0.95;
  margin-bottom: 36px;
  line-height: 1.8;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.25s ease;
  text-decoration: none;
  line-height: 1.4;
}

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

.btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.8);
}

.btn-secondary:hover {
  background: var(--white);
  color: var(--blue-primary);
  border-color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--blue-secondary);
  border-color: var(--blue-secondary);
}

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

.btn-danger {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: var(--white);
}

.btn-success {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.85rem;
}

/* ===== CONTAINER & SECTIONS ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 24px;
}

.section-alt {
  background: var(--gray-50);
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title h2 {
  font-size: 2rem;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--blue-secondary);
  border-radius: 2px;
}

.section-title p {
  color: var(--gray-500);
  max-width: 600px;
  margin: 20px auto 0;
  font-size: 1.05rem;
}

/* ===== QUICK ACCESS BAND ===== */
.quick-access {
  background: var(--blue-primary);
  padding: 50px 24px;
}

.quick-access .section-title h2 {
  color: var(--white);
}

.quick-access .section-title h2::after {
  background: var(--blue-hover);
}

.quick-access .section-title p {
  color: rgba(255,255,255,0.7);
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 16px;
  text-decoration: none;
  color: var(--white);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
  text-align: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}

.quick-link:hover {
  transform: scale(1.05);
  background: rgba(255,255,255,0.15);
  color: var(--white);
}

.quick-link-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  line-height: 1;
}

.quick-link-text {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* ===== CARDS ===== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.card-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: var(--gray-100);
}

.card-body {
  padding: 24px;
}

.card-category {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
  margin-bottom: 12px;
}

.card-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
  line-height: 1.4;
}

.card-title a {
  color: var(--blue-primary);
  transition: color 0.2s;
}

.card-title a:hover {
  color: var(--blue-secondary);
}

.card-date {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-excerpt {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.7;
}

.card-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--gray-100);
}

/* Quick links inside page content (white background variant) */
.page-content .quick-link {
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--blue-secondary);
  flex-direction: row;
  text-align: left;
  padding: 18px 20px;
}

.page-content .quick-link:hover {
  color: var(--blue-secondary);
  border-color: var(--blue-secondary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.page-content .quick-link-icon {
  font-size: 1.5rem;
}

/* ===== INFO BOXES ===== */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.info-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px;
  transition: box-shadow 0.3s;
}

.info-box:hover {
  box-shadow: var(--shadow-md);
}

.info-box h3 {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-box h3 .info-icon {
  font-size: 1.3rem;
}

.info-table {
  width: 100%;
}

.info-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}

.info-table td:first-child {
  font-weight: 600;
  color: var(--gray-700);
  width: 40%;
}

.info-table td:last-child {
  color: var(--gray-600);
}

/* ===== PAGE HEADER (Internal pages) ===== */
.page-header {
  background: linear-gradient(135deg, var(--blue-primary) 0%, #2d5a8e 50%, var(--blue-secondary) 100%);
  color: var(--white);
  padding: 0 24px;
  text-align: center;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Bandeau avec photo de fond (ex. page La Mairie), sur le modele du hero
   de la page d'accueil. Le motif .page-header::before reste dessous ; les
   titres gardent leur z-index:1 et passent donc au-dessus. */
.page-header-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
}

.page-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,58,95,0.55) 0%, rgba(37,99,235,0.35) 100%);
}

.page-header h1 {
  color: var(--white);
  font-size: 2.2rem;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.page-header p {
  opacity: 0.85;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}

/* ===== PAGE CONTENT ===== */
.page-content {
  /* Aligne sur la largeur du reste du site (en-tete, pied de page). */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 50px 24px;
}

.page-content h2 {
  margin-top: 36px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gray-200);
  font-size: 1.5rem;
}

.page-content h3 {
  margin-top: 28px;
  margin-bottom: 14px;
}

.page-content p {
  margin-bottom: 16px;
  line-height: 1.8;
}

.page-content ul, .page-content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.page-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.page-content a {
  text-decoration: underline;
}

/* Un bouton ou une tuile n'est pas un lien de texte : pas de soulignement. */
.page-content a.btn,
.page-content a.quick-link {
  text-decoration: none;
}

.page-content img {
  border-radius: var(--radius-lg);
  margin: 24px 0;
  box-shadow: var(--shadow-md);
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  transition: box-shadow 0.3s, transform 0.3s;
}

.page-content img:hover {
  box-shadow: var(--shadow-xl);
  transform: scale(1.01);
}

/* ===== ARTICLE DETAIL ===== */
.article-banner {
  background: linear-gradient(135deg, var(--blue-primary) 0%, #2d5a8e 100%);
  /* Meme hauteur que les bandeaux photo des autres pages. */
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.article-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-banner .article-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(30,58,95,0.5), rgba(30,58,95,0.8));
}

.article-header {
  text-align: center;
  margin-bottom: 32px;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  color: var(--gray-500);
  font-size: 0.9rem;
}

.article-image {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
}

/* ===== CONTACT ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.contact-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contact-info-icon {
  font-size: 1.3rem;
  color: var(--blue-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ===== FORMS ===== */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray-700);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--gray-700);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue-secondary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-check input[type="checkbox"] {
  width: auto;
}

/* ===== FLASH MESSAGES ===== */
.flash {
  padding: 14px 20px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-weight: 500;
}

.flash-success {
  background: var(--green-light);
  color: var(--green);
  border: 1px solid var(--green);
}

.flash-error {
  background: var(--red-light);
  color: var(--red);
  border: 1px solid var(--red);
}

.flash-info {
  background: var(--blue-light);
  color: var(--blue-secondary);
  border: 1px solid var(--blue-secondary);
}

/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  transition: all 0.2s;
}

.pagination a:hover {
  background: var(--blue-secondary);
  color: var(--white);
  border-color: var(--blue-secondary);
}

.pagination .active {
  background: var(--blue-secondary);
  color: var(--white);
  border-color: var(--blue-secondary);
}

/* ===== CATEGORY FILTER ===== */
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
}

.category-filter a {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid var(--gray-200);
  color: var(--gray-600);
  transition: all 0.2s;
}

.category-filter a:hover,
.category-filter a.active {
  border-color: var(--blue-secondary);
  color: var(--blue-secondary);
  background: var(--blue-light);
}

/* ===== MAP ===== */
.map-container {
  width: 100%;
  height: 350px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.map-container iframe,
.map-container #map {
  width: 100%;
  height: 100%;
  border: none;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--blue-primary);
  color: rgba(255,255,255,0.8);
  padding: 60px 24px 0;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-bottom: 40px;
}

.footer h3 {
  color: var(--white);
  font-size: 1.05rem;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 12px;
}

.footer h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--blue-secondary);
}

.footer p, .footer li {
  font-size: 0.9rem;
  line-height: 1.8;
}

.footer ul {
  list-style: none;
}

.footer ul li {
  margin-bottom: 8px;
}

/* Horaires : jour et heure sur la meme ligne, pour un pied de page plus compact.
   Specificite volontairement superieure a '.footer ul li' pour en annuler la marge. */
.footer .footer-horaires {
  list-style: none;
}

.footer .footer-horaires li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 2px;
  line-height: 1.7;
}

.footer .footer-horaires .jour {
  font-weight: 600;
  color: var(--white);
}

.footer .footer-horaires .heures {
  text-align: right;
  white-space: nowrap;
}

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

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

.footer-newsletter-form {
  display: flex;
  gap: 0;
  margin-top: 12px;
}

.footer-newsletter-form input[type="email"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  background: rgba(255,255,255,0.1);
  color: var(--white);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.2s;
}

.footer-newsletter-form input[type="email"]::placeholder {
  color: rgba(255,255,255,0.5);
}

.footer-newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--blue-secondary);
  background: rgba(255,255,255,0.15);
}

.footer-newsletter-form button {
  padding: 10px 20px;
  background: var(--blue-secondary);
  color: var(--white);
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}

.footer-newsletter-form button:hover {
  background: #1d4ed8;
}

.footer-bottom {
  background: rgba(0,0,0,0.2);
  margin: 0 -24px;
  padding: 18px 24px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

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

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

/* ===== ASSOCIATIONS ===== */
.association-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  border-left: 4px solid var(--blue-secondary);
}

.association-card h3 {
  margin-bottom: 8px;
}

.association-card p {
  color: var(--gray-600);
  font-size: 0.9rem;
}

/* ===== DOCUMENTS LIST ===== */
.document-list {
  list-style: none;
}

.document-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.2s;
}

.document-item:hover {
  background: var(--gray-50);
}

.document-icon {
  font-size: 1.3rem;
  color: var(--red);
}

.document-info {
  flex: 1;
}

.document-info strong {
  display: block;
  color: var(--gray-700);
}

.document-info span {
  font-size: 0.8rem;
  color: var(--gray-500);
}

/* ===== ADMIN ===== */
.admin-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: calc(100vh - var(--header-height));
}

.admin-sidebar {
  background: var(--gray-800);
  padding: 24px 0;
  color: var(--white);
}

.admin-sidebar-header {
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 16px;
}

.admin-sidebar-header h3 {
  color: var(--white);
  font-size: 1rem;
}

.admin-sidebar-header h3::after {
  display: none;
}

.admin-sidebar-header p {
  font-size: 0.8rem;
  color: var(--gray-400);
}

.admin-nav {
  list-style: none;
}

.admin-nav li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: var(--gray-300);
  font-size: 0.9rem;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.admin-nav li a:hover,
.admin-nav li a.active {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border-left-color: var(--blue-secondary);
}

.admin-content {
  padding: 30px;
  background: var(--gray-50);
  overflow-y: auto;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.admin-header h1 {
  font-size: 1.5rem;
}

/* Admin stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--white);
  padding: 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-align: center;
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue-primary);
}

.stat-card .stat-label {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-top: 4px;
}

/* Admin table */
.admin-table {
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin-table table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  background: var(--gray-50);
  padding: 12px 16px;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--gray-200);
}

.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.9rem;
}

.admin-table tr:hover {
  background: var(--gray-50);
}

.admin-table .actions {
  display: flex;
  gap: 8px;
}

/* Status badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-success {
  background: var(--green-light);
  color: var(--green);
}

.badge-warning {
  background: var(--orange-light);
  color: var(--orange);
}

.badge-danger {
  background: var(--red-light);
  color: var(--red);
}

/* ===== LOGIN PAGE ===== */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  background: var(--gray-50);
  padding: 20px;
}

.login-card {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
}

.login-card h1 {
  text-align: center;
  margin-bottom: 8px;
}

.login-card .subtitle {
  text-align: center;
  color: var(--gray-500);
  margin-bottom: 30px;
}

/* ===== MARKDOWN EDITOR ===== */
.editor-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.editor-pane {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.editor-pane-header {
  background: var(--gray-50);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
}

.editor-pane textarea {
  width: 100%;
  min-height: 500px;
  padding: 16px;
  border: none;
  resize: vertical;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
}

.editor-pane textarea:focus {
  outline: none;
}

.editor-preview {
  padding: 16px;
  min-height: 500px;
  overflow-y: auto;
}

/* ===== EASYMDE OVERRIDES ===== */
.easymde-wrapper {
  margin-bottom: 20px;
}

.easymde-wrapper .EasyMDEContainer {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.easymde-wrapper .EasyMDEContainer .CodeMirror {
  border: none;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.95rem;
  line-height: 1.7;
  padding: 8px;
}

.easymde-wrapper .editor-toolbar {
  border: none;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  padding: 6px;
  opacity: 1;
}

.easymde-wrapper .editor-toolbar button {
  color: var(--gray-600) !important;
  border-radius: 4px;
}

.easymde-wrapper .editor-toolbar button:hover,
.easymde-wrapper .editor-toolbar button.active {
  background: var(--blue-light);
  color: var(--blue-secondary) !important;
}

.easymde-wrapper .editor-statusbar {
  border: none;
  padding: 6px 12px;
  font-size: 0.8rem;
  color: var(--gray-400);
}

.easymde-wrapper .editor-preview-side,
.easymde-wrapper .EasyMDEContainer .editor-preview {
  background: var(--white);
  border-left: 1px solid var(--gray-200);
}

.easymde-wrapper .EasyMDEContainer .CodeMirror-fullscreen,
.easymde-wrapper .editor-toolbar.fullscreen {
  z-index: 1000;
}

/* ===== GRAPESJS EDITOR ===== */
.grapes-wrapper {
  margin-bottom: 20px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: visible;
  position: relative;
}

.grapes-wrapper #gjs {
  border: none;
  min-height: 600px;
}

.grapes-wrapper .gjs-one-bg {
  background-color: var(--gray-800);
}

.grapes-wrapper .gjs-two-color {
  color: var(--gray-200);
}

.grapes-wrapper .gjs-three-bg {
  background-color: var(--blue-secondary);
}

.grapes-wrapper .gjs-four-color,
.grapes-wrapper .gjs-four-color-h:hover {
  color: var(--blue-secondary);
}

.editor-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.editor-toggle .btn {
  transition: all 0.2s;
}

/* ===== RESPONSIVE ===== */
/* ===== Photos des pages de contenu ===== */

/* Portrait du maire : le texte s'enroule autour sur grand ecran. */
.page-content .portrait-maire {
  float: right;
  width: 220px;
  margin: 4px 0 20px 28px;
  text-align: center;
}

.page-content .portrait-maire img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Photo de groupe du conseil municipal : pleine largeur. */
.page-content .photo-conseil {
  margin: 24px 0 32px;
}

.page-content .photo-conseil img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* La regle generale '.page-content img' impose max-height:400px et
   object-fit:cover, ce qui rognerait ces photos. On les affiche entieres. */
.page-content .portrait-maire img,
.page-content .photo-conseil img {
  max-height: none;
  object-fit: initial;
}


.page-content figure figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gray-500);
  text-align: center;
}

/* Les titres passent sous le portrait flottant au lieu de s'enrouler autour. */
.page-content h2 {
  clear: both;
}

/* Sur mobile la colonne est trop etroite pour l'habillage : photo centree. */
@media (max-width: 768px) {
  .page-content .portrait-maire {
    float: none;
    width: 200px;
    margin: 0 auto 24px;
  }
}

/* ===== Organigramme du conseil municipal ===== */
.page-content .organigramme {
  margin: 28px 0 8px;
}

.page-content .orga-niveau {
  position: relative;
  padding-top: 30px;
}

.page-content .orga-niveau:first-child {
  padding-top: 0;
}

/* Trait vertical reliant chaque niveau au precedent. */
.page-content .orga-niveau:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 30px;
  background: var(--gray-200);
}

.page-content .orga-titre {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  margin-bottom: 16px;
}

.page-content .orga-rang {
  display: grid;
  gap: 16px;
}

.page-content .orga-rang-maire {
  justify-content: center;
}

.page-content .orga-rang-maire .elu {
  max-width: 460px;
}

.page-content .orga-rang-adjoints {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.page-content .orga-rang-conseillers {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.page-content .elu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--blue-secondary);
  border-radius: var(--radius);
  /* Meme ombre que les cartes de services, pour unifier les deux pages. */
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s, transform 0.3s;
}

.page-content .elu:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Le maire, en tete d'organigramme : carte plus marquee. */
.page-content .elu-maire {
  border-left-width: 5px;
  border-top: 1px solid var(--blue-secondary);
  background: var(--gray-50);
  text-align: center;
  align-items: center;
}

.page-content .elu-adjoint {
  background: var(--gray-50);
}

.page-content .elu-nom {
  font-weight: 600;
  color: var(--blue-primary);
  font-size: 1.02rem;
  order: 2;
}

.page-content .elu-role {
  order: 1;
}

.page-content .elu-detail {
  order: 3;
}

.page-content .elu-role {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue-secondary);
}

.page-content .elu-detail {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gray-500);
}

/* ===== Apparition au defilement (page d'accueil) =====
   L'etat masque depend de la classe .js posee par un script en <head> :
   sans JavaScript, tout le contenu reste visible.
   On utilise une animation plutot qu'une transition, car ces elements ont
   deja leurs propres transitions de survol qu'il ne faut pas ecraser. Le
   script retire les classes en fin d'animation pour la meme raison. */
.js .reveal {
  opacity: 0;
}

.js .reveal.is-visible {
  animation: reveal-up 0.6s ease-out both;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Accessibilite : pas d'animation si l'utilisateur a demande a les reduire. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
  }
  .js .reveal.is-visible {
    animation: none;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--blue-primary);
    flex-direction: column;
    padding: 100px 40px 40px;
    gap: 0;
    z-index: 998;
    align-items: center;
    justify-content: center;
  }

  .nav.open {
    display: flex;
  }

  .nav a {
    color: rgba(255,255,255,0.9);
    padding: 14px 20px;
    width: 100%;
    text-align: center;
    font-size: 1.05rem;
    border-radius: var(--radius);
  }

  .nav a::after {
    display: none;
  }

  .nav a:hover,
  .nav a.active {
    color: var(--white);
    background: rgba(255,255,255,0.1);
  }

  .mobile-menu-btn {
    z-index: 999;
  }

  .mobile-menu-btn.open span {
    background: var(--white);
  }

  .hero {
    min-height: 50vh;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }

  .section {
    padding: 50px 16px;
  }

  .section-title h2 {
    font-size: 1.6rem;
  }

  .quick-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .quick-access {
    padding: 40px 16px;
  }

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

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

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

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .page-header {
    height: 150px;
  }

  .page-header h1 {
    font-size: 1.6rem;
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    display: none;
  }

  .admin-sidebar.open {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: 250px;
    z-index: 999;
  }

  .editor-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.6rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

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

  .header-brand-text h1 {
    font-size: 1.1rem;
  }

  .header-brand-text span {
    display: none;
  }

  .quick-links {
    grid-template-columns: 1fr;
  }
}

/* ===== PRINT ===== */
@media print {
  .header, .footer, .nav, .mobile-menu-btn, .alert-banner {
    display: none;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
  .page-content {
    padding: 0;
  }
}

/* Bandeau portant une photo : la hauteur standard (200px, 150px en mobile)
   reduirait l'image a une bande trop fine pour que le sujet soit lisible.
   Regle placee en fin de fichier pour passer apres les media queries. */
.page-header-photo {
  height: 420px;
}

@media (max-width: 768px) {
  .page-header-photo {
    height: 240px;
  }
}

/* ===== Comptes-rendus des conseils municipaux ===== */

/* Accordeon public : construit sur <details>/<summary>, donc utilisable
   au clavier et fonctionnel meme sans JavaScript. */
.page-content .cr-accordeon {
  margin: 20px 0 8px;
}

.page-content .cr-annee-bloc {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--white);
}

.page-content .cr-annee-bloc > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  background: var(--gray-50);
  transition: background 0.2s;
}

.page-content .cr-annee-bloc > summary::-webkit-details-marker {
  display: none;
}

.page-content .cr-annee-bloc > summary:hover {
  background: var(--gray-100, #f1f5f9);
}

/* Chevron pivotant, dessine en CSS pour eviter une image supplementaire. */
.page-content .cr-annee-bloc > summary::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--blue-secondary);
  border-bottom: 2px solid var(--blue-secondary);
  transform: rotate(-45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
  align-self: center;
}

.page-content .cr-annee-bloc[open] > summary::before {
  transform: rotate(45deg);
}

.page-content .cr-annee-libelle {
  flex: 1;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--blue-primary);
}

.page-content .cr-annee-compte {
  font-size: 0.85rem;
  color: var(--gray-500);
}

.page-content .cr-liste {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.page-content .cr-liste li + li {
  border-top: 1px solid var(--gray-200);
}

.page-content .cr-liste > li {
  padding: 0;
}

/* Second niveau : la seance. Meme principe que l'annee, en plus discret. */
.page-content .cr-seance-bloc > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  transition: background 0.2s;
}

.page-content .cr-seance-bloc > summary::-webkit-details-marker {
  display: none;
}

.page-content .cr-seance-bloc > summary:hover {
  background: var(--gray-50);
}

.page-content .cr-seance-bloc > summary::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: 2px;
  border-right: 2px solid var(--blue-secondary);
  border-bottom: 2px solid var(--blue-secondary);
  transform: rotate(-45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
  align-self: center;
}

.page-content .cr-seance-bloc[open] > summary::before {
  transform: rotate(45deg);
}

.page-content .cr-seance-bloc[open] > summary {
  background: var(--gray-50);
}

.page-content .cr-fichiers {
  list-style: none;
  margin: 0;
  /* Decale sous le titre de la seance, aligne sur son texte. */
  padding: 4px 18px 12px 40px;
}

.page-content .cr-fichiers a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s;
}

.page-content .cr-fichiers a:hover {
  background: var(--gray-50);
}

.page-content .cr-fichier-nom {
  color: var(--blue-secondary);
  font-size: 0.92rem;
}

.page-content .cr-mois {
  /* flex:1 pour que le titre occupe l'espace libre et reste cale a gauche,
     le space-between du summary le centrerait sinon. */
  flex: 1;
  color: var(--blue-primary);
  font-weight: 600;
}

.page-content .cr-meta {
  font-size: 0.82rem;
  color: var(--gray-500);
  white-space: nowrap;
}

/* Ecran d'administration */
.cr-admin-form {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 28px;
}

.cr-admin-form h2 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.cr-aide {
  font-size: 0.88rem;
  color: var(--gray-500);
  margin-bottom: 18px;
}

.cr-annee {
  font-size: 1.15rem;
  margin: 24px 0 10px;
}

.cr-annee span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gray-500);
}

@media (max-width: 480px) {
  .page-content .cr-liste a {
    flex-direction: column;
    gap: 3px;
  }
}

/* Champ titre facultatif et rappel de seance, ecran des comptes-rendus. */
.cr-facultatif {
  font-weight: 400;
  color: var(--gray-500);
  font-size: 0.85em;
}

.cr-seance {
  font-size: 0.82rem;
  color: var(--gray-500);
}

/* Fichiers rattaches a une fiche, dans le tableau d'administration. */
.cr-fichiers-admin {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cr-fichiers-admin li + li {
  margin-top: 4px;
}

/* ===== Cartes des services municipaux ===== */
.page-content .services-grid {
  display: grid;
  /* Deux colonnes au maximum : au-dela, sur un contenu large de 1366px, les
     cartes deviendraient trop etroites et une carte "moitie" ne ferait
     plus qu'un quart de la largeur. */
  grid-template-columns: 1fr;
  /* Chaque carte s'arrete a son contenu : sans cela les cartes courtes
     s'etirent a la hauteur de la plus longue et laissent de grands vides. */
  align-items: start;
  gap: 20px;
  margin: 24px 0 8px;
}

@media (min-width: 700px) {
  .page-content .services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.page-content .service {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s, transform 0.3s;
}

.page-content .service:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Carte occupant toute la largeur de la grille, sans photo. */
.page-content .service-pleine {
  grid-column: 1 / -1;
}

/* La carte de l'ecole occupe toute la largeur : photo a gauche, texte a droite. */
.page-content .service-vedette {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}

.page-content .service-vedette > img {
  width: 42%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  margin: 0;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
}

.page-content .service-corps {
  padding: 22px 24px;
  flex: 1;
}

.page-content .service-icone {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 10px;
}

.page-content .service-corps h3 {
  margin: 0 0 2px;
  font-size: 1.15rem;
  color: var(--blue-primary);
}

.page-content .service-accroche {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: var(--gray-500);
}

/* Coordonnees et horaires : libelle a gauche, valeur a droite. */
.page-content .service-infos {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  border-top: 1px solid var(--gray-200);
}

.page-content .service-infos li {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.92rem;
  line-height: 1.5;
}

.page-content .service-cle {
  flex: 0 0 38%;
  font-weight: 600;
  color: var(--gray-600);
}

/* La valeur en regard de l'intitulé. Sans min-width: 0, un élément flex refuse
   de devenir plus étroit que son contenu : une adresse mail longue et
   insécable (rochyconde.as.549869@lfhf.fr) élargissait la ligne au-delà de la
   carte, et sa fin se retrouvait coupée. overflow-wrap l'autorise à passer à
   la ligne au milieu du mot, faute de quoi min-width seul ne suffirait pas. */
.page-content .service-infos li > span:not(.service-cle) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.page-content .service-note {
  margin: 0;
  padding: 10px 12px;
  background: var(--gray-50);
  border-left: 3px solid var(--blue-secondary);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--gray-600);
}

.page-content .service-lien {
  display: inline-block;
  margin-top: 4px;
  font-weight: 600;
}

/* Sur ecran etroit, la carte vedette repasse en colonne. */
@media (max-width: 768px) {
  .page-content .service-vedette {
    flex-direction: column;
  }
  .page-content .service-vedette > img {
    width: 100%;
    min-height: 0;
    max-height: 220px;
  }
  .page-content .service-cle {
    flex-basis: 42%;
  }
}

/* Carte vedette avec une photo au format portrait : colonne image plus
   etroite que pour un paysage, et cadrage sur le haut pour garder le visage. */
.page-content .service-portrait > img {
  width: 30%;
  object-position: top;
}

@media (max-width: 768px) {
  .page-content .service-portrait > img {
    width: 100%;
    max-height: 280px;
  }
}

/* Avec un contenu large (1366px), le texte courant depasserait 160 caracteres
   par ligne, bien au-dela du confort de lecture. On le borne, tandis que les
   grilles de cartes et les images continuent d'occuper toute la largeur. */
.page-content > p,
.page-content > ul,
.page-content > ol,
.page-content > blockquote {
  max-width: 78ch;
}

/* Carte d'appel a l'action : plus marquee que les cartes d'information. */
.page-content .service-appel {
  background: var(--gray-50);
  border-left: 4px solid var(--blue-secondary);
}

.page-content .service-appel .btn {
  margin-top: 6px;
}



/* Un bouton reste non souligne, y compris hors de .page-content. */
.section a.btn {
  text-decoration: none;
}

/* L'en-tete est en position sticky : sans cette marge, une navigation par
   ancre placerait le titre visé juste dessous, donc masqué. */
.page-content h2[id],
.page-content h3[id] {
  scroll-margin-top: 100px;
}

/* Mention de permanence, sous les horaires d'ouverture. */
.horaires-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-200);
  font-size: 0.88rem;
  color: var(--blue-secondary);
  font-weight: 600;
}

.footer-horaires-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.85rem;
  color: var(--white);
  font-weight: 600;
}

/* Tuiles des démarches en ligne : 3 colonnes, puis 2 et 1 selon la place. */
.page-content .demarches-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 20px 0;
}

@media (min-width: 560px) {
  .page-content .demarches-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .page-content .demarches-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Liens site et réseaux sociaux des associations ===== */
.page-content .reseaux {
  display: flex;
  gap: 10px;
  /* Pas de bordure ici : la dernière ligne de la liste porte déjà la sienne,
     les deux se superposaient en un double trait. */
  margin-top: 16px;
}

.page-content .reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.page-content .reseau svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.page-content .reseau:hover {
  transform: translateY(-2px);
  color: var(--white);
}

/* Couleurs propres a chaque service au survol. */
.page-content .reseau-site:hover {
  background: var(--blue-secondary);
}

.page-content .reseau-facebook:hover {
  background: #1877f2;
}

.page-content .reseau-instagram:hover {
  background: #d62976;
}

/* Grille a 3 colonnes (associations). Les cartes .service-pleine y occupent
   toujours toute la largeur grace a leur grid-column: 1 / -1. */
@media (min-width: 900px) {
  .page-content .services-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Annuaire des associations : toutes les cartes d'une même rangée ont la
   hauteur de la plus haute, et les icônes de réseaux sociaux sont calées en
   bas. L'œil trouve ainsi la même chose au même endroit sur chaque carte,
   quel que soit le nombre de renseignements fournis. La grille des services
   (deux colonnes) garde, elle, des cartes à leur hauteur naturelle : ses
   encarts longs y creuseraient de grands vides. */
.page-content .services-grid-3 {
  align-items: stretch;
}

.page-content .services-grid-3 .service-corps {
  display: flex;
  flex-direction: column;
}

.page-content .services-grid-3 .reseaux {
  margin-top: auto;
  padding-top: 16px;
}

/* Icone placee a cote du titre plutot qu'au-dessus. */
.page-content .service-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.page-content .service-entete .service-icone {
  margin-bottom: 0;
  font-size: 1.4rem;
}

.page-content .service-entete h3 {
  margin: 0;
}


/* Lecteurs vidéo intégrés (YouTube, Vimeo) : même traitement visuel que les
   images du contenu, au lieu du cadre carré par défaut du navigateur. */
.page-content iframe {
  max-width: 100%;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  /* Safari ne découpe pas toujours le contenu d'une iframe sur les angles
     arrondis : forcer une couche de composition l'y oblige. */
  transform: translateZ(0);
}

/* La carte, elle, gère déjà son propre cadre. */
.page-content .map-container iframe {
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

/* Article sans image : emblème de la commune sur le dégradé du site, centré et
   affiché en entier — un recadrage en bandeau mutilerait le cercle. */
.card-image-defaut {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Degrade clair : l'embleme comporte des bleus fonces qui se confondaient
     avec le fond soutenu d'origine. */
  background: linear-gradient(135deg, var(--blue-light), var(--blue-hover));
}

.card-image-defaut img {
  width: auto;
  height: 62%;
  max-width: 55%;
  object-fit: contain;
}

/* Article sans image : emblème centré et entier, à la place de la photo.
   La règle générale .article-banner img le placerait en absolu et le
   recadrerait en cover, ce qui tronquerait le cercle. */
.article-banner-defaut img.article-banner-logo {
  position: static;
  width: auto;
  height: 45%;
  max-width: 40%;
  object-fit: contain;
  opacity: 0.95;
}

/* Sur mobile, même hauteur que les autres bandeaux photo. */
@media (max-width: 768px) {
  .article-banner {
    height: 240px;
  }
}

/* ===== Palette d'icônes des associations (administration) ===== */
.palette-emoji {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}

.palette-titre {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}

.palette-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Le bouton radio reste accessible au clavier mais n'est pas dessiné :
   c'est l'emoji qui sert de repère visuel. */
.palette-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.palette-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.palette-item span:hover {
  border-color: var(--blue-hover);
  transform: translateY(-2px);
}

.palette-item input:checked + span {
  border-color: var(--blue-secondary);
  background: var(--blue-light);
}

/* Repère visible quand on navigue au clavier. */
.palette-item input:focus-visible + span {
  outline: 2px solid var(--blue-secondary);
  outline-offset: 2px;
}

/* Palette repliée : compacte au repos, grille complète à l'ouverture. */
.palette-repli > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  transition: border-color 0.2s;
}

.palette-repli > summary::-webkit-details-marker {
  display: none;
}

.palette-repli > summary:hover {
  border-color: var(--blue-hover);
}

.palette-apercu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--gray-50);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.palette-action {
  flex: 1;
  font-size: 0.9rem;
  color: var(--blue-secondary);
  font-weight: 600;
}

/* Chevron, comme sur l'accordéon des comptes-rendus. */
.palette-repli > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue-secondary);
  border-bottom: 2px solid var(--blue-secondary);
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-right: 4px;
}

.palette-repli[open] > summary::after {
  transform: rotate(-135deg);
}

.palette-repli .palette-emoji {
  margin-top: 10px;
}

/* ==========================================================================
   Champ piège anti-robots (formulaire de contact)
   Retiré du flux et de l'accessibilité sans display:none : certains robots
   ignorent volontairement les champs masqués de cette façon, alors qu'ils
   remplissent ceux qui sont simplement déplacés hors de l'écran.
   ========================================================================== */
.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Commerces & entreprises
   ========================================================================== */

/* Filtres par catégorie : des liens, pas des boutons — l'URL reste partageable. */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.filtre {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.filtre:hover {
  border-color: var(--blue-secondary);
  color: var(--blue-primary);
}

.filtre-actif,
.filtre-actif:hover {
  background: var(--blue-primary);
  border-color: var(--blue-primary);
  color: var(--white);
}

.commerce-carte-lien {
  display: block;
}

.commerce-categorie {
  background: var(--blue-secondary);
}

.commerce-carte-infos {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 0.88rem;
  color: var(--gray-600);
}

.commerce-carte-infos li {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.commerces-vide,
.commerces-note {
  color: var(--gray-500);
  font-size: 0.95rem;
}

.commerces-note {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
}

/* Fiche : contenu à gauche, informations pratiques à droite. */
.commerce-fiche {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 8px;
}

@media (min-width: 900px) {
  .commerce-fiche {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
  }
}

.commerce-description p {
  max-width: 70ch;
}

/* Le titre de l'encart porte déjà un trait : la liste n'en ajoute pas un
   second juste dessous. */
.page-content .commerce-infos {
  margin-top: 0 !important;
  border-top: 0;
}

.commerce-sous-titre {
  margin: 18px 0 6px;
  font-size: 0.95rem;
  color: var(--gray-700);
}

/* Horaires saisis en texte libre : les retours à la ligne sont respectés. */
.commerce-horaires {
  white-space: pre-line;
  margin: 0;
  padding-bottom: 14px;
  /* Même trait que sous chaque ligne de la liste : les icônes qui suivent
     sont séparées des horaires, comme sur les cartes des associations. */
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--gray-700);
}

.commerce-plan-lien {
  font-size: 0.9rem;
}

.carte-commerce {
  height: 240px;
  border-radius: var(--radius);
  overflow: hidden;
  /* Sans hauteur explicite, Leaflet ne dessine rien. */
}

/* Galerie de photos */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.galerie-item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

/* Le sélecteur porte .page-content pour l'emporter sur la règle générale
   des images d'article (marge de 24 px, ombre, hauteur plafonnée), qui
   laissait un bandeau gris au-dessus de chaque vignette. */
.page-content .galerie-item img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  transition: transform 0.3s;
}

.page-content .galerie-item:hover img,
.page-content .galerie-item:focus-visible img {
  transform: scale(1.04);
  box-shadow: none;
}

/* Visionneuse : <dialog> natif, plein écran, fond sombre. */
.visionneuse {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.94);
  color: var(--white);
}

.visionneuse::backdrop {
  background: rgba(15, 23, 42, 0.94);
}

.visionneuse-image {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: calc(100vw - 96px);
  max-height: calc(100vh - 96px);
  object-fit: contain;
  border-radius: var(--radius);
}

.visionneuse-fermer,
.visionneuse-nav {
  position: absolute;
  z-index: 1;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  cursor: pointer;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 1.8rem;
  line-height: 1;
  transition: background 0.2s;
}

.visionneuse-fermer:hover,
.visionneuse-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.visionneuse-fermer {
  top: 16px;
  right: 16px;
}

.visionneuse-nav {
  top: 50%;
  transform: translateY(-50%);
}

.visionneuse-prec { left: 16px; }
.visionneuse-suiv { right: 16px; }

.visionneuse-compteur {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 600px) {
  .visionneuse-image {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 120px);
  }
  .visionneuse-nav {
    top: auto;
    bottom: 48px;
    transform: none;
  }
}

/* Administration */
.admin-vignette {
  display: block;
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--gray-100);
}

.admin-vignette-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.admin-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.admin-photo {
  margin: 0;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.admin-photo-principale {
  border-color: var(--blue-primary);
}

.admin-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.admin-photo figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  font-size: 0.8rem;
}

/* Un bouton par ligne : deux côte à côte débordaient de la carte. */
.admin-photo figcaption form,
.admin-photo figcaption .btn {
  width: 100%;
}

.admin-photo figcaption .btn {
  text-align: center;
}

.admin-photo-etiquette {
  display: block;
  padding: 6px 0;
  text-align: center;
  color: var(--blue-primary);
  font-weight: 600;
}


.cr-actions {
  white-space: nowrap;
}

.cr-actions > * + * {
  margin-left: 4px;
}

/* Icône itinéraire (Google Maps), parmi les réseaux sociaux — même bleu que
   l'icône « site internet », pas la couleur de Google. */
.page-content .reseau-plan:hover {
  background: var(--blue-secondary);
}

/* Groupe de champs (boutons radio) présenté comme un champ ordinaire : le
   fieldset perd sa bordure et sa marge par défaut, la légende prend le style
   d'un libellé. */
.form-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  min-width: 0;
}

.form-fieldset legend {
  display: block;
  padding: 0;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray-700);
}