:root {
--v3-nuit: #B7C7DA;
--v3-nuit-2: #9FB2CA;
--v3-verre: rgba(6, 11, 20, .78);
--v3-verre-bord: rgba(255, 255, 255, .08);
--v3-texte: #E6EDF6;
--v3-texte-2: #B9C6D8;
--v3-encre: #0E1E33;
--v3-encre-2: #3C4C63;
--v3-lagon: var(--sy-accent);
--v3-duree-voile: .45s;
--v3-marge: clamp(24px, 6vw, 120px);
--v3-carte: 560px;
--v3-carte-large: 720px;
}
.v3-home {
background: var(--v3-nuit);
color: var(--v3-encre);
}
.v3-home .ly-header {
background: rgba(183, 199, 218, .82);
border-bottom-color: var(--v3-verre-bord);
z-index: var(--sy-z-header);
}
.v3-home .ly-nav a { color: var(--v3-encre-2); }
.v3-home .ly-nav a:hover { color: var(--v3-encre); }
.v3-home .ly-header .ly-btn--outline {
color: var(--v3-encre);
border-color: rgba(14, 30, 51, .28);
}
.v3-home .ly-header .ly-btn--outline:hover {
background: rgba(14, 30, 51, .08);
border-color: rgba(14, 30, 51, .55);
}
.v3-home .ly-header .ly-btn--ink { background: var(--sy-accent); color: var(--ly-ink); }
.v3-home .ly-header .ly-btn--ink:hover { filter: brightness(1.12); }
.v3-home .ly-burger { border-color: rgba(14, 30, 51, .28); }
.v3-home .ly-burger span { background: var(--v3-encre); }
.v3-home .ly-nav.is-open {
background: var(--v3-nuit-2);
border-bottom-color: rgba(14, 30, 51, .12);
box-shadow: 0 18px 40px rgba(14, 30, 51, .22);
}
.v3-home .ly-nav.is-open a { border-bottom-color: var(--v3-verre-bord); }
.v3-home .ly-nav.is-open .ly-nav__mobile { color: var(--sy-accent); }
.v3-home .ly-lightbox { z-index: var(--sy-z-modal); }
.v3-home .ly-skip { z-index: var(--sy-z-top); }
.v3-scene { display: none; }
html.v3-3d .v3-scene {
display: block;
position: fixed; inset: 0;
z-index: 0;
background: var(--v3-nuit);
}
.v3-canvas { display: block; width: 100%; height: 100%; }
.v3-voile {
position: fixed; inset: 0;
background: var(--v3-nuit);
opacity: 0;
pointer-events: none;
z-index: var(--sy-z-fullscreen);
transition: opacity var(--v3-duree-voile) linear;
}
.v3-ouverture { display: none; }
html.v3-3d .v3-ouverture {
position: fixed; inset: 0;
z-index: var(--sy-z-modal);
display: grid; place-items: center; align-content: center;
gap: var(--sy-space-6);
padding: var(--sy-space-8);
text-align: center;
background: linear-gradient(180deg, #5475A7 0%, #A9B6C2 62%, #E7DFCF 100%);
color: var(--v3-encre);
transition: opacity .7s var(--ly-ease);
}
.v3-ouverture[hidden],
html.v3-3d .v3-ouverture[hidden] { display: none; }
html.v3-ouverture-active::before {
content: '';
position: fixed;
inset: 0;
z-index: var(--sy-z-modal);
background: linear-gradient(180deg, #5475A7 0%, #A9B6C2 62%, #E7DFCF 100%);
pointer-events: none;
}
html.v3-ouverture-active:has(.v3-ouverture:not([hidden]))::before { display: none; }
.v3-ouverture.is-fermee { opacity: 0; pointer-events: none; }
.v3-ouverture__titre {
margin: 0;
max-width: 14ch;
font-family: var(--sy-font-display);
font-weight: 700;
font-size: clamp(var(--sy-text-4xl), 9vw, 7rem);
line-height: .98;
letter-spacing: -.035em;
text-wrap: balance;
}
.v3-ouverture__titre em { font-style: normal; color: var(--sy-accent); }
.v3-ouverture__compteur {
margin: 0;
font-family: var(--sy-font-mono);
font-size: var(--sy-text-sm);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--v3-texte-2);
font-variant-numeric: tabular-nums;
}
.v3-ouverture__aide {
margin: 0;
font-size: var(--sy-text-sm);
color: var(--v3-texte-2);
opacity: .7;
}
.v3-ouverture .ly-btn[disabled] { opacity: .45; cursor: progress; transform: none; }
.v3-ouverture.is-prete .ly-btn { box-shadow: 0 0 0 6px rgba(var(--sy-accent-rgb), .18); }
html.v3-ouverture-active .v3-rail,
html.v3-ouverture-active .v3-passer { opacity: 0; pointer-events: none; }
.v3-rail { display: none; }
html.v3-3d .v3-rail {
position: fixed; left: var(--sy-space-5); top: 50%;
transform: translateY(-50%);
z-index: var(--sy-z-raised);
display: flex; flex-direction: column; gap: var(--sy-space-3);
transition: opacity .3s;
}
.v3-rail a {
display: flex; align-items: center; gap: var(--sy-space-3);
color: var(--v3-texte-2);
text-decoration: none;
font-family: var(--sy-font-mono);
font-size: var(--sy-text-13);
letter-spacing: .04em;
}
.v3-rail a::before {
content: "";
flex: 0 0 auto;
width: 10px; height: 10px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .55);
transition: background .2s, border-color .2s, transform .2s var(--ly-ease);
}
.v3-rail a span {
opacity: 0; transform: translateX(-6px);
padding: var(--sy-space-1) var(--sy-space-3);
background: var(--v3-verre);
border: 1px solid var(--v3-verre-bord);
border-radius: 100px;
white-space: nowrap;
transition: opacity .2s, transform .2s var(--ly-ease);
}
.v3-rail a:hover span,
.v3-rail a:focus-visible span { opacity: 1; transform: none; }
.v3-rail a:hover::before,
.v3-rail a:focus-visible::before { border-color: var(--sy-accent); }
.v3-rail a.is-active { color: var(--v3-texte); }
.v3-rail a.is-active::before {
background: var(--sy-accent);
border-color: var(--sy-accent);
transform: scale(1.25);
}
.v3-cta { display: none; }
html.v3-3d .v3-cta {
display: inline-flex;
position: fixed; right: var(--sy-space-6); bottom: var(--sy-space-6);
z-index: var(--sy-z-raised);
box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}
.v3-cta[hidden],
html.v3-3d .v3-cta[hidden] { display: none; }
.v3-passer { display: none; }
html.v3-3d .v3-passer {
display: inline-block;
position: fixed; left: var(--sy-space-6); bottom: var(--sy-space-6);
z-index: var(--sy-z-raised);
padding: var(--sy-space-2) var(--sy-space-3);
font-family: var(--sy-font-mono);
font-size: var(--sy-text-13);
letter-spacing: .04em;
color: var(--v3-texte-2);
text-decoration: none;
opacity: .75;
background: var(--v3-verre);
border: 1px solid var(--v3-verre-bord);
border-radius: 100px;
transition: opacity .3s;
}
html.v3-3d .v3-passer:hover { opacity: 1; color: var(--v3-texte); text-decoration: none; }
html.v3-3d:has(.v3-rail a.is-active:not([data-v3-rail-lien="rue"])) .v3-passer {
opacity: 0;
pointer-events: none;
}
.v3-parcours { position: relative; z-index: 1; }
.v3-station { position: relative; }
.v3-station__poster {
position: sticky; top: 0;
display: block;
width: 100%;
height: 100vh;
height: 100svh;
object-fit: cover;
object-position: center;
background: var(--v3-nuit-2);
transition: opacity .4s;
}
.v3-station__poster + .v3-panneau {
margin-top: -100vh;
margin-top: -100svh;
}
.v3-panneau {
position: relative; z-index: 1;
min-height: 100vh;
display: grid; align-content: center;
grid-template-columns: minmax(0, 1fr);
padding-block: var(--sy-space-12);
}
.v3-home .v3-panneau > .ly-wrap {
position: relative;
width: 100%;
max-width: var(--v3-carte);
margin-inline: auto;
padding: var(--sy-space-8);
background: var(--v3-verre);
border: 1px solid var(--v3-verre-bord);
border-radius: var(--ly-radius);
box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.v3-home .v3-panneau[data-v3-panneau="gauche"] > .ly-wrap { margin-inline: var(--v3-marge) auto; }
.v3-home .v3-panneau[data-v3-panneau="droite"] > .ly-wrap { margin-inline: auto var(--v3-marge); }
.v3-home .v3-panneau--large > .ly-wrap { max-width: var(--v3-carte-large); }
.v3-home .v3-panneau .ly-wrap > * + * { margin-top: var(--sy-space-6); }
.v3-home .v3-panneau .ly-head { margin: 0; max-width: none; }
.v3-home .v3-panneau .ly-head--center { text-align: left; }
.v3-home .v3-panneau .ly-head--center .ly-eyebrow { justify-content: flex-start; }
.v3-home .v3-panneau .ly-hero__texte { gap: var(--sy-space-5); }
.v3-home .v3-panneau .ly-hero__title { font-size: clamp(var(--sy-text-3xl), 3.2vw, 3.1rem); }
.v3-home .v3-panneau .ly-shot--wide { max-width: none; }
.v3-home .v3-panneau .ly-guards { padding: var(--sy-space-6); }
.v3-home .v3-panneau .ly-wrap > .v3-tiroir + .v3-tiroir { margin-top: 0; border-top: 0; }
.v3-station[data-v3-station="agence_comptable"] .v3-panneau > .ly-wrap::before {
content: "";
position: absolute; left: 0; right: 0; top: 0;
height: 3px;
border-radius: var(--ly-radius) var(--ly-radius) 0 0;
background: var(--sy-gradient-ia);
}
html.v3-3d .v3-station__poster { opacity: 0; pointer-events: none; }
html.v3-3d .v3-station.is-secours .v3-station__poster { opacity: 1; }
html.v3-3d .v3-panneau {
opacity: 0;
transform: translateY(18px);
transition: opacity .5s var(--ly-ease), transform .5s var(--ly-ease);
}
html.v3-3d .v3-panneau.is-in { opacity: 1; transform: none; }
html.v3-3d .v3-epilogue,
html.v3-3d .ly-footer { position: relative; z-index: 1; }
.ly-kicker {
display: inline-flex; align-items: center; gap: var(--sy-space-2);
margin: 0;
font-family: var(--sy-font-mono);
font-size: var(--sy-text-xs);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sy-accent);
}
.ly-kicker::before {
content: "";
width: 8px; height: 8px; border-radius: 2px;
background: var(--sy-accent);
}
.v3-entete {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--sy-space-2) var(--sy-space-5);
margin: 0 0 var(--sy-space-4);
}
.v3-entete .ly-eyebrow,
.v3-entete .ly-kicker { margin: 0; }
.v3-porte { margin: 0; font-size: var(--sy-text-15); }
.v3-tiroir {
border-top: 1px solid var(--v3-verre-bord);
border-bottom: 1px solid var(--v3-verre-bord);
}
.v3-tiroir > summary {
cursor: pointer;
list-style: none;
display: flex; align-items: center; justify-content: space-between;
gap: var(--sy-space-4);
padding: var(--sy-space-4) 0;
font-family: var(--sy-font-display);
font-weight: 600;
font-size: var(--sy-text-lg);
color: var(--v3-texte);
}
.v3-tiroir > summary::-webkit-details-marker { display: none; }
.v3-tiroir > summary::after {
content: "+";
flex: 0 0 auto;
font-family: var(--sy-font-mono);
font-size: var(--sy-text-xl);
color: var(--sy-accent);
transition: transform .2s var(--ly-ease);
}
.v3-tiroir[open] > summary::after { transform: rotate(45deg); }
.v3-tiroir > summary:hover { color: var(--sy-accent); }
.v3-tiroir__corps {
display: grid; gap: var(--sy-space-5);
padding: 0 0 var(--sy-space-5);
}
.v3-legende {
margin: 0;
font-family: var(--sy-font-mono);
font-size: var(--sy-text-xs);
letter-spacing: .02em;
color: var(--v3-texte-2);
opacity: .8;
}
.v3-pastilles {
display: flex; flex-wrap: wrap; gap: var(--sy-space-2);
margin: 0; padding: 0; list-style: none;
}
.v3-pastilles li {
padding: var(--sy-space-1) var(--sy-space-3);
font-family: var(--sy-font-mono);
font-size: var(--sy-text-13);
font-weight: 600;
letter-spacing: .04em;
color: var(--sy-accent);
border: 1px solid rgba(var(--sy-accent-rgb), .45);
border-radius: 100px;
}
.v3-exergue {
margin: 0;
padding: var(--sy-space-4) var(--sy-space-5);
border-left: 3px solid var(--sy-accent);
border-radius: 0 var(--ly-radius-sm) var(--ly-radius-sm) 0;
background: rgba(var(--sy-accent-rgb), .08);
font-family: var(--sy-font-display);
font-size: var(--sy-text-xl);
line-height: 1.3;
color: var(--v3-texte);
}
.v3-encart {
margin: 0;
padding: var(--sy-space-4) var(--sy-space-5);
border: 1px solid rgba(var(--sy-accent-rgb), .35);
border-radius: var(--ly-radius-sm);
background: rgba(var(--sy-accent-rgb), .08);
font-size: var(--sy-text-15);
line-height: 1.55;
color: var(--v3-texte);
}
.v3-appel {
margin: 0;
font-family: var(--sy-font-display);
font-weight: 700;
font-size: clamp(var(--sy-text-2xl), 3.4vw, var(--sy-text-4xl));
line-height: 1.1;
letter-spacing: -.025em;
color: var(--v3-texte);
text-wrap: balance;
}
.v3-appel-note { margin: 0; font-size: var(--sy-text-sm); color: var(--v3-texte-2); }
.ly-footer__credits {
margin: var(--sy-space-4) 0 0;
font-size: var(--sy-text-xs);
color: #6E8299;
}
.v3-parcours .ly-section,
.v3-parcours .ly-section--muted,
.v3-parcours .ly-section--tint,
.v3-parcours .ly-figures,
.v3-parcours .ly-trust { background: transparent; padding: 0; border: 0; }
.v3-parcours .ly-trust__list { justify-content: flex-start; }
.v3-parcours .ly-h2,
.v3-parcours .ly-h3,
.v3-parcours .ly-card h3,
.v3-parcours .ly-pain h3,
.v3-parcours .ly-founder h3,
.v3-parcours .ly-guards__list h4,
.v3-parcours .ly-shot figcaption strong,
.v3-parcours .ly-figures__n { color: var(--v3-texte); }
.v3-parcours .ly-lead,
.v3-parcours .ly-hero__lead,
.v3-parcours .ly-card p,
.v3-parcours .ly-pain p,
.v3-parcours .ly-founder p,
.v3-parcours .ly-shot figcaption,
.v3-parcours .ly-figures__l,
.v3-parcours .ly-figures__src,
.v3-parcours .ly-trust__list,
.v3-parcours .ly-note,
.v3-parcours .ly-guards__intro,
.v3-parcours .ly-guards__list p,
.v3-parcours .ly-hero__note { color: var(--v3-texte-2); }
.v3-parcours .ly-eyebrow { color: var(--sy-accent); }
.v3-parcours .ly-eyebrow::before { background: var(--sy-accent); }
.v3-parcours a:not(.ly-btn) { color: var(--sy-accent); }
.v3-parcours .ly-card,
.v3-parcours .ly-pain,
.v3-parcours .ly-founder,
.v3-parcours .ly-switch__col,
.v3-parcours .ly-guards {
background: rgba(255, 255, 255, .04);
border-color: var(--v3-verre-bord);
color: var(--v3-texte);
}
.v3-parcours .ly-switch { margin-top: 0; }
.v3-parcours .ly-switch__col h3 { color: var(--v3-texte-2); }
.v3-parcours .ly-switch__col li { border-top-color: var(--v3-verre-bord); }
.v3-parcours .ly-switch__col li::before { color: var(--v3-texte-2); }
.v3-parcours .ly-switch__col--after {
background: rgba(var(--sy-accent-rgb), .12);
border-color: rgba(var(--sy-accent-rgb), .35);
}
.v3-parcours .ly-switch__col--after h3,
.v3-parcours .ly-switch__col--after li::before { color: var(--sy-accent); }
.v3-parcours .ly-note { border-top-color: var(--v3-verre-bord); }
.v3-parcours .ly-founder__role {
background: rgba(var(--sy-accent-rgb), .14);
color: var(--sy-accent);
}
.v3-parcours .ly-shot img {
border-color: rgba(255, 255, 255, .14);
box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
background: var(--v3-nuit-2);
}
.v3-parcours .ly-shot figcaption strong { display: inline; margin: 0; }
.v3-parcours .ly-shot--zoom img:hover { border-color: var(--sy-accent); }
.v3-parcours .ly-btn--ghost { color: var(--v3-texte); }
.v3-epilogue {
position: relative; z-index: 1;
background: var(--sy-bg-surface);
color: var(--sy-text-main);
}
.v3-epilogue > .ly-section:first-child { background: var(--sy-tint); }
@media (prefers-reduced-motion: reduce) {
.v3-scene { display: none; }
html.v3-3d .v3-panneau { opacity: 1; transform: none; transition: none; }
.v3-station__poster { transition: none; }
}
@media (max-width: 899px) {
.v3-home { padding-bottom: var(--sy-space-16); }
.v3-station__poster {
height: 56vh;
height: 56svh;
}
.v3-station__poster + .v3-panneau { margin-top: 0; }
.v3-panneau { min-height: 0; padding-block: var(--sy-space-4); }
.v3-home .v3-panneau > .ly-wrap,
.v3-home .v3-panneau[data-v3-panneau="gauche"] > .ly-wrap,
.v3-home .v3-panneau[data-v3-panneau="droite"] > .ly-wrap,
.v3-home .v3-panneau--large > .ly-wrap {
max-width: none;
margin-inline: 0;
padding: var(--sy-space-6) var(--ly-gutter);
border-radius: 0;
border-inline: 0;
box-shadow: none;
}
.v3-home .v3-panneau .ly-hero__title { font-size: clamp(var(--sy-text-2xl), 8vw, var(--sy-text-4xl)); }
.v3-home .v3-cta {
display: flex;
position: fixed; left: 0; right: 0; bottom: 0;
z-index: var(--sy-z-raised);
justify-content: center;
border-radius: 0;
box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
}
.v3-home .v3-cta[hidden] { display: none; }
.v3-home .v3-cta:hover { transform: none; }
}
.v3-home .v3-rail a:focus-visible,
.v3-home .v3-cta:focus-visible,
.v3-home .v3-passer:focus-visible,
.v3-home .v3-tiroir > summary:focus-visible,
.v3-home [data-v3-entrer]:focus-visible {
outline: 3px solid var(--sy-accent);
outline-offset: 3px;
}