/* ============================================================ CSS PAGES VILLES LCSM — À ajouter dans : Extensions > Templates > Options > Custom CSS OU dans le de l'article via un module Custom HTML ============================================================ */ /* --- ARTICLE CONTAINER --- */ .page-ville { font-family: 'Segoe UI', Arial, sans-serif; color: #2c3e50; line-height: 1.8; max-width: 900px; margin: 0 auto; } /* --- TITRES --- */ .page-ville h1 { font-size: 2em; color: #1B4F72; line-height: 1.3; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 3px solid #2E86C1; } .page-ville h2 { font-size: 1.45em; color: #1B4F72; margin: 40px 0 15px; padding-bottom: 8px; border-bottom: 2px solid #d6eaf8; } .page-ville h3 { font-size: 1.15em; color: #2c3e50; margin: 25px 0 10px; } /* --- PARAGRAPHES --- */ .page-ville p { margin-bottom: 16px; text-align: justify; } /* --- LIENS INTERNES --- */ .page-ville a { color: #2E86C1; text-decoration: none; border-bottom: 1px dotted #2E86C1; font-weight: 500; transition: color 0.2s, border-bottom 0.2s; } .page-ville a:hover { color: #1B4F72; border-bottom: 1px solid #1B4F72; } /* --- STRONG / BOLD --- */ .page-ville strong { color: #1B4F72; } /* --- BLOC CTA FINAL --- */ .page-ville .cta-devis { background: linear-gradient(135deg, #1B4F72, #2E86C1); color: #fff; padding: 30px; border-radius: 8px; text-align: center; margin: 35px 0; } .page-ville .cta-devis h2 { color: #fff; border-bottom: none; margin-top: 0; } .page-ville .cta-devis p { color: #d6eaf8; text-align: center; } .page-ville .cta-devis strong { color: #fff; font-size: 1.3em; } .page-ville .cta-devis a { display: inline-block; background: #e67e22; color: #fff; padding: 14px 30px; border-radius: 5px; font-weight: 700; font-size: 1.1em; border-bottom: none; margin: 10px 0; transition: background 0.2s; } .page-ville .cta-devis a:hover { background: #d35400; border-bottom: none; } /* --- BLOC INFO / ASTUCE --- */ .page-ville .info-box { background: #d6eaf8; border-left: 4px solid #2E86C1; padding: 15px 20px; border-radius: 0 5px 5px 0; margin: 20px 0; } .page-ville .info-box.vert { background: #d5f5e3; border-left-color: #27ae60; } /* --- GRILLE QUARTIERS --- */ .page-ville .quartiers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 15px; margin: 20px 0; } .page-ville .quartier-card { background: #f8f9fa; border: 1px solid #e5e8eb; padding: 18px; border-radius: 6px; } .page-ville .quartier-card strong { display: block; color: #1B4F72; margin-bottom: 6px; font-size: 1.05em; } .page-ville .quartier-card p { font-size: 0.92em; margin-bottom: 0; text-align: left; } /* --- GRILLE PRESTATIONS --- */ .page-ville .prestations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin: 20px 0; } .page-ville .prestation-card { border: 1px solid #e5e8eb; padding: 22px; border-radius: 8px; background: #fff; transition: box-shadow 0.2s; } .page-ville .prestation-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .page-ville .prestation-card h3 { color: #1B4F72; margin: 0 0 10px; font-size: 1.08em; } .page-ville .prestation-card p { font-size: 0.93em; text-align: left; } /* --- FAQ --- */ .page-ville .faq-item { border-bottom: 1px solid #eee; padding: 18px 0; } .page-ville .faq-item:last-child { border-bottom: none; } .page-ville .faq-item h3 { margin: 0 0 8px; font-size: 1.05em; } .page-ville .faq-item p { margin-bottom: 0; font-size: 0.95em; } /* --- ADRESSES / COORDONNÉES --- */ .page-ville .coordonnees { background: #f8f9fa; padding: 15px 20px; border-radius: 6px; font-size: 0.95em; margin-top: 15px; } /* --- RESPONSIVE --- */ @media (max-width: 768px) { .page-ville h1 { font-size: 1.5em; } .page-ville h2 { font-size: 1.25em; } .page-ville .quartiers-grid, .page-ville .prestations-grid { grid-template-columns: 1fr; } .page-ville .cta-devis { padding: 20px 15px; } .page-ville .cta-devis a { padding: 12px 20px; font-size: 1em; } }