/* =====================================================================
   COMPLEXE LE TREMPLIN - Feuille de style unique du site
   ---------------------------------------------------------------------
   Couleurs utilisées sur le site (pour en changer une : Rechercher /
   Remplacer le code couleur dans tout ce fichier, Ctrl + H) :
     #0b0b0d  fond noir de la page
     #16161a  fond des cases
     #2a2a31  traits fins et bordures
     #f2f0eb  texte blanc cassé
     #a9a6a0  texte gris
     #e2b54a  or (boutons, titres, liens)

   La mise en page utilise des tableaux pour s'afficher correctement
   dans Expression Web (mode Création). Les blocs "@supports" et "@media"
   en bas servent aux navigateurs récents et aux téléphones.
   ===================================================================== */

@font-face {
	font-family: "Caviar Dreams";
	src: url("../fonts/CaviarDreams-webfont.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

/* ---------- Base ---------- */
html, body {
	margin: 0;
	padding: 0;
	background-color: #0b0b0d;
}
body {
	color: #f2f0eb;
	font-family: "Segoe UI", Tahoma, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.55;
}
img { border: 0; }
a { color: #e2b54a; }
a:hover { color: #f3cf7a; }

/* tableaux de mise en page */
table.grille {
	width: 100%;
	border-collapse: separate;
	border-spacing: 16px 0;
}
table.grille td { vertical-align: top; padding: 0; }

.conteneur {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
.section { padding: 64px 0; }
.section-collee { padding-top: 0; }

/* Titres de section */
.titre-section {
	font-family: "Caviar Dreams", "Segoe UI", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 30px;
	text-align: center;
	margin: 0 0 8px;
	color: #f2f0eb;
}
.sous-titre-section {
	text-align: center;
	color: #a9a6a0;
	margin: 0 0 32px;
}
.filet {
	width: 64px;
	height: 2px;
	border: 0;
	background-color: #e2b54a;
	color: #e2b54a;
	margin: 0 auto 18px;
}

/* ---------- Boutons ---------- */
.boutons { text-align: center; line-height: 3.6; }
.bouton {
	padding: 14px 26px;
	margin: 0 6px;
	border-radius: 30px;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
}
.bouton-or { background-color: #e2b54a; color: #141210; }
.bouton-or:hover { background-color: #f3cf7a; color: #141210; }
.bouton-contour { border: 1px solid #8a8780; color: #f2f0eb; }
.bouton-contour:hover { border-color: #e2b54a; color: #e2b54a; }

/* =====================================================================
   EN-TÊTE ET MENU  (fichier : partials/menu.php)
   ===================================================================== */
.entete {
	background-color: #0b0b0d;
	border-bottom: 1px solid #2a2a31;
}
table.entete-table {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	border-collapse: collapse;
}
.entete-table td { padding: 12px 20px; vertical-align: middle; }
.entete-logo { width: 90px; }
.entete-logo img { display: block; }
.entete-menu { text-align: right; }

#ouvrir-menu { display: none; }
.bouton-menu { display: none; }

.menu { margin: 0; padding: 0; list-style: none; }
.menu li { display: inline; margin: 0; padding: 0; }
.menu a {
	padding: 8px 9px;
	color: #f2f0eb;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.12em;
}
.menu a:hover { color: #e2b54a; }

/* la page en cours est en or dans le menu (classe sur la balise body) */
.p-accueil .m-accueil a, .p-soirees .m-soirees a, .p-tarifs .m-tarifs a,
.p-navettes .m-navettes a, .p-salles .m-salles a, .p-reglement .m-reglement a,
.p-plan .m-plan a, .p-contact .m-contact a {
	color: #e2b54a;
	border-bottom: 2px solid #e2b54a;
}

/* =====================================================================
   PAGE D'ACCUEIL
   ===================================================================== */
.accueil-haut {
	padding: 90px 20px 80px;
	text-align: center;
	background: #0b0b0d url("../images/image%20tremplin%20couve.jpg") center 30% no-repeat;
	background-size: cover;
}
.logo-grand { width: 300px; height: auto; margin: 0 0 24px; }
.accroche {
	font-family: "Caviar Dreams", "Segoe UI", sans-serif;
	font-weight: normal;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	margin: 0 0 14px;
	color: #ffffff;
}
.infos-ouverture { color: #d6d3cd; font-size: 18px; margin: 0 0 24px; }
.infos-ouverture strong { color: #e2b54a; }

/* ---------- Affiches (images 370 x 523, les unes à côté des autres) ---------- */
.affiches { text-align: center; }
.affiches img {
	width: 370px;
	max-width: 100%;
	height: auto;
	margin: 0 10px 24px;
	vertical-align: top;
	border-radius: 6px;
}
.affiche-large img { width: 740px; }

/* ---------- Infos pratiques (3 cases) ---------- */
table.infos-pratiques {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #2a2a31;
	border-bottom: 1px solid #2a2a31;
}
.infos-pratiques td {
	width: 33%;
	padding: 26px 16px;
	text-align: center;
	vertical-align: top;
	color: #a9a6a0;
	font-size: 15px;
}
.infos-pratiques .chiffre {
	display: block;
	font-family: "Caviar Dreams", "Segoe UI", sans-serif;
	font-size: 30px;
	color: #e2b54a;
}

/* ---------- Cases (fond gris, bord fin) ---------- */
td.case {
	width: 25%;
	padding: 24px 20px;
	background-color: #16161a;
	border: 1px solid #2a2a31;
	border-radius: 10px;
	font-size: 15px;
	color: #a9a6a0;
}
.case .titre-case { display: block; margin: 0 0 8px; font-size: 19px; font-weight: bold; }
.case .titre-case a { color: #f2f0eb; text-decoration: none; }
.case .texte-case { display: block; margin-bottom: 12px; }
.case .lien { font-size: 14px; font-weight: bold; text-decoration: none; }
.case svg { width: 34px; height: 34px; stroke: #e2b54a; display: block; margin-bottom: 10px; }

/* ---------- Les 4 salles (fichier : partials/salles.php) ---------- */
td.salle { width: 25%; text-align: left; }
.salle img {
	display: block;
	width: 100%;
	height: 260px;
	border-radius: 10px;
}
.salle .nom-salle {
	display: block;
	margin-top: 10px;
	font-family: "Caviar Dreams", "Segoe UI", sans-serif;
	font-size: 22px;
	color: #f2f0eb;
	text-decoration: none;
}
.salle .style-salle { display: block; color: #a9a6a0; font-size: 14px; }

/* ---------- Réseaux sociaux ---------- */
table.reseaux { margin: 0 auto; border-collapse: separate; border-spacing: 12px 0; }
.reseaux td {
	padding: 14px 26px;
	border: 1px solid #2a2a31;
	border-radius: 30px;
}
.reseaux a { color: #f2f0eb; text-decoration: none; font-weight: bold; }
.reseaux a:hover { color: #e2b54a; }
.reseaux small { display: block; color: #a9a6a0; font-weight: normal; }

/* ---------- Compteur de visites (accueil) ---------- */
.compteur { text-align: center; padding: 0 20px 56px; }
.compteur-titre {
	color: #a9a6a0;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 13px;
	margin: 0 0 10px;
}

/* =====================================================================
   PAGES INTÉRIEURES
   ===================================================================== */
.page-titre {
	padding: 56px 20px 40px;
	text-align: center;
	background: #0b0b0d url("../images/fond%20page%20site1.jpg") center no-repeat;
	background-size: cover;
	border-bottom: 1px solid #2a2a31;
}
.page-titre h1 {
	font-family: "Caviar Dreams", "Segoe UI", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 38px;
	margin: 0 0 10px;
	color: #ffffff;
}
.page-titre p { color: #d6d3cd; margin: 0 auto; max-width: 640px; }

.texte-page h2 {
	font-size: 21px;
	color: #e2b54a;
	margin: 30px 0 12px;
}
.texte-page p { margin: 0 0 14px; }
.texte-centre { max-width: 720px; margin: 0 auto; }

.liste { margin: 0 0 8px; padding: 0 0 0 22px; }
.liste li { margin-bottom: 10px; }
.liste li strong { color: #ffffff; }

/* encadré important (rouge) */
.encadre {
	border: 1px solid #e0242d;
	background-color: #2a1113;
	border-radius: 10px;
	padding: 18px 22px;
	margin: 0 0 24px;
}
.encadre strong { color: #ff6b70; }

/* encadré info (or) */
.encadre-or {
	border: 1px solid #8a6f2e;
	background-color: #1f1a10;
	border-radius: 10px;
	padding: 18px 22px;
	margin: 26px 0 0;
}

/* deux colonnes : texte à gauche + affiche à droite */
table.deux-colonnes { width: 100%; border-collapse: collapse; }
.deux-colonnes td { vertical-align: top; }
td.colonne-texte { width: 60%; padding-right: 40px; }
td.colonne-affiche { width: 40%; text-align: center; }
.colonne-affiche img {
	width: 370px;
	max-width: 100%;
	height: auto;
	margin: 0 0 20px;
	border-radius: 6px;
}

/* ---------- Galerie photos des salles ---------- */
.galerie { text-align: center; }
.galerie img {
	width: 31%;
	height: auto;
	margin: 0 0.8% 14px;
	vertical-align: top;
	border-radius: 8px;
}
.retour { text-align: center; margin-top: 36px; }

/* ---------- Carte Google (page Plan) ---------- */
.carte { border: 1px solid #2a2a31; border-radius: 10px; overflow: hidden; }
.carte iframe { display: block; width: 100%; height: 560px; border: 0; }

/* ---------- Coordonnées (pages Plan et Contact) ---------- */
td.coordonnee {
	width: 33%;
	padding: 22px;
	background-color: #16161a;
	border: 1px solid #2a2a31;
	border-radius: 10px;
	font-size: 16px;
}
.coordonnee h3 {
	margin: 0 0 8px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #e2b54a;
}
.coordonnee p { margin: 0; word-wrap: break-word; }
.espace { height: 18px; }

/* =====================================================================
   PIED DE PAGE  (fichier : partials/bas.php)
   ===================================================================== */
.pied {
	border-top: 1px solid #2a2a31;
	padding: 48px 0 24px;
	color: #a9a6a0;
	font-size: 15px;
	background-color: #08080a;
}
table.pied-colonnes { width: 100%; border-collapse: collapse; }
.pied-colonnes td { width: 33%; vertical-align: top; padding-right: 24px; }
.pied h4 {
	color: #f2f0eb;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 14px;
	margin: 0 0 14px;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 6px; }
.pied a { color: #a9a6a0; text-decoration: none; }
.pied a:hover { color: #e2b54a; }
.logo-pied { width: 150px; height: auto; margin-bottom: 14px; }
table.mentions {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #2a2a31;
	margin-top: 36px;
	font-size: 13px;
}
.mentions td { padding-top: 18px; }
.mentions td.droite { text-align: right; }

/* =====================================================================
   NAVIGATEURS RÉCENTS UNIQUEMENT (Expression Web ignore ce bloc)
   ===================================================================== */
@supports (display: grid) {
	* { box-sizing: border-box; }
	html { scroll-behavior: smooth; }
	.entete { position: sticky; top: 0; z-index: 50; background-color: rgba(11,11,13,.94); }
	.accueil-haut {
		background-image:
			linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.82) 70%, #0b0b0d 100%),
			url("../images/image%20tremplin%20couve.jpg");
	}
	.page-titre {
		background-image:
			linear-gradient(180deg, rgba(11,11,13,.70), #0b0b0d),
			url("../images/fond%20page%20site1.jpg");
	}
	.affiches img, .colonne-affiche img { box-shadow: 0 18px 40px rgba(0,0,0,.55); transition: transform .2s ease; }
	.affiches a:hover img, .colonne-affiche a:hover img { transform: translateY(-4px); }
	td.case { transition: border-color .2s ease; }
	td.case:hover { border-color: #e2b54a; }
	.salle img { object-fit: cover; transition: transform .35s ease; }
	.salle a:hover img { transform: scale(1.03); }
	.galerie {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
	.galerie a { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; }
	.galerie img { width: 100%; height: 100%; margin: 0; object-fit: cover; transition: transform .35s ease; }
	.galerie a:hover img { transform: scale(1.04); }
}

/* ---------- Image en grand (clic sur une photo ou une affiche) ---------- */
.visionneuse {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100;
	background-color: rgba(0,0,0,.92);
	display: flex; align-items: center; justify-content: center;
	padding: 56px 64px;
}
.visionneuse[hidden] { display: none; }
.visionneuse figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.visionneuse img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 4px; }
.visionneuse figcaption { color: #a9a6a0; font-size: 15px; }
.visionneuse button {
	position: absolute;
	background-color: #1c1c20;
	border: 1px solid #555;
	color: #ffffff;
	width: 48px; height: 48px;
	border-radius: 50%;
	font-size: 24px; line-height: 1;
	cursor: pointer;
}
.visionneuse button:hover { border-color: #e2b54a; color: #e2b54a; }
.visionneuse .fermer { top: 14px; right: 14px; }
.visionneuse .precedent { left: 12px; top: 50%; margin-top: -24px; }
.visionneuse .suivant { right: 12px; top: 50%; margin-top: -24px; }

/* =====================================================================
   TÉLÉPHONES ET TABLETTES
   ===================================================================== */
@media (max-width: 980px) {
	/* les tableaux passent en colonne */
	table.grille, table.grille tbody, table.grille tr, table.grille td,
	table.deux-colonnes, table.deux-colonnes tbody, table.deux-colonnes tr, table.deux-colonnes td {
		display: block;
		width: auto;
	}
	table.grille { border-spacing: 0; }
	table.grille td { margin-bottom: 16px; }
	td.colonne-texte { padding-right: 0; }
	td.colonne-affiche { margin-top: 24px; }
	.salle img { height: 300px; }
	.galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.galerie img { width: 47%; }
}

@media (max-width: 860px) {
	.entete { position: sticky; }
	.entete-table td { padding: 10px 16px; }
	.entete-menu { position: static; }
	.bouton-menu {
		display: inline-block;
		padding: 10px 14px;
		border: 1px solid #2a2a31;
		border-radius: 8px;
		color: #f2f0eb;
		cursor: pointer;
		text-transform: uppercase;
		font-size: 13px;
		letter-spacing: 0.12em;
	}
	.menu {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background-color: #0b0b0d;
		border-bottom: 1px solid #2a2a31;
		padding: 6px 20px 16px;
		text-align: left;
	}
	.menu li { display: block; }
	.menu a { display: block; padding: 14px 4px; border-bottom: 1px solid #2a2a31; }
	#ouvrir-menu:checked ~ .menu { display: block; }

	table.infos-pratiques, table.infos-pratiques tbody, table.infos-pratiques tr, table.infos-pratiques td,
	table.pied-colonnes, table.pied-colonnes tbody, table.pied-colonnes tr, table.pied-colonnes td,
	table.mentions, table.mentions tbody, table.mentions tr, table.mentions td {
		display: block;
		width: auto;
	}
	.infos-pratiques td + td { border-top: 1px solid #2a2a31; }
	.pied-colonnes td { padding: 0 0 26px; }
	.mentions td.droite { text-align: left; padding-top: 6px; }
	.accueil-haut { padding: 56px 16px 52px; }
	.logo-grand { width: 220px; }
	.accroche { font-size: 30px; }
	.section { padding: 48px 0; }
	.carte iframe { height: 420px; }
}

@media (max-width: 560px) {
	.titre-section { font-size: 24px; }
	.page-titre { padding: 40px 16px 30px; }
	.page-titre h1 { font-size: 28px; }
	.affiches img { margin-left: 0; margin-right: 0; }
	.galerie { grid-template-columns: 1fr; }
	.galerie img { width: 100%; }
	table.reseaux, table.reseaux tbody, table.reseaux tr, table.reseaux td { display: block; }
	table.reseaux { border-spacing: 0; }
	.reseaux td { margin-bottom: 12px; text-align: center; }
	.visionneuse { padding: 64px 10px; }
	.visionneuse .precedent, .visionneuse .suivant { top: auto; bottom: 10px; margin-top: 0; }
	.conteneur { padding: 0 16px; }
}