/* ========================================================= DESIGN TOKENS Palette inspired by real aluminium finishes: brushed silver profiles, graphite frames, anodized bronze trim. ========================================================= */ :root{ --graphite: #0A0B0D; --graphite-soft: #101216; --surface-light: #FAFCFF; --surface-light-2: #EEF4FA; --aluminum: #C7D3DB; --aluminum-dim: #7C8891; --bronze: #4FB6EE; /* accent = bleu du logo (ex-bronze, nom conservé) */ --bronze-light: #8FD6FA; /* bleu clair du logo */ --blue-deep: #0F7D9D; /* bleu profond du dégradé du logo */ --whatsapp: #25D366; /* vert WhatsApp officiel, pour tout ce qui appelle à l'action */ --whatsapp-dark: #128C7E; --text-light: #F3F8FC; --text-dark: #14181C; --text-dim: #626C74; --line-light: rgba(255,255,255,.14); --line-dark: rgba(14,20,24,.10); --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --navbar-height: 84px; } *{ box-sizing:border-box; } body{ font-family: var(--font-body); background: var(--surface-light); color: var(--text-dark); line-height: 1.7; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,.logo-text{ font-family: var(--font-display); letter-spacing: -0.01em; } a{ text-decoration:none; } ::selection{ background: var(--bronze); color:#fff; } /* ========================================================= NAVBAR ========================================================= */ #mainNav{ background: rgba(22,23,26,.92); backdrop-filter: blur(10px); min-height: var(--navbar-height); box-shadow: 0 1px 0 var(--line-light); transition: background .3s ease; } .logo{ width:52px; height:52px; object-fit:contain; } .logo-footer{ width:42px; height:42px; object-fit:contain; } .logo-text{ color: var(--aluminum); font-size: 1.35rem; font-weight: 700; } .logo-accent{ color: var(--bronze-light); } .navbar-nav .nav-link{ color: var(--aluminum); margin-left: 22px; font-size: 0.92rem; font-weight: 500; letter-spacing: .01em; position: relative; padding-bottom: 4px; } .navbar-nav .nav-link::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--bronze); transition: width .25s ease; } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after{ width:100%; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active{ color:#fff; } .btn-quote{ background: var(--whatsapp); color: #fff !important; padding: 8px 20px !important; border-radius: 2px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .btn-quote::after{ display:none; } .btn-quote:hover{ background: var(--whatsapp-dark); } /* Any page content that is NOT the full-bleed hero must never start underneath the fixed navbar. `.page-header` already accounts for it with its own top padding; this generic class covers everything else (e.g. content injected right below without a hero/page-header). */ .content-offset-nav{ padding-top: var(--navbar-height); } /* ========================================================= SECTION EYEBROW / RAIL MOTIF The small square + line reads as an aluminium track — the same device that runs through every section header. ========================================================= */ .section-eyebrow{ font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); display:flex; align-items:center; gap:10px; margin-bottom: 14px; } .section-eyebrow::before{ content:""; width:22px; height:2px; background: var(--bronze); display:inline-block; } .rail-dot{ width:8px; height:8px; background: var(--bronze-light); display:inline-block; } .section-head{ max-width:640px; margin-bottom:50px; } .section-head.light .section-title{ color:#fff; } .section-head.text-center{ max-width:680px; } .section-title{ font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; color: var(--text-dark); } .section-text{ font-size: 1.05rem; color: var(--text-dim); } .section{ padding: 90px 0; } /* Divider used between the big homepage blocks */ .section-divider{ border:0; height:1px; max-width: 1180px; margin: 0 auto; background: linear-gradient(to right, transparent, var(--line-dark) 20%, var(--line-dark) 80%, transparent); } /* ========================================================= HERO ========================================================= */ .hero{ position: relative; height: 100vh; min-height: 640px; overflow: hidden; } .hero-slider, .hero-slider .carousel-inner, .hero-slider .carousel-item{ height: 100%; } .hero-slider img{ width:100%; height:100%; object-fit: cover; filter: saturate(1.05) contrast(1.05); } .hero-overlay{ position:absolute; inset:0; background: linear-gradient(100deg, rgba(10,11,13,.94) 0%, rgba(10,20,28,.78) 38%, rgba(15,60,80,.38) 65%, rgba(15,80,105,.14) 100%); pointer-events:none; } .hero-content{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; color: var(--text-light); z-index: 2; /* keeps the title clear of the fixed navbar on short viewports */ padding-top: var(--navbar-height); max-height: calc(100vh - var(--navbar-height)); overflow: hidden; } .hero-eyebrow{ font-family: var(--font-mono); font-size:.85rem; letter-spacing:.1em; text-transform: uppercase; color: var(--bronze-light); display:flex; align-items:center; gap:10px; margin-bottom:22px; } .hero-title{ font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 700; line-height: 1.08; max-width: 780px; margin-bottom: 26px; } .hero-accent{ color: var(--bronze-light); } .hero-sub{ font-size: 1.1rem; max-width: 520px; color: var(--aluminum); margin-bottom: 38px; } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; } .btn-quote-lg{ background: var(--whatsapp); color:#fff; padding: 15px 32px; font-weight: 600; border-radius: 2px; display: inline-flex; align-items: center; gap: 10px; transition: background .25s ease, transform .25s ease; } .btn-quote-lg:hover{ background: var(--whatsapp-dark); color:#fff; transform: translateY(-2px); } .btn-outline-rail{ border: 1px solid var(--aluminum-dim); color: var(--text-light); padding: 15px 32px; font-weight: 600; border-radius: 2px; transition: border-color .25s ease, background .25s ease; } .btn-outline-rail:hover{ background: rgba(255,255,255,.08); border-color:#fff; color:#fff; } .btn-outline-rail-light{ border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 14px 30px; font-weight: 600; border-radius: 2px; } .btn-outline-rail-light:hover{ background: rgba(255,255,255,.1); color:#fff; } /* ========================================================= CATEGORIES ========================================================= */ .categories-section{ background: var(--surface-light); } .category-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; background:#fff; border: 1px solid var(--line-dark); padding: 34px 16px; color: var(--text-dark); height:100%; position:relative; overflow:hidden; transition: transform .25s ease, box-shadow .25s ease; } .category-card::before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background: var(--bronze); transform: translateX(-100%); transition: transform .35s ease; } .category-card:hover::before{ transform: translateX(0); } .category-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,20,22,.10); } .category-card i{ font-size: 1.9rem; color: var(--bronze); } .category-card .cat-icon-img{ width: 44px; height: 44px; object-fit: contain; } .category-card span{ font-size: .92rem; font-weight: 600; } /* ========================================================= PRODUCTS SHOWCASE BY CATEGORY (home page) ========================================================= */ .showcase-section{ background: var(--surface-light); overflow:hidden; } .showcase-slider-wrap{ position: relative; display:flex; align-items:flex-start; } .showcase-slider{ display:flex; overflow-x:auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style:none; scrollbar-width:none; } .showcase-slider::-webkit-scrollbar{ display:none; } .showcase-slide{ flex: 0 0 100%; scroll-snap-align: start; padding: 4px 4px 14px; } .showcase-slide-head{ display:flex; align-items:center; gap:16px; margin-bottom:28px; } .showcase-slide-icon{ width:52px; height:52px; border-radius:50%; background: var(--surface-light-2); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color: var(--bronze); flex-shrink:0; overflow:hidden; } .showcase-slide-icon img{ width:26px; height:26px; object-fit:contain; } .showcase-slide-head h3{ font-size:1.3rem; font-weight:700; margin:0; } .showcase-slide-material{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); } .showcase-card{ position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; } .showcase-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; } .showcase-card:hover img{ transform: scale(1.06); } .showcase-overlay{ position:absolute; inset:0; background: linear-gradient(to top, rgba(10,11,13,.92) 0%, rgba(10,11,13,.5) 48%, transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding: 20px; color:#fff; } .showcase-tag{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--bronze-light); margin-bottom:6px; } .showcase-overlay h4{ font-size:1.05rem; font-weight:700; margin:0 0 6px; } .showcase-desc{ font-size:.85rem; color: var(--aluminum); max-height:0; opacity:0; overflow:hidden; margin:0; transition: max-height .3s ease, opacity .3s ease, margin .3s ease; } .showcase-link{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:#fff; max-height:0; opacity:0; overflow:hidden; transition: max-height .3s ease .05s, opacity .3s ease .05s; } .showcase-card:hover .showcase-desc{ max-height:60px; opacity:1; margin-bottom:10px; } .showcase-card:hover .showcase-link{ max-height:30px; opacity:1; } /* ========================================================= RESSOURCES CARDS (Home) — 2 en haut, 1 centrée en dessous ========================================================= */ .why-section { background: var(--surface-light); } .ressource-card { background: #fff; border: 1px solid var(--line-dark); padding: 36px 28px; height: 100%; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; } .ressource-card:hover { transform: translateY(-5px); box-shadow: 0 14px 35px rgba(20,20,22,.08); } .ressource-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-light-2); color: var(--bronze); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px; } .ressource-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; } .ressource-card p { font-size: 0.95rem; color: var(--text-dim); margin: 0 0 20px; flex-grow: 1; } .ressource-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; color: var(--blue-deep); margin-top: auto; } .ressource-link:hover { color: var(--bronze); } .ressource-link i { transition: transform 0.3s ease; } .ressource-link:hover i { transform: translateX(4px); } /* ========================================================= INSPIRATIONS PREVIEW ========================================================= */ .inspirations-section{ background: var(--surface-light); } .inspirations-slider-wrap{ position: relative; display:flex; align-items:center; } .inspirations-slider{ display:flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 14px; -ms-overflow-style: none; scrollbar-width: none; } .inspirations-slider::-webkit-scrollbar{ display:none; } .inspirations-section .inspiration-card{ position:relative; flex: 0 0 calc((100% - 48px) / 3); aspect-ratio: 4/5; overflow:hidden; scroll-snap-align: start; } .slider-arrow{ position:relative; flex-shrink:0; width:44px; height:44px; border-radius:50%; border: 1px solid var(--line-dark); background: #fff; color: var(--text-dark); display:flex; align-items:center; justify-content:center; font-size:1.1rem; z-index:2; margin: 0 14px; box-shadow: 0 4px 14px rgba(20,20,22,.08); transition: background .2s ease, border-color .2s ease, color .2s ease; } .slider-arrow:hover{ background: var(--bronze); border-color: var(--bronze); color:#fff; } @media (max-width:992px){ .inspirations-section .inspiration-card{ flex-basis: calc((100% - 24px) / 2); } } @media (max-width:600px){ .slider-arrow{ display:none; } .inspirations-section .inspiration-card{ flex-basis: 84%; } } .inspiration-card{ position:relative; aspect-ratio: 4/5; overflow:hidden; } .inspiration-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; } .inspiration-card:hover img{ transform: scale(1.07); } .inspiration-overlay { position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 40%, transparent 60%); display:flex; flex-direction:column; justify-content:flex-end; padding: 22px; color:#fff; } .inspiration-cat{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--bronze-light); margin-bottom:6px; } .inspiration-overlay h4{ font-size:1.1rem; font-weight:700; margin:0; } /* ========================================================= "COMMENT ÇA MARCHE" STEPS (home page) ========================================================= */ .how-it-works-section{ background: var(--surface-light-2); } .how-steps{ display:flex; flex-wrap: wrap; gap: 28px; counter-reset: how-step; position: relative; } .how-step{ flex: 1 1 220px; background:#fff; border: 1px solid var(--line-dark); padding: 30px 24px; position: relative; } .how-step-num{ counter-increment: how-step; width: 44px; height: 44px; border-radius: 50%; background: var(--graphite); color: #fff; font-family: var(--font-mono); font-weight: 700; display:flex; align-items:center; justify-content:center; margin-bottom: 18px; } .how-step-num::before{ content: counter(how-step); } .how-step h4{ font-size: 1.05rem; font-weight:700; margin-bottom:8px; } .how-step p{ font-size:.9rem; color:var(--text-dim); margin:0; } /* ========================================================= YOUTUBE VIDEOS (home preview + /conseils full list) ========================================================= */ .videos-section{ background: var(--surface-light); } .video-card{ display:block; background:#fff; border: 1px solid var(--line-dark); overflow:hidden; height:100%; transition: transform .25s ease, box-shadow .25s ease; color: inherit; } .video-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,20,22,.10); color: inherit; } .video-card-thumb{ position: relative; aspect-ratio: 16/9; overflow:hidden; background: #000; } .video-card-thumb img{ width:100%; height:100%; object-fit:cover; } .video-card-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(10,11,13,.25); } .video-card-play i{ width:56px; height:56px; border-radius:50%; background: rgba(255,255,255,.92); color: var(--graphite); display:flex; align-items:center; justify-content:center; font-size:1.4rem; transition: transform .2s ease; } .video-card:hover .video-card-play i{ transform: scale(1.1); } .video-card-platform{ position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(10,11,13,.75); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; z-index: 2; } .video-card-body{ padding: 18px 20px; } .video-card-body h4{ font-size:1rem; font-weight:700; margin:0 0 8px; } .video-card-body p{ font-size:.85rem; color: var(--text-dim); margin:0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .videos-slider-wrap{ position:relative; display:flex; align-items:center; } .videos-slider{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding: 4px 4px 14px; -ms-overflow-style:none; scrollbar-width:none; } .videos-slider::-webkit-scrollbar{ display:none; } .videos-slider .video-card{ flex: 0 0 calc((100% - 48px)/3); scroll-snap-align:start; } @media (max-width:992px){ .videos-slider .video-card{ flex-basis: calc((100% - 24px)/2); } } @media (max-width:600px){ .videos-slider .video-card{ flex-basis: 86%; } } .videos-dots{ display:flex; justify-content:center; gap:8px; margin-top: 22px; } .videos-dots button{ width:9px; height:9px; border-radius:50%; border:none; background: var(--line-dark); padding:0; transition: background .2s ease, transform .2s ease; } .videos-dots button.active{ background: var(--bronze); transform: scale(1.2); } /* ========================================================= CTA ========================================================= */ .cta-section{ background: var(--graphite); color:#fff; padding: 90px 0; text-align:center; } .cta-section h2{ font-size: clamp(1.8rem,3vw,2.6rem); font-weight:700; margin-bottom:14px; } .cta-section p{ color: var(--aluminum); font-size:1.05rem; margin-bottom:34px; } /* ========================================================= FOOTER ========================================================= */ .site-footer{ background: var(--graphite); color: var(--aluminum); padding: 70px 0 0; } .footer-tagline{ font-size:.92rem; color: var(--aluminum-dim); max-width:340px; } .footer-title{ font-family: var(--font-mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color: var(--bronze-light); margin-bottom:18px; } .footer-links{ list-style:none; padding:0; margin:0; } .footer-links li{ margin-bottom:10px; font-size:.92rem; } .footer-links a{ color: var(--aluminum); } .footer-links a:hover{ color: var(--bronze-light); } .footer-links i{ margin-right:8px; color: var(--bronze); } .social-links a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border: 1px solid var(--line-light); color: var(--aluminum); margin-right:8px; } .social-links a:hover{ background: var(--bronze); border-color: var(--bronze); color:#fff; } .social-links a.whatsapp-social:hover{ background: var(--whatsapp); border-color: var(--whatsapp); } .footer-bottom{ border-top: 1px solid var(--line-light); margin-top: 50px; padding: 22px 0; display:flex; align-items:center; justify-content:space-between; font-size:.85rem; color: var(--aluminum-dim); } .back-to-top{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-light); color: var(--aluminum); } .back-to-top:hover{ background: var(--bronze); border-color: var(--bronze); color:#fff; } /* ========================================================= CONTACT / DEVIS PAGE ========================================================= */ .page-header{ background: var(--graphite); color:#fff; padding: 170px 0 70px; } .page-header h1{ font-size: clamp(2rem, 4vw, 3rem); font-weight:700; margin-bottom:14px; } .page-header-sub{ color: var(--aluminum); max-width:560px; font-size:1.05rem; margin:0; } .contact-section{ background: var(--surface-light); padding-top:60px; } .whatsapp-card{ background: linear-gradient(120deg, var(--whatsapp) 0%, var(--whatsapp-dark) 100%); color:#fff; padding: 36px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; box-shadow: 0 20px 45px rgba(37,211,102,.25); } .whatsapp-card-icon{ width:64px; height:64px; border-radius:50%; background: rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:1.8rem; flex-shrink:0; } .whatsapp-card-text{ flex:1; min-width:220px; } .whatsapp-card-text h2{ font-size:1.35rem; font-weight:700; margin-bottom:6px; } .whatsapp-card-text p{ margin:0; opacity:.92; font-size:.95rem; } .btn-whatsapp-lg{ background:#fff; color: var(--whatsapp-dark) !important; padding: 14px 28px; font-weight:700; border-radius:2px; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; border:none; transition: transform .2s ease, box-shadow .2s ease; } .btn-whatsapp-lg:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.15); color: var(--whatsapp-dark); } .btn-whatsapp-lg:disabled{ opacity:.5; pointer-events:none; } .contact-info-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:24px; } .contact-info-item{ display:flex; align-items:center; gap:16px; background:#fff; border: 1px solid var(--line-dark); padding: 18px 20px; color: var(--text-dark); } .contact-info-item i{ font-size:1.3rem; color: var(--bronze); width:24px; text-align:center; } .contact-info-label{ display:block; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-dim); } .contact-info-value{ display:block; font-weight:600; } .contact-map{ overflow:hidden; border: 1px solid var(--line-dark); line-height:0; } /* ---------- Wizard (multi-step devis form) ---------- */ .wizard-card{ background:#fff; border: 1px solid var(--line-dark); padding: 36px; } .wizard-progress{ display:flex; align-items:center; gap: 6px; margin-bottom: 34px; } .wizard-progress-step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; } .wizard-progress-dot{ width:34px; height:34px; border-radius:50%; background: var(--surface-light-2); color: var(--text-dim); font-family: var(--font-mono); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; border: 2px solid transparent; transition: all .2s ease; } .wizard-progress-step.active .wizard-progress-dot{ background: var(--bronze); color:#fff; } .wizard-progress-step.done .wizard-progress-dot{ background: var(--graphite); color:#fff; } .wizard-progress-label{ font-size:.72rem; font-weight:600; color: var(--text-dim); text-transform:uppercase; letter-spacing:.04em; } .wizard-progress-step.active .wizard-progress-label{ color: var(--text-dark); } .wizard-progress-line{ flex:0 0 auto; width: 40px; height: 2px; background: var(--line-dark); margin-bottom: 26px; } .wizard-pane{ display:none; } .wizard-pane.active{ display:block; animation: wizard-fade .25s ease; } @keyframes wizard-fade{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } } .wizard-pane h3{ font-size:1.25rem; font-weight:700; margin-bottom:6px; } .wizard-pane-sub{ color: var(--text-dim); font-size:.92rem; margin-bottom:26px; } .wizard-nav{ display:flex; justify-content:space-between; align-items:center; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-dark); } .form-label{ font-size:.85rem; font-weight:600; color: var(--text-dark); margin-bottom:6px; } .form-control, .form-select{ border-radius:2px; border: 1px solid var(--line-dark); padding: 11px 14px; font-size:.95rem; } .form-control:focus, .form-select:focus{ border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(79,182,238,.15); } .form-error{ color:#d43a3a; font-size:.8rem; margin-top:4px; display:none; } .form-error.show{ display:block; } .service-type-options{ display:flex; gap:16px; flex-wrap:wrap; } .service-type-option{ flex: 1 1 220px; border: 1px solid var(--line-dark); padding: 20px; cursor:pointer; transition: border-color .2s ease, background .2s ease; } .service-type-option i{ font-size:1.4rem; color: var(--bronze); margin-bottom:10px; display:block; } .service-type-option h5{ font-size:.98rem; font-weight:700; margin-bottom:4px; } .service-type-option p{ font-size:.82rem; color: var(--text-dim); margin:0; } .service-type-option.selected{ border-color: var(--bronze); background: var(--surface-light-2); } .service-type-option input{ display:none; } .category-picker{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 20px; } .category-picker button{ border: 1px solid var(--line-dark); background:#fff; padding: 9px 16px; border-radius: 999px; font-size:.85rem; font-weight:600; color: var(--text-dark); } .category-picker button.active{ background: var(--graphite); color:#fff; border-color: var(--graphite); } .solution-options{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; max-height: 420px; overflow-y:auto; padding-right: 4px; } .solution-option-card{ border: 1px solid var(--line-dark); overflow:hidden; background:#fff; transition: border-color .2s ease; } .solution-option-card.selected{ border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(79,182,238,.15); } .solution-option-media{ aspect-ratio: 4/3; background: var(--surface-light-2); overflow:hidden; } .solution-option-media img{ width:100%; height:100%; object-fit:cover; } .solution-option-body{ padding: 14px; } .solution-option-body h5{ font-size:.9rem; font-weight:700; margin:0 0 10px; } .solution-option-actions{ display:flex; gap:8px; } .solution-option-actions button{ flex:1; font-size:.78rem; font-weight:700; padding: 7px 8px; border-radius:2px; border: 1px solid var(--line-dark); background:#fff; } .solution-option-actions .btn-select.selected{ background: var(--bronze); color:#fff; border-color: var(--bronze); } .solution-option-actions .btn-explore{ color: var(--blue-deep); } .selected-solution-banner{ display:none; align-items:center; gap:14px; background: var(--surface-light-2); border: 1px solid var(--line-dark); padding: 14px 18px; margin-bottom: 20px; } .selected-solution-banner.show{ display:flex; } .selected-solution-banner img{ width:54px; height:54px; object-fit:cover; border-radius:2px; } .form-hint{ display:block; font-size:.8rem; color: var(--text-dim); margin-top:6px; } .wizard-summary{ background: var(--surface-light-2); border: 1px solid var(--line-dark); padding: 22px; font-size:.88rem; } .wizard-summary dt{ font-weight:700; color: var(--text-dark); } .wizard-summary dd{ color: var(--text-dim); margin-bottom:10px; } /* Hidden printable card converted to PNG via html2canvas */ .devis-recap-card{ width: 640px; background:#fff; padding: 40px; font-family: var(--font-body); color: var(--text-dark); position: fixed; left: -9999px; top: 0; } .devis-recap-card h2{ font-family: var(--font-display); margin-bottom: 4px; } .devis-recap-card .recap-row{ display:flex; justify-content:space-between; padding: 10px 0; border-bottom: 1px solid var(--line-dark); font-size:.92rem; } .devis-recap-card .recap-row span:first-child{ color: var(--text-dim); } .devis-recap-card .recap-row span:last-child{ font-weight:600; text-align:right; max-width: 340px; } /* submit button loading state */ .btn-whatsapp-lg.is-loading{ opacity:.7; pointer-events:none; } .btn-whatsapp-lg.is-loading i{ animation: spin 1s linear infinite; } @keyframes spin{ to{ transform: rotate(360deg); } } /* ========================================================= FLOATING WHATSAPP BUTTON ========================================================= */ .whatsapp-float{ position: fixed; right: 24px; bottom: 24px; width: 60px; height: 60px; background: var(--whatsapp); color: #fff; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 1.7rem; box-shadow: 0 8px 24px rgba(37,211,102,.45); z-index: 1050; transition: transform .2s ease, background .2s ease; } .whatsapp-float::before{ content:""; position:absolute; inset:0; border-radius:50%; background: var(--whatsapp); animation: whatsapp-pulse 2.2s ease-out infinite; z-index:-1; } @keyframes whatsapp-pulse{ 0% { transform: scale(1); opacity:.55; } 100% { transform: scale(1.9); opacity:0; } } .whatsapp-float:hover{ background: var(--whatsapp-dark); color:#fff; transform: scale(1.08); } @media (max-width:768px){ .whatsapp-float{ right:16px; bottom:16px; width:54px; height:54px; font-size:1.5rem; } } /* ========================================================= INSPIRATIONS GALLERY PAGE ========================================================= */ .filter-pill.active{ background: var(--graphite); color:#fff; border-color: var(--graphite); } .gallery-section{ background: var(--surface-light); padding-top:50px; } .gallery-card{ cursor:pointer; aspect-ratio: 4/5; } .gallery-zoom{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition: opacity .2s ease; } .gallery-card:hover .gallery-zoom{ opacity:1; } .gallery-empty{ text-align:center; padding: 60px 20px; color: var(--text-dim); } .gallery-empty i{ font-size:2rem; color: var(--bronze); display:block; margin-bottom:10px; } /* ---------- Lightbox modal ---------- */ .gallery-modal-content{ background: var(--graphite); border:none; overflow:hidden; } .gallery-modal-close{ position:absolute; top:16px; right:16px; z-index:5; } #galleryModalCarousel img, #galleryModalCarousel video, #realisationModalCarousel img, #realisationModalCarousel video{ width:100%; max-height: 60vh; object-fit: contain; background:#000; } .gallery-modal-body{ padding: 26px 30px 30px; color:#fff; } .gallery-modal-body h3{ font-size:1.3rem; font-weight:700; margin:6px 0 10px; } .gallery-modal-body p{ color: var(--aluminum); font-size:.95rem; } /* ========================================================= CATALOGUE (SUGGESTIONS) PAGE ========================================================= */ .catalogue-nav-wrap{ position: sticky; top: 84px; z-index: 900; background: #fff; border-bottom: 1px solid var(--line-dark); box-shadow: 0 4px 16px rgba(20,20,22,.05); } .catalogue-nav-scroller{ display:flex; align-items:center; gap:10px; } .nav-scroll-arrow{ flex-shrink:0; width:34px; height:34px; border-radius:50%; border: 1px solid var(--line-dark); background:#fff; color: var(--text-dark); display:flex; align-items:center; justify-content:center; transition: background .2s ease, border-color .2s ease; } .nav-scroll-arrow:hover{ background: var(--surface-light-2); border-color: var(--bronze); } @media (max-width:600px){ .nav-scroll-arrow{ display:none; } } .btn-outline-rail-dark{ border: 1px solid var(--line-dark); color: var(--text-dark); padding: 12px 28px; font-weight:600; border-radius:2px; background:#fff; transition: border-color .2s ease, background .2s ease; } .btn-outline-rail-dark:hover{ border-color: var(--bronze); background: var(--surface-light-2); color: var(--text-dark); } .catalogue-nav{ display:flex; gap:10px; overflow-x:auto; padding: 14px 0; -ms-overflow-style:none; scrollbar-width:none; } .catalogue-nav::-webkit-scrollbar{ display:none; } .catalogue-nav a{ flex-shrink:0; display:flex; align-items:center; gap:8px; padding: 9px 16px; border: 1px solid var(--line-dark); border-radius: 999px; font-size:.85rem; font-weight:600; color: var(--text-dark); white-space:nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; } .catalogue-nav a i{ color: var(--bronze); font-size:.95rem; } .catalogue-nav a:hover{ background: var(--surface-light-2); } .catalogue-section{ background: var(--surface-light); padding-top:60px; } .catalogue-group{ scroll-margin-top: 160px; padding-bottom: 64px; margin-bottom: 64px; border-bottom: 1px solid var(--line-dark); } .catalogue-group:last-child{ border-bottom:none; margin-bottom:0; } .catalogue-group-head{ display:flex; align-items:center; gap:18px; margin-bottom:34px; } .catalogue-group-icon{ width:56px; height:56px; border-radius:50%; background: var(--surface-light-2); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color: var(--bronze); flex-shrink:0; } .catalogue-group-head h2{ font-size:1.5rem; font-weight:700; margin:0; } .catalogue-group-material{ font-family: var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); } .catalogue-empty{ background:#fff; border: 1px dashed var(--line-dark); padding: 34px; display:flex; align-items:center; gap:20px; color: var(--text-dim); } .catalogue-empty i{ font-size:1.8rem; color: var(--bronze); flex-shrink:0; } .catalogue-empty p{ margin:0; } .product-quote-link{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color: var(--blue-deep); margin-top:12px; } .product-quote-link:hover{ color: var(--bronze); } @media (max-width:768px){ .catalogue-nav-wrap{ top:0; } .catalogue-group{ scroll-margin-top:120px; } } /* ========================================================= BIG CATEGORY CARDS (Solutions Page) ========================================================= */ .big-category-card { position: relative; display: block; height: 400px; overflow: hidden; background: #000; color: #fff; } .big-category-card img { width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform 0.6s ease; } .big-category-card:hover img { transform: scale(1.1); } .big-category-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 70%); } .big-category-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; z-index: 2; } .big-category-icon { width: 50px; height: 50px; background: var(--bronze); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border-radius: 50%; margin-bottom: 15px; overflow: hidden; } .big-category-icon img{ width:26px; height:26px; object-fit:contain; } .big-category-content h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 5px; color: #fff; } .big-category-material { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; color: var(--bronze-light); letter-spacing: 0.05em; } .big-category-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 600; font-size: 0.9rem; color: #fff; opacity: 0; transform: translateY(15px); transition: opacity 0.3s ease, transform 0.3s ease; } .big-category-card:hover .big-category-link { opacity: 1; transform: translateY(0); } /* ========================================================= CATEGORY PRODUCTS (Models Grid) ========================================================= */ .model-card { background: #fff; border: 1px solid var(--line-dark); height: 100%; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; } .model-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20,20,22,.10); } .model-card-media { aspect-ratio: 1 / 1; overflow: hidden; background: #f8f9fa; } .model-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .model-card:hover .model-card-media img { transform: scale(1.06); } .model-card-body { padding: 22px; flex-grow: 1; display: flex; flex-direction: column; } .model-card-body h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; } .model-card-body p { font-size: 0.9rem; color: var(--text-dim); margin: 0 0 15px; flex-grow: 1; } .model-card-link { margin-top: auto; font-weight: 600; font-size: 0.85rem; color: var(--blue-deep); display: inline-flex; align-items: center; gap: 6px; } /* ========================================================= SINGLE PRODUCT PAGE & ZOOM ========================================================= */ .zoom-container { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; cursor: zoom-in; background: #f8f9fa; border: 1px solid var(--line-dark); } .zoom-img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .zoom-lens { position: absolute; width: 150px; height: 150px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.4); background-repeat: no-repeat; pointer-events: none; display: none; z-index: 10; } .zoom-icon { position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; pointer-events: none; } .thumbnails-row { display: flex; gap: 10px; flex-wrap: wrap; } .product-thumb { width: 80px; height: 80px; object-fit: cover; cursor: pointer; border: 2px solid transparent; transition: border-color .2s ease; } .product-thumb:hover, .product-thumb.active { border-color: var(--bronze); } .single-product-info h2 { font-size: 2rem; margin: 10px 0 15px; } .single-product-desc { color: var(--text-dim); font-size: 1.05rem; line-height: 1.8; } .single-product-desc h1, .single-product-desc h2, .single-product-desc h3{ font-family: var(--font-display); font-weight: 700; margin: 20px 0 10px; color: var(--text-dark); } .single-product-desc ul{ padding-right: 0; padding-left: 20px; margin-bottom: 14px; } .single-product-desc li{ margin-bottom: 6px; } .single-product-desc hr{ border-color: var(--line-dark); margin: 18px 0; } .single-product-features { display: flex; gap: 20px; flex-wrap: wrap; } .feature-item { font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .feature-item i { color: var(--bronze); font-size: 1.2rem; } .zoom-modal { display: none; position: fixed; z-index: 9999; inset: 0; background: rgba(0,0,0,.95); align-items: center; justify-content: center; cursor: zoom-out; padding: 20px; } .zoom-modal-content { max-width: 90%; max-height: 90%; object-fit: contain; } .zoom-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 3rem; font-weight: 300; cursor: pointer; } @media (max-width: 992px) { .zoom-lens { display: none !important; } } img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } .logo, .logo-footer, .bi, img[src*="placeholder.svg"] { image-rendering: auto; } /* ========================================================= CONSEILS & SOCIAL CARDS ========================================================= */ .social-section { background: var(--surface-light-2); } .social-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: #fff; border-radius: 4px; height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; } .social-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); color: #fff; } .social-card i { font-size: 3rem; margin-bottom: 15px; } .social-card h4 { font-size: 1.3rem; font-weight: 700; margin-bottom: 5px; } .social-card span { font-size: 0.9rem; opacity: 0.9; } .social-facebook { background: #1877F2; } .social-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .social-tiktok { background: #000000; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:768px){ .section{ padding:60px 0; } .hero{ min-height:560px; } .footer-bottom{ flex-direction:column; gap:14px; text-align:center; } .wizard-card{ padding: 22px; } .wizard-progress-label{ display:none; } } /* ========================================================= MULTILINGUAL SUPPORT (RTL / LTR) ========================================================= */ html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { font-family: 'Cairo', sans-serif; } html[dir="rtl"] .ms-lg-3 { margin-right: 1rem !important; margin-left: 0 !important; } html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; } html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; } html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; } html[dir="rtl"] .catalogue-nav { direction: rtl; } html[dir="rtl"] .bi-chevron-right::before { content: "\F284"; } html[dir="rtl"] .bi-arrow-right::before { content: "\F275"; } /* ========================================================= HIDE GOOGLE TRANSLATE BANNER ========================================================= */ .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, .skiptranslate { display: none !important; visibility: hidden !important; } body { top: 0 !important; position: static !important; margin-top: 0 !important; } .goog-te-gadget { font-size: 0 !important; color: transparent !important; } .goog-tooltip, .goog-tooltip:hover { display: none !important; } .goog-text-highlight { background-color: transparent !important; box-shadow: none !important; } /* ========================================================= FEATURED PRODUCTS SLIDER (HOME PAGE) ========================================================= */ .featured-products-section .inspiration-card .btn-whatsapp-lg { background: var(--whatsapp); color: #fff !important; } .featured-products-section .inspiration-card:hover .btn-whatsapp-lg { opacity: 1 !important; transform: translateY(0) !important; } .featured-products-section .inspiration-card img { transition: transform 0.5s ease; } .featured-products-section .inspiration-card:hover img { transform: scale(1.08); }