/*
 * Blocs réutilisables pour les pages secondaires (Animation DJ, hub
 * Location Photobooth) — ajoutés le 2026-08-28 pour habiller ces deux
 * pages jugées "vraiment pauvres visuellement" par Damien, sans toucher
 * aux fichiers utilisés par la page d'accueil (front-page.php et ses
 * template-parts, ni les règles existantes de hero.css/cards.css/
 * cta-banner.css). Réutilise au maximum les motifs déjà approuvés
 * (carte, bandeau photo) plutôt que d'inventer un nouveau langage visuel
 * — voir le skill median-events-design.
 */

/* Eyebrow blanc pour usage à l'intérieur d'un .md-hero — l'eyebrow par
   défaut (.md-page__eyebrow, cards.css) est en indigo, illisible sur une
   photo sombre avec overlay. */
.md-hero__eyebrow {
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 14px;
}

/* Galerie photo en cartes — remplace des images brutes juxtaposées sans
   habillage (ex. "Quelques soirées animées par notre DJ"). */
.md-photo-grid {
	max-width: 1000px;
	margin: 32px auto 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 0 24px;
}

@media (min-width: 640px) {
	.md-photo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Même logique que .md-prestations__grid:has(> a:nth-child(2):last-child)
   dans prestations.css : une grille à 2 éléments ne doit pas s'étirer sur
   3 colonnes avec un vide déséquilibré à droite. */
.md-photo-grid:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, 1fr);
	max-width: 680px;
}

/* .md-photo-card : déplacée dans base.css en 0.85.6 (aussi employée par les pages ville, qui ne chargent
   pas cette feuille). */

/* Panneau d'information — remplace un bloc de texte nu (ex. "Zone
   d'intervention") par une carte cohérente avec le motif .md-card. */
.md-info-panel {
	max-width: 700px;
	margin: 0 auto;
	background: var(--md-white);
	border: 1px solid var(--md-line);
	border-radius: var(--md-radius-card);
	padding: clamp(24px, 4vw, 36px);
}

.md-info-panel h2 {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 12px;
}

.md-info-panel p {
	margin: 0;
	color: #3a3a3a;
	line-height: 1.7;
}

.md-info-panel__list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.md-info-panel__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}

.md-info-panel__list svg {
	width: 18px;
	height: 18px;
	color: var(--md-indigo);
	flex: none;
}

/* Publications Instagram de @_djdamien (page DJ). Jusqu'au 2026-09-23 :
   blockquotes officiels + embed.js de Meta, qui contactaient Instagram avant
   tout choix cookies (audit S9). Désormais 3 images statiques servies par le
   thème (assets/img/dj/), chacune un lien vers le compte Instagram. */
.md-instagram-grid {
	max-width: 1040px;
	margin: 24px auto 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 0 24px;
	justify-items: center;
}

@media (min-width: 640px) {
	.md-instagram-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.md-instagram-card {
	display: block;
	width: 100%;
	max-width: 340px;
	border: 1px solid var(--md-line);
	border-radius: var(--md-radius-card);
	overflow: hidden;
	background: var(--md-white);
}

.md-instagram-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

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

/* Dernières publications copiées par inc/instagram-feed.php (T3, 2026-09-25) :
   6 ou 9 vignettes. Trois colonnes dès le mobile, comme la grille d'un profil
   Instagram — en une colonne, neuf images de 340 px feraient défiler la page
   sur près de 4 000 px à 390 px de large. Les trois images fixes gardent leur
   grille d'origine ci-dessus. */
.md-instagram-grid--feed {
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 0 16px;
}

.md-instagram-grid--feed .md-instagram-card {
	border-radius: var(--md-radius-btn);
}

@media (min-width: 640px) {
	.md-instagram-grid--feed {
		gap: 16px;
		padding: 0 24px;
	}

	.md-instagram-grid--feed .md-instagram-card {
		border-radius: var(--md-radius-card);
	}
}

.md-instagram-more {
	margin: 24px 0 0;
	text-align: center;
}

/* Vidéo de présentation embarquée (2026-08-31, page DJ) — wrapper simple en
   ratio 16:9 natif (aspect-ratio, plus besoin du hack padding-bottom
   historique), même rayon/ombre que les autres médias de la page
   (.md-photo-card) pour rester cohérent. */
.md-video-embed {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
}

.md-video-embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--md-radius-card);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Grille statique de témoignages écrits (2026-08-31, page DJ) — réutilise
   .md-review-card telle quelle (reviews.css) pour la carte ; ici une simple
   grille responsive, sans le ruban défilant de .md-reviews__grid (pensé
   pour un contenu dupliqué en boucle, pas adapté à 3 témoignages fixes). */
.md-testimonial-grid {
	max-width: 1104px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 0 24px;
}

@media (min-width: 860px) {
	.md-testimonial-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Bordure fine additionnelle (le carrousel d'avis Google au-dessus n'en a
   pas, ombre seule suffit sur fond crème en défilement) — ici les cartes
   sont statiques sur fond crème identique, la bordure aide à les détacher
   nettement du fond sans dépendre uniquement de l'ombre portée. */
.md-testimonial-grid .md-review-card {
	flex: none;
	border: 1px solid var(--md-line);
}

/* Badge tarif « À partir de 149 € TTC » (grille 2026, 0.85.0) sur les cartes ville
   de la page hub Location Photobooth (prix fixe depuis le 2026-09-25, lot R2). */
.md-city-card__price {
	display: inline-block;
	margin: 0 16px 16px;
	padding: 4px 12px;
	border-radius: var(--md-radius-pill);
	background: var(--md-blue);
	color: var(--md-indigo);
	font-size: 13px;
	font-weight: 700;
}

/* Page DJ, options (étape 3, 2026-10-01) : 3 cartes sur la 1re ligne, 2 centrées sur la 2e, empilées sur
   mobile. Grille de 6 colonnes, chaque carte en couvre 2 ; la 4e commence à la 2e colonne. */
@media (min-width: 1000px) {
	.md-benefits__grid--3-2 {
		grid-template-columns: repeat(6, 1fr);
		/* Hauteur des lignes selon le contenu (la grille de base fixe 450 px : grand vide sous des cartes courtes). */
		grid-auto-rows: auto;
	}

	.md-benefits__grid--3-2 > * {
		grid-column: span 2;
	}

	.md-benefits__grid--3-2 > :nth-child(4) {
		grid-column: 2 / span 2;
	}
}

/* Page DJ, bouton du bas (étape 3) : même vert signal et même taille que « Réserver en ligne » de
   l'accueil (.md-hero__book, hero.css). */
.md-dj-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 60px;
	padding: 0 36px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	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-dj-cta:hover {
	background: var(--md-signal-hover);
	border-color: var(--md-signal-hover);
	color: var(--md-night);
	transform: translateY(-1px);
}

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

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

	.md-dj-cta:hover {
		transform: none;
	}
}

/* /location-materiel/ (0.85.4) : air autour du bouton « Demander un devis » de fin de page, collé
 * jusqu'ici au paragraphe du dessus et au lien du dessous (les <p> de .md-benefits__header sont à
 * margin 0). 32 px puis 48 px dès 768 px : échelle de 4 px de la charte, le thème n'a pas de jeton
 * d'espacement (tokens.css ne porte que couleurs, police et rayons). */
.md-benefits__header .md-lm-devis {
	margin: 32px 0;
}

@media (min-width: 768px) {
	.md-benefits__header .md-lm-devis {
		margin: 48px 0;
	}
}

/* FAQ qui prolonge la section du dessus, même fond (/location-photobooth/, 0.85.6) : sans ce réglage, les deux
   marges internes s'additionnaient (environ 160 px de vide crème entre la photo et le titre de la FAQ). */
.md-faq--suite {
	padding-top: 0;
}

/* Galerie en carrousel (« Quelques soirées animées », page DJ, 0.85.11 ; markup : median_galerie(), inc/images.php).
   Grandes photos en hauteur (4:5), défilement natif au doigt avec calage (scroll-snap), la suivante dépasse
   à droite sur mobile. Flèches et compteur : assets/js/galerie.js ; .is-fit (tout tient à l’écran) les masque
   et centre les photos. Aucun défilement automatique. */
.md-gallery { max-width: 1100px; margin: 32px auto 0; }
.md-gallery__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; padding: 0 24px 4px; margin: 0; list-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.md-gallery__track::-webkit-scrollbar { display: none; }
.md-gallery__slide { flex: 0 0 84%; scroll-snap-align: center; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--md-radius-card, 12px); overflow: hidden; background: var(--md-blue, #2F2A76); border: 1px solid var(--md-line, #e2ddd2); }
.md-gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) { .md-gallery__slide { flex-basis: 340px; scroll-snap-align: start; } }
.md-gallery.is-fit .md-gallery__track { justify-content: center; }
.md-gallery__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.md-gallery.is-fit .md-gallery__nav { display: none; }
.md-gallery__btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--md-line, #e2ddd2); background: #fff; color: #2F2A76; display: grid; place-items: center; cursor: pointer; padding: 0; }
.md-gallery__btn:disabled { opacity: .35; cursor: default; }
.md-gallery__btn svg { width: 20px; height: 20px; }
.md-gallery__count { min-width: 56px; text-align: center; font-weight: 700; font-size: 15px; color: #2C2C2C; font-variant-numeric: tabular-nums; }