/*-------------------------------------------------
GLOBALS CLASSES
-------------------------------------------------*/
:root {
--primary: #1c263c;
--secondary: #F2F2F2;
--text: #F2F2F2;
--hover: #91a3c2;
--custom: #1D88DEDD;
--custom2: #00a3e6;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #1c263c;
margin: 0;
padding: 0;
line-height: 1.6;
}
img {
border: 0;
}
h1 {
font-family: 'Oswald', sans-serif;
font-weight: normal;
color: #1D88DEDD; /* Change color to blue */
}
h2 {
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 16px;
color: #1D88DEDD; /* Change color to blue */
}
h3 {
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 14px;
color: #1D88DEDD; /* Change color to blue */
}
/*h2{font-family: 'Oswald', sans-serif; font-weight:normal; font-size:16px;}
*/
p {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
padding-bottom: 20px;
color: #808080; /* Change color to gray */
}
a {
color: #1D88DEDD;
text-decoration: none;
}
a:hover {
color: #91a3c2;
}
/*h2{font-family: 'Open Sans', sans-serif;}
*//*---------------------------------------
GENERAL CLASS
----------------------------------------*/
.marRight30 {
margin-right: 30px;
}
.martop {
margin-top: 30px;
}
.marbottom30 {
margin-bottom: 30px;
}
.padding-bottom {
padding-bottom: 10px;
}
.floatRight {
float: right;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
.row {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.page {
width: 100%;
background: #1c263c;
margin: 1% 0;
box-sizing: border-box;
}
@media (max-width: 768px) {
.page {
margin: 10% 0;
}
}
.wrapper {
background: #1c263c;
margin: 0 auto;
max-width: 970px;
width: 100%;
}
.panel {
overflow: hidden;
display: flex;
flex-direction: column;
}
.controller {
display: flex;
justify-content: center;
}
.title {
text-align: center;
margin-bottom: 40px;
}
.title h1 {
font-family: 'Oswald', sans-serif;
font-size: 2.5em;
color: #333;
margin-bottom: 10px;
}
.title h2 {
font-size: 1.2em;
color: #666;
}
.content {
}
.buttons {
width: 80px;
height: 30px;
}
.form {
}
.text-field {
background: #91a3c2;
width: 200px;
height: 16px;
padding: 10px;
border: none;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #fff;
}
.textarea {
background: #91a3c2;
width: 200px;
height: 106px;
padding: 10px;
border: none;
font-family: 'Open Sans', sans-serif !important;
font-size: 13px;
color: #fff;
overflow: auto;
}
/*-------------------------------------------------
SOCIAL NETWORKING CLASSES
-------------------------------------------------*/
.social-wrapper {
background: #1c263c;
height: 55px;
padding-top: 25px;
}
.social-wrapper .row {
}
.social-wrapper .row ul {
width: 175px;
float: right;
list-style: none;
}
.social-wrapper .row ul li {
float: left;
padding-right: 15px;
}
.social-wrapper .row ul li.no-padding {
float: left;
padding-right: 0px;
}
/*-------------------------------------------------
MENU CLASSES
-------------------------------------------------*/
.header {
background: #313c53;
height: 60px;
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 5%;
/*overflow: hidden;*/
}
.header-home {
background: #313c53;
height: 60px;
padding-top: 30px;
padding-bottom: 30px;
position: relative;
z-index: 1;
}
.logo {
float: left;
width: 30%;
position: relative;
z-index: 1000;
}
.logo img {
max-width: 200px;
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
transition: transform 0.3s ease, filter 0.3s ease;
}
.logo img:hover {
transform: translateY(-5px);
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4));
}
.logo h1 {
font-size: 45px;
color: #ffffff;
}
.menu {
float: right;
width: auto;
margin-top: 10px;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.menu ul li {
width: auto;
float: left;
list-style: none;
position: relative;
}
.menu ul li a {
color: #F2F2F2;
text-decoration: none;
padding: 12px 20px;
font-weight: 500;
transition: all 0.3s ease;
border-radius: 4px;
position: relative;
}
.menu ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: #1D88DEDD;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.menu ul li a:hover {
color: #1D88DEDD;
background: rgba(255, 255, 255, 0.1);
}
.menu ul li a:hover::after {
width: 70%;
}
.menu ul li a.active {
color: #1D88DEDD;
}
.menu ul li a.active::after {
width: 70%;
}
/*-------------------------------------------------
BANNER MODERNE ET PROFESSIONNEL
-------------------------------------------------*/
.banner-wrapper {
width: 100%;
background: url(../images/banner-bg.jpg) no-repeat center;
background-size: cover;
margin: 0 auto;
position: relative;
}
.banner-wrapper .row {
background: #1c263c;
}
.banner-wrapper .controller {
padding-top: 30px;
padding-bottom: 30px;
float: right;
}
.banner-wrapper .controller ul li {
padding-right: 10px;
float: left;
list-style: none;
}
.banner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.banner .banner-bg {
width: 100%;
min-height: 500px;
padding: 60px 0px;
display: flex;
align-items: center;
justify-content: center;
}
.banner-content {
background: rgba(28, 38, 60, 0.75);
backdrop-filter: blur(15px);
border-radius: 16px;
padding: 50px;
border: 1px solid rgba(29, 136, 222, 0.15);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
text-align: center;
max-width: 900px;
width: 100%;
position: relative;
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.banner-content .title h1 {
color: #1D88DEDD;
font-size: 2.8em;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.2;
position: relative;
}
.banner-content .title h1::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #1D88DEDD, #91a3c2);
border-radius: 2px;
}
.banner-content .title h2 {
color: #91a3c2;
font-size: 1.2em;
font-weight: 400;
margin-bottom: 25px;
line-height: 1.4;
}
.banner-content .content p {
font-size: 1.1em;
color: #e0e0e0;
line-height: 1.6;
margin-bottom: 35px;
}
.banner-button {
display: inline-block;
background: linear-gradient(135deg, #1D88DEDD 0%, #91a3c2 100%);
border: none;
border-radius: 8px;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-family: 'Oswald', sans-serif;
font-size: 1em;
font-weight: 600;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(29, 136, 222, 0.25);
position: relative;
overflow: hidden;
}
.banner-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.banner-button:hover::before {
left: 100%;
}
.banner-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(29, 136, 222, 0.35);
background: linear-gradient(135deg, #91a3c2 0%, #1D88DEDD 100%);
}
.banner-button-link {
color: #fff;
text-decoration: none;
position: relative;
z-index: 1;
}
/* Responsive Design pour le banner */
@media (max-width: 1200px) {
.banner .banner-bg {
padding: 50px 0px;
}
.banner-content {
max-width: 850px;
}
.banner-content .title h1 {
font-size: 2.5em;
}
}
@media (max-width: 992px) {
.banner .banner-bg {
padding: 45px 0px;
}
.banner-content {
max-width: 800px;
padding: 40px;
}
.banner-content .title h1 {
font-size: 2.2em;
}
.banner-content .title h2 {
font-size: 1.1em;
}
.banner-content .content p {
font-size: 1em;
}
}
@media (max-width: 768px) {
.banner .banner-bg {
padding: 40px 0px;
min-height: 450px;
}
.banner-content {
padding: 35px;
border-radius: 12px;
max-width: 100%;
}
.banner-content .title h1 {
font-size: 1.8em;
letter-spacing: 0.5px;
}
.banner-content .title h1::after {
width: 50px;
height: 2px;
}
.banner-content .title h2 {
font-size: 1em;
}
.banner-content .content p {
font-size: 0.95em;
}
.banner-button {
padding: 14px 28px;
font-size: 0.9em;
}
}
@media (max-width: 576px) {
.banner .banner-bg {
padding: 30px 0;
}
.banner-content {
padding: 25px;
}
.banner-content .title h1 {
font-size: 1.6em;
}
.banner-content .title h2 {
font-size: 0.95em;
}
.banner-content .content p {
font-size: 0.9em;
}
.banner-button {
padding: 12px 24px;
font-size: 0.85em;
}
}
/*-------------------------------------------------
BOX CLASSES
-------------------------------------------------*/
.boxs1, .boxs2, .boxs3 {
text-align: center;
float: left;
width: calc(33.333% - 60px);
padding: 50px 30px;
opacity: 0;
transform: translateX(-50px);
}
.boxs1 {
background: #202b43;
animation: slideRight 0.6s ease-out 0.2s forwards;
}
.boxs2 {
background: #25314d;
animation: slideRight 0.6s ease-out 0.4s forwards;
}
.boxs3 {
background: #2a3856;
animation: slideRight 0.6s ease-out 0.6s forwards;
}
@keyframes slideRight {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Ajout d'un effet de hover sur les boxes */
.boxs1:hover, .boxs2:hover, .boxs3:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
.title h1 {
text-transform: uppercase;
font-size: 22px;
color: #1D88DEDD;
font-weight: normal;
margin-bottom: 3%;
}
.title h2 {
font-size: 16px;
color: rgba(74, 145, 183, 0.87);
}
.panel-img {
margin: 0 auto;
padding: 20px 0px 40px 0px;
width: 260px;
}
.content p {
font-size: 14px;
color: #91a3c2;
}
.controller .buttons {
background: #1D88DEDD;
line-height: 30px;
text-align: center;
width: 40%;
float: left;
}
.controller .buttons:hover {
background: #91a3c2;
line-height: 30px;
}
.controller .buttons a {
text-decoration: none;
color: #1c263c;
}
.controller .buttons a:hover {
color: #1D88DEDD;
}
/*-------------------------------------------------
CONTENT CLASSES
-------------------------------------------------*/
.content_wrap {
margin: 0 auto;
padding: 30px 30px 0px 30px;
}
/*-------------------------------------------------
WHY CHOSE US CLASSES
-------------------------------------------------*/
.why-choose-us {
background: #202b43;
padding: 80px 0;
text-align: center;
}
.why-choose-us .title h1 {
font-size: 2.8em;
color: #1D88DEDD;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.why-choose-us .title h2 {
font-size: 1.3em;
color: #91a3c2;
margin-bottom: 50px;
line-height: 1.5;
}
/* Grille 2x2 pour les raisons */
.why-choose-us .content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
/* Styles pour chaque raison */
.why-choose-us .reason {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 40px 30px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(29, 136, 222, 0.1);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease-out forwards;
}
.why-choose-us .reason:nth-child(1) { animation-delay: 0.1s; }
.why-choose-us .reason:nth-child(2) { animation-delay: 0.2s; }
.why-choose-us .reason:nth-child(3) { animation-delay: 0.3s; }
.why-choose-us .reason:nth-child(4) { animation-delay: 0.4s; }
.why-choose-us .reason:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(29, 136, 222, 0.2);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
/* Styles pour les icônes dans les bulles */
.why-choose-us .icon-wrapper {
width: 90px;
height: 90px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
transition: all 0.3s ease;
position: relative;
box-shadow: 0 10px 25px rgba(29, 136, 222, 0.25);
}
.why-choose-us .icon-wrapper::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border-radius: 50%;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.why-choose-us .icon-wrapper i {
font-size: 2.2em;
color: #fff;
transition: all 0.3s ease;
}
.why-choose-us .reason:hover .icon-wrapper {
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(29, 136, 222, 0.35);
}
.why-choose-us .reason:hover .icon-wrapper::before {
opacity: 1;
}
.why-choose-us .reason:hover .icon-wrapper i {
transform: rotate(360deg);
}
/* Titres des raisons */
.why-choose-us .reason h3 {
color: #1D88DEDD;
font-size: 1.5em;
font-weight: 600;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Descriptions des raisons */
.why-choose-us .reason p {
color: #e0e0e0;
font-size: 1.1em;
line-height: 1.7;
margin: 0;
}
/* Responsive pour la grille 2x2 */
@media (max-width: 768px) {
.why-choose-us {
padding: 60px 0;
}
.why-choose-us .title h1 {
font-size: 2.3em;
}
.why-choose-us .title h2 {
font-size: 1.2em;
margin-bottom: 40px;
}
.why-choose-us .content {
grid-template-columns: 1fr;
gap: 30px;
padding: 0 15px;
}
.why-choose-us .reason {
padding: 35px 25px;
}
.why-choose-us .icon-wrapper {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.why-choose-us .icon-wrapper i {
font-size: 2em;
}
.why-choose-us .reason h3 {
font-size: 1.4em;
margin-bottom: 15px;
}
.why-choose-us .reason p {
font-size: 1em;
}
}
@media (max-width: 576px) {
.why-choose-us {
padding: 50px 0;
}
.why-choose-us .title h1 {
font-size: 2em;
}
.why-choose-us .title h2 {
font-size: 1.1em;
margin-bottom: 35px;
}
.why-choose-us .content {
gap: 25px;
padding: 0 10px;
}
.why-choose-us .reason {
padding: 30px 20px;
}
.why-choose-us .icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 18px;
}
.why-choose-us .icon-wrapper i {
font-size: 1.8em;
}
.why-choose-us .reason h3 {
font-size: 1.3em;
margin-bottom: 12px;
}
.why-choose-us .reason p {
font-size: 0.95em;
}
}
/*-------------------------------------------------
CTA-INTERMEDIATE CLASSES
-------------------------------------------------*/
.cta-intermediate {
background: #91a3c2;
padding: 50px 0;
text-align: center;
color: #ffffff;
}
.cta-intermediate .cta-content {
}
.cta-intermediate .cta-content h1 {
color: #202b43;
font-size: 24px;
margin-bottom: 20px;
font-family: 'Oswald', sans-serif;
}
.cta-intermediate .cta-content p {
color: rgba(42, 56, 86, 0.76);
font-size: 16px;
margin-bottom: 30px;
font-family: 'Open Sans', sans-serif;
}
.cta-intermediate a {
display: flex;
justify-content: center;
}
.cta-intermediate .cta-button {
background: #ffffff;
color: #1D88DEDD;
padding: 15px 30px;
text-decoration: none;
font-size: 16px;
font-family: 'Oswald', sans-serif;
border-radius: 10px;
transition: all 0.3s ease;
}
.cta-intermediate .cta-button:hover {
background: #202b43;
color: #ffffff;
}
/*-------------------------------------------------
OUR-COMMITMENTS CLASSES
-------------------------------------------------*/
.our-commitments {
background: #2a3856;
padding: 50px 0;
text-align: center;
color: #ffffff;
}
.our-commitments .title h1 {
font-size: 28px;
color: #1D88DEDD;
margin-bottom: 10px;
}
.our-commitments .title h2 {
font-size: 18px;
color: #91a3c2;
margin-bottom: 30px;
}
.our-commitments .commitments {
}
.our-commitments .commitment {
background: #202b43;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.our-commitments .commitment h3 {
font-size: 18px;
color: #1D88DEDD;
margin-bottom: 10px;
}
.our-commitments .commitment p {
font-size: 14px;
color: #91a3c2;
}
/*-------------------------------------------------
CONTACT CLASSES - REMPLACÉS PAR LES STYLES MODERNES
-------------------------------------------------*/
.contact-section {
/* Remplacé par .modern-contact-section */
}
.contact-section .row {
/* Remplacé par .modern-contact-row */
}
.contact-section .contact-form {
/* Remplacé par .modern-contact-form */
}
.contact-section .contact-form h1 {
/* Remplacé par .modern-contact-title */
}
.contact-section .contact-form p {
/* Remplacé par .modern-contact-description */
}
.contact-section .contact-form form {
/* Remplacé par .modern-contact-form-element */
}
.contact-section .contact-form input,
.contact-section .contact-form textarea {
/* Remplacé par .modern-form-input et .modern-form-textarea */
}
.contact-section .contact-form input:focus,
.contact-section .contact-form textarea:focus {
/* Remplacé par les styles modernes */
}
.contact-section .contact-form input::placeholder,
.contact-section .contact-form textarea::placeholder {
/* Remplacé par les styles modernes */
}
.contact-section .contact-form button {
/* Remplacé par .modern-submit-button */
}
.contact-section .contact-form button:hover {
/* Remplacé par les styles modernes */
}
.contact-section .map {
/* Remplacé par .modern-contact-map */
}
/*-------------------------------------------------
LEFT-PANEL CLASSES
-------------------------------------------------*/
.left-panel {
width: 60%;
float: left;
margin-right: 35px;
}
.left-panel .panel {
border: #24314c solid 1px;
padding: 30px 30px 40px 30px;
background: #202b43;
margin-bottom: 30px;
}
.left-panel .panel .title {
border-bottom: #25314c solid 1px;
padding-bottom: 20px;
margin-bottom: 30px;
}
.panel .title .icons {
width: 39px;
height: 39px;
float: left;
padding-right: 20px;
}
.left-panel .panel .content img {
float: left;
margin-right: 30px;
}
/*-------------------------------------------------
RIGHT-PANEL CLASSES
-------------------------------------------------*/
.right-panel {
width: 30%;
float: left;
}
.right-panel .panel {
border: #24314c solid 1px;
padding: 30px 30px 30px 30px;
background: #202b43;
margin-bottom: 30px;
overflow: auto;
}
.right-panel .panel .title {
border-bottom: #25314c solid 1px;
padding-bottom: 20px;
}
.right-panel .panel .content ul {
padding-left: 0px;
}
.right-panel .panel .content ul li {
list-style: url(../images/arrow-small.jpg) inside;
border-bottom: #25314c solid 1px;
line-height: 35px;
}
.right-panel .panel .content ul li a {
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #54657b;
}
.right-panel .panel .content ul li a:hover {
color: #1D88DEDD;
}
.right-panel .contact-panel {
background: #1D88DEDD;
padding: 30px 30px 30px 30px;
}
.contact-panel .title {
border-bottom: #1D88DEDD solid 1px;
padding-bottom: 20px;
}
.contact-panel .title h1 {
color: #1c263c;
}
.contact-panel .title h2 {
color: #1c263c;
}
.contact-panel .form {
padding-top: 5px;
}
.contact-panel .form ul {
padding-left: 0px;
}
.contact-panel .form ul li {
list-style: none;
padding-top: 14px;
}
.contact-panel .buttons {
background: #1c263c;
line-height: 30px;
text-align: center;
float: left;
margin-top: 20px;
}
.contact-panel .buttons:hover {
background: #91a3c2;
line-height: 30px;
}
.contact-panel .buttons a {
text-decoration: none;
color: #1D88DEDD;
}
.contact-panel .buttons a:hover {
color: #1c263c;
}
.search {
border-bottom: none;
margin-top: 20px
}
.search ul li {
list-style: none;
float: left;
border: none;
display: block;
}
.libg {
background: #91a3c2;
width: 180px;
text-indent: 5px;
}
.search-filed {
width: 180px;
height: 36px;
border: none;
float: left;
background: none repeat scroll 0 0 transparent;
text-indent: 5px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #fff;
}
.contact-panel.padding-bottm {
padding-bottom: 20px;
}
.address .panel {
border: none;
color: #91a3c2
}
.address .panel .title h1 {
color: #1D88DEDD;
padding-bottom: 10px;
}
.address .panel .content p {
color: #91a3c2;
}
.address .panel .content p span {
color: #91a3c2;
}
/*-------------------------------------------------
PORTFOLIO CLASSES
-------------------------------------------------*/
.portfolio {
overflow: hidden;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
.portfolio .title h2 {
font-size: 14px;
font-weight: normal;
padding-bottom: 20px;
margin-bottom: 30px;
padding-top: 10px;
}
.portfolio .panel {
max-width: 278px;
width: 100%;
border: none;
background: #202b43;
float: left;
margin-bottom: 30px;
border: #24314c solid 1px;
}
.portfolio .panel .content {
padding: 10px;
padding-bottom: 20px;
}
.portfolio .panel .content p {
padding-bottom: 20px;
}
.portfolio .panel .content p span {
padding-bottom: 10px;
border-bottom: 1px solid #24314c;
color: #1D88DEDD;
display: block;
}
.portfolio .panel .content a {
color: #1c263c;
background: #1D88DEDD;
padding: 7px;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 13px;
}
.portfolio .panel .content a:hover {
background: #91a3c2;
}
.portfolio .panel .content img {
padding-bottom: 10px;
}
/*-------------------------------------------------
FOOTER CLASSES
-------------------------------------------------*/
.footer-wrapper {
background: #333;
color: #fff;
padding: 40px 0;
margin-top: 60px;
}
.footer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.footer .title h1 {
color: #fff;
font-size: 1.5em;
margin-bottom: 10px;
}
.footer .title h2 {
color: #ccc;
font-size: 1em;
margin-bottom: 20px;
}
.footer a {
color: #fff;
text-decoration: none;
}
.footer a:hover {
color: #0056b3;
}
/* Responsive Design */
@media (max-width: 768px) {
/* Tailles de texte uniformes */
h1 {
font-size: 32px;
margin-bottom: 20px;
}
h2 {
font-size: 28px;
margin-bottom: 15px;
}
h3 {
font-size: 24px;
margin-bottom: 15px;
}
p, a {
font-size: 20px;
line-height: 1.6;
}
/* Logo */
.logo {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.logo img {
width: 100%;
max-width: 300px;
}
/* Navigation */
.menu {
width: 100%;
}
.menu ul {
background: rgba(49, 60, 83, 0.98);
}
.menu ul li a {
font-size: 20px;
padding: 20px;
display: block;
width: 100%;
text-align: center;
}
/* Footer réorganisé */
.footer {
display: flex;
flex-direction: column;
padding: 40px 20px;
}
.footer .panel {
margin-bottom: 40px;
text-align: center;
}
.footer .title h1 {
font-size: 32px;
}
.footer .title h2 {
font-size: 28px;
}
.footer .content p,
.footer .content a,
.footer .content h3 {
font-size: 20px;
line-height: 1.6;
margin-bottom: 15px;
}
.footer .panel.border-right {
border: none;
}
/* Ajustements contenu */
.services-hero .title h1,
.work-hero .title h1,
.values-hero .title h1,
.contact-hero .title h1 {
font-size: 32px;
}
.services-hero .title h2,
.work-hero .title h2,
.values-hero .title h2,
.contact-hero .title h2 {
font-size: 28px;
}
.service-content p,
.value-content p,
.timeline-text p,
.contact-form p {
font-size: 20px;
}
.service-features li,
.value-features li,
.timeline-features li {
font-size: 20px;
}
}
@media (max-width: 576px) {
/* Ajustements pour très petits écrans */
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 22px;
}
p, a {
font-size: 18px;
}
.menu ul li a {
font-size: 18px;
padding: 18px;
}
.footer .title h1 {
font-size: 28px;
}
.footer .title h2 {
font-size: 24px;
}
.footer .content p,
.footer .content a,
.footer .content h3 {
font-size: 18px;
}
.service-features li,
.value-features li,
.timeline-features li {
font-size: 18px;
}
}
/* Sections spécifiques */
.services-hero,
.values-hero,
.work-hero,
.contact-hero {
background: url('../images/banner-bg.jpg') no-repeat center center;
background-size: cover !important;
padding: 100px 0;
text-align: center;
color: #fff;
margin-bottom: 0px;
position: relative;
}
.services-hero:before,
.work-hero:before,
.values-hero:before,
.contact-hero:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.services-hero .title,
.work-hero .title,
.values-hero .title,
.contact-hero .title {
padding-top: 80px;
position: relative;
z-index: 1;
}
.services-hero .title h1,
.work-hero .title h1,
.values-hero .title h1,
.contact-hero .title h1 {
font-size: 3em;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
color: #1D88DEDD;
}
.services-hero .title h2,
.work-hero .title h2,
.values-hero .title h2,
.contact-hero .title h2 {
font-size: 1.4em;
font-weight: 300;
margin-bottom: 0;
color: #1D88DEDD;
}
.contact-info {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.info-item {
margin-bottom: 20px;
}
.info-item i {
font-size: 24px;
color: #0056b3;
margin-right: 10px;
}
.testimonials-section {
background: #f5f5f5;
padding: 60px 0;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.testimonial {
background: #fff;
padding: 25px;
border-radius: 8px;
text-align: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
margin: 15px;
}
.testimonial cite {
display: block;
margin-top: 20px;
color: #666;
font-style: italic;
}
/* Animations */
.fade-in,
.slide-in-left,
.slide-in-right,
.scale-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible,
.slide-in-left.visible,
.slide-in-right.visible,
.scale-in.visible {
opacity: 1;
transform: translateY(0);
}
.slide-in-left {
transform: translateX(-50px);
}
.slide-in-right {
transform: translateX(50px);
}
.scale-in {
transform: scale(0.9);
}
/* Boutons */
.cta-button,
.banner-button {
display: inline-block;
padding: 12px 30px;
background: #0056b3;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.cta-button:hover,
.banner-button:hover {
background: #003d82;
transform: translateY(-2px);
}
/* Grilles */
.values-grid,
.services-grid,
.work-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 40px 0;
}
/* Cartes */
.value-card {
background: #fff;
padding: 25px;
border-radius: 8px;
text-align: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
margin: 15px;
}
.value-card:hover {
transform: translateY(-5px);
}
.value-icon {
font-size: 2.5em;
color: #1D88DEDD;
margin-bottom: 15px;
}
.value-card h3 {
color: #333;
margin-bottom: 15px;
font-size: 1.2em;
}
.value-card p {
color: #666;
margin-bottom: 20px;
line-height: 1.5;
}
.value-features {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.value-features li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
color: #666;
font-size: 0.9em;
}
.value-features li:before {
content: "✓";
position: absolute;
left: 0;
color: #1D88DEDD;
}
.mission-section {
background-color: #f5f5f5;
margin-bottom: 80px;
text-align: center;
}
.mission-content {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.mission-content h2 {
color: #333;
font-size: 2.5em;
margin-bottom: 30px;
}
.mission-content p {
color: #666;
font-size: 1.2em;
line-height: 1.6;
}
.mission-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 30px;
}
.stat-item {
text-align: center;
padding: 15px;
background: #f5f5f5;
border-radius: 8px;
}
.stat-number {
display: block;
font-size: 2em;
color: #1D88DEDD;
font-weight: bold;
margin-bottom: 5px;
}
.stat-label {
color: #666;
font-size: 0.9em;
}
.mission-image {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.mission-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-section {
padding: 40px 0;
background-color: #f5f5f5;
}
.team-section .title {
text-align: center;
margin-bottom: 40px;
}
.team-section .title h1 {
font-size: 2em;
margin-bottom: 10px;
}
.team-section .title h2 {
font-size: 1.1em;
color: #666;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.team-member {
background: #fff;
padding: 25px;
border-radius: 8px;
text-align: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.member-image {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px;
border: 3px solid #1D88DEDD;
}
.member-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-member h3 {
color: #333;
margin-bottom: 5px;
font-size: 1.2em;
}
.team-member .position {
color: #1D88DEDD;
font-weight: bold;
margin-bottom: 10px;
}
.team-member .bio {
color: #666;
font-size: 0.9em;
line-height: 1.5;
}
@media (max-width: 768px) {
.mission-section .row {
grid-template-columns: 1fr;
}
.mission-stats {
grid-template-columns: 1fr;
}
.team-grid {
grid-template-columns: 1fr;
}
}
/* Styles pour la page Services */
.services-hero .title h1,
.work-hero .title h1 {
color: #1D88DEDD;
}
.services-hero .title h2,
.work-hero .title h2 {
color: #1D88DEDD;
}
.services-section {
padding: 40px 0;
background-color: #f5f5f5;
margin-bottom: 40px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.service-card {
background: #fff;
padding: 25px;
border-radius: 8px;
text-align: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
margin: 15px;
}
.service-card:hover {
transform: translateY(-5px);
}
.service-icon {
font-size: 2.5em;
color: #1D88DEDD;
margin-bottom: 15px;
}
.service-card h3 {
color: #333;
margin-bottom: 15px;
font-size: 1.2em;
}
.service-card p {
color: #666;
margin-bottom: 20px;
line-height: 1.5;
}
.service-features {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.service-features li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
color: #666;
font-size: 0.9em;
}
.service-features li:before {
content: "✓";
position: absolute;
left: 0;
color: #1D88DEDD;
}
.service-details-section {
padding: 40px 0;
margin-bottom: 40px;
}
.service-details-section .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.service-details-content {
padding: 20px;
}
.service-details-content h2 {
color: #333;
margin-bottom: 20px;
font-size: 1.8em;
}
.service-details-content p {
color: #666;
line-height: 1.6;
margin-bottom: 30px;
}
.service-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 30px;
}
.service-image {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cta-section {
padding: 60px 0;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../images/cta-bg.jpg');
background-size: cover;
background-position: center;
text-align: center;
color: #fff;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
padding: 0 15px;
}
.cta-content h2 {
font-size: 2em;
margin-bottom: 20px;
color: #125d99dd;
}
.cta-content p {
font-size: 1.1em;
margin-bottom: 30px;
}
.cta-button {
display: inline-block;
padding: 15px 30px;
background: #1D88DEDD;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: all 0.3s ease;
}
.cta-button:hover {
background: #fff;
color: #1D88DEDD;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.service-details-section .row {
grid-template-columns: 1fr;
}
.service-stats {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: 1fr;
}
}
/* Styles pour la nouvelle mise en page des services */
.services-showcase {
padding: 40px 0;
}
.service-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: center;
margin-bottom: 60px;
position: relative;
}
.service-feature:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, transparent, #1D88DEDD, transparent);
transform: translateX(-50%);
}
.service-feature.reverse {
direction: rtl;
}
.service-feature.reverse .service-content {
direction: ltr;
}
.service-content {
padding: 40px;
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
}
.service-content:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1D88DEDD, transparent);
border-radius: 15px;
opacity: 0.1;
z-index: -1;
}
.service-icon {
font-size: 3em;
color: #1D88DEDD;
margin-bottom: 20px;
text-align: center;
}
.service-content h3 {
color: #333;
font-size: 1.5em;
margin-bottom: 15px;
text-align: center;
}
.service-content p {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
text-align: center;
}
.service-features {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.service-features li {
position: relative;
padding-left: 25px;
color: #666;
font-size: 0.9em;
}
.service-features li:before {
content: "✓";
position: absolute;
left: 0;
color: #1D88DEDD;
}
.service-image {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.service-image:hover {
transform: scale(1.02);
}
.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.service-image:hover img {
transform: scale(1.05);
}
.service-stats-section {
padding: 60px 0;
background: linear-gradient(135deg, #1D88DEDD, #1c263c);
margin: 40px 0;
}
.stats-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.stat-item {
text-align: center;
padding: 30px 30px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-number {
display: block;
font-size: 3em;
color: #1D88DEDD;
font-weight: bold;
margin-bottom: 10px;
}
.stat-label {
color: #1D88DEDD;
opacity: 0.8;
font-size: 1.1em;
}
.cta-section {
padding: 80px 0;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../images/cta-bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
}
.cta-section:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1D88DEDD, transparent);
opacity: 0.3;
}
.cta-content {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
padding: 0 15px;
}
.cta-content h2 {
font-size: 2.5em;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.cta-content p {
font-size: 1.2em;
margin-bottom: 30px;
opacity: 0.9;
}
.cta-button {
display: inline-block;
padding: 15px 30px;
background: #fff;
color: #1D88DEDD;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.cta-button:hover {
background: #1D88DEDD;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.service-feature {
grid-template-columns: 1fr;
gap: 20px;
}
.service-feature:before {
display: none;
}
.service-feature.reverse {
direction: ltr;
}
.service-content {
padding: 30px;
}
.service-features {
grid-template-columns: 1fr;
}
.stats-container {
grid-template-columns: 1fr;
}
.cta-content h2 {
font-size: 2em;
}
}
/* Styles pour la page Travail */
.work-hero .title h1,
.contact-hero .title h1,
.values-hero .title h1 {
color: #1D88DEDD;
}
.work-hero .title h2,
.contact-hero .title h2,
.values-hero .title h2 {
color: #1D88DEDD;
}
.work-timeline {
padding: 80px 0;
position: relative;
}
.work-timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: #1D88DEDD;
transform: translateX(-50%);
}
.timeline-item {
margin-bottom: 60px;
position: relative;
}
.timeline-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
position: relative;
}
.timeline-icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: #1D88DEDD;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.timeline-icon i {
color: #fff;
font-size: 24px;
}
.timeline-text {
padding: 20px;
}
.timeline-text h3 {
color: #333;
font-size: 1.8em;
margin-bottom: 15px;
}
.timeline-text p {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.timeline-features {
list-style: none;
padding: 0;
margin: 0;
}
.timeline-features li {
color: #333;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.timeline-features li i {
color: #1D88DEDD;
margin-right: 10px;
}
.timeline-image {
position: relative;
overflow: hidden;
border-radius: 10px;
}
.timeline-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.timeline-item:hover .timeline-image img {
transform: scale(1.05);
}
.work-stats {
background-color: #f5f5f5;
padding: 80px 0;
margin-bottom: 80px;
}
.stats-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.stat-item {
text-align: center;
padding: 40px 40px 40px 40px;
background: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.stat-item:hover {
transform: translateY(-10px);
}
.stat-icon {
width: 80px;
height: 80px;
background: #1D88DEDD;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.stat-icon i {
color: #fff;
font-size: 32px;
}
.stat-item h3 {
color: #1D88DEDD;
font-size: 3em;
margin-bottom: 10px;
}
.stat-item p {
color: #666;
font-size: 1.2em;
}
.work-cta {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/cta-bg.jpg');
background-size: cover;
background-position: center;
padding: 80px 0;
text-align: center;
color: #fff;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.cta-content h2 {
font-size: 2.5em;
margin-bottom: 20px;
}
.cta-content p {
font-size: 1.2em;
margin-bottom: 30px;
}
.cta-button {
display: inline-block;
padding: 15px 40px;
background: #1D88DEDD;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-size: 1.2em;
transition: all 0.3s ease;
}
.cta-button:hover {
background: #1c263c;
transform: translateY(-3px);
}
@media (max-width: 992px) {
.work-timeline::before {
left: 30px;
}
.timeline-content {
grid-template-columns: 1fr;
}
.timeline-icon {
left: 30px;
transform: translateX(-50%);
}
.stats-container {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.work-hero {
padding: 60px 0;
}
.work-hero .title h1 {
font-size: 2.2em;
}
.timeline-content {
padding: 20px;
}
.stats-container {
grid-template-columns: 1fr;
}
.stat-item {
padding: 30px;
}
.cta-content h2 {
font-size: 2em;
}
}
/* Styles pour la page Valeurs */
.values-hero .title h1,
.values-hero .title h2 {
color: #1D88DEDD;
}
.values-showcase {
padding: 80px 0;
}
.value-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
margin-bottom: 80px;
}
.value-feature.reverse {
direction: rtl;
}
.value-feature.reverse .value-content {
direction: ltr;
}
.value-content {
padding: 40px;
background: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.value-icon {
font-size: 2.5em;
color: #1D88DEDD;
margin-bottom: 20px;
}
.value-content h3 {
color: #333;
font-size: 2em;
margin-bottom: 20px;
}
.value-content p {
color: #666;
line-height: 1.6;
margin-bottom: 25px;
font-size: 1.1em;
}
.value-features {
list-style: none;
padding: 0;
margin: 0;
}
.value-features li {
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
font-size: 1.1em;
}
.value-features li i {
color: #1D88DEDD;
margin-right: 10px;
}
.value-image {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.value-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.value-feature:hover .value-image img {
transform: scale(1.05);
}
.team-section {
padding: 80px 0;
text-align: center;
}
.team-section .title h1 {
color: #333;
font-size: 2.5em;
margin-bottom: 20px;
}
.team-section .title h2 {
color: #666;
font-size: 1.2em;
font-weight: 300;
margin-bottom: 40px;
}
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.team-member {
background: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.team-member:hover {
transform: translateY(-10px);
}
.member-image {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px;
}
.member-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-member h3 {
color: #333;
font-size: 1.5em;
margin-bottom: 10px;
}
.team-member .position {
color: #1D88DEDD;
font-size: 1.1em;
margin-bottom: 15px;
}
.team-member .bio {
color: #666;
line-height: 1.6;
}
@media (max-width: 992px) {
.value-feature {
grid-template-columns: 1fr;
gap: 30px;
}
.value-feature.reverse {
direction: ltr;
}
.value-image {
height: 400px;
}
.mission-stats {
grid-template-columns: 1fr 1fr;
}
.team-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.values-hero {
padding: 60px 0;
}
.values-hero .title h1 {
font-size: 2.2em;
}
.value-content {
padding: 20px;
}
.mission-stats {
grid-template-columns: 1fr;
}
.team-grid {
grid-template-columns: 1fr;
}
}
.contact-info-section {
padding: 60px 0;
background: #1c263c;
}
.contact-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.info-card {
background: #fff;
padding: 30px;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.info-card:hover {
transform: translateY(-5px);
}
.info-icon {
font-size: 2.5em;
color: #1D88DEDD;
margin-bottom: 20px;
}
.info-card h3 {
color: #333;
font-size: 1.2em;
margin-bottom: 15px;
}
.info-card p {
color: #666;
line-height: 1.6;
}
.contact-form-section {
padding: 60px 0;
}
.contact-form {
max-width: 600px;
margin: 0 auto;
padding: 40px;
background: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.contact-form h2 {
color: #333;
font-size: 2em;
margin-bottom: 20px;
text-align: center;
}
.contact-form p {
color: #666;
margin-bottom: 30px;
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1em;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: #1D88DEDD;
outline: none;
}
.submit-button {
background: #1D88DEDD;
color: #fff;
padding: 12px 30px;
border: none;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
transition: background 0.3s ease;
display: block;
margin: 0 auto;
}
.submit-button:hover {
background: #1c263c;
}
.map {
height: 400px;
margin-top: 60px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.faq-section {
padding: 60px 0;
background: #f5f5f5;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.faq-item {
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.faq-item h3 {
color: #333;
font-size: 1.2em;
margin-bottom: 15px;
}
.faq-item p {
color: #666;
line-height: 1.6;
}
@media (max-width: 768px) {
.contact-info-grid {
grid-template-columns: repeat(2, 1fr);
}
.faq-grid {
grid-template-columns: 1fr;
}
.contact-form {
padding: 20px;
}
}
.services-hero,
.work-hero,
.values-hero,
.contact-hero {
background: url('../images/banner-bg.jpg') no-repeat center center;
background-size: cover !important;
padding: 100px 0;
text-align: center;
color: #fff;
position: relative;
}
.services-showcase,
.work-timeline,
.values-showcase,
.contact-info-section,
.contact-form-section,
.faq-section,
.mission-section {
padding: 5% 5%;
margin-bottom: 60px;
}
/* Media Queries pour la responsivité */
@media (max-width: 1200px) {
.row {
padding: 0 20px;
max-width: 100%;
}
.banner-wrapper .banner {
width: 100%;
padding: 0 20px;
}
.banner-bg {
padding: 0 20px;
}
.banner-bg .panel {
width: 50%;
}
.banner-bg .banner-img {
width: 50%;
}
}
@media (max-width: 992px) {
/* Sections principales */
.services-showcase,
.work-timeline,
.values-showcase,
.contact-info-section,
.contact-form-section,
.faq-section,
.mission-section {
padding: 40px 20px;
}
/* Grilles et contenus */
.service-feature,
.value-feature,
.timeline-content {
grid-template-columns: 1fr;
gap: 30px;
}
.service-feature.reverse,
.value-feature.reverse {
direction: ltr;
}
/* Statistiques et informations */
.contact-info-grid,
.stats-container {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* Textes */
.title h1 {
font-size: 2em;
}
.title h2 {
font-size: 1.2em;
}
p {
font-size: 14px;
line-height: 1.6;
}
/* Bannière */
.banner-bg .panel .title h1 {
font-size: 28px;
}
.banner-bg .panel .content p {
font-size: 16px;
}
}
@media (max-width: 768px) {
/* Header et Navigation */
.header-home {
padding: 15px 0;
}
.logo {
width: 40%;
float: left;
}
.menu {
width: 60%;
margin-top: 0;
}
.menu ul {
flex-direction: column;
align-items: flex-end;
background: rgba(49, 60, 83, 0.95);
position: absolute;
top: 90px;
right: 0;
width: 200px;
padding: 10px;
border-radius: 0 0 10px 10px;
display: none;
}
.menu ul.show {
display: flex;
}
.menu ul li {
width: 100%;
margin: 5px 0;
}
/* Sections héros */
.services-hero,
.work-hero,
.values-hero,
.contact-hero {
padding: 40px 0;
}
.services-hero .title,
.work-hero .title,
.values-hero .title,
.contact-hero .title {
padding-top: 40px;
}
.services-hero .title h1,
.work-hero .title h1,
.values-hero .title h1,
.contact-hero .title h1 {
font-size: 1.8em;
margin-bottom: 10px;
}
.services-hero .title h2,
.work-hero .title h2,
.values-hero .title h2,
.contact-hero .title h2 {
font-size: 1em;
}
/* Bannière */
.banner-wrapper {
height: auto;
}
.banner-bg {
height: auto;
padding: 40px 20px;
}
.banner-bg .panel,
.banner-bg .banner-img {
width: 100%;
float: none;
}
.banner-bg .panel {
margin-bottom: 30px;
}
/* Grilles et contenus */
.contact-info-grid,
.stats-container,
.faq-grid,
.mission-stats {
grid-template-columns: 1fr;
gap: 20px;
}
/* Formulaire et carte */
.contact-form-section .row {
flex-direction: column;
}
.contact-form {
margin-right: 0;
margin-bottom: 30px;
}
.map {
width: 100%;
height: 400px !important;
}
/* Footer */
.footer {
grid-template-columns: 1fr;
gap: 30px;
padding: 40px 20px;
}
.footer .title h1 {
font-size: 1.3em;
}
.footer .title h2 {
font-size: 0.9em;
}
.footer .content p,
.footer .content a {
font-size: 0.9em;
}
}
@media (max-width: 576px) {
/* Header */
.logo {
width: 50%;
}
.menu {
width: 50%;
}
/* Textes */
.title h1 {
font-size: 1.6em;
}
.title h2 {
font-size: 0.9em;
}
p {
font-size: 13px;
}
/* Sections de contenu */
.service-content,
.value-content {
padding: 15px;
}
.service-content h3,
.value-content h3 {
font-size: 1.3em;
}
/* Statistiques */
.stat-item {
padding: 15px;
}
.stat-number {
font-size: 1.8em;
}
.stat-label {
font-size: 0.8em;
}
/* Formulaire */
.form-group input,
.form-group select,
.form-group textarea {
padding: 10px;
font-size: 0.9em;
}
.submit-button {
padding: 10px 20px;
font-size: 1em;
}
/* CTA */
.cta-button {
padding: 12px 25px;
font-size: 0.9em;
}
/* Boxes */
.boxs1, .boxs2, .boxs3 {
width: 100%;
padding: 30px 15px;
}
}
/* Ajout d'un bouton menu hamburger pour mobile */
.menu-toggle {
display: none;
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
padding: 10px;
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
position: absolute;
right: 20px;
top: 25px;
}
}
/*-------------------------------------------------
FOOTER MODERNE - STYLES SPÉCIFIQUES
-------------------------------------------------*/
/* Wrapper du footer */
.footer-wrapper {
background: linear-gradient(135deg, #1c263c 0%, #313c53 50%, #1c263c 100%);
color: #fff;
padding: 60px 0 40px;
margin-top: 80px;
position: relative;
overflow: hidden;
}
.footer-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #1D88DEDD, #91a3c2, #1D88DEDD);
background-size: 200% 100%;
animation: footerGradientShift 3s ease-in-out infinite;
}
@keyframes footerGradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Container du footer */
.footer {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
position: relative;
z-index: 2;
}
/* Panneaux du footer */
.footer-panel {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.footer-panel::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.footer-panel:hover::before {
left: 100%;
}
.footer-panel:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
border-color: rgba(29, 136, 222, 0.3);
}
/* Titres du footer */
.footer-title {
text-align: left;
margin-bottom: 25px;
position: relative;
}
.footer-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, #1D88DEDD, #91a3c2);
border-radius: 2px;
}
.footer-heading {
color: #fff !important;
font-size: 1.4em !important;
margin-bottom: 8px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
}
.footer-subheading {
color: #91a3c2 !important;
font-size: 0.95em !important;
margin-bottom: 0 !important;
font-weight: 400 !important;
opacity: 0.9 !important;
}
/* Contenu du footer */
.footer-content {
position: relative;
z-index: 1;
}
.footer-text {
color: #e0e0e0 !important;
line-height: 1.6 !important;
margin-bottom: 12px !important;
font-size: 0.95em !important;
transition: color 0.3s ease !important;
}
.footer-phone {
color: #1D88DEDD !important;
font-size: 1.1em !important;
margin-bottom: 8px !important;
font-weight: 600 !important;
}
/* Liens du footer */
.footer-link {
color: #e0e0e0 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
position: relative !important;
display: inline-block !important;
}
.footer-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #1D88DEDD, #91a3c2);
transition: width 0.3s ease;
}
.footer-link:hover {
color: #1D88DEDD !important;
transform: translateX(5px);
}
.footer-link:hover::after {
width: 100%;
}
/* Animation d'apparition */
.footer-panel {
animation: footerFadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(30px);
}
.footer-panel:nth-child(1) { animation-delay: 0.1s; }
.footer-panel:nth-child(2) { animation-delay: 0.2s; }
.footer-panel:nth-child(3) { animation-delay: 0.3s; }
@keyframes footerFadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design pour le footer */
@media (max-width: 768px) {
.footer-wrapper {
padding: 40px 0 30px;
margin-top: 60px;
}
.footer {
grid-template-columns: 1fr;
gap: 25px;
padding: 0 15px;
}
.footer-panel {
padding: 25px;
text-align: center;
}
.footer-title {
text-align: center;
}
.footer-title::after {
left: 50%;
transform: translateX(-50%);
}
.footer-heading {
font-size: 1.3em !important;
}
.footer-subheading {
font-size: 0.9em !important;
}
.footer-text,
.footer-phone {
font-size: 0.9em !important;
}
}
@media (max-width: 576px) {
.footer-wrapper {
padding: 30px 0 25px;
}
.footer-panel {
padding: 20px;
}
.footer-heading {
font-size: 1.2em !important;
}
.footer-subheading {
font-size: 0.85em !important;
}
.footer-text,
.footer-phone {
font-size: 0.85em !important;
}
}
/*-------------------------------------------------
BOXES DE SERVICES MODERNES - STYLES EXCLUSIFS
-------------------------------------------------*/
/* Container principal des boxes */
.modern-service-box {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: center;
width: 25%;
margin: 1.5%;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
position: relative;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease-out forwards;
}
.modern-service-box:nth-child(1) {
margin-left: 3%;
animation-delay: 0.2s;
}
.modern-service-box:nth-child(2) {
animation-delay: 0.4s;
}
.modern-service-box:nth-child(3) {
animation-delay: 0.6s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modern-service-box:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* Image des services */
.modern-service-img {
margin: 0;
padding: 30px 20px 20px;
width: 100%;
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.modern-service-img img {
width: 80px;
height: 80px;
object-fit: contain;
transition: transform 0.3s ease;
}
.modern-service-box:hover .modern-service-img img {
transform: scale(1.1);
}
/* Contenu des services */
.modern-service-content {
padding: 25px 30px 35px;
background: #fff;
}
/* Titre des services */
.modern-service-title {
color: #1D88DEDD !important;
font-size: 1.4em !important;
font-weight: 600 !important;
margin-bottom: 15px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.3 !important;
}
/* Description des services */
.modern-service-description {
color: #6c757d !important;
font-size: 0.95em !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
text-align: left !important;
}
/* Liste des fonctionnalités */
.modern-service-features {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
}
.modern-service-features li {
color: #495057 !important;
font-size: 0.9em !important;
margin-bottom: 8px !important;
padding-left: 20px !important;
position: relative !important;
line-height: 1.4 !important;
}
.modern-service-features li::before {
content: '✓' !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
color: #1D88DEDD !important;
font-weight: bold !important;
font-size: 0.8em !important;
}
@media (max-width: 768px) {
.modern-service-features li::before {
content: '' !important;
}
}
/* Couleurs spécifiques pour chaque box */
.boxs1.modern-service-box {
border-top: 4px solid #1D88DEDD;
}
.boxs2.modern-service-box {
border-top: 4px solid #91a3c2;
}
.boxs3.modern-service-box {
border-top: 4px solid #6c757d;
}
/* Responsive pour les boxes modernes */
@media (max-width: 992px) {
.modern-service-box {
width: calc(50% - 15px);
margin: 7.5px;
}
.modern-service-content {
padding: 20px 25px 30px;
}
.modern-service-title {
font-size: 1.3em !important;
}
.modern-service-description {
font-size: 0.9em !important;
}
}
@media (max-width: 768px) {
.modern-service-box {
margin-left: 6vw !important;
margin-right: 6vw !important;
width: 88vw !important;
max-width: 88vw !important;
box-sizing: border-box;
}
.modern-service-img,
.modern-service-content {
max-width: 100vw !important;
width: 100% !important;
box-sizing: border-box;
overflow-x: hidden;
}
}
@media (max-width: 576px) {
.modern-service-box {
margin: 4%;
}
.modern-service-img {
padding: 20px 10px 10px;
}
.modern-service-img img {
width: 60px;
height: 60px;
}
.modern-service-content {
padding: 15px 20px 20px;
}
.modern-service-title {
font-size: 1.1em !important;
}
.modern-service-description {
font-size: 0.85em !important;
}
.modern-service-features li {
font-size: 0.8em !important;
margin-bottom: 6px !important;
}
}
/*-------------------------------------------------
SECTION ENGAGEMENTS MODERNE - STYLES EXCLUSIFS
-------------------------------------------------*/
/* Section principale */
.modern-commitments-section {
background: linear-gradient(135deg, #1c263c 0%, #2a3856 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.modern-commitments-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
/* Titre de la section */
.modern-commitments-title {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.modern-commitments-heading {
color: #fff !important;
font-size: 2.5em !important;
font-weight: 700 !important;
margin-bottom: 15px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
position: relative;
}
.modern-commitments-heading::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1D88DEDD, #91a3c2);
border-radius: 2px;
}
.modern-commitments-subheading {
color: #91a3c2 !important;
font-size: 1.2em !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
/* Grille des engagements */
.modern-commitments-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
/* Cartes d'engagement */
.modern-commitment-card {
background: #fff;
border-radius: 16px;
padding: 40px 30px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease-out forwards;
}
.modern-commitment-card:nth-child(1) { animation-delay: 0.2s; }
.modern-commitment-card:nth-child(2) { animation-delay: 0.4s; }
.modern-commitment-card:nth-child(3) { animation-delay: 0.6s; }
.modern-commitment-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1D88DEDD, #91a3c2);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.modern-commitment-card:hover::before {
transform: scaleX(1);
}
.modern-commitment-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
/* Icônes des engagements */
.modern-commitment-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
transition: all 0.3s ease;
position: relative;
}
.modern-commitment-icon i {
font-size: 2em;
color: #fff;
transition: transform 0.3s ease;
}
.modern-commitment-card:hover .modern-commitment-icon {
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(29, 136, 222, 0.4);
}
.modern-commitment-card:hover .modern-commitment-icon i {
transform: rotate(360deg);
}
/* Titres des engagements */
.modern-commitment-title {
color: #1D88DEDD !important;
font-size: 1.4em !important;
font-weight: 600 !important;
margin-bottom: 15px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
/* Descriptions des engagements */
.modern-commitment-description {
color: #6c757d !important;
font-size: 1em !important;
line-height: 1.6 !important;
margin: 0 !important;
}
/* Responsive pour les engagements */
@media (max-width: 992px) {
.modern-commitments-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.modern-commitments-heading {
font-size: 2.2em !important;
}
.modern-commitment-card {
padding: 35px 25px;
}
}
@media (max-width: 768px) {
.modern-commitments-section {
padding: 60px 0;
}
.modern-commitments-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
.modern-commitments-heading {
font-size: 2em !important;
}
.modern-commitments-subheading {
font-size: 1.1em !important;
}
.modern-commitment-card {
padding: 30px 20px;
}
.modern-commitment-icon {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.modern-commitment-icon i {
font-size: 1.8em;
}
.modern-commitment-title {
font-size: 1.3em !important;
}
}
@media (max-width: 576px) {
.modern-commitments-section {
padding: 50px 0;
}
.modern-commitments-heading {
font-size: 1.8em !important;
}
.modern-commitments-subheading {
font-size: 1em !important;
}
.modern-commitment-card {
padding: 25px 15px;
}
.modern-commitment-icon {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.modern-commitment-icon i {
font-size: 1.5em;
}
.modern-commitment-title {
font-size: 1.2em !important;
}
.modern-commitment-description {
font-size: 0.95em !important;
}
}
@media (max-width: 768px) {
.modern-commitments-grid {
grid-template-columns: 1fr !important;
justify-items: center;
}
.modern-commitment-card {
max-width: 300px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.modern-commitment-card {
padding: 18px 8px;
border-radius: 22px;
}
.modern-commitments-grid {
padding: 0 4px;
}
}
/*-------------------------------------------------
SECTION WHY CHOOSE US - ICÔNES MODERNES
-------------------------------------------------*/
/* Styles pour les icônes dans les bulles */
.why-choose-us .icon-wrapper {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.3s ease;
position: relative;
box-shadow: 0 8px 20px rgba(29, 136, 222, 0.2);
}
.why-choose-us .icon-wrapper::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border-radius: 50%;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.why-choose-us .icon-wrapper i {
font-size: 2em;
color: #fff;
transition: all 0.3s ease;
}
.why-choose-us .reason:hover .icon-wrapper {
transform: scale(1.1);
box-shadow: 0 12px 25px rgba(29, 136, 222, 0.3);
}
.why-choose-us .reason:hover .icon-wrapper::before {
opacity: 1;
}
.why-choose-us .reason:hover .icon-wrapper i {
transform: rotate(360deg);
}
/* Animation d'apparition pour les raisons */
.why-choose-us .reason {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease-out forwards;
}
.why-choose-us .reason:nth-child(1) { animation-delay: 0.1s; }
.why-choose-us .reason:nth-child(2) { animation-delay: 0.2s; }
.why-choose-us .reason:nth-child(3) { animation-delay: 0.3s; }
.why-choose-us .reason:nth-child(4) { animation-delay: 0.4s; }
/* Responsive pour les icônes */
@media (max-width: 768px) {
.why-choose-us .icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.why-choose-us .icon-wrapper i {
font-size: 1.8em;
}
}
@media (max-width: 576px) {
.why-choose-us .icon-wrapper {
width: 60px;
height: 60px;
margin-bottom: 12px;
}
.why-choose-us .icon-wrapper i {
font-size: 1.5em;
}
}
/*-------------------------------------------------
SECTION CONTACT MODERNE - STYLES EXCLUSIFS
-------------------------------------------------*/
/* Section principale */
.modern-contact-section {
background: linear-gradient(135deg, #1c263c 0%, #2a3856 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.modern-contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
/* Container principal */
.modern-contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
/* Formulaire de contact */
.modern-contact-form {
background: #fff;
border-radius: 20px;
padding: 50px 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
animation: fadeInLeft 0.8s ease-out;
height: fit-content;
display: flex;
flex-direction: column;
}
.modern-contact-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1D88DEDD, #91a3c2);
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Titre du formulaire */
.modern-contact-title {
color: #1D88DEDD !important;
font-size: 2.5em !important;
font-weight: 700 !important;
margin-bottom: 15px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
position: relative;
}
.modern-contact-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #1D88DEDD, #91a3c2);
border-radius: 2px;
}
@media (max-width: 768px) {
.modern-contact-title::after {
left: 42%;
}
}
/* Sous-titre */
.modern-contact-subtitle {
color: #91a3c2 !important;
font-size: 1.2em !important;
font-weight: 400 !important;
margin-bottom: 10px !important;
line-height: 1.4 !important;
}
/* Description */
.modern-contact-description {
color: #6c757d !important;
font-size: 1em !important;
line-height: 1.6 !important;
margin-bottom: 35px !important;
}
/* Formulaire */
.modern-contact-form-element {
margin-top: 30px;
flex: 1;
display: flex;
flex-direction: column;
}
/* Groupes de champs */
.modern-form-group {
margin-bottom: 25px;
position: relative;
}
/* Champs de saisie */
.modern-form-input,
.modern-form-textarea {
width: 100%;
padding: 15px 20px;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 1em;
font-family: inherit;
background: #f8f9fa;
transition: all 0.3s ease;
box-sizing: border-box;
color: #495057;
}
.modern-form-input:focus,
.modern-form-textarea:focus {
outline: none;
border-color: #1D88DEDD;
background: #fff;
box-shadow: 0 0 0 3px rgba(29, 136, 222, 0.1);
transform: translateY(-2px);
}
.modern-form-input::placeholder,
.modern-form-textarea::placeholder {
color: #adb5bd;
font-style: italic;
}
.modern-form-textarea {
resize: vertical;
min-height: 120px;
}
/* Bouton d'envoi */
.modern-submit-button {
width: 100%;
background: linear-gradient(135deg, #1D88DEDD 0%, #91a3c2 100%);
border: none;
border-radius: 12px;
padding: 18px 30px;
font-size: 1.1em;
font-weight: 600;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 8px 20px rgba(29, 136, 222, 0.25);
margin-top: auto;
}
.modern-submit-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.modern-submit-button:hover::before {
left: 100%;
}
.modern-submit-button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(29, 136, 222, 0.35);
background: linear-gradient(135deg, #91a3c2 0%, #1D88DEDD 100%);
}
/* Carte Google Maps */
.modern-contact-map {
height: 100%;
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
position: relative;
animation: fadeInRight 0.8s ease-out 0.2s both;
margin-top: 0;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.modern-contact-map iframe {
border-radius: 20px;
transition: transform 0.3s ease;
width: 100%;
height: 100%;
}
.modern-contact-map:hover iframe {
transform: scale(1.02);
}
/* Responsive pour la section contact */
@media (max-width: 992px) {
.modern-contact-row {
grid-template-columns: 1fr;
gap: 40px;
}
.modern-contact-form {
padding: 40px 30px;
}
.modern-contact-title {
font-size: 2.2em !important;
}
}
@media (max-width: 768px) {
.modern-contact-section {
padding: 60px 0;
}
.modern-contact-row {
gap: 30px;
padding: 0 15px;
}
.modern-contact-form {
padding: 35px 25px;
}
.modern-contact-title {
font-size: 2em !important;
}
.modern-contact-subtitle {
font-size: 1.1em !important;
}
.modern-form-input,
.modern-form-textarea {
padding: 12px 15px;
font-size: 0.95em;
}
.modern-submit-button {
padding: 15px 25px;
font-size: 1em;
}
}
@media (max-width: 576px) {
.modern-contact-section {
padding: 50px 0;
}
.modern-contact-row {
gap: 25px;
padding: 0 10px;
}
.modern-contact-form {
padding: 30px 20px;
}
.modern-contact-title {
font-size: 1.8em !important;
}
.modern-contact-subtitle {
font-size: 1em !important;
}
.modern-contact-description {
font-size: 0.95em !important;
}
.modern-form-input,
.modern-form-textarea {
padding: 10px 12px;
font-size: 0.9em;
}
.modern-submit-button {
padding: 12px 20px;
font-size: 0.95em;
}
}
/*-------------------------------------------------
BURGER MENU ET BACK TO TOP - STYLES MODERNES
-------------------------------------------------*/
/* Burger Menu - Visible uniquement en mobile */
.burger-menu {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 10px;
position: relative;
z-index: 1000;
transition: all 0.3s ease;
}
.burger-menu span {
display: block;
width: 25px;
height: 3px;
background: #fff;
margin: 5px 0;
transition: all 0.3s ease;
border-radius: 2px;
}
.burger-menu:hover span {
background: #1D88DEDD;
}
.burger-menu.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.burger-menu.active span:nth-child(2) {
opacity: 0;
}
.burger-menu.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Animation du menu desktop */
.menu {
transition: all 0.4s ease;
}
.menu ul {
transition: all 0.4s ease;
}
.menu ul li {
transition: all 0.3s ease;
opacity: 1;
transform: translateY(0);
}
/* Animation d'apparition du menu desktop */
@keyframes menuFadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.menu ul li {
animation: menuFadeIn 0.5s ease forwards;
}
.menu ul li:nth-child(1) { animation-delay: 0.1s; }
.menu ul li:nth-child(2) { animation-delay: 0.2s; }
.menu ul li:nth-child(3) { animation-delay: 0.3s; }
.menu ul li:nth-child(4) { animation-delay: 0.4s; }
.menu ul li:nth-child(5) { animation-delay: 0.5s; }
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border: none;
border-radius: 50%;
color: #fff;
font-size: 20px;
cursor: pointer;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(29, 136, 222, 0.3);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: linear-gradient(135deg, #91a3c2, #1D88DEDD);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(29, 136, 222, 0.4);
}
.back-to-top:active {
transform: translateY(-1px);
}
.back-to-top i {
transition: transform 0.3s ease;
}
.back-to-top:hover i {
transform: translateY(-2px);
}
/* Responsive pour le burger menu */
@media (max-width: 768px) {
.burger-menu {
display: block;
position: absolute;
right: 20px;
top: 25px;
}
.menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
background: rgba(28, 38, 60, 0.95);
backdrop-filter: blur(10px);
transition: left 0.4s ease;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
.menu.active {
left: 0;
}
.menu ul {
flex-direction: column;
align-items: center;
gap: 30px;
}
.menu ul li {
opacity: 0;
transform: translateY(30px);
transition: all 0.4s ease;
}
.menu.active ul li {
opacity: 1;
transform: translateY(0);
}
.menu.active ul li:nth-child(1) { transition-delay: 0.2s; }
.menu.active ul li:nth-child(2) { transition-delay: 0.3s; }
.menu.active ul li:nth-child(3) { transition-delay: 0.4s; }
.menu.active ul li:nth-child(4) { transition-delay: 0.5s; }
.menu.active ul li:nth-child(5) { transition-delay: 0.6s; }
.menu ul li a {
font-size: 1.2em;
padding: 15px 25px;
border-radius: 25px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.menu ul li a:hover {
background: rgba(29, 136, 222, 0.3);
transform: scale(1.05);
}
}
/* Responsive pour le back to top */
@media (max-width: 576px) {
.back-to-top {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
font-size: 18px;
}
}
/*-------------------------------------------------
PAGE CONTACT MODERNE - STYLES AMÉLIORÉS
-------------------------------------------------*/
/* Section Hero Contact */
.contact-hero-section {
background: linear-gradient(135deg, #1c263c 0%, #2a3856 100%);
padding: 80px 0;
position: relative;
}
.contact-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.contact-hero-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.contact-hero-text {
color: #fff;
}
.contact-hero-title {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(90deg, #fff, #1D88DEDD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contact-hero-subtitle {
font-size: 1.4em;
font-weight: 400;
margin-bottom: 20px;
color: #91a3c2;
}
.contact-hero-description {
font-size: 1.1em;
line-height: 1.6;
color: #e0e0e0;
margin-bottom: 0;
}
.contact-hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.contact-hero-icon {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 40px rgba(29, 136, 222, 0.3);
animation: pulse 2s ease-in-out infinite;
}
.contact-hero-icon i {
font-size: 3em;
color: #fff;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Section Informations de Contact */
.contact-info-section {
padding: 80px 0;
background: #f8f9fa;
}
.contact-info-header {
text-align: center;
margin-bottom: 60px;
}
.contact-info-header h2 {
font-size: 2.5em;
color: #1D88DEDD;
margin-bottom: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-info-header p {
font-size: 1.2em;
color: #6c757d;
margin: 0;
}
.contact-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.info-card {
background: #fff;
border-radius: 16px;
padding: 40px 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1D88DEDD, #91a3c2);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.info-card:hover::before {
transform: scaleX(1);
}
.info-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.info-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
transition: all 0.3s ease;
}
.info-icon i {
font-size: 1em;
color: #fff;
transition: transform 0.3s ease;
}
.info-card:hover .info-icon {
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(29, 136, 222, 0.3);
}
.info-card:hover .info-icon i {
transform: rotate(360deg);
}
.info-content h3 {
color: #1D88DEDD;
font-size: 1.4em;
font-weight: 600;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-content p {
color: #6c757d;
font-size: 1em;
line-height: 1.6;
margin-bottom: 20px;
}
.info-link {
color: #1D88DEDD;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
position: relative;
}
.info-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #1D88DEDD;
transition: width 0.3s ease;
}
.info-link:hover {
color: #91a3c2;
transform: translateX(5px);
}
.info-link:hover::after {
width: 100%;
}
.info-status {
background: linear-gradient(135deg, #28a745, #20c997);
color: #fff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9em;
font-weight: 600;
display: inline-block;
}
/* Section Formulaire et Carte */
.contact-main-section {
padding: 80px 0;
background: #fff;
}
.contact-main-container {
max-width: 90%;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 120px;
align-items: start;
}
/* Formulaire de Contact */
.contact-form-container {
width: 100%;
background: #f8f9fa;
border-radius: 20px;
padding: 50px 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.contact-form-container {
width: fit-content;
}
}
.contact-form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1D88DEDD, #91a3c2);
}
.contact-form-header {
margin-bottom: 40px;
}
.contact-form-header h2 {
color: #1D88DEDD;
font-size: 2.2em;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-form-header p {
color: #6c757d;
font-size: 1.1em;
line-height: 1.6;
margin: 0;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 25px;
}
.form-row {
width: fit-content;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
color: #495057;
font-weight: 600;
margin-bottom: 8px;
font-size: 0.95em;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 90%;
padding: 15px 20px;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 1em;
font-family: inherit;
background: #fff;
transition: all 0.3s ease;
color: #495057;
}
@media (max-width: 768px) {
.form-group input,
.form-group select,
.form-group textarea {
width: auto !important;
}
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #1D88DEDD;
box-shadow: 0 0 0 3px rgba(29, 136, 222, 0.1);
transform: translateY(-2px);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #adb5bd;
font-style: italic;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
width: 90%;
}
.form-actions {
margin-top: 20px;
}
.submit-button {
width: 100%;
background: linear-gradient(135deg, #1D88DEDD 0%, #91a3c2 100%);
border: none;
border-radius: 12px;
padding: 18px 30px;
font-size: 1.1em;
font-weight: 600;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 8px 20px rgba(29, 136, 222, 0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.submit-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.submit-button:hover::before {
left: 100%;
}
.submit-button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(29, 136, 222, 0.35);
background: linear-gradient(135deg, #91a3c2 0%, #1D88DEDD 100%);
}
.submit-button i {
font-size: 1.1em;
}
/* Carte Google Maps */
.contact-map-container {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
height: 100%;
}
.map-header {
color: #fff;
padding: 30px;
text-align: center;
}
.map-header h3 {
font-size: 1.8em;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.map-header p {
font-size: 1.1em;
margin: 0;
opacity: 0.9;
}
.map-wrapper {
height: 70%;
position: relative;
}
.map-wrapper iframe {
width: 100%;
height: 100%;
border: none;
transition: transform 0.3s ease;
}
.contact-map-container:hover .map-wrapper iframe {
transform: scale(1.02);
}
.map-info {
background: #f8f9fa;
padding: 25px 30px;
display: flex;
justify-content: space-around;
gap: 20px;
}
.map-info-item {
display: flex;
align-items: center;
gap: 10px;
color: #495057;
font-weight: 600;
}
.map-info-item i {
color: #1D88DEDD;
font-size: 1.2em;
}
/* Section FAQ */
.faq-section {
padding: 80px 0;
background: linear-gradient(135deg, #1c263c 0%, #2a3856 100%);
color: #fff;
}
.faq-header {
text-align: center;
margin-bottom: 60px;
}
.faq-header h2 {
font-size: 2.5em;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
}
.faq-header p {
font-size: 1.2em;
color: #91a3c2;
margin: 0;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.faq-item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.faq-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
.faq-question h3 {
color: #fff;
font-size: 1.3em;
font-weight: 600;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
}
.faq-question h3 i {
color: #1D88DEDD;
font-size: 1.2em;
}
.faq-answer p {
color: #e0e0e0;
line-height: 1.6;
margin: 0;
}
/* Responsive Design */
@media (max-width: 992px) {
.contact-hero-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.contact-hero-title {
font-size: 3em;
}
.contact-main-container {
grid-template-columns: 1fr;
gap: 40px;
}
.form-row {
grid-template-columns: 1fr;
width: auto;
}
.faq-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.contact-hero-section {
padding: 60px 0;
}
.contact-hero-title {
font-size: 2.5em;
}
.contact-hero-subtitle {
font-size: 1.2em;
}
.contact-info-section,
.contact-main-section,
.faq-section {
padding: 60px 0;
}
.contact-info-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
.contact-form-container {
padding: 35px 25px;
}
.map-info {
flex-direction: column;
gap: 15px;
}
.contact-hero-content,
.contact-main-container {
padding: 0 15px;
}
}
@media (max-width: 576px) {
.contact-hero-title {
font-size: 2em;
}
.contact-hero-subtitle {
font-size: 1.1em;
}
.contact-hero-description {
font-size: 1em;
}
.contact-hero-icon {
width: 100px;
height: 100px;
}
.contact-hero-icon i {
font-size: 2.5em;
}
.contact-form-container {
padding: 25px 20px;
}
.contact-form-header h2 {
font-size: 1.8em;
}
.map-header {
padding: 20px;
}
.map-header h3 {
font-size: 1.5em;
}
.map-wrapper {
height: 300px;
}
}
/*-------------------------------------------------
PAGE WORK MODERNE - STYLES AMÉLIORÉS
-------------------------------------------------*/
/* Section Hero Work */
.work-hero-section {
background: linear-gradient(135deg, #1c263c 0%, #2a3856 100%);
padding: 80px 0;
position: relative;
}
.work-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.work-hero-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.work-hero-text {
color: #fff;
}
.work-hero-title {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(90deg, #fff, #1D88DEDD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.work-hero-subtitle {
font-size: 1.4em;
font-weight: 400;
margin-bottom: 20px;
color: #91a3c2;
}
.work-hero-description {
font-size: 1.1em;
line-height: 1.6;
color: #e0e0e0;
margin-bottom: 0;
}
.work-hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.work-hero-icon {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 40px rgba(29, 136, 222, 0.3);
animation: pulse 2s ease-in-out infinite;
}
.work-hero-icon i {
font-size: 3em;
color: #fff;
}
/* Responsive Design pour Work Hero */
@media (max-width: 992px) {
.work-hero-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.work-hero-title {
font-size: 3em;
}
}
@media (max-width: 768px) {
.work-hero-section {
padding: 60px 0;
}
.work-hero-title {
font-size: 2.5em;
}
.work-hero-subtitle {
font-size: 1.2em;
}
.work-hero-content {
padding: 0 15px;
}
}
@media (max-width: 576px) {
.work-hero-title {
font-size: 2em;
}
.work-hero-subtitle {
font-size: 1.1em;
}
.work-hero-description {
font-size: 1em;
}
.work-hero-icon {
width: 100px;
height: 100px;
}
.work-hero-icon i {
font-size: 2.5em;
}
}
/*-------------------------------------------------
PAGE SERVICES ET VALEURS - STYLES AMÉLIORÉS
-------------------------------------------------*/
/* Section Hero Services */
.services-hero-section {
background: linear-gradient(135deg, #1c263c 0%, #2a3856 100%);
padding: 80px 0;
position: relative;
}
.services-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.services-hero-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.services-hero-text {
color: #fff;
}
.services-hero-title {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(90deg, #fff, #1D88DEDD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.services-hero-subtitle {
font-size: 1.4em;
font-weight: 400;
margin-bottom: 20px;
color: #91a3c2;
}
.services-hero-description {
font-size: 1.1em;
line-height: 1.6;
color: #e0e0e0;
margin-bottom: 0;
}
.services-hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.services-hero-icon {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 40px rgba(29, 136, 222, 0.3);
animation: pulse 2s ease-in-out infinite;
}
.services-hero-icon i {
font-size: 3em;
color: #fff;
}
/* Section Hero Values */
.values-hero-section {
background: linear-gradient(135deg, #1c263c 0%, #2a3856 100%);
padding: 80px 0;
position: relative;
}
.values-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.values-hero-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.values-hero-text {
color: #fff;
}
.values-hero-title {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(90deg, #fff, #1D88DEDD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.values-hero-subtitle {
font-size: 1.4em;
font-weight: 400;
margin-bottom: 20px;
color: #91a3c2;
}
.values-hero-description {
font-size: 1.1em;
line-height: 1.6;
color: #e0e0e0;
margin-bottom: 0;
}
.values-hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.values-hero-icon {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #1D88DEDD, #91a3c2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 40px rgba(29, 136, 222, 0.3);
animation: pulse 2s ease-in-out infinite;
}
.values-hero-icon i {
font-size: 3em;
color: #fff;
}
/* Responsive Design pour Services et Values Hero */
@media (max-width: 992px) {
.services-hero-content,
.values-hero-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.services-hero-title,
.values-hero-title {
font-size: 3em;
}
}
@media (max-width: 768px) {
.services-hero-section,
.values-hero-section {
padding: 60px 0;
}
.services-hero-title,
.values-hero-title {
font-size: 2.5em;
}
.services-hero-subtitle,
.values-hero-subtitle {
font-size: 1.2em;
}
.services-hero-content,
.values-hero-content {
padding: 0 15px;
}
}
@media (max-width: 576px) {
.services-hero-title,
.values-hero-title {
font-size: 2em;
}
.services-hero-subtitle,
.values-hero-subtitle {
font-size: 1.1em;
}
.services-hero-description,
.values-hero-description {
font-size: 1em;
}
.services-hero-icon,
.values-hero-icon {
width: 100px;
height: 100px;
}
.services-hero-icon i,
.values-hero-icon i {
font-size: 2.5em;
}
}
/* Section Contact - Visible par défaut */
.modern-contact-section.fade-in {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Section principale */
.modern-contact-section {
}
/* Optimisations spécifiques pour mobile - Hero Section */
@media (max-width: 768px) {
/* Optimisations de performance pour mobile */
.banner-wrapper {
min-height: 60vh; /* Hauteur réduite pour mobile */
background-attachment: scroll; /* Évite le parallax sur mobile pour de meilleures performances */
}
.banner .banner-bg {
background-size: cover;
background-position: center;
background-attachment: scroll; /* Performance mobile */
min-height: 60vh;
}
.banner-content {
padding: 2rem 1.5rem; /* Padding réduit pour mobile */
max-width: 100%; /* Utilise toute la largeur disponible */
margin: 0 auto;
backdrop-filter: blur(8px); /* Effet de flou réduit pour les performances */
-webkit-backdrop-filter: blur(8px);
border-radius: 12px; /* Bordures plus petites */
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
animation: none; /* Désactive les animations pour de meilleures performances */
}
.banner-content .title h1 {
font-size: 1.8rem; /* Taille réduite pour mobile */
line-height: 1.3;
margin-bottom: 0.8rem;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: none; /* Désactive l'animation */
}
.banner-content .title h1::after {
width: 60px; /* Ligne décorative plus petite */
height: 2px;
margin: 0.8rem auto 0;
background: linear-gradient(90deg, transparent, #1D88DE, transparent);
animation: none; /* Désactive l'animation */
}
.banner-content .title h2 {
font-size: 1rem; /* Taille réduite */
line-height: 1.4;
margin-bottom: 1rem;
color: #e0e0e0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
animation: none; /* Désactive l'animation */
}
.banner-content .content p {
font-size: 0.9rem; /* Taille réduite */
line-height: 1.5;
margin-bottom: 1.5rem;
color: #d0d0d0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
animation: none; /* Désactive l'animation */
}
.banner-button {
display: inline-block;
padding: 0.8rem 1.5rem; /* Padding réduit */
background: linear-gradient(135deg, #1D88DE, #0056b3);
border-radius: 25px;
text-decoration: none;
transition: all 0.3s ease;
border: none;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(29, 136, 222, 0.3);
animation: none; /* Désactive l'animation */
/* Optimisation pour le touch */
min-height: 44px; /* Taille minimale recommandée pour le touch */
min-width: 44px;
}
.banner-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.banner-button:hover::before {
left: 100%;
}
.banner-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(29, 136, 222, 0.4);
background: linear-gradient(135deg, #0056b3, #1D88DE);
}
.banner-button-link {
color: #ffffff;
font-size: 0.9rem; /* Taille réduite */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
z-index: 1;
}
}
/* Optimisations pour très petits écrans */
@media (max-width: 480px) {
.banner-wrapper {
min-height: 50vh; /* Hauteur encore plus réduite */
}
.banner .banner-bg {
min-height: 50vh;
}
.banner-content {
padding: 1.5rem 1rem; /* Padding encore plus réduit */
margin: 0 0.5rem; /* Marge latérale */
border-radius: 8px; /* Bordures plus petites */
}
.banner-content .title h1 {
font-size: 1.5rem; /* Taille encore plus réduite */
line-height: 1.2;
margin-bottom: 0.6rem;
}
.banner-content .title h1::after {
width: 50px; /* Ligne encore plus petite */
height: 2px;
margin: 0.6rem auto 0;
}
.banner-content .title h2 {
font-size: 0.9rem; /* Taille encore plus réduite */
line-height: 1.3;
margin-bottom: 0.8rem;
}
.banner-content .content p {
font-size: 0.85rem; /* Taille encore plus réduite */
line-height: 1.4;
margin-bottom: 1.2rem;
}
.banner-button {
padding: 0.7rem 1.2rem; /* Padding encore plus réduit */
border-radius: 20px;
min-height: 40px;
}
.banner-button-link {
font-size: 0.85rem; /* Taille encore plus réduite */
letter-spacing: 0.3px;
}
}
/* Optimisations pour l'orientation paysage sur mobile */
@media (max-width: 768px) and (orientation: landscape) {
.banner-wrapper {
min-height: 40vh; /* Hauteur réduite en mode paysage */
}
.banner .banner-bg {
min-height: 40vh;
}
.banner-content {
padding: 1rem 1.5rem; /* Padding horizontal plus important */
}
.banner-content .title h1 {
font-size: 1.4rem; /* Taille adaptée au mode paysage */
margin-bottom: 0.5rem;
}
.banner-content .title h2 {
font-size: 0.9rem;
margin-bottom: 0.8rem;
}
.banner-content .content p {
font-size: 0.8rem;
margin-bottom: 1rem;
}
}
/* Optimisations pour les écrans haute densité (Retina) */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
(max-width: 768px) and (min-resolution: 192dpi) {
.banner .banner-bg {
background-size: cover;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
/* Optimisations pour les appareils avec écran tactile */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
.banner-button {
/* Optimisations spécifiques pour le touch */
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.banner-button:active {
transform: scale(0.98); /* Feedback tactile */
transition: transform 0.1s ease;
}
.banner-button:hover {
transform: none; /* Désactive le hover sur les appareils tactiles */
}
}
/* Optimisations pour les appareils à faible bande passante */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
.banner-content,
.banner-content .title h1,
.banner-content .title h2,
.banner-content .content p,
.banner-button {
animation: none !important;
transition: none !important;
}
.banner-button::before {
display: none; /* Supprime l'effet de brillance */
}
}
@media (max-width: 768px) {
html, body {
max-width: 100vw;
overflow-x: hidden;
}
.banner-wrapper,
.banner,
.banner .banner-bg,
.banner-content {
max-width: 100vw !important;
width: 100% !important;
box-sizing: border-box;
overflow-x: hidden;
}
/* Supprime tout padding/marge latérale qui pourrait causer un débordement */
.banner-content {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Corrige le row si besoin */
.banner-wrapper .row {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100vw !important;
width: 100% !important;
box-sizing: border-box;
}
}
@media (max-width: 480px) {
html, body {
max-width: 100vw;
overflow-x: hidden;
}
.banner-wrapper,
.banner,
.banner .banner-bg,
.banner-content {
max-width: 100vw !important;
width: 100% !important;
box-sizing: border-box;
overflow-x: hidden;
}
.banner-content {
margin-left: 0 !important;
margin-right: 0 !important;
}
.banner-wrapper .row {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100vw !important;
width: 100% !important;
box-sizing: border-box;
}
}
@media (max-width: 768px) {
.modern-service-box,
.modern-service-img,
.modern-service-content {
max-width: 100vw !important;
box-sizing: border-box;
overflow-x: hidden;
}
.modern-service-content {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.modern-service-img {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (max-width: 480px) {
.modern-service-box,
.modern-service-img,
.modern-service-content {
max-width: 100vw !important;
box-sizing: border-box;
overflow-x: hidden;
}
.modern-service-content {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.modern-service-img {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* Nettoyage responsive mobile */
@media (max-width: 768px) {
/* Banner */
.banner-wrapper,
.banner,
.banner .banner-bg {
width: 100%;
max-width: 100vw;
box-sizing: border-box;
margin: 0 auto;
overflow-x: hidden;
}
.banner-content {
width: 92vw;
max-width: 92vw;
margin: 0 auto;
box-sizing: border-box;
padding-left: 0;
padding-right: 0;
}
.banner-wrapper .row {
width: 100%;
max-width: 100vw;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Modern service box */
.modern-service-box {
margin-left: 6vw;
margin-right: 6vw;
width: 88vw;
max-width: 88vw;
box-sizing: border-box;
}
.modern-service-img,
.modern-service-content {
width: 100%;
box-sizing: border-box;
margin: 0;
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}
}
@media (max-width: 480px) {
.banner-content {
width: 98vw;
max-width: 98vw;
margin: 0 auto;
box-sizing: border-box;
}
.modern-service-box {
margin-left: 3vw;
margin-right: 3vw;
width: 94vw;
max-width: 94vw;
box-sizing: border-box;
}
}
@media (max-width: 768px) {
.banner-content {
padding: 2.2rem 1.2rem 2.2rem 1.2rem;
}
.banner-button {
padding: 0.7rem 0.6rem;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.banner-button-link {
font-size: 0.92rem;
padding: 0;
width: 100%;
text-align: center;
line-height: 1.2;
display: block;
}
}
@media (max-width: 480px) {
.banner-content {
padding: 1.5rem 1rem 1.5rem 1rem;
}
.banner-button {
padding: 0.6rem 0.4rem;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.banner-button-link {
font-size: 0.88rem;
padding: 0;
width: 100%;
text-align: center;
line-height: 1.2;
display: block;
}
}
@media (max-width: 768px) {
.logo {
display: none !important;
}
}
@media (max-width: 768px) {
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, .content, .title, .modern-service-title, .modern-service-description, .modern-service-features, .modern-commitment-title, .modern-commitment-description, .modern-commitments-heading, .modern-commitments-subheading, .footer, .footer-panel, .footer-title, .footer-heading, .footer-subheading, .footer-text, .footer-link, .why-choose-us, .why-choose-us .title, .why-choose-us .reason, .why-choose-us .reason h3, .why-choose-us .reason p, .cta-intermediate, .cta-content, .cta-content h1, .cta-content h2, .cta-content p, .contact-form, .contact-form-header, .contact-form-header h2, .contact-form-header p, .info-card, .info-card h3, .info-card p, .faq-item, .faq-question h3, .faq-answer p {
text-align: center !important;
}
}
@media (max-width: 768px) {
.mobile-burger {
position: fixed;
top: 18px; right: 18px;
z-index: 1201;
background: none; border: none;
display: flex; flex-direction: column; gap: 5px;
width: 38px; height: 38px;
justify-content: center; align-items: center;
cursor: pointer;
padding: 0;
transition: background 0.2s;
}
.mobile-burger span {
display: block;
width: 28px; height: 3.5px;
background: #1D88DEDD;
border-radius: 2px;
transition: all 0.3s;
}
.mobile-burger.open span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.mobile-burger.open span:nth-child(2) {
opacity: 0;
}
.mobile-burger.open span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.mobile-slide-menu {
position: fixed;
top: 0; left: 0; right: 0;
height: 0;
background: #202b43;
z-index: 1200;
overflow: hidden;
transition: height 0.35s cubic-bezier(.77,0,.18,1);
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
display: flex; flex-direction: column; align-items: center;
}
.mobile-slide-menu.open {
height: 55vh;
}
.mobile-slide-menu .mobile-close {
background: none; border: none; color: #fff;
font-size: 2.2em;
position: absolute; top: 18px; right: 18px;
cursor: pointer;
z-index: 1;
}
.mobile-slide-menu ul {
list-style: none; padding: 0; margin: 80px 0 0 0;
width: 100%;
display: flex; flex-direction: column; gap: 32px;
align-items: center;
}
.mobile-slide-menu ul li a {
color: #fff;
font-size: 1.3em;
text-decoration: none;
padding: 14px 0;
display: block;
width: 100vw;
text-align: center;
transition: background 0.2s;
}
.mobile-slide-menu ul li a:hover {
background: rgba(29,136,222,0.10);
}
/* Cache l'ancien menu sur mobile */
.header-home .menu {
display: none !important;
}
}
@media (max-width: 768px) {
.mobile-slide-menu {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 320px;
max-height: 90vh;
border-radius: 0 0 18px 18px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
background: #202b43;
overflow-y: auto;
z-index: 1200;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-bottom: 0;
}
.mobile-slide-menu.open {
display: flex;
animation: slideDownMenu 0.3s cubic-bezier(.77,0,.18,1) ;
}
@keyframes slideDownMenu {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.mobile-slide-menu ul {
list-style: none;
padding: 0;
margin: 80px 0 0 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.mobile-slide-menu ul li a {
color: #1D88DE;
font-size: 1em;
text-decoration: none;
padding: 10px 0;
display: block;
width: 80vw;
max-width: 260px;
margin: 0 auto;
background: #f5f7fa;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(29,136,222,0.06);
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
font-weight: 600;
letter-spacing: 0.5px;
}
.mobile-slide-menu ul li a:hover {
background: #e3f0fa;
color: #0056b3;
box-shadow: 0 4px 16px rgba(29,136,222,0.12);
}
.mobile-slide-menu .mobile-close {
z-index: 1;
}
}
@media (max-width: 768px) {
.mobile-slide-menu.open {
display: flex;
animation: slideDownMenu 0.3s cubic-bezier(.77,0,.18,1);
}
.mobile-slide-menu.closing {
display: flex;
animation: slideUpMenu 0.3s cubic-bezier(.77,0,.18,1);
}
@keyframes slideDownMenu {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slideUpMenu {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-100%); opacity: 0; }
}
}
/* Masquer le menu mobile et le burger par défaut */
.mobile-burger, .mobile-slide-menu {
display: none;
visibility: hidden;
pointer-events: none;
}
@media (max-width: 767px) {
.mobile-burger {
display: block;
visibility: visible;
pointer-events: auto;
}
/* Le menu mobile s'affiche seulement avec .open ou .closing */
.mobile-slide-menu.open, .mobile-slide-menu.closing {
display: flex;
visibility: visible;
pointer-events: auto;
}
}