/* ============================================================ MCPI RÉNOVATION — STYLES Les design tokens sont chargés via dans le (avant ce fichier) pour éviter le blocage rendu de @import. Mobile-first · animations reveal · header compact au scroll. ============================================================ */ /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } :focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; border-radius: var(--radius-xs); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); text-wrap: balance; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); } .narrow { max-width: var(--container-narrow); margin-inline: auto; } .center { text-align: center; } .section { padding-block: var(--space-10); } .section-head { margin-bottom: var(--space-8); } .section-head h2 { font-size: var(--text-3xl); margin-block: var(--space-3); } .section-lead { color: var(--color-text-muted); font-size: var(--text-lg); max-width: 56ch; margin-inline: auto; } .overline { display: inline-block; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-primary); } .overline-light { color: var(--blue-electric-200); } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); background: var(--color-primary); color: #fff; padding: .6rem 1.2rem; border-radius: var(--radius-md); z-index: var(--z-toast); transition: top var(--duration-base); } .skip-link:focus { top: 12px; } /* ============================================================ BUTTONS ============================================================ */ .btn { --btn-py: .85rem; --btn-px: 1.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: var(--btn-py) var(--btn-px); font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-base); border-radius: var(--radius-md); line-height: 1; text-align: center; white-space: nowrap; transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .btn svg { width: 18px; height: 18px; flex: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-sm { --btn-py: .6rem; --btn-px: 1.1rem; font-size: var(--text-sm); } .btn-lg { --btn-py: 1.05rem; --btn-px: 2rem; font-size: var(--text-lg); } .btn-block { width: 100%; } .btn-primary { background: var(--color-cta-bg); color: var(--color-cta-text); box-shadow: var(--shadow-primary); } .btn-primary:hover { background: var(--color-cta-bg-hover); box-shadow: 0 14px 36px rgba(30,111,224,.4); } .btn-secondary { background: var(--color-secondary); color: #fff; } .btn-secondary:hover { background: var(--color-secondary-hover); } .btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); } .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); } .btn-ghost-dark { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); } .btn-ghost-dark:hover { background: rgba(255,255,255,.12); } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); } .site-header.scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--color-border); background: rgba(255,255,255,.94); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: .85rem; } .site-header.scrolled .header-inner { padding-block: .55rem; } .header-inner, .site-header.scrolled .header-inner { transition: padding var(--duration-base) var(--ease-out); } .header-logo { display: inline-flex; align-items: center; } .header-logo img { height: 42px; width: auto; } .logo-dark-bg { display: none; } .header-nav { display: none; gap: clamp(1rem, 2.4vw, 2rem); margin-inline: auto; } .header-nav a { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--color-text); padding: .4rem 0; position: relative; } .header-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--color-primary); transition: width var(--duration-base) var(--ease-out); } .header-nav a:hover::after { width: 100%; } .header-actions { display: flex; align-items: center; gap: .75rem; } .phone-link { display: none; align-items: center; gap: .45rem; font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--color-secondary); font-size: var(--text-base); } .phone-link:hover { color: var(--color-primary); } .header-cta { display: none; } /* Burger */ .burger { display: inline-flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .burger span { width: 24px; height: 2.5px; background: var(--color-secondary); border-radius: 2px; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast); } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Mobile nav panel */ @media (max-width: 899px) { .header-nav { position: fixed; inset: 0 0 0 auto; top: 0; bottom: 0; height: 100vh; height: 100dvh; width: min(82vw, 340px); background: var(--navy-700); color: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 0; padding: 6rem var(--space-5) var(--space-6); margin: 0; transform: translateX(100%); /* visibility:hidden quand fermé → le panneau hors-écran ne crée PAS de scroll horizontal de page. Délai sur la visibilité pour laisser l'animation de fermeture se jouer. */ visibility: hidden; transition: transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base); z-index: var(--z-overlay); box-shadow: var(--shadow-xl); } .header-nav.open { transform: translateX(0); visibility: visible; transition: transform var(--duration-base) var(--ease-out); } .header-nav a { color: #fff; font-size: var(--text-lg); padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); } .header-nav a::after { display: none; } body.nav-open { overflow: hidden; } /* Scrim sous le panneau (z-overlay = 300) mais AU-DESSUS du header sticky (z-sticky = 200) : sinon le header reste cliquable/visible par-dessus le voile. */ .nav-scrim { position: fixed; inset: 0; background: rgba(3,9,20,.55); z-index: 250; opacity: 0; visibility: hidden; transition: opacity var(--duration-base); } .nav-scrim.show { opacity: 1; visibility: visible; } } /* ============================================================ HERO ============================================================ */ /* Hero SPLIT : zone texte (navy uni) + zone photo. Le texte n'est JAMAIS superposé à la photo → plus d'illusion d'optique « texte penché ». */ .hero { position: relative; color: #fff; overflow: hidden; isolation: isolate; } .hero-inner { display: flex; flex-direction: column; } /* — Zone TEXTE : dégradé navy uni, aucune photo derrière → texte droit garanti — */ .hero-text { background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-700) 60%, var(--navy-600) 100%); } .hero-text-inner { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); padding-block: clamp(2.75rem, 9vw, 4rem); } /* — Zone PHOTO : nette et bien visible, bandeau sous le texte en mobile — */ .hero-media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Fondu navy en haut de la photo (mobile) pour une transition douce avec le bloc texte */ .hero-media-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--navy-700) 0%, rgba(10,26,51,.35) 14%, rgba(10,26,51,0) 30%); } .hero h1 { color: #fff; font-size: var(--text-4xl); font-weight: var(--weight-extrabold); margin-block: var(--space-4) var(--space-5); line-height: 1.12; letter-spacing: normal; text-wrap: balance; } .hero-accent { color: var(--blue-electric-300); } .hero-sub { font-size: var(--text-lg); color: rgba(255,255,255,.9); max-width: 60ch; line-height: var(--leading-normal); } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .hero-microcopy { margin-top: var(--space-4); font-size: var(--text-sm); color: rgba(255,255,255,.72); } /* — Desktop ≥900px : 2 colonnes côte à côte — */ @media (min-width: 900px) { .hero-inner { flex-direction: row; align-items: stretch; min-height: clamp(30rem, 56vh, 40rem); } .hero-text { flex: 0 0 52%; display: flex; align-items: center; } .hero-text-inner { margin-inline: 0; margin-left: auto; max-width: 36rem; padding-left: clamp(var(--space-6), 6vw, var(--space-12)); padding-right: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 5rem); } .hero-media { flex: 1 1 48%; aspect-ratio: auto; height: auto; } .hero-media img { position: absolute; inset: 0; } /* Fondu navy sur le bord GAUCHE de la photo → raccord propre avec la zone texte */ .hero-media-fade { background: linear-gradient(90deg, var(--navy-700) 0%, rgba(10,26,51,.55) 8%, rgba(10,26,51,0) 26%); } } /* ============================================================ TRUST BAR ============================================================ */ .trust-bar { background: var(--color-primary); background: var(--gradient-primary); color: #fff; } .trust-grid { display: grid; gap: var(--space-4); padding-block: var(--space-5); grid-template-columns: 1fr; } .trust-item { display: flex; align-items: center; gap: .9rem; } .trust-item svg { width: 28px; height: 28px; flex: none; color: #fff; background: rgba(255,255,255,.16); border-radius: var(--radius-full); padding: 5px; } .trust-item strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-lg); } .trust-item span { font-size: var(--text-sm); color: rgba(255,255,255,.82); } /* ============================================================ VALUE ============================================================ */ .section-value { background: var(--color-bg); } .section-value h2 { font-size: var(--text-2xl); margin-block: var(--space-3) var(--space-5); } .section-value p { color: var(--color-text-muted); font-size: var(--text-lg); margin-bottom: var(--space-4); } /* ============================================================ SERVICES ============================================================ */ .section-services { background: var(--color-bg-subtle); } .services-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-bottom: var(--space-8); } .service-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base); position: relative; overflow: hidden; } .service-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue-electric-200); } .service-card:hover::before { transform: scaleX(1); } .service-icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; margin-bottom: var(--space-4); } .service-icon svg { width: 30px; height: 30px; } .service-tag { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-primary); } .service-card h3 { font-size: var(--text-xl); margin-block: .4rem var(--space-3); } .service-card > p { color: var(--color-text-muted); margin-bottom: var(--space-4); } .service-list { display: grid; gap: .55rem; } .service-list li { position: relative; padding-left: 1.6rem; color: var(--color-text); font-size: var(--text-sm); } .service-list li em { color: var(--color-text-muted); font-style: italic; font-weight: var(--weight-medium); } .service-list li::before { content: ""; position: absolute; left: 0; top: .42em; width: 8px; height: 8px; background: var(--color-primary); border-radius: 2px; transform: rotate(45deg); } /* ============================================================ ZONE ============================================================ */ .section-zone { background: var(--navy-700); color: #fff; position: relative; overflow: hidden; } .section-zone::after { content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(30,111,224,.35), transparent 70%); pointer-events: none; } .zone-grid { display: grid; gap: var(--space-7); grid-template-columns: 1fr; align-items: center; position: relative; z-index: 1; } .zone-text h2 { color: #fff; font-size: var(--text-3xl); margin-block: var(--space-3) var(--space-4); } .zone-text p { color: rgba(255,255,255,.82); font-size: var(--text-lg); margin-bottom: var(--space-4); } .zone-text .btn { margin-top: var(--space-2); } .cities-list { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem .9rem; } .cities-list li { display: flex; align-items: center; gap: .55rem; font-weight: var(--weight-medium); font-size: var(--text-base); color: rgba(255,255,255,.92); } .cities-list li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-electric-400); box-shadow: 0 0 0 4px rgba(61,130,236,.18); flex: none; } .cities-note { margin-top: var(--space-4); color: rgba(255,255,255,.78); font-size: var(--text-sm); font-style: italic; } /* ============================================================ GALLERY (carrousel) ============================================================ */ .section-gallery { background: var(--color-bg); } .gallery { position: relative; display: flex; align-items: center; gap: var(--space-3); max-width: 100%; } .gallery-track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-block: var(--space-2); flex: 1; min-width: 0; /* indispensable : sans ça le flex-item grandit avec son contenu et la PAGE scrolle */ scrollbar-width: none; -ms-overflow-style: none; } .gallery-track::-webkit-scrollbar { display: none; } .gallery-item { flex: 0 0 auto; width: min(78vw, 340px); scroll-snap-align: center; } .gallery-thumb { display: block; width: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); position: relative; aspect-ratio: 4/3; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); } .gallery-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(10,26,51,0); transition: background var(--duration-base); } .gallery-thumb:hover img { transform: scale(1.06); } .gallery-thumb:hover::after { background: rgba(10,26,51,.12); } .gallery-nav { display: none; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-md); align-items: center; justify-content: center; flex: none; transition: background var(--duration-fast), transform var(--duration-fast); } .gallery-nav svg { width: 26px; height: 26px; } .gallery-nav:hover { background: var(--color-primary); color: #fff; transform: scale(1.08); } /* ============================================================ AVANT / APRÈS ============================================================ */ .section-beforeafter { background: var(--color-bg-subtle); } .ba-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } .ba-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); } .ba-slider { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; background: var(--slate-200); } .ba-slider .ba-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ba-before-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; will-change: width; } /* L'image "avant" garde la largeur PLEINE du slider et reste calée à gauche, pour rester parfaitement alignée avec l'image "après" pendant le clip. */ .ba-before-wrap .ba-before { position: absolute; left: 0; top: 0; height: 100%; max-width: none; width: var(--ba-w, 100%); object-fit: cover; pointer-events: none; } .ba-label { position: absolute; top: var(--space-3); z-index: 3; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: .35rem .7rem; border-radius: var(--radius-full); color: #fff; backdrop-filter: blur(4px); } .ba-label-before { left: var(--space-3); background: rgba(10,26,51,.72); } .ba-label-after { right: var(--space-3); background: rgba(30,111,224,.85); } .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 4; width: 44px; display: flex; align-items: center; justify-content: center; } .ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(10,26,51,.18); } .ba-handle svg { width: 24px; height: 24px; color: var(--color-primary); position: relative; z-index: 1; background: #fff; border-radius: var(--radius-full); padding: 8px; box-sizing: content-box; box-shadow: var(--shadow-md); } .ba-card figcaption { padding: var(--space-5); } .ba-card figcaption h3 { font-size: var(--text-xl); margin-bottom: .5rem; } .ba-card figcaption p { color: var(--color-text-muted); font-size: var(--text-base); } /* ============================================================ ENGAGEMENTS (remplace l'ancienne section "avis") ============================================================ */ .section-engagements { background: var(--gradient-hero); color: #fff; } .section-engagements h2 { color: #fff; font-size: var(--text-3xl); } .section-lead-light { color: rgba(255,255,255,.88); } .engagements-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } .engagement-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding: var(--space-6); backdrop-filter: blur(8px); transition: transform var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast); } .engagement-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.09); } .engagement-icon { width: 48px; height: 48px; display: grid; place-items: center; background: rgba(255,255,255,.14); border-radius: var(--radius-md); margin-bottom: var(--space-4); } .engagement-icon svg { width: 26px; height: 26px; color: var(--blue-electric-300); } .engagement-card h3 { color: #fff; font-size: var(--text-xl); margin-bottom: var(--space-2); } .engagement-card p { color: rgba(255,255,255,.9); font-size: var(--text-base); line-height: var(--leading-relaxed); } .engagement-firstclient { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.22); border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); } .engagement-firstclient p { color: rgba(255,255,255,.92); font-size: var(--text-base); max-width: 56ch; margin: 0; } /* ============================================================ AVIS CLIENTS (carrousel) ============================================================ */ .section-reviews { background: var(--color-bg-subtle); } .reviews { position: relative; display: flex; align-items: stretch; gap: var(--space-3); max-width: 100%; } .reviews-track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-block: var(--space-2); flex: 1; min-width: 0; /* idem galerie : confine le scroll au track, pas à la page */ scrollbar-width: none; -ms-overflow-style: none; } .reviews-track::-webkit-scrollbar { display: none; } .review-card { flex: 0 0 auto; width: min(86vw, 380px); scroll-snap-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base); } .review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-electric-200); } .review-stars { display: flex; gap: 2px; } .review-stars svg { width: 20px; height: 20px; color: #F5A623; } .review-text { color: var(--color-text); font-size: var(--text-base); line-height: var(--leading-relaxed); margin: 0; font-style: normal; flex: 1; } .review-text::before { content: "\201C"; color: var(--color-primary); font-weight: 700; } .review-text::after { content: "\201D"; color: var(--color-primary); font-weight: 700; } .review-author { display: flex; align-items: center; gap: .75rem; margin-top: var(--space-2); } .review-avatar { width: 44px; height: 44px; flex: none; border-radius: var(--radius-full); background: var(--gradient-primary); color: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-lg); } .review-meta { display: flex; flex-direction: column; gap: 1px; } .review-meta strong { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--color-text); } .review-meta span { font-size: var(--text-sm); color: var(--color-text-muted); } .reviews-nav { display: none; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-md); align-self: center; align-items: center; justify-content: center; flex: none; transition: background var(--duration-fast), transform var(--duration-fast), color var(--duration-fast); } .reviews-nav svg { width: 26px; height: 26px; } .reviews-nav:hover { background: var(--color-primary); color: #fff; transform: scale(1.08); } .reviews-note { text-align: center; margin-top: var(--space-5); color: var(--color-text-subtle); font-size: var(--text-sm); font-style: italic; } /* ============================================================ FAQ ============================================================ */ .section-faq { background: var(--color-bg); } .faq-list { display: grid; gap: var(--space-3); } .faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--duration-base), box-shadow var(--duration-base); } .faq-item[open] { border-color: var(--blue-electric-200); box-shadow: var(--shadow-sm); } .faq-item summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-5); font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--color-text); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; flex: none; width: 22px; height: 22px; background: var(--color-primary-soft); border-radius: 50%; position: relative; transition: transform var(--duration-base) var(--ease-out); background-image: linear-gradient(var(--color-primary),var(--color-primary)), linear-gradient(var(--color-primary),var(--color-primary)); background-size: 11px 2px, 2px 11px; background-position: center; background-repeat: no-repeat; } .faq-item[open] summary::after { transform: rotate(135deg); } .faq-body { padding: 0 var(--space-5) var(--space-4); } .faq-body p { color: var(--color-text-muted); } .faq-item[open] .faq-body { animation: faqReveal var(--duration-base) var(--ease-out); } @keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ DEVIS + FORMULAIRE ============================================================ */ .section-devis { background: var(--navy-700); color: #fff; } .devis-grid { display: grid; gap: var(--space-7); grid-template-columns: 1fr; } .devis-text h2 { color: #fff; font-size: var(--text-3xl); margin-block: var(--space-3) var(--space-4); } .devis-text > p { color: rgba(255,255,255,.85); font-size: var(--text-lg); } .devis-points { display: grid; gap: .75rem; margin-block: var(--space-5); } .devis-points li { display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.92); } .devis-points svg { width: 22px; height: 22px; flex: none; color: var(--blue-electric-300); } .devis-contact { display: grid; gap: .6rem; margin-top: var(--space-5); } .contact-line { display: flex; align-items: center; gap: .7rem; color: #fff; font-weight: var(--weight-medium); } .contact-line svg { width: 20px; height: 20px; color: var(--blue-electric-300); flex: none; } a.contact-line:hover { color: var(--blue-electric-200); } .contact-static { color: rgba(255,255,255,.85); } /* Form card */ .devis-form-wrap { } .devis-form { background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xl); } .form-title { font-size: var(--text-xl); margin-bottom: .3rem; } .form-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); } .field { margin-bottom: var(--space-4); } .field label { display: block; font-weight: var(--weight-medium); font-size: var(--text-sm); margin-bottom: .4rem; color: var(--color-text); } .req { color: var(--color-error); } .field input, .field select, .field textarea { width: 100%; padding: .8rem .9rem; font: inherit; font-size: var(--text-base); color: var(--color-text); background: var(--color-bg-subtle); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-primary-soft); } .field input.invalid, .field select.invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(212,60,60,.14); } .field textarea { resize: vertical; min-height: 110px; } /* Honeypot */ .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } .form-microcopy { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-4); } /* Submit + spinner */ #devisSubmit { margin-top: var(--space-2); position: relative; } .btn-spinner { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; } .btn.loading .btn-label { opacity: .65; } .btn.loading .btn-spinner { display: inline-block; } .btn.loading { pointer-events: none; } @keyframes spin { to { transform: rotate(360deg); } } .form-feedback { margin-top: var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-sm); display: none; } .form-feedback.show { display: block; padding: .9rem 1rem; } .form-feedback.success { background: var(--color-success-soft); color: var(--green-success); border: 1px solid var(--green-success); } .form-feedback.error { background: rgba(212,60,60,.1); color: var(--color-error); border: 1px solid var(--color-error); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--navy-900); color: rgba(255,255,255,.78); padding-top: var(--space-8); } .footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; padding-bottom: var(--space-7); } .footer-brand img { height: 48px; width: auto; margin-bottom: var(--space-3); } .footer-brand p { font-size: var(--text-sm); max-width: 42ch; } .footer-tagline { margin-top: var(--space-3); color: var(--blue-electric-200); font-style: italic; } .footer-col h4 { font-size: var(--text-base); color: #fff; margin-bottom: var(--space-3); } .footer-col ul { display: grid; gap: .55rem; } .footer-col a, .footer-contact li { font-size: var(--text-sm); color: rgba(255,255,255,.75); transition: color var(--duration-fast); } .footer-col a:hover { color: var(--blue-electric-200); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--space-4); } .footer-bottom-inner { display: flex; flex-direction: column; gap: .6rem; align-items: center; text-align: center; } .footer-bottom p { font-size: var(--text-sm); color: rgba(255,255,255,.6); } .footer-legal a { font-size: var(--text-sm); color: rgba(255,255,255,.7); } .footer-legal a:hover { color: #fff; text-decoration: underline; } /* ============================================================ FLOATING CALL (mobile) ============================================================ */ .floating-call { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky); width: 58px; height: 58px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-primary); animation: pulseCall 2.4s var(--ease-in-out) infinite; } .floating-call:hover { background: var(--color-primary-hover); } @keyframes pulseCall { 0%,100% { box-shadow: 0 8px 24px rgba(30,111,224,.4); } 50% { box-shadow: 0 8px 24px rgba(30,111,224,.4), 0 0 0 12px rgba(30,111,224,.0); } } @media (min-width: 900px) { .floating-call { display: none; } } /* ============================================================ COOKIE BANNER ============================================================ */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-toast); background: var(--navy-800); color: #fff; box-shadow: 0 -8px 30px rgba(3,9,20,.4); padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform var(--duration-slow) var(--ease-out); } .cookie-banner.show { transform: translateY(0); } .cookie-inner { max-width: var(--container-max); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); } .cookie-inner p { font-size: var(--text-sm); color: rgba(255,255,255,.85); } .cookie-actions { display: flex; gap: .75rem; justify-content: flex-end; } /* ============================================================ LIGHTBOX ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(3,9,20,.92); display: flex; align-items: center; justify-content: center; padding: var(--space-5); opacity: 0; transition: opacity var(--duration-base); } .lightbox[hidden] { display: none; } .lightbox.show { opacity: 1; } .lightbox-img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); object-fit: contain; } .lightbox-close, .lightbox-nav { position: absolute; width: 52px; height: 52px; border-radius: var(--radius-full); background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); transition: background var(--duration-fast); } .lightbox-close svg, .lightbox-nav svg { width: 28px; height: 28px; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.25); } .lightbox-close { top: 20px; right: 20px; } .lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); } /* ============================================================ REVEAL ON SCROLL ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal="off"] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .btn:hover, .service-card:hover, .gallery-nav:hover { transform: none; } .floating-call { animation: none; } .gallery-track, .reviews-track { scroll-behavior: auto; } } /* ============================================================ MOBILE FIX (≤600px) — anti-débordement horizontal + air Objectif : document.scrollWidth === innerWidth à 390px. ============================================================ */ @media (max-width: 600px) { /* — Boutons : plus de nowrap qui force la largeur, jamais plus large que l'écran — */ .btn { white-space: normal; /* le libellé peut passer sur 2 lignes au lieu de déborder */ max-width: 100%; text-align: center; word-break: break-word; } /* CTA hero + CTA de section en pleine largeur (touch-friendly, lisible) */ .hero-cta .btn, .inline-cta .hero-cta .btn, .zone-text .btn { width: 100%; } .hero-cta, .inline-cta .hero-cta { gap: var(--space-3); } /* — Confinement des carrousels : le track scrolle EN INTERNE, jamais la page — */ .section-gallery .container, .section-reviews .container { overflow-x: clip; } .gallery, .reviews { max-width: 100%; } .gallery-track, .reviews-track { max-width: 100%; } /* sécurité : un item ne peut pas être plus large que le viewport */ .gallery-item { width: min(80vw, 320px); max-width: 88vw; } .review-card { width: min(86vw, 340px); max-width: 90vw; } /* — Hero : H1 plus mesuré + de l'air à droite — */ .hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.4rem); line-height: 1.15; } .hero-text-inner { max-width: 100%; } .hero-sub { font-size: var(--text-base); } /* — Pages internes : même traitement du titre — */ .page-hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); } /* — Tap targets confortables sur les liens de nav internes/footer — */ .footer-col a, .footer-legal a { display: inline-block; padding-block: .15rem; } } /* Garde-fou GLOBAL : aucun bloc de section ne crée de scroll latéral. (les carrousels gardent leur scroll interne via leurs propres règles) */ @media (max-width: 899px) { .section { overflow-x: clip; } } /* ============================================================ RESPONSIVE — TABLET ============================================================ */ @media (min-width: 600px) { .trust-grid { grid-template-columns: repeat(3, 1fr); padding-block: var(--space-6); } .services-grid { grid-template-columns: repeat(2, 1fr); } .engagements-grid { grid-template-columns: repeat(2, 1fr); } .ba-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 2fr 1fr 1fr; } .footer-contact { grid-column: 2 / 4; } } @media (min-width: 768px) { .section { padding-block: var(--space-12); } .hero h1 { font-size: var(--text-5xl); } .section-head h2, .zone-text h2, .devis-text h2, .section-engagements h2 { font-size: var(--text-4xl); } .zone-grid { grid-template-columns: 1.1fr .9fr; gap: var(--space-10); } .cities-list { grid-template-columns: 1fr 1fr 1fr; } .gallery-nav { display: flex; } .reviews-nav { display: flex; } .review-card { width: min(46vw, 360px); } .devis-grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-8); align-items: start; } .cookie-inner { flex-direction: row; align-items: center; justify-content: space-between; } .cookie-actions { flex: none; } .footer-bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; } .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } .footer-contact { grid-column: auto; } } /* ============================================================ RESPONSIVE — DESKTOP ============================================================ */ @media (min-width: 900px) { .header-nav { display: flex; } .phone-link { display: inline-flex; } .header-cta { display: inline-flex; } .burger { display: none; } .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .services-grid { grid-template-columns: repeat(4, 1fr); } .service-card { padding: var(--space-5); } .service-card h3 { font-size: var(--text-lg); } .engagements-grid { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ NAV DROPDOWN (menu Services) — desktop hover/focus + mobile accordéon ============================================================ */ .nav-item { position: relative; } /* Bouton parent du sous-menu (desktop : ressemble aux autres liens) */ .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--color-text); padding: .4rem 0; position: relative; } .nav-dropdown-toggle .nav-chevron { width: 16px; height: 16px; flex: none; transition: transform var(--duration-base) var(--ease-out); } .nav-dropdown-toggle::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--color-primary); transition: width var(--duration-base) var(--ease-out); } .nav-item:hover .nav-dropdown-toggle::after, .nav-item:focus-within .nav-dropdown-toggle::after { width: 100%; } /* Panneau du sous-menu — desktop */ .nav-submenu { display: grid; gap: 2px; margin: 0; padding: var(--space-2); list-style: none; } @media (min-width: 900px) { .nav-submenu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 220px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); z-index: var(--z-dropdown); } /* petit pont invisible pour ne pas perdre le hover entre le toggle et le panneau */ .nav-submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .nav-item:hover .nav-submenu, .nav-item:focus-within .nav-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-item:hover .nav-chevron, .nav-item:focus-within .nav-chevron { transform: rotate(180deg); } .nav-submenu a { display: block; padding: .6rem .8rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-base); color: var(--color-text); transition: background var(--duration-fast), color var(--duration-fast); } .nav-submenu a::after { display: none; } .nav-submenu a:hover, .nav-submenu a:focus-visible { background: var(--color-primary-soft); color: var(--color-primary); } } /* Mobile : sous-menu déplié dans le panneau latéral */ @media (max-width: 899px) { .nav-dropdown-toggle { width: 100%; justify-content: space-between; color: #fff; font-size: var(--text-lg); padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); } .nav-dropdown-toggle::after { display: none; } .nav-dropdown-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); } .nav-submenu { max-height: 0; overflow: hidden; padding: 0; gap: 0; transition: max-height var(--duration-base) var(--ease-out); } .nav-submenu.open { max-height: 320px; } .nav-submenu a { color: rgba(255,255,255,.85); font-size: var(--text-base); padding: .85rem 0 .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); } .nav-submenu a::after { display: none; } } /* ============================================================ PAGES INTERNES — sous-hero + breadcrumb + prose ============================================================ */ .page-hero { background: var(--gradient-hero); color: #fff; padding-block: clamp(2.5rem, 8vw, 5rem) clamp(2.5rem, 7vw, 4rem); position: relative; overflow: hidden; isolation: isolate; } .page-hero::after { content: ""; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(30,111,224,.35), transparent 70%); pointer-events: none; z-index: -1; } .page-hero .overline { color: var(--blue-electric-200); } .page-hero h1 { color: #fff; font-size: var(--text-3xl); margin-block: var(--space-3) var(--space-4); max-width: 22ch; line-height: 1.12; } .page-hero-lead { color: rgba(255,255,255,.88); font-size: var(--text-lg); max-width: 60ch; } .page-hero .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } /* Breadcrumb */ .breadcrumb { padding-block: var(--space-4); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; font-size: var(--text-sm); } .breadcrumb li { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-text-muted); } .breadcrumb a { color: var(--color-primary); font-weight: var(--weight-medium); } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb li[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-medium); } .breadcrumb .crumb-sep { color: var(--color-text-subtle); } /* Prose — corps des pages services/villes */ .section-prose { background: var(--color-bg); } .prose { max-width: 760px; margin-inline: auto; } .prose > p { color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); } .prose h2 { font-size: var(--text-2xl); margin-block: var(--space-8) var(--space-4); padding-top: var(--space-2); } .prose h2:first-of-type { margin-top: var(--space-2); } .prose h3 { font-size: var(--text-xl); margin-block: var(--space-6) var(--space-3); color: var(--color-text); } .prose h3 + p { margin-top: 0; } .prose h2 + p { margin-top: 0; } .prose ul { display: grid; gap: .6rem; margin-bottom: var(--space-5); } .prose ul li { position: relative; padding-left: 1.6rem; color: var(--color-text); font-size: var(--text-base); line-height: var(--leading-normal); } .prose ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--color-primary); border-radius: 2px; transform: rotate(45deg); } /* Encart "Ce que ça vous apporte" */ .prose-highlight { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin-block: var(--space-6); } .prose-highlight h2 { margin-top: 0; } .prose-highlight p { color: var(--color-text-muted); margin-bottom: var(--space-3); } .prose-highlight p:last-child { margin-bottom: 0; } /* CTA inline (mid-page) */ .inline-cta { background: var(--navy-700); color: #fff; border-radius: var(--radius-lg); padding: var(--space-6); margin-block: var(--space-8); text-align: center; } .inline-cta h2 { color: #fff; font-size: var(--text-xl); margin-bottom: var(--space-2); } .inline-cta p { color: rgba(255,255,255,.85); margin-bottom: var(--space-5); max-width: 52ch; margin-inline: auto; } .inline-cta .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } /* Tableau citable (GEO/AEO) — comparatifs, repères de prix indicatifs */ .geo-table-wrap { margin-block: var(--space-6); overflow-x: auto; -webkit-overflow-scrolling: touch; } .geo-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; min-width: 32rem; } .geo-table caption { caption-side: bottom; text-align: left; color: var(--color-text-subtle); font-size: var(--text-sm); padding-top: var(--space-3); line-height: var(--leading-normal); } .geo-table th, .geo-table td { padding: .7rem var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; } .geo-table thead th { background: var(--color-bg-subtle); color: var(--color-text); font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-sm); } .geo-table tbody th { color: var(--color-text); font-weight: var(--weight-semibold); white-space: nowrap; } .geo-table tbody td { color: var(--color-text-muted); } .geo-table tbody tr:last-child th, .geo-table tbody tr:last-child td { border-bottom: 0; } .geo-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Maillage interne (liens en bas de page) */ .section-linking { background: var(--color-bg-subtle); } .linking-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } .linking-col h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); } .linking-col ul { display: grid; gap: .55rem; } .linking-col ul li::before { display: none; } .linking-col a { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-primary); font-weight: var(--weight-medium); font-size: var(--text-base); } .linking-col a:hover { text-decoration: underline; } .linking-col a svg { width: 16px; height: 16px; flex: none; } @media (min-width: 700px) { .linking-grid { grid-template-columns: 1fr 1fr; } } /* ============================================================ PAGE ZONES (hub villes) ============================================================ */ .section-zones-hub { background: var(--color-bg); } .zones-cards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-6); } .zone-city-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base); display: flex; flex-direction: column; gap: var(--space-3); position: relative; overflow: hidden; } .zone-city-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); } .zone-city-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue-electric-200); } .zone-city-card:hover::before { transform: scaleX(1); } .zone-city-card .zone-city-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; } .zone-city-card .zone-city-icon svg { width: 26px; height: 26px; } .zone-city-card h3 { font-size: var(--text-xl); } .zone-city-card p { color: var(--color-text-muted); font-size: var(--text-base); flex: 1; } .zone-city-card .zone-city-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-primary); font-family: var(--font-heading); font-weight: var(--weight-semibold); margin-top: auto; } .zone-city-card .zone-city-link svg { width: 18px; height: 18px; transition: transform var(--duration-fast); } .zone-city-card:hover .zone-city-link svg { transform: translateX(3px); } .zones-soon { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); background: var(--color-bg-subtle); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); text-align: center; color: var(--color-text-muted); } .zones-soon strong { color: var(--color-text); } @media (min-width: 700px) { .zones-cards { grid-template-columns: repeat(3, 1fr); } } /* Liens villes cliquables dans la section #zone de l'accueil */ .cities-list a { color: inherit; transition: color var(--duration-fast); } .cities-list a:hover { color: var(--blue-electric-200); text-decoration: underline; } /* ============================================================ DARK MODE — ajustements surfaces ============================================================ */ @media (prefers-color-scheme: dark) { .nav-submenu { background: var(--color-surface); border-color: var(--color-border); } .nav-submenu a { color: var(--slate-100); } .breadcrumb { background: var(--color-bg-subtle); border-color: var(--color-border); } .breadcrumb li[aria-current="page"] { color: var(--slate-100); } .section-prose, .section-zones-hub { background: var(--color-bg); } .section-linking, .prose-highlight { background: var(--color-bg-subtle); } .zone-city-card { background: var(--color-surface); border-color: var(--color-border); } .zones-soon { background: var(--color-bg-subtle); border-color: var(--color-border-strong); } .site-header { background: rgba(6,16,31,.8); } .site-header.scrolled { background: rgba(6,16,31,.94); } .logo-light-bg { display: none; } .logo-dark-bg { display: block; } .burger span { background: var(--slate-100); } .phone-link { color: var(--slate-100); } .header-nav a { color: var(--slate-100); } .section-value, .section-gallery, .section-faq { background: var(--color-bg); } .section-services, .section-beforeafter, .section-reviews { background: var(--color-bg-subtle); } .service-card, .faq-item, .ba-card, .review-card, .reviews-nav { background: var(--color-surface); border-color: var(--color-border); } .geo-table { background: var(--color-surface); border-color: var(--color-border); } .geo-table thead th { background: var(--color-bg-muted); } .geo-table th, .geo-table td { border-color: var(--color-border); } .field input, .field select, .field textarea { background: var(--navy-900); color: var(--slate-50); border-color: var(--color-border); } .devis-form { background: var(--color-surface); } .form-title, .field label { color: var(--slate-50); } }