/**
 * Le Cri — typographies (alignées sur lecri.media)
 *
 * Polices : Typekit amplitude-wide + Lyon (useanyfont)
 */

/* Lyon Text — fichiers identiques à lecri.media (Use Any Font) */
@font-face {
	font-family: 'lyon-textregular';
	src: url('../fonts/lyon-text/lyon-textregular.woff2') format('woff2');
	font-display: auto;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: 'lyon-textitalic';
	src: url('../fonts/lyon-text/lyon-textitalic.woff2') format('woff2');
	font-display: auto;
	font-style: normal;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   Variables
   ------------------------------------------------------------------------- */

:root {
	--lecri-font-amplitude: "amplitude-wide", sans-serif;
	--lecri-font-lyon: 'lyon-textregular', sans-serif;
	--lecri-font-lyon-italic: 'lyon-textitalic', sans-serif;
	--lecri-color-text: #000;
	--lecri-color-etiquette: #EF0000;
	--lecri-color-date: #6E6E6E;
}

/* -------------------------------------------------------------------------
   H1 — titre principal (48px / Ultra)
   ------------------------------------------------------------------------- */

h1,
.lecri-h1,
.wp-block-heading h1 {
	color: var(--lecri-color-text) !important;
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 48px !important;
	font-style: normal !important;
	font-weight: 860 !important;
	line-height: 1.1 !important;
}

/* Titre d’article — page single (H1) */
h1.wp-block-post-title,
h1.wp-block-post-title a {
	color: var(--lecri-color-text) !important;
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 48px !important;
	font-style: normal !important;
	font-weight: 860 !important;
	line-height: 1.1 !important;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   H2 — titres de section (32px / Bold)
   ------------------------------------------------------------------------- */

h2:not(.wp-block-post-title),
.lecri-h2,
.wp-block-heading h2 {
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 32px;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

/* -------------------------------------------------------------------------
   H3 — sous-titres (36px / Ultra)
   ------------------------------------------------------------------------- */

h3,
.lecri-h3,
.wp-block-heading h3 {
	color: var(--lecri-color-text) !important;
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 36px !important;
	font-style: normal !important;
	font-weight: 860 !important;
	line-height: 1 !important;
}

/* -------------------------------------------------------------------------
   Titres d’articles — cartes & listes uniquement (24px / Bold)
   N’affecte pas les H2 de section ni le H1 de la page article
   ------------------------------------------------------------------------- */

.wp-block-post-template h2.wp-block-post-title,
.wp-block-post-template h3.wp-block-post-title {
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 24px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   H4
   ------------------------------------------------------------------------- */

h4,
.lecri-h4,
.wp-block-heading h4 {
	color: var(--lecri-color-text) !important;
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 20px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
}

/* -------------------------------------------------------------------------
   Titres — soulignement au survol (uniquement si lien)
   ------------------------------------------------------------------------- */

:is(
	h1,
	h2,
	h3,
	h4,
	.lecri-h1,
	.lecri-h2,
	.lecri-h3,
	.lecri-h4,
	.wp-block-heading :is(h1, h2, h3, h4),
	.wp-block-post-title
) a:hover,
a:is(
	h1,
	h2,
	h3,
	h4,
	.lecri-h1,
	.lecri-h2,
	.lecri-h3,
	.lecri-h4,
	.wp-block-post-title
):hover {
	text-decoration: underline !important;
	text-underline-offset: 0.1em;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   Menu
   ------------------------------------------------------------------------- */

.lecri-menu,
.wp-block-navigation,
.wp-block-navigation-item__content,
.wp-block-navigation-link {
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 17px !important;
	font-style: normal !important;
	font-weight: 350 !important;
	line-height: 1.45 !important;
}

/* Menu header — icône + libellé (Articles, Qui sommes-nous ?, Boutique) */
.wp-block-group.is-nowrap.is-layout-flex:has(> .wp-block-image):has(> p.has-menu-font-size),
.wp-block-group.groupe-lien.is-nowrap.is-layout-flex:has(> .wp-block-image) {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: var(--Petit, 12px);
	padding: 14px var(--petit, 12px);
	box-sizing: border-box;
	border-bottom: none;
	cursor: pointer;
}

.wp-block-group.is-nowrap.is-layout-flex:has(> .wp-block-image):has(> p.has-menu-font-size)::after,
.wp-block-group.groupe-lien.is-nowrap.is-layout-flex:has(> .wp-block-image)::after {
	content: "";
	position: absolute;
	left: var(--petit, 12px);
	right: var(--petit, 12px);
	bottom: 0;
	height: 3px;
	background-color: transparent;
	transition: background-color 0.2s ease;
	pointer-events: none;
}

.wp-block-group.is-nowrap.is-layout-flex:has(> .wp-block-image):has(> p.has-menu-font-size):hover::after,
.wp-block-group.groupe-lien.is-nowrap.is-layout-flex:has(> .wp-block-image):hover::after {
	background-color: #000;
}

.wp-block-group.is-nowrap.is-layout-flex:has(> .wp-block-image):has(> p.has-menu-font-size) p,
.wp-block-group.is-nowrap.is-layout-flex:has(> .wp-block-image):has(> p.has-menu-font-size) p a,
.wp-block-group.groupe-lien.is-nowrap.is-layout-flex:has(> .wp-block-image) p,
.wp-block-group.groupe-lien.is-nowrap.is-layout-flex:has(> .wp-block-image) p a,
.wp-block-group.is-nowrap.is-layout-flex:has(> .wp-block-image):has(> p.has-menu-font-size):hover p a,
.wp-block-group.groupe-lien.is-nowrap.is-layout-flex:has(> .wp-block-image):hover p a,
.wp-block-group.is-nowrap.is-layout-flex:has(> .wp-block-image):has(> p.has-menu-font-size) p a:hover,
.wp-block-group.groupe-lien.is-nowrap.is-layout-flex:has(> .wp-block-image) p a:hover {
	margin: 0 !important;
	text-decoration: none !important;
}

.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none !important;
}

/* -------------------------------------------------------------------------
   Chapo
   ------------------------------------------------------------------------- */

.lecri-chapo,
.is-style-chapo {
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 20px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
}

.chapo-article,
.chapo-article p,
.wp-block-blocks-gutenberg-acf-field.chapo-article,
.wp-block-blocks-gutenberg-acf-field.chapo-article p {
	color: #000 !important;
	text-align: center !important;
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 20px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.3 !important; /* 130 % ≈ 26px */
}

/* -------------------------------------------------------------------------
   Texte — corps & extraits
   ------------------------------------------------------------------------- */

body,
.lecri-texte,
.wp-block-post-excerpt,
.wp-block-post-excerpt p,
.wp-block-blocks-gutenberg-acf-field:not(.chapo-article),
.wp-block-blocks-gutenberg-acf-field:not(.chapo-article) p {
	color: var(--lecri-color-text) !important;
	font-family: 'lyon-textregular', sans-serif !important;
	font-size: 18px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}


/* Paragraphes Lyon — hors cartes article (extraits = .wp-block-blocks-gutenberg-acf-field) */
/*
.single .wp-block-paragraph:not(.is-style-chapo):not(.is-style-texte-sans):not(.is-style-texte-sans-gras):not(.is-style-note):not(.date-custom):not(:is(.wp-block-group.date-custom *)),
.page .wp-block-paragraph:not(.is-style-chapo):not(.is-style-texte-sans):not(.is-style-texte-sans-gras):not(.is-style-note):not(.date-custom):not(:is(.wp-block-group.date-custom *)),
.wp-block-post-content .wp-block-paragraph:not(.is-style-chapo):not(.is-style-texte-sans):not(.is-style-texte-sans-gras):not(.is-style-note):not(.date-custom):not(:is(.wp-block-group.date-custom *)) {
	color: var(--lecri-color-text) !important;
	font-family: 'lyon-textregular', sans-serif !important;
	font-size: 18px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}
*/
body strong,
body b,
.lecri-texte strong,
.wp-block-blocks-gutenberg-acf-field strong {
	font-weight: 700 !important;
}

/* -------------------------------------------------------------------------
   Texte sans
   ------------------------------------------------------------------------- */

.lecri-texte-sans,
.is-style-texte-sans,
.wp-block-paragraph.is-style-texte-sans {
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 17px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
}

/* -------------------------------------------------------------------------
   Texte sans gras
   ------------------------------------------------------------------------- */

.lecri-texte-sans-gras,
.is-style-texte-sans-gras,
.wp-block-paragraph.is-style-texte-sans-gras {
	color: var(--lecri-color-text) !important;
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 19px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
}

/* -------------------------------------------------------------------------
   Étiquette — catégories / tags
   ------------------------------------------------------------------------- */

.lecri-etiquette,
.lecri-etiquette a,
.wp-block-post-terms,
.wp-block-post-terms a,
a.ctdqb-post-term-link {
	color: var(--lecri-color-etiquette) !important;
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 14px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	text-transform: uppercase !important;
	text-decoration: none;
}


/* -------------------------------------------------------------------------
   Note
   ------------------------------------------------------------------------- */

.lecri-note,
.is-style-note,
.wp-block-paragraph.is-style-note {
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 14px !important;
	font-style: normal !important;
	font-weight: 350 !important;
	line-height: 1.4 !important;
}

/* -------------------------------------------------------------------------
   Hyperlien
   ------------------------------------------------------------------------- */

.lecri-hyperlien,
a.lecri-hyperlien,
.voir-tout a {
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 15px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	line-height: 26px !important;
	text-decoration-line: underline !important;
}

/* -------------------------------------------------------------------------
   Citation exergue
   ------------------------------------------------------------------------- */

.lecri-citation,
.wp-block-pullquote,
.wp-block-pullquote blockquote,
.wp-block-pullquote p,
.wp-block-quote p {
	color: var(--lecri-color-text) !important;
	font-family: 'lyon-textitalic', sans-serif !important;
	font-size: 32px !important;
	font-style: italic !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}

/* -------------------------------------------------------------------------
   Bouton (typo — couleurs dans buttons.css)
   ------------------------------------------------------------------------- */

.lecri-bouton,
.wp-block-button .wp-block-button__link,
.wp-element-button {
	font-family: var(--lecri-font-amplitude) !important;
	font-size: 18px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
}

/* -------------------------------------------------------------------------
   Date de publication — cartes (.date-custom sur le groupe flex)
   ------------------------------------------------------------------------- */

.wp-block-group.date-custom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

.wp-block-group.date-custom p,
.wp-block-group.date-custom p.wp-block-paragraph,
.wp-block-group.date-custom .wp-block-post-date,
.wp-block-group.date-custom .wp-block-post-date time {
	color: var(--lecri-color-date) !important;
	font-family: "amplitude-wide", sans-serif !important;
	font-size: 14px !important;
	font-style: normal !important;
	font-weight: 350 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	text-decoration: none;
}

/* Surcharge couleurs Gutenberg (gris / accent-4) */
.wp-block-group.date-custom .has-gris-color,
.wp-block-group.date-custom .has-accent-4-color,
.wp-block-group.date-custom [class*="has-amplitude-wide"] {
	color: var(--lecri-color-date) !important;
}

.lecri-date,
p.ctdqb-post-date {
	color: var(--lecri-color-date) !important;
	font-family: "amplitude-wide", sans-serif !important;
	font-size: 14px !important;
	font-weight: 350 !important;
	line-height: 1.4 !important;
}

/* -------------------------------------------------------------------------
   Pagination boucle
   ------------------------------------------------------------------------- */

.pagination-boucle {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--micro, 6px);
}

.pagination-boucle .page-numbers {
	display: flex;
	width: 36px;
	padding: var(--micro, 6px);
	justify-content: center;
	align-items: center;
	gap: var(--micro, 6px);
	border-radius: 11px;
	font-weight: 500;
}

.pagination-boucle .page-numbers.current,
.pagination-boucle .page-numbers[aria-current="page"] {
	border-radius: 7px;
	border: 1px solid var(--Noir, #000);
	background: #fff;
	font-weight: 600;
}
