/*
Theme Name: Kallyas Child
Theme URI: https://michalcik.fr
Description: Thème enfant de Kallyas pour michalcik.fr
Author: Quinéstar
Template: kallyas
Version: 1.1.0
Text Domain: kallyas-child
*/

/* Ajoute ici tes styles personnalisés
   (le style du chatbot est dans mu-plugins/michalcik-chat-style.php) */

/* ---- Portfolio : boutons de catégories centrés et espacés sur mobile ---- */
@media (max-width: 767px) {
	.kl-ptfsortable .kl-ptfsortable-nav {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		float: none !important;
		width: 100%;
		margin: 0 auto 25px !important;
		padding: 0 10px;
		text-align: center;
	}
	/* .fixclear ajoute des pseudo-éléments qui décaleraient les boutons en flex */
	.kl-ptfsortable .kl-ptfsortable-nav::before,
	.kl-ptfsortable .kl-ptfsortable-nav::after {
		display: none !important;
	}
	.kl-ptfsortable .kl-ptfsortable-nav-item {
		float: none !important;
		display: block;
		margin: 0 !important;
	}
	.kl-ptfsortable .kl-ptfsortable-nav-link {
		display: block;
		margin: 0 !important;
		padding: 7px 14px;
		text-align: center;
		white-space: nowrap;
	}
}

/* ---- iOS Slider V2 : flèches et ronds plus grands, jaune du logo (#f7b334) ---- */
/* Flèches gauche / droite */
.zn-iosSl-nav .znSlickNav-arr {
	opacity: .95 !important;
	height: 70px;
	margin-top: -35px;
}
.zn-iosSl-nav .znSlickNav-arr svg {
	width: 70px;
	height: 70px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}
.zn-iosSl-nav .znSlickNav-arr polyline {
	stroke: #f7b334 !important;
	stroke-width: 6;
}
.zn-iosSl-nav .znSlickNav-arr:hover polyline { stroke-width: 9; }
.zn-iosSl-nav .znSlickNav-arr:active polyline { stroke-width: 12; }

/* Ronds en bas (1 par slide) : toujours visibles, plus gros */
.zn-iosSl-dots.bullets {
	opacity: 1 !important;
	bottom: 22px;
}
.zn-iosSl-dots.bullets ul {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}
.zn-iosSl-dots.bullets li {
	display: block;
	margin: 0 !important;
	opacity: 1 !important;
	background: none !important;
}
.zn-iosSl-dots.bullets .slickBtn {
	display: block;
	width: 16px !important;
	height: 16px !important;
	padding: 0;
	margin: 0;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, .85) !important;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
	opacity: 1 !important;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease;
}
.zn-iosSl-dots.bullets li:hover .slickBtn { transform: scale(1.15); }
.zn-iosSl-dots.bullets .slick-active .slickBtn {
	background-color: #f7b334 !important;
	border-color: #f7b334;
	transform: scale(1.25);
}

/* ---- iOS Slider V2 – style 5 : zone de texte limitée en largeur (plus de texte coupé sur les bords) ---- */
.zn-iosSlider .zn-iosSl-caption.zn-iosSl-caption--style5 {
	width: 86% !important;
	max-width: 1050px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.zn-iosSl-caption--style5 .zn-iosSl-mainTitle,
.zn-iosSl-caption--style5 .zn-iosSl-bigTitle,
.zn-iosSl-caption--style5 .zn-iosSl-smallTitle,
.zn-iosSl-caption--style5 .zn-iosSl-titleTop {
	min-width: 0 !important;
	max-width: 100% !important;
	overflow-wrap: break-word;
}
.zn-iosSl-caption--style5 .zn-iosSl-bigTitle {
	line-height: 1.35 !important;
}
@media (max-width: 767px) {
	.zn-iosSlider .zn-iosSl-caption.zn-iosSl-caption--style5 {
		width: 90% !important;
	}
}

/* ---- iOS Slider V2 – style 5 : ombre noire renforcée autour du texte blanc ---- */
.zn-iosSl-caption--style5 .zn-iosSl-mainTitle,
.zn-iosSl-caption--style5 .zn-iosSl-bigTitle,
.zn-iosSl-caption--style5 .zn-iosSl-smallTitle,
.zn-iosSl-caption--style5 .zn-iosSl-titleTop {
	text-shadow:
		0 0 3px rgba(0, 0, 0, .70),
		0 1px 6px rgba(0, 0, 0, .60),
		0 2px 16px rgba(0, 0, 0, .45) !important;
}
/* Petit trait sous le titre : même ombre */
.zn-iosSl-caption--style5 .zn-iosSl-mainTitle::before {
	box-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
/* Mobile : ombre encore plus marquée + voile sombre doux derrière le bloc de texte */
@media (max-width: 767px) {
	.zn-iosSl-caption--style5 .zn-iosSl-mainTitle,
	.zn-iosSl-caption--style5 .zn-iosSl-bigTitle,
	.zn-iosSl-caption--style5 .zn-iosSl-smallTitle,
	.zn-iosSl-caption--style5 .zn-iosSl-titleTop {
		text-shadow:
			0 0 2px rgba(0, 0, 0, .90),
			0 1px 4px rgba(0, 0, 0, .80),
			0 2px 12px rgba(0, 0, 0, .65),
			0 0 28px rgba(0, 0, 0, .45) !important;
	}
	.zn-iosSlider .zn-iosSl-caption.zn-iosSl-caption--style5 {
		padding: 18px 14px !important;
		border-radius: 14px;
		background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .30) 55%, rgba(0, 0, 0, 0) 85%);
	}
}

/* ---- iOS Slider V2 – style 5 : boutons (ex. « DEVIS GRATUIT ») plus grands et plus lisibles ---- */
.zn-iosSl-caption--style5 .zn-iosSl-more .btn {
	font-size: 18px !important;
	line-height: 1.2 !important;
	font-weight: 600;
	letter-spacing: 2px;
	padding: 18px 44px !important;
	border-radius: 4px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
@media (max-width: 767px) {
	.zn-iosSl-caption--style5 .zn-iosSl-more .btn {
		font-size: 15px !important;
		letter-spacing: 1.5px;
		padding: 14px 30px !important;
	}
}

/* ---- CSS3 Panels (Nos produits) : titres et descriptifs jamais coupés ni collés aux bords ---- */
.kl-slideshow-css3panels .css3panel-title,
.kl-slideshow-css3panels .css3panel-text {
	word-break: normal !important;   /* pas de mot coupé au milieu (« Fenêtr-es ») */
	overflow-wrap: normal !important;
	hyphens: manual;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.kl-slideshow-css3panels .css3panel-title {
	line-height: 1.25 !important;
}
.kl-slideshow-css3panels .css3panel-text {
	line-height: 1.45 !important;
	margin-top: 12px !important;
}
@media (min-width: 1200px) {
	/* Marges intérieures régulières, texte centré dans chaque panneau */
	.kl-slideshow-css3panels .css3panel .css3panel-caption {
		padding-left: 28px !important;
		padding-right: 28px !important;
		text-align: center !important;
		box-sizing: border-box;
	}
	/* 1er et dernier panneaux : en partie hors écran (effet incliné), on compense */
	.kl-slideshow-css3panels .css3panel:first-child .css3panel-caption {
		padding-left: 72px !important;
		padding-right: 22px !important;
	}
	.kl-slideshow-css3panels .css3panel:last-child .css3panel-caption {
		padding-left: 22px !important;
		padding-right: 72px !important;
	}
	.kl-slideshow-css3panels .css3panel-title,
	.kl-slideshow-css3panels .css3panel--hasSkew .css3panel:last-child .css3panel-title {
		font-size: clamp(17px, 1.35vw, 25px) !important;
		margin: 0 !important;
	}
	.kl-slideshow-css3panels .css3panel-text {
		font-size: clamp(12px, .95vw, 16px) !important;
	}
}

/* ---- Pied de page : lien « Mentions légales » en noir ---- */
a.mc-footer-legal,
a.mc-footer-legal:visited {
	color: #000 !important;
	text-decoration: none;
	white-space: nowrap;
}
a.mc-footer-legal:hover,
a.mc-footer-legal:focus {
	color: #000 !important;
	text-decoration: underline;
}

/* ---- Menu principal (ordinateur) : capsule « verre dépoli » + boutons en pastilles ----
   Police Jost en 500 (vraie graisse chargée par inc/drapeau-header.php, plus de faux gras).
   Survol : pastille noire, texte blanc. Page active : pastille jaune du logo (#f7b334).
   En dessous de 992 px, Kallyas affiche le menu burger : rien n'est modifié. */
@media (min-width: 992px) {
	#main-menu > ul.main-menu {
		display: inline-flex !important;
		align-items: center;
		gap: 4px;
		margin: 0;
		padding: 5px;
		background: rgba(255, 255, 255, .55);
		border: 1px solid rgba(0, 0, 0, .08);
		border-radius: 999px;
		-webkit-backdrop-filter: blur(12px) saturate(160%);
		backdrop-filter: blur(12px) saturate(160%);
		box-shadow:
			0 8px 28px rgba(0, 0, 0, .10),
			inset 0 1px 0 rgba(255, 255, 255, .9);
	}
	#main-menu > ul.main-menu::before,
	#main-menu > ul.main-menu::after {
		display: none !important;
	}
	#main-menu > ul.main-menu > li.menu-item {
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#main-menu > ul.main-menu > li.menu-item > a {
		display: block;
		position: relative;
		padding: 11px 20px !important;
		border-radius: 999px;
		font-family: 'Jost', sans-serif !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
		letter-spacing: .06em !important;
		color: #1d1d1b !important;
		background: transparent;
		white-space: nowrap;
		transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
	}
	#main-menu > ul.main-menu > li.menu-item > a > span {
		font-weight: inherit !important;
	}
	/* On retire les soulignés / tirets d'origine du thème sur le 1er niveau */
	#main-menu > ul.main-menu > li.menu-item > a::before,
	#main-menu > ul.main-menu > li.menu-item > a::after,
	#main-menu > ul.main-menu > li.menu-item > a > span::before,
	#main-menu > ul.main-menu > li.menu-item > a > span::after {
		display: none !important;
	}
	/* Survol */
	#main-menu > ul.main-menu > li.menu-item:hover > a,
	#main-menu > ul.main-menu > li.menu-item > a:focus-visible {
		background: #1d1d1b;
		color: #fff !important;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
		transform: translateY(-1px);
	}
	/* Page active */
	#main-menu > ul.main-menu > li.menu-item.active > a,
	#main-menu > ul.main-menu > li.current-menu-item > a,
	#main-menu > ul.main-menu > li.current-menu-ancestor > a,
	#main-menu > ul.main-menu > li.current_page_item > a {
		background: #f7b334;
		color: #1d1d1b !important;
		box-shadow: 0 4px 14px rgba(247, 179, 52, .45);
	}

	/* ---- Bouton d'appel (téléphone) : pastille verte, texte blanc, Jost 500, sans ombre ----
	   Survol : vert plus foncé. Remonté de 5 px (top: -5px) pour être à la hauteur de la capsule du menu. */
	.site-header .main-menu-wrapper {
		display: flex;
		align-items: center;
		align-self: center;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	.site-header .ctabutton.kl-cta-custom {
		display: inline-flex !important;
		align-items: center;
		align-self: center;
		gap: 8px;
		position: relative;
		top: -5px;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 14px !important;
		padding: 11px 22px !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: #3aaa35 !important;
		color: #fff !important;
		font-family: 'Jost', sans-serif !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
		letter-spacing: .06em !important;
		text-transform: uppercase;
		white-space: nowrap;
		box-shadow: none !important;
		text-shadow: none !important;
		transition: background-color .25s ease, color .25s ease;
	}
	.site-header .ctabutton.kl-cta-custom::before,
	.site-header .ctabutton.kl-cta-custom::after {
		display: none !important;
	}
	.site-header .ctabutton.kl-cta-custom *,
	.site-header .ctabutton.kl-cta-custom [class*="icon"] {
		color: inherit !important;
		font-size: inherit;
		line-height: inherit !important;
		margin: 0 !important;
		text-shadow: none !important;
	}
	.site-header .ctabutton.kl-cta-custom span {
		font-family: inherit !important;
		font-weight: inherit !important;
	}
	.site-header .ctabutton.kl-cta-custom:hover,
	.site-header .ctabutton.kl-cta-custom:focus-visible {
		background: #2a8a26 !important;
		color: #fff !important;
		box-shadow: none !important;
	}
}
/* Écrans moyens (992–1199 px) : boutons un peu plus compacts pour tout faire tenir */
@media (min-width: 992px) and (max-width: 1199px) {
	#main-menu > ul.main-menu > li.menu-item > a {
		padding: 10px 13px !important;
		font-size: 14px !important;
		letter-spacing: .04em !important;
	}
	.site-header .ctabutton.kl-cta-custom {
		padding: 10px 15px !important;
		font-size: 14px !important;
		letter-spacing: .04em !important;
		margin-left: 10px !important;
	}
}

/* ---- Bouton d'appel sur mobile et tablette (< 992 px) : même vert, pastille compacte ----
   Remonté de 7 px (top: -7px) : son centre tombait ~7 px sous le centre des 3 traits du burger. */
@media (max-width: 991px) {
	.site-header .ctabutton.kl-cta-custom {
		display: inline-flex !important;
		align-items: center;
		gap: 6px;
		position: relative !important;
		top: -7px;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding: 6px 14px !important;
		min-height: 0 !important;
		height: auto !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: #3aaa35 !important;
		color: #fff !important;
		font-family: 'Jost', sans-serif !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
		letter-spacing: .04em !important;
		white-space: nowrap;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	.site-header .ctabutton.kl-cta-custom::before,
	.site-header .ctabutton.kl-cta-custom::after {
		display: none !important;
	}
	.site-header .ctabutton.kl-cta-custom *,
	.site-header .ctabutton.kl-cta-custom [class*="icon"] {
		color: inherit !important;
		font-family: inherit;
		font-size: inherit !important;
		font-weight: inherit !important;
		line-height: inherit !important;
		margin: 0 !important;
		padding: 0 !important;
		text-shadow: none !important;
	}
	.site-header .ctabutton.kl-cta-custom:active {
		background: #2a8a26 !important;
	}
}

/* ---- Barre du haut : texte « FABRICATION EN NORMANDIE » un peu plus grand (12 → 14 px) ---- */
.site-header .kl-header-toptext {
	font-size: 14px !important;
	line-height: 26px !important;
}

/* ---- Barre du haut : drapeau bleu-blanc-rouge juste avant Facebook / Instagram ----
   Élément ajouté par inc/drapeau-header.php avec les mêmes classes que les icônes sociales.
   Taille réduite à 26 px (un peu plus petit que le carré de base) et centré verticalement. */
.site-header .mc-flag-wrap {
	display: flex !important;
	align-items: center;
	align-self: center;
	margin-right: 0 !important;
}
.site-header .mc-flag-wrap + .social-icons {
	margin-left: 10px !important;
}
.site-header .mc-flag-wrap .social-icons-li {
	display: flex;
	align-items: center;
	margin: 0 !important;
}
.site-header .social-icons-item.mc-flag {
	display: block;
	width: 26px !important;
	height: 26px !important;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .12) 100%),
		linear-gradient(90deg, #0055a4 0 33.34%, #ffffff 33.34% 66.66%, #ef4135 66.66% 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
	cursor: default;
	transform-origin: left center;
	transition: transform .35s ease, box-shadow .35s ease;
}
.site-header .social-icons-item.mc-flag::before {
	content: none !important;
}
.site-header .social-icons-item.mc-flag:hover {
	transform: perspective(120px) rotateY(-14deg) skewY(-2deg);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .10),
		0 0 6px rgba(0, 0, 0, .4);
}

/* ---- Mobile (< 768 px) : barre du haut sur UNE seule ligne ----
   « FABRICATION EN NORMANDIE » + drapeau + Facebook + Instagram ne passent plus à la ligne :
   pas de retour à la ligne, marges réduites, texte qui se réduit légèrement sur les petits écrans
   (14 px à 375 px et plus, ~12 px à 320 px). */
@media (max-width: 767px) {
	.site-header .site-header-top-right {
		flex-wrap: nowrap !important;
		justify-content: flex-end;
		min-width: 0;
	}
	.site-header .site-header-top-right > * {
		flex-shrink: 0;
	}
	.site-header .site-header-top-right .kl-header-toptext {
		flex-shrink: 1;
		min-width: 0;
		margin-left: 0 !important;
		margin-right: 8px !important;
		font-size: clamp(11px, 3.8vw, 14px) !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.site-header .site-header-top-right .mc-flag-wrap {
		margin-left: 0 !important;
	}
	.site-header .mc-flag-wrap + .social-icons {
		margin-left: 8px !important;
	}
}
/* Très petits écrans (< 360 px) : icônes un peu plus serrées */
@media (max-width: 359px) {
	.site-header .site-header-top-right .social-icons:not(.mc-flag-wrap) .social-icons-li {
		margin-right: 3px !important;
	}
}

/* ---- Info Box 2 (style 3, ex. « Fabrication » / « Showroom » de l'accueil) : mobile (< 768 px) ----
   Avant : texte 18 px dans une colonne de ~260 px (40 px de marge intérieure) => gros trous à droite.
   Après : marges intérieures réduites (colonne ~295 px), texte 16 px justifié avec césure française
   (Safari iOS et Chrome Android coupent les mots longs, ce qui évite les espaces trop larges),
   titre un peu moins fin, horaires en italique sur leur propre ligne, alignés à gauche. */
@media (max-width: 767px) {
	.infobox2-container.ib2-style3 .ib2-inner {
		padding: 28px 22px 26px 24px !important;
	}
	.infobox2-container.ib2-style3 .infobox2-title {
		font-size: 21px !important;
		line-height: 1.3 !important;
		font-weight: 300 !important;
		margin-bottom: 14px !important;
	}
	.infobox2-container.ib2-style3 .infobox2-text,
	.infobox2-container.ib2-style3 .infobox2-text p {
		font-size: 16px !important;
		line-height: 1.7 !important;
		text-align: justify !important;
		text-align-last: left;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 7 3 3;
	}
	.infobox2-container.ib2-style3 .infobox2-text p {
		margin-bottom: 0 !important;
	}
	.infobox2-container.ib2-style3 .infobox2-text em {
		display: block;
		margin-top: 12px;
		text-align: left;
	}
}