/* _content/FLEXYAPP/Components/Layout/Footer.razor.rz.scp.css */
/* Footer global - Desktop first */
.container-footer[b-wxn1fzf7vr] {
    width: 100%;
    display: flex;
    flex-direction: row; /* desktop : côte à côte */
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2rem, 5vw, 5rem) 1rem clamp(1rem, 3vw, 2rem) 1rem;
    position: relative;
    color: black;
    font-weight: 700;
}

    /* Colonnes desktop */
    .container-footer .col1[b-wxn1fzf7vr],
    .container-footer .col2[b-wxn1fzf7vr] {
        width: 50%;
        font-size: clamp(1rem, 1vw + 0.8rem, 1.3rem);
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-family: "Montserrat", sans-serif;
        font-weight: 400;
        padding: 0.5rem 0;
    }

    .container-footer .col2[b-wxn1fzf7vr] {
        border-left: solid #37454f 1px;
    }

/* Logo entreprise desktop */
.logo-entreprise-footer[b-wxn1fzf7vr] {
    max-width: clamp(100px, 10vw, 200px);
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Bloc interne col2 */
.col2 .container-bloc-footer[b-wxn1fzf7vr] {
    width: 100%;
    margin-top: clamp(0.5rem, 1vw, 1rem);
    font-size: clamp(1rem, 0.8vw + 0.6rem, 1.1rem);
    font-weight: 700;
    color: #37454f;
    text-decoration: none;
    cursor: pointer;
}

/* Texte */
.text-footer[b-wxn1fzf7vr] {
    display: inline-block;
    font-size: clamp(0.85rem, 0.6vw + 0.6rem, 1rem);
    vertical-align: top;
}

.text-siret[b-wxn1fzf7vr] {
    font-size: clamp(0.7rem, 0.5vw, 0.85rem);
    display: inline-block;
    color: #555;
}

.txt-map[b-wxn1fzf7vr] {
    font-size: clamp(1rem, 2.5vw, 2rem);
}

.logo-map[b-wxn1fzf7vr] {
    height: clamp(1rem, 2.5vw, 2rem);
    display: inline-block;
    margin-right: 0.5rem;
}

/* Logos */
.logo-footer[b-wxn1fzf7vr] {
    height: clamp(1rem, 1vw + 0.5rem, 1.2rem);
    display: inline-block;
}

/* Zone SIRET */
.container-siret[b-wxn1fzf7vr] {
    padding-top: clamp(1rem, 2vw, 1.5rem);
    font-size: clamp(1rem, 0.8vw + 0.6rem, 1.15rem);
    color: #444;
}

.logo-siret[b-wxn1fzf7vr] {
    height: clamp(0.8rem, 0.5vw + 0.4rem, 0.9rem);
    display: inline-block;
}

/* Bloc social desktop */
.bloc-social a img[b-wxn1fzf7vr] {
    width: clamp(80px, 150px - 10vw, 120px); /* plus petit écran → icône plus grosse */
    height: auto;
    margin-top: clamp(0.5rem, 2vw, 1rem);
    transition: transform 0.3s ease-out;
}

.bloc-social:hover img[b-wxn1fzf7vr] {
    transform: scale(1.15) rotate(-5deg);
    cursor: pointer;
}

/* Liens internes */
.line-on-footer[b-wxn1fzf7vr] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: clamp(0.3rem, 1vw, 0.7rem) 0;
    transition: transform 0.3s ease-out;
}

    .line-on-footer:hover[b-wxn1fzf7vr] {
        transform: scale(1.08);
    }

    .editor-link:hover[b-wxn1fzf7vr],
    .line-on-footer a:hover[b-wxn1fzf7vr] {
        cursor: pointer;
        color: var(--color-primary-hover);
        transition: color 0.3s ease-in-out;
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
    }

/* ---------- Mobile / Tablette ---------- */
@media (max-width: 767px) {
    .container-footer[b-wxn1fzf7vr] {
        flex-direction: column; /* empilé */
        align-items: center;
        justify-content: center;
        padding: clamp(1.5rem, 4vw, 2rem) 1rem;
        gap: clamp(1rem, 3vw, 1.5rem); /* espacement entre blocs */
    }

        .container-footer .col1[b-wxn1fzf7vr],
        .container-footer .col2[b-wxn1fzf7vr] {
            width: 100%;
            font-size: 1rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            border-left: none;
            padding: 0.5rem 0;
        }

    .logo-entreprise-footer[b-wxn1fzf7vr] {
        max-width: clamp(160px, 50vw, 220px);
        margin-bottom: clamp(1rem, 3vw, 2rem);
    }

    .container-siret[b-wxn1fzf7vr] {
        font-size: clamp(0.9rem, 2vw, 1rem);
    }
}
/* _content/FLEXYAPP/Components/Layout/MainLayout.razor.rz.scp.css */
/* ======================================= */
/* 1. MISE EN PAGE DU LAYOUT (Tablet/Desktop First) */
/* C'est la structure qui est sp�cifique � ce progiciel. */
/* ======================================= */

/* --- Dispositions par d�faut (Tablette paysage / Desktop) --- */

.main-container[b-1dyhc9e0x9] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

/*.container-content {
    flex: 1;
    display: flex;*/
    /* STRUCTURE PAR D�FAUT : Menu + Corpus c�te � c�te */
    /*flex-direction: row;
    width: 100%;
}*/



.container-content[b-1dyhc9e0x9] {
    /* REMPLACER flex: 1; par: */
    flex: 0 1 auto; /* Permet au contenu de prendre la taille de son contenu et de ne pas s'�tirer verticalement */
    display: flex;
    flex-direction: row;
    width: 100%;
}
/* ======================================= */
/* 2. STYLES BLAZOR SP�CIFIQUES (Unifi�s avec Settings) */
/* ======================================= */

/* Feedback de Validation (couleurs remplac�es par les variables) */
.valid.modified:not([type=checkbox])[b-1dyhc9e0x9] {
    /* Utilisation de var(--color-green) pour le succ�s */
    outline: 1px solid var(--color-green);
}

.invalid[b-1dyhc9e0x9] {
    /* Utilisation de var(--color-error) pour l'erreur */
    outline: 1px solid var(--color-error);
}

.validation-message[b-1dyhc9e0x9] {
    color: var(--color-error);
}

/* Bordure d'erreur Blazor non g�r�e (.blazor-error-boundary) */
.blazor-error-boundary[b-1dyhc9e0x9] {
    /* Le style Base64 et la couleur de fond sont conserv�s car sp�cifiques */
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5LjccOTg2IDg3LjMwMDUgMjU5Ljc4NiA4OS43OTIxIDI1OS43ODYgOTIuMjgzNyAyNjEuMDQ5IDkzLjUyOTUgMjYzLjU3NiA5My41Mjk1IDI2Ni4xMTYgOTMuNTI5NSAyNjcuMzg3IDkyLjI4MzcgMjY3LjM4NyA4OS43OTIxIDI2Ny4zODcgODcuMzAwNSAyNjYuMTE2IDg2LjA1NDcgMjYzLjU3NiA4Ni4wNTQ3WiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-error);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-white);
}

    .blazor-error-boundary[b-1dyhc9e0x9]::after {
        content: "Une erreur s'est produite."
    }

/* Barre d'erreur Blazor fixe en bas (#blazor-error-ui) */
#blazor-error-ui[b-1dyhc9e0x9] {
    /* Utilisation d'une variable pour le fond */
    background: var(--color-warning-light);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 999;
}

    #blazor-error-ui .dismiss[b-1dyhc9e0x9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Sur Mobile : on fixe en bas */
@media (max-width: 768px) {

    .footer-bar[b-1dyhc9e0x9] {
        display: none;
    }

}
/* _content/FLEXYAPP/Components/Pages/Dashboard.razor.rz.scp.css */


.teacher-feedback[b-0d6bvdcx1n] {
    display: flex;
    gap: 10px;
    background: #f0f7ff;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid #007bff;
    margin-top: 10px;
}

.comment-bubble p[b-0d6bvdcx1n] {
    font-style: italic;
    color: #333;
    margin: 0;
}

.status-badge.success[b-0d6bvdcx1n] {
    color: #2ecc71;
    font-weight: bold;
}

.status-badge.waiting[b-0d6bvdcx1n] {
    color: #f39c12;
}
/* _content/FLEXYAPP/Components/Pages/Home.razor.rz.scp.css */



/* css composant profilSelector */
.profile-selection-fullscreen[b-74uhv1gz58] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Un beau dégradé qui rappelle ton identité visuelle */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 2rem;
}

.selector-container[b-74uhv1gz58] {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    max-width: 100vw;
    width: 100%;
}

.hero-section[b-74uhv1gz58] {
    text-align: center;
    margin-bottom: 2rem;
    color: #2d3436;
}
/* _content/FLEXYAPP/Components/Pages/Static/Coach.razor.rz.scp.css */



.cloud-frame[b-6urk8zixbm] {
    width: 400px;
    height: 280px;
    position: relative;
    clip-path: url(#cloud-vrai-nuage);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* On réactive l'ombre maintenant que c'est fluide */
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.8));
    transform: translateZ(0);
    animation: float-b-6urk8zixbm 4s ease-in-out infinite;
}

.video-content[b-6urk8zixbm] {
    /* Largeur et hauteur à 100% pour remplir le conteneur */
    width: 100%;
    height: 100%;
    /* 'contain' permet de voir toute la vidéo sans la couper. 
       Si tu veux qu'elle touche un peu les bords, repasse en 'cover' */
    object-fit: cover;
    /* Maintenant le scale(0.8) va réduire la vidéo dans le nuage blanc */
    transform: scale(1);
    /* Si le visage est trop haut/bas une fois dézoomé, ajuste ici */
    object-position: center 30%;
    will-change: transform;
}

/* Petit effet de flottement pour le nuage */
@keyframes float-b-6urk8zixbm {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

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


/*.video-container {
    position: relative;
    width: 200px;*/ /* Taille de ton encart */
/*height: auto;
    overflow: hidden;*/
/* Création du fondu sur les bords */
/*-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0) 100%);
}*/

/*.video-background {
    width: 100%;
    filter: brightness(0.9) contrast(1.1);*/ /* Optionnel : pour ajuster le ton au site */
/*pointer-events: none;*/ /* L'utilisateur ne peut pas cliquer dessus */
/*}*/


/* Le conteneur qui gère la forme et l'ombre lumineuse */
/*.video-prof-container {
    width: 320px;
    height: 320px;
    position: relative;*/
/* L'ombre portée crée l'effet de halo lumineux autour de la forme */
/*filter: drop-shadow(0 0 15px rgba(255, 255, 200, 0.8));
}

.video-prof-clip {
    width: 100%;
    height: 100%;
    object-fit: cover;*/
/* Cette forme crée l'aspect "blob" irrégulier */
/*clip-path: url(#blob-shape);*/
/* Ou en pur CSS si tu préfères une forme fixe : */
/* clip-path: polygon(20% 0%, 80% 5%, 100% 40%, 85% 90%, 15% 100%, 0% 50%); */

/*border: 4px solid rgba(255, 255, 255, 0.5);*/ /* Un léger bord pour définir la forme */
/*}*/


/* _content/FLEXYAPP/Components/Pages/Static/MentionsLegales.razor.rz.scp.css */
/* =============================
   MENTIONS LEGALES - responsive
   Desktop-first (>=1025px), tablette <=1024, mobile <=767
   ============================= */
/* CONTENT ANNEXE - desktop defaults */
.content-annexe[b-46avt6wkr7] {
    height: 100%;
    min-height: 90vh;
    width: 100%;
    box-sizing: border-box;
}

/* header area */
.head-annexe[b-46avt6wkr7] {
    position: relative; /* pour ancrer .button-return */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 7rem;
    background-color: var(--color-third);
    color: var(--color-primary);
    box-sizing: border-box;
    padding: 0 1rem;
}

/* Retour / bouton */
.button-return[b-46avt6wkr7] {
    width: auto;
    height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    border: none;
    /*font-size: 1.1rem;*/
    border-radius: 0.3rem;
    background: var(--color-primary);
    padding: 0.3rem 0.8rem;
    box-sizing: border-box;
}

.button-return:hover[b-46avt6wkr7] {
    transform:scale(1.05);
    background: var(--color-primary-hover);
}



.head-annexe a .button-return[b-46avt6wkr7] {
    color: var(--color-third);
}

/* layout inside button */
.button-return div:first-child[b-46avt6wkr7] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5rem;
    align-items: center;
}

.button-return img[b-46avt6wkr7] {
    width: 3.5rem;
    height: auto;
}

.button-return div:last-child[b-46avt6wkr7] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 0;
    font-size: clamp(0.8rem, 2vw, 1.5rem);
}


/* container-annexe defaults (desktop) */
.container-annexe[b-46avt6wkr7] {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: var(--color-white);
    color: var(--color-third);
    box-sizing: border-box;
    padding: 2rem 1rem;
}

    /* bloc texte */
    .container-annexe .bloc-txt-annexe[b-46avt6wkr7] {
        padding-top: 1rem;
    }

/* title */
.title[b-46avt6wkr7] {
    font-size: clamp(1rem, 2.2vw, 2.6rem);
    font-family: 'Montserrat';
    font-weight: 700;
    line-height: 1;
    padding-top: 0;
    margin-bottom: 0.5rem;
    margin-left: clamp(2.5rem, 3vw, 4rem);
    color: var(--color-primary);
}

/* subtitle */
.sub-title[b-46avt6wkr7] {
    padding: 0;
    font-size: clamp(1rem, 0.9vw + 0.6rem, 1.4rem);
    font-family: 'Montserrat';
    font-weight: 200;
    max-width: 80ch;
    margin: 0 auto;
    box-sizing: border-box;
    color: var(--color-txt-primary);
}

            /* highlight first paragraph */
            .sub-title p:first-child[b-46avt6wkr7] {
                color: var(--color-primary);
                font-weight: 600;
            }

            /* ensure long paragraphs don't span the full width on large screens */
            .sub-title p:last-child[b-46avt6wkr7] {
                max-width: 70ch; /* comfortable reading width */
                margin: 0.5rem auto 0 auto;
                padding: 0;
                box-sizing: border-box;
            }


    /* Base (desktop-first) */
    .container-annexe .bloc-mention-annexe[b-46avt6wkr7] {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        gap: 2rem;
        padding: 2rem 0;
        flex-wrap: wrap; /* permet de wrapper si l'espace manque */
        box-sizing: border-box;
    }

        /* chaque colonne dans bloc-mention-annexe */
        .container-annexe .bloc-mention-annexe > div[b-46avt6wkr7] {
            /* 4 colonnes desktop : ~23% each, avec min-width pour sécurité */
            flex: 0 1 calc(30% - 2rem);
            min-width: 200px;
            box-sizing: border-box;
            text-align:left;
        }

        /* titre interne */
        .container-annexe .bloc-mention-annexe b[b-46avt6wkr7] {
            font-size: clamp(1rem, 1.2vw + 0.8rem, 1.8rem);
            color: var(--color-primary);
            display: inline-block;
        }


/* cookie UI */
.cookie-reset[b-46avt6wkr7] {
    margin-top: 1em;
    text-align: left;
}

.btn-reset-consent[b-46avt6wkr7] {
    font-size: 1rem;
    color: var(--color-secondary);
    background: none;
    border: none;
    text-decoration: underline;
    padding: 0;
}

    .btn-reset-consent:hover[b-46avt6wkr7] {
        color: var(--color-secondary-hover);
        transform: scale(1.1);
        cursor: pointer;
    }



/* utility classes used in HTML: .container-row .container-col etc assumed to exist elsewhere */

/* ===========================
   Tablet (<= 1024px) adjustments
   =========================== */
@media (max-width: 1024px) {

    /* header slightly smaller */
    .head-annexe[b-46avt6wkr7] {
        height: 6rem;
    }

    .button-return[b-46avt6wkr7] {
        height: 5rem;
        /*font-size: 1rem;*/
        left: 0.6rem;
        top: 0.6rem;
        padding: 0.25rem 0.6rem;
    }

        .button-return img[b-46avt6wkr7] {
            width: 2.8rem;
        }

    /* bloc-mention layout: prefer 2 columns or wrap to 3 depending on width */
    .container-annexe .bloc-mention-annexe > div[b-46avt6wkr7] {
        flex: 0 1 calc(33.333% - 2rem);
        min-width: 200px;
    }

    /* subtitle padding reduced for tablet */
    .container-annexe .bloc-txt-annexe .sub-title p:first-child[b-46avt6wkr7] {
        padding: 0 2rem;
    }

    .container-annexe .bloc-txt-annexe .sub-title p:last-child[b-46avt6wkr7] {
        padding: 0 1.5rem;
    }
}

/* ===========================
   Mobile (<= 767px) adjustments
   =========================== */
@media (max-width: 767px) {

    .content-annexe[b-46avt6wkr7] {
        min-height: auto;
    }

    .head-annexe[b-46avt6wkr7] {
        height: 5rem;
        padding: 0 0.75rem;
    }

    .button-return[b-46avt6wkr7] {
        height: 4rem;
        left: 0.5rem;
        top: 0.5rem;
        padding: 0.25rem 0.6rem;
        background: var(--color-primary);
        color: var(--color-third);
        border-radius: 0.35rem;
    }

        .button-return img[b-46avt6wkr7] {
            width: 2.2rem;
        }

    /* container becomes single column */
    .container-annexe[b-46avt6wkr7] {
        padding: 1rem 1rem;
        text-align: left;
    }

        .container-annexe .bloc-txt-annexe .sub-title[b-46avt6wkr7] {
            font-size: clamp(0.95rem, 2.5vw, 1.05rem);
            text-align: left;
        }

            .container-annexe .bloc-txt-annexe .sub-title p:first-child[b-46avt6wkr7] {
                padding: 0;
                margin-bottom: 0.5rem;
            }

            .container-annexe .bloc-txt-annexe .sub-title p:last-child[b-46avt6wkr7] {
                padding: 0;
                margin: 0;
                max-width: 100%;
                text-align: left;
            }

        /* bloc-mention-annexe stacks vertically */
        .container-annexe .bloc-mention-annexe[b-46avt6wkr7] {
            flex-direction: column;
            gap: 1rem;
            align-items: flex-start;
            padding: 1rem 0;
        }

            .container-annexe .bloc-mention-annexe > div[b-46avt6wkr7] {
                width: 100%;
                flex: 0 1 100%;
                min-width: 0;
                padding: 0 0.25rem;
                box-sizing: border-box;
            }


    /* cookie button alignment */
    .cookie-reset[b-46avt6wkr7] {
        margin-top: 1rem;
        text-align: left;
    }

    /* small tweaks to spacing */
    .container-annexe .bloc-txt-annexe[b-46avt6wkr7] {
        padding-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}
/* _content/FLEXYAPP/Components/Pages/Static/PolitiqueConfident.razor.rz.scp.css */
/* =============================
   MENTIONS LEGALES - responsive
   Desktop-first (>=1025px), tablette <=1024, mobile <=767
   ============================= */
/* CONTENT ANNEXE - desktop defaults */
.content-annexe[b-ykpdujhcg4] {
    height: 100%;
    min-height: 90vh;
    width: 100%;
    box-sizing: border-box;
}

/* header area */
.head-annexe[b-ykpdujhcg4] {
    position: relative; /* pour ancrer .button-return */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 7rem;
    background-color: var(--color-third);
    color: var(--color-primary);
    box-sizing: border-box;
    padding: 0 1rem;
}

/* Retour / bouton */
.button-return[b-ykpdujhcg4] {
    width: auto;
    height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    border: none;
    /*font-size: 1.1rem;*/
    border-radius: 0.3rem;
    background: var(--color-primary);
    padding: 0.3rem 0.8rem;
    box-sizing: border-box;
}

    .button-return:hover[b-ykpdujhcg4] {
        transform: scale(1.05);
        background: var(--color-primary-hover);
    }



.head-annexe a .button-return[b-ykpdujhcg4] {
    color: var(--color-third);
}

/* layout inside button */
.button-return div:first-child[b-ykpdujhcg4] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5rem;
    align-items: center;
}

.button-return img[b-ykpdujhcg4] {
    width: 3.5rem;
    height: auto;
}

.button-return div:last-child[b-ykpdujhcg4] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 0;
    font-size: clamp(0.8rem, 2vw, 1.5rem);
}


/* container-annexe defaults (desktop) */
.container-annexe[b-ykpdujhcg4] {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: var(--color-white);
    color: var(--color-third);
    box-sizing: border-box;
    padding: 2rem 1rem;
}

    /* bloc texte */
    .container-annexe .bloc-txt-annexe[b-ykpdujhcg4] {
        padding-top: 1rem;
    }

/* title */
.title[b-ykpdujhcg4] {
    font-size: clamp(0.8rem, 2.2vw, 2.6rem);
    font-family: 'Montserrat';
    font-weight: 700;
    line-height: 1;
    padding-top: 0;
    margin-bottom: 0.5rem;
    margin-left: clamp(2.5rem, 3vw, 4rem);
    color: var(--color-primary);
}

/* subtitle */
.sub-title[b-ykpdujhcg4] {
    padding: 0;
    font-size: clamp(1rem, 0.9vw + 0.6rem, 1.4rem);
    font-family: 'Montserrat';
    font-weight: 200;
    max-width: 80ch;
    margin: 0 auto;
    box-sizing: border-box;
    color: var(--color-txt-primary);
}

    /* highlight first paragraph */
    .sub-title p:first-child[b-ykpdujhcg4] {
        color: var(--color-primary);
        font-weight: 600;
    }

    /* ensure long paragraphs don't span the full width on large screens */
    .sub-title p:last-child[b-ykpdujhcg4] {
        max-width: 70ch; /* comfortable reading width */
        margin: 0.5rem auto 0 auto;
        padding: 0;
        box-sizing: border-box;
    }


/* Base (desktop-first) */
.container-annexe .bloc-mention-annexe[b-ykpdujhcg4] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem 0;
    flex-wrap: wrap; /* permet de wrapper si l'espace manque */
    box-sizing: border-box;
}

    /* chaque colonne dans bloc-mention-annexe */
    .container-annexe .bloc-mention-annexe > div[b-ykpdujhcg4] {
        /* 4 colonnes desktop : ~23% each, avec min-width pour sécurité */
        flex: 0 1 calc(30% - 2rem);
        min-width: 200px;
        box-sizing: border-box;
        text-align: left;
    }

    /* titre interne */
    .container-annexe .bloc-mention-annexe b[b-ykpdujhcg4] {
        font-size: clamp(1rem, 1.2vw + 0.8rem, 1.8rem);
        color: var(--color-primary);
        display: inline-block;
    }


/* ===========================
   Tablet (<= 1024px) adjustments
   =========================== */
@media (max-width: 1024px) {

    /* header slightly smaller */
    .head-annexe[b-ykpdujhcg4] {
        height: 6rem;
    }

    .button-return[b-ykpdujhcg4] {
        height: 5rem;
        /*font-size: 1rem;*/
        left: 0.6rem;
        top: 0.6rem;
        padding: 0.25rem 0.6rem;
    }

        .button-return img[b-ykpdujhcg4] {
            width: 2.8rem;
        }

    /* bloc-mention layout: prefer 2 columns or wrap to 3 depending on width */
    .container-annexe .bloc-mention-annexe > div[b-ykpdujhcg4] {
        flex: 0 1 calc(33.333% - 2rem);
        min-width: 200px;
    }

    /* subtitle padding reduced for tablet */
    .container-annexe .bloc-txt-annexe .sub-title p:first-child[b-ykpdujhcg4] {
        padding: 0 2rem;
    }

    .container-annexe .bloc-txt-annexe .sub-title p:last-child[b-ykpdujhcg4] {
        padding: 0 1.5rem;
    }
}

/* ===========================
   Mobile (<= 767px) adjustments
   =========================== */
@media (max-width: 767px) {

    .content-annexe[b-ykpdujhcg4] {
        min-height: auto;
    }

    .head-annexe[b-ykpdujhcg4] {
        height: 5rem;
        padding: 0 0.75rem;
    }

    .button-return[b-ykpdujhcg4] {
        height: 4rem;
        left: 0.5rem;
        top: 0.5rem;
        /*font-size: 0.95rem;*/
        padding: 0.25rem 0.6rem;
        background: var(--color-primary);
        color: var(--color-third);
        border-radius: 0.35rem;
    }

        .button-return img[b-ykpdujhcg4] {
            width: 2.2rem;
        }

    /* container becomes single column */
    .container-annexe[b-ykpdujhcg4] {
        padding: 1rem 1rem;
        text-align: left;
    }

        .container-annexe .bloc-txt-annexe .sub-title[b-ykpdujhcg4] {
            font-size: clamp(0.95rem, 2.5vw, 1.05rem);
            text-align: left;
        }

            .container-annexe .bloc-txt-annexe .sub-title p:first-child[b-ykpdujhcg4] {
                padding: 0;
                margin-bottom: 0.5rem;
            }

            .container-annexe .bloc-txt-annexe .sub-title p:last-child[b-ykpdujhcg4] {
                padding: 0;
                margin: 0;
                max-width: 100%;
                text-align: left;
            }

        /* bloc-mention-annexe stacks vertically */
        .container-annexe .bloc-mention-annexe[b-ykpdujhcg4] {
            flex-direction: column;
            gap: 1rem;
            align-items: flex-start;
            padding: 1rem 0;
        }

            .container-annexe .bloc-mention-annexe > div[b-ykpdujhcg4] {
                width: 100%;
                flex: 0 1 100%;
                min-width: 0;
                padding: 0 0.25rem;
                box-sizing: border-box;
            }


    /* small tweaks to spacing */
    .container-annexe .bloc-txt-annexe[b-ykpdujhcg4] {
        padding-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}
/* _content/FLEXYAPP/Components/Pages/WelcomeView.razor.rz.scp.css */
/* _content/FLEXYAPP/Modules/AppNavigator/Components/Widgets/Taskbar.razor.rz.scp.css */

/* CSS SCOPED Taskbar */
/* bloc barre haute - affichée sur toute les pages */

.container-HomeBarNav[b-dd8sz9ocsp] {
    position: fixed;
    width: 100%;
    height: var(--height-taskbar);
}

.HomeBarNav[b-dd8sz9ocsp] {
    background-color: var(--color-primary);
    
    color: white;
    width: 100%;
    height: var(--height-taskbar);
}


.top-row[b-dd8sz9ocsp] {
    width: 100%;
    height: 5.8rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--color-white);
    color: var(--color-primary);
    border-bottom: var(--color-accent-light) 1px solid;
    margin-bottom: 0;
}


.logo-entreprise[b-dd8sz9ocsp] {
    width: 4rem;
    height: auto;
    align-items: center;
}

.logo-entreprise-min[b-dd8sz9ocsp] {
    width: auto;
    max-height: calc(var(--height-taskbar) - 2rem);
    align-items: center;
    /*filter: brightness(0)*/ /* 1. Rend tout l'élément noir */
    /*invert(1)*/ /* 2. Inverse le noir en blanc */
}


.container-badge[b-dd8sz9ocsp] {
    margin-top: -0.8vh;
}


/* Lignes du slogan */
.hero-slogan div[b-dd8sz9ocsp] {
    display: block;
    white-space: nowrap; /* évite les espaces parasites */
    margin-left: 0; /* supprime tout décalage */
    padding-left: 0; /* sécurité */
    font-family: "Biryani";
    position: relative;
    opacity: 0;
    transform: translateX(-250px);
    animation: punchIn-b-dd8sz9ocsp 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
}

    /* Décalage des deux parties */
    .hero-slogan div:nth-child(2)[b-dd8sz9ocsp] {
        animation-delay: 0.3s;
    }

    .hero-slogan div:nth-child(3)[b-dd8sz9ocsp] {
        animation-delay: 2s;
    }

@keyframes punchIn-b-dd8sz9ocsp {
    0% {
        opacity: 0;
        transform: translateX(-250px);
    }

    80% {
        opacity: 1;
        transform: translateX(10px); /* petit dépassement vers la droite */
    }

    100% {
        opacity: 1;
        transform: translateX(0); /* retour sec à la place */
    }
}

.container-burger-btn[b-dd8sz9ocsp] {
    display: none;
}

.burger-menu-btn[b-dd8sz9ocsp] {
    display: none;
    cursor: pointer;
    padding: 5px;
    z-index: 2001;
}

.container-menu-normal[b-dd8sz9ocsp] {
    display: block;
}

.container-menu-mobile[b-dd8sz9ocsp] {
    display: none;
}




/* ================================
   REGLES MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
/*@media (max-width: 1599px) {
    .container-logo-positionmenu2 {
        display: none;
    }
}*/



/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
/*@media (max-width: 1024px) {
    .HomeBarNav {
        justify-content: space-between !important;*/ /* Pousse les deux blocs aux extrémités */
        /*padding: 0 0 0 1rem;*/ /* Évite que les boutons ne collent aux bords de l'écran */
/*}

    .paddingLR2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .marginL4 {
        margin-left: 0;
    }

    .master-margin-left {
        margin-left: 0;
    }

    .container-logo-positionmenu2 {
        display: none;
    }
}*/



/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 900px) {

    .HomeBarNav[b-dd8sz9ocsp] {
        display: flex !important;
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 !important;
    }


    .mobile-menu-overlay[b-dd8sz9ocsp] {
        position: fixed;
        top: var(--height-taskbar); /* Hauteur de ta taskbar */
        left: 0;
        width: 100%;
        height: calc(100dvh - var(--height-taskbar)); /*Prend toute la hauteur restante */
        /* Empêche le scroll de se propager au body quand on atteint les extrémités */
        /* PROPRIÉTÉS CLÉS POUR LE SCROLL */
        overflow-y: auto !important; /* Autorise le scroll vertical */
        -webkit-overflow-scrolling: touch; /* Fluidité sur iPhone/iOS */
        overscroll-behavior: contain; /* Empêche le rebond de propager le scroll au body */
        background-color: transparent;
        z-index: 1002;
        /*overflow: hidden;*/
        animation: slideDown-b-dd8sz9ocsp 0.4s ease-out forwards;
        transform-origin: top;
    }



    @keyframes slideDown-b-dd8sz9ocsp {
        from {
            opacity: 0;
            transform: scaleY(0);
        }

        to {
            opacity: 1;
            transform: scaleY(1);
        }
    }



    .mobile-menu-content[b-dd8sz9ocsp] {
        background-color: white; /* Le blanc s'arrête là où le contenu s'arrête */
        width: 100%;
        /* On laisse le contenu s'adapter à la taille de tes liens */
    }

    .menu-backdrop[b-dd8sz9ocsp] {
        position: fixed;
        top: var(--height-taskbar);
        left: 0;
        width: 100vw;
        height: calc(100dvh - var(--height-taskbar)); /* Prend toute la hauteur restante */
        /* Un léger voile sombre aide à comprendre que le fond est inactif */
        background-color: rgba(0, 0, 0, 0.2); /* Plus clair */
        backdrop-filter: blur(4px); /* Floute ce qu'il y a derrière */
        -webkit-backdrop-filter: blur(4px); /* Compatibilité iOS */
        z-index: 1001; /* Juste en dessous du container menu */
    }

    .container-menu-normal[b-dd8sz9ocsp], .container-button-annexe[b-dd8sz9ocsp], .container-logo-positionmenu2[b-dd8sz9ocsp] {
        display: none;
    }

    .container-menu-mobile[b-dd8sz9ocsp], .mobile-main-nav[b-dd8sz9ocsp] {
        display: block;
    }

        /***********/
        /* Ajustement des boutons de la taskbar */

        /* 1. On donne une limite aux blocs de texte */
        .container-menu-mobile .container-row.j-start[b-dd8sz9ocsp] {
            flex: 0 1 auto !important;
            min-width: 0 !important; /* Indispensable pour laisser rétrécir */
            overflow: hidden; /* Sécurité anti-chevauchement */
        }

    /* 2. On réduit la taille des boutons pour gagner de la place */
    .btn-primary.btnSize3Wauto[b-dd8sz9ocsp] {
        min-width: 0 !important; /* On casse la min-width de la lib */
        width: auto !important;
        font-size: 0.85rem !important;
        padding: 0 8px !important; /* On serre les paddings */
        white-space: nowrap;
        text-overflow: ellipsis; /* Si "Professionnels" est trop long, il devient "Profess..." */
        overflow: hidden;
    }

    /* 3. LE BURGER : On le verrouille à droite */
    .container-burger-btn[b-dd8sz9ocsp] {
        flex: 0 0 60px !important; /* On ajuste la taille du container si besoin */
        width: 60px !important;
        height: 60px !important;
        margin-left: auto !important;
        padding: 0 !important; /* On enlève tout padding qui réduirait l'image */
        display: flex !important;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }




    .burger-menu-btn[b-dd8sz9ocsp] {
        display: block !important;
        width: 100% !important; /* L'image prend toute la largeur du container */
        height: 100% !important; /* L'image prend toute la hauteur du container */
        object-fit: contain; /* "contain" pour ne pas déformer le SVG, ou "fill" si tu veux forcer */
        flex-shrink: 0 !important;
        margin: 0 !important; /* On retire les marges parasites */
    }
}
/* _content/FLEXYAPP/Modules/AuthProfileManager/Components/PinWidget.razor.rz.scp.css */


.pin-overlay[b-xllzxm5a6p] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 999;
}

.pin-card[b-xllzxm5a6p] {
    background: white;
    padding: 2rem;
    border-radius: 1.5rem;
    width: 320px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    text-align: center;
}

.pin-header h3[b-xllzxm5a6p] {
    margin: 0.5rem 0 0.2rem 0;
    color: #333;
}

.pin-header p[b-xllzxm5a6p] {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1.5rem;
}

/* Bulles de saisie */
.pin-dot[b-xllzxm5a6p] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    transition: all 0.2s ease;
}

    .pin-dot.active[b-xllzxm5a6p] {
        background-color: orange;
        border-color: orange;
        transform: scale(1.2);
    }

/* Grille du pavé */
.numpad[b-xllzxm5a6p] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 10px;
}

.num-btn[b-xllzxm5a6p] {
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid #eee;
    background: #f9f9f9;
    font-size: 1.5rem;
    font-weight: bold;
    color: #444;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .num-btn:active[b-xllzxm5a6p] {
        background: #e0e0e0;
        transform: scale(0.95);
    }

.btn-clear[b-xllzxm5a6p] {
    color: #ff4444;
    font-size: 1.2rem;
}

.btn-back img[b-xllzxm5a6p] {
    opacity: 0.6;
}

.btn-cancel-flat[b-xllzxm5a6p] {
    background: transparent;
    border: none;
    color: #888;
    font-weight: bold;
    cursor: pointer;
    padding: 0.5rem 1rem;
}

.animate-pop-in[b-xllzxm5a6p] {
    animation: popIn-b-xllzxm5a6p 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn-b-xllzxm5a6p {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* _content/FLEXYAPP/Modules/AuthProfileManager/Components/ProfileSelector.razor.rz.scp.css */



.profile-card-overlay[b-beflrehgym] {
    /*position: fixed;
    top: 0;
    left: 0;*/
    width: 100%;
    height: fit-content;
    background-color:transparent;
    z-index: 999;
    align-content:center;
    justify-content:center;
    align-items:center;
}

.profile-card[b-beflrehgym] {
    /*background: white;*/
    width: 100%;
    padding: 1rem;
    border-radius: 1.5rem;

    /*box-shadow: 0 10px 25px rgba(0,0,0,0.5);*/
    text-align: center;
}


.border-dashed[b-beflrehgym] {
    border: 3px dashed #ffffff80;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent !important;
}

.profile-card:hover .border-dashed[b-beflrehgym] {
    border-color: #ffffff;
    background: rgba(255,255,255,0.1) !important;
}



/* widget pin*/



.pin-overlay[b-beflrehgym] {
    position: fixed;
    top: 0;
    left: 0;
    width:500px;
    height: auto;

    background: rgba(0,0,0,0.8);
    z-index: 1001;
}

.pin-card[b-beflrehgym] {
    background: white;
    padding: 2rem;
    border-radius: 1.5rem;
    width: 500px;
    height:fit-content;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    text-align: center;
}

.pin-header h3[b-beflrehgym] {
    margin: 0.5rem auto;
    color: #333;
}

.pin-header p[b-beflrehgym] {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
}

/* Bulles de saisie */
.pin-dot[b-beflrehgym] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    transition: all 0.2s ease;
}

    .pin-dot.active[b-beflrehgym] {
        background-color: orange;
        border-color: orange;
        transform: scale(1.2);
    }

/* Grille du pavé */
.numpad[b-beflrehgym] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 10px;
}

.num-btn[b-beflrehgym] {
    width:5rem;
    height:5rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid #eee;
    background: #f9f9f9;
    font-size: 1.5rem;
    font-weight: bold;
    color: #444;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .num-btn:active[b-beflrehgym] {
        background: #e0e0e0;
        transform: scale(0.95);
    }

.btn-clear[b-beflrehgym] {
    color: #ff4444;
    font-size: 1.2rem;
}

.btn-back img[b-beflrehgym] {
    opacity: 0.6;
}

.btn-cancel-flat[b-beflrehgym] {
    background: transparent;
    border: none;
    color: #888;
    font-weight: bold;
    cursor: pointer;
    padding: 0.5rem 1rem;
}

.animate-pop-in[b-beflrehgym] {
    animation: popIn-b-beflrehgym 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn-b-beflrehgym {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* _content/FLEXYAPP/Modules/Contact/Components/Pages/Contact.razor.rz.scp.css */
/* === SocialBar Responsive === */

/* Desktop par défaut (inchangé) */
.container-join-us[b-wipgftcx0z] {
    width: 100%;
    height: auto;
    min-height: 58rem;
    max-height: 58rem;
    background-color: #2d2d2d;
    display: flex;
    justify-content: flex-start;
    border-top: 6px solid var(--color-CTA-primary);
    border-bottom: 4px solid var(--color-CTA-primary);
}

ContactForm[b-wipgftcx0z] {
    width: 100%;
    height: auto;
}


.img-contact[b-wipgftcx0z] {
    width: 100%;
    min-width: 45rem;
    height: 100%;
    min-height: 58rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/assets/images/background/background-nature.jpg');
    background-position: center center;
    z-index:100000;
}


.bloc-social[b-wipgftcx0z] {
    display: flex;
    justify-content: center;
    /*flex-direction:column;
    align-items:center;
    align-content:center;*/
    overflow: hidden;
    width: 4.5rem;
    height: auto;
}

    .bloc-social a img[b-wipgftcx0z] {
        width: 4rem;
        height: auto;
    }

        .bloc-social a img:hover[b-wipgftcx0z] {
            transform: scale(1.15) rotate(-5deg);
            cursor: pointer;
        }

    /*    .bloc-social:hover {
        transform: scale(1.1) rotate(-5deg);
        transition: transform 0.5s ease-out;
        cursor: pointer;
    }*/
    .bloc-social a img[b-wipgftcx0z] {
        width: clamp(60px, 150px - 10vw, 80px); /* plus petit écran → icône plus grosse */
        height: auto;
        margin-top: 0.5rem; /* clamp(0.5rem, 2vw, 1rem);*/
        transition: transform 0.3s ease-out;
    }

.container-form-contact[b-wipgftcx0z] {
    width: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-img-contact[b-wipgftcx0z] {
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.container-telnumber[b-wipgftcx0z] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 0;
}


.container-logosocial[b-wipgftcx0z] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 0;
}


.container-infocontact[b-wipgftcx0z] {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 2rem;
}
/* ================================
   MEDIA QUERIES
================================= */
/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (max-width: 1599px) {
    .img-contact[b-wipgftcx0z], .container-img-contact[b-wipgftcx0z] {
        display: none;
    }

    .container-img-contact[b-wipgftcx0z] {
        width: 0;
    }

    .container-form-contact[b-wipgftcx0z] {
        width: 80vw;
    }

    .master-padding-left[b-wipgftcx0z] {
        padding: 0 4rem;
        margin: 0 auto;
    }

    .container-infocontact[b-wipgftcx0z] {
        width: 60%;
    }
}



/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .master-padding-left[b-wipgftcx0z] {
        padding-left: 1rem;
    }

    .container-infocontact[b-wipgftcx0z] {
        width: 100%;
    }
}



/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {

    h3[b-wipgftcx0z] {
        margin: 1rem auto;
    }

    .container-infocontact[b-wipgftcx0z] {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 0 auto 1rem 2rem;
    }

    .container-logosocial[b-wipgftcx0z] {
        justify-content: flex-start;
    }

    .container-telnumber[b-wipgftcx0z] {
        margin-bottom: 2rem;
    }

    .container-form-contact[b-wipgftcx0z] {
        width: 100vw;
    }

    .master-padding-left[b-wipgftcx0z] {
        padding-left: 0;
    }
}
/* _content/FLEXYAPP/Modules/Contact/Components/Widgets/ContactForm.razor.rz.scp.css */
/* ===============================
   Contact & Social Component CSS
   Responsive
=============================== */

/* === Desktop (>= 1025px) === */
/* => inchangé, ta base fonctionne bien */

/* Variables locales au composant */
.contact-us[b-d3crx9kei2] {
    width: 100%;
    min-width:45rem;
    /*Animation d’apparition globale */
    opacity: 1;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
    background-color:white;
    color: #2d2d2d;
    border-radius: var(--radius-double);
}

    .contact-us.cu-visible[b-d3crx9kei2] {
        opacity: 1;
        transform: translateY(0);
    }


 /*Carte du formulaire */
    .contact-us .container-form-add-big[b-d3crx9kei2] {
        width: 100%;
        max-width: 45rem;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: clamp(1rem, 2vw, 1.5rem);
        box-shadow: 0 12px 30px rgba(235,123,12,.06);
        /*animation-delay: 0.3s;*/
        margin: 0;
    }



/* Groupes de champs */
.contact-us .form-group[b-d3crx9kei2] {
    width:100%;
    position: relative;
    margin-bottom: 1rem;
}



 /*Placeholder */
.contact-us .form-group [b-d3crx9kei2]::placeholder {
        color: var(--text-muted);
        opacity: .9;
        font-size: 1rem;
    }

 /*Messages d’erreur */
.contact-us .warning-message[b-d3crx9kei2] {
    margin-top: .4rem;
    color: #c0392b;
    font-size: .9rem;
    line-height: 1.2;
}

/* Bouton principal */
.contact-us .btn[b-d3crx9kei2] {
    background: linear-gradient(45deg, var(--accent), #ff9b4a);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: .75rem 2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(240,126,38,.25);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
    user-select: none;
}

    .contact-us .btn:hover[b-d3crx9kei2] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(240, 126, 38, 0.4);
        filter: brightness(1.05);
    }

    .contact-us .btn:active[b-d3crx9kei2] {
        transform: translateY(0);
        box-shadow: 0 3px 6px rgba(240, 126, 38, 0.3);
    }

    .contact-us .btn.is-loading[b-d3crx9kei2] {
        filter: grayscale(.15) brightness(.92);
        box-shadow: none;
        pointer-events: none;
    }



/* ================================
   REGLES MEDIA QUERIES
================================= */

/* Accessibilité - réduction des motions */
@media (prefers-reduced-motion:reduce) {
    .contact-us[b-d3crx9kei2] {
        transition: none;
    }

        .contact-us .container-form-add-big[b-d3crx9kei2] {
            animation: none;
        }

        .contact-us .form-group input:focus[b-d3crx9kei2],
        .contact-us .form-group textarea:focus[b-d3crx9kei2] {
            box-shadow: none;
        }
}


/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
/*@media (max-width: 1599px) {

}*/


/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (max-width: 1024px) {
    .contact-us[b-d3crx9kei2] {
        width: 100vw;
        margin: 0;
    }
        .contact-us .container-form-add-big[b-d3crx9kei2] {
            width: 100%;
            
            padding: clamp(0.8rem, 2vw, 1.2rem);
            border-radius: 12px;
        }

    .contact-us .form-group .input[b-d3crx9kei2],
    .contact-us .form-group textarea[b-d3crx9kei2] {
        font-size: 0.95rem;
        padding: 0.75rem 0.9rem;
    }

    .contact-us .btn[b-d3crx9kei2] {
        padding: 0.7rem 1.5rem;
        font-size: 0.95rem;
    }
}



/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 767px) {
    :root[b-d3crx9kei2] {
        --input-width: 100%; /* Pleine largeur sur mobile */
    }

    h3[b-d3crx9kei2] {
        padding-left: 3rem;
        font-size: 2rem;
    }

    /* Optionnel : si tu as des formulaires dans tes colonnes paddingL12 */
    input[b-d3crx9kei2], select[b-d3crx9kei2], textarea[b-d3crx9kei2] {
        max-width: 100% !important;
    }

    

        .contact-us .container-form-add-big[b-d3crx9kei2] {
            border-radius: 0;
            box-shadow: 0 6px 16px rgba(235,123,12,.1);
            padding: 1rem;
            margin: 0 auto !important;
        }

    .contact-us .form-group[b-d3crx9kei2] {
        width: 100%;
        margin-bottom: 0.8rem;
    }

        .contact-us .form-group textarea[b-d3crx9kei2] {
            min-height: 100px; /* réduit pour petits écrans */
        }

    .contact-us .btn[b-d3crx9kei2] {
        width: 100%; /* bouton prend toute la largeur */
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .contact-us .warning-message[b-d3crx9kei2] {
        font-size: 0.8rem;
    }


}

/* === Très petits mobiles (<= 480px) === */
@media (max-width: 480px) {
    .contact-us .container-form-add-big[b-d3crx9kei2] {
        width:100%;
        padding: 0.8rem;
        border-radius: 0;
    }

    .contact-us .form-group .input[b-d3crx9kei2],
    .contact-us .form-group textarea[b-d3crx9kei2] {
        font-size: 0.85rem;
        padding: 0.65rem 0.8rem;
    }

    .contact-us .btn[b-d3crx9kei2] {
        font-size: 0.85rem;
        padding: 0.65rem;
    }
}


/* _content/FLEXYAPP/Modules/Cookies/Components/Widgets/ConsentCookies.razor.rz.scp.css */
/* Styles généraux pour cookie-banner et cookie-settings-panel */
#cookie-banner[b-btu344cs10],
#cookie-settings-panel[b-btu344cs10] {
    width: 85%;
    max-width: 29.5rem;
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-white);
    color: #000;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 6px 15px rgba(0,0,0,0.35);
    z-index: 99999;
    animation: fadeIn-b-btu344cs10 0.5s ease-out forwards;
}

    #cookie-settings-panel h2[b-btu344cs10] {
        font-size:1.8rem;
    }

    #cookie-banner p[b-btu344cs10],
    #cookie-settings-panel p[b-btu344cs10] {
        text-align: center;
        line-height: 1.4;
        margin: 0 0 12px 0;
    }

.cookie-actions[b-btu344cs10] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.cookie-categories[b-btu344cs10] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

    .cookie-categories label[b-btu344cs10] {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 14px;
    }

    .cookie-categories input[type="checkbox"][b-btu344cs10] {
        margin: 0 2rem 0 0;
        transform: scale(1.2);
        width: 2rem;
        height: 2rem;
        border: none;
    }

        .cookie-categories input[type="checkbox"]:hover[b-btu344cs10] {
            cursor: pointer;
        }

    .cookie-categories .desc[b-btu344cs10] {
        font-size: 12px;
        color: #ccc;
    }

/* Buttons */
.cookie-actions button[b-btu344cs10] {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    transition: transform 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

#cookie-accept[b-btu344cs10] {
    background-color: var(--color-success);
    color: #001624;
}

    #cookie-accept:hover[b-btu344cs10] {
        background-color: var(--color-success-hover);
        transform: scale(1.1);
    }

#cookie-settings[b-btu344cs10] {
    background-color: var(--color-primary);
    color: #fff;
}

    #cookie-settings:hover[b-btu344cs10] {
        background-color: var(--color-primary-hover);
        transform: scale(1.1);
    }

#cookie-save[b-btu344cs10] {
    background-color: var(--color-CTA-primary);
    color: #001624;
}

    #cookie-save:hover[b-btu344cs10] {
        background-color: var(--color-CTA-primary-hover);
        transform: scale(1.1);
    }

#cookie-quit[b-btu344cs10] {
    background-color: var(--color-error);
    color: #001624;
}

    #cookie-quit:hover[b-btu344cs10] {
        background-color: var(--color-error-hover);
        transform: scale(1.1);
    }

/* Animations */
@keyframes fadeIn-b-btu344cs10 {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* =============================
   Responsive design breakpoints
============================= */

/* Desktop / grand écran */
@media (min-width: 1025px) {
    #cookie-banner[b-btu344cs10],
    #cookie-settings-panel[b-btu344cs10] {
        bottom: 5rem;
        left: 30%;
        transform: translateX(-50%);
        font-size: 14px;
        max-width: 29.5rem;
    }

    .cookie-categories input[type="checkbox"][b-btu344cs10] {
        margin-left: 2rem;
        transform: scale(1.2);
    }
}

/* Tablette portrait / moyen écran */
@media (min-width: 768px) and (max-width: 1024px) {
    #cookie-banner[b-btu344cs10],
    #cookie-settings-panel[b-btu344cs10] {
        bottom: 4rem;
        left: 40%;
        transform: translateX(-50%);
        font-size: 13px;
        max-width: 25rem;
    }

    .cookie-categories input[type="checkbox"][b-btu344cs10] {
        margin-left: 1.5rem;
        transform: scale(1.1);
    }
}

/* Mobile */
@media (max-width: 767px) {
    #cookie-banner[b-btu344cs10],
    #cookie-settings-panel[b-btu344cs10] {
        bottom: 2rem;
        left: 5%;
        transform: translateX(-50%);
        font-size: 12px;
        max-width: 90%;
        padding: 12px 16px;
    }

    .cookie-actions button[b-btu344cs10] {
        padding: 6px 10px;
        font-size: 12px;
    }

    .cookie-categories input[type="checkbox"][b-btu344cs10] {
        margin-left: 1rem;
        transform: scale(1);
        width: 1.5rem;
        height: 1.5rem;
    }

    .cookie-categories .desc[b-btu344cs10] {
        font-size: 11px;
    }
}
/* _content/FLEXYAPP/Modules/EnterpriseManager/Components/Pages/MonEntreprise.razor.rz.scp.css */
.entreprise-view-container[b-y5hsipbnnz] {
    padding: 20px;
    max-width: 1200px;
    margin: auto;
}

.header-action-row[b-y5hsipbnnz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
}

.view-section-grid[b-y5hsipbnnz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.view-card[b-y5hsipbnnz] {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

    .view-card h2[b-y5hsipbnnz] {
        color: #3f51b5;
        margin-top: 0;
        font-size: 1.5em;
    }

    .view-card h3[b-y5hsipbnnz] {
        color: #607d8b;
        margin-top: 15px;
        font-size: 1.1em;
    }

.info-row[b-y5hsipbnnz] {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px dotted #f0f0f0;
}

.info-label[b-y5hsipbnnz] {
    font-weight: 500;
    color: #555;
}

.info-value[b-y5hsipbnnz], .info-value-link[b-y5hsipbnnz] {
    color: #333;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tva-mention[b-y5hsipbnnz] {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff3e0;
    border-left: 5px solid #ff9800;
    font-style: italic;
    font-size: 0.9em;
}

.full-width-comment[b-y5hsipbnnz] {
    margin-top: 20px;
    grid-column: 1 / -1; /* Prend toute la largeur de la grille */
}
/* _content/FLEXYAPP/Modules/ErrorManager/Components/Widgets/Error/Error403.razor.rz.scp.css */


/* Barre d'entête spécifique pour l'erreur 403 */
.error-bar-403[b-070ng6fgaj] {
    min-width: 100%;
    height: 5rem; /* Hauteur spécifique */
    background: #a24b41; /* Couleur de fond spécifique au 403 (Rouge/Brun) */
    color: var(--color-white);
    border-bottom: var(--color-primary-light) 3px solid; /* Bordure d'accentuation */
}

/* Titre dans cette barre */
.error-title-text[b-070ng6fgaj] {
    font-size: 2.2rem; /* Taille spécifique */
    flex-grow: 9;
    margin: 2rem 1rem;
    color: var(--color-white); /* Force la couleur blanche */
}

    .error-title-text img[b-070ng6fgaj] {
        margin: 0 1rem;
    }


/*.access-denied-container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.02);
}

.full-page {
    min-height: 70vh;
    width: 100%;
}

.widget-mode {
    border: 1px dashed #ccc;
    margin: 1rem;
}

.access-denied-content h3 {
    color: #333;
    font-weight: 600;
}*/
/* _content/FLEXYAPP/Modules/GamificationManager/Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* Fond noir transparent */
.modal-overlay[b-vgt8750xpj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Conteneur de la modale */
.modal-container[b-vgt8750xpj] {
    background: white;
    padding: 20px;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.modal-header[b-vgt8750xpj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.modal-body img[b-vgt8750xpj] {
    max-width: 100%;
    max-height: 70vh; /* Évite que l'image dépasse de l'écran */
    display: block;
    margin: 0 auto;
    border-radius: 4px;
}

.btn-close-custom[b-vgt8750xpj] {
    background: #ff4757;
    color: white;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    transition: transform 0.2s;
}

    .btn-close-custom:hover[b-vgt8750xpj] {
        transform: scale(1.1);
    }
/* _content/FLEXYAPP/Modules/GamificationManager/Components/Pages/Map.razor.rz.scp.css */

.map-container[b-l0dsvt6v3u] {
    /* Le conteneur doit être relatif pour que les points absolus fonctionnent */
    position: relative;
    /* Retiré display: flex et justifiy-content: center pour éviter d'interférer avec le positionnement absolu */

    margin: 0 auto; /* Centrer le conteneur */
    overflow: hidden; /* Important si la carte est plus grande que l'écran */
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100vw; /* Définir une largeur pour le conteneur lui-même */
    height: 100vh; /* Définir une hauteur */
    
}

.map-background[b-l0dsvt6v3u] {
    /* Assurez-vous que l'image de fond est en pleine taille de la carte elle-même */
    /* Ces valeurs doivent correspondre à la taille que vous voulez que la carte occupe */
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%; /* Définir une largeur pour le conteneur lui-même */
    height: 100%; /* Définir une hauteur */
    object-fit: cover; /* ou cover, selon votre préférence pour l'image */
    
}


.controlButtonMap[b-l0dsvt6v3u] {
    border-radius: 100%;
    border: solid grey 1px;
    cursor: pointer;
    text-align: center;
    z-index: 10;
    /* Décalage pour centrer le point sur les coordonnées X et Y */
    /*transform: translate(-50%, -50%);
    transition: transform 0.2s, box-shadow 0.2s;*/
    /* Assurez-vous que le wrapper est positionné pour les labels absolus */
    display: flex;
    align-items: center;
    justify-content: center;
}



.session-bloc[b-l0dsvt6v3u] {
    position: absolute; /* Permet de les positionner avec X/Y */
   /* width: auto;
    min-width: 5rem;
    height: 60px;
    border-radius: 0.5rem;
    border: solid grey 1px;*/
    cursor: pointer;
    text-align: center;
    /*line-height: 40px;
    font-weight: bold;
    color: white;*/
    z-index: 10;
    /* Décalage pour centrer le point sur les coordonnées X et Y */
    transform: translate(-50%, -50%);
    transition: transform 0.2s, box-shadow 0.2s;
    /* Assurez-vous que le wrapper est positionné pour les labels absolus */
    display: flex;
    align-items: center;
    justify-content: center;
}
    .session-bloc:hover[b-l0dsvt6v3u] {
        transform: translate(-50%, -50%) scale(1.2); /* Effet de zoom au survol */
        z-index: 15; /* S'assurer qu'il est au-dessus des autres */
    }


/* --- Styles des Points de Session --- */
.session-point[b-l0dsvt6v3u] {
    position: absolute; /* Permet de les positionner avec X/Y */
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Pour un point rond */
    cursor: pointer;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    color: white;
    z-index: 20;
    /* Décalage pour centrer le point sur les coordonnées X et Y */
    transform: translate(-50%, -50%);
    transition: transform 0.2s, box-shadow 0.2s;
    /* Assurez-vous que le wrapper est positionné pour les labels absolus */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .session-point:hover[b-l0dsvt6v3u] {
        transform: translate(-50%, -50%) scale(1.2); /* Effet de zoom au survol */
        z-index: 25; /* S'assurer qu'il est au-dessus des autres */
    }

/* Base pour le wrapper des icônes/numéros */
.point-icon-wrapper[b-l0dsvt6v3u] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* État 'completed' */
.session-point.completed[b-l0dsvt6v3u] {
    background-color: #4CAF50; /* Vert pour les séances terminées */
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
    cursor: default; /* Peut être cliquable pour revoir, sinon default */
}

    .session-point.completed .point-status-icon[b-l0dsvt6v3u] {
        font-size: 1.5rem; /* Grosse coche */
    }

/* État 'unlocked' (point actuel ou à faire) */
.session-point.unlocked[b-l0dsvt6v3u] {
    background-color: #03A9F4; /* Bleu vif pour déverrouillé/actif */
    box-shadow: 0 0 10px rgba(3, 169, 244, 0.8);
}

/* État 'locked' (verrouillé) */
.session-point.locked[b-l0dsvt6v3u] {
    background-color: #607D8B; /* Gris/Bleu ardoise pour verrouillé */
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.7; /* Légèrement moins visible */
}

    .session-point.locked .point-status-icon[b-l0dsvt6v3u] {
        font-size: 1.2rem;
    }

/* Libellé du point */
.point-label[b-l0dsvt6v3u] {
    position: absolute;
    top: 45px; /* Au-dessous du point */
    font-size: 0.9em;
    font-weight: normal;
    white-space: nowrap;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* Tag de récompense */
.reward-tag[b-l0dsvt6v3u] {
    position: absolute;
    top: 30px;
    background: #FFEB3B; /* Jaune pour les points */
    color: #333;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: bold;
    white-space: nowrap;
    z-index: 1; /* Juste au-dessus du point */
}



/* Contrôles de Debug */
.debug-controls[b-l0dsvt6v3u] {
    position: absolute;
    top: 20px;
    right: 2rem;
    z-index: 50;
    display: flex;
    gap: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}


.game-controls[b-l0dsvt6v3u] {
    position: absolute;
    width:auto;
    height: 15rem;
    top: 15%;
    left: 40vw;
    z-index: 999;
    display: flex;
    flex-direction:column;
    gap: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}


/* Styles pour la Modale de Verrouillage */

.modal-backdrop[b-l0dsvt6v3u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
    z-index: 1000; /* Assurez-vous qu'il est au-dessus de tout */
    display: flex;
    justify-content: center;
    align-items: center;
}

.locked-modal[b-l0dsvt6v3u] {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    text-align: center;
}

    .locked-modal h3[b-l0dsvt6v3u] {
        color: #ff5722; /* Couleur d'alerte */
    }

    .locked-modal button[b-l0dsvt6v3u] {
        margin-top: 15px;
        /* Styles de bouton basique si vous n'utilisez pas de librairie */
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }



/*.map-container {*/
    /* Le conteneur doit être relatif pour que les points absolus fonctionnent */
    /*position: relative;
    display: flex;*/ /* Pour contenir l'image de fond */
    /*flex-direction:row;
    justify-content:center;
}

.map-background {*/
    /* Assurez-vous que l'image de fond est en pleine taille */
    /*display: block;
    width: 95vw;
    height: 85vh;
}

.session-point {
    position: absolute;*/ /* Permet de les positionner avec X/Y */
    /*width: 40px;
    height: 40px;
    border-radius: 50%;*/ /* Pour un point rond */
    /*cursor: pointer;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    color: white;*/
    /* Décalage pour centrer le point sur les coordonnées X et Y */
    /*transform: translate(-50%, -50%);
    transition: transform 0.2s, box-shadow 0.2s;
}

.pending {
    background-color: #ff5722;*/ /* Rouge-orangé pour les séances en attente */
    /*box-shadow: 0 0 10px rgba(255, 87, 34, 0.8);
}

.completed {
    background-color: #4CAF50;*/ /* Vert pour les séances terminées */
    /*box-shadow: 0 0 15px #4CAF50;*/
    /* Ajouter une animation ou un effet "gagné" ici */
/*}

.session-point:hover {
    transform: translate(-50%, -50%) scale(1.2);*/ /* Effet de zoom au survol */
    /*z-index: 10;*/ /* S'assurer qu'il est au-dessus des autres */
/*}



.mascot-avatar {
    position: absolute;*/ /* Positionnement absolu par rapport au .map-container */
    /*width: 320px;*/ /* Ajustez la taille selon votre image de Flexy */
    /*height: auto;*/ /* Garde les proportions */
    /*z-index: 5;*/ /* Assurez-vous qu'elle est au-dessus des points */
    /* Décalage pour centrer la mascotte sur les coordonnées X et Y */
    /*transform: translate(-50%, -80%);*/ /* Ajustez le Y pour que les pieds soient sur le point */
    /*transition: top 1.5s ease-in-out, left 1.5s ease-in-out;*/ /* Animation douce lors du déplacement */
/*}*/

    /* Vous pouvez ajouter des filtres ou des ombres pour la faire ressortir */
    /*.mascot-avatar:hover {
        filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7));
    }*/

/* _content/FLEXYAPP/Modules/GamificationManager/Components/Pages/Seances.razor.rz.scp.css */

/*les séances explicative ont une résolution de 1920 par 1080, 
    et les présentations avec la mascotte ont une résolution de 1280 x 720. 
    soit toujours 1.77 de ratios
    Un ratio $16:9$ signifie que pour 16 unités de largeur, vous avez 9 unités de hauteur ($16 / 9 \approx 1.77$). 
    C'est le format standard du paysage (horizontal), couramment utilisé pour les écrans de télévision, YouTube et la plupart des vidéos web.

*/
/* -------------------------------------- */

.background-identity[b-miiah0u24v] {
    /* Laisser le fond s'adapter à la hauteur du contenu, mais assurer qu'il remplit la vue */
    min-height: 100vh;
    padding: 20px 0 50px 0; /* Ajouter du padding pour aérer au-dessus et en dessous */
}


.video-wrapper[b-miiah0u24v] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}


.video-player-container-min[b-miiah0u24v] {
    height: 15rem;
    width: 15rem;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: 20px;
    /* On garde le bord bleu ici pour délimiter le lecteur */
    border: 4px solid #00A8E8;
    background-color: #000;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.video-player-container[b-miiah0u24v] {
    height: 90vh; /* On peut même monter à 70% pour qu'elle soit plus grande */
    max-height: 800px;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: 20px;
    /* On garde le bord bleu ici pour délimiter le lecteur */
    border: 4px solid #00A8E8;
    background-color: #000;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

    .video-player-container video[b-miiah0u24v] {
        width: 100%;
        height: 100%;
        display: block;
        /* 'contain' assure que toute la vidéo est visible sans zoom */
        object-fit: contain;
        /* On enlève la bordure sur la balise vidéo elle-même 
       pour éviter les doubles traits ou les problèmes en plein écran */
        border: none;
    }

/* On enlève le contour bleu de sélection au clic */
video:focus[b-miiah0u24v] {
    outline: none !important;
}

    /* BLOQUE LA FONCTION DOWNLOAD / ENREGISTRER POUR LES NAVIGATEUR MOBILE */
video[b-miiah0u24v]::-internal-media-controls-download-button {
    display: none;
}

video[b-miiah0u24v]::-webkit-media-controls-enclosure {
    overflow: hidden;
}

video[b-miiah0u24v]::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Pousse le bouton de téléchargement hors du cadre si présent */
}
/* _content/FLEXYAPP/Modules/GamificationManager/Components/Widgets/InfoPanel.razor.rz.scp.css */

.dashboard-status-container[b-eq32fz3nft] {
    width: 100%;
    max-width: 400px;  
    padding: 1rem;
    position: absolute;
    top: 15%;
    right: 2rem;
    z-index: 50;
    display: flex;
    gap: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

.custom-progress-container[b-eq32fz3nft] {
    height: 2.5rem;
    width: 100%;
    background-color: #fff; /* Fond blanc ou bgColor-backGoogle */
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.custom-progress-bar[b-eq32fz3nft] {
    height: 100%;
    background: linear-gradient(90deg, #4285F4, #34A853); /* Dégradé Google style ou ta colorBlue */
    border-radius: 50px;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.progress-text[b-eq32fz3nft] {
    font-size: 1.1rem;
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.progress-text-outside[b-eq32fz3nft] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    color: #4285F4;
}

.op-70[b-eq32fz3nft] {
    opacity: 0.7;
}

.op-50[b-eq32fz3nft] {
    opacity: 0.5;
}

.f-size-micro[b-eq32fz3nft] {
    font-size: 0.7rem;
}
/* _content/FLEXYAPP/Modules/GamificationManager/Components/Widgets/Mascotte.razor.rz.scp.css */

/* Le parent porte TOUT le mouvement */
.fixed-ui-wrapper[b-d9rv1t87qu] {
    position: relative; /* Reste dans la colonne */
    display: flex;
    justify-content: center; /* Centre la mascotte par défaut */
    width: 100%;
    z-index: 20;
    /* On garde la transition sur le transform */
    transition: transform 3s ease-in-out !important;
    pointer-events: none;
    margin-top:50px; /* Espace avec le bouton du dessous */
}

.mascot-image[b-d9rv1t87qu] {
    width: 400px; /* Ajuste la taille selon ton design */
    height: auto;
    pointer-events: auto;
}

/* --- 4. MOBILES ( < 768px ) --- */
@media (max-width: 900px) {

    .mascot-image[b-d9rv1t87qu] {
        width: 200px; /* Ajuste la taille selon ton design */
        height: auto;
        pointer-events: auto;
        border: solid green 1px;
    }
}


    .btn-voice-control[b-d9rv1t87qu] {
        position: absolute;
        top: 0;
        right: 30%; /* Le bouton audio suit Flexy */
        pointer-events: auto;
    }

    /* La mascotte sur la map*/
    .on-map[b-d9rv1t87qu] {
        position: absolute; /*Positionnement absolu par rapport au .map-container */
        width: 300px; /*Réduit la taille pour qu'elle corresponde à la carte */
        height: auto;
        z-index: 20; /*Plus haut que les points 
 Décalage pour centrer la mascotte sur les coordonnées X et Y */
        transform: translate(-50%, -80%); /*Ajusté pour une mascotte plus petite */
        transition: top 1.5s ease-in-out, left 1.5s ease-in-out;
        /* Le temps de transition (1.5s) correspond au Task.Delay(1500) de MoveMascotToNextPoint*/
    }

    /* --- Styles de la Mascotte --- */
    /*.mascot-container {
    height:fit-content;
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    gap:50px;
    align-items: center;
    pointer-events: none;*/ /* Le container ne bloque pas les clics */
    /*}

.mascot-avatar, .btn-voice-control {
    pointer-events: auto;
}

.btn-voice-control {
    padding: 0.5rem;
    margin-top: 0;
    border-radius: 50%;
    padding: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 20;
}*/

    /* Ce container ne doit plus limiter l'image */
    /*.mascot-ui-group {
    pointer-events: none;
}*/

    /* Le wrapper gère le déplacement */
    /*.fixed-ui-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 20;*/
    /* On anime le wrapper, pas l'image directement */
    /*transition: transform 3s ease-in-out !important;
    pointer-events: none;
}

.mascot-image {
    width: 527px;
    height: 473px;
    pointer-events: auto;
    filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.3));
    z-index: 99;
}

.fixed-ui {
    position: fixed;
    bottom: 20px;
    right: 50%;*/ /* On part de 0 */
    /*width: 600px;
    height: auto;
    z-index: 999;*/
    /* On anime le transform plutôt que le right, c'est beaucoup plus performant */
    /*transition: transform 3s ease-in-out !important;
    pointer-events: auto;
    border: solid red 1px;
}

.btn-voice-control {
    position: fixed;
    bottom: 180px;
    right: 0;
    z-index: 1000;
    transition: transform 3s ease-in-out !important;
    pointer-events: auto;
}*/




    /* La mascotte en mode widget standard */
    /*.mascot-avatar.fixed-ui {*/
    /*position: relative;
    bottom: 0px;
    right: 0px;
    z-index: 20;
    filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.3));
    width: 527px; 
    height: 473px;*/
    /*position: fixed;
    bottom: 20px;*/
    /* On remplace 'right: 20px' par une transition sur 'right' ou 'left' */
    /*right: 20px;
    width: 527px;
    height: 473px;
    z-index: 999;*/
    /* Transition fluide pour le mouvement horizontal */
    /*transition: right 3s ease-in-out;*/

    /*position: fixed;
    bottom: 20px;
    
    width: 150px;
    z-index: 999;*/
    /* Force la transition sur la propriété 'right' uniquement */
    /*left: auto;*/ /* Force l'annulation de left */
    /*right: 20px;*/ /* Valeur par défaut */
    /*transition: right 3s ease-in-out !important;*/ /* Force la transition */
    /* Ajoute ceci pour éviter les saccades lors du changement de GIF */
    /*backface-visibility: hidden;
}*/


    /*@keyframes slideIn {
    from {
        transform: translateX(10%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}*/

/* _content/FLEXYAPP/Modules/OverlayManager/Components/Loader.razor.rz.scp.css */

/* --- 
    COMPOSANT LOADER 
    utilisé par LoginSuccess cshtml en static 
    et pour les chargement IsLoading des composant de l'app) 
 --- */

.title-modern[b-bgd1qpmc15] {
    text-align: center;
    color: #ec6907;
    opacity: 0.8;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 1rem auto;
}

.font-clamp-big[b-bgd1qpmc15] {
    /*font-size: var(--f-size-title);*/
    font-size: clamp(1rem, 5vw, 1.8rem);
}

/* Conteneur de base */
.loader-container[b-bgd1qpmc15] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

/* Version avec fond sombre */
.has-backdrop[b-bgd1qpmc15] {
    position: fixed; /* Reste en place même si on scroll */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); /* Plus dense pour tuer le gris */
    z-index: 9999; /* Toujours au-dessus de tout */
}

/* Si on est en FullPage sans backdrop, on centre simplement dans le viewport */
.full-page:not(.has-backdrop)[b-bgd1qpmc15] {
    min-height: 60vh;
    width: 100%;
}


.loader[b-bgd1qpmc15] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    margin-bottom: 40px;
    gap: 2rem;
}

.dot[b-bgd1qpmc15] {
    width: 60px;
    height: 60px;
    margin: 0 25px;
    border-radius: 50%;
    background-color: #ec6907; /* Ta couleur orange */
    opacity: 0.2;
    will-change: transform, opacity;
    animation: pulse-dot-b-bgd1qpmc15 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

    .dot:nth-child(2)[b-bgd1qpmc15] {
        animation-delay: 0.25s;
    }

    .dot:nth-child(3)[b-bgd1qpmc15] {
        animation-delay: 0.5s;
    }

@keyframes pulse-dot-b-bgd1qpmc15 {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.2;
        filter: blur(1px);
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
        filter: blur(0px);
    }
}
/* _content/FLEXYAPP/Modules/OverlayManager/Components/Modals/Modal.razor.rz.scp.css */
/* --- Styles Spécifiques à la Modale de Dialogue/Alerte --- */

/* Le Fond de la modale (.modal-bg) est maintenant géré par la classe Lib .modal-backdrop 
qui a le même comportement et le même Z-Index. Le code HTML/Razor doit utiliser .modal-backdrop. */

.modal-bg[b-589ripoby1] {
    /* Maintien de l'alignement spécifique si nécessaire, bien que .modal-backdrop fasse déjà center/center */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .modal-bg.hidden[b-589ripoby1] {
        display: none;
    }

/* Conteneur de la modale de Dialogue/Alerte - Classe .modal d'origine */
.modal[b-589ripoby1] {
    display: flex;
    flex-direction: column;
    max-height: 95vh;
    /* On utilise les variables de la Lib pour le fond, le shadow et les coins */
    background-color: var(--color-white);
    border-radius: var(--radius); /* Coin simple pour ce dialogue */
    box-shadow: var(--shadow-modal);
    /* Dimensions spécifiques à ce Dialogue (Compact) */
    max-width: 600px;
    width: 90%;
    /* On retire z-index: 2000 car il est sur .modal-backdrop (le fond) */
    overflow: hidden;
}

    /* Corps de la modale - Classe .modal article d'origine */
    .modal article[b-589ripoby1] {
        /* C'est la max-width du contenu qui est spécifique à cette modale d'alerte. */
        max-width: 40rem;
        flex-grow: 1;
        overflow: hidden;
        padding: 1rem;
    }


/* --- Icones de Contexte --- */

.modal-icon-wrapper[b-589ripoby1]  svg {
    /* Donne une taille explicite au SVG inséré */
    height: 2rem;
    width: 2rem;
}

/* Info (Bleu) */
.modal-icon-wrapper.info[b-589ripoby1]  svg path {
    fill: var(--color-info);
}

/* Warning (Jaune/Orange) */
.modal-icon-wrapper.warning[b-589ripoby1]  svg path {
    fill: var(--color-warning);
}

/* Error (Rouge) */
.modal-icon-wrapper.error[b-589ripoby1]  svg path {
    fill: var(--color-error);
}

/* Success (Vert) */
.modal-icon-wrapper.success[b-589ripoby1]  svg path {
    fill: var(--color-success);
}



/* Les styles du header, footer, icônes, boutons sont maintenant gérés par les classes Lib :
   - .modal-header
   - .modal-body
   - .modal-footer
   - .modal-icon-wrapper
   - .btn-close-circle
   - .btn-secondary-light
*/
/* _content/FLEXYAPP/Modules/OverlayManager/Components/Spinner.razor.rz.scp.css */
/* Class spécifique affichage en attente */

.spinner-bg[b-hzgxcg0gbc] {
    background-color: rgba(0, 0, 0, 0.63);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
}

    .spinner-bg.fullscreen[b-hzgxcg0gbc] {
        position: fixed;
        z-index: 10000;
    }

.spinner-container[b-hzgxcg0gbc] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.spinner[b-hzgxcg0gbc] {
    /* Utilisation de la couleur de fond neutre et de la couleur primaire */
    border: 16px solid var(--color-white); /* Utilise le blanc pour la couleur de base */
    border-top: 16px solid var(--color-primary); /* Utilise la couleur primaire pour l'animation */
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin-b-hzgxcg0gbc 1000ms linear infinite;
    top: 40%;
    left: 45%;
    position: absolute;
}

@keyframes spin-b-hzgxcg0gbc {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}
/* _content/FLEXYAPP/Modules/OverlayManager/Components/ToastNotification.razor.rz.scp.css */
.toast-container[b-ms23f2e3nd] {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    padding: 10px 20px;
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: fadeInDown-b-ms23f2e3nd 0.3s ease-out;
}

    .toast-container.success[b-ms23f2e3nd] {
        background-color: #28a745;
    }

    .toast-container.error[b-ms23f2e3nd] {
        background-color: #dc3545;
    }

    .toast-container.info[b-ms23f2e3nd] {
        background-color: dodgerblue;
    }

    .toast-container.warning[b-ms23f2e3nd] {
        background-color: darkorange;
    }

@keyframes fadeInDown-b-ms23f2e3nd {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* _content/FLEXYAPP/Modules/ProjectSettings/Components/Widgets/BadgeInfo.razor.rz.scp.css */
/* * Styles spécifiques au composant BadgeInfo
 * Utilise les classes de base .tooltip-container et .badge de LibFusion
 */

/* 1. Conteneur spécifique (anciennement .beta-badge-with-tooltip) */
.beta-badge[b-4xtzkqjdhn] {
    /* Marge spécifique requise par ce composant pour décaler le badge */
    margin-left: 1.4rem;
}

    /* 2. Style du badge "BETA" (couleur spécifique) */
    .beta-badge .badge[b-4xtzkqjdhn] {
        /* Surcharge la couleur de fond de la Lib pour correspondre à la couleur "Beta" (Orange/Jaune) */
        background-color: #ff852d;
    }

    /* 3. Positionnement du tooltip sur ce composant (bas et décalé) */
    .beta-badge .tooltip-content[b-4xtzkqjdhn] {
        /* Positionnement vertical : place le contenu sous le badge (100% est la hauteur du badge) */
        top: 135%;
        /* Positionnement horizontal : décale à 120% de la largeur du parent, puis centre */
        left: 120%;
        transform: translateX(-50%);
    }

        /* 4. Correction de la flèche du tooltip pour ce positionnement */
        .beta-badge .tooltip-content[b-4xtzkqjdhn]::before {
            /* La flèche se place sur le haut du contenu du tooltip, pointant vers le bas du badge */
            bottom: 100%;
            left: 5%;
            transform: translateX(-50%);
            /* Définit la couleur de la flèche (var(--color-text-dark) par défaut dans la Lib) */
            border-color: transparent transparent var(--color-text-dark) transparent;
        }
/* _content/FLEXYAPP/Modules/StorageManager/Components/StorageConfigureCors.razor.rz.scp.css */
/* On réutilise la même base que le VPS Monitor */
.vps-card[b-nvoktl8vdk] {
    background: #1e1e1e;
    color: #e0e0e0;
    border-radius: 8px;
    border: 1px solid #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    max-width: 350px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.header[b-nvoktl8vdk] {
    background: #252526;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

.title[b-nvoktl8vdk] {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-indicator[b-nvoktl8vdk] {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
}

.dot[b-nvoktl8vdk] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
}

/* On allume le point vert si l'opération est un succès récent */
.live .dot[b-nvoktl8vdk] {
    background: #4caf50;
    box-shadow: 0 0 8px #4caf50;
}

.content[b-nvoktl8vdk] {
    padding: 16px;
}

.metric-group[b-nvoktl8vdk] {
    margin-bottom: 20px;
}

.label-row[b-nvoktl8vdk] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.description[b-nvoktl8vdk] {
    font-size: 0.8rem;
    color: #bbb;
    line-height: 1.4;
    margin: 0;
}

.action-row[b-nvoktl8vdk] {
    display: flex;
    justify-content: center;
}

/* Style du bouton personnalisé */
.action-button[b-nvoktl8vdk] {
    background: #333;
    color: white;
    border: 1px solid #444;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

    .action-button:hover:not(:disabled)[b-nvoktl8vdk] {
        background: #444;
        border-color: #555;
    }

    .action-button:active:not(:disabled)[b-nvoktl8vdk] {
        background: #222;
    }

    .action-button:disabled[b-nvoktl8vdk] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Filtre pour rendre l'icône SVG blanche */
.icon-white[b-nvoktl8vdk] {
    filter: brightness(0) invert(1);
}

/* Mini spinner si nécessaire */
.spinner[b-nvoktl8vdk] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin-b-nvoktl8vdk 1s ease-in-out infinite;
}

@keyframes spin-b-nvoktl8vdk {
    to {
        transform: rotate(360deg);
    }
}
/* _content/FLEXYAPP/Modules/SubscriptionManager/Components/Widgets/Admin/Forfait.razor.rz.scp.css */
/* Fichier site.css ou global.css */

/* Conteneur pour afficher les cartes en grille */
.forfait-cards-container[b-aoxk6b0njs] {
    display: grid;
    /* Ajustez ces valeurs pour le nombre de colonnes que vous voulez */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; /* Espace entre les cartes */
    padding: 20px;
}

/* Style de base de la carte */
.forfait-card[b-aoxk6b0njs] {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

    .forfait-card:hover[b-aoxk6b0njs] {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

.card-header[b-aoxk6b0njs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.card-title[b-aoxk6b0njs] {
    margin: 0;
    font-size: 1.2rem;
    color: var(--primary-color); /* Utilisez votre couleur principale */
}

.card-body[b-aoxk6b0njs] {
    padding: 15px;
}

.price-tag[b-aoxk6b0njs] {
    font-size: 1.1rem;
    color: green;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
}

.description-resume[b-aoxk6b0njs] {
    margin-bottom: 10px;
}

.card-details[b-aoxk6b0njs] {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #f0f0f0;
    color: #6c757d; /* Texte grisé */
}

/* Barre d'actions */
.actions-bar[b-aoxk6b0njs] {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
}
/* _content/FLEXYAPP/Modules/SystemManager/Components/Widgets/Admin/AdminControlApp.razor.rz.scp.css */
/*.vps-card {
    background: #1e1e1e;
    color: #e0e0e0;
    border-radius: 8px;
    border: 1px solid #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    max-width: 350px;
    overflow: hidden;
}

.header {
    background: #252526;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

.title {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-indicator {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
}

.live .dot {
    background: #4caf50;
    box-shadow: 0 0 8px #4caf50;
}
*/
.stopped .dot[b-opnf7jevmg] {
    background: #f44336;
}

.content[b-opnf7jevmg] {
    padding: 16px;
}

/* Badge Dev/Prod */
.env-section[b-opnf7jevmg] {
    margin-bottom: 12px;
}

.fusion-badge[b-opnf7jevmg] {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
}

    .fusion-badge.dev[b-opnf7jevmg] {
        background: #007acc;
        color: white;
    }

    .fusion-badge.prod[b-opnf7jevmg] {
        background: #6c757d;
        color: white;
    }

.status-time[b-opnf7jevmg] {
    font-size: 0.8rem;
    color: #bbb;
    margin-top: 8px;
}

.separator[b-opnf7jevmg] {
    border: 0;
    border-top: 1px solid #333;
    margin: 16px 0;
}

/* Boutons d'actions harmonisés */
.status-actions[b-opnf7jevmg] {
    display: flex;
    gap: 10px;
}

.action-btn[b-opnf7jevmg] {
    flex: 1;
    border: none;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    font-size: 0.75rem;
    color: white;
    font-weight: 600;
}

    .action-btn:hover[b-opnf7jevmg] {
        transform: translateY(-2px);
        filter: brightness(1.2);
    }

    .action-btn.danger[b-opnf7jevmg] {
        background: #d32f2f;
    }

    .action-btn.warning[b-opnf7jevmg] {
        background: #ed6c02;
    }

.icon-white[b-opnf7jevmg] {
    filter: brightness(0) invert(1);
}

.action-btn span[b-opnf7jevmg] {
    text-transform: uppercase;
    font-size: 0.65rem;
}




.action-btn:disabled[b-opnf7jevmg] {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(1); /* Rend le bouton gris pour renforcer l'aspect inactif */
    transform: none !important; /* Empêche l'animation au survol */
}

.dev-note[b-opnf7jevmg] {
    font-size: 0.65rem;
    color: #ff9800;
    text-align: center;
    margin-top: 10px;
    font-style: italic;
    text-transform: uppercase;
}

/* Optionnel : changer la couleur de fond de la carte en Dev pour bien la différencier */
.fusion-badge.dev[b-opnf7jevmg] {
    background: #007acc;
    box-shadow: 0 0 10px rgba(0, 122, 204, 0.4);
}
/* _content/FLEXYAPP/Modules/SystemManager/Components/Widgets/Admin/AdminUserInfo.razor.rz.scp.css */
.profile-widget[b-ktov4b01u8] {
    max-width: 450px; /* Un peu plus large pour le texte de bienvenue */
}

.profile-container[b-ktov4b01u8] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatar-section[b-ktov4b01u8] {
    flex-shrink: 0;
}

.profile-icon[b-ktov4b01u8] {
    width: 60px;
    height: 60px;
    /* Un léger filtre pour que l'icône s'intègre mieux au thème sombre si besoin */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
}

.info-section[b-ktov4b01u8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.welcome-text[b-ktov4b01u8] {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.user-name[b-ktov4b01u8] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
}

.role-badge[b-ktov4b01u8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #4caf50; /* Vert pour rappeler le rôle validé */
    background: rgba(76, 175, 80, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    width: fit-content;
    margin-top: 4px;
}

.warning-banner[b-ktov4b01u8] {
    margin-top: 15px;
    padding: 8px;
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid #f44336;
    border-radius: 4px;
    color: #f44336;
    font-size: 0.75rem;
    text-align: center;
}

/* On réutilise les styles communs du header et du point */
.header[b-ktov4b01u8] {
    background: #252526;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

.title[b-ktov4b01u8] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #aaa;
    text-transform: uppercase;
}

.status-indicator[b-ktov4b01u8] {
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot[b-ktov4b01u8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
}

.live .dot[b-ktov4b01u8] {
    background: #4caf50;
    box-shadow: 0 0 8px #4caf50;
}

.stopped .dot[b-ktov4b01u8] {
    background: #f44336;
    box-shadow: 0 0 8px #f44336;
}
/* _content/FLEXYAPP/Modules/SystemManager/Components/Widgets/Admin/VpsMonitor.razor.rz.scp.css */


.progress-container[b-k8fiqmvvm6] {
    background: #333;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-bar[b-k8fiqmvvm6] {
    height: 100%;
    transition: width 0.5s ease-in-out, background-color 0.3s;
}

.healthy[b-k8fiqmvvm6] { background: #4caf50; }
.warning[b-k8fiqmvvm6] { background: #ff9800; }
.critical[b-k8fiqmvvm6] { background: #f44336; }

.percentage[b-k8fiqmvvm6] {
    font-size: 0.7rem;
    text-align: right;
    color: #888;
}

.separator[b-k8fiqmvvm6] {
    border: 0;
    border-top: 1px solid #333;
    margin: 16px 0;
}

.disk-list[b-k8fiqmvvm6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.disk-item[b-k8fiqmvvm6] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #bbb;
}

.placeholder[b-k8fiqmvvm6] {
    font-style: italic;
    color: #666;
    text-align: center;
    padding: 10px;
}

.dev-footer[b-k8fiqmvvm6] {
    font-size: 0.6rem;
    color: #ff9800;
    text-align: center;
    margin-top: 12px;
    opacity: 0.8;
    text-transform: uppercase;
}

.uptime-badge[b-k8fiqmvvm6] {
    font-size: 0.7rem;
    background: rgba(255,255,255,0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

.record-box[b-k8fiqmvvm6] {
    background: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
    padding: 5px 10px;
    font-size: 0.8rem;
    margin: 10px 0;
}