/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


/* ------------ FONTS ------------ */ 

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('...//wp-content/themes/generatepress_child/fonts/Roboto-Italic.woff2'); /* IE9 Compat Modes */
  src: local(''),
       url('https://www.inlustrys.com/wp-content/themes/generatepress_child/fonts/Roboto-Italic.woff2') format('woff2'); /* Legacy iOS */;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('...//wp-content/themes/generatepress_child/fonts/roboto-v49-latin-regular.woff2'); /* IE9 Compat Modes */
  src: local(''),
       url('https://www.inlustrys.com/wp-content/themes/generatepress_child/fonts/roboto-v49-latin-regular.woff2') format('woff2'); /* Legacy iOS */;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('...//wp-content/themes/generatepress_child/fonts/roboto-v49-latin-regular.woff2'); /* IE9 Compat Modes */
  src: local(''),
       url('https://www.inlustrys.com/wp-content/themes/generatepress_child/fonts/roboto-v49-latin-500.woff2') format('woff2'); /* Legacy iOS */;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 800;
  src: url('...//wp-content/themes/generatepress_child/fonts/Roboto-Italic.woff2'); /* IE9 Compat Modes */
  src: local(''),
       url('https://www.inlustrys.com/wp-content/themes/generatepress_child/fonts/Roboto-Light.woff2') format('woff2'); /* Legacy iOS */;
}


@font-face {
  font-family: 'Shavonca';
  font-style: normal;
  font-weight: 400;
  src: url('...//wp-content/themes/generatepress_child/fonts/Shavonca-Regular.woff2'); /* IE9 Compat Modes */
  src: local(''),
       url('https://www.inlustrys.com/wp-content/themes/generatepress_child/fonts/Shavonca-Regular.woff2') format('woff2'); /* Legacy iOS */;
}


@media (hover: hover) and (pointer: fine) {
	/* Cacher le curseur par défaut partout */
	body {
	  cursor: none;
	}

	.custom-cursor {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 40px;
	  height: 40px;
	  border-radius: 0%;
	  pointer-events: none; /* important pour ne pas bloquer les clics */
	  transform: translate(-50%, -50%);
	  z-index: 9999;
		background-image: url("https://www.inlustrys.com/wp-content/themes/generatepress_child/fonts/curseur.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.custom-cursor {
	  position: fixed;
	  left: 0;
	  top: 0;
	  pointer-events: none;
	  will-change: transform;
	}

	.custom-cursor.is-link-hover {
	  transform: translate(-50%, -50%) scale(1.8); /* grossissement au survol */
	}
}

/* ------------ TXT STYLES ------------ */  


body{
  font-family: "Roboto";
}

h1 {
    font-size: 24px;
    letter-spacing: 20px;
    margin-top: 45vh !important;
}

@media (max-width: 1024px) {
	h1 {
		 margin-top: 25vh !important;
	}
}

.hm{
  font-family: 'Shavonca';
  text-transform: uppercase;
  letter-spacing: 8px;
  font-size: 25px;
}


.hs{
  letter-spacing: 8px;
  font-size: 17px;
}

.bullet {
    font-weight: 300;
	font-size: 14px;
	letter-spacing: 2px;
}

.bullet em {
    font-family: 'Shavonca';
	font-style: initial !important;
}

/* ------------ NAV ------------ */

.has-inline-mobile-toggle #site-navigation.toggled {
    margin-top: 0em !important;
}

/* ------------ BUTTONS ------------ */  

button.btn-corners-static {
    position: relative;
    background-color: transparent !important;
    padding: 13px 15px 13px 20px !important;
    color: var(--accent);
    letter-spacing: 8px;
    font-family: "Roboto";
}

svg.arc{
  position: absolute;
}

svg.arc.tr {
    top: 0px;
    right: 0px;
}

svg.arc.br {
    bottom: 0px;
    right: 0px;
}

svg.arc.bl {
    bottom: 0px;
    left: 0px;
}

svg.arc.tl {
    top: 0px;
    left: 0px;
}

#hero-logo {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 900px);
  z-index: 9999;        /* au-dessus du header */
  pointer-events: none; /* le logo ne bloque pas les clics */
  will-change: transform, width, top;
}

#hero-logo img {
  display: block;
  width: 100%;
  height: auto;
}


/* Taille finale souhaitée quand il est "dans" le header */
:root {
  --final-logo-width: 140px; /* ajustez à votre goût */
  --final-top-offset: 14px;  /* espace depuis le haut une fois réduit */
}

/* Si vous avez déjà un logo dans le header GP, option pour le masquer
   (vous pourrez l'afficher à la fin via JS si vous préférez) */
.site-logo, .site-branding .logo, .site-header .site-logo {
  display: none;
}

/* Un peu de marge en haut du contenu pour ne pas coller au logo final */


/* Respect du "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  #hero-logo {
    transition: none !important;
  }
}





/* ------------ NAV ------------ */

.inside-header.grid-container {
    position: fixed;
}

.inside-header.grid-container {
    width: 100%;
}

.main-navigation .main-nav>ul{
    flex-direction: column;
    align-content: flex-start !important;
    align-items: flex-start !important;
}

.inside-header {
    display: flex;
    align-items: flex-start;
	margin-top: 30px;
}


header#site-header {
    z-index: 1000;
    position: relative;
}

.site-header {
    background-color: transparent;
}

/*.site {
    margin-top: -350px;
}*/

.inside-header.grid-container {
    max-width: none !important;
}

.main-navigation, .main-navigation ul ul{
  background: transparent !important;
}

.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items, .cta-nav a {
  color: var(--accent) !important;
  letter-spacing: 10px;
  font-size: 14px;	
	text-decoration: none;
}

.main-navigation .main-nav ul li a{
  line-height: 30px;
}

/* ------------ MARQUEE ------------ */

.marquee {
  --gap: 5rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  /* optionnel : hauteur fixe si tu veux un ruban */
  /* height: 56px; display:flex; align-items:center; */
}


#marquee1 {
    padding: 80px 0px;
}

#marquee1 span {
    font-family: "Roboto";
    /* font-size: 20px; */
    color: var(--contrast);
    font-weight: 200;
    font-size: 14px;
    letter-spacing: 4px;
}

#marquee2 {
    padding: 80px 0px;
}

#marquee2 span {
    font-family: "Shavonca";
    /* font-size: 20px; */
    color: var(--contrast);
    font-weight: 200;
    font-size: 30px;
    letter-spacing: 4px;
    text-transform: uppercase;
}



.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  white-space: nowrap;  /* évite les retours à la ligne */
  will-change: transform;
}

.marquee__item {
  display: inline-block;
  padding: .25rem .75rem;
  font: 600 1.125rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .02em;
}



/* Scroll Smoother */

/* ⚠️ Ne PAS forcer html/body à height:100% */
html { scroll-behavior: auto; } /* pas de smooth natif */
body { margin: 0; background:#0f0f0f; color:#fff; }

/* Structure GSAP Smoother */
.smooth-wrapper { overflow:hidden; }
.smooth-content { will-change: transform; }

/* Contenu de démo */
.panel { min-height: 100dvh; display:grid; place-items:center; }



/* CAROUSEL */

  /* Carousel GSAP — responsive + effet sirupeux */
:root{
  color-scheme: dark;
  --slide-ratio: 3/4;
  --slide-radius: 0px;
  --progress-h: 1px;
}

.carousel{ width: 100%; margin-top: 40px; margin-bottom: 40px }
.viewport{
  position: relative;
  overflow: hidden;          /* masque la demi-slide */
  width: 100%;
  user-select: none;
}

/* On capte le drag sur .viewport (pas la track) */
.viewport{
  touch-action: pan-y;   /* autorise le scroll vertical natif, drag horizontal custom */
  cursor: grab;
}
.viewport.is-dragging{ cursor: grabbing; }

.track{
  display: flex;
  gap: 10px;                    /* garder 0 pour préserver la demi-slide aux bords */
  will-change: transform;
  touch-action: pan-y;       /* laisse le scroll vertical natif sur mobile */
  cursor: grab;
}
.track.is-dragging{ cursor: grabbing; }

.slide{
  position: relative;                 /* nécessaire pour le pseudo-élément */
  overflow: hidden;                   /* coupe l'image qui dépasse */
  flex: 0 0 auto;
  padding: 10px 0px;
  aspect-ratio: var(--slide-ratio);
  border-radius: var(--slide-radius);
  background: #f4f0e8;                /* fond initial */
  background-position: center;
  color: #fff;
  display: grid; align-content: space-between;
  justify-content: center;
  font: 600 18px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-align: center;
  transition: background-color .8s ease; /* la couleur peut rester animée */
}

/* Calque image qui apparaît en fondu */
.slide::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transform: scale(1);             /* léger zoom initial pour un fondu clean */
  transition: opacity .6s ease, transform .8s ease;
  will-change: opacity, transform;
  top: 0px;
  bottom: 0px;
}

.slide:nth-child(1)::after{
	background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/5-BOSWELLIA.webp")
              center / cover no-repeat;
}

.slide:nth-child(2)::after{
	background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/5-FLEUR-DE-CITRUS.webp")
              center / cover no-repeat;
}

.slide:nth-child(3)::after{
	background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/5-GINGEMBRE.webp")
              center / cover no-repeat;
}
.slide:nth-child(4)::after{
	background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/5-IMMORTELLE.webp")
              center / cover no-repeat;
}

.slide:nth-child(5)::after{
	background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/5-JASMIN.webp")
              center / cover no-repeat;
}


.slide:nth-child(6)::after{
	background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/5-MENTHE-POIVREE.webp")
              center / cover no-repeat;
}


.slide:nth-child(7)::after{
	background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/5-MONARDE-FISTULEUSE.webp")
              center / cover no-repeat;
}


.slide:nth-child(8)::after{
	background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/5-NARCISSE.webp")
              center / cover no-repeat;
}

.slide:nth-child(9)::after{
	background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/5-ROSE.webp")
              center / cover no-repeat;
}

.slide:nth-child(10)::after{
	background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/5-TUBEREUSE.webp")
              center / cover no-repeat;
}

/* Contenu au-dessus de l'image */
.slide > *{
  position: relative;
  z-index: 1;
}

/* Hover = fondu + petit “unzoom” */
.slide:hover::after{
  opacity: 1;
  transform: scale(1);
}

/* Accessibilité : réduire le mouvement si demandé */
@media (prefers-reduced-motion: reduce){
  .slide::after{ transition: opacity .3s linear; transform: none; }
}


.slide span{
    font-family: "Shavonca";
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 200;
    color: var(--contrast);
}

.slide:hover span{
  color: var(--base);
}

.slide svg{
  stroke: #2B2E34 !important;
}

.slide:hover svg{
  stroke: var(--accent) !important;
}


.slide svg {
    width: 90% !important;
    margin: auto;
}

.progress{
  position: relative;
  height: var(--progress-h);
  margin-top: 14px;
  border-radius: 999px;
}
.progress__bg{
  position: absolute; inset: 0;
  background:#2b2b2b33;
  border-radius: inherit;
}
.progress__bar{
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--accent);
  border-radius: inherit;
}


p.gb-text.ps {
    margin-bottom: 0px;
    font-family: "Roboto";
    font-size: 14px;
    letter-spacing: 5px;
}

.gb-element-b5d0415f {
    position: relative;
}

.gb-element-b5d0415f:before {
    content: "APPLICATIONS";
    transform: rotate(-90deg);
    left: -140px;
    position: absolute;
    font-family: "Shavonca";
    letter-spacing: 10px;
    color: var(--contrast);
    top: 90px;
}

/* LAYOUTS */

@media (min-width: 1024px){

	.metier, .magnolia, .exception1, .exception2, .biodiversite, .equitable {
		position: relative;
		transition: background 1s ease-in-out;
	}

	.metier::after, .magnolia::after, .exception1::after, .exception2::after, .biodiversite::after, .equitable::after {
	  content: "";
	  position: absolute;
	  inset: 0;
	  opacity: 0;
	  transition: opacity 600ms ease-in-out;
	  will-change: opacity;
	}

	.metier::after{
		background: url("https://www.inlustrys.com/wp-content/uploads/2025/09/metier-1.webp") center / cover no-repeat;
	}

	.magnolia::after{
	  background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/2-COULEUR-DROITE.webp") center / cover no-repeat;
	}


	.exception1::after{
	  background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/3-COULEUR-GAUCHE.webp") center / cover no-repeat;
	}

	.exception2::after{
	  background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/4-COULEUR-DROITE.webp") center / cover no-repeat;
	}

	.biodiversite::after{
		background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/8-COULEUR-DROITE.webp") center / cover no-repeat;
	}

	.equitable::after{
		background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/8-COULEUR-GAUCHE.webp") center / cover no-repeat;
	}


	.metier:hover::after, .metier:hover p, 
	.magnolia:hover::after, .magnolia:hover p, 
	.exception1:hover::after, .exception2:hover::after, 
	.biodiversite:hover::after, .biodiversite:hover p, 
	.equitable:hover::after, .equitable:hover p {
	  opacity: 1;
	}

	.metier p, .magnolia p, .biodiversite p, .equitable p{
		opacity: 0;
		z-index: 100;
		position: relative;
		transition: opacity 600ms ease-in-out;
	}


	.alchimie{
		filter: grayscale(1);
		transition: all 600ms ease-in-out;
	}


	.alchimie:hover{
		filter: grayscale(0);
	}

	.exceptions {
		position: relative;
	}
}

@media (max-width: 1023px){
	
	.metier, .magnolia, .exception1, .exception2, .biodiversite, .equitable {
		position: relative;
	}
	
	.metier::after, .magnolia::after, .exception1::after, .exception2::after, .biodiversite::after, .equitable::after {
	  content: "";
	  position: absolute;
	  inset: 0;
	}

	.metier::after{
		background: url("https://www.inlustrys.com/wp-content/uploads/2025/09/metier-1.webp") center / cover no-repeat;
	}

	.magnolia::after{
	  background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/2-COULEUR-DROITE.webp") center / cover no-repeat;
	}

	.biodiversite::after{
		background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/8-COULEUR-DROITE.webp") center / cover no-repeat;
	}

	.equitable::after{
		background: url("https://www.inlustrys.com/wp-content/uploads/2025/11/8-COULEUR-GAUCHE.webp") center / cover no-repeat;
	}
	
	
	.metier p, .magnolia p, .biodiversite p, .equitable p{
		opacity: 1;
		z-index: 100;
		position: relative;
	}

}


.center-absolute {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
	text-align: center !important;
}



.link-segment{
  position: relative;
  display: inline-block;          /* garde la boîte autour du texte */
  padding-right: 1.25em;          /* espace pour le segment à droite */
  text-decoration: none;
}

/* Segment */
.link-segment::after{
  /* variables faciles à régler */
  --seg-longueur: 12px;           /* longueur finale du segment */
  --seg-epaisseur: 1px;           /* épaisseur du segment */
  --seg-dec: 6px;                 /* écart entre le texte et le segment */
  --seg-couleur: var(--accent);    /* hérite de la couleur du lien */

  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--seg-longueur);
  height: var(--seg-epaisseur);
  margin-right: var(--seg-dec);

  background: var(--seg-couleur);
  border-radius: var(--seg-epaisseur);

  /* centré verticalement + invisible au repos */
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  opacity: 0;

  transition:
    transform 280ms ease,
    opacity 220ms ease;
  will-change: transform, opacity;
}

/* Au survol : le segment “pousse” de gauche à droite */
.link-segment:hover::after,
.link-segment:focus-visible::after{
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
}

/* Optionnel : respect du “réduire les animations” */
@media (prefers-reduced-motion: reduce){
  .link-segment::after{
    transition: none;
  }
}

/* Animation fade-in */
@keyframes fadeInLink {
  from {
    opacity: 0;
    transform: translateY(4px); /* petit décalage optionnel */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Application à ton lien */
.link-segment {
  opacity: 0; /* état initial */
  animation: fadeInLink 3s ease forwards;
}


#up-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}

#up-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* --- Bouton flottant --- */
#up-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: transparent !important;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
  z-index: 9999;
}

#up-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#up-top:hover {
  background: rgba(0, 0, 0, 0.9);
}

/* --- Chevrons construits avec les pseudo-éléments --- */
#up-top::before,
#up-top::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 15px;
  height: 1px;
  margin-top: -1px;
  background-color: var(--contrast);
  transform-origin: 21px 0;
  transition: transform 0.3s ease;
}

/* Le second segment (décalé à droite) */
#up-top::after {
  left: 15px;
  transform-origin: 3px 0;
}

/* --- Animation hover : transformation en chevron vers le haut --- */
#up-top:hover::before {
  transform: translate(2px, -15px) rotate(-40deg);
}

#up-top:hover::after {
  transform: translate(3px, -9px) rotate(40deg);
}


.site-footer a {
    text-decoration: none;
    font-style: normal;
}