/*
Theme Name: Pas une jam
Theme URI: https://www.pasunejam.be/
Description: Thème WordPress personnalisé du site Ceci n’est pas une jam.
Author: Alain Wibert
Version: 1.0.0
Text Domain: pasunejam
*/



/* ==================================================
   VARIABLES
   ================================================== */


:root {

	--font-body: "Outfit", Arial, sans-serif;
	--font-title: "Playfair Display", Georgia, serif;
	--color-background-black: #000000;
	--color-background-white: #FAF3E8;
	--color-text: #7A6B58;
	--color-text-green: #2A6B3A;
	--color-text-dark: #1C1209;
	--color-primary: #b43e20;
	--color-light-brown: #c67a38;
	--color-white: #F0E4CE;


	
	--content-width: 1440px;
}

.bg-white {var(--color-background-white);}
.text-brown  {color: var(--color-text);}
.text-dark  {color: var(--color-text-dark);}
.text-white  {color: var(--color-white);}
.text-primary  {color: var(--color-primary);}

/* ==================================================
   BASE
   ================================================== */

body {
	
	background-color: var(--color-background-black);
	color: var(--color-text);
	font-family: var(--font-body);
}

/* Titre principal */

h1 {
color: var(--color-white);
font-family: var(--font-title);
font-size: clamp(46px, 4.1vw, 68px);
font-style: italic;
font-weight: 400;
line-height: 3.96rem;
margin: 0;
padding: 20px 0 0;

	}
	
#create-account h1,
#inscription h1 {
color: var(--color-text-dark);
font-size: 2.8rem;
font-style: normal;
font-weight: 400;
line-height: 3.5rem;
padding:0 0 20px 0;
}

h2, .h2 {
color: var(--color-text-dark);
font-family: var(--font-title);

font-style: normal;
font-weight: 400;
padding:0 0 0px 0;
line-height: 3.25rem; /* 125% */


	font-size: clamp(2.1rem, 4vw, 3.4rem);

	line-height: 1.08;
	letter-spacing: -0.025em;

}

h3, .h3 {
color: var(--color-text);
font-family: var(--font-title);
	font-size: 1.25rem;
font-style: normal;
font-weight: 400;
line-height: 1.5625rem; /* 125% */
}


.hidden,
p:empty {display: none;}

/* Surtitre */

#accueil  .sup-title {color: var(--color-light-brown);}

.sup-title {


	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 1.25rem;
	color: var(--color-primary);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;

/*

	margin: 0 0 20px;
color:var(--color-light-brown);


	font-size: clamp(10px, 0.7vw, 12px);
	font-weight: 600;
	line-height: 1.3;

	letter-spacing: 0.24em;
	text-transform: uppercase;
	*/
}


.sup-title::before {
	width: 2.5rem;
	height: 1px;
	background-color: currentColor;
	content: "";
}
.section-header > p {
	max-width: 680px;
	margin: 1.25rem 0 0;
	color: rgb(36 23 17 / 72%);
	font-size: 1rem;
	line-height: 1.7;
}
.border {border:1px solid red!important;}

.hidden {position:absolute;top:-99999px;}	
.hide-for-mobile {display:block;}
.hide-for-desktop {display:none;}
.overflow-hidden {overflow:hidden;}
.overflow-visible {overflow:visible;}
.visibility {visibility:hidden;}
.flex {display:flex;padding:0;margin:0;}
.flex li {list-style:none;padding:0;margin:0;}
.flex.column {flex-direction: column;}
.flex.row {flex-direction: row;}
.flex.direction-column {flex-direction: column;}
.flex.direction-row {flex-direction: row;}
.flex.center{align-items: center; justify-content: center;}
ul li:before  {display:none;}

/* =========================================================
  LOGIN
   ========================================================= */
.registration-panel__close {z-index: 2;}


.member-profile-photo__file-field > label {display: none;}
.member-profile-photo__zoom {    padding: 20px 0 0 0;}

 /* Champ fichier : masque le nom du fichier */
#pasunejam-profile-photo-file {
	width: auto;
	max-width: 100%;
	color: transparent;
	font-size: 0;
}


/* Bouton natif « Choisir un fichier » */
#pasunejam-profile-photo-file::file-selector-button {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-primary);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	cursor: pointer;
}


/* Safari */
#pasunejam-profile-photo-file::-webkit-file-upload-button {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-primary);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	cursor: pointer;
}


/* Bouton « Enregistrer ma photo » */
.member-profile-photo__save-button {
	display: inline;
	min-height: 0;
	margin-top: 1rem;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--color-primary);
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	cursor: pointer;
}


/* Survol commun */
#pasunejam-profile-photo-file::file-selector-button:hover,
#pasunejam-profile-photo-file::-webkit-file-upload-button:hover,
.member-profile-photo__save-button:hover {
	background: transparent;
	color: var(--color-text);
}


/* Bouton inactif tant qu’aucune image n’est prête */
.member-profile-photo__save-button:disabled {
	color:
		color-mix(
			in srgb,
			var(--color-text) 40%,
			transparent
		);
	text-decoration: none;
	cursor: default;
}
	



#inscription .registration-login {padding: 0px 0 40px 0;}
#inscription  h1 + p {padding:0 0 10px 0;}

#create-account input,
#inscription input.input {
	background-color: transparent;
    border: 1px solid #999999;
padding:5px}


#inscription .registration-login {}

#inscription  .registration-login a.button,
#inscription .registration-login--connected {
display: inline-block;
color: var(--color-primary);


}
#create-account {}
a.button,
p.member-login__lost-password	
{

font-weight:bold;
color: var(--color-primary);
text-decoration: underline;
}

p.member-login__lost-password {padding:20px 0;}
#inscription .registration-login--connected > p:nth-child(2),
#inscription .registration-login--connected > p:nth-child(3) {display: none;}


#pasunejam-create-account-form,
#pasunejam-login-form {
	display:flex;
	gap:10px;
	flex-direction: column;
	padding:10px 0 0px 0;
	margin: 20px 0 0 0;
	
}
#pasunejam-create-account-form {}

#create-account label,
#pasunejam-login-form label {  
	  font-weight: bold;
display: block;
    float: left;
    width: 210px;

  
}
#pasunejam-create-account-form input::placeholder {
	color: var(--color-text);
	opacity:1;
	font-size:12px;
	text-transform: uppercase;
}

.button-primary, 
.button-primary {margin:20px 0 0 0;}

.member-message--error {padding:20px 0;}
.member-message--error > p,
.member-message--error > ul li

{	color: var(--color-primary);}

.member-message--error > ul {list-style: none;}

.member-message--success > p {color: var(--color-text-green);;}
.member-message--success {padding:20px 0;}
#pasunejam-login-form .member-login__lost-password {
	color: var(--color-primary);
text-decoration: underline;}



/* =========================================================
   AGENDA
   ========================================================= */

#agenda {padding:40px 0 50px 0;}
#agenda header {padding:0 0 60px 0;}

/* =========================================================
   HEADER ET NAVIGATION
   ========================================================= */

.site-header {
	position: fixed;
	z-index: 1055;
	top: 0;
	left: 0;

	width: 100%;
	padding: 0;

	background-color: rgb(0 0 0 / 70%);
	box-shadow: 0 1px 0 rgb(255 255 255 / 8%);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	transition:
		background-color 250ms ease,
		box-shadow 250ms ease,
		backdrop-filter 250ms ease;
}


/* Home : navigation transparente sur le hero */

body.home .site-header {
	background-color: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}


/* Home : navigation sombre après le hero */

body.home .site-header.is-scrolled {
	background-color: rgb(0 0 0 / 70%);
	box-shadow: 0 1px 0 rgb(255 255 255 / 8%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}


/* Structure */

.site-header__inner {
	display: flex;
	width: 100%;
	min-height: 72px;
	align-items: center;

	padding-inline: clamp(1.25rem, 4vw, 5rem);
}

.site-header__branding {
	flex: 0 0 auto;
}

.site-header .custom-logo-link {
	display: block;
}

.site-header .custom-logo {
	display: block;
	width: auto;
	height: 42px;
}

.site-header__title {
	color: var(--color-white);
	font-weight: 500;
	text-decoration: none;
}


/* Offcanvas utilisé comme navigation desktop */

.site-header__offcanvas {
	flex-grow: 1;
}

.site-header__offcanvas .offcanvas-body {
	display: flex;
	align-items: center;

	padding: 0;
	overflow: visible;
}

.site-navigation {
	width: 100%;
}


/* Liste principale */

.site-navigation__menu {
	display: flex;
	width: 85%;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(1rem, 2vw, 2.5rem);

	margin: 0 0 0 auto;
	padding: 0;

	list-style: none;
}

.site-navigation__menu > .menu-item {
	display: flex;

	margin: 0;
	padding: 0.625rem 1.25rem;

	border-radius: 0.3125rem;

	background-color: rgb(60 30 10 / 45%);
}

.site-navigation__menu > .menu-item > a {
	display: block;

	color: rgb(240 228 206 / 85%);

	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;

	transition: color 180ms ease;
}

.site-navigation__menu > .menu-item > a:hover,
.site-navigation__menu > .menu-item > a:focus-visible,
.site-navigation__menu > .current-menu-item > a {
	color: #d58a36;
}


/* CTA — dernier élément du menu */

.site-navigation__menu > .menu-item:last-child {
	background-color: var(--color-primary);
}

.site-navigation__menu > .menu-item:last-child > a {
	color: var(--color-white);
	font-weight: 600;
}

.site-navigation__menu > .menu-item:last-child:hover {
	background-color:
		color-mix(
			in srgb,
			var(--color-primary) 82%,
			var(--color-background-black)
		);
}


/* =========================================================
   HAMBURGER
   ========================================================= */

.site-header__toggler {
	display: none;

	width: 46px;
	height: 46px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;

	padding: 0;

	border: 0;
	border-radius: 0;

	background: transparent;
	box-shadow: none;
}

.site-header__toggler span {
	display: block;

	width: 32px;
	height: 3px;

	border-radius: 999px;

	background-color: var(--color-white);
}


/* =========================================================
   NAVIGATION — DESKTOP
   ========================================================= */

@media (min-width: 992px) {

	.site-header__offcanvas .offcanvas-header {
		display: none;
	}

}


/* =========================================================
   NAVIGATION — TABLETTE ET MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

	.site-header {
		padding: 1rem;
	}

	.site-header__inner {
		min-height: auto;
		justify-content: space-between;
		padding: 0;
	}

	.site-header .custom-logo {
		width: 64px;
		height: 64px;
		object-fit: contain;
	}

	.site-header__toggler {
		display: flex;
	}


	/* Panneau Bootstrap */

	.site-header__offcanvas {
		--bs-offcanvas-width: min(88vw, 390px);
		--bs-offcanvas-zindex: 1060;

		background-color: #21150f;
		color: var(--color-white);
	}

	.site-header__offcanvas .offcanvas-header {
		padding: 1.5rem;

		border-bottom: 1px solid rgb(255 255 255 / 15%);
	}

	.site-header__offcanvas .offcanvas-title {
		margin: 0;

		color: var(--color-white);

		font-family: var(--font-title);
		font-size: 1.25rem;
	}

	.site-header__offcanvas .offcanvas-body {
		display: block;

		padding: 1rem 1.5rem 2rem;
		overflow-y: auto;
	}


	/* Menu mobile */

	.site-header__offcanvas .site-navigation__menu {
		display: flex;

		width: 100%;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;

		margin: 0;
		padding: 0;
	}

	.site-header__offcanvas
	.site-navigation__menu > .menu-item {
		display: block;

		width: 100%;
		margin: 0;
		padding: 0;

		border-radius: 0;

		background-color: transparent;
	}

	.site-header__offcanvas
	.site-navigation__menu > .menu-item > a {
		display: block;

		width: 100%;
		padding: 1rem 0;

		border-bottom: 1px solid rgb(255 255 255 / 15%);

		color: var(--color-white);

		font-family: var(--font-title);
		font-size: clamp(1.4rem, 6vw, 2rem);
		line-height: 1.2;
		white-space: normal;
	}


	/* CTA mobile */

	.site-header__offcanvas
	.site-navigation__menu > .menu-item:last-child {
		margin-top: 2rem;

		background-color: var(--color-primary);
	}

	.site-header__offcanvas
	.site-navigation__menu > .menu-item:last-child > a {
		padding: 1rem 1.5rem;

		border-bottom: 0;

		font-family: var(--font-body);
		font-size: 1rem;
		text-align: center;
	}

}


/* ==================================================
   HERO
   ================================================== */
.background-img {
		background-image:var(--hero-background-image);
		position: relative;
	isolation: isolate;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;

	overflow: hidden;

	color: var(--color-white);
	background-color: #21140e;
	/*background-image: var(--hero-background-image);*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

#inscription.background-img {}
#accueil.background-img {
	display: flex;align-items: flex-end;
}

#create-account >  .container,
#inscription > .container {
	margin-top: 100px;
	position: relative;
	z-index: 1;
/*
	width: min(
		calc(100% - 2rem),
		760px
	);
*/
	height: auto;
	max-height: none;

	margin-inline: auto;
	padding:
		clamp(2.5rem, 5vw, 5rem);

	background: var(--color-white);
	color: var(--color-text);

	overflow: visible;

	box-shadow: 0 2rem 5rem rgb(0 0 0 / 30%);
}

#inscription header {    
	/*padding: 40px 0 0 0;*/
    margin: 0 0 20px 0;
}




.background-img .hero__overlay {
	position: absolute;
	z-index: 0;
	inset: 0;

	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(15, 8, 4, 0.02) 15%,
			rgba(15, 8, 4, 0.12) 38%,
			rgba(15, 8, 4, 0.58) 68%,
			rgba(15, 8, 4, 0.94) 100%
		),
		linear-gradient(
			to right,
			rgba(15, 8, 4, 0.38) 0%,
			rgba(15, 8, 4, 0.08) 50%,
			rgba(15, 8, 4, 0.25) 100%
		);
}

/* Conteneur général centré */

#accueil .hero__container {
	position: relative;
	z-index: 1;

	width: 100%;
	/*max-width: 1160px;*/

	margin-inline: auto;
	padding-inline: 24px;
	padding-bottom: clamp(64px, 8vh, 100px);
}

/* Largeur du bloc texte */

#accueil .hero__content {
	/*width: min(100%, 780px);*/
}


#accueil .hero__eyebrow,
#accueil .hero__introduction,
#accueil .hero__actions,
#accueil .hero__note,
#accueil .button {
	font-family: var(--font-body);
}





/* Première ligne */

#accueil .hero__title-main {
	display: block;

	font-style: normal;
	font-weight: 100;
}
#accueil .hero__title-main  > br {display:none;}

/* Deuxième ligne en italique */

#accueil .hero__title-emphasis {
	display: block;

	margin-top: 2px;

	font-size: 1.05em;
	font-style: italic;
	font-weight: 400;
}

/* Introduction */

#accueil .hero__introduction {
	max-width: 690px;

	margin: 30px 0 0;

	color: rgba(240, 228, 206, 0.72);

	
	font-size: clamp(16px, 1.15vw, 19px);
	font-weight: 400;
	line-height: 1.65;
}

/* Footer du hero */

#accueil .hero__actions {
	margin-top: 32px;
}

/* Liste des boutons */

#accueil .hero__actions ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;

	margin: 0;
	padding: 0;

	list-style: none;
}

/* Boutons */

#accueil .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;

	min-height: 50px;
	padding: 13px 25px;

	border: 1px solid transparent;

	
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;

	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		transform 180ms ease;
}

/* Bouton principal */

#accueil .button--primary {
	background-color: #ad3e20;
color: #F0E4CE;
}

#accueil .button--primary:hover,
#accueil .button--primary:focus-visible {
	background-color: #c24b28;
	transform: translateY(-2px);
}

/* Bouton secondaire */

#accueil .button--secondary {
	border-color: rgba(255, 255, 255, 0.28);

	background-color: rgba(255, 255, 255, 0.03);
	color: #F0E4CE;
}

#accueil .button--secondary:hover,
#accueil .button--secondary:focus-visible {
	border-color: rgba(255, 255, 255, 0.65);
	background-color: rgba(255, 255, 255, 0.1);
}

/* Flèche */

#accueil .button__icon {
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

/* Note située sous les boutons */

#accueil .hero__note {
	display: flex;
	align-items: center;
	gap: 14px;

	margin-top: 27px;

	color: rgba(240, 228, 206, 0.45);


	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

/* Petit trait avant la note */

#accueil .hero__note::before {
	content: "";

	display: block;
	flex: 0 0 20px;

	width: 20px;
	height: 1px;

	background-color: rgba(255, 255, 255, 0.32);
}



/* CALENDRIER */


/* =========================================================
   CALENDRIER DES SESSIONS
   ========================================================= */

.session-calendar {
	width: 100%;
	/*margin-top: clamp(2.5rem, 5vw, 4.5rem);*/

	color: var(--color-text);
	font-family: var(--font-body);
}


/* =========================================================
   NAVIGATION DU MOIS
   ========================================================= */

.session-calendar__navigation {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 3rem;
	align-items: center;

	min-height: 4.5rem;

	border-bottom: 1px solid rgb(36 23 17 / 12%);
}

.session-calendar__month {
	margin: 0;

	color: var(--color-text);

	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.session-calendar__nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 3rem;
	height: 3rem;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: transparent;
	color: var(--color-text);

	font-family: inherit;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color 180ms ease,
		color 180ms ease,
		opacity 180ms ease;
}

.session-calendar__nav-button:last-child {
	justify-self: end;
}

.session-calendar__nav-button:hover {
	background: rgb(180 62 32 / 8%);
	color: var(--color-primary);
}

.session-calendar__nav-button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.session-calendar__nav-button:disabled {
	opacity: 0.25;
	cursor: not-allowed;
}


/* =========================================================
   JOURS DE LA SEMAINE
   ========================================================= */

.session-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));

	padding-top: 1.5rem;
	padding-bottom: 0.875rem;
}

.session-calendar__weekdays span {
	color: rgb(36 23 17 / 35%);

	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}


/* =========================================================
   GRILLE
   ========================================================= */

.session-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-auto-rows: clamp(4.5rem, 6vw, 5.75rem);

	border-top: 1px solid rgb(36 23 17 / 14%);
	border-left: 1px solid rgb(36 23 17 / 14%);
}


/* Chaque case du calendrier */

.session-calendar__day {
	position: relative;

	display: flex;
	align-items: flex-start;
	justify-content: center;

	min-width: 0;
	padding: 1rem 0.25rem;

	border: 0;
	border-right: 1px solid rgb(36 23 17 / 14%);
	border-bottom: 1px solid rgb(36 23 17 / 14%);

	background: transparent;
	color: rgb(36 23 17 / 65%);

	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;

	transition:
		background-color 180ms ease,
		color 180ms ease;
}


/* Date affichée dans la case */

.session-calendar__date {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 2.25rem;
	height: 2.25rem;

	border-radius: 50%;

	transition:
		background-color 180ms ease,
		color 180ms ease,
		transform 180ms ease;
}


/* =========================================================
   CASES VIDES
   ========================================================= */

.session-calendar__day--empty {
	color: transparent;
	pointer-events: none;
}


/* =========================================================
   JOUR ORDINAIRE
   ========================================================= */

button.session-calendar__day {
	cursor: pointer;
}

button.session-calendar__day:hover {
	background: rgb(180 62 32 / 5%);
	color: var(--color-primary);
}

button.session-calendar__day:hover .session-calendar__date {
	transform: translateY(-1px);
}

button.session-calendar__day:focus-visible {
	z-index: 2;

	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}


/* =========================================================
   DATE AVEC UNE SESSION
   ========================================================= */

.session-calendar__day--event {
	font-weight: 600;
}

.session-calendar__day--event .session-calendar__date::after {
	content: "";

	position: absolute;
	bottom: 0.55rem;
	left: 50%;

	width: 0.4rem;
	height: 0.4rem;

	border-radius: 50%;

	background: var(--color-primary);

	transform: translateX(-50%);
}


/* =========================================================
   DATE SÉLECTIONNÉE
   ========================================================= */
   
.session-calendar__day--open{
	background: rgb(180 62 32 / 9%);
	
	color: var(--color-primary);
}
.session-calendar__day--selected {background: #8DC99A;color: var(--color-primary);}
.session-calendar__day--selected  .session-calendar__date {background: #ffffff!important;color:#8DC99A!important;}

.session-calendar__day--open .session-calendar__date,
.session-calendar__day--selected .session-calendar__date {
	background: rgb(180 62 32 / 16%);
	color: var(--color-primary);

	font-weight: 700;

	position: relative;
    top: 13px;
}

.session-calendar__day--selected .session-calendar__date::after {
	display: none;
}


/* =========================================================
   STATUTS DES SESSIONS
   ========================================================= */

/* Inscriptions ouvertes */

.session-calendar__day--open .session-calendar__date::after {
	background: #a8ddc2;
	display: none;
}


/* Bientôt complet */

.session-calendar__day--soon .session-calendar__date::after {
	background: #b76b17;
}


/* Liste d’attente */

.session-calendar__day--waiting .session-calendar__date::after {
	background: #5e7156;
}


/* Inscriptions clôturées */

.session-calendar__day--closed .session-calendar__date::after {
	background: #a9a39b;
}


/* Session reportée */

.session-calendar__day--postponed .session-calendar__date::after {
	background: #70407e;
}






article.session-card  .session-card__status {
	display: flex;
height: 1.68731rem;
padding: 0.38181rem 0.82963rem 0.36794rem 0.74975rem;
justify-content: center;
align-items: center;}

article.session-card  .session-card__status--open {background: #2A6B3A;
color: #D4F0DC;
font-family: Outfit;
font-size: 0.625rem;
font-style: normal;
font-weight: 400;
line-height: 0.9375rem; /* 150% */
letter-spacing: 0.09375rem;
text-transform: uppercase;}


/* =========================================================
   FICHE DE LA SESSION
   ========================================================= */

.session-card {
	--session-status-open: #557f57;
	--session-status-soon: #b76b17;
	--session-status-waiting: #5e7156;
	--session-status-closed: #8d8882;
	--session-status-postponed: #70407e;

	width: 100%;
	height: 100%;

	padding-left: clamp(1.75rem, 3vw, 3.5rem);

	border-left: 1px solid rgb(36 23 17 / 12%);

	color: var(--color-text);
	font-family: var(--font-body);
}


/* =========================================================
   IMAGE
   ========================================================= */

.session-card__image {
	display: block;

	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;

	margin: 0 0 1.5rem;

	background: rgb(36 23 17 / 8%);

	object-fit: cover;
}


/* =========================================================
   CONTENU
   ========================================================= */

.session-card__content {
	width: 100%;
}


/* =========================================================
   STATUT
   ========================================================= */

.session-card__status {
	display: inline-flex;
	align-items: center;

	margin: 0 0 1.25rem;
	padding: 0.6rem 0.9rem;

	background: var(--session-status-open);
	color: var(--color-white);

	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.session-card__status--open {
	background: var(--session-status-open);
}

.session-card__status--soon {
	background: var(--session-status-soon);
}

.session-card__status--waiting {
	background: var(--session-status-waiting);
}

.session-card__status--closed {
	background: var(--session-status-closed);
}

.session-card__status--postponed {
	background: var(--session-status-postponed);
}


/* =========================================================
   TITRE
   ========================================================= */

h3.session-card__title {
	margin: 0 0 1.5rem;

	color: var(--color-text);

	font-family: var(--font-title);
	font-size: clamp(1.75rem, 2.5vw, 2.35rem);
	font-weight: 400;
	line-height: 1.15;
}


/* =========================================================
   INFORMATIONS
   ========================================================= */

.session-card__information {
	display: grid;
	gap: 1rem;

	margin: 0;
}

.session-card__information-item {
	display: grid;
	grid-template-columns: minmax(5rem, 5.5rem) minmax(0, 1fr);
	gap: 0.75rem;

	margin: 0;

	color: var(--color-text);

	font-size: 0.95rem;
	line-height: 1.5;
}

.session-card__information-item strong {
	color: var(--color-primary);

	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.session-card__information-item span,
.session-card__information-item time {
	display: block;
}

.session-card__information-item [data-session-address] {
	grid-column: 2;

	margin-top: -0.5rem;

	color: rgb(36 23 17 / 58%);
	font-size: 0.9rem;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.session-card__description {
	margin: 1.75rem 0 0;

	color: rgb(36 23 17 / 68%);

	font-size: 0.95rem;
	line-height: 1.7;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.session-card__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;

	margin-top: 1.75rem;
}
button.button-primary,
input.button-primary,
.session-card__button {
	border:0px;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 3.5rem;
	padding: 0.9rem 1.5rem;

	background: var(--color-primary);
	color: var(--color-white);

	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;

	transition:
		background-color 180ms ease,
		transform 180ms ease;
}
.member-profile-photo__stage {padding:0 0 20px 0;}
.member-profile-photo__file-field {}
.member-profile-photo__file-field #pasunejam-profile-photo-file {}

.member-profile-photo__crop-editor {
	width: 100%;
}
.member-profile-photo__canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	cursor: grab;
	touch-action: none;
}

.member-profile-photo__canvas:active {
	cursor: grabbing;
}


.member-profile-photo__instructions {line-height: 19px;
    padding: 0 0 10px 0;}

.member-profile-photo__delete-button,
form.member-profile-photo__upload-form button.button-primary,
.member-account__photo input.button-primary {
	display: inline;
	padding:0;
	background:transparent;
	font-size: inherit;
	    
    color: var(--color-primary);
    text-decoration: underline;
	height: 0!important;
    padding: 0;
    margin: 0;
}

.session-card__button:hover {
	background: #913018;
	color: var(--color-white);

	transform: translateY(-2px);
}

.session-card__button:focus-visible,
.session-card__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.session-card__link {
	color: rgb(36 23 17 / 65%);

	font-size: 0.9rem;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.3rem;

	transition:
		color 180ms ease,
		text-decoration-color 180ms ease;
}

.session-card__link:hover {
	color: var(--color-primary);
	text-decoration-color: currentColor;
}





/* PORTFOLIO PARTICIPANTS */ 
/* ==========================================================
   HOME — PARTICIPANTS
   ========================================================== */

.home-participants {
	padding: clamp(4.5rem, 8vw, 8rem) 0;
	background-color: var(--color-background-white);
	
	/*
	background-color: var(--color-white, #f6eddf);
	color: var(--color-text, #241711);
}

.home-participants > .container {
	/*max-width: 1120px;*/
}


/* ==========================================================
   EN-TÊTE DE LA SECTION
   ========================================================== */

.home-participants .section-header {
	max-width: 760px;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/*
.home-participants .sup-title {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 1.25rem;
	color: var(--color-primary, #b43e20);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}
	*/

	/*
.home-participants .sup-title::before {
	width: 2.5rem;
	height: 1px;
	background-color: currentColor;
	content: "";
}

*/
/*
.home-participants .section-header h2 {
	max-width: 850px;
	margin: 0;
	font-family: var(--font-heading, "Playfair Display", serif);
	font-size: clamp(2.1rem, 4vw, 3.4rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.025em;
}
	*/

	/*

.home-participants .section-header > p {
	max-width: 680px;
	margin: 1.25rem 0 0;
	color: rgb(36 23 17 / 72%);
	font-size: 1rem;
	line-height: 1.7;
}

*/

/* ==========================================================
   GRILLE
   ========================================================== */

.participants-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 2.5vw, 2rem);
}


/* ==========================================================
   CARTE
   ========================================================== */

.participant-card {
	display: flex;
	min-width: 0;
	height: 100%;
	flex-direction: column;
}


/* ==========================================================
   VISUEL — FORMAT HORIZONTAL OBLIGATOIRE
   ========================================================== */

.participant-card__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: #d8d0c5;
	isolation: isolate;
}

/*
 * L’image est toujours recadrée dans un format 16/9.
 * Une photo verticale sera donc coupée en haut et en bas,
 * sans jamais modifier la hauteur de la carte.
 */
.participant-card__image,
.participant-card__media > img,
.participant-card__media > video,
.participant-card__iframe {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	object-fit: cover;
	object-position: center;
}

.participant-card__iframe {
	position: absolute;
	inset: 0;
}


/* ==========================================================
   BOUTON VIDÉO
   ========================================================== */

.participant-card__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	appearance: none;
}

.participant-card__video::after {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 10%);
	content: "";
	transition: background-color 180ms ease;
}

.participant-card__video:hover::after {
	background: rgb(0 0 0 / 22%);
}

.participant-card__video:focus-visible {
	outline: 3px solid var(--color-primary, #b43e20);
	outline-offset: 3px;
}

.participant-card__play {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	display: grid;
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid rgb(255 255 255 / 65%);
	border-radius: 50%;
	background-color: rgb(36 23 17 / 45%);
	color: #fff;
	font-size: 0.9rem;
	line-height: 1;
	place-items: center;
	transform: translate(-50%, -50%);
	transition:
		transform 180ms ease,
		background-color 180ms ease;
}

.participant-card__video:hover .participant-card__play {
	background-color: var(--color-primary, #b43e20);
	transform: translate(-50%, -50%) scale(1.08);
}


/* ==========================================================
   VISUEL PAR DÉFAUT AVEC INITIALES
   ========================================================== */

.participant-card__placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	background-color: #d7c6b4;
	color: var(--color-text, #241711);
	font-family: var(--font-heading, "Playfair Display", serif);
	font-size: clamp(2rem, 5vw, 3.5rem);
	letter-spacing: 0.05em;
	place-items: center;
}


/* ==========================================================
   CONTENU DE LA CARTE
   ========================================================== */

.participant-card__content {
	display: grid;
	flex: 1;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto 1fr auto;
	column-gap: 0.7rem;
	padding-top: 1.15rem;
}

.participant-card__title {
	grid-column: 1;
	margin: 0;
	color: var(--color-text-dark);
	font-family: var(--font-body, "Outfit", sans-serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.participant-card__instruments {
	grid-column: 2;
	margin: 0;
	color: var(--color-primary, #b43e20);
	font-size: 0.76rem;
	font-weight: 500;
	line-height: 1.5;
}

.participant-card__instruments::before {
	margin-right: 0.55rem;
	/*color: rgb(36 23 17 / 38%);*/
color: var(--color-text);
	
	content: "·";
}

.participant-card__bio {
	grid-column: 1 / -1;
	margin: 0.9rem 0 0;
	color: var(--color-text);
	/*color: rgb(36 23 17 / 66%);*/
	font-size: 1rem;
	line-height: 1.65;
}


/* ==========================================================
   LIEN « DÉCOUVRIR »
   ========================================================== */

.participant-card__link {
	grid-column: 1 / -1;
	justify-self: end;
	margin-top: 1.25rem;
	padding: 0.65rem 1.05rem;
	border: 1px solid rgb(36 23 17 / 16%);
	color: var(--color-text, #241711);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		color 180ms ease;
}

.participant-card__link:hover,
.participant-card__link:focus-visible {
	border-color: var(--color-primary, #b43e20);
	background-color: var(--color-primary, #b43e20);
	color: #fff;
}


/* ==========================================================
   BOUTON GÉNÉRAL SOUS LA GRILLE
   ========================================================== */

.home-participants .center {
	display: flex;
	justify-content: center;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid rgb(36 23 17 / 8%);
}

.home-participants .center .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.9rem 1.75rem;
	border: 1px solid var(--color-primary, #b43e20);
	background-color: var(--color-primary, #b43e20);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition:
		background-color 180ms ease,
		color 180ms ease;
}

.home-participants .center .button::after {
	margin-left: 0.75rem;
	content: "→";
}

.home-participants .center .button:hover,
.home-participants .center .button:focus-visible {
	background-color: transparent;
	color: var(--color-primary, #b43e20);
}






/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

	/*
	 * Le backdrop-filter appliqué au parent peut enfermer
	 * l’Offcanvas dans la hauteur du header sur Safari.
	 */
	.site-header {
		z-index: 1055;
		overflow: visible;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/*
	 * Force le panneau Bootstrap à occuper toute
	 * la hauteur de l’écran.
	 */
	.site-header__offcanvas.offcanvas {
		--bs-offcanvas-zindex: 1060;
		--bs-offcanvas-width: min(88vw, 390px);

		position: fixed;
		z-index: 1060;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;

		width: var(--bs-offcanvas-width);
		height: 100vh;
		height: 100dvh;
		max-height: 100dvh;

		background-color: #21150f;
	}

	.site-header__offcanvas .offcanvas-body {
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;

		-webkit-overflow-scrolling: touch;
	}

	.offcanvas-backdrop {
		z-index: 1050;
	}

}

/* =========================================================
   TABLETTE ET MOBILE
   Jusqu’à 991.98px
   ========================================================= */

@media (max-width: 991.98px) {


	/* Agenda — fiche de session */

	.session-card {
		margin-top: 3.5rem;
		padding-top: 3.5rem;
		padding-left: 0;
		border-top: 1px solid rgb(36 23 17 / 12%);
		border-left: 0;
	}

	.session-card__image {
		max-height: 420px;
	}


	/* Participants */

	.participants-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   MOBILE
   Jusqu’à 767.98px
   ========================================================= */

@media (max-width: 767.98px) {

	/* Agenda — calendrier */

	.session-calendar {
		margin-top: 2.5rem;
	}

	.session-calendar__navigation {
		min-height: 4rem;
	}

	.session-calendar__weekdays {
		padding-top: 1.25rem;
	}

	.session-calendar__grid {
		grid-auto-rows: 4rem;
	}

	.session-calendar__day {
		padding: 0.65rem 0.1rem;
		font-size: 0.8rem;
	}

	.session-calendar__date {
		width: 1.9rem;
		height: 1.9rem;
	}

	.session-calendar__day--event
	.session-calendar__date::after {
		display: none;
	}

}


/* =========================================================
   PETITS MOBILES
   Jusqu’à 575.98px
   ========================================================= */

@media (max-width: 575.98px) {

	/* Agenda — fiche de session */

	.session-card {
		margin-top: 2.5rem;
		padding-top: 2.5rem;
	}

	.session-card__information-item {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.session-card__information-item
	[data-session-address] {
		grid-column: 1;
		margin-top: 0;
	}

	.session-card__actions {
		align-items: stretch;
	}

	.session-card__button {
		width: 100%;
	}


	/* Participants */

	.home-participants {
		padding: 4rem 0;
	}

	.home-participants .section-header {
		margin-bottom: 2.5rem;
	}

	.participants-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.participant-card__content {
		grid-template-columns: 1fr;
	}

	.participant-card__title,
	.participant-card__instruments {
		grid-column: 1;
	}

	.participant-card__instruments {
		margin-top: 0.25rem;
	}

	.participant-card__instruments::before {
		display: none;
	}

	.participant-card__link {
		justify-self: start;
	}

}


/* =========================================================
   TRÈS PETITS MOBILES
   Jusqu’à 399.98px
   ========================================================= */

@media (max-width: 399.98px) {

	/* Agenda — calendrier */

	.session-calendar__grid {
		grid-auto-rows: 3.5rem;
	}

	.session-calendar__nav-button {
		width: 2.5rem;
		height: 2.5rem;
	}

	.session-calendar__navigation {
		grid-template-columns:
			2.5rem
			minmax(0, 1fr)
			2.5rem;
	}

	.session-calendar__month {
		font-size: 0.9rem;
	}

}