:root {
    --black:#222;
    --rouge:#d81636;
    --grey:#F6F5F3;
    --greyDeux:#B8B4AD;
    --midgrey:#A7A7A7;
    --darkgrey:#494949;
    --bordeaux:#4B2134;
    --jaune-moutarde:#E4AC1B;
    --bleu-clair:#77BBF3;
    --vert-fonce:#547B44;
    --jaune:#FFD851;
    --orange:#BD6651;
    --bleu:#54A0DF;
    --vert-clair:#BADAAC;
    --hheaderDesktop:98px;
    --pp1:2.75rem;
    --margeDesktop:2.75rem;
    --margeMobile:1rem;
    --hero-cream: #f6f5f3;
  --hero-deep-red: #9e0c27;
}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-Black.woff2') format('woff2');font-weight: 900;font-style: normal;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-BlackItalic.woff2') format('woff2');font-weight: 900;font-style: italic;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-Bold.woff2') format('woff2');font-weight: 700;font-style: normal;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-BoldItalic.woff2') format('woff2');font-weight: 700;font-style: italic;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-ExtraBold.woff2') format('woff2');font-weight: 800;font-style: normal;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-ExtraBoldItalic.woff2') format('woff2');font-weight: 800;font-style: italic;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-Italic.woff2') format('woff2');font-weight: 400;font-style: italic;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-Light.woff2') format('woff2');font-weight: 300;font-style: normal;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-LightItalic.woff2') format('woff2');font-weight: 300;font-style: italic;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-Medium.woff2') format('woff2');font-weight: 500;font-style: normal;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-MediumItalic.woff2') format('woff2');font-weight: 500;font-style: italic;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-Regular.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-SemiBold.woff2') format('woff2');font-weight: 600;font-style: normal;font-display: swap;}
@font-face {font-family: 'Figtree';src: url('/font/Figtree-SemiBoldItalic.woff2') format('woff2');font-weight: 600;font-style: italic;font-display: swap;}


/*--BASE--*/
* {outline: 0;font-family: 'Figtree', sans-serif;}
a{text-decoration: none !important;}
a:hover {text-decoration: none !important;}
body {font-family: 'Figtree', sans-serif;overflow-x: hidden;}
button{box-shadow:unset !important;}
.form-check-input{border-color: #CCC;width: 1.75rem;}
.form-check-input:focus{border-color:unset;box-shadow: unset !important;}
.form-check-input:checked {background-color: var(--rouge);border-color: unset;}
.btn-contact{background-color:var(--rouge);color:white;border:none;border-radius:6px;padding:18px 50px;}
.btn-contact span{display:flex;font-size:12px;font-weight:700;text-transform: uppercase;height:12px;position: relative;justify-content: center;align-items: center;}
.btn-contact span::before{position:absolute;top:-8px;left:-23px;content:"<";font-size: 18px;transition:left 0.3s ease;}
.btn-contact span::after{position:absolute;top:-8px;right:-30px;content:"/ >";font-size: 18px;transition:right 0.3s ease;}
.btn-contact.btn-white{color:var(--rouge);background-color:white;}
.btn-contact:hover{background-color:var(--rouge);color:white;}
.btn-contact.btn-white:hover{color:var(--rouge);background-color:white;}
.btn-contact:hover span::before{transition:left 0.3s ease;left:-18px;}
.btn-contact:hover span::after{transition:right 0.3s ease;right:-25px;}
/*--Header--*/
header{background:var(--rouge);}
.navbar {padding: 20px var(--margeDesktop);}
.navbar-nav{gap:3rem;}
.navbar-light .navbar-nav .nav-link {display:flex;gap:8px;color:var(--grey);font-weight: 500;text-transform: uppercase;position: relative;}
.navbar-light .navbar-nav .nav-link::before {content:"/"}
header .btn-contact{right:var(--margeDesktop);border: 2px solid var(--rouge);position:fixed;}
header .btn-contact:hover{border: 2px solid var(--rouge);}
/*--footer--*/
footer {color: white;padding: 0 var(--margeDesktop);border-top:1px solid rgba(167,167,167,0.2);}
footer .c_mainContent{border-right:1px solid rgba(167,167,167,0.2);}
footer p, footer p a{color:#222222;font-size:.9rem;font-weight:500;}
footer p a{text-decoration:none;}
footer .text-1 {min-height: 43px;}
footer .titre {font-size: 0.75rem;color: #A7A7A7;position:relative;display:flex;gap:8px;}
footer .titre::before {content:"/"}
footer .link{color:#222222;font-size:1rem;text-decoration:none;}
footer p.bottom, footer p.bottom a{color:#A7A7A7;}

.section-title {font-size: 2.5rem;font-weight: 800;margin-bottom: 30px;font-family: 'Figtree', sans-serif;}
.project-card {transition: transform 0.3s;border: none;overflow: hidden;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.project-card:hover {transform: translateY(-10px);}
.project-card img {width: 100%;height: 200px;object-fit: cover;}
.social-icon {color: white;font-size: 1.5rem;margin-right: 15px;}
.lead {font-family: 'Figtree', sans-serif;font-weight: 400;}

/** Projet **/
.offcanvas .btn-close {position: absolute;right: 1rem;top: 1rem;}
.offcanvas-header{background-color: #f8fafb;}
.offcanvas-header .btnForm {background-color:var(--rouge);color:white;padding: 12px 50px;border-radius: 6px;text-align: center;font-size: 0.875rem;text-decoration: none;}
.offcanvas-header p{font-size: 0.9rem;line-height:1rem;}
.offcanvas-header p.titre  {margin-bottom: .5rem;line-height: 1.1;font-size: 2rem;color:#0F0F0F;}
.offcanvas-header p.titre span{color:#c71334;}
.offcanvas-body {padding: 0 1.5rem !important;}

#contactMailForm button[type="submit"] {margin-top: 1rem;font-size: 0.9rem;border-radius: 6px;background: var(--rouge);color: #fff;padding: 0.8rem 1.3rem;transition: 0.4s ease-in;position: relative;z-index: 1;display: inline-block;-webkit-transition: right 0.4s ease-in;line-height:1rem}
#contactMailForm label.form-label {font-size: 0.9rem;  font-weight: 500;}
#contactMailForm textarea.form-control,
#contactMailForm input.form-control {border-radius: 8px;border: 1px solid #F3F3F3;padding: 1rem;font-size: .9rem;}
#contactMailForm input:focus.form-control{outline:none;}
#contactMailForm label.text-small {font-size: 0.6875rem;line-height: .875rem;color: #494949;}
form input.alert-danger, form .is-invalid {background: rgba(255,0,0,0.1);}

@media (max-width:992px) {
    .navbar {padding: 10px var(--margeMobile);}
    .navbar-brand img{width:100px;height:32px;}
    footer {padding: 0 var(--margeMobile);}
    header .btn-contact {left: 50%;transform: translateX(-50%);min-width: 215px;}
}