/* Style Main - Repetti Sàrl
*-------------------------------------------------------
/* 1. Mise en forme
/* 2. Elements
/* 3. Animations
/* 4. Section, banners, row et colonnes
/* 5. Blog
/* 6. Projets
/* 7. Divers
/* 8. Compétences
/* 9. Background
/* 11. Patchs
*/

/* 1. Mise en forme
*-----------------------------------------------------*/
@font-face {
    font-family: 'khand';
    src: url('fonts/khand-medium-webfont.woff2') format('woff2'), url('fonts/khand-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'khand-light';
    src: url('fonts/khand-light-webfont.woff2') format('woff2'), url('fonts/khand-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'petrona';
    src: url('fonts/petrona-regular-webfont.woff2') format('woff2'), url('fonts/petrona-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lato';
    src: url('fonts/Lato-Medium.woff2') format('woff2'), url('fonts/Lato-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'metropolis';
    src: url('fonts/Metropolis-Regular.woff2') format('woff2'), url('fonts/Metropolis-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-italic';
    src: url('fonts/Metropolis-RegularItalic.woff2') format('woff2'), url('fonts/Metropolis-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-light';
    src: url('fonts/Metropolis-Light.woff2') format('woff2'), url('fonts/Metropolis-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-light-italic';
    src: url('fonts/Metropolis-LightItalic.woff2') format('woff2'), url('fonts/Metropolis-LightItalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-medium';
    src: url('fonts/Metropolis-SemiBold.woff2') format('woff2'), url('fonts/Metropolis-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-medium-italic';
    src: url('fonts/Metropolis-SemiBoldItalic.woff2') format('woff2'), url('fonts/Metropolis-SemiBoldItalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-bold';
    src: url('fonts/Metropolis-Bold.woff2') format('woff2'), url('fonts/Metropolis-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-bold-italic';
    src: url('fonts/Metropolis-BoldItalic.woff2') format('woff2'), url('fonts/Metropolis-BoldItalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body, p{
	font-family: 'metropolis', sans-serif !important;
    font-weight: 400;
    font-style: normal;
	font-size:18px;
    line-height:110% !Important;
	letter-spacing:0em !Important;
}
html i, body i, p i, html em, body em, p em{
    font-family: 'metropolis-italic', sans-serif !important;
    font-weight: 400;
    font-style: normal;
    line-height:110% !Important;
	letter-spacing:0em !Important;
}
h1, h3{
    font-family: 'metropolis-bold', sans-serif !important;
    font-weight: 400;
    font-style: normal;
    line-height:110% !Important;
	letter-spacing:0em !Important;
}
h1 i, h1 em, h1 em, h3 em{
    font-family: 'metropolis-bold-italic', sans-serif !important;
    font-weight: 400;
    font-style: normal;
    line-height:110% !Important;
	letter-spacing:0em !Important;
}
html b, body b, p b, html strong, body strong, p strong, h2, h4, h5, h6{
    font-family: 'metropolis-medium', sans-serif !important;
    font-weight: 400;
    font-style: normal;
    line-height:110% !Important;
	letter-spacing:0em !Important;
}
html b i, body b i, p b i, html strong em, body strong em, p strong em, h2 i, h4 i, h5 i, h6 i, h2 em, h4 em, h5 em, h6 em{
    font-family: 'metropolis-medium-italic', sans-serif !important;
    font-weight: 400;
    font-style: normal;
    line-height:110% !Important;
	letter-spacing:0em !Important;
}
h1{
	font-size:1.8em;
}
h2{
	font-size:1.4em;
}
h3{
	font-size:1.22em;
}
h4{
	font-size:1.1em;
}
h5{
	font-size:0.88em;
}
h6{
	font-size:0.75em;
}
p{
	font-size:1em;
	color:#343434;
}

@media (max-width: 549px) {
	h1{
		font-size:1.5em;
	}
	h2{
		font-size:1.3em;
	}
}

p b{
	color:#1a1a1a;
	font-weight:400;
}
p.lead{
	font-family: 'metropolis', sans-serif !important;
	font-size:1.1em;
	line-height: 1.2em !important;
}
.uppercase{
	letter-spacing: 0.025em !important;
}
.projet-infos p{
	font-size:0.9em;
}

.alt-font{
	font-family:'petrona' !Important;
}
.thin-font{
    font-family:'metropolis-light' !Important;
}
blockquote{
	font-size:1.1em;
}

.nomarge, .nomarge p,.nomarge h1, .nomarge h2, .nomarge h3, .nomarge h4, .nomarge h5, .nomarge h6{
	margin-bottom:0px !Important;
}

label{
	line-height:30px !Important;
}

label .wpcf7-text, label .wpcf7-textarea{
	line-height:initial !Important;
	font-weight:normal;
}

.header-main .nav > li > a{
	font-family:'khand';
	font-weight:normal;
	font-size:18px;
	letter-spacing:0.5px;
}

.nav-dropdown{
	padding:5px;
}

/* Boutons */
.nav-dropdown .menu-item{
	font-family:'metropolis';
	font-weight:normal;
	font-size: 0.85em;
}

.button{
	font-family: 'metropolis-medium', sans-serif !important;
	letter-spacing: 0 !important;
	font-size: 0.9em;
}

.is-link{
	font-size:18px;
}

.follow-icons .button{
	font-size:13px;
}

/* Footer */
.copyright-footer{
	font-size:12px;
	letter-spacing:0.2px;
}

/* 2. Elements
*-----------------------------------------------------*/
.wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid>li {
    margin-bottom: 0px;
}

.text-box .hover-slide .text{
	padding:5px 10px 2px 10px;
	font-size:85% !Important;
}

.portfolio-box .box-text{
	padding-bottom:0.7em;
}

.portfolio-box .box-text h6{
	font-size:100% !Important;
}

.banner{
	background-color:#f7f7f7;
}

.captcha{
	padding-top:10px;
	padding-bottom:30px;
}

/* Patch UX logo */
.ux-logo .noresize .ux-logo-image {
    height: inherit !important;
}

/* 3. Animations
*-----------------------------------------------------*/
[data-animated="true"], .slider .is-selected [data-animated="true"], .row-slider.slider [data-animated="true"] {
    animation-delay: .01s;
}

[data-animate], .slider [data-animate] {
   transition: filter 0.7s, transform 1.6s, opacity 0.3s ease-in;
}

/* 4. Section, banners, row et colonnes
*-----------------------------------------------------*/
body.box-shadow{
	box-shadow: none !important;
}
.col, .gallery-item, .columns {
    padding-bottom: 0px;
}

.footer-wrapper .row-dashed .col:before, .footer-wrapper .row-dashed .col:after {
	border-left: 1px dashed #655e5035 !Important;
	border-bottom: 1px dashed #655e5035 !Important;
}

.banner{
	background-color:#343434;
}
/* Espacement dans les archives */
body.archive .post-item,
body.blog .post-item,
body.category .post-item,
body.tag .post-item {
  padding-bottom: 30px !important;
}


.posts-spacing-30 .col,
.posts-spacing-30 .post-item {
  padding-bottom: 30px !important;
}

/* AIB Lightbox */
.zone-lb-post{
	padding:0 15px 15px 15px;
}

/* 5. Blog
*-----------------------------------------------------*/
.article-inner .entry-category{
	/*font-size:16px;*/
}
.blog-slider .box-blog-post{
	border: 1px solid #eee;
    border-radius: 7px;
    padding: 15px 15px 0 15px;
	box-shadow: 0 0 15px rgba(0,0,0,0.05);
	background-color: #f9f7f3;
}

.blog-slider .box-blog-post .cat-label{
	margin-bottom:5px;
}

.blog-slider .box-blog-post .from_the_blog_excerpt {
	font-size:0.9em;
}

.blog-slider .flickity-viewport{
	margin-bottom:40px;
}

.cat-label.tag-label.is-xxsmall{
	font-family: 'metropolis-medium', sans-serif !important;
    font-weight: 400 !important;
	font-size:0.7em;
	opacity: 1;
	background-color:#b6c7cc;
	border-color:#b6c7cc;
	border-radius:3px;
	color:#fff;
	text-transform: uppercase;
	padding:4px 5px 1px 5px;
}

.cat-label.tag-label.is-xxsmall:hover {
    background-color: #e4e4e4;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    color: #000;
}

/* 6. Projets
*-----------------------------------------------------*/
.projects-slider .post-item .col-inner{
	border: 1px solid #eee;
    border-radius: 7px;
    padding: 15px 15px 0 15px;
	box-shadow: 0 0 15px rgba(0,0,0,0.05);
	background-color: #f9f7f3;
}
.projects-slider .post-item .box-text{
    padding-bottom: 0;
}
.projects-slider .flickity-viewport{
	margin-bottom:40px;
}

.image-ratio-4-3 {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 7px;
}
.image-ratio-4-3::before {
  content: "";
  display: block;
  padding-top: 75%; /* 4:3 ratio fallback */
}
.image-ratio-4-3 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Chips de compétences */
.projet-competences {
    margin-bottom: 1.5em;
}

.projet-competences-title {
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5em;
    color: #343434;
}

.projet-competences-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.competence-chip {
	font-family: 'metropolis-medium', sans-serif !important;
    display: inline-flex;
    align-items: center;
    padding: 0.45em 0.75em 0.25em 0.75em;
    border-radius: 7px; /* effet "pill" */
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #f7f7f7;
    font-size: 0.9em;
    text-decoration: none;
    color: #343434;
    transition: background-color 0.2s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.competence-chip:hover {
    background-color: #e4e4e4;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    color: #000;
}

.competence-chip:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.projects-slider .post-item .projet-competences{
	margin-top:10px;
}
.projects-slider .post-item .projet-competences-chips{
	font-size:0.7em;
}
.projects-slider .post-item .projet-competences-chips .competence-chip{
	background-color:#b6c7cc;
	border-color:#b6c7cc;
	border-radius:3px;
	color:#fff;
	text-transform: uppercase;
	padding:4px 5px 1px 5px;
}

/* 7. Projets / Galerie
*-----------------------------------------------------*/
.projet-galerie-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:12px;
}

@media (max-width: 849px){
	.projet-galerie-grid{ grid-template-columns:repeat(2,1fr); }
}

.projet-galerie-thumb{
	border:0;
	padding:0;
	background:none;
	cursor:pointer;
	border-radius:14px;
	overflow:hidden;
}

.projet-galerie-thumb img{
	width:100%;
	height:auto;
	display:block;
	aspect-ratio: 4 / 3;
	object-fit:cover;
}

/* Lightbox */
.projet-galerie-lb{
	position:fixed;
	inset:0;
	z-index:99999;
	background:rgba(0,0,0,.88);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
}
.projet-galerie-lb[hidden]{ display:none; }

.pg-stage{
	max-width:min(1100px, 100%);
	max-height:90vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
}
.pg-img{
	max-width:100%;
	max-height:78vh;
	border-radius:18px;
}
.pg-cap{
	max-width:900px;
	color:#fff;
	opacity:.9;
	font-size:14px;
	line-height:1.4;
	text-align:center;
	padding:0 10px;
}

.pg-close,.pg-prev,.pg-next{
	position:absolute;
	top:18px;
	border:0;
	background:rgba(255,255,255,.12);
	color:#fff;
	width:44px;
	height:44px;
	border-radius:999px;
	cursor:pointer;
	font-size:28px;
	line-height:44px;
}
.pg-close{ right:18px; font-size:30px; }
.pg-prev{ left:18px; top:50%; transform:translateY(-50%); }
.pg-next{ right:18px; top:50%; transform:translateY(-50%); }
.pg-prev,.pg-next{ font-size:40px; line-height:44px; }

/* 8. Compétences
*-----------------------------------------------------*/
.projet-competence-col, .competence-item{
	border: 1px solid #eee;
    border-radius: 7px;
    padding: 15px 15px 15px 15px;
	box-shadow: 0 0 15px rgba(0,0,0,0.05);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
  	transform-origin: center center;
	background-color: #f9f7f3;
}  
.projet-competence-col:hover, .competence-item:hover{
	transform: scale(1.02);
}   

.projet-competence-col .box-image{
	margin-bottom:15px;
}

.competence-icon svg, .competence-icon svg .cls-1 {
  width: 80px;
  height: 80px;
  fill: #c4591c;
  stroke:#c4591c; 
  display: block;
  stroke-width: 0.85 !important;
}

/* 9. Background
*-----------------------------------------------------*/



/* 11. Patchs
*-----------------------------------------------------*/
#menu-menu-de-bas-de-page{
    display:none;
}


.tooltipster-base{
	display:none !Important;
}