@charset "UTF-8";
@import url(main.css);
/*-----------------------------------------couleur texte recherche fréquente header-----------------------------------------*/
a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { color: #0169B4 !important; font-weight: 500px !important; font-family: 'Oswald', sans-serif; font-size: 19.2px !important; }

/*-----------------------------------------couleur bloc seo-----------------------------------------*/
.text-color-primary { color: #312784 !important; }

/*-----------------------------------------enlever flèche video accueil-----------------------------------------*/
lottie-player.lottie-scroll { display: none !important; }

/*-------------------------------------------ancrage presta-------------------------------------------*/
#prestation { scroll-margin-top: -10px; }

/*-------------------------------------------ancrage real-------------------------------------------*/
#real { scroll-margin-top: 50px; }

/*-------------------------------------------ancrage brulon-------------------------------------------*/
#brulon { scroll-margin-top: 80px !important; }

/*-------------------------------------------ancrage conlie-------------------------------------------*/
#conlie { scroll-margin-top: 80px !important; }

/*-------------------------------------------ancrage poille-------------------------------------------*/
#poille { scroll-margin-top: 80px !important; }

/*-----------------------------------------puce couleur image droite-----------------------------------------*/
#bloc-image-droite li { color: #312784; }

/*-----------------------------------------puce couleur image gauche-----------------------------------------*/
#bloc-image-gauche li { color: #EDF3FC; }

/*-------------------------------------------bloc texte photo droite-------------------------------------------*/
.image-droite { background-color: #EDF3FC; }

/*-------------------------------------------bloc texte photo gauche-------------------------------------------*/
.image-gauche { background-color: #312784; }

/*-------------------------------------------bloc texte photo gauche zone geo-------------------------------------------*/
.bloc-zone-geo { background-color: #EDF3FC; }

/*------------------------------------------------agrandir hauteur header--------------------------------------------------*/
.navbar-brand { height: 10vh !important;  width: 10vw !important; }

.logo_nav { height: 9vh !important; }

.navbar-nav > li { margin: 0 25px; /* espace horizontal entre les éléments */ }

/*---------------------------------------------------------Bloc maps-------------------------------------------------------------*/
.maps-section .content { color: #0C091F !important; }

.maps-section .map-content { padding: 50px; }

.maps-section iframe { border-radius: 20px !important; }

/*---------------------------------------------texte footer----------------------------------------------*/
footer, footer p, footer a, footer li, footer ul, footer i { color: #312784 !important; font-family: 'Poppins'; font-size: 1rem; }

footer h5 { color: #312784 !important; font-family: 'Oswald', sans-serif; font-size: 1.25rem; /* légèrement plus grand pour se démarquer */ }

.text-color-third { color: #312784 !important; font-family: 'Poppins'; font-size: 1rem; text-align: left; hyphens: auto; }

/*-------------------------------------------------texte bloc map----------------------------------------------------*/
.col-sm-12.col-lg-6.col-xl-4.py-5.content.text-color-sixth { color: #312784 !important; }

/* ----------------------------------------------ombre---------------------------------------------- */
div.shadow-lg { box-shadow: none !important; }

/*-----------------------------------------ecriture bouton téléphone header-----------------------------------------*/
.text-color-fourth { color: #ffffff !important; font-family: 'Poppins'; }

/*---------------------------------------------surlignement header----------------------------------------------*/
.animated-border-button:after { background-color: #FFCC02; }

/*-------------------------------------------effet hover header-------------------------------------------*/
.animated-border-button span { transition: color 0.3s ease; }

.animated-border-button:hover span { color: #312784 !important; }

/*-----------------------------------------grossissement bouton header-----------------------------------------*/
.button-header-telephone { transition: transform 0.3s ease, border 0.3s ease; display: inline-block; font-family: 'Poppins'; font-weight: 600px !important; font-size: 1rem; border: 2px solid #FFCC02; }

.button-header-telephone:hover { transform: scale(1.1); }

/*-----------------------------------------grossissement bouton-----------------------------------------*/
.button_homepageDoubleScreen { transition: transform 0.3s ease; display: inline-block; border: 2px solid #FFCC02 !important; }

.button_homepageDoubleScreen:hover { transform: scale(1.05); }

/* -------------------------------------------bouton contact envoyer------------------------------------------- */
button.btn-outline-dark { --bs-btn-color: #ffffff; --bs-btn-border-color: #0169B4; --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #312784; --bs-btn-hover-border-color: #312784; --bs-btn-bg: #0169B4; --bs-gradient: none; background-color: var(--bs-btn-bg); color: var(--bs-btn-color); }

/* ------------------------------------------------Flèche retour en haut----------------------------------------------------- */
#back-to-top { position: fixed; bottom: 24px; right: 24px; background-color: #0169B4; color: #fff !important; font-size: 20px; font-weight: bold; line-height: 1; text-align: center; padding: 14px 18px; border-radius: 50%; border: 2px solid #FFCC02; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); cursor: pointer; text-decoration: none; opacity: 0; pointer-events: none; z-index: 9999; transition: opacity .3s ease, transform .2s ease, background-color .3s ease; }

#back-to-top.show { opacity: 1; pointer-events: auto; }

#back-to-top:hover { background-color: #312784; transform: translateY(-3px); }

/*------------------------------------------------bloc presta/real 2 case----------------------------------------------*/
/* ==== Galerie ==== */
.platre-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; padding: 80px 20px; background-color: #EDF3FC; }

.platre-link { text-decoration: none; }

/* ==== Carte ==== */
.platre-card { position: relative; overflow: hidden; border: 3px solid #FFCC02; border-radius: 1.5rem; width: 450px; height: 450px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); background: #312784; }

/* ==== Image ==== */
.platre-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.6s ease; }

.platre-card:hover img { opacity: 0.5; }

/* ==== Traits ==== */
.platre-card::before, .platre-card::after { content: ''; position: absolute; height: 1px; background: white; left: 10px; right: 10px; width: calc(100% - 20px); z-index: 3; /* Invisible au départ */ transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 0.5s ease, opacity 0.3s ease; }

.platre-card::before { top: 10px; }

.platre-card::after { bottom: 10px; }

/* ==== Hover : apparition gauche → droite ==== */
.platre-card:hover::before, .platre-card:hover::after { transform: scaleX(1); transform-origin: left; opacity: 1; }

/* ==== Transition de sortie : rétraction droite ==== */
.platre-card::before, .platre-card::after { transition: transform 0.5s ease, opacity 0.3s ease; }

.platre-card:hover::before, .platre-card:hover::after { transform: scaleX(1); transform-origin: left; opacity: 1; }

.platre-card:not(:hover)::before, .platre-card:not(:hover)::after { transform: scaleX(0); transform-origin: right; /* <-- la clé ici ! */ opacity: 1; transition: transform 0.5s ease, opacity 0.3s ease; }

/* ==== Overlay ==== */
.platre-overlay { position: absolute; inset: 0; background: rgba(49, 39, 132, 0.75); color: white; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease; z-index: 2; }

.platre-card:hover .platre-overlay { opacity: 1; }

/* Texte Overlay */
.platre-overlay-text { text-align: center; font-size: 1.3rem; font-weight: bold; font-family: 'Poppins'; z-index: 4; position: relative; }

/* ==== Responsive ==== */
@media (max-width: 980px) { .platre-card { width: 380px; height: 380px; } .platre-overlay { opacity: 1 !important; } }

@media (max-width: 640px) { .platre-card { width: 100%; height: 300px; } }

/*------------------------------------------------Bloc presta 5 cases------------------------------------------------*/
.grid-item { position: relative; overflow: hidden; border: 3px solid #FFCC02; border-radius: 1.5rem; width: 100%; height: 20rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); background: #312784; }

/* Image masquée par défaut et qui apparaît au hover */
.grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.6s ease; }

.grid-item:hover img { opacity: 1; }

/* Traits visibles mais avec animation sur hover */
.grid-item::before, .grid-item::after { content: ''; position: absolute; height: 1px; background: white; left: 10px; right: 10px; width: calc(100% - 20px); z-index: 3; transition: transform 0.4s ease; transform: scaleX(1); transform-origin: left; }

.grid-item::before { top: 10px; }

.grid-item::after { bottom: 10px; }

/* Animation au hover : les traits se rétractent puis se redéploient */
.grid-item:hover::before, .grid-item:hover::after { transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; }

/* Overlay violet par défaut, disparaît au hover */
.grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(49, 39, 132, 0.85); color: white; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.5s ease; z-index: 2; }

.grid-item:hover .grid-overlay { opacity: 0; }

/* Titre */
.grid-text { text-align: center; font-size: 1.3rem; font-weight: bold; font-family: 'Poppins'; z-index: 4; position: relative; }

@media (max-width: 768px) { .grid-item { height: 15rem !important; } .grid-overlay { opacity: 1 !important; } }

/*------------------------------------------bloc avis------------------------------------------*/
/* Section globale */
.platerie-section { background: #EDF3FC; /* léger bleu */ padding: 60px 20px; text-align: center; }

/* Titre */
.platerie-section h2 { font-size: 38px; font-weight: 700 !important; font-family: 'Oswald', sans-serif !important; margin-bottom: 10px; color: #312784; }

/* Intro sous-titre */
.platerie-intro { font-size: 20px; font-family: 'Poppins'; color: #312784; margin-bottom: 40px; }

/* Container cartes */
.platerie-avis { display: flex; justify-content: center; align-items: stretch; gap: 30px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }

/* Carte */
.platerie-carte { background: #fff; border-radius: 12px; width: 320px; padding: 30px 20px; box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08); display: flex; /* layout flexible */ flex-direction: column; /* en colonne */ justify-content: space-between; /* espace entre haut et bas */ text-align: center; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; border: 2px solid transparent; min-height: 400px; /* pour garantir même hauteur */ }

/* Effet hover : soulèvement + bordure dorée */
.platerie-carte:hover { transform: translateY(-6px); border-color: #FFCC02 !important; box-shadow: 0px 8px 20px rgba(255, 204, 2, 0.3); }

/* Nom */
.platerie-carte h3 { font-weight: 700 !important; font-size: 18px; font-family: 'Oswald', sans-serif !important; color: #312784; margin: 0 0 5px; }

/* Date */
.platerie-date { color: #312784; font-size: 14px; font-family: 'Poppins'; margin-bottom: 15px; }

/* Texte avis (centré au milieu) */
.platerie-texte { flex-grow: 1; /* prend toute la place dispo */ display: flex; align-items: center; /* centre verticalement */ justify-content: center; text-align: center; color: #312784; font-size: 15px; font-family: 'Poppins'; line-height: 1.6; margin: 15px 0; padding: 0 5px; }

/* Étoiles (toujours en bas) */
.platerie-stars { color: #FFCC02 !important; font-size: 18px; margin-top: 20px; }

/*----------------------------------------------bloc en-tête présta----------------------------------------------*/
.banner-section { position: relative; background-size: cover; background-position: center; height: 550px; /* ajuste selon besoin */ display: flex; align-items: center; padding: 40px; }

.banner-inner { display: flex; align-items: center; width: 100%; }

/* Bloc texte */
.banner-content { background: rgba(0, 0, 0, 0.6); /* fond semi-transparent */ color: #fff; padding: 20px 30px; border-radius: 20px; max-width: 560px; flex: 1; /* occupe la gauche */ }

.banner-content h2 { font-size: 2.2rem; font-weight: 600 !important; margin-bottom: 20px; font-family: 'Oswald', sans-serif; }

.banner-button { display: inline-flex; align-items: center; gap: 8px; background: #0169B4; color: #fff; text-decoration: none; font-weight: 600; padding: 10px 20px; border-radius: 25px; border: 2px solid #FFCC02; transition: background 0.3s ease; font-family: 'Poppins'; }

.banner-button:hover { background: #312784; }

.banner-button .arrow { font-size: 1.2rem; transition: transform 0.3s ease; }

.banner-button:hover .arrow { transform: translateY(4px); }

/* Logo à droite */
.banner-logo { flex: 1; /* prend l’espace restant */ display: flex; justify-content: center; /* centre le logo dans son espace */ align-items: center; }

.banner-logo img { max-width: 200px; height: auto; display: block; }

/* Responsive */
@media (max-width: 1024px) { .banner-logo img { max-width: 160px; /* réduit un peu avant de passer en bas */ } }

@media (max-width: 768px) { .banner-inner { flex-direction: column; /* passe en colonne */ text-align: center; } .banner-content { max-width: 100%; margin-bottom: 20px; } .banner-logo { justify-content: center; } .banner-logo img { max-width: 140px; } }

/*-----------------------------------------------bloc en-tête réalisation---------------------------------------------------*/
.banner-section { position: relative; height: 94vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* Vidéo de fond */
.banner-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* la vidéo couvre tout sans déformation */ z-index: 1; }

/* Superposition du contenu */
.banner-overlay { position: absolute; /* <-- au lieu de relative */ top: 0; left: 0; width: 100%; height: 100%; /* <-- s'étend bien sur toute la vidéo */ background: rgba(0, 0, 0, 0.25); /* tu peux ajuster l’opacité ici */ z-index: 2; display: flex; align-items: center; padding: 40px; }

.banner-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }

/* Bloc texte */
.banner-content { background: rgba(0, 0, 0, 0.6); color: #fff; padding: 20px 30px; border-radius: 20px; max-width: 560px; flex: 1; }

.banner-content h2 { font-size: 2.2rem; font-weight: 600 !important; margin-bottom: 20px; font-family: 'Oswald', sans-serif; }

.banner-button { display: inline-flex; align-items: center; gap: 8px; background: #0169B4; color: #fff; text-decoration: none; font-weight: 600; padding: 10px 20px; border-radius: 25px; border: 2px solid #FFCC02; transition: background 0.3s ease; font-family: 'Poppins'; }

.banner-button:hover { background: #312784; }

.banner-button .arrow { font-size: 1.2rem; transition: transform 0.3s ease; }

.banner-button:hover .arrow { transform: translateY(4px); }

/* Logo */
.banner-logo { flex: 1; display: flex; justify-content: center; align-items: center; }

.banner-logo img { max-width: 200px; height: auto; display: block; }

/* Responsive */
@media (max-width: 1024px) { .banner-logo img { max-width: 160px; } }

@media (max-width: 768px) { .banner-inner { flex-direction: column; text-align: center; } .banner-content { max-width: 100%; margin-bottom: 20px; } .banner-logo img { max-width: 140px; } }

/*-------------------------------------------bloc villes réal-------------------------------------------*/
.villes-section { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 20px; background-color: #EDF3FC; padding: 60px 20px; }

.ville-card { position: relative; flex: 1; min-width: 300px; height: 50vh; border-radius: 25px; overflow: hidden; background-color: #000; isolation: isolate; }

.ville-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(100%) brightness(50%); transition: filter 0.6s ease, transform 0.6s ease; z-index: 0; }

.ville-card:hover .ville-bg { filter: grayscale(0%) brightness(100%); transform: scale(1.05); }

.ville-content { position: relative; z-index: 2; color: #fff; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }

.ville-content h2 { font-size: 1.8rem; font-weight: 600 !important; margin-bottom: 10px; }

.ville-line { display: block; width: 60px; height: 2px; background-color: #fff; margin: 10px auto 25px; transition: all 0.3s ease; }

.ville-card:hover .ville-line { width: 100px; background-color: #0169B4; }

.ville-btn { display: inline-block; font-family: 'Poppins'; font-weight: 600; font-size: 1rem; color: #fff; text-decoration: none; background-color: #0169B4; border: 2px solid #FFCC02; border-radius: 50px; padding: 10px 28px; transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }

.ville-btn:hover { background-color: #312784; border: 2px solid #FFCC02; transform: scale(1.1); color: #fff; }

/*     ----- Responsive tablette -----     */
@media (max-width: 1024px) { .ville-card { flex: 1 1 45%; height: 40vh; } }

/*    ----- Responsive mobile -----    */
@media (max-width: 768px) { .villes-section { flex-direction: column; align-items: stretch; } .ville-card { width: 100%; height: 35vh; } .ville-content h2 { font-size: 1.4rem; } .ville-btn { padding: 8px 22px; font-size: 0.95rem; } }

/*-------------------------------------------real ville vidéo-------------------------------------------*/
.realisations-section { display: flex; flex-direction: column; background-color: #EDF3FC; }

/* Bloc principal */
.real-bloc { background-color: #312784; overflow: hidden; padding: 120px 40px; display: flex; justify-content: center; align-items: center; }

.real-content { display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 100%; max-width: 1200px; }

/* Zone texte (titre + date) */
.real-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }

.real-text h2 { font-family: 'Poppins'; font-size: 2rem; font-weight: 700 !important; color: #fff; text-align: left; margin: 0; }

.real-date { font-family: 'Poppins'; font-size: 0.95rem; color: #fff; opacity: 0.85; margin: 0; }

/* Bloc du milieu : fond clair + texte à droite */
.real-bloc--alt { background-color: #EDF3FC; }

.real-text--alt { align-items: flex-end; text-align: right; }

.real-text--alt h2 { color: #312784; }

.real-text--alt .real-date { color: #312784; }

/* Vidéo */
.real-video { flex: 2; display: flex; align-items: center; justify-content: center; }

.real-video video { width: 100%; border-radius: 25px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); object-fit: cover; }

/* ----- Responsive tablette ----- */
@media (max-width: 1024px) { .real-content { flex-direction: column; text-align: center; } .real-text, .real-text--alt { align-items: center !important; text-align: center !important; } }

/* ----- Mobile ----- */
@media (max-width: 600px) { .real-text h2 { font-size: 1.4rem; } .real-date { font-size: 0.9rem; } .real-video video { border-radius: 16px; } }

/*--------------------------------------------------------------autres réal presta de services--------------------------------------------------------------*/
/* Section principale */
.realisations { background: #EDF3FC; color: #312784; text-align: center; padding: 60px 20px; border-radius: 24px; max-width: 1300px; margin: 0 auto; box-sizing: border-box; }

.realisations__title { font-size: 38px; font-weight: 700 !important; color: #312784; margin-bottom: 16px; line-height: 1.4; }

.realisations__intro { font-size: 20px; margin: 0 auto 50px; max-width: 800px; line-height: 1.5; color: #312784; }

/* Grille des 3 blocs */
.realisations__grid { display: flex; justify-content: center; align-items: flex-start; gap: 30px; flex-wrap: wrap; }

/* Bloc individuel */
.service-card { width: 380px; height: 380px; background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; border: 2px solid transparent; }

.service-card:hover { box-shadow: 0px 8px 20px rgba(255, 204, 2, 0.3); transform: translateY(-6px); border-color: #FFCC02 !important; }

/* Image arrondie */
.service-card__image { width: 100%; height: 260px; border-radius: 22px; overflow: hidden; background: #d9e3ff; }

.service-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Titre du bloc */
.service-card__title { margin-top: 10px; font-size: 20px; font-weight: 700 !important; color: #312784; }

/* Responsive */
@media (max-width: 900px) { .realisations__grid { gap: 24px; } .service-card { width: 90%; height: auto; } }

@media (max-width: 600px) { .realisations__title { font-size: 22px; } .realisations__intro { font-size: 16px; margin-bottom: 30px; } .service-card__image { height: 200px; } .service-card__title { font-size: 18px; } }

h2.display-6.fw-bold.p-3.pt-lg-3.m-0.titles { color: whitesmoke; }

.text-center.fs-6.text-color-sixth { color: white !important; }

.row.p-4.pb-0.pe-lg-0.pt-lg-5.pb-lg-5.rounded-3.shadow-lg.justify-content-center.position-relative.bg-sixthColor.text-color-sixth { color: white !important; }

div#seo-text-images { color: white !important; }

/*-------------------------------enlever recherche fréquente---------------------------------------*/
a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { display: none !important; }

/*# sourceMappingURL=custom.css.map */