/*
 * LFDS Agrumes — Styles publics (fiche + archive)
 * Volontairement sobres : ils héritent des styles généraux du thème
 * actif pour la typographie, et se contentent de structurer la mise
 * en page propre au plugin (grille, cartes, badges, filtres).
 */

:root {
	--lfds-green: #1f3d2b;
	--lfds-orange: #e07a3f;
	--lfds-cream: #f4f1ea;
	--lfds-text: #2b2b25;
	--lfds-border: #ddd6c7;
}

/* ---------- Badges ---------- */

.lfds-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.lfds-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: var(--lfds-green);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.lfds-badge--new       { background: #c0392b; }
.lfds-badge--favorite  { background: #b0552e; }
.lfds-badge--chef      { background: #8a3b6c; }
.lfds-badge--hardy     { background: #2f6b3a; }
.lfds-badge--beginner  { background: #3a6b8a; }
.lfds-badge--available { background: var(--lfds-orange); }

/* ---------- Fiche variété ---------- */

.lfds-fiche {
	max-width: 780px;
	margin: 0 auto;
	padding: 40px 20px;
	color: var(--lfds-text);
}

.lfds-fiche__title {
	margin: 0 0 4px;
	font-size: 2rem;
	color: var(--lfds-green);
}

.lfds-fiche__latin {
	color: #6b6b5f;
	margin: 0 0 12px;
}

.lfds-fiche__categories {
	margin: 0 0 20px;
}

.lfds-tag {
	display: inline-block;
	margin-right: 6px;
	padding: 3px 10px;
	border: 1px solid var(--lfds-border);
	border-radius: 20px;
	font-size: 13px;
	color: var(--lfds-green);
	text-decoration: none;
}

.lfds-fiche__image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 20px;
}

.lfds-fiche__infos {
	background: var(--lfds-cream);
	border-radius: 8px;
	padding: 20px 24px;
	margin: 24px 0;
}

.lfds-fiche__infos h2 {
	margin-top: 0;
	font-size: 1.1rem;
	color: var(--lfds-green);
}

.lfds-infos-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lfds-infos-list li {
	padding: 6px 0;
	border-bottom: 1px solid var(--lfds-border);
}

.lfds-infos-list li:last-child {
	border-bottom: none;
}

.lfds-fiche__back {
	margin-top: 30px;
}

.lfds-fiche__back a {
	color: var(--lfds-green);
	text-decoration: none;
	font-weight: 600;
}

/* ---------- Archive / grille ---------- */

.lfds-archive {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

.lfds-archive__header h1 {
	color: var(--lfds-green);
	margin-bottom: 24px;
}

.lfds-filters {
	background: var(--lfds-cream);
	border-radius: 8px;
	padding: 18px 20px;
	margin-bottom: 30px;
}

.lfds-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
}

.lfds-filters__field {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	font-weight: 600;
	color: var(--lfds-green);
	gap: 4px;
}

.lfds-filters__field select,
.lfds-filters__field input[type="number"] {
	padding: 6px 8px;
	border: 1px solid var(--lfds-border);
	border-radius: 4px;
	font-weight: 400;
	color: var(--lfds-text);
}

.lfds-filters__field--checkbox {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.lfds-filters__actions {
	margin-top: 14px;
	display: flex;
	gap: 10px;
}

.lfds-btn {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 4px;
	background: var(--lfds-orange);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border: none;
	cursor: pointer;
}

.lfds-btn--ghost {
	background: transparent;
	color: var(--lfds-green);
	border: 1px solid var(--lfds-border);
}

.lfds-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}

.lfds-card {
	display: block;
	background: #fff;
	border: 1px solid var(--lfds-border);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: var(--lfds-text);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.lfds-card:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}

.lfds-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--lfds-cream);
}

.lfds-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lfds-card__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #b9b19a;
}

.lfds-card__image .lfds-badge {
	position: absolute;
	top: 8px;
	left: 8px;
}

.lfds-card__body {
	padding: 12px 14px;
}

.lfds-card__title {
	font-size: 1rem;
	margin: 0 0 4px;
	color: var(--lfds-green);
}

.lfds-card__hardiness {
	font-size: 13px;
	color: #6b6b5f;
	margin: 0;
}

.lfds-pagination {
	margin-top: 30px;
	text-align: center;
}

.lfds-no-results {
	text-align: center;
	padding: 40px 0;
	color: #6b6b5f;
}

/* ---------- Grille "page d'accueil" (shortcode [lfds_disponibles]) ---------- */

.lfds-home-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 26px;
	margin: 30px 0;
}

/*
 * Carte retournable : l'élément .lfds-home-card définit la perspective
 * 3D et sa hauteur. Son enfant direct .lfds-home-card__inner porte la
 * rotation ; les deux faces sont positionnées en superposition absolue
 * l'une sur l'autre, chacune masquée quand elle se retrouve "dos à
 * l'écran" (backface-visibility).
 *
 * IMPORTANT — hauteur fixe plutôt qu'aspect-ratio :
 * Avec `aspect-ratio: 3/4`, la hauteur de la carte est calculée à partir
 * de SA PROPRE largeur, laquelle dépend du nombre de colonnes de la
 * grille. Sur un écran large, la grille affiche 5-6 colonnes donc des
 * cartes étroites, ce qui donnait une hauteur trop faible pour un titre
 * sur 2 lignes + l'accroche + l'indice de survol → texte découpé net,
 * uniquement visible en desktop (sur mobile, 1-2 colonnes = cartes plus
 * larges = aspect-ratio donnait une hauteur suffisante par hasard).
 * Une hauteur fixe en pixels règle le problème pour toutes les largeurs
 * d'écran, en combinaison avec le "line-clamp" du titre ci-dessous qui
 * garantit qu'aucun texte ne peut jamais dépasser de la carte.
 *
 * Style volontairement épuré : pas d'ombre par défaut, pas de bordure,
 * pas de texte souligné (la carte n'est plus un <a> — seul le bouton
 * "Voir la fiche complète" au dos est un vrai lien).
 */

.lfds-home-card {
	position: relative;
	height: 380px;
	perspective: 1400px;
	cursor: pointer;
	outline: none;
}

.lfds-home-card:focus-visible .lfds-home-card__inner {
	box-shadow: 0 0 0 2px var(--lfds-orange);
	border-radius: 14px;
}

.lfds-home-card__inner {
	position: absolute;
	inset: 0;
	transition: transform 0.55s cubic-bezier(0.4, 0.15, 0.2, 1);
	transform-style: preserve-3d;
}

.lfds-home-card.is-flipped .lfds-home-card__inner {
	transform: rotateY(180deg);
}

/*
 * Renfort explicite, en plus de backface-visibility ci-dessous :
 * sur Safari mobile en particulier, backface-visibility:hidden peut ne
 * pas masquer correctement la face "dos à l'écran" une fois combiné à
 * la 3D (perspective + preserve-3d) — le contenu de la face avant
 * (ruban "Coup de cœur", etc.) restait visible, rendu en miroir, par-
 * dessus la face arrière une fois la carte retournée. On pilote donc
 * la visibilité "à la main" via la classe .is-flipped posée par
 * front.js, ce qui ne dépend d'aucun comportement 3D du navigateur :
 * une seule face existe visuellement à la fois, point.
 */
.lfds-home-card.is-flipped .lfds-home-card__face--front {
	visibility: hidden;
}

.lfds-home-card:not(.is-flipped) .lfds-home-card__face--back {
	visibility: hidden;
}

/*
 * .lfds-home-card__face porte UNIQUEMENT le positionnement et le
 * backface-visibility. Aucun overflow/border-radius ici : c'est la
 * cause du bug observé (le ruban "Coup de cœur" et le titre de la face
 * avant qui "transparaissaient" au dos pendant/après la rotation, sur
 * mobile comme sur desktop). Chrome et Safari gèrent mal la combinaison
 * overflow:hidden + border-radius + backface-visibility:hidden sur un
 * seul et même élément : dans certains contextes (notamment avec un
 * parent en perspective 3D), le navigateur cesse d'appliquer le masquage
 * de la face arrière et l'ancien contenu reste visible "par transparence".
 * Le correctif consiste à déplacer overflow:hidden et border-radius sur
 * un enfant dédié (.lfds-home-card__clip), pendant que .lfds-home-card__face
 * garde le backface-visibility "propre", sans autre déclaration en conflit.
 */

.lfds-home-card__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.lfds-home-card__clip {
	height: 100%;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lfds-home-card:not(.is-flipped):hover .lfds-home-card__clip {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.lfds-home-card__face--back {
	transform: rotateY(180deg);
}

.lfds-home-card__clip--back {
	background: linear-gradient(160deg, #16301f 0%, #1f3d2b 100%);
	color: #f4f1ea;
	padding: 24px 22px;
	justify-content: center;
}

/* --- Face avant --- */

.lfds-home-card__image {
	position: relative;
	flex: 0 0 56%;
	background: var(--lfds-cream);
}

.lfds-home-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lfds-home-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #b9b19a;
}

.lfds-home-card__ribbons {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.lfds-home-card__ribbon {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(255, 255, 255, 0.94);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 20px;
	line-height: 1.4;
}

.lfds-home-card__ribbon--dispo {
	color: #2f6b3a;
	background: rgba(255, 255, 255, 0.94);
}

.lfds-home-card__ribbon--dispo svg {
	flex: none;
}

.lfds-home-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/*
 * Titre & description : le -webkit-line-clamp permet une troncature
 * propre avec "…", mais posé tel quel sur un enfant direct d'un
 * conteneur flex (.lfds-home-card__body), certains moteurs (Safari en
 * particulier) calculent une hauteur de 0 pour cet élément — le texte
 * existe bien dans le DOM mais devient invisible. C'est ce qui causait
 * la disparition du nom de variété sous l'image. Le correctif : on fixe
 * une min-height correspondant exactement à la hauteur de N lignes, qui
 * force le navigateur à réserver l'espace même si son calcul de
 * line-clamp échoue. Bénéfice secondaire : toutes les cartes gardent
 * une hauteur de titre/description identique, qu'il y ait 1 ou 2 lignes
 * de texte — la grille reste bien alignée visuellement.
 */

.lfds-home-card__title {
	font-size: 1rem;
	line-height: 1.3;
	margin: 0 0 6px;
	min-height: 2.6em;
	color: var(--lfds-green);
	text-decoration: none;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lfds-home-card__desc {
	font-size: 13px;
	line-height: 1.45;
	color: #55544a;
	margin: 0 0 8px;
	min-height: 2.9em;
	flex: 1;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lfds-home-card__hint {
	font-size: 11px;
	color: #9b9686;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: auto;
}

/* --- Face arrière --- */

/*
 * Le titre du verso doit rester blanc quoi qu'il arrive (fond vert
 * foncé). On force une spécificité plus élevée que la règle générale
 * .lfds-home-card__title (verte, prévue pour le fond blanc du recto) en
 * ciblant via le conteneur parent plutôt qu'une simple classe modifieur,
 * et on verrouille avec !important : certains thèmes (Astra inclus)
 * appliquent leurs propres styles de couleur aux titres <h3> avec une
 * spécificité qu'on ne maîtrise pas depuis le plugin, d'où le vert sur
 * vert illisible observé. Ce !important est volontaire et strictement
 * local à ce composant.
 */
.lfds-home-card__face--back .lfds-home-card__title,
.lfds-home-card__title--back {
	color: #fff !important;
	margin: 0 0 8px;
	min-height: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lfds-home-card__tagline-back {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(244, 241, 234, 0.85);
	margin: 0 0 16px;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lfds-home-card__latin {
	font-size: 12px;
	color: rgba(244, 241, 234, 0.65);
	margin: 0 0 14px;
}

.lfds-home-card__infos {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	font-size: 13px;
	line-height: 1.4;
}

.lfds-home-card__infos li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(244, 241, 234, 0.14);
}

.lfds-home-card__infos li:last-child {
	border-bottom: none;
}

.lfds-home-card__info-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	white-space: nowrap;
	color: rgba(244, 241, 234, 0.65);
}

.lfds-home-card__info-label svg {
	flex: none;
	opacity: 0.9;
}

.lfds-home-card__info-value {
	text-align: right;
	font-weight: 600;
	color: #fff;
}

.lfds-home-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
}

.lfds-home-card__link svg {
	transform: rotate(180deg);
}

.lfds-home-card__link:hover {
	border-bottom-color: #fff;
}

/* --- Carte "voir plus" (non retournable) --- */

.lfds-home-card--more {
	height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	padding: 24px 18px;
	background: var(--lfds-cream);
	border: 1px dashed var(--lfds-border);
	border-radius: 14px;
	cursor: default;
}

.lfds-home-card--more h3 {
	font-size: 1rem;
	color: var(--lfds-green);
	margin: 10px 0 6px;
}

.lfds-home-card--more p {
	font-size: 13px;
	color: #6b6b5f;
	margin: 0 0 14px;
}

.lfds-home-card__more-icon {
	color: var(--lfds-green);
}

@media (max-width: 480px) {

	.lfds-home-card,
	.lfds-home-card--more {
		height: 400px;
	}

}