/* ========================================================================== COGEFLANDRE — Revised Premium Stylesheet (Corporate Redesign) Palette, Fonts, Circular Pictos, Grid layouts and Mobile Responsive ========================================================================== */ /* -------------------------------------------------------------------------- 01. DESIGN SYSTEM VARIABLES -------------------------------------------------------------------------- */ /* Les polices sont chargees via dans le (voir build/partials/head.html). */ :root { /* Exact colors from original identity */ --primary-color: #133454; /* Original Corporate Dark Navy (#133454) */ --primary-light: #74a7c9; /* Accent active medium blue (#74a7c9) */ --primary-dark: #0a1d2f; --secondary-color: #9C1C18; /* Crimson Red accent from logo 'F' */ --secondary-light: #B82520; --accent-color: #74a7c9; /* Sky blue highlight (#74a7c9) */ --accent-light: #a6c7dd; /* Lighter tint of #74a7c9 */ /* Backgrounds - Dominante de blanc & épuré */ --white: #ffffff; /* Pure white color */ --bg-light: #ffffff; /* Pure white background */ --bg-white: #ffffff; --bg-beige: #f8fafc; /* Soft cool gray-blue background for section alternate */ --bg-beige-warm: #FAF8F5; /* Refined light ivory background */ --bg-beige-light: #ffffff; --bg-header: #ffffff; /* Clean white headers */ --bg-dark: #133454; /* Text Colors */ --text-dark: #2D3748; /* Slightly softer dark charcoal for premium readability */ --text-muted: #64748B; /* Softer slate gray */ --text-light: #FCFBFA; --text-light-muted: #A3B5C9; /* Typography */ --font-heading: 'Plus Jakarta Sans', sans-serif; --font-body: 'Inter', sans-serif; /* Borders & Spacings */ --border-color: #eef1f4; --border-color-light: #e6f1f8; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 59, 92, 0.04); --shadow-md: 0 8px 24px rgba(0, 59, 92, 0.06); --shadow-lg: 0 16px 40px rgba(0, 59, 92, 0.1); /* Radii & Transitions */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); --section-padding: clamp(3.5rem, 6vw, 6rem); } /* -------------------------------------------------------------------------- 02. BASE RESETS & HELPER CLASSES -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } html { overflow-x: clip; } body { font-family: var(--font-body); background-color: var(--bg-light); color: var(--text-dark); line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; } a { color: inherit; text-decoration: none; transition: var(--transition-fast); } img { display: block; max-width: 100%; height: auto; } .text-center { text-align: center; } .text-white { color: var(--text-light); } /* Headings & Badges */ .section-badge { display: inline-block; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary-light); background-color: transparent; padding: 0; border-radius: 0; margin-bottom: 16px; } .section-badge.badge-white { color: var(--accent-light); background-color: rgba(255, 255, 255, 0.1); } .section-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -0.5px; color: var(--primary-color); margin-bottom: 20px; line-height: 1.3; } .section-subtitle { font-size: 0.95rem; font-weight: 400; color: var(--text-dark); max-width: 700px; margin: 0 auto 48px auto; text-wrap: pretty; line-height: 1.6; } .section-divider { width: 60px; height: 2px; background-color: var(--primary-light); margin: 16px auto 0 auto; border-radius: 1px; } /* Scroll Animation classes */ .scroll-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .scroll-reveal.active { opacity: 1; transform: translateY(0); } /* -------------------------------------------------------------------------- 03. BUTTONS & CTAS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.3px; text-transform: none; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-smooth); border: 1px solid transparent; } .btn-primary { background-color: var(--primary-light); color: var(--white); box-shadow: var(--shadow-sm); } .btn-primary:hover { background-color: var(--primary-color); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-secondary { background-color: var(--bg-beige); color: var(--primary-color); border: 1px solid var(--border-color); } .btn-secondary:hover { background-color: var(--white); border-color: var(--primary-color); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-outline { background-color: transparent; border: 2px solid var(--primary-light); color: var(--primary-color); } .btn-outline:hover { background-color: var(--primary-light); color: var(--white); transform: translateY(-2px); } .btn-outline-light { background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.4); color: var(--white); } .btn-outline-light:hover { background-color: var(--white); color: var(--primary-color); border-color: var(--white); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 04. TOP BAR & STICKY HEADER -------------------------------------------------------------------------- */ /* -- White Header Nav Bar -- */ .main-header { background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(19, 52, 84, 0.05); position: sticky; top: 0; z-index: 100; padding: 16px 0; transition: var(--transition-smooth); } .main-header.scrolled { padding: 12px 0; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 20px rgba(19, 52, 84, 0.03); border-bottom-color: rgba(19, 52, 84, 0.08); } .header-container { display: flex; justify-content: space-between; align-items: center; } .brand-logo { display: flex; align-items: center; transition: var(--transition-smooth); } .logo-image { height: 52px; width: auto; transition: var(--transition-smooth); } .main-header.scrolled .logo-image { height: 46px; } /* Nav menu: items + Contact CTA grouped on the right */ .nav-menu { display: flex; align-items: center; gap: 8px; } .nav-menu > ul { list-style: none; display: flex; gap: 20px; margin-right: 28px; } .nav-menu > ul > li > a { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.2px; color: var(--text-dark); position: relative; padding: 6px 0; transition: var(--transition-fast); } .nav-menu > ul > li > a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--primary-light); border-radius: var(--radius-full); transition: var(--transition-smooth); } .nav-menu > ul > li > a:hover::after, .nav-menu > ul > li > a.active-link::after { width: 100%; } .nav-menu > ul > li > a:hover { color: var(--primary-color); } .nav-menu > ul > li > a.active-link { color: var(--primary-color); font-weight: 600; } /* Dropdown navigation styles */ .has-dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; width: 340px; background-color: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 8px 30px rgba(19, 52, 84, 0.12); padding: 8px 0; z-index: 1000; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease 0.3s, transform 0.25s ease 0.3s, visibility 0.25s 0.3s; display: flex; flex-direction: column; gap: 0; margin: 0; list-style: none; text-align: left; } .has-dropdown:hover .dropdown-menu, .has-dropdown:focus-within .dropdown-menu, .has-dropdown.open .dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } .dropdown-menu li { padding: 0; margin: 0 !important; } .dropdown-menu a { display: block; width: 100%; box-sizing: border-box; padding: 9px 20px 9px 20px; color: var(--text-dark); font-family: var(--font-heading); font-size: 0.85rem; font-weight: 500; text-decoration: none; text-align: left; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, font-weight 0.2s ease; position: relative; border-left: 3px solid transparent; } .dropdown-menu a::after { display: none !important; } .dropdown-menu a:hover { background-color: var(--bg-beige); color: #0b1f33; /* Teinte plus foncée pour meilleur contraste */ font-weight: 600; border-left-color: var(--primary-light); } .dropdown-menu a.active-link { background-color: #eaf3f8; color: var(--primary-color); border-left-color: var(--primary-light); font-weight: 600; } /* ── Category headers ── */ .dropdown-menu .dropdown-header { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--primary-light); padding: 16px 20px 8px 20px; /* 3px invisible border so text aligns with link text */ border-left: 3px solid transparent; letter-spacing: 0.08em; list-style: none; cursor: default; pointer-events: none; margin-top: 2px; text-align: left; } /* ── Sub-items: identical style to regular links ── */ .dropdown-menu a.dropdown-subitem { /* No overrides — inherits from .dropdown-menu a */ } .nav-arrow { display: inline-block; font-size: 0.65rem; margin-left: 4px; transition: transform 0.2s ease; vertical-align: middle; } .has-dropdown:hover .nav-arrow, .has-dropdown:focus-within .nav-arrow, .has-dropdown.open .nav-arrow { transform: rotate(180deg); } /* Contact CTA button inside the nav */ .nav-contact-btn { padding: 10px 24px !important; font-size: 0.82rem !important; border-radius: var(--radius-md) !important; text-transform: none !important; letter-spacing: 0.3px !important; font-weight: 700 !important; background-color: var(--primary-color) !important; color: var(--white) !important; box-shadow: 0 4px 12px rgba(19, 52, 84, 0.1) !important; border: 1px solid transparent !important; } .nav-contact-btn:hover { background-color: var(--primary-light) !important; color: var(--white) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(128, 166, 198, 0.2) !important; } .nav-contact-btn.active-contact-btn { background-color: var(--primary-light) !important; border-color: var(--primary-light) !important; box-shadow: 0 4px 12px rgba(116, 167, 201, 0.2) !important; } /* Mobile toggle */ .mobile-toggle { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 16px; cursor: pointer; z-index: 110; background: none; border: none; } .mobile-toggle span { width: 100%; height: 2px; background-color: var(--primary-color); border-radius: var(--radius-full); transition: var(--transition-smooth); } /* Mobile-only menu items (hidden on desktop) */ .mobile-only { display: none !important; } /* Mobile overlay backdrop */ .nav-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(19, 52, 84, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 104; cursor: pointer; } .nav-overlay.active { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- 05. HERO SECTION (SPLIT LAYOUT WITH TEAM PHOTO) - LIGHT & CLASSY THEME -------------------------------------------------------------------------- */ .hero-section { background: radial-gradient(circle at 80% 20%, rgba(128, 166, 198, 0.08) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #ffffff 0%, #FAF8F5 100%); color: var(--text-dark); padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(4rem, 8vw, 6.5rem) 0; /* Reduced top padding to decrease empty space under header */ position: relative; overflow: hidden; border-bottom: 1px solid var(--border-color); } .hero-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; /* 45% text / 55% photo split */ gap: 64px; align-items: center; } .hero-content { display: flex; flex-direction: column; align-items: flex-start; } /* -- Hero Badge -- */ .hero-badge { display: inline-block; color: var(--primary-color); font-family: var(--font-heading); font-size: 11px; font-weight: 700; margin-bottom: 12px; letter-spacing: 1.5px; text-transform: uppercase; border-left: 4px solid #6ba4c9; padding-left: 8px; } .hero-title { font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 3.0rem); font-weight: 700; line-height: 1.1; margin-top: 4px; margin-bottom: 24px; color: var(--primary-color); letter-spacing: -0.8px; } .hero-title .highlight { color: var(--primary-light); font-weight: 700; } .hero-subtitle { font-size: 1rem; font-weight: 400; line-height: 1.7; color: var(--text-dark); margin-bottom: 40px; max-width: 500px; text-wrap: pretty; } .hero-actions { display: flex; gap: 16px; } .hero-actions .btn { border-radius: var(--radius-md); padding: 13px 30px; font-size: 0.88rem; text-transform: none; font-weight: 700; letter-spacing: 0.3px; } .hero-actions .btn-primary { background-color: var(--primary-color); color: var(--white); box-shadow: 0 4px 14px rgba(19, 52, 84, 0.15); } .hero-actions .btn-primary:hover { background-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(128, 166, 198, 0.25); } .hero-actions .btn-outline { border: 2px solid var(--primary-light); color: var(--primary-color); background-color: transparent; } .hero-actions .btn-outline:hover { background-color: var(--primary-light); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(128, 166, 198, 0.2); } .hero-visual { position: relative; padding-right: 12px; align-self: stretch; } .hero-visual .team-photo-container { height: 100%; } .hero-visual .team-photo-container img { height: 100%; object-fit: cover; object-position: center 30%; } .team-photo-container { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px rgba(19, 52, 84, 0.08); position: relative; transition: var(--transition-smooth); } .team-photo-container img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } /* -------------------------------------------------------------------------- 06. REASSURANCE SECTION (TRUST INDICATORS) -------------------------------------------------------------------------- */ .trust-section { padding: 0 0 60px 0; /* Bottom padding to resolve the empty gap below the bandeau */ margin-top: -70px; /* Overlaps hero section to look premium */ position: relative; z-index: 20; background-color: #FAF8F5; /* Matches hero bottom and expertises top to remove weird white strip */ } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); background-color: var(--white); border-radius: 20px; box-shadow: 0 16px 40px rgba(19, 52, 84, 0.05); border: 1px solid rgba(19, 52, 84, 0.06); overflow: hidden; } .trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 24px; background-color: var(--white); transition: var(--transition-smooth); position: relative; } /* Fine vertical separators */ .trust-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 25%; height: 50%; width: 1px; background-color: rgba(19, 52, 84, 0.08); } .trust-item:hover { background-color: rgba(128, 166, 198, 0.03); transform: translateY(-2px); } .trust-icon-wrapper { width: 52px; height: 52px; background-color: rgba(128, 166, 198, 0.1); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: var(--transition-smooth); } .trust-item:hover .trust-icon-wrapper { background-color: var(--primary-light); color: var(--white); transform: scale(1.08); } .trust-icon { transition: var(--transition-smooth); } .trust-item h3 { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--primary-color); margin-bottom: 6px; } .trust-item p { font-size: 0.82rem; font-weight: 400; color: var(--text-dark); line-height: 1.4; margin: 0; } /* -------------------------------------------------------------------------- 07. EXPERTISES SECTION (PREMIUM 5-COLUMN CARD GRID LAYOUT) -------------------------------------------------------------------------- */ .expertises-section { padding: var(--section-padding) 0; background: radial-gradient(circle at 50% -20%, rgba(128, 166, 198, 0.18) 0%, rgba(19, 52, 84, 0) 60%), radial-gradient(circle at 50% 30%, #133454 0%, #071524 100%); background-color: #071524; border-bottom: 1px solid rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; } .expertises-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 15% 25%, rgba(128, 166, 198, 0.04) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(128, 166, 198, 0.04) 0%, transparent 45%); pointer-events: none; z-index: 1; } .expertises-section .container { position: relative; z-index: 2; } .expertises-badge { display: block; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-light); /* Accent medium/light blue #a6c7dd */ margin-bottom: 16px; } .expertises-section .section-title { font-family: var(--font-body); font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; color: #f8fafc; /* Blanc cassé */ margin-bottom: 20px; line-height: 1.3; letter-spacing: -0.5px; } .expertises-section .section-subtitle { font-family: var(--font-body); font-size: 0.95rem; color: #a0b2c6; /* Bleuté clair */ margin: 0 auto 48px auto; font-weight: 400; line-height: 1.6; max-width: 640px; } .expertises-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 54px; } .expertise-card { position: relative; top: 0; overflow: hidden; background: rgba(255, 255, 255, 0.06); /* Lightened transparent glass */ border-radius: 16px; padding: 20px 28px 36px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.12); /* Slightly more visible border */ display: flex; flex-direction: column; align-items: flex-start; text-align: left; text-decoration: none; color: inherit; transition: var(--transition-smooth); } .expertise-card:hover { top: -6px; background: rgba(255, 255, 255, 0.12); /* Even lighter on hover */ border-color: rgba(128, 166, 198, 0.45); /* Accent medium blue */ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 25px rgba(128, 166, 198, 0.12); } .expertise-icon-box { width: 150px; height: 150px; background-color: transparent; border: none; padding: 0; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; transition: var(--transition-smooth); } .expertise-picto-img { width: 150px; height: 150px; object-fit: contain; filter: url(#remove-white-bg); transition: var(--transition-smooth); } .expertise-card:hover .expertise-picto-img { filter: url(#remove-white-bg-hover); transform: scale(1.08); } .expertise-card h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: #f8fafc; /* Blanc cassé */ margin-bottom: 12px; line-height: 1.3; } .expertise-card p { font-size: 0.85rem; color: #a0b2c6; /* Texte secondaire bleuté clair */ line-height: 1.5; margin: 0 0 16px 0; font-weight: 400; } .expertise-link { margin-top: auto; padding-top: 12px; font-size: 0.8rem; font-weight: 600; color: var(--primary-light); /* Accent medium blue (#74a7c9) */ display: inline-flex; align-items: center; transition: var(--transition-smooth); opacity: 0.85; } .expertise-card:hover .expertise-link { color: #ffffff; opacity: 1; transform: translateX(4px); } .btn-cta-premium { display: inline-flex; align-items: center; justify-content: center; background-color: var(--white); color: var(--primary-color); padding: 14px 36px; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; transition: var(--transition-smooth); box-shadow: 0 4px 14px rgba(255, 255, 255, 0.05); border: 1px solid transparent; text-transform: none; } .btn-cta-premium:hover { background-color: var(--primary-light); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(128, 166, 198, 0.3); } /* -------------------------------------------------------------------------- 08. SECTEURS D'ACTIVITE SECTION -------------------------------------------------------------------------- */ .secteurs-section { padding: var(--section-padding) 0; background-color: var(--bg-beige); /* Soft cool gray-blue background to make white cards stand out more */ border-bottom: 1px solid rgba(19, 52, 84, 0.05); border-top: 1px solid rgba(19, 52, 84, 0.05); } .secteurs-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 48px; margin-top: 12px; } .sector-card { background-color: var(--white); border: 1px solid rgba(19, 52, 84, 0.06); border-radius: 16px; padding: 30px 4px; text-align: center; transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 170px; box-shadow: 0 4px 12px rgba(19, 52, 84, 0.02); position: relative; } .sector-card::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background-color: var(--primary-light); border-radius: 0 0 4px 4px; transition: var(--transition-smooth); } .sector-card:hover { transform: translateY(-6px); box-shadow: 0 20px 35px rgba(19, 52, 84, 0.06); border-color: rgba(128, 166, 198, 0.2); } .sector-card:hover::after { width: 40%; } .sector-icon { width: 38px; height: 38px; color: var(--primary-color); margin-bottom: 20px; transition: var(--transition-smooth); } .sector-card:hover .sector-icon { color: var(--primary-light); transform: scale(1.1); } .sector-title { font-family: var(--font-heading); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; color: var(--primary-color); line-height: 1.45; } .secteurs-footer-text { font-size: 0.95rem; font-weight: 400; color: var(--text-dark); margin-top: 40px; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- 10. ACTUS & PORTAL SECTION (INTEGRATED COMPLEMENT) -------------------------------------------------------------------------- */ .resources-section { padding: clamp(2.2rem, 4vw, 3.5rem) 0 var(--section-padding) 0; background: linear-gradient(180deg, #E6EFF5 0%, #D1E0EC 100%); background-color: #D9E8F2; color: var(--primary-color); text-align: center; border-bottom: 1px solid var(--border-color); position: relative; overflow: hidden; } .decor-shape { position: absolute; pointer-events: none; z-index: 1; color: var(--primary-color); opacity: 0.06; /* Subtly visible 6% opacity */ width: 180px; height: 180px; } .decor-shape svg { width: 100%; height: 100%; display: block; } .decor-shape-left { top: -20px; left: -20px; } .decor-shape-right { bottom: -20px; right: -20px; transform: rotate(180deg); } .resources-container { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; } .resources-icon-wrapper { margin-bottom: 14px; } .resources-picto { width: 140px; height: 140px; object-fit: contain; margin: 0 auto; /* Center the block image */ } .resources-badge { display: block; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--primary-color); margin-bottom: 24px; } .resources-title-new { font-family: var(--font-body); font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; color: var(--primary-color); margin-bottom: 28px; line-height: 1.3; letter-spacing: -0.5px; } .resources-text-new { font-family: var(--font-body); font-size: 0.95rem; color: #3A4E63; margin-bottom: 40px; font-weight: 400; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; } .btn-capsule-white { background-color: var(--white); color: var(--primary-color); padding: 12px 32px; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 700; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition-smooth); box-shadow: var(--shadow-sm); border: 1px solid transparent; text-transform: none; /* Override parent uppercase rule */ } .btn-capsule-white:hover { background-color: var(--primary-light); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-capsule-dark { background-color: var(--primary-color); color: var(--white); padding: 12px 32px; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 700; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition-smooth); box-shadow: var(--shadow-sm); border: 1px solid transparent; text-transform: none; /* Override parent uppercase rule */ } .btn-capsule-dark:hover { background-color: var(--primary-light); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* -------------------------------------------------------------------------- 10.5. PROMO REFORME 2026 SECTION (NAVY BLUE THEME) -------------------------------------------------------------------------- */ .promo-reform-section { padding: var(--section-padding) 0; background-color: var(--primary-color); text-align: center; position: relative; overflow: hidden; } .promo-reform-container { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; } .promo-reform-badge { display: inline-block; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-light); margin-bottom: 16px; } .promo-reform-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 700; letter-spacing: -0.5px; color: var(--white); margin-bottom: 20px; line-height: 1.25; } .promo-reform-text { font-family: var(--font-body); font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); margin-bottom: 40px; font-weight: 400; line-height: 1.7; max-width: 760px; margin-left: auto; margin-right: auto; text-wrap: pretty; } .promo-reform-actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; } .btn-promo-primary { background-color: var(--white); color: var(--primary-color); border: 2px solid var(--white); } .btn-promo-primary:hover { background-color: var(--primary-light); border-color: var(--primary-light); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-promo-secondary { background-color: transparent; color: var(--white); border: 2px solid rgba(255, 255, 255, 0.6); } .btn-promo-secondary:hover { background-color: var(--primary-light); border-color: var(--primary-light); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* -------------------------------------------------------------------------- 11. CONTACT & ACCESS DETAILS -------------------------------------------------------------------------- */ .contact-section { padding: var(--section-padding) 0; background-color: var(--white); } .contact-container { max-width: 1100px; } .contact-card { background-color: var(--white); border: 1px solid rgba(19, 52, 84, 0.06); border-radius: 24px; padding: 60px; box-shadow: 0 20px 50px rgba(19, 52, 84, 0.04); display: flex; flex-direction: column; gap: 48px; background-image: radial-gradient(circle at 100% 0%, rgba(128, 166, 198, 0.04) 0%, transparent 40%); } .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: center; } .contact-content { text-align: left; } .contact-badge { display: inline-block; color: var(--primary-color); font-family: var(--font-heading); font-size: 11px; font-weight: 700; margin-bottom: 20px; letter-spacing: 1.5px; text-transform: uppercase; border-left: 4px solid var(--primary-light); padding-left: 8px; } .contact-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--primary-color); margin-bottom: 20px; line-height: 1.25; letter-spacing: -0.5px; } .contact-text { font-size: 1rem; font-weight: 400; color: var(--text-dark); margin-bottom: 32px; line-height: 1.6; } .contact-actions { display: flex; justify-content: flex-start; align-items: center; gap: 20px; flex-wrap: wrap; } .contact-visual { position: relative; display: flex; justify-content: center; align-items: center; } .expert-photo-container { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; box-shadow: 0 15px 35px rgba(19, 52, 84, 0.08); border: 1px solid rgba(19, 52, 84, 0.06); transition: var(--transition-smooth); } .expert-photo-container:hover { transform: translateY(-4px); box-shadow: 0 20px 45px rgba(19, 52, 84, 0.12); } .expert-photo { width: 100%; height: 100%; object-fit: cover; } .expert-badge { position: absolute; bottom: -15px; background-color: var(--white); border-radius: 12px; padding: 10px 18px; box-shadow: 0 10px 25px rgba(19, 52, 84, 0.08); border: 1px solid rgba(19, 52, 84, 0.06); display: flex; flex-direction: column; align-items: center; z-index: 5; transition: var(--transition-smooth); } .expert-badge .expert-name { font-size: 0.9rem; font-weight: 800; color: var(--primary-color); line-height: 1.2; } .expert-badge .expert-role { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } .contact-content { text-align: center; } .contact-actions { justify-content: center; } .contact-visual { order: -1; margin-bottom: 20px; } } .contact-actions .btn { padding: 13px 32px; font-size: 0.9rem; font-weight: 700; border-radius: var(--radius-md); text-transform: none; letter-spacing: 0.3px; } .contact-actions .btn-primary { background-color: var(--primary-color); color: var(--white); box-shadow: 0 4px 14px rgba(19, 52, 84, 0.15); } .contact-actions .btn-primary:hover { background-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(128, 166, 198, 0.25); } .contact-actions .btn-outline.secondary-cta { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--primary-light); color: var(--primary-color); background-color: transparent; } .contact-actions .btn-outline.secondary-cta:hover { background-color: var(--primary-light); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(128, 166, 198, 0.2); } .contact-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid rgba(19, 52, 84, 0.08); padding-top: 48px; } .contact-info-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: 12px; transition: var(--transition-smooth); } .contact-info-item:hover { background-color: rgba(128, 166, 198, 0.05); } .contact-info-item .info-icon { width: 48px; height: 48px; background-color: rgba(128, 166, 198, 0.1); color: var(--primary-color); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-smooth); } .contact-info-item:hover .info-icon { background-color: var(--primary-color); color: var(--white); } .contact-info-item .info-icon svg { stroke-width: 1.75px; } .contact-info-item .info-content h4 { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--primary-color); margin-bottom: 8px; letter-spacing: 0.5px; } .contact-info-item .info-content p { font-size: 0.88rem; font-weight: 400; color: var(--text-dark); line-height: 1.55; margin-bottom: 6px; } .contact-info-item .info-content .contact-clickable { color: var(--text-dark); font-weight: 600; transition: var(--transition-fast); } .contact-info-item .info-content .contact-clickable:hover { color: var(--primary-light); } .contact-info-item .info-content .info-link { font-size: 0.85rem; font-weight: 700; color: var(--primary-light); display: inline-block; transition: var(--transition-fast); } .contact-info-item .info-content .info-link:hover { color: var(--primary-color); transform: translateX(4px); } /* Asymmetrical Grid layout on Desktop viewports */ @media (min-width: 992px) { .contact-card { padding: 60px 80px; } } /* --- Modal styles --- */ .booking-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .booking-modal.show { opacity: 1; pointer-events: auto; } .modal-overlay { position: absolute; inset: 0; background-color: rgba(19, 52, 84, 0.4); backdrop-filter: blur(4px); } .modal-container { background-color: var(--white); border-radius: var(--radius-lg); width: 90%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 40px; box-shadow: var(--shadow-lg); position: relative; z-index: 1010; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .booking-modal.show .modal-container { transform: scale(1); } .modal-close-btn { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--text-muted); transition: var(--transition-fast); line-height: 1; } .modal-close-btn:hover { color: var(--primary-color); } .modal-header { margin-bottom: 28px; text-align: center; } .modal-header h3 { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--primary-color); margin-bottom: 8px; } .modal-header p { font-size: 0.95rem; color: var(--text-dark); line-height: 1.5; } .modal-form { position: relative; } @media (max-width: 991px) { .contact-card { padding: 40px 24px; gap: 36px; } } /* Form Container Styling */ .form-card { background-color: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 36px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .form-header { margin-bottom: 24px; } .form-header h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; color: var(--primary-color); margin-bottom: 8px; } .form-header p { font-size: 0.85rem; color: var(--text-dark); } .form-group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group.full-width { grid-column: span 2; } .form-group label { font-size: 0.85rem; font-weight: 700; color: var(--text-dark); } .form-group input, .form-group select, .form-group textarea { background-color: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.9rem; color: var(--text-dark); transition: var(--transition-fast); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { background-color: var(--white); border-color: var(--primary-light); } .form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23536271' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .checkbox-group { flex-direction: row; align-items: flex-start; gap: 10px; margin-top: 6px; } .checkbox-group input { margin-top: 3px; width: auto; } .checkbox-group label { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); line-height: 1.4; cursor: pointer; } .error-message { display: none; font-size: 0.75rem; color: var(--secondary-color); font-weight: 600; margin-top: 2px; } .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: var(--secondary-color); background-color: rgba(156, 28, 24, 0.02); } .form-group.has-error .error-message { display: block; } .submit-btn-wrapper { margin-top: 20px; } .btn-submit { width: 100%; justify-content: center; background-color: var(--primary-light); color: var(--white); padding: 12px 24px; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; transition: var(--transition-smooth); border: none; } .btn-submit:hover { background-color: var(--primary-color); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; } .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: var(--white); border-radius: var(--radius-full); animation: spin-anim 0.8s linear infinite; } @keyframes spin-anim { to { transform: rotate(360deg); } } .form-success-alert { position: absolute; inset: 0; background-color: var(--white); padding: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 10; transform: translateY(100%); transition: var(--transition-smooth); } .form-success-alert.show-success { transform: translateY(0); } .success-icon-badge { width: 60px; height: 60px; background-color: rgba(16, 185, 129, 0.08); color: #10B981; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; } .form-success-alert h4 { font-family: var(--font-heading); font-size: 1.35rem; color: var(--primary-color); margin-bottom: 8px; text-transform: uppercase; } .form-success-alert p { font-size: 0.9rem; color: var(--text-dark); max-width: 320px; margin-bottom: 24px; line-height: 1.5; } /* -------------------------------------------------------------------------- 12. FOOTER -------------------------------------------------------------------------- */ .main-footer { background-color: var(--primary-color); /* Dark Navy blue background */ color: rgba(255, 255, 255, 0.7); padding: 50px 0 0 0; /* Reduced top padding */ border-top: none; } .footer-grid { display: grid; grid-template-columns: 1.5fr 0.7fr 1.1fr 1fr; gap: 40px; margin-bottom: 40px; /* Reduced bottom margin */ } .footer-brand { display: flex; flex-direction: column; align-items: flex-start; } .footer-logo-link { display: inline-flex; align-items: center; margin-bottom: 12px; transition: var(--transition-smooth); } .footer-logo-link:hover { transform: translateY(-2px); } .footer-logo-img { height: 32px; width: auto; } .footer-brand-desc { font-size: 0.8rem; font-weight: 400; line-height: 1.65; color: rgba(255, 255, 255, 0.7); margin-top: 16px; margin-bottom: 0; max-width: 280px; } .footer-legal-mention { font-size: 0.72rem; line-height: 1.5; color: rgba(255, 255, 255, 0.5); /* Soft white-grey secondary description */ margin-top: 16px; margin-bottom: 0; } .footer-address-link { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: var(--transition-fast); display: inline-block; } .footer-phone-link { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--white); display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; transition: var(--transition-fast); } .footer-email-link { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--white); display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; transition: var(--transition-fast); } .footer-links-col a.footer-address-link:hover, .footer-links-col a.footer-phone-link:hover, .footer-links-col a.footer-email-link:hover { color: var(--primary-light) !important; } .footer-links-col .footer-title { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; color: var(--white); /* White headings for premium contrast */ letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 24px; } .footer-links-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; } .footer-links-col a { font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); transition: var(--transition-fast); position: relative; padding-bottom: 2px; } .footer-links-col a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--primary-light); transition: var(--transition-fast); } .footer-links-col a:hover::after { width: 100%; } .footer-links-col a:hover { color: var(--white); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); /* Soft white border for dark bottom bar */ padding: 20px 0; /* Reduced vertical padding */ font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); } .footer-bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-legal-links { display: flex; align-items: center; gap: 16px; } .footer-legal-links a { color: rgba(255, 255, 255, 0.5); transition: var(--transition-fast); position: relative; padding-bottom: 2px; } .footer-legal-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--primary-light); transition: var(--transition-fast); } .footer-legal-links a:hover::after { width: 100%; } .footer-legal-links a:hover { color: var(--white); } .footer-legal-links .separator { color: rgba(255, 255, 255, 0.15); } /* -------------------------------------------------------------------------- 13. RESPONSIVE MEDIA QUERIES -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .expertises-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } .secteurs-grid { grid-template-columns: repeat(3, 1fr); } .stats-grid-revised { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991px) { .hero-section { padding: 2.5rem 0 2rem 0; } .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 32px; } .hero-content { align-items: center; } .hero-actions { justify-content: center; } .hero-visual { max-width: 520px; margin: 0 auto; width: 100%; } .trust-section { margin-top: -15px; } .trust-grid { grid-template-columns: repeat(2, 1fr); } .trust-item { padding: 24px 16px; } .trust-item::after { display: none !important; } .trust-icon-wrapper { margin-bottom: 12px; } .resources-grid { grid-template-columns: 1fr; gap: 40px; } .contact-grid { grid-template-columns: 1fr; gap: 48px; } .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } .expertises-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 768px) { .container { padding: 0 16px; } .logo-image { height: 38px; } .main-header.scrolled .logo-image { height: 34px; } .main-header.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--white); } .mobile-toggle { display: flex; } .mobile-only { display: block !important; } .nav-menu { position: fixed; top: 0; right: -100%; width: 85%; max-width: 360px; height: 100vh; height: 100dvh; background: var(--bg-white); box-shadow: -10px 0 40px rgba(0, 59, 92, 0.15); flex-direction: column; justify-content: flex-start; padding: 90px 24px 40px 24px; transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1); z-index: 105; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-menu.open { right: 0; } .nav-menu > ul { flex-direction: column; gap: 12px; margin-right: 0; margin-bottom: 32px; width: 100%; } .nav-menu > ul > li { width: 100%; border-bottom: 1px solid var(--border-color-light); padding-bottom: 8px; } .nav-menu > ul > li:last-child { border-bottom: none; } .nav-menu > ul > li > a { font-size: 1.15rem; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px 0; } .nav-menu > ul > li > a::after { display: none !important; } .dropdown-menu { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; border: none; padding: 4px 0 4px 16px; margin: 4px 0 0 8px; min-width: auto; width: auto; background: transparent; display: none; /* hidden by default on mobile for accordion */ flex-direction: column; gap: 8px; transition: none; } .has-dropdown.open .dropdown-menu { display: flex; } .dropdown-menu a { font-size: 14px; padding: 14px 0 14px 15px; /* Indentation de 15px, padding vertical pour remplacer min-height */ color: var(--text-dark); font-family: var(--font-heading); font-weight: 500; display: flex; align-items: flex-start; text-decoration: none; border-left: none; transition: var(--transition-fast); line-height: 1.4; } .dropdown-menu a::before { content: "›"; color: var(--primary-light); font-size: 1.15rem; font-weight: bold; line-height: 1; margin-right: 8px; margin-top: 2px; /* Alignement avec la première ligne */ transition: transform 0.2s ease, color 0.2s ease; } .dropdown-menu a:hover { background-color: transparent; color: var(--primary-color); } .dropdown-menu a:hover::before { color: var(--primary-color); transform: translateX(3px); } .dropdown-menu a.active-link { background-color: transparent; color: var(--primary-color); font-weight: 700; } .dropdown-menu a.active-link::before { color: var(--primary-color); transform: translateX(3px); } .dropdown-menu .dropdown-header { display: none !important; /* Masquer les titres de sections sur mobile */ } .dropdown-menu a.dropdown-subitem { /* No overrides — inherits from .dropdown-menu a */ } /* .dropdown-menu a.dropdown-subitem::before { content: none; } */ .nav-arrow { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background-color: var(--bg-beige); border-radius: 50%; margin-left: 12px; flex-shrink: 0; color: var(--primary-color); transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; } .has-dropdown.open .nav-arrow { background-color: var(--primary-light); color: var(--white); transform: rotate(180deg); } .nav-contact-btn { align-self: flex-start; } .mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-toggle.active span:nth-child(2) { opacity: 0; } .mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .secteurs-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .sector-card { flex-direction: row; align-items: center; justify-content: center; gap: 12px; min-height: auto; padding: 16px 20px; } .sector-icon { margin-bottom: 0; flex-shrink: 0; width: 28px; height: 28px; } .sector-title { white-space: nowrap; margin: 0; } .stats-grid-revised { grid-template-columns: repeat(2, 1fr); } .expertise-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 20px; row-gap: 8px; align-items: start; padding: 24px; } .expertise-icon-box { grid-column: 1; grid-row: 1 / span 3; width: 80px; height: 80px; margin-bottom: 0; } .expertise-picto-img { width: 80px; height: 80px; } .expertise-card h3 { grid-column: 2; grid-row: 1; margin-bottom: 4px; } .expertise-card p { grid-column: 2; grid-row: 2; margin-bottom: 8px; } .expertise-card .expertise-link { grid-column: 2; grid-row: 3; margin-top: 0; padding-top: 0; } } @media (max-width: 580px) { .expertises-grid { grid-template-columns: 1fr; gap: 16px; } .trust-grid { grid-template-columns: 1fr; } .trust-item { padding: 16px 16px; } .trust-icon-wrapper { margin-bottom: 10px; } .secteurs-grid { grid-template-columns: 1fr; gap: 10px; } .sector-card { padding: 12px 16px; justify-content: center; gap: 12px; } .sector-icon { width: 24px; height: 24px; } .sector-title { font-size: 0.72rem; white-space: nowrap; } .stats-grid-revised { grid-template-columns: 1fr; } .form-group-grid { grid-template-columns: 1fr; } .form-group.full-width { grid-column: span 1; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .hero-actions, .promo-reform-actions, .contact-actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; } .hero-actions .btn, .promo-reform-actions .btn, .contact-actions .btn { width: 100%; padding: 12px 28px; font-size: 0.88rem; } .form-card { padding: 24px; } } /* ========================================================================== 13. PAGES SECONDAIRES (ACTUALITÉS) ========================================================================== */ /* -- Page Header -- */ .page-header-section { background-color: var(--bg-beige); padding: clamp(1.5rem, 3.5vw, 2.5rem) 0; border-bottom: 1px solid rgba(19, 52, 84, 0.05); text-align: center; } .page-header-section .hero-badge { margin-left: auto; margin-right: auto; display: inline-flex; font-size: 0.78rem; padding: 6px 14px; margin-bottom: 12px; } .page-header-section h1 { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -0.5px; color: var(--primary-color); margin-bottom: 20px; line-height: 1.3; } .page-header-section p { font-size: 0.95rem; font-weight: 400; color: var(--text-dark); max-width: 700px; margin: 0 auto; text-wrap: pretty; line-height: 1.6; } /* -- IFrame Section -- */ .iframe-section { padding: clamp(3rem, 5vw, 5rem) 0; background-color: var(--white); } .iframe-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); overflow: hidden; padding: 0; transition: var(--transition-smooth); } .iframe-card iframe { display: block; width: 100%; border: none; min-height: 800px; background: var(--white); } @media (max-width: 768px) { .iframe-section { padding: 1.5rem 0; } .iframe-card { border-radius: var(--radius-md); border: none; box-shadow: none; } } /* -- Contact Page -- */ .contact-page-section { padding: clamp(3rem, 5vw, 5rem) 0; background-color: var(--white); } .contact-page-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; } .contact-info-card { background: var(--bg-beige); border-radius: var(--radius-lg); border: 1px solid var(--border-color); padding: 32px; } .contact-info-card h2 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--primary-color); margin-bottom: 24px; } .contact-info-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; } .contact-info-item { display: flex; gap: 16px; align-items: flex-start; } .contact-info-icon { width: 44px; height: 44px; background-color: rgba(128, 166, 198, 0.12); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-smooth); } .contact-info-item:hover .contact-info-icon { background-color: var(--primary-light); color: var(--white); } .contact-info-text h3 { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--primary-color); margin-bottom: 4px; } .contact-info-text p, .contact-info-text a { font-size: 0.88rem; color: var(--text-dark); line-height: 1.5; margin: 0; } .contact-info-text a:hover { color: var(--primary-color); } .contact-address-link { text-decoration: none; transition: var(--transition-fast); display: inline-block; } .contact-address-link:hover { color: var(--primary-color); } .contact-map-container { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); height: 250px; } .contact-map-container iframe { width: 100%; height: 100%; border: none; display: block; } /* Full-width map strip at the bottom of the contact page */ .contact-map-fullwidth { width: 100%; height: 400px; max-height: 400px; display: block; border-top: 1px solid var(--border-color); } .contact-map-fullwidth iframe { width: 100%; height: 100%; border: none; display: block; } .calendly-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); overflow: hidden; padding: 0; transition: var(--transition-smooth); } .calendly-card-header { display: flex; align-items: center; gap: 16px; padding: 24px 28px 20px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-beige); } .calendly-card-icon { width: 48px; height: 48px; background-color: rgba(116, 167, 201, 0.12); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .calendly-card-title-block { display: flex; flex-direction: column; gap: 4px; } .calendly-card-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--primary-color); margin: 0; line-height: 1.25; } .calendly-card-subtitle { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.5; } @media (max-width: 1024px) { .contact-page-grid { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 768px) { .contact-info-list { gap: 24px; margin-bottom: 20px; } .contact-info-item { gap: 12px; padding: 0 0 10px 0; } .contact-info-item:last-child { padding-bottom: 0; } .contact-info-icon { width: 38px; height: 38px; } } @media (max-width: 580px) { .contact-info-card { padding: 20px; } .contact-info-list { gap: 20px; margin-bottom: 16px; } .contact-info-item { gap: 12px; padding: 0 0 12px 0; } .contact-info-item:last-child { padding-bottom: 0; } .contact-info-icon { width: 34px; height: 34px; } .contact-map-container { height: 200px; } } /* ========================================================================== 14. PAGE EXPERTISES DÉTAILLÉES (LAYOUT DE LA HOME) ========================================================================== */ /* --- Split 2-column layout (pillar-section--split) --- */ .pillar-section.pillar-section--split { padding: 2.5rem 0 var(--section-padding) 0; border-bottom: 1px solid var(--border-color); background-color: var(--white); } .pillar-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } /* Left column — styled after hero-content */ .pillar-split-left { display: flex; flex-direction: column; align-items: flex-start; } /* Sur-titre : hérite du .section-badge déjà défini, aligné à gauche */ .pillar-split-left .section-badge { margin-bottom: 14px; } /* Les hero-badge utilisés comme overlines de section s'affichent en capitales */ .pillar-split-left .hero-badge { text-transform: uppercase; letter-spacing: 1px; } /* Titre principal façon hero-title */ .pillar-split-title { font-family: var(--font-heading); font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.6px; color: var(--primary-color); margin-top: 4px; margin-bottom: 20px; } /* Paragraphe façon hero-subtitle */ .pillar-split-desc { font-size: 0.97rem; font-weight: 400; line-height: 1.7; color: var(--text-dark); margin-bottom: 16px; text-wrap: pretty; } /* Encart "Pour qui ?" inline dans la colonne gauche */ .pillar-target-block.pillar-target-block--inline { width: 100%; max-width: none; margin: 12px 0 20px 0; border-left: none; padding-left: 0; } .pillar-target-block.pillar-target-block--inline .target-label { display: block; margin-bottom: 6px; text-transform: uppercase; color: var(--accent-color); letter-spacing: 1.5px; } /* Section Réforme facturation électronique */ .reform-section { padding: 56px 0; background: linear-gradient(180deg, #E6EFF5 0%, #D1E0EC 100%); border-bottom: 1px solid var(--border-color); text-align: center; } .reform-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; } .reform-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--primary-color); margin-bottom: 12px; } .reform-desc { font-family: var(--font-body); font-size: 0.95rem; color: var(--text-dark); line-height: 1.65; margin: 0 auto; max-width: 720px; } .reform-action { margin-top: 8px; } .reform-action .btn-outline { display: inline-flex; align-items: center; justify-content: center; background-color: var(--white); border: 2px solid var(--primary-light); color: var(--primary-color); padding: 12px 28px; font-weight: 600; font-size: 0.88rem; white-space: nowrap; border-radius: var(--radius-md); transition: var(--transition-smooth); } .reform-action .btn-outline:hover { background-color: var(--primary-light); color: var(--white); transform: translateY(-2px); } .pillar-split-cta { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; } .pillar-split-cta .btn { border-radius: var(--radius-md); padding: 13px 28px; font-size: 0.88rem; text-transform: none; font-weight: 700; letter-spacing: 0.3px; } .pillar-split-cta .btn-primary { background-color: var(--primary-color); color: var(--white); box-shadow: 0 4px 14px rgba(19, 52, 84, 0.15); } .pillar-split-cta .btn-primary:hover { background-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(128, 166, 198, 0.25); } .pillar-split-cta .btn-outline { border: 2px solid var(--primary-light); color: var(--primary-color); background-color: transparent; } .pillar-split-cta .btn-outline:hover { background-color: var(--primary-light); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(128, 166, 198, 0.2); } /* Right column — lightweight service list */ .pillar-split-right { padding: 8px 0; } .pillar-split-right .team-photo-container { max-height: 360px; border-radius: 16px; } .pillar-split-right .team-photo-container img { height: 100%; max-height: 360px; object-fit: cover; object-position: center 30%; } .pillar-service-list { list-style: none; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; } .pillar-service-item { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border-color); transition: var(--transition-fast); } .pillar-service-item:last-child { border-bottom: none; } .pillar-service-bullet { width: 7px; height: 7px; border-radius: 50%; background-color: var(--primary-light); flex-shrink: 0; margin-top: 7px; transition: var(--transition-fast); } .pillar-service-body { display: flex; flex-direction: column; gap: 3px; } .pillar-service-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--primary-color); margin: 0; line-height: 1.35; } .pillar-service-desc { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-dark); line-height: 1.55; margin: 0; } /* Responsive split layout */ @media (max-width: 991px) { .pillar-split-grid { grid-template-columns: 1fr; gap: 48px; } .pillar-split-title { font-size: clamp(1.5rem, 4vw, 2rem); } .pillar-target-block--inline { max-width: 100%; } } @media (max-width: 580px) { .pillar-split-grid { gap: 36px; } .pillar-service-item { padding: 14px 0; } } .pillar-section { padding: var(--section-padding) 0; border-bottom: 1px solid var(--border-color); background-color: var(--white); } /* Alternate background for every other pillar section: Pillar 2 (Vie de l'entreprise) gets beige bg. Uses :nth-child to count only among siblings with this class. */ #creation-juridique { background-color: var(--bg-beige); } .pillar-section-icon-wrapper { display: flex; justify-content: center; margin-bottom: 18px; } .pillar-section-icon { width: 80px; height: 80px; object-fit: contain; filter: url(#remove-white-bg); /* primary light blue color */ } #facturation-electronique .resources-picto { transform: translateX(21px); } /* Services card grid */ .pillar-value-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 48px; margin-bottom: 40px; } .pillar-value-card { position: relative; flex: 0 1 calc(33.333% - 16px); min-width: 290px; background-color: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); /* Standardized 8px radius */ padding: 30px 24px; box-shadow: 0 4px 12px rgba(19, 52, 84, 0.02); transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: flex-start; text-align: left; overflow: hidden; } /* Card hover animation like sector-card::after on home page */ .pillar-value-card::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background-color: var(--primary-light); border-radius: 0 0 4px 4px; transition: var(--transition-smooth); } .pillar-value-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(19, 52, 84, 0.06); border-color: rgba(128, 166, 198, 0.25); } .pillar-value-card:hover::after { width: 40%; } .pillar-value-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; width: 100%; } /* Bullet decoration with outer ring expanding on hover */ .pillar-value-bullet { width: 8px; height: 8px; border-radius: 50%; background-color: var(--primary-light); margin-top: 6px; position: relative; flex-shrink: 0; } .pillar-value-bullet::after { content: ''; position: absolute; top: -5px; left: -5px; width: 18px; height: 18px; border: 1px solid rgba(116, 167, 201, 0.3); border-radius: 50%; box-sizing: border-box; transition: var(--transition-smooth); } .pillar-value-card:hover .pillar-value-bullet::after { border-color: var(--primary-light); transform: scale(1.15); } .pillar-value-title { font-family: var(--font-heading); font-size: 1.05rem; color: var(--primary-color); font-weight: 700; margin: 0; line-height: 1.35; } .pillar-value-desc { font-family: var(--font-body); font-size: 0.88rem; color: var(--text-dark); line-height: 1.6; margin: 0; } /* Target Audience Block (Pour qui ?) */ .pillar-target-block { margin: 32px auto; max-width: 800px; padding: 2px 0 2px 16px; background-color: transparent; border-left: 3px solid var(--accent-color); } .pillar-target-block .target-label { font-family: var(--font-heading); font-weight: 700; color: var(--accent-color); margin-right: 6px; } .pillar-target-block .target-text { font-family: var(--font-body); font-size: 0.92rem; color: var(--text-dark); line-height: 1.6; margin: 0; } .pillar-action-btn-wrapper { margin-top: 24px; } @media (max-width: 992px) { .pillar-value-card { flex: 0 1 calc(50% - 12px); /* 2 columns */ } } @media (max-width: 768px) { .pillar-target-block { margin: 24px auto; } } @media (max-width: 640px) { .pillar-value-grid { gap: 16px; margin-top: 36px; } .pillar-value-card { flex: 0 1 100%; /* 1 column */ padding: 24px 20px; } } /* Custom digital tools card and alternate sections layout */ .digital-tools-col { align-self: center; width: 100%; } .digital-tools-card { background-color: #F2F8FC; /* Fond bleu très clair */ border: 1px solid #DCE4EC; /* Fine bordure gris-bleu */ border-radius: 12px; /* Coins arrondis à 12px */ padding: 24px 24px 20px; box-shadow: var(--shadow-sm); width: 100%; } .digital-tools-title { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; color: var(--primary-color); /* Bleu foncé */ text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; position: relative; padding-bottom: 8px; } .digital-tools-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 36px; height: 2px; background-color: var(--primary-light); } .digital-tools-subtitle { font-size: 0.88rem; color: var(--text-dark); font-weight: 500; margin-bottom: 16px; line-height: 1.4; } .digital-tools-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .digital-tool-item a { display: block; padding: 12px 16px; background-color: #ffffff; /* Sous-carte blanche */ border: 1px solid #E2E8F0; /* Bordure discrète */ border-radius: var(--radius-md, 8px); /* Coins arrondis */ text-decoration: none; color: inherit; box-shadow: 0 2px 4px rgba(0, 59, 92, 0.02); transition: var(--transition-smooth); } .digital-tool-item a:hover { border-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(19, 52, 84, 0.08); /* Effet cliquable */ } .tool-title { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--primary-color); margin-bottom: 3px; line-height: 1.3; } .tool-desc { font-size: 0.82rem; color: var(--text-dark); line-height: 1.4; } .tool-action-btn { display: block; color: var(--primary-light); font-weight: 600; margin-top: 5px; font-size: 0.8rem; transition: var(--transition-fast); } .digital-tool-item a:hover .tool-action-btn { color: var(--primary-color); } /* Digital Tools Footer Link */ .digital-tools-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid #DCE4EC; text-align: center; } .digital-tools-footer-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--primary-light); text-decoration: none; transition: var(--transition-smooth); } .digital-tools-footer-link:hover { color: var(--primary-color); gap: 10px; } /* Reversing grid columns on desktop */ @media (min-width: 992px) { .pillar-split-grid--reverse > :first-child { order: 2; } .pillar-split-grid--reverse > :last-child { order: 1; } } /* Alternate background for Social & RH to preserve page rhythm */ #social-paie { background-color: var(--bg-beige); } /* Audit & Commissariat aux comptes */ .audit-commissariat-section { padding: clamp(3rem, 5vw, 4rem) 0; text-align: center; background-color: var(--white); border-bottom: 1px solid var(--border-color); } .audit-commissariat-container { max-width: 800px; margin: 0 auto; } .audit-commissariat-badge { display: inline-block; font-family: var(--font-heading); color: var(--primary-light); font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; } .audit-commissariat-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--primary-color); font-weight: 700; margin-bottom: 16px; } .audit-commissariat-desc { font-size: 0.92rem; color: var(--text-dark); line-height: 1.6; margin: 0; } /* Badges de compétences clés — Secrétariat Juridique */ .juridique-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; } .juridique-badge { display: inline-block; background-color: #F2F8FC; color: #0c2b4a; font-size: 13px; font-weight: 700; font-family: var(--font-heading); padding: 6px 14px; border-radius: 6px; letter-spacing: 0.2px; border: 1px solid rgba(116, 167, 201, 0.2); transition: var(--transition-fast); } .juridique-badge:hover { background-color: #E6EFF5; border-color: rgba(116, 167, 201, 0.4); } /* Filet de sécurité UX final */ .ux-safety-net { background: linear-gradient(180deg, #133454 0%, #0c2237 100%); color: var(--white); padding: clamp(4rem, 6vw, 6rem) 0; text-align: center; position: relative; overflow: hidden; } .ux-safety-net h2 { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--white); margin-bottom: 16px; letter-spacing: -0.5px; } .ux-safety-net p { font-size: 1.05rem; color: #a6c7dd; max-width: 720px; margin: 0 auto 36px; line-height: 1.7; font-weight: 400; } .ux-safety-net .safety-actions { display: flex; justify-content: center; gap: 16px; } .ux-safety-net .btn-primary { background-color: var(--white) !important; color: var(--primary-color) !important; } .ux-safety-net .btn-primary:hover { background-color: var(--primary-light) !important; color: var(--white) !important; box-shadow: 0 6px 20px rgba(128, 166, 198, 0.25) !important; } .ux-safety-net .btn-outline { border-color: var(--white) !important; color: var(--white) !important; } .ux-safety-net .btn-outline:hover { background-color: var(--white) !important; color: var(--primary-color) !important; } /* Focus Immobilier responsive styles removed */ @media (max-width: 580px) { .ux-safety-net .safety-actions { flex-direction: column; align-items: stretch; padding: 0; gap: 12px; } .ux-safety-net .btn { width: 100%; } } /* ========================================================================== 14. CABINET PAGE SPECIFIC ADDITIONS (DEVELOPMENT STEPS & ADVISOR CALLOUT) ========================================================================== */ .development-step-section { background-color: var(--bg-beige); padding: 80px 0; border-bottom: 1px solid var(--border-color); } .development-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; } .development-card { background-color: var(--white); border: 1px solid rgba(19, 52, 84, 0.06); border-radius: var(--radius-md); /* 8px per AGENTS.md */ padding: 40px 24px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .development-card::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background-color: var(--primary-light); border-radius: 0 0 4px 4px; transition: var(--transition-smooth); } .development-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(128, 166, 198, 0.25); } .development-card:hover::after { width: 40%; } .development-icon-wrapper { width: 56px; height: 56px; background-color: rgba(116, 167, 201, 0.08); /* Light tint of accent color #74a7c9 */ border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--primary-color); transition: var(--transition-smooth); } .development-card:hover .development-icon-wrapper { background-color: var(--primary-light); color: var(--white); transform: scale(1.08); } .development-card h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--primary-color); margin: 0; transition: var(--transition-smooth); } .development-card:hover h3 { color: var(--primary-light); } .advisor-callout-section { background-color: var(--white); padding: 80px 0; border-bottom: 1px solid var(--border-color); } .advisor-card { max-width: 900px; margin: 0 auto; background-color: var(--bg-beige); /* Contrasting soft background */ border: 1px solid rgba(19, 52, 84, 0.05); border-radius: var(--radius-md); /* 8px per AGENTS.md */ padding: 60px 50px; text-align: center; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .advisor-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: var(--primary-light); } .advisor-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; color: var(--primary-light); margin-bottom: 24px; text-transform: uppercase; } .advisor-badge svg { color: var(--primary-light); } .advisor-title { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 700; color: var(--primary-color); margin-bottom: 20px; line-height: 1.3; } .advisor-text { font-size: 1.05rem; font-weight: 400; color: var(--text-dark); line-height: 1.7; max-width: 760px; margin: 0 auto; text-wrap: pretty; } @media (max-width: 992px) { .development-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .advisor-card { padding: 40px 24px; } } @media (max-width: 576px) { .development-grid { grid-template-columns: 1fr; } } /* ========================================================================== 15. CABINET PAGE — NEW SECTIONS (Poles, Pennylane, Team Photo) ========================================================================== */ /* --- Cabinet Page Intro Grid --- */ #qui-sommes-nous { padding-top: 3.5rem; } .cabinet-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .cabinet-intro-grid .pillar-split-left { display: flex; flex-direction: column; align-items: flex-start; } .cabinet-intro-grid .pillar-split-left .section-badge { margin-bottom: 14px; } .cabinet-intro-grid .pillar-split-title { font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.2; } .cabinet-intro-grid .hero-visual { position: relative; width: 100%; align-self: center; padding-right: 0; } .cabinet-intro-grid .hero-visual .team-photo-container { width: 100%; height: auto; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 48px rgba(19, 52, 84, 0.08); position: relative; transition: var(--transition-smooth); } .cabinet-intro-grid .hero-visual .team-photo-container img { width: 100%; height: auto; display: block; object-fit: cover; transition: var(--transition-smooth); } /* Photo caption below landscape photo */ .cabinet-photo-block { display: flex; flex-direction: column; } .team-photo-caption { margin-top: 12px; text-align: center; } .team-photo-caption .caption-lead { font-size: 0.85rem; /* ~14px */ font-weight: 700; line-height: 1.4; color: var(--primary-color); margin: 0 0 4px; } .team-photo-caption .caption-author { font-size: 0.78rem; /* ~12-13px */ font-weight: 400; font-style: italic; line-height: 1.5; color: var(--primary-color); opacity: 0.65; margin: 0; } @media (max-width: 768px) { .br-desktop { display: none; } } /* Team & Organisation section */ .cabinet-team-section { background-color: var(--bg-beige); padding: 80px 0; border-bottom: 1px solid var(--border-color); } /* Poles grid: 2 columns on desktop, stacks on mobile */ .cabinet-poles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 40px; max-width: 1000px; margin-left: auto; margin-right: auto; } /* Individual pole card */ .cabinet-pole-card { background-color: var(--white); border: 1px solid rgba(19, 52, 84, 0.06); border-radius: var(--radius-md); padding: 36px 32px; box-shadow: var(--shadow-sm); transition: var(--transition-smooth); position: relative; overflow: hidden; } .cabinet-pole-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 0; background-color: var(--primary-light); transition: var(--transition-smooth); } .cabinet-pole-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(128, 166, 198, 0.2); } .cabinet-pole-card:hover::before { height: 100%; } /* Pole icon */ .cabinet-pole-icon { width: 52px; height: 52px; background-color: rgba(116, 167, 201, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--primary-color); transition: var(--transition-smooth); } .cabinet-pole-card:hover .cabinet-pole-icon { background-color: var(--primary-light); color: var(--white); transform: scale(1.06); } /* Pole title */ .cabinet-pole-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--primary-color); margin: 0 0 10px 0; transition: var(--transition-smooth); } .cabinet-pole-card:hover .cabinet-pole-title { color: var(--primary-light); } /* Pole description */ .cabinet-pole-desc { font-size: 0.92rem; font-weight: 400; line-height: 1.65; color: var(--text-dark); margin: 0; text-wrap: pretty; } /* Pennylane section */ .cabinet-pennylane-section { background-color: var(--white); padding: 80px 0; border-bottom: 1px solid var(--border-color); } .cabinet-pennylane-wrapper { max-width: 1100px; margin: 0 auto; } .cabinet-pennylane-header { text-align: center; margin-bottom: 48px; } /* Pennylane features list */ .cabinet-pennylane-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .cabinet-pennylane-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; background-color: var(--bg-beige); border: 1px solid rgba(19, 52, 84, 0.04); border-radius: var(--radius-md); padding: 28px 24px; transition: var(--transition-smooth); height: 100%; } .cabinet-pennylane-feature:hover { box-shadow: var(--shadow-sm); border-color: rgba(128, 166, 198, 0.15); transform: translateY(-4px); } .cabinet-pennylane-feature-icon { width: 48px; height: 48px; min-width: 48px; background-color: rgba(116, 167, 201, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); transition: var(--transition-smooth); } .cabinet-pennylane-feature:hover .cabinet-pennylane-feature-icon { background-color: var(--primary-light); color: var(--white); } .cabinet-pennylane-feature h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--primary-color); margin: 0 0 6px 0; } .cabinet-pennylane-feature p { font-size: 0.92rem; font-weight: 400; line-height: 1.6; color: var(--text-dark); margin: 0; } /* Full-width team photo section */ .cabinet-team-photo-section { background-color: var(--white); padding: 60px 0; } .cabinet-team-photo-full { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); } .cabinet-team-photo-full img { width: 100%; height: auto; display: block; object-fit: cover; } /* --- Responsive: Cabinet page new sections --- */ @media (max-width: 992px) { .cabinet-intro-grid { grid-template-columns: 1fr; } .cabinet-poles-grid { grid-template-columns: 1fr; max-width: 560px; } .cabinet-pennylane-features { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } } @media (max-width: 768px) { .cabinet-pennylane-feature { padding: 22px 20px; } } @media (max-width: 576px) { .cabinet-pennylane-feature { flex-direction: column; align-items: center; text-align: center; gap: 14px; } } /* Utilitaires */ html.no-scroll, body.no-scroll { overflow: hidden !important; overscroll-behavior: none; -webkit-overflow-scrolling: auto; } .mobile-break { display: none; } .desktop-break { display: inline; } @media (max-width: 768px) { .mobile-break { display: inline; } .desktop-break { display: none; } .page-header-section { text-align: center !important; } .page-header-section p { margin-left: auto !important; margin-right: auto !important; } .page-header-section .hero-badge { margin-left: auto !important; margin-right: auto !important; } } /* Alignement gauche page Expertises sur mobile */ @media (max-width: 991px) { .expertises-page .audit-commissariat-section { text-align: left !important; } .expertises-page .audit-commissariat-desc { margin-left: 0 !important; margin-right: auto !important; } .expertises-page .audit-commissariat-badge { margin-left: 0 !important; margin-right: auto !important; display: inline-flex !important; } .expertises-page .juridique-badges { justify-content: flex-start !important; } } /* -------------------------------------------------------------------------- SKIP LINK (accessibilite clavier) -------------------------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 12px 20px; background: var(--primary-color); color: var(--white); font-family: var(--font-body); font-weight: 600; border-radius: 0 0 var(--radius-md) 0; text-decoration: none; } .skip-link:focus { left: 0; } /* Adresse du footer (remplace un style inline) */ .footer-address { font-size: 0.85rem; line-height: 1.6; margin-bottom: 12px; }