/*

Theme Name: Stamhina v2
Author: Stéphane Bourgeaud-Lignot
Description: Thème du site stamhina.fr
Version: 1.0

*/


/* ----- Imports ----- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;400;700&family=Inter:ital,wght@0,100..900;1,100..900&display=swap');

/* ----- CSS RESET ----- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* ----- Structure ----- */

footer {width:100%;}
aside.prefooter {width:100%; background-color: #eee; padding:50px 0; box-sizing: border-box;}
aside.breadcrumbs {width:100%; background-color: #0C4A7B; padding:10px 0; box-sizing: border-box;}

.wcontainer {width:100%; padding:50px 0px 50px 0px; box-sizing: border-box;}
.ncontainer {max-width:1100px; margin:auto; position: relative;}
.ncontainer .ncontcenter h2, .ncontainer .ncontcenter p {text-align: center;}
.flex {display: flex; justify-content: space-between;}
.content550{width:550px; }
.content900{max-width:980px;}
.sidebar{width:250px; margin-left:100px; background-color: #0FF;}

.wcontainer.h1 {width:100%; height: 300px; padding:50px 0px 50px 0px; box-sizing: border-box; position:relative;}
.wcontainer.h1.homepage {width:100%; height: 600px; padding:50px 0px 50px 0px; box-sizing: border-box; position:relative;}

.wcontainer.h1 > .ncontainer {height: 250px; box-sizing: border-box; background-color: rgba(255,255,255,0.5); position:relative;}


.splide__slide {width:100%; height: 700px; background-color: #FF0; padding: 0; margin: 0;}
.splide__slide img {width:100%; height:100%; object-fit: cover; position: absolute; top: 0; left: 0;}
.splide__slide .ncontainer {background-color: #F90; font-size: 96px; text-transform: uppercase; line-height: 96px; font-weight: 800; color:#FFF; vertical-align: bottom;}




.headerimg {width:100%; height:100%; position: absolute; top:0; left: 0; object-fit: cover;}
.headershadow {width:100%; height:50%; position: absolute; bottom:0; left: 0; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);}

.wcontainer.wcborder {border-top:1px solid #ddd;}
.wcontainer.wcnomargin {padding: 0;}


.wcontainer.contpart img {max-width: 10%;  height: auto; display:inline-block; margin-right: 10px;}


/* Smallheader */
.wcontainer.h1.smallheader {height: 400px;}
.wcontainer.h1 > .ncontainer {height:300px; box-sizing: border-box; background-color:rgba(0,0,0,0); }




.flex3-container, .flex5-container {display:flex; flex-wrap:wrap; justify-content:space-between; width: 100%;  row-gap: 50px;}
.flex3-card {width:250px;}
.flex5-card {width:13%; margin-right: 40px;}

.flex5-card:nth-of-style{5} {margin-right: 0px;}
.flex3-card img {width: 200px; height: 50px; object-fit:contain; object-position: 0% 50%; margin-bottom: 20px;}
.flex3-card h3, .flex5-card h3, .flex0-card h3 {margin:10px 0 20px; text-align: left; font-size: 18px; display:none;}
.flex3-card ul li {display:inline-block; padding: 5px 10px; margin: 0 5px 5px 0;  font-size: 12px; text-transform: uppercase; border:1px solid #999; color:#999; border-radius: 20px;}
.flex5-card img {width: 100%; height: 50px; object-fit:contain; object-position: 0% 50%;}


.flex0-card {max-width:120px; max-height: 50px; object-fit:contain;margin-bottom: 20px;}
.flex0-card + h3 {display:none;}


.imgfloatleft {float:left; margin-right: 50px;}

/* ----- Fonts ----- */
html, p { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; color:#000; font-size:18px; margin: 0 0 20px; line-height: 1.25; text-align: justify;}
h1 {font-family: "Inter", sans-serif; font-weight: 700; color: #000; font-size: 48px; text-transform: uppercase; text-align: left;}
h1 span {display:block; font-size: 18px; font-weight: 100;}
h2 { text-align: left; font-family: "Inter", sans-serif; font-weight: 700; color: #000; font-size: 36px; line-height: 36px; background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}


h2 span {display: inline; background-image: linear-gradient(#febfd3,#febfd3);
  background-size: 100% 10px;
  background-repeat: no-repeat;
  background-position: 0% 100%;
   transition: background-size .7s, background-position .5s, background-image 2s ease-in-out;}
h2 span:hover {background-size: 100% 100%; background-image: linear-gradient(#fe9fbd,#fe9fbd);
  transition: background-size .7s, background-position .5s, background-image 2s ease-in-out;}
/*h2:after { background: none repeat scroll 0 0 #4009c6; bottom: -10px; content: ""; display: block; height: 3px; position: relative; width: 100px;}*/
h3 {font-family: "Inter", serif; font-optical-sizing: auto; font-weight: 700; color: #000; font-size: 21px;}


strong {text-transform: uppercase; color:#0C4A7B; font-size:12px; font-weight: 800;}

.txtcenter h2, .txtcenter h3, .txtcenter p {text-align: center;}  

span.hid {display: none;}
span.role {text-transform: uppercase; color:#7d9cbc; font-size:12px; font-weight: 800;}
aside.breadcrumbs {text-transform: uppercase; color:#FFF; font-size:12px; font-weight: 800;}

/*a {color:inherit; text-decoration: none; position:relative; display: inline;}*/


a {color: inherit; cursor: pointer; text-decoration: none; display: inline; transition: all 0.35s linear;}
a:hover { text-decoration:underline; }

div.topics {margin-bottom: 30px; color:#DDD; text-transform: uppercase; font-size: 12px; font-weight: bold; text-align: left;}
div.topics a {color: inherit; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.35s linear; background-image: none; background-color: #FFF; padding: 5px 15px; border: 1px solid #ddd; border-radius: 30px; margin:0 10px 10px 0;}
div.topics a:hover {color:#4009c6; border: 1px solid #4009c6; }

a.breadcrumbs {color: #D12D40; text-transform: uppercase; font-size: 12px; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.35s linear; background-image: none; background-color: #FFF; padding: 10px 0px; margin:0;}
a.breadcrumbs:first-of-type {border: none; padding-left:0;}
a.breadcrumbs:after {content:" > ";}
a.breadcrumbs:last-of-type:after {content:"";}
a.breadcrumbs:first-of-type:before {content:"Vous êtes ici > ";}


/* ----- Footer ----- */
.wcbg000 {background-color: #000; color:#FFF;}
.wcbgDDD {background-color: #DDD;}
.wcbgIMG {background-image: url('https://www.stamhina.fr/wp-content/uploads/2025/08/stamhina-data-bg1-1800.png'); background-position: 50% 50%;}


/* ----- Lists ----- */

ul.benefits {list-style-position: inside; list-style-type: disc; font-weight: bold; color:#390;}
ul.benefits li {margin-bottom: 10px;}

ul.generallist {list-style-position: outside; font-weight: bold; list-style-type: disc; border-left: 15px #eee solid; margin-left: 0px; border-radius:15px;}
ol.generallist {list-style-position: outside; font-weight: bold; list-style-type: decimal; border-left: 15px #eee solid; margin-left: 0px; border-radius:15px;}
.generallist li {/*margin: 0px 0px 30px 8px;*/ margin-left:8px; padding: 15px; box-sizing: border-box; font-weight: 400; transition: all 0.5s; border-radius: 10px;}
.generallist li:hover {background-color: #eee;}

/* ----- Table -----*/
table {width:100%;}
table,th,td {border: 5px solid white; text-align: center; vertical-align: middle;}
th {height: 100px; background-color: #eee;}
td {height: 60px;}



span.small {font-size: 12px; text-transform: uppercase;}
span.strikethrough {text-decoration: line-through;}
span.bold {font-weight: bold;}
/*tr.bgshadowtr td {background-color: #DDD;}
tr.bgshadowtr:hover td {background-color: #FEE;}*/
.bgshadowDDD {background-color: #DDD;}
.bgshadowDDD:hover {background-color: #EFE;}

.bgshadow0BD {background-color:#03d2ff; color:#FFF;}
.bgshadow0BD:hover {background-color:#00b7de; color:#FFF;}


.bgshadowF05 {background-color:#fd3f7b; color:#FFF;}
.bgshadowF05:hover {background-color:#fb0251; color:#FFF;}


/* ----- Nav -----*/



nav { position: fixed; top:30px; left:0; width:100%; height:60px; transition: all 0.5s; box-sizing: border-box;}
nav .ncontainer { transition: all 0.5s; position:relative; border-radius: 30px; max-width: 1100px; min-height: 60px; padding:0 30px; box-sizing: border-box;  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.3);}
nav .logo {font-family: "Inter", sans-serif; color:#FFF; background-color:#F90; position:relative; top:15px;}
nav .logo img {position:absolute; top:0; left:0; transition: all 0.5s; opacity: 1;}

nav ul {position:absolute; top:10px; right:10px; color:#FFF;font-size:18px; /*diplay:flex; flex-direction: row; justify-content:flex-end;*/ }
nav ul li {margin: 0px 0px; padding: 10px 20px; line-height: 20px; height:40px; box-sizing: border-box; display: inline-block;}
nav a, nav a:hover {text-decoration: none; background-image: none;}



nav ul li.button { background-color:#FFF; border-radius:30px; color:#000;} 



nav.scrolled .logo img#logoWhite, nav .ncontainer:hover img#logoWhite {opacity:0;}
nav.scrolled  .ncontainer, nav .ncontainer:hover { background: rgba(255, 255, 255, 1); border: 1px solid rgba(0, 0, 0, 0.3); }
nav.scrolled .logo, nav .ncontainer:hover .logo { color:#D12D40;}
nav.scrolled ul, nav .ncontainer:hover ul {color:#000;}
nav.scrolled li.button {border:1px solid #CCC inset;}


nav .ncontainer .content {opacity: 0; transition: all 0.5s; top:60px; margin: 0 0px 60px; border-radius: 0 0 30px 30px; display:block;  width:100%; min-height: 0; border-top: 1px #CCC solid; position: relative;}
nav .ncontainer:hover {}
nav .ncontainer:hover .content { opacity:1; min-height: 300px;}



.onlymob {display:none;}




/* ----- Mobile -----*/
@media (max-width: 1100px) { 


	.onlydesk {display:none;}
	.onlymob {display:inherit;}

	.wcontainer, .wcontainer.h1 {padding:50px 20px 50px 20px;}
	nav {padding:0 20px;}

	.ncontainer { box-sizing: border-box; margin: 0 0px;}
	.flex {display:block;}
	.content550{width:100%; }
	.sidebar{width:100%; margin-left:0;}
	html, p {text-align: left;}

	
	aside.prefooter {padding:50px 20px;}
	aside.breadcrumbs {padding:10px 20px;}
	

	.tuilecontainer {margin:0 -20px;}
	.tuile {width:300px;}
	.tuilecontainer div:first-of-type, .tuilecontainer div:first-of-type {margin-left:20px;}


}