/*
Theme Name: le studial
Template: Divi
Theme URI: https://www.lestudial.com/lestudial
Author: Théo Salomoni
Author URI: https://www.lestudial.com/
Description: Thème créé par le studial
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme-lestudial
*/

/* --- FONTS --- */

	@font-face {
		font-family: 'Piloner';
		src: url('/wp-content/themes/lestudial/assets/fonts/Piloner-Regular.woff2') format('woff2'),
			url('/wp-content/themes/lestudial/assets/fonts/Piloner-Regular.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}
	
	@font-face {
		font-family: 'Piloner';
		src: url('/wp-content/themes/lestudial/assets/fonts/Piloner-Italic.woff2') format('woff2'),
			url('/wp-content/themes/lestudial/assets/fonts/Piloner-Italic.woff') format('woff');
		font-weight: normal;
		font-style: italic;
		font-display: swap;
	}
	
	@font-face {
		font-family: 'Piloner';
		src: url('/wp-content/themes/lestudial/assets/fonts/Piloner-Bold.woff2') format('woff2'),
			url('/wp-content/themes/lestudial/assets/fonts/Piloner-Bold.woff') format('woff');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
	}
	
	@font-face {
		font-family: 'Piloner';
		src: url('/wp-content/themes/lestudial/assets/fonts/Piloner-BoldItalic.woff2') format('woff2'),
			url('/wp-content/themes/lestudial/assets/fonts/Piloner-BoldItalic.woff') format('woff');
		font-weight: bold;
		font-style: italic;
		font-display: swap;
	}
	
	
	
	
/* --- CURSEUR --- */

	body {
		cursor: none;
	}
	
	a, button, .et_pb_button {
		cursor: none !important;
	}
	
	/* Désactivation curseur custom sur mobiles & tablettes */
	@media (hover: none), (pointer: coarse) {
		#studi-cursor,
		#studi-cursor-inner {
			display: none !important;
		}
	}
	
	/* Positionneur du curseur */
	#studi-cursor {
		position: fixed;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		pointer-events: none;
		z-index: 999999;
		mix-blend-mode: difference;
	}
	
	/* Inner = le vrai curseur graphique */
	#studi-cursor-inner {
		position: absolute;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		background: rgba(248, 239, 234, .9);
		mix-blend-mode: difference;
		transition:
			width .25s ease,
			height .25s ease,
			background .25s ease;
	}
	
	/* Outline */
	#studi-cursor-inner::after {
		content: "";
		position: absolute;
		inset: -4px;
		border-radius: 50%;
		border: 1px solid rgb(248, 239, 234);
		opacity: 1;
		mix-blend-mode: difference;
	}
	
	/* CTA Hover — taille seulement */
	#studi-cursor.hover #studi-cursor-inner {
		width: 8px;
		height: 8px;
		mix-blend-mode: difference;
	}
	
	/* Pointer — ne change PAS la couleur */
	#studi-cursor.pointer #studi-cursor-inner {
		width: 8px;
		height: 8px;
		mix-blend-mode: difference;
	}
	
	/* Drag — idem */
	#studi-cursor.drag #studi-cursor-inner {
		width: 16px;
		height: 16px;
		mix-blend-mode: difference;
	}
	
	/* Clic = shrink + pulse */
	#studi-cursor.click #studi-cursor-inner {
		animation: studi-cursor-click .25s ease-out;
	}
	
	@keyframes studi-cursor-click {
		0% { transform: translate(-50%, -50%) scale(1); }
		50% { transform: translate(-50%, -50%) scale(.6); }
		100% { transform: translate(-50%, -50%) scale(1); }
	}
	
	

/* --- BACKGROUNDS --- */

	/* GLOBAL */
	
	body, html {
		background-color: #FCF6F1 !important;
	}
	
	.page.et_pb_pagebuilder_layout #main-content {
		background-color: unset !important;
	}

	/* NOISE */
	
	body.home #page-container {
		background-color: #FCF6F1;
		background-image:
			url('/wp-content/themes/lestudial/assets/svg/grille.svg'),
			url('/wp-content/themes/lestudial/assets/svg/bruit.svg');
		background-repeat: repeat, repeat;
		background-size: 250px, 160px;
	}

	/* Section avec effet noise */
	.noise {
	position: relative;
	isolation: isolate;
	}
	
	/* Overlay grainé */
	.noise::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url(/wp-content/themes/lestudial/assets/svg/bruit.svg);
	background-repeat: repeat;
	background-size: 160px;
	opacity: .2;
	mix-blend-mode: multiply;
	}
	
	/* Assurer que le contenu reste au-dessus */
	.noise > * {
	position: relative;
	z-index: 1;
	}


	/* GRID */
	
	.grid {
	position: relative;
	isolation: isolate;
	}
	
	/* Overlay grille */
	.grid::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: url(/wp-content/themes/lestudial/assets/svg/grille.svg);
	background-repeat: repeat;
	background-size: 250px;
	opacity: .12;
	mix-blend-mode: multiply;
	}
	
	/* Assurer que le contenu reste au-dessus */
	.grid > * {
	position: relative;
	z-index: 2;
	}
	
	
	/* BLUR */
	
	#blur {
	backdrop-filter: blur(4px) saturate(70%);
	-webkit-backdrop-filter: blur(4px) saturate(70%);
	}
	
	
/* TEXT */

	#highlight {
		font-family: 'Piloner',Helvetica,Arial,Lucida,sans-serif;
	}
	
	.home h1 span#highlight {
		font-size: 140px;
	}
	
	
	@media screen and (max-width: 850px)  {
		.home h1 span#highlight {
			font-size: 80px;
		}
	}
	
	@media screen and (max-width: 510px)  {
		.home h1 span#highlight {
			font-size: 56px;
		}
	}
	
	.list-custom li {
		list-style-type: none !important;
	}
	
	.list-custom ul li::before {
		content: url(/wp-content/themes/lestudial/assets/svg/separator.svg);
		margin-right: 8px;
	}
	
	
/* MENU */
	
		
	
	#menu-navigation-principale li:not(:last-child)::after {
		content: "";
		display: inline-block;
		width: 8px;   /* largeur du séparateur */
		height: 12px;  /* hauteur du séparateur */
		background-image: url('/wp-content/themes/lestudial/assets/svg/separator.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		vertical-align: middle;
		margin: -7px 24px 0 24px;
	}
	
	.et_pb_menu .et-menu>li {
		padding: 0;
	}
	
	.et_pb_menu .et-menu {
		margin-left: 0;
		margin-right: 0;
	}
	
		/* MOBILE */
	
	#close-button img {
		margin: 0 auto;
	}
	
	#menu-mobile[style*="display:none"] {
		display: flex !important; /* force l'affichage pour anima CSS */
	}
	
	#menu-mobile {
		opacity: 0;
		transform: translateY(-10px);
		pointer-events: none;
		transition: opacity .35s ease-out, transform .35s ease-out;
		top: 0;
		left: 0;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		transform: scale(0.96);
	}
	
	#menu-mobile.is-visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		transform: scale(1);
	}

	body#menu-mobile.is-visible {
		overflow: hidden;
		position: fixed;
		inset: 0;
	}
	
	
	
	/* BUTTONS */
	
	#button-icon {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 10px; /* espace entre l’icône et le texte */
	}
	
	.et_pb_button::before, .et_pb_button::after {
		display: inline-block !important;
	}
	
	.et_pb_button::after {
		content: none !important;
	}
	
	.et_pb_button {
		display: inline-flex;
		align-items: center;
	}
	
	
	#button-icon.et_pb_button::before {
		content: "" !important;
		opacity: 1 !important;
		position: static !important;      /* on annule le absolute de Divi */
		transform: none !important;
		font-size: 0 !important;          /* pour neutraliser le caractère unicode */
		width: 8px;   /* largeur du séparateur */
		height: 12px;  /* hauteur du séparateur */
		background-image: url('/wp-content/themes/lestudial/assets/svg/separator_light.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		vertical-align: middle;
		content: "" !important;
		display: inline-block !important;
	}
	
	
/* FOOTER */

	footer.dipi_revealing_footer_footer {
		z-index: -10 !important;
	}
	
/* ACCUEIL */

	/* CRÉATIONS */

	#creations .et_pb_group_carousel_track, #creations .et_flex_group, #creations .et_pb_group_carousel_container {
	  height: 100%;
	}
	
	.et_pb_group_carousel_dots_disabled .et_pb_group_carousel_arrow, .et_pb_group_carousel_dots_overlay .et_pb_group_carousel_arrow {
	  top: unset; 
	  bottom: 20px; 
	  margin: 0 32px;
	}
	
	.creations-section .et_pb_button_module_wrapper {
	  width: fit-content;
	}
	

	.et_pb_group_carousel_slide_active > .et_pb_group {
		transition: transform .6s ease-in-out !important;
		transform-origin: center center;
	}
	
	.et_pb_group_carousel_slide_active:hover > .et_pb_group {
		box-shadow: 0 25px 40px rgba(0,0,0,0.08);
		transition: transform .6s ease-in-out, box-shadow .6s ease-out !important;
		transform: scale(1.07);
	}
	
	
	/* Transition douce pour #client */
	#client {
		transition: transform .6s ease-out;
		z-index: 10;
	}
	
	/* Quand la slide est hover, on annule le zoom du parent pour #client */
	.et_pb_group_carousel_slide_active:hover #client {
		transition: transform .6s ease-out;
		transform: scale(0.935) translateY(-16px);
		background-color: var(--gcid-kvttiu27ym);
	}
	
	#project-title {
		opacity: 0;
		pointer-events: none;
		transition: opacity .6s ease-out;
	}
	
	/* 2. Afficher au survol de la slide active */
	.et_pb_group_carousel_slide.et_pb_group_carousel_slide_active.et_pb_group_carousel_slide_last_visible:hover #project-title {
		opacity: 1;
		pointer-events: auto;
	}
	
	/* Base */
	.slide-visual {
		position: relative;
		overflow: hidden;
	}
	
	/* Overlay gradient (invisible par défaut) */
	.slide-visual::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
	
		/* Ton dégradé au survol (colle exactement à celui généré par Divi) */
		background: radial-gradient(
			ellipse at center,
			rgba(0, 49, 89, .8) 0%,
			rgba(0, 49, 89, .8) 100%
		);
	
		opacity: 0;
		transition: opacity .45s ease-in-out;
	}
	
	/* Fade-in au survol de la slide */
	.et_pb_group_carousel_slide_active:hover .slide-visual::after {
		opacity: 1;
	}
	
	@media screen and (max-width: 1280px)  {
		#prestation-label {
			display: none;
		}
	}
	
	
	
	/* Empêche le placeholder sticky de bloquer les clics */
	.et_pb_sticky_placeholder {
		pointer-events: none !important;
	}
	
	
	.home #clip > .et_pb_image_wrap {
		justify-content: center;
	}