/*
 Theme Name:   Child GP Custom Hello Mathilde
 Theme URI:    https://generatepress.com
 Description:  Custom Hello Mathilde Theme for INDRA
 Author:       Hello Mathilde 
 Author URI:   https://hello-mathilde.fr/
 Template:     generatepress
 Version:      0.1
*/


:root {
  --light: #E1F6F7;
  --dark: #182227;
  --accent: #97BE0D;
}

.outfit-<uniquifier> {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.overpass-<uniquifier> {
  font-family: "Overpass", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* TYPOS */

p{
	font-family: "Overpass";
	font-size: 1.2rem;
}

.pl{
	font-size: 1.5rem;
}

h1, h2, h3{
	font-family: "Outfit";
	font-weight: 800;
}

.hxl{
	font-size: 5rem;
}

.hl{
	font-size: 4rem;
}

.hm{
	font-size: 3rem;
}

.hs {
    font-size: 2rem;
}

@media (max-width: 800px){
	.hxl{
	font-size: 3rem;
	}

	.hl{
		font-size: 2rem;
	}

	.hm{
		font-size: 1.4rem;
	}

	.hs {
		font-size: 2rem;
	}

}

.outline {
  font-family: 'Outfit', sans-serif;
    color: var(--light) !important;
	letter-spacing:1px;
  text-shadow:
    -1px -1px 0 black,
     0   -1px 0 black,
     1px -1px 0 black,
    -1px  0   0 black,
     1px  0   0 black,
    -1px  1px  0 black,
     0    1px  0 black,
     1px  1px  0 black; 
}

.outline mark {
    text-shadow: none !important;
}

.gradient, .has-accent-color{
	background: linear-gradient(89deg, #77a7a7 11%, #aae768 100.65%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* BUTTON */

.button-dark{
	background-color: var(--dark) !important;
	color: var(--light);
	border-radius: 100px;
	border: 1px solid var(--dark);
	font-family: "Overpass";
	font-size: 20px;
    padding: 12px 25px 8px 25px !important;
    line-height: 2em;
}

.button-outline-light{
	background-color: transparent !important;
	color: var(--light);
	border-radius: 100px;
	border: 1px solid var(--light);
	font-family: "Overpass";
	font-size: 20px;
    padding: 12px 25px 8px 25px !important;
    line-height: 2em;
}


.button-outline-dark{
	background-color: transparent !important;
	color: var(--dark) !important;
	border-radius: 100px;
	border: 1px solid var(--dark);
	font-family: "Overpass";
	font-size: 20px;
    padding: 12px 25px 8px 25px !important;
    line-height: 2em;
}

.button-light{
	background-color: var(--light) !important;
	color: var(--dark) !important;
	border-radius: 100px;
	border: 1px solid var(--light);
	font-family: "Overpass";
	font-size: 20px;
    padding: 12px 25px 8px 25px !important;
    line-height: 2em;
}

.button-outline-light{
	transition: transform 0.2s ease;
}

.button-outline-light:hover{
    transform: translateY(-5px);
}

.tag{
	display: inline-flex;
    background: var(--light);
    border-radius: 100px;
    padding: 12px 20px 10px 20px;
	line-height: 1.2em;
}

/* NAV */

header#masthead {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
}
header#masthead {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
}
.inside-header {
    padding: 20px 60px !important;
}

@media (max-width: 768px) {
		.inside-header {
		padding: 20px 20px !important;
	}

		button.menu-toggle {
		color: white !important;
	}

	.main-navigation.toggled .cta a {
		text-align: center;
	}

	.main-navigation.toggled .cta {
		width: 90% !important;
		text-align: center;
		margin-top: 20px;
		margin-left: 15px;
	}
}

.inside-header.grid-container{
	background: var(--dark);
}

.inside-header.grid-container a{
	color: var(--light);
}


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

header#masthead {
    z-index: 10;
}

.main-navigation .main-nav ul li a {
    color: var(--light);
    font-family: "Outfit";
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 17px;
	line-height: 2.4em;
}

.cta {
	margin-left: 30px;
}

.cta a {
    background: #97BE0D;
    border-radius: 100px;
	color: #FFF !important;
}

.cta:hover a{
	color: #FFF !important;
}

/* encoche triangle */
/*.inside-header.grid-container {
  position: relative;
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - 50px), 
    calc(100% - 50px) 100%, 
    0 100%
  );
}*/

.main-navigation li, .inside-navigation {
    position: static !important;
}

.menu-item-has-children > a{
	line-height: 4em !important;
}

.sub-menu {
    background: var(--dark) !important;
    border: 2px solid #242d31;
    padding: 10px 10px !important;
}

.sub-menu{
	position: absolute !important;
	left: 0px !important;
	right: 0px !important; 
	width: 100% !important;
}

.sub-menu a{
	padding: 10px 20px 2px 20px !important;
}

.menu-item-description {
    padding: 0px 20px 10px 20px;
    font-size: 12px;
    color: var(--light);
	font-family: "Overpass";
}


@media (max-width: 768px) {
	.main-navigation.toggled .main-nav ul ul.toggled-on{
		left: 0px !important;
		top: auto !important;
	}
	
	.inside-header.grid-container {
   	 border-bottom: 1px solid var(--light);
	}


}


/* Structure de base du mega menu */
@media (min-width: 769px){
	.menu-item-has-children.mega-menu > .sub-menu {
	  display: flex !important;
	  flex-wrap: wrap;
	  width: 600px;
	  padding: 20px;
	  background: #fff;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	  z-index: 1000;
	}

	/* Colonnes dans le sous-menu */
	.menu-item-has-children.mega-menu > .sub-menu > li {
	  width: 33.33%;
	  list-style: none;
	  padding: 5px 10px;
	}

	/* Pour éviter les collisions */
	.menu-item-has-children {
	  position: relative;
	}
}

.main-navigation ul ul{
	width: 100% !important;
}

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

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


.cut-top-right {
  position: relative;
  background: white;
  padding: 2rem;
  clip-path: polygon(
    0 0,              /* coin haut gauche */
    calc(100% - 50px) 0, /* décalé à gauche de 50px en haut */
    100% 50px,        /* coin haut droit 50px plus bas */
    100% 100%,        /* coin bas droit */
    0 100%            /* coin bas gauche */
  );
}


.cut-bottom-right {
  position: relative;
  clip-path: polygon(
    0 0,                   
    100% 0,                
    100% calc(100% - 100px),
    calc(100% - 100px) 100%,
    0 100%                 
  );
}

@media (min-width: 671px){

.cut-bottom-left {
  position: relative;
  clip-path: polygon(
    100px 100%,             
    0% calc(100% - 100px),  
    0 0,                   
    100% 0,                
    100% 100%             
  );
}
}

@media (max-width: 670px){
.cut-bottom-left {
  position: relative;
  clip-path: polygon(
    50px 100%,             
    0% calc(100% - 50px),  
    0 0,                   
    100% 0,                
    100% 100%             
  );
	}
}




/*
.outline {
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-size: 4rem;
  color: transparent;
  z-index: 1;
}

.outline::before {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  color: black; 
  -webkit-text-stroke: 1.5px black;
  -webkit-text-fill-color: transparent; 
  z-index: -1;
  pointer-events: none;
  display: block;
}*/




/* LAYOUTS */

.site {
    margin-top: -50px !important;
}



/* BACKGROUND ANIMATION */

.color::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("http://52.47.167.182/wp-content/uploads/2025/05/background-texture2-scaled.webp");
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    z-index: -1;
}

.color {
    position: relative;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

main {
  min-height: 100vh;
  transition: background-color 0.2s linear;
  background: var(--light);
}

.color {
  /*min-height: 90vh;*/
}

.separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header{
	background: transparent !important;
}


/*

.light {
    border-top: 1px solid var(--dark);
    border-bottom: 1px solid var(--dark);

}


.dark {
    border-top: 1px solid var(--light);
    border-bottom: 1px solid var(--light);

}

 */

.arrow-bottom-left:before {
    content: "";
    background-image: url(http://52.47.167.182/wp-content/uploads/2025/05/arrow.png);
    height: 70px;
    width: 70px;
    display: block;
    position: absolute;
    bottom: 20px;
    left: 20px;
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Clickable container */

.linked-container, .blog .inside-article, #generate-slideout-menu .slideout-menu li {
    position: relative;
}

.linked-container .link a:before, .blog .inside-article .entry-title a:before, #generate-slideout-menu .slideout-menu li a:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}

.linked-container .link a, .blog .inside-article .entry-title a {
  text-decoration: none;
}


.linked-container{
	transition: transform 0.2s ease;
}

.linked-container:hover{
    transform: translateY(-5px);
}

.link a {
    text-decoration: none !important;
}


/* Logos scroll */

.logo-container{
  overflow: hidden; /* Masque les parties en dehors de la vue */
  width: 100%; /* Largeur de l'écran */
  position: relative;
  height: 120px; /* Ajustez selon la taille des logos */
  display: flex; /* Permet d'aligner les bandes l'une après l'autre */
}

.logo-slider {
    display: flex;
	gap: 20px; /* Espacement entre les logos */
	animation: scroll 80s linear infinite; /* Animation en boucle */
	white-space: nowrap; /* Évite les sauts de ligne */
	
}
.page{
    overflow-x: hidden; /* Pour éviter la barre de défilement horizontale */
}
.logo-slider img {
    margin-right: 50px; /* Espace entre les logos (ajustez selon vos besoins) */
	max-width: 120px;
    max-height: 80px;
	vertical-align: middle;
	object-fit: contain;
	filter: grayscale(1) contrast(1);
}

@media (max-width: 768px){
	.logo-slider{
		width: 500vw;
		animation: scroll 50s linear infinite !important;
	}
	
	.logo-slider img{
		margin-right: 30px !important;
		max-width: 100px !important;
	}
	
}

/* Animation de défilement */
@keyframes scroll {
  0% {
    transform: translateX(0); /* Position de départ */
  }
  100% {
    transform: translateX(-100%); /* Déplace complètement une bande hors écran */
  }
}


/* BLOG */

.blog .generate-columns-container, .archive .generate-columns-container {
    margin: 0px 4%;
}
/*
.grid-container, .blog .grid-container {
    max-width: none !important;
    width: 100% !important;
}*/

.comments-area, .cat-links, .comments-link, .tags-links {
    display: none !important;
}

/* FOOTER */

.page-header, .sidebar .widget, .site-main>* {
    margin-bottom: 0px;
}

.inside-site-info.grid-container {
    display: none;
}

.separate-containers .site-main {
    margin: 0px !important;
}

.cmplz-message p {
    font-size: 12px !important;
}

.cmplz-btn {
    font-size: 12px !important;
}

.cmplz-cookiebanner{
	grid-row-gap: 1px !important;
}

.cmplz-links.cmplz-documents {
    margin-top: 10px;
}