@charset "UTF-8";
@import url(main.css);
.spacer { display: none; }

a:visited { color: white; }

.btn:visited { color: white; }

main a:visited { color: white; }

.black-screen { display: none; }

/*=============== CUSTOM FORMULAIRE DE CONTACT ===================*/
div#contact { padding: 100px 0 !important; }

/*=============== CUSTOM BLOC SEO ===================*/
.mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative, .mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative, .mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { margin-top: 100px !important; margin-bottom: 100px !important; padding: 70px 50px !important; }

/*==================== CUSTOM AVIS GOOGLE ==================*/
.mb-5.googleReviews-div { padding: 50px 0; }

.owl-stage { margin: 50px 0 !important; }

/*==================== CUSTOM COOKIES ==================*/
div#termsfeed-com---nb { border-radius: 8px; margin: 10px; background-color: #d96f72 !important; }

/*================ CUSTOM NAV BAR ==================*/
nav#navigation-bar-show { border-radius: 8px; margin: 10px; }

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

.fs-6.animated-border-button.obftrucs { font-family: 'Zain'; text-transform: uppercase; }

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

.logo_nav { height: 8vh !important; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { padding: 16px 40px !important; box-shadow: 0 10px 25px rgba(233, 31, 39, 0.3); font-family: 'Zain'; 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 { background-color: var(--oliveros-red-light); transform: translateY(-3px) scale(1.02); }

/*=========================================================================== HERO D'ACCUEIL =====================================================================*/
:root { --oliveros-dark: #252122; --oliveros-red-main: #e91f27; --oliveros-red-light: #d96f72; --oliveros-white: #ffffff; }

.oliveros-hero-section { position: relative; padding: 80px 5% 180px 5%; min-height: 100vh; display: flex; align-items: center; /* Centre verticalement le contenu */ overflow: hidden; /* Empêche la vidéo et les vagues de déborder */ background-color: var(--oliveros-dark); /* Correction bug scroll : On s'assure que le GPU gère le rendu */ transform: translateZ(0); }

/* --- VIDEO BACKGROUND --- */
.oliveros-hero-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; opacity: 0.5; pointer-events: none; }

/* --- CONTENU --- */
.oliveros-hero-container { position: relative; max-width: 1400px; margin: 0 auto; z-index: 5; width: 100%; display: flex; justify-content: flex-start; /* Aligne le contenu à gauche */ margin-top: 100px; }

.oliveros-hero-content { text-align: left; /* Aligne le texte à gauche */ max-width: 1400px; padding-left: 40px; /* Le "décalage" que tu as demandé */ }

.oliveros-hero-subtitle { font-family: 'Zain', sans-serif; color: var(--oliveros-red-light); font-size: 1.6rem; display: block; margin-bottom: 15px; text-transform: uppercase; }

.oliveros-hero-title { font-family: 'Zain', sans-serif; color: var(--oliveros-white); font-size: clamp(2.8rem, 7vw, 3.5rem); line-height: 1; margin-bottom: 25px; font-weight: 700 !important; letter-spacing: 0.04em; text-transform: uppercase; }

.oliveros-hero-text { font-family: 'Vend Sans', sans-serif; color: var(--oliveros-white); font-size: 1.2rem; line-height: 1.6; margin-bottom: 40px; }

/* --- BADGES --- */
.oliveros-hero-badge-slanted { display: inline-block; background-color: var(--oliveros-red-main); color: var(--oliveros-white); padding: 0.1em 0.5em; transform: skew(-12deg); border-radius: 8px; margin: 0 4px; }

.oliveros-hero-badge-light { background-color: var(--oliveros-red-light); transform: skew(8deg); }

/* --- BOUTON --- */
.oliveros-hero-btn-primary { display: inline-block; font-family: 'Vend Sans', sans-serif; background-color: var(--oliveros-red-main); color: var(--oliveros-white); padding: 18px 36px; border-radius: 50px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(233, 31, 39, 0.3); text-transform: uppercase; }

.oliveros-hero-btn-primary:hover { background-color: var(--oliveros-red-light); transform: translateY(-3px) scale(1.02); color: var(--oliveros-white); }

/* --- VAGUES (WAVES) --- */
.oliveros-hero-wave-divider { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); z-index: 10; }

.oliveros-hero-wave-divider svg { position: relative; display: block; width: calc(150% + 1.3px); height: 120px; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) { .oliveros-hero-content { padding-left: 0; /* On retire le décalage sur petit écran */ text-align: center; /* On recentre sur mobile pour un meilleur look */ } .oliveros-hero-container { justify-content: center; } }

/*========================================================================= LES SERVICES ========================================================================*/
/* --- VARIABLES DA OLIVEROS --- */
:root { --oliveros-red-main: #e91f27; --oliveros-dark: #252122; --oliveros-white: #ffffff; /* Polices à définir dans ton head HTML */ --font-title: 'Zain', sans-serif; --font-body: 'Vend Sans', sans-serif; }

/* --- SECTION SERVICES --- */
.oliveros-services-section { background-color: var(--oliveros-red-main); /* FOND ROUGE DYNAMIQUE */ padding: 120px 5%; /* Grand padding pour l'aération */ position: relative; z-index: 1; }

.oliveros-services-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px; }

/* Chaque carte prend 2 colonnes = 3 cartes par ligne */
.oliveros-service-card { grid-column: span 2; }

.oliveros-service-card:nth-child(4) { grid-column: 2 / span 2; }

.oliveros-service-card:nth-child(5) { grid-column: 4 / span 2; }

/* --- CARTES SERVICES --- */
.oliveros-service-card { background-color: var(--oliveros-white); /* Carte Blanche */ padding: 50px 40px; border-radius: 20px; /* Coins très arrondis modernité */ text-align: center; display: flex; flex-direction: column; align-items: center; /* Ombre douce pour la profondeur */ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; }

/* Icônes */
.oliveros-service-icon { width: 180px; height: 100px; margin-bottom: 25px; }

.oliveros-service-icon img { width: 100%; height: auto; }

/* --- TITRE : L'EFFET SIGNATURE --- */
.oliveros-service-title { margin-bottom: 25px; }

.oliveros-service-badge { display: inline-block; background-color: var(--oliveros-dark); /* Badge Noir sur Carte Blanche */ color: var(--oliveros-white); padding: 8px 20px; font-family: var(--font-title); font-size: 1.8rem; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; transform: skew(-10deg); border-radius: 8px; }

/* Correction pour que le texte dans le badge ne soit pas trop déformé */
.oliveros-service-badge span { display: inline-block; transform: skew(10deg); /* Compense légèrement */ }

/* Texte descriptif */
.oliveros-service-text { font-family: var(--font-body); color: var(--oliveros-dark); font-size: 1.1rem; line-height: 1.6; margin-bottom: 35px; flex-grow: 1; /* Pousse le bouton vers le bas */ }

/* --- BOUTON CONTOUR --- */
.oliveros-service-btn { display: inline-block; font-family: var(--font-body); font-weight: bold; text-decoration: none; text-transform: uppercase; color: white; padding: 12px 30px; border-radius: 50px; transition: all 0.3s ease; background-color: var(--oliveros-red-main); }

.oliveros-service-btn:hover { background-color: var(--oliveros-red-light); color: var(--oliveros-white); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 20px rgba(233, 31, 39, 0.3); }

/* --- RESPONSIVE TABLETTE / MOBILE --- */
@media (max-width: 768px) { .oliveros-services-section { padding: 80px 5%; } .oliveros-services-container { grid-template-columns: 1fr; } .oliveros-service-card, .oliveros-service-card:nth-child(4), .oliveros-service-card:nth-child(5) { grid-column: auto; } .oliveros-service-card { padding: 40px 25px; } }

@media (max-width: 480px) { .oliveros-service-badge { font-size: 1.4rem; padding: 8px 15px; } }

/*====================================================================== PARTIE PIECES DETACHEES ==================================================================*/
/* --- VARIABLES DA --- */
:root { --oliveros-red-main: #e91f27; --oliveros-red-light: #d96f72; --oliveros-dark: #252122; --oliveros-white: #ffffff; }

.oliveros-parts-section { position: relative; width: 100%; background-color: var(--oliveros-white); padding: 0 0 50px 0; /* Padding bas pour l'aération */ overflow: hidden; display: flex; flex-direction: column; align-items: center; /* Centre horizontalement tout le contenu */ }

/* --- LA VAGUE EN HAUT --- */
.oliveros-parts-wave-top { width: 100%; line-height: 0; background-color: var(--oliveros-white); }

.oliveros-parts-wave-top svg { display: block; width: calc(150% + 1.3px); /* Un peu plus large pour le mouvement */ height: 100px; position: relative; left: 50%; transform: translateX(-50%); /* Centre parfaitement le SVG de la vague */ }

/* --- LE CONTENEUR DE CONTENU (Centrage pile poil) --- */
.oliveros-parts-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 60px 5%; display: flex; justify-content: center; /* Centre le bloc de texte horizontalement */ }

.oliveros-parts-content { text-align: center; /* Centre le texte à l'intérieur */ display: flex; flex-direction: column; align-items: center; /* Centre les éléments les uns sous les autres (badge, p, bouton) */ max-width: 700px; }

/* --- LE BADGE (Signature DA) --- */
.oliveros-parts-title { margin-bottom: 25px; }

.oliveros-parts-badge { display: inline-block; background-color: var(--oliveros-dark); /* Badge sombre sur fond blanc */ color: var(--oliveros-white); padding: 10px 25px; font-family: 'Zain', sans-serif; font-size: 2.2rem; font-weight: 800 !important; text-transform: uppercase; transform: skew(-12deg); border-radius: 8px; white-space: nowrap; }

/* --- LE TEXTE --- */
.oliveros-parts-text { font-family: 'Vend Sans', sans-serif; color: var(--oliveros-dark); font-size: 1.2rem; line-height: 1.6; margin-bottom: 40px; }

/* --- LE BOUTON ROUGE --- */
.oliveros-parts-btn { display: inline-block; font-family: 'Vend Sans', sans-serif; font-weight: bold; text-decoration: none; background-color: var(--oliveros-red-main); /* Bouton rouge comme demandé */ color: var(--oliveros-white); padding: 18px 45px; border-radius: 50px; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.5px; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(233, 31, 39, 0.2); }

.oliveros-parts-btn:hover { background-color: var(--oliveros-red-light); transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 30px rgba(233, 31, 39, 0.3); color: white !important; }

.oliveros-parts-btn:visited { color: white; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) { .oliveros-parts-badge { font-size: 1.7rem; padding: 8px 15px; } .oliveros-parts-wave-top svg { height: 60px; } }

/*======================================================================== RESEAUX SOCIAUX =====================================================================*/
/* --- SECTION RÉSEAUX SOCIAUX --- */
.oliveros-social-section { position: relative; width: 100%; padding: 100px 5%; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FAKrov9cQgjZFJ1Uk4OxdLODe0KM2%2Fimages%2Fbackground_reseaux_sociaux_nkce.webp"); /* REMPLACE PAR TON IMAGE */ background-size: cover; background-position: center; background-attachment: fixed; /* Petit effet parallaxe sympa */ display: flex; justify-content: center; align-items: center; overflow: hidden; }

/* Overlay sombre pour la lisibilité */
.oliveros-social-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(37, 33, 34, 0.85); /* --oliveros-dark avec opacité */ z-index: 1; }

.oliveros-social-container { position: relative; z-index: 5; max-width: 1200px; width: 100%; text-align: center; }

/* --- HEADER & TEXTE --- */
.oliveros-social-header { margin-bottom: 50px; }

.oliveros-social-title { font-family: 'Zain', sans-serif; color: #ffffff; font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; font-weight: 800 !important; margin-bottom: 20px; }

.oliveros-social-text { font-family: 'Vend Sans', sans-serif; color: #ffffff; font-size: 1.2rem; }

/* --- GRILLE IFRAMES (CÔTE À CÔTE) --- */
.oliveros-social-grid { display: flex; flex-wrap: wrap; /* Pour le mobile : passent l'une sous l'autre */ justify-content: center; gap: 30px; }

.oliveros-iframe-wrapper { flex: 1; min-width: 320px; /* Minimum pour mobile */ max-width: 500px; /* Largeur max de l'iframe Facebook */ background: #ffffff; border-radius: 15px; padding: 10px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); overflow: hidden; height: 520px; /* Ajusté pour contenir l'iframe de 500px */ display: flex; justify-content: center; align-items: center; }

.oliveros-iframe-wrapper iframe { border: none !important; width: 100%; height: 100%; border-radius: 10px; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) { .oliveros-social-section { padding: 60px 20px; } .oliveros-iframe-wrapper { height: 450px; /* On réduit un peu la hauteur sur mobile */ } }

/*===================================================================== HORAIRES + LOCALISATION ====================================================================*/
.info-ss { /* Variables Oliveros */ --oliveros-red: #e91f27; --oliveros-dark: #252122; --oliveros-white: #ffffff; --oliveros-gray-bg: #f8f8f8; position: relative; background: white; padding: 100px 0; overflow: hidden; font-family: "Vend Sans", sans-serif; /* Ta police de corps */ }

/* ── Conteneur principal ── */
.info-ss__container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; /* Aligné au centre pour l'équilibre */ max-width: 1400px; margin: 0 auto; padding: 0 5%; }

/* ── Cartes (Horaires & Map) ── */
.info-ss__horaires-card, .info-ss__map { background: var(--oliveros-white); border: none; border-radius: 20px; /* Tes arrondis signature */ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); /* Ombre douce et moderne */ padding: 40px; transition: transform 0.3s ease; }

/* ── Header avec effet Skew ── */
.info-ss__header, .info-ss__map-header { display: flex; align-items: center; gap: 15px; margin-bottom: 35px; }

.info-ss__title { font-family: "Zain", sans-serif; /* Ta police de titre */ font-size: 2.2rem; text-transform: uppercase; color: var(--oliveros-white); background: var(--oliveros-dark); padding: 5px 20px; transform: skew(-10deg); /* L'effet penché signature */ border-radius: 8px; margin: 0; font-weight: 700 !important; }

/* ── Liste des Horaires ── */
.info-ss__schedule { display: flex; flex-direction: column; gap: 12px; }

.info-ss__day-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-radius: 12px; background: #fff; border: 1px solid #eee; transition: all 0.2s ease; }

.info-ss__day-row:hover { border-color: var(--oliveros-red); transform: scale(1.02); }

/* Style pour "Aujourd'hui" */
.info-ss__day-row.today { background: var(--oliveros-red); border-color: var(--oliveros-red); transform: skew(-5deg); /* Petit rappel du skew sur la ligne active */ }

.info-ss__day-row.today .info-ss__day-name, .info-ss__day-row.today .info-ss__hours, .info-ss__day-row.today .info-ss__today-badge { color: var(--oliveros-white); }

.info-ss__day-name { font-weight: 700 !important; color: var(--oliveros-dark); }

.info-ss__hours { font-weight: 700 !important; color: var(--oliveros-red); }

/* ── Section Map ── */
.info-ss__map { padding: 0; /* Pour que l'iframe touche les bords de la carte */ overflow: hidden; min-height: 450px; }

.info-ss__map iframe { width: 100%; height: 100%; min-height: 450px; border: 0; filter: grayscale(0.2); /* Un peu plus pro */ }

/* ── Bouton Itinéraire (Optionnel mais recommandé pour ta DA) ── */
.info-ss__address-text { margin-top: 20px; font-weight: 600 !important; color: var(--oliveros-dark); display: block; }

/* ── Responsive ── */
@media (max-width: 1024px) { .info-ss__container { grid-template-columns: 1fr; } .info-ss__horaires-card, .info-ss__map { padding: 30px; } }

/*====================================================================== EN TETE : PAGES SECONDAIRES ================================================================*/
:root { --oliveros-red-main: #e91f27; --oliveros-dark: #252122; --oliveros-white: #ffffff; }

.oliveros-hero-picture { position: relative; width: 100%; min-height: 80vh; /* Hauteur généreuse pour profiter de l'image */ display: flex; justify-content: center; align-items: center; /* Centre verticalement le contenu */ overflow: hidden; padding: 120px 5% 0px; /* --- IMAGE DE FOND --- */ /* REMPLACE 'chemin-de-votre-image.jpg' par ton lien réel */ background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FAKrov9cQgjZFJ1Uk4OxdLODe0KM2%2Fimages%2Fen_tete_pages_secondaires_cdm0.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: scroll; /* Ou 'fixed' pour un effet parallaxe */ }

/* --- OVERLAY SOMBRE (Crucial pour la lisibilité) --- */
.hero-overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Dégradé subtil pour assombrir juste assez sans masquer l'image */ background: linear-gradient(180deg, rgba(37, 33, 34, 0.8) 0%, rgba(37, 33, 34, 0.6) 100%); z-index: 1; }

.hero-inner-content { position: relative; max-width: 1000px; width: 100%; text-align: center; z-index: 10; /* Passe devant l'overlay */ }

/* --- LE TAG DISCRET --- */
.hero-top-tag { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 25px; }

.tag-text { font-family: 'Zain', sans-serif; color: var(--oliveros-red-light); font-size: 1.2rem; display: block; text-transform: uppercase; }

/* --- LE TITRE AFFINÉ --- */
.hero-main-title { font-family: 'Zain', sans-serif; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; color: var(--oliveros-white); text-transform: uppercase; margin-bottom: 15px; font-weight: 700 !important; }

.skew-highlight { display: inline-block; background: var(--oliveros-red-main); padding: 2px 15px; transform: skew(-12deg); /* L'effet signature subtil */ border-radius: 8px; }

.light-text { font-weight: 300; /* Plus fin */ opacity: 0.95; }

/* --- LE SUBTITLE --- */
.hero-desc { font-family: 'Vend Sans', sans-serif; font-size: 1.2rem; color: #dddddd; /* Gris très clair pour la lisibilité */ max-width: 650px; margin: 0 auto 50px auto; line-height: 1.6; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) { .oliveros-hero-picture { min-height: 60vh; } .hero-main-title { font-size: 2.2rem; } .hero-desc { font-size: 1.1rem; } }

/*=============================================================== PRESENTATION / INTRODUCTION DU SERVICE ==============================================================*/
.oliveros-red-version { padding: 80px 2%; background: #e91f27; display: flex; justify-content: center; overflow: hidden; }

.abris-about__container { max-width: 1600px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }

/* BLOC TEXTE */
.abris-about__eyebrow { display: inline-block; margin-bottom: 40px; font-family: 'Vend Sans', sans-serif; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: white; }

.abris-about__title { margin: 0 0 25px; font-family: 'Zain', sans-serif; font-size: clamp(2.5rem, 4vw, 3.8rem); line-height: 0.95; font-weight: 700 !important; color: #ffffff; text-transform: uppercase; }

.oliveros-skew-dark { display: inline-block; background: #252122; color: #fff; padding: 8px 20px; transform: skew(-12deg); border-radius: 4px; }

.abris-about__text { margin: 0 0 20px; font-family: 'Vend Sans', sans-serif; font-size: 1.1rem; line-height: 1.6; color: #ffffff; }

/* CONTENEUR IMAGE */
.abris-about__visual-container { position: relative; display: flex; justify-content: center; align-items: center; }

/* Fond déco derrière l'image */
.abris-about__visual-container::before { content: ""; position: absolute; width: 92%; height: 92%; background: rgba(255, 255, 255, 0.12); border-radius: 28px; top: 30px; left: 30px; z-index: 0; filter: blur(2px); }

/* Image stylée */
.abris-about__img { position: relative; z-index: 1; width: 100%; max-width: 620px; height: 520px; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22), 0 8px 20px rgba(0, 0, 0, 0.12); transition: transform 0.35s ease, box-shadow 0.35s ease; }

.abris-btn-white { display: inline-block; margin-top: 15px; padding: 16px 35px; background: #252122; color: #fff; text-decoration: none; font-family: 'Vend Sans', sans-serif; font-weight: 700; text-transform: uppercase; border-radius: 50px; transition: all 0.3s ease; }

.abris-btn-white:hover { transform: translateY(-3px); background: #ffffff; color: #e91f27; }

.abris-btn-white:visited { color: white; }

.abris-btn-white:visited:hover { color: #e91f27; }

/* RESPONSIVE */
@media (max-width: 1024px) { .abris-about__container { grid-template-columns: 1fr; text-align: center; } .abris-about__visual-container { margin-top: 20px; } .abris-about__visual-container::before { top: 20px; left: 20px; width: 90%; height: 90%; } .abris-about__img { max-width: 100%; height: 420px; } }

@media (max-width: 767px) { .oliveros-red-version { padding: 60px 5%; } .abris-about__img { height: 320px; border-radius: 18px; border-width: 4px; } .abris-about__visual-container::before { display: none; } }

/*======================================================================= EXPERTISE ==========================================================================*/
.oliveros-grid-section { padding: 80px 5%; background: #ffffff; }

.grid-wrapper { max-width: 1400px; margin: 0 auto; }

.grid-header { margin-bottom: 50px; border-left: 5px solid #e91f27; /* Barre rouge verticale pour le style */ padding-left: 20px; }

.grid-main-title { font-family: 'Zain', sans-serif; font-size: 3rem; text-transform: uppercase; font-weight: 800 !important; color: #252122; }

.skew-red { display: inline-block; background-color: var(--oliveros-red-main); /* Badge sombre sur fond blanc */ color: var(--oliveros-white); padding: 10px 25px; text-transform: uppercase; transform: skew(-12deg); border-radius: 8px; }

/* --- GRID 3x3 --- */
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); /* Pas de gap pour un style collé/industriel ou un petit gap très net */ gap: 1px; background: #eeeeee; /* Couleur de la bordure entre les cartes */ border: 1px solid #eeeeee; }

.repair-card { background: #fff; padding: 40px; display: flex; flex-direction: column; height: 100%; transition: 0.3s ease; }

.repair-card:hover { background: #252122; /* La carte devient noire au hover */ }

.repair-card:hover h3, .repair-card:hover p { color: #fff; }

/* --- ALIGNEMENT DES ÉLÉMENTS --- */
.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; }

.card-icon img { height: 45px; width: auto; }

.card-number { font-family: 'Zain', sans-serif; font-size: 1.2rem; color: #e91f27; font-weight: 800; }

.card-content h3 { font-family: 'Zain', sans-serif; font-size: 1.8rem; text-transform: uppercase; margin-bottom: 15px; letter-spacing: 1px; font-weight: 700 !important; }

.card-content p { font-family: 'Vend Sans', sans-serif; font-size: 1rem; line-height: 1.5; color: #666; margin: 0; }

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

@media (max-width: 768px) { .grid-container { grid-template-columns: 1fr; } .repair-card { padding: 30px; } }

/*========================================================================= CTA ===============================================================================*/
.oliveros-cta { padding: 100px 5%; background-color: #252122; /* Ton noir signature */ text-align: center; position: relative; overflow: hidden; }

/* Optionnel : Un léger effet de grain ou de texture en fond pour le côté premium */
.oliveros-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FAKrov9cQgjZFJ1Uk4OxdLODe0KM2%2Fimages%2Fbackground_reseaux_sociaux_nkce.webp?alt=media&token=b27c57e9-8a7a-45dd-b176-36eb253f2d02"); /* Texture très subtile */ opacity: 0.05; pointer-events: none; background-attachment: fixed; }

.cta-wrapper { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }

.cta-title { font-family: 'Zain', sans-serif; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.9; color: #ffffff; text-transform: uppercase; margin-bottom: 30px; font-weight: 700 !important; }

.cta-skew { display: inline-block; background: #e91f27; /* Ton rouge */ color: #fff; padding: 10px 25px; transform: skew(-12deg); border-radius: 8px; }

.cta-text { font-family: 'Vend Sans', sans-serif; font-size: 1.25rem; color: #bbbbbb; max-width: 700px; margin: 0 auto 50px; line-height: 1.5; }

/* --- BOUTONS --- */
.cta-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* --- RESPONSIVE --- */
@media (max-width: 600px) { .oliveros-cta { padding: 70px 5%; } .btn-cta-primary, .btn-cta-outline { width: 100%; /* Boutons pleine largeur sur mobile */ } }

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