/* ========================
Base et Réinitialisation
======================== */
/* Réinitialisation de base des styles par défaut du navigateur */
:root{
/* ==============================
COULEURS STRUCTURANTES
============================== */
--navy: #0E1021; /* Presque noir, base institutionnelle profonde */
--navy-secondary: #2A304A; /* Bleu-gris équilibré – UI et hover */
--navy-tertiary: #A7B0D8; /* Accent froid lavande clair */
--blue: #30446B; /* Bleu digital lumineux, contraste fort */
--blue-secondary: #4682b4;
--blue-tertiary: #D4DBFF;
/* ==============================
COULEURS ÉCO & NATURELLES
============================== */
/* GREEN */
--green-light:#cae6ce;
--green-dark:#1a4320;
--green:#6fbb7a;
/* Blue */
--blue-light:#bcdfee;
/* Brown */
--brown-dark:#47403c;
/* Pumpkin */
--pumpkin-dark:#ab5123;
--pumpkin:#d06115;
--pumpkin-light:#f4bd98;
/* --green: #158A74; /* Vert jade équilibré, dynamique mais naturel */
/* --green-secondary: #38B798; */
--green-tertiary: #B9F0DF;
--beige: #EADBC8; /* Fond clair chaud et lumineux */
--mocha-mousse: #9C7761; /* Brun rosé contemporain, chic */
--brown: #6B4533; /* Accent profond, ancrage solide */
/* ==============================
COULEURS D’ÉMOTION
============================== */
--rose: #F56F91; /* Corail moderne, visible mais pas criard */
--rose-secondary: #F9AFC4;
--rose-tertiary: #FFE4EC;
--yellow: #fedf84; /* Doré lumineux, accent chaleureux */
--yellow-dark:#f7ce55;
--yellow-light:#fbeaba;
/* ==============================
NEUTRES PREMIUM
============================== */
--neutral-100: #FFFFFF;
--neutral-150:#f7f7f6; /* Blanc pur */
--neutral-200: #e8e7e3; /* Fond clair d’interface */
--neutral-300: #bfb4a3; /* Zones UI secondaires */
--neutral-400: #C7CBD4; /* Bordures et séparateurs */
--neutral-500: #9DA2AF; /* Texte secondaire clair */
--neutral-600: #6B7082; /* Texte standard sur fond clair */
--neutral-700: #424651; /* Texte fort sur beige ou bleu clair */
--neutral-800: ; /* Fond sombre élégant */
--neutral-900: #383e45; /* Identique au navy principal */
--neutral-border-card: var(--neutral-300);
/* ==============================
TEXTES & USAGES
============================== */
--neutral-text-primary: var(--neutral-900);
--neutral-text-secondary: var(--neutral-700);
--neutral-text-highlight: var(--blue);
--neutral-border: var(--neutral-400);
--button-border:var(--neutral-900);
--button-hover-bg:var(--neutral-900);
/* Accent positif / informatif */
--success: var(--green);
--info: var(--blue);
--warning: var(--yellow);
--error: #E65C5C;
--title:font-family:'neulis-neue', Arial, sans-serif;
}
.lg--bg--1
{background:linear-gradient(var(--neutral-200), var(--neutral-100)) ;}
.n-t-s{
color:var(--neutral-text-secondary)
}
/* COLOR */
/* Les neutres */
.neu600 { color: var(--neutral-600); }
.neu500 { color: var(--neutral-500); }
.neu400 { color: var(--neutral-400); }
.neu300 { color: var(--neutral-300); }
.neu200 { color: var(--neutral-200); }
.neu100 { color: var(--neutral-100); }
/* Pour les bordures */
.neu-border { border-color: var(--neutral-border); }
.bg600 { background-color: var(--neutral-600); }
.bg500 { background-color: var(--neutral-500); }
.bg400 { background-color: var(--neutral-400); }
.bg300 { background-color: var(--neutral-300); }
.bg200 { background-color: var(--neutral-200); }
.bg100 { background-color: var(--neutral-100); }
/* Pour les bordures si besoin */
.bg-border { background-color: var(--neutral-border); }
/* Les couleurs */
.cop0{color:var(--purple)}
.cop1{color:var(--purple-secondary)}
.cop2{color:var(--purple-tertiary)}
.cor0{color:var(--rose)}
.cor1{color:var(--rose-secondary)}
.cor2{color:var(--rose-tertiary)}
.cow0{color:var(--red)}
.cow1{color:var(--red-secondary)}
.cow2{color:var(--red-tertiary)}
.coy0{color:var(--yellow)}
.coy1{color:var(--yellow-secondary)}
.coy2{color:var(--yellow-tertiary)}
.cob0{color:var(--blue)}
.cob1{color:var(--blue-secondary)}
.cob2{color:var(--blue-tertiary)}
.cog0{color:var(--green)}
.cog1{color:var(--green-secondary)}
.cog2{color:var(--green-tertiary)}
.coo0{color:var(--orange)}
.coo1{color:var(--orange-secondary)}
.coo2{color:var(--orange-tertiary)}
.con0{color:var(--navy)}
.con1{color:var(--navy-secondary)}
.con2{color:var(--navy-tertiary)}
/* BACKGROUND-COLOR */
.bgp0{background-color:var(--purple)}
.bgp1{background-color:var(--purple-secondary)}
.bgp2{background-color:var(--purple-tertiary)}
.bgr0{background-color:var(--rose)}
.bgr1{background-color:var(--rose-secondary)}
.bgr2{background-color:var(--rose-tertiary)}
.bgw0{background-color:var(--red)}
.bgw1{background-color:var(--red-secondary)}
.bgw2{background-color:var(--red-tertiary)}
.bgy0{background-color:var(--yellow)}
.bgy1{background-color:var(--yellow-secondary)}
.bgy2{background-color:var(--yellow-tertiary)}
.bgb0{background-color:var(--blue)}
.bgb1{background-color:var(--blue-secondary)}
.bgb2{background-color:var(--blue-tertiary)}
.bgg0{background-color:var(--green)}
.bgg1{background-color:var(--green-secondary)}
.bgg2{background-color:var(--green-tertiary)}
.bgo0{background-color:var(--orange)}
.bgo1{background-color:var(--orange-secondary)}
.bgo2{background-color:var(--orange-tertiary)}
.bgn0{background-color:var(--navy)}
.bgn1{background-color:var(--navy-secondary)}
.bgn2{background-color:var(--navy-tertiary)}
/* Projects color */
/* BONDS */
.bond-project .p--bg--o,
.bond-project .avancement-remplissage{
background-color: var(--blue-light);
color:var(--neutral-text-primary);
border:1.5px solid var(--blue)
}
/* MINIBONS */
.minibon-project .p--bg--o,
.minibon-project .avancement-remplissage{
background-color:var(--pumpkin-light);
color:var(--neutral-text-primary);
border:1.5px solid var(--pumpkin-dark)
}
/* EQUITY */
.green--bg--o,
.equity-project .p--bg--o,
.equity-project .avancement-remplissage{
background-color:var(--green-light);
border:1.5px solid var(--green-dark);
color:var(--neutral-text-primary);
}
/* LOAN */
.loan-project .p--bg--o,
.loan-project .avancement-remplissage{
background-color: var(--yellow-light);
border:1.5px solid var(--yellow-dark);
color:var(--neutral-text-primary);
}
.avancement-remplissage{
border:none !important;
}
/* FILL SVG */
.sty0{fill:var(--yellow)}
.stg{fill:var(--green)}
.stgd{fill:var(--green-dark)}
.stgl{fill:var(--green-light)}
.stp{fill:var(--pumpkin)}
.stpd{fill:var(--pumpkin-dark)}
.stbl{fill:var(--blue-light)}
.stbd{fill:var(--neutral-900)}
.stn200{fill:var(--neutral-200)}
.stp0{fill:var(--purple)}
.stp1{fill:var(--purple-secondary)}
.stp2{fill:var(--purple-tertiary)}
.str0{fill:var(--rose)}
.str1{fill:var(--rose-secondary)}
.str2{fill:var(--rose-tertiary)}
.stw0{fill:var(--red)}
.stw1{fill:var(--red-secondary)}
.stw2{fill:var(--red-tertiary)}
/* .sty1{fill:var(--yellow-secondary)}
.sty2{fill:var(--yellow-tertiary)} */
.stb0{fill:var(--blue)}
.stb1{fill:var(--blue-secondary)}
.stb2{fill:var(--blue-tertiary)}
.stg1{fill:var(--green-secondary)}
.stg2{fill:var(--green-tertiary)}
.sto0{fill:var(--orange)}
.sto1{fill:var(--orange-secondary)}
.sto2{fill:var(--orange-tertiary)}
.stn0{fill:var(--navy)}
.stn1{fill:var(--navy-secondary)}
.stn2{fill:var(--navy-tertiary)}
.stt{fill:none}
.stw{fill:#FFF}}
/* Hierarchie */
/* Typographies */
/* --base-size: 14px;
--scale: 1.1;
--base-line-height: 1.6;
--h6: calc(var(--base-size) * var(--scale));
--h5: calc(var(--h6) * var(--scale));
--h4: calc(var(--h5) * var(--scale));
--h3: calc(var(--h4) * var(--scale));
--h2: calc(var(--h3) * var(--scale));
--h1: calc(var(--h2) * var(--scale));
--p:var(--base-size);
--small:0.833rem;
--h6-line-height: calc(var(--base-line-height) * 0.9);
--h5-line-height: calc(var(--base-line-height) * 0.95);
--h4-line-height: var(--base-line-height);
--h3-line-height: calc(var(--base-line-height) * 1.05);
--h2-line-height: calc(var(--base-line-height) * 1.1);
--h1-line-height: calc(var(--base-line-height) * 1.15);
--h-top:600; */
}
.text-danger{
color:var(--warning)!important;
}
.text-success{
color:var(--green)!important;
}
.under-title{
color:var(--neutral-text-secondary)
}
.head_liner{
display: block;
margin:0 0 12px 0;
}
p br{display: block;
margin-bottom: 24px;
content: "";}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size:100%;
}
html {
font-size: 100%; /* Définit la taille de la police par défaut à 100% */
line-height: 1.5; /* Hauteur de ligne par défaut pour une meilleure lisibilité */
width:100%;
height:100%;
letter-spacing: 0.05em;
}
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
max-width: 100%;
overflow-x: hidden;
background-repeat: no-repeat;
background-size: contain;
position:relative;
font-size:16px;
color:var(--neutral-text-primary);
letter-spacing: -.1px;
}
.h--h{
font-size:50px;
line-height:1;
}
h3.h--h{
font-size:36px;
}
h3.u--h{
font-size:22px;
font-weight:400;
color:var(--neutral-text-secondary);
margin:10px 0 30px;
}
.p--h{
font-weight:900;
}
p{font-size:1em; line-height: 1.4rem;color:var(--neutral-text-secondary);margin-bottom: 8px;}
.step_text{ font-family: 'graphie', Arial, Helvetica, sans-serif;
font-size: 0.9em;}
.p-legend,.step_legend{
font-size:0.7em;
font-weight:600;
display:block;
font-family: 'graphie', Arial, Helvetica, sans-serif;
}
.step_data{
font-size:0.8em;
font-family: 'graphie', Arial, Helvetica, sans-serif;
}
.p-data{
font-size:1em;
font-weight:600;
}
/* 2026-06-10 : list-style:none retire (cf. myoptions3.css) — masquait les */
/* puces du contenu WYSIWYG. On garde padding/margin a 0. */
ul, ol {
padding: 0;
margin: 0;
}
/* Suppression du style par défaut des liens */
a {
text-decoration: none;
color: inherit;
}
/* Suppression du style par défaut des images */
img {
max-width: 100%;
height: auto;
display: block;
}
/* ========================
Principes typographiques
======================== */
/* REFONTE 2026 — neutralise typo legacy Outfit/Geist. La charte v2 (base.css:78-96)
definit deja var(--font-secondary) sur h1-h2 et var(--font-primary) sur body.
Cf. tableau de bord §4 nettoyage du legacy.
h1,h2,h3{
font-family:'Outfit', sans-serif;
font-optical-sizing: auto;
font-weight: 400;
}
h4,h5,p,a,li,ol{
font-family: 'Geist', Arial, Helvetica, sans-serif;
}
*/
/* ========================
Principes colorimétriques
======================== */
.is--center{text-align: center!important;}
.bg-green{
background-color:#cfe1ca
}
.bg-green-secondary{
background-color: #e9f2e6;
}
.bg-blue{
background-color: #f7f9fc;
}
.warning{
color:var(--warning)
}
//* Classes de texte avec les couleurs */
.color-primary {
color: var(--primary-color);
}
.color-primary-hover {
color: var(--primary-hover);
}
.color-primary-02 {
color: var(--primary-02);
}
.color-primary-03 {
color: var(--primary-03);
}
.color-secondary-01 {
color: var(--secondary-01);
}
.color-secondary-02 {
color: var(--secondary-02);
}
.color-tertiary-01 {
color: var(--tertiary-01);
}
.color-tertiary-02 {
color: var(--tertiary-02);
}
.color-tertiary-03 {
color: var(--tertiary-03);
}
.color-tertiary-04 {
color: var(--tertiary-04);
}
.color-tertiary-05 {
color: var(--tertiary-05);
}
.color-neutral-primary {
color: var(--neutral-text-primary);
}
.color-neutral-secondary {
color: var(--neutral-text-secondary);
}
/* Classes de background avec les couleurs */
.bg-primary-01 {
background-color: var(--neutral-text-primary);
}
.bg-primary-hover {
background-color: var(--primary-hover);
}
.bg-primary-02 {
background-color: var(--primary-02);
}
.bg-primary-03 {
background-color: var(--primary-03);
}
.bg-secondary-01 {
background-color: var(--secondary-01);
}
.bg-secondary-02 {
background-color: var(--secondary-02);
}
.bg-tertiary-01 {
background-color: var(--tertiary-01);
}
.bg-tertiary-02 {
background-color: var(--tertiary-02);
}
.bg-tertiary-03 {
background-color: var(--tertiary-03);
}
.bg-tertiary-04 {
background-color: var(--tertiary-04);
}
.bg-tertiary-05 {
background-color: var(--tertiary-05);
}
.bg-neutral-primary {
background-color: var(--neutral-text-primary);
}
.bg-neutral-secondary {
background-color: var(--neutral-text-secondary);
}
.bg-neutral-200 {
background-color: var(--neutral-200);
}
.bg-neutral-100 {
background-color: var(--neutral-100);
}
a:hover{
color:inherit;
}
.flex-label{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.flex-label.flex-label-start{
justify-content: flex-start;
}
.flex-row-end{
display:flex;
flex-direction: row;
justify-content:end;
}
.badge{
border-radius:99em;
padding:4px 8px;
}
.media-rounded{
border-radius: 20px;
overflow: hidden; /* coupe les coins */
/* optionnel : gère le ratio */
aspect-ratio: 9 / 16;
}
.media-el{
height: 560px;
display: block;
object-fit: cover;
border-radius: 10px;
width: 426px;
object-position: left bottom;
}
.home__illu {
position: absolute;
top: 5%;
right: 10%;}
BUTTONS
.button-green{background-color:var(--success);color: var(--white);font-weight: 500;border-radius: 10px;}
.button-purple{background-color: var(--purple);color:var(--white)}
.button-purple:hover{background-color: var(--purple);color:#FFF}
.button-rounded{border-radius:25px;}
.button-primary {background-color:var(--blue)!important; color:var(--white)!important; font-weight: 400;}
.button-secondary {background-color:var(--blue)!important; color:var(--white)!important; font-weight: 400;}
.underscore-link, .underscore-link.active, .underscore-link:hover{display:inline-block;padding-bottom:2px;border-bottom:1px solid var(--neutral-text-primary);-webkit-transition:border-color .2s,border-color .2s,background-color .2s,color .2s;transition:border-color .2s,border-color .2s,background-color .2s,color .2s;text-decoration: none;white-space:nowrap;text-transform: capitalize!important;font-weight:500!important;color:var(--neutral-text-primary);font-size:0.9em}
.underscore-link.blue{color:#18a5c6;border-bottom:1px solid #18a5c6;}
/* ===== Style moderne inspiré du bouton 2 ===== */
.double-button-wrapper a{
font-family: "Outfit", sans-serif;
}
.button-modern {
display: inline-flex;
align-items: center;
justify-content: space-between;
border: 1.5px solid var(--button-border);
color: var(--neutral-900);
background-color: var(--blue-light);
font-weight: 500;
font-size: 0.9rem;
padding: 0 0 0 0.65em ;
text-decoration: none;
transition: all 0.25s ease;
overflow: hidden;
}
/* Bord arrondi hérité */
.button-rounded {
border-radius: 25px;
}
.button-modern.button-green{background-color: var(--green-light);color:var(--green-dark);border-color:var(--green-dark)}
.button-modern.button-brown{background-color: var(--neutral-200);color:var(--brown-dark);border-color:var(--brown-dark)}
/* Bloc rond pour la flèche */
.button-modern .button-icon {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--button-border);
color: #fff;
border-radius: 50%;
width: 2em;
height: 2em;
margin-left: 0.8em;
transition: all 0.25s ease;
font-family: 'Outfit' , sans-serif;
}
.button-green .button-icon{background-color: var(--green-dark);}
.button-brown .button-icon{background-color: var(--brown-dark);}
/* ========================
Grilles et Layouts
======================== */
/* Définition de l'espace utile de main */
main{
padding : 0 0;
}
.o-large-container{
margin-left:auto;
margin-right:auto;
max-width:1280px;
}
.o-thin-container::before,
.o-thin-container::after,
.o-large-container::before,
.o-large-container::after{
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
/* Conteneur de Base de Grille */
.grid-global{
display:grid;
grid-row-gap:16px;
padding:0px;
width:100%;
box-sizing:border-box;
}
.grid-container {
display: grid; /* Active le modèle de grille */
grid-gap: 16px; /* Espacement par défaut entre les éléments de la grille */
padding: 0 64px; /* Espace intérieur du conteneur */
width: 100%; /* Assure que le conteneur occupe toute la largeur disponible */
box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
}
/* Conteneur de Grille Fluide */
.grid-container-fluid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes flexibles avec une largeur minimale de 200px */
gap: 16px; /* Espacement entre les éléments de la grille */
padding: 16px; /* Padding pour l'intérieur du conteneur */
width: 100%; /* Occupe toute la largeur disponible */
box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}
/* Conteneur de grille pour le header */
.header-grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Trois colonnes : logo, menu principal, menu utilisateur */
align-items: center; /* Aligne verticalement les éléments au centre */
padding: 8px 16px; /* Padding interne pour éviter que le contenu touche les bords */
background-color: #fff; /* Couleur de fond du header */
border-bottom: 1px solid #e0e0e0; /* Ligne de séparation en bas du header */
}
/* Styles pour les éléments à l'intérieur de la grille */
.logo-container {
grid-column: 1; /* Place le logo dans la première colonne */
}
.navbar-container {
grid-column: 2; /* Place la navigation principale au centre */
display: flex; /* Utilise flexbox pour aligner les éléments à l'intérieur */
justify-content: center; /* Centre le contenu horizontalement */
}
.user-menu-container {
grid-column: 3; /* Place le menu utilisateur à droite */
display: flex; /* Utilise flexbox pour aligner les éléments à l'intérieur */
justify-content: flex-end; /* Aligne le contenu à droite */
}
.grid-section-main {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Par exemple, une grille à deux colonnes */
grid-gap: 16px;
padding: 16px;
background-color: #ffffff; /* Couleur de fond de la section principale */
}
.grid-section-1-2{
display: grid;
grid-template-columns: repeat(1, 1fr 2fr); /* Grille deux colonnes: 1 petite, 1 grande */
grid-gap: 16px;
padding: 16px;
}
.grid-section-plain {
display: grid;
grid-template-columns: repeat(1, 1fr); /* grille à une couleur */
grid-gap: 16px;
padding: 16px;
background-color: #ffffff; /* Couleur de fond de la section principale */
}
.grid-section-plain__background{
margin:0 16px;
background-color: var(--neutral-200);
border-radius:16px;
padding:24px;
}
.step-container-desktop {
display: block;
width: 100%;
border-radius: 32px;
padding: 16px;
margin: 32px 0;
position: relative;
}
.tuiles-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Grille fluide avec colonnes flexibles */
gap: 16px; /* Espacement entre les tuiles */
/* margin-top: 16px; Espacement en haut du conteneur */
}
.tuiles-container-title{
font-weight:700;
font-size:1.6em
}
/* Grid pour le formulaire de contact */
.contact-form-container{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
HOME PAGE
/* ----------------------------
Navbar
========================== */
/* Gestion des propriétés générale de navbar */
/* ============================================================
MIGRATED to static/css/header.css — 2026-04-24
Les règles navbar/header/dropdown ci-dessous sont neutralisées
car remplacées par les composants modernes de header.css.
Règle gardée uniquement .navbar h1 (sizing du logo) pour
compatibilité tant que le hack text-hide est en place.
Pour rollback : dé-commenter ce bloc.
============================================================ */
header.sticky-top-menu{
position: sticky;
top:0;
z-index: 1000;
}
.navbar h1{
height: 30px;
width: 60px;
background-repeat: no-repeat;
background-size: contain;
margin: 0;
}
/* ============================================================
FIN bloc migré.
============================================================ */
/* ============================================================
MIGRATED to static/css/header.css — 2026-04-24
Styles pour l'ancienne structure de sous-menu (.submenu, .submenu-item,
.submenu-illustration, .submenu-item__illu, __title, __subtitle)
n'est plus utilisee dans la refonte. Les templates nouveaux utilisent
.mo-megamenu__link, __title, __subtitle.
Pour rollback : retirer le "/*" et "*/" qui enveloppe le bloc.
============================================================ */
/*
header .submenu{
display: grid;
padding: 0;
align-items: start;
box-sizing: border-box;
display: grid ;
grid-template-columns: max-content max-content;
grid-column-gap: 10px;
column-gap: 10px;
}
header .submenu-item{
/* align-items: flex-start;
background-color: #f6f6f6;
border-radius: 5px;
box-sizing: border-box;
display: flex;
flex: 1 0 33%;
height: 100px;
padding: 15px;
transition: background .3s cubic-bezier(.25,.46,.45,.94); */
grid-column: 1;
}
header .submenu-item__illu{
display: block;
width:50px;
background-color: white;
border-radius:5px;
border:1px solid var(--neutral-200);
padding: 5px;
}
.header .submenu-item__illu__box{
width:50px;
height: 50px;
background-color: white;
border-radius:20px;
}
header .submenu-illustration__col_1{
border-radius: 10px;
width: 200px;
overflow: hidden;
display: none;
}
header .submenu-illustration__col_2{
border-radius: 10px;
width: 200px;
overflow: hidden;
max-height:145px;
display: none;
}
header .submenu-illustration__col_3{
border-radius:10px;
overflow:hidden;
width:200px;
max-height:200px;
display: none;
}
header .submenu-illustration{
grid-column: 2;
display: flex;
align-items: center;
justify-content: center;
/* background-color: var(--purple); */
padding: 15px;
height:100%;
}
header .submenu-illustration__col_1 .submenu-illustration{
background-color: var(--purple);
}
header .submenu-illustration__col_2 .submenu-illustration{
background-color: var(--rose);
}
header .submenu-illustration__col_3 .submenu-illustration{
background-color: var(--red);
}
header .submenu-illustration img{
display block;
width:100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease, opacity 0.4s ease;
border-radius: 10px;
}
header .submenu-illustration img:hover {
transform: scale(1.02); /* zoom léger */
}
header .submenu-item:hover{
background-color: var(--neutral-200);
border-radius:8px;
}
header .submenu-item__link{
/* align-items: flex-start;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
text-decoration: none;
width: 100%;
padding:0; */
display: flex;
align-items: center;
column-gap: 12px;
position: relative;
z-index: 0;
border-radius: 10px;
padding: 8px 16px 8px 8px;
text-decoration: none;
width: 100%;
}
header .submenu-item__link:hover{
}
/* header .submenu-item__link::before{
background-color: var(--primary-03);
border-radius: 50px;
bottom: 5px;
content: "";
height: 4px;
opacity: 1;
overflow: hidden;
position: absolute;
left:95%;
transition: opacity .3s cubic-bezier(.25,.46,.45,.94);
width: 4px;
}
header .submenu-item__link::after{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
bottom: 12px;
content: "\e801";
display: inline-block;
height: 4px;
line-height: 1em;
opacity: 0;
position: absolute;
left:95%;
text-decoration: inherit;
transform: translate3d(-150%, 0, 0);
transition: transform .3s ease-in-out, opacity .3s ease-in-out;
vertical-align: middle;
width: 4px;
content: "\21A3";
color: var(--primary-03);
display: inline-block;
vertical-align: middle;
} */
header .submenu-item.link:focus .submenu-item__link:before,
header .submenu-item.link:hover .submenu-item__link:before {
opacity: 0;
}
header .submenu-item.link .submenu-item__link:after {
opacity: 0;
}
header .submenu-item.link:focus .submenu-item__link:after,
header .submenu-item.link:hover .submenu-item__link:after {
opacity: 1;
}
header .submenu-item__title{
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1.6;
letter-spacing: .1px;
color: var(--neutral-text-primary);
margin: 0;
font-family: 'Outfit',sans-serif;
}
header .submenu-item__subtitle{
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.2;
letter-spacing: .1px;
color: var(--neutral-text-secondary);
margin:0
}
*/
/* REFONTE 2026 — règles supprimées : .dropdown-toggle::after et .show .dropdown-toggle::after */
/* header.css gère le caret via .mo-nav__caret (rotate au focus). Le legacy contenait des commentaires imbriqués qui empêchent un commentage propre, donc suppression directe. */
/* */
.dropdown {
position: relative; /* Assure que les dropdowns sont positionnés par rapport à leur parent */
}
.dropdown-menu {
position: absolute;
top: 100%; /* Place le menu juste en dessous du bouton dropdown */
left: 0;
z-index: 1000; /* Assure que le menu apparaît au-dessus des autres éléments */
display: none; /* Cache le menu par défaut */
}
.dropdown.show .dropdown-menu {
display: block; /* Affiche le menu lorsqu'il est activé */
}
#user-menu.show{
min-width: 300px;
/* height: 100%; */
min-height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
top:calc(100% + 16px);
max-width:70%
}
#user-menu .sub-menu{
align-content: center;
align-items: center;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 15px;
padding: 15px;
width: 100%;
}
#user-menu .submenu-header{
display: flex;
flex-direction:column;
align-items:start;
}
/* USER MENU */
#user-menu .submenu-item{
flex-direction: column;
height: 150px;
}
#user-menu .submenu-section__title{
font-size:18px;
font-weight:700;
font-variant: initial;
}
#user-menu .submenu-section-linkgroup{
display: flex;
flex-direction: column;
width:100%;
}
#user-menu .submenu-section__link{
display: flex;
flex-direction: row;
width:100%;
justify-content: space-between;
align-items: center;
padding : 5px 0;
font-weight:400;
font-size:14px;
}
#user-menu .submenu-section__link:hover{
color: currentColor;
}
#mobileMenuModal{
display:none;
}
#mobileMenuModal.show{
display:block;
}
.modal .modal-dialog-aside{
width: 350px; max-width:80%; height: 100%; margin:0;transform: translate(0); transition: transform .2s;
}
.modal .modal-dialog-aside .modal-content{ height: inherit; border:0; border-radius: 0;}
.modal .modal-dialog-aside .modal-content .modal-body{
overflow-y: auto }
.modal.fixed-left .modal-dialog-aside{ margin-left:auto; transform: translateX(100%); }
.modal.fixed-right .modal-dialog-aside{ margin-right:auto; transform: translateX(-100%); }
.modal.show .modal-dialog-aside{ transform: translateX(0); }
/* Style pour le menu principal */
.modal-menu {
opacity: 1;
visibility: visible;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
#modal-menu-aside-left .modal-body{
padding-top:3rem;
text-align: left;
}
#modal-menu-aside-left .modal-body.is_connected{
padding-top:0;
}
.modal-menu.d-none {
opacity: 0;
visibility: hidden;
}
/* Style pour les sous-menus avec translation */
.modal-submenu {
opacity: 0;
visibility: hidden;
transform: translateX(100%); /* Cache le sous-menu à droite */
transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease; /* Transition sur l'opacité et la position */
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
/* Sous-menu visible avec transition de glissement */
.modal-submenu.show {
opacity: 1;
visibility: visible;
transform: translateX(0); /* Amène le sous-menu en position normale */
}
#modal-menu-aside-left .nav-primary{
height: auto;
width: 100%;
}
#modal-menu-aside-left .has-children,
#modal-menu-aside-left .has-no-children{
margin-bottom: 8px;
margin-right: 0;
position: relative;
width:100%;
}
.has-no-children.outline .menu-item__link{
border-radius:30px;
border:1px solid currentColor;
}
#main-menu{
display: flex;
height: 100%;
align-items: stretch;
flex-direction: column;
width: 100%;
align-items: center;
display: inline-flex;
height: 100%;
}
#modal-menu-aside-left .modal-content{
/* height:0; */
padding-top:calc(100%*0.05);
background-color:var(--neutral-200);
}
.menu-item__link{
align-items: center;
background-color: transparent;
border: 1px solid transparent;
border-radius: 30px;
box-sizing: border-box;
color: #0e2948;
cursor: pointer;
display: flex;
position: relative;
text-decoration: none;
transition: background .3s cubic-bezier(.25,.46,.45,.94), color .3s cubic-bezier(.25,.46,.45,.94), opacity .3s cubic-bezier(.25,.46,.45,.94);
z-index: 1000;
justify-content: space-between;
padding: 4px 15px;
width: 100%;
}
.menu-item__link::after{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: currentcolor;
content: "\203A";
display: inline-block;
font-size: 16px;
line-height: 1em;
text-decoration: inherit;
vertical-align: middle;
width: 1em;
}
li a.back-to-menu{
display: flex;
flex-direction: row;
padding-top:3rem;
}
.is_connected li a.back-to-menu{
padding-top:5rem;
}
.back-to-menu{
align-items: center;
color: var(--neutral-text-primary);
display: inline-flex;
margin-bottom: 30px;
margin-left: 20px;
}
.back-to-menu::before{
webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: currentcolor;
content: "\2039";
display: inline-block;
font-size: 16px;
line-height: 1em;
text-decoration: inherit;
vertical-align: middle;
width: 1em;
}
.submenu-group{
display: flex;
align-items: flex-start;
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
overflow: initial;
padding: 0 15px;
box-sizing: border-box;
width:100%;
}
.submenu-group .submenu-item{
background-color: #fff;
flex: 0 0 auto;
height: auto;
margin-bottom: 10px;
width: 100%;
display: flex;
align-items: flex-start;
border-radius:5px;
box-sizing: border-box;
padding: 15px;
transition: background .3s cubic-bezier(.25,.46,.45,.94);
}
.submenu-group .submenu-item__link{
align-items: flex-start;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
text-decoration: none;
width: 100%;
}
.submenu-group .submenu-item__link::after{
background-color: currentColor;
bottom: 7px;
content: "\21A6";
height: 4px;
opacity: 1;
overflow: hidden;
position: absolute;
right: 7px;
transition: opacity .3s cubic-bezier(.25,.46,.45,.94);
width: 4px;
}
.submenu-group .submenu-item__description{
text-align: left;
font-weight: 400;
font-size: 12px;
}
.modal-connector{
padding: 0 1rem 4rem 1rem;
}
.wallet-box{
padding: 0 15px;
}
.wallet-box small{
font-size:10px;
font-weight:700;
}
.wallet-link{
padding : 0 0 0.5rem 0;
}
.wallet-link__content{
display:flex;
flex-direction: row;
align-items:center;
justify-content: space-between;
}
.submenu-item__title{
width:95%;
font-size:14px;
}
/* Menu connected */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/* ========================
Breadcrumbs (legacy v1 désactivés 2026-04-27)
Surchargeaient .mo-breadcrumb par spécificité id (#ariane = 0,1,0 vs classe 0,1,0
mais id+li = 0,1,1 et id+li+a = 0,1,2). Remplacés par .mo-breadcrumb dans
components.css. Voir 01-Charte/Composants/Composants-critiques-v2.md §4
======================== */
/*
#ariane {
margin:16px 0;
padding-left: 0;
text-align: left;
font-weight:700;
font-size:14px;
}
#ariane li, #ariane li a {
display: inline;
list-style: none;
font-weight:500;
color:var(--black);
}
#ariane li:not(:first-child)::before {
content: "\203A";
margin: 0 0.2em;
display: inline-block;
}
#ariane li:first-of-type::before {
content: none;
display: none;
}
*/
/* ========================
Utilitaires
======================== */
/* Style des Tuiles de Couleur */
.tuile {
background-color: #e0f7fa; /* Couleur de fond claire */
border-radius: 8px; /* Coins arrondis */
padding: 16px;
display: grid; /* Utilise une grille pour le contenu de la tuile */
grid-template-columns: 1fr auto; /* Deux colonnes : texte (large) et pictogramme (étroit) */
grid-template-rows: auto 1fr auto; /* Trois rangées : texte, espace flexible, bouton */
align-items: start; /* Aligne les éléments au début */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombrage pour effet de carte */
position: relative; /* Position relative pour le pictogramme */
min-height: 150px; /* Hauteur minimale pour les tuiles */
gap: 8px; /* Espacement entre les éléments internes */
}
/* Couleurs Personnalisées pour les Tuiles */
.tuile.neutral { background-color: var(--neutral-200); }
.tuile.neutral.darker { background-color:var(--neutral-border) }
.tuile.primary { background-color: var(--primary-color);color:var(--neutral-100) }
/* Style pour le Pictogramme */
.tuile-picto {
background-color: var(--neutral-100); /* Couleur de fond du pictogramme */
border-radius: 50%; /* Cercle pour le pictogramme */
padding: 8px; /* Espacement interne du pictogramme */
display: flex; /* Flexbox pour centrer le contenu du pictogramme */
justify-content: center;
align-items: center;
grid-row: 1 / span 2; /* Occupe les deux premières lignes de la grille */
justify-self: end; /* Aligne le pictogramme à droite */
}
/* Style pour le texte de la tuile */
.tuile-content {
font-size: 16px; /* Taille de police pour le texte */
font-weight: bold; /* Texte en gras */
color: #333; /* Couleur du texte */
grid-column: 1; /* Le texte reste dans la première colonne */
grid-row: 1; /* Place le texte dans la première ligne */
align-self: start; /* Aligne le texte au début de la tuile */
}
.primary .tuile-content{
color:var(--neutral-100)
}
.tuile .united{
grid-column: 1 / span 2;
}
/* Style pour le bouton en bas de la tuile */
.tuile-button {
grid-column: 1 / span 2; /* Le bouton occupe les deux colonnes */
grid-row: 3; /* Place le bouton dans la troisième ligne */
width: 100%; /* Pleine largeur */
padding: 10px;
font-size: 14px; /* Taille de la police du bouton */
color: var(--neutral-200); /* Couleur du texte du bouton */
background-color:var(--neutral-text-primary); /* Couleur de fond du bouton */
border: none; /* Pas de bordure */
border-radius: 4px; /* Coins arrondis pour le bouton */
text-align: center; /* Centre le texte du bouton */
cursor: pointer; /* Curseur de la souris sur le bouton */
transition: background-color 0.3s; /* Effet de transition pour la couleur au survol */
margin-top: 8px; /* Espacement au-dessus du bouton */
}
.tuile-button:hover {
background-color: var(--neutral-text-secondary); /* Couleur du bouton au survol */
}
a.tuile-button:hover{
color:var(--neutral-100)
}
/* Titre de la Vue par Étape */
/* Conteneur des Étapes pour Desktop */
.step-container-desktop h3{
font-size: 18px;
color: #333;
text-align: left;
font-weight: 600;
}
.step-header {
display: flex;
align-items: center; /* Aligne le pictogramme et le titre verticalement au centre */
margin-bottom: 40px; /* Espacement sous le titre */
}
.icon-container {
width: 40px; /* Taille de l'icône */
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #060606; /* Bordure noire de 2px */
border-radius: 50%; /* Bordure ronde */
margin-right: 8px; /* Espacement entre l'icône et le titre */
overflow: hidden; /* Coupe le contenu qui dépasse de la bordure ronde */
}
.icon-svg {
width: 20px; /* Ajuste l'image pour qu'elle prenne tout l'espace disponible dans le conteneur */
height: 100%;
color: #060606
}
.steps {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
position: relative;
}
.step {
text-align: center;
position: relative;
z-index: 2;
flex-grow: 1;
color:var(--white);
}
.step mark {
background: none;
color: inherit;
font-size: 14px;
display: block;
text-align: left;
}
.step.current {
font-weight: 600;
color:var(--black);
}
.step.active {
color: var(--black);
font-weight: 600;
}
.progress-bar {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
height: 4px;
background-color: var(--green-secondary);
z-index: 1;
margin:0 20px;
}
.progress-bar-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: var(--black);
width: 0;
transition: width 0.3s ease;
}
/* Affichage Mobile */
/* .step-container-mobile {
display: none;
} */
.step-container-desktop {
display: none;
}
.step-container-mobile {
display: block;
width: 100%;
background-color: #cfe1ca;
border-radius: 99em;
padding: 16px;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.step-content {
display: flex;
align-items: center ;
justify-content: space-between;
}
.progress-circle {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(var(--black) calc(var(--progress) * 1%), var(--green-secondary) 0%);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
color: var(--black);
margin-right: 16px;
position: relative;
}
.progress-circle::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
background: #fff; /* Couleur du fond central */
z-index: 1; /* Place le fond blanc au-dessus */
}
.progress-circle span {
position: relative;
z-index: 2; /* Place le texte au-dessus du tout */
}
.step-text {
display: flex;
flex-direction: column;
text-align: right;
padding-right: 16px;
}
.step-title {
font-size: 14px;
color: var(--black);
margin: 0 0 5px;
line-height: 1.2em;
}
.next-step {
font-size: 12px;
color: var(--white);
font-weight: 300;
}
/* Champs de formulaire */
.form-group {
display: flex;
flex-direction: column;
margin:0;
}
.form-control{
border-radius:0;
padding:0;
color:var(--black)
}
/* TO-DO définir la couleur de fond des inputs lors de la saisie. */
input{
background-color: transparent;
font-weight: 400;
}
input[type="text" ].form-control:focus {
outline: none; /* Supprime la bordure de focus par défaut */
box-shadow: none; /* Supprime l'ombre de focus par défaut */
background-color: var(--neutral-500); /* Supprime le fond gris */
}
.form-control:valid{
}
/* TO-DO Champs requis */
form text-area.form-control:required,
form input.form-control:required,
.form-group .select2-conteneur--default .select2-selection--single {
border:none;
border-bottom:1px solid var(--black);
font-weight:600;
border-radius: 0;
}
.select2-conteneur{
width:100%;
}
.select2-conteneur .select2-selection--single .select2-selection__rendered{
padding-left:0;
}
.select2-conteneur--default .select2-selection--single::after,
.select2-conteneur--default .select2-selection--multiple::after{
content:" ";
border: solid #666;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 6px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-radius: 3px;
position: absolute;
right: 1em;
top: 0.7em;
}
/* Select parameters - hover */
.select2-conteneur--default .select2-results__option--highlighted[aria-selected]{
background-color:var(--grey);
color:var(--black)
}
/* Select parameters - true */
.select2-conteneur--default .select2-results__option[aria-selected="true"]{
font-weight:900;
background-color:var(--grey);
}
/* To champs requis */
form text-area.form-control:required{
}
input[type="text" ].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="file"].form-control,
select.form-control{
font-weight: 600;
}
select.form-control{
padding-left:0;
}
.form-group label {
font-size: 12px;
margin-bottom: 0;;
color: var(--black);
font-weight: 600;
}
input[type=password].form-control:valid,
input[type=email].form-control:valid,
select.form-control,
input[type=text].form-control:valid {
border-top:none;
border-right:none;
border-left: none;
border-bottom :1px solid var(--black);
}
input[type=password].form-control:invalid,
input[type=email].form-control:invalid,
input[type=text].form-control:invalid {
border:none;
border-bottom:1px solid var(--neutral-text-secondary);
background-color: transparent;
}
/* TO-DO paramètrage des champs vides */
input[type=password].form-control:empty,
input[type=email].form-control:empty,
input[type=text].form-control:empty {
}
/* .form-group input,
.form-group textarea {
padding: 12px;
border: 1px solid #ddd;
border-radius: 30px;
font-size: 14px;
} */
.input-container {
position: relative; /* Position relative pour contenir le pseudo-élément */
display: inline-block; /* Permet de ne pas occuper toute la largeur */
}
.input-container input {
padding-right: 20px; /* Crée un espace pour l'astérisque */
}
.input-container::after {
content: '\002731 '; /* Contenu de l'astérisque */
/* font-size:20px; */
color: var(--warning); /* Couleur de l'astérisque */
position: absolute; /* Position absolue par rapport au conteneur */
right: 10px; /* Distance de l'astérisque par rapport au bord droit de l'input */
top: 50%; /* Centrage vertical */
transform: translateY(-50%); /* Ajustement pour aligner parfaitement au centre */
pointer-events: none; /* Empêche l'astérisque d'interférer avec l'interaction utilisateur */
}
/* Input de checkbox caché */
/* Conteneur du switch */
.form-switch-custom {
display: inline-block;
position: relative;
width: 75px; /* Ajustez selon vos besoins */
height: 25px; /* Ajustez selon vos besoins */
background-color: var(--grey); /* Couleur de fond du switch */
border-radius: 50px; /* Donne une forme arrondie */
cursor: pointer;
transition: background-color 0.3s;
}
/* Input de checkbox caché */
.form-switch-custom-input {
display: none;
}
/* Label pour le switch (bouton) */
.form-switch-custom-label {
position: absolute;
top: 2px;
left: 2px;
width: 21px; /* Ajustez selon vos besoins */
height: 21px; /* Ajustez selon vos besoins */
background-color: var(--black); /* Couleur du bouton du switch */
box-shadow: inset 0 0 0 0.4375em var(--white);
border-radius: 50%;
transition: left 0.3s;
}
/* État activé du switch */
.form-switch-custom-input:checked + .form-switch-custom-label {
left: 52px; /* Déplace le bouton sur la droite */
background-color: var(--white); /* Change la couleur du bouton quand il est activé */
box-shadow: inset 0 0 0 0.4375em var(--black);
}
.form-switch-custom-input:checked + .form-switch-custom-label:before {
content: 'Oui';
position: absolute;
left: -34px;
top: 2px;
color: #000;
font-size: 12px;
font-weight:700
}
.form-switch-custom-input:not(:checked) + .form-switch-custom-label:before {
content: 'Non'; /* Texte pour l'état désactivé */
position: absolute;
left: 30px; /* Ajustez selon vos besoins */
top: 2px;
color: #000; /* Couleur du texte */
font-size: 12px;
font-weight:700
}
/* Champs sur toute la largeur */
.form-group textarea {
grid-column: span 2;
resize: none;
height: 100px;
font-weight: 600;
color:var(--neutral-text-primary)!important;
border:none;
border-bottom: 1px solid var(--neutral-text-primary);
padding:5px;
}
/* Conteneur du bouton radio */
.radio-container {
display: flex;
align-items: center;
position: relative;
padding-left: 0;
cursor: pointer;
font-size: 14px;
color: var(--black);
justify-content: space-around;
}
.radio-item{
/* grid-template-columns: repeat(2, 1fr);
justify-content: space-between;
justify-items: center;
align-items: center;
display: grid; */
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
label.radio-input-l{
display: flex;
cursor: pointer;
font-weight: 500;
position: relative;
overflow: hidden;
margin-bottom: 0.375em;
}
input.radio-input {
position: absolute;
left: -9999px;
}
input.radio-input:checked + span {
background-color:var(--grey)
}
input.radio-input:checked + span:before {
box-shadow: inset 0 0 0 0.4375em var(--warning);
}
/* DÉSACTIVÉ 28/04/2026 : rule globale "label span" qui transformait tout span
enfant d'un label en pill (border-radius 99em + padding) — cassait les
radio cards et checkboxes v2.
label span {
display: flex;
align-items: center;
padding: 0.375em 0.75em 0.375em 0.375em;
border-radius: 99em;
transition: 0.25s ease;
}
*/
/* DÉSACTIVÉ 28/04/2026 : ces rules globales sur "label span" ajoutaient un
cercle ocre fantôme (::before border-radius 50% + box-shadow warning) sur
TOUT span enfant d'un label, ce qui cassait les radio cards et checkboxes
v2 (mo-form__radio-card, mo-form__checkbox). */
/*
label span:hover {
background-color: var(--grey);
}
label span:before {
display: flex;
flex-shrink: 0;
content: "";
background-color: #fff;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
margin-right: 8px;
transition: 0.25s ease;
box-shadow: inset 0 0 0 0.125em var(--warning);
}
*/
/* -----------------
ERROR FORMS
------------------ */
ul.errorlist{
margin-left: inherit;
padding-right: inherit;
padding-left: inherit;
margin-bottom: 0;
}
.form-group ul.errorlist li {
margin-left: inherit;
margin-right: inherit;
padding-left: inherit;
color:var(--warning)
}
.form-group ul.errorlist{
margin-left: inherit;
position: relative;
}
.form-group ul.errorlist li::before {
content: " \002762"; /* Code Unicode pour un point rond */
color: var(--warning); /* Couleur rouge pour le point */
font-weight: bold;
display: inline-block;
width: 1em;
}
.required::before {
content: '\002731 '; /* Contenu de l'astérisque */
/* font-size:20px; */
color: var(--warning); /* Couleur de l'astérisque */
}
/* -----------------
RADIO SWITCH
------------------ */
.switch {
position: absolute;
top: 70%;
right:5%;
/* left: 55%; */
width: 100px;
height: 30px;
text-align: center;
margin: -30px 0 0 -75px;
background: var(--grey);
transition: all 0.2s ease;
border-radius: 15px;
font-size: 0.9em;
}
.switch span {
position: absolute;
width: 20px;
height: 4px;
top: 50%;
left: 50%;
margin: -2px 0px 0px -4px;
background: #fff;
display: block;
transform: rotate(-45deg);
transition: all 0.2s ease;
}
.switch span:after {
content: "";
display: block;
position: absolute;
width: 4px;
height: 12px;
margin-top: -8px;
background: #fff;
transition: all 0.2s ease;
}
.switch label {
cursor: pointer;
color: rgba(0, 0, 0, 0.2);
width: 60px;
line-height: 30px;
transition: all 0.2s ease;
}
.switch label:not(:first-of-type) {
position: absolute;
right: 0px;
}
.switch label:first-child {
position: absolute;
left: 0px;
height: 20px;
right: inherit;
}
.toggle-radio input:not(:first-of-type):checked~.switch {
background: #f3f2f1;
}
.toggle-radio input:not(:first-of-type):checked~.switch span {
background: #fff;
margin-left: -8px;
}
.toggle-radio input:not(:first-of-type):checked~.switch span:after {
background: #fff;
height: 20px;
margin-top: -8px;
margin-left: 8px;
}
.toggle-radio input:first-child:checked~.switch label:first-child {
color: #212325;
font-weight: 900;
}
.toggle-radio input:not(:first-of-type):checked~.switch label:not(:first-of-type) {
color: #212325;
font-weight: 900;
}
/* ---------------------
KYC FORM
*/
.deck{
box-sizing: border-box;
display: flex;
/* min-width: calc(100% / 4); */
overflow: hidden;
padding: 16px 0 32px 0;
margin: 0;
/* max-width: calc(100% / 2); */
}
.flex-deck{
align-content: center;
align-items: center;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 15px;
/* padding: 15px; */
width: 100%;
}
.kyc-status{
display: inline-flex;
color:var(--neutral-text-secondary);
font-size:14px;
font-weight: 400;
align-content: center;
align-items: center;
}
.kyc-form-section{
align-items: stretch;
background-color: #f6f6f6;
border-radius: 5px;
box-sizing: border-box;
display: flex;
flex: 1 0 33%;
/* height: 100px; */
padding: 15px;
/* max-width: 25rem; */
height: 15rem;
align-content: space-between;
flex-direction: column;
justify-content: space-between;
}
.kyc-form-section-large{
min-width:100%;
height:auto;
}
.kyc-form-section.form-succeeded{
background-color: var(--green);
}
.kyc-form-section.form-succeeded .badge{
background-color: var(--neutral-100);
color:var(--green);
}
.kyc-form-section.form-in-progress .badge{
background-color: var(--neutral-500);
color: var(--neutral-text-secondary);
}
.kyc-form-section-title{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.kyc-form-section__title{
font-size:16px;
font-weight: 700;
margin:0;
}
.kyc-form-section-document{
height:40px;
display: inline-flex;
align-content: flex-start;
align-items: flex-start;
}
.kyc-form-section-document a{
height: 40px;
display: flex;
align-items: center;
font-size:12px;
font-weight:300;
}
.kyc-form-section-document img{
display: inline-block;
width:12px;
margin-right:5px;
}
.kyc-form-section-description{
min-height:50px;
display: block;
}
.kyc-form-section-description aside{
font-size: 12px;
font-weight: 500;
}
.kyc-form-section-description input.radio-input:checked + span,
.kyc-form-section-description label span:hover{
background-color: transparent;
}
.kyc-form-section__multiple{
display:flex;
flex-direction:row;
}
.kyc-form-section__multiple > * {
flex: 1;
width: 50%;
display: flex;
flex-direction: column;
}
.kyc-input{
display:flex;
flex-direction: row;
width:100%;
align-items: center;
justify-content: flex-end;
}
.kyc-input-col{
flex-direction: column;
}
.kyc-form-section-input{
min-height:120px;
margin-bottom:8px;
}
.kyc-form-section-input input{
margin-bottom:8px;
font-size:12px;
cursor:pointer;
font-weight: 300;
}
.kyc-form-section-input input[type=file]::file-selector-button {
margin-right: 8px;
border: none;
background: var(--primary-hover);
padding: 8px 12px;
color: var(--neutral-200);
cursor:pointer;
font-weight:500;
}
.kyc-form-section-input label{
margin-bottom: 4px;
}
.button-img{
display:flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding:10px;
background-color: var(--neutral-100);
border-radius:4px;
}
.button-img > *{
display:inline-block;
margin:0 5px;
}
.button__img{
width:20px
}
.button__text{
font-size:12px;
font-weight:500;
}
/* -------------------
HEADER
--------------------- */
header.connected, #top-bar.connected, .connected .megamenu, .connected .dropdown-menu-right{
background-color:var(--neutral-text-primary);
border-bottom:1px solid var(--neutral-border)
}
/* ----------------
MODAL BOXES
-------------------*/
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom:none;
}
.modal-title {
flex-grow: 1;
text-align: center;
}
.modal-header img {
margin-left: 10px;
width:50px;
display:inline-block;
}
.close {
margin-left: auto;
align-self: flex-start;
}
.modal-body{
text-align:center;
}
/* Checkbox (in progress */
/* Conteneur pour deux colonnes */
.custom-checkbox-container .column-checkbox {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Affiche en deux colonnes */
gap: 10px; /* Espace entre les options */
padding: 0;
margin: 0;
list-style: none; /* Enlève les puces */
}
/* Style des éléments de la liste */
.custom-checkbox-container .column-checkbox li {
display: flex;
align-items: center;
padding: 5px;
border-radius: 99em; /* Bordure arrondie */
transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Survol de chaque option */
.custom-checkbox-container .column-checkbox li:hover {
}
/* Masquer les cases à cocher par défaut */
.custom-checkbox-container .column-checkbox input[type="checkbox"] {
appearance: none; /* Enlève l'apparence par défaut de la case à cocher */
-webkit-appearance: none; /* Compatibilité avec Safari */
position: relative;
background-color: #fff;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
margin-right: 8px;
transition: 0.25s ease;
box-shadow: inset 0 0 0 0.125em var(--black);
cursor: pointer;
}
/* Style lorsque la case est cochée */
.custom-checkbox-container .column-checkbox input[type="checkbox"]:checked {
box-shadow: inset 0 0 0 0.4375em var(--black);
}
/* Styliser le label */
.custom-checkbox-container .column-checkbox label {
display: flex;
align-items: center;
cursor: pointer;
border-radius: 99em;
transition: background-color 0.3s ease;
margin: 0;
}
/* Appliquer le même style de survol au parent lorsque la case est cochée */
.custom-checkbox-container .column-checkbox input[type="checkbox"]:checked + label {
background-color: var(--grey); /* Applique la même couleur que survolée */
}
/* Appliquer le style de survol au parent lorsque la case est cochée */
.custom-checkbox-container .column-checkbox input[type="checkbox"]:checked + label:hover {
background-color: var(--grey); /* Assure que la couleur de survol reste cohérente */
}
/* Appliquer le style de fond au parent lorsque la case est cochée */
.custom-checkbox-container .column-checkbox input[type="checkbox"]:checked + label {
background-color: var(--grey); /* Assure que le label garde la couleur de survol */
}
form .row{
padding-top :10px;
padding-bottom:10px;
}
form .row .form-col{
margin:16px 0;
}
form .row label{
margin:0;
}
form .ask-group{
}
form .first-section .ask-group{
}
.right-sticky-sidebar {
position: sticky;
top: 160px; /* Ajustez cette valeur selon vos besoins */
height: calc(100vh - 180px); /* Ajustez cette valeur selon vos besoins */
overflow-y: auto;
}
.right-sticky-sidebar div{
text-align: center;
}
.right-sticky-sidebar ul.flex{
justify-content: center;
margin-top:8px
}
.right-sticky-sidebar ul.flex li a{
color:var(--primary-color)
}
.right-sticky-sidebar ul.flex li a:hover{
color:var(--primary-hover)
}
.side-info{margin: 16px ;
border-radius:32px;
padding : 16px;
background-color: var(--primary-700);}
.side-info-header{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: none;
}
/* -----------------
OPT-IN
--------------------- */
/* Masque la case à cocher réelle */
.opt-in-checkbox {
display: none;
}
.opt-in-label {
display: flex;
justify-content: flex-end; /* Aligne le contenu à droite */
width: 100%; /* Prend toute la largeur de la colonne */
cursor: pointer; /* Indique que c'est cliquable */
}
/* Applique le style au label span déjà existant */
.opt-in-label span {
display: flex;
align-items: center;
padding: 0.375em 0.75em 0.375em 0.375em;
border-radius: 99em;
transition: 0.25s ease;
cursor: pointer; /* Curseur pour indiquer que c'est cliquable */
}
/* Style pour le cercle d'opt-in */
.opt-in-label span:before {
display: flex;
flex-shrink: 0;
content: "";
background-color: #fff; /* Couleur de fond du cercle */
width: 1.5em; /* Largeur du cercle */
height: 1.5em; /* Hauteur du cercle */
border-radius: 50%; /* Rendu en cercle */
margin-right: 8px;
transition: 0.25s ease;
box-shadow: inset 0 0 0 0.125em var(--black); /* Bordure fine initiale */
}
/* État du survol */
.opt-in-label span:hover {
background-color: transparent;
}
/* État sélectionné de la case à cocher */
.opt-in-checkbox:checked + .opt-in-label span:before {
box-shadow: inset 0 0 0 0.3em var(--black); /* Bordure plus épaisse quand sélectionnée */
background-color: var(--white); /* Remplit le cercle avec la couleur */
}
/* ---------------------------
THIN FORMS
------------------------------- */
form.thin-form .row{
padding:5px 0;
}
form.thin-form .row .form-col{
margin: 8px 0;
}
.form-header{
font-size:14px;
}
.form-header p{
margin-bottom:8px;
}
/* WHy Card */
.options {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
padding-top: clamp(32px,1vh,60px);
padding-bottom: 100px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* background-color: #f0efeb; */
}
.why__o__carousel {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-top: 70px;
padding-bottom: 100px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f0efeb;
}
.carousel {
width: 100vw;
/* height: 100vh; */
position: relative;
overflow: hidden;
}
.o-slider{
position: relative;
height: 220px;
text-align: center;
/* background: #ddd; */
clear: both;
-webkit-tap-highlight-color: #0000;
/* non pris en charge : tap-highlight-color: rgba(0,0,0,0);*/
}
.why-carousel .o-slider{
height:340px;
}
.options__slider{
max-height: 270px;
padding-top: 12px;
padding-left: 48px;
background-color: #0000;
}
.why__slider{
padding-top: 16px;
padding-left:48px;
}
.carousel .track {
position: absolute;
/* top: 150px; */
left: 0px;
/* display: inline-flex; */
touch-action: none;
cursor: grab;
/* animation: 45s linear 0s infinite normal both running slidein; */
}
.why-carousel .track{
position:absolute;
left:20px;
display: inline-flex;
touch-action: none;
cursor:grab;
}
/*
@-webkit-keyframes
slidein{
from{margin-left:10%}
to{margin-left:-210%}}
@keyframes
slidein{
from{margin-left:10%}
to{margin-left:-210%}} */
.o-slider-mask{
position: relative;
display: block;
overflow: hidden;
z-index: 1;
left: 0;
right: 0;
height: 100%;
white-space: nowrap;
}
.options__slider__mask{
overflow: visible;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.carousel .track .card {
width: 250px;
height: 213px;
background: #fff;
/* border-radius: 3px; */
margin-right: 20px;
}
.o-slide{
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%;
white-space: normal;
text-align: left;
}
.header__left h2, .header__left p{
text-align: center;
}
h2.h--h{
font-size:clamp(28px,1.5vw,50px)
}
.cta-wrapper.options__carousel{
display: block;
margin-top: 24px;
-webkit-align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.why__options__card h3{
font-size:18px;
font-weight: 700;
}
.why__options__card{
position: relative;
width: 28%;
height: 320px;
min-width: 28%;
margin-right: 32px;
border-radius: 15px;
background-color: #FCFBF7;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.why__options__card p{
font-size: 14px;
color:var(--neutral-text-secondary);
}
.why__options__card .check li{
font-size:14px;
}
.mo[data-glyph]:before {
font-family: 'Icons';
display: inline-block;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
box-shadow: none;
}
/* Layout
Refonte 22 mai 2026 — la règle globale `section { padding: 40px 0 }` est retirée :
elle polluait toutes les pages refondues (.mo-resource__section, etc.) avec un
padding vertical hérité. Si une page legacy en dépendait, il faut désormais
appliquer le padding via une classe explicite (.legacy-section ou similaire). */
.hero_home{
width: calc(100% - 30px);
max-width: 1280px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.hero_home_body{
grid-column-gap: 110px;
grid-row-gap: 110px;
grid-template-rows: auto;
grid-template-columns: 6fr 5fr;
grid-auto-columns: 1fr;
display: grid;
margin-bottom:60px;
;
}
.hero_home_media{
border-radius: 8px;
justify-content: center;
align-items: center;
max-height: 483px;
margin-left: 15px;
margin-right: 15px;
display: flex;
overflow: hidden;
background-color: var(--purple);
}
.hero__container{
width: calc(100% - 30px);
max-width: 1280px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.hero{ background:#FFF; padding:clamp(24px,4vw,36px) 20px 0; }
.hero__text{ max-width:900px; } /* largeur de bloc texte comme sur Aave */
.hero__badge{
display:inline-block; padding:4px 6px; border-radius:999px;
background:var(--green-light); color:var(--green-dark); font-weight:500; font-size:10px; margin-bottom:12px; border:1px solid var(--green-dark) }
.swipe_badge{
background-color: var(--green-light);
display: flex;
width: 75px;
height: 35px;
flex-direction: row;
align-content: center;
justify-content: center;
border-radius: 25px;
border: 1px solid var(--green);
}
.swipe_badge svg{
fill:var(--green-dark);
width:25px;
}
.hero__badge a{font-weight:500;}
.hero__title{ color: var(--neutral-text-primary);
font-size: clamp(32px, 6vw, 50px);
line-height: 110%;
margin: 0 0 14px;
font-weight: 600;
letter-spacing: -0.2rem; }
.hero_secondary__title{
color: var(--neutral-text-primary);
font-size: 40px;
line-height: 1.3;
margin: 0 0 24px;
max-width: 50%;
font-weight: 700;
letter-spacing: -0.1rem;}
#home-project-list .hero_secondary__title{
max-width:100%;
}
.hero_secondary__title.large-title{
max-width: 100%;
}
.hero__subtitle{ color: var(--neutral-text-secondary);
font-size: clamp(16px, 1.9vw, 18px);
line-height: clamp(1.6, 1.8, 2);
margin: 0 0 20px;
max-width: 50ch;}
.hero__lead{ color:var(--neutral-text-secondary); font-size:clamp(16px,1.9vw,18px); line-height: clamp(1.6, 1.8, 2);
margin:10px 0 36px; max-width:70ch; }
.hero__ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 0; }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 6px 20px rgba(4,214,74,.25); }
.btn--primary:hover{ transform:translateY(-1px); filter:brightness(.95); }
.btn--link{ color:var(--text1); border-bottom:2px solid var(--text1); border-radius:0; padding-left:0; padding-right:0; }
.btn--link:hover{ opacity:.8; }
.index-top{z-index: 1;}
/* Illustration sous le texte */
.hero__illustration{ margin-top: clamp(12px, 4vw, 60px); }
.hero__bars-svg{ width:100%; height:auto; display:block; }
.hero__baseline{
height:4px; width:100%; border-radius:2px;
background: linear-gradient(90deg, var(--blue-secondary) 0%, var(--blue-secondary)10%, var(--yellow-secondary) 34%, var(--green-secondary) 43%, var(--rose-secondary) 58%, var(--red-secondary) 70%,var(--purple-secondary) 86%, var(--purple-secondary) 100%);
margin-top:0;
}
/* Animation robuste (n’écrase pas les positions) */
.bar-path{
stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
animation:draw 900ms ease-out forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; opacity:1; } }
/* décalage séquentiel */
g[transform*="translate(0 90)"] .bar-path{ animation-delay:.10s; }
g[transform*="translate(160 75)"] .bar-path{ animation-delay:.30s; }
g[transform*="translate(320 55)"] .bar-path{ animation-delay:.50s; }
g[transform*="translate(480 35)"] .bar-path{ animation-delay:.70s; }
g[transform*="translate(640 10)"] .bar-path{ animation-delay:.90s; }
g[transform*="translate(800 -10)"] .bar-path{ animation-delay:1.10s; }
/* Responsive */
@media (max-width: 768px){
.hero__title{ font-size: clamp(28px, 9vw, 40px);
line-height: 1.2;
font-weight: 600;
letter-spacing: -0.1rem;}
.hero__text{ max-width: 100%; }
/* barres un peu plus hautes sur mobile pour garder l'effet */
.hero__bars-svg{ max-width: 100%; }
body{letter-spacing: 0.1px;}
}
@media (prefers-reduced-motion: reduce){
.bar-path{ animation:none; opacity:1; }
.btn--primary{ transition:none; }
}
:root { --bars-lift: -72px; } /* essaye -40px à -72px selon ton goût */
/* Remonte et centre le SVG */
.hero__illustration { position: relative; }
.hero__bars-svg{
display:block;
max-width: 1100px; /* ajuste si tu veux un SVG plus/moins large */
margin: 0 auto; /* centre horizontalement */
transform: translateY(var(--bars-lift));
}
/* Fais remonter la baseline pour qu'elle reste collée sous les barres */
.hero__baseline{
margin-top: calc(0px + var(--bars-lift)); /* comme --bars-lift est négatif, la baseline remonte */
}
/* Sur mobile, lève un peu moins pour garder l’air */
@media (max-width: 768px){
:root { --bars-lift: -24px; }
.hero__bars-svg{ max-width: 100%; }
}
/* Cache les ronds au départ */
.disk {
opacity: 0;
animation: fadeIn 0.4s ease-out forwards;
animation-delay: 1s; /* juste après la dernière barre */
}
/* Animation simple */
@keyframes fadeIn {
to { opacity: 1; }
}
/* Accessibilité */
@media (prefers-reduced-motion: reduce){
.disk{ animation: none; opacity: 1; }
}
/* CARROUSSEL */
.max-width-544{max-width:clamp(40ch, 90vw, 50ch);}
.slider__options__card{
position: relative;
width: 220px;
height: 200px;
max-width: 270px;
margin-right: 20px;
background-color: var(--neutral-200);
border-radius:10px;
border:1.5px solid var(--neutral-border-card);
}
.is--options__card{
position: absolute;
left: 24px;
right: 24px;
top: 100px;
margin-top: 20px;
margin-bottom: 0px;
position: absolute;
left: 24px;
right: 24px;
top: 0px;
margin-top: 20px;
margin-bottom: 0px;
}
h3.is--options__card{
font-size: clamp(18px, 0.9vw, 20px);
color: var(--brown-dark);
position: absolute;
left: 10px;
right: 10px;
margin-top: 12px;
font-weight: 600;
letter-spacing: -0.05rem;
}
.card__subtext{
position: absolute;
top: 64px;
left: 10px;
font-size: 14px;
line-height: 1.2;
right: 10px;
color:var(--brown-dark)
}
.carroussel__asset__box{
position: absolute;
bottom: 10px;
right: 10px;
border-radius: 10px;
width: 200px;
height: 70px;
}
.bp1{
background-color: var(--purple);
}
.carousel__asset__wrap{
position: absolute;
right: 5px;
width: 50px;
bottom: 5px;
}
.carousel__asset__funds{
position:absolute;
bottom:10px;
right:20px;
}
/* CALL ACTION */
/* DUAL COLS */
.call_action{padding:20px;margin:0 15px;}
#lend .call_action{
background-color: var(--navy);
color:var(--green-light)
}
#lend-steps.call_action{
color: var(--neutral-text-primary);
background-color: var(--yellow-tertiary);
}
/* CALL ACTION LIST LAPTOP */
.call__action__list{
padding:80px 20px;
}
.faq-section{
background-color :var(--neutral-200) ;
}
.call__action__list.horizontal__list{
background-image: none;
}
.step__item h4{
font-family: 'Outfit', sans-serif;
font-weight: 600;
}
#lend .call_action .button-secondary {
background-color: #69a988 !important;
color: var(--navy) !important;
font-weight: 500;}
.call_action .dual__cols_container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 48px 40px;
gap: 48px 40px;
align-items: center;
margin: auto;
width: calc(100% - 30px);
max-width: 1280px;
}
.call_action h2{
font-size:36px;
}
.call_action .link_space{
justify-self: flex-end;
}
section.serial__cols
{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 72px 48px;
}
section.serial__cols.left{
align-items: self-start;
}
.serial_cols__inner{
position: relative;
width: 100%;
max-width: 1280px;
}
.dual__cols_container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 48px 40px;
gap: 48px 40px;
margin-top: 48px;
}
.trial__cols_container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows:400px /* 300px */;
grid-gap: 48px 40px;
gap: 48px 40px;
margin-top: 48px;
}
.trial__cols_container .trial__cols_card{
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
z-index: 0;
overflow: hidden;
border-radius: 16px;
padding: 24px 36px;
background-color: var(--neutral-200);
border:1.5px solid var(--neutral-border-card);
}
.quator__cols_container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 48px 40px;
gap: 48px 40px;
margin-top: 48px;
}
.quator__cols_container .quator__cols_card{
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
z-index: 0;
overflow: hidden;
border-radius:12px;
padding: 32px 20px;
background-color: var(--neutral-200);
border:1.5px solid var(--neutral-border-card);
}
.quator__cols_card.have_head_icon{
padding:0px;
}
.card-title{
font-weight: 600;
line-height: 135%;
letter-spacing: -.48px;
color:var(--neutral-text-primary);
font-size: clamp(18px, 0.9vw, 24px);
font-weight: 600;
}
.trial__cols_card .card-subtext{
font-weight: 400;
color: var(--neutral-text-secondary);
font-size: 16px;
line-height: clamp(1.6, 1.8, 2);
}
.trial__cols_card
{position: absolute;
z-index: -1;
top: 0;
right: 0;
}
.cards_illu{
position: absolute;
z-index: -1;
top: 0;
right: 0;
min-height:220px;
max-height:220px;
width: 100%;
object-fit: cover;
}
.filtre {
width: 100%;
height: auto;
filter: brightness(70%) sepia(20%) hue-rotate(15deg);
}
.cards_illu {
filter: blur(4px);
transition: filter 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.cards_illu.visible,
.card_illu:hover {
filter: blur(0);
}
.cards_illu[data-delay] {
transition-delay: var(--delay);
}
.features_container{
margin-top: 24px;
width: 100%;
max-width: 1280px;
display: grid
;
flex-direction: column;
grid-template-columns: 1fr 1fr;
}
.heading-2{
font-size:14px;
font-family: 'Outfit', Arial, Helvetica, sans-serif;
font-weight: 500;
}
.features_head {
margin-top:32px;
border-bottom: 1px solid var(--neutral-500);
justify-content: flex-start;
align-items: flex-end;
height: 30px;
padding-bottom: 2px;
display: flex;
max-width: 1280px;
width:100%
}
.features_style1{
display: flex
;
grid-template-columns: 1fr 1fr;
align-items: flex-start;
grid-column-gap: 40px;
column-gap: 40px;
border-radius: 16px;
padding: 32px;
flex-direction: column;
align-content: flex-start;
row-gap: 24px;
}
.features_style1 .features_title, .icon_title{
display: flex;
align-items: center;
column-gap: 16px;
}
.features_container .features_style1:nth-child(even) {
/* background-color: var(--blue-light); couleur spéciale */
}
.head_icon{
min-height:120px;
background-color: var(--green-light);
margin:10px 10px 0 10px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.text_area{
padding:24px 20px;
}
.icon_title{
justify-items: center;
margin-bottom: 12px;
}
.icon_title h3{
margin:0;
}
.icon_title_illu{
width:16px;
height: 16px;
fill:var(--blue)
}
.features_illu{
width:30px
}
.features_style1 .features_title h3{
font-feature-settings: "cv11" on;
font-size: 16px;
font-weight: 500;
line-height: 135%;
letter-spacing: -.33px;
margin: 0;
}
.features_style1 .features_text{
font-weight: 400;
color: var(--neutral-text-secondary);
font-size: clamp(14px, 1.9vw, 16px);
line-height: clamp(1.6, 1.8, 2);
}
/* Project list */
#home-project-list{
background-color: var(--neutral-200);
}
._4-col{
display: grid
;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 62px 24px;
gap: 62px 24px;
margin-top: 48px;
}
.project__cards{
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
z-index: 0;
overflow: hidden;
border-radius: 16px;
/* background-color: var(--neutral-100); */
}
.project-status{
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
color: var(--neutral-text-primary);
font-weight: 500;
font-size: 10px;
margin-bottom: 12px;
font-family: 'Geist', sans-serif;
}
.project_container{
padding: 12px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
z-index: 0;
/* overflow: hidden; */
border-radius: 16px;
row-gap: 6px;
background: var(--neutral-150);
border:1px solid var(--neutral-border-card)
}
.p-img .img--cover{
height:150px;
border-radius:8px;
}
.project_title {
margin-bottom:10px;
}
.project_title h3{
font-size:16px;
font-weight: 600;
height:1.2lh;
margin:0;
font-family: 'Outfit',sans-serif;
}
.project_title h4{
font-size:14px;
font-weight:400;
font-family: 'Outfit',sans-serif;
margin: 0;
}
.p-sumup-presentation{
font-size:14px;
min-height: 71px;
font-weight:400;
}
.p__sumup--operation--detail{
padding-bottom : 20px;
}
.offer-infos{
padding:10px;
background-color: var(--neutral-300);
border-radius: 10px;
}
.info_row{
display:flex;
justify-content: space-between;
margin-bottom: 12px;
border-bottom: 1px solid var(--neutral-200);
padding-bottom: 9px;
font-size:12px;
font-weight:400;
align-items: center;
}
.flex_row{
display: flex;
justify-content: space-between;
padding-bottom: 9px;
font-size: 12px;
font-weight: 400;
align-items: center;
}
.offer-infos .info_row:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;}
.info-label{
display: flex;
align-items: center;
gap: 4px; /* petit espace entre texte et icône */
}
.info-value{
font-weight: 500;
display: flex;
align-items: center;
gap: 4px; /* petit espace entre texte et icône */
}
.tooltip-icon svg{
width:15px;
flex-shrink: 0;
display: block;
}
/* TOOLTIP */
.tooltip-icon {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip-text-left {
visibility: hidden;
opacity: 0;
min-width: 220px;
max-width: 340px;
background: #fff;
color: var(--neutral-600);
border-radius: 10px;
border: 1px solid #dde8f3;
box-shadow: 0 4px 16px rgba(140, 170, 255, 0.14);
font-size: 12px;
padding: 5px;
position: absolute;
right: 0%;
bottom: 100%;
/* z-index: 80000; */
transition: opacity 0.18s;
pointer-events: none;
font-weight: 400;
}
.tooltip-text-right{
visibility: hidden;
opacity: 0;
min-width: 220px;
max-width: 340px;
background: #fff;
color: var(--neutral-600);
border-radius: 10px;
border: 1px solid #dde8f3;
box-shadow: 0 4px 16px rgba(140, 170, 255, 0.14);
font-size: 12px;
padding: 5px;
position: absolute;
right: -120px;
bottom: 24px;
/* z-index: 80000; */
transition: opacity 0.18s;
pointer-events: none;
font-weight: 400;
}
.tooltip-icon:hover .tooltip-text-left,
.tooltip-icon:focus .tooltip-text-left,
.tooltip-icon:hover .tooltip-text-right,
.tooltip-icon:focus .tooltip-text-right {
visibility: visible;
opacity: 1;
}
.avancement {
margin:10px 0;
position: relative;
background-color: var(--neutral-200); /* fond gris clair */
border-radius: 999px; /* arrondi complet */
height: 8px;
width: 100%;
overflow: hidden;
}
.avancement-remplissage {
height: 100%;
width: var(--pct, 0%);
border-radius: 999px 0 0 999px;
transition: width 0.3s ease-in-out;
}
.avancement-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.8rem;
font-weight: 600;
color: #1e293b; /* gris foncé lisible */
}
/* FOOTER */
#disclaimer{
padding:40px 0;
background-color:var(--purple);
}
#disclaimer p{color:var(--neutral-100);}
/* FOOTER */
/* REFONTE 2026 chantier C — règle ci-dessous neutralisée, remplacée par header.css .mo-footer (cf. footer.mo-footer { padding: 0 }) */
/*
footer{
padding:40px 0 0;
}
*/
footer nav ul{
padding: 12px 0;*/
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
z-index: 0;
row-gap: 6px;
}
.footer-identity h3{
font-weight: 600;
}
/* REFONTE 2026 chantier C — règle ci-dessous neutralisée, remplacée par header.css .mo-footer__contact-link / .mo-footer__nav-link / .mo-footer__legal-link */
/*
footer a{
color:var(--neutral-text-secondary);
font-weight: 400;
font-size: clamp(16px, 1vw, 20px);
}
*/
/* REFONTE 2026 chantier C — règle ci-dessous neutralisée, remplacée par header.css .mo-footer__group-amount (font-size: inherit pour les chiffres Asteryos) */
/*
footer strong{
color:var(--neutral-text-primary);
font-weight: 600;
font-family: 'neulis-neue', Arial, sans-serif;
font-size: clamp(16px, 1vw, 20px);
}
*/
footer .footer-content{
font-size:1em;
}
#legal-nav ul li {
padding : 0 20px 0 0;
}
#legal-nav ul li a{
color:var(--neutral-text-secondary);
font-weight: 400;
}
footer .social{
display:flex;
padding: 10px 0;;
}
footer .social span{
font-family: 'neulis-neue', Arial, sans-serif;
padding: 0 24px 0 0;
font-size: clamp(16px, 1vw, 20px);
font-weight: 400;
}
.social-list{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
column-gap: 24px;
}
.social-list i{
color:var(--purple)
}
footer hr{
background-color:var(----neutral-300)
}
#legal-nav ul {
display: flex
;
flex-direction: row;
align-content: center;
justify-content: space-between;
align-items: center;
}
#legal-partner{
margin-top:24px;
margin-bottom: 24px;
font-size: 0.85em;
}
#legal-partner._3-col-grid._3-steps-grid{
grid-column-gap: 44px;
padding-bottom:24px;
}
#legal-partner img{
filter:grayscale(1);
max-height: 100px;
}
#legal-partner .dual__content__2__4{
grid-column-gap: 24px;
display: grid
;
align-items: center;
grid-template-columns: 2fr 4fr;
justify-items: center;}
.legal-partner-text{
align-self: self-start;
font-family:'graphie', Arial, Helvetica, sans-serif;
font-size:14px;
}
/* FIN FOOTER */
/* PAGES */
/* LEND */
/* STEP LIST */
.step__list.border__b .step__item:first-child {
padding-top:0;
}
.step__list.nh__list{
margin-top:0;
margin-left: 50px;
}
.step__item{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/* height: 78px; */
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
align-items: flex-start;
}
.step__item h3{
font-size: 1.2em;
letter-spacing: -0.02rem;
font-weight: 500;
color: var(--neutral-text-primary);
}
.step__item p{
margin-bottom:40px;
color:var(--neutral-text-secondary)
}
.step__list{
margin-left:130px;
margin-top:20px;
}
.step__list.border__b .step__item:nth-child(1n+0) {
border-bottom: 1px solid var(--neutral-200);
padding-top:30px
}
.step__list.border__b .step__item:last-child {
border:none;
}
.step__list.border__b .step__item:first-child{
padding-top:0;
}
.step__number{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 40px;
/* height: 78px; */
margin-right: 24px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.step__number span{
font-size:2.5em;
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-style: normal;
color:var(--neutral-200)
}
.step_data .tooltip-icon svg{
width:9px;
color:var(--blue-secondary)
}
#lend .step__list,
#invest .step__list{
margin-left:60px;
margin-top: 10px;
padding-top: 30px;
}
#lend{}
/* INVESTMENT // LENDS -STEPS-TABS */
.options__tab{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.o-tabs{
position: relative;
}
.o-tabs::before,.o-tabs::after{
content: " ";
display: table;
grid-column-start: 1;
grid-row-start: 1;
grid-column-end: 2;
grid-row-end: 2;
}
.options__tabs__menu{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
max-width: 1280px;
margin-right: auto;
margin-left: auto;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
border-bottom: 1px solid var(--yellow-secondary);}
.options__tabs__menu.max__width__1280{
max-width:1280px;
}
.o-tabs-menu{position: relative;}
.o-tab-menu li{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 20%;
padding: 0px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #0000;
}
.nav-pills .nav-link{
border-radius:0;
border:none;}
.nav-pills .nav-link.active,.o-tab-menu li.active{
border-bottom:6px solid var(--yellow);
background-color: #0000;
border-radius:0;
}
.nav-pills .nav-link a, #nav-steps-to-loan a,#nav-steps-project a{
color:var(--neutral-text-secondary)
font-size:0.8em;
font-weight:300;
}
#nav-steps-to-loan a.active{
font-weight:600;
color:var(--neutral-text-secondary)
}
.tab-content{
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-top:40px;
margin-bottom:40px;
max-width:1080px;
margin-left:auto;
margin-right:auto;
}
.tab-content.max__width__1280{
max-width:1280px;
}
.o-tab-content{
position: relative;
display: block;
overflow: hidden;
}
.tab-content.o-tab-content img{max-height:300px;}
.call__action{
display: -ms-grid;
display: grid;
max-width: none;
margin-right: auto;
margin-left: auto;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 54px;
grid-row-gap: 16px;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: auto;
grid-template-rows: auto;
}
@media (max-width: 768px) {
.no--mobile{display: none;}
.call_action{
padding:36px 12px
}
.call__action{
-ms-grid-columns: 1fr ;
grid-template-columns: 1fr;
}
.front__dual{
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: auto auto;
grid-template-rows: auto auto;
}
.serial_cols__inner{
flex-direction: column;
}
.call_action .dual__cols_container{
grid-template-columns: 1fr;
gap:24px
}
.call_action h2{
font-size: 18px;
text-align: center;
font-weight: 400;
}
.call_action .link_space{
justify-self: center;
}
#lend .call_action .button-secondary
{
background-color: #69a988 !important;
color: var(--navy) !important;
font-weight: 500;
font-size: 14px;}
.trial__cols_container {
grid-template-columns: 1fr;
grid-template-rows: 400px 400px 400px;
}
.dual__cols_container .dual__cols_card{
padding: 32px 24px;
}
.features_container {
grid-template-columns: 1fr;}
.quator__cols_container {
grid-template-columns: 1fr;
gap: 24px 40px;
margin-top: 48px;}
.hero_home_body{
/* grid-column-gap: 110px; */
grid-row-gap:0px;
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-auto-columns: 1fr;
display: grid;
margin-bottom:16px;
;}
.options{padding-top:16px;padding-bottom:16px;}
.hero_secondary__title {
color: var(--neutral-text-primary);
font-size: 28px;
line-height: 1.3;
margin: 0 0 12px;
max-width: 100%;
font-weight: 700;
letter-spacing: -0.025rem;
}
.call_action{
display: -ms-grid;
display: grid;
max-width: none;
margin-right: auto;
margin-left: auto;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
grid-auto-columns: 1fr;
grid-column-gap: 54px;
grid-row-gap: 16px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: auto;
grid-template-rows: auto}
.options{
padding-bottom:60px;
}
.cta-wrapper.options__carousel{
display: block;
margin-top: 32px;
-webkit-align-self: start;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: start;
padding: 0 0 0 20px;
font-size: 14px;
}
.features_style1 {
grid-template-columns: 1fr ;
row-gap:12px;
padding:24px;
}
section.serial__cols {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding:48px 16px;
}
.home-project-list{
backgroud-color:var(--neutral-200);
}
._4-col {
display: grid
;
grid-template-columns: 1fr ;
grid-gap: 48px 24px;
gap: 48px 24px;
margin-top: 24px;
}
/* FOOTER */
footer .o-large-container{
margin-left:16px;
margin-right:16px;
}
footer .dual__content__3__9{
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
footer .footer-nav{
text-align: center;
}
footer ._3-steps-grid._3-col-grid{
margin-top: 20px!important;
}
footer .social{
flex-wrap: wrap;
align-items: center;
margin-top: 40px;
}
footer .social .social-list{
margin-top: 20px;
width: 100%;
justify-content: space-around;
}
#legal-nav ul{
flex-wrap: wrap;
}
#disclaimer{
padding: 36px 16px;
}
#disclaimer p{
margin:0;
}
#home-project-list section{
padding-top:0px;
}
}