/* Articles « nouveau format » (article.php) */
.article-meta { text-align: center; color: #7A4CA3; font-weight: bold; margin: -15px 0 25px 0; }
.actu-sous-titre { background-color: #EDCFF2; font-style: italic; padding: 8px 15px; margin: 25px 0 15px 0; border-radius: 4px; }
.article-text ul { margin: 0 0 20px 25px; }

/* liens */
.lien-externe::after { content: " \2197"; font-size: 0.85em; }
.lien-pdf::before { content: "\1F4C4\00a0"; }
.pdf-taille { color: #666; font-size: 0.85em; }

/* info-bulles (survol, clavier et toucher) */
.infobulle { border-bottom: 1px dotted #7A4CA3; cursor: help; position: relative; outline: none; }
.infobulle::after {
	content: attr(data-info);
	position: absolute; left: 0; bottom: 130%;
	width: max-content; max-width: 280px;
	background: #531378; color: #fff;
	padding: 8px 10px; border-radius: 6px;
	font-size: 14px; font-style: normal; font-weight: normal; line-height: 1.4; text-align: left;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	opacity: 0; visibility: hidden; transition: opacity .15s;
	z-index: 50; pointer-events: none;
}
.infobulle:hover::after, .infobulle:focus::after { opacity: 1; visibility: visible; }

/* photos */
.actu-galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 15px; margin: 25px 0; }
.actu-galerie figure { margin: 0; text-align: center; }
.actu-galerie img { width: 100%; height: auto; border-radius: 6px; display: block; }
.actu-galerie figcaption { font-size: 14px; font-style: italic; color: #555; margin-top: 6px; }

.actu-documents { list-style: none; margin: 20px 0; padding: 0; }
.actu-documents li { padding: 6px 0; }
.actu-retour { margin-top: 30px; }

/* en-tête d'article : grande photo, badge, vidéo */
.actu-badge { display: inline-block; color: #fff; font-size: 12px; font-weight: bold; padding: 3px 10px; border-radius: 12px; vertical-align: middle; }
.actu-badge.btn-gauthiere { background: #CD0C45; } .actu-badge.btn-stthys { background: #F79433; } .actu-badge.btn-eeap { background: #63B54A; } .actu-badge.btn-fam { background: #8B5285; } .actu-badge.btn-siege { background: #666; }
.actu-hero { margin: 0 0 25px 0; text-align: center; }
.actu-hero img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 10px; display: block; }
.actu-hero figcaption { font-size: 14px; font-style: italic; color: #555; margin-top: 6px; }
.actu-texte { max-width: 820px; margin: 0 auto; }
.actu-texte p { text-align: left; }
.actu-video { display: block; width: 100%; max-width: 820px; margin: 25px auto; border: 2px solid #710F71; border-radius: 8px; background: #000; }
.actu-zoom { cursor: zoom-in; }
.actu-galerie img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .15s; }
.actu-galerie a:hover img { transform: scale(1.02); }

/* navigation précédent / suivant */
.actu-nav { display: flex; gap: 15px; justify-content: space-between; margin: 40px 0 10px 0; }
.actu-nav-lien { flex: 1; max-width: 48%; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(83, 19, 120, .15); text-decoration: none !important; color: #222 !important; }
.actu-nav-lien small { color: #7A4CA3; font-weight: bold; }
.actu-nav-lien:hover { box-shadow: 0 4px 12px rgba(83, 19, 120, .25); }
.actu-nav-droite { text-align: right; margin-left: auto; }
@media (max-width: 600px) { .actu-nav { flex-direction: column; } .actu-nav-lien { max-width: none; } }

/* visionneuse */
.actu-voile { position: fixed; inset: 0; background: rgba(0, 0, 0, .88); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.actu-voile[hidden] { display: none; }
.actu-voile img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 6px; }
.actu-v-legende { color: #fff; margin: 10px 20px 0; text-align: center; min-height: 20px; }
.actu-voile button { position: absolute; background: rgba(255, 255, 255, .15); color: #fff; border: 0; cursor: pointer; font-size: 34px; line-height: 1; width: 52px; height: 52px; border-radius: 50%; }
.actu-voile button:hover { background: rgba(255, 255, 255, .3); }
.actu-v-fermer { top: 15px; right: 15px; } .actu-v-prec { left: 15px; top: 50%; } .actu-v-suiv { right: 15px; top: 50%; }

/* tailles des photos : discrètes, alignées sur la colonne de texte */
.actu-hero { max-width: 820px; margin-left: auto; margin-right: auto; }
.actu-hero img { max-height: 360px; }
.actu-galerie { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 900px; margin: 25px auto; }
.actu-galerie figure { flex: 0 1 270px; max-width: 100%; }
.actu-galerie img { width: 100%; height: 190px; aspect-ratio: auto; object-fit: cover; }
.actu-galerie-peu figure { flex: 0 1 auto; }
.actu-galerie-peu img { width: auto; max-width: 100%; max-height: 340px; height: auto; margin: 0 auto; object-fit: contain; }

/* vidéo : taille réduite */
.actu-video { max-width: 620px; }

/* articles réduits à une affiche : l'image est affichée en grand pour rester lisible */
.actu-affiches { max-width: 820px; }
.actu-affiches figure { flex: 1 1 100%; max-width: 100%; }
.actu-affiches img { width: 100%; height: auto; max-height: none; object-fit: contain; }

/* petites images (logos...) : taille naturelle, sans agrandissement flou */
.actu-galerie figure.actu-petite { flex: 0 0 auto; }
.actu-galerie figure.actu-petite img { width: auto; height: auto; max-width: 100%; max-height: 160px; object-fit: contain; background: #fff; padding: 6px; }

/* vidéo : s'adapte à son format (carré, vertical ou paysage), sans bandes noires ni agrandissement excessif */
.actu-video { width: auto; height: auto; max-width: min(100%, 620px); max-height: 460px; background: #000; margin: 25px auto; border: 0; border-radius: 10px; box-shadow: 0 2px 10px rgba(83, 19, 120, .35); }

/* vidéo moins haute */
.actu-video { max-height: 340px; }

/* lecteur vidéo toujours plus large que haut (16/9), la vidéo s'y ajuste sans déformation */
.actu-video { width: 100%; max-width: 680px; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: contain; }

/* petites images : taille réelle (plus de réduction à 160 px) */
.actu-galerie figure.actu-petite img { max-height: 360px; }
