/* ============================================================ AML GESTION — Design System Pure CSS, zero WordPress/Elementor dependency Fonts loaded async in HTML — no @import here ============================================================ */ /* ── CSS Custom Properties ── */ :root { --aml-teal: #0096A6; --aml-teal-dk: #007A8A; --aml-nav: #006070; --aml-teal-lt: #E2F5F7; --aml-gold: #C8A97E; --aml-gold-dk: #B8956A; --aml-beige: #FFFCF8; --aml-beige-2: #F4F1EC; --aml-beige-3: #EEE6D8; --aml-white: #ffffff; --aml-text: #222222; --aml-muted: #555555; --aml-black: #000000; --aml-shadow: 0 4px 24px rgba(0,0,0,.10); --aml-shadow-hover: 0 12px 40px rgba(0,0,0,.18); --aml-radius: 16px; --aml-radius-sm: 8px; --max-w: 1280px; --header-h: 92px; --font-body: 'Roboto', sans-serif; --font-slab: 'Roboto Slab', serif; --font-hero: 'Antonio', sans-serif; --transition: 0.3s ease; } /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background-color: var(--aml-beige); color: var(--aml-text); line-height: 1.7; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } .feature-image img, .card-image img, .hero-bg-img { height: 100%; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } .form-success-message { text-align:center; padding:48px 24px; } .form-success-icon { font-size:3.5rem; margin-bottom:16px; } .form-success-message h3 { color:var(--aml-teal); margin-bottom:10px; } .form-success-message p { color:var(--aml-muted); max-width:400px; margin:0 auto; } /* ── Typography ── */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; color: var(--aml-text); } h1 { font-size: clamp(2rem, 4vw, 3.5rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); } h4 { font-size: 1.15rem; } p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } .text-teal { color: var(--aml-teal); } .text-gold { color: var(--aml-gold); } .text-white { color: var(--aml-white); } .text-center { text-align: center; } .text-muted { color: var(--aml-muted); } /* ── Layout ── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(16px, 4vw, 60px); } section { padding: clamp(60px, 8vw, 110px) 0; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--aml-gold); color: var(--aml-text); border: none; border-radius: 50px; padding: 14px 36px; font-size: 1rem; font-weight: 600; text-decoration: none; transition: all var(--transition); box-shadow: 0 4px 14px rgba(200,169,126,.35); white-space: nowrap; } .btn::after { content: '→'; font-size: 1.1rem; transition: transform var(--transition); } .btn:hover { background: var(--aml-teal); color: var(--aml-white); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,150,166,.30); } .btn:hover::after { transform: translateX(5px); } .btn-outline { background: transparent; border: 2px solid var(--aml-white); color: var(--aml-white); box-shadow: none; } .btn-outline:hover { background: var(--aml-white); color: var(--aml-teal); } .btn-outline:hover::after { color: var(--aml-teal); transform: translateX(5px); } .btn-teal { background: var(--aml-teal); box-shadow: 0 4px 14px rgba(0,150,166,.30); } .btn-teal:hover { background: var(--aml-teal-dk); } .btn-lg { padding: 18px 48px; font-size: 1.1rem; } /* ── Header ── */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--aml-beige); border-bottom: 1px solid rgba(0,0,0,.07); z-index: 1000; transition: box-shadow var(--transition), background var(--transition); } .site-header.scrolled { background: rgba(255,252,248,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0,0,0,.10); } .header-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(16px,4vw,60px); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-logo img { height: 72px; width: 180px; max-width: 100%; } /* ── Nav ── */ .site-nav { display: flex; align-items: center; } .nav-list { display: flex; align-items: center; gap: 4px; } .nav-list a { display: block; padding: 8px 14px; color: var(--aml-nav); font-size: .82rem; font-weight: 700; letter-spacing: .06em; border-radius: var(--aml-radius-sm); transition: color var(--transition), background var(--transition); white-space: nowrap; } .nav-list a:hover, .nav-list li.active a { color: var(--aml-black); background: var(--aml-teal-lt); } .nav-list li.active a { background: var(--aml-teal-lt); } .nav-list li a.nav-cta { background: var(--aml-gold); color: var(--aml-text); border-radius: 50px; padding: 8px 18px; } .nav-list li a.nav-cta:hover { background: var(--aml-teal); color: var(--aml-white); } /* ── Nav dropdown (Formations) ── */ .nav-item-has-children { position: relative; } .nav-item-has-children > a { display: flex; align-items: center; gap: 4px; } .nav-caret { font-size: .65rem; opacity: .75; transition: transform var(--transition); } .nav-item-has-children:hover .nav-caret, .nav-item-has-children:focus-within .nav-caret { transform: rotate(180deg); } .nav-submenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 300px; background: var(--aml-white); border: 1px solid rgba(0,150,166,.15); border-radius: var(--aml-radius-sm); box-shadow: var(--aml-shadow-hover); padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 1100; } .nav-item-has-children:hover .nav-submenu, .nav-item-has-children:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-submenu a { white-space: normal; line-height: 1.45; font-size: .78rem; letter-spacing: .03em; font-weight: 600; padding: 10px 16px; border-radius: 0; } .nav-submenu a:hover, .nav-submenu li.active a { background: var(--aml-teal-lt); color: var(--aml-black); } /* ── Hamburger ── */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; padding: 6px; border-radius: var(--aml-radius-sm); cursor: pointer; } .nav-toggle span { display: block; height: 2px; background: var(--aml-teal); border-radius: 2px; transition: all var(--transition); } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav dropdown */ .nav-mobile { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--aml-beige); border-bottom: 2px solid var(--aml-teal-lt); box-shadow: 0 8px 30px rgba(0,0,0,.12); z-index: 999; padding: 16px 0 24px; max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav-mobile.open { display: block; } .nav-mobile a { display: block; padding: 14px clamp(16px,4vw,60px); color: var(--aml-nav); font-weight: 700; font-size: .9rem; letter-spacing: .05em; border-bottom: 1px solid var(--aml-teal-lt); transition: background var(--transition), color var(--transition); } .nav-mobile li.active > a { background: var(--aml-teal-lt); color: var(--aml-teal-dk); } /* Mobile accordion dropdown */ .nav-mobile-dropdown { border-bottom: 1px solid var(--aml-teal-lt); } .nav-mobile-dropdown-head { display: flex; align-items: stretch; } .nav-mobile-dropdown-head > a { flex: 1; border-bottom: none; } .nav-mobile-dropdown-btn { display: flex; align-items: center; justify-content: center; width: 52px; flex-shrink: 0; background: none; border: none; border-left: 1px solid var(--aml-teal-lt); color: var(--aml-teal); font-size: 1rem; cursor: pointer; transition: background var(--transition); } .nav-mobile-dropdown-btn:hover { background: var(--aml-teal-lt); } .nav-mobile-dropdown-btn span { display: block; transition: transform var(--transition); } .nav-mobile-dropdown.open .nav-mobile-dropdown-btn span { transform: rotate(180deg); } .nav-mobile-dropdown.active .nav-mobile-dropdown-head > a { background: var(--aml-teal-lt); color: var(--aml-teal-dk); } .nav-mobile-submenu { display: none; list-style: none; margin: 0; padding: 0; background: rgba(0,150,166,.06); } .nav-mobile-dropdown.open .nav-mobile-submenu { display: block; } .nav-mobile-submenu a { padding-left: clamp(32px, 8vw, 72px) !important; font-size: .82rem !important; font-weight: 600 !important; color: var(--aml-muted) !important; border-bottom: 1px solid var(--aml-teal-lt); } .nav-mobile-submenu a:hover, .nav-mobile-submenu li.active a { color: var(--aml-teal-dk) !important; background: var(--aml-teal-lt); } /* ── Hero ── */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: var(--header-h); } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0,60,70,.50) 0%, rgba(0,100,116,.28) 60%, rgba(0,0,0,.06) 100%); } .hero-content { position: relative; z-index: 1; color: var(--aml-white); max-width: 700px; } .hero-eyebrow { display: inline-block; background: var(--aml-white); border: 1px solid var(--aml-white); color: var(--aml-teal-dk); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 7px 18px; border-radius: 50px; margin-bottom: 20px; box-shadow: 0 2px 14px rgba(0,0,0,.10); } .hero h1 { font-family: var(--font-hero); font-size: clamp(2.6rem, 5vw, 4.2rem); color: var(--aml-white); line-height: 1.32; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 24px; } .hero p { font-size: clamp(1rem, 1.8vw, 1.15rem); color: rgba(255,255,255,.88); max-width: 540px; margin-bottom: 36px; } .hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; } .hero-scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,.7), transparent); animation: scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.5)} } /* Hero interior pages (no full-height, just banner) */ .hero-banner { min-height: 55vh; min-height: 55svh; } .hero-banner .hero-content { padding: 60px 0; } /* ── Wave Divider ── */ .wave-divider { overflow: hidden; line-height: 0; margin-top: -2px; } .wave-divider svg { display: block; width: 100%; height: auto; } /* ── Section Titles ── */ .section-header { text-align: center; margin-bottom: clamp(40px, 6vw, 60px); } .section-tag { display: inline-block; background: var(--aml-teal-lt); color: var(--aml-teal-dk); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 14px; border-radius: 50px; margin-bottom: 12px; } .section-header h2 { margin-bottom: 14px; } .section-header p { color: var(--aml-muted); max-width: 600px; margin: 0 auto; } /* Section with teal background */ .section-teal { background: var(--aml-teal); color: var(--aml-white); } .section-teal h2, .section-teal h3 { color: var(--aml-white); } .section-teal .section-tag { background: rgba(255,255,255,.15); color: var(--aml-white); } /* Bandeau intro (texte teaser sous le hero) — teal adouci */ .section-teaser { background: linear-gradient(135deg, #5aaeb8 0%, #72bec7 100%); padding: 40px 0; text-align: center; } .section-teaser p { color: rgba(255,255,255,.95); font-size: 1.1rem; max-width: 800px; margin: 0 auto; font-weight: 500; line-height: 1.8; } .section-teaser strong { color: #fff; } /* Section beige-2 */ .section-alt { background: var(--aml-beige-2); } /* ── Service Cards ── */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; align-items: stretch; } .card { background: var(--aml-white); border-radius: var(--aml-radius); overflow: hidden; box-shadow: var(--aml-shadow); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; height: 100%; } .card:hover { transform: translateY(-8px); box-shadow: var(--aml-shadow-hover); } .card-image { position: relative; height: 240px; min-height: 240px; overflow: hidden; flex-shrink: 0; } .card-image img { width: 100%; height: 240px; object-fit: cover; transition: transform .5s ease; } .card:hover .card-image img { transform: scale(1.05); } .card-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to top, rgba(0,0,0,.3), transparent); } .card-body { padding: 24px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; } .card-title { font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--aml-teal); border-left: 3px solid var(--aml-gold); padding-left: 12px; margin: 0; } .card-desc { color: var(--aml-muted); font-size: .95rem; flex: 1 1 auto; margin: 0; line-height: 1.6; } .card-btn { margin-top: auto; align-self: stretch; justify-content: center; width: 100%; text-align: center; white-space: normal; padding: 14px 20px; line-height: 1.3; } /* ── Feature Blocks (image + text) ── */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; } .feature > * { min-width: 0; } .feature.reverse { direction: rtl; } .feature.reverse > * { direction: ltr; } .feature-image { border-radius: var(--aml-radius); overflow: hidden; box-shadow: var(--aml-shadow); width: 100%; max-width: 100%; } .feature-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .feature-content { overflow-wrap: break-word; } .feature-content h2 { margin-bottom: 20px; } .feature-list-title { color: var(--aml-teal-dk); margin-bottom: 14px; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .feature-content p { color: var(--aml-muted); margin-bottom: 16px; } .feature-content ul { list-style: none; margin-bottom: 24px; } .feature-content ul li { position: relative; padding-left: 24px; margin-bottom: 10px; color: var(--aml-muted); } .feature-content ul li::before { content: '✦'; position: absolute; left: 0; color: var(--aml-teal); font-size: .7rem; top: 5px; } /* ── Info Boxes ── */ .info-box { background: var(--aml-teal-lt); border-left: 4px solid var(--aml-teal); border-radius: 0 var(--aml-radius-sm) var(--aml-radius-sm) 0; padding: 20px 24px; margin: 24px 0; } .info-box .info-box-title, .info-box h4 { color: var(--aml-teal-dk); margin-bottom: 8px; font-size: .95rem; font-weight: 700; } .info-box p { color: var(--aml-text); margin: 0; } /* ── Highlight Strip (CTA Band) ── */ .cta-band { position: relative; padding: clamp(60px, 8vw, 100px) 0; text-align: center; overflow: hidden; } .cta-band-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .cta-band-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,80,100,.62) 0%, rgba(0,150,166,.52) 100%); } .cta-band-content { position: relative; z-index: 1; color: var(--aml-white); } .cta-band h2 { color: var(--aml-white); margin-bottom: 12px; font-size: clamp(1.6rem,3vw,2.6rem); } .cta-band p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 32px; } /* Simple CTA (no background image) */ .cta-simple { background: linear-gradient(135deg, var(--aml-teal) 0%, var(--aml-teal-dk) 100%); text-align: center; color: var(--aml-white); } .cta-simple h2 { color: var(--aml-white); margin-bottom: 12px; } .cta-simple p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 32px; } /* ── Testimonials ── */ .testimonials-slider { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .testimonial-card { background: var(--aml-white); border-radius: var(--aml-radius); padding: 28px; box-shadow: var(--aml-shadow); display: flex; flex-direction: column; gap: 14px; transition: transform var(--transition), box-shadow var(--transition); } .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--aml-shadow-hover); } .testimonial-stars { display: flex; gap: 3px; } .testimonial-stars span { color: #F5A623; font-size: 1rem; } .testimonial-text { color: var(--aml-muted); font-size: .95rem; flex: 1; line-height: 1.6; } .testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; } .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--aml-teal-lt); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--aml-teal); font-size: .9rem; flex-shrink: 0; } .testimonial-name { font-weight: 700; font-size: .9rem; } .testimonial-date { font-size: .75rem; color: var(--aml-muted); } .google-badge { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--aml-muted); font-weight: 600; } .google-badge svg { width: 14px; height: 14px; } /* ── FAQ / Accordion ── */ .faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; } .faq-item { background: var(--aml-white); border-radius: var(--aml-radius-sm); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: box-shadow var(--transition); } .faq-item.open { box-shadow: 0 4px 20px rgba(0,150,166,.15); } .faq-question { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; font-weight: 600; font-size: .98rem; color: var(--aml-text); transition: color var(--transition); gap: 16px; } .faq-question:hover, .faq-item.open .faq-question { color: var(--aml-teal); } .faq-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--aml-teal-lt); display: flex; align-items: center; justify-content: center; color: var(--aml-teal); font-size: 1.1rem; transition: transform var(--transition), background var(--transition); } .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--aml-teal); color: var(--aml-white); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s ease; padding: 0 24px; color: var(--aml-muted); font-size: .95rem; line-height: 1.7; } .faq-item.open .faq-answer { max-height: 1000px; padding: 0 24px 24px; } .faq-answer ul { list-style: disc; padding-left: 20px; margin-top: 8px; } .faq-answer ul li { margin-bottom: 6px; } /* ── Stats / Numbers ── */ .stats-row { display: flex; justify-content: center; gap: clamp(24px, 4vw, 60px); flex-wrap: wrap; margin: 40px 0; } .stat { text-align: center; } .stat-number { font-family: var(--font-hero); font-size: 3rem; font-weight: 700; color: var(--aml-teal); line-height: 1; display: block; } .stat-label { font-size: .85rem; color: var(--aml-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } /* ── Target Grid ── */ .target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin-top: 40px; } .target-item { background: var(--aml-white); border-radius: var(--aml-radius-sm); padding: 24px 16px; text-align: center; box-shadow: var(--aml-shadow); transition: transform var(--transition); } .target-item:hover { transform: translateY(-4px); } .target-item .target-icon { font-size: 2rem; margin-bottom: 12px; display: block; } .target-item p { font-size: .85rem; font-weight: 600; color: var(--aml-teal); margin: 0; line-height: 1.3; } /* ── Services List ── */ .services-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .service-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--aml-white); border-radius: var(--aml-radius-sm); box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: transform var(--transition); } .service-item:hover { transform: translateY(-3px); } .service-icon { width: 44px; height: 44px; background: var(--aml-teal-lt); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; } .service-item h4 { font-size: .9rem; color: var(--aml-teal); margin-bottom: 4px; } .service-item p { font-size: .85rem; color: var(--aml-muted); margin: 0; } /* ── Contact Form ── */ .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 80px); align-items: start; } .contact-grid > * { min-width: 0; } .contact-info { display: flex; flex-direction: column; gap: 24px; } .contact-info-item { display: flex; gap: 16px; align-items: flex-start; } .contact-info-icon { width: 48px; height: 48px; background: var(--aml-teal-lt); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .contact-info-item .contact-info-label, .contact-info-item h4 { color: var(--aml-teal-dk); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; font-weight: 700; } .contact-info-item p { font-size: .95rem; color: var(--aml-text); margin: 0; } .contact-info-item a { color: var(--aml-teal); font-weight: 600; } .contact-info-item a:hover { color: var(--aml-teal-dk); text-decoration: underline; } .contact-form { background: var(--aml-white); border-radius: var(--aml-radius); padding: clamp(28px, 4vw, 48px); box-shadow: var(--aml-shadow); } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--aml-text); margin-bottom: 8px; } .form-group label .req { color: var(--aml-teal); margin-left: 3px; } .form-control { width: 100%; padding: 13px 16px; border: 1.5px solid #E0DDD8; border-radius: var(--aml-radius-sm); font-family: var(--font-body); font-size: .95rem; color: var(--aml-text); background: var(--aml-beige); transition: border-color var(--transition), box-shadow var(--transition); outline: none; appearance: none; } .form-control:focus { border-color: var(--aml-teal); box-shadow: 0 0 0 3px rgba(0,150,166,.12); background: var(--aml-white); } textarea.form-control { resize: vertical; min-height: 130px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-submit { width: 100%; margin-top: 8px; justify-content: center; } .form-note { text-align: center; font-size: .8rem; color: var(--aml-muted); margin-top: 12px; } /* ── Intro Section (About) ── */ .intro-section { background: var(--aml-white); } .intro-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .intro-grid > * { min-width: 0; } .intro-image-wrap { position: relative; max-width: 100%; } .intro-image-wrap img { border-radius: var(--aml-radius); box-shadow: var(--aml-shadow); width: 100%; height: 500px; min-height: 500px; object-fit: cover; } .intro-badge { position: absolute; bottom: -20px; right: -20px; background: var(--aml-gold); color: var(--aml-text); border-radius: var(--aml-radius-sm); padding: 16px 20px; box-shadow: var(--aml-shadow); text-align: center; } .intro-badge strong { display: block; font-size: 1.8rem; line-height: 1; } .intro-badge span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; } .intro-content h2 { margin-bottom: 16px; } .intro-content .intro-name { display: inline-block; font-family: var(--font-slab); color: var(--aml-teal); font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; } .intro-content p { color: var(--aml-muted); margin-bottom: 16px; } .intro-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; } .intro-tag { background: var(--aml-teal-lt); color: var(--aml-teal); font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 50px; letter-spacing: .04em; } /* ── Why Me Section ── */ .why-section { background: var(--aml-beige-2); } /* ── Full-page section with offset image ── */ .split-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; overflow: hidden; border-radius: var(--aml-radius); margin: 0 clamp(16px,4vw,60px); box-shadow: var(--aml-shadow); } .split-section > * { min-width: 0; } .split-image { overflow: hidden; } .split-image img { width: 100%; height: 100%; object-fit: cover; } .split-content { background: var(--aml-white); padding: clamp(32px, 4vw, 60px); display: flex; flex-direction: column; justify-content: center; gap: 20px; } /* ── Formations ── */ .formations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 24px; margin-top: 40px; } .formation-card { background: var(--aml-white); border-radius: var(--aml-radius); padding: 28px; box-shadow: var(--aml-shadow); border-top: 4px solid var(--aml-teal); transition: transform var(--transition); } .formation-card:hover { transform: translateY(-6px); } .formation-card h3 { color: var(--aml-teal); font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; } .formation-card ul { list-style: none; } .formation-card ul li { padding: 8px 0; border-bottom: 1px solid var(--aml-teal-lt); font-size: .9rem; color: var(--aml-muted); } .formation-card ul li:last-child { border-bottom: none; } .formation-card ul li::before { content: '✓ '; color: var(--aml-teal); font-weight: 700; } /* ── Breadcrumb ── */ .breadcrumb { padding: 12px 0; font-size: .8rem; color: var(--aml-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .breadcrumb a { color: var(--aml-teal); } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { color: var(--aml-muted); } /* ── Footer ── */ .site-footer { background: var(--aml-beige-3); color: var(--aml-text); padding: clamp(40px, 6vw, 60px) 0 20px; } .footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(28px, 4vw, 60px); margin-bottom: 40px; } .footer-brand img { height: 72px; width: 180px; max-width: 100%; margin-bottom: 14px; } .footer-brand p { font-size: .88rem; color: rgba(34,34,34,.75); line-height: 1.6; } .footer-col-title, .footer-col h4 { color: var(--aml-text); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; font-weight: 700; } .footer-col ul li { margin-bottom: 8px; } .footer-col ul li a { font-size: .88rem; color: rgba(34,34,34,.7); transition: color var(--transition); } .footer-col ul li a:hover { color: var(--aml-teal-dk); } .footer-contact-item { display: flex; gap: 10px; margin-bottom: 10px; font-size: .88rem; color: rgba(34,34,34,.75); align-items: flex-start; } .footer-contact-item .fci { color: var(--aml-teal-dk); flex-shrink: 0; margin-top: 2px; } .footer-contact-item a { color: rgba(34,34,34,.75); } .footer-contact-item a:hover { color: var(--aml-teal-dk); } .footer-bottom { border-top: 1px solid rgba(34,34,34,.15); padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: rgba(34,34,34,.78); } .footer-bottom a { color: rgba(34,34,34,.75); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition); } .footer-bottom a:hover { color: var(--aml-teal-dk); } /* ── Scroll to top ── */ .scroll-top { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; background: var(--aml-teal); color: var(--aml-white); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,150,166,.40); transition: all var(--transition); opacity: 0; pointer-events: none; z-index: 900; } .scroll-top.visible { opacity: 1; pointer-events: auto; } .scroll-top:hover { background: var(--aml-gold); transform: translateY(-2px); } /* ── Animations (Intersection Observer) — opacity only to avoid CLS */ .anim-fade { opacity: 0; transition: opacity .65s ease; } .anim-fade.visible { opacity: 1; } .anim-left { opacity: 0; transition: opacity .65s ease; } .anim-left.visible { opacity: 1; } .anim-right { opacity: 0; transition: opacity .65s ease; } .anim-right.visible { opacity: 1; } .anim-delay-1 { transition-delay: .1s; } .anim-delay-2 { transition-delay: .2s; } .anim-delay-3 { transition-delay: .3s; } .anim-delay-4 { transition-delay: .4s; } /* ── Utility ── */ .mt-sm { margin-top: 20px; } .mt-md { margin-top: 40px; } .mt-lg { margin-top: 60px; } .mb-sm { margin-bottom: 20px; } .mb-md { margin-bottom: 40px; } .d-flex { display: flex; } .gap-md { gap: 16px; } .flex-wrap { flex-wrap: wrap; } .align-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .divider { width: 60px; height: 3px; background: var(--aml-gold); border-radius: 3px; margin: 12px auto 24px; } .divider-left { margin-left: 0; } /* ── Responsive ── */ @media (max-width: 1024px) { .feature { grid-template-columns: 1fr; } .feature.reverse { direction: ltr; } .feature-image { max-height: 360px; } .intro-grid { grid-template-columns: 1fr; } .intro-image-wrap { display: none; } .contact-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; } .services-list { grid-template-columns: 1fr; } } @media (max-width: 768px) { :root { --header-h: 78px; } .site-nav { display: none; } .nav-toggle { display: flex; } .cards-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .split-section { grid-template-columns: 1fr; border-radius: 0; margin: 0; } .split-image { height: 280px; } .hero h1 { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.32; } .testimonials-slider { grid-template-columns: 1fr; } .target-grid { grid-template-columns: repeat(2,1fr); } .form-row { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } section { padding: clamp(48px, 8vw, 70px) 0; } } @media (max-width: 480px) { .target-grid { grid-template-columns: 1fr 1fr; } .btn { padding: 12px 28px; font-size: .9rem; } .btn-lg { padding: 14px 32px; font-size: 1rem; } .hero-banner { min-height: 50vh; } }