/* ============================================================
   EN-TÊTE D'ARTICLE — accroche + byline enrichie + actions
   (markup dans single-post.php ; bloc 9 de functions.php)
   Chargé sur TOUS les articles (contrairement à resume.css qui
   n'est enqueué que si l'article a un résumé).
   Dépend de article.css → doit passer APRÈS lui (dépendance
   'mcfr-article' dans l'enqueue).
   ============================================================ */

/* ---------- 1. Accroche (chapô) ---------- */
.mcfr-chapo{
	margin:0 0 18px !important;
	padding:0 0 0 14px;
	border-left:4px solid var(--mc-tq,#1AA995);
	font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif);
	font-size:17px;
	line-height:1.5;
	font-weight:600;
	color:var(--mc-ink,#1E2422);
}
/* Pas de chapô saisi = aucune accroche (le corps de l'article n'est pas
   touché) — décision Clément 31/07. */

/* ---------- 2. Rangée méta : byline + actions ---------- */
/* On reprend la main sur .mcfr-meta-row d'article.css (qui centrait tout) */
#content-area .single-post-module .mcfr-meta-row{
	display:flex !important;
	flex-direction:row !important;
	align-items:center !important;
	justify-content:flex-start !important;
	flex-wrap:wrap !important;
	gap:10px !important;
	text-align:left !important;
	margin:0 0 16px !important;
}

/* byline : occupe toute la ligne en desktop → force le retour des actions.
   Pas d'avatar (retiré le 31/07), juste « Par <auteur> » + dates. */
.mcfr-byline{
	display:flex;
	align-items:center;
	flex:1 1 100%;
	min-width:0;
	order:1;
}
.mcfr-byline-txt{
	min-width:0;
	font-size:13px;line-height:1.45;
	color:var(--mc-muted,#6B756F);
	font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif);
}
.mcfr-who{
	display:block;
	color:var(--mc-ink,#1E2422);
	font-family:var(--mc-display,"Space Grotesk",system-ui,sans-serif);
	font-weight:700;font-size:13.5px;letter-spacing:.01em;
}
/* « Par » discret, pour que le nom reste l'élément fort (pattern Le Figaro,
   Les Numériques) — remplace l'ancrage visuel que donnait l'avatar */
.mcfr-by{color:var(--mc-muted,#6B756F);font-weight:400}
.mcfr-dates{display:block}

/* filet de séparation entre la byline et les actions */
.mcfr-actions-rule{
	flex:1 1 100%;
	order:2;
	height:2px;
	background:var(--mc-line,#E3DFD5);
	margin:2px 0 4px;
}

/* groupes d'actions */
.mcfr-acts-read{display:flex;gap:8px;order:3}
.mcfr-acts-read:empty{display:none}
.mcfr-acts-aud{display:flex;gap:8px;order:4}
/* les CTA ne sont poussés à droite QUE s'il y a un bouton « Résumer » à gauche ;
   sinon ils restent alignés sous la byline (sans ça : grand vide à gauche
   sur les articles sans résumé) */
.mcfr-acts-read + .mcfr-acts-aud{margin-left:auto}
/* le bouton partage : dernier en desktop, remonté près de la byline en mobile */
#content-area .single-post-module .mcfr-meta-row > .mcfr-share-top{order:5}

/* ---------- 3. Bouton partage ---------- */
/* libellé visible en desktop (l'icône seule ne se lit pas) */
.mcfr-share-lbl{display:inline}
#content-area .single-post-module .mcfr-share-top svg{
	width:15px;height:15px;fill:currentColor;flex:0 0 auto;display:block;
}

/* ---------- 4. Mobile ---------- */
@media (max-width:768px){
	.mcfr-chapo{font-size:15.5px;padding-left:11px;border-left-width:3px;margin-bottom:14px !important}

	#content-area .single-post-module .mcfr-meta-row{gap:9px !important}

	/* byline + partage sur la même ligne : flex:1 1 0 + min-width:0 pour que
	   la byline se contente de la place restante (sinon elle pousse le bouton
	   partage à la ligne suivante) */
	.mcfr-byline{flex:1 1 0;min-width:0;gap:9px}
	.mcfr-byline-txt{font-size:12px;line-height:1.4}
	.mcfr-who{font-size:13px}
	#content-area .single-post-module .mcfr-meta-row > .mcfr-share-top{order:2}
	.mcfr-share-lbl{display:none}          /* icône seule (validé 31/07) */

	.mcfr-actions-rule{order:3}
	/* Résumer pleine largeur, puis les 2 CTA d'audience en 2 colonnes */
	.mcfr-acts-read{order:4;flex:1 1 100%}
	.mcfr-acts-read > *{width:100%}
	.mcfr-acts-aud,
	.mcfr-acts-read + .mcfr-acts-aud{
		order:5;flex:1 1 100%;margin-left:0;
		display:grid;grid-template-columns:1fr 1fr;gap:8px;
	}
	.mcfr-acts-aud > *{width:100%}
}

/* ---------- 5. Boutons de la rangée : taille et états communs ----------
   Hauteur fixe identique pour tous, libellés complets (pas de raccourci
   « Favoris » — on neutralise la règle mobile d'article.css). */
#content-area .single-post-module .mcfr-acts-read > .mcfr-gbtn,
#content-area .single-post-module .mcfr-acts-read > .mcfr-resume-btn,
#content-area .single-post-module .mcfr-acts-aud > .mcfr-gbtn,
#content-area .single-post-module .mcfr-meta-row > .mcfr-share-top{
	height:46px !important;
	min-height:0 !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	box-sizing:border-box;
	min-width:0;
	padding:4px 12px !important;
	font-size:12px !important;
	line-height:1.2 !important;
	white-space:normal !important;
	text-align:center;
	transition:transform .08s ease,background .15s ease,box-shadow .08s ease;
}
/* libellé « Ajoutez-nous à vos favoris Google » en entier, y compris mobile */
#content-area .single-post-module .mcfr-acts-aud .mcfr-gbtn--secondary > span{display:inline !important}
#content-area .single-post-module .mcfr-acts-aud .mcfr-gbtn--secondary::after{content:none !important}

/* états (hover / clic enfoncé / focus clavier) */
#content-area .single-post-module .mcfr-meta-row .mcfr-gbtn--primary:hover{background:var(--mc-tq-l,#34CBB2) !important}
#content-area .single-post-module .mcfr-meta-row .mcfr-gbtn--secondary:hover{background:var(--mc-bone,#F4F1EA) !important}
#content-area .single-post-module .mcfr-meta-row .mcfr-gbtn:active,
#content-area .single-post-module .mcfr-meta-row .mcfr-resume-btn:active{
	transform:translate(2px,2px) !important;
	box-shadow:1px 1px 0 var(--mc-shadow,#1E2422) !important;
}
#content-area .single-post-module .mcfr-meta-row .mcfr-gbtn:focus-visible{
	outline:2px solid var(--mc-tq,#1AA995);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
	#content-area .single-post-module .mcfr-meta-row .mcfr-gbtn,
	#content-area .single-post-module .mcfr-meta-row .mcfr-resume-btn{transition:none !important}
	#content-area .single-post-module .mcfr-meta-row .mcfr-gbtn:hover,
	#content-area .single-post-module .mcfr-meta-row .mcfr-gbtn:active,
	#content-area .single-post-module .mcfr-meta-row .mcfr-resume-btn:active{transform:none !important}
}

/* ---------- 6. Mobile : le bouton partage en carré 42, même gabarit que
   l'avatar. Placé en DERNIER pour repasser devant la hauteur 46px commune
   de la section 5 (même spécificité + !important → le dernier gagne). ---------- */
@media (max-width:768px){
	#content-area .single-post-module .mcfr-meta-row > .mcfr-share-top{
		flex:0 0 42px;
		width:42px !important;
		height:42px !important;
		min-width:42px !important;
		padding:0 !important;
		justify-content:center !important;
		box-shadow:2px 2px 0 var(--mc-shadow,#1E2422) !important;
	}
	#content-area .single-post-module .mcfr-share-top svg{width:17px;height:17px}
}