/* ===== Public Site Styles ===== */
/* Uses CSS custom properties set by SiteThemeViewComponent */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px; /* user 2026-07-14 : les ancres (#offres, #avantages…) ne passent plus sous la nav fixe */
/* Zoom global (user 2026-05-26) : 88 → 84 → 80 → 76 → 80 → 77 → 75 % (user 2026-08-13) */
font-size: 75%;
}
@media (min-width: 1400px) {
html { font-size: 77%; }
}
@media (min-width: 1800px) {
html { font-size: 79%; }
}
@media (max-width: 720px) {
html { font-size: 79%; }
}
@media (max-width: 420px) {
html { font-size: 82%; }
}
body {
font-family: var(--body-font, 'TTForsRegular', sans-serif);
color: var(--text-color, #2e2d29);
background-color: var(--bg-color, #fafaf6);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
line-height: 1.3;
color: var(--text-color, #333);
}
a {
color: var(--primary-color, #c3e502);
text-decoration: none;
}
a:hover {
color: var(--secondary-color, #E23D28);
}
img {
max-width: 100%;
height: auto;
}
.container {
/* user 2026-06-10 : zoom global — élargissement de tous les containers */
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* ===== Navigation ===== */
.site-nav {
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
position: sticky;
top: 0;
z-index: 1000;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0.6rem 1.5rem 0; /* small top padding, menu aligns with the top of the logo */
display: flex;
align-items: flex-start; /* user request 2026-05-20 : align menu on top of the logo */
justify-content: space-between;
min-height: 70px;
}
/* Logo keeps its block layout, menu rides on its top edge */
.nav-brand { padding-top: 2px; }
.nav-links { padding-top: 0.85rem; }
.nav-brand {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color, #c3e502) !important;
text-decoration: none;
display: flex;
align-items: center;
}
.nav-logo {
height: 56px;
max-height: 56px;
width: auto;
display: block;
object-fit: contain;
flex-shrink: 0;
}
@media (max-width: 768px) {
.nav-logo {
height: 44px;
}
}
.nav-links {
list-style: none;
display: flex;
gap: 0.25rem;
}
.nav-links a {
display: block;
padding: 0.5rem 1rem;
color: var(--text-color, #333);
font-weight: 500;
font-size: 1.08rem;
border-radius: 6px;
transition: all 0.2s;
text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active {
background: var(--primary-color, #c3e502);
color: #fff;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--text-color, #333);
transition: all 0.3s;
}
/* Language Switcher */
.lang-switcher {
display: flex;
gap: 0.25rem;
margin-left: 1rem;
border-left: 1px solid #e0e0e0;
padding-left: 1rem;
}
.lang-link {
display: block;
padding: 0.35rem 0.6rem;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
border-radius: 4px;
color: var(--text-color, #2e2d29) !important;
text-decoration: none;
transition: all 0.2s;
}
.lang-link:hover {
background: var(--accent-color, #F7F7E8);
}
.lang-link.active {
background: var(--primary-color, #c3e502);
color: #fff !important;
}
/* CTA Button in Nav restyled 2026-05-20 : moins rond, plus pro, gradient subtil */
.nav-cta {
background: linear-gradient(135deg, #c3e502 0%, #a8c800 100%) !important;
color: var(--text-color, #2e2d29) !important;
border-radius: 10px !important;
padding: 0.62rem 1.15rem !important;
font-weight: 800 !important;
font-size: 0.88rem !important;
letter-spacing: 0.01em !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.40) inset,
0 4px 12px -4px rgba(74, 94, 2, 0.45),
0 1px 3px rgba(74, 94, 2, 0.20) !important;
transition: transform 0.2s cubic-bezier(.2,.8,.2,1),
box-shadow 0.2s cubic-bezier(.2,.8,.2,1),
background 0.2s ease !important;
}
.nav-cta:hover {
background: linear-gradient(135deg, #d1f000 0%, #b2d300 100%) !important;
color: var(--text-color, #2e2d29) !important;
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.50) inset,
0 6px 16px -4px rgba(74, 94, 2, 0.50),
0 2px 4px rgba(74, 94, 2, 0.25) !important;
}
/* Simple Dropdown Menus */
.nav-dropdown {
position: relative;
}
/* Extension de la zone de hover via pseudo-element invisible (user 2026-06-10)
Évite que le fond lime déborde sous le lien. */
.nav-dropdown > a,
.nav-mega > a {
position: relative;
z-index: 1002;
}
.nav-dropdown > a::after,
.nav-mega > a::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 26px;
background: transparent;
z-index: -1;
}
/* Dropdown menu redesigned 2026-05-20 + hover-intent 2026-05-25 */
.dropdown-menu {
position: absolute;
top: 100%;
margin-top: 8px;
left: -8px;
background: #ffffff;
min-width: 280px;
border-radius: 12px;
box-shadow:
0 24px 60px -16px rgba(46, 45, 41, 0.25),
0 6px 16px -8px rgba(46, 45, 41, 0.10);
padding: 0.4rem;
list-style: none;
z-index: 1001;
border: 1px solid rgba(46, 45, 41, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
pointer-events: none;
/* Délai 220 ms à la fermeture pour traverser le gap */
transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2,.8,.2,1),
visibility 0s linear 0.22s;
overflow: visible; /* permet l'affichage du bridge invisible au-dessus */
}
/* Bridge interactif au-dessus du dropdown (zone invisible 16 px) utilise ::after
pour ne pas écraser le ::before déjà utilisé pour la barre verte du haut. */
.dropdown-menu::after {
content: "";
position: absolute;
top: -16px;
left: 0;
right: 0;
height: 16px;
background: transparent;
}
.dropdown-menu::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-color, #c3e502) 0%, #4a5e02 100%);
border-radius: 12px 12px 0 0;
}
/* user 2026-09-23 : pointer-events: auto manquait -> le panneau etait visible mais
transparent au curseur, donc le hover se perdait des qu'on quittait le lien parent
et le sous-menu disparaissait (meme correctif que .mega-menu). */
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown .dropdown-menu:hover {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
/* Workflow-style cascade : each item reveals after the previous */
.dropdown-menu li {
opacity: 0;
transform: translateX(-12px);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.nav-dropdown:hover .dropdown-menu li,
.nav-dropdown:focus-within .dropdown-menu li {
opacity: 1;
transform: translateX(0);
}
.nav-dropdown:hover .dropdown-menu li:nth-child(1),
.nav-dropdown:focus-within .dropdown-menu li:nth-child(1) { transition-delay: 0.05s; }
.nav-dropdown:hover .dropdown-menu li:nth-child(2),
.nav-dropdown:focus-within .dropdown-menu li:nth-child(2) { transition-delay: 0.10s; }
.nav-dropdown:hover .dropdown-menu li:nth-child(3),
.nav-dropdown:focus-within .dropdown-menu li:nth-child(3) { transition-delay: 0.15s; }
.nav-dropdown:hover .dropdown-menu li:nth-child(4),
.nav-dropdown:focus-within .dropdown-menu li:nth-child(4) { transition-delay: 0.20s; }
.nav-dropdown:hover .dropdown-menu li:nth-child(5),
.nav-dropdown:focus-within .dropdown-menu li:nth-child(5) { transition-delay: 0.25s; }
.nav-dropdown:hover .dropdown-menu li:nth-child(6),
.nav-dropdown:focus-within .dropdown-menu li:nth-child(6) { transition-delay: 0.30s; }
.dropdown-menu a {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.7rem 0.9rem 0.7rem 0.9rem;
color: var(--text-color, #2e2d29);
font-weight: 600;
font-size: 0.92rem;
border-radius: 8px;
border-left: 3px solid transparent;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
text-decoration: none;
position: relative;
}
.dropdown-menu a::before {
content: "";
width: 6px;
height: 6px;
border-radius: 2px;
background: rgba(46, 45, 41, 0.20);
transition: background 0.18s ease, transform 0.18s ease;
flex-shrink: 0;
}
.dropdown-menu a:hover,
.dropdown-menu a.active {
background: rgba(195, 229, 2, 0.10);
color: var(--text-color, #2e2d29);
border-left-color: var(--primary-color, #c3e502);
}
.dropdown-menu a:hover::before,
.dropdown-menu a.active::before {
background: var(--primary-color, #c3e502);
transform: rotate(45deg) scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
.dropdown-menu,
.dropdown-menu li {
transition: none !important;
}
}
/* Mega Menu (user 2026-05-25 refonte hover-intent : visibility + delai à la fermeture
+ bridge interactif pour traverser le gap sans perdre le hover) */
.nav-mega {
position: static;
}
.mega-menu {
/* Toujours dans le DOM : on bascule visibility/opacity au lieu de display */
position: absolute;
top: 100%;
/* user 2026-07-06 : panneau centré, largeur DÉFINIE (horizontal), plus long (items sur 1 ligne) sans plein écran */
left: 50%;
right: auto;
width: min(1120px, 94vw);
background: #fff;
border-radius: 12px;
box-shadow: 0 18px 44px rgba(0,0,0,0.16);
padding: 1.3rem 1.6rem;
z-index: 1001;
border-top: 3px solid var(--primary-color, #c3e502);
visibility: hidden;
opacity: 0;
transform: translateX(-50%) translateY(-4px);
/* Délai 200 ms avant fermeture → temps pour traverser le gap */
transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2,.8,.2,1),
visibility 0s linear 0.22s;
pointer-events: none;
}
/* Bridge interactif INTERNE au mega-menu (zone invisible juste au-dessus)
→ quand visible, ce bridge garde le hover actif lors de la traversée. */
.mega-menu::before {
content: "";
position: absolute;
top: -22px;
left: 0;
right: 0;
height: 22px;
background: transparent;
}
.nav-mega:hover .mega-menu,
.nav-mega:focus-within .mega-menu,
.mega-menu:hover {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
/* Pas de délai à l'ouverture */
transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2,.8,.2,1),
visibility 0s linear 0s;
}
.mega-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
gap: 0.9rem;
max-width: 100%;
margin: 0 auto;
position: relative;
align-items: stretch;
padding: 0.2rem 0.25rem;
}
.mega-column {
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
/* Workflow step card full card click target, clean, no dashed line
user 2026-06-10 : espace explicite entre la pastille 01 et le mot + hauteur réduite */
.mega-heading {
display: flex;
align-items: center;
gap: 0.85rem;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
font-size: 0.95rem;
color: #2e2d29 !important;
padding: 0.7rem 1.3rem 0.7rem 0.7rem;
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 12px;
margin-bottom: 0;
text-decoration: none;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
position: relative;
overflow: hidden;
width: 100%;
box-shadow: 0 3px 10px -6px rgba(46, 45, 41, 0.12);
}
/* Subtle green accent bar that grows on hover (replaces dashed connector) */
.mega-heading::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: var(--primary-color, #c3e502);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
/* Step number bubble clearly numbered, anchors the workflow rhythm */
.mega-column:nth-child(1) .mega-heading::before { content: "01"; }
.mega-column:nth-child(2) .mega-heading::before { content: "02"; }
.mega-column:nth-child(3) .mega-heading::before { content: "03"; }
.mega-column:nth-child(4) .mega-heading::before { content: "04"; }
.mega-column:nth-child(5) .mega-heading::before { content: "05"; }
.mega-heading::before {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--primary-color, #c3e502) 0%, #a3c402 100%);
color: #2e2d29;
font-size: 0.82rem;
font-weight: 800;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
letter-spacing: 0;
padding: 0 4px;
margin-right: 0.6rem;
}
.mega-heading:hover {
background: #fafaf3;
border-color: rgba(195, 229, 2, 0.45);
color: #2e2d29 !important;
transform: translateY(-3px);
box-shadow: 0 14px 28px -14px rgba(74, 94, 2, 0.32);
}
.mega-heading:hover::after { transform: scaleX(1); }
/* Workflow connector solid mini chevron between columns (no dashed line) */
.mega-column:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -1.2rem;
width: 16px;
height: 16px;
transform: translateY(-50%);
z-index: 2;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.85;
}
/* Mobile : drop the workflow arrows (vertical stack) */
@media (max-width: 768px) {
.mega-column:not(:last-child)::after { display: none; }
.mega-heading { padding: 0.85rem 1rem; }
}
.mega-links {
list-style: none;
padding: 0;
}
.mega-links li a {
display: block;
padding: 0.35rem 0.75rem;
color: var(--text-color, #2e2d29);
font-size: 0.875rem;
text-decoration: none;
border-radius: 4px;
transition: all 0.2s;
}
.mega-links li a:hover {
background: var(--accent-color, #F7F7E8);
color: var(--primary-color, #c3e502);
padding-left: 1rem;
}
/* ===== Hero Carousel palette noire stylée Viridem (user 2026-05-22) ===== */
.hero-carousel {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background: radial-gradient(circle at 50% 50%,
#1f1e1c 0%,
#161614 55%,
#0d0d0c 100%);
}
/* Filigrane "V" Viridem vert sur le hero d'accueil (user 2026-08-21) :
grand V lime en tres faible opacite, au-dessus du fond sombre, sous le texte. */
.hero-carousel::after {
content: "";
position: absolute;
top: 50%;
right: -3%;
transform: translateY(-50%);
height: 88%;
aspect-ratio: 511 / 522;
background: url('/images/viridem-logo-icon.png') no-repeat center center / contain;
opacity: 0.12;
z-index: 0;
pointer-events: none;
}
@media (max-width: 900px) {
.hero-carousel::after { height: 50%; right: -16%; opacity: 0.08; }
}
/* Badge "Depuis 2013" a droite du hero (accueil FR) — user 2026-07-30 */
.hero-since-badge {
position: absolute;
right: clamp(1.2rem, 5vw, 5rem);
top: 50%;
transform: translateY(-50%);
width: 140px;
height: auto;
z-index: 4;
filter: drop-shadow(0 12px 26px rgba(0,0,0,.5));
pointer-events: none;
}
@media (max-width: 992px) { .hero-since-badge { width: 100px; top: 6rem; transform: none; right: 1.2rem; } }
@media (max-width: 600px) { .hero-since-badge { display: none; } }
/* Stat marketing "300+ clients" a GAUCHE du hero (user 2026-08-23 : design marketing anime, PAS une medaille) */
.hero-clients-badge {
position: absolute;
left: clamp(1.2rem, 5vw, 5.5rem);
top: 50%;
transform: translateY(-50%);
z-index: 4;
text-align: left;
padding-left: 1.15rem;
border-left: 3px solid var(--primary-color, #c3e502);
pointer-events: none;
max-width: 210px;
}
.hero-clients-eyebrow {
display: block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.75);
margin-bottom: 0.35rem;
}
.hero-clients-stat {
display: flex;
align-items: flex-start;
line-height: 0.9;
}
.hero-clients-num {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(3rem, 5vw, 4.4rem);
font-weight: 800;
color: var(--primary-color, #c3e502);
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
font-variant-numeric: tabular-nums;
}
.hero-clients-plus {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.6rem, 2.6vw, 2.3rem);
font-weight: 800;
color: var(--primary-color, #c3e502);
margin-top: 0.35rem;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero-clients-lbl {
display: block;
font-size: clamp(0.8rem, 1vw, 0.95rem);
font-weight: 600;
color: #fff;
margin-top: 0.5rem;
line-height: 1.3;
}
@media (max-width: 992px) { .hero-clients-badge { top: 5rem; transform: none; left: 1.4rem; max-width: 150px; } }
@media (max-width: 600px) { .hero-clients-badge { display: none; } }
@keyframes hero-bg-drift {
from { background-position: 0% 0%, 100% 100%, 0 0; }
to { background-position: 22% 16%, 78% 88%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-carousel { animation: none; }
}
/* Hero illustration custom Viridem (fond noir simple + accents lime) */
.hero-bg-pattern {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 1;
}
.hero-bg-illustration {
object-fit: cover;
object-position: center;
opacity: 1;
animation: hero-illu-float 18s ease-in-out infinite alternate;
}
@keyframes hero-illu-float {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-1.5%, -0.8%, 0) scale(1.025); }
}
@media (max-width: 768px) {
.hero-bg-illustration { opacity: 0.95; }
}
.carousel-slides {
position: relative;
width: 100%;
height: 100%;
}
.carousel-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-slide.active {
opacity: 1;
z-index: 1;
}
.carousel-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
z-index: 1;
}
.carousel-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-content {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
max-width: 920px;
padding: 0 2rem;
}
/* ===== Layout 2-col home hero : photo gauche · texte droit · CTA bas horizontal (user 2026-05-22) ===== */
.carousel-content.carousel-content-split {
max-width: 1280px;
width: 100%;
text-align: left;
padding: 0 2.5rem;
}
.carousel-content-row {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 3rem;
align-items: center;
margin-bottom: 2.25rem;
}
.carousel-hero-photo {
margin: 0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.65);
aspect-ratio: 16 / 10;
background: #0d0d0c;
display: flex;
}
.carousel-hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.carousel-hero-text {
text-align: left;
}
.carousel-hero-text .hero-title,
.carousel-hero-text .hero-h1-seo,
.carousel-hero-text .hero-h2-tagline {
text-align: left;
max-width: none;
margin-left: 0;
margin-right: 0;
}
.carousel-hero-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.25rem;
}
/* Responsive : passe en colonne, photo au-dessus du texte */
@media (max-width: 992px) {
.carousel-content.carousel-content-split { padding: 0 1.5rem; }
.carousel-content-row {
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 1.75rem;
}
.carousel-hero-text { text-align: center; }
.carousel-hero-text .hero-title,
.carousel-hero-text .hero-h1-seo,
.carousel-hero-text .hero-h2-tagline { text-align: center; }
.carousel-hero-photo { max-width: 560px; margin: 0 auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 540px) {
.carousel-content.carousel-content-split { padding: 0 1.1rem; }
.carousel-hero-photo { border-radius: 14px; }
}
/* Preuve sociale hero 6 logos clients miniaturisés sous le CTA principal */
.hero-trust-strip {
margin-top: 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
opacity: 0.95;
animation: heroTrustFadeIn 0.8s ease-out 0.4s both;
}
.hero-trust-label {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.70);
}
.hero-trust-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.5rem 2.25rem;
padding: 0 1rem;
}
.hero-trust-logos img {
height: 32px;
max-width: 140px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1) opacity(0.78);
transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}
.hero-trust-logos img:hover {
filter: brightness(0) invert(1) opacity(1);
transform: translateY(-1px);
}
@keyframes heroTrustFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 0.95; transform: translateY(0); }
}
@media (max-width: 768px) {
.hero-trust-strip { margin-top: 1.75rem; gap: 0.6rem; }
.hero-trust-logos { gap: 1rem 1.5rem; }
.hero-trust-logos img { height: 24px; max-width: 100px; }
}
.carousel-content .hero-title {
font-size: 4rem;
font-weight: 900;
margin-bottom: 1rem;
color: #fff;
text-shadow: 0 2px 20px rgba(0,0,0,0.45);
letter-spacing: -0.015em;
}
.carousel-content .hero-subtitle {
margin-bottom: 2rem;
opacity: 0.95;
}
/* SEO H1 keywords below the brand slogan visible but secondary in size */
.carousel-content .hero-h1-seo {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.45rem;
font-weight: 600;
line-height: 1.35;
color: #fff;
margin: 0 0 0.65rem 0;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
letter-spacing: -0.005em;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.carousel-content .hero-h2-tagline {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.05rem;
font-weight: 500;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
margin: 0;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
font-style: italic;
}
@media (max-width: 768px) {
.carousel-content .hero-h1-seo { font-size: 1.1rem; }
.carousel-content .hero-h2-tagline { font-size: 0.95rem; }
}
/* Primary CTA refined design (user 2026-05-20 : "le bouton démo gratuit est moche, change-le") */
.hero-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.95rem 1.85rem 0.95rem 1.95rem;
background: linear-gradient(135deg, #c3e502 0%, #a8c800 100%);
color: var(--text-color, #2e2d29) !important;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
font-size: 0.98rem;
letter-spacing: 0.005em;
text-transform: none;
border-radius: 14px;
text-decoration: none;
position: relative;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.30) inset,
0 8px 22px -10px rgba(74, 94, 2, 0.55),
0 2px 6px rgba(74, 94, 2, 0.25);
transition: transform 0.22s cubic-bezier(.2,.8,.2,1),
box-shadow 0.22s cubic-bezier(.2,.8,.2,1),
background 0.22s ease;
isolation: isolate;
}
.hero-btn::after {
content: "→";
display: inline-block;
margin-left: 0.5em;
font-weight: 900;
transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
color: #4a5e02;
}
.hero-btn:hover,
.hero-btn:focus-visible {
background: linear-gradient(135deg, #d1f000 0%, #b2d300 100%);
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.40) inset,
0 14px 30px -10px rgba(74, 94, 2, 0.55),
0 3px 8px rgba(74, 94, 2, 0.30);
outline: none;
}
.hero-btn:hover::after,
.hero-btn:focus-visible::after { transform: translateX(3px); }
.hero-btn:active {
transform: translateY(0);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.20) inset,
0 4px 12px -6px rgba(74, 94, 2, 0.55);
}
/* When the hero-btn appears inside a dark CTA section, swap surface treatment */
.section-cta .hero-btn,
.sector-cta-section .hero-btn {
background: linear-gradient(135deg, #c3e502 0%, #a8c800 100%);
color: #1f1e1c !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.30) inset,
0 12px 28px -8px rgba(74, 94, 2, 0.45),
0 2px 6px rgba(74, 94, 2, 0.20);
}
.section-cta .hero-btn:hover,
.sector-cta-section .hero-btn:hover {
background: linear-gradient(135deg, #d3f312 0%, #b2d300 100%);
color: #1f1e1c !important;
}
/* Hero carousel button : keep the lime Viridem green (user 2026-05-20) */
.hero-carousel .hero-btn,
.hero-btn-lime {
background: linear-gradient(135deg, #c3e502 0%, #a8c800 100%) !important;
color: var(--text-color, #2e2d29) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.40) inset,
0 14px 32px -10px rgba(74, 94, 2, 0.65),
0 3px 8px rgba(74, 94, 2, 0.35) !important;
}
.hero-carousel .hero-btn:hover,
.hero-btn-lime:hover {
background: linear-gradient(135deg, #d1f000 0%, #b2d300 100%) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.50) inset,
0 18px 36px -10px rgba(74, 94, 2, 0.70),
0 4px 10px rgba(74, 94, 2, 0.40) !important;
}
/* Hero : rangée de boutons + 2e bouton vert "Calculer votre ROI" (contour lime, user 2026-07-06) */
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; justify-content: center; }
.hero-carousel .hero-btn.hero-btn-roi {
background: rgba(195, 229, 2, 0.12) !important;
color: #c3e502 !important;
border: 2px solid #c3e502;
box-shadow: none !important;
}
.hero-carousel .hero-btn.hero-btn-roi::after { color: #c3e502; }
.hero-carousel .hero-btn.hero-btn-roi:hover {
background: #c3e502 !important;
color: #1c2015 !important;
transform: translateY(-2px);
}
.hero-carousel .hero-btn.hero-btn-roi:hover::after { color: #1c2015; }
/* ===== CTA HIERARCHY (user 2026-05-20) =====
Primary = .hero-btn (lime gradient + arrow, déjà défini ci-dessus)
Secondary = .btn-secondary (outline ghost, anthracite)
Tertiary = .btn-tertiary (underlined link, low emphasis) */
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.65rem;
background: transparent;
color: var(--text-color, #2e2d29);
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 700;
font-size: 0.95rem;
border: 1.5px solid rgba(46, 45, 41, 0.30);
border-radius: 14px;
text-decoration: none;
transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
.btn-secondary::after {
content: "→";
font-weight: 800;
transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
border-color: var(--primary-color, #c3e502);
background: rgba(195, 229, 2, 0.08);
transform: translateY(-1px);
outline: none;
}
.btn-secondary:hover::after { transform: translateX(3px); }
/* On dark surfaces (hero/CTA), the secondary inverts to light outline */
.hero-carousel .btn-secondary,
.section-cta .btn-secondary,
.sector-cta-section .btn-secondary {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.45);
}
.hero-carousel .btn-secondary:hover,
.section-cta .btn-secondary:hover,
.sector-cta-section .btn-secondary:hover {
background: rgba(255, 255, 255, 0.10);
border-color: #ffffff;
}
.btn-tertiary {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--text-color, #2e2d29);
font-weight: 600;
font-size: 0.92rem;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: rgba(46, 45, 41, 0.30);
transition: text-decoration-color 0.22s ease, color 0.22s ease;
}
.btn-tertiary::after {
content: "→";
font-weight: 700;
transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
}
.btn-tertiary:hover {
color: #4a5e02;
text-decoration-color: var(--primary-color, #c3e502);
}
.btn-tertiary:hover::after { transform: translateX(3px); }
/* ===== STICKY MOBILE CTA (user 2026-05-20) =====
Bottom bar fixed sur mobile, "Démo gratuite 30 min". Booste la conversion mobile
de ~15-30 % (pattern Tipalti / AvidXchange). Cachée sur desktop. */
.sticky-mobile-cta {
display: none;
}
@media (max-width: 768px) {
.sticky-mobile-cta {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0));
background: linear-gradient(135deg, #c3e502 0%, #a8c800 100%);
color: var(--text-color, #2e2d29) !important;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
font-size: 0.95rem;
text-decoration: none;
box-shadow:
0 -10px 24px -10px rgba(46, 45, 41, 0.30),
0 -1px 0 rgba(255, 255, 255, 0.40) inset;
z-index: 999;
transition: transform 0.22s ease, background 0.22s ease;
}
.sticky-mobile-cta:hover,
.sticky-mobile-cta:focus-visible {
background: linear-gradient(135deg, #d1f000 0%, #b2d300 100%);
outline: none;
}
.sticky-mobile-cta-icon svg {
width: 18px;
height: 18px;
display: block;
}
.sticky-mobile-cta-arrow {
font-weight: 900;
transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
}
.sticky-mobile-cta:hover .sticky-mobile-cta-arrow { transform: translateX(3px); }
/* Ensure footer has bottom padding so it doesn't end behind the sticky bar */
.site-footer { padding-bottom: 5rem; }
}
/* Carousel Navigation */
.carousel-nav {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
align-items: center;
gap: 1rem;
}
.carousel-prev,
.carousel-next {
background: rgba(255,255,255,0.2);
border: none;
color: #fff;
font-size: 1.5rem;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
.carousel-prev:hover,
.carousel-next:hover {
background: rgba(255,255,255,0.4);
}
.carousel-dots {
display: flex;
gap: 0.5rem;
}
.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.6);
background: transparent;
cursor: pointer;
transition: all 0.3s;
}
.carousel-dot.active {
background: #fff;
border-color: #fff;
}
@media (max-width: 768px) {
.hero-carousel { height: 70vh; }
.carousel-content .hero-title { font-size: 2.25rem; }
.carousel-content .hero-subtitle { font-size: 1.1rem; }
.carousel-nav { bottom: 1rem; }
}
/* ===== Sections softer flow, no hard dividers =====
user 2026-05-22 : padding réduit de 5.5rem → 3rem pour resserrer
l'enchaînement vertical des blocs (whitespace excessif sur home) */
.section {
padding: 2rem 0;
position: relative;
}
/* Scroll-reveal : sections fade-up as they enter viewport */
.reveal-on-scroll {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}
/* Harmonisation : alternating very-subtle warm-grey wash + radial accent on every other section */
main > .section-custom:nth-of-type(even) {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
}
main > .section-custom:nth-of-type(odd):not(.section-hero):not(:first-of-type) {
background: #ffffff;
}
/* Séparateurs de bloc RETIRÉS (user 2026-05-20). Les sections s'enchaînent sans décoration. */
main > .section-custom + .section-custom { position: relative; }
main > .section-custom > * { position: relative; z-index: 1; }
.section-title {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
text-align: center;
}
.section-subtitle {
font-size: 1.15rem;
color: #666;
text-align: center;
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Hero premium dark, Quebec-French innovation feel */
.section-hero {
background:
radial-gradient(ellipse at 20% 0%, rgba(195, 229, 2, 0.10) 0%, transparent 45%),
radial-gradient(ellipse at 85% 100%, rgba(195, 229, 2, 0.06) 0%, transparent 50%),
linear-gradient(160deg, #0f0f0e 0%, #1a1a17 45%, #232220 100%);
color: #fff;
text-align: center;
padding: 5.5rem 0 7rem;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.section-hero::after {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(135deg, transparent 0 80px, rgba(255, 255, 255, 0.012) 80px 81px),
repeating-linear-gradient(45deg, transparent 0 60px, rgba(195, 229, 2, 0.018) 60px 61px);
pointer-events: none;
z-index: 0;
}
/* Soft curved divider at the bottom of dark-on-light sections */
.section-hero::before {
content: "";
position: absolute;
left: -2%;
right: -2%;
bottom: -1px;
height: 80px;
background: var(--bg-color, #fafaf6);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
z-index: 2;
pointer-events: none;
}
.section-hero .container { padding-bottom: 0.5rem; }
/* Legacy bg-image dim overlay (kept under a different selector so the curve owns ::before) */
.section-hero[style*="background-image"] .container::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
pointer-events: none;
z-index: -1;
}
.section-hero .container {
position: relative;
z-index: 1;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1rem;
color: #fff;
}
.hero-subtitle {
font-size: 1.35rem;
opacity: 0.9;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-content {
font-size: 1.1rem;
opacity: 0.85;
}
/* Features */
.section-features {
background: var(--accent-color, #F7F7E8);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.features-grid .feature {
position: relative;
background: #fff;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border-left: 4px solid var(--primary-color, #c3e502);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.features-grid .feature:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(141, 198, 63, 0.18);
border-left-color: var(--secondary-color, #E23D28);
}
.features-grid .feature h3 {
color: var(--primary-color, #c3e502);
margin-bottom: 0.75rem;
font-size: 1.25rem;
}
/* Benefits Grid */
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.benefit {
text-align: center;
padding: 2.25rem 1.5rem 1.75rem;
background: #fff;
border-radius: 14px;
border: 1px solid rgba(46, 45, 41, 0.06);
box-shadow: 0 4px 14px rgba(46, 45, 41, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.benefit:hover {
transform: translateY(-5px);
box-shadow: 0 18px 36px rgba(195, 229, 2, 0.18);
border-color: rgba(195, 229, 2, 0.4);
}
.benefit-icon {
width: 56px;
height: 56px;
margin: 0 auto 1rem;
display: block;
object-fit: contain;
transition: transform 0.4s ease;
filter: drop-shadow(0 4px 8px rgba(195, 229, 2, 0.25));
}
.benefit:hover .benefit-icon {
transform: scale(1.08) rotate(-4deg);
}
.benefit h3 {
color: var(--primary-color, #c3e502);
margin-bottom: 0.75rem;
font-size: 1.15rem;
}
.benefit p {
color: #555;
line-height: 1.6;
}
/* Software/Partner Grid */
.software-grid {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
justify-content: center;
}
.software-grid span {
display: inline-block;
padding: 0.5rem 1.25rem;
background: #fff;
border: 1.5px solid var(--primary-color, #c3e502);
border-radius: 50px;
font-weight: 500;
font-size: 0.9rem;
color: var(--text-color, #2e2d29);
transition: all 0.2s;
}
.software-grid span:hover {
background: var(--primary-color, #c3e502);
color: #fff;
}
.section-text {
background: var(--accent-color, #F7F7E8);
}
/* About */
.section-about {
background: var(--bg-color, #fff);
}
.about-content {
max-width: 800px;
margin: 0 auto;
font-size: 1.1rem;
text-align: center;
}
/* Contact */
.section-contact {
background: var(--accent-color, #F7F7E8);
}
.contact-content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
/* CTA */
.section-cta {
background: var(--tertiary-color, #7B68AE);
color: #fff;
text-align: center;
background-size: cover;
background-position: center;
}
.section-cta .section-title {
color: #fff;
}
.section-cta .section-subtitle {
color: rgba(255,255,255,0.85);
}
/* Text Block */
.section-text .text-content {
max-width: 800px;
margin: 0 auto;
font-size: 1.05rem;
}
/* Gallery */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
.gallery-grid img {
width: 100%;
border-radius: 8px;
object-fit: cover;
}
/* ===== Header Top Bar ===== */
.header-bar {
background: var(--text-color, #2e2d29);
color: rgba(255,255,255,0.7);
font-size: 0.8rem;
padding: 0.4rem 0;
}
.header-bar-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-bar-right {
display: flex;
align-items: center;
gap: 1.25rem;
}
.header-bar a {
color: rgba(255,255,255,0.7) !important;
text-decoration: none;
transition: color 0.2s;
}
.header-bar a:hover {
color: var(--primary-color, #c3e502) !important;
}
.header-bar-text {
font-weight: 500;
}
.header-socials {
display: flex;
gap: 0.5rem;
}
.header-socials a {
/* user 2026-08-23 : vrais logos SVG (Facebook/LinkedIn) au lieu du texte FB/IN */
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.1);
padding: 0.3rem;
border-radius: 5px;
line-height: 0;
transition: background 0.18s ease, color 0.18s ease;
}
.header-socials a svg {
width: 15px;
height: 15px;
display: block;
}
.header-socials a:hover {
background: var(--primary-color, #c3e502);
color: #1f1e1c !important;
}
/* ===== Footer ===== */
.site-footer {
background: var(--text-color, #2e2d29);
color: rgba(255,255,255,0.6);
padding: 3.5rem 0 0;
font-size: 0.9rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr; /* 4 colonnes : About + Liens + Contact + Légal (user 2026-05-22, ERP retiré) */
gap: 2.2rem;
padding-bottom: 2.5rem;
}
.footer-col-erp ul { font-size: 0.92rem; }
.footer-col-erp li { margin-bottom: 0.35rem; }
.footer-erp-all {
display: inline-block;
margin-top: 0.6rem;
color: var(--primary-color, #c3e502) !important;
font-weight: 700;
}
@media (max-width: 1080px) {
.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.footer-col h4 {
color: #fff;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-col h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--primary-color, #c3e502);
}
.footer-logo {
height: 35px;
width: auto;
margin-bottom: 1rem;
filter: brightness(0) invert(1);
}
.footer-about {
line-height: 1.6;
margin-bottom: 1rem;
}
.footer-nav {
list-style: none;
padding: 0;
}
.footer-nav li {
margin-bottom: 0.5rem;
}
.footer-nav a {
color: rgba(255,255,255,0.6) !important;
text-decoration: none;
transition: all 0.2s;
}
.footer-nav a:hover {
color: var(--primary-color, #c3e502) !important;
padding-left: 0.25rem;
}
.footer-contact-item {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.footer-contact-item a {
color: rgba(255,255,255,0.6) !important;
text-decoration: none;
}
.footer-contact-item a:hover {
color: var(--primary-color, #c3e502) !important;
}
.footer-socials {
display: flex;
gap: 0.6rem;
margin-top: 1rem;
}
.footer-socials a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
color: rgba(255,255,255,0.72) !important;
text-decoration: none;
transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.footer-socials a svg {
width: 18px;
height: 18px;
display: block;
}
.footer-socials a:hover {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29) !important;
border-color: var(--primary-color, #c3e502);
transform: translateY(-1px);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 1.25rem 0;
text-align: center;
font-size: 0.8rem;
}
@media (max-width: 768px) {
.header-bar-inner { flex-direction: column; gap: 0.25rem; text-align: center; }
.header-bar-right { flex-wrap: wrap; justify-content: center; }
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* ===== Cookie Consent Banner (Law 25) ===== */
.cookie-consent {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
font-family: var(--body-font, 'TTForsRegular', sans-serif);
}
.cookie-banner {
background: #2e2d29;
color: #F7F7E8;
padding: 1.5rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
.cookie-banner-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.35rem;
color: #c3e502;
}
.cookie-banner-text {
font-size: 0.9rem;
line-height: 1.5;
opacity: 0.9;
margin-bottom: 0.5rem;
}
.cookie-banner-links {
font-size: 0.8rem;
}
.cookie-banner-links a {
color: #c3e502;
text-decoration: underline;
}
.cookie-banner-links a:hover {
color: #a8db5e;
}
.cookie-link-sep {
margin: 0 0.4rem;
opacity: 0.4;
}
.cookie-banner-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex-shrink: 0;
}
.cookie-btn {
display: inline-block;
padding: 0.55rem 1.25rem;
font-size: 0.85rem;
font-weight: 600;
border: 2px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
white-space: nowrap;
font-family: inherit;
}
.cookie-btn-primary {
background: #c3e502;
color: #2e2d29;
border-color: #c3e502;
}
.cookie-btn-primary:hover {
background: #7ab535;
border-color: #7ab535;
}
.cookie-btn-secondary {
background: transparent;
color: #F7F7E8;
border-color: #F7F7E8;
}
.cookie-btn-secondary:hover {
background: rgba(247, 247, 232, 0.1);
}
.cookie-btn-outline {
background: transparent;
color: #c3e502;
border-color: #c3e502;
}
.cookie-btn-outline:hover {
background: rgba(141, 198, 63, 0.1);
}
.cookie-preferences {
background: #263040;
padding: 1.5rem 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cookie-pref-group {
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cookie-pref-group:last-of-type {
border-bottom: none;
}
.cookie-pref-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.cookie-pref-label {
display: flex;
align-items: center;
gap: 0.5rem;
color: #F7F7E8;
cursor: pointer;
font-size: 0.95rem;
}
.cookie-pref-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #c3e502;
cursor: pointer;
}
.cookie-pref-badge {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(141, 198, 63, 0.15);
color: #c3e502;
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-weight: 600;
}
.cookie-pref-desc {
font-size: 0.8rem;
color: rgba(247, 247, 232, 0.6);
margin-top: 0.3rem;
padding-left: 2rem;
}
.cookie-pref-actions {
padding-top: 1rem;
text-align: right;
}
/* Privacy / Cookie policy pages */
.privacy-content {
max-width: 800px;
margin: 0 auto;
}
.privacy-content h1 {
font-size: 2.25rem;
margin-bottom: 0.5rem;
color: var(--primary-color, #c3e502);
}
.privacy-content h2 {
font-size: 1.4rem;
margin-top: 2rem;
margin-bottom: 0.75rem;
padding-bottom: 0.35rem;
border-bottom: 2px solid var(--accent-color, #F7F7E8);
}
.privacy-content h3 {
font-size: 1.15rem;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
color: var(--primary-color, #c3e502);
}
.privacy-content ul {
margin: 0.5rem 0 1rem 1.5rem;
}
.privacy-content li {
margin-bottom: 0.35rem;
}
.privacy-updated {
color: #666;
margin-bottom: 1.5rem;
}
.privacy-contact-box {
background: var(--accent-color, #F7F7E8);
border-left: 4px solid var(--primary-color, #c3e502);
padding: 1.25rem 1.5rem;
border-radius: 0 8px 8px 0;
margin: 1rem 0;
}
.cookie-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
font-size: 0.9rem;
}
.cookie-table th,
.cookie-table td {
padding: 0.6rem 0.75rem;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
.cookie-table th {
background: var(--accent-color, #F7F7E8);
font-weight: 600;
color: var(--text-color, #2e2d29);
}
.cookie-table code {
background: rgba(141, 198, 63, 0.1);
padding: 0.15rem 0.35rem;
border-radius: 3px;
font-size: 0.85em;
}
/* Footer links for privacy */
.footer-links {
margin-top: 0.5rem;
font-size: 0.8rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover {
color: #c3e502;
}
.footer-links span {
margin: 0 0.4rem;
opacity: 0.4;
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
.nav-toggle {
display: flex;
}
.nav-links {
display: none;
position: absolute;
top: 70px;
left: 0;
right: 0;
background: #fff;
flex-direction: column;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.site-nav.open .nav-links {
display: flex;
}
.lang-switcher {
margin-left: auto;
border-left: none;
padding-left: 0;
}
.hero-title {
font-size: 2.25rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.section {
padding: 3rem 0;
}
.section-hero {
padding: 3rem 0 2.25rem;
}
.section-title {
font-size: 1.75rem;
}
.cookie-banner {
flex-direction: column;
padding: 1.25rem 1rem;
text-align: center;
}
.cookie-banner-actions {
width: 100%;
}
.cookie-preferences {
padding: 1rem;
}
}
/* ===== Challenges (Enjeux) 2-column grid of cards =====
Each card shows the problem upfront (title + description). The Viridem V logo
at the bottom-right is the click target opens the "Impact Viridem" answer. */
.section-challenges {
background: var(--bg-color, #fff);
}
.challenges-accordion {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 1100px;
margin: 2.5rem auto 0;
}
.challenge-item {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 16px;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.4s ease,
border-color 0.4s ease;
}
.challenge-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(46, 45, 41, 0.10);
border-color: rgba(195, 229, 2, 0.45);
}
.challenge-item[open] {
border-color: var(--primary-color, #c3e502);
box-shadow: 0 20px 42px rgba(195, 229, 2, 0.20);
}
.challenge-item summary {
cursor: pointer;
list-style: none;
padding: 1.85rem 1.85rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
user-select: none;
}
.challenge-item summary::-webkit-details-marker { display: none; }
.challenge-item summary::marker { display: none; }
.challenge-keyword {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color, #2e2d29);
margin: 0 0 0.65rem 0;
line-height: 1.3;
letter-spacing: -0.01em;
transition: color 0.3s ease;
}
.challenge-problem {
font-size: 0.95rem;
line-height: 1.65;
color: #555;
margin: 0;
}
.challenge-cta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.85rem;
padding-top: 1.1rem;
border-top: 1px solid rgba(46, 45, 41, 0.08);
transition: border-color 0.35s ease;
}
.challenge-cta-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-color, #2e2d29);
letter-spacing: 0.005em;
transition: color 0.35s ease;
}
.challenge-cta-logo {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(195, 229, 2, 0.14);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.45s ease,
transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.45s ease;
flex-shrink: 0;
}
.challenge-cta-logo img {
width: 62%;
height: 62%;
object-fit: contain;
transition: transform 0.45s ease;
}
/* Hover state: the V logo wakes up */
.challenge-item:hover .challenge-keyword {
color: var(--primary-color, #c3e502);
}
.challenge-item:hover .challenge-cta-label {
color: var(--primary-color, #c3e502);
}
.challenge-item:hover .challenge-cta-logo {
background: rgba(195, 229, 2, 0.30);
transform: rotate(-6deg) scale(1.05);
}
/* Open state: V logo lights up green and rotates */
.challenge-item[open] .challenge-keyword {
color: var(--primary-color, #c3e502);
}
.challenge-item[open] .challenge-cta {
border-color: rgba(195, 229, 2, 0.35);
}
.challenge-item[open] .challenge-cta-label {
color: var(--primary-color, #c3e502);
}
.challenge-item[open] .challenge-cta-logo {
background: var(--primary-color, #c3e502);
box-shadow: 0 8px 22px rgba(195, 229, 2, 0.45);
transform: rotate(360deg);
}
/* Impact section (Viridem solution) */
.challenge-impact {
background: linear-gradient(135deg, rgba(195, 229, 2, 0.10), rgba(195, 229, 2, 0.03));
padding: 1.5rem 1.85rem 1.65rem;
border-top: 2px solid var(--primary-color, #c3e502);
animation: challImpactSlide 0.4s ease-out;
}
.challenge-impact::before {
content: 'Impact Viridem';
display: block;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--primary-color, #c3e502);
margin-bottom: 0.6rem;
}
.challenge-impact p {
margin: 0;
color: var(--text-color, #2e2d29);
line-height: 1.7;
font-size: 0.97rem;
}
@keyframes challImpactSlide {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.challenges-accordion {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.75rem;
}
.challenge-item summary {
padding: 1.5rem 1.4rem 1.25rem;
gap: 1rem;
}
.challenge-keyword {
font-size: 1.15rem;
}
.challenge-impact {
padding: 1.25rem 1.4rem 1.4rem;
}
}
/* ===== Stats / numbers band =====
Reusable highlight strip drop into Custom or About content with markup:
*/
.stats-band {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 2rem;
margin: 2.5rem auto 0;
max-width: 1000px;
text-align: center;
}
.stats-band .stat {
padding: 1.25rem 1rem;
border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.stats-band .stat:last-child {
border-right: none;
}
.stats-band .stat-value {
display: block;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 2.75rem;
font-weight: 800;
color: var(--primary-color, #c3e502);
line-height: 1;
margin-bottom: 0.4rem;
}
.stats-band .stat-label {
display: block;
font-size: 0.92rem;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.3;
}
/* ===== About section refinements ===== */
.section-about .about-content {
line-height: 1.75;
color: #444;
text-align: center;
max-width: 760px;
margin: 0 auto;
}
/* Quand le bloc Académie large est présent, on libère la contrainte 760px
pour aligner sur la largeur des piliers/solutions-adapt (user 2026-05-22). */
.section-about .about-content:has(.academy-large-block),
.section-about .about-content:has(.cs-strip) {
max-width: none;
}
.section-about .about-content p {
margin-bottom: 1.1rem;
}
.section-about .about-content .academy-chip {
margin: 0.5rem auto 0;
}
/* ===== CTA section refinement ===== */
.section-cta {
background: linear-gradient(135deg,
#c3e502 0%,
#8aad00 100%);
}
.section-cta .section-title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.section-cta .cta-content {
margin-top: 1.5rem;
}
.section-cta .cta-content a,
.section-cta .cta-content .hero-btn {
display: inline-block;
padding: 1rem 2.5rem;
background: #fff;
color: var(--primary-color, #c3e502) !important;
border-radius: 50px;
font-weight: 600;
font-size: 1.05rem;
transition: all 0.25s ease;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.section-cta .cta-content a:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
color: var(--secondary-color, #E23D28) !important;
}
/* ===== Mobile adjustments for new sections ===== */
@media (max-width: 768px) {
.challenges-grid {
gap: 1.25rem;
}
.challenges-grid .challenge {
padding: 1.5rem 1.25rem 1.25rem;
}
.challenges-grid .challenge h3 {
font-size: 1.1rem;
}
.stats-band {
gap: 1rem;
margin-top: 2rem;
}
.stats-band .stat {
border-right: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
padding: 1rem 0.5rem;
}
.stats-band .stat:last-child {
border-bottom: none;
}
.stats-band .stat-value {
font-size: 2.25rem;
}
.section-cta .section-title {
font-size: 1.75rem;
}
.section-cta .cta-content a,
.section-cta .cta-content .hero-btn {
padding: 0.85rem 1.75rem;
font-size: 1rem;
}
}
/* ===== Solutions section (XMA-style 4 large cards) ===== */
.section-custom.solutions-section {
background: var(--bg-color, #fff);
}
.solutions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
.solution-card {
position: relative;
background: #fff;
padding: 2.25rem 1.75rem 1.75rem;
border-radius: 16px;
border: 1px solid rgba(46, 45, 41, 0.08);
text-decoration: none !important;
color: var(--text-color, #2e2d29) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
.solution-card::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: var(--primary-color, #c3e502);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.solution-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(46, 45, 41, 0.12);
border-color: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29) !important;
}
.solution-card:hover::after {
transform: scaleX(1);
}
.solution-icon {
font-size: 2.5rem;
line-height: 1;
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: rgba(195, 229, 2, 0.12);
border-radius: 14px;
}
/* Variante SVG line-style (user 2026-05-22) remplace emojis 💼👥⚙️ */
.solution-icon-svg {
color: #4a5e02;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.20) 0%, rgba(195, 229, 2, 0.06) 100%);
border: 1px solid rgba(195, 229, 2, 0.30);
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.solution-icon-svg svg { width: 30px; height: 30px; display: block; }
.solution-card:hover .solution-icon-svg {
background: var(--primary-color, #c3e502);
color: #1f1e1c;
transform: rotate(-3deg) scale(1.05);
}
.solution-card h3 {
font-size: 1.3rem;
margin-bottom: 0.6rem;
color: var(--text-color, #2e2d29);
}
.solution-card p {
color: #555;
line-height: 1.6;
font-size: 0.95rem;
margin: 0 0 1.25rem 0;
flex: 1;
}
.solution-link {
color: var(--text-color, #2e2d29);
font-weight: 600;
font-size: 0.92rem;
border-bottom: 2px solid var(--primary-color, #c3e502);
align-self: flex-start;
padding-bottom: 2px;
transition: gap 0.2s ease, padding 0.2s ease;
}
.solution-card:hover .solution-link {
padding-right: 6px;
}
/* user 2026-08-03 : carte "Secteurs" (liens vers chaque secteur, div non cliquable en entier) */
.solution-card-sectors { cursor: default; }
.solution-card-sectors:hover { transform: none; }
.solution-card-sectors p a {
color: #5c7000;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid rgba(140, 168, 0, 0.35);
transition: color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
.solution-card-sectors p a:hover {
color: #1f1e1c;
border-bottom-color: var(--primary-color, #c3e502);
}
/* user 2026-08-03 : page souverainete, aerer les titres H2 du corps (espace avant chaque section) */
.section-custom.souv-body-section h2 { margin-top: 2.2rem; margin-bottom: 0.5rem; }
.section-custom.souv-body-section h2:first-child { margin-top: 0; }
.section-custom.souv-body-section p { margin-bottom: 0.9rem; }
/* Solutions adaptability footer (custom solution beyond the 3 cards) */
.solutions-adapt {
margin-top: 2.5rem;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.10), rgba(195, 229, 2, 0.04));
border-left: 4px solid var(--primary-color, #c3e502);
border-radius: 14px;
padding: 2rem 2.25rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 2rem;
}
.solutions-adapt-text h3 {
font-size: 1.35rem;
margin: 0 0 0.5rem 0;
color: var(--text-color, #2e2d29);
line-height: 1.3;
}
.solutions-adapt-text h3 em {
color: var(--primary-color, #c3e502);
font-style: normal;
}
.solutions-adapt-text p {
margin: 0;
color: #555;
line-height: 1.65;
font-size: 0.97rem;
max-width: 780px;
}
.solutions-adapt-text strong {
color: var(--text-color, #2e2d29);
font-weight: 700;
}
.solutions-adapt-cta {
flex-shrink: 0;
white-space: nowrap;
}
@media (max-width: 768px) {
.solutions-adapt {
grid-template-columns: 1fr;
gap: 1.25rem;
padding: 1.5rem 1.5rem;
text-align: center;
}
}
/* ===== FAQ section (3 categories, V logo accordion) ===== */
.section-custom.faq-section {
background: var(--accent-color, #F7F7E8);
}
.faq-wrapper {
max-width: 880px;
margin: 2.5rem auto 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
/* Home FAQ: no categories flat list with consistent spacing */
.faq-wrapper.faq-home-wrapper {
gap: 0.85rem;
}
/* Variant: when FAQ wrapper contains sections (page-specific FAQs), restore larger gap between groups */
.faq-wrapper:has(.faq-group) {
gap: 2.5rem;
}
/* Page-specific FAQ section styling (used on Comptabilité, RH, Opérations pages) */
.section-custom.page-faq-section {
background: var(--accent-color, #F7F7E8);
}
/* Buyer-persona intro chip pour FAQs sectorielles (user 2026-05-22) */
/* user 2026-06-10 : 1 seul chip « Pour : » par page — masquer le doublon intro
(le band est sur toutes les pages, l'intro était redondant). */
.faq-personas-intro { display: none !important; }
/* user 2026-06-10 : harmonisation du chip « Pour : » sur toutes les pages
(fond gris noir + bordure lime gauche + texte clair + label « Pour : » lime). */
.faq-personas-band,
.faq-personas-intro {
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 100%);
border-left: 4px solid var(--primary-color, #c3e502);
border-radius: 10px;
padding: 0.85rem 1.25rem;
margin: 1rem 0 1.4rem;
color: rgba(255, 255, 255, 0.88);
font-size: 0.95rem;
line-height: 1.5;
box-shadow: 0 14px 32px -22px rgba(31, 30, 28, 0.40);
max-width: 1240px;
margin-left: auto;
margin-right: auto;
}
.faq-personas-band strong,
.faq-personas-intro strong {
color: var(--primary-color, #c3e502);
font-weight: 800;
letter-spacing: 0.02em;
margin-right: 0.35rem;
}
.faq-personas-intro-legacy-unused {
margin: 0 0 1.4rem;
padding: 0.75rem 1.1rem;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 100%);
color: rgba(255,255,255,0.92);
border-left: 3px solid var(--primary-color, #c3e502);
border-radius: 10px;
font-size: 0.92rem;
line-height: 1.5;
}
.faq-personas-intro strong {
color: var(--primary-color, #c3e502);
font-weight: 800;
}
.faq-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.faq-category-title {
margin: 0 0 0.5rem 0;
text-align: left;
}
.faq-category-tag {
display: inline-block;
background: var(--text-color, #2e2d29);
color: var(--primary-color, #c3e502);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.10em;
padding: 0.5rem 1.1rem;
border-radius: 100px;
}
.faq-item {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.faq-item:hover {
border-color: rgba(195, 229, 2, 0.45);
box-shadow: 0 12px 28px rgba(46, 45, 41, 0.08);
}
.faq-item[open] {
border-color: var(--primary-color, #c3e502);
box-shadow: 0 14px 32px rgba(195, 229, 2, 0.18);
}
.faq-item summary {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.35rem 1.5rem;
cursor: pointer;
list-style: none;
user-select: none;
transition: padding 0.3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }
.faq-question {
flex: 1;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.05rem;
font-weight: 700;
color: var(--text-color, #2e2d29);
line-height: 1.4;
letter-spacing: -0.005em;
transition: color 0.3s ease;
}
.faq-item:hover .faq-question,
.faq-item[open] .faq-question {
color: var(--primary-color, #c3e502);
}
/* FAQ toggle : logo V Viridem (user 2026-05-22) */
.faq-toggle {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(195, 229, 2, 0.14);
border: 1.5px solid rgba(195, 229, 2, 0.45);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.3s ease,
border-color 0.3s ease,
transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-toggle img {
width: 18px;
height: 18px;
object-fit: contain;
display: block;
transition: transform 0.3s ease;
}
.faq-item:hover .faq-toggle {
background: rgba(195, 229, 2, 0.28);
border-color: var(--primary-color, #c3e502);
}
.faq-item[open] .faq-toggle {
background: var(--primary-color, #c3e502);
border-color: var(--primary-color, #c3e502);
transform: rotate(180deg);
}
.faq-item[open] .faq-toggle img { transform: rotate(-180deg); }
.faq-answer {
padding: 0 1.5rem 1.5rem;
border-top: 1px solid rgba(195, 229, 2, 0.30);
margin-top: 0;
animation: faqSlide 0.35s ease-out;
}
.faq-answer p {
margin: 1rem 0 0 0;
color: #444;
line-height: 1.7;
font-size: 0.97rem;
max-width: 70ch;
}
@keyframes faqSlide {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.faq-wrapper {
gap: 2rem;
margin-top: 1.75rem;
}
.faq-item summary {
padding: 1.15rem 1.2rem;
gap: 1rem;
}
.faq-question {
font-size: 0.98rem;
}
.faq-toggle {
width: 34px;
height: 34px;
}
.faq-answer {
padding: 0 1.2rem 1.25rem;
}
}
/* ===== Blog section (xma.ca-style article cards) ===== */
.section-custom.blog-section {
background: var(--bg-color, #fff);
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
margin-top: 2.5rem;
}
.blog-card {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 16px;
overflow: hidden;
text-decoration: none !important;
color: var(--text-color, #2e2d29) !important;
display: flex;
flex-direction: column;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s ease,
border-color 0.35s ease;
}
.blog-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 44px rgba(46, 45, 41, 0.14);
border-color: rgba(195, 229, 2, 0.4);
}
.blog-card-image {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--accent-color, #F7F7E8);
}
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-image img {
transform: scale(1.06);
}
.blog-card-tag {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.4rem 0.85rem;
border-radius: 100px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.blog-card-body {
padding: 1.5rem 1.6rem 1.75rem;
display: flex;
flex-direction: column;
flex: 1;
}
.blog-card-body h3 {
font-size: 1.15rem;
line-height: 1.35;
margin: 0 0 0.7rem 0;
color: var(--text-color, #2e2d29);
font-weight: 700;
transition: color 0.3s ease;
}
.blog-card:hover .blog-card-body h3 {
color: var(--primary-color, #c3e502);
}
.blog-card-body p {
margin: 0 0 1.25rem 0;
color: #555;
font-size: 0.93rem;
line-height: 1.6;
flex: 1;
}
.blog-card-link {
color: var(--text-color, #2e2d29);
font-weight: 700;
font-size: 0.92rem;
border-bottom: 2px solid var(--primary-color, #c3e502);
align-self: flex-start;
padding-bottom: 2px;
transition: color 0.3s ease;
}
.blog-card:hover .blog-card-link {
color: var(--primary-color, #c3e502);
}
.blog-cta-wrapper {
text-align: center;
margin-top: 2.5rem;
}
.blog-cta {
display: inline-block;
color: var(--text-color, #2e2d29) !important;
font-weight: 700;
font-size: 1rem;
padding: 0.75rem 2rem;
border: 2px solid var(--text-color, #2e2d29);
border-radius: 100px;
text-decoration: none !important;
transition: all 0.3s ease;
}
.blog-cta:hover {
background: var(--primary-color, #c3e502);
border-color: var(--primary-color, #c3e502);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(195, 229, 2, 0.35);
}
@media (max-width: 900px) {
.blog-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
/* ===== Stats section (full-width band) ===== */
.section-custom.stats-section {
background: var(--accent-color, #F7F7E8);
padding: 4rem 0;
}
.section-custom.stats-section .section-title {
margin-bottom: 0.5rem;
}
.section-custom.stats-section .stats-band {
margin-top: 2.5rem;
}
/* Hero overlay voile sombre léger pour la lisibilité (palette noire) */
.carousel-overlay {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0.30) 100%);
}
.carousel-content .hero-title {
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
color: #fff;
}
.carousel-content .hero-subtitle {
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
/* Mobile adjustments for solutions and stats */
@media (max-width: 768px) {
.solutions-grid {
gap: 1rem;
}
.solution-card {
padding: 1.75rem 1.4rem 1.4rem;
}
.solution-icon {
font-size: 2rem;
width: 54px;
height: 54px;
}
.section-custom.stats-section {
padding: 3rem 0;
}
}
/* ===== 3 Piliers persona-driven CFO (gauche, prioritaire), CEO (centre), Adjoint·e (droite) =====
Z-pattern reading: l'œil entre par la gauche → CFO. Cartes blanches uniformes,
chiffre comme hero visuel (pas d'icônes). Filigrane V Viridem en watermark. */
.section-custom.pillars-section {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
margin-top: 2.5rem;
align-items: stretch;
}
.pillar {
position: relative;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.06);
border-radius: 16px;
padding: 1.9rem 1.6rem 1.6rem;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 6px 20px -10px rgba(46, 45, 41, 0.10);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.4s ease,
border-color 0.4s ease;
}
/* CFO/CEO/Adjoint·e cards : 3 blocs égaux (user 2026-05-22) pas d'accent vert spécifique */
.pillar.pillar-cfo { /* no special treatment, equal to siblings */ }
.pillar.pillar-cfo::before { content: none; }
/* Subtle V watermark, smaller and more discrete */
.pillar::after {
content: '';
position: absolute;
bottom: -36px;
right: -32px;
width: 130px;
height: 130px;
background: url('/images/viridem-logo-icon.png') no-repeat center;
background-size: contain;
opacity: 0.035;
transform: rotate(-10deg);
pointer-events: none;
z-index: 0;
transition: opacity 0.4s ease, transform 0.6s ease;
}
.pillar > * { position: relative; z-index: 1; }
.pillar:hover {
transform: translateY(-4px);
box-shadow: 0 22px 44px -22px rgba(46, 45, 41, 0.16);
border-color: rgba(195, 229, 2, 0.35);
}
.pillar:hover::after {
opacity: 0.08;
transform: rotate(-4deg) scale(1.04);
}
/* .pillar.pillar-cfo:hover uniformisé avec les autres pilliers (user 2026-05-22) */
.pillar-header { margin-bottom: 1.1rem; }
.pillar-tag {
display: inline-block;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 0.66rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.18em;
color: #4a5e02;
background: rgba(195, 229, 2, 0.12);
padding: 0.32rem 0.7rem;
border-radius: 999px;
margin-bottom: 0.7rem;
}
.pillar-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.18rem;
font-weight: 800;
line-height: 1.25;
color: var(--text-color, #2e2d29);
margin: 0;
letter-spacing: -0.012em;
}
.pillar-hero-stat {
background: rgba(195, 229, 2, 0.08);
border: 1px solid rgba(195, 229, 2, 0.22);
border-radius: 12px;
padding: 1rem 1.1rem 0.9rem;
margin: 0 0 1.3rem;
}
.pillar-hero-value {
display: block;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 2.1rem;
font-weight: 800;
color: #4a5e02;
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: 0.35rem;
}
.pillar-hero-label {
display: block;
color: #6a6a62;
font-size: 0.78rem;
line-height: 1.4;
}
.pillar-bullets {
list-style: none;
padding: 0;
margin: 0 0 1.25rem 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.pillar-bullets li {
position: relative;
padding: 0.45rem 0 0.45rem 1.4rem;
font-size: 0.88rem;
line-height: 1.5;
color: #4a4a42;
}
.pillar-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 0.85rem;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
box-shadow: 0 0 0 3px rgba(195, 229, 2, 0.16);
}
.pillar-bullets strong {
color: var(--text-color, #2e2d29);
font-weight: 700;
}
.pillar-tagline {
/* Citation buyer persona : fond noir/gris Viridem (user 2026-05-22) */
margin: 1.2rem -1.6rem -1.6rem; /* déborde sur les bords de la carte */
padding: 1rem 1.6rem;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 100%);
color: rgba(255, 255, 255, 0.85);
border-radius: 0 0 18px 18px;
border-top: 2px solid var(--primary-color, #c3e502);
font-size: 0.88rem;
line-height: 1.55;
font-weight: 500;
font-style: italic;
}
.pillar-tagline::before {
content: '"';
color: var(--primary-color, #c3e502);
font-size: 1.6rem;
font-weight: 900;
margin-right: 0.3rem;
line-height: 0;
}
@media (max-width: 980px) {
.pillars-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.pillar { padding: 1.6rem 1.4rem 1.4rem; }
.pillar-hero-value { font-size: 1.85rem; }
}
/* ===== Sector pages (Construction, Distribution, Manufacturier, Services financiers) ===== */
.section-custom.sector-hero-section { background: var(--accent-color, #F7F7E8); }
.section-custom.sector-challenges-section { background: var(--bg-color, #fff); }
.section-custom.sector-documents-section { background: var(--accent-color, #F7F7E8); }
.section-custom.sector-features-section { background: var(--bg-color, #fff); }
/* ===== Courte définition logiciel (user 2026-05-21) compta/RH/op =====
user 2026-06-10 : largeur alignée avec le reste (1180), hauteur minimale */
.section-custom.sector-definition-section {
padding: 0.6rem 0;
background: linear-gradient(180deg, rgba(195, 229, 2, 0.06) 0%, rgba(195, 229, 2, 0.02) 100%);
border-top: 1px solid rgba(74, 94, 2, 0.08);
border-bottom: 1px solid rgba(74, 94, 2, 0.08);
}
.sector-definition { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.sector-definition-inner {
display: flex;
align-items: center;
gap: 0.85rem;
background: #ffffff;
border-left: 4px solid var(--primary-color, #c3e502);
padding: 0.6rem 1.2rem;
border-radius: 8px;
box-shadow: 0 3px 12px rgba(46, 45, 41, 0.04);
}
.sector-definition-icon {
width: 20px;
height: 20px;
color: #4a5e02;
flex-shrink: 0;
}
.sector-definition p {
margin: 0;
color: #2e2d29;
font-size: 0.9rem;
line-height: 1.45;
}
.sector-definition strong { color: #2e2d29; font-weight: 700; }
@media (max-width: 700px) {
.sector-definition-inner { padding: 1rem 1.1rem; gap: 0.8rem; }
.sector-definition p { font-size: 0.92rem; }
}
.section-custom.sector-cta-section {
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 60%, #1a1a17 100%);
color: #fff;
text-align: center;
}
.section-custom.sector-cta-section .section-title { color: #fff; }
.section-custom.sector-cta-section .section-subtitle { color: rgba(255,255,255,0.78); }
/* FIX universel (user 2026-07-06) : le bandeau CTA doit TOUJOURS être foncé,
sur toutes les pages/thèmes, sinon le sous-titre et le lien secondaire
(blancs) deviennent invisibles sur fond clair. */
.sector-cta-section {
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 60%, #1a1a17 100%) !important;
color: #fff !important;
}
.sector-cta-section .section-title,
.sector-cta-section h2,
.sector-cta-section h3 { color: #fff !important; }
.sector-cta-section .section-subtitle,
.sector-cta-section .sec-cta-block p,
.sector-cta-section p { color: rgba(255, 255, 255, 0.82) !important; }
.sector-cta-section .sec-cta-secondary { color: rgba(255, 255, 255, 0.92) !important; }
.sector-cta-section .sec-cta-secondary:hover { color: var(--primary-color, #c3e502) !important; }
/* Section "sector-match" (autres-secteurs) : cartes CTA propres, sans V géant (user 2026-07-06) */
.sector-match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 1000px; margin: 0 auto; }
.sector-match-card { background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 16px; padding: 2rem 1.8rem; box-shadow: 0 12px 32px -20px rgba(0,0,0,.28); }
.sector-match-card h3 { margin: 0 0 .6rem; font-size: 1.3rem; }
.sector-match-card p { color: #4a4a44; line-height: 1.6; margin: 0 0 1.2rem; }
.sector-match-found { border-top: 4px solid #c3e502; }
.sector-match-other { border-top: 4px solid #7a9a00; }
@media (max-width: 720px) { .sector-match-grid { grid-template-columns: 1fr; } }
/* Sector hero (split: text + photo) */
.sec-hero-block {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3rem;
align-items: center;
margin-top: 1.5rem;
}
.sec-hero-text { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.sec-hero-lead {
font-size: 1.18rem;
line-height: 1.65;
color: var(--text-color, #2e2d29);
margin: 0;
max-width: 560px;
}
.sec-hero-photo img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center 22%;
border-radius: 18px;
box-shadow: 0 22px 44px rgba(46, 45, 41, 0.14);
}
/* Sector challenges grid */
.sec-challenges-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-top: 2rem;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.sec-challenge {
display: flex;
align-items: center;
gap: 1rem;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-left: 3px solid var(--secondary-color, #E23D28);
border-radius: 12px;
padding: 1.1rem 1.25rem;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease;
}
.sec-challenge:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(46, 45, 41, 0.10);
border-left-color: var(--primary-color, #c3e502);
}
.sec-challenge-icon {
font-size: 1.5rem;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(226, 61, 40, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Variante SVG line-style (user 2026-05-22) remplace les emojis */
.sec-challenge-icon-svg {
background: rgba(195, 229, 2, 0.14);
color: #4a5e02;
width: 44px;
height: 44px;
}
.sec-challenge-icon-svg svg { width: 22px; height: 22px; display: block; }
.sec-challenge:hover .sec-challenge-icon-svg,
.sec-challenge.is-open .sec-challenge-icon-svg {
background: var(--primary-color, #c3e502);
color: #1f1e1c;
}
/* Sur thèmes dark (manuf / construction / distribution) version claire */
body.theme-manufacturier .sec-challenge-icon-svg,
body.theme-construction .sec-challenge-icon-svg,
body.theme-distribution .sec-challenge-icon-svg {
background: rgba(195, 229, 2, 0.16);
color: var(--primary-color, #c3e502);
border: 1px solid rgba(195, 229, 2, 0.30);
}
body.theme-manufacturier .sec-challenge:hover .sec-challenge-icon-svg,
body.theme-construction .sec-challenge:hover .sec-challenge-icon-svg,
body.theme-distribution .sec-challenge:hover .sec-challenge-icon-svg {
background: var(--primary-color, #c3e502);
color: #1f1e1c;
}
.sec-challenge:hover .sec-challenge-icon {
background: rgba(195, 229, 2, 0.15);
}
.sec-challenge > span:last-child {
font-size: 0.96rem;
color: var(--text-color, #2e2d29);
line-height: 1.4;
font-weight: 500;
}
/* Hover-reveal variant (user 2026-05-25 refonte) :
- Enjeu (titre) en ROUGE = pain affiché clairement
- Bouton V Viridem toujours visible à droite du titre
- Survol du V → fond VERT + réponse Viridem révélée */
.sec-challenges-grid-hover { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sec-challenge.sec-challenge-hover {
flex-direction: column;
align-items: stretch;
gap: 0.45rem;
min-height: auto; /* user 2026-05-26 : cards plus compactes */
position: relative;
border-left: 4px solid #d9343a;
padding: 0.85rem 1rem;
background: #ffffff;
cursor: default;
transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.sec-challenges-grid-hover { align-items: stretch; }
/* Construction : cards très compactes (user 2026-05-26 v2 : encore plus court) */
body.theme-construction .section-custom.sector-challenges-section .sec-challenge.sec-challenge-hover {
padding: 0.55rem 0.85rem;
gap: 0.25rem;
min-height: 0;
}
body.theme-construction .section-custom.sector-challenges-section .sec-challenge-icon-svg {
width: 30px; height: 30px;
}
body.theme-construction .section-custom.sector-challenges-section .sec-challenge-icon-svg svg { width: 16px; height: 16px; }
body.theme-construction .section-custom.sector-challenges-section .sec-challenge-vbtn { width: 30px; height: 30px; }
body.theme-construction .section-custom.sector-challenges-section .sec-challenge-vbtn .sec-challenge-vicon { width: 16px; height: 16px; }
body.theme-construction .section-custom.sector-challenges-section .sec-challenge-head { gap: 0.5rem; }
body.theme-construction .section-custom.sector-challenges-section .sec-challenge .hover-reveal-label {
font-size: 0.88rem !important;
line-height: 1.25 !important;
}
/* Forcer .hover-reveal-text à hauteur 0 quand pas en hover (élimine espace vide) */
body.theme-construction .section-custom.sector-challenges-section .sec-challenge.sec-challenge-hover .hover-reveal-text {
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
display: block;
}
.sec-challenge-head {
display: flex;
align-items: center;
gap: 0.7rem;
width: 100%;
}
.sec-challenge.sec-challenge-hover .sec-challenge-label {
color: #c11b21 !important; /* enjeu en rouge */
font-weight: 800 !important;
flex: 1 1 auto;
}
/* Bouton V Viridem : c'est lui qui déclenche le reveal */
.sec-challenge-vbtn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: #ffffff;
border: 2px solid var(--primary-color, #c3e502);
cursor: help;
padding: 0;
transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 4px 14px -6px rgba(74, 94, 2, 0.25);
animation: vBtnPulse 2.4s ease-in-out infinite;
}
@keyframes vBtnPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(195, 229, 2, 0.55); }
50% { box-shadow: 0 0 0 8px rgba(195, 229, 2, 0); }
}
.sec-challenge-vbtn .sec-challenge-vicon {
width: 22px; height: 22px; filter: none; margin: 0;
}
.sec-challenge-vbtn:hover,
.sec-challenge-vbtn:focus-visible {
background: var(--primary-color, #c3e502);
transform: scale(1.1);
outline: none;
}
/* Quand le V est survolé/focus → toute la carte passe en vert + réponse révélée */
.sec-challenge.sec-challenge-hover:has(.sec-challenge-vbtn:hover),
.sec-challenge.sec-challenge-hover:has(.sec-challenge-vbtn:focus-visible),
.sec-challenge.sec-challenge-hover.is-open {
background: linear-gradient(135deg, rgba(195, 229, 2, 0.18) 0%, rgba(195, 229, 2, 0.04) 100%);
border-left-color: var(--primary-color, #c3e502);
box-shadow: 0 14px 28px -16px rgba(74, 94, 2, 0.30);
}
.sec-challenge.sec-challenge-hover:has(.sec-challenge-vbtn:hover) .sec-challenge-label,
.sec-challenge.sec-challenge-hover:has(.sec-challenge-vbtn:focus-visible) .sec-challenge-label,
.sec-challenge.sec-challenge-hover.is-open .sec-challenge-label {
color: #4a5e02 !important; /* le titre passe au vert foncé pour signifier "résolu" */
}
.sec-challenge.sec-challenge-hover:has(.sec-challenge-vbtn:hover) .hover-reveal-text,
.sec-challenge.sec-challenge-hover:has(.sec-challenge-vbtn:focus-visible) .hover-reveal-text,
.sec-challenge.sec-challenge-hover.is-open .hover-reveal-text {
max-height: 600px;
opacity: 1;
margin-top: 0.5rem;
}
.sec-challenge.sec-challenge-hover .sec-challenge-label {
font-size: 0.95rem;
line-height: 1.4;
font-weight: 600;
color: var(--text-color, #2e2d29);
}
.sec-challenge-response {
display: flex !important;
flex-wrap: wrap;
gap: 0.65rem;
align-items: flex-start;
padding: 0.85rem 0.95rem;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.14) 0%, rgba(195, 229, 2, 0.04) 100%);
border-left: 3px solid var(--primary-color, #c3e502);
border-radius: 8px;
font-size: 0.88rem;
line-height: 1.5;
color: #2e2d29;
}
.sec-challenge-gain {
display: block;
flex-basis: 100%;
color: #4a5e02;
font-weight: 800;
font-size: 1.02rem;
margin-bottom: .45rem;
letter-spacing: -0.01em;
}
.sec-challenge-vicon {
width: 22px;
height: 22px;
flex-shrink: 0;
object-fit: contain;
margin-top: 0.05rem;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}
.sec-challenge.sec-challenge-hover:hover,
.sec-challenge.sec-challenge-hover:focus,
.sec-challenge.sec-challenge-hover.is-open {
border-left-color: var(--primary-color, #c3e502);
box-shadow: 0 14px 28px rgba(46, 45, 41, 0.10);
}
.sec-challenge.sec-challenge-hover .hover-reveal-text {
width: 100%;
}
/* Reveal trigger (user 2026-05-25 : la réponse n'apparaissait jamais fix du sélecteur hover).
Les .sec-challenge-hover ne sont pas dans une .hover-reveal-list, il faut un sélecteur dédié. */
.sec-challenge.sec-challenge-hover:hover .hover-reveal-text,
.sec-challenge.sec-challenge-hover:focus-within .hover-reveal-text,
.sec-challenge.sec-challenge-hover.is-open .hover-reveal-text {
max-height: 500px;
opacity: 1;
margin-top: 0.4rem;
}
/* Sector documents (split: list + photo) */
.sec-docs-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
margin-top: 1.5rem;
}
.sec-docs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
}
.sec-doc {
display: flex;
align-items: center;
gap: 0.85rem;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.10);
border-radius: 10px;
padding: 0.85rem 1rem;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.sec-doc:hover {
transform: translateX(4px);
border-color: var(--primary-color, #c3e502);
}
.sec-doc-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
/* Variante SVG line-style (user 2026-05-22) remplace les emojis */
.sec-doc-icon-svg {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(195, 229, 2, 0.16);
color: #4a5e02;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease, color 0.25s ease;
}
.sec-doc-icon-svg svg { width: 18px; height: 18px; display: block; }
.sec-doc:hover .sec-doc-icon-svg {
background: var(--primary-color, #c3e502);
color: #1f1e1c;
}
.sec-doc > span:last-child {
font-size: 0.93rem;
font-weight: 600;
color: var(--text-color, #2e2d29);
line-height: 1.35;
}
.sec-docs-photo img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 22px 44px rgba(46, 45, 41, 0.12);
}
/* Sector features */
.sec-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
/* Construction : 2 colonnes fixes pour features (user 2026-05-26, corrigé) */
body.theme-construction .section-custom.sector-features-section .sec-features-bullets {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.9rem 1.6rem !important;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
list-style: none;
padding: 0;
}
@media (max-width: 720px) {
body.theme-construction .section-custom.sector-features-section .sec-features-bullets {
grid-template-columns: 1fr !important;
}
}
/* user 2026-06-25 : layout éditorial fonctionnalités (photo collante + liste survol) */
.feat-split { display:grid; grid-template-columns:0.82fr 1.18fr; gap:1.9rem; align-items:start; max-width:1140px; margin:1.4rem auto 0; }
.feat-split-photo { position:sticky; top:90px; border-radius:18px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.4); }
.feat-split-photo img { display:block; width:100%; height:100%; min-height:380px; max-height:460px; object-fit:cover; }
/* Portables (hauteur limitée) : bloc plus compact pour qu'il rentre (user 2026-07-06) */
@media (max-width:1500px) { .feat-split { gap:1.6rem; } .feat-split-photo img { min-height:340px; max-height:420px; } }
.feat-split-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(15,15,14,.85) 100%); }
.feat-split-badge { position:absolute; left:1.3rem; right:1.3rem; bottom:1.2rem; z-index:1; color:#fff; font-weight:800; font-size:1.12rem; line-height:1.3; }
.feat-split-badge span { color:var(--primary-color,#c3e502); }
body.theme-construction .section-custom.sector-features-section .feat-split-list .sec-features-bullets,
body.theme-manufacturier .section-custom.sector-features-section .feat-split-list .sec-features-bullets,
body.theme-distribution .section-custom.sector-features-section .feat-split-list .sec-features-bullets { grid-template-columns:1fr !important; max-width:none !important; margin:0 !important; }
@media (max-width:900px){
.feat-split { grid-template-columns:1fr; gap:1.3rem; }
.feat-split-photo { position:static; }
.feat-split-photo img { min-height:220px; max-height:300px; }
}
/* Variante bullet-list avec V Viridem + hover-reveal (user 2026-05-22) */
.sec-features-bullets {
list-style: none;
padding: 0;
margin: 2rem auto 0;
max-width: 880px;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
/* Construction : layout 2 colonnes pour la liste de fonctionnalités (user 2026-05-22) */
.sec-construction-features .sec-features-bullets {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
max-width: 1240px;
}
.sec-cf-expertise {
max-width: 1240px;
margin: 1.5rem auto 1rem;
padding: 1.6rem 1.8rem;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.08) 0%, rgba(195, 229, 2, 0.02) 100%);
border: 1px solid rgba(195, 229, 2, 0.32);
border-left: 4px solid #c3e502;
border-radius: 12px;
}
.sec-cf-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
font-weight: 800;
color: #4a5e02;
background: rgba(195, 229, 2, 0.22);
padding: 0.35rem 0.85rem;
border-radius: 999px;
margin-bottom: 0.85rem;
}
.sec-cf-expertise h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
color: #1f1e1c;
margin: 0 0 0.6rem;
line-height: 1.25;
}
.sec-cf-expertise p {
margin: 0;
font-size: 0.98rem;
line-height: 1.65;
color: #2e2d29;
}
.sec-cf-heading {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.2rem, 2.2vw, 1.5rem);
font-weight: 800;
color: #1f1e1c;
text-align: center;
margin: 2rem auto 0.75rem;
max-width: 1240px;
}
.sec-cf-heading-results { margin-top: 2.5rem; }
@media (max-width: 880px) {
.sec-construction-features .sec-features-bullets { grid-template-columns: 1fr; }
}
.sec-feature-bullet {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 1rem;
align-items: start;
padding: 1rem 1.2rem 1rem 1.2rem !important;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-left: 3px solid var(--primary-color, #c3e502);
border-radius: 10px;
cursor: pointer;
transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.sec-feature-bullet::before { content: none !important; }
.sec-feature-bullet-v {
grid-row: 1 / span 2;
width: 28px;
height: 28px;
object-fit: contain;
margin-top: 0.05rem;
filter: drop-shadow(0 1px 2px rgba(195, 229, 2, 0.35));
}
.sec-feature-bullet-title {
font-size: 1rem;
line-height: 1.35;
font-weight: 700;
color: var(--text-color, #2e2d29);
}
.sec-feature-bullet-desc {
font-size: 0.92rem;
line-height: 1.55;
color: #4a4a42;
}
.sec-feature-bullet:hover,
.sec-feature-bullet:focus,
.sec-feature-bullet.is-open {
background: linear-gradient(135deg, rgba(195, 229, 2, 0.10) 0%, rgba(195, 229, 2, 0.02) 100%);
transform: translateX(2px);
box-shadow: 0 12px 24px -14px rgba(46, 45, 41, 0.16);
}
/* ===== HOVER-REVEAL PATTERN (user 2026-05-21) =====
Sur les .sec-feature : le titre seul est visible au repos.
Au hover (ou focus, ou tap sur mobile), la description se révèle avec animation.
S'applique à toutes les pages secteur et département. */
.sec-feature {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-top: 4px solid var(--primary-color, #c3e502);
border-radius: 14px;
padding: 1.5rem 1.6rem;
transition: transform 0.3s ease, box-shadow 0.3s ease, padding 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease;
cursor: default;
position: relative;
overflow: hidden;
min-height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Petit indicateur visuel discret : flèche en coin pour signaler le hover-reveal */
.sec-feature::after {
content: "+";
position: absolute;
top: 1rem;
right: 1.15rem;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(195, 229, 2, 0.16);
color: #4a5e02;
border-radius: 50%;
font-weight: 900;
font-size: 1rem;
line-height: 1;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), background 0.3s ease, color 0.3s ease;
}
.sec-feature:hover,
.sec-feature:focus-within {
transform: translateY(-3px);
box-shadow: 0 22px 40px -18px rgba(195, 229, 2, 0.30), 0 6px 14px -8px rgba(46, 45, 41, 0.10);
padding: 1.85rem 1.6rem;
border-top-color: #4a5e02;
}
.sec-feature:hover::after,
.sec-feature:focus-within::after {
transform: rotate(45deg) scale(1.05);
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
}
.sec-feature h3 {
font-size: 1.05rem;
margin: 0;
color: var(--text-color, #2e2d29);
font-weight: 800;
letter-spacing: -0.005em;
line-height: 1.3;
padding-right: 2.5rem;
transition: margin 0.3s ease;
}
/* Description collapse par défaut, reveal au hover/focus */
.sec-feature p {
margin: 0;
color: #555;
line-height: 1.6;
font-size: 0.92rem;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease 0.05s, margin 0.3s ease;
}
.sec-feature:hover p,
.sec-feature:focus-within p,
.sec-feature.is-open p {
max-height: 320px;
opacity: 1;
margin-top: 0.8rem;
}
.sec-feature.is-open {
transform: translateY(-3px);
box-shadow: 0 22px 40px -18px rgba(195, 229, 2, 0.30), 0 6px 14px -8px rgba(46, 45, 41, 0.10);
padding: 1.85rem 1.6rem;
border-top-color: #4a5e02;
}
.sec-feature.is-open::after {
transform: rotate(45deg) scale(1.05);
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
}
/* Logo Viridem en filigrane dans le contenu déroulé (user 2026-05-21) */
.sec-feature p::after {
content: '';
display: inline-block;
vertical-align: middle;
width: 26px;
height: 26px;
margin-left: 0.5rem;
background: url('/images/viridem-logo-icon.png') no-repeat center / contain;
opacity: 0;
transition: opacity 0.3s ease 0.1s;
}
.sec-feature:hover p::after,
.sec-feature:focus-within p::after,
.sec-feature.is-open p::after {
opacity: 0.4;
}
/* Logo Viridem dans tous les autres blocs hover-reveal : manuf-doc, manuf-dept, sol-pain, ec-row, etc. */
.manuf-doc, .manuf-dept, .sol-pain, .manuf-enjeu, .manuf-response-card, .ec-row { position: relative; }
.manuf-doc.is-open::after,
.manuf-dept.is-open::after,
.sol-pain.is-open::after,
.manuf-enjeu.is-open::after,
.manuf-response-card.is-open::after,
.ec-row.is-open::after,
.manuf-doc:hover::after,
.manuf-dept:hover::after,
.sol-pain:hover::after,
.manuf-enjeu:hover::after,
.manuf-response-card:hover::after,
.ec-row:hover::after {
content: '';
position: absolute;
top: 0.8rem;
right: 0.8rem;
width: 24px;
height: 24px;
background: url('/images/viridem-logo-icon.png') no-repeat center / contain;
opacity: 0.35;
pointer-events: none;
transition: opacity 0.3s ease;
}
/* Touch devices : reveal at tap (no hover) via :focus on click handled by setting tabindex via JS,
but we also allow active state. Keyboard accessibility preserved via :focus-within. */
@media (hover: none) {
.sec-feature p { max-height: 320px; opacity: 1; margin-top: 0.8rem; }
.sec-feature::after { display: none; }
}
/* Sector CTA block */
.sec-cta-block {
margin-top: 1.5rem;
text-align: center;
}
.sec-cta-block p {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.85);
margin: 0 auto 1.75rem;
max-width: 600px;
line-height: 1.6;
}
/* Dual CTA (demo + ROI calculator) */
.sec-dual-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.sec-cta-secondary {
/* Base foncée pour rester lisible sur fond CLAIR (nouvelles pages, teaser tarif…).
Les bandeaux sombres (.sector-cta-section) gardent le blanc via leur override dédié. */
color: #2e2d29 !important;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none !important;
border-bottom: 2px solid var(--primary-color, #c3e502);
padding-bottom: 2px;
transition: color 0.3s ease, padding-right 0.3s ease;
}
.sec-cta-secondary:hover {
color: var(--primary-color, #c3e502) !important;
padding-right: 6px;
}
/* Light variant for use on light hero backgrounds */
.sec-dual-cta-light { justify-content: flex-start; }
.sec-cta-secondary-light {
color: var(--text-color, #2e2d29) !important;
}
.sec-cta-secondary-light:hover {
color: var(--primary-color, #c3e502) !important;
}
/* Fix contraste (user 2026-07-06) : les CTA secondaires sur fonds CLAIRS
étaient en blanc = invisibles. Forcer une couleur foncée lisible. */
.sec-pricing-teaser .sec-cta-secondary,
.sec-pricing-body ~ .sec-pricing-actions .sec-cta-secondary {
color: #2e2d29 !important;
}
.sec-pricing-teaser .sec-cta-secondary:hover {
color: #7a9a00 !important;
}
/* === Sector business case (challenge → solution → benefit) === */
.section-custom.sector-business-case-section {
background: var(--bg-color, #fff);
}
.sec-bc {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2.5rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.sec-bc-step {
position: relative;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 16px;
padding: 1.85rem 1.6rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sec-bc-step:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px rgba(46, 45, 41, 0.10);
}
.sec-bc-challenge { border-left: 4px solid var(--secondary-color, #E23D28); }
.sec-bc-solution { border-left: 4px solid var(--primary-color, #c3e502); background: linear-gradient(135deg, rgba(195, 229, 2, 0.08) 0%, rgba(195, 229, 2, 0.02) 100%); }
.sec-bc-benefit { border-left: 4px solid var(--text-color, #2e2d29); }
.sec-bc-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(46, 45, 41, 0.06);
margin-bottom: 1rem;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.1rem;
font-weight: 800;
color: var(--text-color, #2e2d29);
}
.sec-bc-challenge .sec-bc-num { background: rgba(226, 61, 40, 0.10); color: var(--secondary-color, #E23D28); }
/* Step 01 défi : icône SVG ou emoji (user 2026-05-22) */
.sec-bc-num-defi.sec-bc-num-svg svg { width: 24px; height: 24px; display: block; }
.sec-bc-solution .sec-bc-num.sec-bc-num-v {
background: var(--primary-color, #c3e502);
padding: 6px;
box-shadow: 0 6px 16px -4px rgba(195, 229, 2, 0.45);
}
.sec-bc-solution .sec-bc-num.sec-bc-num-v img { width: 100%; height: 100%; object-fit: contain; }
.sec-bc-benefit .sec-bc-num,
.sec-bc-num-check {
background: var(--primary-color, #c3e502);
color: #1f1e1c;
}
.sec-bc-num-check svg { width: 24px; height: 24px; display: block; }
/* "petit V qui s'affiche" retiré (user 2026-05-22) : watermark V supprimé sur sec-bc-step */
.sec-bc-step::before, .sec-bc-step::after { content: none !important; }
.sec-bc-content { display: flex; flex-direction: column; gap: 0.65rem; }
.sec-bc-tag {
display: inline-block;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.10em;
padding: 0.35rem 0.85rem;
border-radius: 100px;
align-self: flex-start;
}
.sec-bc-tag-challenge { background: rgba(226, 61, 40, 0.10); color: var(--secondary-color, #E23D28); }
.sec-bc-tag-solution { background: var(--primary-color, #c3e502); color: var(--text-color, #2e2d29); }
.sec-bc-tag-benefit { background: var(--text-color, #2e2d29); color: var(--primary-color, #c3e502); }
.sec-bc-step p {
margin: 0;
color: #444;
line-height: 1.65;
font-size: 0.97rem;
}
.sec-bc-chiffre {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(46, 45, 41, 0.10);
color: #555;
font-size: 0.92rem;
}
.sec-bc-chiffre strong {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.4rem;
color: var(--primary-color, #c3e502);
margin-right: 0.4rem;
font-weight: 900;
}
@media (max-width: 900px) {
.sec-bc { grid-template-columns: 1fr; }
}
/* === Sector SEO long-form === */
.section-custom.sector-seo-section {
background: var(--accent-color, #F7F7E8);
}
.sec-seo {
max-width: 900px;
margin: 2rem auto 0;
}
.sec-seo-h1 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.85rem;
font-weight: 800;
color: var(--text-color, #2e2d29);
margin: 0 0 1rem;
line-height: 1.25;
letter-spacing: -0.01em;
}
.sec-seo-lead {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-color, #2e2d29);
margin: 0 0 2.5rem;
}
.sec-seo-lead strong {
color: var(--primary-color, #c3e502);
font-weight: 700;
}
.sec-seo-section { margin-bottom: 2rem; }
.sec-seo-section h2 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.3rem;
font-weight: 700;
color: var(--text-color, #2e2d29);
margin: 0 0 0.75rem;
line-height: 1.35;
padding-left: 0.85rem;
border-left: 3px solid var(--primary-color, #c3e502);
}
.sec-seo-section p {
font-size: 1rem;
line-height: 1.7;
color: #444;
margin: 0;
}
.sec-seo-section p strong { color: var(--text-color, #2e2d29); font-weight: 700; }
/* Affordance de clic sur le fold "Pour aller plus loin" (user 2026-08-23) */
.sec-seo-readmore {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #7a9a00;
margin-right: 0.4rem;
white-space: nowrap;
}
.sec-seo-summary:hover .sec-seo-readmore { color: #5c7000; }
@media (max-width: 900px) {
.sec-hero-block, .sec-docs-block {
grid-template-columns: 1fr;
gap: 2rem;
}
.sec-docs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.sec-docs-grid { grid-template-columns: 1fr; }
}
/* ===== ROI Calculator (Pricing page) ===== */
.section-custom.roi-calculator-section { background: var(--accent-color, #F7F7E8); }
.roi-calculator {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 2rem;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
align-items: start;
}
.roi-form {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 18px;
padding: 2.25rem 2rem;
box-shadow: 0 14px 28px rgba(46, 45, 41, 0.06);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.roi-field { display: flex; flex-direction: column; gap: 0.4rem; }
.roi-field label {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 0.92rem;
font-weight: 700;
color: var(--text-color, #2e2d29);
letter-spacing: -0.005em;
}
.roi-field input {
border: 2px solid rgba(46, 45, 41, 0.10);
border-radius: 10px;
padding: 0.7rem 0.9rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-color, #2e2d29);
background: var(--accent-color, #F7F7E8);
transition: border-color 0.25s ease, background 0.25s ease;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
}
.roi-field input:focus {
outline: none;
border-color: var(--primary-color, #c3e502);
background: #fff;
box-shadow: 0 0 0 4px rgba(195, 229, 2, 0.18);
}
.roi-hint {
font-size: 0.82rem;
color: #777;
font-style: italic;
}
.roi-results {
background: var(--text-color, #2e2d29);
color: #fff;
border-radius: 18px;
padding: 2.25rem 2rem;
box-shadow: 0 18px 36px rgba(46, 45, 41, 0.20);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.roi-results h3 {
margin: 0;
color: #fff;
font-size: 1.3rem;
line-height: 1.3;
letter-spacing: -0.01em;
}
.roi-results-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
}
.roi-stat {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 12px;
padding: 1.25rem 1rem;
text-align: center;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.roi-stat:hover {
background: rgba(195, 229, 2, 0.08);
border-color: rgba(195, 229, 2, 0.35);
transform: translateY(-2px);
}
.roi-stat-highlight {
background: rgba(195, 229, 2, 0.16);
border-color: var(--primary-color, #c3e502);
grid-column: 1 / -1;
}
.roi-stat-value {
display: block;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 2rem;
font-weight: 900;
color: var(--primary-color, #c3e502);
line-height: 1;
margin-bottom: 0.4rem;
letter-spacing: -0.02em;
transition: transform 0.3s ease;
}
.roi-stat-highlight .roi-stat-value { font-size: 2.4rem; }
.roi-stat-value.roi-pulse { animation: roiPulse 0.5s ease-out; }
/* ROI v2 Comparaison Achat vs Abonnement (user 2026-05-26) */
.roi-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1rem;
}
.roi-compare-col {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 1.4rem 1.2rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.roi-compare-col-best {
background: linear-gradient(180deg, rgba(195, 229, 2, 0.14) 0%, rgba(195, 229, 2, 0.04) 100%);
border-color: rgba(195, 229, 2, 0.55);
box-shadow: 0 14px 32px -20px rgba(74, 94, 2, 0.45);
}
.roi-compare-col h4 {
margin: 0 0 0.4rem;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.1rem;
font-weight: 800;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.roi-compare-badge {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1f2c4a;
background: var(--primary-color, #c3e502);
padding: 0.22rem 0.55rem;
border-radius: 999px;
}
.roi-compare .roi-stat {
padding: 0.85rem 0.9rem;
text-align: left;
}
.roi-compare .roi-stat-value { font-size: 1.45rem; margin-bottom: 0.25rem; }
.roi-compare .roi-stat-highlight {
grid-column: auto;
background: rgba(195, 229, 2, 0.20);
border-color: var(--primary-color, #c3e502);
}
.roi-compare .roi-stat-highlight .roi-stat-value { font-size: 1.7rem; }
.roi-compare .roi-stat-label {
display: block;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.72);
}
.roi-note {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.55);
font-style: italic;
margin: 0.85rem 0 1rem;
line-height: 1.5;
}
@media (max-width: 720px) {
.roi-compare { grid-template-columns: 1fr; }
}
@keyframes roiPulse {
0% { transform: scale(1); }
50% { transform: scale(1.12); }
100% { transform: scale(1); }
}
.roi-stat-label {
display: block;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.78);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.35;
}
.roi-disclaimer {
margin: 0;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
font-style: italic;
line-height: 1.55;
}
.roi-results .hero-btn { align-self: flex-start; }
/* ROI CTA row : primary email-capture button + secondary demo link */
.roi-cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-top: 1.25rem;
}
.roi-email-btn { white-space: nowrap; }
.roi-cta-secondary {
color: rgba(255, 255, 255, 0.75);
font-size: 0.92rem;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, 0.30);
}
.roi-cta-secondary:hover { color: var(--primary-color, #c3e502); }
/* Email-capture panel (collapsed by default, revealed by JS) */
.roi-email-panel {
margin-top: 1.5rem;
padding: 1.25rem 1.4rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(195, 229, 2, 0.30);
border-radius: 12px;
color: #fff;
}
.roi-email-panel.is-open { animation: roiEmailReveal 0.3s ease both; }
@keyframes roiEmailReveal {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.roi-email-intro {
font-size: 0.92rem;
margin: 0 0 0.85rem;
line-height: 1.55;
}
.roi-email-form {
display: grid;
grid-template-columns: 1.4fr 1fr auto;
gap: 0.6rem;
}
.roi-email-form input {
padding: 0.65rem 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(255, 255, 255, 0.10);
color: #fff;
border-radius: 8px;
font-size: 0.92rem;
}
.roi-email-form input::placeholder { color: rgba(255, 255, 255, 0.55); }
.roi-email-form input:focus {
outline: none;
border-color: var(--primary-color, #c3e502);
background: rgba(255, 255, 255, 0.16);
}
.roi-email-form .hero-btn { white-space: nowrap; }
.roi-email-foot {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.55);
font-style: italic;
margin: 0.65rem 0 0;
}
.roi-email-success {
color: var(--primary-color, #c3e502);
font-weight: 700;
margin: 0;
font-size: 0.95rem;
}
.roi-email-error {
color: #ff9985;
font-size: 0.85rem;
margin: 0.5rem 0 0;
}
@media (max-width: 720px) {
.roi-email-form { grid-template-columns: 1fr; }
}
/* Form heading */
.roi-form-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-color, #2e2d29);
margin: 0 0 0.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.roi-form-note {
font-size: 0.85rem;
color: #555;
line-height: 1.55;
padding-top: 1rem;
margin-top: 0.5rem;
border-top: 1px solid rgba(46, 45, 41, 0.10);
font-style: italic;
}
/* ROI sources card (3 cited studies under the form inputs) */
.roi-sources {
list-style: none;
margin: 1.25rem 0 0;
padding: 1rem 1.1rem;
background: rgba(195, 229, 2, 0.06);
border-left: 3px solid var(--primary-color, #c3e502);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 0.7rem;
font-size: 0.85rem;
color: var(--text-color, #2e2d29);
}
.roi-sources li {
display: grid;
grid-template-columns: 64px 1fr;
grid-template-rows: auto auto;
column-gap: 0.85rem;
row-gap: 0.15rem;
}
.roi-sources li strong {
grid-row: 1 / span 2;
align-self: center;
font-size: 1.15rem;
font-weight: 900;
color: #4a5e02;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
}
.roi-sources li span {
grid-column: 2;
line-height: 1.35;
font-weight: 600;
}
.roi-sources li cite {
grid-column: 2;
font-style: italic;
font-size: 0.78rem;
color: #6a6a62;
}
/* Calendly handoff button (third CTA primary visual treatment but distinct from email btn) */
.roi-cta-calendly {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.85rem 1.4rem;
background: rgba(195, 229, 2, 0.15);
color: var(--primary-color, #c3e502);
border: 1.5px solid var(--primary-color, #c3e502);
border-radius: 999px;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
transition: background 0.25s ease, transform 0.2s ease, color 0.25s ease;
}
.roi-cta-calendly:hover {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
transform: translateY(-1px);
}
/* Current-situation breakdown (results column) */
.roi-breakdown {
list-style: none;
padding: 0;
margin: 0 0 1rem 0;
}
.roi-breakdown li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.85);
font-size: 0.92rem;
}
.roi-bd-label { line-height: 1.3; }
.roi-bd-value {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
font-size: 1.05rem;
white-space: nowrap;
}
.roi-bd-total {
border-bottom: none !important;
border-top: 2px solid rgba(226, 61, 40, 0.45);
margin-top: 0.5rem;
padding-top: 1rem !important;
font-weight: 700;
}
.roi-bd-total .roi-bd-label {
color: var(--secondary-color, #E23D28);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.85rem;
font-weight: 700;
}
.roi-bd-total .roi-bd-value {
color: var(--secondary-color, #E23D28);
font-size: 1.4rem;
}
.roi-savings-title {
margin: 1.5rem 0 0;
color: var(--primary-color, #c3e502);
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ===== Pricing explained long-form SEO text with alternating photos
user 2026-06-10 : design premium — fond clair lime, typo punchy, cartes ombre ===== */
.section-custom.pricing-explained-section {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 60%, #fafaf6 100%);
padding: 3.5rem 0 4rem;
}
.pe-article {
max-width: 1180px;
margin: 1rem auto 0;
}
.pe-h1 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.8rem, 3.6vw, 2.4rem);
font-weight: 900;
color: #1f1e1c;
margin: 0 0 1.4rem;
line-height: 1.18;
letter-spacing: -0.018em;
text-align: center;
}
.pe-h1::after {
content: "";
display: block;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #c3e502 0%, #d3f312 100%);
border-radius: 999px;
margin: 0.9rem auto 0;
}
.pe-lead {
font-size: 1.12rem;
line-height: 1.65;
color: #2e2d29;
margin: 0 auto 3rem;
max-width: 880px;
text-align: center;
}
.pe-lead strong {
color: #4a5e02;
font-weight: 800;
background: rgba(195, 229, 2, 0.15);
padding: 0.1rem 0.35rem;
border-radius: 4px;
}
.pe-block {
margin-bottom: 2.2rem;
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.06);
border-radius: 20px;
padding: 2.2rem 2.4rem;
box-shadow:
0 18px 40px -24px rgba(46, 45, 41, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
position: relative;
overflow: hidden;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
.pe-block::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 5px; height: 100%;
background: linear-gradient(180deg, #c3e502 0%, #4a5e02 100%);
border-radius: 0 4px 4px 0;
}
.pe-block:hover {
transform: translateY(-3px);
box-shadow:
0 28px 56px -22px rgba(74, 94, 2, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.pe-block h2 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
font-weight: 800;
color: #1f1e1c;
margin: 0 0 1rem;
line-height: 1.22;
letter-spacing: -0.012em;
position: relative;
padding-left: 0;
border-left: none;
}
.pe-block p {
font-size: 1.02rem;
line-height: 1.7;
color: #4a4a42;
margin: 0 0 1rem;
}
.pe-block p strong { color: #1f1e1c; font-weight: 800; }
.pe-block-split {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 2.5rem;
align-items: center;
}
.pe-block-reverse .pe-block-text { order: 2; }
.pe-block-reverse .pe-block-photo { order: 1; }
.pe-block-photo {
margin: 0;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 24px 50px -22px rgba(46, 45, 41, 0.30);
max-height: 380px;
}
.pe-block-photo img { object-fit: cover; max-height: 380px; }
.pe-block-photo img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.pe-block-photo:hover img { transform: scale(1.04); }
.pe-list {
list-style: none;
padding: 0;
margin: 1rem 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem 2rem;
}
.pe-list li {
position: relative;
padding: 0.5rem 0 0.5rem 2.35rem;
color: var(--text-color, #2e2d29);
line-height: 1.55;
font-size: 0.97rem;
}
.pe-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.65rem;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
}
.pe-list li::after {
content: 'V';
font-family: var(--heading-font, 'JekoRegular', sans-serif);
position: absolute;
left: 0.35rem;
top: 0.7rem;
color: #1f1e1c;
font-weight: 800;
font-size: 0.82rem;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.pe-list li strong { color: var(--text-color, #2e2d29); font-weight: 700; }
/* Process / steps */
.pe-block-process { background: var(--accent-color, #F7F7E8); padding: 2.5rem 2rem; border-radius: 18px; }
.pe-block-process h2 { padding-left: 0; border-left: none; }
.pe-process {
list-style: none;
padding: 0;
margin: 1.5rem 0 2rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
counter-reset: pe-step;
}
.pe-process li {
background: #fff;
border-radius: 14px;
padding: 1.25rem 1.4rem;
display: flex;
align-items: flex-start;
gap: 1rem;
border: 1px solid rgba(46, 45, 41, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pe-process li:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(195, 229, 2, 0.15);
}
.pe-process-num {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.05rem;
}
.pe-process li > div { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.25rem; }
.pe-process li strong {
color: var(--text-color, #2e2d29);
font-size: 0.98rem;
font-weight: 700;
line-height: 1.4;
}
.pe-process li span {
color: #555;
font-size: 0.88rem;
line-height: 1.55;
}
.pe-cta-box {
background: var(--text-color, #2e2d29);
color: #fff;
border-radius: 14px;
padding: 1.75rem 2rem;
text-align: center;
}
.pe-cta-box p {
margin: 0 0 1.25rem;
font-size: 1.05rem;
color: #ffffff;
}
.pe-cta-box strong { color: #ffffff; }
/* Sources footer (small, expert-credibility) */
.pe-sources {
margin: 3rem 0 0;
padding: 1.5rem 1.75rem;
background: var(--accent-color, #F7F7E8);
border-left: 4px solid var(--primary-color, #c3e502);
border-radius: 8px;
}
.pe-sources h3 {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-color, #2e2d29);
margin: 0 0 0.85rem;
font-weight: 700;
}
.pe-sources ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pe-sources li {
font-size: 0.88rem;
color: #555;
line-height: 1.55;
}
.pe-sources li strong {
color: var(--text-color, #2e2d29);
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
margin-right: 0.4rem;
}
.pe-sources li em { color: #777; font-style: italic; }
@media (max-width: 900px) {
.pe-block-split { grid-template-columns: 1fr; gap: 1.5rem; }
.pe-block-reverse .pe-block-text { order: 0; }
.pe-block-reverse .pe-block-photo { order: 0; }
.pe-list { grid-template-columns: 1fr; gap: 0.65rem; }
.pe-process { grid-template-columns: 1fr; }
.pe-h1 { font-size: 1.6rem; }
.pe-block h2 { font-size: 1.3rem; }
}
/* ===== Pricing context section (slide-style, mimics the "Contexte et enjeux" deck slide) ===== */
.section-custom.pricing-context-section {
background: linear-gradient(135deg, rgba(195, 229, 2, 0.18) 0%, rgba(195, 229, 2, 0.05) 100%);
position: relative;
overflow: hidden;
}
.section-custom.pricing-context-section::after {
content: 'V';
position: absolute;
bottom: -180px;
left: 50%;
transform: translateX(-50%);
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 32rem;
font-weight: 900;
color: rgba(195, 229, 2, 0.18);
line-height: 1;
pointer-events: none;
z-index: 0;
}
.pc-block {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 2rem auto 0;
}
.pc-rows { display: flex; flex-direction: column; gap: 1.75rem; }
.pc-row {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2.5rem;
align-items: center;
}
.pc-question {
margin: 0;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.15rem;
font-weight: 600;
color: var(--text-color, #2e2d29);
line-height: 1.45;
}
.pc-answer { display: flex; align-items: center; gap: 1rem; }
.pc-checkbox {
flex-shrink: 0;
width: 22px;
height: 22px;
border: 2px solid var(--text-color, #2e2d29);
border-radius: 4px;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
color: transparent;
font-weight: 900;
transition: all 0.3s ease;
}
.pc-row:hover .pc-checkbox {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
}
.pc-row:hover .pc-checkbox::after {
content: '✓';
}
.pc-answer > div { display: flex; flex-direction: column; gap: 0.2rem; }
.pc-stat {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.65rem;
font-weight: 900;
color: var(--text-color, #2e2d29);
line-height: 1.1;
letter-spacing: -0.02em;
}
.pc-cite {
font-size: 0.83rem;
color: #555;
font-style: italic;
line-height: 1.45;
}
.pc-conclusion {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 2px dashed rgba(46, 45, 41, 0.15);
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2.5rem;
align-items: center;
}
.pc-conclusion-q {
margin: 0;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.18rem;
font-weight: 700;
color: var(--text-color, #2e2d29);
line-height: 1.5;
}
.pc-conclusion-q strong { color: var(--primary-color, #c3e502); }
.pc-conclusion-a {
display: flex;
align-items: center;
gap: 1rem;
}
.pc-checkbox-final {
background: var(--primary-color, #c3e502);
border-color: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
width: 28px;
height: 28px;
}
.pc-conclusion-stat {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 2.4rem;
font-weight: 900;
color: var(--secondary-color, #E23D28);
line-height: 1;
letter-spacing: -0.02em;
}
@media (max-width: 768px) {
.pc-row, .pc-conclusion { grid-template-columns: 1fr; gap: 0.85rem; }
.pc-question { font-size: 1.05rem; }
.pc-stat { font-size: 1.4rem; }
.pc-conclusion-stat { font-size: 1.85rem; }
}
/* ===== Pricing packages (per-sector cards) ===== */
.section-custom.pricing-packages-section { background: var(--bg-color, #fff); }
.pkg-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.pkg-card {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 18px;
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s ease,
border-color 0.35s ease;
position: relative;
overflow: hidden;
}
.pkg-card::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: var(--primary-color, #c3e502);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.pkg-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 44px rgba(46, 45, 41, 0.12);
border-color: rgba(195, 229, 2, 0.45);
}
.pkg-card:hover::after { transform: scaleX(1); }
.pkg-icon {
font-size: 2.5rem;
line-height: 1;
margin-bottom: 1rem;
width: 64px;
height: 64px;
background: rgba(195, 229, 2, 0.14);
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pkg-sector {
font-size: 1.35rem;
margin: 0 0 1rem;
color: var(--text-color, #2e2d29);
font-weight: 700;
letter-spacing: -0.01em;
}
.pkg-price {
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(46, 45, 41, 0.08);
}
.pkg-price-amount {
display: block;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.55rem;
font-weight: 900;
color: var(--primary-color, #c3e502);
line-height: 1;
margin-bottom: 0.3rem;
}
.pkg-price-label {
display: block;
font-size: 0.85rem;
color: #777;
font-style: italic;
}
.pkg-includes {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
flex: 1;
}
.pkg-includes li {
position: relative;
padding: 0.45rem 0 0.45rem 1.65rem;
font-size: 0.92rem;
line-height: 1.5;
color: var(--text-color, #2e2d29);
}
.pkg-includes li::before {
content: '';
position: absolute;
left: 0;
top: 0.5rem;
width: 18px;
height: 18px;
background: url('/images/viridem-logo-icon.png') no-repeat center / contain;
}
.pkg-cta {
color: var(--text-color, #2e2d29) !important;
font-weight: 700;
font-size: 0.93rem;
text-decoration: none !important;
border-bottom: 2px solid var(--primary-color, #c3e502);
padding-bottom: 2px;
align-self: flex-start;
transition: color 0.3s ease, padding-right 0.3s ease;
}
.pkg-card:hover .pkg-cta {
color: var(--primary-color, #c3e502) !important;
padding-right: 4px;
}
/* ===== Always-included items ===== */
.section-custom.pricing-included-section { background: var(--accent-color, #F7F7E8); }
.inc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* user 2026-08-13 : 3 par ligne (2 lignes de 3) au lieu de 4+2 */
gap: 1.25rem;
max-width: 1100px;
margin: 2rem auto 0;
}
@media (max-width: 860px) {
.inc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.inc-grid { grid-template-columns: 1fr; }
}
.inc-item {
background: #fff;
border-radius: 14px;
padding: 1.4rem 1.4rem 1.25rem;
border: 1px solid rgba(46, 45, 41, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.inc-item:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(195, 229, 2, 0.16);
}
.inc-icon {
font-size: 1.85rem;
line-height: 1;
margin-bottom: 0.6rem;
display: block;
}
.inc-item strong {
display: block;
font-size: 1.05rem;
color: var(--text-color, #2e2d29);
margin-bottom: 0.4rem;
font-weight: 700;
}
.inc-item p {
margin: 0;
color: #555;
font-size: 0.92rem;
line-height: 1.55;
}
.section-custom.pricing-faq-section { background: var(--bg-color, #fff); }
@media (max-width: 900px) {
.roi-calculator { grid-template-columns: 1fr; gap: 2rem; }
.roi-results-grid { grid-template-columns: 1fr; }
.roi-stat-highlight { grid-column: auto; }
.roi-sources { padding: 1.5rem 1.4rem; }
.roi-sources-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}
/* ===== Career page sections ===== */
.section-custom.career-why-section {
background:
radial-gradient(circle at 88% 8%, rgba(195,229,2,0.26), transparent 40%),
radial-gradient(circle at 2% 95%, rgba(195,229,2,0.10), transparent 42%),
linear-gradient(135deg, #fbfbf2 0%, #f3f4e2 100%);
position: relative;
overflow: hidden;
}
/* subtle tech dot grid, fading diagonally */
.section-custom.career-why-section::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(46,45,41,0.055) 1px, transparent 1px);
background-size: 22px 22px;
-webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.55), transparent 58%);
mask-image: linear-gradient(135deg, rgba(0,0,0,0.55), transparent 58%);
pointer-events: none;
z-index: 0;
}
.career-why {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: center;
margin-top: 1.5rem;
position: relative;
z-index: 1;
}
.career-why-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #4a5e02;
background: rgba(195, 229, 2, 0.20);
border: 1px solid rgba(195, 229, 2, 0.55);
padding: 0.42rem 0.95rem;
border-radius: 999px;
margin-bottom: 1.15rem;
}
.career-why-eyebrow::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #7da000;
box-shadow: 0 0 0 3px rgba(195, 229, 2, 0.30);
}
.career-why-text h3 {
font-size: clamp(2rem, 3.6vw, 2.9rem);
line-height: 1.12;
letter-spacing: -0.02em;
font-weight: 800;
margin: 0 0 1rem;
color: var(--text-color, #2e2d29);
}
.career-why-text p {
font-size: 1.08rem;
line-height: 1.7;
color: #444;
margin: 0 0 1.5rem;
}
.career-why-cta {
display: inline-block;
color: var(--text-color, #2e2d29) !important;
font-weight: 700;
font-size: 1rem;
border-bottom: 2px solid var(--primary-color, #c3e502);
padding-bottom: 2px;
text-decoration: none !important;
transition: color 0.3s ease;
}
.career-why-cta:hover { color: var(--primary-color, #c3e502) !important; }
.career-why-actions {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.career-why-lead {
font-size: 1.18rem !important;
color: var(--text-color, #2e2d29) !important;
font-weight: 500;
}
.career-why-lead strong { color: var(--primary-color, #c3e502); font-weight: 700; }
/* Hero stat band -> mini cards */
.career-why-stats {
gap: 0.9rem !important;
}
.career-why-stats > div {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 14px;
padding: 0.85rem 1.15rem;
box-shadow: 0 8px 22px rgba(46, 45, 41, 0.06);
backdrop-filter: blur(2px);
min-width: 118px;
}
.career-why-image {
position: relative;
background: linear-gradient(135deg, rgba(195,229,2,0.22), rgba(195,229,2,0.05));
border-radius: 24px;
padding: 1.25rem 1.25rem 1.5rem;
box-shadow: 0 24px 52px rgba(46, 45, 41, 0.14);
margin: 0;
}
/* floating lime accent ring behind the photo */
.career-why-image::after {
content: "";
position: absolute;
inset: -10px -10px auto auto;
width: 88px;
height: 88px;
border-radius: 50%;
background: radial-gradient(circle, rgba(195,229,2,0.55), transparent 70%);
z-index: -1;
}
.career-why-image img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 18px;
display: block;
}
.career-why-image figcaption {
margin-top: 1rem;
padding: 0 0.5rem;
text-align: left;
}
.career-why-quote {
display: block;
font-size: 0.95rem;
line-height: 1.55;
color: var(--text-color, #2e2d29);
font-style: italic;
margin-bottom: 0.4rem;
}
.career-why-author {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: var(--primary-color, #c3e502);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Values section */
/* user 2026-08-03 : refonte design du bloc valeurs "Ce qui nous anime" (mm traitement que les avantages) */
.section-custom.career-values-section {
background:
radial-gradient(120% 120% at 0% 0%, rgba(195, 229, 2, 0.10) 0%, rgba(195, 229, 2, 0) 42%),
linear-gradient(180deg, #fbfcf5 0%, #f5f8ea 100%);
}
.career-values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.2rem;
margin: 2.2rem auto 0;
max-width: 1140px;
}
.career-value {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #fcfdf6 100%);
border: 1px solid rgba(46, 45, 41, 0.07);
border-radius: 18px;
padding: 1.75rem 1.55rem;
text-align: left;
box-shadow: 0 1px 2px rgba(31, 30, 28, 0.04), 0 10px 24px -18px rgba(31, 30, 28, 0.25);
overflow: hidden;
transition: transform 0.32s cubic-bezier(.2,.8,.2,1), box-shadow 0.32s ease, border-color 0.32s ease;
}
.career-value::before {
content: "";
position: absolute;
top: 0; left: 1.55rem;
width: 40px; height: 3px;
border-radius: 0 0 4px 4px;
background: linear-gradient(90deg, #c3e502, #a8c800);
opacity: 0;
transition: opacity 0.32s ease, width 0.32s ease;
}
.career-value:hover {
transform: translateY(-6px);
box-shadow: 0 1px 2px rgba(31, 30, 28, 0.05), 0 22px 42px -22px rgba(74, 94, 2, 0.35);
border-color: rgba(195, 229, 2, 0.5);
}
.career-value:hover::before { opacity: 1; width: 64px; }
.career-value-icon {
width: 60px;
height: 60px;
border-radius: 16px;
background: linear-gradient(135deg, #eef7c8 0%, #dff09a 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 6px 14px -8px rgba(74, 94, 2, 0.45);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.85rem;
margin: 0 auto 1.05rem 0;
transition: transform 0.32s cubic-bezier(.2,.8,.2,1), background 0.32s ease, box-shadow 0.32s ease;
}
.career-value-icon svg { transition: stroke 0.32s ease; }
.career-value:hover .career-value-icon {
background: linear-gradient(135deg, #c3e502 0%, #a8c800 100%);
transform: translateY(-2px) scale(1.06) rotate(-3deg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 22px -10px rgba(74, 94, 2, 0.6);
}
.career-value:hover .career-value-icon svg { stroke: #1f1e1c; }
.career-values-grid .career-value { text-align: left; }
.career-value h3 {
font-size: 1.16rem;
margin: 0 0 0.5rem;
color: var(--text-color, #2e2d29);
font-weight: 750;
letter-spacing: -0.01em;
}
.career-value p {
font-size: 0.95rem;
line-height: 1.6;
color: #555;
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.career-value, .career-value-icon { transition: none; }
.career-value:hover { transform: none; }
.career-value:hover .career-value-icon { transform: none; }
}
/* Jobs section */
.section-custom.career-jobs-section {
background: var(--accent-color, #F7F7E8);
}
.career-jobs-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 980px;
margin: 2rem auto 0;
}
.career-job {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-left: 4px solid var(--primary-color, #c3e502);
border-radius: 14px;
padding: 1.85rem 2rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: grid;
grid-template-columns: 1fr auto;
gap: 1.5rem;
align-items: center;
}
.career-job > p { grid-column: 1 / -1; margin: 0.25rem 0 0 0; }
.career-job:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px rgba(195, 229, 2, 0.18);
}
.career-job-header h3 {
font-size: 1.3rem;
margin: 0 0 0.65rem;
color: var(--text-color, #2e2d29);
font-weight: 700;
line-height: 1.3;
}
.career-job-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.career-job-tag {
display: inline-block;
padding: 0.32rem 0.85rem;
background: rgba(46, 45, 41, 0.06);
color: #555;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.career-job-tag-mode {
background: rgba(195, 229, 2, 0.18);
color: var(--text-color, #2e2d29);
}
.career-job p {
color: #555;
line-height: 1.65;
font-size: 0.96rem;
}
.career-job-apply {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1.6rem;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29) !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.85rem;
border-radius: 100px;
text-decoration: none !important;
transition: all 0.3s ease;
white-space: nowrap;
align-self: start;
}
.career-job-apply:hover {
background: var(--text-color, #2e2d29);
color: var(--primary-color, #c3e502) !important;
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(46, 45, 41, 0.20);
}
.career-jobs-spontane {
text-align: center;
margin: 2.5rem auto 0;
color: #555;
font-size: 0.97rem;
max-width: 600px;
}
.career-jobs-spontane a {
color: var(--text-color, #2e2d29);
font-weight: 700;
border-bottom: 2px solid var(--primary-color, #c3e502);
text-decoration: none;
}
.career-jobs-spontane a:hover { color: var(--primary-color, #c3e502); }
/* Process section */
.section-custom.career-process-section {
background: var(--bg-color, #fff);
}
.career-process-list {
list-style: none;
padding: 0;
margin: 2rem auto 0;
max-width: 880px;
display: flex;
flex-direction: column;
gap: 0;
counter-reset: career-step;
}
.career-process-step {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 1.5rem 1.5rem 1.5rem 1.25rem;
border-bottom: 1px solid rgba(46, 45, 41, 0.08);
position: relative;
}
.career-process-step:last-child { border-bottom: none; }
/* user 2026-06-23 : frise d'entretien animée — le candidat avance d'étape en étape */
.recrut-flow { margin: 1.2rem 0 0.5rem; }
.recrut-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-top: 3rem; }
.recrut-line { position: absolute; top: 1.5rem; left: 12.5%; right: 12.5%; height: 3px; background: linear-gradient(90deg, rgba(195,229,2,.35), rgba(195,229,2,.85)); border-radius: 2px; }
.recrut-step { text-align: center; padding: 0 .5rem; }
.recrut-num { display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:50%; background:#c3e502; color:#1f1e1c; font-weight:800; margin-bottom:.55rem; position:relative; z-index:1; box-shadow:0 2px 8px rgba(74,94,2,.25); }
.recrut-step strong { display:block; font-size:.95rem; margin-bottom:.25rem; color:#1f1e1c; }
.recrut-desc { font-size:.82rem; color:#666; line-height:1.45; }
.recrut-candidate { position:absolute; top:.1rem; left:12.5%; transform:translateX(-50%); font-size:1.75rem; z-index:3; animation: recrut-walk 11s ease-in-out infinite; will-change:left; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); }
@keyframes recrut-walk {
0%,15% { left:12.5%; }
25%,40% { left:37.5%; }
50%,65% { left:62.5%; }
75%,97% { left:87.5%; }
100% { left:12.5%; }
}
@media (max-width:760px){
.recrut-track { grid-template-columns:1fr; gap:1.3rem; padding-top:.4rem; }
.recrut-line, .recrut-candidate { display:none; }
.recrut-step { text-align:left; display:flex; gap:.75rem; align-items:flex-start; }
.recrut-num { margin-bottom:0; flex:0 0 auto; }
.recrut-step strong { margin-top:.25rem; }
}
@media (prefers-reduced-motion: reduce){ .recrut-candidate { animation:none; } }
.career-process-step:not(:last-child)::after {
content: '';
position: absolute;
left: 41px;
top: 100%;
width: 2px;
height: 0;
background: var(--primary-color, #c3e502);
z-index: 1;
}
.career-process-num {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.15rem;
box-shadow: 0 6px 16px rgba(195, 229, 2, 0.30);
}
.career-process-step > div {
display: flex;
flex-direction: column;
padding-top: 0.4rem;
}
.career-process-step strong {
font-size: 1.1rem;
color: var(--text-color, #2e2d29);
margin-bottom: 0.3rem;
font-weight: 700;
}
.career-process-step span {
color: #555;
line-height: 1.6;
font-size: 0.97rem;
}
@media (max-width: 768px) {
.career-job {
grid-template-columns: 1fr;
padding: 1.5rem 1.4rem;
gap: 1rem;
}
.career-job-apply { align-self: start; }
.career-process-step { padding: 1.25rem 1rem; gap: 1rem; }
.career-process-num { width: 38px; height: 38px; font-size: 1rem; }
}
/* user 2026-08-03 : refonte design du bloc avantages sociaux (icones/contenu inchanges) */
.section-custom.career-benefits-section {
background:
radial-gradient(120% 120% at 100% 0%, rgba(195, 229, 2, 0.10) 0%, rgba(195, 229, 2, 0) 42%),
linear-gradient(180deg, #fbfcf5 0%, #f5f8ea 100%);
}
.career-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: 1.1rem;
margin: 2.2rem auto 0;
max-width: 1140px;
}
.career-benefit {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #fcfdf6 100%);
border: 1px solid rgba(46, 45, 41, 0.07);
border-radius: 18px;
padding: 1.65rem 1rem 1.4rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
box-shadow: 0 1px 2px rgba(31, 30, 28, 0.04), 0 10px 24px -18px rgba(31, 30, 28, 0.25);
overflow: hidden;
transition: transform 0.32s cubic-bezier(.2,.8,.2,1), box-shadow 0.32s ease, border-color 0.32s ease;
}
.career-benefit::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 34px; height: 3px;
border-radius: 0 0 4px 4px;
background: linear-gradient(90deg, #c3e502, #a8c800);
opacity: 0;
transition: opacity 0.32s ease, width 0.32s ease;
}
.career-benefit:hover {
transform: translateY(-6px);
box-shadow: 0 1px 2px rgba(31, 30, 28, 0.05), 0 22px 42px -22px rgba(74, 94, 2, 0.35);
border-color: rgba(195, 229, 2, 0.5);
}
.career-benefit:hover::before { opacity: 1; width: 56px; }
.career-benefit-icon {
font-size: 2rem;
line-height: 1;
width: 62px;
height: 62px;
border-radius: 16px;
background: linear-gradient(135deg, #eef7c8 0%, #dff09a 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 6px 14px -8px rgba(74, 94, 2, 0.45);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.32s cubic-bezier(.2,.8,.2,1), background 0.32s ease, box-shadow 0.32s ease;
}
.career-benefit-icon svg { transition: stroke 0.32s ease; }
.career-benefit:hover .career-benefit-icon {
background: linear-gradient(135deg, #c3e502 0%, #a8c800 100%);
transform: translateY(-2px) scale(1.06) rotate(-3deg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 22px -10px rgba(74, 94, 2, 0.6);
}
.career-benefit:hover .career-benefit-icon svg { stroke: #1f1e1c; }
.career-benefit-label {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 0.95rem;
font-weight: 650;
color: var(--text-color, #2e2d29);
line-height: 1.35;
letter-spacing: -0.005em;
}
@media (prefers-reduced-motion: reduce) {
.career-benefit, .career-benefit-icon { transition: none; }
.career-benefit:hover { transform: none; }
.career-benefit:hover .career-benefit-icon { transform: none; }
}
.section-custom.career-cta-section {
background: #1f1e1c;
color: #fff;
}
/* user 2026-06-25 : rythme visuel page carrière */
.section-custom.career-mission-section {
background: radial-gradient(120% 140% at 80% 0%, rgba(195,229,2,0.14) 0%, rgba(31,30,28,0) 45%), linear-gradient(135deg, #1f1e1c 0%, #2a2a25 100%);
color: #fff;
}
.section-custom.career-mission-section .section-title { color: #fff !important; }
.section-custom.career-mission-section strong { color: var(--primary-color, #c3e502); }
/* Fix visibilité (user 2026-07-06) : forcer le fond foncé + texte blanc, un override l'aplatissait en blanc/blanc */
.career-mission-section {
background: radial-gradient(120% 140% at 80% 0%, rgba(195,229,2,0.16) 0%, rgba(31,30,28,0) 45%), linear-gradient(135deg, #1f1e1c 0%, #2a2a25 100%) !important;
color: #fff !important;
}
.career-mission-section .section-title,
.career-mission-section p { color: #fff !important; }
.career-mission-section strong { color: #c3e502 !important; }
.section-custom.career-location-section { background: rgba(195, 229, 2, 0.07); }
.section-custom.career-cta-section .section-title { color: #fff; }
.section-custom.career-cta-section .section-subtitle { color: rgba(255,255,255,0.78); }
.career-cta-wrapper {
text-align: center;
margin-top: 1.5rem;
}
.career-cta-contact {
margin-top: 2rem;
color: rgba(255, 255, 255, 0.92) !important; /* user 2026-07-14 : encre trop pâle -> nettement plus lisible sur fond foncé */
font-size: 0.95rem;
line-height: 1.7;
}
.section-custom.career-cta-section { background: #1f1e1c !important; } /* garantir le fond foncé (contraste de l'adresse) */
.career-cta-contact strong { color: #fff; }
.career-cta-contact a { color: var(--primary-color, #c3e502) !important; }
/* user 2026-07-17 : garantir la lisibilité de TOUTE la bande noire « Prêt à nous rejoindre » */
.section-custom.career-cta-section,
.section-custom.career-cta-section h1,
.section-custom.career-cta-section h2,
.section-custom.career-cta-section h3,
.section-custom.career-cta-section p,
.section-custom.career-cta-section span,
.section-custom.career-cta-section li,
.section-custom.career-cta-section .section-title,
.section-custom.career-cta-section .section-subtitle { color: #ffffff !important; }
.section-custom.career-cta-section a:not(.hero-btn) { color: #c3e502 !important; }
.section-custom.career-cta-section .hero-btn { color: #1f1e1c !important; background: #c3e502 !important; border-color: #c3e502 !important; }
.section-custom.career-cta-section .hero-btn:hover { background: #d3f312 !important; }
/* user 2026-08-21 : slogan "Moins a faire, plus de rencontres" en VERT (la regle blanche ci-dessus l'ecrasait) */
.section-custom.career-cta-section .career-cta-slogan { color: #c3e502 !important; }
@media (max-width: 768px) {
.career-why { grid-template-columns: 1fr; gap: 2rem; }
.career-why-image { padding: 2rem 1rem; }
.career-benefits-grid { grid-template-columns: repeat(2, 1fr); }
.career-benefit { padding: 1.2rem 0.75rem 1rem; }
.career-benefit-icon { font-size: 1.6rem; width: 48px; height: 48px; }
.career-benefit-label { font-size: 0.86rem; }
}
/* ===== Transformation flow (legacy schema: pain → V → benefits) =====
Kept above the new pipeline. 12s loop, animated lines + V hub pulse. */
.section-custom.transformation-section {
background: var(--bg-color, #fff);
color: var(--text-color, #2e2d29);
}
.tf-flow { max-width: 1280px; margin: 2rem auto 0; }
.tf-svg {
display: block;
width: 100%;
height: auto;
max-width: 1200px;
margin: 0 auto;
filter: drop-shadow(0 8px 24px rgba(46, 45, 41, 0.08));
}
/* Pain cards (left) static, no scrolling cycle */
.tf-pain-group {
/* no animation */
}
.tf-pain-card {
fill: rgba(46, 45, 41, 0.04);
stroke: rgba(226, 61, 40, 0.55);
stroke-width: 1.5;
}
.tf-icon { font-size: 24px; dominant-baseline: middle; }
.tf-label {
font-family: var(--body-font, 'TTForsRegular', sans-serif);
font-size: 18px;
font-weight: 600;
fill: var(--text-color, #2e2d29);
dominant-baseline: middle;
}
@keyframes tfPainCycle {
0% { opacity: 0; transform: translateX(-30px); }
8% { opacity: 1; transform: translateX(0); }
35% { opacity: 1; }
50% { opacity: 0.4; }
90% { opacity: 0.4; }
96%, 100% { opacity: 0; transform: translateX(-30px); }
}
/* Lines IN green ribbon, static, no draw animation */
.tf-line-in {
fill: none;
stroke: var(--primary-color, #c3e502);
stroke-width: 6;
stroke-linecap: round;
opacity: 0.92;
filter: drop-shadow(0 2px 4px rgba(74, 94, 2, 0.18));
}
/* V hub static, no pulse, no wiggle */
.tf-v-bg { fill: var(--primary-color, #c3e502); }
.tf-v-pulse,
.tf-v-pulse-far {
fill: none;
stroke: var(--primary-color, #c3e502);
stroke-width: 2;
opacity: 0.25;
}
.tf-v-pulse-far { opacity: 0.12; }
.tf-v-logo { /* static, no animation */ }
/* Lines OUT green ribbon, static */
.tf-line-out {
fill: none;
stroke: var(--primary-color, #c3e502);
stroke-width: 6;
stroke-linecap: round;
opacity: 0.92;
filter: drop-shadow(0 2px 4px rgba(74, 94, 2, 0.18));
}
/* Benefit cards static, fully visible */
.tf-benefit-group {
/* no animation */
}
.tf-benefit-card {
fill: rgba(195, 229, 2, 0.10);
stroke: var(--primary-color, #c3e502);
stroke-width: 1.8;
}
.tf-benefit-label {
fill: var(--text-color, #2e2d29);
font-weight: 700;
}
.tf-check {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 22px;
font-weight: 900;
fill: var(--primary-color, #c3e502);
dominant-baseline: middle;
}
@keyframes tfBenefitCycle {
0%, 60% { opacity: 0; transform: translateX(30px); }
70%, 90% { opacity: 1; transform: translateX(0); }
96%, 100% { opacity: 0; transform: translateX(30px); }
}
@keyframes tfCheckPop {
0%, 65% { opacity: 0; transform: scale(0); }
72% { opacity: 1; transform: scale(1.4); }
78% { transform: scale(1); }
90% { opacity: 1; transform: scale(1); }
96%, 100% { opacity: 0; transform: scale(0); }
}
@media (max-width: 768px) {
.tf-svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.tf-pain-group, .tf-benefit-group, .tf-line-in, .tf-line-out,
.tf-v-bg, .tf-v-pulse, .tf-v-pulse-far, .tf-v-logo, .tf-check {
animation: none !important;
opacity: 1 !important;
}
.tf-pain-group, .tf-benefit-group { transform: translateX(0) !important; }
.tf-line-in, .tf-line-out { stroke-dashoffset: 0 !important; }
}
/* ===== Home: simpler 5-station pipeline ===== */
.section-custom.how-it-works-section {
background: var(--text-color, #2e2d29);
color: #fff;
overflow: hidden;
}
.section-custom.how-it-works-section .section-title { color: #fff; }
.section-custom.how-it-works-section .section-subtitle { color: rgba(255, 255, 255, 0.70); }
/* /comptabilite : detailed flow chart with cream background */
.section-custom.comptabilite-flow-section {
background: linear-gradient(180deg, #fafaf3 0%, #f5f1da 100%);
color: var(--text-color, #2e2d29);
overflow: hidden;
position: relative;
}
.section-custom.comptabilite-flow-section::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(195, 229, 2, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.section-custom.comptabilite-flow-section .section-title { color: var(--text-color, #2e2d29); }
.section-custom.comptabilite-flow-section .section-subtitle { color: #555; }
/* === Simpler 5-station pipeline (home) === */
.how-pipeline { max-width: 1280px; margin: 2.5rem auto 0; }
.pipeline-svg {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.30));
}
.pipeline-header {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 16px;
font-weight: 600;
fill: rgba(255, 255, 255, 0.55);
text-anchor: middle;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pipeline-station { transform-box: fill-box; }
.station-box {
fill: rgba(255, 255, 255, 0.04);
stroke: rgba(255, 255, 255, 0.15);
stroke-width: 1.5;
transition: all 0.3s ease;
}
.station-badge {
fill: rgba(255, 255, 255, 0.10);
stroke: rgba(255, 255, 255, 0.25);
stroke-width: 1.5;
}
.station-num {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 17px;
font-weight: 800;
fill: rgba(255, 255, 255, 0.6);
text-anchor: middle;
}
.station-icon { font-size: 24px; dominant-baseline: middle; }
.station-name {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 18px;
font-weight: 700;
fill: #fff;
}
.station-desc {
font-family: var(--body-font, 'TTForsRegular', sans-serif);
font-size: 13px;
fill: rgba(255, 255, 255, 0.55);
letter-spacing: 0.01em;
}
/* Subtle highlight wave passing through stations every 12s */
.pipeline-station-1 .station-box { animation: stnHL 12s infinite; animation-delay: 0s; }
.pipeline-station-2 .station-box { animation: stnHL 12s infinite; animation-delay: -9.6s; }
.pipeline-station-3 .station-box { animation: stnHL 12s infinite; animation-delay: -7.2s; }
.pipeline-station-4 .station-box { animation: stnHL 12s infinite; animation-delay: -4.8s; }
.pipeline-station-5 .station-box { animation: stnHL 12s infinite; animation-delay: -2.4s; }
@keyframes stnHL {
0%, 8%, 100% { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.15); filter: none; }
1%, 7% { fill: rgba(195,229,2,0.10); stroke: var(--primary-color, #c3e502); filter: drop-shadow(0 0 12px rgba(195,229,2,0.45)); }
}
.arrow-line {
stroke: rgba(255, 255, 255, 0.25);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 4 4;
}
.arrow-head { fill: rgba(255, 255, 255, 0.35); }
/* Document traveling through the pipeline */
.pipeline-doc { animation: docTravel 12s infinite cubic-bezier(0.65, 0, 0.35, 1); }
.pipeline-doc-ring {
fill: var(--primary-color, #c3e502);
filter: drop-shadow(0 0 14px rgba(195, 229, 2, 0.55));
}
.pipeline-doc-icon {
font-size: 22px;
text-anchor: middle;
}
@keyframes docTravel {
0% { transform: translateX(-300px); opacity: 0; }
4% { opacity: 1; }
8% { transform: translateX(0); }
14% { transform: translateX(0); }
24% { transform: translateX(250px); }
30% { transform: translateX(250px); }
40% { transform: translateX(500px); }
46% { transform: translateX(500px); }
56% { transform: translateX(750px); }
62% { transform: translateX(750px); }
72% { transform: translateX(1000px); }
88% { transform: translateX(1000px); opacity: 1; }
95% { opacity: 0; }
100% { transform: translateX(1000px); opacity: 0; }
}
.pipeline-mobile { display: none; list-style: none; padding: 0; margin: 0 auto; max-width: 480px; }
.pipeline-mobile li {
display: flex; align-items: center; gap: 1rem;
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 12px; margin-bottom: 0.75rem;
}
.pipeline-mobile-num {
flex-shrink: 0; width: 36px; height: 36px;
border-radius: 50%; background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29); display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1rem;
}
.pipeline-mobile li > div { display: flex; flex-direction: column; }
.pipeline-mobile li strong { color: #fff; font-size: 1rem; margin-bottom: 0.15rem; }
.pipeline-mobile li span { color: rgba(255, 255, 255, 0.65); font-size: 0.88rem; }
@media (max-width: 768px) {
.pipeline-svg { display: none; }
.pipeline-mobile { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.pipeline-doc, .pipeline-station-1 .station-box, .pipeline-station-2 .station-box,
.pipeline-station-3 .station-box, .pipeline-station-4 .station-box, .pipeline-station-5 .station-box {
animation: none !important;
}
.pipeline-doc { transform: translateX(0) !important; opacity: 1 !important; }
}
.vflow { max-width: 1400px; margin: 2.5rem auto 0; position: relative; }
.vflow-svg {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 18px 38px rgba(46, 45, 41, 0.10));
}
/* === Generic box treatment === */
.vf-box {
stroke-width: 1;
}
/* Source: dark grey card with white text */
.vf-box-source {
fill: var(--text-color, #2e2d29);
stroke: none;
}
/* Document boxes: clean white with subtle lime accent on top-left */
.vf-box-doc {
fill: #fff;
stroke: rgba(46, 45, 41, 0.12);
stroke-width: 1;
}
/* Warning box (Documents non reconnus): subtle red accent */
.vf-box-doc-warn {
fill: #fff;
stroke: rgba(226, 61, 40, 0.45);
stroke-width: 1.5;
}
/* Viridem badge: lime gradient, prominent */
.vf-box-viridem {
fill: url(#vfViridemGrad);
stroke: var(--primary-color, #c3e502);
stroke-width: 2;
animation: vfBadgePulse 4s ease-in-out infinite;
}
@keyframes vfBadgePulse {
0%, 100% { filter: drop-shadow(0 6px 14px rgba(195, 229, 2, 0.20)); }
50% { filter: drop-shadow(0 8px 22px rgba(195, 229, 2, 0.55)); }
}
/* ERP: dark grey card */
.vf-box-erp {
fill: var(--text-color, #2e2d29);
stroke: none;
}
/* === Typography (larger, cleaner) === */
.vf-label {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 17px;
font-weight: 700;
fill: #fff;
text-anchor: middle;
dominant-baseline: middle;
}
.vf-label-bold { font-weight: 800; font-size: 18px; }
.vf-label-erp { fill: #fff; font-weight: 800; font-size: 18px; }
.vf-bullet {
font-family: var(--body-font, 'TTForsRegular', sans-serif);
font-size: 13px;
fill: rgba(255, 255, 255, 0.85);
}
.vf-divider { stroke: rgba(195, 229, 2, 0.6); stroke-width: 1.5; }
.vf-mini-label {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 13px;
font-weight: 700;
fill: var(--text-color, #2e2d29);
text-anchor: middle;
}
.vf-mini-label-bold { font-weight: 900; font-size: 16px; }
.vf-mini-sublabel {
font-family: var(--body-font, 'TTForsRegular', sans-serif);
font-size: 11px;
fill: #777;
text-anchor: middle;
font-style: italic;
}
.vf-path-label {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 12px;
font-weight: 700;
fill: var(--text-color, #2e2d29);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.vf-path-label-final {
font-style: normal;
text-transform: none;
fill: var(--primary-color, #c3e502);
letter-spacing: 0.01em;
}
.vf-process-label {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 12px;
font-weight: 700;
fill: var(--text-color, #2e2d29);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* === Icons === */
.vf-icon-stroke {
fill: none;
stroke: var(--primary-color, #c3e502);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.vf-scan-top {
fill: var(--text-color, #2e2d29);
stroke: none;
}
.vf-scan-bottom {
fill: rgba(195, 229, 2, 0.18);
stroke: var(--primary-color, #c3e502);
stroke-width: 1.5;
}
.vf-viridem-text {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 12px;
fill: var(--text-color, #2e2d29);
text-anchor: middle;
font-weight: 700;
}
.vf-viridem-text-bold { font-weight: 900; font-size: 16px; letter-spacing: 0.02em; }
/* === Analyse (magnifying glass) === */
.vf-analyse-circle {
fill: #fff;
stroke: var(--primary-color, #c3e502);
stroke-width: 3;
animation: vfAnalysePulse 3s ease-in-out infinite;
}
.vf-analyse-handle {
stroke: var(--primary-color, #c3e502);
stroke-width: 5;
stroke-linecap: round;
}
.vf-analyse-icon { font-size: 26px; text-anchor: middle; }
@keyframes vfAnalysePulse {
0%, 100% { stroke-width: 3; }
50% { stroke-width: 5; }
}
/* === TRAITEMENT diamond brand-aligned (dark with lime border) === */
.vf-diamond {
fill: var(--text-color, #2e2d29);
stroke: var(--primary-color, #c3e502);
stroke-width: 2.5;
animation: vfDiamondGlow 4s ease-in-out infinite;
}
@keyframes vfDiamondGlow {
0%, 100% { filter: drop-shadow(0 0 0 rgba(195, 229, 2, 0)); }
50% { filter: drop-shadow(0 0 16px rgba(195, 229, 2, 0.5)); }
}
.vf-diamond-text {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 13px;
fill: var(--primary-color, #c3e502);
text-anchor: middle;
font-weight: 900;
letter-spacing: 0.10em;
}
/* === Process ovals switched to brand lime accent === */
.vf-oval {
fill: #fff;
stroke: var(--primary-color, #c3e502);
stroke-width: 2;
}
.vf-oval-text {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 13px;
fill: var(--text-color, #2e2d29);
text-anchor: middle;
font-weight: 700;
}
/* === Archive dark with lime accent stripes === */
.vf-archive-box {
fill: var(--text-color, #2e2d29);
stroke: var(--primary-color, #c3e502);
stroke-width: 1.5;
}
.vf-archive-line {
stroke: var(--primary-color, #c3e502);
stroke-width: 1.5;
opacity: 0.85;
}
.vf-archive-label {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 14px;
font-weight: 900;
fill: var(--text-color, #2e2d29);
text-anchor: middle;
letter-spacing: 0.10em;
}
/* === Paths (arrows) clean lime green === */
.vf-path {
fill: none;
stroke: var(--primary-color, #c3e502);
stroke-width: 2;
stroke-linecap: round;
opacity: 0.75;
}
.vf-arrow-head { fill: var(--primary-color, #c3e502); }
.vf-path-erp {
stroke-width: 2.5;
stroke: var(--primary-color, #c3e502);
opacity: 1;
}
/* Animated waves paths "breathe" subtly to suggest active flow */
.vf-path-1, .vf-path-2 { animation: vfFlow 8s ease-in-out infinite; }
.vf-path-3, .vf-path-4, .vf-path-5 { animation: vfFlow 8s ease-in-out infinite; animation-delay: -1s; }
.vf-path-6, .vf-path-7 { animation: vfFlow 8s ease-in-out infinite; animation-delay: -2s; }
.vf-path-8 { animation: vfFlow 8s ease-in-out infinite; animation-delay: -3s; }
.vf-path-9 { animation: vfFlow 8s ease-in-out infinite; animation-delay: -3.5s; }
.vf-path-p1, .vf-path-p2, .vf-path-p3, .vf-path-p4 { animation: vfFlow 8s ease-in-out infinite; animation-delay: -4.5s; }
.vf-path-arc { animation: vfFlow 8s ease-in-out infinite; animation-delay: -5.5s; }
.vf-path-final {
animation: vfFlowGlow 6s ease-in-out infinite;
stroke-width: 2.5;
opacity: 1;
}
@keyframes vfFlow {
0%, 100% { stroke-opacity: 0.45; }
50% { stroke-opacity: 1; }
}
@keyframes vfFlowGlow {
0%, 100% { stroke-opacity: 0.7; filter: drop-shadow(0 0 0 rgba(195, 229, 2, 0)); }
50% { stroke-opacity: 1; filter: drop-shadow(0 0 6px rgba(195, 229, 2, 0.6)); }
}
/* === Legend === */
.vf-legend-label {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 14px;
font-weight: 700;
fill: var(--text-color, #2e2d29);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* === Mobile fallback === */
.vflow-mobile { display: none; list-style: none; padding: 0; margin: 1.5rem auto 0; max-width: 480px; counter-reset: vf-step; }
.vflow-mobile li {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.10);
border-left: 4px solid var(--primary-color, #c3e502);
border-radius: 12px;
padding: 1.1rem 1.25rem;
margin-bottom: 0.85rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.vflow-mobile li strong { color: var(--text-color, #2e2d29); font-size: 1.02rem; }
.vflow-mobile li span { color: #555; font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 900px) {
.vflow-svg { display: none; }
.vflow-mobile { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.vf-box-viridem,
.vf-analyse-circle,
.vf-path-1, .vf-path-2, .vf-path-3, .vf-path-4, .vf-path-5,
.vf-path-6, .vf-path-7, .vf-path-8, .vf-path-9,
.vf-path-p1, .vf-path-p2, .vf-path-p3, .vf-path-p4,
.vf-path-arc, .vf-path-final {
animation: none !important;
}
}
.how-pipeline {
max-width: 1280px;
margin: 2.5rem auto 0;
}
.pipeline-svg {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.30));
}
/* Header label inside the SVG */
.pipeline-header {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 16px;
font-weight: 600;
fill: rgba(255, 255, 255, 0.55);
text-anchor: middle;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* === Stations === */
.pipeline-station {
transform-box: fill-box;
}
.station-box {
fill: rgba(255, 255, 255, 0.04);
stroke: rgba(255, 255, 255, 0.15);
stroke-width: 1.5;
transition: all 0.3s ease;
}
.station-badge {
fill: rgba(255, 255, 255, 0.10);
stroke: rgba(255, 255, 255, 0.25);
stroke-width: 1.5;
transition: all 0.3s ease;
}
.station-num {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 17px;
font-weight: 800;
fill: rgba(255, 255, 255, 0.6);
text-anchor: middle;
transition: fill 0.3s ease;
}
.station-icon {
font-size: 24px;
dominant-baseline: middle;
}
.station-name {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 18px;
font-weight: 700;
fill: #fff;
transition: fill 0.3s ease;
}
.station-desc {
font-family: var(--body-font, 'TTForsRegular', sans-serif);
font-size: 13px;
fill: rgba(255, 255, 255, 0.55);
letter-spacing: 0.01em;
}
/* Per-station "active" animation glows when the document arrives.
12s cycle: 5 stations, ~2s window of activity each. */
.pipeline-station-1 .station-box { animation: stationActive1 12s infinite; }
.pipeline-station-1 .station-badge { animation: badgeActive1 12s infinite; }
.pipeline-station-1 .station-num { animation: numActive1 12s infinite; }
.pipeline-station-2 .station-box { animation: stationActive2 12s infinite; }
.pipeline-station-2 .station-badge { animation: badgeActive2 12s infinite; }
.pipeline-station-2 .station-num { animation: numActive2 12s infinite; }
.pipeline-station-3 .station-box { animation: stationActive3 12s infinite; }
.pipeline-station-3 .station-badge { animation: badgeActive3 12s infinite; }
.pipeline-station-3 .station-num { animation: numActive3 12s infinite; }
.pipeline-station-4 .station-box { animation: stationActive4 12s infinite; }
.pipeline-station-4 .station-badge { animation: badgeActive4 12s infinite; }
.pipeline-station-4 .station-num { animation: numActive4 12s infinite; }
.pipeline-station-5 .station-box { animation: stationActive5 12s infinite; }
.pipeline-station-5 .station-badge { animation: badgeActive5 12s infinite; }
.pipeline-station-5 .station-num { animation: numActive5 12s infinite; }
/* Active windows (12s cycle):
Station 1: 5%–14% | Station 2: 21%–30% | Station 3: 37%–46%
Station 4: 53%–62% | Station 5: 69%–88% (longer = success) */
@keyframes stationActive1 {
0%, 4%, 16%, 100% { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.15); filter: none; }
5%, 14% { fill: rgba(195,229,2,0.10); stroke: var(--primary-color, #c3e502); filter: drop-shadow(0 0 12px rgba(195,229,2,0.45)); }
}
@keyframes badgeActive1 {
0%, 4%, 16%, 100% { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.25); }
5%, 14% { fill: var(--primary-color, #c3e502); stroke: var(--primary-color, #c3e502); }
}
@keyframes numActive1 {
0%, 4%, 16%, 100% { fill: rgba(255,255,255,0.6); }
5%, 14% { fill: var(--text-color, #2e2d29); }
}
@keyframes stationActive2 {
0%, 20%, 32%, 100% { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.15); filter: none; }
21%, 30% { fill: rgba(195,229,2,0.10); stroke: var(--primary-color, #c3e502); filter: drop-shadow(0 0 12px rgba(195,229,2,0.45)); }
}
@keyframes badgeActive2 {
0%, 20%, 32%, 100% { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.25); }
21%, 30% { fill: var(--primary-color, #c3e502); stroke: var(--primary-color, #c3e502); }
}
@keyframes numActive2 {
0%, 20%, 32%, 100% { fill: rgba(255,255,255,0.6); }
21%, 30% { fill: var(--text-color, #2e2d29); }
}
@keyframes stationActive3 {
0%, 36%, 48%, 100% { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.15); filter: none; }
37%, 46% { fill: rgba(195,229,2,0.10); stroke: var(--primary-color, #c3e502); filter: drop-shadow(0 0 12px rgba(195,229,2,0.45)); }
}
@keyframes badgeActive3 {
0%, 36%, 48%, 100% { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.25); }
37%, 46% { fill: var(--primary-color, #c3e502); stroke: var(--primary-color, #c3e502); }
}
@keyframes numActive3 {
0%, 36%, 48%, 100% { fill: rgba(255,255,255,0.6); }
37%, 46% { fill: var(--text-color, #2e2d29); }
}
@keyframes stationActive4 {
0%, 52%, 64%, 100% { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.15); filter: none; }
53%, 62% { fill: rgba(195,229,2,0.10); stroke: var(--primary-color, #c3e502); filter: drop-shadow(0 0 12px rgba(195,229,2,0.45)); }
}
@keyframes badgeActive4 {
0%, 52%, 64%, 100% { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.25); }
53%, 62% { fill: var(--primary-color, #c3e502); stroke: var(--primary-color, #c3e502); }
}
@keyframes numActive4 {
0%, 52%, 64%, 100% { fill: rgba(255,255,255,0.6); }
53%, 62% { fill: var(--text-color, #2e2d29); }
}
@keyframes stationActive5 {
0%, 68%, 91%, 100% { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.15); filter: none; }
69%, 88% { fill: rgba(195,229,2,0.14); stroke: var(--primary-color, #c3e502); filter: drop-shadow(0 0 16px rgba(195,229,2,0.55)); }
}
@keyframes badgeActive5 {
0%, 68%, 91%, 100% { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.25); }
69%, 88% { fill: var(--primary-color, #c3e502); stroke: var(--primary-color, #c3e502); }
}
@keyframes numActive5 {
0%, 68%, 91%, 100% { fill: rgba(255,255,255,0.6); }
69%, 88% { fill: var(--text-color, #2e2d29); }
}
/* === Connection arrows between stations === */
.arrow-line {
stroke: rgba(255, 255, 255, 0.25);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 4 4;
transition: stroke 0.3s ease;
}
.arrow-head {
fill: rgba(255, 255, 255, 0.35);
transition: fill 0.3s ease;
}
.pipeline-arrow-1 .arrow-line { animation: arrowFlow1 12s infinite; }
.pipeline-arrow-1 .arrow-head { animation: arrowHead1 12s infinite; }
.pipeline-arrow-2 .arrow-line { animation: arrowFlow2 12s infinite; }
.pipeline-arrow-2 .arrow-head { animation: arrowHead2 12s infinite; }
.pipeline-arrow-3 .arrow-line { animation: arrowFlow3 12s infinite; }
.pipeline-arrow-3 .arrow-head { animation: arrowHead3 12s infinite; }
.pipeline-arrow-4 .arrow-line { animation: arrowFlow4 12s infinite; }
.pipeline-arrow-4 .arrow-head { animation: arrowHead4 12s infinite; }
/* Arrow lights up when document is ABOUT to traverse it (just after exiting prev station) */
@keyframes arrowFlow1 {
0%, 14%, 22%, 100% { stroke: rgba(255,255,255,0.25); }
15%, 21% { stroke: var(--primary-color, #c3e502); }
}
@keyframes arrowHead1 {
0%, 14%, 22%, 100% { fill: rgba(255,255,255,0.35); }
15%, 21% { fill: var(--primary-color, #c3e502); }
}
@keyframes arrowFlow2 {
0%, 30%, 38%, 100% { stroke: rgba(255,255,255,0.25); }
31%, 37% { stroke: var(--primary-color, #c3e502); }
}
@keyframes arrowHead2 {
0%, 30%, 38%, 100% { fill: rgba(255,255,255,0.35); }
31%, 37% { fill: var(--primary-color, #c3e502); }
}
@keyframes arrowFlow3 {
0%, 46%, 54%, 100% { stroke: rgba(255,255,255,0.25); }
47%, 53% { stroke: var(--primary-color, #c3e502); }
}
@keyframes arrowHead3 {
0%, 46%, 54%, 100% { fill: rgba(255,255,255,0.35); }
47%, 53% { fill: var(--primary-color, #c3e502); }
}
@keyframes arrowFlow4 {
0%, 62%, 70%, 100% { stroke: rgba(255,255,255,0.25); }
63%, 69% { stroke: var(--primary-color, #c3e502); }
}
@keyframes arrowHead4 {
0%, 62%, 70%, 100% { fill: rgba(255,255,255,0.35); }
63%, 69% { fill: var(--primary-color, #c3e502); }
}
/* === Traveling document === */
.pipeline-doc {
animation: docTravel 12s infinite cubic-bezier(0.65, 0, 0.35, 1);
}
.pipeline-doc-ring {
fill: var(--primary-color, #c3e502);
filter: drop-shadow(0 0 14px rgba(195, 229, 2, 0.55));
}
.pipeline-doc-icon {
font-size: 22px;
text-anchor: middle;
}
@keyframes docTravel {
0% { transform: translateX(-300px); opacity: 0; }
4% { opacity: 1; }
8% { transform: translateX(0); } /* arrive station 1 */
14% { transform: translateX(0); }
24% { transform: translateX(250px); } /* station 2 */
30% { transform: translateX(250px); }
40% { transform: translateX(500px); } /* station 3 */
46% { transform: translateX(500px); }
56% { transform: translateX(750px); } /* station 4 */
62% { transform: translateX(750px); }
72% { transform: translateX(1000px); } /* station 5 (archive) */
88% { transform: translateX(1000px); opacity: 1; }
95% { opacity: 0; }
100% { transform: translateX(1000px); opacity: 0; }
}
/* === Mobile fallback: vertical step list === */
.pipeline-mobile {
display: none;
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 480px;
counter-reset: step;
}
.pipeline-mobile li {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 12px;
margin-bottom: 0.75rem;
position: relative;
}
.pipeline-mobile li:not(:last-child)::after {
content: '';
position: absolute;
left: 1.85rem;
top: 100%;
width: 2px;
height: 0.75rem;
background: rgba(195, 229, 2, 0.5);
}
.pipeline-mobile-num {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1rem;
}
.pipeline-mobile li > div {
display: flex;
flex-direction: column;
}
.pipeline-mobile li strong {
color: #fff;
font-size: 1rem;
margin-bottom: 0.15rem;
}
.pipeline-mobile li span {
color: rgba(255, 255, 255, 0.65);
font-size: 0.88rem;
}
@media (max-width: 768px) {
.pipeline-svg { display: none; }
.pipeline-mobile { display: block; }
}
/* Reduced motion: freeze pipeline at first station with no animation */
@media (prefers-reduced-motion: reduce) {
.pipeline-doc,
.pipeline-station-1 .station-box, .pipeline-station-1 .station-badge, .pipeline-station-1 .station-num,
.pipeline-station-2 .station-box, .pipeline-station-2 .station-badge, .pipeline-station-2 .station-num,
.pipeline-station-3 .station-box, .pipeline-station-3 .station-badge, .pipeline-station-3 .station-num,
.pipeline-station-4 .station-box, .pipeline-station-4 .station-badge, .pipeline-station-4 .station-num,
.pipeline-station-5 .station-box, .pipeline-station-5 .station-badge, .pipeline-station-5 .station-num,
.pipeline-arrow-1 .arrow-line, .pipeline-arrow-1 .arrow-head,
.pipeline-arrow-2 .arrow-line, .pipeline-arrow-2 .arrow-head,
.pipeline-arrow-3 .arrow-line, .pipeline-arrow-3 .arrow-head,
.pipeline-arrow-4 .arrow-line, .pipeline-arrow-4 .arrow-head {
animation: none !important;
}
.pipeline-doc { transform: translateX(0) !important; opacity: 1 !important; }
}
/* ===== ERP Partners marquee DARK Viridem theme (user 2026-05-22)
Différencié visuellement du clients-marquee (qui reste light grayscale). */
.section-custom.ecosystem-section {
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 60%, #1a1a17 100%);
color: #fafaf6;
position: relative;
overflow: hidden;
}
.section-custom.ecosystem-section::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--primary-color, #c3e502), transparent);
}
.section-custom.ecosystem-section .section-title,
.section-custom.ecosystem-section .section-subtitle { color: #fff !important; }
.erp-partners {
margin-top: 1rem;
}
.erp-partners-intro {
text-align: center;
color: rgba(255, 255, 255, 0.75);
font-size: 1rem;
line-height: 1.6;
margin: 0 auto 2.5rem;
max-width: 720px;
}
/* Scrolling ERP marquee DIRECTION INVERSE (droite → gauche) + tiles dark */
.erp-marquee {
overflow: hidden;
max-width: 1240px;
margin: 0 auto;
position: relative;
padding: 0.6rem 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.erp-marquee-track {
display: flex;
gap: 1rem;
width: max-content;
/* Reverse direction par rapport au clients-marquee (user 2026-05-22) */
animation: erpScrollReverse 40s linear infinite;
}
.erp-marquee:hover .erp-marquee-track { animation-play-state: paused; }
@keyframes erpScrollReverse {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
@keyframes erpScroll { /* legacy */
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.erp-marquee-track { animation: none; }
}
.erp-logo-card {
/* Tile sur fond dark Viridem (user 2026-05-22, différenciation des marquees) */
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(195, 229, 2, 0.30);
border-radius: 12px;
padding: 1.25rem 2rem;
min-height: 88px;
min-width: 200px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
gap: 0.7rem;
}
.erp-logo-card span {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
font-size: 1.1rem;
color: rgba(46, 45, 41, 0.55);
letter-spacing: -0.01em;
text-align: center;
line-height: 1.2;
transition: color 0.3s ease;
}
/* Variante logo officiel via Clearbit (user 2026-05-22) */
.erp-logo-card-img img {
max-height: 36px;
max-width: 130px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(20%) brightness(1);
transition: filter 0.3s ease, transform 0.3s ease;
}
.erp-logo-card-img:hover img {
filter: grayscale(0%) brightness(1);
transform: scale(1.04);
}
.erp-logo-card-img .erp-logo-fallback {
display: none; /* shown by onerror JS si l'image ne charge pas */
}
/* Tuile sombre pour les logos à écriture blanche (user 2026-05-26) */
.erp-logo-card.erp-logo-card-dark {
background: #1f1e1c;
border-color: rgba(195, 229, 2, 0.35);
}
.erp-logo-card.erp-logo-card-dark.erp-logo-card-img img { filter: none; }
.erp-logo-card.erp-logo-card-dark:hover { border-color: var(--primary-color, #c3e502); }
.erp-logo-card:hover {
border-color: var(--primary-color, #c3e502);
box-shadow: 0 12px 26px rgba(195, 229, 2, 0.18);
transform: translateY(-3px);
}
.erp-logo-card:hover span {
color: var(--text-color, #2e2d29);
}
.erp-partners-cta {
margin-top: 2.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
}
.erp-count-pill {
display: inline-block;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
font-weight: 700;
font-size: 0.95rem;
padding: 0.55rem 1.4rem;
border-radius: 100px;
letter-spacing: 0.01em;
box-shadow: 0 6px 18px rgba(195, 229, 2, 0.30);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.erp-count-pill:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(195, 229, 2, 0.45);
color: var(--text-color, #2e2d29);
}
.erp-cta-text {
color: rgba(255, 255, 255, 0.72); /* fond dark Viridem (user 2026-05-22) */
font-size: 0.95rem;
font-style: italic;
}
@media (max-width: 900px) {
.erp-partners-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600px) {
.erp-partners-grid {
grid-template-columns: repeat(2, 1fr);
}
.erp-logo-card {
min-height: 70px;
padding: 1.1rem 0.75rem;
}
.erp-logo-card span {
font-size: 0.95rem;
}
}
/* ===== Clients section (scrolling banner of 65 client logos) ===== */
.section-custom.clients-section {
background: var(--accent-color, #F7F7E8);
}
/* Carousel-style clients banner : bigger logos in tile cards, slow drift, pause on hover */
.clients-section .partners-banner {
overflow: hidden;
width: 100%;
padding: 2rem 0;
margin-top: 1rem;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.clients-section .partners-track {
display: flex;
gap: 1.25rem;
width: max-content;
align-items: stretch;
animation: clientsScroll 80s linear infinite;
}
.clients-section .partners-banner:hover .partners-track {
animation-play-state: paused;
}
.clients-section .partners-track img {
flex-shrink: 0;
height: 90px;
width: 200px;
max-width: 200px;
object-fit: contain;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 14px;
padding: 1rem 1.4rem;
filter: grayscale(100%);
opacity: 0.85;
transition: filter 0.4s ease, opacity 0.4s ease, transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.clients-section .partners-track img:hover {
filter: none;
opacity: 1;
transform: translateY(-4px) scale(1.03);
border-color: var(--primary-color, #c3e502);
box-shadow: 0 18px 36px -18px rgba(195, 229, 2, 0.4);
}
@keyframes clientsScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.clients-section .partners-track { animation: none; }
}
@media (max-width: 768px) {
.clients-section .partners-track {
gap: 1rem;
animation-duration: 56s;
}
.clients-section .partners-track img {
height: 70px;
width: 160px;
max-width: 160px;
padding: 0.85rem 1rem;
}
}
@media (max-width: 768px) {
.ecosystem-row {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.5rem 0;
}
.ecosystem-logos {
grid-template-columns: repeat(2, 1fr);
}
.ecosystem-logos::before {
display: none;
}
}
/* ===== Product Showcase (split layout, screenshot + text + CTA) ===== */
.section-custom.product-showcase-section {
background: var(--accent-color, #F7F7E8);
overflow: hidden;
}
.section-custom.product-showcase-section .container {
max-width: 1200px;
}
.product-showcase {
display: flex;
flex-direction: column;
gap: 3rem;
margin-top: 1.5rem;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}
.product-showcase-header {
text-align: center;
max-width: 820px;
margin: 0 auto;
}
.product-showcase-header h3 {
font-size: clamp(1.7rem, 3vw, 2.3rem);
line-height: 1.2;
color: var(--text-color, #2e2d29);
letter-spacing: -0.018em;
margin: 0 0 1rem;
}
.product-showcase-header p {
font-size: 1.05rem;
line-height: 1.7;
color: #4a4a42;
margin: 0;
}
.product-showcase-body {
display: grid;
/* Fix bug colonne verticale (user 2026-05-22) : minmax(0,1fr) empêche
l'image à droite de squeezer la colonne gauche à zéro. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
grid-template-areas: "content image";
gap: 3rem;
align-items: center;
}
.product-showcase-points { grid-area: content; min-width: 0; }
.product-showcase-image { grid-area: image; min-width: 0; }
.product-showcase-image {
width: 100%;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 28px 60px -22px rgba(46, 45, 41, 0.32);
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.06);
}
.product-showcase-image img {
width: 100%;
height: auto;
display: block;
}
.product-showcase-cta {
text-align: center;
}
@media (max-width: 900px) {
.product-showcase-body {
grid-template-columns: 1fr;
grid-template-areas: "content" "image";
gap: 2rem;
}
}
.product-showcase-text h3 {
font-size: 2rem;
line-height: 1.25;
margin-bottom: 1.1rem;
color: var(--text-color, #2e2d29);
}
.product-showcase-text > p {
font-size: 1.08rem;
line-height: 1.7;
color: #444;
margin: 0 0 1.5rem 0;
}
/* === Showcase points : stack vertical par item (user 2026-05-22, fix def) ===
Chaque item est un bloc empilé : num · label · text. Plus de grid horizontale
qui se faisait squeezer par l'image à droite (bug "un mot par ligne"). */
.product-showcase-points {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.product-showcase-points li {
display: block;
padding: 1rem 0 1rem 56px;
position: relative;
border-bottom: 1px solid rgba(46, 45, 41, 0.10);
transition: background 0.25s ease;
min-width: 0;
}
.product-showcase-points li:last-child { border-bottom: none; }
.product-showcase-points li:hover { background: rgba(195, 229, 2, 0.05); }
/* .ps-icon NON utilisée dans ce layout ShowcasePoint passe num + body uniquement */
.ps-icon { display: none; }
.ps-num {
position: absolute;
left: 0;
top: 1.05rem;
width: 40px;
text-align: left;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.05rem;
font-weight: 900;
color: var(--primary-color, #c3e502);
letter-spacing: 0.02em;
line-height: 1;
}
.ps-body {
display: block;
min-width: 0;
}
.ps-label {
display: block;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.05rem;
font-weight: 800;
color: var(--text-color, #2e2d29);
line-height: 1.3;
letter-spacing: -0.005em;
margin-bottom: 0.35rem;
}
.ps-text {
display: block;
color: #555;
font-size: 0.94rem;
line-height: 1.55;
}
/* === Enjeux ↔ Solutions comparison table === */
.section-custom.challenges-comparison-section {
background: linear-gradient(180deg, var(--bg-color, #fff) 0%, var(--accent-color, #F7F7E8) 100%);
}
.enjeux-compare {
max-width: 1240px;
margin: 2rem auto 0;
background: linear-gradient(160deg, #1f1e1c 0%, #2e2d29 55%, #1a1a17 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 36px 80px -28px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.18);
position: relative;
color: #fff;
}
.enjeux-compare::before {
content: "";
position: absolute;
top: -180px;
right: -160px;
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(195, 229, 2, 0.18) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.enjeux-compare::after {
content: "";
position: absolute;
bottom: -200px;
left: -180px;
width: 520px;
height: 520px;
background: radial-gradient(circle, rgba(195, 229, 2, 0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.enjeux-compare > * { position: relative; z-index: 1; }
.ec-header {
display: grid;
grid-template-columns: 1fr 90px 1fr;
align-items: center;
background: rgba(0, 0, 0, 0.18);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
color: #fff;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.78rem;
}
.ec-header-pain {
padding: 1.2rem 1.75rem;
color: rgba(255, 255, 255, 0.55);
}
.ec-header-arrow { display: none; }
.ec-header-solution {
padding: 1.2rem 1.75rem;
color: var(--primary-color, #c3e502);
text-align: right;
}
.ec-rows {
background: transparent;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
/* CTA block at the bottom of the enjeux table */
.ec-cta-block {
text-align: center;
padding: 1.85rem 1.25rem 1.5rem;
border-top: 1px solid rgba(195, 229, 2, 0.18);
background: linear-gradient(180deg, transparent 0%, rgba(195, 229, 2, 0.06) 100%);
}
.ec-cta-text {
color: rgba(255, 255, 255, 0.82);
font-size: 1rem;
line-height: 1.65;
margin: 0 auto 1.1rem;
max-width: 580px;
}
.ec-cta-block .hero-btn {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
}
.ec-hint {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.45);
text-align: center;
padding: 1rem 1rem 0.4rem;
margin: 0;
background: transparent;
border-bottom: none;
font-style: italic;
letter-spacing: 0.02em;
}
.ec-row {
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 18px;
transition: background 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, transform 0.3s ease;
outline: none;
overflow: hidden;
}
.ec-row:hover,
.ec-row:focus-within {
background: rgba(195, 229, 2, 0.05);
border-color: rgba(195, 229, 2, 0.4);
transform: translateY(-1px);
}
.ec-row-summary {
display: grid;
grid-template-columns: 1fr 90px 1fr 36px;
align-items: center;
cursor: pointer;
padding: 0.4rem 1rem;
}
.ec-chevron {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.4);
text-align: center;
transition: transform 0.35s cubic-bezier(.2,.8,.2,1), color 0.25s ease;
}
.ec-row:hover .ec-chevron,
.ec-row:focus-within .ec-chevron {
color: var(--primary-color, #c3e502);
transform: rotate(180deg);
}
.ec-pain {
padding: 1.05rem 1rem;
display: flex;
align-items: center;
gap: 0.95rem;
color: rgba(255, 255, 255, 0.85);
font-size: 0.98rem;
font-weight: 600;
line-height: 1.4;
/* Colonne gauche en gris/noir Viridem (user 2026-05-22) */
background: linear-gradient(135deg, rgba(31, 30, 28, 0.55) 0%, rgba(46, 45, 41, 0.32) 100%);
border-left: 3px solid rgba(255, 255, 255, 0.10);
}
/* Mix CTA block sur la home fond clair (user 2026-05-22, photo noire retirée) */
.vex-cta-merged {
margin-top: 1.5rem;
padding: 1.6rem 1.8rem;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.12) 0%, rgba(195, 229, 2, 0.03) 100%);
border-radius: 14px;
border-left: 4px solid var(--primary-color, #c3e502);
text-align: center;
color: var(--text-color, #2e2d29);
}
.vex-cta-merged.vex-cta-light .vex-cta-text { color: var(--text-color, #2e2d29); }
.vex-cta-merged .vex-cta-text {
margin: 0 auto 1.2rem;
max-width: 720px;
line-height: 1.65;
}
.ec-pain-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.7);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.ec-row:hover .ec-pain-icon,
.ec-row:focus-within .ec-pain-icon {
color: var(--primary-color, #c3e502);
border-color: rgba(195, 229, 2, 0.55);
background: rgba(195, 229, 2, 0.08);
transform: scale(1.06);
}
.ec-arrow {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
}
.ec-arrow::before {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(195, 229, 2, 0.65) 50%, rgba(255, 255, 255, 0.06) 100%);
transform: translateY(-50%);
}
.ec-arrow::after {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--primary-color, #c3e502) 50%, transparent 100%);
transform: translateY(-50%) translateX(-100%);
animation: ecArrowFlow 3s infinite ease-in-out;
}
@keyframes ecArrowFlow {
0%, 30% { transform: translateY(-50%) translateX(-100%); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(-50%) translateX(100%); opacity: 0; }
}
.ec-arrow svg {
width: 30px;
height: 30px;
color: var(--text-color, #2e2d29);
background: var(--primary-color, #c3e502);
border-radius: 50%;
padding: 5px;
box-shadow: 0 0 0 4px rgba(195, 229, 2, 0.18), 0 6px 18px -6px rgba(195, 229, 2, 0.6);
z-index: 1;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ec-row:hover .ec-arrow svg,
.ec-row:focus-within .ec-arrow svg {
transform: scale(1.12) rotate(-3deg);
}
@media (prefers-reduced-motion: reduce) {
.ec-arrow::after { animation: none; opacity: 0; }
}
.ec-solution {
padding: 1.05rem 1rem;
color: #fff;
font-size: 0.98rem;
font-weight: 600;
line-height: 1.4;
border-left: 0;
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
}
.ec-solution::before {
content: "V";
font-family: var(--heading-font, 'JekoRegular', sans-serif);
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(195, 229, 2, 0.22);
color: #1f1e1c;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.82rem;
border: 1px solid rgba(195, 229, 2, 0.4);
transition: background 0.3s ease, border-color 0.3s ease;
}
.ec-row:hover .ec-solution::before,
.ec-row:focus-within .ec-solution::before {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
border-color: var(--primary-color, #c3e502);
}
/* ----- Hover-expand detail panel (always in DOM for SEO) ----- */
.ec-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 1.5rem;
transition: max-height 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease, padding 0.4s ease;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.08) 100%);
border-top: 0 solid transparent;
}
.ec-row:hover .ec-detail,
.ec-row:focus-within .ec-detail {
max-height: 600px;
opacity: 1;
padding: 1.5rem 1.5rem 1.7rem;
border-top: 1px solid rgba(195, 229, 2, 0.18);
}
.ec-detail-pain,
.ec-detail-solution {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ec-detail-label {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--primary-color, #c3e502);
opacity: 0.85;
}
.ec-detail-pain .ec-detail-label { color: rgba(255, 255, 255, 0.55); }
.ec-detail-pain p,
.ec-detail-solution p {
margin: 0;
font-size: 0.93rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
font-weight: 400;
}
.ec-detail-solution {
border-left: 2px solid rgba(195, 229, 2, 0.35);
padding-left: 1.25rem;
}
@media (max-width: 768px) {
.ec-header { grid-template-columns: 1fr; }
.ec-row-summary { grid-template-columns: 1fr 30px; grid-template-rows: auto auto; }
.ec-arrow { display: none; }
.ec-chevron { grid-row: 1; grid-column: 2; align-self: center; }
.ec-pain {
grid-row: 1;
grid-column: 1;
padding-bottom: 0.4rem;
}
.ec-solution {
grid-row: 2;
grid-column: 1 / -1;
border-left: none;
border-top: 3px solid var(--primary-color, #c3e502);
padding-top: 0.85rem;
}
.ec-detail {
grid-template-columns: 1fr;
gap: 1rem;
}
.ec-row:hover .ec-detail,
.ec-row:focus-within .ec-detail {
max-height: 1200px;
padding: 1.2rem 1.25rem 1.4rem;
}
}
/* === Interactive Enjeux Wheel (9 spokes orbit a Viridem hub) === */
.section-custom.challenges-comparison-section {
background: linear-gradient(180deg, #ffffff 0%, #fafaf3 60%, #ffffff 100%);
padding-top: 5rem;
padding-bottom: 6rem;
}
.enjeux-wheel {
--wheel-size: 720px;
--hub-size: 340px;
--spoke-size: 90px;
max-width: 1240px;
margin: 2rem auto 0;
position: relative;
}
.ew-stage {
position: relative;
width: var(--wheel-size);
height: var(--wheel-size);
margin: 0 auto;
}
/* Decorative concentric arcs - very subtle, premium feel */
.ew-arcs {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.ew-arc-bg {
fill: none;
stroke: rgba(46, 45, 41, 0.06);
stroke-width: 1;
stroke-dasharray: 1 8;
}
.ew-arc-active {
fill: none;
stroke: var(--primary-color, #c3e502);
stroke-width: 1.5;
opacity: 0;
stroke-dasharray: 60 1500;
animation: ewArcOrbit 12s infinite linear;
transform-origin: 300px 300px;
}
@keyframes ewArcOrbit {
0% { stroke-dashoffset: 0; opacity: 0; }
10% { opacity: 0.45; }
50% { opacity: 0.45; }
90% { opacity: 0; }
100% { stroke-dashoffset: -1560; opacity: 0; }
}
/* The ring that holds the 9 spokes */
.ew-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 50%;
z-index: 2;
pointer-events: none;
}
.ew-spoke {
position: absolute;
top: 50%;
left: 50%;
--r: calc(var(--wheel-size) / 2 - var(--spoke-size) / 2 - 4px);
transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translate(var(--r)) rotate(calc(-1 * var(--a, 0deg)));
width: var(--spoke-size);
height: var(--spoke-size);
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.08);
box-shadow: 0 4px 14px -8px rgba(46, 45, 41, 0.14);
color: #6a6a62;
cursor: pointer;
pointer-events: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.5rem 0.4rem;
transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
z-index: 3;
}
.ew-spoke::before {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1px solid transparent;
opacity: 0;
transition: border-color 0.4s ease, opacity 0.4s ease;
pointer-events: none;
}
.ew-spoke:hover,
.ew-spoke:focus-visible {
transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translate(var(--r)) rotate(calc(-1 * var(--a, 0deg))) scale(1.06);
border-color: rgba(195, 229, 2, 0.45);
color: #4a5e02;
outline: none;
box-shadow: 0 12px 24px -10px rgba(74, 94, 2, 0.28);
}
.ew-spoke.is-active {
background: linear-gradient(135deg, var(--primary-color, #c3e502) 0%, #a8c800 100%);
border-color: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
box-shadow: 0 18px 36px -12px rgba(74, 94, 2, 0.55);
transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translate(var(--r)) rotate(calc(-1 * var(--a, 0deg))) scale(1.12);
}
.ew-spoke.is-active::before {
opacity: 1;
border-color: rgba(195, 229, 2, 0.35);
inset: -8px;
animation: ewSpokeRing 2.4s infinite ease-out;
}
@keyframes ewSpokeRing {
0% { transform: scale(0.94); opacity: 0.6; }
100% { transform: scale(1.18); opacity: 0; }
}
.ew-spoke-icon {
display: inline-flex;
width: 24px;
height: 24px;
}
.ew-spoke-icon svg { width: 100%; height: 100%; }
.ew-spoke-label {
display: none;
font-size: 0.65rem;
font-weight: 700;
text-align: center;
line-height: 1.1;
color: inherit;
}
/* Central hub - light, airy, premium feel with Viridem watermark in the back */
.ew-hub {
position: absolute;
top: 50%;
left: 50%;
width: var(--hub-size);
height: var(--hub-size);
transform: translate(-50%, -50%);
background:
radial-gradient(circle at 50% 0%, rgba(195, 229, 2, 0.10) 0%, transparent 55%),
radial-gradient(circle at 50% 100%, rgba(74, 94, 2, 0.05) 0%, transparent 55%),
linear-gradient(180deg, #ffffff 0%, #fafaf3 100%);
border-radius: 50%;
border: 1px solid rgba(46, 45, 41, 0.06);
box-shadow:
0 36px 80px -32px rgba(46, 45, 41, 0.22),
0 8px 24px -10px rgba(46, 45, 41, 0.10),
inset 0 0 0 8px rgba(255, 255, 255, 0.6);
color: var(--text-color, #2e2d29);
padding: 2rem 2.1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
z-index: 1;
overflow: hidden;
transition: transform 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.25s ease;
}
/* Subtle Viridem watermark in the bottom of the hub */
.ew-hub::before {
content: "";
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background: url('/images/viridem-logo-icon.png') center/contain no-repeat;
opacity: 0.04;
pointer-events: none;
z-index: 0;
}
/* Decorative top inner ring (gives the hub a "lens" feel) */
.ew-hub::after {
content: "";
position: absolute;
inset: 14px;
border-radius: 50%;
border: 1px dashed rgba(195, 229, 2, 0.18);
pointer-events: none;
z-index: 0;
}
.ew-hub.ew-flip {
transform: translate(-50%, -50%) scale(0.97);
opacity: 0.6;
}
.ew-hub-pain {
width: 100%;
max-width: 260px;
position: relative;
z-index: 1;
}
.ew-hub-pain-tag {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: #c75331;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.75rem;
background: rgba(226, 61, 40, 0.06);
border: 1px solid rgba(226, 61, 40, 0.18);
border-radius: 999px;
margin-bottom: 0.6rem;
}
.ew-hub-pain-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #c75331;
box-shadow: 0 0 0 3px rgba(199, 83, 49, 0.15);
}
.ew-hub-pain-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.08rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0 0 0.4rem;
color: var(--text-color, #2e2d29);
}
.ew-hub-pain-text {
font-size: 0.78rem;
line-height: 1.55;
color: #6a6a62;
margin: 0;
}
/* Subtle dotted divider between pain and solution */
.ew-hub-arrow {
position: relative;
margin: 0.85rem auto;
width: 32px;
height: 32px;
color: var(--text-color, #2e2d29);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--primary-color, #c3e502);
box-shadow: 0 8px 20px -8px rgba(195, 229, 2, 0.65);
z-index: 1;
}
.ew-hub-arrow svg { width: 16px; height: 16px; }
.ew-hub-solution {
width: 100%;
max-width: 260px;
position: relative;
z-index: 1;
}
.ew-hub-solution-head {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: rgba(195, 229, 2, 0.12);
border: 1px solid rgba(195, 229, 2, 0.36);
padding: 0.3rem 0.75rem;
border-radius: 999px;
margin-bottom: 0.55rem;
}
.ew-hub-logo {
width: 18px;
height: 18px;
object-fit: contain;
}
.ew-hub-solution-tag {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.22em;
color: #4a5e02;
}
.ew-hub-solution-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 0.95rem;
font-weight: 800;
line-height: 1.3;
margin: 0 0 0.4rem;
color: #4a5e02;
}
.ew-hub-solution-text {
font-size: 0.8rem;
line-height: 1.55;
color: #4a4a42;
margin: 0;
}
/* Controls : prev / progress / play+pause / next */
.ew-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 1.5rem auto 0;
max-width: 360px;
}
.ew-ctrl {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid rgba(46, 45, 41, 0.14);
background: #fff;
color: var(--text-color, #2e2d29);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.ew-ctrl:hover {
background: var(--primary-color, #c3e502);
border-color: var(--primary-color, #c3e502);
transform: translateY(-1px);
}
.ew-ctrl svg { display: block; }
.ew-progress {
flex: 1;
height: 4px;
background: rgba(46, 45, 41, 0.08);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.ew-progress-fill {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, #c3e502 0%, #a8c800 100%);
border-radius: 999px;
}
/* CTA + hint */
.ew-cta {
text-align: center;
margin: 1.6rem auto 0.4rem;
max-width: 560px;
}
.ew-cta p {
color: #4a4a42;
font-size: 0.98rem;
line-height: 1.55;
margin: 0 0 0.95rem;
}
.ew-hint {
text-align: center;
color: rgba(46, 45, 41, 0.5);
font-style: italic;
font-size: 0.85rem;
margin: 0.8rem 0 0;
}
/* Tablet : smaller wheel */
@media (max-width: 900px) {
.enjeux-wheel { --wheel-size: 480px; --hub-size: 280px; --spoke-size: 64px; }
.ew-hub { padding: 1.2rem; }
.ew-hub-pain-title { font-size: 1rem; }
.ew-hub-pain-text { font-size: 0.74rem; }
.ew-hub-solution-title { font-size: 0.86rem; }
.ew-hub-solution-text { font-size: 0.76rem; }
}
/* Mobile : ditch the wheel, switch to a clean vertical stack with same content */
@media (max-width: 640px) {
.enjeux-wheel { --wheel-size: 100%; }
.ew-stage {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.ew-arcs { display: none; }
.ew-ring {
position: relative;
inset: auto;
width: 100%;
height: auto;
border-radius: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.55rem;
pointer-events: auto;
order: 2;
}
.ew-spoke {
position: relative;
top: auto;
left: auto;
transform: none !important;
width: 100%;
height: auto;
aspect-ratio: 1;
border-radius: 12px;
flex-direction: column;
gap: 0.3rem;
padding: 0.7rem 0.4rem;
}
.ew-spoke-label { display: block; }
.ew-hub {
position: relative;
top: auto;
left: auto;
transform: none;
width: 100%;
height: auto;
border-radius: 18px;
order: 1;
padding: 1.5rem 1.25rem;
}
.ew-hub.ew-flip { transform: scale(0.97); }
}
/* === Photo break RETIRÉ (user 2026-05-22) "bande noire bizarre" sous Vos enjeux === */
.section-custom.home-photo-break-section { display: none !important; }
.section-custom.home-photo-break-section--legacy {
padding: 0 !important;
background: linear-gradient(160deg, #1f1e1c 0%, #2e2d29 60%, #1a1a17 100%) !important;
overflow: hidden;
position: relative;
}
.section-custom.home-photo-break-section .container {
max-width: 100%;
padding: 0;
}
.section-custom.home-photo-break-section .section-title,
.section-custom.home-photo-break-section .section-subtitle { display: none; }
.photo-break {
position: relative;
width: 100%;
isolation: isolate;
color: #fff;
overflow: hidden;
}
/* Decorative background : radial Viridem accent + subtle dot pattern */
.pb-decor {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 22% 30%, rgba(195, 229, 2, 0.18) 0%, transparent 45%),
radial-gradient(circle at 88% 75%, rgba(195, 229, 2, 0.10) 0%, transparent 55%),
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
background-size: cover, cover, 24px 24px;
pointer-events: none;
z-index: 0;
}
/* Two-column grid : screenshot on the left, copy on the right
user 2026-06-10 : padding réduit pour que le bloc tienne sur un écran */
.pb-grid {
position: relative;
z-index: 1;
max-width: 1240px;
margin: 0 auto;
padding: 2.1rem 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.2rem;
align-items: center;
}
/* The product screenshot (perspective glass card) */
.pb-screenshot {
margin: 0;
position: relative;
}
.pb-screenshot-frame {
position: relative;
border-radius: 16px;
overflow: hidden;
max-width: 640px;
max-height: 450px;
margin: 0 auto;
box-shadow:
0 36px 70px -22px rgba(0, 0, 0, 0.52),
0 8px 20px -8px rgba(0, 0, 0, 0.30),
inset 0 0 0 1px rgba(195, 229, 2, 0.16);
transform: perspective(1600px) rotateY(-5deg) rotateX(1.5deg);
transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.photo-break:hover .pb-screenshot-frame {
transform: perspective(1600px) rotateY(-2deg) rotateX(0deg) scale(1.04);
}
.pb-screenshot-frame img {
display: block;
width: 100%;
height: 100%;
max-height: 380px;
object-fit: cover;
object-position: center 22%; /* user 2026-08-21 : cadrer vers le haut pour voir les visages */
border-radius: 16px;
}
.pb-screenshot-cap {
margin: 1rem 0 0;
color: rgba(255, 255, 255, 0.7);
font-size: 0.82rem;
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-weight: 500;
}
.pb-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
box-shadow: 0 0 0 4px rgba(195, 229, 2, 0.18);
animation: pbDotPulse 2.4s infinite ease-in-out;
}
@keyframes pbDotPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Right column : narrative + numbers + CTA */
.pb-overlay {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.1rem;
}
.pb-eyebrow {
text-transform: uppercase;
letter-spacing: 0.22em;
font-weight: 800;
font-size: 0.74rem;
color: var(--primary-color, #c3e502);
background: rgba(195, 229, 2, 0.10);
border: 1px solid rgba(195, 229, 2, 0.32);
padding: 0.45rem 0.95rem;
border-radius: 999px;
align-self: flex-start;
}
.pb-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.4rem, 2.7vw, 2.15rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: #fff;
margin: 0;
max-width: 760px;
}
.pb-title em {
font-style: italic;
color: var(--primary-color, #c3e502);
font-weight: 800;
}
.pb-lead {
font-size: 1.02rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.85);
max-width: 680px;
margin: 0;
}
.pb-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 1.5rem;
width: 100%;
max-width: 540px;
margin-top: 0.5rem;
padding: 1.25rem 1.5rem;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(195, 229, 2, 0.18);
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.pb-stats > div {
display: flex;
flex-direction: column;
gap: 0.2rem;
text-align: left;
}
.pb-stat-num {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
font-weight: 800;
color: var(--primary-color, #c3e502);
line-height: 1;
}
.pb-stat-label {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.35;
}
.pb-cta {
margin-top: 0.6rem;
}
@media (max-width: 920px) {
.pb-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
padding: 3.5rem 1.5rem;
}
.pb-screenshot-frame {
transform: perspective(1600px) rotateY(0deg) rotateX(0deg) scale(1);
}
.pb-stats { max-width: 100%; }
}
@media (max-width: 540px) {
.pb-stats {
grid-template-columns: 1fr;
gap: 0.85rem;
}
}
.el-headers {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin: 0 0 0.4rem;
flex-wrap: wrap;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.78rem;
}
.el-pain-tag,
.el-solution-tag {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.95rem;
border-radius: 999px;
border: 1px solid rgba(46, 45, 41, 0.12);
background: #fff;
}
.el-pain-tag {
color: #8a3b1a;
border-color: rgba(226, 61, 40, 0.22);
background: rgba(226, 61, 40, 0.06);
}
.el-pain-mark {
width: 18px;
height: 18px;
color: #c75331;
display: inline-flex;
}
.el-pain-mark svg { width: 100%; height: 100%; }
.el-solution-tag {
color: #4a5e02;
border-color: rgba(74, 94, 2, 0.22);
background: rgba(195, 229, 2, 0.10);
}
.el-solution-logo {
width: 22px;
height: 22px;
object-fit: contain;
}
.el-arrow {
color: rgba(46, 45, 41, 0.4);
font-size: 1.1rem;
font-weight: 700;
}
.el-hint {
text-align: center;
color: rgba(46, 45, 41, 0.52);
font-style: italic;
font-size: 0.85rem;
margin: 0 0 1.1rem;
letter-spacing: 0.01em;
}
.el-strip {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
justify-content: center;
padding: 0.5rem 0 1.25rem;
}
.el-pill {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.7rem 1.05rem 0.7rem 0.85rem;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.10);
box-shadow: 0 2px 6px rgba(46, 45, 41, 0.04);
color: var(--text-color, #2e2d29);
font-family: var(--body-font, 'TTForsRegular', sans-serif);
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.el-pill:hover,
.el-pill:focus-visible {
border-color: rgba(195, 229, 2, 0.6);
background: rgba(195, 229, 2, 0.06);
box-shadow: 0 8px 22px -8px rgba(195, 229, 2, 0.45);
transform: translateY(-2px);
outline: none;
}
.el-pill-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(226, 61, 40, 0.08);
color: #c75331;
flex-shrink: 0;
transition: background 0.25s ease, color 0.25s ease;
}
.el-pill-icon svg { width: 18px; height: 18px; }
.el-pill:hover .el-pill-icon,
.el-pill:focus-visible .el-pill-icon {
background: rgba(195, 229, 2, 0.18);
color: #4a5e02;
}
.el-pill-label {
line-height: 1.2;
}
/* Popover (hidden by default, shown on hover/focus) */
.el-pill-pop {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translate(-50%, 6px);
width: min(340px, 90vw);
background: linear-gradient(160deg, #1f1e1c 0%, #2e2d29 100%);
color: #fff;
border-radius: 16px;
padding: 1rem 1.1rem 1.05rem;
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.18);
border: 1px solid rgba(195, 229, 2, 0.25);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.25s cubic-bezier(.2,.8,.2,1), visibility 0.22s;
z-index: 30;
text-align: left;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.el-pill:hover .el-pill-pop,
.el-pill:focus-visible .el-pill-pop,
.el-pill[aria-expanded="true"] .el-pill-pop {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.el-pop-arrow {
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: #1f1e1c;
border-left: 1px solid rgba(195, 229, 2, 0.25);
border-top: 1px solid rgba(195, 229, 2, 0.25);
}
.el-pop-head {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.15rem;
}
.el-pop-logo {
width: 28px;
height: 28px;
object-fit: contain;
background: rgba(195, 229, 2, 0.18);
border-radius: 8px;
padding: 4px;
}
.el-pop-tag {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.66rem;
font-weight: 800;
color: var(--primary-color, #c3e502);
}
.el-pop-solution {
font-size: 1rem;
line-height: 1.4;
color: #fff;
font-weight: 700;
}
.el-pop-text {
font-size: 0.86rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
}
.el-cta-block {
text-align: center;
padding: 1.2rem 1rem 0.5rem;
margin-top: 0.5rem;
border-top: 1px solid rgba(46, 45, 41, 0.08);
}
.el-cta-text {
color: rgba(46, 45, 41, 0.78);
font-size: 0.98rem;
line-height: 1.55;
margin: 0 auto 0.95rem;
max-width: 580px;
}
@media (max-width: 720px) {
.enjeux-line { padding: 1rem 0.75rem 0; }
.el-pill { font-size: 0.85rem; padding: 0.6rem 0.85rem 0.6rem 0.7rem; }
.el-pill-icon { width: 28px; height: 28px; }
.el-pill-icon svg { width: 16px; height: 16px; }
.el-pill-pop { width: min(300px, 88vw); }
}
.product-showcase-image {
position: relative;
}
.product-showcase-image img {
width: 100%;
height: auto;
border-radius: 14px;
box-shadow: 0 30px 60px rgba(46, 45, 41, 0.18),
0 10px 30px rgba(46, 45, 41, 0.10);
transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.product-showcase-image:hover img {
transform: perspective(1400px) rotateY(0deg) rotateX(0deg);
box-shadow: 0 40px 70px rgba(46, 45, 41, 0.22),
0 14px 34px rgba(46, 45, 41, 0.12);
}
@media (max-width: 900px) {
.product-showcase {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.product-showcase-image img {
transform: none;
}
.product-showcase-text h3 {
font-size: 1.65rem;
}
.product-showcase-text > p {
font-size: 1rem;
}
}
/* ===== Comparison: Sans/Avec Viridem ===== */
.section-custom.comparison-section {
background: var(--accent-color, #F7F7E8);
}
.comparison-table {
max-width: 1000px;
margin: 1rem auto 0;
}
.comparison-headers {
display: grid;
grid-template-columns: 1fr 80px 1fr;
align-items: center;
margin-bottom: 1.25rem;
gap: 1rem;
}
.comparison-headers h3 {
font-size: 1.3rem;
text-align: center;
margin: 0;
padding: 0.85rem 1rem;
border-radius: 10px;
}
.comparison-headers .col-without {
background: var(--text-color, #2e2d29);
color: #fff;
}
.comparison-headers .col-with {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
}
.comparison-row {
display: grid;
grid-template-columns: 1fr 80px 1fr;
align-items: center;
gap: 1rem;
margin-bottom: 0.8rem;
}
.comparison-row .without-item,
.comparison-row .with-item {
padding: 1rem 1.25rem;
border-radius: 10px;
font-weight: 500;
line-height: 1.4;
}
.comparison-row .without-item {
background: #fff;
border-left: 4px solid var(--secondary-color, #E23D28);
color: var(--text-color, #2e2d29);
}
.comparison-row .with-item {
background: #fff;
border-left: 4px solid var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
box-shadow: 0 4px 14px rgba(195, 229, 2, 0.15);
}
.comparison-row .arrow {
text-align: center;
color: var(--primary-color, #c3e502);
font-weight: 900;
font-size: 1.4rem;
letter-spacing: -2px;
user-select: none;
}
/* ===== La différence Viridem (compact 2-col checklist) ===== */
.section-custom.difference-section {
background: var(--text-color, #2e2d29);
color: #fff;
}
.section-custom.difference-section .section-title {
color: #fff;
}
.section-custom.difference-section .section-subtitle {
color: rgba(255, 255, 255, 0.75);
}
.difference-grid {
list-style: none;
padding: 0;
margin: 1.5rem auto 0;
max-width: 900px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem 2rem;
}
.difference-grid li {
position: relative;
padding: 0.65rem 0 0.65rem 2rem;
color: rgba(255, 255, 255, 0.92);
font-size: 1rem;
line-height: 1.4;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.difference-grid li::before {
content: 'V';
font-family: var(--heading-font, 'JekoRegular', sans-serif);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 0.85rem;
}
/* ===== Testimonials version compacte avec scroll horizontal (user 2026-05-22)
"Ce que disent nos clients" : grille plus dense pour réduire la hauteur visuelle,
tout en gardant le contraste noir/lime caractéristique Viridem. ===== */
.section-custom.testimonials-section {
background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1.5rem;
}
@media (max-width: 980px) {
.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
.testimonial-card {
position: relative;
background: var(--text-color, #2e2d29);
color: rgba(255, 255, 255, 0.95);
padding: 1.25rem 1.2rem 0.85rem;
border-radius: 12px;
border-left: 3px solid var(--primary-color, #c3e502);
margin: 0;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px -18px rgba(46, 45, 41, 0.30);
}
.testimonial-card::before {
content: '"';
position: absolute;
top: -6px;
left: 12px;
font-size: 3rem;
line-height: 1;
font-family: Georgia, serif;
color: var(--primary-color, #c3e502);
opacity: 0.7;
}
.testimonial-card p {
font-size: 0.86rem;
line-height: 1.5;
margin: 0 0 0.7rem 0;
font-style: italic;
flex: 1;
}
.testimonial-card cite {
display: block;
color: var(--primary-color, #c3e502);
font-style: normal;
font-weight: 700;
font-size: 0.86rem;
text-align: left;
line-height: 1.35;
}
/* V logo CTA on testimonials → blog/case study (compact, less padding) */
.testimonial-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-top: 0.85rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
width: 100%;
color: rgba(255, 255, 255, 0.7) !important;
text-decoration: none !important;
font-size: 0.78rem;
font-weight: 600;
transition: color 0.3s ease, border-color 0.3s ease;
justify-content: space-between;
}
.testimonial-link-label {
transition: color 0.3s ease;
}
.testimonial-link-logo {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(195, 229, 2, 0.14);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.4s ease,
transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.4s ease;
}
.testimonial-link-logo img {
width: 60%;
height: 60%;
object-fit: contain;
}
.testimonial-card:hover .testimonial-link {
color: var(--primary-color, #c3e502) !important;
border-color: rgba(195, 229, 2, 0.25);
}
.testimonial-card:hover .testimonial-link-logo {
background: var(--primary-color, #c3e502);
box-shadow: 0 4px 12px rgba(195, 229, 2, 0.40);
transform: rotate(-10deg) scale(1.06);
}
/* ===== Viridem Academy : compact SQUARE BLOCK on home About (smaller, contained) ===== */
.academy-chip {
display: inline-flex;
align-items: flex-start;
gap: 0.85rem;
margin: 1.75rem auto 0;
max-width: 480px;
padding: 1rem 1.2rem 1rem 1rem;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.12) 0%, rgba(195, 229, 2, 0.04) 100%);
border: 1px solid rgba(195, 229, 2, 0.30);
border-radius: 12px;
text-decoration: none;
color: var(--text-color, #2e2d29);
font-size: 0.92rem;
text-align: left;
box-shadow: 0 8px 20px -14px rgba(74, 94, 2, 0.25);
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.academy-chip:hover {
background: rgba(195, 229, 2, 0.18);
border-color: var(--primary-color, #c3e502);
transform: translateY(-1px);
box-shadow: 0 10px 22px -10px rgba(74, 94, 2, 0.30);
}
.academy-chip-icon {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
flex-shrink: 0;
}
.academy-chip-icon svg { width: 16px; height: 16px; }
.academy-chip-text { line-height: 1.35; }
.academy-chip-text strong { font-weight: 700; color: #4a5e02; }
.academy-chip-arrow {
color: #4a5e02;
font-weight: 700;
transition: transform 0.25s ease;
}
.academy-chip:hover .academy-chip-arrow { transform: translateX(3px); }
@media (max-width: 540px) {
.academy-chip {
flex-wrap: wrap;
border-radius: 14px;
padding: 0.85rem 1rem;
}
.academy-chip-text { font-size: 0.85rem; }
}
/* ===========================================================
Académie Viridem : bloc large pleine largeur (user 2026-05-22)
Affiché comme bloc principal au-dessus de "Nos solutions",
pas en petit carré encart. Style sombre Viridem + lime accents.
=========================================================== */
/* ===========================================================
Case spotlight Sani Marc style premium (user 2026-05-25)
=========================================================== */
.case-spotlight {
max-width: 1080px;
margin: 0 auto;
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 30px 60px -28px rgba(31, 44, 74, 0.20),
0 8px 20px -10px rgba(31, 30, 28, 0.08);
position: relative;
}
.case-spotlight::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #c3e502 0%, #d3f312 50%, #c3e502 100%);
}
/* Header : logo client + titres */
.case-spotlight-header {
display: flex;
align-items: center;
gap: 1.6rem;
padding: 2.2rem 2.4rem 1.6rem;
border-bottom: 1px solid rgba(46, 45, 41, 0.07);
flex-wrap: wrap;
}
.case-spotlight-logo {
flex: 0 0 auto;
margin: 0;
padding: 1rem 1.2rem;
background: #fafaf6;
border-radius: 12px;
border: 1px solid rgba(46, 45, 41, 0.06);
display: flex;
align-items: center;
justify-content: center;
min-width: 160px;
min-height: 80px;
}
.case-spotlight-logo img { max-height: 56px; max-width: 180px; width: auto; height: auto; object-fit: contain; display: block; }
.case-spotlight-titles { flex: 1 1 380px; min-width: 0; }
.case-spotlight-eyebrow {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #4a5e02;
background: rgba(195, 229, 2, 0.18);
border: 1px solid rgba(195, 229, 2, 0.45);
padding: 0.3rem 0.8rem;
border-radius: 999px;
margin-bottom: 0.7rem;
}
.case-spotlight-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
font-weight: 800;
line-height: 1.2;
margin: 0 0 0.55rem;
color: #1f1e1c;
letter-spacing: -0.012em;
}
.case-spotlight-lead {
font-size: 0.98rem;
line-height: 1.55;
color: #4a4a42;
margin: 0;
max-width: 640px;
}
/* Body : metric vedette + grille KPI */
.case-spotlight-body {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 2rem;
padding: 2rem 2.4rem;
align-items: stretch;
}
.case-spotlight-metric {
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 100%);
color: #ffffff;
border-radius: 16px;
padding: 1.8rem 1.6rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 0.6rem;
position: relative;
overflow: hidden;
box-shadow: 0 14px 30px -16px rgba(31, 44, 74, 0.40);
}
.case-spotlight-metric::after {
content: "";
position: absolute;
right: -40px; bottom: -40px;
width: 140px; height: 140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(195, 229, 2, 0.22) 0%, transparent 70%);
pointer-events: none;
}
.case-spotlight-num {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(2.6rem, 4.5vw, 3.4rem);
font-weight: 900;
line-height: 1;
color: #c3e502;
letter-spacing: -0.03em;
position: relative;
z-index: 1;
}
.case-spotlight-num-label {
font-size: 0.92rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
position: relative;
z-index: 1;
max-width: 240px;
}
.case-spotlight-kpis {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
}
.case-spotlight-kpis > div {
background: #fafaf6;
border: 1px solid rgba(46, 45, 41, 0.07);
border-left: 3px solid var(--primary-color, #c3e502);
border-radius: 10px;
padding: 0.95rem 1.1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
transition: transform 0.22s ease, border-color 0.22s ease;
}
.case-spotlight-kpis > div:hover { transform: translateY(-2px); border-color: rgba(195, 229, 2, 0.55); }
.case-spotlight-kpis strong {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.25rem;
font-weight: 800;
color: #1f1e1c;
letter-spacing: -0.01em;
line-height: 1.1;
}
.case-spotlight-kpis span {
font-size: 0.82rem;
line-height: 1.4;
color: #5a5a52;
}
/* Footer : narratif + CTA */
.case-spotlight-footer {
padding: 1.6rem 2.4rem 2.2rem;
border-top: 1px solid rgba(46, 45, 41, 0.07);
background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.4rem;
flex-wrap: wrap;
}
.case-spotlight-footer p {
margin: 0;
color: #4a4a42;
font-size: 0.95rem;
line-height: 1.6;
font-style: italic;
flex: 1 1 460px;
}
.case-spotlight-link {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.85rem 1.3rem;
background: var(--primary-color, #c3e502);
color: #1f1e1c !important;
font-weight: 800;
border-radius: 11px;
text-decoration: none !important;
font-size: 0.93rem;
box-shadow: 0 8px 20px -8px rgba(74, 94, 2, 0.45);
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.case-spotlight-link:hover { background: #d3f312; transform: translateY(-2px); box-shadow: 0 14px 24px -10px rgba(74, 94, 2, 0.55); }
.case-spotlight-visit {
flex: 0 0 auto;
align-self: center;
color: #4a5e02 !important;
font-weight: 700;
font-size: 0.9rem;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
transition: color 0.2s ease;
}
.case-spotlight-visit:hover { color: #1f1e1c !important; }
@media (max-width: 820px) {
.case-spotlight-body { grid-template-columns: 1fr; }
.case-spotlight-kpis { grid-template-columns: 1fr; }
.case-spotlight-header { padding: 1.6rem 1.4rem 1.2rem; }
.case-spotlight-body { padding: 1.4rem 1.4rem; }
.case-spotlight-footer { padding: 1.4rem 1.4rem 1.8rem; }
.case-spotlight-link { width: 100%; justify-content: center; }
}
/* Construction 4 secteurs (user 2026-05-26) */
.sec-personas-grid.sec-personas-grid-4 {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
@media (max-width: 1100px) {
.sec-personas-grid.sec-personas-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.sec-personas-grid.sec-personas-grid-4 { grid-template-columns: 1fr; }
}
/* ===========================================================
Construction · Feat CTA (sortie sector-features → technologie) + Cases premium (user 2026-05-26)
=========================================================== */
.feat-cta {
max-width: 1140px;
margin: 0 auto;
/* user 2026-05-26 : même couleur que le bloc vex-cta-light (vert clair, liseré lime) */
background: linear-gradient(135deg, rgba(195, 229, 2, 0.12) 0%, rgba(195, 229, 2, 0.03) 100%);
border-left: 4px solid var(--primary-color, #c3e502);
border-radius: 14px;
padding: 1.8rem 2.2rem;
color: #2e2d29;
position: relative;
overflow: hidden;
}
.feat-cta::before { display: none; }
.feat-cta-inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.feat-cta-text { flex: 1 1 420px; min-width: 0; }
.feat-cta-text h3 {
margin: 0 0 0.4rem;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.2rem, 2.2vw, 1.55rem);
color: #1f1e1c;
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.25;
}
.feat-cta-text p { margin: 0; color: #4a4a42; font-size: 0.95rem; line-height: 1.55; max-width: 540px; }
.feat-cta-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.6rem; }
.feat-cta-actions .hero-btn { background: #c3e502 !important; color: #1f1e1c !important; font-weight: 800; }
.feat-cta-actions .hero-btn:hover { background: #d3f312 !important; transform: translateY(-2px); }
.feat-cta-secondary {
color: #4a5e02 !important;
font-weight: 700;
font-size: 0.92rem;
text-decoration: underline;
text-underline-offset: 3px;
text-align: center;
}
.feat-cta-secondary:hover { color: #1f1e1c !important; }
@media (max-width: 720px) {
.feat-cta-actions { width: 100%; }
}
/* Construction · Cases magazine zig-zag (user 2026-05-26 refonte v2) */
.constr-feats { max-width: 1240px; margin: 0 auto; }
.constr-feats-head { text-align: center; margin: 0 auto 2.8rem; max-width: 760px; }
.constr-feats-eyebrow {
display: inline-block;
font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
color: #4a5e02; background: rgba(195, 229, 2, 0.22);
padding: 0.32rem 0.85rem; border-radius: 999px; margin-bottom: 1rem;
}
.constr-feats-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.65rem, 3vw, 2.3rem); font-weight: 800; color: #1f1e1c;
margin: 0 0 0.7rem; letter-spacing: -0.014em; line-height: 1.18;
}
.constr-feats-lead { color: #4a4a42; margin: 0 auto; font-size: 1.02rem; line-height: 1.6; }
.constr-feat {
display: grid;
grid-template-columns: 340px 1fr;
gap: 0;
background: #ffffff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 30px 60px -32px rgba(31, 30, 28, 0.22), 0 8px 18px -10px rgba(31, 30, 28, 0.08);
border: 1px solid rgba(46, 45, 41, 0.06);
margin-bottom: 2.2rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.constr-feat::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
background: linear-gradient(90deg, #c3e502 0%, #d3f312 50%, #c3e502 100%);
z-index: 2;
}
.constr-feat:hover {
transform: translateY(-4px);
box-shadow: 0 40px 70px -32px rgba(31, 30, 28, 0.32), 0 12px 24px -12px rgba(31, 30, 28, 0.10);
}
.constr-feat-right { grid-template-columns: 1fr 340px; }
.constr-feat-right .constr-feat-media { order: 2; }
.constr-feat-right .constr-feat-content { order: 1; }
.constr-feat-media {
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 100%);
padding: 2.5rem 1.8rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.4rem;
position: relative;
overflow: hidden;
}
.constr-feat-media::after {
content: ""; position: absolute; right: -40px; bottom: -40px;
width: 180px; height: 180px; border-radius: 50%;
background: radial-gradient(circle, rgba(195, 229, 2, 0.22) 0%, transparent 65%);
pointer-events: none;
}
.constr-feat-logo {
margin: 0; background: #ffffff; border-radius: 14px; padding: 1.4rem 1.6rem;
display: flex; align-items: center; justify-content: center;
min-height: 110px; min-width: 200px; max-width: 240px;
box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.45);
position: relative; z-index: 1;
}
.constr-feat-logo img { max-width: 100%; max-height: 84px; object-fit: contain; display: block; }
.constr-feat-verified {
font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
color: #c3e502; background: rgba(195, 229, 2, 0.10);
padding: 0.35rem 0.85rem; border-radius: 999px;
border: 1px solid rgba(195, 229, 2, 0.45);
position: relative; z-index: 1;
}
.constr-feat-content { padding: 2.4rem 2.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.constr-feat-eyebrow {
display: inline-block; align-self: flex-start;
font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
color: #4a5e02; background: rgba(195, 229, 2, 0.18);
padding: 0.28rem 0.75rem; border-radius: 999px;
}
.constr-feat-client {
margin: 0;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 800; color: #1f1e1c;
line-height: 1.15; letter-spacing: -0.018em;
}
.constr-feat-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
margin: 0.6rem 0 0.4rem; padding: 1.1rem 0;
border-top: 1px solid rgba(46, 45, 41, 0.10);
border-bottom: 1px solid rgba(46, 45, 41, 0.10);
}
.constr-feat-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.constr-feat-stat-num {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 900; color: #4a5e02;
line-height: 1; letter-spacing: -0.025em;
}
.constr-feat-stat-label { font-size: 0.78rem; color: #5a5a52; line-height: 1.4; }
.constr-feat-quote {
margin: 0.6rem 0 0; padding: 1.1rem 1.3rem;
background: rgba(195, 229, 2, 0.08);
border-left: 3px solid #c3e502;
border-radius: 8px;
}
.constr-feat-quote p { margin: 0 0 0.6rem; font-style: italic; color: #2e2d29; font-size: 1rem; line-height: 1.55; }
.constr-feat-quote footer { font-size: 0.84rem; color: #5a5a52; font-style: normal; }
.constr-feat-quote footer strong { color: #1f1e1c; font-weight: 800; }
.constr-feat-link {
display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
margin-top: 0.6rem;
padding: 0.85rem 1.4rem; background: var(--primary-color, #c3e502);
color: #1f1e1c !important; font-weight: 800; font-size: 0.95rem;
border-radius: 11px; text-decoration: none !important;
box-shadow: 0 8px 20px -8px rgba(74, 94, 2, 0.45);
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.constr-feat-link:hover { background: #d3f312; transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(74, 94, 2, 0.55); }
@media (max-width: 900px) {
.constr-feat, .constr-feat-right { grid-template-columns: 1fr; }
.constr-feat-right .constr-feat-media { order: 1; }
.constr-feat-right .constr-feat-content { order: 2; }
.constr-feat-content { padding: 1.8rem 1.4rem; }
.constr-feat-media { padding: 1.8rem 1.2rem; }
.constr-feat-stats { grid-template-columns: 1fr; gap: 0.8rem; padding: 0.85rem 0; }
}
/* Construction · Cases premium (Bellemare/APCHQ) old grid v1 (user 2026-05-26) */
.constr-cases {
max-width: 1140px;
margin: 0 auto;
}
.constr-cases-title {
text-align: center;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.5rem, 2.8vw, 2rem);
font-weight: 800;
color: #1f2c4a;
margin: 0 0 0.55rem;
letter-spacing: -0.014em;
line-height: 1.2;
}
.constr-cases-lead { text-align: center; color: #4a4a42; margin: 0 auto 2rem; max-width: 720px; line-height: 1.6; }
.constr-cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.constr-case {
display: grid;
grid-template-columns: 110px 1fr;
gap: 1.2rem;
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.07);
border-top: 4px solid var(--primary-color, #c3e502);
border-radius: 16px;
padding: 1.4rem 1.5rem;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
box-shadow: 0 14px 32px -22px rgba(31, 44, 74, 0.18);
}
.constr-case:hover {
transform: translateY(-3px);
border-color: rgba(195, 229, 2, 0.55);
box-shadow: 0 22px 44px -22px rgba(74, 94, 2, 0.28);
}
.constr-case-logo {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fafaf6;
border-radius: 12px;
padding: 0.6rem;
}
.constr-case-logo img { max-width: 100%; max-height: 84px; object-fit: contain; display: block; }
.constr-case-body { display: flex; flex-direction: column; gap: 0.4rem; }
.constr-case-sector {
display: inline-block; align-self: flex-start;
font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
color: #4a5e02; background: rgba(195, 229, 2, 0.22);
padding: 0.25rem 0.65rem; border-radius: 999px;
}
.constr-case-client {
margin: 0;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.25rem; font-weight: 800; color: #1f2c4a; letter-spacing: -0.01em; line-height: 1.2;
}
.constr-case-metric { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.4rem 0 0.3rem; }
.constr-case-num {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 2rem; font-weight: 900; color: #1f2c4a;
line-height: 1; letter-spacing: -0.02em;
}
.constr-case-num-label { color: #5a5a52; font-size: 0.92rem; line-height: 1.35; }
.constr-case-take { margin: 0; color: #4a4a42; font-size: 0.92rem; line-height: 1.55; }
.constr-case-link {
display: inline-flex; align-items: center; gap: 0.35rem;
margin-top: 0.4rem; color: #4a5e02 !important; font-weight: 800; font-size: 0.92rem;
text-decoration: none !important; align-self: flex-start;
transition: color 0.22s ease, transform 0.22s ease;
}
.constr-case-link:hover { color: #2e3a02 !important; transform: translateX(2px); }
@media (max-width: 820px) {
.constr-cases-grid { grid-template-columns: 1fr; }
.constr-case { grid-template-columns: 1fr; }
.constr-case-logo { max-width: 200px; margin: 0 auto; }
}
/* ===========================================================
Enjeux teaser petit bloc redirigeant vers article blog (user 2026-05-26 construction)
=========================================================== */
.enjeux-teaser {
max-width: 1240px; /* user 2026-07-14 : même largeur que les autres blocs (standard 1240px) */
margin: 0 auto;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.10) 0%, #ffffff 60%, rgba(195, 229, 2, 0.04) 100%);
border: 1px solid rgba(195, 229, 2, 0.45);
border-left: 4px solid var(--primary-color, #c3e502);
border-radius: 14px;
padding: 1.6rem 1.8rem;
box-shadow: 0 14px 32px -22px rgba(31, 30, 28, 0.22);
}
.enjeux-teaser-inner {
display: flex;
flex-direction: column;
gap: 0.85rem;
align-items: flex-start;
}
.enjeux-teaser-eyebrow {
display: inline-block;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #4a5e02;
background: rgba(195, 229, 2, 0.22);
padding: 0.3rem 0.7rem;
border-radius: 999px;
}
.enjeux-teaser h3 {
margin: 0;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.2rem, 2.2vw, 1.55rem);
font-weight: 800;
color: #1f2c4a;
line-height: 1.25;
letter-spacing: -0.012em;
}
.enjeux-teaser p {
margin: 0;
color: #4a4a42;
font-size: 0.98rem;
line-height: 1.6;
}
.enjeux-teaser-cta {
align-self: flex-start;
margin-top: 0.4rem;
}
/* ===========================================================
Personas comptabilité CTA séparateur en pied de bloc (user 2026-05-25)
=========================================================== */
.personas-cta {
margin-top: 2.2rem;
padding: 1.6rem 1.8rem;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 60%, #1a1a17 100%);
border-radius: 16px;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 18px 40px -22px rgba(31, 30, 28, 0.45);
}
.personas-cta::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #c3e502 0%, #d3f312 50%, #c3e502 100%);
}
.personas-cta::after {
content: "";
position: absolute;
right: -80px; bottom: -80px;
width: 240px; height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(195, 229, 2, 0.22) 0%, transparent 60%);
pointer-events: none;
}
.personas-cta-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.personas-cta-text { flex: 1 1 380px; min-width: 0; }
.personas-cta-eyebrow {
display: inline-block;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #c3e502;
background: rgba(195, 229, 2, 0.12);
border: 1px solid rgba(195, 229, 2, 0.42);
padding: 0.3rem 0.8rem;
border-radius: 999px;
margin-bottom: 0.7rem;
}
.personas-cta-text h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.25rem, 2.4vw, 1.7rem);
line-height: 1.2;
margin: 0 0 0.6rem;
color: #ffffff;
font-weight: 800;
letter-spacing: -0.01em;
}
.personas-cta-text h3 em { font-style: italic; color: #c3e502; }
.personas-cta-text p {
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 0.95rem;
line-height: 1.55;
max-width: 540px;
}
.personas-cta-actions {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
}
.personas-cta-secondary {
color: #c3e502 !important;
font-weight: 700;
font-size: 0.92rem;
text-decoration: underline;
text-underline-offset: 3px;
text-align: center;
transition: color 0.22s ease;
}
.personas-cta-secondary:hover { color: #d3f312 !important; }
@media (max-width: 720px) {
.personas-cta-inner { gap: 1.2rem; }
.personas-cta-actions { width: 100%; }
}
/* ===========================================================
"Pourquoi Viridem" 7 arguments en bullet points (user 2026-05-25 v2)
=========================================================== */
.args-list {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 880px;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.arg-bullet {
display: flex;
align-items: flex-start;
gap: 0.8rem;
padding: 0.55rem 0;
border-bottom: 1px solid rgba(46, 45, 41, 0.07);
}
.arg-bullet:last-child { border-bottom: none; }
.arg-bullet-check {
flex: 0 0 auto;
margin-top: 0.15rem;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--primary-color, #c3e502);
color: #1f2c4a;
border-radius: 6px;
}
.arg-bullet-check svg { width: 14px; height: 14px; }
.arg-bullet-body {
flex: 1 1 auto;
min-width: 0;
color: #4a4a42;
font-size: 0.95rem;
line-height: 1.55;
}
.arg-bullet-body strong {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
color: #1f2c4a;
font-weight: 800;
font-size: 1rem;
}
.args-cta {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
align-items: stretch;
justify-content: center;
}
.args-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.95rem 1.4rem;
border-radius: 11px;
font-weight: 800;
text-decoration: none !important;
font-size: 0.95rem;
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.args-cta-primary {
background: var(--primary-color, #c3e502) !important;
color: #1f2c4a !important;
box-shadow: 0 8px 22px -8px rgba(74, 94, 2, 0.50);
}
.args-cta-primary:hover { background: #d3f312 !important; transform: translateY(-2px); }
.args-cta-secondary {
background: #ffffff !important;
color: #1f2c4a !important;
border: 1.8px solid #1f2c4a;
}
.args-cta-secondary:hover { background: #1f2c4a !important; color: #c3e502 !important; transform: translateY(-2px); }
.args-cta-tertiary {
background: transparent !important;
color: #1f2c4a !important;
border: 1.8px solid rgba(31, 44, 74, 0.30);
}
.args-cta-tertiary:hover { border-color: #1f2c4a; background: rgba(31, 44, 74, 0.05) !important; transform: translateY(-2px); }
@media (max-width: 720px) {
.args-cta-btn { width: 100%; }
}
/* ===========================================================
"Aux côtés de nos clients" petit bloc horizontal compact (user 2026-05-25 v3)
=========================================================== */
.cs-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.4rem 2.2rem;
padding: 1.1rem 1.4rem;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.08) 0%, #ffffff 60%, rgba(195, 229, 2, 0.04) 100%);
border: 1px solid rgba(195, 229, 2, 0.40);
border-radius: 14px;
box-shadow: 0 12px 28px -20px rgba(46, 45, 41, 0.20);
}
.cs-strip-item {
display: flex;
align-items: center;
gap: 0.85rem;
flex: 1 1 220px;
min-width: 0;
}
.cs-strip-icon {
flex: 0 0 auto;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1.5px solid var(--primary-color, #c3e502);
border-radius: 10px;
color: #4a5e02;
}
.cs-strip-icon svg { width: 20px; height: 20px; }
.cs-strip-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cs-strip-text strong {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800; color: #1f2c4a; font-size: 0.98rem; letter-spacing: -0.005em;
}
.cs-strip-text span { font-size: 0.84rem; color: #5a6a82; line-height: 1.35; }
.cs-strip-sep { width: 1px; height: 36px; background: rgba(46, 45, 41, 0.12); flex: 0 0 auto; }
.cs-strip-cta {
flex: 0 0 auto; margin-left: auto;
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.7rem 1.1rem;
background: var(--primary-color, #c3e502); color: #1f2c4a !important;
font-weight: 800; border-radius: 10px; text-decoration: none; font-size: 0.92rem;
box-shadow: 0 6px 16px -8px rgba(74, 94, 2, 0.40);
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.cs-strip-cta:hover { transform: translateY(-2px); background: #d3f312; box-shadow: 0 12px 22px -10px rgba(74, 94, 2, 0.45); }
@media (max-width: 900px) {
.cs-strip-sep { display: none; }
.cs-strip { gap: 1rem; }
.cs-strip-cta { margin-left: 0; width: 100%; justify-content: center; }
}
.academy-large-block {
/* user 2026-05-22 : refonte. Largeur 100 % du parent (comme avant), hauteur
resserrée + design harmonisé avec le reste du site (palette claire,
accents lime, structure horizontale plus aérée). */
max-width: none;
width: 100%;
margin: 1.2rem 0 0;
padding: 1.75rem 2rem;
background:
linear-gradient(135deg, rgba(195, 229, 2, 0.06) 0%, rgba(195, 229, 2, 0.02) 100%),
linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
color: #1f1e1c;
border: 1px solid rgba(195, 229, 2, 0.32);
border-radius: 16px;
position: relative;
overflow: hidden;
box-shadow: 0 12px 32px -18px rgba(46, 45, 41, 0.18);
}
.academy-large-block::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, #c3e502, rgba(195, 229, 2, 0.4) 60%, transparent);
}
.academy-large-block::after {
content: '';
position: absolute;
right: -60px;
bottom: -60px;
width: 220px;
height: 220px;
background: url('/images/viridem-logo-icon.png') no-repeat center;
background-size: contain;
opacity: 0.06;
pointer-events: none;
}
.academy-large-block > p {
max-width: 720px;
margin: 0 0 1rem;
font-size: 0.98rem;
line-height: 1.55;
color: #2e2d29;
}
.academy-large-highlight {
color: var(--primary-color, #c3e502) !important;
font-size: 1.08rem !important;
margin: 0 0 2rem !important;
}
.academy-large-highlight strong {
color: var(--primary-color, #c3e502);
font-weight: 800;
}
.academy-large-pillars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.4rem;
position: relative;
z-index: 1;
}
/* Variante 2 colonnes (Académie + Support) design harmonisé palette claire */
.academy-large-pillars-2col { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.academy-large-pillars-2col .academy-large-pillar { padding: 1rem 1.25rem; }
.academy-large-pillars-2col .academy-large-pillar h4 { font-size: 1rem; margin: 0 0 0.3rem; color: #1f1e1c; }
.academy-large-pillars-2col .academy-large-pillar p { font-size: 0.88rem; line-height: 1.5; color: #555550; }
/* CTA en pied du bloc Académie */
.academy-large-cta {
margin-top: 1.2rem;
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
align-items: center;
justify-content: flex-start;
position: relative;
z-index: 2;
}
.academy-large-secondary {
color: #4a5e02 !important;
font-weight: 700;
font-size: 0.92rem;
padding: 0.55rem 0.9rem;
border: 1px solid rgba(195, 229, 2, 0.55);
border-radius: 8px;
text-decoration: none;
transition: background 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.academy-large-secondary:hover {
background: rgba(195, 229, 2, 0.18);
border-color: #c3e502;
transform: translateX(2px);
}
.academy-large-pillar {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(195, 229, 2, 0.30);
border-radius: 12px;
padding: 1rem 1.25rem;
transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.academy-large-pillar:hover {
transform: translateY(-2px);
border-color: #c3e502;
background: #ffffff;
}
.academy-large-num {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 0.78rem;
font-weight: 800;
color: #4a5e02;
background: rgba(195, 229, 2, 0.25);
display: inline-block;
line-height: 1;
padding: 0.3rem 0.55rem;
border-radius: 999px;
margin-bottom: 0.55rem;
letter-spacing: 0.08em;
}
.academy-large-pillar h4 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1rem;
font-weight: 800;
color: #1f1e1c;
margin: 0 0 0.4rem;
letter-spacing: -0.01em;
}
.academy-large-pillar p {
font-size: 0.88rem;
line-height: 1.55;
color: #555550;
margin: 0;
}
/* Le titre de la section "Académie Viridem" + sous-titre rendu par le layout */
.section-custom.section-about { background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%); }
@media (max-width: 980px) {
.academy-large-block { padding: 2.2rem 1.5rem 1.8rem; }
.academy-large-pillars { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
}
@media (max-width: 560px) {
.academy-large-pillars { grid-template-columns: 1fr; }
}
/* The original full-width callout (kept for other pages that still use it) */
.academy-callout {
margin-top: 2rem;
padding: 1.85rem 2rem 1.75rem;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.16) 0%, rgba(195, 229, 2, 0.04) 100%);
border-left: 4px solid var(--primary-color, #c3e502);
border-radius: 14px;
text-align: left;
box-shadow: 0 18px 40px -22px rgba(46, 45, 41, 0.22);
position: relative;
overflow: hidden;
}
.academy-callout::before {
content: "";
position: absolute;
top: -80px;
right: -90px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(195, 229, 2, 0.18) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.academy-callout-eyebrow {
display: inline-block;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #4a5e02;
background: rgba(195, 229, 2, 0.22);
border: 1px solid rgba(195, 229, 2, 0.55);
padding: 0.28rem 0.8rem;
border-radius: 999px;
margin-bottom: 0.85rem;
position: relative;
}
.academy-callout h3 {
color: var(--text-color, #2e2d29);
font-size: 1.4rem;
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0 0 0.7rem 0;
position: relative;
}
.academy-callout p {
margin: 0;
color: #3f3f37;
line-height: 1.65;
font-size: 1rem;
position: relative;
max-width: 720px;
}
.academy-callout p strong {
color: var(--text-color, #2e2d29);
background: rgba(195, 229, 2, 0.4);
padding: 0 0.25rem;
border-radius: 3px;
}
/* ----- Pro academy callout (4-step) ----- */
.academy-callout-pro {
margin-top: 2.5rem;
padding: 2.5rem 2rem 2.25rem;
background: linear-gradient(135deg, var(--text-color, #2e2d29) 0%, #1f1e1c 100%);
border-left: none;
border-radius: 22px;
color: #fff;
text-align: left;
box-shadow: 0 24px 50px -22px rgba(46, 45, 41, 0.45);
position: relative;
overflow: hidden;
}
.academy-callout-pro::before {
content: "";
position: absolute;
top: -100px;
right: -120px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(195, 229, 2, 0.16) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.academy-head {
position: relative;
margin-bottom: 1.75rem;
max-width: 720px;
}
.academy-eyebrow {
display: inline-block;
color: var(--primary-color, #c3e502);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.32rem 0.85rem;
border: 1px solid rgba(195, 229, 2, 0.4);
border-radius: 999px;
margin-bottom: 1rem;
background: rgba(195, 229, 2, 0.06);
}
.academy-callout-pro h3 {
color: #fff;
font-size: clamp(1.4rem, 2.5vw, 1.85rem);
line-height: 1.2;
letter-spacing: -0.015em;
margin: 0 0 0.85rem;
}
.academy-callout-pro p {
color: rgba(255, 255, 255, 0.78);
margin: 0;
line-height: 1.65;
font-size: 0.98rem;
}
.academy-lead { font-size: 1.02rem !important; }
.academy-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
position: relative;
z-index: 1;
}
.academy-step {
display: flex;
align-items: flex-start;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 1.1rem 1rem 1rem;
transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.academy-step:hover {
border-color: var(--primary-color, #c3e502);
transform: translateY(-3px);
background: rgba(195, 229, 2, 0.05);
}
.academy-step-num {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
font-size: 0.78rem;
font-weight: 800;
padding: 0.25rem 0.55rem;
border-radius: 999px;
flex-shrink: 0;
letter-spacing: 0.04em;
}
.academy-step h4 {
color: #fff;
font-size: 0.96rem;
font-weight: 700;
margin: 0 0 0.35rem;
}
.academy-step p {
font-size: 0.85rem !important;
line-height: 1.5;
color: rgba(255, 255, 255, 0.7) !important;
}
.academy-foot {
margin-top: 1.5rem !important;
padding-top: 1.25rem;
border-top: 1px dashed rgba(255, 255, 255, 0.12);
font-size: 0.85rem !important;
color: rgba(255, 255, 255, 0.6) !important;
font-style: italic;
}
@media (max-width: 860px) {
.academy-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
.academy-steps { grid-template-columns: 1fr; }
.academy-callout-pro { padding: 1.75rem 1.4rem 1.6rem; }
}
/* ===== "Depuis 2013" / "Since 2013" minimal Viridem badge (user 2026-05-22) ===== */
.depuis-badge {
position: absolute;
top: 5.5rem;
right: 2rem;
z-index: 5;
width: 108px;
height: 108px;
transform: rotate(0deg);
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}
.depuis-badge:hover {
transform: scale(1.05);
}
.depuis-badge-minimal {
animation: depuis-rotate 32s linear infinite;
}
.depuis-badge-minimal:hover {
animation-play-state: paused;
}
@keyframes depuis-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Lock text orientation (rotate only the dashed outer ring inside the SVG, not the whole badge) */
.depuis-badge-minimal .depuis-badge-svg > circle:first-child {
transform-origin: 60px 60px;
animation: depuis-rotate 32s linear infinite;
}
.depuis-badge-minimal {
animation: none;
}
.depuis-badge-svg {
width: 100%;
height: 100%;
display: block;
}
/* Mobile adjustments for new sections */
@media (max-width: 768px) {
.comparison-headers,
.comparison-row {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.comparison-row .arrow {
transform: rotate(90deg);
font-size: 1.2rem;
padding: 0.25rem 0;
}
.difference-grid {
grid-template-columns: 1fr;
gap: 0;
}
.testimonial-card {
padding: 1.75rem 1.4rem 1.25rem;
}
.academy-callout {
padding: 1.25rem 1.4rem;
}
.depuis-badge {
width: 90px;
height: 90px;
top: 4rem;
right: 1rem;
}
}
/* ===================================================================
BLOG INDEX PAGE (/blogue)
Beautiful B2B SaaS layout featured hero + filterable grid
=================================================================== */
.blog-index-section {
padding: 4rem 0 5rem;
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
}
.blog-index-section > .container > h2,
.blog-index-section > h2 {
font-size: clamp(2rem, 4vw, 2.75rem);
color: var(--text-color, #2e2d29);
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.blog-index-section > .container > .subtitle,
.blog-index-section > .subtitle {
font-size: 1.1rem;
color: #5a5a52;
max-width: 720px;
margin: 0 auto 2.5rem;
text-align: center;
line-height: 1.6;
}
/* ----- Featured hero article ----- */
.bi-hero {
margin: 0 0 3rem;
border-radius: 18px;
overflow: hidden;
background: #fff;
box-shadow: 0 20px 60px -25px rgba(46, 45, 41, 0.25);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
}
.bi-hero:hover {
transform: translateY(-4px);
box-shadow: 0 30px 70px -25px rgba(46, 45, 41, 0.35);
}
.bi-hero-link {
display: grid;
grid-template-columns: 1.1fr 1fr;
text-decoration: none;
color: inherit;
min-height: 380px;
}
.bi-hero-media {
position: relative;
overflow: hidden;
background: #f0f0e8;
}
.bi-hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 60%, rgba(195, 229, 2, 0.08) 100%);
pointer-events: none;
}
.bi-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.bi-hero:hover .bi-hero-media img {
transform: scale(1.04);
}
.bi-hero-body {
padding: 3rem 3rem 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
background: #fff;
}
.bi-hero-tag {
margin-bottom: 1.25rem;
font-size: 0.78rem;
letter-spacing: 0.08em;
}
.bi-hero-title {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
line-height: 1.2;
margin: 0 0 1rem;
color: var(--text-color, #2e2d29);
letter-spacing: -0.015em;
}
.bi-hero-excerpt {
font-size: 1.05rem;
color: #5a5a52;
line-height: 1.65;
margin: 0 0 1.75rem;
}
.bi-hero-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.9rem;
color: #8a8a82;
}
.bi-hero-cta {
color: var(--text-color, #2e2d29);
font-weight: 600;
background: var(--primary-color, #c3e502);
padding: 0.65rem 1.25rem;
border-radius: 999px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bi-hero:hover .bi-hero-cta {
transform: translateX(4px);
box-shadow: 0 8px 20px -8px rgba(195, 229, 2, 0.6);
}
/* ----- Toolbar : search + filter pills ----- */
.bi-toolbar {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin: 0 0 2.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #ececdf;
}
.bi-search {
position: relative;
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid #d8d8c8;
border-radius: 999px;
padding: 0.55rem 1.1rem 0.55rem 2.65rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
max-width: 540px;
}
.bi-search:focus-within {
border-color: var(--text-color, #2e2d29);
box-shadow: 0 0 0 3px rgba(195, 229, 2, 0.2);
}
.bi-search-icon {
position: absolute;
left: 1rem;
width: 18px;
height: 18px;
color: #8a8a82;
pointer-events: none;
}
.bi-search-input {
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 0.95rem;
color: var(--text-color, #2e2d29);
width: 100%;
padding: 0;
}
.bi-search-input::placeholder { color: #aaaaa0; }
.bi-search-clear {
background: transparent;
border: 0;
color: #8a8a82;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
padding: 0 0.25rem;
transition: color 0.2s ease;
}
.bi-search-clear:hover { color: var(--text-color, #2e2d29); }
.bi-empty {
grid-column: 1 / -1;
background: #fafaf6;
border: 1px dashed #d8d8c8;
border-radius: 12px;
padding: 2rem 1.5rem;
text-align: center;
color: #6a6a62;
font-size: 0.95rem;
}
/* ----- Filter pills ----- */
.bi-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bi-filter {
background: transparent;
border: 1.5px solid #d8d8c8;
color: #5a5a52;
font-family: inherit;
font-size: 0.92rem;
font-weight: 500;
padding: 0.55rem 1.1rem;
border-radius: 999px;
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0.01em;
}
.bi-filter:hover {
border-color: var(--text-color, #2e2d29);
color: var(--text-color, #2e2d29);
}
.bi-filter.is-active {
background: var(--text-color, #2e2d29);
color: #fff;
border-color: var(--text-color, #2e2d29);
}
/* ----- Card grid ----- */
.bi-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem 1.5rem;
}
.bi-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 12px -4px rgba(46, 45, 41, 0.08);
transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
border: 1px solid #ececdf;
}
.bi-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 50px -20px rgba(46, 45, 41, 0.25);
border-color: transparent;
}
.bi-card-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.bi-card-media {
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f0f0e8;
position: relative;
}
.bi-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.55s cubic-bezier(.2,.8,.2,1);
}
.bi-card:hover .bi-card-media img {
transform: scale(1.06);
}
.bi-card-body {
padding: 1.5rem 1.5rem 1.4rem;
display: flex;
flex-direction: column;
flex: 1;
position: relative;
}
/* ----- Category tags ----- */
.bi-card-tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.32rem 0.7rem;
border-radius: 4px;
margin-bottom: 0.85rem;
width: fit-content;
}
.bi-tag-solution {
background: rgba(195, 229, 2, 0.18);
color: #4a5e02;
}
.bi-tag-succes {
background: rgba(46, 45, 41, 0.08);
color: var(--text-color, #2e2d29);
}
.bi-tag-nouvelles {
background: rgba(120, 100, 200, 0.12);
color: #5a4d96;
}
.bi-card-title {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.35;
color: var(--text-color, #2e2d29);
margin: 0 0 0.85rem;
letter-spacing: -0.005em;
transition: color 0.25s ease;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bi-card:hover .bi-card-title {
color: #4a5e02;
}
.bi-card-meta {
margin-top: auto;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
color: #8a8a82;
}
.bi-meta-sep {
opacity: 0.5;
}
.bi-card-arrow {
position: absolute;
right: 1.5rem;
bottom: 1.4rem;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
.bi-card:hover .bi-card-arrow {
opacity: 1;
transform: translateX(0);
}
/* ----- Footer CTA ----- */
.bi-footer-cta {
margin: 4rem auto 0;
text-align: center;
padding: 3rem 2rem;
background: var(--text-color, #2e2d29);
border-radius: 18px;
color: #fff;
max-width: 720px;
}
.bi-footer-cta p {
font-size: 1.2rem;
margin: 0 0 1.5rem;
color: #ececdf;
}
.bi-footer-cta .hero-btn {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
}
/* ----- Tablet ----- */
@media (max-width: 1024px) {
.bi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bi-hero-link {
grid-template-columns: 1fr;
min-height: auto;
}
.bi-hero-media {
aspect-ratio: 16 / 9;
}
.bi-hero-body {
padding: 2rem 2rem 2.25rem;
}
}
/* ----- Mobile ----- */
@media (max-width: 640px) {
.blog-index-section {
padding: 2.5rem 0 3.5rem;
}
.bi-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.bi-card-body {
padding: 1.25rem 1.25rem 1.2rem;
}
.bi-hero {
margin-bottom: 2rem;
}
.bi-hero-body {
padding: 1.75rem 1.5rem 2rem;
}
.bi-hero-meta {
flex-direction: column;
align-items: flex-start;
}
.bi-filters {
gap: 0.4rem;
margin-bottom: 2rem;
}
.bi-filter {
font-size: 0.85rem;
padding: 0.45rem 0.9rem;
}
.bi-footer-cta {
margin-top: 2.5rem;
padding: 2rem 1.5rem;
}
}
/* ===================================================================
CALENDLY embed (/demo)
=================================================================== */
.calendly-section {
max-width: 1024px;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 18px 50px -20px rgba(46, 45, 41, 0.18);
background: #fff;
}
.calendly-inline-widget { border: 0; }
@media (max-width: 640px) {
.calendly-inline-widget {
height: 980px !important;
}
}
/* ===================================================================
VIRI Viridem assistant chatbot (scripted)
=================================================================== */
#viri {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 9990;
font-family: var(--body-font, system-ui, sans-serif);
}
#viri-launcher {
position: relative;
width: 64px;
height: 64px;
border-radius: 50%;
border: 0;
background: var(--text-color, #2e2d29);
box-shadow: 0 14px 36px -10px rgba(46, 45, 41, 0.45), 0 0 0 0 rgba(195, 229, 2, 0.45);
cursor: pointer;
padding: 0;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
animation: viriIdle 4.5s infinite ease-in-out;
}
#viri-launcher:hover { transform: translateY(-4px) scale(1.05); }
#viri-launcher svg,
#viri-launcher .viri-octopus {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
pointer-events: none;
}
.viri-launcher-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--primary-color, #c3e502);
opacity: 0;
animation: viriPulse 3.2s infinite ease-out;
pointer-events: none;
}
@keyframes viriPulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.55); opacity: 0; }
}
@keyframes viriIdle {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
#viri-launcher { animation: none; }
.viri-launcher-pulse { animation: none; }
}
.viri-launcher-label {
position: absolute;
bottom: -6px;
right: -6px;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
border-radius: 999px;
box-shadow: 0 4px 10px -2px rgba(46, 45, 41, 0.35);
}
#viri.viri-open #viri-launcher {
transform: scale(0.85) rotate(-6deg);
}
#viri-panel {
position: absolute;
bottom: 84px;
right: 0;
width: 380px;
max-width: calc(100vw - 2rem);
height: 560px;
/* Le panneau part a 84px au-dessus du lanceur, lui-meme a 1.5rem du bas.
En px volontairement : la racine du site est a 12px, donc des rem ici
sous-estimeraient la place occupee. 84 + 24 + 16px de marge haute. */
max-height: calc(100vh - 124px);
max-height: calc(100dvh - 124px);
background: #fff;
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 30px 80px -20px rgba(46, 45, 41, 0.45);
transform-origin: bottom right;
animation: viriPanelIn 0.28s cubic-bezier(.2,.8,.2,1);
}
/* The HTML "hidden" attribute must beat display:flex above. */
#viri-panel[hidden] { display: none !important; }
#viri[hidden] { display: none !important; }
@keyframes viriPanelIn {
from { transform: scale(0.8) translateY(20px); opacity: 0; }
to { transform: none; opacity: 1; }
}
.viri-head {
background: linear-gradient(135deg, var(--text-color, #2e2d29) 0%, #1f1e1c 100%);
color: #fff;
padding: 1rem 1rem 0.95rem 1rem;
display: grid;
grid-template-columns: 44px 1fr 32px;
align-items: center;
gap: 0.85rem;
}
.viri-head-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(195, 229, 2, 0.12);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(195, 229, 2, 0.4);
}
.viri-head-avatar svg,
.viri-head-avatar img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; }
.viri-head-text { display: flex; flex-direction: column; line-height: 1.2; }
.viri-head-text strong { font-size: 1rem; letter-spacing: 0.03em; }
.viri-status {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 2px;
}
.viri-status::before {
content: "";
width: 7px;
height: 7px;
background: var(--primary-color, #c3e502);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(195, 229, 2, 0.7);
animation: viriStatusPulse 1.8s infinite;
}
@keyframes viriStatusPulse {
0% { box-shadow: 0 0 0 0 rgba(195, 229, 2, 0.7); }
100% { box-shadow: 0 0 0 8px rgba(195, 229, 2, 0); }
}
#viri-close {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 0;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 1.4rem;
line-height: 1;
transition: background 0.2s ease;
}
#viri-close:hover { background: rgba(255, 255, 255, 0.18); }
/* VIRI search bar : sits between the header and the conversation log */
.viri-search-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 0.85rem;
background: #fff;
border-bottom: 1px solid rgba(46, 45, 41, 0.08);
position: relative;
}
.viri-search-icon {
width: 16px;
height: 16px;
color: #6a6a5f;
flex-shrink: 0;
}
.viri-search-input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 0.9rem;
color: var(--text-color, #2e2d29);
padding: 0.3rem 0;
font-family: inherit;
}
.viri-search-input::placeholder { color: #9a9a90; }
.viri-search-input:focus { color: var(--text-color, #2e2d29); }
.viri-search-bar:focus-within {
background: #fafaf3;
box-shadow: inset 0 -2px 0 var(--primary-color, #c3e502);
}
.viri-search-clear {
background: rgba(46, 45, 41, 0.08);
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
color: #4a4a42;
cursor: pointer;
font-size: 1rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.2s ease;
}
.viri-search-clear:hover { background: rgba(46, 45, 41, 0.18); }
.viri-conversation {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 1.1rem 1rem 1rem;
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.viri-msg {
display: flex;
max-width: 88%;
animation: viriMsgIn 0.25s ease-out;
}
@keyframes viriMsgIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.viri-msg-bot { align-self: flex-start; }
.viri-msg-user { align-self: flex-end; }
.viri-bubble {
padding: 0.65rem 0.95rem;
border-radius: 16px;
font-size: 0.92rem;
line-height: 1.5;
}
.viri-msg-bot .viri-bubble {
background: #fff;
color: var(--text-color, #2e2d29);
border: 1px solid rgba(46, 45, 41, 0.08);
border-bottom-left-radius: 4px;
}
.viri-msg-user .viri-bubble {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
font-weight: 600;
border-bottom-right-radius: 4px;
}
.viri-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-self: flex-start;
max-width: 100%;
margin-top: 0.2rem;
}
.viri-chip {
background: #fff;
border: 1.5px solid #e0e0d0;
color: var(--text-color, #2e2d29);
font: inherit;
font-size: 0.83rem;
font-weight: 600;
padding: 0.42rem 0.85rem;
border-radius: 999px;
cursor: pointer;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.viri-chip:hover {
border-color: var(--text-color, #2e2d29);
background: var(--text-color, #2e2d29);
color: #fff;
transform: translateY(-1px);
}
.viri-chip-primary {
background: var(--primary-color, #c3e502);
border-color: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
}
.viri-chip-primary:hover {
background: var(--text-color, #2e2d29);
color: var(--primary-color, #c3e502);
border-color: var(--text-color, #2e2d29);
}
.viri-chip-secondary {
background: transparent;
border-color: #d0d0c0;
}
.viri-links {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin-top: 0.1rem;
align-self: flex-start;
width: 100%;
}
.viri-link {
display: inline-flex;
align-items: center;
background: rgba(46, 45, 41, 0.04);
border-left: 3px solid var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
text-decoration: none;
padding: 0.55rem 0.85rem;
border-radius: 4px;
font-size: 0.88rem;
font-weight: 600;
transition: background 0.2s ease, transform 0.2s ease;
}
.viri-link::after {
content: " →";
margin-left: auto;
color: rgba(46, 45, 41, 0.5);
font-weight: 700;
transition: transform 0.2s ease, color 0.2s ease;
}
.viri-link:hover {
background: rgba(195, 229, 2, 0.18);
transform: translateX(3px);
}
.viri-link:hover::after {
color: var(--text-color, #2e2d29);
transform: translateX(2px);
}
.viri-followup {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
margin-top: 0.6rem;
padding-top: 0.7rem;
border-top: 1px dashed rgba(46, 45, 41, 0.12);
}
.viri-foot {
background: #fafaf6;
border-top: 1px solid rgba(46, 45, 41, 0.06);
color: #8a8a82;
font-size: 0.72rem;
padding: 0.6rem 1rem;
text-align: center;
line-height: 1.4;
}
.viri-foot-link {
color: var(--text-color, #2e2d29);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.2s ease;
}
.viri-foot-link:hover,
.viri-foot-link:focus-visible {
text-decoration-color: var(--primary-color, #c3e502);
text-decoration-thickness: 2px;
}
@media (max-width: 480px) {
#viri { bottom: 1rem; right: 1rem; }
#viri-panel {
width: calc(100vw - 1.5rem);
right: -0.25rem;
bottom: 78px;
height: 80vh;
max-height: calc(100vh - 112px);
max-height: calc(100dvh - 112px);
}
}
/* Ecrans courts (< 665px de haut) : on compacte l'entete, la barre de
recherche et le pied pour laisser un maximum de place aux messages. */
@media (max-height: 665px) {
#viri-launcher { width: 56px; height: 56px; }
#viri-panel {
bottom: 72px;
max-height: calc(100vh - 112px);
max-height: calc(100dvh - 112px);
}
.viri-head {
padding: 0.7rem 1rem 0.65rem 1rem;
grid-template-columns: 38px 1fr 30px;
gap: 0.65rem;
}
.viri-head-avatar { width: 38px; height: 38px; }
.viri-head-avatar svg,
.viri-head-avatar img { width: 34px; height: 34px; }
.viri-conversation { padding: 0.8rem 1rem 0.8rem; }
.viri-foot { padding: 0.45rem 1rem; font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) {
#viri-launcher,
.viri-launcher-pulse,
.viri-status::before { animation: none; }
}
/* ===================================================================
DEMO PAGE push / pull marketing block under Calendly
=================================================================== */
.demo-pp {
max-width: 1240px;
margin: 3rem auto 0;
padding: 0 1.5rem;
}
.demo-pp-head {
text-align: center;
max-width: 760px;
margin: 0 auto 2.5rem;
}
.demo-pp-eyebrow {
display: inline-block;
color: var(--primary-color, #c3e502);
background: var(--text-color, #2e2d29);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.34rem 0.95rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.demo-pp-head h2 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
color: var(--text-color, #2e2d29);
line-height: 1.2;
letter-spacing: -0.018em;
margin: 0 0 0.85rem;
}
.demo-pp-head p {
font-size: 1.05rem;
line-height: 1.65;
color: #4a4a42;
margin: 0;
}
.demo-pp-grid {
display: grid;
grid-template-columns: 1fr 90px 1fr;
gap: 1.25rem;
align-items: stretch;
margin-bottom: 3rem;
}
.demo-pp-col {
border-radius: 18px;
padding: 1.85rem 1.75rem 1.6rem;
border: 1px solid;
position: relative;
overflow: hidden;
}
.demo-pp-pain {
background: linear-gradient(160deg, #2e2d29 0%, #1f1e1c 100%);
color: #fff;
border-color: rgba(255, 255, 255, 0.06);
}
.demo-pp-pain::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(196, 81, 74, 0.10) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.demo-pp-solution {
background: linear-gradient(160deg, #ffffff 0%, #fafff0 100%);
color: var(--text-color, #2e2d29);
border-color: rgba(195, 229, 2, 0.4);
box-shadow: 0 18px 40px -22px rgba(195, 229, 2, 0.45);
}
.demo-pp-solution::before {
content: "";
position: absolute;
bottom: -120px;
left: -100px;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(195, 229, 2, 0.12) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.demo-pp-tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.28rem 0.8rem;
border-radius: 999px;
margin-bottom: 1.1rem;
position: relative;
}
.demo-pp-pain .demo-pp-tag {
color: #ff8a82;
background: rgba(196, 81, 74, 0.14);
border: 1px solid rgba(196, 81, 74, 0.35);
}
.demo-pp-solution .demo-pp-tag {
color: #4a5e02;
background: rgba(195, 229, 2, 0.22);
border: 1px solid rgba(195, 229, 2, 0.55);
}
.demo-pp-col ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.demo-pp-col li {
padding: 0.65rem 0 0.65rem 1.85rem;
line-height: 1.5;
font-size: 0.93rem;
position: relative;
border-bottom: 1px solid;
}
.demo-pp-col li:last-child { border-bottom: none; }
.demo-pp-pain li {
color: rgba(255, 255, 255, 0.78);
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.demo-pp-pain li::before {
content: "✕";
position: absolute;
left: 0;
top: 0.65rem;
color: #ff8a82;
font-weight: 800;
font-size: 0.95rem;
}
.demo-pp-pain li strong { color: #fff; }
.demo-pp-solution li {
color: #4a4a42;
border-bottom-color: rgba(46, 45, 41, 0.06);
}
.demo-pp-solution li::before {
content: "";
position: absolute;
left: 0;
top: 0.55rem;
width: 22px;
height: 22px;
background: url('/images/viridem-logo-icon.png') no-repeat center / contain;
}
.demo-pp-solution li strong { color: var(--text-color, #2e2d29); }
.demo-pp-arrow {
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: #a8c800; /* flèche >>> en vert Viridem (user 2026-07-08) */
}
.demo-pp-arrow::before,
.demo-pp-arrow::after {
display: none; /* trait vert derrière la flèche retiré (user 2026-07-08) */
}
.demo-pp-arrow img {
width: 44px;
height: 44px;
background: var(--primary-color, #c3e502);
border-radius: 50%;
padding: 6px;
box-shadow: 0 6px 18px -4px rgba(195, 229, 2, 0.55);
z-index: 1;
position: relative;
}
/* Explore links */
.demo-pp-explore {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
border: 1px solid rgba(46, 45, 41, 0.06);
border-radius: 22px;
padding: 2.5rem 2rem 2.25rem;
margin-bottom: 2.5rem;
}
.demo-pp-explore h3 {
text-align: center;
color: var(--text-color, #2e2d29);
font-size: 1.4rem;
margin: 0 0 0.6rem;
letter-spacing: -0.015em;
}
.demo-pp-explore > p {
text-align: center;
color: #555550;
font-size: 0.98rem;
max-width: 540px;
margin: 0 auto 2rem;
}
.demo-pp-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.demo-pp-link {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 1.15rem 1.25rem;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 14px;
text-decoration: none;
color: var(--text-color, #2e2d29);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.demo-pp-link:hover {
transform: translateY(-3px);
border-color: var(--primary-color, #c3e502);
box-shadow: 0 18px 36px -18px rgba(195, 229, 2, 0.4);
}
.demo-pp-link-num {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(195, 229, 2, 0.18);
color: #4a5e02;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.85rem;
}
.demo-pp-link strong { display: block; font-weight: 700; font-size: 0.96rem; }
.demo-pp-link span:not(.demo-pp-link-num):not(.demo-pp-link-arrow) {
display: block;
font-size: 0.84rem;
color: #6a6a62;
margin-top: 0.15rem;
}
.demo-pp-link-arrow {
margin-left: auto;
color: var(--primary-color, #c3e502);
font-weight: 800;
transition: transform 0.2s ease;
}
.demo-pp-link:hover .demo-pp-link-arrow {
transform: translateX(3px);
}
/* Quote */
.demo-pp-quote {
text-align: center;
max-width: 760px;
margin: 0 auto 2.5rem;
padding: 1.5rem 1.75rem;
border-left: 4px solid var(--primary-color, #c3e502);
background: rgba(195, 229, 2, 0.06);
border-radius: 4px 14px 14px 4px;
}
.demo-pp-quote p {
font-size: 1.05rem;
line-height: 1.65;
color: var(--text-color, #2e2d29);
margin: 0 0 0.6rem;
font-style: italic;
}
.demo-pp-quote cite {
color: #6a6a62;
font-size: 0.88rem;
font-style: normal;
letter-spacing: 0.04em;
}
/* Final */
.demo-pp-final {
text-align: center;
background: linear-gradient(135deg, var(--text-color, #2e2d29) 0%, #1a1a18 100%);
color: #fff;
border-radius: 18px;
padding: 2.5rem 2rem 2.25rem;
}
.demo-pp-final p {
font-size: 1.1rem;
margin: 0 0 1.25rem;
color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 900px) {
.demo-pp-grid {
grid-template-columns: 1fr;
}
.demo-pp-arrow {
height: 60px;
transform: rotate(90deg);
}
.demo-pp-links {
grid-template-columns: 1fr;
}
}
/* ===================================================================
PRICING TIERS Foundation vs Complete (high-level B2B comparison)
=================================================================== */
.pricing-tiers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
max-width: 1080px;
margin: 2rem auto 0;
}
.pricing-tier {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 18px;
padding: 2rem 1.85rem 1.85rem;
position: relative;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pricing-tier:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px -22px rgba(46, 45, 41, 0.22);
}
.pricing-tier-pro {
border-color: var(--primary-color, #c3e502);
box-shadow: 0 18px 40px -18px rgba(195, 229, 2, 0.45);
}
.pricing-tier-badge {
position: absolute;
top: -12px;
left: 1.85rem;
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.32rem 0.85rem;
border-radius: 999px;
}
.pricing-tier-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.pricing-tier-name {
font-size: 1.4rem;
font-weight: 800;
color: var(--text-color, #2e2d29);
letter-spacing: -0.01em;
}
.pricing-tier-tag {
font-size: 0.78rem;
color: #4a5e02;
background: rgba(195, 229, 2, 0.18);
padding: 0.22rem 0.6rem;
border-radius: 4px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* /tarification minimaliste redirect vers calculateur ROI (user 2026-05-20) */
.tarif-redirect {
max-width: 720px;
margin: 0 auto;
text-align: center;
padding: 3rem 1.5rem 4rem;
}
.tarif-redirect .tarif-eyebrow {
display: inline-block;
color: var(--primary-color, #c3e502);
background: var(--text-color, #2e2d29);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.32rem 0.85rem;
border-radius: 999px;
margin-bottom: 1.25rem;
}
.tarif-redirect h1 {
font-size: clamp(1.7rem, 3vw, 2.3rem);
line-height: 1.2;
margin: 0 0 1rem;
color: var(--text-color, #2e2d29);
}
.tarif-redirect > p {
color: #4a4a42;
font-size: 1.05rem;
line-height: 1.65;
margin: 0 auto 1.75rem;
max-width: 640px;
}
.tarif-redirect-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.tarif-redirect-secondary {
align-self: center;
color: var(--text-color, #2e2d29);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: rgba(46, 45, 41, 0.30);
font-weight: 600;
font-size: 0.95rem;
}
.tarif-redirect-secondary:hover { text-decoration-color: var(--primary-color, #c3e502); }
/* Tarif range badge : "À partir de 950 $ CAD / mois" */
.tarif-range {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 0.55rem;
margin: 0 auto 1.75rem;
padding: 1rem 1.6rem;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.14) 0%, rgba(195, 229, 2, 0.04) 100%);
border: 1px solid rgba(195, 229, 2, 0.45);
border-radius: 14px;
}
.tarif-range-prefix {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 800;
color: #4a5e02;
}
.tarif-range-amount {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 2rem;
font-weight: 900;
line-height: 1;
color: var(--text-color, #2e2d29);
}
.tarif-range-currency {
font-size: 0.95rem;
color: #6a6a62;
font-weight: 700;
}
.tarif-range-suffix {
font-size: 0.92rem;
color: #555550;
font-weight: 600;
}
.tarif-range-foot {
margin: 1.75rem 0 0;
font-size: 0.85rem;
color: #6a6a62;
font-style: italic;
}
@media (max-width: 600px) {
.tarif-range { flex-direction: column; gap: 0.35rem; padding: 1rem 1.2rem; }
.tarif-range-suffix { font-size: 0.85rem; }
}
/* Pricing tiers : single-card layout when only Complete is shown */
.pricing-tiers.pricing-tiers-single {
grid-template-columns: 1fr;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* "À partir de X documents par mois" anchor line above each tier pitch */
.pricing-tier-priceline {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.45rem;
margin: 0 0 0.75rem;
}
.pricing-tier-prefix {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 800;
color: var(--text-color, #2e2d29);
opacity: 0.55;
}
.pricing-tier-anchor {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.05rem;
font-weight: 800;
color: var(--text-color, #2e2d29);
border-bottom: 2px solid var(--primary-color, #c3e502);
padding-bottom: 1px;
}
.pricing-tier-pitch {
color: #555550;
font-size: 0.95rem;
line-height: 1.55;
margin: 0 0 1.25rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid rgba(46, 45, 41, 0.06);
}
.pricing-tier-list {
list-style: none;
margin: 0;
padding: 0;
}
.pricing-tier-list li {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.55rem 0;
color: var(--text-color, #2e2d29);
font-size: 0.93rem;
line-height: 1.5;
}
.tier-mark {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.82rem;
}
.tier-yes .tier-mark {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
}
.tier-no .tier-mark {
background: rgba(46, 45, 41, 0.08);
color: #aaaaa0;
}
.tier-no { color: #aaaaa0; }
.pricing-tiers-foot {
max-width: 1080px;
margin: 1.75rem auto 0;
color: #555550;
font-size: 0.94rem;
line-height: 1.65;
text-align: center;
font-style: italic;
}
@media (max-width: 760px) {
.pricing-tiers { grid-template-columns: 1fr; }
}
/* ===================================================================
EVENTS PAGE clean B2B empty state
=================================================================== */
.events-page {
max-width: 1240px;
margin: 2rem auto 0;
padding: 0 1.5rem;
}
.events-hero {
background: linear-gradient(135deg, var(--text-color, #2e2d29) 0%, #1f1e1c 100%);
color: #fff;
border-radius: 22px;
padding: 3.5rem 2.5rem 3.25rem;
text-align: center;
margin-bottom: 2.5rem;
position: relative;
overflow: hidden;
}
.events-hero::before {
content: "";
position: absolute;
top: -160px;
right: -160px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(195, 229, 2, 0.16) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.events-eyebrow {
display: inline-block;
color: var(--primary-color, #c3e502);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.35rem 0.95rem;
border: 1px solid rgba(195, 229, 2, 0.4);
border-radius: 999px;
margin-bottom: 1.1rem;
background: rgba(195, 229, 2, 0.06);
}
.events-hero h2,
.events-hero h1,
.events-hero .events-h1 {
color: #fff;
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
line-height: 1.15;
margin: 0 0 1rem;
letter-spacing: -0.02em;
}
.events-hero p {
color: rgba(255, 255, 255, 0.78);
font-size: 1.05rem;
line-height: 1.65;
max-width: 680px;
margin: 0 auto 1.75rem;
}
.events-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.events-link {
color: rgba(255, 255, 255, 0.85);
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.events-link:hover { color: var(--primary-color, #c3e502); }
/* ===== Events search bar (user 2026-05-21) ===== */
.events-search-bar {
position: relative;
display: flex;
align-items: center;
max-width: 720px;
margin: 2rem auto 0;
background: #FFFFFF;
border: 1px solid rgba(46, 45, 41, 0.14);
border-radius: 999px;
padding: 0.7rem 1.3rem;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.events-search-bar:focus-within {
border-color: rgba(74, 94, 2, 0.55);
box-shadow: 0 6px 26px rgba(195, 229, 2, 0.22);
}
.events-search-icon { width: 18px; height: 18px; color: #6a6a62; flex-shrink: 0; margin-right: 0.7rem; }
.events-search-input {
flex: 1; border: 0; outline: 0; background: transparent;
font-family: var(--body-font, inherit); font-size: 0.95rem; color: #2e2d29;
}
.events-search-input::placeholder { color: #888880; }
.events-search-clear {
background: transparent; border: 0; color: #6a6a62;
font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.4rem;
}
.events-search-clear:hover { color: #2e2d29; }
.events-search-empty {
text-align: center; margin: 1.2rem auto 0; max-width: 720px;
color: #888880; font-size: 0.9rem; font-style: italic;
}
@media (max-width: 700px) {
.events-search-bar { margin: 1.4rem 1rem 0; padding: 0.6rem 1rem; }
.events-search-input { font-size: 0.9rem; }
}
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.1rem;
margin-bottom: 3rem;
}
.events-card {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 14px;
padding: 1.6rem 1.5rem 1.4rem;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.events-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 44px -22px rgba(46, 45, 41, 0.22);
border-color: rgba(195, 229, 2, 0.5);
}
.events-card-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(195, 229, 2, 0.18);
color: #4a5e02;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.events-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-color, #2e2d29);
margin: 0 0 0.5rem;
}
.events-card p {
font-size: 0.92rem;
line-height: 1.55;
color: #555550;
margin: 0;
}
.events-newsletter {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 18px;
padding: 2.5rem 2rem 2.25rem;
text-align: center;
margin-bottom: 2rem;
}
.events-newsletter h3 {
font-size: 1.4rem;
margin: 0 0 0.6rem;
color: var(--text-color, #2e2d29);
}
.events-newsletter p {
color: #555550;
line-height: 1.6;
max-width: 560px;
margin: 0 auto 1.5rem;
}
@media (max-width: 640px) {
.events-hero { padding: 2.5rem 1.5rem 2.25rem; }
.events-card { padding: 1.4rem 1.3rem 1.25rem; }
}
/* === Home human moment : team photo + warm message === */
.section-custom.home-human-section {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
padding: 4.5rem 0;
}
.section-custom.home-human-section .section-title,
.section-custom.home-human-section .section-subtitle { display: none; }
.home-human {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 3rem;
align-items: center;
}
.home-human-photo {
margin: 0;
position: relative;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 30px 70px -28px rgba(46, 45, 41, 0.30);
}
.home-human-photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center 22%;
}
.home-human-photo figcaption {
position: absolute;
bottom: 14px;
left: 14px;
background: rgba(31, 30, 28, 0.85);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
padding: 0.4rem 0.85rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.home-human-photo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
box-shadow: 0 0 0 4px rgba(195, 229, 2, 0.18);
}
.home-human-text { display: flex; flex-direction: column; gap: 0.85rem; }
.home-human-eyebrow {
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 800;
font-size: 0.78rem;
color: #4a5e02;
background: rgba(195, 229, 2, 0.16);
padding: 0.4rem 0.85rem;
border-radius: 999px;
align-self: flex-start;
}
.home-human-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.6rem, 3vw, 2.1rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--text-color, #2e2d29);
margin: 0;
}
.home-human-lead {
font-size: 1.02rem;
line-height: 1.65;
color: #4a4a42;
margin: 0;
}
@media (max-width: 860px) {
.home-human { grid-template-columns: 1fr; gap: 1.75rem; }
}
/* === Home events section : "Viridem sur le terrain" === */
.section-custom.home-events-section {
background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
}
.home-events { max-width: 1240px; margin: 1rem auto 0; }
.home-events .events-cols {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.2rem;
margin: 1.5rem 0 2rem;
}
.home-events .event-col-shaft { padding: 1.25rem 1.1rem 1.15rem; }
.home-events .event-col-title { font-size: 1.02rem; }
.home-events .event-col-desc { display: none; } /* keep the column compact on home, full text lives on /evenement */
.home-events-cta {
text-align: center;
margin-top: 0.5rem;
}
/* === Events as Greek columns (events page) === */
.events-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin: 2rem 0 3rem;
align-items: stretch;
}
/* Event cards refondues 2026-05-20 : design moderne plus compact, plus pro,
au lieu des colonnes grecques imposantes. 57 cartes deviennent supportables. */
/* user 2026-06-10 : description événement masquée par défaut, apparaît au survol */
.event-col-summary-wrap {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.25s ease, margin-top 0.25s ease;
margin-top: 0;
}
.event-col-summary { margin: 0; font-size: 0.92rem; line-height: 1.55; color: #4a4a42; }
.event-col:hover .event-col-summary-wrap,
.event-col:focus-within .event-col-summary-wrap,
.event-col.is-open .event-col-summary-wrap {
max-height: 400px;
opacity: 1;
margin-top: 0.6rem;
}
.event-col {
display: flex;
flex-direction: column;
align-items: stretch;
text-decoration: none;
color: inherit;
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-left: 4px solid rgba(46, 45, 41, 0.20);
border-radius: 10px;
overflow: hidden;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1),
box-shadow 0.25s ease,
border-left-color 0.25s ease;
box-shadow: 0 4px 14px -10px rgba(46, 45, 41, 0.18);
}
.event-col:hover {
transform: translateY(-3px);
border-left-color: var(--primary-color, #c3e502);
box-shadow: 0 22px 40px -22px rgba(46, 45, 41, 0.25),
0 6px 12px -8px rgba(46, 45, 41, 0.12);
}
.event-col-upcoming { border-left-color: var(--primary-color, #c3e502); }
.event-col-past { border-left-color: rgba(46, 45, 41, 0.20); }
/* Anciennes cap/base de la colonne grecque : repliées en simples accents */
.event-col-cap,
.event-col-base { display: none; }
.event-col-shaft {
flex: 1;
padding: 1.1rem 1.2rem 1.2rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
position: relative;
}
.event-col-cat {
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 800;
font-size: 0.66rem;
color: #4a5e02;
background: rgba(195, 229, 2, 0.18);
border-radius: 999px;
padding: 0.3rem 0.65rem;
align-self: flex-start;
}
/* Statut « Viridem y sera / y a participé » au-dessus de la catégorie */
.event-col-status {
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 800;
font-size: 0.62rem;
padding: 0.22rem 0.55rem;
border-radius: 4px;
align-self: flex-start;
margin-bottom: 0.35rem;
}
.event-col-upcoming .event-col-status {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
}
.event-col-past .event-col-status {
background: rgba(46, 45, 41, 0.08);
color: #6a6a62;
}
.event-col-date {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
font-size: 0.95rem;
color: var(--text-color, #2e2d29);
}
.event-col-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.15rem;
font-weight: 800;
line-height: 1.25;
margin: 0;
color: var(--text-color, #2e2d29);
}
.event-col-place {
font-size: 0.85rem;
color: #4a5e02;
font-weight: 600;
margin: 0 0 0.3rem;
}
/* Lien "En savoir plus" sur les cartes événement (user 2026-05-21) */
.event-col-link {
display: inline-block;
margin-top: 0.7rem;
font-size: 0.82rem;
font-weight: 700;
color: #4a5e02;
text-decoration: none;
padding: 0.35rem 0.7rem;
border: 1px solid rgba(74, 94, 2, 0.30);
border-radius: 999px;
background: rgba(195, 229, 2, 0.10);
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.event-col-link:hover,
.event-col-link:focus-visible {
background: var(--primary-color, #c3e502);
color: #2e2d29;
transform: translateY(-1px);
}
.event-col-desc {
font-size: 0.88rem;
line-height: 1.55;
color: #4a4a42;
margin: 0 0 0.4rem;
flex: 1;
}
.event-col-link {
color: #4a5e02;
font-weight: 700;
font-size: 0.88rem;
text-decoration: none;
margin-top: auto;
transition: transform 0.2s ease, color 0.2s ease;
}
.event-col-link:hover {
color: #2e2d29;
transform: translateX(3px);
}
/* ============================================================
RH + OPÉRATIONS Human-first funnel (neuromarketing layer)
Soft tunnel, dual-perspective, lots of human imagery, single dominant CTA at the bottom.
Used on /ressources-humaines AND /operation pages with shared .hr-* classes.
============================================================ */
/* Override : on these pages the sol-hero section is replaced by .hr-hero with photo right */
.section-custom.sol-hero-section .hr-hero,
.section-custom.sol-hero-section .op-hero { display: grid; }
.section-custom.sol-hero-section:has(.hr-hero) {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
padding: 4.5rem 0 5rem;
}
.section-custom.sol-hero-section:has(.hr-hero) .section-title,
.section-custom.sol-hero-section:has(.hr-hero) .section-subtitle { display: none; }
.hr-hero {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3rem;
align-items: center;
}
.hr-hero-text { display: flex; flex-direction: column; gap: 1.1rem; }
.hr-hero-eyebrow {
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 800;
font-size: 0.78rem;
color: #4a5e02;
background: rgba(195, 229, 2, 0.14);
padding: 0.4rem 0.85rem;
border-radius: 999px;
align-self: flex-start;
}
.hr-hero-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.7rem, 3.3vw, 2.5rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.015em;
color: var(--text-color, #2e2d29);
margin: 0;
}
.hr-hero-title em {
font-style: italic;
color: #4a5e02;
font-weight: 800;
}
.hr-hero-lead {
font-size: 1.04rem;
line-height: 1.7;
color: #4a4a42;
margin: 0;
max-width: 580px;
}
.hr-hero-lead strong { color: var(--text-color, #2e2d29); font-weight: 700; }
/* Small inline CTAs at top neuromarketing : low-commitment options */
.hr-hero-mini-cta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
font-size: 0.88rem;
color: #6a6a62;
margin-top: 0.5rem;
}
.hr-mini-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: #4a5e02;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease;
}
.hr-mini-link:hover { color: #2e2d29; }
.hr-mini-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
box-shadow: 0 0 0 3px rgba(195, 229, 2, 0.18);
}
.hr-mini-secondary {
color: #6a6a62;
border-bottom: 1px dashed rgba(46, 45, 41, 0.25);
}
.hr-hero-sep { color: rgba(46, 45, 41, 0.25); }
/* Hero photo : warm, large, human */
.hr-hero-photo {
margin: 0;
position: relative;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 38px 80px -28px rgba(46, 45, 41, 0.32);
}
.hr-hero-photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.hr-hero-photo figcaption {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(31, 30, 28, 0.85);
color: #fff;
font-size: 0.82rem;
font-weight: 600;
padding: 0.5rem 0.95rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 0.55rem;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hr-hero-photo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
box-shadow: 0 0 0 4px rgba(195, 229, 2, 0.18);
}
@media (max-width: 920px) {
.hr-hero { grid-template-columns: 1fr; gap: 2rem; }
.hr-hero-photo { order: -1; }
}
/* --- DUAL PERSPECTIVE (DRH vs CEO, Chef de projet vs Dirigeant) --- */
.section-custom.hr-dual-section,
.section-custom.op-dual-section {
background: #fafaf6;
padding: 4rem 0 4.5rem;
}
.hr-dual {
max-width: 1240px;
margin: 1rem auto 0;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.hr-dual-card {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 18px;
padding: 2rem 1.8rem 1.8rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hr-dual-card:hover {
transform: translateY(-4px);
box-shadow: 0 30px 60px -28px rgba(46, 45, 41, 0.24);
}
.hr-dual-head { display: flex; }
.hr-dual-tag {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.72rem;
font-weight: 800;
padding: 0.4rem 0.85rem;
border-radius: 999px;
}
.hr-dual-drh .hr-dual-tag {
color: #4a5e02;
background: rgba(195, 229, 2, 0.16);
}
.hr-dual-ceo .hr-dual-tag {
color: #1a2a4a;
background: rgba(26, 42, 74, 0.08);
}
.hr-dual-card blockquote {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.05rem;
line-height: 1.5;
color: var(--text-color, #2e2d29);
font-style: italic;
margin: 0;
padding: 0;
border: 0;
}
.hr-dual-card blockquote strong { font-style: normal; font-weight: 800; color: #4a5e02; }
.hr-dual-ceo blockquote strong { color: #1a2a4a; }
.hr-dual-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.hr-dual-list li {
position: relative;
padding-left: 1.5rem;
font-size: 0.92rem;
line-height: 1.55;
color: #4a4a42;
}
.hr-dual-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.5rem;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
box-shadow: 0 0 0 3px rgba(195, 229, 2, 0.18);
}
.hr-dual-ceo .hr-dual-list li::before {
background: #1a2a4a;
box-shadow: 0 0 0 3px rgba(26, 42, 74, 0.10);
}
.hr-dual-list strong { color: var(--text-color, #2e2d29); font-weight: 700; }
@media (max-width: 820px) {
.hr-dual { grid-template-columns: 1fr; gap: 1rem; }
}
/* --- POSITION block (GED comme cœur de métier + 4 stats aside) --- */
.section-custom.hr-position-section,
.section-custom.op-position-section {
background: linear-gradient(180deg, #ffffff 0%, rgba(195, 229, 2, 0.05) 100%);
padding: 4.5rem 0 5rem;
}
.section-custom.hr-position-section .section-title,
.section-custom.hr-position-section .section-subtitle,
.section-custom.op-position-section .section-title,
.section-custom.op-position-section .section-subtitle { display: none; }
.hr-position {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
}
.hr-position-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 3rem;
align-items: start;
}
.hr-position-text { display: flex; flex-direction: column; gap: 1.1rem; }
.hr-position-eyebrow {
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 800;
font-size: 0.78rem;
color: #4a5e02;
background: rgba(195, 229, 2, 0.14);
padding: 0.4rem 0.85rem;
border-radius: 999px;
align-self: flex-start;
}
.hr-position-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.5rem, 2.7vw, 2.05rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--text-color, #2e2d29);
margin: 0;
}
.hr-position-title em {
font-style: italic;
color: #4a5e02;
}
.hr-position-text p {
font-size: 1rem;
line-height: 1.7;
color: #4a4a42;
margin: 0;
}
.hr-position-text p strong { color: var(--text-color, #2e2d29); font-weight: 700; }
.hr-position-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.hr-position-list li {
position: relative;
padding-left: 1.5rem;
font-size: 0.95rem;
line-height: 1.6;
color: #4a4a42;
}
.hr-position-list li::before {
content: "→";
position: absolute;
left: 0;
top: 0;
color: #4a5e02;
font-weight: 800;
}
.hr-position-list strong { color: var(--text-color, #2e2d29); font-weight: 700; }
.hr-position-aside {
display: flex;
flex-direction: column;
gap: 0.7rem;
padding: 1.5rem 1.5rem 1.4rem;
background: linear-gradient(160deg, #1f1e1c 0%, #2e2d29 100%);
color: #fff;
border-radius: 18px;
border: 1px solid rgba(195, 229, 2, 0.22);
box-shadow: 0 26px 60px -28px rgba(46, 45, 41, 0.35);
}
.hr-position-stat {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hr-position-stat:last-child { border-bottom: none; }
.hr-position-stat span {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
font-size: 1.55rem;
color: var(--primary-color, #c3e502);
line-height: 1;
}
.hr-position-stat small {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.78);
line-height: 1.4;
font-weight: 500;
}
@media (max-width: 920px) {
.hr-position-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
/* --- HUMAN MOMENT (photo + quote) soft, warm, single column shift on mobile --- */
.section-custom.hr-human-section,
.section-custom.op-human-section {
background: #ffffff;
padding: 4rem 0 4.5rem;
}
.section-custom.hr-human-section .section-title,
.section-custom.hr-human-section .section-subtitle,
.section-custom.op-human-section .section-title,
.section-custom.op-human-section .section-subtitle { display: none; }
.hr-human {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 2.5rem;
align-items: center;
}
.hr-human-photo {
margin: 0;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 30px 70px -26px rgba(46, 45, 41, 0.30);
}
.hr-human-photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.hr-human-text { display: flex; flex-direction: column; gap: 0.8rem; }
.hr-human-eyebrow {
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 800;
font-size: 0.72rem;
color: #6a6a62;
}
.hr-human-quote {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.15rem, 2.1vw, 1.45rem);
font-weight: 600;
line-height: 1.45;
color: var(--text-color, #2e2d29);
margin: 0;
padding: 0;
font-style: italic;
border: 0;
}
.hr-human-quote strong { color: #4a5e02; font-weight: 800; font-style: normal; }
.hr-human-caption {
font-size: 0.85rem;
color: #6a6a62;
line-height: 1.5;
margin: 0;
}
@media (max-width: 820px) {
.hr-human { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* --- FINAL DOMINANT CTA single primary action, neuromarketing close --- */
.section-custom.sol-cta-section:has(.hr-final-cta),
.section-custom.sol-cta-section:has(.op-final-cta) {
padding: 0 !important;
background: transparent !important;
}
.section-custom.sol-cta-section:has(.hr-final-cta) .container,
.section-custom.sol-cta-section:has(.op-final-cta) .container { max-width: 100%; padding: 0; }
.hr-final-cta {
background:
radial-gradient(circle at 20% 20%, rgba(195, 229, 2, 0.16) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(195, 229, 2, 0.08) 0%, transparent 55%),
linear-gradient(135deg, #1f1e1c 0%, #2e2d29 50%, #1a1a17 100%);
color: #fff;
text-align: center;
padding: 5rem 2rem 5.5rem;
position: relative;
overflow: hidden;
}
.hr-final-cta-inner {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1rem;
position: relative;
z-index: 1;
}
.hr-final-cta-eyebrow {
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 800;
font-size: 0.78rem;
color: var(--primary-color, #c3e502);
background: rgba(195, 229, 2, 0.12);
border: 1px solid rgba(195, 229, 2, 0.32);
padding: 0.45rem 0.95rem;
border-radius: 999px;
}
.hr-final-cta-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.6rem, 3.2vw, 2.4rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.015em;
color: #fff;
margin: 0;
max-width: 640px;
}
.hr-final-cta-title em {
font-style: italic;
color: var(--primary-color, #c3e502);
font-weight: 800;
}
.hr-final-cta-lead {
font-size: 1.05rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.85);
margin: 0;
max-width: 580px;
}
.hr-final-cta-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
margin: 0.5rem 0 0;
}
/* Single dominant primary CTA (neuromarketing) */
.hr-final-cta-primary {
background: var(--primary-color, #c3e502);
color: var(--text-color, #2e2d29);
font-weight: 800;
font-size: 1.05rem;
padding: 1rem 2.25rem;
border-radius: 12px;
box-shadow:
0 0 0 6px rgba(195, 229, 2, 0.10),
0 18px 40px -16px rgba(195, 229, 2, 0.55);
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
}
.hr-final-cta-primary:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 8px rgba(195, 229, 2, 0.14),
0 22px 48px -16px rgba(195, 229, 2, 0.65);
}
.hr-final-cta-secondary {
color: rgba(255, 255, 255, 0.78);
font-weight: 600;
font-size: 0.92rem;
text-decoration: none;
border-bottom: 1px dashed rgba(255, 255, 255, 0.30);
padding-bottom: 2px;
transition: color 0.2s ease;
}
.hr-final-cta-secondary:hover { color: var(--primary-color, #c3e502); }
.hr-final-cta-meta {
margin-top: 0.85rem;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.55);
line-height: 1.5;
max-width: 540px;
}
@media (max-width: 640px) {
.hr-final-cta { padding: 3.5rem 1.25rem 4rem; }
.hr-final-cta-primary { width: 100%; text-align: center; padding: 0.95rem 1.5rem; }
}
/* ============================================================
COMPTABILITÉ : Clickable partner ERP badges (compta-partners-section)
============================================================ */
.section-custom.compta-partners-section {
background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
padding: 4rem 0 4.5rem;
}
.compta-partners {
max-width: 1240px;
margin: 1rem auto 0;
padding: 0 1.5rem;
}
.compta-partners-lead {
text-align: center;
color: #4a4a42;
font-size: 1rem;
line-height: 1.6;
margin: 0 auto 2rem;
max-width: 720px;
}
.compta-partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.9rem;
margin-bottom: 1.75rem;
}
.compta-partner {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1rem 1.1rem 0.95rem;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 12px;
text-decoration: none;
color: var(--text-color, #2e2d29);
position: relative;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.compta-partner:hover {
transform: translateY(-2px);
border-color: rgba(195, 229, 2, 0.55);
box-shadow: 0 14px 30px -16px rgba(74, 94, 2, 0.30);
}
.compta-partner-name {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
color: var(--text-color, #2e2d29);
font-size: 1rem;
letter-spacing: -0.005em;
}
.compta-partner-sub {
font-size: 0.72rem;
color: #6a6a62;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.compta-partner-arrow {
position: absolute;
top: 0.85rem;
right: 1rem;
color: rgba(46, 45, 41, 0.35);
font-size: 0.9rem;
font-weight: 800;
transition: color 0.25s ease, transform 0.25s ease;
}
.compta-partner:hover .compta-partner-arrow {
color: #4a5e02;
transform: translate(2px, -2px);
}
.compta-partners-foot {
text-align: center;
color: #4a4a42;
font-size: 0.92rem;
line-height: 1.6;
margin: 0;
padding: 1.1rem 1.3rem;
background: rgba(195, 229, 2, 0.08);
border: 1px solid rgba(74, 94, 2, 0.15);
border-radius: 10px;
}
.compta-partners-foot strong { color: #4a5e02; }
/* ============================================================
COMPTABILITÉ : Redesigned ecosystem flow schema (eco-flow)
Clean three-stage horizontal layout : Sources → Viridem → ERP
============================================================ */
.section-custom.comptabilite-flow-section {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
padding: 4.5rem 0;
}
.eco-flow {
max-width: 1240px;
margin: 1.5rem auto 0;
padding: 0 1.5rem;
}
.eco-flow-lead {
text-align: center;
color: #4a4a42;
font-size: 1.05rem;
line-height: 1.6;
margin: 0 auto 2.5rem;
max-width: 720px;
}
.eco-flow-grid {
display: grid;
grid-template-columns: 1fr auto 1.15fr auto 1fr;
gap: 1.25rem;
align-items: stretch;
}
.eco-stage {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 16px;
padding: 1.5rem 1.4rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.eco-stage:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px -18px rgba(46, 45, 41, 0.16);
}
.eco-stage-label {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #4a5e02;
background: rgba(195, 229, 2, 0.16);
padding: 0.3rem 0.7rem;
border-radius: 6px;
align-self: flex-start;
}
.eco-stage-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
color: var(--text-color, #2e2d29);
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.eco-stage-logo {
width: 24px;
height: 24px;
object-fit: contain;
}
.eco-stage-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.eco-stage-list li {
display: flex;
gap: 0.6rem;
align-items: flex-start;
font-size: 0.88rem;
line-height: 1.5;
color: #4a4a42;
}
.eco-stage-list strong { color: var(--text-color, #2e2d29); font-weight: 700; }
.eco-stage-list code {
background: rgba(74, 94, 2, 0.08);
color: #4a5e02;
padding: 0.05rem 0.4rem;
border-radius: 4px;
font-size: 0.85em;
}
.eco-stage-icon {
flex-shrink: 0;
width: 24px;
text-align: center;
font-size: 1rem;
line-height: 1.3;
}
/* Highlighted Viridem central stage */
.eco-stage-viridem {
background: linear-gradient(160deg, #1f1e1c 0%, #2e2d29 100%);
border-color: rgba(195, 229, 2, 0.32);
color: #fff;
position: relative;
overflow: hidden;
}
.eco-stage-viridem::before {
content: "";
position: absolute;
top: -60px;
right: -60px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(195, 229, 2, 0.18) 0%, transparent 65%);
pointer-events: none;
}
.eco-stage-label-viridem {
background: rgba(195, 229, 2, 0.18);
color: var(--primary-color, #c3e502);
}
.eco-stage-viridem .eco-stage-title { color: #fff; position: relative; }
.eco-stage-list-viridem li { color: rgba(255, 255, 255, 0.85); }
.eco-stage-list-viridem strong { color: #fff; }
/* Arrow between stages */
.eco-arrow-wrap {
align-self: center;
display: flex;
align-items: center;
}
.eco-arrow {
width: 80px;
height: 24px;
}
/* Bottom feedback bar */
.eco-feedback {
margin: 2rem auto 0;
max-width: 760px;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.10) 0%, rgba(195, 229, 2, 0.04) 100%);
border: 1px solid rgba(74, 94, 2, 0.20);
border-radius: 999px;
padding: 0.85rem 1.4rem;
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 0.92rem;
color: #4a4a42;
line-height: 1.5;
}
.eco-feedback strong { color: #4a5e02; }
.eco-feedback-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--primary-color, #c3e502);
box-shadow: 0 0 0 4px rgba(195, 229, 2, 0.20);
flex-shrink: 0;
animation: ecoDotPulse 2.4s infinite ease-in-out;
}
@keyframes ecoDotPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(195, 229, 2, 0.20); }
50% { box-shadow: 0 0 0 8px rgba(195, 229, 2, 0.10); }
}
/* Hide the old vflow SVG schema (now replaced) */
.section-custom.comptabilite-flow-section .vflow,
.section-custom.comptabilite-flow-section .vflow-svg,
.section-custom.comptabilite-flow-section .vflow-fallback { display: none !important; }
@media (max-width: 920px) {
.eco-flow-grid {
grid-template-columns: 1fr;
gap: 0.85rem;
}
.eco-arrow-wrap {
justify-self: center;
}
.eco-arrow { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
.eco-feedback-dot { animation: none; }
}
/* ============================================================
COMPTABILITÉ PAGE specific blocks (Découvrez vos enjeux,
Circular "Comment Viridem aide", hover-reveal "arrière-plan")
============================================================ */
/* --- "Découvrez vos enjeux" : pain cards with V-logo CTA reveal --- */
.section-custom.compta-pains-section {
background: linear-gradient(180deg, #ffffff 0%, #fafaf3 100%);
padding: 4rem 0 4.5rem;
}
.compta-pains {
max-width: 1240px;
margin: 1rem auto 0;
padding: 0 1.5rem;
}
.compta-pains-lead {
text-align: center;
color: #4a4a42;
font-size: 1rem;
line-height: 1.6;
margin: 0 auto 2.25rem;
max-width: 720px;
}
.compta-pains-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.1rem;
}
.compta-pain {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 14px;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.compta-pain[open] {
border-color: rgba(195, 229, 2, 0.45);
box-shadow: 0 18px 36px -18px rgba(74, 94, 2, 0.22);
}
.compta-pain summary {
list-style: none;
cursor: pointer;
padding: 1.4rem 1.4rem 1.3rem;
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 1rem;
transition: background 0.25s ease;
}
.compta-pain summary::-webkit-details-marker { display: none; }
.compta-pain summary:hover { background: rgba(195, 229, 2, 0.04); }
.compta-pain-content { flex: 1; min-width: 0; }
.compta-pain-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.02rem;
font-weight: 700;
line-height: 1.3;
color: var(--text-color, #2e2d29);
margin: 0 0 0.4rem;
}
.compta-pain-summary {
font-size: 0.9rem;
line-height: 1.55;
color: #4a4a42;
margin: 0;
}
.compta-pain-cta {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
justify-content: center;
flex-shrink: 0;
padding-left: 0.4rem;
border-left: 1px solid rgba(46, 45, 41, 0.08);
}
.compta-pain-cta-label {
font-size: 0.7rem;
color: rgba(46, 45, 41, 0.55);
text-align: center;
line-height: 1.2;
max-width: 90px;
}
.compta-pain-cta-logo {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(195, 229, 2, 0.14);
border: 1px solid rgba(195, 229, 2, 0.32);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease;
}
.compta-pain-cta-logo img {
width: 22px;
height: 22px;
object-fit: contain;
}
.compta-pain summary:hover .compta-pain-cta-logo,
.compta-pain[open] .compta-pain-cta-logo {
background: var(--primary-color, #c3e502);
border-color: var(--primary-color, #c3e502);
transform: rotate(-8deg) scale(1.06);
}
.compta-pain-response {
background: linear-gradient(180deg, rgba(195, 229, 2, 0.06) 0%, rgba(195, 229, 2, 0.02) 100%);
border-top: 1px solid rgba(195, 229, 2, 0.22);
padding: 1.1rem 1.4rem 1.2rem;
}
.compta-pain-response p {
font-size: 0.92rem;
line-height: 1.65;
color: #4a4a42;
margin: 0;
}
/* --- "Comment Viridem aide" : circular layout with V logo center --- */
.section-custom.compta-aide-section {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
padding: 5rem 0 5.5rem;
}
.compta-aide {
max-width: 1240px;
margin: 1rem auto 0;
padding: 0 1.5rem;
}
.compta-aide-lead {
text-align: center;
color: #4a4a42;
font-size: 1rem;
line-height: 1.6;
margin: 0 auto 3rem;
max-width: 720px;
}
.compta-aide-circle {
position: relative;
width: min(880px, 100%);
aspect-ratio: 1;
margin: 0 auto;
}
/* Center hub with the Viridem V logo */
.compta-aide-hub {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0%, #fafaf3 100%);
border: 2px solid rgba(195, 229, 2, 0.45);
box-shadow:
0 0 0 8px rgba(195, 229, 2, 0.10),
0 28px 60px -22px rgba(74, 94, 2, 0.30);
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
.compta-aide-hub img {
width: 120px;
height: 120px;
object-fit: contain;
}
/* Each card positioned around the circle using --angle */
.compta-aide-card {
position: absolute;
top: 50%;
left: 50%;
--radius: 38%;
--w: 200px;
width: var(--w);
transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--radius) * 2 / 2)) rotate(calc(-1 * var(--angle, 0deg)));
transition: transform 0.45s cubic-bezier(.2,.8,.2,1), z-index 0s 0.45s;
z-index: 1;
}
.compta-aide-inner {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 14px;
padding: 1rem 1rem 0.95rem;
text-align: center;
box-shadow: 0 10px 24px -14px rgba(46, 45, 41, 0.20);
transition: border-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
position: relative;
overflow: hidden;
}
.compta-aide-icon {
display: block;
font-size: 1.6rem;
margin-bottom: 0.35rem;
}
.compta-aide-inner h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 0.88rem;
font-weight: 800;
line-height: 1.25;
color: var(--text-color, #2e2d29);
margin: 0 0 0.3rem;
}
.compta-aide-short {
font-size: 0.78rem;
line-height: 1.4;
color: #6a6a62;
margin: 0;
}
.compta-aide-full {
font-size: 0.84rem;
line-height: 1.55;
color: #4a4a42;
margin: 0.55rem 0 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease, margin 0.4s ease;
}
/* Schema FIXED : hover only gives subtle border highlight, no pop-out / no size change.
The full descriptions are hidden permanently (already covered in the litterature page
and other detail sections). */
.compta-aide-card:hover,
.compta-aide-card:focus-within { z-index: 2; }
.compta-aide-card:hover .compta-aide-inner,
.compta-aide-card:focus-within .compta-aide-inner {
border-color: rgba(195, 229, 2, 0.55);
box-shadow: 0 14px 30px -16px rgba(74, 94, 2, 0.24);
}
.compta-aide-full { display: none; }
/* Mobile : flatten the circle into a grid */
@media (max-width: 860px) {
.compta-aide-circle {
aspect-ratio: auto;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem;
width: 100%;
}
.compta-aide-hub {
position: relative;
top: auto;
left: auto;
transform: none;
grid-column: 1 / -1;
margin: 0 auto 0.5rem;
width: 140px;
height: 140px;
}
.compta-aide-hub img { width: 80px; height: 80px; }
.compta-aide-card {
position: relative;
top: auto;
left: auto;
transform: none !important;
width: 100%;
}
}
@media (max-width: 480px) {
.compta-aide-circle { grid-template-columns: 1fr; }
}
/* --- "Viridem travaille en arrière-plan" : hover-reveal on the 6 feature cards --- */
.section-custom.comptabilite-arriere-plan-section .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.1rem;
}
.section-custom.comptabilite-arriere-plan-section .feature {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-left: 3px solid var(--primary-color, #c3e502);
border-radius: 12px;
padding: 1.4rem 1.4rem 1.3rem 1.2rem;
position: relative;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.section-custom.comptabilite-arriere-plan-section .feature h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1rem;
font-weight: 800;
color: #4a5e02;
margin: 0 0 0.5rem;
line-height: 1.25;
position: relative;
z-index: 1;
}
.section-custom.comptabilite-arriere-plan-section .feature p {
font-size: 0.9rem;
line-height: 1.55;
color: #4a4a42;
margin: 0;
max-height: 80px;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
transition: max-height 0.5s cubic-bezier(.2,.8,.2,1), mask-image 0.4s ease;
}
.section-custom.comptabilite-arriere-plan-section .feature:hover,
.section-custom.comptabilite-arriere-plan-section .feature:focus-within {
transform: translateY(-3px);
border-color: rgba(195, 229, 2, 0.55);
box-shadow: 0 22px 44px -18px rgba(74, 94, 2, 0.28);
}
.section-custom.comptabilite-arriere-plan-section .feature:hover p,
.section-custom.comptabilite-arriere-plan-section .feature:focus-within p {
max-height: 600px;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 100%);
}
/* Small "hover to read" hint on each card */
.section-custom.comptabilite-arriere-plan-section .feature::after {
content: "Survolez pour lire ›";
position: absolute;
bottom: 0.85rem;
right: 1.15rem;
font-size: 0.7rem;
font-weight: 700;
color: #4a5e02;
opacity: 0.7;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.section-custom.comptabilite-arriere-plan-section .feature:hover::after,
.section-custom.comptabilite-arriere-plan-section .feature:focus-within::after {
opacity: 0;
transform: translateX(8px);
}
/* RH : même hover-reveal sur l'arrière-plan « Viridem travaille en arrière-plan » (user 2026-05-27) */
.section-custom.rh-arriere-plan-section .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.1rem;
}
.section-custom.rh-arriere-plan-section .feature {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-left: 3px solid var(--primary-color, #c3e502);
border-radius: 12px;
padding: 1.4rem 1.4rem 1.3rem 1.2rem;
position: relative;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.section-custom.rh-arriere-plan-section .feature h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1rem;
font-weight: 800;
color: #4a5e02;
margin: 0 0 0.5rem;
line-height: 1.25;
position: relative;
z-index: 1;
}
.section-custom.rh-arriere-plan-section .feature p {
font-size: 0.9rem;
line-height: 1.55;
color: #4a4a42;
margin: 0;
max-height: 80px;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
transition: max-height 0.5s cubic-bezier(.2,.8,.2,1), mask-image 0.4s ease;
}
.section-custom.rh-arriere-plan-section .feature:hover,
.section-custom.rh-arriere-plan-section .feature:focus-within {
transform: translateY(-3px);
border-color: rgba(195, 229, 2, 0.55);
box-shadow: 0 22px 44px -18px rgba(74, 94, 2, 0.28);
}
.section-custom.rh-arriere-plan-section .feature:hover p,
.section-custom.rh-arriere-plan-section .feature:focus-within p {
max-height: 600px;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 100%);
}
.section-custom.rh-arriere-plan-section .feature::after {
content: "Survolez pour lire ›";
position: absolute;
bottom: 0.85rem;
right: 1.15rem;
font-size: 0.7rem;
font-weight: 700;
color: #4a5e02;
opacity: 0.7;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.section-custom.rh-arriere-plan-section .feature:hover::after,
.section-custom.rh-arriere-plan-section .feature:focus-within::after {
opacity: 0;
transform: translateX(8px);
}
/* --- Photo break for comptabilite couleur Viridem navy + lime (user 2026-05-25 v3) --- */
.section-custom.compta-photo-break-section {
padding: 0 !important;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 55%, #1a1a17 100%) !important;
overflow: hidden;
position: relative;
}
.section-custom.compta-photo-break-section::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #c3e502 0%, #d3f312 50%, #c3e502 100%);
z-index: 2;
}
.section-custom.compta-photo-break-section .container { max-width: 100%; padding: 0; }
.section-custom.compta-photo-break-section .section-title,
.section-custom.compta-photo-break-section .section-subtitle { display: none; }
/* Texte clair sur fond navy */
.section-custom.compta-photo-break-section .photo-break { color: #ffffff; }
.section-custom.compta-photo-break-section .pb-decor {
background:
radial-gradient(circle at 22% 30%, rgba(195, 229, 2, 0.20) 0%, transparent 45%),
radial-gradient(circle at 88% 75%, rgba(195, 229, 2, 0.10) 0%, transparent 55%);
background-size: cover, cover;
}
.section-custom.compta-photo-break-section .pb-eyebrow {
color: #c3e502;
background: rgba(195, 229, 2, 0.14);
border-color: rgba(195, 229, 2, 0.45);
}
.section-custom.compta-photo-break-section .pb-title { color: #ffffff; }
.section-custom.compta-photo-break-section .pb-lead { color: rgba(255, 255, 255, 0.86); }
.section-custom.compta-photo-break-section .pb-stats {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(195, 229, 2, 0.42);
box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.section-custom.compta-photo-break-section .pb-stat-num { color: #c3e502; }
.section-custom.compta-photo-break-section .pb-stat-label { color: rgba(255, 255, 255, 0.72); }
/* CTA row : button vert + secondary lime outline */
.section-custom.compta-photo-break-section .pb-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-top: 0.4rem; }
.section-custom.compta-photo-break-section .pb-cta {
background: var(--primary-color, #c3e502) !important;
color: #1f1e1c !important;
font-weight: 800;
padding: 0.95rem 1.5rem;
border-radius: 11px;
box-shadow: 0 8px 22px -8px rgba(74, 94, 2, 0.55);
}
.section-custom.compta-photo-break-section .pb-cta:hover { background: #d3f312 !important; transform: translateY(-2px); }
.section-custom.compta-photo-break-section .pb-cta-secondary {
color: #c3e502 !important;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
font-size: 0.95rem;
transition: color 0.22s ease;
}
.section-custom.compta-photo-break-section .pb-cta-secondary:hover { color: #d3f312 !important; }
.section-custom.compta-photo-break-section .pb-screenshot-frame {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(195, 229, 2, 0.18);
}
/* RH photo-break : mêmes couleurs que comptabilité (fond gris-noir, texte clair, accents lime).
Le bloc rh-photo-break-section réutilise le même markup que compta — on aligne le style. (user 2026-05-27) */
.section-custom.rh-photo-break-section {
padding: 0 !important;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 55%, #1a1a17 100%) !important;
overflow: hidden;
position: relative;
}
.section-custom.rh-photo-break-section::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #c3e502 0%, #d3f312 50%, #c3e502 100%);
z-index: 2;
}
.section-custom.rh-photo-break-section .container { max-width: 100%; padding: 0; }
.section-custom.rh-photo-break-section .section-title,
.section-custom.rh-photo-break-section .section-subtitle { display: none; }
.section-custom.rh-photo-break-section .photo-break { color: #ffffff; }
.section-custom.rh-photo-break-section .pb-decor {
background:
radial-gradient(circle at 22% 30%, rgba(195, 229, 2, 0.20) 0%, transparent 45%),
radial-gradient(circle at 88% 75%, rgba(195, 229, 2, 0.10) 0%, transparent 55%);
background-size: cover, cover;
}
.section-custom.rh-photo-break-section .pb-eyebrow {
color: #c3e502;
background: rgba(195, 229, 2, 0.14);
border-color: rgba(195, 229, 2, 0.45);
}
.section-custom.rh-photo-break-section .pb-title { color: #ffffff; }
.section-custom.rh-photo-break-section .pb-lead { color: rgba(255, 255, 255, 0.86); }
.section-custom.rh-photo-break-section .pb-stats {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(195, 229, 2, 0.42);
box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.section-custom.rh-photo-break-section .pb-stat-num { color: #c3e502; }
.section-custom.rh-photo-break-section .pb-stat-label { color: rgba(255, 255, 255, 0.72); }
.section-custom.rh-photo-break-section .pb-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-top: 0.4rem; }
.section-custom.rh-photo-break-section .pb-cta {
background: var(--primary-color, #c3e502) !important;
color: #1f1e1c !important;
font-weight: 800;
padding: 0.95rem 1.5rem;
border-radius: 11px;
box-shadow: 0 8px 22px -8px rgba(74, 94, 2, 0.55);
}
.section-custom.rh-photo-break-section .pb-cta:hover { background: #d3f312 !important; transform: translateY(-2px); }
.section-custom.rh-photo-break-section .pb-cta-secondary {
color: #c3e502 !important;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
font-size: 0.95rem;
transition: color 0.22s ease;
}
.section-custom.rh-photo-break-section .pb-cta-secondary:hover { color: #d3f312 !important; }
.section-custom.rh-photo-break-section .pb-screenshot-frame {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(195, 229, 2, 0.18);
}
/* ============================================================
SOLUTION PAGES uniform funnel (Comptabilité, RH, Opérations)
Hero · Pain points · Simplified 3-step flow · Value props · CTA
============================================================ */
/* --- Hero (sol-hero-section) --- */
.section-custom[class*="sol-hero-section"] {
background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
padding: 4rem 0 4.5rem;
}
.section-custom[class*="sol-hero-section"] .section-title,
.section-custom[class*="sol-hero-section"] .section-subtitle { display: none; }
.sol-hero {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3rem;
align-items: center;
}
.sol-hero-text { display: flex; flex-direction: column; gap: 1rem; }
.sol-hero-eyebrow {
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 800;
font-size: 0.78rem;
color: #4a5e02;
background: rgba(195, 229, 2, 0.16);
padding: 0.4rem 0.85rem;
border-radius: 999px;
align-self: flex-start;
}
.sol-hero-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.012em;
color: var(--text-color, #2e2d29);
margin: 0;
}
.sol-hero-lead {
font-size: 1.04rem;
line-height: 1.65;
color: #4a4a42;
margin: 0;
}
.sol-hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 0.75rem 0 0.5rem;
padding: 1.1rem 1.25rem;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 14px;
box-shadow: 0 6px 20px -12px rgba(46, 45, 41, 0.18);
}
.sol-hero-stat { display: flex; flex-direction: column; gap: 0.2rem; text-align: center; }
.sol-hero-stat-num {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.4rem, 2.6vw, 1.8rem);
font-weight: 800;
color: #4a5e02;
line-height: 1;
letter-spacing: -0.02em;
}
.sol-hero-stat-lab {
font-size: 0.78rem;
color: #6a6a62;
line-height: 1.35;
}
.sol-hero-cta {
display: flex;
gap: 1.25rem;
align-items: center;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.sol-hero-cta-secondary {
color: #4a5e02;
font-weight: 700;
font-size: 0.96rem;
text-decoration: none;
transition: transform 0.2s ease;
}
.sol-hero-cta-secondary:hover { transform: translateX(3px); color: #2e2d29; }
.sol-hero-photo img {
width: 100%;
height: auto;
border-radius: 18px;
aspect-ratio: 4 / 3;
object-fit: cover;
box-shadow: 0 28px 60px -22px rgba(46, 45, 41, 0.30);
}
/* --- Pain points (sol-pains-section) --- */
.section-custom[class*="sol-pains-section"] {
background: #fafaf6;
padding: 4rem 0 4.5rem;
}
.sol-pains { max-width: 1240px; margin: 1rem auto 0; padding: 0 1.5rem; }
.sol-pains-lead {
text-align: center;
color: #4a4a42;
font-size: 1rem;
line-height: 1.6;
margin: 0 0 2.25rem;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.sol-pains-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.1rem;
}
.sol-pain {
display: flex;
gap: 0.95rem;
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-left: 3px solid #c75331;
border-radius: 12px;
padding: 1.3rem 1.3rem 1.25rem 1.15rem;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sol-pain:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px -16px rgba(46, 45, 41, 0.22);
}
.sol-pain-icon {
flex-shrink: 0;
font-size: 1.5rem;
line-height: 1;
margin-top: 0.1rem;
}
.sol-pain h3 {
font-size: 1rem;
font-weight: 700;
color: var(--text-color, #2e2d29);
margin: 0 0 0.4rem;
}
.sol-pain p {
font-size: 0.92rem;
color: #4a4a42;
line-height: 1.55;
margin: 0;
}
/* --- Simplified 3-step flow (sol-flow-section) --- */
.section-custom[class*="sol-flow-section"] {
background: linear-gradient(180deg, #ffffff 0%, rgba(195, 229, 2, 0.06) 100%);
padding: 4rem 0 4.5rem;
}
.sol-flow {
max-width: 1240px;
margin: 1.5rem auto 0;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 1.5rem;
align-items: center;
}
.sol-flow-step {
background: #fff;
border: 1px solid rgba(74, 94, 2, 0.18);
border-radius: 14px;
padding: 1.5rem 1.4rem;
text-align: left;
position: relative;
overflow: hidden;
}
.sol-flow-step::before {
content: "";
position: absolute;
top: 0;
left: 1.4rem;
right: 1.4rem;
height: 2px;
background: var(--primary-color, #c3e502);
}
.sol-flow-num {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
font-size: 0.8rem;
letter-spacing: 0.18em;
color: #4a5e02;
background: rgba(195, 229, 2, 0.16);
padding: 0.25rem 0.6rem;
border-radius: 6px;
display: inline-block;
margin-bottom: 0.7rem;
}
.sol-flow-step h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-color, #2e2d29);
margin: 0 0 0.5rem;
}
.sol-flow-step p {
font-size: 0.9rem;
color: #4a4a42;
line-height: 1.55;
margin: 0;
}
.sol-flow-arrow {
width: 60px;
height: 24px;
color: #4a5e02;
flex-shrink: 0;
}
/* --- Value props (sol-values-section) --- */
.section-custom[class*="sol-values-section"] {
background: #fff;
padding: 4rem 0 4.5rem;
}
.sol-values {
max-width: 1240px;
margin: 1.5rem auto 0;
padding: 0 1.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.2rem;
}
.sol-value {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 14px;
padding: 1.5rem 1.4rem 1.4rem;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.sol-value:hover {
transform: translateY(-3px);
border-color: rgba(195, 229, 2, 0.5);
box-shadow: 0 18px 36px -18px rgba(74, 94, 2, 0.22);
}
.sol-value h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.05rem;
font-weight: 700;
color: #4a5e02;
margin: 0 0 0.55rem;
}
.sol-value p {
font-size: 0.92rem;
color: #4a4a42;
line-height: 1.6;
margin: 0;
}
/* --- CTA (sol-cta-section) --- */
.section-custom[class*="sol-cta-section"] {
padding: 0 !important;
background: transparent !important;
}
.section-custom[class*="sol-cta-section"] .container { max-width: 100%; padding: 0; }
.section-custom[class*="sol-cta-section"] .section-title,
.section-custom[class*="sol-cta-section"] .section-subtitle { display: none; }
.sol-cta {
background: linear-gradient(135deg, var(--text-color, #2e2d29) 0%, #1a1a18 100%);
color: #fff;
text-align: center;
padding: 4rem 2rem 4.5rem;
border-radius: 0;
}
.sol-cta h2 {
color: #fff;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 800;
line-height: 1.2;
margin: 0 auto 0.7rem;
max-width: 760px;
}
.sol-cta p {
color: rgba(255, 255, 255, 0.82);
font-size: 1rem;
line-height: 1.6;
margin: 0 auto 1.75rem;
max-width: 620px;
}
.sol-cta-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.sol-cta-secondary {
color: rgba(255, 255, 255, 0.85);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
transition: color 0.2s ease;
}
.sol-cta-secondary:hover { color: var(--primary-color, #c3e502); }
@media (max-width: 900px) {
.sol-hero { grid-template-columns: 1fr; gap: 2rem; }
.sol-flow {
grid-template-columns: 1fr;
gap: 0.85rem;
}
.sol-flow-arrow { transform: rotate(90deg); justify-self: center; }
}
/* ============================================================
FINANCE EVOLVE "Une plateforme québécoise qui évolue avec vous"
Section sober finance avec accent navy + gold subtle
============================================================ */
.section-custom.finance-evolve-section {
background: linear-gradient(180deg, #f5f4ee 0%, #ffffff 100%);
padding: 4.5rem 0;
}
.section-custom.finance-evolve-section .section-title,
.section-custom.finance-evolve-section .section-subtitle { display: none; }
.finance-evolve {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
}
.finance-evolve-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: start;
}
.finance-evolve-text { display: flex; flex-direction: column; gap: 1rem; }
.finance-evolve-eyebrow {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 800;
font-size: 0.78rem;
color: #1a2a4a;
background: rgba(26, 42, 74, 0.08);
border: 1px solid rgba(26, 42, 74, 0.20);
padding: 0.4rem 0.85rem;
border-radius: 999px;
align-self: flex-start;
}
.finance-evolve-title {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: clamp(1.5rem, 2.6vw + 0.4rem, 2.1rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: #1a2a4a;
margin: 0;
}
.finance-evolve-lead {
font-size: 1.02rem;
line-height: 1.65;
color: #4a4a42;
margin: 0;
}
.finance-evolve-lead strong { color: #1a2a4a; font-weight: 700; }
.finance-evolve-list {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.finance-evolve-list li {
position: relative;
padding-left: 1.4rem;
font-size: 0.94rem;
line-height: 1.6;
color: #4a4a42;
}
.finance-evolve-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.65rem;
width: 8px;
height: 1px;
background: #b8941f;
}
.finance-evolve-list strong { color: #1a2a4a; font-weight: 700; }
.finance-evolve-aside {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
background: linear-gradient(135deg, #1a2a4a 0%, #0d1729 100%);
border-radius: 14px;
color: #fff;
}
.finance-evolve-stat {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.85rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.finance-evolve-stat:last-child { border-bottom: none; }
.finance-evolve-num {
font-family: Georgia, serif;
font-style: italic;
font-weight: 700;
font-size: 1.6rem;
color: #b8941f;
line-height: 1;
}
.finance-evolve-lab {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.78);
line-height: 1.4;
}
@media (max-width: 860px) {
.finance-evolve-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
/* ============================================================
SECTOR PERSONAS two-column dual-persona block used on
/construction, /distribution, /service-financier.
Each persona card adopts the theme accent of its sector.
============================================================ */
.section-custom.sector-personas-section { padding: 4rem 0; }
.sec-personas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.6rem;
max-width: 1240px;
margin: 2rem auto 0;
padding: 0 1.5rem;
}
.sec-persona {
background: #fff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 16px;
padding: 1.75rem 1.6rem 1.5rem;
box-shadow: 0 8px 24px -16px rgba(46, 45, 41, 0.18);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
position: relative;
overflow: hidden;
}
.sec-persona:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px -22px rgba(46, 45, 41, 0.22);
}
.sec-persona-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.85rem;
}
.sec-persona-tag {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 800;
font-size: 0.7rem;
color: var(--sector-accent, #4a5e02);
background: var(--sector-accent-soft, rgba(195, 229, 2, 0.14));
padding: 0.35rem 0.85rem;
border-radius: 999px;
}
.sec-persona-icon { font-size: 1.8rem; line-height: 1; }
.sec-persona h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.15rem;
font-weight: 800;
line-height: 1.3;
color: var(--text-color, #2e2d29);
margin: 0 0 1rem;
}
.sec-persona-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.sec-persona-list li {
position: relative;
padding-left: 1.3rem;
font-size: 0.92rem;
line-height: 1.6;
color: #4a4a42;
}
.sec-persona-list li::before {
content: "›";
position: absolute;
left: 0;
top: 0;
color: var(--sector-accent, #4a5e02);
font-weight: 800;
font-size: 1.1rem;
line-height: 1.4;
}
.sec-persona-list strong {
color: var(--text-color, #2e2d29);
font-weight: 700;
}
/* Sector-themed accent on persona cards (left border) */
body.theme-construction .sec-persona { border-left: 3px solid var(--sector-accent); }
body.theme-distribution .sec-persona { border-left: 3px solid var(--sector-accent); }
body.theme-finance .sec-persona {
border-left: 3px solid var(--sector-accent);
border-radius: 6px; /* sharper, sober finance feel */
}
body.theme-finance .sec-persona h3 { font-family: Georgia, serif; font-style: italic; }
@media (max-width: 760px) {
.sec-personas { grid-template-columns: 1fr; gap: 1rem; }
}
/* Tunnel de conversion défi → bénéfice (user 2026-05-22, #38)
Visuel "Avant Viridem | V | Avec Viridem" avec lignes parallèles. */
.section-custom.sector-funnel-section {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
}
.sec-funnel {
max-width: 1100px;
margin: 2rem auto 0;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 0;
}
.sec-funnel-headers {
display: grid;
grid-template-columns: 1fr 90px 1fr;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}
.sec-funnel-header {
font-family: var(--heading-font, inherit);
font-weight: 800;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.12em;
text-align: center;
padding: 0.7rem 1rem;
border-radius: 8px;
}
.sec-funnel-header-defi {
background: rgba(226, 61, 40, 0.10);
color: #b32a1a;
}
.sec-funnel-header-benefit {
background: rgba(195, 229, 2, 0.18);
color: #4a5e02;
}
.sec-funnel-row {
display: grid;
grid-template-columns: 1fr 90px 1fr;
gap: 1rem;
align-items: center;
padding: 0.6rem 0;
border-bottom: 1px dashed rgba(46, 45, 41, 0.10);
}
.sec-funnel-row:last-child { border-bottom: none; }
.sec-funnel-defi {
background: #fff;
border: 1px solid rgba(226, 61, 40, 0.16);
border-left: 3px solid #e23d28;
border-radius: 10px;
padding: 0.95rem 1.1rem;
font-size: 0.94rem;
line-height: 1.5;
color: #4a4a42;
}
.sec-funnel-bridge {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
color: var(--primary-color, #c3e502);
}
.sec-funnel-bridge img {
width: 32px;
height: 32px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(195, 229, 2, 0.35));
}
.sec-funnel-arrow {
font-size: 1.3rem;
font-weight: 900;
color: #4a5e02;
line-height: 1;
}
.sec-funnel-benefit {
background: linear-gradient(135deg, rgba(195, 229, 2, 0.12) 0%, rgba(195, 229, 2, 0.04) 100%);
border: 1px solid rgba(195, 229, 2, 0.30);
border-left: 3px solid var(--primary-color, #c3e502);
border-radius: 10px;
padding: 0.95rem 1.1rem;
font-size: 0.94rem;
line-height: 1.5;
color: var(--text-color, #2e2d29);
font-weight: 500;
}
@media (max-width: 720px) {
.sec-funnel-headers,
.sec-funnel-row {
grid-template-columns: 1fr;
gap: 0.6rem;
}
.sec-funnel-bridge { flex-direction: row; padding: 0.3rem 0; }
.sec-funnel-arrow { transform: rotate(90deg); }
}
/* Sur themes dark (manufacturier) version contraste élevé */
body.theme-manufacturier .section-custom.sector-funnel-section {
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 60%, #1a1a17 100%);
}
body.theme-manufacturier .section-custom.sector-funnel-section .section-title,
body.theme-manufacturier .section-custom.sector-funnel-section .section-subtitle {
color: #fff !important;
}
body.theme-manufacturier .sec-funnel-defi {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(226, 61, 40, 0.45);
color: rgba(255, 255, 255, 0.88);
}
body.theme-manufacturier .sec-funnel-benefit {
background: rgba(195, 229, 2, 0.15);
border-color: rgba(195, 229, 2, 0.45);
color: #fff;
}
/* Buyer personas grid (user 2026-05-22, manufacturier #39) pattern dédié */
.sec-personas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.4rem;
max-width: 1240px;
margin: 2rem auto 0;
padding: 0 1.5rem;
}
.sec-personas-grid .sec-persona {
display: flex;
flex-direction: column;
gap: 0.95rem;
padding: 1.8rem 1.5rem;
}
.sec-personas-grid .sec-persona-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(195, 229, 2, 0.14);
color: #4a5e02;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.2rem;
}
.sec-personas-grid .sec-persona-icon svg { width: 24px; height: 24px; display: block; }
.sec-personas-grid .sec-persona-role {
font-family: var(--heading-font, inherit);
font-size: 1.05rem;
font-weight: 800;
color: var(--text-color, #2e2d29);
line-height: 1.3;
margin: 0;
letter-spacing: -0.005em;
}
.sec-persona-concerns,
.sec-persona-delivers {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sec-persona-concerns p,
.sec-persona-delivers p {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: #4a4a42;
}
.sec-personas-grid .sec-persona-tag {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--heading-font, inherit);
text-transform: uppercase;
letter-spacing: 0.10em;
font-weight: 800;
font-size: 0.68rem;
color: #4a4a42;
background: rgba(46, 45, 41, 0.06);
padding: 0.28rem 0.6rem;
border-radius: 4px;
}
.sec-persona-tag-v {
background: var(--primary-color, #c3e502) !important;
color: var(--text-color, #2e2d29) !important;
}
.sec-persona-tag-v img {
width: 12px;
height: 12px;
object-fit: contain;
}
.sec-persona-delivers {
padding-top: 0.9rem;
border-top: 1px solid rgba(46, 45, 41, 0.10);
}
/* ===== Personas hover-reveal (user 2026-05-22) =====
Titre + icône visibles toujours. Texte caché. Au survol/focus → texte révélé.
Chaque carte a une teinte d'accent différente (c1=lime, c2=teal, c3=indigo, c4=amber). */
.sec-persona-hover {
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.sec-persona-hover:hover,
.sec-persona-hover:focus-within {
transform: translateY(-3px);
box-shadow: 0 24px 48px -22px rgba(46, 45, 41, 0.25);
}
/* ===== Personas : 3 variantes SUBTILES vert/noir Viridem (user 2026-05-22) =====
Cartes identiques en structure, juste la position et l'intensité de l'accent lime
varient pour distinguer subtilement les 3 personas sans casser l'harmonie visuelle. */
.sec-persona-v1, .sec-persona-v2, .sec-persona-v3 {
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.10);
border-radius: 16px;
color: #1f1e1c;
position: relative;
overflow: hidden;
}
.sec-persona-v1 .sec-persona-icon,
.sec-persona-v2 .sec-persona-icon,
.sec-persona-v3 .sec-persona-icon {
background: rgba(195, 229, 2, 0.18);
color: #4a5e02;
}
.sec-persona-v1 .sec-persona-role,
.sec-persona-v2 .sec-persona-role,
.sec-persona-v3 .sec-persona-role { color: #1f1e1c; }
/* v1 barre lime en haut (accent supérieur) */
.sec-persona-v1 { border-top: 3px solid #c3e502; }
/* v2 barre noire à gauche + fin liseré lime droite (accent latéral) */
.sec-persona-v2 { border-left: 3px solid #1f1e1c; }
.sec-persona-v2::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0;
width: 3px;
background: #c3e502;
}
/* v3 barre lime en bas (accent inférieur) */
.sec-persona-v3 { border-bottom: 3px solid #c3e502; }
.sec-persona-v1.sec-persona-hover:hover,
.sec-persona-v1.sec-persona-hover:focus-within,
.sec-persona-v2.sec-persona-hover:hover,
.sec-persona-v2.sec-persona-hover:focus-within,
.sec-persona-v3.sec-persona-hover:hover,
.sec-persona-v3.sec-persona-hover:focus-within {
border-color: rgba(195, 229, 2, 0.45);
box-shadow: 0 24px 48px -22px rgba(46, 45, 41, 0.18);
}
/* Photo en haut de la carte (toutes variantes) */
.sec-persona-photo {
margin: -1.8rem -1.5rem 1rem;
height: 140px;
overflow: hidden;
border-radius: 14px 14px 0 0;
}
.sec-persona-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.sec-persona-hover:hover .sec-persona-photo img,
.sec-persona-hover:focus-within .sec-persona-photo img {
transform: scale(1.05);
}
.sec-persona-v2 .sec-persona-photo {
position: relative;
}
.sec-persona-v2 .sec-persona-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(31, 30, 28, 0.20) 0%, rgba(31, 30, 28, 0.65) 100%);
pointer-events: none;
}
.sec-persona-header {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 0.5rem;
}
.sec-persona-header .sec-persona-icon { margin: 0; }
.sec-persona-header .sec-persona-role { margin: 0; }
.sec-persona-hint {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
color: #4a5e02;
background: rgba(195, 229, 2, 0.18);
padding: 0.35rem 0.7rem;
border-radius: 999px;
margin-top: 0.4rem;
align-self: flex-start;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.sec-persona-reveal {
display: flex;
flex-direction: column;
gap: 0.9rem;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
margin-top: 0;
}
.sec-persona-hover:hover .sec-persona-reveal,
.sec-persona-hover:focus-within .sec-persona-reveal {
max-height: 600px;
opacity: 1;
margin-top: 0.4rem;
}
.sec-persona-hover:hover .sec-persona-hint,
.sec-persona-hover:focus-within .sec-persona-hint {
opacity: 0.5;
transform: translateX(2px);
}
/* ===== Page Autres secteurs : bloc propriétaire/API/workflows (user 2026-05-22) ===== */
.autres-prop-block {
max-width: 1240px;
margin: 1.5rem auto 0;
padding: 0 1.5rem;
}
.autres-prop-intro {
margin-bottom: 2rem;
max-width: 880px;
}
.autres-prop-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.72rem;
font-weight: 800;
color: #4a5e02;
background: rgba(195, 229, 2, 0.22);
border: 1px solid rgba(195, 229, 2, 0.50);
padding: 0.35rem 0.85rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.autres-prop-intro h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.4rem, 2.8vw, 2rem);
font-weight: 900;
color: #1f1e1c;
margin: 0 0 0.85rem;
line-height: 1.2;
letter-spacing: -0.012em;
}
.autres-prop-intro p {
margin: 0;
color: #2e2d29;
font-size: 1.02rem;
line-height: 1.65;
}
.autres-prop-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.2rem;
margin-bottom: 2rem;
}
.autres-prop-card {
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.10);
border-left: 4px solid #c3e502;
border-radius: 14px;
padding: 1.5rem 1.5rem;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.autres-prop-card:hover {
transform: translateY(-3px);
border-color: #c3e502;
box-shadow: 0 24px 48px -22px rgba(46, 45, 41, 0.18);
}
.autres-prop-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(195, 229, 2, 0.18);
color: #4a5e02;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.85rem;
}
.autres-prop-icon svg { width: 26px; height: 26px; }
.autres-prop-card h4 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.1rem;
font-weight: 800;
color: #1f1e1c;
margin: 0 0 0.55rem;
line-height: 1.3;
}
.autres-prop-card p {
margin: 0;
font-size: 0.94rem;
line-height: 1.55;
color: #4a4a42;
}
.autres-prop-cta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: center;
padding: 1.25rem 0;
border-top: 1px solid rgba(195, 229, 2, 0.32);
}
@media (max-width: 760px) {
.autres-prop-grid { grid-template-columns: 1fr; }
}
/* ===== Bloc IA Viridem dans sector-features (user 2026-05-22) ===== */
.sec-cf-ai {
max-width: 1240px;
margin: 1.5rem auto 0;
padding: 2rem 2rem 1.75rem;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 60%, #1a1a17 100%);
color: #fafaf6;
border-radius: 16px;
position: relative;
overflow: hidden;
}
.sec-cf-ai::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, #c3e502, rgba(195, 229, 2, 0.2) 60%, transparent);
}
.sec-cf-eyebrow-ai {
background: rgba(195, 229, 2, 0.18) !important;
color: #c3e502 !important;
border: 1px solid rgba(195, 229, 2, 0.45) !important;
}
.sec-cf-ai h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.3rem, 2.4vw, 1.75rem);
color: #ffffff;
margin: 0 0 0.8rem;
line-height: 1.25;
letter-spacing: -0.01em;
}
.sec-cf-ai-lead {
margin: 0 0 1.5rem;
color: rgba(255, 255, 255, 0.82);
font-size: 1rem;
line-height: 1.6;
max-width: 760px;
}
.sec-cf-ai-features {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.sec-cf-ai-features li {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: flex-start;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(195, 229, 2, 0.18);
border-radius: 12px;
padding: 1rem 1.1rem;
}
.sec-cf-ai-num {
flex-shrink: 0;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.4rem;
font-weight: 900;
color: #c3e502;
line-height: 1;
background: rgba(195, 229, 2, 0.10);
border: 1px solid rgba(195, 229, 2, 0.35);
border-radius: 10px;
padding: 0.55rem 0.75rem;
min-width: 70px;
text-align: center;
}
.sec-cf-ai-features li strong {
display: block;
font-size: 0.98rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 0.35rem;
}
.sec-cf-ai-features li p {
margin: 0;
font-size: 0.88rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
}
.sec-cf-ai-foot {
margin: 0;
font-size: 0.92rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
padding-top: 1rem;
border-top: 1px solid rgba(195, 229, 2, 0.22);
}
.sec-cf-ai-foot a {
color: #c3e502 !important;
text-decoration: underline;
text-decoration-color: rgba(195, 229, 2, 0.4);
text-underline-offset: 3px;
font-weight: 700;
}
.sec-cf-ai-foot a:hover { text-decoration-color: #c3e502; }
@media (max-width: 760px) {
.sec-cf-ai-features { grid-template-columns: 1fr; }
}
/* ===== Bloc teaser → article 10 enjeux + Bloc pricing (user 2026-05-22) ===== */
.sec-teaser-block {
max-width: 1100px;
margin: 1.5rem auto 0;
padding: 2.25rem 2.25rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 1.75rem;
align-items: center;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 100%);
border-radius: 18px;
border: 1px solid rgba(195, 229, 2, 0.32);
position: relative;
overflow: hidden;
box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.45);
}
.sec-teaser-block::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0;
width: 35%;
background: radial-gradient(ellipse at 100% 50%, rgba(195, 229, 2, 0.18), transparent 65%);
pointer-events: none;
}
.sec-teaser-icon {
width: 90px;
height: 90px;
flex-shrink: 0;
background: rgba(195, 229, 2, 0.12);
border: 1px solid rgba(195, 229, 2, 0.40);
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.sec-teaser-icon svg { width: 48px; height: 48px; }
.sec-teaser-body {
position: relative;
z-index: 1;
color: #fafaf6;
}
.sec-teaser-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.72rem;
font-weight: 800;
color: #c3e502;
background: rgba(195, 229, 2, 0.18);
border: 1px solid rgba(195, 229, 2, 0.45);
padding: 0.35rem 0.85rem;
border-radius: 999px;
margin-bottom: 0.75rem;
}
.sec-teaser-body h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
font-weight: 800;
color: #ffffff;
margin: 0 0 0.7rem;
line-height: 1.25;
letter-spacing: -0.01em;
}
.sec-teaser-body p {
margin: 0 0 1.25rem;
font-size: 0.98rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.82);
max-width: 720px;
}
.sec-teaser-cta {
background: linear-gradient(135deg, #c3e502 0%, #a8c800 100%) !important;
color: #1f1e1c !important;
}
@media (max-width: 760px) {
.sec-teaser-block { grid-template-columns: 1fr; padding: 1.75rem; gap: 1.2rem; }
.sec-teaser-icon { width: 64px; height: 64px; }
.sec-teaser-icon svg { width: 32px; height: 32px; }
}
/* Bloc pricing teaser construction → /tarification */
.section-custom.sector-pricing-teaser-section {
background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
}
.section-custom.sector-pricing-teaser-section .section-title,
.section-custom.sector-pricing-teaser-section .section-subtitle { display: none; }
.sec-pricing-teaser {
max-width: 1140px;
margin: 0 auto;
padding: 2.25rem 2rem;
background: #ffffff;
border: 1px solid rgba(195, 229, 2, 0.32);
border-left: 5px solid #c3e502;
border-radius: 16px;
display: grid;
grid-template-columns: 1.4fr auto;
gap: 2rem;
align-items: center;
box-shadow: 0 16px 40px -22px rgba(46, 45, 41, 0.16);
}
.sec-pricing-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.72rem;
font-weight: 800;
color: #4a5e02;
background: rgba(195, 229, 2, 0.22);
padding: 0.35rem 0.85rem;
border-radius: 999px;
margin-bottom: 0.7rem;
}
.sec-pricing-body h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.25rem, 2.2vw, 1.55rem);
font-weight: 800;
color: #1f1e1c;
margin: 0 0 0.6rem;
line-height: 1.25;
}
.sec-pricing-body p {
margin: 0;
font-size: 0.98rem;
line-height: 1.6;
color: #4a4a42;
}
.sec-pricing-actions {
display: flex;
flex-direction: column;
gap: 0.7rem;
align-items: flex-end;
}
@media (max-width: 760px) {
.sec-pricing-teaser { grid-template-columns: 1fr; padding: 1.75rem 1.25rem; gap: 1.25rem; }
.sec-pricing-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
/* Article 10 enjeux : layout du contenu + CTA fin */
.article-content {
max-width: 880px;
margin: 0 auto 1.5rem;
padding: 0 1.5rem;
}
.article-lead {
font-size: 1.08rem;
line-height: 1.7;
color: #2e2d29;
margin: 0;
}
.article-end-cta {
max-width: 880px;
margin: 2.5rem auto 0;
padding: 2rem 1.75rem;
background: linear-gradient(135deg, rgba(195, 229, 2, 0.10) 0%, rgba(195, 229, 2, 0.03) 100%);
border: 1px solid rgba(195, 229, 2, 0.40);
border-radius: 16px;
text-align: center;
}
.article-end-cta h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.3rem, 2.4vw, 1.75rem);
color: #1f1e1c;
margin: 0 0 0.6rem;
}
.article-end-cta p {
color: #4a4a42;
margin: 0 0 1.25rem;
font-size: 1rem;
}
.article-end-cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.85rem;
}
/* user 2026-06-18 : fond clair → liens secondaires en vert foncé lisible (étaient blancs = invisibles) */
.article-end-cta-actions .sec-cta-secondary {
color: #4a5e02 !important;
border-bottom: 2px solid var(--primary-color, #c3e502);
}
.article-end-cta-actions .sec-cta-secondary:hover { color: #1f1e1c !important; }
/* ===== Page Équipe /equipe (SEO action #2, E-E-A-T boost, user 2026-05-22) ===== */
.team-page {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
}
.team-intro {
text-align: center;
margin-bottom: 2.5rem;
}
.team-intro-lead {
font-size: 1.1rem;
line-height: 1.65;
color: #2e2d29;
max-width: 800px;
margin: 0 auto;
}
.team-section {
margin-bottom: 3rem;
}
.team-section-title {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
font-weight: 800;
color: #1f1e1c;
margin: 0 0 0.5rem;
letter-spacing: -0.012em;
border-left: 4px solid #c3e502;
padding-left: 1rem;
}
.team-section-lead {
color: #4a4a42;
font-size: 0.98rem;
line-height: 1.55;
max-width: 720px;
margin: 0 0 1.5rem;
padding-left: 1.2rem;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.4rem;
}
.team-card {
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.10);
border-radius: 16px;
overflow: hidden;
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
display: flex;
flex-direction: column;
}
.team-card:hover {
transform: translateY(-3px);
border-color: #c3e502;
box-shadow: 0 24px 48px -22px rgba(46, 45, 41, 0.20);
}
.team-card-photo {
margin: 0;
height: 180px;
overflow: hidden;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 100%);
}
.team-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.team-card-placeholder {
height: 180px;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.team-card-placeholder::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(195, 229, 2, 0.18), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(195, 229, 2, 0.10), transparent 60%);
}
.team-card-placeholder span {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 3.5rem;
font-weight: 900;
color: #c3e502;
z-index: 1;
}
.team-card-body {
padding: 1.25rem 1.4rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
flex: 1;
}
.team-card-name {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.15rem;
font-weight: 800;
color: #1f1e1c;
margin: 0;
letter-spacing: -0.005em;
}
.team-card-role {
font-size: 0.84rem;
font-weight: 700;
color: #4a5e02;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.team-card-bio {
font-size: 0.92rem;
line-height: 1.55;
color: #4a4a42;
margin: 0.4rem 0 0.8rem;
flex: 1;
}
.team-card-linkedin {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #0a66c2 !important;
font-weight: 700;
font-size: 0.88rem;
text-decoration: none;
align-self: flex-start;
}
.team-card-linkedin svg {
width: 18px;
height: 18px;
}
.team-card-linkedin:hover { text-decoration: underline; }
.team-stats {
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 100%);
color: #fafaf6;
border-radius: 18px;
padding: 2rem 2rem 2.25rem;
margin-bottom: 3rem;
border-top: 4px solid #c3e502;
}
.team-stats .team-section-title {
color: #ffffff;
border-left-color: #c3e502;
}
.team-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1.2rem;
margin-top: 1.4rem;
}
.team-stat { text-align: left; }
.team-stat-num {
display: block;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.7rem, 3.5vw, 2.3rem);
font-weight: 900;
color: #c3e502;
line-height: 1;
margin-bottom: 0.4rem;
}
.team-stat-label {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.4;
}
.team-cta {
text-align: center;
padding: 2rem 1.5rem;
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
border: 1px solid rgba(195, 229, 2, 0.32);
border-radius: 16px;
}
.team-cta h2 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: 1.5rem;
color: #1f1e1c;
margin: 0 0 0.5rem;
}
.team-cta p {
color: #4a4a42;
margin: 0 0 1.25rem;
}
/* ===== Photo CFO construction (entre enjeux et fonctionnalités, user 2026-05-22)
user 2026-06-10 : split horizontal — photo réduite à gauche + texte à droite.
La figcaption est sortie via CSS grid (markup HTML legacy inchangé). ===== */
.section-custom.sector-cfo-photo-section {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
padding: 1.5rem 0 2.5rem;
}
.section-custom.sector-cfo-photo-section .section-title,
.section-custom.sector-cfo-photo-section .section-subtitle { display: none; }
.sec-cfo-photo {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
}
.sec-cfo-photo-figure {
margin: 0;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 0;
align-items: stretch;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 60%, #1a1a17 100%);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 30px 60px -28px rgba(46, 45, 41, 0.35);
min-height: 280px;
}
.sec-cfo-photo-figure img {
width: 100%;
height: 100%;
min-height: 280px;
max-height: 380px;
object-fit: cover;
object-position: center 30%;
display: block;
grid-column: 1;
}
.sec-cfo-photo-caption {
grid-column: 2;
color: #fafaf6;
padding: 2.25rem 2.25rem 2rem 1.75rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 0.75rem;
position: static;
background: transparent;
}
.sec-cfo-photo-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.72rem;
font-weight: 800;
color: #c3e502;
background: rgba(195, 229, 2, 0.18);
border: 1px solid rgba(195, 229, 2, 0.40);
padding: 0.35rem 0.85rem;
border-radius: 999px;
margin-bottom: 0.3rem;
}
.sec-cfo-photo-caption h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.3rem, 2.4vw, 1.85rem);
font-weight: 800;
color: #ffffff;
margin: 0 0 0.4rem;
line-height: 1.2;
letter-spacing: -0.012em;
max-width: 760px;
}
.sec-cfo-photo-caption p {
margin: 0;
font-size: 0.98rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.85);
max-width: 760px;
}
@media (max-width: 760px) {
.sec-cfo-photo-figure {
grid-template-columns: 1fr;
min-height: 0;
}
.sec-cfo-photo-figure img {
min-height: 200px;
max-height: 260px;
grid-column: 1;
}
.sec-cfo-photo-caption {
grid-column: 1;
padding: 1.4rem 1.25rem 1.4rem;
}
}
/* ===== ERP construction : grid 4 logos (user 2026-05-22) =====
Inspiré du home page mais avec vrais logos officiels (Maestro, Vision, Sage, Procore). */
.sec-erp-construction {
max-width: 1240px;
margin: 1.5rem auto 0;
padding: 0 1.5rem;
text-align: center;
}
.sec-erp-construction-lead {
font-size: 1.02rem;
line-height: 1.6;
color: #2e2d29;
max-width: 760px;
margin: 0 auto 1.75rem;
}
.sec-erp-construction-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
/* Bandeau déroulant marquee (user 2026-05-22) défilement infini des 9 logos */
.sec-erp-marquee {
margin: 0 -1.5rem 1.5rem;
padding: 1rem 0;
overflow: hidden;
position: relative;
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sec-erp-marquee-track {
display: inline-flex;
align-items: center;
gap: 2.5rem;
animation: erpMarqueeScroll 35s linear infinite;
white-space: nowrap;
will-change: transform;
}
.sec-erp-marquee:hover .sec-erp-marquee-track { animation-play-state: paused; }
.sec-erp-marquee-card {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 90px;
padding: 0.75rem 1rem;
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.08);
border-radius: 12px;
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.sec-erp-marquee-card:hover {
transform: translateY(-2px);
border-color: #c3e502;
box-shadow: 0 14px 28px -14px rgba(46, 45, 41, 0.22);
}
.sec-erp-marquee-card img {
max-width: 140px;
max-height: 56px;
height: auto;
width: auto;
object-fit: contain;
display: block;
}
/* Tuile sombre pour les logos à écriture blanche (user 2026-05-26) */
.sec-erp-marquee-card.sec-erp-card-dark {
background: #1f1e1c;
border-color: rgba(195, 229, 2, 0.35);
}
.sec-erp-marquee-card.sec-erp-card-dark img { filter: none; }
@keyframes erpMarqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 760px) {
.sec-erp-marquee-card { width: 140px; height: 70px; }
.sec-erp-marquee-card img { max-width: 110px; max-height: 44px; }
.sec-erp-marquee-track { gap: 1.5rem; animation-duration: 28s; }
}
.sec-erp-card {
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.10);
border-radius: 12px;
padding: 1.5rem 1rem 1.1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.85rem;
min-height: 140px;
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.sec-erp-card:hover {
transform: translateY(-3px);
border-color: #c3e502;
box-shadow: 0 20px 40px -22px rgba(46, 45, 41, 0.25);
}
.sec-erp-card img {
max-width: 140px;
max-height: 50px;
height: auto;
width: auto;
object-fit: contain;
display: block;
}
.sec-erp-name {
font-size: 0.82rem;
font-weight: 700;
color: #4a4a42;
text-align: center;
line-height: 1.3;
}
a.sec-erp-card { text-decoration: none; }
a.sec-erp-card .sec-erp-name { color: #4a4a42; }
/* Cartes texte (Genius/Prextra/Maximum sans logo) */
.sec-erp-card-text .sec-erp-text-mark {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #1f1e1c 0%, #2e2d29 100%);
color: #c3e502;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 900;
font-size: 1.6rem;
border: 2px solid rgba(195, 229, 2, 0.30);
}
.sec-erp-card-text:hover .sec-erp-text-mark {
border-color: #c3e502;
}
.sec-erp-construction-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
font-size: 0.95rem;
color: #4a5e02;
background: rgba(195, 229, 2, 0.14);
border: 1px solid rgba(195, 229, 2, 0.45);
padding: 0.6rem 1.15rem;
border-radius: 999px;
text-decoration: none;
transition: background 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.sec-erp-construction-link:hover {
background: rgba(195, 229, 2, 0.28);
border-color: #c3e502;
transform: translateX(2px);
}
@media (max-width: 880px) {
.sec-erp-construction-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.sec-erp-construction-grid { grid-template-columns: 1fr; }
}
/* ===== Membership construction : logos officiels (user 2026-05-22) ===== */
.sec-membership-logo {
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid rgba(46, 45, 41, 0.10);
border-radius: 12px;
padding: 1.25rem 1.5rem;
min-height: 110px;
flex-shrink: 0;
}
.sec-membership-logo img {
max-width: 200px;
max-height: 80px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* ===== sector-cases : lien blog en pied (user 2026-05-22) ===== */
.sector-cases-foot {
max-width: 1240px;
margin: 1.5rem auto 0;
padding: 0 1.5rem;
text-align: center;
}
.sector-cases-blog-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-weight: 800;
font-size: 1rem;
color: #4a5e02;
background: rgba(195, 229, 2, 0.14);
border: 1px solid rgba(195, 229, 2, 0.45);
padding: 0.7rem 1.25rem;
border-radius: 999px;
text-decoration: none;
transition: background 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.sector-cases-blog-link:hover {
background: rgba(195, 229, 2, 0.28);
border-color: #c3e502;
transform: translateX(2px);
}
/* ===== Application mobile sector-mobile-app-section (user 2026-05-22 refonte couleurs) =====
Fond clair pour lisibilité maximale, accents lime, texte sombre. */
.section-custom.sector-mobile-app-section {
background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
color: #1f1e1c;
}
.section-custom.sector-mobile-app-section .section-title {
color: #1f1e1c !important;
}
.section-custom.sector-mobile-app-section .section-subtitle {
color: #4a4a42 !important;
}
.sec-mobile-app {
max-width: 1240px;
margin: 1.8rem auto 0;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 3rem;
align-items: start;
}
.sec-mobile-app-text { color: #2e2d29; }
.sec-mobile-app-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.72rem;
font-weight: 800;
color: #4a5e02;
background: rgba(195, 229, 2, 0.22);
border: 1px solid rgba(195, 229, 2, 0.50);
padding: 0.4rem 0.85rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.sec-mobile-app h3 {
font-family: var(--heading-font, 'JekoRegular', sans-serif);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
margin: 0 0 1rem;
color: #1f1e1c;
letter-spacing: -0.012em;
}
.sec-mobile-app-lead {
font-size: 1.02rem;
line-height: 1.6;
color: #4a4a42;
margin: 0 0 1.5rem;
}
.sec-mobile-app-list {
list-style: none;
padding: 0;
margin: 0 0 1.75rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.sec-mobile-feat {
display: flex;
gap: 0.85rem;
align-items: flex-start;
}
.sec-mobile-feat-bullet {
/* user 2026-05-26 : juste le V Viridem, sans cercle */
flex-shrink: 0;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sec-mobile-feat-bullet img { width: 32px; height: 32px; object-fit: contain; filter: none; }
.sec-mobile-feat strong {
display: block;
color: #1f1e1c;
font-size: 0.98rem;
font-weight: 800;
margin-bottom: 0.2rem;
}
.sec-mobile-feat p {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: #4a4a42;
}
.sec-mobile-app-cta {
margin-top: 0.4rem;
}
/* Visuel : 2 vrais screenshots de l'app Viridem (Play Store) en stack offset */
.sec-mobile-app-visual {
display: flex;
justify-content: center;
align-items: center;
padding: 0.4rem 0;
}
.sec-mobile-screens {
position: relative;
width: 300px; /* user 2026-07-14 : ajusté pour des mockups format téléphone */
height: 470px; /* user 2026-08-23 : rehausse pour les vraies proportions telephone (plus hautes) */
}
.sec-mobile-screen {
position: absolute;
width: 166px; /* user 2026-07-14 : plus étroit = look téléphone (pas tablette) */
height: auto;
border-radius: 34px; /* coins très arrondis = smartphone */
box-shadow:
0 32px 64px -26px rgba(0, 0, 0, 0.55),
0 0 0 7px #1f1e1c,
0 0 0 8px rgba(195, 229, 2, 0.30);
transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
image-rendering: auto; /* rendu lisse haute qualité pour le downscale photo */
}
.sec-mobile-screen-back {
top: 0;
right: 0;
transform: rotate(6deg);
z-index: 1;
}
.sec-mobile-screen-front {
bottom: 0;
left: 0;
transform: rotate(-4deg);
z-index: 2;
}
/* user 2026-07-14 : vrais mockups téléphone (corps métal + écran + encoche iPhone / poinçon Android) */
.sec-phone {
position: absolute;
width: 166px; /* user 2026-08-23 : un peu plus etroit = look telephone (pas tablette) */
padding: 7px;
background: linear-gradient(150deg, #40404a 0%, #17171b 55%, #0a0a0d 100%);
border-radius: 32px;
box-shadow: 0 34px 66px -26px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(255,255,255,.10);
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.sec-phone-scr {
display: block;
width: 100%;
aspect-ratio: 9 / 19.3; /* user 2026-08-23 : vraies proportions telephone Android (modele conserve) */
object-fit: contain; /* user 2026-08-23 : toute la capture d'app visible dans le telephone, RIEN de coupe, centree (avant cover rognait les cotes) */
object-position: center center;
border-radius: 25px;
background: #fff;
}
.sec-phone::after { /* bouton latéral */
content: "";
position: absolute;
right: -2px;
top: 74px;
width: 3px;
height: 42px;
background: linear-gradient(#4a4a52, #17171a);
border-radius: 3px;
box-shadow: -1px 0 2px rgba(0,0,0,.4);
}
.sec-phone-notch { position: absolute; z-index: 3; background: #0a0a0d; }
.sec-phone-front .sec-phone-notch { top: 14px; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(120,150,200,.35); } /* poinçon Android (user 2026-08-13) */
.sec-phone-back .sec-phone-notch { top: 15px; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(120,150,200,.35); } /* poinçon Android */
.sec-phone-back { top: 0; right: 0; transform: rotate(6deg); z-index: 1; }
.sec-phone-front { bottom: 0; left: 0; transform: rotate(-4deg); z-index: 2; }
.section-custom.sector-mobile-app-section:hover .sec-phone-back { transform: rotate(8deg) translate(8px, -6px); }
.section-custom.sector-mobile-app-section:hover .sec-phone-front { transform: rotate(-6deg) translate(-8px, 6px); }
@media (max-width: 880px) { .sec-phone { width: 150px; } }
/* user 2026-07-14 : emplacement vidéo démo Viridem Lite (à remplacer par un