@charset "UTF-8";
@import url(main.css);
/* ================================================ 1. POLICES & TITRES ================================================ */
@font-face { font-family: 'Brittany Signature'; src: url("../fonts/BrittanySignature.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }

/* Bouton téléphone header — état de base */
.button-header-telephone { padding: 0.75rem 3rem !important; border: 1px solid #FE0002 !important; transition: all 0.3s ease !important; text-decoration: none !important; display: inline-block !important; }

/* Bouton téléphone header — survol */
.button-header-telephone:hover { background-color: #ffffff !important; color: #FE0002 !important; border: 1px solid #FE0002 !important; }

body { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2Ft8exhPfnfnXDdqD8UH3nsofc2sK2%2Fimages%2FAdobeStock_459391342_5xuw.webp?alt=media&token=a1878ff2-e0c9-493a-916e-50b206af5623"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }

div.titleText.text-white.text-center.fs-2.mb-4.mt-lg-5.titles { margin-top: 0 !important; }

.titleText h2 { margin-bottom: 2rem !important; }

h2 { font-family: 'Arial Black', Arial, sans-serif !important; text-transform: none !important; }

/* Brittany uniquement sur les spans qui le demandent explicitement */
h2 span[style*="Brittany"] { font-family: 'Brittany Signature', cursive !important; }

/* ================================================ 2. HEADER ================================================ */
/* Alignement à gauche du bloc texte-image */
.phototext-description, .phototext-description p { text-align: left !important; }

/* Bouton Contact — état de base */
.button-contact { padding: 0.75rem 3rem !important; border: 1px solid #FE0002; transition: all 0.3s ease !important; text-decoration: none !important; display: inline-block !important; }

/* Bouton Contact — survol */
.button-contact:hover { background-color: #ffffff !important; color: #FE0002 !important; border: 1px solid #FE0002 !important; }

/* ================================================ 3. BOUTON DOUBLE SCREEN ================================================ */
/* État de base */
.button_homepageDoubleScreen { padding: 0.75rem 3rem !important; background-color: #FE0002 !important; color: #ffffff !important; border: 1px solid #FE0002 !important; border-radius: 50px; transition: all 0.3s ease !important; display: inline-block !important; text-decoration: none !important; }

/* Survol */
.button_homepageDoubleScreen:hover { background-color: #ffffff !important; color: #FE0002 !important; border: 1px solid #FE0002 !important; }

/* Masquer le texte alt mal échappé qui s'affiche sous l'image */
.phototext-media-col > span, .phototext-media-col > h3 { display: none !important; }

a.button-contact.phototext-button { color: white; }

/* Parent du bloc — doit être relative */
.homepage-doubleScreen-section { position: relative; overflow: hidden; }

/* Image de fond — couvre tout le parent */
.background-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }

/* ================================================ 4. BLOCS SOMBRES (Horaires, Avis) ================================================ */
[data-anchor="bloc-horaires-infos"], [data-anchor="bloc-avis-google"] { background-color: #333131 !important; padding: 60px 0 !important; }

/* ================================================ 5. CARTES HORAIRES ================================================ */
/* Fond derrière les deux cartes */
.cards-wrapper-outer { background-color: #333131; padding: 32px 16px; }

.cards-wrapper { display: flex; justify-content: center; align-items: flex-start; gap: 32px; max-width: 1100px; margin: 0 auto; padding: 0; }

.horaires-card { background: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 30px; flex: 1; max-width: 480px; }

/* Header : icône + titre */
.horaires-card .header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }

.horaires-card .icon-wrapper { background: #f5f5f5; padding: 10px; border-radius: 10px; display: flex; }

.horaires-card svg.icon { width: 24px !important; height: 24px !important; stroke: #000 !important; stroke-width: 2; }

/* Titre h3 avec première lettre en Brittany */
.horaires-card h3 { font-size: 20px; margin-bottom: 0; text-align: left; color: black; font-family: 'Arial Black', Arial, sans-serif; }

.horaires-card h3 .first-letter { font-family: 'Brittany Signature', cursive; font-size: 30px; color: black; }

.day-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-family: sans-serif; }

.horaires-card a { color: inherit !important; text-decoration: none !important; }

.hours { font-weight: 600; display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; }

/* Petite icône maison */
svg.icon-home { width: 18px !important; height: 18px !important; stroke: #000 !important; stroke-width: 2; }

/* Jour actuel */
.day-row.today { background-color: #FE0002 !important; color: white; border-radius: 8px; padding-left: 10px !important; padding-right: 10px !important; }

/* Badge "Aujourd'hui" */
.today-badge { font-size: 0.75em; font-weight: 400; opacity: 0.9; }

/* Horaires fermés */
.hours.closed { color: #999; font-weight: 400; }

/* ================================================ 6. BLOC MAP ================================================ */
.bloc-map-style { background-color: #333131; padding: 50px 0; }

.bloc-map-style h3 { font-size: 35px; margin-bottom: 40px; text-align: center; color: white; font-family: 'Arial Black', Arial, sans-serif; }

.bloc-map-style .first-letter { font-family: 'Brittany Signature', cursive; font-size: 60px; }

/* ================================================ 7. BLOC GOOGLE REVIEWS ================================================ */
.googleReviews-div { background-color: #333131 !important; }

.mb-5.googleReviews-div { padding: 100px 10px; margin-bottom: 0 !important; /* Spécificité (0,2,0) — écrase Bootstrap (0,1,0) */ }

/* ============================================ BLOC SHOWROOM Remplace l'ancienne section showroom dans votre CSS ============================================ */
/* ── Section principale ── */
.showroom-section { width: 100%; overflow: hidden; padding: 0; position: relative; }

/* ── Piste défilante ── */
.showroom-gallery { display: flex; gap: 16px; width: max-content; padding: 3.5rem 0.75rem 2rem; /* 3 séries d'images → on défile d'un tiers */ animation: showroom-scroll 25s linear infinite; }

/* Pause au survol */
.showroom-gallery:hover { animation-play-state: paused; }

@keyframes showroom-scroll { 0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); } }

/* ── Chaque item ── */
.showroom-item { flex-shrink: 0; width: 380px; height: 310px; border-radius: 12px; overflow: hidden; cursor: default; position: relative; }

.showroom-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, filter 0.4s ease; }

/* Zoom + assombrissement au survol */
.showroom-item:hover img { transform: scale(1.06); filter: brightness(0.6); }

/* ── Label nom + prix au survol ── */
.showroom-label { position: absolute; bottom: 0; left: 0; width: 100%; padding: 12px 14px; background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%); color: #ffffff; font-family: 'Arial Black', Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; display: flex; flex-direction: column; gap: 2px; /* Caché par défaut */ opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }

/* Prix en rouge */
.showroom-label span { color: #FE0002; font-size: 14px; font-weight: 800; }

/* Apparition au survol */
.showroom-item:hover .showroom-label { opacity: 1; transform: translateY(0); }

/* ── Lightbox (conservée si besoin futur) ── */
.showroom-lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 9999; justify-content: center; align-items: center; }

.showroom-lightbox.active { display: flex; }

/* ── Responsive ── */
@media (max-width: 768px) { .showroom-item { width: 200px; height: 150px; } .showroom-gallery { gap: 10px; animation-duration: 18s; } .showroom-label { font-size: 11px; } }

/* ================================================ PAGE CONTACT ================================================ */
/* Masquer le bandeau titre page Contact */
.websitePageTitle-title, .websitePageTitle-div { display: none !important; }

/* Bouton Envoyer — état de base */
.btn.w-100 { color: white; background-color: #FE0002 !important; padding: 0.75rem 3rem !important; border: 1px solid #FE0002 !important; transition: all 0.3s ease !important; text-decoration: none !important; }

/* Bouton Envoyer — survol */
.btn.w-100:hover { background-color: #ffffff !important; color: #FE0002 !important; border: 1px solid #FE0002 !important; }

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