/* Complément CSS à la charte Zeina (classes Tailwind déjà compilées :
   btn-primary, card, card-sm, inputbox, etc.) — uniquement ce que le thème
   ne fournit pas déjà : cartes cliquables en visuel+texte (mise en avant,
   grille de listing), image en tête de page détail, et les boutons de
   partage/like. */

/* Page détail resserrée en colonne de lecture, centrée dans le .panel (qui,
   lui, garde sa largeur habituelle — seul le contenu de l'article rétrécit,
   le fil d'Ariane "Actualités" du thème reste donc à sa place normale). */
.actu-article {
	max-width: 760px;
	margin: 0 auto;
}

/* Le reset du thème force iframe/video/embed/object en display:block (même
   cause que le commentaire plus bas sur les <svg> du bouton like) — sur un
   embed Media Embed (Instagram, YouTube...), ça casse le BBCode [center],
   qui rend <div style="text-align:center"> : text-align n'a aucun effet sur
   un enfant block. On repasse ces balises en inline-block (leur comportement
   HTML par défaut, comme <img> déjà inline-block sur ce thème) pour que
   [center] les centre normalement. */
.actu-article .content iframe,
.actu-article .content video,
.actu-article .content embed,
.actu-article .content object {
	display: inline-block;
}

.actu-hero,
.actu-card {
	display: block;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

/* Bordure de .card/.panel à peine visible en dark mode sur ce thème (plus
   sombre que leur propre fond) — on la resserre ici sur les blocs de
   l'extension avec un ton clair, cohérent avec les demandes précédentes de
   contraste (cf. covoit-highlight-card dans l'extension covoiturage). */
.dark .actu-hero,
.dark .actu-card,
.dark .actu-topic-cta {
	border-color: rgba(255, 255, 255, 0.14);
}

/* Bandeau de mise en avant du sujet forum : très léger fond teinté pour le
   distinguer du reste de l'article, dans les 2 modes (deux valeurs
   distinctes nécessaires — même principe que .covoit-highlight-card dans
   covoiturage : à opacité égale, le bleu ESTAC est presque invisible sur le
   fond sombre des .card en dark, il faut une opacité plus forte là-bas). */
.actu-topic-cta {
	background-color: rgba(var(--color-primary), 0.05);
}

.dark .actu-topic-cta {
	background-color: rgba(var(--color-primary-dark), 0.16);
}

/* Brève mise en avant (attribut BO "Mettre en avant l'article") : occupe 2
   des 3 colonnes de .actu-grid (image à gauche + texte à droite, chacun sur
   1/3 de la largeur totale de la grille) — la carte suivante du flux
   remplit naturellement le 1/3 restant de la même ligne. */
.actu-card-featured {
	grid-column: span 2;
}

.actu-hero {
	display: flex;
	flex-direction: row;
}

.actu-hero-img {
	display: block;
	flex: 1 1 0;
	min-width: 0;
}

.actu-hero-body {
	flex: 1 1 0;
	min-width: 0;
	padding: 1rem;
}

/* Même palier que le passage de .actu-grid à 1 colonne : la mise en avant
   redevient une carte normale (pleine largeur, image au-dessus du texte). */
@media (max-width: 600px) {
	.actu-card-featured {
		grid-column: span 1;
	}

	.actu-hero {
		flex-direction: column;
	}
}

.actu-hero-img,
.actu-card-image,
.actu-hero-image {
	background-size: cover;
	background-position: center;
	background-color: #e5e7eb;
	/* .card a son propre padding (0.5rem, Zeina) : l'image ne touche jamais
	   le bord arrondi du conteneur pour que le overflow:hidden de .actu-hero/
	   .actu-card la découpe — elle a donc besoin de son propre arrondi. */
	border-radius: 0.75rem;
}

.dark .actu-hero-img,
.dark .actu-card-image,
.dark .actu-hero-image {
	background-color: rgba(255, 255, 255, 0.06);
}

.actu-hero-img {
	aspect-ratio: 1 / 1;
}

@media (max-width: 600px) {
	.actu-hero-img {
		aspect-ratio: 21 / 9;
	}
}

.actu-card-image {
	aspect-ratio: 16 / 9;
}

.actu-hero-image {
	aspect-ratio: 21 / 9;
	border-radius: 0.75rem;
}

/* Titre de la page détail : plus gros que le h1 par défaut du thème, et
   limité en largeur pour ne pas filer sur toute la colonne de lecture. */
.actu-title {
	font-size: 2rem;
	line-height: 1.2;
	max-width: 75%;
}

@media (max-width: 600px) {
	.actu-title {
		max-width: 100%;
	}
}

/* Chapô : légèrement plus gros que le corps de l'article (.content, ~1rem),
   pour marquer visuellement l'accroche avant le contenu détaillé. */
.actu-chapo {
	font-size: 1.125rem;
	line-height: 1.5;
	font-weight: 500;
	margin-bottom: 1rem;
}

.actu-category-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 10px;
	border-radius: 9999px;
	background: rgba(var(--color-primary), 0.1);
	color: rgba(var(--color-primary), 1);
	text-decoration: none;
}

.dark .actu-category-badge {
	background: rgba(var(--color-primary-dark), 0.25);
	color: #7fb2e6;
}

/* Titre de la brève mise en avant (2/3 du listing) : plus gros que les titres
   de carte classique (.actu-card h4), mais plus petit que le h1 de la page
   détail (.actu-title). Même limite de largeur que .actu-title, pour éviter
   qu'un titre long ne remplisse toute la largeur de la carte. */
.actu-hero-title {
	font-size: 1.375rem;
	line-height: 1.3;
	max-width: 75%;
}

.actu-hero-title a {
	color: inherit;
	text-decoration: none;
}

.actu-hero-title a:hover {
	text-decoration: underline;
}

/* Titre des cartes classiques (grille, "même catégorie") : même limite de
   largeur que .actu-title/.actu-hero-title, pour la cohérence. */
.actu-card h4 {
	max-width: 75%;
}

@media (max-width: 600px) {
	.actu-hero-title,
	.actu-card h4 {
		max-width: 100%;
	}
}

/* Aperçus tronqués visuellement à N lignes (le texte réel n'est pas coupé
   côté serveur — le chapô n'a pas de limite de longueur — c'est purement
   l'affichage qui s'arrête à N lignes avec une ellipse). */
.actu-excerpt-7,
.actu-excerpt-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.actu-excerpt-7 {
	-webkit-line-clamp: 7;
	line-clamp: 7;
}

.actu-excerpt-3 {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Lien texte "Lire l'article" des cartes classiques (2e brève, grille,
   articles de la même catégorie) — contrairement au CTA de la brève mise en
   avant, ce n'est volontairement pas un bouton. */
.actu-read-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(var(--color-primary), 1);
}

.dark .actu-read-more {
	color: #7fb2e6;
}

.actu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

@media (max-width: 900px) {
	.actu-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.actu-grid {
		grid-template-columns: 1fr;
	}
}

.actu-share {
	display: flex;
	align-items: center;
	gap: 8px;
}

.actu-share-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9999px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #1f2937;
	cursor: pointer;
}

/* Infobulle "Lien copié !" — apparaît immédiatement au clic (pas au survol,
   contrairement à l'attribut title natif qui reste posé en repli pour
   l'accessibilité) et se referme seule après 1,5s (cf. actualites.js).
   Toujours sombre/texte clair quel que soit le thème clair/sombre de la
   page, comme la plupart des info-bulles de ce type. */
.actu-copy-tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	background: #1f2937;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	padding: 6px 10px;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.actu-copy-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1f2937;
}

.actu-copy-tooltip.is-visible {
	opacity: 1;
	visibility: visible;
}

.actu-share-btn:hover {
	background: #f3f4f6;
}

.dark .actu-share-btn {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
	color: #e2e8f0;
}

.dark .actu-share-btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

.actu-liked {
	color: rgba(var(--color-primary), 1);
}

.dark .actu-liked {
	color: #7fb2e6;
}

/* Bandeau "non connecté" (cœur + compteur + message + bouton connexion) :
   pas de flex/gap Tailwind ici — le reset du thème force les <svg> en
   display:block, ce qui casse l'alignement cœur/chiffre et les fait passer
   à la ligne dans un <span> non flex. On reconstruit tout en flex ici, avec
   wrap au niveau du bloc (jamais au milieu d'un élément) pour qu'un manque
   de place fasse descendre le bouton entier à la ligne suivante plutôt que
   de le faire rogner par l'overflow du .card parent. */
.actu-like-hint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.actu-like-hint .actu-like-count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.actu-like-hint .actu-like-count svg {
	display: inline-block;
}

.actu-like-hint .actu-like-text {
	white-space: nowrap;
}

.actu-like-hint .actu-like-login-btn {
	white-space: nowrap;
	flex-shrink: 0;
}