:root {
    /*--background-color:#ededed;*/

    --okofen-green: #56b14c;
    --dark-grey: #c1c1c1;
    --light-grey: #f5f5f5;
    --dark-green: #0a4a4a;

    /*--okofen-legacy-green-less-opac: #38c74a57;*/
    /*--okofen-legacy-green-hover: #0d9f21;*/
    /*--okofen-green: #0a4a4a;*/
    --easypell-blue: #008FC4;
    --easypell-light-blue: #9cddff;
    --dark-easypell-blue: #1c404e;
    /*--table-header-color: #0a4a4a;*/
    /*--light-green: #aeff76;*/
    /*--light-green-less-opac: rgba(174, 255, 118, 0.4);*/
    /*--dark-green-less-opac: #0a4a4a99;*/
    /*--red-on-dark-green: #ff6f6f;*/
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../../corebundle/fonts/PlusJakartaSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans ExtraBold';
    src: url('../../corebundle/fonts/PlusJakartaSans-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
}

body.local{
    background-color: #dff0d8;

}

body.preprod{
    background-color: #fdd49a;
}

body {
    height: 100%;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--dark-green);
    background-color: #ededed;
    font-size:16px;
}

body.easypell{
    color: #000;
}


html{
    font-size: 100% !important;
}

h1{
    font-family: 'Plus Jakarta Sans ExtraBold', sans-serif;
}

.bolder{
    font-family: "Plus Jakarta Sans Extrabold", sans-serif;
}


.navbar {
    margin-bottom: 0;
}

.navbar .btn-menu {
    display: inline-flex;
    color: #0a4a4a;
    font-size: 1.3rem;
    padding: 15px;
}

.navbar .btn-menu i{
    padding-top: 4px;
}


.navbar-header .navbar-brand {
    color: var(--dark-green);
    padding-left: 0;
}

.nav-bar-container{
    display: flex;
}

.navbar-logo {
    float: right;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

.easypell .navbar-logo{
    width: 200px;
    padding: 5px 15px;
}

@media (max-width: 576px) {
    .easypell .navbar-logo {
        margin-top: 10px;
        width: 150px;
    }
}

a {
    color: var(--okofen-green);
}

.container {
    width: 100% !important;
    max-width: none;
}

#titleBloc{
    position: relative;
    width: 100%;
    overflow: hidden;
    max-height: 600px;
}

#titleBloc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

#titleBloc #titleText {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);*/
    margin: 0;
    width: 85%;
    /*height: 10vh;*/
}

#titleBloc #titleText h1{
    color: white;
    font-size: clamp(1.5rem, 10vw, 5rem);
}

#titleBloc #titleText h2{
    color: white;
    font-family: "Plus Jakarta Sans", sans-serif;
    margin-top: 15px;
    font-size: clamp(1.5rem, 6vw, 5rem);
}

#presentationText{
    font-size: 20px;
}

#presentationText #slogan{
    /*font-size: 20px;*/
    /*font-size: clamp(1.5rem, 1vw, 10rem);*/
}

.section{
    margin-bottom: 20px;
}

.section{
    font-size: 20px;
}

.section .title{
    font-size: 28px;
    font-family: "Plus Jakarta Sans ExtraBold", sans-serif;
    margin-bottom: 10px;
}

.responsePanel{
    margin-top: 100px;
    margin-bottom: 50px;
    background-color: #fff;
    padding: 50px;
    border-radius: 40px;
}

.responsePanel .mainResponse{
    line-height: 1.5em;
    font-size: 2rem;
    font-family: "Plus Jakarta Sans ExtraBold", sans-serif;
}

.highlighted-text{
    color: var(--okofen-green);
}

#easypelTitleBackground{
    background-color: #028ec3;
    background-image: linear-gradient(to right, #04678E 20%, #028EC3 100%);
    height: 65vw;
}

.easypell .highlighted-text{
    color: var(--easypell-blue);
}


div.form{
    margin-top: 5px;
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
}

.form-control {
    border-radius: 20px;
}

.text-12{
    font-size: 12px;
}

.btn-success{
    background: #fff;
    color: var(--dark-green);
    border: 1px solid var(--dark-green);
    border-radius: 40px;
}

.btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: var(--okofen-green);
    border-color: var(--okofen-green);
}

.easypell .btn-success.active, .easypell .btn-success.focus, .easypell .btn-success:active,
.easypell .btn-success:focus, .easypell  .btn-success:hover, .easypell  .open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: var(--easypell-blue);
    border-color: var(--easypell-blue);
}

.big-btn{
    padding-right: 40px;
    padding-left: 40px;
    font-size: 30px;
    font-family: "Plus Jakarta Sans ExtraBold", sans-serif;
}

footer ul {
    margin: 0 0 0 0;
    padding: 0;
    list-style: none;
}

.easypell footer{
    color: #fff;
    background-color: #028ec3;
    background-image: linear-gradient(to right, #04678E 20%, #028EC3 100%);
    padding-top: 3rem;
    padding-bottom: 4rem;
    bottom: 0;
    /*position: absolute;*/
    /*width: 100%;*/
}

footer ul li::before {
    content: "";
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 12H19' stroke='%230a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3cpath d='M12 5L19 12L12 19' stroke='%230a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");
    background-position: center left;

    background-repeat: no-repeat;
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: .55rem;
}

footer ul li {
    margin: 0;
    padding: 0 0 0 2rem;
    list-style: none;
    position: relative;
}

.easypell footer ul li {
    padding: 0;
}

.nav-link {
    display: block;
    /*padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);*/
    /*font-size: var(--bs-nav-link-font-size);*/
    /*font-weight: var(--bs-nav-link-font-weight);*/
    /*color: var(--bs-nav-link-color);*/
    background: none;
    border: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

footer ul li .nav-link {
    display: inline-block;
    margin: 0;
    padding: .5rem 0;
    font-weight: 600;
    letter-spacing: .02rem;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
    color: var(--dark-green);
}

footer ul li .nav-link:hover {
    color: var(--okofen-green);
}

.easypell footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.easypell footer ul li .nav-link {
    margin: 0;
    padding: 0;
    font-size: .9rem;
    display: inline-block;
    font-weight: 300;
    letter-spacing: .02rem;
    text-decoration: none;
}

.easypell footer a, .easypell footer .nav-link {
    color: #fff;
    font-weight: normal;
}

.easypell footer ul li::before {
    content: "";
    background-image: none;
}

footer .sm-icon.youtube {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M22.5401 6.42C22.4213 5.94541 22.1794 5.51057 21.8387 5.15941C21.4981 4.80824 21.0708 4.55318 20.6001 4.42C18.8801 4 12.0001 4 12.0001 4C12.0001 4 5.12008 4 3.40008 4.46C2.92933 4.59318 2.50206 4.84824 2.16143 5.19941C1.8208 5.55057 1.57887 5.98541 1.46008 6.46C1.1453 8.20556 0.991319 9.97631 1.00008 11.75C0.988863 13.537 1.14285 15.3213 1.46008 17.08C1.59104 17.5398 1.83839 17.9581 2.17823 18.2945C2.51806 18.6308 2.9389 18.8738 3.40008 19C5.12008 19.46 12.0001 19.46 12.0001 19.46C12.0001 19.46 18.8801 19.46 20.6001 19C21.0708 18.8668 21.4981 18.6118 21.8387 18.2606C22.1794 17.9094 22.4213 17.4746 22.5401 17C22.8524 15.2676 23.0064 13.5103 23.0001 11.75C23.0113 9.96295 22.8573 8.1787 22.5401 6.42V6.42Z' stroke='%230a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3cpath d='M9.75 15.02L15.5 11.75L9.75 8.47998V15.02Z' stroke='%230a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");
}

footer .sm-icon.facebook {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 2H15C13.6739 2 12.4021 2.52678 11.4645 3.46447C10.5268 4.40215 10 5.67392 10 7V10H7V14H10V22H14V14H17L18 10H14V7C14 6.73478 14.1054 6.48043 14.2929 6.29289C14.4804 6.10536 14.7348 6 15 6H18V2Z' stroke='%230a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e ");
}

footer .sm-icon.linkedin {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8V8Z' stroke='%230a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3cpath d='M6 9H2V21H6V9Z' stroke='%230a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3cpath d='M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z' stroke='%230a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");
}

footer .sm-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 20px 20px 0 0;
    background-position: center center;
    background-repeat: no-repeat;
}

hr{
    color: var(--dark-green);
    border-color: var(--dark-green);
}

/* Barre de navigation */
.navbar-custom {
    background-color: #fff;
    border: none;
    margin-bottom: 0;
}

.navbar-custom .navbar-brand {
    color: var(--dark-green);
    float: none;
    /*font-weight: bold;*/
}

.navbar-header .menu-list {
    float: left;
    display: flex;
    justify-content: center;
    width: 80%;
    list-style: none;
    padding: 10px;
    margin: 0;
}

.menu-list li:hover, .menu-list a:hover {
    color: var(--okofen-green);
}

.navbar-header .menu-list li {
    list-style: none;
    padding: 0 14px;
    margin: 0;
}

.navbar-header .menu-list li a{
    font-size: 14px;
}

.navbar-header {
    width: 100%;
}

.menu-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 15px;
}


/* Menu offcanvas */
.offcanvas-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    /*max-width: 50%;*/
    height: 100%;
    color: #0a4a4a;
    /*background-color: #e8e8e8;*/
    background: hsla(0,0%,100%,.8);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    overflow-y: auto;
}

.offcanvas-menu.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

nav div a:hover {
    color: #39c749;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.offcanvas-header {
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offcanvas-header h3 {
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-weight: 300;
}

.close-menu {
    background: none;
    border: none;
    color: var(--dark-green);
    font-size: 36px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
}

.offcanvas-body {
    padding: 60px 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-list li {
    margin-bottom: 10px;
}

.menu-list a {
    color: var(--dark-green);
    font-size: 32px;
    font-weight: 300;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
}

.easypell .menu-list a {
    color: rgba(0,0,0,.5);
}

.easypell .menu-list a:hover {
    color: rgba(0,0,0,.5);
}

/* Page de contenu */
.content-section {
    padding: 60px 20px;
    min-height: 100vh;
}

.content-section h1 {
    color: #2c3e50;
    margin-bottom: 30px;
}

@media (max-width: 400px) {
    .responsePanel .mainResponse {
        font-size: 1.5rem;
    }

    .big-btn {
        padding-right: 20px;
        padding-left: 20px;
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .menu-list a {
        font-size: 24px;
    }

    #presentationText{
        font-size: 16px;
    }

    .offcanvas-body {
        padding: 30px 20px;
    }

    #titleBloc {
        height: auto; /* Retire la hauteur fixe en mobile */
    }

    #titleBloc img {
        height: auto;
        object-fit: initial; /* Désactive le crop en mobile */
    }
}