// Custom settings
// Surcharger les variables nécessaires issues de foundation-sites/scss/settings/settings.scss ici, par exemple :
//
//  1. Global
//	---------
// 
// $foundation-palette: (
//   "primary": #1779ba,
//   "secondary": #767676,
//   "success": #3adb76,
//   "warning": #ffae00,
//   "alert": #cc4b37,
// );

// 2. Breakpoints
// --------------

$breakpoints: (
  "small": 0,
  "medium": 640px,
  "full-menu": 720px, // Breakpoint à partir duquel le menu complet s'affiche dans l'entête
  "large": 1024px,
  "xlarge": 1200px,
  "xxlarge": 1440px,
);
$breakpoint-classes: (small medium full-menu large xlarge xxlarge); // Inclut les classes des breakpoints définis au-dessus

// 55. Top Bar
// -----------

$topbar-padding: 0.5rem 0;

// 57. Xy Grid
// -----------

$grid-container-padding: ( // Espaces des .grid-container
  "small": 30px,
  "medium": 50px,
  "large": 80px
);

// Import Foundation 6
@import 'scss/foundation'; // Nécessite de compiler depuis la racine du projet en faisant `sass --watch --load-path=node_modules/foundation-sites/ webroot/scss/app.scss:webroot/css/app.css` (cf scripts dans package.json)
@include foundation-everything;

// Slick Carousel
@import "slick";

// Blocs articles
@import "bloc_article";
.bloc-article {
	@include bloc-article();
}

// Cake Messages d'erreur dans les formulaires
.input .error-message{
	color: get-color('alert');
	font-size: .75em;
	font-weight: bold;
	margin-bottom: $form-spacing;
	ul{//Quand il y a une liste d'erreurs pour un même champ
		list-style: none;
		margin: 0;
		font-size: .75em;
	}
}

// Corrige le fait que foundation 6 masque les .form-error alors que cakephp ajoute la class .form-error sur les champs en erreur.
.form-error {
	display: initial;
	margin-top: 0;
	font-size: $input-font-size;
	font-weight: $input-font-weight;
	color: $input-color;

	&:has(~ .error-message) {
		margin-bottom: 0;
	}

}



/////

html, body {
	overscroll-behavior: none; // Empêche l'effet rebond du navigateur quand on arrive en haut ou en bas de la page
}

// ENTÊTE

.section-entete {
	position: fixed;
	width: 100%;
	z-index: 9;

	font-size: rem-calc(28);
	//font-weight: 500;
	//letter-spacing: -0.02em;
	margin-bottom: rem-calc(30);

	mix-blend-mode: difference;

	.entete-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;

		padding-top: rem-calc(20);
		//border-bottom: 2px solid white;
	}

	.entete-inner .menu-small {
		flex-basis: 100%; // Prend toute la largeur de l'écran
		display: none; // Masqué par défaut

		@include breakpoint(full-menu) {
			display: none!important; // .menu-small masqué obligatoirement quand le menu complet est affiché
		}
	}

	&.is-open {
		.entete-inner .menu-small {
			display: initial;
		}
	}
}

.section-entete ul.menu {
	li {
		padding-left: rem-calc(44);
	}
	a {
		padding-left: 0;
		padding-right: 0;
	}
}
.section-entete a {
	color: white;
	&:hover {
		color: grey;
	}
}


// SECTION HOME

.section-home {
	height: 100svh;
	color: white;

	.slider-container,
	.slide,
	.slide-content {
		height: 100%;
		width: 100%;
	}

	img, video {
		width: 100%;
		height: 100%;
		object-fit: cover; // L'image (ou la video) couvre tout le slide en gardant le ratio
	}

	a {
		color: white;
		&:hover {
			color: grey;
		}
	}
}
// Slide en accueil
.section-home .slider-container .slide {
	position: relative;

	.slide-content {
		position: relative;

		display: flex;
		justify-content: center;
		align-items: center;
	}
	.slide-content .titre {
		font-size: 3em;
		z-index: 2;
		mix-blend-mode: difference;
	}
	.slide-content .background {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.slide-content .caption {
		position: absolute;
		left: map-get($grid-container-padding, small) / 2;
		bottom: rem-calc(30);
		right: rem-calc(100); // Pour laisser l'espace au "Next"

		mix-blend-mode: difference;

		display: flex;

		@include breakpoint(medium) {
			left: map-get($grid-container-padding, medium) / 2;
		}
		@include breakpoint(large) {
			left: map-get($grid-container-padding, large) / 2;
		}
	}

	// Controls pour les vidéos
	.controls {

	}
	.controls + * {
		margin-left: 10px;
	}
	.controls a.play,
	.controls a.mute {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 25px;
		height: 25px;
		background: white;
		border-radius: 50%;
		padding: rem-calc(2);
	}

	// Bouton Next slide
	a.next {
		position: absolute;
		bottom: rem-calc(30);
		right: map-get($grid-container-padding, small) / 2;

		mix-blend-mode: difference;

		@include breakpoint(medium) {
			right: map-get($grid-container-padding, medium) / 2;
		}
		@include breakpoint(large) {
			right: map-get($grid-container-padding, large) / 2;
		}
	}
}


// SECTION MOODBOARD

.section-moodboard {
	position: relative; // Indispensable : les left/top des images seront relatifs à CE conteneur
	height: 140svh; // Peut-être mettre à plus de 100vh s'il y a beaucoup d'image (+ donne de la profondeur, un effet descente dans les profondeurs) + éventuellement un effet parallax léger ???
	overflow: hidden;
}

.section-moodboard .img-aleatoire {
	position: absolute;
	width: var(--w, 300px); // Taille individuelle via --w, sinon 300px par défaut
	height: auto;
	transition: top 2.5s ease-in-out,
					left 2.5s ease-in-out,
					transform 100ms ease-in-out;
	&:hover {
		transform: scale(1.1);
		z-index: 999!important;
	}
}


// FOOTER

.section-footer {
	padding-top: rem-calc(15);
	padding-bottom: rem-calc(15);
	font-size: rem-calc(13);

	color: #bababa;
	a {
		color: inherit;
	}

	& > .inner {
		display: flex;
		flex-direction: column;

		@include breakpoint(medium) {
			flex-direction: row;
			justify-content: space-between;
		}
	}
}