.md-footer {
	background: var(--md-ink);
	color: rgba(255, 255, 255, 0.82);
}

.md-footer__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 56px 24px 24px;
}

.md-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
	gap: 32px;
	align-items: start;
}

@media (max-width: 1100px) {
	.md-footer__top {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.md-footer__top {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.md-footer__top {
		grid-template-columns: 1fr;
	}
}

.md-footer__brand p {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
	max-width: 30ch;
}

.md-footer__logo img {
	height: 30px;
	width: auto;
	/* Le logo existe en version sombre pour fond clair — sur ce fond
	   sombre on l'inverse en blanc plutôt que de charger une seconde
	   variante d'asset. */
	filter: brightness(0) invert(1);
}

.md-footer__logo-text {
	color: var(--md-white);
	font-size: 18px;
}

.md-footer__col h3 {
	color: var(--md-white);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 16px;
}

.md-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.md-footer__col a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	font-size: 14px;
}

.md-footer__col a:hover {
	color: var(--md-white);
}

/* Carte de contact — fond blanc franc (jamais de transparence sur un
   panneau, cf. charte) pour ressortir nettement sur le pied de page
   sombre, à l'image de la référence envoyée par Damien. */
.md-footer__contact-card {
	background: var(--md-white);
	border-radius: var(--md-radius-card);
	padding: 24px;
	color: var(--md-ink);
}

.md-footer__contact-title {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 16px;
}

.md-footer__contact-text {
	margin: 0 0 16px;
	font-size: 14px;
	color: #6a6a6a;
	line-height: 1.5;
}

.md-footer__contact-phone {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-weight: 700;
	font-size: 15px;
}

/* Lien tel: (N14) : aucun changement de rendu, il garde la couleur et la graisse du texte qu'il remplace. Sélecteur à
   deux classes pour passer devant les règles de liens du contenu des pages (.md-page__content a). */
.md-footer__contact-card .md-footer__contact-tel {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.md-footer__contact-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2fae5c;
	flex: none;
}

/* Libellé raccourci ("Discuter avec notre équipe" -> "Écrire sur WhatsApp",
   2026-08-31, retour Damien : "vraiment moche") — dans une carte de ~330px
   utiles, l'ancien texte en 16px gras retombait sur 2 lignes, écrasées par
   le line-height:1 hérité de .md-btn. font-size réduite en filet de
   sécurité pour rester sur une seule ligne même si le texte change plus
   tard (traduction, etc.). */
.md-footer__contact-cta {
	display: block;
	width: 100%;
	text-align: center;
	border-radius: var(--md-radius-pill);
	font-size: 15px;
	white-space: nowrap;
}

/* Réutilisation de la carte de contact hors pied de page (ex. page
   Contact, sur le fond crème du site — pas le fond sombre du footer) :
   la carte a besoin de sa propre bordure/ombre pour se détacher, sinon
   blanc sur crème manque de définition. */
.md-contact-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
	align-items: start;
}

@media (max-width: 700px) {
	.md-contact-layout {
		grid-template-columns: 1fr;
	}
}

.md-contact-card--standalone {
	border: 1px solid var(--md-line);
	box-shadow: 0 4px 20px -10px rgba(0, 0, 0, 0.15);
}

.md-section-contact {
	padding: clamp(32px, 6vw, 56px) 24px;
	/* Fond unifié en crème sur toute la page d'accueil (demande explicite
	   de Damien, 2026-08-29) — cohérent avec le commentaire de
	   .md-contact-card--standalone ci-dessous, qui suppose déjà un fond
	   crème pour justifier sa bordure/ombre. */
	background: var(--md-cream);
	display: flex;
	justify-content: center;
}

.md-section-contact .md-footer__contact-card {
	max-width: 380px;
	width: 100%;
}

/* Bas de page (lot G, G7, 2026-09-24) : « © année nom » puis les liens légaux
   et « Gérer les cookies », séparés par des points médians.
   - Ordinateur (>= 900 px) : une seule ligne (© compris) ; elle tient dès
     ~760 px utiles, d'où ce seuil avec de la marge.
   - En dessous : le © et les liens dans le MÊME flux, qui passe à la ligne
     où il faut (2 lignes à 390 px sur mobile < 640 px, en 12 px, avec
     « CGL » pour « Conditions générales », cf. footer.php).
   - Zones tactiles : 34 px de haut, largeur = texte + rembourrage horizontal
     (jamais moins de 44 px, cf. min-width).
   Point médian SANS orphelin en début de ligne : chaque élément porte son « · »
   à gauche, dans une bande de --md-footer-dot px ; la liste est décalée de
   cette largeur vers la gauche et la nav rogne ce qui dépasse, donc le point
   de l'élément qui ouvre une ligne est caché. Sur ordinateur, le décalage est
   annulé : le premier point sert de séparateur après le ©. Sous 900 px, c'est
   tout le bas de page qui est décalé puis rogné (voir plus bas). */
.md-footer__bottom {
	--md-footer-dot: 10px;
	--md-footer-pad: 6px;
	margin-top: 48px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.md-footer__legal {
	margin: 0;
	font-size: 13px;
	line-height: 34px;
	color: rgba(255, 255, 255, 0.5);
}

.md-footer__legal-links {
	overflow: hidden;
}

.md-footer__legal-links ul {
	list-style: none;
	margin: 0 0 0 calc(-1 * var(--md-footer-dot));
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.md-footer__legal-links li {
	position: relative;
	padding-left: var(--md-footer-dot);
}

.md-footer__legal-links li::before {
	content: "·";
	position: absolute;
	left: 0;
	top: 0;
	width: var(--md-footer-dot);
	line-height: 34px;
	text-align: center;
	color: rgba(255, 255, 255, 0.35);
	pointer-events: none;
}

/* Liens ET bouton « Gérer les cookies » : même cible tactile. Le sélecteur à
   deux classes l'emporte sur .md-footer__cookie-link (cookie-consent.css),
   qui garde son soulignement : c'est une action, pas une page. */
.md-footer__legal-links a,
.md-footer__legal-links .md-footer__cookie-link {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	min-width: 44px;
	padding: 0 var(--md-footer-pad);
	font-size: 13px;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	/* La nav rogne ses bords (overflow) : contour de focus à l'intérieur. */
	outline-offset: -2px;
}

.md-footer__legal-links .md-footer__cookie-link {
	text-decoration: underline;
}

.md-footer__legal-links a:hover,
.md-footer__legal-links a:focus-visible,
.md-footer__legal-links .md-footer__cookie-link:hover,
.md-footer__legal-links .md-footer__cookie-link:focus-visible {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
}

/* Libellé court (« CGL ») : mobile seulement (voir plus bas). */
.md-footer__label-short {
	display: none;
}

@media (min-width: 900px) {
	/* Une seule ligne : le premier point sépare le © du premier lien, avec le
	   même espace de part et d'autre que entre deux liens. */
	.md-footer__legal {
		padding-right: var(--md-footer-pad);
	}

	.md-footer__legal-links ul {
		margin-left: 0;
	}
}

@media (max-width: 899px) {
	/* Un seul flux de texte (lot G, G7) : le © et les éléments de la liste sont
	   des blocs en ligne, qui passent à la ligne entre deux éléments, jamais au
	   milieu d'un libellé. Tout le bas de page avance dans la marge de la bande
	   du point et du rembourrage des liens (margin-left négative), bande
	   rognée ensuite (clip-path), filet du haut compris : ce qui reste visible
	   commence là où commence le reste du pied de page, textes alignés sur le
	   ©, et le « · » d'un élément qui ouvre une ligne tombe dans la bande
	   rognée. font-size: 0 neutralise les espaces du code source entre les
	   éléments ; chaque élément redonne sa taille. */
	.md-footer__bottom {
		display: block;
		margin-left: calc(-1 * (var(--md-footer-dot) + var(--md-footer-pad)));
		clip-path: inset(0 0 0 calc(var(--md-footer-dot) + var(--md-footer-pad)));
		font-size: 0;
	}

	.md-footer__legal {
		display: inline-block;
		vertical-align: top;
		padding: 0 var(--md-footer-pad) 0 calc(var(--md-footer-dot) + var(--md-footer-pad));
		white-space: nowrap;
	}

	.md-footer__legal-links,
	.md-footer__legal-links ul {
		display: inline;
		margin: 0;
		overflow: visible;
	}

	.md-footer__legal-links li {
		display: inline-block;
		vertical-align: top;
		font-size: 13px;
	}
}

@media (max-width: 640px) {
	.md-footer__bottom {
		--md-footer-dot: 7px;
		--md-footer-pad: 3px;
	}

	.md-footer__legal,
	.md-footer__legal-links li,
	.md-footer__legal-links a,
	.md-footer__legal-links .md-footer__cookie-link {
		font-size: 12px;
	}

	/* Sans « CGL », le bas de page prend 3 lignes à 390 px. */
	.md-footer__label-long {
		display: none;
	}

	.md-footer__label-short {
		display: inline;
	}
}

/* ── E-mail de la carte de contact (audit 19 points, point 18, 2026-10-11) ── */
.md-footer__contact-mail {
	display: flex;
	align-items: center;
	margin: -8px 0 16px;
	font-size: 15px;
}

.md-footer__contact-card .md-footer__contact-mail a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--md-indigo);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

/* ── Zones tactiles de 44 px sur mobile et tablette (audit 19 points, point 9) ──
   Mesuré le 2026-10-11 à 375 px : liens des colonnes à 18 px de haut, liens légaux à 34 px,
   téléphone de la carte à 24 px. Même seuil que le menu burger (1023 px) : en dessous, on
   suppose un écran tactile. Les colonnes s'allongent (44 px par lien au lieu de 28). */
@media (max-width: 1023px) {
	.md-footer__col ul {
		gap: 0;
	}

	.md-footer__col a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* Logo : le lien de l'image ne faisait que 30 px de haut. */
	.md-footer__logo a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.md-footer__contact-card .md-footer__contact-tel {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.md-footer__legal,
	.md-footer__legal-links li::before {
		line-height: 44px;
	}

	.md-footer__legal-links a,
	.md-footer__legal-links .md-footer__cookie-link {
		min-height: 44px;
	}
}

/* ── Bouton fixe « Réserver en ligne » (audit 19 points, point 10) ───────────
   template-parts/sticky-cta.php. Mobile seulement : au-delà, l'en-tête porte son propre
   bouton. Même vert signal et même texte nuit que « Réserver en ligne » de l'accroche
   (.md-hero__book, hero.css) : c'est le même bouton, qui reste à portée de pouce. Aplat
   seul, ombre de contact, aucun halo (charte Scène). Il se range sous le bandeau cookies
   (z-index plus bas) et ne masque jamais la fin de page (rembourrage du body). */
.md-sticky-cta {
	display: none;
}

@media (max-width: 767px) {
	.md-sticky-cta {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 900;
		display: block;
		transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.md-sticky-cta--cache {
		transform: translateY(calc(100% + 24px));
		opacity: 0;
		pointer-events: none;
	}

	.md-sticky-cta__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		min-height: 52px;
		padding: 0 24px;
		border-radius: var(--md-radius-pill);
		font-size: 17px;
		font-weight: 800;
		line-height: 1.2;
		background: var(--md-signal);
		border: 1px solid var(--md-signal);
		color: var(--md-night);
		box-shadow: 0 6px 18px -8px rgba(14, 13, 31, 0.45);
	}

	.md-sticky-cta__btn:hover,
	.md-sticky-cta__btn:focus-visible {
		background: var(--md-signal-hover);
		border-color: var(--md-signal-hover);
		color: var(--md-night);
	}

	.md-sticky-cta__btn:focus-visible {
		outline: 2px solid var(--md-indigo);
		outline-offset: 3px;
	}

	/* Menu ouvert : le bouton s'efface, le panneau porte déjà « Réserver en ligne ». */
	body.md-nav-locked .md-sticky-cta {
		display: none;
	}

	/* La fin de page (bas du pied de page) reste lisible au-dessus du bouton. */
	body:has(.md-sticky-cta) {
		padding-bottom: 76px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.md-sticky-cta {
		transition: none;
	}
}