/* ============================================================ MACIA AVOCAT — Surcharge Lawgis v5 Palette : #FFFFFF · #B19284 · #97BDC6 · #BB5456 · #63060F Ordre : après style.css ============================================================ */ /* ================================================================ 0. Variables — Palette fixe + Tokens thème + Échelle typo ================================================================ Pour changer de thème : ajouter class sur body.theme-ivoire → Ivoire chaleureux body.theme-clarte → Clarté contemporaine body.theme-classique → Classique sobre ================================================================ */ :root { /* ── Palette — Bleu / Beige / Blanc (défaut) ── */ --bs-primary: #97BDC6; --bs-primary-rgb: 151, 189, 198; --m-red: #97BDC6; /* bleu-gris = accent principal */ --m-red-light: #b8d3da; /* bleu clair */ --m-hover: #63060F; /* bordeaux = hover uniquement */ --m-hover-light: #bb5456; /* rose = hover alternatif */ --m-warm: #B19284; /* beige/taupe */ --m-teal: #97BDC6; /* bleu-gris */ --m-ink: #1e2d38; /* fond foncé bleu marine */ --m-soft: #f5f9fb; /* sections claires teinte bleue */ /* ── Tokens thème — Bleu Prestige (défaut) ── */ --th-bg: #ffffff; --th-surface: #f4f8fb; --th-surface-2: #e8f2f6; --th-border: rgba(151,189,198,0.22); --th-border-strong: rgba(151,189,198,0.40); --th-ink: #1e2d38; --th-ink-muted: rgba(25,37,53,0.55); --th-dark-bg: #192535; --th-dark-bg-2: #111e2a; /* ── Échelle typographique ── */ --font-display: "DM Serif Display", serif; --font-body: "Manrope", sans-serif; --fs-hero: clamp(34px, 4.8vw, 60px); --fs-h1: clamp(28px, 3.8vw, 48px); --fs-h2: clamp(24px, 3vw, 38px); --fs-h3: clamp(19px, 2.2vw, 27px); --fs-h4: clamp(16px, 1.6vw, 20px); --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-xs: 12px; --fs-label: 11px; --lh-display: 1.08; --lh-heading: 1.2; --lh-tight: 1.3; --lh-body: 1.65; } /* ── Thème : Bordeaux Prestige — look classique sombre ── */ body.theme-ivoire { --m-red: #63060f; --m-red-light: #bb5456; --m-hover: #bb5456; --m-hover-light: #d47b7c; --bs-primary: #63060f; --bs-primary-rgb: 99, 6, 15; --m-ink: #231b1b; --m-soft: #f0e5d9; --th-bg: #fdf8f3; --th-surface: #f8f1e8; --th-surface-2: #f0e6d8; --th-border: rgba(177,146,132,0.30); --th-border-strong: rgba(177,146,132,0.50); --th-ink: #1a0e0a; --th-dark-bg: #0d0208; --th-dark-bg-2: #120306; } /* ── Thème : Ivoire doux — beige chaud, bleu-gris ── */ body.theme-clarte { --m-soft: #f0e8e0; --th-bg: #fdf9f5; --th-surface: #f5ede4; --th-surface-2: #eee1d5; --th-border: rgba(177,146,132,0.30); --th-border-strong: rgba(177,146,132,0.50); --th-ink: #1e2d38; --th-dark-bg: #192535; --th-dark-bg-2: #111e2a; } /* ── Thème : Rosé Classique — boutons rose, fond pierre ── */ body.theme-classique { --th-bg: #f6f4f2; --th-surface: #eae5e0; --th-surface-2: #e0d9d3; --th-border: rgba(177,146,132,0.28); --th-border-strong: rgba(177,146,132,0.48); --th-ink: #1a1518; --th-dark-bg: #13090c; --th-dark-bg-2: #0d0508; /* sections */ --m-soft: #e5dfda; /* accent rose au lieu de bordeaux */ --m-red: #bb5456; --m-red-light: #d47b7c; --bs-primary: #bb5456; --bs-primary-rgb: 187, 84, 86; } /* ================================================================ 1. Base ================================================================ */ html, body { background-color: var(--th-bg) !important; color: var(--th-ink); width: 100%; max-width: 100%; overflow-x: hidden; } body { padding-top: 164px; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); } /* Correctif robuste breadcrumb : le bloc doit commencer après le header fixe et rester lisible même lorsque Jarallax/WOW ajoutent leurs styles. */ html body .breadcrumb-section.bg-img.jarallax { position: relative !important; isolation: isolate !important; z-index: 1 !important; height: auto !important; min-height: 260px !important; margin-top: 164px !important; padding: 64px 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background-color: var(--m-ink) !important; background-size: cover !important; background-position: center center !important; } html body .breadcrumb-section.bg-img.jarallax::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background: linear-gradient(90deg, rgba(25,37,53,0.88) 0%, rgba(25,37,53,0.72) 48%, rgba(25,37,53,0.82) 100%) !important; } html body .breadcrumb-section.bg-img.jarallax::after { display: none !important; } html body .breadcrumb-section.bg-img.jarallax > .divider { display: none !important; } html body .breadcrumb-section.bg-img.jarallax > .container { position: relative !important; z-index: 5 !important; } html body .breadcrumb-section.bg-img.jarallax .breadcrumb-content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 0 !important; text-align: center !important; transform: none !important; } html body .breadcrumb-section.bg-img.jarallax .breadcrumb-content h1, html body .breadcrumb-section.bg-img.jarallax .breadcrumb-content h2 { display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; color: #fff !important; margin: 0 0 16px !important; text-align: center !important; text-shadow: 0 2px 18px rgba(0,0,0,0.34); } html body .breadcrumb-section.bg-img.jarallax .breadcrumb-content ul { display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } html body header.header-area + .breadcrumb-section { position: relative !important; isolation: isolate !important; z-index: 1 !important; height: auto !important; min-height: 260px !important; margin-top: 164px !important; padding: 64px 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background-color: var(--m-ink) !important; background-size: cover !important; background-position: center center !important; } html body header.header-area + .breadcrumb-section::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background: linear-gradient(90deg, rgba(25,37,53,0.88) 0%, rgba(25,37,53,0.72) 48%, rgba(25,37,53,0.82) 100%) !important; } html body header.header-area + .breadcrumb-section::after { display: none !important; } html body header.header-area + .breadcrumb-section > .divider { display: none !important; } html body header.header-area + .breadcrumb-section > .container { position: relative !important; z-index: 5 !important; } html body header.header-area + .breadcrumb-section .breadcrumb-content h1, html body header.header-area + .breadcrumb-section .breadcrumb-content h2 { display: block !important; opacity: 1 !important; visibility: visible !important; color: #fff !important; margin: 0 0 16px !important; transform: none !important; animation: none !important; } @media (max-width: 991px) { html body header.header-area + .breadcrumb-section { margin-top: 152px !important; min-height: 220px !important; padding: 52px 0 !important; } } @media (max-width: 575px) { html body header.header-area + .breadcrumb-section { margin-top: 152px !important; min-height: 200px !important; padding: 44px 0 !important; } } @media (max-width: 991px) { html body .breadcrumb-section.bg-img.jarallax { margin-top: 152px !important; min-height: 220px !important; padding: 52px 0 !important; } } @media (max-width: 575px) { html body .breadcrumb-section.bg-img.jarallax { margin-top: 152px !important; min-height: 200px !important; padding: 44px 0 !important; } } /* Hiérarchie typographique globale */ h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 400; line-height: var(--lh-heading); color: var(--th-ink); } h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400; line-height: var(--lh-heading); color: var(--th-ink); } h3, .h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-tight); color: var(--th-ink); } h4, .h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-tight); color: var(--th-ink); } h5, .h5, h6, .h6 { font-family: var(--font-body); font-weight: 600; line-height: var(--lh-tight); color: var(--th-ink); } p { font-family: var(--font-body); color: var(--th-ink); } a { color: inherit; text-decoration: none; } a:hover, a:focus { color: var(--m-hover) !important; text-decoration: none; } a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--m-teal); outline-offset: 3px; } .wow { visibility: visible !important; } .container, .row, .swiper, .swiper-wrapper { min-width: 0; } .bg-secondary { background-color: var(--m-soft) !important; } .bg-gray { background-color: #ffffff !important; } /* ================================================================ 2. Préchargeur ================================================================ */ .preloader .spinner-grow { background-color: var(--m-red); } /* ================================================================ 3. Curseur magnétique ================================================================ */ .magnet-cursor { background-color: var(--m-warm) !important; border-color: var(--m-warm) !important; } .magnet-circle { border: 2px solid var(--m-warm) !important; background-color: transparent !important; } .reset .magnet-cursor { background-color: transparent !important; border-color: transparent !important; } .reset .magnet-circle { background-color: rgba(151,189,198,0.22) !important; border-color: transparent !important; } @media (hover: none), (max-width: 991px) { .magnet-cursor, .magnet-circle { display: none !important; opacity: 0 !important; visibility: hidden !important; } body, a, button, input, select, textarea { cursor: auto !important; } } /* ================================================================ 4. Bouton scroll-to-top ================================================================ */ .lawgis-scrolltop { background-color: var(--m-hover) !important; border: 2px solid var(--m-hover) !important; color: #fff !important; box-shadow: 0 8px 26px rgba(25,37,53,0.28) !important; z-index: 10000 !important; } .lawgis-scrolltop::before { background: conic-gradient(var(--m-red) var(--scroll-progress), var(--m-hover) 0) !important; } .lawgis-scrolltop i { color: #fff !important; position: relative; z-index: 1; } .lawgis-scrolltop:hover, .lawgis-scrolltop:focus { background-color: var(--m-red) !important; border-color: var(--m-red) !important; color: var(--m-ink) !important; transform: translateY(-3px) !important; } .lawgis-scrolltop:hover::before, .lawgis-scrolltop:focus::before { background: conic-gradient(var(--m-hover) var(--scroll-progress), var(--m-red) 0) !important; } .lawgis-scrolltop:hover i, .lawgis-scrolltop:focus i { color: var(--m-ink) !important; } @media (max-width: 991px) { .lawgis-scrolltop { right: 18px !important; bottom: 76px !important; } .lawgis-scrolltop.scrolltop-show { transform: translateY(0) !important; } .lawgis-scrolltop.scrolltop-hide { transform: translateY(120px) !important; } } /* ================================================================ 5. Boutons ================================================================ */ .btn.btn-primary, a.btn.btn-primary, button.btn.btn-primary { background-color: var(--m-hover) !important; border-color: var(--m-hover) !important; color: #fff !important; font-weight: 600; } .btn.btn-primary:hover, a.btn.btn-primary:hover, button.btn.btn-primary:hover { background-color: var(--m-red) !important; border-color: var(--m-red) !important; color: var(--m-ink) !important; } .btn.btn-primary span, a.btn.btn-primary span, .btn.btn-primary i, a.btn.btn-primary i, button.btn.btn-primary span, button.btn.btn-primary i { color: #fff !important; } .btn.btn-primary:hover span, a.btn.btn-primary:hover span, .btn.btn-primary:hover i, a.btn.btn-primary:hover i, button.btn.btn-primary:hover span, button.btn.btn-primary:hover i { color: var(--m-ink) !important; } .btn.btn-dark { background-color: var(--m-ink) !important; border-color: var(--m-ink) !important; color: #fff !important; } .btn.btn-dark:hover { background-color: var(--m-hover) !important; border-color: var(--m-hover) !important; color: #fff !important; } .btn-link { color: var(--m-warm) !important; } .btn-link:hover, .btn-link:focus { color: var(--m-hover-light) !important; } /* ================================================================ 6. Logo ================================================================ */ .macia-logo { width: auto; max-height: 54px; max-width: 315px; object-fit: contain; background: transparent; padding: 0; box-shadow: none; transition: max-height 280ms ease, max-width 280ms ease; } .header-area.sticky-on .macia-logo { max-height: 44px; max-width: 275px; } /* ================================================================ 7. Header ================================================================ */ .header-area { background-color: transparent !important; border-bottom: 0 !important; } .header-area::after { display: none !important; } .header-area.mobile-menu-open { background-color: transparent !important; } .header-area.style-two .header-top { height: 56px; background-color: var(--m-ink) !important; border-bottom: 1px solid rgba(151,189,198,0.28); } .header-area.style-two.sticky-on .header-top { height: 44px; } .header-area .header-top i { color: var(--m-teal) !important; } .header-area .header-top span { color: #fff !important; font-size: 14px; } .header-area .navbar { background-color: var(--th-bg) !important; box-shadow: 0 12px 40px rgba(25,37,53,0.08); } .header-area.sticky-on .navbar { box-shadow: 0 12px 40px rgba(25,37,53,0.10); } .header-area .navbar-nav li > a { color: var(--m-ink) !important; font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: .02em; transition: color 300ms ease; padding-top: 14px !important; padding-bottom: 14px !important; display: flex; align-items: center; } .header-area .navbar-nav > li > a:hover, .header-area .navbar-nav > li > a:focus, .header-area .navbar-nav > li.lawgis-dd:hover > a, .header-area .navbar-nav > li.active > a { color: var(--m-hover) !important; } .header-area .navbar-nav li .lawgis-dd-menu li > a:hover, .header-area .navbar-nav li .lawgis-dd-menu li > a:focus { color: var(--m-hover-light) !important; } .header-search-btn .btn, .header-search-btn .btn i { color: var(--m-ink) !important; } @media (min-width: 992px) { .header-area.style-two .header-top > .container, .header-area .navbar > .container { width: min(100% - 48px, 1680px); max-width: none; } .header-area .navbar { height: 108px; } .header-area.sticky-on .navbar { height: 86px; } .header-area .navbar-collapse { background-color: transparent !important; justify-content: space-between !important; min-width: 0; } .header-area .navbar .navbar-brand { flex: 0 0 auto; margin-right: clamp(22px, 3vw, 48px); } .header-area .navbar-nav { flex: 1 1 auto; min-width: 0; gap: clamp(16px, 1.9vw, 32px); justify-content: center; } .header-area .navbar-nav li > a { white-space: nowrap; } .header-area .d-flex.align-items-center.ms-lg-4 { flex: 0 0 auto; margin-left: clamp(18px, 2.2vw, 36px) !important; gap: clamp(14px, 1.4vw, 24px); } .header-area .navbar-nav li .lawgis-dd-menu { background-color: var(--m-ink) !important; border: 1px solid rgba(255,255,255,0.10) !important; } .header-area .navbar-nav li .lawgis-dd-menu li > a { color: #fff !important; } } @media (min-width: 992px) and (max-width: 1399px) { .header-area.style-two .header-top > .container, .header-area .navbar > .container { width: min(100% - 32px, 1280px); } .macia-logo { max-width: 260px; } .header-area .navbar .navbar-brand { margin-right: 22px; } .header-area .navbar-nav { gap: 16px; } .header-area .navbar-nav li > a { font-size: 13.5px; } .header-area .d-flex.align-items-center.ms-lg-4 { margin-left: 20px !important; gap: 14px; } .header-area .btn-primary { min-width: 0; padding-left: 26px !important; padding-right: 26px !important; } } @media (min-width: 992px) and (max-width: 1199px) { .macia-logo { max-width: 220px; } .header-area .navbar-nav { gap: 12px; } .header-area .navbar-nav li > a { font-size: 13px; letter-spacing: 0; } .header-area .header-search-btn .btn { width: 46px; height: 46px; } .header-area .btn-primary { padding-left: 20px !important; padding-right: 20px !important; } } @media (max-width: 991px) { body { padding-top: 152px; } .header-area.style-two .header-top { height: 52px; } .header-area .header-top .container { justify-content: center !important; padding-left: 14px; padding-right: 14px; } .header-area .header-top .left-side { width: 100%; justify-content: center; gap: 16px !important; } .header-area .header-top .left-side > div { min-width: 0; } .header-area .header-top span.d-none { display: inline-block !important; } .header-area .header-top span { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1; } .header-area .header-top i { font-size: 16px; flex: 0 0 auto; } .header-area .header-top .right-side { display: none !important; } .header-area .navbar { height: auto; min-height: 80px; } .header-area .navbar > .container { position: relative; flex-wrap: wrap; align-items: center; min-height: 80px; } .header-area .navbar-toggler { display: inline-flex !important; position: absolute; right: 18px; top: 40px; transform: translateY(-50%); z-index: 20; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background-color: var(--m-ink) !important; border: 1px solid rgba(151,189,198,0.55) !important; opacity: 1 !important; box-shadow: 0 12px 26px rgba(25,37,53,0.16); } .header-area .navbar-toggler i { display: block; color: #fff !important; font-size: 1.3rem; line-height: 1; } .header-area .navbar-collapse { flex: 0 0 100%; width: 100vw; max-width: none; margin: 0 calc(50% - 50vw); padding: 0 max(18px, calc((100vw - 720px) / 2 + 18px)) 22px; background: rgba(248,251,252,0.98) !important; border: 0; border-bottom: 1px solid rgba(151,189,198,0.22); border-radius: 0; box-shadow: 0 30px 90px rgba(15,23,42,0.18); } .header-area .navbar-collapse.show, .header-area .navbar-collapse.collapsing { padding-top: 18px; } .header-area .navbar-nav { gap: 8px; width: 100%; max-width: 640px; margin: 0 auto; padding: 0 0 14px; } .header-area .navbar-nav > li > a { display: flex !important; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 18px !important; border-radius: 12px; background: #fff; border: 1px solid rgba(226,232,240,0.95); box-shadow: 0 1px 2px rgba(15,23,42,0.04); font-size: 15px; font-weight: 750; letter-spacing: 0; color: #172331 !important; } .header-area .navbar-nav > li.active > a, .header-area .navbar-nav > li > a:hover, .header-area .navbar-nav > li > a:focus { background: #fff1f2; border-color: rgba(99,6,15,0.22); color: var(--m-hover) !important; box-shadow: 0 10px 24px rgba(99,6,15,0.07); } .header-area .navbar-nav li .lawgis-dd-menu { position: static !important; visibility: visible; opacity: 1; width: 100% !important; min-width: 0 !important; margin: 8px 0 4px !important; padding: 8px !important; background: #f1f7f9 !important; border: 1px solid rgba(203,213,225,0.72) !important; border-radius: 14px !important; box-shadow: none !important; transform: none !important; } .header-area .navbar-nav li.lawgis-dd .dropdown-toggler { top: 7px; right: 8px; left: auto; width: 40px; height: 40px; justify-content: center; border-radius: 50%; color: var(--m-hover); } .header-area .navbar-nav li.lawgis-dd .dropdown-toggler i { display: none; } .header-area .navbar-nav li.lawgis-dd .dropdown-toggler::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); } .header-area .navbar-nav li .lawgis-dd-menu li > a { min-height: 42px; padding: 10px 12px !important; color: rgba(25,37,53,0.78) !important; border-radius: 10px; font-size: 13.5px; font-weight: 650; } .header-area .navbar-nav li .lawgis-dd-menu li > a:hover, .header-area .navbar-nav li .lawgis-dd-menu li > a:focus { background: #fff; color: var(--m-hover) !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04); } .header-area .d-flex.align-items-center.ms-lg-4 { width: 100%; max-width: 640px; margin-left: auto !important; margin-right: auto; align-items: center !important; gap: 12px; margin-top: 10px; padding: 14px; border: 1px solid rgba(226,232,240,0.95); border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(15,23,42,0.07); } .header-area .header-search-btn .btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #f1f7f9 !important; border: 1px solid rgba(203,213,225,0.82) !important; box-shadow: none !important; } .header-area .header-search-btn .btn i { font-size: 24px; } .header-area .btn-primary { flex: 1 1 auto; min-height: 52px; border-radius: 14px !important; box-shadow: 0 14px 30px rgba(99,6,15,0.16); } } @media (max-width: 575px) { body { padding-top: 152px; } .header-area .header-top .left-side { gap: 10px !important; } .header-area .header-top span { max-width: 138px; font-size: 11.5px; } .macia-logo { max-height: 40px; max-width: 215px; } .header-area .navbar-collapse { padding-left: 22px; padding-right: 22px; padding-bottom: 22px; } .header-area .btn-primary { min-width: 0; padding-left: 18px !important; padding-right: 18px !important; } } /* ================================================================ 8. Sous-titres de section ================================================================ */ .sub-title { color: var(--m-warm) !important; } .section-heading .sub-title { font-size: 14px !important; font-weight: 600 !important; } .sub-title::after { background-color: var(--m-hover); } .sub-title img { filter: brightness(0) invert(1) sepia(1) saturate(8) hue-rotate(322deg) brightness(0.6) !important; opacity: 1 !important; } /* ================================================================ 9. Overlays section hero (générique) ================================================================ */ .hero-section::after { background-color: rgba(25,37,53,0.60) !important; opacity: 1 !important; } .hero-section::before { background: linear-gradient( 90deg, rgba(25,37,53,0.80) 0%, rgba(25,37,53,0.40) 52%, rgba(25,37,53,0.06) 100% ) !important; z-index: -9 !important; } .hero-section .left-side-text { color: rgba(151,189,198,0.20) !important; } .hero-rating .icon { color: var(--m-teal); border: 1px solid rgba(151,189,198,0.36); background: rgba(255,255,255,0.10); } .hero-rating svg path { fill: var(--m-warm) !important; } /* ================================================================ 10. HERO Home-2 style — Macia ================================================================ */ /* Surcharge overlay couleur palette Macia */ .hero-section.style-two.macia-hero2::after { background: rgba(25,37,53,0.68) !important; opacity: 1 !important; } .hero-section.style-two.macia-hero2::before { background: linear-gradient( -90deg, rgba(25, 37, 53, 0.678) 0%, rgba(25,37,53,0.40) 30%, rgba(25,37,53,0.04) 80% ) !important; z-index: -5 !important; } /* Titre et texte hero */ .hero-section.style-two.macia-hero2 .hero-content .h5 { color: var(--m-teal) !important; } .hero-section.style-two.macia-hero2 .hero-content h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 3.2vw, 4rem); line-height: 1.08; letter-spacing: 0; } .hero-section.style-two.macia-hero2 .hero-content p { color: rgba(255,255,255,0.86) !important; line-height: 1.72; } /* Image hero colonne droite */ .macia-hero2-img { border-radius: 0 !important; object-fit: contain; object-position: bottom center; max-height: clamp(360px, 56vh, 600px); filter: drop-shadow(0 16px 48px rgba(0,0,0,0.30)); } /* Case-solve card surcharge palette Macia */ .macia-hero2-card { background: var(--m-ink) !important; border: 1px solid rgba(151,189,198,0.25) !important; } .macia-hero2-card i { font-size: 36px !important; color: var(--m-warm) !important; } .macia-hero2-card > div { color: var(--m-teal) !important; } .macia-hero2-card p { color: rgba(255,255,255,0.78) !important; } /* Lien telephone dans le hero */ .macia-hero-phone { display: inline-flex; align-items: center; gap: 14px; color: #fff !important; text-decoration: none; } .macia-hero-phone .icon { width: 56px; height: 56px; flex: 0 0 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--m-teal); } .macia-hero-phone strong { display: block; font-size: 20px; line-height: 1.25; color: #fff; } .macia-hero-phone small { display: block; color: rgba(255,255,255,0.80); font-size: 14px; } /* ================================================================ Hero mobile — image plus grande, card en bas à droite ================================================================ */ @media (max-width: 767px) { /* Supprimer le padding-right du thumbnail : image pleine largeur */ .hero-section.style-two.macia-hero2 .hero-thumbnail { padding-right: 0 !important; } /* Image plus grande */ .macia-hero2-img { height: clamp(300px, 80vw, 440px) !important; max-height: none !important; object-position: center top; width: 100% !important; } /* Card 2021 repositionnée bas-droite, taille adaptée */ .macia-hero2-card { width: 130px !important; height: 130px !important; bottom: 10px !important; right: 10px !important; } .macia-hero2-card i { font-size: 24px !important; } .macia-hero2-card > div { font-size: 20px !important; margin-top: 6px !important; } .macia-hero2-card p { font-size: 11px !important; } } @media (max-width: 575px) { .hero-section.style-two.macia-hero2 .hero-content h1 { font-size: clamp(2rem, 9vw, 2.6rem); } .macia-hero-phone strong { font-size: 17px; } .macia-hero2-img { height: clamp(260px, 78vw, 360px) !important; } } /* ================================================================ 11. Section Services — "Vos droits" slider ================================================================ */ .service-section.bg-white { background-color: var(--th-bg) !important; } /* Espacements colonne gauche */ .service-section .section-heading .sub-title { margin-bottom: 14px !important; } .service-section .section-heading h2 { margin-bottom: 18px !important; } .service-section .section-heading p { margin-bottom: 28px !important; color: rgba(25,37,53,0.74); } /* Icône sub-title */ .sub-title i { font-size: 18px; color: var(--m-warm); line-height: 1; } /* Slides égales en hauteur */ .service-swiper-slider .swiper-wrapper { align-items: stretch !important; } .service-swiper-slider .swiper-slide { height: auto !important; display: flex !important; } /* Carte — style Lawgis, palette Macia */ .service-slide-card { position: relative; border-radius: 12px; background: var(--m-ink) !important; padding: 40px 30px; border: none !important; box-shadow: none !important; transition-duration: 350ms !important; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 380px; } .service-slide-card > i { font-size: 54px !important; color: var(--m-teal) !important; display: block !important; margin-bottom: 1.5rem !important; line-height: 1; transition-duration: 350ms !important; } .service-slide-card .title { font-weight: 600; font-size: 22px; line-height: 1.3; color: #ffffff !important; margin-bottom: 0.75rem; transition-duration: 350ms !important; } .service-slide-card p { font-size: 18px !important; color: rgba(255,255,255,0.76) !important; margin-bottom: 1.5rem; line-height: 1.65; flex: 1; transition-duration: 350ms !important; } .service-slide-card .btn-link { color: var(--m-teal) !important; font-size: 15px !important; font-weight: 500 !important; margin-top: 0; align-self: flex-start; transition-duration: 350ms !important; } .service-slide-card .btn-link i { font-size: 18px; } /* Hover : fond bordeaux */ .service-slide-card:hover, .service-slide-card:focus { background-color: var(--m-hover) !important; transform: none !important; box-shadow: none !important; } .service-slide-card:hover > i, .service-slide-card:focus > i { color: #fff !important; } .service-slide-card:hover .title, .service-slide-card:hover p, .service-slide-card:hover .btn-link, .service-slide-card:focus .title, .service-slide-card:focus p, .service-slide-card:focus .btn-link { color: #fff !important; } /* Version moderne des cards "Vos droits" sur l'accueil */ .service-section.bg-white { background: linear-gradient(180deg, #fff 0%, var(--m-soft) 100%) !important; } .service-section .section-heading { position: sticky; top: 190px; z-index: 2; } .service-swiper-slider { width: 130% !important; overflow: visible !important; position: relative; z-index: 1; padding: 18px 18px 58px 28px; margin: -18px 0 -18px -16px; clip-path: inset(-40px 0px -80px 0px); } @media (max-width: 1199px) { .service-swiper-slider { width: 118% !important; } } /* Tablette : annule le débordement latéral */ @media (max-width: 991px) { .service-swiper-slider { width: 100% !important; margin: 0 !important; padding: 16px 4px 52px !important; clip-path: none !important; overflow: hidden !important; } } /* Mobile : section pleine largeur, ombres et border-radius préservés */ @media (max-width: 767px) { /* Section overflow caché pour éviter scroll horizontal */ .service-section { overflow: hidden; } .service-swiper-slider { width: 100% !important; margin: 0 !important; /* padding latéral = espace pour les ombres des cards */ padding: 14px 14px 52px !important; clip-path: none !important; overflow: visible !important; } .service-swiper-slider .swiper-slide { padding-bottom: 10px !important; } .service-slide-card { border-radius: 10px !important; min-height: 300px !important; padding: 24px 20px !important; box-shadow: 0 8px 32px rgba(25,37,53,0.10) !important; } } .service-swiper-slider .swiper-wrapper { overflow: visible !important; } .service-section .swiper-slide { height: auto !important; overflow: visible !important; padding-bottom: 18px; } .service-slide-card { isolation: isolate; overflow: hidden; background: rgba(255,255,255,0.92) !important; border: 1px solid rgba(151,189,198,0.30) !important; border-radius: 8px; min-height: 360px; padding: 30px; box-shadow: 0 18px 54px rgba(25,37,53,0.08) !important; } .service-swiper-slider-navigation { margin-top: 10px; } @media (min-width: 992px) { .service-section .row.g-5 { --bs-gutter-x: 3rem; } } .service-slide-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--m-hover); transform: scaleX(0.34); transform-origin: left; transition: transform 280ms ease, background 280ms ease; display: block; } .service-slide-card::after { content: ""; position: absolute; right: -42px; top: -42px; width: 128px; height: 128px; border-radius: 50%; background: rgba(151,189,198,0.14); z-index: -1; display: block; } .macia-service-kicker { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 18px; padding: 6px 10px; border-radius: 999px; background: rgba(99,6,15,0.07); color: var(--m-hover); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase; } .service-slide-card > i { width: 58px; height: 58px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 8px; background: var(--m-hover) !important; color: #fff !important; font-size: 30px !important; margin-bottom: 22px !important; box-shadow: 0 12px 30px rgba(99,6,15,0.16); } .service-slide-card .title { color: var(--m-ink) !important; margin-bottom: 12px; } .service-slide-card p { color: rgba(25,37,53,0.72) !important; font-size: 15px !important; line-height: 1.68 !important; } .service-slide-card .btn-link { display: inline-flex; align-items: center; gap: 6px; color: var(--m-hover) !important; padding-top: 0; } .service-slide-card:hover, .service-slide-card:focus { background: #fff !important; border-color: rgba(99,6,15,0.35) !important; transform: translateY(-6px) !important; box-shadow: 0 24px 70px rgba(25,37,53,0.14) !important; } .service-slide-card:hover::before, .service-slide-card:focus::before { transform: scaleX(1); background: var(--m-red); } .service-slide-card:hover > i, .service-slide-card:focus > i { background: var(--m-red) !important; color: var(--m-ink) !important; } .service-slide-card:hover .title, .service-slide-card:focus .title { color: var(--m-hover) !important; } .service-slide-card:hover p, .service-slide-card:focus p { color: rgba(25,37,53,0.78) !important; } .service-slide-card:hover .btn-link, .service-slide-card:focus .btn-link { color: var(--m-hover) !important; } @media (max-width: 767px) { .service-section .section-heading { position: static; } .service-slide-card { min-height: 330px; padding: 26px; } } .service-section.bg-white > .divider:last-child { height: clamp(20px, 4vw, 46px); } .about-section.bg-secondary > .divider:first-child { height: clamp(20px, 4vw, 46px); } /* Navigation slider */ .service-button-prev, .service-button-next { background: var(--m-hover) !important; border-color: var(--m-hover) !important; color: #fff !important; } .service-button-prev:hover, .service-button-next:hover { background-color: #8b0f1a !important; border-color: #8b0f1a !important; color: #fff !important; } .service-button-prev i, .service-button-next i { color: #fff !important; } .swiper-pagination-bullet-active { background-color: var(--m-red) !important; } /* ================================================================ 12. Section About / Cabinet ================================================================ */ .about-section { background-color: var(--m-soft) !important; } .experience-card { background: var(--m-red) !important; } .experience-card h2, .experience-card p { color: #fff !important; } .macia-about-img { width: 100%; height: 400px; object-fit: cover; border-radius: 8px; } .macia-about-img-tall { height: 480px; object-position: center top; } @media (max-width: 991px) { .macia-about-img, .macia-about-img-tall { height: 300px; } } /* ================================================================ 13. Domaines prioritaires (case study) ================================================================ */ .case-study-section.bg-white { background-color: var(--th-bg) !important; } .macia-case-card { display: block; position: relative; overflow: hidden; min-height: 330px; color: #fff; text-decoration: none; border-radius: 6px; } .macia-case-card::after { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(180deg, rgba(25,37,53,0) 40%, rgba(25,37,53,0.75) 100%); pointer-events: none; } .macia-case-card img { display: block; width: 100%; height: 100%; min-height: 330px; object-fit: cover; object-position: center; transition: transform 0.5s ease; } .macia-case-card:hover img { transform: scale(1.04); } .macia-case-label { position: absolute; left: 26px; right: 72px; bottom: 22px; z-index: 2; color: #fff; font-size: 19px; font-weight: 600; line-height: 1.25; } .macia-case-arrow { position: absolute; right: 18px; bottom: 18px; z-index: 3; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--m-hover); color: #fff; border: 1px solid var(--m-hover); transition: transform 0.28s ease, background 0.28s ease, color 0.28s ease; } .macia-case-card:hover .macia-case-arrow { transform: translate(3px, -3px); background: #fff; color: var(--m-hover); } .macia-case-grid > .col-12:nth-child(-n+2) .macia-case-card, .macia-case-grid > .col-12:nth-child(-n+2) .macia-case-card img { height: 430px; min-height: 430px; } .macia-case-grid > .col-12:nth-child(n+3) .macia-case-card, .macia-case-grid > .col-12:nth-child(n+3) .macia-case-card img { height: 390px; min-height: 390px; } @media (max-width: 991px) { .macia-case-grid > .col-12 .macia-case-card, .macia-case-grid > .col-12 .macia-case-card img { height: 300px; min-height: 300px; } } @media (max-width: 575px) { .macia-case-grid > .col-12 .macia-case-card, .macia-case-grid > .col-12 .macia-case-card img { height: 240px; min-height: 240px; } .macia-case-label { font-size: 16px; left: 16px; bottom: 16px; right: 58px; } .macia-case-arrow { width: 42px; height: 42px; right: 12px; bottom: 12px; } } /* ================================================================ 14. Work Process ================================================================ */ .work-process-section.bg-dark { background-color: var(--m-ink) !important; } .process-card .number { background: var(--m-red) !important; border-color: var(--m-red) !important; color: #fff !important; } .process-card .process-title { color: #fff; font-size: 20px; font-weight: 600; margin-bottom: 10px; } .process-card p { color: rgba(255,255,255,0.78); } .macia-process-intro { color: rgba(255,255,255,0.78); max-width: 520px; } .process-card:hover .process-text { background: var(--m-red) !important; } .process-card:hover .process-title, .process-card:hover p { color: #fff !important; } /* ================================================================ 15. Section résultats (parallax) ================================================================ */ .macia-results-heading { padding-top: 80px; background-color: #fff; } .macia-results-section { background-size: cover; background-position: center; } .macia-results-section::after { background: rgba(25,37,53,0.54); } .macia-results-section .milestone-card { background-color: var(--m-warm); border: 1px solid rgba(151,189,198,0.26); border-radius: 8px; } .macia-results-section .single-milestone h2 { color: var(--m-red); font-size: 36px; line-height: 1; font-family: var(--font-display); } .macia-results-section .single-milestone p { color: var(--m-ink); } @media (max-width: 575px) { .macia-results-section { min-height: 680px; padding-top: 90px; } .macia-results-section .milestone-card { width: 100%; } .macia-results-heading { padding-top: 56px; } } /* ================================================================ 16. Témoignages — sans photos, carte plein-largeur propre ================================================================ */ .testimonial-section.bg-white { background-color: #fff !important; } /* Masquer les vignettes photo */ .testimonial-card .testimonial-thumbnail { display: none !important; } /* Info plein-largeur avec une seule bordure */ .testimonial-card .testimonial-info { max-width: 100% !important; width: 100% !important; flex: 0 0 100% !important; margin-left: 0 !important; border-radius: 12px !important; border: 1px solid rgba(177,146,132,0.22) !important; padding: 24px 24px 28px !important; background: #fff; transition: border-color 0.28s ease, box-shadow 0.28s ease; display: flex !important; flex-direction: column !important; } .testimonial-card .testimonial-info:hover { border-color: rgba(177,146,132,0.50) !important; box-shadow: 0 8px 32px rgba(25,37,53,0.08) !important; } /* Carte globale : flex stretch */ .testimonial-card { display: flex !important; align-items: stretch; border: none !important; box-shadow: none !important; background: transparent !important; } /* Icône guillemets */ .macia-quote-icon { color: var(--m-warm) !important; margin-bottom: 14px; display: block; } /* Étoiles */ .testimonial-card .stars i, .testimonial-card .rating i { color: var(--m-warm) !important; } /* Texte */ .testimonial-card .testimonial-text { color: rgba(25,37,53,0.84); font-size: 16px; line-height: 1.74; } .testimonial-card .name { color: var(--m-ink) !important; font-weight: 600; font-size: 16px; } .testimonial-card .designation { color: rgba(25,37,53,0.58); font-size: 14px; } /* Navigation swiper testimonials */ .testimonial-button-prev, .testimonial-button-next { border-color: var(--m-warm) !important; color: var(--m-ink) !important; } .testimonial-button-prev:hover, .testimonial-button-next:hover { background-color: var(--m-hover-light) !important; border-color: var(--m-red-light) !important; color: #fff !important; } /* ================================================================ 17. FAQ ================================================================ */ .faq-section.macia-home-faq { background-color: var(--m-soft) !important; } .macia-home-faq .faq-accordion .accordion-item { background: #fff; border: 1px solid rgba(177,146,132,0.18); border-radius: 10px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(25,37,53,0.05); transition: box-shadow 0.25s ease; } .macia-home-faq .faq-accordion .accordion-item:hover { box-shadow: 0 6px 24px rgba(25,37,53,0.09); } .macia-home-faq .faq-accordion .accordion-button { color: var(--m-ink); background: #fff; font-size: 15px; line-height: 1.35; font-weight: 600; letter-spacing: 0; padding: 15px 22px; } .macia-home-faq .faq-accordion .accordion-button::after { filter: invert(1) sepia(1) saturate(0) brightness(0.3); } .macia-home-faq .faq-accordion .accordion-button:not(.collapsed) { background: var(--m-ink); color: #fff; box-shadow: none; border-radius: 10px 10px 0 0; } .macia-home-faq .faq-accordion .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); } .macia-home-faq .faq-accordion .accordion-button:focus { box-shadow: none; } .macia-home-faq .faq-accordion .accordion-body { color: rgba(25,37,53,0.74); font-size: 14.5px; line-height: 1.7; padding: 14px 22px 18px; background: #fff; } @media (max-width: 575px) { .macia-home-faq .faq-accordion .accordion-button { font-size: 14.5px; line-height: 1.35; padding: 14px 16px; } .macia-home-faq .faq-accordion .accordion-body { font-size: 14px; padding: 14px 16px 16px; } } .macia-faq .accordion-item { border: 1px solid rgba(151,189,198,0.22); border-radius: 8px; overflow: hidden; margin-bottom: 12px; } .macia-faq .accordion-button:not(.collapsed) { color: #fff; background: var(--m-red); box-shadow: none; } /* ================================================================ 18. Blog / Publications ================================================================ */ .blog-section.bg-white { background-color: var(--th-bg) !important; } .blog-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; } .blog-card .post-title { color: var(--th-ink) !important; transition: color 0.25s ease; } .blog-card .post-title:hover { color: var(--m-hover-light) !important; } .blog-card .blog-meta { margin-top: 24px !important; margin-bottom: 8px !important; } .blog-card .blog-meta a { color: rgba(25,37,53,0.58); font-size: 14px; } .blog-card .blog-meta a:hover { color: var(--m-hover-light) !important; } .blog-card .dot { background: rgba(25,37,53,0.40) !important; width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; } /* ================================================================ 19. Footer — fond neutre sombre, jamais bordeaux ================================================================ */ .footer-wrapper, .footer-wrapper.bg-dark, .footer-wrapper.bg-dark.macia-section-footer, .macia-section-footer.bg-dark, footer.bg-dark { background-color: var(--th-dark-bg) !important; background-image: none !important; } .footer-wrapper::after, .footer-wrapper::before { display: none !important; } .macia-footer-logo { max-width: min(300px, 100%); width: auto; max-height: 150px; object-fit: contain; background: #fff; padding: 14px; border-radius: 6px; } .macia-footer-contact-icon { width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(151,189,198,0.10); border: 1px solid rgba(151,189,198,0.34); } .macia-footer-contact-icon i { color: var(--m-teal) !important; font-size: 21px; } .macia-footer-heading { color: #fff !important; font-size: 19px; margin-bottom: 16px; } .macia-footer-intro, .macia-footer-list span, .macia-footer-list a, .macia-footer-links a, .macia-footer-legal a, .footer-links a, .footer-bottom-nav a { color: rgba(255,255,255,0.68) !important; text-decoration: none; } .macia-footer-list { list-style: none; padding-left: 0; margin-bottom: 0; } .macia-footer-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; } .macia-footer-list i { color: var(--m-teal) !important; margin-top: 3px; } .macia-footer-list a:hover, .macia-footer-links a:hover, .macia-footer-legal a:hover, .footer-links a:hover, .footer-bottom-nav a:hover, .footer-wrapper a:hover { color: var(--m-hover-light) !important; } .footer-line { border-color: rgba(151,189,198,0.16) !important; } .macia-lawgis-footer-top { margin-bottom: 52px; padding: 38px 0 52px; border-top: 1px solid rgba(151,189,198,0.12); border-bottom: 1px solid rgba(151,189,198,0.18); } @media (max-width: 991px) { .macia-section-footer .footer-contact-card { padding: 14px 0; border-bottom: 1px solid rgba(151,189,198,0.14); } } /* ================================================================ 20. Section Contact lumineuse ================================================================ */ .contact-section.macia-contact-light { background-color: var(--m-soft) !important; } .contact-section.macia-contact-light h2 { color: var(--m-ink) !important; } .contact-section.macia-contact-light .sub-title { color: var(--m-warm) !important; } .macia-contact-intro { color: rgba(25,37,53,0.72); line-height: 1.72; } .macia-contact-info-card { display: flex; align-items: flex-start; gap: 18px; background: #fff; border: 1px solid rgba(151,189,198,0.26); border-radius: 10px; padding: 22px 24px; box-shadow: 0 10px 28px rgba(25,37,53,0.05); transition: box-shadow 0.28s ease, border-color 0.28s ease; } .macia-contact-info-card:hover { box-shadow: 0 18px 46px rgba(25,37,53,0.09); border-color: rgba(151,189,198,0.48); } .macia-contact-info-card .icon-wrapper { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(151,189,198,0.12); border: 1px solid rgba(151,189,198,0.24); } .macia-contact-info-card .icon-wrapper i { color: var(--m-warm); font-size: 22px; } .macia-contact-info-card p { color: var(--m-ink) !important; } .macia-contact-info-card a { color: var(--m-ink) !important; font-weight: 600; font-size: 16px; } .macia-contact-info-card a:hover { color: var(--m-hover-light) !important; } .macia-contact-form { background: #fff; border: 1px solid rgba(151,189,198,0.22); border-radius: 12px; box-shadow: 0 22px 68px rgba(25,37,53,0.08); padding: 36px 38px; } .macia-contact-form .contact-title { color: var(--m-ink); font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.1; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid rgba(151,189,198,0.18); } .macia-contact-form .form-control { background: var(--m-soft); border: 1px solid rgba(177,146,132,0.24); color: var(--m-ink); border-radius: 7px; min-height: 52px; } .macia-contact-form textarea.form-control { min-height: 140px; resize: none; } .macia-contact-form .form-control::placeholder { color: rgba(25,37,53,0.40); } .macia-contact-form .form-control:focus { background: #fff; border-color: var(--m-hover-light); box-shadow: 0 0 0 3px rgba(177,146,132,0.14); outline: none; } /* Select sujet désactivé */ .macia-contact-form select#macia-sujet:disabled { opacity: 0.45; cursor: not-allowed; } /* Apparence native select */ .macia-contact-form select.form-control { appearance: auto; cursor: pointer; } @media (max-width: 575px) { .macia-contact-form { padding: 24px 20px; } } /* ================================================================ 21. Breadcrumb (pages internes) ================================================================ */ .breadcrumb-section { position: relative; margin-top: 164px !important; z-index: 1; min-height: 260px !important; display: flex !important; align-items: center !important; padding: 64px 0 !important; overflow: hidden !important; background-size: cover !important; background-position: center center !important; } .breadcrumb-section::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(25,37,53,0.72) 0%, rgba(25,37,53,0.42) 55%, rgba(25,37,53,0.55) 100% ); } .breadcrumb-content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; position: relative; z-index: 2; width: 100%; min-height: 0 !important; padding: 0 !important; text-align: center; transform: none !important; } .breadcrumb-section .divider { display: none !important; } .breadcrumb-content h1, .breadcrumb-content h2 { display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; color: #fff !important; margin: 0 0 16px !important; text-align: center !important; text-shadow: 0 2px 18px rgba(0,0,0,0.28); } .breadcrumb-content ul { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; } .breadcrumb-content li { color: #fff !important; line-height: 1.35; } .breadcrumb-section li a { color: var(--m-teal) !important; } .breadcrumb-section li a:hover { color: var(--m-hover-light) !important; } .breadcrumb-section li.active { color: rgba(255,255,255,0.70); } @media (max-width: 991px) { .breadcrumb-section { margin-top: 152px !important; min-height: 220px !important; padding: 52px 0 !important; } .breadcrumb-content { width: 100%; } .breadcrumb-content h1, .breadcrumb-content h2 { font-size: 2.25rem !important; line-height: 1.08 !important; overflow-wrap: anywhere; } } @media (max-width: 575px) { .breadcrumb-section { margin-top: 152px !important; min-height: 200px !important; padding: 44px 0 !important; } } /* ================================================================ 22. Pages de droits — contenu / sidebar ================================================================ */ .service-widget { border: 1px solid rgba(151,189,198,0.22); border-radius: 8px; padding: 28px; } .service-list li + li { margin-top: 9px; } .service-list li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-radius: 6px; color: var(--m-ink); border: 1px solid rgba(151,189,198,0.18); text-decoration: none; transition: all 0.25s ease; } .service-list li a::after { content: "\ea61"; font-family: "tabler-icons"; font-size: 18px; flex-shrink: 0; } .service-list li a:hover, .service-list li.active a, .service-list li a.active { background-color: var(--m-hover-light) !important; border-color: var(--m-red-light) !important; color: #fff !important; } /* Blocs éditoriaux premium */ .macia-premium-panel { height: 100%; padding: 32px; border-radius: 8px; background: var(--th-bg); border: 1px solid rgba(151,189,198,0.26); box-shadow: 0 14px 46px rgba(25,37,53,0.06); transition: border-color 0.28s ease, box-shadow 0.28s ease; } .macia-premium-panel:hover { border-color: rgba(151,189,198,0.50); box-shadow: 0 20px 58px rgba(25,37,53,0.09); } .macia-domain-feature-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; margin-bottom: 24px; box-shadow: 0 14px 40px rgba(25,37,53,0.10); } /* Bloc SEO liste */ .macia-detail-seo { margin: 38px 0; padding: 28px; border-radius: 8px; background: linear-gradient(135deg, rgba(151,189,198,0.10), rgba(251,248,246,0.92)); border: 1px solid rgba(151,189,198,0.26); } .macia-detail-seo ul { list-style: none !important; margin: 16px 0 0; padding: 0; } .macia-detail-seo li { position: relative; display: block; padding: 11px 14px 11px 40px; color: rgba(25,37,53,0.86) !important; line-height: 1.6; border-radius: 7px; background: rgba(255,255,255,0.72); border: 1px solid rgba(151,189,198,0.22); margin-bottom: 9px; } .macia-detail-seo li::before { content: ""; position: absolute; top: 17px; left: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--m-teal); box-shadow: 0 0 0 3px rgba(151,189,198,0.18); } .macia-detail-seo p { color: rgba(25,37,53,0.86); line-height: 1.74; } /* Liens connexes (entre pages droits) */ .macia-related-links { display: flex; flex-wrap: wrap; gap: 9px; } .macia-related-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--m-red); border: 1px solid rgba(151,189,198,0.38); background: rgba(151,189,198,0.08); transition: all 0.25s ease; } .macia-related-links a:hover { color: #fff; background: var(--m-red-light); border-color: var(--m-hover-light); } .service-details-content img { border-radius: 8px; width: 100%; max-height: 420px; object-fit: cover; } @media (max-width: 575px) { .service-widget, .macia-premium-panel { padding: 20px; } .macia-detail-seo { padding: 20px; } } /* ================================================================ 23. Contact page dédiée ================================================================ */ .contact-section.macia-contact-page { background-color: var(--m-soft) !important; } .macia-contact-page .contact-info-card { background: #fff; color: var(--m-ink); border: 1px solid rgba(151,189,198,0.30); border-radius: 10px; padding: 22px 24px; box-shadow: 0 6px 28px rgba(25,37,53,0.06); transition: border-color 0.28s ease, box-shadow 0.28s ease; } .macia-contact-page .contact-info-card:hover { border-color: var(--m-teal); box-shadow: 0 14px 46px rgba(25,37,53,0.10); } .macia-contact-page .contact-info-card h5 { font-size: 15px; font-weight: 700; color: var(--m-warm) !important; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .macia-contact-page .contact-info-card h5 i { color: var(--m-red) !important; font-size: 18px; } .macia-contact-page .contact-info-card a, .macia-contact-page .contact-info-card p { color: var(--m-ink) !important; font-size: 16px; margin-bottom: 0; } .macia-contact-page .contact-info-card a:hover { color: var(--m-hover-light) !important; } .macia-contact-page .form-control, .macia-contact-page .form-select { min-height: 54px; border-color: rgba(151,189,198,0.30); } /* Bande feature contact */ .macia-contact-feature { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; border-radius: 10px; border: 1px solid rgba(151,189,198,0.22); background: var(--m-soft); height: 100%; } .macia-contact-feature i { font-size: 32px; color: var(--m-red); line-height: 1; } .macia-contact-feature strong { display: block; font-size: 16px; color: var(--m-ink); font-weight: 700; } .macia-contact-feature span { display: block; font-size: 14px; color: rgba(25,37,53,0.68); line-height: 1.5; } .macia-form-notice { font-size: 13px; color: rgba(25,37,53,0.52); text-align: center; margin-bottom: 0; } /* ================================================================ 23b. Étape 16 — Contact conversion ================================================================ */ .macia-contact-conversion { background: linear-gradient(180deg, #fff 0%, var(--m-soft) 100%) !important; } .macia-contact-sticky { position: sticky; top: 200px; } /* ================================================================ Contenu article — listes ul/ol avec puces visibles ================================================================ */ .service-details-content ul, .blog-details-content ul { display: block !important; padding-left: 0 !important; margin: 0 0 4px !important; gap: 0 !important; } .service-details-content ol, .blog-details-content ol { display: block !important; padding-left: 1.4em !important; margin: 0 0 4px !important; } .service-details-content ul li, .blog-details-content ul li { display: flex !important; align-items: baseline !important; gap: 10px !important; padding: 3px 0 !important; line-height: 1.65 !important; } .service-details-content ul li::before, .blog-details-content ul li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--m-warm); flex-shrink: 0; margin-top: 7px; } .service-details-content ol li, .blog-details-content ol li { display: list-item !important; padding: 2px 0 !important; line-height: 1.65 !important; } /* ================================================================ Contenu article — note / conseil ================================================================ */ .macia-article-note { position: relative; background: rgba(177,146,132,0.08); border-left: 3px solid var(--m-warm); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 24px 0; font-size: 14.5px; color: rgba(25,37,53,0.78); line-height: 1.65; } .macia-article-note p { margin: 0; } .macia-article-note strong { color: var(--m-ink); } /* ================================================================ Sidebar article — widget compact ================================================================ */ .macia-article-sidebar { border-radius: 12px; overflow: hidden; box-shadow: 0 12px 32px rgba(25,37,53,0.14); } .macia-sidebar-inner { background: var(--m-ink); padding: 20px 20px 16px; } .macia-sidebar-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .macia-sidebar-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(99,6,15,0.22); border: 1px solid rgba(99,6,15,0.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .macia-sidebar-avatar i { font-size: 18px; color: var(--m-warm); } .macia-sidebar-top strong { display: block; font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.25; } .macia-sidebar-top span { font-size: 11.5px; color: rgba(151,189,198,0.65); } .macia-sidebar-rdv-text { font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0 0 14px; } .macia-sidebar-divider { height: 1px; background: rgba(151,189,198,0.12); margin: 14px 0 12px; } .macia-sidebar-phone { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--m-warm) !important; text-decoration: none !important; transition: color 200ms ease; } .macia-sidebar-phone:hover { color: #fff !important; } .macia-sidebar-phone i { font-size: 14px; } .macia-sidebar-back-link { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: rgba(151,189,198,0.6) !important; text-decoration: none !important; transition: color 200ms ease; } .macia-sidebar-back-link:hover { color: rgba(151,189,198,1) !important; } .macia-sidebar-back-link i { font-size: 13px; } .macia-contact-conversion h2 { margin-bottom: 18px; } .macia-contact-lead { color: rgba(25,37,53,0.76) !important; font-size: 17px !important; line-height: 1.75 !important; margin-bottom: 26px; } .macia-contact-actions { display: grid; gap: 14px; margin-bottom: 24px; } .macia-contact-action { display: flex; align-items: center; gap: 16px; min-height: 78px; padding: 18px; border-radius: 8px; background: #fff; border: 1px solid rgba(151,189,198,0.30); color: var(--m-ink) !important; box-shadow: 0 14px 42px rgba(25,37,53,0.07); transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background 260ms ease; } .macia-contact-action i { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(99,6,15,0.08); color: var(--m-hover); font-size: 23px; flex: 0 0 48px; } .macia-contact-action strong, .macia-contact-action small { display: block; } .macia-contact-action strong { color: var(--m-ink); font-size: 16px; margin-bottom: 2px; } .macia-contact-action small { color: rgba(25,37,53,0.62); font-size: 14px; } .macia-contact-action-primary { background: var(--m-hover); border-color: var(--m-hover); } .macia-contact-action-primary i { background: rgba(255,255,255,0.12); color: #fff; } .macia-contact-action-primary strong, .macia-contact-action-primary small { color: #fff; } .macia-contact-action:hover, .macia-contact-action:focus { transform: translateY(-3px); border-color: rgba(99,6,15,0.32); box-shadow: 0 18px 54px rgba(25,37,53,0.12); } .macia-contact-action-primary:hover, .macia-contact-action-primary:focus { background: var(--m-red) !important; border-color: var(--m-red) !important; } .macia-contact-action-primary:hover strong, .macia-contact-action-primary:hover small, .macia-contact-action-primary:focus strong, .macia-contact-action-primary:focus small, .macia-contact-action-primary:hover i, .macia-contact-action-primary:focus i { color: var(--m-ink) !important; } .macia-contact-action-primary:hover i, .macia-contact-action-primary:focus i { background: rgba(25,37,53,0.08); } .macia-contact-proof-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; } .macia-contact-proof-grid div { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: start; min-width: 0; min-height: 0; padding: 20px; border-radius: 8px; background: #fff; border: 1px solid rgba(151,189,198,0.28); box-shadow: 0 18px 48px rgba(25,37,53,0.07); } .macia-contact-proof-grid i { grid-row: span 2; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(99,6,15,0.07); color: var(--m-warm); font-size: 27px; margin-bottom: 0; } .macia-contact-proof-grid strong, .macia-contact-proof-grid span { display: block; } .macia-contact-proof-grid strong { color: var(--m-ink); font-size: 16px; margin-bottom: 6px; line-height: 1.25; } .macia-contact-proof-grid span { color: rgba(25,37,53,0.62); font-size: 14.5px; line-height: 1.55; } .macia-contact-location { display: flex; gap: 14px; padding: 18px; border-radius: 8px; background: rgba(25,37,53,0.96); color: #fff; } .macia-contact-location > i { color: var(--m-red); font-size: 24px; flex: 0 0 auto; margin-top: 2px; } .macia-contact-location strong, .macia-contact-location span, .macia-contact-location small { display: block; } .macia-contact-location strong { color: #fff; margin-bottom: 4px; } .macia-contact-location span { color: rgba(255,255,255,0.84); margin-bottom: 6px; } .macia-contact-location small { color: rgba(255,255,255,0.62); line-height: 1.5; } .macia-contact-conversion .macia-contact-form { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid rgba(151,189,198,0.34); box-shadow: 0 24px 80px rgba(25,37,53,0.10); } .macia-contact-conversion .macia-contact-form::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--m-hover); } .macia-form-heading { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid rgba(151,189,198,0.18); } .macia-form-heading .contact-title { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; } .macia-form-heading p { color: rgba(25,37,53,0.68) !important; margin-bottom: 0; } .macia-contact-conversion .form-label { color: rgba(25,37,53,0.70); margin-bottom: 7px; } .macia-contact-conversion .macia-form-notice { display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(25,37,53,0.68); } .macia-contact-conversion .macia-form-notice i { color: var(--m-warm); font-size: 18px; } @media (max-width: 991px) { .macia-contact-sticky { position: static; } .macia-contact-proof-grid { grid-template-columns: 1fr; } } @media (max-width: 575px) { .macia-contact-conversion { padding-top: 0; } .macia-contact-conversion h2 { font-size: clamp(28px, 8vw, 36px) !important; } .macia-contact-lead { font-size: 16px !important; line-height: 1.65 !important; } .macia-contact-action, .macia-contact-location { padding: 16px; } .macia-contact-proof-grid { gap: 12px; } .macia-contact-proof-grid div { grid-template-columns: 48px 1fr; align-items: start; padding: 18px; } .macia-contact-proof-grid i { width: 48px; height: 48px; font-size: 26px; } .macia-contact-proof-grid strong { font-size: 15.5px; } .macia-contact-conversion .macia-form-notice { align-items: flex-start; text-align: left; } } /* ================================================================ 24. Sticky CTA mobile ================================================================ */ .macia-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; display: flex; box-shadow: 0 -4px 20px rgba(0,0,0,0.20); } .macia-sticky-cta a { flex: 1; display: flex; align-items: center; justify-content: center; height: 54px; font-weight: 700; font-size: 15px; text-decoration: none; transition: background 0.2s; } .macia-sticky-cta .call { background: var(--m-red); color: #fff; } .macia-sticky-cta .call:hover { background: var(--m-red-light); color: #fff; } .macia-sticky-cta .rdv { background: var(--m-ink); color: #fff; } .macia-sticky-cta .rdv:hover { background: var(--m-red-light); color: #fff; } @media (min-width: 992px) { .macia-sticky-cta { display: none; } } @media (max-width: 991px) { body { padding-bottom: 54px; } } /* ================================================================ 25. Swiper générique / helpers ================================================================ */ .macia-domain-swiper { overflow: hidden; padding: 4px 4px 18px; max-width: 100%; } .macia-domain-swiper .swiper-slide { height: auto; } .macia-swiper-nav button { width: 50px; height: 50px; border: 1px solid var(--m-warm); border-radius: 50%; background: transparent; color: var(--m-ink); display: inline-flex; align-items: center; justify-content: center; transition: all 0.28s ease; } .macia-swiper-nav button:hover { background: var(--m-red-light); border-color: var(--m-hover-light); color: #fff; } .service-card.style-two { min-height: 275px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* ================================================================ 26. Cookie banner ================================================================ */ .cookiealert { background: #FDFAF7 !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important; padding: 24px 24px 0 !important; max-width: 380px !important; left: 1rem !important; right: auto !important; bottom: 1rem !important; width: calc(100% - 2rem) !important; } @media (max-width: 991px) { .cookiealert { bottom: calc(54px + 0.75rem) !important; left: 0.75rem !important; right: 0.75rem !important; max-width: none !important; width: auto !important; } } @media (min-width: 992px) { .cookiealert { max-width: 420px !important; left: 2rem !important; bottom: 2rem !important; right: auto !important; width: auto !important; } } .cookiealert-header { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .cookiealert-icon { width: 52px; height: 52px; min-width: 52px; border-radius: 50%; background: #F1EAE2; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; } .cookiealert h2 { font-family: var(--font-display) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--m-hover) !important; margin: 0 !important; line-height: 1.2 !important; } .cookiealert p { font-size: 14px !important; color: #4a5568 !important; line-height: 1.6 !important; margin-bottom: 6px !important; } .cookiealert a { color: var(--m-hover) !important; text-decoration: underline !important; } .cookiealert-btns { display: flex; gap: 10px; margin: 18px 0; } .cookiealert .acceptcookies { flex: 1; background: var(--m-hover) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 10px 14px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; transition: background 0.2s !important; } .cookiealert .acceptcookies:hover { background: #8a0810 !important; } .cookiealert .refusecookies { flex: 1; background: transparent !important; color: var(--m-ink) !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; padding: 10px 14px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; transition: border-color 0.2s, color 0.2s !important; box-shadow: none !important; } .cookiealert .refusecookies:hover { border-color: var(--m-hover) !important; color: var(--m-hover) !important; } .cookiealert-sep { margin: 0 -24px !important; border: 0 !important; border-top: 1px solid #e5e7eb !important; opacity: 1 !important; } .cookiealert-customize { display: flex; align-items: center; gap: 12px; width: calc(100% + 48px); margin: 0 -24px; padding: 14px 24px; background: transparent; border: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--m-ink); text-align: left; border-radius: 0 0 16px 16px; transition: background 0.15s; } .cookiealert-customize:hover { background: #f5f0ea; } .cookiealert-customize .ti-chevron-right { margin-left: auto; color: #9ca3af; font-size: 16px; } /* ── Modal Personnaliser ──────────────────────────────────────────────────── */ .macia-cookie-modal { display: none; position: fixed; inset: 0; z-index: 10010; align-items: center; justify-content: center; padding: 1rem; } .macia-cookie-modal.is-open { display: flex; } .macia-cookie-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); } .macia-cookie-modal-panel { position: relative; background: #FDFAF7; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.22); width: 100%; max-width: 480px; max-height: calc(100dvh - 2rem); overflow-y: auto; display: flex; flex-direction: column; } body.macia-cookie-open { overflow: hidden; } .macia-cookie-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 0; gap: 12px; } .macia-cookie-modal-header h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--m-hover); margin: 0; line-height: 1.2; } .macia-cookie-modal-close { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: 1px solid #e5e7eb; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; font-size: 18px; transition: background 0.15s, color 0.15s; } .macia-cookie-modal-close:hover { background: #f3f4f6; color: var(--m-ink); } .macia-cookie-modal-body { padding: 16px 24px; flex: 1; } .macia-cookie-modal-body > p { font-size: 14px; color: #6b7280; line-height: 1.6; margin-bottom: 20px; } .macia-cookie-cat { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin-bottom: 12px; } .macia-cookie-cat-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .macia-cookie-cat-info { flex: 1; } .macia-cookie-cat-info strong { font-size: 15px; font-weight: 600; color: var(--m-ink); display: block; margin-bottom: 4px; } .macia-cookie-cat-info p { font-size: 13px; color: #6b7280; line-height: 1.5; margin: 0; } .macia-cookie-always-on { font-size: 12px; font-weight: 600; color: var(--m-hover); background: rgba(99,6,15,0.08); border-radius: 20px; padding: 4px 10px; white-space: nowrap; flex-shrink: 0; margin-top: 2px; } /* Toggle switch */ .macia-cookie-toggle { position: relative; display: inline-block; flex-shrink: 0; margin-top: 2px; cursor: pointer; } .macia-cookie-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .macia-cookie-toggle-track { display: block; width: 44px; height: 24px; background: #d1d5db; border-radius: 12px; position: relative; transition: background 0.25s; } .macia-cookie-toggle input:checked + .macia-cookie-toggle-track { background: var(--m-hover); } .macia-cookie-toggle-thumb { position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform 0.25s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } .macia-cookie-toggle input:checked + .macia-cookie-toggle-track .macia-cookie-toggle-thumb { transform: translateX(20px); } .macia-cookie-modal-footer { display: flex; gap: 8px; padding: 16px 24px 24px; border-top: 1px solid #e5e7eb; } .macia-cookie-refuse-all, .macia-cookie-save, .macia-cookie-accept-all { flex: 1; padding: 10px 8px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; } .macia-cookie-refuse-all { background: transparent; color: #6b7280; border: 1px solid #d1d5db; } .macia-cookie-refuse-all:hover { border-color: var(--m-hover); color: var(--m-hover); } .macia-cookie-save { background: transparent; color: var(--m-hover); border: 1.5px solid var(--m-hover); } .macia-cookie-save:hover { background: rgba(99,6,15,0.06); } .macia-cookie-accept-all { background: var(--m-hover); color: #fff; border: none; } .macia-cookie-accept-all:hover { background: #8a0810; } @media (max-width: 420px) { .macia-cookie-modal-footer { flex-direction: column; } .macia-cookie-accept-all { order: -1; } } /* ================================================================ 27. SEO local — blocs spécifiques ================================================================ */ .macia-seo-local { font-size: 0.95rem; color: rgba(25,37,53,0.78); line-height: 1.7; } .macia-about-stat strong { display: block; color: var(--m-red); font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; } .macia-about-stat { border-top: 1px solid rgba(151,189,198,0.36); padding-top: 20px; } /* Bande valeurs cabinet */ .macia-values-strip { background: var(--m-ink); padding: 0; } .macia-value-block { padding: 48px 40px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid rgba(255,255,255,0.08); } .macia-value-block:last-child { border-right: none; } .macia-value-block--mid { background: rgba(255,255,255,0.03); } .macia-value-block i { font-size: 36px; color: var(--m-warm); line-height: 1; } .macia-value-block strong { display: block; font-size: 20px; font-weight: 700; color: #fff; font-family: var(--font-display); } .macia-value-block span { display: block; font-size: 15px; color: rgba(255,255,255,0.68); line-height: 1.6; } @media (max-width: 767px) { .macia-value-block { padding: 32px 24px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); } .macia-value-block:last-child { border-bottom: none; } } /* Sections méthode alternée */ .macia-approach-number { font-family: var(--font-display); font-size: 5rem; color: rgba(177,146,132,0.18); line-height: 1; margin-bottom: 8px; } .macia-approach-list { list-style: none; padding: 0; margin: 16px 0 0 0; } .macia-approach-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 15px; color: rgba(25,37,53,0.80); line-height: 1.5; } .macia-approach-list li i { color: var(--m-warm); font-size: 16px; flex: 0 0 16px; margin-top: 2px; } .macia-approach-card { border-radius: 14px; padding: 44px 40px; display: flex; flex-direction: column; gap: 18px; min-height: 220px; justify-content: center; } .macia-approach-card i { font-size: 52px; line-height: 1; } .macia-approach-card p { font-size: 16px; line-height: 1.7; margin: 0; } .macia-approach-card--teal { background: rgba(151,189,198,0.12); border: 1px solid rgba(151,189,198,0.30); } .macia-approach-card--teal i { color: var(--m-teal); } .macia-approach-card--teal p { color: rgba(25,37,53,0.78); } .macia-approach-card--warm { background: rgba(177,146,132,0.10); border: 1px solid rgba(177,146,132,0.28); } .macia-approach-card--warm i { color: var(--m-warm); } .macia-approach-card--warm p { color: rgba(25,37,53,0.78); } .macia-approach-card--red { background: var(--m-red); border: 1px solid transparent; } .macia-approach-card--red i { color: rgba(255,255,255,0.90); } .macia-approach-card--red p { color: rgba(255,255,255,0.88); } /* ================================================================ 28. Corrections globales overflow / image ================================================================ */ .hero-section { min-height: 580px; position: relative; } .hero-section .container { position: relative; z-index: 2; } .macia-rounded-img { width: 100%; border-radius: 8px; object-fit: cover; } .macia-card-link { display: block; height: 100%; color: inherit; text-decoration: none; overflow: hidden; } .macia-card-link:hover { color: inherit; } .service-container .row, .blog-section .row { overflow: visible; } /* ================================================================ Correctifs complémentaires — éléments manqués ================================================================ */ /* Process cards — h4 sur fond sombre */ .process-card .process-text h4 { color: #fff; font-size: 22px; font-weight: 600; margin-bottom: 10px; } .process-card:hover .process-text h4, .process-card:focus .process-text h4 { color: var(--m-ink) !important; } /* Ligne de connexion entre cards (visible sur fond clair) */ .process-card::after { background-color: rgba(151,189,198,0.34); } /* ── CTA Band — fond crème, typographie sombre, séparé du footer ── */ .macia-cta-band { position: relative; overflow: hidden; background: var(--th-surface) !important; border-top: 3px solid var(--m-red); padding: 80px 0; } .macia-cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 130% at 90% 50%, rgba(177,146,132,0.14) 0%, transparent 55%), radial-gradient(ellipse 35% 90% at 5% 90%, rgba(25,37,53,0.05) 0%, transparent 50%); pointer-events: none; } .macia-cta-band .container { position: relative; z-index: 1; } .macia-cta-band h2 { font-size: clamp(22px, 3vw, 38px); line-height: 1.15; margin-bottom: 0; color: var(--th-ink) !important; } /* Forcer le texte sombre (HTML utilise text-white hardcodé) */ .macia-cta-band .text-white { color: var(--th-ink) !important; } .macia-cta-band .sub-title { color: var(--m-warm) !important; font-size: 11px !important; letter-spacing: .12em; margin-bottom: 14px; } .macia-cta-band .sub-title img { filter: brightness(0) invert(1) sepia(1) saturate(8) hue-rotate(322deg) brightness(0.8) !important; opacity: 1 !important; } .macia-cta-band .sub-title i { font-size: 18px; color: var(--m-warm) !important; margin-right: 6px; vertical-align: middle; } .macia-cta-band .btn-primary { background: var(--m-hover) !important; border-color: var(--m-hover) !important; color: #fff !important; font-weight: 700; } .macia-cta-band .btn-primary:hover { background: var(--m-red) !important; border-color: var(--m-red) !important; color: var(--m-ink) !important; } .macia-cta-band .btn-primary span, .macia-cta-band .btn-primary i { color: #fff !important; } .macia-cta-band .btn-primary:hover span, .macia-cta-band .btn-primary:hover i { color: var(--m-ink) !important; } /* Sections bg-dark hors CTA band et footer */ section.bg-dark:not(.work-process-section):not(.macia-cta-band) { background-color: var(--m-ink) !important; } @media (max-width: 991px) { .macia-cta-band { padding: 64px 0; } .macia-cta-band .col-12.col-lg-4 { margin-top: 24px; } } @media (max-width: 767px) { .macia-cta-band { padding: 48px 0; } .macia-cta-band .btn-primary { width: 100%; justify-content: center; } } /* Service cards grille (pages domaines) */ .service-card { border: 1px solid rgba(151,189,198,0.26) !important; border-radius: 8px; background: var(--th-bg); padding: 28px; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease !important; } .service-card i { color: var(--m-warm) !important; transition: color 0.28s ease, transform 0.28s ease !important; } .service-card .service-title { color: var(--m-ink) !important; font-size: 20px; font-weight: 600; margin-bottom: 10px; transition: color 0.28s ease !important; } .service-card p { color: rgba(25,37,53,0.76); font-size: 16px; line-height: 1.65; transition: color 0.28s ease !important; } .service-card .btn-link { color: var(--m-warm) !important; transition: color 0.28s ease !important; display: block; text-align: center; margin-top: auto; padding-top: 12px; } .service-card:hover, .service-card:focus { background: var(--m-red) !important; border-color: var(--m-red) !important; transform: translateY(-5px) !important; box-shadow: 0 18px 46px rgba(25,37,53,0.22) !important; } .service-card:hover i, .service-card:hover .service-title, .service-card:hover p, .service-card:hover .btn-link, .service-card:focus i, .service-card:focus .service-title, .service-card:focus p, .service-card:focus .btn-link { color: #fff !important; } /* Copyright footer */ .copyright { color: rgba(255,255,255,0.56) !important; } /* Section domaine SEO bg-gray */ .macia-domain-seo.bg-gray, .macia-domain-seo { background-color: var(--m-soft) !important; } .macia-premium-panel ul { padding-left: 20px; } .macia-premium-panel li { margin-bottom: 9px; line-height: 1.68; color: rgba(25,37,53,0.82); } .macia-premium-panel h3 { font-size: 20px; color: var(--m-ink); margin-bottom: 12px; } /* Section contact bg sur dark (old bg-dark contact) */ .contact-section.bg-dark .contact-info-card, .contact-section.macia-contact-dark .contact-info-card { color: #fff; } .contact-section.bg-dark .contact-info-card a, .contact-section.bg-dark .contact-info-card p { color: #fff; } /* Formulaire de recherche */ .search-form-popup { background: #fff; color: var(--m-ink); } .search-form-popup h2 { color: var(--m-ink); } /* ================================================================ Correctifs footer links + helpers manqués ================================================================ */ /* Listes footer */ .macia-footer-links { list-style: none; padding-left: 0; margin-bottom: 0; } .macia-footer-links li { margin-bottom: 10px; } .macia-footer-links a { color: rgba(255,255,255,0.68) !important; text-decoration: none; } .macia-footer-links a:hover { color: var(--m-hover-light) !important; } .macia-footer-legal a { color: rgba(255,255,255,0.60) !important; text-decoration: none; } .macia-footer-legal a:hover { color: var(--m-hover-light) !important; } /* Footer bottom */ .footer-bottom-content { padding: 22px 0; } .footer-bottom-content p { color: rgba(255,255,255,0.54) !important; } /* Section contact active (pages bg-dark) */ .contact-form.bg-primary { background-color: var(--m-red) !important; } /* Liens texte premium */ .macia-premium-panel a { color: var(--m-red); } .macia-premium-panel a:hover { color: var(--m-hover-light); } /* Image hero about */ .macia-about-hero-img { width: 100%; min-height: 460px; object-fit: cover; border-radius: 8px; box-shadow: 0 26px 72px rgba(25,37,53,0.12); } @media (max-width: 767px) { .macia-about-hero-img { min-height: 300px; } } /* Overlay recherche */ .search-bg-overlay { background: rgba(25,37,53,0.70); } .search-form-popup { background: #fff; border-radius: 10px; } .search-form-popup h2 { color: var(--m-ink) !important; } .search-form-popup .form-control { border-color: rgba(151,189,198,0.30); color: var(--m-ink); } /* ================================================================ § 21 — Page de recherche (v5 — layout exact) ================================================================ */ /* ── Hero ──────────────────────────────────────────────────────── */ /* Header style-two total = header-top(56px) + navbar(108px) = 164px. On utilise un padding généreux pour que le H1 soit toujours visible. Responsive : on recalcule au breakpoint où le menu devient hamburgeur. */ .macia-srp-hero { position: relative; overflow: hidden; background: var(--th-dark-bg); padding: 220px 0 60px; } .macia-srp-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 100% at 65% 20%, rgba(151,189,198,0.24) 0%, transparent 52%), radial-gradient(ellipse 55% 80% at 5% 85%, rgba(25,37,53,0.50) 0%, transparent 48%); pointer-events: none; } .macia-srp-hero .container { position: relative; z-index: 1; } .macia-srp-hero-inner { text-align: center; } .macia-srp-hero-title { font-family: var(--font-display); font-size: clamp(28px, 3.8vw, 48px); color: #fff; font-weight: 400; margin: 0 0 16px; line-height: 1.15; } .macia-srp-breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.38); } .macia-srp-breadcrumb a { color: rgba(255,255,255,0.38); text-decoration: none; transition: color 150ms; } .macia-srp-breadcrumb a:hover { color: var(--m-hover-light); } .macia-srp-breadcrumb-sep { color: rgba(255,255,255,0.20); } /* ── Barre de recherche ────────────────────────────────────────── */ .macia-srp-bar-outer { background: #fff; padding: 36px 0 32px; } .macia-srp-bar-card { background: #fff; border-radius: 16px; border: 1.5px solid rgba(177,146,132,0.30); box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 12px 40px rgba(25,37,53,0.08); padding: 24px 28px 22px; } /* ── Ligne 1 : input + bouton + compteur ── */ .macia-srp-search-row { display: flex; flex-direction: row; /* force la ligne horizontale */ flex-wrap: nowrap; /* interdit le retour à la ligne */ align-items: center; gap: 10px; margin-bottom: 14px; } .macia-srp-input-wrap { position: relative; flex: 1 1 0%; /* prend tout l'espace disponible */ min-width: 0; } .macia-srp-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(25,37,53,0.32); font-size: 17px; pointer-events: none; z-index: 1; } .macia-srp-input { display: block; width: 100%; height: 48px; border: 1.5px solid rgba(151,189,198,0.45); border-radius: 10px; padding: 0 42px 0 44px; font-size: 15px; font-family: var(--font-body); color: var(--m-ink); background: var(--th-surface); transition: border-color 180ms, box-shadow 180ms; line-height: 1; } .macia-srp-input::-webkit-search-cancel-button, .macia-srp-input::-webkit-search-decoration { display: none; -webkit-appearance: none; } .macia-srp-input::placeholder { color: rgba(25,37,53,0.38); } .macia-srp-input:focus { outline: none; border-color: var(--m-teal); background: #fff; box-shadow: 0 0 0 3px rgba(151,189,198,0.14); } .macia-srp-clear-btn { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(25,37,53,0.30); padding: 4px; cursor: pointer; display: none; align-items: center; justify-content: center; border-radius: 4px; line-height: 1; font-size: 13px; transition: color 140ms; } .macia-srp-clear-btn:hover { color: var(--m-hover); } .macia-srp-clear-btn.macia-srp-visible { display: flex; } .btn.macia-srp-submit-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; height: 48px; min-height: 48px; max-height: 48px; padding: 0 24px; padding-top: 0; padding-bottom: 0; font-size: 15px; font-weight: 600; border-radius: 10px; white-space: nowrap; line-height: 1; box-sizing: border-box; vertical-align: middle; } /* ── Ligne 2 : filtres ── */ .macia-srp-filters-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(177,146,132,0.14); } .macia-srp-select { height: 40px; flex: 1 1 0%; min-width: 0; border: 1.5px solid rgba(177,146,132,0.24); border-radius: 9px; padding: 0 28px 0 12px; font-size: 13px; font-family: var(--font-body); color: var(--m-ink); background-color: #faf8f6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23231b1b' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color 150ms; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .macia-srp-select:hover { border-color: rgba(177,146,132,0.45); } .macia-srp-select:focus { outline: none; border-color: var(--m-teal); } .macia-srp-reset-btn { flex-shrink: 0; height: 40px; padding: 0 14px; background: none; border: 1.5px solid rgba(177,146,132,0.24); border-radius: 9px; font-size: 13px; font-family: var(--font-body); font-weight: 600; color: rgba(25,37,53,0.48); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: border-color 150ms, color 150ms, background 150ms; white-space: nowrap; } .macia-srp-reset-btn:hover { border-color: rgba(151,189,198,0.40); color: var(--m-red); background: rgba(151,189,198,0.04); } /* ── Zone résultats ─────────────────────────────────────────────── */ .macia-srp-main { background: #fff; padding: 48px 0 88px; min-height: 420px; } .macia-srp-results-hd { margin-bottom: 24px; } .macia-srp-results-count { font-family: var(--font-body); font-size: 13.5px; color: rgba(25,37,53,0.48); margin: 0; } .macia-srp-results-count strong { color: var(--m-ink); font-weight: 700; } /* ── Cards ──────────────────────────────────────────────────────── */ .macia-result-card { background: #fff; border: 1.5px solid rgba(177,146,132,0.35); border-radius: 14px; padding: 22px 20px 20px; height: 100%; display: flex; flex-direction: column; transition: box-shadow 240ms, border-color 240ms, transform 240ms; } .macia-result-card:hover { border-color: rgba(151,189,198,0.38); box-shadow: 0 8px 32px rgba(25,37,53,0.10); transform: translateY(-3px); } .macia-result-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .macia-result-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--th-surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 240ms; } .macia-result-card:hover .macia-result-icon { background: rgba(25,37,53,0.08); } .macia-result-icon .ti { font-size: 18px; color: rgba(25,37,53,0.36); transition: color 240ms; } .macia-result-card:hover .macia-result-icon .ti { color: var(--m-hover); } .macia-result-cat-badge { font-family: var(--font-body); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: 3px 9px; border-radius: 20px; background: var(--m-red); white-space: nowrap; line-height: 1.5; } .macia-result-cat-badge.badge--cabinet { background: var(--m-teal); color: var(--m-ink); } .macia-result-title { font-family: var(--font-body); font-size: 20px; font-weight: 700; color: var(--m-ink); margin: 0 0 8px; line-height: 1.3; } .macia-result-desc { font-family: var(--font-body); font-size: 16px; color: rgba(25,37,53,0.56); flex: 1; margin: 0 0 18px; line-height: 1.6; } .macia-result-link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--m-red); text-decoration: none; transition: gap 180ms, color 180ms; margin-top: auto; } .macia-result-link:hover { color: var(--m-hover-light); gap: 8px; } .macia-result-link .ti { font-size: 13px; } /* ── États vides ────────────────────────────────────────────────── */ .macia-search-empty { text-align: center; padding: 72px 24px; } .macia-search-empty-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(25,37,53,0.07); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .macia-search-empty-icon .ti { font-size: 30px; color: var(--m-red); } .macia-search-empty h3 { font-family: var(--font-body); font-size: 20px; font-weight: 700; color: var(--m-ink); margin-bottom: 10px; } .macia-search-empty p { font-family: var(--font-body); color: rgba(25,37,53,0.52); font-size: 14px; line-height: 1.7; margin-bottom: 0; } .macia-search-empty-domains { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; } .macia-srp-domain-tag { display: inline-flex; align-items: center; height: 38px; padding: 0 20px; border: 1.5px solid rgba(25,37,53,0.22); border-radius: 100px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--m-red); text-decoration: none; transition: background 160ms, border-color 160ms, color 160ms; } .macia-srp-domain-tag:hover { background: var(--m-red); border-color: var(--m-red); color: #fff; } .macia-search-empty-msg { font-family: var(--font-body); color: rgba(25,37,53,0.44); font-size: 14px; padding: 40px 0; text-align: center; } /* ── Pagination ─────────────────────────────────────────────────── */ .macia-srp-pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 48px; flex-wrap: wrap; } .macia-srp-page-btn { min-width: 38px; height: 38px; padding: 0 10px; border: 1.5px solid rgba(177,146,132,0.22); border-radius: 8px; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13.5px; font-family: var(--font-body); color: var(--m-ink); transition: border-color 150ms, background 150ms, color 150ms; } .macia-srp-page-btn:hover:not([disabled]) { border-color: rgba(151,189,198,0.38); color: var(--m-red); } .macia-srp-page-btn.macia-srp-active { background: var(--m-red); border-color: var(--m-red); color: #fff; font-weight: 700; } .macia-srp-page-btn[disabled] { opacity: 0.28; cursor: not-allowed; } .macia-srp-page-ellipsis { font-size: 13px; color: rgba(25,37,53,0.38); padding: 0 4px; display: inline-flex; align-items: center; height: 38px; } /* ── Publications pagination ─────────────────────────────────────── */ .macia-pub-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 64px; flex-wrap: wrap; } .macia-pub-pagination .pub-page-btn { min-width: 64px; height: 64px; padding: 0 20px; border: 1.5px solid rgba(30,45,56,0.1); border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(30,45,56,0.06); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 500; font-family: var(--font-body); color: var(--th-ink); text-decoration: none; transition: border-color 180ms, box-shadow 180ms, color 180ms, background 180ms; cursor: pointer; white-space: nowrap; } .macia-pub-pagination .pub-page-btn:hover:not(.pub-page-disabled):not(.pub-page-active) { border-color: var(--m-hover); color: var(--m-hover); box-shadow: 0 4px 16px rgba(99,6,15,0.10); } .macia-pub-pagination .pub-page-btn.pub-page-active { background: var(--m-hover); border-color: var(--m-hover); color: #fff; font-weight: 700; box-shadow: 0 4px 18px rgba(99,6,15,0.22); } .macia-pub-pagination .pub-page-btn.pub-page-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .macia-pub-pagination .pub-page-ellipsis { font-size: 18px; color: rgba(30,45,56,0.35); display: inline-flex; align-items: center; height: 64px; padding: 0 4px; letter-spacing: 2px; } .macia-pub-pagination .pub-page-nav { min-width: 140px; padding: 0 28px; } @media (max-width: 575.98px) { .macia-pub-pagination { gap: 6px; } .macia-pub-pagination .pub-page-btn { min-width: 48px; height: 52px; font-size: 14px; border-radius: 10px; } .macia-pub-pagination .pub-page-nav { min-width: 100px; padding: 0 16px; font-size: 13px; } } /* ── CTA ────────────────────────────────────────────────────────── */ .macia-srp-cta { position: relative; overflow: hidden; background: var(--th-dark-bg-2); padding: 48px 0; } .macia-srp-cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 140% at 70% 50%, rgba(151,189,198,0.18) 0%, transparent 58%); pointer-events: none; } .macia-srp-cta .container { position: relative; z-index: 1; } .macia-srp-cta-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } .macia-srp-cta-text { flex: 1; min-width: 0; } .macia-srp-cta-title { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); color: #fff; font-weight: 400; line-height: 1.2; margin: 0 0 8px; } .macia-srp-cta-sub { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.50); margin: 0; line-height: 1.6; } .macia-srp-cta-action { flex-shrink: 0; } .macia-srp-cta-btn { white-space: nowrap; } /* ── Responsive ─────────────────────────────────────────────────── */ /* ≤ 1100px : filtres légèrement plus compacts */ @media (max-width: 1100px) { .macia-srp-select { font-size: 12.5px; } } /* ≤ 991px : filtres peuvent wrapper sur 2 lignes, CTA stack */ @media (max-width: 991px) { .macia-srp-filters-row { flex-wrap: wrap; } .macia-srp-select { flex: 1 1 calc(50% - 4px); min-width: 140px; } .macia-srp-reset-btn { margin-left: auto; } .macia-srp-cta-inner { flex-direction: column; align-items: flex-start; gap: 20px; } } /* ≤ 767px : mobile — menu hamburger, header ≈ 110px */ @media (max-width: 767px) { /* Header hamburger : header-top(56px) + barre nav(~76px) ≈ 132px */ .macia-srp-hero { padding: 160px 0 48px; } .macia-srp-hero-title { font-size: clamp(24px, 7vw, 36px); } .macia-srp-bar-outer { padding: 24px 0 20px; } .macia-srp-bar-card { border-radius: 12px; padding: 18px 16px 16px; } .macia-srp-search-row { flex-wrap: wrap; } .macia-srp-input-wrap { flex: 1 1 100%; } .btn.macia-srp-submit-btn { flex: 1 1 100%; height: 46px; min-height: 46px; max-height: 46px; } .macia-srp-filters-row { flex-wrap: wrap; } .macia-srp-select { flex: 1 1 calc(50% - 4px); height: 38px; font-size: 12.5px; } .macia-srp-reset-btn { width: 100%; height: 38px; justify-content: center; margin-left: 0; } .macia-srp-main { padding: 32px 0 64px; } .macia-result-card { padding: 18px 16px 16px; border-radius: 12px; } .macia-result-title { font-size: 18px; } .macia-srp-cta { padding: 40px 0; } .macia-srp-cta-title { font-size: clamp(20px, 6vw, 28px); } } /* ≤ 480px */ @media (max-width: 480px) { .macia-srp-select { flex: 1 1 100%; } } /* ================================================================ City photo strip — le-cabinet.html ================================================================ */ .macia-city-strip { display: flex; height: 280px; overflow: hidden; } .macia-city-photo { flex: 1; background-size: cover; background-position: center; transition: flex 0.45s ease; cursor: pointer; } .macia-city-photo:hover { flex: 1.9; } @media (max-width: 767px) { .macia-city-strip { height: 200px; } .macia-city-photo:hover { flex: 1.5; } } /* ================================================================ 19. Avis Google — badge note globale + cartes style Google ================================================================ */ /* Badge note globale */ .macia-google-rating-wrap { margin-top: 16px; margin-bottom: 32px; } .macia-google-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(177,146,132,0.30); border-radius: 40px; padding: 9px 18px 9px 12px; text-decoration: none !important; color: var(--m-ink) !important; transition: border-color 0.25s ease, box-shadow 0.25s ease; white-space: nowrap; } .macia-google-badge:hover { border-color: rgba(177,146,132,0.60); box-shadow: 0 4px 20px rgba(25,37,53,0.08); } .macia-google-logo { width: 20px; height: 20px; flex-shrink: 0; } .macia-google-score { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--m-ink); line-height: 1; letter-spacing: 0; } .macia-google-count { font-size: 13px; color: rgba(25,37,53,0.55); } /* ─── Carte avis Google ──────────────────────────────────────────── */ /* En-tête : avatar + nom/date + icône Google */ .macia-review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .macia-review-meta { flex: 1; min-width: 0; } .macia-review-meta .name { font-weight: 600 !important; font-size: 15px !important; color: var(--m-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .macia-review-meta .designation { font-size: 13px !important; color: rgba(25,37,53,0.50) !important; } /* Icône Google (coin haut-droit) */ .macia-goog-icon { width: 20px; height: 20px; flex-shrink: 0; margin-left: auto; } /* Bloc étoiles sous l'en-tête */ .macia-review-stars { display: flex; align-items: center; gap: 2px; margin-bottom: 14px; } .macia-review-stars .ti { font-size: 17px; color: #f5a623; } /* Étoiles badge */ .macia-stars .ti, .macia-google-stars .ti { color: #f5a623; font-size: 13px; } /* Texte de l'avis — tronqué à 6 lignes */ .testimonial-card .testimonial-text { display: -webkit-box !important; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; color: rgba(25,37,53,0.80) !important; font-size: 15px !important; line-height: 1.68 !important; margin-bottom: 0 !important; } /* Avatar auteur */ .macia-review-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(177,146,132,0.22); } .macia-review-avatar--fallback { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--m-teal); color: #fff; font-weight: 600; font-size: 17px; flex-shrink: 0; font-family: var(--font-body); } /* ================================================================ 20. Page Le Cabinet — about-section style-three + countdown ================================================================ */ /* ─── About section style-three override ─────────────────────── */ .about-section.style-three.macia-about-three { background-color: var(--m-ink) !important; } /* Portrait card — bg neutre pour PNG transparent */ .about-card.macia-about-card-portrait { background: rgba(255,255,255,0.05) !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; overflow: hidden; } .about-card.macia-about-card-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Small card sombre (stratégie) */ .about-card.small-card.macia-about-card-dark { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.10) !important; color: #fff !important; } .about-card.small-card.macia-about-card-dark p { color: rgba(255,255,255,0.72) !important; font-size: 15px; line-height: 1.7; } /* Small card accent (localisation) — --m-red */ .about-card.small-card.macia-about-card-accent { background: var(--m-red) !important; border: none !important; color: #fff !important; } .about-card.small-card.macia-about-card-accent p { color: rgba(255,255,255,0.82) !important; font-size: 15px; line-height: 1.7; } /* Label + icône dans les small cards */ .macia-about-card-label { font-family: var(--font-display); font-size: 20px; color: #fff; line-height: 1.2; } .macia-about-card-icon { font-size: 30px; color: rgba(255,255,255,0.28); flex-shrink: 0; } /* ─── Countdown section override ─────────────────────────────── */ .countdown-section.macia-countdown { background-color: var(--m-ink) !important; } .macia-countdown-card { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 16px !important; padding: 40px !important; } .macia-countdown-card .countdown-card-item h2 { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 400; color: var(--m-warm) !important; letter-spacing: 0; line-height: 1; } .macia-countdown-card .countdown-card-item p { font-size: 14px; color: rgba(255,255,255,0.60); margin-top: 6px; } /* ─── Values section ─────────────────────────────────────────── */ .macia-values-section { background-color: var(--m-soft); } .macia-value-card { background: #fff; border-radius: 14px; padding: 36px 30px; height: 100%; border: 1px solid rgba(177,146,132,0.18); transition: box-shadow 0.28s ease, border-color 0.28s ease; } .macia-value-card:hover { box-shadow: 0 10px 40px rgba(25,37,53,0.09); border-color: rgba(177,146,132,0.40); } .macia-value-card__icon { width: 56px; height: 56px; border-radius: 14px; background: var(--m-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .macia-value-card__icon .ti { font-size: 26px; color: var(--m-red); } .macia-value-card h4 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--m-ink); margin-bottom: 12px; } .macia-value-card p { color: rgba(25,37,53,0.70); font-size: 15px; line-height: 1.74; margin: 0; } /* Variante accent */ .macia-value-card--accent .macia-value-card__icon { background: rgba(25,37,53,0.08); } .macia-value-card--accent { border-color: rgba(25,37,53,0.14); } /* ─── Process section (about page) ───────────────────────────── */ .macia-process-about { background-color: var(--m-ink) !important; } .macia-process-card { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 14px !important; padding: 36px 28px !important; height: 100%; transition: background 0.28s ease, border-color 0.28s ease !important; } .macia-process-card:hover { background: rgba(255,255,255,0.09) !important; border-color: rgba(177,146,132,0.35) !important; } .macia-process-card .number { font-family: var(--font-display); font-size: 3.5rem; color: var(--m-warm) !important; opacity: 1 !important; line-height: 1; margin-bottom: 20px; } .macia-process-card h4 { color: #fff !important; font-size: 20px; margin-bottom: 12px; } .macia-process-card p { color: rgba(255,255,255,0.65) !important; font-size: 15px; line-height: 1.74; } /* ─── Domain section (about page) ────────────────────────────── */ .macia-premium-panel--dark { background: var(--m-ink) !important; border-color: transparent !important; } .macia-premium-panel--dark .sub-title { color: rgba(255,255,255,0.55) !important; } .macia-domain-list { list-style: none; padding: 0; margin: 20px 0 0; } .macia-domain-list li { border-bottom: 1px solid rgba(177,146,132,0.16); } .macia-domain-list li:last-child { border-bottom: none; } .macia-domain-list a { display: flex; align-items: center; gap: 12px; padding: 13px 0; color: var(--m-ink) !important; text-decoration: none; font-size: 15px; transition: color 0.2s ease, padding-left 0.2s ease; } .macia-domain-list a:hover { color: var(--m-red) !important; padding-left: 6px; } .macia-domain-list .ti { font-size: 18px; color: var(--m-warm); flex-shrink: 0; } .macia-geo-tags { color: rgba(255,255,255,0.62) !important; font-size: 15px; line-height: 1.8; } /* ─── Responsive — supprimé : doublons consolidés dans le bloc harmonisation responsive ci-dessous ─── */ /* ================================================================ 21. Étape 14 — Harmonisation typographique globale ================================================================ */ body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; } h1, .h1, h2, .h2 { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--th-ink); } h1, .h1 { font-size: var(--fs-h1) !important; line-height: 1.12; } h2, .h2 { font-size: var(--fs-h2) !important; line-height: 1.16; } h3, .h3, h4, .h4, h5, .h5, h6, .h6, .service-title, .process-title, .contact-info-card h5, .macia-result-title, .macia-review-meta .name { font-family: var(--font-body) !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--th-ink); } h3, .h3 { font-size: var(--fs-h3) !important; line-height: 1.25; } h4, .h4 { font-size: var(--fs-h4) !important; line-height: 1.3; } h5, .h5, h6, .h6 { font-size: var(--fs-body) !important; line-height: 1.32; } p, li, .form-control, .form-select, .macia-contact-form .form-control, .macia-premium-panel, .service-card p, .service-slide-card p, .macia-value-card p, .macia-process-card p, .testimonial-card .testimonial-text, .macia-result-excerpt { font-family: var(--font-body) !important; font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; letter-spacing: 0 !important; } .hero-section.style-two.macia-hero2 .hero-content h1, .macia-srp-hero-title { font-family: var(--font-display) !important; font-size: var(--fs-hero) !important; font-weight: 400 !important; line-height: var(--lh-display) !important; letter-spacing: 0 !important; } .breadcrumb-content h1, .breadcrumb-content h2 { font-size: var(--fs-h1) !important; line-height: 1.12 !important; letter-spacing: 0 !important; } .macia-cta-band h2 { font-size: var(--fs-h2) !important; line-height: 1.16 !important; } .sub-title, .macia-cta-band .sub-title, .macia-result-type, label, .form-label { font-family: var(--font-body) !important; font-size: var(--fs-label) !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .08em !important; text-transform: uppercase; } .btn, .btn span, .btn-link, .header-area .navbar-nav li > a, .macia-domain-list a, .service-list li a, .macia-result-link, .macia-srp-select, .macia-srp-results-count { font-family: var(--font-body) !important; font-size: var(--fs-small) !important; font-weight: 600 !important; letter-spacing: 0 !important; } .btn, .btn span { line-height: 1.15 !important; } .service-slide-card .title, .service-card .service-title, .macia-case-label, .macia-contact-form .contact-title, .macia-value-card h4, .macia-about-card-label, .macia-premium-panel h3, .process-card .process-text h4, .macia-process-card h4, .macia-search-empty h3 { font-family: var(--font-body) !important; font-size: var(--fs-h4) !important; font-weight: 700 !important; line-height: 1.28 !important; letter-spacing: 0 !important; } .macia-contact-form .contact-title, .macia-google-score, .macia-countdown-card .countdown-card-item h2, .macia-process-card .number { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: 0 !important; } .macia-countdown-card .countdown-card-item h2 { font-size: clamp(38px, 4vw, 56px) !important; } .macia-process-card .number { font-size: clamp(44px, 4vw, 56px) !important; } .contact-info-card h5, .macia-contact-page .contact-info-card h5, .macia-review-meta .name { font-size: var(--fs-small) !important; } .macia-review-meta .designation, .macia-google-count, .macia-form-notice, .copyright { font-size: var(--fs-small) !important; line-height: 1.55 !important; } .footer-wrapper h4, .macia-footer-heading { font-family: var(--font-body) !important; font-size: var(--fs-h4) !important; font-weight: 700 !important; letter-spacing: 0 !important; } .footer-wrapper p, .footer-wrapper a, .macia-footer-list span, .macia-footer-list a { font-family: var(--font-body) !important; font-size: var(--fs-small) !important; line-height: 1.6 !important; } @media (max-width: 575px) { h1, .h1, .breadcrumb-content h1, .breadcrumb-content h2 { font-size: clamp(28px, 8vw, 38px) !important; } h2, .h2, .macia-cta-band h2 { font-size: clamp(24px, 7vw, 32px) !important; } .hero-section.style-two.macia-hero2 .hero-content h1, .macia-srp-hero-title { font-size: clamp(34px, 10vw, 44px) !important; } } /* ================================================================ REPASSE RESPONSIVE GLOBALE ================================================================ */ /* — Container pleine largeur sur mobile — */ /* Override style.css : max-width: 320px sur XS → 350px Limité à < 400px pour ne pas écraser les breakpoints desktop du thème */ @media (max-width: 399px) { .container, .container-sm, .container-xl, .container-xxl { max-width: 350px; } } @media (max-width: 767px) { .container, .container-sm, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; } } @media (max-width: 575px) { .container, .container-sm, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; } /* Réduction du gutter Bootstrap pour donner plus de place aux colonnes */ .row { --bs-gutter-x: 16px; } } /* — Téléphone hero : taille icône sur petits écrans — */ @media (max-width: 575px) { .macia-hero-phone { gap: 10px; } .macia-hero-phone .icon { width: 44px; height: 44px; flex: 0 0 44px; font-size: 18px; } .macia-hero-phone strong { font-size: 16px; } .macia-hero-phone small { font-size: 12px; } } /* — Service section : sticky heading désactivé sous 991px — */ @media (max-width: 991px) { .service-section .section-heading { position: static !important; margin-bottom: 32px; } } /* — Work-process section — */ @media (max-width: 767px) { .work-process-section { padding-top: 56px !important; padding-bottom: 56px !important; } .work-process-section .section-heading { text-align: left !important; } .work-process-section .section-heading::after { margin-left: 0; } } /* ================================================================ HARMONISATION RESPONSIVE — source unique de vérité Règle : padding horizontal uniforme par taille d'écran - 767px : padding interne cartes = 20px horizontal - 575px : padding interne cartes = 16px horizontal ================================================================ */ /* ── 767px ──────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Sections : même padding vertical partout */ section:not(.hero-section):not(.macia-cta-band):not(.macia-sticky-cta) { padding-top: 60px !important; padding-bottom: 60px !important; } .testimonial-section, .macia-values-section, .work-process-section { padding-top: 60px !important; padding-bottom: 60px !important; } /* Cartes/panels : padding horizontal 20px uniforme */ .macia-countdown-card, .macia-value-card, .macia-process-card, .testimonial-card .testimonial-info, .macia-reviews-score-card, .macia-contact-form, .contact-section .macia-premium-panel { padding: 24px 20px !important; } .contact-info-card, .macia-contact-info-card { padding: 20px !important; } .macia-countdown-card .countdown-card-item h2 { font-size: clamp(2rem, 10vw, 2.8rem) !important; } /* CTA Band */ .macia-cta-band { padding: 48px 0 !important; } .macia-cta-band .btn-primary { width: 100%; } } /* ── 575px ──────────────────────────────────────────────────── */ @media (max-width: 575px) { /* Sections : padding vertical réduit */ section:not(.hero-section):not(.macia-cta-band):not(.macia-sticky-cta) { padding-top: 44px !important; padding-bottom: 44px !important; } /* Cartes/panels : padding horizontal 16px uniforme */ .macia-countdown-card, .macia-value-card, .macia-process-card, .testimonial-card .testimonial-info, .macia-reviews-score-card, .macia-contact-form, .contact-section .macia-premium-panel, .service-widget, .macia-premium-panel, .macia-detail-seo { padding: 20px 16px !important; } .contact-info-card, .macia-contact-info-card { padding: 16px !important; } .macia-value-card__icon { width: 44px !important; height: 44px !important; } .macia-process-card .number { font-size: clamp(38px, 11vw, 48px) !important; } /* CTA Band */ .macia-cta-band { padding: 40px 0 !important; } .macia-cta-band h2 { font-size: clamp(20px, 6vw, 28px) !important; } .macia-cta-band .col-12 { text-align: center; } } /* — Footer mobile — */ @media (max-width: 767px) { .footer-wrapper .footer-widget { margin-bottom: 32px; } .footer-bottom-nav { flex-direction: column; gap: 8px; text-align: center; } } /* — Section headings : sous-titre mobile — */ @media (max-width: 767px) { .section-heading .sub-title { font-size: 15px !important; } .section-heading h2 { margin-bottom: 14px !important; } } /* Note : padding sections géré dans le bloc HARMONISATION RESPONSIVE ci-dessus */ /* ================================================================ OFF-CANVAS MENU MOBILE — Premium Macia ================================================================ */ @media (min-width: 992px) { .macia-offcanvas-overlay, .macia-offcanvas { display: none !important; } } /* Overlay */ .macia-offcanvas-overlay { position: fixed; inset: 0; z-index: 10001; background: rgba(15, 24, 36, 0.68); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 300ms ease; } .macia-offcanvas-overlay.is-open { opacity: 1; pointer-events: all; } /* Panel */ .macia-offcanvas { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10002; width: min(90vw, 390px); background: #fff; border-radius: 24px 0 0 24px; box-shadow: -20px 0 80px rgba(25, 37, 53, 0.32); transform: translateX(102%); transition: transform 360ms cubic-bezier(0.32, 0, 0.16, 1); display: flex; flex-direction: column; overflow: hidden; } .macia-offcanvas.is-open { transform: translateX(0); } /* Header */ .macia-offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 18px 24px; background: #fafbfc; border-bottom: 1px solid rgba(25, 37, 53, 0.10); flex-shrink: 0; } .macia-offcanvas-brand { display: flex; align-items: center; } .macia-offcanvas-brand img { height: 50px; width: auto; max-width: 200px; object-fit: contain; } .macia-offcanvas-close { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid rgba(25, 37, 53, 0.16); background: #fff; color: rgba(25, 37, 53, 0.65); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 180ms, border-color 180ms, color 180ms; padding: 0; line-height: 1; } .macia-offcanvas-close i { font-size: 19px; line-height: 1; } .macia-offcanvas-close:hover { background: rgba(99, 6, 15, 0.06); border-color: rgba(99, 6, 15, 0.30); color: var(--m-hover); } /* Corps scrollable */ .macia-offcanvas-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } /* Nav */ .macia-offcanvas-nav { padding: 8px 0 4px; } .macia-offcanvas-nav ul { list-style: none; margin: 0; padding: 0; } .macia-offcanvas-link { display: flex; align-items: center; gap: 15px; width: 100%; padding: 17px 20px 17px 24px; font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--m-ink); text-decoration: none; background: none; border: none; cursor: pointer; transition: background 160ms, color 160ms; border-bottom: 1px solid rgba(25, 37, 53, 0.08); line-height: 1.3; text-align: left; letter-spacing: 0.005em; } .macia-offcanvas-link > i:first-child { font-size: 20px; color: var(--m-warm); width: 24px; flex-shrink: 0; line-height: 1; } .macia-offcanvas-link > span { flex: 1; } .macia-offcanvas-link:hover, .macia-offcanvas-link:focus { background: #f5f8fa; color: var(--m-hover); outline: none; } .macia-offcanvas-link:hover > i:first-child, .macia-offcanvas-link:focus > i:first-child { color: var(--m-hover); } /* État actif */ .macia-offcanvas-nav li.active > .macia-offcanvas-link, .macia-offcanvas-nav li.active > a.macia-offcanvas-link { background: rgba(99, 6, 15, 0.055); color: var(--m-hover); font-weight: 600; border-left: 3px solid var(--m-hover); padding-left: 21px; } .macia-offcanvas-nav li.active > .macia-offcanvas-link > i:first-child { color: var(--m-hover); } /* Chevron */ .macia-offcanvas-chevron { font-size: 15px !important; color: rgba(25, 37, 53, 0.30) !important; width: auto !important; flex-shrink: 0; transition: transform 240ms ease; line-height: 1 !important; } .macia-offcanvas-has-sub .macia-offcanvas-sub-toggle[aria-expanded="true"] .macia-offcanvas-chevron { transform: rotate(90deg); color: var(--m-hover) !important; } /* Sous-menu */ .macia-offcanvas-submenu { list-style: none; margin: 0; padding: 0; background: #f7f9fb; max-height: 0; overflow: hidden; transition: max-height 300ms ease; } .macia-offcanvas-submenu.is-open { max-height: 500px; } .macia-offcanvas-sublink { display: flex; align-items: center; gap: 12px; padding: 13px 20px 13px 52px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: rgba(25, 37, 53, 0.72); text-decoration: none; border-bottom: 1px solid rgba(25, 37, 53, 0.06); transition: color 150ms, background 150ms; } .macia-offcanvas-sublink i { font-size: 16px; color: var(--m-teal); width: 18px; flex-shrink: 0; } .macia-offcanvas-sublink:hover { color: var(--m-hover); background: rgba(99, 6, 15, 0.04); } .macia-offcanvas-sublink:hover i { color: var(--m-hover); } /* CTA Card */ .macia-offcanvas-cta { margin: auto 16px 0; border-radius: 18px; background: linear-gradient(140deg, #5a060d 0%, #7a0d18 50%, #8f1320 100%); padding: 26px 22px 24px; box-shadow: 0 10px 36px rgba(99, 6, 15, 0.30); } .macia-offcanvas-cta-title { font-family: var(--font-display); font-size: 20px; color: #fff; margin: 0 0 4px; line-height: 1.2; } .macia-offcanvas-cta-sub { font-family: var(--font-body); font-size: 13px; color: rgba(255, 255, 255, 0.65); margin: 0 0 20px; } .macia-offcanvas-cta-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; background: rgba(255, 255, 255, 0.14); border: 1.5px solid rgba(255, 255, 255, 0.32); border-radius: 50px; color: #fff; font-family: var(--font-body); font-size: 16px; font-weight: 700; text-decoration: none; transition: background 180ms, border-color 180ms; letter-spacing: 0.01em; } .macia-offcanvas-cta-btn i { font-size: 18px; flex-shrink: 0; } .macia-offcanvas-cta-btn:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.55); color: #fff; } /* Footer */ .macia-offcanvas-footer { margin: 18px 24px 28px; padding-top: 16px; border-top: 1px solid rgba(25, 37, 53, 0.08); } .macia-offcanvas-address { font-family: var(--font-body); font-size: 12px; color: rgba(25, 37, 53, 0.50); margin: 0 0 10px; display: flex; align-items: flex-start; gap: 6px; line-height: 1.55; } .macia-offcanvas-address i { font-size: 13px; margin-top: 2px; flex-shrink: 0; color: var(--m-warm); } .macia-offcanvas-legal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .macia-offcanvas-legal a { font-family: var(--font-body); font-size: 11.5px; color: rgba(25, 37, 53, 0.38); text-decoration: none; transition: color 150ms; } .macia-offcanvas-legal a:hover { color: var(--m-hover); } .macia-offcanvas-legal span { color: rgba(25, 37, 53, 0.22); font-size: 12px; } /* Body lock sans scroll-jump */ body.macia-menu-open { overflow: hidden; } /* ============================================================ Pages droit immobilier modernisees ============================================================ */ .rights-modern-page { --rights-card: #ffffff; --rights-border: rgba(30, 45, 56, 0.10); --rights-muted: rgba(30, 45, 56, 0.68); --rights-shadow: 0 24px 70px rgba(17, 30, 42, 0.08); padding: clamp(70px, 8vw, 118px) 0; color: var(--th-ink); } .rights-modern-page .container { max-width: 1180px; } .rights-modern-intro { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr); gap: clamp(34px, 6vw, 86px); align-items: start; } .rights-modern-copy { padding-top: clamp(6px, 2vw, 28px); } .rights-modern-kicker, .rights-modern-section-head span { display: inline-flex; margin-bottom: 18px; color: var(--m-hover); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .rights-modern-copy h2, .rights-modern-section-head h2, .rights-modern-cta h2 { color: var(--th-ink); font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); line-height: 1.12; margin-bottom: 24px; } .rights-modern-copy p, .rights-modern-section-head p, .rights-modern-card p, .rights-modern-cta p { color: var(--rights-muted); font-size: 16px; line-height: 1.78; } .rights-modern-badges { display: grid; gap: 22px; margin-top: 36px; } .rights-modern-badge { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 18px; align-items: start; } .rights-modern-badge > i { color: var(--m-hover); font-size: 34px; line-height: 1; } .rights-modern-badge strong { display: block; color: var(--th-ink); font-weight: 800; margin-bottom: 4px; } .rights-modern-badge span { display: block; color: var(--rights-muted); font-size: 14px; line-height: 1.55; } .rights-modern-advice { margin-top: 44px; padding: clamp(24px, 4vw, 34px); border-radius: 8px; background: linear-gradient(135deg, var(--th-dark-bg), var(--th-dark-bg-2)); box-shadow: 0 22px 52px rgba(17, 30, 42, 0.16); } .rights-modern-advice h3 { color: #fff; font-size: 20px; margin-bottom: 10px; } .rights-modern-advice p { color: rgba(255,255,255,0.72); margin-bottom: 22px; } .rights-modern-visual { position: relative; } .rights-modern-visual > img { width: 100%; height: min(58vw, 590px); min-height: 430px; object-fit: cover; border-radius: 8px; box-shadow: var(--rights-shadow); } .rights-modern-domains { position: absolute; right: clamp(24px, 4vw, 54px); bottom: -54px; width: min(390px, calc(100% - 48px)); padding: 30px; border: 1px solid var(--rights-border); border-radius: 8px; background: rgba(255,255,255,0.94); box-shadow: 0 24px 60px rgba(17, 30, 42, 0.12); backdrop-filter: blur(10px); } .rights-modern-domains h3 { font-size: 19px; margin-bottom: 18px; } .rights-modern-domains ul { list-style: none; margin: 0; padding: 0; } .rights-modern-domains li + li { border-top: 1px solid rgba(30,45,56,0.10); } .rights-modern-domains a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; color: var(--th-ink); font-size: 14px; font-weight: 800; } .rights-modern-domains a span { display: inline-flex; align-items: center; gap: 10px; } .rights-modern-domains a i { color: var(--m-hover); font-size: 18px; } .rights-modern-domains li.active a, .rights-modern-domains a:hover { color: var(--m-hover); } .rights-modern-method, .rights-modern-situations, .rights-modern-cta { margin-top: clamp(78px, 10vw, 128px); } .rights-modern-section-head { max-width: 650px; } .rights-modern-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 5vw, 70px); margin-top: 54px; } .rights-modern-step { position: relative; display: grid; gap: 20px; } .rights-modern-step:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 76px; right: -44px; border-top: 1px dashed rgba(30,45,56,0.18); } .rights-modern-step > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(99, 6, 15, 0.06); color: var(--m-hover); font-weight: 900; } .rights-modern-step h3, .rights-modern-card h3, .rights-modern-domain-card h3 { color: var(--th-ink); font-size: 18px; margin-bottom: 10px; } .rights-modern-step p { color: var(--rights-muted); font-size: 14px; line-height: 1.7; margin: 0; } .rights-modern-situations { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(28px, 5vw, 72px); align-items: end; } .rights-modern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 34px; } .rights-modern-card { padding: clamp(24px, 3vw, 32px); border: 1px solid var(--rights-border); border-radius: 8px; background: linear-gradient(145deg, #fff, rgba(245,249,251,0.82)); box-shadow: 0 18px 45px rgba(17, 30, 42, 0.05); } .rights-modern-card ul { display: grid; gap: 12px; list-style: none; margin: 22px 0 0; padding: 0; } .rights-modern-card li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--rights-muted); font-size: 14px; line-height: 1.55; } .rights-modern-card li i { color: var(--m-hover); font-size: 16px; margin-top: 3px; } .rights-modern-side-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; box-shadow: var(--rights-shadow); } .rights-modern-cta { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 42px); border: 1px solid var(--rights-border); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(245,249,251,0.92)); box-shadow: 0 24px 60px rgba(17, 30, 42, 0.07); } .rights-modern-cta-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: var(--m-hover); font-size: 32px; } .rights-modern-cta h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 10px; } .rights-modern-cta p { margin: 0; } .rights-modern-domain-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rights-modern-domain-card { color: var(--th-ink); } .rights-modern-domain-card > i { color: var(--m-hover); font-size: 34px; margin-bottom: 20px; } .rights-modern-domain-card span { display: inline-flex; align-items: center; gap: 6px; color: var(--m-hover); font-weight: 900; margin-top: 10px; } .rights-modern-domain-card:hover { transform: translateY(-4px); color: var(--th-ink); } @media (max-width: 1199.98px) { .rights-modern-intro { grid-template-columns: 1fr; } .rights-modern-visual { min-height: auto; padding-bottom: 72px; } } @media (max-width: 991.98px) { .rights-modern-page { padding: 64px 0; } .rights-modern-steps, .rights-modern-situations, .rights-modern-cta { grid-template-columns: 1fr; } .rights-modern-step:not(:last-child)::after { display: none; } .rights-modern-side-image { display: none; } .rights-modern-domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rights-modern-cta { align-items: start; } /* Empêche le débordement horizontal qui force le zoom-out sur mobile */ .rights-modern-domains { position: static; width: 100%; margin-top: 18px; padding: 22px 20px; } .rights-modern-intro { grid-template-columns: 1fr; gap: 28px; } .rights-modern-visual { padding-bottom: 0; } .rights-modern-visual > img { height: auto; min-height: 0; aspect-ratio: 4 / 3; } } @media (max-width: 767.98px) { .rights-modern-copy h2, .rights-modern-section-head h2 { font-size: 32px; } .rights-modern-visual { padding-bottom: 0; } .rights-modern-visual > img { height: auto; min-height: 0; aspect-ratio: 4 / 3; } .rights-modern-domains { position: static; width: 100%; margin-top: 22px; padding: 24px; } .rights-modern-grid, .rights-modern-domain-grid { grid-template-columns: 1fr; } .rights-modern-badge, .rights-modern-cta { gap: 18px; } } /* Correction ciblee : pages enfants droit immobilier uniquement */ .rights-modern-page:not(.rights-modern-overview) { padding: clamp(56px, 6vw, 86px) 0 clamp(64px, 7vw, 96px); background: radial-gradient(circle at 78% 13%, rgba(151,189,198,0.10), transparent 34%), linear-gradient(180deg, #fff 0%, #fff 58%, rgba(245,249,251,0.66) 100%); } .rights-modern-page:not(.rights-modern-overview) .container { max-width: 1260px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-intro { grid-template-columns: minmax(0, 0.94fr) minmax(520px, 1.06fr); gap: clamp(44px, 5.5vw, 74px); align-items: start; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-copy { padding-top: 0; max-width: 560px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-copy h2 { max-width: 560px; margin-bottom: 22px; font-size: clamp(34px, 3.6vw, 48px); } .rights-modern-page:not(.rights-modern-overview) .rights-modern-copy p { margin-bottom: 18px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-badges { gap: 18px; margin-top: 30px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-badge { grid-template-columns: 38px minmax(0, 1fr); gap: 16px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-badge > i { font-size: 32px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-advice { width: 100%; max-width: none; margin-top: 34px; padding: 28px 30px 30px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-visual { position: relative; min-height: 0; padding: 0 0 clamp(120px, 14vw, 220px); margin-top: 8px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-visual > img { height: clamp(500px, 48vw, 610px); min-height: 500px; border-radius: 8px; object-position: center; display: block; width: 100%; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains { position: absolute; left: 50%; top: 62%; right: auto; bottom: auto; transform: translateX(-50%); width: min(560px, calc(100% - 48px)); padding: 28px 32px; background: rgba(255,255,255,0.96); box-shadow: 0 22px 58px rgba(17, 30, 42, 0.14); z-index: 5; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains h3 { margin-bottom: 18px; font-size: 23px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains a { padding: 11px 0; font-size: 15px; line-height: 1.35; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains a i { font-size: 19px; flex: 0 0 auto; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains:has(li:nth-child(8)) { top: 42%; padding: clamp(20px, 2vw, 28px) clamp(22px, 2.4vw, 32px); } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains:has(li:nth-child(8)) h3 { margin-bottom: 12px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains:has(li:nth-child(8)) a { padding: 8px 0; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains a span { gap: 12px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-method { margin-top: clamp(48px, 6vw, 72px); } .rights-modern-page:not(.rights-modern-overview) .rights-modern-section-head { max-width: 680px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-section-head h2 { margin-bottom: 14px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4.4vw, 70px); margin-top: 42px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(99,6,15,0.24) transparent; padding: 2px 2px 20px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-step { min-width: 0; gap: 18px; padding: 10px 8px 12px; border-radius: 8px; scroll-snap-align: start; transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-steps::-webkit-scrollbar { height: 6px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-steps::-webkit-scrollbar-track { background: transparent; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-steps::-webkit-scrollbar-thumb { background: rgba(99,6,15,0.22); border-radius: 999px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-step > span { position: relative; width: 50px; height: 50px; transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-step:hover > span, .rights-modern-page:not(.rights-modern-overview) .rights-modern-step:focus-within > span { background: var(--m-hover); color: #fff; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-situations { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: clamp(62px, 7vw, 90px); align-items: stretch; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-situations-content { max-width: none; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-card { padding: 26px 28px; background: rgba(255,255,255,0.90); } .rights-modern-page:not(.rights-modern-overview) .rights-modern-card p { font-size: 14px; line-height: 1.65; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-card ul { gap: 10px; margin-top: 18px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-side-image img { height: 100%; min-height: 310px; aspect-ratio: auto; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-cta { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 26px; margin-top: clamp(44px, 6vw, 70px); padding: clamp(28px, 4vw, 38px); background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(249,246,244,0.92)); } .rights-modern-page:not(.rights-modern-overview) .rights-modern-cta h2 { margin-bottom: 8px; font-size: clamp(24px, 2.5vw, 32px); } .rights-modern-page:not(.rights-modern-overview) .rights-modern-cta p { max-width: 780px; font-size: 14px; line-height: 1.72; } @media (max-width: 1199.98px) { .rights-modern-page:not(.rights-modern-overview) .rights-modern-intro { grid-template-columns: 1fr; gap: 36px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-copy { max-width: none; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-visual { min-height: 0; padding-bottom: 0; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-visual > img { height: clamp(360px, 58vw, 520px); min-height: 360px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains { position: relative; left: auto; top: auto; bottom: auto; transform: none; width: min(520px, calc(100% - 32px)); margin: -80px 16px 0 auto; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains:has(li:nth-child(8)) { top: auto; padding: 28px 30px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains:has(li:nth-child(8)) h3 { margin-bottom: 18px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains:has(li:nth-child(8)) a { padding: 11px 0; } } @media (max-width: 991.98px) { .rights-modern-page:not(.rights-modern-overview) { padding: 56px 0 70px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-method { margin-top: 58px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-steps { grid-template-columns: repeat(3, minmax(230px, 1fr)); grid-auto-columns: minmax(230px, 1fr); gap: 22px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-situations { grid-template-columns: 1fr; margin-top: 62px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-side-image { display: block; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-side-image img { height: 260px; min-height: 0; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-cta { grid-template-columns: 64px minmax(0, 1fr); } .rights-modern-page:not(.rights-modern-overview) .rights-modern-cta .btn { grid-column: 2; width: fit-content; } } @media (max-width: 767.98px) { .rights-modern-page:not(.rights-modern-overview) { padding: 46px 0 64px; } .rights-modern-page .container { padding-right: 16px !important; padding-left: 16px !important; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-copy h2 { font-size: clamp(28px, 8.2vw, 36px); overflow-wrap: break-word; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-advice { max-width: none; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-visual > img { height: auto; min-height: 0; aspect-ratio: 4 / 3; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-domains { align-self: stretch; width: 100%; margin: 18px 0 0; padding: 22px 24px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-steps, .rights-modern-page:not(.rights-modern-overview) .rights-modern-grid { grid-template-columns: 1fr; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-steps { grid-template-columns: none; grid-auto-columns: minmax(250px, 84vw); padding-bottom: 18px; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-side-image { display: none; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-cta { grid-template-columns: 1fr; } .rights-modern-page:not(.rights-modern-overview) .rights-modern-cta .btn { grid-column: auto; } } @media (max-width: 575px) { .rights-modern-page .container { padding-right: 16px !important; padding-left: 16px !important; max-width: 400px !important; } .rights-modern-page .rights-modern-card, .rights-modern-page .rights-modern-advice, .rights-modern-page .rights-modern-cta { padding: 20px 16px !important; } } /* ================================================================ Admin articles + détail blog dynamique ================================================================ */ .macia-admin-body { min-height: 100vh; background: #f5f7f8; color: var(--m-ink); font-family: var(--font-body); } .macia-admin-login-body { background: linear-gradient(90deg, rgba(25,37,53,0.96) 0%, rgba(25,37,53,0.92) 42%, rgba(245,247,248,0.96) 42%, rgba(245,247,248,1) 100%), url("../img/bg-img/lawgis-breadcrumb-73.webp") center/cover no-repeat; } .macia-admin-shell { width: min(100% - 32px, 1180px); margin: 0 auto; padding: 40px 0; } .macia-admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 42px 0; } .macia-admin-login-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(380px, 480px); width: min(100%, 1040px); min-height: 560px; background: rgba(255,255,255,0.94); border: 1px solid rgba(255,255,255,0.72); border-radius: 8px; box-shadow: 0 30px 90px rgba(15,23,42,0.22); overflow: hidden; } .macia-admin-login-aside { display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; background: linear-gradient(180deg, rgba(25,37,53,0.15), rgba(25,37,53,0.88)), url("../img/bg-img/juge-tribunal-avocats.webp") center/cover no-repeat; color: #fff; } .macia-admin-login-aside h1 { margin: 0 0 14px; color: #fff; font-family: var(--font-heading); font-size: clamp(42px, 5vw, 64px); line-height: 0.95; } .macia-admin-login-aside p:not(.macia-admin-kicker) { max-width: 420px; margin: 0; color: rgba(255,255,255,0.78); } .macia-admin-login-aside .macia-admin-kicker { color: var(--m-teal); } .macia-admin-card, .macia-admin-panel, .macia-admin-table-wrap { background: #fff; border: 1px solid rgba(25,37,53,0.10); border-radius: 8px; box-shadow: 0 18px 50px rgba(25,37,53,0.08); } .macia-admin-card { width: 100%; padding: 44px; border: 0; border-radius: 0; box-shadow: none; } .macia-admin-logo { display: block; width: 260px; max-width: 100%; margin-bottom: auto; filter: brightness(0) invert(1); } .macia-admin-card h1, .macia-admin-page h1, .macia-admin-card h2 { margin-bottom: 8px; font-family: var(--font-heading); color: var(--m-ink); } .macia-admin-card h2 { font-size: clamp(40px, 5vw, 58px); line-height: 1; } .macia-admin-card label, .macia-admin-form label { display: block; width: 100%; margin-top: 16px; margin-bottom: 8px; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink); } .macia-admin-card .form-control, .macia-admin-form .form-control { display: block; width: 100%; height: 54px; min-height: 54px; padding: 13px 16px; color: var(--m-ink); background: #fff; border-color: rgba(25,37,53,0.18); border-width: 1px; border-style: solid; border-radius: 6px; box-shadow: none; } .macia-admin-card .form-control:focus, .macia-admin-form .form-control:focus { border-color: rgba(99,6,15,0.45); background: #fff; box-shadow: 0 0 0 4px rgba(99,6,15,0.08); } .macia-admin-form textarea.form-control { height: auto; min-height: 140px; } .macia-admin-login-form { display: block; margin-top: 26px; } .macia-admin-card .btn { margin-top: 26px; height: 58px; } .macia-admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .macia-admin-kicker { margin-bottom: 4px; color: var(--m-hover); font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; } .macia-admin-panel { padding: 28px; margin-bottom: 22px; } .macia-admin-panel h2 { margin-bottom: 8px; font-size: 22px; color: var(--m-ink); } .macia-admin-current { margin: 8px 0 0; color: rgba(25,37,53,0.68); font-size: 13px; } .macia-admin-table-wrap { padding: 8px; overflow-x: auto; } .macia-admin-table-wrap table { margin-bottom: 0; } .macia-admin-actions { display: flex; justify-content: flex-end; } .macia-blog-detail .service-details-content > img, .macia-blog-block > img { width: 100%; border-radius: 8px; object-fit: cover; } .macia-blog-detail .service-details-content > img { max-height: 460px; } .macia-blog-block { margin-top: 34px; } .macia-blog-block h3 { margin-top: 22px; margin-bottom: 12px; color: var(--m-ink); } .macia-blog-block .btn { margin-top: 8px; } .macia-blog-conclusion { margin: 34px 0; padding: 24px 28px; border-left: 4px solid var(--m-hover); background: #f7f9fa; color: var(--m-ink); font-weight: 650; } .macia-blog-sidebar { border-radius: 8px; padding: 28px; } .macia-blog-recent { display: grid; gap: 16px; padding-left: 0; margin-bottom: 0; list-style: none; } .macia-blog-recent a { display: block; color: var(--m-ink); font-weight: 800; text-decoration: none; } .macia-blog-recent span { display: block; margin-top: 4px; color: rgba(25,37,53,0.58); font-size: 13px; } @media (max-width: 767px) { .macia-admin-login-body { background: #f5f7f8; } .macia-admin-shell { width: min(100% - 20px, 100%); padding: 24px 0; } .macia-admin-login-panel { grid-template-columns: 1fr; min-height: 0; } .macia-admin-login-aside { min-height: 260px; padding: 28px; } .macia-admin-logo { width: 210px; margin-bottom: 42px; } .macia-admin-card, .macia-admin-panel { padding: 22px; } .macia-admin-topbar { align-items: flex-start; flex-direction: column; } .macia-admin-topbar > .d-flex { width: 100%; flex-direction: column; } .macia-admin-topbar .btn, .macia-admin-topbar form, .macia-admin-topbar form button { width: 100%; } } /* ================================================================ UX/UI UPGRADE — Navigation, Animations, Micro-interactions Ajouté : 2026-06-01 ================================================================ */ /* ---------------------------------------------------------------- A. Variables animations & transitions ---------------------------------------------------------------- */ :root { --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out-soft: cubic-bezier(0.45, 0, 0.55, 1); --dur-fast: 200ms; --dur-mid: 350ms; --dur-slow: 550ms; --dur-reveal: 680ms; } /* ---------------------------------------------------------------- B. Scroll reveal — remplace WOW.js (compat, juste plus fluide) Classes: .sr-up .sr-fade .sr-left .sr-right (ajoutées via JS inline) ---------------------------------------------------------------- */ @keyframes macia-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes macia-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes macia-slide-left { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } } @keyframes macia-slide-right { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } @keyframes macia-scale-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } .msr-up { animation: macia-fade-up var(--dur-reveal) var(--ease-out-quart) both; } .msr-fade { animation: macia-fade-in var(--dur-reveal) var(--ease-out-quart) both; } .msr-left { animation: macia-slide-left var(--dur-reveal) var(--ease-out-quart) both; } .msr-right { animation: macia-slide-right var(--dur-reveal) var(--ease-out-quart) both; } .msr-scale { animation: macia-scale-in var(--dur-reveal) var(--ease-out-quart) both; } /* Délais stagger pour les listes d'éléments */ .msr-delay-1 { animation-delay: 100ms; } .msr-delay-2 { animation-delay: 200ms; } .msr-delay-3 { animation-delay: 320ms; } .msr-delay-4 { animation-delay: 460ms; } .msr-delay-5 { animation-delay: 600ms; } /* Respect de prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .msr-up, .msr-fade, .msr-left, .msr-right, .msr-scale, .wow { animation: none !important; transition: none !important; } } @media (max-width: 767px) { .wow { animation-duration: 480ms !important; animation-delay: 0ms !important; } .header-area .btn.btn-primary { animation: none !important; } } /* ---------------------------------------------------------------- C. Navbar desktop — indicateur actif amélioré + transition douce ---------------------------------------------------------------- */ @media (min-width: 992px) { /* Underline slide sur les liens nav */ .header-area .navbar-nav > li > a.magnet-link { position: relative; padding-bottom: 4px; } .header-area .navbar-nav > li > a.magnet-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--m-hover); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-mid) var(--ease-out-quart); border-radius: 2px; } .header-area .navbar-nav > li:hover > a.magnet-link::after, .header-area .navbar-nav > li:focus-within > a.magnet-link::after, .header-area .navbar-nav > li.active > a.magnet-link::after { transform: scaleX(1); } /* Dropdown — animation d'apparition fluide */ .header-area .navbar-nav li .lawgis-dd-menu { transform: translateY(8px) !important; opacity: 0 !important; transition: transform var(--dur-mid) var(--ease-out-quart), opacity var(--dur-mid) var(--ease-out-quart) !important; pointer-events: none; border-radius: 12px !important; box-shadow: 0 24px 64px rgba(25,37,53,0.18) !important; width: min(280px, calc(100vw - 32px)) !important; min-width: 260px !important; max-width: calc(100vw - 32px) !important; } .header-area .navbar-nav li.lawgis-dd:hover .lawgis-dd-menu, .header-area .navbar-nav li.lawgis-dd:focus-within .lawgis-dd-menu { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto; } /* Items dropdown — hover avec décalage */ .header-area .navbar-nav li .lawgis-dd-menu li > a { display: flex !important; align-items: center; min-height: 44px; transition: background var(--dur-fast) ease, color var(--dur-fast) ease, padding-left var(--dur-fast) ease !important; border-radius: 8px; margin: 2px 6px; padding: 10px 14px !important; white-space: normal !important; overflow-wrap: anywhere; line-height: 1.25; text-transform: none; } .header-area .navbar-nav li .lawgis-dd-menu li > a:hover, .header-area .navbar-nav li .lawgis-dd-menu li > a:focus { padding-left: 20px !important; } } /* ---------------------------------------------------------------- D. Bouton CTA header — pulse au repos (attire l'attention) ---------------------------------------------------------------- */ @keyframes macia-btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(99,6,15,0.30); } 70% { box-shadow: 0 0 0 10px rgba(99,6,15,0); } 100% { box-shadow: 0 0 0 0 rgba(99,6,15,0); } } @media (min-width: 992px) { .header-area .btn.btn-primary { animation: macia-btn-pulse 2.8s ease-out 3s infinite; } .header-area .btn.btn-primary:hover { animation: none; } } /* ---------------------------------------------------------------- E. Off-canvas mobile — améliorations UX ---------------------------------------------------------------- */ #maciaOffcanvas { transition: transform var(--dur-slow) var(--ease-out-quart) !important; } #maciaMenuOverlay { transition: opacity var(--dur-mid) ease !important; backdrop-filter: blur(3px); } /* ---------------------------------------------------------------- F. Boutons — états hover/active/focus améliorés ---------------------------------------------------------------- */ .btn.btn-primary, a.btn.btn-primary { transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) ease !important; will-change: transform; } .btn.btn-primary:hover, a.btn.btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 36px rgba(99,6,15,0.22) !important; } .btn.btn-primary:active, a.btn.btn-primary:active { transform: translateY(0px) !important; box-shadow: 0 4px 12px rgba(99,6,15,0.14) !important; } .btn.btn-primary:focus-visible, a.btn.btn-primary:focus-visible { outline: 3px solid rgba(187,84,86,0.50) !important; outline-offset: 4px !important; } @media (hover: none), (max-width: 767px) { .btn.btn-primary, a.btn.btn-primary { will-change: auto; } .btn.btn-primary:hover, a.btn.btn-primary:hover { transform: none !important; box-shadow: none !important; } } /* Boutons secondaires (btn-dark) */ .btn.btn-dark:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 28px rgba(25,37,53,0.22) !important; } /* btn-link — underline slide */ .btn-link { position: relative; transition: color var(--dur-fast) ease !important; } /* ---------------------------------------------------------------- G. Cartes service — hover premium avec reveal accent bar ---------------------------------------------------------------- */ .service-slide-card { transition: transform var(--dur-mid) var(--ease-out-quart), box-shadow var(--dur-mid) var(--ease-out-quart), border-color var(--dur-mid) ease !important; } /* Icône — rotation légère au hover */ .service-slide-card:hover > i { transform: rotate(-6deg) scale(1.08); transition: transform var(--dur-mid) var(--ease-out-quart), background var(--dur-mid) ease !important; } /* ---------------------------------------------------------------- H. Case-study cards — overlay gradient amélioré ---------------------------------------------------------------- */ .macia-case-card::after { background: linear-gradient( 180deg, rgba(25,37,53,0) 30%, rgba(25,37,53,0.55) 70%, rgba(25,37,53,0.82) 100% ) !important; transition: opacity var(--dur-mid) ease !important; } .macia-case-card:hover::after { opacity: 0.90 !important; } .macia-case-card img { transition: transform var(--dur-slow) var(--ease-out-quart) !important; } .macia-case-card:hover img { transform: scale(1.05) !important; } /* ---------------------------------------------------------------- I. Process cards — stagger d'entrée + hover amélioré ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- J. Témoignages — hover avec légère élévation ---------------------------------------------------------------- */ .testimonial-card .testimonial-info { transition: transform var(--dur-mid) var(--ease-out-quart), border-color var(--dur-mid) ease, box-shadow var(--dur-mid) ease !important; } .testimonial-card .testimonial-info:hover { transform: translateY(-4px) !important; border-color: rgba(177,146,132,0.55) !important; box-shadow: 0 16px 48px rgba(25,37,53,0.11) !important; } /* ---------------------------------------------------------------- K. FAQ accordion — transition de hauteur plus fluide ---------------------------------------------------------------- */ .accordion-collapse { transition: height 0.32s var(--ease-out-quart) !important; } .macia-home-faq .faq-accordion .accordion-button { transition: background var(--dur-fast) ease, color var(--dur-fast) ease !important; } /* ---------------------------------------------------------------- L. Contact cards — hover amélioré ---------------------------------------------------------------- */ .macia-contact-info-card, .macia-contact-page .contact-info-card { transition: transform var(--dur-mid) var(--ease-out-quart), box-shadow var(--dur-mid) ease, border-color var(--dur-mid) ease !important; } .macia-contact-info-card:hover, .macia-contact-page .contact-info-card:hover { transform: translateY(-3px) !important; } /* ---------------------------------------------------------------- M. Formulaire — focus states améliorés ---------------------------------------------------------------- */ .macia-contact-form .form-control, .macia-contact-page .form-control, .macia-contact-page .form-select { transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease !important; } .macia-contact-form .form-control:focus, .macia-contact-page .form-control:focus, .macia-contact-page .form-select:focus { transform: none !important; box-shadow: 0 0 0 4px rgba(187,84,86,0.12) !important; } /* Label flottant simulé — placeholder up on focus */ .macia-contact-form .form-control::placeholder { transition: opacity var(--dur-fast) ease !important; } .macia-contact-form .form-control:focus::placeholder { opacity: 0.45 !important; } /* ---------------------------------------------------------------- N. Hero phone link — hover amélioré ---------------------------------------------------------------- */ .macia-hero-phone { transition: opacity var(--dur-fast) ease !important; } .macia-hero-phone:hover { opacity: 0.88 !important; } .macia-hero-phone .icon { transition: transform var(--dur-mid) var(--ease-out-quart), box-shadow var(--dur-mid) ease !important; } .macia-hero-phone:hover .icon { transform: scale(1.08) !important; box-shadow: 0 8px 24px rgba(255,255,255,0.30) !important; } /* ---------------------------------------------------------------- O. Scroll-to-top amélioré ---------------------------------------------------------------- */ .lawgis-scrolltop { transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-mid) var(--ease-out-quart), box-shadow var(--dur-mid) ease !important; } /* ---------------------------------------------------------------- P. Service list (sidebar pages droits) — hover avec slide icon ---------------------------------------------------------------- */ .service-list li a { transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, padding-left var(--dur-mid) var(--ease-out-quart) !important; } .service-list li a:hover, .service-list li.active a { padding-left: 20px !important; } /* ---------------------------------------------------------------- Q. Blog cards — hover image zoom ---------------------------------------------------------------- */ .blog-card { transition: transform var(--dur-mid) var(--ease-out-quart) !important; } .blog-card:hover { transform: translateY(-4px) !important; } .blog-card img { transition: transform var(--dur-slow) var(--ease-out-quart) !important; overflow: hidden; } .blog-card:hover img { transform: scale(1.04) !important; } /* ---------------------------------------------------------------- R. Macia premium panels — élévation au hover ---------------------------------------------------------------- */ .macia-premium-panel { transition: transform var(--dur-mid) var(--ease-out-quart), box-shadow var(--dur-mid) ease, border-color var(--dur-mid) ease !important; } .macia-premium-panel:hover { transform: translateY(-4px) !important; box-shadow: 0 28px 72px rgba(25,37,53,0.11) !important; } /* ---------------------------------------------------------------- S. Cohérence visuelle — espacement uniforme sections ---------------------------------------------------------------- */ .service-section > .divider, .about-section > .divider, .case-study-section > .divider, .work-process-section > .divider, .testimonial-section > .divider, .faq-section > .divider, .blog-section > .divider, .contact-section > .divider { height: clamp(32px, 5vw, 64px) !important; } /* ---------------------------------------------------------------- T. Uniformisation des cartes about (Le Cabinet) ---------------------------------------------------------------- */ .about-section.style-three .about-card { border-radius: 12px !important; overflow: hidden; transition: transform var(--dur-mid) var(--ease-out-quart), box-shadow var(--dur-mid) ease !important; } .about-section.style-three .about-card:hover { transform: translateY(-5px) !important; box-shadow: 0 24px 64px rgba(25,37,53,0.13) !important; } .about-section.style-three .about-card img { transition: transform var(--dur-slow) var(--ease-out-quart) !important; } .about-section.style-three .about-card:hover img { transform: scale(1.04) !important; } /* Cards small et big — fond cohérent */ .about-section.style-three .about-card.small-card { border: 1px solid rgba(151,189,198,0.28) !important; box-shadow: 0 8px 28px rgba(25,37,53,0.07) !important; } .about-section.style-three .about-card.bg-primary { background: var(--m-hover) !important; } .about-section.style-three .about-card.bg-primary .text-dark { color: #fff !important; } .about-section.style-three .about-card.bg-primary p { color: rgba(255,255,255,0.86) !important; } /* ---------------------------------------------------------------- U. Countdown section — chiffres animés + hover ---------------------------------------------------------------- */ .countdown-card-item { border-radius: 12px; padding: 20px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); transition: background var(--dur-mid) ease, border-color var(--dur-mid) ease !important; } .countdown-card-item:hover { background: rgba(255,255,255,0.10) !important; border-color: rgba(151,189,198,0.30) !important; } .countdown-card-item h2 { color: var(--m-teal) !important; font-family: var(--font-display); } /* ---------------------------------------------------------------- V. About section home — thumbnail images hover ---------------------------------------------------------------- */ .about-section .about-thumbnail img { transition: transform var(--dur-slow) var(--ease-out-quart) !important; } .about-section .about-thumbnail img:hover { transform: scale(1.03) !important; } /* ---------------------------------------------------------------- W. Responsive — corrections tablette (768–991px) ---------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { /* Hero : text et image empilés correctement */ .hero-section.style-two.macia-hero2 .hero-content h1 { font-size: clamp(2rem, 4.5vw, 2.8rem) !important; } /* Section services : slider visible correctement */ .service-section .row.g-5 { --bs-gutter-x: 2rem; } /* About : thumbnail responsive */ .macia-about-img { height: 260px !important; } .macia-about-img-tall { height: 320px !important; } /* Case grid */ .macia-case-grid > .col-12 .macia-case-card, .macia-case-grid > .col-12 .macia-case-card img { height: 280px; min-height: 280px; } /* Process cards */ .work-process-section .row.g-5 { --bs-gutter-x: 2rem; } /* Contact form */ .macia-contact-form { padding: 28px 24px; } } /* ---------------------------------------------------------------- X. Responsive — mobile (< 576px) correctifs complémentaires ---------------------------------------------------------------- */ @media (max-width: 575px) { /* Bouton hero pleine largeur sur très petit écran */ .hero-section.style-two.macia-hero2 .d-flex.flex-wrap.align-items-center.gap-4 { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; } .hero-section.style-two.macia-hero2 .d-flex .btn-primary { width: 100% !important; text-align: center !important; } /* Phone link hero centré */ .macia-hero-phone { justify-content: center !important; } /* Section heading sub-title wrap correctement */ .section-heading .sub-title { flex-wrap: wrap !important; } /* Process cards pleine largeur */ .process-card { padding: 16px !important; } /* About card : pas de débordement */ .about-section.style-two .about-thumbnail { max-width: 100% !important; } /* Contact sticky désactivé sur mobile */ .macia-contact-sticky { position: static !important; } /* Countdown chiffres — taille réduite */ .countdown-section .section-heading h2 { font-size: clamp(1.6rem, 7vw, 2rem) !important; } } /* ---------------------------------------------------------------- Y. Dropdown Expertises — état actif amélioré sur sous-page ---------------------------------------------------------------- */ .header-area .navbar-nav li.lawgis-dd.active > a.magnet-link { color: var(--m-hover) !important; } @media (min-width: 992px) { .header-area .navbar-nav li.lawgis-dd.active > a.magnet-link::after { transform: scaleX(1) !important; } } /* ---------------------------------------------------------------- Z. Footer links — transition cohérente ---------------------------------------------------------------- */ .macia-footer-list a, .macia-footer-links a, footer a { transition: color var(--dur-fast) ease !important; } /* ---------------------------------------------------------------- ZA. Sub-title icon — transition douce sur hover parent ---------------------------------------------------------------- */ .section-heading:hover .sub-title i { transform: rotate(-8deg) scale(1.15); transition: transform var(--dur-mid) var(--ease-out-quart); } /* ---------------------------------------------------------------- ZB. Page Le Cabinet — corrections layout about-section style-two ---------------------------------------------------------------- */ .about-section.style-two .about-thumbnail { position: relative; } .about-section.style-two .about-thumbnail img { border-radius: 12px !important; width: 100% !important; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-quart) !important; box-shadow: 0 24px 64px rgba(25,37,53,0.12) !important; } .about-section.style-two .about-thumbnail img:hover { transform: scale(1.03) !important; } /* Shape decorators — cohérence avec la DA */ .about-section.style-two .about-thumbnail .shape1, .about-section.style-two .about-thumbnail .shape2 { z-index: 2; pointer-events: none; } /* List items page cabinet — icône check colorée */ .about-section.style-two .section-heading ul li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; background: rgba(151,189,198,0.06); border: 1px solid rgba(151,189,198,0.16); transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease !important; } .about-section.style-two .section-heading ul li:hover { background: rgba(151,189,198,0.12) !important; border-color: rgba(151,189,198,0.32) !important; } .about-section.style-two .section-heading ul li .icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--m-hover); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .about-section.style-two .section-heading ul li .icon svg path { fill: #fff !important; } /* ---------------------------------------------------------------- ZC. Work process — section bg-dark : intro text couleur ---------------------------------------------------------------- */ .work-process-section.bg-dark .section-heading p { color: rgba(255,255,255,0.75) !important; } /* ---------------------------------------------------------------- ZD. Swiper navigation — boutons harmonisés ---------------------------------------------------------------- */ .swiper-navigation-container { gap: 12px !important; } .service-button-prev, .service-button-next, .testimonial-button-prev, .testimonial-button-next { transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-quart) !important; } .service-button-prev:hover, .service-button-next:hover { transform: scale(1.08) !important; } /* ---------------------------------------------------------------- ZE. Avis clients — section dédiée ---------------------------------------------------------------- */ .macia-reviews-section .testimonial-card .testimonial-info { border-left: 3px solid var(--m-warm) !important; } /* ---------------------------------------------------------------- ZF. Skip-nav (accessibilité) — visible au focus keyboard ---------------------------------------------------------------- */ .macia-skip-nav { position: fixed; top: -100px; left: 16px; z-index: 99999; background: var(--m-hover); color: #fff; padding: 10px 20px; border-radius: 6px; font-weight: 700; text-decoration: none; transition: top 0.15s ease; } .macia-skip-nav:focus { top: 16px !important; color: #fff !important; } /* ---------------------------------------------------------------- ZG. Dropdown keyboard-open state (géré par macia.js) ---------------------------------------------------------------- */ @media (min-width: 992px) { .header-area .navbar-nav li.lawgis-dd.kbd-open .lawgis-dd-menu { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; } } /* Externalized page background and utility styles */ .macia-bg-tribunal-avocats { background-image: url("../img/bg-img/juge-tribunal-avocats.webp") !important; } .macia-bg-toulon-illustrative { background-image: url("../img/bg-img/image-illustrative-toulon.webp") !important; } .macia-bg-lawgis-breadcrumb { background-image: url("../img/bg-img/lawgis-breadcrumb-73.webp") !important; } .macia-bg-panoramique-toulon { background-image: url("../img/bg-img/panoramique-toulon.webp") !important; } .macia-bg-tribunal-classique { background-image: url("../img/bg-img/tribunal-classique.webp") !important; } .macia-form-honeypot { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; pointer-events: none; }