/* Les polices sont chargées par un dans le de chaque page : un
@import ici obligerait le navigateur à télécharger styles.css en entier
avant de découvrir la requête vers Google Fonts, puis la police elle-même. */
/* ==========================================================================
airlok — site vitrine
Design system Nautili, accent teal (#0D9488) aligné sur l'application.
========================================================================== */
:root {
/* Encres */
--navy: #0E113A; /* texte principal */
--navy-bg: #124549; /* fond sombre vert pétrole */
--navy-deep: #0C3336; /* pied de page */
--white: #FFFFFF;
--cream: #F8F9FE; /* fond de page neutre */
/* Surfaces pastel — c'est le bloc qui porte la couleur, jamais un filet.
Chaque section prend un aplat, et le contraste vient de l'alternance. */
--sand: #FFF4E8; /* pastel chaud : le monde du papier */
--sand-deep: #FFE7D0; /* même famille, un cran plus soutenu */
--sky: #EBF2FE; /* pastel froid */
--mint: #E4F6F1; /* pastel de marque, dérivé du teal */
/* Marque */
--teal: #0D9488; /* accent, pastilles, puces */
--teal-deep: #0F766E; /* aplats portant du texte blanc (contraste AA) */
--teal-ink: #0A5148; /* texte de marque sur pastel clair */
--teal-soft: #99F6E4; /* surlignage, badges */
/* Alerte (usage strictement limité aux états bloquants) */
--alert: #B42318;
--alert-soft: #FEE4E2;
/* Transparences d'encre (sur fond clair) */
--ink-70: rgba(14, 17, 58, 0.70);
--ink-60: rgba(14, 17, 58, 0.60);
--ink-40: rgba(14, 17, 58, 0.40);
--ink-14: rgba(14, 17, 58, 0.14);
--ink-08: rgba(14, 17, 58, 0.08);
/* Transparences crème (sur fond navy) */
--cream-70: rgba(248, 249, 254, 0.70);
--cream-60: rgba(248, 249, 254, 0.60);
--cream-24: rgba(248, 249, 254, 0.24);
--cream-12: rgba(248, 249, 254, 0.12);
/* Formes. Aucune bordure dans ce système : la hiérarchie passe par
l'aplat, le rayon et l'ombre. */
--r-xl: 32px; /* grands blocs de section */
--r-lg: 24px; /* cartes, maquettes */
--r-md: 16px; /* éléments internes */
--r-sm: 10px;
--r-pill: 100px;
--r-btn: 8px; /* boutons : rectangulaires, pas en pilule */
/* Ombres : très diffuses, jamais dures. */
--lift: 0 1px 2px rgba(14, 17, 58, 0.04), 0 10px 28px rgba(14, 17, 58, 0.07);
--lift-lg: 0 2px 6px rgba(14, 17, 58, 0.04), 0 24px 56px rgba(14, 17, 58, 0.11);
--display: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--maxw: 1380px;
--pad: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 92px;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--body);
font-size: 16.5px;
line-height: 1.55;
color: var(--navy);
background: var(--cream);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: var(--display);
font-weight: 600;
line-height: 1.15;
margin: 0;
letter-spacing: -0.015em;
}
h1 { font-size: clamp(36px, 4.5vw, 62px); font-weight: 600; }
h2 { font-size: clamp(28px, 3.8vw, 48px); font-weight: 600; }
h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 600; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
/* --------------------------------------------------------------- Structure */
.wrap {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding-inline: var(--pad);
}
section { padding-block: clamp(72px, 8vw, 128px); }
/* Le bloc de section : un aplat arrondi encarté, qui porte lui-même sa
couleur. C'est la brique de base de la direction artistique — le contraste
vient de l'alternance des aplats, pas d'un filet de séparation. */
.band {
border-radius: var(--r-xl);
padding: clamp(48px, 6vw, 96px) clamp(28px, 4vw, 72px);
}
.band--sand { background: var(--sand); }
.band--sky { background: var(--sky); }
.band--mint { background: var(--mint); }
.band--white { background: var(--white); }
.band--navy {
background: #124549;
color: var(--cream);
}
/* Les sections à fond plein conservent leurs classes, mais sans filet. */
.sec--n {
background: #124549;
color: var(--cream);
}
.sec--wash { background: var(--mint); }
/* Texte secondaire selon le fond du bloc */
.band--navy .lede,
.sec--n .lede { color: var(--cream-70); }
.band--navy .eyebrow,
.sec--n .eyebrow { color: var(--teal-soft); }
.eyebrow {
font-family: var(--body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-deep);
margin: 0 0 14px;
}
.sec--n .eyebrow { color: var(--teal-soft); }
.lede {
font-size: clamp(17px, 1.5vw, 20px);
color: var(--ink-60);
max-width: 62ch;
margin-top: 20px;
}
.sec--n .lede { color: var(--cream-60); }
.head { max-width: 74ch; }
/* Surlignage signature */
.hl {
background: linear-gradient(transparent 60%, var(--teal-soft) 60%, var(--teal-soft) 96%, transparent 96%);
padding-inline: 2px;
}
.sec--n .hl {
background: linear-gradient(transparent 60%, var(--teal) 60%, var(--teal) 96%, transparent 96%);
}
/* ----------------------------------------------------------------- Boutons */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--body);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: var(--white);
background: var(--teal-deep);
border-radius: var(--r-btn);
padding: 15px 24px;
text-decoration: none;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--lift);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--ghost {
background: var(--white);
color: var(--navy);
}
.sec--n .btn--ghost,
.band--navy .btn--ghost {
background: var(--cream-12);
color: var(--cream);
}
.sec--n .btn--ghost:hover,
.band--navy .btn--ghost:hover { background: var(--cream-24); box-shadow: none; }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btns {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 32px;
}
/* -------------------------------------------------------------- Navigation */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: transparent;
transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
/* Barre défilée, valeurs relevées sur qonto.com : blanc à 70 % d'opacité et
flou de 6px, sans ombre ni filet. Le fond reste volontairement translucide —
c'est le flou qui détache la barre, pas un aplat opaque. */
.nav.nav--scrolled {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.nav__in {
display: flex;
align-items: center;
gap: 24px;
height: 72px;
}
/* Le logo est un mot, sans vignette : c'est le parti de Qonto, dont la marque
ne repose que sur son signe typographique. Le resserrement des lettres fait
tout le travail — sans lui, « airlok » se lit comme du texte courant et non
comme une marque. */
.logo {
font-family: var(--display);
font-weight: 600;
font-size: 26px;
letter-spacing: -0.045em;
text-decoration: none;
color: var(--navy);
display: inline-flex;
align-items: center;
line-height: 1;
}
.nav__links {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 500;
}
.nav__links a {
text-decoration: none;
color: var(--navy);
padding: 6px 14px;
border-radius: var(--r-pill);
transition: background 0.15s ease, color 0.15s ease;
}
/* Seul le survol colore le lien. La page courante garde `aria-current` pour
les lecteurs d'écran, mais plus de pastille verte : signaler une page où
l'on se trouve déjà n'apporte rien et alourdit la barre. */
.nav__links a:hover {
color: var(--teal-ink);
background: var(--mint);
}
/* Qonto-Style Navbar Action Group */
.nav__actions {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.nav__login {
font-size: 14.5px;
font-weight: 600;
color: var(--navy);
text-decoration: none;
padding: 8px 14px;
border-radius: 100px;
transition: color 0.15s ease, background 0.15s ease;
}
.nav__login:hover {
color: var(--teal-ink);
background: var(--mint);
}
/* Même traitement que l'ancien bouton WhatsApp : aplat teal profond, et au
survol l'aplat s'éclaircit avec une ombre teintée. */
/* Aucune reprise du rayon ni du calage : le bouton hérite de `.btn` et
`.btn--sm`, donc de la pilule commune à tous les boutons du site. Il n'ajoute
que sa couleur. */
.btn--register {
background: var(--teal-deep);
color: #FFFFFF !important;
border: none;
transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn--register:hover {
background: var(--teal);
color: #FFFFFF !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(13, 148, 136, 0.35);
}
@media (max-width: 860px) {
.nav__links { display: none; }
}
/* Libellé court du bouton de navigation sur petit écran */
.nav__in .btn .short { display: none; }
@media (max-width: 640px) {
.nav__in { gap: 8px; }
.logo { font-size: 20px; }
.nav__login { display: none; }
}
/* ============================================== Diagramme « avant / après » */
.flows {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
margin-top: clamp(30px, 4vw, 48px);
}
@media (max-width: 860px) { .flows { grid-template-columns: 1fr; } }
.flow-card {
border-radius: var(--r-lg);
padding: clamp(24px, 2.6vw, 34px);
background: var(--white);
box-shadow: var(--lift);
}
.flow-card--new {
background: var(--navy);
box-shadow: none;
color: var(--cream);
}
.flow-tag {
font-family: var(--body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-40);
margin: 0 0 22px;
}
.flow-card--new .flow-tag { color: var(--teal-soft); }
/* Le rail vertical et ses étapes */
.flow {
list-style: none;
margin: 0;
padding: 0 0 0 44px;
}
.flow li {
position: relative;
padding-bottom: 26px;
}
.flow li:last-child { padding-bottom: 0; }
/* Le segment de rail appartient à l'étape : il s'arrête donc tout seul
après la dernière, sans dépasser. */
.flow li::before {
content: "";
position: absolute;
left: -30px;
top: 27px;
bottom: -5px;
width: 2px;
background: var(--ink-14);
}
.flow-card--new .flow li::before { background: var(--cream-24); }
.flow li:last-child::before { display: none; }
.flow b {
display: block;
font-family: var(--display);
font-weight: 600;
font-size: clamp(16px, 1.5vw, 18px);
line-height: 1.25;
}
.flow span {
display: block;
margin-top: 4px;
font-size: 14.5px;
color: var(--ink-60);
}
.flow-card--new .flow span { color: var(--cream-60); }
/* La pastille posée sur le rail.
Sélecteur à deux classes : il doit battre `.flow span`, qui style les
descriptions et écraserait sinon le display:flex du centrage. */
.flow .flow-mark {
position: absolute;
left: -44px;
top: -4px;
margin: 0;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--body);
font-weight: 600;
font-size: 13.5px;
line-height: 1;
background: var(--sand-deep);
color: var(--ink-60);
}
.flow-card--new .flow-mark {
background: var(--cream-12);
color: var(--teal-soft);
}
/* Aboutissement : l'échec d'un côté, le résultat de l'autre */
.flow li.is-bad b { color: var(--alert); }
.flow li.is-bad .flow-mark {
background: var(--alert-soft);
color: var(--alert);
}
.flow li.is-good .flow-mark {
background: var(--teal);
color: var(--white);
}
/* Révélation en cascade des étapes, pilotée par la carte parente */
.js .flow li {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.js .rv.in .flow li { opacity: 1; transform: none; }
.js .flow li:nth-child(2) { transition-delay: 0.12s; }
.js .flow li:nth-child(3) { transition-delay: 0.24s; }
.js .flow li:nth-child(4) { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
.js .flow li { opacity: 1; transform: none; transition: none; }
}
/* -------------------------------------------------------------------- Hero */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(48px, 7vw, 88px); }
/* ================================================= ALAN STYLE FULL-BLEED HERO */
.hero-alan {
position: relative;
width: 100%;
height: 100vh;
min-height: 640px;
background: #F7F0E6;
overflow: hidden;
display: flex;
align-items: center;
padding-top: clamp(80px, 9vh, 120px);
padding-bottom: clamp(40px, 5vh, 70px);
}
.hero-alan__bg-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
z-index: 1;
}
.hero-alan__bg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
display: block;
filter: contrast(1.02) brightness(1.01);
}
.hero-alan__fade {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background:
/* Dégradé Alan parfait : couleur 100% unie à gauche (0% à 22%), puis fondu extrêmement doux vers la droite */
linear-gradient(90deg, #F7F0E6 0%, #F7F0E6 22%, rgba(247, 240, 230, 0.95) 36%, rgba(247, 240, 230, 0.5) 54%, rgba(247, 240, 230, 0.1) 68%, transparent 80%);
z-index: 2;
pointer-events: none;
}
.hero-alan__content {
position: relative;
z-index: 5;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(32px, 5vw, 64px);
align-items: center;
width: 100%;
}
.hero-alan__text {
/* 620px et non 540 : à 540, le titre à 54px retombait sur quatre lignes.
Élargir la colonne plutôt que réduire le corps préserve l'impact de
l'accroche, qui est l'élément le plus important de la page. */
max-width: 620px;
}
.hero-alan__text h1 {
font-size: clamp(34px, 3.8vw, 54px);
line-height: 1.08;
color: var(--navy);
}
.hero-alan__widget-wrap {
position: relative;
display: flex;
justify-content: flex-end;
}
.hero-alan__widget {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.88);
border-radius: var(--r-xl);
padding: 24px 28px;
box-shadow: 0 16px 44px rgba(14, 17, 58, 0.15);
width: 100%;
max-width: 440px;
animation: floatBounce 4s ease-in-out infinite;
}
.hero-alan__widget-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
font-size: 15px;
color: var(--navy);
}
.hero-alan__badge {
font-size: 12px;
font-weight: 600;
color: var(--teal-ink);
background: var(--mint);
padding: 5px 12px;
border-radius: var(--r-pill);
}
.hero-alan__widget-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.hero-alan__widget-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--cream);
border-radius: var(--r-md);
gap: 12px;
}
.hero-alan__num {
display: block;
font-family: monospace;
font-size: 11px;
font-weight: 700;
color: var(--ink-40);
}
.hero-alan__item {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--navy);
}
@media (max-width: 980px) {
.hero-alan__content {
grid-template-columns: 1fr;
}
.hero-alan__bg-wrap {
width: 100%;
opacity: 0.3;
}
.hero-alan__fade {
width: 100%;
background: linear-gradient(to bottom, #FAF7F2 40%, rgba(250, 247, 242, 0.95) 100%);
}
.hero-alan__widget-wrap {
justify-content: center;
}
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
gap: clamp(32px, 4vw, 56px);
align-items: center;
}
@media (max-width: 980px) {
.hero__grid { grid-template-columns: 1fr; }
}
.hero h1 {
font-size: clamp(34px, 3.7vw, 53px);
max-width: 24ch;
}
.hero .lede { font-size: clamp(16.5px, 1.25vw, 18.5px); margin-top: 18px; }
.hero__note {
margin-top: 22px;
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 500;
color: var(--ink-70);
border-radius: var(--r-pill);
padding: 9px 18px;
background: var(--white);
box-shadow: var(--lift);
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--teal);
flex: none;
}
/* ------------------------------------------------------------------ Cartes */
.card {
background: var(--white);
color: var(--navy);
border-radius: var(--r-lg);
padding: clamp(26px, 2.6vw, 34px);
box-shadow: var(--lift);
}
.card--n {
background: var(--navy);
color: var(--cream);
box-shadow: none;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-60); font-size: 15.5px; }
.card--n p { color: var(--cream-60); }
.grid {
display: grid;
gap: 18px;
margin-top: clamp(32px, 4vw, 52px);
}
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
.grid--3, .grid--2 { grid-template-columns: 1fr; }
}
/* Bandeau « ce qui se perd » : trois constats, une ligne chacun */
.strip { padding-block: clamp(44px, 5vw, 72px); }
.facts {
display: grid;
gap: 0;
margin-top: clamp(22px, 3vw, 32px);
}
.facts p {
padding: 15px 18px;
border-radius: var(--r-md);
font-size: clamp(16px, 1.5vw, 18px);
color: var(--ink-60);
}
.facts b { color: var(--navy); font-weight: 600; }
/* Listes serrées de la page fonctionnalités */
ul.tight {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: grid;
gap: 10px;
font-size: 15px;
}
ul.tight li {
display: grid;
grid-template-columns: 13px 1fr;
gap: 11px;
line-height: 1.4;
}
ul.tight li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
margin-top: 8px;
}
/* ------------------------------------------------------ Partage LGO/airlok */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: clamp(32px, 4vw, 48px);
}
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }
.split ul {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: grid;
gap: 11px;
font-size: 15.5px;
}
.split li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 10px;
align-items: start;
}
.split li::before {
content: "";
width: 13px;
height: 13px;
border-radius: 50%;
background: currentColor;
margin-top: 5px;
opacity: 0.3;
}
.split .card--n li::before { background: var(--teal); opacity: 1; }
.split__tag {
font-family: var(--body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-40);
margin-bottom: 12px;
}
.card--n .split__tag { color: var(--teal-soft); }
/* --------------------------------------------------- Maquette d'interface */
/* `color` est réaffirmé : sur une section navy, la maquette hériterait
sinon du texte crème et son contenu deviendrait invisible. */
.mock {
background: var(--white);
color: var(--navy);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--lift-lg);
}
.mock__bar {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: var(--cream);
}
.mock__bar strong {
font-family: var(--display);
font-weight: 600;
font-size: 15px;
}
.mock__filter {
margin-left: auto;
font-size: 12px;
font-weight: 600;
background: var(--teal-deep);
color: var(--white);
border-radius: 100px;
padding: 5px 13px;
white-space: nowrap;
}
.mock__scroll { overflow-x: auto; }
.mock table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.mock th {
text-align: left;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-40);
padding: 13px 11px;
white-space: nowrap;
}
.mock td {
padding: 13px 11px;
box-shadow: inset 0 1px 0 var(--ink-08);
vertical-align: middle;
}
.mock td.num { white-space: nowrap; }
.mock tbody tr:first-child td { box-shadow: none; }
.mock td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.mock__foot {
padding: 12px 18px;
background: var(--cream);
font-size: 12.5px;
color: var(--ink-60);
}
.mock__cap {
margin-top: 12px;
font-size: 13px;
color: var(--ink-40);
}
.sec--n .mock__cap { color: var(--cream-60); }
/* ------------------------------------------------- Démonstration animée
Trois scènes qui se relaient toutes les 5 s. Toute l'animation est en
keyframes CSS, déclenchée par `.scene.is-on` : le JS ne fait que basculer
cette classe, et comme les scènes inactives sont en display:none, les
animations repartent d'elles-mêmes à chaque passage. */
/* Même respiration titre → contenu que le reste du site */
.demo { margin-top: clamp(32px, 4vw, 52px); }
.demo__tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: clamp(20px, 2.4vw, 28px);
}
.demo__tab {
position: relative;
overflow: hidden;
font-family: var(--body);
font-size: 13.5px;
font-weight: 500;
padding: 9px 17px;
border-radius: 100px;
background: var(--cream-12);
color: var(--cream-70);
border: 0; /* les