/*
Theme Name: Saramani
Theme URI: https://saramanibydjeny.com
Author: Saramani by Djeny
Description: Thème éditorial de Saramani by Djeny — crème, prune et or, Playfair Display et Inter. Tout se modifie depuis WordPress (Apparence → Éditeur).
Requires at least: 6.6
Requires PHP: 7.4
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saramani
*/

/* En-tête collant */
.saramani-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.admin-bar .saramani-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .saramani-header {
		top: 46px;
	}
}

/* Pas d'espace entre l'en-tête, le contenu et le pied de page */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Étiquette (style de paragraphe « Étiquette ») */
.is-style-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-strong);
}

.has-primary-background-color .is-style-label,
.has-contrast-background-color .is-style-label,
.wp-block-cover .is-style-label,
.saramani-video-hero .is-style-label {
	color: var(--wp--preset--color--accent);
}

.is-style-label a {
	color: inherit;
}

/* Bouton contour */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--primary);
	padding: calc(1rem - 1px) calc(2rem - 1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link,
.saramani-video-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.saramani-video-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Cartes d'article */
.saramani-card .wp-block-post-featured-image {
	overflow: hidden;
	background: var(--wp--preset--color--muted);
	margin-bottom: var(--wp--preset--spacing--30);
}

.saramani-card .wp-block-post-featured-image img {
	transition: transform 0.7s ease;
}

.saramani-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

.saramani-card .wp-block-post-title {
	margin-top: 0.5rem;
}

/* Liste des catégories en pastilles */
.saramani-cats.wp-block-categories-list,
.saramani-cats .wp-block-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.saramani-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	padding: 0;
}

.saramani-cats li a {
	display: inline-block;
	padding: 0.6rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.saramani-cats li a:hover,
.saramani-cats li.current-cat a {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Contenu des articles (anciens articles WordPress compris) */
.wp-block-post-content a:not(.wp-element-button) {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 3px;
}

.wp-block-post-content a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--accent-strong);
}

.wp-block-post-content :where(ul, ol) {
	padding-left: 1.5em;
}

.wp-block-post-content li + li {
	margin-top: 0.4em;
}

.wp-block-post-content img {
	height: auto;
	max-width: 100%;
}

.wp-block-post-content :where(h2, h3, h4) {
	margin-top: 2.5rem;
}

/* Pied de page : les liens suivent la couleur du texte choisie dans l'éditeur */
.saramani-footer a {
	color: inherit;
}

.saramani-footer a:hover {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Accessibilité : focus visible */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-strong);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Couverture pleine largeur : le texte suit la grille du site (et pas le bord de l'écran) */
.wp-block-cover.alignfull.has-custom-content-position > .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	box-sizing: border-box;
}

/* Article sans image à la une : carré de couleur pour garder la grille alignée */
.saramani-card:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 1;
	margin-bottom: var(--wp--preset--spacing--30);
	background:
		linear-gradient(135deg, var(--wp--preset--color--muted), var(--wp--preset--color--secondary));
}

.saramani-cats {
	margin-top: var(--wp--preset--spacing--40);
}

/* Étiquette de catégorie posée sur l'image, comme sur le site Lovable */
.saramani-card {
	position: relative;
}

.saramani-card .wp-block-post-terms {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
	max-width: calc(100% - 2rem);
	padding: 0.3rem 0.55rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 0.625rem;
	line-height: 1.4;
}

.saramani-card .wp-block-post-terms a,
.saramani-card .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--base);
}

/* ---- Fidélité au site Lovable ---- */

/* Logo « Saramani. » */
.saramani-logo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
}

.saramani-logo a {
	color: var(--wp--preset--color--contrast);
}

/* Étiquette du hero sur fond doré */
.saramani-video-hero .is-style-label,
.wp-block-cover .is-style-label {
	display: inline-block;
	width: fit-content;
	padding: 0.3rem 0.5rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 0.625rem;
}

/* Bouton « Flèche ronde » */
.wp-block-button.is-style-arrow > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-arrow > .wp-block-button__link::before {
	content: "→";
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	letter-spacing: 0;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.saramani-video-hero .wp-block-button.is-style-arrow > .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-arrow > .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-arrow > .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--primary);
}

.saramani-video-hero .wp-block-button.is-style-arrow > .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-arrow > .wp-block-button__link:hover {
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-arrow > .wp-block-button__link:hover::before {
	background: currentColor;
}

.wp-block-button.is-style-arrow > .wp-block-button__link:hover::before {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.saramani-video-hero .wp-block-button.is-style-arrow > .wp-block-button__link:hover::before,
.wp-block-cover .wp-block-button.is-style-arrow > .wp-block-button__link:hover::before {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

/* Sections de l'accueil séparées par un trait fin */
.saramani-section {
	background: linear-gradient(var(--wp--preset--color--border), var(--wp--preset--color--border)) top center / min(100% - 3rem, var(--wp--style--global--wide-size)) 1px no-repeat;
}

/* Titre de section — trait — lien */
.saramani-section-head > .wp-block-heading {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 2rem;
	margin: 0;
}

.saramani-section-head > .wp-block-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	margin-inline-end: 2rem;
	background: var(--wp--preset--color--border);
}

.saramani-section-head > p {
	flex-shrink: 0;
	margin: 0;
}

.saramani-section-head > p a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 600px) {
	.saramani-section-head {
		flex-wrap: wrap !important;
	}

	.saramani-section-head > .wp-block-heading::after {
		display: none;
	}
}

/* Titres des cartes d'article : droits et gras, comme sur Lovable */
.saramani-card .wp-block-post-title {
	font-style: normal;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.25;
}

/* Vidéos : étiquette « YouTube » et titre en italique */
.saramani-videos .wp-element-caption {
	margin-top: 0.75rem;
	text-align: left;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-style: italic;
	font-weight: 900;
	color: var(--wp--preset--color--contrast);
}

.saramani-videos .wp-element-caption::before {
	content: "YouTube";
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-strong);
}

/* Pied de page : liens en texte */
.saramani-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 800;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.saramani-footer-links,
	.saramani-footer .has-text-align-right {
		justify-content: flex-start;
		text-align: left;
	}
}

/* Saramani'Book : collaborations, vignettes, mosaïque */
.saramani-book-item .saramani-book-cover {
	overflow: hidden;
	margin-bottom: 1rem;
	background: var(--wp--preset--color--muted);
}

.saramani-book-item .saramani-book-cover img {
	width: 100%;
	transition: transform 0.7s ease;
}

.saramani-book-item:hover .saramani-book-cover img {
	transform: scale(1.05);
}

.saramani-book-item .wp-block-heading {
	margin: 0 0 0.5rem;
}

.wp-block-gallery.saramani-thumbs {
	gap: 0.5rem !important;
}

.wp-block-gallery.saramani-thumbs > .wp-block-image {
	width: 3.5rem !important;
	height: 3.5rem;
	flex-grow: 0 !important;
}

.wp-block-gallery.saramani-thumbs > .wp-block-image img {
	height: 3.5rem !important;
	border-radius: 2px;
}

.wp-block-gallery.is-style-masonry {
	display: block !important;
	columns: 4 9.5rem;
	column-gap: 1rem;
}

.wp-block-gallery.is-style-masonry > .wp-block-image {
	display: block;
	width: 100% !important;
	margin: 0 0 1rem !important;
	break-inside: avoid;
}

.wp-block-gallery.is-style-masonry.is-cropped > .wp-block-image img,
.wp-block-gallery.is-style-masonry > .wp-block-image img {
	height: auto !important;
	aspect-ratio: auto;
	object-fit: initial;
	border-radius: 2px;
	transition: opacity 0.3s ease;
}

.wp-block-gallery.is-style-masonry > .wp-block-image img:hover {
	opacity: 0.9;
}

/* Étiquette soulignée d'un trait (« Rencontres passées ») */
.saramani-rule {
	padding-bottom: 1rem;
	margin-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Pas de trait juste sous la bannière d'accueil */
.saramani-video-hero + .saramani-section,
.wp-block-cover + .saramani-section {
	background: none;
}

/* Encadré à bordure fine */
.saramani-box {
	border: 1px solid var(--wp--preset--color--border);
}

/* ---- Page Contact ---- */
.saramani-contact-info .is-style-label {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: 0.25rem;
}

.saramani-contact-value {
	margin-top: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	overflow-wrap: anywhere;
}

.saramani-contact-value a,
.saramani-contact-socials a {
	color: var(--wp--preset--color--primary);
}

.saramani-contact-value a:hover,
.saramani-contact-socials a:hover {
	color: var(--wp--preset--color--accent-strong);
}

.saramani-contact-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 0.25rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.saramani-contact-signature {
	margin-top: var(--wp--preset--spacing--50);
	padding-left: 1rem;
	border-left: 2px solid var(--wp--preset--color--accent);
	font-style: italic;
}

.saramani-contact-form {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--secondary);
	border: 1px solid var(--wp--preset--color--border);
}

/* Formulaire WPForms aux couleurs du thème */
.saramani-contact-form .wpforms-container {
	margin: 0 !important;
}

.saramani-contact-form .wpforms-container .wpforms-field {
	padding: 0 0 1.5rem !important;
}

.saramani-contact-form .wpforms-container .wpforms-field-label {
	margin-bottom: 0.5rem !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--label) !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--contrast) !important;
}

.saramani-contact-form .wpforms-container .wpforms-required-label {
	color: var(--wp--preset--color--accent-strong) !important;
}

.saramani-contact-form .wpforms-container .wpforms-field-sublabel {
	margin-top: 0.35rem !important;
	font-size: 0.75rem !important;
	color: var(--wp--preset--color--muted-foreground) !important;
}

.saramani-contact-form .wpforms-container input[type="text"],
.saramani-contact-form .wpforms-container input[type="email"],
.saramani-contact-form .wpforms-container input[type="tel"],
.saramani-contact-form .wpforms-container input[type="url"],
.saramani-contact-form .wpforms-container select,
.saramani-contact-form .wpforms-container textarea {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 3rem;
	padding: 0.75rem 1rem !important;
	border: 1px solid #d9cbc1 !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--base) !important;
	box-shadow: none !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1rem !important;
	color: var(--wp--preset--color--contrast) !important;
	box-sizing: border-box !important;
}

.saramani-contact-form .wpforms-container textarea {
	min-height: 10rem !important;
	resize: vertical;
}

.saramani-contact-form .wpforms-container input:focus,
.saramani-contact-form .wpforms-container textarea:focus,
.saramani-contact-form .wpforms-container select:focus {
	border-color: var(--wp--preset--color--primary) !important;
	outline: 2px solid var(--wp--preset--color--accent-strong) !important;
	outline-offset: 1px;
}

.saramani-contact-form .wpforms-container .wpforms-submit-container {
	padding-top: 0.5rem !important;
}

.saramani-contact-form .wpforms-container button[type="submit"],
.saramani-contact-form .wpforms-container .wpforms-submit {
	padding: 1rem 2rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--label) !important;
	font-weight: 800 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.saramani-contact-form .wpforms-container button[type="submit"]:hover,
.saramani-contact-form .wpforms-container .wpforms-submit:hover {
	background: var(--wp--preset--color--contrast) !important;
}

.saramani-contact-form .wpforms-container label.wpforms-error,
.saramani-contact-form .wpforms-container em.wpforms-error {
	color: #b3261e !important;
	font-size: 0.8125rem !important;
}

.saramani-contact-form .wpforms-confirmation-container-full {
	border: 1px solid var(--wp--preset--color--border) !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.saramani-contact-form .wpforms-container .wpforms-field-row,
.saramani-contact-form .wpforms-container .wpforms-field-medium,
.saramani-contact-form .wpforms-container .wpforms-field-small {
	max-width: 100% !important;
}