@charset "UTF-8";
@import url(main.css);
a:visited:hover { color: white; }

.spacer { display: none; }

/*================ CUSTOM BLOC SEO ==================*/
.card.card-cover.h-100.overflow-hidden.rounded-4.shadow-lg { background-color: black; border-radius: 0px !important; border: none !important; }

.black-screen { display: none; }

/*================ CUSTOM FORMULAIRE DE CONTACT ==================*/
.display-5.fw-bold.lh-1.text-body-emphasis.mb-3.titles { color: white; text-align: left; text-transform: uppercase; font-family: 'Miranda Sans'; font-weight: bold !important; background-color: rgba(0, 0, 0, 0.3); /* Légère opacité pour détacher du mouvement */ backdrop-filter: blur(4px); /* Effet verre dépoli très moderne */ border: 5px solid #3dd3fd; padding: 70px 30px; margin-left: 50px; max-width: 900px; }

div#contact { padding: 70px 0 !important; }

form#formContact { border-radius: 0px !important; }

@media (max-width: 991px) { .display-5.fw-bold.lh-1.text-body-emphasis.mb-3.titles { margin: 10px; } }

/*================ CUSTOM BLOC MAPS ==================*/
.col-sm-12.col-lg-6.col-xl-4.py-5.content.text-color-sixth { color: white !important; }

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

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

/*================ CUSTOM COOKIES ==================*/
div#termsfeed-com---nb { border-radius: 0px; margin: 10px; }

/*================ CUSTOM NAVBAR ==================*/
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { border-radius: 0px !important; clip-path: polygon(0% 0%, 92% 0%, 100% 25%, 100% 100%, 8% 100%, 0% 75%) !important; padding: 14px 30px !important; font-weight: 700 !important; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover { color: white !important; }

.navbar { transition: all 0.3s ease; }

.navbar.scrolled { background-color: rgba(51, 51, 51, 0.5) !important; backdrop-filter: blur(1rem); }

/* 📱 Responsive : navbar TOUJOURS visible */
@media (max-width: 991px) { .navbar { background-color: rgba(51, 51, 51, 0.5) !important; backdrop-filter: blur(1rem); } }

.navbar-brand { height: 9vh !important; width: 9vw !important; }

.logo_nav { height: 8vh !important; }

.fs-6.animated-border-button.obftrucs { font-family: 'Miranda Sans'; text-transform: uppercase; font-weight: 700; }

.animated-border-button:after { background-color: #3dd3fd; }

/*===================================================================== HERO D'ACCUEIL ==========================================================================*/
.hero-gt-negoce-container { --color-white: #FFFFFF; --color-black: #000000; --color-primary: #3dd3fd; --color-secondary: #386fa4; position: relative; width: 100%; height: 100vh; /* On passe souvent en plein écran pour la vidéo */ min-height: 600px; display: flex; align-items: center; overflow: hidden; font-family: 'Roboto', sans-serif; }

/* --- STYLE DE LA VIDÉO --- */
.hero-gt-negoce-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; /* Important pour garder le ratio sans déformer */ }

.hero-gt-negoce-overlay { position: relative; z-index: 2; /* Pour passer au-dessus de la vidéo */ width: 100%; height: 100%; /* Gradient sombre pour assurer la lisibilité du texte sur la vidéo */ background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 100%); display: flex; align-items: center; padding-left: 8%; }

.hero-gt-negoce-border-box { border: 5px solid var(--color-primary); padding: 50px; max-width: 850px; background-color: rgba(0, 0, 0, 0.3); /* Légère opacité pour détacher du mouvement */ backdrop-filter: blur(4px); /* Effet verre dépoli très moderne */ }

.hero-gt-negoce-brand { display: block; color: var(--color-primary); font-weight: 700; letter-spacing: 3px; margin-bottom: 15px; }

.hero-gt-negoce-title { color: var(--color-white); font-family: 'Miranda Sans', sans-serif; font-weight: bold; font-size: 3.2rem; line-height: 1; margin: 0 0 20px 0; text-transform: uppercase; }

.hero-gt-negoce-description { color: var(--color-white); font-size: 1.1rem; margin-bottom: 40px; }

/* --- BOUTON DESIGN BISEAUTÉ ADOUCI --- */
.hero-gt-negoce-btn-special { display: inline-flex; align-items: center; gap: 20px; background-color: var(--color-primary); color: var(--color-black); padding: 18px 35px; text-decoration: none; font-weight: 700; font-size: 0.95rem; letter-spacing: 1px; clip-path: polygon(0% 0%, 92% 0%, 100% 25%, 100% 100%, 8% 100%, 0% 75%); transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.4s ease, box-shadow 0.4s ease; position: relative; overflow: hidden; }

.hero-gt-negoce-btn-special:hover { background-color: var(--color-secondary); color: var(--color-white); }

.hero-gt-negoce-icon { width: 20px; height: 20px; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.hero-gt-negoce-btn-special:hover .hero-gt-negoce-icon { transform: translateX(5px); /* Déplacement réduit (5px au lieu de 8px) */ }

.hero-gt-negoce-scroll-wrapper { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10; cursor: pointer; }

.hero-gt-negoce-arrows { width: 30px; height: 50px; display: flex; flex-direction: column; align-items: center; }

.hero-gt-negoce-arrows span { display: block; width: 15px; height: 15px; border-bottom: 3px solid var(--color-primary); /* Votre bleu #3dd3fd */ border-right: 3px solid var(--color-primary); transform: rotate(45deg); margin: -5px; animation: hero-gt-scroll-anim 2s infinite; }

/* Délai pour la deuxième flèche pour créer l'effet de vague */
.hero-gt-negoce-arrows span:nth-child(2) { animation-delay: -0.2s; }

@keyframes hero-gt-scroll-anim { 0% { opacity: 0;
    transform: rotate(45deg) translate(-10px, -10px); }
  50% { opacity: 1; }
  100% { opacity: 0;
    transform: rotate(45deg) translate(10px, 10px); } }

/* Optionnel : cacher le scroll sur mobile si l'écran est trop petit */
@media (max-height: 700px) { .hero-gt-negoce-scroll-indicator { display: none; } }

/* --- RESPONSIVE --- */
@media (max-width: 768px) { .hero-gt-negoce-title { font-size: 2rem; } .hero-gt-negoce-border-box { padding: 25px; margin-right: 20px; } }

/*====================================================================== PRESENTATION DE L'ENTREPRISE ==============================================================*/
/* Style de base */
.hero-gt-negoce-presentation { background-color: #000000; color: #FFFFFF; padding: 100px 5%; display: flex; justify-content: center; font-family: 'Roboto', sans-serif; }

.hero-gt-negoce-presentation-wrapper { max-width: 1200px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 120px; align-items: center; }

/* --- PARTIE IMAGE --- */
.hero-gt-negoce-presentation-image { position: relative; }

.hero-gt-negoce-presentation-image img { width: 100%; height: auto; display: block; clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%); }

/* Petit élément décoratif bleu */
.hero-gt-negoce-image-accent { position: absolute; top: -20px; left: -20px; width: 60px; height: 60px; border-top: 5px solid #3dd3fd; border-left: 5px solid #3dd3fd; z-index: 1; }

/* --- PARTIE TEXTE --- */
.hero-gt-negoce-subtitle { color: #3dd3fd; text-transform: uppercase; letter-spacing: 3px; font-size: 0.9rem; font-weight: 700; display: block; margin-bottom: 10px; }

.hero-gt-negoce-h2 { font-family: 'Miranda Sans', sans-serif; font-weight: bold !important; font-size: 2.5rem; line-height: 1.2; margin: 0 0 30px 0; color: #FFFFFF; }

.hero-gt-negoce-text-body p { font-size: 1.05rem; line-height: 1.7; margin-bottom: 20px; color: #cccccc; }

.hero-gt-negoce-text-body strong { color: #FFFFFF; font-weight: 700; }

.hero-gt-negoce-presentation-action { margin-top: 40px; }

.hero-gt-negoce-presentation-content .hero-gt-negoce-btn-special { display: inline-flex; }

.hero-gt-negoce-btn-special { display: inline-flex; align-items: center; gap: 20px; background-color: #3dd3fd; color: #000000; padding: 18px 35px; text-decoration: none; font-weight: 700; font-size: 0.95rem; letter-spacing: 1px; clip-path: polygon(0% 0%, 92% 0%, 100% 25%, 100% 100%, 8% 100%, 0% 75%); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.hero-gt-negoce-btn-special:hover { background-color: #386fa4; color: var(--color-white); transform: translateY(-2px); }

.hero-gt-negoce-icon { width: 20px; height: 20px; transition: transform 0.4s ease; }

.hero-gt-negoce-btn-special:hover .hero-gt-negoce-icon { transform: translateX(5px); }

/* --- Styles Responsive --- */
/* Tablette (Small Tablets) */
@media screen and (max-width: 1024px) { .hero-gt-negoce-presentation-wrapper { grid-template-columns: 1fr; /* Une seule colonne */ gap: 50px; /* Réduit l'espacement entre l'image et le texte */ } .hero-gt-negoce-presentation-image img { clip-path: none; /* Pas de clip-path pour un meilleur affichage sur mobile/tablette */ } .hero-gt-negoce-h2 { font-size: 2rem; } .hero-gt-negoce-text-body p { font-size: 1rem; } .hero-gt-negoce-btn-special { padding: 15px 30px; /* Ajuste la taille du bouton */ } }

/* Mobile (Smartphones) */
@media screen and (max-width: 768px) { .hero-gt-negoce-presentation { padding: 80px 5%; /* Réduit l'espacement vertical */ } .hero-gt-negoce-presentation-wrapper { grid-template-columns: 1fr; /* Une seule colonne */ gap: 30px; /* Espacement réduit */ } .hero-gt-negoce-presentation-image img { clip-path: none; /* Retire le clip-path pour un meilleur rendu mobile */ } .hero-gt-negoce-h2 { font-size: 1.7rem; /* Ajuste la taille du titre */ } .hero-gt-negoce-text-body p { font-size: 0.95rem; /* Réduit la taille du texte */ } .hero-gt-negoce-btn-special { width: 100%; /* Le bouton prend toute la largeur */ padding: 14px 0; } }

/* Petit Mobile (Très petits écrans) */
@media screen and (max-width: 480px) { .hero-gt-negoce-presentation { padding: 60px 3%; } .hero-gt-negoce-presentation-wrapper { gap: 20px; } .hero-gt-negoce-h2 { font-size: 1.5rem; } .hero-gt-negoce-text-body p { font-size: 0.9rem; } .hero-gt-negoce-btn-special { padding: 12px 20px; /* Plus petit padding pour les petits écrans */ } }

/*========================================================================== LES SERVICES ========================================================================*/
/* --- SECTION SERVICES GLOBALE --- */
.hero-gt-negoce-services { position: relative; background-color: #000000; padding: 140px 2%; font-family: 'Roboto', sans-serif; color: #FFFFFF; overflow: hidden; }

/* Image de fond avec overlay sombre */
.hero-gt-negoce-services::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FRBIYZQkrPxYSFsg31EoxcO7IEJQ2%2Fimages%2FBG_hero_daccueil_5_uo7e.webp"); /* À remplacer */ background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.55; z-index: 0; }

.hero-gt-negoce-services-header, .hero-gt-negoce-services-grid { position: relative; z-index: 1; max-width: 1200px; margin-left: auto; margin-right: auto; }

.hero-gt-negoce-services-header { margin-bottom: 60px; }

/* --- GRILLE --- */
.hero-gt-negoce-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1600px; margin: 50px auto 0 auto; gap: 20px; }

/* --- CARTES --- */
.hero-gt-negoce-service-card { position: relative; /* Pour le lien étendu */ background-color: rgba(17, 17, 17, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; height: 100%; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.hero-gt-negoce-service-card:hover { border-color: #386fa4; transform: translateY(-10px); background-color: #191919; }

/* Image de la carte */
.hero-gt-negoce-card-image { width: 100%; height: 220px; overflow: hidden; }

.hero-gt-negoce-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

/* Contenu de la carte */
.hero-gt-negoce-card-content { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; /* Permet d'étirer le contenu */ }

.hero-gt-negoce-card-title { font-family: 'Miranda Sans', sans-serif; /* Assurez-vous qu'elle est importée */ font-size: 1.5rem; color: #3dd3fd; margin: 0 0 15px 0; font-weight: bold !important; text-transform: uppercase; }

.hero-gt-negoce-card-text { font-size: 0.95rem; color: #cccccc; line-height: 1.6; margin-bottom: 30px; }

/* Footer de carte (Aligné en bas) */
.hero-gt-negoce-card-footer { margin-top: auto; /* Pousse le footer tout en bas */ display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; }

.hero-gt-negoce-card-price { font-size: 0.8rem; font-weight: bold !important; letter-spacing: 1px; text-transform: uppercase; color: #ffffff; }

/* Bouton Mini Biseauté */
.hero-gt-negoce-btn-mini { display: inline-flex; align-items: center; gap: 10px; background-color: #3dd3fd; color: #000000; padding: 10px 18px; text-decoration: none; font-weight: bold !important; font-size: 0.75rem; clip-path: polygon(0% 0%, 88% 0%, 100% 30%, 100% 100%, 12% 100%, 0% 70%); transition: all 0.3s ease; }

/* L'astuce pour rendre toute la carte cliquable */
.hero-gt-negoce-link-stretched::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; }

.hero-gt-negoce-service-card:hover .hero-gt-negoce-btn-mini { background-color: #386fa4; color: #ffffff; }

.hero-gt-negoce-btn-mini svg { width: 14px; height: 14px; }

/* --- RESPONSIVE --- */
@media (max-width: 1200px) { .hero-gt-negoce-services-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 992px) { .hero-gt-negoce-services-grid { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; } .hero-gt-negoce-services-header { text-align: center; } .hero-gt-negoce-service-card:hover { transform: translateY(-5px); /* Moins agressif sur mobile */ } }

/*====================================================================== BLOC 4 IMAGES ==========================================================================*/
/* ---------------------------------------------------------- */
/* GALLERY FULL WIDTH */
/* ---------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; background-color: black; }

.gallery-item { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }

.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------- */
/* RESPONSIVE */
/* ---------------------------------------------------------- */
@media (max-width: 992px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 480px) { .close-btn { top: 20px; right: 20px; font-size: 32px; } }

/*========================================================================= ICONES / ETAPES ======================================================================*/
.gt-steps-banner { background-color: #000000; padding: 60px 5%; font-family: 'Roboto', sans-serif; }

.gt-steps-container { max-width: 1200px; margin: 0 auto; }

/* Titre */
.gt-steps-header { text-align: center; margin-bottom: 50px; }

.gt-steps-title { color: #ffffff; font-size: 2.5rem; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; }

.gt-steps-highlight { color: #3dd3fd; }

/* Wrapper de la liste */
.gt-steps-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 40px; }

/* Item individuel */
.gt-step-item { display: flex; align-items: center; gap: 20px; flex: 1; }

/* Icônes PNG */
.gt-step-icon { width: 70px; /* Taille ajustable selon vos PNG */ height: 70px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.gt-step-icon img { max-width: 100%; max-height: 100%; object-fit: contain; /* Optionnel : si vos icônes sont blanches, ce filtre les passe en bleu ciel */ /* filter: invert(74%) sepia(59%) saturate(1814%) hue-rotate(167deg) brightness(104%) contrast(101%); */ }

/* Texte */
.gt-step-content h4 { color: #ffffff; font-size: 1.1rem; font-weight: 700 !important; margin: 0 0 5px 0; text-transform: uppercase; }

.gt-step-content p { color: #3dd3fd; font-size: 0.9rem; margin: 0; font-weight: 400; letter-spacing: 0.5px; }

/* --- RESPONSIVE --- */
@media (max-width: 992px) { .gt-steps-wrapper { flex-direction: column; gap: 30px; align-items: flex-start; max-width: 400px; margin: 0 auto; } .gt-steps-title { font-size: 1.4rem; } .gt-step-item { width: 100%; } }

/*========================================================================= AVIS GOOGLE =========================================================================*/
.gt-testimonials { background-color: #000000; padding: 100px 0; color: #FFFFFF; text-align: center; font-family: 'Roboto', sans-serif; overflow: hidden; }

.gt-testimonials-header { margin-bottom: 40px; padding: 0 5%; }

.gt-testimonials-container { position: relative; max-width: 1400px; margin: 0 auto; }

.gt-testimonials-viewport { overflow: hidden; padding: 40px 0; }

.gt-testimonials-track { display: flex; gap: 30px; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); }

/* Carte Avis */
.gt-testimonial-card { min-width: 550px; background: #0a0a0a; border: 2px solid rgba(255, 255, 255, 0.05); padding: 50px; border-radius: 0px; position: relative; opacity: 0.2; transform: scale(0.85); transition: all 0.6s ease; }

.gt-testimonial-card.active { opacity: 1; transform: scale(1); border-color: #3dd3fd; background: #111111; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }

.gt-testimonial-stars { color: #3dd3fd; margin-bottom: 15px; font-size: 1.1rem; }

.gt-testimonial-name { font-family: 'Miranda Sans', sans-serif; font-size: 1.4rem; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }

.gt-testimonial-text { font-size: 1.05rem; line-height: 1.7; color: #cccccc; font-style: italic; }

.gt-testimonial-quote-icon { position: absolute; bottom: 15px; right: 30px; font-size: 4rem; color: rgba(61, 211, 253, 0.07); font-family: serif; }

/* Flèches Subtiles */
.gt-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #3dd3fd; width: 40px; height: 40px; cursor: pointer; z-index: 10; opacity: 0.5; transition: 0.3s; }

.gt-nav-btn:hover { opacity: 1; color: #ffffff; }

.gt-nav-btn.prev { left: 5%; }

.gt-nav-btn.next { right: 5%; }

.gt-nav-btn svg { width: 100%; height: 100%; }

/* Dots */
.gt-testimonials-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }

.dot { width: 8px; height: 8px; border: 1px solid rgba(61, 211, 253, 0.5); border-radius: 50%; cursor: pointer; transition: 0.3s; }

.dot.active { background: #3dd3fd; width: 25px; border-radius: 4px; border-color: #3dd3fd; }

@media (max-width: 768px) { .gt-testimonial-card { min-width: 85vw; padding: 40px 20px; } .gt-nav-btn { display: none; } }

/*======================================================================= BLOC FACEBOOK =========================================================================*/
/* --- SECTION FACEBOOK --- */
.gt-fb-section { position: relative; background-color: #000000; padding: 120px 5%; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #ffffff; font-family: 'Roboto', sans-serif; }

/* Image de fond avec effet parallaxe */
.gt-fb-bg-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FRBIYZQkrPxYSFsg31EoxcO7IEJQ2%2Fimages%2FBG_hero_daccueil_5_uo7e.webp?alt=media&token=de8fa521-40b4-4864-b0b0-60aa8c9f1bc9"); /* REMPLACER PAR VOTRE IMAGE */ background-size: cover; background-position: center; background-attachment: fixed; /* L'image reste fixe au scroll */ opacity: 0.55; z-index: 0; }

/* Container principal */
.gt-fb-container { position: relative; z-index: 2; max-width: 1200px; width: 100%; display: grid; grid-template-columns: 1fr 540px; gap: 80px; align-items: center; }

/* --- TEXTE (GAUCHE) --- */
.gt-fb-subtitle { color: #3dd3fd; font-size: 0.9rem; font-weight: 800 !important; letter-spacing: 3px; text-transform: uppercase; display: block; margin-bottom: 10px; }

.gt-fb-h2 { font-family: 'Miranda Sans', sans-serif; /* Votre police de titre */ font-size: 2.8rem; line-height: 1.1; margin-bottom: 25px; font-weight: bold !important; }

.gt-fb-highlight { color: #3dd3fd; }

.gt-fb-description { font-size: 1.1rem; line-height: 1.8; color: #cccccc; margin-bottom: 40px; max-width: 500px; }

/* --- CARTE IFRAME (DROITE) --- */
.gt-fb-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); /* Effet verre dépoli */ -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 4px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }

.gt-fb-iframe-container { width: 100%; height: 500px; overflow: hidden; }

.gt-fb-iframe-container iframe { width: 100% !important; }

/* --- RESPONSIVE --- */
@media (max-width: 1100px) { .gt-fb-container { grid-template-columns: 1fr; text-align: center; gap: 60px; } .gt-fb-description { margin: 0 auto 40px auto; } .gt-fb-card { margin: 0 auto; max-width: 530px; } }

@media (max-width: 600px) { .gt-fb-h2 { font-size: 2rem; } .gt-fb-card { border: none; background: none; padding: 0; } }

/*===================================================================== EN TETE : PAGES SECONDAIRES =================================================================*/
/* --- HERO PAGES SECONDAIRES --- */
.gt-page-hero { position: relative; width: 100%; height: 60vh; /* Hauteur réduite par rapport à l'accueil (60% de l'écran) */ min-height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #ffffff; font-family: 'Roboto', sans-serif; }

/* Vidéo de fond */
.gt-hero-video { position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); z-index: 0; object-fit: cover; /* Assure que la vidéo remplit l'espace sans déformation */ }

/* Overlay sombre */
.gt-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%); z-index: 1; }

/* Conteneur de contenu */
.gt-hero-content-container { position: relative; z-index: 2; width: 90%; max-width: 1200px; display: flex; justify-content: left; }

/* L'encadré en Blur (Glassmorphism) */
.gt-hero-blur-box { background: rgba(17, 17, 17, 0.6); /* Fond semi-transparent sombre */ backdrop-filter: blur(15px); /* EFFET DE BLUR */ -webkit-backdrop-filter: blur(15px); /* Pour Safari */ padding: 60px 50px; border-radius: 0px; border: 5px solid #3dd3fd; /* Bordure très fine */ text-align: left; max-width: 800px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); /* Ombre pour la profondeur */ }

/* Sous-titre (Optionnel) */
.gt-hero-subtitle { display: block; color: #3dd3fd; /* Rappel du bleu ciel */ font-size: 0.9rem; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 15px; }

/* Titre principal (H1) */
.gt-hero-title { font-family: 'Miranda Sans', sans-serif; /* Votre police de titre */ font-size: 3rem; font-weight: bold !important; line-height: 1.1; margin-bottom: 25px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Pour la lisibilité */ }

/* Description */
.gt-hero-description { font-size: 1.2rem; line-height: 1.7; color: #dddddd; max-width: 650px; margin: 0 0; }

/* --- RESPONSIVE --- */
@media (max-width: 1666px) { .gt-page-hero { height: 75vh; } }

@media (max-width: 768px) { .gt-page-hero { height: 75vh; } .gt-hero-blur-box { padding: 40px 20px; } .gt-hero-title { font-size: 2.2rem; } .gt-hero-description { font-size: 1rem; } }

/*================================================================== PRESENTATION DU SERVICE : ACHAT / VENTE ===========================================================*/
.gt-services-split { background-color: #000000; padding: 100px 5%; color: #ffffff; font-family: 'Roboto', sans-serif; }

.gt-services-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; /* Texte un peu plus large que l'image */ gap: 80px; align-items: center; }

/* --- TEXTE (GAUCHE) --- */
.gt-services-subtitle { color: #3dd3fd; font-weight: 800 !important; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem; }

.gt-services-h2 { font-family: 'Miranda Sans', sans-serif; font-size: 2.5rem; font-weight: bold !important; margin: 15px 0 25px 0; }

.gt-services-description { font-size: 1.1rem; line-height: 1.7; color: #cccccc; margin-bottom: 30px; }

.gt-services-list { list-style: none; padding: 0; margin-bottom: 40px; }

.gt-services-list li { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; font-weight: 500; }

.gt-services-list li span { color: #3dd3fd; font-weight: bold; }

/* Bloc Facebook spécifique */
.gt-fb-notice { background: rgba(61, 211, 253, 0.05); padding: 20px; border-radius: 0 4px 4px 0; }

.gt-fb-notice p { font-size: 0.95rem; margin-bottom: 15px; font-style: italic; color: #ffffff; }

/* --- IMAGE (DROITE) --- */
.gt-services-image { position: relative; }

.gt-image-frame { position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }

/* Petit effet décoratif derrière l'image */
.gt-image-frame::after { content: ""; position: absolute; top: 15px; right: 15px; bottom: 15px; left: 15px; pointer-events: none; }

.gt-image-frame img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }

/* --- RESPONSIVE --- */
@media (max-width: 992px) { .gt-services-container { grid-template-columns: 1fr; gap: 50px; } .gt-services-image { order: -1; /* Image en premier sur mobile */ } .gt-services-h2 { font-size: 2rem; } }

/*========================================================================== CTA / PAGES SECONDAIRES ===============================================================*/
/* --- SECTION CTA BLUR --- */
.gt-cta-blur-section { position: relative; padding: 140px 5%; background-color: #000; overflow: hidden; font-family: 'Roboto', sans-serif; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; }

/* Image de Fond Parallax */
.gt-cta-bg-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FRBIYZQkrPxYSFsg31EoxcO7IEJQ2%2Fimages%2FBG_hero_daccueil_5_uo7e.webp?alt=media&token=de8fa521-40b4-4864-b0b0-60aa8c9f1bc9"); background-size: cover; background-position: center; background-attachment: fixed; z-index: 0; opacity: 0.55; }

.gt-cta-container { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; }

/* Encadré Glassmorphism corrigé */
.gt-cta-blur-box { background: rgba(17, 17, 17, 0.6); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); padding: 80px 60px; border-radius: 0px; border: 5px solid #3dd3fd; /* On remplace min-width par max-width pour le responsive */ width: 100%; max-width: 1000px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); box-sizing: border-box; /* Assure que le padding ne casse pas la largeur */ }

.gt-cta-subtitle { display: block; color: #3dd3fd; font-size: 0.9rem; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 20px; }

.gt-cta-title { font-family: 'Miranda Sans', sans-serif; font-size: 3.2rem; font-weight: bold !important; margin-bottom: 25px; line-height: 1.1; }

.gt-cta-highlight { color: #3dd3fd; }

.gt-cta-description { font-size: 1.15rem; line-height: 1.8; color: #ccc; margin-bottom: 45px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* --- RESPONSIVE ADAPTÉ --- */
@media (max-width: 1024px) { .gt-cta-blur-box { max-width: 90%; /* On réduit légèrement la largeur sur tablette */ } }

@media (max-width: 768px) { .gt-cta-blur-section { padding: 80px 20px; /* Moins de padding extérieur sur mobile */ } .gt-cta-blur-box { padding: 40px 20px; border-width: 3px; /* Bordure un peu plus fine sur mobile */ } .gt-cta-title { font-size: 2rem; /* Titre plus petit pour éviter les coupures */ } .gt-cta-description { font-size: 1rem; margin-bottom: 30px; } /* Désactivation du parallax sur mobile pour la performance */ .gt-cta-bg-image { background-attachment: scroll; } }

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