/**
 * Travomi — menu « Le tableau de bord » (design-system.md §5). Markup: inc/20-menu.php, behaviour: assets/js/menu.js.
 * Phones and tablets (< 1024): logo, devis button, round logo button → full-screen panel (search, 8 rubriques as a list).
 * Laptop and desktop (≥ 1024): logo, « Rubriques » → white dropdown (8 rubriques in 4 × 2 + footer row), links, search, devis.
 */

/* ── Header bar ───────────────────────────────────── */
.tv-header { position: relative; z-index: 40; background: #fff; }
.tv-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--tv-split); z-index: 1; }
.tv-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding-block: 10px; }
.tv-header__bar > * { margin: 0 !important; }
.tv-logo { flex: none; line-height: 0; }
.tv-logo img { width: 150px !important; height: auto; }
.tv-thermo { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; min-width: 0; gap: 16px; }
.tv-thermo__nav { display: none; }
.tv-thermo__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.tv-thermo ul { list-style: none; margin: 0; padding: 0; }

.tv-iconbtn { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--tv-a5); color: var(--tv-contrast); cursor: pointer; transition: background-color .15s ease; text-decoration: none; }
.tv-iconbtn:hover, .tv-iconbtn[aria-expanded="true"] { background: var(--tv-a2); color: var(--tv-contrast); }
.tv-iconbtn .tv-icon { width: 22px; height: 22px; }

.tv-thermo__cta { min-height: 44px; padding: 0 16px; font-size: .95rem; white-space: nowrap; }
.tv-thermo__cta-long { display: none; }

.tv-dialbtn { display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.tv-dialbtn .tv-dialmark { width: 46px; height: 46px; display: block; transition: transform .35s cubic-bezier(.34, 1.4, .5, 1); }
.tv-dialbtn:hover .tv-dialmark, .tv-dialbtn[aria-expanded="true"] .tv-dialmark { transform: rotate(-35deg); }

/* ── Search popover (desktop) ─────────────────────── */
.tv-searchpop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: #fff; box-shadow: var(--tv-shadow-strong); padding: 24px 0 28px; }
.tv-searchpop[hidden] { display: none; }
.tv-searchpop__inner { box-sizing: border-box; max-width: 760px; margin: 0 auto; padding-inline: var(--tv-gutter); }

/* ── Phone / tablet dashboard ─────────────────────── */
.tv-drawer { display: none; position: fixed; inset: 0; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; background: var(--tv-dots), var(--tv-a5); color: var(--tv-contrast); }
.tv-drawer.is-open, .tv-drawer:target { display: block; animation: tv-drawer-in .22s ease-out; }
@keyframes tv-drawer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html.tv-drawer-open, html.tv-drawer-open body { overflow: hidden; }
.tv-drawer__top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 10px var(--tv-gutter); background: #fff; }
.tv-drawer__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--tv-split); }
.tv-drawer__logo { line-height: 0; }
.tv-drawer__logo img { width: 150px; height: auto; }
.tv-drawer__body { box-sizing: border-box; max-width: 680px; margin: 0 auto; padding: 24px var(--tv-gutter) 40px; display: grid; gap: 18px; }
.tv-drawer__kicker { margin: 6px 0 -6px; font-family: var(--tv-head); font-weight: 800; font-size: 1.05rem; }


.tv-drawer__links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tv-a6); }
.tv-drawer__links li { border-bottom: 1px solid var(--tv-a6); }
.tv-drawer__links a { display: flex; align-items: center; min-height: 54px; font-family: var(--tv-head); font-weight: 700; font-size: 1.15rem; color: var(--tv-contrast); text-decoration: none; }
.tv-drawer__links a[aria-current] { color: var(--tv-pervenche-text); }
.tv-drawer__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tv-drawer__tiles > :only-child { grid-column: 1 / -1; }
.tv-drawer__tile { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 100px; padding: 16px; border-radius: var(--tv-radius-card); text-decoration: none; color: var(--tv-contrast); font-family: var(--tv-head); font-weight: 800; font-size: 1.1rem; line-height: 1.2; }
.tv-drawer__tile:hover { color: var(--tv-contrast); filter: brightness(1.04); }
.tv-drawer__tile .tv-icon { width: 28px; height: 28px; }
.tv-drawer__tile--calc { background: var(--tv-a2); }
.tv-drawer__tile--devis { background: var(--tv-a3); }
.tv-search--drawer .tv-search__btn { padding-inline: 16px; }

/* ── Tablet ≥ 600 ─────────────────────────────────── */
@media (min-width: 600px) {
	.tv-header__bar { min-height: 76px; }
	.tv-logo img { width: 170px !important; }
	.tv-thermo__cta { padding: 0 20px; }
	.tv-thermo__cta-long { display: inline; }
	.tv-thermo__cta-short { display: none; }
	.tv-drawer__body { padding-top: 32px; }
}

/* ── Laptop ≥ 1024: control panel ─────────────────── */
@media (min-width: 1024px) {
	.tv-header__bar { min-height: 84px; gap: 20px; }
	.tv-logo img { width: 176px !important; }
	.tv-dialbtn, .tv-drawer, .tv-drawer:target, .tv-drawer.is-open { display: none !important; }
	.tv-thermo { justify-content: space-between; gap: 20px; }
	.tv-thermo__nav { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; justify-content: center; min-width: 0; }


	.tv-thermo__links { display: flex; align-items: center; gap: 2px; }
	.tv-thermo__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; font-family: var(--tv-head); font-weight: 600; font-size: 1rem; color: var(--tv-contrast); text-decoration: none; }
	.tv-thermo__links a:hover { background: var(--tv-a5); color: var(--tv-contrast); }
	.tv-thermo__links a[aria-current] { box-shadow: inset 0 -3px 0 var(--tv-a1); border-radius: 12px 12px 4px 4px; }
	.tv-thermo__link--minor { display: none !important; }

		/* Keep the board compact: tiles never stretch to the panel, the panel shows 3 guides (« Voir la rubrique » has the rest). */

	.tv-thermo__actions { gap: 10px; }
	.tv-thermo__cta { min-height: 48px; }
}

@media (min-width: 1280px) {
	.tv-logo img { width: 190px !important; }
	.tv-thermo__link--minor { display: list-item !important; }
	.tv-thermo__links a { padding: 0 14px; }
	.tv-thermo__nav { gap: 16px; }
}
@media (min-width: 1440px) {
	.tv-logo img { width: 210px !important; }
}

/* ── Rubrique entry (dropdown and phone list) ─────── */
.tv-rubl { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 10px 12px; border-radius: 14px; color: var(--tv-contrast); text-decoration: none; transition: background-color .12s ease; }
.tv-rubl:hover, .tv-rubl:focus-visible, .tv-rubl[aria-current] { background: var(--tv-a2); color: var(--tv-contrast); }
.tv-rubl-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--tv-pervenche-text); box-shadow: inset 0 0 0 1px var(--tv-a6); }
.tv-rubl-icon .tv-icon { width: 22px; height: 22px; }
.tv-rubl-text { display: flex; flex-direction: column; min-width: 0; }
.tv-rubl-name { font-family: var(--tv-head); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.tv-rubl-line { font-size: .84rem; line-height: 1.35; color: var(--tv-a4); }
.tv-rubl .tv-pill { align-self: center; }
.tv-drawer__rubs { display: grid; gap: 2px; margin: 0; padding: 8px; list-style: none; border-radius: 20px; background: #fff; box-shadow: var(--tv-shadow); }

@media (min-width: 1024px) {
	.tv-boardbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: 14px; background: transparent; color: var(--tv-contrast); font: 700 1rem/1 var(--tv-head); cursor: pointer; text-decoration: none; box-shadow: inset 0 0 0 2px var(--tv-a6); transition: background-color .12s ease, box-shadow .12s ease; }
	.tv-boardbtn .tv-icon { width: 22px; height: 22px; color: var(--tv-pervenche-text); }
	.tv-boardbtn:hover, .tv-boardbtn[aria-expanded="true"] { background: var(--tv-a2); box-shadow: inset 0 0 0 2px var(--tv-a1); color: var(--tv-contrast); }
	.tv-boardbtn[data-current] { box-shadow: inset 0 0 0 2px var(--tv-a1); }
	.tv-board { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; }
	.tv-board[hidden] { display: none; }
	.tv-board__inner { box-sizing: border-box; max-width: calc(1240px + 2 * var(--tv-gutter)); margin: 0 auto; padding: 14px; border-radius: 0 0 24px 24px; background: #fff; box-shadow: 0 30px 60px rgba(23, 26, 61, .16); }
	.tv-board:not([hidden]) .tv-board__inner { animation: tv-board-in .16s ease-out; }
	@keyframes tv-board-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
	.tv-board__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
	.tv-board .tv-rubl { grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; min-height: 76px; align-items: start; }
	.tv-board .tv-rubl-icon { grid-row: span 2; }
	.tv-board .tv-rubl .tv-pill { grid-column: 2; justify-self: start; margin-top: 2px; }
	.tv-board__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 10px; padding: 12px 12px 4px; border-top: 1px solid var(--tv-a6); }
	.tv-board__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--tv-head); font-weight: 700; color: var(--tv-contrast); text-decoration: none; }
	.tv-board__link .tv-icon { width: 20px; height: 20px; color: var(--tv-pervenche-text); }
	.tv-board__link:hover { color: var(--tv-pervenche-text); }
	.tv-board__foot .tv-btn { margin-left: auto; }
}