/* Hauteur recalculée le 2026-08-31 (retour de Damien, à trois reprises :
   le hero restait trop grand sur un écran desktop normal, la home ne
   tenait pas avant le premier scroll contrairement à Turismo). Deux
   passes insuffisantes avant de trouver la vraie cause :
   1) reproduire la formule CSS de Turismo au pixel près
      (`min-height: calc(100svh - 56px - var(--tl-space-16))`, soit
      calc(100svh - 152px)) donnait un résultat quasi identique à l'ancien
      767px fixe sur un vrai écran desktop — la petite fenêtre de test
      masquait ce défaut.
   2) un plafond dur à 620px (min-height) a été ajouté, mais le VRAI
      contenu de la home (h1 + p + recherche + lien whatsapp) dépassait
      déjà 620px avant même le plafond — donc aucun effet visible sur
      cette page précise.
   Cause réelle trouvée en comparant élément par élément avec Turismo :
   .hx1 a `padding: 0px` (confirmé par getComputedStyle en direct) — tout
   son espacement vient d'un grid interne (1fr auto), PAS d'un padding
   généreux. Notre .md-hero avait clamp(48px,8vw,96px) de padding haut ET
   bas, soit jusqu'à 192px à lui seul (31% de la hauteur totale mesurée).
   Réduit de moitié plutôt que supprimé entièrement (on garde une marge
   de respiration, juste beaucoup moins que Turismo n'en a besoin avec sa
   structure grid différente) — c'est ce qui fait vraiment la différence
   visible, le plafond min-height n'était qu'un filet de sécurité pour
   les pages ville au contenu plus court.
   Plafond de 620px RETIRÉ le 2026-08-31 (retour de Damien, 4e passe) :
   il empêchait le hero de grandir sur un grand écran, alors que Turismo
   s'adapte réellement à la taille d'écran (constaté par Damien en passant
   d'un laptop 14" à un moniteur externe — leur hero grandit, le nôtre
   restait figé à cause du plafond). La vraie correction du "hero trop
   grand" était le padding ci-dessus, pas ce plafond — revenu à la
   formule pure calc(100svh - 152px), qui suit le viewport comme Turismo.
   Desktop uniquement pour l'instant (responsive à revoir ensuite). */
.md-hero {
	position: relative;
	overflow: hidden;
	background: var(--md-ink);
	color: var(--md-white);
	min-height: calc(100svh - 152px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px 24px;
	text-align: center;
	background-size: cover;
	background-position: center;
	box-sizing: border-box;
}

/* Photo de fond (voir commentaire d'en-tête de hero-search.php : la vidéo
   YouTube précédente s'est révélée cassée côté YouTube, remplacée en
   attendant par une vraie photo produit). Overlay sombre pour garder le
   texte blanc lisible, même principe que l'ancien recouvrement vidéo. */
.md-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(44, 44, 44, 0.55);
}

.md-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin: 0 auto;
}

/* Bande de confiance en pied de hero — calquée sur drive-turismo.fr
   (.hx1-strip) à la demande explicite de Damien : bande PLEINE LARGEUR,
   collée au bord bas de l'image (pas flottante avec de la photo visible
   en dessous) — d'où le position:absolute qui la sort du flux normal,
   sinon le padding bas de .md-hero laissait de la photo visible sous la
   bande. Desktop uniquement pour l'instant (Damien : "on fera le
   responsive après"). */
.md-hero__trust {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.08);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* La bande de confiance est en position:absolute (hors flux), donc le
   padding-bottom réduit du hero (2026-08-31, 32px fixe) ne suffit pas à
   l'écarter du dernier élément du contenu — chevauchement de 7px constaté
   en direct (bouton "Parler avec notre équipe" recouvert).
   Valeur calée au plus juste sur la bande réelle (55px mesurés) + 25px de
   respiration = 80px. FIXE, pas en vw : un premier essai en
   clamp(80px,10vw,100px) montait jusqu'à 100px sur les écrans larges,
   sans rapport avec la hauteur réellement disponible — sur un 14" large
   mais peu haut, ce padding à lui seul poussait le hero au-delà du
   premier scroll (retour de Damien sur capture réelle, 2026-08-31). */
.md-hero:has(.md-hero__trust) {
	padding-bottom: 80px;
}

/* La bande de confiance repasse dans le flux normal sur mobile plutôt que
   collée en position:absolute au bas du hero (2026-08-31 : "desktop
   uniquement pour l'instant, on fera le responsive après", cf.
   commentaire ci-dessus) — sur écran étroit, le texte du hero (h1 +
   paragraphe, qui ne wrappe pas pareil qu'en desktop) dépasse la formule
   min-height desktop, et la bande en position:absolute recouvrait le
   bouton "Réserver en ligne" (retour Damien, capture réelle, 2026-09-02 :
   "pb affichage hero section"). Repasser en flux normal élimine le
   chevauchement à la racine plutôt que de recalculer un padding-bottom
   qui devrait de toute façon suivre le nombre de lignes du texte, variable
   selon la page (hub vs pages ville, contenu différent). */
.md-hero__trust-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px 32px;
}

/* Caché par défaut — ne redevient visible que dans le contexte précis
   .md-hero__trust-inner--marquee (mobile + JS actif, cf. plus bas dans
   ce fichier). Sans cette règle par défaut, un clone injecté pendant un
   chargement mobile s'afficherait comme un vrai doublon si la page
   repasse ensuite en largeur desktop sans rechargement complet. */
[data-hub-marquee-clone] {
	display: none;
}

.md-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.82);
}

.md-hero__trust-item svg {
	width: 19px;
	height: 19px;
	color: rgba(255, 255, 255, 1);
	flex: none;
}

/* Repositionné APRÈS les règles de base .md-hero__trust-inner/-item
   ci-dessus (2026-09-02) — bug trouvé en vérifiant en réel : placé AVANT
   (comme dans une version précédente de ce bloc), ce média query perdait
   le départage de spécificité égale face aux règles de base qui le
   suivaient dans le fichier (même piège que celui déjà rencontré et
   documenté sur l'accordéon du menu mobile plus tôt dans ce chantier —
   l'ordre d'écriture tranche à spécificité égale, indépendamment de la
   présence d'un @media). */
@media (max-width: 767px) {
	/* min-height fixe plutôt que "auto" (2026-09-02, retour Damien : la
	   hauteur du hero variait sensiblement d'une page à l'autre — mesuré
	   en réel, 560px accueil / 603px hub Photobooth / 637px Beaune, page
	   hub prise comme référence par Damien). 604px (arrondi des ~603px
	   mesurés sur la page hub) devient un PLANCHER commun : la page
	   d'accueil (contenu plus court) remonte à cette hauteur, les pages
	   avec un texte plus long (ex. Beaune, paragraphe plus détaillé)
	   restent naturellement un peu plus hautes que ce plancher — jamais de
	   contenu tronqué/coupé pour forcer une égalité stricte, ce qui
	   demanderait de raccourcir le texte de chaque page au lieu d'un
	   simple ajustement CSS. Relevé à 630px (2026-09-01, retour Damien). */
	.md-hero {
		min-height: 630px;
	}

	/* Retour Damien (2026-09-02, capture réelle) : le flux normal (fix
	   précédent, historique git) réglait le chevauchement mais donnait une
	   bande flottant au milieu de la photo plutôt qu'un vrai pied de
	   bannière — demande explicite : "vraiment au pied de la hero section,
	   hauteur réduite de moitié et pleine largeur". Retour à
	   position:absolute (pleine largeur automatique, comme en desktop). */
	.md-hero__trust {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	/* 90px -> 140px (2026-09-02, retour Damien : pas assez d'écart entre le
	   bouton "Parler avec notre équipe"/"Voir les forfaits" et la bande de
	   confiance juste en dessous) — la bande reste calée en bas
	   (position:absolute, bottom:0), donc augmenter ce padding-bottom du
	   hero pousse le contenu centré (h1/p/CTA) à s'éloigner d'elle plutôt
	   que de déplacer la bande elle-même. 56px de bande réelle + ~84px de
	   respiration. */
	.md-hero:has(.md-hero__trust) {
		padding-bottom: 140px;
	}

	/* Bande à une seule ligne, défilement horizontal (même principe déjà
	   éprouvé sur ce chantier : formules photobooth, scroll-snap natif) —
	   une première tentative (padding/police réduits, empilement vertical
	   conservé) ne descendait qu'à ~246px, loin de la réduction "de
	   moitié" demandée : avec 5 phrases complètes, seul le passage en une
	   ligne défilante fait vraiment la différence. Texte jamais tronqué
	   (pas d'ellipsis) — chaque item garde sa largeur naturelle, on swipe
	   plutôt que de couper l'information. */
	.md-hero__trust-inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		scroll-snap-type: x mandatory;
		padding: 10px 20px;
	}

	.md-hero__trust-item {
		flex: none;
		white-space: nowrap;
		font-size: 12.5px;
		scroll-snap-align: start;
	}

	/* Défilement automatique (2026-09-02, retour Damien après avoir vu la
	   version swipeable manuelle en réel : "ajoute-moi un défilement
	   automatique !") — classe posée par assets/js/hero-trust-marquee.js,
	   qui double le contenu au préalable (indispensable pour une boucle
	   translateX(-50%) continue, sans saut visible). Sans JS (ou avec
	   prefers-reduced-motion), la bande reste la version swipeable
	   manuelle ci-dessus, pleinement fonctionnelle. */
	.md-hero__trust-inner--marquee {
		overflow: visible;
		scroll-snap-type: none;
		width: max-content;
		animation-name: md-hero-trust-marquee;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		/* Retour Damien (2026-09-02) : l'animation tournait bien (confirmé
		   en code) mais restait visuellement figée sur son téléphone tant
		   qu'il ne faisait pas défiler la PAGE elle-même — symptôme connu
		   sur mobile d'un calque non promu au compositing GPU, surtout pour
		   une animation transform sur un élément position:absolute niché
		   dans un conteneur flex min-height:auto. will-change force le
		   navigateur à garder ce calque actif en continu plutôt que de le
		   repeindre paresseusement au gré d'autres évènements de scroll. */
		will-change: transform;
	}

	/* Les clones ne redeviennent visibles que dans ce contexte précis
	   (scopé mobile + marquee actif) — cf. règle générale [data-hub-
	   marquee-clone]{display:none} plus bas dans ce fichier, filet de
	   sécurité pour le cas rare où la page a chargé en mobile (clones
	   déjà injectés par le JS) puis repasse en desktop sans rechargement
	   (rotation de tablette, redimensionnement manuel) : sans ce filet,
	   les clones s'afficheraient comme de vrais doublons dans la rangée
	   desktop. */
	.md-hero__trust-inner--marquee [data-hub-marquee-clone] {
		display: inline-flex;
	}

	.md-hero__trust:has(.md-hero__trust-inner--marquee) {
		overflow: hidden;
	}

	/* Pause au survol/contact — un contenu qui défile seul doit rester
	   contrôlable par l'utilisateur (bonne pratique d'accessibilité pour
	   tout mouvement automatique continu), et permet de lire un item
	   tranquillement sans qu'il ne parte hors champ. */
	.md-hero__trust-inner--marquee:hover,
	.md-hero__trust-inner--marquee:focus-within {
		animation-play-state: paused;
	}

	@keyframes md-hero-trust-marquee {
		from {
			transform: translateX(0);
		}
		to {
			/* -50% car le contenu est doublé par le JS : à mi-parcours, le
			   clone occupe exactement la position de départ du premier jeu
			   d'items — la boucle est donc invisible. */
			transform: translateX(-50%);
		}
	}
}

.md-hero h1 {
	font-family: 'Inter', var(--md-font);
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 20px;
}

.md-hero p {
	font-size: clamp(16px, 2vw, 19px);
	margin: 0 0 32px;
	color: rgba(255, 255, 255, 0.85);
}

/* Boutons du hero de l'accueil (0.80.9, consigne de Damien du 28/09, retouche
   du 29/09) : la barre de recherche « liquid glass » et son bouton
   « Rechercher » sont retirés, remplacés par :
   - « Réserver en ligne », bouton PRINCIPAL en vert signal (charte Scène du
     18/09 : « héros sombres nuit avec CTA signal », « Primaire : signal/texte
     nuit (sombre) »). Aplat seul, aucune ombre (« Aplat uniquement : jamais
     de halo, glow, ombre lumineuse » ; « aucune [ombre] en mode sombre »).
     Texte nuit #0E0D1F sur #C6EF5E : 14,52:1 ; sur le survol #B2DD45 :
     12,15:1. Hauteur 60 px, 19 px, graisse 800.
   - « Parler avec notre équipe », bouton SECONDAIRE : contour blanc, fond
     transparent (règle .md-hero .md-whatsapp-cta plus bas), 48 px, 16 px.
   - Focus clavier : anneau signal 2 px décalé de 3 px (« Focus visible :
     anneau 2 px […] signal (sombre) »).
   - Côte à côte et centrés verticalement l'un sur l'autre dès 768 px ; l'un
     sous l'autre, pleine largeur, en dessous.
   Tout est restreint à .md-hero--home : les 8 pages ville portent déjà une
   classe .md-hero__actions (mise en page en style inline), à ne pas toucher. */
.md-hero--home .md-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
}

.md-hero--home .md-hero__actions .md-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 24px;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
}

.md-hero--home .md-hero__actions .md-btn:focus-visible {
	outline: 2px solid var(--md-signal);
	outline-offset: 3px;
}

.md-hero--home .md-hero__actions .md-hero__book {
	min-height: 60px;
	padding: 0 36px;
	font-size: 19px;
	font-weight: 800;
	background: var(--md-signal);
	border-color: var(--md-signal);
	color: var(--md-night);
	transition: background-color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.md-hero--home .md-hero__actions .md-hero__book:hover {
	background: var(--md-signal-hover);
	border-color: var(--md-signal-hover);
	transform: translateY(-1px);
}

.md-hero--home .md-hero__actions .md-hero__book:active {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.md-hero--home .md-hero__actions .md-hero__book {
		transition: none;
	}

	.md-hero--home .md-hero__actions .md-hero__book:hover {
		transform: none;
	}
}

/* Position : le TITRE reste exactement où il était en 0.80.8, seuls les
   boutons descendent (retouche du 29/09).
   En 0.80.8, .md-hero__inner (titre, paragraphe, barre, bouton WhatsApp)
   était centré verticalement dans le hero. Sous le paragraphe, la barre et
   le bouton occupaient exactement (mesuré en prod le 29/09) :
   max(32 px, clamp(24px, 4vw, 40px)) + barre (62 px, 56 px sous 481 px)
   + 16 px + 46 px. Le paragraphe garde sa marge de 32 px dans
   .md-hero__inner, d'où la « réserve » ci-dessous :
   124 px + clamp(0px, 4vw - 32px, 8px), 118 px sous 481 px.
   Le hero de l'accueil devient une grille à 5 lignes :
     1fr | texte | réserve | 1fr | D
   Les deux 1fr sont le centrage d'avant, au pixel près, tant que
   texte + réserve = l'ancien bloc. D est prise sur le padding-bottom
   (80 px -> 56 px + D = 24 px ; mobile 140 px -> 44 px + D = 96 px) : la
   somme est inchangée, donc la hauteur et le centrage aussi.
   Les boutons occupent les lignes réserve -> D, calés en bas avec une marge
   fixe : ~72 px au-dessus de la bande de confiance sur ordinateur (72 + 56
   - 55 px de bande), ~55 px sur mobile (52 + 44 - 41), dans la limite du
   PLAFOND de 80 px sous le paragraphe (voir plus bas). Quand la fenêtre est
   basse (1fr = 0), ils remontent dans la réserve, jamais au-dessus : le
   paragraphe garde au moins 56 px d'air. Leur hauteur totale (+ marge)
   reste inférieure à réserve + D, si bien que la grille ne grandit jamais
   à cause d'eux. */
.md-hero--home {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr auto calc(124px + clamp(0px, 4vw - 32px, 8px)) 1fr 24px;
}

.md-hero--home:has(.md-hero__trust) {
	padding-bottom: 56px;
}

.md-hero--home .md-hero__inner {
	grid-row: 2;
	width: 100%;
}

/* PLAFOND (retouche n° 2 du 29/09, Damien) : l'écart entre le bas du
   paragraphe et le haut des boutons ne dépasse JAMAIS 80 px. Le bloc des
   boutons s'étire sur réserve -> D (align-self: stretch) mais sa hauteur est
   plafonnée : 48 px (+ les 32 px de marge du paragraphe = 80) + hauteur des
   boutons + marge basse. Les boutons sont posés en bas de ce bloc
   (align-content / justify-content: flex-end) :
   - écran bas : la zone est plus courte que le plafond, les boutons restent
     à ~72 px (ordinateur) ou 55 px (mobile) au-dessus de la bande ;
   - écran haut : le plafond joue, les boutons s'arrêtent à 80 px sous le
     paragraphe ; le titre ne bouge toujours pas, le vide du bas grandit.
   Le plafond prime sur la réduction du vide (consigne du 29/09). */
.md-hero--home .md-hero__actions {
	position: relative;
	z-index: 2;
	grid-row: 3 / 6;
	align-self: stretch;
	align-content: flex-end;
	justify-self: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 720px;
	max-height: calc(48px + 60px + 72px);
	padding-bottom: 72px;
}

@media (max-width: 767px) {
	.md-hero--home {
		grid-template-rows: 1fr auto calc(124px + clamp(0px, 4vw - 32px, 8px)) 1fr 96px;
	}

	.md-hero--home:has(.md-hero__trust) {
		padding-bottom: 44px;
	}

	/* Plafond mobile : 48 + (60 + 12 + 48) de boutons + 52 de marge basse. */
	.md-hero--home .md-hero__actions {
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: stretch;
		gap: 12px;
		max-height: calc(48px + 120px + 52px);
		padding-bottom: 52px;
	}

	.md-hero--home .md-hero__actions .md-btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.md-hero--home {
		grid-template-rows: 1fr auto 118px 1fr 96px;
	}
}

/* Bug de contraste corrigé (2026-08-31, remonté deux fois indépendamment
   par les agents des pages Prestation technique audiovisuelle et
   Éclairage) : cette règle forçait un contour/texte blanc sur TOUTES les
   utilisations de .md-whatsapp-cta, alors qu'il n'y a qu'un seul usage sur
   fond sombre (hero-search.php, dans .md-hero__inner) — les 8 autres
   usages (fin de page-animation-dj.php, page-location*.php,
   page-prestation-technique-audiovisuelle.php, ...) sont tous sur le fond
   crème de .md-page, où un bouton blanc-sur-blanc devenait quasi
   invisible. Scopé désormais à .md-hero pour ne s'appliquer que là où un
   fond sombre le justifie ; ailleurs, .md-whatsapp-cta retombe sur le
   style .md-btn--ghost par défaut (indigo sur blanc), déjà correct. */
.md-hero .md-whatsapp-cta {
	border-color: var(--md-white);
	color: var(--md-white);
}

/* Bouton du héros visible avant le premier défilement (0.85.3). Mesuré le 16/10 en 375 × 667 à la première
   visite : sur ces pages, le bandeau cookies (fixe en bas, haut à 520 px) recouvrait le bouton, posé entre
   543 et 615 px sous un chapô de 4 à 7 lignes ; la page « Location de matériel » n'en avait aucun. Sous
   480 px, le chapô est masqué (pas retiré : il reste dans la page, et s'affiche dès 481 px) et le bouton
   remonte d'autant, sans rien injecter après coup. Bouton à 48 px sur mobile (charte : 48 px partout sur
   mobile), 46 px auparavant. Les 8 pages ville portent aussi la classe (décision de Damien du 16/10 : même
   règle sur les 9 pages photobooth) ; l'accueil, déjà conforme, ne la porte pas.
   Prix court (« Dès 149 € TTC », .md-hero__prix, pages photobooth) : rendu par le gabarit, affiché seulement
   sous 480 px, à la place du chapô qui contient déjà le prix au-dessus. Aucune injection, aucun décalage. */
.md-hero__prix {
	display: none;
}

@media (max-width: 767px) {
	.md-hero--cta-visible .md-hero__inner .md-btn {
		padding-top: 15px;
		padding-bottom: 15px;
	}
}

@media (max-width: 480px) {
	.md-hero--cta-visible .md-hero__inner > p:not(.md-hero__eyebrow):not(.md-hero__prix) {
		display: none;
	}

	.md-hero--cta-visible .md-hero__inner h1 {
		margin-bottom: 28px;
	}

	.md-hero--cta-visible .md-hero__inner > .md-hero__prix {
		display: block;
		margin: -12px 0 16px;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--md-white);
	}
}