/**
 * Recommandations littéraires : encadré du livre commenté, cartes et lecteur
 * vidéo.
 *
 * La rubrique se distingue du blog par une seule décision graphique : le vert
 * profond de la charte y prend la place que la terracotta occupe ailleurs. Un
 * article de blog est illustré de terracotta, une recommandation de vert — le
 * lecteur sait où il est sans lire l'étiquette. Tout le reste (rythmes,
 * bordures, rayons, ombres) est repris de base.css sans y toucher.
 *
 * Cette feuille est chargée par le plugin, et seulement sur les pages qui
 * contiennent une vidéo ou une recommandation.
 */

/* ============================================================ La mascotte */

/*
 * Le perroquet dans son fauteuil, combiné à l'aile : la causerie littéraire.
 * Il tient le bord DROIT du bandeau de la page, tourné vers le titre — même
 * calage que le conférencier de la page des événements, pour que les bandeaux
 * du site se ressemblent.
 *
 * En pseudo-élément : purement décoratif, il n'a pas à peupler le balisage ni
 * à être annoncé par un lecteur d'écran. Le bandeau `.lc-page-header` est
 * PARTAGÉ par toutes les pages du site, d'où le préfixe `.lc-recos` posé sur
 * le corps de page par `lcc_reco_body_class()` : sans lui, le perroquet
 * apparaîtrait sur les mentions légales.
 *
 * L'URL est absolue. Une URL relative se résoudrait depuis cette feuille,
 * c'est-à-dire sous le plugin, où l'image n'est pas.
 */
/*
 * Il illustre les DEUX en-têtes de la rubrique : le bandeau sable de la page
 * (`.lc-page-header`) et l'en-tête d'un article (`.lc-article-header`). Le
 * limiter au premier le faisait disparaître dès qu'on ouvrait une
 * recommandation, alors que c'est précisément là qu'on est dans la rubrique.
 */
.lc-recos .lc-page-header,
.lc-recos .lc-article-header {
	position: relative;
	overflow: visible;
}

.lc-recos .lc-page-header::after,
.lc-recos .lc-article-header::after {
	content: "";
	position: absolute;
	right: max(16px, calc(50% - 520px));
	/*
	 * La boîte occupe TOUTE la hauteur de l'en-tête (`top` et `bottom` à zéro)
	 * et l'image y est contenue : le perroquet s'adapte donc au bandeau, au
	 * lieu de lui imposer sa taille. C'est ce qui corrige la décapitation —
	 * une hauteur déduite d'une largeur en `vw` finissait par dépasser le
	 * bandeau, dont la hauteur est plafonnée par un `clamp`, et le haut de la
	 * tête était rogné.
	 *
	 * `bottom center` cale le fauteuil sur le bord inférieur : le perroquet
	 * repose sur le bandeau comme sur un plancher plutôt que d'y flotter.
	 */
	top: 0;
	bottom: 0;
	width: clamp(120px, 15vw, 180px);
	background: url(https://editionslascasitas.com/wp-content/uploads/2026/07/mascotte-perroquet-telephone-assis.webp) bottom center / contain no-repeat;
	filter: drop-shadow(7px 10px 14px rgba(23, 23, 19, .22));
	pointer-events: none;
}

/*
 * Aucune réserve de place n'est faite sur le titre.
 *
 * Une première version lui posait un `padding-inline` pour qu'il ne passe pas
 * sous le perroquet. C'était une erreur : les titres de cette rubrique sont
 * centrés et déjà bridés à 20 caractères de large par le thème ; le padding
 * s'ajoutait à cette contrainte et découpait « Le Comte de Monte-Cristo : le
 * roman qui fait lire ceux qui ne lisent pas » en une colonne de six lignes.
 *
 * Le perroquet est de toute façon calé sur le bord droit de la colonne large
 * (1040 px), très au-delà du titre — il n'y a pas de collision à prévenir.
 */

/* Sous 1100 px, le perroquet mordrait sur le titre, dont la colonne ne se
   resserre plus. Même seuil que les autres bandeaux illustrés du site. */
@media (max-width: 1100px) {
	.lc-recos .lc-page-header::after,
	.lc-recos .lc-article-header::after {
		display: none;
	}
}

/* ============================================================ L'encadré */

/*
 * Deux colonnes tant qu'il y a la place pour une couverture lisible ; la
 * couverture passe au-dessus en dessous de 640 px. `clamp` plutôt qu'une
 * bascule brutale : la colonne du texte ne doit jamais descendre sous une
 * quarantaine de caractères, en deçà desquels une notice bibliographique
 * devient un escalier de mots.
 */
.lc-reco-fiche {
	position: relative;
	display: grid;
	grid-template-columns: minmax(140px, 220px) 1fr;
	gap: clamp(20px, 3vw, 36px);
	align-items: start;
	margin-block: clamp(24px, 4vw, 40px);
	padding: clamp(20px, 3vw, 32px);
	background-color: var(--lc-panel, #f5f1e9);
	border: 1px solid var(--lc-border, #e6e0d4);
	border-left: 4px solid var(--wp--preset--color--forest, #3f5a43);
	border-radius: var(--lc-radius, 3px);
}

@media (max-width: 640px) {
	.lc-reco-fiche {
		grid-template-columns: 1fr;
	}

	.lc-reco__couverture {
		width: min(200px, 60%);
	}
}

.lc-reco__couverture-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lc-radius, 3px);
	/*
	 * Contrairement aux livres du catalogue, dont le visuel 3D est détouré sur
	 * fond transparent, la couverture d'un livre tiers est une image plate,
	 * rectangulaire et opaque : elle a besoin d'une ombre portée classique et
	 * d'un filet, sinon elle flotte sur le beige de l'encadré.
	 */
	box-shadow: 0 10px 24px rgba(23, 23, 19, .18);
}

.lc-reco__corps {
	min-width: 0;
}

.lc-reco__eyebrow {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--forest, #3f5a43);
}

.lc-reco__livre {
	margin: 0 0 16px;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
}

.lc-reco__meta {
	margin: 0 0 16px;
	display: grid;
	gap: 6px;
}

.lc-reco__ligne {
	display: grid;
	grid-template-columns: minmax(88px, auto) 1fr;
	gap: 12px;
	align-items: baseline;
	font-size: 0.9375rem;
}

.lc-reco__ligne dt {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey, #6e6a63);
}

.lc-reco__ligne dd {
	margin: 0;
}

.lc-reco__etoiles {
	color: var(--wp--preset--color--terracotta, #c85c38);
	/* Les étoiles pleines et vides doivent occuper la même largeur, sans quoi
	   deux notes différentes désalignent les lignes voisines. */
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
}

.lc-reco__exergue {
	margin: 0 0 20px;
	padding-left: 16px;
	border-left: 2px solid var(--wp--preset--color--leaf, #dde5d7);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
	font-style: italic;
	line-height: 1.45;
}

.lc-reco__achat {
	margin: 0 0 8px;
}

/* Le bouton d'achat est vert et non terracotta : la terracotta est réservée
   aux appels à l'action vers NOS livres. Un lecteur ne doit pas confondre
   « acheter un livre dont nous parlons » et « acheter un livre que nous
   éditons ». */
.lc-reco__bouton {
	display: inline-block;
	background-color: var(--wp--preset--color--forest, #3f5a43);
	color: var(--wp--preset--color--white, #fff);
	text-decoration: none;
}

.lc-reco__bouton:hover,
.lc-reco__bouton:focus {
	background-color: var(--wp--preset--color--ink, #171713);
	color: var(--wp--preset--color--white, #fff);
}

.lc-reco__affiliation,
.lc-reco__mention {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--wp--preset--color--grey, #6e6a63);
}

/* Le ruban du coup de cœur, ancré au coin haut-droit de l'encadré et de la
   carte. `translate` sur les deux axes pour qu'il mange le filet plutôt que de
   s'y coller. */
.lc-reco__ruban {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(6px, -10px);
	padding: 5px 12px;
	background-color: var(--wp--preset--color--terracotta, #c85c38);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--lc-radius, 3px);
	box-shadow: 0 6px 14px rgba(23, 23, 19, .18);
}

.lc-reco__retour {
	margin-top: clamp(32px, 5vw, 48px);
}

/* ============================================================== La vidéo */

/*
 * Une vidéo ne dépasse jamais la colonne de texte.
 *
 * Sur le site, le bloc hérite de la largeur de son conteneur et la question ne
 * se pose pas. Dans l'éditeur, en revanche, l'aperçu servi par le serveur est
 * posé dans une zone bien plus large que la colonne de rédaction : sans
 * plafond, un 16/9 s'étalait sur toute la fenêtre et écrasait le texte autour.
 * On reprend donc la largeur de contenu du thème (760 px), avec un repli si la
 * variable n'est pas définie — c'est le cas dans certains contextes d'aperçu.
 */
.lc-video-wrap {
	margin-block: clamp(24px, 4vw, 40px);
	width: 100%;
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
}

.lc-video__titre {
	margin: 0 0 12px;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	font-weight: 500;
}

/*
 * Le ratio est porté par une variable posée en ligne par le PHP : 16/9 pour
 * YouTube et Vimeo, 9/16 pour TikTok. Le lecteur vertical est en outre bridé
 * en largeur — étalé sur toute la colonne, un TikTok ferait deux mètres de
 * haut.
 */
.lc-video {
	position: relative;
	margin: 0;
	aspect-ratio: var(--lc-video-ratio, 16 / 9);
	background-color: var(--wp--preset--color--forest, #3f5a43);
	border-radius: var(--lc-radius, 3px);
	overflow: hidden;
}

.lc-video--tiktok {
	width: min(340px, 100%);
	margin-inline: auto;
}

.lc-video__frame,
.lc-video__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.lc-video__facade {
	display: grid;
	place-content: center;
	gap: 10px;
	padding: 24px;
	background: none;
	color: var(--wp--preset--color--white, #fff);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	text-align: center;
}

.lc-video__affiche {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Assombrie pour que le bouton et le libellé restent lisibles quelle que
	   soit l'image mise en avant, y compris une couverture très claire. */
	filter: brightness(.55);
}

.lc-video__play,
.lc-video__label,
.lc-video__hote {
	position: relative;
	z-index: 1;
}

/* Le triangle de lecture, dessiné en CSS : pas de fichier à charger, et il
   suit la couleur du texte. */
.lc-video__play {
	justify-self: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background-color: rgba(250, 248, 243, .92);
	box-shadow: 0 10px 26px rgba(23, 23, 19, .35);
	transition: transform .18s ease, background-color .18s ease;
}

.lc-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent var(--wp--preset--color--forest, #3f5a43);
}

.lc-video__facade:hover .lc-video__play,
.lc-video__facade:focus-visible .lc-video__play {
	transform: scale(1.06);
	background-color: var(--wp--preset--color--white, #fff);
}

.lc-video__facade:focus-visible {
	outline: 3px solid var(--wp--preset--color--white, #fff);
	outline-offset: -6px;
}

.lc-video__label {
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 10px rgba(23, 23, 19, .5);
}

.lc-video__hote {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: .75;
}

.lc-video__repli {
	word-break: break-all;
}

/* ============================================================= Les cartes */

.lc-reco-section {
	margin-block: clamp(32px, 5vw, 56px);
}

.lc-reco-section__titre {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 500;
}

.lc-reco-section__intro {
	margin: 0 0 clamp(24px, 4vw, 36px);
	max-width: 62ch;
	color: var(--wp--preset--color--grey, #6e6a63);
}

.lc-reco-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(20px, 2.5vw, 32px);
}

.lc-reco-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--lc-border, #e6e0d4);
	border-radius: var(--lc-radius, 3px);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.lc-reco-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(23, 23, 19, .1);
}

.lc-reco-card--coeur {
	border-color: var(--wp--preset--color--terracotta, #c85c38);
}

/*
 * Sur une carte, le ruban se pose À L'INTÉRIEUR.
 *
 * Il déborde du cadre sur l'encadré de l'article, où c'est joli et sans
 * conséquence. Sur la carte, dont le `overflow: hidden` est nécessaire pour que
 * l'image respecte les angles arrondis, ce même débordement le faisait rogner
 * net par le bord supérieur.
 */
.lc-reco-card .lc-reco__ruban {
	top: 12px;
	right: 12px;
	transform: none;
}

.lc-reco-card__media {
	display: block;
	background-color: var(--lc-panel, #f5f1e9);
}

/*
 * Les couvertures de livres tiers viennent d'Amazon ou d'un scan : leurs
 * proportions sont imprévisibles. `contain` sur un cadre fixe les montre en
 * entier, quitte à laisser du beige de part et d'autre — `cover` rognerait le
 * titre du livre, ce qui est exactement ce qu'il ne faut pas rogner.
 */
.lc-reco-card__img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: contain;
	padding: 16px;
}

.lc-reco-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 24px;
	flex: 1;
}

.lc-reco-card__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--forest, #3f5a43);
}

.lc-reco-card__video {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 9px;
	background-color: var(--wp--preset--color--leaf, #dde5d7);
	color: var(--wp--preset--color--forest, #3f5a43);
	border-radius: 999px;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
}

/* Le petit triangle de la pastille « Vidéo ». */
.lc-reco-card__video::before {
	content: "";
	border-style: solid;
	border-width: 4px 0 4px 7px;
	border-color: transparent transparent transparent currentColor;
}

.lc-reco-card__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
}

.lc-reco-card__title a {
	color: inherit;
	text-decoration: none;
}

.lc-reco-card__title a:hover,
.lc-reco-card__title a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lc-reco-card__livre {
	margin: 0;
	font-family: var(--wp--preset--font-family--editorial);
	font-style: italic;
	font-size: 1rem;
	color: var(--wp--preset--color--grey, #6e6a63);
}

.lc-reco-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.lc-reco-card__link {
	margin-top: auto;
	padding-top: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	color: var(--wp--preset--color--forest, #3f5a43);
}

.lc-reco-vide {
	padding: clamp(24px, 4vw, 40px);
	background-color: var(--lc-panel, #f5f1e9);
	border-radius: var(--lc-radius, 3px);
	text-align: center;
	color: var(--wp--preset--color--grey, #6e6a63);
}

.lc-reco-section__lien {
	margin-top: clamp(20px, 3vw, 28px);
}

.lc-reco-pagination {
	margin-top: clamp(28px, 4vw, 40px);
	display: flex;
	justify-content: center;
	gap: 10px;
}