/* --------------------------------------------------------------
   Responsive — baseline technique (2026), sans modifier le design
   d'origine au-dessus de 1000px. Objectif : plus aucun défilement
   horizontal, images fluides, colonnes empilées sur petits écrans.
   Principle : ajouter ici, ne rien enlever aux feuilles d'origine.
   -------------------------------------------------------------- */

/* --------------------------------------------------------------
   Menu survol : les sous-menus « clignotent »/disparaissent quand
   la souris passe de l'item vers son panneau (Plan & Accès…).
   Origine : style.css bascule l'item en position:static au survol
   et le sous-menu (absolu, top:35px) se repositionnait depuis le
   conteneur du menu, avec un interstice non survolable entre les
   deux. Correction : chaque item reste position:relative (le
   panneau s'ancre sur l'item même) et top:100% — collé à son bas,
   sans interstice. Sans interstice, plus de perte de :hover.
   -------------------------------------------------------------- */
#topnav li,
#topnav li:hover,
#topnav li.sfhover {
	position: relative;
}
#topnav li ul {
	top: 100%;
}
#topnav li:hover,
#topnav li.sfhover {
	z-index: 21; /* le panneau toujours au-dessus des items voisins */
}

/* --- Fluidité générale --- */
img, video, object, embed, iframe {
	max-width: 100%;
	height: auto;
}

@media (max-width: 1019px) {

	#frame, #container {
		width: 100% !important;
		margin: 0 auto;
	}
	.pad_container {
		width: auto !important;
		margin: 0 20px !important;
	}
	#header {
		width: auto !important;
		max-width: 100%;
	}
	/* Sliders JS dimensionnés en dur (940px) : on les rend fluides */
	#slideshow, #slideshowHolder, #s3slider, .s3slider,
	#farme-slider-portfolio, #slider {
		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
	}
	#slideshowHolder img, #slider li img, .s3slider img,
	.js #slideshowHolder div {
		width: 100% !important;
		height: auto !important;
	}
	body {
		overflow-x: hidden;
	}
}

@media (max-width: 768px) {

	body {
		font-size: 13px;
		line-height: 19px;
	}

	/* En-tête : logo et icônes centrés */
	#top {
		height: auto !important;
		padding: 15px 0 !important;
	}
	#top-left, #top-right {
		width: auto !important;
		float: none;
		text-align: center;
		margin: 0 auto !important;
	}
	#top-right a {
		display: inline-block;
		float: none;
	}

	/* Menu : items plus compacts, sans largeur fixe */
	#top-navigation {
		padding-bottom: 30px !important;
	}
	#topnav, #topnav ul {
		text-align: center;
	}
	#topnav li {
		width: auto !important;
		margin-right: 12px !important;
	}
	#topnav li li {
		width: auto !important;
	}

	/* Colonnes empilées */
	.three_column li, .four_column li, .two_column li {
		width: 100% !important;
		float: none;
		margin: 0 0 25px 0;
	}
	#foot-col1, #foot-col2, #foot-col3 {
		width: 100% !important;
		float: none;
		margin: 0 0 20px 0;
	}
	#copyright, #footermenu {
		width: 100% !important;
		float: none;
		text-align: center;
	}
	#footermenu ul {
		float: none !important;
		display: inline-block;
	}

	/* Formulaires pleine largeur */
	input[type="text"], .inputbox, textarea {
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Popups et bannières */
	.popup_block, #modal_window, #rgpd_banner {
		width: 90% !important;
		position: fixed !important;
		top: 20px !important;
		left: 5% !important;
		margin: 0 !important;
		max-height: 85vh;
		overflow: auto;
	}
	#mask {
		position: fixed !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* Blocs artistes (thumb + citation) */
	.ts-thinkbox-quote {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
	.ts-thinkbox-thumb img, .ts-thinkbox-thumb2 img,
	.imgborder, .imgborder2 {
		width: auto;
		max-width: 100%;
	}

	#content .invith6 {
		margin-left: 0 !important;
	}
}