/* OPTI-MAP — styles complémentaires à theme.json (ce que le système de blocs ne couvre pas) */

/* WordPress hyphène les tailles "h1".."h4" en "h-1".."h-4" pour le nom de la
   variable CSS générée, mais pas pour la classe utilitaire .has-h1-font-size
   — on relie les deux ici pour que les tailles de titres s'appliquent. */
.has-h1-font-size { font-size: var(--wp--preset--font-size--h-1) !important; }
.has-h2-font-size { font-size: var(--wp--preset--font-size--h-2) !important; }
.has-h3-font-size { font-size: var(--wp--preset--font-size--h-3) !important; }
.has-h4-font-size { font-size: var(--wp--preset--font-size--h-4) !important; }

/* --- Lien d'évitement --------------------------------------------------- */
.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 10000;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	padding: .85rem 1.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-decoration: none;
	transition: top .15s ease;
}
.skip-link:focus {
	top: 1rem;
}

/* --- États de focus visibles (accessibilité) ---------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

/* --- Cibles tactiles : 44px minimum (constat de l'audit) --------------- */
.optimap-header a,
.wp-block-button__link,
.optimap-lang-switch a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

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

.optimap-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
	padding: 1rem 1.5rem;
}

.optimap-logo img {
	display: block;
	height: 152px;
	width: auto;
}
@media (max-width: 640px) {
	.optimap-logo img {
		height: 96px;
	}
}

.optimap-nav-toggle {
	display: none;
}

.optimap-nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
}

.optimap-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.optimap-nav a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .01em;
	text-decoration: none;
	color: var(--wp--preset--color--text);
	text-transform: uppercase;
}
.optimap-nav a:hover,
.optimap-nav a:focus-visible {
	color: var(--wp--preset--color--brand);
}
.optimap-nav .current-menu-item > a,
.optimap-nav .current_page_item > a {
	color: var(--wp--preset--color--brand);
}

.optimap-lang-switch {
	display: flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--wp--preset--color--border);
	padding: 3px;
}
.optimap-lang-switch a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .04em;
	line-height: 1;
	text-decoration: none;
	color: var(--wp--preset--color--text-muted);
	padding: .5rem .75rem;
}
.optimap-lang-switch a[aria-current="true"] {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
}
.optimap-lang-switch a:not([aria-current="true"]):hover,
.optimap-lang-switch a:not([aria-current="true"]):focus-visible {
	color: var(--wp--preset--color--text);
}

.optimap-burger {
	display: none;
	background: none;
	border: 1px solid var(--wp--preset--color--border);
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.optimap-burger span,
.optimap-burger::before,
.optimap-burger::after {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	background: var(--wp--preset--color--text);
	position: relative;
	transition: transform .2s ease, opacity .2s ease;
}
.optimap-burger::before { transform: translateY(-7px); }
.optimap-burger::after { transform: translateY(5px); }

@media (max-width: 880px) {
	.optimap-burger {
		display: inline-flex;
	}
	.optimap-nav {
		position: fixed;
		inset: 129px 0 0 0;
		background: var(--wp--preset--color--bg);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 2rem 1.5rem;
		gap: 2rem;
		transform: translateX(100%);
		transition: transform .25s ease;
		overflow-y: auto;
	}
	.optimap-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.35rem;
		width: 100%;
	}
	.optimap-nav ul a {
		font-size: 1.15rem;
		width: 100%;
		padding: .4rem 0;
	}
	.optimap-nav-open .optimap-nav {
		transform: translateX(0);
	}
	.optimap-nav-open .optimap-burger span,
	.optimap-nav-open .optimap-burger::before,
	.optimap-nav-open .optimap-burger::after {
		background: var(--wp--preset--color--brand);
	}
}

/* --- Bandeau d'avertissement (usage route ouverte) ---------------------- */
.optimap-notice {
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--brand);
	padding: 1.1rem 1.4rem;
}
.optimap-notice p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* --- Tableaux tarifaires -------------------------------------------------*/
.optimap-price-table table {
	width: 100%;
	border-collapse: collapse;
}
.optimap-price-table th,
.optimap-price-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: .85rem 1rem;
	text-align: left;
	vertical-align: top;
}
.optimap-price-table thead th {
	background: var(--wp--preset--color--surface-2);
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .04em;
}
.optimap-price-table td.price,
.optimap-price-table th.price {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* En dessous de 700px, la grille se lit verticalement — chaque véhicule
   devient une carte plutôt que d'imposer un défilement latéral. */
@media (max-width: 700px) {
	.optimap-price-table table,
	.optimap-price-table thead,
	.optimap-price-table tbody,
	.optimap-price-table tr,
	.optimap-price-table th,
	.optimap-price-table td {
		display: block;
		width: 100%;
	}
	.optimap-price-table thead {
		display: none;
	}
	.optimap-price-table tr {
		border: 1px solid var(--wp--preset--color--border);
		margin-bottom: 1.25rem;
		padding: 0;
	}
	.optimap-price-table td {
		border: none;
		border-bottom: 1px solid var(--wp--preset--color--border);
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
	}
	.optimap-price-table tr td:last-child {
		border-bottom: none;
	}
	.optimap-price-table td:first-child {
		background: var(--wp--preset--color--surface-2);
		font-family: var(--wp--preset--font-family--display);
		font-weight: 600;
		display: block;
	}
	.optimap-price-table td.price::before {
		content: attr(data-label);
		font-family: var(--wp--preset--font-family--body);
		font-weight: 400;
		text-transform: none;
		letter-spacing: normal;
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--small);
	}
}

/* --- Pied de page --------------------------------------------------------*/
.optimap-footer {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
}
.optimap-footer a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}
.optimap-footer a:hover,
.optimap-footer a:focus-visible {
	color: var(--wp--preset--color--brand);
}
.optimap-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

/* --- Bandeau de consentement aux cookies --------------------------------- */
.optimap-cookie-bar {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 200;
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.optimap-cookie-bar__inner {
	max-width: 900px;
	margin-inline: auto;
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	justify-content: space-between;
}
.optimap-cookie-bar__inner p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	flex: 1 1 320px;
}
.optimap-cookie-bar__actions button {
	border: none;
	cursor: pointer;
	min-height: 44px;
}

/* --- Assistant du site ---------------------------------------------------- */
.optimap-assistant {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 150;
}
.optimap-assistant__toggle {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	border: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: .95rem;
	padding: .9rem 1.4rem;
	min-height: 44px;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.optimap-assistant__panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + .75rem);
	width: min(360px, 88vw);
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
	padding: 1.25rem;
}
.optimap-assistant__intro {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}
.optimap-assistant__form {
	display: flex;
	gap: .5rem;
}
.optimap-assistant__form input {
	flex: 1;
	min-height: 44px;
	padding: .5rem .7rem;
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	font-size: 1rem;
}
.optimap-assistant__form button {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	border: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	padding: 0 1rem;
	min-height: 44px;
	cursor: pointer;
}
.optimap-assistant__results {
	margin-top: 1rem;
	max-height: 260px;
	overflow-y: auto;
}
.optimap-assistant__results ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}
.optimap-assistant__results a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}
.optimap-assistant__results p {
	margin: .25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}
.optimap-assistant__fallback {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}
@media (max-width: 480px) {
	.optimap-assistant { right: .75rem; bottom: .75rem; }
	.optimap-assistant__toggle { padding: .8rem 1.1rem; font-size: .85rem; }
}

/* --- Mouvement réduit ------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- Impression -------------------------------------------------------- */
@media print {
	.optimap-header, .optimap-footer, .optimap-cookie-bar { display: none; }
}
