/*
Theme Name: Kano
Theme URI: https://sasico.pikathemes.site/
Description: Kano Theme
Author: Kano Energy
Author URI: http://pikathemes.site/
Template: sasico
Version: 1.0.0
*/

/* Spécial pour les landing */

/* Applique une police spécifique à tous les H2 des pages "landing" */
.landing h2.sasi-heading__title {
  font-size: 4rem;
}

/* Blog */

		/* Tailles des polices */
		.wp-singular h1.entry-title{
				font-size: 48px;
			}
		.wp-singular	div.entry-text  h2 {
				font-size: 36px;
			}
		.wp-singular div.entry-text h3 {
				font-size: 30px;
			}
		.wp-singular div.entry-text p {
				font-size: 16px;
			}


		div.wp-block-button a.wp-block-button__link {
			background-color : #80F1FF;
			margin: 30px;
		}

	div.wp-block-button.is-style-outline a.wp-block-button__link {
		background-color : transparent;
		border-color : #6BF6D3;
		color: #6BF6D3;
	}

		.highlight {
		  background-color: #f0f8ff; /* Couleur de fond */
		  border-radius: 15px; /* Bords arrondis */
		  padding: 20px; /* Espacement intérieur */
		  position: relative; /* Position relative pour positionner l'emoji */
		  margin: 20px;
			color: black;
		}

		.danger {
		  background-color: #FC9090;
		}
		.danger::before {
		  content: "⚠️"; /* Emoji */
		  position: absolute; /* Position absolue pour placer l'emoji */
		  top: -10px; /* Position en haut */
		  left: -10px; /* Position à gauche */
		  font-size: 24px; /* Taille de l'emoji */
		}

		@media (max-width: 768px) {
			.wp-singular h1.entry-title{
				font-size: 30px;
				margin-top: 30px;
			}
			.wp-singular	div.entry-text  h2 {
				font-size: 26px;
			}
			.wp-singular div.entry-text h3 {
				font-size: 20px;
			}
			.wp-singular div.entry-text p {
				font-size: 14px;
			}
			div.wp-block-button a.wp-block-button__link {
			background-color : #80F1FF;
			margin: 30px 0px 30px 0px ;
			}
		}

/* Shop */
div.wc-block-cart__submit-container {
	background-color: #8FF8DE;
	border-radius: 14px;
}
div.wc-block-cart__submit-container .wc-block-components-button__text {
	color: #fff;
	font-weight: 500;
}

/* Sub-menu du header desktop */
nav.main-navigation ul.sub-menu {
	width: 300px;
}

/* Nav interne des fonctionnalités détaillées */
	.internal-nav .link a {
		padding: 12px 0 12px 20px  ;
		display: inline-block;
		width: 100%;
	}
	.internal-nav .count {
		color: #00e3ff;
		margin-right : 8px;
	}
	.internal-nav .category-title {
		margin-bottom: 18px;
		font-weight: 700;
		color: #211f54;
		display: flex; /* Active flexbox pour aligner le texte et la ligne horizontalement */
	  align-items: center; /* Centre verticalement le texte et la ligne */

	}
	.internal-nav .category-title::after {
	 content: ""; /* Contenu vide pour la pseudo-classe */
	  display: block; /* Affiche comme un bloc */
	  flex: auto; /* Prend tout l'espace restant après le texte */
	  height: 1px; /* Hauteur de la ligne (0.994px dans ton exemple) */
	  background: #00e3ff;
	  width: auto; /* Largeur automatique (s'étend jusqu'au bord) */
	margin-left : 8px;
	}

	.internal-nav .links {
		padding-bottom: 32px;
	}

	.internal-nav .link a.active {
	  background: #57EDFF; /* Fond bleu pour la page active */
	  color: white;
	  font-weight: bold;

		border-radius:  30px 0 0 30px;
	}

/* Header mobile devient blanc si landing noire */

	 .dark-hero .header-mobile .the-logo img {
		content: url("/wp-content/uploads/2026/01/Kanoenergy_logoprincipal_couleur_blanc.svg");
		}

	 .dark-hero .header-mobile .is-stuck .the-logo img {
		content: url("/wp-content/uploads/2025/11/Kanoenergy_logoprincipal_couleur.svg");
	}
	.dark-hero .header-mobile i.ss-menu1 {
		color: #ffffff;
	}
	.dark-hero .header-mobile .is-stuck i.ss-menu1 {
		color: #000000;
	}

	/* Version mobile/tablette */
	@media (max-width: 768px) {

		.menu-mobile select { 
			border: 1px solid #00e3ff;
		}

		.mmenu-wrapper {
		top: 0 !important;
		}
	}
	
/* Formulaires */
	.kano-form {
		color: black;
	}
	.kano-form input {
		font-size: 12px;
		color: black;
	}
	.kano-form label {
		display: block;
		font-size: 12px;
	}
	.kano-form input[type="text"], .kano-form input[type="email"], .kano-form input[type="tel"], .kano-form textarea {
		width: 100%;
		border: none;
		height: 40px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		-o-border-radius: 20px;
		border-radius: 20px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		padding: 10;
	}
	.kano-form textarea {
		min-height: 80px;
		height: auto;
		padding: 10px;
	}
	.kano-form .sasi-btn-icon {
		padding: 4px 4px 4px 25px;
	}

	.kano-form.dark textarea, .kano-form.dark input {
		border: solid #80F1FF 1px;
	}

/* Popup form */
.kano-form-popup {
    font-family: Arial, sans-serif;
    max-width: 900px;
    margin: 20px auto;
    padding: 50px;
    line-height: 1.6;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kano-form-popup input,
.kano-form-popup textarea {
    font-weight: 300;
	font-size: 14px;
}

/* Style pour les labels de checkbox avec icônes */
.kano-form-popup .wpcf7-list-item-label::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f0c8"; /* Icône par défaut (ex: icône de chauffe-eau) */
    margin-right: 8px;
    color: #57EDFF;
	transition: all 1s ease;
}

.kano-form-popup .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
	color: #fff;
}

/* Icônes spécifiques pour chaque type d'équipement */
.kano-form-popup [value="Monophasé"] + .wpcf7-list-item-label::before { content: "\f525";}
.kano-form-popup [value="Triphasé"] + .wpcf7-list-item-label::before { content: "\f527";}
.kano-form-popup [value="Chauffe-eau"] + .wpcf7-list-item-label::before {content: "\f043";}
.kano-form-popup [value="Radiateurs"] + .wpcf7-list-item-label::before {content: "\e040";}
.kano-form-popup [value="Pompe de piscine"] + .wpcf7-list-item-label::before {content: "\f5c5";}
.kano-form-popup [value="Pompe à chaleur"] + .wpcf7-list-item-label::before {content: "\f863";}
.kano-form-popup [value="Chargeur de voiture"] + .wpcf7-list-item-label::before {content: "\f863";}
.kano-form-popup [value="Autres"] + .wpcf7-list-item-label::before {content: "\f141";}

/* Titres des sections */
.kano-form-popup p {
    font-weight: bold;
    color: #333;
}

/* Style des boutons radio et cases à cocher */
	.kano-form-popup .wpcf7-list-item {
		display: inline-block;
		margin-right: 8px;
		margin-bottom: 8px;
	}

	.kano-form-popup .subtext {
		font-size: 12px;
		font-weight: 200;
	}

	.kano-form-popup .wpcf7-list-item-label {
		display: inline-block;
		padding: 8px 16px;
		background-color: #f8fafb;
		border: 1px solid #80F1FF;
		border-radius: 20px;
		cursor: pointer;
		transition: all 1s ease;
		font-weight: normal;
		font-size: 12px;
	}

	.kano-form-popup .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label,
	.kano-form-popup .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label {
		background-color: #211f54;
		color: #ffffff;
		border: 1px solid #211f54;
	}

	.kano-form-popup input[name="equipment-details"] {
		transition: none;
	}

	/* Masquer les inputs natifs */
	.kano-form-popup .wpcf7-list-item input[type="radio"],
	.kano-form-popup .wpcf7-list-item input[type="checkbox"] {
		display: none;
	}

	/* Style pour les sections */
	.kano-form-popup .wpcf7-form-control-wrap {
		display: block;
		margin-bottom: 15px;
	}

	.kano-form-popup .wpcf7-submit:hover {
		background-color: #005177;
	}

	/* Espacement entre les sections */
	.kano-form-popup p {
		margin: 8px;
	}

	/* Conteneur flexible pour les champs côte à côte */
	.kano-form-popup .flex-container {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		margin-bottom: 15px;
		align-items: flex-start; /* Aligne les éléments en haut */
	}
	/* Éléments flexibles (champs) */
	.kano-form-popup .flex-item {
		flex: 1;
		min-width: 200px; /* Largeur minimale pour éviter que les champs soient trop petits */
	}

	.kano-form-popup textarea[name="equipment-details"] {
		height: 80px; /* Hauteur par défaut */
	}

	.kano-form-popup input[name="installation-details"] {
		width: 100%;
	}

	/* Style pour le popup (si utilisé dans une fenêtre modale) */
	.kano-form-popup .popup-close {
		float: right;
		cursor: pointer;
		font-size: 20px;
	}
	/* Menu pour mobile + tablette */
	@media (max-width: 990px) {
		#mmenu-toggle > button {
			background-color: transparent;
		}
	}


	@media (max-width: 600px) {
	.kano-form .form-row {
		flex-direction: column;
	}
	.kano-form .width-40, .kano-form .width-60 {
		max-width: 100%;
	}

		.kano-form-popup {
			padding: 50px 20px 20px 20px;
		}
		.kano-form-popup h2 {
			font-size : 18px;
		}
	
	/* Mobile shop */
		.product .variations tr {
			flex-direction: column; /* Stacks children vertically */
		}

		.product .variations th.label,
		.product .variations td.value {
			display: block; /* Makes each cell take up its own line */
			width: 100%; /* Ensures full width */
		}

		.woocommerce-variation-add-to-cart.variations_button {
			display: flex; /* Use flexbox to align items horizontally */
			align-items: center; /* Vertically center the items */
			gap: 10px; /* Add some space between the input and the button */
		}

		.woocommerce-variation-add-to-cart .quantity {
			margin: 0; /* Remove default margins */
		}

		.woocommerce-variation-add-to-cart .quantity input[type="number"] {
			width: 60px; /* Set a fixed width for the input */
			text-align: center; /* Center the text in the input */
		}

		.woocommerce-variation-add-to-cart .single_add_to_cart_button {
			margin: 0; /* Remove default margins */
		}
	}

/* Toggle pro/particulier  */
	.pp-toggle {
		display: inline-block;
		position: relative;
		font-family: inherit;
	}
	.pp-toggle input {
		display: none;
	}
	.pp-toggle label {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		height: 40px;
		justify-content: space-around;
		cursor: pointer;
		-moz-transition: background 0.25s;
		-webkit-transition: background 0.25s;
		-o-transition: background 0.25s;
		transition: background 0.25s;
		-moz-border-radius: 40px;
		-webkit-border-radius: 40px;
		-o-border-radius: 40px;
		border-radius: 40px;
		padding: 6px 20px;
	}
	.pp-label-left, .pp-label-right {
		font-size: 12px;
		text-align: center;
		width: auto;
		color: #f8fafb;
		-moz-transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		font-weight: 400;
		opacity: .5;
		white-space: nowrap;
		z-index: 2;
		padding: 10px;
	}
	#pp-switch:not(:checked) + label .pp-label-left {
		padding-left: 25px;
		color: white;
		font-weight: 700;
		opacity: 1;
	}
	#pp-switch:checked + label .pp-label-right {
		padding-right: 25px;
		color: white;
		font-weight: 700;
		opacity: 1;
	}
	.pp-slider {
		position: absolute;
		width: 28px;
		height: 28px;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		background-color: #fff;
		-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
		-o-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
		box-shadow: 0 1px 4px rgba(0,0,0,0.3);
		top: 50%;
		left: 8px;
		-moz-transition: left 0.25s;
		-webkit-transition: left 0.25s;
		-o-transition: left 0.25s;
		transition: left 0.25s;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		-o-border-radius: 50%;
		border-radius: 50%;
	}
	#pp-switch:checked + label .pp-slider {
		left: calc(100% - 36px);
	}
	#pp-switch:not(:checked) + label {
		background-color: #57edff;
	}
	#pp-switch:checked + label {
		background-color: #211f54;
	}

	.elementor-1643 .grid-lines {
		display: none;
	}