.md-header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: padding-top 0.25s ease;
}

/* Décalage en padding (pas en margin) sur le conteneur sticky lui-même :
   un margin-top sur .md-header__main se collabait avec .md-header (aucune
   bordure/padding entre les deux), donc la pilule restait collée au bord
   du viewport au lieu de "flotter" — repéré par Damien sur capture réelle
   (2026-08-28), le padding ne collabe jamais de cette façon. */
.md-header.md-scrolled {
	padding-top: 12px;
}

.md-header__main {
	/* Translucide même au repos (pas seulement au scroll) — retour de
	   Damien (2026-08-28) : l'indigo plein en haut de page tranchait avec
	   l'esprit verre du reste de la barre. Reste la couleur de marque, juste
	   moins "plaque pleine". */
	background: rgba(47, 42, 118, 0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/* Fin liseré haut/bas — repéré par Damien sur Turismo (leur barre au
	   repos a un border-bottom:1px solid rgb(238,239,242), mesuré en direct
	   sur drive-turismo.fr, 2026-08-29) : un filet très discret qui détache
	   la barre translucide du contenu qui défile derrière. Repris ici en
	   blanc à faible opacité (cohérent avec le fond indigo translucide de
	   la barre), symétrique haut+bas plutôt que juste en bas — même
	   principe que le liseré déjà utilisé sur l'état "verre" au scroll
	   (inset ci-dessous), désormais présent aussi au repos. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		inset 0 -1px 0 rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 5px 24px;
	flex-wrap: wrap;
	margin: 0;
	border-radius: 0;
	transition: margin 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease;
}

/* Hauteur fixée en dur (56px, mesure exacte de la barre de Turismo,
   établie tôt dans le chantier) uniquement en desktop, où le menu est
   toujours en ligne (jamais "ouvert/fermé"). Sans ce height explicite, la
   hauteur de la barre est déduite du padding + du plus grand enfant : en
   voulant resserrer .md-header__cta, toute la barre rétrécissait avec lui
   via align-items:center — régression répétée deux fois de suite
   (2026-08-29). Ce héight découple les deux pour de bon en desktop. Pas
   appliqué sous 768px : le menu mobile déplié (.md-nav--open) a besoin de
   pouvoir grandir sur plusieurs lignes, une hauteur fixe le découperait —
   le responsive reste de toute façon un chantier à part, différé (Damien,
   2026-08-28).

   and (min-height:500px) ajouté (2026-09-02, retour Damien "tu as checké
   le mode paysage ?") : un téléphone tourné en paysage dépasse souvent
   768px de large (ex. ~844px) tout en restant très bas (~390px de haut) —
   sans ce garde-fou, il recevait la barre desktop en ligne, qui n'a pas la
   place de tenir sur une seule ligne à cette largeur et se cassait sur 2
   lignes (testé en direct : 740px = mobile correct, 852px = desktop cassé
   en 2 lignes). Un vrai desktop a presque toujours plus de 500px de haut,
   donc ce seuil ne change rien pour les visiteurs desktop réels. Garder ce
   seuil synchronisé avec le média query inverse plus bas dans ce fichier
   ET avec assets/js/nav-toggle.js (même logique, portail du menu).

   Seuil de largeur passé de 768px à 1024px (audit R7, lot E, 2026-09-23) —
   mesuré avant sur le sandbox : de 768 à ~850px de large (iPad portrait :
   768, 810, 820, 834), le menu en ligne ne tenait pas entre le logo et
   « Voir les disponibilités » ; « Contact » passait sur une 2e ligne, sous
   la barre de 56px (y=42, hors de la barre, sur la photo du hero). Il faut
   ~850px pour que le menu tienne ; 1024px laisse de la marge si le menu
   s'allonge (il se modifie dans l'admin WordPress). Sous 1024px : menu
   burger, comme sur téléphone. Les 3 blocs @media de ce fichier et les 2
   matchMedia() de nav-toggle.js portent tous ce seuil. */
@media (min-width: 1024px) and (min-height: 500px) {
	.md-header__main {
		height: 56px;
		padding: 0 24px;
	}
}

/* Au scroll, la barre se décolle du bord en pilule complète avec un vrai
   effet "liquid glass" (demande explicite de Damien, 2026-08-28, après
   référence freefrontend.com/css-liquid-glass — plus transparent qu'un
   simple flou, avec un liseré lumineux en haut qui simule la réfraction du
   bord d'un verre) — touche ponctuelle et localisée, conforme au skill
   median-events-design (le glass est explicitement autorisé sur une barre
   sticky précise, jamais en fond de page généralisé — jamais de dégradé
   multi-teintes non plus, contrairement à des références comme nash.ai :
   seul le principe "pilule flottante + verre" est repris, pas leurs
   couleurs). saturate(180%) fait ressortir les couleurs qui transparaissent
   au travers, comme le verre liquide d'Apple — sans lui, un simple flou
   parait terne plutôt que "liquide". */
.md-header.md-scrolled .md-header__main {
	margin: 12px 16px 0;
	border-radius: var(--md-radius-pill);
	background: rgba(47, 42, 118, 0.3);
	backdrop-filter: blur(22px) saturate(180%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	box-shadow:
		0 10px 28px -10px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	justify-content: center;
}

/* Texte plus lisible malgré la transparence accrue — sans ce liseré sombre
   discret, le blanc se fond dans un arrière-plan clair selon ce qui défile
   derrière la barre. */
.md-header.md-scrolled .md-nav__list a,
.md-header.md-scrolled .md-logo {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* CTA plus contrasté une fois la barre en verre (sinon indigo sur indigo
   translucide se fond trop) — même logique que le bouton vif de nash.ai,
   avec nos propres couleurs (crème/indigo) plutôt que les leurs. */
.md-header.md-scrolled .md-header__cta {
	background: var(--md-cream);
	color: var(--md-indigo);
}

.md-logo {
	flex: none;
	display: flex;
	align-items: center;
}

.md-logo a {
	color: var(--md-white);
	font-weight: 800;
	font-size: 20px;
	text-decoration: none;
}

.md-logo img,
.custom-logo-link img {
	height: 32px;
	width: auto;
	display: block;
}

.md-nav {
	flex: 1;
	min-width: 0;
}

.md-nav__list {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.md-nav__list a {
	color: var(--md-white);
	font-weight: 600;
	font-size: 15px;
	padding: 6px 14px;
	border-radius: var(--md-radius-btn);
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.15s ease;
}

/* Page active — pastille "verre" plutôt qu'un simple soulignement, cohérent
   avec le traitement liquid glass du reste de la barre. WordPress ajoute
   automatiquement ces classes sur le <li> actif via wp_nav_menu(). */
.md-nav__list .current-menu-item > a,
.md-nav__list .current_page_item > a {
	background: rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Sous-menu (ex. "Location" > Photobooth/Sonorisation/Éclairage/Vidéo/
   Mobilier) — WordPress ajoute .menu-item-has-children automatiquement
   dès qu'un item a des enfants dans wp_nav_menu(). Petit chevron pour
   signaler qu'un sous-menu existe, cohérent avec le principe "simple,
   app-like" (Damien, 2026-08-28) : pas de flèche animée ni de fioriture. */
.md-nav__list .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.7;
}

/* Panneau du sous-menu : fond blanc franc et bordure nette (pas de
   glass) — le glass reste réservé à la barre elle-même, un sous-menu
   est un vrai panneau de lecture qui a besoin d'un contraste net,
   conforme à la charte (jamais deux couches de transparence empilées). */
.md-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 6px;
}

.md-nav__list .menu-item-has-children {
	position: relative;
}

.md-nav__list .sub-menu {
	display: none;
	position: absolute;
	/* top:100% collé (pas de margin-top) : un espace entre le déclencheur
	   et le panneau coupait le survol en diagonale, le sous-menu se
	   refermait avant que le curseur n'atteigne un item (repéré par
	   Damien sur capture réelle, 2026-08-28). padding-top comble l'espace
	   visuel tout en restant DANS la zone survolée du panneau — élargi de
	   8px à 14px (2026-08-31, retour Damien sur capture réelle : "décolle
	   un peu les sous menus de la barre menu") pour un écart visuel plus
	   net entre la barre et le panneau, même logique de survol préservée. */
	top: 100%;
	left: 0;
	min-width: 220px;
	padding-top: 14px;
	z-index: 10;
}

.md-nav__list .sub-menu::before {
	content: '';
	display: block;
	background: var(--md-white);
	border-radius: var(--md-radius-card);
	box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.25);
	position: absolute;
	inset: 14px 0 0;
	z-index: -1;
}

/* Sous-sous-menu (ex. Location > Photobooth > villes) — ouverture en
   cascade sur la DROITE plutôt qu'en dessous (2026-08-31, retour Damien :
   "les sous sous menus, ouverture sur la droite") : sans cette règle, ce
   niveau héritait top:100%/left:0 comme un sous-menu de 1er niveau et
   s'empilait sous "Photobooth" à l'intérieur du panneau "Location", au
   lieu de partir en volet à côté. Même principe zone-morte-nulle que
   ci-dessus (left:100% collé + padding-left comble l'écart visuel), même
   décalage 14px mais sur l'axe horizontal. Scopé à min-width:768px : sur
   mobile (cf. plus bas dans ce fichier) tous les sous-menus repassent en
   position:static empilés verticalement — sans ce scope, la specificité
   plus élevée de ce sélecteur (3 classes) l'aurait emporté sur le padding
   mobile malgré l'ordre du fichier. Seuil composé width+height (2026-09-02,
   cf. commentaire détaillé plus haut sur .md-header__main) pour rester
   cohérent avec le seuil desktop/mobile réel une fois le mode paysage pris
   en compte. */
@media (min-width: 1024px) and (min-height: 500px) {
	.md-nav__list .sub-menu .sub-menu {
		top: 0;
		left: 100%;
		padding-top: 6px;
		padding-left: 14px;
	}

	.md-nav__list .sub-menu .sub-menu::before {
		inset: 0 0 0 14px;
	}
}

.md-nav__list .menu-item-has-children:hover > .sub-menu,
.md-nav__list .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.md-nav__list .sub-menu a {
	color: var(--md-ink);
	display: block;
	padding: 10px 14px;
	border-radius: 6px;
	font-weight: 500;
}

.md-nav__list .sub-menu a:hover {
	background: var(--md-blue);
}

/* Bouton accordéon "villes" (.md-nav__subtoggle, injecté par
   assets/js/nav-toggle.js), caché par défaut ici — pas seulement à
   l'intérieur du bloc mobile plus bas dans ce fichier. Sans ce défaut,
   c'est le style natif du navigateur pour un <button> vide (bordure/
   padding UA) qui s'appliquait tel quel en desktop, où AUCUNE règle ne le
   stylait ni ne le masquait explicitement (tout .md-nav__subtoggle vit
   dans le bloc @media (max-width:767px) plus bas) — visible en réel dans le
   sous-menu "Location > Photobooth" desktop (retour Damien, capture
   d'écran, 2026-09-02 : un petit trait sous "Photobooth"). Le bloc mobile
   repasse cette règle à display:flex, comme avant. */
.md-nav__subtoggle {
	display: none;
}

.md-header__cta {
	white-space: nowrap;
	/* Padding du .md-btn de base (14px 28px) pensé pour un bouton isolé en
	   pleine page — trop généreux une fois collé dans la barre de menu
	   étroite (repéré par Damien sur capture réelle, 2026-08-29). Resserré
	   ici horizontalement ET verticalement, à la demande explicite de
	   Damien après un premier essai jugé encore trop large. min-height
	   annulé (sinon le 44px de .md-btn ignore le padding réduit) — cette
	   fois la barre elle-même raccourcit un peu en conséquence, c'est
	   voulu (contrairement au premier essai où seule la hauteur du bouton
	   avait été réduite par erreur, faisant paraître toute la barre plus
	   petite sans que ce soit demandé). */
	padding: 8px 16px;
	min-height: auto;
}

.md-nav__cta {
	padding: 8px 16px;
	min-height: auto;
}

/* CTA dupliqué à l'intérieur du menu déplié mobile (voir header.php) —
   cache par défaut (desktop : le CTA de la barre suffit, le menu est de
   toute façon toujours inline donc jamais "ouvert" au sens mobile). */
.md-nav__cta {
	display: none;
}

.md-nav-toggle {
	display: none;
	flex: none;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.md-nav-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--md-white);
	border-radius: 2px;
}

/* Bouton de fermeture du panneau off-canvas — masqué par défaut (desktop :
   le menu est toujours en ligne, jamais "ouvert/fermé", donc rien à
   fermer) ; passe en display:flex sous 767px, voir plus bas. Même
   raisonnement que .md-nav-toggle ci-dessus. */
.md-nav__close {
	display: none;
}

/* Contact rapide (Appeler/SMS/WhatsApp) — n'existe fonctionnellement que
   dans le panneau off-canvas mobile (voir header.php) ; jamais affiché
   hors mobile, le menu desktop garde son CTA "Voir les disponibilités"
   habituel comme seul point de contact dans la barre. */
.md-nav__quickcontact {
	display: none;
}

/* Voile jamais rendu hors mobile — n'existe fonctionnellement que pendant
   qu'un panneau off-canvas est ouvert, qui n'existe lui-même que sous
   767px (voir plus bas). */
.md-nav-backdrop {
	display: none;
}

/* Verrou de scroll du body pendant que le panneau off-canvas est ouvert
   (posé/retiré par assets/js/nav-toggle.js) — sans classe dédiée à
   .md-nav elle-même, jamais déclenché sur desktop où le bouton hamburger
   (donc cette classe) n'existe pas. */
body.md-nav-locked {
	overflow: hidden;
}

/* (max-width:1023px), (max-height:499px) : complément exact du seuil
   desktop composé (min-width:1024px) and (min-height:500px) plus haut dans
   ce fichier — mobile s'applique dès que L'UN des deux axes est trop
   petit, pas seulement la largeur (téléphone en paysage : souvent large
   mais toujours bas). Garder synchronisé avec le matchMedia() de
   assets/js/nav-toggle.js. */
@media (max-width: 1023px), (max-height: 499px) {
	/* Logo à gauche, bouton menu à droite — sans ça, une fois le CTA et le
	   menu inline masqués (ci-dessous), il ne reste que ces 2 éléments dans
	   la barre flex et rien ne les écarte : le bouton hamburger restait
	   collé au logo au lieu d'aller border droit (retour Damien, capture
	   téléphone réelle, 2026-09-01). */
	.md-header__main {
		justify-content: space-between;
	}

	/* Même correctif, mais une fois la barre "verre" active au scroll
	   (retour Damien, capture réelle, 2026-09-02) : .md-header.md-scrolled
	   .md-header__main a sa propre règle justify-content:center plus haut
	   dans ce fichier (3 classes de spécificité, pensée pour le desktop où
	   le menu en ligne doit être centré) — plus spécifique que la règle
	   .md-header__main juste au-dessus, elle l'emportait donc aussi une
	   fois scrollé sur mobile, recollant logo et hamburger au centre. */
	.md-header.md-scrolled .md-header__main {
		justify-content: space-between;
	}

	.md-nav-toggle {
		display: flex;
	}

	/* Le CTA de la ligne du haut est retiré sur mobile : avec logo +
	   bouton menu, il n'avait pas la place de tenir sur la même ligne et
	   passait seul à la ligne suivante ("mise en place à revoir", Damien
	   2026-08-28). Il réapparaît en évidence dans le panneau déplié
	   (.md-nav__cta) plutôt que de forcer une 2e ligne sur la barre. */
	.md-header__cta {
		display: none;
	}

	/*
	 * Historique de ce panneau (2 décisions successives, la 2e revient
	 * explicitement sur la 1re) :
	 *
	 * 2026-09-01 — panneau "off-canvas" plein-hauteur, collé au bord droit,
	 * glissant depuis la droite. Remplaçait l'ancien menu qui poussait le
	 * contenu en dessous du header, jugé "pas assez moderne" sur capture
	 * téléphone réelle. Mesure de référence prise en direct sur
	 * drive-turismo.fr (#fleet-mobile-menu, DOM/CSS réels via
	 * getComputedStyle) : leur "menu mobile" s'est avéré n'être qu'un
	 * simple panneau déroulant position:absolute sous la barre (top:100%,
	 * fond blanc, fade + translateY(-10px) 0.2s) — PAS un vrai panneau
	 * off-canvas. Choix délibéré d'aller plus loin que Turismo, à la
	 * demande explicite de Damien ("plus audacieux et moderne").
	 *
	 * 2026-09-02 — Damien revient sur ce choix : panneau "hors canevas"
	 * (légèrement détaché de TOUS les bords, pas seulement collé à droite),
	 * qui apparaît depuis le haut avec un effet léger plutôt qu'un grand
	 * slide plein écran. Repositionné en carte flottante sous la barre
	 * (top calé sur --md-header-height, mesurée en JS, donc toujours juste
	 * sous la barre quelle que soit sa hauteur réelle), avec une marge sur
	 * les 4 côtés et des coins arrondis sur tout le pourtour (plus
	 * seulement en interne pour les cartes de section). L'animation passe
	 * d'un slide horizontal à un fondu + léger décalage vertical, plus
	 * proche dans l'esprit du principe "fade + translateY" mesuré chez
	 * Turismo en 2026-09-01 — mais toujours pas un simple dropdown collé
	 * au bord : le détachement des bords + les coins arrondis sur tout le
	 * pourtour restent la différence structurelle avec ce que fait
	 * Turismo.
	 *
	 * Fond blanc franc sur les cartes de section, jamais de glass — un
	 * panneau de lecture a besoin de contraste net (skill
	 * median-events-design) ; l'effet verre du thème reste une touche
	 * ponctuelle réservée à la barre elle-même (.md-header__main), jamais
	 * dupliqué ici. Fond du panneau lui-même en crème (2026-09-02,
	 * direction "cartes groupées app-like") : il faut un fond qui ne soit
	 * pas déjà blanc pour que les cartes de section se détachent
	 * visuellement, même principe que .md-page sur fond crème avec ses
	 * cartes blanches ailleurs sur le site.
	 */
	/* Hauteur selon le contenu (retour Damien, 2026-09-23) : ancré en haut ET
	   en bas (bottom:12px), le panneau prenait toute la hauteur de l'écran —
	   mesuré sur le sandbox, 192px de vide sous « Contact » en iPad
	   768x1024, 348px en 820x1180. Il s'arrête désormais sous son dernier
	   élément, plafonné à l'écran (même marge de 12px en bas qu'avant), et
	   ne défile que si le contenu dépasse (téléphone bas, accordéon
	   Photobooth ouvert). Repli 100vh pour les navigateurs sans dvh. */
	.md-nav {
		position: fixed;
		top: calc(var(--md-header-height, 64px) + 12px);
		left: 12px;
		right: 12px;
		max-height: calc(100vh - var(--md-header-height, 64px) - 24px);
		max-height: calc(100dvh - var(--md-header-height, 64px) - 24px);
		max-width: 480px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		background: var(--md-cream);
		border-radius: 20px;
		box-shadow: 0 24px 48px -20px rgba(20, 18, 40, 0.4);
		padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		z-index: 1001;
		opacity: 0;
		transform: translateY(-16px);
		transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
		visibility: hidden;
	}

	.md-nav--open {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
		visibility: visible;
	}

	/* Voile plein derrière le panneau — jamais de flou dessus (même
	   principe que le fond du panneau : le glass reste sur la barre
	   sticky uniquement). Ferme le panneau au clic (nav-toggle.js). */
	.md-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(18, 16, 38, 0.5);
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.32s ease, visibility 0s linear 0.32s;
	}

	.md-nav-backdrop--visible {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.32s ease, visibility 0s linear 0s;
	}

	/* Bouton de fermeture — retour de Damien (2026-09-02) : la croix "nue"
	   flottant seule dans l'angle du panneau agaçait à l'usage. Reprise en
	   petit bouton circulaire à contour (même traitement que les boutons
	   de contact rapide juste en dessous : fond blanc, bordure fine),
	   rayon 999px (charte médian-events-design, "pills/badges arrondi
	   complet") plutôt qu'un simple pictogramme posé dans le vide — se lit
	   comme un vrai bouton, pas juste un signe de fermeture. Zone tactile
	   44px pleine conservée malgré le cercle visuel plus petit (40px).
	   Toujours dessiné en CSS pur (2 barres croisées) plutôt qu'un
	   caractère "×" typographique dont le rendu varie selon la police
	   système. */
	/* Ligne du haut — CTA + bouton de fermeture alignés (2026-09-02, retour
	   Damien) : auparavant chacun sur sa propre ligne. */
	.md-nav__top-row {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 16px;
	}

	.md-nav__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex: none;
		border: 1px solid var(--md-line);
		border-radius: 999px;
		background: var(--md-white);
		cursor: pointer;
		position: relative;
	}

	.md-nav__close-bar {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 14px;
		height: 2px;
		background: var(--md-ink);
		border-radius: 2px;
		opacity: 0.75;
	}

	.md-nav__close-bar:first-child {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.md-nav__close-bar:last-child {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* 3 boutons carrés icône + libellé, grille égale — zone tactile 44px+
	   (charte médian-events-design) via min-height, fond blanc + bordure
	   nette (jamais de glass ici, même principe que le reste du panneau). */
	.md-nav__quickcontact {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		margin: 0 0 18px;
	}

	.md-nav__quickcontact-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 60px;
		padding: 8px 4px;
		border: 1px solid var(--md-line);
		border-radius: 12px;
		background: var(--md-white);
		color: var(--md-indigo);
		font-size: 12px;
		font-weight: 700;
		text-decoration: none;
	}

	.md-nav__quickcontact-btn svg {
		width: 20px;
		height: 20px;
	}

	/* Chaque item de premier niveau (Prestations, Location, Réservation,
	   Contact) est sa propre carte — gap plutôt qu'un filet continu entre
	   eux, l'espace lui-même fait office de séparateur. */
	.md-nav__list {
		flex-direction: column;
		gap: 12px;
	}

	/* La carte : fond blanc franc + bordure nette + ombre de contact très
	   discrète (jamais de glow, skill median-events-design) — overflow:
	   hidden pour que les coins arrondis coupent proprement les filets
	   internes entre les lignes, sans avoir à répéter le rayon sur chaque
	   ligne interne. */
	.md-nav__list > li {
		background: var(--md-white);
		border: 1px solid var(--md-line);
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(20, 18, 40, 0.06);
	}

	/* Lignes hautes et généreuses (52px, mesure Turismo) — signal "liste app
	   moderne" plutôt qu'une simple pile de liens compacte. */
	.md-nav__list a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 10px 16px;
		color: var(--md-ink);
		font-size: 16.5px;
		font-weight: 700;
		border-radius: 0;
	}

	/* Filet uniquement sous le lien de tête quand la carte contient des
	   enfants (Prestations, Location) — une carte à ligne unique
	   (Réservation, Contact) n'a besoin d'aucun filet, elle EST déjà la
	   carte entière. */
	.md-nav__list > li.menu-item-has-children > a {
		border-bottom: 1px solid var(--md-line);
	}

	.md-nav__list .current-menu-item > a,
	.md-nav__list .current_page_item > a {
		background: none;
		backdrop-filter: none;
		color: var(--md-indigo);
	}

	/* Remonté en tête de panneau, sur la même ligne que le bouton de
	   fermeture (2026-09-02, retour Damien) — prend l'espace disponible,
	   la marge basse vit maintenant sur .md-nav__top-row (le parent). */
	/* 44px de haut (audit R8, lot E, 2026-09-23) — mesuré avant : 34px,
	   sous la cible tactile minimale, à côté d'une croix qui en fait 44.
	   Flex pour garder le libellé centré verticalement. */
	.md-nav__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		min-height: 44px;
		text-align: center;
	}

	/* Sous-menu affiché directement en ligne, indenté — pas de survol sur
	   mobile, pas de second niveau d'interaction (tap-to-expand) : la liste
	   reste courte (5 items max), donc tout montrer d'un coup reste simple
	   ("app-like", Damien 2026-08-28) plutôt que d'ajouter un accordéon. */
	.md-nav__list .sub-menu {
		display: block;
		position: static;
		background: transparent;
		box-shadow: none;
		margin: 0;
		padding: 0;
	}

	/* Bug corrigé (2026-09-01, repéré par test réel iframe à 375px) : le
	   panneau ::before du sous-menu desktop (fond blanc plein, box-shadow)
	   n'est déclaré nulle part scopé à min-width:768px — sans ce reset, il
	   restait généré ici même une fois .sub-menu repassé en position:static
	   ci-dessus. Toujours pertinent avec le panneau plein blanc actuel :
	   sans lui, un second rectangle blanc à ombre s'empilerait derrière un
	   fond déjà blanc. */
	.md-nav__list .sub-menu::before {
		content: none;
	}

	/* Indentation par padding-gauche (28px) plutôt que par une marge externe
	   sur .sub-menu — reste à l'intérieur de la carte, dont la bordure gère
	   déjà la délimitation visuelle avec l'extérieur. Filet entre chaque
	   ville/prestation, retiré uniquement sur la dernière ligne de CHAQUE
	   sous-liste (donc valable aussi pour le niveau villes de l'accordéon
	   Photobooth, un descendant de .sub-menu comme les autres). */
	/* border-radius:0 (J6, 2026-09-25) : le 6px du sous-menu de bureau
	   (`.md-nav__list .sub-menu a`, plus haut, 0-2-1) l'emportait sur le 0
	   de `.md-nav__list a` (0-1-1) ; chaque filet se relevait en arrondi à
	   ses deux bouts, et celui de « Photobooth » laissait un trou à côté de
	   la flèche. */
	.md-nav__list .sub-menu a {
		color: #5a5a5a;
		opacity: 1;
		min-height: 46px;
		padding: 8px 16px 8px 28px;
		font-size: 14.5px;
		font-weight: 500;
		border-bottom: 1px solid var(--md-line);
		border-radius: 0;
	}

	.md-nav__list .sub-menu > li:last-child > a {
		border-bottom: 0;
	}

	.md-nav__list .menu-item-has-children > a::after {
		display: none;
	}

	/* Accordéon du niveau imbriqué (Photobooth > villes) — retour de Damien
	   après test réel, 2026-09-02 : replié par défaut, une flèche dédiée
	   (à côté du lien, pas dessus) l'ouvre. Bouton injecté par
	   assets/js/nav-toggle.js ; ce bloc gère uniquement l'affichage. Item
	   mis en `display:flex` pour poser le bouton à côté du lien (qui garde
	   sa propre largeur flexible, `flex:1`) sans changer la hauteur de
	   ligne 52px déjà en place. */
	/* flex-wrap + flex-basis:100% sur .sub-menu ci-dessous : cet <li> a 3
	   enfants directs (lien, bouton, puis la liste des villes) — sans ça,
	   la liste des villes rejoignait la même ligne que le lien/bouton comme
	   une 3e colonne au lieu de passer en dessous (bug constaté à l'écran
	   au premier essai). */
	/* Filet posé sur le conteneur <li> lui-même (pas sur le lien ni sur le
	   bouton pris isolément) — corrige un défaut d'origine où le filet ne
	   courait que sous les 44px du bouton flèche au lieu de toute la
	   largeur de la ligne, incohérent une fois les autres lignes de la
	   carte dotées d'un filet pleine largeur (2026-09-02, chantier
	   "cartes groupées"). */
	.md-nav__item--has-subtoggle {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--md-line);
	}

	.md-nav__item--has-subtoggle:last-child {
		border-bottom: 0;
	}

	.md-nav__item--has-subtoggle > a {
		flex: 1;
		border-bottom: 0;
	}

	/* touch-action:manipulation — retour de Damien (2026-09-02) : l'ouverture
	   fonctionnait mais la fermeture (2e tap) ne réagissait pas sur son
	   téléphone réel. Le viewport du thème n'interdit pas le zoom (a11y,
	   volontaire), donc un 2e tap rapide sur un petit bouton (44px) peut
	   être interprété par le navigateur comme le début d'un geste de
	   double-tap-zoom plutôt qu'un clic simple, et le clic est alors
	   supprimé — comportement mobile connu, pas reproduit ici en
	   automatisation (le clic synthétique .click() valide la logique
	   JS/CSS elle-même, correcte dans les deux sens une fois testée en
	   isolation). Cette propriété supprime l'ambiguïté du geste sur ce
	   bouton précis, sans toucher au zoom du reste du site. */
	.md-nav__subtoggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex: none;
		border: 0;
		background: transparent;
		cursor: pointer;
		touch-action: manipulation;
	}

	/* Chevron identique dans l'esprit à celui du desktop
	   (.menu-item-has-children > a::after plus haut dans ce fichier) — vers
	   le bas replié, pivote vers le haut déplié plutôt que de changer de
	   forme, pour un mouvement continu à l'œil. */
	.md-nav__subtoggle-chevron {
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--md-ink);
		border-bottom: 2px solid var(--md-ink);
		transform: rotate(45deg);
		transition: transform 0.2s ease;
		opacity: 0.6;
	}

	.md-nav__subtoggle[aria-expanded="true"] .md-nav__subtoggle-chevron {
		transform: rotate(-135deg);
	}

	/* Replié par défaut, uniquement pour le niveau imbriqué avec bouton
	   dédié — les sous-menus de 1er niveau (Prestations, Location) ne sont
	   pas concernés, ils gardent l'affichage toujours déplié (choix du
	   2026-08-28, cf. commentaire plus haut sur .md-nav__list .sub-menu). */
	.md-nav__item--has-subtoggle > .sub-menu {
		display: none;
		flex-basis: 100%;
		margin-left: 14px;
	}

	.md-nav__item--has-subtoggle.md-nav__item--expanded > .sub-menu {
		display: block;
	}

	/* Filet de la ligne « Photobooth » coupé par la flèche (lot J, J6,
	   2026-09-25). La règle `.md-nav__item--has-subtoggle > a { border-bottom: 0 }`
	   plus haut perdait contre `.md-nav__list .sub-menu a` (spécificité
	   0-1-1 contre 0-2-1) : le lien gardait son propre filet, arrêté au bord
	   de la flèche. Mesuré sur le sandbox en 0.80.5 (390, 768, 820 px) :
	   replié, deux filets à 1px d'écart (lien seul, puis <li> pleine
	   largeur) ; déplié, sous « Photobooth », un filet qui s'arrête avant la
	   flèche. Désormais : replié, le seul filet du <li> ; déplié, un filet
	   continu sous le lien ET sous la flèche (la flèche s'étire à la hauteur
	   de la ligne, 46px, pour que les deux filets tombent au même pixel). */
	.md-nav__list .sub-menu .md-nav__item--has-subtoggle {
		align-items: stretch;
	}

	.md-nav__list .sub-menu .md-nav__item--has-subtoggle > a {
		border-bottom: 0;
	}

	.md-nav__list .sub-menu .md-nav__item--has-subtoggle > .md-nav__subtoggle {
		height: auto;
		min-height: 44px;
	}

	.md-nav__list .sub-menu .md-nav__item--expanded > a,
	.md-nav__list .sub-menu .md-nav__item--expanded > .md-nav__subtoggle {
		border-bottom: 1px solid var(--md-line);
	}
}

/* ── Coordination avec les éléments sticky du widget hub-reservation ──
   hub-reservation (plugin séparé) a ses propres éléments position:sticky
   (.hub-wizard__progress, .hub-booking-widget) mais ils ignorent totalement
   le header sticky de ce thème posé au-dessus : sans ce correctif, le
   header (z-index:999) recouvrait leur haut de carte et le CTA "Voir
   les disponibilités" du widget chevauchait le texte en dessous
   (remonté par Damien 2026-08-28, capture mobile sur /reservation/).
   --md-header-height est mesurée en JS (sticky-header.js) donc s'adapte
   automatiquement (bar utilitaire cachée sur mobile = header plus bas).
   Volontairement dans le thème et pas dans hub-reservation : ce plugin
   ne doit pas connaître l'existence d'un thème particulier — on ajoute un
   décalage par-dessus sans toucher à son propre code. */
:root {
	--md-header-height: 0px;
}

/* Écart remonté de 1rem à 1.5rem (2026-08-31, retour de Damien : "2 sticky
   au scroll, petit conflit") — le header translucide et .hub-wizard__progress
   se touchaient visuellement sans marge de respiration une fois tous les
   deux collés, un effet de flou fondu dans l'autre plutôt que deux éléments
   clairement distincts. .hub-catalog-sticky-bar (grande barre violette de
   l'étape 1) a été retirée du plugin le même jour (2026-08-31, "on va
   enlever la grande barre") — dates + panier vivent maintenant dans
   .hub-booking-widget, qui reprend le même écart 1.5rem, plus besoin des
   6rem d'origine qui ne servaient qu'à dégager cette barre disparue. */
.hub-wizard__progress {
	top: calc(1.5rem + var(--md-header-height, 0px)) !important;
}

/* Écart propre à .hub-booking-widget remonté à 2rem (2026-08-31, retour
   Damien : "le sticky est trop collé à la barre menu sticky. Aère un peu")
   — même ajustement côté hub-reservation/public/css/hub-public.css. */
.hub-booking-widget {
	top: calc(2rem + var(--md-header-height, 0px)) !important;
}

/* Changement d'étape du tunnel (audit R1, lot E, 2026-09-23) —
   hub-wizard.js#setContent() fait défiler vers #hub-wizard-content
   (scrollIntoView, block:start), et showMessage() vers
   #hub-wizard-messages : sans marge, le haut visé s'aligne sur le bord du
   viewport, donc SOUS ce header collant. Mesuré avant sur le sandbox
   (375 et 390px) : titre de l'étape 2 et de l'étape 3 à y=28px, header
   jusqu'à y=78px — la première ligne du titre illisible sous la barre.
   scroll-margin-top réserve la hauteur réelle du header (même variable
   que ci-dessus) + un écart.
   Écart ramené de 1.5rem à 0.5rem le 2026-09-23 (retour Damien : trop
   d'espace entre l'en-tête et le titre de l'étape). Mesuré sur le sandbox
   à 375 et 390px, passage 1→2 et 2→3 : titre à 52px sous l'en-tête avant
   (le défilement s'arrêtait en haut de page, l'en-tête reprenait sa forme
   haute de 54px), 36px après (défilement arrêté à 16px, en-tête en pilule
   de 78px). */
#hub-wizard-content,
#hub-wizard-messages {
	scroll-margin-top: calc(0.5rem + var(--md-header-height, 0px));
}