@charset "utf-8";

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto-Regular.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'RobotoThin';
	src: url('../fonts/Roboto-Thin.ttf') format('truetype');
	font-display: swap;
}

/* Définition des couleurs */
:root {
	--header-height: 100px;
	/* background colors */
	--darkest-background: #111111;
	--main-background: #222222;
	--overlay-background: #333;
	--light-background: #20352e;
	/* menu */
	--menu-background: #000000;
	--menu-border: #545e5b;
	--gray-border: #444444;
	--menu-border-bright: #ccffee;
	--menu-color: #457D70;
	--menu-hover: #4cd8ae;
	--button-dark: #143f39;
	--button-hover-bright: #8effdd;
	--button-radius: 0.5em;
	--button-radius-min: 0.25em;
	--button-padding: 8px;
	--button-margin: 0px;
	--font-size: 1em;
	--font-size-strong: 1.3em;
	--font-size-title: 2em;
	--line-height: 1.75;
	--text-menu-hover: #20352e;
	--text-color: #557d70;
	--text-hover: #4df0bf;
	--text-hover-dark: #068881;
	--category-color: #1A5166;
	--description-color: #BFEDFB;
	--text-color-content-bright: #AAA;
	--text-color-content: #8b9da1;
	--text-color-category: #1A5166;
	--text-color-description: #BFEDFB;
	--duration: 0.18s;
	--dur-slow: 0.3s;
	--easing-type: ease-in-out;
	--color-dark: #4df0bf;
	--color-darker: #457D70;
	--scrollbar-width: 0.7em;
	--max-width: 1440px;
	--min-width: 100px;
	--logo-size: 35px;
	/* Panels */
	--panel-radius: 1.2em;
	/* Effects */
	--blur: 5px;
}
::-webkit-scrollbar {
	width: var(--scrollbar-width);
	/* Définissez la largeur de la barre de défilement */
}
::-webkit-scrollbar-thumb {
	/* background-color: var(--color-darker); */
	background: linear-gradient(to bottom, var(--color-dark), var(--color-darker));
}
::-webkit-scrollbar-track {
	background-color: #222;
	/* Couleur du fond de la barre de défilement */
}
#fade {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: #000; */
	background: linear-gradient(to bottom, black, var(--main-background));
	opacity: 100%;
	display: none;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
}
#fade>img {
	animation: scaleUp 0.5s ease-out;
}
@keyframes scaleUp {
	from {
		transform: scale(0.75);
	}
	to {
		transform: scale(1);
	}
}

* {
	/* scrollbar-color: var(--color-darker) black; */
	scrollbar-color: linear-gradient(to bottom, var(--color-dark), var(--color-darker));
	scrollbar-width: var(--scrollbar-width);
}
*,
*::before,
*::after {
	box-sizing: border-box;
	vertical-align: center;
}
#cargo-3d {
	width: 100%;
	height: 600px;
}
body,
footer {
	/* position: relative; */
	font-family: Roboto, Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: var(--font-size);
	line-height: calc(var(--font-size) * var(--line-height));
	/* Remplacer cette ligne */
	/* background-color: var(--main-background); */
	/* Par celle-ci */
	background: linear-gradient(to bottom, var(--darkest-background), var(--overlay-background));
	/*background: #3C352B;*/
	/*background-image:url(img/interface/motif.jpg);*/
	background-attachment: fixed;
	background-repeat: repeat;
	background-position: left;
	margin: 0;
	/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center;
	/* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: var(--text-color);
	/*color: #557d70;*/
	overflow-x: hidden;
}
footer {
	background: transparent;
}
/* Youform */
div[data-youform-embed] {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
}
/* ------------------------------------------------ MENU */
.txt_menu {
	line-height: 0em;
	margin: 0em;
	font-size: var(--font-size);
	text-decoration: none;
	border-bottom: 0em none;
}

header,
header table {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: start;
	border: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	margin: 0 auto;
	padding: 0 auto;
	border-bottom: 1px solid var(--menu-border);
	color: var(--menu-color);
	text-decoration: none;
	background-color: var(--menu-background);
	background-attachment: fixed;
	background-size: contain;
	height: fit-content;
	/* height: var(--header-height); */

	-webkit-transition: all var(--duration) var(--easing-type);
	-moz-transition: all var(--duration) var(--easing-type);
	-o-transition: all var(--duration) var(--easing-type);
	-ms-transition: all var(--duration) var(--easing-type);
	transition: all var(--duration) var(--easing-type);
}
img {
	-webkit-transition: all var(--duration) var(--easing-type);
	-moz-transition: all var(--duration) var(--easing-type);
	-o-transition: all var(--duration) var(--easing-type);
	-ms-transition: all var(--duration) var(--easing-type);
	transition: all var(--duration) var(--easing-type);
}
.flex-img {
	max-width: 100%;
	max-height: 100vh;
	width: auto;
	height: auto;
}

.flex-bt {
	max-width: 100%;
	max-height: 100vh;
	width: auto;
	height: auto;
	background-color: black !important;
	padding: 0;
	margin: 0 auto;
	border: 0px none black;
}
main {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-x: auto;
	padding: 0;
	/* margin-top: calc(header height); */
	margin-top: var(--header-height);
	-webkit-transition: all var(--duration) var(--easing-type);
	-moz-transition: all var(--duration) var(--easing-type);
	-o-transition: all var(--duration) var(--easing-type);
	-ms-transition: all var(--duration) var(--easing-type);
	transition: all var(--duration) var(--easing-type);
}
.button {
	display: inline-block;
	padding: 10px 20px;
	background-color: black !important;
	color: var(--text-hover) !important;
	text-decoration: none;
	font-size: var(--font-size);
	border-width: 1px !important;
	border-style: solid !important;
	border-color: var(--button-hover-bright);
	border-radius: 5px;
	transition: background-color var(--duration) var(--easing-type);
	cursor: pointer;
	scale: 100%;
	overflow: visible;
	box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
	will-change: transform;
	backface-visibility: hidden;
}
.button:hover {
	background-color: var(--button-hover-bright) !important;
	color: var(--text-hover-dark) !important;
	border-color: var(--button-hover-bright);
	scale: 110%;
}
#bt-top {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99;
	padding: 10px;
	border: none;
	border-radius: 50%;
	/* background-color: var(--color-darker); */
	background: linear-gradient(to bottom, var(--color-dark), var(--color-darker));
	color: white;
	font-size: 16px;
	cursor: pointer;

	-webkit-transition: background-color var(--dur-slow) var(--easing-type);
	-moz-transition: background-color var(--dur-slow) var(--easing-type);
	-o-transition: background-color var(--dur-slow) var(--easing-type);
	-ms-transition: background-color var(--dur-slow) var(--easing-type);
	transition: background-color var(--dur-slow) var(--easing-type);
}

#bt-top:hover {
	background-color: var(--color-dark);
}

.bt-menu,
.bt-img {
	display: inline-flex;
	align-items: center;
	/* Alignement vertical du contenu */
	color: var(--menu-hover) !important;
	font-size: var(--font-size);
	font-weight: normal;
	text-decoration: none;

	margin: var(--button-margin);
	margin-top: calc(var(--button-margin) / 2);
	/* -5px */

	-webkit-border-radius: var(--button-radius-min);
	-moz-border-radius: var(--button-radius-min);
	border-radius: var(--button-radius-min);

	-webkit-transition: all var(--duration) var(--easing-type);
	-moz-transition: all var(--duration) var(--easing-type);
	-o-transition: all var(--duration) var(--easing-type);
	-ms-transition: all var(--duration) var(--easing-type);
	transition: all var(--duration) var(--easing-type);
	cursor: pointer;
}

.bt-menu {
	background-color: black;
	border: 1px solid transparent !important;
	padding: var(--button-padding);
	/* 8px */
	padding-bottom: 10px;
}

.bt-img {
	background-color: transparent;
	border: 2px solid transparent !important;
	border-bottom: 10px solid transparent !important;
	border-radius: 10px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	/* Alignement vertical du contenu */
	justify-content: center;
	/* Alignement horizontal du contenu */
	margin-bottom: 0px;
	position: relative;
	/* Assurez-vous que le positionnement est relatif pour le positionnement de l'image */
	padding-bottom: 10px;
}

.bt-menu a,
.bt-img a {
	cursor: pointer;
}

.bt-img img {
	max-width: 180px;
	transform: scale(0.8);
	transition: transform 0.15s ease;
	border: 2px solid black;
	border-radius: 10px;
	margin-top: 4px;
}

.bt-img span {
	margin: 0px;
	margin-bottom: 0px;
}

.bt-menu:hover,
.bt-img:hover {
	color: var(--menu-hover) !important;
	background-color: black !important;
	-webkit-border-radius: var(--button-radius);
	-moz-border-radius: var(--button-radius);
	border-radius: var(--button-radius);
}
.bt-menu:hover {
	padding-bottom: calc(var(--button-padding) / 1.33);
	border: 1px solid var(--menu-hover) !important;
	border-bottom: 4px solid var(--menu-hover) !important;
}
.bt-img:hover {
	/* padding-bottom: calc(var(--button-padding) / 1.33); */
	border-radius: 30px;
	border: 2px solid var(--menu-hover) !important;
	border-bottom: 10px solid var(--menu-hover) !important;
}
.bt-img:hover img {
	transform: scale(1);
	border-radius: 26px;
}
.card {
	/* Garde le contenu 3D mais permet aux clics de fonctionner normalement */
	transform-style: preserve-3d;
	pointer-events: auto;
}
.card img,
.card span {
	/* Assurez-vous que les enfants ne bloquent pas les clics */
	pointer-events: none;
}
.tilt-wrapper {
	/* Assure que le wrapper capture les événements */
	pointer-events: auto;
	cursor: pointer;
	/* Si c'est un élément cliquable */
}

/* Style pour simuler l'état hover */
/* .tilt-element.hover { */
/* Appliquez ici les styles que vous utiliseriez pour :hover */
/* } */

.tilt-container {
	position: relative;
	perspective: 500px;
	transform-style: preserve-3d;
	display: inline-block;
}

.tilt-element {
	transform-style: preserve-3d;
	transform-origin: center center;
	will-change: transform;
}

/* .tilt-element.hover {
} */

.tilt-hitzone {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}


#menu_txt {
	font-size: var(--font-size);
	color: var(--menu-hover) !important;
	font-weight: lighter;
	text-decoration: none;
	border: 0px solid var(--menu-border);
	padding: 0;
	margin: 5px;
	-webkit-border-radius: var(--button-radius);
	-moz-border-radius: var(--button-radius);
	border-radius: var(--button-radius);
}
#menu_txt:hover {
	color: var(--text-menu-hover) !important;
	font-weight: bold !important;
	font-size: var(--font-size);
	background-color: var(--menu-hover) !important;
	padding: 0;
	margin: 0px;
}
.sketchfab-embed-wrapper {
	width: 100%;
	height: 100%;
}
/* ------------------------------------------------ TEXTES */
text {
	-webkit-transition: all var(--duration) var(--easing-type);
	-moz-transition: all var(--duration) var(--easing-type);
	-o-transition: all var(--duration) var(--easing-type);
	-ms-transition: all var(--duration) var(--easing-type);
	transition: all var(--duration) var(--easing-type);
	font-size: var(--font-size);
}
.invisible_large {
	color: transparent;
	font-size: 1em;
	padding-top: 16px;
}
.invisible_med {
	font-size: 0.2em;
	color: transparent;
}
.style1 {
	color: #FFF;
	font-weight: bold;
}
.bold {
	color: var(--text-hover);
	text-align: inherit;
	font-size: inherit;
}
.txt_submenu {
	line-height: 5px;
	margin: 0px;
	font-size: var(--font-size);
}
.txt_contenu,
.txt_contenu_video,
.txt_contenu_center {
	padding: 1.0rem;
	/* Using percentage for padding */
	width: 100%;
	box-sizing: border-box;
	max-width: var(--max-width);
	/* overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word; */
}
.txt_contenu {
	color: var(--text-color-content-bright);
	text-align: justify;
	font-size: var(--font-size);
}
.txt_contenu_video {
	color: var(--text-color-content-bright);
	text-align: left;
	display: block;
	width: 100%;
}
.txt_contenu_center {
	font-size: var(--font-size);
	color: var(--text-color-content);
	font-weight: normal;
	text-align: center;
}
.txt_title {
	/*font: Roboto, CenturyGothic, Verdana, Arial, Helvetica, sans-serif;*/
	font-family: 'RobotoThin';
	font-weight: lighter;
	font-size: var(--font-size-title);
	color: var(--text-hover);
	vertical-align: top;
	text-align: center;
	line-height: calc(var(--font-size-title) * var(--line-height));
	word-spacing: 5px;
	margin-bottom: 1.0em;
	line-height: 1.5em;
	/* Valeur réduite pour diminuer l'espace interligne */
	/* Réduit l'espace après les titres */
}
p.txt_title,
p>.txt_title {
	margin-bottom: 1.0em;
}
.txt_category {
	font-size: var(--font-size);
	color: var(--text-color-category);
}
.txt_description {
	font-size: var(--font-size);
	color: var(--text-color-description);
	text-align: justify;
}
.txt_strong {
	font-size: var(--font-size-strong);
	color: var(--text-hover);
	font-weight: normal;
	/* text-align: left; */
	display: block;
	/* Force le comportement de bloc */
	padding-top: 1.0em;
	/* Espace avant avec padding qui fonctionne sur tous les éléments */
	padding-bottom: 0.0em;
	/* Espace réduit après */
}


/* ------------------------------------------------ LIENS */
a {
	display: inline-flex;
	align-items: center;
	color: var(--text-color);
	text-decoration: underline;
}
a:link {
	color: var(--text-color);
	border-bottom: 0px none;
	border-image: 0px;
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	/* transition douce 
	-o-transition:.18s;
	-ms-transition:.18s;
	-moz-transition:.18s;
	-webkit-transition:.18s;
	transition:.18s;
	*/
	-webkit-transition: all var(--duration) var(--easing-type);
	-moz-transition: all var(--duration) var(--easing-type);
	-o-transition: all var(--duration) var(--easing-type);
	-ms-transition: all var(--duration) var(--easing-type);
	transition: all var(--duration) var(--easing-type);
}
a:hover {
	color: var(--text-hover) !important;
	text-decoration: none;
	font-style: normal;
}
a:active {
	color: #fff;
	text-decoration: none;
	font-style: normal;
}
a:visited {
	color: var(--text-color);
	text-decoration: none;
}
/* ------------------------------------------------ TABLEAUX */
p {
	margin: 0.5em 0em 0.1em 0em;
}
tr {
	display: table-row;
	/* Comportement natif des lignes */
}

td {
	display: table-cell;
	/* Comportement natif des cellules */
	vertical-align: top;
	/* Aligne le contenu en haut */
}
table {
	display: table;
	/* Restaure le comportement natif des tableaux */
	width: 100%;
	border-collapse: collapse;
	/* Empêche les espaces entre les cellules */
	padding: 0;
	box-sizing: border-box;
}
.table_grid {
	display: grid;
	padding: 0;
	/* cell-spacing: 0;
	cellpadding: 0; */
	/* text-align: center; */
}
.aligned-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	/* Important pour stabiliser la largeur des colonnes */
}

.aligned-table td {
	padding: 10px;
	vertical-align: top;
	/* Pour aligner le contenu en haut */
	border: 1px solid #ccc;
	/* Pour visualiser les cellules */
}
.flex-column {
	flex: 1;
	min-width: 200px;
	/* Empêche les colonnes de devenir trop étroites */
	padding: 10px;
}
#table_about {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	/* max-width: 150px; */
	/* height: 100vh; */
	margin: 0;
	/* Supprime la marge par défaut du body */
	border: none;
	border-spacing: 0px 0;
	vertical-align: top;
	text-align: justify;
	background-repeat: no-repeat;
	background-position: top-left;
	border-collapse: collapse;
}
#table_about td {
	vertical-align: top;
	text-align: center;
	padding-left: 6px;
	padding-right: 6px;
}
.about_table {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: var(--max-width);
	padding: 0 2%;
	/* Using percentage for padding */
	margin: 0 auto;
	align-items: center;
}
.about_table_txt {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: var(--max-width);
	padding: 2% 2%;
	/* Using percentage for padding */
	align-items: center;
}
.about_table_img {
	width: fit-content;
	/* background-color: blue; */
	padding: 0 auto;
	margin: 0 auto;
	align-items: center;
}
.about_table_full {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	/* background-color: burlywood; */
	align-items: center;
	justify-content: center;
	/* Ajouter cette ligne */
}

.tableau_videos {
    /* Propriétés esthétiques conservées */
    background-color: rgba(51, 51, 51, 0.4) !important;
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid;
    border-color: var(--menu-border) !important;
    border-radius: var(--panel-radius);
    -webkit-border-radius: var(--panel-radius);
    -moz-border-radius: var(--panel-radius);
    padding: 1.5em;
    margin: 0 0 30px 0; /* Ajout d'une marge basse pour espacer les grands panneaux entre eux */
    text-align: left;
    width: 100%;
    max-width: var(--max-width);

    /* Propriétés de disposition corrigées */
    display: flex;
    flex-direction: column;   /* Force l'alignement vertical strict des menus enfants */
    align-items: stretch;     /* Étire les menus pour qu'ils occupent 100% de la largeur du panneau */
}

.video-container {
	position: relative;
	display: box;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	align-items: center;
	align-self: center;
}
.embed {
	display: block;
	width: 100%;
	border: 0;
}
/* Conteneur de base pour toutes les vidéos YouTube */
.flex-video-container {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
/* Ajoutez cette classe au conteneur parent immédiat de la vidéo */
.full-width-container {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	/* Empêche la barre de défilement horizontale */
}

.flex-video-fullwidth {
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* Pour les vidéos horizontales (16:9) */
.flex-video-h {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	/* Ratio 16:9 (9/16 = 0.5625) */
	height: 0;
}

/* Pour les vidéos verticales (9:16) */
.flex-video-v {
	position: relative;
	width: 100%;
	padding-bottom: 177.78%;
	/* Ratio 9:16 (16/9 = 1.7778) */
	height: 0;
}

/* Style pour les iframes, objets et embeds à l'intérieur des conteneurs */
.flex-video-h iframe,
.flex-video-h object,
.flex-video-h embed,
.flex-video-v iframe,
.flex-video-v object,
.flex-video-v embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* .video-container>object {
	width: 1280px;
	height: 720px;
} */

/* Grille sociale flexible */
.social-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 650px;
	margin: 0 auto;
	gap: 20px;
}

.social-section {
	flex: 1 1 auto;
	min-width: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.section-title {
	font-size: var(--font-size-strong);
	color: var(--text-hover);
	margin-bottom: 15px;
	font-weight: normal;
}

.social-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
}

.social-icons a {
	text-decoration: none;
	border: none;
}

/* Ajuster les proportions tout en garantissant l'alignement */
.social-section:nth-child(1) {
	flex: 5;
	/* PRO prend 5/10 de l'espace */
}

.social-section:nth-child(2) {
	flex: 1;
	/* ALL prend 1/10 de l'espace */
}

.social-section:nth-child(3) {
	flex: 4;
	/* FAN prend 4/10 de l'espace */
}

/* Nouvelles structures flexbox pour remplacer les tableaux */
.header-section {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	text-align: center;
}

.content-section {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 2%;
	margin-bottom: 2rem;
	gap: 2rem;
	align-items: flex-start;
}

.profile-image {
	flex: 0 0 auto;
	margin: 0 auto;
}

.content-text {
	flex: 1 1 300px;
	text-align: justify;
}

.content-text.full-width {
	flex-basis: 100%;
}

.featured-section {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 2%;
	margin-bottom: 2rem;
}

.featured-content {
	width: 100%;
	text-align: center;
}

.support-section {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1rem;
	gap: 1rem;
}

.support-text {
	font-size: var(--font-size-strong);
	color: var(--text-hover);
}

.support-buttons {
	display: flex;
	gap: 1rem;
}

.separator {
	position: relative;
	height: 1px;
	background: linear-gradient(to right,
			transparent,
			var(--color-dark) 20%,
			var(--color-dark) 80%,
			transparent);
	margin: 2rem auto;
	width: 80%;
	max-width: var(--max-width);

	/* Effet de lueur subtil */
	/* box-shadow: 0 0 8px rgba(77, 240, 191, 0.3); */

	/* Animation au survol */
	transition: all var(--duration) var(--easing-type);
}

/* Ajout d'éléments décoratifs */
.separator::before {
	content: '';
	position: absolute;
	top: -3px;
	left: 50%;
	width: 7px;
	height: 7px;
	background-color: var(--color-dark);
	border-radius: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 5px var(--color-dark);
}
/* Variante subtile avec couleur semi-transparente */
.separator.subtle {
	background: linear-gradient(to right,
			transparent,
			rgba(77, 240, 191, 0.3) 20%,
			/* Couleur semi-transparente de separator.glass */
			rgba(77, 240, 191, 0.3) 80%,
			/* Couleur semi-transparente de separator.glass */
			transparent);
	/* Pas de box-shadow pour conserver l'aspect subtil */
}

/* Point central subtilement visible pour cette variante */
.separator.subtle::before {
	background-color: rgba(77, 240, 191, 0.5);
	/* Légèrement plus visible que la ligne */
	box-shadow: none;
	/* Sans glow */
}
/* Variante avec bordure floue pour effet glassmorphism */
.separator.glass {
	background: transparent;
	backdrop-filter: blur(var(--blur));
	-webkit-backdrop-filter: blur(var(--blur));
	border-bottom: 1px solid rgba(77, 240, 191, 0.3);
}

/* Variante plus épaisse pour les séparations importantes */
.separator.thick {
	height: 3px;
	background: linear-gradient(to right,
			transparent,
			var(--color-darker) 30%,
			var(--color-dark) 50%,
			var(--color-darker) 70%,
			transparent);
}

/* Variante verticale */
.separator.vertical {
	width: 1px;
	height: 100px;
	margin: 0 2rem;
	background: linear-gradient(to bottom,
			transparent,
			var(--color-dark) 20%,
			var(--color-dark) 80%,
			transparent);
	display: inline-block;
}

/* MOBILE --------------------------------------------------*/
@media screen and (max-width: 768px) {
	body {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-self: center;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	table,
	div,
	tr,
	td,
	h1 {
		padding: 0;
		margin: 0;
		border: 0;
		flex-direction: row;
	}
	.video-container {
		visibility: hidden;
		width: 0em;
		height: 0em;
		padding: 0;
		margin: 0;
	}
	.bt-menu,
	.bt-img,
	.txt_menu {
		font-size: 0.9em;

	}
	.about_table_txt>img,
	.about_table_img,
	.about_table_img>object {
		max-width: 100%;
		max-height: 100vh;
		width: auto;
		height: auto;
	}
	.about_table {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		align-self: center;
		width: 100%;
		padding: 1em;
	}

	/* Réorganisation des cellules */
	.about_table tr {
		display: flex;
		flex-direction: column;
	}

	.about_table td {
		width: 100%;
		display: block;
		order: 1;
		/* Réinitialisation de l'ordre */
	}

	/* On place l'image en premier */
	.about_table td:first-child {
		order: 0;
		margin-bottom: 1em;
	}

	.about_table_txt {
		display: contents;
		flex-wrap: wrap;
		align-items: center;
		align-self: center;
		padding: 1em;
		width: 100% !important;
		max-width: var(--max-width) !important;
		box-sizing: border-box;
	}

	.about_table_img {
		max-width: 100%;
		margin: 0 auto;
		display: block;
		/* display: flex; */
		flex-wrap: wrap;
		align-items: center;
		align-self: center;
		width: 100%;
	}
	.about_table_full {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-self: center;
		width: 100%;
	}
	#table_about td {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-self: center;
		width: 100%;
	}
	.tableau_videos {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-self: center;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.txt_contenu,
	.txt_contenu_video,
	.txt_contenu_center {
		padding: 1em;
		/* Adjust padding for smaller screens */
	}

	.social-section {
		flex-basis: 100% !important;
	}

	.music-thumbnails {
		justify-content: center;
	}

	.music-thumbnails .bt-img {
		margin: 5px;
		/* Réduire les marges sur petit écran */
	}

	.music-thumbnails .bt-img img {
		max-width: 120px;
		/* Réduire la taille sur petit écran */
	}

	/* #header, header > table {
		display: none !important;
	  } */

	/* .mobile-header {
		display: block !important;
	  } */

	main {
		margin-top: 60px !important;
	}
}
/* ------------------------------------------------ IMAGES */
img {
	border: 0px none;
	margin: 0px;
	-webkit-transition: all var(--duration) var(--easing-type);
	-moz-transition: all var(--duration) var(--easing-type);
	-o-transition: all var(--duration) var(--easing-type);
	-ms-transition: all var(--duration) var(--easing-type);
	transition: all var(--duration) var(--easing-type);
}

.fixed-size-logo {
	width: var(--logo-size);
	height: var(--logo-size);
	vertical-align: bottom;
}

.brightness {
	text-decoration: none !important;
	border: 0px none !important;
	vertical-align: bottom;
}

.brightness img {
	word-spacing: 20px;
	/* effet de lumière */
	filter: brightness(0%);
	-webkit-filter: brightness(100%);
	-moz-filter: brightness(100%);
	-o-filter: brightness(100%);
	-ms-filter: brightness(100%);
}
.brightness img:hover {
	filter: brightness(150%);
	-webkit-filter: brightness(150%);
	-moz-filter: brightness(150%);
	-o-filter: brightness(150%);
	-ms-filter: brightness(150%);
}

/* .brightness img:hover {
	filter: brightness(150%) drop-shadow(0 0 0.3rem var(--text-hover));
	-webkit-filter: brightness(150%) drop-shadow(0 0 0.3rem var(--text-hover));
	-moz-filter: brightness(150%) drop-shadow(0 0 0.3rem var(--text-hover));
	-o-filter: brightness(150%) drop-shadow(0 0 0.3rem var(--text-hover));
	-ms-filter: brightness(150%) drop-shadow(0 0 0.3rem var(--text-hover));
} */

.brightness-sharp {
	text-decoration: none !important;
	border: 0px none !important;
	vertical-align: bottom;
}

.brightness-sharp img {
	word-spacing: 20px;
	filter: brightness(100%);
	transition: filter 0.3s ease;
}

.brightness-sharp img:hover {
	/* Augmente la luminosité de l'image */
	filter: brightness(150%)
		/* Empile plusieurs drop-shadow pour créer un contour net */
		drop-shadow(4px 0 var(--text-hover)) drop-shadow(-4px 0 var(--text-hover)) drop-shadow(0 4px var(--text-hover)) drop-shadow(0 -4px var(--text-hover));
}

.brightness.hover img,
.brightness img.hover {
	filter: brightness(150%) !important;
}

.stroked img {
	/* effet de lumière */
	filter: grayscale();
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
}
.stroked img:hover {
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-o-filter: grayscale(0);
	-ms-filter: grayscale(0);
}
.img_stores {
	text-align: left;
}
.img_stores img {
	filter: invert(0);
	-webkit-filter: invert(0);
	-moz-filter: invert(0);
	-o-filter: invert(0);
	-ms-filter: invert(0);
}
.img_stores img:hover {
	/* effet d'inversement */
	filter: invert(1);
	-webkit-filter: invert(1);
	-moz-filter: invert(1);
	-o-filter: invert(1);
	-ms-filter: invert(1);
}
.img_stores a {
	border: none;
	border-image: none;
	text-decoration: none;
	color: #000;
	border-image-width: 0;
}
#img {
	border-bottom: 0px none;
}
/* Conteneur pour les vignettes musicales */
.music-thumbnails {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	width: 100%;
	max-width: var(--max-width);
	/* Utilise votre variable existante */
}

/* Vignettes musicales individuelles */
.music-thumbnails .bt-img {
	width: auto;
	margin: 10px;
	/* Conserve les autres styles existants */
}

/* Menu mobile ultra-simplifié */
.mobile-header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: black;
	z-index: 2000;
	padding: 10px;
}

.burger-button {
	background-color: var(--menu-background, black);
	color: var(--menu-hover, #4cd8ae);
	border: 1px solid var(--menu-border, #545e5b);
	padding: 10px 15px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	display: block;
	width: 100%;
	text-align: left;
	border-radius: 4px;
}

.mobile-menu {
	display: none;
	flex-direction: column;
	background-color: black;
	border: 1px solid var(--menu-border, #545e5b);
	margin-top: 5px;
	width: 100%;
}

.mobile-menu.open {
	display: flex;
}

.mobile-menu button {
	color: var(--menu-hover, #4cd8ae);
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #333;
	text-align: left;
	padding: 12px 15px;
	cursor: pointer;
}

.mobile-menu button:hover {
	background-color: #111;
}