/* ========================================================================= LOCATION TRACTEUR-BENNE — home.css Design premium inspiré de couvreur-villefranche Palette : Bleu nuit & Orange Chargé UNIQUEMENT sur la home (), après style.css ========================================================================= */ .home { --navy: #1e3a5f; --navy-deep: #152f4f; --navy-darker: #0f2238; --orange: #f97316; --orange-dark: #ea6a00; --off-white: #f8fafc; --warm-grey: #eef2f7; --text-dark: #1a202c; --text-mid: #51607a; --text-light: #94a3b8; --hwhite: #ffffff; --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Nunito Sans', sans-serif; --font-mono: 'DM Mono', monospace; --radius: 4px; --transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); --shadow: 0 4px 24px rgba(15, 34, 56, 0.14); --shadow-card: 0 2px 16px rgba(15, 34, 56, 0.08); --container: 1200px; --container-pad: clamp(1rem, 5vw, 2rem); font-family: var(--font-body); color: var(--text-dark); background-color: var(--off-white); line-height: 1.75; } /* --- BASE OVERRIDES (neutralise style.css sur la home) --- */ .home main { max-width: none; margin: 0; } .home section { padding: 0; margin-bottom: 0; background: none; } .home img { max-width: 100%; height: auto; display: block; } .home a { text-decoration: none; } .home h1, .home h2 { font-family: var(--font-display); line-height: 1.0; margin: 0; color: inherit; } .home h1 { font-weight: 800; font-size: clamp(2.8rem, 9vw, 6rem); text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; } .home h2 { font-weight: 700; font-size: clamp(1.9rem, 5vw, 3rem); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 1rem; color: var(--navy); } .home h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; color: var(--text-dark); margin: 0 0 0.75rem; } .home p { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--text-mid); margin: 0 0 1rem; font-weight: 400; } .home strong { color: var(--navy); font-weight: 700; } .home .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); width: 100%; } .home .section { padding: clamp(3rem, 8vw, 6rem) 0; } /* --- BUTTONS --- */ .home .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.875rem 1.75rem; border-radius: var(--radius); border: 2px solid transparent; transition: var(--transition); white-space: nowrap; line-height: 1; cursor: pointer; } .home .btn-primary { background-color: var(--orange); color: var(--hwhite); border-color: var(--orange); } .home .btn-primary:hover { background-color: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4); } .home .btn-outline { background-color: transparent; color: var(--hwhite); border-color: var(--hwhite); } .home .btn-outline:hover { background-color: var(--hwhite); color: var(--navy); } /* --- SECTION HEADER --- */ .home .section-header { text-align: center; margin-bottom: 3.5rem; } .home .section-header h2 { color: var(--text-dark); margin-bottom: 1rem; } .home .section-header h2::after { content: ''; display: block; width: 52px; height: 3px; background-color: var(--orange); margin: 1rem auto 0; } .home .section-header p { max-width: 700px; margin: 0 auto; } .home .section-label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--orange); margin-bottom: 0.75rem; display: block; } /* ========================================================================= HEADER ========================================================================= */ .home .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 1.25rem 0; background: transparent; border-bottom: none; transition: var(--transition); } .home .header.scrolled { background-color: var(--navy); padding: 0.875rem 0; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25); } .home .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .home .logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--hwhite); } .home .logo-icon { font-size: 1.5rem; } .home .nav { display: flex; align-items: center; gap: 2.25rem; } .home .nav-link { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--hwhite); letter-spacing: 0.03em; position: relative; transition: var(--transition); } .home .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--orange); transition: width 0.3s ease; } .home .nav-link:hover::after, .home .nav-link[aria-current="page"]::after { width: 100%; } .home .header-cta { display: flex; align-items: center; gap: 1.25rem; } .home .header-tel { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; color: rgba(255, 255, 255, 0.8); transition: var(--transition); white-space: nowrap; } .home .header-tel:hover { color: var(--hwhite); } /* Hamburger */ .home .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; z-index: 1100; cursor: pointer; } .home .hamburger span { display: block; width: 26px; height: 2px; background-color: var(--hwhite); transition: var(--transition); transform-origin: center; } .home .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .home .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .home .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav overlay */ .home .nav-overlay { display: none; position: fixed; inset: 0; background-color: var(--navy-darker); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 2rem; } .home .nav-overlay.open { display: flex; } .home .nav-overlay .nav-link { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .home .nav-overlay .nav-link::after { bottom: -6px; height: 3px; } .home .nav-overlay .btn { font-size: 1rem; } /* ========================================================================= HERO ========================================================================= */ .home .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); background-color: var(--navy-deep); border-radius: 0; margin: 0; box-shadow: none; padding: 0; } .home .hero-bg { position: absolute; inset: 0; z-index: 0; } .home .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .home .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(125deg, rgba(15, 34, 56, 0.92) 0%, rgba(30, 58, 95, 0.72) 45%, rgba(30, 58, 95, 0.45) 100%); } .home .hero-content { position: relative; z-index: 3; padding: 9rem 0 11rem; width: 100%; } .home .hero-eyebrow { display: inline-block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--orange); margin-bottom: 1rem; opacity: 0; transform: translateY(20px); animation: hpSlideUp 0.6s forwards 0.1s; } .home .hero h1 { color: var(--hwhite); margin-bottom: 1.5rem; } .home .hero h1 .line { display: block; opacity: 0; transform: translateY(30px); } .home .hero h1 .line-1 { animation: hpSlideUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.2s; } .home .hero h1 .line-2 { color: var(--orange); animation: hpSlideUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.35s; } .home .hero-subtitle { font-size: 1.15rem; color: rgba(255, 255, 255, 0.85); margin-bottom: 2.5rem; max-width: 620px; opacity: 0; animation: hpSlideUp 0.7s forwards 0.5s; } .home .hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; opacity: 0; animation: hpSlideUp 0.7s forwards 0.65s; } /* Badge urgence flottant */ .home .badge-urgence { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 900; background-color: var(--orange); color: var(--hwhite); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.8rem 1.35rem; border-radius: 40px; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.5); animation: hpPulse 2s infinite; transition: var(--transition); } .home .badge-urgence:hover { background-color: var(--orange-dark); transform: scale(1.05); } /* ========================================================================= INTRO ========================================================================= */ .home .intro-section { background-color: var(--hwhite); text-align: center; } .home .intro-section p { max-width: 820px; margin: 0 auto; font-size: 1.1rem; color: var(--text-mid); } /* ========================================================================= TRUST / STATS (bande sombre) ========================================================================= */ .home .trust-section { background-color: var(--navy); padding: 3.5rem 0; } .home .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .home .trust-item { padding: 1.5rem; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .home .trust-item:last-child { border-right: none; } .home .trust-icon { font-size: 1.8rem; } .home .trust-number { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 700; color: var(--orange); line-height: 1; } .home .trust-label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); } /* ========================================================================= SERVICES GRID ========================================================================= */ .home .services-section { background-color: var(--off-white); } .home .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .home .service-card { background-color: var(--hwhite); border-radius: var(--radius); overflow: hidden; border-left: 4px solid transparent; box-shadow: var(--shadow-card); transition: var(--transition); height: auto; } .home .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-left-color: var(--orange); } .home .service-card-image { aspect-ratio: 16/9; overflow: hidden; } .home .service-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .home .service-card:hover .service-card-image img { transform: scale(1.04); } .home .service-card-body { padding: 1.75rem; } .home .service-number { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--orange); margin-bottom: 0.5rem; display: block; } .home .service-card-body h3 { font-size: 1.25rem; color: var(--navy); margin-bottom: 0.75rem; } .home .service-card-body p { font-size: 0.95rem; margin-bottom: 1.25rem; } .home .service-link { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange); display: inline-flex; align-items: center; gap: 0.4rem; transition: var(--transition); } .home .service-link:hover { gap: 0.7rem; color: var(--orange-dark); } /* ========================================================================= WHY US ========================================================================= */ .home .why-section { background-color: var(--hwhite); } .home .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .home .why-item { background-color: var(--off-white); border-radius: var(--radius); padding: 2rem; border-top: 3px solid var(--orange); transition: var(--transition); } .home .why-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .home .why-icon { font-size: 2rem; display: block; margin-bottom: 1rem; } .home .why-item h3 { color: var(--navy); font-size: 1.15rem; } .home .why-item p { font-size: 0.92rem; } /* ========================================================================= PROCESS ========================================================================= */ .home .process-section { background-color: var(--warm-grey); } .home .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .home .process-step { background-color: var(--hwhite); border-radius: var(--radius); padding: 2rem 1.5rem; box-shadow: var(--shadow-card); position: relative; } .home .step-number { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 700; color: var(--orange); line-height: 1; display: block; margin-bottom: 1rem; } .home .process-step h3 { color: var(--navy); font-size: 1.1rem; } .home .process-step p { font-size: 0.9rem; margin-bottom: 0; } /* ========================================================================= FAQ (native

) ========================================================================= */ .home .faq-section { background-color: var(--off-white); } .home .faq-list { max-width: 820px; margin: 0 auto; } .home .faq-item { border-bottom: 1px solid var(--warm-grey); background: var(--hwhite); border-radius: var(--radius); margin-bottom: 0.75rem; box-shadow: var(--shadow-card); overflow: hidden; } .home .faq-item summary { list-style: none; cursor: pointer; padding: 1.25rem 1.5rem; font-family: var(--font-body); font-size: 1.02rem; color: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: var(--transition); } .home .faq-item summary::-webkit-details-marker { display: none; } .home .faq-item summary::after { content: '+'; font-family: var(--font-display); font-size: 1.6rem; color: var(--orange); line-height: 1; flex-shrink: 0; transition: transform 0.3s ease; } .home .faq-item[open] summary::after { transform: rotate(45deg); } .home .faq-item summary:hover { color: var(--orange); } .home .faq-item > p { padding: 0 1.5rem 1.4rem; font-size: 0.95rem; margin: 0; } /* ========================================================================= ZONES ========================================================================= */ .home .zones-section { background-color: var(--hwhite); } .home .zones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; margin-top: 2rem; } .home .zone-link { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--text-dark); background-color: var(--warm-grey); padding: 0.9rem 1.1rem; border-radius: var(--radius); border-left: 3px solid var(--orange); transition: var(--transition); } .home .zone-link:hover { background-color: var(--navy); color: var(--hwhite); transform: translateX(4px); } /* ========================================================================= FOOTER ========================================================================= */ .home .footer { background-color: var(--navy-darker); padding: 4rem 0 0; color: rgba(255, 255, 255, 0.7); } .home .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .home .footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; color: var(--hwhite); margin-bottom: 1rem; } .home .footer-col > p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 1.25rem; max-width: 280px; } .home .footer-tel { font-family: var(--font-mono); font-weight: 700; color: var(--orange); font-size: 0.95rem; } .home .footer-col h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.4); margin-bottom: 1.25rem; } .home .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .home .footer-col li { margin: 0; } .home .footer-col ul a { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); transition: var(--transition); } .home .footer-col ul a:hover { color: var(--hwhite); padding-left: 4px; } .home .footer-bottom { padding: 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .home .footer-bottom p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.35); margin: 0; } .home .footer-bottom a { color: rgba(255, 255, 255, 0.5); transition: var(--transition); } .home .footer-bottom a:hover { color: var(--hwhite); } /* ========================================================================= SCROLL REVEAL + KEYFRAMES ========================================================================= */ .home .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease, transform 0.6s ease; } .home .reveal.visible { opacity: 1; transform: translateY(0); } .home .reveal-delay-1 { transition-delay: 0.1s; } .home .reveal-delay-2 { transition-delay: 0.2s; } .home .reveal-delay-3 { transition-delay: 0.3s; } @keyframes hpSlideUp { to { opacity: 1; transform: translateY(0); } } @keyframes hpPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(249, 115, 22, 0.5); } 50% { box-shadow: 0 4px 40px rgba(249, 115, 22, 0.8), 0 0 0 8px rgba(249, 115, 22, 0.12); } } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1024px) { .home .footer-grid { grid-template-columns: 1fr 1fr; } .home .why-grid { grid-template-columns: repeat(2, 1fr); } .home .process-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .home .nav, .home .header-cta { display: none; } .home .hamburger { display: flex; } .home .hero { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); } .home .hero-content { padding: 7.5rem 0 9rem; } .home .hero-ctas { flex-direction: column; align-items: stretch; } .home .hero-ctas .btn { width: 100%; } .home .trust-grid { grid-template-columns: repeat(2, 1fr); } .home .trust-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .home .trust-item:nth-child(2n) { border-right: none; } .home .services-grid { grid-template-columns: 1fr; } .home .why-grid { grid-template-columns: 1fr; } .home .process-steps { grid-template-columns: 1fr; } .home .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .home .footer-bottom { flex-direction: column; text-align: center; } } @media (max-width: 480px) { .home .trust-grid { grid-template-columns: 1fr; } .home .trust-item { border-right: none; } .home .badge-urgence { bottom: 1rem; right: 1rem; font-size: 0.78rem; padding: 0.65rem 1rem; } .home .zones-grid { grid-template-columns: 1fr; } }