@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;700;900&display=swap"); :root { --font-family-base: 'Lexend', sans-serif; --font-weight-light:   300;
--font-weight-regular: 400;
--font-weight-medium:  500;
--font-weight-bold:    700;
--font-weight-black:   900; --font-size-12: 0.75rem; --font-size-14: 0.875rem; --font-size-16: 1rem; --font-size-18: 1.125rem; --font-size-20: 1.25rem; --font-size-24: 1.5rem; --font-size-32: 2rem; --font-size-48: 3rem; --font-size-56: 3.5rem; --font-size-64: 4rem;  --line-height-18: 1.125rem; --line-height-20: 1.25rem; --line-height-22: 1.375rem; --line-height-24: 1.5rem; --line-height-26: 1.625rem; --line-height-30: 1.875rem; --line-height-32: 2rem; --line-height-36: 2.25rem; --line-height-48: 3rem; --line-height-56: 3.5rem; --line-height-64: 4rem; --line-height-80: 5rem;  --letter-spacing-default: 0;
--letter-spacing-quote:   0.25px;  --color-navy:               #1c1468; --color-blue:               #1000f0; --color-purple:             #5000b3; --color-pink:               #f9daea; --color-white-magenta:      #fffaff; --color-green:              #00661f; --color-cyan-green:         #005f6b; --color-white-cyan:         #fbfdfe; --color-black:              #101820; --color-primary:            var(--color-navy);
--color-secondary:          var(--color-blue);
--color-accent:             var(--color-purple);
--color-bg:                 var(--color-white-magenta);  --color-success:            #14ae5c;
--color-warning:            #e8b931;
--color-danger:             #ec221f; --color-chilled-gray-50:    #f2f3f7;
--color-chilled-gray-200:   #d3d5e4;
--color-chilled-gray-300:   #656b9f;
--color-chilled-gray-600:   #4b4e63; --color-title:              #191b29;
--color-chilled-gray-800:   #333652;  --radius-xl: 24px;
} *, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 16px; }
body {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular);
font-size:     var(--font-size-16);
line-height:   var(--line-height-26);
color:         var(--color-title);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}  .display-100 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-black); font-size:     var(--font-size-64); line-height:   var(--line-height-80); letter-spacing: var(--letter-spacing-default);
}
.display-90 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-black);
font-size:     var(--font-size-56); line-height:   var(--line-height-64); letter-spacing: var(--letter-spacing-default);
}
.display-80 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-black);
font-size:     var(--font-size-48); line-height:   var(--line-height-56); letter-spacing: var(--letter-spacing-default);
}
.display-70 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-black);
font-size:     var(--font-size-32); line-height:   var(--line-height-48); letter-spacing: var(--letter-spacing-default);
}
.display-60 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-black);
font-size:     var(--font-size-24); line-height:   var(--line-height-32); letter-spacing: var(--letter-spacing-default);
} .title-60 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-bold); font-size:     var(--font-size-24); line-height:   var(--line-height-36); letter-spacing: var(--letter-spacing-default);
}
.title-50 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-bold);
font-size:     var(--font-size-20); line-height:   var(--line-height-32); letter-spacing: var(--letter-spacing-default);
}
.title-40 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-bold);
font-size:     var(--font-size-18); line-height:   var(--line-height-30); letter-spacing: var(--letter-spacing-default);
}
.title-30 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-bold);
font-size:     var(--font-size-16); line-height:   var(--line-height-26); letter-spacing: var(--letter-spacing-default);
}
.title-20 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-bold);
font-size:     var(--font-size-14); line-height:   var(--line-height-22); letter-spacing: var(--letter-spacing-default);
}
.title-10 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-bold);
font-size:     var(--font-size-12); line-height:   var(--line-height-20); letter-spacing: var(--letter-spacing-default);
} .subtitle-50 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-medium); font-size:     var(--font-size-20); line-height:   var(--line-height-32); letter-spacing: var(--letter-spacing-default);
}
.subtitle-40 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-medium);
font-size:     var(--font-size-18); line-height:   var(--line-height-30); letter-spacing: var(--letter-spacing-default);
}
.subtitle-30 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-medium);
font-size:     var(--font-size-16); line-height:   var(--line-height-26); letter-spacing: var(--letter-spacing-default);
}
.subtitle-20 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-medium);
font-size:     var(--font-size-14); line-height:   var(--line-height-24); letter-spacing: var(--letter-spacing-default);
}
.subtitle-10 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-medium);
font-size:     var(--font-size-12); line-height:   var(--line-height-20); letter-spacing: var(--letter-spacing-default);
} .body-50 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular); font-size:     var(--font-size-20); line-height:   var(--line-height-32); letter-spacing: var(--letter-spacing-default);
}
.body-40 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular);
font-size:     var(--font-size-18); line-height:   var(--line-height-30); letter-spacing: var(--letter-spacing-default);
}
.body-30 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular);
font-size:     var(--font-size-16); line-height:   var(--line-height-26); letter-spacing: var(--letter-spacing-default);
}
.body-20 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular);
font-size:     var(--font-size-14); line-height:   var(--line-height-24); letter-spacing: var(--letter-spacing-default);
}
.body-10 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular);
font-size:     var(--font-size-12); line-height:   var(--line-height-18); letter-spacing: var(--letter-spacing-default);
} .caption-50 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-light); font-size:     var(--font-size-20); line-height:   var(--line-height-32); letter-spacing: var(--letter-spacing-default);
}
.caption-40 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-light);
font-size:     var(--font-size-18); line-height:   var(--line-height-30); letter-spacing: var(--letter-spacing-default);
}
.caption-30 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-light);
font-size:     var(--font-size-16); line-height:   var(--line-height-26); letter-spacing: var(--letter-spacing-default);
}
.caption-20 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-light);
font-size:     var(--font-size-14); line-height:   var(--line-height-22); letter-spacing: var(--letter-spacing-default);
}
.caption-10 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-light);
font-size:     var(--font-size-12); line-height:   var(--line-height-20); letter-spacing: var(--letter-spacing-default);
} .quote-50 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular);
font-size:     var(--font-size-20); line-height:   var(--line-height-32); letter-spacing: var(--letter-spacing-quote); }
.quote-40 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular);
font-size:     var(--font-size-18); line-height:   var(--line-height-30); letter-spacing: var(--letter-spacing-quote);
}
.quote-30 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular);
font-size:     var(--font-size-16); line-height:   var(--line-height-26); letter-spacing: var(--letter-spacing-quote);
}
.quote-20 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular);
font-size:     var(--font-size-14); line-height:   var(--line-height-22); letter-spacing: var(--letter-spacing-quote);
}
.quote-10 {
font-family:   var(--font-family-base);
font-weight:   var(--font-weight-regular);
font-size:     var(--font-size-12); line-height:   var(--line-height-20); letter-spacing: var(--letter-spacing-quote);
} h1, .h1 {
font-family:    var(--font-family-base);
font-weight:    var(--font-weight-black);
font-size:      var(--font-size-64);
line-height:    var(--line-height-80);
letter-spacing: var(--letter-spacing-default);
color:          var(--color-title);
}
h2, .h2 {
font-family:    var(--font-family-base);
font-weight:    var(--font-weight-black);
font-size:      var(--font-size-48);
line-height:    var(--line-height-56);
letter-spacing: var(--letter-spacing-default);
color:          var(--color-title);
}
h3, .h3 {
font-family:    var(--font-family-base);
font-weight:    var(--font-weight-bold);
font-size:      var(--font-size-24);
line-height:    var(--line-height-36);
letter-spacing: var(--letter-spacing-default);
color:          var(--color-title);
}
h4, .h4 {
font-family:    var(--font-family-base);
font-weight:    var(--font-weight-bold);
font-size:      var(--font-size-20);
line-height:    var(--line-height-32);
letter-spacing: var(--letter-spacing-default);
color:          var(--color-title);
}
h5, .h5 {
font-family:    var(--font-family-base);
font-weight:    var(--font-weight-bold);
font-size:      var(--font-size-18);
line-height:    var(--line-height-30);
letter-spacing: var(--letter-spacing-default);
color:          var(--color-title);
}
h6, .h6 {
font-family:    var(--font-family-base);
font-weight:    var(--font-weight-bold);
font-size:      var(--font-size-16);
line-height:    var(--line-height-26);
letter-spacing: var(--letter-spacing-default);
color:          var(--color-title);
}
p {
font-family:    var(--font-family-base);
font-weight:    var(--font-weight-regular);
font-size:      var(--font-size-16);
line-height:    var(--line-height-26);
letter-spacing: var(--letter-spacing-default);
}
a {
color:           var(--color-primary);
text-decoration: underline;
transition:      color 0.2s ease;
}
a:hover {
color: var(--color-secondary);
}
strong, b {
font-weight: var(--font-weight-bold);
}
blockquote {
font-family:    var(--font-family-base);
font-weight:    var(--font-weight-regular);
font-size:      var(--font-size-20);
line-height:    var(--line-height-32);
letter-spacing: var(--letter-spacing-quote);
color:          var(--color-chilled-gray-600);
border-left:    4px solid var(--color-primary);
padding-left:   1.5rem;
margin:         0;
}
small, .small {
font-family:    var(--font-family-base);
font-weight:    var(--font-weight-regular);
font-size:      var(--font-size-12);
line-height:    var(--line-height-18);
}  .bg-navy          { background-color: var(--color-navy); }
.bg-blue          { background-color: var(--color-blue); }
.bg-purple        { background-color: var(--color-purple); }
.bg-pink          { background-color: var(--color-pink); }
.bg-white-magenta { background-color: var(--color-white-magenta); }
.bg-green         { background-color: var(--color-green); }
.bg-cyan-green    { background-color: var(--color-cyan-green); }
.bg-white-cyan    { background-color: var(--color-white-cyan); }
.bg-black         { background-color: var(--color-black); } .bg-primary       { background-color: var(--color-primary); }
.bg-secondary     { background-color: var(--color-secondary); }
.bg-accent        { background-color: var(--color-accent); } .bg-success       { background-color: var(--color-success); }
.bg-warning       { background-color: var(--color-warning); }
.bg-danger        { background-color: var(--color-danger); } .bg-gray-50       { background-color: var(--color-chilled-gray-50); }
.bg-gray-200      { background-color: var(--color-chilled-gray-200); }
.bg-gray-300      { background-color: var(--color-chilled-gray-300); }
.bg-gray-600      { background-color: var(--color-chilled-gray-600); }
.bg-gray-800      { background-color: var(--color-chilled-gray-800); } .text-navy          { color: var(--color-navy); }
.text-blue          { color: var(--color-blue); }
.text-purple        { color: var(--color-purple); }
.text-pink          { color: var(--color-pink); }
.text-green         { color: var(--color-green); }
.text-cyan-green    { color: var(--color-cyan-green); }
.text-black         { color: var(--color-black); }
.text-white         { color: #ffffff; } .text-primary       { color: var(--color-primary); }
.text-secondary     { color: var(--color-secondary); }
.text-accent        { color: var(--color-accent); }
.text-title         { color: var(--color-title); } .text-success       { color: var(--color-success); }
.text-warning       { color: var(--color-warning); }
.text-danger        { color: var(--color-danger); } .text-gray-300      { color: var(--color-chilled-gray-300); }
.text-gray-600      { color: var(--color-chilled-gray-600); }
.text-gray-800      { color: var(--color-chilled-gray-800); } .border-navy        { border-color: var(--color-navy); }
.border-blue        { border-color: var(--color-blue); }
.border-purple      { border-color: var(--color-purple); }
.border-primary     { border-color: var(--color-primary); }
.border-gray-200    { border-color: var(--color-chilled-gray-200); }
.border-gray-300    { border-color: var(--color-chilled-gray-300); }
.border-success     { border-color: var(--color-success); }
.border-warning     { border-color: var(--color-warning); }
.border-danger      { border-color: var(--color-danger); }   .elioz-icon {
display:         inline-flex;
align-items:     center;
justify-content: center;
flex-shrink:     0;
color:           inherit; line-height:     1;
}
.elioz-icon svg {
display: block;
fill:    none; stroke:  currentColor;
stroke-width:     2;
stroke-linecap:   round;
stroke-linejoin:  round;
} .elioz-icon.size-16,
.elioz-icon.size-16 svg { width: 16px; height: 16px; }
.elioz-icon.size-20,
.elioz-icon.size-20 svg { width: 20px; height: 20px; }
.elioz-icon.size-24,
.elioz-icon.size-24 svg { width: 24px; height: 24px; }
.elioz-icon.size-32,
.elioz-icon.size-32 svg { width: 32px; height: 32px; }
.elioz-icon.size-40,
.elioz-icon.size-40 svg { width: 40px; height: 40px; }
.elioz-icon.size-48,
.elioz-icon.size-48 svg { width: 48px; height: 48px; } .elioz-icon.icon-primary   { color: var(--color-primary); }
.elioz-icon.icon-secondary { color: var(--color-secondary); }
.elioz-icon.icon-white     { color: #ffffff; }
.elioz-icon.icon-success   { color: var(--color-success); }
.elioz-icon.icon-warning   { color: var(--color-warning); }
.elioz-icon.icon-danger    { color: var(--color-danger); }
.elioz-icon.icon-muted     { color: var(--color-chilled-gray-300); }    .btn {
display:         inline-flex;
align-items:     center;
justify-content: center;
padding:         12px 18px;
border-radius:   8px;
border:          none;
cursor:          pointer;
font-family:     var(--font-family-base);
font-weight:     var(--font-weight-regular);
font-size:       var(--font-size-18);
line-height:     18px;
white-space:     nowrap;
text-decoration: none;
transition:      background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
} .btn--primary {
background-color: var(--color-blue); color:            #ffffff;
}
.btn--primary:hover {
background-color: var(--color-navy);
color:            #ffffff;
} .btn--secondary {
background-color: #ece9f8;
color:            #17166b;
border:           2px solid #ece9f8;
}
.btn--secondary:hover {
border-color:     var(--color-navy);
color:            var(--color-navy);
} .btn--ghost {
background-color: transparent;
color:            var(--color-navy);
border:           2px solid #ece9f8;
}
.btn--ghost:hover {
border-color: var(--color-navy);
} .btn--demo {
background-color: transparent;
color:            var(--color-navy); border:           2px solid #ece9f8;
}
.btn--demo:hover {
border-color:     var(--color-navy);
background-color: transparent;
} .btn--annuaire {
background-color: #ece9f8;
color:            #17166b;
font-weight:      var(--font-weight-bold);
text-transform:   uppercase;
width:            154px;
} .btn--lg {
padding:     16px 18px;
width:       100%;
justify-content: center;
} .btn-search {
display:          flex;
align-items:      center;
justify-content:  space-between;
gap:              12px;
padding:          18px 24px;
background-color: var(--color-blue); border:           1px solid var(--color-navy); border-radius:    1000px; cursor:           pointer;
width:            100%;
max-width:        322px;
transition:       background-color 0.2s ease;
}
.btn-search__label {
font-family:  var(--font-family-base);
font-weight:  var(--font-weight-medium); font-size:    var(--font-size-20);
color:        #ffffff;
white-space:  nowrap;
}
.btn-search__icon {
display:     flex;
align-items: center;
width:       24px;
height:      24px;
flex-shrink: 0;
color:       #ffffff;
}
.btn-search__icon svg {
width:  24px;
height: 24px;
stroke: currentColor;
fill:   none;
stroke-width:     2;
stroke-linecap:   round;
stroke-linejoin:  round;
}
.btn-search:hover {
background-color: var(--color-navy);
} .card-produit {
display:          flex;
flex-direction:   column;
align-items:      center;
justify-content:  space-between;
padding:          52px 60px;
background-color: var(--color-white-cyan); border:           2px solid var(--color-blue); border-radius:    53px;
box-shadow:       0 8px 10px 0 rgba(1, 22, 121, 0.10);
width:            466px;
height:           353px;
transition:       box-shadow 0.2s ease, transform 0.2s ease;
}
.card-produit:hover {
box-shadow:  0 16px 24px 0 rgba(1, 22, 121, 0.15);
transform:   translateY(-4px);
}
.card-produit__logo {
height:     64px;
width:      auto;
object-fit: contain;
flex-shrink: 0;
}
.card-produit__title {
font-family:  var(--font-family-base);
font-weight:  var(--font-weight-regular);
font-size:    26px;
line-height:  38px;
color:        #011679;
text-align:   center;
width:        100%;
} @media (max-width: 768px) {
.card-produit {
width:   100%;
height:  auto;
padding: 36px 32px;
}
} .site-header {
position:         sticky;
top:              0;
z-index:          100;
background-color: var(--color-white-magenta); border-bottom:    4px solid var(--color-pink); border-radius:    0 0 12px 12px;
width:            100%;
}
.site-header__inner {
display:         flex;
align-items:     center;
justify-content: space-between;
padding:         24px 65px;
max-width:       1661px;
margin:          0 auto;
}
.site-header__logo {
height:     48px;
width:      auto;
flex-shrink: 0;
} .site-nav {
display:     flex;
align-items: center;
gap:         5px;
}
.site-nav__group {
display:      flex;
align-items:  center;
gap:          5px;
padding-right: 16px;
border-right: 1px solid #e4e0f5;
}
.site-nav__actions {
display:     flex;
align-items: center;
gap:         40px;
} .nav-item {
display:         flex;
align-items:     center;
padding:         12px 18px;
font-family:     var(--font-family-base);
font-weight:     var(--font-weight-regular);
font-size:       var(--font-size-18);
color:           var(--color-navy); text-decoration: none;
white-space:     nowrap;
cursor:          pointer;
transition:      color 0.2s ease;
background:      none;
border:          none;
}
.nav-item:hover {
color: var(--color-blue);
} .nav-item--dropdown {
display:     flex;
align-items: center;
gap:         16px;
}
.nav-item--dropdown::after {
content:      '';
display:      inline-block;
width:        11px;
height:       6px;
background:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 6'%3E%3Cpath d='M1 1l4.5 4L10 1' stroke='%231c1468' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
transition:   transform 0.2s ease;
flex-shrink:  0;
}
.nav-item--dropdown.is-open::after {
transform: rotate(180deg);
}  .menu-dropdown {
position:         absolute;
top:              calc(100% + 4px);
left:             50%;
transform:        translateX(-50%);
z-index:          200;
display:          flex;
gap:              14px;
padding:          14px;
background-color: #fbfbff;
border-radius:    12px;
box-shadow:       0 8px 24px rgba(28, 20, 104, 0.10);
min-width:        723px;
opacity:          0;
visibility:       hidden;
transition:       opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
transform-origin: top center;
}
.menu-dropdown.is-open {
opacity:    1;
visibility: visible;
} .card-sub-menu {
flex:             1;
display:          flex;
flex-direction:   column;
gap:              8px;
padding:          14px 18px;
background-color: #ffffff;
border:           1px solid #ece9f8;
border-radius:    12px;
text-decoration:  none;
transition:       border-color 0.2s ease, box-shadow 0.2s ease;
min-height:       86px;
}
.card-sub-menu:hover {
border-color: var(--color-blue);
box-shadow:   0 4px 12px rgba(28, 20, 104, 0.08);
}
.card-sub-menu__logo {
height:      32px;
width:       auto;
object-fit:  contain;
object-position: left;
}
.card-sub-menu__desc {
font-family: var(--font-family-base);
font-weight: var(--font-weight-regular);
font-size:   var(--font-size-12);
color:       #908fbc;
line-height: normal;
}  .site-header-mobile {
display:          flex;
flex-direction:   column;
gap:              35px; background-color: var(--color-white-cyan); border-bottom:    3px solid var(--color-pink); border-radius:    0 0 12px 12px;
width:            100%;
} .site-header-mobile.is-collapsed {
transform:      translateY(-100%);
visibility:     hidden;
pointer-events: none;
} .mobile-topbar {
display:          flex;
align-items:      center;
justify-content:  space-between;
padding:          24px 36px; background-color: var(--color-white-cyan);
flex-shrink:      0;
}
.mobile-topbar__logo {
height:  40px; width:   auto;
display: block;
} .mobile-topbar__btn {
display:          flex;
align-items:      center;
justify-content:  center;
background:       none;
border:           none;
cursor:           pointer;
padding:          0;
flex-shrink:      0;
} .mobile-nav {
display:        flex;
flex-direction: column;
flex-shrink:    0;
}
.mobile-nav__item {
display:         flex;
align-items:     center;
justify-content: space-between;
padding:         6px 38px; border-bottom:   1px solid #f3f3f8; font-family:     var(--font-family-base);
font-weight:     var(--font-weight-regular); font-size:       var(--font-size-18); line-height:     30px; color:           var(--color-navy); text-decoration: none;
cursor:          pointer;
background:      none;
border-left:     none;
border-right:    none;
border-top:      none;
width:           100%;
text-align:      left;
min-height:      42px;
}
.mobile-nav__item--dropdown .nav-item__chevron { transition: transform 0.2s ease; }
.mobile-nav__item--dropdown.is-open .nav-item__chevron { transform: rotate(180deg); } .mobile-nav__sub {
background-color: #fbfbff;
display:          flex;
flex-direction:   column;
gap:              14px; padding-left:     14px;
padding-right:    14px;
padding-top:      0;
padding-bottom:   0;
width:            100%;
flex-shrink:      0;
overflow:         hidden;
max-height:       0;
transition:
max-height     .3s cubic-bezier(.16,1,.3,1),
padding-top    .3s cubic-bezier(.16,1,.3,1),
padding-bottom .3s cubic-bezier(.16,1,.3,1);
}
.mobile-nav__sub.is-open {
max-height:     500px;
padding-top:    14px;
padding-bottom: 14px;
} .mobile-nav__sub-card {
display:          flex;
flex-direction:   column;
gap:              8px;
padding:          14px 18px;
height:           86px;
width:            100%;
background-color: #ffffff;
border:           1px solid #ece9f8;
border-radius:    12px;
text-decoration:  none;
cursor:           pointer;
flex-shrink:      0;
transition:       border-color 0.15s ease, box-shadow 0.15s ease;
}
.mobile-nav__sub-card:hover {
border-color: var(--color-blue);
box-shadow:   0 4px 12px rgba(16, 0, 240, 0.08);
} .mobile-nav__sub-card__logo {
display:     flex;
align-items: center;
height:      32px;
width:       100%;
overflow:    hidden;
flex-shrink: 0;
}
.mobile-nav__sub-card__logo svg { height: 100%; width: auto; max-width: 100%; } .mobile-nav__sub-card__desc {
font-family: var(--font-family-base);
font-weight: var(--font-weight-regular);
font-size:   var(--font-size-12);
line-height: normal;
color:       var(--color-chilled-gray-300);
} .mobile-nav__actions {
display:        flex;
flex-direction: column;
gap:            25px;
padding:        18px 36px; flex-shrink:    0;
} .btn--annuaire-mobile {
display:          flex;
flex-direction:   row;
align-items:      center;
justify-content:  space-between;
width:            100%;
min-height:       83px;
background-color: #1000f0;
border:           1px solid #000e9a;
border-radius:    8px;
overflow:         hidden;
text-decoration:  none;
cursor:           pointer;
flex-shrink:      0;
padding:          15px 0 15px 13px;
transition:       background-color 0.15s ease;
}
.btn--annuaire-mobile:hover { background-color: #0c00cc; } .btn--annuaire-mobile__text {
display:        flex;
flex-direction: column;
gap:            4px;
flex:           1;
min-width:      0;
padding-right:  8px;
}
.btn--annuaire-mobile__title {
font-family:  var(--font-family-base);
font-weight:  var(--font-weight-bold);
font-size:    var(--font-size-18);
line-height:  18px;
color:        #ffffff;
white-space:  nowrap;
} .btn--annuaire-mobile__subtitle {
font-family:  var(--font-family-base);
font-weight:  var(--font-weight-light);
font-size:    var(--font-size-12);
line-height:  1.5;
color:        #ffffff;
white-space:  pre-line;
} .btn--annuaire-mobile__mascot {
position:       relative;
width:          120px;
height:         83px;
flex-shrink:    0;
overflow:       visible;
pointer-events: none;
align-self:     stretch;
display:        flex;
align-items:    flex-end;
}
.btn--annuaire-mobile__mascot img {
position:        absolute;
bottom:          -5px;
right:           -5px;
width:           120px;
height:          auto;
max-width:       none;
object-fit:      contain;
object-position: bottom right;
} .btn--demo-mobile {
display:         flex;
align-items:     center;
justify-content: center;
width:           100%;
padding:         16px 18px;
background:      transparent;
color:           var(--color-navy);
font-family:     var(--font-family-base);
font-weight:     var(--font-weight-regular);
font-size:       var(--font-size-18);
line-height:     18px;
border:          2px solid #ece9f8;
border-radius:   8px;
text-decoration: none;
cursor:          pointer;
transition:      border-color 0.15s ease, background-color 0.15s ease;
}
.btn--demo-mobile:hover { border-color: var(--color-navy); background: var(--color-chilled-gray-50); } .dial {
display:       inline-block;
width:         9px;
height:        9px;
border-radius: 50%;
background-color: var(--color-blue);
flex-shrink:   0;
}
.dial--active {
background-color: var(--color-blue);
}
.dial--inactive {
background-color: var(--color-chilled-gray-200);
}  .container {
width:     100%;
max-width: 1661px;
margin:    0 auto;
padding:   0 65px;
}
@media (max-width: 1024px) {
.container { padding: 0 36px; }
}
@media (max-width: 768px) {
.container { padding: 0 24px; }
} .hide-mobile  { display: block; }
.show-mobile  { display: none;  }
@media (max-width: 768px) {
.hide-mobile { display: none;  }
.show-mobile { display: block; }
} .relative { position: relative; }
.absolute { position: absolute; } * { box-sizing: border-box; }
a, button {
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}