/*
Theme Name: Eliaut
Author: RICHARD Nicolas
Author URI: https://eliaut.com/
Description: Theme principal fait main de Eliaut (Header)
Version: 1.0.0
*/

/* ==========================================================================
1. TOPBAR (Barre d'information supérieure)
========================================================================== */
.topbar {
    background-color: var(--color-bg2); /* Noir Eliaut */
    color: var(--color-text2);          /* Texte blanc */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 0.625rem 1rem;             /* 10px 16px */
}
.topbar a {
    color: var(--color-text2);
    text-decoration: none;
    transition: color 0.2s ease;
}
.topbar a:hover {
	text-decoration: underline;
}
@media only screen and (max-width: 825px) {
    .topbar {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem;
        font-size: 0.75rem;             /* 12px */
    }
}

/* ==========================================================================
2. HEADER GLOBALE (Desktop & Mobile)
========================================================================== */
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 5rem;
	box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.17);
	position: relative;
	z-index: 1000;
	background: var(--color-bg);
	font-size: 0.9375rem;        /* 15px */
	letter-spacing: 1px;
}
.logo {
	display: inline-flex;
	align-items: center;
	height: 2.31rem;             /* 44px */
}
.logo img {
	height: 100%;
	width: auto;
	display: block;
}
header > nav {
	display: flex;
	align-items: center;
}

/* ==========================================================================
3. NAVIGATION DESKTOP (PC)
========================================================================== */
@media only screen and (min-width: 1130px) {
	.navmob {
		display: none;
	}
	.navpc ul {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.navpc ul li {
		position: relative;
		padding: 0;
		margin: 0 0.25rem;       /* 4px */
		border-radius: 0.125rem; /* 2px */
		transition: all 0.2s ease;
	}
	.navpc ul li a {
		display: block;
		padding: 0.9375rem 1.125rem; /* 15px 18px */
		color: var(--color-text);
		text-decoration: none;
		text-transform: uppercase;
		transition: color 0.2s ease;
	}

	/* --- SURVOL ET ÉTAT ACTIF PAR DÉFAUT (Pages classiques: SAV, Magasin, Location, etc.) --- */
	.navpc > ul > li:hover,
	.navpc > ul > li.current-menu-item,
	.navpc > ul > li.current-menu-ancestor,
	.navpc > ul > li.current_page_item,
	.navpc > ul > li.current_page_ancestor {
		outline: 2px solid var(--color-text);
		outline-offset: -4px;
	}

	/* --- SURVOL ET ÉTAT ACTIF SPÉCIFIQUE : ÉLEVAGE (Vert) --- */
	.navpc > ul > li.menu-elevage:hover,
	.navpc > ul > li.menu-elevage.current-menu-item,
	.navpc > ul > li.menu-elevage.current-menu-ancestor,
	.navpc > ul > li.menu-elevage.current_page_item,
	.navpc > ul > li.menu-elevage.current_page_ancestor {
		outline: 2px solid var(--color-main);
		outline-offset: -4px;
	}
	.navpc > ul > li.menu-elevage:hover > a,
	.navpc > ul > li.menu-elevage.current-menu-item > a,
	.navpc > ul > li.menu-elevage.current-menu-ancestor > a,
	.navpc > ul > li.menu-elevage.current_page_item > a,
	.navpc > ul > li.menu-elevage.current_page_ancestor > a {
		color: var(--color-main);
	}

	/* --- SURVOL ET ÉTAT ACTIF SPÉCIFIQUE : MOTOCULTURE (Orange) --- */
	.navpc > ul > li.menu-motoculture:hover,
	.navpc > ul > li.menu-motoculture.current-menu-item,
	.navpc > ul > li.menu-motoculture.current-menu-ancestor,
	.navpc > ul > li.menu-motoculture.current_page_item,
	.navpc > ul > li.menu-motoculture.current_page_ancestor {
		outline: 2px solid var(--color-accent);
		outline-offset: -4px;
	}
	.navpc > ul > li.menu-motoculture:hover > a,
	.navpc > ul > li.menu-motoculture.current-menu-item > a,
	.navpc > ul > li.menu-motoculture.current-menu-ancestor > a,
	.navpc > ul > li.menu-motoculture.current_page_item > a,
	.navpc > ul > li.menu-motoculture.current_page_ancestor > a {
		color: var(--color-accent);
	}

	/* --- GESTION DU SOUS-MENU DÉROULANT --- */
	.navpc ul li ul {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		margin-top: 0.3125rem;   /* 5px */
		padding: 0;
		background: var(--color-text);
		border-radius: 0.125rem;
		min-width: 12.5rem;      /* 200px */
		box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.2);
		transition: opacity 0.2s, visibility 0.2s;
		z-index: 1000;
	}
	.navpc ul li:hover ul {
		visibility: visible;
		opacity: 1;
	}
	.navpc ul li ul li {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		border: none;
		outline: none !important;
	}
	.navpc ul li ul li a {
		padding: 0.625rem 0.9375rem; /* 10px 15px */
		color: var(--color-bg);
	}
	.navpc ul li.menu-elevage ul li:hover,
	.navpc ul li.menu-elevage ul li.current-menu-item {
		background: var(--color-main);
	}
	.navpc ul li.menu-motoculture ul li:hover,
	.navpc ul li.menu-motoculture ul li.current-menu-item {
		background: var(--color-accent);
	}
}

@media only screen and (min-width: 1250px) and (max-width: 1500px) {
	header {
		padding: 1rem 4rem;
		font-size: 0.8125rem;        /* 13px */
	}
	.navpc ul li {
		margin: 0 0.0625rem;         /* 1px */
	}
	.navpc ul li a {
		padding: 0.625rem 0.625rem;  /* 10px 10px */
	}
	.btn-contact {
		padding: 0.625rem 0.75rem !important; /* 10px 12px */
		font-size: 0.8125rem !important;      /* 13px */
	}
	.social-contact {
		gap: 0.5rem;                 /* 8px */
	}
}

@media only screen and (min-width: 1130px) and (max-width: 1250px) {
	header {
		padding: 1rem 2rem;
		font-size: 0.8125rem;        /* 13px */
	}
	.navpc ul li {
		margin: 0 0.0625rem;         /* 1px */
	}
	.navpc ul li a {
		padding: 0.625rem 0.625rem;  /* 10px 10px */
	}
	.btn-contact {
		padding: 0.625rem 0.75rem !important; /* 10px 12px */
		font-size: 0.8125rem !important;      /* 13px */
	}
	.social-contact {
		gap: 0.5rem;                 /* 8px */
	}
}

/* ==========================================================================
4. RÉSEAUX SOCIAUX & BOUTON CONTACT (Header)
========================================================================== */
.social-contact {
	display: flex;
	align-items: center;
	gap: 0.9375rem;              /* 15px */
}
.social-contact a:not(.btn-contact) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.875rem;            /* 30px */
	width: 1.875rem;             /* 30px */
}
.icon-svg {
	height: 100%;
	width: 100%;
	display: block;
	transition: transform 0.2s ease;
}
.icon-svg:hover {
	transform: scale(1.1);
}
.btn-contact {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9375rem;        /* 15px */
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-accent);
	padding: 0.9375rem 1.125rem; /* 15px 18px */
	border-radius: 0.125rem;     /* 2px */
	outline: 2px solid var(--color-accent);
	transition: all 0.3s ease;
	line-height: 0.8;
}
.btn-contact:hover,
.btn-contact.active {
	background: var(--color-accent);
	color: var(--color-bg);
}

/* ==========================================================================
5. NAVIGATION MOBILE (Hamburger)
========================================================================== */
@media only screen and (max-width: 1130px) {
	.social-contact {
		display: none;
	}
	header {
		padding: 0 1.875rem 0 0; /* 0px 30px 0px 0px */
	}
	.navpc {
		display: none;
	}
	.navmob {
		z-index: 1000;
	}
	input[type="checkbox"] {
		position: absolute;
		left: -100vw;
	}
	.hamburger + label {
		cursor: pointer;
		display: flex;
		width: 3.75rem;          /* 60px */
		height: 3.75rem;
		align-items: center;
		justify-content: center;
		top: 1rem;
		left: 1rem;
		z-index: 2000;
		background: var(--color-bg);
		color: var(--color-text);
		font-size: 1.125rem;     /* 18px */
	}
	.hamburger + label span {
		width: 2.5rem;           /* 40px */
		height: 0.3125rem;       /* 5px */
		position: relative;
		background: var(--color-text);
		transition: background 0.2s;
	}
	.hamburger + label span::before, 
	.hamburger + label span::after {
		position: absolute;
		width: inherit;
		height: inherit;
		content: "";
		background: var(--color-text);
		transition: top 0.3s, transform 0.3s;
	}

	.hamburger + label span::before { top: -0.625rem; } /* -10px */
	.hamburger + label span::after { top: 0.625rem; }    /* 10px */

	.hamburger:checked + label span { background: transparent; }
	.hamburger:checked + label span::before { top: 0; transform: rotate(45deg); }
	.hamburger:checked + label span::after { top: 0; transform: rotate(-45deg); }

	/* Fond noir animé du menu mobile */
	.navmob nav::before {
		position: fixed;
		top: 0; left: 0;
		content: "";
		width: 100vw; height: 100vh;
		background: rgba(0, 0, 0, 0.9);
		clip-path: circle(2.5rem at 2.5rem 2.5rem); /* 40px */
		visibility: hidden;
		transition: clip-path 500ms ease-in-out, visibility 500ms;
		z-index: 1000;
	}
	.hamburger:checked + label ~ nav::before {
		visibility: visible;
		clip-path: circle(150% at 100% 100%);
	}
	.navmob nav {
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: 1500;
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition: opacity 0.3s, visibility 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.hamburger:checked + label ~ nav {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}
	.navmob nav ul {
		list-style-type: none;
		padding: 0; margin: 0;
		text-align: center;
		width: 100%;
		z-index: 1510;
	}
	.navmob nav ul li a {
		font-family: var(--font-heading);
		font-size: 1.375rem;     /* 22px */
		font-weight: 700;
		color: var(--color-bg);
		text-decoration: none;
		text-transform: uppercase;
		display: block;
		padding: 0.3125rem;      /* 5px */
	}
	.navmob nav ul li.menu-contact {
		margin-top: 1.5625rem;   /* 25px */
	}
	.navmob nav ul li.menu-contact a {
		display: inline-block;
		border: 2px solid var(--color-accent);
		color: var(--color-bg);
		background: var(--color-accent);
		padding: 0.625rem 1.875rem; /* 10px 30px */
		border-radius: 0.125rem;    /* 2px */
		font-size: 1.125rem;        /* 18px */
	}
	/* Couleurs spécifiques en mobile */
	.navmob nav ul li.menu-elevage > a { color: var(--color-main); }
	.navmob nav ul li.menu-motoculture > a { color: var(--color-accent); }

	/* État actif en mobile */
	.navmob nav ul li.current-menu-item > a,
	.navmob nav ul li.current-menu-ancestor > a,
	.navmob nav ul li.current_page_item > a,
	.navmob nav ul li.current_page_ancestor > a {
		text-decoration: underline;
		font-weight: 800;
	}

	/* Sous-menus en mobile */
	.navmob nav ul li ul {
		background: rgba(255,255,255,0.05);
		padding: 0.625rem 0;     /* 10px */
	}
	.navmob nav ul li ul li a {
		font-size: 1rem;         /* 16px */
		color: var(--color-grey);
	}
}