/*
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;
	}

	@font-face {
	  font-display: swap;
	}
	
	
	
/* --- CURSEUR --- */

	body {
		cursor: none;
	}
	
	a, button, .et_pb_button {
		cursor: none !important;
	}
	
	/* Toujours afficher le curseur natif sur les iframes */
	iframe {
	  cursor: auto !important;
	}
	
	/* Quand on survole une iframe → on masque le curseur custom */
	body.is-over-iframe #studi-cursor,
	body.is-over-iframe #studi-cursor-inner {
	  opacity: 0 !important;
	  visibility: hidden !important;
	}
	
	/* Optionnel : éviter une “latence” de transition */
	body.is-over-iframe #studi-cursor-inner {
	  transition: 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: 99999999999;
		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;
	}
	
	/* EFFETS DE SURVOL */
	
	
	/* Active seulement sur devices avec vrai hover */
	@media (hover: hover) and (pointer: fine) {
	
	  .hover-opacity{
		--fade-opacity: .35;
		--fade-blur: 2px;
	  }
	
	  /* cible le "card wrapper" : généralement le premier group dans la colonne */
	  .hover-opacity .et_pb_row > .et_pb_column > .et_pb_module{
		will-change: transform, opacity, filter;
		transform: translateZ(0); /* force un calque GPU */
		backface-visibility: hidden;
	  }
	
	  /* Quand une colonne est hover -> on atténue les AUTRES (sur le group) */
	  .hover-opacity .et_pb_row:has(> .et_pb_column:hover)
	  > .et_pb_column:not(:hover)
	  > .et_pb_module{
		opacity: var(--fade-opacity);
		filter: blur(var(--fade-blur));
		transition: opacity .25s ease, filter .25s ease;
	  }
	
	  /* La colonne hover reste clean (sans toucher aux transitions Divi) */
	  .hover-opacity .et_pb_row:has(> .et_pb_column:hover)
	  > .et_pb_column:hover
	  > .et_pb_module{
		opacity: 1;
		filter: none;
	  }
	}

	/* NOISE */
	
	body #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;
	}
	
	
	.grid-noise-bg {
	  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;
	  background-blend-mode: multiply;
	}
	
	
	.noise-bg {
	  background-image:	url('/wp-content/themes/lestudial/assets/svg/bruit.svg');
	  background-repeat: repeat, repeat;
	  background-size: 250px, 160px;
	  background-blend-mode: multiply;
	}
	
	/* BLUR */
	
	#blur {
	backdrop-filter: blur(4px) saturate(70%);
	-webkit-backdrop-filter: blur(4px) saturate(70%);
	}
	
	
/* SCROLL */ 

	/* Toutes les ancres par ID (quand on scroll vers elles) */
	[id]{
	  scroll-margin-top: calc(var(--header-offset) + 8px);
	}
	
	
/* TEXT */

	#highlight {
		font-family: 'Piloner',Helvetica,Arial,Lucida,sans-serif;
	}
	
	.home h1 span#highlight {
		font-size: 140px;
	}
	
	h1 em, h2 em, h3 em, h4 em, h5 em {
		font-family: 'Piloner',Helvetica,Arial,Lucida,sans-serif;
		font-weight: 700;
	}
	
	@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;
	}
	
	.list-custom.check ul li::before {
		content: url(/wp-content/themes/lestudial/assets/svg/lestudial_check.svg);
		margin-right: 8px;
	}
	
	/* Surtitre éditorial */
	.ls-surtitre {
	  font-size: 12px;
	  font-weight: 600;
	  letter-spacing: 0.05em;
	  text-transform: uppercase;
	  color: #8AA0B3;
	  margin-bottom: 0;
	  padding-bottom: 0;
	}
	
	
/* 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: 18px 24px 0;
	}
	
	.et_pb_menu .et-menu>li {
		padding: 0;
		margin-top: 6px !important;
	}
	
	.et_pb_menu .et-menu {
		margin-left: 0;
		margin-right: 0;
	}
	
	
	
	.et_pb_section--fixed.et_pb_section_0_tb_header {
		background: unset;
	}
	
		/* MOBILE */
	
	#close-button img {
		margin: 0 auto;
		width: auto !important;
	}
	
	#menu-mobile[style*="display:none"] {
		display: flex !important; /* force l'affichage pour anima CSS */
	}
	
	@supports selector(body:has(*)) {
	  body:has(#menu-mobile.is-visible) {
		overflow: hidden;
		touch-action: none;
	  }
	}
	
	#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;
	}
	
	/* Base : bordure neutre sur les items cliquables */
	#menu-mobile .et_pb_group.et_clickable{
	  border: 1px solid transparent;
	  box-sizing: border-box;
	}
	
	/* Actif : uniquement sur le groupe cliquable qui contient le lien */
	body.page-id-973  #menu-mobile .et_pb_group.et_clickable:has(a[href="/identite-visuelle/"]),
	body.page-id-2113 #menu-mobile .et_pb_group.et_clickable:has(a[href="/site-web/"]),
	body.page-id-2184 #menu-mobile .et_pb_group.et_clickable:has(a[href="/photographie/"]),
	body.page-id-2233 #menu-mobile .et_pb_group.et_clickable:has(a[href="/a-propos/"]),
	body.page-id-2077 #menu-mobile .et_pb_group.et_clickable:has(a[href="/faq/"]) {
	  border-color: #003159;
	}
	
	
	
	/* 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;
	}
	
	
/* POPIN */

	/* Empêche le scroll de la page en arrière-plan */
	body.is-modal-open {
	  overflow: hidden;
	  position: fixed;
	  width: 100%;
	}
	
	
/* FOOTER */


.et-db #et-boc .et-l.et-l--footer .et_builder_inner_content {
	z-index: 1 !important;
}
	
/* ACCUEIL */

	/* VISUELS FLOTTANTS */
	
	:root {
	  --float-duration: 6s;
	  --float-delay: 0s;
	  --float-translate-z: 0px;
	  --float-translate-y: 4px;
	  --float-scale: 0.95;
	  --float-rotate: 5deg;
	  --float-easing: cubic-bezier(0.68, -0.55, 0.27, 1.55);
	  --header-offset: 140px;
	  --content-width: 90%;
	  --color-scheme: light;
	}
	
	.floating {
	  animation: dipi-zoomrotate-effect var(--float-duration) var(--float-easing) infinite alternate;
	  transform-origin: 50% 50%;
	  animation-delay: var(--float-delay);
	  animation-fill-mode: both;
	}
	
	@keyframes dipi-zoomrotate-effect {
	  0% {
		transform: translate3d(0px, 0px, var(--float-translate-z)) scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
	  }
	  100% {
		transform: translate3d(0px, var(--float-translate-y), var(--float-translate-z)) scale3d(var(--float-scale), var(--float-scale), 1) rotate3d(0, 0, 1, var(--float-rotate));
	  }
	}
	
	
/* 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;
	}
	

/* Accordéons */
	.et_pb_accordion .et_pb_accordion_item.et_pb_toggle_close .et_pb_toggle_title:before, .et_pb_accordion .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before {
		font-family: unset !important;
		content: "" !important;
		background-image: url(/wp-content/plugins/ls-faq-search/assets/css/../svg/arrow-top.svg) !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 12px !important;
		width: 16px;
		height: 16px;
		right: 4px;
		top: 50%;
	}


/* CRÉATIONS - BLOCS FLEXIBLES */


	/* Wrapper global */
	.ls-flex {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 56px);
	}
	
	/* Spacing vertical par bloc */
	.ls-flex__block {
	padding: clamp(20px, 3vw, 56px) 0;
	}

	.ls-block{
	  padding-top: var(--ls-block-pt, 0px);
	  padding-bottom: var(--ls-block-pb, 0px);
	}
	
	@media screen and (max-width: 767px) {
	  .ls-block {
		padding-top: calc(var(--ls-block-pt, 0px) / 2);
		padding-bottom: calc(var(--ls-block-pb, 0px) / 2);
	  }
	}