*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/* Débordement horizontal + header sticky cassé (2026-09-02, retour Damien) :
   les 2 symptômes venaient de la même cause, le panneau .md-nav (menu
   mobile) niché dans .md-header__main qui a un backdrop-filter — ce qui en
   fait le "containing block" de ses descendants position:fixed au lieu du
   vrai viewport (règle CSS peu connue). Un correctif overflow-x:hidden
   ici sur html/body avait supprimé le débordement mais cassé le header
   sticky en effet de bord (overflow-x seul sans overflow-y explicite fait
   recalculer overflow-y à "auto", transformant html/body en conteneur de
   scroll, incompatible avec position:sticky) — retiré, la vraie cause est
   corrigée à la source dans assets/js/nav-toggle.js (le panneau quitte
   .md-header__main dès qu'on est sous 1024px, piloté par matchMedia, plus
   seulement à l'ouverture) : aucun hack overflow n'est nécessaire ici. */

body {
	margin: 0;
	font-family: var(--md-font);
	color: var(--md-ink);
	background: var(--md-cream);
	line-height: 1.6;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: var(--md-indigo);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Titres équilibrés (0.83.9, consigne de Damien du 02/10) : lignes de longueur voisine, jamais un mot seul sur
   la dernière ligne. Sans effet sur un titre d'une ligne ; ignoré par les navigateurs qui ne le connaissent pas. */
h1,
h2 {
	text-wrap: balance;
}

.md-btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: var(--md-radius-btn);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	min-height: 44px;
	line-height: 1;
}

.md-btn--primary {
	background: var(--md-indigo);
	color: var(--md-white);
}

.md-btn--ghost {
	background: transparent;
	color: var(--md-indigo);
	border-color: var(--md-indigo);
}

.md-page {
	max-width: 800px;
	margin: 0 auto;
	padding: 48px 24px;
}

.md-page__header h1 {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	margin: 0 0 8px;
}

/* Typographie générique pour le contenu WordPress classique (Contact,
   mentions légales, politique de confidentialité...) — sans elle, tout
   passait par les styles par défaut du navigateur (aucune hiérarchie,
   aucun espacement cohérent avec le reste du site). */
.md-page__content h2 {
	font-size: 22px;
	font-weight: 800;
	margin: 40px 0 12px;
}

.md-page__content h3 {
	font-size: 19px;
	font-weight: 700;
	margin: 32px 0 10px;
}

.md-page__content h4,
.md-page__content h5,
.md-page__content h6 {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--md-indigo);
	margin: 28px 0 10px;
}

/* N18 (audit du 30/09, 0.83.13) : niveau de titre corrigé dans le contenu, apparence d'avant gardée. md-titre-n3 :
   un h2 qui garde l'aspect d'un h3 ; md-titre-n2 : un h3 qui garde l'aspect d'un h2 (équilibrage des lignes compris).
   :where() garde le poids de « .md-page__content h2 » (0-1-1) : la règle « premier élément sans marge haute »
   (0-2-0) passe toujours devant, comme pour le titre d'origine. */
.md-page__content h2:where(.md-titre-n3) {
	font-size: 19px;
	font-weight: 700;
	margin: 32px 0 10px;
	text-wrap: wrap;
}

.md-page__content h3:where(.md-titre-n2) {
	font-size: 22px;
	font-weight: 800;
	margin: 40px 0 12px;
	text-wrap: balance;
}

.md-page__content p {
	margin: 0 0 16px;
	line-height: 1.7;
	color: #3a3a3a;
}

.md-page__content ul,
.md-page__content ol {
	margin: 0 0 16px;
	padding-left: 22px;
	line-height: 1.7;
	color: #3a3a3a;
}

.md-page__content li {
	margin-bottom: 6px;
}

/* Liens du contenu, mais jamais les boutons du thème (.md-btn) posés dans une page : sans cette exclusion,
   l'indigo des liens s'appliquait au texte du bouton principal (indigo sur indigo, page À propos, 02/10).
   :where() garde le poids du sélecteur d'origine (0-1-1) : aucun autre lien ne change. */
.md-page__content a:where(:not(.md-btn)) {
	color: var(--md-indigo);
	font-weight: 600;
}

/* CTA "Je réserve mon matériel" (pages Sonorisation/Éclairage/Vidéo/
   Mobilier) rendu comme un vrai bouton plutôt qu'un simple lien souligné —
   même lien répété identique sur les 4 pages catégorie, vers /contact/. */
/* Pas sur un .md-btn : un bouton secondaire vers /contact/ resterait sinon plein (même raison, 02/10). */
.md-page__content a[href$="/contact/"]:where(:not(.md-btn)) {
	display: inline-block;
	background: var(--md-indigo);
	color: var(--md-white);
	padding: 12px 24px;
	border-radius: var(--md-radius-btn);
	text-decoration: none;
	font-weight: 700;
}

/* Tables de contenu (pages légales : barème d'annulation, détail des cookies).
   Largeur 100 % + cellules qui s'enroulent → aucun débordement horizontal sur
   mobile, où le viewport est étroit et le nom des cookies peut être long. */
.md-page__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
	font-size: 15px;
}

.md-page__content th,
.md-page__content td {
	border: 1px solid var(--md-line);
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
	color: var(--md-ink);
	overflow-wrap: anywhere;
}

.md-page__content thead th {
	background: var(--md-blue);
	font-weight: 700;
}

.md-page__content td code {
	font-size: 13px;
	word-break: break-all;
}

.md-page__content > *:first-child {
	margin-top: 0;
}

/* Photos de fond pleine largeur (0.82.0, inc/images.php) : le gabarit écrit une variante de 1 152 px
   dans background-image (téléphones) et l'originale dans --md-fond-l ; au-delà de 767 px, c'est
   l'originale. Le navigateur ne télécharge que celle qui s'applique. */
@media (min-width: 768px) {
	.md-fond {
		background-image: var(--md-fond-l) !important;
	}
}

/* Carte photo 4:3 (.md-photo-card, venue de page-extras.css en 0.85.6 pour servir aussi aux pages ville).
   Photo de fond (galeries des pages de matériel et DJ) ou, depuis 0.85.6, photo du thème en <img>
   (srcset, dimensions, texte alternatif : median_photo_theme_img(), inc/images.php). */
.md-photo-card {
	aspect-ratio: 4 / 3;
	border-radius: var(--md-radius-card);
	background-color: var(--md-blue);
	background-size: cover;
	background-position: center;
	border: 1px solid var(--md-line);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.md-photo-card > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Carte photo seule sous un bloc de texte, avec ou sans légende visible (/location-photobooth/, 0.85.6). */
.md-photo-figure {
	max-width: 560px;
	margin: 32px auto 0;
}

.md-photo-figure figcaption {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--md-ink);
	text-align: center;
}

/* Page 404 (0.82.0) : les trois liens côte à côte, empilés sur téléphone. */
.md-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Lien d'évitement (0.82.0, audit C15) : premier élément atteint au clavier, invisible tant qu'il
   n'a pas le focus, il saute l'en-tête et le menu. */
.md-skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10000;
	padding: 12px 20px;
	border-radius: var(--md-radius-btn);
	background: var(--md-indigo);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-200%);
}

.md-skip-link:focus {
	transform: none;
	outline: 3px solid var(--md-signal);
	outline-offset: 2px;
}