:root {
    /* BRAND */
    --color-orange-100: #27190a;
    --color-orange-300: #985e20;
    --color-orange-400: #c97213;
    --color-orange-500: #f07d00;
    --color-blue-100: #071820;
    --color-blue-200: #0c2d3a;
    --color-blue-300: #19556e;
    --color-red-100: #1f0708;
    --color-red-400: #bb131e;
    --color-red-500: #e5101d;
    --color-green-100: #10261a;
    --color-green-200: #23543a;
    --color-green-300: #368259;
    --color-green-400: #5aba86;
    --color-green-500: #64e5a0;
    --color-yellow-100: #111002;
    --color-yellow-200: #4a450b;
    --color-yellow-300: #8d8311;
    --color-yellow-400: #c5b618;
    --color-yellow-500: #f9e61a;
    --color-neutral-100: #0c0c0c;
    --color-neutral-200: #343434;
    --color-neutral-300: #848484;
    --color-neutral-400: #dddddd;
    --color-neutral-500: #f5f5f5;
    --color-blue-400: #2c8eb8;
    --color-blue-500: #39b8ee;
    --color-red-200: #4c0f13;
    --color-red-300: #81161c;
    --color-orange-200: #523211;
    --scale-none: 0px;
    --scale-none-rem: 0rem;
    --scale-100: 4px;
    --scale-100-rem: 0.25rem;
    --scale-200: 8px;
    --scale-200-rem: 0.5rem;
    --scale-300: 12px;
    --scale-300-rem: 0.75rem;
    --scale-400: 16px;
    --scale-400-rem: 1rem;
    --scale-500: 20px;
    --scale-500-rem: 1.25rem;
    --scale-600: 24px;
    --scale-600-rem: 1.5rem;
    --scale-700: 28px;
    --scale-700-rem: 1.75rem;
    --scale-800: 32px;
    --scale-800-rem: 2rem;
    --scale-900: 36px;
    --scale-900-rem: 2.25rem;
    --scale-1000: 40px;
    --scale-1000-rem: 2.5rem;
    --scale-1100: 44px;
    --scale-1100-rem: 2.75rem;
    --scale-1200: 48px;
    --scale-1200-rem: 3rem;
    --scale-1300: 52px;
    --scale-1300-rem: 3.25rem;
    --scale-1400: 56px;
    --scale-1400-rem: 3.5rem;
    --scale-1500: 60px;
    --scale-1500-rem: 3.75rem;
    --scale-1600: 66px;
    --scale-1600-rem: 4.125rem;
    --scale-1700: 70px;
    --scale-1700-rem: 4.375rem;
    --scale-1800: 74px;
    --scale-1800-rem: 4.625rem;
    --scale-1900: 82px;
    --scale-1900-rem: 5.125rem;
    --scale-2000: 90px;
    --scale-2000-rem: 5.625rem;
    --scale-2100: 100;
    --scale-2200: 106px;
    --scale-2200-rem: 6.625rem;
    --scale-2300: 114px;
    --scale-2300-rem: 7.125rem;
    --scale-2400: 124px;
    --scale-2400-rem: 7.75rem;
    --scale-2500: 132px;
    --scale-2500-rem: 8.25rem;
    --scale-2600: 140px;
    --scale-2600-rem: 8.75rem;
    --scale-2700: 148px;
    --scale-2700-rem: 9.25rem;
    --type-font-family-primary: "Inter";
    --type-font-family-secondary: "Raleway";
    --type-font-weight-bold: 700;
    --type-font-weight-medium: 500;
    --type-font-weight-regular: 400;
    --type-font-weight-light: 300;
    --type-font-weight-bold-italic: "Bold Italic";
    --type-font-weight-medium-italic: "Medium Italic";
    --type-font-weight-light-italic: "Light Italic";
    --scale-full: 9999px;
    --scale-full-rem: 624.9375rem;
    --scale-50: 2px;
    --scale-50-rem: 0.125rem;
  
    /* ALIAS */
    --neutral-100: var(--color-neutral-100);
    --neutral-200: var(--color-neutral-200);
    --neutral-300: var(--color-neutral-300);
    --neutral-400: var(--color-neutral-400);
    --neutral-500: var(--color-neutral-500);
    --primary-100: var(--color-orange-100);
    --primary-200: var(--color-orange-200);
    --primary-300: var(--color-orange-300);
    --primary-400: var(--color-orange-400);
    --primary-500: var(--color-orange-500);
    --succes-100: var(--color-green-100);
    --succes-200: var(--color-green-200);
    --succes-300: var(--color-green-300);
    --succes-400: var(--color-green-400);
    --succes-500: var(--color-green-500);
    --warning-100: var(--color-yellow-100);
    --warning-200: var(--color-yellow-200);
    --warning-300: var(--color-yellow-300);
    --warning-400: var(--color-yellow-400);
    --warning-500: var(--color-yellow-500);
    --error-100: var(--color-red-100);
    --error-200: var(--color-red-200);
    --error-300: var(--color-red-300);
    --error-400: var(--color-red-400);
    --error-500: var(--color-red-500);
    --notification-100: var(--color-blue-100);
    --notification-200: var(--color-blue-200);
    --notification-300: var(--color-blue-300);
    --notification-400: var(--color-blue-400);
    --notification-500: var(--color-blue-500);
    --border-width-none: var(--scale-none);
    --border-width-100: var(--scale-100);
    --border-width-200: var(--scale-200);
    --border-width-300: var(--scale-300);
    --border-width-400: var(--scale-400);
    --border-radius-none: var(--scale-none);
    --border-radius-100: var(--scale-200);
    --border-radius-200: var(--scale-300);
    --border-radius-300: var(--scale-600);
    --border-radius-full: var(--scale-full);
    --border-width-50: var(--scale-50);
  
    /* MAPPING */
    --text-primary: var(--neutral-100);
    --text-primary-hover: var(--neutral-300);
    --text-secondary: var(--neutral-500);
    --text-secondary-hover: var(--neutral-300);
    --text-link: var(--primary-300);
    --text-succes: var(--succes-100);
    --text-warning: var(--warning-100);
    --text-error: var(--error-100);
    --surface-primary: var(--neutral-100);
    --surface-primary-hover: var(--neutral-300);
    --surface-secondary: var(--neutral-500);
    --surface-secondary-hover: var(--neutral-100);
    --surface-succes: var(--succes-500);
    --surface-warning: var(--warning-500);
    --surface-error: var(--error-500);
    --text-disable: var(--neutral-400);
    --border-primary: var(--neutral-500);
    --border-primary-hover: var(--neutral-300);
    --border-secondary: var(--neutral-300);
    --border-secondary-hover: var(--neutral-100);
    --border-succes: var(--succes-100);
    --border-warning: var(--warning-100);
    --border-error: var(--error-100);
    --surface-tertiary: var(--primary-500);
    --surface-tertiary-hover: var(--primary-400);
    --surface-disable: var(--neutral-500);
    --surface-danger: var(--error-500);
    --text-danger: var(--error-100);
    --border-disable: var(--neutral-400);
    --icons-primary: var(--neutral-100);
    --icons-primary-hover: var(--neutral-300);
    --icons-secondary: var(--neutral-500);
    --icons-secondary-hover: var(--neutral-300);
    --icons-disable: var(--neutral-400);
    --icons-succes: var(--succes-100);
    --icons-warning: var(--warning-100);
    --icons-error: var(--error-100);
    --icons-tertiary: var(--primary-500);
    --icons-tertiary-hover: var(--primary-300);
    --icons-danger: var(--error-100);
    --surface-notification: var(--notification-500);
    --border-focus: var(--neutral-300);
    --surface-danger-hover: var(--error-300);
    --text-placeholder: var(--neutral-300);
    --icons-placeholder: var(--neutral-300);
    --surface-tag-primary: var(--color-neutral-200);
    --text-tertiary: var(--primary-500);
    --text-tertiary-hover: var(--primary-400);
    --border-tertiary: var(--text-tertiary);
    --border-secondary-hover-2: var(--primary-400);
  
    /* RESPONSIVE */
    --font-size-heading-h2-desktop: 42px;
    --font-size-heading-h2-rem-desktop: 2.625rem;
    --font-size-heading-h2-tablet: 37px;
    --font-size-heading-h2-rem-tablet: 2.3125rem;
    --font-size-heading-h2-mobile: 30px;
    --font-size-heading-h2-rem-mobile: 1.875rem;
    --font-size-heading-h3-desktop: 36px;
    --font-size-heading-h3-rem-desktop: 2.25rem;
    --font-size-heading-h3-tablet: 33px;
    --font-size-heading-h3-rem-tablet: 2.0625rem;
    --font-size-heading-h3-mobile: 28px;
    --font-size-heading-h3-rem-mobile: 1.75rem;
    --font-size-heading-h4-desktop: 30px;
    --font-size-heading-h4-rem-desktop: 1.875rem;
    --font-size-heading-h4-tablet: 29px;
    --font-size-heading-h4-rem-tablet: 1.8125rem;
    --font-size-heading-h4-mobile: 25px;
    --font-size-heading-h4-rem-mobile: 1.5625rem;
    --font-size-heading-h5-desktop: 26px;
    --font-size-heading-h5-rem-desktop: 1.625rem;
    --font-size-heading-h5-tablet: 25px;
    --font-size-heading-h5-rem-tablet: 1.5625rem;
    --font-size-heading-h5-mobile: 22px;
    --font-size-heading-h5-rem-mobile: 1.375rem;
    --font-size-heading-h6-desktop: 22px;
    --font-size-heading-h6-rem-desktop: 1.375rem;
    --font-size-heading-h6-tablet: 22px;
    --font-size-heading-h6-rem-tablet: 1.375rem;
    --font-size-heading-h6-mobile: 20px;
    --font-size-heading-h6-rem-mobile: 1.25rem;
    --font-size-heading-h1-desktop: 49px;
    --font-size-heading-h1-rem-desktop: 3.0625rem;
    --font-size-heading-h1-tablet: 42px;
    --font-size-heading-h1-rem-tablet: 2.625rem;
    --font-size-heading-h1-mobile: 33px;
    --font-size-heading-h1-rem-mobile: 2.0625rem;
    --font-size-body-large-desktop: 19px;
    --font-size-body-large-rem-desktop: 1.1875rem;
    --font-size-body-large-tablet: 19px;
    --font-size-body-large-rem-tablet: 1.1875rem;
    --font-size-body-large-mobile: 18px;
    --font-size-body-large-rem-mobile: 1.125rem;
    --font-size-body-medium-desktop: 16px;
    --font-size-body-medium-rem-desktop: 1rem;
    --font-size-body-medium-tablet: 16px;
    --font-size-body-medium-rem-tablet: 1rem;
    --font-size-body-medium-mobile: 16px;
    --font-size-body-medium-rem-mobile: 1rem;
    --font-size-body-small-desktop: 14px;
    --font-size-body-small-rem-desktop: 0.875rem;
    --font-size-body-small-tablet: 14px;
    --font-size-body-small-rem-tablet: 0.875rem;
    --font-size-body-small-mobile: 11px;
    --font-size-body-small-rem-mobile: 0.6875rem;
    --line-height-heading-h1-desktop: 58.8px;
    --line-height-heading-h1-rem-desktop: 3.675rem;
    --line-height-heading-h1-tablet: 50.4px;
    --line-height-heading-h1-rem-tablet: 3.15rem;
    --line-height-heading-h1-mobile: 39.6px;
    --line-height-heading-h1-rem-mobile: 2.475rem;
    --line-height-heading-h2-desktop: 50.4px;
    --line-height-heading-h2-rem-desktop: 3.15rem;
    --line-height-heading-h2-tablet: 44.4px;
    --line-height-heading-h2-rem-tablet: 2.775rem;
    --line-height-heading-h2-mobile: 36px;
    --line-height-heading-h2-rem-mobile: 2.25rem;
    --line-height-heading-h3-desktop: 43.2px;
    --line-height-heading-h3-rem-desktop: 2.7rem;
    --line-height-heading-h3-tablet: 39.6px;
    --line-height-heading-h3-rem-tablet: 2.475rem;
    --line-height-heading-h3-mobile: 33.6px;
    --line-height-heading-h3-rem-mobile: 2.1rem;
    --line-height-heading-h4-desktop: 36px;
    --line-height-heading-h4-rem-desktop: 2.25rem;
    --line-height-heading-h4-tablet: 34.8px;
    --line-height-heading-h4-rem-tablet: 2.175rem;
    --line-height-heading-h4-mobile: 30px;
    --line-height-heading-h4-rem-mobile: 1.875rem;
    --line-height-heading-h5-desktop: 31.2px;
    --line-height-heading-h5-rem-desktop: 1.95rem;
    --line-height-heading-h5-tablet: 30px;
    --line-height-heading-h5-rem-tablet: 1.875rem;
    --line-height-heading-h5-mobile: 26.4px;
    --line-height-heading-h5-rem-mobile: 1.65rem;
    --line-height-heading-h6-desktop: 26.4px;
    --line-height-heading-h6-rem-desktop: 1.65rem;
    --line-height-heading-h6-tablet: 26.4px;
    --line-height-heading-h6-rem-tablet: 1.65rem;
    --line-height-heading-h6-mobile: 24px;
    --line-height-heading-h6-rem-mobile: 1.5rem;
    --line-height-body-large-desktop: 22.8px;
    --line-height-body-large-rem-desktop: 1.425rem;
    --line-height-body-large-tablet: 22.8px;
    --line-height-body-large-rem-tablet: 1.425rem;
    --line-height-body-large-mobile: 21.6px;
    --line-height-body-large-rem-mobile: 1.35rem;
    --line-height-body-medium-desktop: 19.2px;
    --line-height-body-medium-rem-desktop: 1.2rem;
    --line-height-body-medium-tablet: 19.2px;
    --line-height-body-medium-rem-tablet: 1.2rem;
    --line-height-body-medium-mobile: 19.2px;
    --line-height-body-medium-rem-mobile: 1.2rem;
    --line-height-body-small-desktop: 16.8px;
    --line-height-body-small-rem-desktop: 1.05rem;
    --line-height-body-small-tablet: 16.8px;
    --line-height-body-small-rem-tablet: 1.05rem;
    --line-height-body-small-mobile: 13.2px;
    --line-height-body-small-rem-mobile: 0.825rem;
    --spacing-none-desktop: var(--scale-none);
    --spacing-none-tablet: var(--scale-none);
    --spacing-none-mobile: var(--scale-none);
    --spacing-100-desktop: var(--scale-400);
    --spacing-100-tablet: var(--scale-400);
    --spacing-100-mobile: var(--scale-400);
    --spacing-200-desktop: var(--scale-600);
    --spacing-200-tablet: var(--scale-600);
    --spacing-200-mobile: var(--scale-600);
    --spacing-300-desktop: var(--scale-800);
    --spacing-300-tablet: var(--scale-800);
    --spacing-300-mobile: var(--scale-800);
    --spacing-400-desktop: var(--scale-1000);
    --spacing-400-tablet: var(--scale-1000);
    --spacing-400-mobile: var(--scale-1000);
    --spacing-500-desktop: var(--scale-1200);
    --spacing-500-tablet: var(--scale-1200);
    --spacing-500-mobile: var(--scale-1200);
  
    /* VARIABLE CONDITION */
    --toggle: false;
    --carte-utilisateur: true;
    --carte-entreprise: true;
    --toggle-base: "Base";
    --toggle-focus: "Focus";
  }

  

/* Debut du chargement (commun, voir partielle/_chargement) */

.OverlayChargement {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(244, 244, 244, 0.92);
    z-index: 1000000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--Space-500, 20px);
}

.OverlayChargement.OverlayChargementVisible {
    display: flex;
}

.OverlayChargement img {
    width: 270px;
    height: 270px;
    max-width: 70vw;
    max-height: 70vw;
}

.OverlayChargement p {
    color: var(--text-primary, #2F2F2F);
    text-align: center;
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 14px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%;
    margin: 0;
}

/* Fin du chargement (commun) */

/* Debut de la page d'enregistrement (signup) */

main:has(.site-signup) {
    /* Vos styles ici */
    background-color: #FFF; /* Exemple : changer la couleur de fond */
    padding: 20px; /* Exemple : ajouter du padding */
    height: 100%;
}

#signup{
    height: 100%;
    display: flex;
    justify-content: center;
}

#signup-share{
    height: 100%;
    /* display: flex; */
    justify-content: center;
}

.main-share{
    height: 100% !important;
}

.site-signup{
    display: flex;
    /* width: 1920px; */
    /* height: 1080px; */
    /* padding: 207px 630px 0px 630px; */
    justify-content: center;
    align-items: center;
    background-color: #FFF;
}

.numberPhone-input{
    display: flex;
    width: var(--width-700, 520px);
    height: var(--height-900, 700px);
    min-width: var(--width-500, 270px);
    max-width: var(--width-700, 520px);
    min-height: var(--height-900, 500px);
    max-height: var(--height-900, 700px);
    padding: var(--space-500, 60px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-400, 40px);
    flex-shrink: 0;

    border-radius: var(--border-large, 12px);
    background: var(--background-first-connexion-default, #F4F4F4) !important;
}


.logo-image{
    display: flex;
    width: 266px;
    height: 79px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.textSinupPage{
    color: var(--text-Primary-default, #2F2F2F);
    text-align: center;
    
    /* H2 */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--heading-h2, 24px);
    font-style: normal;
    font-weight: 800;
    line-height: 140%; /* 33.6px */    
}

.placementTextSignUp{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-200, 20px);
}

.placementSingUpInput{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    align-self: stretch;
}

.gestionInputPhone{
    display: flex;
    width: 281px !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}


.phoneInput{
    display: flex;
    width: 318px;
    height: var(--height-300, 64px);
    min-width: var(--width-500, 270px);
    max-width: var(--width-700, 520px);
    padding: var(--space-200, 20px);
    align-items: center;
    gap: var(--space-100, 10px);

    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
    background: var(--background-default-secondary, #F4F4F4);
}

.phoneInputActivate{
    display: flex;
    width: 318px;
    height: var(--height-300, 64px);
    min-width: var(--width-500, 270px);
    max-width: var(--width-700, 520px);
    padding: var(--space-200, 20px);
    align-items: center;
    gap: var(--space-100, 10px);

    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
    background: var(--background-default-secondary, #F4F4F4);
}


.singupButton{
    /* display: flex;
    width: 281px;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom02, 14px) var(--Style-ions-New-group-Margin-input-left-right2, 14px);
    justify-content: center;
    align-items: center;
    gap: var(--Style-ions-New-group-Radius, 10px);

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    background: var(--Style-ions-New-group-Primary-yellow-01, #F07D00); */

    display: flex;
    width: 320px;
    min-width: var(--width-500, 270px);
    max-width: var(--width-600, 320px);
    padding: var(--space-200, 20px) var(--space-500, 60px);
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-disable-primary, #BFBFBF);
    background: var(--background-secondary-primary, #DFDFDF);
}

.singupButtonEnable{
    /* display: flex;
    width: 281px;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom02, 14px) var(--Style-ions-New-group-Margin-input-left-right2, 14px);
    justify-content: center;
    align-items: center;
    gap: var(--Style-ions-New-group-Radius, 10px);

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    background: var(--Style-ions-New-group-Primary-yellow-01, #F07D00); */

    display: flex;
    width: 320px;
    min-width: var(--width-500, 270px);
    max-width: var(--width-600, 320px);
    padding: var(--space-200, 20px) var(--space-500, 60px);
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-disable-primary, #1B1B1B);
    background: var(--Style-ions-New-group-Primary-yellow-01, #F07D00) !important;
}


.succesfullRegisterText{
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-H1, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 31.2px */
}

@media (max-width: 600px) {

    .numberPhone-input{
        display: flex;
        width: 320px;
        height: var(--height-900, 700);
        min-width: var(--width-500, 270px);
        max-width: var(--width-700, 520px);
        min-height: var(--height-700, 260px);
        max-height: var(--height-900, 700);
        padding: var(--space-400, 40px) var(--space-200, 20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-300, 30px);
        flex-shrink: 0;

        border-radius: var(--border-large, 12px);
        background: var(--background-first-connexion-default, #F4F4F4);
    }
    
    .textSinupPage{
        color: var(--text-Primary-default, #2F2F2F);
        text-align: center;
        
        /* H2 */
        font-family: var(--font-family-primary, Inter);
        font-size: var(--heading-h2, 20px);
        font-style: normal;
        font-weight: 800;
        line-height: 140%; /* 28px */
    }

    #phoneInputId, #nomInputId, #prenomInputId{
        width: 280px;
    }

    .singupButton{
        display: flex;
        min-width: var(--width-500, 270px);
        max-width: var(--width-600, 320px);
        width: unset;
        padding: var(--space-200, 20px) var(--space-500, 60px);
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;

        border-radius: var(--border-xl, 16px);
        border: 4px solid var(--border-disable-primary, #BFBFBF);
        background: var(--background-secondary-primary, #DFDFDF);
    }

    /* Le formulaire tenait sur 832px de haut : sur un téléphone le bas passait
       sous la barre du navigateur. On compacte, et on passe les largeurs fixes
       en largeurs fluides pour ne plus déborder sur les petits écrans. */

    main:has(.site-signup) {
        padding: 12px;
    }

    .site-signup .numberPhone-input {
        width: 100%;
        max-width: 360px;
        min-width: 0;
        min-height: 0;
        padding: 24px 20px;
        gap: 16px;
    }

    .site-signup .logo-image {
        width: 180px;
        height: auto;
    }

    .site-signup .textSinupPage {
        font-size: 18px;
    }

    .site-signup .placementSingUpInput,
    .site-signup .placementTextSignUp {
        width: 100%;
        gap: 16px;
    }

    /* align-items: center laissait les champs à leur largeur de contenu, donc
       plus étroits que le bouton : on les étire sur toute la largeur. */
    .site-signup .gestionInputPhone {
        width: 100% !important;
        align-items: stretch;
    }

    /* Conteneur ajouté par le widget intl-tel-input autour du champ téléphone */
    .site-signup .gestionInputPhone .iti {
        width: 100%;
    }

    .site-signup #phoneInputId,
    .site-signup #nomInputId,
    .site-signup #prenomInputId {
        width: 100%;
        min-width: 0;
        height: 52px;
        border-width: 3px;
    }

    /* Pas de padding raccourci sur le téléphone : le padding-left vient du
       widget pour laisser la place au drapeau. */
    .site-signup #nomInputId,
    .site-signup #prenomInputId {
        padding: 14px;
    }

    .site-signup #phoneInputId {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .site-signup .singupButton,
    .site-signup .singupButtonEnable {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 16px 20px;
    }

    .site-signup .register-inline {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .site-signup .register-question {
        font-size: 12px;
    }

}

/* Fin de la page d'enregistrement (signup) */

/* Debut de la page d'header (backofficetest) */

.HeaderPopup {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--Space-300, 0.75rem);
    width: 10.125rem;
    padding: var(--Space-400, 1rem) var(--Space-300, 0.75rem);
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-200, #343434);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.44);
    position: absolute;
    right: 0;
    margin-top: 4px;
    top: 100%;
    z-index: 9999999;
}

.HeaderProfilSection {
    position: relative;
    display: inline-block;
}

.HeaderPopupButton {

    display: flex;
    align-items: center;
    gap: var(--Space-100, 0.5rem) !important;
    align-self: stretch;
    background: none;
    border: none;

    color: var(--text-secondary, #F5F5F5);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
    text-decoration: none;
}

/* .HeaderPopupButton:link{
  color:blue;
} */
.HeaderPopupButton:visited{
  color: var(--text-secondary, #F5F5F5);
}
.HeaderPopupButton:hover{
  color: var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
}
.HeaderPopupButton:focus{
   color: var(--text-secondary, #F5F5F5);
}
.HeaderPopupButton:active{
  color: var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
}


.HeaderPopupProfilSvg {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-large, 0.75rem);
    border: 2px solid var(--neutral-500, #F5F5F5);
}

.HeaderOverlay {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
}
/* Fin de la page d'header (backofficetest) */

/* Debut de la page d'enregistrement réussis (successSignup) */

main:has(.site-success) {
    /* Vos styles ici */
    background-color: #FFF; /* Exemple : changer la couleur de fond */
    padding: 20px; /* Exemple : ajouter du padding */
    height: 100%;
}

.site-signupSucces{
    display: flex;
    /* width: 1920px;
    height: 1080px; */
    /* padding: 425.5px 0px 0px 0px; */
    justify-content: center;
    align-items: center;
    height: 100%;
}

.site-success{
    display: flex;
    /* width: var(--width-700, 520px); */
    height: 220px;
    min-width: var(--width-600, 320px);
    max-width: var(--width-700, 520px);
    min-height: var(--height-600, 220px);
    max-height: var(--height-700, 260px);
    padding: var(--space-400, 40px);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;

    border-radius: var(--border-xl, 16px);
    background: var(--background-Notification, #64E5A0);
}

.textSuccessRegister{
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-H1, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 31.2px */
}

@media (max-width: 600px) {
    .site-success{
        display: flex;
        width: 320px;
        height: 220px;
        min-width: var(--width-600, 320px);
        max-width: var(--width-700, 520px);
        min-height: var(--height-600, 220px);
        max-height: var(--height-700, 260px);
        padding: var(--space-400, 40px);
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

}


/* Fin de la page d'enregistrement réussis (successSignup) */

/* Debut de la page login classique (login-tel-mdp) */

main:has(.site-login) {
    /* Vos styles ici */
    background-color: #FFF; /* Exemple : changer la couleur de fond */
    padding: 20px; /* Exemple : ajouter du padding */
    height: 100%;
}

.site-login{
    display: flex;
    /* width: 1920px; */
    /* padding: 207px 630px 0px 630px; */
    justify-content: center;
    align-items: center;
    height: 100%;
    justify-content: center;
}


.loginBlock{
    display: flex;
    width: var(--width-700, 520px);
    min-width: var(--width-500, 270px);
    max-width: var(--width-700, 520px);
    /* min-height: var(--height-900, 500px); */
    /* max-height: var(--height-1000, 660px); */
    padding: var(--space-500, 60px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-400, 40px);
    flex-shrink: 0;

    border-radius: var(--border-large, 12px);
    background: var(--background-first-connexion-default, #F4F4F4);
}

.logoImageLogin{
    width: 266px;
    height: 79px;
    flex-shrink: 0;
}

.mainTextLogin{
    color: var(--text-Primary-default, #2F2F2F);
    text-align: center;
    
    /* H2 */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--heading-h2, 24px);
    font-style: normal;
    font-weight: 800;
    line-height: 140%; /* 33.6px */
}

.loginInputForm{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.loginPhoneInput{
    display: flex;
    width: 281px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.phoneInputphoneElement{
    display: flex;
    width: 318px;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom01, 12px) var(--Style-ions-New-group-Margin-input-left-right1, 12px);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
    background: var(--background-default-secondary, #F4F4F4);
    padding-right: 36px !important;
}

.phoneInputphoneElementNotEmpty{
    display: flex;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom01, 12px) var(--Style-ions-New-group-Margin-input-left-right1, 12px);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    border-radius: var(--Style-ions-New-group-Radius, 16px);
    border: 4px solid var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
    background: var(--Style-ions-New-group-Grey-02, #DFDFDF);
    padding-right: 36px !important;
}

.labelNotEmpty{
    color: var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
}

.loginpasswordInput{
    position: relative; /* Permet de positionner l'icône à l'intérieur */
    display: flex;
    width: 318px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.labelClassLogin{
    align-self: stretch;
}

.passwordInputpasswordElement{
    width: 100%;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom01, 12px) var(--Style-ions-New-group-Margin-input-left-right1, 12px);
    padding-left: 36px !important; /* Assure que l'input ne recouvre pas l'icône */
    
    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
    background: var(--background-default-secondary, #F4F4F4);
    position: relative;

}

.passwordInputpasswordElementNotEmpty{
    display: flex;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom01, 12px) var(--Style-ions-New-group-Margin-input-left-right1, 12px);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding-left: 36px !important; /* Assure que l'input ne recouvre pas l'icône */

    border-radius: var(--Style-ions-New-group-Radius, 16px);
    border: 4px solid var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
    background: var(--Style-ions-New-group-Grey-02, #DFDFDF);
    padding-right: 36px !important;

}

.loginpasswordInputText{
    /* regular Bold */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--body-regular, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 22.4px */
}

.loginpasswordInputIcon{
    position: absolute;
    left: 10px; /* Place l'icône à droite à l'intérieur de l'input */
    top: 35%;
    transform: translateY(-50%); /* Centre verticalement l'icône */
    cursor: pointer; /* Affiche une icône de curseur pour l'interaction */
}

.passwordForgotLogin{
    align-self: stretch;
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    text-align: right;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p3, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    align-content: center;
}

.register-inline {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.register-question {
  margin: 0;
}

.loginpasswordInputCheckBox{
    display: flex;
    width: 360px;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-100, 10px);
    align-self: stretch;
}

.loginButton{
    display: flex;
    width: 320px;
    min-width: var(--width-500, 270px);
    max-width: var(--width-600, 320px);
    padding: var(--space-200, 20px) var(--space-500, 60px);
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-disable-primary, #BFBFBF);
    background: var(--background-secondary-primary, #DFDFDF);
}

.loginButtonEnable{
    display: flex;
    width: 320px;
    min-width: var(--width-500, 270px);
    max-width: var(--width-600, 320px);
    padding: var(--space-200, 20px) var(--space-500, 60px);
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-disable-primary, #F07D00);
    background: var(--Style-ions-New-group-Primary-yellow-01, #F07D00);

    color: #FFF;
}

@media (max-width: 600px) {
    .loginBlock{
        display: flex;
        width: 325px;
        /* height: var(--height-900, 550px); */
        min-width: var(--width-500, 270px);
        max-width: var(--width-700, 520px);
        /* min-height: var(--height-900, 550px); */
        /* max-height: var(--height-900, 500px); */
        padding: var(--space-400, 40px) var(--space-200, 20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-300, 30px);
        flex-shrink: 0;

        border-radius: var(--border-large, 12px);
        background: var(--background-first-connexion-default, #F4F4F4);
    }

    .phoneInputphoneElement{
        display: flex;
        width: 283px;
        height: var(--height-300, 64px);
        min-width: var(--width-500, 270px);
        max-width: var(--width-700, 520px);
        padding: var(--space-200, 20px);
        align-items: center;
        gap: var(--space-100, 10px);
    
        border-radius: var(--border-xl, 16px);
        border: 4px solid var(--border-primary-primary, #2F2F2F);
        background: var(--background-default-secondary, #F4F4F4);
        padding-right: 36px !important;
    }

    .phoneInputphoneElementNotEmpty{
        display: flex;
        padding: var(--Style-ions-New-group-Margin-input-top-bottom01, 12px) var(--Style-ions-New-group-Margin-input-left-right1, 12px);
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    
        border-radius: var(--Style-ions-New-group-Radius, 16px);
        border: 4px solid var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
        background: var(--Style-ions-New-group-Grey-02, #DFDFDF);
        padding-right: 36px !important;
    }

    .passwordInputpasswordElement{
        display: flex;
        width: 283px;
        height: var(--height-300, 64px);
        min-width: var(--width-500, 270px);
        max-width: var(--width-700, 520px);
        padding: var(--space-200, 20px);
        align-items: center;
        gap: var(--space-100, 10px);
        
        border-radius: var(--border-xl, 16px);
        border: 4px solid var(--border-primary-primary, #2F2F2F);
        background: var(--background-default-secondary, #F4F4F4);
        position: relative;
    
    }
    
    .passwordInputpasswordElementNotEmpty{
        display: flex;
        width: 283px;
        height: var(--height-300, 64px);
        min-width: var(--width-500, 270px);
        max-width: var(--width-700, 520px);
        padding: var(--space-200, 20px);
        align-items: center !important;
        gap: var(--space-100, 10px);
        padding-left: 36px !important; /* Assure que l'input ne recouvre pas l'icône */
    
        border-radius: var(--Style-ions-New-group-Radius, 16px);
        border: 4px solid var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
        background: var(--Style-ions-New-group-Grey-02, #DFDFDF);
        padding-left: 36px !important;

        align-self: unset;
    
    }
    
    .loginpasswordInputIcon{
        position: absolute;
        left: 27px; /* Place l'icône à droite à l'intérieur de l'input */
        top: 37%;
        transform: translateY(-50%); /* Centre verticalement l'icône */
        cursor: pointer; /* Affiche une icône de curseur pour l'interaction */
    }

    .passwordForgotLogin{
        align-self: stretch;
        color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
        text-align: right;
        font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
        font-size: var(--Style-ions-New-group-Font-size-p3, 12px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding-right: 20px;
    }

    .loginpasswordInputCheckBox{
        display: flex;
        width: 280px;
        justify-content: flex-end;
        align-items: center;
        gap: var(--space-100, 10px);
        align-self: stretch;
    }

    .loginButton{
        display: flex;
        width: 283px;
        min-width: var(--width-500, 270px);
        max-width: var(--width-600, 320px);
        padding: var(--space-200, 20px) var(--space-500, 60px);
        justify-content: center;
        align-items: center;
        gap: 10px;
    
        border-radius: var(--border-xl, 16px);
        border: 4px solid var(--border-disable-primary, #BFBFBF);
        background: var(--background-secondary-primary, #DFDFDF);
    }
    
    .loginButtonEnable{
        display: flex;
        width: 283px;
        min-width: var(--width-500, 270px);
        max-width: var(--width-600, 320px);
        padding: var(--space-200, 20px) var(--space-500, 60px);
        justify-content: center;
        align-items: center;
        gap: 10px;
    
        border-radius: var(--border-xl, 16px);
        border: 4px solid var(--border-disable-primary, #F07D00);
        background: var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
    
        color: #FFF;
    }

}

/* Fin de la page login classique (login-tel-mdp) */

/* Debut de la page d'accueil (backoffice/index) */

.siteIndex{
    display: flex;
    /* width: 1920px;
    flex-direction: column; */
    justify-content: center;
    height: 100%;
    overflow-y: scroll;
}

.mainIndexBlock{
    display: flex;
    /* height: 630px; */
    height: 92%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-400, 40px);

    border-radius: var(--border-large, 12px);
}

.CenteredIndexBlock
{
    display: flex;
    width: 41.25rem;
    max-width: 41.25rem;
    padding: var(--Space-1500, 3.75rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 2.375rem;
    border-radius: var(--Space-200, 0.5rem);
    background: var(--neutral-400, #DDD);
}

.IndexSearchInput {
    display: flex;
    height: 4rem;
    padding: 0rem 0.875rem 0rem 0.875rem;
    align-items: center;
    flex: 1 0 0;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    border: none;
    width: 100%;
}

.IndexinputWithIcon .form-group {
    margin-bottom: 0 !important;
    width: 100%;
}

.IndexinputWithIcon {
    display: flex;
    width: 100%;
    max-width: 28.3rem;
    justify-content: flex-end;
    align-items: center;
    gap: var(--Space-200, 0.5rem);
}

.indexTextPresentation{
    align-self: stretch;
    color: var(--text-Primary-default, #2F2F2F);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Heading/h5 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h5, 26px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 140%; /* 36.4px */
}

.SearchZoneIndex{
    display: flex;
    /* max-width: 75rem; */
    width: 100%;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.SearchZoneIndex h3 {
    flex: 1 0 0;
    color: var(--neutral-100, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    
    /* Heading/h4 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h4, 1.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 2.25rem */
    width: 100%;
}

.SearchResultInputContainer {
    width: 100%;
}
/* .inputZoneIndex{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
} */

/* .restrainInputZoneIndex{
    display: flex;
    width: 281px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
} */

.exempleInputIndex{
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p3, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.indexInput{
    display: flex;
    height: 4rem;
    padding: 0rem 12.9375rem 0rem 0.875rem;
    align-items: center;
    flex: 1 0 0;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
}

.indexInputActivate{
    border: 4px solid var(--Style-ions-New-group-Primary-yellow-01, #F07D00) !important;
}

.indexButtonzone{
    display: flex;
    width: 281px;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom02, 14px) var(--Style-ions-New-group-Margin-input-left-right2, 14px);
    justify-content: center;
    align-items: center;
    gap: var(--Style-ions-New-group-Radius, 10px);
    border-radius: var(--Style-ions-New-group-Radius, 10px);
    background: var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
    border: none !important;
    box-shadow: none !important;
    
}

.textButton{
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none !important;
    box-shadow: none !important;
}

.indexPicture{
    flex: 1 0 0;
    align-self: stretch;
}

.inputIcon {
    position: absolute;
    left: 11px; /* Ajustez selon la marge que vous souhaitez entre l'input et l'icône */
    cursor: pointer; /* Pour rendre l'icône cliquable */
    top: 20px;
    pointer-events: none;
}

.inputWithIcon {
    display: flex;
    width: 90%;
    max-width: 90%;
    justify-content: flex-end;
    align-items: center;
    gap: var(--Space-200, 0.5rem);
}

.envoyerButtonIndexDiv{
    display: flex;
    width: 56px;
    height: 56px;
    padding: var(--scale-500, 20px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--border-radius-100, 8px);
    background: var(--surface-primary, #0C0C0C);
    border: 1px solid var(--Style-ions-New-group-Primary-yellow-01, #0C0C0C) !important;
    position: relative;
    transform: translateX(7rem);
    margin-left: -3.5rem;
}

.envoyerButtonAcceuilDiv{
    display: flex;
    width: 56px;
    height: 56px;
    padding: var(--scale-500, 20px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--border-radius-100, 8px);
    background: var(--surface-primary, #0C0C0C);
    border: 1px solid var(--Style-ions-New-group-Primary-yellow-01, #0C0C0C) !important;
}


.envoyerButtonIndexDivEnable {
    border: 4px solid var(--Style-ions-New-group-Primary-yellow-01, #F07D00) !important;
}

.envoyerButtonIndexClass{
    width: 100%;
    height: 100%;

    padding: var(--Style-ions-New-group-Margin-input-top-bottom02, 14px) var(--Style-ions-New-group-Margin-input-left-right2, 14px);
    color: var(--Style-ions-New-group-Grey-02, #FFF);
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none !important;
    box-shadow: none !important;

    background: none !important;
}

.inputIconButton {
    cursor: pointer; /* Pour rendre l'icône cliquable */
}

.IndexInputRechercheTexte {
    display: none;
    flex: 1 0 0;
    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
}

.SiteSearchResultReal
{
    display: flex;
    width: 100%;

    gap:var(--Space-800,32px);

    justify-content: center;
    align-items: center;

    flex-direction: column;
    /* height: 85.25rem;
    padding: var(--Space-1000, 2.5rem) var(--Space-1500, 3.75rem);
    align-items: flex-start;
    gap: var(--Space-1000, 2.5rem); */
}

.SearchResultCard
{
    cursor: pointer;
    display: flex;
    min-width: 200px;
    max-width: 320px;
    min-width: 0;
    padding: var(--scale-400, 16px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    border-radius: var(--border-radius-100, 8px);
    border-radius: var(--Radius-200, 8px);
    background: var(--Background-Neutral-Primary, #DDD);
}

.SearchResultCard:hover 
{
    border: 2px solid var(--border-secondary-hover-2, #C97213);
}

.SeachZoneFormButton {
    display: flex;
    align-items: center;
}

.ResultSearchQuerry
{
    display: grid;
    
    /* Force exactement 4 colonnes de même largeur (donc 4 éléments par ligne max) */
    grid-template-columns: repeat(5, 1fr);
    
    /* La grille créera de nouvelles lignes automatiquement vers le bas */
    
    gap: var(--Space-800, 2rem);
    width: 80%;
    margin: 0 auto; /* Permet de centrer ton bloc de 60% au milieu de la page */
    align-self: stretch;

}

@media (max-width: 1000px) {

    .ResultSearchQuerry{
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
    }

    .SearchResultFiltresAllButton {
        flex-wrap: nowrap !important;
        overflow-x: auto;  /* Active le défilement horizontal */
        overflow-y: hidden; /* Coupe tout débordement vertical */
        
        /* Améliore la fluidité du scroll sur les smartphones */
        -webkit-overflow-scrolling: touch; 
        
        /* Optionnel : Masque la barre de défilement (Firefox) pour un look plus propre */
        scrollbar-width: none; 
    }

    /* Optionnel : Masque la barre de défilement (Chrome/Safari) */
    .SearchResultFiltresAllButton::-webkit-scrollbar {
        display: none;
    }

    .SearchResultFiltresButton {
        flex-shrink: 0; /* Empêche les boutons de s'écraser/rapetisser */
        white-space: nowrap; /* Empêche le texte des boutons de passer à la ligne */
    }
}

@media (max-width: 500px) {

    .ResultSearchQuerry{
        grid-template-columns: repeat(1, 1fr) !important;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center !important;
    }

    .SearchResultCard
    {
        min-width: unset !important;
        max-width: unset !important;
        width: 100% !important;
        height: 400px !important;
    }

    .SearchResultCardPhoto{
        height: 200px !important;
    }

    .SearchResultFiltres{
        padding: var(--Component-Barre-de-recherche-Margin-top-bottom, 20px) var(--Component-Barre-de-recherche-Margin-left-right, 20px) !important;
    }

}

.SearchResultSectionBas {
    width: 100%;
}




.SearchResultCardNomPrenom
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    align-self: stretch;
    overflow: hidden;
    color: var(--text-Primary-default, #2F2F2F);
    text-overflow: ellipsis;
    leading-trim: both;
    text-edge: cap;
    /* title page 2 */
    font-family: var(--Text-Heading-Font-family, Inter);
    font-size: 18px;
    font-weight: var(--Text-Heading-Font-weight, 600);
    line-height: 120%; /* 26.4px */
}

.SearchResultCardText
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-200, 8px);
    align-self: stretch;
}

.SearchResultCardPhoto
{
    width: 100%;
    height: 185px;
    align-self: stretch;
}

.SearchResultCardMinorText
{
    align-self: stretch;
    /* small */
    color: var(--text-Primary-default, #2F2F2F);
    font-family: var(--font-family-primary, Inter);
    font-size: var(--body-small, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 19.6px */
}

.SearchResultCardTag{
    display: flex;
    height: 38px;
    padding: var(--Space-200, 8px) var(--Space-300, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--Space-100, 4px);

    border-radius: var(--Radius-Full, 9999px);
    background: var(--Background-Neutral-Secondary, #848484);
}

.SearchResultCardMinorText{
    color: var(--Text-Default-Primary, #1F1F1F);

    /* Body/Regular/Small */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-small, 16px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-regular, 400);
    line-height: 140%; /* 22.4px */
}

.SearchResultCardMinorTexttag{
    color: var(--Text-Neutral-Tertiary, #F5F5F5);

    /* Body/Regular/Small */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-small, 16px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-regular, 400);
    line-height: 140%; /* 22.4px */
}

.SearchResultCardMinorMinorText {
    align-self: stretch;
    color: var(--neutral-300, #848484);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.05rem */
    margin-top: -8px;
}

.SearchRedirectForm
{
    width: 0%;
}

.inputWithIcon > .form-group {
    width: 100%;
    margin-bottom: 0;
}


@media (max-width: 800px) {

    .indexInput{
        display: flex;
        width: var(--width-700, 380px);
        height: var(--height-300, 64px);
        min-width: var(--width-500, 270px);
        max-width: var(--width-700, 520px);
        padding: var(--space-200, 20px);
        align-items: center;
        gap: var(--space-100, 10px);
    
        border-radius: var(--border-xl, 16px);
        border: 4px solid var(--border-primary-primary, #2F2F2F);
        background: var(--background-default-secondary, #F4F4F4);
    
        padding-left: 40px;
    }

    .CenteredIndexBlock {
        display: flex;
        width: 17.5rem;
        min-width: 17.5rem;
        padding: var(--Space-1000, 2.5rem) var(--Space-500, 1.25rem);
        flex-direction: column;
        align-items: flex-start;
        gap: 2.375rem;
        border-radius: var(--Space-200, 0.5rem);
        background: var(--neutral-400, #DDD);
    }

    .inputWithIcon {
        justify-content: flex-start;
    }

    .envoyerButtonIndexDiv {
        position: unset;
        transform: none;
        margin-left: 0px;
    }

    .inputWithIcon {
        width: 100%;
        max-width: 100%;
    }

}

@media (max-width: 500px) {

    .indexInput{
        display: flex;
        height: 3.5rem;
        padding: var(--Space-500, 1.25rem);
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        align-self: stretch;
    }

    .indexInput::placeholder {
        padding-right: 15px; /* Décale uniquement le texte du placeholder */
    }

    .indexTextPresentation{
        align-self: stretch;
        color: var(--text-Primary-default, #2F2F2F);
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        
        /* Heading/h6 */
        font-family: var(--type-font-family-primary, Inter);
        font-size: var(--font-size-heading-h6, 1.25rem);
        font-style: normal;
        font-weight: var(--type-font-weight-bold, 700);
        line-height: 120%; /* 1.5rem */
    }

    .SearchZoneIndex, .IndexinputWithIcon{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        align-self: stretch;
    }

    .inputWithIcon {
        width: 100%;
    }

    .envoyerButtonIndexDiv{
        width: 100%;
        /* position: initial; */
        /* margin-left: unset; */
        transform: none;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .envoyerButtonAcceuilDiv {
        width: 100%;
    }

    .inputIconButton{
        
    }

    .IndexInputRechercheTexte {
        display: block;
    }

    .inputIcon {
        position: absolute;
        left: 30px;
        cursor: pointer;
        top: 20px;
    }

    .envoyerButtonIndexDivText{

        color: var(--text-disable-primary-2, #BFBFBF);

        /* regular Bold */
        font-family: var(--font-family-primary, Inter);
        font-size: var(--body-regular, 16px);
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 22.4px */
    }

    #envoyerButtonIndexItself:disabled::before {

        content: "Rechercher"; /* Placeholder text */
        color: var(--text-disable-primary-2, #BFBFBF);
        /* regular Bold */
        font-family: var(--font-family-primary, Inter);
        font-size: var(--body-regular, 16px);
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 22.4px */
    }

    #envoyerButtonIndexItself:enabled::after {

        content: "Rechercher"; /* Placeholder text */
        color: var(--text-Primary-tertiary, #F07D00);
        /* regular Bold */
        font-family: var(--font-family-primary, Inter);
        font-size: var(--body-regular, 16px);
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 22.4px */
    }

    .SearchZoneIndex h3 {
        flex: 1 0 0 !important;
        width: 100% !important;
    }
}


/* Fin de la page d'accueil (backoffice/index) */

/* Debut de la page search_result (backoffice/search_result) */

.SiteSearchResult
{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 150px;
}

.SearchResultFiltres
{
    display: flex;
    width: 100%;
    padding: var(--Component-Barre-de-recherche-Margin-top-bottom, 40px) var(--Component-Barre-de-recherche-Margin-left-right, 60px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-200, 1rem);
    flex-shrink: 0;
    border-radius: var(--border-radius-100, 0.5rem);

    background: var(--Background-Neutral-Primary, #DDD);
}

.SearchResultTitle{
    align-self: stretch;
    color: var(--text-Primary-default, #000);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Subtitle/large */
    font-family: var(--Text-Title-Page-Font-family, Inter);
    font-size: var(--Text-Subtitle-Size-Large, 32px);
    /* font-style: italic; */
    font-weight: var(--Text-Subtitle-Font-weight, 800);
    line-height: 120%; /* 38.4px */
}

.SearchResultFiltresAllButton
{
    display: flex;
    max-width: 75rem;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--Space-300, 0.75rem) var(--Space-200, 0.5rem);
    align-self: stretch;
    flex-wrap: wrap;
}

.SearchResultRecherche
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    justify-content: center;
    align-items: center;

    gap: var(--Space-800, 32px);
    /* flex: 1 0 0; */
    align-self: stretch;
    width: 100%;
    /* width: 1300px; */
}

.SearchResultInput{
    display: flex;
    height: 4rem;
    padding: 0rem 0.875rem 0rem 0.875rem;
    align-items: center;
    flex: 1 0 0;
    border-radius: var(--border-radius-100, 0.5rem);
    border: solid #F5F5F5;
    background: var(--neutral-500, #F5F5F5);
    width: 100%;
}

.envoyerButtonSearchDiv{
    display: flex;
    width: 5%;
    height: 56px;
    padding: var(--scale-500, 20px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--border-radius-100, 8px);
    background: var(--surface-primary, #0C0C0C);
    border: 1px solid var(--Style-ions-New-group-Primary-yellow-01, #0C0C0C) !important;
    position: relative;
    transform: translateX(7rem);
    margin-left: -3.5rem;
}

.SearchResultFiltresText
{
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;

    /* Heading/h6 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h6, 22px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 26.4px; /* 120% */
}

.SearchResultFiltresButton
{
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999rem;
    border: 2px solid #FFFFFF;
    color: var(--color-neutral-100, #FFFFFF);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.2rem */
    background: var(--Background-Default-Primary, #F5F5F5);
}

.SearchResultFiltresButton:hover {
    display: inline-flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-Full, 624.9375rem);
    border: var(--border-width-50, 2px) solid var(--color-neutral-300, #848484);
    color: var(--color-neutral-300, #848484);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.2rem */
}

.SearchResultFiltresButtonFocus {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-Full, 624.9375rem);
    background: var(--neutral-100, #0C0C0C);
    color: var(--text-secondary, #F5F5F5);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.2rem */
}

.FormResultatRechercheGlobale {
    width: 100% !important;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

@media (max-width: 1200px) {

    .envoyerButtonSearchDiv{
        /* width: 100%; */
        /* position: initial; */
        /* margin-left: unset; */
        transform: none;
        margin-left: 1.5rem;
        /* margin-right: 1.5rem; */
    }

    .SiteSearchResultReal {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* padding: var(--Space-1000, 2.5rem) var(--Space-1500, 1.75rem); */
    }

    .SearchResultRecherche{
        padding: var(--Space-1000, 2.5rem) var(--Space-1500, 1.75rem);
    }

    .SearchResultFiltres {
        width: 100%;
    }

    .SearchResultRecherche {
        width: 100%;
    }

    .SearchZoneIndex h3 {
        flex: auto;
        width: auto;
    }

    .FormResultatRechercheGlobale {
        width: 100% !important;
    }

    .ResultSearchQuerry {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .SearchResultCard {
        width: 140px;
        padding: var(--Space-300, 0.75rem);
    }

    .SearchResultCardPhoto {
        height: 5.43106rem;
    }

    .SearchResultCardNomPrenom {
        font-size: var(--font-size-body-medium, 1rem);
    }

    .SearchResultCardMinorText {
        font-size: var(--font-size-body-small, 0.6875rem);
    }

    .SearchResultSectionBas {
        margin-bottom: 150px;
    }
}


/* Fin de la page search_result (backoffice/search_result) */

/* Debut de la page envoyer (backoffice/envoyer) */

.siteEnvoyer{
    display: flex;
    /* width: 1920px; */
    /* padding-bottom: 425.5px; */
    flex-direction: column;
    align-items: center;
    gap: 336.5px;
    height: 100%;
    justify-content: center;
    padding-bottom: 120px;
}

.envoyerInput{
    display: flex;
    padding: var(--Space-800, 32px) var(--Space-500, 20px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-800, 32px);
    border-radius: var(--border-radius-100, 8px);
    background: var(--neutral-400, #DDD);   
    width: 500px;
    max-width: 500px;
}

.placementTextEnvoyer{
    align-self: stretch;
}

.textEnvoyer{
    color: var(--text-Primary-default, #2F2F2F);
    text-align: center;
    
    /* Title page 01 */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--title-page-xl, 24px);
    font-style: normal;
    font-weight: 800;
    line-height: 150%; /* 36px */
}

.inputEmailEnvoyer{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: 8px;
    align-self: stretch;
}

.inputEmailAjouter {
    display: flex;
    padding: var(--Space-300, 12px);
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: var(--border-radius-100, 8px);
    border-radius: var(--Radius-100, 6px);
    background: var(--Background-Default-Tertiary, #1F1F1F);
    cursor: pointer;
    color: #f5f5f5;
}

.inputEmailAjouter:disabled {
    cursor: not-allowed !important;
    background: var(--surface-disable, #F5F5F5) !important;
    color: var(--neutral-400, #DDD) !important;
}

.inputEmailAjouter:disabled p {
    color: var(--neutral-400, #DDD) !important;
}

.inputEmailAjouterPlus {
    display: flex;
    width: 18px;
    height: 18px;
    justify-content: center;
    align-items: center;
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 16px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 19.2px */
}

.inputEmailAjouterMessage {
    /* flex: 1 0 0; */
    color: #f5f5f5;
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 16px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 19.2px */
}

.emailInputpasswordElement{
    display: flex;
    height: var(--height-300, 64px);
    min-width: var(--width-500, 270px);
    max-width: var(--width-700, 520px);
    padding: var(--space-200, 20px);
    align-items: center;
    gap: var(--space-100, 10px);
    align-self: stretch;

    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
    background: var(--background-default-secondary, #F4F4F4);
    margin-bottom: 25px;
}

.emailInputpasswordElementNotEmpty{
    border: 2px solid var(--Style-ions-New-group-Primary-yellow-01, #F07D00) !important;
}

.envoyerAddButton{
    display: flex;
    min-width: var(--width-500, 270px);
    max-width: var(--width-700, 520px);
    height: 33px;
    /* padding: 6px var(--Style-ions-New-group-Radius, 10px); */
    justify-content: center;
    align-items: center;
    gap: 4px;

    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
    background: var(--background-default-secondary, #F4F4F4);
}


.colorBtnAddEnvoyer{
    width: 100%;
    height: 100%;
    border-radius: var(--Style-ions-New-group-Radius, 10px);
    border: 2px solid var(--Style-ions-New-group-Grey-04, #1B1B1B);
    /* background: var(--Style-ions-New-group-Primary-yellow-01, #F07D00) !important; */
    /* color: var(--Style-ions-New-group-Grey-04, #1B1B1B) !important; */
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none !important;
    box-shadow: none !important;
}


.envoyerButton{
    display: flex;
    min-width: var(--width-500, 270px);
    max-width: var(--width-700, 520px);
   
    justify-content: center;
    align-items: center;
    gap: var(--Style-ions-New-group-Radius, 10px);

    border-radius: var(--Style-ions-New-group-Radius, 10px);
}

.envoyerButtonSectionEnvoyer {
    display: flex;
    width: 100%;

    justify-self: stretch;
    justify-content: center;
    align-items: center;
    gap: var(--Style-ions-New-group-Radius, 10px);

    border-radius: var(--Style-ions-New-group-Radius, 10px);
}

.colorBtnEnvoyer{
    width: 100%;
    height: 100%;

    padding: var(--Style-ions-New-group-Margin-input-top-bottom02, 14px) var(--Style-ions-New-group-Margin-input-left-right2, 14px);
    color: var(--Style-ions-New-group-Grey-02, #DFDFDF);
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none !important;
    box-shadow: none !important;
}

.colorBtnCartePerso{

    width: 100%;
    height: 100%;

    padding: var(--Style-ions-New-group-Margin-input-top-bottom02, 14px) var(--Style-ions-New-group-Margin-input-left-right2, 14px);
    color: #1F1F1F;
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none !important;
    box-shadow: none !important;
    border-radius: 10px;

}

.colorBtnEnvoyerEnable{
    
    border-radius: var(--Style-ions-New-group-Radius, 10px);
    background: var(--Style-ions-New-group-Primary-yellow-01, #F07D00);
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
}

.colorBtnEnvoyer:disabled {
    cursor: not-allowed !important;
    background: var(--surface-disable, #F5F5F5) !important;
    color: var(--neutral-400, #DDD) !important;
}


.PopupEnvoyer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--neutral-400, #DDD);
    border-radius: 24px;
    z-index: 1000;
    /* display: inline-flex; */
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-400, 40px);
    padding: var(--space-500, 60px);
    min-width: 680px;
    width: auto;
    max-height: 710px;
}

.EnvoyerMailResult {
    display: flex;
    padding: var(--Space-300, 12px);
    align-items: center;
    gap: 4px;
    border-radius: var(--border-radius-100, 8px);
    background: var(--surface-tag-primary, #343434);
}

.EnvoyerMailResult p {
    word-break: break-word;
    overflow-wrap: break-word;
    color: var(--text-secondary, #F5F5F5);
    leading-trim: both;

    text-edge: cap;
    /* Body/Bold/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 11px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 13.2px */
}

#result_envoyer_email_section {
    display: none;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--Space-200, 8px);
    align-self: stretch;
    flex-wrap: wrap;
}

@media (max-width: 500px) {

    .envoyerInput{
        width: 90%;

    }
}

@media (max-width: 1000px) {
  .PopupEnvoyer {
    /* min-width: 390px; */
    width: 90%;
    min-width: auto;
  }

  .emailInputpasswordElement {
    min-width: auto;
    max-width: none;
    width: 100%;
  }

  .envoyerButton {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}

/* Fin de la page envoyer (backoffice/envoyer) */

/* Debut de la page Carte de visite (backoffice/vcard) */

.siteVcardfita{
    height: 100%;
    display: flex;
}


.siteVcard{
    height: 100%;
    display: flex;

    /* padding-bottom: 176px; */
    flex-direction: column;
    align-items: center;

    background: var(--neutral-400, #DDD);

    overflow-y: scroll;
}

.BodyVcardPage {
    display: flex;
    /* width: 1440px; */
    height: 1547px;
    /* max-width: 1440px; */
    padding: var(--Space-1500, 60px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-800, 32px);
    overflow-y: scroll;
    width: 100%;
}



/* New One */

.TopInformationCard{
    display: flex;
    width: 100%;
    padding: var(--Space-500, 1.25rem) var(--Space-1500, 3.75rem);
    align-items: center;
    gap: var(--Space-600, 1.5rem);
    background: var(--neutral-300, #848484);
}

.TopInformationCardAcceuil {
    color: var(--color-neutral-200, #343434);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.2rem */
    cursor: pointer;
}

.TopInformationCard p {
    color: var(--color-neutral-400, #DDD);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.2rem */
}

.LikeProfil {
    display: flex;
    height: 32px;
    padding: var(--Space-100, 4px) var(--Space-200, 8px);
    align-items: center;
    gap: var(--Space-100, 4px);
    border-radius: var(--Radius-100, 6px);
    background: var(--Background-Default-Tertiary, #1F1F1F);
}

.LikeAndParainageVcard {
    display: flex;
    align-items: center;
    gap: var(--Space-100, 4px);
}

.LikeProfilGeneral
{
    display: flex;
    align-items: center;
    gap: var(--Space-100, 4px);
}

.LikeAndPdpuser
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Component-Profile-Carte-profile-gutter-4, 12px);
    align-self: stretch;
}

.LikeProfilText
{
    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 16px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 140%; /* 22.4px */
}

.TopInformationCardContainerArianeText{
    display: flex;
    width: var(--width-200, 40px);
    height: var(--height-220, 40px);
    padding: var(--space-80, 6px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-50, 4px);
    flex-shrink: 0;

    border-radius: var(--border-md, 8px);
    background: var(--background-secondary-primary, #DFDFDF);
}

.TopInformationCardPageName{
    color: var(--text-Primary-default, #2F2F2F);
    text-align: center;

    /* title page 2 */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--title-page-large, 20px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 28px */
    padding-left: 15px;
}

.VCardTitleText {
    color: #000;
    leading-trim: both;
    text-edge: cap;
    
    /* Heading/h3 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h3, 2.0rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 2.7rem */
}

.MiddleInformationCard{
    display: flex;
    width: 80%;
    padding: var(--space-300, 30px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-300, 30px);
}

.MiddleInformationCardFristSection{
    display: flex;
    align-items: flex-start;
    gap: var(--space-300, 30px);
    align-self: stretch;
}

.MiddleInformationCardFristSectionLeft{
    display: flex;
    min-width: var(--width-500, 270px);
    padding: var(--space-300, 30px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-300, 30px);
    flex: 1 0 0;

    border-radius: var(--border-large, 12px);
    background: var(--background-default-secondary, #F4F4F4);

    width: 100%;
}  

.MiddleInformationCardFristSectionLeftTop{
    display: flex;
    align-items: flex-start !important;
    width: 100%;
    justify-content: space-between;
}

.MiddleInformationCardFristSectionLeftPicture{
    /* width: 5.625rem;
    height: 5.625rem; */
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: var(--Space-100, 0.25rem);
    border: 4px solid var(--color-neutral-100, #0C0C0C);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.MiddleInformationCardFristSectionLeftInformation{
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-300, 0.2rem);
    align-self: stretch;
}

.BluredInfo {
    filter: blur(6.449999809265137px);
}

.MustBeFriendInfo {
    color: var(--Background-Brand-Primary, #985E20);
    /* Body/Bold/Small */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-small, 16px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-bold, 700);
    line-height: 140%; /* 22.4px */
    width: 50%;
}

.FriendsInfos {
    color: var(--Text-Default-Primary, #1F1F1F);

    /* Body/Bold/Small */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-small, 16px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-bold, 700);
    line-height: 140%; /* 22.4px */
}


.FriendsOnlyInfo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-100, 4px);
    align-self: stretch;
    width: 100%;
    margin-top: 10px;
}

.buttonSetingAll{
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;

    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-primary, #0C0C0C);

    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */

    border: none;
}

.buttonSetingAll:hover
{
    background-color: #848484;
}

.buttonSetingAllAddFriend{
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;

    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-primary, #0C0C0C);

    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */

    border: none;
    width: 46px;
    height: 46px;
    margin-left: 10px;
}

.buttonSetingAllAddFriend span {
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 2rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
}

.buttonSetingAllMessageFriend {
    display: flex !important;
    width: 51px !important;
    height: 46px !important;
}

.buttonSetingAllAddFriend:hover
{
    background-color: #848484;
}

.buttonSetingAllAlreadyFriend {
    background-color: #848484 !important;
}

.buttonDelete{
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;

    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-danger, #E5101D);

    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */

    border: none;

    width: 250px;
}

.buttonDelete:hover
{
    background-color: #848484;
}

.VcardOtherInformationContainer {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.VcardTagsContainer {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.TagsContainerElement > div {
    cursor: pointer;
}

.TagsContainerElement {
    display: flex;
    height: 38px;
    padding: var(--Space-200, 8px) var(--Space-300, 12px);
    align-items: center;
    gap: var(--Space-100, 4px);
    border-radius: var(--Radius-Full, 9999px);
    background: var(--Background-Neutral-Tertiary, #BCBCBC);
}

.VcardContactSupport {
    color: #FFFFFF;
    text-decoration: none;
}

.buttonSetingAll:hover
{
    background-color: #848484;
    color: #FFFFFF;
}

.MiddleInformationCardFristSectionLeftInformationTextNameUser{
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;

    /* Heading/h6 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h6, 22px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 26.4px */
    margin-bottom: 5px;
}

.MiddleInformationCardFristSectionLeftInformationTextEmail{
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.05rem */
}

.MiddleInformationCardFristSectionLeftInformationTextProfession {
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
    padding-bottom: 5px;
}

.MiddleInformationCardFristSectionLeftInformationTextSvgAndText {
    width: 100%;
    display: flex;
    gap: var(--Space-100, 4px);
    align-self: stretch;
}

.MiddleInformationCardFristSectionLeftInformationTextPhone{
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.05rem */
}

.MiddleInformationCardFristSectionLeftSetting{
    position: absolute;
    right: 26px;
    top: 24px;
}


.MiddleInformationCardFristSectionRight{
    display: flex;
    padding: var(--space-300, 30px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-200, 20px);
    flex: 1 0 0;

    border-radius: var(--border-large, 12px);
    background: var(--background-default-secondary, #F4F4F4);

    width: 100%;
}

.MiddleInformationCardFristSectionRightInformation{
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    gap: var(--space-200, 20px);
    align-self: stretch;
    width: 100%;
    align-items: center;
}

.MiddleInformationCardFristSectionRightInformationTextName{
    color: var(--text-Primary-default, #2F2F2F);

    /* title page 2 */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--title-page-large, 20px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 28px */
}

.MiddleInformationCardFristSectionRightInformationDivText{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px var(--space-200, 20px);
    align-self: stretch;
    flex-wrap: wrap;
}

.MiddleInformationCardFristSectionRightInformationText{
    display: flex;
    width: 264px;
    padding: var(--space-100, 10px);
    /* justify-content: center; */
    gap: var(--space-100, 10px);
    
    border-radius: var(--border-md, 8px);
    background: var(--background-secondary-primary, #DFDFDF);
}

.MiddleInformationCardFristSectionRightInformationText > p{
    overflow-wrap: break-word; /* Permet de couper les mots longs */
    word-wrap: break-word;     /* Compatibilité pour certains navigateurs */
    word-break: break-word;    /* Optionnel pour un contrôle strict */
    white-space: normal;       /* Permet les retours automatiques à la ligne */
}

.MiddleInformationCardSecondSection{
    display: flex;
    align-items: flex-start;
    gap: var(--space-300, 30px);
    align-self: stretch;
}

.InformationCard{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Space-400, 16px);
    align-self: stretch;
}

.InformationCardProfil {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Space-600, 24px);
    align-self: stretch;
}

.EntrepriseCardVcardPro {
    display: flex;
    height: 36px;
    padding: var(--Space-400, 16px);
    align-items: center;
    gap: 4px;
    border-radius: var(--Radius-Full, 9999px);
    background: var(--Background-Neutral-Primary, #DDD);
    border: none;
    color: var(--Text-Default-Primary, #1F1F1F);
    text-align: center;

    /* Body/Bold/Base */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-base, 18px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-bold, 700);
    line-height: 140%; /* 25.2px */
    text-wrap: nowrap;
}

.EntrepriseCardVcardProEdit {
    background: var(--Background-Neutral-Primary, #faf9f9) !important;
}

.EntrepriseCardVcardProEdit > a {
    color: var(--Text-Default-Primary, #1F1F1F) !important;
    text-decoration:none !important;
}

.EntrepriseCardVcardProSelected {
    border-radius: var(--Radius-Full, 9999px);
    background: var(--Background-Default-Tertiary, #1F1F1F) !important;
    color: var(--Text-Neutral-Tertiary, #F5F5F5);
    text-align: center;

    /* Body/Bold/Base */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-base, 18px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-bold, 700);
    line-height: 140%; /* 25.2px */
}

.EntrepriseCardVcardProContainer {
    display: flex;
    padding: var(--Space-200, 8px) 0;
    align-items: center;
    gap: var(--Space-300, 12px);
    align-self: stretch;
    overflow-x: auto;
    height: 70px;
    width: 100%;
}

.EntrepriseCardVcarProOrigiContainer {
    width: 100%;
}

.BigProfilSection {
    display: flex;
    width: 30%;
    padding: var(--Space-600, 24px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-700, 28px);
    border-radius: var(--border-radius-100, 8px);
    border: 18px solid var(--color-neutral-500, #F5F5F5);
    background: var(--color-neutral-500, #F5F5F5);
}

.SectionRightVcard {
    display: flex;
    padding: var(--Space-none, 0);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-700, 28px);
    flex: 1 0 0;
    border-radius: var(--border-radius-100, 8px);
    width: 100%;
    min-width: 0;
    margin-bottom: 100px;
}

.AllVcardPage {
    display: flex;
    align-items: flex-start;
    gap: var(--Space-1500, 60px);
    align-self: stretch;
    width: 100%;
}

.QRCodeClass {

}

.QRCodeContainer > img {
    width: 80px;
    height: 80px;
    aspect-ratio: 1/1;
    border-radius: var(--Radius-100, 6px);
    border: var(--Border-100, 2px) solid var(--Border-Neutral-Secondary, #BCBCBC);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
    align-self: flex-start;
}

.QRCodeContainerInfos {
    height: 100%;
    flex-grow: 2;
}

.QRCodeContainerInfos p:nth-child(1) {
    align-self: stretch;
    color: var(--Text-Default-Primary, #1F1F1F);

    /* Body/Bold/Base */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-base, 18px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-bold, 700);
    line-height: 140%; /* 25.2px */
}

.QRCodeContainerInfos p:nth-child(2) {
    align-self: stretch;
    color: var(--text-Primary-default, #2F2F2F);

    /* Body/Light/Small */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-small, 16px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-light, 300);
    line-height: 140%; /* 22.4px */
}


.QRCodeContainer {
    display: flex;
    width: 100%;
    padding: var(--Component-Profile-Carte-QRcode-Margin-top-bottom, 16px) var(--Component-Profile-Carte-QRcode-Margin-left-right, 20px);
    /* justify-content: center; */
    align-items: center;
    gap: var(--Component-Profile-Carte-QRcode-gutter-2, 8px);
    border-radius: var(--Radius-200, 8px);
    border: var(--Border-200, 4px) solid var(--Border-Neutral-Primary, #3D3D3D);
    background: var(--Background-Neutral-Primary, #DDD);
    height: 100%;
}

.TextInformationsColor {
    border-radius: var(--border-radius-50, 4px);
    background: var(--neutral-500, #F5F5F5);
}

.TextInformationsColor > input {
    color: var(--neutral-100, #0C0C0C);
    leading-trim: both;
    text-edge: cap;

    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 16px);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 140%; /* 22.4px */
    width: 100%;
    border: none;
    background: transparent;
}

.TextInformationsColorReseaux {
    border-radius: var(--border-radius-100, 8px);
    background: var(--neutral-200, #343434);
}

.DropDownVisibility {
    display: flex;
    height: 44px;
    padding: 11px 14px 11px 17px;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    border-radius: var(--Radius-100, 6px);
    border: var(--Border-100, 2px) solid var(--Border-Default-Primary, #1F1F1F);
    background: var(--Background-Neutral-Primary, #DDD);
    color: var(--Text-Default-Primary, #1F1F1F);
    margin-bottom: 25px;

    /* Body/Regular/Base */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-base, 18px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-regular, 400);
    line-height: 140%; /* 25.2px */
}


.TextInformationDisplay {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
    border: none;
}

.TextInformationDisplaySectionLeft {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
    flex: 1 0 0;
    border: none;
}

.TextInformationDisplaySectionLeft > p {
    color: var(--neutral-200, #343434);
    leading-trim: both;
    text-edge: cap;

    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 16px);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 140%; /* 22.4px */
}

.TextInformationColumnDisplay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Space-400, 7px);
    align-self: stretch;
}


/* .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: var(--Space-300, 0.75rem);
    width: 100%;
    border: none;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    min-height: 42px; 
    box-sizing: border-box;
} */


/* .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-color, #000);
    word-break: break-word;
    overflow-wrap: break-word;
    flex: 1;
}


.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
    top: 0;
}


.select2-container--default .select2-dropdown {
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    border: none;
    overflow: hidden;
}


.select2-container--default .select2-results__option {
    padding: 0.75rem;
    word-break: break-word;
    cursor: pointer;
}


.select2-container--default .select2-results__option--selected {
    background-color: #ddd;
}


.select2-container--default .select2-results__option--highlighted {
    background-color: #ccc;
} */

.select2-selection--single.select2-selection--single {
    border-radius: var(--border-radius-100, 0.5rem) !important;
    background: var(--neutral-500, #F5F5F5) !important;
    height: 46px !important;
}

.select2-container {
    border: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    border-radius: var(--border-radius-100, 0.5rem) !important;
    background: var(--neutral-500, #F5F5F5) !important;
    height: 100%;
    display: flex !important;
    align-items: center;
    padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    display: none;
}

.select2-container--open .select2-dropdown {
    top: 100% !important;
    bottom: auto !important;
    position: absolute !important;
    z-index: 2000 !important;
    margin-top: 4px; /* petit espace optionnel */
}

.select2-container--open .select2-dropdown {
    margin-top: 0 !important;
}


.MiddleInformationCardSecondSectionLeftInformation, .MiddleInformationCardSecondSectionRightInformation{
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    gap: var(--space-200, 20px);
    align-self: stretch;
    width: 100%;
    align-items: center;
}

.MiddleInformationCardSecondSectionLeftInformationTextName, .MiddleInformationCardSecondSectionRightInformationTextAboutMe{
    color: var(--neutral-100, #0C0C0C);
    leading-trim: both;
    text-edge: cap;

    /* Heading/h5 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h5, 26px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 31.2px */
}

.MiddleInformationCardSecondSectionLeftInformationText, .MiddleInformationCardSecondSectionRightInformationText{
    display: flex;
    padding: var(--space-100, 10px);
    /* justify-content: center; */
    align-items: center;
    gap: var(--space-100, 10px);
    flex: 1 0 0;

    border-radius: var(--border-md, 8px);
    background: var(--background-secondary-primary, #DFDFDF);
}

.MiddleInformationCardSecondSectionRight{
    display: flex;
    padding: var(--space-300, 30px);
    flex-direction: column;
    /* align-items: center; */
    gap: var(--space-200, 20px);
    flex: 1 0 0;
    width: 100%;

    border-radius: var(--border-large, 12px);
    background: var(--background-default-secondary, #F4F4F4);
}

.MiddleInformationCardThirdSection{
    display: flex;
    align-items: flex-start;
    gap: var(--space-300, 30px);
    align-self: stretch;
}


.MiddleInformationCardThirdSectionLeft, .MiddleInformationCardThirdSectionRight{
    display: flex;
    padding: var(--space-300, 30px);
    flex-direction: column;
    /* align-items: center; */
    gap: var(--space-200, 20px);
    flex: 1 0 0;

    border-radius: var(--border-large, 12px);
    background: var(--background-default-secondary, #F4F4F4);

    width: 100%;
}

.MiddleInformationCardThirdSectionLeftInformation, .MiddleInformationCardThirdSectionRightInformation{
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    gap: var(--space-200, 20px);
    align-self: stretch;
    align-items: center;
}

.VcardLoadingMap {
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #555;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}

.VcardLoadingContainer {
    height: 241.055px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid var(--neutral-100, #0C0C0C);
    align-items: center;
}

.SimpleNoneDisplay {
    display: none !important;
}

.MapContainerVcard {
    width: 100%;
    height: 100%;
    display: grid;
}

.MapContainerVcard > * { 
    grid-area: 1 / 1; 
}


.OverlayZoomInVcard {
    justify-self: end;
    align-self: start;
    margin: 12px;
    z-index: 500;
    border: 2px solid rgba(0,0,0,0.2);
    background: white;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.VcardLoadingContainer > p {
   font-size: var(--font-size-heading-h5, 15px);
}


.VcardMainLoadingContainerTrue {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.BigSectionTitle{
    color: var(--neutral-100, #0C0C0C);
    leading-trim: both;
    text-edge: cap;

    /* Heading/h5 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h5, 26px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 31.2px */
}

.PetitTextBigSection {
    align-self: stretch;
    color: var(--Background-Default-Tertiary, #1F1F1F);
    text-align: center;

    /* Body/Regular/Base */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-base, 18px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-regular, 400);
    line-height: 140%; /* 25.2px */
}

.PhotoSelectionnerEditVcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-700, 28px);
    align-self: stretch;
}

.SectionLeftVcardEditButtonTitle {
    display: flex;
    align-items: center;
    gap: var(--Space-300, 12px);
    align-self: stretch;
}

.SectionLeftVcardEditButtonTitle svg {
    cursor: pointer;
}

.ButtonAddPhotoEditVcard {
    display: flex;
    height: 40px;
    padding: var(--Space-400, 16px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--border-radius-50, 4px);
    background: var(--surface-primary, #0C0C0C);
}

.ButtonAddPhotoEditVcard  {
    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 16px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 140%; /* 22.4px */
    align-self: center;
    cursor: pointer;
}

.SelectPhotoContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: var(--Space-300, 12px);
}

.SelectPhotoTextAndContainer {
    width: 100%;
}

.PhotoPdpSelectioner {
    width: 5.625rem;
    height: 5.625rem;
    aspect-ratio: 1/1;
    border-radius: var(--Space-100, 0.25rem);
    border: var(--border-width-100, 4px) solid var(--neutral-300, #848484);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.PhotoPdpSelectioner > svg {
    cursor: pointer;
}

.PhotoPdpSelectionerFocus {
    border: var(--border-width-100, 4px) solid var(--primary-400, #C97213);
}


.MiddleInformationCardThirdSectionInformations
{
    gap: 20px var(--space-200, 20px);
}

.MiddleInformationCardThirdSectionLeftInformationText{
    width: 264px;
    padding: var(--space-100, 10px);
    gap: var(--space-100, 10px);
    border-radius: var(--border-md, 8px);
    background: var(--background-secondary-primary, #DFDFDF);
    overflow-wrap: break-word;
    display: flex;
}

.MiddleInformationCardThirdSectionLeftInformationText > p 
{
    overflow-wrap: break-word; /* Permet de couper les mots longs */
    word-wrap: break-word;     /* Compatibilité pour certains navigateurs */
    word-break: break-word;    /* Optionnel pour un contrôle strict */
    white-space: normal;       /* Permet les retours automatiques à la ligne */
}

.MiddleInformationCardThirdSectionRightBtnText{
    color: var(--text-secondary, #F5F5F5);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.05rem */
}

.MiddleInformationCardThirdSectionRightBtnTextFirst{
    color: var(--text-secondary, #F5F5F5);
    leading-trim: both;
    text-edge: cap;

    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 16px);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 140%; /* 22.4px */
}

.MiddleInformationCardThirdSectionRightBtn{
    display: flex;
    width: fit-content;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-tag-primary, #343434);
}

.MiddleInformationCardThirdSectionRightBtnFirst
{
    display: flex;
    height: var(--height-220, 40px);
    width: fit-content;
    padding: var(--space-100, 10px);
    justify-content: center;
    align-items: center;
    gap: var(--space-100, 10px);
    cursor: pointer;
}

.MiddleInformationCardThirdSectionRightBtnFirst:hover
{
    background-color: #585858;
}

.MiddleInformationCardThirdSectionRightBtnFirst:hover .MiddleInformationCardThirdSectionRightBtnTextFirst
{
    color: white;
}

.MiddleInformationCardFourSection, .MiddleInformationCardFiveSection{
    display: flex;
    padding: var(--space-300, 30px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-200, 20px);
    align-self: stretch;

    border-radius: var(--border-large, 12px);
    background: var(--background-default-secondary, #F4F4F4);

    width: 100%;
}

.MiddleInformationCardFourSectionInformation, .MiddleInformationCardFiveSectionInformation{
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    gap: var(--space-200, 20px);
    align-self: stretch;
    align-items: center;
}

.MiddleInformationCardFourSectionInformationText, .MiddleInformationCardFiveSectionInformationText{
    color: var(--text-Primary-default, #2F2F2F);

    /* title page 2 */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--title-page-large, 20px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 28px */
}

.MiddleInformationCardFourSectionPicture{
    display: flex;
    padding: var(--Space-none, 0);
    align-items: center;
    gap: 10px;
    align-self: stretch;
    overflow-x: scroll;
    flex-wrap: wrap;
    /* justify-content: center; */
}

.MiddleInformationCardFourSectionPictureItself{
    /* width: 15.6875rem;
    height: 10.98125rem;
    aspect-ratio: 251.00/175.70;
    border-radius: 0.875rem;
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
    box-shadow: 0px 4px 9.9px -2px rgba(0, 0, 0, 0.30); */

    width: 15.6875rem;
    height: 162px;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-self: stretch;
    border-radius: var(--border-radius-none, 0);
    border: var(--Border-100, 2px) solid var(--Border-Neutral-Primary, #3D3D3D);
    background: linear-gradient(0deg, rgba(217, 217, 217, 0.00) 0%, rgba(217, 217, 217, 0.00) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;

}

.MiddleInformationCardFiveSectionContainer{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 1.5rem var(--spacing-200, 1.5rem);
    align-self: stretch;
    flex-wrap: wrap;
}

.MiddleInformationCardFiveSectionContainerCardBotPhotoEntreprise
{
    display: flex;
    justify-content: center;
    width: 100%;
}

.MiddleInformationCardFiveSectionContainerCard{
    display: flex;
    min-width: 17.5rem;
    max-width: 20rem;
    padding: var(--Space-500, 1.25rem);
    flex-direction: column;
    align-items: center;
    gap: var(--space-200, 1.25rem);
    flex: 1 0 0;
    border-radius: 0.625rem;
    border: 2px solid var(--neutral-100, #0C0C0C);
    background: var(--neutral-500, #F5F5F5);
    /* max-height: 621px; */
    height: 692px;
}



.MiddleInformationCardFiveSectionContainerCardTop{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}

.MiddleInformationCardFiveSectionContainerCardTopPictureAndSettings > * {
    grid-area: 1 / 1; 
}

.MiddleInformationCardFiveSectionContainerCardTopPictureAndSettings {
    display: grid;
    width: 100%;
}

.MiddleInformationCardFiveSectionContainerCardTopSettings {
    justify-self: end;
    z-index: 500;
    margin: -10px;
}

.CreateEntrepiseSectionBottom {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 50px;
    gap: 20px
}

.CreateEntrepriseSectionTop {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    padding-bottom: 50px;
}

.MiddleInformationCardFiveSectionContainerCardTopPicture{
    display: flex;
    /* width: var(--width-400, 180px); */
    /* height: var(--height-550, 90px); */
    height: var(--height-550, 110px);
    padding: var(--space-200, 6px) var(--space-200, 5px) var(--space-200, 7px) var(--space-200, 5px);
    justify-content: center;
    align-items: center;
}

.MiddleInformationCardFiveSectionContainerCardTopPictureItself{
    width: 10.625rem;
    height: 4.8125rem;
    flex-shrink: 0;
    background: url(<path-to-image>) lightgray 50% / contain no-repeat;
    object-fit: cover;
}

.MiddleInformationCardFiveSectionContainerCardTopText{
    overflow-wrap: break-word;   
    display: block;
    gap: var(--space-100, 10px);
    align-self: stretch;
    min-height: 165px;
}

.MiddleInformationCardFiveSectionContainerCardTopTextTitle{
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    
    /* Heading/h6 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h6, 1.375rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.65rem */
    align-self: stretch;
}

.MiddleInformationCardFiveSectionContainerCardTopTextContent {
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Regular/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-regular, 400);
    line-height: 120%; /* 1.2rem */
    white-space: break-spaces;
}

.MiddleInformationCardFiveSectionContainerCardBot{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.MiddleInformationCardFiveSectionContainerCardBotPictureProperties{
    height: 10.4375rem;
    align-self: stretch;
    border-radius: 0.375rem;
    border: 4px solid var(--color-neutral-400, #DDD);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
    object-fit: cover;
}

.MiddleInformationCardFiveSectionContainerCardBotText{
    overflow-wrap: break-word;   
    display: block;
    gap: var(--space-100, 10px);
    align-self: stretch;
    min-height: 95px;
}

.MiddleInformationCardFiveSectionContainerCardBotTextTitle{
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
}

.MiddleInformationCardFiveSectionContainerCardBotTextContent {
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Regular/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-regular, 400);
    line-height: 120%; /* 1.2rem */
}

.MesCartesEntreprisesContainer {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--Space-400, 16px);
    align-self: stretch;
    width: 100%;
    overflow-x: scroll;
    height: 720px;
}



#map {
    height: 241.055px;
    width: 100%;
    border-radius: var(--Radius-200, 8px);
    z-index: 0;
}

#big_map {
    height: 100%;
    width: 100%;
    border-radius: var(--Radius-200, 8px);
}

.BigMapContainer {
    width: 100%;
    height: 100%;
    display: grid;
}

.BigMapContainer > * {
    grid-area: 1 / 1; 
}

#arrow_deroulant_big_map {
    justify-self: end;
    width: 35px;
    height: 35px;
    z-index: 10000;
    margin: 10px;
    cursor: pointer;
    background: white ;
    border: 2px solid rgba(0,0,0,0.2);
}

.BigMapTitleAndReturnBack :nth-child(1) {
    align-self: flex-start;
    width: 100%;
}

.BigMapTitleAndReturnBack {
    display: flex;
    width: 100%;
    flex-shrink: 0;
}

.BigMapReturnBack {
    cursor: pointer;
}

.BigMapPeople {
    display: flex;
    justify-self: end;
    align-self: start;
    width: 35%;
    height: 70%;
    max-height: calc(100% - 40px);
    z-index: 1001;
    flex-direction: column;
    align-items: center;
    background: var(--Background-Neutral-Primary, #DDD);
    border-radius: var(--Radius-200, 8px);
    margin: 20px;
    padding: 30px;
    box-sizing: border-box;
    /* le contenu (liste des personnes) ne doit jamais deborder du cadre : il scroll a l'interieur */
    overflow: hidden;
    box-shadow: 0px 0px 20px 00px #000;
}


.BigMapPeopleInputAndResult {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Component-Profile-Carte-profile-gutter-4, 12px);
    align-self: stretch;
    margin-top: 15px;
    /* on prend la hauteur restante sous le titre au lieu d'un pourcentage qui s'ajoute a celui-ci */
    flex: 1 1 auto;
    min-height: 0;
}

.VcardBigMapPeopleNameLoc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Space-None, 0);
    flex: 1 0 0;
    margin: 0px !important;
}

.VcardBigMapPeopleName{
    color: var(--Text-Default-Primary, #1F1F1F);
    /* Body/Bold/Base */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-base, 18px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-bold, 700);
    line-height: 140%; /* 25.2px */
    margin: 0px !important;
}

.VcardBigMapPeopleLocation{
    display: flex;
    height: 25px;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    overflow: hidden;
    color: var(--Text-Brand-Secondary, #F07D00);
    text-overflow: ellipsis;
    white-space: nowrap;

    /* Body/Light/Small */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-small, 16px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-light, 300);
    line-height: 140%; /* 22.4px */
    margin: 0px !important;
}

.VcardBigMapPeoplePdp {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    border-radius: var(--Radius-100, 6px);
    border: var(--Border-100, 2px) solid var(--Border-Neutral-Secondary, #BCBCBC);
    background-color: lightgray;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.BigMapOneResult {
    display: flex;
    padding: var(--Component-Profile-utilisateur-Margin, 12px);
    justify-content: center;
    align-items: flex-start;
    gap: var(--Space-200, 8px);
    align-self: stretch;
    border-radius: var(--Radius-200, 8px);
    background: var(--Background-Neutral-Primary, #DDD);
    height: 80px;
    /* sinon les lignes sont ecrasees par le flex quand la liste depasse */
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.BigMapPeopleResult {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    width: 100%;
    /* meme principe : la liste occupe la place restante sous le champ de recherche */
    flex: 1 1 auto;
    min-height: 0;
}

.BigMapPeopleInputAndResult > input {
    display: flex;
    height: 48px;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 13px 36px 13px 17px;
    align-items: center;
    align-self: stretch;
    border-radius: var(--Radius-100, 6px);
    background: var(--Background-Default-Primary, #F5F5F5);
    border: none;
}

.BigMapPeople > h2 {
    color: var(--Text-Default-Primary, #1F1F1F);
    /* text-align: center; */
    text-align: start;
    width: 100%;
    leading-trim: both;
    text-edge: cap;

    /* Heading/Large */
    font-family: var(--Text-Heading-Font-family, Inter);
    font-size: var(--Text-Heading-Size-Large, 26px);
    font-weight: var(--Text-Heading-Font-weight, 600);
    line-height: 120%; /* 31.2px */
}

.ButtonEditVcard {
    display: flex;
    height: 40px;
    padding: var(--Space-300, 12px) 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: var(--border-radius-50, 4px);
    cursor: pointer;
}

.ButtonEditVcard:hover {
    background: var(--surface-tertiary, #F07D00); 
}

.ButtonEditVcard > p {
    flex: 1 0 0;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;

    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 16px);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 140%; /* 22.4px */
}

.SectionRightVcardEdit {
    width: 50%;
}

.AllSectionVcardEdit {
    display: flex;
    width: 100%;
    height: 953px;
    padding: var(--Space-1500, 60px);
    justify-content: center;
    align-items: flex-start;
    gap: var(--Space-1000, 40px);
    background: var(--neutral-400, #DDD);
}

.SectionLeftVcardEdit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
    width: 50%;
}

.LineVcardPro {
    width: 100%;
    height: 10px;
    border-bottom: 1px solid black;
}

.SectionNotes {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.SectionNotes > textarea {
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
    padding: 8px;
    line-height: normal;
    border: none;
    background: none;
}

#ajax-button::after {
    /* Masquer complètement le texte */
    content: "Modifer";
}
.MesCartesEntreprisesPopup
{
    display: flex;
    width: 131px;
    height: 63px;
    padding: var(--space-100, 10px);
    justify-content: center;
    align-items: center;
    gap: var(--space-100, 10px);
    border-radius: var(--border-md, 8px);
    background: var(--background-tertiary, #BFBFBF);
    position: relative;
}

.MesCartesEntreprisesSectionPopup {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0.75rem;
    align-self: stretch;
    flex-wrap: wrap;
}

#cartes_entreprises_popup_container > img
{
    flex: 1 0 0;
    align-self: stretch;
}

#cartes_entreprises_popup_container > .WhiteCross
{
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -3px;
    top: -1px;
    z-index: 10;
}

#popup_mes_cartes_entreprises_etape_1
{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-300, 30px);
}

#popup_mes_cartes_entreprises_etape_1 > :first-child
{
    display: flex;
    height: 113px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 320px;
    align-self: stretch;
    border-radius: 6px;
    border: 4px solid var(--border-primary-secondary, #BFBFBF);
    background:  lightgray 50% / cover no-repeat;
}

#cartes_entreprises_popup_container > img
{
    flex: 1 0 0;
    align-self: stretch;
}

#popup_mes_cartes_entreprises_etape_1 > :nth-child(2)
{
    display: flex;
    height: 230px;
    width: 100%;
    padding: var(--space-200, 20px);
    align-items: flex-start;
    gap: var(--space-100, 10px);
    align-self: stretch;
    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
    background: var(--background-default-secondary, #F4F4F4);
}

#popup_mes_cartes_entreprises_etape_1 > :nth-child(2) > textarea
{
    font-family: var(--font-family-primary, Inter);
    font-size: var(--body-regular, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 22.4px */
    background: transparent;
    border: transparent;
    outline: none;
    width: 100%;
    height: 100%;
    resize: none;
}

#popup_mes_cartes_entreprises_etape_2
{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-300, 30px);
}

#popup_mes_cartes_entreprises_etape_2 > :first-child
{
    display: flex;
    height: 113px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 320px;
    align-self: stretch;
    border-radius: 6px;
    border: 4px solid var(--border-primary-secondary, #BFBFBF);
    background:  lightgray 50% / cover no-repeat;
}

#popup_mes_cartes_entreprises_etape_2 > :nth-child(2)
{
    display: flex;
    width: 320px;
    height: var(--height-300, 104px);
    min-width: var(--width-500, 270px);
    max-width: var(--width-700, 520px);
    padding: var(--space-200, 20px);
    align-items: center;
    gap: var(--space-100, 10px);
    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
    background: var(--background-default-secondary, #F4F4F4);
}

#popup_mes_cartes_entreprises_etape_2 > :nth-child(2) > textarea
{
    font-family: var(--font-family-primary, Inter);
    font-size: var(--body-regular, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 22.4px */
    background: transparent;
    border: transparent;
    outline: none;
    width: 100%;
    height: 100%;
    resize: none;
}

#popup_mes_cartes_entreprises_logo
{
    flex: 1 0 0;
    align-self: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#popup_mes_cartes_entreprises_photo
{
    flex: 1 0 0;
    align-self: stretch;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ButtonMesCartesEntreprises
{
    display: flex;
    padding: var(--Space-300, 0.75rem);
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-tag-primary, #343434);
    color: var(--text-secondary, #F5F5F5);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.05rem */
}

.PopupMesCartesEntreprisesEditPhotos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    align-self: stretch;
}

.PopupMesCartesEntreprisesEditPhotos button {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-primary, #0C0C0C);
    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
    border: none;
}

.PopupMesCartesEntreprisesEditLogoSection {
    display: flex;
    /* width: 21.625rem; */
    width: 100%;
    height: 14.1875rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Space-300, 0.75rem);
}

.PopupMesCartesEntreprisesEditLogoSection > img {
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--Space-100, 0.25rem);
    border: 4px solid var(--color-neutral-100, #0C0C0C);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.PopupMesCartesEntreprisesEditPhotoSection {
    display: flex;
    /* width: 21.625rem; */
    width: 100%;
    height: 14.1875rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Space-300, 0.75rem);
}

.PopupMesCartesEntreprisesEditPhotoSection > img {
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--Space-100, 0.25rem);
    border: 4px solid var(--color-neutral-100, #0C0C0C);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.PopupMesCartesEntreprisesEditTextSection {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    align-self: stretch;
    margin-top: 20px;
}

.PopupMesCartesEntreprisesEditTextSection > input {
    display: flex;
    width: 100%;
    height: 3.75rem;
    padding: 0 1rem;
    align-items: center;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    border: none;
}

.PopupMesCartesEntreprisesEditAboutSection {
    display: flex;
    height: 12.5rem;
    align-items: flex-start;
    gap: 0.625rem;
    flex: 1 0 0;
    width: 100%;
}

.PopupMesCartesEntreprisesEditAboutSection > textarea {
    display: flex;
    height: 12.5rem;
    padding: var(--Space-600, 1.5rem) var(--Space-400, 1rem);
    align-items: flex-start;
    gap: 0.625rem;
    flex: 1 0 0;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    border: none;
    resize: none;
}

.PopupMesCartesEntreprisesEditButtonSection {
    display: flex;
    align-items: flex-start;
    gap: var(--Space-400, 1rem);
    align-self: stretch;
}

.PopupMesCartesEntreprisesEditButtonSection button:first-child {
    display: flex;
    padding: var(--Space-500, 1.25rem);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex: 1 0 0;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-primary, #0C0C0C);
    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
}

.PopupMesCartesEntreprisesEditButtonSection button:nth-child(2) {
    display: flex;
    padding: var(--Space-500, 1.25rem);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-tertiary, #F07D00);
    color: var(--text-primary, #0C0C0C);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
}

.PopupMesCartesEntreprisesEditButtonSection button:nth-child(2):disabled
{
    cursor: not-allowed;
    padding: var(--Space-500, 1.25rem);
    box-sizing: border-box;
    gap: 10px;
    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-disable-primary, #BFBFBF);
    background: var(--background-secondary-primary, #DFDFDF);
    color: var(--text-disable-primary-2, #BFBFBF);
}


#popup_mes_cartes_entreprises_edit {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-300, 30px);
    width: 100%;
}


#notification_overlay
{
    position: fixed;
    top: 9%;
    z-index: 1000;
    background: var(--background-Notification, #64E5A0);
    display: flex;
    width: 100%;
    height: 86px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-400, 40px);
    pointer-events:none;
}

.notification_overlay_transition
{
    transition: opacity 0.5s ease-in;
    opacity: 1;
}

.notification_overlay_transition.notification_overlay_hidden {
    opacity: 0;
}

#notification_overlay > p
{
    color: var(--text-Primary-default, #2F2F2F);
    text-align: center;
    /* title page 2 */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--title-page-large, 20px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 28px */
}

#PopupCarte {
  background: var(--neutral-400, #DDD);
  border-radius: 24px;
  visibility: hidden;
  /* display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-400, 40px);
  padding: var(--space-500, 60px);
  min-width: 680px;
  width: auto;
  max-height: 710px; */
  


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Space-500, 20px);
    align-self: stretch;
}

.PopupCarteContent {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--space-400, 40px);

    width: 100%;
    
    overflow-x: visible; /* on autorise le débordement */
    overflow-y: auto;    /* scroll vertical */
    
    max-height: calc(90vh - 40px);
    padding: 20px;
    box-sizing: border-box;
}




.PopupCarteTitle
{
    /* width: 88%; */
    /* display: flex;
    align-items: flex-start; */
    justify-content: center;
    display: flex;
    text-align: center;
    align-items: center;
    gap: var(--Space-300, 12px);
}

.PopupCarteTitle h2 {
    margin-top: auto;
    margin-bottom: auto;
}

.PopupCarteTitle > div {
    cursor: pointer;
}

#PopupCarte h2
{
    color: var(--text-Primary-default, #2F2F2F);
    /* Title page 01 */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--title-page-xl, 24px);
    font-style: normal;
    font-weight: 800;
    line-height: 150%; /* 36px */
}

.PopupCarteMiddle
{
    display: flex;
    justify-content: center;
    /* width: 100%; */
    /* width: 550px; */
}

#popup_autres_informations {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.PopupAutresInformations
{
    display: flex;
    height: 14rem;
    padding: var(--Space-600, 1.5rem) var(--Space-400, 1rem);
    align-items: flex-start;
    gap: 0.625rem;
    align-self: stretch;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    width: 100%;
}

.PopupAutresInformations > textarea
{
    /* regular */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--body-regular, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 22.4px */
    background: transparent;
    border: transparent;
    outline: none;
    width: 100%;
    height: 100%;
    resize: none;
}

.MiddleInformationCardFiveSectionContainerCardTopTextContainer
{
    display: flex;
}

.MiddleInformationCardFiveSectionContainerCardTopText > textarea
{
    width: 100%; /* largeur de la textarea */
    height: 150px; /* hauteur fixe */
    resize: none; /* empêche le redimensionnement */
    overflow: hidden; /* pour gérer le défilement si nécessaire */
    font-size: var(--body-regular, 16px);
    font-style: normal;
    
}

.MiddleInformationCardFiveSectionContainerCardBotText > textarea
{
    width: 100%; /* Ajuste la largeur selon le besoin */
    min-height: 50px; /* Hauteur minimale */
    max-height: 300px; /* Facultatif : Limite la hauteur maximale */
    overflow-y: hidden; /* Masque la barre de défilement verticale */
    resize: none; /* Empêche le redimensionnement manuel */
}

.TextAreaPopupOpen
{
    background: var(--Style-ions-New-group-Grey-02, #f1f1f1);
    border-radius: var(--border-xl, 4px);
    border: 1px solid var(--border-primary-primary, #2F2F2F);
    outline: none;
}

.TextAreaPopupClose
{
    background: transparent;
    border: 1px solid transparent;
    outline: none;
}

#popup_quelques_mots_sur_moi {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.PopupQuelquesMotsSurMoi
{
    display: flex;
    height: 14rem;
    padding: var(--Space-600, 1.5rem) var(--Space-400, 1rem);
    align-items: flex-start;
    gap: 0.625rem;
    align-self: stretch;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    width: 100%;
}

.PopupQuelquesMotsSurMoi > textarea
{
    /* regular */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--body-regular, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 22.4px */
    background: transparent;
    border: transparent;
    outline: none;
    width: 100%;
    height: 100%;
    resize: none;
}

#popup_profil
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-200, 20px);
    align-self: stretch;
    width: 100%;
}

#popup_profil > h2 {
    text-align: start;
    width: 100%;
    color: var(--Text-Default-Primary, #1F1F1F);
    leading-trim: both;
    text-edge: cap;

    /* Heading/Small */
    font-family: var(--Text-Heading-Font-family, Inter);
    font-size: var(--Text-Heading-Size-small, 22px);
    font-weight: var(--Text-Heading-Font-weight, 600);
    line-height: 120%; /* 26.4px */
}

.VcardEditAllCoordonnees {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Component-Section-gnrale-gutter-4, 5px);
    align-self: stretch;
}

.VcardEditFriendsCoordonnees {
    width: 100%; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Component-Section-gnrale-gutter-4, 5px);
    align-self: stretch;
}

.PopupProfilSectionImage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
}

.PopupProfilSectionImage > img {
    width: 5.625rem;
    height: 5.625rem;
    aspect-ratio: 1/1;
    border-radius: var(--Space-100, 0.25rem);
    border: 4px solid var(--color-neutral-100, #0C0C0C);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.PopupProfilSectionImage > button {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-primary, #0C0C0C);
    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
    border: none;
}

/* #popup_profil > div
{
    display: flex;
    width: 320px;
    height: var(--height-300, 64px);
    min-width: var(--width-500, 270px);
    max-width: var(--width-700, 520px);
    padding: var(--space-200, 20px);
    align-items: center;
    gap: var(--space-100, 10px);
    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
    background: var(--background-default-secondary, #F4F4F4);
} */

/* #popup_profil div input
{
    outline: none;
    background: transparent;
    border: transparent;
} */

.IconNamePopup
{
    display: flex;
    width: 24px;
    height: 24px;
    padding: 8.4px 6px 1.886px 6px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--border-large, 12px);
    border: 2px solid var(--border-primary-secondary, #BFBFBF);
    background: var(--background-default-secondary, #F4F4F4);
}

.IconNamePopup > div
{
    width: -1px;
    height: 28px;
    flex-shrink: 0;
}

.IconMailPopup > div
{
    width: var(--icons-regular, 24px);
    height: var(--icons-regular, 24px);
    flex-shrink: 0;
}

.PopupCarteEnd {
    width: 100%;
}

.PopupInputContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.PopupInputMainContainer {
    width: 100%;
    display: flex;
}

.PopupCarteEnd > input 
{
    display: flex;
    width: 100%;
    padding: var(--Space-500, 1.25rem);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-tertiary, #F07D00);
    border: 4px solid var(--border-disable-primary, #F07D00);
    color: var(--text-primary, #0C0C0C);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */

    /* Ajout pour enlever le contour blanc au focus */
    outline: none; /* Désactive le contour par défaut au focus */
    border: none;  /* S'il y a une bordure, elle est désactivée */
    box-shadow: none; /* Désactive toute ombre portée */
}

.PopupCarteEnd > input:disabled
{
    cursor: not-allowed;
    padding: var(--Space-500, 1.25rem);
    box-sizing: border-box;
    gap: 10px;
    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-disable-primary, #BFBFBF);
    background: var(--background-secondary-primary, #DFDFDF);
    color: var(--text-disable-primary-2, #BFBFBF);
}



.PopupCarteEndSecondColor {
    background: var(--color-red-500, #E5101D) !important;
    color: var(--neutral-500, #F5F5F5) !important;
}

#popup_supprimer_compte {
    width: 100%;
}

.PopupInputTextAutresParametres
{
    display: flex;
    height: 3.75rem;
    padding: 0rem 0rem 0rem 0.875rem;
    align-items: center;
    align-self: stretch;
    gap: var(--space-100, 10px);
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
    width: 100%;
}

.PopupInputTextAutresParametres > input
{
    outline: none;
    background: transparent;
    border: transparent;
    width: 100%;
}

.PopupInputText
{
    display: flex;
    height: 3.75rem;
    padding: 0rem 0rem 0rem 0.875rem;
    align-items: center;
    align-self: stretch;
    gap: var(--space-100, 10px);
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
}

.PopupInputTextSpecialCategories {
    border: 4px solid var(--border-primary-primary, #2F2F2F);
}

.PopupInputText > input
{
    outline: none;
    background: transparent;
    border: transparent;
    width: 100%;
}

.PopupInputButton
{
    display: flex;
    width: 320px;
    min-width: var(--width-500, 270px);
    max-width: var(--width-600, 320px);
    padding: var(--space-200, 20px) var(--space-500, 60px);
    justify-content: center;
    align-items: center;
    gap: var(--space-100, 10px);
    border-radius: var(--border-xl, 16px);
    background: var(--background-default-tertiary, #2F2F2F);
    outline: none;
    border: transparent;
    width: 100%;
    /* regular Bold */
    color: var(--text-Primary-secondary, #F4F4F4);
    font-family: var(--font-family-primary, Inter);
    font-size: var(--body-regular, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 22.4px */
}

.PopupInputButton:disabled
{
    cursor: not-allowed;
    padding: var(--space-200, 20px) var(--space-500, 60px);
    gap: 10px;
    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-disable-primary, #BFBFBF);
    background: var(--background-secondary-primary, #DFDFDF);
    color: var(--text-disable-primary-2, #BFBFBF);
}

.PopupInputButtonAdd {
    display: flex;
    align-items: center;
    justify-content: center; /* centrer l'intérieur du bouton */
    padding: 0.75rem;
    gap: 0.5rem; /* espace entre l'icône et le texte */
    background: var(--surface-primary, #0C0C0C);
    color: var(--text-secondary, #F5F5F5);
    border: 1px solid transparent;
    border-radius: 0.5rem;
    width: 100%;
    position: relative;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
}

.PopupInputButtonAdd-icon {
    position: absolute;
    left: 1rem; /* Tu ajustes selon ton besoin */
    display: flex;
    align-items: center;
    justify-content: center;
}

.PopupInputButtonAdd-text {
    flex: 1;
    text-align: center;
}


.PopupInputButtonAdd:disabled {
    cursor: not-allowed;
    border-radius: var(--border-radius-100, 0.5rem);
    border-width: var(--border-width-100, 4px);
    border-style: solid;
    border-color: #B8B8B8;
    background: var(--surface-disable, #F5F5F5);
    color: var(--neutral-400, #DDD);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%;
}


.WhiteCross
{
    cursor:pointer;
}

.MesReseaux
{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px var(--space-200, 20px);
    align-self: stretch;
    flex-wrap: wrap;
}


#popup_mes_reseaux {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.PopupMesReseaux {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--space-200, 20px);
    align-self: stretch;
    flex-wrap: wrap;
}

.PopupDisplayerText
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-300, 0.75rem);
    align-self: stretch;
    width: 100%;
}

#popup_mes_affiliations {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.PopupMesEntreprisesContainer {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
}

.ImagePopupMesPhotos
{
    width:35%;
    height:35%;
    max-width:600px;
    max-height:600px;
}

#popup_photo_grouped
{
    display: grid;
    /* width: 640px; */
    width: 100%;
    row-gap: var(--Space-300, 12px);
    /* gap: 12px; */
    column-gap: var(--Space-300, 12px);
    /* grid-template-rows: repeat(2,fit-content(100%)); */
    grid-template-columns: repeat(3, 1fr);
}

/* #popup_photo_grouped > * {
    flex: 0 0 calc((100% - 2 * 40px) / 3);
} */

.MesPhotosPopupIndividual
{
    display: flex;
    /* height: 106.615px; */
    padding: 5px;
    align-items: center;
    aspect-ratio: 52/27;
    border-radius: var(--border-radius-none, 0);
    border: var(--border-width-50, 2px) solid var(--color-neutral-200, #343434);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.MesPhotosPopupIndividualEmpty {
    /* height: 106.615px;
    aspect-ratio: 52/27;
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
    justify-self: stretch;
    fill: var(--neutral-400, #DDD);
    stroke-width: 2px;
    stroke: var(--color-neutral-200, #343434); */
    width: 100%;
    height: 100%;
}

#popup_mes_photos {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
}

.MesPhotosPopupIndividual > .WhiteCross
{
    width: auto;
    height: auto;
    align-self: flex-start;
}

.MesCartesEntreprisesPopup >.WhiteCross 
{
    position: absolute;   /* Positionner l'élément de façon absolue par rapport à son parent */
    top: 10px;            /* Décalage depuis le haut (ajuste cette valeur selon tes besoins) */
    left: 10px;           /* Décalage depuis la gauche (ajuste cette valeur selon tes besoins) */
    z-index: 10;          /* Assurer que la croix reste au-dessus de l'image */
}

.MesCartesEntreprisesPopup >.WhiteCross > svg
{
    filter: drop-shadow(0px 0px 6.7px rgba(0, 0, 0, 0.65));
}

.PopupMesEntreprisesContainer > .WhiteCross {
    display: flex;
    width: 3.75rem;
    height: 3.75rem;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-50, 4px);
    background: var(--color-neutral-300, #848484);
    align-self: center;
}

.ButtonsEditVcardAll {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#overlay {
    display: block;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    align-items: center;
}

#overlay_vcard {
    display: flex;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

#overlay_change_entreprise {
    VcardLoadingMapdisplay: flex;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

.SectionAllLikedVcardProfil {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--Component-Entreprise-Section-gutter-1, 24px);
}

.ResultAllLikedVcardProfil {
    display: flex;
    /* width: 480px; */
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    overflow-y: scroll;
}

.AllLikedVcardProfil {
    display: flex;
    /* height: 75px; */
    padding: var(--Component-Profile-utilisateur-Margin, 12px);
    align-items: flex-start;
    gap: var(--Space-200, 8px);
    flex-shrink: 0;
    align-self: stretch;
    border-radius: var(--Radius-200, 8px);
    background: var(--Background-Neutral-Primary, #DDD);
    gap: var(--Space-200,8px);
    flex-grow: 3;
    height: 100%;
    width: 60%;
    cursor: pointer;
}

.AllLikedVcardButton {
    flex-grow: 1;
    height: 100%;
    display: flex;
    padding: var(--Space-400, 16px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--Radius-100, 6px);
    background: var(--Background-Default-Secondary, #F07D00);

    color: var(--Text-Default-Primary, #1F1F1F);
    text-align: center;

    /* Body/Bold/Base */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-base, 18px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-bold, 700);
    line-height: 140%; /* 25.2px */
    
    outline: none; /* Désactive le contour par défaut au focus */
    border: none;  /* S'il y a une bordure, elle est désactivée */
    box-shadow: none; /* Désactive toute ombre portée */
    width: 150px;
    /* height: 100%; */
    height: 75px;
}

.AllLikedVcardButtonBlocked {
    background: RGBA(166, 166, 166, 1) !important;
}

.AllLikedVcardContainer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--Component-Profile-Carte-profile-gutter-2, 4px);
    align-self: stretch;
}



.AllLikedVcardProfil img {
    display: flex;
    width: 50px;
    height: 50px;
    padding: 38px 0 0 38px;
    justify-content: flex-end;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: var(--Radius-100, 6px);
    border: var(--Border-100, 2px) solid var(--Border-Neutral-Secondary, #BCBCBC);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.AllLikedVcardProfilTextSection p:first-of-type {
    color: var(--Text-Default-Primary, #1F1F1F);

    /* Body/Bold/Base */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-base, 18px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-bold, 700);
    line-height: 140%; /* 25.2px */
}

.AllLikedVcardProfilTextSection p:nth-of-type(2) {
    overflow: hidden;
    color: var(--Text-Default-Tertiary, #848484);
    text-overflow: ellipsis;
    white-space: nowrap;

    /* Body/Light/Small */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-small, 16px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-light, 300);
    line-height: 140%; /* 22.4px */
}

#overlay_popup_vcard_main_page {
    width: 30%;
    height: 50%;
    position: absolute;
    display: flex;
    padding: var(--Component-Entreprise-Section-Margin-top-bottom, 52px) var(--Component-Entreprise-Section-Margin-left-right, 60px);
    flex-direction: column;
    align-items: center;
    gap: var(--Component-Entreprise-Section-gutter-1, 24px);
    border-radius: var(--Radius-200, 8px);
    background: var(--Background-Default-Primary, #F5F5F5);
    z-index: 1001;
}

.VcardAllButtonsEdit {
    display: flex;
}

/* Flou pour les images avec l'attribut data-src */
img[data-src] {
    filter: blur(0.2em);
    transition: filter 0.5s; /* Ajoutez la transition ici pour une animation fluide */
}

/* Suppression du flou pour les images normales */
img:not([data-src]) {
    filter: blur(0em);
    transition: filter 0.5s;
}

@media (max-width: 1442px) {
    .BigProfilSection {
        width: 50%;
    }
}

@media (max-width: 1000px) {

    .EntrepriseCardVcardPro {
        background: white;
    }

    .MiddleInformationCard {
        display: flex;
        width: 95%;
        padding: 0px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-300, 10px);
        margin-top: 20px;
      }

     

    .MiddleInformationCardView{
        margin-bottom: 140px;
    }

    .MiddleInformationCardModify{
        margin-bottom: 150px;
    }

    .MiddleInformationCardFristSection, .MiddleInformationCardSecondSection, .MiddleInformationCardThirdSection{
        display: flex;
        align-items: flex-start;
        gap: var(--space-300, 10px);
        align-self: stretch;
        flex-direction: column;
    }

    #PopupCarte
    {
        min-width: 390px;
    }

    .BigMapPeople {
        width: 90%;
    }

    #popup_photo_grouped {
        grid-template-columns: repeat(2, 1fr);
    }

    .AllVcardPage {
        flex-direction: column;
    }

        .MiddleInformationCardFiveSectionContainer{
        display: flex;
        padding: var(--Space-none, 0);
        align-items: center;
        gap: 10px;
        align-self: stretch;
        overflow-x: scroll;
        flex-wrap: unset;
    }

    .siteVcard{
        display: flex;
        /* width: 1440px;
        height: 1547px;
        max-width: 1440px; */
        width: 100%;
        /* padding: var(--Space-1500, 60px); */
        padding :var(--Space-none,0);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Space-800, 32px);
        overflow-y: auto;
    }

    .BodyVcardPage {
        padding: var(--Space-600, 24px) var(--Space-500, 20px);
        gap: var(--Space-600, 24px);
    }

    .BigProfilSection {
        width: 100%;
        border: none;
        background: none;
        padding: 0;
    }

    .BigProfilSection .TextInformationsColor {
        background: transparent;
    }
    
    .SectionLeftVcardEditHidden {
        display: none;
    }

    .SectionRightVcardEditHidden {
        display: none;
    }

    .SectionLeftVcardEdit {
        width: 100%;
       
    }

    .AllSectionVcardEdit {
        padding: 0;
        gap: 0;
        flex-shrink: 0;
        height: 100%;
    }

    .siteVcardEdit {
        overflow-y: auto;
        height: 100%;
        display: none;
    }

    .SectionRightVcardEdit {
        width: 100%;
    }

    #overlay_popup_vcard_main_page {
        width: 90% !important;
        padding: var(--Component-Entreprise-Section-Margin-top-bottom, 22px) var(--Component-Entreprise-Section-Margin-left-right, 20px)
    }

    .AllLikedVcardButton {
        width: 100px;
        font-size: var(--Text-Body-Size-base, 12px);
    }

}

@media (max-width: 500px) {

    

    .VcardOtherInformationContainer {
        display: flex;
    }

    #ajax-button::after {
        /* Masquer complètement le texte */
        content: none;
    }

    .TopInformationCard {
        padding: 13px 10px;
    }

    .TopInformationCardPageName {
        color: var(--text-Primary-default, #2F2F2F);
        text-align: center;
        font-family: var(--font-family-primary, Inter);
        font-size: var(--title-page-large, 20px);
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        padding-left: 10px;
    }



}

@media (max-width: 380px) {

    .MiddleInformationCardFourSectionPictureItself{
        max-width: 198px;
        max-height: 114px ;
    }
}

@media (max-width: 600px) {
    #PopupCarte
    {
        /* width: 90%; */
        min-width: unset; /* ou 0 */
        /* padding: 20px;  */
        max-height: 70vh; /* Adapter à l'écran */
        overflow: hidden;
    }

    .PopupMesCartesEntreprisesEditPhotos {
        display: flex;
        padding: 0rem var(--Space-200, 0.5rem);
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        align-self: stretch;
    }

    .PopupMesCartesEntreprisesEditTextSection {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Space-400, 1rem);
        align-self: stretch;
    }

    .PopupMesCartesEntreprisesEditButtonSection {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Space-200, 0.5rem);
        align-self: stretch;
    }

    .MiddleInformationCardFiveSectionContainerCard {
        width: 100%;
        /* min-width: auto; */
    }


    .MiddleInformationCardSecondSectionLeftInformationTextName, .MiddleInformationCardSecondSectionRightInformationTextAboutMe {
        width: 90%;
        overflow-wrap: break-word;
    }

    .buttonSetingAll span {
        display: none;
    }

    /* .buttonSetingAllAddFriend span {
        display: none;
    } */

    .buttonDelete {
        width: 100%;
    }

     .VcardContactSupport {
        width: 100%;
      }
}




/* OLD ONE */


/* Fin de la page Carte de visite (backoffice/vcard) */

/* Debut de la page Setting de la carte de visite (backoffice/vsetting) */


.rightInformationCardInputSetting{
    display: flex;
    padding: 0px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 60px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Style-ions-New-group-Font-size-H2, 24px);
    align-self: stretch;
}

.rightInformationCardInputSettingName{
    display: flex;
    align-items: flex-start;
    gap: var(--Style-ions-New-group-Font-size-H2, 24px);
}

.rightInformationCardInputSettingNameInput{
    display: flex;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom01, 12px) var(--Style-ions-New-group-Margin-input-left-right1, 12px);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 450px;

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    border: 2px solid var(--Style-ions-New-group-Grey-04, #1B1B1B);
    background: var(--Style-ions-New-group-Grey-02, #DFDFDF);
}

.rightInformationCardInputSettingContact{
    display: flex;
    align-items: flex-start;
    gap: var(--Style-ions-New-group-Font-size-H2, 24px);
}

.rightInformationCardInputSettingAbout{
    display: flex;
    align-items: flex-start;
    gap: var(--Style-ions-New-group-Font-size-H2, 24px);
}

.rightInformationCardInputSettingHideCard{
    display: flex;
    width: 450px;
    height: 64px;
    padding: 6px var(--Style-ions-New-group-Radius, 10px);
    justify-content: center;
    align-items: center;
    gap: 4px;

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    background: var(--Style-ions-New-group-Grey-03, #585858);

    color: var(--Style-ions-New-group-Grey-01, #F4F4F4);
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.rightInformationCardInputSettingSendCard{
    display: flex;
    width: 450px;
    height: 64px;
    padding: 6px var(--Style-ions-New-group-Radius, 10px);
    justify-content: center;
    align-items: center;
    gap: 4px;

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    background: var(--Style-ions-New-group-Primary-yellow-01, #F07D00);

    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

/* Fin de la page Setting de la carte de visite (backoffice/vsetting) */

/* Debut de la page contact (backoffice/amis) */

.siteVcardContact{
    display: flex;
    /* width: 1920px;
    height: 1080px; */
    height: 100%;
    flex-grow: 1;
    flex-direction: column;
    /* justify-content: center; */
    align-items: flex-start;
    padding-bottom: 30px;

    background: var(--Style-ions-New-group-Grey-01, #F4F4F4);
}

.topInformationContact{
    display: flex;
    width: 100%;
    /* height: 100%; */
    /* height: 110px; */
    /* padding: 20px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 60px); */
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    flex-direction: column;
    padding-bottom: 20px;

    background: var(--Style-ions-New-group-Grey-01, #F4F4F4);
}

.topInformationContactContainer{
    display: flex;
    width: 100%;
    padding: 20px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 60px);
    justify-content: space-between;

}

.topInformationContactAriane{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    align-self: stretch;
}

.topInformationContactArianeText{
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-H2, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.topInformationContactUserSearch{
    display: flex;
    width: 400px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex-shrink: 0;
}

.inputWithIconContact {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%; /* Ajustez selon vos besoins */

    /* Ajout pour l'espace entre l'input et le boutton */
    gap: var(--space-200, 20px);
}

.indexInputContact{
    display: flex;
    width: var(--width-700, 520px);
    height: var(--height-300, 64px);
    min-width: var(--width-500, 270px);
    max-width: var(--width-700, 520px);
    padding: var(--space-200, 20px);
    align-items: center;
    gap: var(--space-100, 10px);

    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-primary-primary, #2F2F2F);
    background: var(--background-default-secondary, #F4F4F4);

    padding-left: 40px;
}

.inputIconContact {
    position: absolute;
    left: 10px; /* Ajustez selon la marge que vous souhaitez entre l'input et l'icône */
    cursor: pointer; /* Pour rendre l'icône cliquable */
}

.topInformationContactArianeUserSearchInput{
    display: flex;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom01, 12px) var(--Style-ions-New-group-Margin-input-left-right1, 12px);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    border: 2px solid var(--Style-ions-New-group-Grey-04, #1B1B1B);
    background: var(--Style-ions-New-group-Grey-02, #DFDFDF);
}

.topInformationContactArianeUserSearchInputIcon{
    display: flex;
    width: 113px;
    align-items: center;
    gap: var(--Style-ions-New-group-Radius, 10px);
}

.topInformationContactFilter{
    display: flex;
    justify-content: center;
    align-items: center;
}

.topInformationContactFilterButton{
    display: flex;
    padding: 6px var(--Style-ions-New-group-Radius, 10px);
    justify-content: center;
    align-items: center;
    gap: 4px;

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    background: var(--Style-ions-New-group-Grey-04, #1B1B1B);

    color: var(--Style-ions-New-group-Grey-01, #F4F4F4);
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.botInformationContact{
    display: flex;
    width: 100%;
    height: 90%;
    flex-direction: column;
    align-items: flex-start;
    gap: 38px;
    flex-shrink: 0;
    padding-bottom: 30px;

    flex-grow: 1;  /* Make sure this section grows to fill remaining space */
    overflow-y: auto;
}

.botInformationContactDivLetter{
    display: flex;
    padding: 0px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 60px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Style-ions-New-group-Font-size-p, 16px);
    align-self: stretch;

    border-radius: var(--Style-ions-New-group-Radius, 10px);
}

.botInformationContactDivLetterItself{
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.botInformationContactDivLettercard{
    display: flex;
    padding: 0px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 60px);
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: var(--Style-ions-New-group-Font-size-H2, 24px);
    align-self: stretch;
    flex-wrap: wrap;

}

.botInformationContactDivLettercardFriend{
    display: flex;
    width: 504px;
    padding: var(--Style-ions-New-group-Font-size-H2, 24px);
    justify-content: center;
    align-items: center;
    gap: 6px;

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    background: var(--Style-ions-New-group-Grey-02, #DFDFDF);

    margin-right: 50px;

    flex-shrink: 0;
}

.botInformationContactDivLettercardFriendContainer{
    display: flex;
    align-items: center;
    gap: 6px;
    /* flex-wrap: wrap; */
}

.botInformationContactDivLettercardFriendContainerImageUser{
    width: 81px;
    height: 81px;

    border-radius: 50px;
    border: 3px solid var(--Style-ions-New-group-Grey-04, #1B1B1B);
    /* background: url(<path-to-image>) lightgray -5.956px 0.267px / 126.864% 190.296% no-repeat; */
}

.botInformationContactDivLettercardFriendContainerText{
    display: flex;
    width: 310px;
    padding: 0px 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.botInformationContactDivLettercardFriendContainerTextNoPostIt{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.nameContactFriends{
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin: 0 !important;
}

.otherContactFriends{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 1; */
    align-self: stretch;

    overflow: hidden;
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    text-overflow: ellipsis;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 !important;
}

.botInformationContactDivLettercardFriendContainerTextPostIt{
    display: flex;
    padding: 2px 0px;
    justify-content: center;
    align-items: center;
    gap: var(--Style-ions-New-group-Radius, 10px);
    align-self: stretch;

    border-bottom: 1px solid var(--Style-ions-New-group-Grey-03, #585858);
}

.postItContactFriends{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 1; */
    flex: 1 0 0;

    overflow: hidden;
    color: var(--Style-ions-New-group-Grey-03, #585858);
    text-overflow: ellipsis;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p3, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 !important;
}

.botInformationContactDivLettercardFriendContainerChat{
    display: flex;
    width: 64px;
    justify-content: space-between;
    align-items: center;
}

.alphabet-sidebar {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.alphabet-link {
    text-decoration: none;
    font-size: 14px;
    /* margin: 5px 0; */
    color: #1b1b1b;
    text-align: center;
}

.alphabet-link:hover {
    color: #007bff;
}

.contact-section {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
}

.section-letter {
    font-size: 18px;
    font-weight: bold;
    /* margin-bottom: 10px; */
}

@media (max-width: 700px) {

    .botInformationContactDivLetter{
        padding: 0px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 10px);
    }

    .topInformationContactUserSearch{
        width: 350px;
    }

    .botInformationContactDivLettercardFriend{
        justify-content: flex-start;
    }

    .botInformationContactDivLettercardFriendContainer{
        flex-direction: column;
        align-items: baseline;
    }

    .botInformationContactDivLettercardFriendContainerText{
        width: 100% !important;
    }

}

@media (max-width: 400px) {

    .botInformationContactDivLetter{
        padding: 0px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 20px);
    }

    .topInformationContactUserSearch{
        width: 300px;
    }

    .topInformationContactContainer{
        padding-left: 10px;
        padding-right: 10px;
    }

    .botInformationContactDivLettercard{
        padding: 0px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 10px);
    }

}

/* Debut de la page entreprise (backoffice/entreprise) */

.MesEntreprisesBody
{
    display: flex;
    width: 37.5rem;
    max-width: 37.5rem;
    padding: var(--scale-1000, 2.5rem);
    flex-direction: column;
    align-items: center;
    gap: var(--scale-800, 2rem);
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-400, #DDD);
}

#create_entreprise_popup {
    position: relative;
}

.MesEntreprisesMainSection
{
    display: flex;
    width: 100%;
    height: 100%;
    padding-bottom: 5rem;
    padding-top: 5rem;
    flex-direction: column;
    align-items: center;
    gap: 10.21875rem;
    overflow-y: auto;
}



.MesEntreprisesTitlePart > p
{
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Heading/h5 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h5, 1.625rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 140%; /* 2.275rem */
}

.AddNewEntreprise
{
    display: flex;
    padding: var(--scale-500, 1.25rem);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: var(--border-radius-100, 0.5rem);
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-tertiary, #F07D00);
    border: none;
    width: 100%;
}

.AddNewEntrepriseDisabled {
    display: flex;
    padding: var(--scale-500, 1.25rem);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border: none;
    width: 100%;

    cursor: not-allowed;
    border-radius: var(--border-radius-100, 0.5rem);
    border-width: var(--border-width-100, 4px);
    border-style: solid;
    border-color: #B8B8B8;
    background: var(--surface-disable, #F5F5F5);
    color: var(--neutral-400, #DDD);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%;
}

.WarningCreateEntreprise {
    font-style: italic;
}

.AddNewEntrepriseSection
{
    margin-top: 50px;
    padding: var(--scale-400, 1rem);
}

.AddNewEntreprise:hover {
    background: var(--surface-tertiary-hover, #C97213);
}


.AddNewEntreprise > p
{
    color: var(--text-primary, #0C0C0C);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 140%; /* 1.4rem */
}

.MesEntreprisesResultMain {
    display: flex;
    min-width: 17.5rem;
    padding: var(--scale-400, 1rem);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    align-self: stretch;
    width: 100%;
}

.MesEntreprisesResult {
    width: 100%;
}

.MesEntreprisesResultMainSection
{
    display: flex;
    padding: var(--Space-400, 1rem);
    gap: var(--Space-300, 0.75rem);
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-secondary, #F5F5F5);
    align-self: stretch;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; 
    width: 100%;

}

.MesEntreprisesResultImg
{
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    border-radius: var(--scale-200, 8px);
    border: 4px solid var(--color-neutral-100, #0C0C0C);
    background:  lightgray 50% / cover no-repeat;
}

.MesEntreprisesResultMainText
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

.MesEntreprisesResultMainEntrepriseName
{
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 140%; /* 1.4rem */
}

.MesEntreprisesResultMainEntrepriseMail
{
    align-self: stretch;
    color: var(--neutral-300, #848484);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 140%; /* 1.225rem */
}

.MesEntreprisesResultButton
{
    cursor: pointer;
    display: flex;
    width: 20px;
    justify-content: center;
}

.MesEntreprisesClickable {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    align-self: stretch;
    cursor: pointer;
}

@media (max-width: 700px) {
    .MesEntreprisesBody {
        width: 90%;
    }

    .MesEntreprisesResult {
        width: 100%;
    }

    .AddNewEntreprise {
        width: 100%;
    }
}

/* Fin de la page contact (backoffice/entreprise) */



/* Debut de la page d'accueil (backoffice/activite) */

.ActiviteMainSection {
    display: flex;
    /* padding: var(--Space-1000, 2.5rem) var(--Space-1500, 3.75rem); */
    justify-content: center;
    align-items: flex-start;
    gap: var(--Space-1000, 2.5rem);
}

.ActiviteMainBody {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.RechercheBarActiviteSection .inputIcon {
    visibility: hidden;
}

.FiltreAndResulatRechercheActiviteSection {
    display: flex;
    /*width: 90rem;*/
    /* padding: var(--Space-1000, 2.5rem) var(--Space-1500, 3.75rem); */
    /*justify-content: center;*/
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    gap: var(--Space-1000, 2.5rem);
}

.ActiviterSectionFiltre{
    display: flex;
    width: 100%;
    justify-content: flex-start;

    flex-direction: column;
    gap: var(--Space-400, 1rem);
    padding: var(--Space-1000, 2.5rem) var(--Space-1500, 3.75rem);

    background: var(--Background-Neutral-Primary, #DDD);
}

.FiltreActiviteSection {
    display: flex;
    width: 20rem;
    padding: var(--Space-600, 1.5rem);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-200, 1.5rem);
    flex-shrink: 0;
    border-radius: var(--border-radius-100, 0.5rem);
    border: var(--border-width-50, 2px) solid var(--neutral-100, #0C0C0C);
}

.ResultatAndListActiviteSection {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ResultatAndListActiviteSectionPlt{
    width: 80%;
    padding: var(--Component-Activit-Margin-top-bottom, 40px) var(--Component-Activit-Margin-left-right, 60px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Component-Activit-gutter-1, 28px);
    align-self: stretch;

    border-radius: var(--Radius-200, 8px);
    background: var(--Background-Neutral-Primary, #DDD);
}

.ResultatAndListActiviteSection > h2 {
    display: flex;
    max-width: 75rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    color: var(--neutral-100, #0C0C0C);
    leading-trim: both;
    text-edge: cap;

    /* Heading/h4 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h4, 1.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 2.25rem */
    flex: 1 0 0;
}

.RechercheBarActiviteSection {
    display: flex;
}

.envoyerButtonActiviteDiv {
    display: flex;
    width: 56px;
    height: 56px;
    padding: var(--scale-500, 20px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--border-radius-100, 8px);
    background: var(--surface-primary, #0C0C0C);
    border: 1px solid var(--Style-ions-New-group-Primary-yellow-01, #0C0C0C) !important;
    align-self: center;
}

.ListActiviteSection {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5625rem;
    align-self: stretch;
}

.LineResultatActivite {
    display: flex;
    padding: var(--spacing-100, 1rem) 0;
    align-items: flex-start;
    gap: 1.1875rem;
    align-self: stretch;
    border-radius: var(--border-radius-100, 0.5rem);
    /* background: var(--color-neutral-500, #F5F5F5); */
}

.LineResultatActivite > img {
    width: 3.75rem;
    height: 3.75rem;
    aspect-ratio: 1/1;
    border-radius: var(--Space-100, 0.25rem);
    border: 4px solid var(--color-neutral-100, #0C0C0C);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
    object-fit: cover;
}

.LineResultActiviteUser {
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
}

.LineResultActiviteAction {
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;

    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.2rem */
}

.LineResultActiviteDate {
    align-self: stretch;
    color: var(--color-neutral-300, #848484);
    leading-trim: both;
    text-edge: cap;

    /* Body/Medium/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.05rem */
}




.ActiviteFiltres
{
    display: flex;
    width: 24rem;
    /* padding: var(--Space-600, 1.5rem); */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-200, 1.5rem);
    flex-shrink: 0;
    /* border-radius: var(--border-radius-100, 0.5rem);
    border: var(--border-width-50, 2px) solid var(--neutral-100, #0C0C0C); */
}

.ActiviterSectionFiltreTitle{
    display: flex;
    align-content: center;
    justify-content: center;

    font-family: var(--Text-Title-Page-Font-family, Inter);
    font-size: var(--Text-Subtitle-Size-Large, 32px);
    /* font-style: italic; */
    font-weight: 800;
    line-height: 120%; /* 38.4px */
}
.ActiviterSectionFiltreTitleText{
    font-family: var(--Text-Title-Page-Font-family, Inter);
    font-size: var(--Text-Subtitle-Size-Large, 32px);
    /* font-style: italic; */
    font-weight: 800;
    line-height: 120%; /* 38.4px */
}

.ActiviteFiltresAllButton
{
    display: flex;
    max-width: 75rem;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--Space-300, 0.75rem) var(--Space-200, 0.5rem);
    align-self: stretch;
    flex-wrap: wrap;
}

.ActiviteFiltresText
{
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;

    /* Heading/h6 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h6, 22px);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 26.4px; /* 120% */
}

.ActiviteFiltresButton
{
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999rem;
    border: 2px solid #FFFFFF;
    color: var(--color-neutral-100, #FFFFFF);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/medium */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-base, 18px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-bold, 700);
    line-height: 140%; /* 25.2px */
    background: var(--Background-Default-Primary, #F5F5F5);
}

.ActiviteFiltresButton:hover {
    display: inline-flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-Full, 624.9375rem);
    border: var(--border-width-50, 2px) solid var(--color-neutral-300, #848484);
    color: var(--color-neutral-300, #848484);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.2rem */
}

.ActiviteFiltresButtonFocus {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-Full, 624.9375rem);
    background: var(--neutral-100, #0C0C0C);
    color: var(--text-secondary, #F5F5F5) !important;
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.2rem */
}

.ActiviteFiltresButtonVoirPlus {
    border-radius: var(--border-radius-Full, 9999px);
    border: var(--border-width-50, 2px) solid var(--primary-200, #523211);

}

.ActiviteFiltresButtonVoirPlus > p{
    color:var(--primary-200, #523211);
}

.ActiviteResultImg
{
    width: 4rem;
    height: 4rem;
    aspect-ratio: 1/1;
    border-radius: var(--scale-200, 8px);
    border: 4px solid var(--color-neutral-100, #0C0C0C);
    background:  lightgray 50% / cover no-repeat;
}

@media (max-width: 600px) {

    .FiltreAndResulatRechercheActiviteSection{
        padding: unset !important;
    }

    .ActiviteFiltresAllButton {
        flex-wrap: nowrap !important;
        overflow-x: auto;  /* Active le défilement horizontal */
        overflow-y: hidden; /* Coupe tout débordement vertical */
        
        /* Améliore la fluidité du scroll sur les smartphones */
        -webkit-overflow-scrolling: touch; 
        
        /* Optionnel : Masque la barre de défilement (Firefox) pour un look plus propre */
        scrollbar-width: none; 
    }

    .ActiviterSectionFiltre{
        padding: 1rem !important;
    }

    .ResultatAndListActiviteSectionPlt{
        width: 100% !important;
        padding: 1rem !important;
    }
}
.ActiviteDateSeparator{
    color: var(--Text-Default-Primary, #1F1F1F);
    leading-trim: both;
    text-edge: cap;

    /* Heading/Base */
    font-family: var(--Text-Heading-Font-family, Inter);
    font-size: var(--Text-Heading-Size-base, 30px);
    font-style: bold;
    font-weight: var(--Text-Heading-Font-weight, 800);
    line-height: 120%; /* 24px */
}

/* --- Lieu de l'activité (partage / parrainage géolocalisé) --- */
.LineResultActiviteLieu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    align-self: stretch;
    color: var(--color-neutral-300, #848484);
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%;
}

/* --- Likes regroupés --- */
.ActiviteLikeAvatars {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ActiviteLikeAvatar {
    margin-right: -1.25rem;
}

.ActiviteLikeAvatars > :last-child {
    margin-right: 0;
}

.ActiviteLikePlus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--scale-200, 8px);
    border: 4px solid var(--color-neutral-100, #0C0C0C);
    background: var(--color-neutral-500, #F5F5F5);
    color: var(--text-primary, #0C0C0C);
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-weight: var(--type-font-weight-bold, 700);
}

.LineResultActiviteNoms {
    align-self: stretch;
    color: var(--color-neutral-300, #848484);
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%;
}

@media (max-width: 600px) {
    .ActiviteLikeAvatar {
        margin-right: -1.75rem;
    }
}

.ActiviteResultButtonsContainer {
    display: flex;
    align-items: flex-start;
    gap: var(--Space-200, 0.5rem);
    padding-top: 10px;

}

.ActiviteResultButtonInvit 
{
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-primary, #0C0C0C);
    height: 30px;
    cursor: pointer;
}

.ActiviteResultButtonInvit > p 
{
    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
}

.FormActiviteSection {
    width: 100%;
    padding-right: 50px;
}

@media (max-width: 1000px) {
  .ActiviteFiltres {
    display: flex;
    padding: var(--Space-400, 16px) var(--Space-300, 12px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-200, 24px);
    width: 100%;
  }

  .FiltreAndResulatRechercheActiviteSection {
    display: flex;
    width: 100%;
    height: 100%;
    padding: var(--Space-800, 32px) var(--Space-500, 20px);
    flex-direction: column;
    align-items: center;
    gap: var(--Space-800, 32px);
    justify-content: flex-start;
    padding-bottom: 120px;
  }

  .ResultatAndListActiviteSection {
    order: 3;
    width: 100%;
    padding-bottom: 120px;
  }

  .RechercheBarActiviteSection {
    order: 2;
    width: 100%;
  }

  .ActiviteMainSection {
    width: 100%;
    padding: 0;
  }

  .ResultatAndListActiviteSection > h2 {
    display: none;
  }
  .FormActiviteSection {

        padding-right: 20px !important;
    }

}



/* Fin de la page activité (backoffice/activite) */


/* Debut de la page messages (backoffice/createEntreprise) */
.createEntrepriseLabel {

}

.createEntrepriseField {
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    height: 4rem;
    align-items: center;
    align-self: stretch;
    border: none;
    width: 500px;
}

.createEntrepriseForm {
    display: flex;
    width: 35rem;
    max-width: 35rem;
    padding: var(--Space-1000, 2.5rem);
    flex-direction: column;
    align-items: center;
    gap: var(--Space-1000, 2.5rem);
    border-radius: var(--border-radius-100, 0.5rem);
}

.createEntrepriseContainer {
    background: var(--color-neutral-400, #DDD);
    padding: var(--Space-1000, 2.5rem);
}

.createEntrepriseAfterForm {
    display: block;
}

/* aperçu du logo actuel, affiché uniquement en modification */
.createEntrepriseLogoActuel {
    display: flex;
    align-items: center;
    gap: var(--Space-300, 0.75rem);
    margin-bottom: var(--Space-300, 0.75rem);
}

.createEntrepriseLogoActuel > img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
}

.createEntrepriseLogoActuel > p {
    color: var(--text-primary, #0C0C0C);
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    line-height: 140%;
}

.createEntrepriseMain {
    width: 100%;
    align-content: center;
    justify-content: center;
    display: flex;
}

.createEntrepriseMain > div {
    display: flow-root;
}

.createEntrepriseSaveButton {
    display: flex;
    padding: var(--Space-500, 1.25rem);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-tertiary, #F07D00);
    border: none;

    color: var(--text-primary, #0C0C0C);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
    width: 500px;
}

.createEntrepriseSaveSection {
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    font-weight: bold;
    margin-top: 50px;
}

/* Fin de la page messages (backoffice/createEntreprise) */


/* Debut de la page messages (backoffice/manageEntreprise) */
.ManageEntreprisesBody {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.875rem;
    min-height: 100vh;
}

.ManageEntrepriseMainSection 
{
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.ManageEntreprisesResultMainSection 
{
    display: flex;
    padding: var(--Space-400, 1rem);
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: var(--Space-300, 0.75rem);
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-secondary, #F5F5F5);
    align-self: stretch;
    align-content: flex-end;
}

.ManageEntrepriseAllSections {
    display: flex;
    width: 100%;
    max-width: 81.25rem;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-1500, 3.75rem);
    padding: 100px var(--Space-500, 1.25rem) 150px var(--Space-500, 1.25rem);
}

.MesEntreprisesResultContent {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    align-self: stretch;
}

.MesEntreprisesResultAdmin {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--color-orange-300, #985E20);

    color: var(--text-secondary, #F5F5F5);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.05rem */
}

.MesEntreprisesResultMembre {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-tag-primary, #343434);

    color: var(--text-secondary, #F5F5F5);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.05rem */
}

.MesEntreprisesResultAttente {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: #e01a1a;

    color: var(--text-secondary, #F5F5F5);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.05rem */
}

.ManageEntrepriseSectionTopRight {
    display: flex;
    align-items: center;
    gap: var(--Space-300, 0.75rem);
}

.ManageEntrepriseSectionMesAffiliations {
    display: flex;
    flex-direction: column;
}

.ManageEntrepriseCurrentAffiliation {
    display: flex;
    height: 38px;
    padding: var(--Space-200, 8px) var(--Space-300, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--Space-100, 4px);
    border-radius: var(--Radius-Full, 9999px);
    background: var(--Background-Neutral-Tertiary, #BCBCBC);
}

.ManageEntrepriseCurrentAffiliation > p {
    color: var(--Text-Neutral-Tertiary, #F5F5F5);
    /* Body/Regular/Small */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-small, 16px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-regular, 400);
    line-height: 140%; /* 22.4px */
}

.ManageEntrepriseCurrentAffiliation > svg {
    cursor: pointer;
}

.ManageEntrepriseResultAffiliations {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem;
}

.OnlyMobileSectionEntreprise {
    display: none;
}

.ManageEntrepriseSectionTopRight > button {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-300, #848484);
    border: none;

    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
}

.ManageEntrepriseSectionTopRight > button:disabled {
    border-radius: var(--Radius-100, 6px);
    border: var(--Border-100, 2px) solid var(--Border-Neutral-Secondary, #BCBCBC);
    background: var(--Background-Neutral-Primary, #DDD);
}


.ManageEntrepriseSectionTop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: wrap;
    gap: var(--Space-300, 0.75rem);
}


.ManageEntrepriseResult {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.5rem;
    padding: 1rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.ManageEntreprisesResultMainSection .MesEntreprisesResultMainText {
    min-width: 0;
}

.ManageEntreprisesResultMainSection .MesEntreprisesResultMainEntrepriseName,
.ManageEntreprisesResultMainSection .MesEntreprisesResultMainEntrepriseMail {
    overflow-wrap: anywhere;
}

.ManageEntrepriseMembresToolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--Space-300, 0.75rem);
    align-self: stretch;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1rem 0 1rem;
    box-sizing: border-box;
}

.ManageEntrepriseMembresSearch {
    flex: 1 1 18rem;
    height: 44px;
    padding: 11px 17px;
    box-sizing: border-box;
    border-radius: var(--Radius-100, 6px);
    border: var(--Border-100, 2px) solid var(--Border-Neutral-Secondary, #BCBCBC);
    background: var(--Background-Neutral-Primary, #DDD);

    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
}

.ManageEntrepriseMembresFiltres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--Space-200, 0.5rem);
}

.ManageEntrepriseMembresFiltre {
    display: flex;
    height: 38px;
    padding: var(--Space-200, 8px) var(--Space-300, 12px);
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    border-radius: var(--Radius-Full, 9999px);
    background: var(--Background-Neutral-Tertiary, #BCBCBC);

    color: var(--text-primary, #0C0C0C);
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%;
}

.ManageEntrepriseMembresFiltreActif {
    background: var(--surface-tag-primary, #343434);
    color: var(--text-secondary, #F5F5F5);
}

.ManageEntrepriseSectionTopRight > button.ManageEntrepriseSectionTopRightButtonActif {
    background: var(--surface-tag-primary, #343434);
}

.ManageEntrepriseMembresVide {
    align-self: stretch;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 1rem 1rem;
    box-sizing: border-box;

    color: var(--text-primary, #0C0C0C);
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
}

.ManageEntrepriseResultPhotos {
    display: flex;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    padding: var(--Component-Profile-General-Margin-top-bottom, 0) var(--Component-Profile-General-Margin-left-right, 0);
    align-items: flex-start;
    align-content: flex-start;
    gap: 28px var(--Component-Profile-General-gutter-1, 28px);
    flex-wrap: wrap;
}

.ManageEntrepriseResultCartesEntreprises {
    gap: 1.5rem;
    padding: 1rem;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
    overflow-x: scroll;
    display: flex;
}

.MesEntreprisesMainHeader {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: var(--Space-800, 2rem) var(--Space-1500, 3.75rem);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--Space-500, 1.25rem);
    background: var(--neutral-400, #DDD);
}

.MesEntreprisesMainHeaderLeftSection {
    display: flex;
    /* width: 11.9375rem; */
    flex: 1 1 18rem;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-300, 0.75rem);
}

.matheo {
    
}

.MesEntreprisesMainHeaderLeftSectionLabel {
    align-self: stretch;
    color: var(--neutral-300, #848484);
    leading-trim: both;
    text-edge: cap;

    /* Body/Regular/large */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-large, 1.1875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-regular, 400);
    line-height: 120%; /* 1.425rem */
}

.MesEntreprisesMainHeaderLeftSectionTitle {
    align-self: stretch;
    color: var(--neutral-200, #343434);
    leading-trim: both;
    text-edge: cap;

    /* Heading/h2 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h2, 2.625rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 3.15rem */
}

.MesEntreprisesMainHeaderRightSection {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--Space-500, 1.25rem);
}

.MesEntreprisesMainHeaderRightSection > button {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-200, #343434);
    border: none;

    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
}

.ManageEntrepriseSections {
    display: flex;
    padding: var(--Space-900, 2.25rem);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-900, 2.25rem);
    align-self: stretch;
    
    border-radius: var(--border-radius-200, 0.75rem);
    background: var(--neutral-400, #DDD);
}

.ManageEntreprisePhotos {
    display: flex;
    width: 414.667px;
    height: 215.308px;
    padding: 5px 390.667px 192.308px 6px;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 52/27;
    border-radius: var(--border-radius-none, 0);
    border: var(--Border-100, 2px) solid var(--Color-Neutral-200, #3D3D3D);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.PopupPhotosResultEntreprise {
    display: flex;
    padding: var(--Component-Profile-General-Margin-top-bottom, 0) var(--Component-Profile-General-Margin-left-right, 0);
    align-items: flex-start;
    align-content: flex-start;
    gap: 28px var(--Component-Profile-General-gutter-1, 28px);
    overflow-x: auto;
    width: 100%;
    height: 225px;
    margin-bottom: 50px;
}

.ManageEntreprisePhotosEmpty {
    width: 414.667px;
    height: 215.308px;
    flex-shrink: 0;
    aspect-ratio: 52/27;
    border-radius: var(--border-radius-none, 0);
    border: var(--Border-100, 2px) dashed var(--Color-Neutral-200, #3D3D3D);
}

.ManageEntreprisePhotosCross {
    cursor: pointer;
}

.ManageEntrepriseMainTitle {
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    
    /* Heading/h5 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h5, 1.625rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 140%; /* 2.275rem */
}

.LittleTextAddNewMember {
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: italic;
    text-align: center;
    align-self: center;
}

.ManageEntreprisePopup {
    /* shape 2 */
    box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.50);
    position:absolute;
    z-index: 800;
    display: flex;
    width: 15.625rem;
    max-width: 15.625rem;
    padding: var(--Space-300, 0.75rem);
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-400, #DDD);
}

.ManageEntreprisePopup > div 
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-200, 0.5rem);
    align-self: stretch;
    width: 100%;
}

.ManageEntreprisePopupButton {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: flex-start;
    align-items: center;
    gap: 0.625rem;   
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-300, #848484);

    color: var(--neutral-500, #F5F5F5);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
    border: none;
    text-align: start;
    width: 100%;
}

.ManageEntreprisePopupButton:disabled{
    color: var(--Text-Neutral-Secondary, #BCBCBC);
    text-align: center;


    /* Body/Bold/Base */
    font-family: var(--Text-Body-Font-family, Inter);
    font-size: var(--Text-Body-Size-base, 18px);
    font-style: normal;
    font-weight: var(--Text-Body-Font-weight-bold, 700);
    line-height: 140%; /* 25.2px */

    border-radius: var(--Radius-100, 6px);
    border: var(--Border-100, 2px) solid var(--Border-Neutral-Secondary, #BCBCBC);
    background: var(--Background-Neutral-Primary, #DDD);
}

.DeleteManageEntreprisePopupButtonContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.MdpLabelChangeProprietaire {
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h5, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%;
    width: 100%;
}

.MdpInputChangeProprietaire {
    padding-bottom: 10px;
    width: 100%;
    background: white;
}

.MdpLabelAndInputChangeProprietaire {
    width: 100%;
    padding-bottom: 20px;
}

.ChangeProprietaireManageEntreprisePopupButtonContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ChangeProprietaireEntrepriseContainer {
    display: flex;
    flex-direction: column;
    gap: var(--Space-300, 12px);
    align-self: stretch;
    padding-bottom: 50px;
}

.AllPossibleMemberChangeResultContainer {
    gap: 10px;
    display: flex;
    flex-direction: column;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
}

/* recapitulatif de ce qui sera detruit avec l'entreprise */
.DeleteEntrepriseRecap {
    display: flex;
    flex-direction: column;
    gap: var(--Space-300, 12px);
    align-self: stretch;
}

.DeleteEntrepriseRecapIntro {
    color: var(--text-primary, #0C0C0C);
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    line-height: 140%;
}

.DeleteEntrepriseRecapList {
    display: flex;
    flex-direction: column;
    gap: var(--Space-100, 4px);
    margin: 0;
    padding-left: var(--Space-500, 1.25rem);
    list-style: disc;
    color: var(--text-primary, #0C0C0C);
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    line-height: 140%;
}

/* les deux classes sont necessaires: .ManageEntreprisePopupEditButton est definie plus bas
   dans le fichier et reprendrait sinon le dessus avec sa couleur orange */
.ManageEntreprisePopupEditButton.ManageEntrepriseDeleteButton {
    background: var(--surface-danger, #E5101D);
    color: var(--text-secondary, #F5F5F5);
}

#manage_entreprise_popup {
    position: relative;
}

.ManageEntrepriseEditPopup {
    /* width: 31.25rem;
    height: 20.125rem;
    max-width: 31.25rem; */
    padding: var(--Space-1500, 3.75rem);
    flex-direction: column;
    align-items: center;
    align-content: center;
    gap: var(--Space-800, 2rem);
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--Background-Neutral-Primary, #DDD);
    position:absolute;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    /* max-height: 33.6rem; */
    overflow-y: auto;
    box-sizing: border-box;
    max-width: calc(100vw - 2rem);
    max-height: 90vh;
}

.MemberPossibleNewProprietaire {
    width: 100%;
    height: auto;
    border: 4px solid var(--Background-Neutral-Primary, #bebdbd);
}

.MemberPossibleNewProprietaireSelected {
    border: 4px solid var(--surface-tertiary, #F07D00);
}

.ManageEntrepriseEditPopupContent {
    width: 100%;
    justify-content: center;
    flex-direction: column;
    display: flex;
    gap: var(--Space-800, 2rem);
}

/* sur la page "Mes entreprises" le popup se trouve dans la colonne etroite de la liste:
   on le sort du flux pour le centrer sur la fenetre, sinon il prend la largeur de la liste */
.ManageEntrepriseEditPopup.ManageEntrepriseEditPopupFixed {
    position: fixed;
    width: 31.25rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    padding: var(--Space-800, 2rem);
}

.PopupModifierMembre {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.PopupModifierMembreTextContainer {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    gap: var(--Space-300, 12px);
    align-self: stretch;
    width: 100%;
}

.PopupModifierMembreBigText {
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h5, 1.4rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%;
}

.PopupModifierMembreTextContainerPlusPadding {
    padding-bottom: 50px;
}

.PopupModifierMembreAllCartesEntrepriseResult {
    display: flex;
    gap: 16px;
    width: 100%;
    overflow-x: auto;
}

.MesEntreprisesResultEditButton {
    width: 20px;
    align-content: flex-end;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.select2-container--krajee-bs5 .select2-selection--multiple {
    height: auto !important;
    min-height: 38px;
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px;
    padding: 4px;
    white-space: normal !important;
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice {
    margin: 2px !important;
    float: none !important;
}

.ManageEntreprisePopupEditButton {
    display: flex;
    padding: var(--Space-500, 1.25rem);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-tertiary, #F07D00);
    border: none;

    color: var(--text-primary, #0C0C0C);
    text-align: center;
    leading-trim: both;
    text-edge: cap;

    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
    width: 100%;
}

.SelectCarteEntreprise {
    border: 5px solid #F07D00;
}

/* pastilles d'affiliations du popup "Modifier le membre": meme apparence que les
   affiliations de la section "Les affiliations", mais cliquables pour les (de)selectionner */
.PopupModifierMembreAllAffiliations {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--Space-300, 12px);
    width: 100%;
}

/* le contour est un box-shadow interne et pas une bordure: la pastille garde exactement
   la meme taille qu'une affiliation de la section "Les affiliations", au survol comme
   une fois selectionnee (pas de saut de mise en page) */
.ManageEntrepriseAffiliationSelectable {
    height: auto;
    min-height: 38px;
    max-width: 100%;
    color: var(--Text-Neutral-Tertiary, #F5F5F5);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ManageEntrepriseAffiliationSelectable > p {
    overflow-wrap: anywhere;
}

.ManageEntrepriseAffiliationSelectable:hover {
    box-shadow: inset 0 0 0 var(--Border-100, 2px) var(--surface-tertiary, #F07D00);
}

.ManageEntrepriseCurrentAffiliation.SelectAffiliation {
    background: var(--surface-tertiary, #F07D00);
    color: var(--text-primary, #0C0C0C);
}

.ManageEntrepriseCurrentAffiliation.SelectAffiliation > p {
    color: var(--text-primary, #0C0C0C);
    font-weight: var(--type-font-weight-bold, 700);
}

/* la coche n'apparait que sur les affiliations selectionnees */
.ManageEntrepriseAffiliationCheck {
    display: none;
    flex-shrink: 0;
}

.SelectAffiliation > .ManageEntrepriseAffiliationCheck {
    display: block;
}

.PopupModifierMembreEmptyText {
    color: var(--text-disable, #848484);
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: italic;
}

.ManageEntrepriseMesAffiliationsInput {
    display: flex;
    height: 44px;
    padding: 11px 36px 11px 17px;
    align-items: center;
    align-self: stretch;
    border-radius: var(--Radius-100, 6px);
    border: var(--Border-100, 2px) solid var(--Border-Neutral-Secondary, #BCBCBC);
    background: var(--Background-Neutral-Primary, #DDD);
}

.PopupBiggerManageEntreprise {
    width: 60%;
    height: 60%;
}

.ManageEntrepriseEditPopup > #popup_title {
    align-self: stretch;
    color: var(--text-primary, #0C0C0C);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    
    /* Heading/h5 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h5, 1.625rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.95rem */
}

.PdpManageEntreprise {
    width: 158px;
    height: 158px;
    max-width: 100%;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    border-radius: var(--Radius-100, 6px);
    border: var(--Border-100, 2px) solid var(--Border-Neutral-Secondary, #BCBCBC);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
    align-self: center;
    margin-bottom: 30px;
}

.PopupAutresInformationsManageMembre > textarea
{
    /* regular */
    font-family: var(--font-family-primary, Inter);
    font-size: var(--body-regular, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 22.4px */
    background: transparent;
    border: transparent;
    outline: none;
    width: 100%;
    height: 100%;
    resize: none;
}

.PopupAutresInformationsManageMembre
{
    display: flex;
    height: 14rem;
    padding: var(--Space-600, 1.5rem) var(--Space-400, 1rem);
    align-items: flex-start;
    gap: 0.625rem;
    align-self: stretch;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    width: 100%;
}

.ChangeMemberLockAndContent {
    display: flex;
    width: 100%;
    align-items: center;
}

.PopupModifierMembreTextContainerNameContent {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.PopupModifierMembreTextContainerNameContent p:first-child {
    color: var(--text-primary, #0C0C0C);
    leading-trim: both;
    text-edge: cap;
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h5, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%;
} 


.ManageEntreprisePopupEditInput {
    display: flex;
    height: 3.75rem;
    /* padding: 0rem 12.5rem 0rem 0.875rem; */
    margin-right: 12.5rem;
    align-items: center;
    align-self: stretch;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    border: none;
    width: 100%;
}

/* Conteneur du radio + label */
.ManageEntreprisecustom-radio-label {
    display: block;
    margin-bottom: 0.5rem;
    cursor: pointer;
    border-radius: 0.5rem;
    overflow: hidden;
    width: 100%; /* 🔧 Assure qu'il prend toute la largeur dispo */
}

/* L'input est caché */
.ManageEntreprisecustom-radio-label input[type="radio"] {
    display: none;
}

/* Le bloc visible (le "label" stylisé) */
.ManageEntreprisecustom-radio-content {
    background-color: #848484;
    color: #F5F5F5;
    padding: 0.75rem;
    text-align:left;
    font-weight: bold;
    transition: all 0.2s ease;
    border-radius: inherit; /* 🧽 hérite du parent pour garder les coins uniformes */
    width: 100%;
    display: block; /* 🔧 Pour forcer le bloc à s'étirer horizontalement */
    box-sizing: border-box; /* pour éviter qu'il dépasse avec le padding */
}

/* Quand le radio est sélectionné */
.ManageEntreprisecustom-radio-label input[type="radio"]:checked + .ManageEntreprisecustom-radio-content {
    background: var(--surface-tag-primary, #343434);
}

.ManageEntrepriseCarteEmployerLeftSection {
    display: flex;
    flex-direction: column;
    justify-content: flex-end ;
}



.ManageEntrepriseCarteEmployerForm {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.ManageEntrepriseCarteEmployerImage {
    height: 10.375rem;
    aspect-ratio: 1/1;
    border-radius: var(--Space-100, 0.25rem);
    border: 4px solid var(--color-neutral-100, #0C0C0C);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
    margin-bottom: 10px;
    width: 166px;
    height: 166px;
}

.ManageEntrepriseCarteEmployerPhoto {
    display: flex;
    width: 292px;
    height: 151.615px;
    padding: 5px 268px 128.615px 6px;
    align-items: center;
    aspect-ratio: 52/27;
    margin-bottom: 10px;
    border-radius: var(--Space-100, 0.25rem);
    border: 4px solid var(--color-neutral-100, #0C0C0C);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.ManageEntrepriseCarteEmployerImageButton {
    display: flex;
    padding: var(--Space-300, 0.75rem);
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--surface-primary, #0C0C0C);
    color: var(--text-secondary, #F5F5F5);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Bold/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.2rem */
    border: none;
}

.ManageEntrepriseCarteEmployerTextArea {
    display: flex;
    height: 11.9375rem;
    padding: var(--Space-600, 1.5rem) var(--Space-400, 1rem);
    align-items: flex-start;
    gap: 0.625rem;
    align-self: stretch;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
    border: none;
    width: 100%;
    resize: none;
}

.ManageEntreprisePopupEmployerMetierPopup {
    width: 100%;
}

#popup_tags {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--space-200, 20px);
    align-self: stretch;
    flex-wrap: wrap;
}

.select2-container--bootstrap5 {
    width: 100% !important;
}

.select2-selection--single {
    background-color: white !important;
    border: 1px solid #ced4da !important;
    height: 38px !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.375rem !important;
}


select2-container--bootstrap5 .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #6c757d;
    cursor: pointer;
}

.select2-container--bootstrap5 .select2-selection--single {
    position: relative;
}

.select2-container .select2-selection--single {
    position: relative;
}

.select2-container .select2-selection--single .select2-selection__clear {
    position: relative;
    left: 314.2px;
  }



.ManageEntrepriseCartesEmployer {
    display: flex;
    width: 17.5rem;
    min-width: 12.5rem;
    max-width: 20rem;
    padding: var(--Space-600, 1.5rem);
    flex-direction: column;
    align-items: center;
    border-radius: var(--border-radius-100, 0.5rem);
    background: var(--neutral-500, #F5F5F5);
}

.ManageEntrepriseCartesEmployerImage {
    height: 11.625rem;
    align-self: stretch;
    border-radius: var(--Space-100, 0.25rem);
    border: 2px solid var(--color-neutral-400, #DDD);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
    margin-bottom: 20px;
}

.ManageEntrepriseCartesEmployerNomPrenom {
    color: var(--neutral-200, #343434);
    leading-trim: both;
    text-edge: cap;
    
    /* Heading/h6 */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-heading-h6, 1.375rem);
    font-style: normal;
    font-weight: var(--type-font-weight-bold, 700);
    line-height: 120%; /* 1.65rem */
    align-self: stretch;
    margin: 0;
}

.ManageEntrepriseCartesEmployerMiniText {
    align-self: stretch;
    color: var(--neutral-300, #848484);
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Medium/medium */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-medium, 1rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.2rem */
}

.ManageEntrepriseCartesEmployerQuelquesMots {
    padding-top: 20px;
    align-self: stretch;
    color: var(--neutral-200, #343434);

    /* Body/Medium/large */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-large, 1.1875rem);
    font-style: normal;
    font-weight: var(--type-font-weight-medium, 500);
    line-height: 120%; /* 1.425rem */
    margin-bottom: 0;
}

.ManageEntrepriseCartesEmployerMainTitle {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.ManageEntrepriseCartesEmployerDots {
    align-items: center;
    justify-items: center;
    display: flex;
    height: 100%;
    width: 20px;
    align-content: center;
    justify-content: center;
    cursor: pointer;
}

.ManageEntrepriseCartesEmployerBottomText {
    align-self: stretch;   
    color: var(--primary-400, #C97213);
    text-align: right;
    leading-trim: both;
    text-edge: cap;
    
    /* Body/Body Italic/small */
    font-family: var(--type-font-family-primary, Inter);
    font-size: var(--font-size-body-small, 0.875rem);
    font-style: italic;
    font-weight: 700;
    line-height: 120%; /* 1.05rem */
}

.ManageEntrepriseCartesEmployerMiddlePart {
    margin-bottom: 10px;
    align-self: stretch;
}

@media (max-width: 1024px) {
    .MesEntreprisesMainHeader {
        padding: var(--Space-500, 1.25rem) var(--Space-800, 2rem);
    }

    .MesEntreprisesMainHeaderLeftSectionTitle {
        font-size: var(--font-size-heading-h3, 2rem);
    }

    .ManageEntrepriseAllSections {
        gap: var(--Space-900, 2.25rem);
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .ManageEntrepriseSections {
        padding: var(--Space-600, 1.5rem);
        gap: var(--Space-600, 1.5rem);
    }
}

@media (max-width: 700px) {
    .ManageEntrepriseAllSections {
        gap: var(--Space-600, 1.5rem);
        padding: 32px var(--Space-300, 0.75rem) 80px var(--Space-300, 0.75rem);
    }

    .MesEntreprisesMainHeader {
        padding: var(--Space-400, 1rem) var(--Space-400, 1rem);
    }

    .MesEntreprisesMainHeaderLeftSectionTitle {
        font-size: var(--font-size-heading-h4, 1.75rem);
        overflow-wrap: anywhere;
    }

    .ManageEntrepriseSections {
        padding: var(--Space-400, 1rem);
        gap: var(--Space-500, 1.25rem);
    }

    .ManageEntrepriseResult {
        grid-template-columns: none;
        padding: 0;
    }

    .ManageEntrepriseMembresToolbar,
    .ManageEntrepriseResultAffiliations,
    .ManageEntrepriseResultCartesEntreprises {
        padding-left: 0;
        padding-right: 0;
    }

    .ManageEntrepriseMembresVide {
        padding-left: 0;
        padding-right: 0;
    }

    .ManageEntrepriseMembresToolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ManageEntrepriseMembresSearch {
        flex: 0 0 auto;
        height: 38px;
        padding: var(--Space-200, 8px) var(--Space-300, 12px);
    }

    .ManageEntrepriseMembresFiltres {
        justify-content: flex-start;
    }

    .ManageEntrepriseMembresFiltre {
        flex: 0 0 auto;
    }

    .ManageEntrepriseSectionTop {
        align-items: center;
    }

    .ManageEntrepriseMainTitle {
        flex: 1 1 auto;
        align-self: auto;
        font-size: var(--font-size-heading-h6, 1.25rem);
    }

    .OnlyWebSectionEntreprise {
        display: none !important;
    }

    .OnlyMobileSectionEntreprise {
        display: flex !important;
    }

    .PopupBiggerManageEntreprise {
        width: 90%;
        padding: 1rem;
    }

    .ManageEntrepriseEditPopup {
        width: 90%;
        padding: 1rem;
    }



    .CreateEntrepriseSectionTop {
        flex-direction: column;
        gap: 30px;
    }

    .ManageEntrepriseCarteEmployerLeftSection {

        align-items: center;
    }

    .ManageEntrepriseResultPhotos {
        overflow-x: auto;
        width: 100%;
        flex-wrap: nowrap;
    }
}

/* Fin de la page messages (backoffice/manageEntreprise) */


/* Debut de la page messages (backoffice/messages) */

.siteVcardMessages{
    display: flex;
    height: 100%;
}

.leftMessages{
    display: flex;
    width: 25%;
    /* height: 990px; */
    padding: 55px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 60px);
    flex-direction: column;
    align-items: center;
    gap: 32px;
    flex-shrink: 0;

    transition: transform 0.5s ease-in-out;

    background: var(--grey-02_5, #C8C8C8);
}

.leftMessagesTop{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Style-ions-New-group-Font-size-H2, 24px);
    align-self: stretch;
}

.leftMessagesTopLink{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.leftMessagesTopLinkItself{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
}

.leftMessagesTopLinkItselfDiv{
    display: flex;
    width: var(--width-200, 40px);
    height: var(--height-220, 40px);
    padding: var(--space-80, 6px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-50, 4px);
    flex-shrink: 0;

    border-radius: var(--border-md, 8px);
    background: var(--background-secondary-primary, #DFDFDF);
}


.leftMessagesTopLinkItselfArianeText{
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-H2, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.leftMessagesTopLinkFilter{
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftMessagesTopLinkFilterBouton {
    display: flex;
    padding: 6px var(--Style-ions-New-group-Radius, 10px);
    justify-content: center;
    align-items: center;
    gap: 4px;

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    background: var(--Style-ions-New-group-Grey-04, #1B1B1B);

    color: var(--Style-ions-New-group-Grey-01, #F4F4F4);
    text-align: center;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */

    /* Ajout pour enlever le contour blanc au focus */
    outline: none; /* Désactive le contour par défaut au focus */
    border: none;  /* S'il y a une bordure, elle est désactivée */
    box-shadow: none; /* Désactive toute ombre portée */
}

/* Optionnel : Si vous souhaitez également empêcher le contour au focus */
.leftMessagesTopLinkFilterBouton:focus {
    outline: none; /* Empêche le contour lors du focus */
    box-shadow: none; /* Supprime toute ombre au focus */
}

.leftMessagesTopInput{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: flex-start; */
    gap: 4px;
    align-self: stretch;
}

.leftMessagesTopInputContainer {
    display: flex;
    position: relative;
    align-items: center;
    padding: 12px 12px;
    background: var(--Style-ions-New-group-Grey-02, #DFDFDF);
    border: 2px solid var(--Style-ions-New-group-Grey-04, #1B1B1B);
    border-radius: 10px;
}

/* Style pour l'input */
.leftMessagesTopInputContainerInput {
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    padding-right: 40px; /* Pour éviter que le texte chevauche l'icône */
    font-size: 16px;
}

/* Positionner l'icône SVG à l'intérieur de l'input */
.leftMessagesTopInputContainerIcon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.leftMessagesBot{
    display: flex;
    height: 100%;
    padding: var(--Style-ions-New-group-Radius, 10px) 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    /* flex-shrink: 0; */
    align-self: stretch;
    overflow-y: auto;
}

.leftMessagesBotUserContainer{
    display: flex;
    padding: var(--Style-ions-New-group-Margin-input-left-right1, 12px);
    align-items: center;
    align-content: center;
    gap: 0px 8px;
    align-self: stretch;
    flex-wrap: wrap;

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    background: var(--Style-ions-New-group-Grey-02, #DFDFDF);
}

.leftMessagesBotUserContainerPicture{
    /* border-radius: 62.5px; */
    border-radius: var(--border-xl, 16px);
    border: 4px solid var(--border-primary-secondary, #BFBFBF);
    /* border: 3.75px solid var(--Style-ions-New-group-Grey-04, #1B1B1B); */
    /* background: url(<path-to-image>) lightgray -3.677px 0.165px / 126.864% 190.296% no-repeat; */

    /* width: 50px; */
    height: 50px;
}

.leftMessagesBotUserContainerInformations{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
}

.leftMessagesBotUserContainerInformations > * {
    margin: 0;
}

.leftMessagesBotUserContainerInformationsName{
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.leftMessagesBotUserContainerInformationsLastmessage{
    overflow: hidden;
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    text-overflow: ellipsis;
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 1; */
    align-self: stretch;
}

.rightMessages{
    display: flex;
    width: 75%;
    /* width: 1405px; */
    /* height: 990px; */
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;

    /* transform: translateX(100%);
    transition: transform 0.5s ease-in-out; */
    transition: transform 0.5s ease-in-out;
}

.rightMessagesTop{
    display: flex;
    padding: 55px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 60px) var(--Style-ions-New-group-Font-size-H2, 24px) var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 60px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Style-ions-New-group-Radius, 10px);
    align-self: stretch;
}

.rightMessagesTopContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
}

.rightMessagesTopContainerButton{
    display: flex;
    width: var(--width-200, 40px);
    height: var(--height-220, 40px);
    padding: var(--space-80, 6px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-50, 4px);
    flex-shrink: 0;

    border-radius: var(--border-md, 8px);
    background: var(--background-secondary-primary, #DFDFDF);

    /* Ajout pour enlever le contour blanc au focus */  
    outline: none; /* Désactive le contour par défaut au focus */
    border: none;  /* S'il y a une bordure, elle est désactivée */
    box-shadow: none; /* Désactive toute ombre portée */
}

.rightMessagesTopContainerName{
    color: var(--Style-ions-New-group-Grey-04, #1B1B1B);
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-H2, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    flex: 1 0 0;
}

.rightMessagesMiddle{
    display: flex;
    padding: 0px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 60px);
    flex-direction: column;
    /* justify-content: flex-end; */
    align-items: center;
    gap: var(--Style-ions-New-group-Font-size-p, 16px);
    flex: 1 0 0;
    align-self: stretch;
    overflow-y: auto;
}


.rightMessagesMiddleSent{
    display: flex;
    width: 336px;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom01, 12px) var(--Style-ions-New-group-Margin-pages, 20px);
    align-items: center;
    justify-content: flex-end; /* Aligne le contenu à droite */
    gap: 2px;

    border-radius: var(--Style-ions-New-group-Radius, 10px) var(--Style-ions-New-group-Radius, 10px) var(--Style-ions-New-group-Radius, 0px) 10px;
    background: var(--Style-ions-New-group-Primary-yellow-02, #C97213);
    align-self: flex-end; /* Place le message envoyé à droite */
}

.rightMessagesMiddleSent > * {
    margin: 0;
}

.rightMessagesMiddleReceived{
    display: flex;
    width: 336px;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom01, 12px) var(--Style-ions-New-group-Margin-pages, 20px);
    align-items: center;
    justify-content: flex-start; /* Aligne le contenu à gauche */
    gap: 2px;

    border-radius: var(--Style-ions-New-group-Radius, 10px) var(--Style-ions-New-group-Radius, 10px) var(--Style-ions-New-group-Radius, 10px) 0px;
    background: var(--Style-ions-New-group-Primary-yellow-03, #985E20);
    align-self: flex-start; /* Place le message reçu à gauche */
}

.rightMessagesMiddleReceived > * {
    margin: 0;
}

.rightMessagesMiddleSentText{
    flex: 1 0 0;

    color: var(--Style-ions-New-group-Grey-01, #F4F4F4);
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 132%; /* 21.12px */
}

.rightMessagesMiddleReceivedText{
    flex: 1 0 0;

    color: var(--Style-ions-New-group-Grey-01, #F4F4F4);
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 132%; /* 21.12px */
}

.rightMessagesMiddleState{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    align-self: stretch;
}

.rightMessagesMiddleStateText{
    color: var(--Style-ions-New-group-Grey-03, #585858);
    font-family: var(--Style-ions-New-group-Font-Family-inter, Inter);
    font-size: var(--Style-ions-New-group-Font-size-p3, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 132%; /* 15.84px */
}



.rightMessagesbot{
    display: flex;
    padding: var(--Style-ions-New-group-Margin-pages, 20px) 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Style-ions-New-group-Radius, 10px);
    align-self: stretch;

    background: var(--Style-ions-New-group-Grey-01, #F4F4F4);
}

.rightMessagesbotcontainer{
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.rightMessagesbotcontainerInput{
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    padding-right: 40px; /* Pour éviter que le texte chevauche l'icône */
    font-size: 16px;
}

.rightMessagesbotcontainerIcon{
    display: flex;
    padding: var(--Style-ions-New-group-Margin-input-top-bottom01, 12px) var(--Style-ions-New-group-Margin-input-left-right1, 12px);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    width: 95%;

    border-radius: var(--Style-ions-New-group-Radius, 10px);
    border: 2px solid var(--Style-ions-New-group-Grey-04, #1B1B1B);
    background: var(--Style-ions-New-group-Grey-02, #DFDFDF);
}

.rightMessagesbotcontainerIconButton{
    display: flex;
    width: var(--width-350, 54px);
    height: var(--height-300, 54px);
    padding: var(--space-80, 6px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-50, 4px);
    flex-shrink: 0;

    border-radius: var(--border-xl, 16px);
    background: var(--background-default-default, #F07D00);

    /* Ajout pour enlever le contour blanc au focus */
    outline: none; /* Désactive le contour par défaut au focus */
    border: none;  /* S'il y a une bordure, elle est désactivée */
    box-shadow: none; /* Désactive toute ombre portée */
    
}




@media (max-width: 1600px) {

    .rightMessages{
        width: 65%;
    }
    
    .leftMessages{
        width: 35%;
    }

}

@media (max-width: 1250px) {

    main:has(> .siteVcardMessages) {
        overflow: hidden;
    }

    .rightMessages{
        /* display : none; */
        width: 100%;

    }

    .leftMessages{
        width: 100%;
    }

    .leftMessagesTopLinkItself{
        justify-content: left !important;
    }


    .rightMessagesMiddle{
        padding: 0px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 10px);
        padding-bottom: 10px;
        background-color: #DFDFDF;
    }

    .rightMessagesTop{
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 0px !important;
        padding-left: 10px !important;
    }

}

@media (max-width: 500px) {

    .leftMessages{
        padding: 10px var(--Abonnement-Professionnel-Prix_Professionnel-abonnement, 10px);
    }

    .rightMessagesMiddleSent, .rightMessagesMiddleReceived{
        width: 50% !important;
    }

    .siteVcardMessages{
        position: relative;
    }

    .rightMessages{
        /* flex-grow: 0 !important; /* Permet à la div de s'étendre */
        position: fixed;
        top: 0%;
        right: -100%;
        width: 100%;
        /* height: 50%; */
        height: 100% !important;

    }

    .MiddleInformationCardFourSectionPicture{
        justify-content: center;
        align-items: center;
    }

}

.displayUnsetTranslate{
    display : flex !important;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out;
}

.displayNoneTranslate{
    /* display : none !important; */
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out;
    /* display: none; */
}

.displayNone{
    display: none !important;
}

/* 
.form-control{
    width: Fill (281px)px;
    height: Hug (43px)px;
    padding: var(--Style-ionsNewgroupMargin-input-top-bottom01) var(--Style-ionsNewgroupMargin-input-left-right1) var(--Style-ionsNewgroupMargin-input-top-bottom01) var(--Style-ionsNewgroupMargin-input-left-right1);
    gap: 0px;
    border-radius: var(--Style-ionsNewgroupRadius);
    border: 2px 0px 0px 0px;
    justify: space-between;
    opacity: 0px;

} */

/* .form-label{
    display: none;
} */

/* .titreSignUp{
    font-size: 10rem;
    font-weight: bold;
    width: fit-content;
    filter: drop-shadow(10px 7px 4px #000);
    color: #f07d00;

}
 */