/* ==========================================================
   Pages rubriques – Ligue 60 (Éducation, Sport, Nos crèches…)
   Complète accueil.css : mêmes couleurs, cartes et boutons.
   ========================================================== */

/* ---------- Bandeau ---------- */
body.l60-rubrique .hero { padding-bottom: 0; }
body.l60-rubrique .hero-panneau { padding: 56px 56px 60px; align-items: center; }
body.l60-rubrique .hero-simple .hero-panneau { grid-template-columns: 1fr; }
body.l60-rubrique .hero-simple .hero-texte { max-width: 820px; }
body.l60-rubrique .hero-photo { margin-bottom: 0; }
body.l60-rubrique .hero-photo img { aspect-ratio: 4 / 3; }
body.l60-rubrique .hero h1 { font-weight: 600; margin-top: 4px; }
body.l60-rubrique .hero-intro { max-width: 640px; margin-bottom: 0; }
body.l60-rubrique .hero-intro p { margin: 0 0 12px; color: #fff; }
body.l60-rubrique .hero-intro p:last-child { margin-bottom: 0; }
body.l60-rubrique .hero-intro a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Fil d'Ariane */
body.l60-rubrique .ariane { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 18px; font-size: 14px; color: rgba(255,255,255,.82); }
body.l60-rubrique .ariane a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
body.l60-rubrique .ariane a:hover { text-decoration-color: var(--jaune); }

/* ---------- Cartes ---------- */
body.l60-rubrique .cartes-rubrique { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
body.l60-rubrique .section:not(.fond-gris) .carte-acces { background: var(--gris-fond); }
body.l60-rubrique .carte-rubrique { min-height: 100%; }
body.l60-rubrique .carte-rubrique h3 { font-size: 21px; }
body.l60-rubrique .carte-rubrique .qui { margin-top: 4px; word-break: break-word; }
body.l60-rubrique div.carte-rubrique:hover { transform: none; }
body.l60-rubrique .pastille.logo-site { background: #fff; border: 1.5px solid #e3e6ea; overflow: hidden; }
body.l60-rubrique .pastille.logo-site img { width: 72%; height: 72%; object-fit: contain; }
body.l60-rubrique .groupe-intro { margin: -16px 0 32px; max-width: 720px; font-size: 18px; }

/* ---------- Texte long de la page ---------- */
body.l60-rubrique .prose { max-width: 760px; font-size: 18px; line-height: 1.75; }
body.l60-rubrique .prose > *:first-child { margin-top: 0; }
body.l60-rubrique .prose h2 { font-size: 30px; font-weight: 500; margin: 44px 0 16px; }
body.l60-rubrique .prose h3 { font-size: 22px; font-weight: 500; color: var(--vert-texte); margin: 32px 0 12px; }
body.l60-rubrique .prose a { color: var(--vert-texte); text-decoration: underline; text-underline-offset: 3px; }
body.l60-rubrique .prose ul { padding-left: 22px; }
body.l60-rubrique .prose li { margin-bottom: 6px; }
body.l60-rubrique .prose li::marker { color: var(--vert); }
body.l60-rubrique .prose img { border-radius: var(--r-l); height: auto; }

/* ---------- Bloc contact ---------- */
body.l60-rubrique .contact-rubrique { padding-top: 10px; }
body.l60-rubrique main > .section:last-of-type + .contact-rubrique,
body.l60-rubrique .hero + .contact-rubrique { padding-top: 90px; }
body.l60-rubrique .contact-rubrique .btn-contour { background: transparent; border-color: var(--gris-fonce); color: var(--gris-fonce); }
body.l60-rubrique .contact-rubrique .btn-contour:hover { background: var(--gris-fonce); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	body.l60-rubrique .hero-panneau { padding: 44px 32px; }
	body.l60-rubrique .hero-photo { margin-bottom: 0; }
}
@media (max-width: 680px) {
	body.l60-rubrique .hero-panneau { padding: 36px 24px; }
	body.l60-rubrique .cartes-rubrique { grid-template-columns: 1fr; }
	body.l60-rubrique .prose { font-size: 17px; }
}

/* Mobile (2.4.1) : bandeau rubrique compact */
@media (max-width: 680px) {
	body.l60-rubrique .hero-simple .hero-texte { padding: 30px 22px 30px; }
	body.l60-rubrique .hero h1 { font-size: clamp(30px, 9vw, 40px); }
	body.l60-rubrique .cartes-rubrique { gap: 12px; }
	body.l60-rubrique .carte-rubrique { padding: 20px; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; }
	body.l60-rubrique .carte-rubrique .pastille { width: 44px; height: 44px; }
	body.l60-rubrique .carte-rubrique h3 { font-size: 18px; flex: 1 1 0; min-width: 0; }
	body.l60-rubrique .carte-rubrique .qui, body.l60-rubrique .carte-rubrique p, body.l60-rubrique .carte-rubrique .go { flex-basis: 100%; }
	body.l60-rubrique .carte-rubrique .qui { order: 5; margin: 0; font-size: 13px; }
	body.l60-rubrique .carte-rubrique .go { order: 6; padding-top: 4px; }
}