/*
Theme Name: flexassurance2
Author: You
Version: 1.0
*/
:root {
/* RoyalAssur-inspired palette: insurance green + deep navy + orange spark on white.
Variable names are preserved so existing rules repaint automatically. */
--color-bg: #f8f9fa;
--color-surface: #ffffff;
--color-primary: #1d4061; /* deep navy — structural ink */
--color-primary-dark: #143052; /* darker navy */
--color-primary-soft: #3d6a99; /* softer navy for secondary text/icons */
--color-secondary: #4a90e2; /* sky blue — secondary interactive */
--color-accent: #3f8c45; /* insurance green — primary brand action */
--color-accent-muted: #e5f1e1; /* pale green wash */
--color-spark: #ff6900; /* vibrant orange spark — warm "act now" */
--color-spark-dark: #e65d00;
--color-spark-soft: rgba(255, 105, 0, 0.18);
--color-spark-medium: rgba(255, 105, 0, 0.22);
--color-spark-strong: rgba(255, 105, 0, 0.45);
--color-cta-warm: #ff6900; /* warm CTA = orange call-to-action */
--color-cta-warm-hover: #e65d00;
--color-text: #1d4061; /* body text — exact brand navy */
--color-text-muted: #5c6b80; /* muted text */
--color-border: #e2e8ed; /* subtle gray-blue border */
--color-focus: rgba(63, 140, 69, 0.35);
--color-shadow: rgba(29, 64, 97, 0.10);
--color-grid-subtle: rgba(29, 64, 97, 0.05);
--radius-lg: 22px;
--radius-md: 14px;
--radius-sm: 10px;
--radius-xl: 28px;
/* Legacy aliases — remapped to the new palette so existing styles inherit */
--green-primary: var(--color-accent);
--green-dark: #316b35; /* darker green (hover) */
--green-deeper: #26542a;
--green-light: #e5f1e1;
--green-soft: #c8e1c5;
--dark: var(--color-primary);
--dark-2: var(--color-primary-dark);
--dark-card: #14365a;
--blue-primary: var(--color-primary);
--blue-dark: var(--color-primary-dark);
--blue-deeper: #0e2843;
--blue-light: #e8f1fa;
--blue-soft: #b8d5ee;
--blue-pale: #f0f6fc;
--teal-accent: var(--color-accent);
--teal-light: #e5f1e1;
--navy: var(--color-primary);
--navy-2: var(--color-primary-dark);
--text-main: var(--color-text);
--text-muted: var(--color-text-muted);
--white: var(--color-surface);
--off-white: var(--color-bg);
--border: var(--color-border);
--border-dark: rgba(29, 64, 97, 0.14);
--shadow-green: rgba(63, 140, 69, 0.22);
--shadow-blue: rgba(29, 64, 97, 0.14);
/* Shared chrome & hero (prefer these over stray hex site-wide) */
--navbar-bg: #ffffff;
--navbar-border-subtle: rgba(29, 64, 97, 0.08);
--navbar-link: var(--color-primary);
--navbar-link-hover: var(--color-accent);
--brand-logo-green: #2fb9a2;
--brand-logo-blue: #313da3;
/* Light "trust" hero — soft pale-green wash with photo + dark navy text */
--hero-surface: #f1f7ef;
--hero-overlay-tint: rgba(241, 247, 239, 0.45);
--hero-surface-pattern: url("data:image/svg+xml;utf8,");
--tint-accent-12: rgba(63, 140, 69, 0.12);
--tint-accent-30: rgba(63, 140, 69, 0.3);
--accent-cta-shadow: rgba(63, 140, 69, 0.35);
--btn-accent-hover-fill: var(--green-dark);
/* Footer — bleu structuré aligné primary / soft / secondary */
--footer-bg-top: #2c5478;
--footer-bg-mid: var(--color-primary);
--footer-bg-deep: #152a3f;
--footer-bg: #1D2746;
--footer-border-top: rgba(74, 144, 226, 0.35);
--footer-divider: rgba(61, 106, 153, 0.35);
--footer-pill-bg: rgba(61, 106, 153, 0.18);
--footer-pill-border: rgba(141, 178, 212, 0.28);
}
img.flexassur-photo {
max-width: 100%;
height: auto;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', sans-serif;
color: var(--text-main);
background: var(--white);
overflow-x: hidden;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6, .display-font { font-family: 'Sora', sans-serif; }
/* ─── ANNOUNCEMENT BAR ─── */
.announce-bar {
background: var(--green-primary);
color: var(--dark);
font-size: 0.78rem;
font-weight: 600;
text-align: center;
padding: 9px 16px;
letter-spacing: 0.2px;
}
.announce-bar a { color: var(--dark); text-decoration: underline; }
/* ─── NAVBAR ─── */
.navbar-custom {
--nav-height: 4.5rem;
background: var(--navbar-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 0;
min-height: var(--nav-height);
border-bottom: 1px solid var(--navbar-border-subtle);
position: sticky;
top: 0;
z-index: 1000;
transition: min-height 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.navbar-custom.is-scrolled {
--nav-height: 4.5rem;
box-shadow: 0 10px 28px rgba(29, 64, 97, 0.1);
border-bottom-color: rgba(29, 64, 97, 0.06);
}
.navbar-custom__inner {
min-height: var(--nav-height);
align-items: center;
position: relative;
}
.navbar-brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: 'Sora', sans-serif;
font-weight: 800;
font-size: clamp(1.15rem, 1.5vw, 1.3rem);
color: var(--brand-logo-blue) !important;
letter-spacing: 0;
line-height: 1;
margin-right: 0.75rem;
min-width: max-content;
text-decoration: none;
}
.navbar-brand:hover,
.navbar-brand:focus {
color: var(--brand-logo-blue) !important;
text-decoration: none;
}
.navbar-brand__logo {
display: block;
width: clamp(2.6rem, 4vw, 3.35rem);
aspect-ratio: 1024 / 960;
height: auto;
object-fit: contain;
}
.navbar-brand__wordmark {
display: inline-flex;
align-items: baseline;
white-space: nowrap;
}
.navbar-brand__wordmark-flex {
color: var(--brand-logo-green);
}
.navbar-brand__wordmark-assurance {
color: var(--brand-logo-blue);
}
@media (max-width: 375px) {
.navbar-brand {
gap: 0.42rem;
font-size: 1rem;
}
.navbar-brand__logo {
width: 2.35rem;
}
}
#navMenu.navbar-collapse {
flex-grow: 1;
}
.nav-menu-shell {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 992px) {
.nav-menu-shell {
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.navbar-nav {
align-items: center;
gap: 0.15rem;
}
@media (min-width: 992px) {
.navbar-nav.nav-primary-list {
gap: clamp(1.15rem, 2.2vw, 2rem);
}
.navbar-nav .nav-item.dropdown {
position: relative;
}
.navbar-nav .nav-item.dropdown .nav-dropdown-menu {
display: block !important;
position: absolute;
top: calc(100% + 0.65rem);
left: 50%;
right: auto;
margin: 0 !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 12px);
transition:
opacity 0.28s ease,
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0.28s ease;
}
.navbar-nav .nav-item.dropdown::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 0.85rem;
}
.navbar-nav .nav-item.dropdown:hover .nav-dropdown-menu,
.navbar-nav .nav-item.dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
.navbar-nav .nav-item.dropdown:hover > .nav-link-custom,
.navbar-nav .nav-item.dropdown:focus-within > .nav-link-custom {
color: var(--green-primary) !important;
background: transparent !important;
}
.navbar-nav .nav-item.dropdown:hover > .nav-link-custom .nav-link-custom__caret,
.navbar-nav .nav-item.dropdown:focus-within > .nav-link-custom .nav-link-custom__caret {
color: var(--green-primary);
opacity: 1;
}
}
.nav-link-custom {
position: relative;
display: inline-flex;
align-items: center;
font-family: 'Sora', sans-serif;
font-weight: 600;
padding: 0.65rem 0.35rem !important;
border-radius: 0;
background: transparent !important;
transition: color 0.24s ease;
color: var(--navbar-link);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.nav-link-custom__inner {
display: inline-flex;
align-items: center;
}
.nav-link-custom.dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.nav-link-custom.dropdown-toggle::after {
display: none;
}
.nav-link-custom__caret {
font-size: 0.62rem;
line-height: 1;
color: rgba(29, 64, 97, 0.45);
transition: transform 0.24s ease, color 0.24s ease, opacity 0.24s ease;
}
.nav-link-custom.dropdown-toggle.show .nav-link-custom__caret,
.nav-link-custom.dropdown-toggle[aria-expanded="true"] .nav-link-custom__caret {
transform: rotate(180deg);
}
@media (min-width: 992px) {
.nav-link-custom:hover {
color: var(--green-primary) !important;
background: transparent !important;
}
.nav-link-custom:hover .nav-link-custom__caret {
color: var(--green-primary);
}
}
.nav-link-custom.active,
.nav-link-custom[aria-current="page"] {
color: var(--green-primary) !important;
background: transparent !important;
}
.nav-dropdown-menu {
--bs-dropdown-border-radius: 0;
--bs-dropdown-border-width: 0;
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0;
--bs-dropdown-spacer: 0;
min-width: 13.5rem;
padding: 1.15rem 1.35rem;
border: none;
border-radius: 0;
background: #ffffff;
box-shadow: 0 14px 40px rgba(29, 64, 97, 0.14);
}
.nav-dropdown-item {
display: block;
padding: 0.48rem 0;
border-radius: 0;
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--color-primary);
background: transparent;
transition: color 0.2s ease, padding-left 0.2s ease;
}
.nav-dropdown-item + .nav-dropdown-item {
margin-top: 0.1rem;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
color: var(--green-primary);
background: transparent;
padding-left: 0.2rem;
}
.nav-menu-cta {
gap: 0.85rem;
margin-left: 0.75rem;
flex-shrink: 0;
}
.btn-nav-cta {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--green-primary);
color: #fff !important;
font-family: 'Sora', sans-serif;
font-weight: 700;
font-size: 0.84rem;
border-radius: 999px;
padding: 0.58rem 1.25rem !important;
text-decoration: none;
border: 1px solid var(--green-primary);
transition: background 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
box-shadow: 0 6px 18px rgba(63, 140, 69, 0.24);
white-space: nowrap;
}
.btn-nav-cta:hover {
background: var(--green-dark);
border-color: var(--green-dark);
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(63, 140, 69, 0.32);
}
.btn-nav-cta--block {
width: 100%;
min-height: 2.85rem;
}
.navbar-phone,
.nav-menu-phone {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.84rem;
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.navbar-phone:hover,
.nav-menu-phone:hover {
color: var(--green-primary);
}
.navbar-phone i,
.nav-menu-phone i {
color: var(--green-primary);
font-size: 0.95rem;
}
.nav-menu-phone {
justify-content: center;
width: 100%;
min-height: 2.75rem;
padding: 0.65rem 1rem;
border-radius: 999px;
background: rgba(63, 140, 69, 0.08);
border: 1px solid rgba(63, 140, 69, 0.16);
color: var(--color-primary);
}
.nav-toggler {
padding: 0.35rem;
margin-left: auto;
}
.nav-toggler__box {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 1.65rem;
height: 1.35rem;
}
.nav-toggler__line {
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background: var(--color-primary);
transition: transform 0.28s ease, opacity 0.2s ease, width 0.28s ease;
transform-origin: center;
}
.nav-toggler[aria-expanded="true"] .nav-toggler__line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggler[aria-expanded="true"] .nav-toggler__line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-toggler[aria-expanded="true"] .nav-toggler__line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 991.98px) {
.navbar-collapse {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: calc(100dvh - var(--nav-height));
overflow-y: auto;
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid var(--navbar-border-subtle);
box-shadow: 0 18px 36px rgba(29, 64, 97, 0.1);
}
.navbar-collapse.collapsing {
transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-menu-shell {
padding: 0.85rem 0 1.15rem;
}
.navbar-nav {
gap: 0.15rem;
width: 100%;
}
.nav-link-custom {
width: 100%;
min-height: 2.85rem;
padding: 0.7rem 0.85rem !important;
font-size: 0.88rem;
letter-spacing: 0.08em;
border-radius: 10px;
}
.nav-link-custom:hover {
color: var(--green-primary) !important;
background: rgba(63, 140, 69, 0.06) !important;
}
.nav-link-custom.active,
.nav-link-custom[aria-current="page"] {
background: rgba(63, 140, 69, 0.08) !important;
}
.nav-link-custom.dropdown-toggle {
width: 100%;
justify-content: space-between;
}
.nav-link-custom.dropdown-toggle .nav-link-custom__caret {
margin-left: auto;
}
.navbar-nav .dropdown-menu {
position: static !important;
float: none;
display: none !important;
transform: none !important;
width: 100%;
margin: 0.15rem 0 0.35rem !important;
padding: 0.75rem 0.95rem;
border: none;
box-shadow: none;
background: rgba(63, 140, 69, 0.06);
animation: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.navbar-nav .dropdown-menu.show {
display: block !important;
animation: navDropdownMobileIn 0.28s ease;
}
@keyframes navDropdownMobileIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nav-dropdown-item {
min-height: 2.45rem;
padding: 0.55rem 0;
font-size: 0.9rem;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
padding-left: 0;
}
.nav-menu-actions {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-top: 0.85rem;
padding-top: 0.95rem;
border-top: 1px solid rgba(29, 64, 97, 0.08);
}
}
@media (prefers-reduced-motion: reduce) {
.navbar-custom,
.nav-toggler__line,
.nav-dropdown-menu,
.btn-nav-cta,
.nav-link-custom {
transition: none;
animation: none;
}
.navbar-collapse.collapsing {
transition: none;
}
}
.about-hex {
width: 360px;
height: 360px;
clip-path: polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
object-fit: cover;
border-radius: 4px;
}
/* ─── HERO ─── Light "trust" stage with full-bleed business photo */
.hero {
min-height: 94vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 80px 0 60px;
background: var(--hero-surface);
color: var(--color-text);
isolation: isolate;
}
/* Background photo — full-bleed, blends gently with pale-green wash */
.hero-photo {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.hero-photo .hero-photo-img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center 35%;
display: block;
opacity: 0.32;
mix-blend-mode: multiply;
filter: saturate(0.95) contrast(1.02);
animation: hero-photo-zoom 24s ease-in-out infinite alternate;
}
@keyframes hero-photo-zoom {
0% { transform: scale(1) translateY(0); }
100% { transform: scale(1.05) translateY(-1%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-photo .hero-photo-img { animation: none; }
}
/* Light tint overlay above the photo — softens busy areas, keeps text crisp */
.hero::before {
content: "";
position: absolute;
inset: 0;
background: var(--hero-overlay-tint);
z-index: 1;
pointer-events: none;
}
/* Green decorative blob (top-right) — drifts gently */
.hero-photo::after {
content: "";
position: absolute;
right: -120px;
top: -100px;
width: 460px;
height: 460px;
background: var(--color-accent);
opacity: 0.16;
border-radius: 50%;
filter: blur(2px);
pointer-events: none;
z-index: 2;
animation: float-blob 18s ease-in-out infinite;
}
/* Subtle SVG dot pattern — adds tactile texture without gradients */
.hero-mesh {
position: absolute; inset: 0;
background-color: transparent;
background-image: var(--hero-surface-pattern);
background-repeat: repeat;
background-size: 28px 28px;
pointer-events: none;
z-index: 2;
}
.hero-grid {
position: absolute; inset: 0;
background-image: none;
background-color: transparent;
pointer-events: none;
z-index: 2;
}
/* Green "spark" ring (bottom-left) — gentle counter-drift */
.hero::after {
content: "";
position: absolute;
left: -90px;
bottom: -90px;
width: 280px;
height: 280px;
border-radius: 50%;
border: 18px solid var(--color-accent);
opacity: 0.18;
pointer-events: none;
z-index: 2;
animation: float-ring 22s ease-in-out infinite reverse;
}
.hero .container {
position: relative;
z-index: 3;
}
@media (max-width: 768px) {
.hero::after {
display: none;
}
}
.hero-badge {
display: inline-flex; align-items: center; gap: 7px;
background: #ffffff;
border: 1px solid var(--tint-accent-30);
color: var(--color-accent);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 50px;
margin-bottom: 24px;
box-shadow: 0 4px 14px var(--accent-cta-shadow);
}
.hero-badge .dot {
width: 7px; height: 7px;
background: var(--color-accent);
border-radius: 50%;
animation: pulse-dot 2s infinite;
box-shadow: 0 0 0 4px var(--tint-accent-12);
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.hero h1 {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1.109;
letter-spacing: -0.5px;
margin-bottom: 20px;
}
/* "30% sur votre" — the conversion claim, painted in the brand green */
.hero h1 .accent {
color: var(--color-accent);
position: relative;
display: inline-block;
}
.hero h1 .accent::after {
content: '';
position: absolute;
bottom: -3px; left: 0; right: 0;
height: 4px;
background: var(--color-accent);
opacity: 0.55;
border-radius: 3px;
}
.hero p.lead {
color: #0d1117;
font-size: 1.05rem;
line-height: 1.75;
max-width: 460px;
margin-bottom: 36px;
}
.hero p.lead strong { color: var(--color-primary); font-weight: 600; }
.hero-cta-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.btn-hero-primary {
background: var(--green-primary);
color: var(--white);
font-family: 'Sora', sans-serif;
font-weight: 700;
font-size: 0.92rem;
padding: 15px 30px;
border-radius: 50px;
border: none;
text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
box-shadow: 0 8px 28px var(--accent-cta-shadow);
}
.btn-hero-primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px var(--shadow-green);
background: var(--green-dark);
color: var(--white);
}
/* Hero "Parler à un conseiller" — modern pill button on the Kyiv palette */
.btn-hero-ghost {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 8px 6px 6px;
background: var(--green-dark);
border: 1.5px solid var(--green-dark);
border-radius: 999px;
color: #fff;
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
transition: background 0.22s ease, border-color 0.22s ease,
transform 0.18s ease, box-shadow 0.22s ease;
}
.btn-hero-ghost:hover {
color: #fff;
background: var(--green-deeper);
border-color: var(--green-deeper);
transform: translateY(-1px);
box-shadow: 0 10px 26px var(--accent-cta-shadow);
}
.btn-hero-ghost:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--tint-accent-30);
}
.btn-hero-ghost .play-icon {
width: 36px; height: 36px;
background: #ffffff;
color: var(--color-accent);
border: none;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.92rem;
flex-shrink: 0;
transition: transform 0.22s ease, background 0.2s ease;
}
.btn-hero-ghost:hover .play-icon {
background: #fff;
transform: rotate(-8deg) scale(1.04);
}
.btn-hero-ghost-label {
white-space: nowrap;
}
.btn-hero-ghost-moto {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
font-size: 0.95rem;
margin-left: 2px;
transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.btn-hero-ghost:hover .btn-hero-ghost-moto {
background: #ffffff;
color: var(--color-accent);
transform: translateX(2px);
}
/* Hero Stats */
.hero-stats-row {
display: flex; gap: 0;
border-top: 1px solid var(--border);
padding-top: 32px;
}
.hero-stat {
flex: 1;
padding-right: 28px;
border-right: 1px solid var(--border);
margin-right: 28px;
}
.hero-stat:last-child { border-right: none; margin-right: 0; }
.hero-stat-num {
font-family: 'Sora', sans-serif;
font-size: 1.9rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
letter-spacing: -1px;
}
.hero-stat-label { font-size: 0.77rem; color: var(--text-muted); margin-top: 5px; font-weight: 500; }
/* ─── QUOTE CARD – REDESIGNED AS STEPPER ─── */
.quote-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: 44px 40px 36px;
box-shadow:
0 30px 80px rgba(29, 64, 97, 0.18),
0 8px 24px rgba(63, 140, 69, 0.10),
0 0 0 1px rgba(63, 140, 69, 0.22);
position: relative;
z-index: 2;
overflow: hidden;
}
.quote-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--color-accent) 0%, #5aae60 50%, var(--color-accent) 100%);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.quote-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.quote-header-icons {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--color-accent-muted);
border: 1px solid rgba(63, 140, 69, 0.22);
gap: 8px;
flex-shrink: 0;
}
.quote-header-icons-sep {
width: 1px;
height: 18px;
background: rgba(12, 61, 92, 0.16);
align-self: center;
}
.quote-header-star-icon {
font-size: 1.1rem;
color: var(--color-accent);
line-height: 1;
display: block;
}
.quote-header-moto-icon {
font-size: 1.35rem;
color: var(--color-accent);
line-height: 1;
display: block;
}
.quote-header h5 {
font-size: 1.35rem;
font-weight: 800;
color: var(--text-main);
margin: 0;
letter-spacing: -0.015em;
}
.quote-subtitle { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 24px; }
.devis-microcopy {
font-size: 0.78rem;
color: #1e5f3b;
margin: 4px 0 18px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: var(--color-accent-muted);
border: 1px solid rgba(63, 140, 69, 0.22);
border-radius: 999px;
font-weight: 600;
}
.devis-microcopy i { color: var(--color-accent); }
.devis-alert {
border-radius: 10px;
padding: 10px 12px;
font-size: 0.82rem;
margin-bottom: 14px;
background: var(--off-white);
color: var(--text-main);
outline: none;
}
.devis-alert.devis-alert--error {
background: #fff5f5;
border: 1px solid #f5caca;
color: #6b1c1c;
}
.devis-alert.devis-alert--success {
background: #ecf8f1;
border: 1px solid #b8e4cb;
color: #1e5f3b;
}
.devis-alert.devis-alert--rich {
padding: 14px 16px;
line-height: 1.45;
}
.devis-alert__title {
display: block;
font-size: 0.9rem;
font-weight: 700;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.devis-alert__body {
margin: 0 0 6px;
font-size: 0.82rem;
}
.devis-alert__hint {
margin: 0;
font-size: 0.76rem;
opacity: 0.92;
font-weight: 600;
}
.devis-thankyou--inline {
border-radius: 12px;
padding: 16px 16px 14px;
margin-bottom: 16px;
background: #ecf8f1;
border: 1px solid #b8e4cb;
color: var(--text-main);
}
.devis-thankyou__icon {
color: #1e7f4a;
font-size: 1.75rem;
line-height: 1;
margin-bottom: 8px;
}
.devis-thankyou__title {
font-family: 'Sora', sans-serif;
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 8px;
color: #145a32;
}
.devis-thankyou__lede {
font-size: 0.82rem;
line-height: 1.5;
margin: 0 0 12px;
color: var(--text-main);
}
.devis-thankyou__steps {
list-style: none;
padding: 0;
margin: 0 0 14px;
font-size: 0.78rem;
line-height: 1.45;
}
.devis-thankyou__steps li {
display: flex;
gap: 8px;
align-items: flex-start;
margin-bottom: 6px;
}
.devis-thankyou__step-num {
flex: 0 0 22px;
height: 22px;
border-radius: 50%;
background: var(--color-primary, #1a3a5c);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.devis-thankyou__cta-row {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 10px;
}
@media (min-width: 480px) {
.devis-thankyou__cta-row {
flex-direction: row;
flex-wrap: wrap;
}
}
.devis-thankyou__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
text-align: center;
border: 1px solid transparent;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.devis-thankyou__btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(26, 58, 92, 0.12);
}
.devis-thankyou__btn--primary {
background: var(--color-primary, #1a3a5c);
color: #fff;
border-color: rgba(0, 0, 0, 0.06);
}
.devis-thankyou__btn--ghost {
background: #fff;
color: var(--color-primary, #1a3a5c);
border-color: rgba(26, 58, 92, 0.2);
}
.devis-thankyou__fine {
margin: 0;
font-size: 0.72rem;
color: var(--text-muted);
line-height: 1.4;
}
.devis-merci-page {
background: var(--white);
min-height: 60vh;
}
.devis-merci-hero {
position: relative;
padding-bottom: clamp(3rem, 8vw, 5rem);
overflow: hidden;
}
.devis-merci-hero-surface {
position: absolute;
left: 0;
right: 0;
top: 0;
height: min(72vw, 22rem);
background: linear-gradient(155deg, var(--green-dark) 0%, var(--color-accent) 48%, #357a3c 100%);
border-radius: 0 0 42px 42px;
box-shadow: 0 18px 48px rgba(63, 140, 69, 0.22);
}
.devis-merci-hero-surface::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.38;
background: url("assets/contact-hero-pattern.svg") center center / cover no-repeat;
pointer-events: none;
border-radius: inherit;
}
.devis-merci-hero-wrap {
position: relative;
z-index: 1;
padding-top: clamp(2rem, 5vw, 3rem);
padding-bottom: 0.5rem;
}
.devis-merci-hero-inner {
max-width: 38rem;
margin: 0 auto;
padding: 0 0.5rem;
}
.devis-merci-hero-icon-wrap {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.devis-merci-hero-icon {
width: 4.25rem;
height: 4.25rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--color-accent);
background: var(--white);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
line-height: 1;
}
.devis-merci-kicker {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.88);
margin: 0 0 0.5rem;
}
.devis-merci-heading {
font-family: 'Sora', sans-serif;
font-size: clamp(1.65rem, 4vw, 2.15rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--white);
margin: 0 0 1rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.devis-merci-sub {
font-size: clamp(0.92rem, 2vw, 1.05rem);
line-height: 1.55;
color: rgba(255, 255, 255, 0.93);
margin: 0;
}
.devis-merci-panel {
position: relative;
max-width: 46rem;
margin: 1rem auto;
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid var(--navbar-border-subtle);
box-shadow:
0 28px 72px rgba(29, 64, 97, 0.12),
0 10px 28px rgba(63, 140, 69, 0.08),
0 0 0 1px rgba(63, 140, 69, 0.12);
overflow: hidden;
}
.devis-merci-panel__accent {
height: 5px;
background: linear-gradient(90deg, var(--color-accent) 0%, #5aae60 50%, var(--color-accent) 100%);
}
.devis-merci-panel__body {
padding: clamp(1.35rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
}
.devis-merci-panel__h {
font-family: 'Sora', sans-serif;
font-size: 1.05rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 0 0 1.15rem;
}
.devis-merci-timeline {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: grid;
gap: 0.65rem;
}
@media (min-width: 768px) {
.devis-merci-timeline {
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
}
.devis-merci-timeline__item {
display: flex;
gap: 0.65rem;
align-items: flex-start;
padding: 0.65rem 0.75rem;
background: var(--color-accent-muted);
border: 1px solid rgba(63, 140, 69, 0.18);
border-radius: var(--radius-md);
}
.devis-merci-timeline__n {
flex: 0 0 1.65rem;
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
font-size: 0.72rem;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: var(--white);
line-height: 1;
margin-top: 0.05rem;
}
.devis-merci-timeline__txt {
font-size: 0.82rem;
font-weight: 600;
line-height: 1.4;
color: var(--text-main);
}
.devis-merci-highlights {
list-style: none;
padding: 0;
margin: 0 0 1.35rem;
border-top: 1px solid rgba(29, 64, 97, 0.08);
padding-top: 1.25rem;
}
.devis-merci-highlights li {
display: flex;
gap: 0.65rem;
align-items: flex-start;
font-size: 0.88rem;
line-height: 1.45;
margin-bottom: 0.65rem;
color: var(--text-main);
}
.devis-merci-highlights li:last-child {
margin-bottom: 0;
}
.devis-merci-highlights i {
flex-shrink: 0;
color: var(--color-accent);
font-size: 1.1rem;
margin-top: 0.1rem;
}
.devis-merci-actions {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 1rem;
}
@media (min-width: 560px) {
.devis-merci-actions {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
}
.devis-merci-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.72rem 1.25rem;
border-radius: 999px;
font-size: 0.88rem;
font-weight: 700;
text-decoration: none;
text-align: center;
border: 1px solid transparent;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.devis-merci-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(29, 64, 97, 0.14);
}
.devis-merci-btn--accent {
background: var(--color-accent);
color: var(--white);
border-color: rgba(0, 0, 0, 0.06);
box-shadow: 0 6px 18px rgba(63, 140, 69, 0.28);
}
.devis-merci-btn--accent:hover {
background: var(--green-dark);
color: var(--white);
}
.devis-merci-btn--ghost {
background: var(--white);
color: var(--color-primary);
border-color: rgba(29, 64, 97, 0.18);
}
.devis-merci-btn--ghost:hover {
border-color: var(--color-accent);
color: var(--green-dark);
background: var(--color-accent-muted);
}
.devis-merci-btn--link {
background: transparent;
color: var(--text-muted);
font-weight: 600;
font-size: 0.82rem;
padding: 0.4rem 0.35rem;
border: 0;
border-radius: 0;
box-shadow: none;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.devis-merci-btn--link:hover {
transform: none;
box-shadow: none;
color: var(--color-primary);
}
.devis-merci-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.35rem 0.5rem;
font-size: 0.82rem;
margin: 0 0 1rem;
padding: 0.65rem 0.85rem;
background: rgba(29, 64, 97, 0.04);
border-radius: var(--radius-md);
color: var(--text-muted);
}
.devis-merci-meta i {
color: var(--color-accent);
}
.devis-merci-meta a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.devis-merci-meta a:hover {
text-decoration: underline;
color: var(--green-dark);
}
.devis-merci-meta__sep {
opacity: 0.45;
user-select: none;
}
.devis-merci-footnote {
margin: 0;
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.45;
display: flex;
gap: 0.4rem;
align-items: flex-start;
}
.devis-merci-footnote i {
flex-shrink: 0;
margin-top: 0.12rem;
color: var(--color-primary-soft);
}
@media (prefers-reduced-motion: reduce) {
.devis-merci-btn:hover {
transform: none;
}
}
.devis-hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
.devis-fieldset-ins,
.devis-fieldset-contact {
border: 0;
margin: 0 0 22px;
padding: 0;
}
.devis-fieldset-legend {
font-family: 'Sora', sans-serif;
font-size: 0.78rem;
font-weight: 800;
color: var(--text-main);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
padding: 0;
display: inline-flex;
align-items: center;
gap: 10px;
}
.devis-fieldset-legend::before {
content: "";
display: inline-block;
width: 22px;
height: 3px;
border-radius: 2px;
background: var(--color-accent);
}
.devis-helper {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0 0 14px;
line-height: 1.5;
}
.devis-field-error {
display: block;
margin-top: 6px;
font-size: 0.73rem;
font-weight: 600;
color: #c42b2b;
min-height: 0;
}
.devis-submit-btn[disabled] {
opacity: 0.75;
cursor: wait;
transform: none;
}
.devis-reassurance {
font-size: 0.72rem;
color: var(--text-muted);
text-align: center;
margin-top: 10px;
margin-bottom: 0;
}
.quote-form-single { display: block; }
.quote-form-single .ins-type-grid { margin-bottom: 18px; }
/* Step tabs */
.step-tabs {
display: flex; gap: 6px;
background: var(--off-white);
border-radius: 10px;
padding: 4px;
margin-bottom: 24px;
}
.step-tab {
flex: 1; text-align: center;
font-size: 0.75rem; font-weight: 600; font-family: 'Sora', sans-serif;
padding: 7px 4px;
border-radius: 7px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
display: flex; align-items: center; justify-content: center; gap: 5px;
border: none; background: transparent;
}
.step-tab.active {
background: var(--white);
color: var(--blue-primary);
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.step-tab .step-num {
width: 18px; height: 18px;
background: var(--border);
border-radius: 50%;
font-size: 0.65rem;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
color: var(--text-muted);
transition: all 0.2s;
}
.step-tab.active .step-num {
background: var(--blue-primary);
color: #fff;
}
.step-tab.done .step-num {
background: var(--blue-primary);
color: #fff;
}
.step-tab.done { color: var(--blue-primary);}
/* Insurance type selector — green accent, larger touch targets */
.ins-type-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.ins-type-btn {
border: 1.5px solid var(--border);
background: var(--white);
border-radius: 12px;
padding: 16px 8px;
min-height: 88px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-main);
text-align: center;
line-height: 1.2;
}
.ins-type-btn i {
font-size: 1.55rem;
color: var(--text-muted);
line-height: 1;
transition: color 0.18s ease, transform 0.18s ease;
}
.ins-type-label {
display: block;
}
.ins-type-btn:hover {
border-color: rgba(63, 140, 69, 0.55);
background: var(--color-accent-muted);
color: #1e5f3b;
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(63, 140, 69, 0.12);
}
.ins-type-btn.selected {
border-color: var(--color-accent);
background: var(--color-accent);
color: #ffffff;
box-shadow: 0 10px 22px rgba(63, 140, 69, 0.28);
}
.ins-type-btn:hover i {
color: var(--color-accent);
transform: scale(1.08);
}
.ins-type-btn.selected i {
color: #ffffff;
transform: scale(1.08);
}
.ins-type-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(63, 140, 69, 0.32);
}
/* Form fields */
.form-label-custom {
font-size: 0.78rem;
font-weight: 700;
color: var(--text-main);
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 8px;
display: block;
}
.form-label-required {
color: #c62828;
font-weight: 800;
margin-inline-start: 0.15em;
}
.form-control-custom,
.form-select-custom {
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
padding: 14px 16px;
font-size: 0.95rem;
color: var(--text-main);
width: 100%;
min-height: 50px;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
background: var(--white);
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
-webkit-appearance: none;
appearance: none;
}
.form-control-custom::placeholder { color: #a0a8b4; font-weight: 400; }
.form-control-custom:hover,
.form-select-custom:hover {
border-color: rgba(63, 140, 69, 0.45);
}
.form-control-custom:focus,
.form-select-custom:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(63, 140, 69, 0.18);
outline: none;
background: #fbfffb;
}
.input-icon-wrap { position: relative; }
.input-icon-wrap .form-control-custom { padding-left: 44px; }
.input-icon-wrap .iicon {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--text-muted); font-size: 1rem;
transition: color 0.2s ease;
pointer-events: none;
}
.input-icon-wrap:focus-within .iicon {
color: var(--color-accent);
}
/* Progress bar */
.quote-progress {
display: flex; align-items: center; gap: 8px;
margin-bottom: 20px;
}
.progress-bar-wrap {
flex: 1; height: 4px;
background: var(--border);
border-radius: 4px; overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--color-primary-soft);
border-radius: 4px;
transition: width 0.4s ease;
width: 33%;
}
.progress-label {
font-size: 0.72rem; font-weight: 600;
color: var(--text-muted); white-space: nowrap;
}
.text-success {
--bs-text-opacity: 1;
color: var(--color-accent) !important;
}
.btn-simulate {
background: var(--color-accent);
color: var(--white);
font-family: 'Sora', sans-serif;
font-weight: 700;
font-size: 1rem;
border: none;
border-radius: var(--radius-md);
padding: 17px 20px;
width: 100%;
min-height: 56px;
letter-spacing: 0.3px;
transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
box-shadow: 0 10px 28px rgba(63, 140, 69, 0.35);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-simulate i { font-size: 1.05rem; }
.btn-simulate:hover {
background: var(--green-dark);
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(63, 140, 69, 0.45);
color: #fff;
}
.btn-simulate:active {
transform: translateY(0);
box-shadow: 0 6px 16px rgba(63, 140, 69, 0.3);
}
.btn-simulate:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(63, 140, 69, 0.28), 0 10px 28px rgba(63, 140, 69, 0.35);
}
.trust-row {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px dashed var(--border);
}
.trust-row i { color: var(--color-accent); font-size: 0.95rem; }
.trust-row span { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
/* ─── SECTION HEADINGS ─── */
.section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Sora', sans-serif;
font-size: .72rem;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--color-accent);
padding: 6px 14px;
margin-bottom: 14px;
}
.section-tag::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 3px var(--tint-accent-12);
animation: pulse-dot 2.4s infinite;
}
.section-title {
font-size: clamp(1.9rem, 3.5vw, 2.6rem);
font-weight: 800; letter-spacing: -0.5px; line-height: 1.18;
}
.section-title em,
.section-title .accent-word {
font-style: normal;
color: var(--color-accent);
position: relative;
display: inline-block;
}
.section-title em::after,
.section-title .accent-word::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0.06em;
height: 0.28em;
background: var(--color-accent);
opacity: 0.18;
border-radius: 4px;
z-index: -1;
}
/* ─── HOW IT WORKS ─── */
.how-section { padding: 100px 0; background: var(--off-white); }
.step-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
padding: 36px 28px;
position: relative;
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
height: 100%;
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 48px rgba(0,153,82,0.1);
border-color: var(--green-primary);
}
.step-number {
font-family: 'Sora', sans-serif;
font-size: 3.5rem; font-weight: 800;
color: var(--green-light);
line-height: 1; margin-bottom: 16px;
letter-spacing: -2px;
}
.step-icon-wrap {
width: 52px; height: 52px;
background: var(--green-light);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; color: var(--green-primary);
margin-bottom: 18px;
}
.step-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.step-card p { font-size: 0.87rem; color: var(--text-muted); line-height: 1.65; }
.step-connector {
position: absolute; top: 54px; right: -28px;
z-index: 2;
color: var(--green-primary); font-size: 1.2rem; opacity: 0.4;
}
/* ─── ABOUT ─── White section with subtle brand decorations */
.about-section {
padding: 100px 0;
background: var(--white);
position: relative;
overflow: hidden;
}
/* Subtle green decoration ring (top-left) — softer on the white surface */
.about-section::before {
content: "";
position: absolute;
top: -120px;
left: -120px;
width: 360px;
height: 360px;
border-radius: 50%;
border: 24px solid var(--color-accent);
opacity: 0.06;
pointer-events: none;
animation: float-soft 14s ease-in-out infinite;
}
.about-section::after {
content: "";
position: absolute;
bottom: -40px;
right: -40px;
width: 220px;
height: 220px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
pointer-events: none;
opacity: 0.55;
}
.about-section > .container { position: relative; z-index: 1; }
.about-img-wrap { position: relative; display: inline-block; }
.about-photo {
width: 420px; max-width: 100%;
border-radius: var(--radius-lg);
object-fit: cover;
height: 480px;
}
.about-badge-float {
position: absolute; bottom: 24px; right: -24px;
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
padding: 16px 20px;
box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.about-badge-float .num {
font-family: 'Sora', sans-serif;
font-size: 1.5rem; font-weight: 800;
color: var(--green-primary);
}
.about-badge-float .lbl { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
.about-mini-badge {
position: absolute; top: 24px; left: -24px;
background: var(--green-primary);
color: var(--white);
border-radius: var(--radius-md);
padding: 14px 18px;
font-family: 'Sora', sans-serif;
font-weight: 700; font-size: 0.82rem;
box-shadow: 0 8px 28px rgba(0,193,106,0.4);
}
.feature-pill {
display: flex; align-items: flex-start; gap: 14px;
padding: 16px 20px;
background: var(--off-white);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.feature-pill:hover {
border-color: var(--green-primary);
transform: translateX(5px);
box-shadow: 0 4px 20px rgba(0,153,82,0.08);
}
.feature-pill .pill-icon {
width: 40px; height: 40px; flex-shrink: 0;
background: var(--green-light);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: var(--green-primary); font-size: 1rem;
}
.feature-pill .pill-text strong { display: block; font-size: 0.9rem; font-weight: 700; margin-bottom: 2px; }
.feature-pill .pill-text span { font-size: 0.80rem; color: var(--text-muted); }
/* ─── OFFERS ─── */
.offers-section { padding: 100px 0; background: var(--off-white); }
.offers-tabs-nav {
display: flex; gap: 8px; flex-wrap: wrap;
justify-content: center;
margin-bottom: 40px;
}
.offers-tab-btn {
display: flex; align-items: center; gap: 8px;
padding: 10px 20px;
border-radius: 50px;
border: 1.5px solid var(--border);
background: var(--white);
font-size: 0.84rem; font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: all 0.18s;
}
.offers-tab-btn i { font-size: 1rem; }
.offers-tab-btn:hover, .offers-tab-btn.active {
background: var(--green-primary);
border-color: var(--green-primary);
color: var(--dark);
}
.offer-panel { display: none; }
.offer-panel.active { display: block; }
.offer-detail-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1.5px solid var(--border);
display: flex;
grid-template-columns: 1fr 1fr;
}
.offer-detail-img {
height: 100%; min-height: 380px;
object-fit: cover; display: block;
}
.offer-detail-body { padding: 48px 44px; }
.offer-detail-icon {
width: 54px; height: 54px;
background: var(--green-light);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; color: var(--green-primary);
margin-bottom: 22px;
}
.offer-detail-body h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.5px; }
.offer-detail-body p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 24px; }
.offer-guarantees { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.offer-guarantees li {
display: flex; align-items: center; gap: 10px;
font-size: 0.88rem; color: var(--text-main); font-weight: 500;
}
.offer-guarantees li i { color: var(--green-primary); font-size: 0.95rem; flex-shrink: 0; }
.offer-price-hint {
display: flex; align-items: center; gap: 10px;
background: var(--green-light);
border-radius: 10px; padding: 12px 16px;
margin-bottom: 22px;
font-size: 0.85rem; color: var(--green-deeper); font-weight: 600;
}
.offer-price-hint i { font-size: 1rem; }
/* ─── TRUST STRIP (legacy class name; optional elsewhere) ─── */
.trust-strip {
padding: 80px 0;
background-color: var(--color-primary);
background-image: none;
}
.trust-item {
display: flex; align-items: flex-start; gap: 18px;
padding: 20px 24px;
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
background: rgba(255,255,255,0.03);
transition: border-color 0.2s, background 0.2s;
}
.trust-item:hover {
border-color: rgba(0,193,106,0.25);
background: rgba(0,193,106,0.04);
}
.trust-icon {
width: 48px; height: 48px; flex-shrink: 0;
background: rgba(0,193,106,0.1);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; color: var(--green-primary);
}
.trust-text strong { display: block; color: #fff; font-size: 0.92rem; font-weight: 700; margin-bottom: 3px; }
.trust-text span { font-size: 0.80rem; color: rgba(255,255,255,0.4); }
/* ─── TESTIMONIALS (single-slide carousel + carte type avis) ─── */
.testimonials-section {
padding: clamp(72px, 11vw, 118px) 0;
background: var(--white);
}
.testi-intro-title {
font-family: 'Sora', sans-serif;
font-weight: 800;
font-size: clamp(1.7rem, 3.8vw, 2.35rem);
color: var(--text-main);
letter-spacing: -0.03em;
margin: 0 0 14px;
line-height: 1.2;
}
.testi-google-widget {
box-sizing: border-box;
width: 100%;
padding: clamp(10px, 1.8vw, 14px) clamp(10px, 1.6vw, 14px);
border-radius: clamp(11px, 1.8vw, 16px);
background: #fff;
border: 1px solid rgba(63, 140, 69, 0.18);
box-shadow:
0 1px 0 rgba(255, 255, 255, 1) inset,
0 8px 22px rgba(29, 64, 97, 0.06),
0 3px 10px rgba(63, 140, 69, 0.07);
}
.testi-google-widget__summary {
width: 100%;
text-align: center;
}
.testi-google-widget__badge {
margin: 0 0 clamp(6px, 1.2vw, 9px);
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
font-weight: 800;
font-size: clamp(0.68rem, 1.25vw, 0.82rem);
letter-spacing: 0.1em;
text-transform: uppercase;
color: #141518;
line-height: 1.15;
}
.testi-google-widget__stars {
margin: 0 0 clamp(8px, 1.4vw, 11px);
font-size: clamp(0.82rem, 1.65vw, 0.98rem);
color: #fbbc04;
letter-spacing: 3px;
line-height: 1;
}
.testi-google-widget__stars .bi-star {
color: rgba(251, 188, 4, 0.35);
-webkit-text-stroke: 1px rgba(218, 165, 32, 0.65);
}
.testi-google-widget__count {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: clamp(0.72rem, 1.15vw, 0.82rem);
font-weight: 500;
color: #141518;
line-height: 1.35;
}
.testi-google-widget__count strong {
font-weight: 800;
}
.testi-google-widget__brand {
margin-top: clamp(8px, 1.5vw, 12px);
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.testi-google-widget__logo {
height: clamp(15px, 3vw, 19px);
width: auto;
display: block;
}
.testi-google-rail {
flex: 0 0 clamp(148px, 12.5vw, 168px);
width: clamp(148px, 12.5vw, 168px);
align-self: center;
}
.testi-google-rail .testi-google-widget__stars {
letter-spacing: 2px;
}
@media (max-width: 991.98px) {
.testi-carousel-block--has-google-rail {
flex-wrap: wrap;
row-gap: clamp(14px, 2.5vw, 22px);
}
.testi-carousel-block--has-google-rail .testi-google-rail {
flex: 1 1 100%;
width: 100%;
max-width: min(100%, 280px);
align-self: center;
}
}
.testi-intro-text {
margin: 0;
font-size: 0.94rem;
line-height: 1.74;
color: var(--text-muted);
max-width: 40rem;
}
.testi-carousel-shell {
margin-top: clamp(8px, 2vw, 16px);
padding: clamp(28px, 5vw, 48px) clamp(16px, 4vw, 32px);
border-radius: clamp(20px, 4vw, 32px);
background:
radial-gradient(circle at 20% 10%, rgba(63, 140, 69, 0.10), transparent 45%),
radial-gradient(circle at 80% 90%, rgba(63, 140, 69, 0.08), transparent 50%),
linear-gradient(180deg, #ecf6ea 0%, #f4faf2 100%);
border: 1px solid rgba(63, 140, 69, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 30px rgba(63, 140, 69, 0.06);
}
.testi-carousel-block {
display: flex;
align-items: stretch;
gap: clamp(8px, 2vw, 18px);
max-width: min(100%, 1280px);
margin: 0 auto;
}
.testi-stage {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.testi-viewport {
overflow: hidden;
border-radius: clamp(18px, 3vw, 26px);
--testi-gap: 16px;
--testi-slide-w: 300px;
}
.testi-track.testi-track--slides {
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--testi-gap, 16px);
width: max-content;
min-width: 100%;
transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.testi-track.testi-track--slides {
transition: none;
}
}
.testi-slide {
flex: 0 0 var(--testi-slide-w, 300px);
width: var(--testi-slide-w, 300px);
min-width: 0;
box-sizing: border-box;
padding: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
.testi-card-inner {
position: relative;
flex: 1 1 auto;
width: 100%;
min-height: 0;
height: 100%;
background: #fff;
border-radius: clamp(16px, 2.4vw, 22px);
border: 1px solid rgba(63, 140, 69, 0.16);
box-shadow: 0 14px 40px rgba(29, 64, 97, 0.10), 0 4px 12px rgba(63, 140, 69, 0.08);
padding: clamp(13px, 2vw, 20px) clamp(12px, 2vw, 18px) clamp(12px, 2vw, 18px);
display: flex;
flex-direction: column;
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.testi-card-inner:hover {
transform: translateY(-4px);
box-shadow: 0 22px 50px rgba(29, 64, 97, 0.14), 0 8px 18px rgba(63, 140, 69, 0.14);
border-color: var(--color-accent);
}
.testi-quote-wrap {
position: relative;
flex: 1 1 auto;
min-height: 0;
padding: 0.05rem 0 0.15rem;
}
.testi-quote-mark {
position: absolute;
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
line-height: 1;
color: rgba(63, 140, 69, 0.32);
pointer-events: none;
user-select: none;
}
.testi-quote-mark--open {
top: -0.22rem;
left: -0.08rem;
font-size: clamp(1.75rem, 4vw, 2.6rem);
}
.testi-quote-mark--close {
bottom: -0.55rem;
right: 0.08rem;
font-size: clamp(1.45rem, 3.2vw, 2.2rem);
}
.testi-quote {
position: relative;
z-index: 1;
margin: 0;
padding: 0 0.15rem 0 clamp(0.35rem, 1.5vw, 0.85rem);
font-family: 'Inter', sans-serif;
font-size: clamp(0.74rem, 1.25vw, 0.88rem);
line-height: 1.48;
color: #2a3138;
}
.testi-author-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
margin-top: clamp(11px, 2vw, 16px);
padding-top: 2px;
flex-shrink: 0;
}
.testi-name {
font-family: 'Sora', sans-serif;
font-style: normal;
font-weight: 800;
font-size: clamp(0.68rem, 1.1vw, 0.82rem);
letter-spacing: 0.06em;
text-transform: uppercase;
color: #1a1f24;
margin: 0;
}
.testi-stars {
font-size: 0.82rem;
color: #ffd52d;
letter-spacing: 2px;
line-height: 1;
}
.testi-collected {
margin: 6px 0 0;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
line-height: 1.4;
color: rgba(42, 49, 56, 0.58);
}
.testi-dots {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 12px;
}
.testi-dot {
width: 9px;
height: 9px;
padding: 0;
border: none;
border-radius: 999px;
background: rgba(63, 140, 69, 0.28);
cursor: pointer;
transition: width 0.3s ease, background 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
}
.testi-dot:hover {
background: rgba(63, 140, 69, 0.55);
transform: scale(1.15);
}
.testi-dot.is-active {
width: 30px;
background: var(--color-accent);
box-shadow: 0 4px 10px rgba(63, 140, 69, 0.35);
}
.testi-dot:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
.testi-nav-btn {
flex-shrink: 0;
align-self: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: #fff;
color: var(--color-accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 8px 22px rgba(63, 140, 69, 0.14);
border: 1px solid rgba(63, 140, 69, 0.22);
transition: transform 0.18s ease, background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.testi-nav-btn:hover {
background: var(--color-accent);
color: #fff;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 14px 30px rgba(63, 140, 69, 0.36);
}
.testi-nav-btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
/* ─── TESTIMONIALS responsive (after base rules — keep cascade correct) ─── */
@media (max-width: 1199.98px) {
.testi-carousel-block {
gap: clamp(6px, 1.4vw, 14px);
}
.testi-google-rail {
flex-basis: clamp(136px, 11vw, 158px);
width: clamp(136px, 11vw, 158px);
}
}
@media (max-width: 991.98px) {
.testimonials-section .testi-intro.row {
margin-bottom: clamp(1.25rem, 4vw, 2rem) !important;
}
.testi-carousel-shell {
padding: clamp(18px, 4.2vw, 30px) clamp(12px, 3.2vw, 22px);
border-radius: clamp(16px, 3.2vw, 26px);
}
.testi-carousel-block {
align-items: center;
}
.testi-stage {
align-self: stretch;
}
.testi-nav-btn {
align-self: center;
}
}
@media (max-width: 767.98px) {
.testi-google-rail {
display: none !important;
}
.testi-carousel-block--has-google-rail {
flex-wrap: nowrap;
}
.testi-intro-title {
line-height: 1.18;
}
.testi-carousel-shell {
padding: clamp(16px, 3.8vw, 26px) clamp(11px, 2.8vw, 18px);
}
.testi-dots {
gap: 7px;
padding-inline: 4px;
}
.testi-dot {
min-width: 9px;
min-height: 9px;
}
}
@media (max-width: 575.98px) {
#testimonials .container {
padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}
.testimonials-section {
padding: clamp(44px, 11vw, 72px) 0;
}
.testi-intro-title {
font-size: clamp(1.42rem, 6.2vw, 1.82rem);
margin-bottom: 12px;
}
.testi-intro-text {
font-size: 0.9rem;
line-height: 1.65;
}
.testi-carousel-shell {
margin-top: 6px;
padding: 14px 11px 16px;
border-radius: clamp(14px, 4vw, 20px);
overflow-x: hidden;
}
.testi-carousel-block {
gap: 8px;
}
.testi-nav-btn {
width: 42px;
height: 42px;
flex-shrink: 0;
font-size: 1.08rem;
}
.testi-stage {
gap: 10px;
min-width: 0;
}
.testi-viewport {
border-radius: clamp(12px, 3vw, 18px);
}
.testi-card-inner {
padding: 10px 10px 11px;
border-radius: clamp(12px, 2.5vw, 17px);
}
.testi-quote {
overflow-wrap: anywhere;
word-break: break-word;
}
#testimonials .testi-author-row {
gap: 7px 10px;
}
#testimonials .testi-author-avatar {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 12px;
}
}
@media (max-width: 399.98px) {
.testi-carousel-block {
gap: 6px;
}
.testi-nav-btn {
width: 38px;
height: 38px;
font-size: 1rem;
}
.testi-carousel-shell {
padding-inline: 9px;
}
}
.rating-summary {
display: flex; align-items: center; gap: 12px;
background: var(--green-light);
border-radius: var(--radius-md);
padding: 16px 20px;
margin-bottom: 36px;
}
.rating-big { font-family: 'Sora', sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--green-dark); line-height: 1; }
.rating-stars { color: #F6A609; font-size: 1rem; }
.rating-count { font-size: 0.80rem; color: var(--text-muted); margin-top: 2px; }
/* ─── PARTNERS STRIP ─── */
.partners-section { padding: 50px 0;}
.partners-label { font-size: 2rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 24px; }
.partners-logos { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; justify-content: center; }
.partner-pill {
padding: 10px 22px;
font-family: 'Sora', sans-serif;
font-size: 0.85rem; font-weight: 700;
color: var(--text-muted);
letter-spacing: -0.3px;
}
/* ─── FAQ SECTION (premium accordion) ─── */
.faq-premium.faq-section {
padding: clamp(72px, 12vw, 118px) 0;
background: var(--white);
}
.faq-premium-inner {
max-width: 796px;
margin: 0 auto;
}
.faq-premium-head {
margin-bottom: clamp(36px, 6vw, 52px);
}
.faq-premium-overline {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.faq-premium-rule {
width: clamp(44px, 12vw, 88px);
height: 1px;
background: rgba(61, 113, 144, 0.35);
flex-shrink: 0;
}
.faq-premium-overline-text {
font-family: 'Sora', sans-serif;
font-size: 0.71rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-primary-soft);
}
.faq-premium-title {
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
font-weight: 600;
font-size: clamp(2rem, 4.8vw, 2.95rem);
line-height: 1.08;
color: var(--text-main);
letter-spacing: -0.03em;
margin: 0 0 20px;
}
.faq-premium-title-line {
font-weight: 600;
color: var(--text-main);
}
.faq-premium-title-accent {
font-weight: 700;
color: var(--color-accent);
}
.faq-premium-lede {
max-width: 540px;
margin: 0 auto;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
line-height: 1.74;
color: var(--text-muted);
font-weight: 400;
}
.faq-stack {
margin-top: 8px;
}
.faq-premium .faq-item {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(12, 61, 92, 0.06), 0 0 0 1px rgba(12, 61, 92, 0.02);
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
position: relative;
}
.faq-premium .faq-item::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--color-accent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.32s ease;
border-radius: 0 4px 4px 0;
}
.faq-premium .faq-item:hover {
border-color: rgba(63, 140, 69, 0.32);
}
.faq-premium .faq-item.open {
border-color: var(--color-accent);
box-shadow: 0 18px 42px rgba(63, 140, 69, 0.14);
}
.faq-premium .faq-item.open::before {
transform: scaleY(1);
}
.faq-premium .faq-question {
width: 100%;
text-align: left;
padding: clamp(17px, 3vw, 22px) clamp(18px, 4vw, 26px);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(10px, 2.5vw, 20px);
cursor: pointer;
border: none;
background: var(--white);
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 700;
font-size: clamp(1rem, 2vw, 1.18rem);
line-height: 1.3;
color: var(--text-main);
margin: 0;
transition: background 0.2s ease;
}
.faq-premium .faq-question:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
z-index: 1;
position: relative;
}
.faq-premium .faq-item.open .faq-question {
background: #f4faf2;
}
.faq-premium .faq-num {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 700;
font-size: 1.2rem;
color: var(--color-accent);
min-width: 2.05em;
line-height: 1;
}
.faq-premium .faq-qtext {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 700;
}
.faq-premium .faq-toggle-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid rgba(63, 140, 69, 0.22);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--color-accent);
background: var(--color-accent-muted);
transition: transform 0.32s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.faq-premium .faq-question:hover .faq-toggle-icon {
background: var(--color-accent);
color: #ffffff;
border-color: var(--color-accent);
}
.faq-premium .faq-item.open .faq-toggle-icon {
background: var(--color-accent);
border-color: var(--color-accent);
color: #ffffff;
transform: rotate(45deg);
box-shadow: 0 8px 20px rgba(63, 140, 69, 0.36);
}
.faq-premium .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.45s ease, padding 0.32s ease;
padding: 0 clamp(18px, 4vw, 26px);
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
line-height: 1.78;
color: var(--text-muted);
border-top: 1px solid transparent;
}
.faq-premium .faq-answer.open {
max-height: min(680px, 85vh);
padding: 0 clamp(18px, 4vw, 26px) clamp(18px, 3vw, 22px);
border-top-color: rgba(197, 214, 227, 0.55);
}
@media (min-width: 576px) {
.faq-premium .faq-answer.open,
.faq-premium .faq-answer {
padding-left: calc(clamp(18px, 4vw, 26px) + 2.05em + clamp(10px, 2.5vw, 20px));
}
}
.devis-cta-banner {
margin-top: clamp(28px, 5vw, 44px);
padding: 0 0 clamp(48px, 9vw, 80px);
}
.devis-cta-banner__card {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: clamp(1.25rem, 4vw, 2.75rem);
padding: clamp(1.6rem, 4.5vw, 2.6rem) clamp(1.5rem, 4vw, 2.75rem);
border-radius: clamp(20px, 3.2vw, 28px);
background:
radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.18), transparent 45%),
radial-gradient(circle at 88% 92%, rgba(0, 0, 0, 0.12), transparent 55%),
linear-gradient(135deg, var(--color-accent) 0%, var(--green-dark) 100%);
border: 1px solid rgba(63, 140, 69, 0.45);
box-shadow: 0 22px 60px rgba(63, 140, 69, 0.32);
overflow: hidden;
}
.devis-cta-banner__card::before {
content: "";
position: absolute;
top: -60px; right: -60px;
width: 240px; height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
pointer-events: none;
animation: float-blob 18s ease-in-out infinite;
}
.devis-cta-banner__card::after {
content: "";
position: absolute;
bottom: -80px; left: -40px;
width: 220px; height: 220px;
border-radius: 50%;
border: 14px solid rgba(255, 255, 255, 0.10);
pointer-events: none;
animation: float-ring 22s ease-in-out infinite reverse;
}
.devis-cta-banner__copy {
flex: 1 1 280px;
max-width: 560px;
position: relative;
z-index: 1;
}
.devis-cta-banner__title {
font-family: 'Sora', sans-serif;
font-size: clamp(1.25rem, 2.6vw, 1.7rem);
font-weight: 800;
color: #ffffff;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 0.65rem;
}
.devis-cta-banner__text {
font-family: 'Inter', sans-serif;
font-size: clamp(0.88rem, 1.6vw, 0.98rem);
line-height: 1.65;
color: rgba(255, 255, 255, 0.92);
margin: 0;
}
.devis-cta-banner__actions {
flex: 0 1 auto;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
gap: clamp(1rem, 3vw, 2rem);
position: relative;
z-index: 1;
}
.devis-cta-banner__col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
min-width: 152px;
}
.devis-cta-banner__label {
font-family: 'Sora', sans-serif;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.88);
}
.devis-cta-banner__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 162px;
padding: 0.85rem 1.5rem;
border-radius: 999px;
font-family: 'Sora', sans-serif;
font-size: 0.86rem;
font-weight: 700;
text-decoration: none;
text-align: center;
color: var(--color-accent);
background: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
transition: transform 0.2s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.devis-cta-banner__btn:hover {
color: var(--green-dark);
background: #ffffff;
transform: translateY(-3px) scale(1.02);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}
/* second CTA — subtle ghost variant */
.devis-cta-banner__col:nth-child(2) .devis-cta-banner__btn {
color: #ffffff;
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.6);
box-shadow: none;
}
.devis-cta-banner__col:nth-child(2) .devis-cta-banner__btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
border-color: #ffffff;
}
@media (min-width: 900px) {
.devis-cta-banner__actions {
justify-content: flex-end;
}
}
/* ─── CTA BAND ─── */
.cta-band {
background: var(--color-primary-dark);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: rgba(66, 181, 165, 0.08);
border-radius: 50%;
pointer-events: none;
}
.cta-band h2 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
font-weight: 800; color: #fff; letter-spacing: -0.5px;
margin-bottom: 12px;
}
.cta-band p { color: rgba(255,255,255,0.5); font-size: 1rem; margin-bottom: 32px; }
/* ─── FOOTER ─── */
.footer {
background: var(--footer-bg);
padding: 70px 0 30px;
border-top: 1px solid var(--footer-border-top);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.footer-brand { font-family: 'Sora', sans-serif; font-size: 1.3rem; font-weight: 800; color: #fff; }
.footer-brand span { color: var(--green-primary); }
.footer-tagline { color: rgba(232, 241, 250, 0.62); font-size: 0.84rem; line-height: 1.72; margin: 12px 0 20px; }
.footer-contact-pill {
display: inline-flex; align-items: center; gap: 8px;
background: var(--footer-pill-bg);
border: 1px solid var(--footer-pill-border);
border-radius: 50px;
padding: 8px 16px;
font-size: 0.82rem; color: rgba(232, 241, 250, 0.88);
text-decoration: none;
transition: all 0.2s;
margin-bottom: 8px;
display: flex;
}
.footer-contact-pill i { color: var(--green-primary); }
.footer-contact-pill:hover {
border-color: rgba(74, 144, 226, 0.55);
background: rgba(61, 106, 153, 0.28);
color: #fff;
}
.footer h6 { color: #fff; font-size: 0.80rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 18px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul li a { color: rgba(232, 241, 250, 0.55); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
.footer ul li a:hover { color: var(--green-primary); }
.footer-bottom { border-top: 1px solid var(--footer-divider); margin-top: 50px; padding-top: 24px; }
.footer-bottom p { color: rgba(232, 241, 250, 0.38); font-size: 0.78rem; margin: 0; }
.footer-legal-id {
color: rgba(232, 241, 250, 0.72);
font-size: 0.83rem;
line-height: 1.5;
}
.footer-legal-id strong {
color: rgba(255, 255, 255, 0.96);
font-weight: 700;
}
.footer-legal-link {
color: rgba(232, 241, 250, 0.52);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-legal-link:hover { color: var(--color-secondary); }
.social-link {
width: 38px; height: 38px;
background: var(--footer-pill-bg);
border: 1px solid var(--footer-pill-border);
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: rgba(232, 241, 250, 0.62); font-size: 0.95rem;
text-decoration: none;
transition: all 0.2s;
}
.social-link:hover {
background: rgba(74, 144, 226, 0.28);
color: #fff;
border-color: rgba(74, 144, 226, 0.55);
}
/* ─── FLOATING CHAT BUTTON ─── */
.float-chat {
position: fixed; bottom: 28px; right: 28px;
background: var(--green-primary);
color: var(--dark);
width: 58px; height: 58px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
box-shadow: 0 8px 28px rgba(0,193,106,0.45);
text-decoration: none;
z-index: 999;
transition: transform 0.2s, box-shadow 0.2s;
}
.float-chat:hover { transform: scale(1.1); box-shadow: 0 12px 36px rgba(0,193,106,0.55); color: var(--dark); }
.float-chat-label {
position: absolute; right: 70px; bottom: 14px;
background: var(--dark);
color: #fff; font-size: 0.78rem; font-weight: 600;
padding: 6px 12px; border-radius: 6px;
white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity 0.2s;
}
.float-chat:hover .float-chat-label { opacity: 1; }
/* ─── OFFER DESCRIPTION & SAVINGS BADGE ─── */
.offer-desc-intro {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.72;
margin-bottom: 18px;
}
.savings-badge {
display: inline-flex; align-items: center; gap: 6px;
background: #FFF8E6;
border: 1.5px solid #F6A609;
color: #b07a00;
font-size: 0.78rem; font-weight: 700;
padding: 5px 14px; border-radius: 50px;
margin-bottom: 22px;
}
.savings-badge i { color: #F6A609; }
/* ─── STICKY CTA MOBILE BAR ─── */
.mobile-sticky-cta {
display: none;
position: fixed; bottom: 0; left: 0; right: 0;
background: var(--dark);
padding: 12px 16px;
z-index: 998;
border-top: 1px solid rgba(0,193,106,0.2);
gap: 10px;
}
@media (max-width: 768px) {
.mobile-sticky-cta { display: flex; }
}
.mobile-sticky-cta a {
flex: 1; text-align: center; font-size: 0.85rem; font-weight: 700;
padding: 12px 8px; border-radius: 10px; text-decoration: none;
font-family: 'Sora', sans-serif;
}
.mobile-sticky-cta .btn-ms-primary {
background: var(--green-primary); color: var(--dark);
}
.mobile-sticky-cta .btn-ms-ghost {
background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8);
border: 1px solid rgba(255,255,255,0.12);
}
/* ─── URGENCY TICKER ─── */
.urgency-ticker {
background: rgba(0,193,106,0.08);
border: 1px solid rgba(0,193,106,0.18);
border-radius: 50px;
padding: 5px 16px;
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.78rem; font-weight: 600; color: var(--green-dark);
margin-bottom: 16px;
}
.urgency-ticker .live-dot {
width: 7px; height: 7px; background: #00C16A;
border-radius: 50%; animation: pulse-dot 1.5s infinite;
}
/* ─── OFFER TABS IMPROVED ACTIVE STATE ─── */
.offers-tab-btn.active {
box-shadow: 0 4px 16px rgba(0,193,106,0.3);
font-weight: 700;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.65s ease both; }
.delay-1 { animation-delay: 0.10s; }
.delay-2 { animation-delay: 0.22s; }
.delay-3 { animation-delay: 0.36s; }
.delay-4 { animation-delay: 0.50s; }
.reveal { opacity: 1; transform: translateY(0); transition: opacity 0.35s ease, transform 0.35s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ─── RESPONSIVE ─── */
@media (max-width: 991px) {
.offer-detail-card { grid-template-columns: 1fr; }
.offer-detail-img { height: 240px; }
.about-photo { height: 320px; }
.about-mini-badge { left: 0; }
.about-badge-float { right: 0; }
}
@media (max-width: 768px) {
.hero { padding: 60px 0 50px; min-height: auto; }
.hero-stats-row { flex-wrap: wrap; gap: 20px; }
.hero-stat { border-right: none; margin-right: 0; }
.ins-type-grid { grid-template-columns: repeat(2, 1fr); }
.float-chat-label { display: none; }
}
/* partners */
.partners-section {
text-align: center;
padding: 60px 0 70px;
background: linear-gradient(180deg, #ffffff 0%, #f4faf2 100%);
border-top: 1px solid rgba(63, 140, 69, 0.10);
border-bottom: 1px solid rgba(63, 140, 69, 0.10);
}
.partners-label {
position: relative;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 1.4rem;
color: var(--text-main);
padding-bottom: 14px;
font-weight: 700;
margin-bottom: 1.25rem;
}
.partners-wrapper {
position: relative;
}
.partners-inner {
display: flex;
align-items: center;
gap: clamp(10px, 2vw, 18px);
max-width: 100%;
}
.partners-carousel {
display: flex;
flex: 1;
min-width: 0;
overflow-x: auto;
/* snap + CSS smooth-scroll block framerate-based auto-marquee */
scroll-snap-type: none;
scroll-behavior: auto;
gap: 20px;
padding: 12px 4px;
scrollbar-width: none;
cursor: grab;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
}
.partners-carousel:active {
cursor: grabbing;
}
.partners-carousel.partner-dragging {
scroll-behavior: auto;
cursor: grabbing;
user-select: none;
}
.partners-carousel::-webkit-scrollbar {
display: none;
}
.partner {
flex: 0 0 calc(25% - 16px);
border-radius: var(--radius-md);
padding: 16px;
transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}
.partner img,
.partner .flexassur-photo {
max-width: 100%;
height: 92px;
object-fit: contain;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.partner:hover {
transform: translateY(-4px) scale(1.03);
border-color: rgba(63, 140, 69, 0.32);
background: var(--color-accent-muted);
box-shadow: 0 14px 30px rgba(63, 140, 69, 0.14);
}
.partner:hover img,
.partner:hover .flexassur-photo {
filter: grayscale(0) saturate(1);
opacity: 1;
transform: scale(1.04);
}
.partner-nav {
flex-shrink: 0;
width: 46px;
height: 46px;
border: 1px solid rgba(63, 140, 69, 0.24);
border-radius: 50%;
background: var(--white);
color: var(--color-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
cursor: pointer;
transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
box-shadow: 0 6px 18px rgba(63, 140, 69, 0.14);
z-index: 2;
}
.partner-nav:hover {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
transform: scale(1.06);
box-shadow: 0 10px 24px rgba(63, 140, 69, 0.32);
}
.partner-nav:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(63, 140, 69, 0.28), 0 6px 18px rgba(63, 140, 69, 0.18);
}
/* Responsive */
@media (max-width: 1024px) {
.partner {
flex: 0 0 calc(33.33% - 20px);
}
}
@media (max-width: 768px) {
.partner {
flex: 0 0 calc(50% - 20px);
}
}
@media (max-width: 480px) {
.partner {
flex: 0 0 78%;
}
.partner-nav {
width: 38px;
height: 38px;
font-size: 1.1rem;
}
}
/* ─── ABOUT SECTION (Image 4 style) ─── */
.about-section { padding: 100px 0; background: var(--white); }
.about-img-collage { position:relative;padding-bottom:80px; }
.about-img-main {
width:100%;max-width:420px;border-radius:var(--radius-lg);
object-fit:cover;height:340px;display:block;
box-shadow:0 20px 60px rgba(13,31,78,.15);
}
.about-img-secondary {
position:absolute;bottom:0;right:0;
width:68%;border-radius:var(--radius-lg);
object-fit:cover;height:240px;
box-shadow:0 20px 50px rgba(13,31,78,.18);
border:4px solid #fff;
}
.about-exp-badge {
position:absolute;bottom:80px;left:-20px;
background: linear-gradient(135deg, var(--color-accent), var(--green-dark));
color:#fff;
border-radius:50%;width:120px;height:120px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
box-shadow:0 14px 38px rgba(63, 140, 69, 0.45);
font-family:'Sora',sans-serif;text-align:center;z-index:2;
border: 4px solid #ffffff;
animation: float-soft 6s ease-in-out infinite;
}
.about-exp-badge .num { font-size:2rem;font-weight:800;line-height:1; letter-spacing: -0.02em; }
.about-exp-badge .lbl { font-size:.65rem;font-weight:600;opacity:.92;line-height:1.3;margin-top:4px; text-transform: uppercase; letter-spacing: 0.04em; }
.about-tag-marker {
display:inline-flex; align-items:center; gap:10px;
font-family: 'Sora', sans-serif;
font-size: .76rem; font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.14em; text-transform: uppercase;
margin-bottom: 14px;
padding: 6px 14px;
background: var(--color-accent-muted);
border: 1px solid rgba(63, 140, 69, 0.22);
border-radius: 999px;
}
.about-tag-marker::before {
content: '';
display: inline-block;
width: 8px; height: 8px;
background: var(--color-accent);
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 3px var(--tint-accent-12);
animation: pulse-dot 2.4s infinite;
}
.about-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:24px 0 32px; }
.about-feat-item {
display:flex; align-items:flex-start; gap:14px;
padding: 4px 0;
transition: transform 0.22s ease;
}
.about-feat-item:hover { transform: translateX(4px); }
.about-feat-icon {
width:44px; height:44px; flex-shrink:0;
background: var(--color-accent-muted);
border-radius:12px;
display:flex; align-items:center; justify-content:center;
color: var(--color-accent); font-size:1.1rem;
border: 1px solid rgba(63, 140, 69, 0.22);
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.about-feat-item:hover .about-feat-icon {
background: var(--color-accent);
color: #ffffff;
transform: scale(1.06) rotate(-4deg);
}
.about-feat-item strong { display:block; font-size:.94rem; font-weight:700; margin-bottom:4px; color: var(--text-main); }
.about-feat-item span { font-size:.82rem; color:var(--text-muted); line-height:1.55; }
.about-signature { font-family:Georgia,serif; font-style:italic; font-size:1.5rem; color:var(--text-muted); margin-top:6px; }
/* ─── SERVICES CARDS (Images 5 & 6) ─── */
.services-section { padding: 100px 0; background: var(--white); }
.services-section__catalog-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.35rem;
border: 1.5px solid rgba(63, 140, 69, 0.28);
border-radius: 999px;
background: #ffffff;
color: var(--color-primary);
font-family: 'Sora', sans-serif;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 26px rgba(29, 64, 97, 0.08);
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease, gap 0.2s ease;
}
.services-section__catalog-link:hover {
color: #ffffff;
background: var(--green-primary);
border-color: var(--green-primary);
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(63, 140, 69, 0.24);
gap: 0.65rem;
}
.services-section__catalog-link i {
font-size: 1rem;
transition: transform 0.2s ease;
}
.services-section__catalog-link:hover i {
transform: translateX(3px);
}
.service-card {
background:#fff;border-radius:var(--radius-lg);overflow:hidden;
border:1.5px solid var(--border);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
height:100%;position:relative;
}
.service-card:hover {
transform:translateY(-8px);
box-shadow:0 28px 60px rgba(63, 140, 69, 0.18);
border-color: var(--tint-accent-30);
}
.service-card-img-wrap {
position:relative;overflow:hidden;height:220px;
}
.service-card-img-wrap img,
.service-card-img-wrap .flexassur-photo {
width:100%;height:100%;object-fit:cover;
transition:transform .5s ease, filter .4s ease;
}
.service-card:hover .service-card-img-wrap img,
.service-card:hover .service-card-img-wrap .flexassur-photo { transform:scale(1.08); filter: brightness(.92) saturate(1.05); }
/* Green overlay on hover */
.service-card-img-wrap::after {
content:'';
position:absolute;
inset:0;
background: linear-gradient(180deg, rgba(63, 140, 69, 0.0) 0%, rgba(29, 64, 97, 0.55) 100%);
opacity:0.55;
transition:opacity .35s ease, background .35s ease;
}
.service-card:hover .service-card-img-wrap::after {
opacity:1;
background: linear-gradient(180deg, rgba(63, 140, 69, 0.15) 0%, rgba(29, 64, 97, 0.75) 100%);
}
/* Icon badge on image top-left */
.service-icon-badge {
position:absolute;top:16px;left:16px;z-index:2;
width:56px;height:56px;
background:var(--color-accent);
border-radius:14px;
display:flex;align-items:center;justify-content:center;
font-size:1.5rem;color:#fff;
box-shadow:0 10px 24px rgba(63, 140, 69, 0.45), 0 0 0 4px rgba(255, 255, 255, 0.5) inset;
transition: background .3s ease, transform .3s ease;
}
.service-card:hover .service-icon-badge {
background: var(--green-dark);
transform: scale(1.08) rotate(-4deg);
}
.service-card-body { padding:26px 24px 28px; }
.service-card-body h3,
.service-card-body h4 { font-size:1.12rem; font-weight:700; color:var(--text-main); margin-bottom:10px; letter-spacing: -0.01em; }
.service-card-body p { font-size:.88rem; color:var(--text-muted); line-height:1.7; margin-bottom:20px; }
.btn-read-more {
display:inline-flex; align-items:center; gap:7px;
background:var(--color-accent); color:#fff !important;
font-family: 'Sora', sans-serif;
font-weight:700; font-size:.82rem;
padding:10px 18px; border-radius:999px;
text-decoration:none;
transition: background .2s ease, transform .18s ease, box-shadow .2s ease, gap .2s ease;
border:none;
box-shadow: 0 8px 20px rgba(63, 140, 69, 0.28);
}
.btn-read-more:hover {
background: var(--green-dark);
color:#fff !important;
transform:translateY(-2px);
gap: 11px;
box-shadow: 0 12px 26px rgba(63, 140, 69, 0.4);
}
/* Bottom accent line */
.service-card::after {
content:'';display:block;height:4px;
background: linear-gradient(90deg, var(--color-accent), #5aae60, var(--color-accent));
background-size: 200% 100%;
width:0;
transition: width .4s ease;
}
.service-card:hover::after {
width:100%;
animation: shimmer-bar 2s linear infinite;
}
@keyframes shimmer-bar {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* ════════════════════════════════════
POURQUOI FLEXASSUR — UX & conversion
════════════════════════════════════ */
.conv-trust-split {
/* Light band — WCAG-friendly contrast vs white “canvas” fatigue */
--conv-surface-top: #ffffff;
--conv-surface-bot: var(--blue-pale);
--conv-heading: var(--color-primary);
--conv-body: var(--text-main);
--conv-muted: var(--text-muted);
--conv-subtle: rgba(12, 61, 92, 0.58);
--conv-chip-bg: var(--white);
--conv-chip-border: var(--border);
--conv-chip-hover: rgba(66, 181, 165, 0.14);
--conv-divider: rgba(12, 61, 92, 0.1);
position: relative;
padding: clamp(2.75rem, 6vw, 4.25rem) 0 clamp(2.35rem, 4.5vw, 3.35rem);
background: var(--conv-surface-top);
overflow: hidden;
color: var(--conv-body);
border-bottom: 1px solid var(--border);
}
.conv-trust-split::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--color-accent);
}
.conv-trust-split::after {
content: none;
}
.conv-trust-split .container {
position: relative;
z-index: 1;
}
.conv-hero-stack {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 46rem;
margin: 0 auto clamp(2rem, 4vw, 2.75rem);
}
.conv-hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0 1.35rem;
padding: 0.68rem 1.5rem;
background: var(--color-accent);
color: var(--color-primary-dark);
font-weight: 700;
font-size: 0.86rem;
letter-spacing: 0.02em;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 6px 22px var(--shadow-green);
border: 1px solid rgba(12, 61, 92, 0.1);
transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.conv-hero-cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(66, 181, 165, 0.32);
background: var(--green-dark);
color: var(--white);
border-color: transparent;
}
.conv-eyebrow--center {
justify-content: center;
color: var(--conv-subtle);
}
.conv-eyebrow--center .conv-eyebrow-line {
background: var(--color-accent);
width: 40px;
height: 2px;
opacity: 1;
}
.conv-title--center {
text-align: center;
color: var(--conv-heading);
font-size: clamp(1.85rem, 4.2vw, 2.75rem);
line-height: 1.14;
margin: 0 0 1rem;
font-weight: 800;
letter-spacing: -0.03em;
}
.conv-trust-split .conv-title-accent {
color: var(--color-accent);
font-weight: 800;
text-shadow: none;
}
.conv-intro--center {
text-align: center;
justify-self: center;
max-width: 40rem;
margin: 0 auto 1.35rem;
color: var(--conv-muted);
font-size: clamp(0.92rem, 1.8vw, 1.04rem);
line-height: 1.74;
font-weight: 400;
}
.conv-intro--center strong {
color: var(--conv-body);
font-weight: 600;
}
/* Eyebrow on the trust band uses the royal-blue accent (Kyiv-style) */
.conv-trust-split .conv-eyebrow {
color: var(--color-accent);
font-weight: 700;
}
.conv-trust-row--center {
justify-content: center;
margin-bottom: 1.25rem !important;
}
.conv-trust-split .conv-trust-row--center li {
background: var(--conv-chip-bg);
border: 1px solid var(--conv-chip-border);
color: var(--conv-body);
box-shadow: 0 4px 16px rgba(12, 61, 92, 0.07);
}
.conv-trust-split .conv-trust-row--center i {
color: var(--color-primary-soft);
}
.conv-stats--center {
width: 100%;
max-width: 52rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 0 !important;
}
.conv-trust-split .conv-stat-pill--dark {
background: var(--conv-chip-bg);
border: 1px solid var(--conv-chip-border);
box-shadow: 0 2px 14px rgba(12, 61, 92, 0.06);
}
.conv-trust-split .conv-stat-pill--dark:hover {
border-color: rgba(66, 181, 165, 0.45);
background: var(--conv-chip-hover);
}
.conv-trust-split .conv-stat-pill--dark strong {
color: var(--conv-heading);
}
.conv-trust-split .conv-stat-pill--dark span {
color: var(--conv-muted);
}
.conv-zigzag {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.35rem, 3.5vw, 2.6rem);
align-items: center;
margin-top: clamp(2.25rem, 5vw, 3.5rem);
}
@media (max-width: 991px) {
.conv-zigzag {
grid-template-columns: 1fr;
}
}
/* Square thumbnails — predictable layout (CLS), crisp on retina */
.conv-zigzag-media {
position: relative;
display: flex;
align-items: center;
justify-self: stretch;
}
.conv-zigzag--media-right .conv-zigzag-media {
justify-content: flex-start;
}
.conv-trust-split .conv-zig-img {
width: min(300px, 82vw);
max-width: 300px;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
border-radius: var(--radius-md);
display: block;
margin: 0;
border: 1px solid var(--conv-chip-border);
box-shadow: 0 10px 32px rgba(12, 61, 92, 0.1), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.conv-float-badge {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--white);
box-shadow: 0 8px 20px rgba(12, 61, 92, 0.2);
z-index: 2;
border: 2px solid var(--white);
}
.conv-float-badge--mint {
width: 38px;
height: 38px;
left: clamp(6px, 2vw, 10px);
bottom: 10px;
font-size: 0.95rem;
background: var(--color-accent);
}
.conv-float-badge--blue {
width: 44px;
height: 44px;
left: clamp(34px, 9vw, 46px);
bottom: 6px;
font-size: 1rem;
background: var(--color-secondary);
}
.conv-float-badge--accent {
width: 36px;
height: 36px;
left: clamp(6px, 2vw, 10px);
bottom: 10px;
font-size: 0.85rem;
background: var(--color-cta-warm);
color: var(--white);
}
.conv-float-badge--handshake {
width: 46px;
height: 46px;
left: clamp(32px, 9vw, 44px);
bottom: 6px;
font-size: 1.05rem;
background: var(--color-primary-soft);
}
.conv-zigzag-copy {
padding: 0.25rem 0;
}
.conv-zigzag-copy--wide {
max-width: 36rem;
}
.conv-zig-title {
font-size: clamp(1.22rem, 2.3vw, 1.58rem);
font-weight: 800;
color: var(--conv-heading);
margin: 0 0 0.75rem;
line-height: 1.24;
letter-spacing: -0.02em;
}
.conv-zig-text {
font-size: 0.91rem;
line-height: 1.74;
color: var(--conv-muted);
margin: 0 0 1.25rem;
}
.conv-zig-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.72rem 1.55rem;
font-weight: 700;
font-size: 0.88rem;
color: var(--white);
text-decoration: none;
border-radius: 999px;
background: var(--color-cta-warm);
border: 1px solid rgba(12, 61, 92, 0.08);
box-shadow: 0 8px 24px rgba(201, 122, 20, 0.24);
transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.conv-zig-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(201, 122, 20, 0.32);
background: var(--color-cta-warm-hover);
color: var(--white);
}
.conv-zig-actions {
margin-top: 1.1rem;
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.conv-zig-cta.conv-zig-cta--outline {
gap: 0.45rem;
background: transparent;
color: #ebc42b;
border: 1px solid rgba(26, 58, 92, 0.28);
box-shadow: none;
}
.conv-zig-cta.conv-zig-cta--outline:hover {
background: rgba(26, 58, 92, 0.06);
color: var(--color-primary, #1a3a5c);
box-shadow: 0 6px 18px rgba(26, 58, 92, 0.12);
}
.conv-zig-features {
list-style: none;
margin: 0;
padding: 0;
}
.conv-zig-features li {
padding: 0.95rem 0 1.05rem;
border-bottom: 1px solid var(--conv-divider);
}
.conv-zig-features li:first-child {
padding-top: 0;
}
.conv-zig-features li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.conv-zig-feat-title {
font-size: 1rem;
font-weight: 700;
color: var(--conv-heading);
margin: 0 0 0.38rem;
line-height: 1.32;
}
.conv-zig-feat-text {
font-size: 0.85rem;
line-height: 1.68;
color: var(--conv-muted);
margin: 0;
}
@media (max-width: 991px) {
.conv-zigzag--media-left .conv-zigzag-media,
.conv-zigzag--media-right .conv-zigzag-media {
max-width: 320px;
margin-inline: auto;
justify-content: center;
}
.conv-zigzag--media-right .conv-zigzag-media {
order: -1;
}
.conv-zigzag--media-right {
display: flex;
flex-direction: column;
}
.conv-zigzag--media-right .conv-zigzag-copy {
order: 1;
}
}
.conv-action-split {
position: relative;
padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 3.25rem);
background: #fff;
border-top: 1px solid var(--border);
}
.conv-trust-split .conv-next-hint-wrap {
text-align: center;
margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
position: relative;
z-index: 1;
}
.conv-action-head {
max-width: 42rem;
margin-bottom: clamp(1.35rem, 2.5vw, 1.85rem);
}
.conv-action-eyebrow {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
margin: 0 0 0.5rem;
}
.conv-action-title {
font-size: clamp(1.35rem, 2.8vw, 1.9rem);
font-weight: 800;
color: var(--color-primary);
margin: 0 0 0.6rem;
letter-spacing: -0.02em;
line-height: 1.2;
}
.conv-action-lead {
margin: 0;
font-size: 0.92rem;
color: var(--text-muted);
line-height: 1.65;
}
.conv-eyebrow {
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
margin: 0 0 0.85rem;
}
.conv-eyebrow-line {
display: inline-block;
width: 28px;
height: 2px;
background: var(--color-secondary);
border-radius: 2px;
}
.conv-trust-row {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
}
.conv-trust-row li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-main);
background: #fff;
border: 1px solid var(--border);
padding: 0.45rem 0.85rem;
border-radius: 999px;
box-shadow: 0 1px 4px rgba(15, 63, 97, 0.06);
}
.conv-trust-row i {
color: var(--color-primary);
font-size: 0.95rem;
}
.conv-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
@media (max-width: 767px) {
.conv-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.conv-stat-pill {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 0.85rem 0.65rem;
text-align: center;
box-shadow: 0 4px 14px rgba(15, 63, 97, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.conv-stat-pill:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(15, 63, 97, 0.1);
border-color: rgba(94, 223, 201, 0.5);
}
.conv-stat-pill strong {
display: block;
font-family: "Sora", sans-serif;
font-size: clamp(1.2rem, 2.5vw, 1.45rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
line-height: 1;
}
.conv-stat-pill span {
display: block;
margin-top: 0.35rem;
font-size: 0.68rem;
font-weight: 600;
color: var(--text-muted);
line-height: 1.35;
}
.conv-pillars {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2.5vw, 1.5rem);
margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
@media (max-width: 991px) {
.conv-pillars {
grid-template-columns: 1fr;
}
}
.conv-pillar {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: clamp(1.35rem, 2.5vw, 1.65rem);
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
box-shadow: 0 6px 24px rgba(15, 63, 97, 0.07);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
height: 100%;
}
.conv-pillar:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(15, 63, 97, 0.12);
border-color: rgba(105, 192, 200, 0.45);
}
.conv-pillar-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
color: #fff;
margin-bottom: 1.1rem;
flex-shrink: 0;
}
.conv-pillar-icon--navy {
background: var(--color-primary);
}
.conv-pillar-icon--teal {
background: var(--color-secondary);
}
.conv-pillar-title {
font-size: 1.08rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
margin: 0 0 0.65rem;
}
.conv-pillar-text {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.65;
margin: 0 0 1.1rem;
flex: 1;
}
.conv-pillar-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--color-primary);
text-decoration: none;
border-bottom: 2px solid var(--color-accent);
padding-bottom: 0.1rem;
margin-top: auto;
transition: color 0.2s ease, gap 0.2s ease, border-color 0.2s ease;
}
.conv-pillar-cta:hover {
color: var(--color-primary-soft);
gap: 0.55rem;
border-color: var(--color-secondary);
}
.conv-pillar-cta--outline {
border: 1.5px solid var(--border);
border-radius: 999px;
padding: 0.45rem 1rem;
border-bottom: 1.5px solid var(--border);
background: #f8fafb;
}
.conv-pillar-cta--outline:hover {
border-color: var(--color-secondary);
background: #fff;
}
.conv-secondary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
@media (max-width: 991px) {
.conv-secondary {
grid-template-columns: 1fr;
}
}
.conv-mini {
display: flex;
gap: 0.85rem;
align-items: flex-start;
background: rgba(255, 255, 255, 0.85);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1rem 1.1rem;
}
.conv-mini > i {
font-size: 1.35rem;
color: var(--color-secondary);
flex-shrink: 0;
margin-top: 0.1rem;
}
.conv-mini strong {
display: block;
font-size: 0.88rem;
font-weight: 700;
color: var(--text-main);
margin-bottom: 0.25rem;
}
.conv-mini span {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.55;
}
.conv-cta-band {
background: var(--color-primary);
border-radius: var(--radius-lg);
padding: clamp(1.35rem, 3vw, 1.85rem);
box-shadow: 0 18px 48px rgba(12, 61, 92, 0.22);
}
.conv-cta-band-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
}
.conv-cta-copy {
flex: 1 1 280px;
max-width: 540px;
}
.conv-cta-kicker {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-accent);
margin: 0 0 0.4rem;
}
.conv-cta-headline {
font-size: clamp(1.2rem, 2.4vw, 1.55rem);
font-weight: 800;
color: #fff;
line-height: 1.25;
margin: 0 0 0.45rem;
}
.conv-cta-sub {
font-size: 0.86rem;
color: rgba(255, 255, 255, 0.78);
line-height: 1.55;
margin: 0;
}
.conv-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
justify-content: flex-end;
flex: 0 1 auto;
}
@media (max-width: 767px) {
.conv-cta-actions {
justify-content: flex-start;
width: 100%;
}
}
.conv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
font-weight: 700;
font-size: 0.86rem;
text-decoration: none;
border-radius: 999px;
padding: 0.65rem 1.15rem;
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
border: none;
cursor: pointer;
white-space: nowrap;
}
.conv-btn--primary {
background: var(--color-accent);
color: var(--white);
box-shadow: 0 6px 20px var(--accent-cta-shadow);
}
.conv-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(66, 181, 165, 0.5);
background: var(--green-dark);
color: #fff;
}
.conv-btn--ghost {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.22);
}
.conv-btn--ghost:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.35);
}
.conv-btn--whatsapp {
background: #25d366;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.conv-btn--whatsapp:hover {
background: #1ebe57;
transform: translateY(-2px);
color: #fff;
}
.conv-trust-split.reveal .conv-hero-stack > *,
.conv-trust-split.reveal .conv-zigzag {
opacity: 0;
transform: translateY(18px);
}
.conv-trust-split.reveal.visible .conv-hero-stack > *,
.conv-trust-split.reveal.visible .conv-zigzag {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.conv-trust-split.reveal.visible .conv-hero-stack > *:nth-child(1) { transition-delay: 0.02s; }
.conv-trust-split.reveal.visible .conv-hero-stack > *:nth-child(2) { transition-delay: 0.05s; }
.conv-trust-split.reveal.visible .conv-hero-stack > *:nth-child(3) { transition-delay: 0.08s; }
.conv-trust-split.reveal.visible .conv-hero-stack > *:nth-child(4) { transition-delay: 0.11s; }
.conv-trust-split.reveal.visible .conv-hero-stack > *:nth-child(5) { transition-delay: 0.14s; }
.conv-trust-split.reveal.visible .conv-hero-stack > *:nth-child(6) { transition-delay: 0.17s; }
.conv-trust-split.reveal.visible .conv-zigzag--media-left { transition-delay: 0.22s; }
.conv-trust-split.reveal.visible .conv-zigzag--media-right { transition-delay: 0.3s; }
.conv-trust-split .conv-scroll-hint {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.86rem;
font-weight: 600;
text-decoration: none;
padding-bottom: 0.12rem;
border-bottom: 1px dashed rgba(12, 61, 92, 0.28);
color: var(--color-primary-soft);
transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease, border-bottom-style 0.2s ease;
}
.conv-trust-split .conv-scroll-hint:hover {
color: var(--color-primary);
border-bottom-color: var(--color-accent);
border-bottom-style: solid;
gap: 0.45rem;
}
/* ── Pourquoi flexassurance — calm advisory decision system ── */
.pf-about {
--pf-bg: #f6faf4;
--pf-panel: #ffffff;
--pf-ink: var(--color-primary);
--pf-muted: var(--text-muted);
--pf-line: rgba(29, 64, 97, 0.1);
--pf-accent: var(--color-accent);
--pf-accent-soft: rgba(63, 140, 69, 0.12);
--pf-shadow: 0 18px 48px rgba(29, 64, 97, 0.08);
--pf-radius: 8px;
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(4.25rem, 7vw, 6.25rem) 0;
background: var(--pf-bg);
color: var(--pf-ink);
border-top: 1px solid rgba(29, 64, 97, 0.06);
border-bottom: 1px solid rgba(29, 64, 97, 0.06);
}
.pf-about::before {
content: "";
position: absolute;
inset: 0 0 auto;
z-index: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(63, 140, 69, 0.28), transparent);
pointer-events: none;
}
.pf-about > .container {
position: relative;
z-index: 1;
max-width: 1180px;
}
.pf-about__grid {
display: grid;
grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
gap: clamp(1rem, 2vw, 1.5rem);
align-items: stretch;
}
.pf-about__cell {
min-width: 0;
border-radius: var(--pf-radius);
}
.pf-about__media {
position: relative;
overflow: hidden;
background: #eaf2e7;
}
.pf-about__media--primary {
grid-column: 1;
grid-row: 1;
margin: 0;
min-height: clamp(360px, 38vw, 480px);
}
.pf-about__intro {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2rem, 4vw, 3.25rem);
background: var(--pf-panel);
border: 1px solid var(--pf-line);
box-shadow: var(--pf-shadow);
}
.pf-about__features {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(1.5rem, 3vw, 2.25rem);
background: var(--pf-panel);
border: 1px solid var(--pf-line);
box-shadow: 0 12px 34px rgba(29, 64, 97, 0.06);
}
.pf-about__media--secondary {
grid-column: 2;
grid-row: 2;
margin: 0;
min-height: clamp(320px, 32vw, 430px);
}
.pf-about__media .pf-about__img {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
border-radius: var(--pf-radius);
border: 1px solid rgba(29, 64, 97, 0.08);
box-shadow: 0 18px 44px rgba(29, 64, 97, 0.1);
}
.pf-about__media .pf-about__img--portrait {
object-position: center 35%;
}
.pf-about__badge {
display: inline-block;
width: fit-content;
margin-bottom: clamp(0.85rem, 1.5vw, 1.1rem);
padding: 0.42rem 0.72rem;
background: var(--pf-accent-soft);
color: var(--green-deeper);
font-family: 'Sora', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
line-height: 1;
border: 1px solid rgba(63, 140, 69, 0.16);
border-radius: var(--pf-radius);
}
.pf-about__title {
margin: 0 0 clamp(1.1rem, 2.2vw, 1.5rem);
color: var(--pf-ink);
font-family: 'Sora', sans-serif;
font-size: clamp(2rem, 3.2vw, 3.05rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: 0;
max-width: 15ch;
}
.pf-about__lede {
margin: 0 0 clamp(1.35rem, 2.5vw, 1.75rem);
color: var(--pf-muted);
font-size: clamp(0.98rem, 1.2vw, 1.08rem);
line-height: 1.72;
max-width: 40rem;
}
.pf-about__trust {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.55rem 0.85rem;
}
.pf-about__trust li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.48rem 0.68rem;
background: #f9fbf8;
border: 1px solid rgba(29, 64, 97, 0.08);
border-radius: var(--pf-radius);
color: var(--color-primary);
font-size: 0.8rem;
font-weight: 600;
line-height: 1.2;
}
.pf-about__trust i {
color: var(--pf-accent);
font-size: 0.92rem;
}
.pf-about__feat-list {
list-style: none;
margin: 0;
padding: 0;
}
.pf-about__feat-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 0 1rem;
padding: clamp(1rem, 1.9vw, 1.3rem) 0;
border-bottom: 1px solid var(--pf-line);
}
.pf-about__feat-item:first-child {
padding-top: 0;
}
.pf-about__feat-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.pf-about__feat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.65rem;
height: 2.65rem;
margin-top: 0.1rem;
border: 1px solid rgba(63, 140, 69, 0.16);
border-radius: var(--pf-radius);
color: var(--pf-accent);
background: var(--pf-accent-soft);
font-size: 1.05rem;
flex-shrink: 0;
}
.pf-about__feat-title {
margin: 0 0 0.4rem;
color: var(--pf-ink);
font-family: 'Sora', sans-serif;
font-size: clamp(1rem, 1.5vw, 1.12rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0;
}
.pf-about__feat-text {
margin: 0;
color: var(--pf-muted);
font-size: 0.92rem;
line-height: 1.72;
max-width: 30rem;
}
.pf-about__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
margin-top: clamp(1.4rem, 2.6vw, 2rem);
}
.pf-about__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 2.9rem;
padding: 0.72rem 1.15rem;
background: var(--pf-accent);
color: #ffffff;
font-size: 0.86rem;
font-weight: 700;
text-decoration: none;
border: 1px solid var(--pf-accent);
border-radius: var(--pf-radius);
box-shadow: 0 10px 26px rgba(63, 140, 69, 0.24);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.pf-about__cta:hover {
background: var(--green-dark);
border-color: var(--green-dark);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(63, 140, 69, 0.28);
}
.pf-about__cta--ghost {
background: #ffffff;
color: var(--color-primary);
border-color: rgba(29, 64, 97, 0.14);
box-shadow: none;
}
.pf-about__cta--ghost i {
color: var(--pf-accent);
}
.pf-about__cta--ghost:hover {
background: var(--green-light);
border-color: rgba(63, 140, 69, 0.28);
color: var(--green-deeper);
box-shadow: 0 10px 24px rgba(29, 64, 97, 0.08);
}
.pf-about.reveal .pf-about__cell {
opacity: 0;
transform: translateY(22px);
}
.pf-about.reveal.visible .pf-about__cell {
opacity: 1;
transform: translateY(0);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.pf-about.reveal.visible .pf-about__media--primary { transition-delay: 0.04s; }
.pf-about.reveal.visible .pf-about__intro { transition-delay: 0.1s; }
.pf-about.reveal.visible .pf-about__features { transition-delay: 0.18s; }
.pf-about.reveal.visible .pf-about__media--secondary { transition-delay: 0.24s; }
@media (max-width: 991px) {
.pf-about {
padding: clamp(3.25rem, 9vw, 4.75rem) 0;
}
.pf-about__grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.pf-about__media--primary,
.pf-about__intro,
.pf-about__features,
.pf-about__media--secondary {
grid-column: 1;
grid-row: auto;
}
.pf-about__intro {
order: 1;
padding: clamp(1.5rem, 5vw, 2.25rem);
}
.pf-about__media--primary {
order: 2;
min-height: 0;
aspect-ratio: 16 / 10;
}
.pf-about__features {
order: 3;
}
.pf-about__media--secondary {
order: 4;
min-height: 0;
aspect-ratio: 16 / 10;
}
.pf-about__title {
max-width: none;
}
.pf-about__media .pf-about__img {
height: 100%;
}
}
@media (max-width: 575px) {
.pf-about__intro,
.pf-about__features {
padding: 1.25rem;
}
.pf-about__feat-item {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.pf-about__actions {
flex-direction: column;
align-items: stretch;
}
.pf-about__cta {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.pf-about.reveal .pf-about__cell,
.pf-about.reveal.visible .pf-about__cell {
opacity: 1;
transform: none;
transition: none;
}
}
/* Pourquoi flexassurance — reassurance conversion layer */
.pf-about {
--pf-bg: #f5faf2;
--pf-panel: #ffffff;
--pf-ink: var(--color-primary);
--pf-muted: var(--text-muted);
--pf-line: rgba(29, 64, 97, 0.1);
--pf-accent: var(--color-accent);
--pf-accent-dark: var(--green-dark);
--pf-accent-soft: rgba(63, 140, 69, 0.12);
--pf-radius: 8px;
--pf-shadow: 0 22px 58px rgba(29, 64, 97, 0.11);
padding: clamp(4.5rem, 7vw, 6.75rem) 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0) 24%),
linear-gradient(90deg, rgba(29, 64, 97, 0.035) 1px, transparent 1px),
linear-gradient(180deg, rgba(29, 64, 97, 0.03) 1px, transparent 1px),
var(--pf-bg);
background-size: auto, 44px 44px, 44px 44px, auto;
color: var(--pf-ink);
border-top: 1px solid rgba(63, 140, 69, 0.14);
border-bottom: 1px solid rgba(29, 64, 97, 0.08);
}
.pf-about::before {
height: 5px;
background: linear-gradient(90deg, var(--pf-accent), rgba(63, 140, 69, 0.18), transparent);
}
.pf-about > .container {
max-width: 1200px;
}
.pf-about__shell {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: clamp(2rem, 5vw, 4.75rem);
align-items: center;
}
.pf-about__story {
max-width: 34rem;
}
.pf-about__badge {
margin-bottom: clamp(1rem, 1.8vw, 1.25rem);
background: #ffffff;
color: var(--green-deeper);
box-shadow: 0 8px 22px rgba(63, 140, 69, 0.08);
}
.pf-about__title {
max-width: 13ch;
font-size: clamp(2.35rem, 4.25vw, 4.2rem);
line-height: 1.03;
color: var(--pf-ink);
letter-spacing: 0;
}
.pf-about__lede {
max-width: 31rem;
font-size: clamp(1rem, 1.25vw, 1.12rem);
line-height: 1.72;
}
.pf-about__trust {
gap: 0.62rem;
}
.pf-about__trust li {
background: rgba(255, 255, 255, 0.82);
border-color: rgba(63, 140, 69, 0.2);
box-shadow: 0 8px 20px rgba(29, 64, 97, 0.05);
}
.pf-about__actions {
margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.pf-about__cta {
min-height: 3.15rem;
padding: 0.82rem 1.2rem;
border-radius: var(--pf-radius);
font-size: 0.9rem;
box-shadow: 0 14px 30px rgba(63, 140, 69, 0.24);
}
.pf-about__cta--ghost {
background: rgba(255, 255, 255, 0.74);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.pf-about__experience {
position: relative;
min-height: clamp(430px, 45vw, 560px);
min-width: 0;
}
.pf-about__photo {
position: relative;
width: min(76%, 500px);
height: 100%;
min-height: clamp(430px, 45vw, 560px);
margin: 0;
overflow: hidden;
border-radius: var(--pf-radius);
background: #dfeade;
border: 1px solid rgba(29, 64, 97, 0.1);
box-shadow: var(--pf-shadow);
}
.pf-about__photo::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 42%;
background: linear-gradient(180deg, transparent, rgba(29, 64, 97, 0.5));
pointer-events: none;
}
.pf-about__photo .pf-about__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
border-radius: var(--pf-radius);
}
.pf-about__advisor {
position: absolute;
left: clamp(1rem, 2vw, 1.35rem);
right: clamp(1rem, 2vw, 1.35rem);
bottom: clamp(1rem, 2vw, 1.35rem);
z-index: 2;
display: flex;
gap: 0.85rem;
align-items: flex-start;
padding: 0.95rem 1rem;
color: var(--pf-ink);
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: var(--pf-radius);
box-shadow: 0 16px 36px rgba(29, 64, 97, 0.18);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
font-size: 0.9rem;
line-height: 1.45;
}
.pf-about__advisor strong {
display: block;
color: var(--green-deeper);
font-family: 'Sora', sans-serif;
font-size: 0.92rem;
line-height: 1.25;
margin-bottom: 0.12rem;
}
.pf-about__advisor-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
flex: 0 0 2.35rem;
color: #ffffff;
background: var(--pf-accent);
border-radius: var(--pf-radius);
box-shadow: 0 10px 20px rgba(63, 140, 69, 0.2);
}
.pf-about__panel {
position: absolute;
top: 50%;
right: 0;
z-index: 3;
width: min(360px, 55%);
margin-left: 0;
padding: clamp(1.2rem, 2.4vw, 1.65rem);
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(29, 64, 97, 0.11);
border-radius: var(--pf-radius);
box-shadow: 0 24px 54px rgba(29, 64, 97, 0.16);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transform: translateY(-50%);
}
.pf-about__panel-head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-end;
margin-bottom: 1rem;
}
.pf-about__panel-kicker {
color: var(--text-muted);
font-size: 0.76rem;
font-weight: 700;
}
.pf-about__panel-head strong {
color: var(--green-deeper);
font-family: 'Sora', sans-serif;
font-size: 1rem;
line-height: 1.2;
}
.pf-about__meter {
height: 0.55rem;
padding: 0.12rem;
margin-bottom: 1rem;
background: #edf4ea;
border-radius: 999px;
overflow: hidden;
}
.pf-about__meter span {
display: block;
width: 78%;
height: 100%;
background: linear-gradient(90deg, var(--pf-accent), #65ad69);
border-radius: inherit;
animation: pf-meter-breathe 3.2s ease-in-out infinite alternate;
}
.pf-about__checklist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.65rem;
}
.pf-about__checklist li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
padding: 0.78rem 0.85rem;
background: #f8fbf7;
border: 1px solid rgba(29, 64, 97, 0.08);
border-radius: var(--pf-radius);
color: var(--pf-ink);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.pf-about__checklist li:hover {
transform: translateY(-2px);
border-color: rgba(63, 140, 69, 0.24);
background: #ffffff;
}
.pf-about__checklist span {
display: inline-flex;
gap: 0.45rem;
align-items: center;
font-weight: 700;
font-size: 0.88rem;
}
.pf-about__checklist i {
color: var(--pf-accent);
font-size: 1rem;
}
.pf-about__checklist strong {
color: var(--text-muted);
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
}
.pf-about__note {
display: flex;
gap: 0.7rem;
align-items: flex-start;
margin-top: 1rem;
padding: 0.95rem;
color: var(--green-deeper);
background: rgba(63, 140, 69, 0.1);
border: 1px solid rgba(63, 140, 69, 0.18);
border-radius: var(--pf-radius);
}
.pf-about__note i {
margin-top: 0.12rem;
color: var(--pf-accent);
font-size: 1.05rem;
}
.pf-about__note p {
margin: 0;
color: var(--green-deeper);
font-size: 0.88rem;
line-height: 1.5;
}
.pf-about__flow {
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.85rem, 1.8vw, 1.2rem);
margin: clamp(1.25rem, 3vw, 2rem) 0 0;
padding: 0;
}
.pf-about__flow li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem 0.85rem;
padding: 1.15rem;
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(29, 64, 97, 0.09);
border-radius: var(--pf-radius);
box-shadow: 0 12px 28px rgba(29, 64, 97, 0.05);
}
.pf-about__flow span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
grid-row: span 2;
color: #ffffff;
background: var(--pf-accent);
border-radius: var(--pf-radius);
font-family: 'Sora', sans-serif;
font-size: 0.82rem;
font-weight: 800;
}
.pf-about__flow strong {
color: var(--pf-ink);
font-family: 'Sora', sans-serif;
font-size: 0.98rem;
line-height: 1.25;
}
.pf-about__flow p {
margin: 0;
color: var(--pf-muted);
font-size: 0.88rem;
line-height: 1.55;
}
.pf-about.reveal .pf-about__story,
.pf-about.reveal .pf-about__experience,
.pf-about.reveal .pf-about__flow li {
opacity: 0;
transform: translateY(20px);
}
.pf-about.reveal.visible .pf-about__story,
.pf-about.reveal.visible .pf-about__experience,
.pf-about.reveal.visible .pf-about__flow li {
opacity: 1;
transform: translateY(0);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.pf-about.reveal.visible .pf-about__experience { transition-delay: 0.08s; }
.pf-about.reveal.visible .pf-about__flow li:nth-child(1) { transition-delay: 0.14s; }
.pf-about.reveal.visible .pf-about__flow li:nth-child(2) { transition-delay: 0.2s; }
.pf-about.reveal.visible .pf-about__flow li:nth-child(3) { transition-delay: 0.26s; }
@keyframes pf-meter-breathe {
from { width: 68%; }
to { width: 84%; }
}
@media (max-width: 991px) {
.pf-about__shell,
.pf-about__flow {
grid-template-columns: 1fr;
}
.pf-about__experience {
display: grid;
min-height: 0;
}
.pf-about__story {
max-width: 42rem;
}
.pf-about__title {
max-width: 16ch;
}
.pf-about__photo {
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 16 / 11;
}
.pf-about__panel {
position: relative;
top: auto;
right: auto;
width: calc(100% - 2rem);
margin: -2.5rem auto 0;
transform: none;
}
}
@media (max-width: 575px) {
.pf-about {
padding: clamp(3.25rem, 10vw, 4.5rem) 0;
}
.pf-about__title {
font-size: clamp(2rem, 10vw, 2.6rem);
}
.pf-about__actions,
.pf-about__checklist li {
align-items: stretch;
}
.pf-about__checklist li {
flex-direction: column;
gap: 0.35rem;
}
.pf-about__advisor {
position: relative;
left: auto;
right: auto;
bottom: auto;
margin: -4.25rem 0.85rem 0.85rem;
}
.pf-about__panel {
width: 100%;
margin-top: 0.85rem;
}
}
@media (prefers-reduced-motion: reduce) {
.pf-about__meter span {
animation: none;
}
.pf-about.reveal .pf-about__story,
.pf-about.reveal .pf-about__experience,
.pf-about.reveal .pf-about__flow li,
.pf-about.reveal.visible .pf-about__story,
.pf-about.reveal.visible .pf-about__experience,
.pf-about.reveal.visible .pf-about__flow li {
opacity: 1;
transform: none;
transition: none;
}
}
/* Pourquoi flexassurance — focused, lighter conversion edit */
.pf-about {
padding: clamp(3.75rem, 6vw, 5.25rem) 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0) 36%),
#f6faf4;
border-top: 1px solid rgba(63, 140, 69, 0.12);
border-bottom: 1px solid rgba(29, 64, 97, 0.08);
}
.pf-about::before {
height: 3px;
background: linear-gradient(90deg, rgba(63, 140, 69, 0.75), rgba(63, 140, 69, 0.18), transparent);
}
.pf-about > .container {
max-width: 1120px;
}
.pf-about__shell--focused {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.pf-about__shell--focused .pf-about__story {
max-width: 33rem;
}
.pf-about__shell--focused .pf-about__title {
max-width: 12ch;
margin-bottom: 1rem;
font-size: clamp(2.15rem, 3.7vw, 3.55rem);
line-height: 1.06;
}
.pf-about__shell--focused .pf-about__lede {
max-width: 30rem;
margin-bottom: 1.25rem;
font-size: clamp(0.98rem, 1.12vw, 1.06rem);
line-height: 1.68;
}
.pf-about__shell--focused .pf-about__actions {
margin-top: clamp(1.3rem, 2.5vw, 1.8rem);
}
.pf-about__summary {
position: relative;
padding: clamp(1.35rem, 3vw, 2rem);
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(29, 64, 97, 0.1);
border-radius: var(--pf-radius);
box-shadow: 0 18px 44px rgba(29, 64, 97, 0.08);
}
.pf-about__summary::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg, var(--color-accent), rgba(63, 140, 69, 0.12));
border-radius: var(--pf-radius) 0 0 var(--pf-radius);
}
.pf-about__summary-head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-end;
padding-left: 0.35rem;
margin-bottom: 1.1rem;
}
.pf-about__summary-head span {
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 700;
}
.pf-about__summary-head strong {
color: var(--green-deeper);
font-family: 'Sora', sans-serif;
font-size: 1rem;
line-height: 1.2;
}
.pf-about__steps {
list-style: none;
display: grid;
gap: 0.85rem;
margin: 0;
padding: 0;
counter-reset: pf-step;
}
.pf-about__steps li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.9rem;
align-items: flex-start;
padding: 1rem;
background: #f9fbf8;
border: 1px solid rgba(29, 64, 97, 0.08);
border-radius: var(--pf-radius);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.pf-about__steps li:hover {
transform: translateY(-2px);
background: #ffffff;
border-color: rgba(63, 140, 69, 0.22);
}
.pf-about__step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.55rem;
height: 2.55rem;
color: var(--color-accent);
background: rgba(63, 140, 69, 0.11);
border: 1px solid rgba(63, 140, 69, 0.16);
border-radius: var(--pf-radius);
font-size: 1.05rem;
}
.pf-about__steps strong {
display: block;
margin-bottom: 0.25rem;
color: var(--color-primary);
font-family: 'Sora', sans-serif;
font-size: 1rem;
line-height: 1.25;
}
.pf-about__steps p {
margin: 0;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.52;
}
.pf-about__micro-note {
display: flex;
gap: 0.65rem;
align-items: flex-start;
margin-top: 1rem;
padding: 0.9rem 1rem;
color: var(--green-deeper);
background: rgba(63, 140, 69, 0.09);
border: 1px solid rgba(63, 140, 69, 0.16);
border-radius: var(--pf-radius);
font-size: 0.9rem;
line-height: 1.48;
}
.pf-about__micro-note i {
margin-top: 0.15rem;
color: var(--color-accent);
}
.pf-about.reveal .pf-about__summary {
opacity: 0;
transform: translateY(18px);
}
.pf-about.reveal.visible .pf-about__summary {
opacity: 1;
transform: translateY(0);
transition: opacity 0.55s ease 0.08s, transform 0.55s ease 0.08s;
}
@media (max-width: 991px) {
.pf-about__shell--focused {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.pf-about__shell--focused .pf-about__story,
.pf-about__shell--focused .pf-about__title,
.pf-about__shell--focused .pf-about__lede {
max-width: none;
}
}
@media (max-width: 575px) {
.pf-about__summary-head {
display: block;
}
.pf-about__summary-head strong {
display: block;
margin-top: 0.25rem;
}
.pf-about__steps li {
padding: 0.9rem;
}
}
/* Pourquoi flexassurance — screen-inspired dark assurance band */
.pf-about--screen {
--pf-screen-bg: var(--green-deeper, #26542a);
--pf-screen-bg-deep: #173f2a;
--pf-screen-ink: #ffffff;
--pf-screen-muted: rgba(255, 255, 255, 0.68);
--pf-screen-accent: #7ee08a;
padding: clamp(3.75rem, 6vw, 5.5rem) 0 clamp(2.75rem, 4.5vw, 4rem);
background: #0e2506;
color: var(--pf-screen-ink);
border: 0;
}
.pf-about--screen::before {
content: none;
}
.pf-about--screen > .container {
max-width: 1200px;
}
.pf-screen__top {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
}
.pf-screen__copy {
padding-top: clamp(0.5rem, 1.5vw, 1.4rem);
max-width: 42rem;
}
.pf-screen__eyebrow {
display: inline-block;
margin-bottom: 1.25rem;
color: var(--pf-screen-accent);
font-family: 'Sora', sans-serif;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.pf-about--screen .pf-about__title {
max-width: 18ch;
margin-bottom: 1.1rem;
color: #ffffff;
font-size: clamp(2.25rem, 3.7vw, 3.75rem);
line-height: 1.05;
letter-spacing: 0;
}
.pf-about--screen .pf-about__lede {
max-width: 40rem;
margin-bottom: 1.5rem;
color: var(--pf-screen-muted);
font-size: clamp(1rem, 1.25vw, 1.1rem);
line-height: 1.78;
}
.pf-about--screen .pf-about__actions {
margin-top: clamp(1.4rem, 2.5vw, 1.9rem);
}
.pf-about--screen .pf-about__cta {
background: var(--pf-screen-accent);
border-color: var(--pf-screen-accent);
color: var(--green-deeper);
box-shadow: 0 16px 30px rgba(126, 224, 138, 0.18);
}
.pf-about--screen .pf-about__cta:hover {
background: #ffffff;
border-color: #ffffff;
color: var(--green-deeper);
}
.pf-about--screen .pf-about__cta--ghost {
background: transparent;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.32);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.pf-about--screen .pf-about__cta--ghost i {
color: var(--pf-screen-accent);
}
.pf-about--screen .pf-about__cta--ghost:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.52);
color: #ffffff;
}
.pf-screen__media {
position: relative;
margin: 0;
isolation: isolate;
}
.pf-screen__media-frame {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
min-height: clamp(260px, 28vw, 400px);
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(126, 224, 138, 0.28);
box-shadow:
0 28px 64px rgba(0, 0, 0, 0.34),
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
-18px 0 48px rgba(126, 224, 138, 0.08);
}
.pf-screen__media-frame .pf-screen__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
min-height: 0;
object-fit: cover;
object-position: 55% 38%;
transform: scale(1.02);
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.pf-screen__media-tags {
position: absolute;
top: clamp(0.75rem, 1.8vw, 1.1rem);
right: clamp(0.75rem, 1.8vw, 1.1rem);
z-index: 3;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.4rem;
max-width: calc(100% - 1.5rem);
margin: 0;
padding: 0;
list-style: none;
}
.pf-screen__media-tags li {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.38rem 0.62rem;
background: rgba(14, 37, 6, 0.72);
border: 1px solid rgba(126, 224, 138, 0.38);
border-radius: 999px;
color: #ffffff;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.pf-screen__media-tags i {
color: var(--pf-screen-accent);
font-size: 0.78rem;
}
.pf-about--screen:hover .pf-screen__media-frame .pf-screen__img,
.pf-about--screen:focus-within .pf-screen__media-frame .pf-screen__img {
transform: scale(1.06);
}
/* Fade toward copy — lighter so the photo stays visible */
.pf-screen__media-shade {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(95deg, rgba(14, 37, 6, 0.82) 0%, rgba(14, 37, 6, 0.45) 24%, rgba(14, 37, 6, 0.08) 52%, transparent 68%),
linear-gradient(180deg, transparent 62%, rgba(14, 37, 6, 0.35) 100%);
pointer-events: none;
}
.pf-screen__media-accent {
position: absolute;
left: 0;
top: 12%;
bottom: 12%;
z-index: 2;
width: 4px;
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg, transparent, var(--pf-screen-accent), transparent);
box-shadow: 0 0 24px rgba(126, 224, 138, 0.45);
pointer-events: none;
}
.pf-screen__media-chip {
position: absolute;
left: clamp(0.85rem, 2vw, 1.25rem);
bottom: clamp(0.85rem, 2vw, 1.35rem);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.65rem;
max-width: calc(100% - 1.75rem);
padding: 0.62rem 0.85rem 0.62rem 0.62rem;
background: rgba(255, 255, 255, 0.96);
border-radius: 999px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.pf-screen__media-chip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.15rem;
height: 2.15rem;
flex-shrink: 0;
border-radius: 50%;
background: var(--pf-screen-accent);
color: var(--green-deeper);
font-size: 1rem;
}
.pf-screen__media-chip-copy {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
color: var(--green-deeper);
font-size: 0.72rem;
line-height: 1.25;
}
.pf-screen__media-chip-copy strong {
font-family: 'Sora', sans-serif;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.01em;
}
.pf-screen__media-chip-copy span {
color: #3d5a48;
font-weight: 600;
}
.pf-screen__media-pointer {
position: absolute;
left: clamp(-0.15rem, -1.2vw, -0.65rem);
top: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.4rem 0.65rem 0.4rem 0.45rem;
background: rgba(14, 37, 6, 0.82);
border: 1px solid rgba(126, 224, 138, 0.45);
border-radius: 999px;
color: var(--pf-screen-accent);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
transform: translate(-100%, -50%);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
animation: pf-screen-pointer-nudge 2.8s ease-in-out infinite;
}
.pf-screen__media-pointer i {
font-size: 1.35rem;
line-height: 1;
}
@keyframes pf-screen-pointer-nudge {
0%, 100% { transform: translate(calc(-100% - 0px), -50%); }
50% { transform: translate(calc(-100% - 6px), -50%); }
}
.pf-screen__benefits {
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.4rem, 3.4vw, 3.75rem);
margin: clamp(2.5rem, 5vw, 4rem) 0 0;
padding: 0;
}
.pf-screen__benefits li {
min-width: 0;
}
.pf-screen__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.65rem;
height: 3.65rem;
margin-bottom: 1.25rem;
color: var(--pf-screen-accent);
font-size: 2.55rem;
line-height: 1;
}
.pf-screen__benefits h3 {
margin: 0 0 0.85rem;
color: #ffffff;
font-family: 'Sora', sans-serif;
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
font-weight: 800;
line-height: 1.25;
letter-spacing: 0;
}
.pf-screen__benefits p {
margin: 0;
color: var(--pf-screen-muted);
font-size: 0.96rem;
line-height: 1.72;
}
.pf-screen__rule {
position: relative;
height: 1px;
margin-top: clamp(2rem, 3.5vw, 3rem);
background: rgba(255, 255, 255, 0.45);
}
.pf-screen__rule::before,
.pf-screen__rule::after {
content: "";
position: absolute;
top: 50%;
width: 0.42rem;
height: 0.42rem;
background: var(--pf-screen-accent);
transform: translateY(-50%);
}
.pf-screen__rule::before {
left: 0;
}
.pf-screen__rule::after {
right: 0;
}
.pf-about--screen.reveal .pf-screen__copy,
.pf-about--screen.reveal .pf-screen__media,
.pf-about--screen.reveal .pf-screen__benefits li {
opacity: 0;
transform: translateY(20px);
}
.pf-about--screen.reveal.visible .pf-screen__copy,
.pf-about--screen.reveal.visible .pf-screen__media,
.pf-about--screen.reveal.visible .pf-screen__benefits li {
opacity: 1;
transform: translateY(0);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.pf-about--screen.reveal.visible .pf-screen__media { transition-delay: 0.08s; }
.pf-about--screen.reveal.visible .pf-screen__benefits li:nth-child(1) { transition-delay: 0.14s; }
.pf-about--screen.reveal.visible .pf-screen__benefits li:nth-child(2) { transition-delay: 0.2s; }
.pf-about--screen.reveal.visible .pf-screen__benefits li:nth-child(3) { transition-delay: 0.26s; }
.pf-about--screen.reveal.visible .pf-screen__benefits li:nth-child(4) { transition-delay: 0.32s; }
@media (max-width: 991px) {
.pf-screen__top {
grid-template-columns: 1fr;
gap: 2rem;
}
.pf-about--screen .pf-about__title,
.pf-about--screen .pf-about__lede {
max-width: none;
}
.pf-screen__media {
max-width: 640px;
margin-inline: auto;
}
.pf-screen__media-frame {
min-height: 0;
aspect-ratio: 16 / 11;
}
.pf-screen__media-frame .pf-screen__img {
object-position: 50% 32%;
}
.pf-screen__media-tags {
top: 0.65rem;
right: 0.65rem;
gap: 0.3rem;
}
.pf-screen__media-tags li {
font-size: 0.62rem;
padding: 0.32rem 0.52rem;
}
.pf-screen__benefits {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
}
@media (max-width: 575px) {
.pf-about--screen {
padding: clamp(3.25rem, 10vw, 4.5rem) 0;
}
.pf-about--screen .pf-about__title {
font-size: clamp(2rem, 10vw, 2.65rem);
}
.pf-screen__media-pointer {
display: none;
}
.pf-screen__media-frame {
aspect-ratio: 4 / 3;
}
.pf-screen__media-chip {
left: 0.75rem;
right: 0.75rem;
bottom: 0.75rem;
max-width: none;
}
.pf-screen__benefits {
grid-template-columns: 1fr;
gap: 1.85rem;
}
.pf-screen__icon {
margin-bottom: 0.85rem;
}
}
@media (prefers-reduced-motion: reduce) {
.pf-about--screen.reveal .pf-screen__copy,
.pf-about--screen.reveal .pf-screen__media,
.pf-about--screen.reveal .pf-screen__benefits li,
.pf-about--screen.reveal.visible .pf-screen__copy,
.pf-about--screen.reveal.visible .pf-screen__media,
.pf-about--screen.reveal.visible .pf-screen__benefits li {
opacity: 1;
transform: none;
transition: none;
}
.pf-screen__media-pointer {
animation: none;
}
.pf-about--screen:hover .pf-screen__media-frame .pf-screen__img,
.pf-about--screen:focus-within .pf-screen__media-frame .pf-screen__img {
transform: scale(1.02);
}
}
.conv-pillars-strip {
list-style: none;
margin: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1.5rem, 3vw, 2.25rem);
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.5rem, 1.2vw, 1rem);
width: 100%;
position: relative;
z-index: 1;
}
.conv-pillars-strip--mobile {
display: none;
}
.conv-pillar {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
padding: clamp(1rem, 1.5vw, 1.4rem) clamp(0.95rem, 1.4vw, 1.3rem) clamp(1rem, 1.5vw, 1.4rem);
background: var(--conv-card-bg, #fff);
border: 1px solid var(--conv-chip-border, var(--border));
border-radius: 16px;
box-shadow: var(--conv-card-shadow, 0 10px 28px rgba(29, 64, 97, 0.07));
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
overflow: hidden;
min-width: 0;
}
.conv-pillar:hover {
transform: translateY(-5px);
box-shadow: 0 26px 56px rgba(63, 140, 69, 0.16), 0 4px 12px rgba(29, 64, 97, 0.06);
border-color: var(--color-accent);
}
.conv-pillar::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--color-accent), transparent 70%);
opacity: 0.22;
transform: translate(28px, -28px) rotate(45deg);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.conv-pillar:hover::after {
opacity: 0.45;
transform: translate(22px, -22px) rotate(45deg);
}
.conv-pillar-icon {
width: clamp(34px, 3.2vw, 42px);
height: clamp(34px, 3.2vw, 42px);
border-radius: 12px;
background: var(--color-accent-muted);
color: var(--color-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: clamp(0.9rem, 1.3vw, 1.1rem);
margin-bottom: 0.5rem;
box-shadow: inset 0 0 0 1px rgba(63, 140, 69, 0.2);
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.conv-pillar:hover .conv-pillar-icon {
background: var(--color-accent);
color: #ffffff;
transform: scale(1.08) rotate(-4deg);
}
.conv-pillar:nth-child(2) .conv-pillar-icon {
background: rgba(63, 140, 69, 0.16);
color: var(--color-accent);
}
.conv-pillar:nth-child(3) .conv-pillar-icon {
background: rgba(29, 64, 97, 0.07);
color: var(--color-primary);
}
.conv-pillar-num {
font-family: 'Sora', system-ui, sans-serif;
font-size: clamp(0.95rem, 1.5vw, 1.25rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.025em;
line-height: 1.1;
word-break: break-word;
}
.conv-pillar-label {
font-size: clamp(0.7rem, 0.85vw, 0.78rem);
color: var(--text-muted);
line-height: 1.35;
font-weight: 500;
}
/* ─── Zigzag blocks rendered as elevated white cards ─── */
.conv-trust-split .conv-zigzag {
background: var(--conv-card-bg);
border: 1px solid rgba(63, 140, 69, 0.16);
border-radius: 26px;
padding: clamp(1.6rem, 3.5vw, 2.6rem);
box-shadow: var(--conv-card-shadow);
gap: clamp(1.6rem, 3.2vw, 2.8rem);
position: relative;
overflow: hidden;
margin-top: clamp(1.5rem, 3vw, 2.25rem);
transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}
.conv-trust-split .conv-zigzag:hover {
transform: translateY(-4px);
box-shadow: 0 32px 64px rgba(63, 140, 69, 0.16), 0 6px 16px rgba(29, 64, 97, 0.08);
border-color: rgba(63, 140, 69, 0.4);
}
/* Green gradient corner accent */
.conv-trust-split .conv-zigzag::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 5px;
background: linear-gradient(90deg, var(--color-accent), #5aae60, transparent);
border-radius: 0 0 6px 0;
}
.conv-trust-split .conv-zigzag--media-right::before {
left: auto;
right: 0;
background: linear-gradient(270deg, var(--color-accent), #5aae60, transparent);
border-radius: 0 0 0 6px;
}
/* Subtle decorative green ring inside each card */
.conv-trust-split .conv-zigzag::after {
content: "";
position: absolute;
bottom: -80px;
right: -80px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(63, 140, 69, 0.10) 0%, rgba(63, 140, 69, 0) 70%);
pointer-events: none;
}
.conv-trust-split .conv-zigzag--media-right::after {
right: auto;
left: -80px;
}
.conv-trust-split .conv-zig-img {
width: 100%;
max-width: 480px;
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
border-radius: 20px;
border: 1px solid rgba(63, 140, 69, 0.18);
box-shadow: 0 18px 40px rgba(29, 64, 97, 0.14), 0 4px 12px rgba(63, 140, 69, 0.10);
margin: 0;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.conv-trust-split .conv-zigzag:hover .conv-zig-img {
transform: scale(1.02);
box-shadow: 0 24px 50px rgba(29, 64, 97, 0.18), 0 8px 18px rgba(63, 140, 69, 0.14);
}
.conv-trust-split .conv-zig-title {
font-size: clamp(1.32rem, 2.5vw, 1.7rem);
letter-spacing: -0.022em;
color: var(--conv-heading);
}
.conv-trust-split .conv-zig-text {
color: var(--conv-muted);
font-size: 0.95rem;
line-height: 1.72;
}
/* Primary in-card CTA: green solid with shimmer on hover */
.conv-trust-split .conv-zig-cta {
background: var(--color-accent);
color: var(--white);
border: 1px solid transparent;
box-shadow: 0 12px 28px var(--accent-cta-shadow);
position: relative;
overflow: hidden;
}
.conv-trust-split .conv-zig-cta::after {
content: "";
position: absolute;
top: 0; left: -120%;
width: 80%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
transform: skewX(-22deg);
transition: left 0.55s ease;
pointer-events: none;
}
.conv-trust-split .conv-zig-cta:hover {
background: var(--green-dark);
box-shadow: 0 16px 36px rgba(63, 140, 69, 0.45);
color: var(--white);
transform: translateY(-2px);
}
.conv-trust-split .conv-zig-cta:hover::after {
left: 120%;
}
/* Outline CTA: green outline → solid green on hover */
.conv-trust-split .conv-zig-cta.conv-zig-cta--outline {
background: transparent;
color: var(--color-primary);
border: 1.5px solid rgba(63, 140, 69, 0.36);
box-shadow: none;
}
.conv-trust-split .conv-zig-cta.conv-zig-cta--outline i {
color: var(--color-accent);
transition: color 0.2s ease;
}
.conv-trust-split .conv-zig-cta.conv-zig-cta--outline:hover {
background: var(--color-accent);
color: var(--white);
border-color: var(--color-accent);
box-shadow: 0 12px 26px rgba(63, 140, 69, 0.28);
}
.conv-trust-split .conv-zig-cta.conv-zig-cta--outline:hover i {
color: #ffffff;
}
.conv-trust-split .conv-zig-features li {
padding: 1.05rem 0 1.15rem;
border-bottom: 1px dashed rgba(63, 140, 69, 0.22);
transition: transform 0.22s ease, padding-left 0.22s ease;
}
.conv-trust-split .conv-zig-features li:hover {
padding-left: 8px;
}
.conv-trust-split .conv-zig-feat-title {
color: var(--conv-heading);
font-size: 1.02rem;
position: relative;
padding-left: 18px;
}
.conv-trust-split .conv-zig-feat-title::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 3px var(--tint-accent-12);
}
.conv-trust-split .conv-zig-feat-text {
color: var(--conv-muted);
padding-left: 18px;
}
/* Quieter, palette-aligned float badges — all green-themed with motion */
.conv-trust-split .conv-float-badge {
width: 40px;
height: 40px;
box-shadow: 0 10px 20px rgba(63, 140, 69, 0.28);
border: 2px solid var(--white);
font-size: 0.95rem;
animation: float-soft 4.5s ease-in-out infinite;
}
.conv-trust-split .conv-float-badge--mint {
background: var(--color-accent);
color: var(--white);
}
.conv-trust-split .conv-float-badge--blue {
background: var(--color-primary);
color: var(--color-accent);
width: 44px;
height: 44px;
animation-delay: 0.6s;
}
.conv-trust-split .conv-float-badge--accent {
background: var(--color-accent);
color: #ffffff;
animation-delay: 0.3s;
}
.conv-trust-split .conv-float-badge--handshake {
background: var(--color-primary);
color: var(--white);
width: 44px;
height: 44px;
animation-delay: 0.9s;
}
/* Scroll-hint kept understated on the light band */
.conv-trust-split .conv-scroll-hint {
border-bottom-color: rgba(29, 64, 97, 0.22);
color: var(--color-primary-soft);
}
.conv-trust-split .conv-scroll-hint:hover {
color: var(--color-primary);
border-bottom-color: var(--color-accent);
}
.conv-contact-strip {
position: relative;
margin: clamp(1.7rem, 3vw, 2.25rem) auto 0;
max-width: 760px;
min-height: 98px;
display: flex;
align-items: center;
gap: 16px;
background: var(--color-cta-warm);
border-radius: 14px;
padding: 14px 18px 14px 96px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
z-index: 2;
}
.conv-contact-avatar-wrap {
position: absolute;
left: -16px;
top: 50%;
transform: translateY(-50%);
width: 92px;
height: 92px;
border-radius: 50%;
padding: 4px;
background: rgba(255, 255, 255, 0.22);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.conv-contact-avatar,
img.conv-contact-avatar,
.flexassur-photo.conv-contact-avatar {
width: 100%;
height: 100%;
max-width: none;
border-radius: 50%;
object-fit: cover;
display: block;
border: 2px solid rgba(255, 255, 255, 0.82);
}
.conv-contact-body h3 {
margin: 0 0 4px;
font-size: 1.05rem;
font-weight: 800;
color: #1f1402;
}
.conv-contact-body p {
margin: 0;
font-size: 0.82rem;
color: rgba(31, 20, 2, 0.86);
line-height: 1.45;
max-width: 520px;
}
.conv-contact-btn {
margin-top: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #121923;
color: #fff;
text-decoration: none;
font-size: 0.78rem;
font-weight: 700;
padding: 8px 18px;
transition: transform 0.16s ease, box-shadow 0.2s ease;
box-shadow: 0 8px 20px rgba(18, 25, 35, 0.3);
}
.conv-contact-btn:hover {
transform: translateY(-1px);
color: #fff;
box-shadow: 0 10px 24px rgba(18, 25, 35, 0.42);
}
@media (max-width: 991px) {
.conv-trust-split .conv-zig-img {
width: min(520px, 92vw);
max-width: 520px;
}
.conv-zigzag--media-left .conv-zigzag-media,
.conv-zigzag--media-right .conv-zigzag-media {
max-width: 560px;
}
.conv-contact-strip {
max-width: 92%;
padding-left: 90px;
}
}
@media (max-width: 640px) {
.conv-contact-strip {
padding: 18px 14px 14px;
min-height: 0;
}
.conv-contact-avatar-wrap {
position: static;
transform: none;
width: 72px;
height: 72px;
flex-shrink: 0;
}
.conv-contact-strip {
display: grid;
grid-template-columns: 72px 1fr;
gap: 10px 12px;
align-items: center;
}
.conv-contact-body {
grid-column: 2;
}
.conv-contact-btn {
grid-column: 1 / -1;
justify-self: start;
}
}
/* ════════════════════════════════════
PURPOSE / “À quoi sert flexassurance”
════════════════════════════════════ */
.conv-purpose {
background: var(--white);
padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
border-top: 1px solid var(--border);
}
.conv-purpose-head {
max-width: 52rem;
margin: 0 auto clamp(2rem, 4vw, 3rem);
text-align: center;
}
.conv-purpose-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.9rem;
border-radius: 999px;
background: rgba(66, 181, 165, 0.12);
color: var(--color-accent);
letter-spacing: 0.12em;
}
.conv-purpose-eyebrow i {
font-size: 0.95rem;
}
.conv-purpose-title {
font-size: clamp(1.6rem, 3.4vw, 2.35rem);
line-height: 1.18;
margin: 0.65rem auto 0.85rem;
}
.conv-purpose-title-accent {
color: var(--color-accent);
white-space: nowrap;
}
.conv-purpose-lede {
font-size: clamp(0.95rem, 1.6vw, 1.05rem);
line-height: 1.72;
color: var(--text-muted);
margin: 0 auto;
max-width: 44rem;
}
.conv-purpose-lede strong {
color: var(--text-main);
}
.conv-purpose-pills {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 0.6rem;
}
.conv-purpose-pills li {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--color-primary);
background: #fff;
border: 1px solid rgba(12, 61, 92, 0.12);
padding: 0.5rem 0.9rem;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(12, 61, 92, 0.07);
}
.conv-purpose-pills i {
color: var(--color-accent);
font-size: 1rem;
}
.conv-purpose-block {
margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
max-width: 1080px;
}
.conv-purpose-block-head {
text-align: center;
max-width: 44rem;
margin: 0 auto 1.75rem;
}
.conv-purpose-block-head--steps { margin-bottom: 2rem; }
.conv-purpose-h3 {
font-family: 'Sora', sans-serif;
font-size: clamp(1.2rem, 2.4vw, 1.55rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
line-height: 1.25;
margin: 0 0 0.55rem;
}
.conv-purpose-h3-sub {
font-size: 0.92rem;
line-height: 1.65;
color: var(--text-muted);
margin: 0;
}
.conv-purpose-h3-sub strong { color: var(--text-main); }
/* Situations — 2x2 cards with colored icon tile */
.conv-situations {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(0.9rem, 2vw, 1.25rem);
}
@media (max-width: 767px) {
.conv-situations { grid-template-columns: 1fr; }
}
.conv-situation {
position: relative;
display: flex;
gap: 1rem;
align-items: flex-start;
background: #fff;
border: 1px solid rgba(12, 61, 92, 0.1);
border-radius: 18px;
padding: clamp(1.1rem, 2.2vw, 1.45rem);
box-shadow: 0 8px 24px rgba(12, 61, 92, 0.06);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s ease;
overflow: hidden;
}
.conv-situation::before {
content: "";
position: absolute;
inset: auto -30px -40px auto;
width: 140px;
height: 140px;
border-radius: 50%;
background: var(--situation-accent, rgba(66, 181, 165, 0.1));
opacity: 0.45;
pointer-events: none;
transition: transform 0.25s ease;
}
.conv-situation:hover {
transform: translateY(-4px);
box-shadow: 0 22px 48px rgba(63, 140, 69, 0.14);
border-color: var(--color-accent);
}
.conv-situation:hover::before {
transform: scale(1.08);
}
.conv-situation--auto { --situation-accent: rgba(37, 99, 235, 0.16); }
.conv-situation--home { --situation-accent: rgba(225, 29, 72, 0.14); }
.conv-situation--health { --situation-accent: rgba(22, 163, 74, 0.16); }
.conv-situation--moto { --situation-accent: rgba(13, 148, 136, 0.18); }
.conv-situation-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.45rem;
color: #fff;
}
.conv-situation--auto .conv-situation-icon { background: #2563eb; }
.conv-situation--home .conv-situation-icon { background: #e11d48; }
.conv-situation--health .conv-situation-icon { background: #16a34a; }
.conv-situation--moto .conv-situation-icon { background: #0d9488; }
.conv-situation-body {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
}
.conv-situation-title {
font-family: 'Sora', sans-serif;
font-size: 0.98rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
margin: 0 0 0.4rem;
}
.conv-situation-text {
margin: 0 0 0.7rem;
font-size: 0.86rem;
line-height: 1.6;
color: var(--text-muted);
}
.conv-situation-text strong { color: var(--text-main); }
.conv-situation-cta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--color-primary);
text-decoration: none;
padding-bottom: 0.12rem;
border-bottom: 2px solid var(--color-accent);
transition: color 0.2s ease, gap 0.2s ease, border-color 0.2s ease;
}
.conv-situation-cta:hover {
color: var(--color-accent);
gap: 0.55rem;
border-color: var(--green-dark);
}
/* Steps — 3 columns with large numerals */
.conv-steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.9rem, 2vw, 1.4rem);
counter-reset: convstep;
}
@media (max-width: 991px) { .conv-steps { grid-template-columns: 1fr; } }
.conv-step {
position: relative;
display: flex;
gap: 1rem;
background: #fff;
border: 1px solid rgba(12, 61, 92, 0.08);
border-radius: 18px;
padding: clamp(1.2rem, 2.2vw, 1.5rem);
box-shadow: 0 6px 20px rgba(12, 61, 92, 0.05);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s ease;
}
.conv-step:hover {
transform: translateY(-4px);
box-shadow: 0 22px 44px rgba(63, 140, 69, 0.16);
border-color: var(--color-accent);
}
.conv-step-num {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Sora', sans-serif;
font-size: 1.1rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #fff;
background: var(--color-primary);
box-shadow: 0 10px 22px rgba(12, 61, 92, 0.24);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.conv-step:hover .conv-step-num {
transform: scale(1.06) rotate(-3deg);
}
.conv-step:nth-child(2) .conv-step-num {
background: var(--color-accent);
box-shadow: 0 10px 22px rgba(63, 140, 69, 0.32);
}
.conv-step:nth-child(3) .conv-step-num {
background: linear-gradient(135deg, var(--color-accent), #5aae60);
box-shadow: 0 10px 22px rgba(63, 140, 69, 0.38);
}
.conv-step-body { min-width: 0; }
.conv-step-title {
font-family: 'Sora', sans-serif;
font-size: 0.98rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 0.4rem;
line-height: 1.3;
}
.conv-step-text {
margin: 0;
font-size: 0.86rem;
line-height: 1.6;
color: var(--text-muted);
}
.conv-step-text strong { color: var(--text-main); }
/* Reassurance trio — réutilise .conv-mini */
.conv-purpose-reassure {
margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(2rem, 4vw, 2.75rem);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
max-width: 1080px;
}
@media (max-width: 991px) {
.conv-purpose-reassure { grid-template-columns: 1fr; }
}
.conv-purpose-reassure .conv-mini {
background: #fff;
border: 1px solid rgba(12, 61, 92, 0.08);
box-shadow: 0 6px 18px rgba(12, 61, 92, 0.06);
}
.conv-purpose-reassure .conv-mini > i {
color: var(--color-accent);
font-size: 1.5rem;
}
/* Reveal animations */
.conv-action-split.reveal .conv-purpose-head,
.conv-action-split.reveal .conv-purpose-block,
.conv-action-split.reveal .conv-purpose-reassure,
.conv-action-split.reveal .conv-cta-band {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.conv-action-split.reveal.visible .conv-purpose-head,
.conv-action-split.reveal.visible .conv-purpose-block,
.conv-action-split.reveal.visible .conv-purpose-reassure,
.conv-action-split.reveal.visible .conv-cta-band {
opacity: 1;
transform: translateY(0);
}
.conv-action-split.reveal.visible .conv-purpose-block--situations { transition-delay: 0.1s; }
.conv-action-split.reveal.visible .conv-purpose-block--steps { transition-delay: 0.18s; }
.conv-action-split.reveal.visible .conv-purpose-reassure { transition-delay: 0.24s; }
.conv-action-split.reveal.visible .conv-cta-band { transition-delay: 0.32s; }
/* Accompagnement flexassurance — continuation after the green trust band */
.conv-purpose.conv-follow {
--follow-bg: #f6faf4;
--follow-panel: #ffffff;
--follow-ink: var(--color-primary);
--follow-muted: var(--text-muted);
--follow-line: rgba(29, 64, 97, 0.1);
--follow-accent: var(--color-accent);
--follow-accent-dark: var(--green-deeper);
--follow-radius: 8px;
position: relative;
padding: clamp(3.75rem, 6vw, 5.5rem) 0;
background:
linear-gradient(180deg, rgba(23, 63, 42, 0.09), rgba(246, 250, 244, 0) 14rem),
var(--follow-bg);
border-top: 0;
border-bottom: 1px solid rgba(29, 64, 97, 0.08);
color: var(--follow-ink);
}
.conv-follow > .container {
max-width: 1160px;
}
.conv-follow__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.58fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: stretch;
}
.conv-follow__intro {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 42rem;
}
.conv-follow__eyebrow {
display: inline-flex;
width: fit-content;
margin-bottom: 1rem;
color: var(--follow-accent-dark);
font-family: 'Sora', sans-serif;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.conv-follow__title {
margin: 0 0 1rem;
color: var(--follow-ink);
font-family: 'Sora', sans-serif;
font-size: clamp(2rem, 3.4vw, 3.25rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: 0;
max-width: 17ch;
}
.conv-follow__lede {
margin: 0;
max-width: 40rem;
color: var(--follow-muted);
font-size: clamp(0.98rem, 1.2vw, 1.08rem);
line-height: 1.75;
}
.conv-follow__lede strong {
color: var(--follow-ink);
}
.conv-follow__detail {
margin: 0.85rem 0 0;
max-width: 40rem;
color: var(--follow-muted);
font-size: clamp(0.92rem, 1.1vw, 1rem);
line-height: 1.72;
}
.conv-follow__detail strong {
color: var(--follow-ink);
}
.conv-follow__body {
margin-top: clamp(2rem, 4vw, 2.75rem);
padding-top: clamp(1.5rem, 3vw, 2rem);
border-top: 1px solid var(--follow-line);
}
.conv-follow__body-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.25rem, 5vw, 3.25rem);
align-items: start;
}
.conv-follow__panel--steps {
max-width: 42rem;
margin-inline: auto;
text-align: center;
}
.conv-follow__panel--steps .conv-follow__panel-title {
margin-bottom: 2.25rem;
}
.conv-follow__panel--values .conv-follow__panel-title {
text-align: center;
margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.conv-follow__panel-title {
margin: 0 0 1rem;
font-family: 'Sora', sans-serif;
font-size: 3rem;
font-weight: 800;
color: var(--follow-ink);
letter-spacing: -0.02em;
line-height: 1.3;
}
.conv-follow__cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.35rem);
margin: 0;
}
.conv-follow__card {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 100%;
padding: clamp(1.35rem, 2.4vw, 2rem);
background: #ffffff;
border: none;
border-radius: 12px;
box-shadow: 0 10px 32px rgba(29, 64, 97, 0.08);
transition: background-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s ease;
}
.conv-follow__card:hover {
background: var(--green-primary);
box-shadow: 0 16px 40px rgba(63, 140, 69, 0.28);
transform: translateY(-4px);
}
.conv-follow__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
margin-bottom: 1.35rem;
color: var(--green-primary);
background: rgba(63, 140, 69, 0.12);
border-radius: 50%;
font-size: 1.35rem;
line-height: 1;
transition: color 0.32s ease, background-color 0.32s ease;
}
.conv-follow__card:hover .conv-follow__card-icon {
color: #ffffff;
background: rgba(255, 255, 255, 0.16);
}
.conv-follow__card-title {
margin: 0 0 0.65rem;
font-family: 'Sora', sans-serif;
font-size: clamp(1rem, 1.4vw, 1.12rem);
font-weight: 700;
color: var(--follow-ink);
line-height: 1.35;
letter-spacing: -0.01em;
transition: color 0.32s ease;
}
.conv-follow__card:hover .conv-follow__card-title {
color: #ffffff;
}
.conv-follow__card-text {
flex: 1;
margin: 0 0 1.35rem;
font-size: 0.88rem;
line-height: 1.72;
color: var(--follow-muted);
transition: color 0.32s ease;
}
.conv-follow__card:hover .conv-follow__card-text {
color: rgba(255, 255, 255, 0.88);
}
.conv-follow__card-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: auto;
color: var(--follow-muted);
font-family: 'Sora', sans-serif;
font-size: 0.86rem;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
transition: color 0.32s ease, text-decoration-color 0.32s ease, gap 0.22s ease;
}
.conv-follow__card-link i {
font-size: 0.95rem;
transition: transform 0.22s ease;
}
.conv-follow__card:hover .conv-follow__card-link {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 3px;
}
.conv-follow__card:hover .conv-follow__card-link i {
transform: translateX(3px);
}
.conv-follow__card-link:focus-visible {
outline: 2px solid var(--green-primary);
outline-offset: 3px;
border-radius: 4px;
}
.conv-follow__card:hover .conv-follow__card-link:focus-visible {
outline-color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
.conv-follow__card,
.conv-follow__card-icon,
.conv-follow__card-title,
.conv-follow__card-text,
.conv-follow__card-link,
.conv-follow__card-link i {
transition: none;
}
.conv-follow__card:hover {
transform: none;
}
}
.conv-follow__timeline {
list-style: none;
margin: 0;
padding: 0 0 0 1.15rem;
border-left: 2px solid rgba(63, 140, 69, 0.22);
text-align: left;
}
.conv-follow__timeline li {
position: relative;
padding: 3px 0 3.15rem 1.95rem;
}
.conv-follow__timeline li:last-child {
padding-bottom: 0;
}
.conv-follow__timeline li::before {
content: "";
position: absolute;
left: calc(-1.15rem - 5px);
top: 0.45rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--follow-accent);
box-shadow: 0 0 0 3px rgba(63, 140, 69, 0.14);
}
.conv-follow__timeline h4 {
margin: 0 0 0.3rem;
font-family: 'Sora', sans-serif;
font-size: 1.2rem;
font-weight: 700;
color: var(--follow-ink);
line-height: 1.35;
}
.conv-follow__timeline-num {
display: inline-block;
min-width: 1.65rem;
margin-right: 0.15rem;
color: var(--follow-accent-dark);
font-size: 1.47rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.conv-follow__timeline p {
margin: 0;
font-size: 0.86rem;
line-height: 1.62;
color: var(--follow-muted);
}
.conv-follow__meta {
margin-top: clamp(1.5rem, 3vw, 2rem);
padding-top: clamp(1.15rem, 2.5vw, 1.45rem);
border-top: 1px solid rgba(29, 64, 97, 0.08);
}
.conv-follow__trust-line {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.65rem 1.25rem;
margin: 0 0 0.85rem;
padding: 0;
}
.conv-follow__trust-line li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.84rem;
font-weight: 600;
color: var(--follow-ink);
line-height: 1.4;
}
.conv-follow__trust-line i {
color: var(--follow-accent);
font-size: 0.95rem;
}
.conv-follow__verify {
margin: 0;
max-width: 52rem;
font-size: 0.86rem;
line-height: 1.68;
color: var(--follow-muted);
}
.conv-follow__verify strong {
color: var(--follow-ink);
font-weight: 700;
}
.conv-follow__badges {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin: 1.35rem 0 0;
padding: 0;
}
.conv-follow__badges li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.72rem;
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(63, 140, 69, 0.18);
border-radius: var(--follow-radius);
color: var(--follow-ink);
font-size: 0.82rem;
font-weight: 700;
line-height: 1.2;
box-shadow: 0 8px 20px rgba(29, 64, 97, 0.04);
}
.conv-follow__badges i {
color: var(--follow-accent);
}
.conv-follow__advisor {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
padding: clamp(1.35rem, 3vw, 2rem);
background: var(--follow-panel);
border: 1px solid var(--follow-line);
border-radius: var(--follow-radius);
box-shadow: 0 20px 50px rgba(29, 64, 97, 0.09);
overflow: hidden;
}
.conv-follow__advisor::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg, var(--follow-accent), rgba(63, 140, 69, 0.12));
}
.conv-follow__advisor-visual {
position: relative;
width: 5.75rem;
height: 5.75rem;
margin: 0 0 1rem;
border-radius: 50%;
background: var(--green-light);
}
.conv-follow__advisor-img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
border: 3px solid #ffffff;
border-radius: 50%;
box-shadow: 0 14px 30px rgba(29, 64, 97, 0.14);
}
.conv-follow__advisor-icon {
position: absolute;
right: -0.25rem;
bottom: -0.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
color: #ffffff;
background: var(--follow-accent);
border-radius: var(--follow-radius);
border: 2px solid #ffffff;
box-shadow: 0 12px 26px rgba(63, 140, 69, 0.22);
font-size: 1rem;
}
.conv-follow__advisor-kicker {
margin: 0 0 0.4rem;
color: var(--follow-accent-dark);
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
}
.conv-follow__advisor h3 {
margin: 0 0 0.75rem;
color: var(--follow-ink);
font-family: 'Sora', sans-serif;
font-size: clamp(1.2rem, 2vw, 1.55rem);
line-height: 1.22;
letter-spacing: 0;
}
.conv-follow__advisor p:not(.conv-follow__advisor-kicker) {
margin: 0;
color: var(--follow-muted);
font-size: 0.94rem;
line-height: 1.62;
}
.conv-follow__advisor-actions {
display: grid;
gap: 0.65rem;
margin-top: 1.35rem;
}
.conv-follow__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 2.9rem;
padding: 0.72rem 1rem;
border-radius: var(--follow-radius);
text-decoration: none;
font-size: 0.88rem;
font-weight: 800;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}
.conv-follow__btn:hover {
transform: translateY(-2px);
}
.conv-follow__btn--primary {
color: #ffffff;
background: var(--follow-accent);
border: 1px solid var(--follow-accent);
box-shadow: 0 12px 26px rgba(63, 140, 69, 0.22);
}
.conv-follow__btn--primary:hover {
color: #ffffff;
background: var(--green-dark);
border-color: var(--green-dark);
box-shadow: 0 16px 30px rgba(63, 140, 69, 0.26);
}
.conv-follow__btn--ghost {
color: var(--follow-ink);
background: #ffffff;
border: 1px solid rgba(29, 64, 97, 0.14);
}
.conv-follow__btn--ghost i {
color: var(--follow-accent);
}
.conv-follow__btn--ghost:hover {
color: var(--follow-accent-dark);
background: var(--green-light);
border-color: rgba(63, 140, 69, 0.28);
}
.conv-follow.reveal .conv-follow__intro,
.conv-follow.reveal .conv-follow__advisor,
.conv-follow.reveal .conv-follow__body {
opacity: 0;
transform: translateY(18px);
}
.conv-follow.reveal.visible .conv-follow__intro,
.conv-follow.reveal.visible .conv-follow__advisor,
.conv-follow.reveal.visible .conv-follow__body {
opacity: 1;
transform: translateY(0);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.conv-follow.reveal.visible .conv-follow__advisor { transition-delay: 0.08s; }
.conv-follow.reveal.visible .conv-follow__body { transition-delay: 0.14s; }
@media (max-width: 991px) {
.conv-follow__grid,
.conv-follow__body-grid {
grid-template-columns: 1fr;
}
.conv-follow__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.conv-follow__intro,
.conv-follow__title,
.conv-follow__lede {
max-width: none;
}
.conv-follow__advisor {
min-height: 0;
}
}
@media (max-width: 575px) {
.conv-follow {
padding: clamp(3rem, 9vw, 4.25rem) 0;
}
.conv-follow__title {
font-size: clamp(1.85rem, 9vw, 2.45rem);
}
.conv-follow__badges {
display: grid;
grid-template-columns: 1fr;
}
.conv-follow__trust-line {
flex-direction: column;
gap: 0.5rem;
}
.conv-follow__cards {
grid-template-columns: 1fr;
}
.conv-follow__panel--steps {
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.conv-follow.reveal .conv-follow__intro,
.conv-follow.reveal .conv-follow__advisor,
.conv-follow.reveal .conv-follow__body,
.conv-follow.reveal.visible .conv-follow__intro,
.conv-follow.reveal.visible .conv-follow__advisor,
.conv-follow.reveal.visible .conv-follow__body {
opacity: 1;
transform: none;
transition: none;
}
}
/* Accompagnement flexassurance — premium spacing refinement */
.conv-purpose.conv-follow {
--follow-bg: #f7fbf5;
--follow-panel: #ffffff;
--follow-line: rgba(29, 64, 97, 0.09);
padding: clamp(4rem, 6vw, 5.75rem) 0 clamp(3.75rem, 5.5vw, 5.25rem);
background:
linear-gradient(180deg, rgba(23, 63, 42, 0.11), rgba(247, 251, 245, 0) 11rem),
var(--follow-bg);
}
.conv-follow > .container {
max-width: 1120px;
}
.conv-follow__grid {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
gap: clamp(1.75rem, 4vw, 3.25rem);
align-items: center;
}
.conv-follow__intro {
max-width: 44rem;
}
.conv-follow__title {
max-width: 18ch;
margin-bottom: 1.05rem;
font-size: clamp(2.05rem, 3.2vw, 3.05rem);
line-height: 1.09;
}
.conv-follow__lede {
max-width: 41rem;
font-size: clamp(0.98rem, 1.12vw, 1.06rem);
line-height: 1.72;
}
.conv-follow__badges {
margin-top: 1.25rem;
}
.conv-follow__advisor {
justify-content: flex-start;
padding: clamp(1.25rem, 2.3vw, 1.65rem);
box-shadow: 0 18px 44px rgba(29, 64, 97, 0.08);
}
.conv-follow__advisor-visual {
width: 5rem;
height: 5rem;
margin-bottom: 0.95rem;
}
.conv-follow__advisor h3 {
margin-bottom: 0.65rem;
font-size: clamp(1.12rem, 1.65vw, 1.38rem);
}
.conv-follow__advisor-actions {
/*grid-template-columns: repeat(2, minmax(0, 1fr));*/
gap: 0.6rem;
margin-top: 1.15rem;
}
.conv-follow__advisor-actions .conv-follow__btn--primary {
grid-column: 1 / -1;
}
.conv-follow__btn {
min-height: 2.75rem;
padding: 0.68rem 0.9rem;
font-size: 0.84rem;
white-space: normal;
text-align: center;
}
.conv-follow__body {
margin-top: clamp(1.75rem, 3.5vw, 2.35rem);
}
.conv-follow__body-grid {
gap: clamp(1.75rem, 4vw, 2.75rem);
}
.conv-follow__meta {
margin-top: clamp(1.25rem, 2.5vw, 1.65rem);
}
@media (max-width: 991px) {
.conv-follow__grid {
grid-template-columns: 1fr;
}
.conv-follow__advisor {
max-width: 34rem;
}
}
@media (max-width: 575px) {
.conv-follow__advisor-actions {
grid-template-columns: 1fr;
}
.conv-follow__advisor-actions .conv-follow__btn--primary {
grid-column: auto;
}
}
/* ════════════════════════════════════
TRUST BAR — below the cards
════════════════════════════════════ */
.trust-bar {
background: var(--white);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 20px 0;
margin-top: 40px;
}
.trust-bar-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 9px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.trust-item i {
font-size: 16px;
color: var(--color-accent);
}
.trust-divider {
width: 1px;
height: 22px;
background: var(--border);
}
/* ===== Consistent palette refinement layer ===== */
body {
background: var(--off-white);
color: var(--text-main);
}
.navbar-custom {
background: var(--navbar-bg);
border-bottom: 1px solid var(--navbar-border-subtle);
}
.navbar-brand,
.nav-link-custom {
color: var(--navbar-link) !important;
}
.nav-link-custom:hover,
.nav-link-custom.active {
color: var(--navbar-link-hover) !important;
background: transparent !important;
}
.hero {
background: var(--hero-surface);
}
.hero-mesh {
background-color: transparent;
background-image: var(--hero-surface-pattern);
background-repeat: repeat;
background-size: 28px 28px;
}
.hero-grid {
background-image: none;
background-color: transparent;
}
.service-card,
.conv-pillar {
border: 1px solid var(--border);
box-shadow: 0 14px 35px var(--color-shadow);
}
.quote-card {
border: 1px solid rgba(63, 140, 69, 0.18);
}
.btn-read-more,
.btn-primary-hero {
background: var(--color-primary);
color: #fff !important;
box-shadow: 0 12px 26px rgba(15, 63, 97, 0.24);
border: none;
}
.btn-read-more:hover,
.btn-primary-hero:hover {
background: var(--color-primary-dark);
color: #fff !important;
}
.devis-submit-btn,
.btn-simulate {
background: var(--color-accent) !important;
color: #fff !important;
box-shadow: 0 10px 28px rgba(63, 140, 69, 0.35) !important;
}
.devis-submit-btn:hover,
.btn-simulate:hover {
background: var(--green-dark) !important;
box-shadow: 0 14px 34px rgba(63, 140, 69, 0.45) !important;
}
.form-control-custom:focus,
.form-select-custom:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(63, 140, 69, 0.18);
}
.services-section {
background: var(--white);
}
/* ──────────────────────────────────────────────────────────
Brand accent detailing — green #3f8c45 used aggressively
as the main interactive accent (eyebrow dots, navbar underline,
CTA kickers, carousel dots). Navy stays for body/headings,
orange remains only on a few atmospheric decorations.
────────────────────────────────────────────────────────── */
.conv-eyebrow,
.conv-action-eyebrow,
.conv-purpose-eyebrow {
position: relative;
}
.conv-eyebrow::before,
.conv-action-eyebrow::before,
.conv-purpose-eyebrow::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 0.55rem;
border-radius: 50%;
background: var(--color-accent);
vertical-align: middle;
box-shadow: 0 0 0 3px var(--tint-accent-12);
flex-shrink: 0;
}
/* If a centered eyebrow already shows a left bar, hide our dot to avoid clutter */
.conv-eyebrow--center::before { display: none; }
/* Green underline accent — disabled for primary nav (color-only hover like reference) */
.navbar-nav .nav-link-custom::after {
display: none;
}
.navbar-nav .nav-link:not(.nav-link-custom) {
position: relative;
}
.navbar-nav .nav-link:not(.nav-link-custom)::after {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
transform: translateX(-50%) scaleX(0);
width: 22px;
height: 3px;
border-radius: 2px;
background: var(--color-accent);
transition: transform 0.22s ease;
transform-origin: center;
}
.navbar-nav .nav-link:not(.nav-link-custom):hover::after,
.navbar-nav .nav-link:not(.nav-link-custom).active::after,
.navbar-nav .nav-link:not(.nav-link-custom)[aria-current="page"]::after {
transform: translateX(-50%) scaleX(1);
}
/* Reassurance kicker — solid green pill with white text */
.conv-cta-kicker {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: var(--color-accent);
color: #ffffff;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.02em;
padding: 6px 12px;
border-radius: 999px;
text-transform: none;
box-shadow: 0 6px 14px var(--accent-cta-shadow);
}
.conv-cta-kicker::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #ffffff;
display: inline-block;
}
/* Testimonials carousel: green active state */
.testimonials-dot,
.testimonials-dots button {
background: var(--color-border);
transition: background 0.2s ease, transform 0.2s ease;
}
.testimonials-dot.is-active,
.testimonials-dots button.is-active,
.testimonials-dots button[aria-current="true"] {
background: var(--color-accent);
transform: scale(1.15);
}
/* ──────────────────────────────────────────────────────────
Motion suite — gentle, brand-tasteful animations.
All respect prefers-reduced-motion at the bottom.
────────────────────────────────────────────────────────── */
@keyframes float-blob {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-14px, 18px) scale(1.04); }
100% { transform: translate(0, 0) scale(1); }
}
@keyframes float-ring {
0% { transform: translate(0, 0); }
50% { transform: translate(12px, -10px); }
100% { transform: translate(0, 0); }
}
@keyframes float-soft {
0% { transform: translate(0, 0); }
50% { transform: translate(-8px, 10px); }
100% { transform: translate(0, 0); }
}
/* Proof-pillar hover lift — feedback when the user lands on a stat card */
.conv-pillar {
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
will-change: transform;
}
.conv-pillar:hover {
transform: translateY(-4px);
box-shadow: 0 22px 50px rgba(29, 64, 97, 0.12), 0 3px 8px rgba(29, 64, 97, 0.05);
border-color: var(--tint-accent-30);
}
.conv-pillar .conv-pillar-icon {
transition: transform 0.28s ease;
}
.conv-pillar:hover .conv-pillar-icon {
transform: scale(1.08) rotate(-3deg);
}
/* Service card hover lift + image zoom (image transition already present) */
.service-card {
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 24px 50px rgba(29, 64, 97, 0.12);
border-color: var(--tint-accent-30);
}
/* Quote card subtle entrance polish — a slow soft "rise into focus" */
.quote-card {
animation: fadeUp 0.8s ease 0.2s both;
}
/* Hero photo + container reveal — small, no harsh jump */
.hero .row > [class*="col-"] {
animation: fadeUp 0.7s ease both;
}
.hero .row > [class*="col-"]:nth-child(2) { animation-delay: 0.12s; }
/* Primary CTA buttons — subtle press feedback (no gradients) */
.btn-hero-primary,
.conv-zig-cta:not(.conv-zig-cta--outline),
.conv-btn--primary {
transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.btn-hero-primary:hover,
.conv-zig-cta:not(.conv-zig-cta--outline):hover,
.conv-btn--primary:hover {
transform: translateY(-2px);
}
.btn-hero-primary:active,
.conv-zig-cta:not(.conv-zig-cta--outline):active,
.conv-btn--primary:active {
transform: translateY(0) scale(0.98);
}
/* Respect reduced motion globally for the motion suite */
@media (prefers-reduced-motion: reduce) {
.hero-photo::after,
.hero::after,
.about-section::before {
animation: none !important;
}
.conv-pillar,
.service-card {
transition: none !important;
}
.conv-pillar:hover,
.service-card:hover {
transform: none;
}
.quote-card,
.hero .row > [class*="col-"] {
animation: none !important;
}
}
/* ──────────────────────────────────────────────────────────
Devis form — responsive polish
────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
.quote-card {
padding: 36px 28px 30px;
margin-top: 24px;
}
.quote-header h5 { font-size: 1.25rem; }
}
@media (max-width: 768px) {
.hero {
align-items: flex-start;
padding: 28px 0 34px;
}
.hero-conversion-row {
--bs-gutter-y: 1rem;
}
.hero-copy-col {
order: 1;
}
.hero-quote-col {
order: 2;
margin-top: 0.8rem !important;
}
.hero-mobile-proof-col {
order: 3;
}
.hero h1 {
font-size: clamp(2rem, 8.5vw, 2.55rem);
line-height: 1.12;
letter-spacing: 0;
margin-bottom: 0.9rem;
}
.hero h1 .accent::after {
bottom: -2px;
height: 3px;
}
.hero p.lead {
font-size: 0.98rem;
line-height: 1.58;
margin-bottom: 1rem;
max-width: 34rem;
}
.hero-cta-group {
margin-bottom: 0;
gap: 0.7rem;
}
.hero-cta-group .btn-hero-primary {
min-height: 50px;
justify-content: center;
width: 100%;
padding: 13px 18px;
}
.hero-cta-group .btn-hero-ghost {
display: none;
}
.conv-pillars-strip--desktop {
display: none;
}
.conv-pillars-strip--mobile {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.65rem;
margin: 1rem 0 0;
}
.conv-pillars-strip--mobile .conv-pillar {
border-radius: 14px;
padding: 0.9rem 0.75rem;
min-height: 0;
}
.conv-pillars-strip--mobile .conv-pillar-icon {
width: 34px;
height: 34px;
border-radius: 11px;
margin-bottom: 0.35rem;
}
.conv-pillars-strip--mobile .conv-pillar-num {
font-size: 0.9rem;
line-height: 1.12;
}
.conv-pillars-strip--mobile .conv-pillar-label {
font-size: 0.7rem;
}
.quote-card {
margin-top: 0;
}
}
@media (max-width: 575px) {
.quote-card {
padding: 28px 20px 24px;
border-radius: var(--radius-lg);
}
.quote-card::before {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.quote-header h5 { font-size: 1.15rem; }
.quote-header-icons { width: 40px; height: 40px; }
.ins-type-grid { gap: 8px; }
.ins-type-btn {
min-height: 78px;
padding: 12px 6px;
font-size: 0.75rem;
}
.ins-type-btn i { font-size: 1.35rem; }
.form-control-custom,
.form-select-custom {
padding: 12px 14px;
min-height: 46px;
font-size: 0.92rem;
}
.input-icon-wrap .form-control-custom { padding-left: 40px; }
.btn-simulate {
padding: 15px 18px;
min-height: 52px;
font-size: 0.95rem;
}
}
/* ──────────────────────────────────────────────────────────
"Alive" motion suite — site-wide green polish + animation
────────────────────────────────────────────────────────── */
@keyframes gentle-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 10px 28px rgba(63, 140, 69, 0.35); }
50% { transform: scale(1.025); box-shadow: 0 14px 38px rgba(63, 140, 69, 0.45); }
}
@keyframes shimmer-sweep {
0% { background-position: -200% 50%; }
100% { background-position: 200% 50%; }
}
@keyframes pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(63, 140, 69, 0.42); }
75% { box-shadow: 0 0 0 14px rgba(63, 140, 69, 0); }
100% { box-shadow: 0 0 0 0 rgba(63, 140, 69, 0); }
}
@keyframes drift-bg {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Subtle gentle pulse on the main hero ghost button to invite attention */
.btn-hero-ghost {
animation: gentle-pulse 5.5s ease-in-out infinite;
}
.btn-hero-ghost:hover {
animation: none;
}
/* Hero badge dot already pulses — reinforce the green dot pulse-ring on key icons */
.conv-pillars-strip .conv-pillar:hover .conv-pillar-icon {
animation: pulse-ring 1.6s ease-out infinite;
}
/* Conv-cta-band: animated gradient background + lift on hover */
.conv-cta-band {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 18% 12%, rgba(63, 140, 69, 0.22), transparent 50%),
radial-gradient(circle at 86% 88%, rgba(63, 140, 69, 0.18), transparent 50%),
linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #112e4e 100%);
background-size: 200% 200%;
animation: drift-bg 16s ease-in-out infinite;
}
.conv-cta-band::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
opacity: 0.65;
mask-image: linear-gradient(to right, rgba(0,0,0,0.4), transparent 50%);
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.4), transparent 50%);
}
.conv-cta-band > * { position: relative; z-index: 1; }
/* Buttons in CTA band: green primary with shimmer on hover */
.conv-btn--primary {
position: relative;
overflow: hidden;
}
.conv-btn--primary::after {
content: "";
position: absolute;
top: 0; left: -120%;
width: 75%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
transform: skewX(-22deg);
transition: left 0.6s ease;
pointer-events: none;
}
.conv-btn--primary:hover::after { left: 130%; }
/* Trust-first polish: content should never look absent while scroll JS catches up. */
.conv-trust-split.reveal .conv-hero-stack > *,
.conv-trust-split.reveal .conv-zigzag,
.conv-action-split.reveal .conv-purpose-head,
.conv-action-split.reveal .conv-purpose-block,
.conv-action-split.reveal .conv-purpose-reassure,
.conv-action-split.reveal .conv-cta-band {
opacity: 1;
transform: none;
}
/* Tighter vertical rhythm for a conversion-led insurance site. */
.partners-section {
padding-top: clamp(2rem, 4vw, 3rem);
padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.about-section {
padding-top: clamp(4rem, 7vw, 5rem);
padding-bottom: clamp(4rem, 7vw, 5rem);
}
.pf-about {
padding-top: clamp(4.5rem, 7vw, 6.75rem);
padding-bottom: clamp(4.5rem, 7vw, 6.75rem);
}
.conv-purpose {
padding-top: clamp(3rem, 6vw, 4.25rem);
padding-bottom: clamp(3.25rem, 6vw, 4.75rem);
}
.services-section {
padding-top: clamp(4rem, 7vw, 5rem);
padding-bottom: clamp(4rem, 7vw, 5rem);
}
/* About section: lift collage on hover */
.about-img-collage {
transition: transform 0.4s ease;
}
.about-section:hover .about-img-collage {
transform: translateY(-3px);
}
.about-img-main, .about-img-secondary {
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.about-img-main:hover {
transform: scale(1.02) rotate(-0.3deg);
box-shadow: 0 30px 60px rgba(63, 140, 69, 0.20);
}
.about-img-secondary:hover {
transform: scale(1.03);
box-shadow: 0 24px 56px rgba(63, 140, 69, 0.20);
}
/* Conv-pillar-cta site-wide — make it lively */
.conv-pillar-cta {
transition: color 0.22s ease, gap 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.conv-pillar-cta:hover {
color: var(--color-accent);
gap: 0.65rem;
border-color: var(--green-dark);
transform: translateX(2px);
}
/* Conv-trust-row chips (hero strip) — green pop on hover */
.conv-trust-row li {
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.conv-trust-row li:hover {
transform: translateY(-2px);
border-color: var(--color-accent);
background: var(--color-accent-muted);
box-shadow: 0 10px 24px rgba(63, 140, 69, 0.14);
}
.conv-trust-row li:hover i {
color: var(--color-accent);
}
/* Conv-mini reassurance cards in purpose section — soft hover */
.conv-mini {
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.conv-mini:hover {
transform: translateY(-3px);
box-shadow: 0 18px 38px rgba(63, 140, 69, 0.12);
border-color: rgba(63, 140, 69, 0.32);
}
.conv-mini:hover > i {
color: var(--color-accent);
}
/* Subtle "alive" accent — animated gradient underline on H2 titles */
.section-title em::after,
.section-title .accent-word::after {
background: linear-gradient(90deg, var(--color-accent), #5aae60, var(--color-accent));
background-size: 200% 100%;
animation: shimmer-sweep 3.6s linear infinite;
}
/* FAQ — subtle slide-in arrow indicator on hover */
.faq-premium .faq-question {
position: relative;
}
.faq-premium .faq-question:hover .faq-qtext {
color: var(--color-accent);
transition: color 0.22s ease;
}
/* Hero-photo blob (top-right) becomes richer with pulse glow */
.hero-photo::after {
box-shadow: 0 0 80px 20px rgba(63, 140, 69, 0.18);
}
/* Devis CTA banner pulse on the primary white button */
.devis-cta-banner__col:first-child .devis-cta-banner__btn {
animation: gentle-pulse 4.5s ease-in-out infinite;
}
.devis-cta-banner__col:first-child .devis-cta-banner__btn:hover {
animation: none;
}
/* Smooth in-section reveal stagger */
.reveal { will-change: opacity, transform; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.btn-hero-ghost,
.devis-cta-banner__col:first-child .devis-cta-banner__btn,
.conv-pillars-strip .conv-pillar:hover .conv-pillar-icon,
.conv-cta-band,
.conv-trust-split::after,
.conv-trust-split > .container::before,
.devis-cta-banner__card::before,
.devis-cta-banner__card::after,
.about-exp-badge,
.section-title em::after,
.section-title .accent-word::after,
.conv-trust-split .conv-float-badge,
.service-card:hover::after,
.quote-header-moto-icon {
animation: none !important;
}
}
/* ──────────────────────────────────────────────────────────
Moto icon — bi-motorcycle is missing from Bootstrap Icons 1.11.3,
so we polyfill it as an SVG mask. Renders in currentColor so
hover/focus theming keeps working everywhere the class is used.
────────────────────────────────────────────────────────── */
.bi-motorcycle::before {
content: "" !important;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.44 9.03 15.41 5H11v2h3.59l2 2H5c-2.8 0-5 2.2-5 5s2.2 5 5 5c2.46 0 4.45-1.69 4.9-4h1.65l2.77-2.77c-.21.54-.32 1.14-.32 1.77 0 2.8 2.2 5 5 5s5-2.2 5-5c0-2.65-1.97-4.77-4.56-4.97zM5 17c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3zm14 0c-1.7 0-3-1.3-3-3 0-.94.43-1.78 1.1-2.33L19.5 14h1.39c-.34 1.72-1.86 3-3.39 3z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.44 9.03 15.41 5H11v2h3.59l2 2H5c-2.8 0-5 2.2-5 5s2.2 5 5 5c2.46 0 4.45-1.69 4.9-4h1.65l2.77-2.77c-.21.54-.32 1.14-.32 1.77 0 2.8 2.2 5 5 5s5-2.2 5-5c0-2.65-1.97-4.77-4.56-4.97zM5 17c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3zm14 0c-1.7 0-3-1.3-3-3 0-.94.43-1.78 1.1-2.33L19.5 14h1.39c-.34 1.72-1.86 3-3.39 3z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
line-height: 1;
font-family: inherit !important;
}
/* ──────────────────────────────────────────────────────────
Moto icon polish in the quote header — gentle vroom animation.
The base box (.quote-header-icons) and color are defined earlier;
here we just add the soft shadow + the looping vroom motion.
────────────────────────────────────────────────────────── */
@keyframes moto-vroom {
0%, 100% { transform: translateX(0) rotate(0); }
45% { transform: translateX(2px) rotate(-4deg); }
55% { transform: translateX(2px) rotate(-4deg); }
}
.quote-header .quote-header-icons {
box-shadow: 0 6px 18px rgba(63, 140, 69, 0.12);
}
.quote-header-moto-icon {
font-size: 1.45rem;
animation: moto-vroom 6s ease-in-out infinite;
transform-origin: 30% 80%;
}
.quote-header-icons:hover .quote-header-moto-icon {
animation: moto-vroom 1.4s ease-in-out infinite;
}
/* ──────────────────────────────────────────────────────────
intl-tel-input — country flag + dial code on the phone input
Styled to match the green devis form (separateDialCode mode).
────────────────────────────────────────────────────────── */
.devis-phone-wrap {
position: relative;
width: 100%;
}
.devis-phone-wrap .iti {
width: 100%;
display: block;
}
.devis-phone-wrap .iti__tel-input,
.devis-phone-wrap input.form-control-custom {
width: 100%;
}
/* Selected flag pill on the left — make it a green-tinted control */
.devis-phone-wrap .iti--separate-dial-code .iti__selected-flag {
background: var(--color-accent-muted);
border-right: 1.5px solid rgba(63, 140, 69, 0.22);
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
padding: 0 12px 0 14px;
min-height: 50px;
transition: background 0.2s ease, border-color 0.2s ease;
}
.devis-phone-wrap .iti--separate-dial-code .iti__selected-flag:hover,
.devis-phone-wrap .iti--separate-dial-code .iti__selected-flag[aria-expanded="true"] {
background: rgba(63, 140, 69, 0.18);
}
.devis-phone-wrap .iti--separate-dial-code .iti__selected-dial-code {
font-family: 'DM Sans', 'Inter', sans-serif;
font-weight: 700;
color: var(--color-accent);
font-size: 0.92rem;
margin-left: 8px;
}
.devis-phone-wrap .iti__arrow {
border-top-color: var(--color-accent);
}
.devis-phone-wrap .iti__arrow--up {
border-bottom-color: var(--color-accent);
}
.devis-phone-wrap .iti__flag-container {
z-index: 3;
}
/* Input alignment in separateDialCode mode — keep our form height + green focus */
.devis-phone-wrap .iti--separate-dial-code .iti__tel-input {
padding-left: 100px !important;
min-height: 50px;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
background: var(--white);
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.devis-phone-wrap .iti--separate-dial-code .iti__tel-input:hover {
border-color: rgba(63, 140, 69, 0.45);
}
.devis-phone-wrap .iti--separate-dial-code .iti__tel-input:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(63, 140, 69, 0.18);
outline: none;
background: #fbfffb;
}
/* Country dropdown — green hover, white selected, comfortable rows */
.devis-phone-wrap .iti__country-list {
border-radius: 12px;
border: 1px solid rgba(63, 140, 69, 0.22);
box-shadow: 0 18px 44px rgba(29, 64, 97, 0.16), 0 4px 12px rgba(63, 140, 69, 0.10);
max-height: 280px;
overflow-y: auto;
padding: 6px;
background: #ffffff;
}
.devis-phone-wrap .iti__country {
padding: 8px 10px;
border-radius: 8px;
font-size: 0.86rem;
}
.devis-phone-wrap .iti__country.iti__highlight,
.devis-phone-wrap .iti__country:hover {
background: var(--color-accent-muted);
color: #1e5f3b;
}
.devis-phone-wrap .iti__country.iti__active {
background: var(--color-accent);
color: #ffffff;
}
.devis-phone-wrap .iti__country.iti__active .iti__dial-code {
color: rgba(255, 255, 255, 0.92);
}
.devis-phone-wrap .iti__dial-code {
color: var(--text-muted);
font-weight: 600;
}
.devis-phone-wrap .iti__divider {
border-bottom-color: rgba(63, 140, 69, 0.22);
margin: 6px 0;
}
/* Search input (when enabled by future config) */
.devis-phone-wrap .iti__search-input {
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
font-size: 0.86rem;
}
.devis-phone-wrap .iti__search-input:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(63, 140, 69, 0.18);
outline: none;
}
/* Responsive — smaller padding on phones */
@media (max-width: 575px) {
.devis-phone-wrap .iti--separate-dial-code .iti__selected-flag {
min-height: 46px;
padding: 0 8px 0 10px;
}
.devis-phone-wrap .iti--separate-dial-code .iti__tel-input {
padding-left: 92px !important;
min-height: 46px;
font-size: 0.92rem;
}
.devis-phone-wrap .iti--separate-dial-code .iti__selected-dial-code {
font-size: 0.86rem;
}
}
/* =========================
Author Row
========================= */
.testi-author-row{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items:center;
gap: 8px 12px;
margin-top: clamp(11px, 2vw, 16px);
padding-top: 2px;
flex-shrink: 0;
}
/* =========================
Avatar
========================= */
.testi-author-avatar{
width:44px;
height:44px;
min-width:44px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:13px;
letter-spacing:.5px;
color:#fff;
position:relative;
overflow:hidden;
box-shadow:
0 8px 24px rgba(0,0,0,.12),
inset 0 1px 1px rgba(255,255,255,.15);
}
.testi-author-avatar span{
position:relative;
z-index:2;
}
/* =========================
Gradient Variants
========================= */
.avatar-blue{
background:linear-gradient(135deg,#2563eb,#1e3a8a);
}
.avatar-purple{
background:linear-gradient(135deg,#9333ea,#6b21a8);
}
.avatar-green{
background:linear-gradient(135deg,#059669,#065f46);
}
.avatar-orange{
background:linear-gradient(135deg,#ea580c,#c2410c);
}
.avatar-dark{
background:linear-gradient(135deg,#334155,#0f172a);
}
/* =========================
Floating WhatsApp (global)
========================= */
.flexassur-wa-float {
position: fixed;
left: max(1rem, 1.25rem);
bottom: max(1.25rem, 1.5rem);
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: #25d366;
color: #fff !important;
font-size: 1.85rem;
line-height: 1;
text-decoration: none !important;
box-shadow:
0 4px 20px rgba(37, 211, 102, 0.45),
0 2px 8px rgba(29, 64, 97, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.flexassur-wa-float:hover {
color: #fff !important;
transform: scale(1.06);
box-shadow:
0 6px 28px rgba(37, 211, 102, 0.55),
0 4px 12px rgba(29, 64, 97, 0.25);
}
.flexassur-wa-float:focus-visible {
outline: 3px solid var(--color-focus, rgba(63, 140, 69, 0.35));
outline-offset: 3px;
}
/* =========================
Scroll top / bottom (global)
========================= */
.flexassur-scroll-axis {
position: fixed;
right: max(1rem, 1.25rem);
bottom: max(1.25rem, 1.5rem);
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
padding: 0;
border: none;
border-radius: 50%;
background: var(--green-primary);
color: #fff;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
box-shadow:
0 4px 18px rgba(63, 140, 69, 0.38),
0 2px 8px rgba(29, 64, 97, 0.16);
transition:
opacity 0.24s ease,
transform 0.24s ease,
visibility 0.24s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}
.flexassur-scroll-axis.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.flexassur-scroll-axis:hover {
background: var(--green-dark);
box-shadow:
0 6px 24px rgba(63, 140, 69, 0.45),
0 4px 12px rgba(29, 64, 97, 0.2);
}
.flexassur-scroll-axis:focus-visible {
outline: 3px solid var(--color-focus, rgba(63, 140, 69, 0.35));
outline-offset: 3px;
}
.flexassur-scroll-axis__icon {
display: block;
line-height: 1;
}
.flexassur-scroll-axis__icon.is-hidden {
display: none;
}
@media (max-width: 575px) {
.flexassur-scroll-axis {
display: none;
}
.flexassur-wa-float {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.flexassur-wa-float {
transition: none;
}
.flexassur-wa-float:hover {
transform: none;
}
.flexassur-scroll-axis {
transition: none;
}
.flexassur-scroll-axis.is-visible {
transform: none;
}
}
/* ─── Page Assurance décennale ─── */
.decennale-page {
background: var(--color-bg);
}
.decennale-page .decennale-hero {
background: var(--hero-surface);
background-image: var(--hero-surface-pattern);
border-bottom: 1px solid var(--navbar-border-subtle);
}
.decennale-page .decennale-overline {
letter-spacing: 0.06em;
color: var(--color-accent) !important;
}
.decennale-page .decennale-title {
color: var(--text-main);
letter-spacing: -0.02em;
}
.decennale-page .decennale-lead {
color: var(--text-muted);
max-width: 36rem;
}
.decennale-page .decennale-hero--conversion {
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.decennale-page .decennale-title-accent {
display: block;
margin-top: 0.2rem;
font-weight: 800;
color: var(--color-accent);
letter-spacing: -0.025em;
line-height: 1.15;
}
.decennale-page .decennale-benefits {
margin: 0;
padding: 0;
}
.decennale-page .decennale-benefits > li {
display: flex;
gap: 0.65rem;
align-items: flex-start;
margin-bottom: 0.65rem;
font-size: 0.95rem;
line-height: 1.45;
color: var(--text-main);
}
.decennale-page .decennale-benefits > li:last-child {
margin-bottom: 0;
}
.decennale-page .decennale-benefits__icon {
flex-shrink: 0;
width: 1.35rem;
height: 1.35rem;
margin-top: 0.12rem;
border-radius: 50%;
background: var(--color-accent-muted);
color: var(--green-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
}
.decennale-page .decennale-hero-wa {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.15rem;
border-radius: 999px;
font-weight: 600;
font-size: 0.92rem;
background: #25d366;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.decennale-page .decennale-hero-wa:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 3px;
}
.decennale-page .decennale-trust-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
margin: 0;
padding: 0;
}
.decennale-page .decennale-trust-chips--mobile {
display: none;
}
.decennale-page .decennale-trust-chips > li {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
background: var(--white);
border: 1px solid var(--navbar-border-subtle);
padding: 0.38rem 0.65rem;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(29, 64, 97, 0.05);
}
.decennale-page .decennale-trust-chips > li i {
color: var(--color-accent);
font-size: 0.95rem;
}
@media (max-width: 768px) {
.decennale-page .decennale-hero--conversion {
padding-top: 1.75rem !important;
padding-bottom: 2rem !important;
}
.decennale-page .product-conversion-row {
--bs-gutter-y: 1rem;
}
.decennale-page .product-hero-copy-col {
order: 1;
}
.decennale-page .product-hero-quote-col {
order: 2;
margin-top: 0.8rem;
}
.decennale-page .product-hero-mobile-proof-col {
order: 3;
}
.decennale-page .decennale-title {
font-size: clamp(2rem, 8.5vw, 2.55rem);
line-height: 1.12;
letter-spacing: 0;
margin-bottom: 0.9rem !important;
}
.decennale-page .decennale-title-accent {
margin-top: 0.12rem;
line-height: 1.14;
}
.decennale-page .decennale-lead {
font-size: 0.98rem;
line-height: 1.58;
margin-bottom: 1rem !important;
}
.decennale-page .decennale-hero-cta {
margin-bottom: 0 !important;
}
.decennale-page .decennale-hero-cta .btn-hero-primary {
width: 100%;
min-height: 50px;
justify-content: center;
padding: 13px 18px;
}
.decennale-page .decennale-hero-cta .btn-hero-ghost {
display: none;
}
.decennale-page .decennale-trust-chips--desktop {
display: none;
}
.decennale-page .decennale-trust-chips--mobile {
display: flex;
margin-top: 1rem;
}
.decennale-page .decennale-trust-chips--mobile > li {
border-radius: 14px;
padding: 0.55rem 0.7rem;
font-size: 0.74rem;
}
.decennale-page .decennale-quote-card {
margin-top: 0;
}
}
.decennale-page .decennale-quote-card {
border-top: 4px solid var(--color-accent);
box-shadow:
0 14px 44px rgba(63, 140, 69, 0.14),
0 4px 14px rgba(29, 64, 97, 0.06);
}
.decennale-page .decennale-quote-card__head {
padding-bottom: 0.35rem;
margin-bottom: 0.25rem;
border-bottom: 1px solid rgba(29, 64, 97, 0.08);
}
.decennale-page .decennale-quote-card__head-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.65rem;
}
.decennale-page .decennale-quote-card__head-top h5 {
font-size: 1.15rem;
font-weight: 700;
color: var(--text-main);
}
.decennale-page .decennale-form-pill {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--green-dark);
background: var(--color-accent-muted);
padding: 0.35rem 0.55rem;
border-radius: var(--radius-sm);
white-space: nowrap;
}
.decennale-page .decennale-form-hook {
font-size: 0.88rem;
line-height: 1.55;
color: var(--text-muted);
}
.decennale-page .decennale-form-footnote {
border-top: 1px dashed rgba(29, 64, 97, 0.12);
padding-top: 0.85rem;
margin-top: 0.5rem;
}
.decennale-page .decennale-seo-hub {
background: var(--white);
}
.decennale-page .decennale-seo-band--intro {
background: var(--color-bg);
border-bottom: 1px solid var(--navbar-border-subtle);
}
.decennale-page .decennale-seo-kicker {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 0.75rem;
}
.decennale-page .decennale-seo-kicker-dot {
width: 0.45rem;
height: 0.45rem;
border-radius: 2px;
background: var(--color-accent);
}
.decennale-page .decennale-seo-band--split {
background: var(--white);
}
.decennale-page .decennale-seo-band--split-pad {
padding-bottom: 4rem;
}
@media (min-width: 992px) {
.decennale-page .decennale-seo-band--split-pad {
padding-top: 3.25rem;
padding-bottom: 5rem;
}
}
.decennale-page .decennale-seo-split-heading {
color: var(--text-main);
letter-spacing: -0.02em;
line-height: 1.2;
}
.decennale-page .decennale-seo-icon-list {
margin: 0;
padding: 0;
}
.decennale-page .decennale-seo-icon-item {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.decennale-page .decennale-seo-icon-item:last-child {
margin-bottom: 0;
}
.decennale-page .decennale-seo-icon-badge {
flex-shrink: 0;
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, var(--green-light) 0%, var(--green-soft) 100%);
color: var(--green-dark);
font-size: 1.35rem;
}
.decennale-page .decennale-seo-visual-wrap {
position: relative;
padding-bottom: 2rem;
}
.decennale-page .decennale-seo-mosaic {
position: relative;
height: clamp(200px, 28vw, 260px);
border-radius: var(--radius-xl);
overflow: hidden;
background: linear-gradient(165deg, var(--green-light) 0%, var(--hero-surface) 55%, var(--blue-pale) 100%);
}
.decennale-page .decennale-seo-mosaic__shape {
position: absolute;
border-radius: 50%;
opacity: 0.88;
}
.decennale-page .decennale-seo-mosaic__shape--1 {
width: 140px;
height: 140px;
background: var(--color-accent);
top: -36px;
left: -28px;
}
.decennale-page .decennale-seo-mosaic__shape--2 {
width: 88px;
height: 88px;
background: var(--green-dark);
opacity: 0.35;
top: 42%;
left: 18%;
}
.decennale-page .decennale-seo-mosaic__shape--3 {
width: 120px;
height: 120px;
background: var(--color-accent);
opacity: 0.42;
bottom: -40px;
left: 8%;
}
.decennale-page .decennale-seo-mosaic__shape--4 {
width: 72px;
height: 72px;
background: var(--green-deeper);
opacity: 0.38;
top: 12%;
right: 22%;
}
.decennale-page .decennale-seo-mosaic__shape--5 {
width: 160px;
height: 160px;
background: var(--green-soft);
opacity: 0.65;
bottom: -50px;
right: -30px;
}
.decennale-page .decennale-seo-float-card {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
max-width: min(280px, 92%);
padding: 1.25rem 1.35rem;
background: var(--white);
border-radius: var(--radius-md);
border-top: 3px solid var(--color-accent);
box-shadow:
0 18px 48px rgba(63, 140, 69, 0.12),
0 4px 14px rgba(29, 64, 97, 0.06);
z-index: 3;
}
.decennale-page .decennale-seo-float-card__title {
font-weight: 700;
font-size: 1rem;
color: var(--text-main);
margin: 0;
}
.decennale-page .decennale-seo-float-card__stat {
display: flex;
align-items: center;
gap: 0.65rem;
margin: 0.75rem 0;
}
.decennale-page .decennale-seo-float-card__stat-num {
flex-shrink: 0;
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.95rem;
background: var(--color-accent-muted);
color: var(--green-dark);
}
.decennale-page .decennale-seo-float-card__stat-label {
font-size: 0.75rem;
line-height: 1.35;
color: var(--text-muted);
}
.decennale-page .decennale-seo-float-card__text {
line-height: 1.45;
}
.decennale-page .decennale-seo-overlap-photo {
margin-top: -2.5rem;
position: relative;
z-index: 2;
}
.decennale-page .decennale-seo-figure-media {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow:
0 16px 48px rgba(63, 140, 69, 0.14),
0 4px 16px rgba(29, 64, 97, 0.06);
border: 4px solid var(--white);
}
.decennale-page .decennale-seo-img {
width: 100%;
height: auto;
display: block;
}
.decennale-page .decennale-seo-caption {
margin: 0;
padding: 0.85rem 0 0;
font-size: 0.875rem;
line-height: 1.55;
color: var(--text-muted);
}
@media (max-width: 991px) {
.decennale-page .decennale-seo-float-card {
position: relative;
top: auto;
right: auto;
transform: none;
max-width: none;
margin: -2rem 0 1rem;
}
.decennale-page .decennale-seo-visual-wrap {
padding-bottom: 0;
}
.decennale-page .decennale-seo-overlap-photo {
margin-top: 1rem;
}
}
.decennale-page .decennale-seo-band--zigzag {
background: var(--color-bg);
border-top: 1px solid var(--navbar-border-subtle);
}
.decennale-page .decennale-seo-stagger-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 576px) {
.decennale-page .decennale-seo-stagger-grid {
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
.decennale-page .decennale-seo-mini-card--push {
margin-top: 2rem;
}
}
.decennale-page .decennale-seo-mini-card {
background: var(--white);
border-radius: var(--radius-md);
padding: 1.25rem 1.35rem;
box-shadow:
0 10px 36px rgba(29, 64, 97, 0.08),
0 2px 10px rgba(29, 64, 97, 0.04);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.decennale-page .decennale-seo-mini-card:hover {
transform: translateY(-3px);
box-shadow:
0 18px 44px rgba(63, 140, 69, 0.12),
0 4px 14px rgba(29, 64, 97, 0.06);
}
.decennale-page .decennale-seo-mini-card__icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.65rem;
background: var(--color-accent-muted);
color: var(--green-dark);
font-size: 1.15rem;
}
.decennale-page .decennale-seo-mini-card__title {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.4rem;
}
.decennale-page .decennale-seo-mini-card__title .bi-arrow-right-short {
vertical-align: -0.1em;
opacity: 0.65;
transition: transform 0.2s ease;
}
.decennale-page .decennale-seo-mini-card:hover .decennale-seo-mini-card__title .bi-arrow-right-short {
transform: translateX(3px);
}
.decennale-page .decennale-seo-mini-card__text {
font-size: 0.9rem;
line-height: 1.55;
}
.decennale-page .decennale-seo-zigzag-heading {
color: var(--text-main);
letter-spacing: -0.02em;
}
.decennale-page .decennale-seo-lead-muted {
font-size: 1.05rem;
}
.decennale-page .decennale-seo-diamond-list > li {
position: relative;
padding-left: 1.35rem;
margin-bottom: 1.15rem;
}
.decennale-page .decennale-seo-diamond-list > li:last-child {
margin-bottom: 0;
}
.decennale-page .decennale-seo-diamond-list > li::before {
content: "";
position: absolute;
left: 0;
top: 0.4rem;
width: 0.55rem;
height: 0.55rem;
background: var(--color-accent-muted);
border: 2px solid var(--color-accent);
transform: rotate(45deg);
}
.decennale-page .decennale-seo-cta-btn {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.5rem;
font-weight: 600;
border-radius: var(--radius-md);
background: var(--color-accent);
color: var(--white);
border: none;
text-decoration: none;
box-shadow: 0 6px 22px var(--shadow-green);
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.decennale-page .decennale-seo-cta-btn:hover {
background: var(--green-dark);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(63, 140, 69, 0.35);
}
.decennale-page .decennale-seo-cta-btn:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 3px;
}
.decennale-page .decennale-seo-dark-card__link:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
border-radius: 4px;
}
/* Assurance décennale — guide section inspired by image-led insurance layouts */
.decennale-page .decennale-seo-hub .decennale-seo-band--split {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, #ffffff 0%, #ffffff 72%, rgba(229, 241, 225, 0.45) 100%);
}
.decennale-page .decennale-seo-hub .decennale-seo-band--split-pad {
padding-top: clamp(4rem, 6vw, 5.5rem);
padding-bottom: clamp(4.75rem, 7vw, 6.5rem);
}
.decennale-page .decennale-about-layout {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
gap: clamp(2.5rem, 6vw, 5.5rem);
align-items: center;
}
.decennale-page .decennale-about-media {
position: relative;
min-height: clamp(430px, 46vw, 620px);
}
.decennale-page .decennale-about-photo {
position: absolute;
overflow: hidden;
background: var(--color-accent-muted);
border-radius: 8px;
box-shadow: 0 24px 58px rgba(29, 64, 97, 0.14);
}
.decennale-page .decennale-about-photo--main {
inset: 0 13% 12% 0;
}
.decennale-page .decennale-about-photo--inset {
right: 0;
bottom: 0;
width: min(56%, 430px);
aspect-ratio: 4 / 3;
border: 6px solid #ffffff;
box-shadow: 0 24px 52px rgba(29, 64, 97, 0.16);
z-index: 2;
}
.decennale-page .decennale-about-img,
.decennale-page .decennale-zig-img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
}
.decennale-page .decennale-about-photo .flexassur-photo,
.decennale-page .decennale-zig-photo .flexassur-photo {
height: 100%;
max-height: none;
}
.decennale-page .decennale-about-pattern {
position: absolute;
pointer-events: none;
}
.decennale-page .decenn-about-placeholder {
display: none;
}
.decennale-page .decennale-about-pattern--triangles {
top: -1.5rem;
left: -2.2rem;
width: 10rem;
height: 7.5rem;
opacity: 0.28;
background-image: radial-gradient(circle at center, rgba(63, 140, 69, 0.55) 0 2px, transparent 2.5px);
background-size: 1.05rem 1.05rem;
}
.decennale-page .decennale-about-pattern--zigzag {
left: 16%;
bottom: 0.4rem;
width: 12rem;
height: 2.2rem;
opacity: 0.45;
background:
linear-gradient(135deg, transparent 42%, rgba(255, 105, 0, 0.35) 42% 55%, transparent 55%) 0 0 / 2.2rem 2.2rem repeat-x;
}
.decennale-page .decennale-about-copy {
padding-block: clamp(0.5rem, 2vw, 1.5rem);
}
.decennale-page .decennale-about-pill {
display: inline-flex;
align-items: center;
margin-bottom: clamp(1rem, 2vw, 1.35rem);
padding: 0.48rem 1rem;
color: var(--green-dark);
background: #ffffff;
border: 1px solid rgba(63, 140, 69, 0.2);
border-radius: 999px;
font-family: 'Sora', sans-serif;
font-size: 0.82rem;
font-weight: 800;
}
.decennale-page .decennale-seo-split-heading {
margin: 0 0 clamp(1.1rem, 2vw, 1.5rem);
color: var(--green-deeper);
font-size: clamp(2.15rem, 3.7vw, 3.8rem);
line-height: 1.08;
letter-spacing: 0;
}
.decennale-page .decennale-about-lede,
.decennale-page .decennale-about-text {
max-width: 43rem;
color: var(--text-muted);
font-size: clamp(1rem, 1.15vw, 1.08rem);
line-height: 1.78;
}
.decennale-page .decennale-about-lede {
margin-bottom: 0.9rem;
}
.decennale-page .decennale-about-lede strong,
.decennale-page .decennale-about-text strong {
color: var(--green-deeper);
}
.decennale-page .decennale-about-actions {
display: flex;
flex-wrap: wrap;
gap: 0.8rem 1.35rem;
align-items: center;
margin-top: clamp(1.35rem, 3vw, 2.1rem);
}
.decennale-page .decennale-about-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 3.15rem;
padding: 0.85rem 1.25rem;
border-radius: 8px;
font-weight: 800;
text-decoration: none;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.decennale-page .decennale-about-btn:hover {
transform: translateY(-2px);
}
.decennale-page .decennale-about-btn--primary {
color: #ffffff;
background: var(--color-accent);
border: 1px solid var(--color-accent);
box-shadow: 0 12px 28px rgba(63, 140, 69, 0.24);
}
.decennale-page .decennale-about-btn--primary:hover {
color: #ffffff;
background: var(--green-dark);
border-color: var(--green-dark);
}
.decennale-page .decennale-about-btn--link {
color: var(--green-dark);
background: transparent;
border: 1px solid transparent;
}
.decennale-page .decennale-about-btn--link:hover {
color: var(--green-deeper);
background: var(--green-light);
border-color: rgba(63, 140, 69, 0.16);
}
.decennale-page .decennale-about-stats {
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 3vw, 2rem);
margin: clamp(2.1rem, 4vw, 3rem) 0 0;
padding: clamp(1.25rem, 3vw, 1.75rem) 0 0;
border-top: 1px solid rgba(29, 64, 97, 0.1);
}
.decennale-page .decennale-about-stats li {
min-width: 0;
}
.decennale-page .decennale-about-stats span {
display: block;
color: var(--green-deeper);
font-family: 'Sora', sans-serif;
font-size: clamp(1.45rem, 2.5vw, 2rem);
font-weight: 800;
line-height: 1.1;
}
.decennale-page .decennale-about-stats strong {
display: block;
margin-top: 0.35rem;
color: var(--text-muted);
font-size: 0.86rem;
line-height: 1.35;
}
/* Assurance décennale — dark green editorial section */
.decennale-page .decennale-seo-band--zigzag {
position: relative;
overflow: hidden;
padding-top: clamp(4.75rem, 7vw, 6.5rem) !important;
padding-bottom: clamp(4.75rem, 7vw, 6.5rem) !important;
background:
radial-gradient(circle at 86% 70%, rgba(126, 224, 138, 0.08), transparent 24rem),
linear-gradient(135deg, #143f34 0%, #123b33 48%, #0f332d 100%);
border-top: 0;
color: #ffffff;
}
.decennale-page .decennale-zig-layout {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(2.25rem, 6vw, 5.25rem);
align-items: center;
}
.decennale-page .decennale-zig-pill {
display: inline-flex;
align-items: center;
margin-bottom: clamp(1.25rem, 2vw, 1.65rem);
padding: 0.48rem 1rem;
color: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
font-weight: 800;
font-size: 0.84rem;
}
.decennale-page .decennale-seo-zigzag-heading {
margin: 0 0 clamp(1.3rem, 2.5vw, 1.8rem);
max-width: 14ch;
color: #ffffff;
font-size: clamp(2.45rem, 4.4vw, 4.6rem);
line-height: 1.08;
letter-spacing: 0;
}
.decennale-page .decennale-zig-lede {
max-width: 42rem;
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-size: clamp(1rem, 1.2vw, 1.1rem);
line-height: 1.78;
}
.decennale-page .decennale-zig-checks {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem 1.35rem;
margin: clamp(2rem, 4vw, 3rem) 0 0;
padding: 0;
}
.decennale-page .decennale-zig-checks li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
color: rgba(255, 255, 255, 0.92);
font-size: 0.94rem;
font-weight: 700;
line-height: 1.45;
}
.decennale-page .decennale-zig-checks i {
margin-top: 0.12rem;
color: var(--color-spark);
font-size: 1.1rem;
}
.decennale-page .decennale-zig-cta {
margin-top: clamp(1.4rem, 3vw, 2rem);
background: #ffffff;
color: var(--green-deeper);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}
.decennale-page .decennale-zig-cta:hover {
background: var(--color-spark);
color: #ffffff;
}
.decennale-page .decennale-zig-media {
position: relative;
min-height: clamp(430px, 42vw, 560px);
}
.decennale-page .decennale-zig-photo {
position: absolute;
overflow: hidden;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22);
}
.decennale-page .decennale-zig-photo--main {
inset: 0 0 16% 14%;
}
.decennale-page .decennale-zig-photo--small {
left: 0;
bottom: 0;
width: min(50%, 360px);
aspect-ratio: 4 / 3;
border: 6px solid #123b33;
z-index: 2;
}
.decennale-page .decennale-zig-dots {
position: absolute;
right: 12%;
bottom: 5%;
width: 12rem;
height: 3rem;
opacity: 0.26;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 2px, transparent 2.5px);
background-size: 0.85rem 0.85rem;
}
@media (max-width: 991px) {
.decennale-page .decennale-about-layout,
.decennale-page .decennale-zig-layout {
grid-template-columns: 1fr;
}
.decennale-page .decennale-about-media,
.decennale-page .decennale-zig-media {
min-height: clamp(420px, 80vw, 560px);
}
.decennale-page .decennale-about-copy {
padding-block: 0;
}
.decennale-page .decennale-seo-zigzag-heading {
max-width: none;
}
}
@media (max-width: 575px) {
.decennale-page .decennale-about-pattern--triangles {
left: 0;
}
.decennale-page .decennale-about-photo--main {
inset: 0 0 22% 0;
}
.decennale-page .decennale-about-photo--inset {
width: 68%;
}
.decennale-page .decennale-about-stats,
.decennale-page .decennale-zig-checks {
grid-template-columns: 1fr;
}
.decennale-page .decennale-zig-photo--main {
inset: 0 0 18% 0;
}
.decennale-page .decennale-zig-photo--small {
width: 68%;
}
}
.decennale-page .decennale-seo-band--dark {
position: relative;
overflow: hidden;
}
.decennale-page .decennale-seo-band--dark-pad {
padding-top: 3.25rem;
padding-bottom: 3.5rem;
}
.decennale-page .decennale-seo-dark-bg {
position: absolute;
inset: 0;
background:
linear-gradient(
122deg,
rgba(49, 107, 53, 0.96) 0%,
rgba(38, 84, 42, 0.94) 35%,
rgba(29, 64, 97, 0.9) 100%
),
radial-gradient(ellipse 88% 72% at 18% 28%, rgba(63, 140, 69, 0.42) 0%, transparent 58%),
radial-gradient(ellipse 70% 55% at 92% 78%, rgba(63, 140, 69, 0.28) 0%, transparent 50%),
var(--green-dark);
pointer-events: none;
}
.decennale-page .decennale-seo-dark-bg::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.1;
background-image: var(--hero-surface-pattern);
pointer-events: none;
}
.decennale-page .decennale-seo-dark-title {
font-size: clamp(1.35rem, 3vw, 1.85rem);
letter-spacing: -0.02em;
}
.decennale-page .decennale-seo-dark-card {
background: var(--white);
border-radius: var(--radius-md);
padding: 1.5rem 1.5rem 1.35rem;
height: 100%;
border-top: 3px solid var(--color-accent);
box-shadow: 0 12px 40px rgba(38, 84, 42, 0.16);
}
.decennale-page .decennale-seo-dark-card__title {
font-size: 1.08rem;
font-weight: 700;
color: var(--green-dark);
margin-bottom: 0.65rem;
}
.decennale-page .decennale-seo-dark-card__text {
font-size: 0.92rem;
line-height: 1.6;
color: var(--text-muted);
}
.decennale-page .decennale-seo-dark-card__link {
font-weight: 600;
font-size: 0.88rem;
color: var(--green-dark);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.2rem;
}
.decennale-page .decennale-seo-dark-card__link:hover {
color: var(--color-accent);
}
.decennale-page .decennale-seo-band--grid {
background: var(--white);
}
.decennale-page .decennale-seo-band--grid-pad {
padding-top: 3rem;
padding-bottom: 3.25rem;
}
.decennale-page .decennale-seo-grid-title {
color: var(--text-main);
letter-spacing: -0.02em;
font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}
.decennale-page .decennale-seo-grid-sub {
max-width: 36rem;
}
.decennale-page .decennale-seo-grid-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.decennale-page .decennale-seo-grid-icon {
flex-shrink: 0;
width: 3.85rem;
height: 3.85rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-accent);
color: var(--white);
font-size: 1.42rem;
box-shadow: 0 4px 14px rgba(63, 140, 69, 0.35);
}
.decennale-page .decennale-seo-grid-item__title {
font-size: 1.02rem;
font-weight: 700;
margin-bottom: 0.35rem;
color: var(--green-dark);
}
.decennale-page .decennale-seo-grid-item__text {
font-size: 0.92rem;
line-height: 1.55;
}
.decennale-page .decennale-seo-band--closing {
background: linear-gradient(180deg, var(--green-light) 0%, var(--hero-surface) 100%);
}
.decennale-page .decennale-seo-title {
color: var(--text-main);
letter-spacing: -0.02em;
}
.decennale-page .decennale-seo-intro {
font-size: 1.05rem;
line-height: 1.65;
max-width: 46rem;
}
@media (prefers-reduced-motion: reduce) {
.decennale-page .decennale-hero-wa,
.decennale-page .decennale-hero-wa:hover,
.decennale-page .decennale-seo-mini-card,
.decennale-page .decennale-seo-mini-card:hover,
.decennale-page .decennale-seo-cta-btn,
.decennale-page .decennale-seo-cta-btn:hover {
transition: none;
transform: none;
}
}
/* ─── Page Nos Assurances ─── */
.nos-assurances-page {
background: var(--color-bg);
}
.nos-assurances-page .nos-assurances-hero {
background: var(--hero-surface);
background-image: var(--hero-surface-pattern);
border-bottom: 1px solid var(--navbar-border-subtle);
}
.nos-assurances-page .nos-assurances-overline {
letter-spacing: 0.06em;
color: var(--color-accent);
}
.nos-assurances-page .nos-assurances-title {
color: var(--text-main);
letter-spacing: -0.02em;
}
.nos-assurances-page .nos-assurances-lead {
color: var(--text-muted);
}
.nos-assurances-page .services-section .service-card {
height: 100%;
}
/* ─── Page Contact — fond blanc, touches vert marque ─── */
.contact-page {
background: var(--white);
}
.contact-page .contact-hero-intro {
position: relative;
isolation: isolate;
overflow: hidden;
padding-top: clamp(3rem, 6vw, 4.5rem) !important;
padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
background:
linear-gradient(155deg, rgba(26, 71, 42, 0.9) 0%, rgba(63, 140, 69, 0.84) 52%, rgba(53, 122, 60, 0.88) 100%),
var(--contact-hero-image, none) center center / cover no-repeat;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.contact-page .contact-hero-intro::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: url("assets/contact-hero-pattern.svg") center center / cover no-repeat;
opacity: 0.22;
pointer-events: none;
mix-blend-mode: soft-light;
}
.contact-page .contact-hero-intro > .container {
position: relative;
z-index: 1;
}
.contact-page .contact-content {
background: var(--white);
}
.contact-page .contact-overline {
letter-spacing: 0.06em;
color: var(--color-accent);
}
.contact-page .contact-hero-intro .contact-overline {
color: rgba(255, 255, 255, 0.88);
}
.contact-page .contact-hero-intro .contact-title {
color: var(--white);
letter-spacing: -0.02em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.contact-page .contact-hero-intro .contact-lead.lead {
color: rgba(255, 255, 255, 0.94);
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
.contact-page .contact-hero-intro .contact-lead-strong {
color: var(--white);
font-weight: 700;
}
.contact-page .contact-hero-intro .contact-lead-form-link {
color: var(--white);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.55);
text-underline-offset: 0.2em;
}
.contact-page .contact-hero-intro .contact-lead-form-link:hover {
color: var(--white);
text-decoration-color: var(--white);
}
.contact-page .contact-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
padding: 1.35rem 1.15rem;
background: var(--white);
border: 1px solid var(--navbar-border-subtle);
border-radius: var(--radius-md);
box-shadow: 0 10px 32px rgba(29, 64, 97, 0.07);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.contact-page .contact-card--link {
text-decoration: none;
color: inherit;
}
.contact-page .contact-card--link:hover {
transform: translateY(-4px);
border-color: rgba(63, 140, 69, 0.45);
box-shadow: 0 16px 42px rgba(63, 140, 69, 0.14), 0 4px 14px rgba(29, 64, 97, 0.06);
}
.contact-page .contact-card--whatsapp:hover {
border-color: rgba(37, 211, 102, 0.55);
}
.contact-page .contact-card__icon {
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.65rem;
background: var(--color-accent-muted);
color: var(--green-dark);
font-size: 1.25rem;
}
.contact-page .contact-card--whatsapp .contact-card__icon {
background: rgba(37, 211, 102, 0.18);
color: #128c7e;
}
.contact-page .contact-card__label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin-bottom: 0.35rem;
}
.contact-page .contact-card__value {
font-weight: 700;
font-size: 1rem;
color: var(--text-main);
line-height: 1.35;
word-break: break-word;
}
.contact-page .contact-card__hint {
margin-top: 0.5rem;
font-size: 0.78rem;
color: var(--text-muted);
}
.contact-page .contact-card--hours .contact-card__value {
font-weight: 500;
}
.contact-page .contact-hours-list {
list-style: none;
margin: 0.35rem 0 0;
padding: 0;
font-size: 0.92rem;
font-weight: 600;
color: var(--text-main);
line-height: 1.5;
}
.contact-page .contact-location-overline {
letter-spacing: 0.06em;
color: var(--color-accent);
}
.contact-page .contact-location-card {
padding: 1.5rem 1.35rem;
background: var(--white);
border: 1px solid var(--navbar-border-subtle);
border-radius: var(--radius-lg);
border-left: 4px solid var(--color-accent);
box-shadow: 0 14px 44px rgba(29, 64, 97, 0.07);
}
.contact-page .contact-location-address {
font-style: normal;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.55;
color: var(--text-main);
margin-bottom: 0;
}
.contact-page .contact-map-wrap {
height: 100%;
min-height: 14rem;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--navbar-border-subtle);
box-shadow: 0 14px 44px rgba(29, 64, 97, 0.09);
background: var(--white);
}
.contact-page .contact-map-ratio {
min-height: 260px;
}
.contact-page .contact-map-frame {
border: 0;
}
.contact-page .contact-map-fallback {
min-height: 260px;
}
.contact-page .contact-form-panel {
padding: 1.75rem 1.5rem 2rem;
background: var(--white);
border: 1px solid var(--navbar-border-subtle);
border-left: 4px solid var(--color-accent);
border-radius: var(--radius-lg);
box-shadow: 0 14px 44px rgba(29, 64, 97, 0.09);
}
@media (min-width: 992px) {
.contact-page .contact-form-panel {
padding: 2rem 2.25rem 2.35rem;
}
}
.contact-page .contact-form-panel__title {
color: var(--text-main);
letter-spacing: -0.02em;
}
.contact-page .contact-form-panel a:not([class*="btn"]) {
color: var(--color-accent);
font-weight: 600;
text-underline-offset: 0.15em;
}
.contact-page .contact-form-panel a:not([class*="btn"]):hover {
color: var(--green-dark);
}
.contact-page .contact-form-benefits {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.contact-page .contact-form-benefits li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.92rem;
color: var(--text-muted);
line-height: 1.45;
}
.contact-page .contact-form-benefits li .bi-check-lg {
flex-shrink: 0;
margin-top: 0.12rem;
color: var(--color-accent);
font-size: 1.05rem;
}
.contact-page .contact-message-card.quote-card {
box-shadow:
0 24px 64px rgba(29, 64, 97, 0.09),
0 8px 22px rgba(63, 140, 69, 0.07),
0 0 0 1px rgba(63, 140, 69, 0.2);
}
.contact-page .contact-message-card.quote-card::before {
background: linear-gradient(90deg, var(--color-accent) 0%, #5aae60 50%, var(--color-accent) 100%);
}
.contact-page .contact-message-card .devis-fieldset-legend::before {
background: var(--color-accent);
}
.contact-page .contact-message-card .trust-row i {
color: var(--color-accent);
}
.contact-page .contact-message-card textarea.form-control-custom {
min-height: 8.5rem;
resize: vertical;
}
.contact-page .contact-thankyou.devis-thankyou {
margin-bottom: 0;
}
.contact-page .contact-thankyou.devis-thankyou--inline {
background: var(--white);
border: 1px solid rgba(63, 140, 69, 0.28);
border-left: 4px solid var(--color-accent);
}
.contact-page .contact-thankyou .devis-thankyou__icon {
color: var(--color-accent);
}
.contact-page .contact-thankyou .devis-thankyou__title {
color: var(--green-dark);
}
.contact-page .contact-cta-band {
margin-top: 2.5rem;
padding: 1.75rem 1.5rem;
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid rgba(63, 140, 69, 0.22);
box-shadow: 0 12px 36px rgba(29, 64, 97, 0.06);
}
.contact-page .contact-cta-band__inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: stretch;
}
@media (min-width: 992px) {
.contact-page .contact-cta-band__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.contact-page .contact-cta-band__text {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.95rem;
color: var(--text-muted);
text-align: center;
}
@media (min-width: 992px) {
.contact-page .contact-cta-band__text {
text-align: left;
max-width: 26rem;
}
}
.contact-page .contact-cta-band__text strong {
color: var(--text-main);
font-size: 1.05rem;
}
.contact-page .contact-cta-band__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
justify-content: center;
}
@media (min-width: 992px) {
.contact-page .contact-cta-band__actions {
justify-content: flex-end;
}
}
.contact-page .contact-cta-band .btn-outline-primary {
border-width: 2px;
border-color: var(--color-primary);
color: var(--color-primary);
font-weight: 600;
}
.contact-page .contact-cta-band .btn-outline-primary:hover {
background: var(--color-accent-muted);
border-color: var(--color-accent);
color: var(--green-dark);
}
.contact-page .contact-cta-band .btn-outline-secondary {
border-width: 2px;
color: var(--text-muted);
border-color: rgba(29, 64, 97, 0.22);
font-weight: 600;
}
.contact-page .contact-cta-band .btn-outline-secondary:hover {
border-color: var(--color-accent);
color: var(--green-dark);
background: var(--white);
}
.contact-page .contact-legal-note {
margin-top: 2rem;
max-width: 44rem;
margin-left: auto;
margin-right: auto;
line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
.contact-page .contact-card--link:hover {
transform: none;
}
}
/* ─── Page À propos — hero avec image de fond ─── */
.a-propos-page {
background: var(--white);
}
.a-propos-page .a-propos-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding-top: clamp(3rem, 6vw, 4.5rem) !important;
padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
background:
linear-gradient(155deg, rgba(26, 71, 42, 0.9) 0%, rgba(63, 140, 69, 0.84) 52%, rgba(53, 122, 60, 0.88) 100%),
var(--a-propos-hero-image, none) center / cover no-repeat;
}
.a-propos-page .a-propos-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.a-propos-page .a-propos-hero > .container {
position: relative;
z-index: 1;
}
.a-propos-page .a-propos-overline {
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.82);
}
.a-propos-page .a-propos-title {
color: #ffffff;
letter-spacing: -0.02em;
}
.a-propos-page .a-propos-lead {
color: rgba(255, 255, 255, 0.92);
max-width: 42rem;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
/* ─── Page Mentions légales ─── */
.legal-page {
background: var(--white);
}
.legal-page .legal-hero {
background: var(--hero-surface);
background-image: var(--hero-surface-pattern);
border-bottom: 1px solid var(--navbar-border-subtle);
}
.legal-page .legal-overline {
letter-spacing: 0.06em;
color: var(--color-accent);
}
.legal-page .legal-title {
color: var(--text-main);
letter-spacing: -0.02em;
}
.legal-page .legal-content {
padding-top: clamp(2.5rem, 5vw, 3.5rem) !important;
padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
}
.legal-page .legal-summary-card {
position: sticky;
top: 6.5rem;
padding: clamp(1.5rem, 3vw, 2rem);
border-radius: 12px;
border: 1px solid rgba(29, 64, 97, 0.08);
background: linear-gradient(165deg, #ffffff 0%, rgba(63, 140, 69, 0.04) 100%);
box-shadow: 0 18px 48px rgba(29, 64, 97, 0.08);
}
.legal-page .legal-summary-kicker {
display: inline-block;
margin-bottom: 0.75rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgba(63, 140, 69, 0.1);
color: var(--color-accent);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.legal-page .legal-summary-title {
color: var(--text-main);
}
.legal-page .legal-summary-list {
display: grid;
gap: 1rem;
margin: 0 0 1.5rem;
}
.legal-page .legal-summary-list dt {
margin-bottom: 0.15rem;
color: var(--text-muted);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.legal-page .legal-summary-list dd {
margin: 0;
color: var(--text-main);
line-height: 1.55;
}
.legal-page .legal-summary-list a {
color: var(--color-accent);
text-decoration: none;
}
.legal-page .legal-summary-list a:hover {
text-decoration: underline;
}
.legal-page .legal-summary-badges {
display: grid;
gap: 0.65rem;
margin: 0;
padding: 0;
list-style: none;
}
.legal-page .legal-summary-badges li {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.7rem 0.85rem;
border-radius: 8px;
background: rgba(29, 64, 97, 0.04);
color: var(--text-main);
font-size: 0.88rem;
font-weight: 600;
}
.legal-page .legal-summary-badges i {
color: var(--color-accent);
}
.legal-page .legal-sections {
display: grid;
gap: 1.25rem;
}
.legal-page .legal-section {
padding: clamp(1.35rem, 3vw, 1.75rem);
border-radius: 12px;
border: 1px solid rgba(29, 64, 97, 0.08);
background: #ffffff;
box-shadow: 0 10px 28px rgba(29, 64, 97, 0.05);
}
.legal-page .legal-section__head {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(29, 64, 97, 0.08);
}
.legal-page .legal-section__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 10px;
background: rgba(63, 140, 69, 0.12);
color: var(--color-accent);
font-size: 1.1rem;
flex-shrink: 0;
}
.legal-page .legal-section__title {
color: var(--text-main);
}
.legal-page .legal-section__body {
color: var(--text-muted);
line-height: 1.75;
}
.legal-page .legal-section__body p:last-child {
margin-bottom: 0;
}
.legal-page .legal-section__body ul {
margin: 0.75rem 0 1rem;
padding-left: 1.25rem;
}
.legal-page .legal-section__body li {
margin-bottom: 0.35rem;
}
.legal-page .legal-section__body a {
color: var(--color-accent);
text-decoration: none;
}
.legal-page .legal-section__body a:hover {
text-decoration: underline;
}
.legal-page .legal-footer-note {
margin-top: 1.5rem;
padding: 1rem 1.15rem;
border-radius: 10px;
background: rgba(63, 140, 69, 0.08);
color: var(--text-main);
font-size: 0.92rem;
line-height: 1.65;
}
.legal-page .legal-footer-note a {
color: var(--color-accent);
text-decoration: none;
font-weight: 600;
}
.legal-page .legal-footer-note a:hover {
text-decoration: underline;
}
@media (max-width: 991.98px) {
.legal-page .legal-summary-card {
position: static;
}
}
/* === FIX MOBILE HORIZONTAL WHITE SPACE === */
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
img,
video,
iframe,
svg {
max-width: 100%;
height: auto;
}