/*
* ============================================================
* DESIGN SYSTEM PFD2
* Fichier de référence graphique commun à tous les sites PFD2
* Extraction depuis : Momento/Livrables/site/index.html
* Date : 2026-06-23
* ============================================================
*
* STRUCTURE
* ─────────
* PARTIE 1 — SYSTÈME COMMUN PFD2
* 1.1 Tokens de marque (variables CSS)
* 1.2 Import de police
* 1.3 Reset & base
* 1.4 Layout (container)
* 1.5 Navigation (header)
* 1.6 Boutons
* 1.7 Typographie de section
* 1.8 Hero principale (section 1 commune)
* 1.9 Scroll indicator
* 1.10 Trust strip (fond bleu nuit)
* 1.11 Carousel cas clients
* 1.12 Lien croisé Momento ↔ Marketing (badge & card)
* 1.13 Modal formulaire démo
* 1.14 Footer
* 1.15 Animations communes (@keyframes)
*
* PARTIE 2 — SPÉCIFIQUE MOMENTO
* 2.1 Hero 2 colonnes + grille d'outils
* 2.2 Section problème — colonnes scrollantes
* 2.3 Solutions — portes expandables
* 2.4 Solutions — cards détail V2
* 2.5 Bannière démo
* 2.6 Section méthode 4 étapes
* 2.7 Section CTA / Audit final
* 2.8 Section engagement (citation géante)
*
* ============================================================
*/
/* ============================================================
* PARTIE 1 — SYSTÈME COMMUN PFD2
* ============================================================ */
/* ── 1.1 TOKENS DE MARQUE ── */
:root {
/* Couleurs principales */
--bleu-momento: #1a6ce3; /* Bleu PFD2 — couleur d'action principale */
--bleu-nuit: #0b2545; /* Fond sombre, titres forts */
--bleu-profond: #103d7c; /* Hover fonds sombres, gradient footer */
--bleu-ciel: #6fa8e5; /* Texte secondaire sur fonds bleus */
/* Accents chauds — gradient signature PFD2 */
--jaune: #ffc845;
--orange: #ff7b30;
--rouge: #e63946;
/* Gradients */
--gradient-text: linear-gradient(135deg, #ff9540 0%, #ff6b35 100%);
--gradient-warm: linear-gradient(135deg, #ffc845 0%, #ff6b35 55%, #e63946 100%);
/* Neutres */
--blanc: #ffffff;
--noir-doux: #0f1115;
--gris-clair: #f4f6fa; /* Fond sections alternées */
--gris-moyen: #9aa4b2; /* Texte secondaire, placeholders */
--gris-fonce: #3a4250; /* Texte corps */
/* Layout */
--maxw: 1180px;
--pad: 24px;
}
/* ── 1.2 IMPORT DE POLICE ── */
/*
* Coller dans le du HTML, AVANT tout lien CSS :
*
*
*
*
*/
/* ── 1.3 RESET & BASE ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--noir-doux);
background: var(--blanc);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
/* ── 1.4 LAYOUT ── */
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--pad);
}
section {
padding: 80px 0;
}
/* ── 1.5 NAVIGATION (HEADER) ── */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: transparent;
border-bottom: 1px solid transparent;
transition:
background 0.35s ease,
border-color 0.35s ease,
backdrop-filter 0.35s ease;
}
.nav .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
}
/* Logo — deux variantes superposées, bascule au scroll */
.nav-logo {
display: flex;
align-items: center;
position: relative;
}
.nav-logo img {
display: block;
height: 28px;
width: auto;
transition: opacity 0.35s;
}
.nav-logo .logo-white {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
}
.nav.scrolled .nav-logo .logo-dark {
opacity: 0;
pointer-events: none;
}
.nav.scrolled .nav-logo .logo-white {
opacity: 1;
pointer-events: auto;
}
/* Liens de navigation */
.nav-links {
display: flex;
gap: 32px;
align-items: center;
}
.nav-links a {
font-size: 14px;
font-weight: 500;
color: var(--gris-fonce);
transition: color 0.35s, opacity 0.15s;
}
.nav-links a:not(.nav-cta):hover {
color: var(--bleu-momento);
}
.nav-links a.nav-cta {
color: var(--blanc);
}
/* Bouton CTA principal dans la nav */
.nav-cta {
background: var(--bleu-momento);
color: var(--blanc);
padding: 10px 18px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
box-shadow: 0 6px 16px -6px rgba(26, 108, 227, 0.45);
height: 41px;
}
.nav-cta:hover {
transform: translateY(-1px);
background: var(--bleu-profond);
box-shadow: 0 10px 22px -6px rgba(11, 37, 69, 0.45);
}
/* Bouton secondaire outline dans la nav */
.nav-demo-btn {
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--bleu-momento);
background: transparent;
border: 1.5px solid var(--bleu-momento);
padding: 10px 18px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
height: 41px;
}
.nav-demo-btn:hover {
background: var(--bleu-momento);
color: var(--blanc);
transform: translateY(-1px);
box-shadow: 0 6px 16px -6px rgba(26, 108, 227, 0.45);
}
/* État scrollé — fond bleu nuit semi-transparent */
.nav.scrolled {
background: rgba(11, 37, 69, 0.92);
backdrop-filter: blur(10px);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav.scrolled .nav-links a:not(.nav-cta) {
color: rgba(255, 255, 255, 0.85);
}
.nav.scrolled .nav-links a:not(.nav-cta):hover {
color: var(--blanc);
}
.nav.scrolled .nav-demo-btn {
color: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.35);
}
.nav.scrolled .nav-demo-btn:hover {
background: rgba(255, 255, 255, 0.15);
color: var(--blanc);
border-color: rgba(255, 255, 255, 0.6);
box-shadow: none;
}
@media (max-width: 720px) {
.nav-links a:not(.nav-cta) {
display: none;
}
}
/* ── 1.6 BOUTONS ── */
/* Base commune */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
border-radius: 10px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 15px;
transition: transform 0.15s, box-shadow 0.15s;
cursor: pointer;
border: 0;
text-decoration: none;
}
.btn-arrow {
font-size: 18px;
}
/* Variant : gradient chaud (CTA principal fort) */
.btn-primary {
background: var(--gradient-warm);
color: var(--blanc);
box-shadow: 0 12px 24px -8px rgba(255, 107, 53, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 16px 32px -10px rgba(230, 57, 70, 0.55);
}
/* Variant : bleu PFD2 (CTA standard) */
.btn-blue {
background: var(--bleu-momento);
color: var(--blanc);
box-shadow: 0 12px 24px -8px rgba(26, 108, 227, 0.4);
}
.btn-blue:hover {
transform: translateY(-2px);
background: var(--bleu-profond);
box-shadow: 0 16px 32px -10px rgba(11, 37, 69, 0.45);
}
/* Variant : ghost outline */
.btn-ghost {
background: transparent;
color: var(--bleu-nuit);
border: 1.5px solid rgba(11, 37, 69, 0.22);
box-shadow: none;
}
.btn-ghost:hover {
background: rgba(26, 108, 227, 0.05);
border-color: var(--bleu-momento);
color: var(--bleu-momento);
transform: translateY(-2px);
}
/* Variant : texte bleu (lien enrichi) */
.btn-text-blue {
background: transparent;
color: var(--bleu-momento);
border: 1.5px solid transparent;
border-radius: 8px;
box-shadow: none;
font-weight: 600;
height: 55px;
}
.btn-text-blue:hover {
border: 1.5px solid var(--bleu-momento);
cursor: pointer;
}
/* ── 1.7 TYPOGRAPHIE DE SECTION ── */
/* Tag au-dessus des titres de section */
.section-tag {
display: inline-block;
color: var(--bleu-nuit);
font-weight: 700;
font-size: 13px;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 16px;
padding-bottom: 6px;
}
/* Sur fonds sombres : version blanche */
.section-tag--light {
color: var(--blanc);
border-color: rgba(255, 255, 255, 0.35);
}
/* Titre de section — grand format */
.section-title {
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -1px;
color: var(--noir-doux);
margin-bottom: 24px;
max-width: 760px;
}
/* Sous-titre de section */
.section-lead {
font-size: 18px;
max-width: 680px;
color: var(--gris-fonce);
font-weight: 400;
}
/* Titre de section — taille medium (utilisée dans Momento) */
.section-title-md {
font-size: clamp(20px, 3.2vw, 38px);
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.2;
color: var(--bleu-nuit);
margin-bottom: 20px;
}
/* Accent gradient chaud dans les titres */
.accent-gradient {
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 800;
}
/* ── 1.8 HERO PRINCIPALE (SECTION 1 — COMMUNE) ── */
/*
* La section 1 "hero-main" est commune aux deux sites PFD2.
* Elle présente l'offre globale avec un titre animé et deux CTAs.
*/
.hero-main {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background:
radial-gradient(ellipse 80% 55% at 90% 100%, rgba(255, 107, 53, 0.12), transparent),
radial-gradient(ellipse 60% 40% at 10% 100%, rgba(255, 200, 69, 0.08), transparent),
var(--blanc);
padding: 80px 0 160px;
text-align: center;
}
/* Quadrillage technique subtil */
.hero-main::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(11, 37, 69, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11, 37, 69, 0.05) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
}
/* .hero-main::after — vignette retirée */
.hero-main > .container {
position: relative;
z-index: 1;
}
.hero-main-inner {
max-width: 940px;
margin: 0 auto;
}
/* Titre H1 */
.hero-main-title {
font-size: clamp(20px, 3.2vw, 38px);
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.2;
color: var(--bleu-nuit);
margin-bottom: 0;
}
.hero-main-title .title-line1 {
display: block;
white-space: nowrap;
}
.hero-main-title .title-line2 {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.28em;
margin-top: 0.06em;
flex-wrap: nowrap;
}
/* Conteneur animation de mot rotatif */
.tool-anim-outer {
display: inline-block;
overflow: hidden;
height: 1.3em;
vertical-align: bottom;
}
.tool-anim-word {
display: inline-block;
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 800;
line-height: 1.25;
will-change: transform, opacity;
min-width: 250px;
text-align: left;
}
/* Sous-titre */
.hero-main-sub {
font-size: clamp(15px, 1.8vw, 19px);
color: var(--gris-fonce);
max-width: 680px;
margin: 32px auto 14px;
font-weight: 400;
line-height: 1.65;
}
/* Groupe promesse + scroll — ancré en bas */
.hero-main-bottom {
position: absolute;
bottom: 64px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
z-index: 1;
}
.hero-main-promise {
font-size: clamp(15px, 1.8vw, 19px);
color: var(--gris-fonce);
max-width: 680px;
margin: 0;
font-weight: 400;
line-height: 1.65;
}
.hero-main-promise .accent-promise {
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
}
/* CTAs hero */
.hero-main-ctas {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
/* ── 1.9 SCROLL INDICATOR ── */
.scroll-indicator {
margin-top: 24px;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: var(--gris-moyen);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.scroll-indicator .arrow-down {
width: 22px;
height: 22px;
border: 1.5px solid var(--gris-moyen);
border-radius: 50%;
display: grid;
place-items: center;
animation: bounce 2.2s ease-in-out infinite;
}
.scroll-indicator svg {
width: 12px;
height: 12px;
}
/* ── 1.10 TRUST STRIP (FOND BLEU NUIT) ── */
/*
* Bande de valeurs / statistiques sur fond bleu nuit.
* Réutilisable sur les deux sites PFD2.
*/
.trust {
background: linear-gradient(160deg, var(--bleu-nuit) 0%, var(--bleu-profond) 100%);
color: var(--blanc);
padding: 40px 0 60px;
position: relative;
overflow: hidden;
}
/* Quadrillage subtil sur fond bleu */
.trust::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(111, 168, 229, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(111, 168, 229, 0.08) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
opacity: 0.75;
}
.trust > .container {
position: relative;
z-index: 1;
}
/* Grille de blocs de valeur */
.cas-trust-grid {
display: grid;
grid-template-columns: repeat(4, 200px);
justify-content: space-between;
gap: 0;
margin-top: 15px;
width: 100%;
}
@media (max-width: 880px) {
.cas-trust-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.cas-trust-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
max-width: 200px;
text-align: center;
}
.cas-trust-icon {
display: grid;
place-items: center;
color: var(--bleu-ciel);
}
.cas-trust-icon svg {
width: 22px;
height: 22px;
}
.cas-trust-strong {
font-size: 15px;
font-weight: 500;
color: var(--blanc);
letter-spacing: 1px;
}
.cas-trust-text {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
margin-top: -4px;
}
/* ── 1.11 CAROUSEL CAS CLIENTS ── */
/*
* Carousel horizontal pleine largeur avec snap scrolling.
* Cartes à ratio horizontal, drag souris natif, boucle infinie.
*/
.cas-header {
position: relative;
z-index: 1;
text-align: center;
padding: 0 24px;
}
.cas-header-title {
font-size: clamp(20px, 3.2vw, 38px);
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.2;
color: var(--bleu-nuit);
text-align: center;
margin: 0 auto;
max-width: 760px;
}
.portes-cas-header {
text-align: center;
padding-top: 44px;
}
.portes-cas-header .section-tag {
display: block;
margin-bottom: 14px;
}
.cas-carousel-outer {
position: relative;
z-index: 1;
margin-top: 20px;
}
.cas-carousel-wrapper {
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
padding: 40px 0 48px;
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
rgba(0, 0, 0, 0.55) 9%,
black 19%,
black 81%,
rgba(0, 0, 0, 0.55) 91%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
rgba(0, 0, 0, 0.55) 9%,
black 19%,
black 81%,
rgba(0, 0, 0, 0.55) 91%,
transparent 100%
);
}
.cas-carousel-wrapper:active { cursor: grabbing; }
.cas-carousel-wrapper::-webkit-scrollbar { display: none; }
.cas-track {
display: flex;
gap: 24px;
width: max-content;
padding-left: max(24px, calc(50vw - min(330px, 30vw)));
padding-right: max(24px, calc(50vw - min(330px, 30vw)));
}
.cas-card {
flex: 0 0 min(700px, 62vw);
height: clamp(330px, 32vw, 375px);
display: grid;
grid-template-columns: 2fr 3fr;
background: var(--blanc);
color: var(--noir-doux);
border-radius: 20px;
overflow: hidden;
scroll-snap-align: center;
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.16);
transform: scale(0.95);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
@media (max-width: 640px) {
.cas-card {
flex: 0 0 88vw;
grid-template-columns: 1fr;
height: auto;
transform: scale(1);
}
}
.cas-card.is-active { transform: scale(1); }
.cas-card-photo { overflow: hidden; }
.cas-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cas-card-right {
padding: 34px 32px;
display: flex;
flex-direction: column;
gap: 18px;
}
.cas-card-subtitle {
font-size: clamp(13px, 1.2vw, 15px);
font-weight: 600;
color: var(--bleu-nuit);
line-height: 1.35;
letter-spacing: -0.2px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(11, 37, 69, 0.09);
}
.cas-info-lines {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.cas-info-line {
display: flex;
flex-flow: column;
gap: 3px;
}
.cas-info-label {
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--bleu-nuit);
}
.cas-info-text {
font-size: clamp(13px, 1.3vw, 15px);
color: var(--gris-fonce);
line-height: 1.5;
}
/* Ligne résultat — fond gradient chaud */
.cas-info-lines .cas-info-line:last-child {
background: var(--gradient-text);
padding: 13px 15px;
border-radius: 10px;
margin-top: 4px;
}
.cas-info-lines .cas-info-line:last-child .cas-info-label {
color: rgba(255, 255, 255, 0.72);
letter-spacing: 1.3px;
}
.cas-info-lines .cas-info-line:last-child .cas-info-text {
color: var(--blanc);
font-weight: 600;
}
.cas-card-quote {
margin: 0;
padding-top: 16px;
border-top: 1px solid rgba(11, 37, 69, 0.08);
font-size: clamp(12.5px, 1.15vw, 14px);
font-style: italic;
color: var(--gris-moyen);
line-height: 1.55;
}
.cas-card-quote cite {
display: block;
font-style: normal;
font-size: 11.5px;
color: var(--bleu-momento);
margin-top: 5px;
font-weight: 500;
}
/* Flèches de navigation */
.cas-arrow-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid rgba(11, 37, 69, 0.16);
background: var(--blanc);
color: var(--bleu-nuit);
display: grid;
place-items: center;
cursor: pointer;
z-index: 10;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.cas-arrow-btn:hover:not(:disabled) {
background: var(--gris-clair);
border-color: rgba(11, 37, 69, 0.3);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}
.cas-arrow-btn:disabled { opacity: 0.3; cursor: default; }
#casPrev { left: 18px; }
#casNext { right: 18px; }
.cas-footer {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 12px;
}
.cas-dots { display: flex; gap: 6px; }
.cas-dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: none;
padding: 0;
background: rgba(11, 37, 69, 0.2);
cursor: pointer;
transition: background 0.25s, transform 0.25s;
}
.cas-dot.active {
background: var(--bleu-nuit);
transform: scale(1.35);
}
.cas-transition {
font-size: clamp(14px, 1.5vw, 18px);
font-weight: 500;
font-style: italic;
color: rgba(11, 37, 69, 0.28);
letter-spacing: -0.2px;
text-align: center;
}
/* ── 1.12 LIEN CROISÉ MOMENTO ↔ MARKETING ── */
/*
* Composants qui font le pont entre les deux univers PFD2.
* L'orange #ff9540 est le signal visuel "je pointe vers l'autre service".
*/
/* Badge flottant dans la hero */
.hero-pfd2-badge {
position: absolute;
bottom: 90px;
right: 80px;
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
padding: 14px 20px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 149, 64, 0.28);
border-radius: 14px;
box-shadow: 0 4px 18px rgba(11, 37, 69, 0.1);
transition: background 0.2s, box-shadow 0.2s;
z-index: 10;
max-width: 258px;
}
.hero-pfd2-badge:hover {
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 6px 26px rgba(11, 37, 69, 0.15);
}
.hero-pfd2-badge img {
height: 38px;
width: auto;
display: block;
opacity: 0.7;
}
.hero-pfd2-badge-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.hero-pfd2-badge-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
color: #ff9540;
line-height: 1;
}
.hero-pfd2-badge-desc {
font-size: 13px;
font-weight: 500;
color: var(--bleu-nuit);
line-height: 1.25;
opacity: 0.7;
}
/* Lien vers l'autre service dans le footer */
.footer-pfd2-link {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 149, 64, 0.28);
border-radius: 12px;
margin-top: 18px;
transition: background 0.2s;
max-width: 250px;
}
.footer-pfd2-link:hover { background: rgba(255, 255, 255, 0.13); }
.footer-pfd2-link img { height: 28px; width: auto; }
.footer-pfd2-link-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.footer-pfd2-link-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #ff9540;
line-height: 1;
margin: 0 0 3px;
}
.footer-pfd2-link-desc {
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.82);
line-height: 1.2;
}
/* Card "Aller plus loin" dans une grille de services */
.porte-marketing {
background: var(--blanc);
border: 1px solid rgba(255, 149, 64, 0.28);
box-shadow: 0 2px 10px rgba(11, 37, 69, 0.05), 0 0 14px rgba(255, 149, 64, 0.08);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
min-height: 317px;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.porte-marketing:hover {
box-shadow: 0 6px 24px rgba(11, 37, 69, 0.08), 0 0 22px rgba(255, 149, 64, 0.16);
border-color: rgba(255, 149, 64, 0.5) !important;
}
.porte-marketing .porte-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #ff9540;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
.porte-marketing h3 { color: var(--bleu-nuit); position: relative; z-index: 1; }
.porte-marketing p {
color: var(--gris-fonce);
font-size: 13.5px;
line-height: 1.6;
margin-top: 10px;
flex: 1;
position: relative;
z-index: 1;
}
.porte-marketing-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 22px;
font-size: 13.5px;
font-weight: 600;
color: var(--blanc);
background: var(--gradient-text);
border: none;
padding: 9px 18px;
border-radius: 8px;
text-decoration: none;
transition: opacity 0.2s, transform 0.2s;
width: fit-content;
position: relative;
z-index: 1;
}
.porte-marketing-cta:hover { opacity: 0.88; transform: translateX(2px); }
/* Variante card V2 */
.pv2-card-marketing {
background: var(--blanc);
border: 1px solid rgba(255, 149, 64, 0.3);
box-shadow: 0 2px 10px rgba(11, 37, 69, 0.05), 0 0 14px rgba(255, 149, 64, 0.08);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
position: relative;
}
.pv2-card-marketing::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255, 149, 64, 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 149, 64, 0.04) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
}
.pv2-card-marketing:hover {
border-color: rgba(255, 149, 64, 0.52);
box-shadow: 0 6px 24px rgba(11, 37, 69, 0.08), 0 0 22px rgba(255, 149, 64, 0.16);
transform: translateY(-4px);
}
.pv2-tag-marketing {
position: relative;
z-index: 1;
display: inline-block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #ff9540;
margin-bottom: 11px;
}
.pv2-card-marketing h3 {
position: relative;
z-index: 1;
font-size: 14.5px;
font-weight: 700;
color: var(--bleu-nuit);
margin-bottom: 8px;
letter-spacing: -0.2px;
}
.pv2-card-marketing > p {
position: relative;
z-index: 1;
font-size: 12.5px;
color: var(--gris-fonce);
line-height: 1.6;
flex: 1;
}
.pv2-marketing-cta {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 20px;
font-size: 12.5px;
font-weight: 600;
color: var(--blanc);
background: var(--gradient-text);
padding: 9px 16px;
border-radius: 8px;
text-decoration: none;
transition: opacity 0.2s, transform 0.2s;
width: fit-content;
}
.pv2-marketing-cta:hover { opacity: 0.88; transform: translateX(2px); }
/* ── 1.13 MODAL FORMULAIRE DÉMO ── */
.demo-modal-overlay {
position: fixed;
inset: 0;
background: rgba(11, 37, 69, 0.7);
backdrop-filter: blur(6px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.demo-modal-overlay.is-open { opacity: 1; pointer-events: all; }
.demo-modal {
background: var(--blanc);
border-radius: 20px;
padding: 48px 44px;
max-width: 520px;
width: 100%;
position: relative;
transform: translateY(16px) scale(0.98);
transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 24px 60px rgba(11, 37, 69, 0.25);
}
.demo-modal-overlay.is-open .demo-modal {
transform: translateY(0) scale(1);
}
.demo-modal-close {
position: absolute;
top: 18px;
right: 18px;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: var(--gris-clair);
color: var(--gris-moyen);
cursor: pointer;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s;
}
.demo-modal-close:hover { background: #e8ecf2; color: var(--bleu-nuit); }
.demo-modal-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(26, 108, 227, 0.08);
border: 1px solid rgba(26, 108, 227, 0.18);
border-radius: 20px;
padding: 4px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--bleu-momento);
margin-bottom: 18px;
}
.demo-modal-badge .badge-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--orange);
}
.demo-modal h2 {
font-size: clamp(20px, 3vw, 26px);
font-weight: 700;
letter-spacing: -0.8px;
line-height: 1.2;
color: var(--bleu-nuit);
margin-bottom: 10px;
}
.demo-modal h2 .modal-accent {
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.demo-modal-sub {
font-size: 14px;
color: var(--gris-moyen);
margin-bottom: 32px;
line-height: 1.55;
}
.demo-modal-form { display: flex; flex-direction: column; gap: 14px; }
.demo-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.demo-modal-field { display: flex; flex-direction: column; gap: 6px; }
.demo-modal-field label {
font-size: 12px;
font-weight: 600;
color: var(--bleu-nuit);
letter-spacing: 0.2px;
}
.demo-modal-field input,
.demo-modal-select {
font-family: "Poppins", sans-serif;
font-size: 14px;
color: var(--bleu-nuit);
background: var(--gris-clair);
border: 1.5px solid transparent;
border-radius: 10px;
padding: 12px 14px;
outline: none;
width: 100%;
transition: border-color 0.2s, box-shadow 0.2s;
}
.demo-modal-field input::placeholder { color: var(--gris-moyen); font-weight: 400; }
.demo-modal-field input:focus,
.demo-modal-select:focus {
border-color: var(--bleu-momento);
box-shadow: 0 0 0 3px rgba(26, 108, 227, 0.1);
background: var(--blanc);
}
.demo-modal-field input.input-error,
.demo-modal-select.input-error {
border-color: #e05454;
box-shadow: 0 0 0 3px rgba(224, 84, 84, 0.1);
}
.demo-modal-select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa4b2' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.demo-modal-submit {
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--blanc);
background: var(--bleu-momento);
border: none;
border-radius: 12px;
padding: 15px 24px;
cursor: pointer;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 6px;
transition: all 0.2s;
box-shadow: 0 6px 20px -4px rgba(26, 108, 227, 0.4);
}
.demo-modal-submit:hover {
background: var(--bleu-profond);
transform: translateY(-2px);
box-shadow: 0 10px 28px -4px rgba(11, 37, 69, 0.35);
}
.demo-modal-note {
font-size: 11.5px;
color: var(--gris-moyen);
text-align: center;
margin-top: 12px;
}
@media (max-width: 540px) {
.demo-modal { padding: 36px 24px; }
.demo-modal-row { grid-template-columns: 1fr; }
}
/* ── 1.14 FOOTER ── */
footer {
background: linear-gradient(160deg, var(--bleu-nuit) 0%, var(--bleu-profond) 100%);
color: var(--bleu-ciel);
padding: 60px 0 30px;
position: relative;
overflow: hidden;
}
footer::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(111, 168, 229, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(111, 168, 229, 0.08) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
opacity: 0.75;
}
footer > .container { position: relative; z-index: 1; }
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
}
@media (max-width: 720px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-brand .logo-wrap {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
color: var(--blanc);
}
.footer-brand .logo-wrap span { font-weight: 700; font-size: 22px; }
.footer-brand p { font-size: 14px; opacity: 0.7; max-width: 320px; font-style: italic; }
footer h4 {
color: var(--blanc);
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 16px;
font-weight: 700;
}
footer ul { list-style: none; }
footer ul li { padding: 6px 0; font-size: 14px; }
footer ul li a { opacity: 0.75; transition: opacity 0.15s; }
footer ul li a:hover { opacity: 1; color: var(--blanc); }
.footer-bottom {
margin-top: 48px;
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
opacity: 0.6;
}
/* ── 1.15 ANIMATIONS COMMUNES ── */
@keyframes bounce {
0%, 100% { transform: translateY(0); opacity: 0.7; }
50% { transform: translateY(6px); opacity: 1; }
}
/* ============================================================
* PARTIE 2 — SPÉCIFIQUE MOMENTO
* Styles propres à l'univers automatisation / IA de Momento.
* Ne pas copier tels quels pour le site marketing :
* s'en inspirer pour la structure, adapter l'esthétique.
* ============================================================ */
/* ── 2.1 HERO 2 COLONNES + GRILLE D'OUTILS ── */
/*
* Colonne gauche = pitch textuel animé (outil courant mis en avant).
* Colonne droite = grille dense de logos d'outils supportés.
* Propre à Momento : montre l'écosystème d'intégrations IA.
*/
.hero {
position: relative;
background:
radial-gradient(circle at 90% 10%, rgba(255, 107, 53, 0.14), transparent 55%),
radial-gradient(circle at 8% 90%, rgba(255, 200, 69, 0.1), transparent 50%),
linear-gradient(180deg, #ffffff 0%, #f8fafe 100%);
color: var(--noir-doux);
padding: 80px 0;
overflow: hidden;
}
.sun-glow {
position: absolute;
top: -120px;
right: -120px;
width: 380px;
height: 380px;
border-radius: 50%;
background: var(--gradient-warm);
filter: blur(60px);
opacity: 0.2;
pointer-events: none;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 56px;
align-items: center;
min-height: 540px;
}
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.hero-left { text-align: left; max-width: 520px; }
@media (max-width: 980px) {
.hero-left { text-align: center; max-width: 680px; margin: 0 auto; }
}
.hero-toolname {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--bleu-nuit);
border-bottom: 2px solid var(--bleu-nuit);
padding-bottom: 1px;
margin-bottom: 22px;
min-height: 1.4em;
transition: color 0.25s ease, border-color 0.25s ease;
}
.hero-headline {
font-size: clamp(20px, 3.2vw, 38px);
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.2;
color: var(--bleu-nuit);
margin-bottom: 20px;
min-height: 2.2em;
}
.hero-headline .num {
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 800;
}
.hero-sub {
font-size: 14px;
color: var(--gris-fonce);
margin-bottom: 32px;
font-weight: 400;
min-height: 160px;
max-width: 460px;
}
.hero-sub-list { list-style: none; }
.hero-sub-list li {
padding: 6px 0 6px 20px;
position: relative;
border-bottom: 1px dashed rgba(11, 37, 69, 0.08);
line-height: 1.45;
}
.hero-sub-list li:last-child { border-bottom: none; }
.hero-sub-list li::before {
content: "→";
position: absolute;
left: 0;
color: var(--bleu-momento);
font-size: 12px;
top: 7px;
}
@media (max-width: 980px) {
.hero-sub { margin-left: auto; margin-right: auto; }
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--bleu-momento);
color: var(--blanc);
padding: 14px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
letter-spacing: 0.2px;
box-shadow: 0 12px 28px -8px rgba(26, 108, 227, 0.45);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
cursor: pointer;
border: 0;
text-decoration: none;
}
.hero-cta:hover {
transform: translateY(-3px);
background: var(--bleu-profond);
box-shadow: 0 18px 36px -10px rgba(11, 37, 69, 0.5);
}
.hero-cta .arrow { font-size: 18px; transition: transform 0.2s ease; }
.hero-cta:hover .arrow { transform: translateX(4px); }
/* Colonne droite — fade vers la droite */
.hero-right {
position: relative;
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 80%, transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 80%, transparent 100%);
padding: 10px 24px 10px 10px;
margin: -10px -24px -10px -10px;
}
@media (max-width: 980px) {
.hero-right { -webkit-mask-image: none; mask-image: none; padding: 10px; margin: -10px; }
}
.tools-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
@media (max-width: 600px) {
.tools-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
/* Tuile d'outil */
.tool {
aspect-ratio: 1 / 1;
background: var(--blanc);
border: 1px solid rgba(11, 37, 69, 0.08);
border-radius: 14px;
display: grid;
place-items: center;
cursor: pointer;
padding: 14px;
transition:
transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
box-shadow 0.25s ease,
border-color 0.25s ease,
background 0.25s ease;
box-shadow: 0 4px 10px rgba(11, 37, 69, 0.04);
position: relative;
}
.tool img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.tool:hover {
transform: translateY(-4px) scale(1.06);
border-color: rgba(26, 108, 227, 0.3);
box-shadow: 0 14px 28px -10px rgba(26, 108, 227, 0.22);
z-index: 2;
}
.tool.is-active {
border-color: var(--bleu-momento);
box-shadow: 0 18px 36px -10px rgba(26, 108, 227, 0.3), 0 4px 10px -4px rgba(255, 107, 53, 0.1);
transform: translateY(-2px) scale(1.04);
}
.tool.is-active::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 16px;
border: 2px solid var(--bleu-momento);
pointer-events: none;
opacity: 0.5;
}
/* Tuiles fantômes */
.tool.is-ghost {
background: rgba(255, 255, 255, 0.55);
border: 1px dashed rgba(11, 37, 69, 0.12);
cursor: default;
box-shadow: none;
}
.tool.is-ghost:hover { transform: none; border-color: rgba(26, 108, 227, 0.2); box-shadow: none; }
.tool.is-ghost .ghost-icon { width: 60%; height: 60%; opacity: 0.35; color: var(--bleu-nuit); }
.tool.is-ghost .ghost-letter {
font-size: 18px;
font-weight: 700;
color: var(--bleu-nuit);
opacity: 0.3;
letter-spacing: -0.5px;
}
/* Tagline bas de hero */
.hero-tagline { margin-top: 70px; text-align: center; }
.hero-tagline p {
font-size: 15px;
font-weight: 500;
color: var(--gris-fonce);
letter-spacing: 0.2px;
max-width: 620px;
margin: 0 auto;
}
.hero-tagline p .accent { color: var(--bleu-momento); font-weight: 600; }
.hero-secondary-cta {
font-size: 15px;
font-weight: 600;
color: var(--bleu-profond);
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: color 0.2s;
letter-spacing: 0.1px;
}
.hero-secondary-cta:hover { color: var(--bleu-momento); }
.hero-secondary-cta .cta-arr { display: inline-block; transition: transform 0.2s; }
.hero-secondary-cta:hover .cta-arr { transform: translateY(3px); }
/* ── 2.2 SECTION PROBLÈME — COLONNES SCROLLANTES ── */
/*
* 3 colonnes de cards qui défilent verticalement en boucle.
* Affiche les frictions du quotidien avant la solution.
*/
.probleme-v2 {
background: var(--blanc);
padding: 100px 0 110px;
overflow: hidden;
}
.pv2-title {
font-size: clamp(20px, 3.2vw, 38px);
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.2;
color: var(--bleu-nuit);
margin-bottom: 60px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
/* Zone de défilement avec fade haut/bas */
.pv2-scene {
position: relative;
height: 480px;
overflow: hidden;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%, rgba(0,0,0,0.6) 12%,
black 24%, black 76%,
rgba(0,0,0,0.6) 88%, transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%, rgba(0,0,0,0.6) 12%,
black 24%, black 76%,
rgba(0,0,0,0.6) 88%, transparent 100%
);
}
.pv2-columns {
display: flex;
gap: 18px;
height: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--pad);
}
@media (max-width: 640px) {
.pv2-columns { gap: 12px; }
.pv2-col:nth-child(3) { display: none; }
}
.pv2-col { flex: 1; overflow: hidden; }
.pv2-col-inner {
display: flex;
flex-direction: column;
gap: 14px;
animation: pv2-scroll 22s linear infinite;
will-change: transform;
}
.pv2-col:nth-child(2) .pv2-col-inner { animation-duration: 30s; }
.pv2-col:nth-child(3) .pv2-col-inner { animation-duration: 18s; }
@keyframes pv2-scroll {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.pv2-col-inner { animation: none; }
}
/* Card problème */
.pv2-card-problem {
background: var(--gris-clair);
border: 1px solid rgba(11, 37, 69, 0.07);
border-radius: 14px;
padding: 22px 24px;
font-size: 15px;
font-weight: 400;
color: var(--gris-fonce);
line-height: 1.55;
flex-shrink: 0;
cursor: default;
}
.pv2-footer-cta {
font-size: clamp(16px, 1.8vw, 20px);
font-weight: 500;
color: var(--bleu-nuit);
opacity: 0.55;
margin: 0 auto;
letter-spacing: -0.3px;
text-align: center;
margin-bottom: 70px;
}
/* ── 2.3 SOLUTIONS — PORTES EXPANDABLES ── */
/*
* Grille de 5 domaines d'automatisation + 1 card marketing.
* Chaque carte se déplie pour révéler la liste complète + vidéo démo.
*/
.portes {
background: var(--gris-clair);
position: relative;
}
.portes-title {
text-align: left;
max-width: 760px;
font-size: clamp(20px, 3.2vw, 38px);
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.2;
color: var(--bleu-nuit);
margin-bottom: 20px;
}
.portes-title-accent {
background: var(--gradient-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 800;
}
.portes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
align-items: start;
}
@media (max-width: 980px) { .portes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .portes-grid { grid-template-columns: 1fr; } }
.porte {
background: var(--blanc);
border-radius: 16px;
padding: 32px 28px;
border: 1px solid rgba(11, 37, 69, 0.08);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
box-shadow: 0 2px 10px rgba(11, 37, 69, 0.05);
cursor: pointer;
}
.porte:hover:not(.is-open) {
transform: translateY(-6px);
box-shadow: 0 24px 44px -18px rgba(26, 108, 227, 0.22);
border-color: rgba(26, 108, 227, 0.25);
}
.porte.is-open {
border-color: rgba(26, 108, 227, 0.38);
box-shadow: 0 20px 60px -16px rgba(26, 108, 227, 0.26), 0 0 0 1px rgba(26, 108, 227, 0.1);
position: relative;
z-index: 10;
transform: scaleX(1.02) translateY(-3px);
transform-origin: center top;
}
.porte-icon {
width: 48px;
height: 48px;
background: rgba(26, 108, 227, 0.08);
border-radius: 12px;
display: grid;
place-items: center;
margin-bottom: 20px;
color: var(--bleu-momento);
transition: background 0.22s ease;
}
.porte:hover .porte-icon { background: rgba(26, 108, 227, 0.14); }
.porte h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; color: var(--noir-doux); letter-spacing: -0.2px; }
.porte ul { list-style: none; }
.porte ul li {
font-size: 14px;
color: var(--gris-fonce);
padding: 5px 0 5px 14px;
position: relative;
line-height: 1.45;
}
.porte ul li::before {
content: "–";
position: absolute;
left: 0;
top: 5px;
color: var(--gris-moyen);
font-size: 13px;
}
/* Panel dépliable */
.porte-expandable {
overflow: hidden;
max-height: 0;
transition: max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}
.porte.is-open .porte-expandable { max-height: 900px; }
.porte-expandable ul { list-style: none; margin-bottom: 20px; }
/* Bloc vidéo placeholder */
.porte-video-block {
background: linear-gradient(135deg, rgba(26, 108, 227, 0.07) 0%, rgba(11, 37, 69, 0.04) 100%);
border: 1px solid rgba(26, 108, 227, 0.14);
border-radius: 12px;
height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
margin-bottom: 14px;
text-decoration: none;
transition: border-color 0.2s, background 0.2s;
}
.porte-video-block:hover {
border-color: rgba(26, 108, 227, 0.3);
background: linear-gradient(135deg, rgba(26, 108, 227, 0.11) 0%, rgba(11, 37, 69, 0.06) 100%);
}
.porte-video-play {
width: 30px;
height: 30px;
background: var(--bleu-momento);
border-radius: 50%;
display: grid;
place-items: center;
color: white;
}
.porte-video-caption {
font-size: 10.5px;
color: var(--gris-moyen);
font-weight: 500;
text-align: center;
padding: 0 10px;
line-height: 1.35;
}
/* Bouton Découvrir */
.porte-btn-discover {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin-top: 16px;
font-size: 12.5px;
font-weight: 700;
color: var(--blanc);
background: var(--bleu-momento);
border: none;
padding: 10px 14px;
border-radius: 9px;
cursor: pointer;
font-family: inherit;
transition: opacity 0.2s, transform 0.2s;
}
.porte-btn-discover:hover { opacity: 0.88; transform: translateY(-1px); }
.porte.is-open .porte-btn-discover { display: none; }
.porte-auto-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
font-size: 12.5px;
font-weight: 700;
color: var(--blanc);
background: var(--bleu-momento);
padding: 10px 16px;
border-radius: 10px;
text-decoration: none;
transition: opacity 0.2s, transform 0.2s;
}
.porte-auto-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.portes-closing-wrap { text-align: center; margin-top: 64px; }
.portes-closing {
display: block;
font-size: clamp(18px, 2.2vw, 26px);
font-weight: 500;
color: var(--bleu-nuit);
max-width: 660px;
margin: 0 auto 32px;
letter-spacing: -0.5px;
line-height: 1.3;
}
/* ── 2.4 SOLUTIONS — CARDS DÉTAIL V2 ── */
.portes-v2 { background: var(--gris-clair); padding: 80px 0; }
.pv2-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 52px;
align-items: start;
}
@media (max-width: 980px) { .pv2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pv2-grid { grid-template-columns: 1fr; } }
/* Card V2 service */
.pv2-card-service {
background: var(--blanc);
border-radius: 18px;
padding: 26px 22px 22px;
border: 1px solid rgba(11, 37, 69, 0.08);
box-shadow: 0 2px 10px rgba(11, 37, 69, 0.05);
position: relative;
z-index: 1;
scroll-margin-top: 100px;
transition:
transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.32s ease,
border-color 0.28s ease;
}
.pv2-card-service:hover:not(.is-open) {
transform: translateY(-4px);
box-shadow: 0 12px 32px -12px rgba(26, 108, 227, 0.18);
border-color: rgba(26, 108, 227, 0.2);
}
.pv2-card-service.is-open {
border-color: rgba(26, 108, 227, 0.38);
box-shadow: 0 20px 60px -16px rgba(26, 108, 227, 0.26), 0 0 0 1px rgba(26, 108, 227, 0.1);
z-index: 10;
transform: scaleX(1.025) translateY(-3px);
transform-origin: center top;
}
.pv2-card-header { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 15px; }
.pv2-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
background: rgba(26, 108, 227, 0.08);
border-radius: 10px;
display: grid;
place-items: center;
color: var(--bleu-momento);
transition: background 0.22s;
}
.pv2-card-service.is-open .pv2-icon,
.pv2-card-service:hover .pv2-icon { background: rgba(26, 108, 227, 0.14); }
.pv2-header-text { flex: 1; min-width: 0; }
.pv2-header-text h3 {
font-size: 14.5px;
font-weight: 700;
color: var(--bleu-nuit);
letter-spacing: -0.2px;
margin-bottom: 3px;
line-height: 1.3;
}
.pv2-header-text p { font-size: 12px; color: var(--gris-moyen); line-height: 1.4; }
.pv2-compact-list { list-style: none; margin-bottom: 18px; }
.pv2-compact-list li {
font-size: 12.5px;
color: var(--gris-fonce);
padding: 4px 0 4px 14px;
position: relative;
line-height: 1.4;
}
.pv2-compact-list li::before {
content: "–";
position: absolute;
left: 0;
top: 4px;
color: var(--gris-moyen);
font-size: 11px;
}
.pv2-btn-discover {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
font-size: 12.5px;
font-weight: 600;
color: var(--bleu-momento);
background: rgba(26, 108, 227, 0.06);
border: 1px solid rgba(26, 108, 227, 0.18);
padding: 8px 14px;
border-radius: 9px;
cursor: pointer;
font-family: inherit;
transition: background 0.2s, border-color 0.2s;
}
.pv2-btn-discover:hover { background: rgba(26, 108, 227, 0.11); border-color: rgba(26, 108, 227, 0.3); }
.pv2-card-service.is-open .pv2-btn-discover { background: rgba(26, 108, 227, 0.1); border-color: rgba(26, 108, 227, 0.32); }
.pv2-btn-arrow {
display: inline-block;
transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
font-size: 11px;
}
.pv2-card-service.is-open .pv2-btn-arrow { transform: rotate(180deg); }
.pv2-expanded {
overflow: hidden;
max-height: 0;
transition: max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}
.pv2-card-service.is-open .pv2-expanded { max-height: 1000px; }
.pv2-expanded-inner {
padding-top: 18px;
margin-top: 18px;
border-top: 1px solid rgba(11, 37, 69, 0.07);
}
.pv2-full-list {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px 12px;
margin-bottom: 20px;
}
@media (max-width: 560px) { .pv2-full-list { grid-template-columns: 1fr; } }
.pv2-full-list li {
font-size: 11.5px;
color: var(--gris-fonce);
padding: 5px 0 5px 15px;
position: relative;
line-height: 1.4;
}
.pv2-full-list li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--bleu-momento);
opacity: 0.45;
}
.pv2-video {
background: linear-gradient(135deg, rgba(26, 108, 227, 0.07) 0%, rgba(11, 37, 69, 0.04) 100%);
border: 1px solid rgba(26, 108, 227, 0.14);
border-radius: 12px;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
margin-bottom: 16px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
text-decoration: none;
}
.pv2-video:hover {
border-color: rgba(26, 108, 227, 0.28);
background: linear-gradient(135deg, rgba(26, 108, 227, 0.11) 0%, rgba(11, 37, 69, 0.06) 100%);
}
.pv2-video-play {
width: 32px;
height: 32px;
background: var(--bleu-momento);
border-radius: 50%;
display: grid;
place-items: center;
color: white;
}
.pv2-video-caption { font-size: 11px; color: var(--gris-moyen); font-weight: 500; text-align: center; padding: 0 12px; line-height: 1.35; }
.pv2-domain-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
font-size: 12.5px;
font-weight: 700;
color: var(--blanc);
background: var(--bleu-momento);
padding: 10px 16px;
border-radius: 10px;
text-decoration: none;
transition: opacity 0.2s, transform 0.2s;
letter-spacing: 0.1px;
}
.pv2-domain-cta:hover { opacity: 0.88; transform: translateY(-1px); }
/* ── 2.5 BANNIÈRE DÉMO ── */
.demo-banner-wrap {
background: var(--gris-clair);
padding: 56px 0;
scroll-margin-top: 80px;
}
.demo-banner {
background: linear-gradient(160deg, var(--bleu-nuit) 0%, var(--bleu-profond) 100%);
border-radius: 22px;
padding: 52px 56px;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.demo-banner::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(111, 168, 229, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(111, 168, 229, 0.08) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
border-radius: inherit;
opacity: 0.75;
}
.demo-banner-inner { position: relative; z-index: 1; }
.demo-banner h2 {
font-size: clamp(20px, 3.2vw, 38px);
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.2;
color: var(--blanc);
max-width: 655px;
margin: 0 auto 20px;
}
.demo-banner p {
font-size: 16px;
color: var(--bleu-ciel);
max-width: 655px;
margin: 0 auto 36px;
line-height: 1.65;
font-weight: 400;
}
@media (max-width: 640px) { .demo-banner { padding: 36px 24px; } }
/* ── 2.6 MÉTHODE 4 ÉTAPES ── */
.methode { background: var(--gris-clair); color: var(--bleu-nuit); }
.methode .section-title {
text-align: left;
max-width: 760px;
font-size: clamp(20px, 3.2vw, 38px);
font-weight: 600;
line-height: 1.2;
color: var(--bleu-nuit);
margin-bottom: 20px;
}
.etapes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 56px;
}
@media (max-width: 880px) { .etapes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .etapes-grid { grid-template-columns: 1fr; } }
.etape {
background: var(--blanc);
border: 1px solid rgba(11, 37, 69, 0.08);
border-radius: 14px;
padding: 28px 24px;
}
.etape-num { color: var(--bleu-nuit); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; margin-bottom: 14px; opacity: 0.7; }
.etape h3 { font-size: 17px; font-weight: 700; color: var(--bleu-nuit); margin-bottom: 12px; }
.etape p { color: var(--gris-fonce); font-size: 14px; font-weight: 400; }
/* ── 2.7 CTA / AUDIT FINAL ── */
.cta-final { background: var(--gris-clair); padding: 0 0 80px; }
.cta-final::before {
content: "";
display: block;
width: 35%;
margin: 0 auto 80px;
border-top: 1px solid rgba(11, 37, 69, 0.1);
}
.cta-split {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
max-width: 960px;
margin: 0 auto;
align-items: stretch;
}
@media (max-width: 768px) { .cta-split { grid-template-columns: 1fr; } }
.cta-card {
background: var(--blanc);
border: 1px solid rgba(11, 37, 69, 0.07);
box-shadow: 0 24px 60px -20px rgba(11, 37, 69, 0.12);
border-radius: 24px;
padding: 52px 48px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
@media (max-width: 720px) { .cta-card { padding: 36px 24px; } }
.cta-card::before {
content: "";
position: absolute;
width: 220px;
height: 220px;
top: -100px;
right: -80px;
border-radius: 50%;
background: var(--gradient-warm);
opacity: 0.14;
filter: blur(40px);
}
.cta-card::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
bottom: -120px;
left: -100px;
border-radius: 50%;
background: radial-gradient(circle, var(--bleu-ciel), transparent 70%);
opacity: 0.1;
}
.cta-card-main { text-align: center; }
.cta-card-main h2 {
font-size: clamp(22px, 2.8vw, 34px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.6px;
color: var(--bleu-nuit);
margin-bottom: 18px;
position: relative;
z-index: 1;
}
.cta-card-main > p {
font-size: 16px;
color: var(--gris-fonce);
margin: 0 auto 36px;
max-width: 700px;
position: relative;
z-index: 1;
}
.cta-fineprint {
margin-top: 28px;
font-size: 11.5px;
color: var(--gris-moyen);
position: relative;
z-index: 1;
letter-spacing: 0.2px;
}
/* ── 2.8 ENGAGEMENT (CITATION GÉANTE) ── */
.engagement {
background: var(--bleu-nuit);
color: var(--blanc);
text-align: center;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.engagement::before {
content: "";
position: absolute;
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: var(--gradient-warm);
filter: blur(120px);
opacity: 0.16;
pointer-events: none;
}
.engagement-quote {
font-size: clamp(36px, 5vw, 60px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -1.5px;
max-width: 940px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.engagement-quote .accent { color: var(--bleu-ciel); }
.engagement-sub {
margin-top: 28px;
color: var(--bleu-ciel);
font-size: 18px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
font-weight: 400;
}