/**
 * Audit remediation — September 2026.
 *
 * Loaded site-wide after modernize.css. Each block names the audit finding
 * it closes. Kept separate from modernize.css so it can be read against the
 * audit and, if a rule turns out to be wrong, removed on its own.
 */

/* -------------------------------------------------------------------------
 * 2.2 / 5.4 — tap targets
 *
 * The audit's headline of "294 controls under 40 px" was blunt: 255 of them
 * are full-width text links measuring 159 × 22, where only the height falls
 * short and the target is easy to hit anyway. The controls that genuinely
 * mis-tap are the small square ones below.
 *
 * The obvious fix — padding cancelled by a negative margin — was tried and
 * measured, and it grew the header from 60 px to 84 px: the toggle sits in
 * a flex row that reads its padding as height. So the hit area is drawn as
 * a transparent ::after overlay instead. Measured on the live header: box
 * sizes and positions identical to the pixel, header height unchanged, and
 * a tap 18 px above or 20 px beside the icon now lands on the control.
 *
 * ::before and ::after are unused on both controls (checked, not assumed —
 * the hamburger is drawn with a background, not with pseudo-elements).
 * ---------------------------------------------------------------------- */

.menu-toggle,
.header__right a.dropdown-toggle {
	position: relative;
}

/* 24 × 20 and 23 × 23 respectively — the two smallest controls on the site,
   and the hamburger is the most-tapped thing on it. */
.menu-toggle::after,
.header__right a.dropdown-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
}

/* The catalogue search field — 460 wide but only 34 tall. Height only; the
   width was never the problem, so min-height is the whole fix. */
.hm-pill-search__input {
	min-height: 44px;
}

/* Our own transport-tier buttons on multi-price tours ("En bus / En van /
   En voiture privée") were 59 × 24. These are a real decision point — the
   visitor is choosing what to pay — so they get the full 44. Unlike the
   header controls these sit in their own row, so growing them is safe;
   verified at 59 × 44 with no surrounding shift. */
.hm-multiprice__option {
	min-height: 44px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.hm-multiprice__link {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * 2.3 — keyboard focus
 *
 * modernize.css already restores :focus-visible for a, button, input,
 * select, textarea and [role="button"] with !important, and that rule does
 * beat the parent theme's outline:none declarations — the audit counted the
 * suppressions without checking whether a later rule won. What it does not
 * cover is anything focusable that is none of those elements: a div with a
 * tabindex, a <summary>, a carousel control. This closes that gap only.
 * ---------------------------------------------------------------------- */
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible,
.owl-dot:focus-visible,
.owl-prev:focus-visible,
.owl-next:focus-visible,
.menu-toggle:focus-visible {
	outline: 3px solid var(--reef, #0e5a60) !important;
	outline-offset: 2px !important;
}

/* -------------------------------------------------------------------------
 * 2.1 — zero-review badges on cards
 *
 * The single-tour widgets are hidden server-side in inc/audit-fixes.php,
 * where the review count is known before the page is sent. Cards are
 * different: a grid can mix reviewed and unreviewed tours, and the count is
 * only readable from the rendered text.
 *
 * So the badge starts hidden and hm-audit.js reveals the ones carrying a
 * real count. Hidden-by-default is the right way round: every tour has zero
 * reviews today, so nothing reflows now, and the rare card that later gains
 * a review grows slightly rather than every card shrinking at once.
 * ---------------------------------------------------------------------- */
.services-item .content-item .reviews,
.st-list-item .content-item .reviews {
	display: none;
}

.services-item .content-item .reviews.hm-has-reviews,
.st-list-item .content-item .reviews.hm-has-reviews {
	display: block;
}

/* -------------------------------------------------------------------------
 * Formula comparison blocks (catamaran, and any tour with variants)
 *
 * The three catamaran formulas were <h4> headings inside the body copy, so
 * the different types and prices read as prose rather than as choices. This
 * turns them into three comparable blocks.
 *
 * Deliberately not the .hm-multiprice switcher used by the Cairo and Luxor
 * tours: that one maps each option to a separate post, and these three are
 * one product with three durations. Three visible prices beats a toggle that
 * hides two of them.
 * ---------------------------------------------------------------------- */
.hm-price-basis {
	background: var(--sand, #f6f1e7);
	border-left: 3px solid var(--reef, #0e5a60);
	padding: 12px 16px;
	margin: 0 0 22px;
}

.hm-formules {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 0 0 30px;
}

.hm-formule {
	border: 1px solid var(--line, #d9d9d9);
	border-radius: 4px;
	padding: 18px 18px 20px;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.hm-formule__tag {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--reef, #0e5a60);
}

.hm-formule h4 {
	margin: 6px 0 10px;
	font-size: 1.12rem;
	line-height: 1.25;
}

.hm-formule__price {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 12px;
	color: var(--ink, #16302f);
}

/* The basis sits under the number, small — the number is what gets compared,
   but "pour 2 personnes" has to travel with it or the price misleads. */
.hm-formule__price span {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
	margin-top: 3px;
}

.hm-formule ul {
	margin: 0;
	padding-left: 1.1em;
	font-size: .93rem;
	line-height: 1.5;
}

.hm-formule li { margin-bottom: 5px; }