/*
Theme Name: E-Zapy — TaskHive Child
Theme URI: https://e-zapy.com
Description: Thème enfant de TaskHive aux couleurs E-Zapy, la marketplace des freelances de la zone Antilles-Caraïbes et de l'Océan Indien. Compatible HivePress 1.7.x, HivePress Marketplace 1.4 et WooCommerce 11.x. Inclut les surcharges de templates HivePress (cartes de services, profil freelance) et un modèle de page d'accueil.
Author: ZAPYLAND
Author URI: https://e-zapy.com
Template: taskhive
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ezapy-taskhive-child
Tags: marketplace, freelance, hivepress, directory
*/

/* ==========================================================================
   1. VARIABLES — la charte E-Zapy en un seul endroit
   Modifie uniquement ce bloc pour changer toutes les couleurs du site.
   ========================================================================== */

:root {
	/* Teal E-Zapy */
	--ezapy-teal-dark: #0e7c74;
	--ezapy-teal: #17a398;
	--ezapy-teal-light: #2fbfa8;
	--ezapy-teal-050: rgba(23, 163, 152, 0.08);
	--ezapy-teal-100: rgba(23, 163, 152, 0.16);

	/* Neutres */
	--ezapy-ink: #23292e;
	--ezapy-ink-soft: #59636b;
	--ezapy-line: #e4e9ec;
	--ezapy-surface: #f7f9fa;
	--ezapy-white: #ffffff;

	/* Accents */
	--ezapy-cream: #fff6e2;
	--ezapy-amber: #f5a623;
	--ezapy-coral: #e2574c;
	--ezapy-success: #1f9d55;

	/* Rayons et ombres */
	--ezapy-radius: 14px;
	--ezapy-radius-sm: 10px;
	--ezapy-radius-pill: 999px;
	--ezapy-shadow: 0 2px 4px rgba(35, 41, 46, 0.04), 0 12px 28px rgba(35, 41, 46, 0.07);
	--ezapy-shadow-hover: 0 6px 12px rgba(35, 41, 46, 0.07), 0 20px 44px rgba(35, 41, 46, 0.11);

	/* HivePress lit ces variables : on les aligne sur la charte */
	--hp-color-primary: var(--ezapy-teal);
	--hp-color-secondary: var(--ezapy-ink);
	--hp-color-tertiary: var(--ezapy-ink-soft);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
	color: var(--ezapy-ink);
	background-color: var(--ezapy-white);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--ezapy-teal-dark);
}

a:hover,
a:focus {
	color: var(--ezapy-teal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--ezapy-ink);
	letter-spacing: -0.015em;
}

/* Accessibilité : ne jamais supprimer le focus visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.hp-form__field:focus-visible {
	outline: 2px solid var(--ezapy-teal);
	outline-offset: 2px;
}

/* ==========================================================================
   3. BOUTONS
   ========================================================================== */

.hp-form__button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
	background-color: var(--ezapy-teal);
	border-color: var(--ezapy-teal);
	color: var(--ezapy-white);
	border-radius: var(--ezapy-radius-pill);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.hp-form__button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover {
	background-color: var(--ezapy-teal-dark);
	border-color: var(--ezapy-teal-dark);
	color: var(--ezapy-white);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(14, 124, 116, 0.24);
}

/* Bouton secondaire — contour teal */
.hp-form__button--secondary,
.woocommerce a.button.alt--outline {
	background-color: transparent;
	color: var(--ezapy-teal-dark);
	border: 1px solid var(--ezapy-teal);
}

.hp-form__button--secondary:hover {
	background-color: var(--ezapy-teal-050);
	color: var(--ezapy-teal-dark);
}

/* ==========================================================================
   4. CARTES DE SERVICES (HivePress listings)
   ========================================================================== */

.hp-listing--view-block {
	background-color: var(--ezapy-white);
	border: 1px solid var(--ezapy-line);
	border-radius: var(--ezapy-radius);
	box-shadow: var(--ezapy-shadow);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.hp-listing--view-block:hover {
	box-shadow: var(--ezapy-shadow-hover);
	border-color: rgba(23, 163, 152, 0.35);
	transform: translateY(-2px);
}

.hp-listing--view-block .hp-listing__title a {
	color: var(--ezapy-ink);
	font-weight: 650;
}

.hp-listing--view-block .hp-listing__title a:hover {
	color: var(--ezapy-teal-dark);
}

/* Prix : la couleur de marque, jamais du rouge d'e-commerce. */
.hp-listing__price,
.hp-listing__price .amount,
.hp-listing--view-block .price,
.hp-listing--view-block .price .amount {
	color: var(--ezapy-teal-dark);
	font-weight: 700;
}

.hp-listing__price del,
.hp-listing--view-block .price del {
	color: var(--ezapy-ink-soft);
	font-weight: 400;
}

/* Badge « à partir de » injecté par le thème enfant */
.ezapy-price-prefix {
	display: block;
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ezapy-ink-soft);
}

/* Badges vérifié / mis en avant */
.hp-listing__verified-badge,
.hp-vendor__verified-badge {
	color: var(--ezapy-teal);
}

.hp-listing__featured-badge {
	background-color: var(--ezapy-amber);
	color: var(--ezapy-ink);
	border-radius: var(--ezapy-radius-pill);
}

/* ==========================================================================
   5. CHIPS TERRITOIRE — spécifique E-Zapy
   ========================================================================== */

.ezapy-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.22em 0.7em;
	border-radius: var(--ezapy-radius-pill);
	font-size: 0.74rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	background-color: var(--ezapy-teal-050);
	color: var(--ezapy-teal-dark);
	border: 1px solid var(--ezapy-teal-100);
}

.ezapy-chip + .ezapy-chip {
	margin-left: 0.35em;
}

.ezapy-chip--cream {
	background-color: var(--ezapy-cream);
	color: #8a6a12;
	border-color: rgba(245, 166, 35, 0.35);
}

.ezapy-chip--siret {
	background-color: rgba(31, 157, 85, 0.1);
	color: #14713c;
	border-color: rgba(31, 157, 85, 0.3);
}

.ezapy-chip__icon {
	font-size: 0.85em;
}

.ezapy-territories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	margin: 0.5em 0 0;
}

/* ==========================================================================
   6. PROFIL FREELANCE (HivePress vendor)
   ========================================================================== */

.hp-vendor--view-page .hp-vendor__image img,
.hp-vendor--view-block .hp-vendor__image img {
	border-radius: 50%;
	border: 3px solid var(--ezapy-white);
	box-shadow: 0 0 0 2px var(--ezapy-teal-100);
}

.hp-vendor--view-page .hp-vendor__name {
	font-size: 1.6rem;
	font-weight: 700;
}

.ezapy-vendor-about__title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ezapy-ink-soft);
	margin: 0 0 0.6em;
}

.ezapy-vendor-about__title::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--ezapy-line);
}

.hp-vendor__registered-date {
	color: var(--ezapy-ink-soft);
}

/* Encart portfolio (galerie multimédia du freelance) */
.ezapy-portfolio {
	margin: 1.5rem 0;
}

.ezapy-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.75rem;
}

.ezapy-portfolio__item {
	position: relative;
	border-radius: var(--ezapy-radius-sm);
	overflow: hidden;
	background-color: var(--ezapy-surface);
	aspect-ratio: 4 / 3;
}

.ezapy-portfolio__item img,
.ezapy-portfolio__item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   7. SECTIONS ET TITRES
   ========================================================================== */

.hp-section__title {
	position: relative;
	font-weight: 700;
}

.ezapy-section-title {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-weight: 700;
}

.ezapy-section-title::before {
	content: "";
	width: 6px;
	height: 1.1em;
	flex: none;
	border-radius: var(--ezapy-radius-pill);
	background: linear-gradient(180deg, var(--ezapy-teal-light), var(--ezapy-teal-dark));
}

/* ==========================================================================
   8. PAGE D'ACCUEIL — modèle ezapy-home.php
   ========================================================================== */

.ezapy-hero {
	position: relative;
	padding: 4.5rem 1.25rem 5rem;
	background: linear-gradient(135deg, var(--ezapy-teal-dark) 0%, var(--ezapy-teal) 55%, var(--ezapy-teal-light) 100%);
	color: var(--ezapy-white);
	text-align: center;
	overflow: hidden;
}

.ezapy-hero::after {
	content: "";
	position: absolute;
	inset: auto -10% -55% -10%;
	height: 70%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18), transparent 65%);
	pointer-events: none;
}

.ezapy-hero__inner {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
}

.ezapy-hero__eyebrow {
	display: inline-block;
	padding: 0.3em 0.9em;
	margin-bottom: 1.1rem;
	border-radius: var(--ezapy-radius-pill);
	background-color: rgba(255, 255, 255, 0.16);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.ezapy-hero__title {
	color: var(--ezapy-white);
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	line-height: 1.12;
	margin: 0 0 0.9rem;
}

.ezapy-hero__subtitle {
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.6;
	margin: 0 auto 2rem;
	max-width: 620px;
	color: rgba(255, 255, 255, 0.92);
}

.ezapy-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.ezapy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8em 1.6em;
	border-radius: var(--ezapy-radius-pill);
	font-weight: 650;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.ezapy-btn--light {
	background-color: var(--ezapy-white);
	color: var(--ezapy-teal-dark);
}

.ezapy-btn--light:hover {
	color: var(--ezapy-teal-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.ezapy-btn--ghost {
	background-color: transparent;
	color: var(--ezapy-white);
	border: 1px solid rgba(255, 255, 255, 0.65);
}

.ezapy-btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--ezapy-white);
}

.ezapy-home-section {
	padding: 3.25rem 1.25rem;
}

.ezapy-home-section--tinted {
	background-color: var(--ezapy-surface);
}

.ezapy-home-section__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ezapy-home-section__head {
	margin-bottom: 1.75rem;
}

.ezapy-home-section__lead {
	color: var(--ezapy-ink-soft);
	margin: 0.4rem 0 0;
	max-width: 640px;
}

/* Bandeau de réassurance */
.ezapy-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.ezapy-trust__item {
	background-color: var(--ezapy-white);
	border: 1px solid var(--ezapy-line);
	border-radius: var(--ezapy-radius);
	padding: 1.4rem;
}

.ezapy-trust__title {
	font-weight: 700;
	margin: 0 0 0.35rem;
}

.ezapy-trust__text {
	color: var(--ezapy-ink-soft);
	font-size: 0.94rem;
	margin: 0;
	line-height: 1.6;
}

/* Grille des territoires */
.ezapy-territory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0.85rem;
}

.ezapy-territory-card {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1.1rem 1.2rem;
	border-radius: var(--ezapy-radius);
	background-color: var(--ezapy-white);
	border: 1px solid var(--ezapy-line);
	color: var(--ezapy-ink);
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ezapy-territory-card:hover {
	color: var(--ezapy-teal-dark);
	border-color: rgba(23, 163, 152, 0.45);
	box-shadow: var(--ezapy-shadow);
	transform: translateY(-2px);
}

.ezapy-territory-card__name {
	font-weight: 650;
}

.ezapy-territory-card__count {
	font-size: 0.82rem;
	color: var(--ezapy-ink-soft);
}

/* ==========================================================================
   9. WOOCOMMERCE — commandes, remboursements, notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--ezapy-teal);
	background-color: var(--ezapy-teal-050);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--ezapy-teal);
}

.woocommerce-error {
	border-top-color: var(--ezapy-coral);
	background-color: rgba(226, 87, 76, 0.07);
}

.woocommerce-error::before {
	color: var(--ezapy-coral);
}

/* Statuts de commande lisibles en un coup d'œil */
.woocommerce-orders-table__cell-order-status mark,
.woocommerce-order-overview__status mark {
	background-color: var(--ezapy-cream);
	color: #8a6a12;
	padding: 0.15em 0.65em;
	border-radius: var(--ezapy-radius-pill);
	font-weight: 600;
}

/* Encart « demande de remboursement » (voir guide § remboursements) */
.ezapy-refund-box {
	background-color: var(--ezapy-cream);
	border: 1px solid rgba(245, 166, 35, 0.4);
	border-radius: var(--ezapy-radius);
	padding: 1.1rem 1.2rem;
	margin: 1.25rem 0;
}

.ezapy-refund-box__title {
	font-weight: 700;
	margin: 0 0 0.35rem;
	color: #8a6a12;
}

.ezapy-refund-box__text {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--ezapy-ink);
}

.ezapy-refund-box__meta {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	color: var(--ezapy-ink-soft);
}

.ezapy-refund-status {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: var(--ezapy-radius-pill);
	font-size: 0.78rem;
	font-weight: 600;
}

.ezapy-refund-status--demande {
	background-color: var(--ezapy-cream);
	color: #8a6a12;
}

.ezapy-refund-status--approuve {
	background-color: rgba(31, 157, 85, 0.12);
	color: #14713c;
}

.ezapy-refund-status--refuse {
	background-color: rgba(226, 87, 76, 0.12);
	color: #9c332a;
}

/* ==========================================================================
   10. AVIS (HivePress Reviews)
   ========================================================================== */

.hp-rating__stars,
.hp-review__rating .hp-rating__stars {
	color: var(--ezapy-amber);
}

.hp-review {
	border-bottom: 1px solid var(--ezapy-line);
}

/* Modale d'avis obligatoire : on masque la croix de fermeture.
   À n'activer que si tu appliques le snippet « avis obligatoire » du guide. */
body.ezapy-review-required .hp-modal--review-submit .hp-modal__close {
	display: none;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	.ezapy-hero {
		padding: 3rem 1rem 3.5rem;
	}

	.ezapy-home-section {
		padding: 2.25rem 1rem;
	}

	.ezapy-hero__actions .ezapy-btn {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   12. IMPRESSION (factures, bons de commande)
   ========================================================================== */

@media print {
	.ezapy-hero,
	.site-header,
	.site-footer,
	.hp-menu {
		display: none !important;
	}

	body {
		color: #000;
	}
}