/* /Components/Layout/PublicFooter.razor.rz.scp.css */
.ftr[b-upfh9niy9a] {
    background: #0e1a2b;
    color: #b9c6d8;
    padding: 4rem 0 1.75rem;
    margin-top: 2rem;
}

.ftr-top[b-upfh9niy9a] {
    display: grid;
    grid-template-columns: 1.3fr 2.4fr;
    gap: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

/* Brand column */
.ftr .brand[b-upfh9niy9a] { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.ftr .brand-mark[b-upfh9niy9a] {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.15rem;
    background: linear-gradient(135deg, #3a8bf0 0%, #2372d8 55%, #1b5fbd 100%);
}
.ftr .brand-word[b-upfh9niy9a] { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.ftr .brand-dot[b-upfh9niy9a] { color: #5aa2f5; }
.ftr-tag[b-upfh9niy9a] { color: #93a4bb; font-size: .92rem; line-height: 1.65; max-width: 340px; margin-bottom: 1.25rem; }

/* LES COORDONNEES EN BANDE, sous les colonnes. En <address>, l'element prevu pour cela : un
   lecteur d'ecran l'annonce comme un bloc de contact. L'italique par defaut du navigateur est
   retire, il n'a pas de sens ici.

   FLEX AVEC RETOUR A LA LIGNE : sur un ecran large les trois coordonnees tiennent sur une ligne
   et remplissent le vide sous les rubriques ; sur un ecran etroit elles s'empilent d'elles-memes,
   sans point de rupture a maintenir. */
/* ENTRE DEUX FILETS — ET LE PREMIER EXISTE DEJA.

   .ftr-top porte son propre border-bottom depuis toujours. En ajoutant ici un border-top, j'en
   posais un SECOND vingt-huit pixels plus bas : deux traits presque colles, une bande vide entre
   eux, et l'adresse rejetee SOUS les deux au lieu d'etre ENTRE. Signale par Nabil, qui l'a vu a
   l'ecran quand mes mesures ne regardaient que les bordures de cet element-ci.

   On ne garde donc que le filet du BAS. Celui du haut est celui de .ftr-top, et la marge est
   remplacee par un padding : le trait doit rester colle aux colonnes, pas flotter. */
.ftr-coords[b-upfh9niy9a] { display: flex; flex-wrap: wrap; gap: .35rem 2rem;
              border-bottom: 1px solid rgba(255, 255, 255, .09);
              padding: 1.1rem 0; font-style: normal; font-size: .86rem; line-height: 1.6;
              color: #93a4bb; }
.ftr-coords span[b-upfh9niy9a], .ftr-coords a[b-upfh9niy9a] { display: inline-flex; align-items: center; gap: .45rem; }
.ftr-coords a[b-upfh9niy9a] { color: inherit; text-decoration: none; }
.ftr-coords a:hover[b-upfh9niy9a] { color: #fff; text-decoration: underline; }
/* Les pictogrammes sont plus sombres que le texte : ils reperent, ils ne se lisent pas. */
.ftr-coords svg[b-upfh9niy9a] { width: 15px; height: 15px; flex: none; color: #6c7d95; }

/* LES MENTIONS LEGALES : une ligne, plus petite que tout le reste, au-dessus du copyright. Elles
   doivent etre LISIBLES, pas visibles — personne ne vient les lire, et tout le monde doit pouvoir
   les trouver. */
.ftr-mentions[b-upfh9niy9a] { margin: 1.1rem 0 .5rem; font-size: .78rem; line-height: 1.5; opacity: .6; }

.ftr-social[b-upfh9niy9a] { display: flex; gap: .6rem; }
.ftr-social a[b-upfh9niy9a] {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .07); color: #cdd8e6;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.ftr-social a:hover[b-upfh9niy9a] { background: var(--brand); color: #fff; transform: translateY(-2px); }
.ftr-social svg[b-upfh9niy9a] { width: 19px; height: 19px; }

/* Link columns */
.ftr-cols[b-upfh9niy9a] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.ftr-col h4[b-upfh9niy9a] { color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.1rem; }
.ftr-col ul[b-upfh9niy9a] { list-style: none; margin: 0; padding: 0; }
.ftr-col li[b-upfh9niy9a] { margin-bottom: .6rem; }
.ftr-col a[b-upfh9niy9a] { color: #93a4bb; font-size: .9rem; transition: color .13s ease; }
.ftr-col a:hover[b-upfh9niy9a] { color: #fff; }

/* Bottom bar */
.ftr-bottom[b-upfh9niy9a] {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    padding-top: 1.75rem;
    font-size: .85rem; color: #7f90a7;
}
.ftr-legal[b-upfh9niy9a] { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.ftr-legal a[b-upfh9niy9a] { color: #7f90a7; }
.ftr-legal a:hover[b-upfh9niy9a] { color: #fff; }

@media (max-width: 860px) {
    .ftr-top[b-upfh9niy9a] { grid-template-columns: 1fr; gap: 2rem; }
    .ftr-cols[b-upfh9niy9a] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ftr-cols[b-upfh9niy9a] { grid-template-columns: 1fr; }
    .ftr-bottom[b-upfh9niy9a] { flex-direction: column; align-items: flex-start; }
}
/* /Components/Layout/PublicHeader.razor.rz.scp.css */
.hdr[b-ht596v8lb8] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}

/* LE BANDEAU EST PLUS LARGE QUE LA COLONNE DE TEXTE.
   Il héritait de .container, plafonné à la largeur de lecture : marque + menu + actions
   réclamaient environ 1400 px pour 1152 disponibles, et débordaient donc à TOUTE taille d'écran —
   d'où la barre de défilement horizontale sur l'ensemble du site. Le français était le plus
   touché, « Mon compte » et « Déconnexion » étant plus longs que leurs équivalents anglais.
   Un en-tête de site n'a aucune raison d'être borné à la largeur du texte ; le contenu des
   pages, lui, garde sa colonne. */
.hdr-inner[b-ht596v8lb8] {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1560px;
}

/* ---------- Brand ---------- */
.brand[b-ht596v8lb8] { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.brand-logo[b-ht596v8lb8] { height: 40px; width: auto; display: block; }
.brand-word[b-ht596v8lb8] { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.brand-dot[b-ht596v8lb8] { color: var(--brand); }

/* ---------- Nav ---------- */
.nav-cb[b-ht596v8lb8] { display: none; }

/* .mainnav ne porte plus que la navigation : les actions de compte ont ete sorties de ce bloc
   pour survivre au repli en tiroir (voir le commentaire dans PublicHeader.razor). Il pousse donc
   les actions vers la droite en absorbant l'espace libre — ce que faisait « space-between »
   quand les deux vivaient ensemble. */
.mainnav[b-ht596v8lb8] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.menu[b-ht596v8lb8] { list-style: none; display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; }

.menu-link[b-ht596v8lb8] {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .5rem .6rem;
    font-size: .93rem; font-weight: 550; color: var(--text-soft);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
    white-space: nowrap;
}
.menu-link .chev[b-ht596v8lb8] { width: 15px; height: 15px; transition: transform .2s ease; opacity: .7; }
.menu-item:hover .menu-link[b-ht596v8lb8] { color: var(--brand); background: var(--brand-tint); }
.menu-item:hover .menu-link .chev[b-ht596v8lb8] { transform: rotate(180deg); }

/* ---------- Mega dropdown ---------- */
.has-mega[b-ht596v8lb8] { position: relative; }
.mega[b-ht596v8lb8] {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.menu-item:hover .mega[b-ht596v8lb8],
.menu-link:focus + .mega[b-ht596v8lb8],
.mega:hover[b-ht596v8lb8] { opacity: 1; visibility: visible; transform: translateY(0); }
.mega[b-ht596v8lb8]::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.mega ul[b-ht596v8lb8] { list-style: none; margin: 0; padding: 0; }
.mega a[b-ht596v8lb8] {
    display: block;
    padding: .6rem .8rem;
    border-radius: var(--r-sm);
    font-size: .9rem; font-weight: 500; color: var(--text-soft);
    transition: background-color .13s ease, color .13s ease;
}
.mega a:hover[b-ht596v8lb8] { background: var(--brand-tint); color: var(--brand); }

/* ---------- Actions (lang + auth) ---------- */
/* margin auto plutôt que « space-between » sur .mainnav : sous 1341 px la navigation devient un
   tiroir en position fixe, donc sortie du flux. Sans cette marge, les actions se colleraient à
   la marque et laisseraient la moitié droite de la barre vide. La forme « inline-start » suit le
   sens de lecture : en arabe elles se rangent à gauche. */
.nav-actions[b-ht596v8lb8] { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; margin-inline-start: auto; }

/* L'APPARENCE DU SÉLECTEUR DE LANGUE A DÉMÉNAGÉ dans SelecteurLangue.razor.css. Les feuilles
   isolées de Blazor ne portent QUE sur les éléments écrits dans leur propre .razor : depuis que
   le sélecteur est un composant, aucune règle « .lang » posée ici ne l'atteint plus. */

.logout-form[b-ht596v8lb8] { margin: 0; }

/* ---------- Burger ---------- */
.burger[b-ht596v8lb8] {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    place-items: center;
    color: var(--text); cursor: pointer;
    background: var(--surface);
    flex: 0 0 auto;
}
.burger svg[b-ht596v8lb8] { width: 22px; height: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1340px) {
    .burger[b-ht596v8lb8] { display: grid; }
    .mainnav[b-ht596v8lb8] {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--sh-md);
        padding: 1rem 1.25rem 1.5rem;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        /* CEINTURE. Un tiroir ferme ne doit RIEN recevoir, quoi que fassent ses descendants.
           « opacity: 0 » ne bloque aucun clic, et « visibility: hidden » se laisse ANNULER par un
           descendant qui repose « visible » — c'est exactement ce qui est arrive ici. Cette ligne
           tient meme si la regle du dessous est un jour reintroduite par megarde. */
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .nav-cb:checked ~ .mainnav[b-ht596v8lb8] {
        opacity: 1; visibility: visible; transform: translateY(0);
        pointer-events: auto;
    }

    .menu[b-ht596v8lb8] { flex-direction: column; align-items: stretch; gap: 0; }
    .menu-item[b-ht596v8lb8] { border-bottom: 1px solid var(--border); }
    .menu-link[b-ht596v8lb8] { justify-content: space-between; padding: .85rem .4rem; font-size: 1rem; }

    /* LE DEFAUT QUE CES DEUX REGLES FERMENT — le plus grave rencontre sur ce site.
       Dans le tiroir, les sous-menus doivent etre DEPLIES : d'ou « position: static » et
       « opacity: 1 », qui defont le repli au survol du mode bureau. Mais la regle posait aussi
       « visibility: visible », et LA c'etait fatal : en CSS, un descendant qui repose
       « visible » ANNULE le « visibility: hidden » de son parent. Les liens des sous-menus
       redevenaient donc cliquables alors que le tiroir etait ferme — et le tiroir, en position
       fixe, couvre TOUTE LA LARGEUR sur plus de 800 px de haut sous l'en-tete.
       Mesure du 07/08/2026 a 1230 px : un clic a 200, 300, 500 et 600 px du haut n'atteignait pas
       la page mais un lien invisible du menu. Le formulaire KYC etait donc impossible a remplir —
       chaque champ renvoyait vers « Notre plateforme », « Gouvernance », « Nos valeurs »... selon
       le lien qui se trouvait sous le curseur. Signale comme critique par la recette, et pris
       d'abord pour un defaut de navigateur : ce n'en est pas un, c'est deterministe.
       LE DEPLIEMENT NE VAUT QUE TIROIR OUVERT. */
    .mega[b-ht596v8lb8] {
        position: static; opacity: 1; transform: none;
        box-shadow: none; border: 0; padding: 0 0 .6rem .6rem; min-width: 0;
    }
    .nav-cb:checked ~ .mainnav .mega[b-ht596v8lb8] { visibility: visible; }
    .mega[b-ht596v8lb8]::before { display: none; }

    /* Les actions restent DANS LA BARRE : elles ne sont plus dans le tiroir. On les resserre
       pour laisser passer marque + hamburger sur les largeurs intermediaires. */
    .nav-actions[b-ht596v8lb8] { gap: .4rem; }
    .nav-actions .btn[b-ht596v8lb8] { padding-inline: .6rem; font-size: .86rem; }
}

/* ---------- Bande intermediaire : 1301 a 1440 px ---------- */
/* La barre horizontale tient encore, mais de justesse : a 1366 px — la largeur d'ecran portable
   la plus repandue — il manquait une trentaine de pixels. Plutot que de basculer tout ce palier
   vers le menu compact, ce qui priverait ces machines de la navigation deployee, on resserre les
   deux boutons de compte. En dessous de 1341 px l'ecart devient trop grand pour etre rattrape
   ainsi, et le menu compact prend le relais. */
@media (min-width: 1341px) and (max-width: 1440px) {
    .nav-actions[b-ht596v8lb8] { gap: .4rem; }
    .nav-actions .btn[b-ht596v8lb8] { padding-inline: .6rem; font-size: .86rem; }
    .menu-link[b-ht596v8lb8] { padding-inline: .45rem; }
}

/* ---------- Téléphones : sous 560 px ---------- */
/* MESURÉ, PAS ESTIMÉ. En français — la langue aux libellés les plus longs — la barre réclame
   559 px pour porter marque, langues, « Se connecter », « Inscription » et hamburger. Trois
   retraits la ramènent à 364 px, sous la plus étroite des largeurs réelles : le sélecteur de
   langue passe dans le tiroir (voir SelecteurLangue.razor.css), le mot « Alif » s'efface au
   profit du seul logo, et les boutons se resserrent.

   CE QUI NE DISPARAÎT PAS : les deux boutons de compte. C'est le défaut qu'on vient de corriger,
   il n'est pas question de le réintroduire une octave plus bas. */
@media (max-width: 560px) {
    .hdr-inner[b-ht596v8lb8] { gap: .6rem; }
    .brand-word[b-ht596v8lb8] { display: none; }
    .nav-actions[b-ht596v8lb8] { gap: .3rem; }
    .nav-actions .btn[b-ht596v8lb8] { padding-inline: .5rem; font-size: .8rem; }
}

/* ---------- RTL ---------- */
[dir="rtl"] .mega[b-ht596v8lb8] { left: auto; right: 0; }

/* ---------- Cloche de notifications ---------- */
/* La pastille se pose SUR l'icône : position relative sur le lien, absolue sur la pastille. */
.cloche[b-ht596v8lb8] { position: relative; padding-inline: .6rem; }

.cloche-pastille[b-ht596v8lb8] {
    position: absolute; top: .15rem; inset-inline-end: .15rem;
    min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 700; line-height: 1;
    color: #fff; background: #d93025; border-radius: 999px;
}

/* inset-inline-end plutôt que right : en arabe la pastille doit passer à GAUCHE de l'icône,
   sinon elle se retrouve du côté d'où le regard part et masque le début du pictogramme. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-a0viscdeab],
.components-reconnect-repeated-attempt-visible[b-a0viscdeab],
.components-reconnect-failed-visible[b-a0viscdeab],
.components-pause-visible[b-a0viscdeab],
.components-resume-failed-visible[b-a0viscdeab],
.components-rejoining-animation[b-a0viscdeab] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-a0viscdeab],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-a0viscdeab],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-a0viscdeab],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-a0viscdeab],
#components-reconnect-modal.components-reconnect-retrying[b-a0viscdeab],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-a0viscdeab],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-a0viscdeab],
#components-reconnect-modal.components-reconnect-failed[b-a0viscdeab],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-a0viscdeab] {
    display: block;
}


#components-reconnect-modal[b-a0viscdeab] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-a0viscdeab 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-a0viscdeab 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-a0viscdeab 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-a0viscdeab]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-a0viscdeab 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-a0viscdeab {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-a0viscdeab {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-a0viscdeab {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-a0viscdeab] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-a0viscdeab] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-a0viscdeab] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-a0viscdeab] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-a0viscdeab] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-a0viscdeab] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-a0viscdeab] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-a0viscdeab 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-a0viscdeab] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-a0viscdeab {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SelecteurLangue.razor.rz.scp.css */
/* Ces règles vivaient dans PublicHeader.razor.css. Elles ont suivi le sélecteur quand il est
   devenu un composant : une feuille isolée ne porte que sur les éléments écrits dans son propre
   .razor, et laissées là-bas elles n'auraient plus rien atteint — le sélecteur se serait affiché
   sans pastille ni fond, sans qu'aucune erreur ne le signale. */

.lang[b-4k4wmdytn9] {
    display: inline-flex; align-items: center;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: 2px;
}

.lang-opt[b-4k4wmdytn9] {
    font-size: .75rem; font-weight: 700; letter-spacing: .03em;
    color: var(--text-muted); padding: .28rem .42rem; border-radius: var(--r-pill);
    transition: color .13s ease, background-color .13s ease;
    background: transparent; border: 0; cursor: pointer; font-family: inherit; line-height: 1;
}
.lang-opt:hover[b-4k4wmdytn9] { color: var(--brand); background: #fff; }

/* La langue courante : pastille pleine aux couleurs de la marque. Le survol reste distinct
   (fond blanc, texte bleu) pour qu'on voie qu'on peut encore changer. */
.lang-opt.is-active[b-4k4wmdytn9] {
    color: #fff;
    background: var(--brand);
}
.lang-opt.is-active:hover[b-4k4wmdytn9] { color: #fff; background: var(--brand-active, var(--brand)); }

/* Le bouton actif n'est pas cliquable pour rien : il l'est encore, mais le curseur dit qu'il
   n'y a rien à y gagner. */
.lang-opt.is-active[b-4k4wmdytn9] { cursor: default; }

/* ---------- Les deux emplacements ----------
   LE SÉLECTEUR EST RENDU DEUX FOIS, ET UNE SEULE COPIE EST AFFICHÉE À LA FOIS.

   Mesuré sur la page d'accueil en français, la langue aux libellés les plus longs : la barre
   réclame environ 559 px pour porter la marque, les trois langues, « Se connecter »,
   « Inscription » et le hamburger. En dessous, elle déborde — et c'est précisément la largeur
   d'un téléphone. Le sélecteur passe donc dans le tiroir sous 560 px, ce qui ramène l'exigence
   à 364 px, sous la plus étroite des largeurs réelles.

   Ce sont les DEUX BOUTONS DE COMPTE qui restent dans la barre, et non la langue : changer de
   langue est un réglage qu'on fait une fois, se connecter est le geste qu'on vient faire. */
.lang-tiroir[b-4k4wmdytn9] { display: none; }

@media (max-width: 560px) {
    .lang-barre[b-4k4wmdytn9] { display: none; }
    .lang-tiroir[b-4k4wmdytn9] { display: inline-flex; align-self: flex-start; margin-bottom: 1rem; }
}
/* /Components/Pages/Faq.razor.rz.scp.css */
.faq-wrap[b-99gy6qjdrj] { max-width: 820px; margin-inline: auto; }
.faq-cat[b-99gy6qjdrj] { margin-bottom: 2.5rem; }
.faq-cat-title[b-99gy6qjdrj] {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--brand-soft);
}
.text-muted[b-99gy6qjdrj] { color: var(--text-muted); }

.faq-help[b-99gy6qjdrj] {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding: 1.75rem 2rem;
    background: var(--brand-tint);
    border: 1px solid var(--brand-soft);
    border-radius: var(--r-lg);
}
.faq-help h3[b-99gy6qjdrj] { font-size: 1.15rem; margin-bottom: .3rem; }
.faq-help p[b-99gy6qjdrj] { margin: 0; color: var(--text-muted); }
/* /Components/Pages/Home.razor.rz.scp.css */
/* ===================== HERO ===================== */
.hero[b-fvcaw10np4] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--brand-tint) 0%, #fff 78%);
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}
.hero-blob[b-fvcaw10np4] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    z-index: 0;
    pointer-events: none;
}
.hero-blob-1[b-fvcaw10np4] { width: 460px; height: 460px; top: -160px; right: -120px; background: radial-gradient(circle, #bcd8fb, transparent 70%); }
.hero-blob-2[b-fvcaw10np4] { width: 380px; height: 380px; bottom: -160px; left: -100px; background: radial-gradient(circle, #f6cfe2, transparent 70%); }

.hero-inner[b-fvcaw10np4] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 3.5rem;
    align-items: center;
}
.hero-copy h1[b-fvcaw10np4] { margin-top: .4rem; }
.grad[b-fvcaw10np4] {
    background: linear-gradient(120deg, var(--brand) 0%, var(--magenta) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy .lead[b-fvcaw10np4] { max-width: 540px; margin-bottom: 2rem; }
.hero-cta[b-fvcaw10np4] { margin-bottom: 1.75rem; }

.hero-trust[b-fvcaw10np4] { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.hero-trust span[b-fvcaw10np4] { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 550; color: var(--text-muted); }
.hero-trust[b-fvcaw10np4]  svg { width: 18px; height: 18px; color: var(--green); }

/* Hero visual card */
.hero-visual[b-fvcaw10np4] { display: flex; justify-content: center; }
.hero-card[b-fvcaw10np4] {
    width: 100%;
    max-width: 340px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    padding: 1.25rem;
    transform: rotate(1.5deg);
    transition: transform .3s ease;
}
.hero-card:hover[b-fvcaw10np4] { transform: rotate(0); }
.hc-head[b-fvcaw10np4] { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.hc-avatar[b-fvcaw10np4] {
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    color: #fff; font-weight: 800;
    background: linear-gradient(135deg, #37c383, var(--green));
}
.hc-head strong[b-fvcaw10np4] { display: block; font-size: .95rem; }
.hc-media[b-fvcaw10np4] {
    height: 130px; border-radius: var(--r-md); margin-bottom: 1rem;
    background: linear-gradient(135deg, #2f7fe6, #6aa6f0 60%, #b0d0f7);
    position: relative; overflow: hidden;
}
.hc-media[b-fvcaw10np4]::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.35), transparent 55%);
}
.hc-title[b-fvcaw10np4] { font-size: 1.1rem; margin-bottom: .9rem; }
.hc-progress[b-fvcaw10np4] { margin-bottom: 1rem; }
.hc-meta[b-fvcaw10np4] { font-size: .82rem; color: var(--text-muted); margin-top: .5rem; }
.hc-meta b[b-fvcaw10np4] { color: var(--text); }
.hc-meta span[b-fvcaw10np4] { color: var(--text-faint); }

/* ===================== VALUE STRIP ===================== */
.valuestrip[b-fvcaw10np4] { border-bottom: 1px solid var(--border); }
.valuestrip-grid[b-fvcaw10np4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 2rem 1.5rem;
}
.vs-item[b-fvcaw10np4] { display: flex; gap: .9rem; align-items: flex-start; }
.vs-ico[b-fvcaw10np4] {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--r-md);
    display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.vs-ico[b-fvcaw10np4]  svg { width: 22px; height: 22px; }
.vs-item strong[b-fvcaw10np4] { display: block; font-size: .96rem; margin-bottom: .15rem; }
.vs-item p[b-fvcaw10np4] { font-size: .85rem; margin: 0; color: var(--text-muted); line-height: 1.5; }

/* ===================== STEPS ===================== */
.steps[b-fvcaw10np4] { margin-top: .5rem; }
.step[b-fvcaw10np4] {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 2rem 1.6rem 1.6rem;
    box-shadow: var(--sh-sm);
}
.step-num[b-fvcaw10np4] {
    position: absolute; top: -16px; left: 1.6rem;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--text); color: #fff; font-weight: 700; font-size: .95rem;
    box-shadow: var(--sh-sm);
}
.step h3[b-fvcaw10np4] { font-size: 1.15rem; margin-bottom: .4rem; }
.step p[b-fvcaw10np4] { margin: 0; font-size: .93rem; color: var(--text-muted); }

/* ===================== CTA BAND ===================== */
.ctaband[b-fvcaw10np4] {
    background: linear-gradient(120deg, var(--brand-active) 0%, var(--brand) 55%, #3a6fd8 100%);
    position: relative; overflow: hidden;
}
.ctaband[b-fvcaw10np4]::after {
    content: ""; position: absolute; top: -60%; right: -10%;
    width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.14), transparent 65%);
}
.ctaband-inner[b-fvcaw10np4] {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    flex-wrap: wrap;
    padding: clamp(2.5rem, 5vw, 3.75rem) 1.5rem;
}
.ctaband h2[b-fvcaw10np4] { color: #fff; margin-bottom: .4rem; }
.ctaband p[b-fvcaw10np4] { color: rgba(255,255,255,.85); margin: 0; font-size: 1.05rem; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 940px) {
    .hero-inner[b-fvcaw10np4] { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero-visual[b-fvcaw10np4] { order: -1; }
    .valuestrip-grid[b-fvcaw10np4] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .valuestrip-grid[b-fvcaw10np4] { grid-template-columns: 1fr; }
    .ctaband-inner[b-fvcaw10np4] { flex-direction: column; align-items: flex-start; }
}