/*
Theme Name:   ListingHive – Ourthe Échanges
Theme URI:    https://ourthsel.ourthechanges.be/
Description:  Thème enfant de ListingHive reprenant la ligne graphique d'Ourthe Échanges (header pétrole, titres Italiana, boutons taupe arrondis, footer sombre).
Author:       all2newmedia
Template:     listinghive
Version:      1.1.0
Text Domain:  listinghive-ourthe
*/

/* =========================================================
   1. VARIABLES — charte Ourthe Échanges
   ========================================================= */
:root {
	--oe-petrol:      #056571; /* fond du header            */
	--oe-teal:        #007d90; /* haut du dégradé hero      */
	--oe-taupe:       #b5a68f; /* boutons, surtitres, footer */
	--oe-taupe-dark:  #9c8c74; /* survol des boutons        */
	--oe-dark:        #201e1e; /* footer                    */
	--oe-text:        #666666; /* texte courant             */
	--oe-light:       #f6f4f0; /* fond clair (cartes, zones)*/

	--oe-font-title:  'Italiana', Helvetica, Arial, sans-serif;
	--oe-font-ui:     'Roboto', Helvetica, Arial, sans-serif;
	--oe-font-text:   'Open Sans', Helvetica, Arial, sans-serif;

	--oe-radius-btn:  22px;
	--oe-radius-card: 8px;
}

/* =========================================================
   2. TYPOGRAPHIE
   ========================================================= */
body {
	font-family: var(--oe-font-text);
	font-weight: 500;
	color: var(--oe-text);
	line-height: 1.7;
}

h1, h2, h3,
.hp-page__title,
.content-title {
	font-family: var(--oe-font-title);
	font-weight: 400;
	color: var(--oe-petrol);
	letter-spacing: .01em;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.2; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.25; }
h3 { font-size: 1.5rem; }
h1 strong, h2 strong { font-weight: 700; }

/* h4 = surtitre façon "GAL PAYS DE L'OURTHE" */
h4, h5, h6 {
	font-family: var(--oe-font-ui);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--oe-taupe);
}

/* Couleur "bleu vif" choisie dans l'éditeur → pétrole */
.has-vivid-cyan-blue-color,
.has-vivid-cyan-blue-color a { color: var(--oe-petrol) !important; }

a { color: var(--oe-petrol); }
a:hover { color: var(--oe-taupe-dark); }

/* =========================================================
   3. HEADER
   ========================================================= */
.site-header { background: var(--oe-petrol); }

.header-navbar {
	min-height: 92px;
	padding-top: 18px;
	padding-bottom: 18px;
}

/* Logo passé en blanc pour contraster sur le pétrole.
   Supprimer ces 2 lignes si une version blanche du logo est importée. */
.header-logo img,
.custom-logo { filter: brightness(0) invert(1); max-height: 52px; width: auto; }

/* Menu principal : capitales Roboto blanches */
.header-navbar__menu ul.menu > li > a,
.header-navbar__menu .hp-menu__item {
	font-family: var(--oe-font-ui);
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff !important;
	position: relative;
	padding-bottom: 6px;
}
.header-navbar__menu ul.menu { flex-wrap: nowrap; }
.header-navbar__menu ul.menu > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--oe-taupe);
	transform: scaleX(0);
	transition: transform .25s ease;
}
.header-navbar__menu ul.menu > li > a:hover::after,
.header-navbar__menu ul.menu > li.current_page_item > a::after,
.header-navbar__menu ul.menu > li.current-menu-item > a::after { transform: scaleX(1); }

.header-navbar__menu .hp-icon { color: var(--oe-taupe); }

/* Sous-menus */
.header-navbar__menu ul.menu ul {
	background: var(--oe-petrol);
	border: 0;
	border-radius: 0 0 var(--oe-radius-card) var(--oe-radius-card);
	box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.header-navbar__menu ul.menu ul a { color: #fff !important; text-transform: none; }

/* Burger mobile */
.header-navbar__burger > a,
.header-navbar__burger > a i { color: #fff !important; font-size: 22px; }
.header-navbar__burger > ul.menu { background: var(--oe-petrol); }
.header-navbar__burger > ul.menu a { color: #fff !important; }

/* =========================================================
   4. BOUTONS — pilule taupe, capitales Roboto
   ========================================================= */
.button,
.button--primary,
.button--secondary,
.button-primary,
.hp-form__button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
	font-family: var(--oe-font-ui) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #fff !important;
	background: var(--oe-taupe) !important;
	background-image: none !important;
	border: 2px solid var(--oe-taupe) !important;
	border-radius: var(--oe-radius-btn) !important;
	padding: .85em 1.8em !important;
	box-shadow: none !important;
	transition: background-color .2s, border-color .2s, color .2s;
}
.button:hover,
.button--primary:hover,
.button--secondary:hover,
.button-primary:hover,
.hp-form__button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--oe-taupe-dark) !important;
	border-color: var(--oe-taupe-dark) !important;
}

/* Bouton "Ajouter une annonce" du header : contour blanc */
.hp-menu--site-header .button {
	background: transparent !important;
	border-color: #fff !important;
	padding: .7em 1.4em !important;
	font-size: 13px !important;
}
.hp-menu--site-header .button:hover {
	background: var(--oe-taupe) !important;
	border-color: var(--oe-taupe) !important;
}

/* Variante contour (style "outline" de l'éditeur) */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	border-color: #fff !important;
}

/* =========================================================
   5. HERO — bloc Couverture/Groupe avec la classe "oe-hero"
   ========================================================= */
.oe-hero {
	position: relative;
	color: #fff;
	padding: clamp(60px, 9vw, 120px) 20px !important;
	background:
		linear-gradient(180deg, var(--oe-teal) 10%, rgba(0,0,0,.8) 45%, rgba(0,0,0,.85) 100%),
		var(--oe-hero-image, none) center / cover no-repeat;
	background-color: var(--oe-petrol);
}
.oe-hero h1,
.oe-hero h2,
.oe-hero p { color: #fff !important; }
.oe-hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.1; margin-bottom: .4em; }
.oe-hero h4 { color: var(--oe-taupe) !important; margin-bottom: 1em; }
.oe-hero p {
	font-size: 1.05rem;
	max-width: 560px;
	/* aligne le paragraphe à gauche avec les titres (au lieu d'être centré) */
	margin-left: max(0px, calc((100% - 1080px) / 2)) !important;
}
.oe-hero .wp-block-buttons { margin-top: 2em; gap: 14px; }

/* Bandeau intro sous le hero */
.oe-intro {
	background: var(--oe-light);
	border-left: 4px solid var(--oe-taupe);
	padding: 28px 32px !important;
	border-radius: 0 var(--oe-radius-card) var(--oe-radius-card) 0;
}

/* =========================================================
   6. PAGES HIVEPRESS (titres, formulaires, recherche)
   ========================================================= */
.hp-page__header,
.page-header { margin-bottom: 2rem; }

.hp-form--listing-search.hp-form--wide {
	background: #fff;
	border-radius: var(--oe-radius-card);
	box-shadow: 0 6px 24px rgba(5,101,113,.12);
	padding: 12px;
}

.hp-field input[type="text"],
.hp-field input[type="email"],
.hp-field input[type="password"],
.hp-field input[type="search"],
.hp-field input[type="number"],
.hp-field input[type="tel"],
.hp-field input[type="url"],
.hp-field select,
.hp-field textarea,
.select2-container .select2-selection {
	border: 1px solid #ddd6ca !important;
	border-radius: 6px !important;
	font-family: var(--oe-font-text);
}
.hp-field input:focus,
.hp-field select:focus,
.hp-field textarea:focus {
	border-color: var(--oe-petrol) !important;
	box-shadow: 0 0 0 3px rgba(5,101,113,.15) !important;
	outline: none;
}

/* Modales connexion / inscription */
.hp-modal { border-radius: var(--oe-radius-card); border-top: 5px solid var(--oe-petrol); }
.hp-modal h3 { color: var(--oe-petrol); }

/* =========================================================
   7. CARTES D'ANNONCES & CATÉGORIES
   ========================================================= */
.hp-listing--view-block,
.hp-listing-category--view-block,
.hp-vendor--view-block {
	border: 0 !important;
	border-radius: var(--oe-radius-card) !important;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0,0,0,.08) !important;
	transition: transform .25s ease, box-shadow .25s ease;
}
.hp-listing--view-block:hover,
.hp-listing-category--view-block:hover,
.hp-vendor--view-block:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(5,101,113,.18) !important;
}

.hp-listing--view-block .hp-listing__image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Titres de cartes : Open Sans (Italiana trop fin en petite taille) */
.hp-listing__title,
.hp-listing__title a,
.hp-listing-category__name,
.hp-listing-category__name a,
.hp-vendor__name,
.hp-vendor__name a {
	font-family: var(--oe-font-text) !important;
	font-weight: 600 !important;
	font-size: 1.1rem !important;
	line-height: 1.3;
	text-transform: none !important;
	letter-spacing: .01em !important;
	color: var(--oe-petrol) !important;
}

/* Catégorie = petit surtitre taupe */
.hp-listing__category a,
.hp-listing__categories a {
	font-family: var(--oe-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--oe-taupe) !important;
	background: var(--oe-light) !important;
}

.hp-listing__footer {
	background: var(--oe-light);
	border-top: 0 !important;
}
.hp-listing__action,
.hp-listing__action i { color: var(--oe-petrol) !important; }
.hp-listing__action:hover i { color: var(--oe-taupe-dark) !important; }

.hp-meta,
.hp-listing__date {
	font-family: var(--oe-font-text) !important;
	font-size: 13px;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: #8a8a8a;
}

/* Pagination */
.navigation.pagination .page-numbers.current,
.hp-pagination .page-numbers.current {
	background: var(--oe-petrol) !important;
	color: #fff !important;
	border-radius: 50%;
}

/* =========================================================
   8. FOOTER
   ========================================================= */
.site-footer {
	background: var(--oe-dark) !important;
	color: var(--oe-taupe);
	padding: 40px 0 28px;
}
.site-footer a { color: var(--oe-taupe); }
.site-footer a:hover { color: #fff; }

.site-footer .textwidget {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 32px;
}
.site-footer .logo-footer { max-height: 70px; width: auto; }

.footer-navbar { margin-top: 16px; }
.footer-navbar__menu a {
	font-family: var(--oe-font-ui);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width: 767px) {
	.header-navbar { min-height: 70px; padding-left: 16px; padding-right: 16px; }
	.custom-logo { max-height: 40px; }
	.hp-menu--site-header .button span { display: none; } /* garde l'icône + */
	.hp-menu--site-header .button { padding: .6em .9em !important; }
	.oe-intro { padding: 20px !important; }
}

/* =========================================================
   10. FOND DÉGRADÉ SUR TOUT LE SITE (pétrole → noir)
   ========================================================= */
body { background: #020f12 !important; }
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	/* même superposition que ourthechanges.be : dégradé pétrole → noir sur la photo */
	background:
		linear-gradient(180deg, rgba(0,125,144,.85) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.65) 70%, rgba(0,0,0,.85) 100%),
		url("/wp-content/uploads/2026/10/DSCN4328-scaled-1.jpg") center / cover no-repeat;
}
.site-container,
.site-content,
.content-area,
.site-main,
.oe-hero { background: transparent !important; }

/* Texte clair sur fond sombre */
.site-content { color: rgba(255,255,255,.85); }
.site-content h1,
.site-content h2,
.site-content h3,
.site-content .hp-page__title,
.site-content .has-vivid-cyan-blue-color { color: #fff !important; }
.site-content h4 { color: var(--oe-taupe); }
.site-content a { color: var(--oe-taupe); }
.site-content a:hover { color: #fff; }

/* Bandeau intro translucide */
.oe-intro {
	background: rgba(255,255,255,.06);
	color: rgba(255,255,255,.85);
}

/* Les éléments à fond blanc gardent un texte foncé */
.site-content .hp-listing--view-block,
.site-content .hp-listing-category--view-block,
.site-content .hp-vendor--view-block,
.site-content .hp-form--listing-search,
.hp-modal { color: var(--oe-text); }
.site-content .hp-listing--view-block a,
.site-content .hp-vendor--view-block a { color: var(--oe-petrol); }
.site-content .hp-listing--view-block .hp-listing__category a { color: var(--oe-taupe) !important; }

/* =========================================================
   11. PAGE ANNONCE : actions et date en blanc sur fond sombre
   ========================================================= */
.hp-page .hp-listing__action,
.hp-page .hp-listing__action i,
.hp-page .hp-listing__action span,
.hp-page .hp-listing__actions a,
.hp-page .hp-listing__actions a i { color: #fff !important; }
.hp-page .hp-listing__actions a:hover,
.hp-page .hp-listing__actions a:hover i { color: var(--oe-taupe) !important; }

/* Bouton "Répondre à l'annonce" : texte blanc */
.hp-page .hp-listing__action--message.button { color: #fff !important; }

/* Date de publication */
.hp-page .hp-listing__details .hp-listing__date,
.hp-page .hp-listing__details .hp-meta {
	color: #fff !important;
	font-size: 14px !important;
}

/* Dans les cartes (annonces similaires…), les actions et dates restent foncées */
.hp-page .hp-listing--view-block .hp-listing__action,
.hp-page .hp-listing--view-block .hp-listing__action i { color: var(--oe-petrol) !important; }
.hp-page .hp-listing--view-block .hp-listing__date { color: #8a8a8a !important; font-size: 13px !important; }

/* =========================================================
   12. FILTRES (annonces, catégories, membres) en blanc
   ========================================================= */
@media (min-width: 768px) {
	.hp-form--listing-filter,
	.hp-form--vendor-filter,
	.hp-form--listing-filter label,
	.hp-form--vendor-filter label,
	.hp-form--listing-filter label span,
	.hp-form--vendor-filter label span,
	.hp-form--listing-filter .hp-form__label,
	.hp-form--vendor-filter .hp-form__label { color: #fff !important; }
	.hp-form--listing-filter a,
	.hp-form--vendor-filter a { color: #fff !important; }
}

/* Compteur "Affichage de 1-7 résultats" */
.hp-result-count { color: rgba(255,255,255,.75) !important; }

/* =========================================================
   13. CHAMPS DE FORMULAIRE : fond blanc, texte foncé
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea,
.select2-container .select2-selection,
.select2-dropdown {
	background-color: #fff !important;
	color: #333 !important;
	border: 1px solid #ddd6ca !important;
	border-radius: 6px !important;
}
.select2-container .select2-selection__rendered,
.select2-results__option { color: #333 !important; }
input::placeholder,
textarea::placeholder { color: #999 !important; opacity: 1; }

/* Cases à cocher / boutons radio visibles sur fond sombre */
.hp-field--checkbox span::before,
.hp-field--radio span::before {
	background-color: #fff !important;
	border-color: #fff !important;
}
.hp-field--checkbox input:checked + span::before,
.hp-field--radio input:checked + span::before {
	background-color: var(--oe-taupe) !important;
	border-color: var(--oe-taupe) !important;
}

/* "(facultatif)" et descriptions de champs */
.site-content .hp-form .hp-field__label small,
.site-content .hp-form .hp-form__label small,
.site-content .hp-form .hp-field__description { color: rgba(255,255,255,.6) !important; }