/* ====== Reset CSS ====== */
*,*::before,*::after {box-sizing: border-box;margin:0;padding:0}
::-webkit-scrollbar {width: 8px;height: 8px}
::-webkit-scrollbar-track {background: #222;border-radius: 10px}
::-webkit-scrollbar-thumb {background: #444;border-radius: 10px}
::-webkit-scrollbar-thumb:hover {background: #666}
::selection {color: white;background: #ff7001}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxM.woff2') format('woff2');
}
html,body {margin: 0;padding: 0;min-width: 320px;background: #fff;color:#333;scrollbar-color: #444 #222;scrollbar-width: thin;scroll-behavior: smooth;scroll-padding-top: 50px;font-family: Roboto, Arial, Helvetica, sans-serif;}
a,a:visited, a:hover, a:active,button {text-decoration: none;color: inherit;outline: none;transition: all 200ms ease-in-out;-webkit-tap-highlight-color: transparent}
button {outline: none;border:none;-webkit-tap-highlight-color: transparent}
ul li{list-style-type: none}
ul.check li {list-style-image: url('../svg/check-mini.svg');margin-left: 24px;padding-left:5px;margin-bottom:5px}
picture {display:block}
img {max-width:100%}

/* ====== Grid ====== */
.grid {display: grid;gap: 20px}
.grid.grid-2 {grid-template-columns: 1fr 1fr}
.grid.grid-3 {grid-template-columns: 1fr 1fr 1fr}
.grid.grid-4 {grid-template-columns: 1fr 1fr 1fr 1fr}
.grid.grid-5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr}
.grid.grid-6 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr}
.grid.grid-2-1 {grid-template-columns: 2fr 1fr}
.grid.grid-3-1 {grid-template-columns: 3fr 1fr}
.grid.grid-4-1 {grid-template-columns: 4fr 1fr}
.grid.grid-5-1 {grid-template-columns: 5fr 1fr}
.grid.grid-1-2 {grid-template-columns: 1fr 2fr}
.grid.grid-1-3 {grid-template-columns: 1fr 3fr}
.grid.grid-1-4 {grid-template-columns: 1fr 4fr}
.grid.grid-1-5 {grid-template-columns: 1fr 5fr}

/* ====== Container ====== */
main {margin-top: 135px;transition: margin-top 200ms ease-in-out}
main.stickyON {margin-top:70px;transition: margin-top 200ms ease-in-out}
main.stickyOFF {margin-top:135px;transition: margin-top 200ms ease-in-out}
@media (max-width:1920px){
  main {margin-top: 120px}
  main.stickyOFF {margin-top:120px}
}
.container {max-width: 1280px;margin:0 auto}
.container-fluid {width: 100%; margin: 0 auto;padding: 0 2%;max-width: 1480px}
.sec {padding: 100px 0}
@media (max-width:1920px){
  .container {max-width: 1150px}
}
@media (max-width:1366px){
  .sec {padding: 80px 0}
}
@media (max-width:1199px){
  .container-fluid {padding: 0 1.5%}
  .container {max-width: 960px}
}
@media (max-width:1024px){
  .container {width: 90%}
}

/* ====== Global CSS ====== */
h2 {font-size: 1.8rem;letter-spacing: -.5px;}
h3 {font-size: 1.3rem}
h4 {font-size: 1rem;font-weight: 600;}
p {font-size: 1.1rem;line-height: 150%;color:#222;font-weight: 300;letter-spacing: .25px;}
p strong {font-weight: 400}
strong.keyword {text-transform: uppercase;font-weight: 400;font-size: .9rem;letter-spacing: 2px;color:#888481;margin-bottom: 10px;display: block;}
ul li {color:#222;font-size: .9rem}
@media (max-width:1366px){
  p {font-size: 1rem}
}
/* ====== Title ====== */
.title img.logo {display: inline-block;height: 30px;width:48px;vertical-align: middle;margin-right: 10px;}
.title h2 {display: inline-block;vertical-align: middle;color:#ff7001;font-size: 2rem}
.title hr {height: 3px;background-color: #ff7001;border: none;width: 50px;margin: 20px 0 30px 0}

/* ====== scroll-to-top ====== */
#scroll-to-top {position:fixed;background:#000;padding:18px 15px 12px 15px;right: 10px;bottom:10px;z-index: 70;cursor: pointer;transition: all 0.3s;border-radius:5px}
#scroll-to-top .arrow {border: solid white;border-width: 0 3px 3px 0;display: block;padding: 4px;transform: rotate(-135deg)}
#scroll-to-top:hover .arrow {border-color: #ff7001;transition: border-color 0.3s ease-out}

/*====== BTN ====== */
a.btn,button.btn {padding: 15px 40px;border: 2px solid #ff7001;background: #ff7001;color:#fff;border-radius:5px;display:inline-block;text-transform:uppercase;font-weight: 700;font-size: .9rem}
a.btn:hover,button.btn:hover {background: #fff;color:#ff7001;}
a.btn-inver {padding: 15px 40px;border: 2px solid #fff;background: #fff;color:#ff7001;border-radius:5px;display:inline-block;text-transform:uppercase;font-weight: 700;font-size: .9rem}
a.btn-inver:hover {background: #ff7001;color:#fff;}

/* ====== Overlay ====== */
#overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color:rgba(33,33,33,.55);backdrop-filter: blur(3px);display: none}
#overlay.open-modal {display: block;z-index: 998}
#overlay.open-navbar {display: block;z-index: 996}

/* ====== Modal ====== */
@keyframes slideDown {from {transform: translateY(-20px);opacity: 0}to{transform: translateY(0);opacity: 1}}
.modal {display: none;position: fixed;z-index: 999;left: 50%;top: 50%;transform: translate(-50%, -60%);width: 80%;max-width: 1024px;transition: opacity 0.4s ease-in-out}
.modal.open {display: flex;opacity: 1}
.modal-content {background-color: #fff;border-radius: 10px;width: 100%;animation: slideDown 0.4s ease;position: relative;box-shadow: 0px 0px 20px rgba(0, 0, 0, .15)}
.modal-header {background: #ff7001;padding: 16px 20px 15px 20px;border-radius: 10px 10px 0 0}
.modal-header h6 {color:#fff;text-transform: uppercase;font-size:1rem;font-weight: 600}
.modal-header span.close {font-size: 2rem;font-weight: 400;color: #fff;cursor: pointer;position: absolute;top: 7px;right: 25px;z-index: 1}
.modal-body {padding:20px 50px}
.modal-footer {padding: 0px 20px 20px 50px}
.close {position: absolute;font-size: 24px;cursor: pointer;line-height: 1;padding: 1px 7px;border-radius: 5px;margin: 0 -12px 0;transition: background 200ms ease-in-out}
.close:hover {background:rgba(255,255,255,.2)}
form input[type=text],
form input[type=date],
form input[type=number],
form input[type=email],
form input[type=tel] {border: 1px solid #f1f1f1;border-radius: 3px;transition:all .2s;background: #f1f1f1;width: 100%;padding:15px;margin-left: 0%;font-size:1rem}
form input[type=text]:focus,
form input[type=date]:focus,
form input[type=email]:focus,
form input[type=tel]:focus,
form input[type=date]:focus,
form textarea:focus {border: 1px solid #ff7001;outline: none}
form textarea {padding: 15px;border: 1px solid #f1f1f1;border-radius: 3px;background: #f1f1f1;box-sizing: border-box;width: 100%}
form label {display: block;margin:20px 0 5px 0;}
form button {cursor: pointer;margin-top: 20px;display: block;width: 100%;}
#ajaxResponseFail {display:none;width:100%;padding: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0%;text-align: center;border: 1px solid #cc3333;border-radius: 3px;background: #ffcccc;color:#cc3333}
#ajaxResponseSuccess {display:none;width:100%;padding: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0%;text-align: center;border: 1px solid #669933;border-radius: 3px;background: #ccff99;color:#669933}
#ajaxResponseFail a {color:#cc3333;font-size: 1.4rem}
@media (max-width: 1024px) {
  .modal {top: 0; left: 0; transform: none; width: 100%; height: 100%; max-width: 100%; display: none; align-items: center; justify-content: center; padding: 10px; overflow: hidden}
  .modal.open {display: flex}
  .modal-content {max-height: 100vh; height: auto; overflow: auto; border-radius: 10px; margin: auto; animation: slideDown 0.4s ease}
  .modal-body {padding: 20px}
  .modal-footer {padding: 0px 20px 20px 20px}
}

/* ====== MENU ====== */
header {z-index: 997;position: sticky;top:0}
#top-bar {background: #1C1C1C;color:#fff;padding-top:3px;position: fixed;top:0;width:100%;height:35px}
#top-bar p {color:#fff}
#top-bar a {font-weight: 400;transition: color 200ms ease-in-out;font-size:.75rem}
#top-bar i {font-size:.75rem;font-weight: 300;}
#top-bar svg {vertical-align: middle;display: inline-block;margin-top:-3px}
#top-bar a:hover {color:#ff7001}
#top-bar span {vertical-align: middle;display: inline-block}
#top-bar .left span {margin-left: 15px}
#top-bar .right {text-align: right;}
#top-bar .right span {margin-left: 15px}
#top-bar .right span .fill {fill: #ff7001}
#top-bar.stickyON {top:0px;transition: top 200ms ease-in-out}
#top-bar.stickyOFF {top:0px;transition: top 200ms ease-in-out}
#menu {width: 100%;background:#fff;height:100px;position: fixed;top:35px;box-shadow: 0px 0px 20px rgba(0, 0, 0, .15)}
#menu .grid-menu {grid-template-columns: 300px 1fr;height:100%;gap:0}
#menu .grid-menu .grid-item {display: flex;align-items: center;}
.menu_1 {display: flex;align-items: center;justify-content: left;height: 100%}
.menu_1 a strong {font-size: 3rem;color:#888481;display: inline-block;vertical-align: middle;font-family: Arial, Helvetica, sans-serif}
.menu_1 a strong span {color: #ff7001}
.menu_1 a picture {display: inline-block; vertical-align: middle; border-right: 2px solid #888481; padding-right: 8px; margin-right: 2px}
.menu_1 a picture img {display: inline-block; vertical-align: middle; width: 80px; height: 50px}
.menu_2 {display: flex;align-items: center;justify-content: right;height: 100%}
.menu_2 nav {display: flex;gap: 0px;align-items: center}
.menu_2 nav ul.main-menu > li {display: inline-block;vertical-align:middle}
.menu_2 nav ul.main-menu > li > a {display: flex;height: 100%;font-weight: 700;font-size: .9rem;color:#333;position: relative;text-transform: uppercase;letter-spacing: 0px;}
.menu_2 nav ul.main-menu > li > a:hover,.menu_2 nav ul.main-menu li a.active {color: #ff7001}
.menu_2 nav ul.main-menu > li:nth-child(-n+5) > a {padding: 12px 22px;height:100px;transition: height 200ms ease-in-out, color 200ms ease-in-out}
.menu_2 nav ul.main-menu > li:nth-child(-n+5) > a.actif {color: #ff7001}
.menu_2 nav ul.main-menu > li:nth-child(6) > a {background: #ff7001;color:#fff;border-radius:  5px;margin-left: 20px;border:2px solid #ff7001;padding: 15px 25px;transition: color 200ms ease-in-out, background 200ms ease-in-out}
.menu_2 nav ul.main-menu > li:nth-child(6) > a:hover {background:rgba(255,255,255);color:#ff7001}
#menu.stickyON {height: 70px;top:0;transition: top 200ms ease-in-out, height 200ms ease-in-out;}
#menu.stickyOFF {height: 100px;top:35px;transition: top 200ms ease-in-out, height 200ms ease-in-out;}
#menu.stickyON .menu_2 nav ul.main-menu > li:nth-child(-n+5) > a {height:70px}
.hamburger-container {display: none}
@media (max-width:1199px){
  #menu .grid-menu {grid-template-columns: 200px 1fr}
  main {margin-top: 55px}
  main.stickyON {margin-top:0px}
  main.stickyOFF {margin-top:55px}   
  #top-bar {display: none}
  #menu.stickyON,#menu.stickyOFF,#menu {height: 55px;position: fixed;top:0;left:0}
  #navbar.open {right: 0px;opacity:1}
  #navbar {right: -350px;opacity:0;transition: right 250ms ease-in-out,opacity 250ms ease-in-out;box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1)}
  .menu_1 {display: flex;align-items: center;justify-content: left;height: 100%}
  .menu_1 a strong {font-size: 2.5rem;color:#888481;display: inline-block;vertical-align: middle;font-family: Arial, Helvetica, sans-serif;}
  .menu_1 a strong span {color: #ff7001}
  .menu_1 a picture img {display: inline-block; vertical-align: middle; width: 48px; height: 30px}
  .menu_2 nav {display: flex;position: absolute;top:55px;background:#fff;border-top: 1px solid #eee}
  .menu_2 nav ul.main-menu {height: 100vh;overflow-y: auto;}
  .menu_2 nav ul.main-menu > li {display: block;width:350px;border-bottom: 1px solid #eee}
  .menu_2 nav ul.main-menu > li:last-child {border-bottom: 0px}
  .menu_2 nav ul.main-menu > li:nth-child(-n+5) > a {padding: 20px;height:auto;}
  .menu_2 nav ul.main-menu > li:nth-child(-n+5) > a.actif {color: #ff7001}
  .menu_2 nav ul.main-menu > li:nth-child(6) > a {background: #fff;color:#ff7001;border-radius:0;margin-left: 0px;border:none;padding: 20px;height:auto;}
  #menu.stickyON .menu_2 nav ul.main-menu > li:nth-child(-n+5) > a {height:auto}
  .hamburger-container {display: flex;align-items: center;cursor: pointer}
  .menu-label { font-size: .9rem;margin-right: 5px;color: #333;font-weight: 400}
  .hamburger {width: 50px;height: 50px;transform: rotate(0deg);transition: .5s ease-in-out;cursor: pointer}
  .hamburger span {display: block;position: absolute;height: 3.2px;width: 40px;background: #ff7001;border-radius: 5px;left: 24%;margin-top:9px;transform: rotate(0deg);transition: .25s ease-in-out}
  .hamburger span:nth-child(1) {top: 6px;width: 50%}
  .hamburger span:nth-child(2) {top: 14px;width: 50%}
  .hamburger span:nth-child(3) {top: 14px;width: 50%;opacity: 0}
  .hamburger span:nth-child(4) {top: 22px;width: 50%}
  .hamburger.open span:nth-child(1) {top: 12px;width: 0%;left: 50%}
  .hamburger.open span:nth-child(2) {transform: rotate(45deg)}
  .hamburger.open span:nth-child(3) {transform: rotate(-45deg);opacity: 1}
  .hamburger.open span:nth-child(4) {top: 12px;width: 0%;left: 50%}
}

/* ====== Hero ====== */
#hero-gradient {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15), rgba(242, 142, 34, 0.2), rgba(255, 255, 255, 0.15), rgba(242, 142, 34, 0.2), rgba(255, 255, 255, 0.15), rgba(242, 142, 34, 0.2));background-size: 300%;animation: gradientAnimation 20s ease-in-out infinite;pointer-events: none;z-index: 3;background-color: rgba(33,33,33, .25)}
#hero .container {position: relative;z-index: 3}
#hero {border-top:3px solid #ff7001;border-bottom:3px solid #ff7001;padding: 100px 0 100px 0;position: relative;text-align: center;background: url('../img/brms-cartes-electroniques-loir-et-cher.webp') no-repeat center;background-size: cover;background-attachment: fixed;overflow: hidden;box-shadow: inset 0px 50px 50px rgba(0, 0, 0, 0.4),inset 0px -50px 55px rgba(0, 0, 0, 0.4)}
#hero h1 {font-size: 2.5rem;color:#fff;font-family: Arial, Helvetica, sans-serif;}
#hero h1 span {color: #ff7001}
#hero img {vertical-align: middle;height:50px;width:80px;border-right:2px solid #fff;padding-right: 8px;margin-right: 8px;}
#hero .titre_logo {color:#fff;font-size: 4.5rem;font-weight: 700;display: inline-block;vertical-align: middle;}
#hero .titre_logo span {color: #ff7001}
#hero hr {height: 3px;background-color: #ff7001;border: none;width: 120px;margin: 20px auto}
#hero p {color:#fff;width:80%;margin: 20px auto 40px auto;font-size: 1.2rem;}
@keyframes gradientAnimation {0% { background-position: 0% 30%, center center}50% { background-position: 100% 50%, center center}100% { background-position: 0% 30%, center center}}
@media (max-width:1366px){
  #hero p {font-size: 1.1rem}
}
@media (max-width:1199px){
  #hero p {width:100%}
  #hero-gradient {animation: none}
  #hero {background-attachment: scroll}
}
/* ====== Services ====== */
#services {text-align: center;background: #eee;}
#services h2 {color: #ff7001}
#services .grid {margin-top: 60px;}
#services .grid-item {background:#fff;border-radius:5px;padding: 40px;border: 1px solid #ff7001;}
#services .grid-item img {height: 80px;width: 80px;}
#services .grid-item h3 {color:#ff7001}
#services .grid-item hr {height: 3px;background-color: #ff7001;border: none;width: 60px;margin: 20px auto}
@media (max-width:1199px){
  #services .grid.grid-4 {grid-template-columns: 1fr 1fr}
}
@media (max-width:768px){
  #services .grid.grid-4 {grid-template-columns: 1fr}
}
/* ====== QUESTION ====== */
.question {background: linear-gradient(to bottom, #eee 50%, #fff 50%);margin-top: -20px;}
.question .content {background: #ff7001;border-radius: 5px;width:100%;margin: 0 auto;padding: 50px;color:#fff}
.question .content.grid {grid-template-columns: 100px 1fr}
.question .content h2 {margin-bottom: 10px;}
.question .content p {color:#fff;font-weight:400;letter-spacing: .5px;margin-bottom: 20px;}
@media (max-width:1024px){
  .question .content {padding: 50px 40px;}
  .question .content.grid {grid-template-columns: 50px 1fr}
  .question svg {width: 50px;}
}
@media (max-width:768px){
  .question .content {padding: 25px 50px 50px 50px}
  .question .content.grid {grid-template-columns: 1fr}
}
/* ====== Bureau d'étude ====== */
#bureau h3 {margin: 10px 0 40px 0}
#bureau .txt-second {border-left : 3px solid #ff7001;padding:30px 40px;border-radius: 0 5px 5px 0;margin: 40px 0 20px 0;color:#ff7001;font-weight:500;background:rgba(255, 111, 1,.1)}
#bureau .grid ul {margin-bottom: 40px;}
#bureau .grid ul li {margin-bottom: 20px;}
#bureau .grid a {margin-bottom: 10px;}
#bureau .grid {gap:50px;margin: 50px 0;}
#bureau .grid .img {background: url('../img/bureau-etude-carte-electronique-loir-et-cher.webp') no-repeat center;background-size: cover;border-radius:5px}
@media (max-width:1199px){
  #bureau .grid {margin: 50px 0 0;}
}
@media (max-width:1024px){
  #bureau .grid.grid-2 {grid-template-columns: 1fr}
  #bureau .grid .img {height: 400px;}
}
/* ====== Fabrication ====== */
#fabrication {background: #eee}
#fabrication .grid {gap:50px;margin-top: 50px;}
#fabrication .grid .img {background: url('../img/fabrication-carte-electronique-loir-et-cher.webp') no-repeat center;background-size: cover;border-radius:5px}
#fabrication .txt-first {margin-top: 10px;}
#fabrication .txt-second {border-left : 3px solid #ff7001;padding:30px 40px;border-radius: 0 5px 5px 0;margin: 40px 0 20px 0;color:#ff7001;font-weight:400;background:rgba(255, 111, 1,.1)}
#fabrication .txt-second strong {font-weight: 600;}
#fabrication ul {margin: 80px 0;}
#fabrication ul li {display: flex;align-items: center;gap: 8px;background:#fff;margin-bottom: 20px;padding: 40px;border-radius: 5px;border: 1px solid #ff7001;}
#fabrication ul li svg {flex-shrink: 0;z-index: 1}
#fabrication ul li:first-child svg {margin:5px 0 0 5px}
#fabrication ul li .text {flex: 1;margin-left: 20px}
#fabrication ul li .text h3 {color: #ff7001;margin-bottom: 5px;}
#fabrication ul li .icon-wrapper {position: relative;width: 70px;height: 70px;display: flex;align-items: center;justify-content: center}
#fabrication ul li .icon-wrapper::before {content: "";position: absolute;width: 100%;height: 100%;background-color: #ff7001;border-radius: 50%;z-index: 0}
#fabrication .bottom {display: flex;align-items: center}
#fabrication .bottom a {display: inline-block}
#fabrication .bottom p {display: inline-block;width: 75%;margin-right: 50px}
@media (max-width:1024px){
  #fabrication .grid.grid-2 {grid-template-columns: 1fr}
  #fabrication .grid .img {height: 400px}
  #fabrication ul {margin: 80px 0 40px 0}
  #fabrication .bottom {display: block}
  #fabrication .bottom a {margin-top: 40px;}
  #fabrication .bottom p {width: 100%;margin-right: 0px}
}
@media (max-width:768px){
  #fabrication ul li {padding: 40px 20px;align-items: flex-start}
  #fabrication ul li .icon-wrapper {width: 50px;height: 50px;}
  #fabrication ul li svg {height: 30px}
}
/* ====== Modification ====== */
#modification {padding: 50px 0;background: url('../img/modification-carte-electronique-loir-et-cher.webp') no-repeat center;background-attachment: fixed;background-size: cover;position:relative}
#modif-gradient {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15), rgba(242, 142, 34, 0.2), rgba(255, 255, 255, 0.15), rgba(242, 142, 34, 0.2), rgba(255, 255, 255, 0.15), rgba(242, 142, 34, 0.2));background-size: 300%;animation: gradientAnimation 20s ease-in-out infinite;pointer-events: none;z-index: 3;background-color: rgba(33,33,33, .25)}
#modification .container {position: relative;z-index: 3}
#modification .title {text-align: center;}
#modification .title .keyword {color:#fff}
#modification .title h2 span {color:#fff}
#modification .title hr {height: 3px;background-color: #ff7001;border: none;width: 80px;margin: 20px auto 30px auto}
#modification p {color:#fff;margin: 50px auto 50px auto;background:rgba(255,255,255,.25);text-align: left;padding: 60px;border-radius: 10px;}
#modification .grid {border-top: 1px solid rgba(255,255,255,.25);padding-top: 40px;}
#modification .grid-item svg {display: inline-block;vertical-align: middle;margin-right: 5px}
#modification .grid-item h3 {display: inline-block;vertical-align: middle;font-size: 1.1rem;font-weight: 400;font-style: italic;color:#fff}
@media (max-width:1199px){
  #modification {background-attachment: scroll}
  #modif-gradient {animation: none}
  #modification p {padding: 40px}
  #modification .grid.grid-4 {grid-template-columns: 1fr 1fr}
  #modification .grid-item {text-align: center;margin-bottom: 20px}
  #modification .grid-item svg {display: block;margin: 0 auto;}
  #modification .grid-item h3 {margin-top: 5px;}
}
/* ====== Marquage ====== */
#marquage .grid {gap:50px;margin: 50px 0;}
#marquage .grid a {margin-bottom: 10px;}
#marquage .grid ul {margin-bottom: 40px;}
#marquage .grid ul li {margin-bottom: 20px;}
#marquage h3 {margin: 20px 0 40px 0}
#marquage .grid-item {position: relative;}
.slider-container {position: relative;max-width: 100%;overflow: hidden;margin: auto}
.slider {display: flex;transition: transform 0.5s ease}
.slider img {width: 100%;height: auto;border-radius: 5px}
.prev, .next {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.3);color: white;border: none;cursor: pointer;padding: 10px;font-size: 18px}
.prev{left: 0}
.next {right: 0}
@media (max-width:1199px){
  #marquage .grid {margin: 50px 0 0;}
}
@media (max-width:1024px){
  #marquage .grid.grid-2 {grid-template-columns: 1fr}
}
/* ====== QUESTION2 ====== */
.question2 {background: linear-gradient(to bottom, #fff 50%, #eee 50%);margin-top: -50px;}
.question2 .content {background: #ff7001;border-radius: 5px;width:100%;margin: 0 auto;padding: 50px;color:#fff}
.question2 .content.grid {grid-template-columns: 100px 1fr}
.question2 .content h2 {margin-bottom: 10px;}
.question2 .content p {color:#fff;font-weight:400;letter-spacing: .5px;margin-bottom: 20px;}
@media (max-width:1024px){
  .question2 .content {padding: 50px 40px;}
  .question2 .content.grid {grid-template-columns: 50px 1fr}
  .question2 svg {width: 50px;}
}
@media (max-width:768px){
  .question2 .content {padding: 25px 50px 50px 50px}
  .question2 .content.grid {grid-template-columns: 1fr}
}
/* ====== A Propos ====== */
#propos {background: #eee;text-align: center;}
#propos .title hr {height: 3px;background-color: #ff7001;border: none;width: 80px;margin: 20px auto 30px auto}
#propos .grid {gap:50px;margin-top: 50px;text-align: left;}
#propos .txt-first {background:#fff;padding: 50px 60px;border-radius: 5px;border: 1px solid #ff7001;margin-top: 60px;text-align: left;}
#propos .txt-second {border-left : 3px solid #ff7001;padding:30px 40px;border-radius: 0 5px 0px 0;margin: 0;color:#ff7001;font-weight:400;background:rgba(255, 111, 1,.1)}
#propos .txt-second strong {font-weight: 600;}
#propos ul {border-left : 3px solid #ff7001;background: #fff;border-radius: 0 0 5px 0;padding: 30px;}
#propos ul li {margin-bottom: 20px;}
#propos .grid .img {background: url('../img/societe-brms.webp') no-repeat top center;background-size: cover;border-radius:5px}
#propos .bottom {display: flex;align-items: center}
#propos .bottom a {display: inline-block}
#propos .bottom p {display: inline-block;width: 75%;margin-right: 50px}
@media (max-width:1024px){
  #propos .txt-first {padding: 40px}
  #propos ul {padding: 40px 30px;}
  #propos .grid.grid-2 {grid-template-columns: 1fr}
  #propos .grid .img {height: 400px}
}
/* ====== CTA ====== */
.cta {background-color: #ff7001;text-align: center;color:#fff;padding:80px 0}
.cta h6 {font-size: 1.5rem;margin-bottom: 20px;}
.cta p {font-size:1.1rem;width:75%;margin: 0 auto;color:#fff}
.cta a {margin-top: 40px}
@media (max-width:1366px){
  .cta p {font-size: 1rem}
}
@media (max-width:1024px){
  .cta p {width:100%}
}

/* ====== Footer ====== */
footer {background: #151515;color:#fff;padding:80px 0 0;font-size:.95rem}
footer h3 {margin-bottom: 20px;color:#ff7001}
footer .grid-3 .grid-item p {color:#fff}
footer .grid-3 .grid-item:nth-child(1) a {margin-bottom: 30px;display: inline-block;}
footer .grid-3 .grid-item:nth-child(1) a strong {font-size: 3rem;color:#fff;display: inline-block;vertical-align: middle;font-family: Arial, Helvetica, sans-serif;}
footer .grid-3 .grid-item:nth-child(1) a strong span {color: #ff7001}
footer .grid-3 .grid-item:nth-child(1) a img {vertical-align: middle;height:50px;border-right:2px solid #fff;padding-right: 8px;margin-right: 2px;}
footer .grid-3 .grid-item:nth-child(1) p {color: #ff7001}
footer .grid-3 .grid-item:nth-child(1) span.reso {margin-right: 10px;color: #ffffff;display: inline-block;margin-top:15px}
footer .grid-3 .grid-item:nth-child(1) span.reso a:hover {color: #ff7001}
footer .grid-3 .grid-item:nth-child(1) {padding: 20px 30px;}
footer .grid-3 .grid-item:nth-child(2) {border-right:1px solid #333;border-left:1px solid #333;padding: 20px 30px;}
footer .grid-3 .grid-item:nth-child(3) {padding: 20px 30px;}
footer .bottom-bar {margin-top: 50px;background: #000;padding: 5px 0;font-size:.8rem}
footer .bottom-bar a {text-decoration: underline;margin: 0 10px}
footer .bottom-bar a:hover {text-decoration: none}
footer .bottom-bar .right {text-align: right}
@media (max-width:1199px){
  footer .grid-3 .grid-item:nth-child(1) {padding: 20px 30px 20px 0;}
  footer .grid-3 .grid-item:nth-child(3) {padding: 20px 0px 20px 30px;}
}
@media (max-width:1024px){
  footer {text-align: center;}
  footer .grid.grid-3 {grid-template-columns: 1fr}
  footer .grid-3 .grid-item:nth-child(1) {border-bottom:1px solid #333;padding: 0}
  footer .grid-3 .grid-item:nth-child(2) {border-right:none;border-left:none;border-bottom:1px solid #333;padding: 30px 0 50px 0;}
  footer .grid-3 .grid-item:nth-child(3) {padding: 30px 0 50px 0}
  footer .bottom-bar {padding: 20px 0;}
  footer .bottom-bar .grid.grid-2 {grid-template-columns: 1fr}
  footer .bottom-bar .right {text-align: center}
}