/*
 Theme Name:   Elizabeth Agasse
 Theme URI:    https://elizabethagasse.fr/
 Description:  Thème enfant GeneratePress – site vitrine des bijoux d'Elizabeth Agasse.
 Author:       Elizabeth Agasse
 Template:     generatepress
 Version:      1.2.0
 Text Domain:  ea-child
*/

/*
 * Apparence des gabarits du thème (en-tête, catalogue, fiche bijou, formulaire).
 * Polices et mesures : css/base.css. Couleurs et tailles de texte : Apparence › Personnaliser.
 * Sections des pages, bandeau et pied de page : styles globaux GenerateBlocks (GenerateBlocks › Styles globaux).
 */

/* ---------- Boutons (blocs Bouton, formulaire) ----------
 * Par défaut : contour fin, comme les boutons « secondaires » du site d'origine. */
a.wp-block-button__link:not(.has-background),
.wp-element-button,
.wpcf7 .wpcf7-submit,
.ea-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 49px;
	padding: 0 31.5px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ea-noir);
	box-shadow: inset 0 0 0 1px currentColor;
	font-size: 15.75px;
	line-height: 1.2;
	letter-spacing: 1.05px;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.1s ease;
}

a.wp-block-button__link:not(.has-background):hover,
.wp-element-button:hover,
.ea-button:hover {
	background: transparent;
	color: var(--ea-noir);
	box-shadow: inset 0 0 0 2px currentColor;
}

/* Bouton du formulaire : plein, ardoise. */
.wpcf7 .wpcf7-submit { background: var(--ea-ardoise); color: #fff; box-shadow: none; }
.wpcf7 .wpcf7-submit:hover { background: var(--ea-ardoise); color: #fff; box-shadow: 0 0 0 2px var(--ea-ardoise); }

/* ---------- En-tête : logo, loupe, menu ---------- */
.ea-entete {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--ea-trait);
	transition: transform 0.3s ease;
}

.admin-bar .ea-entete { top: var(--wp-admin--admin-bar--height, 32px); }
.ea-entete.is-cache { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px))); }

.site-header .inside-header {
	position: relative;
	max-width: var(--ea-page);
	padding: 27px var(--ea-marge) 0;
}

.site-logo img, .custom-logo { width: 300px; max-width: 60vw; height: auto; }

/* Loupe à gauche du logo (sélecteur précis : GeneratePress ajoute une marge aux éléments de l'en-tête). */
.header-aligned-center .site-header .inside-header > .ea-recherche {
	position: absolute;
	top: 27px;
	left: var(--ea-marge);
	z-index: 2;
	margin: 0;
	text-align: left;
}

.ea-recherche summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: 17px;
	margin-left: -12px;
	color: var(--ea-titre);
	list-style: none;
	cursor: pointer;
}

.ea-recherche summary::-webkit-details-marker { display: none; }
.ea-recherche summary:hover svg { transform: scale(1.07); }

.ea-recherche__panneau {
	position: absolute;
	top: 100%;
	left: 0;
	width: min(420px, calc(100vw - 2 * var(--ea-marge)));
	padding: 12px;
	background: #fff;
	border: 1px solid var(--ea-titre);
}

.ea-recherche__panneau .search-form { display: flex; gap: 8px; }
.ea-recherche__panneau .search-field { flex: 1; min-width: 0; }
.ea-recherche__panneau .search-submit,
.search-form .search-submit { background: var(--ea-ardoise); color: #fff; }
.ea-recherche__panneau .search-submit:hover,
.search-form .search-submit:hover { background: var(--ea-titre); color: #fff; }

/* Menu principal */
.main-navigation { background: transparent; }
.main-navigation .inside-navigation { max-width: var(--ea-page); padding: 19px var(--ea-marge) 12px; }

.main-navigation .main-nav ul li a {
	padding: 0 12.6px;
	line-height: 44px;
	font-size: 14.7px;
	letter-spacing: 0.63px;
	color: var(--ea-texte);
}

.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a { background: transparent; }

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.sfHover > a { color: var(--ea-titre); text-decoration: underline; text-underline-offset: 0.3em; }

.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a,
.main-navigation .main-nav > ul > li.current-menu-parent > a {
	color: var(--ea-titre);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.main-navigation .main-nav ul li.menu-item-has-children > a { padding-right: 0; }
.main-navigation .main-nav ul li.menu-item-has-children > a .dropdown-menu-toggle { padding: 0 12.6px 0 6px; }

/* Sous-menus : fond blanc, filet foncé, texte lisible */
.main-navigation .main-nav ul ul {
	width: 210px;
	padding: 10.5px 0;
	background: #fff;
	border: 1px solid var(--ea-titre);
	box-shadow: none;
}

.main-navigation .main-nav ul ul li a,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a {
	padding: 8.4px 21px;
	line-height: 1.3;
	font-size: 14.7px;
	color: var(--ea-texte);
	background: transparent;
}

.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
	color: var(--ea-titre);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Mobile : une seule ligne comme sur le site d'origine (menu à gauche, logo au centre, loupe à droite). */
@media (max-width: 768px) {
	.site-header .inside-header { padding: 12px 64px; }
	.site-logo img, .custom-logo { width: 135px; }
	.header-aligned-center .site-header .inside-header > .ea-recherche { top: 12px; right: 4px; left: auto; }
	.ea-recherche summary { margin: 0; }
	.ea-recherche__panneau { right: 0; left: auto; }

	/* Le bouton menu se place par rapport au bloc d'en-tête, pas à la barre de menu. */
	.main-navigation,
	.main-navigation .inside-navigation { position: static; padding: 0; }
	.main-navigation .menu-toggle {
		position: absolute;
		top: 12px;
		left: 4px;
		width: 44px;
		height: 44px;
		padding: 0;
		line-height: 44px;
		color: var(--ea-titre);
		background: transparent;
	}

	.main-navigation .menu-toggle .mobile-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.main-navigation .menu-toggle .gp-icon svg { width: 20px; height: 20px; }
	.main-navigation.toggled .main-nav { padding: 8px 0 16px; border-top: 1px solid var(--ea-trait); }
	.main-navigation.toggled .main-nav ul li a { padding: 0 16px; font-size: 16.8px; text-align: left; }
	.main-navigation.toggled .main-nav ul ul { width: 100%; border: 0; padding: 0 0 0 16px; }
	.main-navigation.toggled .main-nav ul ul li a { padding: 6px 16px; }
}

/* ---------- Mise en page générale ---------- */
.site-content .content-area { width: 100%; }

.one-container .site-content,
.separate-containers .inside-article {
	padding: 26px var(--ea-marge) 52px;
}

.grid-container { max-width: var(--ea-page); }

/* Pages de texte (À propos, Contact, Guide des tailles…) : colonne de lecture étroite, comme sur Dawn. */
body.page:not(.full-width-content) .inside-article { max-width: 762px; margin-left: auto; margin-right: auto; }
.page .entry-header { margin-bottom: 26px; }
.page .entry-title { font-size: var(--ea-titre-section); }
.entry-content p { margin-bottom: 1.2em; }
.wp-block-table td, .wp-block-table th { padding: 0.4em 1em; border-color: var(--ea-trait); }

/* Pages construites avec l'éditeur : sections pleine largeur. */
.full-width-content .site-content,
.full-width-content .inside-article { padding: 0; }
.full-width-content .container.grid-container { max-width: none; }
.full-width-content .entry-content > .alignfull { margin-left: 0; margin-right: 0; }
.full-width-content .entry-content { margin-top: 0; }

/* ---------- Diaporama d'accueil : fondu entre les diapositives (mise en forme : styles globaux ea-diapo…) ---------- */
.ea-diaporama.is-ready > .ea-diapo { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.ea-diaporama.is-ready > .ea-diapo:first-child { position: relative; }
.ea-diaporama.is-ready > .ea-diapo.is-active { opacity: 1; z-index: 1; }

/* Commandes sous les photos : précédent, points, suivant, pause */
.ea-diaporama__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	color: var(--ea-titre);
}

.ea-diaporama__nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ea-diaporama__fleche,
.ea-diaporama__pause { width: 44px; opacity: 0.75; }
.ea-diaporama__fleche:hover,
.ea-diaporama__pause:hover { opacity: 1; }
.ea-diaporama__fleche svg { width: 10px; height: 6px; }
.ea-diaporama__fleche--prec svg { transform: rotate(90deg); }
.ea-diaporama__fleche--suiv svg { transform: rotate(-90deg); }
.ea-diaporama__pause svg { width: 12px; height: 12px; }

.ea-diaporama__point { width: 32px; }
.ea-diaporama__point span {
	display: block;
	width: 10.5px;
	height: 10.5px;
	border: 1px solid rgba(45, 37, 37, 0.5);
	border-radius: 50%;
}

.ea-diaporama__point[aria-current="true"] span { background: var(--ea-titre); border-color: var(--ea-titre); }

/* ---------- Grilles de bijoux ---------- */
.ea-grid {
	display: grid;
	gap: 32px 4px;
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
}

@media (min-width: 750px) {
	.ea-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.ea-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 990px) {
	.ea-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.ea-card { margin: 0; text-align: center; }
.ea-card__link { display: block; color: inherit; text-decoration: none; }

.ea-card__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--ea-sable);
}

.ea-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.4s ease, transform 0.6s ease;
}

.ea-card__img--hover { opacity: 0; }

@media (hover: hover) {
	.ea-card__link:hover .ea-card__img--hover { opacity: 1; }
	.ea-card__link:hover .ea-card__img { transform: scale(1.03); }
}

.ea-card__title {
	margin: 17px 0 0;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.6px;
	color: var(--ea-titre);
}

.ea-card__link:hover .ea-card__title { text-decoration: underline; text-underline-offset: 0.3em; }

/* Collections de l'accueil : photos carrées, titre avec flèche */
.ea-collections { row-gap: 4px; }
.ea-card--collection .ea-card__title { margin: 0; padding: 17px 0 18px; font-size: 18px; }
.ea-card--collection .ea-card__title span { display: inline-block; margin-left: 4px; transition: transform 0.2s ease; }
.ea-card--collection .ea-card__link:hover .ea-card__title span { transform: translateX(4px); }
@media (max-width: 749px) { .ea-collections { grid-template-columns: 1fr; } }

/* ---------- Pages catalogue (tous les bijoux, types, collections) ---------- */
.ea-archive-header h1 { margin: 0 0 26px; }
.ea-archive-header .ea-archive-description { max-width: 762px; margin-top: -10px; margin-bottom: 26px; }

.ea-filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 21px;
	padding-top: 10.5px;
	font-size: 14.7px;
	letter-spacing: 0.63px;
}

.ea-filtres__groupe { display: flex; align-items: center; gap: 21px; }
.ea-filtres__label { color: var(--ea-texte); }

.ea-filtres__menu { position: relative; }

.ea-filtres__menu summary {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ea-texte);
	list-style: none;
	cursor: pointer;
}

.ea-filtres__menu summary::-webkit-details-marker { display: none; }
.ea-filtres__menu summary:hover { color: var(--ea-titre); text-decoration: underline; text-underline-offset: 0.3em; }
.ea-filtres__menu summary svg { width: 10px; height: 6px; transition: transform 0.15s ease; }
.ea-filtres__menu[open] summary svg { transform: rotate(180deg); }

.ea-filtres__liste {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 10;
	min-width: 220px;
	margin: 0;
	padding: 10.5px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ea-titre);
}

.ea-filtres__liste a { display: block; padding: 6px 21px; color: var(--ea-texte); text-decoration: none; }
.ea-filtres__liste a:hover,
.ea-filtres__liste a[aria-current="page"] { color: var(--ea-titre); text-decoration: underline; text-underline-offset: 0.3em; }

.ea-filtres__actif { color: var(--ea-titre); }
.ea-filtres__compte { color: var(--ea-texte); }

.search .ea-similaires { margin-top: 2em; }
.ea-resultats-pages { margin: 2em 0 0 1.2em; }
.search-results .search-form,
.search-no-results .search-form { display: flex; gap: 8px; max-width: 500px; margin-bottom: 32px; }

/* ---------- Fiche bijou ---------- */
.ea-bijou {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 750px) {
	.ea-bijou { grid-template-columns: 45% 1fr; gap: 0; }
	.ea-bijou__infos { padding-left: 52.5px; }
}

.ea-galerie__principale {
	aspect-ratio: 1;
	margin: 0;
	background: var(--ea-sable);
}

.ea-galerie__principale img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ea-galerie__vignettes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.ea-galerie__vignettes button {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	aspect-ratio: 1;
}

.ea-galerie__vignettes button[aria-current="true"] { box-shadow: 0 0 0 1px var(--ea-titre); }
.ea-galerie__vignettes img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ea-bijou__infos { position: sticky; top: 24px; }
.ea-bijou__surtitre a { color: var(--ea-texte); text-decoration: none; }
.ea-bijou__titre { margin: 0 0 26px; font-size: var(--ea-titre-section); }
.ea-bijou__description p,
.ea-bijou__description > :last-child { margin: 0 0 16.8px; }
.ea-bijou__lien { margin-top: 1em; font-size: 14.7px; }
.ea-bijou__lien a { color: var(--ea-texte); }

/* « Vous aimeriez aussi » : bande sable sur toute la largeur de l'écran (fond étendu sans élargir la page). */
.ea-similaires--bande {
	margin: 52px 0 -52px;
	padding: 36px 0 52px;
	background: var(--ea-sable);
	box-shadow: 0 0 0 100vmax var(--ea-sable);
	clip-path: inset(0 -100vmax);
}

.ea-similaires h2 { margin: 0 0 31.5px; }

/* ---------- Formulaire de contact (libellés dans les champs, comme sur Dawn) ---------- */
.wpcf7 .ea-form-ligne { display: grid; gap: 0 21px; }
@media (min-width: 750px) { .wpcf7 .ea-form-ligne { grid-template-columns: 1fr 1fr; } }

.wpcf7 .ea-champ { position: relative; margin-bottom: 22px; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	height: 47px;
	padding: 15.75px;
	border: 0;
	border-radius: 0;
	box-shadow: 0 0 0 1px var(--ea-champ);
	background: #fff;
	color: var(--ea-titre);
	font-size: 16.8px;
	letter-spacing: 0.42px;
	transition: box-shadow 0.1s ease;
}

.wpcf7 textarea { height: 105px; min-height: 105px; resize: vertical; }

.wpcf7 input:hover,
.wpcf7 textarea:hover { box-shadow: 0 0 0 2px var(--ea-champ); }

.wpcf7 input:focus,
.wpcf7 textarea:focus { outline: 0; box-shadow: 0 0 0 2px var(--ea-titre); }

.wpcf7 .ea-champ label {
	position: absolute;
	top: 11px;
	left: 16.75px;
	font-size: 16.8px;
	letter-spacing: 1.05px;
	color: var(--ea-texte);
	pointer-events: none;
	transition: top 0.1s ease, font-size 0.1s ease;
}

.wpcf7 .ea-champ:has(:focus, input:not(:placeholder-shown), textarea:not(:placeholder-shown)) label { top: 3px; font-size: 10.5px; }

.wpcf7 .ea-champ:has(:focus, input:not(:placeholder-shown)) input,
.wpcf7 .ea-champ:has(:focus, textarea:not(:placeholder-shown)) textarea { padding-top: 22px; padding-bottom: 8px; }

.wpcf7 ::placeholder { color: transparent; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; }
.wpcf7 form .wpcf7-response-output { margin: 21px 0 0; padding: 10px 16px; }
.wpcf7-spinner { vertical-align: middle; }