/*
INFORMATIONS
Theme Name: 	Thème SMARTSON pour BTP CFA Hauts-de-France
Author: 		SMARTSON COMMUNICATION
Author URI: 	https://smartson.fr/
Description:    Thème Wordpress développé par l'agence SMARTSON COMMUNICATION, mise en production en juin 2025, pour connexion du site BTP CFA Hauts-de-France avec le CRM HUB3E via API.
Version:		1.0
Requires at least: 6.8.1
Tested up to:   6.8.1
Licence:		GNU General Public Licence 2.0+
*/




@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope/Manrope-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope/Manrope-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope/Manrope-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope/Manrope-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope/Manrope-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope/Manrope-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope/Manrope-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* @font-face {
    font-family: 'FuturaPTCondBook';
    src: url('assets/fonts/futura_pt/FuturaPTCondBook.ttf') format('woff2');
} */

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/Roboto-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('assets/fonts/roboto-condensed/RobotoCondensed-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('assets/fonts/roboto-condensed/RobotoCondensed-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('assets/fonts/roboto-condensed/RobotoCondensed-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('assets/fonts/roboto-condensed/RobotoCondensed-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans Condensed';
    src: url('assets/fonts/fira-sans-condensed/FiraSansCondensed-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans Condensed';
    src: url('assets/fonts/fira-sans-condensed/FiraSansCondensed-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans Condensed';
    src: url('assets/fonts/fira-sans-condensed/FiraSansCondensed-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans Condensed';
    src: url('assets/fonts/fira-sans-condensed/FiraSansCondensed-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans Condensed';
    src: url('assets/fonts/fira-sans-condensed/FiraSansCondensed-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans Condensed';
    src: url('assets/fonts/fira-sans-condensed/FiraSansCondensed-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* @font-face {
    font-family: 'Gordita';
    src: url('assets/fonts/gordita/Gordita-Medium.ttf') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
} */

 @font-face {
    font-family: 'Font Awesome';
    src: url('assets/fonts/font-awesome/fontawesome-webfont.ttf') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Font Awesome';
    src: url('assets/fonts/font-awesome/fontawesome-5-pro-light.ttf') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} 

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope/Manrope-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

* { margin: 0; padding: 0;}
*,::after,::before {box-sizing: border-box}
html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent}
p { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;}
b,strong {font-weight: 800}
p b, p strong { font-weight: bolder;}
dl,ol,ul {margin-top: 0;margin-bottom: 0}
ol ol,ol ul,ul ol,ul ul {margin-bottom: 0}


html { /*overflow: hidden; */background-color: #fff}

html body { position: relative; /*min-height: 100vh; height: 100vh;*/}

html body.body_home {}
html body.body_content_page {}


/* SCROLL BAR */

body::-webkit-scrollbarhtml,
body::-webkit-scrollbar {
    width: 4px;
    background-color: #d1d2d4;
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .25);
    border-radius: 24px;
}

body {
    scrollbar-width: thin;
    overflow-x: hidden; 
}

button{
    border: none;
}


/* --- 404 -------------------------------------------------------------*/
html body.error404{ overflow: hidden;}
html body.error404 section.not_found { position: fixed; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; background-color: white; margin: 0;}
html body.error404 section.not_found div.background_gauche { position: absolute; overflow: hidden; bottom: 0; left: 0; background-color: white; margin: 0 !important; padding: 0 !important; display: flex; justify-content: center; align-items: center; background-position: left; background-repeat: no-repeat; background-size: contain; min-height: 200px; width: auto; height: 75%; aspect-ratio: 16 / 9; z-index: -1; max-height: 1080px; }
html body.error404 section.not_found div.background_droite { position: absolute; overflow: hidden; top: 0; right: 0; background-color: white; margin: 0 !important; padding: 0 !important; display: flex; justify-content: center; align-items: center; background-position: right; background-repeat: no-repeat; background-size: contain; min-height: 200px; width: auto; height: 75%; aspect-ratio: 16 / 9; z-index: -1; max-height: 1080px; }
html body.error404 section.not_found div.container { display: block; }
html body.error404 section.not_found div.container { height: 100%; }
html body.error404 section.not_found div.container div.container_image { margin: 0 auto; width: max-content; max-width: 80%; display: flex; min-width: 50%; justify-content: center; }
html body.error404 section.not_found div.container div.container_image img { max-height: 300px; height: 100%; }
html body.error404 section.not_found div.container div.content_page { min-width: 50%; display: flex; justify-content: center; flex-direction: column; align-items: center; text-align: center; }
html body.error404 section.not_found div.container div.content_page div.container_text div.text span.bold { font-family: "CeraCompactPro"; font-size: 80px; color: #3c3c3b; display: block; margin-bottom: 30px; font-weight: 800; }
html body.error404 section.not_found div.container div.content_page div.container_text div.text p { font-family: "CeraCompactPro"; font-size: 16px; color: #3c3c3b; font-weight: 500; line-height: 24px; margin: 0; }
html body.error404 section.not_found div.container div.content_page div.container_text div.text p.oups { font-weight: 600; font-size: 30px; margin-bottom: 6px; }
html body.error404 section.not_found div.container div.content_page div.container_text div.text p.texte { margin-bottom: 50px; font-size: 20px; }
html body.error404 section.not_found div.container div.content_page div.container_links_redirection div.container_link_home_page {}
html body.error404 section.not_found div.container div.content_page div.container_links_redirection div.container_link_home_page a { text-decoration: none; color: #3c3c3b; }
html body.error404 section.not_found div.container div.content_page div.container_links_redirection div.container_link_home_page a:hover { color: #3c3c3b; }
html body.error404 section.not_found div.container div.content_page div.container_links_redirection div.container_link_home_page a div.btn_redirect { border: solid 2px #3c3c3b; border-radius: 5px; padding: 10px 20px; display: inline-block; }
html body.error404 section.not_found div.container div.content_page div.container_links_redirection div.container_link_home_page a div.btn_redirect span {     font-family: "CeraPro"; font-weight: 800; letter-spacing: 3px; font-size: 14px; text-transform: uppercase; }
html body.error404 section.not_found div.container div.content_page div.container_smartson { position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); }
html body.error404 section.not_found div.container div.content_page div.container_smartson a { text-decoration: none; color: #3c3c3b; text-transform: uppercase; font-weight: 800; }
html body.error404 section.not_found div.container div.content_page div.container_smartson a svg { width: 100px; }

@media (min-width: 0px) {
    /* BACK TO TOP AND PROGRESSE */
    div.progress-wrap {position: fixed;right: 20px;bottom: 20px;height: 46px;width: 46px;display: none;border-radius: 50px;box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);z-index: 4;opacity: 0;transform: translateY(15px);transition: transform .2s linear, opacity .2s linear;visibility: visible;}
    div.progress-wrap.active-progress { opacity: 1; transform: translateY(0); cursor: pointer; display: block; transition: transform .2s linear, opacity .2s linear; display: block; background-color: rgba(255, 255, 255, .75); z-index: 10;}
    div.progress-wrap::after { position: absolute; content: ''; background-image: url(assets/images/arrow.svg); background-repeat: no-repeat; background-size: contain; background-position: center; left: 50%; top: 50%; height: 14px; width: 14px; transform: translateX(-50%) translateY(-50%) rotate(270deg); cursor: pointer; display: block; z-index: 1; transition: opacity .2s linear; transition: transform .25s ease;}
    div.progress-wrap.top::after { transform: translateX(-50%) translateY(-50%) rotate(90deg); transition: transform .25s ease;}
    div.progress-wrap.active-progress:hover {opacity: 0.85;}
    div.progress-wrap svg path {fill: none;}
    div.progress-wrap svg.progress-circle path { stroke: #ecedf3; stroke-width: 4; box-sizing: border-box; transition: stroke .2s linear;}
    div.progress-wrap {box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);}
    div.progress-wrap::after {color: #3d3d3c;}
    div.progress-wrap svg.progress-circle path {stroke: #3d3d3c;}

}

@media (min-width: 768px) {
    html body header div.container_menu_principal {max-width: 480px;}
}

.lazy{
    background-image: none!important;
}