/* * vie-municipale.css * Styles spécifiques à la page Vie municipale. * Charge après style.php dans le . * * Philosophie : sobre, institutionnel, lisible. * Aucun effet décoratif superflu. La hiérarchie visuelle * repose sur la typographie, l'espacement et la couleur. */ /* ================================================================ FIL D'ARIANE ================================================================ */ .fil-ariane { margin-bottom: var(--espace-4); } .fil-ariane ol { display: flex; align-items: center; gap: var(--espace-2); list-style: none; flex-wrap: wrap; } .fil-ariane li { display: flex; align-items: center; gap: var(--espace-2); font-size: var(--taille-sm); color: rgba(255,255,255,0.6); } .fil-ariane li + li::before { content: '/'; color: rgba(255,255,255,0.35); } .fil-ariane a { color: rgba(255,255,255,0.72); text-decoration: none; } .fil-ariane a:hover { color: var(--blanc); } .fil-ariane [aria-current="page"] { color: rgba(255,255,255,0.88); } /* ================================================================ BANDEAU EN-TÊTE DE PAGE INTERNE ================================================================ */ .page-bandeau { background-color: var(--bleu-fonce); color: var(--blanc); padding-block: var(--espace-10); } .page-bandeau h1 { color: var(--blanc); font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin-bottom: var(--espace-3); } .page-chapeau { color: rgba(255,255,255,0.78); font-size: var(--taille-lg); max-width: 60ch; } .page-chapeau strong { color: var(--blanc); } /* ================================================================ STRUCTURE DES SECTIONS ================================================================ */ .vm-section { padding-block: var(--espace-12); } .vm-section--maire { background-color: var(--blanc); } .vm-section--adjoints { background-color: var(--gris-fond); } .vm-section--conseillers{ background-color: var(--blanc); } .vm-section--seances { background-color: var(--gris-clair); } /* Séparateur visuel entre sections */ .vm-section + .vm-section { border-top: 1px solid var(--gris-bordure); } /* ── Titre de section ───────────────────────────────────────── */ .vm-titre-section { display: flex; align-items: center; gap: var(--espace-3); margin-bottom: var(--espace-8); padding-bottom: var(--espace-4); border-bottom: 2px solid var(--gris-bordure); } .vm-titre-label { font-size: var(--taille-xl); font-weight: 700; color: var(--bleu-fonce); line-height: 1.2; } /* Pastille compteur */ .vm-titre-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding-inline: var(--espace-2); background-color: var(--bleu-fonce); color: var(--blanc); font-size: var(--taille-xs); font-weight: 700; border-radius: 999px; letter-spacing: 0.03em; } /* ================================================================ INITIALES (fallback sans photo) Trois tailles : xl (maire), md (adjoints), sm (conseillers) ================================================================ */ .elu-initiales { display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--bleu-fonce); color: var(--blanc); font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; user-select: none; } .elu-initiales--xl { width: 120px; height: 120px; font-size: var(--taille-2xl); } .elu-initiales--md { width: 72px; height: 72px; font-size: var(--taille-lg); } .elu-initiales--sm { width: 44px; height: 44px; font-size: var(--taille-sm); } /* Photo réelle (même ratio que les initiales) */ .elu-photo { border-radius: 50%; object-fit: cover; object-position: top center; flex-shrink: 0; } /* ================================================================ ÉTIQUETTE DE FONCTION (commun à tous les élus) ================================================================ */ .elu-etiquette { font-size: var(--taille-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--bleu-moyen); margin-bottom: var(--espace-1); } /* ================================================================ CARTE MAIRE ================================================================ */ .maire-carte { display: flex; align-items: flex-start; gap: var(--espace-10); max-width: 760px; } .maire-portrait { flex-shrink: 0; } .maire-identite { flex: 1; padding-top: var(--espace-2); } .maire-nom { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; color: var(--texte); margin-bottom: var(--espace-3); line-height: 1.15; } .maire-delegation { font-size: var(--taille-base); color: var(--gris-texte); line-height: 1.6; margin-bottom: var(--espace-6); padding-bottom: var(--espace-6); border-bottom: 1px solid var(--gris-bordure); } .maire-role { font-size: var(--taille-sm); color: var(--gris-texte); line-height: 1.7; max-width: 58ch; } /* ================================================================ GRILLE DES ADJOINTS ================================================================ */ .adjoints-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--espace-4); list-style: none; } .adjoint-carte { display: flex; align-items: flex-start; gap: var(--espace-5); background-color: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: var(--rayon-md); padding: var(--espace-6); transition: box-shadow 180ms ease, border-color 180ms ease; } .adjoint-carte:hover { box-shadow: var(--ombre-md); border-color: var(--bleu-moyen); } .adjoint-portrait { flex-shrink: 0; } .adjoint-identite { flex: 1; min-width: 0; } .adjoint-nom { font-size: var(--taille-base); font-weight: 700; color: var(--texte); margin-bottom: var(--espace-2); line-height: 1.2; } .adjoint-delegation { font-size: var(--taille-sm); color: var(--gris-texte); line-height: 1.55; } /* ================================================================ GRILLE DES CONSEILLERS — liste sobre en lignes ================================================================ */ .conseillers-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--espace-3); list-style: none; } .conseiller-carte { display: flex; align-items: center; gap: var(--espace-4); background-color: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: var(--rayon-md); padding: var(--espace-4) var(--espace-5); transition: box-shadow 180ms ease; } .conseiller-carte:hover { box-shadow: var(--ombre-sm); } .conseiller-identite { flex: 1; min-width: 0; } .conseiller-nom { font-size: var(--taille-sm); font-weight: 600; color: var(--texte); margin-bottom: var(--espace-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conseiller-delegation { font-size: var(--taille-xs); color: var(--gris-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ================================================================ BLOC SÉANCES ================================================================ */ .seances-bloc { max-width: 640px; } .seances-bloc p { font-size: var(--taille-base); color: var(--texte); line-height: 1.7; margin-bottom: var(--espace-6); } .seances-actions { display: flex; gap: var(--espace-3); flex-wrap: wrap; } /* ================================================================ RESPONSIVE ================================================================ */ /* Tablette (≤ 900px) */ @media (max-width: 900px) { .maire-carte { gap: var(--espace-6); } .adjoints-grille { grid-template-columns: repeat(2, 1fr); } .conseillers-grille { grid-template-columns: repeat(2, 1fr); } } /* Mobile (≤ 640px) */ @media (max-width: 640px) { .vm-section { padding-block: var(--espace-8); } /* Maire : empilé verticalement */ .maire-carte { flex-direction: column; align-items: flex-start; gap: var(--espace-5); } .maire-nom { font-size: var(--taille-xl); } /* Adjoints et conseillers : 1 colonne */ .adjoints-grille, .conseillers-grille { grid-template-columns: 1fr; } /* Conseiller : initiale réduite */ .elu-initiales--sm { width: 36px; height: 36px; font-size: var(--taille-xs); } .seances-actions { flex-direction: column; } .seances-actions .btn { width: 100%; justify-content: center; } }